/* ==================================================================
   K2 Studio — shared stylesheet
   Linked by every page. Edit here once instead of in each file: the
   case page had already drifted out of sync when this was inlined.
   ================================================================== */

/* ==================================================================
   K2 STUDIO
   Near-black ground, one saturated orange, a distinctive grotesk at
   real scale, mono for the small technical type. No section numbers.
   No mountain apparatus. Contrast comes from one full-bleed panel.
   ================================================================== */

:root{
  --void:   #08080A;
  --void-3: #15151B;
  --bone:   #EFEDE8;
  --bone-2: rgba(239,237,232,.68);
  --bone-3: rgba(239,237,232,.44);
  --hair:   rgba(239,237,232,.15);
  /* darkens the ground behind the text-dense sections that sit on the
     contour field. Dark on purpose, not --glass: --glass is a bone tint and
     would lighten the ground behind bone text. One number to tune. */
  --scrim:  rgba(8,8,10,.45);
  /* the calmer sections dim the contour field rather than blanking it — at
     full opacity they read as dead black. Raise toward 1 for flatter. */
  --ground: rgba(8,8,10,.80);
  /* how dark the backdrop sits behind the content. One number to tune.
     Was rgba(8,8,10,.55) before the flat/curved grounds existed; the flat
     sections now do that job for the dense parts of the page, so the veil
     is off. Put the value back to bring it globally darker again. */
  --veil:   transparent;
  --hair-2: rgba(239,237,232,.07);

  --orange: #FF6B2C;
  --orange-2:#FF9260;

  /* ---------- DISPLAY FACE: change these three lines only ----------
     Both pages you called stylish (index.html, segfault-and-purr.html) used
     serif display faces, and three grotesks have now been rejected — so the
     default is a serif: Prata, a high-contrast Didone with proper
     Cyrillic. Four other candidates (Playfair Display, Cormorant
     Garamond, Golos Text, Commissioner) used to be loaded alongside
     it while the face was being chosen; the font link now fetches
     only what is used, so trying another one means adding it back
     to the <link> on every page as well as changing --disp here.

     --disp-w exists because a single-weight face like Prata would otherwise
     get a synthesised fake bold, which looks smeared. */
  --disp: "Prata", Georgia, serif;
  --disp-w: 400;
  --body: "Onest", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* glass panels — tune here, used by every panel on the page */
  --glass:    rgba(239,237,232,.045);
  --glass-br: rgba(239,237,232,.085);
  --glass-blur: blur(14px) saturate(120%);
  --r-btn: 10px;   /* buttons: slightly rounder than the 6px panels */

  --pad: clamp(20px,5vw,80px);
  --maxw: 1400px;
  --ease: cubic-bezier(.22,1,.36,1);
  --slow: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--void); }
body{
  /* no background here on purpose: html carries it, so the canvas is painted
     behind everything. If body also had one it would paint as an in-flow block
     background — which lands ABOVE the z-index:-1 .atmos layer and hides it. */
  margin:0; color:var(--bone);
  font-family:var(--body); font-weight:400;
  font-size:clamp(15.5px,1.05vw,17.5px); line-height:1.62; letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--orange); color:var(--void); }

.wrap{
  width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  position:relative; z-index:2;
}
.sec{ position:relative; padding:clamp(34px,4.2vw,68px) 0; }
.sec + .sec{ border-top:1px solid var(--hair-2); }

/* atmosphere: one warm glow, one grain layer. Nothing else. */
/* one fixed atmosphere group behind the entire document. z-index:-1 keeps
   it above the page background but below all content. */
.atmos{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
/* painted last inside the group, so it darkens the glow and the contour field
   below it without touching anything in the document flow above. */
.atmos::after{ content:""; position:absolute; inset:0; background:var(--veil); }
.atmos-glow{
  /* much weaker than before: the lines layer now supplies the warmth, and
     stacking a broad warm radial on top of it turned the page brown. */
  position:absolute; top:-30vh; left:50%; transform:translateX(-50%);
  width:min(1500px,150vw); height:110vh;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,107,44,.05), transparent 70%);
  filter:blur(12px);
}
.atmos-cold{
  position:absolute; bottom:-40vh; left:-10vw; width:70vw; height:80vh;
  background:radial-gradient(50% 50% at 50% 50%, rgba(134,174,203,.09), transparent 70%);
}

/* ---------- lines.jpg as the contour field ----------
   Deliberately boring CSS, because the clever versions kept breaking:

   - CSS masks with an external image are blocked on a file:// page (Chrome
     treats it as an opaque origin) and the layer silently blanks out.
   - mix-blend-mode depends on the backdrop and stacking context, which made
     it fragile here.

   background-blend-mode is self-contained: it blends this element's OWN two
   background layers and touches nothing else. The gradient is CSS-generated,
   so there is no file to be blocked.

       lines.jpg (white lines on black)  x  orange gradient  =  orange lines
                                        black x colour       =  black

   Rotated 90deg because lines.jpg is portrait (945x2048); covering a
   landscape viewport head-on zooms it ~3.4x and smears the dense areas. */
.lines{ display:none; }
.bg .lines{
  display:block;
  position:absolute; top:50%; left:50%;
  width:100vh; height:100vw;
  transform:translate(-50%,-50%) rotate(90deg);
  /* 90deg on the gradient: the layer is rotated, so this reads top-to-bottom
     on screen — warm at the summit, cooler at the base. */
  background-image:url("/assets/media/lines.jpg"),
    linear-gradient(90deg, #FFAE68 0%, #FF7B33 26%, #E0561C 52%, #7E6A5E 78%, #4E6070 100%);
  background-blend-mode:multiply;
  background-size:cover, cover;
  background-position:center center, center center;
  background-repeat:no-repeat, no-repeat;
  opacity:.60;
}
.bg .lines-bloom{ opacity:.28; filter:blur(6px); }
.grain{
  position:fixed; inset:0; z-index:95; pointer-events:none; opacity:.045;
  mix-blend-mode:overlay;
}

/* ---------- type ---------- */
/* tracking scales with size: tight only where the type is actually large */
h1,h2,h3{ margin:0; font-family:var(--disp); font-weight:var(--disp-w); }
h1{ letter-spacing:-.032em; font-size:clamp(34px,5.6vw,88px); line-height:1.08; }
h2{ letter-spacing:-.022em; font-size:clamp(27px,4.4vw,66px); line-height:1.04; }
h3{
  font-size:clamp(16.5px,1.35vw,21px); line-height:1.24;
  letter-spacing:-.008em; font-weight:var(--disp-w);
}
.or{ color:var(--orange); }
/* the one description style on the site. Every section description, the
   hero paragraphs and the contact note all use it, so nothing is left
   sizing itself independently. */
.lede{
  font-family:var(--body); font-weight:300;
  font-size:clamp(15.5px,1.15vw,18.5px); line-height:1.56; letter-spacing:-.01em;
  color:var(--bone-2); margin:0; max-width:56ch;
}
/* the only section marker: a tracked mono label. No numerals. */
.tag{
  /* was 10-11.5px at .22em tracking and 44% opacity — legible only in theory.
     Bigger, brighter, less tracked. */
  font-family:var(--mono); font-weight:500; font-size:clamp(11.5px,.92vw,13.5px);
  letter-spacing:.15em; text-transform:uppercase; color:rgba(239,237,232,.80);
  display:flex; align-items:center; gap:13px; margin:0 0 clamp(18px,2.4vw,34px);
}
.tag::before{ content:""; width:28px; height:1px; flex:none; background:var(--bone-3); }
.tag b{ font-weight:400; color:var(--bone); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:11px; cursor:pointer; white-space:nowrap;
  font-family:var(--mono); font-weight:500; font-size:clamp(10.5px,.8vw,12px);
  letter-spacing:.14em; text-transform:uppercase;
  padding:17px 27px; border-radius:var(--r-btn);
  background:var(--orange); color:var(--void); border:1px solid var(--orange);
  transition:background .35s, border-color .35s, color .35s,
             transform .45s var(--ease), box-shadow .45s var(--ease);
}
/* v2 hover: the fill stays put and the button lifts into a warm glow. No
   colour flip on either variant — the ghost only lightens its hairline. */
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -10px rgba(255,107,44,.62); }
.btn.ghost{ background:transparent; color:var(--bone); border-color:var(--hair); }
.btn.ghost:hover{ border-color:var(--bone-3); box-shadow:none; }
.btn.sm{
  padding:11px 17px; font-size:clamp(9.5px,.72vw,10.5px);
  border-radius:calc(var(--r-btn) - 2px);
}
.btn .ar{ transition:transform .4s var(--ease); }
.btn:hover .ar{ transform:translateX(5px); }

/* ---------- nav ---------- */
/* v2's scrolled treatment, applied at every scroll position: the atmosphere
   reads through, dimmed to ~28% and blurred, instead of being either fully
   visible (transparent nav) or fully hidden (solid nav). */
.nav{ position:sticky; top:0; z-index:70;
  background:rgba(8,8,10,.72); backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid transparent; transition:border-color .45s; }
.nav.stuck{ border-bottom-color:var(--hair-2); }
.nav-in{
  display:flex; align-items:center; gap:clamp(12px,2.2vw,34px);
  height:clamp(64px,7vw,90px); min-width:0;
}
/* the wordmark is Media/logo.svg, referenced. The text in it is outlined,
   so it carries no font dependency and renders correctly as an <img>. */
.mark{ margin-right:auto; display:flex; align-items:center; flex:none; }
.mark .logo{ height:clamp(19px,1.8vw,26px); width:auto; display:block; }
.nav-links{ display:flex; gap:clamp(11px,1.7vw,28px); min-width:0; }
.nav-links a{
  font-family:var(--mono); font-size:clamp(9.5px,.72vw,10.5px); font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone-3);
  padding:6px 0; position:relative; white-space:nowrap; transition:color .35s;
}
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--orange); transition:width .4s var(--ease); }
.nav-links a:hover{ color:var(--bone); }
.nav-links a:hover::after{ width:100%; }
.lang{ display:flex; align-items:center; gap:2px; flex:none;
  border:1px solid var(--hair); border-radius:999px; padding:3px; }
/* the switch is a link to the other language's URL, and the current one
   is a span rather than a link to itself */
.lang a, .lang span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; padding:5px 10px;
  border-radius:999px;
  background:transparent; border:0; color:var(--bone-3); text-decoration:none;
  transition:background .3s, color .3s;
}
.lang a:hover{ color:var(--bone); }
.lang [aria-current="page"]{ background:var(--orange); color:var(--void); }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  min-height:clamp(580px,86vh,960px);
  padding:clamp(18px,2.4vw,40px) 0 clamp(52px,7vw,116px);
}
.hero > .wrap{ width:100%; }

/* ---------- hero video ----------
   hero.mov is listed first as asked; hero.mp4 is the automatic fallback for
   browsers that will not take a QuickTime container. Dimmed and slightly
   desaturated so it stays a backdrop rather than competing with the type. */
/* the video used to stop at a hard horizontal edge where the next section
   began; this fades it out over the last third so it dissolves into the page */
.hero-v{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:var(--void);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.45) 78%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.45) 78%, transparent 100%);
}
.hero-v video{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:brightness(.40) contrast(1.08) saturate(.72);
}
/* scrim between ridge (z0) and text (z2) so the headline stays crisp
   while the ridge still reads on the right */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(102deg,
    rgba(8,8,10,.90) 0%, rgba(8,8,10,.74) 34%,
    rgba(8,8,10,.34) 60%, rgba(8,8,10,0) 84%);
}
.hero h1{ margin-top:clamp(6px,.9vw,14px); max-width:min(100%,20ch); }
/* the reveal needs overflow:hidden, which shears anything below the line
   box: every descender on the second hero line, in either language.
   Padding the box down and pulling it back gives the glyphs room without
   moving the line. */
.hero h1 .ln{ display:block; overflow:hidden;
  padding-bottom:.16em; margin-bottom:-.16em; }
.hero h1 .ln > i{
  display:block; font-style:normal; transform:translateY(108%);
  animation:up 1.3s var(--slow) forwards; animation-delay:var(--d,0ms);
}
@keyframes up{ to{ transform:none; } }
/* one column: the description spans the page and the CTA sits under it */
.hero-tail{
  margin-top:clamp(28px,3.6vw,52px);
  display:grid; grid-template-columns:1fr;
  gap:clamp(24px,3vw,40px); align-items:start;
}
/* the hero copy is held to half the container so it never runs the full width
   of the video; the CTA sits in its own column to the right of that copy,
   bottom-aligned with it, rather than stacking underneath. */
.hero .hero-tail{
  max-width:none;
  grid-template-columns:minmax(0,min(50%,600px)) auto;
  align-items:end; gap:clamp(22px,3.4vw,56px);
}
.hero .cta{ justify-content:flex-start; }
.cta{ display:flex; flex-wrap:wrap; gap:11px; }

/* ---------- people ---------- */
/* Two full-width rows instead of two narrow cards: the portrait gets its own
   column (~445px wide at max container width) and the rows mirror each other. */
/* Inga and Gennady side by side. Each column is ~600px at max container
   width, so the portrait on top is wider here (~530px) than it was in the
   stacked rows (~445px) — closer together AND bigger. */
/* narrower pair and a square portrait: the cards were dominating the section */
.duo{ display:grid; grid-template-columns:1fr; gap:clamp(14px,1.8vw,22px);
  max-width:none; }
.who{
  display:grid; grid-template-columns:clamp(150px,17vw,230px) minmax(0,1fr);
  gap:clamp(18px,2.6vw,40px); align-items:start;
}
.pf{
  margin:0; position:relative; width:100%; aspect-ratio:1/1;
  overflow:hidden; background:var(--void-3); border:1px solid var(--hair);
}
.pf img{ width:100%; height:100%; object-fit:cover; object-position:center 30%;
  filter:grayscale(1) contrast(1.05); }
.pf.missing img{ display:none; }
/* a large empty square would read as dead space, so the waiting state gets a
   big monogram and a faint warm wash until the real photos land */
.pf.missing{ background:
  radial-gradient(120% 90% at 30% 18%, rgba(255,107,44,.10), transparent 62%),
  var(--void-3); }
.pf.missing::after{
  content:attr(data-initials); position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--disp); font-weight:var(--disp-w); font-size:clamp(38px,5vw,76px);
  letter-spacing:-.05em; color:var(--bone-3);
}
.pf.missing::before{
  content:attr(data-hint); position:absolute; left:0; right:0; bottom:14px; z-index:2;
  font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  text-align:center; color:rgba(239,237,232,.30);
}
.who h3{ margin-bottom:9px; font-size:clamp(19px,1.8vw,26px); }
.who .role{
  display:block; font-family:var(--mono); font-weight:400;
  font-size:clamp(9.5px,.72vw,10.5px); letter-spacing:.15em;
  text-transform:uppercase; margin-bottom:17px; line-height:1.8;
  color:var(--bone-3);
}
.who p{ margin:0; color:var(--bone-2); font-size:clamp(14px,1vw,16px); font-weight:300; }

/* ---------- capabilities ---------- */

/* ---------- the one loud moment: full-bleed orange ---------- */

/* a grid item stretches by default — without this the button
   becomes a full-width black band once the panel goes single-column */

/* ---------- process: order shown by a rail, never by numerals ---------- */
/* a timeline rather than numerals: one continuous line down the left with a
   node per stage, warm at the top and cooling as it descends */
.stages{ position:relative; display:grid; gap:clamp(8px,.9vw,12px);
  padding-left:clamp(30px,3.4vw,52px); }
.stages::before{
  content:""; position:absolute; left:clamp(9px,1vw,15px); top:18px; bottom:18px;
  width:1px; background:var(--hair);
}
/* the filled portion: driven by scroll position, like v2's altimeter */
.stages::after{
  content:""; position:absolute; left:clamp(9px,1vw,15px); top:18px;
  width:1px; height:var(--tl,0%);
  background:linear-gradient(180deg, var(--orange-2) 0%, var(--orange) 100%);
  box-shadow:0 0 12px rgba(255,107,44,.55);
}
/* nodes light up once the fill has passed them */
.stage.on::before{
  background:var(--orange); border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(255,107,44,.14), 0 0 16px rgba(255,107,44,.5);
}
.stage{
  position:relative; display:grid;
  grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);
  gap:clamp(16px,2.8vw,48px); align-items:start;
  padding:clamp(16px,1.9vw,24px) clamp(14px,1.6vw,22px);
  background:var(--scrim);
}
.stage::before{
  content:""; position:absolute; left:calc(-1 * clamp(30px,3.4vw,52px) +
  clamp(5px,.68vw,11px)); width:9px; height:9px; border-radius:50%;
  background:var(--void); border:1px solid var(--bone-3);
  transition:background .45s, border-color .45s, box-shadow .45s;
  top:clamp(21px,2.2vw,29px);
}
.stage h3{ font-size:clamp(17px,1.6vw,24px); }
.stage:hover h3{ color:var(--bone); }
.stage p{ margin:0; color:var(--bone-2); font-weight:300;
  font-size:clamp(13.5px,.96vw,15.5px); line-height:1.55; }

/* ---------- projects ---------- */
/* the section note and the "see all projects" button share one row above
   the cards:
   the note keeps its 56ch measure on the left, the button sits at the right
   and aligns with the note's last line. */
.work-head{
  display:flex; flex-wrap:wrap; gap:clamp(14px,2.2vw,36px);
  align-items:flex-end; justify-content:space-between;
  margin:clamp(18px,2.2vw,30px) 0 clamp(30px,4vw,54px);
}
.work-head .lede{ max-width:56ch; }
.work-head .btn{ flex:none; }

/* ---------- FAQ ---------- */
.qa{ display:grid; gap:clamp(8px,.9vw,12px); max-width:1000px; }
.qa details{
  background:var(--glass); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-br); border-radius:6px;
  padding:0 clamp(18px,2vw,26px);
  transition:border-color .45s, background .45s;
}
.qa details[open]{ border-color:rgba(239,237,232,.28); background:rgba(239,237,232,.075); }
.qa summary{
  cursor:pointer; list-style:none; padding:clamp(19px,2.3vw,32px) 48px clamp(19px,2.3vw,32px) 0;
  font-family:var(--disp); font-weight:var(--disp-w); font-size:clamp(16px,1.6vw,24px);
  letter-spacing:-.012em; line-height:1.26; position:relative; transition:color .35s;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:1px;
  background:var(--bone-3); transition:transform .4s var(--ease), background .35s;
}
.qa summary::before{
  content:""; position:absolute; right:13px; top:50%; width:1px; height:11px;
  background:var(--bone-3); transform:translateY(-50%);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.qa details[open] summary::before{ opacity:0; transform:translateY(-50%) rotate(90deg); }
.qa summary:hover{ color:var(--bone); }
.qa summary:hover::after, .qa summary:hover::before,
.qa details[open] summary::after{ background:var(--bone); }
.qa .a{ margin:0; padding:0 clamp(30px,6vw,120px) clamp(22px,2.6vw,34px) 0;
  color:var(--bone-2); font-weight:300; font-size:clamp(14px,1vw,16.5px); }

/* ---------- contact ---------- */
.contact{ display:grid; gap:clamp(24px,3vw,40px); max-width:760px; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--hair); padding:clamp(30px,3.4vw,52px) 0; }
/* baseline, not flex-end: the logo is a block image, so its baseline is
   its bottom edge, and the uppercase type then sits exactly on that line.
   flex-end would align the line boxes instead and leave the glyphs a
   couple of pixels high, because 9.5px type in a 1.62 line box carries
   about 3px of leading under the baseline. */
.foot{ display:flex; flex-wrap:wrap; gap:12px 28px; align-items:baseline;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--bone); }
.foot .sp{ margin-right:auto; display:flex; align-items:center; gap:10px; }
/* same wordmark as the nav, one step down in size */
.foot .logo{ height:clamp(16px,1.35vw,20px); width:auto; display:block; }
.foot a:hover{ color:var(--orange); }

/* ---------- reveals ---------- */
.js .up{ opacity:0; transform:translateY(22px); }
.up.in{ opacity:1; transform:none;
  transition:opacity .9s var(--slow), transform 1s var(--slow); transition-delay:var(--d,0ms); }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero .hero-tail{ grid-template-columns:1fr; }
  .duo{ grid-template-columns:1fr; }
  .pf{ max-width:420px; aspect-ratio:1/1; }
  .stage{ grid-template-columns:1fr; }
}
@media (max-width:860px){ .nav-links{ display:none; } }
@media (max-width:640px){
  /* the hero centres its content inside 86vh, which on a phone shows up as
     dead space above and below. Content height instead. */
  .hero{ min-height:auto; padding:clamp(12px,3vw,20px) 0 clamp(26px,7vw,38px); }

  /* portrait above the text once the two columns stop fitting, and the
     portrait, name and role centred over the description */
  .who{ grid-template-columns:1fr; gap:clamp(14px,3vw,20px); justify-items:center; }
  .who > div{ width:100%; }
  .who .pf{ max-width:200px; }
  .who h3, .who .role{ text-align:center; }

  /* the footer was a 16px logo over 9.5px type on a 15% hairline — barely
     there on a phone. Bigger, and no auto-margin fighting the wrap. */
  .foot{ gap:14px 22px; font-size:10.5px; }
  .foot .sp{ margin-right:0; }
  .foot .logo{ height:22px; }
  footer{ border-top-color:var(--hair-2); padding:clamp(26px,7vw,38px) 0; }
}
@media (max-width:540px){
  .hero h1{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0ms !important;
    transition-duration:.001ms !important; }
  .js .up{ opacity:1; transform:none; }
  .hero h1 .ln > i{ transform:none; }
  /* a 12s loop is exactly what this setting asks us not to play */
  .hero-v{ display:none; }
}

/* ==================================================================
   Components for the sections of the home page
   ================================================================== */

/* hero: three short paragraphs, one CTA */
.hero-p{ display:grid; gap:clamp(12px,1.4vw,18px); max-width:none; }
.hero-p .lede, .hero-p p{ max-width:none; }
.hero-p p{ margin:0; }
.list{ display:grid; gap:0; }
.row{
  display:grid; grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);
  gap:clamp(16px,2.8vw,48px); align-items:start;
  padding:clamp(17px,2vw,26px) clamp(14px,1.6vw,22px);
  border-top:1px solid var(--hair-2);
  background:var(--scrim);
}
.list .row:first-child{ border-top:0; }
.row h3{ margin:0; font-size:clamp(17px,1.6vw,24px); }

.row p{ margin:0; color:var(--bone-2); font-weight:300;
  font-size:clamp(13.5px,.96vw,15.5px); line-height:1.55; }

/* the stages carry their numbers, as the content doc writes them */
.stage-b{ display:grid; gap:8px; }
.stage-b p{ margin:0; }

/* the "where to start" section: two entry points side by side */
.start{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,32px); }
.start-c{
  background:var(--glass); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-br); border-radius:6px;
  padding:clamp(24px,3vw,44px);
  display:flex; flex-direction:column; gap:clamp(14px,1.7vw,22px);
  transition:border-color .5s, background .5s, transform .6s var(--ease);
}
/* both cards start neutral and identical; the warm treatment that used to sit
   permanently on the audit card is now the hover state for both */
/* neutral highlight: orange on hover competed with the orange CTAs inside */
.start-c:hover{
  border-color:rgba(239,237,232,.34);
  background:rgba(239,237,232,.075);
  transform:translateY(-3px);
}
.start-c h3{ margin:0; font-size:clamp(20px,2vw,29px); }
.start-c p{ margin:0; color:var(--bone-2); font-weight:300;
  font-size:clamp(14px,1vw,16px); line-height:1.6; }
.start-c .btn{ align-self:flex-start; margin-top:auto; }

/* ---------- work cards ---------- */
.works{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);
}
.work{
  display:flex; flex-direction:column; gap:clamp(14px,1.6vw,20px);
  padding:clamp(18px,2vw,26px);
  background:var(--glass); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-br); border-radius:6px;
}
/* screenshot slot: same graceful pattern as the portraits */
.shot{ margin:0; position:relative; aspect-ratio:16/10; overflow:hidden;
  border-radius:4px; background:var(--void-3); border:1px solid var(--hair-2); }
.shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.work-meta{ font-family:var(--mono); font-size:clamp(9.5px,.76vw,11px);
  letter-spacing:.15em; text-transform:uppercase; color:var(--bone-3); }
.work h3{ margin:0; font-size:clamp(18px,1.7vw,25px); }
.work p{ margin:0; color:var(--bone-2); font-weight:300;
  font-size:clamp(13.5px,.94vw,15px); line-height:1.55; flex:1; }
.work-go{ font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-3); display:flex; align-items:center; gap:9px;
  transition:color .4s, gap .4s var(--ease); }
a.work:hover .work-go{ color:var(--orange); gap:14px; }
@media (max-width:1080px){ .works{ grid-template-columns:1fr; } }
.direct{
  display:flex; flex-wrap:wrap; gap:clamp(20px,3.4vw,56px); border-top:1px
  solid var(--hair-2); padding-top:clamp(16px,1.9vw,24px);
}
.direct a{ display:flex; align-items:baseline; gap:clamp(14px,2vw,28px); }
.direct a:hover .d-v{ color:var(--orange-2); }
.d-v{ font-family:var(--disp); font-weight:var(--disp-w);
  font-size:clamp(17px,1.7vw,26px); letter-spacing:-.015em;
  color:var(--orange); transition:color .35s; }

@media (max-width:1080px){
  .row{ grid-template-columns:1fr; }
  .row p{ margin-top:8px; }
  .start{ grid-template-columns:1fr; }
  .stage{ grid-template-columns:1fr; }
  .stage-b{ margin-top:8px; }
}

/* ---------- back link (shared by the case and list pages) ----------
   Without this, the inline svg keeps the global `svg{display:block}` and
   pushes the label onto its own line. */
.back{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:clamp(9.5px,.76vw,11px);
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone);
  transition:color .35s, gap .35s var(--ease);
}
.back svg{ flex:none; }
.back:hover{ color:var(--orange); gap:15px; }

/* ==================================================================
   SECTION GROUNDS, MEASURE AND TWO SMALL FIXES
   ================================================================== */

/* .atmos is a single position:fixed layer behind the whole document, so it
   cannot be varied per section from where it lives. These sections instead
   paint their own opaque ground, covering the contour field for their own
   height; the sections left alone still show it. Fading to transparent over
   the first and last few percent keeps the seams soft rather than stepped.

   Strict alternation down the page, starting flat:
     #who     flat        #work     flat
     #make    curved      #faq      curved
     #start   flat        #contact  flat
     #how     curved                                                 */
#who, #start, #work{
  background:linear-gradient(180deg,
    rgba(8,8,10,0) 0%, var(--ground) 7%, var(--ground) 93%, rgba(8,8,10,0) 100%);
}

/* one measure for every section heading; was four different inline values */
.sec h2{ max-width:24ch; }
/* except where the line breaks are authored in the copy with <br> — there the
   measure would fight the break and add a line back */
.sec h2.h-lines{ max-width:none; }

/* the FAQ tag already carries these words, so the h2 repeated them. Hidden
   rather than deleted, so the copy stays in the file and both dictionaries
   keep the key. */
#faq > .wrap > h2{ display:none; }

/* the contact section sits on the contour field, so its copy and its two
   lines take the
   same dark scrim as the rows and stages — one band behind both, not two.
   The hairline on .direct divides them inside it. */
#contact .contact-block{
  margin:clamp(18px,2.2vw,30px) calc(-1 * clamp(14px,1.6vw,22px)) 0;
  background:var(--scrim);
  padding:clamp(17px,2vw,26px) clamp(14px,1.6vw,22px);
}
#contact .hero-p{ margin-bottom:clamp(16px,2vw,24px); }