/* ==========================================================================
   Upbeat Project Management — site.css
   Pure CSS. No build step. One file, loaded by every page.
   Layers: reset -> tokens -> base -> chrome -> components -> sections -> utilities
   ========================================================================== */
@layer reset, tokens, base, chrome, components, sections, utilities;

/* ==========================================================================
   TOKENS
   --------------------------------------------------------------------------
   ACCENT CONTRAST RULE — read this before using --accent anywhere new.
   --accent (#9a7324) sits at ~4.3:1 on white. Approved for LARGE text
   (>= 1.5rem), rules, dots, icons and solid fills ONLY.
   NEVER use it for body copy or small labels. Body text stays #111111 or
   rgba(17,17,17,.55+). On dark surfaces use --accent-from (#c9a24e).
   ========================================================================== */
@layer tokens {
  :root {
    --background: #ffffff;
    --foreground: #111111;
    --ink: #0a0a0a;
    --muted: #8d8d8d;
    --subtle: #b6b6b6;
    --line: #e6e5e2;
    --surface: #f1f0ee;
    --surface-2: #e3e2df;

    --accent: #9a7324;
    --accent-from: #c9a24e;
    --accent-to: #7a5a18;

    --hero-from: #ecebe9;
    --hero-to: #c9c9c9;

    --radius-pill: 9999px;
    --radius-card: 2rem;
    --radius-card-sm: 1.25rem;
    --radius-control: 0.875rem;

    --text-watermark: 13rem;
    --container-shell: 88rem;

    --ease-line: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-word: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-rise: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
  body {
    background: var(--background);
    color: var(--foreground);
    font-family: Onest, system-ui, -apple-system, "Segoe UI", sans-serif;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
  ul, ol { list-style: none; }
  img, canvas, svg, video { display: block; }
  img { max-width: 100%; }
  input, textarea, select { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
  ::selection { background: var(--accent); color: #fff; }

  /* Any author `display` rule beats the UA stylesheet's [hidden]{display:none}.
     Several components (.modal__success, .navmenu, .modal) set display, so
     without this they render while still marked hidden. */
  [hidden] { display: none !important; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================================
   ADAPTIVE GRID
   --------------------------------------------------------------------------
   Everything is sized in rem; the root font-size tracks the viewport so the
   design stays proportional. Each value is 16 * 100 / baseWidth vw.
   Declared max-width, descending, so the narrowest match wins.
   Above 1920px site.js sets an inline font-size — and removes it again below
   1920px, because an inline style outranks every query here.
   ========================================================================== */
@layer base {
  @media (max-width: 1920px) { html { font-size: 0.833333vw; } }
  @media (max-width: 1440px) { html { font-size: 1.111111vw; } }
  @media (max-width: 1024px) { html { font-size: 1.5625vw;   } }
  @media (max-width:  640px) { html { font-size: 4.444444vw; } }

  /* Lenis, inlined rather than fetching the vendor stylesheet.
     Never add scroll-behavior:smooth anywhere — it double-smooths. */
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-stopped { overflow: hidden; }
  .lenis.lenis-smooth iframe { pointer-events: none; }

  .shell { max-width: var(--container-shell); margin-inline: auto; }
  .icon { width: 1em; height: 1em; flex: none; }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .skip-link {
    position: fixed; left: 1rem; top: 1rem; z-index: 200;
    transform: translateY(-300%);
    border-radius: var(--radius-control);
    background: var(--ink); color: #fff;
    padding: .5rem 1rem; font-size: .875rem; font-weight: 500;
    transition: transform .2s var(--ease-snap);
  }
  .skip-link:focus-visible { transform: none; }
  .tnum { font-variant-numeric: tabular-nums; }
}

/* ==========================================================================
   REVEAL MACHINERY
   --------------------------------------------------------------------------
   site.js adds .is-in once (IntersectionObserver, fire-once). Elements marked
   data-reveal-gate="ready" additionally wait for the intro loader to finish.
   --rv-d delay | --rv-y travel | --rv-s start scale | --rv-o entered opacity
   ========================================================================== */
@layer base {
  /* EVERY hiding rule below is scoped to html[data-js], which site.js sets as
     its first statement. If JS is off, or site.js fails to load, nothing is
     hidden and the page renders complete — without this a single failed
     request would leave the site blank.
     It is a data attribute, not a class, deliberately: Lenis rewrites
     html.className and would silently wipe a class. */
  [data-js] [data-reveal] {
    opacity: 0;
    transform: translateY(var(--rv-y, 1rem)) scale(var(--rv-s, 1));
    transition: opacity .8s var(--ease-rise), transform .8s var(--ease-rise);
    transition-delay: var(--rv-d, 0ms);
  }
  [data-js] [data-reveal].is-in { opacity: var(--rv-o, 1); transform: none; }

  /* A heading whose children animate (lines/words) must not ALSO slide as a
     block — it only needs the observer to hand it .is-in. */
  [data-js] [data-reveal="lines"], [data-js] [data-reveal="words"] {
    opacity: 1; transform: none; transition: none;
  }

  /* overflow:hidden is what makes the line clip-reveal work, but on tight
     line-heights it also shaves ascenders and descenders. The padding buys
     the glyphs room; the equal negative margin keeps layout identical. */
  .rv-line { display: block; overflow: hidden; padding-block: .14em; margin-block: -.14em; }
  [data-js] .rv-line > span {
    display: block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform .9s var(--ease-line), opacity .9s var(--ease-line);
    transition-delay: var(--d, 0ms);
  }
  [data-js] .is-in .rv-line > span { transform: none; opacity: 1; }

  [data-js] .rv-word {
    display: inline-block;
    transform: translateY(1.5rem);
    opacity: 0;
    transition: transform .7s var(--ease-word), opacity .7s var(--ease-word);
    transition-delay: var(--d, 0ms);
  }
  [data-js] .is-in .rv-word { transform: none; opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    [data-reveal], .rv-line > span, .rv-word {
      opacity: 1 !important; transform: none !important;
    }
    [data-reveal] { opacity: var(--rv-o, 1) !important; }
  }
}

/* ==========================================================================
   PAGE LOADER
   Static markup so it never flashes the page first, but removed outright when
   JS is unavailable (.no-js) so it can never brick the page.
   ========================================================================== */
@layer chrome {
  .no-js .loader { display: none !important; }
  /* watchdog: site.js never came up — never trap the visitor behind it */
  [data-js-failed] .loader { display: none !important; }

  .loader {
    position: fixed; inset: 0; z-index: 120;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2rem;
    background: var(--ink); color: #fff;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    will-change: transform;
  }
  .loader[hidden] { display: none; }

  .loader__center {
    display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
    text-align: center;
  }
  .loader__brand {
    display: flex; align-items: center; gap: .625rem;
    font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em;
  }
  .loader__brand .icon { font-size: 1.875rem; color: var(--accent-from); }
  .loader__tagline {
    max-width: 24ch; font-size: .875rem; line-height: 1.5; color: rgba(255,255,255,.55);
  }
  .loader__progress { display: flex; flex-direction: column; gap: .75rem; width: min(22rem, 72vw); }
  .loader__track { height: 1px; background: rgba(255,255,255,.15); overflow: hidden; }
  .loader__fill { height: 100%; width: 0%; background: var(--accent-from); transition: width .1s ease-out; }
  .loader__meta {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em;
    color: rgba(255,255,255,.45);
  }
  .loader__count { color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; }
  @media (min-width: 640px) { .loader__brand { font-size: 1.875rem; } }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

  /* -- Eyebrow ------------------------------------------------------------ */
  .eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .875rem; font-weight: 500; color: rgba(17,17,17,.7);
  }
  .eyebrow::before {
    content: ""; width: .375rem; height: .375rem; flex: none;
    border-radius: var(--radius-pill); background: rgba(17,17,17,.5);
  }
  .eyebrow--light { color: rgba(255,255,255,.7); }
  .eyebrow--light::before { background: rgba(255,255,255,.6); }
  .eyebrow--accent::before { background: var(--accent); }
  .eyebrow--boxed { border: 1px solid var(--line); border-radius: var(--radius-pill); padding: .375rem 1rem; }

  /* -- Pill button -------------------------------------------------------- */
  .pill {
    display: inline-flex; align-items: center; gap: .75rem;
    border-radius: var(--radius-pill);
    font-size: .875rem; font-weight: 500; white-space: nowrap;
    padding: .875rem 1.75rem;
    transition: transform .35s var(--ease-snap), background-color .35s var(--ease-snap),
                color .35s var(--ease-snap), border-color .35s var(--ease-snap);
    transform-origin: center;
  }
  .pill--dark    { background: var(--ink); color: #fff; }
  .pill--light   { background: var(--surface); color: var(--foreground); }
  .pill--outline { border: 1px solid var(--line); background: transparent; color: var(--foreground); }
  .pill--outline-light { border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; }
  .pill--arrow   { padding: .375rem .375rem .375rem 1.5rem; }
  .pill:hover    { transform: scale(1.04); }
  .pill:active   { transform: scale(.99); }

  .pill__badge {
    width: 2.25rem; height: 2.25rem; flex: none;
    display: grid; place-items: center;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    background: var(--ink); color: #fff;
  }
  .pill--dark .pill__badge { background: #fff; color: var(--ink); }
  .pill__badge .icon { transition: transform .35s var(--ease-snap); }
  .pill:hover .pill__badge .icon { transform: translate(3px, 0); }
  .pill[data-arrow="up-right"]:hover .pill__badge .icon { transform: translate(2px, -2px); }

  /* -- Tag chip ----------------------------------------------------------- */
  .chip {
    display: inline-flex; align-items: center;
    border: 1px solid var(--line); color: var(--foreground);
    border-radius: var(--radius-pill); padding: .5rem 1rem; font-size: .875rem;
  }
  .chip--light { border-color: rgba(255,255,255,.25); color: #fff; }

  /* -- Animated link ------------------------------------------------------ */
  .alink { display: inline-flex; }
  .alink > span {
    display: inline-flex; align-items: center; gap: .375rem;
    opacity: .65;
    transition: transform .35s var(--ease-snap), opacity .35s var(--ease-snap);
  }
  .alink:hover > span { transform: translateX(4px); opacity: 1; }
  .alink--tight > span { opacity: .7; }
  .alink--tight:hover > span { transform: translateX(3px); opacity: 1; }

  /* -- Social chip -------------------------------------------------------- */
  .social {
    width: 2.25rem; height: 2.25rem;
    display: grid; place-items: center;
    border-radius: var(--radius-pill);
    font-size: .875rem;
    background: var(--surface); color: rgba(17,17,17,.7);
  }
  .social--accent { background: var(--accent); color: #fff; }
  .social .icon { transition: transform .35s var(--ease-snap); }
  .social:hover .icon { transform: scale(1.18); }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
@layer chrome {
  .header { position: absolute; inset-inline: 0; top: 0; z-index: 50; }
  .header__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 1.25rem;
  }
  .brand {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em;
    transition: transform .35s var(--ease-snap);
  }
  .brand .icon { font-size: 1.25rem; color: var(--accent); }
  .brand:hover { transform: scale(1.04); }
  .brand--light .icon { color: var(--accent-from); }

  .nav { display: none; }
  .nav__list { display: flex; align-items: center; gap: 2rem; font-size: .875rem; font-weight: 500; }
  .nav__link {
    display: inline-flex; align-items: center; gap: .375rem;
    opacity: .8;
    transition: transform .35s var(--ease-snap), opacity .35s var(--ease-snap);
  }
  .nav__link:hover { transform: translateY(-2px); opacity: 1; }
  .nav__link[aria-current="page"] { opacity: 1; }
  .nav__link[aria-current="page"]::before,
  .nav__trigger[data-current-section]::before {
    content: ""; width: .3125rem; height: .3125rem; flex: none;
    border-radius: var(--radius-pill); background: var(--accent);
  }
  .nav__caret { font-size: .75rem; opacity: .6; transition: transform .3s var(--ease-snap); }
  .nav__trigger[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

  .nav__item--has-menu { position: relative; }
  .nav__menu {
    position: absolute; left: 50%; top: calc(100% + .75rem);
    transform: translateX(-50%) translateY(-.5rem);
    min-width: 17rem;
    display: flex; flex-direction: column; gap: .125rem;
    border: 1px solid var(--line); border-radius: var(--radius-card-sm);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    padding: .5rem;
    box-shadow: 0 1.5rem 3rem -1rem rgba(17,17,17,.18);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s var(--ease-snap), transform .25s var(--ease-snap), visibility .25s;
  }
  .nav__trigger[aria-expanded="true"] + .nav__menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav__menu a {
    display: flex; flex-direction: column; gap: .125rem;
    border-radius: var(--radius-control); padding: .625rem .75rem;
    transition: background-color .25s var(--ease-snap);
  }
  .nav__menu a:hover { background: var(--surface); }
  .nav__menu a[aria-current="page"] { background: var(--surface); }
  .nav__menu strong { font-size: .875rem; font-weight: 500; }
  .nav__menu span { font-size: .75rem; color: rgba(17,17,17,.5); }

  .header__right { display: flex; align-items: center; gap: .75rem; }

  .clock {
    display: none; align-items: center; gap: .75rem;
    border: 1px solid rgba(230,229,226,.8);
    background: rgba(255,255,255,.4);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-control);
    padding: .5rem .75rem;
    font-size: .75rem; color: rgba(17,17,17,.7);
  }
  .clock__label { color: rgba(17,17,17,.45); }
  .clock__time { min-width: 3.5rem; font-weight: 500; color: var(--foreground); font-variant-numeric: tabular-nums; }
  .clock__sep { color: rgba(17,17,17,.3); }
  .clock__date { font-weight: 500; }

  .menu-btn {
    border: 1px solid rgba(230,229,226,.8);
    background: rgba(255,255,255,.4);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-control);
    transition: background-color .3s var(--ease-snap), transform .35s var(--ease-snap);
  }
  .menu-btn:hover { background: rgba(255,255,255,.7); transform: scale(1.05); }
  .menu-btn > span {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem 1rem;
    font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em;
  }
  .menu-btn .icon { font-size: .875rem; }
  .menu-btn__label { display: none; }

  @media (min-width: 640px) {
    .header__inner { padding: 1.5rem 2rem; }
    .menu-btn__label { display: inline; }
  }
  @media (min-width: 768px) { .clock { display: flex; } }
  @media (min-width: 1024px) { .nav { display: block; } }
}

/* ==========================================================================
   NAV MENU OVERLAY  (injected by site.js)
   ========================================================================== */
@layer chrome {
  .navmenu {
    position: fixed; inset: 0; z-index: 115;
    display: flex; flex-direction: column;
    background: var(--ink); color: #fff;
    opacity: 0;
    transition: opacity .45s var(--ease-rise);
  }
  .navmenu.is-open { opacity: 1; }
  .navmenu[hidden] { display: none; }

  .navmenu__top { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; }
  .navmenu__close {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-control);
    padding: .5rem 1rem;
    font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em;
    color: rgba(255,255,255,.7);
    transition: border-color .3s var(--ease-snap), color .3s var(--ease-snap);
  }
  .navmenu__close:hover { border-color: rgba(255,255,255,.4); color: #fff; }
  .navmenu__close .icon { font-size: .875rem; }

  .navmenu__nav { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .navmenu__list { display: flex; flex-direction: column; gap: .25rem; }
  .navmenu__item {
    display: flex; align-items: baseline; gap: 1rem; width: 100%;
    padding-block: .5rem; text-align: left;
    font-size: 2.25rem; font-weight: 600; letter-spacing: -.02em;
    transform: translateY(1rem); opacity: 0;
    transition: transform .5s ease-out, opacity .5s ease-out;
  }
  .navmenu.is-open .navmenu__item { transform: none; opacity: 1; }
  .navmenu__num { font-size: 1rem; font-weight: 400; color: rgba(255,255,255,.3); transition: color .3s; }
  .navmenu__label { color: rgba(255,255,255,.7); transition: color .3s; }
  .navmenu__item:hover .navmenu__num { color: var(--accent-from); }
  .navmenu__item:hover .navmenu__label { color: #fff; }
  .navmenu__item[aria-current="page"] .navmenu__label { color: #fff; }
  .navmenu__item[aria-current="page"] .navmenu__num { color: var(--accent-from); }

  .navmenu__bottom {
    display: flex; flex-direction: column; gap: .75rem;
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 1.5rem 1.25rem;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .025em;
    color: rgba(255,255,255,.45);
  }
  .navmenu__cta { color: rgba(255,255,255,.7); transition: color .3s; }
  .navmenu__cta:hover { color: #fff; text-decoration: underline; }

  @media (min-width: 640px) {
    .navmenu__top { padding: 1.5rem 2rem; }
    .navmenu__item { font-size: 3.75rem; }
    .navmenu__bottom { flex-direction: row; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; }
  }
}

/* ==========================================================================
   REQUEST MODAL  (injected by site.js)
   ========================================================================== */
@layer chrome {
  .modal {
    position: fixed; inset: 0; z-index: 110;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 1rem;
    background: rgba(17,17,17,.3);
    backdrop-filter: blur(16px);
    opacity: 0;
    transition: opacity .35s var(--ease-rise);
  }
  .modal.is-open { opacity: 1; }
  .modal[hidden] { display: none; }

  .modal__panel {
    position: relative; width: 100%; max-width: 32rem;
    overflow: hidden;
    border-radius: var(--radius-card);
    background: #fff; padding: 1.5rem;
    box-shadow: 0 1.5rem 4rem -1rem rgba(17,17,17,.35);
    outline: 1px solid var(--line); outline-offset: -1px;
    will-change: transform;
  }
  .modal__close {
    position: absolute; right: 1rem; top: 1rem;
    width: 2.25rem; height: 2.25rem;
    display: grid; place-items: center;
    border-radius: var(--radius-pill);
    background: var(--surface); color: rgba(17,17,17,.6);
    transition: background-color .3s, color .3s;
  }
  .modal__close:hover { background: var(--surface-2); color: var(--foreground); }

  .modal__head { display: flex; flex-direction: column; gap: .375rem; margin-bottom: 1.5rem; }
  .modal__kicker {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .875rem; font-weight: 500; color: rgba(17,17,17,.6);
  }
  .modal__kicker::before {
    content: ""; width: .375rem; height: .375rem; border-radius: var(--radius-pill); background: var(--accent);
  }
  .modal__title { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }

  .modal__success {
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    padding-block: 2rem; text-align: center;
  }
  .modal__success-badge {
    width: 3.5rem; height: 3.5rem; display: grid; place-items: center;
    border-radius: var(--radius-pill); background: var(--ink); color: var(--accent-from);
    font-size: 1.5rem;
  }
  .modal__success p { max-width: 32ch; font-size: .875rem; line-height: 1.5; color: rgba(17,17,17,.6); }

  @media (min-width: 640px) {
    .modal { align-items: center; }
    .modal__panel { padding: 2rem; }
    .modal__title { font-size: 1.875rem; }
  }
}

/* ==========================================================================
   FORM
   ========================================================================== */
@layer components {
  .form { display: flex; flex-direction: column; gap: 1rem; }
  .field { display: flex; flex-direction: column; gap: .5rem; }
  .field__label {
    font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .025em;
    color: rgba(17,17,17,.5);
  }
  .field__control {
    width: 100%;
    border: 1px solid var(--line);
    background: rgba(241,240,238,.5);
    border-radius: var(--radius-control);
    padding: .75rem 1rem;
    font-size: .875rem;
    outline: none;
    transition: border-color .25s, background-color .25s;
  }
  .field__control::placeholder { color: rgba(17,17,17,.35); }
  .field__control:focus { border-color: rgba(17,17,17,.3); background: #fff; }
  textarea.field__control { resize: none; }
  .form__foot {
    margin-top: .5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  }
  .form__note { font-size: .75rem; color: rgba(17,17,17,.45); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
@layer sections {
  .hero {
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    background: var(--hero-to);
  }
  .hero__media { position: absolute; inset: 0; z-index: 0; }
  .hero__base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .hero__veil {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,.35), transparent, rgba(255,255,255,.35));
  }
  .watermark {
    pointer-events: none; user-select: none;
    position: absolute; inset-inline: 0; bottom: 7rem; z-index: 1;
    text-align: center; font-weight: 700; line-height: 1;
    font-size: var(--text-watermark); color: rgba(255,255,255,.4);
  }

  .hero__grid {
    position: relative; z-index: 20;
    display: flex; flex-direction: column; gap: 2rem;
    padding: 7rem 1.25rem 5rem;
  }
  .hero__col-a { display: flex; flex-direction: column; gap: 1.75rem; }
  .hero__col-b { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }

  .hero__title {
    max-width: 18ch;
    font-size: 2.25rem; font-weight: 600; line-height: .98; letter-spacing: -.02em;
  }
  .hero__sub { max-width: 46ch; font-size: 1rem; line-height: 1.5; color: rgba(17,17,17,.7); }

  .hero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
  .hero__chip {
    display: inline-flex; align-items: center; gap: .375rem;
    font-size: .875rem; font-weight: 500; color: rgba(17,17,17,.7);
    transition: transform .35s var(--ease-snap), color .35s var(--ease-snap);
  }
  .hero__chip .icon { font-size: .875rem; color: var(--accent); }
  a.hero__chip:hover { transform: translateY(-2px); color: var(--foreground); }

  .hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
  /* --line is far too faint to read as a button on top of a photograph. */
  .hero .pill--outline {
    border-color: rgba(17,17,17,.22);
    background: rgba(255,255,255,.5);
    backdrop-filter: blur(4px);
  }
  .hero .pill--outline:hover { background: rgba(255,255,255,.78); }

  .hero__status {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    border-top: 1px solid rgba(17,17,17,.1);
    padding: 1.25rem;
    font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .025em;
    color: rgba(17,17,17,.6);
  }
  .hero__status-mid { display: none; }
  .hero__status-end { display: inline-flex; align-items: center; gap: .5rem; }

  /* hero card carousel */
  .herocard {
    width: 100%; max-width: 24rem;
    border-radius: var(--radius-card-sm);
    background: rgba(255,255,255,.7);
    padding: .5rem;
    outline: 1px solid rgba(230,229,226,.7); outline-offset: -1px;
    backdrop-filter: blur(12px);
    box-shadow: 0 .25rem 1rem -.5rem rgba(17,17,17,.18);
  }
  .herocard__row { display: flex; gap: .5rem; border-radius: var(--radius-control); }
  .herocard__tile {
    aspect-ratio: 1; width: 6rem; flex: none;
    display: grid; place-items: center;
    border-radius: var(--radius-control);
    background: var(--ink); font-size: 1.875rem;
  }
  .herocard__tile .icon { color: var(--accent-from); }
  .herocard__panel {
    flex: 1; min-width: 0;
    border-radius: var(--radius-control);
    background: rgba(241,240,238,.7);
    padding: .75rem;
    display: flex; flex-direction: column; justify-content: space-between; gap: .5rem;
  }
  .herocard__slot { position: relative; min-height: 3.25rem; }
  .herocard__item {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; gap: .25rem;
    transition: transform .45s var(--ease-rise), opacity .45s var(--ease-rise);
  }
  .herocard__item[data-state="out-up"]   { transform: translateY(-.875rem); opacity: 0; }
  .herocard__item[data-state="out-down"] { transform: translateY(.875rem); opacity: 0; }
  .herocard__item[data-state="in"]       { transform: none; opacity: 1; }
  .herocard__caption {
    font-size: .65rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em;
    color: rgba(17,17,17,.45);
  }
  .herocard__label { max-width: 10rem; font-size: .875rem; font-weight: 500; line-height: 1.35; }
  .herocard__foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
  .herocard__dots { display: flex; align-items: center; gap: .25rem; }
  .herocard__dot {
    height: .25rem; width: .375rem; border-radius: var(--radius-pill);
    background: rgba(17,17,17,.2); transition: all .3s;
  }
  .herocard__dot.is-active { width: 1rem; background: rgba(17,17,17,.7); }
  .herocard__nav { display: flex; align-items: center; gap: .375rem; }
  .herocard__btn {
    width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
    border-radius: var(--radius-pill); background: #fff; color: rgba(17,17,17,.7);
    outline: 1px solid var(--line); outline-offset: -1px;
    transition: color .25s, transform .25s var(--ease-snap);
  }
  .herocard__btn:hover { color: var(--foreground); transform: scale(1.08); }
  .herocard__btn--prev .icon { transform: rotate(180deg); }

  /* sectors grid */
  .sectors { width: 100%; max-width: 24rem; }
  .sectors__label {
    margin-bottom: .75rem; font-size: .75rem; font-weight: 500;
    color: rgba(17,17,17,.45); text-align: left;
  }
  .sectors__grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1rem; row-gap: .75rem; }
  .sectors__item {
    display: flex; align-items: center; gap: .375rem;
    font-size: .75rem; color: rgba(17,17,17,.7);
    transition: transform .35s var(--ease-snap), opacity .35s var(--ease-snap);
    opacity: .85;
  }
  .sectors__item .icon { font-size: .875rem; color: rgba(17,17,17,.4); }
  .sectors__item:hover { transform: translateY(-2px); opacity: 1; }

  @media (min-width: 480px) { .sectors__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 640px) {
    .hero__grid { padding: 8rem 2rem 5rem; }
    .hero__title { font-size: 3rem; }
    .hero__status { padding: 1.25rem 2rem; }
    .hero__status-mid { display: inline; }
  }
  @media (min-width: 768px) { .hero__title { font-size: 3.75rem; } }
  @media (min-width: 1024px) {
    /* The hero owns the viewport height and the grid flexes inside it, so the
       status bar lands ON the fold instead of 50px below it. */
    .hero { min-height: 100svh; display: flex; flex-direction: column; }
    .hero__grid {
      display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.5rem;
      flex: 1; padding: 9rem 2rem 4rem;
      align-content: center;
    }
    .hero__col-a { grid-column: span 7; justify-content: center; }
    .hero__col-b { grid-column: span 5; align-items: flex-end; justify-content: center; }
    .herocard, .sectors { max-width: 19rem; }
    .sectors__label { text-align: right; }
    .sectors__grid { grid-template-columns: repeat(4, 1fr); }
  }

  /* page hero — service + contact pages, shorter and rem-height (never vh:
     a vh height re-measures when the mobile URL bar toggles and wipes the canvas) */
  .hero--page .hero__grid { min-height: auto; padding: 9rem 1.25rem 4rem; }
  .hero--page .hero__title { max-width: 20ch; }
  @media (min-width: 640px) { .hero--page .hero__grid { padding: 10rem 2rem 5rem; } }
  @media (min-width: 1024px) {
    .hero--page .hero__grid { min-height: 44rem; padding: 12rem 2rem 6rem; }
    .hero--page .hero__col-a { grid-column: span 8; }
    .hero--page .hero__col-b { grid-column: span 4; }
  }
  .hero--tall .hero__grid { min-height: 50rem; }
}

/* ==========================================================================
   HERO — text scrim
   --------------------------------------------------------------------------
   The reveal layer is a near-black wireframe. Without this, dark headline copy
   sits on black wherever the pointer has painted. The scrim keeps the left
   text column legible in both states and leaves the right side clean.
   ========================================================================== */
@layer sections {
  .hero__scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(
      to right,
      rgba(255,255,255,.80) 0%,
      rgba(255,255,255,.55) 32%,
      rgba(255,255,255,.12) 58%,
      rgba(255,255,255,0) 78%
    );
  }
  @media (max-width: 1023px) {
    .hero__scrim { background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,.78)); }
  }

  /* Service + contact heroes use darker interior photography, so the text
     column needs more cover than the bright skyline does. */
  .hero--page .hero__scrim {
    background: linear-gradient(
      to right,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.72) 36%,
      rgba(255,255,255,.22) 62%,
      rgba(255,255,255,0) 82%
    );
  }
  @media (max-width: 1023px) {
    .hero--page .hero__scrim { background: linear-gradient(to bottom, rgba(255,255,255,.62), rgba(255,255,255,.85)); }
  }
}

/* ==========================================================================
   GENERIC SECTION SCAFFOLDING
   ========================================================================== */
@layer sections {
  .section { background: var(--background); }
  .section--ink { background: var(--ink); color: #fff; }
  .section__inner { padding: 5rem 1.25rem; }
  .section__inner--tight { padding-block: 3rem; }
  .section__inner--flush-top { padding-top: 0; }

  .section__head { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 3rem; }
  .section__head--center { align-items: center; text-align: center; }
  .section__title {
    max-width: 18ch;
    font-size: 2.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.05;
  }
  .section__lead { max-width: 52ch; font-size: 1rem; line-height: 1.6; color: rgba(17,17,17,.6); }
  .section--ink .section__lead { color: rgba(255,255,255,.55); }

  .split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
  .prose { font-size: 1.125rem; line-height: 1.6; color: rgba(17,17,17,.7); }
  .prose + .prose { margin-top: 1rem; }
  .dim { color: var(--muted); }

  .pullquote {
    max-width: 26ch;
    font-size: 1.875rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em;
  }

  @media (min-width: 640px) {
    .section__inner { padding: 5rem 2rem; }
    .section__title { font-size: 3rem; }
    .pullquote { font-size: 2.25rem; }
  }
  @media (min-width: 1024px) {
    .section__inner { padding-block: 7rem; }
    .section__head { margin-bottom: 3.5rem; }
    .split { grid-template-columns: 5fr 7fr; gap: 4rem; }
    .split--even { grid-template-columns: 1fr 1fr; }
  }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
@layer sections {
  .about__inner {
    display: grid; grid-template-columns: 1fr; align-items: center; gap: 3rem;
    padding: 5rem 1.25rem;
  }
  .about__globe { position: relative; min-height: 14rem; display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; }
  .about__globe-bg {
    position: absolute; left: -1rem; top: 50%; transform: translateY(-50%);
    font-size: 12rem; color: rgba(17,17,17,.1); pointer-events: none;
  }
  .about__eyebrow { position: relative; }
  .about__note {
    position: relative;
    display: flex; align-items: center; gap: .75rem;
    font-size: .875rem; line-height: 1.5; color: rgba(17,17,17,.7);
  }
  .about__note .icon { font-size: 1.5rem; color: var(--foreground); }
  .about__note span { max-width: 16rem; }

  .about__statement { display: flex; flex-direction: column; gap: 2.5rem; }
  .about__statement h2 {
    font-size: 1.5rem; font-weight: 500; line-height: 1.35; letter-spacing: -.01em;
  }
  .about__foot {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
    border-top: 1px solid var(--line); padding-top: 1.5rem;
  }
  .about__social-label { font-size: .875rem; color: rgba(17,17,17,.45); }
  .about__social { margin-top: .75rem; display: flex; gap: .5rem; }

  @media (min-width: 640px) {
    .about__inner { padding: 5rem 2rem; }
    .about__globe-bg { font-size: 16rem; }
    .about__statement h2 { font-size: 1.875rem; }
  }
  @media (min-width: 1024px) {
    .about__inner { grid-template-columns: 1fr 1fr; padding-block: 7rem; }
    .about__globe { min-height: 20rem; }
    .about__globe-bg { left: -1.5rem; font-size: 20rem; }
  }
}

/* ==========================================================================
   CREATE BAND — We / Deliver / -> / Outcomes
   ========================================================================== */
@layer sections {
  .band__list { display: flex; flex-direction: column; gap: .75rem; padding: 2.5rem 1.25rem; }
  .band__item { flex: 1; }
  .band__tile {
    display: grid; place-items: center;
    height: 6rem; border-radius: var(--radius-pill);
    font-size: 1.875rem; font-weight: 500; letter-spacing: -.01em;
    transition: transform .4s var(--ease-snap);
  }
  .band__tile:hover { transform: scale(1.03); }
  .band__tile--light  { background: var(--surface); color: var(--foreground); }
  .band__tile--accent { background: linear-gradient(to bottom right, var(--accent-from), var(--accent-to)); color: #fff; }
  .band__tile--dark   { background: var(--ink); color: #fff; }
  .band__tile--ghost  { background: rgba(241,240,238,.6); color: rgba(17,17,17,.35); }
  .band__tile--dark .icon { font-size: 2.25rem; }

  @media (min-width: 640px) {
    .band__list { flex-direction: row; gap: 1rem; padding: 2.5rem 2rem; }
    .band__tile { height: 10rem; font-size: 2.25rem; }
    .band__tile--dark .icon { font-size: 3rem; }
  }
}

/* ==========================================================================
   DARK CARDS — service cards (home) / engagement models (service pages)
   ========================================================================== */
@layer sections {
  .cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  .cards--3 { gap: 1.25rem; }

  .card {
    position: relative; display: block; min-height: 22rem; overflow: hidden;
    border-radius: var(--radius-card);
    background: var(--ink); color: #fff; padding: 1.5rem;
    outline: 1px solid rgba(255,255,255,.05); outline-offset: -1px;
    transition: transform .45s var(--ease-rise);
  }
  a.card:hover { transform: translateY(-.5rem) scale(1.012); }

  .card__meta {
    position: relative; z-index: 2;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .025em;
    color: rgba(255,255,255,.45);
  }
  .card__badge {
    width: 2.75rem; height: 2.75rem; flex: none;
    display: grid; place-items: center;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.1); color: #fff;
    outline: 1px solid rgba(255,255,255,.15); outline-offset: -1px;
    transition: transform .4s var(--ease-snap), background-color .4s var(--ease-snap);
  }
  a.card:hover .card__badge { transform: rotate(45deg) scale(1.08); background: rgba(255,255,255,.18); }

  /* Centred brand mark, used as a texture. Deliberately far lighter than a
     portfolio watermark would be: these cards carry a title and body copy. */
  .card__mark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 0; }
  .card__mark .icon { font-size: 4.5rem; color: rgba(255,255,255,.07); }

  .card__body { position: absolute; z-index: 2; inset-inline: 1.5rem; bottom: 1.5rem; }
  .card__title { font-size: 1.5rem; font-weight: 500; letter-spacing: -.01em; }
  .card__desc { margin-top: .5rem; max-width: 30rem; font-size: .875rem; line-height: 1.5; color: rgba(255,255,255,.55); }
  .card__tags { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }

  @media (min-width: 768px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
    .cards--3 { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 640px) {
    .card { min-height: 26rem; padding: 2rem; }
    .card__body { inset-inline: 2rem; bottom: 2rem; }
    .card__title { font-size: 1.875rem; }
    .cards--3 .card { min-height: 22rem; }
    .cards--3 .card__title { font-size: 1.5rem; }
  }
}

/* ==========================================================================
   RELATED SERVICE CARDS — light
   ========================================================================== */
@layer sections {
  .rcards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
  .rcard {
    display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
    min-height: 13rem;
    border: 1px solid var(--line); border-radius: var(--radius-card-sm);
    background: var(--surface); padding: 1.5rem;
    transition: transform .45s var(--ease-rise), background-color .45s var(--ease-rise),
                border-color .45s var(--ease-rise);
  }
  .rcard:hover { transform: translateY(-.375rem); background: #fff; border-color: rgba(17,17,17,.18); }
  .rcard__title { font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; }
  .rcard__desc { margin-top: .5rem; font-size: .875rem; line-height: 1.5; color: rgba(17,17,17,.55); }
  .rcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .rcard__go {
    width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
    border-radius: var(--radius-pill); background: var(--ink); color: #fff;
    transition: transform .4s var(--ease-snap);
  }
  .rcard:hover .rcard__go { transform: translate(2px, -2px); }
  @media (min-width: 768px) { .rcards { grid-template-columns: repeat(3, 1fr); } }
}

/* ==========================================================================
   HOVER-FILL ROWS — approach / capabilities
   ========================================================================== */
@layer sections {
  .rows { display: block; }
  .row { border-top: 1px solid var(--line); }
  .row:first-child { border-top: 0; }
  .row__inner {
    display: flex; align-items: center; gap: 1rem;
    border-radius: var(--radius-card-sm);
    padding: 1.5rem;
    background: rgba(241,240,238,0);
    transition: background-color .45s var(--ease-rise), padding .45s var(--ease-rise);
  }
  .row:hover .row__inner { background: rgba(241,240,238,1); padding-left: 2rem; padding-right: 1.25rem; }
  .row__idx { width: 1.75rem; flex: none; font-size: .875rem; font-weight: 500; color: rgba(17,17,17,.4); }
  .row__title { flex: 1; font-size: 1.5rem; font-weight: 500; letter-spacing: -.01em; }
  .row__desc { display: none; max-width: 20rem; font-size: .875rem; line-height: 1.5; color: rgba(17,17,17,.55); }
  .row__badge {
    width: 2.5rem; height: 2.5rem; flex: none;
    display: grid; place-items: center;
    border-radius: var(--radius-pill); background: var(--ink); color: #fff;
    transition: transform .4s var(--ease-snap);
  }
  .row:hover .row__badge { transform: translateX(5px); }

  @media (min-width: 640px) {
    .row__inner { gap: 1.5rem; padding-block: 2rem; }
    .row__idx { width: 2.5rem; }
    .row__title { font-size: 1.875rem; }
    .row__badge { width: 3rem; height: 3rem; }
  }
  @media (min-width: 768px) { .row__title { font-size: 2.25rem; } }
  @media (min-width: 1024px) { .row__desc { display: block; } }
}

/* ==========================================================================
   STATS
   ========================================================================== */
@layer sections {
  .stats__inner { padding: 0 1.25rem 5rem; }
  .stats__panel {
    border-radius: var(--radius-card);
    background: var(--ink); color: #fff;
    padding: 3rem 1.5rem;
  }
  .stats__title {
    margin-top: 1rem; max-width: 20ch;
    font-size: 1.875rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.2;
  }
  .stats__grid {
    margin-top: 3.5rem;
    display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem; row-gap: 3rem;
  }
  .stat__num { font-size: 3rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
  .stat__label { margin-top: .75rem; font-size: .875rem; line-height: 1.5; color: rgba(255,255,255,.55); }
  .stats__foot { margin-top: 3rem; font-size: .75rem; color: rgba(255,255,255,.35); }

  @media (min-width: 640px) {
    .stats__inner { padding: 0 2rem 5rem; }
    .stats__panel { padding: 4rem 2rem; }
    .stat__num { font-size: 3.75rem; }
  }
  @media (min-width: 768px) {
    .stats__panel { padding-inline: 4rem; }
    .stats__title { font-size: 2.25rem; }
    .stat__num { font-size: 4.5rem; }
  }
  @media (min-width: 1024px) {
    .stats__inner { padding-bottom: 7rem; }
    .stats__grid { grid-template-columns: repeat(4, 1fr); }
    .stats__grid--3 { grid-template-columns: repeat(3, 1fr); }
  }
}

/* ==========================================================================
   CTA BAND — closes service + contact pages
   ========================================================================== */
@layer sections {
  .ctaband__inner { padding: 0 1.25rem 5rem; }
  .ctaband__panel {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2rem;
    border-radius: var(--radius-card);
    background: var(--ink); color: #fff;
    padding: 3rem 1.5rem;
  }
  .ctaband__title { max-width: 20ch; font-size: 1.875rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
  .ctaband__desc { margin-top: .75rem; max-width: 44ch; font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.55); }
  .ctaband__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

  @media (min-width: 640px) {
    .ctaband__inner { padding: 0 2rem 5rem; }
    .ctaband__panel { padding: 4rem 2.5rem; }
    .ctaband__title { font-size: 2.25rem; }
  }
  @media (min-width: 1024px) {
    .ctaband__inner { padding-bottom: 7rem; }
    .ctaband__panel { flex-direction: row; align-items: center; justify-content: space-between; padding-inline: 4rem; }
  }
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
@layer sections {
  .contact__inner { display: grid; grid-template-columns: 1fr; gap: 3rem; padding: 5rem 1.25rem; }
  .contact__panel {
    border: 1px solid var(--line); border-radius: var(--radius-card);
    background: #fff; padding: 1.5rem;
    box-shadow: 0 1.5rem 3rem -2rem rgba(17,17,17,.25);
  }
  .contact__details { display: flex; flex-direction: column; }
  .detail {
    display: flex; flex-direction: column; gap: .375rem;
    border-top: 1px solid var(--line); padding-block: 1.25rem;
  }
  .detail dt { font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .025em; color: rgba(17,17,17,.45); }
  .detail dd { font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; }
  .detail dd a:hover { text-decoration: underline; }
  .detail dd small { display: block; margin-top: .25rem; font-size: .8125rem; font-weight: 400; color: rgba(17,17,17,.5); }

  @media (min-width: 640px) {
    .contact__inner { padding: 5rem 2rem; }
    .contact__panel { padding: 2rem; }
  }
  @media (min-width: 1024px) {
    .contact__inner { grid-template-columns: 5fr 7fr; gap: 4rem; padding-block: 7rem; }
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
@layer chrome {
  .footer {
    position: relative; overflow: hidden;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: var(--ink); color: #fff;
  }
  .footer__inner { position: relative; z-index: 10; padding: 5rem 1.25rem 2.5rem; }

  .footer__cta {
    display: flex; flex-direction: column; gap: 2rem;
    border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 4rem;
  }
  .footer__cta h2 {
    max-width: 16ch;
    font-size: 2.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.05;
  }

  .footer__cols { display: grid; grid-template-columns: 1fr; gap: 3rem; padding-block: 4rem; }
  .footer__brandline { display: flex; align-items: center; gap: .5rem; font-size: 1.125rem; font-weight: 600; }
  .footer__brandline .icon { font-size: 1.25rem; color: var(--accent-from); }
  .footer__tagline { margin-top: 1rem; max-width: 22rem; font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.55); }
  .footer__coltitle { font-size: .75rem; text-transform: uppercase; letter-spacing: .025em; color: rgba(255,255,255,.4); }
  .footer__list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .75rem; font-size: .875rem; }
  .footer__list--plain { color: rgba(255,255,255,.65); line-height: 1.6; }

  .footer__legal {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem;
    border-top: 1px solid rgba(255,255,255,.1); padding-top: 2rem;
    font-size: .75rem; color: rgba(255,255,255,.45); text-align: center;
  }
  .footer__legal-links { display: flex; gap: 1.5rem; }

  .footer__watermark {
    position: absolute; inset-inline: 0; bottom: -1.5rem; z-index: 0;
    text-align: center; pointer-events: none; user-select: none;
    font-weight: 700; line-height: 1;
    font-size: var(--text-watermark); color: rgba(255,255,255,.05);
  }

  @media (min-width: 640px) {
    .footer__inner { padding: 5rem 2rem 2.5rem; }
    .footer__cta h2 { font-size: 3rem; }
    .footer__legal { flex-direction: row; text-align: left; }
  }
  @media (min-width: 768px) {
    .footer__cols { grid-template-columns: repeat(2, 1fr); }
    .footer__cta h2 { font-size: 3.75rem; }
  }
  @media (min-width: 1024px) {
    .footer__inner { padding-top: 6rem; }
    .footer__cta { flex-direction: row; align-items: flex-end; justify-content: space-between; }
    .footer__cols { grid-template-columns: repeat(4, 1fr); }
  }
}