/* ==========================================================================
   DigitalOk — design system
   Light editorial theme. Ink + paper + one orange accent.
   Motion is a first-class layer: see "ANIMATION ENGINE" below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* paper — the page is light by default and stays light */
  --paper:#FAF8F4;
  --paper-2:#F3EFE8;
  --paper-3:#EDE7DC;
  --white:#FFFFFF;

  /* ink — used sparingly, as punctuation rather than as half the page */
  --ink:#0E0E10;
  --ink-2:#1B1B1F;

  /* accent */
  --orange:#FF5A1F;
  --orange-2:#FF8A4C;
  --orange-deep:#D6420A;   /* small text on light: passes AA */
  --gold:#FFB85C;
  --wash:rgba(255,90,31,0.07);
  --wash-2:rgba(255,90,31,0.13);

  /* text */
  --steel:#8A8580;
  --steel-dark:#56524C;

  /* rules */
  --line:rgba(14,14,16,0.08);
  --line-strong:rgba(14,14,16,0.15);

  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.2,.8,.2,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --dur:0.85s;
  --dur-fast:0.35s;

  /* layout */
  --wrap:1360px;
  --gutter:40px;
  --r:20px;
  --r-lg:36px;
  --nav-h:76px;
}

/* --------------------------------------------------------------------------
   1b. CROSS-DOCUMENT VIEW TRANSITIONS
   Turns every page navigation into a morph instead of a white flash. Browsers
   without support simply navigate normally — nothing to fall back to.
   -------------------------------------------------------------------------- */
@view-transition{navigation:auto;}

/* Elements that persist across pages keep their identity through the morph */
.brand img{view-transition-name:brand-mark;}
.nav{view-transition-name:site-nav;}
.wa-float{view-transition-name:wa-float;}

::view-transition-old(root){animation:vt-out .3s var(--ease-io) both;}
::view-transition-new(root){animation:vt-in .44s var(--ease-out) both;}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px) scale(.994);}}
@keyframes vt-in{from{opacity:0;transform:translateY(20px) scale(1.006);}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none;}
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  /* Horizontal entrance animations (fade-left/right) overhang the viewport
     before they reveal. `hidden` would make body a scroll container and break
     position:sticky; `clip` contains the overhang without that side effect.
     Browsers without `clip` fall back to the preceding declaration. */
  overflow-x:hidden;
  overflow-x:clip;
  position:relative;
  /* smooth tonal shift as sections scroll past (see js: section tinting) */
  transition:background-color 1.2s linear;
}
body.tint-warm{background:var(--paper-2);}
body.tint-deep{background:var(--paper-3);}

h1,h2,h3,h4,h5{
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:900;
  letter-spacing:-0.03em;
  line-height:0.94;
  text-transform:uppercase;
  text-wrap:balance;
}
a{text-decoration:none;color:inherit;}
img,svg,video{display:block;max-width:100%;}
img{height:auto;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
ul{list-style:none;}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2;}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:0.02em;}
.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;}

/* ==========================================================================
   3. ANIMATION ENGINE
   One vocabulary, driven by IntersectionObserver adding .in.
   Every animation touches only opacity / transform / clip-path / filter,
   so nothing here triggers layout or paint on the main thread.
   ========================================================================== */

/* Every "hidden until revealed" state is gated behind html.js, which an inline
   head script sets. Without JS — or if main.js throws before the observer is
   wired — the content renders plainly instead of staying invisible forever. */
html.js [data-anim]{
  opacity:0;
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    clip-path var(--dur) var(--ease-out),
    filter var(--dur) var(--ease-out);
  transition-delay:var(--d,0ms);
}
html.js [data-anim].in{opacity:1;transform:none;clip-path:inset(0 0 0 0);filter:none;}

html.js [data-anim="fade"]        {                          }
html.js [data-anim="fade-up"]     { transform:translateY(46px); }
html.js [data-anim="fade-down"]   { transform:translateY(-38px); }
html.js [data-anim="fade-right"]  { transform:translateX(-58px); }
html.js [data-anim="fade-left"]   { transform:translateX(58px); }
html.js [data-anim="zoom-in"]     { transform:scale(.9); }
html.js [data-anim="zoom-out"]    { transform:scale(1.09); }
html.js [data-anim="blur-in"]     { filter:blur(16px); transform:translateY(24px) scale(1.02); }
html.js [data-anim="clip-up"]     { clip-path:inset(100% 0 0 0); transform:translateY(34px); }
html.js [data-anim="clip-right"]  { clip-path:inset(0 100% 0 0); }
html.js [data-anim="clip-left"]   { clip-path:inset(0 0 0 100%); }
html.js [data-anim="rotate-in"]   { transform:rotate(-4.5deg) translateY(46px) scale(.95); }
html.js [data-anim="flip-up"]     { transform:perspective(1000px) rotateX(-32deg) translateY(44px); transform-origin:bottom center; }
html.js [data-anim="swing-in"]    { transform:perspective(1000px) rotateY(-22deg) translateX(50px); transform-origin:left center; }

/* Slower, weightier variant for large media */
[data-anim].slow{--dur:1.25s;}

/* --- Split-text headline masking -------------------------------------------
   js wraps each word as <span class="sp-w"><i>word</i></span>.
   The mask is the wrapper; the <i> slides up out of it. */
.sp-w{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  /* breathing room so descenders and the -0.03em tracking aren't clipped */
  padding:0 0.06em 0.1em;
  margin:0 -0.06em -0.1em;
}
.sp-w > i{
  display:inline-block;
  font-style:inherit;
  transition:transform 1s var(--ease-out);
  transition-delay:var(--d,0ms);
}
html.js .sp-w > i{transform:translateY(112%) rotate(2.5deg);}
html.js .split.in .sp-w > i{transform:translateY(0) rotate(0);}

/* Per-character variant, for short eyebrow strings only */
.sp-c{display:inline-block;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);transition-delay:var(--d,0ms);}
.sp-c.space{width:0.32em;}
html.js .sp-c{opacity:0;transform:translateY(60%);}
html.js .split.in .sp-c{opacity:1;transform:none;}

/* --- Shimmering gradient text --------------------------------------------- */
.accent{
  background:linear-gradient(100deg,var(--orange-deep) 0%,var(--orange) 22%,var(--gold) 45%,var(--orange) 68%,var(--orange-deep) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:shimmer 5s linear infinite;
}
@keyframes shimmer{from{background-position:0% 50%;}to{background-position:300% 50%;}}

/* Orange underline that draws itself in when the line is revealed */
.mark{position:relative;display:inline-block;}
.mark::after{
  content:'';position:absolute;left:0;right:0;bottom:0.06em;height:0.16em;
  background:var(--wash-2);z-index:-1;
  transform-origin:left;
  transition:transform 1s var(--ease-out) .35s;
}
html.js .mark::after{transform:scaleX(0);}
html.js .split.in .mark::after,html.js [data-anim].in .mark::after{transform:scaleX(1);}

/* --- Stagger helper: js sets --d per child, this is the fallback ---------- */
.stagger > *{--d:calc(var(--i,0) * 90ms);}

/* --- Scroll progress bar -------------------------------------------------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;z-index:200;
  width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--orange-deep),var(--orange) 50%,var(--gold));
  pointer-events:none;
}

/* --- Counters ------------------------------------------------------------- */
.count{font-variant-numeric:tabular-nums;}

/* --- SVG line drawing ----------------------------------------------------- */
[data-draw]{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);transition:stroke-dashoffset 1.6s var(--ease-io);transition-delay:var(--d,0ms);}
[data-draw].in{stroke-dashoffset:0;}

/* ==========================================================================
   4. AMBIENT TEXTURE
   ========================================================================== */
.grain{
  position:fixed;inset:0;z-index:400;pointer-events:none;
  opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,90,31,.11) 0%,rgba(255,90,31,0) 70%);
  pointer-events:none;z-index:1;
  transform:translate3d(-50%,-50%,0);
  opacity:0;transition:opacity .4s ease;
}
.mesh{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 720px 520px at 16% 16%,rgba(255,90,31,.15) 0%,transparent 62%),
    radial-gradient(ellipse 620px 620px at 86% 28%,rgba(255,184,92,.14) 0%,transparent 62%),
    radial-gradient(ellipse 820px 520px at 50% 98%,rgba(14,14,16,.045) 0%,transparent 62%);
}
.glint{position:absolute;border-radius:50%;pointer-events:none;animation:glint-float linear infinite;}
@keyframes glint-float{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.65;}
  50%{transform:translate3d(14px,-32px,0) scale(1.35);opacity:1;}
}
.shard{
  position:absolute;background:var(--ink);pointer-events:none;opacity:.055;
  clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);
}

/* ==========================================================================
   5. NAV
   ========================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:300;
  background:rgba(250,248,244,.82);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:box-shadow .35s ease,border-color .35s ease,transform .45s var(--ease-io);
}
.nav.scrolled{box-shadow:0 1px 28px rgba(14,14,16,.07);border-bottom-color:var(--line);}
.nav.hidden{transform:translateY(-100%);}
.nav-inner{
  max-width:var(--wrap);margin:0 auto;padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
/* Logo is deliberately large — a specific client request */
.brand img{height:56px;width:auto;transition:transform .45s var(--ease-back);}
.brand:hover img{transform:scale(1.06) rotate(-1.5deg);}

.nav-links{display:flex;gap:26px;align-items:center;}
.nav-links a{
  font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  position:relative;padding:7px 0;color:var(--ink);
  transition:color .3s ease;
}
/* Every nav item turns orange on hover, with the rule sweeping in underneath */
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;height:2px;width:100%;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-io);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--orange-deep);}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);}

.nav-cta{
  background:var(--orange);color:var(--ink);
  padding:12px 22px;border-radius:40px;
  font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .35s var(--ease-io),box-shadow .35s ease;
}
.nav-cta:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 26px rgba(255,90,31,.38);}
.nav-cta::after{display:none;}

.burger{display:none;width:44px;height:40px;border:1px solid var(--line-strong);border-radius:10px;position:relative;}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);transition:transform .35s var(--ease-io),opacity .2s;}
.burger span:nth-child(1){top:14px;}
.burger span:nth-child(2){top:19px;}
.burger span:nth-child(3){top:24px;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

.mobile-menu{
  position:fixed;inset:var(--nav-h) 0 0;z-index:290;
  background:var(--paper);padding:24px var(--gutter) 40px;
  display:flex;flex-direction:column;gap:2px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .5s var(--ease-io);
  overflow-y:auto;
}
.mobile-menu.open{clip-path:inset(0 0 0 0);}
.mobile-menu a{
  font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;
  font-size:26px;letter-spacing:-.02em;padding:15px 0;
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(22px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),color .2s;
}
.mobile-menu.open a{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 55ms + 120ms);}
.mobile-menu a:hover{color:var(--orange-deep);}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:17px 32px;border-radius:44px;
  font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  position:relative;overflow:hidden;
  transition:transform .4s var(--ease-io),box-shadow .4s ease,background-color .3s,color .3s,border-color .3s;
}
.btn .arrow{transition:transform .4s var(--ease-io);}
.btn:hover .arrow{transform:translateX(5px);}

.btn-primary{background:var(--orange);color:var(--ink);}
/* light sweep across the face on hover */
.btn-primary::before{
  content:'';position:absolute;top:0;left:-110%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg);transition:left .65s ease;
}
.btn-primary:hover::before{left:150%;}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(255,90,31,.4);}

.btn-ink{background:var(--ink);color:var(--paper);}
.btn-ink:hover{transform:translateY(-3px);background:var(--orange);color:var(--ink);box-shadow:0 16px 34px rgba(255,90,31,.35);}

.btn-ghost{border:1.5px solid var(--line-strong);color:var(--ink);}
.btn-ghost:hover{border-color:var(--orange);background:var(--wash);transform:translateY(-3px);}

.btn-wa{background:#25D366;color:#08240F;}
.btn-wa:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(37,211,102,.4);}

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero{
  position:relative;
  padding:calc(var(--nav-h) + 74px) 0 90px;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:var(--orange-deep);
  display:flex;align-items:center;gap:11px;margin-bottom:26px;
}
.eyebrow .rule{width:34px;height:1px;background:var(--orange-deep);transform-origin:left;transition:transform .7s var(--ease-out) .1s;}
html.js .eyebrow .rule{transform:scaleX(0);}
html.js .eyebrow.in .rule,html.js .split.in .rule{transform:scaleX(1);}

.hero h1{font-size:clamp(44px,8vw,124px);max-width:15ch;}
.hero-sub{
  font-size:clamp(17px,1.4vw,19.5px);color:var(--steel-dark);
  max-width:58ch;margin:32px 0 42px;line-height:1.65;
}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:64px;}

/* Hero media collage — each tile rises on its own delay */
.hero-collage{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:18px;}
.tile{
  position:relative;border-radius:var(--r);overflow:hidden;
  box-shadow:0 26px 62px -22px rgba(14,14,16,.26);
  transition:transform .5s var(--ease-io),box-shadow .5s ease;
}
.tile:hover{transform:translateY(-9px) rotate(-.5deg);box-shadow:0 34px 70px -20px rgba(14,14,16,.3);}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-io);}
.tile:hover img{transform:scale(1.06);}
.tile-tall{height:430px;}
.tile-stack{display:flex;flex-direction:column;gap:18px;}
.tag{
  position:absolute;bottom:16px;left:16px;
  background:rgba(14,14,16,.8);backdrop-filter:blur(8px);color:var(--paper);
  padding:9px 16px;border-radius:30px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;
  display:flex;align-items:center;gap:8px;
}
.pip{width:6px;height:6px;background:var(--orange);border-radius:50%;animation:pip 2s ease-in-out infinite;}
@keyframes pip{0%,100%{box-shadow:0 0 0 0 rgba(255,90,31,.7);}50%{box-shadow:0 0 0 6px rgba(255,90,31,0);}}

.stat-tile{
  background:var(--ink);color:var(--paper);border-radius:var(--r);
  padding:26px;flex:1;display:flex;flex-direction:column;justify-content:center;
  background-image:radial-gradient(circle at 88% 12%,rgba(255,90,31,.34),transparent 62%);
  box-shadow:0 26px 62px -22px rgba(14,14,16,.3);
}
.stat-tile .n{font-family:'Archivo',sans-serif;font-weight:800;font-size:40px;line-height:1;color:var(--orange-2);}
.stat-tile .l{font-size:11px;color:var(--steel);text-transform:uppercase;letter-spacing:.04em;margin-top:8px;line-height:1.45;}

/* ==========================================================================
   8. MARQUEE — speed reacts to scroll velocity (js sets --vel)
   ========================================================================== */
.marquee{
  background:var(--ink);color:var(--paper);
  overflow:hidden;white-space:nowrap;padding:15px 0;position:relative;
}
.marquee::before,.marquee::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;}
.marquee::before{left:0;background:linear-gradient(90deg,var(--ink),transparent);}
.marquee::after{right:0;background:linear-gradient(270deg,var(--ink),transparent);}
.marquee-track{display:inline-flex;animation:marquee 34s linear infinite;animation-play-state:running;}
.marquee-track > span{
  font-family:'JetBrains Mono',monospace;font-weight:600;font-size:13.5px;
  padding:0 30px;text-transform:uppercase;letter-spacing:.04em;
  display:flex;align-items:center;gap:13px;
}
.marquee-track > span::before{content:'\2726';color:var(--orange);font-size:11px;}
@keyframes marquee{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}

/* ==========================================================================
   9. SECTION FRAMEWORK
   ========================================================================== */
section{padding:clamp(80px,10vw,132px) 0;position:relative;}
.band-2{background:var(--paper-2);}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:44px;margin-bottom:66px;}
.section-num{
  font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700;
  color:var(--orange-deep);display:flex;align-items:center;gap:11px;margin-bottom:18px;
}
.section-num .rule{width:26px;height:1px;background:var(--orange-deep);transform-origin:left;transition:transform .7s var(--ease-out);}
html.js .section-num .rule{transform:scaleX(0);}
html.js .section-num.in .rule{transform:scaleX(1);}
.section-head h2{font-size:clamp(31px,4.6vw,60px);max-width:22ch;}
.section-desc{
  font-family:'Space Grotesk',sans-serif;font-weight:400;text-transform:none;
  color:var(--steel);font-size:15.5px;max-width:32ch;line-height:1.65;letter-spacing:0;
}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.7;color:var(--steel-dark);max-width:66ch;}
.body-copy p{font-size:16.5px;line-height:1.78;color:var(--steel-dark);margin-bottom:18px;}
.body-copy p:last-child{margin-bottom:0;}

/* Inner-page hero: the one place a dark slab is used above the fold */
.page-hero{
  background:var(--ink);color:var(--paper);
  padding:calc(var(--nav-h) + 78px) 0 78px;position:relative;overflow:hidden;
}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 560px at 86% 18%,rgba(255,90,31,.2),transparent);}
.page-hero .eyebrow{color:var(--orange-2);}
.page-hero .eyebrow .rule{background:var(--orange-2);}
.page-hero h1{font-size:clamp(32px,5.8vw,74px);max-width:20ch;position:relative;z-index:2;}
.page-hero p{font-size:17px;color:var(--steel);max-width:62ch;margin-top:22px;line-height:1.68;position:relative;z-index:2;}
.page-hero .btn{margin-top:34px;position:relative;z-index:2;}

/* ==========================================================================
   10. CARDS
   ========================================================================== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:34px 30px;position:relative;overflow:hidden;
  box-shadow:0 2px 14px rgba(14,14,16,.04);
  transition:transform .45s var(--ease-io),box-shadow .45s ease,border-color .3s;
}
/* gradient hairline wipes across the top edge on hover */
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--orange),var(--gold));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-io);
}
.card:hover{transform:translateY(-10px);box-shadow:0 30px 54px -20px rgba(14,14,16,.19);border-color:transparent;}
.card:hover::before{transform:scaleX(1);}
.card .idx{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700;color:var(--orange);display:block;margin-bottom:22px;}
.card h3{font-size:21px;text-transform:none;letter-spacing:-.01em;line-height:1.28;margin-bottom:11px;}
.card p{font-size:14.5px;color:var(--steel);line-height:1.62;}
.card-media{margin:-34px -30px 24px;height:170px;overflow:hidden;}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-io);}
.card:hover .card-media img{transform:scale(1.07);}

/* Media-led card used for the three pillars and the eight reasons */
.tile-card{
  border-radius:var(--r);overflow:hidden;position:relative;
  background:var(--white);border:1px solid var(--line);
  transition:transform .45s var(--ease-io),box-shadow .45s ease;
}
.tile-card:hover{transform:translateY(-8px);box-shadow:0 28px 52px -20px rgba(14,14,16,.2);}
.tile-card .media{height:190px;overflow:hidden;}
.tile-card .media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-io);}
.tile-card:hover .media img{transform:scale(1.08);}
.tile-card .body{padding:26px 24px 28px;}
.tile-card h3,.tile-card h4{font-size:18px;text-transform:none;letter-spacing:-.01em;line-height:1.3;margin-bottom:9px;}
.tile-card p{font-size:14px;color:var(--steel);line-height:1.6;}

/* Chips — industries, credentials, keyword tags */
.chips{display:flex;gap:10px;flex-wrap:wrap;}
.chip{
  font-family:'JetBrains Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.03em;
  border:1px solid var(--line-strong);color:var(--steel-dark);
  padding:9px 16px;border-radius:30px;background:var(--white);
  display:inline-flex;align-items:center;gap:9px;
  transition:transform .3s var(--ease-back),border-color .3s,color .3s,background-color .3s;
}
.chip:hover{transform:translateY(-3px) scale(1.03);border-color:var(--orange);color:var(--orange-deep);background:var(--wash);}
.chip .ico{font-size:14px;line-height:1;}
.chip.on-dark{border-color:rgba(255,255,255,.2);color:var(--paper);background:transparent;}
.chip.on-dark:hover{border-color:var(--orange);color:var(--orange-2);background:rgba(255,90,31,.1);}

/* The single dark punctuation band */
.slab{
  background:var(--ink);color:var(--paper);
  border-radius:var(--r-lg);margin:0 24px;position:relative;overflow:hidden;
}
.slab::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle 420px at 12% 18%,rgba(255,90,31,.2),transparent),
    radial-gradient(circle 520px at 88% 82%,rgba(255,184,92,.15),transparent);
}
.slab .section-desc{color:var(--steel);}
.slab .section-num{color:var(--orange-2);}
.slab .section-num .rule{background:var(--orange-2);}
.slab-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.09);border-radius:var(--r);overflow:hidden;
  position:relative;z-index:2;
}
.slab-cell{background:var(--ink);padding:34px 26px;transition:background-color .35s ease;}
.slab-cell:hover{background:rgba(255,90,31,.09);}
.slab-cell .n{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--orange-2);display:block;margin-bottom:18px;}
.slab-cell h4{font-size:16.5px;text-transform:none;letter-spacing:-.01em;line-height:1.28;margin-bottom:9px;}
.slab-cell p{font-size:13.5px;color:var(--steel);line-height:1.58;}

/* Orange CTA band */
.cta-band{
  background:linear-gradient(120deg,var(--orange-deep),var(--orange) 42%,var(--gold) 92%);
  color:var(--ink);border-radius:var(--r-lg);margin:0 24px;
  padding:clamp(64px,8vw,104px) 0;text-align:center;position:relative;overflow:hidden;
}
.cta-band::before{
  content:'';position:absolute;inset:0;opacity:.45;
  background-image:radial-gradient(circle,rgba(255,255,255,.65) 1px,transparent 1px);
  background-size:26px 26px;
}
.cta-band h2{font-size:clamp(32px,5.4vw,72px);margin-bottom:24px;position:relative;z-index:2;}
.cta-band p{font-size:17px;max-width:58ch;margin:0 auto 36px;font-weight:500;position:relative;z-index:2;line-height:1.6;}
.cta-band .btn{position:relative;z-index:2;}

/* ==========================================================================
   11. STICKY PILLAR SCROLLER
   Left column pins; the image cross-fades as each text block scrolls through.
   ========================================================================== */
.sticky-scroller{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
/* Fills the viewport height rather than sitting as a short 4:5 card — otherwise
   the pinned column leaves hundreds of pixels of dead space beside pillars 2-3. */
.sticky-media{
  position:sticky;top:calc(var(--nav-h) + 26px);
  height:calc(100vh - var(--nav-h) - 72px);
  min-height:520px;max-height:780px;
  border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--ink);
  box-shadow:0 30px 70px -26px rgba(14,14,16,.3);
}
.sticky-frame{position:relative;flex:1;overflow:hidden;}
.sticky-frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .8s var(--ease-io),transform 1.2s var(--ease-io);
}
/* Without JS the stack collapses to just the first image, which is correct. */
html.js .sticky-frame img{opacity:0;transform:scale(1.08);}
html.js .sticky-frame img.on{opacity:1;transform:scale(1);}
html:not(.js) .sticky-frame img:not(:first-child){display:none;}

/* Live indicator: shows which pillar you're reading, and gives the pinned
   column something purposeful to occupy the space with. */
.sticky-legend{
  background:var(--ink);color:var(--paper);
  padding:16px 22px 18px;display:grid;gap:1px;flex-shrink:0;
  position:relative;
}
.sticky-legend::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(255,255,255,.12);
}
.leg-row{
  display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px;
  padding:9px 0;font-size:14px;font-weight:600;color:var(--steel);
  transition:color .4s ease;
}
.leg-row b{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  color:rgba(255,255,255,.28);transition:color .4s ease;
}
.leg-row::after{
  content:'';grid-column:1 / -1;height:2px;margin-top:8px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-io);
}
.leg-row.on{color:var(--paper);}
.leg-row.on b{color:var(--orange-2);}
.leg-row.on::after{transform:scaleX(1);}

.sticky-steps > * + *{margin-top:clamp(48px,8vh,96px);}
.sticky-step{transition:opacity .5s ease;}
.sticky-step .n{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700;color:var(--orange);display:block;margin-bottom:16px;}
.sticky-step h3{font-size:clamp(24px,3vw,36px);margin-bottom:14px;text-transform:none;letter-spacing:-.02em;line-height:1.15;}
.sticky-step p{font-size:16px;line-height:1.72;color:var(--steel-dark);}

/* ==========================================================================
   12. HORIZONTAL RAIL — the twelve disciplines
   ========================================================================== */
.rail{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 24px;margin:0 -4px;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
.rail::-webkit-scrollbar{height:6px;}
.rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px;}
.rail > *{flex:0 0 clamp(240px,26vw,300px);scroll-snap-align:start;}
.rail-hint{
  font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--steel);margin-top:14px;
  display:flex;align-items:center;gap:9px;
}
.rail-hint .dash{width:26px;height:1px;background:var(--steel);animation:nudge 2s ease-in-out infinite;}
@keyframes nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(8px);}}

/* ==========================================================================
   13. PROCESS TIMELINE — vertical rule fills as you scroll through it
   ========================================================================== */
.process{position:relative;padding-left:56px;}
.process::before{content:'';position:absolute;left:17px;top:8px;bottom:8px;width:2px;background:var(--line-strong);}
.process-fill{
  position:absolute;left:17px;top:8px;width:2px;
  background:linear-gradient(180deg,var(--orange),var(--gold));
  height:var(--fill,0%);transition:height .25s linear;
}
.step{position:relative;padding-bottom:44px;}
.step:last-child{padding-bottom:0;}
.step::before{
  content:'';position:absolute;left:-48px;top:5px;
  width:14px;height:14px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line-strong);
  transition:background-color .4s ease,border-color .4s ease,transform .4s var(--ease-back);
}
.step.in::before{background:var(--orange);border-color:var(--orange);transform:scale(1.22);}
.step .n{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;color:var(--orange-deep);letter-spacing:.06em;}
.step h4{font-size:20px;text-transform:none;letter-spacing:-.01em;margin:7px 0 8px;}
.step p{font-size:15px;color:var(--steel-dark);line-height:1.68;max-width:56ch;}

/* Career timeline (about page) */
.tl-row{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);}
.tl-row .yr{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--orange-deep);font-size:13.5px;}
.tl-row h4{font-size:17.5px;text-transform:none;letter-spacing:-.01em;margin-bottom:6px;}
.tl-row p{font-size:14.5px;color:var(--steel-dark);line-height:1.65;}

/* ==========================================================================
   14. TESTIMONIALS — light treatment
   ========================================================================== */
.quote-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:34px 30px;position:relative;
  transition:transform .45s var(--ease-io),box-shadow .45s ease;
}
.quote-card:hover{transform:translateY(-8px);box-shadow:0 28px 52px -20px rgba(14,14,16,.17);}
.quote-card .qm{font-family:'Archivo',sans-serif;font-size:64px;line-height:.6;color:var(--orange);opacity:.5;margin-bottom:16px;}
.quote-card blockquote{font-size:16px;line-height:1.7;color:var(--ink);margin-bottom:22px;}
.quote-card .attrib{display:flex;align-items:center;gap:13px;padding-top:18px;border-top:1px solid var(--line);}
.quote-card .av{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--orange),var(--gold));color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;
}
.quote-card .attrib .nm{font-weight:700;font-size:14px;}
.quote-card .attrib .rl{font-size:12.5px;color:var(--steel);}
.quote-card .cat{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--orange-deep);
  background:var(--wash);padding:6px 13px;border-radius:30px;
  display:inline-block;margin-bottom:18px;
}

/* ==========================================================================
   15. FORM
   ========================================================================== */
.form-shell{display:grid;grid-template-columns:1fr 400px;border-radius:24px;overflow:hidden;box-shadow:0 6px 34px rgba(14,14,16,.07);}
.form-side{background:var(--white);padding:clamp(30px,4vw,52px);}
.info-side{background:var(--ink);color:var(--paper);padding:clamp(30px,4vw,52px);position:relative;overflow:hidden;}
.info-side::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 320px at 90% 8%,rgba(255,90,31,.26),transparent);}

.field{margin-bottom:20px;position:relative;z-index:2;}
.field label{
  display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--steel);margin-bottom:9px;
}
.field input,.field select,.field textarea{
  width:100%;border:1.5px solid var(--line-strong);border-radius:11px;
  background:transparent;padding:13px 14px;
  font-family:inherit;font-size:15px;color:var(--ink);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 4px var(--wash);
}
.field textarea{resize:vertical;min-height:96px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field-note{font-size:12px;color:var(--steel);margin-top:12px;}
.field-error{font-size:12px;color:var(--orange-deep);margin-top:6px;display:none;}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--orange-deep);}
.field.invalid .field-error{display:block;}

.info-block{margin-bottom:28px;position:relative;z-index:2;}
.info-block h5{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--orange-2);margin-bottom:11px;font-weight:700;}
.info-block a,.info-block p{font-size:15.5px;color:var(--paper);display:block;}
.info-block a:hover{color:var(--orange-2);}
.info-block .sub{font-size:13px;color:var(--steel);margin-top:3px;}

/* Compact inline lead capture (homepage) */
.lead-strip{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:30px;display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:14px;align-items:end;
  box-shadow:0 6px 30px rgba(14,14,16,.06);
}
.lead-strip .field{margin-bottom:0;}

/* ==========================================================================
   16. FAQ — height animated via grid-template-rows
   ========================================================================== */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;padding:22px 0;
  font-weight:700;font-size:16px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  transition:color .25s ease;
}
.faq-q:hover{color:var(--orange-deep);}
.faq-ico{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line-strong);color:var(--orange);
  display:grid;place-items:center;font-size:16px;line-height:1;
  transition:transform .4s var(--ease-io),background-color .3s,border-color .3s,color .3s;
}
.faq-item.open .faq-ico{transform:rotate(135deg);background:var(--orange);border-color:var(--orange);color:var(--white);}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-io);}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-a > div{overflow:hidden;}
.faq-a p{font-size:15px;color:var(--steel-dark);line-height:1.7;padding-bottom:22px;max-width:74ch;}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */
footer{background:var(--ink);color:var(--steel);padding:78px 0 0;margin-top:46px;}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:44px;padding-bottom:54px;border-bottom:1px solid rgba(255,255,255,.09);}
.footer-brand img{height:52px;margin-bottom:18px;filter:brightness(0) invert(1);}
.footer-brand p{font-size:14px;line-height:1.68;max-width:34ch;}
.footer-col h5{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--orange-2);margin-bottom:18px;font-weight:700;}
.footer-col a{display:block;font-size:14px;color:var(--steel);margin-bottom:11px;transition:color .25s,transform .25s var(--ease-io);}
.footer-col a:hover{color:var(--orange-2);transform:translateX(4px);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:26px 0;font-size:12.5px;flex-wrap:wrap;}
.footer-bottom nav{display:flex;gap:22px;flex-wrap:wrap;}
.footer-bottom a:hover{color:var(--orange-2);}

/* Floating WhatsApp affordance */
.wa-float{
  position:fixed;bottom:24px;right:24px;z-index:250;
  width:58px;height:58px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(37,211,102,.42);
  transition:transform .4s var(--ease-back),box-shadow .4s ease;
}
.wa-float:hover{transform:scale(1.09) rotate(6deg);box-shadow:0 16px 38px rgba(37,211,102,.55);}
.wa-float svg{width:30px;height:30px;fill:#fff;}

.toast{
  position:fixed;bottom:26px;left:50%;z-index:500;
  background:var(--ink);color:var(--paper);
  padding:15px 24px;border-radius:14px;font-size:14px;font-weight:600;
  box-shadow:0 16px 42px rgba(14,14,16,.32);
  display:flex;align-items:center;gap:10px;
  transform:translate(-50%,150%);opacity:0;
  transition:transform .5s var(--ease-back),opacity .4s ease;
}
.toast.show{transform:translate(-50%,0);opacity:1;}
.toast .tdot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0;}

/* ==========================================================================
   17b. LOGO STAGE — the brand mark as the focal point (Frame 2)
   ========================================================================== */
.logo-stage{
  position:relative;display:grid;place-items:center;
  padding:clamp(40px,7vw,80px) 20px;
  border-radius:var(--r-lg);overflow:hidden;
  background:
    radial-gradient(ellipse 620px 420px at 50% 46%,rgba(255,90,31,.16),transparent 68%),
    radial-gradient(ellipse 460px 340px at 50% 60%,rgba(255,184,92,.14),transparent 70%),
    var(--white);
  border:1px solid var(--line);
}
/* concentric rings that expand outward once the section is reached */
.logo-stage .ring{
  position:absolute;left:50%;top:50%;border-radius:50%;
  border:1px solid rgba(255,90,31,.22);
  width:240px;height:240px;
  transform:translate(-50%,-50%) scale(.4);opacity:0;
}
.logo-stage.in .ring{animation:ring-out 3.4s var(--ease-out) infinite;}
.logo-stage .ring:nth-child(2){animation-delay:.9s;}
.logo-stage .ring:nth-child(3){animation-delay:1.8s;}
@keyframes ring-out{
  0%{transform:translate(-50%,-50%) scale(.4);opacity:0;}
  22%{opacity:.85;}
  100%{transform:translate(-50%,-50%) scale(3.1);opacity:0;}
}
.logo-stage .mark-draw{
  position:absolute;z-index:1;pointer-events:none;
  width:min(300px,54vw);
  left:50%;top:50%;transform:translate(-50%,-46%);
  opacity:.16;
}
.logo-stage .mark-img{
  position:relative;z-index:2;
  width:min(460px,72vw);
  filter:drop-shadow(0 18px 40px rgba(214,66,10,.22));
  animation:logo-float 6s ease-in-out infinite;
}
@keyframes logo-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}

/* ==========================================================================
   17c. TWELVE DISCIPLINES — deliberately compact so the set fits one screen
   ========================================================================== */
.disc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.disc{
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:18px 16px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:7px;min-height:104px;
  transition:transform .35s var(--ease-io),box-shadow .35s ease,border-color .3s;
}
.disc::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--orange),var(--gold));
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease-io);
}
.disc:hover{transform:translateY(-5px);box-shadow:0 18px 34px -14px rgba(14,14,16,.16);border-color:transparent;}
.disc:hover::before{transform:scaleY(1);}
.disc .n{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;color:var(--orange);}
.disc h3{font-size:14.5px;text-transform:none;letter-spacing:-.01em;line-height:1.25;}
.disc p{font-size:12px;color:var(--steel);line-height:1.5;}

/* ==========================================================================
   17d. WHO WE HELP — icon + colour coded, one card per audience
   ========================================================================== */
.who-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.who{
  --c:var(--orange);
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:20px 16px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  transition:transform .35s var(--ease-back),box-shadow .35s ease,border-color .3s;
}
.who:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 20px 38px -16px rgba(14,14,16,.17);border-color:color-mix(in srgb,var(--c) 45%,transparent);}
.who .ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 13%,transparent);
  color:var(--c);font-size:21px;line-height:1;
  transition:transform .4s var(--ease-back),background-color .3s;
}
.who:hover .ico{transform:scale(1.12) rotate(-6deg);background:color-mix(in srgb,var(--c) 22%,transparent);}
.who span{font-size:12.5px;font-weight:600;line-height:1.35;color:var(--steel-dark);}
/* Fallback for engines without color-mix() */
@supports not (background:color-mix(in srgb,red 10%,transparent)){
  .who .ico{background:var(--wash);color:var(--orange-deep);}
}

/* ==========================================================================
   17e. PRESENCE — Gurugram / Jaipur (Frame 8: needed more substance)
   ========================================================================== */
.presence{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
/* Three cities means less width each — stack the pin above the text */
.presence .city{grid-template-columns:1fr;}
.presence .city .pin{height:96px;}
.city{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--white);border:1px solid var(--line);
  display:grid;grid-template-columns:120px 1fr;align-items:stretch;
  transition:transform .4s var(--ease-io),box-shadow .4s ease;
}
.city:hover{transform:translateY(-7px);box-shadow:0 26px 48px -20px rgba(14,14,16,.2);}
.city .pin{
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--orange),var(--gold));
  color:var(--ink);position:relative;overflow:hidden;
}
.city .pin::before{
  content:'';position:absolute;inset:0;opacity:.4;
  background-image:radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 1px);
  background-size:15px 15px;
}
.city .pin svg{width:34px;height:34px;position:relative;z-index:2;}
/* Dubai is the newest office and the one the business wants front of mind. */
.city.is-featured{
  border-color:transparent;
  box-shadow:0 0 0 2px var(--orange),0 24px 50px -22px rgba(255,90,31,.4);
}
.city.is-featured .pin{background:linear-gradient(150deg,var(--orange-deep),var(--orange) 55%,var(--gold));}
.city .flag{
  position:absolute;top:12px;right:12px;z-index:3;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;
  background:var(--ink);color:var(--paper);
  padding:5px 10px;border-radius:20px;
}
.city .body{padding:26px 24px;}

/* ==========================================================================
   17e4. GULF / DUBAI FEATURE BAND
   ========================================================================== */
.gulf{
  display:grid;grid-template-columns:0.9fr 1.1fr;gap:52px;align-items:center;
  background:var(--ink);color:var(--paper);
  border-radius:var(--r-lg);margin:0 24px;overflow:hidden;
  padding:clamp(40px,6vw,72px) clamp(30px,5vw,64px);
  position:relative;
}
.gulf::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle 460px at 12% 22%,rgba(255,90,31,.26),transparent),
    radial-gradient(circle 520px at 88% 84%,rgba(255,184,92,.18),transparent);
}
.gulf-mark{position:relative;z-index:2;}
.gulf-mark .kicker{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--orange-2);
  display:block;margin-bottom:14px;
}
.gulf-mark .word{
  font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(52px,8vw,116px);line-height:.88;letter-spacing:-.04em;
  background:linear-gradient(100deg,var(--orange) 0%,var(--gold) 50%,var(--orange) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 5s linear infinite;
}
.gulf-mark .sub{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--steel);margin-top:12px;display:block;
}
.gulf-body{position:relative;z-index:2;}
.gulf-body h2{font-size:clamp(24px,3vw,36px);text-transform:none;letter-spacing:-.02em;line-height:1.18;margin-bottom:16px;}
.gulf-body p{font-size:16px;line-height:1.75;color:var(--steel);margin-bottom:14px;}
.gulf-body p strong{color:var(--paper);}
.gulf-body .chips{margin-top:22px;}
.city .st{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--orange-deep);display:block;margin-bottom:9px;}
.city h3{font-size:24px;text-transform:none;letter-spacing:-.01em;margin-bottom:8px;}
.city p{font-size:14px;color:var(--steel-dark);line-height:1.6;}

/* ==========================================================================
   17e2. TEAM
   Alok carries a real photograph. Everyone else gets an initials monogram —
   attaching a stock stranger's face to a named employee is the kind of thing
   a prospect reverse-image-searches.
   ========================================================================== */
.team-lead{
  display:grid;grid-template-columns:340px 1fr;gap:40px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:30px;margin-bottom:20px;
  box-shadow:0 6px 30px rgba(14,14,16,.06);
}
.team-lead-photo{border-radius:16px;overflow:hidden;position:relative;}
.team-lead-photo img{width:100%;height:340px;object-fit:cover;object-position:center 18%;}
.team-lead .role{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--orange-deep);
  display:block;margin-bottom:12px;
}
.team-lead h3{font-size:clamp(26px,3.2vw,38px);text-transform:none;letter-spacing:-.02em;margin-bottom:14px;}
.team-lead p{font-size:15.5px;line-height:1.72;color:var(--steel-dark);margin-bottom:16px;}

.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.member{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:26px 22px;text-align:center;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:transform .4s var(--ease-io),box-shadow .4s ease,border-color .3s;
}
.member::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--orange),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-io);
}
.member:hover{transform:translateY(-8px);box-shadow:0 26px 46px -20px rgba(14,14,16,.18);border-color:transparent;}
.member:hover::before{transform:scaleX(1);}
.member .av{
  width:66px;height:66px;border-radius:50%;margin-bottom:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--orange),var(--gold));color:var(--ink);
  font-family:'Archivo',sans-serif;font-weight:900;font-size:21px;letter-spacing:-.02em;
  transition:transform .45s var(--ease-back);
}
.member:hover .av{transform:scale(1.08) rotate(-5deg);}
/* Support roles read one step quieter than the senior bench */
.member.is-support .av{background:linear-gradient(135deg,var(--steel),var(--steel-dark));color:var(--paper);}
.member h4{font-size:16px;text-transform:none;letter-spacing:-.01em;line-height:1.25;}
.member .role{font-size:12.5px;color:var(--steel-dark);font-weight:600;line-height:1.4;}
.member .exp{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--orange-deep);
  background:var(--wash);padding:5px 11px;border-radius:20px;margin-top:10px;
}

/* ==========================================================================
   17e3. BLOG
   ========================================================================== */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.post-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .45s var(--ease-io),box-shadow .45s ease,border-color .3s;
}
.post-card:hover{transform:translateY(-9px);box-shadow:0 30px 54px -20px rgba(14,14,16,.19);border-color:transparent;}
.post-card .media{height:190px;overflow:hidden;}
.post-card .media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-io);}
.post-card:hover .media img{transform:scale(1.07);}
.post-card .body{padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px;flex:1;}
.post-card h3{font-size:19px;text-transform:none;letter-spacing:-.01em;line-height:1.3;}
.post-card p{font-size:14px;color:var(--steel);line-height:1.6;flex:1;}
.post-card .more{font-size:13.5px;font-weight:700;color:var(--orange-deep);}

/* Byline — the writer owns the piece */
.byline{
  display:flex;align-items:center;gap:13px;
  padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:26px 0 0;
}
.byline .av{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--orange),var(--gold));color:var(--ink);
  display:grid;place-items:center;
  font-family:'Archivo',sans-serif;font-weight:900;font-size:15px;
}
.byline .nm{font-weight:700;font-size:14.5px;}
.byline .meta{font-size:12.5px;color:var(--steel);}
.byline.on-dark{border-color:rgba(255,255,255,.14);}
.byline.on-dark .nm{color:var(--paper);}

/* Long-form reading column */
.prose{max-width:72ch;}
.prose h2{
  font-size:clamp(24px,3vw,34px);text-transform:none;letter-spacing:-.02em;
  line-height:1.18;margin:48px 0 16px;
}
.prose h2:first-child{margin-top:0;}
.prose p{font-size:17px;line-height:1.82;color:var(--steel-dark);margin-bottom:20px;}
.prose p strong{color:var(--ink);}
.prose ul{margin:0 0 22px;display:grid;gap:12px;}
.prose ul li{
  font-size:16.5px;line-height:1.7;color:var(--steel-dark);
  padding-left:30px;position:relative;
}
.prose ul li::before{
  content:'';position:absolute;left:6px;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--orange);
}
/* Short declarative lines the source copy uses as beats */
.prose .beat{font-size:19px;font-weight:600;color:var(--ink);line-height:1.5;margin-bottom:10px;}

/* Attributed quote — carries the founder's first-person anecdotes */
.quote-attr{
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--orange);
  border-radius:0 14px 14px 0;padding:28px 30px;margin:30px 0;
  box-shadow:0 4px 22px rgba(14,14,16,.05);
}
.quote-attr blockquote{
  font-size:19px;font-weight:600;line-height:1.55;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:16px;
}
.quote-attr figcaption{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--orange-deep);
}

/* ==========================================================================
   17f. ODOMETER — digits roll on a strip instead of ticking up
   js builds the columns from any [data-count] element.
   ========================================================================== */
.odo{display:inline-flex;align-items:flex-start;line-height:1;}
.odo-col{
  display:block;overflow:hidden;height:1em;
  /* stops the reels reading as separate boxes at large sizes */
  margin-right:-0.02em;
}
.odo-reel{
  display:block;
  transform:translateY(0);
  transition:transform 1.5s var(--ease-out);
  transition-delay:var(--d,0ms);
}
/* Each cell must be block, or the ten digits lay out across instead of down */
.odo-reel > span{display:block;height:1em;}
.odo.rolled .odo-reel{transform:translateY(var(--y,0));}

/* ==========================================================================
   17g. PINNED HORIZONTAL RAIL
   Fallback: an ordinary swipeable rail. Enhanced: the section pins and the
   track travels sideways, so all twelve boxes stay "inside the screen frame".
   ========================================================================== */
/* Named `pinrail`, not `pin`: a bare `.pin` also matches the map-pin block
   inside .city and handed it a 300vh height. Keep this namespace specific. */
.pinrail{position:relative;}
.pinrail-sticky{display:flex;flex-direction:column;justify-content:center;}
.pinrail-stage{
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 20px;margin:0 -4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.pinrail-track{display:flex;gap:14px;}
.pinrail-track > *{flex:0 0 clamp(230px,24vw,290px);scroll-snap-align:start;}

/* Soften the hard clip on the testimonial rail too */
.rail{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}

/* ==========================================================================
   17h. SCROLL-LINKED ANIMATION (progressive enhancement)
   These run on the compositor via native scroll timelines — no JS, no
   main-thread cost. Unsupported browsers keep the IntersectionObserver
   version already defined above, so nothing is ever left invisible.
   ========================================================================== */
@supports (animation-timeline:view()){

  /* Continuous drift, replacing the JS parallax loop (main.js skips it
     when this is supported). */
  [data-sl~="rise"]{
    animation:sl-rise linear both;
    animation-timeline:view();
    animation-range:cover;
  }
  @keyframes sl-rise{
    from{transform:translate3d(0,var(--sl-from,44px),0);}
    to{transform:translate3d(0,var(--sl-to,-44px),0);}
  }

  /* Media settles from slightly overscaled as it crosses the viewport */
  [data-sl~="scale"]{
    animation:sl-scale linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 60%;
  }
  @keyframes sl-scale{from{transform:scale(1.14);}to{transform:scale(1);}}

  /* Fades in on the way up AND out on the way down */
  [data-sl~="edges"]{
    animation:sl-edges linear both;
    animation-timeline:view();
  }
  @keyframes sl-edges{
    0%{opacity:0;}
    22%,74%{opacity:1;}
    100%{opacity:0;}
  }

  /* Hero recedes as you scroll past it */
  [data-sl~="depart"]{
    animation:sl-depart linear both;
    animation-timeline:view();
    animation-range:exit 0% exit 100%;
  }
  @keyframes sl-depart{to{opacity:0;transform:translateY(-70px) scale(.97);}}

  /* --- The pinned rail -------------------------------------------------
     The section is made tall; an inner sticky panel holds the heading still
     while the track slides sideways across the pin. Mobile keeps the plain
     swipeable rail — pinning fights native touch scrolling. */
  @media (min-width:721px) and (hover:hover){
    .pinrail{height:300vh;view-timeline-name:--pinrail;view-timeline-axis:block;}
    .pinrail-sticky{position:sticky;top:0;height:100vh;gap:30px;padding:calc(var(--nav-h) + 20px) 0 40px;}
    .pinrail-sticky .section-head{margin-bottom:0;}
    .pinrail-stage{overflow:hidden;scroll-snap-type:none;margin:0;padding:4px 0;}
    .pinrail-track{
      animation:pinrail-x linear both;
      animation-timeline:--pinrail;
      animation-range:contain;
    }
    @keyframes pinrail-x{
      from{transform:translateX(0);}
      to{transform:translateX(calc(-100% + 100vw - (var(--gutter) * 2)));}
    }
    /* The heading shouldn't re-animate on every pass through the pin */
    .pinrail-sticky [data-sl~="edges"]{animation:none;opacity:1;}
  }
}

/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  :root{--gutter:28px;}
  .disc-grid{grid-template-columns:repeat(3,1fr);}
  .who-grid{grid-template-columns:repeat(4,1fr);}
  .presence{grid-template-columns:repeat(3,1fr);gap:14px;}
  .gulf{grid-template-columns:1fr;gap:30px;}
  .team-grid{grid-template-columns:repeat(3,1fr);}
  .team-lead{grid-template-columns:1fr;gap:26px;}
  .team-lead-photo img{height:300px;}
  .post-grid{grid-template-columns:repeat(2,1fr);}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .slab-grid{grid-template-columns:repeat(2,1fr);}
  .hero-collage{grid-template-columns:1fr;}
  .tile-tall{height:290px;}
  .tile-stack{flex-direction:row;}
  .sticky-scroller{grid-template-columns:1fr;gap:32px;}
  .sticky-media{position:relative;top:0;height:auto;min-height:0;max-height:none;}
  .sticky-frame{height:280px;flex:none;}
  .sticky-steps > * + *{margin-top:44px;}
  .form-shell{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .lead-strip{grid-template-columns:1fr 1fr;}
  .section-head{flex-direction:column;align-items:flex-start;gap:22px;}
  .section-desc{max-width:60ch;}
}
@media (max-width:720px){
  :root{--gutter:20px;--r-lg:24px;}
  .nav-links{display:none;}
  .burger{display:block;}
  /* Two-up keeps these scannable on a phone without shrinking the type */
  .disc-grid{grid-template-columns:repeat(2,1fr);}
  .who-grid{grid-template-columns:repeat(2,1fr);}
  .presence{grid-template-columns:1fr;}
  .presence .city{grid-template-columns:84px 1fr;}
  .presence .city .pin{height:auto;}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .post-grid{grid-template-columns:1fr;}
  .prose h2{margin-top:36px;}
  .quote-attr{padding:22px 20px;}
  .team-lead{padding:20px;}
  .team-lead-photo img{height:260px;}
  .member{padding:22px 14px;}
  .member .av{width:56px;height:56px;font-size:18px;}
  .logo-stage .mark-img{width:min(300px,76vw);}
  .brand img{height:46px;}
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr;}
  .slab-grid{grid-template-columns:1fr;}
  .slab,.cta-band{margin:0 12px;}
  .field-row{grid-template-columns:1fr;}
  .lead-strip{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;gap:32px;}
  .tl-row{grid-template-columns:1fr;gap:6px;}
  .process{padding-left:42px;}
  .process::before,.process-fill{left:11px;}
  .step::before{left:-38px;}
  .hero{min-height:auto;padding-bottom:64px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}

  /* Tap targets: footer links were 22px tall. Thumbs need ~44px. */
  .footer-col a,.footer-bottom a{padding:11px 0;margin-bottom:0;min-height:44px;display:flex;align-items:center;}
  .footer-col a:hover{transform:none;}   /* nudge-on-hover is meaningless on touch */

  /* Small mono labels were 10.5px — under the comfortable floor on a phone */
  .disc .n,.quote-card .cat,.city .st,.member .exp,.tag,
  .info-block h5,.field label,.rail-hint,.blog-tag,.quote-attr figcaption{font-size:11.5px;}
  .stat-tile .l,.who span{font-size:12.5px;}
}

/* ==========================================================================
   19. MOTION BUDGET
   Pointer-driven effects are desktop-only: they cost frames and do nothing
   useful on touch, where the extra work shows up directly as jank.
   ========================================================================== */
@media (hover:none),(max-width:1023px){
  .cursor-glow,.glint,.shard{display:none;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
  /* Reveal everything immediately rather than leaving it invisible */
  [data-anim]{opacity:1 !important;transform:none !important;clip-path:none !important;filter:none !important;}
  .sp-w > i{transform:none !important;}
  .sp-c{opacity:1 !important;transform:none !important;}
  .sticky-media img{opacity:0;}
  .sticky-media img.on{opacity:1;}
  .cursor-glow,.glint,.grain{display:none;}
  .marquee-track{animation:none;}
  .eyebrow .rule,.section-num .rule,.mark::after{transform:none !important;}

  /* Scroll-linked layer off entirely: no drift, no pin, no odometer roll */
  [data-sl]{animation:none !important;transform:none !important;opacity:1 !important;}
  .pinrail{height:auto !important;}
  .pinrail-sticky{position:static !important;height:auto !important;padding:0 !important;}
  .pinrail-stage{overflow-x:auto !important;}
  .pinrail-track{animation:none !important;transform:none !important;}
  .odo-col > span{transition:none !important;}
  ::view-transition-old(root),::view-transition-new(root){animation:none !important;}
}