/* ============================================================
   AMP — Attach Media Partners
   ------------------------------------------------------------
   One stylesheet, organised top-down:
     1. tokens, textures, reset
     2. primitives (shell, buttons, section heads, reveals)
     3. chrome (scroll rail, cursor, nav, mobile menu, dot index)
     4. sections (hero / featured / operation /
        highlights / jobs / footer)
     5. modal
     6. responsive — tablet, laptop, phone
   Everything is fluid: sizes come from clamp() and percentages,
   never from fixed pixel offsets, so no two elements can drift
   into each other at an untested width.
   ============================================================ */

/* ============ 1. TOKENS ============ */
:root {
  --bg: #060107;
  --bg-soft: #0d0212;
  --pink: #f34af3;
  --pink-soft: #ffa0ff;
  --purple: #8b2bd6;
  --purple-deep: #4a0a72;
  --plum: #28063b;
  --lilac: #deb5ff;
  --ink: #0a0a0a;
  --white: #ffffff;

  --shell: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 78px;
  --stripe-h: 34px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);

  --grad-pink: linear-gradient(118deg, #ff8bf6 0%, var(--pink) 42%, #b52bd6 100%);
  --grad-purple: linear-gradient(118deg, #6c17b0 0%, var(--purple-deep) 55%, #2b0645 100%);
  --grad-text: linear-gradient(96deg, #d768ff 0%, var(--pink) 55%, #ff7de9 100%);
}

/* ---- tuning hooks ----
   Manual size/position knobs for a handful of elements (Key Highlights text,
   pink shapes and background map; the Careers photo gap). Defaults reproduce
   the current layout exactly; the phone layout reads "-m" variants inside
   the 700px media query further down. They were written by the old
   quick-edit panel (now in archive/quick-edit/); the layout editor
   (editor/) supersedes it, so edit these by hand or leave them be. */
:root {
  --hl-title-scale: 1;
  --hl-title-x: 0px;
  --hl-title-y: 0px;
  --hl-note-scale: 1;
  --hl-num-scale: 1;
  --hl-shape-scale: 1;
  --hl-shape-x: 0px;
  --hl-shape-y: 0px;
  --hl-map-w: min(1240px, 130%);
  --hl-map-x: 0px;
  --hl-map-y: 0px;
  --jobs-gap: 7.5px;
}

/* ---- textures ----
   Noise is an feTurbulence tile; dots are a plain radial-gradient grid. Both
   are data: URIs / pure CSS so they work identically over http and file://
   (a fetched mask or background under file:// is a cross-origin request that
   can never carry CORS headers, and a mask that fails to load renders its
   element completely invisible). */
:root {
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.62'/%3E%3C/svg%3E");
  --dots: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1.2px);
  --dots-dark: radial-gradient(rgba(10, 0, 20, .28) 1px, transparent 1.2px);
}

/* ---- shape masks, inlined ----
   The same silhouettes as assets/operation/base_shape.svg,
   assets/highlights/title.svg and assets/jobs/photo_block.svg, carried here
   as data: URIs for the CORS reason above. The SVG's own transform is folded
   into the viewBox origin and fill='black' keeps a '#' out of the URI. */
:root {
  --shape-card: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='498.281%201171.72%20923.909%20314.44'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20fill-rule='evenodd'%20d='M1392.24,1171.72H626.174a38.916,38.916,0,0,0-36.63,25.73l-89.477,248.67a29.912,29.912,0,0,0,28.177,40.02H1294.31a38.913,38.913,0,0,0,36.63-25.73l89.48-248.67A29.912,29.912,0,0,0,1392.24,1171.72Z'/%3E%3C/svg%3E");
  --shape-block: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='490.281%201733.72%20523.909%20314.4'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20fill-rule='evenodd'%20d='M984.242,1733.72H618.174a38.916,38.916,0,0,0-36.63,25.73l-89.477,248.67a29.912,29.912,0,0,0,28.177,40.02H886.312a38.916,38.916,0,0,0,36.63-25.73l89.478-248.67A29.911,29.911,0,0,0,984.242,1733.72Z'/%3E%3C/svg%3E");
  --shape-photo: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='404.031%202878.72%20527.781%20445.69'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20fill-rule='evenodd'%20d='M889.334,2878.72H585.312a55.168,55.168,0,0,0-51.921,36.47l-126.83,352.48A42.4,42.4,0,0,0,446.5,3324.4H750.522a55.168,55.168,0,0,0,51.921-36.47l126.83-352.48A42.4,42.4,0,0,0,889.334,2878.72Z'/%3E%3C/svg%3E");
  /* Key Highlights phone slab (assets/highlights/slab.svg): raked end on the
     right, and the same turned 180° */
  --shape-slab: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%2092'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20d='M0,0H390Q400,0%20396.9,9.51L373.3,82.49Q370.2,92%20360.2,92H0Z'/%3E%3C/svg%3E");
  --shape-slab-l: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%2092'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20d='M400,92H10Q0,92%203.1,82.49L26.7,9.51Q29.8,0%2039.8,0H400Z'/%3E%3C/svg%3E");
}

/* ============ RESET ============ */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: 'Unbounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* the modal locks the page by class, never by inline style, so nothing can
   leave the body stuck at overflow:hidden if a handler throws mid-way */
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 4px;
  border-radius: 4px;
}

::selection { background: var(--pink); color: #16021c; }

/* ============ 2. PRIMITIVES ============ */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* every full-bleed band clips its own decoration, so nothing can widen the page */
section { position: relative; overflow: hidden; }

/* ---- reveal on scroll ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .85s var(--ease) calc(var(--i, 0) * 90ms),
    transform .95s var(--ease) calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---- word-by-word heading reveal (JS wraps each word) ---- */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .08em;
}
.w > i {
  display: inline-block;
  font-style: normal;
  transform: translateY(110%);
  transition: transform 1s var(--ease) calc(var(--i, 0) * 70ms);
}
.is-in .w > i, .hslide.is-active .w > i { transform: none; }

/* ---- section heads ---- */
.sechead { margin-bottom: clamp(30px, 4vw, 54px); }
.sechead--center { text-align: center; }

.sechead__title {
  font-size: clamp(30px, 5.2vw, 62px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.02em;
}
.highlights .sechead__title {
  font-size: calc(clamp(30px, 5.2vw, 62px) * var(--hl-title-scale));
  transform: translate(var(--hl-title-x), var(--hl-title-y));
}
.section__title--dark, .sechead--dark .sechead__title { color: #12031c; }

/* ---- buttons ---- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  background: none;
  transition: transform .35s var(--ease), background .3s ease,
              border-color .3s ease, box-shadow .35s ease, color .3s ease;
}
.btn--ghost {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .04);
  color: var(--white);
}
.btn--ghost:hover {
  border-color: var(--pink);
  background: rgba(243, 74, 243, .14);
  box-shadow: 0 8px 30px rgba(243, 74, 243, .28);
}
.btn--solid {
  background: var(--grad-pink);
  color: #17021d;
  box-shadow: 0 10px 30px rgba(243, 74, 243, .28);
}
.btn--solid:hover { box-shadow: 0 14px 40px rgba(243, 74, 243, .45); }
.btn svg { transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* ============ 3. CHROME ============ */

/* ---- scroll progress rail ---- */
/* ---- page-wide texture ----

   Three fixed plates over the whole document, in this order: film grain, a
   dot grid, and a vignette. Together they are what stops the flat areas from
   reading as flat — the palette is already only two hues, so the texture is
   doing the work a third colour would otherwise have to.

   Deliberately NO mix-blend-mode. A blended full-page plate forces the entire
   document into one blend group, which kills the backdrop-filter on the nav
   and the modal and costs a full-page composite every frame. Low-opacity
   grey-on-transparent gets the same look for none of that.

   The grain plate is 200% x 200% and moves by transform in 8 steps — the
   compositor handles it with no repaint, unlike animating background-position.
   Under the nav (z 200) is deliberate: the bar's blur reads through it. */
.fx {
  position: fixed;
  inset: 0;
  z-index: 185;   /* under the mobile menu (190) and the nav (200) */
  pointer-events: none;
}
.fx__grain,
.fx__dots,
.fx__vignette {
  position: absolute;
  pointer-events: none;
}
.fx__grain {
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: var(--noise);
  opacity: .055;
  animation: grain 1.1s steps(1, end) infinite;
  will-change: transform;
}
.fx__dots {
  inset: 0;
  background-image: var(--dots);
  background-size: 4px 4px;
  opacity: .05;
}
.fx__vignette {
  inset: 0;
  background: radial-gradient(ellipse 78% 68% at 50% 46%, transparent 40%, rgba(4, 0, 8, .5) 100%);
}
@keyframes grain {
  0%    { transform: translate3d(0, 0, 0); }
  12.5% { transform: translate3d(-6%, -3%, 0); }
  25%   { transform: translate3d(4%, -7%, 0); }
  37.5% { transform: translate3d(-3%, 5%, 0); }
  50%   { transform: translate3d(7%, 2%, 0); }
  62.5% { transform: translate3d(-5%, -6%, 0); }
  75%   { transform: translate3d(2%, 6%, 0); }
  87.5% { transform: translate3d(-7%, 1%, 0); }
}
/* ---- rebrand notice ----
   Fixed at the very top, with the floating nav parked underneath it and the
   hero's own padding allowing for both, so the two never stack on each
   other. It stays put rather than scrolling away: it is the one line on the
   page a first-time visitor most needs to see. */
.ticker {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--stripe-h);
  z-index: 310;
  display: grid;
  place-items: center;
  padding: 0 16px;
  background: linear-gradient(90deg, #ffd9fb 0%, #ffc2f6 50%, #ffd9fb 100%);
  color: #3a0447;
  font-size: clamp(10px, 1.05vw, 12.5px);
  font-weight: 600;
  letter-spacing: .08em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.scrollbar {
  position: fixed;
  inset: var(--stripe-h) 0 auto 0;
  height: 2px;
  z-index: 300;
  background: rgba(255, 255, 255, .07);
  pointer-events: none;
}
.scrollbar__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad-text);
  box-shadow: 0 0 12px rgba(243, 74, 243, .8);
}

/* ---- cursor ring (desktop pointers only; body.has-cursor is set by JS) ---- */
.cursor { display: none; }
body.has-cursor .cursor {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(243, 74, 243, .8);
  border-radius: 50%;
  z-index: 400;
  pointer-events: none;
  transition: width .3s var(--ease), height .3s var(--ease),
              margin .3s var(--ease), background .3s ease, opacity .3s ease;
  will-change: transform;
}
body.has-cursor .cursor__dot {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--pink);
}
body.has-cursor .cursor.is-hot {
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  background: rgba(243, 74, 243, .12);
}
body.has-cursor .cursor.is-hot .cursor__dot { opacity: 0; }

/* ---- top nav ---- */
.topnav {
  position: fixed;
  top: calc(var(--stripe-h) + clamp(8px, 1.2vw, 14px));
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  transition: transform .5s var(--ease);
}
.topnav.is-hidden { transform: translateY(calc(-100% - 24px)); }

.topnav__inner {
  width: min(var(--shell), calc(100% - 2 * clamp(14px, 3vw, 30px)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 12px 11px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(10, 4, 14, .45);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.topnav.is-stuck .topnav__inner {
  background: rgba(8, 2, 12, .82);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
}

.topnav__brand { display: flex; align-items: center; }
.topnav__logo {
  height: 24px;
  width: auto;
  transition: transform .4s var(--ease), filter .4s ease;
}
.topnav__brand:hover .topnav__logo {
  transform: scale(1.05);
  filter: drop-shadow(0 0 14px rgba(243, 74, 243, .55));
}

.topnav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 34px); }
.topnav__links a {
  position: relative;
  padding: 6px 2px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .74);
  transition: color .3s ease;
  white-space: nowrap;
}
/* underline grows from the left — the same gesture as the dot index */
.topnav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--pink);
  transition: transform .45s var(--ease);
}
.topnav__links a:hover, .topnav__links a.is-current { color: var(--white); }
.topnav__links a:hover::after, .topnav__links a.is-current::after { transform: scaleX(1); }

.topnav__actions { display: flex; align-items: center; gap: 10px; }
.topnav__cta { padding: 11px 20px; }

/* ---- burger ---- */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  cursor: pointer;
  position: relative;
  padding: 0;
}
.burger span {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1.6px;
  margin-left: -8px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .4s var(--ease), opacity .3s ease;
}
.burger span:first-child { top: 18px; }
.burger span:last-child { bottom: 18px; }
.burger.is-open span:first-child { transform: translateY(5px) rotate(45deg); }
.burger.is-open span:last-child { transform: translateY(-5px) rotate(-45deg); }

/* ---- mobile menu ---- */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: calc(var(--nav-h) + 40px) var(--gutter) 40px;
  background:
    radial-gradient(ellipse 120% 70% at 80% 0%, rgba(139, 43, 214, .5) 0%, transparent 60%),
    linear-gradient(160deg, #16032099 0%, #060107 60%),
    #060107;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2%);
  transition: opacity .45s var(--ease), transform .55s var(--ease), visibility .45s;
}
.mmenu.is-open { opacity: 1; visibility: visible; transform: none; }
.mmenu__grain {
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: .05;
  pointer-events: none;
}

.mmenu__list { position: relative; display: flex; flex-direction: column; }
.mmenu__list a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: clamp(26px, 9vw, 44px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--ease) calc(var(--i) * 60ms + 120ms),
              transform .6s var(--ease) calc(var(--i) * 60ms + 120ms),
              color .3s ease;
}
.mmenu__list a em {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--pink);
}
.mmenu__list a:active { color: var(--pink); }
.mmenu.is-open .mmenu__list a { opacity: 1; transform: none; }

.mmenu__foot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--ease) calc(var(--i) * 60ms + 120ms),
              transform .6s var(--ease) calc(var(--i) * 60ms + 120ms);
}
.mmenu.is-open .mmenu__foot { opacity: 1; transform: none; }
.mmenu__mail {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, .6);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  padding-bottom: 2px;
}

/* ---- dot section index ---- */
.dotnav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
}
.dotnav a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 26px;
  height: 14px;
}
.dotnav a i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  transition: background .35s ease, border-color .35s ease, transform .35s var(--ease);
}
.dotnav a:hover i { border-color: var(--pink); transform: scale(1.3); }
.dotnav a.is-current i {
  background: var(--pink);
  border-color: var(--pink);
  box-shadow: 0 0 12px rgba(243, 74, 243, .8);
}
/* the label slides out of the dot on hover */
.dotnav a::before {
  content: attr(data-label);
  position: absolute;
  right: 22px;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .35s ease, transform .45s var(--ease);
  pointer-events: none;
}
.dotnav a:hover::before { opacity: 1; transform: none; }

/* ============ 4. HERO ============ */
.hero {
  position: relative;
  min-height: 640px;
  /* vh first as the fallback: a browser without svh drops the second line
     and still gets a full-height hero, rather than collapsing to min-height */
  height: 100vh;
  height: 100svh;
  max-height: 1080px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(ellipse 90% 60% at 50% 12%, #1c0a26 0%, #0a0210 48%, var(--bg) 100%);
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
/* keeps the type legible over the 3D blocks without dimming the whole scene */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 42% at 50% 46%, rgba(6, 1, 7, .78) 0%, rgba(6, 1, 7, 0) 72%),
    linear-gradient(to bottom, rgba(6, 1, 7, .6) 0%, transparent 22%, transparent 74%, rgba(6, 1, 7, .92) 100%);
}
.hero__stage {
  position: relative;
  z-index: 4;
  flex: 1;
  display: grid;
  /* An explicit minmax(0, 1fr) track, not the implicit `auto` one: the three
     slides share this single cell, and an auto track would size itself to the
     widest slide's MAX-content — which is a nowrap display title — pushing
     every slide's box past the viewport on a phone. */
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: calc(var(--stripe-h) + var(--nav-h) + 20px) var(--gutter) clamp(120px, 16vh, 170px);
}

/* every slide occupies the same cell; only the active one is interactive */
.hslide {
  grid-area: 1 / 1;
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .7s var(--ease), visibility .7s;
}
.hslide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

.hslide__we {
  display: block;
  font-size: clamp(11px, 1.1vw, 14px);
  font-weight: 500;
  letter-spacing: .5em;
  color: rgba(255, 255, 255, .72);
  margin-bottom: clamp(8px, 1.4vw, 16px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease) .1s, transform .8s var(--ease) .1s;
}
.hslide.is-active .hslide__we { opacity: 1; transform: none; }

.hslide__title {
  font-size: clamp(44px, 10.4vw, 132px);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.03em;
  white-space: nowrap;
  /* the shear-free way to reveal display type: clip the box, slide the glyphs */
  clip-path: inset(0 0 110% 0);
  transform: translateY(22%);
  transition: clip-path 1.05s var(--ease) .12s, transform 1.05s var(--ease) .12s;
}
.hslide.is-active .hslide__title { clip-path: inset(-25% -12% -18% -6%); transform: none; }
.hslide__title--wide { letter-spacing: -.04em; }

/* AMP = the gradient run, everything else stays white. No italic: Unbounded
   has no italic face, so a synthesized shear clips against background-clip:text. */
.hslide__title .amp {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.hslide__title .rest { color: var(--white); }

.hslide__sub {
  font-size: clamp(14px, 1.5vw, 20px);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, .74);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s var(--ease) .32s, transform .9s var(--ease) .32s;
}
.hslide.is-active .hslide__sub { opacity: 1; transform: none; }
.hslide__sub strong {
  color: var(--white);
  font-weight: 700;
  transition: text-shadow .45s ease;
}
.hslide__sub strong:hover {
  text-shadow: 0 0 8px rgba(255, 255, 255, .85), 0 0 24px rgba(243, 74, 243, .6);
}

/* One position for all three statements: centred on both axes. The words are
   the only thing that changes between slides, so every composition of 3D
   blocks is built to leave this centre clear. */
.hslide {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hslide__sub { margin-top: clamp(14px, 2vw, 26px); }
/* ---- carousel controls ---- */
.hero__ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(56px, 8vh, 78px);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 20px);
  padding-inline: var(--gutter);
}
.hero__arrow {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, transform .35s var(--ease);
}
.hero__arrow:hover {
  border-color: var(--pink);
  background: rgba(243, 74, 243, .16);
  transform: scale(1.08);
}

.hero__tabs { display: flex; gap: clamp(6px, 1vw, 12px); }
.hero__tab {
  position: relative;
  padding: 11px 18px 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  overflow: hidden;
  transition: background .35s ease, transform .35s var(--ease);
}
.hero__tab span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  transition: color .3s ease;
}
.hero__tab:hover span { color: rgba(255, 255, 255, .85); }
.hero__tab.is-active { background: rgba(243, 74, 243, .12); }
.hero__tab.is-active span { color: var(--white); }
/* the autoplay clock: JS sets --p from 0 to 1 on the active tab only */
.hero__tab i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  background: var(--grad-text);
}

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 2.6vh, 26px);
  z-index: 6;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}
.hero__cue span {
  width: 1px;
  height: 22px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .7));
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ============ FEATURED TITLES ============ */
.featured {
  padding: clamp(70px, 11vh, 140px) 0 clamp(70px, 11vh, 130px);
  background:
    radial-gradient(ellipse 70% 50% at 82% 0%, rgba(139, 43, 214, .2) 0%, transparent 60%),
    var(--bg);
}

.gallery { position: relative; }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.8vw, 24px);
  padding: clamp(20px, 2vw, 26px) clamp(18px, 1.8vw, 24px) clamp(22px, 2.2vw, 28px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .015) 100%);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: transform .5s var(--ease), border-color .4s ease, background .4s ease;
}
.tile::after {
  /* dotted texture, only visible as the card lights up */
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--dots);
  background-size: 14px 14px;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.tile:hover, .tile.is-open { transform: translateY(-6px); border-color: rgba(243, 74, 243, .5); }
.tile:hover::after, .tile.is-open::after { opacity: .12; }
.tile.is-open { background: linear-gradient(165deg, rgba(243, 74, 243, .16) 0%, rgba(139, 43, 214, .06) 100%); }
/* everything that is not the open card steps back */
.gallery.is-open .tile:not(.is-open) { opacity: .42; }
.gallery.is-open .tile:not(.is-open):hover { opacity: .8; }

.tile__shine {
  position: absolute;
  inset: -40% -10% auto;
  height: 150%;
  background: radial-gradient(ellipse at 50% 0%, rgba(243, 74, 243, .35) 0%, transparent 62%);
  opacity: 0;
  transition: opacity .55s ease;
  pointer-events: none;
}
.tile:hover .tile__shine, .tile.is-open .tile__shine { opacity: 1; }

.tile__icon {
  position: relative;
  width: clamp(56px, 6vw, 82px);
  height: auto;
  border-radius: 18%;
  transition: transform .55s var(--ease);
}
.tile:hover .tile__icon { transform: scale(1.08) rotate(-3deg); }

.tile__meta { position: relative; display: flex; flex-direction: column; gap: 6px; }
.tile__name {
  font-size: clamp(16px, 1.7vw, 23px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
}

/* ---- the spotlight drawer ---- */
.spotlight {
  height: 0;
  overflow: hidden;
  transition: height .62s var(--ease);
}
.spotlight__inner {
  margin-top: clamp(12px, 1.4vw, 18px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid rgba(243, 74, 243, .3);
  border-radius: 24px;
  background:
    linear-gradient(140deg, rgba(43, 12, 68, .9) 0%, rgba(13, 2, 20, .95) 60%),
    var(--bg-soft);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease .1s, transform .6s var(--ease) .1s;
}
.spotlight.is-open .spotlight__inner { opacity: 1; transform: none; }
.spotlight__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background-image: var(--noise);
  opacity: .05;
  pointer-events: none;
}

.spot__art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(160px, 20vw, 240px);
  border-radius: 18px;
  overflow: hidden;
  background: var(--grad-purple);
}
.spot__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--dots);
  background-size: 16px 16px;
  opacity: .3;
}
.spot__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: .12;
  mix-blend-mode: overlay;
}
.spot__art img {
  position: relative;
  width: clamp(84px, 11vw, 128px);
  border-radius: 22%;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .6);
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(6px); }
}

.spot__body { position: relative; display: flex; flex-direction: column; }
.spot__kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
}
.spot__name {
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin-bottom: 14px;
}
.spot__copy {
  font-size: clamp(13px, 1.25vw, 15.5px);
  font-weight: 300;
  line-height: 1.62;
  color: rgba(255, 255, 255, .72);
  max-width: 52ch;
}
.spot__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.spot__chips span {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}
.spot__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
}
.spot__nav {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, transform .35s var(--ease);
}
.spot__nav:hover { border-color: var(--pink); background: rgba(243, 74, 243, .16); transform: scale(1.08); }
.spot__count {
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .45);
  margin-left: 4px;
}
.spot__close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.spot__close:hover { border-color: var(--pink); color: var(--white); background: rgba(243, 74, 243, .14); }

/* ============ OPERATIONAL MODEL ============ */
/* The artwork itself — white at the top falling to magenta, grain baked in.
   No fade to black at either end: the section starts and ends on a hard cut,
   so the page reads as black, then white, then black again. */
.operation {
  /* the LED field's unlit background (vec3(0.02,0,0.035) in main.js) */
  --op-led-bg: #050009;
  /* named so the card field can cancel them and run edge to edge */
  --op-pad-t: clamp(70px, 11vh, 130px);
  --op-pad-b: clamp(80px, 12vh, 140px);
  padding: var(--op-pad-t) 0 var(--op-pad-b);
  background-color: #ffffff;
  background-image: url("../assets/img/BG_gradient.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.operation__grain {
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: .05;
  pointer-events: none;
}
.operation__shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 700px);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.operation__head { position: relative; }
.operation .sechead { margin-bottom: clamp(24px, 3vw, 36px); }

/* ---- step list = the cards' navigation ---- */
.steps { display: flex; flex-direction: column; gap: 6px; }
.step {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 16px 17px;
  border: 0;
  border-radius: 14px;
  background: rgba(20, 3, 34, .04);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: background .4s ease, transform .45s var(--ease);
}
.step:hover { background: rgba(139, 43, 214, .1); transform: translateX(4px); }
.step.is-active { background: rgba(139, 43, 214, .13); }
.step__no {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--purple);
  padding-top: 3px;
}
.step__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.step__name {
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: #12031c;
}
.step__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: rgba(139, 43, 214, .14);
}
.step__bar i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  background: var(--grad-pink);
}

/* ---- the cards ----
   One square LED matrix per step, 700px wide and as tall as the section:
   the wrapper stretches to the grid row and its negative block margins
   cancel the section's padding, so the field meets both edges of the
   section whatever the copy beside it does. The cards share one grid cell
   and crossfade; only .is-active is visible. */
.deckwrap {
  position: relative;
  align-self: stretch;
  display: flex;
  margin-block: calc(-1 * var(--op-pad-t)) calc(-1 * var(--op-pad-b));
}
.op-deck {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 600px;
  touch-action: pan-y;
  background: var(--op-led-bg);
}
/* The field's own black carries on past the card to the page's right
   edge (the section clips it), so the whole right side reads as the
   backdrop. The LEDs fade into it over the card's right half (below). */
.deckwrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% - 1px);
  width: 100vw;
  background: var(--op-led-bg);
  pointer-events: none;
}
.op-deck:focus-visible { outline: 2px solid var(--pink); outline-offset: -4px; }

.op-card {
  grid-area: 1 / 1;
  position: relative;
  overflow: hidden;
  /* what shows if WebGL is unavailable */
  background: radial-gradient(circle at 50% 50%, #12031c 0%, #3a0a63 55%, #8b2bd6 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.op-card.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .7s ease, visibility 0s;
}

/* the LED field renders at display resolution (see CELL in main.js) */
.op-card__art {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.op-card__shader {
  display: block;
  width: 100%;
  height: 100%;
}
/* the LEDs fade into the backdrop towards the page edge; under the copy,
   which sits on black LEDs anyway */
.op-card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 50%, var(--op-led-bg) 100%);
}

.op-card__panel {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 16px);
  padding: 0 22%;
  text-align: center;
}
.op-card__name,
.op-card__text {
  transform: translateY(14px);
  opacity: 0;
  transition: transform .8s var(--ease), opacity .6s ease;
}
.op-card__name {
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--white);
}
.op-card__text {
  max-width: 20ch;
  font-size: clamp(14px, 1.35vw, 19px);
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255, 255, 255, .82);
}
.op-card.is-active .op-card__name,
.op-card.is-active .op-card__text { transform: none; opacity: 1; }
.op-card.is-active .op-card__text { transition-delay: .08s; }

/* ============ KEY HIGHLIGHTS ============ */
.highlights {
  padding: clamp(70px, 11vh, 130px) 0 clamp(80px, 12vh, 140px);
  background: var(--bg);
}
.hl-map {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hl-map-w);
  height: auto;
  transform: translate(calc(-50% + var(--hl-map-x)), calc(-50% + var(--hl-map-y)));
  opacity: .42;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
/* The live copy of the map: same image, blown out and tinted, revealed only
   inside a circle that follows the pointer (--mx / --my, written by
   js/main.js). Because it is the map itself being lit, it is the DOTS that
   glow rather than a haze sitting over them. The circle also breathes, so the
   patch is alive while the pointer is still.

   A mask, not a clip: the soft edge is what makes it read as light. Both the
   -webkit- and unprefixed properties are set, and the gradient is a
   generated image so there is nothing to fetch — a mask that fails to load
   would take the whole layer with it. */
.hl-map--live {
  opacity: 0;
  filter: brightness(2.6) saturate(1.5) hue-rotate(-8deg);
  transition: opacity .45s ease;
  /* One full-size mask layer with the circle placed inside it. Sizing the
     LAYER to the patch instead would position the gradient twice over — once
     by mask-position and again by the gradient's own centre — and the glow
     would trail the pointer. */
  --glow-r: 230px;
  -webkit-mask-image: radial-gradient(circle var(--glow-r) at var(--mx, 50%) var(--my, 50%),
    #000 0%, rgba(0, 0, 0, .55) 46%, transparent 74%);
  mask-image: radial-gradient(circle var(--glow-r) at var(--mx, 50%) var(--my, 50%),
    #000 0%, rgba(0, 0, 0, .55) 46%, transparent 74%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.highlights.is-lit .hl-map--live { opacity: .95; animation: mapPulse 2.6s ease-in-out infinite; }
@keyframes mapPulse {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}

.hl-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 45% at 50% 50%, rgba(139, 43, 214, .22) 0%, transparent 70%);
}
/* a grain plate of its own, over the map and under the blocks */
.hl-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--noise);
  opacity: .09;
  mix-blend-mode: overlay;
}
.highlights .shell { position: relative; z-index: 1; }

/* Three pairs, each a pink figure box with its note beside it on the open
   background. Moving the note OUT of a second parallelogram is what lets both
   be set large: the figure gets the whole box, and the note is no longer
   fighting a raked edge for room. Pairs alternate sides down the section. */
.hl-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vw, 40px);
}
.hl-item {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.5vw, 56px);
}
.hl-item:nth-child(even) { flex-direction: row-reverse; }

/* the box takes a fixed share so all three come out the same size, and the
   note takes the rest */
.hl-item > .hl-block { flex: 0 0 calc(clamp(240px, 42%, 520px) * var(--hl-shape-scale)); }
.hl-item > .hl-note { flex: 1 1 auto; min-width: 0; }

/* The middle figure carries no shape and no note, so it is set centred and
   in the light palette — dark-on-pink would be invisible out here. */
.hl-item--bare { justify-content: center; }
.hl-item--bare > .hl-block { flex: 0 0 auto; aspect-ratio: auto; }
.hl-block--plain .hl-block__body {
  align-items: center;
  text-align: center;
  padding: 0;
  width: auto;
}
/* "+10" is one layer: the "+" and the "10" run inline in its own box, so
   the box's width and text-align place both, and the gradient clipped to
   the type covers everything it paints */
.hl-block--plain .hl-big {
  display: block;
  white-space: nowrap;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hl-block--plain .hl-small { color: rgba(255, 255, 255, .82); }

.hl-note {
  font-size: calc(clamp(18px, 2.6vw, 38px) * var(--hl-note-scale));
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.015em;
  color: rgba(255, 255, 255, .88);
}
/* the note leans away from the box it belongs to */
.hl-item:nth-child(odd) > .hl-note { text-align: left; }
.hl-item:nth-child(even) > .hl-note { text-align: right; }

.hl-block {
  position: relative;
  display: flex;
  align-self: center;
  transform: translate(var(--hl-shape-x), var(--hl-shape-y));
}
.hl-block--stat { aspect-ratio: 523.909 / 314.4; }
.hl-block__fill {
  position: absolute;
  inset: 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hl-block__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: .11;
  mix-blend-mode: overlay;
}
.hl-block__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 6% 16%;
}

/* stat blocks: the narrower silhouette, pink, dark type */
.hl-block--stat { z-index: 2; }
.hl-block--stat .hl-block__fill {
  -webkit-mask-image: var(--shape-block);
  mask-image: var(--shape-block);
  background: var(--grad-pink);
  box-shadow: 0 30px 60px rgba(243, 74, 243, .18);
}
/* The narrow silhouette rakes hard: its leading edge crosses 22.5% of the
   block's width between top and bottom, so at the height where the figure
   sits the colour starts around 19% in. The type is dark on pink, which means
   a glyph that strays off the shape doesn't just look wrong — it disappears
   into the section behind. Both insets clear the rake with a few percent to
   spare, at every width. */
/* 20% / 18% clears the rake at the figure's own height with ~6% to spare,
   and hands the rest of the box to the type — which is the point of moving
   the note outside. */
.hl-block--stat .hl-block__body { color: #23002b; padding-inline: 20% 18%; }


.hl-big {
  display: flex;
  align-items: baseline;
  font-size: calc(clamp(38px, 7vw, 84px) * var(--hl-num-scale));
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.hl-plus { font-size: .72em; margin-right: .03em; }
.hl-small {
  margin-top: 10px;
  font-size: calc(clamp(15px, 2.2vw, 32px) * var(--hl-num-scale));
  font-weight: 700;
  line-height: 1.15;
}
/* "global" / "partnerships": two layers that read as one two-line label */
.hl-small + .hl-small { margin-top: 0; }

/* ============ JOBS ============ */
.jobs {
  padding: clamp(60px, 9vh, 110px) 0 clamp(60px, 9vh, 100px);
  background: var(--bg);
}
.jobs__band {
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--pink) 0%, #b32bc8 32%, #3d0a4e 72%, var(--bg) 100%);
}
.jobs__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--noise);
  opacity: .07;
  mix-blend-mode: overlay;
}

/* Six blocks, sized so the run is wider than the page and the outer two are
   cut by the section's own overflow — the strip reads as continuing past both
   edges rather than as a centred row. */
.jobs__strip {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.photo {
  position: relative;
  width: 28%;
  max-width: 400px;
  flex-shrink: 0;
  aspect-ratio: 527.781 / 445.69;
  /* a fixed gap, not a percentage: the run should read as separate frames
     with a consistent breath between them at every width */
  margin-inline: var(--jobs-gap);
  transition: transform .55s var(--ease), filter .55s ease;
}
.photo:hover { transform: translateY(-10px) scale(1.03); z-index: 3; }
.photo__fill {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: var(--shape-photo);
  mask-image: var(--shape-photo);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background: linear-gradient(145deg, #c04bd6, #6a1fb8 60%, #2c0a4a);
}
.photo__fill--black { background: transparent; }
.photo__fill img { width: 100%; height: 100%; object-fit: cover; }
/* On hover, a fine grid of lit dots in a soft circle around the pointer
   (--mx / --my, written by js/main.js in the photo's own box) — the map
   glow's idea, kept light and screened on so the picture shows through.
   Inside .photo__fill, so the silhouette mask trims it too. */
.photo__fill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(rgba(255, 190, 255, .85) 1px, transparent 1.5px) 0 0 / 7px 7px,
    radial-gradient(circle 160px at var(--mx, 50%) var(--my, 50%), rgba(243, 74, 243, .22), transparent 70%);
  -webkit-mask-image: radial-gradient(circle 150px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, .45) 50%, transparent 78%);
  mask-image: radial-gradient(circle 150px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, .45) 50%, transparent 78%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .45s ease;
}
@media (hover: hover) and (pointer: fine) {
  .photo:hover .photo__fill::before { opacity: .5; }
}

.jobs__foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 4vh, 44px);
  margin-top: clamp(34px, 5vh, 60px);
  text-align: center;
}
.jobs__caption {
  max-width: 620px;
  font-size: clamp(13px, 1.35vw, 17px);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255, 255, 255, .8);
}
.jobs__cta {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: transform .45s var(--ease), filter .45s ease;
}
.jobs__cta img { width: clamp(180px, 22vw, 240px); }
.jobs__cta:hover { transform: translateY(-4px) scale(1.03); filter: drop-shadow(0 8px 16px rgba(243, 74, 243, .22)); }

/* ============ FOOTER ============ */
.foot {
  position: relative;
  overflow: hidden;
  padding-top: clamp(50px, 8vh, 90px);
  background:
    radial-gradient(ellipse 80% 60% at 12% 0%, rgba(139, 43, 214, .22) 0%, transparent 62%),
    #040106;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.foot__grain {
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: .05;
  pointer-events: none;
}
.foot__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(30px, 5vw, 70px);
  padding-bottom: clamp(40px, 6vh, 64px);
}
.foot__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.foot__logo { width: clamp(96px, 12vw, 132px); }
.foot__tag {
  max-width: 34ch;
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, .55);
}

.foot__cols {
  display: grid;
  /* the last column carries the contact address, which is one unbreakable
     20-character token — an equal third leaves it ~10px short between 900
     and 1200px and it wraps mid-word */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(18px, 3vw, 40px);
}
.foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.foot__col h3 {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 4px;
}
.foot__col a {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 300;
  color: rgba(255, 255, 255, .62);
  transition: color .3s ease, transform .35s var(--ease);
  text-align: left;
  /* the contact address is one long unbreakable token at tablet widths */
  max-width: 100%;
  overflow-wrap: anywhere;
}
.foot__col a:hover { color: var(--white); transform: translateX(3px); }

.foot__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 11px;
  font-weight: 300;
  color: rgba(255, 255, 255, .42);
}
.foot__top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  transition: color .3s ease;
}
.foot__top:hover { color: var(--pink); }
.foot__top svg { transition: transform .4s var(--ease); }
.foot__top:hover svg { transform: translateY(-3px); }

/* ============ 5. REACH OUT MODAL ============ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, 4vh) var(--gutter);
  background: rgba(6, 1, 9, .74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s ease, visibility .32s;
  overflow-y: auto;
}
.modal-backdrop.is-open { opacity: 1; visibility: visible; }

.modal {
  width: min(940px, 100%);
  transform: scale(.94) translateY(18px);
  transition: transform .42s var(--ease);
}
.modal-backdrop.is-open .modal { transform: none; }

.modal__body {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: stretch;
}
.modal__col--media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}
.modal__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, .7));
}
.modal__col--content {
  position: relative;
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid rgba(139, 43, 214, .5);
  border-radius: 22px;
  background: linear-gradient(140deg, #1c0630 0%, #2b0c44 48%, #140222 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .75), 0 0 50px rgba(139, 43, 214, .28);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.modal__col--content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background-image: var(--noise);
  opacity: .06;
  pointer-events: none;
}
.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .07);
  cursor: pointer;
  z-index: 3;
  transition: background .25s ease, border-color .25s ease, transform .3s var(--ease);
}
.modal__close:hover { background: rgba(243, 74, 243, .25); border-color: var(--pink); transform: rotate(90deg); }

.modal__eyebrow {
  position: relative;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
}
.modal__title {
  position: relative;
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}
.modal__p {
  position: relative;
  font-size: clamp(13px, 1.25vw, 15px);
  font-weight: 300;
  line-height: 1.68;
  color: rgba(255, 255, 255, .78);
  margin-bottom: 28px;
  max-width: 46ch;
}
.modal__email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid rgba(243, 74, 243, .55);
  background: linear-gradient(90deg, rgba(139, 43, 214, .42) 0%, rgba(243, 74, 243, .28) 100%);
  font-size: clamp(12px, 1.2vw, 14.5px);
  font-weight: 600;
  box-shadow: 0 6px 22px rgba(139, 43, 214, .25);
  transition: transform .35s var(--ease), box-shadow .35s ease, border-color .3s ease, background .3s ease;
  word-break: break-word;
}
.modal__email:hover {
  border-color: var(--pink);
  background: linear-gradient(90deg, rgba(139, 43, 214, .66) 0%, rgba(243, 74, 243, .5) 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(243, 74, 243, .42);
}
.modal__email-icon { flex-shrink: 0; color: var(--pink); }

/* ============ 6. RESPONSIVE ============ */

/* ---- laptop / small desktop ---- */
@media (max-width: 1200px) {
  .dotnav { right: 14px; }
  .hslide__title { font-size: clamp(40px, 11vw, 104px); }

  /* The footer stacks here rather than at the phone breakpoint: beside the
     brand the three link columns are narrow enough that the contact address
     — one unbreakable 20-character token about 200px wide — has to break
     mid-word. Stacked, the columns have the whole shell to share. */
  .foot__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

/* ---- tablet landscape / iPad ---- */
@media (max-width: 1024px) {
  :root { --nav-h: 70px; }
  .dotnav { display: none; }

  .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .operation__shell { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 44px); }
  .steps { flex-direction: row; flex-wrap: wrap; }
  /* the <li> is the flex item, not the button inside it */
  .steps > li { flex: 1 1 200px; }
  /* stacked under the steps: the field keeps its 700px cap, centred, and
     runs down to the section's bottom edge (the top one no longer applies) */
  .deckwrap { align-self: auto; margin: 0 calc(-1 * var(--gutter)) calc(-1 * var(--op-pad-b)); }
  .op-deck { max-width: 700px; min-height: clamp(360px, 90vw, 600px); margin-inline: auto; }
  /* stacked, the card is centred, so it keeps both sides and no extension */
  .deckwrap::after, .op-card__art::after { display: none; }

  /* the figure box gives up a little of its share so the note keeps room */
  .hl-item > .hl-block { flex: 0 0 46%; }

  .photo { width: 33%; }
}

/* ---- tablet portrait ---- */
@media (max-width: 900px) {
  .topnav__links { display: none; }
  .burger { display: block; }
  .topnav__cta { display: none; }
  .topnav__inner { padding: 9px 10px 9px 18px; }


  .spotlight__inner { grid-template-columns: minmax(0, 1fr); }
  .spot__art { min-height: 180px; }

  .modal__body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .modal__col--media { max-height: 220px; justify-content: center; }
  .modal__img { object-position: center; }

}

/* ---- phone ----
   Visual-first: the gallery becomes big title cards, the photo strip and the
   step list become swipeable rails, and every remaining block of copy is cut
   to a line or two. */
@media (max-width: 700px) {
  :root {
    --gutter: 20px;

    /* tuning hooks: phone values override the desktop ones above via the
       optional "-m" variables (see the tuning hooks block at the top) */
    --hl-title-scale: var(--hl-title-scale-m, 1);
    --hl-title-x: var(--hl-title-x-m, 0px);
    --hl-title-y: var(--hl-title-y-m, 0px);
    --hl-note-scale: var(--hl-note-scale-m, 1);
    --hl-num-scale: var(--hl-num-scale-m, 1);
    --hl-shape-scale: var(--hl-shape-scale-m, 1);
    --hl-shape-x: var(--hl-shape-x-m, 0px);
    --hl-shape-y: var(--hl-shape-y-m, 0px);
    --hl-map-w: var(--hl-map-w-m, min(1240px, 130%));
    --hl-map-x: var(--hl-map-x-m, 0px);
    --hl-map-y: var(--hl-map-y-m, 0px);
    --jobs-gap: var(--jobs-gap-m, 9px);
  }

  .hero { height: auto; min-height: 100vh; min-height: 100svh; max-height: none; }
  .hero__stage { padding: calc(var(--stripe-h) + var(--nav-h) + 26px) var(--gutter) 150px; }
  /* The titles are single words — they cannot wrap out of trouble — and the
     longest of them ("REVAMP", "CHAMPION") run about 7 ems in this face. At
     the 20px phone gutter that puts the ceiling at 12.4vw; 11.8 leaves a
     little air rather than landing exactly on the gutter. */
  .hslide__title { font-size: clamp(28px, 11.8vw, 78px); }
  .hslide__we { letter-spacing: .42em; }

  .hero__ui { bottom: 58px; gap: 8px; }
  .hero__arrow { width: 38px; height: 38px; }
  .hero__tab { padding: 10px 12px 12px; }
  .hero__tab span { font-size: 9.5px; letter-spacing: .12em; }

  /* Below this the arrows and three tabs cannot share a line without one of
     them hanging off the edge — a swipe does the same job on a phone. */
  @media (max-width: 560px) {
    .hero__arrow { display: none; }
    .hero__tab { padding: 9px 10px 11px; }
    .hero__tab span { font-size: 9px; letter-spacing: .1em; }
  }
  /* big title cards, one per row: icon beside the name, both large */
  .gallery__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tile {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 18px;
  }
  .tile__icon { width: 64px; }
  .tile__name { font-size: 21px; }
  .gallery.is-open .tile:not(.is-open) { display: none; }

  .spotlight__inner { padding: 20px; border-radius: 20px; gap: 18px; }
  .spot__foot { padding-top: 20px; flex-wrap: wrap; }
  .spot__close { margin-left: 0; width: 100%; justify-content: center; }
  .spot__copy { font-size: 13px; }

  /* A step is now a number and a word, so three of them fit a phone row —
     no scroll rail needed, and no horizontal gesture competing with the
     card's own swipe directly below it. */
  .steps { flex-direction: row; gap: 6px; }
  .steps > li { flex: 1 1 0; min-width: 0; }
  .step { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 10px 14px; }
  .step__no { padding-top: 0; }
  .op-card__panel { padding: 0 16%; }

  /* Phones get their own composition, drawn to the 360px-wide design and
     scaled with the width: --u is 1/360 of the section (it is resolved
     where it is used, against the section's container width), so every
     number below is a design pixel. The desktop offsets baked into
     js/layout-data.js are reset for this breakpoint under bp.mobile there
     (and the editor-placed panel images collapsed).

       title      centred, top
       row 1      pink slab "+100M downloads" | purple slab with the note,
                  its lines stepping along the raked edge
       map        the Americas, full strength, behind everything
       +10        bare, pink, left
       row 3      purple slab with the note | pink slab "+30 titles"

     The slabs are one silhouette (--shape-slab: a long body ending in the
     design's raked, rounded edge), mirrored as each position needs; they
     run off the screen edge, which the section's overflow trims. */
  .highlights {
    --u: calc(100cqi / 360);
    container-type: inline-size;
    aspect-ratio: 360 / 592;
    padding: 0;
  }
  /* the design is flat black: no glow, grain or dot field over it */
  #highlights::after, .highlights .hl-glow, .highlights .hl-grain { display: none; }
  .highlights .shell { position: absolute; inset: 0; max-width: none; padding: 0; }

  /* the map at full strength, pinned (no parallax) so it stays in step
     with the slabs */
  .highlights .hl-map {
    left: calc(56.7 * var(--u));
    top: calc(159.5 * var(--u));
    width: calc(551.5 * var(--u));
    max-width: none;
    transform: none;
  }
  .highlights .hl-map:not(.hl-map--live) { opacity: 1; }

  .highlights .sechead { position: absolute; left: 0; right: 0; top: calc(17.3 * var(--u)); margin: 0; }
  .highlights .sechead__title { font-size: calc(27.8 * var(--u) * var(--hl-title-scale)); line-height: 1; }

  .hl-grid { position: absolute; inset: 0; display: block; }
  .hl-item, .hl-item:nth-child(even) {
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(92 * var(--u));
    display: block;
  }
  .hl-item:first-child { top: calc(91.3 * var(--u)); }
  .hl-item--flip { top: calc(472.7 * var(--u)); }
  .hl-item--bare { top: 0; height: 100%; pointer-events: none; }
  .hl-item--bare > * { pointer-events: auto; }

  /* -- the pink slabs -- */
  .hl-item > .hl-block--stat {
    position: absolute;
    top: 0;
    height: 100%;
    width: auto;
    aspect-ratio: auto;
  }
  .hl-item:first-child > .hl-block--stat { left: 0; width: calc(177 * var(--u)); }
  .hl-item--flip > .hl-block--stat { left: calc(207.3 * var(--u)); right: 0; }
  .hl-block--stat .hl-block__fill {
    inset: 0 0 0 auto;
    width: calc(400 * var(--u));
    background: var(--pink);
    box-shadow: none;
    -webkit-mask-image: var(--shape-slab);
    mask-image: var(--shape-slab);
  }
  .hl-item--flip .hl-block__fill { inset: 0 auto 0 0; transform: scaleX(-1); }
  .hl-block__fill::after { display: none; }

  /* -- type: every line has line-height 1, so its box top sits
     (0.875 − the glyph's ascent) × its size above the ink the design
     shows; the tops below are worked back from the design that way -- */
  .hl-block .hl-block__body {
    position: absolute;
    padding: 0;
    width: auto;
    align-items: flex-start;
    text-align: left;
    color: #23002b;
  }
  /* proportional figures, as the design sets them (tabular ones run
     narrower in Unbounded) */
  .hl-block .hl-big { line-height: 1; letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: normal; }
  .hl-block .hl-small { margin-top: 0; font-weight: 900; line-height: 1; white-space: nowrap; }

  .hl-item:first-child .hl-block__body { left: calc(21.4 * var(--u)); top: calc(20.6 * var(--u)); }
  .hl-item:first-child .hl-big { font-size: calc(29.6 * var(--u) * var(--hl-num-scale)); }
  .hl-item:first-child .hl-small { margin-top: calc(.7 * var(--u)); font-size: calc(17.5 * var(--u) * var(--hl-num-scale)); }

  .hl-item--flip .hl-block__body { left: 0; width: calc(157.4 * var(--u)); top: calc(11.5 * var(--u)); align-items: center; text-align: center; }
  .hl-item--flip .hl-big { font-size: calc(38.8 * var(--u) * var(--hl-num-scale)); }
  .hl-item--flip .hl-small { margin-top: calc(3.3 * var(--u)); font-size: calc(22.6 * var(--u) * var(--hl-num-scale)); }

  /* -- "+10 global partnerships": bare, flat pink, left -- */
  .hl-item--bare > .hl-block { position: absolute; left: calc(54 * var(--u)); top: calc(358.2 * var(--u)); }
  .hl-block--plain .hl-block__body { position: static; align-items: flex-start; text-align: left; }
  .hl-block--plain .hl-big { background: none; color: var(--pink); font-size: calc(48 * var(--u) * var(--hl-num-scale)); }
  .hl-block--plain .hl-plus { font-size: 1em; }
  .hl-block--plain .hl-small { color: var(--pink); font-size: calc(24.9 * var(--u) * var(--hl-num-scale)); margin-top: calc(-1.8 * var(--u)); }
  .hl-block--plain .hl-small + .hl-small { font-size: calc(11.5 * var(--u) * var(--hl-num-scale)); margin: calc(1 * var(--u)) 0 0 calc(2 * var(--u)); }

  /* -- the notes: purple slabs, light-pink type (its colour is the
     layer's own) -- */
  .hl-note, .hl-item:nth-child(even) > .hl-note {
    position: absolute;
    top: 0;
    height: 100%;
    margin: 0;
    font-size: calc(11 * var(--u) * var(--hl-note-scale));
    font-weight: 500;
    line-height: calc(16.4 * var(--u) * var(--hl-note-scale));
    letter-spacing: -.015em;
    text-align: left;
    white-space: nowrap;
  }
  /* row 1: the slab is the note itself, masked to the silhouette turned
     round; a float shaped to the rake steps each line in along it */
  .hl-item:first-child > .hl-note {
    left: calc(165.5 * var(--u));
    right: 0;
    padding-top: calc(12.6 * var(--u));
    background: #780d8a;
    -webkit-mask: var(--shape-slab-l) left top / calc(400 * var(--u)) 100% no-repeat;
    mask: var(--shape-slab-l) left top / calc(400 * var(--u)) 100% no-repeat;
  }
  /* the float starts at the first line (below the padding): the line
     starts fitted to the design's four are 39.8 − 0.372·y */
  .hl-item:first-child > .hl-note::before {
    content: "";
    float: left;
    width: calc(39.8 * var(--u));
    height: 100%;
    shape-outside: polygon(0 0, 100% 0, calc(10.3 * var(--u)) 100%, 0 100%);
  }
  /* row 3: the slab is drawn behind, raked the other way */
  .hl-item--flip > .hl-note {
    left: 0;
    width: calc(220 * var(--u));
    padding: calc(12.2 * var(--u)) 0 0 calc(42.4 * var(--u));
    isolation: isolate;
  }
  .hl-item--flip > .hl-note::before {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    z-index: -1;
    width: calc(400 * var(--u));
    background: #780d8a;
    -webkit-mask: var(--shape-slab) center / 100% 100% no-repeat;
    mask: var(--shape-slab) center / 100% 100% no-repeat;
    transform: scaleY(-1);
  }

  /* the strip becomes a swipeable rail rather than a squeezed row */
  .jobs__strip {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .jobs__strip::-webkit-scrollbar { display: none; }
  /* The frames' long edges are parallel and each rakes across a quarter of
     the width, so neighbours nest: an eighth in on each side lines the
     slants up and --jobs-gap opens an even channel between them. */
  .photo { width: 74%; max-width: none; margin-inline: calc(74% * -.125 + var(--jobs-gap)); scroll-snap-align: center; }
  .photo:first-child { margin-left: 0; }
  .photo:last-child { margin-right: 0; }
  .photo:hover { transform: none; }
  .jobs__caption { font-size: 13px; }
  /* the caption's line break is placed for desktop; here it would only
     leave a ragged first line */
  .jobs__caption br { display: none; }

  .foot__inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .foot__bar { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---- very small phones ----
   The title sizes stay on the ratios set in the phone block above; an
   override here would have to repeat BOTH of them (equal specificity, later
   in the file) or it silently puts the wide title back over the gutter. */
@media (max-width: 400px) {
  .tile__icon { width: 56px; }
  .tile__name { font-size: 19px; }
  .foot__cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---- short landscape phones: the hero must not clip its own controls ---- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { height: auto; min-height: 0; padding-bottom: 30px; }
  .hero__stage { padding-top: calc(var(--stripe-h) + var(--nav-h) + 12px); padding-bottom: 120px; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .w > i { transform: none; }
  .hslide__title { clip-path: none; transform: none; }
}

/* ============ 7. LATE OVERRIDES ============
   Two things that have to be declared after everything above:
   the magnetic offset (which must compose with, not replace, an
   element's own hover transform) and the parallax offset (same, for
   elements that already carry a centring transform of their own). */

/* `translate` is its own property, applied before `transform`, so a
   magnetic pull can ride on top of a hover scale without either one
   overwriting the other. */
[data-magnetic] {
  translate: var(--mx, 0px) var(--my, 0px);
  transition: translate .4s var(--ease);
}

/* --py is written by the parallax loop in js/main.js */
.hl-map { transform: translate(calc(-50% + var(--hl-map-x)), calc(-50% + var(--hl-map-y) + var(--py, 0px))); }
.jobs__strip { transform: translateY(var(--py, 0px)); }

/* ---- hero exit ----
   --out runs 0 → 1 across the hero's own height (written by js/main.js).
   The statement rises and dissolves on the way out, which is what makes the
   next section read as passing OVER the hero instead of merely after it.
   Guarded by prefers-reduced-motion: the property is simply never written,
   so both fall back to their resting values. */
.hero__stage {
  transform: translateY(calc(var(--out, 0) * -70px)) scale(calc(1 - var(--out, 0) * 0.04));
  opacity: calc(1 - var(--out, 0) * 1.35);
}
.hero__ui { opacity: calc(1 - var(--out, 0) * 2.2); }

/* ============ 8. TEXTURE PASS ============
   Grain and dots on the surfaces that would otherwise read as flat fields of
   colour. Every one of these is scoped INSIDE its own element, so where a
   blend mode is used it only ever composites against that element — never
   against the whole page (see the note on .fx above). */

/* the display type gets the same grained gradient as the logo mark */
.hslide__title .amp {
  background-image: var(--noise), var(--grad-text);
  background-blend-mode: overlay;
  background-size: 140px 140px, 100% 100%;
}

/* the two dark sections get a dot field, at the threshold of visible */
.featured::before,
.highlights::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--dots);
  background-size: 22px 22px;
  opacity: .07;
}
.highlights::after { opacity: .05; }

/* tiles keep a trace of their dot field at rest, not only on hover */
.tile::after { opacity: .05; }

/* pink and purple fills are big flat areas — grain earns its keep here */
.hl-block__fill::after { opacity: .16; }

.btn--solid, .jobs__cta img, .modal__email {
  position: relative;
}
.btn--solid::after,
.modal__email::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--noise);
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.btn--solid > *, .modal__email > * { position: relative; z-index: 1; }

/* the photo strip, tied into the page grain (the LED cards stay clean) */
.photo__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: var(--noise);
  opacity: .09;
  mix-blend-mode: overlay;
}
.photo__fill::after { opacity: .07; }

@media (prefers-reduced-motion: reduce) {
  .fx__grain { animation: none; }
}

/* a smaller glow patch where the section itself is smaller */
@media (max-width: 900px) {
  .hl-map--live { --glow-r: 150px; }
}

/* a shorter notice where the viewport is short of room */
@media (max-width: 700px) {
  :root { --stripe-h: 28px; }
  .ticker { letter-spacing: .04em; font-size: 10px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  :root { --stripe-h: 26px; }
}