/* Veld — the studio's own site. One stylesheet, two widths.
 *
 * Structure and pacing are taken from framer.com: a floating translucent pill for
 * navigation, a two-line headline over a product frame, a bento of work, a logo
 * marquee, feature blocks that alternate text and panels, one big statement, a
 * glowing call to action and a deep footer. The identity underneath is Veld's:
 * Ink ground, Coal surfaces, Vermilion as the only signal, Figtree at every size.
 *
 * Motion follows the Apple rules we hold the product to. Feedback lands on
 * pointer-down, not release. Entrances start from where the element already is
 * (14 px below, at rest) and decelerate; nothing bounces unless the user threw it.
 * Only transform and opacity animate. Reduced motion collapses every entrance to a
 * cross-fade.
 *
 * Tracking is size-specific — never one value: display text is set at -.045em,
 * headings at -.03em, body at 0, labels at +.08em. Leading runs the other way. */

:root{
  --ink:#121212; --coal:#1A1A1A; --coal-2:#222222; --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16); --field:#E7E7E7; --orange:#FF2A00; --orange-2:#FF4A24;
  --t1:#FFFFFF; --t2:rgba(255,255,255,.62); --t3:rgba(255,255,255,.40);
  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:28px;
  --pad:22px; --wrap:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);      /* decelerate — the default for entrances */
  --ease-io:cubic-bezier(.65,0,.35,1);     /* symmetric — for reversible state changes */
  --nav-h:56px;
}
@media (min-width:900px){ :root{ --pad:40px } }

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{ background:var(--ink); color:var(--t1); font-family:Figtree,system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums; overflow-x:hidden }
img,svg,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
::selection{ background:var(--orange); color:#fff }

/* ── type ────────────────────────────────────────────────────────────────── */
.display{ font-size:clamp(42px,7.4vw,92px); line-height:.98; letter-spacing:-.045em; font-weight:600 }
.display .dim{ color:var(--t3) }
.h2{ font-size:clamp(32px,4.6vw,58px); line-height:1.02; letter-spacing:-.035em; font-weight:600 }
.h3{ font-size:clamp(21px,2.3vw,28px); line-height:1.15; letter-spacing:-.02em; font-weight:600 }
.lead{ font-size:clamp(17px,1.45vw,20px); line-height:1.5; color:var(--t2); letter-spacing:-.005em }
.small{ font-size:14px; line-height:1.5; color:var(--t2) }
.label{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--t3) }
.label.o{ color:var(--orange) }
.mono{ font-family:ui-monospace,Menlo,monospace; font-size:12px; letter-spacing:.02em }

/* ── layout ──────────────────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad) }
.sec{ padding:72px 0 }
@media (min-width:900px){ .sec{ padding:120px 0 } }
.sec-head{ max-width:760px; margin-bottom:40px }
.sec-head .label{ margin-bottom:18px }
.sec-head .lead{ margin-top:18px; max-width:56ch }
@media (min-width:900px){ .sec-head{ margin-bottom:56px } }
.grid{ display:grid; gap:14px }
.cols-2{ grid-template-columns:1fr }
.cols-3{ grid-template-columns:1fr }
.cols-4{ grid-template-columns:1fr 1fr }
@media (min-width:720px){ .cols-2{ grid-template-columns:1fr 1fr } .cols-3{ grid-template-columns:repeat(3,1fr) } .cols-4{ grid-template-columns:repeat(4,1fr) } }
/* eight cards: two rows of four, not three rows with a hole */
@media (min-width:1000px){ .cols-3.eight{ grid-template-columns:repeat(4,1fr) } }
.rule{ height:1px; background:var(--line) }

/* ── navigation — the floating material ─────────────────────────────────── */
.nav{ position:fixed; top:14px; left:0; right:0; z-index:50; display:flex; justify-content:center;
  padding:0 var(--pad); pointer-events:none }
.nav .pill{ pointer-events:auto; display:flex; align-items:center; gap:6px;
  height:var(--nav-h); padding:0 8px 0 16px; border-radius:999px;
  background:rgba(18,18,18,.55); border:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 10px 30px rgba(0,0,0,.35);
  transition:background .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
  width:100%; max-width:var(--wrap) }
/* materialises as content scrolls under it: heavier, tighter, a deeper shadow */
.is-scrolled .nav .pill{ background:rgba(18,18,18,.78);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 16px 44px rgba(0,0,0,.5) }
@media (min-width:900px){ .nav .pill{ width:auto; min-width:640px } }
.nav .brand{ display:flex; align-items:center; gap:10px; margin-right:auto }
.nav .brand img{ height:20px; width:auto }
.nav .links{ display:none; gap:2px; margin-right:6px }
.nav .links a{ padding:8px 12px; border-radius:999px; font-size:14px; font-weight:500; color:var(--t2);
  transition:color .25s var(--ease), background .25s var(--ease) }
.nav .links a:hover,.nav .links a.on{ color:var(--t1); background:rgba(255,255,255,.07) }
@media (min-width:900px){ .nav .links{ display:flex } }
/* The menu button is the mark, not a hamburger: a vermilion disc holding three of
   the V's segments, stacked on the system's 17° lean. At rest the segments breathe
   one after another and a faint ring leaves the disc every 2.8 s — the button is
   alive without asking for attention. Open, the three broken segments swing into
   one unbroken stroke, which is the mark's own story. */
.nav .menu{ position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:999px; border:0;
  cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent;
  background:radial-gradient(circle at 35% 30%, #FF6A3D 0%, var(--orange) 55%, #E02400 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px -4px rgba(255,42,0,.55);
  transition:transform .12s ease-out }
.nav .menu:active{ transform:scale(.93) }
.nav .menu::before{ content:""; position:absolute; inset:0; border-radius:999px; border:1.5px solid var(--orange);
  opacity:0; animation:menuring 2.8s cubic-bezier(.22,.61,.36,1) infinite; pointer-events:none }
@keyframes menuring{ 0%{ transform:scale(1); opacity:.7 } 70%,100%{ transform:scale(1.55); opacity:0 } }
.nav .menu i{ position:absolute; left:50%; top:50%; width:13px; height:3px; margin:-1.5px 0 0 -6.5px; border-radius:1px; background:#fff;
  transform:translateY(var(--y)) skewX(17deg); transition:transform .45s var(--ease), opacity .3s var(--ease);
  animation:menubreath 2.8s ease-in-out infinite; animation-delay:var(--d) }
.nav .menu i:nth-child(1){ --y:-6px; --d:0s } .nav .menu i:nth-child(2){ --y:0px; --d:.18s } .nav .menu i:nth-child(3){ --y:6px; --d:.36s }
@keyframes menubreath{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
@media (min-width:900px){ .nav .menu{ display:none } }
@media (prefers-reduced-motion:reduce){ .nav .menu::before,.nav .menu i{ animation:none } }

/* ── buttons — feedback on press, not release ────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px;
  border-radius:999px; border:1px solid transparent; font-size:15px; font-weight:600; letter-spacing:-.01em;
  cursor:pointer; white-space:nowrap; transition:transform .1s ease-out, background .25s var(--ease),
  border-color .25s var(--ease), color .25s var(--ease) }
.btn:active{ transform:scale(.97) }
.btn.primary{ background:var(--orange); color:#fff }
.btn.primary:hover{ background:var(--orange-2) }
.btn.ghost{ background:rgba(255,255,255,.06); border-color:var(--line-2); color:var(--t1) }
.btn.ghost:hover{ background:rgba(255,255,255,.11) }
.btn.white{ background:#fff; color:var(--ink) }
.btn.white:hover{ background:var(--field) }
.btn.sm{ height:36px; padding:0 14px; font-size:14px }
.btn.lg{ height:52px; padding:0 26px; font-size:16px }
.btn .arr{ display:inline-block; transition:transform .3s var(--ease) }
.btn:hover .arr{ transform:translateX(3px) }
.btn.on-nav{ height:40px; padding:0 16px; font-size:14px }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{ position:relative; padding:calc(var(--nav-h) + 84px) 0 0; overflow:hidden }
@media (min-width:900px){ .hero{ padding-top:calc(var(--nav-h) + 128px) } }
.hero .wrap{ position:relative; text-align:center }
.hero .label{ margin-bottom:22px }
.hero .display{ max-width:22ch; margin:0 auto }
.hero .lead{ max-width:52ch; margin:24px auto 0 }
.hero .ctas{ display:flex; gap:10px; justify-content:center; margin-top:34px; flex-wrap:wrap }
/* the glow: one vermilion light behind the product, drifting slowly. Blur is on a
   pseudo layer of its own so the frame above it stays crisp. */
.glow{ position:absolute; left:50%; top:52%; width:min(900px,120vw); aspect-ratio:1.6; pointer-events:none;
  transform:translate(-50%,-30%); background:radial-gradient(closest-side, rgba(255,42,0,.55), rgba(255,42,0,0) 70%);
  filter:blur(40px); opacity:.85; animation:drift 14s var(--ease-io) infinite alternate }
@keyframes drift{ from{ transform:translate(-54%,-30%) scale(.96) } to{ transform:translate(-46%,-26%) scale(1.06) } }

/* the product frame — a window, not a screenshot */
.frame{ position:relative; margin:56px auto 0; width:100%; max-width:1040px; border-radius:var(--r-l);
  background:var(--coal); border:1px solid var(--line-2); overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 30px 80px -20px rgba(0,0,0,.7), 0 60px 140px -40px rgba(255,42,0,.25) }
.frame .bar{ display:flex; align-items:center; gap:6px; height:38px; padding:0 14px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02) }
.frame .bar i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.14) }
.frame .bar span{ margin-left:auto; margin-right:auto; font-size:11.5px; color:var(--t3);
  padding:4px 12px; border-radius:6px; background:rgba(255,255,255,.05) }
.frame img{ width:100% }
@media (min-width:900px){ .frame{ margin-top:72px } }

/* ── logo marquee ────────────────────────────────────────────────────────── */
.marquee{ position:relative; overflow:hidden; padding:26px 0 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) }
.marquee .track{ display:flex; gap:56px; width:max-content; animation:slide 36s linear infinite }
.marquee .track span{ font-size:17px; font-weight:700; letter-spacing:-.02em; color:var(--t3); white-space:nowrap }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ── cards & bento ───────────────────────────────────────────────────────── */
.card{ position:relative; border-radius:var(--r-l); background:var(--coal); border:1px solid var(--line); overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s var(--ease) }
.card:hover{ transform:translateY(-3px); border-color:var(--line-2) }
.card .media{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--coal-2) }
.card .media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.card:hover .media img{ transform:scale(1.035) }
.card .body{ padding:18px 20px 20px; display:flex; justify-content:space-between; align-items:flex-start; gap:14px }
.card .body > div:first-child{ min-width:0 }
/* in a four-up grid the card is 260 px wide: chips go under the text, not beside it */
.cols-3 .card .body{ flex-direction:column; gap:12px }
.card .body b{ display:block; font-size:16px; font-weight:600; letter-spacing:-.01em }
.card .body span{ display:block; margin-top:3px; font-size:13.5px; color:var(--t3) }
.card .tagr{ display:flex; gap:6px; flex:none; padding-top:2px }
.chip{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:var(--t2) }
.chip.o{ background:var(--orange); border-color:var(--orange) }

.bento{ display:grid; gap:14px; grid-template-columns:1fr }
@media (min-width:720px){
  .bento{ grid-template-columns:repeat(6,1fr) }
  .bento .c4{ grid-column:span 4 } .bento .c2{ grid-column:span 2 } .bento .c3{ grid-column:span 3 }
  .bento .c4 .media{ aspect-ratio:16/9.6 } .bento .c2 .media{ aspect-ratio:4/4.8 } .bento .c3 .media{ aspect-ratio:16/10 }
}

/* ── feature block: text + panel ─────────────────────────────────────────── */
.feat{ display:grid; gap:36px; align-items:center }
@media (min-width:900px){ .feat{ grid-template-columns:5fr 7fr; gap:64px } .feat.flip{ grid-template-columns:7fr 5fr } .feat.flip .txt{ order:2 } }
.feat .txt .label{ margin-bottom:16px }
/* a heading beside a panel has half the width of one above a section; it takes a
   smaller top size so a three-word line does not break into three lines */
.feat .txt .h2{ margin-bottom:18px; font-size:clamp(30px,3.8vw,48px) }
.feat .txt .lead{ max-width:44ch }
.panel{ position:relative; border-radius:var(--r-l); background:var(--coal); border:1px solid var(--line); overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7) }
.panel img{ width:100% }

/* tabs — the three services, auto-cycling */
.tabs{ display:flex; flex-direction:column; gap:4px; margin-top:26px }
.tab{ display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:start; padding:14px 16px; border-radius:var(--r-m);
  border:1px solid transparent; cursor:pointer; text-align:left; background:transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease) }
.tab.on{ background:rgba(255,255,255,.05); border-color:var(--line) }
.tab .n{ font-family:ui-monospace,Menlo,monospace; font-size:11px; color:var(--orange); padding-top:4px }
.tab b{ display:block; font-size:16px; font-weight:600; letter-spacing:-.01em }
/* `> div > span`, not `span`: the bare selector also caught the index number and
   collapsed it to nothing — three tabs, no 01 / 02 / 03 */
.tab > div > span{ display:block; font-size:14px; color:var(--t3); margin-top:3px; max-height:0; overflow:hidden; opacity:0;
  transition:max-height .5s var(--ease), opacity .4s var(--ease) }
.tab.on > div > span{ max-height:80px; opacity:1 }
.tab .bar{ grid-column:1 / -1; height:2px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; margin-top:6px }
.tab .bar i{ display:block; height:100%; width:0; background:var(--orange) }
.tab.on .bar i{ animation:fill 4.5s linear forwards }
@keyframes fill{ to{ width:100% } }
.panel .shot{ position:absolute; inset:0; opacity:0; transform:scale(1.02); transition:opacity .6s var(--ease), transform .8s var(--ease) }
.panel .shot.on{ opacity:1; transform:none }
.panel .shot img{ width:100%; height:100%; object-fit:cover; object-position:top }

/* ── statement ───────────────────────────────────────────────────────────── */
.statement{ text-align:center }
.statement .h2{ max-width:20ch; margin:0 auto; font-size:clamp(30px,5.4vw,68px) }
.statement .h2 em{ font-style:normal; color:var(--orange) }

/* ── numbers ─────────────────────────────────────────────────────────────── */
.stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (min-width:720px){ .stats{ grid-template-columns:repeat(4,1fr) } }
.stat{ padding:26px 22px 24px; border-radius:var(--r-l); background:var(--coal); border:1px solid var(--line) }
.stat .n{ font-size:clamp(38px,4.4vw,56px); font-weight:600; letter-spacing:-.04em; line-height:1 }
.stat .n small{ font-size:.5em; color:var(--orange); margin-left:2px; letter-spacing:0 }
.stat p{ margin-top:10px; font-size:13.5px; color:var(--t3) }

/* ── steps ───────────────────────────────────────────────────────────────── */
.steps{ display:grid; gap:0; border-top:1px solid var(--line) }
.step{ display:grid; grid-template-columns:64px 1fr; gap:16px; padding:26px 0; border-bottom:1px solid var(--line) }
@media (min-width:900px){ .step{ grid-template-columns:120px 1fr 1fr; gap:40px; padding:34px 0 } }
.step .n{ font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--orange); padding-top:6px }
.step b{ font-size:clamp(20px,2.2vw,26px); font-weight:600; letter-spacing:-.02em }
.step p{ color:var(--t2); font-size:15px; max-width:46ch }
@media (max-width:899px){ .step p{ grid-column:2 } }

/* ── quote ───────────────────────────────────────────────────────────────── */
.quote{ position:relative; padding:40px 26px; border-radius:var(--r-xl); background:var(--coal); border:1px solid var(--line);
  text-align:center; overflow:hidden }
@media (min-width:900px){ .quote{ padding:72px 80px } }
.quote p{ font-size:clamp(20px,2.6vw,32px); line-height:1.25; letter-spacing:-.025em; font-weight:500; max-width:32ch; margin:0 auto }
.quote .who{ margin-top:26px; display:flex; align-items:center; justify-content:center; gap:12px; font-size:14px; color:var(--t3) }
.quote .who i{ width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--orange),#7a1400) }
.quote .who b{ color:var(--t1); font-weight:600 }

/* ── call to action ──────────────────────────────────────────────────────── */
.cta{ position:relative; text-align:center; padding:96px 0 120px; overflow:hidden }
@media (min-width:900px){ .cta{ padding:160px 0 180px } }
.cta .mark{ width:72px; margin:0 auto 34px; position:relative; z-index:1 }
.cta .h2{ position:relative; z-index:1; font-size:clamp(36px,6vw,76px) }
.cta .ctas{ position:relative; z-index:1; display:flex; justify-content:center; gap:10px; margin-top:34px; flex-wrap:wrap }
.cta .glow{ top:40%; transform:translate(-50%,-50%); opacity:.7; animation-duration:18s }

/* ── page header (inner pages) ───────────────────────────────────────────── */
.page-head{ padding:calc(var(--nav-h) + 84px) 0 48px }
@media (min-width:900px){ .page-head{ padding:calc(var(--nav-h) + 120px) 0 64px } }
.page-head .label{ margin-bottom:18px }
.page-head .display{ font-size:clamp(40px,6.4vw,80px); max-width:16ch }
.page-head .lead{ margin-top:22px; max-width:56ch }

/* ── filters ─────────────────────────────────────────────────────────────── */
.filters{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:26px }
.filters button{ height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:transparent;
  font-size:14px; font-weight:500; color:var(--t2); cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), transform .1s ease-out }
.filters button:active{ transform:scale(.97) }
.filters button.on{ background:#fff; color:var(--ink); border-color:#fff }

/* ── forms ───────────────────────────────────────────────────────────────── */
.form{ display:grid; gap:14px }
.form .row{ display:grid; gap:14px; grid-template-columns:1fr }
@media (min-width:720px){ .form .row{ grid-template-columns:1fr 1fr } }
.field{ display:grid; gap:7px }
.field label{ font-size:13px; font-weight:600; color:var(--t2) }
.field input,.field select,.field textarea{ height:48px; padding:0 14px; border-radius:var(--r-s); background:rgba(255,255,255,.04);
  border:1px solid var(--line-2); outline:0; transition:border-color .25s var(--ease), background .25s var(--ease),
  box-shadow .25s var(--ease); -webkit-appearance:none; appearance:none }
.field textarea{ height:auto; min-height:140px; padding:12px 14px; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:#fff; background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(255,255,255,.08) }
.field.err input,.field.err textarea{ border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,42,0,.16) }
.field .msg{ font-size:12.5px; color:var(--orange); min-height:0; max-height:0; overflow:hidden; opacity:0;
  transition:max-height .3s var(--ease), opacity .3s var(--ease) }
.field.err .msg{ max-height:30px; opacity:1 }
.field select{ background-image:linear-gradient(45deg,transparent 50%,var(--t3) 50%),linear-gradient(135deg,var(--t3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size:5px 5px; background-repeat:no-repeat }
.form .foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:6px }
.form .foot .small{ max-width:38ch }
.form .done{ display:none; padding:40px 28px; border-radius:var(--r-l); background:var(--coal); border:1px solid var(--line); text-align:center }
.form.sent .done{ display:block } .form.sent > :not(.done){ display:none }
.form .done .h3{ margin-bottom:8px }

/* ── accordion ───────────────────────────────────────────────────────────── */
.acc{ border-top:1px solid var(--line) }
.acc .q{ border-bottom:1px solid var(--line) }
.acc .q button{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; background:none; border:0;
  text-align:left; font-size:17px; font-weight:600; letter-spacing:-.01em; cursor:pointer }
.acc .q button i{ position:relative; width:22px; height:22px; flex:none; border-radius:50%; border:1px solid var(--line-2);
  transition:transform .4s var(--ease), background .3s var(--ease), border-color .3s var(--ease) }
.acc .q button i::before,.acc .q button i::after{ content:""; position:absolute; left:50%; top:50%; width:9px; height:1.5px; background:#fff;
  transform:translate(-50%,-50%) }
.acc .q button i::after{ transform:translate(-50%,-50%) rotate(90deg); transition:transform .4s var(--ease) }
.acc .q.on button i{ transform:rotate(180deg); background:#fff; border-color:#fff }
.acc .q.on button i::before,.acc .q.on button i::after{ background:var(--ink) }
.acc .q.on button i::after{ transform:translate(-50%,-50%) rotate(0deg) }
.acc .a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease) }
.acc .q.on .a{ max-height:240px }
.acc .a p{ padding:0 0 22px; color:var(--t2); max-width:60ch; font-size:15px }

/* ── people / principles ─────────────────────────────────────────────────── */
.person{ padding:22px; border-radius:var(--r-l); background:var(--coal); border:1px solid var(--line) }
.person .ava{ width:56px; height:56px; border-radius:50%; background:var(--coal-2); border:1px solid var(--line-2); display:grid; place-items:center;
  margin-bottom:18px; overflow:hidden }
.person .ava img{ width:22px }
.person b{ display:block; font-size:16px; font-weight:600 }
.person span{ display:block; font-size:13.5px; color:var(--t3); margin-top:2px }
.person p{ margin-top:12px; font-size:14px; color:var(--t2) }
.principle{ padding:26px 24px; border-radius:var(--r-l); background:var(--coal); border:1px solid var(--line) }
.principle .n{ font-family:ui-monospace,Menlo,monospace; font-size:11px; color:var(--orange); margin-bottom:14px }
.principle b{ display:block; font-size:19px; font-weight:600; letter-spacing:-.02em; margin-bottom:8px }
.principle p{ font-size:14.5px; color:var(--t2) }

/* ── footer ──────────────────────────────────────────────────────────────── */
.footer{ border-top:1px solid var(--line); padding:56px 0 34px }
.footer .top{ display:grid; gap:36px; grid-template-columns:1fr 1fr }
@media (min-width:900px){ .footer .top{ grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:24px } }
.footer .brand{ grid-column:1 / -1 }
@media (min-width:900px){ .footer .brand{ grid-column:auto } }
.footer .brand img{ height:22px; width:auto; margin-bottom:16px }
.footer .brand p{ font-size:14px; color:var(--t3); max-width:30ch }
.footer h5{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); margin-bottom:14px }
.footer ul{ list-style:none; display:grid; gap:9px }
.footer ul a{ font-size:14.5px; color:var(--t2); transition:color .25s var(--ease) }
.footer ul a:hover{ color:var(--t1) }
.footer .bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:48px; padding-top:22px;
  border-top:1px solid var(--line); font-size:12.5px; color:var(--t3) }

/* ── motion: entrances ───────────────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0s) }
.rv.in{ opacity:1; transform:none }
.rv.scale{ transform:translateY(18px) scale(.985) }
.rv.scale.in{ transform:none }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.2s !important }
  .rv{ transform:none }
  .glow{ animation:none }
}

/* ── mobile menu — a sheet that materialises from the pill, not a fade ──── */
.nav .sheet{ position:absolute; left:var(--pad); right:var(--pad); top:calc(var(--nav-h) + 8px); display:grid; gap:2px;
  padding:8px; border-radius:var(--r-l); background:rgba(18,18,18,.82); border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 20px 50px rgba(0,0,0,.5); transform-origin:top right; pointer-events:none;
  opacity:0; transform:translateY(-6px) scale(.97); filter:blur(6px);
  transition:opacity .35s var(--ease), transform .45s var(--ease), filter .35s var(--ease) }
.nav-open .nav .sheet{ pointer-events:auto; opacity:1; transform:none; filter:none }
.nav .sheet a{ padding:14px 16px; border-radius:var(--r-m); font-size:17px; font-weight:600; letter-spacing:-.01em }
.nav .sheet a:active{ background:rgba(255,255,255,.08) }
@media (min-width:900px){ .nav .sheet{ display:none } }
/* open: three segments become the stroke — one diagonal, no skew, one piece */
.nav-open .nav .menu i{ animation:none; opacity:1; transform:translateY(0) rotate(-62deg) scaleX(1.5) }
.nav-open .nav .menu::before{ animation:none }

/* ── ?ios — the page inside an iPhone frame in the case study ─────────────── */
/* The deck draws the status bar and the Dynamic Island over the top 54 px, so the
   floating nav drops below them and the first fold makes room. The frame is
   exactly one viewport tall; the page scrolls inside it to the slice it was asked
   for, and its scrollbar is hidden because a phone has none. */
html.ios .nav{ top:62px }
html.ios .hero,html.ios .page-head{ padding-top:calc(var(--nav-h) + 84px + 44px) }
html.ios ::-webkit-scrollbar{ display:none }
html.ios{ scrollbar-width:none; scroll-behavior:auto }

/* ── screens after Home, in the case study: no CTA in the nav ─────────────── */
html.ios-sub .nav .btn{ display:none }