/* =========================================================
   THE LOCAL ENQUIRY CO — site stylesheet (Oct 2026 redesign, from concept v2)
   Layout: deep-teal opener with a 3D enquiry pin, then an editorial
   cream body built from big type and hairline-divided lists instead of
   cards, one teal statement band mid-page, teal close.
   Motion: Baunfire's slow single easing, letter reveals, panel wipes,
   image curtains, chameleon header — all gated on JS + reduced-motion.
   ========================================================= */

:root{
  color-scheme:light;
  --teal:#0E3B3A;--teal-2:#14504E;--teal-3:#235D59;--teal-deep:#082A29;--teal-ink:#061F1E;
  --cream:#FDFBF4;--paper:#F7F3E9;--sand:#E9DFC8;--hair:#E3DED2;
  --ink:#1E2523;--muted:#6B6A61;
  --gold:#C2A35D;--gold-ink:#8A6B1F;--gold-2:#D8BE7C;--clay:#B4623F;--sage:#5F7F63;
  --on-teal:#F4EFE2;--on-teal-muted:#B9CBC5;--on-teal-hair:rgba(244,239,226,.14);
  --font:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --shell:1200px;
  --e1:cubic-bezier(.475,.425,0,.995);   /* primary: long, soft decel */
  --e3:cubic-bezier(.19,1,.22,1);         /* expo-out: hovers, un-zoom */
  --e4:cubic-bezier(.63,.03,.21,1);       /* wipes */
  --d1:.95s;--d2:1.25s;
  --r-lg:22px;--r-md:16px;--r-sm:10px;--pill:999px;
  --sh-md:0 18px 44px -22px rgba(14,59,58,.30);
  --sh-lg:0 40px 90px -40px rgba(14,59,58,.45);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(42px,5.9vw,78px)}
h2{font-size:clamp(32px,4.4vw,58px)}
h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.15}
p{margin:0}
.shell{width:min(var(--shell),100% - 48px);margin-inline:auto}
@media (max-width:640px){.shell{width:min(var(--shell),100% - 36px)}}
.skip{position:absolute;left:-999px;top:8px;background:var(--teal);color:var(--on-teal);padding:10px 14px;border-radius:8px;z-index:200}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sub{font-size:clamp(17px,1.25vw,19px);line-height:1.6;color:var(--muted);max-width:52ch}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--teal)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.eyebrow.light{color:var(--gold-2)}
.eyebrow.light .dot{background:var(--gold-2)}
em{font-style:normal}
h1 em,h2 em{color:var(--gold-ink)}
.on-teal h1 em,.on-teal h2 em{color:var(--gold-2)}
.section{padding-block:clamp(80px,9vw,132px)}
.head{display:grid;gap:22px;margin-bottom:clamp(44px,5vw,72px)}
.head.split{grid-template-columns:1.15fr .85fr;align-items:end;gap:40px}
.head.center{text-align:center;justify-items:center}
.head.center .sub{margin-inline:auto}
@media (max-width:900px){.head.split{grid-template-columns:1fr}}

/* ---------- buttons: Baunfire pill with “+” ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 26px 0 28px;border-radius:var(--pill);font-weight:700;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;transition:transform .55s var(--e3),background .45s var(--e1),color .45s var(--e1),box-shadow .55s var(--e1);isolation:isolate;overflow:hidden}
.btn i{position:relative;width:11px;height:11px;flex:none}
.btn i::before,.btn i::after{content:"";position:absolute;background:currentColor;left:50%;top:50%;transform:translate(-50%,-50%);transition:transform .55s var(--e3)}
.btn i::before{width:11px;height:1.5px}.btn i::after{width:1.5px;height:11px}
.btn:hover i::before,.btn:hover i::after{transform:translate(-50%,-50%) rotate(90deg)}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--teal-2);transform:scaleX(0);transform-origin:left center;transition:transform .65s var(--e4);z-index:-1}
.btn:hover::after{transform:scaleX(1)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--teal);color:var(--on-teal)}
.btn-sand{background:var(--sand);color:var(--teal)}
.btn-sand::after{background:#F4EBD6}
.btn-cream{background:var(--cream);color:var(--teal);box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.btn-cream::after{background:#fff}
.btn-ghost{background:transparent;color:var(--on-teal);box-shadow:inset 0 0 0 1px var(--on-teal-hair)}
.btn-ghost::after{background:rgba(255,255,255,.08)}
.link{position:relative;display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--teal);padding-bottom:4px}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform-origin:left center}
.link span{transition:transform .55s var(--e3)}
.link:hover span{transform:translateX(5px)}
@media (hover:hover){.link:hover::after{animation:swipe-line 1.1s var(--e1) forwards}}
@keyframes swipe-line{0%{transform-origin:right center;transform:scaleX(1)}38%{transform-origin:right center;transform:scaleX(0)}62%{transform-origin:left center;transform:scaleX(0)}100%{transform-origin:left center;transform:scaleX(1)}}
.link.light{color:var(--on-teal)}
.link.gold{color:var(--gold-2)}

/* touch: grow small text links to a 44px target with an invisible hit area */
@media (pointer:coarse){.link::before,.svc .more::before,.brand::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}.svc .more{position:relative}}
/* ---------- fixed chrome ---------- */
.progress{position:fixed;left:0;top:env(safe-area-inset-top,0px);height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left center;z-index:120;pointer-events:none}
.header{position:absolute;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:100;transition:background .55s var(--e1),box-shadow .55s var(--e1),transform .75s var(--e1)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;transition:padding .55s var(--e1)}
.brand{display:block;position:relative;width:200px;height:34px;flex:none}
.brand img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;transition:opacity .45s var(--e1)}
.brand .lg-teal{opacity:0}
.nav{display:flex;gap:30px;font-size:13px;font-weight:600;letter-spacing:.06em}
.nav a{position:relative;color:var(--on-teal);padding:6px 0;transition:color .45s var(--e1)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--gold-2);transform:scaleX(0);transform-origin:right center;transition:transform .65s var(--e4),background .45s}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left center}
.header-cta{height:44px;padding:0 20px 0 22px;font-size:11.5px}
.header.scrolled{background:rgba(253,251,244,.86);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--hair)}
.header.scrolled .header-in{padding:14px 0}
.header.scrolled .brand .lg-teal{opacity:1}
.header.scrolled .brand .lg-rev{opacity:0}
.header.scrolled .nav a{color:var(--teal)}
.header.scrolled .nav a::after{background:var(--teal)}
.header.scrolled .btn-cream{background:var(--teal);color:var(--on-teal);box-shadow:none}
.header.scrolled .btn-cream::after{background:var(--teal-2)}
.js .header{position:fixed}
.header.hide{transform:translateY(-110%)}
/* chameleon: while the bar is still over the teal hero it goes teal-glass, not cream */
.header.scrolled.dark{background:rgba(8,42,41,.72);box-shadow:0 1px 0 var(--on-teal-hair)}
.header.scrolled.dark .brand .lg-teal{opacity:0}
.header.scrolled.dark .brand .lg-rev{opacity:1}
.header.scrolled.dark .nav a{color:var(--on-teal)}
.header.scrolled.dark .nav a::after{background:var(--gold-2)}
.header.scrolled.dark .btn-cream{background:var(--cream);color:var(--teal)}
.header.scrolled.dark .btn-cream::after{background:#fff}
.menu-btn{display:none}
.mnav{display:none}
@media (max-width:900px){
  .nav,.header-cta{display:none}
  .menu-btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 16px;border-radius:var(--pill);border:0;background:transparent;color:var(--on-teal);font:inherit;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:color .45s}
  .menu-btn b{position:relative;width:36px;height:36px;border-radius:50%;background:var(--cream);display:block;transition:transform .45s var(--e3)}
  .menu-btn b::before,.menu-btn b::after{content:"";position:absolute;left:11px;right:11px;height:1.5px;background:var(--teal);top:15px;transition:transform .45s var(--e3),top .45s var(--e3)}
  .menu-btn b::after{top:20px}
  .header.scrolled .menu-btn{color:var(--teal)}
  .header.scrolled .menu-btn b{background:var(--teal)}
  .header.scrolled .menu-btn b::before,.header.scrolled .menu-btn b::after{background:var(--cream)}
  .header.scrolled.dark .menu-btn{color:var(--on-teal)}
  .header.scrolled.dark .menu-btn b{background:var(--cream)}
  .header.scrolled.dark .menu-btn b::before,.header.scrolled.dark .menu-btn b::after{background:var(--teal)}
  .menu-btn:hover b{transform:scale(1.08)}
  body.menu-open .menu-btn b::before{top:17.5px;transform:rotate(45deg)}
  body.menu-open .menu-btn b::after{top:17.5px;transform:rotate(-45deg)}
  .mnav{display:grid;position:fixed;inset:0;z-index:90;background:var(--teal);color:var(--on-teal);padding:110px 28px 40px;align-content:start;gap:6px;clip-path:circle(0 at calc(100% - 44px) 44px);transition:clip-path .85s var(--e4),visibility 0s linear .85s;pointer-events:none;visibility:hidden}
  body.menu-open .mnav{clip-path:circle(150% at calc(100% - 44px) 44px);pointer-events:auto;visibility:visible;transition:clip-path .85s var(--e4),visibility 0s}
  html:not(.js) .menu-btn{display:none}
  .mnav a{display:flex;align-items:baseline;gap:16px;font-size:clamp(30px,8vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.2;padding:8px 0;border-bottom:1px solid var(--on-teal-hair);opacity:0;transform:translateX(-24px) skewX(4deg);transition:opacity .65s var(--e1),transform .85s var(--e1)}
  .mnav a small{min-width:24px;font-size:12px;font-weight:700;letter-spacing:.24em;color:var(--gold-2);font-variant-numeric:tabular-nums}
  body.menu-open .mnav a{opacity:1;transform:none}
  body.menu-open .mnav a:nth-child(2){transition-delay:.06s}body.menu-open .mnav a:nth-child(3){transition-delay:.12s}body.menu-open .mnav a:nth-child(4){transition-delay:.18s}body.menu-open .mnav a:nth-child(5){transition-delay:.24s}body.menu-open .mnav a:nth-child(6){transition-delay:.3s}
  .mnav .mnav-cta{display:inline-flex;align-items:center;width:fit-content;margin-top:26px;padding:0 26px 0 28px;border:0;font-size:12.5px;font-weight:700;letter-spacing:.2em;line-height:1;opacity:0;transition-delay:.36s}
  body.menu-open .mnav .mnav-cta{opacity:1}
  body.menu-open{overflow:hidden}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--teal);color:var(--on-teal);overflow:hidden;padding:calc(118px + env(safe-area-inset-top,0px)) 0 0}
.hero-glow{position:absolute;right:-8%;top:-10%;width:min(70vw,900px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(216,190,124,.22),rgba(216,190,124,.06) 45%,transparent 70%);pointer-events:none}
/* v2: the ghost pin moved to the final CTA so it no longer sits beside the 3D pin */
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center;min-height:min(78vh,820px);padding-bottom:clamp(56px,6vw,96px)}
.hero-copy{max-width:640px}
.hero h1{margin:0 0 26px;color:var(--cream)}
.hero-lead{font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--on-teal-muted);max-width:40ch;margin:0 0 34px}
.btn-row{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center}
.hero-price{margin:26px 0 0;font-size:15px;font-weight:600;color:var(--on-teal-muted)}
.hero-price strong{color:var(--cream);font-weight:800}
.hero-price .sep{opacity:.5;margin:0 8px}
.hero-price a{color:var(--gold-2);font-weight:700;border-bottom:1px solid currentColor}
.trust{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:30px 0 0;padding:26px 0 0;border-top:1px solid var(--on-teal-hair);font-size:13.5px;font-weight:600;color:var(--on-teal-muted);letter-spacing:.01em}
.trust li{display:inline-flex;align-items:center;gap:9px}
.trust i{font-style:normal;color:var(--gold-2);font-weight:800}
.hero-stage{position:relative;aspect-ratio:1/1;max-height:600px;width:100%;margin-inline:auto}
.scene3d{position:absolute;inset:0}
.scene3d__poster,.scene3d__canvas{position:absolute;inset:0;width:100%;height:100%}
.scene3d__poster{object-fit:contain;transition:opacity .9s var(--e1)}
.scene3d__canvas{opacity:0;transition:opacity .9s var(--e1);pointer-events:none}
.scene3d[data-live] .scene3d__canvas{opacity:1}
.scene3d[data-live] .scene3d__poster{opacity:0}
.scroll-cue{position:absolute;right:28px;bottom:22px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--on-teal-muted);font-size:10.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;writing-mode:vertical-rl;transition:opacity .6s var(--e1)}
.scroll-cue::before{content:"";width:1px;height:46px;background:var(--gold-2);transform-origin:top center;animation:cue-line 2.6s var(--e1) infinite}
@keyframes cue-line{0%{transform:scaleY(0);transform-origin:top center}45%{transform:scaleY(1);transform-origin:top center}55%{transform:scaleY(1);transform-origin:bottom center}100%{transform:scaleY(0);transform-origin:bottom center}}
.scroll-cue.gone{opacity:0}
/* who we help: ruled 4 × 2 grid of sectors under the hero (2 columns on tablets, 1 on phones) */
.who{padding-bottom:clamp(48px,5vw,80px)}
.who + .section{padding-top:clamp(56px,6vw,96px)}
.who-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;margin-bottom:clamp(36px,4vw,56px)}
.who-head h2{max-width:15ch}
.who-head .link{margin-bottom:6px}
.who-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--hair)}
.who-grid li{display:grid;gap:8px;align-content:start;padding:28px 24px 32px;border-bottom:1px solid var(--hair);border-left:1px solid var(--hair);min-width:0}
.who-grid li:nth-child(4n+1){border-left:0;padding-left:0}
.who-tag{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.who-grid h3{font-size:clamp(19px,1.5vw,21px);color:var(--teal);letter-spacing:-.015em;line-height:1.25}
.who-grid p{font-size:15.5px;line-height:1.6;color:var(--muted)}
.who-foot{margin-top:26px;color:var(--muted);font-size:16px;max-width:62ch}
.who-foot a{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.js .who .who-grid.rv-in > li{transition-delay:calc(var(--wi,0) * 70ms)}
.who-grid > :nth-child(2){--wi:1}.who-grid > :nth-child(3){--wi:2}.who-grid > :nth-child(4){--wi:3}.who-grid > :nth-child(5){--wi:4}.who-grid > :nth-child(6){--wi:5}.who-grid > :nth-child(7){--wi:6}.who-grid > :nth-child(8){--wi:7}
@media (max-width:1000px){
  .who-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .who-grid li:nth-child(4n+1){border-left:1px solid var(--hair);padding-left:24px}
  .who-grid li:nth-child(2n+1){border-left:0;padding-left:0}
}
@media (max-width:560px){
  .who-grid{grid-template-columns:1fr}
  .who-grid li,.who-grid li:nth-child(4n+1){border-left:0;padding:22px 0 24px}
}
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;min-height:0;padding-top:12px}
  .hero-stage{max-width:460px;aspect-ratio:1/1;order:2;margin-top:10px}
  .scroll-cue{display:none}
}
@media (max-width:640px){.hero{padding-top:calc(96px + env(safe-area-inset-top,0px))}.hero-stage{aspect-ratio:1/1;max-width:320px}.trust{gap:10px 18px;font-size:13px}}

/* ---------- services: sticky index + hairline list ---------- */
.svc-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,110px);align-items:start}
.svc-sticky{position:sticky;top:120px}
.svc-ghost{position:absolute;left:-.06em;top:-.42em;font-size:clamp(160px,22vw,320px);font-weight:800;letter-spacing:-.06em;line-height:1;color:var(--teal);opacity:.045;pointer-events:none;user-select:none;z-index:0;font-variant-numeric:tabular-nums}
.svc-ghost span{position:absolute;left:0;top:0;transition:opacity .9s var(--e1)}
.svc-ghost span::before{content:attr(data-n)}
.svc-ghost span:not(.on){opacity:0}
.svc-copy{position:relative;z-index:1}
.svc-copy .sub{margin:22px 0 34px}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.svc{position:relative;display:grid;grid-template-columns:64px 1fr 48px;gap:22px;align-items:start;padding:36px 0 36px;border-bottom:1px solid var(--hair);isolation:isolate}
.svc::before{content:"";position:absolute;inset:0 -28px;background:var(--paper);border-radius:var(--r-md);transform:scaleX(0);transform-origin:left center;transition:transform .75s var(--e4);z-index:-1}
@media (hover:hover){.svc:hover::before{transform:scaleX(1)}}
.svc .num{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--gold-ink);padding-top:9px;font-variant-numeric:tabular-nums}
.svc h3 a{display:inline-block;transition:transform .65s var(--e3)}
.svc:hover h3 a{transform:translateX(6px)}
.svc p{margin:12px 0 16px;color:var(--muted);max-width:52ch}
.svc .more{font-size:13px;font-weight:700;color:var(--teal);display:inline-flex;gap:8px;align-items:center}
.svc .more span{transition:transform .55s var(--e3)}
.svc:hover .more span{transform:translateX(5px)}
.svc .arw{width:48px;height:48px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center;color:var(--teal);font-size:18px;transition:background .55s var(--e1),color .55s var(--e1),border-color .55s,transform .65s var(--e3);margin-top:2px}
.svc:hover .arw{background:var(--teal);color:var(--cream);border-color:var(--teal);transform:rotate(45deg)}
@media (max-width:900px){.svc-grid{grid-template-columns:1fr}.svc-sticky{position:static}.svc-ghost{display:none}.svc{grid-template-columns:44px 1fr;padding:28px 0}.svc .arw{display:none}.svc::before{inset:0 -16px}}

/* ---------- teal statement band (scale-wipe) ---------- */
.band{position:relative;color:var(--on-teal);isolation:isolate;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:var(--teal);z-index:-1;transform-origin:left center}
.js .band.rv-wait::before{transform:scaleX(0)}
.js .band.rv-in::before{transition:transform 1.25s var(--e4);transform:scaleX(1)}
.band-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,110px);align-items:center}
.band h2{color:var(--cream);margin-bottom:24px}
.band .sub{color:var(--on-teal-muted);margin-bottom:34px}
.journey{list-style:none;margin:0;padding:0;position:relative}
.journey li{position:relative;display:grid;grid-template-columns:52px 1fr auto;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid var(--on-teal-hair)}
.journey li:first-child{border-top:1px solid var(--on-teal-hair)}
.journey .jn{width:52px;height:52px;border-radius:50%;border:1px solid var(--on-teal-hair);display:grid;place-items:center;font-weight:800;font-size:15px;color:var(--gold-2);background:rgba(255,255,255,.03)}
.journey li.active .jn{background:var(--gold);color:var(--teal);border-color:var(--gold)}
.journey small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);margin-bottom:4px}
.journey b{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--cream)}
.journey .ji{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--on-teal-muted);font-variant-numeric:tabular-nums}
.journey .jline{position:absolute;left:26px;top:52px;bottom:52px;width:1px;background:var(--gold-2);opacity:.5;transform:scaleY(0);transform-origin:top center;z-index:-1}
.js .rv-in .journey .jline{transition:transform 1.6s var(--e1) .5s;transform:scaleY(1)}
@media (max-width:900px){.band-in{grid-template-columns:1fr}}

/* ---------- packages ---------- */
.pkg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);align-items:center}
.pkg-copy h2{margin-bottom:22px}
.pkg-copy .sub{margin-bottom:34px}
.pkg-stack{position:relative;height:420px;perspective:1400px}
.sheet{position:absolute;left:50%;top:50%;width:min(100%,420px);border-radius:var(--r-lg);border:1px solid var(--hair);background:var(--paper);box-shadow:var(--sh-md);padding:26px 28px;transform:translate(-50%,-50%);transition:transform 1.1s var(--e3)}
.sheet span.tag{font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.s-back{transform:translate(-50%,-50%) translateY(-120px) scale(.86) rotateX(8deg);opacity:.75;height:140px}
.s-mid{transform:translate(-50%,-50%) translateY(-62px) scale(.93) rotateX(6deg);opacity:.9;height:150px}
.s-front{background:var(--cream);box-shadow:var(--sh-lg);transform:translate(-50%,-50%) translateY(14px);height:200px}
.s-front small{font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink)}
.s-front strong{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;margin:12px 0 10px;color:var(--teal)}
.s-front p{color:var(--muted);font-size:15px}
.s-front .ic{position:absolute;right:24px;top:22px;width:44px;height:44px;border-radius:50%;background:var(--teal);color:var(--cream);display:grid;place-items:center;font-size:17px;text-decoration:none;transition:background .3s var(--e3),transform .3s var(--e3)}
.s-front .ic:hover{background:var(--clay);transform:translate(2px,-2px)}
.s-front .ic:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media (hover:hover){.pkg-stack:hover .s-back{transform:translate(-50%,-50%) translateY(-132px) scale(.86) rotateX(8deg)}.pkg-stack:hover .s-mid{transform:translate(-50%,-50%) translateY(-70px) scale(.93) rotateX(6deg)}.pkg-stack:hover .s-front{transform:translate(-50%,-50%) translateY(20px)}}
@media (max-width:900px){.pkg{grid-template-columns:1fr}.pkg-stack{height:360px}}

/* ---------- our work: offset two-column with device rigs ---------- */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px) 6.5%;align-items:start}
.work-item:nth-child(even){transform:translateY(96px)}
.work-grid.offset-pad{padding-bottom:96px}
.work-stage{position:relative;border-radius:var(--r-lg);background:linear-gradient(158deg,#F6F2E8,#EFE7D6);border:1px solid var(--hair);padding:9% 9% 12%;overflow:hidden;transform-style:preserve-3d;transition:transform 1.1s var(--e3),box-shadow 1.1s var(--e3)}
@media (hover:hover){.work-item:hover .work-stage{transform:perspective(1200px) rotateY(-5deg) rotateX(2deg) translateY(-6px);box-shadow:var(--sh-lg)}}
.work-rig{position:relative;max-width:420px;margin:0 auto}
.work-laptop{width:87%}
.work-screen{background:#0A2E2D;border:9px solid #17201E;border-bottom-width:9px;border-radius:15px 15px 4px 4px;position:relative;overflow:hidden}
.work-notch{position:absolute;left:50%;top:0;width:52px;height:5px;background:#2B3532;border-radius:0 0 4px 4px;transform:translateX(-50%);z-index:2}
.work-screen img{width:100%;height:auto;border-radius:4px}   /* natural ratio — never object-fit here */
.work-base{height:12px;background:linear-gradient(#D7D2C6,#B9B3A4);border-radius:0 0 12px 12px;position:relative}
.work-base::after{content:"";position:absolute;left:50%;top:0;width:18%;height:3px;background:#A9A394;border-radius:0 0 4px 4px;transform:translateX(-50%)}
.work-phone{position:absolute;right:0;bottom:-16px;width:27%;background:#12191A;border:5px solid #191F1D;border-radius:20px;padding:4px;box-shadow:0 24px 40px -18px rgba(0,0,0,.55)}
.work-island{position:absolute;left:50%;top:9px;width:32%;height:7px;background:#000;border-radius:6px;transform:translateX(-50%);z-index:2}
.work-phone img{width:100%;height:auto;border-radius:13px}
.work-cap{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:22px;padding-right:0}
.work-cap small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px}
.work-cap h3{font-size:clamp(22px,2.1vw,30px)}
.work-cap p{color:var(--muted);font-size:15px;margin-top:4px}
.work-visit{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--pill);border:1px solid var(--hair);background:var(--cream);color:var(--teal);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:background .45s var(--e1),color .45s var(--e1),border-color .45s}
.work-visit:hover{background:var(--teal);color:var(--cream);border-color:var(--teal)}
/* v2 — Baunfire-style wipes. Tiles open in mirror image (left tile from the left, right tile from the right),
   a sand panel wipes in behind the heading, and each caption draws a hairline before its text rises. */
.work-item{--wd:0s}
.work-item:nth-child(2){--wd:.15s}
.js .wipe.rv-wait{clip-path:inset(0 100% 0 0)}
.js .work-item:nth-child(2) .wipe.rv-wait{clip-path:inset(0 0 0 100%)}
.js .wipe.rv-in{clip-path:inset(-80px);transition:clip-path 1.25s var(--e4) var(--wd),transform 1.1s var(--e3),box-shadow 1.1s var(--e3)}
.js .wipe.rv-wait .work-rig{transform:scale(1.06)}
.js .wipe.rv-in .work-rig{transition:transform 1.5s var(--e3) var(--wd);transform:none}
/* gold line along the tile's bottom edge on hover */
.work-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform .65s var(--e4);z-index:4;pointer-events:none}
@media (hover:hover){.work-item:hover .work-stage::after{transform:scaleX(1)}}
/* heading panel: sand, behind the eyebrow + h2 only */
.head-panel{position:relative;isolation:isolate}
.head-panel::before{content:"";position:absolute;inset:-24px -32px;background:rgba(233,223,200,.55);border-radius:var(--r-md);z-index:-1;transform-origin:left center}
.js .head-panel.rv-wait::before{transform:scaleX(0)}
.js .head-panel.rv-in::before{transition:transform 1.1s var(--e4);transform:scaleX(1)}
.js .head-panel.rv-wait .eyebrow{opacity:0;transform:translate3d(0,14px,0)}
.js .head-panel.rv-in .eyebrow{transition:opacity .95s var(--e1) .2s,transform .95s var(--e1) .2s;opacity:1;transform:none}
.js .head-panel .split.rv-in .c{transition-delay:calc(.1s + var(--i) * 18ms)}
.work-head{margin-top:24px}
@media (max-width:640px){.head-panel::before{inset:-16px -14px}.work-head{margin-top:12px}}
/* caption: hairline draws, then eyebrow → h3 → line → pill rise in */
.work-cap{position:relative;padding-top:20px}
.work-cap::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(14,59,58,.2);transform-origin:left center}
.work-cap small{--cd:calc(var(--wd) + .75s)}
.work-cap h3{--cd:calc(var(--wd) + .83s)}
.work-cap p{--cd:calc(var(--wd) + .91s)}
.work-cap .work-visit{--cd:calc(var(--wd) + .99s)}
.js .wipe.rv-wait + .work-cap::before{transform:scaleX(0)}
.js .wipe.rv-in + .work-cap::before{transition:transform .9s var(--e1) calc(var(--wd) + .6s);transform:none}
.js .wipe.rv-wait + .work-cap > div > *,.js .wipe.rv-wait + .work-cap > a{opacity:0;transform:translate3d(0,18px,0)}
.js .wipe.rv-in + .work-cap > div > *{transition:opacity .95s var(--e1) var(--cd),transform .95s var(--e1) var(--cd);opacity:1;transform:none}
.js .wipe.rv-in + .work-cap > a{transition:opacity .95s var(--e1) var(--cd),transform .95s var(--e1) var(--cd),background .45s var(--e1),color .45s var(--e1),border-color .45s;opacity:1;transform:none}

/* curtain + un-zoom entrance (kept for the About photo in the page roll-out) */
.curtain{position:relative;overflow:hidden;border-radius:var(--r-lg)}
.curtain::after{content:"";position:absolute;inset:-1px;background:var(--paper);transform-origin:center top;z-index:3;transform:scaleY(0)}
.js .curtain.rv-wait::after{transform:scaleY(1)}
.js .curtain.rv-wait > *{transform:scale(1.08);opacity:0}
.js .curtain.rv-in::after{transition:transform 1.25s var(--e4) .1s;transform:scaleY(0)}
.js .curtain.rv-in > *{transition:transform 1.5s var(--e3) .1s,opacity .4s linear .1s;transform:none;opacity:1}
@media (max-width:900px){.work-grid{grid-template-columns:1fr}.work-item:nth-child(even){transform:none}.work-grid.offset-pad{padding-bottom:0}.work-rig{max-width:360px}}
@media (max-width:640px){.work-cap{flex-direction:column;align-items:flex-start;gap:14px}.work-cap h3{text-wrap:pretty}}

/* ---------- ai answer ---------- */
.ai-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);align-items:center}
.ai-copy h2{margin-bottom:22px}.ai-copy .sub{margin-bottom:30px}
.answer{position:relative;background:rgba(255,255,255,.55);border:1px solid var(--hair);border-radius:var(--r-lg);padding:30px 32px 32px;box-shadow:var(--sh-md);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);max-width:520px;margin-left:auto}
.answer .ahead{display:flex;align-items:center;gap:12px;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.answer .ai-ic{width:34px;height:34px;border-radius:10px;background:var(--teal);color:var(--cream);display:grid;place-items:center;font-size:12px;font-weight:800;letter-spacing:.04em}
.answer .q{margin:22px 0 20px;font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.3}
.answer .line{height:9px;border-radius:6px;background:var(--sand);margin:10px 0;transform-origin:left center}
.answer .w1{width:92%}.answer .w2{width:78%}.answer .w3{width:60%}
.js .rv-in .answer .line{animation:grow 1.4s var(--e3) both}
.js .rv-in .answer .w2{animation-delay:.25s}.js .rv-in .answer .w3{animation-delay:.5s}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.answer .named{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:10px 16px 10px 12px;border-radius:var(--pill);background:var(--teal);color:var(--cream);font-weight:700;font-size:14px}
.answer .named .pin{width:12px;height:12px;border-radius:50% 50% 50% 0;background:var(--gold);transform:rotate(-45deg)}
@media (max-width:900px){.ai-in{grid-template-columns:1fr}.answer{margin-left:0}}
/* v2 — AI answer becomes the second teal band; it wipes in from the right to mirror the first band */
.band.band-right::before{transform-origin:right center}
.band .ai-copy h2{color:var(--cream)}
.band .answer{background:rgba(255,255,255,.08);border:1px solid var(--on-teal-hair);box-shadow:0 40px 90px -40px rgba(0,0,0,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.band .answer .ahead{color:var(--on-teal-muted)}
.band .answer .ai-ic{background:var(--teal-deep);color:var(--gold-2);box-shadow:inset 0 0 0 1px var(--on-teal-hair)}
.band .answer .q{color:var(--cream)}
.band .answer .line{background:rgba(244,239,226,.22)}
.band .answer .named{background:var(--sand);color:var(--teal)}
.band .answer .named .pin{background:var(--teal)}


/* ---------- how it works ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding-top:34px}
.steps .rail{position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair)}
.steps .rail::after{content:"";position:absolute;inset:0;background:var(--gold);transform-origin:left center}
.js .steps.rv-wait .rail::after{transform:scaleX(0)}
.js .rv-in.steps .rail::after{transition:transform 2.2s var(--e1) .3s;transform:scaleX(1)}
/* travelling marker: rides the rail from step 1 to step 4 (distance measured in JS as --travel) */
.rail-dot{position:absolute;left:0;top:-4.5px;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(194,163,93,.18);z-index:2}
.js .steps.rv-wait .rail-dot{transform:translateX(0)}
.js .steps.rv-in .rail-dot{transition:transform 2.2s var(--e1) .3s;transform:translateX(var(--travel,0px))}
.steps .step{position:relative;--si:0}
.steps .step:nth-child(3){--si:1}.steps .step:nth-child(4){--si:2}.steps .step:nth-child(5){--si:3}
.steps .step .n{display:block;width:fit-content;font-size:clamp(44px,5vw,64px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--teal);opacity:.16;margin-bottom:18px;font-variant-numeric:tabular-nums;transition:opacity .65s var(--e1),translate .65s var(--e3)}
.steps .step h3{margin-bottom:12px}
.steps .step h3::after{content:"";display:block;width:28px;height:2px;margin-top:14px;background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform .65s var(--e4)}
.steps .step p{color:var(--muted);font-size:16px}
.steps .step.is-active .n{opacity:1}
.steps .step.is-active h3::after{transform:scaleX(1)}
/* rail segment under each step (hover highlight) */
.steps .step::before{content:"";position:absolute;left:0;right:-40px;top:-35px;height:3px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform .65s var(--e4)}
.steps .step:last-child::before{right:0}
@media (hover:hover) and (min-width:901px){
  .steps .step:hover .n{opacity:1;translate:0 -6px}
  .steps .step:hover::before{transform:scaleX(1)}
}
/* reveal: numeral opens upward, then h3 and p rise — each step .18s after the last */
.js .rv-steps.rv-wait .step .n{clip-path:inset(100% 0 0 0);transform:translate3d(0,.3em,0)}
.js .rv-steps.rv-in .step .n{transition:clip-path .95s var(--e1) calc(.4s + var(--si) * .18s),transform .95s var(--e1) calc(.4s + var(--si) * .18s),opacity .65s var(--e1),translate .65s var(--e3);clip-path:inset(-10% -10% -10% -10%);transform:none}
.js .rv-steps.rv-wait .step h3,.js .rv-steps.rv-wait .step p{opacity:0;transform:translate3d(0,26px,0)}
.js .rv-steps.rv-in .step h3{transition:opacity var(--d1) var(--e1) calc(.55s + var(--si) * .18s),transform var(--d1) var(--e1) calc(.55s + var(--si) * .18s);opacity:1;transform:none}
.js .rv-steps.rv-in .step p{transition:opacity var(--d1) var(--e1) calc(.65s + var(--si) * .18s),transform var(--d1) var(--e1) calc(.65s + var(--si) * .18s);opacity:1;transform:none}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:34px 28px}.rail-dot,.steps .step::before{display:none}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}


/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,110px);align-items:start}
.faq-intro{position:sticky;top:120px}
.faq-intro h2{margin-bottom:20px}.faq-intro .sub{margin-bottom:28px}
.faq-list{border-top:1px solid var(--hair)}
.faq{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:clamp(18px,1.5vw,21px);font-weight:700;letter-spacing:-.015em;color:var(--teal)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:none}
.faq summary > span:first-child,.faq summary{min-width:0}
.faq summary .pl{position:relative;width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--hair);transition:background .45s var(--e1),border-color .45s,transform .65s var(--e3)}
.faq summary .pl::before,.faq summary .pl::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%)}
.faq summary .pl::before{width:12px;height:1.5px}.faq summary .pl::after{width:1.5px;height:12px}
.faq[open] summary .pl{transform:rotate(45deg);background:var(--teal);color:var(--cream);border-color:var(--teal)}
.faq .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--e4)}
.faq[open] .body{grid-template-rows:1fr}
.faq .body > div{overflow:hidden}
.faq .body p{padding:0 56px 26px 0;color:var(--muted)}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}.faq-intro{position:static}.faq .body p{padding-right:0}}

/* ---------- blog: editorial rows ---------- */
.blog-list{display:grid;grid-template-columns:1fr 1fr;gap:0 6.5%;border-top:1px solid var(--hair)}
.post{padding:34px 0 36px;border-bottom:1px solid var(--hair);display:grid;gap:12px;align-content:start}
.post .k{font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink)}
.post h3 a{transition:color .45s var(--e1)}
.post h3 a:hover{color:var(--clay)}
.post .m{font-size:13px;color:var(--muted);letter-spacing:.02em}
.post .x{color:var(--muted);font-size:16px}
.blog-more{margin-top:44px}
@media (max-width:900px){.blog-list{grid-template-columns:1fr}}

/* ---------- foundation ribbon ---------- */
.foundation{background:var(--paper);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.fs{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;padding:22px 0}
.fs .tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--pill);background:var(--gold);color:var(--teal);font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin-right:12px;vertical-align:middle}
.fs .t{font-size:15.5px;color:var(--ink)}
.fs .t b{font-weight:800;color:var(--teal)}

/* ---------- final cta ---------- */
.final{position:relative;background:var(--teal);color:var(--on-teal);overflow:hidden;padding-block:clamp(96px,12vw,170px)}
.final .glow{position:absolute;left:50%;top:50%;width:min(80vw,1000px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(216,190,124,.16),transparent 70%);pointer-events:none}
.final-in{position:relative;display:grid;justify-items:center;text-align:center;gap:40px}
.final h2{color:var(--cream);max-width:18ch;font-size:clamp(36px,5.2vw,70px)}
.final-ghost{position:absolute;right:-3vw;bottom:-9vw;width:min(38vw,500px);opacity:.045;color:var(--cream);pointer-events:none}
.js .final-ghost{clip-path:inset(0 100% 0 0)}
.js .final-ghost.rv-in{transition:clip-path 1.6s var(--e4) .2s;clip-path:inset(0)}
@media (max-width:640px){.final-ghost{width:62vw;bottom:-18vw;right:-12vw}}

/* ---------- footer ---------- */
.footer{background:var(--teal-deep);color:var(--on-teal-muted)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px;padding:72px 0 44px}
.footer-brand img{height:32px;width:auto;margin-bottom:18px}
.footer-brand p{font-size:15px;max-width:30ch}
.footer h2,.footer h4{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);margin:0 0 18px;font-weight:700}
.footer .col a{position:relative;display:block;width:fit-content;max-width:100%;font-size:15px;color:var(--on-teal);padding:5px 0;overflow-wrap:anywhere}
.footer .col a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:var(--gold-2);transform:scaleX(0);transform-origin:right center;transition:transform .75s var(--e4)}
.footer .col a:hover::after{transform:scaleX(1);transform-origin:left center}
.footer .col p{font-size:14px;margin-top:10px}
.footer-bottom{border-top:1px solid var(--on-teal-hair);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:22px 0 calc(22px + env(safe-area-inset-bottom,0px));font-size:13px}
.footer-bottom .legal{display:flex;gap:22px}
.footer-bottom .legal a{color:var(--on-teal)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:34px}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
@media (max-width:900px){.footer .col a{padding:11px 0}.footer .col a::after{bottom:9px}.footer-bottom .legal a{display:inline-flex;align-items:center;min-height:44px}}

/* ---------- mobile action bar ---------- */
.mbar{display:none}
@media (max-width:640px){
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border-top:1px solid var(--hair);padding-bottom:env(safe-area-inset-bottom,0px)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 10px;background:var(--cream);color:var(--teal);font-weight:700;font-size:14px}
  .mbar a:last-child{background:var(--teal);color:var(--cream)}
  body{padding-bottom:62px}
  .footer-bottom{padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
}

/* ---------- reveal system (JS-gated: nothing hides without JS) ---------- */
.js .rv.rv-wait{opacity:0;transform:translate3d(0,26px,0)}
.js .rv.rv-in{transition:opacity var(--d1) var(--e1),transform var(--d1) var(--e1);opacity:1;transform:none}
.js .rv-stagger.rv-wait > *{opacity:0;transform:translate3d(0,26px,0)}
.js .rv-stagger.rv-in > *{transition:opacity var(--d1) var(--e1),transform var(--d1) var(--e1);opacity:1;transform:none}
.js .rv-stagger.rv-in > :nth-child(2){transition-delay:.1s}.js .rv-stagger.rv-in > :nth-child(3){transition-delay:.2s}.js .rv-stagger.rv-in > :nth-child(4){transition-delay:.3s}.js .rv-stagger.rv-in > :nth-child(5){transition-delay:.4s}.js .rv-stagger.rv-in > :nth-child(6){transition-delay:.5s}
.js .band.rv-in .rv-inner{transition-delay:.45s}
/* letter reveal: chars are wrapped at runtime; text stays plain in the source */
.js .split .w{display:inline-block;white-space:nowrap}
.js .split .c{display:inline-block}
.js .split.rv-wait .c{opacity:0;transform:translate3d(0,.35em,0)}
.js .split.rv-in .c{transition:opacity .75s var(--e1),transform .95s var(--e1);transition-delay:calc(var(--i) * 18ms);opacity:1;transform:none}
/* hero load sequence */
.js .hero-copy > *{opacity:0;transform:translate3d(0,22px,0)}
.js .hero.ready .hero-copy > *{transition:opacity 1s var(--e1),transform 1.1s var(--e1);opacity:1;transform:none}
.js .hero.ready .hero-copy > :nth-child(2){transition-delay:.1s}.js .hero.ready .hero-copy > :nth-child(3){transition-delay:.55s}.js .hero.ready .hero-copy > :nth-child(4){transition-delay:.7s}.js .hero.ready .hero-copy > :nth-child(5){transition-delay:.82s}.js .hero.ready .hero-copy > :nth-child(6){transition-delay:.95s}
.js .hero-stage{opacity:0;transform:translate3d(0,30px,0) scale(.96)}
.js .hero.ready .hero-stage{transition:opacity 1.4s var(--e1) .3s,transform 1.6s var(--e1) .3s;opacity:1;transform:none}
.js .header{opacity:0;transform:translateY(-12px)}
.js .header.ready{transition:opacity .9s var(--e1) .9s,transform .9s var(--e1) .9s,background .55s var(--e1),box-shadow .55s var(--e1);opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .rv.rv-wait,.js .rv-stagger.rv-wait > *,.js .split.rv-wait .c,.js .hero-copy > *,.js .hero-stage,.js .header{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .band.rv-wait::before,.js .curtain.rv-wait > *{transform:none!important;opacity:1!important}
  .js .curtain.rv-wait::after{transform:scaleY(0)!important}
  .js .final-ghost{clip-path:none!important}
  .scroll-cue::before{animation:none;transform:none}
  .js .rv-in .answer .line{animation:none}
  .js .rv-in.steps .rail::after,.js .rv-in .journey .jline{transition:none;transform:none}
  .js .wipe.rv-wait,.js .wipe.rv-in{clip-path:none!important;transition:none!important}
  .js .wipe .work-rig,.js .wipe + .work-cap::before,.js .wipe + .work-cap > div > *,.js .wipe + .work-cap > a{transform:none!important;opacity:1!important;transition:none!important}
  .js .head-panel::before,.js .head-panel .eyebrow{transform:none!important;opacity:1!important;transition:none!important}
  .js .rv-steps .step .n,.js .rv-steps .step h3,.js .rv-steps .step p{clip-path:none!important;transform:none!important;opacity:1!important;transition:none!important}
  .js .rv-steps .step .n{opacity:.16!important}
  .js .rv-steps .rail-dot{transform:none!important;transition:none!important}
  .js .rv-steps .step.is-active .n{opacity:1!important}
  .js .rv-steps .rail::after{transform:none!important}
  .btn,.link,.svc,.svc *,.work-stage,.sheet,.s-front .ic,.faq summary .pl{transition:none!important}
  *,*::before,*::after{animation-duration:.001s!important}
}

/* ============================================================
   INNER PAGES — Oct 2026 redesign (v2 system)
   Every content page opens on a compact teal page-header band
   (the header sits over it in its teal-glass .dark state), then
   cream / paper sections built from hairline lists, teal close.
   Utility pages use the same band at half height.
   ============================================================ */

/* --- compatibility tokens: older inline page styles (packages, estimator, articles) still read these --- */
:root{--line:#ded9cc;--mint:#e3ecea;--olive:#5d744f;--lime:#dce892;--white:#fff;--ease:cubic-bezier(.2,.8,.2,1);--ease-out:cubic-bezier(.16,1,.3,1)}

.skip-link{position:absolute;left:-999px;top:8px;background:var(--teal);color:var(--on-teal);padding:10px 14px;border-radius:8px;z-index:200;font-weight:700}
.skip-link:focus{left:12px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.eyebrow-light{color:var(--gold-2)}
.eyebrow-light .dot{background:var(--gold-2)}

/* --- teal page-header band --- */
.page-hero{position:relative;overflow:hidden;background:var(--teal);color:var(--on-teal);padding:calc(150px + env(safe-area-inset-top,0px)) 0 clamp(64px,7vw,104px)}
.page-hero::before{content:"";position:absolute;right:-12%;top:-30%;width:min(70vw,860px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(216,190,124,.18),rgba(216,190,124,.05) 45%,transparent 70%);pointer-events:none}
.page-hero-inner{position:relative;z-index:1}
.page-hero-inner>.breadcrumb{max-width:820px}
.page-hero .eyebrow{color:var(--gold-2)}
.page-hero .eyebrow .dot{background:var(--gold-2)}
.page-hero h1{font-size:clamp(38px,4.9vw,66px);color:var(--cream);margin:0 0 24px;max-width:20ch}
.page-hero h1 em{color:var(--gold-2)}
.page-hero-inner>p:not(.eyebrow):not(.service-price){font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--on-teal-muted);max-width:56ch;margin:0 0 14px}
.page-hero-inner>p:not(.eyebrow):last-of-type{margin-bottom:0}
.page-hero .post-hero-meta{color:var(--on-teal-muted);font-size:14px;letter-spacing:.02em}
.page-hero .button-row{margin-top:30px}
.page-hero .service-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:26px 0 0}
.page-hero .service-price span{font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--on-teal-muted)}
.page-hero .service-price strong{font-size:clamp(22px,2vw,28px);font-weight:800;letter-spacing:-.02em;color:var(--cream)}
.legal-hero{padding-bottom:clamp(44px,5vw,64px)}
.legal-hero h1{font-size:clamp(34px,4vw,52px)}
@media (max-width:640px){.page-hero{padding-top:calc(118px + env(safe-area-inset-top,0px))}.page-hero h1{font-size:clamp(32px,9vw,44px)}}
/* load sequence for the band (first screen: plays once, never waits on scroll) */
.js .page-hero-inner>*{opacity:0;transform:translate3d(0,22px,0)}
.js .page-hero.ready .page-hero-inner>*{transition:opacity 1s var(--e1),transform 1.1s var(--e1);opacity:1;transform:none}
.js .page-hero.ready .page-hero-inner>:nth-child(2){transition-delay:.1s}.js .page-hero.ready .page-hero-inner>:nth-child(3){transition-delay:.5s}.js .page-hero.ready .page-hero-inner>:nth-child(4){transition-delay:.62s}.js .page-hero.ready .page-hero-inner>:nth-child(5){transition-delay:.74s}.js .page-hero.ready .page-hero-inner>:nth-child(n+6){transition-delay:.86s}

/* --- breadcrumb (on the band) --- */
.breadcrumb{margin-top:34px;padding-top:22px;border-top:1px solid var(--on-teal-hair)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;font-size:13.5px;font-weight:600}
.breadcrumb li{display:flex;align-items:center;gap:8px;color:var(--on-teal-muted)}
.breadcrumb li+li::before{content:"/";color:var(--on-teal-hair)}
.breadcrumb a{position:relative;color:var(--cream)}
.breadcrumb a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold-2);transform:scaleX(0);transform-origin:right center;transition:transform .65s var(--e4)}
.breadcrumb a:hover::after{transform:scaleX(1);transform-origin:left center}
.breadcrumb [aria-current="page"]{color:var(--on-teal-muted)}

/* --- sections --- */
.content-section{padding-block:clamp(72px,8vw,120px)}
.alt-section{background:var(--paper)}
.section-heading{display:grid;gap:18px;margin-bottom:clamp(40px,5vw,64px)}
.section-heading .eyebrow{margin:0}
.centered-heading{text-align:center;max-width:760px;margin-inline:auto;justify-items:center}
.inline-link{margin-top:34px}
.button-row{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.button-row.centered-buttons{justify-content:center;margin-top:34px}

/* --- final CTA band: teal close, mirrors the homepage --- */
.final-cta{position:relative;overflow:hidden;background:var(--teal);color:var(--on-teal)}
.final-cta::before{content:"";position:absolute;left:50%;top:50%;width:min(80vw,1000px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(216,190,124,.14),transparent 70%);pointer-events:none}
.final-cta-inner{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:34px 48px;flex-wrap:wrap;padding-block:clamp(88px,10vw,150px)}
.final-cta h2{color:var(--cream);max-width:18ch;margin:0}
.final-cta h2 em{color:var(--gold-2)}
.final-cta .eyebrow{margin:0 0 22px}
@media (max-width:640px){.final-cta-inner{flex-direction:column;align-items:flex-start}}

/* --- prose (legal) --- */
.legal-copy{max-width:760px}
.legal-copy h2{font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-.02em;color:var(--teal);margin:1.9em 0 .55em}
.legal-copy>*:first-child{margin-top:0}
.legal-copy p,.legal-copy ul,.legal-copy ol{margin:0 0 1.1em;color:#3D4743;font-size:17px;line-height:1.75}
.legal-copy ul,.legal-copy ol{padding-left:1.25em}
.legal-copy li{margin:0 0 .5em}
.legal-copy a{color:var(--teal);font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.legal-copy a:hover{color:var(--clay)}
.legal-copy strong{font-weight:800;color:var(--ink)}

/* --- utility pages (thank-you / 404): the whole first screen is the teal band --- */
.thank-you-section{position:relative;overflow:hidden;background:var(--teal);color:var(--on-teal);padding:calc(150px + env(safe-area-inset-top,0px)) 0 clamp(88px,11vw,150px)}
.thank-you-section::before{content:"";position:absolute;left:50%;top:-10%;width:min(80vw,900px);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(216,190,124,.16),transparent 70%);pointer-events:none}
.narrow-shell{position:relative;z-index:1;max-width:680px;text-align:center}
.thank-you-card{display:flex;flex-direction:column;align-items:center}
.success-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--gold);color:var(--teal);font-size:26px;font-weight:800;margin-bottom:26px}
.thank-you-card .eyebrow{color:var(--gold-2);margin:0 0 18px}
.thank-you-card h1{font-size:clamp(34px,4.4vw,56px);color:var(--cream);margin:0 0 20px;max-width:18ch}
.thank-you-card>p{font-size:clamp(17px,1.3vw,19px);color:var(--on-teal-muted);line-height:1.65;max-width:52ch}
.thank-you-card a:not(.btn):not(.link){color:var(--cream);font-weight:700;text-decoration:underline;text-decoration-color:var(--gold-2);text-underline-offset:3px}
.mbar:has(a:only-child){grid-template-columns:1fr}

/* --- about --- */
.about-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(40px,6vw,100px);align-items:start}
.founder-card{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--sand)}
.founder-card-photo{aspect-ratio:2/3}
.founder-photo{position:absolute;inset:0}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.founder-card-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,42,41,.85))}
.founder-label{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:26px}
.founder-label small{display:block;font-size:11.5px;letter-spacing:.24em;font-weight:700;text-transform:uppercase;color:var(--gold-2);margin-bottom:6px}
.founder-label strong{color:var(--cream);font-size:24px;font-weight:800;letter-spacing:-.02em}
@media (min-width:901px){.founder-card{position:sticky;top:120px}}
.about-copy h2,.service-page-aside h2,.contact-aside h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;line-height:1.08;margin:0 0 22px}
.about-copy>p{margin:0 0 1.15em;color:#3D4743;line-height:1.75}
.about-copy a:not(.btn),.contact-method a,.pkg-pick a{color:var(--teal);font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.about-copy a:not(.btn):hover{color:var(--clay)}
.founder-details{margin:30px 0 32px;padding:22px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.founder-details strong{display:block;color:var(--teal);font-weight:800;margin-bottom:6px}
.founder-details span{display:block;font-size:15px;color:var(--muted)}
/* photo wipe (curtain upward) */
.js .photo-wipe.rv-wait{clip-path:inset(100% 0 0 0)}
.js .photo-wipe.rv-wait img{transform:scale(1.08)}
.js .photo-wipe.rv-in{clip-path:inset(0);transition:clip-path 1.25s var(--e4) .1s}
.js .photo-wipe.rv-in img{transform:none;transition:transform 1.6s var(--e3) .1s}

/* --- hairline numbered lists (values, deliverables): the homepage .svc pattern --- */
.value-grid,.deliverable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(28px,4vw,56px);border-top:1px solid var(--hair)}
.deliverable-grid{grid-template-columns:1fr 1fr}
.value-card,.deliverable-grid article{position:relative;padding:30px 0 32px;border-bottom:1px solid var(--hair)}
.value-card span,.deliverable-grid span{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--gold-ink);margin-bottom:14px;font-variant-numeric:tabular-nums}
.value-card h3,.deliverable-grid h2{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.02em;line-height:1.2;color:var(--teal);margin:0 0 10px}
.value-card p,.deliverable-grid p{color:var(--muted);font-size:16px;line-height:1.65}
.alt-section .value-grid,.alt-section .deliverable-grid{border-color:var(--sand)}

/* --- services list --- */
.service-detail{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(24px,4vw,72px);padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--hair)}
.service-detail:first-of-type{border-top:0;padding-top:0}
.service-number{display:block;font-size:12px;letter-spacing:.24em;font-weight:700;text-transform:uppercase;color:var(--gold-ink);margin-bottom:14px}
.service-detail h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;line-height:1.08}
.service-detail-copy>p{margin:0 0 24px;color:#3D4743;line-height:1.75}
.check-grid,.service-fit-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:0 0 26px;padding:0;border-top:1px solid var(--hair)}
.service-fit-list{grid-template-columns:1fr;margin:0}
.check-grid li,.service-fit-list li{position:relative;padding:13px 0 13px 30px;border-bottom:1px solid var(--hair);font-size:16px;color:#3D4743;line-height:1.5}
.check-grid li::before,.service-fit-list li::before{content:"✓";position:absolute;left:2px;top:13px;color:var(--sage);font-weight:800}
.note-box{background:var(--paper);border-left:2px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:18px 22px;font-size:16px;color:#3D4743;margin:0 0 26px}

/* --- service pages --- */
.service-page-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,100px);align-items:start}
@media (min-width:901px){.service-page-aside{position:sticky;top:120px}}
.service-page-grid>div>.eyebrow{margin:0 0 22px}
.steps-grid{position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin:0;padding:34px 0 0}
.steps-grid::before,.steps-grid::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--sand)}
.steps-grid::after{background:var(--gold);transform-origin:left center}
.js .steps-grid.rv-wait::after{transform:scaleX(0)}
.js .steps-grid.rv-in::after{transition:transform 2.2s var(--e1) .3s;transform:scaleX(1)}
.steps-grid>li>span{display:block;width:fit-content;font-size:clamp(44px,5vw,64px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--teal);opacity:.16;margin-bottom:18px;font-variant-numeric:tabular-nums;transition:opacity .65s var(--e1),translate .65s var(--e3)}
@media (hover:hover) and (min-width:901px){.steps-grid>li:hover>span{opacity:1;translate:0 -6px}}
.steps-grid h3{margin:0 0 12px}
.steps-grid p{color:var(--muted);font-size:16px}
.step-line{display:none}
.service-outcome{margin-top:clamp(48px,6vw,72px);background:var(--teal);color:var(--on-teal);border-radius:var(--r-lg);padding:clamp(28px,4vw,44px)}
.service-outcome strong{display:block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2);margin-bottom:12px;font-weight:700}
.service-outcome p{color:var(--on-teal);font-size:clamp(17px,1.4vw,20px);line-height:1.6;max-width:62ch}

/* --- FAQ on inner pages: same accordion as the homepage --- */
.faq-section .faq-intro .sub,.faq-section .faq-intro>p:not(.eyebrow){color:var(--muted);margin-bottom:28px}

/* --- blog index: editorial rows --- */
.blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 6.5%;border-top:1px solid var(--hair)}
.blog-card{position:relative;display:grid;gap:12px;align-content:start;padding:34px 0 36px;border-bottom:1px solid var(--hair)}
.blog-card .eyebrow{margin:0;font-size:11.5px}
.blog-card h2{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.blog-card a.stretch h2{transition:color .45s var(--e1)}
.blog-card a.stretch:hover h2{color:var(--clay)}
.blog-card .meta{font-size:13px;color:var(--muted);letter-spacing:.02em}
.blog-card>p:not(.eyebrow):not(.meta){color:var(--muted);font-size:16px}
.blog-card .readlink{position:relative;width:fit-content;font-weight:700;color:var(--teal);padding-bottom:4px}
.blog-card .readlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform-origin:left center}
@media (hover:hover){.blog-card .readlink:hover::after{animation:swipe-line 1.1s var(--e1) forwards}}
@media (max-width:900px){.blog-grid{grid-template-columns:1fr}}

/* --- articles: prose stays styled inline in each article; this only frames it --- */
.post-share{color:var(--muted)}

/* --- contact --- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,96px);align-items:start}
.contact-aside .eyebrow{margin:0 0 22px}
.contact-aside>p{color:#3D4743;line-height:1.75;margin:0 0 28px}
.contact-method{padding:18px 0;border-top:1px solid var(--hair)}
.contact-method:last-child{border-bottom:1px solid var(--hair)}
.contact-method small{display:block;font-size:11.5px;letter-spacing:.24em;font-weight:700;text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px}
.contact-method p{font-size:16px;color:#3D4743;line-height:1.6}
.contact-method strong{color:var(--ink)}
.quote-form{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,40px);box-shadow:var(--sh-md)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field-full{grid-column:1 / -1}
.field>label{font-size:14.5px;font-weight:700;color:var(--ink)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--cream);border:1px solid var(--hair);border-radius:var(--r-sm);padding:13px 15px;width:100%;min-height:48px;transition:border-color .3s var(--e1),box-shadow .3s var(--e1)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(194,163,93,.35)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#a63d32;box-shadow:0 0 0 3px rgba(166,61,50,.12)}
.field-help{font-size:13px;color:var(--muted);line-height:1.45}
.field-error{color:#8a2f27;font-size:13px;font-weight:700;line-height:1.45;margin:0}
.field-error[hidden]{display:none}
.consent-field>label{flex-direction:row;align-items:flex-start;gap:10px;font-weight:500;font-size:14.5px;color:#3D4743;line-height:1.5}
.consent-field input{width:auto;min-height:0;margin-top:3px;flex:none}
.consent-field a{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.honeypot-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-footer{margin-top:26px}
.form-footer p{font-size:13.5px;color:var(--muted);margin:0 0 18px}
.form-footer .btn{border:0;cursor:pointer;font-family:inherit}
.form-status{margin-top:14px;font-size:15px;font-weight:600;color:var(--teal)}
.form-status a{color:var(--clay);font-weight:700;text-decoration:underline}
#enquiry-form{scroll-margin-top:110px}

/* --- packages: price cards keep their inline styles; buttons and table get the system treatment --- */
.price-card .btn{height:auto;min-height:52px;white-space:normal;text-align:left;line-height:1.3;padding-block:14px}
.pkg-compare{font-variant-numeric:tabular-nums}

/* --- responsive --- */
@media (max-width:900px){
  .about-grid,.service-page-grid,.contact-grid{grid-template-columns:1fr;gap:44px}
  .service-detail{grid-template-columns:1fr;gap:18px}
  .value-grid{grid-template-columns:1fr 1fr}
  .steps-grid{grid-template-columns:1fr 1fr;gap:34px 28px}
  .founder-card-photo{max-width:440px}
  .contact-grid .quote-form{order:1}
  .contact-grid .contact-aside{order:2}
}
@media (max-width:640px){
  .value-grid,.deliverable-grid,.check-grid,.steps-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .final-cta .btn{white-space:normal;height:auto;min-height:52px;padding-block:14px;line-height:1.3}
}
/* the homepage hero's eyebrow + button row hide on phones: the sticky action bar carries the quote CTA (kept from the live site) */
@media (max-width:680px){.hero-copy .eyebrow,.hero-copy .btn-row{display:none}}

@media (prefers-reduced-motion:reduce){
  .js .page-hero-inner>*{opacity:1!important;transform:none!important}
  .js .photo-wipe.rv-wait,.js .photo-wipe.rv-in{clip-path:none!important;transition:none!important}
  .js .photo-wipe img{transform:none!important;transition:none!important}
  .js .steps-grid::after{transform:none!important;transition:none!important}
  .steps-grid>li>span,.breadcrumb a::after{transition:none!important}
}
/* work showcase: WebP with JPEG fallback; picture is just a block wrapper so the natural-ratio rule still applies */
.work-screen picture,.work-phone picture{display:block}
/* estimator: the consent link in the dark estimate card needs an underline to stand apart from the text around it */
.lec a[href="privacy.html"]{text-decoration:underline;text-underline-offset:2px}