/* GENERATED by build.py from src/css/* — edit the sources, not this file. */
/* ============================================================================
   KINTECH CONSULTING — DESIGN SYSTEM + PAGE STYLES (2026)
   ----------------------------------------------------------------------------
   One stylesheet, organised with CASCADE LAYERS so specificity never fights:
     reset → tokens → base → layout → components → sections → motion → utilities
   Later layers win regardless of selector weight, so no !important is needed.

   Theming: every colour token uses light-dark(). The <html data-theme>
   attribute only flips `color-scheme`, and every token re-resolves itself.
   One source of truth for both themes — no duplicated dark-mode blocks.

   Motion strategy:
     • Native scroll-driven animations (animation-timeline: scroll()/view())
       inside @supports — Chrome/Edge/Safari 26+.
     • JS fallback (html.no-sda) for browsers without support (Firefox).
     • Everything decorative is disabled under prefers-reduced-motion.
   ============================================================================ */

@layer reset, tokens, base, layout, components, sections, motion, utilities;


/* ----------------------------------------------------------------------------
   RESET — tiny modern reset (replaces Bootstrap's reboot)
   ---------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  a { color: inherit; text-decoration: none; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  address { font-style: normal; }
  mark { background: none; color: inherit; }
}


/* ----------------------------------------------------------------------------
   TOKENS — brand colours sampled from the K logo + semantic theme tokens
   ---------------------------------------------------------------------------- */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* Brand palette (logo: magenta→indigo stem, amber→orange arcs) */
    --k-indigo:  #2a1468;
    --k-plum:    #5b1468;
    --k-magenta: #9c0a5e;
    --k-amber:   #fbb03b;
    --k-orange:  #f26b2a;

    --grad-k:     linear-gradient(170deg, var(--k-magenta) 0%, var(--k-plum) 50%, var(--k-indigo) 100%);
    --grad-fire:  linear-gradient(110deg, var(--k-amber) 0%, var(--k-orange) 100%);
    --grad-brand: linear-gradient(120deg, var(--k-magenta), var(--k-orange));

    /* Semantic tokens — light value first, dark value second.
       Light background is an egg-shell off-white, never pure #fff. */
    --bg:            light-dark(#f6f0e7, #0e0a1b);
    --bg-alt:        light-dark(#efe6d8, #161029);
    --surface:       light-dark(rgb(255 251 245 / .62), rgb(44 30 78 / .42));
    --surface-solid: light-dark(#fbf6ee, #1d1534);
    --ink:           light-dark(#1a1130, #f5eee4);
    --ink-soft:      light-dark(#4b4162, #c8bdd9);
    --ink-mute:      light-dark(rgb(26 17 48 / .16), rgb(245 238 228 / .18));
    --line:          light-dark(#1a1130, #f5eee4);
    --accent:        light-dark(var(--k-magenta), var(--k-amber));
    --glass-edge:    light-dark(rgb(255 255 255 / .75), rgb(255 255 255 / .12));
    --glass-shine:   light-dark(rgb(255 255 255 / .9), rgb(255 255 255 / .18));
    --shadow-soft:   0 30px 60px -30px light-dark(rgb(42 20 104 / .35), rgb(0 0 0 / .7));

    /* Typography — fluid scale with clamp() (no breakpoint jumps) */
    --font-sans:  "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-serif: var(--font-sans);   /* accent words use the same family as the rest (review: no serif/italic mix) */
    --fs-xs:  clamp(.74rem, .72rem + .12vw, .82rem);
    --fs-sm:  clamp(.9rem,  .86rem + .2vw,  1rem);
    --fs-md:  clamp(1.02rem, .98rem + .25vw, 1.15rem);
    --fs-lg:  clamp(1.3rem, 1.1rem + .9vw,  1.85rem);
    --fs-xl:  clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);
    --fs-2xl: clamp(2.7rem, 1.6rem + 5.2vw, 6.2rem);

    /* Spacing / shape / motion */
    --gutter:  clamp(1rem, .5rem + 2.4vw, 2.5rem);
    --section: clamp(3.5rem, 2rem + 4vw, 6rem);   /* vertical padding of every section (56px → 96px) */
    --radius: clamp(20px, 1rem + 1vw, 32px);
    --radius-pill: 999px;
    --blob: 58% 42% 46% 54% / 48% 56% 44% 52%;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    /* Header geometry. --header-h is the REAL height of the fixed header
       (top padding + logo pill), derived from the same values the navbar uses,
       so every hero, sticky offset and scroll anchor clears the logo exactly. */
    --header-pad: clamp(.75rem, 1.6vw, 1.1rem);
    --logo-h:     clamp(44px, 3.6vw, 54px);       /* height of the horizontal logo */
    --header-h:   calc(var(--header-pad) + max(var(--logo-h), 3.2rem));   /* logo or round buttons (3.2rem), whichever is taller */
  }

  /* The toggle only flips the scheme; light-dark() does the rest */
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
}


/* ----------------------------------------------------------------------------
   BASE — typography, grain texture, focus, selection
   ---------------------------------------------------------------------------- */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
  }

  body {
    min-height: 100svh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;               /* clip (not hidden) keeps position:sticky working */
    transition: background-color .5s, color .5s;
  }

  /* Decorations that intentionally bleed sideways (drifting shapes, blobs) are clipped here too, so no page can ever be scrolled sideways.
     `clip` (unlike `hidden`) doesn't create a scroll container → sticky still works. */
  main { overflow-x: clip; }

  /* GRAIN TEXTURE — SVG fractal noise, fixed over everything, non-interactive.
     Inline data-URI = zero extra requests. */
  body::before {
    content: "";
    position: fixed;
    inset: -50%;
    z-index: 100;
    pointer-events: none;
    opacity: .08;
    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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  :root[data-theme="dark"] body::before { opacity: .12; mix-blend-mode: screen; }

  h1, h2, h3 {
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -.02em;
    text-wrap: balance;               /* nicer heading line breaks */
    overflow-wrap: break-word;        /* long words never push past narrow screens */
  }
  p { text-wrap: pretty; }            /* avoids orphans */

  em { font-style: normal; font-weight: inherit; }   /* accent words: colour only, same font/weight as the heading */

  ::selection { background: var(--k-amber); color: var(--k-indigo); }

  :focus-visible {
    outline: 3px solid var(--k-amber);
    outline-offset: 3px;
    border-radius: 6px;
  }
}


/* ----------------------------------------------------------------------------
   LAYOUT — container, section rhythm, eyebrow labels
   ---------------------------------------------------------------------------- */
@layer layout {
  .container {
    width: min(100% - var(--gutter) * 2, 1280px);
    margin-inline: auto;
  }

  .section {
    position: relative;
    padding-block: var(--section);
  }

  /* Small uppercase label used above headings (old .sub_title) */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.25rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .eyebrow::before {
    content: "";
    inline-size: 2.2rem;
    block-size: 2px;
    border-radius: 2px;
    background: var(--grad-fire);
  }

  /* Big section heading with kinetic weight/tracking (see motion layer) */
  .display-heading {
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: .95;
    margin-bottom: clamp(2rem, 4vw, 4rem);
  }
}


/* ==========================================================================
   COMPONENTS — buttons, glass, marks, skip link, progress bar, to-top, blob, icon bubble, arc, sr-only
   ========================================================================== */
@layer components {

  /* ---------- Buttons ---------- */
  .btn {
    --pad-x: 1.6rem;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    min-height: 3.4rem;
    padding: 0 var(--pad-x);
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: .01em;
    position: relative;
    isolation: isolate;
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background-color .3s;
    will-change: transform;
  }
  .btn__arrow {
    inline-size: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: translate .4s var(--ease-spring);
  }
  .btn:hover .btn__arrow { translate: .3rem 0; }

  /* Primary: logo gradient, glow on hover */
  .btn--primary {
    color: #fff;
    background: var(--grad-brand);
    box-shadow: 0 14px 30px -12px rgb(156 10 94 / .55);
  }
  .btn--primary::after {               /* soft inner highlight = "glass" edge */
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgb(255 255 255 / .28), transparent 55%);
    z-index: -1;
  }
  .btn--primary:hover { box-shadow: 0 20px 40px -12px rgb(242 107 42 / .6); }

  /* Neo-brutalist: hard border + offset shadow that "presses" on hover */
  .btn--brutal {
    border-radius: 14px;
    color: var(--k-indigo);
    background: var(--k-amber);
    border: 2px solid var(--line);
    box-shadow: 5px 5px 0 var(--line);
  }
  .btn--brutal:hover  { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--line); }
  .btn--brutal:active { transform: translate(4px, 4px);   box-shadow: 1px 1px 0 var(--line); }

  /* ---------- Liquid glass surface ---------- */
  .glass {
    position: relative;
    background: var(--surface);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    border: 1px solid var(--glass-edge);
    box-shadow:
      inset 0 1px 0 var(--glass-shine),        /* top specular edge */
      inset 0 -1px 0 rgb(0 0 0 / .04),
      var(--shadow-soft);
  }

  /* ---------- Highlight marks — a thin orange line right under the words, drawn on reveal ---------- */
  .u-mark {
    --mark-line: max(2px, .055em);
    background: linear-gradient(var(--k-orange), var(--k-orange)) 0 calc(100% - .08em) / 0% var(--mark-line) no-repeat;
    transition: background-size 1.1s var(--ease-out) .35s;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .u-mark--fire { color: var(--k-orange); }
  .is-in .u-mark, .u-mark.is-in, .no-js .u-mark { background-size: 100% var(--mark-line); }

  /* ---------- Skip link ---------- */
  .skip-link {
    position: fixed;
    top: .75rem; left: .75rem;
    z-index: 200;
    padding: .7rem 1.1rem;
    border-radius: 10px;
    background: var(--k-amber);
    color: var(--k-indigo);
    font-weight: 600;
    translate: 0 -200%;
    transition: translate .3s var(--ease-out);
  }
  .skip-link:focus-visible { translate: 0 0; }


  /* ---------- Scroll progress bar ---------- */
  .scroll-progress {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 70;
    block-size: 3px;
    background: var(--grad-fire);
    transform-origin: 0 50%;
    scale: var(--scroll-p, 0) 1;
  }

  /* ---------- Back to top with conic progress ring ---------- */
  @property --p { syntax: "<number>"; inherits: false; initial-value: 0; }

  .to-top {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 50;
    display: grid;
    place-items: center;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border-radius: 50%;
    color: var(--ink);
    background:
      radial-gradient(closest-side, var(--surface-solid) 82%, transparent 84%),
      conic-gradient(var(--k-orange) calc(var(--p) * 1turn), var(--ink-mute) 0);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    scale: .6;
    pointer-events: none;
    transition: opacity .4s, scale .5s var(--ease-spring);
  }
  .to-top.is-visible { opacity: 1; scale: 1; pointer-events: auto; }
  .to-top svg { inline-size: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate .4s var(--ease-spring); }
  .to-top:hover svg { translate: 0 -3px; }

  /* ---------- Organic gradient blob ---------- */
  .blob {
    inline-size: 100%;
    aspect-ratio: 1;
    border-radius: var(--blob);
    filter: blur(50px);
  }
  .blob--k    { background: var(--grad-k); }
  .blob--fire { background: var(--grad-fire); }

  /* Icon bubble (organic shape) */
  .icon-bubble {
    display: grid;
    place-items: center;
    inline-size: 3.6rem;
    aspect-ratio: 1;
    border-radius: 42% 58% 55% 45% / 50% 42% 58% 50%;
    background: color-mix(in oklab, currentColor 10%, transparent);
    border: 1px solid color-mix(in oklab, currentColor 22%, transparent);
    transition: border-radius .8s var(--ease-out), rotate .8s var(--ease-out);
  }
  .icon-bubble svg {
    inline-size: 1.9rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Shared arc stroke style (echoes the logo) */
  .arc { fill: none; stroke-width: 18; stroke-linecap: butt; }
  .arc--thin { stroke-width: 10; }

  /* Visually hidden (accessible) */
  .sr-only {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
}


/* ==========================================================================
   NAVBAR — header pill, theme switch, tooltip, menu toggle, menu panel
   ========================================================================== */
@layer components {
  /* ==========================================================================
     NAVBAR (shared by every page)
     Layout: floating logo pill (left) · theme switch + round menu button (right)
     Menu:   big rounded panel that grows out of the menu button, with
             staggered links, a gliding hover highlight (anchor positioning),
             a self-drawing K illustration and organic waves rising from the
             bottom.
     ========================================================================== */
  .site-header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 80;                               /* above the menu panel (70) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--header-pad) var(--gutter);
    pointer-events: none;                      /* only the controls catch clicks */
    transition: translate .55s var(--ease-out);
  }
  .site-header > * { pointer-events: auto; }
  /* Once the page is scrolled, the header gets a frosted, semi-transparent bar so the
     logo and buttons never blend into the content underneath (at the top it stays clear) */
  .site-header { transition: translate .55s var(--ease-out), background-color .35s, box-shadow .35s; }
  .site-header.is-scrolled {
    background: color-mix(in oklab, var(--bg) 72%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 1px 0 var(--ink-mute), 0 10px 24px -18px rgb(20 8 50 / .5);
  }
  .site-header.is-hidden { translate: 0 -140%; }
  .menu-open .site-header { translate: 0 0; }   /* never hide while the menu is open */
  /* The open menu panel is the backdrop then: no frosted strip across its top */
  .menu-open .site-header.is-scrolled { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Horizontal logo without a background. Wordmark + K stem take the theme's ink colour
     (dark on light, light on dark); a soft halo in the page colour keeps it legible
     when the header floats over a section of the opposite tone. */
  .brand {
    display: inline-flex;
    align-items: center;
    color: var(--ink);
    filter: drop-shadow(0 0 12px color-mix(in oklab, var(--bg) 70%, transparent));
    transition: transform .4s var(--ease-spring), color .45s var(--ease-out);
  }
  .brand:hover { transform: scale(1.03); }
  .brand__logo { display: block; block-size: var(--logo-h); inline-size: auto; fill: currentColor; }

  .header-actions { display: flex; align-items: center; gap: clamp(.5rem, 1.2vw, .9rem); }

  /* ---------- Language switch — two round flags in a pill, same colours as the round buttons ---------- */
  .lang-switch {
    display: flex;
    align-items: center;
    gap: .6rem;
    block-size: 3.2rem;                        /* same height as the round theme/menu buttons */
    padding-inline: .5rem;
    border-radius: var(--radius-pill);
    background: var(--k-indigo);
    border: 1px solid rgb(255 255 255 / .16);
    box-shadow: 0 12px 26px -12px rgb(20 8 50 / .7);
  }
  .lang-switch__btn {
    display: block;
    inline-size: 2.1rem;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    opacity: .5;
    filter: saturate(.6);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25);
    transition: opacity .3s, filter .3s, transform .4s var(--ease-spring), box-shadow .3s;
  }
  .lang-switch__btn svg { display: block; inline-size: 100%; block-size: 100%; }
  .lang-switch__btn:hover { opacity: .85; transform: scale(1.06); }
  .lang-switch__btn[aria-pressed="true"] { opacity: 1; filter: none; box-shadow: 0 0 0 2px var(--k-amber); }
  .lang-switch__btn:focus-visible { outline: 2px solid var(--k-amber); outline-offset: 2px; }

  /* Small phones: slightly smaller controls so logo + flags + 2 buttons fit in one row */
  @media (max-width: 400px) {
    .header-actions { gap: .4rem; }
    .lang-switch { block-size: 2.85rem; padding-inline: .45rem; gap: .5rem; }
    .lang-switch__btn { inline-size: 1.85rem; }
    .header-actions .theme-switch, .header-actions .menu-toggle { inline-size: 2.85rem; }
  }

  /* ---------- Theme switch (role="switch") — round icon button ----------
     Same look as the menu button. Shows the current mode: a moon in dark mode,
     a sun in light mode; the icons swap with a small turn on click. */
  .theme-switch {
    anchor-name: --theme-switch;
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 3.2rem;
    aspect-ratio: 1;
    border-radius: 50%;
    color: #fff;
    background: var(--k-indigo);
    border: 1px solid rgb(255 255 255 / .16);
    box-shadow: 0 12px 26px -12px rgb(20 8 50 / .7);
    transition: transform .45s var(--ease-spring);
  }
  .theme-switch:hover { transform: scale(1.07); }
  .theme-switch:active { transform: scale(.95); }
  .theme-switch__icon {
    grid-area: 1 / 1;
    inline-size: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity .35s var(--ease-out), rotate .5s var(--ease-spring), scale .5s var(--ease-spring);
  }
  .theme-switch__icon--sun circle { fill: var(--k-amber); stroke: var(--k-amber); }
  .theme-switch__icon--sun path { stroke: var(--k-amber); }
  /* Light mode → sun visible; dark mode → moon visible */
  .theme-switch__icon--moon { opacity: 0; rotate: -60deg; scale: .5; }
  :root[data-theme="dark"] .theme-switch__icon--moon { opacity: 1; rotate: 0deg; scale: 1; }
  :root[data-theme="dark"] .theme-switch__icon--sun  { opacity: 0; rotate: 60deg; scale: .5; }

  /* Tooltip tethered to the switch with CSS Anchor Positioning (auto-flips) */
  .tooltip { display: none; }
  @supports (anchor-name: --a) {
    .tooltip {
      display: block;
      position: fixed;
      position-anchor: --theme-switch;
      /* span-left: grows leftwards from the switch, so it never pokes past the
         right edge of the viewport (which would create a sideways scroll) */
      position-area: bottom span-left;
      position-try-fallbacks: flip-block;
      margin-top: .7rem;
      padding: .45rem .8rem;
      border-radius: 10px;
      background: var(--k-amber);
      color: var(--k-indigo);
      font-size: var(--fs-xs);
      font-weight: 600;
      white-space: nowrap;
      border: 2px solid var(--k-indigo);
      box-shadow: 3px 3px 0 var(--k-indigo);
      opacity: 0;
      translate: 0 -4px;
      pointer-events: none;
      transition: opacity .25s, translate .35s var(--ease-out);
    }
    .theme-switch:is(:hover, :focus-visible) + .tooltip { opacity: 1; translate: 0 0; }
  }

  /* ---------- Round menu button (burger ↔ close) ---------- */
  .menu-toggle {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 3.2rem;
    aspect-ratio: 1;
    border-radius: 50%;
    color: #fff;
    background: var(--k-indigo);
    border: 1px solid rgb(255 255 255 / .16);
    box-shadow: 0 12px 26px -12px rgb(20 8 50 / .7);
    transition: background-color .45s var(--ease-out), transform .45s var(--ease-spring);
  }
  .menu-toggle:hover { transform: scale(1.07); }
  .menu-toggle__bars { display: grid; gap: 5px; inline-size: 1.15rem; }
  .menu-toggle__bars span {
    block-size: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .45s var(--ease-out), opacity .3s, inline-size .35s var(--ease-out);
  }
  .menu-toggle__bars span:nth-child(2) { inline-size: 70%; justify-self: end; }
  .menu-toggle:hover .menu-toggle__bars span:nth-child(2) { inline-size: 100%; }
  .menu-toggle[aria-expanded="true"] { background: var(--k-orange); transform: rotate(90deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ---------- Menu: backdrop + panel ---------- */
  .menu {
    position: fixed;
    inset: 0;
    z-index: 70;
    visibility: hidden;
    transition: visibility 0s .8s;            /* stay visible until the close animation ends */
  }
  .menu.is-open { visibility: visible; transition: visibility 0s; }

  .menu__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(14 10 27 / .45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .5s var(--ease-out);
  }
  .menu.is-open .menu__backdrop { opacity: 1; }

  .menu__panel {
    position: absolute;
    inset: clamp(.5rem, 1.2vw, .9rem);
    overflow: hidden;
    isolation: isolate;
    border-radius: clamp(20px, 2.4vw, 32px);
    background: var(--surface-solid);
    color: var(--ink);
    box-shadow: 0 40px 100px -30px rgb(14 10 27 / .6);
    /* Grows out of the menu button: circle centred on the button (set by JS) */
    clip-path: circle(0 at var(--origin-x, calc(100% - 3rem)) var(--origin-y, 3rem));
    transition: clip-path .75s cubic-bezier(.7, 0, .2, 1);
  }
  .menu.is-open .menu__panel { clip-path: circle(150vmax at var(--origin-x, calc(100% - 3rem)) var(--origin-y, 3rem)); }

  .menu__inner {
    position: relative;
    z-index: 2;
    block-size: 100%;
    overflow-y: auto;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 2rem;
    /* bottom padding keeps the last link clear of the waves */
    padding: calc(var(--header-h) + 1.5rem) clamp(1.25rem, 4vw, 3.5rem) calc(clamp(7.5rem, 22vh, 12.5rem) + 1rem);
  }
  @media (min-width: 960px) {
    .menu__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: 1fr auto; column-gap: 4rem; }
    .menu__nav { grid-row: 1; }
    .menu__art { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-bottom: -2rem; }
  }

  /* ---------- Links ---------- */
  .menu__nav { position: relative; align-self: start; }
  .menu__list { display: grid; gap: .25rem; }
  .menu__list > li { overflow: clip; padding-block: .1rem; }

  .menu__link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem 1rem;
    border-radius: 14px;
    /* scales with width AND height, so short laptop screens still fit */
    font-size: clamp(1.6rem, min(1.1rem + 2.4vw, 5.6svh), 3.2rem);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.1;
    color: var(--ink);
    translate: 0 115%;
    transition: translate .8s var(--ease-out), color .3s, font-weight .35s;
  }
  .menu.is-open .menu__link { translate: 0 0; transition-delay: calc(.3s + var(--i, 0) * 70ms), 0s, 0s; }
  .menu__link:hover { color: var(--accent); }
  /* Current page: soft highlighted pill (like the reference) + serif accent */
  .menu__link[aria-current="page"],
  .menu__group.is-current > .menu__row .menu__link { background: color-mix(in oklab, var(--k-orange) 16%, transparent); }
  .menu__link[aria-current="page"]::after {
    content: "";
    inline-size: .5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--k-orange);
  }

  /* Gliding hover highlight via CSS Anchor Positioning */
  .menu__glide { display: none; }
  @supports (anchor-name: --a) {
    .menu__link:is(:hover, :focus-visible) { anchor-name: --menu-hover; }
    .menu__glide {
      display: block;
      position: absolute;
      position-anchor: --menu-hover;
      top: anchor(top);
      bottom: anchor(bottom);
      left: anchor(left);
      right: anchor(right);
      border-radius: 14px;
      background: color-mix(in oklab, var(--k-amber) 26%, transparent);
      opacity: 0;
      transition: top .35s var(--ease-out), bottom .35s var(--ease-out), left .35s var(--ease-out), right .35s var(--ease-out), opacity .25s;
    }
    .menu__nav:has(.menu__link:is(:hover, :focus-visible)) .menu__glide { opacity: 1; }
  }

  /* ---------- "Our Proficiencies" submenu ---------- */
  .menu__row { display: flex; align-items: center; gap: .25rem; }
  .menu__sub-toggle {
    display: grid;
    place-items: center;
    inline-size: 2.6rem;
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--ink);
    border: 2px solid var(--ink-mute);
    translate: 0 115%;
    transition: translate .8s var(--ease-out), rotate .5s var(--ease-spring), background-color .3s, border-color .3s;
  }
  .menu.is-open .menu__sub-toggle { translate: 0 0; transition-delay: calc(.3s + var(--i, 0) * 70ms), 0s, 0s, 0s; }
  .menu__sub-toggle svg { inline-size: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .menu__sub-toggle:hover { border-color: var(--accent); color: var(--accent); }
  .menu__sub-toggle[aria-expanded="true"] { rotate: 180deg; background: var(--k-amber); border-color: var(--k-amber); color: var(--k-indigo); }

  /* Height animates with grid-template-rows 0fr → 1fr (no JS measuring) */
  .menu__sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s var(--ease-out);
  }
  .menu__sub[data-open] { grid-template-rows: 1fr; }
  .menu__sub > ul { overflow: hidden; display: grid; gap: .1rem; padding-left: clamp(1rem, 2.5vw, 2rem); }
  .menu__sub a {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .35rem .9rem;
    border-radius: 10px;
    font-size: clamp(.95rem, min(.9rem + .5vw, 2.7svh), 1.3rem);
    font-weight: 500;
    color: var(--ink-soft);
    opacity: 0;
    translate: -1rem 0;
    transition: opacity .35s, translate .45s var(--ease-out), color .3s, background-color .3s;
  }
  .menu__sub a::before { content: ""; inline-size: 1.4rem; block-size: 2px; background: var(--grad-fire); border-radius: 2px; transition: inline-size .35s var(--ease-out); }
  .menu__sub[data-open] a { opacity: 1; translate: 0 0; transition-delay: calc(var(--j, 0) * 60ms + .1s), calc(var(--j, 0) * 60ms + .1s), 0s, 0s; }
  .menu__sub a:hover { color: var(--ink); }
  .menu__sub a:hover::before { inline-size: 2.2rem; }
  .menu__sub a[aria-current="page"] { color: var(--ink); background: color-mix(in oklab, var(--k-orange) 16%, transparent); font-weight: 600; }

  /* ---------- Right side: the logo's K mark (same as header + preloader) ---------- */
  .menu__art {
    position: relative;
    display: grid;
    place-items: center;
    align-self: center;
    opacity: 0;
    scale: .9;
    transition: opacity .6s .35s, scale .9s var(--ease-out) .35s;
  }
  .menu.is-open .menu__art { opacity: 1; scale: 1; }
  .menu__art svg { inline-size: min(70%, 20rem); overflow: visible; }
  @media (max-width: 959px) { .menu__art { display: none; } }
  /* Same colours as the header logo: ink pieces (follow the theme) + fire arc */
  .menu-k { fill: var(--ink); }
  .menu-k__arc { fill: url(#menuArc); }
  .menu-k path {
    opacity: 0;
    translate: 0 14px;
    transition: opacity .5s, translate .8s var(--ease-spring);
    transition-delay: calc(.45s + var(--d, 0) * .12s);
  }
  .menu.is-open .menu-k path { opacity: 1; translate: 0 0; }
  @media (prefers-reduced-motion: reduce) { .menu-k path { translate: none; transition-property: opacity; } }

  /* ---------- Footer row inside the menu (sits on the waves) ---------- */
  .menu__foot {
    position: absolute;
    z-index: 3;
    left: clamp(1.25rem, 4vw, 3.5rem);
    right: clamp(1.25rem, 4vw, 3.5rem);
    bottom: clamp(1rem, 2.5vh, 1.6rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 2rem;
    color: #fff;
    font-size: var(--fs-sm);
    opacity: 0;
    translate: 0 1rem;
    transition: opacity .5s, translate .6s var(--ease-out);
  }
  .menu.is-open .menu__foot { opacity: 1; translate: 0 0; transition-delay: .9s; }
  .menu__foot a { font-weight: 600; border-bottom: 1px solid rgb(255 255 255 / .45); transition: border-color .3s; }
  .menu__foot a:hover { border-color: #fff; }

  /* ---------- Organic waves rising from the bottom ---------- */
  .menu__waves {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    block-size: clamp(7.5rem, 22vh, 12.5rem);
    pointer-events: none;
  }
  .wave {
    position: absolute;
    inset: auto 0 0 0;
    block-size: 100%;
    translate: 0 105%;
    transition: translate 1s cubic-bezier(.34, 1.3, .64, 1);    /* slight overshoot = "smooth pop" */
  }
  .wave svg { position: absolute; bottom: 0; left: 0; inline-size: 200%; max-inline-size: none; block-size: 100%; }  /* 200% = two periods for a seamless loop */
  .wave--back  { block-size: 100%; transition-delay: .25s; }
  .wave--mid   { block-size: 82%;  transition-delay: .38s; }
  .wave--front { block-size: max(62%, 5rem); transition-delay: .5s; }
  .wave--back svg path  { fill: var(--k-amber); opacity: .65; }
  .wave--mid svg path   { fill: var(--k-orange); }
  .wave--front svg path { fill: var(--k-magenta); }
  :root[data-theme="dark"] .wave--front svg path { fill: var(--k-indigo); }
  :root[data-theme="dark"] .wave--back svg path { fill: var(--k-plum); opacity: .9; }
  .menu.is-open .wave { translate: 0 0; }
  /* Close: waves sink faster, without delays */
  .menu:not(.is-open) .wave { transition-duration: .45s; transition-delay: 0s; transition-timing-function: var(--ease-out); }
  .menu:not(.is-open) .menu__link,
  .menu:not(.is-open) .menu__sub-toggle { transition-delay: 0s; transition-duration: .35s; }

  /* Lock page scroll while the menu is open */
  .menu-open, .menu-open body { overflow: hidden; }
}


/* ----------------------------------------------------------------------------
   PRELOADER — shared by every page (markup lives in src/partials/layout.html)
   ----------------------------------------------------------------------------
   States (all set on <html>, never on the loader itself, so they apply
   before the first paint):
     .is-loading       → set by the inline head script → loader covers the page
     .is-return        → already visited this session → shorter, faster intro
     .is-leaving-page  → set by main.js on internal link clicks → curtain
                         rises again, then the browser navigates
   Without JS neither class exists, so the loader can never hide content.

   Intro:  the site logo (identical to the header one) builds in — the K mark
           pops up, then the wordmark rises from below — and a neo-brutalist
           glass bar fills with real image/font progress.
   Exit:   two stacked curtains (page colour, then brand gradient) lift with
           a curved, liquid bottom edge while the content drifts up faster
           (parallax) — the hero then animates in underneath.
   ---------------------------------------------------------------------------- */
@layer components {
  .preloader { display: none; }

  .is-loading .preloader,
  .is-leaving-page .preloader {
    display: grid;
    position: fixed;
    inset: 0;
    z-index: 100001;                       /* above the cookie popup (60) + grain (100) */
    place-items: center;
    cursor: progress;
  }

  /* Two full-screen curtains: brand gradient underneath, page colour on top */
  .preloader__layer { position: absolute; inset: 0; }
  .preloader__layer--brand { background: var(--grad-k); }
  .preloader__layer--main {
    display: grid;
    place-items: center;
    overflow: clip;
    background: var(--bg);
  }

  /* Same grain as body::before — the page grain sits below the loader */
  .preloader__layer--main::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .08;
    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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  :root[data-theme="dark"] .preloader__layer--main::after { opacity: .12; mix-blend-mode: screen; }

  /* Soft organic glow behind the mark (logo colours) */
  .preloader__blob {
    position: absolute;
    inline-size: clamp(16rem, 46vmin, 30rem);
    aspect-ratio: 1;
    border-radius: var(--blob);
    background: var(--grad-brand);
    filter: blur(60px);
    opacity: .22;
  }

  .preloader__inner {
    position: relative;
    display: grid;
    justify-items: center;
    gap: clamp(1rem, 3vmin, 1.75rem);
  }

  /* Logo — the exact header logo (inline SVG, same paths). Text + K stem take the
     theme ink colour, the arcs keep their gradient. Final state by default, so
     reduced-motion users simply see the finished logo. */
  .preloader__logo { display: block; inline-size: clamp(13rem, 42vmin, 21rem); block-size: auto; fill: var(--ink); overflow: visible; }
  .pl-mark, .pl-word { transform-box: fill-box; }
  .pl-mark { transform-origin: 50% 100%; }

  /* Progress: liquid-glass track + neo-brutalist outline and hard shadow */
  .preloader__bar {
    inline-size: clamp(9rem, 28vmin, 14rem);
    block-size: .55rem;
    overflow: clip;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: 3px 3px 0 var(--line);
    backdrop-filter: blur(8px) saturate(1.4);
  }
  .preloader__bar span {
    display: block;
    block-size: 100%;
    background: var(--grad-fire);
    transform-origin: 0 50%;
    scale: var(--progress, 0) 1;           /* --progress (0…1) is set by main.js */
    transition: scale .5s var(--ease-out);
  }

  /* Baseline exit (reduced motion): a plain fade, no movement */
  .preloader.is-done { opacity: 0; pointer-events: none; transition: opacity .4s; }
  /* While leaving a page only the curtains are shown — the next page draws the mark */
  .is-leaving-page .preloader__inner { opacity: 0; }

  @media (prefers-reduced-motion: no-preference) {
    /* --t scales every duration/delay: full intro first, quick one afterwards */
    .preloader { --t: 1; }
    .is-return .preloader { --t: .45; }

    .preloader__blob { animation: morph 8s ease-in-out infinite alternate, pl-breathe 3s ease-in-out infinite; }

    /* --- Intro choreography: K mark pops up, then the wordmark rises --- */
    .pl-mark { animation: pl-pop calc(.8s * var(--t)) var(--ease-spring) calc(.1s * var(--t)) both; }
    .pl-word { animation: pl-rise calc(.9s * var(--t)) var(--ease-out) calc(.4s * var(--t)) both; }

    .preloader__bar { animation: pl-fade .6s var(--ease-out) calc(.5s * var(--t)) both; }

    /* --- Exit: curtains lift with a curved bottom edge, brand layer trails --- */
    .preloader.is-done { opacity: 1; transition: none; }
    .preloader__layer {
      transition:
        translate 1s cubic-bezier(.76, 0, .24, 1),
        border-radius 1s cubic-bezier(.76, 0, .24, 1);
    }
    .preloader__layer--brand { transition-delay: .12s; }
    .is-done .preloader__layer {
      translate: 0 -105%;
      border-end-start-radius: 50% 18vh;
      border-end-end-radius: 50% 18vh;
    }
    /* Parallax 2.0: content leaves faster than its curtain */
    .is-done .preloader__inner {
      translate: 0 -14vh;
      opacity: 0;
      transition: translate .8s cubic-bezier(.76, 0, .24, 1), opacity .5s;
    }

    /* --- Page leave: curtains rise from below with a curved top edge --- */
    .is-leaving-page .preloader__layer { animation: pl-cover .6s cubic-bezier(.76, 0, .24, 1) both; }
    .is-leaving-page .preloader__layer--main { animation-delay: .08s; }

    @keyframes pl-pop     { from { scale: .4; opacity: 0; } }
    @keyframes pl-rise    { from { translate: 0 30%; opacity: 0; } }
    @keyframes pl-fade    { from { opacity: 0; translate: 0 .75rem; } }
    @keyframes pl-breathe { 50% { scale: 1.12; opacity: .32; } }
    @keyframes pl-cover {
      from {
        translate: 0 105%;
        border-start-start-radius: 50% 18vh;
        border-start-end-radius: 50% 18vh;
      }
    }
  }
}


/* ==========================================================================
   SECTIONS: HOME — hero carousel, intro scrub, bento, why, strategy (CTA)
   ========================================================================== */
@layer sections {

  /* ===================== HERO ===================== */
  /* The video fills the hero in BOTH themes; the theme decides the light on it:
       • DARK  → night: a deep navy veil on the copy side, light text.
       • LIGHT → day:   an egg-shell veil (the page colour) that dissolves
                        towards the globe, dark text.
     The two veils are separate layers (::before / ::after) so a theme switch
     cross-fades them instead of jumping. */
  .hero {
    --hero-navy: #01063f;                /* sampled from the video's darkest edge */
    --hero-cream: 246 240 231;           /* = light --bg (#f6f0e7), as RGB for alpha */

    position: relative;
    isolation: isolate;
    min-height: 100svh;
    display: grid;
    align-items: center;
    padding-block: calc(var(--header-h) + 3rem) clamp(7rem, 12vw, 10rem);  /* room for the wave */
    overflow: clip;
    color: var(--ink);
    background: var(--bg);                /* shows only if the poster fails */
    transition: background-color .6s var(--ease-out);
  }
  /* Dark: local token overrides flip text, lines and muted UI to light inside
     the hero only — dots, eyebrow and buttons follow automatically */
  :root[data-theme="dark"] .hero {
    --ink: #f5eee4;
    --ink-soft: #d9d0e8;
    --ink-mute: rgb(245 238 228 / .26);
    --line: #f5eee4;
    --accent: var(--k-amber);
    background: var(--hero-navy);
  }

  /* ---- Background media: poster underneath, video fades in on top ---- */
  .hero__video { position: absolute; inset: 0; z-index: -2; }
  .hero__video :is(img, video) {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 68% 50%;             /* the globe stays in frame on 4:3 → 21:9 screens */
  }
  .hero__clip { opacity: 0; transition: opacity 1.4s var(--ease-out); }
  .hero__video.is-playing .hero__clip { opacity: 1; }

  /* ---- Legibility veils: strong on the copy side, clear over the globe.
          ::before = night (navy), ::after = day (egg-shell). Only one is
          visible at a time; switching themes cross-fades them. ---- */
  .hero::before,
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transition: opacity .7s var(--ease-out);
  }
  .hero::before {
    opacity: 0;
    background:
      radial-gradient(55% 60% at 0% 100%, rgb(156 10 94 / .32), transparent 70%),
      linear-gradient(180deg, rgb(1 6 63 / .55) 0%, transparent 22%),
      linear-gradient(90deg, rgb(1 6 63 / .82) 0%, rgb(1 6 63 / .5) 36%, transparent 62%);
  }
  .hero::after {
    opacity: 1;
    background:
      radial-gradient(45% 55% at 0% 100%, rgb(156 10 94 / .12), transparent 70%),
      linear-gradient(180deg, rgb(var(--hero-cream) / .7) 0%, transparent 20%),
      /* short, eased falloff: clean egg-shell → straight into the video,
         no long semi-transparent band (which reads as grey fog over blue) */
      linear-gradient(90deg,
        rgb(var(--hero-cream) / .96) 0%,
        rgb(var(--hero-cream) / .9) 36%,
        rgb(var(--hero-cream) / .6) 44%,
        rgb(var(--hero-cream) / .2) 52%,
        transparent 60%);
  }
  :root[data-theme="dark"] .hero::before { opacity: 1; }
  :root[data-theme="dark"] .hero::after  { opacity: 0; }

  /* Accent words in light: magenta → orange reads better than amber on egg-shell */
  :root:not([data-theme="dark"]) .hero__title em,
  :root:not([data-theme="dark"]) .hero__title em .word__inner { background-image: var(--grad-brand); }

  /* ---- Organic wave in the page colour (theme-aware via --bg) ---- */
  .hero__wave {
    position: absolute;
    inset: auto 0 -1px;
    z-index: 1;
    inline-size: 100%;
    block-size: clamp(3rem, 7vw, 6.5rem);
    fill: var(--bg);
    pointer-events: none;
  }

  /* ---- Pause/play: small liquid-glass disc, bottom-right over the globe ---- */
  .hero__video-toggle {
    position: absolute;
    z-index: 2;
    right: var(--gutter);
    bottom: clamp(4rem, 8vw, 7.5rem);
    display: grid;
    place-items: center;
    inline-size: 2.9rem;
    aspect-ratio: 1;
    border-radius: 50%;
    color: #f5eee4;
    /* Dark liquid glass in both themes — it always sits on the night scene */
    background: rgb(1 6 63 / .38);
    border: 1px solid rgb(245 238 228 / .28);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 10px 24px -12px rgb(0 0 0 / .6);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    transition: transform .4s var(--ease-spring), background-color .3s;
  }
  .hero__video-toggle:hover { background: rgb(1 6 63 / .55); }
  /* Light, portrait: the button sits on egg-shell, not on the video → solid indigo */
  @media (max-aspect-ratio: 3/4) {
    :root:not([data-theme="dark"]) .hero__video-toggle { background: var(--k-indigo); border-color: transparent; }
  }
  .hero__video-toggle[hidden] { display: none; }
  .hero__video-toggle:hover { transform: scale(1.08); }
  .hero__video-icon {
    grid-area: 1 / 1;
    inline-size: 1.05rem;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity .25s, scale .35s var(--ease-spring);
  }
  .hero__video-icon--pause { fill: none; }
  .hero__video-icon--play { opacity: 0; scale: .5; }
  .hero__video-toggle.is-paused .hero__video-icon--pause { opacity: 0; scale: .5; }
  .hero__video-toggle.is-paused .hero__video-icon--play  { opacity: 1; scale: 1; }

  /* ---- Portrait screens (phones, upright tablets): globe on top, copy below.
          The video occupies the upper part and dissolves into the stage
          colour (navy at night, egg-shell by day). ---- */
  @media (max-aspect-ratio: 3/4) {
    .hero { align-items: end; }
    .hero__video {
      inset: 0 0 30%;
      -webkit-mask-image: linear-gradient(#000 62%, transparent);
      mask-image: linear-gradient(#000 62%, transparent);
    }
    .hero__video :is(img, video) { object-position: 50% 50%; }
    .hero::before {
      background:
        radial-gradient(70% 45% at 0% 100%, rgb(156 10 94 / .35), transparent 70%),
        linear-gradient(180deg, rgb(1 6 63 / .5) 0%, transparent 18%, transparent 45%, rgb(1 6 63 / .7) 70%);
    }
    .hero::after {
      background:
        radial-gradient(70% 40% at 0% 100%, rgb(156 10 94 / .1), transparent 70%),
        linear-gradient(180deg, rgb(var(--hero-cream) / .6) 0%, transparent 16%, transparent 40%, rgb(var(--hero-cream) / .96) 62%);
    }
  }

  .hero__grid {
    display: grid;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
  }
  @media (min-width: 960px) {
    .hero__grid { grid-template-columns: 1.15fr .85fr; }
  }

  /* Slides are stacked in one grid cell → no layout shift between slides */
  .hero__slides { display: grid; }
  .hero__slide {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    transition: opacity .5s, visibility 0s .5s;
  }
  .hero__slide.is-active { visibility: visible; opacity: 1; transition: opacity .5s; }

  .hero__title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: .98;
    margin: .25rem 0 2.25rem;
    max-inline-size: 13ch;
  }

  /* Gradient on the accent words (applied per word so transforms don't break clipping) */
  .hero__title em,
  .hero__title em .word__inner {
    background: var(--grad-fire);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* background-clip:text paints only inside the element's box, so italic tails and
     descenders that stick out would turn transparent — enlarge the painted area */
  .hero__title em .word__inner { padding: 0 .14em .2em; margin: 0 -.14em -.2em; }

  /* Progress pills (no numbers) */
  .hero__dots { display: flex; gap: .6rem; margin-top: 3rem; }
  .hero__dot {
    position: relative;
    inline-size: 2.4rem;
    block-size: 6px;
    border-radius: var(--radius-pill);
    background: var(--ink-mute);
    overflow: hidden;
    transition: inline-size .5s var(--ease-out);
  }
  .hero__dot::before { content: ""; position: absolute; inset: -12px 0; } /* bigger tap target */
  .hero__dot.is-active { inline-size: 4.8rem; }
  .hero__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--grad-fire);
    transform-origin: 0 50%;
    scale: 0 1;
  }
  .hero__dot.is-active::after { scale: 1 1; }


  /* ===================== INTRO (word scrub) ===================== */
  .intro__statement {
    font-size: clamp(1.6rem, 1rem + 2.4vw, 3.1rem);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.025em;
    max-inline-size: 34ch;
  }
  /* Each word's opacity is derived from --progress (0→1, set by JS)
     and its own index --i out of --n words. Pure CSS maths, no per-frame DOM writes per word. */
  .intro__statement .word {
    opacity: clamp(.14, calc(var(--progress, 1) * var(--n, 1) * 1.15 - var(--i, 0)), 1);
    transition: opacity .25s linear;
  }

  /* ===================== SERVICES (bento) ===================== */
  .bento {
    display: grid;
    gap: clamp(.8rem, 1.4vw, 1.25rem);
    grid-template-columns: 1fr;
  }
  @media (min-width: 700px) {
    .bento {
      grid-template-columns: repeat(2, 1fr);
      grid-template-areas: "a a" "b c" "k d";
    }
  }
  @media (min-width: 1100px) {
    .bento {
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: minmax(17rem, auto);
      grid-template-areas:
        "a a a a b b"
        "c c k k d d";
    }
  }
  /* Named areas only exist from 700px up; on mobile cards simply stack in DOM order */
  @media (min-width: 700px) {
    .bento__card--a { grid-area: a; }
    .bento__card--b { grid-area: b; }
    .bento__card--c { grid-area: c; }
    .bento__card--d { grid-area: d; }
    .bento__card--k { grid-area: k; }
  }

  .bento__card {
    --mx: 50%;
    --my: 50%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    padding: clamp(1.5rem, 2.4vw, 2.4rem);
    border-radius: var(--radius);
    transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
  }
  /* Cursor-following spotlight (coords set by JS) */
  .bento__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(28rem circle at var(--mx) var(--my), rgb(251 176 59 / .18), transparent 45%);
    opacity: 0;
    transition: opacity .4s;
  }
  .bento__card:hover::after { opacity: 1; }
  .bento__card:hover { transform: translateY(-6px); }
  .bento__card:hover .icon-bubble { border-radius: 58% 42% 45% 55% / 42% 55% 45% 58%; rotate: -8deg; }

  .bento__top { display: flex; justify-content: space-between; align-items: flex-start; }

  .bento__go {
    display: grid;
    place-items: center;
    inline-size: 2.8rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    transition: rotate .5s var(--ease-spring), background-color .3s, color .3s;
  }
  .bento__go svg { inline-size: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .bento__card:hover .bento__go { rotate: 45deg; background: var(--k-amber); color: var(--k-indigo); border-color: var(--k-amber); }

  .bento__title { font-size: var(--fs-lg); margin-bottom: .75rem; }
  /* Stretched link: whole card is clickable, but only one link in the a11y tree */
  .bento__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
  .bento__card p { color: inherit; opacity: .82; max-inline-size: 46ch; }

  /* Hero card: brand gradient */
  .bento__card--a { background: var(--grad-k); color: #f5eee4; box-shadow: var(--shadow-soft); }
  .bento__card--a .bento__title { font-size: var(--fs-xl); letter-spacing: -.035em; }

  /* Fire card: neo-brutal outline */
  .bento__card--d {
    background: var(--grad-fire);
    color: var(--k-indigo);
    border: 2px solid var(--line);
    box-shadow: 6px 6px 0 var(--line);
  }
  .bento__card--d:hover { box-shadow: 10px 12px 0 var(--line); }

  /* Decorative tile */
  .bento__card--k {
    display: none;
    padding: 0;
    background: var(--surface-solid);
    border: 1px solid var(--ink-mute);
  }
  @media (min-width: 700px) { .bento__card--k { display: block; min-height: 16rem; } }
  /* The logo's K mark, centred; same colours as the header logo (ink + fire arc) */
  .bento__mark { position: absolute; inset: 0; margin: auto; block-size: 68%; inline-size: auto; max-inline-size: 80%; fill: var(--ink); overflow: visible; }
  .bento__mark-arc { fill: url(#bentoArc); }

  /* ===================== STRATEGY (neo-brutalism) ===================== */
  .strategy__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    padding: clamp(2rem, 5vw, 4.5rem);
    border-radius: var(--radius);
    background: var(--surface-solid);
    border: 2px solid var(--line);
    box-shadow: 12px 12px 0 var(--k-magenta);
  }
  :root[data-theme="dark"] .strategy__card { box-shadow: 12px 12px 0 var(--k-orange); }
  @media (min-width: 900px) {
    .strategy__card { grid-template-columns: 1fr 1.1fr; align-items: end; }
  }
  .strategy__shape {
    position: absolute;
    z-index: -1;
    inline-size: 26rem;
    aspect-ratio: 1;
    top: -12rem;
    right: -8rem;
    border-radius: var(--blob);
    background: var(--grad-fire);
    opacity: .22;
    filter: blur(2px);
  }
  .strategy__title { font-size: var(--fs-xl); letter-spacing: -.035em; }
  .strategy__body { display: grid; gap: 1rem; justify-items: start; color: var(--ink-soft); }
  .strategy__body .btn { margin-top: 1rem; }
  /* After Why Choose Us: the CTA sits on the same light "sheet", which runs on to the footer */
  .why + .strategy { background: var(--bg-alt); padding-top: 0; }

  /* ===================== WHY (sticky + scrolling list) ===================== */
  .why {
    background: var(--bg-alt);
    border-radius: clamp(2rem, 6vw, 5rem) clamp(2rem, 6vw, 5rem) 0 0;
    margin-top: calc(var(--section) * .5);   /* the previous section's padding already adds space */
  }
  .why__grid { display: grid; gap: 3rem; }
  @media (min-width: 960px) {
    .why__grid { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 7rem); align-items: start; }
    .why__sticky { position: sticky; top: calc(var(--header-h) + 3rem); }
  }
  .why__title { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); font-weight: 500; letter-spacing: -.025em; margin-bottom: 1.5rem; }
  .why__lead  { color: var(--ink-soft); font-size: var(--fs-md); max-inline-size: 48ch; }

  .why__intro { font-size: var(--fs-lg); font-weight: 500; margin-bottom: 2rem; }
  .why__items { display: grid; gap: 1.25rem; }
  @media (min-width: 960px) { .why__items { gap: 22vh; padding-block: 8vh 14vh; } }

  .why__item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    border-radius: var(--radius);
    font-size: var(--fs-lg);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.015em;
  }
  .why__check {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 2.8rem;
    aspect-ratio: 1;
    border-radius: 44% 56% 52% 48% / 55% 45% 55% 45%;
    background: var(--grad-fire);
    color: var(--k-indigo);
    border: 2px solid var(--line);
  }
  .why__check svg { inline-size: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

  .why__outro {
    margin-top: 2.5rem;
    padding: clamp(1.5rem, 3vw, 2.2rem);
    border-radius: var(--radius);
    background: var(--k-indigo);
    color: #f5eee4;
    border: 2px solid var(--line);
    box-shadow: 8px 8px 0 var(--k-amber);
  }

}


/* ==========================================================================
   SECTIONS: FOOTER (shared)
   ========================================================================== */
@layer sections {
  /* ===================== FOOTER ===================== */
  .site-footer {
    position: relative;
    overflow: clip;
    padding-top: clamp(4rem, 8vw, 7rem);
    background: linear-gradient(170deg, #1f0f4d 0%, #14092f 100%);
    color: #e8deef;
    font-size: var(--fs-sm);
  }
  .footer__grid { display: grid; gap: 2.5rem; }
  @media (min-width: 640px)  { .footer__grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr .8fr .9fr 1.3fr; } }

  .footer__logo img { inline-size: 120px; margin-bottom: 1.25rem; }
  .footer__about p { max-inline-size: 34ch; color: #c8bdd9; }
  .footer__title { font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--k-amber); margin-bottom: 1.1rem; }
  .footer__col ul { display: grid; gap: .55rem; }
  .footer__col a { position: relative; transition: color .3s; }
  /* Underline grows from the left on hover */
  .footer__col a::after {
    content: "";
    position: absolute;
    inset: auto 0 -2px 0;
    block-size: 1px;
    background: currentColor;
    scale: 0 1;
    transform-origin: right;
    transition: scale .45s var(--ease-out);
  }
  .footer__col a:hover { color: var(--k-amber); }
  .footer__col a:hover::after { scale: 1 1; transform-origin: left; }
  .footer__col address { display: grid; gap: .6rem; color: #c8bdd9; }
  .footer__mail { color: #f5eee4; font-weight: 500; }

  .footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 4rem;
    padding-block: 1.5rem;
    border-top: 1px solid rgb(255 255 255 / .12);
    color: #a99cbd;
  }
  .footer__legal ul { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; }
  .footer__legal a { color: var(--k-orange); transition: color .3s; }
  .footer__legal a:hover { color: var(--k-amber); }

  .footer__word {
    font-size: clamp(3.5rem, 13vw, 14rem);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: .8;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgb(251 176 59 / .35);
    padding-block: 1rem 0;
    margin-bottom: -.12em;
    user-select: none;
    /* The tall glyphs overflow the tight line box and would sit over the
       legal links above, swallowing their clicks — it's decoration only. */
    pointer-events: none;
  }
  /* Phones: the wordmark fits the screen width exactly (no drift, nothing cut off) */
  @media (max-width: 699px) {
    /* extra room below so, at the very bottom, the links sit above the round
       cookie + back-to-top buttons instead of behind them */
    .footer__legal { gap: .75rem; padding-bottom: 2.75rem; }
    .footer__legal ul { gap: .5rem 1.25rem; }
    .footer__word { font-size: 9.6vw; text-align: center; }
  }
}


/* ============================================================================
   INNER PAGES — shared blocks (originally built for the former Services page)
   Reopens the same cascade layers, so ordering/specificity rules still hold.
   Most blocks here (page-banner, subnav, split, band, hscroll,
   tags) are generic and will be reused by the other inner pages.
   ============================================================================ */
@layer sections {

  /* ===================== PAGE BANNER ===================== */
  .page-banner {
    position: relative;
    isolation: isolate;
    overflow-x: clip;              /* clip sideways only: blobs/arcs may bleed */
    overflow-y: visible;           /* softly into the next section, no hard edge */
    min-height: clamp(26rem, 68svh, 44rem);
    display: grid;
    align-items: end;
    padding-block: calc(var(--header-h) + 4rem) clamp(3rem, 6vw, 5rem);
  }
  .page-banner__blob { position: absolute; z-index: -1; }
  .page-banner__blob--a { inline-size: clamp(16rem, 38vw, 36rem); top: -20%; right: 8%; opacity: .45; }
  .page-banner__blob--b { inline-size: clamp(12rem, 24vw, 24rem); bottom: -25%; left: -6%; opacity: .4; }
  :root[data-theme="dark"] .page-banner__blob--a { opacity: .7; }
  /* Logo arcs turned around the top-right corner (flipped both ways): they ripple
     out of the corner and end in the right and top edges, never crossing the title
     or the next section. Hidden on phones, where that corner holds the header buttons. */
  .page-banner__arcs {
    position: absolute;
    z-index: -1;
    inline-size: clamp(14rem, 30vw, 28rem);
    right: 0;
    top: 0;
    scale: -1 -1;
    opacity: .9;
  }
  @media (max-width: 699px) { .page-banner__arcs { display: none; } }

  .page-banner__title {
    font-size: clamp(3rem, 1.4rem + 8vw, 9rem);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: .9;
  }
  .page-banner__title em,
  .page-banner__title em .word__inner {
    background: var(--grad-fire);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* Enlarged painted area so italic tails/descenders keep the gradient (see home hero) */
  .page-banner__title em .word__inner { padding: 0 .14em .2em; margin: 0 -.14em -.2em; }

  /* ===================== STICKY SERVICE SUB-NAV ===================== */
  .subnav {
    position: sticky;
    z-index: 40;
    top: .85rem;
    padding-inline: var(--gutter);
    transition: top .55s var(--ease-out);
  }
  /* When the main header is visible, sit just under it */
  .site-header:not(.is-hidden) ~ main .subnav { top: calc(var(--header-h) + .25rem); }

  .subnav__inner {
    display: flex;
    gap: .25rem;
    inline-size: max-content;
    max-inline-size: 100%;
    margin-inline: auto;
    padding: .35rem;
    border-radius: var(--radius-pill);
    overflow-x: auto;
    scrollbar-width: none;               /* swipe on mobile, no bar */
    scroll-snap-type: x proximity;
  }
  .subnav__inner::-webkit-scrollbar { display: none; }
  .subnav a {
    flex: none;
    scroll-snap-align: center;
    padding: .55rem 1.1rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
    color: var(--ink-soft);
    transition: background-color .35s, color .35s, box-shadow .35s;
  }
  .subnav a:hover { color: var(--ink); background: var(--ink-mute); }
  .subnav a.is-active {
    color: #fff;
    background: var(--grad-brand);
    box-shadow: 0 8px 20px -10px rgb(156 10 94 / .6);
  }

  /* ===================== SPLIT (Z rows) ===================== */
  .split__grid { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
  @media (min-width: 900px) {
    .split__grid { grid-template-columns: .9fr 1.1fr; }
    .split--wide .split__grid { grid-template-columns: 1.15fr .85fr; }
  }
  .split__title { font-size: var(--fs-xl); letter-spacing: -.035em; margin-bottom: 1.75rem; }
  .split__copy { display: grid; gap: 1.1rem; justify-items: start; }
  .split__copy > p { color: var(--ink-soft); max-inline-size: 58ch; }
  .split__media { margin: 0; justify-self: center; inline-size: min(82%, 32rem); }
  .split--wide .split__media { inline-size: 100%; }

  /* Organic photo frame with a neo-brutalist offset shadow-shape */
  .organic-frame {
    position: relative;
    isolation: isolate;
    aspect-ratio: 4 / 5;
  }
  .organic-frame::before,
  .organic-frame > img { border-radius: var(--blob); border: 2px solid var(--line); }
  .organic-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    translate: 16px 16px;
    background: var(--k-amber);
  }
  .organic-frame > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;                 /* photo fills the blob (portrait crop) */
    object-position: 50% 50%;          /* server corridor: vanishing point centred */
    background: var(--grad-k);         /* shown while the image loads */
  }

  /* Photo "window": fixed frame, the photo drifts inside it (parallax-img).
     The image is 5rem taller than the frame so the drift never shows an edge. */
  .split__media--window {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: clip;
    border: 2px solid var(--line);
    border-radius: var(--radius) var(--radius) clamp(3rem, 8vw, 6rem) var(--radius);
    box-shadow: 12px 12px 0 var(--k-amber);
    background: var(--grad-k);
  }
  .split__media--window img {
    position: absolute;
    inset: -2.5rem 0 auto;
    inline-size: 100%;
    block-size: calc(100% + 5rem);
    object-fit: cover;
    object-position: 50% 58%;          /* typing hands + glowing circuit above the keys */
  }

  /* ===================== PARALLAX PHOTO BAND ===================== */
  .band {
    position: relative;
    isolation: isolate;
    overflow: clip;
    min-height: clamp(26rem, 80svh, 46rem);
    display: grid;
    align-items: center;
    margin-block: clamp(2rem, 5vw, 4rem);
  }
  .band__bg { position: absolute; inset: -12% 0; z-index: -2; }
  .band__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 64% 45%; }  /* laptop + hands right of the card; on phones they stay in the crop */
  .band::after {                         /* brand tint so the glass card reads */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Strong on the left behind the glass card, fading out so the photo stays visible */
    background: linear-gradient(100deg, rgb(42 20 104 / .88) 0%, rgb(42 20 104 / .55) 38%, rgb(156 10 94 / .18) 70%, rgb(242 107 42 / .08) 100%);
  }
  .band__card {
    display: grid;
    gap: 2rem;
    justify-items: start;
    max-inline-size: 38rem;
    padding: clamp(1.75rem, 4vw, 3rem);
    border-radius: var(--radius);
  }
  .band__text { font-size: var(--fs-lg); font-weight: 500; line-height: 1.35; letter-spacing: -.015em; }

  /* ===================== CONSULTING (reuses .why sticky layout) ===================== */
  .consult__title { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.035em; }
  .consult__lead { margin-top: 1rem; color: var(--ink); font-weight: 500; }
  .consult__media { margin: 0 0 2rem; }
  .consult__media img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: 70% 40%;          /* the team (right side of the photo) */
    border-radius: var(--radius);
    border: 2px solid var(--line);
    box-shadow: 10px 10px 0 var(--k-orange);
    background: var(--surface-solid);
  }
  @media (min-width: 960px) { .why__items--tight { gap: 9vh; padding-block: 4vh 10vh; } }

  /* ===================== PROVEN CONSULTANCY (3-tile bento) ===================== */
  .section-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
  .section-head__title { margin-bottom: 0; }
  .section-head__title em { color: var(--accent); }
  .section-head__lead { max-inline-size: 60ch; color: var(--ink-soft); font-size: var(--fs-md); }
  @media (min-width: 960px) {
    .section-head { grid-template-columns: 1.3fr 1fr; align-items: end; }
  }

  /* Override the home-page bento areas/columns at every breakpoint */
  .bento.bento--three { grid-template-areas: none; grid-auto-rows: auto; }
  @media (min-width: 700px) {
    .bento.bento--three { grid-template-columns: repeat(2, 1fr); }
    .bento--three .bento__card--statement { grid-column: 1 / -1; }
  }
  @media (min-width: 1100px) {
    .bento.bento--three { grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; }
    .bento--three .bento__card--statement { grid-column: 1; grid-row: 1 / span 2; }
  }
  .bento--three .bento__card { justify-content: flex-start; }
  .bento--three .bento__card p { opacity: 1; max-inline-size: 60ch; }

  .bento--three .bento__card--statement { justify-content: flex-end; }
  .bento__card--statement {
    min-height: 22rem;
    background: var(--grad-k);
    color: #f5eee4;
    box-shadow: var(--shadow-soft);
  }
  .bento__statement {
    font-size: clamp(1.4rem, 1rem + 1.4vw, 2.3rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.025em;
  }
  .bento__corner-arc {
    position: absolute;
    inset: -1px -1px auto auto;
    inline-size: 45%;
    fill: none;
    stroke: var(--k-amber);
    stroke-width: 14;
    opacity: .9;
    z-index: -1;
  }
  .bento__card--outline {
    background: var(--surface-solid);
    border: 2px solid var(--line);
    box-shadow: 8px 8px 0 var(--k-amber);
  }
  .bento__card--outline:hover { box-shadow: 12px 12px 0 var(--k-amber); }

  /* ===================== SOFTWARE + HORIZONTAL SCROLL ===================== */
  .software { padding-top: var(--section); }
  .software__head { display: grid; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
  @media (min-width: 960px) {
    .software__head { grid-template-columns: 1fr 1fr; align-items: end; gap: 5rem; }
    .software__head .display-heading { margin-bottom: 0; }
  }
  .software__intro { display: grid; gap: 1rem; color: var(--ink-soft); }
  .software__lead { color: var(--ink); font-weight: 600; }

  /* DEFAULT (mobile, reduced motion, no JS): native swipe row with snap */
  .hscroll__track {
    display: flex;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding: 1rem max(var(--gutter), (100vw - 1280px) / 2) 2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(var(--gutter), (100vw - 1280px) / 2);
    scrollbar-width: thin;
    scrollbar-color: var(--k-orange) transparent;
  }
  .hscroll__rail { display: none; }

  /* PINNED (desktop, JS adds .is-pinned): sticky stage, track translated by scroll */
  .hscroll.is-pinned { block-size: var(--hs-h, 300vh); }
  .hscroll.is-pinned .hscroll__sticky {
    position: sticky;
    top: 0;
    block-size: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
    overflow: hidden;
  }
  .hscroll.is-pinned .hscroll__track {
    overflow: visible;
    scroll-snap-type: none;
    translate: calc(var(--hs-x, 0) * -1px) 0;
    will-change: translate;
  }
  .hscroll.is-pinned .hscroll__rail {
    display: block;
    inline-size: min(100% - var(--gutter) * 2, 1280px);
    margin-inline: auto;
    block-size: 3px;
    border-radius: 3px;
    background: var(--ink-mute);
    overflow: hidden;
  }
  .hscroll__rail span {
    display: block;
    block-size: 100%;
    background: var(--grad-fire);
    transform-origin: 0 50%;
    scale: var(--hs-p, 0) 1;
  }

  .hcard {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: none;
    inline-size: clamp(16.5rem, 30vw, 25rem);
    min-block-size: clamp(22rem, 52svh, 30rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1rem;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    border-radius: var(--radius);
    scroll-snap-align: start;
    transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
  }
  .hcard:hover { transform: translateY(-8px) rotate(-.6deg); }
  .hcard h3 { font-size: var(--fs-lg); letter-spacing: -.025em; }
  .hcard p { font-size: var(--fs-sm); line-height: 1.6; opacity: .85; }

  /* Organic decorative shape in the corner of every card */
  .hcard__shape {
    position: absolute;
    z-index: -1;
    inline-size: 11rem;
    aspect-ratio: 1;
    top: -3rem;
    right: -3rem;
    border-radius: var(--blob);
    background: var(--grad-fire);
    opacity: .35;
    transition: scale .8s var(--ease-out), rotate .8s var(--ease-out);
  }
  .hcard:hover .hcard__shape { scale: 1.25; rotate: 25deg; }

  .hcard--k { background: var(--grad-k); color: #f5eee4; box-shadow: var(--shadow-soft); }
  .hcard--fire { background: var(--grad-fire); color: var(--k-indigo); border: 2px solid var(--line); box-shadow: 6px 6px 0 var(--line); }
  .hcard--fire .hcard__shape { background: var(--grad-k); }
  .hcard--outline { background: var(--surface-solid); border: 2px solid var(--line); box-shadow: 6px 6px 0 var(--k-magenta); }
  :root[data-theme="dark"] .hcard--outline { box-shadow: 6px 6px 0 var(--k-orange); }

  /* ===================== IT SOLUTIONS TAGS (neo-brutal) ===================== */
  .tags { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .75rem; }
  .tags li {
    padding: .55rem 1rem;
    border-radius: 12px;
    border: 2px solid var(--line);
    background: var(--surface-solid);
    box-shadow: 3px 3px 0 var(--line);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: transform .4s var(--ease-spring), background-color .3s, color .3s;
  }
  .tags li:nth-child(odd):hover  { transform: rotate(-3deg) translateY(-3px); background: var(--k-amber); color: var(--k-indigo); }
  .tags li:nth-child(even):hover { transform: rotate(3deg) translateY(-3px);  background: var(--k-amber); color: var(--k-indigo); }

  .closing-note {
    max-inline-size: 62ch;
    margin: clamp(3rem, 6vw, 5rem) auto 0;
    padding-top: 2rem;
    text-align: center;
    font-size: var(--fs-md);
    color: var(--ink-soft);
    background: linear-gradient(var(--k-orange), var(--k-orange)) top center / 4rem 3px no-repeat;
  }
}



/* ----------------------------------------------------------------------------
   MOTION — reveals, kinetic type, native scroll-driven animations
   All decorative motion is wrapped in prefers-reduced-motion: no-preference.
   ---------------------------------------------------------------------------- */
@layer motion {

  /* Keyframes are always defined (cheap), only *applied* when motion is OK */
  @keyframes morph {
    0%   { border-radius: 58% 42% 46% 54% / 48% 56% 44% 52%; }
    50%  { border-radius: 42% 58% 60% 40% / 56% 40% 60% 44%; }
    100% { border-radius: 52% 48% 38% 62% / 40% 62% 38% 60%; }
  }
  @keyframes dot-fill  { from { scale: 0 1; } to { scale: 1 1; } }
  @keyframes draw      { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes float     { 50% { translate: 0 -12px; } }

  /* Scroll-driven keyframes */
  @keyframes parallax  { to { translate: 0 calc(var(--speed, .2) * 100vh); } }
  @keyframes grow-x    { to { scale: 1 1; } }
  @keyframes ring      { to { --p: 1; } }
  @keyframes settle    { from { rotate: -3deg; translate: 0 4rem; } to { rotate: 0deg; translate: 0 0; } }
  @keyframes focus-in  { 0%, 100% { opacity: .35; scale: .95; } 35%, 65% { opacity: 1; scale: 1; } }
  @keyframes tighten   { from { letter-spacing: .08em; font-weight: 300; opacity: .2; } to { letter-spacing: -.04em; font-weight: 700; opacity: 1; } }
  @keyframes drift     { from { translate: 8% 0; } to { translate: -22% 0; } }

  @keyframes wave-drift { to { translate: -50% 0; } }
  @keyframes k-float    { 50% { translate: 0 -10px; } }

  @media (prefers-reduced-motion: no-preference) {

    /* --- Organic morphing shapes --- */
    /* --- Navbar menu: waves keep drifting, K illustration floats --- */
    .menu.is-open .wave svg { animation: wave-drift 14s linear infinite; }
    .menu.is-open .wave--mid svg { animation-duration: 10s; animation-direction: reverse; }
    .menu.is-open .wave--front svg { animation-duration: 18s; }
    .menu.is-open .menu__art svg { animation: k-float 6s ease-in-out 1.6s infinite; }

    .blob { animation: morph 16s ease-in-out infinite alternate; }
    .strategy__shape { animation: morph 20s ease-in-out infinite alternate; }

    /* --- Kinetic hero words: rise from a mask, staggered by --i --- */
    /* Mask padding (cancelled by negative margins, so layout is unchanged) leaves
       room for descenders (g, p, y) and italic overhangs — otherwise they get cut */
    .hero__title .word { display: inline-block; overflow: clip; padding: .04em .16em .26em; margin: -.04em -.16em -.26em; vertical-align: top; }
    .hero__title .word__inner {
      display: inline-block;
      translate: 0 110%;
      rotate: 6deg;
      transition: translate .9s var(--ease-out), rotate .9s var(--ease-out), color .35s;
    }
    .hero__slide.is-active .word__inner {
      translate: 0 0;
      rotate: 0deg;
      transition-delay: calc(var(--i) * 60ms + 120ms), calc(var(--i) * 60ms + 120ms), 0s;
    }
    /* Hover: the word takes the accent colour. Colour only — changing the weight
       would change the word's width, reflow the title and make it flicker. */
    .hero__title .word:hover .word__inner { color: var(--accent); }

    .hero__slide .eyebrow, .hero__slide .btn { translate: 0 1rem; opacity: 0; transition: translate .8s var(--ease-out), opacity .8s; }
    .hero__slide.is-active .eyebrow { translate: 0 0; opacity: 1; }
    .hero__slide.is-active .btn     { translate: 0 0; opacity: 1; transition-delay: .55s; }

    /* Active dot fills over the autoplay duration */
    .hero__dot.is-active::after { animation: dot-fill var(--autoplay, 6.5s) linear both; }
    .hero[data-paused] .hero__dot.is-active::after { animation-play-state: paused; }


    /* --- K mark on the bento tile: pieces rise in one after another --- */
    .is-in .bento__mark path { animation: mark-rise .8s var(--ease-spring) calc(.25s + var(--d, 0) * .12s) both; }
    @keyframes mark-rise { from { opacity: 0; translate: 0 14px; } }

    /* --- Staggered reveal (IntersectionObserver adds .is-in) --- */
    .is-ready [data-reveal] {
      opacity: 0;
      translate: 0 2.5rem;
      filter: blur(8px);
      transition:
        opacity .9s var(--ease-out) calc(var(--i, 0) * 110ms),
        translate 1.1s var(--ease-out) calc(var(--i, 0) * 110ms),
        filter .9s var(--ease-out) calc(var(--i, 0) * 110ms),
        transform .6s var(--ease-out),
        box-shadow .6s var(--ease-out);
    }
    .is-ready [data-reveal].is-in { opacity: 1; translate: 0 0; filter: blur(0); }

    /* --- Theme switch: circular reveal using the View Transitions API --- */
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
    ::view-transition-new(root) { animation: theme-reveal .75s var(--ease-out); }
    @keyframes theme-reveal {
      from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); }
      to   { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 0)); }
    }

    /* ================= NATIVE SCROLL-DRIVEN ANIMATIONS ================= */
    @supports (animation-timeline: scroll()) {

      /* Parallax 2.0: speed set per element with --speed */
      .parallax {
        animation: parallax linear both;
        animation-timeline: scroll(root);
        animation-range: 0 100vh;
      }

      /* Hero scroll choreography: the copy rises and dissolves faster than
         the video drifts (.hero__video is .parallax), so the scene gains depth */
      .hero__copy {
        animation: hero-copy-out linear both;
        animation-timeline: scroll(root);
        animation-range: 0 80vh;
      }
      @keyframes hero-copy-out { to { translate: 0 -12vh; opacity: 0; } }

      /* Reading progress + back-to-top ring, compositor-driven */
      .scroll-progress { scale: 0 1; animation: grow-x linear both; animation-timeline: scroll(root); }
      .to-top { animation: ring linear both; animation-timeline: scroll(root); }

      /* Kinetic section heading: tracking tightens + weight grows as it enters */
      .display-heading {
        animation: tighten linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 35%;
      }

      /* Neo-brutal card "drops" into place */
      .strategy__card {
        animation: settle linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 35%;
      }

      /* Sticky list: each card focuses while crossing the viewport centre */
      @media (min-width: 960px) {
        .why__item {
          animation: focus-in linear both;
          animation-timeline: view();
          animation-range: cover 10% cover 90%;
        }
      }

      /* Footer wordmark drifts horizontally (desktop only — on phones it fits the width) */
      @media (min-width: 700px) { .footer__word {
        animation: drift linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 0%;
      } }
    }
  }

  /* Reduced motion: keep content instantly visible, no transforms */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; scroll-behavior: auto !important; }
    .is-ready [data-reveal] { opacity: 1; translate: none; filter: none; }
  }
}


/* Motion for inner-page blocks (kinetic page titles, parallax band, drift) */
@layer motion {
  @keyframes band-parallax { from { translate: 0 -8%; } to { translate: 0 8%; } }
  @keyframes img-drift     { from { translate: 0 2.5rem; } to { translate: 0 -2.5rem; } }

  @media (prefers-reduced-motion: no-preference) {

    /* Kinetic page titles: words rise from a mask once JS adds .is-in */
    /* Same mask room as the home hero: descenders + italic overhangs stay visible */
    [data-kinetic-in] .word { display: inline-block; overflow: clip; padding: .04em .16em .26em; margin: -.04em -.16em -.26em; vertical-align: top; }
    [data-kinetic-in] .word__inner {
      display: inline-block;
      translate: 0 110%;
      rotate: 5deg;
      transition: translate 1s var(--ease-out), rotate 1s var(--ease-out), color .35s;
      transition-delay: calc(var(--i) * 90ms + 150ms), calc(var(--i) * 90ms + 150ms), 0s;
    }
    [data-kinetic-in].is-in .word__inner { translate: 0 0; rotate: 0deg; }
    /* Hover: colour only (a weight change would reflow the title and make it flicker) */
    [data-kinetic-in] .word:hover .word__inner { color: var(--accent); }

    .organic-frame::before, .organic-frame > img { animation: morph 18s ease-in-out infinite alternate; }
    .hcard__shape { animation: morph 14s ease-in-out infinite alternate; }

    @supports (animation-timeline: view()) {
      /* Photo band: image drifts slower than the page (true parallax) */
      .band__bg { animation: band-parallax linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
      /* IT Solutions illustration floats against the scroll */
      .parallax-img { animation: img-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    }
  }
}


/* ----------------------------------------------------------------------------
   UTILITIES
   ---------------------------------------------------------------------------- */
@layer utilities {
  /* Skip rendering work for off-screen heavy blocks until needed */
  .site-footer { content-visibility: auto; contain-intrinsic-size: auto 700px; }

  /* Keep a short phrase on one line — used on the last two words of headlines
     so the final line never holds a single word (e.g. "technology gaps") */
  .u-nowrap { white-space: nowrap; }
}