/* Skeuomorphism — leather, paper, stitching and bevels; depth earned, not applied */

body {
    --leather-1: #6b4a2f;
    --leather-2: #4e3521;
    --paper: #f3ebdc;
    --ink: #3a2c1e;
    --stitch: rgba(243, 235, 220, .45);

    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .08), transparent 55%),
        linear-gradient(160deg, var(--leather-1), var(--leather-2));
    background-attachment: fixed;
    color: var(--ink);
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1.65;
}

.site-head {
    border-bottom: 2px solid #2e1f12;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .18)),
        var(--leather-2);
    box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .35);
}
.brand {
    font-size: 1.12rem;
    color: #f3ebdc;
    letter-spacing: .02em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
.site-head nav a {
    color: #e2d6c3;
    border-bottom: none;
    font-size: .88rem;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
.site-head nav a:hover { color: #ffffff; }

.hero { padding: 4.5rem 0 3.5rem; }
.hero > .wrap {
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .015) 0 2px, transparent 2px 4px),
        var(--paper);
    border-radius: 8px;
    padding: 2.6rem 2.4rem 2.8rem;
    box-shadow:
        0 18px 40px -18px rgba(0, 0, 0, .8),
        inset 0 1px 0 #ffffff,
        inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.eyebrow {
    color: #8a6a45;
    letter-spacing: .16em;
    font-size: .72rem;
    border-bottom: 1px solid #d8cbb4;
    display: inline-block;
    padding-bottom: .3rem;
    margin-bottom: 1.4rem;
}
.hero h1 {
    color: #2e2114;
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: -.01em;
    text-shadow: 0 1px 0 #ffffff;
}
.lede { color: #5a4a37; font-size: 1.02rem; }

.btn {
    border-radius: 6px;
    background: linear-gradient(180deg, #9d7c56 0%, #7a5c3c 52%, #664b30 100%);
    border: 1px solid #3f2c1a;
    color: #fdf6e9;
    font-family: Georgia, serif;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -2px 4px rgba(0, 0, 0, .3),
        0 3px 6px rgba(0, 0, 0, .35);
}
.btn:hover {
    background: linear-gradient(180deg, #a98a63 0%, #86663f 52%, #705234 100%);
    transform: none;
}
.btn.ghost {
    background: linear-gradient(180deg, #f7f0e2, #e2d6c1);
    color: #4a3925;
    border: 1px solid #c2b298;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
    box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 3px rgba(0, 0, 0, .12);
}
.btn.ghost:hover { background: linear-gradient(180deg, #fffaf0, #eae0cd); }

.services { border-top: none; }
.services > .wrap { gap: 1.5rem; }
.services article {
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .012) 0 3px, transparent 3px 6px),
        var(--paper);
    border-radius: 6px;
    padding: 1.9rem 1.6rem;
    box-shadow:
        0 12px 26px -14px rgba(0, 0, 0, .75),
        inset 0 1px 0 #ffffff,
        inset 0 0 0 1px rgba(0, 0, 0, .05);
    position: relative;
}
/* stitched border */
.services article::before {
    content: '';
    position: absolute;
    inset: 9px;
    border: 1px dashed #c4b49a;
    border-radius: 3px;
    pointer-events: none;
}
.services h2 { color: #2e2114; font-weight: 400; font-size: 1.18rem; }
.services p { color: #5a4a37; }
.num {
    color: #9a7d55;
    letter-spacing: .3em;
    font-size: .7rem;
    margin-bottom: 1rem;
}

.quote { border-top: none; }
.quote > .wrap {
    background: var(--paper);
    border-radius: 6px;
    padding: 2.4rem 2.2rem;
    box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .75), inset 0 1px 0 #fff;
}
.quote blockquote { color: #2e2114; font-style: italic; max-width: 30ch; }
.quote cite { color: #7b6749; }

.cta { border-top: none; }
.cta > .wrap {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .16)),
        var(--leather-2);
    border: 1px solid #2c1d10;
    border-radius: 8px;
    padding: 2.2rem 2rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.cta h2 { color: #f3ebdc; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); font-weight: 400; }
.cta p { color: #cbbba3; }

footer { border-top: none; }
footer .wrap { color: #c0af97; font-size: .78rem; }
.back-chip {
    background: linear-gradient(180deg, #9d7c56, #664b30);
    border: 1px solid #3f2c1a;
    border-radius: 6px;
    color: #fdf6e9;
    font-family: Georgia, serif;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
    opacity: 1;
}