/* ============================================================
   DoppoAI — shared stylesheet, V2 "paper" system
   Per DESIGN-BRIEF.md (Studio Kleiner reference):
   warm paper ground, near-black ink, demoted orange accent,
   one grotesque at 400/500, pill/circle/rect atoms with 1px
   hairlines that invert on hover, 15px spacing grid, whitespace
   as structure. Sentence case everywhere except inside pills.
   ============================================================ */

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

:root{
  /* dark ground, same system: warm near-black paper, bone ink */
  --bg:#131211;
  --ink:#f4f2ec;
  --muted:#93907f;
  --accent:#ff4712;
  --chip:#201e1c;
  --line:rgba(244,242,236,0.16);
  /* Display face: Neue Haas Grotesk. First two names match Adobe Fonts /
     self-hosted licenses; Helvetica Neue (same lineage, on every Mac) carries
     the look until the licensed webfont is wired in. */
  --font-display:'neue-haas-grotesk-display','Neue Haas Grotesk Display Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
  --u:15px;              /* base unit: steps of 15/30/45/60 */
  --maxw:1240px;
  --radius:20px;
  --pill-h:32px;
}

*{box-sizing:border-box;}
/* Smooth anchor scrolling on pointer devices only. As a blanket rule it
   also smooths touch momentum on iOS Safari, which can overshoot the end
   of the document and park a screen of dead space under the footer. */
@media (hover:hover){
  html{scroll-behavior:smooth;}
}

/* film grain over everything — the sleeve texture */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:999;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px 260px;
  opacity:0.34;
  filter:contrast(125%);
  mix-blend-mode:overlay;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent); color:#fff;}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.1;
  margin:0 0 0.5em;
}
h1{font-size:clamp(2.6rem, 6.5vw, 5.5rem);}
h2{font-size:clamp(1.8rem, 3.6vw, 2.75rem);}
h3{font-size:1.35rem; letter-spacing:-0.01em;}
p{margin:0 0 1em;}
.display em{font-style:normal; color:var(--accent);}
.muted{color:var(--muted);}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 30px;
}

/* ---------- pill / rect / circle atoms ----------
   Interactive UI is pills: 32px tall, 1px ink hairline,
   small uppercase label, hover inverts to ink fill. */
.pill,.rect,.circle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:var(--pill-h);
  padding:0 18px;
  border:1px solid var(--ink);
  border-radius:var(--pill-h);
  background:transparent;
  color:var(--ink);
  font-family:inherit;
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.rect{border-radius:10px;}
.circle{width:var(--pill-h); padding:0; border-radius:50%;}
a.pill:hover, a.rect:hover, a.circle:hover,
button.pill:hover, button.rect:hover, button.circle:hover{
  background:var(--ink);
  color:var(--bg);
}
.pill.is-active{background:var(--ink); color:var(--bg);}
.pill-accent{border-color:var(--accent); color:var(--accent);}
a.pill-accent:hover, button.pill-accent:hover{background:var(--accent); color:#fff; border-color:var(--accent);}

/* lowercase tag variant — quiet, non-interactive */
.tag{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:26px;
  color:var(--muted);
  font-size:0.72rem;
  font-weight:400;
  letter-spacing:0.02em;
  text-transform:lowercase;
  white-space:nowrap;
}
.tag-row{display:flex; gap:8px; flex-wrap:wrap;}

/* ---------- header: floating pill nav ---------- */
.site-header{
  position:fixed;
  top:var(--u);
  left:var(--u);
  right:var(--u);
  z-index:50;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  pointer-events:none;
}
.site-header .pill, .site-header .rect, .site-header .circle{
  pointer-events:auto;
  background:rgba(19,18,17,0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.site-header a.pill:hover, .site-header a.rect:hover, .site-header button.circle:hover{
  background:var(--ink);
}
.site-header .pill.is-active{background:var(--ink); color:var(--bg);}
.nav-group{display:flex; gap:8px; flex-wrap:wrap;}
.nav-links{display:flex; gap:8px; align-items:flex-start;}
/* wordmark alone — no symbol. The crosshair read as a gun reticle and
   is gone from the header, both footers and the seal. */
.brand-rect{gap:0; letter-spacing:-0.01em;}
.nav-burger{display:none;}

/* ---------- hero ---------- */
.hero{padding:200px 0 120px;}
.hero .kicker{
  color:var(--muted);
  font-size:0.85rem;
  margin:0 0 30px;
}
.hero h1{max-width:16ch; margin-bottom:0.4em;}
.hero-tag{
  color:var(--muted);
  max-width:52ch;
  margin:0 0 45px;
}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap;}

/* ---------- sections ---------- */
section{padding:120px 0;}
section.tight{padding:60px 0;}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:45px;
  margin-bottom:60px;
}
.section-head h2{margin:0; max-width:20ch;}
.section-head p{color:var(--muted); max-width:340px; margin:0;}
.divider{border:none; border-top:1px solid var(--line); margin:0;}

/* ---------- wordmark strip ----------
   Placeholder slots for the AI wordmarks (incoming).
   Replace each .wordmark-slot with:
   <div class="wordmark"><img src="assets/wordmarks/<name>.svg" alt="<Name>"></div> */
.wordmark-strip{
  padding:45px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.wordmark-strip .strip-label{
  color:var(--muted);
  font-size:0.72rem;
  letter-spacing:0.02em;
  text-transform:lowercase;
  margin:0 0 30px;
}
/* Was a 6-column grid from the old placeholder slots, which spread four
   logos across six tracks and made every gap a different size. Flex with
   one gap instead. 40px is not arbitrary: Epic want 2x the icon height
   clear on each side of their lockup, and at 20px that is 40 — so the
   row gap satisfies their rule rather than the lockup needing its own
   margin on top of it. */
.wordmark-row{
  display:flex;
  flex-wrap:wrap;
  /* Bottom-aligned with a per-logo lift, rather than align-items:baseline
     — flex baseline for a replaced element is its bottom margin edge, so
     it gives no direct control over where the *type* baseline lands.
     The lifts below are not derived from the source files: those were
     rasterised at a different scale and gave answers up to 5px out.
     They are measured from the rendered page, by drawing each img to a
     canvas at its actual display size and finding the last row holding
     35% ink. Re-measure that way if a logo is ever swapped or resized.
     Everything aligns to the DaVinci Resolve entry, which is the only
     one whose baseline is real text. */
  align-items:flex-end;
  gap:44px;
  min-height:56px;
}
.wordmark, .wordmark{
  display:inline-flex;
  align-items:center;
  gap:11px;
  opacity:0.78;
  transition:opacity 0.2s ease;
}
.wordmark:hover{opacity:1;}
.wordmark .wm-logo.cf{height:22px; margin-bottom:6.7px;}
.wordmark .wm-icon{height:34px; width:34px; display:block; border-radius:5px;}
.wordmark.is-logo{text-decoration:none;}
/* the Resolve entry aligns via its own text, so it is nudged as a unit */
.wordmark:has(.wm-icon){margin-bottom:0.9px;}
.wordmark .wm-logo{width:auto; display:block;}
/* Each vendor sets its own minimum and clear space, so each is sized to
   its own rule rather than to a shared number:
   Unreal  — icon >=16px, clear space 1x icon top/bottom, 2x each side
   Runway  — logo height >=24px
   Blender — no stated minimum; unaltered, complete, links to blender.org */
.wordmark .wm-logo.ue{height:42px; margin-bottom:0;}
.wordmark .wm-logo.rw{height:24px; margin-bottom:4.7px;}
.wordmark .wm-logo.bl{height:39px; margin-bottom:2.7px;}
.wordmark .wm-name{
  font-family:var(--font-display);
  font-size:1.45rem;
  font-weight:600;
  letter-spacing:-0.02em;
  color:var(--ink);
  white-space:nowrap;
}
.wordmark-slot{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
}
.wordmark{
  display:inline-flex;
  align-items:center;
  gap:11px;
  opacity:0.78;
  transition:opacity 0.2s ease;
}
.wordmark:hover{opacity:1;}
.wordmark .wm-logo.cf{height:22px; margin-bottom:6.7px;}
.wordmark .wm-icon{height:34px; width:34px; display:block; border-radius:5px;}
.wordmark.is-logo{text-decoration:none;}
/* the Resolve entry aligns via its own text, so it is nudged as a unit */
.wordmark:has(.wm-icon){margin-bottom:0.9px;}
.wordmark .wm-logo{width:auto; display:block;}
/* Each vendor sets its own minimum and clear space, so each is sized to
   its own rule rather than to a shared number:
   Unreal  — icon >=16px, clear space 1x icon top/bottom, 2x each side
   Runway  — logo height >=24px
   Blender — no stated minimum; unaltered, complete, links to blender.org */
.wordmark .wm-logo.ue{height:42px; margin-bottom:0;}
.wordmark .wm-logo.rw{height:24px; margin-bottom:4.7px;}
.wordmark .wm-logo.bl{height:39px; margin-bottom:2.7px;}
.wordmark .wm-name{
  font-family:var(--font-display);
  font-size:1.45rem;
  font-weight:600;
  letter-spacing:-0.02em;
  color:var(--ink);
  white-space:nowrap;
}
.wordmark-slot{
  border:1px dashed var(--line);
  color:var(--muted);
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:lowercase;
}
.wordmark img{max-height:36px; width:auto; opacity:0.85;}

/* ---------- brand hero ----------
   Sleeve-style: warped grid ground, spinning stamp top-left,
   bold corner credits anchored bottom-left like a track credit. */
.hero-brand{
  position:relative;
  min-height:92vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:120px 0 75px;
  overflow:hidden;
  /* burnt base + mild corner shading (lifted darks — no black voids);
     the living color rides in .splash blobs / the live canvas */
  background:
    radial-gradient(90% 80% at 12% 12%, rgba(48,20,10,0.7) 0%, transparent 55%),
    radial-gradient(120% 90% at 22% 96%, #b53509 0%, rgba(140,42,14,0.6) 48%, transparent 85%),
    linear-gradient(150deg, #602009 0%, #a2380f 45%, #7a2a10 100%);
}
/* live canvas paints the field itself — retire the CSS fallback blobs */
.hero-brand.live-grid .splash{display:none;}

/* ---------- living splash field ----------
   Four huge blurred blobs on mismatched slow loops — the field keeps
   modulating and never visibly repeats. Runs without JS. */
.splash{
  position:absolute;
  inset:-12%;
  z-index:0;
  pointer-events:none;
}
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  will-change:transform;
}
.blob.b1{
  width:68vw; height:52vw;
  left:34%; top:2%;
  background:radial-gradient(closest-side, rgba(255,190,140,0.7) 0%, rgba(255,140,80,0.4) 45%, transparent 75%);
  mix-blend-mode:screen;
  animation:drift-a 33s ease-in-out infinite alternate;
}
.blob.b2{
  width:82vw; height:62vw;
  left:-16%; top:26%;
  background:radial-gradient(closest-side, rgba(255,96,28,0.8) 0%, rgba(200,58,14,0.45) 50%, transparent 78%);
  mix-blend-mode:screen;
  animation:drift-b 41s ease-in-out infinite alternate;
}
.blob.b3{
  width:70vw; height:52vw;
  right:-14%; bottom:-16%;
  background:radial-gradient(closest-side, rgba(74,26,11,0.6) 0%, rgba(74,26,11,0.3) 50%, transparent 78%);
  mix-blend-mode:multiply;
  animation:drift-c 37s ease-in-out infinite alternate;
}
.blob.b4{
  width:30vw; height:26vw;
  left:56%; top:44%;
  background:radial-gradient(closest-side, rgba(255,176,120,0.5) 0%, transparent 70%);
  mix-blend-mode:screen;
  animation:drift-d 23s ease-in-out infinite alternate;
}
@keyframes drift-a{
  from{transform:translate(0,0) scale(1) rotate(0deg);}
  to{transform:translate(-14vw, 9vh) scale(1.28) rotate(14deg);}
}
@keyframes drift-b{
  from{transform:translate(0,0) scale(1.1) rotate(0deg);}
  to{transform:translate(11vw, -7vh) scale(0.92) rotate(-11deg);}
}
@keyframes drift-c{
  from{transform:translate(0,0) scale(1);}
  to{transform:translate(-9vw, -10vh) scale(1.22);}
}
@keyframes drift-d{
  from{transform:translate(0,0) scale(0.9);}
  to{transform:translate(9vw, 11vh) scale(1.45);}
}
/* cursor glow: JS eases this toward the mouse; no ambient keyframes */
.blob.cursor-glow{
  width:36vw; height:30vw;
  left:0; top:0;
  background:radial-gradient(closest-side, rgba(255,170,110,0.55) 0%, rgba(255,96,28,0.25) 50%, transparent 75%);
  mix-blend-mode:screen;
  filter:blur(60px);
  transform:translate(50vw, 28vh);
}
@media (prefers-reduced-motion: reduce){
  .blob{animation:none;}
}
/* grid rides above the color field, content above both */
.hero-brand .grid-canvas{z-index:1;}
.hero-brand > .stamp, .hero-brand > .hero-credits{z-index:2;}
/* extra-heavy ANIMATED grain on the splash — film grain dances, it
   doesn't sit still. steps(1) jumps the tile offset like real stock. */
.hero-brand::after{
  content:'';
  position:absolute;
  inset:-80px;
  z-index:3;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px 260px;
  opacity:0.42;
  filter:contrast(140%);
  mix-blend-mode:overlay;
  animation:grain-jump 0.5s steps(1) infinite;
}
/* with JS the canvas paints its own per-pixel grain — don't double up */
.hero-brand.live-grid::after{display:none;}
@keyframes grain-jump{
  0%{transform:translate(0,0);}
  20%{transform:translate(-46px,32px);}
  40%{transform:translate(38px,-58px);}
  60%{transform:translate(-24px,-42px);}
  80%{transform:translate(52px,26px);}
  100%{transform:translate(0,0);}
}
@media (prefers-reduced-motion: reduce){
  .hero-brand::after{animation:none;}
}
/* on the splash, accent-on-orange dies — hero UI goes ink */
.hero-credits .pill-accent{border-color:var(--ink); color:var(--ink);}
.hero-credits a.pill-accent:hover{background:var(--ink); color:#a03209; border-color:var(--ink);}
.hero-brand > *{position:relative; z-index:1;}
.hero-brand .grid-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
}
.hero-credits{width:100%;}
.hero-credits h1{
  font-size:clamp(3.2rem, 8.5vw, 7.5rem);
  font-weight:700;
  /* All caps, as drawn on the splash. Metrics are tuned for it: caps have
     no descenders, which is why 0.95 line-height and a 10px gap work here
     and would not in mixed case. */
  text-transform:uppercase;
  letter-spacing:-0.03em;
  line-height:0.95;
  /* Optical left-align. Measured, not guessed: at 120px the "D" carries 8px
     of left side bearing while the studio line's "A" carries none, so the
     wordmark sat 8px inboard of everything under it. 8/120 = 0.067em, which
     holds as the clamp scales. */
  margin:0 0 10px -0.067em;
}
.hero-credits h1 .ac{color:var(--accent);}
.hero-credits h1 sup{font-size:0.25em; font-weight:500; vertical-align:top; top:0.6em; position:relative;}
.hero-credits .studio-line{
  margin:0 0 16px;
  font-size:0.82rem;
  letter-spacing:0.17em;
  text-transform:uppercase;
  color:rgba(244,242,236,0.82);
}
.studio-line strong{font-weight:600; color:var(--ink);}
/* flush to the lockup's left edge, so the identity block has one clean
   left margin rather than a stepped indent under the wordmark */
.footer-cities{
  margin:0;
  font-size:0.62rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.credits-sub{
  font-family:var(--font-display);
  font-size:clamp(1.15rem, 2.2vw, 1.7rem);
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1.25;
  max-width:32ch;
  margin:0 0 40px;
}
.hero-credits .credits-sub em{font-style:normal; color:#ffe3cf;}

/* ---------- rotating stamp badge ---------- */
.stamp{
  position:absolute;
  top:110px;
  left:30px;
  width:150px;
  height:150px;
  color:var(--ink);
  z-index:2;
}
.stamp svg{
  width:100%;
  height:100%;
  display:block;
  animation:stamp-spin 40s linear infinite;
}
.stamp text{
  fill:currentColor;
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:2.5px;
}
@keyframes stamp-spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@media (prefers-reduced-motion: reduce){
  .stamp svg{animation:none;}
}

/* ---------- vertical edge type (subpage heroes) ---------- */
.hero{position:relative;}
.edge-type{
  position:absolute;
  top:150px;
  left:30px;
  font-family:var(--font-display);
  writing-mode:vertical-rl;
  font-size:clamp(2rem, 4.5vh, 3rem);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  line-height:1;
  color:var(--ink);
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  padding:6px 14px;
  user-select:none;
}
.hero-edge .wrap{padding-left:160px;}
@media (max-width: 920px){
  .edge-type{display:none;}
  .hero-edge .wrap{padding-left:30px;}
  .stamp{width:100px; height:100px; top:90px;}
}
/* ---------- ticker ---------- */
.ticker{
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:16px 0;
}
.ticker-track{
  display:flex;
  gap:0;
  width:max-content;
  animation:ticker-scroll 36s linear infinite;
}
.ticker-track span{
  color:var(--muted);
  font-size:0.8rem;
  text-transform:lowercase;
  white-space:nowrap;
  padding-right:18px;
}
.ticker-track span::after{
  content:'·';
  color:var(--accent);
  padding-left:18px;
}
@keyframes ticker-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none;}
}

/* ---------- cards ---------- */
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--u);}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--u);}
.card{
  background:var(--chip);
  border:1px solid rgba(244,242,236,0.07);
  border-radius:var(--radius);
  padding:45px 40px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:transform .3s ease;
}
.card:hover{transform:translateY(-4px);}
@media (prefers-reduced-motion: reduce){
  .card:hover{transform:none;}
}
.card .tag-row{margin-bottom:26px;}
.card h3{margin-bottom:12px;}
.card p{color:var(--muted); margin:0;}
.card .card-action{margin-top:30px;}

/* home "two ways" cards: numbered kicker, title first, tags demoted to a
   hairline footer — three chips stacked above the title buried it. The
   auto margin parks both action pills on the same line across the row. */
.card-index{
  display:block;
  color:var(--accent);
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.08em;
  font-variant-numeric:tabular-nums;
  margin-bottom:24px;
}
.card.way p{margin-bottom:34px;}
.card.way .card-action{margin-top:auto;}
.card-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-self:stretch;
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid rgba(244,242,236,0.1);
}
/* the what-we-do stage cards end on their list — the product cards'
   trailing list margin and slot-alignment min-height would read as
   dead space here */
.card.stage ul.features{margin-bottom:0; min-height:0;}

/* ---------- nav dropdown: Tools opens its categories ----------
   The catalog is browsed from the header, so the page itself can stay
   plain sections instead of carrying a filter bar. */
.nav-drop{position:relative; pointer-events:auto;}
.nav-drop > .pill{cursor:pointer;}
.nav-drop .caret{
  width:9px; height:9px; margin-left:2px;
  transition:transform 0.18s ease;
}
.nav-drop:hover .caret, .nav-drop.open .caret{transform:rotate(180deg);}
.nav-menu{
  position:absolute;
  top:100%;
  left:0;
  padding-top:9px;              /* hover bridge, not visible chrome */
  min-width:230px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.nav-drop:hover .nav-menu, .nav-drop.open .nav-menu{
  opacity:1; visibility:visible; transform:none;
}
.nav-menu-inner{
  background:rgba(19,18,17,0.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);
  border-radius:16px;
  padding:7px;
  display:flex;
  flex-direction:column;
}
.nav-menu a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  padding:8px 12px;
  border-radius:10px;
  font-size:0.82rem;
  color:rgba(244,242,236,0.82);
  text-decoration:none;
  white-space:nowrap;
  transition:background 0.14s ease, color 0.14s ease;
}
.nav-menu a:hover{background:var(--chip); color:var(--ink);}
/* Counts sit quiet until you are on the row they belong to. */
.nav-menu a .n{
  color:var(--muted);
  font-size:0.68rem;
  font-variant-numeric:tabular-nums;
  transition:color 0.14s ease;
}
.nav-menu a:hover .n{color:var(--accent);}
.nav-menu .sep{height:1px; background:var(--line); margin:6px 9px;}

/* catalog sections: the site's 120px section rhythm is right for a page
   with three ideas on it, not five products — halve it here so the
   catalog reads as a list rather than a series of landing pages. */
.catalog{padding:64px 0;}
.catalog .section-head{margin-bottom:30px; display:block;}
.catalog .section-head h2{font-size:clamp(1.6rem, 2vw, 2rem);}
.catalog .section-head p{font-size:0.88rem; max-width:400px;}

/* ---------- product rows (tools page) ----------
   Full-width horizontal cards: a section holding one product reads as
   complete, and each product costs ~360px of scroll instead of ~900. */
.product-rows{display:flex; flex-direction:column; gap:var(--u);}

/* trailing tile — gives the catalog an exit */
.card.ask{
  background:transparent;
  border:1px dashed var(--line);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:50px 44px;
}
.card.ask h3{
  font-family:var(--font-display);
  font-size:1.7rem;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.1;
  max-width:20ch;
  margin:0 0 14px;
}
.card.ask p{color:var(--muted); font-size:0.9rem; max-width:44ch; margin:0 0 26px;}
.card.ask:hover{transform:none; border-color:rgba(244,242,236,0.28);}

/* ---------- product cards (tools page) ----------
   One statement per card: status badge, big name, price, one tight
   paragraph, three dashed points, one action. No rules, no tag rows,
   no competing blocks. */
.card.product{
  position:relative;
  padding:0;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0, 42%) minmax(0, 1fr);
  align-items:stretch;
}

/* splash — shows what the tool actually does */
.product-media{
  position:relative;
  width:100%;
  height:100%;
  min-height:300px;
  overflow:hidden;
  background:var(--chip);
}
.product-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  padding:18px;
}
/* keep the splash from fighting the type below it */
.product-media::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to right, transparent 74%, rgba(32,30,28,0.4) 92%, var(--chip) 100%);
  pointer-events:none;
}

.card-status{
  position:absolute;
  top:20px;
  right:20px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 13px;
  border:1px solid rgba(255,120,70,0.5);
  border-radius:26px;
  background:rgba(14,10,8,0.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#ff8a52;
  font-size:0.64rem;
  font-weight:500;
  letter-spacing:0.09em;
  text-transform:uppercase;
  white-space:nowrap;
}

.product-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:38px 44px;
}

/* large and sexy: the name is the loudest thing on the card */
.card.product h3{
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 3.1vw, 3rem);
  font-weight:700;
  letter-spacing:-0.035em;
  line-height:1;
  white-space:nowrap;
  margin:0 0 16px;
}
.card.product h3 .ac{color:var(--accent);}
.card.product .lede{
  color:rgba(244,242,236,0.8);
  font-size:1.12rem;
  line-height:1.5;
  /* hold three lines so a shorter lede doesn't shorten the whole card */
  min-height:calc(3 * 1.5em);
  max-width:46ch;
  margin:0 0 26px;
}

.price-line{
  display:flex;
  align-items:baseline;
  gap:7px;
  margin:0;
}
.price-line .amount{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1;
}
.price-line .note{color:var(--muted); font-size:0.72rem; white-space:nowrap;}

/* which app it plugs into — a compatibility badge, not a sentence.
   Vendor wordmarks would go in place of .app once we hold the licensed
   assets; until then it is set type. */
.host-pill{
  display:inline-flex;
  align-items:center;
  gap:32px;
  height:48px;
  padding:0 32px 0 18px;
  border:1px solid rgba(244,242,236,0.16);
  border-radius:38px;
  background:
    linear-gradient(rgba(244,242,236,0.07), rgba(244,242,236,0.02));
  box-shadow:
    inset 0 1px 0 rgba(244,242,236,0.09),
    0 1px 2px rgba(0,0,0,0.35);
  white-space:nowrap;
  transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.host-pill .for{
  font-size:0.55rem;
  font-weight:600;
  line-height:1;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(244,242,236,0.42);
}
/* letter-spacing leaves a trailing space after the R, which made the gap
   to the icon read wider than the one after it. Not applied to .has-logo:
   there the gap is Epic's clear space and must measure exactly. */
.host-pill .for{margin-right:-0.1em;}
.host-pill .app{
  font-family:var(--font-display);
  line-height:1;
  font-size:0.88rem;
  font-weight:600;
  letter-spacing:-0.018em;
  color:var(--ink);
}
/* a licensed wordmark replaces .app — height-locked so files of any
   proportion share one optical line */
.host-pill .app-icon{
  height:18px;
  width:18px;
  display:block;
  align-self:center;
  border-radius:4px;
}
/* Epic require the UE icon at >=16px on screen, with clear space of one
   icon height top/bottom and two on each side. The 48px pill and the
   .has-logo gaps below are those numbers, not taste. */
/* Same oval as the icon badge — the two must read as one component.
   The geometry is Epic's: at 16px the lockup needs one icon height of
   clear space top and bottom (16+16+16 = the 48px pill exactly) and two
   on each side (the 32px gap and right padding). */
/* the icon+name pair is a lockup too, so it gets the same treatment */
.host-pill .lockup{display:inline-flex; align-items:center; gap:10px;}
.host-pill.has-logo .app-logo{height:16px;}
.host-pill .app-logo{
  align-self:center;
  height:16px;
  width:auto;
  display:block;
  opacity:0.95;
}
.card.product:hover .host-pill{
  border-color:rgba(244,242,236,0.28);
  background:linear-gradient(rgba(244,242,236,0.1), rgba(244,242,236,0.04));
  box-shadow:
    inset 0 1px 0 rgba(244,242,236,0.13),
    0 1px 3px rgba(0,0,0,0.4);
}
.card.product:hover .host-pill .for{color:rgba(244,242,236,0.6);}

/* three quiet points, dashed in accent — no table rules */
.card ul.features{
  list-style:none;
  padding:0;
  margin:0 0 22px;
  width:100%;
}
.card.product ul.features{
  columns:2;
  column-gap:34px;
  /* pinned like .lede: cards carry 3 or 4 points, and column balancing
     resolves those to heights 1.4px apart. Hold the taller one so every
     card in a row lands on the same total height. */
  min-height:107.2px;
}
.card.product ul.features li{break-inside:avoid;}
.card ul.features li{
  position:relative;
  padding-left:22px;
  margin-bottom:13px;
  font-size:1rem;
  line-height:1.45;
  color:rgba(244,242,236,0.68);
}
.card ul.features li::before{
  content:'';
  position:absolute;
  left:0;
  top:0.68em;
  width:11px;
  height:1px;
  background:var(--accent);
  opacity:0.75;
}
.card .requirements{
  font-size:0.84rem;
  color:var(--muted);
  margin:0 0 22px;
}
.card-foot{
  display:flex;
  align-items:center;
  /* the oval badge is 48px; without one the row collapsed to the CTA's
     42px and the card came out short. Hold the row height either way. */
  min-height:48px;
  gap:16px;
  flex-wrap:wrap;
  width:100%;
}
.card.product .card-action .pill{height:42px; padding:0 22px; font-size:0.78rem;}
/* platform support: big marks parked in the card's bottom-right corner */
.platforms{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:18px;
  pointer-events:none;
}
.platforms svg{
  width:44px;
  height:44px;
  display:block;
  fill:var(--ink);
  opacity:0.22;
  transition:opacity 0.2s ease;
}
.card.product:hover .platforms svg{opacity:0.42;}
/* keep the requirements line from running under them */
.card-foot{row-gap:14px;}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* the generic card gives .card-action a 30px top margin; inside the foot
   row that margin is what threw the CTA 15px below everything else */
.card.product .card-foot .card-action{display:flex; align-items:center; margin:0; padding:0;}
/* stack the row back into a card when there's no room beside the splash */
@media (max-width: 860px){
  .card.product{grid-template-columns:1fr;}
  .product-media{aspect-ratio:16/10; height:auto; min-height:0;}
  .product-media::after{
    background:linear-gradient(to bottom, transparent 55%, rgba(32,30,28,0.55) 88%, var(--chip) 100%);
  }
  .product-body{padding:30px 30px 34px;}
  .card.product h3{font-size:2.3rem;}
  .card.product ul.features{columns:1;}
  .card.ask{padding:36px 30px;}
}

/* ---------- flow row (replaces node motif) ---------- */
.flow-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.flow-row .arrow{color:var(--muted);}

/* ---------- panel / feature block ---------- */
.panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:60px;
}
.panel-chip{background:var(--chip); border-color:rgba(244,242,236,0.07);}
.panel-split{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:center;
}
/* the featured-work panel shares the cards' anatomy: tags, title, copy, action */
.panel-split .tag-row{margin-bottom:26px;}
.panel-split h3{margin-bottom:12px;}
.panel-split .card-action{margin-top:30px;}

/* ---------- media placeholder ---------- */
/* quiet grey blooms — the hyper-color splash lives on the home hero,
   not in these boxes */
.media{
  aspect-ratio:16/9;
  background:
    radial-gradient(110% 85% at 22% 18%, #3d3a36 0%, transparent 52%),
    radial-gradient(95% 115% at 82% 72%, #2e2b28 0%, transparent 58%),
    radial-gradient(70% 70% at 55% 45%, #262421 0%, transparent 65%),
    var(--chip);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.media.accent{
  background:
    radial-gradient(110% 85% at 25% 20%, rgba(255,71,18,0.25) 0%, transparent 55%),
    radial-gradient(95% 115% at 80% 75%, #3a3835 0%, transparent 58%),
    var(--chip);
}
.media.tall{aspect-ratio:4/5;}
.media.square{aspect-ratio:1/1;}
.media.wide{aspect-ratio:21/9;}
.media-label{
  border:1px dashed rgba(244,242,236,0.4);
  border-radius:26px;
  padding:6px 14px;
  color:var(--ink);
  background:rgba(19,18,17,0.5);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-size:0.7rem;
  letter-spacing:0.04em;
  text-transform:lowercase;
}

/* ---------- work gallery: image-first mixed grid ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:calc(var(--u) * 2) var(--u);
}
.gallery-item{grid-column:span 12;}
.gallery-item.w-7{grid-column:span 7;}
.gallery-item.w-5{grid-column:span 5;}
.gallery-item.w-6{grid-column:span 6;}
.gallery-caption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--u);
  flex-wrap:wrap;
  margin-top:18px;
}
.gallery-caption .title{
  font-size:1rem;
  text-transform:lowercase;
  letter-spacing:0;
  margin:0;
}
.gallery-caption .title a:hover{color:var(--accent);}
.gallery-note{color:var(--muted); max-width:60ch; margin-top:12px; font-size:0.9rem;}

/* ---------- pricing ---------- */
.price-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:45px 36px;
  display:flex;
  flex-direction:column;
  position:relative;
  background:var(--bg);
}
.price-card.featured{border-color:var(--accent);}
.price-card .flag{
  position:absolute;
  top:22px; right:22px;
  border:1px solid var(--accent);
  border-radius:26px;
  color:var(--accent);
  font-size:0.66rem;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:5px 12px;
}
.price-card h3{margin-bottom:6px; padding-right:80px;}
.price-card .sub{color:var(--muted); font-size:0.85rem; margin-bottom:30px;}
.price-card .amount{
  font-family:var(--font-display);
  font-size:3rem;
  letter-spacing:-0.03em;
  line-height:1;
  margin-bottom:6px;
}
.price-card .amount sup{font-size:1.2rem; vertical-align:top; top:0.4em; position:relative;}
.price-card .note{color:var(--muted); font-size:0.78rem; margin-bottom:30px;}
.price-card ul{list-style:none; padding:0; margin:0 0 36px; flex:1;}
.price-card li{
  padding:11px 0;
  border-top:1px solid var(--line);
  font-size:0.9rem;
  color:var(--muted);
}
.price-card .pill, .price-card .pill-accent{align-self:stretch;}

/* ---------- form ---------- */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.form-grid .full{grid-column:1/-1;}
/* Inquiry result line. Reserves its row so the panel does not jump when a
   message appears; empty until inquiry.js writes one. */
.form-note{
  min-height:1.4em;
  margin:18px 0 0;
  font-size:0.84rem;
  color:var(--muted);
}
.form-note.is-ok{color:var(--ink);}
.form-note.is-error{color:var(--accent);}
label{
  display:block;
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.02em;
  text-transform:lowercase;
  color:var(--muted);
  margin-bottom:8px;
}
input, select, textarea{
  width:100%;
  background:var(--chip);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--ink);
  padding:13px 16px;
  font-family:'Inter',sans-serif;
  font-size:0.94rem;
  transition:border-color .2s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--ink);
}
textarea{resize:vertical; min-height:120px;}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:60px 0 30px;
}
/* the closing ask sits a little tighter than a full section */
section.closing-cta{padding-top:90px;}
/* Was flex + space-between with two children, which pinned the identity
   hard left and the links hard right and left ~600px of nothing between
   them. Four even columns instead: identity, product, studio, contact. */
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.1fr;
  gap:40px;
  align-items:start;
}
.footer-identity{display:flex; flex-direction:column; gap:7px;}
.footer-links{display:contents;}
.footer-brand{display:flex; align-items:center; font-size:1.06rem; letter-spacing:-0.015em;}
.footer-brand .brand-word{white-space:nowrap;}
.footer-brand sup{font-size:0.52em; margin-left:1px; top:-0.55em;}
/* WORLD OPERATOR™ — small enough not to shout, tucked so it never adds
   line height inside a nav pill or a heading. */
sup.tm{
  font-size:0.55em;
  line-height:0;
  vertical-align:super;
  margin-left:1px;
  letter-spacing:0;
}
/* Pills track at 0.08em, which leaves a gap after the last letter before
   the mark. Pull it back so it reads as attached. */
.pill sup.tm{margin-left:-0.05em;}
/* The mark is two words; never let a line break land between them. */
.wo{white-space:nowrap;}
/* In a centred heading the ™ carries real width but almost no visual
   weight, so the words read as pushed left even when the box is exactly
   centred. Hang the mark outside the measured line so the letters centre. */
h1 .wo sup.tm, h2 .wo sup.tm, h3 .wo sup.tm{margin-right:-1em;}


.footer-col h4{
  font-size:0.6rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 12px;
}
.footer-col a{
  display:block;
  color:rgba(244,242,236,0.82);
  font-size:0.82rem;
  padding:3px 0;
  transition:color .2s ease;
}
.footer-col a:hover{color:var(--accent);}
.tm-notice{
  max-width:92ch;
  margin:52px 0 0;
  font-size:0.63rem;
  line-height:1.6;
  color:rgba(147,144,127,0.58);
}
.footer-bottom{
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:0.72rem;
  gap:16px;
  flex-wrap:wrap;
  gap:10px;
}

/* ---------- responsive ---------- */
@media (max-width: 920px){
  .nav-links{
    display:none;
    position:absolute;
    top:calc(var(--pill-h) + 8px);
    right:0;
    flex-direction:column;
    align-items:flex-end;
  }
  .nav-links.open{display:flex;}
  .nav-burger{display:inline-flex;}
  .hero{padding:150px 0 75px;}
  h1{font-size:clamp(2.2rem, 9vw, 3.4rem);}
  section{padding:60px 0;}
  .section-head{flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:32px;}
  .grid-2, .grid-3{grid-template-columns:1fr;}
  /* a heading plus its card should sit inside one phone screen, so the
     card's internal rhythm compresses with the viewport */
  .card{padding:30px 24px;}
  .card-index{margin-bottom:14px;}
  .card h3{font-size:1.25rem;}
  .card.way p{margin-bottom:24px;}
  .card-tags{margin-top:22px; padding-top:16px;}
  .tag{height:22px; padding:0 10px; font-size:0.68rem;}
  .panel{padding:30px 24px;}
  .panel-split{grid-template-columns:1fr; gap:26px;}
  .panel-split h3{font-size:1.25rem;}
  /* stacked featured card leads with its media, like the product cards */
  .panel-split > .video{order:-1;}
  .gallery-item.w-7, .gallery-item.w-5, .gallery-item.w-6{grid-column:span 12;}
  .form-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:24px 34px;}
  .footer-identity{grid-column:1 / -1;}
  /* the desktop strip is one baseline-aligned row; at phone width it
     wrapped into a ragged pile at desktop sizes. One column instead:
     every logo on the same left edge, at close visual weight, no
     baseline lifts. */
  .wordmark-strip{padding:32px 0;}
  .wordmark-strip .strip-label{margin-bottom:24px;}
  .wordmark-row{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
    min-height:0;
  }
  .wordmark, .wordmark:has(.wm-icon){margin:0;}
  .wordmark .wm-logo{margin-bottom:0;}
  .wordmark .wm-icon{height:26px; width:26px;}
  .wordmark .wm-name{font-size:1.05rem;}
  .wordmark .wm-logo.ue{height:30px;}
  .wordmark .wm-logo.bl{height:28px;}
  .wordmark .wm-logo.rw{height:19px;}
  .wordmark .wm-logo.cf{height:19px;}
  .site-header .nav-cta{display:none;}
  /* the page end was mostly air on a phone: desktop-scale footer padding,
     the closing ask's 90px shelf, and the notice's 52px setback */
  section.closing-cta{padding-top:36px;}
  footer{padding:36px 0 20px;}
  .tm-notice{margin-top:26px;}
  .footer-bottom{margin-top:20px; padding-top:16px;}
}

/* in the burger menu the Tools categories are dropped entirely — the pill
   goes straight to the tools page, which is those same sections with
   headings. An always-open sub-list floating over the hero read as
   clutter, not navigation. */
@media (max-width: 920px){
  .nav-drop .caret{display:none;}
  .nav-menu{display:none;}
}


/* ---------- cookie notice ---------- */
.consent{
  position:fixed;
  left:var(--u);
  bottom:var(--u);
  z-index:80;
  width:min(430px, calc(100vw - 30px));
  padding:24px 26px 26px;
  background:rgba(19,18,17,0.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 18px 50px rgba(0,0,0,0.55);
  opacity:0;
  transform:translateY(14px);
  transition:opacity 0.26s ease, transform 0.26s ease;
}
.consent.in{opacity:1; transform:none;}
.consent p{
  margin:0 0 16px;
  font-size:0.84rem;
  line-height:1.55;
  color:rgba(244,242,236,0.78);
}
.consent-actions{display:flex; gap:10px; flex-wrap:wrap;}
.footer-bottom a[data-consent-reset]{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--line);
}
.footer-bottom a[data-consent-reset]:hover{color:var(--ink);}
@media (max-width: 640px){
  .consent{padding:20px 20px 22px;}
}

/* ---------- newsletter popup ---------- */
.nl{
  position:fixed;
  right:var(--u);
  bottom:var(--u);
  z-index:75;
  width:min(400px, calc(100vw - 30px));
  padding:30px 32px 32px;
  background:rgba(19,18,17,0.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 18px 50px rgba(0,0,0,0.55);
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.28s ease, transform 0.28s ease;
}
.nl.in{opacity:1; transform:none;}
.nl-kicker{
  margin:0 0 10px !important;
  font-size:0.6rem !important;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent) !important;
}
.nl h3{
  font-family:var(--font-display);
  font-size:1.45rem;
  font-weight:700;
  letter-spacing:-0.025em;
  line-height:1.1;
  margin:0 0 12px;
  max-width:18ch;
}
.nl p{
  margin:0 0 22px;
  font-size:0.86rem;
  line-height:1.55;
  color:rgba(244,242,236,0.7);
}
.nl-form{display:flex; gap:9px; flex-wrap:wrap;}
.nl-form input[type=email]{
  flex:1 1 190px;
  height:42px;
  padding:0 15px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:42px;
  color:var(--ink);
  font-family:inherit;
  font-size:0.88rem;
}
.nl-form input[type=email]::placeholder{color:rgba(147,144,127,0.75);}
.nl-form input[type=email]:focus{outline:none; border-color:rgba(255,71,18,0.6);}
.nl-form button{height:42px; flex:0 0 auto;}
.nl-note{margin:16px 0 0 !important; font-size:0.8rem; color:rgba(244,242,236,0.72);}
.nl-note.bad{color:#ff8a52;}
.nl-close{
  position:absolute;
  top:12px;
  right:14px;
  width:30px;
  height:30px;
  padding:0;
  background:none;
  border:none;
  color:var(--muted);
  font-size:1.45rem;
  line-height:1;
  cursor:pointer;
}
.nl-close:hover{color:var(--ink);}
/* consent banner sits bottom-left, this sits bottom-right — they never
   collide, but on a phone there is only one column so stack them */
@media (max-width: 720px){
  .nl{bottom:auto; top:var(--u);}
}

/* ---------- inline subscribe ---------- */
.nl-inline{max-width:460px; margin:0 auto;}
.nl-inline form{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.nl-inline input[type=email]{
  flex:1 1 240px;
  height:46px;
  padding:0 18px;
  background:var(--chip);
  border:1px solid var(--line);
  border-radius:46px;
  color:var(--ink);
  font-family:inherit;
  font-size:0.92rem;
}
.nl-inline input[type=email]::placeholder{color:rgba(147,144,127,0.75);}
.nl-inline input[type=email]:focus{outline:none; border-color:rgba(255,71,18,0.6);}
.nl-inline form button{height:46px; flex:0 0 auto;}
.nl-inline-note{margin:18px 0 0; font-size:0.84rem; color:rgba(244,242,236,0.75);}
.nl-inline-note.bad{color:#ff8a52;}

/* ---------- vimeo, click to load ---------- */
.video{
  position:relative;
  aspect-ratio:16/9;
  width:100%;
  overflow:hidden;
  border-radius:var(--radius);
  background:linear-gradient(150deg, #241611, #140c08);
  background-size:cover;
  background-position:center;
}
/* Once the player is in, the surround must be black — the warm gradient
   behind it read as an orange pillarbox on any clip that is not 16/9.
   Aspect is set per embed from data-aspect, so most clips have no bars. */
.video.is-playing{background:#000;}
.video.has-poster::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(19,18,17,0.42);
  transition:background 0.25s ease;
}
.video:hover.has-poster::after{background:rgba(19,18,17,0.28);}
.video-play{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  width:100%;
  background:none;
  border:none;
  color:var(--ink);
  font-family:inherit;
  cursor:pointer;
}
.video-play-mark{
  width:64px;
  height:64px;
  border:1px solid rgba(244,242,236,0.5);
  border-radius:50%;
  background:rgba(19,18,17,0.5);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  position:relative;
  transition:border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}
.video-play-mark::before{
  content:'';
  position:absolute;
  top:50%;
  left:54%;
  transform:translate(-50%,-50%);
  border-left:15px solid var(--ink);
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}
.video-play:hover .video-play-mark{
  border-color:var(--accent);
  background:rgba(255,71,18,0.16);
  transform:scale(1.06);
}
.video-play-label{
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(244,242,236,0.8);
}
.video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  z-index:3;
}


/* Catalogue hidden: an empty dropdown renders as a blank floating panel on
   hover, so suppress it. The Tools pill is a plain link to the coming-soon
   page until products come back. */
.nav-menu:not(:has(a)){display:none;}
.nav-drop:not(:has(.nav-menu a)) .caret{display:none;}