:root{
  /* DAWN — brought up to the exact Homepage-mockup palette (was the
     original, much darker/muddier #9B2F10/#E8832A/#C9940E), so every
     page pulls from one accurate source instead of a lookalike-but-off
     set of values. --rust/--saff/--gold are the bright fill colour (CTA
     gradients, glow, hero blobs) — the same role the mockup's --coral/
     --saff/--gold played; -d variants are the darker, more legible
     siblings for small text set on the light ground (kickers, accent
     words, hover states) where the full-bright tone reads too washed. */
  --rust:#E8502E;--rust-d:#B8351A;
  --saff:#F0923A;--saff-d:#B85F16;
  --gold:#F0B429;--gold-d:#A9760A;
  --teal:#125A51;--plum:#5C2D6E;--cream:#FFFDF8;
  --cream2:#F2EAD3;--ink:#151109;--ink2:#111008;
  /* --dust stays light-on-dark deliberately — its only two uses
     (.pf-feat-project/.pf-lib-project in portfolio.css) sit on the
     Portfolio grid's dark video-scrim cards, not the page background. */
  --green:#50A05F;--dust:rgba(245,237,216,.58);
  /* Logo width/height are NOT custom properties — Safari has shown itself
     unreliable resolving min()/calc() values stored in custom properties
     (confirmed: caused the hero logo to render at a fraction of its size).
     width:min(360px,50vw) is written out directly wherever it's needed
     instead, duplicated across breakpoints. Verbose, but nothing left for
     any engine to mis-resolve. --heroAnchor stays a variable since it's a
     plain percentage with no function involved. */
  --heroAnchor:42%;

  /* ── Phase 4 design tokens ──────────────────────────────────────────
     Additive layer, not a replacement — every color above stays exactly
     as it was (rust/saff/gold/teal/plum/cream is KaKhaGa's own language,
     not something a "premium = black and white" instinct should flatten).
     What's new is a disciplined type/space/motion SCALE so those colors
     and the existing Cormorant/Syne/Inter stack get used with more
     intention: a bigger jump between "display" and "body" than the site
     had before, a consistent spacing rhythm instead of ad-hoc rem values,
     and named easing curves so motion reads as one considered system
     instead of many one-off transitions tuned in isolation. */
  --display-xl:clamp(3.4rem,3rem + 4vw,7.5rem);
  --display-lg:clamp(2.6rem,2.2rem + 3vw,5.2rem);
  --display-md:clamp(2rem,1.7rem + 2vw,3.4rem);
  --display-sm:clamp(1.5rem,1.35rem + 1vw,2.1rem);
  --eyebrow-tracking:.28em;

  --space-1:.5rem;--space-2:1rem;--space-3:1.75rem;--space-4:3rem;
  --space-5:5rem;--space-6:8rem;--space-7:12rem;

  /* ease-cinema: the slow-start, decisive-settle curve used for anything
     that should feel weighted/physical (reveals, panel/media transitions).
     ease-snap: quicker, for hover/press feedback — response, not drama.
     ease-out-soft: the existing kgIn curve, named so new rules can share
     it instead of re-declaring the same cubic-bezier a third time. */
  --ease-cinema:cubic-bezier(.16,1,.3,1);
  --ease-snap:cubic-bezier(.4,0,.2,1);
  --ease-out-soft:cubic-bezier(.18,.85,.28,1);
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:var(--cream);color:var(--ink);font-family:'Manrope',sans-serif;font-size:16px}
/* overflow-x:clip (not hidden) on this wrapper — body/html stay fully default
   so position:sticky attaches to the real viewport scroller. Any non-visible
   overflow-x paired with a default overflow-y normally auto-upgrades that y
   to 'auto', turning the element into a scroll container and breaking sticky
   for everything inside it. */
#pageRoot{overflow-x:clip}

/* DAWN — BACKGROUND WASH. One shared, fixed, whole-page atmosphere (three
   blurred brand-colour blooms behind everything) instead of each section
   painting its own flat colour fill. Sections need transparent
   backgrounds for this to actually show through — see the per-section
   background:transparent overrides added alongside this. */
.bg-wash{position:fixed;inset:0;z-index:-2;background:var(--cream);overflow:hidden;pointer-events:none}
.bg-wash i{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.4;font-style:normal}
.bg-wash .w1{width:60vw;height:60vw;left:-18%;top:-10%;background:radial-gradient(circle,var(--rust),transparent 70%)}
.bg-wash .w2{width:55vw;height:55vw;right:-16%;top:20%;background:radial-gradient(circle,var(--gold),transparent 70%)}
.bg-wash .w3{width:50vw;height:50vw;left:10%;bottom:-20%;background:radial-gradient(circle,var(--saff),transparent 70%)}
@media(max-width:700px){ .bg-wash i{opacity:.3} }

/* GRAIN */
#grain{position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.028;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:180px}

/* ═══════════════════════════════
   LOADER (Home) — logo grows in place from 200px → hero size.
═══════════════════════════════ */
#loader{
  position:fixed;inset:0;z-index:8000;
  background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
/* The loader fades out as one unit (background, rings, text, bar and
   morph-logo together) instead of being yanked away with display:none —
   that hard cut is what read as a jump/flicker. hero-logo sits pixel-
   identical to the fully-grown morph-logo underneath, so as the loader
   dissolves it's a true crossfade with zero visible movement, not a
   swap. .hidden is added only after the fade finishes, purely to take
   the loader out of layout/interaction. */
#loader.gone{opacity:0;pointer-events:none}
#loader.hidden{display:none !important}

.lr{position:absolute;border-radius:50%;border:1px solid;opacity:0;animation:lrA 2s ease-out forwards}
.lr:nth-child(1){width:110px;height:110px;border-color:rgba(232,80,46,.5);animation-delay:.05s}
.lr:nth-child(2){width:200px;height:200px;border-color:rgba(232,131,42,.25);animation-delay:.2s}
.lr:nth-child(3){width:310px;height:310px;border-color:rgba(212,160,23,.1);animation-delay:.35s}
@keyframes lrA{0%{opacity:0;transform:scale(.5)}60%{opacity:1}100%{opacity:.2;transform:scale(1)}}

#morph-logo{
  position:absolute;top:var(--heroAnchor);left:50%;
  width:min(360px,50vw);
  transform-origin:center center;
  animation:morphGrow 2.2s cubic-bezier(.18,.85,.28,1) .35s both;
}
@keyframes morphGrow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.444)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(.444)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.loader-sub{
  position:absolute;left:50%;
  top:calc(var(--heroAnchor) + (min(360px,50vw) * .265) + 1.5rem);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
}
.ltxt{
  position:relative;z-index:2;
  font-size:.75rem;letter-spacing:.4em;text-transform:uppercase;
  color:rgba(245,237,216,.4);
  font-family:'Cormorant Garamond',serif;font-style:italic;
  animation:ltxtAnim 2s .8s both;
}
@keyframes ltxtAnim{0%{opacity:0;transform:translateY(8px)}20%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
.lbar{position:relative;z-index:2;width:110px;height:1px;background:rgba(255,255,255,.06);margin-top:1.6rem;overflow:hidden;animation:lbarFade 2s .8s both}
@keyframes lbarFade{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}
.lbar-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--rust),var(--saff));animation:lbarA 1.6s .5s both}
@keyframes lbarA{from{width:0}to{width:100%}}

/* Light fade loader used on About/Portfolio/Case-study — no logo-morph
   moment, just a quick fade so the page doesn't flash unstyled content. */
#loaderLite{position:fixed;inset:0;z-index:8000;background:var(--ink);transition:opacity .5s ease;pointer-events:none}
#loaderLite.gone{opacity:0}

/* ═══════════════════════════════
   NAV
═══════════════════════════════ */
/* DAWN — the nav is now the Homepage mockup's translucent glass bar:
   light frosted background, dark text, gradient CTA pill — replacing
   the old solid-dark-bar treatment everywhere (Home, About, Services,
   Kaaran, Portfolio all shared that one dark nav; now they share this
   one glass nav instead). nav-solid/stuck stay as distinct rules (still
   toggled the same way by the existing JS) but now just mean "a touch
   more opaque/blurred," not "flip to dark" — no page needs that flip
   anymore since every page opens on a light section. */
/* DAWN — sizing/typography brought in line with the Homepage mockup's
   own .nav exactly (14px/32px padding, plain-case 14px/600 links, no
   letter-spacing, no underline decoration) rather than reusing the
   site's older all-caps/tracked label convention. */
nav{position:fixed;top:0;left:0;right:0;z-index:500;padding:14px 32px;display:flex;justify-content:space-between;align-items:center;transition:all .5s;
  background:rgba(255,253,248,.6);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid rgba(255,255,255,.5);box-shadow:0 1px 0 rgba(255,255,255,.7)}
nav.stuck{background:rgba(255,253,248,.8);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);padding:11px 32px;border-bottom:1px solid rgba(255,255,255,.65)}
nav.nav-solid{background:rgba(255,253,248,.8);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border-bottom:1px solid rgba(255,255,255,.65)}
.nlogo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nlogo-img{height:32px;width:auto}
.nlogo-text{
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:18px;
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--ink);
  line-height:1.2;
}
.nlogo-sub{
  font-family:'Manrope',sans-serif;
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(13,11,8,.5);
  display:block;
  margin-top:1px;
}
.ncta{font-size:13.5px;font-weight:700;letter-spacing:0;text-transform:none;color:#fff;text-decoration:none;
  padding:10px 20px;border:none;border-radius:999px;transition:all .35s;
  background:linear-gradient(135deg,var(--rust),var(--saff));box-shadow:0 8px 20px -8px rgba(232,80,46,.55)}
.ncta:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(232,80,46,.65)}

.nav-right{display:flex;align-items:center;gap:2.5rem}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{position:relative;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-soft,rgba(13,11,8,.65));text-decoration:none;transition:color .3s}
.nav-links a:hover,.nav-links a.active{color:var(--rust)}
/* Plain colour-change on hover/active, matching the mockup — no
   underline-grow decoration (the mockup's nav doesn't have one). */
.nav-links a:not(.nav-links-cta)::after{
  content:none;
}
.nav-links a:not(.nav-links-cta):hover::after{transform:scaleX(1)}
.nav-links a.active::after{transform:scaleX(1);background:var(--rust)}
.nav-links-cta{display:none}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:26px;height:26px;background:none;border:none;cursor:pointer;padding:0}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--ink);transition:transform .3s,opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══════════════════════════════
   HERO (Home only)
   #heroZone is the scroll runway; #heroSticky pins the actual hero in
   place while the runway scrolls underneath — overflow-x:clip, never
   :hidden, so nothing here upgrades an ancestor's overflow-y to auto and
   silently breaks the sticky pin.
═══════════════════════════════ */
#heroZone{position:relative;height:340vh;overflow-x:clip}
#heroSticky{position:sticky;top:0;height:100vh}
#hero{position:relative;height:100%;overflow:hidden}
.hvig{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(13,11,8,.02) 0%,rgba(13,11,8,.42) 52%,rgba(13,11,8,.95) 100%)}
#hcv{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.hcnt{position:absolute;inset:0;z-index:3;text-align:center;pointer-events:none}

#hero-logo{
  position:absolute;top:var(--heroAnchor);left:50%;transform:translate(-50%,-50%);
  width:min(360px,50vw);
  opacity:0;
  transition:opacity .05s;
}
#hero-logo.show{opacity:1}

.hero-sub{
  position:absolute;left:50%;
  top:calc(var(--heroAnchor) + (min(360px,50vw) * .265) + 1.75rem);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
}

.htag{font-family:'Cormorant Garamond',serif;font-size:clamp(1.3rem,2.6vw,2.1rem);font-weight:300;color:rgba(255,255,255,.96);letter-spacing:.07em;line-height:1.3;padding-bottom:.1em;opacity:0;transform:translateY(10px);transition:opacity .8s,transform .8s}
.htag.show{opacity:1;transform:none}
.htag em{font-style:italic;color:var(--gold)}
.hpills{display:flex;align-items:center;margin-top:2rem;opacity:0;transform:translateY(10px);transition:opacity .8s .18s,transform .8s .18s}
.hpills.show{opacity:1;transform:none}
.hpill{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:0 clamp(.7rem,3.2vw,2rem)}
.hpill-d{font-size:clamp(1.05rem,4.2vw,1.5rem);font-family:serif;line-height:1.25}
.hpill:nth-child(1) .hpill-d{color:var(--rust)}.hpill:nth-child(3) .hpill-d{color:var(--saff)}.hpill:nth-child(5) .hpill-d{color:var(--gold)}
.hpill-e{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,237,216,.6)}
.hdiv{width:1px;height:28px;background:linear-gradient(to bottom,transparent,rgba(245,237,216,.18),transparent)}
.hscroll{position:absolute;top:calc(84% + 68px);left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:.4rem;opacity:0;transition:opacity .8s .35s;pointer-events:none}
.hscroll.show{opacity:1}
.hscroll-lbl{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,237,216,.6)}
.hscroll-line{width:1px;height:30px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.hscroll-line::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:40%;background:linear-gradient(to bottom,transparent,rgba(232,131,42,.65));animation:scrolldn 2.5s ease-in-out infinite}
@keyframes scrolldn{0%{top:-100%}100%{top:200%}}

/* ═══════════════════════════════
   CASE CARDS — compact preview card, shared by Home's showcase strip
   and Portfolio's full grid (rendered from assets/cases-data.js so the
   markup exists in exactly one place: assets/main.js).
═══════════════════════════════ */
/* DAWN — work cards restructured to match the Dawn homepage mockup:
   thumb (poster + index number + a centered play button, no card
   padding around it) sitting directly above a separate glass meta strip
   (category tag, then the PROJECT name as the big bold line, brand name
   small underneath) — replacing the old serif client-name-first layout
   and its border logo. */
.ccard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.ccard{background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.6);border-radius:24px;
  overflow:hidden;box-shadow:0 16px 36px -24px rgba(21,17,9,.3);
  text-decoration:none;display:block;transition:transform .4s,box-shadow .4s;position:relative}
.ccard:hover{transform:translateY(-4px);box-shadow:0 22px 44px -24px rgba(21,17,9,.4)}
.ccard-thumb{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#0a0806;display:flex;align-items:center;justify-content:center}
.ccard-thumb img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;transition:transform .5s}
.ccard:hover .ccard-thumb img{transform:scale(1.04)}
.ccard-idx{position:absolute;top:12px;left:14px;z-index:1;font-size:.68rem;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:.04em}
.ccard-play{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.75);
  display:flex;align-items:center;justify-content:center}
.ccard-play::after{content:"";border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--ink);margin-left:2px}
.ccard-meta{padding:1rem 1.15rem;background:rgba(255,255,255,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ccard-tag{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--rust);margin-bottom:.35rem;display:block}
.ccard-name{font-size:1.02rem;font-weight:800;color:var(--ink);line-height:1.25}
.ccard-brand{font-size:.8rem;color:rgba(13,11,8,.55);margin-top:.1rem}

.showcase-foot{display:flex;justify-content:center;padding:2.5rem 0 1rem}
/* DAWN — the site's sections are light now, so dark-on-transparent is
   the default; .viewall-light (new) is the rare cream-on-dark variant,
   kept for anything still sitting on the footer/nav's dark ground.
   .viewall-dark is kept as an alias so existing markup (Founder's
   section, etc.) doesn't need to change. */
.viewall{display:inline-flex;align-items:center;gap:.8rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:1.1rem 2.4rem;border:1px solid rgba(13,11,8,.18);transition:all .35s;position:relative;overflow:hidden}
.viewall:hover{background:var(--rust);border-color:var(--rust);color:var(--cream)}
.viewall-sm{padding:.7rem 1.6rem;font-size:.66rem}
.viewall-dark{color:var(--ink);border-color:rgba(13,11,8,.18)}
.viewall-dark:hover{background:var(--rust);border-color:var(--rust);color:var(--cream)}
.viewall-light{color:var(--cream);border-color:rgba(245,237,216,.22)}
.viewall-light:hover{background:var(--rust);border-color:var(--rust);color:var(--cream)}

/* ═══════════════════════════════
   OUR CLIENTS — rotating logo marquee (Home). Same infinite-track
   technique as the old text ticker (duplicate the content once, slide
   -50%), just sized and coloured for logo images instead of text.
═══════════════════════════════ */
/* ═══════════════════════════════
   BTS COLLAGE BANNER — a purely visual break between Services and the
   client marquee, humanizing the page with real production moments.
═══════════════════════════════ */
#bts-banner{background:transparent;padding:5rem 5rem 4.5rem}
.bts-collage{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:130px;gap:6px}
.bts-tile{overflow:hidden;position:relative;border-radius:6px}
.bts-tile img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.1) brightness(.98);transition:filter .4s,transform .6s}
.bts-tile:hover img{filter:none;transform:scale(1.05)}
.bts-tile.big{grid-column:span 2;grid-row:span 2}
.bts-caption{text-align:center;margin-top:2.2rem;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.05rem;color:rgba(13,11,8,.55)}

#clients{background:var(--ink);padding:5rem 0 2.5rem;overflow:hidden}
.clients-label{text-align:center;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,237,216,.45);margin-bottom:2.5rem}
.mqc{overflow:hidden;white-space:nowrap;display:flex}
.mqc-track{display:inline-flex;align-items:center;gap:5rem;animation:mqcrun 34s linear infinite;will-change:transform}
.mqc-track img{height:36px;width:auto;max-width:140px;object-fit:contain;opacity:.82;transition:opacity .4s,transform .4s}
.mqc-track img:hover{opacity:1;transform:scale(1.06)}
@keyframes mqcrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* REVEAL */
.rv{opacity:0;transform:translateY(44px);transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1)}
.rv.on{opacity:1;transform:none}
.d1{transition-delay:.1s!important}.d2{transition-delay:.22s!important}.d3{transition-delay:.34s!important}.d4{transition-delay:.46s!important}
.slbl{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;display:flex;align-items:center;gap:.9rem;margin-bottom:2rem}
.slbl::before{content:'';width:1.4rem;height:1px;background:currentColor;display:block;opacity:.55}

/* Warm glow wash used on the otherwise-dark inner pages (About, Portfolio,
   Case Study) so they pick up the hero's orange/gold warmth instead of
   sitting flat — same blurred-blob technique as .tk-blob, just factored
   out so any section can drop a couple of these in. */
/* DAWN — bumped from .13-.16 to .3-.36: these blooms were tuned to
   register against near-black; on the site's now-light cream ground the
   same low alpha nearly vanished, since warm-on-warm needs more strength
   to read as a distinct wash. */
.pageglow{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:0}
.pageglow.rust{background:rgba(232,80,46,.34)}
.pageglow.saff{background:rgba(232,131,42,.32)}
.pageglow.gold{background:rgba(201,148,14,.3)}

/* ═══════════════════════════════
   PHILOSOPHY (About)
═══════════════════════════════ */
/* Rust — the Kaaran color from the hero's Kaaran/Khaaka/Goonj pills —
   instead of the old flat cream, so this reads as a bold, warm section
   like #svc/#cta instead of the odd light-bg-dark-text page out. Accent
   colors below are flipped for readability against a dark warm bg: the
   column-1 accent moves off rust (which would vanish on a rust bg) to a
   light cream tint, columns 2/3 keep saff/gold since both still read
   clearly against rust. */
/* DAWN — was a solid rust fill; now a warm cream ground with rust/gold
   carried as soft blooms (same .tk-blob elements, recoloured) instead of
   painting the whole section rust. Text flips from cream-on-rust to
   ink-on-cream to match. */
#phil{background:transparent;color:var(--ink);padding:10rem 5rem;position:relative;overflow:hidden}
.tk-blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.tk-blob.a{width:340px;height:340px;background:rgba(232,80,46,.22);top:-60px;right:-30px}
.tk-blob.b{width:260px;height:260px;background:rgba(201,148,14,.2);bottom:-30px;left:6%}
.tkwrap{max-width:1300px;margin:0 auto;position:relative;z-index:2}
.about-title{font-family:'Manrope',sans-serif;font-weight:700;font-size:clamp(1rem,2vw,1.3rem);letter-spacing:.1em;text-transform:uppercase;color:var(--rust);opacity:.9;margin-bottom:1.6rem}
/* DAWN — was thin Cormorant Garamond like every other headline before
   this pass; matched to the home hero's own .kg-tag treatment (bold
   Manrope body, italic serif gradient only on the accent word) since
   this is About's equivalent opening statement. */
.tk-headline{font-family:'Manrope',sans-serif;font-size:var(--display-lg);font-weight:800;letter-spacing:-.01em;line-height:1.08;color:var(--ink);margin-bottom:1.1rem}
.tk-headline em{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;background:linear-gradient(100deg,var(--rust),var(--saff) 60%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.tk-sub{font-size:1.02rem;line-height:1.8;color:rgba(13,11,8,.68);max-width:34ch;margin-bottom:var(--space-6)}

/* Kaaran/Khaaka/Goonj — three movements of one idea, read side by side
   rather than stacked (a stacked reading took far more vertical space
   than the content needed). Each is its own card with a huge, low-
   contrast devanagari glyph as a background watermark — contained by
   the card's own overflow:hidden so it can never crop into a sibling
   card or spill past its own edge the way the old fixed-width column
   did. A thin top rule (colored per step) replaces the old full-height
   connecting line, which only made sense in a vertical layout. */
.tk-steps{position:relative;margin-top:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.tk-step{
  position:relative;overflow:hidden;padding:2.2rem 1.6rem 2rem;
  border-top:2px solid;border-radius:4px;
  background:rgba(255,255,255,.35);
}
.tk-step:nth-child(1){border-top-color:var(--rust)}
.tk-step:nth-child(2){border-top-color:var(--saff)}
.tk-step:nth-child(3){border-top-color:var(--gold)}
.tk-dev{
  position:absolute;right:.4rem;top:.2rem;z-index:0;
  font-family:serif;font-weight:400;line-height:.85;
  font-size:clamp(3.4rem,7vw,5.8rem);opacity:.14;user-select:none;
  white-space:nowrap;display:block;pointer-events:none;
}
.tk-step:nth-child(1) .tk-dev{color:var(--rust)}.tk-step:nth-child(2) .tk-dev{color:var(--saff)}.tk-step:nth-child(3) .tk-dev{color:var(--gold)}
.tk-content{position:relative;z-index:1;max-width:none}
.tk-num{font-size:.7rem;letter-spacing:var(--eyebrow-tracking);font-weight:600;text-transform:uppercase;display:block;margin-bottom:1rem}
.tk-step:nth-child(1) .tk-num{color:var(--rust)}.tk-step:nth-child(2) .tk-num{color:var(--saff)}.tk-step:nth-child(3) .tk-num{color:var(--gold)}
.tk-name{font-family:'Manrope',sans-serif;font-size:clamp(1.3rem,1.8vw,1.6rem);font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-bottom:.9rem;line-height:1.2}
.tk-body{font-size:.95rem;line-height:1.75;color:rgba(13,11,8,.72);max-width:34ch}
@media(max-width:900px){
  .tk-steps{grid-template-columns:1fr;gap:0}
  .tk-step{border-top:none;border-bottom:1px solid rgba(13,11,8,.08);border-radius:0;background:none;padding:var(--space-4) 0}
  .tk-step:last-child{border-bottom:none}
  .tk-step:first-child{border-top:2px solid;padding-top:1.6rem}
  .tk-step:nth-child(1){border-top-color:var(--rust)}
  .tk-step:nth-child(2){border-top-color:var(--saff)}
  .tk-step:nth-child(3){border-top-color:var(--gold)}
  .tk-dev{font-size:3.4rem;opacity:.18}
  .tk-body{max-width:none}
}

/* ═══════════════════════════════
   SERVICES — teal, NO vertical dividers (Home)
═══════════════════════════════ */
/* ═══════════════════════════════
   TRUST — minimal credibility strip right after the hero. No cards, no
   logos here (the fuller logo marquee still exists further down) — just
   quiet confidence: a label and a list of names.
═══════════════════════════════ */
#trust{background:transparent;padding:3.2rem 5rem;text-align:center;border-bottom:1px solid rgba(13,11,8,.06);position:relative;z-index:2}
.trust-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(13,11,8,.45);margin-bottom:.9rem}
/* DAWN — real pill boxes (frosted, bordered), matching the mockup's
   .trust-names exactly instead of plain italic text with a dot divider. */
.trust-names{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.trust-names span{font-family:'Manrope',sans-serif;font-weight:700;font-size:.78rem;color:var(--ink-soft,rgba(13,11,8,.65));
  padding:.44rem .9rem;border-radius:999px;background:rgba(255,255,255,.45);border:1px solid rgba(21,17,9,.08)}

/* DAWN — was a solid teal fill; the section is fully transparent now,
   the same shared bg-wash blobs showing through as every other section
   (no per-section glare — Dawn never adds one, and a teal radial here
   read as a muddy patch against the warm wash). */
#svc{background:transparent;padding:6.5rem 5rem;position:relative;overflow:hidden}
.svc-glare{display:none}
/* Fills #svc's own 5rem gutter — matching the CTA card's own gutter —
   instead of capping at a narrower 1100px that left a lot of side
   whitespace compared to the rest of the page. */
.svcwrap{position:relative;z-index:2}
/* DAWN — bold Manrope heading (was thin Cormorant Garamond) and the
   intro paragraph's margin cut from 8rem to 2.5rem — that one value was
   almost the entire gap the whole "Our Services" section complained
   about; the grid's own 1rem top margin barely registered next to it. */
.svch{font-family:'Manrope',sans-serif;font-size:clamp(1.9rem,2.6vw,2.7rem);font-weight:800;letter-spacing:-.01em;color:var(--ink);line-height:1.12;margin-bottom:.7rem}
.svch em{font-style:italic;font-family:'Cormorant Garamond',serif;color:var(--teal)}
.svc-intro{font-size:1rem;color:rgba(13,11,8,.7);line-height:1.7;max-width:38ch;margin-bottom:2.5rem}
.svc-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:3.2rem 3.6rem;margin-top:1rem}
.svc-more{margin-top:3.5rem;display:flex}
.svc-cat{padding:0}
.svc-cat-img{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;margin-bottom:1.6rem;background:#0a0806;border-radius:14px}
.svc-cat-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.svc-cat:hover .svc-cat-img img{transform:scale(1.05)}
.svc-cat-idx{position:absolute;bottom:.8rem;left:.8rem;font-family:'Cormorant Garamond',serif;font-size:.95rem;color:var(--cream);background:rgba(13,11,8,.55);padding:.2rem .7rem;letter-spacing:.06em;border-radius:4px}
.svc-cat-title{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:400;color:var(--ink);margin-bottom:1.3rem;line-height:1.2;padding-bottom:1rem;border-bottom:1px solid rgba(13,11,8,.12)}
.svc-cat-list{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.svc-cat-list li{font-size:1.02rem;font-weight:500;color:rgba(13,11,8,.78);line-height:1.6;padding-left:1.1rem;position:relative}

/* Practical, scannable service list — one heading, one sentence each, no
   sub-lists or images to slow down "what do they actually offer". */
/* Capabilities as an editorial index, not a grid of identical cards —
   each service is a full-width row (large serif name + a number, the
   description only shows on interaction), so the page reads like a
   contents page a reader scans and dips into, not twelve boxes of equal
   visual weight competing for the same attention. counter-reset/
   -increment means no HTML change was needed on the two pages that both
   use this exact list. */
/* ═══════════════════════════════
   GLASS — shared frosted-panel primitive (Dawn). A pointer-tracked
   highlight (--mx/--my, set by the pointermove listener in main.js) plus
   a corner glare that tracks page scroll (--pageGlareT, the same shared
   value the hero coverflow's card glare already uses) — one "glass"
   identity reused by services boxes, work-card meta and the closing CTA,
   instead of each inventing its own card treatment.
═══════════════════════════════ */
.glass{position:relative;border-radius:20px;background:rgba(255,255,255,.5);
  backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 20px 50px -30px rgba(21,17,9,.25);
  overflow:hidden}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.6), transparent 45%);
  mix-blend-mode:overlay;opacity:.85}
.glass::after{content:"";position:absolute;left:0;top:calc(-18% + var(--pageGlareT,0) * 132%);
  width:62%;height:62%;pointer-events:none;
  background:radial-gradient(circle at 22% 22%, rgba(255,255,255,.55), transparent 68%);
  opacity:.5;mix-blend-mode:overlay}
@media(prefers-reduced-motion:reduce){ .glass::after{display:none} }

/* Services — Home's compact grid uses real glass boxes (services.html's
   own fuller listing keeps the editorial .svc-list/.svc-item row format
   below, unchanged). */
/* At the page's now-wider gutter (matching #cta), 3 columns of 1fr each
   grew wide enough that a box was mostly empty space around one short
   line of text — read as "stretched" again. Extra gap + padding fills
   more of each box with real presence, and a 4th column past 1300px
   (12 services divides evenly into 4x3, no half-empty row) keeps each
   box's own width from ballooning further on really wide screens. */
.svc-box-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:1rem}
.svc-box{padding:1.9rem 1.9rem}
.svc-box h3{font-size:1.2rem;font-weight:800;color:var(--rust);margin-bottom:.55rem;line-height:1.3}
.svc-box p{font-size:.92rem;color:rgba(13,11,8,.65);line-height:1.6;margin:0}
@media(min-width:1300px){ .svc-box-grid{grid-template-columns:repeat(4,1fr)} }
@media(max-width:900px){ .svc-box-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .svc-box-grid{grid-template-columns:1fr} }

.svc-list{margin-top:1rem;border-top:1px solid rgba(13,11,8,.14);counter-reset:svc}
.svc-item{
  counter-increment:svc;position:relative;display:flex;align-items:baseline;gap:clamp(1rem,3vw,2.5rem);
  padding:1.5rem 0;border-bottom:1px solid rgba(13,11,8,.14);cursor:default;
}
.svc-item::before{
  content:counter(svc,decimal-leading-zero);flex:0 0 auto;
  font-size:.78rem;letter-spacing:.08em;color:rgba(13,11,8,.4);font-variant-numeric:tabular-nums;
  padding-top:.5em;
}
.svc-item h3{
  font-family:'Cormorant Garamond',serif;font-weight:400;color:var(--ink);
  font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.2;padding-bottom:.05em;
  flex:0 0 auto;transition:color .35s var(--ease-snap);
}
.svc-item p{
  font-size:.92rem;line-height:1.7;color:rgba(13,11,8,.6);max-width:34ch;
  padding-top:.4em;transition:color .35s var(--ease-snap);
}
/* Hover/focus is an emphasis accent, not a reveal — the description is
   always readable (this is a services page; what each service actually
   is shouldn't be gated behind an interaction), it just brightens and
   the row's number/name pick up the accent color to confirm which row
   has attention. */
.svc-item:hover h3,.svc-item:focus-within h3{color:var(--rust)}
.svc-item:hover::before,.svc-item:focus-within::before{color:var(--rust)}
.svc-item:hover p,.svc-item:focus-within p{color:rgba(13,11,8,.85)}
@media(max-width:900px){
  .svc-item{flex-wrap:wrap}
  .svc-item p{max-width:none;flex-basis:100%;padding-left:calc(.78rem + clamp(1rem,3vw,2.5rem))}
}

/* Services detail page (services.html) — the same four disciplines as
   Home's compact grid, expanded into full alternating rows with a
   description paragraph, for the "more detailed" services page. */
#svc-detail{background:transparent;padding:1rem 5rem 8rem;position:relative}
/* Same "fill the section's own gutter, no extra inner cap" pattern as
   Services/BTS/CTA — was max-width:1100px, reading as a narrower island
   with a lot of side whitespace compared to the rest of the page. The
   row is a 1fr/1fr grid, so the extra width goes to a bigger image, not
   empty gap; the text column's own .svcd-desc max-width already keeps
   its paragraph a sane reading length regardless. */
.svcdwrap{display:flex;flex-direction:column;gap:5rem}
.svc-detail-lead{font-family:'Manrope',sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:-.005em;color:rgba(13,11,8,.6);margin-bottom:-2.5rem}
/* DAWN — was align-items:center: the text column is much shorter than
   the image (short heading + a few list lines vs a full 16:11 photo),
   so centering it left the text floating in the middle of a lot of
   empty space above and below — read as abandoned rather than placed.
   Bottom-anchoring it to the image's own baseline grounds it instead,
   and the left rule (colored per-row like the image's own number
   badge) gives it a real anchor point rather than sitting loose on the
   page background. */
.svcd-row{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:stretch}
.svcd-row:nth-child(even) .svcd-img{order:2}
.svcd-img{position:relative;width:100%;min-height:320px;align-self:stretch;overflow:hidden;background:#0a0806;border-radius:16px}
.svcd-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* DAWN — back to a stacked column (title over desc over list) after the
   side-by-side version read as too cramped: the name now runs across
   the full column as its own masthead line, description and list below
   it fill that same full width (up to the image, not a narrower lane
   inside it), and everything is sized up a step so the block actually
   carries the visual weight of the photo it sits beside. */
.svcd-copy{max-width:none;padding-left:1.75rem;border-left:2px solid var(--row-accent,var(--rust));position:relative}
/* nth-of-type, not nth-child — .svcdwrap's first child is the plain
   <p class="svc-detail-lead"> lead line before the rows start, which
   would otherwise shift nth-child by one and hand row 1 row 2's
   color. */
.svcd-row:nth-of-type(1) .svcd-copy{--row-accent:var(--rust)}
.svcd-row:nth-of-type(2) .svcd-copy{--row-accent:var(--saff)}
.svcd-row:nth-of-type(3) .svcd-copy{--row-accent:var(--gold)}
.svcd-row:nth-of-type(4) .svcd-copy{--row-accent:var(--teal)}
/* Rust throughout, not the per-row accent cycle above — that cycle
   stays on the border/bullets for rhythm, but the heading itself reads
   as one consistent voice down the page, the way a section title
   should rather than following the same decorative color-per-row. */
.svcd-title{font-family:'Manrope',sans-serif;font-size:clamp(2.1rem,3.4vw,2.9rem);font-weight:800;letter-spacing:-.01em;line-height:1.1;color:var(--rust);margin-bottom:1.3rem}
.svcd-desc{font-size:1.18rem;line-height:1.75;color:rgba(13,11,8,.75);margin-bottom:2.2rem;max-width:none}

#svc-cta{background:transparent;padding:6rem 5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2rem}
/* DAWN — was thin italic Cormorant Garamond, the pre-Dawn default; this
   is a real closing line (not an eyebrow or pull-quote), so it gets
   the same bold Manrope treatment as the rest of the page's headings. */
.svc-cta-line{font-family:'Manrope',sans-serif;font-size:clamp(1.15rem,1.8vw,1.4rem);font-weight:700;color:var(--ink);max-width:560px}
/* Was a barely-visible 4px dash at low opacity; a solid colored dot
   gives the list some real presence, matching .svcd-copy's own
   per-row accent color instead of a flat gray. */
.svc-cat-list li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--row-accent,var(--rust))}

/* ═══════════════════════════════
   CASE-STUDY SHOWCASE heading (Home) / PORTFOLIO heading
═══════════════════════════════ */
.workhd{padding:0 0 3rem;position:relative;z-index:1}
/* DAWN — was thin Cormorant Garamond at up to 5.2rem (--display-lg),
   the full-page display scale; the mockup's equivalent heading is the
   same bold Manrope size as every other section heading (.svch) — kept
   as its own rule (not literally .svch) since the two pages that reuse
   .workh want different sizes, but same family/weight now. */
.workh{font-family:'Manrope',sans-serif;font-size:clamp(1.9rem,2.6vw,2.7rem);font-weight:800;letter-spacing:-.01em;color:var(--ink);line-height:1.12}
.workh em{font-style:italic;font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--rust)}
.worksub{font-size:.85rem;color:rgba(13,11,8,.55);margin-top:1.2rem}
.worksub em{color:var(--rust);font-style:normal}
/* Same 5rem gutter as #svc and #cta — matched to the CTA card's own
   spacing rather than a narrower capped width, so Services/BTS/Work
   and the closing CTA all read as one consistent page width instead of
   the CTA band looking like the odd one out. */
#work-showcase{background:transparent;padding:3.5rem 5rem 2rem}
#portfolio-grid{padding:9rem 0 2rem;position:relative;overflow:hidden}
#portfolio-grid .ccard-grid{position:relative;z-index:1}

/* Other Work placeholder */
.otherwork{padding:6rem 5rem;position:relative;z-index:1;border-top:1px solid rgba(13,11,8,.08)}
.otherwork-box{max-width:1100px;margin:0 auto;border:1px dashed rgba(13,11,8,.2);padding:4rem 3rem;text-align:center;border-radius:16px}
.otherwork-box h3{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:1.8rem;color:var(--ink);margin-bottom:.8rem}
.otherwork-box p{font-size:.88rem;color:rgba(13,11,8,.55);max-width:480px;margin:0 auto}

/* ═══════════════════════════════
   OUTCOME / CHANGES (Portfolio)
═══════════════════════════════ */
#changes{background:var(--plum);padding:10rem 5rem;position:relative;overflow:hidden}
.ch-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(255,255,255,.05),transparent 60%)}
.chwrap{max-width:1100px;margin:0 auto;position:relative;z-index:2}
.chh{font-family:'Cormorant Garamond',serif;font-size:clamp(2.8rem,5.5vw,5rem);font-weight:300;color:var(--cream);margin-bottom:5.9rem;line-height:1.2;padding-bottom:.06em}
.chh em{font-style:italic;color:rgba(250,243,224,.52)}
.ch-cols{display:grid;grid-template-columns:repeat(3,1fr)}
.ch-col{padding:3.5rem;border-right:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden}
.ch-col:last-child{border-right:none}
.ch-col::before{content:'';position:absolute;bottom:0;left:0;right:0;height:0;transition:height .55s cubic-bezier(.16,1,.3,1)}
.ch-col:nth-child(1)::before{background:rgba(232,80,46,.14)}.ch-col:nth-child(2)::before{background:rgba(232,131,42,.14)}.ch-col:nth-child(3)::before{background:rgba(80,160,95,.14)}
.ch-col:hover::before{height:100%}
.ch-icon{display:block;font-size:1.8rem;margin-bottom:1.4rem;position:relative;z-index:1}
.ch-head{font-family:'Cormorant Garamond',serif;font-size:clamp(3rem,5vw,4.2rem);font-weight:300;color:var(--cream);line-height:1.2;padding-bottom:.08em;margin-bottom:1.7rem;position:relative;z-index:1;transition:transform .3s}
.ch-col:hover .ch-head{transform:translateY(-3px)}
.ch-pts{list-style:none;display:flex;flex-direction:column;gap:.75rem;position:relative;z-index:1}
.ch-pts li{font-size:.86rem;color:rgba(250,243,224,.68);line-height:1.65;display:flex;gap:.7rem}
.ch-pts li::before{content:'—';opacity:.32;flex-shrink:0}

/* ═══════════════════════════════
   TEAM (About) — sits between Philosophy and Founder. Photo placeholders
   (gradient circle + initials) until real headshots are supplied.
═══════════════════════════════ */
#team{background:transparent;padding:8rem 5rem}
.teamwrap{max-width:1100px;margin:0 auto}
.team-headline{font-family:'Cormorant Garamond',serif;font-size:clamp(2.4rem,4.5vw,3.6rem);font-weight:300;line-height:1.2;padding-bottom:.06em;color:var(--ink);margin-bottom:3.4rem}
.team-headline em{font-style:italic;color:var(--rust)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem}
.team-card{display:flex;flex-direction:column;align-items:flex-start}
.team-photo{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;margin-bottom:1.3rem;background:var(--cream2)}
.team-photo img{width:100%;height:100%;object-fit:cover;display:block}
.team-name{font-family:'Manrope',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:-.01em;color:var(--ink);margin-bottom:.35rem}
.team-role{font-family:'Manrope',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--rust);line-height:1.4}

/* ═══════════════════════════════
   FOUNDER — with actual photo (About)
═══════════════════════════════ */
/* DAWN — was a solid --cream2 fill (#F2EAD3, a flat tan/olive) instead
   of the shared transparent-over-bg-wash treatment every other section
   uses — read as a muddy greenish patch breaking the warm gradient
   wash right where the page needed to keep flowing. */
#founder{background:transparent;color:var(--ink);padding:10rem 5rem}
.fowrap{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:8rem;align-items:start}
.fo-label{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--rust);margin-bottom:2rem;display:flex;align-items:center;gap:.9rem}
.fo-label::before{content:'';width:1.3rem;height:1px;background:var(--rust);display:block}
.fo-head{font-family:'Manrope',sans-serif;font-size:clamp(2.1rem,3.6vw,3.2rem);font-weight:800;letter-spacing:-.01em;line-height:1.12;color:var(--ink);margin-bottom:2.4rem}
.fo-head em{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;color:var(--rust)}
.fo-body{display:flex;flex-direction:column;gap:1.4rem}
/* DAWN — was Cormorant Garamond serif, a different body font than this
   same page's own Kaaran/Khaaka/Goonj paragraphs (.tk-body, plain
   Manrope via the body default) — standardized on the one body font.
   max-width added since .fo-content itself just grew wider (see
   .fowrap-mag below) and unconstrained paragraph text would otherwise
   run the full new width. */
/* Was capped at 640px — well short of .fo-content's own ~776px column,
   so the paragraph stopped short of the heading and the divider rule
   above it, reading as an unfinished layout rather than a considered
   measure. Fills the same column width they use instead. */
.fo-body p{font-family:'Manrope',sans-serif;font-size:1rem;font-weight:400;line-height:1.75;color:#4a3f32}
.fo-body p strong{color:var(--ink);font-weight:500}
.fo-name{margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(13,11,8,.1)}
.fo-name strong{display:block;font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--ink);font-weight:400}
.fo-name span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#73675b}
.fo-portrait{position:relative}
.fo-portrait-img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top;display:block}
.fo-portrait-caption{margin-top:1.2rem}
.fo-portrait-name{font-family:'Manrope',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:-.01em;color:var(--ink);margin-bottom:.35rem}
.fo-portrait-role{font-family:'Manrope',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--rust)}

/* Magazine-profile layout. On desktop the portrait sits alongside the
   text as a fixed side column (not stacked above it) — .fo-content holds
   everything except the portrait so the two can sit side by side without
   touching each of the many .fo-section children individually. Below the
   1000px breakpoint (see the media query further down) this collapses
   back to the original single stacked column, portrait on top, since a
   side-by-side split has no room to breathe at phone/tablet widths. */
.fowrap-mag{max-width:1180px;margin:0 auto;position:relative;z-index:1;display:flex;gap:4rem;align-items:flex-start}
.fo-portrait-mag{flex:0 0 340px;max-width:340px;position:sticky;top:7rem}
.fo-portrait-img-mag{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top;display:block;border-radius:18px}
.fo-content{flex:1;min-width:0}
.fo-section{margin-top:3rem;padding-top:2.2rem;border-top:1px solid rgba(13,11,8,.1)}
.fo-sub-label{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--rust);margin-bottom:1.2rem}
.fo-brands{display:flex;flex-wrap:wrap;row-gap:.6rem;column-gap:1.7rem}
.fo-brands span{font-family:'Manrope',sans-serif;font-weight:600;font-size:.92rem;color:#4a3f32;position:relative}
.fo-brands span:not(:last-child)::after{content:'';position:absolute;right:-.85rem;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:50%;background:rgba(74,63,50,.35)}
.fo-talk{margin-top:3rem;padding-top:2.2rem;border-top:1px solid rgba(13,11,8,.1)}
.fo-talk p{font-family:'Manrope',sans-serif;font-weight:600;font-size:1.1rem;color:var(--ink);margin-bottom:1.6rem;line-height:1.6}

/* ═══════════════════════════════
   PORTAL — the in-page "Behind the Frame" popup, opened by clicking a
   bloomed hero node (Home only; Portfolio's grid still links to the full
   case-study.html page). Shares the pe-/pt-/pa-/po-/pv- content classes
   below with the full-page version so the two stay visually identical.
═══════════════════════════════ */
#portal{position:fixed;inset:0;z-index:7000;display:flex;align-items:center;justify-content:center;background:rgba(21,17,9,0);pointer-events:none;transition:background .5s}
#portal.open{background:rgba(21,17,9,.6);pointer-events:all}
/* The popup sits above an opaque-ish dark scrim, so simple translucency
   can't reveal the page's own bg-wash blobs behind it the way .glass
   panels elsewhere do — the same rust/gold/saff wash is baked directly
   into the box's own background instead, so it still reads as the
   site's light gradient theme rather than flat white. Fixed-pixel radii
   (not percentages) so the blobs stay a consistent, clearly visible
   size regardless of how tall the box's content makes it — a percentage
   radius here shrank to almost nothing against a long scrollable page
   and read as no color at all. Positioned at the literal box corners so
   the top pair is always in view without scrolling. */
#pbox{position:relative;width:min(920px,94vw);
  background:
    radial-gradient(circle 380px at 0% 0%, rgba(232,80,46,.3), transparent 70%),
    radial-gradient(circle 360px at 100% 0%, rgba(240,180,41,.32), transparent 70%),
    radial-gradient(circle 340px at 0% 100%, rgba(240,146,58,.26), transparent 70%),
    radial-gradient(circle 340px at 100% 100%, rgba(18,90,81,.2), transparent 70%),
    rgba(255,253,248,.97);
  backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border:1px solid rgba(255,255,255,.75);box-shadow:0 30px 80px rgba(21,17,9,.35);transform:scale(.9) translateY(16px);opacity:0;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .55s;max-height:92vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(232,80,46,.3) transparent}
#portal.open #pbox{transform:none;opacity:1}
/* Was floating ABOVE the box (top:-2.8rem) in faint low-opacity text —
   easy to miss entirely, and on a short mobile viewport it could sit
   off-screen above the visible box with no way to scroll up to it.
   Now a proper circular icon button pinned to the box's own top-right
   corner, sticky so it stays reachable even once #pbox's own content
   scrolls (position:sticky respects #pbox's overflow-y:auto). */
#pclose{
  position:sticky;top:1rem;display:flex;margin:1rem 1rem 0 auto;
  width:40px;height:40px;align-items:center;justify-content:center;
  background:rgba(255,255,255,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(13,11,8,.1);border-radius:50%;
  color:var(--ink);font-size:1.05rem;line-height:1;cursor:pointer;z-index:20;
  transition:background .25s,transform .25s;
}
#pclose:hover{background:#fff;transform:scale(1.08)}
#pbox #pvideo-area{max-width:none;margin:0}
#pbox #peditorial,#pbox #pthinking,#pbox #partefact,#pbox #poutcome{max-width:none;padding-left:3rem;padding-right:3rem}
#pbox #peditorial{padding-top:2rem}
#pbox #poutcome{padding-bottom:2.5rem}

/* ═══════════════════════════════
   INDIVIDUAL CASE STUDY PAGES (case-<slug>.html) — a real, dedicated
   page per project instead of one query-string template, laid out as an
   editorial: Hero Film → Challenge → Approach → The Film → Behind the
   Frame → Creative Process → Outcome. Sections are opt-in per project
   (a page simply omits the .cs-section markup it doesn't need) so no
   two case studies have to feel identical.
═══════════════════════════════ */
.cs-hero-media{width:100%;aspect-ratio:21/9;background:#070503;overflow:hidden;position:relative}
.cs-hero-media video,.cs-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.cs-hero-meta{max-width:920px;margin:0 auto;padding:2.5rem 5rem 1rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;position:relative}
.cs-hero-logo{max-height:40px;max-width:130px;object-fit:contain}
.cs-hero-client{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:300;color:var(--cream);line-height:1.25;padding-bottom:.15em}
.cs-hero-project{width:100%;font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-style:italic;color:rgba(245,237,216,.55)}

.cs-section{max-width:820px;margin:0 auto;padding:4.5rem 5rem;border-top:1px solid rgba(255,255,255,.06)}
.cs-label{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--saff);margin-bottom:1.4rem;display:flex;align-items:center;gap:.9rem}
.cs-label::before{content:'';width:1.4rem;height:1px;background:currentColor;display:block;opacity:.6}
.cs-head{font-family:'Cormorant Garamond',serif;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:300;color:var(--cream);line-height:1.35;padding-bottom:.12em;margin-bottom:1.3rem}
.cs-body{font-size:1rem;line-height:1.85;color:rgba(245,237,216,.75);max-width:640px}

.cs-film{max-width:920px;margin:0 auto;padding:0 5rem}

.cs-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:2rem}
.cs-placeholder{aspect-ratio:4/3;border:1px dashed rgba(255,255,255,.16);border-radius:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;background:rgba(255,255,255,.015);text-align:center;padding:1.5rem;transition:border-color .35s,background .35s}
.cs-placeholder:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.03)}
.cs-placeholder-icon{width:24px;height:24px;opacity:.4;stroke:currentColor;color:rgba(245,237,216,.7)}
.cs-placeholder-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,237,216,.6)}
.cs-placeholder-note{font-size:.66rem;color:rgba(245,237,216,.32);font-style:italic}

.cs-quote{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);padding:1.8rem 2rem;font-family:'Cormorant Garamond',serif;font-size:1.12rem;font-style:italic;color:rgba(245,237,216,.6);line-height:1.85;position:relative;margin-top:2rem}
.cs-quote::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--rust);opacity:.5}

.cs-outcome{background:var(--ink2)}
.cs-outcome .cs-label{color:rgba(96,190,112,.9)}
.cs-outcome .cs-label::before{content:'↑';background:none;width:auto;opacity:1}
.cs-outcome-result{font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:300;color:var(--cream);line-height:1.45;padding-bottom:.1em;margin-bottom:2rem;max-width:640px}

.cs-nextwrap{max-width:820px;margin:0 auto;padding:0 5rem 5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem}
.cs-next{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,237,216,.55);text-decoration:none;display:inline-flex;align-items:center;gap:.6rem;transition:color .3s}
.cs-next:hover{color:var(--cream)}
.cs-next .cs-next-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.05rem;letter-spacing:0;text-transform:none;color:var(--cream)}

/* ═══════════════════════════════
   OLD CASE-STUDY DETAIL PAGE TEMPLATE — the same pe-/pt-/pa-/po- content
   classes, plus pv-* for the video display, laid out as a full page
   instead of a popup (reached from Portfolio's grid).
═══════════════════════════════ */
#caseHero{padding:11rem 5rem 3rem;position:relative;overflow:hidden}
#pvideo-area{max-width:920px;margin:0 auto 3rem}
.pv-single{width:100%;aspect-ratio:16/9;background:#070503;overflow:hidden}
.pv-single.vertical{aspect-ratio:9/16;max-width:340px;margin:0 auto}
.pv-single video,.pv-single img{width:100%;height:100%;display:block;object-fit:cover;object-position:var(--focal,50% 22%);background:#070503}
.pv-single.vertical video,.pv-single.vertical img{object-fit:contain;object-position:center}
.pv-row{display:flex;gap:2px;background:#070503}
.pv-cell{flex:1 1 0;min-width:0;position:relative;overflow:hidden}
.pv-cell::before{content:'';display:block;padding-top:177.78%}
.pv-cell video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#070503}
/* Same fix as portfolio.css — a YouTube/Instagram facade isn't a plain
   video tag, so it kept sizing off its own aspect-ratio instead of
   filling the cell, leaving the ::before spacer empty (and dark) above it. */
.pv-cell .kkg-media-facade{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-width:none;margin:0}
.pv-cell .pv-label{position:absolute;left:0;right:0;bottom:0;padding:.6rem .6rem .5rem;font-family:'Manrope',sans-serif;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,237,216,.75);background:linear-gradient(to top,rgba(0,0,0,.75),transparent);pointer-events:none}

/* Hero + prev/next — see portfolio.css for the full rationale (shared
   pattern, kept in sync between the two popups). */
.pv-hero{position:relative}
/* 4+ vertical assets: a sliding 3-wide window over the full list — see
   portfolio.css for the full rationale (kept in sync). */
.pv-rowwrap{position:relative}
.pv-rowwrap .pv-nav:disabled{opacity:.35;cursor:default}
.pv-hero.vertical{max-width:340px;margin:0 auto}
.pv-slide{display:none}
.pv-slide.active{display:block}
.pv-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(13,11,8,.1);display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:6;color:var(--ink);font-size:1.15rem;line-height:1;padding:0;
  transition:background .2s,transform .2s;box-shadow:0 6px 18px rgba(13,11,8,.18)}
.pv-nav:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
.pv-nav.prev{left:.8rem}
.pv-nav.next{right:.8rem}
.pv-hero-count{position:absolute;right:.9rem;bottom:.9rem;z-index:6;font-family:'Manrope',sans-serif;
  font-size:.68rem;letter-spacing:.06em;color:#fff;background:rgba(13,11,8,.55);padding:.25rem .6rem;border-radius:20px}
.wm-strip{display:flex;gap:.5rem;overflow-x:auto;max-width:920px;margin:1.2rem auto 3rem;padding:0 5rem}
.wm-strip-item{flex:0 0 72px;height:50px;border-radius:4px;overflow:hidden;padding:0;cursor:pointer;
  background:#0D0B08;border:1px solid rgba(13,11,8,.15);transition:border-color .25s}
.wm-strip-item.active{border-color:var(--saff)}
.wm-strip-item:hover{border-color:rgba(232,131,42,.55)}
.wm-strip-item video,.wm-strip-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
/* #pimages / .pimg-label — the "extra assets" strip: images belonging to
   a project (campaign stills, carousel panels, etc.) no longer get mixed
   into the main video area's own side-by-side/sliding layout, which for
   a project with a dozen-plus images was stretching the whole popup out
   vertically. They sit here instead, below the video(s), as a row of
   small clickable thumbnails that open full-size in #imgLightbox. */
#pimages:empty{display:none}
.pimg-label{max-width:920px;margin:1.2rem auto 0;padding:0 5rem;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(13,11,8,.5)}
#imgLightbox{position:fixed;inset:0;z-index:8000;display:flex;align-items:center;justify-content:center;
  background:rgba(10,8,6,.92);opacity:0;pointer-events:none;transition:opacity .3s}
#imgLightbox.open{opacity:1;pointer-events:auto}
#imgLightbox img{max-width:90vw;max-height:90vh;border-radius:12px;box-shadow:0 40px 80px -20px rgba(0,0,0,.6);display:block}
#imgLightboxClose{position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:18px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
#imgLightboxClose:hover{background:rgba(255,255,255,.22)}
#peditorial{max-width:920px;margin:0 auto;padding:2rem 0;border-bottom:1px solid rgba(13,11,8,.08);position:relative;z-index:1}
.pe-heading{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.pe-logo{max-height:40px;max-width:130px;object-fit:contain}
.pe-client{font-family:'Cormorant Garamond',serif;font-size:3rem;font-weight:300;color:var(--ink);line-height:1.25;padding-bottom:.08em}
.pe-project{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-style:italic;color:rgba(13,11,8,.55);margin-top:.3rem;margin-bottom:1.5rem}
.pe-story{font-family:'Cormorant Garamond',serif;font-size:1.22rem;font-weight:300;color:rgba(13,11,8,.7);line-height:1.8;max-width:580px}
#pthinking{max-width:920px;margin:0 auto;padding:2.5rem 0;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;border-bottom:1px solid rgba(13,11,8,.08)}
.pt-label{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.65rem;display:flex;align-items:center;gap:.45rem}
.pt-dev{font-size:.95rem;font-family:serif}
.pt-label.ka{color:rgba(232,80,46,.85)}.pt-label.kh{color:rgba(201,148,14,.85)}.pt-label.ga{color:rgba(60,140,75,.9)}
.pt-body{font-size:.92rem;line-height:1.7;color:rgba(13,11,8,.68)}
#partefact{max-width:920px;margin:0 auto;padding:2.5rem 0;border-bottom:1px solid rgba(13,11,8,.08)}
.pa-label{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(13,11,8,.5);margin-bottom:1.2rem}
.pa-content{background:rgba(255,255,255,.55);border:1px solid rgba(13,11,8,.1);padding:1.8rem 2rem;font-family:'Cormorant Garamond',serif;font-size:1.12rem;font-style:italic;color:rgba(13,11,8,.7);line-height:1.8;position:relative}
.pa-content::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--rust);opacity:.45}
#poutcome{max-width:920px;margin:0 auto;padding:2rem 0 5rem}
.po-label{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(45,120,60,.95);margin-bottom:.65rem;display:flex;align-items:center;gap:.5rem}
.po-label::before{content:'↑'}
.po-result{font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-weight:300;color:var(--ink);line-height:1.4}
.po-back{display:inline-flex;margin-top:2.5rem}
#caseNotFound{padding:14rem 5rem 8rem;text-align:center}
#caseNotFound h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:2.4rem;color:var(--cream);margin-bottom:1.5rem}

/* ═══════════════════════════════
   CTA — brighter glow origin (Home)
═══════════════════════════════ */
/* text-align:center here (was only set by .cta-compact for the home
   teaser) so kaaran.html's own full-page version reads the same
   balanced, centered way once its card fills the wide gutter below,
   instead of left-hanging text pooling toward one side of a now-wide
   box. */
#cta{min-height:100vh;background:transparent;display:flex;align-items:center;padding:10rem 5rem;position:relative;overflow:hidden;--cta-glow-x:calc(320px + 50vw);text-align:center}
/* Compact version used on Home — the full rings/form/person experience
   now lives on its own page (kaaran.html); here it's just the question
   and two buttons, so it doesn't need a full viewport of height. */
#cta.cta-compact{min-height:auto;padding:7rem 5rem;justify-content:center;text-align:center}
/* DAWN — Home's compact "What is your Point?" now sits inside a real
   glass card (the same primitive services/work use) instead of floating
   free on the page, matching the mockup's .cta-band. The rings/glow-dot
   markup only exists on kaaran.html's full standalone page, not here, so
   nothing extra needs hiding for this variant. A 720px cap read as a
   small island lost on a full-width screen — the mockup's .cta-band
   isn't capped at all, just inset by its section's own margin, so this
   is a deliberately wide "closing statement" band, not a compact card
   like Services' own boxes; dropped the cap to fill #cta.cta-compact's
   existing 5rem gutter instead. */
/* #cta.cta-compact is a flex container (align-items/justify-content:
   center) — a flex item's width:auto shrinks to its content by default,
   margin:0 alone doesn't make it fill the row, so width:100% is what
   actually stretches the card to the section's gutter. */
.cta-compact .ctawrap{width:100%;max-width:none;margin:0;padding:3.75rem 3.5rem}
.cta-compact .ctabtns{justify-content:center;margin-bottom:0}
.cta-origin{position:absolute;left:var(--cta-glow-x);top:50%;transform:translate(-50%,-50%);width:clamp(280px,34vw,460px);height:clamp(280px,34vw,460px);pointer-events:none;z-index:1}
.cta-origin-dot{
  width:12px;height:12px;border-radius:50%;background:var(--rust);
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 22px 5px rgba(232,80,46,.7),0 0 70px 18px rgba(232,80,46,.35),0 0 150px 40px rgba(232,131,42,.16);
  animation:dotP 3s ease-in-out infinite;
}
@keyframes dotP{
  0%,100%{box-shadow:0 0 22px 5px rgba(232,80,46,.7),0 0 70px 18px rgba(232,80,46,.35),0 0 150px 40px rgba(232,131,42,.16)}
  50%{box-shadow:0 0 34px 8px rgba(232,80,46,.95),0 0 95px 25px rgba(232,80,46,.5),0 0 200px 55px rgba(232,131,42,.22)}
}
.cta-rings{position:absolute;left:var(--cta-glow-x);top:50%;transform:translate(-50%,-50%);width:clamp(280px,34vw,460px);height:clamp(280px,34vw,460px);pointer-events:none}
.cta-ring{position:absolute;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid;animation:rngp 6.5s ease-in-out infinite}
.cta-ring:nth-child(1){width:8%;height:8%;border-color:rgba(232,80,46,.45)}
.cta-ring:nth-child(2){width:22%;height:22%;border-color:rgba(232,80,46,.22);animation-delay:.7s}
.cta-ring:nth-child(3){width:40%;height:40%;border-color:rgba(232,131,42,.12);animation-delay:1.4s}
.cta-ring:nth-child(4){width:60%;height:60%;border-color:rgba(201,148,14,.07);animation-delay:2.1s}
.cta-ring:nth-child(5){width:80%;height:80%;border-color:rgba(13,11,8,.08);animation-delay:2.8s}
.cta-ring:nth-child(6){width:100%;height:100%;border-color:rgba(13,11,8,.04);animation-delay:3.5s}
@keyframes rngp{0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(1)}50%{opacity:.7;transform:translate(-50%,-50%) scale(1.025)}}
/* DAWN — kaaran.html's full page dropped the rings/glow-dot animation
   (decorative only, no JS dependency) in favour of the same glass card
   the rest of the site now uses; padding here is the standalone-page
   size, .cta-compact overrides it smaller for Home's teaser version. */
/* DAWN — was max-width:640px, which (as a flex item inside #cta's
   flex row) read as a narrow "phone screen" card floating in a huge
   expanse of background. width:100% actually fills the allowance
   (flex items don't stretch to their max-width on their own); capped
   at 900px rather than the homepage teaser's full-bleed width since
   this page carries paragraphs and a two-column form that need a
   sane line length, not just a headline and two buttons. */
.ctawrap{width:100%;max-width:900px;margin:0 auto;position:relative;z-index:2;padding:3.5rem 3.5rem}
@media(max-width:700px){ .ctawrap{padding:2.5rem 1.75rem} }
.cta-bridge{font-family:'Cormorant Garamond',serif;font-size:clamp(1.2rem,2.1vw,1.6rem);font-weight:300;color:rgba(13,11,8,.68);line-height:1.75;margin-bottom:3.5rem;font-style:italic}
/* DAWN — was thin Cormorant Garamond at up to 6.5rem, the same
   pre-Dawn display treatment already replaced on the home hero
   (.kg-tag), About (.tk-headline) and Selected Work (.workh); matched
   to the same bold Manrope + italic-gradient-accent pattern. */
.ctaq{font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-.01em;font-size:var(--display-lg);color:var(--ink);line-height:1.08;margin-bottom:1.4rem}
.ctaq em{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;background:linear-gradient(100deg,var(--rust),var(--saff) 60%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-sub{font-family:'Cormorant Garamond',serif;font-size:clamp(1.1rem,1.9vw,1.5rem);font-weight:300;color:rgba(13,11,8,.72);line-height:1.7;margin-bottom:4rem}
.ctabtns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-bottom:5rem}
/* DAWN — was tracked uppercase (.16em/.72rem); the mockup's .btn is
   plain-case bold text (14.5px/700), same register as the rest of the
   site's now-standardized Manrope body type instead of a shouty UI-caps
   treatment left over from the dark theme. */
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:1.1rem 2rem;font-family:'Manrope',sans-serif;font-size:.9rem;font-weight:700;text-decoration:none;border:none;border-radius:999px;transition:all .35s;cursor:pointer;position:relative;overflow:hidden}
.btnwa{background:linear-gradient(135deg,var(--rust),var(--saff));color:#fff;box-shadow:0 14px 30px -14px rgba(232,80,46,.5)}.btnwa:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(232,80,46,.6)}
.btnem{background:rgba(255,255,255,.6);color:var(--ink);border:1px solid rgba(13,11,8,.12)}.btnem:hover{border-color:rgba(13,11,8,.32)}
/* Cursor-tracked sheen — a soft highlight that follows the pointer
   across every button, the same idea as .glass's own highlight but
   simple enough for a solid/outline button (no blur/frost needed).
   --mx/--my are set per-element by the shared pointermove listener in
   main.js; unset (falls back to 50% 50%) they just sit centered. */
.btn::before,.kg-cta::before,.viewall::before,.fsub::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 60%);
  opacity:0;transition:opacity .3s;mix-blend-mode:overlay;
}
.btn:hover::before,.kg-cta:hover::before,.viewall:hover::before,.fsub:hover::before{opacity:1}
/* .ctawrap dropped its own max-width to fill the page's wide gutter
   (matching every other section) — the form/labels/inputs read oddly
   sprawled at that width and #cta's own new text-align:center would
   center every label and placeholder, which a form shouldn't do. Capped
   and re-left-aligned as its own centered column instead. */
.ctaform{border-top:1px solid rgba(13,11,8,.1);padding-top:4rem;max-width:760px;margin-left:auto;margin-right:auto;text-align:left}
.fhoney{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#ferr-submit{margin-top:1rem}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2rem}
.ffield{display:flex;flex-direction:column;gap:.5rem}
.ffield.full{grid-column:1/-1}
.flabel{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(13,11,8,.6)}
.fin,.fta{background:transparent;border:none;border-bottom:1px solid rgba(13,11,8,.2);color:var(--ink);padding:.9rem 0;font-family:'Manrope',sans-serif;font-size:1rem;outline:none;resize:none;transition:border-color .3s;width:100%}
.fin:focus,.fta:focus{border-bottom-color:rgba(232,80,46,.55)}
.fin::placeholder,.fta::placeholder{color:rgba(13,11,8,.28)}
.fin.err,.fta.err{border-bottom-color:rgba(200,80,50,.7)!important}
.ferr{font-size:.64rem;letter-spacing:.06em;color:#c0472c;margin-top:.3rem;display:none}
.ferr.show{display:block}
.fsub{margin-top:2.5rem;background:none;border:1px solid rgba(13,11,8,.22);color:var(--ink);padding:1.1rem 2.5rem;font-family:'Manrope',sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:all .4s;display:inline-flex;align-items:center;gap:.8rem;border-radius:999px;position:relative;overflow:hidden}
.fsub:hover{background:var(--rust);border-color:var(--rust);color:#fff}
.fsub.sent{border-color:rgba(60,140,75,.6);color:rgba(40,110,55,.9);cursor:default}
.cta-person{margin:4rem auto 0;padding-top:3.5rem;border-top:1px solid rgba(13,11,8,.08);display:flex;align-items:center;gap:1.8rem;max-width:760px;text-align:left}
.p-av{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--rust),var(--saff));display:flex;align-items:center;justify-content:center;font-family:serif;font-size:1.1rem;color:#fff;flex-shrink:0}
.p-name{font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--ink);margin-bottom:.3rem}
.p-links{display:flex;flex-direction:column;gap:.3rem}
.p-links a{font-size:.78rem;color:rgba(13,11,8,.6);text-decoration:none;transition:color .3s}
.p-links a:hover{color:rgba(232,131,42,.75)}

/* DAWN — footer was a solid near-black bar (an earlier "bookend"
   choice); the mockup's footer is transparent, just a hairline top
   border on the same cream ground as the rest of the page, so the page
   ends on the same wash it started on instead of hitting a hard black
   stop. */
footer{background:transparent;padding:2.5rem 5rem;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(13,11,8,.08);position:relative;z-index:1}
/* DAWN — logo mark alone read as a tiny, easy-to-miss glyph at 24px;
   the mockup's footer lockup is a bold "KaKhaGa" wordmark at 14px/800,
   same weight as the nav — paired the mark with that same text here
   (nav already does icon+text) and sized the mark up to sit with it. */
.ft-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.ft-logo{height:32px;width:auto}
.ft-wordmark{font-family:'Manrope',sans-serif;font-weight:800;font-size:1rem;color:var(--ink)}
/* DAWN — was tracked uppercase like the old dark-footer convention;
   the mockup's footer text is plain-case, matching the rest of the
   page's body type instead of a separate all-caps footer register. */
.ft-copy{font-size:.8rem;color:rgba(13,11,8,.5)}
.ft-links{display:flex;gap:2rem}
.ft-links a{font-size:.8rem;color:rgba(13,11,8,.55);text-decoration:none;transition:color .3s}
.ft-links a:hover{color:var(--rust)}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media(max-width:1000px){
  nav,nav.stuck{padding:1.2rem 1.5rem}
  .ncta{display:none}
  .nav-toggle{display:flex}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,253,248,.92);backdrop-filter:blur(20px) saturate(1.6);
    border-top:1px solid rgba(255,255,255,.6);
    padding:.5rem 1.5rem 1.5rem;
  }
  .nav-links.open{display:flex}
  .nav-links a{width:100%;padding:1.1rem 0;border-bottom:1px solid rgba(13,11,8,.08);font-size:.8rem;letter-spacing:.08em}
  .nav-links-cta{display:block;color:var(--rust)}
  #phil,#svc,#founder,#team,#trust,#bts-banner,#cta,#changes,#caseHero,#peditorial,#pthinking,#partefact,#poutcome,#work-showcase{padding-left:1.5rem;padding-right:1.5rem}
  #cta.cta-compact{padding:3.5rem 1.5rem;padding-left:1.5rem;padding-right:1.5rem}
  .cta-compact .ctawrap{padding:2.5rem 1.5rem}
  .bts-collage{grid-template-columns:repeat(3,1fr);grid-auto-rows:90px}
  .trust-names{gap:.4rem}
  .trust-names span{padding:.3rem .75rem;font-size:.7rem}
  .otherwork{padding-left:1.5rem;padding-right:1.5rem}
  .tk-steps,.svc-cats,.svc-list,.ch-cols{grid-template-columns:1fr}
  .ccard-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr);gap:2rem}
  .svcd-row{grid-template-columns:1fr;gap:1.6rem}
  .svcd-row:nth-child(even) .svcd-img{order:0}
  .svcd-img{aspect-ratio:16/11;height:auto;min-height:0}
  #svc-detail{padding:1rem 1.5rem 2.5rem}
  #svc-cta{padding:2.5rem 1.5rem}
  #work-showcase{padding-top:2.5rem;padding-bottom:0}
  .showcase-foot{padding:1.5rem 0 .5rem}
  .tk-step{border-right:none;padding-left:0!important;padding-right:0!important;border-bottom:1px solid rgba(13,11,8,.12)}
  .svc-cats{gap:3rem}
  .ch-col{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);padding:2.5rem 0}
  .ch-col:last-child{border-bottom:none}
  .fowrap{grid-template-columns:1fr;gap:4rem}
  .fo-portrait-img{max-width:340px}
  .fowrap-mag{flex-direction:column;max-width:640px;gap:0}
  .fo-portrait-mag{flex:none;max-width:280px;margin:0 auto 3rem;position:static}
  /* .fo-content was sizing itself off its own content's max-content
     width instead of stretching to fill this now-column .fowrap-mag —
     harmless normally, but the brand-marquee's .tn-row (width:max-content,
     built wide on purpose so it can loop) pushed that intrinsic width
     into the thousands of pixels, and every ancestor up to here inherited
     it, clipping all the body copy to a sliver instead of wrapping it.
     An explicit 100% width breaks that chain at the source. */
  .fo-content{width:100%;min-width:0}
  .fgrid{grid-template-columns:1fr}
  .cta-rings,.cta-origin{display:none}
  footer{flex-direction:column;gap:1.5rem;text-align:center}
  #pthinking{grid-template-columns:1fr}
  .hpills{flex-wrap:wrap;justify-content:center}
}

@media(max-height:760px){
  #morph-logo,#hero-logo{width:min(260px,42vw)}
  .htag{font-size:clamp(1.1rem,2.2vw,1.5rem)}
  .hero-sub,.loader-sub{top:calc(var(--heroAnchor) + (min(260px,42vw) * .265) + 1.1rem)}
  .hpills{margin-top:1.4rem}
  .hscroll{top:calc(84% + 58px)}
  .hscroll-line{height:20px}
}

@media(max-width:600px){
  /* Centered again (was pushed to 24% last round to make picture-screen
     room) — the hero-at-rest screen should look centralised like it did
     before. The picture-screen circles still get their clear room from
     the larger scroll-driven shift below (SHIFT_MOBILE), not from
     moving the resting anchor itself. */
  :root{--heroAnchor:40%}
  /* Logo (and its dependent tagline offset) shrunk from 300px/58vw —
     both the hero-nodes-not-behind-the-logo fix and this explicit
     request needed more clear vertical room on phones. */
  #morph-logo,#hero-logo{width:min(230px,44vw)}
  .hero-sub{top:calc(var(--heroAnchor) + (min(230px,44vw) * .265) + 1.2rem)}
  .loader-sub{top:calc(var(--heroAnchor) + (min(230px,44vw) * .265) + 1rem)}
  .htag{font-size:1.4rem}
  .hscroll-lbl{font-size:.6rem}
  .ccard-grid{grid-template-columns:1fr}
  /* Below 600px the #trustNames/#foBrands render scripts switch to a
     two-row, self-duplicating marquee markup (see those scripts) instead
     of the plain wrapped list — this is what actually lays it out and
     animates it. A soft edge mask reads better than a hard clip since
     each row's text is continuously sliding through it. */
  .trust-names,.fo-brands{
    display:flex;flex-direction:column;gap:.6rem;overflow:hidden;width:100%;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  }
  .tn-row{display:flex;align-items:center;width:max-content;white-space:nowrap;animation:tnScroll 22s linear infinite}
  .tn-row2{animation-direction:reverse;animation-duration:26s}
  .trust-names .tn-row{gap:.5rem}
  .fo-brands .tn-row{gap:1.5rem}
  .fo-brands .tn-row span::after{content:'';position:absolute;right:-.85rem;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:50%;background:rgba(74,63,50,.35)}
}
@keyframes tnScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media(max-width:480px){
  nav,nav.stuck{padding:.9rem 1rem}
  .nlogo{gap:.6rem}
  .nlogo-img{height:28px}
  .nlogo-text{font-size:.85rem}
  .nlogo-sub{display:none}
  .ncta{font-size:.58rem;letter-spacing:.06em;padding:.55rem .8rem;white-space:nowrap}
  .hpills{gap:0}
  .hpill{padding:0 .5rem}
  .hpill-d{font-size:1rem}
  .hpill-e{font-size:.58rem;letter-spacing:.14em}
  .hdiv{height:22px}
  .pe-heading{gap:.9rem}
  .cs-hero-meta,.cs-section,.cs-film,.cs-nextwrap{padding-left:1.5rem;padding-right:1.5rem}
  .cs-hero-media{aspect-ratio:4/5}
  .cs-section{padding-top:3rem;padding-bottom:3rem}
  .cs-gallery{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .cs-nextwrap{flex-direction:column;align-items:flex-start}
}

/* ═══════════════════════════════
   KKGMedia — reusable video/YouTube/Instagram/image facade component
   (assets/media-embed.js). Poster-first; the real player (self-hosted
   <video>, YouTube iframe, or Instagram's own embed) only mounts on
   click, so a facade costs nothing beyond its poster image until then.
═══════════════════════════════ */
.kkg-media-facade{position:relative;width:100%;aspect-ratio:16/9;background:#070503;overflow:hidden;cursor:pointer;border:none;padding:0}
.kkg-media-facade.kkg-media-vertical{aspect-ratio:9/16;max-width:340px;margin:0 auto}
.kkg-media-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kkg-media-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;
  background:rgba(13,11,8,.55);border:1px solid rgba(255,255,255,.3);color:#FAF3E0;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .25s,transform .25s;backdrop-filter:blur(2px)}
.kkg-media-facade:hover .kkg-media-play{background:var(--rust,#9B2F10);transform:translate(-50%,-50%) scale(1.08)}
.kkg-media-facade.kkg-media-active{cursor:default}
.kkg-media-facade.kkg-media-active .kkg-media-play,.kkg-media-facade.kkg-media-active .kkg-media-poster{display:none}
.kkg-media-iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Instagram facade mounts its embed immediately (see media-embed.js) —
   no poster/play button of our own, so it needs its own loading ground
   while the iframe fetches. */
.kkg-media-instagram-facade{background:#efeae3;display:flex;align-items:center;justify-content:center}
/* The crop itself: iframe is sized/positioned via JS (sizeInstagramCrop
   in media-embed.js) to push Instagram's fixed header above the visible
   window and let its footer run past the bottom; this wrapper's own
   overflow:hidden is what actually clips both away. */
.kkg-media-instagram-crop{position:absolute;inset:0;overflow:hidden;background:#efeae3}
.kkg-media-iframe-instagram-raw{border:0}
.kkg-media-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ═══════════════════════════════
   SERVICES → WORK PANEL
   The twelve home-page service boxes act as filters: click one and a panel
   of the matching work opens right under its row (assets/svc-work.js).
   Everything is scoped to [data-domain] boxes, so services.html's plain
   boxes are untouched. Hover/open states use box-shadow + border only —
   no transform — because .rv's reveal transition owns transform here.
═══════════════════════════════ */
.svc-box[data-domain]{cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease,background .4s ease}
.svc-box[data-domain]:hover{background:rgba(255,255,255,.72);border-color:rgba(232,80,46,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 26px 50px -28px rgba(232,80,46,.4)}
.svc-box[data-domain]:focus-visible{outline:2px solid var(--saff);outline-offset:3px}
.svc-box.is-open{background:rgba(255,255,255,.82);border-color:rgba(232,80,46,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 0 0 1px rgba(232,80,46,.25),0 28px 56px -26px rgba(232,80,46,.5)}
.svc-meta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:1.15rem;
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(13,11,8,.46);transition:color .3s}
.svc-box[data-domain]:hover .svc-meta,.svc-box.is-open .svc-meta{color:var(--rust)}
.svc-plus{position:relative;flex:0 0 24px;width:24px;height:24px;border-radius:50%;border:1px solid currentColor;transition:transform .45s cubic-bezier(.16,1,.3,1),background .3s,color .3s}
.svc-plus::before,.svc-plus::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)}
.svc-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.svc-box.is-open .svc-plus{transform:rotate(45deg);background:var(--rust);color:#fff}

.svc-panel{grid-column:1/-1;position:relative;display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.svc-panel.open{grid-template-rows:1fr;opacity:1}
.svc-panel-clip{min-height:0;overflow:hidden;padding-bottom:16px;margin-bottom:-16px}
.svc-panel-in{position:relative;padding:1.7rem 1.8rem 1.3rem;border-radius:22px;background:rgba(255,253,248,.88);
  border:1px solid rgba(232,80,46,.3);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 16px 30px -26px rgba(21,17,9,.4)}
.svc-panel::before{content:"";position:absolute;z-index:3;top:-9px;left:calc(var(--notch-x,60px) - 9px);width:18px;height:18px;
  background:rgba(255,255,255,.95);border-left:1px solid rgba(232,80,46,.45);border-top:1px solid rgba(232,80,46,.45);
  border-radius:4px 0 0 0;transform:rotate(45deg);opacity:0;transition:opacity .4s ease .15s,left .5s cubic-bezier(.16,1,.3,1)}
.svc-panel.open::before{opacity:1}
.svc-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.svc-panel-eyebrow{font-size:.64rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--saff)}
.svc-panel-title{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(1.6rem,1.3rem + 1.2vw,2.2rem);line-height:1.1;color:var(--ink);margin-top:.3rem}
.svc-panel-actions{display:flex;align-items:center;gap:1.1rem}
.svc-panel-all{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);text-decoration:none;
  border-bottom:1px solid rgba(232,80,46,.4);padding-bottom:2px;transition:border-color .3s}
.svc-panel-all:hover{border-color:var(--rust)}
.svc-panel-x{width:34px;height:34px;border-radius:50%;border:1px solid rgba(13,11,8,.2);background:rgba(255,255,255,.6);cursor:pointer;
  font-size:1.05rem;line-height:1;color:rgba(13,11,8,.65);transition:background .3s,color .3s,border-color .3s}
.svc-panel-x:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.svc-strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:.2rem .1rem 1rem;margin:0 -.1rem;
  scrollbar-width:thin;scrollbar-color:rgba(13,11,8,.25) transparent;transition:opacity .28s ease}
.svc-strip.swap{opacity:0}
.svc-work{flex:0 0 min(210px,62vw);scroll-snap-align:start;display:block;text-decoration:none;color:inherit}
.svc-work-media{position:relative;display:block;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#12100c;
  box-shadow:0 18px 36px -24px rgba(21,17,9,.55);transition:box-shadow .45s ease}
.svc-work-media img,.svc-work-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focal,50% 30%);
  display:block;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.svc-work:hover .svc-work-media{box-shadow:0 26px 44px -22px rgba(232,80,46,.55)}
.svc-work:hover .svc-work-media img{transform:scale(1.06)}
.svc-work-media::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(0deg,rgba(8,6,4,.55),transparent);pointer-events:none}
.svc-work-play{position:absolute;z-index:2;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.88);
  display:flex;align-items:center;justify-content:center;color:var(--ink)}
.svc-work-play svg{width:12px;height:12px;margin-left:1px}
.svc-work-meta{display:block;padding:.75rem .15rem 0}
.svc-work-brand{display:block;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--saff-d,var(--rust))}
.svc-work-name{display:block;margin-top:.25rem;font-size:.9rem;font-weight:700;line-height:1.3;color:var(--ink)}
.svc-work-tag{display:block;margin-top:.25rem;font-size:.7rem;color:rgba(13,11,8,.5)}
.svc-panel-empty{padding:1.4rem 0 .4rem;font-size:.92rem;color:rgba(13,11,8,.6)}
@media(max-width:560px){ .svc-panel-in{padding:1.3rem 1.1rem 1.4rem} .svc-work{flex-basis:min(176px,56vw)} }
@media(prefers-reduced-motion:reduce){
  .svc-panel,.svc-panel::before,.svc-strip,.svc-plus,.svc-work-media img{transition:none!important}
}

/* Work-panel scroll arrows: only visible while work is hidden off that side of the strip */
.svc-stripwrap{position:relative;--cw:min(210px,62vw)}
.svc-nav{position:absolute;z-index:4;top:calc(var(--cw) * .625 + .2rem);transform:translateY(-50%);width:42px;height:42px;padding:0;border-radius:50%;
  border:1px solid rgba(13,11,8,.12);background:rgba(255,255,255,.97);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px -8px rgba(21,17,9,.45);transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1),background .3s,color .3s}
.svc-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc-nav:hover{background:var(--ink);color:#fff;transform:translateY(-50%) scale(1.07)}
.svc-nav:focus-visible{outline:2px solid var(--saff);outline-offset:2px}
.svc-nav.prev{left:-12px}
.svc-nav.next{right:-12px}
.svc-nav.is-off{opacity:0;pointer-events:none}
@media(max-width:560px){ .svc-stripwrap{--cw:min(176px,56vw)} .svc-nav{width:36px;height:36px} .svc-nav.prev{left:-6px} .svc-nav.next{right:-6px} }
@media(prefers-reduced-motion:reduce){ .svc-nav{transition:none!important} }