:root{
    /* — Brand purple+pink, refined for premium feel — */
    --indigo: #8A6BFF;             /* brighter purple */
    --indigo-deep: #5436E0;
    --indigo-glow: rgba(138,107,255,0.22);
    --pink: #FF7FB5;               /* brighter, juicier */
    --pink-deep: #C9558C;
    --pink-soft: #FFD1E6;
    --pink-glow: rgba(255,127,181,0.22);

    /* Premium accent — same brand hue family but used as a hairline / detail color */
    --accent: var(--pink);
    --accent-soft: var(--pink-soft);
    --accent-glow: var(--pink-glow);

    --bg:   #FBF7F0;
    --bg-2: #F2ECDF;
    --bg-3: #E8E0CD;
    --bg-elev: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%);

    --fg:   #251F17;
    --fg-2: rgba(37,31,23,0.75);
    --fg-3: rgba(37,31,23,0.58);
    --fg-4: rgba(37,31,23,0.44);

    --line:        rgba(37,31,23,0.12);
    --line-strong: rgba(37,31,23,0.22);

    /* Soft inner-highlight used on premium surfaces */
    --highlight-top: inset 0 1px 0 rgba(255,255,255,0.6);
    --highlight-soft: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 0 0 1px rgba(255,255,255,0.3);

    /* Fixed light text for content sitting on dark photo scrims (hero, page openers,
       cinematic breaks, sticky nav) — independent of the light/dark page theme. */
    --fg-hero:   #F5F1E6;
    --fg-hero-2: rgba(245,241,230,0.82);
    --fg-hero-3: rgba(245,241,230,0.62);

    /* legacy aliases */
    --cream: #FBF7F0;
    --cream-2: #F2ECDF;
    --ink: #251F17;
    --ink-2: rgba(37,31,23,0.75);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  a,button,[role="button"],.nav-link,.menu-item{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
  /* Mobile menu + interactive controls: no text-selection / callout on tap */
  .nav-fullscreen,.nav-fullscreen a,.nav-burger,.site-nav a,.site-nav button{
    -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;
    -webkit-user-select:none;user-select:none;
  }
  html,body{margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  /* Lock the UA to a dark color-scheme so OS/browser dark mode can't
     re-skin form controls, placeholders, autofill, or scrollbars. */
  :root{ color-scheme: light; }
  html{color-scheme: light; accent-color: var(--pink); }

  /* Form controls inherit the design palette regardless of browser dark mode */
  input, textarea, select, button{ color-scheme: light; }
  input::placeholder, textarea::placeholder{ color: var(--fg-4); opacity: 1; }
  /* Kill the autofill light/yellow wash some browsers force in dark mode */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill{
    -webkit-text-fill-color: var(--fg);
    caret-color: var(--fg);
    transition: background-color 9999s ease-out 0s;
    box-shadow: 0 0 0 1000px transparent inset;
  }
  body{
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01","cv11","ss03","cv09";
    overflow-x:hidden;
    font-weight: 400;
    line-height: 1.5;
    position: relative;
  }
  /* Film grain — fixed, sits above content, soft overlay tint */
  body::before{
    content:'';
    position:fixed; inset:0;
    pointer-events:none;
    z-index: 9990;
    opacity: 0.03;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
  }
  /* Subtle viewport vignette to focus content */
  body::after{
    content:'';
    position:fixed; inset:0;
    pointer-events:none;
    z-index: 9991;
    background: radial-gradient(ellipse at 50% 40%, transparent 65%, rgba(37,31,23,0.06) 100%);
  }
  .mono{font-family:'Inter', system-ui, sans-serif; font-weight:600}
  .serif{font-family:'Inter', system-ui, sans-serif; font-weight:500}
  .serif-display{font-family:'Inter', system-ui, sans-serif; font-weight:600; letter-spacing:-0.01em}
  .editorial{font-family:'Inter', system-ui, sans-serif; font-weight:400}
  .editorial-italic{font-family:'Instrument Serif', Georgia, serif; font-weight:400; font-style:italic}
  /* Semantic aliases — prefer these in new code */
  .text-label{font-family:'JetBrains Mono','Courier New',monospace; font-weight:500}
  .text-display{font-family:'Inter', system-ui, sans-serif; font-weight:500}
  .text-display-bold{font-family:'Inter', system-ui, sans-serif; font-weight:600; letter-spacing:-0.01em}
  .text-body{font-family:'Inter', system-ui, sans-serif; font-weight:400}
  .text-italic{font-family:'Instrument Serif', Georgia, serif; font-weight:400; font-style:italic}
  h1,h2,h3,h4{font-weight:600; letter-spacing:-0.022em; margin:0}
  p{margin:0}
  ::selection{background: var(--pink); color: #251F17}
  /* Skip-to-content link — visible only on keyboard focus */
  .skip-link{position:fixed;top:-9rem;left:16px;padding:8px 20px;background:var(--pink);color:var(--bg);font-size:14px;font-weight:600;border-radius:0 0 10px 10px;text-decoration:none;z-index:10001;transition:top .2s ease;pointer-events:none;}
  .skip-link:focus-visible{top:0;outline:none;pointer-events:auto;}
  a{color:inherit}
  button{font-family:inherit}
  a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:2px}

  /* Premium card surface — subtle linear gradient + inner top highlight */
  .surface{
    background: linear-gradient(180deg, rgba(255,255,255,0.022) 0%, rgba(255,255,255,0) 60%), var(--bg-2);
    border: 1px solid var(--line);
    box-shadow: var(--highlight-top), 0 1px 0 rgba(0,0,0,0.4), 0 30px 60px -40px rgba(0,0,0,0.6);
  }
  .surface-elev{
    background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0) 55%), var(--bg-2);
    border: 1px solid var(--line-strong);
    box-shadow: var(--highlight-top), 0 1px 0 rgba(0,0,0,0.4), 0 40px 80px -40px rgba(0,0,0,0.65);
  }

  /* ───── Reveal on scroll ───── */
  .reveal{opacity:0; transform:translateY(16px); transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1)}
  .reveal.in{opacity:1; transform:translateY(0)}
  .reveal-up{opacity:0; transform:translateY(24px); transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1)}
  .reveal-up.in{opacity:1; transform:translateY(0)}
  .reveal.no-anim, .reveal-up.no-anim{transition:none}

  /* ───── Body fade-in on splash dismiss — smooth handoff ───── */
  #root{opacity:0; transition: opacity .35s cubic-bezier(.2,.8,.2,1)}
  body.app-ready #root{opacity:1}

  /* ───── Footer social icon buttons ───── */
  .footer-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:11px;
    color:var(--fg-hero-2); border:1px solid rgba(245,241,230,0.15); background:transparent;
    transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
  }
  .footer-icon:hover{ color:var(--fg-hero); border-color:rgba(245,241,230,0.3); background:rgba(245,241,230,0.06); transform:translateY(-2px); }

  /* ───── Scroll-progress bar — pinned to top, fills with scroll ───── */
  .scroll-progress{
    position:fixed; top:0; left:0; right:0; height:2px;
    background: transparent;
    z-index: 9995;
    pointer-events:none;
  }
  .scroll-progress-fill{
    height:100%; width:0%;
    background: linear-gradient(90deg, var(--indigo) 0%, var(--pink) 100%);
    box-shadow: 0 0 12px var(--pink-glow);
    transition: width .12s linear;
  }

  /* ───── Reduced motion ───── */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    .word{opacity:1 !important; transform:none !important}
    .reveal, .reveal-up{opacity:1 !important; transform:none !important}
  }

  /* ───── Marquee ───── */
  @keyframes marquee {
    from { transform: translateX(0) }
    to   { transform: translateX(-50%) }
  }
  .marquee-track{display:flex; gap:64px; animation: marquee 50s linear infinite; width:max-content}
  .marquee-track:hover{animation-play-state:paused}
  @keyframes marquee-reverse {
    from { transform: translateX(-50%) }
    to   { transform: translateX(0) }
  }
  .marquee-track-rev{display:flex; gap:64px; animation: marquee-reverse 50s linear infinite; width:max-content}
  .marquee-track-rev:hover{animation-play-state:paused}

  /* AutoScrollRow — pure CSS marquee (logo strip + mobile stats). The drift is a GPU
     keyframe with NO JavaScript driving it, so it can never freeze after a touch.
     Hover-pause is gated behind (hover:hover) — FALSE on iOS, so a tap can't pause it. */
  @keyframes acr-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .acr-track{ animation-name: acr-scroll; animation-timing-function: linear; animation-iteration-count: infinite; }
  @media (hover: hover) and (pointer: fine){
    .acr-wrap:hover .acr-track{ animation-play-state: paused; }
  }

  /* Credibility — micro accent bar + breathing dot */
  @keyframes credBreathe {
    0%,100%{opacity:.55; transform:scale(1)}
    50%{opacity:1; transform:scale(1.35)}
  }
  .cred-pulse{display:inline-block; width:6px; height:6px; border-radius:99px; animation: credBreathe 2.6s ease-in-out infinite}
  .cred-bar{display:block; height:2px; border-radius:2px; transform-origin:left center; animation: barGrow 1.2s cubic-bezier(.2,.8,.2,1) both}
  @keyframes barGrow { from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

  /* Logo card lift */
  .logo-card{transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .5s ease}
  .logo-card:hover{transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 0 0 1px var(--pink-glow); border-color: var(--pink-glow)}

  /* Logo marquee: keep auto-scrolling on all sizes; just tighten gap on mobile */
  .logo-marquee-wrap{ position: relative; }
  @media (max-width: 900px){
    .logo-marquee-track{
      gap: 18px !important;
      animation-duration: 38s !important;
    }
  }

  /* Credibility: grid on desktop, marquee on mobile */
  @media (max-width: 900px){
    .cred-grid{ display: none !important; }
    .cred-marquee{ display: block !important; }
  }

  /* ───── Float / orb glow ───── */
  @keyframes floaty {
    0%,100%{transform:translateY(0) rotate(0)}
    50%{transform:translateY(-16px) rotate(4deg)}
  }
  @keyframes pulse-glow {
    0%,100%{opacity:.4; transform:scale(1)}
    50%{opacity:.6; transform:scale(1.06)}
  }

  /* ───── Underline reveal ───── */
  .link-underline{position:relative; text-decoration:none; padding-bottom:2px}
  .link-underline::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .link-underline:hover::after{transform:scaleX(1)}
  .link-underline.active::after{transform:scaleX(1); background:var(--pink)}

  /* ───── Refined hairline divider — used in eyebrows ───── */
  .hairline{display:inline-block; width:24px; height:1px; background:linear-gradient(90deg, var(--pink) 0%, rgba(255,127,181,0.15) 100%); vertical-align:middle}

  /* ───── Magnetic button ───── */
  .mag{transition: transform .3s cubic-bezier(.2,.8,.2,1)}

  /* ───── Hero gradient blobs ───── */
  .blob{position:absolute; border-radius:9999px; filter:blur(80px); pointer-events:none}

  /* ───── Word-by-word stagger ───── */
  .word{display:inline-block; opacity:0; transform:translateY(40%); transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1)}
  .in .word{opacity:1; transform:translateY(0)}

  /* ───── Card hover lift ───── */
  .card-lift{
    transition: transform .6s cubic-bezier(.2,.8,.2,1),
                border-color .35s ease,
                box-shadow .6s cubic-bezier(.2,.8,.2,1);
    box-shadow: var(--highlight-top), 0 1px 0 rgba(0,0,0,0.4), 0 24px 50px -32px rgba(0,0,0,0.55);
  }
  .card-lift:hover{
    transform: translateY(-6px);
    border-color: var(--line-strong);
    box-shadow: var(--highlight-top), 0 1px 0 rgba(0,0,0,0.4), 0 50px 90px -40px rgba(0,0,0,0.75);
  }

  /* ───── Cursor caret blink (purple) ───── */
  @keyframes blink { 50% { opacity:0 } }
  .caret{display:inline-block; width:.24em; height:.65em; background:var(--indigo); margin-left:.08em; vertical-align:-.04em; animation: blink 1.05s step-end infinite; box-shadow: 0 0 10px var(--indigo-glow)}

  /* ───── Hero scroll cue ───── */
  @keyframes scrollHint {
    0% { transform: translateX(-100%) }
    60%,100% { transform: translateX(280%) }
  }

  /* ───── Ken Burns slow zoom ───── */
  @keyframes kenburns {
    from { transform: scale(1.04) translate(0,0) }
    to   { transform: scale(1.16) translate(-1.5%, -1%) }
  }

  /* ───── Premium polish ───── */
  /* (text-rendering set on h1/h2 above; nothing to add here) */

  /* ───── Mobile responsive overrides ───── */
  @media (max-width: 900px){
    html{ overflow-x: clip; background: #FBF7F0; }
    body{ overflow-x: clip; background: #FBF7F0; -webkit-tap-highlight-color: transparent; }

    /* Kill the fixed grain + vignette overlays on mobile — they cause white
       flash / flicker artifacts during scroll on iOS Safari */
    body::before, body::after{ display: none !important; }

    /* Keep images proportional on mobile so nothing gets stretched */
    img{ max-width: 100%; height: auto; }
    img[style*="object-fit: cover"], img[style*="object-fit:cover"]{ height: 100%; }

    /* Two-col repeat grids → single column on mobile */
    [style*="grid-template-columns: repeat(2, 1fr)"],
    [style*="grid-template-columns: repeat(2,1fr)"]{
      grid-template-columns: 1fr !important;
      gap: 20px !important;
    }

    /* Container padding (React renders padding:'0 40px' as 'padding: 0px 40px') */
    [style*="padding: 0px 40px"]{
      padding-left: 22px !important;
      padding-right: 22px !important;
    }
    [style*="padding: 18px 40px"]{
      padding-left: 18px !important;
      padding-right: 18px !important;
      padding-top: 14px !important;
      padding-bottom: 14px !important;
    }
    [style*="padding: 10px 40px"]{
      padding-left: 18px !important;
      padding-right: 18px !important;
    }

    /* Two-column grids → single column */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1.2fr"],
    [style*="grid-template-columns: 1fr 1.4fr"],
    [style*="grid-template-columns: 1.1fr 1fr"],
    [style*="grid-template-columns: 1.2fr 1fr"],
    [style*="grid-template-columns: 1.2fr 0.9fr"],
    [style*="grid-template-columns: 1.4fr 1fr"],
    [style*="grid-template-columns: 1.5fr 1fr"],
    [style*="grid-template-columns: 5fr 7fr"],
    [style*="grid-template-columns: 260px 1fr"],
    [style*="grid-template-columns: 200px 1fr"]{
      grid-template-columns: 1fr !important;
      gap: 28px !important;
    }

    /* Three-column grid → single column */
    [style*="grid-template-columns: 1fr 1fr 1fr"]{
      grid-template-columns: 1fr !important;
      gap: 18px !important;
    }

    /* Four-column footer grid → 2 cols */
    [style*="grid-template-columns: 2fr 1fr 1fr 1fr"]{
      grid-template-columns: 1fr 1fr !important;
      gap: 32px 24px !important;
    }

    /* Credibility 4-col → 2-col */
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns: repeat(4,1fr)"]{
      grid-template-columns: 1fr 1fr !important;
      gap: 16px 12px !important;
      row-gap: 22px !important;
    }

    /* Three-col card grids (Travel approaches, Engagement models) → single column */
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns: repeat(3,1fr)"]{
      grid-template-columns: 1fr !important;
      gap: 16px !important;
    }

    /* Five-col grids (process steps, capability cards, contribution cards) → single column */
    [style*="grid-template-columns: repeat(5, 1fr)"],
    [style*="grid-template-columns: repeat(5,1fr)"],
    [style*="grid-template-columns: repeat(6, 1fr)"],
    [style*="grid-template-columns: repeat(6,1fr)"]{
      grid-template-columns: 1fr !important;
      gap: 28px !important;
    }
    [style*="grid-template-columns: repeat(5, 1fr)"] .process-line,
    [style*="grid-template-columns: repeat(5,1fr)"] .process-line,
    [style*="grid-template-columns: repeat(6, 1fr)"] .process-line,
    [style*="grid-template-columns: repeat(6,1fr)"] .process-line{
      display: none !important;
    }

    /* Narrow sticky/list split (FAQ) → single column, no sticky */
    [style*="grid-template-columns: 1fr 1.6fr"]{
      grid-template-columns: 1fr !important;
      gap: 32px !important;
    }
    [style*="grid-template-columns: 1fr 1.6fr"] > *:first-child [style*="position: sticky"]{
      position: static !important;
    }

    /* Manifesto numeral + content rows → narrower numeral column */
    [style*="grid-template-columns: 96px 1fr"]{
      grid-template-columns: 44px 1fr !important;
      gap: 20px !important;
    }

    /* Specialist focus panel (1.5fr 1fr) → drop the stray divider once stacked */
    [style*="grid-template-columns: 1.5fr 1fr"] > div[style*="border-left"]{
      border-left: none !important;
      padding-left: 0 !important;
      border-top: 1px solid var(--line-strong) !important;
      padding-top: 24px !important;
      margin-top: 8px !important;
    }

    /* "Who we work with" table row 80px 1.2fr 2fr 1fr → stacked */
    [style*="grid-template-columns: 80px 1.2fr 2fr 1fr"]{
      grid-template-columns: 1fr !important;
      gap: 8px !important;
      padding: 20px 4px !important;
    }
    [style*="grid-template-columns: 80px 1.2fr 2fr 1fr"] > *:last-child{
      text-align: left !important;
    }

    /* Hero typography tighter */
    section h1{ font-size: clamp(36px, 9vw, 56px) !important; }
    section h2{ font-size: clamp(26px, 6.5vw, 38px) !important; line-height: 1.12 !important; }

    /* Reduce huge vertical padding on sections — match React's '140px 0' → '140px 0px' */
    section[style*="padding: 140px 0px"],
    section[style*="padding: 120px 0px"],
    section[style*="padding: 100px 0px"]{
      padding-top: 56px !important;
      padding-bottom: 56px !important;
    }
    section[style*="padding: 80px 0px 100px"],
    section[style*="padding: 60px 0px 100px"],
    section[style*="padding: 60px 0px 120px"]{
      padding-top: 40px !important;
      padding-bottom: 56px !important;
    }
    section[style*="padding: 72px 0px 76px"]{
      padding-top: 48px !important;
      padding-bottom: 48px !important;
    }

    /* PageOpener tighter on mobile */
    section[style*="padding: 160px 0px 80px"]{
      padding: 110px 0px 56px !important;
      min-height: 56vh !important;
    }
    section[style*="min-height: 72vh"]{ min-height: 56vh !important; }

    /* Footer — tight, compact on mobile */
    footer[style*="padding: 72px 0px 28px"]{
      padding-top: 40px !important;
      padding-bottom: 18px !important;
    }
    footer [style*="padding-bottom: 48px"]{
      padding-bottom: 28px !important;
    }
    footer [style*="grid-template-columns: 2fr 1fr 1fr 1fr"]{
      grid-template-columns: 1fr 1fr !important;
      gap: 28px 20px !important;
    }
    /* Logo block spans both columns on mobile */
    footer [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] > div:first-child{
      grid-column: 1 / -1 !important;
      padding-bottom: 8px !important;
      border-bottom: 1px solid var(--line) !important;
      margin-bottom: 8px !important;
    }
    /* Footer logo block smaller */
    footer [style*="font-size: 14px"][style*="line-height: 1.6"]{
      font-size: 13px !important;
      line-height: 1.5 !important;
    }
    footer p{ font-size: 13px !important; }
    /* Footer column heads — quieter on mobile */
    footer .mono[style*="margin-bottom: 22px"]{
      margin-bottom: 12px !important;
      font-size: 9.5px !important;
      letter-spacing: 0.24em !important;
    }
    /* Footer links — smaller, lighter, more air */
    footer a[style*="font-size: 13px"]{
      font-size: 12.5px !important;
      letter-spacing: 0 !important;
    }
    footer [style*="gap: 13px"]{ gap: 10px !important; }
    footer [style*="font-size: 13.5"]{ font-size: 12.5px !important; }
    footer a{ padding: 1px 0; }
    /* Footer bottom row */
    footer [style*="padding-top: 24px"]{ padding-top: 18px !important; }

    /* Footer bottom row stacks + readable */
    footer [style*="justify-content: space-between"][style*="align-items: center"]{
      flex-direction: column !important;
      gap: 12px !important;
      align-items: flex-start !important;
      text-align: left !important;
    }

    /* Nav: hide center links + ghost CTA, show burger */
    .nav-links{ display: none !important; }
    .nav-cta{ display: none !important; }
    .nav-burger{ display: inline-flex !important; }

    /* Mobile nav: drop backdrop-filter entirely (per-frame sampling on iOS causes
       scroll flicker/blink). Use a solid background + own composited layer instead. */
    .site-nav{
      backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
      -webkit-transform: translateZ(0); transform: translateZ(0);
      -webkit-backface-visibility: hidden; backface-visibility: hidden;
    }

    /* Full-screen mobile menu — show only on mobile */
    .nav-fullscreen{ display: flex !important; }

    /* Hero indicators (top right) → move under nav, smaller */
    .hero-indicators{ top: 70px !important; right: 18px !important; }

    /* Scroll cue hide on mobile */
    .hero-scroll-cue{ display: none !important; }

    /* FAQ sticky → static */
    [style*="position: sticky"][style*="top: 120px"]{
      position: static !important;
    }

    /* CTA strip right column → left-align */
    [style*="align-items: flex-end"][style*="flex-direction: column"]{
      align-items: flex-start !important;
    }
    [style*="justify-content: flex-end"][style*="flex-wrap: wrap"]{
      justify-content: flex-start !important;
    }

    /* Hero section padding */
    section[id="top"]{
      padding-top: 72px !important;
      padding-bottom: 80px !important;
      min-height: 90svh !important;
    }
    section[id="top"] h1{ margin-bottom: 24px !important; }

    /* Hero CTAs: keep both buttons side-by-side on mobile (no wrap) */
    .hero-cta-row{
      flex-wrap: nowrap !important;
      gap: 10px !important;
      width: 100%;
      max-width: 440px;
      margin-left: auto; margin-right: auto;
    }
    .hero-cta-row > a{
      flex: 1 1 0 !important;
      min-width: 0 !important;
      justify-content: center !important;
      padding: 13px 14px !important;
      font-size: 12.5px !important;
      gap: 8px !important;
    }
    .hero-cta-row > a svg{ display: none !important; }

    /* Reduce side blob bleed */
    .blob{ filter: blur(40px) !important; opacity: 0.7 !important; }

    /* Mobile scroll perf: a fixed, full-viewport layer with mix-blend-mode must be
       re-blended against the scrolling content every frame — it can't be cached as
       a composited layer, which is the #1 cause of mobile scroll jank. Drop the
       blend mode (keep a faint plain-overlay grain) and promote both fixed layers to
       their own composited layers so they paint once and never repaint on scroll. */
    body::before{
      opacity: 0.025 !important;
      background-size: 160px 160px !important;
      mix-blend-mode: normal !important;
      transform: translateZ(0);
    }
    body::after{
      background: radial-gradient(ellipse at 50% 40%, transparent 65%, rgba(37,31,23,0.05) 100%) !important;
      transform: translateZ(0);
    }

    /* Kill mix-blend-mode overlays on mobile — they cause a bright "lightning" flash
       repaint over images on scroll (iOS Safari especially) */
    [style*="mix-blend-mode: screen"],
    [style*="mix-blend-mode: overlay"],
    [style*="mix-blend-mode: multiply"]{
      mix-blend-mode: normal !important;
      opacity: 0.35 !important;
    }
    /* Force background-image containers into their own composited layer so they
       don't repaint every scroll frame */
    section [style*="background-image"]{
      transform: translateZ(0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    /* Kill Ken Burns zoom animation on mobile — the animated scale/translate on
       full-viewport bg images is the source of the flashing/lightning artifact
       during scroll on both iOS Safari and mobile Chrome */
    [style*="animation: kenburns"],
    [style*="animation:kenburns"]{
      animation: none !important;
      transform: scale(1.04) !important;
    }
    /* Drop filters on hero bg images that force per-frame compositing on scroll */
    [style*="filter: contrast"],
    [style*="filter:contrast"]{
      filter: none !important;
    }
    /* Radial-gradient overlays inside heroes repaint on scroll — flatten them */
    [style*="radial-gradient(ellipse at 18% 110%"],
    [style*="radial-gradient(ellipse at 50% 55%"]{
      background: transparent !important;
    }

    /* Full-screen mobile menu stays fully opaque (no backdrop-filter sampling) */
    .nav-fullscreen{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

    /* Card minimum heights — let content drive */
    [style*="min-height: 380px"]{ min-height: auto !important; }
    [style*="min-height: 340px"]{ min-height: auto !important; }
    [style*="min-height: 520px"]{ min-height: 420px !important; }

    /* Tags / badges full-bleed safe */
    img{ max-width: 100%; height: auto; }

    /* Cinematic break — softer min height */
    section[style*="min-height: 520px"]{ min-height: 380px !important; padding: 60px 0 !important; }

    /* CTA Strip — stack copy + action, action sits below, left aligned, smaller */
    [style*="grid-template-columns: 1.4fr 1fr"]{
      grid-template-columns: 1fr !important;
      gap: 36px !important;
    }
    [style*="grid-template-columns: 1.4fr 1fr"] > div:last-child [style*="align-items: flex-end"],
    section [style*="flex-direction: column"][style*="align-items: flex-end"]{
      align-items: flex-start !important;
      gap: 14px !important;
      padding-top: 4px !important;
    }
    /* CTA button: shrink "lg" button down on mobile */
    section [style*="padding: 17px 30px"][style*="font-size: 14"]{
      padding: 11px 22px !important;
      font-size: 13px !important;
    }
    /* CTA heading: tighter on mobile */
    section h2[style*="font-size: clamp(40px, 5vw, 76px)"]{
      font-size: clamp(32px, 8vw, 44px) !important;
      line-height: 1.06 !important;
    }

    /* Founder image aspect */
    [style*="aspect-ratio: 4 / 5"]{ max-width: 380px; margin: 0 auto; }

    /* Service card padding */
    [style*="padding: 34px 34px 28px"]{ padding: 26px 24px 24px !important; }
    [style*="padding: 40px 40px 32px"]{ padding: 28px 24px 28px !important; }
    [style*="padding: 40px 40px"]{ padding: 26px 22px !important; }
    [style*="padding: 48px 48px"]{ padding: 28px 22px !important; }
    [style*="padding: 28px 30px"]{ padding: 22px 22px !important; }
    [style*="padding: 22px 22px 24px"]{ padding: 18px 18px 20px !important; }

    /* Tighter font sizes on heavy elements */
    [style*="font-size: 18.5"]{ font-size: 16px !important; }
    [style*="font-size: 17px"]{ font-size: 15.5px !important; }
    [style*="font-size: 16.5"]{ font-size: 15px !important; }

    /* Marquee — slight smaller logos */
    .marquee-track{ gap: 28px !important; }

    /* Bigger gap collapse */
    [style*="gap: 80px"]{ gap: 36px !important; }
    [style*="gap: 64px"]{ gap: 32px !important; }
    [style*="gap: 60px"]{ gap: 28px !important; }
    [style*="gap: 48px"]{ gap: 28px !important; }
    /* Class-based responsive container — replaces brittle [style*] attribute selector */
    .c-container{ padding-left: 22px !important; padding-right: 22px !important; }
    /* Class-based grid + section responsive rules */
    .c-grid-2{ grid-template-columns: 1fr !important; gap: 28px !important; }
    .c-grid-3{ grid-template-columns: 1fr !important; gap: 18px !important; }
    .c-grid-4{ grid-template-columns: 1fr 1fr !important; gap: 16px 12px !important; }
    .c-grid-footer{ grid-template-columns: 1fr 1fr !important; gap: 28px 20px !important; }
    .footer-brand{ grid-column: 1 / -1 !important; }
    .footer-connect{ grid-column: 1 / -1 !important; }
    .footer-connect-items{ flex-direction: row !important; flex-wrap: wrap !important; gap: 12px !important; }
    .c-grid-faq{ grid-template-columns: 1fr !important; gap: 28px !important; }
    .c-grid-cta{ grid-template-columns: 1fr !important; gap: 36px !important; }
    .c-grid-founder{ grid-template-columns: 1fr !important; gap: 32px !important; }
    .c-grid-service-fmt{ grid-template-columns: 1fr !important; gap: 8px !important; }
    .c-sec-xl{ padding-top: 56px !important; padding-bottom: 56px !important; }
    .c-sec-lg{ padding-top: 48px !important; padding-bottom: 48px !important; }
    .c-sec-md{ padding-top: 44px !important; padding-bottom: 44px !important; }
  }

  @media (max-width: 520px){
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns: repeat(4,1fr)"]{
      grid-template-columns: 1fr 1fr !important;
    }
    [style*="grid-template-columns: 2fr 1fr 1fr 1fr"]{
      grid-template-columns: 1fr 1fr !important;
    }
    /* Smaller hero text on very narrow */
    section h1{ font-size: clamp(32px, 10vw, 48px) !important; line-height: 1.04 !important; }
    /* Stat numbers smaller */
    [style*="font-size: 24px"][style*="font-weight: 500"]{ font-size: 22px !important; }
  }

  /* Home hero: on desktop keep each line unbroken so the headline reads as
     exactly two lines. */
  @media (min-width: 761px){
    .hero-title{ white-space: nowrap !important; max-width: none !important; }
  }

  /* Home hero: keep the headline to exactly two lines on mobile — each line stays
     unbroken, sized as large as possible. Sub-paragraph sits clearly below it in the hierarchy. */
  @media (max-width: 760px){
    .hero-title{
      white-space: normal !important;
      font-size: clamp(26px, 7.5vw, 64px) !important;
      line-height: 1.08 !important;
      letter-spacing: -0.02em !important;
      max-width: none !important;
    }
    .hero-sub{
      font-size: 15px !important;
      line-height: 1.45 !important;
      max-width: 380px !important;
      margin-bottom: 40px !important;
      text-wrap: balance !important;
      text-align: center !important;
    }
    .growth-line { display: inline; margin-top: 0; }
  }
  @media (max-width: 340px){
    .hero-title{ font-size: 26px !important; }
  }
/* ───── Three-up capability grids (home + capabilities) ───── */
@media (max-width: 1180px){
  .grid-3-adapt{ grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .grid-3-adapt > *:nth-child(3):last-child{ grid-column: span 2; }
  .grid-3-adapt > *:nth-child(3):last-child .cap-deliverables{ grid-template-columns: 1fr 1fr !important; column-gap: 20px; }
}
@media (max-width: 900px){
  .grid-3-adapt{ grid-template-columns: 1fr !important; gap: 16px !important; }
  .grid-3-adapt > *{ grid-column: auto !important; width: 100% !important; min-width: 0 !important; }
  .grid-3-adapt > *:nth-child(3):last-child .cap-deliverables{ grid-template-columns: 1fr !important; }
}

/* ───── Contact rows: stack label above value on mobile ───── */
@media (max-width: 900px){
  .contact-row{ flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding: 16px 0 !important; }
  .contact-row > *:last-child{ text-align: left !important; font-size: 15px !important; }
}