/* HTO & Beyond — site stylesheet.
   Visual language: a refined, monochrome "studio" aesthetic (inspired by the
   Fabrica template direction) — large display type, uppercase numbered
   micro-labels, period-terminated section titles, a keyword marquee, generous
   whitespace, and restrained scroll-reveal motion. Palette is near-black ink
   on paper white with warm-gray inverted sections — fully monochrome, with
   no colour accent; emphasis comes from weight and contrast instead.
   Brand tokens trace back to the HTO & Beyond Design System — see
   design-handoff/_ds/ for the source export. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Color: monochrome canvas ---- */
  --ink: #0B0B0C;            /* near-black text + dark sections */
  --ink-soft: #16161A;
  --paper: #FFFFFF;
  --paper-2: #EBEBED;        /* HTO neutral-surface-2: site-wide gray canvas */
  --paper-3: #D2D2D7;        /* HTO neutral-surface-3 */

  --muted: #6C6C70;          /* secondary text */
  --muted-2: #97979C;        /* tertiary text / meta */
  --line: rgba(11, 11, 12, 0.12);
  --line-2: rgba(11, 11, 12, 0.08);
  --line-inverse: rgba(255, 255, 255, 0.16);

  /* ---- Accent ----
     The palette is fully monochrome: the accent is ink rather than a colour.
     --accent-hover is a lighter neutral so states that shift to it (buttons,
     links) still read as a change instead of collapsing into the base ink. */
  --accent: var(--ink);
  --accent-hover: #3C3C42;

  /* legacy aliases kept so existing markup keeps resolving */
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --text-tertiary: var(--muted-2);
  --text-inverse: #FFFFFF;
  --neutral-surface-1: var(--paper-2);
  --neutral-surface-2: var(--line);
  --neutral-surface-3: var(--line);
  --border-default: var(--line);

  /* ---- Type ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-body-l: 400 18px/1.6 var(--font-sans);
  --text-body-m: 400 17px/1.62 var(--font-sans);

  /* ---- Layout ---- */
  --content-width: 100%;
  --page-margin: clamp(20px, 3.2vw, 72px);
  --section-padding-y: clamp(92px, 9vw, 150px);
  --section-head-gap: 64px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 14px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 140ms;
  --duration-slow: 320ms;

  --nav-surface: rgb(250 250 250 / 86%);
  --blur-nav: blur(14px) saturate(1.4);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--paper); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
}

.section-surface { background: var(--paper-2); }

/* =================================================================
   Shared studio primitives
   ================================================================= */

/* Numbered sentence-case eyebrow, e.g. (01) Membership */
.microlabel {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font: 500 13px/1.2 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--muted);
  margin: 0 0 28px;
}
.microlabel__no {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
}
.microlabel--ondark { color: rgb(255 255 255 / 62%); }
.microlabel--ondark .microlabel__no { color: #FFFFFF; }

/* Big section title with a trailing period, e.g. Services. */
.section-title {
  font: 600 clamp(38px, 5.6vw, 76px)/0.98 var(--font-sans);
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
}
.section-title .dot { color: var(--accent); }
.section-title--ondark { color: var(--paper); }

.section-lead {
  font: 400 clamp(18px, 2vw, 21px)/1.55 var(--font-sans);
  color: var(--muted);
  max-width: 620px;
  margin: 24px 0 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: var(--section-head-gap);
}
.section-head__meta { font: 500 13px/1 var(--font-sans); color: var(--muted-2); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* =================================================================
   Buttons + links
   ================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 30px;
  padding: 7px 8px 7px 15px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #FFFFFF;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.btn::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(11 11 12 / 38%); }

.btn--sm,
.btn--md,
.btn--lg { padding: 7px 8px 7px 15px; font-size: 12.5px; }

/* One CTA component: the Hero pill, with a contrast-safe dark-surface theme. */
.btn--primary { background: var(--ink); color: #FFFFFF; }
.btn--primary:hover { background: var(--accent-hover); color: #FFFFFF; }
.btn--on-dark { background: #FFFFFF; color: var(--ink); }
.btn--on-dark:hover { background: var(--paper-3); color: var(--ink); }

.btn--ghost-light {
  display: inline-flex;
  align-items: center;
  padding: 16px 28px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font: 600 14px/1 var(--font-sans);
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.btn--ghost-light:hover { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }

/* Animated text link with underline + arrow */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 14px/1 var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--ink);
  position: relative;
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-out);
}
.text-link:hover { color: var(--accent-hover); }
.text-link:hover::after { transform: scaleX(1); }
.text-link svg { transition: transform var(--duration-slow) var(--ease-out); }
.text-link:hover svg { transform: translateX(4px); }
.text-link--ondark { color: #FFFFFF; }
.text-link--ondark:hover { color: #FFFFFF; }
.text-link--ondark::after { background: #FFFFFF; }

/* =================================================================
   Scroll reveal
   ================================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =================================================================
   Photo slots (placeholders until real assets set in main.js)
   ================================================================= */
.photo-slot { position: relative; overflow: hidden; background: var(--paper-3); }
.photo-slot--dark { background: #191a1d; }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }

/* =================================================================
   Nav
   ================================================================= */
/* One fixed appearance everywhere on the page, like the reference: the bar
   is always the light surface with dark contents, never crossfading with
   what is behind it. Sticky rather than fixed so it sits above the hero
   card instead of overlaying it. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Same surface as the page behind it, so the bar reads as part of the
     background rather than a band sitting on top of it. */
  background: var(--paper-2);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
/* 20px of logo between 20px paddings gives the reference's 60px bar.
   gap is only a collision floor — space-between still distributes the
   remaining room equally, so every gap stays identical. */
.nav__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 17px var(--page-margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 1.6vw, 24px);
}
/* Both logo variants are absolutely stacked so they can crossfade, which
   leaves the container with no intrinsic width — hold it open with the
   artwork's own aspect ratio (838x174). */
.nav__logo { display: block; height: 26px; aspect-ratio: 838 / 174; flex-shrink: 0; position: relative; }
.nav__logo img { position: absolute; inset: 0; height: 26px; width: auto; }
/* The bar is always light, so only the dark mark is ever shown. */
.nav__logo .logo-light { opacity: 0; }
.nav__logo .logo-dark { opacity: 1; }

/* The reference sets these at 16px, but it only carries four short labels.
   With our six — one of them "Applied AI Membership" — 16px reads far too
   heavy across the bar, so the size comes down while keeping their weight
   and tight tracking. */
.nav__link {
  font: 600 14px/1.1 var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-standard);
}
.nav__link:hover { color: var(--muted); }
/* Inline links step aside for the full-screen overlay's own list rather
   than showing both at once — see body.nav-open below. */
body.nav-open .nav__link { visibility: hidden; pointer-events: none; }

/* Hamburger — two bars that morph into an X, matching the reference. The
   button is the single control for both opening and closing; body.nav-open
   drives every state change (bar rotation, overlay visibility, forcing the
   nav into its light "scrolled" chrome so the mark stays legible over the
   overlay's white background even at the very top of the page). */
/* The reference's toggle is a wide 59px pair of 2px rules 8px apart, not a
   conventional small hamburger. Vertical padding gives it a real hit area
   without growing the 60px bar, cancelled by the negative block margin. */
.nav__toggle {
  flex-shrink: 0;
  width: 59px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: none;
  border: none;
  padding: 14px 0;
  margin-block: -14px;
  cursor: pointer;
}
.nav__toggle span {
  height: 2px;
  background: var(--ink);
  transition: transform var(--duration-slow) var(--ease-standard),
              opacity var(--duration-slow) var(--ease-standard);
}

/* Six links plus the logo and toggle measure ~640px, and the 14px minimum
   gaps need ~798px of viewport on top of the page margins. Hand over to the
   hamburger before that, rather than letting the row overflow. */
@media (max-width: 860px) {
  .nav__link { display: none; }
}
/* 5px is half the 10px between bar centres, so they meet on the centre line. */
body.nav-open .nav__toggle span:first-child { transform: translateY(5px) rotate(9deg); }
body.nav-open .nav__toggle span:last-child { transform: translateY(-5px) rotate(-9deg); }

/* Full-screen nav overlay */
body.nav-open { overflow: hidden; }
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-standard), visibility 0s linear var(--duration-slow);
}
body.nav-open .nav-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--duration-slow) var(--ease-standard);
}
.nav-overlay__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.4vw, 14px);
}
.nav-overlay__links a {
  font: 700 clamp(32px, 6.2vw, 68px)/1.1 var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--ink);
  transition: color var(--duration-fast) var(--ease-standard);
}
.nav-overlay__links a:hover { color: var(--muted); }
.nav-overlay__foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px var(--page-margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nav-overlay__contact { display: flex; align-items: center; gap: 24px; }
.nav-overlay__contact a {
  font: 500 14px/1 var(--font-sans);
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.nav-overlay__contact a:hover { color: var(--ink); border-color: var(--ink); }
.nav-overlay__copyright { margin: 0; font: 400 13px/1 var(--font-sans); color: var(--muted-2); }

/* =================================================================
   Hero — resolution-independent monochrome field, headline overlaid,
   keyword marquee below
   ================================================================= */
/* A rounded card inset in the light page, sitting under the bar rather
   than behind it — the same treatment the services and contact panels use.
   The 60px bar is subtracted so the card still fills one screen. */
.hero {
  --frame: clamp(6px, 0.9vw, 14px);
  position: relative;
  margin: 0 var(--frame) var(--frame);
  border-radius: clamp(16px, 1.8vw, 28px);
  min-height: calc(100svh - 60px - var(--frame));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
/* The hero artwork is the B&W DNA loop, covering the card at every aspect
   ratio. It sits slightly oversized so the pointer parallax has room to move
   it without ever exposing an edge. --mx/--my are written on .hero by main.js,
   normalized to -1..1 from the hero's centre. */
.hero__video {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  z-index: 0;
  /* The clip is already near-monochrome; this only guarantees it, and lifts
     the contrast a touch so the helix reads through the scrim. */
  filter: grayscale(1) contrast(1.08) brightness(0.94);
  translate: calc(var(--mx, 0) * -18px) calc(var(--my, 0) * -14px);
  transition: translate 240ms linear;
  will-change: translate;
  /* Poster and first frames are both dark, so a plain fade-in covers the
     hand-off from poster to playback without any flash. */
  opacity: 0;
  animation: hero-video-in 900ms var(--ease-standard, ease) forwards;
}
@keyframes hero-video-in { to { opacity: 1; } }

/* Film grain. The texture is generated by an inline SVG turbulence filter
   rather than an image asset, so it costs nothing to download and stays
   sharp at any density. Drifting it on a stepped animation reads as
   moving grain and helps break up the source video's compression blocking. */
.hero__grain {
  position: absolute;
  inset: -18%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.17;
  mix-blend-mode: screen;
  filter: contrast(2.1) brightness(0.68);
  background-repeat: repeat;
  background-size: 124px 124px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: hto-grain 1.1s steps(1) infinite;
  will-change: transform;
}
@keyframes hto-grain {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-2%, -3%); }
  20%  { transform: translate(-4%, 2%); }
  30%  { transform: translate(2%, -4%); }
  40%  { transform: translate(-1%, 3%); }
  50%  { transform: translate(-3%, 1%); }
  60%  { transform: translate(3%, -1%); }
  70%  { transform: translate(-1%, 2%); }
  80%  { transform: translate(-3%, -2%); }
  90%  { transform: translate(2%, 3%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__grain,
  .framework-stage::before,
  .framework-visual.is-active .visual-flow,
  .framework-visual.is-active .visual-node-pulse { animation: none; }
  /* main.js pauses playback here; the poster frame stays, so the fade-in is
     dropped rather than animated — without this the video would sit at the
     animation's starting opacity of 0. */
  .hero__video { animation: none; opacity: 1; }
}
/* Darkened top and bottom bands so the wordmark and the footer row hold
   contrast over the brightest passes of the helix. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(5 5 5 / 34%) 0%, transparent 52%, rgb(5 5 5 / 22%) 100%),
    linear-gradient(180deg, rgb(5 5 5 / 58%) 0%, rgb(5 5 5 / 20%) 36%, rgb(5 5 5 / 38%) 65%, rgb(5 5 5 / 90%) 100%);
}
/* The hero is a full-height stage: wordmark lockup pinned to the top,
   tick marks floating mid-field, and a three-part footer row at the base.
   There is deliberately no button here — the CTA lives in the nav and in
   the contact card, mirroring the reference direction. */
.hero__stage {
  position: relative;
  z-index: 2;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* The bar no longer overlays the hero, so this only needs breathing room
     inside the card, not clearance for the nav. */
  padding-top: clamp(56px, 7vh, 96px);
  padding-bottom: clamp(28px, 4vh, 52px);
}

/* ---- Top row: wordmark + services ----
   The service list is pulled in from the page edge so its proportions echo
   the reference composition rather than sitting hard against the margin. */
.hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 96px);
  padding-right: clamp(0px, 7vw, 132px);
}

/* Oversized brand lockup. Weight is a variable so the display cut can be
   dialled between the light logo wordmark and a heavier display setting.
   Shrink-wrapped to the widest line so the sub-line right-aligns to the
   end of the wordmark itself. */
.hero__wordmark {
  --wm-weight: 700;
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--wm-weight);
  font-size: clamp(36px, 9.18vw, 142px);
  line-height: 0.9;
  letter-spacing: -0.048em;
  color: #FFFFFF;
}
/* The 0.9 display leading lets the "y" descender fall into the sub-line, so
   hold them apart explicitly. Set in the wordmark's own em so the spacing
   scales with the type at every breakpoint. */
.hero__wm-main { display: block; white-space: nowrap; margin-bottom: 0.32em; }
.hero__wm-sub {
  display: block;
  text-align: right;
  margin-top: 0.04em;
  font-size: 0.34em;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: rgb(255 255 255 / 92%);
}

.hero__services {
  list-style: none;
  margin: clamp(8px, 1.6vw, 26px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(6px, 0.7vw, 11px);
  flex-shrink: 0;
}
.hero__services a {
  font: 500 clamp(13px, 1.12vw, 17px)/1.35 var(--font-sans);
  color: rgb(255 255 255 / 88%);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard);
}
.hero__services a:hover { color: #FFFFFF; }

/* ---- Mid-field tick marks ---- */
.hero__ticks {
  display: flex;
  justify-content: space-between;
  width: min(72%, 900px);
  margin: clamp(20px, 5vh, 64px) 0;
}
.hero__ticks span {
  position: relative;
  width: 13px;
  height: 13px;
  opacity: 0.55;
}
.hero__ticks span::before,
.hero__ticks span::after {
  content: "";
  position: absolute;
  background: rgb(255 255 255 / 90%);
}
.hero__ticks span::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.hero__ticks span::after  { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }

/* ---- Bottom row ---- */
.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: clamp(20px, 3vw, 44px);
}
.hero__tagline {
  margin: 0;
  max-width: 46ch;
  font: 400 clamp(14px, 1.15vw, 17px)/1.5 var(--font-sans);
  color: rgb(255 255 255 / 62%);
}
.hero__tagline strong { font-weight: 600; color: #FFFFFF; }
.hero__copyright {
  margin: 0;
  font: 400 12.5px/1 var(--font-sans);
  color: rgb(255 255 255 / 58%);
  white-space: nowrap;
}

/* Contact card — the hero's only conversion surface */
.hero__card {
  justify-self: end;
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 18px 48px rgb(0 0 0 / 26%);
}
.hero__card-photo {
  width: 92px;
  flex-shrink: 0;
  border-radius: 10px;
}
.hero__card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 14px 6px 4px;
}
.hero__card-role {
  margin: 0;
  font: 500 12px/1.35 var(--font-sans);
  color: var(--ink);
}
.hero__card-role span { display: block; color: var(--muted-2); }
.hero__card-name {
  margin: 2px 0 10px;
  font: 600 17px/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hero__card-cta {
  align-self: flex-start;
}

/* Marquee ticker of service keywords */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  padding: 22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: inline-flex; align-items: center; gap: 0; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font: 500 clamp(20px, 2.4vw, 30px)/1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 0 34px;
  display: inline-flex; align-items: center; gap: 34px;
}
.marquee__item::after { content: "\2217"; color: var(--accent); font-size: 0.7em; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* =================================================================
   Two-column split (Applied AI for Life Sciences, Team)
   ================================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 112px);
  align-items: center;
  padding: var(--section-padding-y) 0;
}
.split__media { position: relative; height: clamp(460px, 44vw, 760px); border-radius: var(--radius-l); overflow: hidden; }
.split__media img { object-position: center 38%; }
.split h2 {
  font: 600 clamp(34px, 4.4vw, 68px)/1.0 var(--font-sans);
  letter-spacing: -0.04em; color: var(--ink); margin: 20px 0 24px; max-width: 15ch;
}
.split h2 .dot { color: var(--accent); }
.split p { font: 400 clamp(16px, 1.2vw, 18px)/1.62 var(--font-sans); color: var(--muted); margin: 0 0 36px; max-width: 540px; }
.split__actions { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }

/* =================================================================
   About us — editorial story with a responsive people/capability wall
   ================================================================= */
.about {
  padding-top: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(28px, 4vw, 64px);
}
.about__panel {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(390px, 1fr);
  min-height: clamp(590px, 47vw, 940px);
  overflow: hidden;
  border-radius: clamp(18px, 2vw, 30px);
  background: var(--paper);
}
.about__story {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-rows: auto minmax(120px, 1fr) auto;
  grid-template-areas:
    "intro intro"
    "tick-one tick-two"
    "join belief";
  column-gap: clamp(32px, 4vw, 64px);
  padding: clamp(54px, 5.2vw, 82px) clamp(42px, 5.2vw, 82px);
}
.about__intro { grid-area: intro; }
.about__logo {
  width: 80px;
  height: 22px;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 18px;
}
.about__intro h2 {
  max-width: 16ch;
  margin: 0;
  font: 600 clamp(42px, 4vw, 60px)/1.1 var(--font-sans);
  letter-spacing: -0.045em;
  color: var(--ink);
}
.about__intro h2 span { color: var(--muted); }
.about__tick {
  position: relative;
  align-self: center;
  width: 24px;
  height: 24px;
  opacity: 0.34;
}
.about__tick::before,
.about__tick::after {
  content: "";
  position: absolute;
  background: var(--ink);
}
.about__tick::before { left: 0; right: 0; top: 50%; height: 1px; }
.about__tick::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.about__tick--one { grid-area: tick-one; }
.about__tick--two { grid-area: tick-two; }
.about__join { grid-area: join; align-self: end; }
.about__join h3 {
  margin: 0 0 18px;
  font: 600 clamp(17px, 1.35vw, 20px)/1.2 var(--font-sans);
  letter-spacing: -0.02em;
}
.about__join p {
  max-width: 33ch;
  margin: 0 0 30px;
  font: 400 clamp(14px, 1.05vw, 16px)/1.5 var(--font-sans);
  color: var(--muted);
}
.about__belief {
  grid-area: belief;
  align-self: end;
  width: min(100%, 350px);
  margin: 0;
  text-indent: 110px;
  font: 500 clamp(18px, 1.32vw, 20px)/1.25 var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--muted);
}
.about__belief strong { color: var(--ink); font-weight: 600; }

.about__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 10px 10px 10px 0;
}
.about-card {
  --about-card-hover-duration: 500ms;
  --about-card-hover-ease: cubic-bezier(0.44, 0, 0.56, 1);
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: clamp(14px, 1.35vw, 21px);
  background: #161617;
  color: #FFFFFF;
  isolation: isolate;
  outline: none;
}
.about-card__visual {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background:
    radial-gradient(circle at 62% 22%, rgb(255 255 255 / 30%) 0%, transparent 27%),
    radial-gradient(circle at 26% 82%, rgb(255 255 255 / 12%) 0%, transparent 34%),
    linear-gradient(145deg, #7d7d7d 0%, #292929 46%, #090909 100%);
  transition:
    filter var(--about-card-hover-duration) var(--about-card-hover-ease),
    transform var(--about-card-hover-duration) var(--about-card-hover-ease);
}
.about-card:nth-child(2) .about-card__visual {
  background:
    repeating-radial-gradient(circle at 85% 18%, transparent 0 28px, rgb(255 255 255 / 12%) 29px 30px),
    linear-gradient(155deg, #111 0%, #474747 56%, #080808 100%);
}
.about-card:nth-child(3) .about-card__visual {
  background:
    linear-gradient(110deg, transparent 0 42%, rgb(255 255 255 / 13%) 43% 44%, transparent 45% 100%),
    radial-gradient(ellipse at 28% 32%, #737373 0%, #252525 48%, #080808 100%);
}
.about-card:nth-child(4) .about-card__visual {
  background:
    repeating-linear-gradient(128deg, transparent 0 34px, rgb(255 255 255 / 8%) 35px 36px),
    radial-gradient(circle at 68% 36%, #686868 0%, #202020 42%, #070707 100%);
}
.about-card__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: none;
  filter: saturate(0.78) contrast(1.04);
}
.about-card:first-child .about-card__visual img {
  transform: translateY(20px) scale(1.42);
  transform-origin: 50% 38%;
}
.about-card__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgb(8 9 11 / 8%), rgb(8 9 11 / 8%)),
    linear-gradient(180deg, rgb(0 0 0 / 32%) 0%, rgb(0 0 0 / 12%) 42%, rgb(0 0 0 / 80%) 100%);
  transition: background var(--about-card-hover-duration) var(--about-card-hover-ease);
}
.about-card__plus {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(0 0 0 / 82%);
}
.about-card__plus::before,
.about-card__plus::after {
  content: "";
  position: absolute;
  background: #FFFFFF;
}
.about-card__plus::before { width: 11px; height: 2px; left: 8.5px; top: 13px; }
.about-card__plus::after { width: 2px; height: 11px; left: 13px; top: 8.5px; }
.about-card__role {
  position: absolute;
  top: 18px;
  right: 18px;
  max-width: calc(100% - 70px);
  margin: 0;
  text-align: right;
  font: 600 clamp(12px, 1vw, 15px)/1.08 var(--font-sans);
  letter-spacing: -0.025em;
}
.about-card__role span {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  color: rgb(255 255 255 / 74%);
}
/* Name and description share one bottom-anchored stack. The description
   expands from a collapsed grid row, so the name is displaced by exactly
   its rendered height — the previous fixed translateY(-82px) could not
   know how tall the description was and overlapped it whenever the copy
   ran past two lines. */
.about-card__text {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
}
.about-card__name {
  margin: 0;
  font: 600 clamp(20px, 1.65vw, 27px)/1.04 var(--font-sans);
  letter-spacing: -0.035em;
}
.about-card__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--about-card-hover-duration) var(--about-card-hover-ease);
}
/* min-height:0 is required — a grid item's automatic minimum size is its
   content, which stops the row resolving to 0fr (and, oddly, stops 1fr
   resolving to the content height too). */
.about-card__reveal-inner { overflow: hidden; min-height: 0; }
.about-card__description {
  margin: 12px 0 0;
  opacity: 0;
  font: 500 clamp(13px, 1vw, 15px)/1.35 var(--font-sans);
  color: rgb(255 255 255 / 82%);
  transition: opacity var(--about-card-hover-duration) var(--about-card-hover-ease);
}
.about-card:hover .about-card__visual,
.about-card:focus-visible .about-card__visual { filter: blur(7px) grayscale(1); transform: scale(1.06); }
.about-card:hover .about-card__shade,
.about-card:focus-visible .about-card__shade { background: rgb(0 0 0 / 60%); }
.about-card:hover .about-card__reveal,
.about-card:focus-visible .about-card__reveal { grid-template-rows: 1fr; }
.about-card:hover .about-card__description,
.about-card:focus-visible .about-card__description { opacity: 1; }

@media (max-width: 1150px) {
  .about__panel { display: block; min-height: 0; }
  .about__story {
    min-height: 600px;
    padding: clamp(46px, 6.5vw, 68px);
  }
  .about__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto;
    padding: 0 12px 12px;
  }
  .about-card { aspect-ratio: 0.64; }
}

/* Four across gets too narrow to read below this, but dropping straight to
   one column is what made the section enormous. Step through two first. */
@media (max-width: 900px) {
  .about__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-card { aspect-ratio: 0.82; }
  /* Full width at this size makes 4:3 very tall — 660px wide became 495px
     tall. Widescreen keeps the same crop reading without the height. */
  .media-video--featured { aspect-ratio: 16 / 9; }
}

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

/* Single column. A portrait aspect-ratio here is what blew the section up:
   the wider the column got, the taller each card became (680px wide meant
   971px tall). The reference holds a fixed card height and lets the card
   grow wider instead, so do the same. */
@media (max-width: 620px) {
  .about__cards { grid-template-columns: 1fr; }
  .about-card { aspect-ratio: auto; height: clamp(400px, 118vw, 470px); }
}

@media (max-width: 700px) {
  .about { padding-left: 0; padding-right: 0; }
  .about__panel { border-radius: 0; }
  .about__story {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "intro"
      "tick-one"
      "join"
      "tick-two"
      "belief";
    gap: 0;
    padding: 52px 30px 42px;
  }
  .about__intro h2 { font-size: clamp(32px, 9vw, 40px); }
  .about__logo { height: 20px; margin-bottom: 18px; }
  .about__tick { margin: 42px 0 34px; }
  .about__join p { max-width: 31ch; }
  .about__belief {
    width: min(100%, 319px);
    text-indent: 64px;
    font-size: 18px;
  }
  .about__cards {
    gap: 6px;
    padding: 0 10px 10px;
  }
  .about-card { border-radius: 16px; }
  .about-card__role { font-size: 14px; }
  .about-card__name { font-size: 27px; }
  .about-card__description { font-size: 15px; }
  /* No hover on touch, so the bios would otherwise be unreachable here —
     show them by default and darken the shade enough to keep them legible. */
  .about-card__reveal { grid-template-rows: 1fr; }
  .about-card__description { opacity: 1; }
  .about-card__shade {
    background: linear-gradient(180deg, rgb(8 9 11 / 38%) 0%, rgb(8 9 11 / 28%) 48%, rgb(0 0 0 / 72%) 100%);
  }
}

/* =================================================================
   Membership (Applied AI for Life Sciences)
   Asymmetric two-row layout after the reference's "why choose us".
   The title begins on the second track; the body deliberately leaves that
   track open and begins its copy on the third.
   ================================================================= */
.membership {
  --membership-gutter: clamp(20px, 2.5vw, 36px);
  background: var(--paper-2);
  padding: var(--section-padding-y) var(--membership-gutter);
}
.membership__head {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 120px;
}
.membership__body {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.membership__head .microlabel {
  grid-column: 1;
  align-self: start;
  justify-self: start;
  margin: 0;
}

/* Two-tone headline: the name stays solid, the qualifying line drops back
   so the pair reads as one sentence with a clear hierarchy. */
.membership__title {
  grid-column: 2 / -1;
  margin: 20px 0 0;
  font: 600 clamp(28px, 3.4vw, 52px)/1.14 var(--font-sans);
  letter-spacing: -0.035em;
  color: var(--ink);
  max-width: 830px;
}
.membership__title-soft {
  display: block;
  color: rgb(11 11 12 / 46%);
}

/* The media and content share a grid row, keeping their bottom edges aligned. */
.membership__media {
  grid-column: 1;
  position: relative;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  /* The grain child blends (mix-blend-mode: screen) and is deliberately
     oversized, and a blended child paints against the backdrop outside the
     parent's border-radius clip. Isolating the stacking context here keeps
     the blend inside the rounded box, so the corners actually curve. */
  isolation: isolate;
}
.membership__media img {
  z-index: 0;
  object-position: center 38%;
  transition: filter 700ms var(--ease-out), transform 900ms var(--ease-out);
  will-change: filter, transform;
}
.membership__media-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 46%, rgb(0 0 0 / 12%) 66%, rgb(0 0 0 / 54%) 100%),
    rgb(10 10 10 / 20%);
  transition: background 700ms var(--ease-out);
}
.membership__media-grain {
  position: absolute;
  inset: -22%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.1;
  mix-blend-mode: screen;
  background-repeat: repeat;
  background-size: 124px 124px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: hto-grain 1.1s steps(1) infinite;
  transition: opacity 500ms var(--ease-standard);
}
.membership__media-plus {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 4;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  pointer-events: none;
}
.membership__media-plus::before,
.membership__media-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 1.5px;
  border-radius: 1px;
  background: #FFFFFF;
  transform: translate(-50%, -50%);
}
.membership__media-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.membership__media-content {
  position: absolute;
  left: clamp(22px, 2.4vw, 36px);
  right: clamp(18px, 2vw, 30px);
  bottom: clamp(24px, 2.7vw, 40px);
  z-index: 3;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 520ms var(--ease-standard), transform 650ms var(--ease-out);
}
.membership__media-content p {
  max-width: 25ch;
  margin: 0 0 24px;
  font: 500 16px/1.4 var(--font-sans);
  letter-spacing: -0.025em;
  color: #FFFFFF;
}
.membership__media-cta {
  width: fit-content;
}
.membership__media:hover img,
.membership__media:focus-within img { filter: blur(5px); transform: scale(1.1); }
.membership__media:hover .membership__media-grain,
.membership__media:focus-within .membership__media-grain { opacity: 0.2; }
.membership__media:hover .membership__media-content,
.membership__media:focus-within .membership__media-content { opacity: 1; transform: none; }
.membership__media-cta:hover,
.membership__media-cta:focus-visible { color: #FFFFFF; }
.membership__media-cta:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.membership__content { grid-column: 3 / -1; }

.membership__lead {
  margin: 0 0 clamp(44px, 5.55vw, 80px);
  max-width: 550px;
  font: 500 clamp(17px, 1.4vw, 20px)/1.4 var(--font-sans);
  text-align: left;
  text-indent: clamp(28px, 6.25vw, 90px);
  color: rgb(11 11 12 / 52%);
}
.membership__lead strong { font-weight: 600; color: var(--ink); }

.membership__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 0.8vw, 12px);
}
/* White cards on the warm-grey section surface mirror the reference's
   quiet, editorial contrast. */
.mcard {
  background: var(--paper);
  border-radius: 18px;
  padding: clamp(20px, 2vw, 30px);
}
.mcard__no {
  display: block;
  margin-bottom: clamp(28px, 3vw, 52px);
  font: 500 13px/1 var(--font-sans);
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.mcard__title {
  margin: 0 0 8px;
  font: 600 clamp(16px, 1.35vw, 19px)/1.25 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mcard__body {
  margin: 0;
  font: 400 clamp(14px, 1.05vw, 15.5px)/1.55 var(--font-sans);
  color: var(--muted);
}

.membership__actions { margin-top: clamp(26px, 2.6vw, 38px); }

@media (hover: none) {
  .membership__media-shade {
    background:
      linear-gradient(180deg, transparent 42%, rgb(0 0 0 / 14%) 62%, rgb(0 0 0 / 66%) 100%),
      rgb(10 10 10 / 16%);
  }
  .membership__media-content { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .membership__media-grain { animation: none; }
  .membership__media img,
  .membership__media-content { transition: none; }
}

/* =================================================================
   Newsletter band
   ================================================================= */
.newsletter {
  background: var(--ink);
  color: #FFFFFF;
  border-radius: var(--radius-l);
  padding: 84px 80px;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 64px;
  align-items: center;
}
.newsletter h2 {
  font: 600 clamp(26px, 3vw, 40px)/1.1 var(--font-sans);
  letter-spacing: -0.03em; color: #FFFFFF; margin: 0 0 18px; max-width: 15ch;
}
.newsletter p { font: 400 16px/1.6 var(--font-sans); color: rgb(255 255 255 / 66%); margin: 0; max-width: 460px; }
.newsletter form { display: flex; flex-direction: column; gap: 12px; }
.field {
  padding: 16px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font: 400 15px/1.2 var(--font-sans);
  color: var(--ink);
  background: #FFFFFF;
  outline: none;
  width: 100%;
}
.field:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(11 11 12 / 14%); }
.newsletter .field { background: rgb(255 255 255 / 8%); border-color: var(--line-inverse); color: #FFFFFF; }
.newsletter .field::placeholder { color: rgb(255 255 255 / 50%); }

/* =================================================================
   Consulting services — dark accordion (Fabrica-style)
   ================================================================= */
/* Inset rounded panel — matches the reference exactly (confirmed on the
   live site: a 6px inset with a 25px radius at 1440 wide), and echoes the
   same treatment already used on .hero rather than going full-bleed. */
.section-dark {
  position: relative;
  isolation: isolate;
  margin: 0 clamp(6px, 0.9vw, 14px);
  border-radius: clamp(16px, 1.8vw, 28px);
  background: var(--ink);
  color: #FFFFFF;
  overflow: hidden;
}
/* Stable tonal depth plus resolution-independent grain. Unlike a cover image,
   neither layer changes scale when an accordion row opens or closes. */
.section-dark::before,
.section-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.section-dark > * { position: relative; z-index: 1; }
.section-dark::before {
  background:
    radial-gradient(ellipse at 16% 82%, rgb(255 255 255 / 9%) 0%, transparent 46%),
    linear-gradient(135deg, #050506 0%, #121216 48%, #070708 100%);
}
.section-dark::after {
  inset: -12%;
  opacity: 0.15;
  mix-blend-mode: overlay;
  background-repeat: repeat;
  background-size: 170px 170px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* padding-top/bottom only — this element is also .wrap, and a shorthand
   "padding: T 0 B" here would zero out .wrap's own left/right page-margin
   padding (equal specificity, this rule wins on source order), which is
   exactly what was happening: content sat flush against the panel edge. */
.svc-section { padding-top: clamp(88px, 9vw, 148px); padding-bottom: clamp(64px, 7vw, 112px); }

.svc-eyebrow { margin: 0 0 clamp(20px, 3vw, 44px); }

.svc-title {
  text-align: center;
  font: 600 clamp(60px, 12.5vw, 208px)/0.9 var(--font-sans);
  letter-spacing: -0.045em; color: #FFFFFF;
  margin: 0 0 clamp(44px, 6vw, 92px);
}
/* Inherits white — this title sits on the dark panel, so an ink dot
   would be invisible against it. */
.svc-title .dot { color: inherit; }
.svc-count { font-size: 0.15em; vertical-align: super; color: rgb(255 255 255 / 45%); font-weight: 500; letter-spacing: 0; margin-left: 6px; }

.svc-list { border-bottom: 1px solid rgb(255 255 255 / 14%); }
.svc { border-top: 1px solid rgb(255 255 255 / 14%); }
.svc__head {
  display: grid; grid-template-columns: 22% 1fr 46px; align-items: center; gap: 24px;
  width: 100%; padding: clamp(24px, 2.4vw, 40px) 0;
  background: none; border: 0; cursor: pointer; text-align: left; color: #FFFFFF; font-family: var(--font-sans);
}
.svc__head:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(255 255 255 / 40%); border-radius: 4px; }
.svc__no { font: 500 14px/1 var(--font-sans); color: rgb(255 255 255 / 45%); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.svc__title { font: 600 clamp(21px, 2.2vw, 34px)/1.1 var(--font-sans); letter-spacing: -0.025em; color: #FFFFFF; transition: color var(--duration-fast) var(--ease-standard); }
.svc:not(.is-open) .svc__head:hover .svc__title { color: rgb(255 255 255 / 60%); }
.svc__toggle { justify-self: end; position: relative; width: 46px; height: 46px; border: 1px solid rgb(255 255 255 / 24%); border-radius: 50%; transition: border-color var(--duration-fast) var(--ease-standard); }
.svc__head:hover .svc__toggle { border-color: rgb(255 255 255 / 55%); }
.svc__toggle::before, .svc__toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 1.5px; background: #FFFFFF; transform: translate(-50%, -50%); transition: transform var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-out); }
.svc__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.svc.is-open .svc__toggle::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }

.svc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s var(--ease-out); }
.svc.is-open .svc__panel { grid-template-rows: 1fr; }
.svc__panel-wrap { overflow: hidden; }
.svc__panel-inner {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 4vw, 72px);
  padding: 2px 0 clamp(34px, 3.2vw, 56px);
  padding-left: calc(22% + 24px); padding-right: calc(46px + 24px);
}
.svc__desc p { font: 500 clamp(15px, 1.15vw, 17px)/1.4 var(--font-sans); color: rgb(255 255 255 / 88%); margin: 0; max-width: 52ch; }
.svc__cats-label { font: 600 11px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 40%); margin-bottom: 16px; }
.svc__pills { display: flex; flex-wrap: wrap; gap: 10px; }
/* Solid white/black, matching the reference's category pills exactly
   (confirmed via computed style on the live site) rather than an outline. */
.pill { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; background: #FFFFFF; font: 400 13px/1 var(--font-sans); color: var(--ink); white-space: nowrap; }

.svc-cta { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; padding-top: clamp(40px, 4vw, 64px); }

/* =================================================================
   HTO Applied AI Method — interactive process runway
   ================================================================= */
.framework-shell { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); }
.framework-head {
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) minmax(0, 2.2fr) auto;
  gap: clamp(26px, 4vw, 72px);
  align-items: start;
  margin-bottom: clamp(54px, 6.5vw, 96px);
}
.framework-head .microlabel { margin: 10px 0 0; }
.framework-head__main { max-width: 930px; }
.framework-title {
  margin: 0;
  font: 600 clamp(50px, 7vw, 108px)/0.92 var(--font-sans);
  letter-spacing: -0.055em;
  color: var(--ink);
}
.framework-title span { display: block; color: rgb(11 11 12 / 34%); }
.framework-lead {
  max-width: 660px;
  margin: clamp(28px, 3vw, 46px) 0 0;
  font: 400 clamp(17px, 1.45vw, 21px)/1.5 var(--font-sans);
  color: var(--muted);
}
.framework-head .section-head__meta { margin-top: 12px; }

.framework-runway {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(7px, 0.75vw, 12px);
  margin-bottom: clamp(12px, 1.2vw, 18px);
}
.framework-step {
  appearance: none;
  min-width: 0;
  min-height: 118px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
  border: 0;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background 420ms var(--ease-out), color 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.framework-step:hover { transform: translateY(-3px); }
.framework-step:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.framework-step.is-active { background: var(--ink); color: #FFFFFF; transform: none; }
.framework-step__num {
  margin: 0;
  font: 500 clamp(24px, 2.1vw, 34px)/1 var(--font-sans);
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  opacity: 0.34;
}
.framework-step.is-active .framework-step__num { opacity: 0.72; }
.framework-step__label {
  font: 600 clamp(13px, 1vw, 16px)/1.15 var(--font-sans);
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.framework-stage {
  position: relative;
  isolation: isolate;
  min-height: clamp(390px, 34vw, 520px);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(310px, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(34px, 5vw, 90px);
  align-items: center;
  padding: clamp(40px, 5vw, 76px);
  border-radius: clamp(18px, 1.8vw, 28px);
  background:
    radial-gradient(ellipse at 76% 44%, rgb(255 255 255 / 8%) 0%, transparent 42%),
    linear-gradient(145deg, #141414 0%, #080808 100%);
  color: #FFFFFF;
  transition: opacity 220ms var(--ease-standard), transform 320ms var(--ease-out);
}
.framework-stage::before {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: -1;
  opacity: 0.13;
  mix-blend-mode: screen;
  background-size: 145px 145px;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='145' height='145'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: hto-grain 1.15s steps(1) infinite;
}
.framework-stage.is-updating { opacity: 0.62; transform: translateY(4px); }
.framework-stage__copy { max-width: 520px; }
.framework-stage__eyebrow {
  margin: 0 0 clamp(24px, 2.8vw, 42px);
}
.framework-stage__copy h3 {
  margin: 0 0 22px;
  font: 600 clamp(30px, 3.5vw, 54px)/0.98 var(--font-sans);
  letter-spacing: -0.045em;
  color: #FFFFFF;
}
.framework-stage__summary {
  max-width: 48ch;
  margin: 0;
  font: 400 clamp(15px, 1.2vw, 18px)/1.55 var(--font-sans);
  color: rgb(255 255 255 / 68%);
}
.framework-stage__output {
  margin-top: clamp(30px, 4vw, 54px);
  padding-top: 18px;
  border-top: 1px solid rgb(255 255 255 / 16%);
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 16px;
  align-items: baseline;
}
.framework-stage__output span {
  font: 600 10px/1.2 var(--font-sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 44%);
}
.framework-stage__output strong { font: 500 14px/1.4 var(--font-sans); color: #FFFFFF; }

.framework-visuals {
  position: relative;
  width: 100%;
  min-height: 320px;
  aspect-ratio: 31 / 18;
  color: rgb(255 255 255 / 48%);
}
.framework-visual {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 420ms var(--ease-standard), transform 620ms var(--ease-out);
  pointer-events: none;
}
.framework-visual.is-active { opacity: 1; transform: none; }
.framework-visual svg { width: 100%; height: 100%; overflow: visible; }
.framework-visual circle,
.framework-visual path,
.framework-visual rect {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.visual-muted { fill: none; stroke: rgb(255 255 255 / 13%); stroke-width: 1; }
.visual-line { fill: rgb(255 255 255 / 1.5%); stroke: rgb(255 255 255 / 44%); stroke-width: 1.15; }
.visual-strong { fill: rgb(255 255 255 / 2.5%); stroke: rgb(255 255 255 / 72%); stroke-width: 1.25; }
.visual-node { fill: #0b0b0b; stroke: rgb(255 255 255 / 50%); stroke-width: 1.1; }
.visual-fill { fill: #FFFFFF; stroke: none; }
.visual-dash { stroke-dasharray: 4 7; }
.visual-accent {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1.7;
  filter: drop-shadow(0 0 7px rgb(255 255 255 / 32%));
}
.visual-flow { stroke-dasharray: 8 7; }
.visual-label {
  fill: rgb(255 255 255 / 44%);
  stroke: none;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.16em;
}
.visual-value { fill: #FFFFFF; stroke: none; font-family: var(--font-sans); }
.visual-value text:first-child { font-size: 28px; font-weight: 500; letter-spacing: -0.04em; }
.visual-value text:last-child { font-size: 9px; font-weight: 600; letter-spacing: 0.18em; fill: rgb(255 255 255 / 44%); }
.visual-node-pulse { fill: none; stroke: #FFFFFF; stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.framework-visual.is-active .visual-flow { animation: framework-flow 1.8s linear infinite; }
.framework-visual.is-active .visual-node-pulse { animation: framework-pulse 1.8s var(--ease-out) infinite; }
@keyframes framework-flow { to { stroke-dashoffset: -30; } }
@keyframes framework-pulse {
  0%, 100% { opacity: 0.22; transform: scale(0.72); }
  55% { opacity: 0.72; transform: scale(1.15); }
}

.framework-actions {
  margin-top: clamp(34px, 4vw, 58px);
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.framework-actions > span { font: 400 13px/1.4 var(--font-sans); color: var(--muted-2); }

/* =================================================================
   Use cases — Fabrica-inspired project grid
   ================================================================= */
.usecases { background: var(--paper-2); }
.usecases-shell { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); }
.usecases-head {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  align-items: start;
  margin-bottom: clamp(72px, 7vw, 96px);
}
.usecases-head .microlabel { grid-column: 1; margin: 9px 0 0; }
.usecases-head__title { grid-column: 2 / span 2; min-width: 0; }
.usecases-head__title h2 {
  margin: 0;
  font: 600 clamp(76px, 9.3vw, 144px) / 0.92 var(--font-sans);
  letter-spacing: -0.06em;
  color: var(--ink);
  white-space: nowrap;
}
.usecases-head__lead {
  grid-column: 4;
  margin: 7px 0 0;
  max-width: 29ch;
  font: 500 16px / 1.4 var(--font-sans);
  letter-spacing: -0.04em;
  color: var(--ink);
}
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 52px;
}
.usecase-project {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  color: var(--ink);
  text-decoration: none;
}
.usecase-project:hover { color: var(--ink); }
.usecase-project:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 18px; }
.usecase-project__head {
  height: 58px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: #FFFFFF;
  border-radius: 18px;
}
.usecase-project__heading { display: flex; align-items: baseline; gap: 18px; min-width: 0; }
.usecase-project__heading h3 {
  margin: 0;
  overflow: hidden;
  font: 600 18px / 1.2 var(--font-sans);
  letter-spacing: -0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usecase-project__heading > span {
  flex: 0 0 auto;
  font: 500 12px / 1.3 var(--font-sans);
  letter-spacing: -0.04em;
  opacity: 0.6;
}
.usecase-project__dots { display: flex; flex: 0 0 auto; align-items: center; gap: 3px; }
.usecase-project__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5e5e5;
  transition: background-color 280ms ease;
}
.usecase-project:hover .usecase-project__dots i:nth-child(1),
.usecase-project:focus-visible .usecase-project__dots i:nth-child(1) { background: #fd5f59; }
.usecase-project:hover .usecase-project__dots i:nth-child(2),
.usecase-project:focus-visible .usecase-project__dots i:nth-child(2) { background: #ffbb2c; }
.usecase-project:hover .usecase-project__dots i:nth-child(3),
.usecase-project:focus-visible .usecase-project__dots i:nth-child(3) { background: #25c93d; }
.usecase-project__media {
  position: relative;
  aspect-ratio: 602 / 441;
  overflow: hidden;
  border-radius: 18px;
  background: var(--paper-3);
}
.usecase-project__media.photo-slot img {
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 16px;
  transition: transform 700ms var(--ease-out), filter 700ms var(--ease-out);
}
.usecase-project__scrim {
  position: absolute;
  z-index: 1;
  inset: 4px;
  border-radius: 16px;
  background: rgb(0 0 0 / 15%);
  pointer-events: none;
  transition: background-color 700ms var(--ease-out);
}
.usecase-project__mark {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #FFFFFF;
  font: 600 19px / 1 var(--font-sans);
  letter-spacing: -0.04em;
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  transition: transform 700ms var(--ease-out);
}
.usecase-project__mark b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font: 600 12px / 1 var(--font-sans);
  letter-spacing: -0.03em;
}
.usecase-project:hover .usecase-project__media img,
.usecase-project:focus-visible .usecase-project__media img { transform: scale(1.13); filter: blur(7px); }
.usecase-project:hover .usecase-project__scrim,
.usecase-project:focus-visible .usecase-project__scrim { background: rgb(0 0 0 / 20%); }
.usecase-project:hover .usecase-project__mark,
.usecase-project:focus-visible .usecase-project__mark { transform: translate(-50%, -50%) scale(0.8); }
@media (prefers-reduced-motion: reduce) {
  .usecase-project__media.photo-slot img,
  .usecase-project__scrim,
  .usecase-project__mark,
  .usecase-project__dots i { transition: none; }
}

/* =================================================================
   Latest content
   ================================================================= */
.insights-editorial {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}
.insights-header { margin-bottom: clamp(52px, 6vw, 82px); }
.insights-header__main {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(270px, 0.72fr);
  gap: clamp(48px, 8vw, 116px);
  align-items: end;
  margin-top: clamp(40px, 5.2vw, 72px);
}
.insights-header h2 {
  max-width: 860px;
  margin: 0;
  color: var(--ink);
  font: 600 clamp(42px, 5vw, 64px) / 1.02 var(--font-sans);
  letter-spacing: -0.06em;
}
.insights-header h2 span { color: var(--muted-2); }
.insights-header__aside { padding-bottom: 4px; }
.insights-header__aside p {
  max-width: 390px;
  margin: 0 0 28px;
  color: var(--muted);
  font: 400 16px / 1.55 var(--font-sans);
  letter-spacing: -0.018em;
}
.newsletter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.newsletter-card {
  position: relative;
  min-height: 550px;
  overflow: hidden;
  border-radius: 18px;
  color: var(--ink);
  background: var(--paper);
  text-decoration: none;
  isolation: isolate;
}
.newsletter-card--featured { grid-column: span 2; color: #FFFFFF; }
.newsletter-card--featured:hover,
.newsletter-card--featured:focus-visible { color: #FFFFFF; }
.newsletter-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.newsletter-card--issue .newsletter-card__media {
  inset: 10px auto auto 10px;
  width: 110px;
  height: 110px;
  border-radius: 10px;
  transition: width 700ms var(--ease-out), height 700ms var(--ease-out);
}
.newsletter-card__media.photo-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 850ms var(--ease-out), filter 700ms var(--ease-out);
}
.newsletter-card--issue .newsletter-card__media.photo-slot img { object-position: center; transform: none; }
.newsletter-card--featured .newsletter-card__media.photo-slot img { object-position: center; }
.newsletter-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(8 10 12 / 10%) 24%, rgb(8 10 12 / 75%) 100%);
  transition: background 700ms var(--ease-out);
}
.newsletter-card__plus {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 600ms var(--ease-out), background var(--duration-fast) var(--ease-standard);
}
.newsletter-card--issue .newsletter-card__plus {
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
}
.newsletter-card--issue .newsletter-card__plus::before,
.newsletter-card--issue .newsletter-card__plus::after { width: 8px; height: 1.25px; }
.newsletter-card--featured .newsletter-card__plus { background: #FFFFFF; }
.newsletter-card__plus::before,
.newsletter-card__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  border-radius: 2px;
  background: #FFFFFF;
  transform: translate(-50%, -50%);
}
.newsletter-card__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.newsletter-card--featured .newsletter-card__plus::before,
.newsletter-card--featured .newsletter-card__plus::after { background: var(--ink); }
.newsletter-card__body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px;
}
.newsletter-card--issue .newsletter-card__body {
  position: absolute;
  inset: 0;
  height: 100%;
  justify-content: flex-end;
  padding: 0 30px 30px;
}
.newsletter-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--muted-2);
  font: 500 12px / 1.2 var(--font-sans);
  letter-spacing: 0.01em;
}
.newsletter-card--issue .newsletter-card__meta {
  display: block;
  margin-bottom: 25px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: -0.04em;
  transition: transform 700ms var(--ease-out);
}
.newsletter-card--issue .newsletter-card__body > div {
  transition: transform 700ms var(--ease-out);
}
.newsletter-card--featured .newsletter-card__meta { color: rgb(255 255 255 / 72%); }
.newsletter-card--featured .newsletter-card__meta { padding-right: 42px; }
.newsletter-card__meta span { text-align: right; }
.newsletter-card h3 {
  margin: 0;
  max-width: 440px;
  font: 600 clamp(24px, 2.1vw, 32px) / 1.06 var(--font-sans);
  letter-spacing: -0.045em;
}
.newsletter-card--issue h3 {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.04em;
}
.newsletter-card__summary {
  max-width: 440px;
  margin: 14px 0 0;
  color: var(--muted);
  font: 400 14px / 1.5 var(--font-sans);
  letter-spacing: -0.012em;
}
.newsletter-card--issue .newsletter-card__summary {
  margin-top: 10px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.04em;
}
.newsletter-card--featured .newsletter-card__summary { color: rgb(255 255 255 / 76%); }
.newsletter-card--issue:hover .newsletter-card__media,
.newsletter-card--issue:focus-visible .newsletter-card__media { width: 170px; height: 170px; }
.newsletter-card--issue:hover .newsletter-card__meta,
.newsletter-card--issue:focus-visible .newsletter-card__meta { transform: translateY(13px); }
.newsletter-card--issue:hover .newsletter-card__body > div,
.newsletter-card--issue:focus-visible .newsletter-card__body > div { transform: translateY(4px); }
.newsletter-card--featured:hover .newsletter-card__media img,
.newsletter-card--featured:focus-visible .newsletter-card__media img { transform: scale(1.1); filter: blur(4px); }
.newsletter-card:hover .newsletter-card__plus,
.newsletter-card:focus-visible .newsletter-card__plus { transform: rotate(90deg); }
.newsletter-card--featured:hover .newsletter-card__scrim,
.newsletter-card--featured:focus-visible .newsletter-card__scrim {
  background: linear-gradient(180deg, rgb(8 10 12 / 17%) 20%, rgb(8 10 12 / 83%) 100%);
}
.latest-media {
  margin-top: clamp(96px, 11vw, 156px);
  padding-top: clamp(28px, 3vw, 42px);
  border-top: 1px solid var(--line);
}
.media-header { margin-bottom: clamp(52px, 6vw, 82px); }
.media-header__main {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(270px, 0.72fr);
  gap: clamp(48px, 8vw, 116px);
  align-items: end;
  margin-top: clamp(36px, 4.6vw, 64px);
}
.media-header h2 {
  max-width: 760px;
  margin: 0;
  color: var(--ink);
  font: 600 clamp(42px, 5vw, 64px) / 1.02 var(--font-sans);
  letter-spacing: -0.06em;
}
.media-header h2 span { color: var(--muted-2); }
.media-header__aside { padding-bottom: 4px; }
.media-header__aside p {
  max-width: 390px;
  margin: 0 0 28px;
  color: var(--muted);
  font: 400 16px / 1.55 var(--font-sans);
  letter-spacing: -0.018em;
}
.media-studio {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 4px;
  align-items: stretch;
}
.media-videos { min-width: 0; }
.media-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 4px;
}
.media-video {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: var(--ink);
  color: #FFFFFF;
  text-decoration: none;
  isolation: isolate;
}
.media-video:hover,
.media-video:focus-visible { color: #FFFFFF; }
.media-video--featured { aspect-ratio: 2 / 1; }
.media-video--supporting { aspect-ratio: 16 / 9; }
.media-video__image,
.media-video__scrim { position: absolute; inset: 0; }
.media-video__image { z-index: 0; }
.media-video__image.photo-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.02);
  transform: scale(1.01);
  transition: transform 850ms var(--ease-out), filter 700ms var(--ease-out);
}
.media-video--featured .media-video__image.photo-slot img { object-position: center 42%; }
.media-video__scrim {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(5 6 7 / 2%) 35%, rgb(5 6 7 / 76%) 100%);
  transition: background 700ms var(--ease-out);
}
.media-video__copy {
  position: absolute;
  z-index: 3;
  left: clamp(20px, 2.2vw, 32px);
  right: clamp(20px, 2.2vw, 32px);
  bottom: clamp(18px, 2vw, 28px);
}
.media-video__copy h3 {
  max-width: 620px;
  margin: 0;
  font: 600 clamp(19px, 2.2vw, 31px) / 1.08 var(--font-sans);
  letter-spacing: -0.04em;
}
.media-video--supporting .media-video__copy h3 { font-size: clamp(17px, 1.6vw, 22px); }
.media-video__copy p {
  display: flex;
  gap: 12px;
  margin: 8px 0 0;
  color: rgb(255 255 255 / 76%);
  font: 500 12px / 1 var(--font-sans);
}
.media-video--supporting .media-video__copy p { margin-top: 6px; }
.media-play {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 50%;
  background: rgb(11 11 12 / 88%);
  transform: translate(-50%, -50%);
  transition: transform 500ms var(--ease-out), background var(--duration-fast) var(--ease-standard);
}
.media-play--large { width: 64px; height: 64px; }
.media-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #FFFFFF;
  transform: translate(-38%, -50%);
}
.media-video:hover .media-video__image img,
.media-video:focus-visible .media-video__image img { transform: scale(1.065); filter: saturate(0.98) contrast(1.04); }
.media-video:hover .media-video__scrim,
.media-video:focus-visible .media-video__scrim { background: linear-gradient(180deg, rgb(5 6 7 / 10%) 28%, rgb(5 6 7 / 82%) 100%); }
.media-video:hover .media-play,
.media-video:focus-visible .media-play { transform: translate(-50%, -50%) scale(0.9); background: var(--ink); }

.media-podcasts {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--paper);
  padding: clamp(26px, 2.8vw, 40px);
}
.media-podcasts > h3 {
  margin: 0 0 clamp(18px, 2vw, 28px);
  font: 600 clamp(22px, 2vw, 28px) / 1.12 var(--font-sans);
  letter-spacing: -0.04em;
  color: var(--ink);
}
.media-podcast-list { flex: 1; }
.media-podcast {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 40px;
  gap: 18px;
  align-items: center;
  min-height: 132px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.media-podcast:first-child { border-top: 1px solid var(--line); }
.media-podcast:hover,
.media-podcast:focus-visible { color: var(--ink); }
.media-podcast__cover {
  width: 92px;
  height: 92px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--paper-3);
}
.media-podcast__cover.photo-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.05);
  transition: transform 700ms var(--ease-out);
}
.media-podcast__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.media-podcast__episode,
.media-podcast__info > span:last-child {
  color: var(--muted-2);
  font: 500 12px / 1.2 var(--font-sans);
}
.media-podcast__info strong {
  font: 600 clamp(15px, 1.35vw, 18px) / 1.2 var(--font-sans);
  letter-spacing: -0.025em;
}
.media-play--small {
  position: relative;
  top: auto;
  left: auto;
  width: 38px;
  height: 38px;
  border: 0;
  transform: none;
}
.media-play--small::after {
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-left-width: 8px;
}
.media-podcast:hover .media-podcast__cover img,
.media-podcast:focus-visible .media-podcast__cover img { transform: scale(1.08); }
.media-podcast:hover .media-play--small,
.media-podcast:focus-visible .media-play--small { transform: scale(0.9); background: var(--accent-hover); }
.media-podcasts__link { align-self: flex-start; margin-top: 28px; }
@media (prefers-reduced-motion: reduce) {
  .newsletter-card__media.photo-slot img,
  .newsletter-card--issue .newsletter-card__media,
  .newsletter-card--issue .newsletter-card__meta,
  .newsletter-card--issue .newsletter-card__body > div,
  .newsletter-card__plus,
  .newsletter-card__scrim,
  .media-video__image.photo-slot img,
  .media-video__scrim,
  .media-play,
  .media-podcast__cover.photo-slot img { transition: none; }
}

/* =================================================================
   Contact — dark inset panel, form card left, headline right.
   Proportions taken from the reference's "Let's talk" section measured
   at 1440 wide: 6px panel inset, 25px radius, a 471px form card against
   a 682px right column, 18px card radius, 58px-tall fields and pill.
   ================================================================= */
.contact {
  position: relative;
  margin: 0 clamp(6px, 0.9vw, 14px) clamp(6px, 0.9vw, 14px);
  border-radius: clamp(16px, 1.8vw, 28px);
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
/* Background layer — the photo slot now, a <video class="contact__video">
   later. Both fill the panel identically. */
.contact__media,
.contact__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.contact__media { opacity: 0.5; }
.contact__video { object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(0.82); }
.contact__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(11 11 12 / 72%) 0%, rgb(11 11 12 / 55%) 40%, rgb(11 11 12 / 78%) 100%);
}
/* Same generated grain as the hero, so the two dark panels sit in the
   same visual family. */
.contact__grain {
  position: absolute;
  inset: -18%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.13;
  mix-blend-mode: overlay;
  background-repeat: repeat;
  background-size: 170px 170px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: hto-grain 1.1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) { .contact__grain { animation: none; } }

.contact__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 471fr) minmax(0, 682fr);
  gap: clamp(32px, 15vw, 215px);
  align-items: start;
  padding: clamp(48px, 6.5vw, 96px) clamp(20px, 2.1vw, 30px);
}

/* ---- Left: form card ---- */
.contact-form {
  background: var(--paper);
  border-radius: 18px;
  padding: clamp(24px, 2.8vw, 40px);
}
.contact-form__brand {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  font: 600 15px/1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.contact-form__title {
  margin: 0 0 clamp(20px, 2.2vw, 30px);
  font: 600 clamp(20px, 1.9vw, 26px)/1.2 var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.contact-form__title .muted { color: var(--muted-2); }

.field-group { margin-bottom: 16px; }
.field-label {
  display: block;
  margin-bottom: 7px;
  font: 500 12px/1 var(--font-sans);
  color: var(--ink);
}
.field-box {
  background: var(--paper-3);
  border-radius: 10px;
  padding: 12px 12px 12px 16px;
  min-height: 58px;
  display: flex;
  align-items: center;
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}
.field-box--area { align-items: flex-start; min-height: 104px; }
.field-box:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.field-input {
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  font: 400 16px/1.4 var(--font-sans);
  color: var(--ink);
  resize: vertical;
}
.field-input:focus { outline: none; }
.field-input::placeholder { color: var(--muted-2); }

.contact-form__submit {
  width: 100%;
  min-height: 58px;
  margin-top: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #FFFFFF;
  font: 600 16px/1 var(--font-sans);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.contact-form__submit:hover { background: var(--accent-hover); }
.contact-form__note {
  margin: 14px 0 0;
  font: 400 12px/1.5 var(--font-sans);
  color: var(--muted-2);
}
.contact-form__note.is-error { color: var(--ink); font-weight: 500; }

/* ---- Right: headline, promises, card ---- */
.contact__title {
  margin: 0 0 clamp(24px, 3vw, 44px);
  font: 600 clamp(48px, 10vw, 144px)/0.92 var(--font-sans);
  letter-spacing: -0.06em;
  color: #FFFFFF;
}
.contact__lead {
  margin: 0 0 clamp(28px, 3.4vw, 48px);
  max-width: 30ch;
  font: 500 clamp(19px, 2.1vw, 30px)/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.contact__lead .muted { color: rgb(255 255 255 / 52%); }

.contact__promises {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 34px);
  padding-top: clamp(24px, 2.8vw, 38px);
  border-top: 1px solid rgb(255 255 255 / 18%);
  margin-bottom: clamp(32px, 4vw, 60px);
}
.promise { display: flex; align-items: flex-start; gap: 12px; }
.promise__icon { flex-shrink: 0; color: #FFFFFF; margin-top: 1px; }
.promise__title {
  margin: 0 0 8px;
  font: 600 clamp(15px, 1.25vw, 18px)/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.promise__body {
  margin: 0;
  font: 400 clamp(13.5px, 1.05vw, 15px)/1.4 var(--font-sans);
  color: rgb(255 255 255 / 62%);
}

/* Same object as the hero's contact card, restated here so the two stay
   independent if either is restyled. */
.contact__card {
  display: inline-flex;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 18px 48px rgb(0 0 0 / 26%);
}
.contact__card-photo { width: 92px; flex-shrink: 0; border-radius: 10px; }
.contact__card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 14px 6px 4px;
}
.contact__card-role { margin: 0; font: 500 12px/1.35 var(--font-sans); color: var(--ink); }
.contact__card-role span { display: block; color: var(--muted-2); }
.contact__card-name {
  margin: 2px 0 10px;
  font: 600 17px/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.contact__card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  align-self: flex-start;
  padding: 7px 8px 7px 15px;
  border-radius: 999px;
  background: var(--ink);
  font: 500 12.5px/1 var(--font-sans);
  color: #FFFFFF;
  transition: background var(--duration-fast) var(--ease-standard);
}
.contact__card-cta:hover { background: var(--accent-hover); color: #FFFFFF; }
.contact__card-cta .dot { width: 9px; height: 9px; border-radius: 50%; background: #FFFFFF; flex-shrink: 0; }

/* =================================================================
   Partnerships
   ================================================================= */
.partnerships { max-width: 820px; margin: 0 auto; padding: 132px var(--page-margin); text-align: center; }
.partnerships h2 { font: 600 clamp(28px, 3.4vw, 44px)/1.06 var(--font-sans); letter-spacing: -0.03em; color: var(--ink); margin: 22px 0 20px; }
.partnerships p { font: var(--text-body-m); color: var(--muted); margin: 0 auto 34px; max-width: 620px; }
.partnerships .microlabel { justify-content: center; }

/* =================================================================
   Footer
   ================================================================= */
.site-footer { border-top: 1px solid var(--line); background: var(--paper-2); }
.footer-newsletter {
  max-width: var(--content-width); margin: 0 auto;
  padding: 56px var(--page-margin);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.footer-newsletter__label { font: 600 clamp(18px, 2vw, 26px)/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--ink); }
.footer-newsletter form { display: flex; align-items: center; gap: 12px; flex: 1; max-width: 480px; min-width: 300px; }
.footer-newsletter .field { flex: 1; }
.footer-links { max-width: var(--content-width); margin: 0 auto; padding: 72px var(--page-margin) 48px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; }
.footer-links__col-title { font: 600 11px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 22px; }
.footer-links__list { display: flex; flex-direction: column; gap: 13px; }
.footer-links__list a { font: 400 14.5px/1 var(--font-sans); color: var(--muted); }
.footer-links__list a:hover { color: var(--ink); }
.footer-brand img { height: 20px; width: auto; margin-bottom: 20px; }
.footer-brand p { font: 400 14.5px/1.6 var(--font-sans); color: var(--muted); max-width: 260px; margin: 0 0 20px; }
.footer-brand address { font: 400 14px/1.75 var(--font-sans); color: var(--muted-2); font-style: normal; }
.footer-brand address a { color: var(--muted-2); }
.footer-brand address a:hover { color: var(--ink); }
.footer-bottom {
  max-width: var(--content-width); margin: 0 auto;
  padding: 26px var(--page-margin) 44px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.footer-bottom span { font: 400 13px/1 var(--font-sans); color: var(--muted-2); }
.footer-bottom__links { display: flex; gap: 26px; }
.footer-bottom__links a { font: 400 13px/1 var(--font-sans); color: var(--muted-2); }
.footer-bottom__links a:hover { color: var(--ink); }

/* Oversized wordmark strip above footer bottom */
.footer-wordmark { max-width: var(--content-width); margin: 0 auto; padding: 8px var(--page-margin) 20px; overflow: hidden; }
.footer-wordmark span {
  display: block;
  font: 700 clamp(64px, 15vw, 240px)/0.9 var(--font-sans);
  letter-spacing: -0.05em;
  color: var(--ink);
  white-space: nowrap;
}

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1024px) {
  :root { --page-margin: 30px; --section-padding-y: 90px; --section-head-gap: 48px; }
  .split { gap: 52px; }
  /* Below this the 471/682 split leaves the form too narrow to type in —
     stack, and lead with the headline rather than the form. */
  .contact__inner { grid-template-columns: 1fr; gap: 44px; }
  .contact__content { order: -1; }
  .usecase-grid { grid-template-columns: repeat(2, 1fr); }
  .framework-head { grid-template-columns: 1fr auto; }
  .framework-head .microlabel { grid-column: 1; }
  .framework-head__main { grid-column: 1; }
  .framework-head .section-head__meta { grid-column: 2; grid-row: 1; }
  .framework-runway { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .framework-stage { grid-template-columns: 1fr; }
  .framework-visuals { min-height: 270px; }
  .insights-header__main { grid-template-columns: 1fr; gap: 34px; }
  .insights-header__aside { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
  .insights-header__aside p { margin-bottom: 0; }
  .media-header__main { grid-template-columns: 1fr; gap: 34px; }
  .media-header__aside { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
  .media-header__aside p { margin-bottom: 0; }
  .newsletter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .newsletter-card { min-height: 550px; }
  .newsletter-card--featured { grid-column: span 2; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .svc__head { grid-template-columns: 90px 1fr 48px; }
  .svc__toggle { width: 46px; height: 46px; }
  .svc__panel-inner { grid-template-columns: 1fr; gap: 24px; padding-left: 90px; padding-right: 0; }
}

@media (max-width: 900px) {
  .media-studio { grid-template-columns: 1fr; }
  .media-podcasts { margin-top: 0; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .membership {
    --membership-gutter: 30px;
  }
  .membership__head {
    margin-bottom: 60px;
  }
  .membership__body {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
  }
  .membership__media { grid-column: 1 / span 2; }
  .membership__content { grid-column: 4 / -1; }
  .membership__title { max-width: none; }
  .membership__lead { margin-bottom: 50px; }
}

@media (max-width: 760px) {
  :root { --page-margin: 20px; --section-padding-y: 64px; --section-head-gap: 34px; }
  body { font-size: 16px; }
  .nav-overlay__links { gap: 4px; }
  .nav-overlay__foot { flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 24px; }
  .nav-overlay__contact { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero { min-height: 92svh; }
  .hero__stage { padding-top: 104px; padding-bottom: 30px; }
  .hero__top { flex-direction: column; gap: 26px; padding-right: 0; }
  /* Let the wordmark wrap rather than overflow on narrow screens. Wrapped
     onto two lines the 0.9 display leading collides with the "y" descender,
     so open it up and give the sub-line room to clear it. */
  .hero__wordmark { width: auto; font-size: clamp(36px, 13.5vw, 68px); line-height: 0.96; }
  .hero__wm-main { white-space: normal; }
  .hero__wm-sub { text-align: left; margin-top: 0.12em; }
  .hero__services { margin-top: 0; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
  .hero__services a { white-space: normal; }
  .hero__ticks { width: 100%; margin: 26px 0; }
  .hero__foot { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .hero__card { justify-self: stretch; }
  .hero__copyright { order: 3; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split__media { height: 300px; order: -1; }
  .membership {
    --membership-gutter: 20px;
  }
  .membership__head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 36px;
  }
  .membership__head .microlabel,
  .membership__title,
  .membership__media,
  .membership__content {
    grid-column: 1;
  }
  .membership__title {
    margin-top: 0;
    max-width: none;
  }
  .membership__body {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .membership__grid { grid-template-columns: 1fr; }
  .membership__media {
    aspect-ratio: 2 / 3;
  }
  .membership__media-shade {
    background:
      linear-gradient(180deg, transparent 42%, rgb(0 0 0 / 14%) 62%, rgb(0 0 0 / 66%) 100%),
      rgb(10 10 10 / 16%);
  }
  .membership__media-content { opacity: 1; transform: none; }
  .membership__media-content p { font-size: 15px; }
  .membership__lead { margin-bottom: 36px; }
  .mcard__no { margin-bottom: 22px; }
  .newsletter { grid-template-columns: 1fr; padding: 44px 28px; gap: 32px; }
  .svc-title { text-align: left; }
  .svc-eyebrow { margin-bottom: 18px; }
  .svc__head { grid-template-columns: 40px 1fr 40px; gap: 14px; }
  .svc__toggle { width: 40px; height: 40px; }
  .svc__panel-inner { padding-left: 0; }
  .framework-head { display: block; }
  .framework-head .microlabel { margin-bottom: 28px; }
  .framework-head .section-head__meta { margin-top: 22px; }
  .framework-runway {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .framework-runway::-webkit-scrollbar { display: none; }
  .framework-step { flex: 0 0 148px; min-height: 106px; scroll-snap-align: start; }
  .framework-stage { padding: 34px 26px; gap: 34px; }
  .framework-visuals { min-height: 220px; aspect-ratio: 3 / 2; }
  .usecases-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 36px; }
  .usecases-head .microlabel { margin: 0; }
  .usecases-head__title { width: 100%; }
  .usecases-head__title h2 { font-size: 62px; line-height: 0.92; }
  .usecases-head__lead { margin: 0; max-width: 34ch; }
  .usecase-grid { grid-template-columns: 1fr; gap: 4px; margin-bottom: 36px; }
  .usecase-project__media { aspect-ratio: 350 / 248; }
  .usecase-project__heading { gap: 10px; }
  .usecase-project__heading h3 { font-size: 17px; }
  .usecase-project__mark { font-size: 17px; }
  .insights-header { margin-bottom: 42px; }
  .insights-header__main { margin-top: 30px; gap: 28px; }
  .insights-header h2 { font-size: 34px; line-height: 1.04; letter-spacing: -0.05em; }
  .insights-header__aside { display: block; }
  .insights-header__aside p { margin-bottom: 24px; font-size: 15px; }
  /* Hold two columns rather than stacking three 550px cards into one
     very tall run; the single column waits until 620 below. */
  .newsletter-grid { gap: 4px; }
  .newsletter-card,
  .newsletter-card--featured { grid-column: auto; min-height: 440px; }
  .newsletter-card__body { padding: 22px; }
  .newsletter-card__plus { top: 16px; right: 16px; }
  .newsletter-card--featured h3 { font-size: 25px; }
  .latest-media { margin-top: 88px; }
  .media-header { margin-bottom: 42px; }
  .media-header__main { margin-top: 30px; gap: 28px; }
  .media-header h2 { font-size: 34px; line-height: 1.04; letter-spacing: -0.05em; }
  .media-header__aside { display: block; }
  .media-header__aside p { margin-bottom: 24px; font-size: 15px; }
  /* Widescreen while full-width — 4:3 across the whole column was 495px
     tall on its own. The supporting pair sit two-up so 4:3 stays short. */
  .media-video--featured { aspect-ratio: 16 / 9; }
  .media-video--supporting { aspect-ratio: 4 / 3; }
  .media-video--featured .media-video__image.photo-slot img { object-position: 52% center; }
  .media-video__copy { left: 18px; right: 18px; bottom: 16px; }
  .media-video__copy h3 { font-size: 24px; }
  .media-video--supporting .media-video__copy { left: 14px; right: 14px; bottom: 13px; }
  .media-video--supporting .media-video__copy h3 { font-size: 15px; line-height: 1.15; }
  .media-video--supporting .media-video__copy p { font-size: 11px; }
  .media-play--large { width: 56px; height: 56px; }
  .media-play { width: 44px; height: 44px; }
  .media-video--supporting .media-play { top: 33%; width: 40px; height: 40px; }
  .media-podcasts { padding: 24px 20px; }
  .media-podcasts > h3 { font-size: 24px; }
  .media-podcast {
    grid-template-columns: 76px minmax(0, 1fr) 36px;
    gap: 14px;
    min-height: 112px;
    padding: 16px 0;
  }
  .media-podcast__cover { width: 76px; height: 76px; }
  .media-podcast__info strong { font-size: 15px; }
  .media-play--small { width: 36px; height: 36px; }
  .contact__promises { grid-template-columns: 1fr; gap: 22px; }
  .contact__card { display: flex; }
  .contact__lead { max-width: none; }
  .footer-newsletter { flex-direction: column; align-items: stretch; }
  .footer-newsletter form { max-width: none; }
  .footer-links { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}