/* ==========================================================================
   ARK Digital — design system
   Tokens: desgin.md (GSAP style reference), recoloured to the light
           violet-on-paper palette.
   Techniques: layout.md (LED-dot type, --u scaled glass cards, grain,
               staged entrance animations).
   ========================================================================== */

:root {
  /* --- Colors ------------------------------------------------------------
     ARK Digital: violet on warm paper. One brand accent plus two hues
     derived from it (a cooler blue and a warmer magenta), so colour still
     codes discipline without a six-way taxonomy.
     --------------------------------------------------------------------- */
  --color-canvas: #f2f2ee;        /* warm paper — the single page ground */
  --color-panel: #e8e7e0;         /* one surface step lifted */
  --color-text: #192837;          /* deep slate — primary type */
  --color-muted: #5c6a78;         /* secondary type; AA on both surfaces */
  --color-hairline: #d7d6ce;      /* dividers, outlines, resting borders */

  --color-brand: #7342e2;         /* Violet — the brand accent */
  --color-on-brand: #ffffff;      /* type on a brand fill */
  --color-brand-ink: #5b31c4;     /* brand as small type; AA on paper */
  --color-brand-light: #a98bf0;   /* gradient endpoint; never a fill alone */
  --gradient-brand: linear-gradient(114.41deg, #7342e2 20.74%, #a98bf0 65.5%);
  --color-brass: #3e6be0;         /* support A — cooler blue */
  --color-bronze: #a03fd0;        /* support B — warmer magenta */

  /* --- Surfaces ---------------------------------------------------------- */
  --surface-canvas: #f2f2ee;
  --surface-nested-panel: #e8e7e0;
  --surface-sheet: #cfc8c5;       /* mobile navigation sheet */
  --surface-ink: #192837;         /* inverted surface — dark on paper */

  /* --- Type -------------------------------------------------------------- */
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: 'Helvetica Now Display Bold', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mori: var(--font-body);   /* legacy alias — body face */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  /* Scale — desgin.md values are the ceiling; clamp keeps them legible small. */
  --text-caption: 14px;      --leading-caption: 1.4;      --tracking-caption: -0.14px;
  --text-body-sm: 16px;      --leading-body-sm: 1.15;
  --text-body: 19px;         --leading-body: 1.15;
  --text-body-lg: clamp(18px, 1.5vw, 23px);   --leading-body-lg: 1.38;  --tracking-body-lg: -0.23px;
  --text-subheading: clamp(26px, 3vw, 34px);  --leading-subheading: 1.2; --tracking-subheading: -0.34px;
  --text-heading-sm: clamp(32px, 4vw, 44px);  --leading-heading-sm: 1.2; --tracking-heading-sm: -0.44px;
  --text-heading: clamp(40px, 6vw, 66px);     --leading-heading: 1.2;    --tracking-heading: -0.66px;
  --text-heading-lg: clamp(52px, 8.4vw, 101px); --leading-heading-lg: 1;  --tracking-heading-lg: -0.011em;
  --text-display: clamp(56px, 14.2vw, 224px); --leading-display: 0.9;    --tracking-display: -0.02em;

  /* --- Spacing / shape --------------------------------------------------- */
  --spacing-unit: 4px;
  --spacing-8: 8px;   --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px;
  --spacing-24: 24px; --spacing-32: 32px; --spacing-76: 76px; --spacing-96: 96px;
  --spacing-108: 108px;

  --radius-cards: 8px;
  --radius-pills: 9999px;
  --radius-buttons: 100px;
  --radius-smalltags: 8px;

  --page-max-width: 1480px;       /* main column; the masthead runs full width */
  --section-gap: clamp(64px, 8vw, 108px);
  --card-padding: 24px;
  --element-gap: 16px;
  --gutter: clamp(20px, 4.2vw, 54px);
  --mast-h: 64px;                 /* logo 32 + 16 padding top/bottom */

  color-scheme: light;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;               /* decorative blobs bleed past the viewport edge */
}

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-regular);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  /* clip, not hidden: hidden makes <body> a scroll container and silently
     kills position:sticky on the masthead and the scroll stack. */
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
/* Author display rules (.case is display:grid) beat the UA sheet's
   [hidden]{display:none}, so the work filters set the attribute and nothing
   moved. This puts it back. */
[hidden] { display: none !important; }
button, a, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--color-brand); color: var(--color-on-brand); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-panel);
  color: var(--color-brand-ink);
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 20px; background: var(--color-text); color: var(--surface-canvas);
  border-radius: 0 0 var(--radius-cards) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.wrap {
  width: min(100%, var(--page-max-width));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-gap); }
.section--tight { padding-block: clamp(40px, 5vw, 76px); }
.section--panel { background: var(--surface-nested-panel); }

/* Full-width hairline divider — desgin.md: 1px #42433d, no padding around it. */
.rule { border: 0; border-top: 1px solid var(--color-hairline); margin: 0; }

.stack { display: grid; gap: var(--element-gap); }
.stack--lg { gap: var(--spacing-32); }

/* Curly-bracket annotation — the recurring section signature. */
.eyebrow {
  display: block;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  margin-bottom: var(--spacing-24);
}
.eyebrow::before { content: "{ "; }
.eyebrow::after  { content: " }"; }

.section-head { max-width: 22ch; }
.section-head--wide { max-width: 34ch; }

.lede {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-body-lg);
  color: var(--color-text);
  max-width: 62ch;
}
.muted { color: var(--color-muted); }

.h-display,
.h-lg,
.h-1,
.h-2,
.h-3 { font-family: var(--font-heading); }

.h-display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-semibold);
}
.h-lg {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  font-weight: var(--font-weight-semibold);
}
.h-1 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-semibold);
}
.h-2 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
}
.h-3 {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   Buttons — outlined-only system (desgin.md)
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 24px;
  border-radius: var(--radius-buttons);
  border: 1px solid var(--color-text);
  background: transparent;
  color: var(--color-text);
  font-size: 18px; line-height: 1.05; font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, opacity .18s ease, transform .18s ease;
}
.btn:hover { opacity: .8; }
.btn:active { transform: translateY(1px); }

.btn--sm { padding: 11px 18px; font-size: 16px; }

/* The single chromatic control in the system: gradient-stroked ghost pill. */
.btn--cta {
  position: relative;
  border-color: transparent;
  background:
    linear-gradient(var(--surface-canvas), var(--surface-canvas)) padding-box,
    var(--gradient-brand) border-box;
  border: 1.5px solid transparent;
}
.btn--cta:hover { opacity: 1; filter: brightness(1.12); }
.section--panel .btn--cta,
.footer .btn--cta {
  background:
    linear-gradient(var(--surface-nested-panel), var(--surface-nested-panel)) padding-box,
    var(--gradient-brand) border-box;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--spacing-16); }

/* Text link with the brand green — never promoted to a filled CTA. */
.link-accent {
  color: var(--color-brand-ink);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-body-sm);
  transition: gap .18s ease;
}
.link-accent:hover { gap: 14px; }

/* ==========================================================================
   Announcement banner + navigation
   ========================================================================== */
.banner {
  padding: 7px var(--gutter);
  text-align: center;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-muted);
  background: transparent;
}
.banner a { color: var(--color-brand-ink); }
@media (max-width: 639px) {
  .banner { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* --- Masthead ------------------------------------------------------------
   One nav component for every page. On inner pages it is a sticky paper bar;
   on the home page it rides transparently over the hero video (--over).
   ------------------------------------------------------------------------ */
.mast-bar {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
}
/* Home page: the bar floats over the video hero, so it is fixed rather
   than sticky; otherwise it behaves exactly like every other page. */
.mast-bar--over { position: fixed; top: 0; left: 0; right: 0; }

/* Scrolled: no solid fill — a soft wash of paper that fades out below the
   bar, with a light blur, just enough to keep the links legible over
   whatever passes underneath. It reaches 28px past the bar so the fade has
   room; .is-scrolled is set by initMast() the moment the page moves. */
.mast-bar::before {
  content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-canvas) 86%, transparent) 0%,
    color-mix(in srgb, var(--surface-canvas) 62%, transparent) 55%,
    transparent 100%);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
          mask-image: linear-gradient(180deg, #000 60%, transparent);
  opacity: 0; transition: opacity .25s ease;
}
.mast-bar.is-scrolled::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mast-bar::before { transition: none; } }

.mast {
  width: 100%;
  padding: 10px 20px;
  display: flex; align-items: stretch; justify-content: space-between;
  gap: var(--spacing-16);
}
@media (min-width: 640px) {
  .mast { padding: 12px var(--gutter); }
  :root { --mast-h: 60px; }
}
.mast__actions .pill { padding: 10px 20px; font-size: 15px; }

.mast__logo {
  display: inline-flex; flex-shrink: 0; align-items: center; gap: 10px;
  color: var(--color-text); text-decoration: none;
}
.mast__logo svg { display: block; }
.mast__wordmark {
  font-family: var(--font-heading); font-size: 22px; font-weight: 700;
  line-height: 1; letter-spacing: -.04em; white-space: nowrap;
}

/* Centre links — desktop only, per the reference layout. */
.mast__links { display: none; align-items: stretch; gap: 6px; }
@media (min-width: 1200px) { .mast__links { display: flex; } }
.mast__links > a {
  padding: 10px 16px; border-radius: 999px;
  font-size: var(--text-body-sm); line-height: 1.15;
  font-weight: 500; color: var(--color-text);
  opacity: .76; transition: opacity .18s ease, transform .18s ease;
}
.mast__links > a:hover {
  opacity: 1; transform: translateY(-1px);
}
.mast__links > a[aria-current="page"] { opacity: 1; }

/* One call to action, on every width. Below the desktop breakpoint the bar
   becomes burger | logo mark | CTA, with the mark centred and the wordmark
   left to the open sheet. */
.mast__actions { display: flex; align-items: center; }
@media (max-width: 1199px) {
  /* The mark is centred on the bar itself, not in a grid column, so a wider
     button on the right can never pull it off-centre. */
  .mast { position: relative; align-items: center; }
  .mast__burger { order: -1; margin: 0 0 0 -10px; }
  .mast > .mast__logo {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  }
  .mast > .mast__logo svg { width: 28px; height: 28px; }
  .mast > .mast__logo .mast__wordmark { display: none; }
  .mast__actions .pill { height: 40px; padding: 0 14px; font-size: 13px; }
}

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border: 0; border-radius: var(--radius-pills);
  font-family: var(--font-body);
  font-size: var(--text-body-sm); line-height: 1.15; font-weight: var(--font-weight-semibold);
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.pill:hover { filter: brightness(1.04); }
.pill:active { transform: scale(.97); }
.pill--brand { background: var(--color-brand); color: var(--color-on-brand); }
/* The system's default control is the outlined pill, never a second fill —
   so the secondary action is a hairline ghost that works over the video
   scrim and on the paper bar alike. */
.pill--ghost {
  background: transparent; color: var(--color-text);
  border: 1px solid var(--color-text);
}
.pill--ghost:hover { filter: none; opacity: .74; }

/* --- Desktop mega panels -------------------------------------------------
   One panel shape for every menu, hung off the bottom of the bar and sized
   to the page column. Three panes split by hairlines: category cards, the
   active category's links, and a feature for that category. A menu with no
   categories (Company) drops the cards and lists its rows in two columns.
   Hovering or focusing a card swaps the other two panes — initMegaTabs().

   Closed state is opacity + visibility rather than [hidden], so the panel can
   transition; [inert] — toggled by initDropdowns() in ark.js — is what keeps
   a closed panel out of the tab order and the accessibility tree.
   ------------------------------------------------------------------------ */
.navitem { display: flex; }

.navitem__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 100%; padding: 0 16px; border: 0;
  background: transparent; color: var(--color-text);
  font-size: var(--text-body-sm); line-height: 1.15; font-weight: 500;
  opacity: .76; cursor: pointer;
  transition: opacity .18s ease, color .18s ease;
}
.navitem__btn:hover,
.navitem__btn[aria-current="page"] { opacity: 1; }
.navitem.is-open .navitem__btn { opacity: 1; color: var(--color-brand-ink); }

.navitem__chev { transition: transform .22s ease; }
.navitem.is-open .navitem__chev { transform: rotate(180deg); }

/* Over the home video the bar is transparent; an open panel needs it solid
   so bar and panel read as one card. */
.mast-bar:has(.navitem.is-open) { background: var(--surface-canvas); box-shadow: 0 1px 0 var(--color-hairline); }

.ddn {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
  max-height: calc(100dvh - var(--mast-h) - 24px); overflow-y: auto;
  background: var(--surface-canvas);
  border-bottom: 1px solid var(--color-hairline);
  box-shadow: 0 32px 64px -24px rgba(25, 40, 55, .24);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.navitem.is-open > .ddn {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .ddn, .navitem.is-open > .ddn { transition: none; transform: none; }
}

.mega {
  display: grid; min-height: 380px;
  width: min(100%, var(--page-max-width)); margin-inline: auto; padding-inline: 32px;
}
.mega--tabs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .85fr); }
.mega--flat { grid-template-columns: minmax(0, 2.15fr) minmax(0, .85fr); min-height: 280px; }
.mega > * { padding: var(--spacing-32); }
.mega > :first-child { padding-left: 0; }
.mega > :last-child { padding-right: 0; }
.mega > * + * { border-left: 1px solid var(--color-hairline); }

/* Category cards — the left pane. The active one takes a brand tint. */
.mega__cats { display: grid; align-content: start; gap: var(--spacing-16); }
.mega__cat {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16);
  width: 100%; padding: 22px 24px; border: 0; border-radius: 12px;
  background: var(--color-panel); color: var(--color-text);
  font: inherit; text-align: left; cursor: pointer;
  transition: background-color .2s ease;
}
.mega__cat:not(.is-active):hover { background: color-mix(in srgb, var(--color-brand) 5%, var(--color-panel)); }
.mega__cat:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.mega__cattitle {
  display: block;
  font-family: var(--font-heading); font-size: 20px; line-height: 1.2;
  letter-spacing: -.01em; font-weight: 700;
}
.mega__catnote {
  display: block; margin-top: 6px; max-width: 26ch;
  font-size: 15px; line-height: 1.45; color: var(--color-muted);
}
.mega__go { flex: 0 0 auto; color: var(--color-text); transition: color .2s ease, transform .2s ease; }
.mega__cat.is-active { background: color-mix(in srgb, var(--color-brand) 10%, var(--surface-canvas)); }
.mega__cat.is-active .mega__go { color: var(--color-brand); transform: translateX(2px); }

/* Link rows — the middle pane. */
.mega__rows { display: grid; align-content: start; gap: 4px; }
.mega__all {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  margin: 12px 0 0 16px;
  font-size: 15px; font-weight: var(--font-weight-semibold); color: var(--color-brand-ink);
  transition: gap .2s ease;
}
.mega__all:hover { gap: 12px; }
.mega--flat .mega__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.ddn__row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr);
  align-items: center; gap: 18px;
  padding: 12px 16px; border-radius: 12px;
  transition: background-color .18s ease;
}
.mega--flat .ddn__row { align-items: start; }
.ddn__row:hover,
.ddn__row:focus-visible { background: color-mix(in srgb, var(--color-brand) 7%, var(--surface-canvas)); }
.ddn__title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-size: 17px; line-height: 1.3; font-weight: 500;
}
.mega--flat .ddn__title { font-weight: var(--font-weight-semibold); padding-top: 2px; }
.ddn__note {
  display: block; margin-top: 4px;
  font-size: 15px; line-height: 1.45; color: var(--color-muted);
}
.ddn__badge {
  padding: 2px 10px; border: 1px solid var(--color-hairline); border-radius: var(--radius-pills);
  font-size: 12px; line-height: 1.5; font-weight: var(--font-weight-semibold);
  color: var(--color-brand-ink); background: var(--surface-canvas);
}

/* Icon tile — a raised square with a hairline and a whisper of shadow. */
.ddn__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--color-hairline); border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(25, 40, 55, .06);
  color: var(--color-text);
  transition: color .18s ease, border-color .18s ease;
}
.ddn__icon svg { width: 22px; height: 22px; }
.ddn__row:hover .ddn__icon { color: var(--color-brand); border-color: color-mix(in srgb, var(--color-brand) 35%, var(--color-hairline)); }

/* Feature — the right pane. */
.mega__feature { display: flex; flex-direction: column; height: 100%; }
.mega__ftitle {
  font-family: var(--font-heading); font-size: 26px; line-height: 1.15;
  letter-spacing: -.02em; font-weight: 700;
}
.mega__ftext { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--color-muted); }
.mega__media {
  display: block; margin-top: 20px; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--color-hairline);
}
.mega__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.mega__flink {
  display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
  margin-top: auto; padding-top: var(--spacing-24);
  font-size: 15px; font-weight: var(--font-weight-semibold); color: var(--color-brand-ink);
}
.mega__flink .mega__go { width: 34px; height: 34px; color: var(--color-brand); }
.mega__flink:hover .mega__go { transform: translate(2px, -2px); }

/* Hamburger — mobile only. */
.mast__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px;
  padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--color-text);
  cursor: pointer;
}
@media (min-width: 1200px) { .mast__burger { display: none; } }

/* --- Mobile sheet --------------------------------------------------------
   Full-screen menu: plain top-level list with accordions, a two-column
   grid of company links, and full-width stacked buttons at the foot.
   ------------------------------------------------------------------------ */
.sheet-backdrop { display: none; }
.sheet {
  position: fixed; inset: 0; z-index: 81;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface-canvas);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .4s;
}
/* The closed sheet is hidden with visibility so both directions animate;
   [inert] — set in the markup, cleared by ark.js — is what keeps it out of
   the tab order and the accessibility tree meanwhile. */
.is-sheet-open .sheet {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
body.is-sheet-open { overflow: hidden; }

.sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
}
@media (min-width: 640px) { .sheet__head { padding: 20px 32px; } }
.sheet__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px;
  padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--color-text); cursor: pointer;
}

.sheet__links, .sheet__more, .sheet__actions {
  width: min(100%, 720px); margin-inline: auto; padding-inline: 20px;
}
.sheet__links { display: grid; padding-top: 24px; }

/* Staggered entry: 0.12s base + 0.05s per item. */
.sheet__item, .sheet__more, .sheet__actions {
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}
.is-sheet-open .sheet__item,
.is-sheet-open .sheet__more,
.is-sheet-open .sheet__actions {
  opacity: 1; transform: none;
  transition-delay: calc(.12s + var(--i, 0) * .05s);
}

.sheet__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 16px 0;
  border: 0; background: transparent; color: var(--color-text);
  font-size: 18px; line-height: 1.2; font-weight: var(--font-weight-semibold);
  text-align: left; cursor: pointer;
}
.sheet__item[aria-current="page"] { color: var(--color-brand-ink); }

/* Accordions — grid-template-rows animates 0fr to 1fr so the panel opens to
   its own height without a measured max-height. */
.sheetgrp__chev { flex: 0 0 auto; transition: transform .25s ease; }
.sheetgrp.is-open .sheetgrp__chev { transform: rotate(180deg); }
.sheetgrp__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.sheetgrp.is-open .sheetgrp__panel { grid-template-rows: 1fr; }
.sheetgrp__inner { overflow: hidden; min-height: 0; display: grid; gap: 2px; }
.sheetgrp__row {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 0;
  font-size: 16px; line-height: 1.3; font-weight: 500; color: var(--color-text);
}
.sheetgrp__row .ddn__icon { width: 40px; height: 40px; border-radius: 10px; }
.sheetgrp__row .ddn__icon svg { width: 20px; height: 20px; }
.sheetgrp__row[aria-current="page"] { color: var(--color-brand-ink); }
.sheetgrp__inner > :last-child { margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheetgrp__panel, .sheetgrp__chev { transition: none; }
}

.sheet__more {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px; margin-top: 40px;
}
.sheet__more a { font-size: 16px; line-height: 1.3; font-weight: var(--font-weight-semibold); }
.sheet__more a[aria-current="page"] { color: var(--color-brand-ink); }

.sheet__actions {
  margin-top: auto;
  display: grid; gap: 12px;
  padding-top: 40px; padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
/* The sheet's one action is the masthead's own pill, just full width. */
.sheet__actions .pill { width: 100%; padding: 16px 24px; font-size: 16px; }
.sheet__btn {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 20px; border-radius: 10px;
  border: 1px solid var(--color-hairline); background: #fff;
  font-size: 16px; line-height: 1.2; font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(25, 40, 55, .06);
  transition: opacity .18s ease;
}
.sheet__btn:active { opacity: .8; }
.sheet__btn--primary { border-color: var(--surface-ink); background: var(--surface-ink); color: #fff; }

/* ==========================================================================
/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-block: clamp(56px, 9vh, 108px) clamp(48px, 6vw, 96px); position: relative; }
.hero__headline { max-width: 100%; }
.hero__line { display: block; }
.hero__intro { margin-top: clamp(24px, 3vw, 40px); max-width: 56ch; }
.hero__actions { margin-top: clamp(28px, 3.4vw, 44px); }

/* Decorative organic gradient shapes — depth from gradients, never box-shadow. */
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: .34; pointer-events: none; z-index: -1;
}
.blob--a { width: 46vw; max-width: 620px; aspect-ratio: 1.4/1; right: -8vw; top: -6vh;
  background: radial-gradient(ellipse at 30% 30%, var(--color-bronze), transparent 68%),
              radial-gradient(ellipse at 70% 70%, var(--color-brand), transparent 70%);
  opacity: .22; }
.blob--b { width: 38vw; max-width: 520px; aspect-ratio: 1/1; left: -12vw; bottom: -14vh;
  background: radial-gradient(ellipse at 50% 50%, var(--color-brass), transparent 70%);
  opacity: .14; }

/* --- Video hero (home) ---------------------------------------------------
   Full-bleed background video with the masthead and copy stacked over it.
   The paper scrim is what keeps #192837 type legible over arbitrary frames.
   ------------------------------------------------------------------------ */
.vhero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--color-text);
}
.vhero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.vhero__scrim {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(242,242,238,.94) 0%,
    rgba(242,242,238,.80) 34%,
    rgba(242,242,238,.34) 66%,
    rgba(242,242,238,0) 100%
  );
}
@media (max-width: 767px) {
  /* At this width the scrim washed out all but a trace of the video, so the
     file bought a texture nobody could see. It is dropped entirely (ark.js
     never assigns the source) and the hero sizes to its own content rather
     than holding a full screen of empty paper above the fold. */
  .vhero { min-height: 0; }
  .vhero__video, .vhero__scrim { display: none; }
  .vhero__body { padding-bottom: clamp(44px, 13vw, 72px); }
  .vhero__content { max-width: none; }
}

.vhero__body {
  position: relative; z-index: 2;
  width: min(100%, var(--page-max-width));
  margin-inline: auto;
  padding: 0 20px clamp(48px, 8vw, 96px);
  /* clears the overlaid masthead, then the reference's own top padding */
  padding-top: calc(var(--mast-h) + clamp(40px, 8vw, 72px));
}
@media (min-width: 640px) { .vhero__body { padding-inline: 32px; } }

.vhero__content { max-width: 560px; }

.vhero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.65rem, 5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 24px;
}
/* Inline glyphs sit on the text baseline optically, not metrically.
   The span is the fixed box; the svg inside it is swapped by ark.js as the
   slot cycles, so the line never reflows between icons. */
.vhero__title .i {
  display: inline-block;
  position: relative; top: -2px;
  width: 24px; height: 24px;
  vertical-align: middle;
  color: var(--color-text);
}
.vhero__title .i svg {
  display: block;
  width: 100%; height: 100%;
  overflow: visible;
}
/* ark.js sets each shape's own dash length inline; this only covers the tick
   between the slot going under script control and that first measurement,
   so the finished icon never flashes before it is drawn. 400 clears the
   longest outline in a 24px box. */
.vhero__title .i[data-drawing] svg > * {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}

.vhero__sub {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  line-height: 1.65;
  opacity: .8;
  max-width: 560px;
}

.vhero__cta {
  margin-top: clamp(28px, 4vw, 40px);
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 32px;
  min-width: 210px;
  padding: 17px 24px;
  border: 0; border-radius: 50px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 600;
  box-shadow: 0 4px 24px rgba(115, 66, 226, .28);
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
.vhero__cta:hover { transform: scale(1.04); filter: brightness(1.1); }
.vhero__cta:active { transform: scale(.96); }

/* fadeUp — the reference's Framer variant expressed as a keyframe.
   Stagger is carried by --i (0, 1, 2) at 0.15s apart. */
.fade-up {
  animation: fade-up .6s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .15s) both;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* Capability ticker under the hero */
.ticker {
  border-block: 1px solid var(--color-hairline);
  overflow: hidden; padding-block: 18px;
}
.ticker__track {
  display: flex; gap: 0; width: max-content;
  animation: ticker-slide 38s linear infinite;
}
.ticker__group { display: flex; gap: 0; padding-right: 0; }
.ticker__item {
  display: inline-flex; align-items: center; gap: 24px;
  padding-inline: 24px;
  font-size: var(--text-body); line-height: 1.15; white-space: nowrap;
}
.ticker__item::after { content: "·"; color: var(--color-hairline); }
@keyframes ticker-slide { to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ==========================================================================
   Glass capability cards — adapted from layout.md's --u scaled units.
   Cards never re-layout internally; only how many share a row changes.
   ========================================================================== */
.cards {
  perspective: 1500px;
  --card-count: 3;
  --gap: clamp(12px, 1.5vw, 23px);
  --card-ref-w: 429;
  --card-ref-h: 554;
  display: flex; justify-content: center; align-items: stretch;
  gap: var(--gap);
  container-type: inline-size;
}
.cards > .card {
  --card-w: min(
    (100cqw - (var(--card-count) - 1) * var(--gap)) / var(--card-count),
    var(--card-ref-w) * 1px
  );
  width: var(--card-w);
}

.card {
  container-type: inline-size;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  aspect-ratio: 429 / 554;
  border: 1px solid var(--color-hairline);
  border-radius: calc(var(--card-w) * 17 / 429);
  background-origin: border-box;
  color: var(--color-text);
  /* 1 unit = 1px at 429px card width; descendants use --u, never 100cqw. */
  --u: calc(100cqw / 429);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1),
              border-color .3s ease;
}
/* While the pointer is on the card the turn must track it, not ease behind. */
.card.is-tilting { transition: transform .08s linear, border-color .3s ease; }

@media (hover: hover) {
  .card:hover { border-color: color-mix(in srgb, var(--accent, var(--color-brand)) 38%, var(--color-hairline)); }
  .card:hover .card__foot .link-accent { gap: 14px; }
}

.card__sheen {
  position: absolute; inset: 0; z-index: 1;
  mix-blend-mode: multiply; pointer-events: none;
  background:
    linear-gradient(102deg, rgba(25,40,55,.05), transparent 28%, rgba(25,40,55,.03) 62%, transparent 88%),
    radial-gradient(ellipse 85% 34% at 54% 100%, rgba(25,40,55,.07), transparent 72%);
}
.card__grain {
  position: absolute; z-index: 2; inset: -8%;
  width: 116%; height: 116%; opacity: .22;
  mix-blend-mode: soft-light; pointer-events: none;
}

.card__body {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column;
  padding: calc(30 * var(--u));
}
.card__label {
  font-size: calc(19 * var(--u)); line-height: 1;
  font-weight: var(--font-weight-regular);
}
.card__title {
  margin-top: calc(18 * var(--u));
  font-size: calc(34 * var(--u)); line-height: 1.14;
  letter-spacing: -0.011em; font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}
.card__copy {
  margin-top: calc(16 * var(--u));
  font-size: calc(19 * var(--u)); line-height: 1.42;
  color: rgba(25,40,55,.72);
}
.card__list {
  margin-top: calc(24 * var(--u));
  display: grid; gap: calc(10 * var(--u));
  list-style: none;
}
.card__list li {
  font-size: calc(17 * var(--u));
  line-height: 1.35;
  color: rgba(25, 40, 55, .66);
}
.card__list li::before { content: "\2014\00a0"; color: rgba(25, 40, 55, .3); }

.card__foot { margin-top: auto; }
.card__foot .link-accent { font-size: calc(17 * var(--u)); }

/* Per-discipline card grounds. Colour is taxonomy, not decoration. */
.card--software {                                   /* Engineering — brand */
  --accent: var(--color-brand);
  background:
    radial-gradient(ellipse 68% 45% at -4% -3%, rgba(115,66,226,.22) 0%, transparent 77%),
    radial-gradient(ellipse 64% 49% at 108% 106%, rgba(169,139,240,.20) 0%, transparent 78%),
    radial-gradient(ellipse 105% 32% at 50% 80%, rgba(115,66,226,.08) 0%, transparent 78%),
    linear-gradient(180deg, #ece7fb 0%, #f1eefc 48%, var(--color-panel) 100%);
  background-origin: border-box;
}
.card--ai {                                    /* AI & Automation — support A */
  --accent: var(--color-brass);
  background:
    radial-gradient(ellipse 70% 45% at 104% -4%, rgba(62,107,224,.24) 0%, transparent 78%),
    radial-gradient(ellipse 64% 49% at -8% 106%, rgba(62,107,224,.16) 0%, transparent 78%),
    radial-gradient(ellipse 93% 47% at 106% 58%, rgba(62,107,224,.10) 0%, transparent 76%),
    linear-gradient(180deg, #e6ecfb 0%, #edf1fc 48%, var(--color-panel) 100%);
  background-origin: border-box;
}
.card--commerce {                                 /* E-commerce — support B */
  --accent: var(--color-bronze);
  background:
    radial-gradient(ellipse 68% 45% at -4% -3%, rgba(160,63,208,.24) 0%, transparent 77%),
    radial-gradient(ellipse 60% 32% at 97% 101%, rgba(160,63,208,.16) 0%, transparent 76%),
    radial-gradient(ellipse 80% 36% at 62% 57%, rgba(215,149,239,.12) 0%, transparent 72%),
    linear-gradient(180deg, #f5e8fb 0%, #f7eefc 48%, var(--color-panel) 100%);
  background-origin: border-box;
}

@media (max-width: 900px) {
  .cards { flex-wrap: wrap; }
  .cards > .card { --card-count: 1; width: min(100cqw, 429px); }
}

/* ==========================================================================
   Case-study anatomy — a numbered index, not a grid of boxes
   These are the ordered sections of a case study, so they are set as a
   contents list: the number carries the sequence and a rule draws across the
   row on hover. Borderless apart from the hairlines that separate the rows.
   ========================================================================== */
.anatomy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 76px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 760px) { .anatomy { grid-template-columns: minmax(0, 1fr); } }

.anatomy__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 26px);
  align-items: start;
  padding-block: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--color-hairline);
}

/* Brand rule drawn over the hairline, left to right. */
.anatomy__row::before {
  content: "";
  position: absolute; top: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--color-brand);
  transition: width .55s cubic-bezier(.22, 1, .36, 1);
}
.anatomy__row:hover::before { width: 100%; }

/* Close the list: in two columns that is the final pair. */
.anatomy__row:nth-last-child(-n+2) { border-bottom: 1px solid var(--color-hairline); }

@media (max-width: 760px) {
  /* One column, so only the very last row closes it — must come after the
     rule above to win at equal specificity. */
  .anatomy__row:nth-last-child(-n+2) { border-bottom: 0; }
  .anatomy__row:last-child { border-bottom: 1px solid var(--color-hairline); }
}

.anatomy__num {
  padding-top: .42em;
  font-size: var(--text-body-sm);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  color: var(--color-hairline);
  transition: color .35s ease;
}
.anatomy__row:hover .anatomy__num { color: var(--color-brand-ink); }

.anatomy__title {
  font-size: var(--text-subheading);
  line-height: 1.2;
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 8px;
}
.anatomy__copy {
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 38ch;
}

/* ==========================================================================
   Stage panels — borderless, lit by the pointer
   Deliberately not a second set of glass cards: same page, different job.
   The rim and the spotlight only exist on hover, so at rest the section is
   quiet type on paper.
   ========================================================================== */
.stages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
@media (max-width: 820px) { .stages { grid-template-columns: minmax(0, 1fr); } }

.stage {
  --stage-hue: var(--color-brand);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(26px, 3vw, 44px);
  border-radius: clamp(12px, 1.4vw, 20px);
  background: color-mix(in srgb, var(--color-panel) 62%, transparent);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1),
              background-color .45s ease;
}
.stage:hover { transform: translateY(-4px); }

/* Gradient hairline, drawn as a masked ring so it never tints the fill. */
.stage::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg,
    var(--stage-hue), color-mix(in srgb, var(--stage-hue) 25%, transparent) 60%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.stage:hover::before,
.stage:focus-within::before { opacity: 1; }

/* Pointer spotlight — position comes from ark.js. */
.stage::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  background: radial-gradient(
    clamp(220px, 26vw, 380px) circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--stage-hue) 22%, transparent), transparent 68%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.stage:hover::after { opacity: 1; }

.stage__body { position: relative; z-index: 1; }

/* The stage number, set in the site's LED dots and pushed well back. */
.stage__num {
  position: absolute; z-index: 1;
  top: clamp(20px, 2.2vw, 32px);
  right: clamp(20px, 2.2vw, 32px);
  color: var(--stage-hue);
  opacity: .18;
  pointer-events: none;
  transition: opacity .45s ease;
}
.stage:hover .stage__num { opacity: .34; }
.stage__num .dot-svg { height: clamp(30px, 3.6vw, 48px); width: auto; }

.stage__label {
  display: block;
  font-size: var(--text-body-sm); line-height: 1;
  color: var(--stage-hue);
  margin-bottom: var(--spacing-16);
}
.stage__title {
  font-size: var(--text-subheading);
  line-height: 1.2;
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
  max-width: 20ch;
  margin-bottom: var(--spacing-24);
}

/* Borderless list: a short rule per item instead of a box. */
.stage__list { display: grid; gap: 10px; margin-bottom: var(--spacing-32); }
.stage__list li {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--text-body-sm); line-height: 1.5;
  color: var(--color-muted);
  transition: color .3s ease;
}
.stage__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 16px; height: 1px;
  background: var(--color-hairline);
  transition: width .4s cubic-bezier(.22, 1, .36, 1), background-color .4s ease;
}
.stage:hover .stage__list li { color: var(--color-text); }
.stage:hover .stage__list li::before { width: 26px; background: var(--stage-hue); }

/* ==========================================================================
   Glass cards — rigid 429x554 units
   The card never re-lays-out internally: every descendant is sized in --u,
   where 1u = 1px at the 429px reference width. Only how many cards share a
   row changes across breakpoints.
   ========================================================================== */
.gcards {
  --card-ref-w: 429;
  --card-ref-h: 554;
  --card-count: 3;
  --gap: clamp(8px, 1.5vw, 23px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  container-type: inline-size;
}
.gcards > .gcard {
  --card-w: min(
    (100cqw - (var(--card-count) - 1) * var(--gap)) / var(--card-count),
    var(--card-ref-w) * 1px
  );
  width: var(--card-w);
}

.gcard {
  container-type: inline-size;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  aspect-ratio: 429 / 554;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: calc(var(--card-w) * 17 / 429);
  background-origin: border-box;
  color: #fff;
  box-shadow: 0 2px 4px rgba(50, 28, 39, .30), inset 0 1px 0 rgba(255, 255, 255, .24);
  /* 1 unit = 1px at 429px card width; descendants use --u, never 100cqw. */
  --u: calc(100cqw / 429);
}

.gcard__media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.gcard::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  mix-blend-mode: screen; pointer-events: none;
  background:
    linear-gradient(102deg, rgba(255,255,255,.10), transparent 28%, rgba(255,255,255,.08) 62%, transparent 88%),
    radial-gradient(ellipse 85% 34% at 54% 7%, rgba(255,255,255,.24), transparent 72%);
}

/* Text sits on moving video here, so it needs a ground of its own. Measured
   white-on-video came out at 2.1:1 — this scrim is what carries it past AA.
   It darkens only the bands the copy occupies, leaving the art in the middle.
   z-index 3 puts it under the title (4), caption (5) and button (6). */
.gcard::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(34, 9, 21, .62) 0%,
    rgba(34, 9, 21, .30) 24%,
    rgba(34, 9, 21, .06) 42%,
    rgba(34, 9, 21, .10) 54%,
    rgba(34, 9, 21, .42) 74%,
    rgba(34, 9, 21, .58) 100%);
}

/* The speckle was doubled here against a busy video; halve it. */
.gcard .card__grain { opacity: .22; }

.gcard__title {
  position: absolute; z-index: 4;
  top: 6.1%; left: 5%; width: 90%;
  margin: 0;
  color: rgba(255, 255, 255, .96);
  font-size: calc(22.95 * var(--u));
  font-weight: 600; letter-spacing: 0; line-height: 1.48;
  text-align: center;
  text-shadow: 0 1px 1px rgba(72, 28, 48, .14);
}

.gcard__caption {
  position: absolute; z-index: 5;
  top: 65.1%; left: 10%; width: 80%;
  margin: 0;
  color: rgba(255, 255, 255, .87);
  font-size: calc(19.95 * var(--u));
  font-weight: 400;
  letter-spacing: calc(-.36 * var(--u));
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 1px 2px rgba(60, 21, 35, .16);
}

.gcard__cta {
  position: absolute; z-index: 6;
  top: 83.75%; left: 50%;
  width: calc(111 * var(--u)); height: calc(45 * var(--u));
  transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  color: #2d2d2d; background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 0 rgba(255,255,255,.50) inset, 0 1px 3px rgba(58,25,39,.08);
  font-size: calc(14 * var(--u));
  font-weight: 400;
  letter-spacing: calc(-.25 * var(--u));
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gcard__cta:hover {
  transform: translateX(-50%) translateY(calc(-2 * var(--u)));
  box-shadow: 0 8px 20px rgba(58, 25, 39, .16);
}
.gcard__cta:focus-visible { outline: 3px solid rgba(255,255,255,.78); outline-offset: 3px; }

/* --- The three grounds, cycled across the row ---------------------------- */
.gcard--speed {
  background:
    radial-gradient(ellipse 34% 24% at 50% 2%, rgba(255,220,211,.10) 0%, transparent 76%),
    radial-gradient(ellipse 44% 34% at 106% 20%, rgba(255,222,211,.10) 0%, transparent 74%),
    radial-gradient(ellipse 43% 31% at -7% 61%, rgba(127,31,53,.06) 0%, transparent 74%),
    radial-gradient(ellipse 44% 34% at 50% 111%, rgba(55,0,20,.16) 0%, transparent 74%),
    radial-gradient(ellipse 105% 32% at 50% 80%, rgba(255,218,204,.20) 0%, rgba(255,205,196,.10) 48%, transparent 78%),
    radial-gradient(ellipse 64% 49% at -8% 106%, rgba(255,222,199,.48) 0%, rgba(255,204,192,.25) 49%, transparent 78%),
    radial-gradient(ellipse 64% 49% at 108% 106%, rgba(255,222,199,.43) 0%, rgba(255,204,192,.22) 49%, transparent 78%),
    radial-gradient(ellipse 68% 45% at -4% -3%, rgba(255,235,232,.73) 0%, rgba(255,226,226,.41) 46%, transparent 77%),
    radial-gradient(ellipse 70% 45% at 104% -4%, rgba(255,238,233,.78) 0%, rgba(255,226,226,.42) 48%, transparent 78%),
    radial-gradient(ellipse 93% 47% at 106% 58%, rgba(245,247,241,.73) 0%, rgba(246,231,229,.42) 48%, transparent 76%),
    radial-gradient(ellipse 54% 30% at 50% 17%, rgba(106,8,51,.22) 0%, transparent 78%),
    linear-gradient(180deg, #bd4468 0%, #ad355b 38%, #a63b50 72%, #8c1320 100%);
  background-origin: border-box;
}
.gcard--speed .card__grain { opacity: .26; }

.gcard--context {
  background:
    radial-gradient(ellipse 82% 15% at 50% 29%, rgba(240,204,244,.24), transparent 81%),
    radial-gradient(ellipse 64% 18% at 50% 61%, rgba(239,177,208,.17), transparent 81%),
    radial-gradient(ellipse 43% 42% at -5% 30%, rgba(228,220,255,.53), transparent 78%),
    radial-gradient(ellipse 43% 42% at 105% 30%, rgba(245,200,210,.54), transparent 78%),
    radial-gradient(ellipse 70% 48% at 70% 110%, rgba(238,204,201,.62), transparent 77%),
    radial-gradient(ellipse 70% 23% at 78% 1%, rgba(251,208,226,.56), transparent 78%),
    radial-gradient(ellipse 78% 25% at 15% 8%, rgba(218,211,255,.54), transparent 79%),
    radial-gradient(ellipse 45% 26% at 47% 78%, rgba(236,184,183,.45), transparent 73%),
    linear-gradient(164deg, #c9b5e1 0%, #ad80ca 29%, #9d4f72 64%, #793246 100%);
  background-origin: border-box;
}
.gcard--context .card__grain { opacity: .32; }

.gcard--connections {
  background:
    radial-gradient(ellipse 54% 14% at 56% 0%, rgba(255,206,190,.16), transparent 76%),
    radial-gradient(ellipse 38% 24% at 102% 8%, rgba(255,190,164,.24), transparent 75%),
    radial-gradient(ellipse 28% 24% at -5% 66%, rgba(255,192,174,.30), transparent 74%),
    radial-gradient(ellipse 46% 30% at 104% 32%, rgba(255,146,52,.42), transparent 74%),
    radial-gradient(ellipse 80% 36% at 62% 57%, rgba(255,141,36,.62), transparent 72%),
    radial-gradient(ellipse 58% 30% at 6% 103%, rgba(199,49,45,.38), transparent 76%),
    radial-gradient(ellipse 60% 32% at 97% 101%, rgba(190,40,44,.42), transparent 76%),
    linear-gradient(177deg, #d84736 0%, #dd523c 24%, #e8703d 52%, #de5641 78%, #d34239 100%);
  background-origin: border-box;
}
.gcard--connections .card__grain { opacity: .28; }

/* --- Card decorations, one per ground ----------------------------------- */
.gauge {
  position: absolute; z-index: 2;
  top: 27.63%; left: 10.5%; width: 79%; height: 59%;
  overflow: visible;
}
.gauge .tick { stroke: rgba(255, 188, 210, .34); }

.context-window {
  position: absolute; z-index: 3;
  top: 32.4%; left: 20.4%; width: 59%; height: 30.1%;
  overflow: hidden; border: none;
  border-radius: calc(10 * var(--u));
  background:
    linear-gradient(0deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.15) 45%, rgba(255,255,255,0) 80%),
    linear-gradient(270deg, rgba(213,62,152,.62) 0px, rgba(213,62,152,0) calc(5 * var(--u))),
    radial-gradient(ellipse 118% 70% at 60% 8%, rgba(255,203,252,.34), transparent 74%),
    linear-gradient(105deg, rgba(250,232,250,.72) 0%, rgba(238,120,214,.68) 51%, rgba(222,86,177,.82) 100%);
  box-shadow: 0 calc(13 * var(--u)) calc(25 * var(--u)) rgba(70,17,69,.31),
              inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(calc(9 * var(--u))) saturate(1.08);
}
.window-lines {
  position: absolute; top: 9%; left: 6.7%; width: 87%; height: 24%;
}
.window-lines span { display: block; }
.window-lines span:nth-child(1) {
  width: 29%; height: calc(6 * var(--u));
  border-radius: calc(2.5 * var(--u));
  background: rgba(255,255,255,.72);
  margin-bottom: calc(3 * var(--u));
}
.window-lines span:nth-child(2) {
  width: 100%; height: calc(22 * var(--u));
  border-radius: calc(6 * var(--u));
  background: linear-gradient(90deg, rgba(255,240,253,.72), rgba(255,170,242,.75) 42%, rgba(255,108,235,.78));
}
.window-lines span:nth-child(3) {
  width: 86%; height: calc(22 * var(--u));
  border-radius: calc(6 * var(--u));
  margin-top: calc(3 * var(--u));
  opacity: .64;
  background: linear-gradient(90deg, rgba(255,240,253,.72), rgba(255,170,242,.75) 42%, rgba(255,108,235,.78));
}

.connections-map {
  position: absolute; z-index: 2;
  top: 21.7%; left: 0; width: 100%; height: 43%;
  opacity: .78;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.46) 67%, rgba(0,0,0,.15) 83%, transparent 96%);
          mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.46) 67%, rgba(0,0,0,.15) 83%, transparent 96%);
}

/* --- Entrance: the card settles, then its contents resolve in order ------ */
html.entrance-active .gcard,
html.entrance-active .gcard__title,
html.entrance-active .gauge,
html.entrance-active .context-window,
html.entrance-active .connections-map,
html.entrance-active .gcard__caption,
html.entrance-active .gcard__cta { will-change: opacity, translate, scale, clip-path; }

html.entrance-active .gcard {
  animation: card-establish .76s cubic-bezier(.16, 1, .3, 1) var(--entrance-delay, .46s) both;
}
html.entrance-active .gcard__title {
  animation: card-title-reveal .62s cubic-bezier(.22, 1, .36, 1)
             calc(var(--entrance-delay, .46s) + .14s) both;
}
html.entrance-active .gauge,
html.entrance-active .context-window,
html.entrance-active .connections-map {
  animation: panel-resolve .82s cubic-bezier(.16, 1, .3, 1)
             calc(var(--entrance-delay, .46s) + .30s) both;
}
html.entrance-active .gcard__caption {
  animation: support-reveal .54s cubic-bezier(.22, 1, .36, 1)
             calc(var(--entrance-delay, .46s) + .64s) both;
}
html.entrance-active .gcard__cta {
  animation: control-settle .52s cubic-bezier(.16, 1, .3, 1)
             calc(var(--entrance-delay, .46s) + .80s) both;
}

@keyframes card-title-reveal {
  from { opacity: 0; translate: 0 calc(8 * var(--u)); clip-path: inset(0 0 48% 0); }
  to   { opacity: 1; translate: none; clip-path: inset(-8% -2% -8% -2%); }
}
@keyframes panel-resolve {
  from { opacity: 0; translate: 0 calc(10 * var(--u)); scale: .972; clip-path: inset(8% 4% 8% 4%); }
  to   { opacity: 1; translate: none; scale: none; clip-path: inset(-3%); }
}
@keyframes control-settle {
  from { opacity: 0; translate: 0 calc(6 * var(--u)); scale: .975; }
  to   { opacity: 1; translate: none; scale: none; }
}

@media (max-width: 900px) { .gcards { --card-count: 2; } }
@media (max-width: 620px) { .gcards { --card-count: 1; } }
@media (prefers-reduced-motion: reduce) { .gcard__media { display: none; } }

/* ==========================================================================
   Tool feature blocks — two-column discipline rows (desgin.md)
   ========================================================================== */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
  padding-block: clamp(40px, 5vw, 76px);
  border-top: 1px solid var(--color-hairline);
}
.feature:first-of-type { border-top: 0; }
.feature__art {
  aspect-ratio: 1 / 1;
  width: 100%; max-width: 400px;
  margin-inline: auto;
  /* Organic, not a circle — a liquid blob that drifts on hover. */
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
  filter: blur(9px);
  opacity: .85;
  animation: blob-drift 18s ease-in-out infinite alternate;
}
@keyframes blob-drift {
  from { border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; transform: rotate(-3deg) scale(1); }
  to   { border-radius: 54% 46% 48% 52% / 46% 54% 48% 52%; transform: rotate(3deg) scale(1.04); }
}
.feature__label {
  font-size: var(--text-body); line-height: 1;
  font-weight: var(--font-weight-regular);
  margin-bottom: var(--spacing-16);
}
.feature__title { margin-bottom: var(--spacing-20); }
.feature__copy { margin-bottom: var(--spacing-24); }
.feature__list {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: var(--spacing-24);
}
.feature__list li {
  padding: 7px 14px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-smalltags);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-muted);
}
@media (max-width: 820px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature__art { max-width: 260px; }
}

/* ==========================================================================
   Morph run — one cloud that crosses the page and changes shape
   A single sticky cloud sits centred in the viewport for the whole run. Its
   layers cross-fade shape to shape and it travels left/right as each service
   takes over. ark.js writes two numbers, both pure functions of scroll, so
   the whole thing plays identically up and down:
     --cx  0 = cloud resting left, 1 = resting right
     --t   continuous panel index, drives the cross-fade
   ========================================================================== */
@property --cx { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --p  { syntax: "<number>"; inherits: false; initial-value: 1; }
/* inherits, so the cloud and the HUD retire together */
@property --out { syntax: "<number>"; inherits: true; initial-value: 0; }

.morph { position: relative; }

.morph__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  /* cancel the stage's own flow height so the panels run underneath it */
  margin-bottom: -100vh;
  z-index: 0;
  pointer-events: none;
}

.cloud {
  --travel: min(44vw, 560px);
  --size: min(38vw, 430px);
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) translateX(calc((var(--cx) - .5) * var(--travel)));
}

.cloud__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* The whole cloud fades out once the last service has had its turn, so the
   tail of the section is clean. --out is written by ark.js. */
.cloud { opacity: calc(1 - var(--out, 0)); }

/* --- Scene HUD ---------------------------------------------------------- */
.morph__hud {
  position: absolute;
  left: 0; right: 0; bottom: clamp(20px, 4vh, 44px);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-16);
  opacity: calc(1 - var(--out, 0));
}
.morph__scene {
  font-size: var(--text-caption);
  letter-spacing: .16em;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.morph__scene b { color: var(--color-text); font-weight: 600; }
.morph__scene i { font-style: normal; opacity: .6; }

.morph__rail { display: flex; align-items: center; gap: 5px; }
.morph__rail i {
  display: block;
  width: clamp(14px, 2.2vw, 26px); height: 3px;
  border-radius: 2px;
  background: var(--color-hairline);
  transition: background-color .35s ease, transform .35s ease;
  transform-origin: 50% 50%;
}
.morph__rail i.is-past { background: var(--color-brand-ink); }
.morph__rail i.is-now  { background: var(--color-brand); transform: scaleY(2); }

/* --- Panels: no rules, no boxes, just copy on the free side ------------- */
.morph__panel {
  position: relative;
  z-index: 1;
  min-height: 92vh;
  min-height: 92svh;
  display: grid;
  align-items: center;
}
.morph__body {
  width: min(100%, 46ch);
  opacity: var(--p);
  /* 80px is the reference's rise distance — far enough to read as motion,
     not just a fade. */
  transform: translateY(calc((1 - var(--p)) * 80px));
  will-change: opacity, transform;
}
/* Copy takes the side the cloud is not on. */
/* The last panel needs no run-out: the cloud has already gone. */
.morph__panel:last-child { min-height: 62vh; }
.morph__panel[data-cloud-side="left"]  .morph__body { justify-self: end; }
.morph__panel[data-cloud-side="right"] .morph__body { justify-self: start; }

.morph__label {
  display: block;
  font-size: var(--text-body); line-height: 1;
  margin-bottom: var(--spacing-16);
}
.morph__title { margin-bottom: var(--spacing-20); }
.morph__copy  { margin-bottom: var(--spacing-24); }

/* Borderless — the tags read as a quiet list, not chips. */
.morph__list {
  display: flex; flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: var(--spacing-32);
}
.morph__list li {
  font-size: var(--text-body-sm);
  line-height: 1.5;
  /* --a is written per item by ark.js: the list fills in as the panel lands. */
  color: color-mix(in srgb, var(--color-text) calc(var(--a, 1) * 100%), var(--color-hairline));
  opacity: calc(.35 + var(--a, 1) * .65);
  transform: translateY(calc((1 - var(--a, 1)) * 10px));
}
.morph__list li + li::before {
  content: "·";
  margin-right: 18px;
  color: var(--color-hairline);
}

@media (max-width: 860px) {
  /* No room for a cloud beside the copy — park it behind, full width. */
  .morph__stage { height: 62vh; margin-bottom: -62vh; top: 19vh; }
  .cloud { --travel: 0px; --size: min(74vw, 380px); opacity: .5; }
  .morph__panel { min-height: 78vh; }
  .morph__body { width: 100%; justify-self: stretch !important; }
}

/* --- Staggered grids ------------------------------------------------------
   Tiles arrive one after another and leave again on the way back up.
   --i is assigned by ark.js so the markup stays clean.
   -------------------------------------------------------------------------- */
.on-scroll[data-stagger] { opacity: 1; translate: none; }
[data-stagger] > * {
  opacity: 0; translate: 0 48px;
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1),
              translate .55s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * .07s);
}
[data-stagger].is-in > * { opacity: 1; translate: none; }

/* Soft 3D organic grounds, lit from within by gradient — no drop shadows.
   The transparent outer stop lets each form dissolve into the dark canvas. */
.art--brand {
  background:
    radial-gradient(circle at 30% 24%, rgba(212,194,250,.92), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(169,139,240,.78) 0%, rgba(115,66,226,.60) 40%, rgba(115,66,226,0) 72%);
}
.art--brass {
  background:
    radial-gradient(circle at 30% 24%, rgba(186,203,248,.88), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(148,176,244,.76) 0%, rgba(62,107,224,.60) 40%, rgba(62,107,224,0) 72%);
}
.art--bronze {
  background:
    radial-gradient(circle at 30% 24%, rgba(233,190,247,.90), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(215,149,239,.76) 0%, rgba(160,63,208,.60) 40%, rgba(160,63,208,0) 72%);
}

/* ==========================================================================
   Generic grids / hairline cards
   ========================================================================== */
.grid { display: grid; gap: var(--spacing-24); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }

.tile {
  padding: var(--card-padding);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-cards);
  background: transparent;
  display: flex; flex-direction: column; gap: var(--spacing-12);
  transition: border-color .2s ease, background-color .2s ease;
}
a.tile:hover { border-color: var(--color-muted); background: rgba(25,40,55,.03); }
.tile__label { font-size: var(--text-body-sm); line-height: 1; }
.tile__title { font-size: var(--text-subheading); line-height: 1.2; letter-spacing: var(--tracking-subheading); font-weight: var(--font-weight-semibold); }
.tile__copy { font-size: var(--text-body-sm); line-height: 1.5; color: var(--color-muted); }
.tile__list { display: grid; gap: 8px; margin-top: 4px; }
.tile__list li { font-size: var(--text-body-sm); line-height: 1.5; color: var(--color-muted); }
.tile__list li::before { content: "— "; color: var(--color-hairline); }
.tile__foot { margin-top: auto; padding-top: var(--spacing-12); }

/* ==========================================================================
   Process — LED-dot step numerals
   ========================================================================== */
.process { display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: clamp(96px, 12vw, 160px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
  padding-block: clamp(28px, 3.4vw, 44px);
  border-top: 1px solid var(--color-hairline);
}
.step:last-child { border-bottom: 1px solid var(--color-hairline); }
.step__num { color: var(--color-muted); }
.step__num .dot-svg { width: min(100%, 118px); height: auto; }
.step__title { margin-bottom: 10px; }
.step__copy { color: var(--color-muted); font-size: var(--text-body-lg); line-height: 1.38; max-width: 52ch; }
@media (max-width: 620px) {
  .step { grid-template-columns: minmax(0, 1fr); }
  .step__num { width: 72px; }
}

/* ==========================================================================
   Work / case-study cards
   ========================================================================== */
.case {
  display: grid; gap: var(--spacing-20);
  padding: var(--card-padding);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-cards);
  transition: border-color .2s ease;
}
a.case:hover { border-color: var(--color-muted); }
.case__media {
  border-radius: var(--radius-cards);
  animation: none;
  position: relative; overflow: hidden;
  border-radius: var(--radius-cards);
  aspect-ratio: 16 / 9;
}
.case__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
a.case:hover .case__media img { transform: scale(1.04); }

/* Real imagery only wants a whisper of a scrim; the placeholder needed a wash. */
.case__media:has(img)::after {
  background: linear-gradient(180deg, transparent 62%, rgba(25, 40, 55, .10) 100%);
}

/* Placeholder art sits back into the canvas until real project imagery lands. */
.case__media:not(:has(img))::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(242,242,238,0) 0%, rgba(242,242,238,.34) 100%),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,.28), transparent 70%);
}
.case__meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: var(--text-caption); line-height: var(--leading-caption);
  color: var(--color-muted);
}
.case__meta .dot-sep { color: var(--color-hairline); }
.case__title { font-size: var(--text-heading-sm); line-height: 1.1; letter-spacing: var(--tracking-heading-sm); font-weight: var(--font-weight-semibold); }
.case__copy { color: var(--color-muted); font-size: var(--text-body-sm); line-height: 1.55; }
.case--empty { border-style: dashed; }
.case--empty .case__title { color: var(--color-muted); }

/* Filter row */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  padding: 11px 20px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-buttons);
  background: transparent; color: var(--color-muted);
  font-size: var(--text-body-sm); line-height: 1.05;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.filter:hover { color: var(--color-text); border-color: var(--color-muted); }
.filter[aria-pressed="true"] { color: var(--color-text); border-color: var(--color-text); }

/* ==========================================================================
   Case-study detail
   ========================================================================== */
.cs-section {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  padding-block: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--color-hairline);
}
.cs-section h2 { font-size: var(--text-subheading); line-height: 1.2; letter-spacing: var(--tracking-subheading); font-weight: var(--font-weight-semibold); }
.cs-body { display: grid; gap: var(--spacing-16); max-width: 62ch; }
.cs-body p { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); letter-spacing: var(--tracking-body-lg); }
.cs-body ul { display: grid; gap: 10px; }
.cs-body ul li { font-size: var(--text-body-lg); line-height: 1.38; color: var(--color-muted); }
.cs-body ul li::before { content: "— "; color: var(--color-hairline); }
@media (max-width: 760px) { .cs-section { grid-template-columns: minmax(0, 1fr); } }

.shot {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-cards);
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  color: var(--color-hairline);
  font-size: var(--text-caption);
  background: var(--surface-nested-panel);
}

/* ==========================================================================
   Contact form
   ========================================================================== */
.form { display: grid; gap: var(--spacing-20); }
.field { display: grid; gap: 8px; }
.field > label {
  font-size: var(--text-caption); line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption); color: var(--color-muted);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-smalltags);
  font-size: var(--text-body-sm); line-height: 1.35;
  transition: border-color .18s ease;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-muted); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-hairline); }
.field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
                    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field select option { background: var(--surface-nested-panel); color: var(--color-text); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-20); }
@media (max-width: 620px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
.form__status { font-size: var(--text-body-sm); color: var(--color-brand-ink); }
.form__status[hidden] { display: none; }

/* Contact track switch ------------------------------------------------------
   .form__row carries display:grid, which beats the UA [hidden] rule, so the
   project-only fields need an explicit override to actually disappear. */
.form [hidden] { display: none !important; }

.track { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-inline-size: 0; }
.track > legend {
  padding: 0; float: left; width: 100%;
  font-size: var(--text-caption); line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption); color: var(--color-muted);
}
.track__opts { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-12); }
@media (max-width: 620px) { .track__opts { grid-template-columns: minmax(0, 1fr); } }

.track__opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-smalltags);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.track__opt:hover { border-color: var(--color-muted); }
.track__opt input {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 16px; height: 16px; margin: 3px 0 0;
  border: 1px solid var(--color-muted); border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.track__opt input:checked {
  border-color: var(--color-brand-ink);
  box-shadow: inset 0 0 0 4px var(--color-brand-ink);
}
.track__opt input:focus-visible { outline: 2px solid var(--color-brand-ink); outline-offset: 3px; }
.track__opt:has(input:checked) {
  border-color: var(--color-brand-ink);
  background: rgba(25, 40, 55, .03);
}
.track__body { display: grid; gap: 3px; min-inline-size: 0; }
.track__name { font-size: var(--text-body-sm); line-height: 1.3; font-weight: var(--font-weight-semibold); }
.track__note { font-size: var(--text-body-sm); line-height: 1.4; color: var(--color-muted); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 76px);
}
@media (max-width: 820px) { .split { grid-template-columns: minmax(0, 1fr); } }

.contact-aside { display: grid; gap: var(--spacing-24); align-content: start; }
.contact-aside dt { font-size: var(--text-caption); color: var(--color-muted); margin-bottom: 6px; }
.contact-aside dd { margin: 0; font-size: var(--text-body); }

/* ==========================================================================
   Roles list (careers)
   ========================================================================== */
.role {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-16);
  padding-block: clamp(20px, 2.6vw, 32px);
  border-top: 1px solid var(--color-hairline);
}
.role:last-of-type { border-bottom: 1px solid var(--color-hairline); }
.role__title { font-size: var(--text-heading-sm); line-height: 1.1; letter-spacing: var(--tracking-heading-sm); font-weight: var(--font-weight-semibold); margin-right: auto; }
.role__copy { color: var(--color-muted); font-size: var(--text-body-sm); max-width: 46ch; }

/* ==========================================================================
   Final CTA + footer
   ========================================================================== */
.final-cta { text-align: left; padding-block: clamp(72px, 9vw, 130px); }

/* Text wordmark — still the footer's brand signature. */
.wordmark {
  font-family: var(--font-heading);
  font-size: 21px; font-weight: var(--font-weight-semibold);
  letter-spacing: -0.011em;
  white-space: nowrap;
  color: var(--color-text);
}
.wordmark span { color: var(--color-brand-ink); }

.footer {
  background: var(--surface-nested-panel);
  border-top: 1px solid var(--color-hairline);
  padding-block: clamp(48px, 6vw, 80px);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--spacing-32);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }
.footer h3 {
  font-size: var(--text-caption); line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption); color: var(--color-muted);
  font-weight: var(--font-weight-regular); margin-bottom: var(--spacing-16);
}
.footer__links { display: grid; gap: 10px; }
.footer__links a { font-size: var(--text-body-sm); color: var(--color-muted); transition: color .18s ease; }
.footer__links a:hover { color: var(--color-text); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--spacing-16); justify-content: space-between;
  margin-top: clamp(40px, 5vw, 76px); padding-top: var(--spacing-24);
  border-top: 1px solid var(--color-hairline);
  font-size: var(--text-caption); color: var(--color-muted);
}

/* ==========================================================================
   LED dot type
   ========================================================================== */
.dot-word { display: inline-block; vertical-align: baseline; line-height: 0; }
.dot-svg { display: block; overflow: visible; color: inherit; }
/* Height is set in em so the dots track the headline; width follows the viewBox. */
.dot-word .dot-svg { height: .58em; width: auto; }

/* ==========================================================================
   Entrance animations (one-shot; class removed by ark.js)
   ========================================================================== */
html.entrance-active .reveal { opacity: 0; }
html.entrance-active .reveal {
  animation: support-reveal .72s cubic-bezier(.22,1,.36,1) var(--d, 0s) both;
  will-change: opacity, translate;
}
html.entrance-active .reveal--line {
  animation: headline-reveal .84s cubic-bezier(.16,1,.3,1) var(--d, 0s) both;
  will-change: opacity, translate, clip-path;
}
html.entrance-active .reveal--card {
  animation: card-establish .76s cubic-bezier(.16,1,.3,1) var(--d, 0s) both;
  will-change: opacity, translate, scale;
}

@keyframes headline-reveal {
  from { opacity: 0; translate: 0 .52em; clip-path: inset(0 0 56% 0); }
  to   { opacity: 1; translate: none; clip-path: inset(-8% -2% -8% -2%); }
}
@keyframes support-reveal {
  from { opacity: 0; translate: 0 8px; }
  to   { opacity: 1; translate: none; }
}
@keyframes card-establish {
  from { opacity: .52; translate: 0 10px; scale: .985; }
  to   { opacity: 1; translate: none; scale: none; }
}

/* Scroll-triggered reveal for below-the-fold blocks */
.on-scroll { opacity: 0; translate: 0 48px; transition: opacity .8s cubic-bezier(.22,1,.36,1), translate .8s cubic-bezier(.22,1,.36,1); }
.on-scroll.is-in { opacity: 1; translate: none; }

/* ==========================================================================
   STACK STRIP
   Two rows of tool chips that slide against each other as the page moves.
   Position comes from scroll offset, not an animation, so the rows sit still
   when the page does — which is what makes hovering a chip possible at all.
   ========================================================================== */
.mq-head { padding-bottom: 0; }
.mq-head__line {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-body-lg);
  color: var(--color-muted);
  max-width: 46ch;
}

.mq {
  overflow-x: clip;
  padding-block: clamp(28px, 4vw, 52px) clamp(40px, 6vw, 76px);
}
.mq__row {
  display: flex;
  gap: 0;
  width: max-content;
  will-change: transform;
}
.mq__row + .mq__row { margin-top: var(--spacing-8); }

/* No container. A logo wall reads as a wall when the marks sit on the page —
   boxing 26 of them turns the strip into a row of tags, and washing the marks
   grey kills the thing that makes them recognisable. They sit at low opacity
   so the strip is one texture at rest, and resolve on approach. */
.mq__chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 13px;
  padding: 16px 32px;
  color: var(--color-text);
  opacity: .46;
  white-space: nowrap;
  translate: 0 var(--lift, 0px);
  transition: opacity .28s ease, translate .32s cubic-bezier(.22, 1, .36, 1);
}

.mq__logo {
  width: 27px; height: 27px; flex: 0 0 auto;
  fill: currentColor;
  transition: color .28s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
}
.mq__name {
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -.015em;
}

/* Only the pointed-at mark takes its own brand colour, so the strip never
   becomes 26 competing logos at once. */
@media (hover: hover) {
  .mq__chip:hover {
    --lift: -5px;
    opacity: 1;
  }
  .mq__chip:hover .mq__logo { color: var(--brand); transform: scale(1.08); }
}

@media (max-width: 620px) {
  .mq__chip { padding: 12px 20px; gap: 10px; }
  .mq__logo { width: 22px; height: 22px; }
}

/* ==========================================================================
   PROJECT STACK
   Sticky cards that shrink as the next one climbs over them, so the deck
   compresses into view instead of scrolling away. Each card parks 28px lower
   than the one before it, which is what leaves the stacked edges visible.
   ========================================================================== */
/* ==========================================================================
   Sticky section heads
   The heading stays with the content it labels instead of scrolling off at
   the top of a long section. On pin it condenses to a bar — the eyebrow and
   any supporting line drop away — so it does not eat the space the stacked
   cards pin into. initStickyHeads() in ark.js owns the .is-pinned toggle.
   ========================================================================== */
.shead {
  position: sticky;
  top: var(--mast-h);
  z-index: 20;
  padding-block: var(--spacing-12);
}
/* Full-bleed backdrop, so content passing beneath the bar is masked even
   outside the centred .wrap. Body is overflow-x: clip, so 100vw is safe. */
.shead::before {
  content: "";
  position: absolute; inset-block: 0;
  left: 50%; width: 100vw; margin-left: -50vw;
  background: var(--surface-canvas);
  opacity: 0;
  transition: opacity .3s ease;
}
.shead.is-pinned::before { opacity: 1; }
.shead > * { position: relative; }

.shead .eyebrow,
.shead .lede { transition: opacity .25s ease, max-height .35s ease, margin .35s ease; }
.shead.is-pinned .eyebrow,
.shead.is-pinned .lede {
  opacity: 0; max-height: 0; margin-bottom: 0;
  overflow: hidden; pointer-events: none;
}
.shead .h-1 { transition: font-size .3s ease; }
.shead.is-pinned .h-1 { font-size: clamp(22px, 2.6vw, 30px); }
.shead.is-pinned br { display: none; }

/* The stack is static below 720px and under reduced motion, and a pinned
   head has nothing to stay with there either. */
@media (max-width: 720px) {
  .shead { position: static; padding-block: 0; }
  .shead::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shead { position: static; padding-block: 0; }
  .shead::before { display: none; }
  .shead .eyebrow, .shead .lede, .shead .h-1 { transition: none; }
}

/* Cards pin below the condensed head rather than behind it. The height comes
   down to match, so the tallest card still clears the viewport bottom. */
.pstack { --stack-top: calc(var(--mast-h) + 72px); }

.pstack__item {
  position: sticky;
  top: calc(var(--stack-top) + var(--i, 0) * 28px);
  height: 78vh;
}

.pstack__item:last-child { height: auto; }

.pcard {
  transform-origin: top center;
  will-change: transform;
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(16px, 2.2vw, 32px);
  border: 1px solid var(--color-hairline);
  border-radius: clamp(24px, 3.4vw, 48px);
  background: var(--surface-nested-panel);
}

.pcard__top {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  flex-wrap: wrap;
}

/* The number carries the brand gradient rather than a flat fill — the same
   move the headings make, at display size. */
.pcard__num {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 7vw, 108px);
  line-height: .85;
  letter-spacing: -.02em;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.pcard__meta { display: grid; gap: 4px; margin-right: auto; }
.pcard__label {
  font-size: var(--text-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.pcard__name {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--color-text);
}

.pcard__media {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: clamp(10px, 1.4vw, 18px);
}
.pcard__c1 {
  display: grid;
  /* One panel now: the headline stat repeated the figure already in the copy
     below it, and performance numbers belong on the results pages. */
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}
.pcard__panel {
  display: flex; flex-direction: column; justify-content: center;
  gap: 8px;
  padding: clamp(14px, 1.8vw, 26px);
  border-radius: clamp(18px, 2.6vw, 38px);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
}
.pcard__stat {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3.4vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--color-brand-ink);
}
.pcard__statcap {
  font-size: var(--text-caption);
  color: var(--color-muted);
  line-height: 1.35;
}
.pcard__desc {
  font-size: var(--text-body-sm);
  line-height: 1.45;
  color: var(--color-text);
}
.pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.pcard__tags span {
  font-size: var(--text-caption);
  line-height: 1;
  padding: 7px 11px;
  border-radius: var(--radius-pills);
  border: 1px solid var(--color-hairline);
  color: var(--color-muted);
}
.pcard__shot {
  overflow: hidden;
  border-radius: clamp(18px, 2.6vw, 38px);
  border: 1px solid var(--color-hairline);
  background: var(--color-canvas);
}
.pcard__shot img,
.pcard__shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The poster carries the frame until the clip is fetched, so the card
   never shows an empty well while scrolling. */
.pcard__vid { background: var(--color-canvas); }

/* Ghost pill, the outline counterpart to .pill--brand. */
.pcard__cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-pills);
  border: 1px solid var(--color-text);
  color: var(--color-text);
  font-size: var(--text-caption);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}
.pcard__cta:hover { background: var(--color-text); color: var(--color-canvas); }

@media (max-width: 720px) {
  /* Sticky stacking needs room to breathe; on a phone the deck just reads
     as a list. */
  .pstack__item { position: static; height: auto; }
  .pstack__item + .pstack__item { margin-top: var(--spacing-24); }
  .pcard { transform: none !important; }
  .pcard__media { grid-template-columns: minmax(0, 1fr); }
  .pcard__c1 { grid-template-rows: auto auto; }
  .pcard__shot { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   CHARACTER REVEAL
   Copy that lifts out of the page one letter at a time as it scrolls through.
   Characters keep their place in the flow; only opacity moves.
   ========================================================================== */
.cr__c {
  opacity: .18;
  transition: opacity .12s linear;
  will-change: opacity;
}

/* Tilted cards are turned from script; the hint keeps the work off the
   main thread's paint path. */
[data-tilt] { will-change: transform; }

/* ==========================================================================
   CARD DECK — two treatments, cross-faded
   The glass cards and the flat "panel" cards say the same three things in
   different registers. Both faces occupy one grid cell so the deck is as tall
   as the taller face and nothing reflows when they swap.
   ========================================================================== */
.cardstack { display: grid; }

.cardstack__face {
  grid-area: 1 / 1;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
/* The resting face is the one without the attribute; JS moves it between the
   two. Hidden faces also take `inert`, so they leave the tab order. */
.cardstack__face[data-hidden] {
  opacity: 0;
  transform: translateY(14px) scale(.99);
  pointer-events: none;
}

/* --- Flat panel cards ---------------------------------------------------- */
.hcards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--spacing-16);
  height: 100%;
}

.hcard {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--spacing-24);
  min-height: 320px;
  padding: 28px;
  border-radius: 16px;
}
.hcard--wide {
  grid-column: span 2;
  background: var(--surface-nested-panel);
  color: var(--color-text);
  border: 1px solid var(--color-hairline);
}
.hcard--ink {
  background: var(--surface-ink);
  color: #fff;
}

/* One soft brand bloom on the lead card, the same device the glass cards use
   to keep a flat surface from reading as dead. */
.hcard__orb {
  position: absolute; z-index: 0;
  width: 78%; aspect-ratio: 1;
  right: -14%; bottom: -30%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(115, 66, 226, .30), rgba(115, 66, 226, 0) 68%);
  pointer-events: none;
}

.hcard__head, .hcard__foot { position: relative; z-index: 1; }
.hcard__head { display: grid; gap: var(--spacing-12); }
.hcard__foot { display: grid; gap: var(--spacing-20); }

.hcard__label {
  font-size: var(--text-caption);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hcard--ink .hcard__label { filter: brightness(1.55); }

.hcard__title {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -.02em;
}
.hcard__copy {
  font-size: var(--text-body-sm);
  line-height: 1.5;
  max-width: 42ch;
  color: var(--color-muted);
}
.hcard--ink .hcard__copy { color: rgba(255, 255, 255, .62); }

/* Pill with the arrow riding in its own disc. */
.hcard__cta {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 7px 7px 24px;
  border-radius: var(--radius-pills);
  background: var(--color-text);
  color: var(--color-canvas);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  transition: background-color .2s ease;
}
.hcard__cta:hover { background: #0d1620; }
.hcard__arrow {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-canvas);
  color: var(--color-text);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
.hcard__arrow svg { width: 17px; height: 17px; }
.hcard__cta:hover .hcard__arrow { transform: translateX(3px); }

/* The accent link needs to survive on the dark cards. */
.link-accent--ink { color: #b9a3f3; }

/* The deck is parked on the glass treatment. The flat face is still built and
   styled below; drop this one rule and it returns to cross-fading every 10s
   (ark.js stops the rotation on its own whenever one face is display:none). */
.cardstack__face[data-face-halo] { display: none; }

/* ==========================================================================
   LIVE TILES
   The service and solution grids, given something to do. Scoped to
   [data-live-tiles] so the plain .tile on the inner pages is untouched.

   Each tile carries an --accent. Three things move: a rule that draws across
   the top as the tile arrives, a glow that tracks the pointer across the
   surface, and a lift on hover.
   ========================================================================== */
[data-live-tiles] { --tile-accent: var(--color-brand); }

[data-live-tiles] .tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: rgba(255, 255, 255, .34);
  transition: border-color .25s ease, background-color .25s ease,
              transform .35s cubic-bezier(.22, 1, .36, 1);
}

/* The pointer glow. Sits under the content and is invisible until the tile
   is hovered, so a touch device never sees a stuck highlight. */
[data-live-tiles] .tile::before {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--accent, var(--tile-accent)) 20%, transparent),
    transparent 72%);
}
@media (hover: hover) {
  [data-live-tiles] .tile:hover::before { opacity: 1; }
  [data-live-tiles] .tile:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--accent, var(--tile-accent)) 45%, var(--color-hairline));
    background: rgba(255, 255, 255, .62);
  }
}

/* The accent rule. Drawn from the left once the tile has arrived; the delay
   rides the same --i the stagger uses, so it follows the reveal. */
[data-live-tiles] .tile::after {
  content: "";
  position: absolute; left: 0; top: 0;
  height: 2px; width: 100%;
  background: var(--accent, var(--tile-accent));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * .07s + .18s);
}
[data-live-tiles].is-in .tile::after { transform: scaleX(1); }

/* Titles carry the accent on hover rather than the border alone doing the work. */
[data-live-tiles] .tile__title { transition: color .25s ease; }
@media (hover: hover) {
  [data-live-tiles] .tile:hover .tile__title { color: var(--accent, var(--tile-accent)); }
}

/* The stagger gains a little scale, so tiles settle in rather than slide. */
[data-live-tiles][data-stagger] > * {
  transform: scale(.97);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1),
              translate .55s cubic-bezier(.22, 1, .36, 1),
              transform .55s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * .07s);
}
[data-live-tiles][data-stagger].is-in > * { transform: scale(1); }

/* The closing tile is the call to action, so it takes the brand fill and the
   remaining column instead of leaving a hole in the grid. */
[data-live-tiles] .tile--cta {
  grid-column: span 2;
  background: var(--gradient-brand);
  border-color: transparent;
  justify-content: center;
}
[data-live-tiles] .tile--cta .tile__title,
[data-live-tiles] .tile--cta .link-accent { color: #fff; }
[data-live-tiles] .tile--cta::after { display: none; }
@media (hover: hover) {
  [data-live-tiles] .tile--cta:hover {
    background: var(--gradient-brand);
    border-color: transparent;
    filter: brightness(1.06);
  }
  [data-live-tiles] .tile--cta:hover .tile__title { color: #fff; }
}
@media (max-width: 620px) {
  [data-live-tiles] .tile--cta { grid-column: span 1; }
}

/* --- Hover preview ---------------------------------------------------------
   One shared frame follows the cursor while a chip is pointed at. It stays
   hidden until the image has actually decoded, so a slug with no file yet
   shows nothing rather than a broken frame. */
.chip-peek {
  position: fixed; left: 0; top: 0; z-index: 60;
  width: clamp(190px, 19vw, 280px);
  aspect-ratio: 4 / 3;
  pointer-events: none;
  opacity: 0;
  scale: .92;
  transition: opacity .22s ease, scale .3s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.chip-peek.is-on { opacity: 1; scale: 1; }
.chip-peek img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--color-hairline);
  background: var(--surface-nested-panel);
}

/* ==========================================================================
   SERVICE GRID
   Golden-ratio proportions throughout: cells are phi wide to tall, the type
   scale steps by phi, and the gaps are Fibonacci. No rules, no borders, no
   fills — structure comes from the numbers and the alignment alone.

   Interaction carries no colour. Pointing at one cell dims its neighbours,
   so attention moves without anything changing hue.
   ========================================================================== */
.svc-grid {
  --phi: 1.618;
  --step-1: 13px;                    /* Fibonacci, and ~21 / phi */
  --step-2: 21px;
  --step-3: 34px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--step-2);
  margin-top: var(--step-3);
}

.svc {
  aspect-ratio: var(--phi);
  display: flex; flex-direction: column;
  padding: var(--step-2);
  color: var(--color-text);
  opacity: 0;
  translate: 0 8px;
  /* The rise is staggered; the dim is not, so neighbours fade together. */
  transition:
    opacity .5s ease calc(var(--i, 0) * .06s),
    translate .5s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .06s),
    filter .26s ease 0s;
  filter: opacity(var(--dim, 1));
}
.svc-grid.is-in .svc { opacity: 1; translate: none; }

.svc__n {
  font-size: calc(var(--step-2) / var(--phi));   /* ~13px */
  line-height: 1;
  letter-spacing: .12em;
  color: var(--color-muted);
  margin-bottom: var(--step-1);
}
.svc__t {
  font-family: var(--font-heading);
  /* phi steps: the copy beneath is this over phi. */
  font-size: clamp(.95rem, 1.24vw, 1.28rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  transition: translate .3s cubic-bezier(.22, 1, .36, 1);
}
.svc__c {
  margin-top: var(--step-1);
  font-size: calc(clamp(.95rem, 1.24vw, 1.28rem) / var(--phi));
  line-height: 1.45;
  color: var(--color-muted);
}
.svc--cta .svc__n { color: var(--color-brand-ink); font-size: calc(var(--step-2) * 1.1); }

@media (hover: hover) {
  /* --dim inherits from the grid, so one rule dims every cell and the
     hovered cell simply takes it back. */
  .svc-grid:hover { --dim: .28; }
  .svc-grid .svc:hover { --dim: 1; }
  .svc:hover .svc__t { translate: 3px 0; }
}

@media (max-width: 1199px) {
  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  /* Two up, not one. Ten single-file rows turned this into a long scroll for
     one short line of copy per row. */
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0;
    column-gap: var(--step-2);
  }
  .svc {
    aspect-ratio: auto;
    padding: var(--step-2) 0;
    border-top: 1px solid var(--color-hairline);
  }
  /* The phi-derived scale bottoms out at ~15px/9px here, which is below
     readable. Set the three sizes outright at this width instead. */
  .svc__n { font-size: 12px; letter-spacing: .1em; margin-bottom: 6px; }
  .svc__t { font-size: 1.0625rem; line-height: 1.2; }
  .svc__c { font-size: .875rem; line-height: 1.45; margin-top: 6px; }
  .svc--cta .svc__n { font-size: 16px; }
}

/* Below ~360px two columns start breaking words; fall back to one, but keep
   the corrected type sizes. */
@media (max-width: 359px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
}

/* ==========================================================================
   FOUR SCROLL TREATMENTS
   Each section gets its own, so scrolling the page is not the same gesture
   repeated six times. Services already runs a diagonal fade; these are the
   other four.
   ========================================================================== */

/* --- 1. Solutions: a peeling deck ---------------------------------------
   The cards sit fanned on one point, over the heading rather than beside it.
   Scroll throws them off the top one at a time — each rising and turning
   further out than the last — so the line behind is uncovered as you read.
   Scroll-linked, so scrubbing back deals the deck again. */
.peel { padding-block: 0; }
.peel__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(24px, 3.4vw, 52px);
  overflow: hidden;
}
/* No z-index here on purpose. The heading is nested inside .wrap, so giving
   it one compared the wrong pair and it painted over the deck. Left alone it
   falls back to DOM order, and the deck — later in the markup and z-indexed —
   passes over it. */
.peel__head {
  position: relative;
  /* px, not ch: ch here resolves against this div's body font, not the
     heading's, which squeezed the line into a narrow column. */
  max-width: min(100%, 880px);
  margin-inline: auto;
  text-align: center;
}
.peel__head .eyebrow::before { content: ""; }
.peel__head .btn-row { justify-content: center; }

.peel__deck {
  position: relative; z-index: 4;
  margin-inline: auto;
  /* Bounded by height as well as width, so the stack never outgrows the
     sticky stage on a short viewport and gets clipped. */
  width: min(clamp(230px, 26vw, 360px), 40vh);
  aspect-ratio: 1;
  pointer-events: none;
}

.peel__card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 34px);
  border-radius: clamp(20px, 2.2vw, 32px);
  border: 1px solid transparent;
  background: var(--surface-nested-panel);
  /* --ty and --rot come from script; --r is the card's resting angle. */
  transform: translate3d(0, var(--ty, 0px), 0) rotate(calc(var(--r, 0deg) + var(--rot, 0deg)));
  will-change: transform;
}
/* Each card takes a different ground. A deck of one colour reads as a single
   slab; the cycle is what makes the stack legible as separate cards. */
.peel__card:nth-child(6n+1) { background: var(--surface-ink);        color: #fff; }
.peel__card:nth-child(6n+2) { background: var(--color-brand);        color: #fff; }
.peel__card:nth-child(6n+3) { background: var(--color-brass);        color: #fff; }
.peel__card:nth-child(6n+4) { background: var(--color-bronze);       color: #fff; }
.peel__card:nth-child(6n+5) { background: var(--color-brand-light);  color: var(--color-text); }
.peel__card:nth-child(6n+6) { background: var(--surface-nested-panel); color: var(--color-text);
                              border-color: var(--color-hairline); }

/* Explicit pairs rather than a blanket opacity — diluting white on a
   saturated ground dropped the copy under 2:1. */
.peel__card .peel__idx { color: rgba(255, 255, 255, .72); }
.peel__card .peel__c   { color: rgba(255, 255, 255, .90); }
.peel__card:nth-child(6n+5) .peel__idx,
.peel__card:nth-child(6n+6) .peel__idx { color: var(--color-muted); }
.peel__card:nth-child(6n+5) .peel__c,
.peel__card:nth-child(6n+6) .peel__c   { color: var(--color-text); }

/* Later cards sit on top, so the deck peels front to back. */
.peel__card:nth-child(1) { z-index: 6; }
.peel__card:nth-child(2) { z-index: 5; }
.peel__card:nth-child(3) { z-index: 4; }
.peel__card:nth-child(4) { z-index: 3; }
.peel__card:nth-child(5) { z-index: 2; }
.peel__card:nth-child(6) { z-index: 1; }

.peel__idx {
  font-size: var(--text-caption);
  letter-spacing: .12em;
  color: var(--color-muted);
}
.peel__image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 1 1 0;
  object-fit: contain;
}
.peel__t {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  line-height: 1.15; letter-spacing: -.02em;
}
.peel__c {
  font-size: var(--text-body-sm);
  line-height: 1.45;
  color: var(--color-muted);
}

@media (max-width: 860px) {
  .peel__deck { width: min(68vw, 290px); }
}
@media (max-width: 380px) {
  .peel__card { padding: 18px; gap: 8px; }
  .peel__c { font-size: 14px; }
}

/* --- 2. Process: a rail that draws -------------------------------------
   Scroll-linked rather than triggered: the line tracks scroll position
   continuously, and each step lifts out of grey as the head passes it. */
.process[data-rail] {
  position: relative;
  padding-left: clamp(18px, 2.4vw, 34px);
}
.process__rail {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--color-hairline);
  border-radius: 2px;
  overflow: hidden;
}
.process__rail i {
  position: absolute; left: 0; top: 0;
  width: 100%; height: var(--p, 0%);
  background: var(--gradient-brand);
}
[data-rail] .step {
  opacity: .34;
  transition: opacity .5s ease;
}
[data-rail] .step.is-lit { opacity: 1; }

/* --- 3. Why ARK: a line mask -------------------------------------------
   Each line is held behind its own edge and slides up into place, the copy
   a beat behind its title. */
[data-mask] .tile__title,
[data-mask] .tile__copy { overflow: hidden; }
[data-mask] .tile__title > span,
[data-mask] .tile__copy > span {
  display: block;
  translate: 0 115%;
  transition: translate .78s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * .09s);
}
[data-mask] .tile__copy > span { transition-delay: calc(var(--i, 0) * .09s + .09s); }
[data-mask].is-in .tile__title > span,
[data-mask].is-in .tile__copy > span { translate: none; }
/* The stagger's own fade would fight the mask; the mask is the reveal. */
[data-mask][data-stagger] > * { opacity: 1; translate: none; }

/* --- 4. Final CTA: a scroll-linked close --------------------------------
   The block settles up to full size as it arrives and the headline's
   tracking closes with it, so the section resolves rather than appears. */
.final-cta [data-cta-zoom] {
  scale: var(--z, .94);
  transform-origin: 50% 100%;
  will-change: scale;
}
.final-cta [data-cta-zoom] .section-head { letter-spacing: var(--ls, -.045em); }

/* ==========================================================================
   RESULTS PAGES
   Two scroll treatments: the figures arrive along a drawn line, and the
   method steps light in turn as a rail passes them.
   ========================================================================== */
.rhead .section-head { max-width: 18ch; }

.rmetrics {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(40px, 6vw, 76px) 0 var(--spacing-16);
}
.rmetrics__path {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.rmetrics__path path { fill: none; stroke-width: 2; stroke-linecap: round; }
.rmetrics__rail { stroke: var(--color-hairline); }
.rmetrics__draw {
  stroke: var(--color-brand);
  stroke-dasharray: var(--dash, 0);
  stroke-dashoffset: var(--off, 0);
}

.rmetric {
  position: relative;
  padding: 46px 24px 28px;
  opacity: 0; translate: 0 18px;
  transition: opacity .6s ease, translate .6s cubic-bezier(.22, 1, .36, 1);
}
.rmetric.is-on { opacity: 1; translate: none; }
.rmetric:first-child { padding-left: 0; }

.rmetric__node {
  position: absolute; top: 12px; left: 24px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--color-canvas);
  border: 2px solid var(--color-hairline);
  transition: border-color .4s ease, background-color .4s ease, scale .45s cubic-bezier(.22, 1, .36, 1);
}
.rmetric:first-child .rmetric__node { left: 0; }
.rmetric.is-on .rmetric__node { border-color: var(--color-brand); background: var(--color-brand); scale: 1.25; }

.rmetric dt { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); }
.rmetric__value {
  order: -1; margin: 0 0 12px;
  color: var(--color-brand-ink);
  font-family: var(--font-heading);
  font-size: clamp(34px, 5vw, 68px); line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.rmetric__ctx { margin: 8px 0 0; color: var(--color-muted); font-size: var(--text-caption); line-height: 1.5; }
.rmetrics__note { color: var(--color-muted); font-size: var(--text-caption); }

/* --- Method steps: a rail that lights each in turn --------------------- */
.rsteps {
  position: relative;
  margin-top: clamp(40px, 6vw, 76px);
  padding-left: clamp(20px, 2.6vw, 38px);
}
.rsteps__rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--color-hairline); border-radius: 2px; overflow: hidden;
}
.rsteps__rail i {
  position: absolute; left: 0; top: 0; width: 100%; height: var(--p, 0%);
  background: var(--gradient-brand);
}
.rstep {
  display: grid;
  grid-template-columns: clamp(64px, 8vw, 108px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: start;
  padding-block: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--color-hairline);
  opacity: .34;
  transition: opacity .5s ease;
}
.rstep:last-child { border-bottom: 1px solid var(--color-hairline); }
.rstep.is-lit { opacity: 1; }
.rstep__n {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1;
  letter-spacing: -.02em;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.rstep__t { font-size: var(--text-subheading); line-height: 1.2; letter-spacing: var(--tracking-subheading);
            font-weight: var(--font-weight-semibold); margin-bottom: 8px; }
.rstep__c { color: var(--color-muted); font-size: var(--text-body-lg); line-height: 1.45; max-width: 54ch; }

@media (max-width: 760px) {
  .rmetrics { grid-template-columns: minmax(0, 1fr); }
  .rmetrics__path { display: none; }
  .rmetric { padding: 20px 0 20px 26px; }
  .rmetric__node, .rmetric:first-child .rmetric__node { left: 0; top: 26px; }
  .rstep { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .on-scroll { opacity: 1; translate: none; }
  .ticker__track { animation: none; }
  .fade-up { animation: none; }
  .sheet__item, .sheet__more, .sheet__actions { opacity: 1; transform: none; }
  [data-stagger] > * { opacity: 1; translate: none; }
  /* No travelling cloud; every service just reads as a normal block. */
  .morph__stage { display: none; }
  /* Scroll-driven motion is the whole point of these three, so they resolve
     to their finished state instead of tracking the scroll. */
  .mq__row { transform: none !important; }
  .mq__chip { translate: none !important; }
  .pstack__item { position: static; height: auto; }
  .pstack__item + .pstack__item { margin-top: var(--spacing-24); }
  .pcard { transform: none !important; }
  .cr__c { opacity: 1 !important; transition: none; }
  .card { transform: none !important; }
  /* The deck holds on whichever face is showing rather than cross-fading. */
  .cardstack__face { transition: none; }
  /* Tiles arrive already drawn; only the pointer glow stays, since it is a
     hover affordance rather than motion. */
  [data-live-tiles] .tile::after { transform: scaleX(1); transition: none; }
  [data-live-tiles][data-stagger] > * { transform: none; }
  [data-live-tiles] .tile:hover { transform: none; }
  /* Cells arrive in place; the dim stays, since it is a pointer affordance. */
  .svc { opacity: 1; translate: none; transition: filter .26s ease; }
  /* All four treatments resolve to their finished state. */
  /* No throw: the deck sits fanned and still. */
  .peel__card { transform: rotate(var(--r, 0deg)); }
  .rmetric { opacity: 1; translate: none; transition: none; }
  .rmetrics__draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  .rstep { opacity: 1; }
  .rsteps__rail i { height: 100% !important; }
  .process__rail i { height: 100% !important; }
  [data-rail] .step { opacity: 1; }
  [data-mask] .tile__title > span, [data-mask] .tile__copy > span { translate: none; transition: none; }
  .final-cta [data-cta-zoom] { scale: 1; }
  .final-cta [data-cta-zoom] .section-head { letter-spacing: -.011em; }
  .morph__body { opacity: 1; transform: none; }
  .morph__panel { min-height: 0; padding-block: clamp(40px, 6vw, 76px); }
  .feature__art { animation: none; }
}

/* The lower panel carries a label, a line of copy and the tags, so it ranges
   from the top rather than centring a short label in a tall box. */
.pcard__c1 > .pcard__panel:last-child { justify-content: flex-start; }

/* ==========================================================================
   CAPABILITY PILLARS
   Three stacked blocks: search, engineering, content. Each carries its own
   proof row, so a discipline is never asked to borrow another's numbers.
   The sub-line under a figure names where it came from.
   ========================================================================== */
.pillars .pillar {
  border-top: 1px solid var(--color-hairline);
  padding-block: clamp(36px, 5vw, 68px);
}
.pillars .pillar:last-of-type { border-bottom: 1px solid var(--color-hairline); }

.pillar__head {
  display: grid;
  grid-template-columns: clamp(44px, 4.6vw, 72px) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px);
}
.pillar__n {
  font-size: var(--text-caption); letter-spacing: .1em;
  color: var(--color-muted); padding-top: 6px;
}
.pillar__title { margin-top: 2px; }
.pillar__lede { margin-top: var(--spacing-16); max-width: 56ch; }

/* Body hangs under the heading, indented past the numeral on desktop. */
.pillar__body {
  margin-top: clamp(22px, 3vw, 38px);
  margin-left: calc(clamp(44px, 4.6vw, 72px) + clamp(14px, 2vw, 28px));
}

.pmetrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  margin: 0;
}
/* A pillar with two figures should not stretch them across three columns.
   Explicit 2-up rather than auto-fit: auto-fit collapses the empty tracks and
   leaves the pair sized off the wrong free space. */
.pmetrics--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pmetric {
  display: grid; gap: 4px;
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--color-hairline);
}
.pmetric dt {
  font-size: var(--text-caption); line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption); color: var(--color-muted);
}
.pmetric dd { margin: 0; }
.pmetric__v {
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.8vw, 46px); line-height: 1.05;
  letter-spacing: -.028em; font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.pmetric__sub { font-size: var(--text-body-sm); line-height: 1.4; color: var(--color-muted); }

.pcaps {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: clamp(20px, 2.6vw, 32px);
}
.pcap {
  padding: 7px 14px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pills);
  font-size: var(--text-body-sm); line-height: 1.2;
  color: var(--color-muted);
}
.pcap::before { content: none; }
/* display:grid would otherwise beat the UA [hidden] rule. */
.pmetrics[hidden] { display: none; }
.pillar__cta { display: inline-flex; margin-top: clamp(18px, 2.4vw, 28px); }

@media (max-width: 720px) {
  .pillar__head { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pillar__body { margin-left: 0; }
  .pmetrics, .pmetrics--pair { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   DISCIPLINE SPLIT
   Two columns: what gets built, and what takes it to market. Each column's
   list slides in from its own side as the section arrives, so the two halves
   read as a pair rather than one long list.
   ========================================================================== */
.split .wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 88px);
}
.split__head { margin-bottom: clamp(24px, 3vw, 44px); }
.split__list { display: grid; }

.splititem {
  display: grid;
  grid-template-columns: clamp(40px, 4vw, 62px) minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
  padding-block: clamp(18px, 2.2vw, 28px);
  border-top: 1px solid var(--color-hairline);
  opacity: 0;
  translate: var(--from, -28px) 0;
  transition: opacity .6s ease, translate .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * .08s);
}
.split__col:last-child .splititem { --from: 28px; }
.split__col.is-in .splititem { opacity: 1; translate: none; }
.splititem:last-child { border-bottom: 1px solid var(--color-hairline); }

.splititem__n {
  font-size: var(--text-caption); letter-spacing: .1em;
  color: var(--color-muted); padding-top: 5px;
}
.splititem__t {
  font-size: var(--text-subheading); line-height: 1.2;
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
}
.splititem__c { margin-top: 6px; color: var(--color-muted);
                font-size: var(--text-body-sm); line-height: 1.5; }
.splititem .link-accent { margin-top: 10px; }

@media (max-width: 860px) {
  .split .wrap { grid-template-columns: minmax(0, 1fr); }
  .splititem, .split__col:last-child .splititem { --from: 0px; translate: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .splititem { opacity: 1; translate: none; transition: none; }
}

/* ==========================================================================
   Detail pages — bento grids
   Every page reached from the header menus (services/, solutions/, work/,
   results/) is built by pages.py from these tiles. One grid, many tile kinds,
   each with its own motion; --acc tints a page with one of the three brand
   hues so neighbouring pages feel related but not identical.

   Entrance: initBento() arms a grid (.bento--armed hides its tiles), then
   adds .is-in when it scrolls into view — tiles rise in order of --i. With no
   JS the grid is never armed, so nothing is hidden.
   ========================================================================== */
.pg { --acc: var(--color-brand); --bt-bg: #fbfbf8; --bt-radius: 24px; }
.bsec { padding-block: clamp(28px, 3.5vw, 48px); }
.pg > .bsec:first-child { padding-top: clamp(20px, 3vw, 40px); }
.pg > .bsec:last-child { padding-bottom: clamp(64px, 8vw, 108px); }
.bsec__head { margin-bottom: var(--spacing-32); }

.bento {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(200px, auto); grid-auto-flow: dense;
  gap: 16px;
}
.bento .w2 { grid-column: span 2; }
.bento .w3 { grid-column: span 3; }
.bento .w4 { grid-column: span 4; }
.bento .h2 { grid-row: span 2; }
@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento .w3, .bento .w4 { grid-column: span 2; }
}
@media (max-width: 599px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(160px, auto); gap: 12px; }
  .bento .w2, .bento .w3, .bento .w4 { grid-column: auto; }
  .bento .h2 { grid-row: auto; }
  .bento--hero .bt--title { order: -1; }
  .bt--icon:has(.bt__cap), .bt--orbit { min-height: 240px; }
}

/* --- Tile base ------------------------------------------------------------ */
.bt {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing-16);
  padding: 26px; border-radius: var(--bt-radius);
  background: var(--bt-bg); color: var(--color-text);
  border: 1px solid var(--color-hairline);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
}
@media (max-width: 599px) { .bt { padding: 22px; border-radius: 20px; } }

/* Cursor spotlight — a soft disc of the page hue that follows the pointer. */
.bt::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--acc) 16%, transparent), transparent 62%);
  opacity: 0; transition: opacity .35s ease;
}
.bt:hover::after { opacity: 1; }

.bento--armed .bt {
  opacity: 0; transform: translateY(28px) scale(.97);
  transition: opacity .7s ease, transform .8s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
  transition-delay: calc(var(--i, 0) * 70ms);
}
.bento--armed.is-in .bt { opacity: 1; transform: none; }
.bento--armed.is-in .bt:is(a):hover { transition-delay: 0s; }

.bt--dark {
  background: var(--surface-ink); color: #f2f2ee; border-color: transparent;
  --color-muted: rgba(242, 242, 238, .68);
}
.bt--dark .ddn__icon { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; }
.bt--dark::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--acc) 38%, transparent), transparent 62%); }

.bt__cap {
  font-size: 13px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase;
  font-weight: var(--font-weight-semibold); color: var(--color-muted);
}
.bt__t { font-size: 20px; line-height: 1.25; font-weight: var(--font-weight-semibold); letter-spacing: -.01em; }
.bt__note { font-size: 15px; line-height: 1.5; color: var(--color-muted); }
.bt__kick {
  display: block; margin-bottom: 8px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: var(--font-weight-semibold);
  color: var(--acc);
}
.bt--dark .bt__kick { color: color-mix(in srgb, var(--acc) 45%, #fff); }

/* --- Title: the page's h1 on an animated mesh ------------------------------ */
.bt--title { justify-content: flex-end; padding: clamp(26px, 3vw, 40px); background: var(--surface-canvas); }
.bt__mesh { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bt__mesh i {
  position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%;
  filter: blur(60px); opacity: .34;
  animation: bt-drift 16s ease-in-out infinite alternate;
}
.bt__mesh i:nth-child(1) { background: var(--acc); top: -30%; right: -12%; }
.bt__mesh i:nth-child(2) { background: var(--color-brand-light); bottom: -40%; right: 22%; animation-duration: 21s; animation-delay: -6s; }
.bt__mesh i:nth-child(3) { background: var(--color-brass); top: 10%; left: -30%; opacity: .16; animation-duration: 25s; animation-delay: -12s; }
@keyframes bt-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-12%, 10%) scale(1.15); }
  100% { transform: translate(8%, -6%) scale(.92); }
}
.bt__back {
  position: absolute; top: clamp(22px, 2.6vw, 32px); left: clamp(26px, 3vw, 40px);
  font-size: 14px; color: var(--color-muted); transition: color .2s ease, gap .2s ease;
  display: inline-flex; gap: 6px;
}
.bt__back:hover { color: var(--color-text); gap: 10px; }
.bt--title .eyebrow { margin-top: 36px; }
.bt__h1 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(38px, 4.8vw, 72px); line-height: 1.02; letter-spacing: -.035em;
  max-width: 16ch;
}
.bt__lede { max-width: 54ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--color-muted); }
.bt__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bt__chips span {
  padding: 5px 12px; border-radius: var(--radius-pills);
  border: 1px solid var(--color-hairline); background: var(--bt-bg);
  font-size: 13px; font-weight: var(--font-weight-semibold);
}

/* --- Icon: floating mark inside pulsing rings ----------------------------- */
.bt--icon { align-items: center; justify-content: center; text-align: center; background: color-mix(in srgb, var(--acc) 7%, var(--bt-bg)); }
.bt__bigicon {
  display: grid; place-items: center; width: 96px; height: 96px; border-radius: 28px;
  background: linear-gradient(140deg, var(--acc), color-mix(in srgb, var(--acc) 45%, var(--color-brand-light)));
  color: #fff; box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--acc) 60%, transparent);
  animation: bt-float 6s ease-in-out infinite;
}
@keyframes bt-float { 50% { transform: translateY(-10px) rotate(-3deg); } }
.bt__rings { position: absolute; inset: 0; display: grid; place-items: center; z-index: -1; pointer-events: none; }
.bt__rings i {
  grid-area: 1 / 1; width: 120px; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent);
  animation: bt-ring 4.5s ease-out infinite;
}
.bt__rings i:nth-child(2) { animation-delay: 1.5s; }
.bt__rings i:nth-child(3) { animation-delay: 3s; }
@keyframes bt-ring { from { transform: scale(.8); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.bt--icon .bt__cap { position: absolute; bottom: 20px; left: 0; right: 0; }

/* --- Count: a figure that counts up on entry ------------------------------ */
.bt--count { justify-content: flex-end; }
.bt__num {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(48px, 5.4vw, 84px); line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(120deg, var(--acc), var(--color-brand-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  overflow-wrap: anywhere;
}
.bt--count:not(.w2):not(.w3):not(.w4) .bt__num { font-size: clamp(36px, 3.4vw, 58px); }
.bt--count .bt__cap { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; }

/* --- Marquee: two rows of pills sliding opposite ways --------------------- */
.bt--marquee { justify-content: center; padding-inline: 0; }
.bt--marquee .bt__cap { padding-inline: 26px; }
.bt__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.bt__track { display: flex; width: max-content; gap: 10px; animation: bt-slide 38s linear infinite; }
.bt__dup { display: contents; }
.bt__marquee--rev .bt__track { animation-direction: reverse; animation-duration: 46s; }
.bt__track span {
  flex: 0 0 auto; padding: 10px 18px; border-radius: var(--radius-pills);
  background: var(--surface-canvas); border: 1px solid var(--color-hairline);
  font-size: 15px; font-weight: 500; white-space: nowrap;
}
.bt__marquee--rev .bt__track span { background: color-mix(in srgb, var(--acc) 9%, var(--bt-bg)); border-color: transparent; }
.bt__track .bt__dup > span { margin-left: 0; }
.bt--marquee:hover .bt__track { animation-play-state: paused; }
@keyframes bt-slide { to { transform: translateX(-50%); } }

/* --- Checklist: ticks that land one by one -------------------------------- */
.bt__checks { display: grid; gap: 4px; list-style: none; padding: 0; margin: 0; }
.bt__checks li {
  display: flex; align-items: center; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--color-hairline);
  font-size: 17px; line-height: 1.35; font-weight: 500;
}
.bt--dark .bt__checks li { border-color: rgba(255, 255, 255, .12); }
.bt__checks li:last-child { border-bottom: 0; }
.bt__checks svg {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 5px; border-radius: 50%;
  background: var(--acc); color: #fff;
}
.bento--armed .bt__checks li { opacity: 0; transform: translateX(-10px); transition: opacity .5s ease, transform .5s ease; }
.bento--armed.is-in .bt__checks li {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i, 0) * 70ms + .35s + var(--j) * 90ms);
}

/* --- Numbered item: outline numeral that fills on hover ------------------- */
.bt__n {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 64px; line-height: .9; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--acc) 55%, var(--color-hairline));
  transition: color .35s ease;
}
.bt:hover .bt__n { color: var(--acc); }
.bt--dark .bt__n { -webkit-text-stroke-color: rgba(255, 255, 255, .35); }
.bt--item .ddn__icon { width: 44px; height: 44px; }

/* --- Link tiles: lift, tint and a travelling arrow ------------------------ */
.bt--link { cursor: pointer; }
.bt--link:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acc) 45%, var(--color-hairline)); box-shadow: 0 24px 48px -28px rgba(25, 40, 55, .35); }
.bt--link .ddn__icon { width: 52px; height: 52px; }
.bt--link .bt__body { display: grid; gap: 6px; margin-top: auto; padding-right: 48px; }
.bt__go {
  position: absolute; right: 22px; bottom: 22px;
  color: var(--color-muted); transition: transform .35s cubic-bezier(.22, 1, .36, 1), color .25s ease;
}
.bt--link:hover .bt__go { color: var(--acc); transform: translate(3px, -3px) rotate(8deg); }
.bt--dark.bt--link:hover .bt__go { color: #fff; }
.bt--link.h2 .bt__t, .bt--link.w2 .bt__t { font-size: clamp(22px, 2vw, 28px); }

/* Image link: picture behind, legible body in front. */
.bt--img { padding-top: 0; }
.bt__img { position: absolute; inset: 0; z-index: -2; }
.bt__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.bt--img::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(25, 40, 55, 0) 25%, rgba(25, 40, 55, .92) 85%);
}
.bt--img:hover .bt__img img { transform: scale(1.06); }

/* --- Media: slow Ken Burns ------------------------------------------------- */
.bt--media { padding: 0; }
.bt--media img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; object-position: top; animation: bt-kb 22s ease-in-out infinite alternate; }
@keyframes bt-kb { to { transform: scale(1.08) translateY(-2%); } }

/* --- Orbit: service marks circling one centre ----------------------------- */
.bt--orbit { align-items: center; justify-content: center; }
.bt__orbit { position: relative; width: 184px; aspect-ratio: 1; display: grid; place-items: center; }
.bt__orbit b {
  width: 22px; height: 22px; border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--acc) 16%, transparent);
  animation: bt-beat 2.4s ease-in-out infinite;
}
@keyframes bt-beat { 50% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--acc) 6%, transparent); } }
.bt__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--acc) 40%, var(--color-hairline));
  animation: bt-spin 32s linear infinite;
}
.bt__ring span {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px;
  transform: rotate(calc(360deg / var(--n) * var(--k))) translateX(92px) rotate(calc(-360deg / var(--n) * var(--k)));
}
.bt__ring svg {
  width: 44px; height: 44px; padding: 11px; border-radius: 14px;
  background: var(--bt-bg); border: 1px solid var(--color-hairline); color: var(--acc);
  box-shadow: 0 6px 16px -8px rgba(25, 40, 55, .3);
  animation: bt-spin 32s linear infinite reverse;
}
@keyframes bt-spin { to { transform: rotate(360deg); } }
.bt--orbit .bt__cap { margin-top: 12px; }

/* --- Bars: decorative rising chart ---------------------------------------- */
.bt--bars { justify-content: flex-end; }
.bt__bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; flex: 1; }
.bt__bars i {
  flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, var(--acc), color-mix(in srgb, var(--acc) 25%, var(--bt-bg)));
  transform-origin: bottom; animation: bt-breathe 5s ease-in-out infinite; animation-delay: calc(var(--j) * -.6s);
}
@keyframes bt-breathe { 50% { transform: scaleY(.86); } }
.bento--armed .bt__bars i { transform: scaleY(0); animation: none; transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.bento--armed.is-in .bt__bars i { transform: scaleY(1); transition-delay: calc(var(--i, 0) * 70ms + .3s + var(--j) * 70ms); }
.bt.h2 .bt__bars { height: auto; min-height: 200px; }

/* --- Step: numbered, with a progress rail that fills in order ------------- */
.bento--steps { grid-auto-rows: minmax(220px, auto); }
.bt--step { justify-content: flex-start; }
.bt--step .bt__n { font-size: 44px; }
.bt--step .bt__t { margin-top: auto; }
.bt__fill { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--color-hairline); }
.bt__fill::after {
  content: ""; position: absolute; inset: 0; background: var(--acc);
  transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 260ms + .4s);
}
.bento.is-in .bt__fill::after, .bento:not(.bento--armed) .bt__fill::after { transform: scaleX(1); }

/* --- Text statement, optionally over a drifting dot field ----------------- */
.bt__big { font-family: var(--font-heading); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.02em; }
.bt--dots {
  background-color: var(--bt-bg);
  background-image: radial-gradient(color-mix(in srgb, var(--acc) 35%, transparent) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  animation: bt-dots 18s linear infinite;
}
@keyframes bt-dots { to { background-position: 180px 90px; } }

/* --- Chip cloud: pills that bob out of phase ------------------------------ */
.bt__cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.bt__cloud span {
  padding: 10px 18px; border-radius: var(--radius-pills);
  background: color-mix(in srgb, var(--acc) 10%, var(--bt-bg)); color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--acc) 22%, transparent);
  font-size: 16px; font-weight: 500;
  animation: bt-bob 5s ease-in-out infinite; animation-delay: calc(var(--j) * -1.1s);
}
@keyframes bt-bob { 50% { transform: translateY(-5px); } }

/* --- Portfolio shot -------------------------------------------------------- */
.bt--shot { justify-content: flex-end; padding: 22px; color: #fff; border: 0; min-height: 220px; }
.bt--shot img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.bt--shot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(25, 40, 55, .85)); }
.bt--shot:hover img { transform: scale(1.07); }
.bt--shot .bt__kick { color: rgba(255, 255, 255, .75); }

/* --- Closing CTA: the one ask on the page --------------------------------- */
.bt--cta {
  flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: var(--spacing-24);
  min-height: 260px; padding: clamp(28px, 4vw, 48px);
  background: var(--surface-ink); color: #f2f2ee; border-color: transparent;
  --color-muted: rgba(242, 242, 238, .7);
}
.bt--cta .bt__mesh i { opacity: .5; }
.bt--cta > div { flex: 1 1 420px; }
.bt--cta .eyebrow, .bt--dark .eyebrow { color: rgba(242, 242, 238, .72); }
.bt__h2 { margin-top: 12px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -.03em; }
.bt--cta .bt__lede { margin-top: 14px; }
.bt--cta .btn--cta {
  color: #fff;
  background: linear-gradient(var(--surface-ink), var(--surface-ink)) padding-box, var(--gradient-brand) border-box;
}

@media (prefers-reduced-motion: reduce) {
  .bt, .bt *, .bt::before, .bt::after { animation: none !important; transition: none !important; }
  .bento--armed .bt, .bento--armed .bt__checks li { opacity: 1; transform: none; }
  .bento--armed .bt__bars i, .bt__fill::after { transform: none; }
}

/* --- Work index: project tiles -------------------------------------------
   The screenshot sits in a browser frame at its own proportions, with the
   name and sector below it, so no tile size crops a site into nonsense. */
.bento--work { grid-auto-rows: minmax(260px, auto); }
.bt--proj { justify-content: flex-start; gap: 18px; padding: 14px 14px 20px; }
.bt__frame {
  position: relative; display: flex; flex-direction: column; flex: 1 1 auto;
  min-height: 150px; overflow: hidden; border-radius: 14px;
  background: var(--surface-ink); border: 1px solid var(--color-hairline);
}
.bt__bar { display: flex; gap: 5px; padding: 8px 10px; background: color-mix(in srgb, var(--surface-ink) 92%, #fff); }
.bt__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.bt__frame img {
  flex: 1 1 auto; width: 100%; height: 100%; min-height: 0;
  object-fit: cover; object-position: top center;
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
.bt--proj:hover .bt__frame img { transform: scale(1.04); }
.bt--proj:not(.h2) .bt__frame { flex: 0 0 auto; aspect-ratio: 16 / 10; }
.bt--proj .bt__body { display: grid; gap: 6px; padding: 0 44px 0 8px; }
.bt--proj .bt__go { right: 18px; bottom: 18px; }
.bt--proj .bt__t { font-size: 20px; }
.bt--proj.h2 .bt__t { font-size: clamp(26px, 2.2vw, 34px); letter-spacing: -.02em; }
.bt--proj.h2 .bt__note { font-size: 16px; max-width: 48ch; }
.bento:not(.is-filtered) .bt--proj:not(.w2):not(.h2) .bt__note { display: none; }
.bt--proj.w2:not(.h2) { flex-direction: row; align-items: stretch; }
.bt--proj.w2:not(.h2) .bt__frame { width: 50%; aspect-ratio: auto; }
.bt--proj.w2:not(.h2) .bt__body { align-content: end; flex: 1; }
@media (max-width: 599px) {
  .bt--proj.w2:not(.h2) { flex-direction: column; }
  .bt--proj.w2:not(.h2) .bt__frame { width: 100%; aspect-ratio: 16 / 10; }
}

/* No screenshot to show: an animated phone in the page hue instead. */
.bt--art {
  background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 16%, var(--bt-bg)), var(--bt-bg) 70%);
}
.bt__phone {
  position: relative; flex: 0 0 auto; margin: 6px auto 0;
  width: 78px; aspect-ratio: 9 / 18; border-radius: 18px;
  border: 5px solid var(--surface-ink); background: linear-gradient(170deg, var(--acc), var(--color-brand-light));
  display: grid; align-content: start; gap: 6px; padding: 18px 10px 0;
  box-shadow: 0 24px 40px -18px color-mix(in srgb, var(--acc) 70%, transparent);
  transform: rotate(-7deg);
  animation: bt-phone 7s ease-in-out infinite;
}
@keyframes bt-phone { 50% { transform: translateY(-6px) rotate(-3deg); } }
.bt__notch { position: absolute; top: 5px; left: 50%; width: 26px; height: 5px; margin-left: -13px; border-radius: 4px; background: var(--surface-ink); }
.bt__phone b { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .55); }
.bt__phone b:nth-of-type(2) { width: 70%; }
.bt__phone b:nth-of-type(3) { width: 45%; }
.bt__app {
  display: grid; place-items: center; margin-top: 10px; aspect-ratio: 1;
  border-radius: 14px; background: rgba(255, 255, 255, .92); color: var(--acc);
}
.bt__app svg { width: 26px; height: 26px; }
.bt--art { justify-content: space-between; }
.bt--art .bt__body { margin-top: auto; }

/* Filtered: every tile two-up, so hidden neighbours can't leave holes. */
.bento.is-filtered .bt { grid-column: span 2; grid-row: span 1; }
.bento.is-filtered .bt--proj .bt__note { display: block; }
.bento.is-filtered .bt--proj.h2 { flex-direction: row; }
.bento.is-filtered .bt--proj .bt__frame { width: 50%; flex: 0 0 auto; aspect-ratio: auto; }
.bento.is-filtered .bt--proj .bt__body { align-content: end; flex: 1; }
@media (max-width: 599px) { .bento.is-filtered .bt { grid-column: auto; } }

.bt--shot .bt__stat { font-size: 13px; color: rgba(255, 255, 255, .72); }
.bsec .filters { margin-bottom: var(--spacing-24); }

/* --- Team: person tiles ---------------------------------------------------- */
.bento--team { grid-auto-rows: minmax(240px, auto); }
.bt--person { justify-content: space-between; }
.bt__face {
  position: relative; display: grid; place-items: center;
  width: 88px; aspect-ratio: 1; border-radius: 26px; overflow: hidden;
}
.bt--person.h2 .bt__face { width: min(100%, 260px); border-radius: 36px; }
.bt__face img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.bt--person:hover .bt__face img { transform: scale(1.06); }
.bt__face--init {
  overflow: visible; color: #fff;
  background: linear-gradient(140deg, var(--acc), color-mix(in srgb, var(--acc) 40%, var(--color-brand-light)));
  box-shadow: 0 20px 44px -18px color-mix(in srgb, var(--acc) 70%, transparent);
  animation: bt-float 7s ease-in-out infinite;
}
.bt__face--init b {
  font-family: var(--font-heading); font-weight: 700; line-height: 1;
  font-size: 44px; letter-spacing: -.04em;
}
.bt--person.h2 .bt__face--init b { font-size: 120px; }
.bt__face--init .bt__rings i { width: 100%; }
.bt--person .bt__body { display: grid; gap: 6px; }
.bt--person .bt__t { font-size: 24px; }
.bt--person.h2 .bt__t { font-family: var(--font-heading); font-size: clamp(34px, 3.4vw, 52px); letter-spacing: -.03em; font-weight: 700; }
.bt--person.h2 .bt__note { font-size: 17px; max-width: 40ch; }
.bt--person:not(.w2):not(.h2) .bt__note { font-size: 14px; }

/* --- Client reviews -------------------------------------------------------- */
.bento--quotes { grid-auto-rows: minmax(220px, auto); }
.bt--quote { justify-content: space-between; }
.bt__qmark { color: var(--acc); opacity: .85; }
.bt--dark .bt__qmark { color: color-mix(in srgb, var(--acc) 50%, #fff); }
.bt__q { margin: 0; }
.bt__q p { font-size: 17px; line-height: 1.5; font-weight: 500; }
.bt--quote.h2 .bt__q p { font-family: var(--font-heading); font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; letter-spacing: -.02em; }
.bt__who { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--color-muted); }
.bt__who > span:last-child { display: grid; gap: 2px; }
.bt__who a { color: var(--acc); font-weight: var(--font-weight-semibold); }
.bt--dark .bt__who a { color: #fff; }
.bt__av {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: color-mix(in srgb, var(--acc) 14%, var(--bt-bg)); color: var(--acc);
  font-weight: 700;
}
.bt--dark .bt__av { background: rgba(255, 255, 255, .12); color: #fff; }
.bt__draft {
  align-self: flex-start; padding: 4px 10px; border-radius: 999px;
  background: #fde68a; color: #7c2d12; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* --- FAQ: accordion tiles --------------------------------------------------- */
.bento--faq { grid-auto-rows: auto; align-items: start; }
.bt--faq { padding: 0; gap: 0; justify-content: flex-start; }
.bt--faq details { width: 100%; }
.bt--faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px; cursor: pointer; list-style: none;
  font-size: 18px; line-height: 1.35; font-weight: var(--font-weight-semibold);
}
.bt--faq summary::-webkit-details-marker { display: none; }
.bt--faq summary:focus-visible { outline: 2px solid var(--acc); outline-offset: -4px; border-radius: var(--bt-radius); }
.bt__plus {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--acc) 10%, var(--bt-bg)); color: var(--acc);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .25s ease, color .25s ease;
}
.bt--faq details[open] .bt__plus { transform: rotate(45deg); background: var(--acc); color: #fff; }
.bt--faq details[open] { background: color-mix(in srgb, var(--acc) 5%, var(--bt-bg)); }
.bt__a { padding: 0 24px 24px; }
.bt__a p { max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--color-muted); }
.bt__a a { color: var(--acc); font-weight: var(--font-weight-semibold); }
.bt--faq details[open] .bt__a { animation: bt-faq .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes bt-faq { from { opacity: 0; transform: translateY(-6px); } }
.bento--faq .bt--link { align-self: stretch; }