/* ============================================================
   Circle Square — Mock D · "Humaan" direction
   Light editorial, giant display type, tonal greyscale drench,
   image-led. Centred pill nav. General Sans display + Inter body.
   ============================================================ */
:root{
  /* warm greyscale — neutral, no chroma accents, just warmed to soften the cold */
  --ink:#211e1a; --mid:#6a635a; --soft:#665f55; /* soft darkened for AA on sage */
  --paper:#f4f0e8; --sage:#ece5d9; --char:#1c1a16; --white:#fff; --surface:#fffdf8;
  --line:rgba(33,30,26,.13); --line-d:rgba(255,255,255,.13);
  --disp:'General Sans','Inter',sans-serif; --font:'Inter',Helvetica,Arial,sans-serif;
  --wrap:1600px; --pad:clamp(20px,5vw,64px); --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}
body{font-family:var(--font);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;line-height:1.5}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
/* faint paper grain — softens the flat colour fields */
body::before{content:"";position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.band-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.section-eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.section-eyebrow.light{color:rgba(255,255,255,.6)}

.btn{display:inline-flex;align-items:center;gap:.5em;font-size:15px;font-weight:600;letter-spacing:-.01em;
  padding:15px 28px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .16s var(--ease),background .25s,border-color .25s,color .25s;will-change:transform}
@media(hover:hover){.btn:hover{transform:translateY(-2px)}}
.btn:active{transform:scale(.97)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--paper)}
@media(hover:hover){.btn-dark:hover{background:#000}}
.btn-ghost{color:var(--paper);border-color:var(--line-d)}
@media(hover:hover){.btn-ghost:hover{border-color:var(--paper)}}

/* drench */
.drench-paper{background:var(--paper);color:var(--ink)}
.drench-sage{background:var(--sage);color:var(--ink)}
.drench-char{background:var(--char);color:var(--paper)}

/* nav */
.nav{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 .4s var(--ease)}
.nav.scrolled{padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:14px}
.nav-logo img{height:32px;width:auto;transition:filter .35s var(--ease)}
.nav.on-dark .nav-logo img{filter:invert(1) brightness(1.05)} /* monochrome mark → off-white over dark bands */
.pill{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:6px;width:max-content;max-width:calc(100vw - 40px);white-space:nowrap;
  background:rgba(255,255,255,.78);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px}
.pill a{font-size:14px;font-weight:500;color:#55504a;padding:8px 15px;border-radius:999px;white-space:nowrap;transition:color .2s,background .25s,transform .16s var(--ease)}
@media(hover:hover){.pill a:hover{color:var(--ink)}}
.pill a.active{background:var(--sage);color:var(--ink)}
/* standalone pages (ndis/referral/contact) mark their own link with aria-current;
   the scrollspy only lights homepage in-page anchors, so style aria-current too */
.pill a[aria-current="page"]:not(.pill-refer){background:var(--sage);color:var(--ink)}
/* referral chip lives IN the pill — solid ink so it reads as THE action everywhere */
.pill a.pill-refer{background:var(--ink);color:var(--paper);font-weight:600;margin-left:4px}
@media(hover:hover){.pill a.pill-refer:hover{color:var(--paper);transform:scale(1.04)}}

/* CS Mobile nav tab + NEW sticker (greyscale, on-brand, mascot-bob technique).
   Shared from cs-mobile.html so every page's nav carries the same sticker. */
.pill a.pill-mobile{position:relative}
.nav-new{position:absolute;top:-9px;right:-4px;background:var(--char);color:var(--paper);
  font-family:var(--font);font-size:9px;font-weight:700;letter-spacing:.1em;line-height:1;
  padding:3px 6px;border-radius:999px;animation:new-bob 2.6s var(--ease) infinite;transform-origin:center bottom}
.sheet-new{display:inline-block;margin-left:8px;background:var(--char);color:var(--paper);
  font-size:9px;font-weight:700;letter-spacing:.1em;padding:3px 6px;border-radius:999px;vertical-align:middle}
@keyframes new-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(3deg)}}
@media (prefers-reduced-motion: reduce){.nav-new{animation:none}}

/* hero — type left, CROPPED photo right. compact + layered: a faint oversized CS
   roundel sits behind the type for depth (same ghost-mark language as the statement
   band, so it's on-system not bespoke). bigger headline carries the left. */
.hero{padding:0}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr clamp(380px,40vw,560px);
  gap:clamp(34px,5vw,88px);max-width:var(--wrap);margin:0 auto;
  padding:clamp(94px,12vh,124px) var(--pad) clamp(54px,7vh,84px);
  min-height:clamp(560px,84vh,920px);align-items:center}
/* faint brand watermark behind the type */
.hero-mark{position:absolute;left:-8%;top:50%;transform:translateY(-50%);width:min(54vw,660px);
  opacity:.05;pointer-events:none;z-index:0}
.hero-wrap,.hero-frame{position:relative;z-index:1}
/* hero photo DECK — active fills the frame (same crop as the single photo did),
   the next photos peek behind it lower-right; arrow + dot buttons swap them.
   each photo rounded 18px + grayscale .2 to MATCH every other photo on the page. */
/* carousel frame extends to the right viewport edge so it isn't a small block
   floating with dead space (cancels the grid's right gutter + bleed past max-width) */
/* clipped (no spill onto the headline) but the left+right edges are FEATHERED with a
   mask so the peeking photos dissolve out softly instead of a hard square cut */
.hero-frame{align-self:center;height:clamp(440px,66vh,640px);overflow:hidden;border-radius:18px;
  width:calc(100% + max(0px,(100vw - var(--wrap)) / 2));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.deck{position:absolute;inset:0}
.deck-img{position:absolute;top:0;height:100%;left:50%;width:84%;transform:translateX(-50%);
  object-fit:cover;object-position:center 50%;border-radius:18px;
  filter:grayscale(.2) contrast(1.05) brightness(1.03);
  box-shadow:0 26px 54px -30px rgba(33,30,26,.55);backface-visibility:hidden;will-change:transform}
.deck{cursor:grab;touch-action:pan-y}.deck.grabbing{cursor:grabbing}
.deck-prev,.deck-next{position:absolute;top:50%;transform:translateY(-50%);z-index:25;width:48px;height:48px;
  border-radius:999px;border:1px solid rgba(33,30,26,.08);background:rgba(255,253,248,.94);backdrop-filter:blur(8px);
  display:grid;place-items:center;cursor:pointer;color:var(--ink);box-shadow:0 6px 22px -6px rgba(33,30,26,.32);
  transition:background .22s var(--ease),color .22s var(--ease),transform .18s var(--ease)}
.deck-prev{left:16px}.deck-next{right:16px}
.deck-prev svg,.deck-next svg{width:19px;height:19px;transition:transform .25s var(--ease)}
@media(hover:hover){
  .deck-prev:hover,.deck-next:hover{background:var(--ink);color:var(--paper);transform:translateY(-50%) scale(1.08)}
  .deck-prev:hover svg{transform:translateX(-2px)}
  .deck-next:hover svg{transform:translateX(2px)}
}
/* segmented progress indicator (replaces round dots) */
.deck-dots{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:25;display:flex;gap:7px;align-items:center}
.deck-dot{width:16px;height:3px;border-radius:3px;border:0;padding:0;background:rgba(255,255,255,.55);cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.35);transition:width .35s var(--ease),background .35s var(--ease)}
.deck-dot.on{width:32px;background:#fff}
/* visible keyboard focus, site-wide (was missing) */
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.deck-dot:focus-visible{outline-offset:4px}
/* type column */
.hero-wrap{min-width:0;display:flex;flex-direction:column}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:22px}
.hero-title{font-family:var(--disp);font-weight:600;font-size:clamp(42px,4.9vw,76px);line-height:1.02;letter-spacing:-.028em}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line>span{display:block;will-change:transform}
.hero-title .l2>span{font-weight:400;color:#3b352e;padding-left:.42em}
.hero-rule{width:60px;height:1px;background:var(--line);margin:26px 0}
.hero-sub{max-width:46ch;font-size:clamp(15.5px,1.5vw,18px);color:var(--mid);line-height:1.55}
.hero-cta{display:flex;align-items:center;gap:22px;margin-top:32px;flex-wrap:wrap}
.hero-link{font-size:15px;font-weight:600;color:var(--ink);display:inline-flex;gap:7px;align-items:center}
.hero-link span{transition:transform .3s var(--ease)}
@media(hover:hover){.hero-link:hover span{transform:translateX(4px)}}
.btn-sage{background:#dfd6c6;color:var(--ink)}
@media(hover:hover){.btn-sage:hover{background:#d4c9b5}}
.hero-head{width:100%}
/* value row — integrated under the type as a spec strip */
.hero-stats{margin-top:clamp(34px,5vh,52px);display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);padding-top:clamp(20px,2.2vw,28px)}
.hero-stats div{padding-right:14px}
.hero-stats div+div{border-left:1px solid var(--line);padding-left:clamp(14px,1.4vw,24px)}
.hero-stats span{display:block;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);margin-bottom:8px}
.hero-stats b{font-family:var(--disp);font-weight:600;font-size:clamp(15px,1.35vw,19px);letter-spacing:-.01em;color:var(--ink)}

/* about — photo LEFT / statement RIGHT (alternates from the hero's type-left split) */
.about-grid{display:grid;grid-template-columns:clamp(320px,40vw,520px) 1fr;gap:clamp(34px,5vw,80px);align-items:center}
.about-photo{position:relative;align-self:center;border-radius:18px;overflow:hidden;
  aspect-ratio:5/6;min-height:clamp(340px,46vh,520px)}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:center 35%;
  filter:grayscale(.2) contrast(1.05) brightness(1.03)}
.about-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;
  background:linear-gradient(transparent,rgba(0,0,0,.38));pointer-events:none}
.about-photo figcaption{position:absolute;left:18px;bottom:14px;z-index:2;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.about-text .meta{margin-bottom:22px}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:24px}.about-photo{min-height:300px}}

/* bands */
.band{padding:clamp(90px,13vw,180px) 0}
.band-head{margin-bottom:clamp(40px,6vw,72px)}
.band-head .section-eyebrow{margin-bottom:18px}
.band-title{font-family:var(--disp);font-weight:600;font-size:clamp(34px,5.5vw,76px);line-height:.98;letter-spacing:-.03em}
.band-title.light{color:var(--paper)}

/* about split */
.split{display:grid;grid-template-columns:.4fr .6fr;gap:clamp(28px,6vw,90px)}
.lead{font-family:var(--disp);font-weight:500;font-size:clamp(24px,3.4vw,46px);line-height:1.12;letter-spacing:-.02em}
.lead-sub{margin-top:30px;font-size:clamp(16px,1.7vw,19px);color:var(--mid);line-height:1.6;max-width:54ch}

/* statement */
.statement{position:relative;padding:clamp(100px,15vw,200px) 0;overflow:hidden}
.statement .section-eyebrow{margin-bottom:26px}
.statement-mark{position:absolute;right:calc(-1 * clamp(20px,4vw,60px));top:50%;transform:translateY(-50%) rotate(-8deg);
  width:clamp(220px,30vw,460px);opacity:.06;pointer-events:none;user-select:none}
.big-quote{position:relative;font-family:var(--disp);font-weight:500;font-size:clamp(26px,4vw,54px);line-height:1.16;letter-spacing:-.02em;
  max-width:26ch;color:var(--paper)}
.big-quote-foot{position:relative;margin-top:36px;font-size:clamp(16px,1.7vw,19px);color:rgba(255,255,255,.62)}
.bq-hl{color:var(--paper);font-weight:600}

/* services editorial list */
.svc-list{list-style:none;border-top:1px solid var(--line)}
.svc-list li{display:grid;grid-template-columns:60px 1fr;gap:clamp(16px,3vw,48px);align-items:start;
  padding:clamp(26px,3vw,40px) 0;border-bottom:1px solid var(--line)}
.svc-list li span{font-family:var(--disp);font-size:16px;font-weight:600;color:var(--soft);padding-top:6px}
.svc-list h3{font-family:var(--disp);font-size:clamp(22px,2.6vw,34px);font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.svc-list p{font-size:clamp(15px,1.6vw,17.5px);color:var(--mid);line-height:1.55;max-width:60ch}

/* team grid */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)}
.team-grid figure{margin:0}
.team-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;border-radius:14px;
  filter:grayscale(.25) contrast(1.04) brightness(1.02);
  transition:filter .5s var(--ease),transform .5s var(--ease)}
@media(hover:hover){.team-grid figure:hover img{filter:grayscale(0) contrast(1.04);transform:scale(1.02)}}
.team-grid figcaption{margin-top:14px}
.team-grid b{display:block;font-family:var(--disp);font-size:18px;font-weight:600;letter-spacing:-.01em}
.team-grid span{font-size:13px;color:var(--soft)}

/* the space full-bleed */
/* overflow:hidden clips the parallax-overscanned .space-bleed image (GSAP scales
   it ~1.17x and translates it on scroll) to the section. Without it the scaled
   dark photo spills up over the team grid and down over the stats band on narrow
   viewports, reading as a section overlap. */
.space{position:relative;color:var(--paper);overflow:hidden}
.space-bleed{width:100%;height:clamp(520px,80vh,820px);object-fit:cover;filter:grayscale(.25) brightness(.6) contrast(1.05)}
.space-copy{position:absolute;left:0;right:0;bottom:clamp(40px,6vw,80px)}
.space-copy .band-title{margin:14px 0 18px}
.space-body{font-size:clamp(16px,1.8vw,19px);color:rgba(255,255,255,.8);line-height:1.6;max-width:54ch}

/* meta rows — indexed section markers (micro-density layer) */
.meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-top:1px solid var(--line);padding-top:12px;margin-bottom:20px;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.meta.light{border-top-color:rgba(255,255,255,.25);color:rgba(255,255,255,.7);max-width:380px}

/* type marquee — brand line as texture */
.tmq{overflow:hidden;padding:clamp(30px,4vw,56px) 0;border-top:1px solid var(--line)}
.tmq-track{display:flex;width:max-content;white-space:nowrap;will-change:transform;
  animation:stripmove 36s linear infinite;
  font-family:var(--disp);font-weight:600;font-size:clamp(44px,7.5vw,104px);letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.tmq .o{color:transparent;-webkit-text-stroke:1.5px rgba(33,30,26,.5)}
@keyframes stripmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(hover:hover){.tmq:hover .tmq-track{animation-play-state:paused}}
@media(prefers-reduced-motion:reduce){.tmq-track{animation:none}}

/* services rows — alive on hover */
.svc-list li{transition:background .3s}
.svc-list li>div{transition:transform .35s var(--ease)}
.svc-list li span{transition:color .3s}
@media(hover:hover){
  .svc-list li:hover>div{transform:translateX(12px)}
  .svc-list li:hover span{color:var(--ink)}
}

/* reviews — ever-moving Google reviews marquee */
.reviews{padding:clamp(64px,8vw,116px) 0;overflow:hidden}
.rev-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(34px,4.5vw,56px)}
.rev-title{font-family:var(--disp);font-weight:600;font-size:clamp(30px,4.4vw,58px);line-height:1;letter-spacing:-.025em;margin-top:14px}
.rev-score{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--soft);font-weight:500}
.rev-score .stars{color:var(--ink);letter-spacing:2px;font-size:15px}
.rev-score b{color:var(--ink);font-weight:700}
.rev-marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
/* width:max-content is the no-JS fallback; home.js pins an explicit px width
   once the track is cloned (iOS Safari mis-lays-out an animated max-content
   flex track and paints the row blank). No will-change: on iOS it promotes a
   fragile compositing layer that can also drop the row. translate is GPU-cheap
   here without it. */
.rev-track{display:flex;gap:20px;width:max-content;animation:revmove 64s linear infinite}
@keyframes revmove{to{transform:translateX(-50%)}}
@media(hover:hover){.rev-marquee:hover .rev-track{animation-play-state:paused}}
@media(prefers-reduced-motion:reduce){.rev-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;padding-inline:var(--pad)}}
.rev-card{flex:0 0 clamp(296px,29vw,392px);background:var(--white);border:1px solid var(--line);border-radius:18px;
  padding:26px 28px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 1px 2px rgba(33,30,26,.03),0 14px 32px -24px rgba(33,30,26,.22)}
.rev-card .stars{color:var(--ink);letter-spacing:2px;font-size:14px}
.rev-quote{font-size:15.5px;line-height:1.6;color:#3b352e;flex:1}
.rev-by{display:flex;align-items:center;gap:12px}
.rev-av{width:40px;height:40px;flex:0 0 40px;border-radius:999px;background:var(--sage);color:var(--ink);
  display:grid;place-items:center;font-family:var(--disp);font-weight:600;font-size:14px}
.rev-name{font-weight:600;font-size:14px;color:var(--ink)}
.rev-src{font-size:12.5px;color:var(--soft)}

/* mobile menu */
.nav-burger{display:none;margin-left:auto;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative;z-index:101;flex-direction:column;
  align-items:center;justify-content:center;gap:6px}
.nav-burger span{display:block;width:18px;height:2px;background:var(--ink);transition:transform .3s var(--ease)}
.nav-burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.nav-sheet[hidden]{display:none}
.nav-sheet{position:fixed;top:74px;left:16px;right:16px;z-index:99;background:var(--paper);
  border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px -30px rgba(33,30,26,.45);
  padding:10px;display:flex;flex-direction:column}
.nav-sheet a{font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  padding:14px 16px;border-radius:12px;touch-action:manipulation}
.nav-sheet a:active{background:var(--sage)}
.nav-sheet .sheet-cta{margin-top:6px;background:var(--ink);color:var(--paper);text-align:center}

/* stats — bordered editorial band (tighter than a content band) */
.stats-band{padding:clamp(40px,5.5vw,76px) 0}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.stat{padding:clamp(24px,3vw,40px) clamp(18px,2.5vw,36px);border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font-family:var(--disp);font-size:clamp(44px,6vw,88px);font-weight:600;letter-spacing:-.035em;line-height:1;white-space:nowrap}
.stat b em{font-style:normal;font-size:.36em;letter-spacing:0;margin-left:.1em;color:var(--mid)}
.stat span{display:block;margin-top:14px;font-size:14px;color:var(--mid)}

/* cta */
.cta{padding:clamp(60px,8vw,112px) 0;text-align:center}
.cta-title{font-family:var(--disp);font-weight:600;font-size:clamp(34px,5.5vw,82px);line-height:1;letter-spacing:-.03em;color:var(--paper)}
.cta-sub{margin:24px auto 0;max-width:48ch;font-size:clamp(16px,1.8vw,19px);color:rgba(255,255,255,.66);line-height:1.55}
.cta-actions{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* footer */
.footer{padding:clamp(60px,8vw,100px) 0 44px}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:40px;border-bottom:1px solid var(--line-d)}
.footer-logo{height:26px}
.footer-nav{display:flex;gap:26px;flex-wrap:wrap}
.footer-nav a{font-size:14.5px;color:rgba(255,255,255,.7);transition:color .2s}
@media(hover:hover){.footer-nav a:hover{color:var(--paper)}}
.footer-mid{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:40px 0;font-size:14.5px;color:rgba(255,255,255,.6);line-height:1.7}
.footer-mid a{color:rgba(255,255,255,.85)}
.footer-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.56)}

/* reveal — gated on html.js so a JS failure never leaves a blank page */
html.js [data-rv]{opacity:0;transform:translateY(30px);transition:opacity 1.25s var(--ease),transform 1.25s var(--ease)}
html.js [data-rv].in{opacity:1;transform:none}

/* 7-item pill is centered; below ~1200 it would slide under the left logo, so hand off to the burger earlier (the burger menu carries every link). */
@media(max-width:1199px){.pill{display:none}.nav-burger{display:flex}}
@media(max-width:920px){
  .pill{display:none}
  .nav-burger{display:flex}
  .hero-grid{grid-template-columns:1fr;gap:22px;min-height:0;padding:calc(84px + env(safe-area-inset-top,0px)) var(--pad) 18px}
  .hero-mark{display:none}
  .hero-frame{order:-1;align-self:auto;width:100%;height:clamp(340px,52vh,480px);margin:0 0 6px;
    -webkit-mask-image:none;mask-image:none}
  /* one clean photo per slide on mobile: active fills the frame, neighbours hidden by JS */
  .deck-img{width:100%}
  .hero-wrap{padding:0}
  .hero-title{font-size:clamp(30px,7.6vw,46px)}
  .hero-title .l2>span{padding-left:0}
  .hero-stats{margin-top:26px}
  .split{grid-template-columns:1fr;gap:18px}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .stat-row{grid-template-columns:1fr 1fr}
  .stat{padding-left:18px}
  .stat:nth-child(odd){border-left:0;padding-left:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .footer-mid{grid-template-columns:1fr}
}
/* mid widths: let the display type breathe without blowing out the grid */
@media(min-width:921px) and (max-width:1199px){
  .hero-title{font-size:clamp(34px,4.6vw,56px)}
}
@media(max-width:480px){
  .hero-title{font-size:clamp(28px,9.4vw,38px)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}[data-rv]{opacity:1!important;transform:none!important}}

/* trainer-portal link in the header (desktop; on mobile it lives in the sheet) */
.nav-portal{margin-left:auto;font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  padding:9px 16px;border:1px solid var(--line);border-radius:999px;transition:background .2s,color .2s,border-color .2s}
@media(hover:hover){.nav-portal:hover{background:var(--sage)}}
.nav.on-dark .nav-portal{color:var(--paper);border-color:var(--line-d)}
@media(max-width:920px){.nav-portal{display:none}}


/* ============================================================
   TEAM (DB-driven cards + bio overlay) — ported from styles.css,
   re-tokenized to the warm-greyscale brand. Loaded by home-team.js.
   ============================================================ */
.team-grid, .bio-overlay {
  --color-border: rgba(33,30,26,.12);
  --color-bg: #f4f0e8; --white: #fffdf8; --smoke: #efe9df; --sage: #ece5d9;
  --black: #211e1a; --color-text: #211e1a; --jet: #3a352e; --mid: #6a635a;
  --text-xs: .72rem; --text-sm: .9rem; --text-base: 1rem; --text-xl: 1.3rem; --text-3xl: 2.1rem;
  --dur-fast: 160ms; --dur-med: 320ms; --dur-overlay-in: 240ms; --dur-overlay-out: 170ms;
  --ease-quart-out: cubic-bezier(.25,1,.5,1); --ease-expo-out: cubic-bezier(.16,1,.3,1);
  --ease-overlay-out: cubic-bezier(.4,0,1,1); --font-family: 'Inter', sans-serif;
}
.team-grid .t-label, .bio-overlay__role {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mid); display: block;
}
.bio-overlay__foot .btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .7rem 1.3rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid var(--black);
  transition: opacity .2s, background .2s;
}
.bio-overlay__foot .btn--primary { background: var(--black); color: var(--color-bg); }
.bio-overlay__foot .btn--primary:hover { opacity: .9; }
.bio-overlay__foot .btn--outline { background: transparent; color: var(--black); }
.bio-overlay__foot .btn--outline:hover { background: var(--smoke); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}
.team-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  transition: background var(--dur-fast) var(--ease-quart-out);
}
@media (hover: hover) and (pointer: fine) {
  .team-card:hover { background: var(--smoke); }
}
.team-card__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--smoke);
}
.team-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  transition: transform var(--dur-med) var(--ease-expo-out);
}
/* Initials fallback when a staff member has no headshot yet — fills the photo
   box exactly (4/5 card · 96px overlay), greyscale, on-brand. */
.team-card__initials,
.bio-overlay__initials {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--smoke);
  color: var(--color-text);
  font-weight: 600; line-height: 1; letter-spacing: 0.01em;
}
.team-card__initials   { font-size: clamp(2.5rem, 8vw, 4rem); }
.bio-overlay__initials { font-size: 2rem; }
@media (hover: hover) and (pointer: fine) {
  .team-card:hover .team-card__photo img { transform: scale(1.03); }
}
.team-card__content {
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex; flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.team-card__num {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--mid);
}
.team-card__name {
  font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--black); margin: 0.1rem 0 0;
}
.team-card .t-label { margin-bottom: 0.5rem; }
.team-card__teaser {
  font-size: var(--text-sm); line-height: 1.6; color: var(--jet);
  margin: 0 0 0.25rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.team-card__more {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: none; padding: 0.5rem 0 0;
  font-family: var(--font-family); font-size: var(--text-sm); font-weight: 700;
  color: var(--black); cursor: pointer;
  transition: gap var(--dur-fast) var(--ease-expo-out), transform 160ms var(--ease-expo-out);
}
.team-card__more svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .team-card__more:hover { gap: 0.7rem; }
}
.team-card__more:active { transform: scale(0.97); }

/* ─── BIO OVERLAY (native <dialog>, top layer = no clipping) ─── */
.bio-overlay {
  position: fixed; inset: 0;
  width: 100vw; height: 100dvh;
  max-width: none; max-height: none;
  border: none; margin: 0;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: transparent;
}
.bio-overlay[open] {
  display: flex; align-items: center; justify-content: center;
}
.bio-overlay::backdrop {
  background: rgba(10,10,10,0);
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition: background var(--dur-overlay-in) ease, backdrop-filter var(--dur-overlay-in) ease;
}
.bio-overlay.is-open::backdrop {
  background: rgba(10,10,10,0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.bio-overlay__card {
  position: relative;
  display: grid; grid-template-rows: auto 1fr auto;
  width: min(800px, 100%);
  max-height: min(88vh, 900px);
  background: var(--color-bg);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  overflow: hidden;
  opacity: 0; transform: scale(0.96);
  transition: opacity var(--dur-overlay-out) var(--ease-overlay-out),
              transform var(--dur-overlay-out) var(--ease-overlay-out);
}
.bio-overlay.is-open .bio-overlay__card {
  opacity: 1; transform: scale(1);
  transition: opacity var(--dur-overlay-in) var(--ease-expo-out),
              transform var(--dur-overlay-in) var(--ease-expo-out);
}
.bio-overlay__close {
  position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--mid); transition: color var(--dur-fast);
}
.bio-overlay__close svg { width: 22px; height: 22px; }
.bio-overlay__close:hover { color: var(--black); }
.bio-overlay__head {
  display: flex; align-items: center; gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  padding-right: 3.5rem;
  border-bottom: 1px solid var(--color-border);
}
.bio-overlay__photo {
  width: 96px; height: 96px; flex-shrink: 0;
  border-radius: 6px; overflow: hidden; background: var(--smoke);
}
.bio-overlay__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.bio-overlay__name {
  font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.05; color: var(--black); margin: 0 0 0.4rem;
}
.bio-overlay__body {
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.bio-overlay__body p {
  font-size: var(--text-base); line-height: 1.8; color: var(--jet);
  max-width: 68ch; margin: 0 0 1rem;
}
.bio-overlay__body p:last-child { margin-bottom: 0; }
/* Section headings inside a bio — uppercase muted labels (same register as
   .t-label) so the long form bios have clear hierarchy and scan, instead of
   reading as a wall of bold run-in text. */
.bio-overlay__body .bio-overlay__h {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mid); margin: 1.9rem 0 0.5rem;
}
.bio-overlay__body .bio-overlay__h:first-child { margin-top: 0; }
/* Long role titles wrap instead of overflowing the header on small screens. */
.bio-overlay__id   { min-width: 0; }
.bio-overlay__role { overflow-wrap: anywhere; }
.bio-overlay__foot {
  display: flex; gap: 0.75rem; align-items: center;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}
.bio-overlay__download[hidden] { display: none; }

@media (max-width: 640px) {
  .bio-overlay { padding: 0; }
  .bio-overlay__card {
    width: 100vw; max-width: none; height: 100dvh; max-height: none;
    border-radius: 0;
  }
  .bio-overlay__head { padding: 1.25rem; padding-right: 3.5rem; }
  .bio-overlay__photo { width: 72px; height: 72px; }
  .bio-overlay__foot { flex-direction: column; }
  .bio-overlay__foot .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bio-overlay__card,
  .bio-overlay.is-open .bio-overlay__card { transition: opacity 120ms linear; transform: none; }
  .team-card__photo img, .team-card__more { transition: none; }
}

/* ============================================================
   TEAM — Humaan-style offset-column masonry (warm-greyscale).
   Reference: humaan.com/about (4 cols, alternating cols offset
   down ~133px, uniform portrait photos, radius 30px, full colour).
   Adapted to the CS system, NOT copied: our 14px radius +
   grayscale(.22) photo grade + ink/General-Sans type (no blue
   labels). Whole card opens the existing bio overlay on click.
   Appended last so it overrides the ported .team-grid/.team-card.
   ============================================================ */
.band.drench-sage #teamGrid.team-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.7vw,26px);                /* tight, matches Humaan's ~25px rhythm */
  background:none; border:0; padding:0;
  padding-bottom:clamp(40px,9vw,150px);      /* room for the deeper offset col + scroll drift */
  align-items:start;
}
/* the Humaan stagger — push the MIDDLE column down via margin-top (not
   transform, so the home.js scroll-drift parallax can own the transform).
   ~0.3× card height, matching Humaan's pronounced up/down between columns. */
#teamGrid .team-card:nth-child(3n+2){ margin-top:clamp(48px,9vw,150px); }

#teamGrid .team-card{
  position:relative; display:flex; flex-direction:column; gap:14px;
  background:none; border:0; padding:0;
}
@media (hover:hover){ #teamGrid .team-card:hover{ background:none; } }

#teamGrid .team-card__photo{
  display:block; aspect-ratio:456/560; border-radius:14px; overflow:hidden;
  background:var(--sage);
}
#teamGrid .team-card__photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 78%;
  display:block; filter:grayscale(.2) contrast(1.05) brightness(1.03);   /* match the page's hero/about photo formula exactly */
  transition:transform .6s var(--ease), filter .4s var(--ease);
}
/* Jamie was shot closer than the rest, so the standard crop cut his shirt
   logo. Nudge HIS framing down (card only — the bio overlay is untouched) so
   the logo shows + he sits a little further back, closer to the others. */
#teamGrid .team-card__photo img[src*="cs-jamie-headshot"]{ object-position:center 92%; }
@media (hover:hover){
  #teamGrid .team-card:hover .team-card__photo img{ transform:scale(1.04); filter:grayscale(0) contrast(1.05) brightness(1.03); }
}
#teamGrid .team-card__initials{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:var(--sage); color:var(--ink); font-weight:600;
  font-size:clamp(2.2rem,7vw,3.4rem); line-height:1;
}
#teamGrid .team-card__meta{ display:flex; flex-direction:column; gap:3px; }
#teamGrid .team-card__name{
  font-family:var(--disp); font-weight:600; font-size:clamp(17px,1.5vw,20px);
  letter-spacing:-.015em; line-height:1.15; color:var(--ink); margin:0;
}
#teamGrid .team-card__role{
  font-size:13.5px; color:var(--soft); font-weight:500; letter-spacing:0; text-transform:none;
}
#teamGrid .team-card__cue{
  display:inline-flex; align-items:center; gap:5px; margin-top:6px;
  font-size:12.5px; font-weight:600; color:var(--mid);
  opacity:0; transform:translateY(4px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
#teamGrid .team-card__cue svg{ width:14px; height:14px; }
@media (hover:hover){ #teamGrid .team-card:hover .team-card__cue{ opacity:1; transform:none; } }
@media (hover:none){ #teamGrid .team-card__cue{ opacity:1; transform:none; } }

#teamGrid .team-card__hit{
  position:absolute; inset:0; width:100%; height:100%;
  background:none; border:0; padding:0; margin:0; cursor:pointer; border-radius:14px;
}
#teamGrid .team-card__hit:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* "Joining soon" placeholder tiles — balance the grid + signal a growing team.
   Sibling of the initials fallback (sage fill); each carries the CS mascot,
   gently "running on the spot". Not interactive. */
#teamGrid .team-card--soon{ cursor:default; }
#teamGrid .team-card__photo--soon{
  position:relative;
  display:flex; align-items:center; justify-content:center;   /* mascot centred */
  background:var(--sage); overflow:hidden;
}
/* same studio-wall backdrop as the team photos (cropped from Jamie's
   headshot), graded with the EXACT team-photo filter so it reads as the
   same room. Sits behind the mascot via ::before (mascot stays unfiltered). */
#teamGrid .team-card__photo--soon::before{
  content:""; position:absolute; inset:0;
  background:url("brand/cs-tile-backdrop.jpg?v=1") center/cover no-repeat;
  filter:grayscale(.2) contrast(1.05) brightness(1.03);
}
/* high specificity (id + 2 classes + el.class) so it beats the
   #teamGrid .team-card__photo img cover/100% rule. Centred + reduced size. */
#teamGrid .team-card__photo--soon img.team-card__mascot{
  position:relative; z-index:1;
  width:auto; height:64%; max-width:60%; object-fit:contain;
  transform-origin:center; will-change:transform;
  animation:mascot-run 1.05s ease-in-out infinite;
}
#teamGrid .team-card--soon:last-child img.team-card__mascot{ animation-delay:-.5s; }  /* desync the pair */
@keyframes mascot-run{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%    { transform:translateY(-7px) rotate(2deg); }
}
@media (prefers-reduced-motion:reduce){ #teamGrid .team-card__photo--soon img.team-card__mascot{ animation:none; } }
#teamGrid .team-card--soon .team-card__name{ color:var(--mid); }
#teamGrid .team-card--soon .team-card__role{ color:var(--soft); }

@media (max-width:900px){
  .band.drench-sage #teamGrid.team-grid{ grid-template-columns:repeat(2,1fr); padding-bottom:clamp(22px,5vw,44px); }
  #teamGrid .team-card:nth-child(3n+2){ margin-top:0; }
  #teamGrid .team-card:nth-child(2n){ margin-top:clamp(22px,4vw,44px); }
}
@media (max-width:560px){
  .band.drench-sage #teamGrid.team-grid{ grid-template-columns:1fr; padding-bottom:0; }
  #teamGrid .team-card:nth-child(2n){ margin-top:0; }
}
@media (prefers-reduced-motion:reduce){
  #teamGrid .team-card__photo img, #teamGrid .team-card__cue{ transition:none; }
}

/* ── Mobile audit fixes (2026-06-30) ───────────────────────────────── */
@media(max-width:1199px){
  /* Solid blurred nav bar so hero text / content does not bleed through behind
     the logo + burger as you scroll (mobile bar previously had no background). */
  .nav{background:rgba(244,240,232,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  /* paper bar means the logo stays dark, never invert it over dark bands */
  .nav.on-dark .nav-logo img{filter:none}
}