/* ============================================================
   PARINAMA CONSULTING — Design System
   Palette sourced directly from brand mark:
     Ink   #1F2B2B   Sky #7DB7FF   Violet #A14EBF
   Type: Satoshi (weights 300/400/500 only — never bold)
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500&display=swap');

:root{
  --ink:#1F2B2B;
  --ink-2:#324040;
  --ink-soft:#5B6767;
  --sky:#7DB7FF;
  --sky-deep:#4F8FE0;
  --violet:#A14EBF;
  --violet-deep:#7E3B99;
  --bg:#FAFAF8;
  --bg-alt:#F1EFEA;
  --white:#FFFFFF;
  --body:#57615F;
  --muted:#8A928E;
  --hairline:#E3E1DA;
  --hairline-on-dark:rgba(255,255,255,0.14);

  --grad-brand: linear-gradient(120deg, var(--sky) 0%, var(--violet) 100%);

  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:30px;
  --radius-pill:999px;

  --section-pad-y: clamp(72px, 9vw, 132px);
  --gutter: clamp(24px, 5vw, 64px);
  --container: 1280px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --dur-m: .7s;
  --dur-l: 1.1s;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:auto;
}
[id]{ scroll-margin-top:100px; }
html.no-scroll, body.no-scroll{ overflow:hidden; height:100%; }

body{
  font-family:'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  font-size:16px;
  line-height:1.6;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }
strong,b{ font-weight:500; } /* never bold — 500 is the ceiling */

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

section{ position:relative; }

/* ---------- Typography scale ---------- */
h1,h2,h3,h4{ font-weight:500; letter-spacing:-0.01em; line-height:1.08; }
.display-1{ font-size:clamp(2.6rem, 6vw, 5.4rem); font-weight:400; letter-spacing:-0.02em; line-height:1.03; }
.display-2{ font-size:clamp(2.1rem, 4.4vw, 3.6rem); font-weight:400; letter-spacing:-0.015em; line-height:1.08; }
.display-3{ font-size:clamp(1.6rem, 3vw, 2.4rem); font-weight:500; letter-spacing:-0.01em; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--violet-deep); font-weight:500; margin-bottom:18px;
}
.eyebrow.on-dark{ color:var(--sky); }
.lede{ font-size:clamp(1.05rem,1.6vw,1.28rem); color:var(--body); font-weight:300; line-height:1.6; max-width:640px; }
.muted{ color:var(--muted); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:var(--radius-pill);
  font-size:.95rem; font-weight:500; letter-spacing:.01em;
  transition:transform .5s var(--ease-out), background .35s, color .35s, border-color .35s, box-shadow .35s;
  white-space:nowrap;
}
.btn-primary{ background:var(--ink); color:var(--white); }
.btn-primary:hover{ background:var(--violet-deep); transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(161,78,191,.45); }
.btn-outline{ border:1px solid var(--hairline); color:var(--ink); background:transparent; }
.btn-outline:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-outline.on-dark{ border-color:var(--hairline-on-dark); color:var(--white); }
.btn-outline.on-dark:hover{ border-color:var(--white); background:rgba(255,255,255,.06); }
.btn-ghost{ color:var(--ink); font-weight:500; display:inline-flex; align-items:center; gap:8px; }
.btn-ghost .arrow{ transition:transform .45s var(--ease-out); }
.btn-ghost:hover .arrow{ transform:translateX(6px); }
.btn-sm{ padding:10px 18px; font-size:.82rem; }

/* ---------- Preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  color:var(--white);
}
#preloader .pre-text{
  font-size:clamp(1.4rem,3vw,2.2rem); font-weight:300; letter-spacing:-0.01em;
}
#preloader .pre-bar{
  position:absolute; bottom:0; left:0; height:2px; width:0%;
  background:var(--grad-brand);
}
/* ---------- Text roll (preloader title) ----------
   Per-letter 3D flip: each character is two stacked, absolutely-positioned
   faces sharing one perspective box. "enter" starts flat/readable and rotates
   away; "exit" starts rotated away and rotates in — animated with a staggered
   delay between them (see rollifyText() in main.js), so the word plays as a
   left-to-right ripple rather than a plain fade. A third, invisible spacer
   copy of the glyph holds the correct inline width/spacing. */
.roll-char{
  position:relative; display:inline-block;
  perspective:300px; transform-style:preserve-3d;
}
.roll-face{
  position:absolute; inset:0; display:inline-block;
  backface-visibility:hidden;
}
.roll-face-enter{ transform-origin:50% 25%; }
.roll-face-exit{ transform-origin:50% 100%; }
.roll-spacer{ visibility:hidden; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Custom cursor dot (desktop only) ---------- */
.cursor-dot{
  position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--violet); pointer-events:none; z-index:9998; mix-blend-mode:difference;
  transform:translate(-50%,-50%); transition:width .3s var(--ease-out),height .3s var(--ease-out), background .3s;
  display:none;
}
@media (hover:hover) and (pointer:fine){ .cursor-dot{ display:block; } }
.cursor-dot.grow{ width:44px; height:44px; background:var(--sky); }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding-block:22px;
  mix-blend-mode:normal;
  transition:background .5s var(--ease-out), padding .4s var(--ease-out), border-color .5s;
  border-bottom:1px solid transparent;
}
/* Header content shares the exact same max-width + gutter as every section's
   .container, so the logo lines up with hero text and body content at every
   viewport width instead of hugging the raw edge. */
.site-header .container{ display:flex; align-items:center; justify-content:space-between; }
.site-header.solid{
  background:rgba(250,250,248,.86);
  backdrop-filter:blur(14px);
  border-color:var(--hairline);
  padding-block:14px;
}
body.dark-nav .site-header:not(.solid) .logo-img.logo-dark{ opacity:0; }
body.dark-nav .site-header:not(.solid) .logo-img.logo-light{ opacity:1; }
.logo-link{ position:relative; display:block; height:30px; width:150px; }
/* Scoped to the header's own logo-link — the footer reuses the .logo-img
   class too, but only for sizing, and must NOT inherit this absolute
   crossfade positioning (that bug pinned a stray footer logo to the
   document's top-left corner). */
.logo-link .logo-img{ position:absolute; inset:0; height:30px; width:auto; object-fit:contain; object-position:left center; transition:opacity .4s; }
.logo-link .logo-img.logo-light{ opacity:0; }
.logo-link .logo-img.logo-dark{ opacity:1; }
.site-header.solid .logo-link .logo-img.logo-dark{ opacity:1; }
.site-header.solid .logo-link .logo-img.logo-light{ opacity:0; }

.main-nav{ display:flex; align-items:center; gap:44px; }
.nav-links{ display:flex; gap:36px; }
.nav-links a{
  font-size:.92rem; font-weight:400; color:var(--ink); position:relative; padding:4px 0;
}
body.dark-nav .site-header:not(.solid) .nav-links a{ color:var(--white); }
body.dark-nav .site-header:not(.solid) .logo-link{ color:var(--white); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:currentColor; transition:width .4s var(--ease-out);
}
.nav-links a:hover::after{ width:100%; }
.nav-links a.active::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:20px; }
.hamburger{ display:none; flex-direction:column; gap:5px; width:26px; z-index:600; }
.hamburger span{ height:1.5px; width:100%; background:var(--ink); transition:transform .4s var(--ease-out), opacity .3s, background .3s; }
body.dark-nav .site-header:not(.solid) .hamburger span{ background:var(--white); }

.mobile-menu{
  position:fixed; inset:0; background:var(--ink); z-index:490;
  display:flex; flex-direction:column; justify-content:center; padding:0 32px;
  transform:translateY(-100%); transition:transform .6s var(--ease-out);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-size:2rem; color:var(--white); font-weight:400; display:block; padding:14px 0; border-bottom:1px solid var(--hairline-on-dark); }
.mobile-menu .btn{ margin-top:28px; }

/* ---------- Hero ---------- */
.hero{
  min-height:100svh; background:var(--ink); color:var(--white);
  display:flex; flex-direction:column; justify-content:space-between;
  padding-top:84px; padding-bottom:0; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 18% 20%, rgba(125,183,255,.20), transparent 55%),
    radial-gradient(circle at 82% 75%, rgba(161,78,191,.24), transparent 55%),
    var(--ink);
}
.hero-grid-overlay{
  position:absolute; inset:0; z-index:0; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 30%, black, transparent 75%);
}
/* Animated brand-color gradient wash — pure CSS keyframes on the compositor,
   so it drifts continuously regardless of any JS/rAF throttling. */
.hero-blob{ position:absolute; z-index:0; border-radius:50%; filter:blur(64px); opacity:.75; will-change:transform; }
.hero-blob-a{ width:50vw; height:50vw; max-width:680px; max-height:680px; top:-18%; left:-12%; background:radial-gradient(circle, var(--sky), transparent 68%); animation:blobDriftA 14s ease-in-out infinite; }
.hero-blob-b{ width:44vw; height:44vw; max-width:600px; max-height:600px; bottom:-22%; right:-10%; background:radial-gradient(circle, var(--violet), transparent 68%); animation:blobDriftB 17s ease-in-out infinite; }
@keyframes blobDriftA{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(12vw,9vh) scale(1.22); } }
@keyframes blobDriftB{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-10vw,-9vh) scale(1.25); } }

/* width:100% is load-bearing here: .hero-inner is both a flex item (of
   .hero, column direction) and a grid container, and a flex item with
   .container's auto inline margins doesn't stretch to fill the cross axis
   the way a normal block element would — it sizes to its own fit-content
   width first and only then centers that smaller box with the auto margins,
   pulling its right edge in from the shared page gutter used everywhere
   else (nav-cta, marquee, footer). Forcing width:100% makes it consume the
   full flex line before max-width/padding apply, matching every other
   .container on the site. */
.hero-inner{
  position:relative; z-index:2; flex:1; display:grid; width:100%;
  grid-template-columns:1.15fr .95fr; gap:56px; align-items:center;
  padding-block:16px;
}
.hero-text{ max-width:580px; }
/* Smaller than before (was clamp(2.3rem,4.6vw,4.2rem)) — the shorter tagline
   doesn't need the same visual weight, and it frees vertical room in the
   fold for the larger marquee logos below. */
/* Same size as .display-2 (every other section title on the site) — the
   hero heading shouldn't carry a bespoke larger scale of its own. */
.hero h1{ max-width:18ch; font-size:clamp(2.1rem, 4.4vw, 3.6rem); line-height:1.18; }
/* line-height 1.18 (not the shared 1.08) plus a touch of bottom padding on the
   reveal mask below — otherwise the overflow:hidden clip line lands right on
   top of descenders (the "g" in "Organizations") and shears them off. */
.hero h1 .line{ overflow:hidden; display:block; padding-bottom:0.14em; margin-bottom:-0.14em; }
/* opacity (not transform) hides this by default — GSAP's yPercent tween
   parses any pre-existing CSS `transform` into its own pixel baseline and
   composes yPercent on TOP of it, so a CSS translateY default here made the
   text travel twice as far and never return to a visible position. Opacity
   doesn't have that composition problem. */
.hero h1 .line span{ display:inline-block; will-change:transform; opacity:0; }
.hero-sub{ margin-top:20px; max-width:480px; font-size:clamp(1rem,1.2vw,1.1rem); color:rgba(255,255,255,.72); font-weight:300; }
.hero-ctas{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }
/* Default-hidden state so the preloader's slide-away can never reveal a
   flash of fully-visible, un-animated hero content before JS takes over. */
.hero-sub, .hero-ctas{ opacity:0; }
.hero-image-grid .collage-tile{ opacity:0; }

/* Non-overlapping image grid — lives in its own column, never crosses into
   the text. Capped narrower than the column (was a flat 100%-width fill) and
   given a bigger gap, so the tiles read as a smaller, more deliberate collage
   with real negative space around them instead of crowding the whole column. */
/* Right-flush (not centered) — its right edge must land on the same gutter
   line as everything else on the page (nav-cta, marquee, footer). Centering
   it with margin-inline:auto decoupled it from that shared edge and made it
   float independently in the middle of its column instead. The negative
   space from shrinking it now sits on the left, next to the text column. */
.hero-image-grid{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:22px;
  max-width:400px; justify-self:end; height:auto; align-content:center;
}
.collage-tile{
  position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.1); will-change:transform;
}
.collage-tile img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05); }
.collage-tile .tile-scrim{ position:absolute; inset:auto 0 0 0; height:50%; background:linear-gradient(0deg, rgba(10,14,14,.82), transparent); }
.collage-tile .tile-label{ position:absolute; left:14px; bottom:12px; z-index:2; color:rgba(255,255,255,.92); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; font-weight:500; }
.hero-image-grid .ct-2{ margin-top:34px; }
.hero-image-grid .ct-3{ margin-top:-34px; }
.hero-image-grid .ct-4{ margin-top:16px; }
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; gap:32px; }
  .hero-image-grid{ grid-template-columns:1fr 1fr; height:auto; }
  .hero-image-grid .collage-tile{ margin-top:0 !important; }
}
@media (max-width:560px){ .hero-image-grid{ display:none; } }

.hero-marquee-wrap{ position:relative; z-index:2; }
.hero .marquee-band{ padding-block:12px; }

/* ---------- Placeholder image tiles ---------- */
.ph{
  position:relative; width:100%; height:100%;
  background:
    linear-gradient(135deg, rgba(125,183,255,.55), rgba(161,78,191,.55)),
    linear-gradient(150deg, #223131 0%, #1a2424 60%, #263636 100%);
  display:flex; align-items:flex-end; justify-content:flex-start; padding:14px;
  overflow:hidden;
}
.ph::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle at 20% 20%, rgba(255,255,255,.16), transparent 40%);
}
.ph::after{
  content:''; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:18px 18px;
}
.ph span{
  position:relative; z-index:1; color:rgba(255,255,255,.85);
  font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; font-weight:500;
}
.ph.tone-b{ background:linear-gradient(135deg, rgba(161,78,191,.55), rgba(125,183,255,.5)), linear-gradient(150deg,#1c2b30,#26201f); }
.ph.tone-c{ background:linear-gradient(135deg, rgba(125,183,255,.4), rgba(161,78,191,.65)), linear-gradient(150deg,#20242c,#2a1f2c); }

/* ---------- Marquee ----------
   Always solid white, regardless of the section it sits in (e.g. inside
   the dark hero) — logos need clean, consistent contrast to read well. */
.marquee-band{ border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); background:#FFFFFF; padding-block:20px; overflow:hidden; }
.marquee-track{ display:flex; width:max-content; gap:56px; align-items:center; animation:marquee 32s linear infinite; }
.marquee-track.reverse{ animation-direction:reverse; animation-duration:38s; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.marquee-item{ display:flex; align-items:center; gap:56px; }
.client-chip{
  display:flex; align-items:center; gap:12px; font-size:1.02rem; font-weight:400; color:var(--ink-soft);
  white-space:nowrap; letter-spacing:-.01em; opacity:.8; transition:opacity .4s;
}
.client-chip:hover{ opacity:1; }
.client-chip .logo-mark{ height:32px; width:auto; max-width:76px; object-fit:contain; flex-shrink:0; }

/* ---------- Section label row ---------- */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:56px; flex-wrap:wrap; }
.section-head .display-2{ max-width:20ch; }

/* ---------- Why / Philosophy (fixed 2x2 grid around a central quote) ---------- */
.why-section{ padding-block:var(--section-pad-y); background:var(--bg); }
/* Deliberate grid, not scattered: one card per corner, quote spanning the
   middle row. Each corner class only sets which corner it anchors to —
   the grid itself does the positioning, so nothing depends on randomized
   margins lining up. */
.why-grid{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:28px 40px; max-width:960px; margin-inline:auto; padding-block:20px;
}
.scatter-card{
  background:var(--white); border:1px solid var(--hairline); border-radius:var(--radius-md);
  padding:18px 22px; display:inline-flex; align-items:center; gap:14px; box-shadow:0 8px 30px -14px rgba(31,43,43,.12);
  position:relative; font-size:.98rem; color:var(--ink-2); max-width:290px;
}
.scatter-card .ico{ width:36px; height:36px; border-radius:11px; background:var(--grad-brand); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; padding:7px; box-shadow:0 6px 16px -6px rgba(161,78,191,.5); }
.scatter-card .ico svg{ width:100%; height:100%; display:block; }
.wc-tl, .wc-bl{ justify-self:start; }
.wc-tr, .wc-br{ justify-self:end; }
.why-statement{ grid-column:1 / -1; text-align:center; margin-block:8px; }
.why-statement p{ font-size:clamp(1.6rem,3.4vw,2.6rem); font-weight:400; letter-spacing:-0.015em; line-height:1.2; color:var(--ink); }
@media (max-width:720px){
  .why-grid{ grid-template-columns:1fr; gap:20px; }
  .wc-tl, .wc-tr, .wc-bl, .wc-br{ justify-self:center; max-width:100%; }
}

/* Continuous idle float — added only once the entrance tween has finished
   (see main.js), so the two never fight over the transform property. */
@keyframes cardFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-11px); } }
.why-card.floating{ animation:cardFloat 4.6s ease-in-out infinite; }
.why-card.floating:nth-of-type(2){ animation-duration:5.4s; animation-delay:-1.1s; }
.why-card.floating:nth-of-type(3){ animation-duration:4.1s; animation-delay:-2.4s; }
.why-card.floating:nth-of-type(4){ animation-duration:5.9s; animation-delay:-.6s; }
@media (prefers-reduced-motion:reduce){ .why-card.floating{ animation:none; } }

/* ---------- What we do cards ---------- */
.cards-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.what-card{
  display:block; background:var(--white); border:1px solid var(--hairline); border-radius:var(--radius-md);
  padding:34px 26px; text-decoration:none; color:inherit;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s;
}
.what-card:hover{ transform:translateY(-6px) scale(1.015); box-shadow:0 24px 50px -20px rgba(31,43,43,.18); border-color:transparent; }
.what-icon{ width:46px; height:46px; margin-bottom:24px; transition:transform .5s var(--ease-out); }
.what-icon img{ width:100%; height:100%; display:block; }
.what-card:hover .what-icon{ transform:scale(1.1) rotate(-4deg); }
.what-card h3{ font-size:1.18rem; margin-bottom:12px; }
.what-card p{ color:var(--body); font-size:.92rem; font-weight:300; line-height:1.55; }
@media (max-width:1080px){ .cards-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .cards-grid{ grid-template-columns:1fr;} }

/* ---------- Services detail page (services.html) ----------
   The top of the page reuses the homepage's exact 4-bucket .cards-grid/
   .what-card component (each card now an anchor down to its own section
   below) so clicking "See all services" on the homepage lands somewhere
   that visually continues the same four cards, not a different 6-tab
   layout. Each bucket then gets one full-width templated section:
   icon + heading + lede, a sub-offerings list, and a small case-study rail. */
.service-detail{ padding-block:var(--section-pad-y); border-top:1px solid var(--hairline); }
/* No divider under the page heading, only between the service sections. */
section:not(.service-detail) + .service-detail{ border-top:none; }
.service-detail-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; }
/* Same bare icon treatment as .what-icon on the homepage cards above —
   a continuation of the same graphic, not a re-skinned tile. */
.service-detail-icon{ width:52px; height:52px; margin-bottom:22px; }
.service-detail-icon img{ width:100%; height:100%; display:block; }
.service-detail h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:400; letter-spacing:-.015em; line-height:1.2; margin-bottom:14px; }
.service-detail .lede{ color:var(--body); font-size:1rem; font-weight:300; line-height:1.65; }
.service-detail-cta{ margin-top:22px; display:inline-flex; align-items:center; gap:6px; font-size:.88rem; font-weight:500; color:var(--violet-deep); }
.service-offerings-label{ font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:16px; }
.service-offerings{ display:grid; grid-template-columns:1fr 1fr; gap:4px 24px; margin-bottom:36px; }
.service-offerings li{ font-size:.92rem; color:var(--ink-soft); padding-left:18px; position:relative; padding-block:7px; }
.service-offerings li::before{ content:''; position:absolute; left:0; top:16px; width:6px; height:6px; border-radius:50%; background:var(--sky); }
.service-mini-cases-label{ font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:14px; }
.mini-case-row{ display:flex; gap:14px; flex-wrap:wrap; }
.mini-case-card{
  display:flex; align-items:center; gap:12px; width:270px; padding:10px;
  border:1px solid var(--hairline); border-radius:var(--radius-md);
  transition:border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.mini-case-card:hover{ border-color:var(--violet); transform:translateY(-3px); }
.mini-case-thumb{ width:60px; height:60px; border-radius:10px; overflow:hidden; flex-shrink:0; }
.mini-case-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mini-case-info h5{ font-size:.85rem; font-weight:500; line-height:1.32; margin-bottom:3px; }
.mini-case-info span{ font-size:.72rem; color:var(--muted); }
@media (max-width:860px){
  .service-detail-grid{ grid-template-columns:1fr; gap:28px; }
  .service-offerings{ grid-template-columns:1fr; }
}

/* ---------- Founder note ---------- */
.founder-section{ background:var(--ink); color:var(--white); padding-block:var(--section-pad-y); overflow:hidden; }
.founder-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; }
.founder-photo-wrap{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; }
/* Overscan so the parallax translate never reveals a gap at top/bottom. */
.parallax-img{ width:100%; height:120% !important; margin-top:-10%; object-fit:cover; display:block; }
.founder-note-heading{ font-size:clamp(1.4rem,2.6vw,2.05rem); font-weight:400; line-height:1.3; letter-spacing:-.01em; }
.founder-note-text{ margin-top:18px; font-size:1rem; font-weight:300; line-height:1.7; color:rgba(255,255,255,.72); max-width:52ch; }
.founder-meta{ margin-top:28px; display:flex; align-items:center; gap:16px; }
.founder-meta .name{ font-weight:500; }
.founder-meta .role{ color:rgba(255,255,255,.55); font-size:.88rem; }
.founder-meta .exp-line{ color:var(--sky); font-size:.82rem; margin-top:4px; }
.founder-cta-row{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
@media (max-width:860px){ .founder-grid{ grid-template-columns:1fr; } }

/* ---------- Work preview cards ----------
   Image and text are fully separate: photo lives in its own media block,
   copy lives in a plain card body underneath — never overlaid on the image. */
.work-preview-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.work-card{
  border-radius:var(--radius-lg); overflow:hidden; position:relative;
  border:1px solid var(--hairline); background:var(--white); display:flex; flex-direction:column;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.work-card:hover{ transform:translateY(-6px); box-shadow:0 26px 56px -24px rgba(31,43,43,.2); }
.work-card .card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.work-card .card-media .ph, .work-card .card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease-out); }
.work-card:hover .card-media .ph, .work-card:hover .card-media img{ transform:scale(1.06); }
.work-card .arrow-cta{ position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.85); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:2; transition:background .4s, transform .4s var(--ease-out); }
.work-card:hover .arrow-cta{ background:var(--ink); transform:rotate(45deg); }
.work-card:hover .arrow-cta svg{ stroke:var(--white); }
.work-card .arrow-cta svg{ width:16px; height:16px; stroke:var(--ink); transition:stroke .3s; }
.work-card-info{ padding:24px; flex:1; display:flex; flex-direction:column; }
.work-card .client-mark{
  width:44px; height:44px; border-radius:10px; background:var(--white); border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center; padding:7px;
  margin-bottom:14px;
}
.work-card .client-mark img{ width:100%; height:100%; object-fit:contain; }
.work-card .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.work-card .tag{ font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:var(--radius-pill); background:var(--bg-alt); color:var(--ink-2); }
.work-card h3{ font-size:1.32rem; font-weight:500; letter-spacing:-.015em; line-height:1.16; color:var(--ink); }
.work-card .role-line{ font-size:.85rem; color:var(--body); margin-top:8px; font-weight:300; line-height:1.5; }
@media (max-width:980px){ .work-preview-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .work-preview-grid{ grid-template-columns:1fr; } }

/* ---------- Scroll-choreography video section ---------- */
/* Four session photos sit in a clean grid on a plain white section. As you
   scroll, they lift slightly (parallax), then the grid dissolves into a
   full-bleed cinematic "video" moment with an ambient looping canvas. */
.choreo-section{ position:relative; height:230vh; background:var(--bg); }
.choreo-pin{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding-block:80px;
}
.choreo-eyebrow-row{ position:relative; z-index:5; text-align:center; margin-bottom:36px; }
.choreo-grid{
  position:relative; z-index:5; display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  max-width:1120px; width:100%; padding-inline:var(--gutter);
}
.choreo-tile{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:3/4;
  box-shadow:0 20px 46px -20px rgba(31,43,43,.22); border:1px solid var(--hairline); will-change:transform,opacity;
  transform-origin:center center;
}
.choreo-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.choreo-tile.is-hero{ z-index:30; }
.choreo-grid > :nth-child(2){ margin-top:32px; }
.choreo-grid > :nth-child(3){ margin-top:-26px; }
.choreo-grid > :nth-child(4){ margin-top:14px; }
@media (max-width:760px){ .choreo-grid{ grid-template-columns:1fr 1fr; } .choreo-grid > *{ margin-top:0 !important; } }

/* The video takes over full-bleed once the hero tile finishes expanding —
   no text overlay per request, the footage speaks for itself. */
.choreo-video-layer{ position:absolute; inset:0; z-index:20; opacity:0; pointer-events:none; background:var(--ink); }
.choreo-video{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--ink); color:#fff; padding-block:clamp(40px, 5vw, 64px); text-align:center; position:relative; overflow:hidden; }
.cta-band::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(125,183,255,.22), transparent 50%), radial-gradient(circle at 75% 80%, rgba(161,78,191,.26), transparent 50%);
}
.cta-band .cta-orb{ position:absolute; border-radius:50%; filter:blur(60px); z-index:1; will-change:transform; }
.cta-band .cta-orb-1{ width:34vw; height:34vw; max-width:420px; max-height:420px; top:-16%; left:-8%; background:radial-gradient(circle, rgba(125,183,255,.35), transparent 70%); animation:blobDriftA 20s ease-in-out infinite; }
.cta-band .cta-orb-2{ width:30vw; height:30vw; max-width:380px; max-height:380px; bottom:-18%; right:-6%; background:radial-gradient(circle, rgba(161,78,191,.4), transparent 70%); animation:blobDriftB 24s ease-in-out infinite; }
.cta-band .inner{ position:relative; z-index:2; max-width:820px; margin-inline:auto; }
.cta-band h2{ font-size:clamp(1.5rem,2.8vw,2.25rem); font-weight:500; letter-spacing:-.015em; line-height:1.18; }
.cta-band .lede{ margin-inline:auto; color:rgba(255,255,255,.68); margin-top:10px; font-size:.95rem; max-width:480px; }
.cta-band .cta-row{ display:flex; gap:14px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.cta-band .btn-primary{ background:var(--white); color:var(--ink); }
.cta-band .btn-primary:hover{ background:var(--sky); color:var(--ink); }
.cta-band .btn{ padding:12px 24px; font-size:.88rem; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.75); padding-top:80px; }
.footer-top{ display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:40px; padding-bottom:60px; border-bottom:1px solid var(--hairline-on-dark); }
.footer-brand .logo-img{ height:28px; width:auto; margin-bottom:18px; }
.footer-brand p{ max-width:280px; font-size:.9rem; font-weight:300; color:rgba(255,255,255,.55); }
.footer-col h4{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.4); font-weight:500; margin-bottom:18px; }
.footer-col a, .footer-col p{ display:block; font-size:.92rem; color:rgba(255,255,255,.72); margin-bottom:12px; transition:color .3s; }
.footer-col a:hover{ color:var(--sky); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-block:26px; font-size:.8rem; color:rgba(255,255,255,.4); flex-wrap:wrap; gap:12px; }
.footer-social{ display:flex; gap:16px; }
@media (max-width:860px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }

/* ---------- Reveal utility (GSAP targets) ---------- */
.reveal{ opacity:0; transform:translateY(36px); }
.reveal-scale{ opacity:0; transform:scale(.94); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ padding:200px var(--gutter) 90px; background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.page-hero::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 10%, rgba(125,183,255,.18), transparent 50%), radial-gradient(circle at 85% 90%, rgba(161,78,191,.22), transparent 50%); }
.page-hero .inner{ position:relative; z-index:2; max-width:var(--container); margin-inline:auto; }
.page-hero h1{ font-size:clamp(2.4rem,5.4vw,4.4rem); max-width:16ch; }
.page-hero .lede{ color:rgba(255,255,255,.68); margin-top:20px; }
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:.82rem; color:rgba(255,255,255,.5); margin-bottom:22px; }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0 !important; }
.text-center{ text-align:center; }
.flex{ display:flex; }
.gap-12{ gap:12px; }
.pill-tag{ font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; padding:6px 14px; border-radius:var(--radius-pill); background:var(--bg-alt); color:var(--ink-2); font-weight:500; }

@media (max-width:860px){
  .main-nav .nav-links{ display:none; }
  .nav-cta .btn{ display:none; }
  .hamburger{ display:flex; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* ---------- About hero (merged hero + overview + vision) ---------- */
.about-hero{
  min-height:82vh; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:150px var(--gutter) 72px; position:relative; overflow:hidden;
}
.about-hero .hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 22% 25%, rgba(125,183,255,.2), transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(161,78,191,.24), transparent 55%),
    var(--ink);
}
.about-hero .inner{ position:relative; z-index:2; max-width:840px; margin-inline:auto; }
.about-hero .eyebrow{ justify-content:center; }
.about-hero h1{ font-size:clamp(2.1rem,4.4vw,3.5rem); font-weight:400; letter-spacing:-.02em; line-height:1.2; }
.about-hero .lede{ margin-inline:auto; margin-top:22px; color:rgba(255,255,255,.7); }
/* Three equal-width columns (grid, not flex-auto) so every item claims the
   same width regardless of label length — that's what lets the labels wrap
   consistently instead of each stat sizing itself to its own content. */
.about-hero .stats-row{
  display:grid; grid-template-columns:repeat(2, 1fr);
  margin-top:48px; max-width:520px; margin-inline:auto; gap:0;
}
.about-hero .stat-item{
  background:none !important; border:none !important; border-right:1px solid rgba(255,255,255,.16) !important;
  border-radius:0 !important; padding:0 18px !important; text-align:center;
}
.about-hero .stat-item:last-child{ border-right:none !important; }
/* Locked to genuinely two lines on every item: max-width forces even the
   shortest label to actually wrap (not just reserve empty space), while
   line-clamp caps the longest at two lines rather than running to three. */
.about-hero .stat-item .stat-label{
  max-width:150px; margin-inline:auto; line-height:1.3em;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
@media (max-width:640px){
  .about-hero .stats-row{ grid-template-columns:1fr; max-width:280px; }
  .about-hero .stat-item{ padding:0 0 20px !important; border-right:none !important; border-bottom:1px solid rgba(255,255,255,.16) !important; }
  .about-hero .stat-item:last-child{ border-bottom:none !important; padding-bottom:0 !important; }
}
.about-hero .btn{ margin-top:40px; }
/* Default-hidden (opacity, not transform — see the hero h1 note above for
   why) so the entrance sequence in main.js never flashes visible first.
   The preloader curtain's own exit is an 0.8s slide (not an instant
   display:none), so it progressively uncovers the hero *before*
   runEntrance()'s JS ever runs — anything without a CSS-level default here
   is briefly visible mid-slide, ahead of schedule. Scoped to .stat-item
   (the children JS actually animates) rather than .stats-row itself:
   the row's own opacity is never touched by JS, so defaulting the row
   would leave it invisible forever (a parent's opacity multiplies down
   over its whole subtree) — that was the earlier "numbers are missing" bug. */
.about-hero .eyebrow, .about-hero h1, .about-hero .lede, .about-hero .btn, .about-hero .stat-item{ opacity:0; }
.about-hero .stat-item .stat-label{ color:rgba(255,255,255,.6); }

/* ---------- Founder story: sticky photo-stack ----------
   Image column sits on the left (via order, DOM keeps text first for
   reading order/a11y), text scrolls on the right. The pinned stack holds
   three photos as physical-feeling stacked prints; as each of the three
   text blocks comes into view, that image shuffles to the front while the
   other two settle behind at a rotated offset (see main.js). */
.founder-story-split{ display:grid; grid-template-columns:.95fr 1.05fr; gap:64px; padding-block:var(--section-pad-y); align-items:start; }
.story-block{ margin-bottom:60px; }
.story-block:last-child{ margin-bottom:0; }
.story-block .eyebrow{ margin-bottom:10px; }
.story-block h3{ font-size:1.5rem; margin-bottom:18px; }
.story-block p{ color:var(--body); font-weight:300; font-size:1.02rem; line-height:1.75; margin-bottom:20px; }
.story-block .pull-quote{ font-size:1.3rem; font-weight:400; color:var(--ink); margin-block:28px; padding-left:22px; border-left:2px solid var(--sky); }
.story-block .about-timeline{ margin-bottom:36px; }
.founder-story-sticky{ position:sticky; top:140px; order:-1; padding:30px 10px; }
.story-image-stack{ position:relative; aspect-ratio:4/5; max-width:400px; margin-inline:auto; }
.stack-card{
  position:absolute; inset:0; border-radius:var(--radius-md); overflow:hidden;
  border:7px solid var(--white); box-shadow:0 26px 50px -18px rgba(31,43,43,.35);
  transition:transform .85s var(--ease-out), box-shadow .85s var(--ease-out); will-change:transform;
}
.stack-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.stack-card[data-depth="0"]{ transform:rotate(0deg) translate(0,0) scale(1); z-index:3; box-shadow:0 30px 60px -18px rgba(31,43,43,.4); }
.stack-card[data-depth="1"]{ transform:rotate(-7deg) translate(-22px,14px) scale(.96); z-index:2; }
.stack-card[data-depth="2"]{ transform:rotate(6deg) translate(20px,20px) scale(.94); z-index:1; }
@media (max-width:900px){
  .founder-story-split{ grid-template-columns:1fr; gap:8px; }
  .founder-story-sticky{ position:relative; top:0; order:0; }
  .story-image-stack{ max-width:320px; }
}

/* ---------- LinkedIn: one line — narrower text left, squarish card right ---------- */
/* Constrained to a max-width (not the full 1280px container) and
   left-justified with a fixed gap — space-between across the whole
   container was stretching the text and card to opposite edges, leaving a
   large dead gap between them. */
/* Framed banner instead of two elements floating loose in the container —
   same heading + card content as before, just contained in one cohesive
   panel that fills the section's width properly instead of leaving a
   huge dead zone to the right of a left-aligned, width-capped row.
   Sits inside a plain .container (not on it) so its own internal padding
   never fights the page's standard padding-inline:gutter alignment — the
   banner's outer edges land exactly where every other section's text and
   the header logo do, and the clamp() below is purely the pad *inside*
   the banner around the heading/card, not the page margin. */
.linkedin-row{
  display:flex; align-items:center; justify-content:center; gap:clamp(32px, 5vw, 72px); flex-wrap:wrap;
  background:linear-gradient(135deg, rgba(125,183,255,.12), rgba(161,78,191,.1));
  border:1px solid var(--hairline); border-radius:var(--radius-lg);
  padding:clamp(36px, 5vw, 64px);
}
.linkedin-text{ flex:0 1 auto; text-align:center; align-self:center; }
.linkedin-text .lede{ margin-top:12px; font-size:.95rem; }
.linkedin-card-square{
  display:flex; flex-direction:column; gap:6px;
  background:var(--white); border:1px solid var(--hairline); border-radius:var(--radius-lg);
  padding:32px; width:320px; min-height:220px; flex-shrink:0;
  box-shadow:0 20px 50px -24px rgba(31,43,43,.18);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.linkedin-card-square:hover{ transform:translateY(-6px); box-shadow:0 28px 60px -24px rgba(31,43,43,.24); }
.linkedin-card-square .li-icon{ width:48px; height:48px; border-radius:14px; background:#0A66C2; display:flex; align-items:center; justify-content:center; }
.linkedin-card-square .li-icon svg{ width:26px; height:26px; fill:#fff; }
.linkedin-card-square h4{ font-size:1.2rem; font-weight:500; margin-top:20px; }
.linkedin-card-square p{ color:var(--body); font-size:.9rem; font-weight:300; }
.linkedin-card-square .li-cta{ margin-top:14px; font-size:.86rem; font-weight:500; color:var(--violet-deep); }
@media (max-width:760px){ .linkedin-row{ flex-direction:column; align-items:flex-start; padding:36px 28px; } .linkedin-card-square{ width:100%; max-width:none; } }
.about-split{ display:grid; grid-template-columns:.8fr 1.2fr; gap:72px; padding-block:var(--section-pad-y); align-items:flex-start; }
.about-sticky{ position:sticky; top:120px; }
.about-photo{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; margin-bottom:28px; }
.about-photo img{ width:100%; height:100%; object-fit:cover; display:block; } /* plain cover, no parallax — this sits inside a position:sticky ancestor where scroll-linked parallax risks jumpy behavior */
.about-timeline{ display:flex; flex-direction:column; gap:0; margin-top:8px; }
.tl-item{ display:flex; gap:16px; padding-block:16px; border-top:1px solid var(--hairline); }
.tl-item:first-child{ border-top:none; }
.tl-item .yr{ font-size:.8rem; color:var(--muted); min-width:76px; font-weight:500; }
.tl-item .what{ font-size:.92rem; color:var(--ink-2); }
.about-narrative .callout{
  background:var(--bg-alt); border-left:2px solid var(--violet); border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:30px 32px; font-size:1.15rem; font-weight:300; line-height:1.6; margin-bottom:56px;
}
.about-narrative h3{ font-size:1.5rem; margin-bottom:18px; margin-top:44px; }
.about-narrative p{ color:var(--body); font-weight:300; font-size:1.02rem; line-height:1.75; margin-bottom:20px; }
.about-narrative .pull-quote{ font-size:1.3rem; font-weight:400; color:var(--ink); margin-block:28px; padding-left:22px; border-left:2px solid var(--sky); }
.pillars-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; }
.pillar{ background:var(--white); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:26px; }
.pillar .ico{ width:40px; height:40px; margin-bottom:16px; transition:transform .5s var(--ease-out); }
.pillar .ico img{ width:100%; height:100%; display:block; }
.pillar:hover .ico{ transform:scale(1.1) rotate(-4deg); }
.pillar h4{ font-size:1.02rem; margin-bottom:8px; }
.pillar p{ font-size:.86rem; color:var(--body); font-weight:300; line-height:1.5; }
@media (max-width:900px){ .about-split{ grid-template-columns:1fr; gap:40px; } .about-sticky{ position:relative; top:0; } .pillars-grid{ grid-template-columns:1fr; } }

/* ---------- Overview (intro + stats) ---------- */
.overview-section{ padding-block:var(--section-pad-y); background:var(--bg); }
.overview-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.overview-grid .lede{ max-width:none; }
.stats-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.stat-item{ background:var(--white); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:24px 22px; }
.stat-item .stat-num{ font-size:clamp(1.8rem,3vw,2.4rem); font-weight:400; letter-spacing:-.02em; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-item .stat-label{ font-size:.82rem; color:var(--body); font-weight:300; margin-top:6px; line-height:1.4; }
@media (max-width:860px){ .overview-grid{ grid-template-columns:1fr; gap:36px; } }

/* ---------- Vision (bold dark statement) ---------- */
.vision-section{ background:var(--ink); color:#fff; padding-block:var(--section-pad-y); text-align:center; position:relative; overflow:hidden; }
.vision-section::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 25% 30%, rgba(125,183,255,.2), transparent 55%), radial-gradient(circle at 78% 70%, rgba(161,78,191,.24), transparent 55%);
}
.vision-section .inner{ position:relative; z-index:2; max-width:900px; margin-inline:auto; }
.vision-section .eyebrow{ justify-content:center; }
.vision-statement{ font-size:clamp(1.7rem,3.6vw,2.9rem); font-weight:400; letter-spacing:-.015em; line-height:1.25; }
.vision-section .lede{ margin-inline:auto; margin-top:24px; color:rgba(255,255,255,.68); }

/* ---------- Sticky masonry work gallery ----------
   3-column CSS grid: left & right columns scroll normally (5 images each,
   taller than the viewport), the middle column is position:sticky and
   stays pinned to the viewport while they scroll past it — a pure-CSS
   take on the requested "sticky scroll gallery" pattern, no JS required. */
.work-gallery-section{ background:var(--ink); padding-block:80px 0; }
.work-gallery-head{ text-align:center; color:#fff; padding-bottom:56px; max-width:640px; margin-inline:auto; }
.work-gallery-head .eyebrow{ justify-content:center; }
.work-gallery-head .lede{ margin-inline:auto; color:rgba(255,255,255,.65); }
.work-gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding-inline:10px; padding-bottom:10px; }
/* Photos fill their rows (absolutely-positioned img) and each side column's rows
   stretch evenly, so a column with fewer photos ends flush with a taller one
   instead of leaving dark gaps between photos. */
.wg-col{ display:grid; gap:10px; align-content:stretch; grid-auto-rows:minmax(380px, 1fr); }
.wg-col figure{ position:relative; margin:0; min-height:0; border-radius:var(--radius-md); overflow:hidden; }
.wg-col img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.wg-col-sticky{ position:sticky; top:0; height:100vh; grid-template-rows:repeat(4,1fr); }

/* ---------- Full-bleed impact banner ---------- */
.impact-banner{ position:relative; height:64vh; min-height:420px; overflow:hidden; }
.impact-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.impact-banner .impact-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,14,14,.85), rgba(10,14,14,.05) 55%); }
.impact-caption{ position:absolute; left:0; right:0; bottom:0; padding:44px var(--gutter); color:#fff; }
.impact-caption p{ font-size:clamp(1.2rem,2.2vw,1.7rem); font-weight:400; max-width:34ch; letter-spacing:-.01em; }

/* ---------- Founder gallery ---------- */
.founder-gallery-section{ padding-block:var(--section-pad-y); background:var(--bg-alt); }
.founder-gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.founder-gallery-grid .g-tile{ border-radius:var(--radius-md); overflow:hidden; aspect-ratio:3/4; border:1px solid var(--hairline); }
.founder-gallery-grid .g-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease-out); }
.founder-gallery-grid .g-tile:hover img{ transform:scale(1.06); }
.founder-gallery-grid .g-tile:nth-child(2){ margin-top:26px; }
.founder-gallery-grid .g-tile:nth-child(4){ margin-top:-18px; }
@media (max-width:860px){ .founder-gallery-grid{ grid-template-columns:1fr 1fr; } .founder-gallery-grid .g-tile{ margin-top:0 !important; } }

/* ---------- LinkedIn section ---------- */
.linkedin-section{ padding-block:var(--section-pad-y); background:var(--bg); }
.linkedin-grid{ display:grid; grid-template-columns:1fr .8fr; gap:48px; align-items:center; }
.linkedin-card{
  background:var(--white); border:1px solid var(--hairline); border-radius:var(--radius-lg);
  padding:36px; display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  box-shadow:0 20px 50px -24px rgba(31,43,43,.18);
}
.linkedin-card .li-icon{ width:44px; height:44px; border-radius:12px; background:#0A66C2; display:flex; align-items:center; justify-content:center; }
.linkedin-card .li-icon svg{ width:24px; height:24px; fill:#fff; }
.linkedin-card h4{ font-size:1.2rem; font-weight:500; }
.linkedin-card p{ color:var(--body); font-size:.92rem; font-weight:300; line-height:1.6; }
.linkedin-badge-wrap{ min-height:200px; display:flex; align-items:center; justify-content:center; width:100%; }
@media (max-width:860px){ .linkedin-grid{ grid-template-columns:1fr; } }

/* ============================================================
   SERVICES PAGE — jump nav
   ============================================================ */
.services-jumpnav{ position:sticky; top:76px; z-index:50; background:rgba(250,250,248,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--hairline); }
.services-jumpnav .container{ display:flex; gap:28px; overflow-x:auto; padding-block:16px; scrollbar-width:none; }
.services-jumpnav .container::-webkit-scrollbar{ display:none; }
.services-jumpnav a{ font-size:.86rem; white-space:nowrap; color:var(--muted); position:relative; padding-bottom:4px; transition:color .3s; }
.services-jumpnav a:hover, .services-jumpnav a.active{ color:var(--ink); }
.services-jumpnav a.active::after{ content:''; position:absolute; left:0; bottom:-17px; height:2px; width:100%; background:var(--violet); }

/* ============================================================
   WORK / CASE STUDIES PAGE
   ============================================================ */
.filter-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:52px; }
.filter-tab{
  padding:11px 22px; border-radius:var(--radius-pill); border:1px solid var(--hairline); font-size:.86rem;
  color:var(--ink-soft); transition:all .4s var(--ease-out);
}
.filter-tab.active, .filter-tab:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

@keyframes fadein{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

/* Case study index (Work page) and "more case studies" (detail pages) both
   reuse .work-card/.work-preview-grid from the homepage — see below. */

/* ---------- Case study detail page (case-study-*.html) ---------- */
.case-hero{ padding-top:180px; background:var(--ink); color:#fff; position:relative; }
.case-hero::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 18% 8%, rgba(125,183,255,.2), transparent 50%), radial-gradient(circle at 88% 92%, rgba(161,78,191,.24), transparent 50%); }
/* Same box formula as .container/.case-section site-wide: max-width box +
   padding-inline:var(--gutter) INSIDE that box. .case-hero itself carries no
   inline padding (previous version applied gutter as padding on the
   full-bleed section, then re-centered a max-width inner box inside that —
   a different formula that landed ~64px left of the header logo/nav). */
.case-hero .inner{ position:relative; z-index:2; max-width:var(--container); padding-inline:var(--gutter); margin-inline:auto; padding-bottom:60px; }
/* Client logo sits directly above the headline, in the left column. */
.case-hero-headline .case-client-mark{
  width:44px; height:44px; border-radius:12px; background:var(--white); border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; padding:7px; margin-bottom:18px;
}
.case-client-mark img{ width:100%; height:100%; object-fit:contain; }
.case-crumb{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.76rem; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:12px; }
.case-crumb a{ color:rgba(255,255,255,.5); transition:color .3s; }
.case-crumb a:hover{ color:#fff; }
.case-hero h1{ font-size:clamp(2rem,4.2vw,3.4rem); font-weight:400; letter-spacing:-.02em; line-height:1.15; }
.case-hero .lede{ color:rgba(255,255,255,.68); margin-top:14px; font-size:1.08rem; }
/* Hero splits into headline+logo+lede (left) / metadata (right) — both
   columns sit inside .case-hero .inner, which is already edge-aligned with
   the header's logo (left) and nav (right) via the shared .container
   formula: same max-width/margin-inline:auto/padding-inline:var(--gutter)
   used by .container site-wide, so the edges are never independently set —
   there is only one formula for "inset from the viewport" on this whole site. */
.case-hero-split{ display:grid; grid-template-columns:1.6fr .8fr; gap:56px; align-items:start; margin-top:10px; }
.case-hero-headline{ order:1; }
.case-hero-meta{ order:2; padding-top:6px; }
.case-hero-meta .m-item{ margin-bottom:20px; }
.case-hero-meta .m-item:last-child{ margin-bottom:0; }
.case-hero-meta .k{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:6px; }
.case-hero-meta .v{ font-size:.9rem; color:rgba(255,255,255,.75); font-weight:300; line-height:1.5; }
@media (max-width:860px){
  .case-hero-split{ grid-template-columns:1fr; gap:28px; }
  .case-hero-meta{ order:2; }
  .case-hero-headline{ order:1; }
}
/* Same box formula as .case-hero .inner above, so the image's edges line up
   exactly with the crumb/h1/lede and the header's logo/nav. */
.case-hero-image-wrap{ max-width:var(--container); padding-inline:var(--gutter); margin-inline:auto; }
/* Rounded on top only — the image sits like a card peeking out of the dark
   hero band above, then runs flush into the section below it. */
.case-hero-image{ border-radius:var(--radius-lg) var(--radius-lg) 0 0; overflow:hidden; aspect-ratio:21/9; margin-top:56px; }
.case-hero-image img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Same max-width/margin/padding formula as .case-hero .inner (and .container
   site-wide) so every section's left/right edges line up exactly with the
   crumb/h1 above and the header's logo/nav, instead of centering itself as
   an independent narrower column. */
.case-section{ padding-block:var(--section-pad-y); padding-inline:var(--gutter); max-width:var(--container); margin-inline:auto; }
.case-section:first-of-type{ padding-top:0; }
.case-eyebrow-row{ display:flex; align-items:baseline; gap:14px; margin-bottom:22px; }
.case-eyebrow-row .step-no{ font-size:.76rem; color:var(--muted); letter-spacing:.06em; }
.case-section h2{ font-size:clamp(1.6rem,2.6vw,2.2rem); font-weight:400; letter-spacing:-.015em; line-height:1.25; margin-bottom:16px; }
.case-split-text p{ font-size:1.02rem; color:var(--body); font-weight:300; line-height:1.75; margin-bottom:14px; }
.case-split-text p:last-child{ margin-bottom:0; }

/* Alternating text/image split used for Overview, Challenges, Solution &
   Results — .flip mirrors which side the text/media land on. Media has no
   fixed aspect-ratio on desktop: align-items:stretch (grid's default) makes
   it fill exactly the height of the text column next to it, so a short
   write-up gets a short image and a longer one gets a taller image, instead
   of every image being forced to the same box regardless of content. */
.case-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:stretch; }
.case-split-text{ order:1; }
.case-split-media{ order:2; border-radius:var(--radius-lg); overflow:hidden; min-height:280px; }
.case-split-media img, .case-split-media .ph{ width:100%; height:100%; object-fit:cover; display:block; }
.case-split.flip .case-split-text{ order:2; }
.case-split.flip .case-split-media{ order:1; }
@media (max-width:900px){
  .case-split{ grid-template-columns:1fr; gap:28px; }
  .case-split-text{ order:1 !important; }
  .case-split-media{ order:2 !important; min-height:0; aspect-ratio:16/10; }
}

.case-quote-card{ background:var(--bg-alt); border-radius:var(--radius-md); padding:22px 24px 20px; margin-top:24px; }
.case-quote-card p{ font-size:.98rem; font-style:italic; color:var(--ink-2); line-height:1.65; margin:0 0 10px; }
.case-quote-card p::before{ content:'\201C'; }
.case-quote-card p::after{ content:'\201D'; }
.case-quote-card .who{ font-size:.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }

/* Plain text, no border accent — just a heading + short paragraph per item. */
.case-challenge-list{ display:grid; gap:20px; margin-top:6px; }
.case-challenge-item h3{ font-size:1.06rem; font-weight:500; margin-bottom:6px; }
.case-challenge-item p{ font-size:.98rem; color:var(--body); font-weight:300; line-height:1.65; margin-bottom:0; }

.case-practice-list{ display:grid; gap:12px; margin-top:20px; }
.case-practice-item{ display:flex; gap:16px; background:var(--white); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:18px 20px; }
.case-practice-num{ flex-shrink:0; width:32px; height:32px; border-radius:50%; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; font-size:.8rem; color:var(--violet-deep); font-weight:500; }
.case-practice-body h3{ font-size:.98rem; font-weight:500; margin-bottom:4px; }
.case-practice-body p{ font-size:.88rem; color:var(--body); font-weight:300; line-height:1.55; margin-bottom:0; }


.case-image-band{ margin-top:40px; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/9; }
.case-image-band img{ width:100%; height:100%; object-fit:cover; display:block; }
.case-image-pair{ display:grid; gap:20px; margin-top:40px; align-items:stretch; }
@media (min-width:760px){ .case-image-pair{ grid-template-columns:1.15fr .85fr; } }
.case-image-pair .img-wrap{ border-radius:var(--radius-lg); overflow:hidden; min-height:220px; }
.case-image-pair img{ width:100%; height:100%; object-fit:cover; display:block; }

/* "More case studies" — four tiles across the full container width, with
   shorter media (16/10 vs. the homepage grid's 4/3) to keep the rail compact. */
.related-cases{ padding-block:calc(var(--section-pad-y) * .55); }
.related-cases .section-head{ margin-bottom:32px; }
.related-cases .section-head h2{ font-size:clamp(1.4rem,2.2vw,1.9rem); }
.related-cases .work-preview-grid{ grid-template-columns:repeat(4,1fr); max-width:100%; gap:20px; }
@media (max-width:980px){ .related-cases .work-preview-grid{ grid-template-columns:repeat(2,1fr); } }
.related-cases .work-card .card-media{ aspect-ratio:16/10; }
.related-cases .work-card-info{ padding:18px 20px; }
.related-cases .work-card h3{ font-size:1.08rem; }
.related-cases .work-card .role-line{ font-size:.8rem; }
@media (max-width:560px){ .related-cases .work-preview-grid{ grid-template-columns:1fr; max-width:100%; } }

.case-nav-footer{ padding-block:56px; }
.case-nav-footer .inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }

.gallery-block{ margin-top:8px; }
.gallery-tabs{ display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gallery-grid .ph{ aspect-ratio:4/3; border-radius:var(--radius-md); }
.gallery-grid .gallery-photo{ aspect-ratio:4/3; border-radius:var(--radius-md); overflow:hidden; }
.gallery-grid .gallery-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:760px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:0; border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden; }
.contact-left{ background:var(--ink); color:#fff; padding:56px 46px; position:relative; overflow:hidden; }
.contact-left::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 20%, rgba(125,183,255,.2), transparent 55%), radial-gradient(circle at 90% 90%, rgba(161,78,191,.24), transparent 55%); }
.contact-left > *{ position:relative; z-index:2; }
.contact-item{ display:flex; align-items:center; gap:14px; padding:18px 0; border-top:1px solid var(--hairline-on-dark); }
.contact-item:first-of-type{ border-top:none; margin-top:8px; }
.contact-item .ic{ width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-item .ic svg{ width:18px; height:18px; stroke:var(--sky); }
.contact-item .lbl{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.45); margin-bottom:3px; }
.contact-item .val{ font-size:.98rem; }
.contact-quote{ margin-top:40px; padding-top:34px; border-top:1px solid var(--hairline-on-dark); font-size:1.05rem; font-weight:300; line-height:1.6; color:rgba(255,255,255,.82); }
.contact-quote cite{ display:block; margin-top:16px; font-style:normal; font-size:.85rem; color:rgba(255,255,255,.5); }

.contact-right{ background:var(--white); padding:56px 46px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:30px; }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field.full{ grid-column:1/-1; }
.form-field label{ font-size:.8rem; color:var(--ink-soft); font-weight:500; }
.form-field input, .form-field select, .form-field textarea{
  border:1px solid var(--hairline); border-radius:var(--radius-sm); padding:14px 16px; font-family:inherit;
  font-size:.95rem; background:var(--bg-alt); color:var(--ink); transition:border-color .3s, background .3s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--violet); background:var(--white); }
.form-field textarea{ resize:vertical; min-height:120px; }
.contact-right .btn{ margin-top:8px; width:100%; justify-content:center; }
.form-note{ font-size:.78rem; color:var(--muted); margin-top:14px; text-align:center; }
.form-success{ display:none; text-align:center; padding:40px 0; }
.form-success.show{ display:block; }
.form-success .check{ width:56px; height:56px; border-radius:50%; background:var(--grad-brand); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } .form-grid{ grid-template-columns:1fr; } }

/* ---------- generic two-col content (services intro etc) ---------- */
.split-2{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:860px){ .split-2{ grid-template-columns:1fr; } }

/* ---------- FAQ / accordion (used sparingly) ---------- */
.accordion-item{ border-top:1px solid var(--hairline); padding-block:22px; }
.accordion-item:last-child{ border-bottom:1px solid var(--hairline); }
.accordion-head{ display:flex; justify-content:space-between; align-items:center; gap:20px; }
.accordion-head h4{ font-size:1.05rem; font-weight:400; }
.accordion-head .plus{ width:22px; height:22px; position:relative; flex-shrink:0; }
.accordion-head .plus::before, .accordion-head .plus::after{ content:''; position:absolute; background:var(--ink); top:50%; left:50%; transform:translate(-50%,-50%); transition:transform .4s var(--ease-out); }
.accordion-head .plus::before{ width:14px; height:1.4px; }
.accordion-head .plus::after{ width:1.4px; height:14px; }
.accordion-item.open .plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.accordion-body{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease-out); }
.accordion-item.open .accordion-body{ max-height:320px; }
.accordion-body p{ padding-top:16px; color:var(--body); font-weight:300; font-size:.94rem; line-height:1.6; max-width:70ch; }


/* ============================================================
   MOBILE-ONLY REFINEMENTS
   Everything below sits inside max-width media queries, so none of it
   touches the desktop layout. Kept in one block, last in the file, so it
   cleanly overrides the earlier base/tablet rules.
   ============================================================ */
.page-top{ padding-top:152px; }

@media (max-width:900px){
  /* Home hero: text first, then the four photos as a 2x2 grid beneath it. */
  .hero{ padding-top:92px; }
  .hero-inner{ align-items:start; align-content:center; gap:20px; padding-top:4px; }
  .hero-image-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:none; justify-self:stretch; }
  .hero-image-grid .collage-tile{ aspect-ratio:4/3; margin-top:0 !important; border-radius:14px; }
  .hero-image-grid .collage-tile .tile-label{ left:10px; bottom:8px; font-size:.62rem; }
  .hero-ctas{ flex-wrap:wrap; gap:10px; }
  .hero-ctas .btn{ padding:13px 18px; font-size:.9rem; }

  /* Founder story: photos sit between the story and "Our purpose", and
     cycle automatically (see main.js). display:contents lets the three text
     blocks and the photo stack be re-ordered as siblings. */
  .founder-story-split{ display:flex; flex-direction:column; align-items:stretch; gap:0; padding-block:56px; }
  .founder-story-text{ display:contents; }
  .founder-story-text .story-block{ order:1; margin-bottom:28px; }
  .founder-story-text .story-block:nth-child(3){ order:3; margin-bottom:0; }
  .founder-story-sticky{ order:2; padding:8px 10px 92px; }
  .story-image-stack{ max-width:290px; }
}

@media (max-width:860px){
  /* Tighter gap between the fixed header and where every page starts. */
  .page-top{ padding-top:104px; }
  .case-hero{ padding-top:104px; }
  .case-hero .inner{ padding-bottom:36px; }
  .case-hero-image{ margin-top:28px; }
  .about-hero{ min-height:0; align-items:flex-start; padding:112px var(--gutter) 56px; }

  /* Menu: list sits at the bottom of the screen; "Connect with Us" is the
     same row style (size, weight, divider) as every other item. */
  .mobile-menu{ justify-content:flex-end; padding:0 24px max(36px, env(safe-area-inset-bottom)); }
  .mobile-menu a{ font-size:1.75rem; font-weight:400; padding:16px 0; }
  .mobile-menu a.btn{
    margin-top:0; width:100%; justify-content:flex-start; background:none; box-shadow:none; transform:none;
    border:none; border-bottom:1px solid var(--hairline-on-dark); border-radius:0;
    padding:16px 0; font-size:1.75rem; font-weight:400; letter-spacing:0; color:var(--white);
  }

  /* About gallery: keep the desktop sticky-column interaction, just smaller. */
  .work-gallery-section{ padding-top:56px; }
  .work-gallery-head{ padding-bottom:32px; padding-inline:var(--gutter); }
  .work-gallery-grid{ grid-template-columns:repeat(3,1fr); gap:6px; padding-inline:6px; padding-bottom:6px; }
  /* Photos fill their rows (absolutely-positioned img), and each side column's
     rows stretch evenly, so shorter columns end flush with taller ones
     instead of opening gaps between photos. */
  .wg-col{ gap:6px; align-content:stretch; grid-auto-rows:minmax(260px, 1fr); }
  .wg-col figure{ position:relative; border-radius:10px; min-height:0; }
  .wg-col img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .wg-col-sticky{ position:sticky; top:0; height:100svh; grid-template-rows:repeat(4,1fr); }
}

@media (max-width:760px){
  /* LinkedIn banner: left-aligned heading with the card directly under it. */
  .linkedin-section{ padding-block:48px; }
  .linkedin-row{ flex-direction:column; align-items:stretch; gap:20px; padding:28px 22px; }
  .linkedin-text{ flex:none; text-align:left; align-self:flex-start; }
  .linkedin-card-square{ width:100%; min-height:0; padding:24px; }
}

@media (max-width:640px){
  /* Work-page filters: two rows, scrolling sideways instead of wrapping tall. */
  .filter-tabs{
    display:grid; grid-template-rows:repeat(2, auto); grid-auto-flow:column; grid-auto-columns:max-content;
    justify-items:start; gap:10px; overflow-x:auto; flex-wrap:nowrap;
    margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); margin-bottom:28px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .filter-tabs::-webkit-scrollbar{ display:none; }
  .filter-tab{ white-space:nowrap; padding:10px 18px; }

  /* About hero: the two stats sit side by side. */
  .about-hero .stats-row{ grid-template-columns:repeat(2, 1fr); max-width:340px; margin-top:32px; }
  .about-hero .stat-item{ padding:0 10px !important; border-right:1px solid rgba(255,255,255,.16) !important; border-bottom:none !important; }
  .about-hero .stat-item:last-child{ border-right:none !important; padding:0 10px !important; }
}

/* Filter tags: wrapper rows are invisible on desktop (display:contents keeps
   the original single wrapping flex line). */
.filter-row{ display:contents; }
@media (max-width:640px){
  .filter-tabs{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; grid-template-rows:none; grid-auto-flow:row; overflow-x:auto; }
  .filter-row{ display:flex; gap:12px; flex-shrink:0; width:max-content; }
}