:root {
--char:#202124;
    --cu:#B8734A;
    --iv:#F5F1E8;
    --wh:#fff;
    --tx:#3A3A3A;
    --r:22px;
    --ease:cubic-bezier(.2,.7,.2,1)}

 * {
box-sizing:border-box;
    margin:0;
    padding:0}

html {
scroll-behavior:smooth;
    scroll-padding-top:84px}

 body {
font:400 1.0625rem/1.7 Figtree,system-ui,sans-serif;
    color:var(--tx);
    background:var(--wh);
    overflow-x:hidden}

 img {
max-width:100%;
    height:auto;
    display:block}

a {
color:inherit}

ul,ol {
list-style:none}

 h1,h2,h3 {
font-family:Fraunces,Georgia,serif;
    color:var(--char);
    line-height:1.12;
    font-weight:700}

 h1 {
font-size:clamp(2.5rem,6.2vw,4.9rem);
    letter-spacing:-.02em}

h2 {
font-size:clamp(1.9rem,3.6vw,2.8rem);
    margin-bottom:1rem}

h3 {
font-size:1.25rem;
    margin-bottom:.5rem}

 .wrap {
width:min(1180px,92%);
    margin:auto}

.narrow {
width:min(820px,92%)}

 .sr,.skip:not(:focus) {
position:absolute;
    left:-9999px}

.skip:focus {
position:fixed;
    top:8px;
    left:8px;
    background:var(--cu);
    color:var(--char);
    padding:.5rem 1rem;
    z-index:99}

 :focus-visible {
outline:3px solid var(--cu);
    outline-offset:3px}

 /* header */ .site-header {
position:sticky;
    top:0;
    z-index:50;
    background:rgba(32,33,36,.94);
    backdrop-filter:blur(10px);
    transition:box-shadow .3s}

 .site-header.stuck {
box-shadow:0 8px 30px rgba(0,0,0,.25)}

 .nav {
display:flex;
    align-items:center;
    justify-content:space-between;
    height:74px}

 .logo {
display:flex;
    align-items:center;
    gap:.65rem;
    text-decoration:none;
    font:700 1.45rem Fraunces,serif;
    color:var(--iv)}

 .logo-ico {
display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:14px 14px 14px 4px;
    background:var(--cu);
    color:var(--char);
    font-size:1.15rem}

 .menu {
display:flex;
    align-items:center;
    gap:2.5rem}

.menu a:not(.btn) {
color:var(--iv);
    text-decoration:none;
    font-weight:500;
    font-size:1rem;
    position:relative}

 .menu a:not(.btn)::after {
content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    height:2px;
    width:0;
    background:var(--cu);
    transition:width .35s var(--ease)}

.menu a:not(.btn):hover::after {
width:100%}

 .burger {
display:none;
    background:none;
    border:0;
    width:44px;
    height:44px;
    cursor:pointer}

.burger span {
display:block;
    width:26px;
    height:2px;
    background:var(--iv);
    margin:6px auto;
    transition:.3s}

 /* buttons */ .btn {
display:inline-block;
    padding:.9rem 1.7rem;
    border-radius:999px;
    font:600 1rem Figtree,sans-serif;
    text-decoration:none;
    border:2px solid transparent;
    cursor:pointer;
    transition:transform .3s var(--ease),background .3s,color .3s}

 .btn-primary {
background:var(--cu);
    color:var(--char)}

.btn-primary:hover {
background:var(--iv);
    transform:translateY(-3px)}

 .btn-ghost {
border-color:var(--iv);
    color:var(--iv)}

.btn-ghost:hover {
background:var(--iv);
    color:var(--char)}

 /* hero */ .hero {
background:var(--char);
    color:var(--iv);
    padding:clamp(90px,12vw,170px) 0 clamp(90px,11vw,150px);
    overflow:hidden}

 .hero h1 {
color:var(--iv);
    margin:1rem 0 1.5rem}

.hero-grid {
display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:3rem;
    align-items:center}

 .sub {
color:var(--cu);
    font-weight:600;
    font-size:1.05rem;
    display:flex;
    align-items:center;
    gap:.7rem}

.sub::before {
content:"";
    width:34px;
    height:2px;
    background:var(--cu)}

 .lead {
font-size:1.15rem;
    max-width:56ch;
    opacity:.88;
    margin-bottom:2.2rem}

.hero-btns {
display:flex;
    gap:1rem;
    flex-wrap:wrap}

 .hero-art {
position:relative;
    animation:rise 1s .3s var(--ease) both}

.hero-art img {
border-radius:var(--r)}

 .ecg {
position:absolute;
    left:-12%;
    right:-12%;
    bottom:-34px;
    width:124%;
    height:80px;
    filter:drop-shadow(0 0 10px rgba(184,115,74,.7))}

 .ecg path {
fill:none;
    stroke:var(--cu);
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    animation:draw 3.2s .6s ease-out forwards,beat 3.2s 4s ease-in-out infinite}

 @keyframes draw {
to {
stroke-dashoffset:0    }

}

@keyframes beat {
50% {
opacity:.45    }

}

@keyframes rise {
from {
opacity:0;
        transform:translateY(30px)    }

}

 .hero-copy>* {
animation:rise .9s var(--ease) both}

.hero-copy h1 {
animation-delay:.12s}

.hero-copy .lead {
animation-delay:.24s}

.hero-copy .hero-btns {
animation-delay:.36s}

 /* sections */ .sec {
padding:clamp(70px,9vw,120px) 0}

.ivory {
background:var(--iv)}

.dark {
background:var(--char);
    color:var(--iv)}

.dark h2,.dark h3 {
color:var(--iv)}

 .head {
max-width:620px;
    margin-bottom:3rem}

.split {
display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(2rem,6vw,5rem);
    align-items:center}

.split.rev>:first-child {
order:2}

.split p+p {
margin-top:1rem}

 .split img,.vm+img {
border-radius:var(--r)}

 .vm {
display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
    margin-top:1.5rem}

.vm article {
padding:1.4rem;
    border-radius:18px;
    background:rgba(245,241,232,.06);
    border:1px solid rgba(245,241,232,.14)}

 .vm i {
color:var(--cu);
    font-size:1.4rem;
    margin-bottom:.7rem}

.vm h3 {
font-size:1.15rem}

.vm p {
font-size:.95rem;
    opacity:.85}

 .grid3 {
display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem}

 .card {
background:var(--wh);
    border:1px solid #e6dfd0;
    border-radius:var(--r);
    padding:2rem;
    transition:transform .4s var(--ease),border-color .3s,box-shadow .4s}

 .ivory .card {
background:var(--wh)}

.card:hover {
transform:translateY(-6px);
    border-color:var(--cu);
    box-shadow:0 18px 40px rgba(32,33,36,.1)}

 .ico {
display:grid;
    place-items:center;
    width:58px;
    height:58px;
    border-radius:16px;
    background:var(--iv);
    color:var(--cu);
    font-size:1.4rem;
    margin-bottom:1.2rem;
    transition:.4s}

.card:hover .ico {
background:var(--cu);
    color:var(--char)}

 .svc a {
display:inline-block;
    margin-top:1rem;
    font-weight:600;
    color:var(--char);
    text-decoration-color:var(--cu);
    text-underline-offset:5px}

 /* process */ .steps {
position:relative;
    display:grid;
    gap:2rem;
    padding-left:0}

.rail {
position:absolute;
    left:31px;
    top:20px;
    bottom:20px;
    width:3px;
    background:#dcd3bf;
    border-radius:3px}

.fill {
display:block;
    width:100%;
    height:var(--p,0%);
    background:var(--cu);
    border-radius:3px;
    transition:height .2s linear}

 .step {
display:flex;
    gap:1.6rem;
    align-items:flex-start;
    position:relative;
    opacity:.45;
    transform:translateX(-14px);
    transition:.6s var(--ease)}

.step.on {
opacity:1;
    transform:none}

 .dot {
flex:none;
    display:grid;
    place-items:center;
    width:64px;
    height:64px;
    border-radius:50%;
    background:var(--char);
    color:var(--iv);
    font-size:1.3rem;
    border:4px solid var(--iv);
    transition:.5s}

.step.on .dot {
background:var(--cu);
    color:var(--char);
    transform:scale(1.08)}

 .scard {
background:var(--wh);
    padding:1.4rem 1.8rem;
    border-radius:var(--r);
    flex:1;
    max-width:640px}

.scard small {
color:var(--cu);
    font-weight:600}

 /* forms */ .form {
display:grid;
    gap:1rem;
    background:rgba(245,241,232,.07);
    border:1px solid rgba(245,241,232,.15);
    padding:2rem;
    border-radius:var(--r)}

.form.light {
background:var(--iv);
    border-color:#e6dfd0}

 .row {
display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem}

label {
display:grid;
    gap:.4rem;
    font-weight:500;
    font-size:.95rem}

 input,select,textarea {
font:inherit;
    padding:.8rem 1rem;
    border-radius:12px;
    border:1.5px solid #cfc6b3;
    background:var(--wh);
    color:var(--char);
    width:100%;
    transition:border-color .25s,box-shadow .25s}

 input:focus,select:focus,textarea:focus {
outline:none;
    border-color:var(--cu);
    box-shadow:0 0 0 4px rgba(184,115,74,.25)}

.hp {
position:absolute;
    left:-9999px;
    width:1px;
    opacity:0}

 .ticks {
margin-top:1.4rem;
    display:grid;
    gap:.6rem}

.ticks li::before {
content:"✓";
    color:var(--cu);
    font-weight:700;
    margin-right:.7rem}

 /* faq */ .faq {
display:grid;
    gap:.9rem}

.qa {
border:1px solid #e0d8c6;
    border-radius:18px;
    background:var(--iv);
    transition:background .3s,border-color .3s}

.qa.open {
background:var(--wh);
    border-color:var(--cu)}

 .q {
all:unset;
    box-sizing:border-box;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    padding:1.2rem 1.5rem;
    cursor:pointer;
    font:600 1.08rem Fraunces,serif;
    color:var(--char)}

.q:focus-visible {
outline:3px solid var(--cu)}

 .q i {
flex:none;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--cu);
    color:var(--char);
    font-size:.8rem;
    transition:transform .4s var(--ease)}

.qa.open .q i {
transform:rotate(135deg)}

 .a {
max-height:0;
    overflow:hidden;
    transition:max-height .5s var(--ease)}

.a p {
padding:0 1.5rem 1.3rem}

 /* reviews */ .rev {
margin:0;
    display:flex;
    flex-direction:column;
    gap:1rem}

.stars {
color:var(--cu);
    letter-spacing:3px}

.rev blockquote {
font:500 1.12rem/1.6 Fraunces,serif;
    color:var(--char);
    flex:1}

 .rev figcaption {
display:grid;
    grid-template-columns:44px 1fr;
    column-gap:.8rem;
    align-items:center}

.av {
grid-row:span 2;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--char);
    color:var(--iv);
    font-weight:600}

.rev small {
color:#6b6b6b}

 /* contact */ .cinfo {
display:grid;
    gap:1.1rem;
    margin-top:1.6rem}

.cinfo li {
display:flex;
    gap:1rem;
    align-items:flex-start}

.cinfo i {
flex:none;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:12px;
    background:var(--iv);
    color:var(--cu)}

.cinfo a {
text-decoration:none}

.cinfo a:hover {
color:var(--cu)}

 /* inner pages */ .phero {
background:var(--char);
    padding:clamp(70px,9vw,120px) 0 60px}

.phero h1 {
color:var(--iv);
    font-size:clamp(2.2rem,5vw,3.6rem)}

.phero p {
color:var(--cu);
    margin-top:.6rem}

 .prose h2 {
font-size:1.6rem;
    margin:2.2rem 0 .6rem}

.prose a {
color:var(--cu)}

 /* footer */ .footer {
background:var(--char);
    color:#d9d4c7;
    padding-top:80px}

.footer h3 {
color:var(--iv);
    font-size:1.15rem;
    margin:1.4rem 0 .8rem}

 .fgrid {
display:grid;
    grid-template-columns:1.3fr .8fr 1.1fr 1.2fr;
    gap:2.5rem}

.fgrid>div:nth-child(n+2) h3 {
margin-top:0}

.footer li {
margin-bottom:.5rem}

.footer li a,.unsub {
text-decoration:none;
    font-size:.97rem}

.footer li a:hover,.unsub:hover {
color:var(--cu)}

 .footer p {
font-size:.97rem}

.sub {}

.footer .sub {
display:grid;
    gap:.7rem;
    margin:1rem 0}

.footer .sub::before {
display:none}

.unsub {
color:var(--cu);
    text-decoration:underline}

 .fbar {
display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1rem;
    margin-top:3rem;
    padding:1.6rem 0;
    border-top:1px solid rgba(245,241,232,.15);
    font-size:.92rem}

.fbar a {
margin-left:1.2rem;
    text-decoration:none}

.fbar a:hover {
color:var(--cu)}

 .toast {
position:fixed;
    left:50%;
    bottom:28px;
    transform:translate(-50%,120px);
    background:var(--cu);
    color:var(--char);
    padding:1rem 1.6rem;
    border-radius:14px;
    font-weight:600;
    transition:transform .5s var(--ease);
    z-index:99;
    max-width:90%}

.toast.show {
transform:translate(-50%,0)}

 /* reveal */ .reveal {
opacity:0;
    transform:translateY(26px);
    transition:opacity .8s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}

.reveal.in {
opacity:1;
    transform:none}

 /* responsive */ @media(max-width:980px) {
.grid3 {
grid-template-columns:1fr 1fr    }

.fgrid {
grid-template-columns:1fr 1fr    }

.hero-grid,.split {
grid-template-columns:1fr    }

.split.rev>:first-child {
order:0    }

.hero-art {
max-width:520px    }

}

 @media(max-width:820px) {
.burger {
display:block    }

.menu {
position:fixed;
        inset:74px 0 auto 0;
        background:var(--char);
        flex-direction:column;
        align-items:flex-start;
        padding:1.5rem 6%;
        gap:1.1rem;
        transform:translateY(-130%);
        transition:transform .5s var(--ease)    }

.menu.open {
transform:none    }

 .burger[aria-expanded=true] span:nth-child(1) {
transform:translateY(8px) rotate(45deg)    }

.burger[aria-expanded=true] span:nth-child(2) {
opacity:0    }

.burger[aria-expanded=true] span:nth-child(3) {
transform:translateY(-8px) rotate(-45deg)    }

}

 @media(max-width:620px) {
.grid3,.fgrid,.row,.vm {
grid-template-columns:1fr    }

.fbar a {
margin:0 1.2rem 0 0    }

.ecg {
display:none    }

.rail {
left:23px    }

.dot {
width:48px;
        height:48px    }

}

 @media(prefers-reduced-motion:reduce) {
*,*::before,*::after {
animation:none!important;
        transition:none!important    }

.reveal,.step {
opacity:1;
        transform:none    }

.ecg path {
stroke-dashoffset:0    }

html {
scroll-behavior:auto    }

}