:root{
  --juniper:#1F3D2F; --juniper-2:#27493A; --copper:#C8643B; --copper-deep:#A94F2A; --copper-light:#E8A27F;
  --sand:#F4EEE3; --sand-2:#FBF8F2; --sage:#8FA38A; --ink:#16201B; --muted:#5A635C; --rule:#E2D8C7; --pale:#D4DDD1;
  --display:'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--sand); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--copper-deep)}
a:hover{color:#7E3A1F}
:focus-visible{outline:3px solid var(--copper); outline-offset:3px; border-radius:4px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
h1,h2,h3{font-family:var(--display); color:var(--juniper); line-height:1.05; letter-spacing:-0.02em; margin:0}
h2{font-size:clamp(2rem,4vw,3rem); font-weight:800}
h3{font-size:1.35rem; font-weight:700; letter-spacing:-0.01em}
p{margin:0}
.lede{font-size:1.15rem; color:var(--muted); max-width:36em}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--body); font-weight:600; font-size:1rem; text-decoration:none; border-radius:999px; padding:15px 26px; border:2px solid transparent; cursor:pointer; transition:background .15s, color .15s, border-color .15s}
.btn-primary{background:var(--juniper); color:var(--sand)}
.btn-primary:hover{background:var(--juniper-2); color:#fff}
.btn-ghost{border-color:var(--juniper); color:var(--juniper); background:transparent}
.btn-ghost:hover{background:var(--juniper); color:var(--sand)}
.btn-copper{background:var(--copper-deep); color:#fff}
.btn-copper:hover{background:#8E4123; color:#fff}

/* header */
.site-header{position:sticky; top:0; z-index:20; background:rgba(244,238,227,.94); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid transparent; padding-top:env(safe-area-inset-top,0px)}
.site-header.scrolled{border-bottom-color:var(--rule)}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px}
.brand{display:block; line-height:0}
.brand svg{height:58px; width:auto; display:block}
@media (max-width:560px){.brand svg{height:48px}}
.nav-links{display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0}
.nav-links a{color:var(--ink); text-decoration:none; font-weight:500; font-size:.97rem}
.nav-links a:hover{color:var(--copper-deep)}
.nav-links .btn{padding:10px 20px; font-size:.95rem; color:var(--sand)}
.nav-toggle{display:none; background:none; border:0; padding:10px; cursor:pointer; color:var(--juniper)}
@media (max-width:880px){
  .nav-toggle{display:block}
  .nav-links{position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:flex-start; gap:0; background:var(--sand); border-bottom:1px solid var(--rule); padding:8px 24px 20px; display:none}
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block; padding:12px 0; font-size:1.05rem}
  .nav-links .btn{margin-top:8px; display:inline-flex; padding:12px 22px}
}

/* hero */
.hero{position:relative; padding:56px 0 150px; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(3rem,7.4vw,6rem); font-weight:800; letter-spacing:-0.04em; line-height:.92}
.hero .lede{margin-top:22px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero-note{margin-top:18px; font-size:.95rem; color:var(--muted)}
.ridge{position:absolute; left:0; right:0; bottom:0; height:120px; pointer-events:none}
.ridge svg{width:100%; height:100%; display:block}
@media (max-width:880px){ .hero-grid{grid-template-columns:1fr; gap:40px} .hero{padding:32px 0 110px} }

/* search mock */
.search-card{background:#fff; border-radius:22px; box-shadow:0 1px 0 var(--rule), 0 24px 60px -24px rgba(31,61,47,.35); padding:18px; position:relative; z-index:1}
.search-bar{display:flex; align-items:center; gap:10px; border:1px solid var(--rule); border-radius:999px; padding:10px 16px; font-size:.98rem; color:var(--ink)}
.search-bar svg{flex:none; color:var(--muted)}
.map{margin:14px 0 10px; height:120px; border-radius:14px; background:
  radial-gradient(circle at 20% 30%, rgba(143,163,138,.35) 0 18%, transparent 19%),
  radial-gradient(circle at 75% 70%, rgba(143,163,138,.3) 0 22%, transparent 23%),
  linear-gradient(115deg, transparent 46%, rgba(255,255,255,.9) 46% 49%, transparent 49%),
  linear-gradient(20deg, transparent 58%, rgba(255,255,255,.9) 58% 60%, transparent 60%),
  #E9E4D8; position:relative; overflow:hidden}
.map .pin{position:absolute; width:22px; height:28px; transform:translate(-50%,-100%)}
.results{position:relative; height:calc(4 * 66px); list-style:none; margin:0; padding:0}
.result{position:absolute; left:0; right:0; height:62px; display:flex; align-items:center; gap:14px; padding:0 12px; border-radius:12px; transition:top .9s cubic-bezier(.2,.8,.2,1), background .6s, box-shadow .6s}
.result .name{font-weight:600; font-size:.98rem; color:var(--ink)}
.result .meta{font-size:.85rem; color:var(--muted)}
.result .stars{color:#E0A33A; letter-spacing:1px}
.result .mark{width:34px; height:34px; border-radius:10px; background:#EFEAE0; flex:none; display:grid; place-items:center; font-family:var(--display); font-weight:700; color:var(--muted)}
.result.you .mark{background:var(--juniper); color:var(--sand)}
.result.you .name{color:var(--juniper)}
.r1{top:0}.r2{top:66px}.r3{top:132px}.r4{top:198px}
.results.ranked .you{top:0; background:#F3F7F1; box-shadow:inset 0 0 0 1.5px var(--sage)}
.results.ranked .c1{top:66px}.results.ranked .c2{top:132px}.results.ranked .c3{top:198px}
.results .c1,.results .c2,.results .c3{opacity:1; transition:top .9s cubic-bezier(.2,.8,.2,1)}
.search-caption{font-size:.85rem; color:var(--muted); margin-top:6px; padding:0 4px}
@media (prefers-reduced-motion: reduce){.result{transition:none}}

/* sections */
section{padding:96px 0}
.section-head{max-width:40rem; margin-bottom:48px}
.section-head .lede{margin-top:16px}

/* problem band */
.band{background:var(--juniper); color:var(--sand)}
.band h2{color:var(--sand)}
.band .lede{color:var(--pale)}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid #3A5A4A}
.fact{padding:28px 28px 0 0}
.fact + .fact{padding-left:28px; border-left:1px solid #3A5A4A}
.fact h3{color:var(--copper-light); font-size:1.25rem; margin-bottom:10px}
.fact p{color:var(--pale)}
@media (max-width:880px){.facts{grid-template-columns:1fr}.fact + .fact{border-left:0; padding-left:0; border-top:1px solid #3A5A4A}.fact{padding:24px 0}}

/* services */
.services{display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:2px solid var(--juniper)}
.service{padding:36px 36px 40px 0; border-bottom:1px solid var(--rule)}
.service:nth-child(even){padding-left:36px; padding-right:0; border-left:1px solid var(--rule)}
.service .icon{width:48px; height:48px; color:var(--copper); margin-bottom:18px}
.service p{margin-top:10px; color:var(--muted); max-width:30em}
.service ul{margin:16px 0 0; padding:0; list-style:none}
.service li{padding-left:22px; position:relative; margin:6px 0}
.service li::before{content:""; position:absolute; left:0; top:.62em; width:10px; height:2px; background:var(--copper)}
.service .price{margin-top:18px; font-family:var(--display); font-weight:700; color:var(--juniper)}
@media (max-width:880px){.services{grid-template-columns:1fr}.service,.service:nth-child(even){padding:28px 0; border-left:0}}

/* work */
.work{background:var(--sand-2)}
.case{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.browser{text-decoration:none; color:inherit; display:block; background:#fff; border-radius:14px; box-shadow:0 24px 60px -30px rgba(31,61,47,.4); overflow:hidden; border:1px solid var(--rule)}
.browser-bar{display:flex; gap:6px; align-items:center; padding:10px 14px; background:#EFEAE0}
.browser-bar i{width:9px; height:9px; border-radius:50%; background:#D9CEBB; display:block}
.browser-bar span{margin-left:10px; font-size:.78rem; color:var(--muted)}
.browser-body{padding:34px 30px 38px; background:linear-gradient(180deg,#2B2622,#3A3129); color:#F2EBDD}
.browser-body .kicker{font-size:.8rem; color:#CDB892}
.browser-body .big{font-family:Georgia, 'Times New Roman', serif; font-size:1.9rem; line-height:1.1; margin:8px 0 14px}
.browser-body .row{display:flex; gap:10px}
.browser-body .chip{font-size:.78rem; border:1px solid rgba(242,235,221,.35); border-radius:999px; padding:5px 12px}
.case h3{font-size:1.9rem; font-weight:800}
.case p{margin-top:14px; color:var(--muted)}
.case ul{margin:18px 0 24px; padding:0; list-style:none}
.case li{padding:10px 0; border-bottom:1px solid var(--rule)}
.case li strong{color:var(--juniper)}
@media (max-width:880px){.case{grid-template-columns:1fr; gap:32px}}

/* process */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; counter-reset:step}
.step{position:relative; padding-top:64px}
.step::before{counter-increment:step; content:counter(step); position:absolute; top:0; left:0; width:48px; height:48px; border-radius:50%; background:var(--copper); color:#fff; font-family:var(--display); font-weight:800; font-size:1.3rem; display:grid; place-items:center}
.step:not(:last-child)::after{content:""; position:absolute; top:24px; left:64px; right:-24px; height:2px; background:repeating-linear-gradient(90deg,var(--sage) 0 8px,transparent 8px 14px)}
.step p{margin-top:10px; color:var(--muted)}
@media (max-width:880px){.steps{grid-template-columns:1fr; gap:28px}.step:not(:last-child)::after{display:none}}

/* pricing */
.pricing{background:var(--sand-2)}
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start}
.tier{background:#fff; border:1px solid var(--rule); border-radius:20px; padding:30px}
.tier.featured{background:var(--juniper); border-color:var(--juniper); color:var(--sand); transform:translateY(-10px)}
.tier.featured h3{color:var(--sand)}
.tier .amount{font-family:var(--display); font-weight:800; font-size:2.8rem; color:var(--juniper); letter-spacing:-0.03em; margin-top:10px; line-height:1}
.tier.featured .amount{color:var(--sand)}
.tier .amount small{font-family:var(--body); font-weight:400; font-size:1rem; color:var(--muted); letter-spacing:0}
.tier.featured .amount small{color:var(--pale)}
.tier .for{margin-top:10px; color:var(--muted); font-size:.95rem}
.tier.featured .for{color:var(--pale)}
.tier ul{margin:20px 0 0; padding:20px 0 0; border-top:1px solid var(--rule); list-style:none; font-size:.95rem}
.tier.featured ul{border-top-color:#3A5A4A}
.tier li{padding-left:24px; position:relative; margin:9px 0}
.tier li::before{content:""; position:absolute; left:2px; top:.42em; width:10px; height:6px; border-left:2px solid var(--copper); border-bottom:2px solid var(--copper); transform:rotate(-45deg)}
.tier.featured li::before{border-color:var(--copper-light)}
.popular{display:inline-block; margin-left:8px; font-family:var(--body); font-size:.78rem; font-weight:600; background:var(--copper); color:#fff; border-radius:999px; padding:3px 10px; vertical-align:middle; letter-spacing:0}
.also{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px}
.also div{border-top:2px solid var(--juniper); padding-top:16px}
.also strong{font-family:var(--display); color:var(--juniper); font-size:1.15rem; display:block}
.also span{color:var(--muted); font-size:.95rem}
.pricing-foot{margin-top:32px; display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; color:var(--muted); font-size:.95rem}
@media (max-width:980px){.tiers,.also{grid-template-columns:1fr}.tier.featured{transform:none}}

.starts{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:2px solid var(--juniper)}
.starts > div{padding:28px 24px 8px 0}
.starts > div + div{padding-left:24px; border-left:1px solid var(--rule)}
.starts .amount{font-family:var(--display); font-weight:800; font-size:2.4rem; color:var(--juniper); letter-spacing:-0.03em; line-height:1; margin:12px 0 12px}
.starts .amount small{font-family:var(--body); font-weight:400; font-size:.95rem; color:var(--muted); letter-spacing:0}
.starts p:last-child{color:var(--muted); font-size:.95rem}
.pricing-foot p{max-width:32em}
@media (max-width:980px){.starts{grid-template-columns:1fr 1fr}.starts > div:nth-child(3){padding-left:0;border-left:0}.starts > div:nth-child(n+3){border-top:1px solid var(--rule)}}
@media (max-width:560px){.starts{grid-template-columns:1fr}.starts > div,.starts > div + div{padding:24px 0 8px;border-left:0}.starts > div + div{border-top:1px solid var(--rule)}}

/* about */
.about{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start}
.about blockquote{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.15; color:var(--juniper); letter-spacing:-0.02em}
.about p + p{margin-top:16px}
.about .body p{color:var(--ink); max-width:36em}
@media (max-width:880px){.about{grid-template-columns:1fr; gap:24px}}

/* faq */
.faq{max-width:52rem}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative; font-family:var(--display); font-weight:700; font-size:1.2rem; color:var(--juniper)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:50%; width:12px; height:12px; border-right:2px solid var(--copper); border-bottom:2px solid var(--copper); transform:translateY(-70%) rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .answer{padding:0 0 24px; color:var(--muted); max-width:44em}

/* contact */
.contact{background:var(--juniper); color:var(--sand)}
.contact h2{color:var(--sand)}
.contact .lede{color:var(--pale)}
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start}
.direct{margin-top:32px; display:grid; gap:14px}
.direct a{color:var(--sand); text-decoration:none; font-size:1.15rem; font-weight:600}
.direct a:hover{color:var(--copper-light)}
.direct small{display:block; color:var(--copper-light); font-size:.85rem; font-weight:500}
form{background:var(--sand); color:var(--ink); border-radius:20px; padding:30px}
.field{display:grid; gap:6px; margin-bottom:16px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
label{font-weight:600; font-size:.92rem; color:var(--juniper)}
input,textarea,select{font:inherit; font-size:1rem; color:var(--ink); background:#fff; border:1.5px solid var(--rule); border-radius:10px; padding:12px 14px; width:100%}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--juniper); box-shadow:0 0 0 3px rgba(31,61,47,.15)}
textarea{min-height:110px; resize:vertical}
.form-note{font-size:.85rem; color:var(--muted); margin-top:12px}
.hidden{position:absolute; left:-10000px}
.form-done{display:none; padding:8px 0}
form.sent .form-fields{display:none}
form.sent .form-done{display:block}
.form-done h3{margin-bottom:8px}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr; gap:36px}.field-row{grid-template-columns:1fr}}

/* footer */
footer{background:var(--ink); color:#B9C1BB; padding:48px 0 calc(40px + env(safe-area-inset-bottom,0px)); font-size:.93rem}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; align-items:flex-start}
footer .foot > div:first-child svg{height:52px; width:auto; display:block}
footer a{color:#DCE3DD; text-decoration:none}
footer a:hover{color:var(--copper-light)}
.foot-links{display:flex; gap:22px; flex-wrap:wrap}
.legal{margin-top:28px; color:#808A83; font-size:.85rem}

/* heading with keyword line */
.hero h1 .h1-main{display:block}
.h1-line{display:block}
.h1-where{display:block; font-weight:500; color:var(--muted); margin-top:4px}
.h1-sub{display:block; font-family:var(--body); font-weight:600; font-size:clamp(1.05rem,1.6vw,1.3rem); letter-spacing:0; line-height:1.3; color:var(--copper-deep); margin-top:18px}
/* about photo */
/* service links */
.service .more{display:inline-block; margin-top:14px; font-weight:600; text-decoration:none; border-bottom:2px solid var(--copper); color:var(--juniper); padding-bottom:2px}
.service .more:hover{color:var(--copper-deep)}
/* subpages */
.page-hero{padding:64px 0 72px; border-bottom:1px solid var(--rule)}
.page-hero h1{font-size:clamp(2.4rem,5.4vw,4.2rem); font-weight:800; letter-spacing:-0.035em; line-height:.98; max-width:15em}
.page-hero .lede{margin-top:20px}
.crumbs{font-size:.9rem; color:var(--muted); margin-bottom:22px}
.crumbs a{color:var(--muted)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:56px}
.two > div{border-top:2px solid var(--juniper); padding-top:24px}
.two ul, .checks{margin:16px 0 0; padding:0; list-style:none}
.two li, .checks li{padding-left:26px; position:relative; margin:10px 0}
.two li::before, .checks li::before{content:""; position:absolute; left:2px; top:.45em; width:10px; height:6px; border-left:2px solid var(--copper); border-bottom:2px solid var(--copper); transform:rotate(-45deg)}
.two .price{margin-top:18px; font-family:var(--display); font-weight:700; color:var(--juniper); font-size:1.15rem}
.prose{max-width:44rem}
.prose p + p{margin-top:16px}
.prose h2{margin-bottom:18px}
.cta-band{background:var(--juniper); color:var(--sand); padding:72px 0}
.cta-band h2{color:var(--sand)}
.cta-band p{color:var(--pale); margin-top:12px; max-width:36em}
.cta-band .hero-actions .btn-ghost{border-color:var(--sand); color:var(--sand)}
.cta-band .hero-actions .btn-ghost:hover{background:var(--sand); color:var(--juniper)}
.cta-band .btn-primary{background:var(--copper-deep); color:#fff} .cta-band .btn-primary:hover{background:#8E4123}
.alt{background:var(--sand-2)}
@media (max-width:880px){.two{grid-template-columns:1fr; gap:36px}}

/* v10 additions */
.hero h1 .sep{display:none}
.quote{margin:56px 0 0; padding:32px 36px; background:#fff; border-left:4px solid var(--copper); border-radius:14px; box-shadow:0 18px 40px -28px rgba(31,61,47,.35)}
.quote blockquote{margin:0}
.quote blockquote p{font-family:var(--display); font-size:1.2rem; line-height:1.45; color:var(--juniper); margin:0}
.quote figcaption{margin-top:14px; color:var(--muted); font-size:.95rem}
.quote figcaption strong{color:var(--ink)}
.quote-light{background:var(--sand-2)}
.steps-4{grid-template-columns:repeat(4,1fr); gap:32px}
@media (max-width:980px){.steps-4{grid-template-columns:repeat(2,1fr)}.steps-4 .step:nth-child(2)::after{display:none}}
@media (max-width:880px){.steps-4{grid-template-columns:1fr}}
.also-towns{margin-top:40px; color:var(--muted)}
.two h3 a{color:inherit; text-decoration-color:var(--copper)}
.direct a.town{display:inline; font-size:inherit; font-weight:inherit; color:var(--sand); text-decoration:underline; text-decoration-color:var(--copper-light)}
footer .hours{font-size:.92rem}

/* pass1 */
.skip{position:absolute; left:-9999px; top:8px; z-index:100; background:var(--juniper); color:var(--sand); padding:10px 16px; border-radius:8px}
.skip:focus{left:16px}
.legal a{color:inherit}
.faq .answer a{color:var(--copper-deep)}
.review-cta{margin:14px 0 0; font-size:.95rem; color:var(--muted)}

/* ==========================================================================
   v14 — Oct 22, 2026: new look, motion, insights section
   Everything below layers on top of the v13 styles above.
   ========================================================================== */
:root{
  --night:#132A20;          /* deepest juniper, hero base */
  --juniper-line:rgba(143,163,138,.22);
  --ease:cubic-bezier(.2,.8,.2,1);
  --header-h:76px;
}
body{overflow-x:hidden}
::selection{background:var(--copper); color:#fff}

/* ---------- header: sits over the dark hero, turns sandstone on scroll ---------- */
.site-header{position:fixed; left:0; right:0; top:0; background:transparent; backdrop-filter:none; border-bottom:1px solid transparent; transition:background .35s var(--ease), border-color .35s, box-shadow .35s}
.site-header.scrolled, .site-header.menu-open{background:rgba(244,238,227,.93); backdrop-filter:saturate(1.3) blur(10px); border-bottom-color:var(--rule)}
.nav{height:var(--header-h)}
.brand{position:relative; display:block; line-height:0}
.brand img{height:56px; width:auto; display:block; transition:opacity .3s}
.brand .logo-dark{position:absolute; left:0; top:0; opacity:0}
.site-header.scrolled .logo-dark, .site-header.menu-open .logo-dark{opacity:1}
.site-header.scrolled .logo-light, .site-header.menu-open .logo-light{opacity:0}
@media (max-width:560px){.brand img{height:46px}}
.site-header:not(.scrolled):not(.menu-open) .nav-links a:not(.btn){color:var(--sand)}
.site-header:not(.scrolled):not(.menu-open) .nav-links a:not(.btn):hover{color:var(--copper-light)}
.site-header:not(.scrolled):not(.menu-open) .nav-toggle{color:var(--sand)}
.nav-links a:not(.btn){position:relative}
.nav-links a:not(.btn)::after{content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:var(--copper); transition:right .3s var(--ease)}
.nav-links a:not(.btn):hover::after, .nav-links a[aria-current="page"]::after{right:0}
.nav-links .btn-primary{background:var(--copper-deep); color:#fff}
.nav-links .btn-primary:hover{background:#8E4123; color:#fff}
@media (max-width:880px){
  .nav-links a:not(.btn)::after{display:none}
  .nav-links{box-shadow:0 20px 30px -20px rgba(22,32,27,.35)}
}
.progress{position:fixed; left:0; top:0; height:3px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:var(--copper); z-index:30; pointer-events:none}

/* ---------- buttons ---------- */
.btn{position:relative; overflow:hidden; transition:background .2s, color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary,.btn-copper{box-shadow:0 10px 24px -14px rgba(169,79,42,.9)}
.btn .arrow{display:inline-block; width:18px; height:18px; transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.dark .btn-primary{background:var(--copper-deep); color:#fff}
.dark .btn-primary:hover{background:#8E4123}
.dark .btn-ghost{border-color:rgba(244,238,227,.55); color:var(--sand)}
.dark .btn-ghost:hover{background:var(--sand); border-color:var(--sand); color:var(--juniper)}

/* ---------- dark surfaces with contour lines ---------- */
.dark{background:radial-gradient(1200px 600px at 85% -10%, rgba(200,100,59,.22), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(143,163,138,.18), transparent 60%), var(--night); color:var(--sand)}
.dark h1,.dark h2,.dark h3{color:var(--sand)}
.dark .lede{color:var(--pale)}
.topo{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; color:var(--sage)}
.topo g{animation:topo-drift 60s ease-in-out infinite alternate}
.topo path{fill:none; stroke:currentColor; stroke-width:1; opacity:.28; vector-effect:non-scaling-stroke}
.topo path.major{opacity:.45; stroke-width:1.4}
.topo.draw path{stroke-dasharray:1; stroke-dashoffset:1; animation:topo-draw 2.6s var(--ease) forwards}
@keyframes topo-draw{to{stroke-dashoffset:0}}
@keyframes topo-drift{from{transform:translate(0,0) scale(1)} to{transform:translate(-30px,14px) scale(1.04)}}

/* ---------- home hero ---------- */
.hero{padding:calc(var(--header-h) + 64px) 0 170px; isolation:isolate}
.hero .wrap{position:relative; z-index:2}
.hero-grid{grid-template-columns:1.02fr .98fr; gap:64px}
.hero h1{color:var(--sand); font-size:clamp(3.2rem,8vw,6.6rem)}
.hero h1 .h1-main{display:block}
.hero h1 .h1-main .w{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em}
.hero h1 .h1-main .w > span{display:inline-block}
.hero .h1-sub{color:var(--copper-light)}
.hero .h1-where{color:var(--pale)}
.hero .lede{color:var(--pale)}
.hero .hero-note{color:var(--sage)}
.hero + .research{padding-top:56px}
.js .hero h1 .h1-main .w > span{transform:translateY(105%); transition:transform 1s var(--ease)}
.js .hero .h1-sub, .js .hero .lede, .js .hero .hero-actions, .js .hero .hero-note, .js .demo{opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.loaded .hero h1 .h1-main .w > span{transform:none}
.loaded .hero h1 .h1-main .w:nth-child(2) > span{transition-delay:.08s}
.loaded .hero h1 .h1-main .w:nth-child(3) > span{transition-delay:.16s}
.loaded .hero .h1-sub{opacity:1; transform:none; transition-delay:.35s}
.loaded .hero .lede{opacity:1; transform:none; transition-delay:.45s}
.loaded .hero .hero-actions{opacity:1; transform:none; transition-delay:.55s}
.loaded .hero .hero-note{opacity:1; transform:none; transition-delay:.62s}
.loaded .demo{opacity:1; transform:none; transition-delay:.5s}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr; gap:48px}.hero{padding:calc(var(--header-h) + 36px) 0 130px}}

/* ---------- live search demo ---------- */
.demo{position:relative; background:#fff; color:var(--ink); border-radius:24px; padding:16px; box-shadow:0 2px 0 rgba(255,255,255,.06) inset, 0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08)}
.demo-top{display:flex; gap:10px; align-items:center}
.demo .search-bar{flex:1; min-width:0; border-color:#E4DCCB; background:#FBF8F2; white-space:nowrap; overflow:hidden}
.demo .query{overflow:hidden; text-overflow:clip}
.caret{display:inline-block; width:2px; height:1.1em; background:var(--copper); margin-left:1px; vertical-align:-.18em; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.modes{display:grid; grid-template-columns:1fr 1fr; background:#F1ECE2; border-radius:999px; padding:4px; flex:none; position:relative}
.modes span{text-align:center; white-space:nowrap}
.modes span{position:relative; z-index:1; font-size:.8rem; font-weight:600; padding:7px 12px; border-radius:999px; color:var(--muted); transition:color .3s}
.modes::before{content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:999px; background:var(--juniper); transition:transform .45s var(--ease)}
.demo[data-mode="ai"] .modes::before{transform:translateX(100%)}
.demo[data-mode="maps"] .modes .m-maps, .demo[data-mode="ai"] .modes .m-ai{color:var(--sand)}
.stage{position:relative; height:392px; margin-top:14px}
.panel{position:absolute; inset:0; transition:opacity .5s var(--ease), transform .5s var(--ease)}
.demo[data-mode="maps"] .panel-ai, .demo[data-mode="ai"] .panel-maps{opacity:0; transform:translateY(10px); pointer-events:none}
.minimap{height:118px; border-radius:14px; overflow:hidden; position:relative; background:#ECE6D8}
.minimap svg{width:100%; height:100%; display:block}
.minimap .road{fill:none; stroke:#fff; stroke-width:5; stroke-linecap:round}
.minimap .road.hwy{stroke:#F6D9A8; stroke-width:6}
.minimap .contour{fill:none; stroke:#CFC5B0; stroke-width:1}
.minimap .town{font:600 10px var(--body); fill:#7C8478}
.minimap .pin{transform-box:fill-box; transform-origin:50% 100%; transition:transform .5s var(--ease), opacity .4s}
.minimap .pin.drop{animation:pin-drop .6s var(--ease) both}
@keyframes pin-drop{from{transform:translateY(-14px) scale(.6); opacity:0} to{transform:none; opacity:1}}
.minimap .pin-you circle.halo{fill:rgba(200,100,59,.25); transform-box:fill-box; transform-origin:center; animation:halo 2s ease-out infinite}
@keyframes halo{from{transform:scale(.5); opacity:1} to{transform:scale(2.2); opacity:0}}
.demo .results{height:calc(4 * 64px); margin-top:10px}
.demo .result{height:58px}
.demo .r1{top:0}.demo .r2{top:64px}.demo .r3{top:128px}.demo .r4{top:192px}
.demo .results.ranked .you{top:0}
.demo .results.ranked .c1{top:64px}.demo .results.ranked .c2{top:128px}.demo .results.ranked .c3{top:192px}
.result .rank{margin-left:auto; font:700 .8rem var(--display); color:var(--muted); background:#F4EFE6; border-radius:8px; padding:4px 8px}
.results.ranked .you .rank{background:var(--juniper); color:var(--sand)}
.panel-ai{display:flex; flex-direction:column}
.ai-q{align-self:flex-end; max-width:85%; background:#F1ECE2; border-radius:18px 18px 4px 18px; padding:10px 14px; font-size:.95rem}
.ai-a{margin-top:16px; display:flex; gap:12px; align-items:flex-start}
.ai-dot{flex:none; width:28px; height:28px; border-radius:50%; background:conic-gradient(from 0deg, var(--copper), var(--sage), var(--juniper), var(--copper)); animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ai-text{font-size:.98rem; line-height:1.55; color:var(--ink); min-height:7.5em}
.ai-card{display:flex; align-items:center; gap:12px; margin:14px 0 0 40px; padding:12px 14px; border:1.5px solid var(--sage); background:#F3F7F1; border-radius:14px; opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.ai-card.on{opacity:1; transform:none}
.ai-card .mark{width:34px; height:34px; border-radius:10px; background:var(--juniper); color:var(--sand); display:grid; place-items:center; font-family:var(--display); font-weight:700; flex:none}
.ai-card .name{font-weight:600; color:var(--juniper); display:block; line-height:1.2}
.ai-card .meta{font-size:.82rem; color:var(--muted)}
.ai-card .acts{margin-left:auto; display:flex; gap:6px}
.ai-card .acts span{font-size:.75rem; font-weight:600; border-radius:999px; padding:5px 10px; background:var(--juniper); color:var(--sand)}
.ai-card .acts span + span{background:#fff; color:var(--juniper); border:1px solid var(--rule)}
@media (max-width:560px){.ai-card{margin-left:0}.ai-card .acts span + span{display:none}}
.ai-text b{color:var(--juniper); background:linear-gradient(transparent 60%, rgba(200,100,59,.22) 60%)}
.sources{margin-top:auto; padding-top:12px; border-top:1px solid #EEE7DA}
.sources p{font-size:.78rem; color:var(--muted); margin-bottom:8px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips span{font-size:.8rem; border:1px solid #E4DCCB; border-radius:999px; padding:5px 11px; opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s var(--ease)}
.chips span.on{opacity:1; transform:none}
.chips span.mine{border-color:var(--juniper); color:var(--juniper); font-weight:600}
.demo-caption{font-size:.8rem; color:var(--muted); margin-top:10px; padding:0 4px}
@media (max-width:560px){
  .demo{padding:12px; border-radius:20px}
  .demo-top{flex-direction:column; align-items:stretch}
  .modes{align-self:flex-start}
  .modes span{padding:6px 9px; font-size:.75rem}
  .stage{height:404px}
  .ai-text{font-size:.93rem}
}

/* ---------- research strip ---------- */
.research .section-head{max-width:46rem}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:2px solid var(--juniper)}
.stat{padding:30px 32px 6px 0}
.stat + .stat{padding-left:32px; border-left:1px solid var(--rule)}
.stat .num{font:800 clamp(3rem,6vw,4.6rem)/1 var(--display); letter-spacing:-.04em; color:var(--juniper)}
.stat .num small{font-size:.45em; letter-spacing:-.01em; margin-left:2px; color:var(--copper-deep)}
.stat p{margin-top:12px; color:var(--muted); max-width:22em}
.stat p strong{color:var(--ink)}
.source-line{margin-top:28px; font-size:.9rem; color:var(--muted)}
@media (max-width:880px){.stats{grid-template-columns:1fr}.stat,.stat + .stat{padding:24px 0 6px; border-left:0}.stat + .stat{border-top:1px solid var(--rule)}}

/* ---------- services ---------- */
.service{transition:background .3s}
.service .icon{transition:transform .4s var(--ease), color .3s}
.service:hover .icon{transform:translateY(-4px) rotate(-4deg); color:var(--copper-deep)}
.service .more{transition:color .2s, border-color .2s, padding .2s}
.service:hover .more{padding-right:6px}

/* ---------- audit scanner ---------- */
.audit{background:var(--sand); overflow:hidden}
.audit-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center}
.audit-copy .lede{margin-top:16px}
.audit-copy .btn{margin-top:28px}
.scan{background:#fff; border:1px solid var(--rule); border-radius:22px; padding:26px 28px; box-shadow:0 30px 60px -40px rgba(31,61,47,.45); position:relative}
.scan-head{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--rule)}
.scan-head h3{font-size:1.15rem}
.scan-head p{font-size:.88rem; color:var(--muted); margin-top:2px}
.ring{width:72px; height:72px; flex:none; position:relative}
.ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:7}
.ring .bg{stroke:#EEE7DA}
.ring .fg{stroke:var(--copper); stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .5s var(--ease)}
.ring b{position:absolute; inset:0; display:grid; place-items:center; font:800 1.1rem var(--display); color:var(--juniper)}
.scan ol{list-style:none; margin:8px 0 0; padding:0}
.scan li{display:grid; grid-template-columns:28px 1fr auto; gap:12px; align-items:center; padding:11px 0; border-bottom:1px dashed #EAE2D3; font-size:.97rem}
.scan li:last-child{border-bottom:0}
.scan .box{width:22px; height:22px; border-radius:7px; border:2px solid #D9CFBD; display:grid; place-items:center; transition:background .3s, border-color .3s}
.scan .box svg{width:14px; height:14px; stroke:#fff; stroke-width:3; fill:none; stroke-dasharray:20; stroke-dashoffset:20; transition:stroke-dashoffset .35s var(--ease) .1s}
.scan li.ok .box{background:var(--juniper); border-color:var(--juniper)}
.scan li.ok .box svg{stroke-dashoffset:0}
.scan li.fix .box{border-color:var(--copper)}
.scan .tag{font-size:.75rem; font-weight:600; color:var(--muted); opacity:0; transition:opacity .3s}
.scan li.ok .tag, .scan li.fix .tag{opacity:1}
.scan li.fix .tag{color:var(--copper-deep)}
.scan .group{font:700 .8rem var(--body); color:var(--sage); padding:16px 0 4px; border:0; display:block; letter-spacing:.02em}
.scan-foot{margin-top:14px; font-size:.85rem; color:var(--muted)}
@media (max-width:980px){.audit-grid{grid-template-columns:1fr; gap:40px}}

/* ---------- process: line draws across as you scroll ---------- */
.steps{position:relative}
.step::before{transition:transform .5s var(--ease), background .4s}
.js .steps .step::before{transform:scale(.6); background:#D9CFBD}
.steps.in .step::before{transform:none; background:var(--copper)}
.steps.in .step:nth-child(2)::before{transition-delay:.35s}
.steps.in .step:nth-child(3)::before{transition-delay:.7s}
.steps.in .step:nth-child(4)::before{transition-delay:1.05s}
.step:not(:last-child)::after{transform-origin:0 50%; transition:transform .6s var(--ease)}
.js .steps .step:not(:last-child)::after{transform:scaleX(0)}
.steps.in .step:not(:last-child)::after{transform:none}
.steps.in .step:nth-child(1)::after{transition-delay:.15s}
.steps.in .step:nth-child(2)::after{transition-delay:.5s}
.steps.in .step:nth-child(3)::after{transition-delay:.85s}

/* ---------- gentle reveal, used only on a few blocks ---------- */
.js [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js [data-reveal].in{opacity:1; transform:none}

/* ---------- work / quote ---------- */
.browser{transition:transform .5s var(--ease), box-shadow .5s}
.browser:hover{transform:translateY(-6px) rotate(-.4deg); box-shadow:0 40px 70px -34px rgba(31,61,47,.55)}

/* ---------- insights teaser on home ---------- */
.insights-teaser .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; max-width:none}
.insights-teaser .section-head > div{max-width:40rem}
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:2px solid var(--juniper)}
.post{display:flex; flex-direction:column; padding:28px 28px 8px 0; text-decoration:none; color:inherit}
.post + .post{padding-left:28px; border-left:1px solid var(--rule)}
.post .kind{font-size:.85rem; color:var(--copper-deep); font-weight:600}
.post h3{margin-top:10px; font-size:1.3rem; line-height:1.15; transition:color .2s}
.post p{margin-top:10px; color:var(--muted); font-size:.97rem}
.post .read{margin-top:16px; font-weight:600; color:var(--juniper); font-size:.95rem}
.post:hover h3{color:var(--copper-deep)}
@media (max-width:880px){.posts{grid-template-columns:1fr}.post,.post + .post{padding:24px 0 8px; border-left:0}.post + .post{border-top:1px solid var(--rule)}.insights-teaser .section-head{display:block}.insights-teaser .section-head .btn{margin-top:20px}}

/* ---------- inner page heroes ---------- */
.page-hero{position:relative; overflow:hidden; isolation:isolate; padding:calc(var(--header-h) + 64px) 0 96px; border-bottom:0}
.page-hero .wrap{position:relative; z-index:2}
.page-hero h1{color:var(--sand)}
.page-hero .crumbs, .page-hero .crumbs a{color:var(--sage)}
.page-hero .crumbs a:hover{color:var(--copper-light)}
.page-hero .checks a{color:var(--sand)}
.page-hero .checks li::before{border-color:var(--copper-light)}
.page-hero .lede{color:var(--pale)}
.page-hero .ridge{height:70px}

/* ---------- articles ---------- */
.article-hero h1{max-width:18em; font-size:clamp(2.2rem,4.8vw,3.8rem)}
.byline{display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:24px; font-size:.95rem; color:var(--pale)}
.byline a{color:var(--sand)}
.byline span{white-space:nowrap}
.article-wrap{display:grid; grid-template-columns:240px minmax(0,1fr); gap:64px; align-items:start}
.toc{position:sticky; top:calc(var(--header-h) + 28px); font-size:.92rem}
.toc p{font-weight:700; color:var(--juniper); margin-bottom:10px; font-family:var(--display)}
.toc ol{list-style:none; margin:0; padding:0; border-left:2px solid var(--rule)}
.toc a{display:block; padding:6px 0 6px 14px; margin-left:-2px; border-left:2px solid transparent; color:var(--muted); text-decoration:none; line-height:1.35; transition:color .2s, border-color .2s}
.toc a:hover{color:var(--juniper)}
.toc a.active{color:var(--juniper); border-left-color:var(--copper); font-weight:600}
.article{max-width:42rem; font-size:1.08rem; line-height:1.72}
.article > * + *{margin-top:18px}
.article h2{font-size:clamp(1.6rem,3vw,2.15rem); margin-top:52px; scroll-margin-top:calc(var(--header-h) + 20px)}
.article h3{font-size:1.25rem; margin-top:30px}
.article ul,.article ol{padding-left:1.2em}
.article li + li{margin-top:8px}
.article li::marker{color:var(--copper)}
.article a{color:var(--copper-deep)}
.article strong{color:var(--ink)}
.takeaways{background:#fff; border:1px solid var(--rule); border-left:4px solid var(--copper); border-radius:14px; padding:22px 26px}
.takeaways h2{font-size:1.2rem; margin:0 0 8px}
.takeaways ul{margin:0}
.callout{background:var(--juniper); color:var(--pale); border-radius:16px; padding:24px 28px}
.callout strong{color:var(--sand)}
.callout a{color:var(--copper-light)}
.article table{width:100%; border-collapse:collapse; font-size:.95rem; margin-top:22px}
.article th,.article td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:top}
.article th{font-family:var(--display); color:var(--juniper); border-bottom:2px solid var(--juniper)}
.article td:first-child{width:18%; min-width:96px; font-weight:600; color:var(--juniper)}
.table-scroll{overflow-x:auto}
.sources-list{font-size:.92rem; color:var(--muted)}
.sources-list li{word-break:break-word}
.author-box{display:grid; grid-template-columns:56px 1fr; gap:16px; align-items:center; padding-top:28px; margin-top:44px; border-top:2px solid var(--juniper)}
.author-box .mono{width:56px; height:56px; border-radius:50%; background:var(--juniper); color:var(--sand); display:grid; place-items:center; font:800 1.2rem var(--display)}
.author-box p{font-size:.97rem; color:var(--muted)}
.author-box strong{color:var(--juniper)}
@media (max-width:980px){.article-wrap{grid-template-columns:1fr; gap:24px}.toc{position:static; background:#fff; border:1px solid var(--rule); border-radius:14px; padding:18px 20px}}

/* hub list */
.hub{display:grid; gap:0; border-top:2px solid var(--juniper)}
.hub a{display:grid; grid-template-columns:160px 1fr auto; gap:28px; align-items:baseline; padding:28px 0; border-bottom:1px solid var(--rule); text-decoration:none; color:inherit}
.hub .kind{color:var(--copper-deep); font-weight:600; font-size:.92rem}
.hub h2{font-size:clamp(1.35rem,2.4vw,1.75rem); transition:color .2s}
.hub p{margin-top:8px; color:var(--muted); max-width:40em}
.hub .date{font-size:.9rem; color:var(--muted); white-space:nowrap}
.hub a:hover h2{color:var(--copper-deep)}
@media (max-width:760px){.hub a{grid-template-columns:1fr; gap:6px}}
.related{margin-top:0}

/* ---------- contact ---------- */
.contact{position:relative; overflow:hidden; isolation:isolate}
.contact .wrap{position:relative; z-index:2}
.contact .topo{opacity:.7}

/* ---------- footer ---------- */
footer{position:relative; background:var(--night); padding-top:72px}
footer .foot > div:first-child img{height:54px; width:auto; display:block}
.foot-cta{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px; padding-bottom:48px; margin-bottom:48px; border-bottom:1px solid rgba(143,163,138,.25)}
.foot-cta h2{color:var(--sand); font-size:clamp(2rem,5vw,3.6rem); letter-spacing:-.035em}
.foot-cta .btn-primary{background:var(--copper-deep); color:#fff}

/* ---------- mobile quick-action bar ---------- */
.quickbar{display:none}
@media (max-width:700px){
  .quickbar{display:grid; grid-template-columns:1fr 1.3fr; gap:8px; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:25; transform:translateY(140%); transition:transform .45s var(--ease)}
  .quickbar.show{transform:none}
  .quickbar a{display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 10px; border-radius:999px; font-weight:600; text-decoration:none; box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
  .quickbar .call{background:var(--sand); color:var(--juniper); border:1.5px solid var(--juniper)}
  .quickbar .audit-btn{background:var(--copper-deep); color:#fff}
  footer{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
}

/* ---------- reduced motion: show final states, no movement ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0s !important}
  .topo g{animation:none}
  .caret{display:none}
}