/* =========================================================
   Circle Square — elevated concept (prototype only)
   Palette v4: the live site's warm cream + warm near-black (no pure white surfaces)
   ========================================================= */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce){ @view-transition { navigation: none; } }

:root{
  /* colour */
  /* v4 palette: live-site values (circlesq.com.au home.css :root) + two derived tones */
  --ink:#211e1a;      /* live --ink */
  --paper:#f4f0e8;    /* live --paper: page background */
  --warm:#ece5d9;     /* live --sage: alternate section band */
  --sand:#ece5d9;     /* live --sage */
  --char:#1c1a16;     /* live --char: dark panels */
  --card:#fffdf8;     /* live --surface. Alex prefers the live palette, so the derived midpoint is out. */
  --ink-2:#3b352e;    /* live secondary heading tone (.hero-title .l2) */
  --muted:#6a635a;    /* live --mid */
  --muted-inv:#c2baad;/* DERIVED: warm light grey for secondary text on --char */
  --line:rgba(33,30,26,.13);      /* live --line */
  --line-inv:rgba(244,240,232,.16);/* DERIVED from live --line-d, warm-tinted */
  /* type */
  --f-disp:'General Sans','Inter',system-ui,sans-serif; --f-body:'Inter',system-ui,sans-serif;
  /* motion tokens */
  --d-1:120ms; --d-2:200ms; --d-3:320ms; --d-4:560ms; --d-5:900ms;
  --e-out:cubic-bezier(.22,1,.36,1);      /* settle */
  --e-inout:cubic-bezier(.65,0,.35,1);    /* sway / transitions */
  --e-spring:cubic-bezier(.34,1.56,.64,1);/* small overshoot for icons */
  --e-press:cubic-bezier(.2,0,0,1);       /* press-in */
  /* elevation (warm-tinted, layered) */
  --sh:28 18% 12%;
  --e1:0 1px 1px hsl(var(--sh)/.07),0 2px 4px hsl(var(--sh)/.06);
  --e2:0 1px 1px hsl(var(--sh)/.06),0 2px 2px hsl(var(--sh)/.06),0 4px 8px hsl(var(--sh)/.06),0 8px 16px hsl(var(--sh)/.05);
  --e3:0 1px 1px hsl(var(--sh)/.05),0 2px 4px hsl(var(--sh)/.05),0 6px 12px hsl(var(--sh)/.06),0 12px 24px hsl(var(--sh)/.07),0 24px 48px hsl(var(--sh)/.06);
  --e4:0 1px 1px hsl(var(--sh)/.05),0 3px 6px hsl(var(--sh)/.05),0 8px 16px hsl(var(--sh)/.06),0 16px 32px hsl(var(--sh)/.08),0 32px 64px hsl(var(--sh)/.09);
  --e5:0 2px 2px hsl(var(--sh)/.05),0 6px 12px hsl(var(--sh)/.06),0 16px 32px hsl(var(--sh)/.08),0 40px 80px -12px hsl(var(--sh)/.22),0 80px 140px -40px hsl(var(--sh)/.30);
  /* depth layers (translateZ inside a 1400px perspective) */
  --z-back:-90px; --z-mid:0px; --z-front:50px; --z-float:110px;
  /* shape */
  --r-sm:12px; --r-md:20px; --r-lg:28px; --r-xl:36px; --r-pill:999px;
  --tap:44px; --wrap:1380px; --pad:clamp(20px,4.5vw,60px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto} /* animated in js/site.js, which can ease and time it */
/* the nav is fixed, so an anchor target has to stop short of it or the heading
   lands underneath. This covers the animated path AND any plain jump (a pasted
   link, the back button, reduced motion). */
:target,[id]{scroll-margin-top:calc(var(--hdr) + 22px)}
body{font-family:var(--f-body);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;position:relative}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:10px;z-index:100}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:10px}
.dark :focus-visible{outline-color:var(--paper)}

/* ---------- type ---------- */
.eyebrow{font:600 13px/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;gap:14px;align-items:center}
.eyebrow .n{font-feature-settings:"tnum";color:var(--ink)}
.dark .eyebrow{color:var(--muted-inv)} .dark .eyebrow .n{color:var(--paper)}
.h-display{font:600 clamp(52px,6.6vw,98px)/.93 var(--f-disp);letter-spacing:-.05em}
.h-display .l2{display:block;font-weight:400;color:#3b352e}
.h1{font:600 clamp(46px,6.4vw,96px)/.95 var(--f-disp);letter-spacing:-.04em}
.h2{font:600 clamp(36px,4.6vw,68px)/1 var(--f-disp);letter-spacing:-.035em}
.h3{font:600 clamp(22px,2vw,28px)/1.15 var(--f-disp);letter-spacing:-.02em}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--muted);max-width:52ch}
.dark .lede{color:var(--muted-inv)}
.small{font-size:15px;color:var(--muted)}

/* ---------- placeholders (clearly marked, never stock) ---------- */
.ph{position:relative;background:
   repeating-linear-gradient(135deg,#e2dbce 0 14px,#ebe5da 14px 28px);display:flex;align-items:center;justify-content:center;color:#211e1a;text-align:center;overflow:hidden}
.ph::after{content:"";position:absolute;inset:10px;border:2px dashed #8f877b;border-radius:inherit;pointer-events:none}
.ph span{position:relative;z-index:1;background:var(--paper);border:1.5px solid #211e1a;border-radius:10px;padding:10px 14px;font:600 14px/1.35 ui-monospace,Menlo,Consolas,monospace;max-width:86%;box-shadow:var(--e1)}

/* ---------- buttons ---------- */
.btn{--mx:0px;--my:0px;--lift:0px;--sc:1;position:relative;display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 10px 0 26px;border-radius:var(--r-pill);font:600 16.5px/1 var(--f-body);letter-spacing:-.005em;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;
  transform:translate3d(var(--mx),calc(var(--my) + var(--lift)),0) scale(var(--sc));
  transition:transform var(--d-3) var(--e-out),box-shadow var(--d-3) var(--e-out),background-color var(--d-2) linear,color var(--d-2) linear;will-change:transform}
.btn__label{display:inline-block;transform:translate3d(calc(var(--mx)*.35),calc(var(--my)*.35),0);transition:transform var(--d-3) var(--e-out)}
.btn__icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;overflow:hidden;position:relative;flex:none;transition:transform var(--d-3) var(--e-spring),background-color var(--d-2)}
.btn__icon svg{width:18px;height:18px;transition:transform var(--d-3) var(--e-out)}
.btn__icon svg + svg{position:absolute;transform:translateX(-160%)}
.btn--primary{background:linear-gradient(180deg,#35302a 0%,#211e1a 55%,#1f1c18 100%);color:var(--paper);
  box-shadow:inset 0 1px 0 rgba(250,247,240,.16),inset 0 -2px 0 rgba(0,0,0,.35),var(--e2)}
.btn--primary .btn__icon{background:var(--paper);color:var(--ink)}
.btn--secondary{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink),var(--e1)}
.btn--secondary .btn__icon{background:var(--sand);color:var(--ink)}
.btn--light{background:linear-gradient(180deg,#f7f3ec,#ebe4d8);color:var(--ink);box-shadow:inset 0 -2px 0 rgba(0,0,0,.08),0 10px 30px -8px rgba(0,0,0,.5)}
.btn--light .btn__icon{background:var(--ink);color:var(--paper)}
.btn--ghost{background:rgba(244,240,232,.06);color:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(244,240,232,.55)}
.btn--ghost .btn__icon{background:rgba(244,240,232,.12);color:var(--paper)}
.btn--sm{min-height:48px;font-size:15.5px;padding-left:20px;gap:10px;padding-right:6px}
.btn--sm .btn__icon{width:36px;height:36px}
.btn--plain{padding:0 22px}
/* hover + keyboard focus share the lift (focus never relies on hover) */
.btn:hover,.btn.is-hover,.btn:focus-visible,.btn.is-focus{--lift:-3px}
.btn--primary:hover,.btn--primary.is-hover,.btn--primary:focus-visible,.btn--primary.is-focus{box-shadow:inset 0 1px 0 rgba(250,247,240,.18),inset 0 -2px 0 rgba(0,0,0,.35),var(--e4)}
.btn--secondary:hover,.btn--secondary.is-hover,.btn--secondary:focus-visible,.btn--secondary.is-focus{background:var(--warm);box-shadow:inset 0 0 0 1.5px var(--ink),var(--e3)}
.btn--ghost:hover,.btn--ghost.is-hover{background:rgba(244,240,232,.14)}
.btn:hover .btn__icon,.btn.is-hover .btn__icon,.btn:focus-visible .btn__icon,.btn.is-focus .btn__icon{transform:rotate(-8deg) scale(1.06)}
.btn:hover .btn__icon svg:first-child,.btn.is-hover .btn__icon svg:first-child,.btn:focus-visible .btn__icon svg:first-child,.btn.is-focus .btn__icon svg:first-child{transform:translateX(160%)}
.btn:hover .btn__icon svg + svg,.btn.is-hover .btn__icon svg + svg,.btn:focus-visible .btn__icon svg + svg,.btn.is-focus .btn__icon svg + svg{transform:translateX(0)}
.btn:focus-visible,.btn.is-focus{outline:3px solid var(--ink);outline-offset:4px}
.dark .btn:focus-visible,.dark .btn.is-focus{outline-color:var(--paper)}
/* pressed: sinks into the page */
.btn:active,.btn.is-pressed{--lift:1px;--sc:.975;transition-duration:var(--d-1);transition-timing-function:var(--e-press)}
.btn--primary:active,.btn--primary.is-pressed{box-shadow:inset 0 3px 8px rgba(0,0,0,.55),inset 0 -1px 0 rgba(250,247,240,.06),var(--e1)}
.btn--secondary:active,.btn--secondary.is-pressed{background:var(--sand);box-shadow:inset 0 0 0 1.5px var(--ink),inset 0 3px 8px rgba(0,0,0,.14)}
.btn:active .btn__icon,.btn.is-pressed .btn__icon{transform:scale(.92)}
.tlink{font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;padding:12px 0;display:inline-flex;align-items:center;min-height:44px;transition:text-underline-offset var(--d-3) var(--e-out),text-decoration-color var(--d-3)}
.tlink:hover,.tlink:focus-visible{text-underline-offset:9px;text-decoration-color:rgba(33,30,26,.4)}

/* icon button (pause etc) */
.ibtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 16px;border-radius:var(--r-pill);border:0;background:rgba(250,247,240,.82);backdrop-filter:blur(10px);color:var(--ink);font:600 14px/1 var(--f-body);box-shadow:inset 0 0 0 1px var(--line),var(--e2);cursor:pointer;transition:transform var(--d-2) var(--e-out),box-shadow var(--d-2)}
.ibtn:hover,.ibtn.is-hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line),var(--e3)}
.ibtn svg{width:16px;height:16px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(244,240,232,.78);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid transparent;transition:box-shadow var(--d-3),border-color var(--d-3)}
.hdr.is-scrolled{border-color:var(--line);box-shadow:0 8px 30px -18px hsl(var(--sh)/.35)}
.hdr__in{display:flex;align-items:center;gap:20px;height:84px}
.hdr__logo img{height:34px;width:auto}
.nav{display:flex;gap:2px;margin-left:8px;white-space:nowrap}
.nav > a,.nav > div > button{font:500 15.5px/1 var(--f-body);color:var(--ink);text-decoration:none;min-height:44px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);background:none;white-space:nowrap;border:0;cursor:pointer;transition:background-color var(--d-2)}
.nav > a:hover,.nav > div > button:hover,.nav .is-open > button,.nav [aria-current]{background:rgba(33,30,26,.06)}
.nav svg{width:12px;height:12px;transition:transform var(--d-3) var(--e-out)}
.nav .is-open svg{transform:rotate(180deg)}
.hdr__right{margin-left:auto;display:flex;align-items:center;gap:16px}
.hdr__tel{white-space:nowrap;font-weight:600;font-size:15.5px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.burger{display:none}
.dd{position:relative}
.dd__panel{position:absolute;left:-12px;top:calc(100% + 14px);width:760px;background:rgba(250,247,240,.96);backdrop-filter:blur(18px);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line),var(--e5);padding:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:20% 0;transition:opacity var(--d-2) linear,transform var(--d-3) var(--e-out),visibility 0s linear var(--d-3)}
.dd.is-open .dd__panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dd__item{border-radius:var(--r-md);padding:12px;text-decoration:none;display:block;transition:background-color var(--d-2),transform var(--d-3) var(--e-out)}
.dd__item:hover,.dd__item:focus-visible{background:var(--warm);transform:translateY(-2px)}
.dd__thumb{height:96px;border-radius:14px;overflow:hidden;margin-bottom:12px}
.dd__thumb img{width:100%;height:100%;object-fit:cover}
.dd__thumb.ph span{font-size:11px;padding:5px 7px}
.dd__item b{font:600 19px/1.1 var(--f-disp);display:block;letter-spacing:-.01em}
.dd__item small{font-size:13.5px;color:var(--muted);display:block;margin-top:4px;line-height:1.35}
.dd__all{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:12px 12px 4px;font-weight:600;font-size:15px;text-decoration:none}

/* ---------- hero (home) ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1100px 620px at 78% 30%,var(--card) 0%,rgba(250,247,240,0) 60%),
  linear-gradient(180deg,var(--warm) 0%,var(--paper) 100%)}
.hero__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:32px;align-items:center;min-height:min(calc(100vh - 84px),816px);padding-top:40px;padding-bottom:64px}
.hero__copy .eyebrow{margin-bottom:28px}
.hero__copy .lede{margin-top:26px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:36px}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px;max-width:680px}
.trust li{list-style:none;background:rgba(250,247,240,.7);backdrop-filter:blur(8px);border-radius:16px;padding:14px 14px 13px;box-shadow:inset 0 0 0 1px var(--line),var(--e1);font-size:14px;line-height:1.3;color:var(--muted)}
.trust b{display:block;font:600 18px/1.1 var(--f-disp);color:var(--ink);margin-bottom:4px;letter-spacing:-.01em}

/* 3D photo stage */
.stage{--rx:0deg;--ry:0deg;position:relative;height:640px;perspective:1400px;perspective-origin:50% 40%}
.stage__rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform var(--d-5) var(--e-out)}
.layer{position:absolute;border-radius:var(--r-xl);overflow:hidden;transform-style:preserve-3d}
.layer img,.layer picture{width:100%;height:100%;object-fit:cover}
.layer--back{width:46%;height:58%;right:0;top:4%;transform:translateZ(var(--z-back)) rotateY(-6deg);box-shadow:var(--e3);filter:saturate(.9)}
.layer--main{width:62%;height:84%;left:10%;top:8%;transform:translateZ(var(--z-mid)) rotateY(-7deg) rotateX(2deg);box-shadow:var(--e5)}
.layer--front{width:40%;height:36%;right:2%;bottom:2%;transform:translateZ(var(--z-front)) rotateY(-9deg);box-shadow:var(--e5);border:6px solid var(--card);border-radius:30px}
.layer__cap{position:absolute;left:14px;bottom:14px;background:rgba(244,240,232,.9);backdrop-filter:blur(8px);border-radius:var(--r-pill);padding:8px 14px;font:600 13px/1 var(--f-body);box-shadow:var(--e2)}
.layer--main::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(250,247,240,.18) 0%,rgba(250,247,240,0) 38%);pointer-events:none}
/* extruded CSS logo mark */
.mark{--s:1;position:absolute;left:-2%;bottom:6%;width:230px;height:111px;transform-style:preserve-3d;transform:translateZ(var(--z-float));pointer-events:none}
.mark__rot{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(12deg + var(--mrx,0deg))) rotateY(calc(-22deg + var(--mry,0deg)));animation:sway 9s var(--e-inout) infinite alternate}
.mark__l{position:absolute;inset:0;-webkit-mask:var(--mark-mask) center/contain no-repeat;mask:var(--mark-mask) center/contain no-repeat;background:#171512}
.mark__l--face{background:linear-gradient(135deg,#4b453e 0%,#211e1a 45%,#191713 100%)}
.mark__l--shine{background:linear-gradient(105deg,rgba(250,247,240,0) 30%,rgba(250,247,240,.35) 45%,rgba(250,247,240,0) 60%) 0 0/300% 100%;animation:shine 9s var(--e-inout) infinite alternate;mix-blend-mode:screen}
.mark__shadow{position:absolute;left:8%;right:8%;bottom:-34px;height:26px;border-radius:50%;background:radial-gradient(closest-side,hsl(var(--sh)/.35),transparent);transform:translateZ(-40px) rotateX(80deg);animation:shadow 9s var(--e-inout) infinite alternate}
@keyframes sway{from{transform:rotateX(12deg) rotateY(-30deg)}to{transform:rotateX(6deg) rotateY(26deg)}}
@keyframes shine{from{background-position:100% 0}to{background-position:0 0}}
@keyframes shadow{from{transform:translateZ(-40px) rotateX(80deg) scaleX(.9)}to{transform:translateZ(-40px) rotateX(80deg) scaleX(1.05)}}
.is-paused .mark__rot,.is-paused .mark__l--shine,.is-paused .mark__shadow{animation-play-state:paused}
.stage.is-pointer .mark__rot{animation:none;transform:rotateX(calc(10deg + var(--mrx,0deg))) rotateY(calc(-10deg + var(--mry,0deg)));transition:transform var(--d-4) var(--e-out)}
.stage__pause{position:absolute;right:0;top:0;z-index:5}

/* ---------- chooser ---------- */
.sec{padding:120px 0}
.sec--tight{padding:88px 0}
.sec__head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.sec__head .eyebrow{margin-bottom:20px}
/* Alex rejected the full-width hairline between sections. Kept as a short soft
   fade beside the eyebrow: it still marks a section start without ruling a line
   across the page. Spacing rhythm unchanged. */
.rule{height:1px;width:56px;margin-bottom:22px;
  background:linear-gradient(90deg,var(--line),transparent)}
.dark .rule,.coord .rule,.ftr .rule{background:linear-gradient(90deg,var(--line-inv),transparent)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;perspective:1600px}
.card{--rx:0deg;--ry:0deg;--gx:50%;--gy:0%;--lift:0px;position:relative;background:var(--card);border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px var(--line),var(--e2);transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));transform-style:preserve-3d;transition:transform var(--d-4) var(--e-out),box-shadow var(--d-4) var(--e-out);display:flex;flex-direction:column}
.card__media{position:relative;height:300px;margin:10px 10px 0;border-radius:calc(var(--r-xl) - 8px);overflow:hidden;transform:translateZ(20px)}
.card__media img,.card__media picture{width:100%;height:100%;object-fit:cover;transform:scale(1.06) translate3d(calc(var(--px,0)*-10px),calc(var(--py,0)*-10px),0);transition:transform var(--d-5) var(--e-out)}
.card__chip{position:absolute;left:14px;top:14px;z-index:2;background:rgba(244,240,232,.92);backdrop-filter:blur(8px);border-radius:var(--r-pill);padding:8px 13px;font:600 13px/1 var(--f-body);display:inline-flex;gap:8px;align-items:center;box-shadow:var(--e2)}
.card__chip i{width:8px;height:8px;border-radius:50%;background:#2f7d4f;box-shadow:0 0 0 3px rgba(47,125,79,.18)}
.card__body{padding:26px 28px 28px;transform:translateZ(34px);display:flex;flex-direction:column;flex:1}
.card__n{font:600 13px/1 var(--f-body);letter-spacing:.14em;color:var(--muted)}
.card__name{font:600 54px/.95 var(--f-disp);letter-spacing:-.04em;margin-top:14px}
.card__name a{text-decoration:none}
.card__sub{font:500 18px/1.3 var(--f-disp);color:var(--muted);margin-top:6px}
.card__meta{margin:20px 0 24px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--muted)}
.card__meta b{color:var(--ink);font-weight:600}
.card__cta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card__glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(600px circle at var(--gx) var(--gy),rgba(250,247,240,.55),rgba(250,247,240,0) 40%);opacity:0;transition:opacity var(--d-3);mix-blend-mode:soft-light;z-index:3}
.card:hover,.card.is-hover{--lift:-10px;box-shadow:inset 0 0 0 1px var(--line),var(--e5)}
.card:hover .card__glare,.card.is-hover .card__glare{opacity:1}
.card:focus-within,.card.is-focus{--lift:-10px;box-shadow:inset 0 0 0 1px var(--line),var(--e5)}
.card.is-rmhover{box-shadow:inset 0 0 0 2px var(--ink),var(--e3)}
.card--mobile{background:var(--ink);color:var(--paper)}
.card--mobile .card__n,.card--mobile .card__sub,.card--mobile .card__meta{color:var(--muted-inv)}
.card--mobile .card__meta{border-color:var(--line-inv)} .card--mobile .card__meta b{color:var(--paper)}
.next{margin-top:24px;border:1.5px dashed rgba(33,30,26,.3);border-radius:var(--r-lg);padding:20px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted)}
.next b{color:var(--ink);font:600 20px/1.2 var(--f-disp)}

/* ---------- mobile sticky bar ---------- */
.mbar{display:none}

/* ---------- reveals (only when JS + motion allowed) ---------- */
/* reveal uses the independent `translate` property so it never fights component transforms (tilt, lift, press) */
.js-motion [data-reveal]:not(.in){opacity:0;translate:0 28px}
.js-motion [data-reveal]{transition:opacity var(--d-5) var(--e-out),translate var(--d-5) var(--e-out),transform var(--d-4) var(--e-out),box-shadow var(--d-3) var(--e-out);transition-delay:calc(var(--i,0) * 70ms)}
.js-motion [data-reveal].in{opacity:1;translate:none}

/* ---------- studio page ---------- */
.crumbs{font-size:14.5px;color:var(--muted);display:flex;gap:10px;padding-top:26px}
.crumbs a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.crumbs a:hover{text-decoration:underline}
.shero{background:linear-gradient(180deg,var(--warm),var(--paper))}
.shero__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:24px 0 90px}
.facts{margin-top:34px;background:rgba(250,247,240,.8);backdrop-filter:blur(10px);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line),var(--e3);padding:6px 22px;max-width:560px}
.facts div{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);font-size:16px}
.facts div:last-child{border:0}
.facts dt{font:600 12.5px/1.6 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.facts dd b{font-weight:600}
.shero .stage{height:600px}
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip div{padding:30px 26px;border-right:1px solid var(--line)}
.strip div:last-child{border:0}
.strip b{display:block;font:600 40px/1 var(--f-disp);letter-spacing:-.03em;margin-bottom:10px}
.strip span{font-size:15px;color:var(--muted);line-height:1.4;display:block}
.access{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:stretch}
.map{border-radius:var(--r-xl);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line),var(--e3);min-height:460px;position:relative;background:#e6dfd2}
.map iframe{width:100%;height:100%;border:0;position:absolute;inset:0;filter:grayscale(.35) contrast(.98)}
.map__addr{position:absolute;left:18px;bottom:18px;z-index:2;background:var(--card);border-radius:18px;padding:14px 18px;box-shadow:var(--e4);font-size:15px;line-height:1.45;max-width:320px}
.alist{background:var(--card);border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px var(--line),var(--e2);padding:30px}
.alist ul{list-style:none;margin-top:18px}
.alist li{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px;align-items:start}
.alist li:last-child{border:0}
.alist li i{width:32px;height:32px;border-radius:10px;background:var(--sand);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:15px}
.gal{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:280px 280px;gap:18px}
.gal > *{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e3);position:relative}
.gal > *:first-child{grid-row:1/3}
.gal img,.gal picture{width:100%;height:100%;object-fit:cover;transition:transform var(--d-5) var(--e-out)}
.gal > *:hover img{transform:scale(1.04)}
.gal figcaption{position:absolute;left:12px;bottom:12px;background:rgba(244,240,232,.92);border-radius:var(--r-pill);padding:7px 12px;font:600 13px/1 var(--f-body)}
.tour{margin-top:18px;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;background:var(--card);border-radius:var(--r-lg);padding:18px 22px;box-shadow:inset 0 0 0 1px var(--line),var(--e2)}
.tour__ic{width:64px;height:64px;border-radius:18px;background:linear-gradient(145deg,#3b352e,#1e1b17);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(250,247,240,.15),var(--e2)}
.tour__ic svg{width:30px;height:30px;color:var(--paper)}
.svc{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.svc a{display:block;text-decoration:none;background:var(--card);border-radius:var(--r-md);padding:20px;box-shadow:inset 0 0 0 1px var(--line),var(--e1);transition:transform var(--d-3) var(--e-out),box-shadow var(--d-3) var(--e-out);min-height:150px}
.svc a:hover,.svc a:focus-visible{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line),var(--e3)}
.svc b{font:600 19px/1.15 var(--f-disp);display:block;letter-spacing:-.01em}
.svc span{display:block;font-size:14.5px;color:var(--muted);margin-top:8px;line-height:1.4}
.svc em{font-style:normal;font-size:13px;font-weight:600;display:inline-flex;margin-top:14px;gap:6px}
.band{background:var(--ink);color:var(--paper);border-radius:var(--r-xl);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:var(--e4);position:relative}
.band__copy{padding:56px}
.band__media{position:relative;min-height:440px;perspective:1200px}
.band__media .layer{border-radius:24px}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tcard{background:var(--card);border-radius:var(--r-lg);padding:10px;box-shadow:inset 0 0 0 1px var(--line),var(--e1);transition:transform var(--d-3) var(--e-out),box-shadow var(--d-3) var(--e-out);position:relative}
.tcard:hover,.tcard:focus-within{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--line),var(--e4)}
.tcard__ph{aspect-ratio:4/5;border-radius:calc(var(--r-lg) - 6px);overflow:hidden;background:#e0d8ca}
.tcard__ph img,.tcard__ph picture{width:100%;height:100%;object-fit:cover}
.tcard__m{padding:14px 8px 8px;display:flex;justify-content:space-between;align-items:end;gap:10px}
.tcard__m b{font:600 19px/1.15 var(--f-disp);display:block}
.tcard__m small{font-size:14px;color:var(--muted)}
.tcard__m button{min-width:44px;min-height:44px;border-radius:50%;border:0;background:var(--sand);cursor:pointer;display:grid;place-items:center}
.tcard__tag{position:absolute;right:18px;top:18px;background:rgba(244,240,232,.92);border-radius:var(--r-pill);padding:6px 10px;font:600 12px/1 var(--f-body)}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev{background:var(--card);border-radius:var(--r-lg);padding:28px;box-shadow:inset 0 0 0 1px var(--line),var(--e2);display:flex;flex-direction:column;gap:18px}
.rev p{font:500 20px/1.4 var(--f-disp);letter-spacing:-.01em}
.rev footer{margin-top:auto;font-size:14.5px;color:var(--muted)}
.stars{letter-spacing:3px;font-size:15px}
.newst{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.newst__card{border-radius:var(--r-xl);padding:40px;position:relative;overflow:hidden}
.newst__card--dark{background:var(--ink);color:var(--paper);box-shadow:var(--e4)}
.newst__card--light{background:var(--card);box-shadow:inset 0 0 0 1px var(--line),var(--e2)}
.steps{list-style:none;margin-top:22px;counter-reset:s}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.steps li::before{counter-increment:s;content:"0" counter(s);font:600 14px/1.8 var(--f-body);letter-spacing:.1em;color:var(--muted)}
.steps b{font:600 19px/1.2 var(--f-disp);display:block;margin-bottom:4px}
.steps span{font-size:15.5px;color:var(--muted)}
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;min-height:64px;display:flex;justify-content:space-between;align-items:center;gap:20px;font:600 20px/1.3 var(--f-disp);letter-spacing:-.01em;padding:14px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:36px;height:36px;border-radius:50%;background:var(--sand);display:grid;place-items:center;flex:none;font-style:normal;transition:transform var(--d-3) var(--e-out)}
.faq details[open] summary i{transform:rotate(45deg)}
.faq details p{padding:0 60px 22px 0;color:var(--muted)}
.social{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.social a,.social div{display:flex;align-items:center;gap:16px;background:var(--card);border-radius:var(--r-lg);padding:20px 22px;box-shadow:inset 0 0 0 1px var(--line),var(--e1);text-decoration:none;transition:transform var(--d-3) var(--e-out),box-shadow var(--d-3)}
.social a:hover,.social a:focus-visible{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line),var(--e3)}
.social i{width:48px;height:48px;border-radius:14px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-style:normal;font-weight:700;flex:none}
.social small{display:block;color:var(--muted);font-size:14px}
.cta{background:var(--char);color:var(--paper);border-radius:var(--r-xl);padding:88px 60px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--e5)}
.cta::before{content:"";position:absolute;inset:auto -10% -60% -10%;height:120%;background:radial-gradient(closest-side,rgba(250,247,240,.08),transparent);pointer-events:none}
.cta .h2{max-width:14ch;margin:0 auto}
.cta__btns{display:flex;justify-content:center;gap:14px;margin-top:36px;flex-wrap:wrap}
.cta__other{margin-top:34px;font-size:15px;color:var(--muted-inv)}
.cta__other a{color:var(--paper);margin:0 8px;min-height:44px;display:inline-flex;align-items:center}
.ftr{background:var(--char);color:var(--muted-inv);margin-top:120px;padding:64px 0 40px;font-size:15px}
.ftr__g{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.ftr b{color:var(--paper);display:block;margin-bottom:10px;font-weight:600}
.ftr a{color:var(--muted-inv);text-decoration:none;display:block;min-height:32px;line-height:32px}
.ftr__legal{border-top:1px solid var(--line-inv);margin-top:48px;padding-top:22px;display:flex;justify-content:space-between;font-size:13.5px}
.dark{background:var(--ink);color:var(--paper)}

/* scroll-driven depth parallax (progressive; user-driven by scroll, no hijack) */
@supports (animation-timeline: view()){
  .js-motion [data-depth] img{animation:depth linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes depth{from{transform:scale(1.14) translate3d(0,calc(var(--d,1) * -18px),0)}to{transform:scale(1.14) translate3d(0,calc(var(--d,1) * 18px),0)}}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  body{font-size:16px;padding-bottom:84px}
  .nav,.hdr__tel,.hdr__right .btn{display:none}
  .hdr__in{height:68px}
  .hdr__logo img{height:28px}
  .burger{display:inline-flex;margin-left:auto;min-width:48px;min-height:48px;border-radius:14px;border:0;background:var(--card);box-shadow:inset 0 0 0 1px var(--line),var(--e1);align-items:center;justify-content:center;gap:8px;padding:0 14px;font:600 15px/1 var(--f-body)}
  .hero__grid,.shero__grid{grid-template-columns:1fr;min-height:0;max-height:none;padding-top:22px;padding-bottom:40px;gap:20px}
  .hero__copy .eyebrow{margin-bottom:18px}
  .h-display{font-size:56px}
  .hero__copy .lede{margin-top:18px}
  .hero__cta{margin-top:24px;flex-direction:column;align-items:stretch}
  .hero__cta .btn{justify-content:space-between}
  .hero__cta .tlink{align-self:flex-start}
  .trust{grid-template-columns:1fr 1fr;margin-top:26px}
  .stage,.shero .stage{height:420px}
  .mark{width:150px;height:72px;left:0;bottom:4%}
  .layer--main{left:4%;width:70%}
  .sec{padding:72px 0}
  .sec__head{grid-template-columns:1fr;gap:16px;margin-bottom:32px}
  .cards{grid-template-columns:1fr;gap:18px}
  .card__media{height:220px}
  .card__name{font-size:44px}
  .card__body{padding:22px}
  .next{flex-direction:column;align-items:flex-start}
  .strip{grid-template-columns:1fr 1fr}
  .strip div:nth-child(2){border-right:0}
  .strip div{border-bottom:1px solid var(--line);padding:22px 18px}
  .strip b{font-size:32px}
  .access,.faq,.newst,.band,.social{grid-template-columns:1fr}
  .map{min-height:320px}
  .gal{grid-template-columns:1fr 1fr;grid-template-rows:240px 160px 160px}
  .gal > *:first-child{grid-column:1/3;grid-row:auto}
  .svc{grid-template-columns:1fr 1fr}
  .team{grid-template-columns:1fr 1fr;gap:14px}
  .revs{grid-template-columns:1fr}
  .band__copy{padding:34px 26px}
  .band__media{min-height:340px}
  .newst__card{padding:28px 24px}
  .cta{padding:56px 24px}
  .facts div{grid-template-columns:1fr;gap:2px}
  .tour{grid-template-columns:auto 1fr}
  .tour .btn{grid-column:1/-1;justify-content:space-between}
  .ftr__g{grid-template-columns:1fr 1fr}
  .ftr__legal{flex-direction:column;gap:8px}
  .mbar{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:60;gap:8px;padding:8px;border-radius:22px;background:rgba(33,30,26,.92);backdrop-filter:blur(14px);box-shadow:0 18px 40px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(250,247,240,.1)}
  .mbar a{flex:1;min-height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:8px;font:600 16px/1.1 var(--f-body);text-decoration:none;text-align:center}
  .mbar__call{background:rgba(244,240,232,.1);color:var(--paper);box-shadow:inset 0 0 0 1px rgba(244,240,232,.25)}
  .mbar__refer{background:var(--paper);color:var(--ink)}
  .mbar small{display:block;font-weight:500;font-size:12.5px;opacity:.75}
  .shot-full .mbar{position:absolute;bottom:10px}
  .ftr{margin-top:72px}
}

/* ---------- reduced motion: calm version, automatically ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition-duration:1ms!important;transition-delay:0s!important}
  .js-motion [data-reveal]{opacity:1;translate:none}
  .btn,.btn__label{transform:none!important}
  .card{transform:none!important}
  .card:hover,.card:focus-within{box-shadow:inset 0 0 0 2px var(--ink),var(--e3)}
  .card__media img{transform:none!important}
  .card__glare{display:none}
  .mark__rot{transform:rotateX(10deg) rotateY(-20deg)!important}
  .stage__rig{transform:none!important}
  .stage__pause{display:none}
  .tcard:hover,.svc a:hover,.social a:hover,.dd__item:hover{transform:none}
}
.rm-demo .btn{transform:none!important;transition:none!important}
/* mobile menu sheet */
.sheet{position:fixed;inset:0;z-index:80;background:rgba(28,26,22,.35);backdrop-filter:blur(6px);display:flex;justify-content:flex-end}
.sheet[hidden]{display:none}
.sheet__panel{width:min(420px,100%);height:100%;background:var(--paper);box-shadow:var(--e5);padding:18px 20px 28px;overflow:auto;display:flex;flex-direction:column;gap:6px;animation:sheetin var(--d-4) var(--e-out)}
@keyframes sheetin{from{transform:translateX(24px);opacity:0}}
.sheet__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sheet__close{min-width:48px;min-height:48px;border-radius:14px;border:0;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:22px;cursor:pointer}
.sheet__group{background:var(--card);border-radius:20px;box-shadow:inset 0 0 0 1px var(--line),var(--e1);padding:8px;margin:6px 0 10px}
.sheet__group p{font:600 12.5px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 12px 6px}
.sheet__group a{display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:0 12px;border-radius:14px;text-decoration:none;font:600 19px/1.1 var(--f-disp)}
.sheet__group a small{font:500 14px/1.2 var(--f-body);color:var(--muted)}
.sheet__link{display:flex;align-items:center;min-height:52px;padding:0 12px;font:600 19px/1 var(--f-disp);text-decoration:none;border-bottom:1px solid var(--line)}
.sheet__cta{margin-top:auto;display:grid;gap:10px;padding-top:18px}
/* referral region picker */
.rp{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:26px}
.rp label{position:relative;display:block;cursor:pointer;background:var(--card);border-radius:var(--r-lg);padding:22px;box-shadow:inset 0 0 0 1.5px var(--line),var(--e1);transition:box-shadow var(--d-3) var(--e-out),transform var(--d-3) var(--e-out);min-height:132px}
.rp label:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px rgba(33,30,26,.35),var(--e3)}
.rp input{position:absolute;opacity:0;inset:0;cursor:pointer}
.rp input:focus-visible + .rp__in{outline:3px solid var(--ink);outline-offset:8px;border-radius:12px}
.rp b{font:600 28px/1 var(--f-disp);letter-spacing:-.02em;display:block}
.rp small{display:block;color:var(--muted);font-size:14.5px;margin-top:8px}
.rp__tick{position:absolute;right:18px;top:18px;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(33,30,26,.25);display:grid;place-items:center;transition:background-color var(--d-2),box-shadow var(--d-2)}
.rp__tick svg{width:16px;height:16px;color:var(--paper);stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset var(--d-4) var(--e-out)}
.rp label:has(input:checked){box-shadow:inset 0 0 0 2.5px var(--ink),var(--e3)}
.rp label:has(input:checked) .rp__tick{background:var(--ink);box-shadow:none}
.rp label:has(input:checked) .rp__tick svg{stroke-dashoffset:0}
.rp-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--sand);border-radius:18px;padding:14px 18px;margin-top:22px;font-size:16px}
.rp-banner[hidden]{display:none}
.rp-need{margin-top:18px;font-size:15.5px;color:var(--muted);display:flex;gap:10px;align-items:center}
.field{margin-top:22px;max-width:520px}
.field label{display:block;font-weight:600;font-size:15.5px;margin-bottom:8px}
.field input{width:100%;min-height:54px;border-radius:14px;border:0;background:var(--card);box-shadow:inset 0 0 0 1.5px rgba(33,30,26,.25),var(--e1);padding:0 16px;font:500 17px var(--f-body);transition:box-shadow var(--d-3) var(--e-out),transform var(--d-3) var(--e-out)}
.field input:focus{outline:none;box-shadow:inset 0 0 0 2.5px var(--ink),var(--e3);transform:translateY(-1px)}
.field input:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.field .ok{display:inline-flex;align-items:center;gap:6px;color:#2f6b45;font-size:14px;font-weight:600;margin-top:8px}
@media (max-width:980px){.rp{grid-template-columns:1fr}}

.card__media > .ph,.layer > .ph{width:100%;height:100%}
.card__media > .ph{align-items:flex-end;padding-bottom:30px}
.shot-clip .hdr{position:relative}
.layer__cap{white-space:nowrap}
/* the band faded IN at the top and then stopped dead at the bottom, which is
   the hard horizontal edge. It now melts back out the way it came in. */
#locations{background:linear-gradient(180deg,var(--paper) 0%,var(--warm) 22%,var(--warm) 86%,var(--paper) 100%)}

.gal .ph{width:100%;height:100%}
.tcard__m button svg{width:18px;height:18px}
.social i svg{width:22px;height:22px}

.ph--right{justify-content:flex-end;padding-right:22px}
.ph--right span{max-width:60%}
.newst__card--dark{display:flex;flex-direction:column}
.newst__facts{margin-top:auto;padding-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.newst__facts div{border-top:1px solid var(--line-inv);padding-top:14px}
.newst__facts b{display:block;font:600 18px/1.2 var(--f-disp);color:var(--paper)}
.newst__facts span{font-size:14px;color:var(--muted-inv)}
.shero .mark{left:-4%;bottom:2%}
@media (max-width:980px){.newst__facts{grid-template-columns:1fr}}
@media (max-width:980px){
  .stage,.shero .stage{height:360px}
  .layer--back{display:none}
  .layer--main{left:0;top:0;width:78%;height:90%;transform:rotateY(-5deg)}
  .layer--front{width:46%;height:42%;right:0;bottom:0;border-width:4px}
  .mark,.shero .mark{left:auto;right:4%;top:6%;bottom:auto;width:120px;height:58px}
  .stage__pause{top:auto;bottom:-8px;left:0;right:auto}
  .ph span{font-size:11.5px;padding:7px 9px}
  .svc{grid-template-columns:1fr}
  .svc a{min-height:0}
  .layer__cap{font-size:11.5px;padding:6px 10px;left:8px;bottom:8px}
}

.rp-need[hidden]{display:none}
.dd__thumb.ph{height:96px}

.shot-clip .mbar{display:none}
.sheet__cta .btn{justify-content:space-between}

/* ================= HOME v2: sections below the chooser ================= */
/* a flat fill gives a hard edge at BOTH ends; the fades are a share of the
   section so a tall section melts over a longer run than a short one */
.sec--warm{background:linear-gradient(180deg,var(--paper) 0%,var(--warm) 9%,var(--warm) 91%,var(--paper) 100%)}
.h2 .l2{font-weight:400;color:#3b352e}
.dark .h2 .l2{color:var(--muted-inv)}
/* (02) story */
.story__g{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
.story__media{position:relative;height:640px;perspective:1400px;transform-style:preserve-3d}
.story__a,.story__b{position:absolute;border-radius:var(--r-xl);overflow:hidden}
.story__a{inset:0 18% 12% 0;box-shadow:var(--e5);transform:rotateY(4deg) translateZ(0)}
.story__b{width:44%;height:44%;right:0;bottom:0;border:6px solid var(--card);border-radius:30px;box-shadow:var(--e5);transform:translateZ(60px) rotateY(6deg)}
.story__a img,.story__b img,.story__a picture,.story__b picture{width:100%;height:100%;object-fit:cover}
.story__tag{position:absolute;left:18px;top:18px;background:rgba(244,240,232,.92);backdrop-filter:blur(8px);border-radius:var(--r-pill);padding:9px 15px;font:600 13px/1 var(--f-body);box-shadow:var(--e2)}
.story__copy .eyebrow{margin-bottom:20px}
.story__copy .lede{margin-top:26px}
.story__q{margin-top:30px;padding:26px 28px;background:var(--card);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line),var(--e2);position:relative}
.story__q::before{content:"“";position:absolute;top:-22px;left:22px;font:600 72px/1 var(--f-disp);color:var(--ink)}
.story__q p{font:500 20px/1.45 var(--f-disp);letter-spacing:-.01em}
.story__q footer{margin-top:12px;font-size:14.5px;color:var(--muted)}
.story__pts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0 12px}
.story__pts li{font-size:14.5px;line-height:1.35;color:var(--muted);border-top:1.5px solid var(--ink);padding-top:12px}
.story__pts b{display:block;font:600 20px/1.1 var(--f-disp);color:var(--ink);margin-bottom:4px}
/* (03) services */
.scards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.scard{display:flex;flex-direction:column;text-decoration:none;background:var(--card);border-radius:var(--r-lg);padding:8px;box-shadow:inset 0 0 0 1px var(--line),var(--e2);transition:transform var(--d-3) var(--e-out),box-shadow var(--d-3) var(--e-out)}
.scard:hover,.scard:focus-visible{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--line),var(--e4)}
.scard__m{height:190px;border-radius:calc(var(--r-lg) - 6px);overflow:hidden}
.scard__m img,.scard__m picture{width:100%;height:100%;object-fit:cover;transition:transform var(--d-5) var(--e-out)}
.scard:hover .scard__m img{transform:scale(1.05)}
.scard__m .ph{height:100%;border-radius:inherit}
.scard__m .ph span{font-size:12px;padding:8px 10px}
.scard__b{padding:16px 12px 12px;display:flex;flex-direction:column;flex:1}
.scard__n{font:600 12.5px/1 var(--f-body);letter-spacing:.12em;color:var(--muted)}
.scard__b b{font:600 20px/1.15 var(--f-disp);letter-spacing:-.015em;margin-top:10px}
.scard__b > span:not(.scard__n){font-size:14.5px;line-height:1.45;color:var(--muted);margin-top:8px}
.scard__b em{font-style:normal;font-weight:600;font-size:14px;margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.scard__b em svg{width:16px;height:16px}
.svc__foot{display:flex;align-items:center;gap:28px;margin-top:22px;flex-wrap:wrap}
/* (04) coordinators */
.coord{border-radius:var(--r-xl);padding:64px;box-shadow:var(--e5);position:relative;overflow:hidden;background:var(--char)}
.coord::before{content:"";position:absolute;right:-12%;top:-30%;width:60%;height:90%;background:radial-gradient(closest-side,rgba(244,240,232,.07),transparent);pointer-events:none}
.coord__head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:44px;position:relative}
.coord__g{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;position:relative}
.coord__facts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf{background:rgba(244,240,232,.06);border-radius:var(--r-md);padding:22px 24px;box-shadow:inset 0 0 0 1px var(--line-inv)}
.cf--wide{grid-column:1/-1}
.cf dt{font:600 12.5px/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-inv);margin-bottom:10px}
.cf dd{font-size:16px;line-height:1.55;color:#ebe5da}
.cf dd b{color:var(--paper)}
.cf dd .big{display:block;font:600 34px/1 var(--f-disp);letter-spacing:-.03em;margin-bottom:8px}
.cf .tlink{color:var(--paper);display:flex;width:max-content;margin-top:4px}
.fund{list-style:none;display:grid;gap:8px}
.fund li{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--paper)}
.fund li svg{width:22px;height:22px;padding:4px;border-radius:50%;flex:none}
.fund .y svg{background:var(--paper);color:var(--ink)}
.fund .n{color:var(--muted-inv);font-weight:500}
.fund .n svg{box-shadow:inset 0 0 0 1.5px var(--muted-inv);color:var(--muted-inv)}
.fund small{font-size:13.5px;margin-left:2px}
.coord__act{display:grid;gap:14px;align-content:start}
.act{background:var(--paper);color:var(--ink);border-radius:var(--r-lg);padding:26px;box-shadow:var(--e3)}
.act .btn{width:100%;justify-content:space-between}
.dlbtn{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 16px 10px 10px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1.5px rgba(33,30,26,.2),var(--e1);text-decoration:none;transition:transform var(--d-3) var(--e-out),box-shadow var(--d-3)}
.dlbtn:hover,.dlbtn:focus-visible{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--ink),var(--e3)}
.dlbtn i{width:44px;height:44px;border-radius:14px;background:var(--sand);display:grid;place-items:center;flex:none}
.dlbtn i svg{width:20px;height:20px}
.dlbtn b{display:block;font-size:15.5px}
.dlbtn small{display:block;margin-top:4px}
.ccard{display:grid;grid-template-columns:52px 1fr 44px;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.act--contacts .eyebrow{margin-bottom:8px}
.ccard__av{width:52px;height:52px;border-radius:50%}
.ccard__av::after{inset:4px}
.ccard__av span{font-size:8.5px;padding:2px 4px;border-radius:5px}
.ccard__t small{display:block;font:600 12px/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ccard__t b{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font:600 17px/1.2 var(--f-disp);margin-top:4px}
.ccard__t > span{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-top:4px}
.ccard__go{width:44px;height:44px;border-radius:50%;background:var(--sand);display:grid;place-items:center;transition:transform var(--d-3) var(--e-spring)}
.ccard__go svg{width:18px;height:18px}
.ccard__go:hover,.ccard__go:focus-visible{transform:translateX(3px)}
/* (05) how */
.how{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.how::before{content:"";position:absolute;left:28px;right:28px;top:34px;height:1.5px;background:repeating-linear-gradient(90deg,rgba(33,30,26,.3) 0 6px,transparent 6px 12px)}
.how li{position:relative;background:var(--card);border-radius:var(--r-lg);padding:22px 24px 26px;box-shadow:inset 0 0 0 1px var(--line),var(--e2)}
.how__n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);font:600 14px/1 var(--f-body);letter-spacing:.06em;margin-bottom:22px;box-shadow:0 0 0 6px var(--paper)}
.how b{display:block;font:600 21px/1.15 var(--f-disp);letter-spacing:-.015em}
.how li > span:last-child{display:block;font-size:15px;line-height:1.5;color:var(--muted);margin-top:10px}
/* (06) team teaser */
.teaser{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.teaser__copy .eyebrow{margin-bottom:20px}
.teaser__copy .lede{margin-top:24px}
.fan{position:relative;height:500px;perspective:1400px}
.fan__c{position:absolute;top:50%;left:50%;width:230px;background:var(--card);border-radius:var(--r-lg);padding:8px 8px 14px;box-shadow:var(--e4);
  transform:translate(-50%,-50%) translateY(var(--fl,0px)) translateX(calc((var(--k) - 1.5) * 150px)) translateY(calc((var(--k) - 1.5) * (var(--k) - 1.5) * 14px)) rotate(calc((var(--k) - 1.5) * 5deg));
  transition:transform var(--d-4) var(--e-out),box-shadow var(--d-4) var(--e-out);z-index:calc(10 - var(--k))}
.fan__c:nth-child(2),.fan__c:nth-child(3){z-index:11}
.fan__c picture,.fan__c img{display:block;width:100%;height:250px;object-fit:cover;border-radius:calc(var(--r-lg) - 6px)}
.fan__c figcaption{padding:12px 8px 0}
.fan__c b{display:block;font:600 18px/1.15 var(--f-disp)}
.fan__c small{font-size:13.5px;color:var(--muted)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .fan:hover .fan__c{transform:translate(-50%,-50%) translateY(var(--fl,0px)) translateX(calc((var(--k) - 1.5) * 170px)) translateY(calc((var(--k) - 1.5) * (var(--k) - 1.5) * 10px)) rotate(calc((var(--k) - 1.5) * 3deg))}
  .fan .fan__c:hover{box-shadow:var(--e5);z-index:20}
}
/* (08) visit */
.visit{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:560px;display:grid;place-items:center;text-align:center;box-shadow:var(--e5);background:var(--char)}
.visit__bg{position:absolute;inset:0}
.visit__bg picture,.visit__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3)}
.visit::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,26,22,.78),rgba(28,26,22,.9))}
.visit__in{position:relative;z-index:1;padding:88px 40px}
.visit .h2{max-width:14ch;margin-left:auto;margin-right:auto}
.visit .lede{color:#ddd6ca}
.visit .cta__other{color:#d6cfc2}
@media (max-width:980px){
  .story__g,.teaser,.coord__head,.coord__g{grid-template-columns:1fr;gap:36px}
  .story__media{height:420px}
  .story__a{inset:0 10% 14% 0}
  .story__pts{grid-template-columns:1fr 1fr 1fr;gap:10px}
  .story__pts li{font-size:13.5px}
  .story__pts b{font-size:18px}
  .story__q p{font-size:18px}
  .scards{grid-template-columns:1fr;gap:12px}
  .scard{flex-direction:row;align-items:stretch}
  .scard__m{width:118px;height:auto;min-height:150px;flex:none}
  .scard__m .ph span{font-size:10px;padding:5px 6px}
  .scard__b{padding:12px 10px 4px 16px}
  .scard__b b{font-size:18.5px;margin-top:6px}
  .scard__b > span:not(.scard__n){font-size:14px}
  .scard__b em{padding-top:8px}
  .svc__foot{flex-direction:column;align-items:flex-start;gap:4px}
  .coord{padding:34px 20px;border-radius:28px;margin:0 calc(var(--pad) * -0.5)}
  .coord__head{margin-bottom:28px;gap:18px}
  .coord__facts{grid-template-columns:1fr}
  .cf{padding:20px}
  .act{padding:22px 18px}
  .how{grid-template-columns:1fr;gap:12px}
  .how::before{left:44px;right:auto;top:30px;bottom:30px;width:1.5px;height:auto;background:repeating-linear-gradient(180deg,rgba(33,30,26,.3) 0 6px,transparent 6px 12px)}
  .how li{display:grid;grid-template-columns:44px 1fr;column-gap:16px;padding:20px}
  .how__n{grid-row:1/3;margin:0}
  .how li > span:last-child{grid-column:2;margin-top:6px}
  .fan{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;perspective:none}
  .fan__c{position:relative;top:auto;left:auto;width:auto;transform:translateY(var(--fl,0px)) rotate(calc((var(--k) - 1.5) * 1.2deg));box-shadow:var(--e3)}
  .fan__c picture,.fan__c img{height:190px}
  .visit{min-height:0}
  .visit__in{padding:60px 22px}
}
@media (prefers-reduced-motion: reduce){
  .fan__c{transition:none}
  .scard:hover,.dlbtn:hover,.ccard__go:hover{transform:none}
  .scard:hover .scard__m img{transform:none}
}

/* ================= TOUCH + PRESS (v3) ================= */
html{-webkit-text-size-adjust:100%}
a,button,label,summary,[data-tilt]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* cards lift on press/tap (touch, pen, mouse); buttons sink (rules above) */
.card.is-pressed:not(.is-tilting){--lift:-8px;box-shadow:inset 0 0 0 1px var(--line),var(--e5);transition-duration:var(--d-2)}
.scard.is-pressed,.tcard.is-pressed,.svc a.is-pressed,.how li.is-pressed,.social a.is-pressed,.dd__item.is-pressed,.dlbtn.is-pressed,.cf.is-pressed{transform:translateY(-6px) scale(.99);box-shadow:inset 0 0 0 1px var(--line),var(--e4);transition-duration:var(--d-2)}
.cf.is-pressed{box-shadow:inset 0 0 0 1px var(--line-inv),0 18px 40px -12px rgba(0,0,0,.6)}
.how li{transition:transform var(--d-3) var(--e-out),box-shadow var(--d-3) var(--e-out)}
.cf{transition:transform var(--d-3) var(--e-out),box-shadow var(--d-3) var(--e-out)}
.fan__c.is-pressed{--fl:-16px;box-shadow:var(--e5)}
.mbar a{transition:transform var(--d-1) var(--e-press),background-color var(--d-2)}
.mbar a.is-pressed,.sheet__group a.is-pressed,.sheet__link.is-pressed{transform:scale(.97)}
.rp label.is-pressed{transform:scale(.985)}
.ccard__go.is-pressed{transform:scale(.92)}
/* on touch screens, :hover can "stick" after a tap: neutralise hover-only lifts there (press + focus states still apply) */
@media (hover:none){
  .btn:hover:not(:focus-visible):not(.is-pressed){--lift:0px}
  .btn:hover:not(:focus-visible) .btn__icon{transform:none}
  .btn:hover:not(:focus-visible) .btn__icon svg:first-child{transform:none}
  .btn:hover:not(:focus-visible) .btn__icon svg + svg{transform:translateX(-160%)}
  .card:hover:not(.is-pressed):not(:focus-within){--lift:0px;box-shadow:inset 0 0 0 1px var(--line),var(--e2)}
  .card:hover .card__glare{opacity:0}
  .scard:hover:not(.is-pressed),.tcard:hover:not(.is-pressed),.svc a:hover:not(.is-pressed),.social a:hover:not(.is-pressed),.dd__item:hover:not(.is-pressed),.dlbtn:hover:not(.is-pressed),.ccard__go:hover:not(.is-pressed){transform:none}
  .scard:hover .scard__m img{transform:none}
}

/* ================= HERO MARK v3: its own space, clean resting pose ================= */
/* photos move up/right; the mark rests on its own plinth in the clear bottom-left area (no overlap) */
.stage .layer--back{width:42%;height:48%;right:0;top:2%}
.stage .layer--main{width:58%;height:70%;left:6%;top:3%}
.stage .layer--front{width:40%;height:40%;right:0;bottom:8%}
.plinth{position:absolute;left:4%;bottom:0;width:44%;height:24%;transform-style:preserve-3d;transform:translateZ(30px);pointer-events:none}
.plinth::before{content:"";position:absolute;left:4%;right:4%;bottom:6%;height:34%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 35%,var(--card) 0%,#F4F0E8 55%,#E9E2D5 100%);box-shadow:0 1px 0 rgba(250,247,240,.9) inset,0 18px 30px -14px hsl(var(--sh)/.35),0 2px 6px hsl(var(--sh)/.12)}
.stage .mark,.shero .stage .mark{position:absolute;left:50%;right:auto;top:auto;bottom:30%;width:200px;height:96px;margin-left:-100px;transform:translateZ(40px) rotateY(var(--scr,0deg))}
.mark__rot{transform:rotateX(calc(8deg + var(--mrx,0deg))) rotateY(calc(-16deg + var(--mry,0deg)));animation:sway2 10s var(--e-inout) infinite alternate}
.mark__l--shine{animation-duration:10s}
.mark__shadow{animation:shadow2 10s var(--e-inout) infinite alternate;bottom:-22px;height:20px;left:14%;right:14%}
@keyframes sway2{from{transform:rotateX(9deg) rotateY(-24deg)}to{transform:rotateX(5deg) rotateY(12deg)}}
@keyframes shadow2{from{transform:translateZ(-30px) rotateX(82deg) scaleX(.94)}to{transform:translateZ(-30px) rotateX(82deg) scaleX(1.02)}}
.stage.is-pointer .mark__rot{animation:none;transform:rotateX(calc(8deg + var(--mrx,0deg))) rotateY(calc(-8deg + var(--mry,0deg)))}
.stage .mark{transition:transform var(--d-4) var(--e-out)}
.is-paused .mark__rot,.is-paused .mark__l--shine,.is-paused .mark__shadow,
.stage.is-offscreen .mark__rot,.stage.is-offscreen .mark__l--shine,.stage.is-offscreen .mark__shadow{animation-play-state:paused}
.plinth__cap{position:absolute;left:50%;bottom:0;transform:translateX(-50%);white-space:nowrap;font:600 11.5px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.shero .stage .layer--front .layer__cap{max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:980px){
  .stage .layer--main{left:0;width:64%;height:68%}
  .stage .mark,.shero .stage .mark{width:150px;height:72px;margin-left:-75px}
}
@media (max-width:600px){
  .stage .layer--back,.shero .stage .layer--back{display:none}
  .stage .layer--main,.shero .stage .layer--main{left:0;top:0;width:70%;height:70%;transform:rotateY(-5deg)}
  .stage .layer--front,.shero .stage .layer--front{width:48%;height:46%;right:0;bottom:4%;border-width:4px}
  .plinth{left:0;width:48%;height:28%}
  .stage .mark,.shero .stage .mark{width:124px;height:60px;margin-left:-62px;bottom:32%}
  .stage__pause{top:0;bottom:auto;right:0;left:auto}
  .plinth__cap{font-size:10px;letter-spacing:.1em}
}
/* reduced motion: a deliberate, centred 3/4 resting pose (never mid-animation) */
@media (prefers-reduced-motion: reduce){
  .mark__rot{animation:none!important;transform:rotateX(8deg) rotateY(-16deg)!important}
  .mark__shadow{animation:none!important;transform:translateZ(-30px) rotateX(82deg)!important}
  .stage .mark{transform:translateZ(40px)!important}
}

/* ================= MOBILE STICKY BAR v3: safe area + appears on scroll ================= */
@media (max-width:980px){
  .mbar{bottom:calc(10px + env(safe-area-inset-bottom));left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));
    transition:transform var(--d-3) var(--e-out),opacity var(--d-2) linear}
  .mbar-managed .mbar:not(.is-shown){transform:translateY(calc(100% + 24px + env(safe-area-inset-bottom)));opacity:0;pointer-events:none}
  .mbar-managed .mbar:not(.is-shown) a{visibility:hidden}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .shot-full .mbar,.shot-bar .mbar{transform:none!important;opacity:1!important;pointer-events:auto}
  .shot-full .mbar a,.shot-bar .mbar a{visibility:visible!important}
}
.sheet-open body{overflow:hidden}

/* ================= fallback page transition (browsers without cross-document View Transitions) ================= */
@media (prefers-reduced-motion: no-preference){
  html:not(.vt-native).is-leaving main{opacity:0;transform:scale(.985);transition:opacity 160ms linear,transform 160ms var(--e-out)}
  html:not(.vt-native) main{animation:page-in 260ms var(--e-out) both}
  @keyframes page-in{from{opacity:0;transform:translateY(8px)}}
  html.vt-native main{animation:none}
  ::view-transition-group(*){animation-duration:380ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}
}

.shot-rest .mark__rot,.shot-rest .mark__shadow,.shot-rest .mark__l--shine{animation:none!important}
.proto-toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));z-index:90;transform:translate(-50%,-140%);max-width:min(560px,calc(100% - 28px));background:var(--ink);color:var(--paper);font:500 14.5px/1.4 var(--f-body);padding:12px 18px;border-radius:16px;box-shadow:var(--e5);transition:transform var(--d-3) var(--e-out)}
.proto-toast.is-on{transform:translate(-50%,0)}
/* map facade (no third-party request until asked) */
.map__art{position:absolute;inset:0;background:
  linear-gradient(90deg,transparent 0 47%,var(--card) 47% 49.5%,transparent 49.5%) ,
  linear-gradient(0deg,transparent 0 58%,var(--card) 58% 60.5%,transparent 60.5%),
  linear-gradient(28deg,transparent 0 30%,rgba(250,247,240,.85) 30% 31.6%,transparent 31.6%),
  repeating-linear-gradient(90deg,transparent 0 78px,rgba(250,247,240,.55) 78px 81px),
  repeating-linear-gradient(0deg,transparent 0 64px,rgba(250,247,240,.55) 64px 67px),
  radial-gradient(circle at 78% 22%,#dfe6d6 0 70px,transparent 71px),
  #ECE5D9}
.map__pin{position:absolute;left:48.2%;top:59.2%;width:34px;height:34px;margin:-34px 0 0 -17px;background:var(--ink);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 10px 20px -6px rgba(0,0,0,.45)}
.map__pin::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--paper)}
.map__load{position:absolute;right:18px;top:18px;z-index:2;background:rgba(250,247,240,.94);backdrop-filter:blur(8px);border-radius:20px;padding:14px;box-shadow:var(--e3);display:grid;gap:8px;max-width:270px}
.map__load small{font-size:13px;color:var(--muted);line-height:1.4}
.map.is-loaded .map__art{display:none}
@media (max-width:600px){.map__load{left:12px;right:12px;top:12px;max-width:none}}

/* 44px targets for logo + footer links */
.hdr__logo{display:inline-flex;align-items:center;min-height:44px}
.ftr a{min-height:44px;display:flex;align-items:center}
/* hero v3 polish: compact shadows inside the 3D rig (large offset shadows get clipped by compositor layers), caption fits */
.stage .layer--front{box-shadow:0 2px 4px hsl(var(--sh)/.10),0 14px 28px -8px hsl(var(--sh)/.32),0 30px 50px -24px hsl(var(--sh)/.35);width:38%;right:3%}
.stage .layer--back{box-shadow:0 2px 4px hsl(var(--sh)/.08),0 16px 32px -12px hsl(var(--sh)/.28)}
.layer__cap{max-width:calc(100% - 28px);white-space:normal;line-height:1.25}
.stage .mark__rot{transform:rotateX(calc(10deg + var(--mrx,0deg))) rotateY(calc(-24deg + var(--mry,0deg)))}
@keyframes sway2{from{transform:rotateX(11deg) rotateY(-30deg)}to{transform:rotateX(6deg) rotateY(8deg)}}
.plinth::before{left:0;right:0;bottom:4%;height:40%;background:radial-gradient(ellipse at 50% 30%,var(--card) 0%,#F6F2EA 50%,#E6DED0 100%);
  box-shadow:inset 0 1px 0 var(--card),inset 0 -6px 10px rgba(33,30,26,.06),0 22px 34px -16px hsl(var(--sh)/.4),0 3px 8px hsl(var(--sh)/.12)}
@media (prefers-reduced-motion: reduce){ .mark__rot{transform:rotateX(10deg) rotateY(-24deg)!important} }
.mark__l{background:#1e1b17}
.mark__l--face{background:linear-gradient(135deg,#5e574f 0%,#37322c 42%,#211e1a 70%,#211e1a 100%);box-shadow:none}
@media (max-width:600px){.layer__cap{font-size:11.5px;padding:7px 10px;left:10px;bottom:10px;max-width:calc(100% - 20px)}}
/* mix-blend-mode on the shine flattened the 3D extrusion in Chromium: use a plain translucent sheen instead */
.mark__l--shine{mix-blend-mode:normal;background:linear-gradient(105deg,rgba(250,247,240,0) 32%,rgba(250,247,240,.22) 45%,rgba(250,247,240,0) 58%) 0 0/300% 100%}
.mark__l--face{background:linear-gradient(135deg,#4b453e 0%,#2e2a25 40%,#211e1a 70%,#1f1c18 100%)}
.mark__l{background:#12100d}
/* team fan v3: every name readable */
@media (min-width:981px){
  .fan__c{width:190px;z-index:calc(1 + var(--k))!important;
    transform:translate(-50%,-50%) translateY(var(--fl,0px)) translateX(calc((var(--k) - 1.5) * 172px)) translateY(calc((var(--k) - 1.5) * (var(--k) - 1.5) * 12px)) rotate(calc((var(--k) - 1.5) * 4deg))}
  .fan__c picture,.fan__c img{height:230px}
}
@media (min-width:981px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .fan:hover .fan__c{transform:translate(-50%,-50%) translateY(var(--fl,0px)) translateX(calc((var(--k) - 1.5) * 186px)) translateY(calc((var(--k) - 1.5) * (var(--k) - 1.5) * 8px)) rotate(calc((var(--k) - 1.5) * 2deg))}
  .fan .fan__c:hover{--fl:-12px;z-index:20!important}
}
/* v3 fixes: compact story shadows (large offsets banded on mobile); footer long handles wrap */
.story__a{box-shadow:0 2px 4px hsl(var(--sh)/.08),0 14px 30px -8px hsl(var(--sh)/.26)}
.story__b{box-shadow:0 2px 4px hsl(var(--sh)/.1),0 12px 24px -6px hsl(var(--sh)/.3)}
.ftr__g{grid-template-columns:1.3fr repeat(3,minmax(0,1fr))}
.ftr__g>*{min-width:0}
.ftr a{flex-wrap:wrap;overflow-wrap:anywhere;column-gap:6px}
@media (max-width:980px){.ftr__g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:981px){.fan__c figcaption{padding-right:22px}.fan__c small{display:block;font-size:12.5px;line-height:1.3}}

/* =====================================================================
   v4 — live-site palette, frosted-glass chrome, hero directions A / B / AB, team page
   ===================================================================== */
:root{--hdr:84px}
@media (max-width:980px){:root{--hdr:68px}}
.h-display .l2,.h1 .l2,.h2 .l2{color:var(--ink-2)}
.ext{font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--muted);margin-left:6px;text-decoration:none;white-space:nowrap}
.ext--inv,.ftr .ext,.dark .ext{color:var(--muted-inv)}
.trust li{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(250,247,240,.78)}

/* ---- frosted glass header. Live site: mobile bar rgba(244,240,232,.9) + blur(12px); desktop nav pill rgba(255,255,255,.78) + blur(14px) + 1px rgba(33,30,26,.13).
        v4: warm cream tint, blur + saturate, hairline light top / dark bottom edge, soft shadow, more solid once scrolled ---- */
.hdr{background:rgba(244,240,232,.72);-webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);border-bottom:0;
  box-shadow:inset 0 1px 0 rgba(255,253,248,.55),inset 0 -1px 0 rgba(33,30,26,.09);transition:background-color var(--d-3) linear,box-shadow var(--d-3) linear}
.hdr.is-scrolled{background:rgba(244,240,232,.88);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,253,248,.6),inset 0 -1px 0 rgba(33,30,26,.12),0 10px 30px -18px rgba(33,30,26,.38)}
.hdr__in{height:var(--hdr)}
.nav > a:hover,.nav > div > button:hover,.nav .is-open > button,.nav [aria-current]{background:rgba(33,30,26,.07)}
.dd__panel{background:rgba(250,247,240,.95)}
@media (max-width:1240px) and (min-width:981px){.hdr__tel{display:none}.nav > a,.nav > div > button{padding:0 10px;font-size:15px}}
@media (max-width:980px){
  .burger{background:rgba(250,247,240,.62);box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(33,30,26,.06)}
  .mbar{background:rgba(28,26,22,.8);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
    box-shadow:0 18px 40px -12px rgba(28,26,22,.55),inset 0 1px 0 rgba(244,240,232,.12),inset 0 0 0 1px rgba(244,240,232,.07)}
  .mbar__call{background:rgba(244,240,232,.1)}
}
.sheet{background:rgba(28,26,22,.38);-webkit-backdrop-filter:none;backdrop-filter:none}
.sheet__panel{background:rgba(244,240,232,.9);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);box-shadow:inset 1px 0 0 rgba(255,253,248,.5),var(--e5)}
@media (prefers-reduced-motion: reduce){.hdr{transition:none}}
/* solid fallbacks: no backdrop-filter support, or the user asked for reduced transparency (.rt-solid = same, for screenshots) */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hdr,.hdr.is-scrolled,.sheet__panel,.cswitch{background:var(--paper)} .mbar{background:var(--char)} .dd__panel{background:var(--card)}
}
@media (prefers-reduced-transparency: reduce){
  .hdr,.hdr.is-scrolled,.sheet__panel,.mbar,.cswitch,.dd__panel,.ibtn,.card__chip,.layer__cap,.map__load,.hsq__cap{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .hdr,.hdr.is-scrolled,.sheet__panel,.cswitch{background:var(--paper)} .mbar{background:var(--char)} .dd__panel,.ibtn,.hsq__cap{background:var(--card)} .card__chip{background:var(--paper)}
}
.rt-solid .hdr,.rt-solid .hdr.is-scrolled,.rt-solid .sheet__panel,.rt-solid .mbar,.rt-solid .cswitch,.rt-solid .dd__panel,.rt-solid .ibtn,.rt-solid .card__chip,.rt-solid .hsq__cap{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.rt-solid .hdr,.rt-solid .hdr.is-scrolled,.rt-solid .sheet__panel,.rt-solid .cswitch{background:var(--paper)} .rt-solid .mbar{background:var(--char)} .rt-solid .dd__panel,.rt-solid .ibtn,.rt-solid .hsq__cap{background:var(--card)}

/* ---- concept switcher (home only): top-right under the header, clear of the sticky bar and the home indicator ---- */
.cswitch{position:fixed;z-index:45;top:calc(var(--hdr) + 12px);right:calc(16px + env(safe-area-inset-right));display:flex;align-items:center;padding:5px;border-radius:20px;
  background:rgba(244,240,232,.82);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:inset 0 0 0 1px var(--line),0 12px 30px -14px rgba(33,30,26,.4);font:600 13px/1 var(--f-body);color:var(--ink)}
.cswitch__t{display:none}
.cswitch__l{display:flex;align-items:center;gap:3px}
.cswitch__lab{padding:0 8px 0 10px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:11.5px}
.cswitch__o{min-width:44px;min-height:44px;padding:0 12px;border-radius:15px;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;color:var(--ink);touch-action:manipulation;transition:background-color var(--d-2),transform var(--d-1)}
.cswitch__o small{font-weight:500;font-size:12.5px;color:var(--muted)}
.cswitch__o:hover{background:rgba(33,30,26,.07)}
.cswitch__o[aria-current="true"]{background:var(--ink);color:var(--paper)} .cswitch__o[aria-current="true"] small{color:var(--muted-inv)}
.cswitch__o:active,.cswitch__o.is-pressed{transform:scale(.95)}
.cswitch__o:focus-visible,.cswitch__t:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (max-width:980px){
  .cswitch{right:calc(10px + env(safe-area-inset-right));top:calc(var(--hdr) + 10px + env(safe-area-inset-top));flex-direction:column;align-items:stretch;padding:3px;border-radius:17px}
  .cswitch__t{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;background:none;font:inherit;color:inherit;cursor:pointer;border-radius:14px;touch-action:manipulation}
  .cswitch__k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .cswitch__l{display:none;flex-direction:column;align-items:stretch;padding:3px;gap:2px}
  .cswitch.is-open .cswitch__l{display:flex}
  .cswitch__lab{display:none}
  .cswitch__o{justify-content:flex-start;min-width:176px}
}
.shot-clean .cswitch{display:none}

/* ---- HERO A + AB: full-bleed real photo ---- */
.hfb{--H:clamp(700px,100svh,980px);--ar:1.5877;--vx:.5;--vy:.3;position:relative;margin-top:calc(-1 * var(--hdr));min-height:var(--H);background:var(--char);color:var(--paper);overflow:hidden;isolation:isolate}
.hfb__media{position:absolute;inset:0;overflow:hidden;container-type:size;z-index:-1}
.hfb__box{--bw:max(100cqw,calc(100cqh * var(--ar)));position:absolute;width:var(--bw);height:calc(var(--bw) / var(--ar));left:calc((100cqw - var(--bw)) * var(--vx));top:calc((100cqh - var(--bw) / var(--ar)) * var(--vy));transform-origin:40% 45%;scale:1.04;will-change:scale,translate}
.hfb__box picture,.hfb__box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hfb--ab .hfb__box > picture img{filter:brightness(.5) saturate(.7) contrast(1.05)}
.hfb__scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(28,26,22,0) 30%,rgba(28,26,22,.58) 50%,rgba(28,26,22,.8) 68%,rgba(28,26,22,.86) 100%),
  linear-gradient(0deg,rgba(28,26,22,.94) 0,rgba(28,26,22,.6) 13%,rgba(28,26,22,0) 30%),
  linear-gradient(180deg,rgba(28,26,22,.28) 0,rgba(28,26,22,0) 20%)}
.hfb--ab .hfb__scrim{background:
  linear-gradient(90deg,rgba(28,26,22,0) 40%,rgba(28,26,22,.45) 55%,rgba(28,26,22,.7) 70%,rgba(28,26,22,.8) 100%),
  linear-gradient(0deg,rgba(28,26,22,.94) 0,rgba(28,26,22,.55) 13%,rgba(28,26,22,0) 30%)}
.hfb__in{min-height:var(--H);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);align-items:center;padding-top:calc(var(--hdr) + 24px);padding-bottom:150px}
.hfb__copy{grid-column:2}
.hfb .eyebrow{color:#e4ddd1;margin-bottom:26px} .hfb .eyebrow .n{color:var(--paper)}
.hfb__badge{width:38px;height:auto;flex:none}
.hfb .h-display{font-size:clamp(52px,5.4vw,84px);color:var(--paper)}
.hfb .h-display .l2{color:#ebe5da}
.hfb .lede{color:#ebe5da;margin-top:24px}
.hfb .tlink{color:var(--paper)}
.hfb .tlink:hover,.hfb .tlink:focus-visible{text-decoration-color:rgba(244,240,232,.5)}
.hfb :focus-visible,.hfb .btn:focus-visible{outline-color:var(--paper)}
.hfb__bar{position:absolute;left:0;right:0;bottom:0;padding-bottom:28px}
.hfb__bar-in{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-right:calc(max(var(--pad), (100% - var(--wrap)) / 2 + var(--pad)) + 172px)}
.hfb .trust{margin:0;max-width:720px}
.trust--dark li{background:rgba(28,26,22,.42);box-shadow:inset 0 0 0 1px rgba(244,240,232,.2);color:#e4ddd1}
.trust--dark b{color:var(--paper)}
.hfb__cap{font:600 12px/1.2 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:#e4ddd1;display:flex;align-items:center;gap:10px;padding-bottom:14px;white-space:nowrap}
.hfb__cap::before{content:"";width:7px;height:7px;border-radius:50%;background:#e4ddd1;box-shadow:0 0 0 4px rgba(244,240,232,.16)}
.hfb > .stage__pause{top:auto;bottom:28px;right:max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad)));left:auto}
.js-motion .hfb__box{animation:hfbIn 1.8s var(--e-out) both,hfbBreath 18s 1.8s var(--e-inout) infinite alternate}
.js-motion .hfb__copy > *{animation:hfbUp .9s var(--e-out) both}
.js-motion .hfb__copy > :nth-child(2){animation-delay:.08s} .js-motion .hfb__copy > :nth-child(3){animation-delay:.16s} .js-motion .hfb__copy > :nth-child(4){animation-delay:.24s}
.js-motion .hfb__bar{animation:hfbUp .9s .32s var(--e-out) both}
@keyframes hfbIn{from{scale:1.14}to{scale:1.04}}
@keyframes hfbBreath{from{scale:1.04}to{scale:1.1}}
@keyframes hfbUp{from{opacity:0;translate:0 22px}to{opacity:1;translate:none}}
.is-paused .hfb__box{animation:none}
.hfb.is-offscreen .hfb__box{animation-play-state:paused}
@media (max-width:980px){
  .hfb{--H:auto;--ar:.6668;--vy:.2;min-height:0;display:flex;flex-direction:column}
  .hfb__media{position:relative;inset:auto;height:min(78svh,680px);z-index:0}
  .hfb__scrim,.hfb--ab .hfb__scrim{background:linear-gradient(180deg,rgba(28,26,22,.22) 0,rgba(28,26,22,0) 15%,rgba(28,26,22,0) 44%,rgba(28,26,22,.72) 68%,rgba(28,26,22,.96) 90%,var(--char) 100%)}
  .hfb__in{min-height:0;display:block;margin-top:calc(-1 * min(35svh,300px));position:relative;z-index:1;padding-top:0;padding-bottom:0}
  .hfb .eyebrow{margin-bottom:16px;gap:10px;font-size:12px}
  .hfb__badge{width:30px}
  .hfb .h-display{font-size:clamp(44px,12.4vw,62px)}
  .hfb .lede{margin-top:16px;font-size:17px}
  .hfb__bar{position:relative;padding:26px 0 40px}
  .hfb__bar-in{display:block;padding-right:var(--pad)}
  .hfb .trust{grid-template-columns:1fr 1fr;margin:0}
  .hfb__cap{display:none}
  .hfb > .stage__pause{top:calc(var(--hdr) + 10px + env(safe-area-inset-top));bottom:auto;left:calc(10px + env(safe-area-inset-left));right:auto}
}

/* ---- HERO B: the mark as the frame (circle + square photos, interlocked like the logo) ---- */
.hsq{position:relative;background:radial-gradient(900px 620px at 78% 42%,rgba(250,247,240,.95),rgba(250,247,240,0) 64%),linear-gradient(180deg,var(--warm) 0%,var(--paper) 100%)}
.hsq__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:48px;align-items:center;min-height:min(calc(100svh - var(--hdr)),820px);padding-top:36px;padding-bottom:60px}
.hsq__badge{width:38px;height:auto;flex:none}
.hsq__art{--ppx:0;--ppy:0;--hp:0;position:relative;aspect-ratio:1/1;width:100%;max-width:600px;justify-self:end}
.hsq__c,.hsq__s{position:absolute;margin:0}
.hsq__c{width:64%;aspect-ratio:1;left:0;top:2%;border-radius:50%;z-index:1;transform:translate3d(calc(var(--ppx) * 18px),calc(var(--hp) * -26px + var(--ppy) * 12px),0);transition:transform var(--d-5) var(--e-out)}
.hsq__s{width:54%;aspect-ratio:1;right:0;bottom:2%;border-radius:12%;z-index:2;transform:translate3d(calc(var(--ppx) * -16px),calc(var(--hp) * 30px + var(--ppy) * -10px),0);transition:transform var(--d-5) var(--e-out)}
.hsq__c::before,.hsq__s::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 2px 4px hsl(var(--sh)/.1),0 22px 44px -14px hsl(var(--sh)/.34)}
.hsq__s::before{box-shadow:0 0 0 10px var(--paper),0 2px 4px hsl(var(--sh)/.1),0 26px 50px -16px hsl(var(--sh)/.4)}
.hsq__m{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:var(--sand)}
.hsq__m picture,.hsq__m img{width:100%;height:100%;object-fit:cover;display:block}
.hsq__m .ph{width:100%;height:100%}
.hsq__m .ph span{font-size:11px;max-width:62%}
.hsq__cap{position:absolute;left:3%;bottom:4%;z-index:3;background:rgba(244,240,232,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--r-pill);padding:9px 14px;font:600 12.5px/1 var(--f-body);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),var(--e2)}
.hsq__art > .stage__pause{top:2%;right:0;bottom:auto;left:auto;z-index:4}
.js-motion .hsq__c .hsq__m{animation:cIn 1.2s .1s var(--e-out) backwards}
.js-motion .hsq__s .hsq__m{animation:sIn 1.2s .3s var(--e-out) backwards}
.js-motion .hsq__m img{animation:imgIn 1.8s .1s var(--e-out) backwards}
.js-motion .hsq__c::before,.js-motion .hsq__s::before{animation:fadeIn .7s 1s linear backwards}
.js-motion .hsq__cap{animation:hfbUp .8s 1.1s var(--e-out) backwards}
.js-motion .hsq__c{animation:floatA 11s 1.6s var(--e-inout) infinite alternate}
.js-motion .hsq__s{animation:floatB 11s 1.6s var(--e-inout) infinite alternate}
@keyframes cIn{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(50% at 50% 50%)}}
@keyframes sIn{from{clip-path:inset(50% 50% 50% 50% round 12%)}to{clip-path:inset(0 0 0 0 round 12%)}}
@keyframes imgIn{from{scale:1.2}to{scale:1}}
@keyframes fadeIn{from{opacity:0}}
@keyframes floatA{from{translate:0 0}to{translate:0 -10px}}
@keyframes floatB{from{translate:0 0}to{translate:0 10px}}
.is-paused .hsq__c,.is-paused .hsq__s,.is-paused .hsq__m,.is-paused .hsq__m img,.is-paused .hsq__c::before,.is-paused .hsq__s::before,.is-paused .hsq__cap{animation:none}
.is-offscreen .hsq__c,.is-offscreen .hsq__s{animation-play-state:paused}
.hsq--studio{position:relative;width:100%}
.hsq--studio .hsq__art{max-width:560px;margin-left:auto}
@media (max-width:980px){
  .hsq__grid{grid-template-columns:1fr;min-height:0;padding-top:16px;padding-bottom:40px;gap:22px}
  .hsq__art{order:-1;aspect-ratio:1.42;max-width:440px;justify-self:center}
  .hsq__c{width:56%;top:0}
  .hsq__s{width:46%;bottom:0}
  .hsq__s::before{box-shadow:0 0 0 7px var(--paper),0 18px 36px -14px hsl(var(--sh)/.4)}
  .hsq__cap{display:none}
  .hsq__art > .stage__pause{top:auto;bottom:0;left:0;right:auto}
  .hsq--studio .hsq__art{order:0;margin:8px auto 0}
}

/* ---- home team teaser: every face is a link to that person's bio ---- */
a.fan__c{display:block;text-decoration:none;color:var(--ink);touch-action:manipulation}
.fan__cap{display:block;padding:12px 8px 0}
.fan__cap b{display:block;font:600 18px/1.15 var(--f-disp)}
.fan__cap small{display:block;font-size:12.5px;line-height:1.3;color:var(--muted)}
@media (min-width:981px){.fan__cap{padding-right:22px}}
a.fan__c:focus-visible{outline:3px solid var(--ink);outline-offset:4px}

/* ---- team page ---- */
.tpage{padding-bottom:30px}
.tpage__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:end;margin-top:26px}
.tpage__note{margin-top:28px;padding:14px 18px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;line-height:1.5;color:var(--ink-2);max-width:920px}
.tfilter{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tfilter__b{min-height:48px;min-width:48px;padding:0 22px;border-radius:999px;border:0;background:var(--card);color:var(--ink);font:600 15.5px/1 var(--f-body);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;touch-action:manipulation;transition:background-color var(--d-2),color var(--d-2),box-shadow var(--d-2),transform var(--d-1) var(--e-press)}
.tfilter__b[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
.tfilter__b:active,.tfilter__b.is-pressed{transform:scale(.96)}
.tfilter__count{margin-left:auto;font-size:15px;color:var(--muted)}
.pgrid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-top:24px}
.pgrid--studio{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:0}
.pcard[hidden]{display:none}
.pcard__a{display:flex;flex-direction:column;height:100%;background:var(--card);border-radius:var(--r-lg);padding:8px;text-decoration:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),var(--e2);position:relative;touch-action:manipulation;transition:transform var(--d-3) var(--e-out),box-shadow var(--d-3) var(--e-out)}
.pcard__ph{display:block;aspect-ratio:4/5;border-radius:calc(var(--r-lg) - 6px);overflow:hidden;background:var(--sand)}
.pcard__ph img,.pcard__ph picture{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--d-5) var(--e-out)}
.pcard__m{display:flex;flex-direction:column;gap:4px;padding:14px 12px 12px;flex:1 1 auto}
.pcard__n{font:600 21px/1.15 var(--f-disp);letter-spacing:-.015em}
.pcard__r{font-size:14.5px;color:var(--muted);line-height:1.35}
.pcard__s{margin-top:auto;padding-top:8px;padding-right:46px;font-size:13.5px;font-weight:600;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pcard__s i{width:7px;height:7px;border-radius:50%;background:var(--ink-2)}
.pcard__go{position:absolute;right:14px;bottom:14px;width:40px;height:40px;border-radius:50%;background:var(--sand);color:var(--ink);display:grid;place-items:center;transition:transform var(--d-3) var(--e-spring),background-color var(--d-2),color var(--d-2)}
.pcard__go svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){
  .pcard__a:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--line),var(--e4)}
  .pcard__a:hover .pcard__ph img{transform:scale(1.04)}
  .pcard__a:hover .pcard__go{background:var(--ink);color:var(--paper);transform:rotate(-8deg)}
}
.pcard__a:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.pcard__a.is-pressed{transform:translateY(-4px) scale(.985);box-shadow:inset 0 0 0 1px var(--line),var(--e4);transition-duration:var(--d-1)}
.js-motion .pcard.is-entering{animation:pcIn .5s var(--e-out) both;animation-delay:calc(var(--n,0) * 40ms)}
@keyframes pcIn{from{opacity:0;translate:0 14px}}
.pinit{width:100%;height:100%;display:grid;place-content:center;justify-items:center;gap:8px;background:linear-gradient(145deg,var(--sand),color-mix(in srgb,var(--sand) 95%,var(--ink)));color:var(--ink-2)}
.pinit span{font:600 44px/1 var(--f-disp);letter-spacing:-.03em}
.pinit small{font-size:12.5px;color:var(--ink-2);opacity:.78}
/* the dialog uses a box 2.4x the card's; without this the initials stayed at
   44px and sat marooned in the middle of a large empty sand panel */
.pinit--lg{gap:14px}
.pinit--lg span{font-size:92px;letter-spacing:-.04em}
.pinit--lg small{font-size:15px}
@media(max-width:980px){.pinit--lg span{font-size:68px}.pinit--lg small{font-size:14px}}
.tpage__foot{margin-top:22px}
.team__foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:22px}
@media (max-width:980px){
  .tpage__head{grid-template-columns:1fr;gap:16px}
  .pgrid,.pgrid--studio{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pcard__m{padding:12px 8px 10px}
  .pcard__n{font-size:17px}
  .pcard__r{font-size:13px}
  .pcard__go{display:none}
  .tfilter__b{flex:1;padding:0 12px}
  .tfilter__count{width:100%;margin:6px 0 0}
}
/* bio dialog: centred panel on desktop, bottom sheet on phones */
.bio{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;inset:0;margin:0;color:var(--ink);overflow:hidden}
.bio:not([open]){display:none}
.bio[open]{display:flex;align-items:center;justify-content:center}
.bio::backdrop{background:rgba(28,26,22,.52)}
.bio__panel{position:relative;width:min(980px,calc(100% - 48px));max-height:min(88svh,780px);overflow:auto;overscroll-behavior:contain;background:var(--card);border-radius:var(--r-xl);box-shadow:var(--e5)}
.bio__in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.bio__ph{aspect-ratio:4/5;overflow:hidden;border-radius:calc(var(--r-xl) - 8px);margin:10px;background:var(--sand)}
.bio__ph img,.bio__ph picture{width:100%;height:100%;object-fit:cover;display:block}
.bio__body{padding:40px 40px 34px 22px}
.bio__n{margin-top:14px;font-size:clamp(34px,3.6vw,52px)}
.bio__r{font:500 19px/1.3 var(--f-disp);color:var(--muted);margin-top:8px}
.bio__txt{margin-top:20px;display:grid;gap:14px;font-size:16.5px;line-height:1.65;color:var(--ink-2)}
.bio__note{margin-top:18px;font-size:14px;color:var(--muted);line-height:1.5}
.bio__cta{margin-top:22px}
.bio__why{margin-top:10px}
.bio__x{position:absolute;top:14px;right:14px;z-index:2;width:48px;height:48px;border-radius:50%;border:0;background:rgba(244,240,232,.94);box-shadow:inset 0 0 0 1px var(--line),var(--e2);display:grid;place-items:center;color:var(--ink);cursor:pointer;touch-action:manipulation}
.bio__x:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.bio__x:active,.bio__x.is-pressed{transform:scale(.94)}
.js-motion .bio[open] .bio__panel{animation:bioIn .42s var(--e-out) both}
.js-motion .bio[open]::backdrop{animation:fadeIn .3s linear both}
@keyframes bioIn{from{opacity:0;transform:translateY(18px) scale(.98)}}
html.bio-open,html.bio-open body{overflow:hidden}
@media (max-width:980px){
  .bio[open]{align-items:flex-end}
  .bio__panel{width:100%;max-height:92svh;border-radius:26px 26px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .bio__in{grid-template-columns:1fr}
  .bio__ph{aspect-ratio:1.3;margin:8px 8px 0}
  .bio__body{padding:22px 20px 30px}
  .bio__n{font-size:36px}
  .js-motion .bio[open] .bio__panel{animation:bioUp .45s var(--e-out) both}
  @keyframes bioUp{from{transform:translateY(60px);opacity:.4}}
}
/* screenshot helper: freeze idle loops at their resting state (used only by the mockup renderer) */
.shot-still .hfb__box,.shot-still .hsq__c,.shot-still .hsq__s{animation:none!important}
/* AB (the default home hero): full-bleed photo + the words in a frosted dark square panel */
@media (min-width:981px){.hfb--ab .hfb__scrim{background:linear-gradient(90deg,rgba(28,26,22,0) 45%,rgba(28,26,22,.3) 70%,rgba(28,26,22,.45) 100%),linear-gradient(0deg,rgba(28,26,22,.94) 0,rgba(28,26,22,.55) 13%,rgba(28,26,22,0) 30%)}}
.hfb--ab .hfb__copy{aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center;padding:44px 44px 40px;border-radius:40px;
  background:rgba(28,26,22,.58);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);box-shadow:inset 0 0 0 1.5px rgba(244,240,232,.42),0 30px 70px -30px rgba(0,0,0,.6)}
.hfb--ab .hfb__in{grid-template-columns:minmax(0,1fr) minmax(0,590px)}
.hfb--ab .h-display{font-size:clamp(50px,4.9vw,76px)}
.hfb--ab .eyebrow{margin-bottom:22px}
.js-motion .hfb--ab .hfb__copy{animation:panelIn 1.1s .35s var(--e-out) backwards}
.js-motion .hfb--ab .hfb__copy > *{animation-delay:.6s}
@keyframes panelIn{from{opacity:0;scale:.96;translate:0 16px}}
.is-paused .hfb--ab .hfb__copy,.is-paused .hfb__copy > *,.is-paused .hfb__bar{animation:none}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.hfb--ab .hfb__copy{background:rgba(28,26,22,.86)}}
@media (prefers-reduced-transparency: reduce){.hfb--ab .hfb__copy{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(28,26,22,.9)}}
.rt-solid .hfb--ab .hfb__copy{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(28,26,22,.9)}
@media (max-width:980px){
  .hfb--ab .hfb__copy{aspect-ratio:auto;padding:26px 22px 24px;border-radius:30px;margin:0 -6px}
  .hfb--ab .hfb__in{margin-top:calc(-1 * min(30svh,250px))}
  .hsq:not(.hsq--studio) .hsq__art > .stage__pause{padding:0;width:44px;justify-content:center}
  .hsq:not(.hsq--studio) .hsq__art > .stage__pause span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media (min-width:981px){.hfb__in{padding-top:calc(var(--hdr) + 76px)}}
@media (max-width:980px){.hfb--ab .hfb__media{height:min(62svh,540px)}.hfb--ab .hfb__in{margin-top:calc(-1 * min(16svh,130px))}.hfb--ab .hfb__copy .eyebrow{margin-bottom:14px}}
@media (max-width:980px){.hfb--ab .hfb__media{height:min(54svh,470px)}.hfb--ab .hfb__in{margin-top:calc(-1 * min(17svh,140px))}.hfb--ab .hfb__copy{padding:22px 20px 22px}.hfb--ab .lede{font-size:16px;margin-top:12px}.hfb--ab .hero__cta{margin-top:20px}}
@media (max-width:980px){.hfb > .stage__pause{padding:0;width:44px;justify-content:center}.hfb > .stage__pause span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* header: logo never shrinks; tel drops first, then the nav folds into the Menu sheet (live site folds at 1199px) */
.hdr__logo{flex:none}
@media (max-width:1400px) and (min-width:981px){.hdr__tel{display:none}.nav > a,.nav > div > button{padding:0 10px;font-size:15px}}
@media (max-width:1199px) and (min-width:981px){
  .nav{display:none}
  .burger{display:inline-flex;min-width:48px;min-height:48px;border-radius:14px;border:0;background:rgba(250,247,240,.62);box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(33,30,26,.06);align-items:center;justify-content:center;gap:8px;padding:0 14px;font:600 15px/1 var(--f-body);color:var(--ink)}
}
/* fan: tighter spread between 981 and 1240px so the outer faces stay inside the viewport */
@media (min-width:981px) and (max-width:1320px){
  .fan__c{width:164px;transform:translate(-50%,-50%) translateY(var(--fl,0px)) translateX(calc((var(--k) - 1.5) * 116px)) translateY(calc((var(--k) - 1.5) * (var(--k) - 1.5) * 12px)) rotate(calc((var(--k) - 1.5) * 4deg))}
  .fan__c picture,.fan__c img{height:200px}
}
@media (min-width:981px) and (max-width:1320px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .fan:hover .fan__c{transform:translate(-50%,-50%) translateY(var(--fl,0px)) translateX(calc((var(--k) - 1.5) * 124px)) rotate(calc((var(--k) - 1.5) * 2deg))}
}
.pcard__sl{display:inline-flex;align-items:baseline;gap:6px}.pcard__sl i{flex:none;align-self:center}
@media (max-width:980px){.hsq--studio .hsq__art > .stage__pause{padding:0;width:44px;justify-content:center}.hsq--studio .hsq__art > .stage__pause span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* contrast: glass surfaces carrying small secondary text are opaque enough to pass AA even over pure black */
.cswitch{background:rgba(244,240,232,.9)} .cswitch__lab,.cswitch__k,.cswitch__o small{color:var(--ink-2)}
.sheet__panel{background:rgba(244,240,232,.95)}
/* contrast (pixel-checked): mid-width A needs a deeper right-hand scrim (the coach's white shirt sits under the copy column) */
@media (min-width:981px) and (max-width:1300px){
  .hfb--a .hfb__scrim{background:linear-gradient(90deg,rgba(28,26,22,0) 12%,rgba(28,26,22,.62) 34%,rgba(28,26,22,.86) 48%,rgba(28,26,22,.9) 100%),linear-gradient(0deg,rgba(28,26,22,.94) 0,rgba(28,26,22,.6) 13%,rgba(28,26,22,0) 30%)}
  .hsq__cap{font-size:11.5px;padding:8px 11px;max-width:42%;white-space:normal;line-height:1.25}
}
@media (max-width:980px){
  .hfb--a .hfb__scrim{background:linear-gradient(180deg,rgba(28,26,22,.22) 0,rgba(28,26,22,0) 15%,rgba(28,26,22,0) 38%,rgba(28,26,22,.8) 60%,rgba(28,26,22,.97) 80%,var(--char) 100%)}
}
@media (min-width:981px){
  .hfb__bar-in{padding-right:calc(max(var(--pad), (100% - var(--wrap)) / 2 + var(--pad)) + 190px)}
  .hfb--ab .hfb__in{grid-template-columns:minmax(0,1fr) minmax(0,540px);padding-bottom:140px;padding-top:calc(var(--hdr) + 70px)}
  .hfb--ab .hfb__copy{padding:40px 40px 36px}
  .hfb--ab .h-display{font-size:clamp(48px,4.6vw,70px)}
  .hfb--ab .lede{font-size:17px}
}
.crumbs a{min-width:44px}
/* the concept switcher only matters while a hero is on screen: it steps aside once the hero scrolls away */
.cswitch{transition:opacity var(--d-3) var(--e-out),visibility 0s}
html:has([data-hero-v].is-offscreen) .cswitch:not(:focus-within){opacity:0;visibility:hidden;transition:opacity var(--d-3) var(--e-out),visibility 0s var(--d-3)}
@media (prefers-reduced-motion: reduce){.cswitch{transition:none!important}}
@media (max-width:980px){.hfb--ab > .stage__pause{left:auto;right:calc(10px + env(safe-area-inset-right));top:calc(var(--hdr) + 66px + env(safe-area-inset-top))}}
.hsq--studio{background:none}
/* dropdown: solid card (a text-heavy menu reads better opaque; also one fewer blurred layer) */
.dd__panel{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none}
.shot-clip .cswitch{display:none}
.dd__thumb.ph span{font-size:11.5px;padding:6px 9px;white-space:normal;text-align:center}
/* v5 AB (the one default hero, no lit circle). The photo was dimmed to 50% only so the circle window could glow; with no window it is lifted
   so the moment reads on its own, and the scrims still carry the chips, header and panel edge. */
.hfb--ab .hfb__box > picture img{filter:brightness(.74) saturate(.88) contrast(1.04)}
@media (max-width:980px){
  /* mobile: zoom the portrait 1.2x and frame the celebrating group + cheering coach in the band between header and panel */
  .hfb--ab{--vx:.35;--vy:.2}
  .hfb--ab .hfb__box{--bw:calc(max(100cqw,calc(100cqh * var(--ar))) * 1.2)}
  html:not([data-cswitch-on]) .hfb--ab > .stage__pause{top:calc(var(--hdr) + 12px + env(safe-area-inset-top))}
}
/* Desktop framing without the circle (all measured on the photo: raised hand ends at 40% of its width, the coach spans 42.5-59%, his face 47-51.5%).
   >=1240px: scale/breathe from the RIGHT edge, so the zoom pushes the group left, away from the panel; the coach's face stays clear of the glass. */
@media (min-width:1240px){.hfb--ab .hfb__box{transform-origin:100% 45%}}
/* 981-1239px: the 540px panel would land on the coach's face. Frame the photo so the panel's left edge (--P) falls just left of the coach:
   the celebration stays whole in the open area and the coach sits entirely behind the glass (never half-cut by its edge). */
@media (min-width:981px) and (max-width:1239px){
  .hfb--ab .hfb__box{--P:calc(100cqw - clamp(20px,5cqw,64px) - 540px);
    --bw:max(100cqw,calc(100cqh * var(--ar)),calc((var(--P) + 12px) / .425));
    left:clamp(calc(100cqw - var(--bw)),calc(var(--P) + 12px - var(--bw) * .425),0px);
    top:clamp(calc(100cqh - var(--bw) / var(--ar)),calc(130px - var(--bw) / var(--ar) * .165),0px)}
}
@media (max-width:980px){
  /* mobile AB: the scrim starts lower so the coach's face (the other half of the moment) isn't dimmed; the panel is dark glass anyway */
  .hfb--ab .hfb__scrim{background:linear-gradient(180deg,rgba(28,26,22,.22) 0,rgba(28,26,22,0) 15%,rgba(28,26,22,0) 50%,rgba(28,26,22,.62) 70%,rgba(28,26,22,.96) 90%,var(--char) 100%)}
}
/* fix: the story tag sat at z=0 inside the preserve-3d stage, so the rotated photo (rotateY 4deg) sorted in front of most of it.
   It now lives inside the photo's own plane (.story__a), so it can never be hidden by it. */
.story__a .story__tag{z-index:2;-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--card)}

/* =========================================================
   CIRCLE SQUARE NAV — the live site's floating pill, carried
   over unchanged in character. Namespaced `cs*` so it cannot
   collide with the concept's own `.nav` / `.dd` header rules.
   Alex: "i like ours we have now".
   ========================================================= */
.csnav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  padding:calc(20px + env(safe-area-inset-top,0px)) var(--pad) 20px;transition:padding var(--d-4) var(--e-out)}
.csnav.is-scrolled{padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:14px}
.csnav__logo{display:inline-flex;align-items:center;min-height:44px}
.csnav__logo img{height:32px;width:auto;transition:filter var(--d-3) var(--e-out)}
.csnav.on-dark .csnav__logo img{filter:invert(1) brightness(1.05)}

.cspill{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;
  padding:6px;width:max-content;max-width:calc(100vw - 40px);white-space:nowrap;
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--r-pill)}
/* The links were 32px tall: 14px of text plus 9px of padding. Both Apple's HIG
   and WCAG 2.2 put the minimum target at 44px, so every item in the primary nav
   was 12px under it. Height is where the size goes; the horizontal padding stays
   put because the pill only clears the logo above 1340px and the measure there is
   already tight. Type goes up a step for presence, not for bulk. */
.cspill > a,.cspill__loc{font:500 14.5px/1 var(--f-body);color:#55504a;padding:12px 13px;border-radius:var(--r-pill);
  text-decoration:none;white-space:nowrap;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  transition:color var(--d-2),background-color var(--d-3)}
@media(hover:hover){.cspill > a:hover,.cspill__loc:hover{color:var(--ink)}}
.cspill > a[aria-current="page"]:not(.cspill__refer){background:var(--warm);color:var(--ink)}
.cspill > a.cspill__refer{background:var(--ink);color:var(--paper);font-weight:600;margin-left:4px}
@media(hover:hover){.cspill > a.cspill__refer:hover{color:var(--paper)}}
.cspill__mobile{position:relative}
.csnav-new{position:absolute;top:-9px;right:-4px;background:var(--char);color:var(--paper);
  font:700 9px/1 var(--f-body);letter-spacing:.1em;padding:3px 6px;border-radius:var(--r-pill)}

/* Locations menu, in the pill's own language */
.csloc{position:relative;display:flex}
.cspill__loc[aria-expanded="true"]{background:var(--warm);color:var(--ink)}
.cspill__loc svg{width:10px;height:7px;transition:transform var(--d-3) var(--e-out)}
.cspill__loc[aria-expanded="true"] svg{transform:rotate(180deg)}
.csloc__panel{position:absolute;top:calc(100% + 12px);left:50%;width:336px;padding:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e3);
  opacity:0;transform:translateX(-50%) translateY(-6px);pointer-events:none;
  transition:opacity var(--d-2) linear,transform var(--d-3) var(--e-out)}
.csloc__panel.is-open{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.csloc__row{display:flex;gap:12px;align-items:center;padding:9px;border-radius:var(--r-md);
  text-decoration:none;transition:background-color var(--d-2)}
@media(hover:hover){.csloc__row:hover{background:var(--warm)}}
.csloc__row img{width:60px;height:44px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.csloc__row b{display:block;font:600 16px/1.2 var(--f-disp);letter-spacing:-.015em;color:var(--ink)}
.csloc__row span span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);line-height:1.4}
.csloc__all{display:block;margin-top:4px;padding:11px 9px 7px;font:600 13px/1 var(--f-body);
  color:var(--ink);text-decoration:none}

/* burger + sheet */
.csnav__burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.csnav__burger span{display:block;width:18px;height:2px;background:var(--ink);transition:transform var(--d-3) var(--e-out)}
.csnav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.csnav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.cssheet{position:fixed;inset:0;z-index:99;background:var(--paper);padding:calc(92px + env(safe-area-inset-top,0px)) var(--pad) calc(28px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.cssheet a{font:600 20px/1 var(--f-disp);letter-spacing:-.02em;color:var(--ink);text-decoration:none;
  padding:14px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.cssheet__group{padding:14px 0 4px}
.cssheet__group p{font:600 11.5px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.cssheet__sub{font-size:17px!important;font-weight:500!important}
.cssheet__sub em{font-style:normal;color:var(--muted);font-size:13px;font-family:var(--f-body)}
.cssheet__tel{border-bottom:0!important;color:var(--muted)!important;font-family:var(--f-body)!important;font-size:15px!important}
.cssheet__cta{border-bottom:0!important;justify-content:center;background:var(--ink);color:var(--paper)!important;
  border-radius:var(--r-pill);padding:16px!important;margin-top:10px}

@media(max-width:1340px){.cspill{display:none}.csnav__burger{display:flex}}
@media(min-width:1341px){.cssheet{display:none!important}}
/* Pages that are not the full-bleed home need clearance under the floating nav.
   Padding the <main> drew a strip of page background above the first section, so
   the nav sat on a different colour to the band beneath it. Alex rejected that.
   The first section now supplies its own top padding, so its background runs
   continuously under the nav and there is no band. */
body.has-topbar main > *:first-child{padding-top:calc(var(--hdr) + clamp(8px,1.5vh,20px))}

/* The hero met the next section on a hard dark/paper edge. Alex rejected that.
   The last strip of the hero now melts into the page colour, and the fact bar
   is lifted clear of the fade so nothing loses contrast over it. */
.hfb{--hfb-fade:clamp(64px,9vh,120px);padding-bottom:var(--hfb-fade)}
.hfb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--hfb-fade);
  background:linear-gradient(to bottom,rgba(28,26,22,0),var(--paper));pointer-events:none;z-index:2}
@media(min-width:981px){
  .hfb__bar{bottom:var(--hfb-fade);z-index:4}
  .hfb__box,.hfb__cap,.ibtn{z-index:4}
}
/* lift the pause control clear of the hero fade, same as the fact bar */
@media(min-width:981px){ .hfb > .stage__pause{bottom:calc(var(--hfb-fade) + 28px)} }

/* ---- photo placeholder: quiet, on-brand, never scaffolding-yellow ----
   Used where a real photo does not exist yet. Reads as a deliberate empty
   frame rather than a broken image or a developer note. */
.csph{position:absolute;inset:0;display:grid;place-items:center;background:var(--warm);
  background-image:repeating-linear-gradient(45deg,rgba(33,30,26,.025) 0 10px,transparent 10px 20px)}
.csph span{display:inline-flex;align-items:center;gap:7px;font:600 11.5px/1 var(--f-body);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.csph svg{width:15px;height:15px;opacity:.5}
.pcard__ph .csph,.scard__m .csph,.card__media .csph{border-radius:inherit}
/* a media box that holds a placeholder still needs its own height */
.scard__m:has(.csph),.card__media:has(.csph){position:relative;min-height:170px}
.pcard__ph:has(.csph){position:relative}

/* ---- studio hero carousel ----------------------------------------------
   Replaces the circle+card collage on the studio pages. Alex rejected that
   composition. Same shape language as the rest of the page: one rounded
   frame, the existing pill controls, crossfade rather than slide so it
   stays calm. Honours prefers-reduced-motion. */
.cscar{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e3);
  background:var(--warm);aspect-ratio:4/3}
@media(max-width:980px){.cscar{aspect-ratio:3/2}}
.cscar__s{position:absolute;inset:0;margin:0;opacity:0;transition:opacity var(--d-4) var(--e-out)}
.cscar__s.is-on{opacity:1}
.cscar__s img{width:100%;height:100%;object-fit:cover;display:block}
.cscar__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:var(--r-pill);border:0;cursor:pointer;
  display:grid;place-items:center;color:var(--ink);
  background:rgba(250,247,240,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px var(--line),var(--e2);
  transition:transform var(--d-2) var(--e-out),background-color var(--d-2)}
@media(hover:hover){.cscar__nav:hover{transform:translateY(-50%) scale(1.06)}}
.cscar__nav svg{width:18px;height:18px}
.cscar__prev{left:14px}.cscar__next{right:14px}
/* the dots sat centred while the caption is anchored bottom-left, both at the
   same height, so a long caption ran straight into them. Anchored to the opposite
   corner they cannot meet, and the caption is capped so it can never reach across. */
.cscar__dots{position:absolute;right:14px;bottom:14px;z-index:3;
  display:flex;gap:7px;align-items:center;padding:7px 10px;border-radius:var(--r-pill);
  background:rgba(250,247,240,.80);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px var(--line)}
.cscar__dot{width:16px;height:3px;border-radius:3px;border:0;padding:0;cursor:pointer;
  background:rgba(33,30,26,.28);transition:width var(--d-3) var(--e-out),background-color var(--d-2)}
.cscar__dot.is-on{width:30px;background:var(--ink)}
.cscar__cap{position:absolute;left:14px;bottom:14px;z-index:3;max-width:calc(100% - 170px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 12px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:rgba(250,247,240,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:9px 13px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line)}
@media(max-width:620px){.cscar__cap{display:none}}
@media(prefers-reduced-motion:reduce){.cscar__s{transition:none}}
/* review slots awaiting their first real Google reviews */
.rev--empty{opacity:.55}
.rev--empty .stars{color:var(--muted)}
.rev--empty p{font-style:normal;color:var(--muted)}

/* ---- hero fact cards -------------------------------------------------
   They were a 42% dark wash sitting on a dark photograph, so they read as
   glass on glass and vanished. Alex rejected that. Now a genuine light
   frosted card: paper ground, ink headline, a bright inner hairline to
   lift it off the image, and a soft drop shadow for separation. */
.trust--dark li{
  background:rgba(250,247,240,.86);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),
             0 1px 2px rgba(20,18,15,.14),
             0 10px 28px -8px rgba(20,18,15,.38);
  color:var(--ink-2)}
.trust--dark b{color:var(--ink)}
/* browsers without backdrop-filter get a solid card rather than a grey smear */
@supports not (backdrop-filter:blur(1px)){.trust--dark li{background:rgba(250,247,240,.96)}}

/* ---- referral contacts ------------------------------------------------
   The old .ccard reserved a 52px avatar column for an avatar that was never
   in the markup, so the text was crushed into a narrow strip. Two plain
   cards instead, each naming a real person and their direct number. */
.cscs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
@media(max-width:620px){.cscs{grid-template-columns:minmax(0,1fr)}}
.csc{background:var(--card);border-radius:var(--r-md);padding:16px 18px;
  box-shadow:inset 0 0 0 1px var(--line)}
.csc__studio{margin:0;font:600 11.5px/1 var(--f-body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.csc__name{margin:8px 0 0;font:600 20px/1.15 var(--f-disp);letter-spacing:-.02em;color:var(--ink)}
.csc__tel{display:inline-block;margin-top:6px;font:600 16px/1 var(--f-body);color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.csc__go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font:600 14px/1 var(--f-body);color:var(--ink);text-decoration:none;min-height:44px}
.csc__go svg{width:17px;height:17px;transition:transform var(--d-3) var(--e-out)}
@media(hover:hover){.csc__go:hover svg{transform:translateX(3px)}}
/* this block sits inside the dark coordinators panel on a light card */
.coord .csc,.dark .csc{background:var(--paper)}



/* ---- studio hero composition -----------------------------------------
   Two faults Alex called out. (1) The hero was capped at --wrap 1380px, so
   on a 2560px screen the whole composition sat marooned in the middle with
   dead space either side. (2) Replacing the collage with a carousel left
   the media floating centred in its column while the copy ran taller, so
   the two halves never shared an edge.
   `1fr 1fr` with `align-items:center` is what caused the float; the columns
   now stretch to a shared top and bottom. */
.shero__grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(32px,4vw,72px);
  align-items:stretch;
  padding:clamp(26px,4vh,48px) 0 clamp(40px,5.4vh,84px)}
/* left column: copy sits optically centred against the media */
.shero__grid > div:first-child{display:flex;flex-direction:column;justify-content:center}
/* right column: the media fills the row instead of floating in it */
.shero__grid .hsq--studio{display:flex;align-self:stretch}
.shero__grid .cscar{width:100%;height:100%;aspect-ratio:auto;
  min-height:clamp(430px,58vh,660px)}
/* the address block belongs with the copy, not adrift beneath it */
.shero .facts{margin-top:clamp(22px,3vh,34px)}

/* The studio hero owns the first screen. Without this it ran ~1020px tall in a
   1440px viewport, so the facts strip below it was sliced through the middle on
   load. `.shero` is main's first child, so `body.has-topbar` has already given
   it the nav's height as top padding; 100svh therefore ends it exactly at the
   fold. min-height, never height, so a short window or long copy still grows. */
@media(min-width:981px){
  .shero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
  /* The wrap and the grid both grow, so the extra height goes INTO the layout
     rather than around it. Centring the whole block instead left the content
     floating as an island with ~280px of dead space above and below it on a
     1440px-tall screen. Stretched, the studio photo takes the height and the
     copy column centres itself against it (.shero__grid > div:first-child
     already does that), which is what the hero wants the space for. */
  .shero > .wrap{width:100%;flex:1;display:flex;flex-direction:column;justify-content:center}
  .shero__grid{flex:1 1 auto}
}

/* ...but only up to a point. On a very tall screen the stretch turned the studio
   photo into a 0.65-ratio vertical slab, and every studio source shot is
   LANDSCAPE, so object-fit was showing a narrow vertical core of a wide room.
   Capped, it settles near 4:5 and centres against the centred copy. Deliberately
   scoped to large tall screens: at 1440x900 the photo and the copy column are
   already near the same height and sharing an edge, which is the look to keep. */
@media(min-width:981px){ .shero__grid .hsq--studio{align-items:center} }
/* A CAP, never a forced height. `aspect-ratio:3/4` here SET the photo's height to
   its own width x 1.333 and pushed it straight past the fold, because the
   `max-height:100%` meant to rein it in has no definite parent height to resolve
   against inside a stretched flex item, so it was simply ignored. A vh cap needs
   no parent, and it is scoped to screens tall enough for the photo to have become
   a slab in the first place; at 1440x900 and 1680x1050 the photo still shares its
   top and bottom edge with the copy column, which is the look to keep. */
@media(min-width:1280px) and (min-height:1100px){
  .shero__grid .cscar{max-height:min(74vh,1040px)}
}

/* Filling the screen is only half of it: on a short laptop window the hero's OWN
   content then ran past the fold and cut the address card. The display size was
   the whole problem, 92px at 1440 wide regardless of how little height there was.
   min() caps it against the viewport's height as well as its width, so it scales
   continuously instead of jumping at a breakpoint, and the two hand-set margins
   below it join the vh-based rhythm the rest of the hero already uses.
   A 2560x1440 screen is unaffected (7.4vh = 106px, so the 96px cap still wins)
   and so is mobile (6.4vw = 25px at 390 wide, so the 46px floor still wins). */
.shero .h1{font-size:clamp(46px,min(6.4vw,7.4vh),96px);margin-top:0}
.shero .lede{margin-top:clamp(16px,2.4vh,26px)}
.shero .hero__cta{margin-top:clamp(22px,3.4vh,36px)}

@media(max-width:980px){
  .shero__grid{grid-template-columns:minmax(0,1fr);align-items:start;gap:26px;padding-bottom:40px}
  .shero__grid .cscar{min-height:0;aspect-ratio:3/2}
  .shero__grid .hsq--studio{order:-1}
}

/* On very large displays the 1380px wrap left the whole page marooned in the
   middle of the viewport. One measure for every section so the hero, the
   facts row and everything below share the same left edge. */
@media(min-width:1600px){
  .wrap{max-width:min(1680px, 94vw)}
}
/* `display:flex` on .cssheet beat the UA's [hidden]{display:none}, so the
   mobile menu rendered open on every page at every narrow width. */
.cssheet[hidden]{display:none}
/* The office fallback ran as one sentence with an inline separator, so when it
   wrapped the separator dangled at the end of a line and the email dropped
   alone underneath. Label plus two links, no mid-sentence punctuation to break. */
.csc__office{margin:16px 0 0;font:600 11.5px/1 var(--f-body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.csc__officeline{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px}
.csc__officeline a{font:600 15px/1.4 var(--f-body);color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:2px}
/* this block sits on a LIGHT card inside the dark panel, so it keeps ink.
   The earlier dark override painted the links paper-white on cream and they
   disappeared. */
.coord .csc__office,.dark .csc__office{color:var(--muted)}
.coord .csc__officeline a,.dark .csc__officeline a{color:var(--ink);border-color:var(--line)}

/* ---- contact dialog ---------------------------------------------------
   The hero card carried two buttons plus an inline phone number and felt
   cramped on the right. One action plus "Contact us", which opens this.
   Native <dialog> so it lives in the top layer and cannot be clipped by
   the hero's own stacking context. */
.cdlg{border:0;padding:0;background:transparent;max-width:min(620px,92vw);width:100%;margin:auto}
.cdlg::backdrop{background:rgba(20,18,15,.52);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cdlg__card{position:relative;background:var(--paper);border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,38px);box-shadow:var(--e4)}
.cdlg__x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;cursor:pointer;
  border-radius:var(--r-pill);background:var(--warm);color:var(--ink);font-size:20px;line-height:1}
.cdlg__eyebrow{margin:0;font:600 11.5px/1 var(--f-body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.cdlg__h{margin:12px 0 22px;font:600 clamp(24px,2.6vw,30px)/1.15 var(--f-disp);letter-spacing:-.025em;color:var(--ink)}
.cdlg__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:560px){.cdlg__g{grid-template-columns:minmax(0,1fr)}}
.cdlg__g section{background:var(--card);border-radius:var(--r-md);padding:18px;
  box-shadow:inset 0 0 0 1px var(--line)}
.cdlg__g h3{margin:0 0 10px;font:600 11.5px/1 var(--f-body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.cdlg__g ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.cdlg__g li + li{padding-top:16px;border-top:1px solid var(--line)}
.cdlg__g{align-items:stretch}
.cdlg__g li{display:block}
.cdlg__g b{display:block;font:600 16px/1.2 var(--f-disp);letter-spacing:-.015em;color:var(--ink)}
.cdlg__g span{display:block;margin-top:2px;font-size:12.5px;color:var(--muted);line-height:1.35}
.cdlg__tel{margin-top:6px;font:600 16px/1 var(--f-body);color:var(--ink);text-decoration:none;
  white-space:nowrap;border-bottom:1px solid var(--line);padding-bottom:3px;
  min-height:44px;display:inline-flex;align-items:center}
.cdlg__soon{display:block;margin-top:6px;font:500 13px/1 var(--f-body);color:var(--muted)}
.cdlg__foot{margin:20px 0 0;font-size:14px;color:var(--muted)}
.cdlg__foot a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
@media(prefers-reduced-motion:no-preference){
  .cdlg[open]{animation:cdlgIn var(--d-3) var(--e-out)}
  @keyframes cdlgIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
}

/* ---- hero card size --------------------------------------------------
   The card was locked to aspect-ratio 1/1, so it stayed a full square no
   matter how little was in it. With the walk-through button and the inline
   phone number gone it was mostly empty. It now sizes to its content and
   the column is a little narrower, so the card reads as a card rather than
   a panel. */
@media(min-width:981px){
  .hfb--ab .hfb__copy{aspect-ratio:auto;padding:36px 38px 34px;border-radius:34px}
  .hfb--ab .hfb__in{grid-template-columns:minmax(0,1fr) minmax(0,520px)}
  .hfb--ab .h-display{font-size:clamp(46px,4.4vw,68px)}
  .hfb--ab .hfb__copy .lede{font-size:16.5px;margin-top:14px;max-width:46ch}
  .hfb--ab .hfb__copy .hero__cta{margin-top:26px}
}
@media(min-width:1600px){
  .hfb--ab .hfb__in{grid-template-columns:minmax(0,1fr) minmax(0,560px)}
}
/* the CS Mobile card is dark, so its secondary link needs paper ink */
.card--mobile .card__cta .tlink{color:var(--paper);border-bottom-color:var(--line-inv)}

/* ---- one card response, site-wide ------------------------------------
   The three studio tiles lifted on hover and nothing else did, so the rest
   of the page felt inert next to them. Every card-shaped surface now shares
   the studio tiles' response: the same lift, the same easing and duration
   tokens, a shadow step up. Interactive cards lift further than static
   information cards, so the motion still says what is clickable. */
.scard,.csc,.cf,.act,.how li,.rev,.gal figure,.social a,.dlbtn,.ccard,.cdlg__g section{
  --lift:0px;
  transform:translateY(var(--lift));
  transition:transform var(--d-4) var(--e-out),box-shadow var(--d-4) var(--e-out)}

@media(hover:hover) and (pointer:fine){
  /* clickable surfaces: the studio tiles' own lift */
  .scard:hover,.gal figure:hover,.social a:hover,.dlbtn:hover{
    --lift:-6px; box-shadow:inset 0 0 0 1px var(--line),var(--e4)}
  /* .ccard is a row separated by a border-top, not a rounded surface, so it
     takes the lift without a shadow that would box it in hard corners */
  .ccard:hover{--lift:-3px}
  /* information surfaces: present, but quieter */
  .csc:hover,.cf:hover,.act:hover,.how li:hover,.rev:hover,.cdlg__g section:hover{
    --lift:-3px; box-shadow:inset 0 0 0 1px var(--line),var(--e3)}
  /* on the dark coordinator panel the hairline has to invert or it vanishes */
  .dark .cf:hover,.coord .cf:hover,.dark .act:hover,.coord .act:hover{
    box-shadow:inset 0 0 0 1px var(--line-inv),var(--e3)}
}

/* keyboard users get the same signal as the mouse */
.scard:focus-within,.gal figure:focus-within,
.social a:focus-visible,.dlbtn:focus-visible{
  --lift:-6px; box-shadow:inset 0 0 0 1px var(--line),var(--e4)}
.ccard:focus-within{--lift:-3px}

/* touch: no hover state to get stuck on, and no lift on tap */
@media(hover:none){
  .scard,.csc,.cf,.act,.how li,.rev,.gal figure,.social a,.dlbtn,.ccard,.cdlg__g section{
    --lift:0px!important}
}
@media(prefers-reduced-motion:reduce){
  .scard,.csc,.cf,.act,.how li,.rev,.gal figure,.social a,.dlbtn,.ccard,.cdlg__g section{
    transition:box-shadow var(--d-2) linear;transform:none!important}
}


/* ---------- Squire Coaching: three prints fanned on the ink band ----------
   The band__media panel already carried `perspective`, so the concept always
   intended something dimensional here; it just shipped a placeholder. Each photo
   is a print, paper border and all, rather than a bare image, which is what lets
   three casual phone photos sit on a premium dark band without looking like a
   gallery dump. The logo is the real Squire mark knocked out to paper, so it
   reads as their brand signing the work rather than a white rectangle pasted on
   the ink.

   The spread is budgeted, not eyeballed. `.band` is `overflow:hidden` for its
   36px radius, so anything past the media column's edge is cut. A print rotated
   by r reaches `w/2*cos(r) + h/2*sin(r)` from its own centre, and the tall side
   dominates: at 15deg a 4:5 print reaches further than its own half-width. Rest
   is therefore a tight stack and hover is the open fan, which is also the better
   interaction: it gives the cursor something to actually do. */
.sqfan{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(20px,2.6vw,34px);padding:clamp(32px,3.6vw,50px) clamp(10px,1.4vw,22px)}
.sqfan__stack{position:relative;width:min(100%,500px);aspect-ratio:1/.94}
.sqfan__p{position:absolute;top:50%;left:50%;width:64%;margin:0;background:var(--paper);
  padding:7px;border-radius:18px;
  box-shadow:0 20px 44px -14px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.32);
  transition:transform var(--d-4) var(--e-out),box-shadow var(--d-4) var(--e-out)}
.sqfan__p img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px}
.sqfan__p--l{transform:translate(-50%,-50%) translateX(-30%) rotate(-8deg)}
.sqfan__p--r{transform:translate(-50%,-50%) translateX(30%) rotate(7.5deg)}
.sqfan__p--c{transform:translate(-50%,-50%) rotate(-1.5deg) scale(1.06);z-index:2}
.sqfan__logo{display:block;width:min(78%,286px);height:auto}
/* the whole fan answers the cursor as one object, the same lift the cards use */
@media(hover:hover){
  .sqfan:hover .sqfan__p--l{transform:translate(-50%,-50%) translateX(-46%) rotate(-15deg)}
  .sqfan:hover .sqfan__p--r{transform:translate(-50%,-50%) translateX(46%) rotate(14deg)}
  .sqfan:hover .sqfan__p--c{transform:translate(-50%,-50%) translateY(-10px) rotate(-1.5deg) scale(1.12)}
  .sqfan:hover .sqfan__p{box-shadow:0 26px 54px -14px rgba(0,0,0,.66),0 3px 10px rgba(0,0,0,.36)}
}
@media(prefers-reduced-motion:reduce){
  .sqfan__p{transition:none}
  .sqfan:hover .sqfan__p--l{transform:translate(-50%,-50%) translateX(-30%) rotate(-8deg)}
  .sqfan:hover .sqfan__p--r{transform:translate(-50%,-50%) translateX(30%) rotate(7.5deg)}
  .sqfan:hover .sqfan__p--c{transform:translate(-50%,-50%) rotate(-1.5deg) scale(1.06)}
}
@media(max-width:980px){
  .sqfan{padding:30px 14px 36px}
  .sqfan__stack{width:min(100%,420px)}
}