/* ═══════════════════════════════════════════════════════════════════
   VODEE STUDIO — 2026 site
   Built from the Vodee Brand Guidelines (Figma ZuIJxgOaWV5XVNz0HRA10J):
   the Five Moves (dark field one light · one ring oversized · editorial
   spine · mixed-ratio mosaic · one cyan event), the Gradient System
   (Corner Bloom / Edge Wash / Deep Fall) and Poppins only. Structure and
   scroll choreography follow eggcorndigital.com (Dara's reference).
   ═══════════════════════════════════════════════════════════════════ */

/* 00 ─ Poppins, served from the site itself (speed pass 2026-11-02: no round trip to Google before the first paint).
   Latin + Yoruba subsets of Poppins 4.004 (SIL OFL), made by fontTools; the same seven faces Google served. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(../assets/fonts/poppins-300.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/poppins-400.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/poppins-500.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/poppins-600.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/poppins-700.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url(../assets/fonts/poppins-300i.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url(../assets/fonts/poppins-400i.woff2) format('woff2'); }

/* 01 ─ tokens ───────────────────────────────────────────────────── */
:root {
  --cyan: #00AFEF;
  --cyan-deep: #0089BD;
  --navy: #0A1A2F;
  --navy-hi: #0D2039;
  --ink: #05070A;
  --ink-2: #090D13;
  --slate: #8A99AD;
  --slate-dim: #56647A;
  --white: #FFFFFF;
  --paper: #F4F6F8;
  --line: rgba(255, 255, 255, .14);
  --line-dark: rgba(5, 7, 10, .14);

  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-mega: clamp(3.4rem, 13.2vw, 15rem);
  --fs-display: clamp(2.7rem, 6.9vw, 7.6rem);
  --fs-h1: clamp(2.3rem, 5.2vw, 5.6rem);
  --fs-h2: clamp(1.9rem, 3.7vw, 3.9rem);
  --fs-h3: clamp(1.35rem, 2.1vw, 2.1rem);
  --fs-lead: clamp(1.08rem, 1.42vw, 1.42rem);
  --fs-body: clamp(.97rem, 1.02vw, 1.06rem);
  --fs-small: .875rem;
  --fs-micro: .72rem;

  --gutter: clamp(20px, 4.2vw, 68px);
  --maxw: 1680px;
  --r: 14px;
  --r-sm: 10px;
  --header-h: 84px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --t: .3s;
}

/* 02 ─ base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--white);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--cyan); color: var(--ink); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--white); color: var(--ink); padding: 10px 16px; border-radius: 99px; font-weight: 600; font-size: var(--fs-small); transition: top .2s; }
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* 03 ─ type ─────────────────────────────────────────────────────── */
.t-mega, .t-display, .t-h1, .t-h2, .t-h3 { font-weight: 600; letter-spacing: -.045em; line-height: .96; }
.t-mega { font-size: var(--fs-mega); letter-spacing: -.06em; line-height: .86; }
.t-display { font-size: var(--fs-display); }
.t-h1 { font-size: var(--fs-h1); line-height: 1; }
.t-h2 { font-size: var(--fs-h2); letter-spacing: -.035em; line-height: 1.04; }
.t-h3 { font-size: var(--fs-h3); letter-spacing: -.025em; line-height: 1.12; font-weight: 500; }
.t-lead { font-size: var(--fs-lead); line-height: 1.5; font-weight: 300; color: rgba(255,255,255,.86); }
.t-body { color: rgba(255,255,255,.72); }
.t-small { font-size: var(--fs-small); }
.t-micro { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.t-slate { color: var(--slate); }
em, .em { font-style: italic; font-weight: 300; letter-spacing: -.03em; }
.t-mega em, .t-display em, .t-h1 em { font-weight: 300; }

/* the editorial spine — "01." two digits, trailing full stop */
.spine { display: inline-flex; align-items: center; gap: 14px; font-size: var(--fs-small); font-weight: 500; color: var(--white); letter-spacing: .02em; }
.spine b { font-weight: 600; }
.spine i { font-style: normal; color: var(--slate); font-weight: 400; }
.spine::after { content: ''; width: 46px; height: 1px; background: currentColor; opacity: .35; order: 1; }
.spine i { order: 2; }
.is-light .spine i, .is-light .t-slate { color: var(--slate-dim); }

/* split-text reveal masks (built by JS) */
.line { display: block; overflow: hidden; padding: .12em .16em .2em; margin: -.12em -.16em -.2em; }
.line > span { display: inline-block; will-change: transform; }
.word { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .16em .22em; margin: -.14em -.16em -.22em; }
.word > span { display: inline-block; will-change: transform; }

/* 04 ─ buttons & links ─────────────────────────────────────────── */
.btn {
  --bg: var(--cyan); --fg: var(--ink);
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  height: 54px; padding: 0 26px 0 28px; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font-weight: 600; font-size: .95rem; letter-spacing: -.01em; white-space: nowrap;
  overflow: hidden; isolation: isolate;
  transition: transform .5s var(--ease-out), box-shadow .4s var(--ease-out);
}
.btn::before { content: ''; position: absolute; inset: 0; background: var(--white); border-radius: inherit; transform: translateY(101%); transition: transform .5s var(--ease-out); z-index: -1; }
.btn:hover::before { transform: translateY(0); }
.btn:hover { box-shadow: 0 18px 50px -18px rgba(0, 175, 239, .7); }
.btn .arr { width: 18px; height: 18px; transition: transform .5s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px) rotate(-45deg); }
.btn--ghost { --bg: transparent; --fg: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.btn--ghost::before { background: var(--white); }
.btn--ghost:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--white); }
.btn--sm { height: 44px; padding: 0 20px; font-size: .86rem; }
.btn--xl { height: 76px; padding: 0 40px 0 44px; font-size: 1.15rem; gap: 16px; }
.btn--xl .arr { width: 22px; height: 22px; }
.is-light .btn--ghost { --fg: var(--ink); box-shadow: inset 0 0 0 1px rgba(5,7,10,.3); }
.is-light .btn--ghost::before { background: var(--ink); }
.is-light .btn--ghost:hover { color: var(--white); }

.link {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500; font-size: 1rem; padding-bottom: 4px;
}
.link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .6s var(--ease-out); }
.link:hover::after { transform: scaleX(0); transform-origin: right; animation: relink .9s var(--ease-out) .25s forwards; }
@keyframes relink { 0% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
.link svg { width: 16px; height: 16px; transition: transform .5s var(--ease-out); }
.link:hover svg { transform: translateX(5px); }

/* 05 ─ header: logo left · socials + two-line menu right (Eggcorn layout) ── */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 90; height: var(--header-h);
  display: flex; align-items: center;
  transition: transform .6s var(--ease-out), color .4s;
  color: var(--white);
}
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hdr.is-hidden { transform: translateY(-110%); }
.hdr::before { content: ''; position: absolute; inset: 0 0 -24px 0; background: linear-gradient(180deg, rgba(5,7,10,.92) 0%, rgba(5,7,10,.78) 55%, rgba(5,7,10,0) 100%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.hdr.is-scrolled::before { opacity: 1; }
.hdr.on-light { color: var(--ink); }
.hdr.on-light::before { background: linear-gradient(180deg, rgba(244,246,248,.95) 0%, rgba(244,246,248,.8) 55%, rgba(244,246,248,0) 100%); }
.logo { display: inline-flex; align-items: center; width: 118px; position: relative; z-index: 2; }
.logo img { width: 100%; height: auto; }
.logo .logo-dark { display: none; }
.hdr.on-light .logo .logo-light { display: none; }
.hdr.on-light .logo .logo-dark { display: block; }
.hdr__end { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); position: relative; z-index: 2; }
.hdr__social, .menu__social, .ftr__social { display: flex; align-items: center; gap: 6px; }
.hdr__social a, .menu__social a, .ftr__social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; opacity: .82; transition: opacity .3s, color .3s, background-color .3s, transform .5s var(--ease-out); }
.hdr__social a:hover, .menu__social a:hover, .ftr__social a:hover { opacity: 1; color: var(--cyan); background: rgba(0,175,239,.1); transform: translateY(-2px); }
.ico { width: 19px; height: 19px; display: block; }
.ftr__social { gap: 4px; margin-left: -10px; }
.ftr__social--sm a { width: 32px; height: 32px; }
.ftr__social--sm .ico { width: 16px; height: 16px; }
.cdetails .ftr__social { margin: 4px 0 0 -10px; }
.cdetails .handle { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--slate); font-weight: 400; }
/* the two lines — morph into a cyan X when the menu opens */
.burger { width: 58px; height: 44px; position: relative; display: block; }
.burger span { position: absolute; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .7s var(--ease-io), top .7s var(--ease-io), width .5s var(--ease-out), background-color .4s; }
.burger span:nth-child(1) { top: 17px; width: 54px; }
.burger span:nth-child(2) { top: 25px; width: 54px; }
.burger:hover span:nth-child(2) { width: 34px; }
.menu-open .burger span { background: var(--cyan); width: 40px !important; }
.menu-open .burger span:nth-child(1) { top: 21px; transform: rotate(32deg); }
.menu-open .burger span:nth-child(2) { top: 21px; transform: rotate(-32deg); }

/* 06 ─ menu: the header bar grows down into a black, blurred panel ── */
.menu {
  position: fixed; inset: 0; z-index: 80; color: var(--white);
  background: rgba(3, 4, 6, .96);
  -webkit-backdrop-filter: blur(22px) saturate(1.1); backdrop-filter: blur(22px) saturate(1.1);
  clip-path: inset(0 0 100% 0); visibility: hidden; pointer-events: none;
}
.menu.is-open { visibility: visible; pointer-events: auto; }
.menu__inner { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; padding-top: calc(var(--header-h) + clamp(20px, 4vh, 48px)); padding-bottom: clamp(28px, 5vh, 56px); }
.menu__info { display: flex; flex-direction: column; align-items: flex-start; }
.menu__based { font-size: clamp(2rem, 5vw, 5.4rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; max-width: 11.5em; }
.menu__based span { color: var(--cyan); }
.menu__clock { margin-top: clamp(26px, 5vh, 56px); font-size: clamp(2rem, 4.2vw, 4.6rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.menu__tz { margin-top: 10px; font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--slate); }
.menu__cta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.menu__mail { font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px; }
.menu__social { margin-top: 26px; display: none; }
.menu__links { list-style: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; text-align: right; }
.menu__links li { overflow: hidden; }
.menu__links a { display: block; font-size: clamp(2.8rem, 5.85vw, 6.4rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; padding: .04em 0 .08em; color: var(--white); }

.roll { display: inline-grid; overflow: hidden; vertical-align: top; }
.roll > span { grid-area: 1 / 1; transition: transform .6s var(--ease-out); }
.roll > span + span { transform: translateY(100%); font-style: italic; font-weight: 300; letter-spacing: -.035em; color: var(--cyan); }
.menu__links a:hover .roll > span:first-child { transform: translateY(-100%); }
.menu__links a:hover .roll > span + span { transform: translateY(0); }
.menu-open .hdr { color: var(--white) !important; }
.menu-open .hdr .logo .logo-light { display: block !important; }
.menu-open .hdr .logo .logo-dark { display: none !important; }
.menu-open .hdr::before { opacity: 0 !important; }
.menu-open .hdr__social a { opacity: 1; }

/* 07 ─ page transition + loader ────────────────────────────────── */
.curtain { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: repeat(6, 1fr); pointer-events: none; }
.curtain i { background: var(--navy); transform: scaleY(1); transform-origin: top; border-right: 1px solid rgba(255,255,255,.04); }
.curtain__mark { position: absolute; left: 50%; top: 50%; width: 240px; transform: translate(-50%, -50%); text-align: center; color: var(--slate); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; }
.curtain__mark svg { width: 180px; height: auto; margin: 0 auto 14px; overflow: visible; }
.curtain__mark .ring-draw { fill: none; stroke: var(--white); stroke-width: 1.5; }
.curtain__mark img { width: 120px; margin: -88px auto 44px; opacity: 0; }
html.no-js .curtain { display: none; }
html:not(.curtain-ok) .curtain { animation: curtainFailsafe .4s ease 5s forwards; }
@keyframes curtainFailsafe { to { opacity: 0; visibility: hidden; } }

/* 08 ─ cursor ─────────────────────────────────────────────────── */
.cursor { position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.cursor__dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--white); mix-blend-mode: difference; transition: transform .35s var(--ease-out), opacity .3s; }
.cursor__label {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.2); opacity: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 112px; height: 112px; border-radius: 50%; background: var(--white); color: var(--ink);
  font-size: .78rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; padding: 12px;
  transition: transform .5s var(--ease-out), opacity .3s;
}
.cursor.is-label .cursor__label { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.cursor.is-label .cursor__dot { opacity: 0; }
.cursor.is-link .cursor__dot { transform: scale(4.5); }
.has-cursor [data-cursor] { cursor: none; }

/* 09 ─ ring device ─────────────────────────────────────────────── */
.ring { position: absolute; pointer-events: none; overflow: visible; }
.ring ellipse, .ring path { fill: none; stroke: var(--white); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ring--cyan ellipse, .ring--cyan path { stroke: var(--cyan); }
.ticker { position: absolute; pointer-events: none; overflow: visible; }
.ticker ellipse { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ticker ellipse:first-child { stroke: var(--cyan); stroke-opacity: .9; }
.is-light .ticker ellipse { stroke: rgba(5,7,10,.16); }

/* 10 ─ home: hero — copy left · portrait on a cyan→teal orb (bust cut by the
   bottom edge, Minimalist-Hero composition) · headline right ── */
.hero {
  --ph: min(74vh, 780px);                 /* portrait height (desktop) */
  --pb: 3vh;                              /* lift above the bottom edge */
  --stage-x: 47.5%;                       /* centre of the middle grid column */
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate;
  background: radial-gradient(110% 85% at 46% 46%, #0B1A2D 0%, #07101C 45%, var(--ink) 80%);
  display: flex; flex-direction: column;
}
@supports (height: 100svh) { .hero { --ph: min(74svh, 780px); } }
.hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 16vh; background: linear-gradient(180deg, rgba(5,7,10,0), var(--ink) 92%); z-index: 3; pointer-events: none; }
.hero__stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__orb { --orb: min(33vw, 58vh, 560px); position: absolute; left: var(--stage-x); top: calc(100% - var(--pb) - var(--ph) * .47); width: var(--orb); height: var(--orb); margin: calc(var(--orb) * -.5) 0 0 calc(var(--orb) * -.5); border-radius: 50%; z-index: 0;
  background: radial-gradient(circle at 32% 26%, #C4F5FF 0%, #5AD6F8 18%, #00AFEF 42%, #00A3C4 66%, #00AFA0 88%, #009C8C 100%);
  box-shadow: 0 0 160px rgba(0, 175, 239, .42), 0 0 60px rgba(0, 200, 210, .25), inset -30px -40px 90px rgba(0, 60, 90, .45), inset 20px 26px 60px rgba(255, 255, 255, .18); }
.hero__orb span { position: absolute; inset: -9%; border-radius: 50%; border: 1px solid rgba(0, 175, 239, .22); }
.hero__figure { position: absolute; z-index: 2; bottom: var(--pb); left: var(--stage-x); height: var(--ph); aspect-ratio: 1172 / 1600; margin-left: calc(var(--ph) * -.366); will-change: transform; }
.fig-img { position: absolute; inset: 0; z-index: 1; display: block; }
.fig-img picture, .fig-img img { display: block; width: 100%; height: 100%; }
.fig-img img { object-fit: contain; object-position: bottom center; }
.hero__stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30vh; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,7,10,0) 0%, rgba(5,7,10,.75) 55%, var(--ink) 100%); }
.fig-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.fig-ring--front { z-index: 2; }
.fig-ring ellipse { fill: none; stroke: var(--white); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fig-ring .comet { stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 60 940; animation: comet 9s linear infinite; }
@keyframes comet { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1000; } }
.hero__grid { flex: 1; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.1fr) minmax(0, 1.08fr); align-items: center; gap: 24px; padding-top: var(--header-h); position: relative; z-index: 4; pointer-events: none; }
.hero__grid a, .hero__grid button { pointer-events: auto; }
.hero__left { align-self: center; padding-top: 10vh; max-width: 330px; }
.hero__sub { font-size: clamp(.95rem, 1.05vw, 1.05rem); line-height: 1.7; color: rgba(255,255,255,.8); font-weight: 400; }
.hero__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }
.hero__right { align-self: center; margin-left: 1vw; position: relative; z-index: 3; }
.hero__title { font-size: clamp(2.6rem, min(4.75vw, 80px), 6.4rem); font-weight: 700; letter-spacing: -.055em; line-height: .9; text-shadow: 0 10px 40px rgba(0,0,0,.35); }
.hero__title [data-l] { display: block; }
.hero__title em { font-weight: 300; letter-spacing: -.05em; }
.hero__foot { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: clamp(22px, 4vh, 40px); font-size: var(--fs-small); color: var(--slate); }
.hero__scroll { display: flex; align-items: center; gap: 12px; font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--slate); }
.hero__scroll span { width: 1px; height: 44px; background: linear-gradient(var(--white), transparent); position: relative; overflow: hidden; }
.hero__scroll span::after { content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--cyan); animation: drip 2.2s var(--ease-io) infinite; }
@keyframes drip { 0% { top: -100%; } 60%, 100% { top: 100%; } }

/* 11 ─ home: showreel ─────────────────────────────────────────── */
.reel { position: relative; height: 230vh; background: var(--ink); }
.reel__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.reel__frame { position: relative; width: 100vw; height: 100vh; height: 100svh; clip-path: inset(30% 31% 30% 31% round 18px); will-change: clip-path; background: var(--navy); }
.reel__frame video, .reel__frame img { width: 100%; height: 100%; object-fit: cover; }
.reel__bg { display: none; }
@media (max-width: 860px) {
  .reel__bg { display: block; position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(30px) brightness(.45); }
  .reel__frame video { position: relative; object-fit: contain; }
}
.reel__frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,10,.25), transparent 30%, transparent 70%, rgba(5,7,10,.45)); pointer-events: none; }
.reel__words { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gutter); pointer-events: none; z-index: 2; }
.reel__words span { font-size: clamp(2.4rem, 7vw, 8rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; will-change: transform; }
.reel__words span:last-child em { font-weight: 300; }
.reel__badge { position: absolute; z-index: 3; left: 50%; bottom: 6vh; width: 132px; height: 132px; margin-left: -66px; border-radius: 50%; background: rgba(5,7,10,.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: grid; place-items: center; transition: transform .6s var(--ease-out), background .4s; }
.reel__badge:hover { transform: scale(1.08); background: rgba(0,175,239,.9); }
.reel__badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.reel__badge text { fill: var(--white); font-size: 15.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.reel__badge i { width: 44px; height: 44px; border-radius: 50%; background: var(--white); display: grid; place-items: center; }
.reel__badge i svg { position: static; width: 13px; height: 13px; fill: var(--ink); margin-left: 3px; animation: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.reel__btn { position: absolute; z-index: 3; left: 50%; bottom: 7vh; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 14px; border-radius: 99px; background: rgba(5,7,10,.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: .86rem; font-weight: 500; border: 1px solid rgba(255,255,255,.2); }
.reel__btn i { width: 26px; height: 26px; border-radius: 50%; background: var(--white); display: grid; place-items: center; }
.reel__btn i svg { width: 10px; height: 10px; fill: var(--ink); margin-left: 2px; }

/* 12 ─ home: storytelling orbit (3D ring of work cards; js/orbit.js) ─ */
/* ── the section ─────────────────────────────────────────────────── */
.orbit { position: relative; height: 320vh; background: var(--ink); }
.orbit__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* one light: a pool of deep navy inside the ring. A fixed 1000px disc that JS
   moves/scales onto the ring's projected ellipse (transform only, painted once) */
.orbit__bloom { position: absolute; left: 50%; top: 50%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; pointer-events: none;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(16, 40, 70, .95) 0%, rgba(13, 32, 57, .7) 40%, rgba(10, 26, 47, .25) 70%, rgba(5, 7, 10, 0) 100%);
  will-change: transform, opacity; }

/* the perspective stage: every layer below shares ONE stacking context, so
   z-index (set from depth each frame) interleaves cards, line and ring halves */
.orbit__space { position: absolute; inset: 0; perspective: 1900px; perspective-origin: 50% 50%; }
.orbit__cards { display: contents; }

.orbit__track { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.orbit__track--back { z-index: 5; }
.orbit__track--front { z-index: 45; }
.orbit__track path { fill: none; }
.orbit__ring { stroke: rgba(255, 255, 255, .5); stroke-width: 1.25; }
.orbit__track--back .orbit__ring { stroke: rgba(255, 255, 255, .26); }
.orbit__comets { stroke-linecap: round; }
.orbit__glow { stroke: var(--cyan); stroke-width: 12; stroke-dasharray: 70 930; opacity: .13; }
.orbit__comet { stroke: var(--cyan); }
.orbit__comet--tail { stroke-width: 1.5; stroke-dasharray: 120 880; opacity: .45; }
.orbit__comet--body { stroke-width: 2.6; stroke-dasharray: 60 940; }
.orbit__comet--head { stroke: #CFF2FF; stroke-width: 3.4; stroke-dasharray: 9 991; }
.orbit__track--back .orbit__comet { opacity: .5; }
.orbit__track--back .orbit__comet--tail { opacity: .25; }
.orbit__track--back .orbit__glow { opacity: .06; }

.orbit__line {
  position: absolute; left: 50%; top: 50%; z-index: 40; width: min(15ch, 86vw);
  transform: translate(-50%, -50%); text-align: center; pointer-events: none;
  font-weight: 600; letter-spacing: -.045em; line-height: 1;
  font-size: clamp(2.1rem, 4.9vw, 5.6rem);
  text-shadow: 0 8px 40px rgba(5, 7, 10, .65), 0 2px 10px rgba(5, 7, 10, .5);
  will-change: transform, opacity;
}
.orbit__line em { font-weight: 300; }

/* ── cards ───────────────────────────────────────────────────────── */
.orbit__card {
  --cw: clamp(200px, 19vw, 360px);
  position: absolute; left: 50%; top: 50%; width: var(--cw); aspect-ratio: 16 / 9;
  margin: calc(var(--cw) / -2 / 1.7778) 0 0 calc(var(--cw) / -2);
  will-change: transform;
}
.orbit__card.is-p { --cw: clamp(148px, 14vw, 266px); aspect-ratio: 4 / 5; margin: calc(var(--cw) / -2 * 1.25) 0 0 calc(var(--cw) / -2); }
.orbit__face, .orbit__back { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; }
.orbit__face, .orbit__back { background: var(--navy); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.orbit__face picture, .orbit__face img, .orbit__back picture, .orbit__back img { width: 100%; height: 100%; }
.orbit__face img, .orbit__back img { object-fit: cover; }
.orbit__face::after, .orbit__back::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,7,10,0) 45%, rgba(5,7,10,.85) 100%); }
.orbit__cap { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 11px; display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-micro); line-height: 1.2; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); white-space: nowrap; }
.orbit__cap b { font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.orbit__cap span { color: rgba(255, 255, 255, .62); font-weight: 400; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; }
/* depth veil — darkens far cards without a filter (opacity only) */
.orbit__veil { position: absolute; inset: 0; z-index: 3; background: var(--ink); opacity: 0; pointer-events: none; will-change: opacity; }
/* specular sheen — slides across a plate as it turns through the light (transform + opacity) */
.orbit__sheen { position: absolute; inset: -2% -60%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.16) 49%, rgba(255,255,255,.05) 53%, rgba(255,255,255,0) 62%);
  will-change: transform, opacity; }
.orbit__back { display: none; }

/* "outward" mode: the card is a two-sided plate — the same film frame on both sides (Dara 2026-10-21) */
.orbit.is-outward .orbit__card { transform-style: preserve-3d; }
.orbit.is-outward .orbit__face, .orbit.is-outward .orbit__back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.orbit.is-outward .orbit__back { display: block; transform: rotateY(180deg); }

/* phones: fewer, smaller cards (JS also reads this breakpoint) */
@media (max-width: 860px) {
  .orbit { height: 280vh; }
  .orbit__card { --cw: clamp(170px, 62vw, 360px); }
  .orbit__card.is-p { --cw: clamp(128px, 46vw, 270px); }
  .orbit__card[data-desk] { display: none; }
  .orbit__sheen { display: none; }
  .orbit__cap { left: 10px; bottom: 8px; gap: 7px; font-size: .62rem; }
  .orbit__cap span { display: none; }
  .orbit__line { font-size: clamp(1.8rem, 8.8vw, 3.2rem); width: min(88vw, 10.5em); }
}

/* no JS / JS failed: a plain strip of the same work, no 3D */
.orbit:not(.is-3d) { height: auto; padding: 18vh 0 14vh; }
.orbit:not(.is-3d) .orbit__pin { position: relative; height: auto; overflow: visible; }
.orbit:not(.is-3d) .orbit__space { position: relative; perspective: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; padding: 0 20px; }
.orbit:not(.is-3d) .orbit__track { display: none; }
.orbit:not(.is-3d) .orbit__line { position: relative; left: auto; top: auto; transform: none; flex: 0 0 100%; margin: 0 auto 6vh; text-wrap: balance; }
.orbit:not(.is-3d) .orbit__card { position: relative; left: auto; top: auto; margin: 0; --cw: clamp(150px, 22vw, 320px); }
.orbit:not(.is-3d) .orbit__card.is-p { --cw: clamp(112px, 16vw, 236px); }
.orbit:not(.is-3d) .orbit__bloom { display: none; }

/* reduced motion: one still frame, no pin */
.orbit.is-static { height: auto; }
.orbit.is-static .orbit__pin { position: relative; }

/* 13 ─ credibility marquee ───────────────────────────────────── */
.cred { padding: clamp(40px, 6vh, 80px) 0 clamp(70px, 10vh, 120px); position: relative; }
.cred__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px 48px; margin-bottom: clamp(44px, 7vh, 80px); }
.cred__head p { color: var(--slate); max-width: 26ch; text-align: right; }
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(18px, 2.4vh, 28px) 0; display: flex; user-select: none; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { border-top: 0; }
.marquee__track { display: flex; flex-shrink: 0; align-items: center; gap: clamp(28px, 3.4vw, 56px); padding-right: clamp(28px, 3.4vw, 56px); animation: mq 48s linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 56s; }
.marquee__track span { font-size: clamp(1.9rem, 4.4vw, 4.6rem); font-weight: 600; letter-spacing: -.045em; white-space: nowrap; line-height: 1.1; color: var(--white); transition: color .3s; }
.marquee--rev .marquee__track span { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.45); }
.marquee__track svg { width: clamp(30px, 3.4vw, 54px); height: auto; flex-shrink: 0; }
.marquee__track svg ellipse { fill: none; stroke: var(--slate); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.marquee:hover .marquee__track { animation-play-state: paused; }
/* client logos (2026-10-21): real colours, always on their own dark band (it stays dark when the page turns to
   paper — many marks are white), one visual weight (--s from brand_logos.py) */
.marquee--logos { --lh: clamp(32px, 3.5vw, 58px); padding: clamp(24px, 3.4vh, 38px) 0; background: var(--ink); }
.marquee--logos .marquee__track { gap: clamp(46px, 5.4vw, 100px); padding-right: clamp(46px, 5.4vw, 100px); animation-duration: 70s; }
.marquee--logos.marquee--rev .marquee__track { animation-duration: 78s; }
.marquee--logos img { height: calc(var(--lh) * var(--s, 1)); width: auto; max-width: none; flex-shrink: 0; opacity: .6; transition: opacity .4s; }
.marquee--logos img:hover { opacity: 1; }
/* numbers (Dara 2026-10-21, Eggcorn's performance row): label over a big figure, hairline columns; JS counts them up */
.stats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); margin: 0 0 clamp(44px, 7vh, 90px); }
.stat { display: grid; justify-items: center; align-content: start; gap: clamp(10px, 1.6vh, 16px); padding: clamp(28px, 5vh, 54px) 12px 0; text-align: center; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat__label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.stat__num { font-size: clamp(2.6rem, 5.6vw, 5.8rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 28px; }
}
.paper .marquee--logos { border-color: var(--ink); }
@keyframes mq { to { transform: translateX(-100%); } }

/* 14 ─ section heads ─────────────────────────────────────────── */
.sec { position: relative; padding: clamp(96px, 15vh, 190px) 0; }
.sec__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 56px; align-items: end; margin-bottom: clamp(48px, 8vh, 96px); }
.sec__head .spine { grid-column: 1 / -1; }
.sec__head p { max-width: 36ch; justify-self: end; color: var(--slate); }
.sec__head .link { justify-self: end; }
.is-light .sec__head p { color: var(--slate-dim); }

/* 15 ─ home: stacked work panels ─────────────────────────────── */
.stack { position: relative; }
.panel { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: block; color: var(--white); background: var(--ink); }
.stack .panel:not(:last-child) { margin-bottom: 55vh; }
.panel__media { position: absolute; inset: 0; will-change: transform; }
.panel__media img, .panel__media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); will-change: transform; }
.panel__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,10,.55) 0%, rgba(5,7,10,0) 26%, rgba(5,7,10,0) 48%, rgba(5,7,10,.88) 100%); }
.panel__dim { position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; }
.panel__top { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 10px); display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.3); font-size: var(--fs-small); font-weight: 500; }
.panel__top span:last-child { text-align: right; }
.panel__body { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(32px, 7vh, 80px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 24px 56px; align-items: end; }
.panel__title { font-size: clamp(2.4rem, 6.4vw, 7.4rem); }
.panel__info { display: grid; gap: 14px; justify-items: start; max-width: 34ch; }
.panel__info p { color: rgba(255,255,255,.82); }
.panel__tag { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 99px; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }

/* 16 ─ light section (dark → white switch) ───────────────────── */
.is-light { color: var(--ink); }
.is-light .t-lead { color: rgba(5,7,10,.78); }
.is-light .t-body { color: rgba(5,7,10,.7); }
.bg-shift { position: fixed; inset: 0; z-index: -1; background: var(--paper); opacity: 0; pointer-events: none; }
.light-sec { background: var(--paper); }
.has-bgshift .light-sec { background: transparent; }
.cred, .sec, .spine, .marquee__track span { transition: color .8s var(--ease-out), -webkit-text-stroke-color .8s var(--ease-out); }
.paper .cred, .paper .sec:not(.light-sec) { color: var(--ink); }
.paper .cred__head p, .paper .sec:not(.light-sec) .sec__head p { color: var(--slate-dim); }
.paper .spine, body:not(.has-bgshift) .is-light .spine { color: var(--ink); }
.paper .marquee__track span { color: var(--ink); }
.paper .marquee--rev .marquee__track span { color: transparent; -webkit-text-stroke-color: rgba(5,7,10,.45); }
.paper .marquee { border-color: var(--line-dark); }
.paper .marquee__track svg ellipse { stroke: var(--slate-dim); }

/* 17 ─ services index list (+ cursor image reveal) ───────────── */
.wwd__mega { font-size: clamp(3.6rem, 15.5vw, 17rem); letter-spacing: -.065em; line-height: .82; font-weight: 600; margin-bottom: clamp(28px, 5vh, 56px); }
.wwd__lead { font-size: clamp(1.6rem, 3.3vw, 3.4rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; color: var(--slate-dim); max-width: 22ch; margin-bottom: clamp(56px, 10vh, 120px); }
.index { list-style: none; border-top: 1px solid var(--line-dark); }
.index__row { position: relative; border-bottom: 1px solid var(--line-dark); }
.index__row a, .index__row > div { position: relative; display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.05fr) 44px; gap: 18px 40px; align-items: center; padding: clamp(26px, 4.2vh, 46px) 0; z-index: 1; }
.index__row::before { content: ''; position: absolute; inset: 0 calc(var(--gutter) * -1); background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease-out); z-index: 0; }
.index__num { font-size: var(--fs-small); font-weight: 600; color: var(--slate-dim); transition: color .4s; }
.index__title { font-size: clamp(1.7rem, 3.6vw, 3.8rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; transition: color .4s, transform .6s var(--ease-out); }
.index__text { color: rgba(5,7,10,.66); font-size: var(--fs-body); max-width: 46ch; transition: color .4s; }
.index__arr { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-dark); transition: background .4s, box-shadow .4s, transform .6s var(--ease-out); }
.index__arr svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .index__row:hover::before { transform: scaleY(1); transform-origin: top; }
  .index__row:hover .index__title { color: var(--white); transform: translateX(14px); }
  .index__row:hover .index__num { color: var(--slate); }
  .index__row:hover .index__text { color: rgba(255,255,255,.72); }
  .index__row:hover .index__arr { background: var(--cyan); box-shadow: none; color: var(--ink); transform: rotate(-45deg); }
}
.reveal-img { position: fixed; left: 0; top: 0; z-index: 60; width: clamp(240px, 22vw, 380px); aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-6deg); transition: opacity .35s, transform .6s var(--ease-out); box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); }
.reveal-img.on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
.reveal-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wwd__foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: clamp(40px, 6vh, 64px); flex-wrap: wrap; }

/* 18 ─ studio teaser: split + mosaic ─────────────────────────── */
.studio { overflow: hidden; }
.split { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.mosaic { display: grid; gap: 16px; grid-template-columns: 1.25fr .75fr; grid-template-rows: 1fr .62fr; aspect-ratio: 1.08; }
.mosaic figure { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--navy); }
.mosaic figure img { width: 100%; height: 115%; object-fit: cover; will-change: transform; }
.mosaic figure:nth-child(1) { grid-row: 1 / 2; grid-column: 1 / 2; }
.mosaic figure:nth-child(2) { grid-row: 1 / 3; grid-column: 2 / 3; }
.mosaic figure:nth-child(3) { grid-row: 2 / 3; grid-column: 1 / 2; display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; background: none; }
.mosaic figure:nth-child(3) span { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--navy); }
.mosaic figure:nth-child(3) img { position: absolute; inset: 0; height: 100%; }
.mosaic figcaption { position: absolute; left: 12px; bottom: 10px; z-index: 2; font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.studio__copy h2 { margin: 22px 0 28px; }
.studio__copy .t-lead { margin-bottom: 36px; }
.studio .ticker { width: 70vw; right: -48vw; bottom: -44vw; }

/* 19 ─ CTA ───────────────────────────────────────────────────── */
.cta { position: relative; overflow: hidden; padding: clamp(120px, 20vh, 240px) 0 clamp(110px, 16vh, 200px); text-align: center; isolation: isolate; }
.cta::before { /* Edge Wash — cyan along the bottom edge only */
  content: ''; position: absolute; left: -10%; right: -10%; bottom: -40vh; height: 80vh; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,175,239,.38), rgba(0,175,239,.08) 55%, transparent 75%);
}
.cta__title { font-size: clamp(3.4rem, 12.4vw, 14rem); letter-spacing: -.06em; line-height: .86; margin: 26px 0 34px; }
.cta__title em { font-weight: 300; }
.cta p { max-width: 38ch; margin: 0 auto 44px; color: rgba(255,255,255,.78); font-size: var(--fs-lead); font-weight: 300; }
.cta .ticker { width: 110vw; left: -5vw; bottom: -74vw; z-index: -1; opacity: .9; }

/* 20 ─ footer ───────────────────────────────────────────────── */
.ftr { position: relative; background: var(--ink); border-top: 1px solid var(--line); padding: clamp(64px, 10vh, 110px) 0 28px; overflow: hidden; }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.ftr__brand p { color: var(--slate); max-width: 30ch; margin-top: 16px; }
.ftr__brand .logo { width: 132px; }
.ftr h3 { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--slate); margin-bottom: 18px; }
.ftr ul { list-style: none; display: grid; gap: 10px; }
.ftr ul a { opacity: .86; transition: opacity .3s; }
.ftr ul a:hover { opacity: 1; }
.ftr__clock { font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.ftr__clock + p { color: var(--slate); font-size: var(--fs-small); margin-top: 10px; }
.ftr__mail { display: inline-block; font-size: clamp(1.5rem, 3.4vw, 3.2rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; margin: clamp(56px, 9vh, 96px) 0 0; position: relative; }
.ftr__mail::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--white); transform-origin: left; transition: transform .7s var(--ease-out); }
.ftr__mail:hover::after { transform: scaleX(.3); }
.ftr__word { display: block; width: min(100%, 760px); margin: clamp(56px, 9vh, 110px) auto 0; }
.ftr__word img { width: 100%; height: auto; }
.ftr__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--slate); font-size: var(--fs-small); }

/* 21 ─ inner pages: page hero ────────────────────────────────── */
.phero { position: relative; overflow: hidden; padding: calc(var(--header-h) + clamp(70px, 14vh, 170px)) 0 clamp(64px, 10vh, 120px); isolation: isolate; }
.phero::before { content: ''; position: absolute; width: 90vmax; height: 90vmax; right: -50vmax; top: -55vmax; z-index: -1; background: radial-gradient(closest-side, rgba(0,175,239,.34), rgba(0,175,239,.08) 50%, transparent 72%); }
.phero__title { font-size: clamp(3.2rem, 11vw, 12.5rem); letter-spacing: -.06em; line-height: .86; margin: 24px 0 clamp(30px, 5vh, 56px); }
.phero__title em { font-weight: 300; }
.phero__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 56px; align-items: end; }
.phero__row .t-lead { max-width: 40ch; justify-self: end; }
.phero .ring { width: 74vw; height: 26vw; right: -22vw; top: calc(var(--header-h) - 2vw); z-index: -1; opacity: .9; }

/* 22 ─ about ──────────────────────────────────────────────────── */
.statement { font-size: clamp(1.8rem, 3.6vw, 3.9rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.12; max-width: 24ch; }
.statement .dim { color: var(--slate-dim); }
.about-intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 110px); }
.about-intro .t-body + .t-body { margin-top: 1.1em; }
.founder { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.founder__photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: visible; }
.founder__photo .ph { position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; background: var(--navy); }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.founder__photo .founder__ring { left: -18%; top: -4%; width: 136%; height: auto; aspect-ratio: 1; z-index: 2; }
.founder__name { font-size: var(--fs-small); color: var(--slate); margin: 20px 0 28px; }
.founder blockquote { font-size: clamp(1.3rem, 2.2vw, 2.1rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.28; margin-bottom: 28px; }
.founder .t-body + .t-body { margin-top: 1em; }
.roles { list-style: none; margin-top: clamp(40px, 7vh, 80px); border-top: 1px solid var(--line); }
.roles li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; border-bottom: 1px solid var(--line); padding: clamp(14px, 2.6vh, 26px) 0; }
.roles li span:first-child { font-size: clamp(2.2rem, 7vw, 7.6rem); font-weight: 600; letter-spacing: -.055em; line-height: .95; transition: color .4s, transform .6s var(--ease-out); }
.roles li span:last-child { color: var(--slate); font-size: var(--fs-small); }
@media (hover: hover) { .roles li:hover span:first-child { color: transparent; -webkit-text-stroke: 1px var(--white); transform: translateX(16px); } }
.process { position: relative; }
.process__pin { overflow: hidden; }
.process__track { display: flex; gap: 20px; width: max-content; padding-inline: var(--gutter); }
.step { position: relative; width: clamp(300px, 34vw, 520px); min-height: clamp(380px, 56vh, 560px); padding: 34px; border-radius: var(--r); background: linear-gradient(160deg, rgba(13,32,57,.95), rgba(9,13,19,.95)); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.step__num { font-size: clamp(5rem, 11vw, 10rem); font-weight: 600; letter-spacing: -.07em; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.35); }
.step h3 { font-size: clamp(1.8rem, 2.8vw, 2.8rem); font-weight: 600; letter-spacing: -.04em; margin-bottom: 14px; }
.step p { color: rgba(255,255,255,.72); }
.step .ring { width: 120%; height: 60%; right: -55%; top: -18%; opacity: .5; }
.process__note { margin-top: 40px; color: var(--slate); }
.pullquote { text-align: center; }
.pullquote p:first-child { font-size: clamp(2.2rem, 6vw, 6.4rem); font-weight: 600; letter-spacing: -.05em; line-height: .98; max-width: 16ch; margin: 0 auto 28px; }
.pullquote p:last-child { font-size: var(--fs-lead); font-weight: 300; color: var(--slate); max-width: 40ch; margin: 0 auto; }

/* 23 ─ services page ─────────────────────────────────────────── */
.svc { border-top: 1px solid var(--line); padding: clamp(64px, 11vh, 130px) 0; }
.svc__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 110px); }
.svc__side { position: relative; }
.svc__sticky { position: sticky; top: calc(var(--header-h) + 30px); }
.svc__num { font-size: clamp(5rem, 12vw, 12rem); font-weight: 600; letter-spacing: -.07em; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.3); margin-bottom: 18px; }
.svc h2 { font-size: clamp(2.2rem, 4.6vw, 4.8rem); font-weight: 600; letter-spacing: -.05em; line-height: .98; }
.svc__main > .t-lead { margin-bottom: 36px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 34px; }
.chips li { list-style: none; height: 38px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line); display: inline-flex; align-items: center; font-size: var(--fs-small); color: rgba(255,255,255,.86); }
.svc__label { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--slate); }
.proof { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.proof p { color: rgba(255,255,255,.82); }
.gallery { display: grid; grid-template-columns: 1.3fr .7fr; grid-auto-rows: clamp(120px, 14vw, 230px); gap: 16px; }
.gallery figure { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--navy); }
.gallery figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.gallery figure:hover img { transform: scale(1.05); }
.gallery figure:nth-child(1) { grid-row: span 2; }
.gallery figure:nth-child(4) { grid-column: 1 / -1; }
.gallery figcaption { position: absolute; left: 12px; bottom: 10px; font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.gallery button { position: absolute; inset: 0; z-index: 2; }
.gallery .play { position: absolute; right: 12px; bottom: 10px; z-index: 1; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; }
.gallery .play svg { width: 10px; height: 10px; fill: var(--ink); margin-left: 2px; }

/* 24 ─ work index ─────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(32px, 5vh, 56px); }
.filters button { height: 44px; padding: 0 20px; border-radius: 99px; border: 1px solid var(--line); font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.78); transition: background .3s, color .3s, border-color .3s; }
.filters button sup { font-size: .68em; margin-left: 4px; color: var(--slate); }
.filters button:hover { border-color: rgba(255,255,255,.5); color: var(--white); }
.filters button[aria-pressed="true"] { background: var(--white); color: var(--ink); border-color: var(--white); }
.filters button[aria-pressed="true"] sup { color: var(--slate-dim); }
.wgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
.wcard { position: relative; display: block; grid-column: span 7; }
.wcard:nth-child(4n+2), .wcard:nth-child(4n+3) { grid-column: span 5; }
.wcard:nth-child(4n+3) { grid-column: span 5; }
.wcard:nth-child(4n+4) { grid-column: span 7; }
.wcard__media { position: relative; border-radius: var(--r); overflow: hidden; background: var(--navy); aspect-ratio: 16 / 10; }
.wcard:nth-child(4n+2) .wcard__media, .wcard:nth-child(4n+3) .wcard__media { aspect-ratio: 16 / 11.6; }
.wcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .6s; }
.wcard:hover .wcard__media img { transform: scale(1.05); }
.wcard__meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; align-items: baseline; }
.wcard__meta h3 { font-size: clamp(1.25rem, 1.8vw, 1.8rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.wcard__meta span { font-size: var(--fs-small); color: var(--slate); white-space: nowrap; }
.wcard__hook { color: rgba(255,255,255,.66); font-size: var(--fs-small); margin-top: 6px; max-width: 52ch; }
.wcard.is-out { display: none; }
.empty { display: none; padding: 60px 0; color: var(--slate); font-size: var(--fs-lead); }
.empty.on { display: block; }
.more-motion { margin-top: clamp(90px, 14vh, 160px); }
.mgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mcard { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--navy); aspect-ratio: 16 / 9; }
.mcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.mcard:hover img { transform: scale(1.06); }
.mcard span { position: absolute; left: 10px; bottom: 9px; height: 26px; padding: 0 11px; border-radius: 99px; background: rgba(5,7,10,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; }
.mcard:nth-child(1), .mcard:nth-child(6) { grid-column: span 2; grid-row: span 2; }

/* 25 ─ case study ────────────────────────────────────────────── */
.chero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.chero__media { position: absolute; inset: 0; }
.chero__media img { width: 100%; height: 100%; object-fit: cover; }
.chero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,10,.5), rgba(5,7,10,0) 30%, rgba(5,7,10,.15) 55%, rgba(5,7,10,.92)); }
.chero__copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(36px, 8vh, 90px); }
.chero__client { font-size: var(--fs-small); font-weight: 500; color: rgba(255,255,255,.82); margin-bottom: 14px; display: flex; gap: 14px; align-items: center; }
.chero__client::before { content: ''; width: 46px; height: 1px; background: currentColor; }
.chero h1 { font-size: clamp(2.8rem, 8.6vw, 9.6rem); max-width: 14ch; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts div { padding: 26px 24px 26px 0; }
.facts div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.facts dt { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--slate); margin-bottom: 8px; }
.facts dd { font-weight: 500; }
.cs-lead { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 110px); }
.cs-lead p { font-size: clamp(1.5rem, 2.8vw, 2.8rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.15; }
.cs-gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.cs-gallery figure { position: relative; border-radius: var(--r); overflow: hidden; background: var(--navy); grid-column: span 6; aspect-ratio: 16 / 10; }
.cs-gallery figure.w { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
.cs-gallery figure.t { grid-column: span 5; aspect-ratio: 4 / 4.4; }
.cs-gallery figure.t + figure { grid-column: span 7; aspect-ratio: auto; }
.cs-gallery img { width: 100%; height: 100%; object-fit: cover; }
.cs-gallery figcaption { position: absolute; left: 14px; bottom: 12px; font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.cs-gallery button { position: absolute; inset: 0; z-index: 2; }
.credits { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.credits div { padding: 22px 0; border-bottom: 1px solid var(--line); }
.credits dt { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--slate); margin-bottom: 6px; }
.next { position: relative; display: block; overflow: hidden; border-radius: var(--r); min-height: clamp(320px, 50vh, 520px); }
.next img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.next:hover img { transform: scale(1.05); }
.next::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,10,.88), rgba(5,7,10,.25)); }
.next__copy { position: relative; z-index: 2; padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; justify-content: space-between; min-height: inherit; }
.next__copy strong { font-size: clamp(2.2rem, 6vw, 6.4rem); font-weight: 600; letter-spacing: -.055em; line-height: .95; max-width: 14ch; }

/* 26 ─ contact ────────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.form { display: grid; gap: 26px; }
.field { display: grid; gap: 10px; }
.field label, .field legend { font-size: var(--fs-small); font-weight: 500; color: rgba(255,255,255,.86); }
.field label small, .field legend small { color: var(--slate); font-weight: 400; margin-left: 6px; }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.28);
  padding: 12px 0 14px; font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-weight: 400; letter-spacing: -.015em; border-radius: 0;
  transition: border-color .3s;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238A99AD' stroke-width='1.6' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; padding-right: 28px; }
.field select option { background: var(--ink); color: var(--white); }
.field input::placeholder, .field textarea::placeholder { color: rgba(138,153,173,.75); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan); }
.field.err input, .field.err textarea, .field.err .opts { border-color: #FF6B6B; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
fieldset.field { border: 0; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.opts label { position: relative; }
.opts input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opts span { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 99px; border: 1px solid rgba(255,255,255,.24); font-size: .9rem; transition: background .3s, color .3s, border-color .3s; }
.opts input:checked + span { background: var(--white); color: var(--ink); border-color: var(--white); }
.opts input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 3px; }
.form__err { display: none; color: #FF8F8F; font-size: var(--fs-small); }
.form__err.on { display: block; }
.form__note { color: var(--slate); font-size: var(--fs-small); }
.form__note a { color: var(--white); border-bottom: 1px solid rgba(255,255,255,.35); }
.done { display: none; padding: 40px 0; }
.done.on { display: block; }
.done h2 { font-size: clamp(3rem, 8vw, 8rem); font-weight: 600; letter-spacing: -.06em; line-height: .9; margin-bottom: 22px; }
.cdetails { display: grid; gap: 0; border-top: 1px solid var(--line); position: sticky; top: calc(var(--header-h) + 24px); }
.cdetails div { padding: 22px 0; border-bottom: 1px solid var(--line); }
.cdetails dt { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--slate); margin-bottom: 8px; }
.cdetails dd { font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 500; letter-spacing: -.015em; }
.cdetails dd a { border-bottom: 1px solid rgba(255,255,255,.3); }

/* 27 ─ video lightbox ─────────────────────────────────────────── */
.vbox { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: rgba(5,7,10,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-out), visibility 0s .5s; padding: 20px; }
.vbox.on { opacity: 1; visibility: visible; transition: opacity .5s var(--ease-out), visibility 0s; }
.vbox:not(.on) { pointer-events: none; }   /* while it fades out, a click goes to the page (the next film) — 2026-10-29 */
.vbox__frame { width: min(1280px, 100%, calc((100vh - 140px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; transform: scale(.94); transition: transform .7s var(--ease-out); }
.vbox.on .vbox__frame { transform: scale(1); }
.vbox__frame iframe, .vbox__frame video { width: 100%; height: 100%; border: 0; }
.vbox__close { position: absolute; top: 22px; right: 22px; width: 52px; height: 52px; border-radius: 50%; background: var(--white); color: var(--ink); display: grid; place-items: center; }
.vbox__close svg { width: 18px; height: 18px; }

/* 28 ─ 404 ───────────────────────────────────────────────────── */
.nf { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.nf .ring { width: 90vw; height: 40vw; left: 30vw; top: 20vh; z-index: -1; }

/* 29 ─ reveal defaults (JS adds .is-in) ──────────────────────── */
html.js [data-reveal] { opacity: 0; transform: translateY(40px); }
html.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }

/* 30 ─ responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .index__row a, .index__row > div { grid-template-columns: 60px minmax(0, 1fr) 44px; }
  .index__text { grid-column: 2 / 3; grid-row: 2; }
  .index__arr { grid-column: 3; grid-row: 1 / 3; }
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcard:nth-child(1), .mcard:nth-child(6) { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 860px) {
  :root { --header-h: 72px; }
  .reel { height: 170vh; }
  .reel__words { display: none; }
  .cred__head { grid-template-columns: 1fr; }
  .cred__head p { text-align: left; }
  .sec__head { grid-template-columns: 1fr; }
  .sec__head p, .sec__head .link { justify-self: start; }
  .panel__body { grid-template-columns: 1fr; }
  .panel__top { top: calc(var(--header-h) + 4px); }
  .split, .about-intro, .founder, .svc__grid, .cs-lead, .contact, .phero__row { grid-template-columns: 1fr; }
  .phero__row .t-lead { justify-self: start; }
  .svc__sticky { position: static; }
  .mosaic { aspect-ratio: 1; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .wcard, .wcard:nth-child(n) { grid-column: 1 / -1; }
  .wcard:nth-child(n) .wcard__media { aspect-ratio: 16 / 11; }
  .cs-gallery figure, .cs-gallery figure.t, .cs-gallery figure.t + figure { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .process__track { flex-direction: column; width: auto; }
  .step { width: auto; min-height: 0; gap: 40px; }
  .cdetails { position: static; }
  .row2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ftr__grid { grid-template-columns: 1fr; }
  .btn { height: 50px; padding: 0 20px 0 22px; }
  .btn--xl { height: 62px; padding: 0 28px; font-size: 1rem; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; aspect-ratio: auto; }
  .mosaic figure { aspect-ratio: 4 / 5; }
  .mosaic figure:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 16 / 11; }
  .mosaic figure:nth-child(2) { grid-row: auto; grid-column: auto; }
  .mosaic figure:nth-child(3) { grid-row: auto; grid-column: auto; display: block; }
  .mosaic figure:nth-child(3) span:last-child { display: none; }
  .mosaic figure:nth-child(3) span { position: absolute; inset: 0; }
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 34vw; }
  .gallery figure:nth-child(1) { grid-column: 1 / -1; grid-row: span 1; }
  .facts { grid-template-columns: 1fr; }
  .facts div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .mgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .index__row a, .index__row > div { grid-template-columns: 1fr 44px; }
  .index__num { grid-column: 1 / -1; }
  .index__title { grid-column: 1; grid-row: 2; }
  .index__text { grid-column: 1 / -1; grid-row: 3; }
  .index__arr { grid-column: 2; grid-row: 2; }
}

/* 31 ─ reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html.js [data-reveal] { opacity: 1; transform: none; }
  .reel { height: auto; }
  .reel__pin { position: relative; }
  .reel__frame { clip-path: none !important; height: 70vh; }
}

/* 32 ─ inner-page extras ─────────────────────────────────────── */
.svc-nav { list-style: none; display: grid; gap: 10px; align-self: end; }
.svc-nav .link { font-size: .95rem; color: rgba(255,255,255,.82); }
.svc__loop { margin-top: 34px; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; background: var(--navy); max-width: 520px; }
.svc__loop video { width: 100%; height: 100%; object-fit: cover; }
.mcard__btn { position: absolute; inset: 0; z-index: 2; }
.cs-gallery video { width: 100%; height: 100%; object-fit: cover; }
.chero__media img { transform: scale(1.12); }
.founder__photo video, .ph video { width: 100%; height: 100%; object-fit: cover; }
.svc .gallery { margin-top: 8px; }
.proof a { border-bottom: 1px solid rgba(255,255,255,.3); transition: border-color .3s; }
.proof a:hover { border-color: var(--white); }
@media (max-width: 860px) { .svc__loop { max-width: none; } }

/* 33 ─ case-study justified rows (every image at its true ratio) ─ */
.cs-rows { display: grid; gap: 16px; }
.cs-row { display: flex; gap: 16px; }
.cs-row figure { position: relative; flex: var(--ar) 1 0; aspect-ratio: var(--ar); min-width: 0; border-radius: var(--r); overflow: hidden; background: var(--navy); }
.cs-row img, .cs-row video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-row figcaption { position: absolute; left: 14px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 99px; background: rgba(5,7,10,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.cs-row button { position: absolute; inset: 0; z-index: 2; }
@media (max-width: 700px) { .cs-row { flex-direction: column; } .cs-row figure { flex: none; width: 100%; } }
.svc-gal { gap: 12px; }
.svc-gal .cs-row { gap: 12px; }
.svc-gal figure { border-radius: var(--r-sm); }
.cs-row .play { position: absolute; right: 12px; bottom: 10px; z-index: 1; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; }
.cs-row .play svg { width: 10px; height: 10px; fill: var(--ink); margin-left: 2px; }
@media (max-width: 700px) { .svc-gal .cs-row { flex-direction: row; } .svc-gal .cs-row figure { flex: var(--ar) 1 0; width: auto; } }

/* 34 ─ deck heroes: slide as a floating card over its own blurred light ─ */
.is-deck { overflow: hidden; background: var(--ink); }
.is-deck .deck-bg { position: absolute; inset: -80px; filter: blur(48px) brightness(.42) saturate(1.25); }
.is-deck .deck-bg img { width: 100%; height: 100%; object-fit: cover; }
.is-deck .deck-card { --ar: 1.7778; position: absolute; z-index: 1; right: var(--gutter); top: calc(var(--header-h) + 64px); width: min(56vw, 1000px, calc((100vh - var(--header-h) - 300px) * var(--ar))); aspect-ratio: var(--ar); border-radius: var(--r); overflow: hidden; box-shadow: 0 60px 120px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); transform: rotate(-1.2deg); }
.is-deck .deck-card img { width: 100%; height: 100%; object-fit: cover; transform: none !important; }
.chero__media.is-deck .deck-card { top: calc(var(--header-h) + 40px); width: min(60vw, 1060px); }
@media (max-width: 860px) {
  .is-deck .deck-card, .chero__media.is-deck .deck-card { left: var(--gutter); right: var(--gutter); width: auto; top: calc(var(--header-h) + 60px); }
}

/* 35 ─ responsive: hero, header and menu (2026-10-12) ── */
@media (max-width: 1100px) {
  .hero { --ph: min(64vh, 640px); --stage-x: 53%; }
  .hero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); }
  .hero__left { max-width: 250px; }
}
@media (max-width: 860px) {
  .hdr__social { display: none; }
  .hero { --ph: min(54svh, 520px); --stage-x: 50%; }
  .hero__stage { position: relative; inset: auto; height: calc(var(--header-h) + var(--ph)); flex: none; }
  .hero__orb { --orb: min(66vw, 34svh, 340px); top: calc(100% - var(--ph) * .5); }
  .hero__stage::after { height: 20%; }
  .hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 0; flex: none; margin-top: -4svh; }
  .hero__gap { display: none; }
  .hero__right { order: 1; text-align: center; margin: 0; }
  .hero__title { font-size: clamp(2.3rem, 10.6vw, 4.4rem); }
  .hero__left { order: 2; max-width: 34rem; margin: 16px auto 0; padding-top: 0; text-align: center; }
  .hero__btns { justify-content: center; }
  .hero__foot { display: none; }
  .hero::after { display: none; }
  .menu__inner { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 28px; padding-top: calc(var(--header-h) + 16px); }
  .menu__links { order: 1; align-items: flex-start; text-align: left; }
  .menu { overflow-y: auto; overscroll-behavior: contain; height: 100dvh; }
  .menu__inner { height: auto; min-height: 100%; }
  .menu__links a { font-size: min(13vw, 7.4svh, 5rem); }
  .menu__info { order: 2; }
  .menu__based { font-size: min(7.4vw, 4.3svh, 2.4rem); }
  .menu__clock { margin-top: 14px; font-size: min(8vw, 4.6svh, 2.6rem); }
  .menu__cta { margin-top: 22px; }
  .menu__social { display: flex; }
}
@media (max-width: 560px) {
  .hero__sub { font-size: .95rem; }
}
/* phones: 16:9 frames whose edges matter (type, logos) show whole above the caption */
@media (max-width: 860px) {
  .panel { --mw: calc(100vw - 2 * var(--gutter)); --mh: calc(var(--mw) / var(--ar, 1.7778)); --mt: max(calc(var(--header-h) + 56px), calc(var(--header-h) + (100svh - var(--header-h) - var(--mh) - 280px) / 2)); }
  .panel--fit .panel__media { inset: var(--mt) var(--gutter) auto var(--gutter); height: var(--mh); border-radius: var(--r); overflow: hidden; }
  .panel--fit .panel__media img { object-fit: cover; transform: none !important; }
  .panel--fit .panel__body, .panel--deck .panel__body { top: calc(var(--mt) + var(--mh) + 30px); bottom: auto; }
  .is-deck .deck-card, .chero__media.is-deck .deck-card { top: var(--mt); width: auto; transform: none; }
  .panel--fit .panel__shade { background: linear-gradient(180deg, rgba(5,7,10,.4), rgba(5,7,10,0) 30%, rgba(5,7,10,.9) 100%); }
}

.curtain__label { white-space: nowrap; }
.cred__head p, .hero__sub, .t-lead, .sec__head p { text-wrap: pretty; }
@media (max-width: 860px) { .chero { --mt: calc(var(--header-h) + 60px); } }

/* 36 ─ about: the team — eight cards, Dara's own photos (round 4; .claude/team.py) ──── */
/* One uncut photo per card, full colour exactly as shot (Dara, 2026-10-12: "don't cut them out"), every
   photo in the same 4:5 frame. Hover (fine pointers) / focus inside a card: a gentle push-in inside the
   frame + a cyan line drawn under the name. Nothing on the card depends on hover. */
.team {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: clamp(44px, 6.5vh, 80px) clamp(14px, 1.6vw, 28px);
  margin-top: clamp(52px, 9vh, 112px);
  padding: 0;
}
.team__m { min-width: 0; }
.team__card { position: relative; margin: 0; }

/* photo — identical 4:5 frame, the picture exactly as shot (no filter, no overlay) */
.team__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
  transform: translateZ(0);                  /* keeps the rounded clip crisp while the photo scales */
}
.team__media::after {                        /* hairline edge, like the other framed media on the site */
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);   /* keeps a black backdrop (Darasimi) framed on the page */
}
.team__media picture, .team__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.team__media img {
  object-fit: cover;
  transform-origin: 50% 40%;
  transition: transform 1.3s var(--ease-out);
}

/* caption — name with its index on the same line, role under it */
.team__card figcaption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 14px;
  padding-top: clamp(16px, 1.5vw, 24px);
}
.team__name {
  grid-column: 1; grid-row: 1;
  font-size: clamp(1.18rem, 1.62vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.1;
  color: var(--white);
  text-wrap: balance;
}
.team__line {                                /* the accent: a cyan line drawn under the name, line by line */
  background: linear-gradient(var(--cyan), var(--cyan)) no-repeat 0 calc(100% - .2em) / 0 1px;
  transition: background-size .8s var(--ease-out);
}
.team__aka { color: var(--slate); font-weight: 500; white-space: nowrap; }   /* the nickname never splits */
.team__num {
  grid-column: 2; grid-row: 1;
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: .06em; line-height: 1;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.team__role {
  grid-column: 1 / -1; grid-row: 2;
  margin-top: 8px;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--slate);
  letter-spacing: .005em;
}

/* hover (fine pointers) + focus inside a card */
@media (hover: hover) {
  .team__card:hover .team__media img { transform: scale(1.04); }
  .team__card:hover .team__line { background-size: 100% 1px; }
}
.team__card:focus-within .team__media img { transform: scale(1.04); }
.team__card:focus-within .team__line { background-size: 100% 1px; }

/* tablet + phone: two columns */
@media (max-width: 899px) {
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vh, 48px) 12px; }
  .team__media { border-radius: var(--r-sm); }
  .team__card figcaption { column-gap: 8px; padding-top: 12px; }
  .team__name { font-size: clamp(1.02rem, 3.9vw, 1.5rem); line-height: 1.12; }
  .team__role { margin-top: 6px; font-size: clamp(.78rem, 3.1vw, .9rem); }
}

@media (prefers-reduced-motion: reduce) {
  .team__media img, .team__card:hover .team__media img, .team__card:focus-within .team__media img { transform: none; transition: none; }
  .team__line { transition: none; }
}

/* 37 ─ home orbit: cards are links + the hover / tap / focus pop-up (js/orbit.js initPop) ──── */

/* cards are <a> now: one per project, each leads to its story page */
.orbit__card { display: block; color: inherit; text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; }
.orbit__card .orbit__cap { pointer-events: none; }
.orbit__card:focus-visible .orbit__face { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--white), 0 30px 60px -28px rgba(0, 0, 0, .85); }
.orbit:not(.is-3d) .orbit__card { display: block; }

/* while a pop is open the ring steps back: one dim layer over the stage (opacity only,
   never a filter on the 3D space), cards stay hoverable through it. The pin is its own
   stacking context in every mode (sticky, static, no-3D), so the dim never covers the pop or the header */
.orbit__pin { isolation: isolate; }
.orbit__pin::after { content: ''; position: absolute; inset: 0; z-index: 90; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(5, 7, 10, .3), rgba(5, 7, 10, .62) 75%);
  transition: opacity .5s var(--ease-out); }
.orbit.has-pop .orbit__pin::after { opacity: 1; }

/* the panel — fixed, above the orbit, under the header (90) / menu (80) */
.orbit-pop {
  position: fixed; left: 0; top: 0; width: 320px; height: 180px; z-index: 70;
  display: block; overflow: hidden; border-radius: 16px; color: var(--white); text-decoration: none;
  background: var(--ink-2);
  box-shadow: 0 60px 120px -34px rgba(0, 0, 0, .95), 0 22px 44px -22px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .13);
  visibility: hidden; opacity: 0; pointer-events: none; isolation: isolate;
  -webkit-tap-highlight-color: transparent; will-change: left, top, width, height, opacity;
}
.orbit-pop.is-on { pointer-events: auto; }
.orbit-pop__media { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.orbit-pop__media > *, .orbit-pop__pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit-pop__ph, .orbit-pop__img, .orbit-pop__vid { display: block; object-fit: cover; }
.orbit-pop__img, .orbit-pop__vid { opacity: 0; transition: opacity .4s ease; }
.orbit-pop__img.is-loaded { opacity: 1; }
.orbit-pop.is-playing .orbit-pop__vid { opacity: 1; }

/* a film shown as a still (YouTube-only pieces) drifts in slowly so it doesn't read as a poster */
.orbit-pop.is-drift .orbit-pop__img.is-loaded { animation: orbitPopDrift 9s cubic-bezier(.2, .6, .35, 1) both; }
@keyframes orbitPopDrift { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .orbit-pop.is-drift .orbit-pop__img.is-loaded { animation: none; } }

/* caption scrim + bar: discipline · client  ……  View Project → */
.orbit-pop__shade { background: linear-gradient(180deg, rgba(5, 7, 10, 0) 50%, rgba(5, 7, 10, .5) 74%, rgba(5, 7, 10, .82) 100%); opacity: 0; }
.orbit-pop__bar {
  position: absolute; left: 18px; right: 14px; bottom: 14px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  opacity: 0; visibility: hidden;
}
.orbit-pop__cap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-micro); line-height: 1.25; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.orbit-pop__cap b { font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.orbit-pop__cap b::after { content: '·'; display: inline-block; margin: 0 .6em; letter-spacing: 0; font-weight: 400; color: rgba(255, 255, 255, .5); }
.orbit-pop__cap span { color: rgba(255, 255, 255, .74); letter-spacing: .02em; }
.orbit-pop__cta {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px 0 16px; border-radius: 99px;
  font-size: .8rem; font-weight: 500; letter-spacing: -.005em; white-space: nowrap;
  background: rgba(5, 7, 10, .42); border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.orbit-pop__cta svg { width: 15px; height: 15px; transition: transform .45s var(--ease-out); }
.orbit-pop:hover .orbit-pop__cta { background: var(--white); color: var(--ink); border-color: var(--white); }
.orbit-pop:hover .orbit-pop__cta svg { transform: translateX(3px); }

/* the site cursor stays a small dot over the panel (its big link disc would sit on the film) */
html:has(.orbit-pop:hover) .cursor.is-link .cursor__dot { transform: scale(1.6); }

/* loop progress — a hairline along the bottom edge while a clip plays */
.orbit-pop__prog { top: auto !important; height: 2px !important; z-index: 4; background: rgba(255, 255, 255, .12); opacity: 0; transition: opacity .4s; }
.orbit-pop__prog i { position: absolute; inset: 0; background: rgba(255, 255, 255, .78); transform: scaleX(0); transform-origin: 0 50%; }
.orbit-pop.is-playing .orbit-pop__prog { opacity: 1; }

/* reduced motion: poster + play hint, no autoplay */
.orbit-pop__play { display: none; place-items: center; z-index: 2;
  width: 58px !important; height: 58px !important; left: 50% !important; top: 50% !important; margin: -29px 0 0 -29px;
  border-radius: 50%; background: rgba(5, 7, 10, .55); border: 1px solid rgba(255, 255, 255, .34); }
.orbit-pop__play svg { width: 15px; height: 18px; margin-left: 3px; fill: var(--white); }
.orbit-pop.is-still.is-video .orbit-pop__play { display: grid; }

@media (max-width: 860px) {
  .orbit-pop { border-radius: 14px; }
  .orbit-pop__bar { left: 14px; right: 10px; bottom: 10px; gap: 10px; }
  .orbit-pop__cta { height: 32px; padding: 0 11px 0 13px; font-size: .74rem; }
  .orbit-pop__cap { font-size: .66rem; }
}

/* 38 ─ project story pages (.claude/stories.py) ────────────────────────── */

/* ── Block 1: hero — silent loop / cover / still, client + title, Play with sound ── */
.shero .shero__media video, .shero .shero__media img { width: 100%; height: 100%; object-fit: cover; }
.shero--loop .chero__media video { transform: scale(1.02); }
.shero::after { background: linear-gradient(180deg, rgba(5,7,10,.55), rgba(5,7,10,0) 26%, rgba(5,7,10,.1) 52%, rgba(5,7,10,.94)); }
.shero .chero__copy { z-index: 3; padding-right: calc(var(--gutter) + 170px); }
.shero h1 { max-width: 15ch; text-wrap: balance; }

.sbadge { position: relative; width: 132px; height: 132px; border-radius: 50%; background: rgba(5,7,10,.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: grid; place-items: center; transition: transform .6s var(--ease-out), background .4s; }
.sbadge:hover { transform: scale(1.08); background: rgba(0,175,239,.9); }
.sbadge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; pointer-events: none; }
.sbadge text { fill: var(--white); font-size: 15.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.sbadge i { width: 44px; height: 44px; border-radius: 50%; background: var(--white); display: grid; place-items: center; pointer-events: none; }
.sbadge i svg { position: static; width: 13px; height: 13px; fill: var(--ink); margin-left: 3px; animation: none; }
.shero__play { position: absolute; z-index: 4; right: var(--gutter); bottom: clamp(36px, 8vh, 90px); }

.shero__bg { display: none; }
/* deck / low-res stills float as a card over their own blurred light */
.shero--deck .deck-card { box-shadow: 0 60px 120px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); }

/* collection hero: a wall of the members' vertical previews */
.shero__wall { display: flex; gap: 10px; padding: calc(var(--header-h) + 10px) var(--gutter) 0; height: 100%; }
.shero__wall-t { flex: 1 1 0; min-width: 0; border-radius: var(--r); overflow: hidden; background: var(--navy); }
.shero__wall-t video { width: 100%; height: 100%; object-fit: cover; }

/* ── Block 2: facts + doc lead ── */
.s-facts { padding: clamp(40px, 6vh, 70px) 0; }
.s-facts .facts { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.s-facts .facts dd { text-wrap: pretty; }
.s-lead { padding: clamp(24px, 4vh, 50px) 0 clamp(40px, 6vh, 80px); }

/* ── section heads: the doc's headings, big ── */
.s-how, .s-result { padding: clamp(70px, 11vh, 140px) 0 0; }
.s-head { display: grid; gap: 22px; margin-bottom: clamp(36px, 6vh, 70px); }
.s-h2 { font-size: clamp(2.8rem, 8.4vw, 9.4rem); font-weight: 600; letter-spacing: -.055em; line-height: .9; }

/* ── How We Made It: key-frame film strip (two bands drifting in opposite directions) ── */
.fstrip { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: clamp(40px, 7vh, 80px); }
.fstrip__row { position: relative; overflow: hidden; background: #0A0E14; padding: 28px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(255,255,255,.05); }
.fstrip__row::before, .fstrip__row::after { content: ''; position: absolute; left: 0; right: 0; height: 10px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='10'%3E%3Crect x='8' y='1' width='14' height='8' rx='2' fill='%23ffffff' fill-opacity='.14'/%3E%3C/svg%3E") repeat-x 0 0 / 30px 10px; }
.fstrip__row::before { top: 9px; }
.fstrip__row::after { bottom: 9px; }
.fstrip__track { display: flex; gap: 8px; width: max-content; padding: 0 8px; will-change: transform; }
.fstrip__row.is-fit .fstrip__track { margin-inline: auto; transform: none !important; }
.fstrip__f { position: relative; flex: none; height: clamp(140px, 21vw, 340px); aspect-ratio: var(--ar); margin: 0; border-radius: 3px; overflow: hidden; background: var(--navy); }
.fstrip__f img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out), filter .6s; filter: saturate(.9) brightness(.94); }
.fstrip__f:hover img { transform: scale(1.04); filter: none; }
.fstrip__tc { position: absolute; left: 10px; bottom: 8px; z-index: 1; font-size: .68rem; font-weight: 600; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(0,0,0,.8); pointer-events: none; }
.fstrip__go { position: absolute; inset: 0; z-index: 2; }
.fstrip--static .fstrip__row { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fstrip--static .fstrip__f { scroll-snap-align: center; }
.s-how .cs-rows { margin-top: 16px; }

/* ── The Result: films, vertical cuts, stills ── */
.s-media { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.s-media > *, .s-how .wrap > * { min-width: 0; }
.s-rows { grid-template-columns: minmax(0, 1fr); }
.s-row { display: flex; gap: 16px; }
.s-row > .s-tile { flex: var(--ar) 1 0; aspect-ratio: var(--ar); min-width: 0; }
.s-tile { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: var(--navy); isolation: isolate; }
.s-tile img, .s-tile video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.s-tile:hover img, .s-tile:hover video { transform: scale(1.03); }
.s-tile__btn { position: absolute; inset: 0; z-index: 3; }
.s-tile__play { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; transition: transform .5s var(--ease-out), background .3s; pointer-events: none; }
.s-tile__play svg { width: 11px; height: 11px; fill: var(--ink); margin-left: 2px; }
.s-tile:hover .s-tile__play { transform: scale(1.12); background: var(--white); }
.s-tile__dur { position: absolute; left: 12px; bottom: 12px; z-index: 2; height: 30px; padding: 0 12px; border-radius: 99px; background: rgba(5,7,10,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; pointer-events: none; }
.s-feature .s-tile__play { display: none; }
.s-feature__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(70% 70% at 50% 50%, rgba(5,7,10,0), rgba(5,7,10,.5)); }
.s-feature__badge { position: absolute; left: 50%; top: 50%; z-index: 4; margin: -66px 0 0 -66px; }
.s-feature__badge:hover { transform: scale(1.08); }
.s-tile--reel .s-tile__dur { bottom: auto; top: 12px; }
.s-grid { display: grid; gap: 16px; }
.s-grid--reels, .s-grid--bts { grid-template-columns: repeat(auto-fit, minmax(min(220px, 42vw), 320px)); justify-content: center; }
.s-grid .s-tile { aspect-ratio: var(--ar); }
.s-media .cs-rows { margin-top: 0; }
.cs-row--one { width: min(100%, 1100px); margin-inline: auto; }

/* ── collection: cards → venue pages ── */
.s-collection { padding-top: clamp(30px, 5vh, 60px); }
.s-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 42vw), 1fr)); gap: 34px 16px; }
.s-card { display: block; }
.s-card__media { aspect-ratio: 9 / 16; border-radius: var(--r); overflow: hidden; background: var(--navy); }
.s-card__media video, .s-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.s-card:hover .s-card__media video, .s-card:hover .s-card__media img { transform: scale(1.04); }
.s-card__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; }
.s-card__meta h3 { font-size: clamp(1.05rem, 1.4vw, 1.4rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.s-card__meta span { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; color: var(--slate); font-variant-numeric: tabular-nums; }

/* ── Block 8: next + start ── */
.s-next { padding-top: clamp(80px, 13vh, 160px); }
.s-start { display: flex; justify-content: center; margin-top: clamp(48px, 8vh, 90px); }

/* ── lightbox: vertical cuts get a tall frame; HLS/MP4 letterboxed, never cropped ── */
.vbox__frame video { object-fit: contain; background: #000; }
.vbox__frame.is-tall { border-radius: var(--r-sm); }

/* ── responsive ── */
@media (max-width: 860px) {
  .s-facts .facts { grid-template-columns: 1fr 1fr; }
  /* landscape heroes show whole on phones: a card over their own blurred light */
  .shero--fit { background: var(--ink); }
  .shero__bg { display: block; position: absolute; inset: -80px; z-index: 0; background: center / cover no-repeat; filter: blur(46px) brightness(.38) saturate(1.3); }
  .shero--fit .chero__media { inset: auto var(--gutter); top: calc(var(--header-h) + max(28px, (100svh - var(--header-h) - (100vw - 2 * var(--gutter)) / var(--ar, 1.7778) - 330px) / 2)); aspect-ratio: var(--ar, 1.7778); border-radius: var(--r); overflow: hidden; z-index: 1; box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); }
  .shero--fit .chero__media img, .shero--fit .chero__media video { transform: none !important; }
  .shero--fit::after { background: linear-gradient(180deg, rgba(5,7,10,.4), rgba(5,7,10,0) 30%, rgba(5,7,10,.2) 60%, rgba(5,7,10,.9)); }
  .shero .chero__copy { padding-right: var(--gutter); bottom: calc(clamp(36px, 8vh, 90px) + 120px); }
  .shero__play { left: var(--gutter); right: auto; bottom: clamp(28px, 5vh, 50px); width: 104px; height: 104px; }
  .shero__play i { width: 36px; height: 36px; }
  .shero--deck .chero__copy { bottom: calc(clamp(36px, 8vh, 90px) + 110px); }
  .shero__wall-t:nth-child(n+4) { display: none; }
}
@media (max-width: 560px) {
  .s-facts .facts { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .s-row { flex-wrap: wrap; gap: 12px; }
  .s-row > .s-feature, .s-row > .s-tile--film { flex: 1 1 100%; }
  .s-row { justify-content: center; }
  .s-row > .s-tile--reel { flex: 0 1 calc(50% - 6px); }
  .s-row > .s-feature + .s-tile--reel:last-child { flex-basis: 62%; }
  .s-media, .s-grid { gap: 12px; }
  .sbadge.s-feature__badge { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
  .sbadge.s-feature__badge i { width: 34px; height: 34px; }
  .fstrip__row { padding: 22px 0; }
  .fstrip__row::before { top: 6px; } .fstrip__row::after { bottom: 6px; }
  .fstrip__f { height: clamp(120px, 34vw, 200px); }
  .s-cards { gap: 26px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sbadge svg { animation: none; }
}

/* 39 ─ round-4 integration: work grid · venue heroes · services links · cover panels ──── */

/* work index: one grid of every story, each at its designed cover's own 16:10 */
.wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(44px, 7vh, 84px) clamp(16px, 1.6vw, 24px); }
.wgrid .wcard, .wgrid .wcard:nth-child(n) { grid-column: auto; }
.wgrid .wcard .wcard__media, .wgrid .wcard:nth-child(n) .wcard__media { aspect-ratio: 16 / 10; }
.wcard__client { margin-top: 6px; font-size: var(--fs-small); color: rgba(255,255,255,.66); }
.wcard__client + .wcard__hook { margin-top: 2px; }
.wgrid ~ .s-start { margin-top: clamp(70px, 11vh, 130px); }
@media (max-width: 700px) { .wgrid { grid-template-columns: minmax(0, 1fr); } }

/* venue heroes: the reel plays as a 9:16 card over its cover's blurred light */
.shero--vert { background: var(--ink); }
.shero__vbg { position: absolute; inset: -80px; filter: blur(46px) brightness(.42) saturate(1.3); }
.shero__vbg picture, .shero__vbg img { width: 100%; height: 100%; object-fit: cover; }
.shero__vcard { position: absolute; z-index: 2; margin: 0; right: calc(var(--gutter) + 190px); top: calc(var(--header-h) + 34px);
  height: calc(100svh - var(--header-h) - 34px - clamp(36px, 8vh, 90px)); aspect-ratio: var(--ar, .5625);
  border-radius: var(--r); overflow: hidden; background: var(--navy); transform: rotate(1.2deg);
  box-shadow: 0 60px 120px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.1); }
.shero__vcard video { width: 100%; height: 100%; object-fit: cover; display: block; }
.shero__vgo { position: absolute; inset: 0; z-index: 2; }
.shero--vert h1 { max-width: min(10ch, 52vw); }
.chero__client a { border-bottom: 1px solid rgba(255,255,255,.35); transition: border-color .3s; }
.chero__client a:hover { border-color: var(--white); }
.s-up { margin-bottom: clamp(22px, 4vh, 40px); font-size: var(--fs-small); color: rgba(255,255,255,.82); }
.s-up svg { transform: rotate(180deg); }
.s-up:hover svg { transform: rotate(180deg) translateX(5px); }
@media (max-width: 860px) {
  .shero__vcard { left: 0; right: 0; margin-inline: auto; top: calc(var(--header-h) + 16px); transform: none;
    height: max(240px, calc(100svh - var(--header-h) - 16px - 310px)); }
  .shero--vert h1 { max-width: none; }
}

.s-card__meta span { white-space: nowrap; }

/* vertical cuts: centred rows, four across on desktop, two on phones */
.s-grid--reels, .s-grid--bts { display: flex; flex-wrap: wrap; justify-content: center; }
.s-grid--reels > .s-tile, .s-grid--bts > .s-tile { flex: 0 0 min(300px, calc((100% - 3 * 16px) / 4)); }
@media (max-width: 860px) { .s-grid--reels > .s-tile, .s-grid--bts > .s-tile { flex-basis: min(300px, calc((100% - 16px) / 2)); } }
@media (max-width: 700px) { .s-grid--reels > .s-tile, .s-grid--bts > .s-tile { flex-basis: calc((100% - 12px) / 2); } }

/* services proof tiles: every tile opens its story page */
.cs-row .svc-gal__go { position: absolute; inset: 0; z-index: 2; }
.cs-row .play--go svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); margin: 0; }
.svc-gal figure img, .svc-gal figure video { transition: transform 1.2s var(--ease-out); }
.svc-gal figure:hover img, .svc-gal figure:hover video { transform: scale(1.04); }
.svc-gal figure { container-type: inline-size; }
@container (max-width: 190px) { .svc-gal figcaption { display: none; } }   /* narrow 9:16 tiles: the arrow alone */

/* home Selected Work: designed covers — full-bleed 16:10 on desktop, the 4:5 cover as a card on phones */
@media (max-width: 860px) {
  .panel--cover { --mh: min(calc(var(--mw) / var(--ar)), calc(100svh - var(--header-h) - 56px - 330px)); }
  .panel--cover .panel__media { left: 0; right: 0; margin-inline: auto; width: calc(var(--mh) * var(--ar)); }
}

/* 40 ─ (2026-11-03: the 3D heroes and the Services 3D are gone, Dara: "remove and delete all the 3D objects") */

/* 41 ─ round 5 (Dara's 2026-10-21 voice note) ───────────────────────────────────────────────────
   The page stays DARK all the way down (no white switch: "that menu turns to white. I would like it to still be in
   black"). What We Do = Eggcorn's hatching ground; Selected Work = one full-bleed picture per project;
   Studio = heading + four tiles of the best work; Let's Build Something over a black & white crew photo. */

/* What We Do — the film in the middle, real-work cards rising past it (js: hatch) */
.hatch { position: relative; height: 330vh; }
.hatch__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hatch__spine { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + 18px); z-index: 6; }
.hatch__core { position: absolute; left: 50%; top: 50%; width: min(58vw, 88vh * 1.6); aspect-ratio: 16 / 10; z-index: 2;
  transform: translate(-50%, -50%) scale(var(--cs, 1)); border-radius: var(--r); overflow: hidden; background: var(--navy);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .9); will-change: transform; }
.hatch__core video { width: 100%; height: 100%; object-fit: cover; }
.hatch__core::after { content: ''; position: absolute; inset: 0; background: rgba(5, 7, 10, .28); }
.hatch__title { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); margin: 0; white-space: nowrap; pointer-events: none;
  font-size: clamp(3rem, 9.4vw, 10.5rem); font-weight: 600; letter-spacing: -.06em; line-height: .9; text-shadow: 0 10px 60px rgba(0, 0, 0, .45); }
.hatch__cards { position: absolute; inset: 0; }
.hatch__card { position: absolute; left: var(--x); top: 0; width: var(--w); aspect-ratio: 4 / 5; margin: 0; border-radius: 10px; overflow: hidden;
  transform: translate3d(0, 110vh, 0); will-change: transform; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9); }
.hatch__card picture, .hatch__card img { width: 100%; height: 100%; }
.hatch__card img { object-fit: cover; }
.hatch__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,10,0) 55%, rgba(5,7,10,.78)); }
.hatch__card figcaption { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; font-size: clamp(.7rem, .95vw, .95rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
@media (max-width: 860px) {
  .hatch { height: 290vh; }
  .hatch__core { width: 88vw; aspect-ratio: 4 / 5; }
  .hatch__card { width: calc(var(--w) * 2.1); }
  .hatch__card figcaption { font-size: .68rem; left: 8px; bottom: 7px; }
  .hatch__title { font-size: clamp(2.6rem, 13vw, 4.4rem); white-space: normal; text-align: center; width: 6ch; }
}
@media (prefers-reduced-motion: reduce) {
  .hatch { height: auto; }
  .hatch__pin { position: relative; height: 100svh; }
  .hatch__cards { display: none; }
}

/* the four disciplines, on dark (same rows, sharper entrance: hairline draws, title rises, text follows) */
.wwd { padding-top: clamp(80px, 14vh, 160px); }
.wwd .wwd__lead { color: var(--white); max-width: 16ch; }
.wwd .index { border-top-color: transparent; }
.wwd .index__row { border-bottom: 0; }
.wwd .index__row::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform: scaleX(var(--ln, 1)); transform-origin: left; }
.wwd .index { position: relative; }
.wwd .index::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.wwd .index__row::before { background: var(--white); }
.wwd .index__num { color: var(--slate); }
.wwd .index__text { color: rgba(255, 255, 255, .62); }
.wwd .index__arr { box-shadow: inset 0 0 0 1px var(--line); }
.wwd .index__title { overflow: hidden; }
.wwd .index__title > span { display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .wwd .index__row:hover .index__title { color: var(--ink); }
  .wwd .index__row:hover .index__num { color: rgba(5, 7, 10, .55); }
  .wwd .index__row:hover .index__text { color: rgba(5, 7, 10, .72); }
  .wwd .index__row:hover .index__arr { box-shadow: none; }
}

/* Selected Work: one full-bleed picture, Eggcorn's stack (the next project rises over the last) */
.panel__media picture, .panel__media img { width: 100%; height: 100%; }
.panel__media img { object-fit: cover; }
.panel__top { border-bottom-color: rgba(255, 255, 255, .42); }

/* Studio: heading + line, then four tiles of the best work */
.studio2 .spine { margin-bottom: clamp(26px, 4vh, 44px); }
.studio2__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px clamp(40px, 6vw, 110px); align-items: end; padding-bottom: clamp(36px, 6vh, 70px); border-bottom: 1px solid var(--line); }
.studio2__head .t-h1 { max-width: 13ch; }
.studio2__copy { display: grid; gap: 26px; justify-items: start; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); margin-top: clamp(40px, 7vh, 80px); }
.g4 { position: relative; display: block; }
.g4:nth-child(even) { margin-top: clamp(40px, 9vh, 120px); }
.g4__media { display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--navy); }
.g4__media picture, .g4__media img, .g4__media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.g4__cap { display: grid; gap: 4px; margin-top: 14px; font-size: var(--fs-small); }
.g4__cap b { font-weight: 600; }
.g4__cap span { color: var(--slate); }
@media (hover: hover) and (pointer: fine) { .g4:hover .g4__media img, .g4:hover .g4__media video { transform: scale(1.05); } }
@media (max-width: 860px) {
  .studio2__head { grid-template-columns: 1fr; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g4:nth-child(even) { margin-top: 48px; }
  .g4:nth-child(3) { margin-top: -48px; }
}

/* Let's Build Something over the crew at work (black & white) */
.cta--photo { padding: clamp(160px, 28vh, 320px) 0 clamp(150px, 24vh, 280px); }
.cta--photo::before { display: none; }
.cta__bg { position: absolute; inset: 0; z-index: -1; }
.cta__bg picture, .cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, rgba(5,7,10,.62) 22%, rgba(5,7,10,.55) 70%, var(--ink) 100%); }

/* 42 ─ round 6 (Dara's third note, 2026-10-21) ─────────────────────────────────────────────────── */
/* logos: black & white, the true colours on hover */
.marquee--logos .lg { position: relative; display: block; flex-shrink: 0; height: calc(var(--lh) * var(--s, 1)); }
.marquee--logos .lg img { display: block; height: 100%; width: auto; max-width: none; transition: opacity .35s; }
.marquee--logos .lg img:first-child { opacity: .6; }
.marquee--logos .lg .lg__c { position: absolute; left: 0; top: 0; opacity: 0; }
.marquee--logos .lg:hover img:first-child { opacity: 0; }
.marquee--logos .lg:hover .lg__c { opacity: 1; }
/* numbers grow in as they count up, and shrink back as they count down when you leave (js) */
.stat__num { transform-origin: 50% 85%; will-change: transform; }

/* What We Do: the headline, its line in cyan, ONE film under it (Lumilearn), FOUR big discipline cards */
.hatch__head { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.hatch__head .hatch__title { position: static; transform: none; }
.hatch__sub { margin-top: clamp(10px, 1.6vh, 18px); color: var(--cyan); font-size: clamp(1.1rem, 1.9vw, 2rem); font-weight: 500; letter-spacing: -.02em; text-shadow: 0 6px 30px rgba(0, 0, 0, .6); }
.hatch__card { left: auto; width: min(27vw, 520px); z-index: 3; color: var(--white); }
.hatch__card--l { left: 2.4vw; }
.hatch__card--r { right: 2.4vw; }
.hatch__card::after { background: linear-gradient(180deg, rgba(5,7,10,0) 40%, rgba(5,7,10,.88)); }
.hatch__cap { position: absolute; left: clamp(16px, 1.6vw, 26px); right: clamp(16px, 1.6vw, 26px); bottom: clamp(16px, 1.6vw, 26px); z-index: 1; display: grid; gap: 8px; }
.hatch__n { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em; color: var(--slate); }
.hatch__cap b { font-size: clamp(1.3rem, 1.9vw, 2.1rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.hatch__d { font-size: clamp(.78rem, .9vw, .92rem); line-height: 1.45; color: rgba(255, 255, 255, .74); }
.hatch__card img { transition: transform 1.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hatch__card:hover img { transform: scale(1.05); } }
.hatch__foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: clamp(36px, 6vh, 64px); padding-bottom: clamp(60px, 10vh, 120px); }
@media (max-width: 860px) {
  .hatch__card { width: 56vw; }
  .hatch__card--l { left: -3vw; }
  .hatch__card--r { right: -3vw; }
  .hatch__d { display: none; }
  .hatch__sub { font-size: 1.05rem; }
}

/* Selected Work: the heading on one line; the stack moves like Eggcorn's (measured 2026-10-21): each project is a
   full-screen panel straight after the last (no hold), the incoming picture settles from 1.4x to 1x as its panel
   slides over the one below, and the one below does not move or darken */
.sec__head .sel__title { white-space: nowrap; font-size: clamp(2.4rem, 5.6vw, 6.4rem); }
.stack .panel:not(:last-child) { margin-bottom: 0; }
.panel__media--card { display: grid; place-items: center; overflow: hidden; }
.panel__blur { position: absolute; inset: -10%; background-size: cover; background-position: center; filter: blur(48px) saturate(1.2); opacity: .5; }
.panel__media--card picture { position: relative; width: auto; height: 74vh; height: 74svh; aspect-ratio: 1100 / 1400; }
.panel__media--card img { object-fit: contain; border-radius: 8px; box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .9); }
@media (max-width: 860px) {
  .panel__media--card { align-items: start; padding-top: calc(var(--header-h) + 64px); }
  .panel__media--card picture { height: auto; width: 74vw; }
}

/* Studio: Eggcorn's project cards (Dara's screenshot): the picture fills the card, a small label over a hairline,
   the big title under it (it rises in on hover; always shown on touch screens), a cyan dot top-left */
.ecgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1vw, 14px); margin-top: clamp(40px, 7vh, 80px); }
.ec { position: relative; display: block; aspect-ratio: 5 / 6; overflow: hidden; background: var(--navy); isolation: isolate; }
.ec__media, .ec__media picture, .ec__media img, .ec__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ec__media img, .ec__media video { transition: transform 1.4s var(--ease-out); }
.ec__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,10,.18) 0%, rgba(5,7,10,0) 30%, rgba(5,7,10,.25) 55%, rgba(5,7,10,.82) 100%); }
.ec__dot { position: absolute; left: clamp(18px, 1.8vw, 28px); top: clamp(18px, 1.8vw, 28px); z-index: 2; width: 14px; height: 14px; border-radius: 50%; background: var(--cyan); }
.ec__foot { position: absolute; left: clamp(20px, 2.4vw, 34px); right: clamp(20px, 2.4vw, 34px); bottom: clamp(20px, 2.6vw, 38px); z-index: 2; display: grid; }
.ec__label { font-size: clamp(.86rem, 1vw, 1rem); font-weight: 500; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .72); }
.ec__title { font-size: clamp(1.9rem, 3.1vw, 3.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.04; max-height: 0; opacity: 0; transform: translateY(16px);
  transition: max-height .7s var(--ease-out), opacity .5s, transform .7s var(--ease-out), margin-top .7s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .ec:hover .ec__title { max-height: 3.2em; opacity: 1; transform: none; margin-top: 14px; }
  .ec:hover .ec__media img, .ec:hover .ec__media video { transform: scale(1.04); }
}
@media (hover: none), (pointer: coarse) { .ec__title { max-height: none; opacity: 1; transform: none; margin-top: 12px; } }
@media (max-width: 600px) { .ecgrid { grid-template-columns: 1fr; } }

/* footer: Studio · Follow · Lagos, "Lagos" and the small icons bottom-right in cyan (Dara) */
.ftr h3, .ftr__c { color: var(--cyan); }
.ftr__social--sm a { color: var(--cyan); opacity: 1; }
/* the Lumilearn film is bright (white + green): a deeper veil so the headline and its cyan line stay readable */
.hatch__core::after { background: radial-gradient(70% 60% at 50% 50%, rgba(5,7,10,.66), rgba(5,7,10,.42)); }

/* 43 ─ round 7 (Dara's fourth note, 2026-10-21) ────────────────────────────────────────────────── */
.panel__top { justify-content: flex-end; }                 /* the client only — no project numbers */
/* Studio cards: nothing plays until hovered; the hover shows the brand's logo (EP01: its name) over the film */
.ec__logo { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; opacity: 0;
  background: rgba(5, 7, 10, .38); transition: opacity .5s var(--ease-out); }
.ec__logo img, .ec__logo .ec__word { transform: scale(.92); transition: transform .8s var(--ease-out); }
.ec__logo img { width: min(48%, 300px); height: auto; max-height: 28%; object-fit: contain; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .55)); }
.ec__word { display: grid; gap: 8px; text-align: center; font-size: clamp(.78rem, .95vw, 1rem); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.ec__word b { font-size: clamp(2.2rem, 4.2vw, 4.4rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; text-transform: none; }
@media (hover: hover) and (pointer: fine) {
  .ec:hover .ec__logo { opacity: 1; }
  .ec:hover .ec__logo img, .ec:hover .ec__logo .ec__word { transform: none; }
}
/* phones: the film plays while its card is on screen (site.js adds .is-live), with the logo over it as on hover */
.ec.is-live .ec__logo { opacity: 1; }
.ec.is-live .ec__logo img, .ec.is-live .ec__logo .ec__word { transform: none; }
/* Let's Build Something: less air above and below */
.cta--photo { padding: clamp(90px, 14vh, 170px) 0 clamp(90px, 13vh, 160px); }
/* the storytelling orbit: a shorter pass ("it can just spin for a while and then go") */
.orbit { height: 210vh; }
@media (max-width: 860px) { .orbit { height: 200vh; } }

/* 44 ─ round 8 (Dara's fifth note, 2026-10-21) ─────────────────────────────────────────────────── */
/* What We Do: the film stretches across the whole screen (no black around it) under a deeper black veil */
.hatch__core { left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; transform: none; }
.hatch__core::after { background: linear-gradient(180deg, rgba(5,7,10,.78) 0%, rgba(5,7,10,.58) 30%, rgba(5,7,10,.58) 70%, rgba(5,7,10,.85) 100%); }
@media (max-width: 860px) { .hatch__core { width: 100%; aspect-ratio: auto; } }
/* no item numbers anywhere (fifth note: "go through the website, remove all ...") — hidden, one line to bring back */
.hatch__n, .team__num, .svc__num, .step__num { display: none !important; }
/* logos: smaller */
.marquee--logos { --lh: clamp(22px, 2.3vw, 38px); }
/* storytelling orbit: about two scrolls held, then the page moves on */
.orbit { height: 150vh; }
@media (max-width: 860px) { .orbit { height: 150vh; } }
/* the Lumilearn film is mostly white: a heavier black veil so "What We Do" and its cyan line pop (black first, per Dara) */
.hatch__core::after { background: linear-gradient(180deg, rgba(5,7,10,.9) 0%, rgba(5,7,10,.76) 28%, rgba(5,7,10,.76) 72%, rgba(5,7,10,.92) 100%); }

/* 45 ─ About page rework + home Studio on white (Dara's note, 2026-10-21) ─────────────────────────── */
/* home: the Studio section on white; "A Studio Built" black, "Around The Idea" cyan */
.studio2--white { background: #fff; color: var(--ink); }
.studio2--white .c { color: var(--cyan); }
.studio2--white .t-lead { color: rgba(5, 7, 10, .78); }
.studio2--white .link { color: var(--ink); }
.studio2--white .studio2__head { border-bottom-color: var(--line-dark); }
.studio2--white .ec { color: var(--white); }

/* About hero on a photograph of the crew on set; "About" thin, "Vodee Studio" bold, Vodee cyan */
.phero--photo { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; }
.phero--photo::before, .phero--photo .ring { display: none; }
.phero__bg { position: absolute; inset: 0; z-index: -1; }
.phero__bg picture, .phero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.phero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,10,.55) 0%, rgba(5,7,10,.35) 35%, rgba(5,7,10,.8) 78%, var(--ink) 100%); }
.phero--photo .wrap { width: 100%; }
.phero__title--about { display: grid; }
.phero__title--about .ab-thin { font-weight: 200; letter-spacing: -.05em; }
.phero__title--about .ab-bold { font-weight: 700; }
.phero__title--about .c { color: var(--cyan); }
.phero--photo .phero__row .t-lead { color: rgba(255, 255, 255, .86); }

/* intro: statement · film · body in three columns; "Not rushed. Not templated." in cyan */
.about3__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.about3__line { max-width: none; font-size: clamp(1.7rem, 2.7vw, 3rem); }
.about3__line .c { color: var(--cyan); }
.about3__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--navy); }
.about3__media .ph, .about3__media video, .about3__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about3__copy .t-body { margin-top: 1.1em; }
@media (max-width: 960px) { .about3__grid { grid-template-columns: 1fr; } .about3__media { max-width: 520px; } }

/* founder: no ring; name and role in white */
.founder__photo .founder__ring { display: none; }
.founder__photo img { object-position: 50% 30%; }
.founder__who { display: grid; gap: 4px; margin: 22px 0 28px; color: var(--white); }
.founder__who b { font-size: clamp(1.15rem, 1.5vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; }
.founder__who span { font-size: var(--fs-small); color: var(--white); }

/* team head: the paragraph starts and ends level with the heading beside it */
.team-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 56px; align-items: stretch; }
.team-head p { align-self: center; font-size: clamp(1rem, 1.25vw, 1.25rem); line-height: 1.5; color: rgba(255, 255, 255, .78); max-width: 52ch; justify-self: end; }
@media (max-width: 860px) { .team-head { grid-template-columns: 1fr; } .team-head p { justify-self: start; } }
/* team cards: on hover the card lifts, the photo zooms and a cyan glow comes up around it (like Zino Jets' cards) */
.team__card { transition: transform .7s var(--ease-out); }
.team__media { transition: box-shadow .7s var(--ease-out); }
@media (hover: hover) {
  .team__card:hover { transform: translateY(-10px) scale(1.025); }
  .team__card:hover .team__media { box-shadow: 0 0 0 1px rgba(0, 175, 239, .7), 0 26px 70px -14px rgba(0, 175, 239, .6), 0 0 46px rgba(0, 175, 239, .28); }
  .team__card:hover .team__media img { transform: scale(1.09); }
}

/* How We Work: one line; each stage has its picture; hover lifts the card, zooms the picture, lights the edge */
.process .sec__head .sel__title { font-size: clamp(2.6rem, 6.4vw, 7.2rem); }
.step--pic { padding: 0; justify-content: flex-start; min-height: 0; transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out), border-color .7s; }
.step__pic { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.step__pic picture, .step__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.step__pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,10,0) 55%, rgba(9,13,19,.9)); }
.step__txt { padding: clamp(22px, 2.2vw, 34px); }
@media (hover: hover) {
  .step--pic:hover { transform: translateY(-10px); border-color: rgba(0, 175, 239, .6); box-shadow: 0 30px 80px -24px rgba(0, 175, 239, .45); }
  .step--pic:hover .step__pic img { transform: scale(1.08); }
}
/* the revisions line: centred, big, lit by a cyan light running round its edge */
.revisions { position: relative; display: flex; justify-content: center; margin: clamp(56px, 9vh, 110px) auto 0; text-align: center; }
.revisions > span { position: relative; display: inline-block; max-width: 34ch; padding: clamp(22px, 3vh, 34px) clamp(28px, 4vw, 64px); border-radius: 999px; isolation: isolate;
  font-size: clamp(1.25rem, 2.2vw, 2.2rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.25; color: var(--white); }
.revisions b { color: var(--cyan); font-weight: 600; }
.revisions > span::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--rv, 0deg), rgba(0,175,239,0) 0deg, rgba(0,175,239,.95) 60deg, rgba(0,175,239,0) 140deg, rgba(255,255,255,.12) 220deg, rgba(0,175,239,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: rv-spin 4.5s linear infinite; }
.revisions > span::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -2; background: radial-gradient(60% 120% at 50% 50%, rgba(0,175,239,.16), rgba(0,175,239,0) 70%); }
@property --rv { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes rv-spin { to { --rv: 360deg; } }
@media (prefers-reduced-motion: reduce) { .revisions > span::before { animation: none; } }

/* point of view + What We're Building: over photographs, white type */
.pullquote--photo { position: relative; isolation: isolate; overflow: hidden; padding: clamp(120px, 20vh, 220px) 0; }
.pq__bg { position: absolute; inset: 0; z-index: -1; }
.pq__bg picture, .pq__bg img { width: 100%; height: 100%; object-fit: cover; }
.pq__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, rgba(5,7,10,.62) 25%, rgba(5,7,10,.62) 75%, var(--ink) 100%); }
.pullquote--photo p:first-child { color: var(--white); }
.pullquote--photo p:last-child { color: var(--white); font-weight: 400; max-width: 52ch; }
.cta--build { padding: clamp(120px, 20vh, 220px) 0; }
.cta--build::before { display: none; }
.build { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 36px clamp(40px, 6vw, 110px); align-items: end; }
.build__main .t-display { margin: 0 0 26px; }
.build__main .t-lead { max-width: 34ch; margin: 0 0 34px; color: rgba(255, 255, 255, .9); }
.build__copy .t-body { color: rgba(255, 255, 255, .82); max-width: 46ch; }
.build__copy .t-body + .t-body { margin-top: 1em; }
@media (max-width: 860px) { .build { grid-template-columns: 1fr; } }
/* team head: the paragraph's first line sits level with the heading's first line and its last with the heading's
   last — six lines whose height is the heading's two (both scale with --fs-h1) */
@media (min-width: 861px) {
  .team-head h2 { align-self: start; }
  .team-head p { align-self: start; justify-self: stretch; max-width: none; margin: 0; font-size: calc(var(--fs-h1) * .24); line-height: calc(var(--fs-h1) / 3); }   /* six lines = the heading's two */
}

/* 46 ─ About round 2 (Dara, 2026-10-21) ──────────────────────────────────────────────────────────── */
/* header logo a little smaller beside the icons */
.logo { width: 96px; }

/* hero: a creative image on the cyan orb with the brand ring (like the home hero); the title smaller */
.ahero { position: relative; overflow: hidden; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--header-h) + 30px) 0 50px; }
.ahero::before { content: ''; position: absolute; width: 90vmax; height: 90vmax; right: -48vmax; top: -50vmax; z-index: -1; background: radial-gradient(closest-side, rgba(0,175,239,.26), rgba(0,175,239,.06) 50%, transparent 72%); }
.ahero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: center; gap: 24px clamp(30px, 5vw, 90px); width: 100%; }
.ahero__title { display: grid; font-size: clamp(3rem, 8.2vw, 9rem); letter-spacing: -.06em; line-height: .88; margin: 0 0 clamp(26px, 4vh, 44px); }
.ahero__title .ab-thin { font-weight: 200; }
.ahero__title .ab-bold { font-weight: 700; }
.ahero__title .c { color: var(--cyan); }
.ahero__copy .t-lead { max-width: 36ch; color: rgba(255, 255, 255, .84); }
.ahero__fig { position: relative; aspect-ratio: 4 / 5; width: min(100%, 64vh); justify-self: center; }
.ahero__orb { position: absolute; left: 50%; top: 52%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #5fd8ff 0%, #00afef 38%, #0a6f9a 70%, #0a3550 100%); box-shadow: 0 0 120px rgba(0, 175, 239, .35); }
.ahero__img { position: absolute; inset: 0; mix-blend-mode: lighten; }
.ahero__img picture, .ahero__img img { width: 100%; height: 100%; object-fit: cover; }
.ahero__img::after { content: ''; position: absolute; inset: auto 0 0 0; height: 22%; background: linear-gradient(180deg, rgba(5,7,10,0), var(--ink)); }
.ahero__ring { position: absolute; left: -22%; top: 8%; width: 144%; height: 84%; overflow: visible; z-index: 2; pointer-events: none; }
.ahero__ring ellipse, .about3__orbit ellipse { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ahero__ring .comet, .about3__orbit .comet { stroke: var(--cyan); stroke-width: 2.4; stroke-dasharray: 90 910; stroke-linecap: round; animation: orbit-comet 7s linear infinite; filter: drop-shadow(0 0 6px rgba(0,175,239,.9)); }
@keyframes orbit-comet { to { stroke-dashoffset: -1000; } }
@media (max-width: 860px) {
  .ahero { min-height: 0; padding-top: calc(var(--header-h) + 40px); }
  .ahero__grid { grid-template-columns: 1fr; }
  .ahero__fig { width: min(86vw, 420px); }
}

/* two crossing ribbons between the hero and the intro; they run as you scroll (js) */
.ribbons { position: relative; height: clamp(150px, 20vw, 260px); overflow: hidden; }
.ribbon { position: absolute; left: -10%; right: -10%; top: 50%; padding: clamp(10px, 1.2vw, 18px) 0; overflow: hidden; white-space: nowrap; }
.ribbon--a { background: var(--cyan); color: var(--ink); transform: translateY(-50%) rotate(-4deg); z-index: 2; box-shadow: 0 18px 40px -20px rgba(0,0,0,.8); }
.ribbon--b { background: var(--white); color: var(--ink); transform: translateY(-50%) rotate(3deg); }
.ribbon__track { display: inline-flex; align-items: center; gap: clamp(18px, 2vw, 32px); will-change: transform; }
.ribbon__track span { font-size: clamp(1.1rem, 2.2vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; }
.ribbon__track i { width: clamp(16px, 1.6vw, 26px); height: clamp(8px, .8vw, 13px); border: 2px solid currentColor; border-radius: 50%; transform: rotate(-18deg); }

/* the studio film inside its own orbit */
.about3__wrap { position: relative; }
.about3__wrap .about3__media { position: relative; }
.about3__orbit { position: absolute; left: -24%; top: 18%; width: 148%; height: 64%; overflow: visible; z-index: 3; pointer-events: none; }

/* white sections (founder, How We Work) */
.sec--white { background: #fff; color: var(--ink); }
.sec--white .t-body, .sec--white .sec__head p { color: rgba(5, 7, 10, .72); }
.sec--white blockquote { color: var(--ink); }
.sec--white .founder__who { color: var(--ink); }
.sec--white .founder__who span { color: var(--slate-dim); }
.sec--white .revisions > span { color: var(--ink); }
.sec--white .revisions > span::after { background: radial-gradient(60% 120% at 50% 50%, rgba(0,175,239,.12), rgba(0,175,239,0) 70%); }

/* every card: the cyan light running round its edge (the revisions pill's line) */
.glowline { position: relative; }
.glowline::before { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--rv, 0deg), rgba(0,175,239,0) 0deg, rgba(0,175,239,.95) 50deg, rgba(0,175,239,0) 120deg, rgba(255,255,255,.14) 200deg, rgba(0,175,239,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: rv-spin 5s linear infinite; }
.team__m:nth-child(2n) .glowline::before, .step--pic:nth-of-type(2n)::before { animation-delay: -2.5s; }
.team__m:nth-child(3n) .glowline::before { animation-delay: -1.2s; }
@media (prefers-reduced-motion: reduce) { .glowline::before { animation: none; } }

/* team names: first name over surname, in a cyan badge; hover turns it white and lifts it */
.team__name { display: block; }
.team__badge { display: inline-grid; padding: 8px 14px 9px; border-radius: 10px; background: var(--cyan); color: var(--ink); line-height: 1.08;
  transition: background-color .45s var(--ease-out), transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.team__first, .team__last { display: block; }
.team__card figcaption { display: grid; grid-template-columns: 1fr; padding-top: 16px; }
.team__role { margin-top: 10px; }
@media (hover: hover) {
  .team__card:hover .team__badge { background: var(--white); transform: translateY(-4px) scale(1.04); box-shadow: 0 14px 36px -12px rgba(0,175,239,.7); }
}

/* How We Work: the four stages joined by a line that fills as you move through them */
.process__track { --cw: clamp(300px, 34vw, 520px); position: relative; padding-top: 70px; gap: 28px; }
.step--pic { width: var(--cw); }
.process__line { position: absolute; top: 26px; left: calc(var(--gutter) + var(--cw) / 2); right: calc(var(--gutter) + var(--cw) / 2); height: 2px; background: rgba(5, 7, 10, .12); }
.process__line > i { position: absolute; inset: 0; background: var(--cyan); transform-origin: left; transform: scaleX(var(--pp, 0)); }
.process__line b { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; border: 2px solid rgba(5, 7, 10, .2); transition: background-color .4s, border-color .4s, box-shadow .4s; }
.process__line b span { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-dim); white-space: nowrap; }
.process__line b.on { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 6px rgba(0, 175, 239, .18); }
.process__line b.on span { color: var(--ink); }
@media (max-width: 860px) { .process__line { display: none; } .process__track { padding-top: 0; } .step--pic { width: auto; } }

/* the revisions pill: three lines */
.revisions > span { max-width: none; border-radius: 40px; line-height: 1.3; }

/* point of view: "forever." on its own line */
.pullquote--photo p:first-child { max-width: none; font-size: clamp(2rem, 4.6vw, 5.2rem); }
.pullquote--photo p:first-child .line { display: block; }

/* What We're Building on plain black, flowing into the footer */
.cta--black { background: var(--ink); }
.cta--black .cta__bg { display: none; }
/* hero title: "Vodee Studio" stays on one line, smaller */
.ahero__title { font-size: clamp(2.8rem, 6.2vw, 7rem); }
.ahero__title .ab-bold { white-space: nowrap; }
/* the stage cards keep white type inside the white section */
.sec--white .step { color: var(--white); }
.sec--white .step p { color: rgba(255, 255, 255, .74); }

/* 47 ─ About round 3 + Contact (Dara, 2026-10-21, note 3) ───────────────────────────────────────────────── */
/* "About" (and the contact title's first line) thin ITALIC: Poppins 300 italic is the lightest italic loaded */
.ahero__title .ab-thin { font-style: italic; font-weight: 300; }

/* hero: the filmmaker CUT OUT, standing on the bottom edge in front of the cyan orb, the ring orbiting him
   (back arc behind, front arc in front), like the home hero */
.ahero { align-items: stretch; padding-bottom: 0; }
.ahero__grid { align-items: center; min-height: calc(100svh - var(--header-h) - 30px); }
.ahero__copy { padding-bottom: 6vh; }
.ahero__fig { align-self: end; justify-self: center; width: auto; height: min(84svh, 860px); max-width: 100%; aspect-ratio: 1673 / 1932; }
.ahero__orb { left: 55%; top: 44%; width: 84%; z-index: 0; }
.ahero__fig .fig-img img { object-fit: contain; object-position: bottom center; }
.ahero__fig::after { content: ''; position: absolute; left: -40%; right: -40%; bottom: 0; height: 24%; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,7,10,0), rgba(5,7,10,.82) 62%, var(--ink)); }
@media (max-width: 860px) {
  .ahero__grid { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .ahero__copy { padding-bottom: 0; }
  .ahero__fig { height: auto; width: min(100%, 440px); }
}

/* ONE curved ribbon (after the hero, and before What We're Building): it draws itself in, then its words run
   along the curve as you scroll (js) */
.cribbon { position: relative; z-index: 5; height: clamp(170px, 25vw, 360px); overflow: hidden; pointer-events: none; }
.cribbon svg { position: absolute; left: 50%; top: 50%; width: max(100%, 1000px); max-width: none; height: auto; transform: translate(-50%, -50%); overflow: visible; }
.cribbon__band { fill: none; stroke: var(--cyan); stroke-width: 78; }
.cribbon__shade { fill: none; stroke: #000; stroke-opacity: .6; stroke-width: 78; }
.cribbon__text { fill: var(--ink); font-family: var(--font); font-size: 31px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.cribbon--a { margin-top: clamp(-150px, -9vw, -50px); }

/* the studio film with a ring orbiting the card: its top arc goes behind the card, its bottom arc in front */
.about3__orbit { display: none; }
.about3__wrap { isolation: isolate; }
.about3__wrap .about3__media { z-index: 1; }
.orb3 { position: absolute; left: -16%; top: -14%; width: 132%; max-width: none; height: 128%; overflow: visible; pointer-events: none; z-index: 0; }
.orb3--front { z-index: 2; }
.orb3 ellipse { fill: none; stroke: rgba(255, 255, 255, .62); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.orb3 .comet { stroke: var(--cyan); stroke-width: 3.2; stroke-dasharray: 70 930; stroke-linecap: round; animation: orbit-comet 7s linear infinite; filter: drop-shadow(0 0 6px rgba(0,175,239,.9)); }

/* founder: white, over an Adire-style pattern (Yoruba indigo cloth) that is strongest behind the photo */
.sec--adire { position: relative; isolation: isolate; overflow: hidden; }
.sec--adire::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../assets/img/pattern-adire.svg) 0 0 / 150px 150px repeat;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 36%, rgba(0,0,0,.32) 60%, rgba(0,0,0,.16) 100%);
          mask-image: linear-gradient(100deg, #000 0%, #000 36%, rgba(0,0,0,.32) 60%, rgba(0,0,0,.16) 100%); }
.sec--adire .founder__photo .ph { box-shadow: 0 40px 80px -40px rgba(11, 61, 110, .55); }
@media (max-width: 860px) {
  .sec--adire::before { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,.2) 70%); mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,.2) 70%); }
}

/* team names: first name and surname each in their OWN badge, first cyan, surname white; hover swaps them and lifts */
.team__name { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.team__badge { display: inline-block; padding: 7px 13px 8px; border-radius: 9px; line-height: 1.05;
  transition: background-color .45s var(--ease-out), color .45s var(--ease-out), transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.team__badge--a { background: var(--cyan); color: var(--ink); }
.team__badge--b { background: var(--white); color: var(--ink); }
@media (hover: hover) {
  .team__card:hover .team__badge { transform: translateY(-4px) scale(1.04); box-shadow: 0 14px 36px -12px rgba(0,175,239,.7); }
  .team__card:hover .team__badge--a { background: var(--white); }
  .team__card:hover .team__badge--b { background: var(--cyan); transition-delay: .05s; }
}

/* How We Work back on black: the stage line in light-on-dark */
.process .process__line { background: rgba(255, 255, 255, .14); }
.process .process__line b { background: var(--ink); border-color: rgba(255, 255, 255, .34); }
.process .process__line b span { color: var(--slate); }
.process .process__line b.on { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 6px rgba(0, 175, 239, .2); }
.process .process__line b.on span { color: var(--white); }

/* footer: the About hero's cyan glow, rising from the bottom right */
.ftr { isolation: isolate; }
.ftr::before { content: ''; position: absolute; width: 96vmax; height: 96vmax; right: -40vmax; bottom: -46vmax; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,175,239,.42), rgba(0,175,239,.12) 46%, transparent 72%); }

/* Contact: the title set like the About hero */
.ctc-hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + clamp(60px, 12vh, 140px)) 0 clamp(30px, 5vh, 60px); }
.ctc-hero::before { content: ''; position: absolute; width: 90vmax; height: 90vmax; right: -48vmax; top: -52vmax; z-index: -1;
  background: radial-gradient(closest-side, rgba(0,175,239,.26), rgba(0,175,239,.06) 50%, transparent 72%); }
.ctc-hero__title { font-size: clamp(2.5rem, 7.2vw, 8.2rem); }
.ctc-hero .t-lead { max-width: 52ch; }

/* the brief form, redesigned: one card, big underlined fields, every choice a pill (with a tick when picked) */
.csec { padding-top: clamp(16px, 3vh, 40px); }
.contact2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr); gap: clamp(26px, 3.6vw, 60px); align-items: start; }
.cform { position: relative; border-radius: 28px; padding: clamp(24px, 3.6vw, 58px); background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 60%); border: 1px solid rgba(255,255,255,.08); }
.cform__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: clamp(26px, 4vh, 42px); }
.cform__k { font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--cyan); }
.cform__live { display: inline-flex; align-items: center; gap: 10px; padding: 8px 15px; border-radius: 99px; background: rgba(255,255,255,.06); font-size: var(--fs-small); color: rgba(255,255,255,.82); }
.cform__live i { width: 8px; height: 8px; border-radius: 50%; background: #3BE08A; animation: live-dot 2s infinite; }
@keyframes live-dot { 0% { box-shadow: 0 0 0 0 rgba(59,224,138,.6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(59,224,138,0); } }
.form--v2 { gap: clamp(26px, 3.6vh, 40px); }
.form--v2 .row2 { gap: clamp(22px, 2.6vw, 40px); }
.form--v2 .field { gap: 8px; }
.form--v2 .field label, .form--v2 .field legend { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--slate); }
.form--v2 .field label small, .form--v2 .field legend small { text-transform: none; letter-spacing: 0; font-weight: 400; color: rgba(138,153,173,.7); }
.form--v2 .fx { position: relative; }
.form--v2 .fx input, .form--v2 .fx textarea { border-bottom-color: rgba(255,255,255,.18); padding: 6px 0 14px; color: var(--white); }
.form--v2 .fx::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.form--v2 .fx:focus-within::after { transform: scaleX(1); }
.form--v2 .fx textarea { min-height: 130px; }
.form--v2 .opts { gap: 10px; padding-top: 6px; }
.form--v2 .opts span { gap: 0; height: 46px; padding: 0 20px; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.03); font-size: .95rem;
  transition: background-color .35s, color .35s, border-color .35s, transform .45s var(--ease-out); }
.form--v2 .opts label { cursor: pointer; text-transform: none; letter-spacing: -.005em; font-size: inherit; font-weight: 400; color: var(--white); }
.form--v2 .opts label:hover span { border-color: rgba(0,175,239,.75); transform: translateY(-2px); }
.opt__tick { width: 0; height: 16px; margin-right: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
  stroke-dasharray: 16; stroke-dashoffset: 16; transition: width .35s var(--ease-out), margin-right .35s var(--ease-out), stroke-dashoffset .45s .1s; }
.form--v2 .opts input:checked + span { background: var(--cyan); border-color: var(--cyan); color: var(--ink); font-weight: 500; }
.form--v2 .opts input:checked + span .opt__tick { width: 16px; margin-right: 8px; stroke-dashoffset: 0; }
.form--v2 .field.err .opts span { border-color: rgba(255,107,107,.7); }
.form--v2 .field.err.fx input, .form--v2 .field.err.fx textarea { border-bottom-color: #FF6B6B; }
.cform__foot { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; justify-content: space-between; padding-top: 4px; }
.cform__foot .form__note { max-width: 38ch; }
.cform .done { padding: 10px 0; }

/* the Lagos map (his old contact page's Google map of Lagos), dark and blue, with a pulsing pin */
.cside { display: grid; gap: 22px; position: sticky; top: calc(var(--header-h) + 24px); }
.cside .cdetails { position: static; }
.cmap { position: relative; aspect-ratio: 1 / 1.08; border-radius: 28px; overflow: hidden; isolation: isolate; background: #0B1119; border: 1px solid rgba(255,255,255,.08); }
.cmap iframe { position: absolute; top: -130px; left: -130px; width: calc(100% + 260px); height: calc(100% + 260px); border: 0; pointer-events: none;
  filter: invert(.92) hue-rotate(185deg) saturate(.55) brightness(.92) contrast(.95);
  transform: scale(1.25); transition: transform 2.8s var(--ease-out); }
.cmap.is-in iframe { transform: scale(1); }
.cmap__tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(75% 70% at 50% 46%, rgba(5,7,10,0) 40%, rgba(5,7,10,.7) 100%); }
.cmap__pin { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 2; }
.cmap__pin b { position: absolute; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(255,255,255,.92), 0 0 26px 8px rgba(0,175,239,.75); }
.cmap__pin i { position: absolute; width: 150px; height: 150px; margin: -75px; border-radius: 50%; border: 2px solid rgba(0,175,239,.85); background: rgba(0,175,239,.12); opacity: 0; animation: pin-pulse 2.8s var(--ease-out) infinite; }
.cmap__pin i + i { animation-delay: 1.4s; }
@keyframes pin-pulse { 0% { transform: scale(.08); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.cmap__label { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px; padding: 16px 18px;
  border-radius: 18px; background: rgba(5,7,10,.74); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.1); }
.cmap__k { grid-column: 1 / -1; font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--cyan); }
.cmap__label b { font-size: clamp(1.2rem, 1.7vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; }
.cmap__t { font-variant-numeric: tabular-nums; color: rgba(255,255,255,.75); font-size: var(--fs-small); }
.cmap__open { position: absolute; top: 16px; right: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 99px;
  background: rgba(5,7,10,.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); font-size: var(--fs-small); transition: background-color .3s, color .3s; }
.cmap__open:hover { background: var(--cyan); color: var(--ink); }
.cmap__open svg { width: 14px; height: 14px; }
.cmap__c { position: absolute; top: 24px; left: 18px; z-index: 3; font-size: 11px; color: rgba(255,255,255,.5); }
@media (max-width: 960px) {
  .contact2 { grid-template-columns: 1fr; }
  .cside { position: static; }
  .cmap { aspect-ratio: 4 / 3.4; }
}

/* 48 ─ Dara's fourth note (2026-10-22) ──────────────────────────────────────────────────────────────────── */
/* the revisions pill's look (dark, a cyan glow inside, the running light round the edge) on the brief form card ... */
.cform { background: #070B11; isolation: isolate; }
.cform::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 50%, rgba(0,175,239,.15), rgba(0,175,239,0) 72%), radial-gradient(60% 40% at 50% 100%, rgba(0,175,239,.10), rgba(0,175,239,0) 70%); }
/* ... and on the text half of each How We Work card */
.step--pic { background: #070B11; }
.step__txt { position: relative; isolation: isolate; }
.step__txt::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 95% at 50% 55%, rgba(0,175,239,.17), rgba(0,175,239,0) 72%); }

/* footer glow: softer, a long smooth falloff from the bottom-right corner */
.ftr::before { width: 80vmax; height: 80vmax; right: -40vmax; bottom: -40vmax;
  background: radial-gradient(closest-side, rgba(0,175,239,.16) 0%, rgba(0,175,239,.11) 22%, rgba(0,175,239,.06) 44%, rgba(0,175,239,.025) 64%, rgba(0,175,239,0) 86%); }

/* Contact: a cyan ribbon ring turning beside the title, a CTA down to the form */
.ctc-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 70px); }
.cbadge { position: relative; display: grid; place-items: center; width: clamp(150px, 17vw, 260px); aspect-ratio: 1; border-radius: 50%; }
.cbadge > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: cbadge-spin 22s linear infinite; }
.cbadge__band { fill: none; stroke: var(--cyan); stroke-width: 50; filter: drop-shadow(0 18px 30px rgba(0,175,239,.28)); }
.cbadge__text { fill: var(--ink); font-family: var(--font); font-size: 23px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.cbadge__core { position: relative; display: grid; place-items: center; width: 42%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); border: 1px solid rgba(255,255,255,.16);
  transition: transform .6s var(--ease-out), background-color .4s, color .4s; }
.cbadge__core svg { width: 34%; height: auto; transform: rotate(90deg); animation: none; position: static; }
@keyframes cbadge-spin { to { transform: rotate(360deg); } }
@media (hover: hover) {
  .cbadge:hover > svg { animation-duration: 7s; }
  .cbadge:hover .cbadge__core { transform: scale(1.1); background: var(--white); color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .cbadge > svg { animation: none; } }
@media (max-width: 760px) {
  .ctc-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .cbadge { justify-self: end; width: 130px; margin-top: -10px; }
}

/* 49 ─ Work: Projects | Talents tabs, the Archive, the Talents page (Dara, fourth note, 2026-10-22) ─────────── */
.wtabs { display: inline-flex; gap: 6px; padding: 6px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid var(--line); margin-bottom: clamp(22px, 3vh, 34px); }
.wtabs a { height: 46px; display: inline-flex; align-items: center; padding: 0 26px; border-radius: 99px; font-weight: 500; color: rgba(255,255,255,.75); transition: background-color .35s, color .35s; }
.wtabs a:hover { color: var(--white); }
.wtabs a[aria-current="page"] { background: var(--cyan); color: var(--ink); }

/* the Archive: a masonry of every old-site piece; videos play in the lightbox, designs open in it, sites open */
.arc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: end; gap: 18px 60px; margin: clamp(90px, 14vh, 170px) 0 clamp(30px, 5vh, 56px); }
.arc-head .t-lead { max-width: 40ch; }
.arc { columns: 4 240px; column-gap: clamp(12px, 1.4vw, 20px); }
.arc__t { display: block; width: 100%; break-inside: avoid; margin: 0 0 clamp(16px, 1.8vw, 26px); text-align: left; color: inherit; cursor: pointer; }
.arc__t.is-out { display: none; }
.arc__m { position: relative; display: block; overflow: hidden; border-radius: 14px; background: var(--navy); }
.arc__m picture, .arc__m img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.arc__play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(5,7,10,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); color: var(--white);
  transition: transform .5s var(--ease-out), background-color .4s, color .4s, border-color .4s; }
.arc__play svg { width: 18px; height: 18px; }
.arc__play--go { left: auto; top: auto; right: 14px; bottom: 14px; margin: 0; width: 46px; height: 46px; }
.arc__c { display: grid; gap: 2px; padding: 12px 2px 0; }
.arc__c b { font-weight: 500; font-size: .98rem; letter-spacing: -.01em; }
.arc__c em { font-style: normal; font-size: var(--fs-small); color: var(--slate); }
.arc__t:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 14px; }
@media (hover: hover) {
  .arc__t:hover .arc__m img { transform: scale(1.06); }
  .arc__t:hover .arc__play { transform: scale(1.12); background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
}
.vbox__frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 700px) { .arc { columns: 2; } .arc-head { grid-template-columns: 1fr; } }

/* Talents (like eggcorndigital.com/talent): big darkened photo cards, name + categories + IG / X / TT bottom left;
   each card shrinks from 1.2 to 1 as it scrolls in (js); hover zooms, darkens and blurs the photo */
.tal__intro { max-width: 34ch; margin-top: clamp(14px, 2vh, 24px); font-size: clamp(1.35rem, 2.3vw, 2.2rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.2; color: #8A8F99; }
.tals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.tal { position: relative; aspect-ratio: 1 / 1.05; overflow: hidden; border-radius: 6px; background: #0B1119; will-change: transform; }
.tal__media, .tal__media picture, .tal__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tal__media img { object-fit: cover; object-position: 50% 22%; filter: brightness(.66); transition: transform 1s var(--ease-out), filter .7s var(--ease-out); }
.tal::after { content: ''; position: absolute; inset: 45% 0 0 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5,7,10,0), rgba(5,7,10,.55)); }
.tal__type { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(6rem, 14vw, 13rem); font-weight: 700; letter-spacing: -.06em; color: rgba(0,175,239,.28);
  background: radial-gradient(70% 60% at 50% 40%, rgba(0,175,239,.22), rgba(0,175,239,0) 70%), linear-gradient(160deg, #0D2039, #070B11); transition: transform 1s var(--ease-out); }
.tal__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(18px, 2.2vw, 34px); }
.tal__body h3 { font-size: clamp(1.7rem, 2.5vw, 2.4rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; }
.tal__body p { margin-top: 8px; font-size: clamp(.95rem, 1.25vw, 1.2rem); color: rgba(255,255,255,.84); }
.tal__soc { list-style: none; display: flex; gap: 20px; margin-top: 16px; }
.tal__soc a { position: relative; display: inline-block; padding-bottom: 6px; font-weight: 600; font-size: .95rem; letter-spacing: .04em; transition: color .3s; }
.tal__soc a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 10px; height: 2px; background: var(--cyan); transition: width .45s var(--ease-out); }
.tal__soc a:hover, .tal__soc a:focus-visible { color: var(--cyan); }
.tal__soc a:hover::after, .tal__soc a:focus-visible::after { width: 100%; }
@media (hover: hover) {
  .tal:hover .tal__media img { transform: scale(1.1); filter: brightness(.42) blur(3px); }
  .tal:hover .tal__type { transform: scale(1.06); }
}
@media (max-width: 640px) { .tals { grid-template-columns: 1fr; } .tal { aspect-ratio: 4 / 5; } }

/* 50 ─ Dara's fifth note (2026-10-22) ───────────────────────────────────────────────────────────────────── */
/* How We Work: the text half fills the card, so its glow reaches the bottom on every card (Deliver's copy is shortest) */
.step--pic { display: flex; flex-direction: column; }
.step--pic .step__txt { flex: 1 1 auto; }

/* Contact: the ribbon ring bigger, its band wider */
.cbadge { width: clamp(210px, 25vw, 400px); }
.cbadge__band { stroke-width: 60; }
@media (max-width: 760px) { .cbadge { width: 170px; } }

/* Work: ONE grid of pieces, the archive way. js deals the pieces into columns left to right (css columns without js) */
.arc.is-cols { columns: auto; display: flex; align-items: flex-start; gap: clamp(12px, 1.4vw, 20px); }
.arc__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 26px); }
.arc.is-cols .arc__t { margin: 0; }
.arc__m video { display: block; width: 100%; height: 100%; object-fit: cover; }
.arc__yt { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .45s var(--ease-out); pointer-events: none; }
.arc__yt.on { opacity: 1; }
.arc__yt iframe { position: absolute; left: 50%; top: 50%; border: 0; pointer-events: none; transform-origin: 50% 50%; }
.arc__play { display: none; }
.arc__t--web .arc__m img { object-position: top center; }
.arc__go { position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(5,7,10,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); color: var(--white);
  transition: transform .5s var(--ease-out), background-color .4s, color .4s, border-color .4s; }
.arc__go svg { width: 16px; height: 16px; }
@media (hover: hover) { .arc__t:hover .arc__go { transform: scale(1.1); background: var(--cyan); color: var(--ink); border-color: var(--cyan); } }

/* Talents: taller cards for the photos Dara sent */
.tal { aspect-ratio: 4 / 4.7; }

/* 51 ─ Dara's sixth note (2026-10-23): Work tabs + sliding rows, the Talents band, Services cards, the loader ─────── */
/* Work: six discipline tabs, centred; no All, no counts */
.wcats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto clamp(44px, 7vh, 84px); }
.wcats button { height: 52px; padding: 0 26px; border-radius: 99px; border: 1px solid var(--line); font-size: 1rem; font-weight: 500; color: rgba(255,255,255,.78);
  transition: background-color .35s, color .35s, border-color .35s, transform .45s var(--ease-out); }
.wcats button:hover { border-color: rgba(0,175,239,.7); color: var(--white); transform: translateY(-2px); }
.wcats button[aria-selected="true"] { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }
.wcats button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.wcat[hidden] { display: none; }

/* each row: its heading and arrows, three pieces in view, the rest one slide away */
.wseg { --g: clamp(14px, 1.6vw, 24px); margin-bottom: clamp(56px, 9vh, 104px); }
.wseg:last-child { margin-bottom: 0; }
.wseg__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(16px, 2.4vh, 26px); }
.wseg__head h3 { font-size: clamp(1.5rem, 2.5vw, 2.5rem); font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.wseg__nav { display: flex; gap: 10px; }
/* row arrows: blue circles with a black arrow, white on hover, so they stand out on the dark page (Dara, 2026-10-29) */
.wseg__btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--cyan); background: var(--cyan); color: var(--ink);
  box-shadow: 0 10px 30px -12px rgba(0, 175, 239, .6);
  transition: background-color .35s, color .35s, border-color .35s, opacity .35s, box-shadow .35s, transform .45s var(--ease-out); }
.wseg__btn span { display: grid; place-items: center; }
.wseg__btn svg { width: 20px; height: 20px; stroke-width: 2.4; }
.wseg__btn[data-dir="-1"] span { transform: rotate(180deg); }
.wseg__btn:hover:not(:disabled) { background: var(--white); border-color: var(--white); color: var(--ink); transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(255, 255, 255, .45); }
.wseg__btn:disabled { opacity: .35; box-shadow: none; cursor: default; }
.wseg__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--g)) / 3); gap: var(--g); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.wseg__track::-webkit-scrollbar { display: none; }
.wseg__track .arc__t { margin: 0; min-width: 0; scroll-snap-align: start; }
@media (max-width: 760px) { .wseg__track { grid-auto-columns: 82%; } .wseg__btn { width: 44px; height: 44px; } }

/* the Talents band after the work: copy + button on the left, the four talents fanned out on the right */
.talband { border-top: 1px solid var(--line); overflow: hidden; }
.talband__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 110px); }
.talband__title { font-size: clamp(2.4rem, 5.4vw, 6rem); }
.talband .t-lead { max-width: 44ch; margin-bottom: clamp(26px, 4vh, 40px); }
.talband__fan { position: relative; display: block; height: clamp(360px, 38vw, 560px); }
.talband__fan figure { position: absolute; top: 50%; left: 50%; width: 42%; aspect-ratio: 4 / 5; margin: 0; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 60px -20px rgba(0,0,0,.85); transition: transform .9s var(--ease-out); }
.talband__fan picture, .talband__fan img { display: block; width: 100%; height: 100%; object-fit: cover; }
.talband__fan figure:nth-child(1) { transform: translate(-128%, -50%) rotate(-11deg); z-index: 1; }
.talband__fan figure:nth-child(2) { transform: translate(-82%, -54%) rotate(-4deg); z-index: 2; }
.talband__fan figure:nth-child(3) { transform: translate(-22%, -47%) rotate(4deg); z-index: 3; }
.talband__fan figure:nth-child(4) { transform: translate(22%, -51%) rotate(11deg); z-index: 4; }
@media (hover: hover) {
  .talband__fan:hover figure:nth-child(1) { transform: translate(-150%, -50%) rotate(-15deg); }
  .talband__fan:hover figure:nth-child(2) { transform: translate(-92%, -58%) rotate(-6deg); }
  .talband__fan:hover figure:nth-child(3) { transform: translate(-12%, -44%) rotate(6deg); }
  .talband__fan:hover figure:nth-child(4) { transform: translate(44%, -52%) rotate(15deg); }
}
@media (max-width: 860px) { .talband__grid { grid-template-columns: 1fr; } .talband__fan { height: 74vw; } }

/* Services: the six services as cards that stack as you scroll; each lit inside, the running light round its edge */
.svc2-nav { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px, 4vh, 40px); }
.svc2-nav a { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 99px; border: 1px solid var(--line); font-size: .95rem; color: rgba(255,255,255,.82);
  transition: background-color .35s, color .35s, border-color .35s; }
.svc2-nav a:hover { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }
.svc2-sec { padding-top: clamp(10px, 2vh, 30px); }
.svc2-stack { display: grid; gap: clamp(28px, 5vh, 56px); }
.svc2 { position: sticky; top: calc(var(--header-h) + 12px); display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 3vw, 56px);
  min-height: min(76vh, 700px); padding: clamp(22px, 2.6vw, 42px); border-radius: 28px; background: #070B11; isolation: isolate; transform-origin: 50% 0;
  scroll-margin-top: calc(var(--header-h) + 12px); box-shadow: 0 -30px 60px -30px rgba(0,0,0,.9); }
.svc2::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 70% at 22% 62%, rgba(0,175,239,.14), rgba(0,175,239,0) 70%); }
.svc2__copy { display: flex; flex-direction: column; gap: clamp(14px, 2vh, 22px); min-width: 0; }
.svc2__title { display: grid; font-size: clamp(2.2rem, 4.2vw, 4.4rem); letter-spacing: -.05em; line-height: .95; }
.svc2__title .ab-thin { font-style: italic; font-weight: 300; }
.svc2__title .ab-bold { font-weight: 700; color: var(--white); }
.svc2__text { max-width: 52ch; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.55; color: rgba(255,255,255,.8); }
.svc2 .chips { margin: 0; }
.svc2__proof { max-width: 56ch; font-size: var(--fs-small); color: var(--slate); }
.svc2__proof a { color: rgba(255,255,255,.86); border-bottom: 1px solid rgba(255,255,255,.25); }
.svc2__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.svc2__shots { display: flex; gap: 10px; }
.svc2__shot { display: block; width: clamp(84px, 8vw, 130px); aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.svc2__shot span, .svc2__shot picture, .svc2__shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.svc2__shot:hover img { transform: scale(1.08); }
.svc2__media { position: relative; min-height: 320px; border-radius: 20px; overflow: hidden; background: var(--navy); }
.svc2__media > video, .svc2__media > picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.svc2__media video, .svc2__media img { width: 100%; height: 100%; object-fit: cover; }
.svc2__media--mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; background: none; }
.svc2__media--mosaic span { position: relative; overflow: hidden; border-radius: 14px; }
.svc2__media--mosaic picture { position: absolute; inset: 0; }
.svc2__media--browser { background: #11161E; border: 1px solid rgba(255,255,255,.1); }
.svc2__bar { position: absolute; top: 0; left: 0; right: 0; height: 34px; z-index: 1; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #161C26; }
.svc2__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.22); }
.svc2__media--browser > picture { top: 34px; height: calc(100% - 34px); }
.svc2__media--browser img { object-position: top center; }
@media (max-width: 960px), (max-height: 680px) {
  .svc2 { position: relative; top: auto; grid-template-columns: 1fr; min-height: 0; }
  .svc2__media { order: -1; aspect-ratio: 16 / 10; min-height: 0; }
}
.svc2-cta__title { font-size: clamp(2.6rem, 7vw, 7.6rem); margin-inline: auto; }

/* the loader: the logo with its orbit circling, then it all dissolves and the columns lift */
.curtain__mark { width: min(460px, 84vw); aspect-ratio: 400 / 240; }
.curtain__mark .curtain__orbit { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; overflow: visible; }
.curtain__mark .ring-draw { stroke: rgba(255,255,255,.5); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.curtain__comet { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 110 890; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 8px rgba(0,175,239,.9)); animation: orbit-comet 1.6s linear infinite; opacity: 0; }
.curtain__logo { position: absolute; inset: 0; display: grid; place-items: center; }
.curtain__logo img { width: 46%; margin: 0; opacity: 0; }
.curtain__mark .curtain__label { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 22px; }
/* Design + UI/UX rows show each piece whole on a quiet panel (a crop would cut a poster's type) */
.wcat--whole .arc__m { background: #0B1119; }
.wcat--whole .arc__m img { object-fit: contain; }
.wcat--whole .arc__t:hover .arc__m img { transform: scale(1.03); }

/* 52 ─ Dara's seventh note (2026-10-23) ────────────────────────────────────────────────────────────────────── */
/* Work: Web, UI/UX (one row per brand) and 3D show every piece at once, three across, no slider */
.wseg__track--grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(26px, 3.6vh, 44px);
  overflow: visible; scroll-snap-type: none; }
@media (max-width: 960px) { .wseg__track--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wseg__track--grid { grid-template-columns: minmax(0, 1fr); } }

/* Home: What Clients Say — quote cards that slide three at a time (the Work rows' arrows) */
.testi { border-top: 1px solid var(--line); }
.testi__seg .wseg__head { margin-bottom: clamp(30px, 5vh, 56px); }
.testi__title { margin: 0; font-size: clamp(2.4rem, 5.6vw, 6.2rem); }
.testi__track { align-items: stretch; }
.testi__card { position: relative; display: flex; flex-direction: column; gap: 22px; margin: 0; padding: clamp(26px, 2.6vw, 40px); border-radius: 24px;
  background: #070B11; isolation: isolate; scroll-snap-align: start; }
.testi__card::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 60% at 30% 30%, rgba(0,175,239,.13), rgba(0,175,239,0) 70%); }
.testi__q { display: block; height: 44px; font-size: 6rem; line-height: .9; font-weight: 700; color: var(--cyan); }
.testi__card blockquote { flex: 1; margin: 0; font-size: clamp(1.05rem, 1.3vw, 1.28rem); line-height: 1.5; letter-spacing: -.01em; color: rgba(255,255,255,.9); }
.testi__card figcaption { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.testi__av { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(0,175,239,.55); background: #fff; }
.testi__av picture, .testi__av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.testi__card b { display: block; font-weight: 600; }
.testi__card em { font-style: normal; font-size: var(--fs-small); color: var(--slate); }

/* 53 ─ 2026-10-27 (Dara) ────────────────────────────────────────────────────────────────────────────────────── */
/* team: three to a row (two guys + one girl, two guys + one girl, three) */
.team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Home Studio section: the Adire pattern from the founder section, softer all over (cards and copy sit on top) */
.studio2.sec--adire::before { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.28));
          mask-image: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.28)); }

/* What We Do: six cards (longer section), the pictures dimmed so the words read: title cyan, line white */
.hatch { height: 430vh; }
@media (max-width: 1100px) { .hatch { height: 380vh; } }
.hatch__card img { filter: brightness(.6); }
.hatch__card::after { background: linear-gradient(180deg, rgba(5,7,10,.12) 0%, rgba(5,7,10,.5) 45%, rgba(5,7,10,.94) 100%); }
.hatch__cap b { color: var(--cyan); }
.hatch__d { color: rgba(255, 255, 255, .95); }

/* the loader: the logo itself; its white orbit line draws in and a cyan light runs along it */
.curtain__mark { width: min(440px, 80vw); aspect-ratio: 408 / 256; }
.curtain__mark .curtain__logo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; overflow: visible; }
.lo-type { opacity: 0; }
.lo-comet { stroke: var(--cyan); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 80 920; opacity: 0;
  filter: drop-shadow(0 0 6px rgba(0,175,239,.95)); animation: orbit-comet 1.8s linear infinite; }

/* 54 ─ every section moves (Dara, 2026-10-27: pop in as you scroll to it, an out animation as it goes up) ───────────
   site.js "every section moves": .xp = waiting to pop in; .xo-on = leaving the top of the screen, --xo = 0..1 (scroll).
   The exit uses translate / scale / opacity as their own properties so it never fights a block's own transform;
   blocks whose opacity is already animated (reveals, pops) fade with filter instead (.xo-f). */
html.js .xp { opacity: 0 !important; }
html.js .xo-on { translate: 0 calc(var(--xo) * -70px); scale: calc(1 - var(--xo) * .08); }
html.js .xo-on:not(.xo-f) { opacity: calc(1 - var(--xo) * .9); }
html.js .xo-on.xo-f { filter: opacity(calc(1 - var(--xo) * .9)); }

/* 55 ─ Work tiles on computers play on hover (Dara, 2026-10-28): the YouTube film fades in fast once it runs */
.yt-hover .arc__yt { transition-duration: .4s; }

/* 56 ─ launch pass: nothing may push the page sideways on any screen (2026-10-28 audit: About's orbit rings spilled
   30-80 px on phones/tablets, Talents cards a few px while they grow in). body's overflow-x alone does not stop a
   sideways drag on iPhone; clip (unlike hidden) makes no scroll box, so sticky and the pins keep working. */
html, body { overflow-x: clip; }
.about3, .sec:has(.tals) { overflow-x: clip; }
/* Work tiles: while a YouTube film is starting, a thin cyan line runs along the foot of the still */
.arc__t.is-wait .arc__m::after { content: ''; position: absolute; left: 0; bottom: 0; z-index: 3; width: 36%; height: 2px; background: var(--cyan);
  animation: arcwait 1.1s var(--ease-out) infinite; pointer-events: none; }
@keyframes arcwait { from { transform: translateX(-100%); } to { transform: translateX(280%); } }
/* 57 ─ Work films open in the pop-up (Dara, 2026-10-29); a film YouTube only plays on youtube.com (build.NO_EMBED)
   shows its still there, with the way to YouTube */
.vbox__out { position: relative; width: 100%; height: 100%; }
.vbox__frame .vbox__out img { object-fit: cover; opacity: .4; }
.vbox__outc { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 24px; text-align: center; color: var(--white); }
.vbox__outc p { font-size: clamp(1.1rem, 2.2vw, 1.6rem); }

/* 58 ─ the pop-up while a film starts (Dara, 2026-10-29: "the pop up isn't doing" — it sat black for YouTube's 5-10 s):
   the film's still fills the frame with a thin cyan line running along its foot; the YouTube player fades in over it
   once it is playing (site.js playYT) */
.vbox__frame { position: relative; }
.vbox__still { position: absolute; inset: 0; }
.vbox__frame .vbox__still img { object-fit: cover; }
.vbox__frame iframe.vbox__yt { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease-out); }
.vbox__frame.is-on iframe.vbox__yt { opacity: 1; }
.vbox__frame.is-wait::after { content: ''; position: absolute; left: 0; bottom: 0; z-index: 3; width: 32%; height: 3px; background: var(--cyan);
  animation: arcwait 1.1s var(--ease-out) infinite; pointer-events: none; }

/* 59 ─ page transition (Dara, 2026-11-01: hugeinc.com's) ─────────────────────────────────────────────────────────
   A navy panel with a curved top edge rises over the page while the next page's name lifts in letter by letter; on the
   new page the name lifts away and the panel goes on up, its curved bottom edge flattening as it leaves. The caps are
   the top / bottom of a circle 125 % of the screen wide (Huge's). The first page of a visit shows the logo sting on the
   same panel instead (html.pt-on = not the first page; set in the <head>). js: site.js "curtain". */
.curtain { display: block; overflow: hidden; overflow: clip; }
.pt__panel { position: absolute; inset: 0; background: var(--navy); color: var(--navy); }
.pt__cap { position: absolute; left: 0; width: 100%; overflow: hidden; }
.pt__cap span { position: absolute; left: 50%; width: 125%; height: 500%; border-radius: 50%; background: currentColor; transform: translateX(-50%); }
.pt__cap--top { bottom: calc(100% - 1px); height: 15vw; transform-origin: 50% 100%; }
.pt__cap--top span { top: 0; }
.pt__cap--bot { top: calc(100% - 1px); height: 20vw; transform-origin: 50% 0; }
.pt__cap--bot span { bottom: 0; }
.pt__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 88vw; text-align: center;
  color: var(--white); font-weight: 600; font-size: clamp(2.2rem, 3.6vw, 3.8rem); letter-spacing: -.03em; line-height: 1.1; }
html:not(.pt-on) .pt__label { visibility: hidden; }
html.pt-on .curtain__mark { visibility: hidden; }
.pt__w { display: inline-block; white-space: nowrap; }
.pt__l { display: inline-block; vertical-align: top; overflow: hidden; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; letter-spacing: 0; margin-right: -.03em; }
.pt__l > span { display: inline-block; will-change: transform; }
.pt__dot { color: var(--cyan); }

/* 60 ─ What We Do (Dara, 2026-11-01: hugeinc.com's "Never one and done") ─────────────────────────────────────────
   The headline top left; the six cards on a big circle below it. While the section is held (60 % of a screen of
   scroll per card, Huge's) the circle turns: the cards roll in from the right and out to the left. Each card: the
   picture, then its number, name, line (cyan) and a mini body copy. Without the script / with reduced motion: a row
   you swipe. js: site.js "rad" (sets --R and --step from the card width). */
.rad { position: relative; --cw: min(28vw, 43vh, 440px); }
.rad__pin { position: relative; padding: calc(var(--header-h) + clamp(14px, 3vh, 40px)) 0 clamp(40px, 6vh, 80px); }
.rad__intro { position: relative; z-index: 2; }
.rad__title { margin: 0; font-size: clamp(2.8rem, 6.2vw, 7rem); font-weight: 600; letter-spacing: -.055em; line-height: .92; }
.rad__sub { margin-top: clamp(10px, 1.4vh, 16px); color: var(--cyan); font-size: clamp(1.1rem, 1.7vw, 1.8rem); font-weight: 500; letter-spacing: -.02em; }
.rad__body { margin-top: clamp(6px, 1vh, 12px); max-width: 36em; color: rgba(255, 255, 255, .88); font-size: clamp(.95rem, 1.1vw, 1.15rem); line-height: 1.5; text-wrap: pretty; }
.rad__stage { position: relative; margin-top: clamp(18px, 3.6vh, 44px); }
.rad__list { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rad__item { flex: 0 0 auto; width: var(--cw); scroll-snap-align: center; }
.rad__card { display: flex; flex-direction: column; height: 100%; border-radius: 16px; overflow: hidden; background: #0B1119; color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.rad__media { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; background: var(--navy); }
.rad__media picture, .rad__media img, .rad__media video { display: block; width: 100%; height: 100%; }
.rad__media img, .rad__media video { object-fit: cover; object-position: var(--op, 50% 50%); transition: transform 1.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .rad__card:hover .rad__media img, .rad__card:hover .rad__media video { transform: scale(1.05); } }
.rad__cap { display: grid; gap: 6px; padding: clamp(14px, 1.3vw, 20px) clamp(16px, 1.5vw, 24px) clamp(16px, 1.6vw, 24px); }
.rad__n { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em; color: var(--slate); }
.rad__t { font-size: clamp(1.2rem, 1.6vw, 1.85rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.rad__lead { color: var(--cyan); font-size: clamp(.86rem, .95vw, 1rem); font-weight: 500; line-height: 1.35; }
.rad__d { color: rgba(255, 255, 255, .72); font-size: clamp(.8rem, .85vw, .9rem); line-height: 1.5; }
html.js .rad.is-live { height: calc(100vh + (var(--n) - 1) * 60vh); }
.rad.is-live .rad__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
.rad.is-live .rad__stage { flex: 1 1 auto; min-height: 0; }
.rad.is-live .rad__list { display: grid; overflow: visible; width: var(--cw); margin: 0 auto; padding: 0; transform-origin: 50% var(--R, 1700px); will-change: transform; }
.rad.is-live .rad__item { grid-area: 1 / 1; transform-origin: 50% var(--R, 1700px); transform: rotate(calc(var(--step, 24deg) * var(--i))); }
.rad.is-live .rad__pin::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(4rem, 12vh, 8rem); z-index: 3; pointer-events: none;
  background: linear-gradient(to top, var(--ink), rgba(5, 7, 10, 0)); }
@media (max-width: 860px) {
  .rad { --cw: min(76vw, 340px); }
  .rad__body { font-size: .95rem; }
}

/* 61 ─ colour sweep on body copy (Dara, 2026-11-01: Huge's paragraph sweep) ──────────────────────────────────────
   Each word shows its slice of one gradient per line: full colour → cyan edge → 20 % colour, 3 lines wide; js moves it
   across with the scroll (site.js "colour sweep"). */
.sw { background-image: linear-gradient(90deg, currentColor 0%, currentColor 40%, var(--cyan) 50%, color-mix(in srgb, currentColor 20%, transparent) 60%, color-mix(in srgb, currentColor 20%, transparent) 100%);
  background-repeat: no-repeat; background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }

/* 62 ─ 2026-11-01 (Dara's 2nd note) ─────────────────────────────────────────────────────────────────────────────
   Page cover: it rises as Huge's curved panel but LEAVES as five columns lifting one after another (the old wipe he
   wanted back); the home page's cover shows the logo instead of "Home."; the cover carries the brand's one light (a
   cyan bloom from the bottom-left corner) so it isn't flat. Each column shows its fifth of one full-screen picture. */
.curtain { --pt-bg: radial-gradient(75% 85% at 0% 100%, rgba(0, 175, 239, .34) 0%, rgba(0, 175, 239, .1) 42%, rgba(0, 175, 239, 0) 72%); }
.pt__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.curtain .pt__cols i { background: var(--pt-bg), var(--navy); background-size: 100vw 100vh; background-position: calc(var(--c) * -20vw) 0; border-right-color: rgba(255, 255, 255, .05); }
.curtain .pt__cols i:last-child { border-right: 0; }
.pt__panel { background: var(--pt-bg), var(--navy); background-size: 100vw 100vh; transform: translateY(100%); }
.pt__cap--top { transform: scaleY(0); }   /* its curved top edge stays out of sight until it rises */
html.pt-on .curtain__mark .curtain__label { visibility: hidden; }
html.pt-on .curtain--home .curtain__mark { visibility: visible; }
html.pt-on .curtain--home .pt__label { display: none; }
html.pt-on .curtain--home .lo-type, html.pt-on .curtain--home .lo-comet { opacity: 1; }

/* What We Do cards: the picture fills the card (no black gradient over it, no numbers); the copy sits on a frosted
   panel at the bottom so it reads on light pictures too */
.rad__card { position: relative; display: block; aspect-ratio: 4 / 5; height: auto; }
.rad__media { position: absolute; inset: 0; aspect-ratio: auto; }
.rad__cap { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; gap: 5px; padding: clamp(12px, 1.1vw, 16px) clamp(14px, 1.2vw, 18px) clamp(14px, 1.2vw, 18px);
  border-radius: 12px; background: rgba(5, 7, 10, .5); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.rad__t { font-size: clamp(1.1rem, 1.35vw, 1.55rem); }
.rad__lead { font-size: clamp(.82rem, .88vw, .95rem); line-height: 1.3; color: #3CC2F5; }
.rad__d { font-size: clamp(.76rem, .8vw, .86rem); line-height: 1.45; color: rgba(255, 255, 255, .85); }
/* the two light pictures (Lumilearn's white, the jar's pink) need a deeper panel for the copy to read */
.rad__card[href$="#motion"] .rad__cap, .rad__card[href$="#3d"] .rad__cap { background: rgba(5, 7, 10, .72); }

/* 63 ─ website + UI/UX case studies (Dara, 2026-11-01: basicagency.com's case studies) ─────────────────────────────
   .claude/webcases.py: hero (kind, the name big, project focus, the live site playing in a browser), overview (summary,
   services, View live site | The Challenge, The Idea), the site on a phone, feature rows, screens, also, next. */
.wc-hero { position: relative; padding: calc(var(--header-h) + clamp(40px, 9vh, 110px)) 0 clamp(40px, 7vh, 90px); }
.wc-hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 90vh; pointer-events: none;
  background: radial-gradient(60% 70% at 0% 0%, rgba(0, 175, 239, .16), rgba(0, 175, 239, 0) 70%); }
.wc-hero__head { position: relative; }
.wc-kicker, .wc-h { margin: 0 0 16px; color: var(--cyan); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.wc-title { margin: 0; font-size: clamp(3rem, 8.6vw, 9.6rem); font-weight: 600; letter-spacing: -.06em; line-height: .9; text-transform: uppercase; }
.wc-focus { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: clamp(18px, 3vh, 32px) 0 0; color: rgba(255, 255, 255, .85); font-size: clamp(.78rem, .92vw, .92rem); letter-spacing: .08em; text-transform: uppercase; }
.wc-focus span { color: var(--slate); }
.wc-hero__media { position: relative; margin-top: clamp(28px, 6vh, 64px); }
.wc-browser { border-radius: 14px; overflow: hidden; background: #0B1119; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 120px -50px rgba(0, 0, 0, .95); }
.wc-browser__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #111A26; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.wc-browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.wc-browser__bar span { margin-left: 12px; padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--slate); font-size: .72rem; letter-spacing: .02em; }
.wc-browser__screen { aspect-ratio: 16 / 10; overflow: hidden; background: #0B1119; }
.wc-browser__screen video, .wc-browser__screen picture, .wc-browser__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wc-over__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.wc-over__side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 26px; }
.wc-sum { margin: 0; font-size: clamp(1.35rem, 2vw, 2.1rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.18; }
.wc-svc { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; color: var(--slate); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.wc-live { justify-self: start; }
.wc-live--soon { color: var(--slate); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.wc-over__body .t-lead { margin: 0; color: rgba(255, 255, 255, .92); font-size: clamp(1.08rem, 1.42vw, 1.5rem); line-height: 1.45; }
.wc-over__body .t-lead + .wc-h { margin-top: clamp(36px, 6vh, 64px); }
.wc-big { margin: 0 0 22px; font-size: clamp(2.2rem, 5vw, 5.4rem); font-weight: 600; letter-spacing: -.05em; line-height: .95; }
.wc-resp { background: radial-gradient(70% 90% at 100% 100%, rgba(0, 175, 239, .16), rgba(0, 175, 239, 0) 70%), #070B12; }
.wc-resp__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.wc-resp .t-lead { max-width: 34em; }
.wc-phone { position: relative; justify-self: center; width: min(320px, 70vw); aspect-ratio: 9 / 19.5; padding: 12px; border-radius: 46px; background: #0B0F16;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 0 0 1px rgba(0, 175, 239, .14), 0 60px 120px -40px rgba(0, 0, 0, .95); }
.wc-phone video { display: block; width: 100%; height: 100%; border-radius: 35px; object-fit: cover; object-position: top center; background: #0B1119; }
.wc-phone__notch { position: absolute; top: 21px; left: 50%; z-index: 1; width: 30%; height: 22px; border-radius: 999px; background: #000; transform: translateX(-50%); }
.wc-feats .wc-big { margin-bottom: clamp(24px, 5vh, 60px); }
.wc-feat { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 90px); align-items: center; padding: clamp(28px, 5vh, 60px) 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.wc-feat--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.wc-feat--flip .wc-feat__copy { order: 2; }
.wc-feat__t { margin: 0 0 14px; font-size: clamp(1.4rem, 2.2vw, 2.4rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.wc-feat .t-body, .wc-also .t-body { margin: 0; color: rgba(255, 255, 255, .82); }
.wc-screens__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); align-items: start; }
.wc-shot { display: block; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #0B1119; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); cursor: pointer; }
.wc-shot picture, .wc-shot img { display: block; width: 100%; height: auto; }
.wc-shot img { transition: transform 1s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .wc-shot:hover img { transform: scale(1.03); } }
.wc-also__item { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.wc-also__copy .link { margin-top: 18px; }
@media (max-width: 860px) {
  .wc-over__grid, .wc-resp__grid, .wc-feat, .wc-feat--flip, .wc-also__item { grid-template-columns: minmax(0, 1fr); }
  .wc-over__side { position: static; }
  .wc-feat--flip .wc-feat__copy { order: 0; }
  .wc-screens__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-title { font-size: clamp(2.5rem, 12.5vw, 4.6rem); }
  .wc-browser__bar { height: 26px; }
  .wc-browser__bar span { display: none; }
}

/* 64 ─ Studio Journal (Dara, 2026-11-01: "a blog page ... marketing, social ... leaders and challenges") ─ journal.py */
.jr-hero { position: relative; padding: calc(var(--header-h) + clamp(50px, 10vh, 130px)) 0 clamp(16px, 3vh, 40px); }
.jr-hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 80vh; pointer-events: none;
  background: radial-gradient(60% 70% at 0% 0%, rgba(0, 175, 239, .16), rgba(0, 175, 239, 0) 70%); }
.jr-hero .wrap { position: relative; }
.jr-hero__lead { max-width: 36em; margin-top: 18px; }
.jr-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(24px, 5vh, 50px); }
.jr-chip { padding: 10px 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--white); font: inherit; font-size: .85rem; font-weight: 500;
  cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background .3s, color .3s; }
.jr-chip:hover { background: rgba(255, 255, 255, .12); }
.jr-chip.is-on { background: var(--cyan); color: var(--ink); box-shadow: none; }
.jr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px); align-items: start; }
.jr-card { display: grid; gap: 12px; align-content: start; color: var(--white); }
.jr-card[hidden] { display: none; }
.jr-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--navy); }
.jr-card__media picture, .jr-card__media img { display: block; width: 100%; height: 100%; }
.jr-card__media img { object-fit: cover; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .jr-card:hover .jr-card__media img { transform: scale(1.05); } }
.jr-card__meta { display: flex; gap: 12px; color: var(--slate); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; }
.jr-card__meta b { color: var(--cyan); font-weight: 600; }
.jr-card__t { font-size: clamp(1.2rem, 1.6vw, 1.7rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; }
.jr-card__x { color: rgba(255, 255, 255, .72); font-size: .95rem; line-height: 1.5; }
.jr-empty { color: var(--slate); }
.jr-post__head { max-width: 1100px; padding-top: calc(var(--header-h) + clamp(40px, 8vh, 100px)); }
.jr-back { margin-bottom: 26px; }
.jr-back svg { transform: rotate(180deg); }
.jr-post__cat { margin: 0 0 14px; color: var(--cyan); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.jr-post__t { margin: 0; font-size: clamp(2.2rem, 5vw, 5.2rem); font-weight: 600; letter-spacing: -.05em; line-height: .98; }
.jr-post__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; color: var(--slate); font-size: .9rem; }
.jr-post__cover { margin-top: clamp(28px, 6vh, 60px); }
.jr-post__cover picture, .jr-post__cover img { display: block; width: 100%; }
.jr-post__cover img { aspect-ratio: 16 / 8; object-fit: cover; border-radius: 16px; }
.jr-post__body { max-width: 720px; margin: clamp(40px, 8vh, 90px) auto clamp(60px, 10vh, 120px); color: rgba(255, 255, 255, .88); font-size: clamp(1.05rem, 1.2vw, 1.2rem); line-height: 1.75; }
.jr-post__body p { margin: 0 0 1.3em; }
.jr-post__body h2 { margin: 2em 0 .6em; color: var(--white); font-size: clamp(1.35rem, 1.9vw, 1.9rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
.jr-post__body blockquote { margin: 1.8em 0; padding: 0 0 0 24px; border-left: 3px solid var(--cyan); color: var(--white); font-size: clamp(1.35rem, 2vw, 2rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.jr-more__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: clamp(20px, 4vh, 40px); }
@media (min-width: 861px) and (max-width: 1100px) { .jr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .jr-grid { grid-template-columns: minmax(0, 1fr); } }

/* 65 ─ 2026-11-02 (Dara's 4th note) ─────────────────────────────────────────────────────────────────────────────── */
/* Work page: Web and UI/UX two to a row (like basicagency.com), one on phones */
.wcat[data-cat="web"] .wseg__track--grid, .wcat[data-cat="uiux"] .wseg__track--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(18px, 2.4vw, 36px); }
@media (max-width: 560px) { .wcat[data-cat="web"] .wseg__track--grid, .wcat[data-cat="uiux"] .wseg__track--grid { grid-template-columns: minmax(0, 1fr); } }

/* What We Do cards: the copy sits on the picture itself — no panel, no gradient ("the text should be on the image
   directly"); a soft shadow on the letters only; dark copy on the two light pictures */
.rad__cap, .rad__card[href$="#motion"] .rad__cap, .rad__card[href$="#3d"] .rad__cap { left: clamp(16px, 1.5vw, 24px); right: clamp(16px, 1.5vw, 24px); bottom: clamp(16px, 1.6vw, 24px);
  padding: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.rad__t { text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 6px 24px rgba(0, 0, 0, .55); }
.rad__lead, .rad__d { text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 4px 16px rgba(0, 0, 0, .6); }
.rad__lead { color: #5AD3FF; }
.rad__d { color: rgba(255, 255, 255, .92); }
.rad__card[href$="#motion"] .rad__t, .rad__card[href$="#3d"] .rad__t { color: var(--ink); text-shadow: 0 1px 14px rgba(255, 255, 255, .7); }
.rad__card[href$="#motion"] .rad__d, .rad__card[href$="#3d"] .rad__d { color: rgba(5, 7, 10, .85); text-shadow: 0 1px 10px rgba(255, 255, 255, .8); }
.rad__card[href$="#motion"] .rad__lead, .rad__card[href$="#3d"] .rad__lead { color: #006A96; text-shadow: 0 1px 10px rgba(255, 255, 255, .8); }
/* the SongScribe ad: zoomed a touch from the top so its own web-address pill at the foot sits outside the card */
.rad__card[href$="#design"] .rad__media img { transform-origin: 50% 0; transform: scale(1.14); }
@media (hover: hover) and (pointer: fine) { .rad__card[href$="#design"]:hover .rad__media img { transform: scale(1.19); } }

/* Project pages: some sections white ("it's not everything that should be all black") */
.wc-resp.is-light { background: #fff; }
.wc-screens.is-light, .wc-also.is-light { background: #F3F5F8; }
.wc-resp.is-light .t-lead, .wc-also.is-light .t-body { color: rgba(5, 7, 10, .74); }
.wc-also.is-light .link { color: var(--ink); }
.is-light .wc-browser { box-shadow: 0 0 0 1px rgba(5, 7, 10, .08), 0 40px 90px -40px rgba(5, 7, 10, .5); }
.is-light .wc-shot { background: #fff; box-shadow: 0 0 0 1px rgba(5, 7, 10, .06), 0 24px 50px -26px rgba(5, 7, 10, .4); }
/* Built For Every Screen: a real phone mockup — the front of one phone playing the site, the back of another behind it */
.wc-phones { position: relative; justify-self: center; width: min(470px, 88vw); aspect-ratio: 1 / 1.22; }
.wc-phones .wc-phone { position: absolute; width: 54%; aspect-ratio: 9 / 19.5; padding: 0; border-radius: 15% / 7%; }
.wc-phones .wc-phone--back { left: 3%; top: 2%; transform: rotate(-12deg);
  background: radial-gradient(90% 60% at 25% 12%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 60%), linear-gradient(155deg, #DCE1E6 0%, #AAB2BC 48%, #CBD1D8 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8), inset 0 0 0 4px rgba(120, 128, 140, .35), 0 50px 90px -40px rgba(5, 7, 10, .55), 0 18px 30px -18px rgba(5, 7, 10, .35); }
.wc-cam { position: absolute; left: 7%; top: 3.2%; width: 44%; aspect-ratio: 1; border-radius: 27%;
  background: linear-gradient(145deg, rgba(255, 255, 255, .75), rgba(170, 178, 188, .55)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8), 0 8px 18px -6px rgba(5, 7, 10, .35); }
.wc-cam i { position: absolute; width: 41%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #20344a 0 20%, #0b1119 25% 44%, #2c333d 47% 60%, #11151b 63% 100%); box-shadow: 0 0 0 2.5px #9AA2AD, 0 3px 6px rgba(5, 7, 10, .4); }
.wc-cam i:nth-child(1) { left: 7%; top: 7%; }
.wc-cam i:nth-child(2) { left: 7%; bottom: 7%; }
.wc-cam i:nth-child(3) { right: 7%; top: 29.5%; }
.wc-cam b { position: absolute; right: 13%; top: 9%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FFFBE6, #D8CC9C); }
.wc-phones .wc-phone--front { right: 3%; bottom: 0; padding: 2.4%;
  background: linear-gradient(150deg, #4A5059, #1B1E23 35%, #2F343B 65%, #121418);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 0 0 4px #07080A, 0 60px 100px -40px rgba(5, 7, 10, .6), 0 24px 40px -22px rgba(5, 7, 10, .45); }
.wc-phones .wc-phone--front::before, .wc-phones .wc-phone--front::after { content: ''; position: absolute; width: 1.6%; border-radius: 2px; background: linear-gradient(90deg, #2A2E35, #5B616B); }
.wc-phones .wc-phone--front::before { right: -1.4%; top: 24%; height: 11%; }
.wc-phones .wc-phone--front::after { left: -1.4%; top: 19%; height: 6.5%; }
.wc-phone__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12.5% / 5.8%; background: #000; }
.wc-phones .wc-phone__screen video { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; object-position: top center; }
.wc-island { position: absolute; top: 4.4%; left: 50%; z-index: 2; width: 30%; height: 3.1%; border-radius: 999px; background: #000; transform: translateX(-50%); }

/* Journal: two to a row on white, a hero over a full picture (subject on the right), the reading on white with
   pictures between the paragraphs */
.jr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 3vw, 48px); }
.jr-card__media { aspect-ratio: 16 / 10; }
.jr-list.is-light { background: #fff; }
.is-light .jr-card { color: var(--ink); }
.is-light .jr-card__x { color: rgba(5, 7, 10, .68); }
.is-light .jr-card__meta { color: rgba(5, 7, 10, .5); }
.is-light .jr-card__meta b { color: #0090C8; }
.is-light .jr-chip { background: rgba(5, 7, 10, .05); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(5, 7, 10, .1); }
.is-light .jr-chip:hover { background: rgba(5, 7, 10, .09); }
.is-light .jr-chip.is-on { background: var(--cyan); color: var(--ink); box-shadow: none; }
.jr-hero--pic { display: flex; align-items: flex-end; min-height: 88vh; min-height: 88svh; padding-bottom: clamp(50px, 10vh, 120px); overflow: hidden; }
.jr-hero--pic::before { display: none; }
.jr-hero__bg { position: absolute; inset: 0; }
.jr-hero__bg picture, .jr-hero__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.jr-hero__bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5, 7, 10, .9) 0%, rgba(5, 7, 10, .55) 36%, rgba(5, 7, 10, 0) 62%), linear-gradient(0deg, rgba(5, 7, 10, .55), rgba(5, 7, 10, 0) 30%); }
.jr-read.is-light { margin-top: clamp(40px, 8vh, 90px); background: #fff; }
.jr-read .jr-post__body { margin-top: 0; padding-top: clamp(50px, 9vh, 100px); color: rgba(5, 7, 10, .82); }
.jr-read .jr-post__body h2, .jr-read .jr-post__body blockquote { color: var(--ink); }
.jr-fig { margin: 2.2em -8%; }
.jr-fig picture, .jr-fig img { display: block; width: 100%; }
.jr-fig img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
.jr-fig figcaption { margin-top: 10px; color: rgba(5, 7, 10, .55); font-size: .85rem; line-height: 1.5; }
@media (max-width: 860px) {
  .jr-grid { grid-template-columns: minmax(0, 1fr); }
  .jr-fig { margin: 1.8em 0; }
  .jr-hero__bg picture, .jr-hero__bg img { object-position: 78% 30%; }
  .jr-hero__bg::after { background: linear-gradient(0deg, rgba(5, 7, 10, .92) 0%, rgba(5, 7, 10, .6) 45%, rgba(5, 7, 10, .1) 75%); }
}

/* 66 ─ 2026-11-02 (Dara's 5th note) ─────────────────────────────────────────────────────────────────────────────── */
/* Work page hero: a reel of the work playing behind; "Selected Work." on one line at the left, the lead in two lines */
.whero { position: relative; display: flex; align-items: flex-end; min-height: 92vh; min-height: 92svh; overflow: hidden;
  padding: calc(var(--header-h) + 40px) 0 clamp(48px, 9vh, 110px); }
.whero__media { position: absolute; inset: 0; background: var(--ink); }
.whero__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.whero__media::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5, 7, 10, .92) 0%, rgba(5, 7, 10, .5) 36%, rgba(5, 7, 10, .08) 70%), linear-gradient(90deg, rgba(5, 7, 10, .5), rgba(5, 7, 10, 0) 55%); }
.whero__copy { position: relative; z-index: 1; }
.ahero__title.whero__title { display: block; margin-bottom: clamp(14px, 2.4vh, 24px); white-space: nowrap; }
.whero__title .ab-thin, .whero__title .ab-bold { display: inline; }
.whero__lead { max-width: 38em; margin: 0; color: rgba(255, 255, 255, .9); }
@media (max-width: 560px) { .ahero__title.whero__title { white-space: normal; } }

/* Home What We Do cards: a black fade from the bottom up behind the copy ("it will make this stand out more"); all copy
   white again */
.rad__media::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(5, 7, 10, .94) 0%, rgba(5, 7, 10, .74) 26%, rgba(5, 7, 10, .28) 52%, rgba(5, 7, 10, 0) 70%); }
.rad__t, .rad__lead, .rad__d { text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.rad__card[href$="#motion"] .rad__t, .rad__card[href$="#3d"] .rad__t { color: var(--white); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.rad__card[href$="#motion"] .rad__d, .rad__card[href$="#3d"] .rad__d { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.rad__card[href$="#motion"] .rad__lead, .rad__card[href$="#3d"] .rad__lead { color: #5AD3FF; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }

/* Footer: the page you are on, in blue */
.ftr ul a.is-current { color: var(--cyan); opacity: 1; }

/* Services page cards: no body copy; the whole card opens the service's own page */
.svc2__link { position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.svc2__more { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .svc2:hover .svc2__more { color: var(--cyan); } }

/* Service pages (.claude/svcpages.py) */
.sv-hero { position: relative; padding: calc(var(--header-h) + clamp(40px, 9vh, 110px)) 0 clamp(40px, 7vh, 90px); }
.sv-hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 90vh; pointer-events: none;
  background: radial-gradient(60% 70% at 0% 0%, rgba(0, 175, 239, .16), rgba(0, 175, 239, 0) 70%); }
.sv-hero__head { position: relative; }
.wc-kicker a { color: inherit; }
.sv-lead { max-width: 34em; margin: clamp(16px, 3vh, 28px) 0 0; }
.sv-hero__media { position: relative; margin-top: clamp(28px, 6vh, 64px); }
.sv-hero__frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: var(--navy); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .95); }
.sv-hero__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-hero__mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.sv-hero__mosaic span { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--navy); }
.sv-hero__mosaic picture, .sv-hero__mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-intro.is-light { background: #fff; }
.sv-intro__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 90px); align-items: start; }
.sv-intro .t-lead { margin: 0; color: rgba(5, 7, 10, .78); font-size: clamp(1.1rem, 1.5vw, 1.55rem); line-height: 1.5; }
.sv-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); border-top: 1px solid rgba(255, 255, 255, .1); }
.sv-cap { padding: clamp(22px, 3vw, 36px) 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sv-cap h3 { margin: 0 0 10px; font-size: clamp(1.15rem, 1.5vw, 1.5rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.sv-cap .t-body { margin: 0; color: rgba(255, 255, 255, .76); }
.sv-work__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; }
.sv-work .wcat { display: block; }
.sv-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); margin-top: clamp(16px, 3vh, 30px); }
.sv-case { display: grid; gap: 8px; color: var(--white); }
.sv-case__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: #0B1119; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sv-case__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sv-case:hover .sv-case__media img { transform: scale(1.04); } }
.sv-case b { font-size: 1.1rem; font-weight: 600; }
.sv-case em { color: var(--slate); font-size: .85rem; font-style: normal; }
.sv-how.is-light { background: #F3F5F8; }
.sv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); }
.sv-step { padding-top: 18px; border-top: 2px solid var(--cyan); }
.sv-step h3 { margin: 0 0 10px; color: var(--ink); font-size: clamp(1.2rem, 1.6vw, 1.6rem); font-weight: 600; letter-spacing: -.03em; }
.sv-step .t-body { margin: 0; color: rgba(5, 7, 10, .72); }
@media (max-width: 860px) {
  .sv-intro__grid, .sv-caps, .sv-cases { grid-template-columns: minmax(0, 1fr); }
  .sv-steps, .sv-hero__mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .sv-steps { grid-template-columns: minmax(0, 1fr); } }

.sv-proof { margin: clamp(18px, 3vh, 28px) 0 0; font-size: .98rem; line-height: 1.5; }
.sv-proof a { color: #0077A8; font-weight: 500; }
.sv-proof svg { width: 14px; height: 14px; vertical-align: -2px; }
/* 67 ─ 2026-11-02 (Dara's 6th note) ─────────────────────────────────────────────────────────────────────────────── */
/* Work hero: one even dark tint over the whole reel ("a general block ... enough to make the text show") */
.whero__media::after { background: rgba(5, 7, 10, .52); }
/* About hero: the portrait with both buttons side by side on the LEFT; the small label, the statement headline and the
   body copy on the RIGHT */
.ahero--about2 .ahero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.ahero2__left { display: flex; flex-direction: column; align-items: center; align-self: end; min-width: 0; }
.ahero--about2 .ahero__fig { height: min(60svh, 620px); }
.ahero--about2 .ahero__orb { left: 50%; top: 40%; width: 108%; }   /* centred behind him (Dara, 2026-11-02) */
.ahero2__btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; margin: clamp(10px, 2vh, 20px) 0 clamp(28px, 6vh, 60px); }
.ahero--about2 .ahero__copy { align-self: center; padding-bottom: 0; }
.ahero--about2 .wc-kicker { margin-bottom: clamp(14px, 2.4vh, 22px); }
.ahero2__title { margin-bottom: clamp(18px, 3vh, 30px); }
@media (max-width: 860px) {
  .ahero--about2 .ahero__grid { grid-template-columns: minmax(0, 1fr); }
  .ahero--about2 .ahero__copy { order: -1; }
  .ahero--about2 .ahero__fig { height: auto; width: min(80vw, 380px); }
}

/* 68 ─ 2026-11-03 (Dara): a call to action in every page hero (build.hero_cta); the Work hero is one centred block
   over the reel; the About portrait centred over its buttons ─────────────────────────────────────────────────── */
.hcta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(20px, 3.4vh, 34px);
  animation: hcta-in .9s cubic-bezier(.16, 1, .3, 1) calc(var(--d, .25s) + .35s) both; }
@keyframes hcta-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hcta { animation: none; } }
.hcta--center { justify-content: center; }
.ahero__copy .hcta + .svc2-nav { margin-top: clamp(18px, 3vh, 28px); }
.hcta--story { margin-top: clamp(16px, 2.6vh, 26px); }
.hcta--post { margin-top: clamp(18px, 3vh, 28px); }
.wc-hero__head .hcta, .sv-hero__head .hcta { margin-top: clamp(22px, 3.6vh, 36px); }

/* About: the general .ahero__fig { align-self: end } pushed the portrait to the right edge of its column */
.ahero--about2 .ahero__fig { align-self: center; }

/* Work: the giant title, the copy line under it and the buttons, centred in the middle of the playing reel */
.whero--center { align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--header-h) + 30px) 0 clamp(40px, 8vh, 90px); }
.whero--center .whero__copy { display: flex; flex-direction: column; align-items: center; }
.whero--center .ahero__title.whero__title { font-size: clamp(3.2rem, 10.5vw, 12.5rem); line-height: .9; margin: 0 0 clamp(16px, 3vh, 30px); }
.whero--center .whero__lead { max-width: 36em; margin: 0 auto; }
.whero--center .whero__media::after { background: radial-gradient(ellipse 62% 58% at 50% 50%, rgba(5, 7, 10, .38), rgba(5, 7, 10, 0) 72%), rgba(5, 7, 10, .5); }
@media (max-width: 560px) {
  .whero--center .ahero__title.whero__title { white-space: normal; }
  .whero--center .whero__lead { max-width: 30em; }
}

/* project-page heroes on phones: the button row makes the text block ~70 px taller, so the picture above it gives
   that room back (the reel card / the landscape card) and design decks without a Play badge drop the badge's space */
@media (max-width: 860px) {
  .shero__vcard { height: max(220px, calc(100svh - var(--header-h) - 16px - 380px)); }
  .shero--fit .chero__media { top: calc(var(--header-h) + max(28px, (100svh - var(--header-h) - (100vw - 2 * var(--gutter)) / var(--ar, 1.7778) - 400px) / 2)); }
  .shero--deck:not(:has(.shero__play)) .chero__copy { bottom: clamp(22px, 4vh, 44px); }
}

/* narrow phones (<= 400 px): the button + link stay on one line */
@media (max-width: 400px) {
  .hcta { gap: 12px 18px; }
  .hcta .btn { padding: 0 16px 0 18px; }
}

/* 69 ─ 2026-11-03 (Dara): the Work hero fills the whole screen and plays the Services page's Motion Graphics film; the
   tabs start after it, with space (they sat right on the bottom edge of the film) ───────────────────────────────── */
.whero--full { min-height: 100vh; min-height: 100svh; }
.whero--full .whero__title, .whero--full .whero__lead { text-shadow: 0 2px 22px rgba(5, 7, 10, .7), 0 1px 3px rgba(5, 7, 10, .5); }
.whero--full + .wsec, main > .whero--full ~ .wsec { padding-top: clamp(72px, 11vh, 130px); }

/* dark sections with a picture under them (build.sec_bg): the picture is washed blue, then darkened, and fades into the
   page at the top and bottom so the sections still run into each other */
.has-bg { isolation: isolate; overflow: clip; }
.has-bg::before { display: none; }
.secbg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.secbg__in { position: absolute; inset: 0; overflow: hidden; }
.secbg--fixed .secbg__in { position: sticky; inset: auto; top: 0; height: 100vh; height: 100lvh; }
.secbg picture, .secbg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.secbg__in::before { content: ''; position: absolute; inset: 0; z-index: 1; background: #0A4C8C; mix-blend-mode: color; opacity: .55; }
.secbg__in::after { content: ''; position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse 60% 55% at 88% 12%, rgba(0, 175, 239, .2), rgba(0, 175, 239, 0) 70%),
    linear-gradient(180deg, var(--ink) 0%, rgba(5, 7, 10, .74) 18%, rgba(5, 7, 10, .7) 72%, var(--ink) 100%); }
.sv-hero.has-bg .secbg__in::after { background: radial-gradient(ellipse 60% 55% at 88% 12%, rgba(0, 175, 239, .2), rgba(0, 175, 239, 0) 70%),
    linear-gradient(90deg, rgba(5, 7, 10, .5) 0%, rgba(5, 7, 10, 0) 65%),
    linear-gradient(180deg, rgba(5, 7, 10, .62) 0%, rgba(5, 7, 10, .74) 55%, var(--ink) 100%); }
.whero--full .whero__media::after { background: radial-gradient(ellipse 62% 58% at 50% 50%, rgba(5, 7, 10, .36), rgba(5, 7, 10, 0) 72%), rgba(5, 7, 10, .58); }
/* 70 ─ 2026-11-04 (Dara, round 39) ───────────────────────────────────────────────────────────────────────────────── */
/* About hero: the text column sat too far right ("Felt." ran to 30 px from the edge) — the copy starts ~75 px further
   left and the portrait column gives up the room */
.ahero--about2 .ahero__grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
/* Story pages: The Brief + The Idea side by side over the project's own picture (stories.story_block; copy in
   .claude/story_copy.json); the How We Made It text above its film strip */
.s-story__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 110px); align-items: start; }
.s-beat { display: grid; gap: 18px; align-content: start; }
.s-beat .s-h2 { font-size: clamp(2.6rem, 5.2vw, 5.6rem); }
.s-beat .t-lead { max-width: 40ch; color: rgba(255, 255, 255, .88); }
.s-story.has-bg { padding: clamp(110px, 16vh, 190px) 0; }
.s-story .secbg__in::after { background: radial-gradient(60% 70% at 100% 0%, rgba(0, 175, 239, .16), rgba(0, 175, 239, 0) 70%),
  linear-gradient(180deg, var(--ink) 0%, rgba(5, 7, 10, .8) 22%, rgba(5, 7, 10, .76) 70%, var(--ink) 100%); }
.s-story .secbg img { filter: blur(3px); transform: scale(1.04); }
.s-how__text { max-width: 62ch; margin: 0 0 clamp(34px, 6vh, 64px); font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.6; color: rgba(255, 255, 255, .84); }
@media (max-width: 860px) { .s-story__grid { grid-template-columns: minmax(0, 1fr); } }

/* the white sections: the brand deck's own devices (build.deco_ribbon / deco_field / deco_ticker) */
.has-deco { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.has-deco > .wrap { position: relative; z-index: 1; }
/* The Field: the ring tiled to a texture, drifting slowly, strongest in one corner (one light, one direction) */
.vfield { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='72' viewBox='0 0 132 72'%3E%3Cg fill='none' stroke='%230A1A2F' stroke-opacity='.22' stroke-width='1.1'%3E%3Cellipse cx='66' cy='36' rx='27' ry='10' transform='rotate(-20 66 36)'/%3E%3Cellipse cx='0' cy='0' rx='27' ry='10' transform='rotate(-20 0 0)'/%3E%3Cellipse cx='132' cy='0' rx='27' ry='10' transform='rotate(-20 132 0)'/%3E%3Cellipse cx='0' cy='72' rx='27' ry='10' transform='rotate(-20 0 72)'/%3E%3Cellipse cx='132' cy='72' rx='27' ry='10' transform='rotate(-20 132 72)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 132px 72px repeat;
  -webkit-mask-image: radial-gradient(115% 100% at 100% 0%, #000 0%, rgba(0, 0, 0, .45) 40%, transparent 74%);
          mask-image: radial-gradient(115% 100% at 100% 0%, #000 0%, rgba(0, 0, 0, .45) 40%, transparent 74%);
  animation: vfield-drift 50s linear infinite; }
.vfield--bl { -webkit-mask-image: radial-gradient(115% 100% at 0% 100%, #000 0%, rgba(0, 0, 0, .45) 40%, transparent 74%);
                      mask-image: radial-gradient(115% 100% at 0% 100%, #000 0%, rgba(0, 0, 0, .45) 40%, transparent 74%); }
.vfield--tl { -webkit-mask-image: radial-gradient(90% 90% at 0% 0%, #000 0%, rgba(0, 0, 0, .4) 40%, transparent 72%);
                      mask-image: radial-gradient(90% 90% at 0% 0%, #000 0%, rgba(0, 0, 0, .4) 40%, transparent 72%); }
/* the journal article: only in the margins, so the reading column stays clean */
.vfield--edges { -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .5) 10%, transparent 22%, transparent 78%, rgba(0, 0, 0, .5) 90%, #000 100%);
                         mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .5) 10%, transparent 22%, transparent 78%, rgba(0, 0, 0, .5) 90%, #000 100%); }
@keyframes vfield-drift { to { background-position: 132px 72px; } }
/* The Ticker: nested rings anchored outside the frame, turning slowly; the outer one is the cyan light */
.dticker { position: absolute; z-index: 0; pointer-events: none; width: clamp(460px, 46vw, 820px); right: -15vw; top: -13vw; }
.dticker--br { top: auto; bottom: -15vw; }
.dticker .ticker { position: static; display: block; width: 100%; height: auto; animation: dticker-turn 110s linear infinite; }
.is-light .dticker .ticker ellipse { stroke: rgba(10, 26, 47, .15); stroke-width: 1.1; }
.is-light .dticker .ticker ellipse:first-child { stroke: var(--cyan); stroke-opacity: .8; stroke-width: 1.6; }
@keyframes dticker-turn { to { transform: rotate(360deg); } }
/* a cyan ribbon through the empty part of the section, its words (the section's own services) running along it */
.cribbon--deco { position: absolute; left: 0; right: 0; z-index: 0; height: clamp(170px, 25vw, 360px); margin: 0; }
.cribbon--deco .cribbon__band, .cribbon--deco .cribbon__shade { stroke-width: 60; }
.cribbon--deco .cribbon__shade { stroke-opacity: .2; }
.cribbon--deco .cribbon__text { font-size: 23px; letter-spacing: 1.2px; }
.sv-intro.has-deco { padding-bottom: clamp(190px, 22vw, 330px); }
.sv-intro .cribbon--deco { bottom: clamp(-40px, -2vw, -10px); }
.wc-resp .cribbon--deco { bottom: clamp(-30px, -1vw, 0px); }
.wc-resp .wc-phones { z-index: 1; }
@media (max-width: 860px) {
  .vfield--edges { display: none; }
  .wc-resp.has-deco { padding-bottom: clamp(150px, 40vw, 230px); }
  .dticker { width: 120vw; right: -60vw; top: -40vw; }
  .dticker--br { top: auto; bottom: -50vw; }
}
@media (prefers-reduced-motion: reduce) { .vfield, .dticker .ticker { animation: none; } }
/* Home / Work / Services hero = Dara's Blueprint, UNDR and STRAY references (2026-11-04): ONE full-bleed picture or
   film (build.editorial_hero), the body copy + buttons left, the headline right (as the hero was first designed) and
   nothing else. The orb hero's rules stay for About */
.hero--photo { background: var(--ink); }
.hero--photo::after { height: 22vh; }
.hero--photo .hero__stage { overflow: hidden; }
.hero--photo .hero__stage::after { height: 34vh; background: linear-gradient(180deg, rgba(5,7,10,0) 0%, rgba(5,7,10,.7) 60%, var(--ink) 100%); }
.hero__photo { position: absolute; inset: 0; will-change: transform; }
.hero__photo picture, .hero__photo img, .hero__photo video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__photo::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,7,10,.72) 0%, rgba(5,7,10,.34) 24%, rgba(5,7,10,0) 40%, rgba(5,7,10,0) 58%, rgba(5,7,10,.36) 74%, rgba(5,7,10,.74) 100%),
              linear-gradient(180deg, rgba(5,7,10,.5) 0%, rgba(5,7,10,0) 20%); }
.hero--photo .hero__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.06fr) minmax(0, 1.14fr); padding-bottom: clamp(24px, 6vh, 64px); }
.hero--photo .hero__left { max-width: 372px; padding-top: 8vh; }
.hero--photo .hero__sub { color: rgba(255,255,255,.86); text-shadow: 0 2px 18px rgba(5,7,10,.65); }
.hero--photo .hero__right { justify-self: end; margin: 0; padding-top: 4vh; text-align: right; }
.hero--photo .hero__title { font-size: clamp(2.6rem, min(4.6vw, 8.4vh), 6rem); text-shadow: 0 6px 34px rgba(5,7,10,.55); }
.hero__title .c { color: var(--cyan); }
/* Work + Services: a two-word headline, so it can be big (STRAY's one huge word) */
.hero--short .hero__title { font-size: clamp(3rem, min(7.2vw, 14vh), 8.4rem); }
/* Work: the film keeps playing underneath, washed into the brand's blue like the section pictures (.secbg) */
.hero--film .hero__photo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: #0A4C8C; mix-blend-mode: color; opacity: .78; pointer-events: none; }
.hero--film .hero__photo::after { z-index: 2; background: linear-gradient(90deg, rgba(5,7,10,.84) 0%, rgba(5,7,10,.5) 30%, rgba(5,7,10,.34) 50%, rgba(5,7,10,.5) 70%, rgba(5,7,10,.84) 100%),
  linear-gradient(180deg, rgba(5,7,10,.55) 0%, rgba(5,7,10,0) 22%); }
@media (max-width: 1100px) {
  .hero--photo .hero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, .8fr) minmax(0, 1.1fr); }
  .hero--photo .hero__left { max-width: 260px; align-self: end; padding: 0 0 2vh; }
  .hero--short .hero__right { align-self: start; padding-top: 15vh; }   /* clear of the camera / the film's middle */
}
@media (max-width: 860px) {
  .hero--photo { justify-content: flex-end; }
  .hero--photo .hero__stage { position: absolute; inset: 0; height: auto; }
  .hero__photo img { object-position: 50% 12%; }
  .hero__photo::after { background: linear-gradient(180deg, rgba(5,7,10,.35) 0%, rgba(5,7,10,0) 22%, rgba(5,7,10,0) 36%, rgba(5,7,10,.78) 64%, var(--ink) 100%); }
  .hero--film .hero__photo::after { background: linear-gradient(180deg, rgba(5,7,10,.5) 0%, rgba(5,7,10,.25) 30%, rgba(5,7,10,.7) 60%, var(--ink) 100%); }
  .hero--photo .hero__stage::after { display: none; }
  .hero--photo .hero__grid { display: flex; flex-direction: column; align-items: stretch; margin: 0; padding-top: 0; padding-bottom: clamp(26px, 5svh, 44px); }
  .hero--photo .hero__right { order: 1; align-self: auto; justify-self: auto; padding: 0; text-align: left; }
  .hero--photo .hero__left { order: 2; align-self: auto; max-width: 34rem; margin: 14px 0 0; padding: 0; text-align: left; }
  .hero--photo .hero__title { font-size: clamp(2.2rem, 9.6vw, 3.8rem); }
  .hero--short .hero__title { font-size: clamp(3rem, 15vw, 5.6rem); }
  .hero--photo .hero__btns { margin-top: 18px; justify-content: flex-start; }
}
/* fixes after the first look: the Ticker keeps to the corner (it crossed "Deliver"); a website screen under The
   Challenge is blurred to colour so its own words never show through the copy; the ribbon clears the section edge */
.sv-how .dticker--br { width: clamp(420px, 40vw, 700px); right: -19vw; bottom: -21vw; }
.wc-over .secbg img { filter: blur(22px) saturate(1.1); transform: scale(1.12); }
.wc-over .secbg__in::after { background: radial-gradient(60% 70% at 100% 0%, rgba(0, 175, 239, .14), rgba(0, 175, 239, 0) 70%),
  linear-gradient(180deg, var(--ink) 0%, rgba(5, 7, 10, .8) 18%, rgba(5, 7, 10, .78) 75%, var(--ink) 100%); }
.wc-resp .cribbon--deco { bottom: clamp(0px, 1.6vw, 26px); }
/* 2026-11-04 (Dara, second note): the ribbons sit higher, clear of the section's bottom edge, and the ring texture
   shows round and under them as well (the Field gets a second light at the opposite corner) */
.sv-intro .cribbon--deco { bottom: clamp(40px, 7.4vw, 124px); }
.sv-intro.has-deco { padding-bottom: clamp(240px, 27vw, 400px); }
.wc-resp .cribbon--deco { bottom: clamp(40px, 6.4vw, 108px); }
.sv-intro .vfield, .wc-resp .vfield {
  -webkit-mask-image: radial-gradient(115% 100% at 100% 0%, #000 0%, rgba(0, 0, 0, .45) 40%, transparent 74%), radial-gradient(80% 70% at 0% 100%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 80%);
          mask-image: radial-gradient(115% 100% at 100% 0%, #000 0%, rgba(0, 0, 0, .45) 40%, transparent 74%), radial-gradient(80% 70% at 0% 100%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 80%); }
.wc-resp .vfield--tl {
  -webkit-mask-image: radial-gradient(90% 90% at 0% 0%, #000 0%, rgba(0, 0, 0, .4) 40%, transparent 72%), radial-gradient(80% 70% at 100% 100%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 80%);
          mask-image: radial-gradient(90% 90% at 0% 0%, #000 0%, rgba(0, 0, 0, .4) 40%, transparent 72%), radial-gradient(80% 70% at 100% 100%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 80%); }
@media (max-width: 860px) {
  .sv-intro .cribbon--deco { bottom: clamp(20px, 8vw, 60px); }
  .sv-intro.has-deco { padding-bottom: clamp(200px, 48vw, 290px); }
  .wc-resp .cribbon--deco { bottom: clamp(20px, 8vw, 60px); }
  .wc-resp.has-deco { padding-bottom: clamp(190px, 50vw, 280px); }
}

/* 71 ─ interactive 3D jets (js/jet3d.js) ───────────────────────── */
.jet3d { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; color: var(--white);
  background: radial-gradient(120% 95% at 50% 36%, var(--navy-hi) 0%, var(--navy) 46%, var(--ink) 100%); }
.jet3d__poster, .jet3d > picture, .jet3d > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .7s var(--ease-out); }
.jet3d.is-live .jet3d__poster, .jet3d.is-live > picture { opacity: 0; pointer-events: none; }
.jet3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; cursor: grab; z-index: 1; }
.jet3d__canvas:active { cursor: grabbing; }
.jet3d:not(.is-live) .jet3d__canvas { opacity: 0; }
.jet3d__canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--cyan); }

.jet3d__go { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 30px 0 26px; border: 0; border-radius: 0;
  background: var(--cyan); color: var(--ink); font: 600 .98rem/1 var(--font); letter-spacing: -.01em; cursor: pointer;
  box-shadow: 0 18px 50px -18px rgba(0, 175, 239, .75); transition: background var(--t), transform .5s var(--ease-out), opacity .4s; }
.jet3d__go:hover { background: var(--white); transform: translate(-50%, -50%) translateY(-2px); }
.jet3d__go:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.jet3d__go-i { width: 22px; height: 22px; flex: none; }
.jet3d.is-loading .jet3d__go, .jet3d.is-live .jet3d__go { opacity: 0; pointer-events: none; }
.jet3d__go:disabled { opacity: .35; cursor: default; }

.jet3d__bar { position: absolute; left: 50%; top: 50%; z-index: 3; width: min(360px, 72%); transform: translate(-50%, -50%);
  text-align: center; font-size: var(--fs-small); color: rgba(255, 255, 255, .86); }
.jet3d__bar::before { content: ''; display: block; height: 2px; background: rgba(255, 255, 255, .16); }
.jet3d__bar i { display: block; height: 2px; margin: -2px 0 14px; background: var(--cyan); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .25s linear; }
.jet3d__bar.is-error::before, .jet3d__bar.is-error i { display: none; }

.jet3d__ui { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: flex; pointer-events: none; }
.jet3d__views, .jet3d__tools { display: flex; gap: 6px; pointer-events: auto; }
.jet3d__tools { position: absolute; top: 14px; right: 16px; z-index: 2; }
.jet3d__view, .jet3d__tool { height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 0; cursor: pointer;
  background: rgba(5, 7, 10, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--white); font: 500 var(--fs-small)/1 var(--font); letter-spacing: .01em; white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t); }
.jet3d__view:hover, .jet3d__tool:hover { border-color: rgba(255, 255, 255, .55); }
.jet3d__view[aria-pressed="true"] { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }
.jet3d__view:focus-visible, .jet3d__tool:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.jet3d__hint { position: absolute; left: 16px; top: 22px; z-index: 2; margin: 0; max-width: calc(100% - 280px); pointer-events: none;
  font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); transition: opacity .6s; }
.jet3d__hint.is-used { opacity: 0; }
.jet3d:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; }

@media (max-width: 860px) {
  .jet3d { aspect-ratio: 4 / 5; }
  .jet3d__ui { left: 10px; right: 10px; bottom: 10px; }
  .jet3d__views { flex: 1; overflow-x: auto; scrollbar-width: none; }
  .jet3d__views::-webkit-scrollbar { display: none; }
  .jet3d__view { flex: 1 0 auto; height: 40px; padding: 0 12px; }
  .jet3d__tools { top: 10px; right: 10px; }
  .jet3d__tool { height: 36px; padding: 0 12px; }
  .jet3d__hint { left: 10px; top: auto; bottom: 60px; max-width: calc(100% - 20px); }
}

/* 72 ─ the jet story page: viewer note + floor plan (stories.py jet_block / plan_block, 2026-11-05) ─────────── */
.s-jet__note { margin: 16px 0 0; max-width: 60ch; font-size: var(--fs-small); color: rgba(255, 255, 255, .62); }
.plan__scroll { margin: 0 calc(var(--gutter, 0px) * -1); padding: 0 var(--gutter, 0px); }
.plan { position: relative; margin: 0; padding-bottom: 5.2em; }
.plan > picture, .plan > picture img, .plan > img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); }
.plan__zones { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: var(--ar); margin: 0; padding: 0; list-style: none; pointer-events: none; }
.plan__z { position: absolute; left: var(--x0); width: var(--zw); top: var(--y0); height: var(--yh); pointer-events: auto; outline: none; }
.plan__z::before { content: ''; position: absolute; inset: 0; background: rgba(0, 175, 239, .2); box-shadow: inset 0 0 0 1px var(--cyan);
  opacity: 0; transition: opacity var(--t); }
.plan__z:hover::before, .plan__z:focus-visible::before { opacity: 1; }
.plan__l { position: absolute; left: 0; right: 3px; top: calc(var(--lt) + 18px); padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .28);
  font-size: var(--fs-micro); line-height: 1.35; letter-spacing: .02em; color: rgba(255, 255, 255, .8); transition: color var(--t), border-color var(--t); }
.plan__l b { display: block; margin-bottom: 3px; font-weight: 600; color: var(--cyan); letter-spacing: .08em; }
.plan__z:hover .plan__l, .plan__z:focus-visible .plan__l { color: var(--white); border-color: var(--cyan); }
.jet3d__go { white-space: nowrap; }
@media (max-width: 860px) {
  /* the poster keeps its own shape (the whole jet); the box takes the viewer's 4:5 only once Explore in 3D is pressed */
  .jet3d:not(.is-loading):not(.is-live) { aspect-ratio: 16 / 10; }
  .jet3d__go { height: 50px; padding: 0 22px 0 18px; font-size: .92rem; }
  .plan__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .plan { width: 1000px; }
}


/* 73 ─ 2026-11-05 (Dara): flipped editorial hero + service cards ─────────────────────────────────────────────── */
/* Work / Services / Journal / Contact: the headline LEFT, the body copy + the two buttons side by side RIGHT */
@media (min-width: 861px) {
  .hero--flip .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(370px, .82fr); }
  .hero--flip .hero__right { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; text-align: left; }
  .hero--flip .hero__gap { grid-column: 2; grid-row: 1; }
  .hero--flip .hero__left { grid-column: 3; grid-row: 1; justify-self: end; max-width: 400px; padding-top: 4vh; }
  /* the portraits sit a little left of centre so the copy on the right clears the subject */
  .hero--flip:not(.hero--film) .hero__photo img { object-position: 100% 30%; }
  .hero--flip .hero__btns { flex-wrap: nowrap; justify-content: flex-start; }
  .hero--flip.hero--film .hero__photo::after { background: linear-gradient(90deg, rgba(5,7,10,.84) 0%, rgba(5,7,10,.5) 30%, rgba(5,7,10,.34) 50%, rgba(5,7,10,.5) 70%, rgba(5,7,10,.84) 100%),
    linear-gradient(180deg, rgba(5,7,10,.4) 0%, rgba(5,7,10,0) 30%); }
}
@media (min-width: 861px) and (max-width: 1100px) {
  /* tablets: the subject fills the middle, so the headline and the copy both sit along the bottom, over the dark fade */
  .hero--flip .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .2fr) minmax(340px, 1fr); }
  .hero--flip .hero__right, .hero--flip.hero--short .hero__right { align-self: end; padding: 0 0 1vh; }
  .hero--flip .hero__left { max-width: 380px; align-self: end; padding: 0 0 1vh; }
  .hero--flip .hero__photo::after { background: linear-gradient(180deg, rgba(5,7,10,.3) 0%, rgba(5,7,10,0) 22%, rgba(5,7,10,0) 48%, rgba(5,7,10,.82) 76%, var(--ink) 100%); }
  .hero--flip.hero--short .hero__title { font-size: clamp(3rem, 8.4vw, 6rem); }
}
.hero--ctc .hero__title { font-size: clamp(2.6rem, min(4.6vw, 8.4vh), 6rem); }
@media (min-width: 861px) { .hero--flip.hero--ctc .hero__photo img { object-position: 74% 30%; } }   /* his raised hand clear of the headline */
.cbadge--hero { position: absolute; z-index: 5; right: var(--gutter); top: calc(var(--header-h) + 3vh); width: clamp(120px, 10vw, 168px); }
@media (max-width: 860px) {
  .cbadge--hero { top: calc(var(--header-h) + 8px); width: 104px; }
}

/* Services cards: the pictures + the Explore button sit right under the chips (they were pinned to the card's foot,
   where the next card covered them), and the button is a solid pill */
.svc2__foot { margin-top: clamp(4px, 1vh, 12px); flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.svc2 .svc2__more { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .svc2:hover .svc2__more { color: var(--ink); background: var(--white); } }

/* Talents hero = the Home to Pro group photo (Hilda in the middle): copy along the bottom, over the table, clear of faces */
.hero--flip.hero--tal .hero__photo img { object-position: 50% 24%; }
@media (min-width: 861px) {
  .hero--tal .hero__right, .hero--tal .hero__left { align-self: end; padding: 0 0 1vh; }
  .hero--tal .hero__photo::after { background: linear-gradient(180deg, rgba(5,7,10,.35) 0%, rgba(5,7,10,0) 20%, rgba(5,7,10,0) 46%, rgba(5,7,10,.8) 74%, var(--ink) 100%); }
}