/* ============================================================
   New hero — ported from the Next.js build (Hero.tsx + TeaserReel.tsx).
   All classes are nh- prefixed to avoid collisions with Webflow /
   Splitting.js styles (.char is taken by Splitting).
   Fonts reuse the export's own faces: 'Regestogrotesk' + 'Hawk'.
   ============================================================ */

/* Tokens (colors, spacing, faces) come from tokens.css — loaded before
   this file. --nh-gutter is kept as a local alias because reel.js
   animates against it. */
:root {
  --nh-gutter: var(--dn-gutter);
}

/* ---- Section shell ------------------------------------------------ */
/* A plain in-flow section — it scrolls away normally (no peel). The reveal now
   lives at the cases→dossier hand-off (the cases lifts to uncover the doc). */
.nh-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #fff;
  color: #000;
  font-family: var(--dn-font-sans);
}

/* ---- Cases (embedded experiment) ---------------------------------- */
/* The section is tall to give the pinned thread its scroll range. The iframe
   sticks to the viewport (behind the fixed hero, z 5) so the peel reveals it,
   then unpins at the bottom so the next section flows up over it. */
.cases-embed {
  position: relative;
  background: #000;            /* shows through the peel + behind the iframe */
}
#cases-scroll {
  height: 800vh;               /* peel + thread scrub + resolve + curtain + tail */
}
#cases-frame {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100svh;
  border: 0;
}

/* Outro curtain — the thread's red, grown from a thin center line to full
   bleed as the section ends, handing into the (same red) Process section.
   Above the peeled hero (z 5), below the persistent nav (z 50). JS drives the
   clip-path + visibility (cases.js). */
/* Process section — ARCHIVED. Replaced in the flow by the dossier document,
   which now arrives directly after cases. Kept in the markup (reversible) but
   removed from the layout; the base red below is retained for if it returns. */
#procces-section { display: none; background-color: #e72b25; }

#cases-outro {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  z-index: 6;
  background: #e72b25;                 /* == .section.is-color (Process) */
  clip-path: inset(50% 0 50% 0);       /* collapsed to a center line at rest */
  visibility: hidden;
  pointer-events: none;
  will-change: clip-path;
}

/* ---- Persistent nav ----------------------------------------------- */
/* Fixed above everything and blended with `difference` so the links read
   as black over the white hero and flip to white over the dark cases
   section revealed by the peel. Sits outside .nh-hero → never peels. */
/* Spans the full width so the right rail can sit on the 11th column of the
   Figma 12-col grid (left:83.33% at 1440). Grid, so both groups share one row. */
.nh-nav-fixed {
  position: absolute;          /* not fixed for now — nav scrolls away with the hero */
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding: var(--nh-gutter);
  color: #fff;                 /* difference source: white → black on white bg */
  mix-blend-mode: difference;
  pointer-events: none;        /* container is inert; only links are clickable */
}
.nh-nav-fixed a,
.nh-nav-fixed button { pointer-events: auto; }

.nh-nav-cols { grid-column: 1 / span 4; }

/* ---- Right rail: work-with-us · availability · copy email ---------- */
/* WIP — hidden on the live domain until the alignment is signed off; the head
   script adds .dn-wip on localhost / ?wip. */
html:not(.dn-wip) .nh-nav-right { display: none; }

/* Figma 1715-7892 puts the marks column at left calc(83.333% - 11px) and the
   labels at calc(87.5% - 13px) — i.e. measured off the VIEWPORT, not off the
   nav's padded content box, so it's positioned rather than grid-placed. */
.nh-nav-right {
  position: absolute;
  top: var(--nh-gutter);
  left: calc(83.333% - 11px);
  display: flex;
  gap: 20px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 0.92;
}
.nh-nav-right ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nh-nav-right .nh-nav-marks { min-width: 38px; }
.nh-nav-right a,
.nh-copy-email {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}
.nh-nav-right a:hover,
.nh-copy-email:hover { opacity: 0.6; }
/* The copy widget is a button so it is keyboard-operable, but must read as the
   surrounding nav type — strip every UA button style. */
.nh-copy-email {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  text-transform: inherit;
  line-height: inherit;
  cursor: pointer;
}

.nh-nav-cols {
  display: flex;
  gap: 1rem;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 0.92;
}

.nh-nav-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.nh-nav-cols a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}
.nh-nav-cols a:hover { opacity: 0.6; }

.nh-nav-annot { user-select: none; }
.nh-nav-sf { display: inline-block; height: 0.8em; width: auto; vertical-align: -0.08em; }
.nh-annot-sf {
  font-family: var(--dn-font-annot);
  font-weight: 510;
}

/* ---- Center stack: motion logo + intro paragraph beneath it -------- */
/* Figma 1715-7892 centres the paragraph under the walking figures (it used to
   sit bottom-left under the wordmark). */
.nh-logo-area {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.5rem;
}
.nh-logo {
  position: relative;
  width: 6rem;            /* WV-9: the walking figures read too small */
  aspect-ratio: 1 / 1;
}
@media (min-width: 768px) {
  .nh-logo { width: 7.75rem; }
}
.nh-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

/* ---- Wordmark + rail ---------------------------------------------- */
.nh-hero-bottom {
  display: flex;
  flex-direction: column;
  padding: 0 var(--nh-gutter) 2rem;
}

/* Strategy · Driven · Design over a hairline, directly above the wordmark.
   Grid (not space-between) so "Driven" lands on the true centre regardless of
   how wide the two outer words are. */
.nh-hero-rail {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  margin: 0 0 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 0.92;
}
.nh-hero-rail span:last-child { text-align: right; }

.nh-wordmark-wrap { width: 100%; }

.nh-wordmark {
  margin: 0;
  font-family: var(--dn-font-sans);
  font-weight: 500; /* Regesto Medium per Figma */
  font-size: clamp(4rem, 14vw, 16rem); /* pre-fit default; JS refines */
  line-height: 0.9;
  /* Tracking (-0.02em) + kerning are baked into per-slot margins by
     wordmark.js — CSS letter-spacing does not reach the inline-block
     slots, so declaring it here would do nothing (or double-count in
     browsers that do apply it). Keep at 0. */
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  display: block;
}

.nh-wordmark-inner {
  display: inline-block;
  white-space: nowrap;
}

.nh-wordmark .nh-char {
  display: inline-block;
  will-change: transform;
}

.nh-wordmark .nh-morph-letter { cursor: pointer; }

.nh-hero-para {
  margin: 0;             /* centred under the motion logo (Figma 1715-7892) */
  max-width: 333px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 0.9;
  opacity: 0; /* revealed by JS; forced visible on reduced-motion */
}

/* ---- Mobile nav (Figma 1587-7457) — hidden on desktop ------------- */
.nh-mnav { display: none; }

/* ===================================================================
   MOBILE HERO (Figma 1587-7457): logo · contact · Menu nav, centered
   tagline, centered motion logo, big "DNRMLZD" wordmark + paragraph.
   =================================================================== */
/* NB: this Webflow export scales the root font-size with the viewport (1.111vw),
   so 1rem ≈ 4px at 393px wide — the mobile hero uses fixed px, not rem. */
@media (max-width: 640px) {
  .nh-nav-fixed { display: none; }   /* desktop links + right rail off */

  /* [Menu] · [Start Work] (Figma 1715-7891) — replaces the old logo/contact/Menu
     row; the drawer (js/mobile-menu.js) still hangs off .nh-mnav-menu. */
  .nh-mnav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 32px 16px 0;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 0.92;
  }
  .nh-mnav-menu {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    line-height: inherit;
    cursor: pointer;
  }
  .nh-mnav-work { color: inherit; text-decoration: none; }

  /* Motion logo: Figma 74px, on the true vertical centre of the frame. */
  .nh-logo { width: 88px; }   /* WV-9 kept the figures a touch larger than Figma */
  .nh-logo-area { gap: 24px; }

  .nh-hero-para { max-width: 333px; }

  /* Figma 1715-7891 (393×852): 16px gutters, rail + hairline above DNRMLZD.
     The glyph slots hang ~54px below the h1 line box (line-height .9 on a
     display size), so the bottom inset has to clear that or the letters clip. */
  .nh-hero-bottom { padding: 0 16px 56px; }
  .nh-hero-rail {
    margin-bottom: 8px;
    padding-bottom: 6px;
  }
}

/* ---- Teaser reel (fixed, WebGL cloth) ----------------------------- */
.nh-reel-section {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: flex;
  padding: 0 0 1.5rem var(--nh-gutter);
  pointer-events: none;
}

.nh-reel-row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}

.nh-reel {
  position: relative;
  width: 14rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  pointer-events: auto;
}

.nh-reel canvas {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1.18);
}

.nh-reel video {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.nh-reel-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-bottom: 0.25rem;
}

/* Mute label that follows the pointer inside the reel (desktop only) */
.nh-reel-mute {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: 0;
  background: #111;
  color: #fff;
  font: 400 10px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  pointer-events: none;
  user-select: none;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.2s ease;
}
@media (pointer: fine) {
  .nh-reel:hover .nh-reel-mute { opacity: 0.95; }
}
@media (pointer: coarse) {
  .nh-reel-mute {
    left: 50%;
    bottom: 8px;
    top: auto;
    transform: translateX(-50%);
    opacity: 0.95;
  }
}

/* Scroll spacer that drives the reel expand + fold */
#nh-reel-spacer {
  position: relative;
  height: 120vh;
}

/* ---- A11y --------------------------------------------------------- */
.nh-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;
}

@media (prefers-reduced-motion: reduce) {
  .nh-hero-para { opacity: 1; }
}

/* ============================================================
   Dossier document — #about-section (Figma 1613-7413).
   A redacted paper page that "lands on the table" on scroll.
   ============================================================ */
.dn-dossier {
  position: relative;
  z-index: 2;
  /* Pulled up (margin set by cases-new.js from the pin geometry) so the doc PINS
     at the reveal-start and sits behind the cases' last screen; the cases pin
     (z 4) then lifts off it while the document rotates in. */
  /* BLACK table (editorialnew): the white paper reads as a sheet on it. The paper
     starts a centred miniature and scales up + rotates in (dossier.js), stopping
     short of the edges so black table shows on the sides. */
  background: #000;
  color: #000;
  overflow: visible;                       /* don't clip the tilted sheet at the section
                                             box — that hard rectangular cut is the paper
                                             getting chopped as it leans past its bounds */
  /* perspective lives on the sheet itself (dossier.js transformPerspective) so it
     applies to the sheet's own rotateX — an ancestor perspective would be flat-
     tened by .container and do nothing. */
}
/* Kill the Webflow .section.is-cursor min-height (230rem ≈ 4 screens of empty
   scroll, left over from the old layout). The 200vh sheet defines the height.
   Also beat the Webflow overflow:clip (it chops the tilted sheet at the box). */
.section.is-cursor.dn-dossier { min-height: 0; overflow: visible; }
.dn-dossier .text-body::before {            /* paper grain — ON the sheet (no blend: perf) */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.dn-dossier .container { max-width: none; width: 100%; padding: 0; display: block; }
/* The sheet is exactly 200vh; elements are placed at their Figma positions:
   top = figma_y / 9.26 (vh), left/width = figma_x / 14.4 (%). Frame 1440×1852. */
.dn-dossier .text-body {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 200vh;
  padding: 0;
  background: #fff;                        /* the paper sheet — pure white on the black table */
  transform-origin: 50% 0%;
  will-change: transform;
  backface-visibility: hidden;
  font-family: var(--dn-font-sans);
  font-weight: 500;
  color: #000;
}
.dn-doc-s1, .dn-doc-s2 { display: contents; }   /* children position against .text-body */

/* header row (Figma top 32) */
.dn-doc-head {
  position: absolute; top: 3.5vh; left: 0; width: 100%; z-index: 3;
  font-size: 18px; line-height: 0.9;                 /* same size as legend + grid */
}
.dn-doc-head span { position: absolute; top: 0; white-space: nowrap; }
.dn-doc-tag { left: 2.5%; }
.dn-doc-mid { left: 38.4%; }
.dn-doc-page { right: 2.22%; }

/* heading — right block (Figma top 115, left 553, w797, 72px) */
.dn-doc-heading {
  position: absolute; top: 12.4vh; left: 38.4%; width: 55.3%; margin: 0; z-index: 2;
  font-size: clamp(2rem, 5vw, 5rem); line-height: 1; letter-spacing: -0.02em;
  font-weight: 500;                                  /* WV-24: medium */
}

/* strategy legend — left gutter, full-width top rule (Figma rule 309, rows 315–415) */
.dn-legend {
  position: absolute; top: 33.4vh; left: 2.5%; width: 35.9%; z-index: 2;
  font-size: 18px; line-height: 0.9;
}
.dn-legend::before {                          /* full-width rule out to the right margin */
  content: ""; position: absolute; top: -1px; left: 0; width: 265%; border-top: 1px solid #000;
}
.dn-leg-row {
  display: grid; grid-template-columns: 44% 1fr auto; align-items: center; gap: 0.5rem;
  padding: 5px 0; border-bottom: 1px solid #000;
  /* rows are <button>s (clickable) — strip the native chrome */
  width: 100%; margin: 0; appearance: none; -webkit-appearance: none;
  background: none; border-top: 0; border-left: 0; border-right: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.dn-leg-label { display: inline-block; white-space: nowrap; opacity: 0.5; transition: opacity 0.18s ease; }
.dn-leg-row:hover .dn-leg-label { opacity: 0.85; }
.dn-leg-row.is-active .dn-leg-label { opacity: 1; }
/* bottom-up letter roll on hover: each letter is a tight window over two stacked
   copies of itself; on hover the pair slides up one line so a fresh copy rolls
   in, staggered left→right. The window is exactly one line tall — the lower copy
   stays fully clipped in the idle state (no ghost showing through). */
/* WV-15: window is 1.24em (not 1em) so glyph descenders (g, y, p) aren't clipped
   by the mask; the two stacked copies are each 1.24em so only one still shows. */
.dn-ltr { display: inline-block; overflow: hidden; height: 1.24em; line-height: 1.24;
  vertical-align: bottom; }
.dn-ltr-in { display: flex; flex-direction: column; will-change: transform;
  transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--i) * 14ms); }
.dn-ltr-in > span { display: block; height: 1.24em; line-height: 1.24; }
.dn-leg-row:hover .dn-ltr-in { transform: translateY(-1.24em); }
@media (prefers-reduced-motion: reduce) { .dn-ltr-in { transition: none; } }
/* dot marks the active row only */
.dn-leg-dot { width: 6px; height: 6px; border-radius: 50%; background: #000; opacity: 0; }
.dn-leg-row.is-active .dn-leg-dot { opacity: 1; }

/* deliverables grid (Figma rows 561/703, left 263, w1145, cells 190×143) */
.dn-grid {
  position: absolute; top: 60.6vh; left: 18.26%; width: 79.52%; z-index: 2;
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.dn-cell {
  border: 1px solid #000; margin: 0 -1px -1px 0;   /* collapse shared borders */
  aspect-ratio: 190 / 143;
  padding: 5px 7px 6px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 18px; line-height: 0.9;
}

/* redacted paragraph — screen 2 (Figma top 1093, full width, indent 518) */
.dn-dossier .text-overlay-block {
  position: absolute; top: 118vh; left: 2.5%; right: 2.22%; z-index: 2; margin: 0; color: #000;
}
.dn-secure.js-fill-text {
  text-align: justify;
  text-indent: 36%;
  letter-spacing: -0.02em;
}

/* Dossier — MOBILE (Figma 1658-17244): a plain WHITE document, stacked in normal
   flow. No black table, no rotation (dossier.js skips the pin at <=767). */
@media (max-width: 767px) {
  /* -1px so the white doc overlaps the white cases above it — kills the hairline
     seam the two flush sections render at a sub-pixel boundary. */
  .dn-dossier, .section.is-cursor.dn-dossier { background: #fff; min-height: 0; margin-top: -1px; }
  .dn-dossier .text-body {
    position: static; transform: none !important; width: 100%; min-height: auto;
    padding: 22px 12px 44px; display: flex; flex-direction: column; color: #000;
  }
  .dn-dossier .text-body::before { display: none; }   /* drop the paper grain */

  .dn-doc-s1, .dn-doc-s2 { display: block; position: static; }

  .dn-doc-head {
    position: static; width: 100%; display: flex; justify-content: space-between;
    gap: 8px; font: 400 13px/1 var(--dn-font-sans); margin-bottom: 34px;
  }
  .dn-doc-head span { position: static; }
  .dn-doc-mid { display: none; }

  .dn-doc-heading {
    position: static; left: auto; width: auto; margin: 0 0 24px 22%;
    font: 500 26px/1.06 var(--dn-font-sans); letter-spacing: -0.01em;   /* WV-24: medium */
  }

  .dn-legend { position: static; width: 100%; margin: 0 0 30px; font-size: 14px; }
  .dn-legend::before { width: 100%; }
  .dn-leg-row { grid-template-columns: 30% 1fr auto; padding: 7px 0; font-size: 14px; }

  /* grid: shift left 1px + drop the first column's left padding so the cell TITLES
     line up on the same vertical as the header / legend (all at the 12px margin). */
  .dn-grid {
    position: static; grid-template-columns: repeat(3, 1fr); margin: 0 0 32px -1px;
    width: calc(100% + 1px);
  }
  .dn-cell { min-height: 92px; aspect-ratio: auto; padding: 8px 6px; font-size: 14px; }
  .dn-cell:nth-child(3n+1) { padding-left: 0; }

  .dn-dossier .text-overlay-block { position: static; top: auto; left: auto; right: auto; }
  .dn-secure.js-fill-text {
    text-indent: 2.5em; text-align: justify;
    font-size: 27px; line-height: 1.3; letter-spacing: -0.02em;   /* WV-7: editorial size (~26-28) */
  }
  /* WV-7: static black redaction bars on the classified phrases (no WebGL on
     mobile). Same words covered as desktop, box-decoration-break so multi-line
     phrases get a bar per line. */
  .dn-secure--static .dn-classified {
    background: #0b0b0b; color: transparent;
    border-radius: 2px; padding: 0 0.1em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
}

/* ===================== Founders section — Figma 1614-7193 =====================
   Work Mode text + clock move to the TOP-RIGHT; the three principles become a
   divided BOTTOM row (label · paragraph), all uppercase. Positions are the Figma
   frame (1440×827) mapped into the section: x is relative to .founder-body (which
   is the container's 1376px content — its left already sits at Figma's 32px
   margin), y is a % of the 100vh section. Scoped to .blur-stiki-section only. */
.blur-stiki-section .founder-body { position: relative; }
.blur-stiki-section .found-up_block { position: static; display: block; }
.blur-stiki-section .found-time-contant > .container { max-width: none; width: 100%; padding: 0; height: 100%; }

/* Top-right: Work Mode block (uppercase, 12px / .92). Figma x1073 y34 w333. */
.blur-stiki-section .time-body {
  position: absolute; top: 4.1%; left: 75.65%; right: auto;
  width: 24.2%; max-width: none; padding: 0; z-index: 4;
}
.blur-stiki-section .time-body .gap-so-little { grid-row-gap: 2px; align-items: flex-start; }
.blur-stiki-section .time-body .text-small {
  font-size: 14px; line-height: 1.05; text-transform: uppercase;   /* WV: clock 14px like the body */
  display: block; overflow: visible;
}
.blur-stiki-section .time-body .null-gap.is-hor { display: flex; grid-column-gap: 4px; margin-top: 2px; }
.blur-stiki-section .time-body .null-gap.is-hor .text-small:last-child { opacity: 0.4; }

/* Clock, just below the work-mode text. Figma x1073 y107, 81px box. */
.blur-stiki-section .clock-block {
  position: absolute; top: 12.94%; left: 75.65%; z-index: 4;
  /* keep align-items:center (Webflow default) — the time sits centered in the
     tick frame; flex-start shoved it to the left edge (the clock "bug"). */
}
.blur-stiki-section .clock-block .text-small { font-size: 14px; line-height: 1.2; }

/* Principles → divided bottom row. Divider (Figma y485) is each item's top border;
   text (y500) sits below. 3 columns at Figma x32 / x553 / x1073. */
.blur-stiki-section .founder-contant {
  position: absolute; left: 0; right: 0; top: 58.6%; height: auto;
  display: block; padding: 0; align-items: stretch; z-index: 4;
}
.blur-stiki-section .founder-contant-item {
  position: absolute; top: 0; width: 24.35%;
  grid-column-gap: 0; align-items: flex-start;
  border-top: 1px solid rgba(255, 255, 255, 0.35); padding-top: 0.85rem;
}
.blur-stiki-section .founder-contant-item:nth-child(1) { left: 0; }
.blur-stiki-section .founder-contant-item:nth-child(2) { left: 37.86%; }
.blur-stiki-section .founder-contant-item:nth-child(3) { left: 75.65%; }
.blur-stiki-section .founder-contant-item > .text-small {   /* the label */
  width: 43%; flex: none; font-size: 14px; line-height: 1.05;   /* WV: 12->14; widened so [Craftsmanship] fits at 14px */
  text-transform: uppercase; display: block; overflow: visible;
}
.blur-stiki-section .found-text_max {                        /* the paragraph column */
  min-width: 0; max-width: none; width: 57%;
}
.blur-stiki-section .found-text_max .text-small {
  font-size: 14px; line-height: 1.16; text-transform: none;   /* body copy — 14px like the rest (WV-12) */
  display: block; overflow: visible;
}

/* Names row pinned to the bottom (Figma y724). */
.blur-stiki-section .founder-hed_block {
  position: absolute; left: 0; right: 0; bottom: 3.87%; z-index: 4;
}

/* Photo is full-bleed — break it out of the container's side padding (it was
   inset to the 1376 content, leaving dark strips at the viewport edges). */
.blur-stiki-section .found-abs-image_wrap {
  left: 50%; right: auto; width: 100vw; transform: translateX(-50%);
}
/* Fade the photo's TOP edge into black so it blends out of the dossier section
   above it (no hard seam). Over the image, under the clock/text (a sibling). */
.blur-stiki-section .found-abs-image_wrap::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40vh;
  background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 42%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none; z-index: 2;
}

/* Clearance tail between the founders and the process section: keeps the process
   section's raised (-50vh) blur buffer from reaching up over ROMAN & SAM at rest.
   Dark (#161616) so it reads as continuous with the founders + process. */
.blur-stiki-section .dn-founders-tail { height: 60vh; background: #161616; }

/* ---- Founders — MOBILE (Figma 1195-6941) ---------------------------------
   Clock + mode copy top-left; ONE principle at a time with ← → arrows to rotate;
   ROMAN & SAM pinned bottom. Mode + principle body copy in NORMAL case. */
@media (max-width: 767px) {
  /* clock → top-left */
  .blur-stiki-section .clock-block { top: 20px; left: 16px; right: auto; }
  .blur-stiki-section .clock-block .text-small { font-size: 15px; }

  /* mode copy → below the clock, top-left, normal case */
  .blur-stiki-section .time-body { top: 118px; left: 16px; right: auto; width: 64%; }
  .blur-stiki-section .time-body .text-small { text-transform: none; font-size: 14px; line-height: 1.3; }
  .blur-stiki-section .time-body .null-gap.is-hor { margin-top: 7px; }

  /* principles → one at a time; [label] left + body right, arrows under the label */
  .blur-stiki-section .founder-contant { top: auto; bottom: 172px; left: 12px; right: 12px; display: block; }
  .blur-stiki-section .founder-contant-item {
    position: static; width: auto; display: none;
    grid-template-columns: 92px 1fr; column-gap: 14px;
  }
  .blur-stiki-section .founder-contant-item.is-active { display: grid; }
  .blur-stiki-section .founder-contant-item > .text-small {           /* label (kept uppercase) */
    grid-column: 1; grid-row: 1; width: auto; font-size: 14px;
  }
  .blur-stiki-section .found-text_max { grid-column: 2; grid-row: 1 / 3; width: auto; }
  .blur-stiki-section .found-text_max .text-small {                   /* body → normal case */
    text-transform: none; font-size: 14px; line-height: 1.3;
  }
  .dn-found-arrows { grid-column: 1; grid-row: 2; display: flex; gap: 20px; margin-top: 16px; align-self: start; }
  .dn-found-arrow { width: 22px; height: 22px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
  .dn-found-arrow svg { display: block; width: 100%; height: 100%; }

  /* ROMAN & SAM → bottom */
  .blur-stiki-section .founder-hed_block { bottom: 22px; }
}

/* Process step labels are clickable anchors (jump to that card). Hover feedback
   (hovered white, others muted to 50%) is handled in JS via opacity, since that
   opacity is GSAP-driven. */
.stiki-section .tabs-item { cursor: pointer; }

/* ================= Homepage cases — Figma 1195-6657 =================
   Pinned, scroll-driven. Light/white. Positions map the 1440×890 frame into
   the 100vh pin (x = figma_x/1440, y = figma_y/890). */
/* z 4 so the white cases paints ABOVE the black dossier (z 2) during the reveal:
   the dossier is pulled up 100vh to sit behind the cases' last screen, and the
   pin then slides up (cases-new.js) to uncover it. */
/* The white lives on the PIN, not the section — so once the pin slides up the
   section box is transparent and the black dossier (z 2) shows through it. */
.dn-cases { position: relative; z-index: 4; color: #101010; }
.dn-cases-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #fff; will-change: transform; }

/* case list — top-right (Figma x321 y56 w1087). Rows: 42px name + divider. */
.dn-cases-list {
  /* WV-16: left edge shares the dossier's rule-line column below (~33.4%) so the
     two sections align. Description/services stay in the far-left gutter. */
  position: absolute; left: 33.4%; top: 6.3%; width: 64.3%;
  list-style: none; margin: 0; padding: 0;
}
.dn-case-row { position: relative; padding-bottom: 16px; }
.dn-case-row::after {            /* divider 8px below the name (Figma lines) */
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
  background: rgba(0, 0, 0, 0.14);
}
.dn-case-link { display: block; text-decoration: none; color: inherit; }
.dn-case-name, .dn-case-fill {
  font-family: var(--dn-font-sans); font-weight: 500; font-size: 42px;
  line-height: 0.9; white-space: nowrap; display: block;
}
.dn-case-name { color: rgba(16, 16, 16, 0.4); transition: color 0.25s ease; }  /* inactive/dim */
.dn-case-row.is-active .dn-case-name { color: #101010; } /* active — solid */
/* Hover feedback on the name links — they were dead-grey with no response. */
.dn-case-row:not(.is-active):hover .dn-case-name { color: rgba(16, 16, 16, 0.75); }
/* black fill = a copy of the word, clipped from the right (JS drives the inset).
   Sized to the WORD itself (shrink-to-content), so 0→100% fills exactly the word. */
.dn-case-fill {
  position: absolute; left: 0; top: 0; width: max-content; color: #101010;
  pointer-events: none; clip-path: inset(0px 100% 0px 0px);
}

/* WV-10: description + services SWAPPED (services now top, description bottom) and
   unified to 14px — the services were 18px (read as more important) yet sat lower.
   overflow-hidden masks the reveal slide-up; padding-bottom gives descenders room
   so the mask doesn't clip glyph tails (WV-15). */
.dn-cases-services {
  position: absolute; left: 2.22%; top: 37.98%; width: 12%; overflow: hidden;
  font: 500 14px/1.3 var(--dn-font-sans); color: #000;
  padding-bottom: 0.18em;
}
.dn-cases-desc {
  position: absolute; left: 2.22%; top: auto; bottom: 4.6%; width: 18%; margin: 0; overflow: hidden;
  font: 400 14px/1.3 var(--dn-font-sans); color: #101010;
  padding-bottom: 0.18em;
}
.dn-reveal-inner { display: block; will-change: transform; }
/* cover video — bottom-right (Figma x318 y338 w1090 h545) */
.dn-cases-cover {
  position: absolute; left: 33.4%; top: 37.98%; width: 64.3%; height: 61.24%;
  overflow: hidden; background: #000;
}
.dn-case-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;   /* revealed via clip-path on activate (JS) */
}

/* ===== Cases — MOBILE (Figma 1195-6840) ======================================
   Plain vertical stack, no pin/reveal. cover · name+services · divider · desc.
   Built by buildMobile() in cases-new.js; the pin becomes a static column. */
@media (max-width: 767px) {
  .dn-cases.is-mobile { height: auto !important; background: #fff; z-index: auto; }
  .dn-cases.is-mobile .dn-cases-pin {
    position: static; height: auto; overflow: visible; transform: none;
    background: #fff; padding: 82px 12px 64px;
  }
  .dn-mhead {
    font: 500 14px/1.1 var(--dn-font-sans); letter-spacing: 0.01em;
    color: #101010; margin-bottom: 46px;
  }
  .dn-mcase { display: block; text-decoration: none; color: inherit; margin-bottom: 74px; }
  .dn-mcase:last-child { margin-bottom: 0; }
  .dn-mcover {
    position: relative; aspect-ratio: 351 / 176;   /* square corners — no rounding */
    overflow: hidden; background: #000;
  }
  .dn-mcover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .dn-mmeta { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-top: 14px; }
  .dn-mname { font: 500 22px/1 var(--dn-font-sans); color: #101010; }
  .dn-mserv { flex: 0 1 auto; max-width: 44%; text-align: right; font: 400 14px/1.3 var(--dn-font-sans); color: #101010; }
  .dn-mdesc {
    margin: 23px 0 0; padding-top: 22px; border-top: 1px solid rgba(16, 16, 16, 0.25);
    font: 400 14px/1.4 var(--dn-font-sans); color: #101010;
  }
}

/* Cookie consent banner → bottom-RIGHT of the hero (was centred). Finsweet
   controls its visibility (shows until the visitor accepts/denies). */
/* WV-22: repositioned to bottom-right, which made the pill shrink-to-fit, so
   space-between had no room and the label + buttons jammed together. A fixed gap
   spaces them regardless of width; a touch more horizontal padding too. */
.cookie-block { left: auto; right: 1.5rem; margin: 0; gap: 1.25rem; padding: 0.8rem 1.35rem; }
.cookie-block .is-link { white-space: nowrap; }

/* WV-27: the footer's three rows were flex space-between, so each right-side item
   (email / © All Rights / menu) landed at a content-dependent x (606 / 574 / 615).
   A 2-column grid pins the right column to one 50% edge so they all line up. */
@media (min-width: 480px) {
  .footer-up_block, .footer-text_block, .footer-link_block {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 0;
  }
  /* kill per-block left padding so the right column starts on one line */
  .footer-link_block { padding-left: 0; }
  .footer-text_block > .footer-text_wrap { padding-left: 0; }
}

/* WV: the insights ("We write sometimes") head was double-indented — .slider-body
   AND its inner .container each add a 27px gutter, landing the title/description at
   54px while the rest of the page's far-left content sits at one 27px gutter. Drop
   the inner container gutter so it lines up with cases / founders / footer. */
#insight-section .slider-hed-contant .container { padding-left: 0; }

/* WV: unify small type — the Webflow small-label class was 12px on desktop; bump
   to 14px to match body. Desktop-scoped (mobile already renders ~14px via its own
   vw rule, so we leave it). Nav annotations get 14px so they match the nav links. */
@media (min-width: 768px) { .text-small { font-size: 14px; } }
.nh-nav-annot { font-size: 14px; }
/* WV-31: the newsletter input + Subscribe button used .875rem, which resolves to
   ~18px against this site's fluid 1.111vw root — bigger than the 14px body/label
   beside them. Pin them to 14px on desktop to match, like .text-small above. */
@media (min-width: 768px) { .text-field, .sbmt-btn { font-size: 14px; } }

/* ===== Mobile menu drawer (homepage) — injected by js/mobile-menu.js ======== */
.nh-mdrawer {
  position: fixed; inset: 0; z-index: 9000;
  background: #fff; color: #101010;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--nh-gutter);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.32s ease, transform 0.32s ease, visibility 0s 0.32s;
}
.nh-mdrawer.is-open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.nh-mdrawer-close {
  position: absolute; top: var(--nh-gutter); right: var(--nh-gutter);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: #101010; cursor: pointer;
}
.nh-mdrawer-close svg { width: 24px; height: 24px; }
.nh-mdrawer-nav { display: flex; flex-direction: column; gap: 0.35rem; }
.nh-mdrawer-nav a {
  display: flex; align-items: baseline; gap: 0.7rem;
  font-family: var(--dn-font-sans); font-size: 2.4rem; line-height: 1.08;
  font-weight: 500; letter-spacing: -0.02em; color: #101010; text-decoration: none;
}
.nh-mdrawer-i { font-size: 0.78rem; font-weight: 400; color: rgba(16, 16, 16, 0.4); }
.nh-mdrawer-foot {
  position: absolute; left: var(--nh-gutter); bottom: var(--nh-gutter);
  display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem;
}
.nh-mdrawer-foot span { color: rgba(16, 16, 16, 0.5); }
.nh-mdrawer-foot a { color: #101010; text-decoration: none; }
html.nh-mdrawer-lock, html.nh-mdrawer-lock body { overflow: hidden; }
@media (min-width: 768px) { .nh-mdrawer { display: none !important; } }

/* ===== Insights — vinyl record slides out of the cover on hover (Figma 1652-17016) */
/* Mobile: size to the viewport. The site's fluid rem collapses to ~4px here, so
   the desktop 24.6rem became a ~100px cover (WV-8, "too small"). Desktop keeps the
   80% rem sizing — smaller sleeve leaves room for the hover record + click fly-out. */
.dn-cover-wrap { position: relative; width: min(76vw, 340px); height: min(76vw, 340px); flex: none; }
@media (min-width: 768px) {
  .dn-cover-wrap { width: 24.6rem; height: 24.6rem; }
}
.dn-cover-wrap .blog-image_contant {
  position: relative; z-index: 2; width: 100%; height: 100%;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.dn-vinyl {
  position: absolute; top: 4%; left: 4%; width: 92%; height: 92%; z-index: 1;
  pointer-events: none; will-change: transform;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.dn-vinyl-disc {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.10), transparent 55%),
    repeating-radial-gradient(circle at 50% 50%, #0d0d0d 0 1.5px, #1c1c1c 1.5px 3px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5), inset 0 0 60px rgba(0,0,0,0.7);
  animation: dn-vinyl-spin 3s linear infinite; animation-play-state: paused;
}
.dn-vinyl-label {
  width: 32%; height: 32%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #0a0a0a 0 8%, #e72b25 9% 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
}
@keyframes dn-vinyl-spin { to { transform: rotate(1turn); } }
.is-abs-blog:hover .dn-vinyl { transform: translateX(40%); }
.is-abs-blog:hover .blog-image_contant { transform: translateX(-6%); }
.is-abs-blog:hover .dn-vinyl-disc { animation-play-state: running; }