@layer fonts {

  /* ── Forma typefaces ─────────────────────────────────────────────── */
  @font-face {
    font-family: "Mona Sans";
    src: url("../fonts/mona-sans-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Mona Sans";
    src: url("../fonts/mona-sans-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Mona Sans";
    src: url("../fonts/mona-sans-semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Mona Sans";
    src: url("../fonts/mona-sans-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Geist";
    src: url("../fonts/geist-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Fragment Mono";
    src: url("../fonts/fragment-mono-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
}

@layer reset {

  /* ── Reset ───────────────────────────────────────────────────────── */
  :root {
    interpolate-size: allow-keywords;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  html {
    scroll-behavior: smooth;
    /* Thin dark thumb over the page-grey track, app-style. Standard props
       cover Firefox and every Chromium 121+; the ::-webkit- block below
       keeps the same look in older engines and lets the thumb be rounded
       and inset from the track edges. */
    scrollbar-width: thin;
    scrollbar-color: var(--color-dark) var(--color-light);
  }
  ::-webkit-scrollbar {
    width: var(--s8);
    height: var(--s8);
  }
  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner {
    background-color: var(--color-light);
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--color-dark);
    /* Inset border (clipped to padding-box) paints the padding area in the
       track colour: 8px gutter - 2px borders per side = a 4px visible bar. */
    border: 2px solid var(--color-light);
    background-clip: padding-box;
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #000;
  }
  /* Lenis drives its own easing — native smooth-scroll would fight it.
     The class is added by the library itself; without JS the rule above
     still gives smooth anchors (hence no `!important` global override). */
  html.lenis {
    scroll-behavior: auto;
    height: auto;
  }
  /* Recommended Lenis hygiene against scroll fights: no native smooth
     while Lenis glides, contained nested scroll areas, and a locked
     viewport while Lenis is stopped (e.g. mobile menu open). */
  .lenis.lenis-smooth {
    scroll-behavior: auto;
  }
  .lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
  }
  .lenis.lenis-stopped {
    overflow: hidden;
  }
  html:focus-within {
    scroll-behavior: auto;
  }

  body {
    margin: 0;
    min-block-size: 100svh;
    background-color: var(--color-light);
    color: var(--color-dark);
    font-family: var(--font-sans);
    font-size: var(--text-m);
    line-height: var(--text-lh);
  }

  h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol {
    margin: 0;
    padding: 0;
  }
  ul, ol { list-style: none; }

  img, picture, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  summary {
    cursor: pointer;
    list-style: none;
  }
  summary::-webkit-details-marker {
    display: none;
  }
}

@layer variables {

  /* ── Forma design tokens (extracted from the reference design) ──── */
  :root {
    color-scheme: only light;

    /* Colors */
    --color-light: #f2f2f2;      /* light band background / text on dark */
    --color-dark: #0f0f0f;       /* dark band background / primary text  */
    --color-black: #0a0a0a;
    --color-surface: #141414;    /* elevated dark surface                */
    --color-muted: #737373;      /* secondary text on light              */
    --color-muted-dark: #b5b5b5; /* secondary text on dark               */
    --color-faint: #8a8a8a;
    --color-line: #d9d9d9;       /* hairlines on light                   */
    --color-line-dark: #2a2a2a;  /* hairlines on dark                    */

    /* Type */
    --font-sans: "Mona Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-alt: "Geist", "Mona Sans", Arial, sans-serif;
    --font-mono: "Fragment Mono", "SFMono-Regular", Consolas, monospace;

    /* Fluid type scale — piecewise-linear clamps anchored at the design's
       own reference widths, so computed sizes are EXACT at var(--container) (desktop),
       810px (tablet) and 390px (mobile), and interpolate smoothly between:
         base (810px and up):  tablet value @810 → desktop value @1440
         min override (≤809px): mobile value @390 → tablet value @810
       Above 1440 / below 390 the clamps hold the desktop / mobile value,
       matching the original flat behavior outside the reference range. */
    --text-4xl: clamp(118px, 59.27px + 7.2508vw, 163.68px);  /* hero wordmark */
    --text-3xl: clamp(72px, 41.14px + 3.8095vw, 96px);        /* stat values   */
    --text-2xl: clamp(56px, 30.29px + 3.1746vw, 76px);        /* CTA heading   */
    --text-xl: clamp(44px, 23.43px + 2.5397vw, 60px);         /* section heads */
    --text-lg: clamp(32px, 11.43px + 2.5397vw, 48px);         /* about stmt    */
    --text-md: clamp(26px, 18.29px + 0.9524vw, 32px);         /* service rows  */
    --text-sm: 24px;        /* process titles (flat ≥810px) */
    --text-ms: 20px;        /* subheads: brand, cards, faq (flat everywhere) */
    --text-m: 16px;         /* body (flat everywhere)       */
    --text-s: 14px;         /* labels (flat everywhere)     */
    --text-xs: 12px;        /* captions (flat everywhere)   */
    --text-lh: 1.4;

    /* Spacing scale — micro steps stay flat (detail sizes); layout steps
       are framework-style single-segment fluid clamps over 390px → 1440px
       (span 1050): MIN at 390, current px value at 1440, linear between,
       clamped flat outside. Desktop (1440) is therefore pixel-identical to
       the old flat tokens; smaller viewports scale down proportionally.
       slope(vw) = (MAX-MIN)/1050*100; intercept = MIN-(MAX-MIN)*390/1050. */
    --s4: 4px;
    --s8: 8px;
    --s10: 10px;
    --s12: 12px;
    --s14: 14px;
    --s16: 16px;
    --s20: 20px;
    --s24: clamp(16px, 13.03px + 0.7619vw, 24px);
    --s28: clamp(18px, 14.29px + 0.9524vw, 28px);
    --s32: clamp(20px, 15.54px + 1.1429vw, 32px);
    --s40: clamp(24px, 18.06px + 1.5238vw, 40px);
    --s48: clamp(28px, 20.57px + 1.9048vw, 48px);
    --s56: clamp(32px, 23.09px + 2.2857vw, 56px);
    --s64: clamp(36px, 25.6px + 2.6667vw, 64px);
    --s80: clamp(44px, 30.63px + 3.4286vw, 80px);
    --s96: clamp(52px, 35.66px + 4.1905vw, 96px);
    --s120: clamp(64px, 43.2px + 5.3333vw, 120px);

    /* Shape / layout constants (exact — never fluid) */
    --radius-pill: 999px;
    --container: 1440px;
    --cap: 22px;   /* project-card rolling-caption row (keep in sync with
                       .project-card__rows gap + hover translate below) */
    --line: 1px;   /* hairline width */

    /* Band spacing — fluid like the scale above (was flat everywhere;
       the old stepped --gutter overrides are gone, the clamp absorbs
       their 16/24 endpoints, so --gutter-mid/min are removed too) */
    --section-space-m: clamp(48px, 36.11px + 3.0476vw, 80px);
    --section-space-l: clamp(72px, 54.17px + 4.5714vw, 120px);
    --gutter: clamp(16px, -7.77px + 6.0952vw, 80px);

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration: 0.4s;

    /* Breakpoint reference */
    --bp-mid: 1199px;
    --bp-min: 809px;
  }
}

@layer base {

  /* ── Responsive shell values ─────────────────────────────────────── */
  /* Type is fluid via the base clamps above, which already pass through
     the tablet values at 810px — no overrides needed here. (Spacing is
     fluid via its own clamps; the old stepped --gutter overrides were
     removed.) */

  /* Mobile band: second fluid segment, mobile value @390 → tablet @810.
     Meets the base clamp exactly at 810px, so there is no jump. */
  @media (max-width: 809.98px) {
    :root {
      --text-4xl: clamp(64px, 13.86px + 12.857vw, 118px);
      --text-3xl: clamp(48px, 25.71px + 5.7143vw, 72px);
      --text-2xl: clamp(38px, 21.29px + 4.2857vw, 56px);
      --text-xl: clamp(34px, 24.71px + 2.381vw, 44px);
      --text-lg: clamp(26px, 20.43px + 1.4286vw, 32px);
      --text-md: clamp(22px, 18.29px + 0.9524vw, 26px);
      --text-sm: clamp(20px, 16.29px + 0.9524vw, 24px);
    }
  }

  .u-visually-hidden {
    position: absolute !important;
    inline-size: var(--line);
    block-size: var(--line);
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .u-honeypot {
    position: absolute !important;
    inline-size: var(--line);
    block-size: var(--line);
    opacity: 0;
    pointer-events: none;
  }

  :focus-visible {
    outline: 2px solid var(--color-dark);
    outline-offset: 3px;
  }

  .section--dark :focus-visible {
    outline-color: var(--color-light);
  }

  .prose {
    max-inline-size: 62ch;
  }
  .prose p + p {
    margin-block-start: 1em;
  }
  .prose a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .prose img {
    border-radius: var(--s4);
  }
}

@layer components {

  /* ── Section shells ──────────────────────────────────────────────── */
  .section {
    padding-block: var(--section-space-m);
    padding-inline: var(--gutter);
  }
  /* First section of every page except home (home starts with .hero)
     clears the fixed header with an extra top offset. */
  .site-main > :first-child:not(.hero) {
    padding-block-start: 10rem;
  }
  .section--light {
    background-color: var(--color-light);
    color: var(--color-dark);
  }
  .section--dark {
    background-color: var(--color-dark);
    color: var(--color-light);
  }
  .section--dark.section {
    padding-block: var(--section-space-l);
  }
  .section__inner {
    max-inline-size: var(--container);
    margin-inline: auto;
  }

  .section-label {
    display: inline-flex;
    align-items: center;
    gap: var(--s8);
  }
  .section-label__dot {
    position: relative;
    inline-size: var(--s10);
    block-size: var(--s10);
    border-radius: 50%;
    background-color: var(--color-dark);
  }
  .section-label__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: rgb(15 15 15 / 0.6);
    animation: pulse 1.5s infinite;
  }
  .section-label--dark .section-label__dot {
    background-color: var(--color-light);
  }
  .section-label--dark .section-label__dot::after {
    background-color: rgb(242 242 242 / 0.5);
  }
  .section-label__text {
    font-size: var(--text-s);
    color: var(--color-muted);
  }
  .section-label--dark .section-label__text {
    color: var(--color-muted-dark);
  }

  @keyframes pulse {
    0%   { transform: scale(1);   opacity: 0.8; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
  }

  /* ── Header ──────────────────────────────────────────────────────── */
  .site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 50;
    background-color: transparent;
    padding: var(--s20) var(--gutter);
    transform: translateY(0);
    transition: transform 0.45s var(--ease-out), background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  }
  /* Header theme: transparent bar everywhere at the top — dark text by
     default, white only while over a dark hero (`.site-header--over-hero`,
     toggled from initHeaderScroll). The frosted bar (`.site-header--solid`)
     appears on scroll only. (difference-blend was tried here and dropped:
     the row blends inside the header's own stacking context, so it can
     never see the page behind a transparent bar.) */
  .site-header--solid {
    background-color: rgb(242 242 242 / 0.72);
    /* Single blur pass only: saturate() forces an extra color-matrix pass
       over the backdrop on every scroll frame (scroll jank on weak GPUs). */
    -webkit-backdrop-filter: blur(var(--s14));
    backdrop-filter: blur(var(--s14));
    box-shadow:
      0 var(--line) 0 rgb(15 15 15 / 0.06),
      0 var(--s12) var(--s32) rgb(15 15 15 / 0.08);
  }
  /* (no per-state text colors: the difference-blended inner row below
     handles contrast in every state) */
  .site-header--hidden {
    transform: translateY(-100%);
  }
  .site-header--open {
    background-color: var(--color-light);
    /* backdrop-filter would turn the header into the containing block of
       the fixed-position mobile menu — disable it while the menu is open. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  /* (open-state text also inherits the blended white row) */
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s24);
    max-inline-size: var(--container);
    margin-inline: auto;
    min-block-size: 29px;
  }
  .site-header__brand {
    font-size: var(--text-ms);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--color-dark);
    transition: color 0.3s var(--ease-out);
  }
  .site-header__contact-line {
    font-size: var(--text-s);
    color: var(--color-dark);
    transition: opacity var(--duration) var(--ease-out), color 0.3s var(--ease-out);
  }
  .site-header__contact-line:hover {
    opacity: 0.72;
  }
  /* White row only while over a dark hero (or, equivalently, anywhere
     the design calls for light-on-dark — same selector family). */
  .site-header--over-hero .site-header__brand,
  .site-header--over-hero .site-nav__link,
  .site-header--over-hero .site-header__contact-line {
    color: #fff;
  }
  .site-header--over-hero .site-header__burger-line {
    background-color: #fff;
  }
  /* Menu open: the panel is always light, so brand + close (X) are always
     dark — even over a dark hero. Placed after the over-hero rules with
     equal specificity so open wins while both classes coexist (including
     the animated close, which keeps --open until the exit finishes). */
  .site-header--open .site-header__brand,
  .site-header--open .site-nav__link,
  .site-header--open .site-header__contact-line {
    color: var(--color-dark);
  }
  .site-header--open .site-header__burger-line {
    background-color: var(--color-dark);
  }
  .site-header__brand sup {
    font-size: 0.55em;
    line-height: 0;
  }
  .site-nav__list {
    display: flex;
    gap: var(--s32);
  }
  .site-nav__link {
    font-size: var(--text-m);
    color: var(--color-dark);
    transition: opacity var(--duration) var(--ease-out);
  }
  .site-nav__link:hover {
    opacity: 0.72;
  }
  /* Rolling link: default word slides up/out, duplicate slides in from below.
     data-rolling-link provides the word via data attr; progressive enhancement. */
  .rolling-link {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    /* Fixed em-based box: the clip window and each word are exactly 1.4em,
       so the hover translate (-1.4em) is exactly one full word — no mid-word stops. */
    block-size: 1.4em;
    line-height: 1.4;
  }
  .rolling-link__stack {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    transition: transform 0.4s var(--ease-out);
  }
  .rolling-link__stack > span {
    display: inline-flex;
    align-items: center;
    block-size: 1.4em;
    line-height: 1.4;
  }
  .rolling-link--ready:hover .rolling-link__stack,
  .rolling-link--ready:focus-visible .rolling-link__stack {
    transform: translateY(-1.4em);
  }
  @media (prefers-reduced-motion: reduce) {
    .rolling-link__stack,
    .project-card__rows {
      transition: none;
    }
    .site-header--open .mobile-menu,
    .site-header--open .mobile-menu__link,
    .site-header--open .mobile-menu__footer,
    .site-header--open.site-header--closing .mobile-menu,
    .site-header--open.site-header--closing .mobile-menu__link,
    .site-header--open.site-header--closing .mobile-menu__footer {
      animation: none;
    }
  }
  .site-header__contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--s4);
  }

  .site-header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    inline-size: 46px;
    block-size: var(--s40);
    padding: var(--s8);
  }
  .site-header__burger-line {
    display: block;
    inline-size: 100%;
    block-size: 2px;
    background-color: var(--color-dark);
    transition: transform var(--duration) var(--ease-out), background-color 0.3s var(--ease-out);
  }
  .site-header--open .site-header__burger-line:first-child {
    transform: translateY(4.5px) rotate(45deg);
  }
  .site-header--open .site-header__burger-line:last-child {
    transform: translateY(-4.5px) rotate(-45deg);
  }

  .mobile-menu {
    position: fixed;
    inset: 0;
    block-size: 100dvh; /* full dynamic viewport, mobile-safe */
    z-index: -1;
    display: none; /* shown via .site-header--open inside the mobile breakpoint */
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--s56);
    padding: var(--s120) var(--gutter) var(--s40);
    background-color: var(--color-light);
  }
  /* Entrance: panel wipes down, links slide up in stagger, footer fades */
  .site-header--open .mobile-menu {
    animation: mobile-menu-in 0.55s var(--ease-out) both;
  }
  .mobile-menu__item {
    overflow: hidden; /* clip window for the word slide-up */
  }
  .site-header--open .mobile-menu__link {
    display: inline-block;
    animation: mobile-link-in 0.6s var(--ease-out) both;
  }
  .site-header--open .mobile-menu__item:nth-child(1) .mobile-menu__link { animation-delay: 0.16s; }
  .site-header--open .mobile-menu__item:nth-child(2) .mobile-menu__link { animation-delay: 0.22s; }
  .site-header--open .mobile-menu__item:nth-child(3) .mobile-menu__link { animation-delay: 0.28s; }
  .site-header--open .mobile-menu__item:nth-child(4) .mobile-menu__link { animation-delay: 0.34s; }
  .site-header--open .mobile-menu__item:nth-child(5) .mobile-menu__link { animation-delay: 0.4s; }
  .site-header--open .mobile-menu__footer {
    animation: mobile-fade-in 0.5s var(--ease-out) 0.5s both;
  }
  @keyframes mobile-menu-in {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0 0 0% 0); }
  }
  @keyframes mobile-link-in {
    from { transform: translateY(110%); }
    to   { transform: translateY(0); }
  }
  @keyframes mobile-fade-in {
    from { opacity: 0; transform: translateY(var(--s12)); }
    to   { opacity: 1; transform: none; }
  }
  /* Exit: JS keeps .site-header--open and adds .site-header--closing for
     ~450ms so the panel wipes back up, links drop out bottom-up and the
     footer fades — then both classes are removed. Higher specificity than
     the entrance rules above, so the out-animations win while closing. */
  .site-header--open.site-header--closing .mobile-menu {
    animation: mobile-menu-out 0.38s var(--ease-out) both;
  }
  .site-header--open.site-header--closing .mobile-menu__link {
    animation: mobile-link-out 0.3s var(--ease-out) both;
  }
  .site-header--open.site-header--closing .mobile-menu__item:nth-child(5) .mobile-menu__link { animation-delay: 0s; }
  .site-header--open.site-header--closing .mobile-menu__item:nth-child(4) .mobile-menu__link { animation-delay: 0.03s; }
  .site-header--open.site-header--closing .mobile-menu__item:nth-child(3) .mobile-menu__link { animation-delay: 0.06s; }
  .site-header--open.site-header--closing .mobile-menu__item:nth-child(2) .mobile-menu__link { animation-delay: 0.09s; }
  .site-header--open.site-header--closing .mobile-menu__item:nth-child(1) .mobile-menu__link { animation-delay: 0.12s; }
  .site-header--open.site-header--closing .mobile-menu__footer {
    animation: mobile-fade-out 0.25s var(--ease-out) both;
  }
  /* Fluid close: the header bar fades back to transparent WITH the panel
     wipe instead of lingering white until the exit classes drop. (Logo +
     burger stay dark via the --open rules while closing.) */
  .site-header--open.site-header--closing {
    background-color: transparent;
    box-shadow: none;
  }
  @keyframes mobile-menu-out {
    from { clip-path: inset(0 0 0% 0); }
    to   { clip-path: inset(0 0 100% 0); }
  }
  @keyframes mobile-link-out {
    from { transform: translateY(0); opacity: 1; }
    to   { transform: translateY(110%); opacity: 0; }
  }
  @keyframes mobile-fade-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(var(--s8)); }
  }
  .mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: var(--s24);
  }
  .mobile-menu__link {
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--color-dark);
  }
  .mobile-menu__footer {
    display: flex;
    flex-direction: column;
    gap: var(--s8);
  }
  .mobile-menu__contact {
    font-size: var(--text-m);
    color: var(--color-muted);
  }

  @media (max-width: 1199.98px) {
    .site-nav,
    .site-header__contact {
      display: none;
    }
    .site-header__burger {
      display: flex;
    }
    .site-header--open .mobile-menu {
      display: flex;
      z-index: 40;
    }
    .site-header--open .site-header__inner {
      position: relative;
      z-index: 41;
    }
  }

  /* ── Hero ────────────────────────────────────────────────────────── */
  .hero {
    position: sticky;
    inset-block-start: 0;
    block-size: 100svh;
    min-block-size: 640px;
    overflow: clip;
    display: flex;
    align-items: flex-end;
  }
  .hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  /* Anchored to the top: GSAP moves it DOWN (positive y), so no gap can
     ever appear above. Extra height below bleeds under the media box. */
  .hero__img {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    inline-size: 100%;
    block-size: 118%;
    object-fit: cover;
    object-position: center top;
    will-change: transform;
  }
  .hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(10 10 10 / 0.55) 0%, rgb(10 10 10 / 0.15) 45%, rgb(10 10 10 / 0.35) 100%);
  }
  .hero__content {
    position: relative;
    z-index: 1;
    inline-size: 100%;
    padding: var(--s40) var(--gutter) var(--s40);
    display: flex;
    flex-direction: column;
    gap: var(--s56);
  }
  .hero__lead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s32);
    max-inline-size: 296px;
    padding-inline-start: 0;
  }
  .hero__intro {
    font-size: var(--text-m);
    line-height: var(--text-lh);
    color: var(--color-muted-dark);
  }
  .hero__wordmark {
    font-size: var(--text-4xl);
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 1;
    color: var(--color-light);
    white-space: nowrap;
  }
  .hero__wordmark-r {
    font-size: 0.4em;
    vertical-align: super;
    line-height: 0;
  }
  /* Spacer that gives the sticky hero scroll room; following sections
     slide over the pinned hero, covering it (original behavior). */
  .hero-spacer {
    block-size: 33svh;
    background-color: transparent;
  }
  /* Opaque sections must paint ABOVE the pinned hero while sliding over it */
  .section,
  .cta,
  .site-footer {
    position: relative;
    z-index: 1;
  }

  @media (max-width: 1199.98px) {
    .hero__wordmark {
      white-space: normal;
    }
    .hero-spacer {
      block-size: 24svh;
    }
  }

  /* ── Arrow link (underlined CTA with double arrow) ───────────────── */
  .arrow-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s8);
    padding-block: 2px;
    inline-size: fit-content;
  }
  .arrow-link__label {
    font-size: var(--text-m);
    font-weight: 500;
    line-height: var(--text-lh);
  }
  /* Color on the container so the SVG arrows (stroke: currentColor)
     inherit the same tone as the label. */
  .arrow-link--light {
    color: var(--color-light);
  }
  .arrow-link--light .arrow-link__label {
    color: inherit;
  }
  .arrow-link--dark {
    color: var(--color-dark);
  }
  .arrow-link--dark .arrow-link__label {
    color: inherit;
  }
  .arrow-link__arrow {
    position: relative;
    inline-size: 18px;
    block-size: 18px;
    overflow: hidden;
  }
  .arrow-link__icon {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    transition: transform var(--duration) var(--ease-out);
  }
  .arrow-link__icon--b {
    transform: translate(-100%, 100%);
  }
  .arrow-link:hover .arrow-link__icon--a {
    transform: translate(100%, -100%);
  }
  .arrow-link:hover .arrow-link__icon--b {
    transform: translate(0, 0);
  }
  .arrow-link__lines {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    display: flex;
    flex-direction: column;
  }
  .arrow-link__line {
    display: block;
    block-size: var(--line);
    inline-size: 100%;
    transform-origin: left center;
  }
  .arrow-link__line--back {
    position: absolute;
    background-color: rgb(242 242 242 / 0.4);
  }
  .arrow-link__line--front {
    background-color: var(--color-light);
    transform: scaleX(1);
    transition: transform var(--duration) var(--ease-out);
  }
  .arrow-link--dark .arrow-link__line--back {
    background-color: rgb(15 15 15 / 0.25);
  }
  .arrow-link--dark .arrow-link__line--front {
    background-color: var(--color-dark);
  }
  .arrow-link:hover .arrow-link__line--front {
    transform: scaleX(0);
    transform-origin: right center;
  }

  /* ── Buttons — identical to arrow-link ─────────────────────────────
     button.twig emits both class sets (btn + arrow-link) on a single
     element, so the look comes straight from the arrow-link rules above.
     Kept here: native <button> UA resets + the legacy btn--outline tone
     (renders as dark) for any stored markup using btn classes alone. */
  button.btn {
    background: none;
    border: 0;
    padding-inline: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }
  .btn--outline {
    color: var(--color-dark);
  }
}

@layer components {

  /* ── About ───────────────────────────────────────────────────────── */
  .about__inner {
    display: flex;
    flex-direction: column;
    gap: var(--s80);
  }
  .about__head {
    display: grid;
    grid-template-columns: 32.3% 1fr;
    align-items: start;
    gap: var(--s24);
  }
  .about__head .section-label {
    padding-block-start: var(--s8);
  }
  .about__statement {
    font-size: var(--text-lg);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--color-dark);
    max-inline-size: 834px;
  }
  .about__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s40);
    margin-inline-start: 32.3%;
  }
  .stat {
    display: flex;
    flex-direction: column;
    gap: var(--s16);
    padding-block-start: var(--s24);
    border-block-start: var(--line) solid var(--color-line);
  }
  .stat__value {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-3xl);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.2;
    color: var(--color-dark);
    font-variant-numeric: tabular-nums;
  }
  .stat__digit {
    position: relative;
    display: inline-block;
    block-size: 1.2em;   /* one digit row; JS rolls the inner column */
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  }
  .stat__digit-col {
    display: flex;
    flex-direction: column;
    will-change: transform;
  }
  .stat__digit-col > span {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 1.2em;
    line-height: 1.2;
  }
  .stat__suffix {
    margin-inline-start: 0.08em;
  }
  .stat__label {
    font-size: var(--text-s);
    color: var(--color-muted);
  }

  @media (max-width: 809.98px) {
    .about__head {
      grid-template-columns: 1fr;
    }
    .about__stats {
      grid-template-columns: 1fr;
      margin-inline-start: 0;
    }
  }

  /* ── About page: hero / story / impact / team / awards ──────────── */
  .about-hero__inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--s32);
    justify-content: space-between;
  }
  .about-hero__title {
    font-size: var(--text-lg);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--color-dark);
    max-inline-size: 22ch;
  }

  .about-bio__media{
    display: flex;
    inline-size: fit-content;
    max-inline-size: 30%;
    gap: var(--s16);
  }
  .story__inner,
  .impact__inner,
  .team__inner,
  .awards__inner,
  .about-hero__intro {
    display: flex;
    flex-direction: column;
    gap: var(--s56);
  }
  .story__head,
  .impact__head,
  .team__head,
  .awards__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s24);
  }
  .story__heading,
  .impact__heading,
  .team__heading,
  .awards__heading {
    display: flex;
    flex-direction: column;
    gap: var(--s16);
  }
  .story__title,
  .impact__title,
  .team__title,
  .awards__title {
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--color-dark);
  }
  .story__subtitle,
  .impact__subtitle,
  .team__subtitle,
  .awards__subtitle {
    font-size: var(--text-m);
    color: var(--color-muted);
    max-inline-size: 44ch;
  }
  .about-teaser__body {
    display: flex;
    flex-direction: row; 
    gap: var(--s48);
    justify-content: space-between;

  }

  .story__body {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--s64);
    align-items: start;
  }
  .story__text {
    display: flex;
    flex-direction: column;
    gap: var(--s24);
  }
  .story__text p {
    font-size: var(--text-m);
    color: var(--color-muted);
    max-inline-size: 33ch;
  }
  .story__text p:first-child {
    font-size: var(--text-md);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--color-dark);
  }
  .story__media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s16);
  }
  .story__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    aspect-ratio: 3 / 4;
  }
  .story__img--a {
    grid-row: span 2;
    aspect-ratio: auto;
  }
  .impact__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s40);
  }
  .team__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s40) var(--s16);
  }
  .team-card {
    display: flex;
    flex-direction: column;
    gap: var(--s16);
  }
  .team-card__media {
    overflow: hidden;
  }
  .team-card__img {
    inline-size: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
  }
  .team-card__name {
    font-size: var(--text-ms);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-dark);
  }
  .team-card__role {
    font-size: var(--text-s);
    color: var(--color-muted);
  }
  .awards__list {
    display: flex;
    flex-direction: column;
    border-block-start: var(--line) solid var(--color-line);
  }
  .award-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    align-items: baseline;
    gap: var(--s24);
    padding: var(--s28) 0;
    border-block-end: var(--line) solid var(--color-line);
  }
  .award-row__title {
    font-size: var(--text-ms);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-dark);
  }
  .award-row__org {
    font-size: var(--text-m);
    color: var(--color-muted);
  }
  .award-row__year {
    font-size: var(--text-m);
    color: var(--color-dark);
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 1199.98px) {
    .team__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 809.98px) {
    .story__head,
    .impact__head,
    .team__head,
    .awards__head {
      flex-direction: column;
      align-items: flex-start;
    }
    .story__body {
      grid-template-columns: 1fr;
    }
    .impact__stats {
      grid-template-columns: 1fr;
    }
    .team__grid {
      grid-template-columns: 1fr;
    }
    .award-row {
      grid-template-columns: 1fr;
      gap: var(--s8);
    }
  }

  /* ── Projects / marquee ──────────────────────────────────────────── */
  .projects__inner {
    display: flex;
    flex-direction: column;
  }
  .projects__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s24);
  }
  .projects__heading {
    display: flex;
    flex-direction: column;
    gap: var(--s16);
  }
  .projects__title {
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.1;
  }
  .projects__subtitle {
    font-size: var(--text-m);
    color: var(--color-muted);
    max-inline-size: 291px;
  }
  .projects__foot {
    display: flex;
    justify-content: center;
    margin-block-start: var(--s96);
  }

  /* Asymmetric editorial grid — ONE class (shared by home + projects index).
     Reference @1440, container 1280 = 100%. The rhythm repeats every 3 rows,
     so rows are addressed by position (nesting, no --a/--b/--c modifiers):
       3n+1 duo: 39.45% (505, ar 505/780) + 49.375% (632, ar 632/450),
                  second pushed down 25%, right inset 1.25%
       3n+2 single: 81.95% (1049, ar 1049/630), left inset 8.36%,
                  pushed down 12.5%
       3n duo mirrored: 49.375% (pushed down 9.375%) + 39.45%,
                  right inset 1.33%; row tightened to 3.9% */
  .projects-grid {
    display: flex;
    flex-direction: column;
    margin-block-start: var(--s56);

    .projects-grid__row {
      display: flex;
      align-items: flex-start;

      &:nth-child(3n+1) > :nth-child(1) {
        inline-size: 39.45%;
      }
      &:nth-child(3n+1) > :nth-child(2) {
        inline-size: 49.375%;
        margin-inline-start: auto;
        margin-inline-end: 1.25%;
        margin-block-start: 25%;
      }
      &:nth-child(3n+2) {
        margin-block-start: 12.5%;
      }
      &:nth-child(3n+2) > :nth-child(1) {
        inline-size: 81.95%;
        margin-inline-start: 8.36%;
      }
      &:nth-child(3n) {
        margin-block-start: 3.9%;
      }
      &:nth-child(3n) > :nth-child(1) {
        inline-size: 49.375%;
        margin-block-start: 9.375%;
      }
      &:nth-child(3n) > :nth-child(2) {
        inline-size: 39.45%;
        margin-inline-start: auto;
        margin-inline-end: 1.33%;
      }
    }
  }

  .project-card {
    display: block;
    inline-size: 100%;
  }
  .project-card__media {
    overflow: hidden;
    /* No placeholder background: the box stays transparent until the
       photo paints, so loading never flashes a grey rectangle. */
    background-color: transparent;
  }
  .project-card__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out);
  }
  .project-card:hover .project-card__img {
    transform: scale(1.04);
  }
  /* Rolling caption: a one-line window (22px, as the original) over a
     column of two rows — title+year, then category+year. Hovering the
     card slides the column up exactly one row, so title and year roll
     together and the category appears in their place. */
  .project-card__caption {
    block-size: var(--cap);
    margin-block-start: var(--s8);
    overflow: hidden;
  }
  .project-card__rows {
    display: flex;
    flex-direction: column;
    gap: var(--s16);
    transition: transform var(--duration) var(--ease-out);
  }
  .project-card:hover .project-card__caption--roll .project-card__rows,
  .project-card:focus-visible .project-card__caption--roll .project-card__rows {
    transform: translateY(calc(var(--cap) * -1 - var(--s16)));
  }
  .project-card__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s12);
    white-space: nowrap;
  }
  .project-card__title {
    font-size: var(--text-s);
    font-weight: 500;
    line-height: var(--cap);
    color: var(--color-dark);
  }
  .project-card__year {
    font-size: var(--text-s);
    line-height: var(--cap);
    color: var(--color-dark);
  }
  .project-card__category {
    font-size: var(--text-s);
    line-height: var(--cap);
    color: var(--color-muted);
  }

  @media (max-width: 809.98px) {
    .projects__head {
      flex-direction: column;
      align-items: flex-start;
    }
    .projects-grid {
      .projects-grid__row {
        flex-direction: column;
        gap: var(--s48);
      }
      /* Same specificity as the desktop item rules above, so the
         full-width reset always wins on mobile. */
      .projects-grid__row:nth-child(3n+1) > :nth-child(1),
      .projects-grid__row:nth-child(3n+1) > :nth-child(2),
      .projects-grid__row:nth-child(3n+2) > :nth-child(1),
      .projects-grid__row:nth-child(3n) > :nth-child(1),
      .projects-grid__row:nth-child(3n) > :nth-child(2) {
        inline-size: 100%;
        margin: 0;
      }
      .projects-grid__row:nth-child(n+2) {
        margin-block-start: var(--s48);
      }
    }
    /* Mobile: every project card the same height — one shared ratio for
       all cards (grid + related). Beats the per-card inline aspect-ratios,
       hence !important; the cover-fit img fills the box either way. */
    .project-card__media {
      aspect-ratio: 4 / 3 !important;
    }
  }

  /* ── Services (dark) ─────────────────────────────────────────────── */
  .services__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s80);
    align-items: start;
  }
  .services__intro {
    position: sticky;
    inset-block-start: 160px;
    display: flex;
    flex-direction: column;
    gap: var(--s16);
  }
  .services__title {
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.1;
  }
  .services__subtitle {
    font-size: var(--text-m);
    color: var(--color-muted-dark);
    max-inline-size: 44ch;
  }
  .services__stack {
    display: flex;
    flex-direction: column;
    gap: var(--s96);
  }
  /* Sticky card stack: each row pins at the same top offset and the next
     one scrolls over it — opaque bg required for the covering effect. */
  .service-row {
    position: sticky;
    inset-block-start: 110px;
    display: grid;
    grid-template-columns: 1fr 336px;
    align-items: start;
    gap: var(--s40);
    background-color: var(--color-dark);
  }
  .service-row__body {
    display: flex;
    flex-direction: column;
    gap: var(--s16);
    min-block-size: 334px;
  }
  .service-row__number {
    font-size: var(--text-m);
    color: var(--color-muted-dark);
  }
  .service-row__title {
    font-size: var(--text-md);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.2;
  }
  .service-row__description {
    font-size: var(--text-m);
    color: var(--color-muted-dark);
    max-inline-size: 52ch;
  }
  .service-row__tags {
    font-size: var(--text-s);
    color: var(--color-muted-dark);
    margin-block-start: var(--s8);
  }
  .service-row__media {
    inline-size: 336px;
    block-size: 334px;
    overflow: hidden;
  }
  .service-row__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  @media (max-width: 1199.98px) {
    .services__inner {
      grid-template-columns: 1fr;
      row-gap: var(--s64);
    }
    .services__intro {
      position: static;
    }
  }
  @media (max-width: 809.98px) {
    .service-row {
      position: static; /* no sticky stack on mobile */
      grid-template-columns: 1fr;
      gap: var(--s24);
    }
    .services__stack {
      gap: var(--s64);
    }
    .service-row__body {
      min-block-size: 0;
    }
    .service-row__media {
      inline-size: 100%;
      block-size: auto;
      aspect-ratio: 336 / 334;
    }
  }

  /* ── Process (dark) ──────────────────────────────────────────────── */
  .process__inner {
    display: flex;
    flex-direction: column;
    gap: var(--s80);
  }
  .process__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s40);
  }
  .process__head-left {
    display: flex;
    flex-direction: column;
    gap: var(--s16);
  }
  .process__title {
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.1;
  }
  /* 8-cell checkerboard (4×2): each li contributes 2 cells via
     display:contents; even steps flip so the diagram leads. */
  .process__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s12);
    list-style: none;
  }
  .process-step {
    display: contents;
  }
  .process-cell {
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1; /* square cells, like the original */
    padding: var(--s20);
    border: var(--line) solid var(--color-line-dark);
  }
  .process-cell--text {
    gap: var(--s16);
    justify-content: space-between;
  }
  .process-cell--text .process-step__body {
    justify-content: flex-end;
    flex: 1;
  }
  .process-cell--media {
    align-items: center;
    justify-content: center;
  }
  .process-step__body {
    display: flex;
    flex-direction: column;
    gap: var(--s16);
  }
  .process-step__number {
    font-size: var(--text-m);
    color: var(--color-muted-dark);
  }
  .process-step__title {
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.2;
  }
  .process-step__description {
    font-size: var(--text-m);
    color: var(--color-muted-dark);
    max-inline-size: 30ch;
  }
  .process__subtitle {
    font-size: var(--text-m);
    color: var(--color-muted-dark);
    max-inline-size: 52ch;
  }
  .process-step__img {
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
  }

  @media (max-width: 1199.98px) {
    .process__list {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 809.98px) {
    .process__head {
      flex-direction: column;
      align-items: flex-start;
    }
    .process__list {
      grid-template-columns: 1fr;
    }
    /* Mobile stacks one cell per row with text always leading. Every cell
       is a direct grid item (li is display:contents), so order is global:
       each step gets its own pair, text first (even steps render the
       diagram cell first in the DOM via the checkerboard flip). */
    .process__list > li:nth-child(1) > .process-cell--text { order: 1; }
    .process__list > li:nth-child(1) > .process-cell--media { order: 2; }
    .process__list > li:nth-child(2) > .process-cell--text { order: 3; }
    .process__list > li:nth-child(2) > .process-cell--media { order: 4; }
    .process__list > li:nth-child(3) > .process-cell--text { order: 5; }
    .process__list > li:nth-child(3) > .process-cell--media { order: 6; }
    .process__list > li:nth-child(4) > .process-cell--text { order: 7; }
    .process__list > li:nth-child(4) > .process-cell--media { order: 8; }
    .process-cell {
      min-block-size: 0;
    }
    .process-cell--media {
      min-block-size: 240px;
    }
    /* Teaser Acerca: stacked with the portrait leading on mobile. */
    .about-teaser__body {
      flex-direction: column;
    }
    .about-teaser__body > .about-bio__media {
      order: -1;
      inline-size: 100%;
      max-inline-size: 100%;
    }
  }

  /* ── Testimonials ────────────────────────────────────────────────── */
  .testimonials__inner {
    display: flex;
    flex-direction: column;
    gap: var(--s64);
  }
  .testimonials__head {
    display: flex;
    flex-direction: column;
    gap: var(--s16);
  }
  .testimonials__title {
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.1;
  }
  .testimonials__slider {
    display: flex;
    align-items: center;
    gap: var(--s40);
  }
  .testimonials__nav {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--s48);
    block-size: var(--s48);
    border: var(--line) solid var(--color-line);
    border-radius: 50%;
    color: var(--color-dark);
    transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
  }
  .testimonials__nav:hover {
    background-color: var(--color-dark);
    color: var(--color-light);
  }
  .testimonials__nav-icon {
    inline-size: var(--s20);
    block-size: var(--s20);
  }
  .testimonials__viewport {
    flex: 1;
    overflow: hidden;
  }
  .testimonials__track {
    display: flex;
    transition: transform 0.6s var(--ease-out);
  }
  .testimonial {
    flex: none;
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--s40);
    padding-inline: 2px;
  }
  .testimonial__quote {
    font-size: var(--text-lg);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--color-dark);
    max-inline-size: 24em;
  }
  .testimonial__person {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
  }
  .testimonial__name {
    font-size: var(--text-m);
    font-weight: 500;
    color: var(--color-dark);
  }
  .testimonial__role {
    font-size: var(--text-m);
    color: var(--color-muted);
  }
  .testimonials__rating {
    display: flex;
    align-items: baseline;
    gap: var(--s24);
    padding-block-start: var(--s24);
    border-block-start: var(--line) solid var(--color-line);
  }
  .testimonials__score {
    font-size: var(--text-sm);
    letter-spacing: -0.02em;
    color: var(--color-dark);
  }
  .testimonials__rating-note {
    font-size: var(--text-m);
    color: var(--color-muted);
  }

  @media (max-width: 809.98px) {
    .testimonials__slider {
      flex-direction: column;
      align-items: stretch;
      gap: var(--s24);
    }
    .testimonials__nav {
      inline-size: 44px;
      block-size: 44px;
    }
  }

  /* ── FAQ ─────────────────────────────────────────────────────────── */
  .faqs__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s80);
    align-items: start;
  }
  .faqs__head {
    display: flex;
    flex-direction: column;
    gap: var(--s16);
    position: sticky;
    inset-block-start: 160px;
  }
  .faqs__title {
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.1;
  }
  .faqs__subtitle {
    font-size: var(--text-m);
    color: var(--color-muted);
    max-inline-size: 44ch;
  }
  .faqs__grid {
    display: flex;
    flex-direction: column;
  }
  .faq {
    border-block-end: var(--line) solid var(--color-line);
  }
  .faq__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s24);
    padding: var(--s24) var(--s12);
  }
  .faq__question {
    font-size: var(--text-ms);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-dark);
  }
  .faq__icon {
    position: relative;
    flex: none;
    inline-size: var(--s16);
    block-size: var(--s16);
  }
  .faq__icon::before,
  .faq__icon::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 2px;
    background-color: var(--color-dark);
    transition: transform var(--duration) var(--ease-out);
  }
  .faq__icon::after {
    transform: rotate(90deg);
  }
  /* Minus while open — but back to plus the instant a collapse starts
     (.is-closing), so the icon rotates WITH the shrink instead of
     snapping after the 480ms close timer. */
  .faq[open]:not(.is-closing) .faq__icon::after {
    transform: rotate(0deg);
  }
  /* Expand/collapse animation. Expand: the answer is a 0fr→1fr grid that
     grows straight from the [open] state. Collapse keeps [open] and adds
     .is-closing (inner content fades) while JS drives the shrink with an
     explicit-height WAAPI tween — grid fr interpolation snaps shut in
     Chromium, so the collapse is pixel-driven (same 0.45s easing).
     The bottom padding lives on the inner wrapper so it collapses too. */
  .faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s var(--ease-out);
    padding-inline: var(--s12);
  }
  .faq[open] > .faq__answer {
    grid-template-rows: 1fr;
  }
  /* No padding on the collapsing box: with box-sizing: border-box a box
     can never shrink below its own padding, so a bottom padding here would
     leave a 24px stub in every closed row. The spacing lives on the
     paragraph instead, inside the clipped area. */
  .faq__answer-inner {
    overflow: hidden;
    min-height: 0;
    opacity: 1;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  }
  .faq.is-closing .faq__answer-inner {
    opacity: 0;
    transform: translateY(calc(var(--s8) * -1));
  }
  .faq__answer p {
    font-size: var(--text-m);
    color: var(--color-muted);
    max-inline-size: 60ch;
    padding-block-end: var(--s24);
  }

  @media (max-width: 809.98px) {
    .faqs__inner {
      grid-template-columns: 1fr;
      row-gap: var(--s48);
    }
    .faqs__head {
      position: static;
    }
  }

  /* ── CTA band — full-bleed dark, bg image, centered ────────── */
  .cta {
    position: relative;
    display: grid;
    place-items: center;
    min-block-size: 640px;
    padding: var(--s96) var(--gutter);
    overflow: hidden;
  }
  .cta__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .cta__bg-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .cta__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.45);
  }
  .cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s24);
    text-align: center;
  }
  .cta__title {
    font-size: var(--text-2xl);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--color-light);
  }
  .cta__subtitle {
    font-size: var(--text-ms);
    color: var(--color-light);
    opacity: 0.8;
  }
  .cta__mail {
    color: inherit;
  }
  .cta__button {
    margin-block-start: var(--s16);
  }

  /* ── Footer ──────────────────────────────────────────────────────── */
  .site-footer {
    background-color: var(--color-dark);
    color: var(--color-light);
    padding: var(--section-space-l) var(--gutter) 0;
    overflow: clip;
  }
  .site-footer__inner {
    max-inline-size: var(--container);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--s80);
  }
  .site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--s40);
  }
  .site-footer__newsletter {
    display: flex;
    flex-direction: column;
    gap: var(--s20);
    max-inline-size: 420px;
  }
  .site-footer__col-label {
    font-size: var(--text-s);
    color: var(--color-muted-dark);
  }
  .site-footer__newsletter-title {
    font-size: var(--text-md);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.2;
  }
  .site-footer__mail {
    margin: 0;
  }
  .site-footer__whatsapp {
    margin-block-start: var(--s4);
    align-self: flex-start;
  }
  .site-footer__form {
    display: flex;
    flex-direction: column;
    gap: var(--s12);
  }
  .site-footer__field {
    display: block;
  }
  .site-footer__input {
    inline-size: 100%;
    background: transparent;
    border: 0;
    border-block-end: var(--line) solid var(--color-line-dark);
    padding: var(--s12) 0;
    color: var(--color-light);
  }
  .site-footer__input::placeholder {
    color: var(--color-muted-dark);
  }
  .site-footer__input:focus {
    outline: none;
    border-block-end-color: var(--color-light);
  }
  .site-footer__form-status {
    font-size: var(--text-s);
    color: var(--color-muted-dark);
  }
  .site-footer__col {
    display: flex;
    flex-direction: column;
    gap: var(--s20);
  }
  .site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--s12);
  }
  .site-footer__link {
    font-size: var(--text-m);
    color: var(--color-muted-dark);
    transition: color var(--duration) var(--ease-out);
  }
  .site-footer__link:hover {
    color: var(--color-light);
  }
  .site-footer__link--legal {
    font-size: var(--text-s);
  }
  .site-footer__text {
    font-size: var(--text-m);
    color: var(--color-muted-dark);
  }
  .site-footer__wordmark {
    display: flex;
    justify-content: center;
  }
  .site-footer__wordmark-text {
    font-size: var(--text-4xl);
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 1;
    color: var(--color-light);
    white-space: nowrap;
  }
  .site-footer__wordmark-text sup {
    font-size: 0.4em;
    vertical-align: super;
    line-height: 0;
  }
  .site-footer__legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s24);
    padding-block: var(--s24);
    border-block-start: var(--line) solid var(--color-line-dark);
  }
  .site-footer__copyright {
    font-size: var(--text-s);
    color: var(--color-muted-dark);
  }
  .site-footer__legal-links {
    display: flex;
    gap: var(--s24);
  }

  @media (max-width: 1199.98px) {
    .site-footer__wordmark-text {
      font-size: 11.37vw;
    }
  }
  @media (max-width: 809.98px) {
    .site-footer__grid {
      grid-template-columns: 1fr;
    }
    .site-footer__legal {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  /* ── Generic pages ───────────────────────────────────────────────── */
  .page-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--s40);
  }
  .page-section__inner--narrow {
    max-inline-size: 720px;
  }
  .page-section__head {
    display: flex;
    flex-direction: column;
    gap: var(--s16);
  }
  .page-section__title {
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.1;
  }
  .page-section__description {
    font-size: var(--text-m);
    color: var(--color-muted);
    max-inline-size: 48ch;
  }
  .page-section__updated {
    font-size: var(--text-s);
    color: var(--color-muted);
  }

  /* ── Listing (projects index) ────────────────────────────────────── */
  .listing__inner {
    display: flex;
    flex-direction: column;
    gap: var(--s56);
  }
  .listing__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s24);
  }
  .listing__heading {
    display: flex;
    flex-direction: column;
    gap: var(--s16);
  }
  .listing__title {
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--color-dark);
  }
  .listing__subtitle {
    font-size: var(--text-m);
    color: var(--color-muted);
    max-inline-size: 44ch;
  }
  .listing__intro {
    font-size: var(--text-m);
    color: var(--color-muted);
    max-inline-size: 48ch;
  }
  .listing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s40) var(--s16);
  }
  .listing__grid .project-card {
    inline-size: 100%;
  }
  @media (max-width: 1199.98px) {
    .listing__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 809.98px) {
    .listing__grid {
      grid-template-columns: 1fr;
    }
    .listing__head {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  /* ── Project detail ──────────────────────────────────────────────── */
  .project {
    /* Top offset clears the fixed header; bottom keeps rhythm to Related. */
    padding-block: var(--section-space-l);
  }
  .project__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s24);
    padding-block-end: var(--section-space-l);
  }
  .project__intro-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s32);
    inline-size: 100%;
  }
  .project__intro-text {
    display: flex;
    flex-direction: column;
    gap: var(--s16);
  }
  .project__cta {
    flex: none;
    margin-block-start: var(--s8);
  }
  .project__title {
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--color-dark);
  }
  .project__subtitle {
    font-size: var(--text-md);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-muted);
    max-inline-size: 40ch;
  }
  .project__cover-wrap {
  }
  .project__cover {
    inline-size: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    display: block;
  }
  .project__specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s40);
    margin-block-start: var(--section-space-l);
    padding-block: var(--s32);
    border-block: var(--line) solid var(--color-line);
  }
  .project__spec {
    display: flex;
    flex-direction: column;
    gap: var(--s8);
  }
  .project__spec-label {
    font-size: var(--text-s);
    color: var(--color-muted);
  }
  .project__spec-value {
    font-size: var(--text-m);
    font-weight: 500;
    color: var(--color-dark);
  }
  .project__narratives {
    display: flex;
    flex-direction: column;
    gap: var(--s48);
    padding-block-start: var(--section-space-l);
  }
  .project__narrative {
    display: flex;
    flex-direction: column;
    gap: var(--s16);
    align-items: stretch;
  }
  .project__narrative-label {
    font-size: var(--text-m);
    font-weight: 500;
    color: var(--color-dark);
  }
  .project__narrative-text {
    font-size: var(--text-m);
    color: var(--color-muted);
    max-inline-size: 62ch;
  }
  .project__extra {
    max-inline-size: 62ch;
  }
  .project__gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s16);
    padding-block-start: var(--section-space-l);
  }
  .project__gallery-img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  .project__gallery-img:only-child {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 10;
  }
  .project__gallery-img--full {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 10;
  }
  /* Lone half-width image in its row: span both columns but keep half
     width, centered (4/3 ratio like its paired siblings). */
  .project__gallery-img--solo {
    grid-column: 1 / -1;
    inline-size: 50%;
    justify-self: center;
  }
  .listing__grid--related {
    grid-template-columns: repeat(2, 1fr);
  }
  .related__inner {
    display: flex;
    flex-direction: column;
    gap: var(--s56);
  }
  .related__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s24);
  }
  .related__heading {
    display: flex;
    flex-direction: column;
    gap: var(--s16);
  }
  .related__title {
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--color-dark);
  }
  .related__subtitle {
    font-size: var(--text-m);
    color: var(--color-muted);
    max-inline-size: 44ch;
  }

  @media (max-width: 809.98px) {
    .project__intro-row {
      flex-direction: column;
    }
    .project__specs {
      grid-template-columns: repeat(2, 1fr);
    }
    .project__gallery {
      grid-template-columns: 1fr;
    }
    .project__gallery-img--solo {
      inline-size: 100%;
    }
    .listing__grid--related {
      grid-template-columns: 1fr;
    }
    .related__head {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  /* ── Contact ─────────────────────────────────────────────────────── */
  .contact__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--s80);
    align-items: start;
  }
  .contact__main {
    display: flex;
    flex-direction: column;
    gap: var(--s24);
  }
  .contact__title {
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--color-dark);
  }
  .contact__subtitle {
    font-size: var(--text-m);
    color: var(--color-muted);
    max-inline-size: 48ch;
  }
  .contact__aside {
    align-self: self-end;
    margin-block-end: 5rem;
    display: flex;
    flex-direction: column;
    border-block-start: var(--line) solid var(--color-line); 
    align-self: self-end;
    margin-block-end: 5rem;
  }
  .contact__card {
    display: flex;
    flex-direction: column;
    gap: var(--s8);
    padding: var(--s28) 0;
    border-block-end: var(--line) solid var(--color-line);
  }
  .contact__card-label {
    font-size: var(--text-s);
    color: var(--color-muted);
  }
  .contact__card-value {
    font-size: var(--text-ms);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--color-dark);
  }
  a.contact__card-value {
    transition: opacity var(--duration) var(--ease-out);
  }
  a.contact__card-value:hover {
    opacity: 0.6;
  }
  .contact__form-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--s24);
    padding-block-start: var(--s16);
  }
  .contact__status {
    font-size: var(--text-m);
    color: var(--color-dark);
  }
  .contact__status--error {
    color: #8a2f2f;
  }

  @media (max-width: 809.98px) {
    .contact__inner {
      grid-template-columns: 1fr;
    }
  }

  /* ── Form fields (rendered by contact_form helper) ───────────────── */
  .fp-form {
    display: flex;
    flex-direction: column;
    gap: var(--s28);
  }
  .fp-form__row {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
  }
  .fp-form__row > span {
    font-size: var(--text-s);
    font-weight: 500;
    color: var(--color-dark);
  }
  .fp-form__row input,
  .fp-form__row textarea,
  .fp-form__row select {
    inline-size: 100%;
    background: transparent;
    border: 0;
    border-block-end: var(--line) solid var(--color-line);
    border-radius: 0;
    padding: var(--s12) 0;
    font: inherit;
    font-size: var(--text-m);
    color: var(--color-dark);
  }
  .fp-form__row textarea {
    min-block-size: var(--s96);
    resize: vertical;
  }
  .fp-form__row input::placeholder,
  .fp-form__row textarea::placeholder {
    color: var(--color-muted);
    opacity: 0.7;
  }
  .fp-form__row input:focus,
  .fp-form__row textarea:focus,
  .fp-form__row select:focus {
    outline: none;
    border-block-end-color: var(--color-dark);
  }
  /* Submit carries arrow-link classes (see contact_form() in
     cms/lib/template_helpers.php) — only native button resets + form
     alignment here; the look comes from the arrow-link rules. */
  .fp-form button[type="submit"] {
    align-self: flex-start;
    background: none;
    border: 0;
    padding-inline: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }

  /* ── Not found ───────────────────────────────────────────────────── */
  .notfound__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s24);
    min-block-size: 60svh;
    justify-content: center;
  }
  .notfound__code {
    font-family: var(--font-mono);
    font-size: var(--text-m);
    color: var(--color-muted);
  }
  .notfound__title {
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.1;
  }
  .notfound__text {
    font-size: var(--text-m);
    color: var(--color-muted);
  }

  /* ── Pagination ──────────────────────────────────────────────────── */
  .pagination {
    display: flex;
    gap: var(--s12);
    justify-content: center;
    padding-block-start: var(--s40);
  }
  .pagination a {
    font-size: var(--text-m);
    color: var(--color-muted);
  }
  .pagination a:hover {
    color: var(--color-dark);
  }
}

@layer motion {

  /* ── Reduced motion: make everything static and visible ─────────── */
  @media (prefers-reduced-motion: reduce) {
    .marquee__track {
      transform: none !important;
    }
    .marquee__track--reverse {
      transform: none !important;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ── GSAP progressive enhancement: hidden pre-states ────────────── */
  html.js [data-split] .split-word {
    display: inline-block;
  }
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--s24));
  }
  html.js [data-hero] .arrow-link,
  html.js [data-hero-wordmark] {
    opacity: 0;
  }
  html.js .hero__content {
    opacity: 0;
  }
  html.no-js .marquee__track--reverse {
    transform: translateX(calc(-50% - var(--s8)));
  }
}

@layer transitions {

  /* ── Cross-document page transitions (Chromium 126+, progressive) ──
     Same-origin navigations crossfade the page; the project cover is a
     shared element that morphs from the card thumbnail into the detail
     cover (names are per-slug, set inline in project-card/post). Other
     browsers ignore this block and get the FLIP-clone fallback in
     main.js + a plain load — content is never blocked. */
  @view-transition {
    navigation: auto;
  }
  ::view-transition-group(*) {
    animation-duration: 0.55s;
    animation-timing-function: var(--ease-out);
  }
  ::view-transition-group(root) {
    animation-duration: 0.35s;
  }
  ::view-transition-old(root) {
    animation-name: forma-page-out;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
  }
  ::view-transition-new(root) {
    animation-name: forma-page-in;
    animation-duration: 0.45s;
    animation-timing-function: var(--ease-out);
  }
  /* Snapshot bitmaps of the cover keep their photographic crop while the
     group box morphs between the card ratio and the 2/1 detail cover. */
  ::view-transition-image(*) {
    object-fit: cover;
  }
  @keyframes forma-page-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  @keyframes forma-page-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Shared-element snapshots need paint containment (isolates the hover
     scale transform so the snapshot is clean; no effect on layout). */
  .project-card__img[data-cover-img],
  .project__cover[data-cover-img] {
    contain: paint;
  }

  /* Non-VT browsers: JS adds .page-enter on load for a soft entry fade
     (skipped when the browser handles the transition natively). */
  html.page-enter body {
    animation: forma-page-in 0.45s var(--ease-out);
  }

  /* FLIP-clone fallback: a fixed copy of the card image flies from the
     stored card rect to the detail cover rect on load. */
  .cover-fly-clone {
    position: fixed;
    z-index: 200;
    margin: 0;
    object-fit: cover;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    @view-transition {
      navigation: none;
    }
    html.page-enter body {
      animation: none;
    }
  }
}

@layer a11y {

  /* ── Keyboard access: skip link + visible focus ─────────────────── */
  .skip-link {
    position: fixed;
    top: var(--s12);
    left: var(--s12);
    z-index: 300;
    padding: var(--s12) var(--s20);
    background-color: var(--color-dark);
    color: var(--color-light);
    font-size: var(--text-s);
    text-decoration: none;
    transform: translateY(-300%);
  }
  .skip-link:focus-visible {
    transform: none;
  }
  /* Global :focus-visible rings already live in @layer base (2px,
     dark-on-light + light-on-dark variants) — not duplicated here. */
}