@font-face{
  font-family:'Manic';
  src:url('assets/font/manic-webfont.woff2') format('woff2'),
      url('assets/font/manic-webfont.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   DESIGN TOKENS — pulled directly from the Figma file
   ============================================================ */
:root{
  /* Colour variables (Figma "Variables") */
  --black:#000000;
  --grey:#676767;
  --white:#ffffff;
  --orange:#e8602a;
  --beige:#e8e7e4;
  --light-grey:#f4f4f4;
  --text-primary:#000000;
  --text-secondary:#676767;
  --background-white:var(--white);
  --background-beige:var(--beige);
  --background-grey:var(--light-grey);
  --background-orange:var(--orange);
  --background-black:var(--black);

  /* Spacing scale (Figma numeric variables) */
  --s1:0px;
  --s2:2px;
  --s3:8px;
  --s4:13px;
  --s5:21px;
  --s6:24px;
  --s8:48px;
  --s9:60px;
  --s11:144px;

  --font:'Urbanist', sans-serif;
  --font-accent:'Manic', sans-serif;

  /* Desktop type scale (Figma "Styles", Desktop set) */
  --fs-display:144px;
  --fs-h1:55px;
  --fs-h2:34px;
  --fs-h3:21px;
  --fs-base:16px;
  --fs-small:13px;

  /* Base/Small line-height, loosened slightly per explicit instruction
     (was "normal" like the rest of the type scale — felt cramped).
     Display/H1/H2/H3 stay pinned to "normal" below, unaffected. */
  --lh-body:1.5;

  --frame:1440px;   /* Figma frame width */
  --content:1320px; /* Figma content width (frame minus 60px gutters) */

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
/* Prevents iOS Safari's automatic text-inflation in narrow text blocks
   (e.g. testimonial cards) from rendering text larger than the CSS
   font-size until a later reflow snaps it back — text always renders at
   the size actually specified. */
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  background:var(--background-grey); /* shows instead of white/orange in any overscroll gap */
  overscroll-behavior-y:none; /* stop rubber-band bounce past the top/bottom edge */
}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-base);
  font-weight:400;
  line-height:var(--lh-body); /* Base/Small text; Display/H1/H2/H3 override back to "normal" */
  color:var(--text-primary);
  background:var(--background-grey); /* page background is Light Grey, not white */
  overflow-x:hidden;
  overscroll-behavior-y:none;
}
/* Horizontal rubber-band bounce (swipe-right past the edge) is a touch-only
   gesture. Scoping overscroll-behavior-x to touch pointers avoids a WebKit
   bug where blocking overscroll on BOTH axes on html/body can freeze mouse
   and trackpad scrolling on desktop Safari entirely. */
@media (pointer:coarse){
  html, body{ overscroll-behavior-x:none; }
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
h1,h2,h3,p{margin:0;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ============================================================
   LAYOUT CONTAINERS
   ============================================================ */
.content{
  max-width:var(--content);
  margin:0 auto;
  padding:0;
  position:relative;
  z-index:2; /* above the linework (z-index:1) — see #case-studies */
}
main > section:not(.bleed),
.linework{
  max-width:var(--frame);
  margin:0 auto;
  position:relative;
}
/* Full-bleed backgrounds break out of the 1440-capped parent so the colour
   spans the viewport, while inner .content stays centred at 1320. */
.bleed{
  width:100vw;
  position:relative;
  left:50%;
  margin-left:-50vw;
}
.bleed-beige{ background:var(--background-beige); }
.bleed-orange{ background:var(--background-orange); }
.bleed-white{ background:var(--background-white); }

/* ============================================================
   OPENING CURTAIN
   ============================================================ */
#curtain{
  position:fixed; inset:0;
  background:var(--background-orange);
  z-index:999;
  transform:translateY(0);
  transition:transform .6s var(--ease);
}
#curtain.is-open{
  transform:translateY(-100%);
  pointer-events:none;
}
#curtain.no-transition{ transition:none; }
body.pre-reveal{ overflow:hidden; }

/* Once the open animation has actually finished, the curtain is fully
   removed from layout. A transform alone leaves its fixed, inset:0,
   orange background box still sitting at the top/bottom safe-area
   edges — iOS Safari tints its own chrome (status bar, toolbar) to
   match a fixed element's declared background there regardless of the
   transform applied to it, which left the chrome stuck orange even
   after the curtain was visually gone. display:none removes it from
   that consideration entirely; it's restored right before the curtain
   plays again on a page-to-page close. */
#curtain.is-cleared{ display:none; }

/* Case study detail pages and the life page skip the curtain entirely
   (on case studies its color always matched the destination's own hero
   color, which read as a broken transition where the two met). Both
   fade in as a whole instead, once ready to show (see 'page-ready' in
   case-study.js and common.js). */
body[data-slug] #curtain, body.page-life #curtain{ display:none; }
body[data-slug], body.page-life{ opacity:0; }
body[data-slug].page-ready, body.page-life.page-ready{ opacity:1; transition:opacity .35s var(--ease); }

/* ============================================================
   NAVIGATION
   ============================================================ */
#site-nav{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  background:color-mix(in srgb, var(--background-grey) 88%, transparent);
  backdrop-filter:blur(6px);
  transition:transform .4s var(--ease);
}
#site-nav.nav-hidden{ transform:translateY(-100%); }
.nav-inner{
  position:relative; /* anchors life.html's nav-clipped side lines, see .life-vline-nav */
  max-width:var(--frame);
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s4) var(--s9);
}
.nav-links{ display:flex; gap:var(--s8); }
.nav-link{
  font-family:var(--font-accent);
  font-weight:400; font-size:var(--fs-base);
  color:var(--text-primary);
  transition:color .2s;
}
.nav-link:hover, .nav-link:focus-visible, .nav-link.is-active{ color:var(--orange); }
.nav-icons{ display:flex; gap:var(--s6); align-items:center; }
button.nav-link{ padding:0; margin:0; border:none; background:none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:112px; height:48px;
  padding:var(--s4) var(--s6);
  border-radius:4px;
  font-family:var(--font-accent); font-size:var(--fs-h3); font-weight:400;
  color:var(--white);
  cursor:pointer; border:none;
  transition:background-color .2s;
}
.btn-orange{ background:var(--background-orange); }
.btn-orange:hover, .btn-orange:focus-visible{ background:var(--black); }
.btn-black{ background:var(--background-black); }
.btn-black:hover, .btn-black:focus-visible{ background:var(--orange); }

/* ============================================================
   TOAST — confirmation shown after "copy email" is clicked.
   Not in Figma; styled from existing tokens only, per explicit
   instruction to add this feature.
   ============================================================ */
.toast{
  position:fixed;
  left:50%; top:var(--s9);
  transform:translate(-50%, -16px);
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s5);
  border-radius:4px;
  background:var(--background-black);
  color:var(--white);
  font-family:var(--font); font-size:var(--fs-small); font-weight:600;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  z-index:100;
}
.toast.is-visible{
  opacity:1;
  transform:translate(-50%, 0);
}
.toast-icon{
  width:16px; height:16px;
  flex:none;
  color:var(--orange);
}
.toast-icon svg{ width:100%; height:100%; display:block; }

/* ============================================================
   LINEWORK — see script.js; all geometry is computed there.
   ============================================================ */
.linework{ overflow:visible; }
.linework-svg{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  overflow:visible;
  pointer-events:none;
  z-index:1;
}
/* Height is set from script.js to match #site-nav's rendered height, and
   overflow is clipped (not visible) so this duplicate only ever paints
   within the nav's own footprint — never over Case Studies cards or any
   other content further down the page. */
.linework-svg-nav{
  height:0;
  overflow:hidden;
  z-index:101; /* above #site-nav (z-index:100) */
}
.v-line{
  stroke:var(--black);
  stroke-width:1;
  opacity:.18;
}
.h-line{
  position:absolute;
  top:0; left:0; width:0; height:1px;
  background:var(--black);
  opacity:.18;
  pointer-events:none;
  z-index:1;
  will-change:transform;
  transform-origin:0 0;
}
/* Only exist once the hero restacks at <=720px — see script.js positionMobileLines(). */
.h-line-mobile{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
#hero{
  position:relative;
  z-index:2;
  height:100vh;
  min-height:640px;
  overflow:hidden;
}
.hero-content{
  position:relative;
  height:100%;
  display:flex; align-items:center; justify-content:center;
  gap:var(--s4);
  transform:rotate(15deg);
  transform-origin:center center;
  will-change:transform;
}
/* Figma frame "left" — the claim + labels group. Lines 1 & 2 anchor to
   THIS element's edges (not the whole row, which also contains OLESYA). */
.hero-left{
  display:flex; align-items:center; gap:var(--s4);
  flex:none;
}
.hero-claim{
  background:var(--orange);
  color:var(--white);
  font-weight:600; font-size:12.895px;
  line-height:normal;
  height:105.423px;
  display:flex; align-items:center; justify-content:center;
  padding:var(--s3);
  border-radius:3.968px;
  flex:none;
}
.hero-claim > span, .hero-claim{ width:auto; }
.hero-claim{ width:117.204px; } /* 101.204px text box + 8px padding each side */
.hero-labels{
  display:flex; flex-direction:column; justify-content:space-between;
  width:122.936px; height:104.977px;
  flex:none;
}
.pill{
  background:var(--background-white);
  border:.488px solid var(--black);
  border-radius:3.902px;
  font-weight:600; font-size:12.684px;
  line-height:normal;
  color:var(--black);
  padding:7.805px 12.684px;
  display:flex; align-items:center; justify-content:center;
  white-space:nowrap;
}
.hero-name{
  font-family:var(--font-accent);
  font-size:var(--fs-display);
  font-weight:400;
  line-height:normal;
  white-space:nowrap;
  flex:none;
}

/* Intro content reveal (fires after Hero rotation completes) */
#introContent{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
#introContent.revealed{ opacity:1; transform:translateY(0); }
.intro-cards .icard{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.intro-cards.revealed .icard:nth-child(1){ transition-delay:.05s; }
.intro-cards.revealed .icard:nth-child(2){ transition-delay:.12s; }
.intro-cards.revealed .icard:nth-child(3){ transition-delay:.19s; }
.intro-cards.revealed .icard{ opacity:1; transform:translateY(0); }

/* ============================================================
   INTRO
   ============================================================ */
#intro{ position:relative; padding:200px 0 0; z-index:2; }
.intro-grid{ position:relative; z-index:2; max-width:var(--frame); }
/* Figma places this block at x=681 of the 1440 frame. */
.intro-content{
  margin-left:672.5px;
  width:367px;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--s8);
}
.intro-avatar{
  width:140px; height:140px; border-radius:50%;
  object-fit:cover;
  flex:none;
}
.intro-text{ font-size:var(--fs-base); width:100%; }
.intro-highlight{ color:var(--orange); font-weight:700; }
.rec-highlight{ color:var(--orange); }
.intro-text a{ text-decoration:underline; text-underline-offset:2px; }

/* Three cards: 312px each, 24px gaps -> 984px, centred in the 1440 frame
   (which is exactly Figma's x=228 / 564 / 900). */
.intro-cards{
  display:flex; justify-content:center;
  gap:var(--s6);
  margin-top:506px;
}
.icard{
  width:312px; height:220px;
  padding:var(--s5);
  border-radius:4px;
  display:flex; flex-direction:column;
  flex:none;
}
.icard-beige{ background:var(--background-beige); justify-content:space-between; }
.icard-beige h3{ font-family:var(--font-accent); font-size:var(--fs-h2); font-weight:400; line-height:normal; color:var(--text-primary); }
.icard-beige p{ font-size:var(--fs-base); width:209.342px; color:var(--text-primary); }

.icard-white{ background:var(--background-white); align-items:center; justify-content:space-between; }
.icard-small-title{ font-size:18.654px; font-weight:400; line-height:normal; width:100%; color:var(--text-primary); }
.icard-pair{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:1px; width:100%;
  font-family:var(--font-accent); font-size:var(--fs-h2); font-weight:400; line-height:normal; text-align:right; color:var(--black);
}

.icard-orange{
  background:var(--background-orange);
  align-items:flex-end; justify-content:flex-end;
  cursor:pointer;
}
.icard-orange-inner{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:var(--s5); width:208.865px;
}
.icard-view-work{ font-size:var(--fs-h3); font-weight:700; line-height:normal; color:var(--white); }
.icard-arrow{
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-accent); font-size:40px; font-weight:400; color:var(--white);
  transform:rotate(90deg); /* Figma rotates the arrow to point down */
}

/* ============================================================
   CASE STUDIES
   ============================================================ */
/* No z-index here (stays auto) so this section doesn't become its own
   stacking context — that would bundle its .bleed-white background together
   with its content as one atomic layer above the lines, hiding the lines
   under the background entirely. Left as auto, the section's own background
   paints below the lines (z-index:1), while .content (z-index:2) bubbles up
   to paint above them. */
#case-studies{ position:relative; margin-top:512px; padding:var(--s9) 0; }
.cs-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  column-gap:var(--s6); row-gap:var(--s8);
}
.cs-card{
  background:var(--background-white);
  border-radius:2px;
  padding:0 var(--s3);
  display:flex; flex-direction:column; gap:var(--s6);
  min-width:0; /* let the grid's 1fr columns shrink below cs-text's 480px below 1440 — without this the grid track floors at content's min-content size and pushes the right column off-screen */
}
.cs-company{ font-size:var(--fs-base); line-height:22px; color:var(--text-secondary); }
.cs-text{ display:flex; flex-direction:column; gap:var(--s4); min-height:56px; width:480px; max-width:100%; }
.cs-text h3{ font-family:var(--font-accent); font-size:var(--fs-h3); font-weight:400; line-height:normal; color:var(--text-primary); }
.cs-text p{ font-size:var(--fs-base); line-height:22px; color:var(--text-primary); }
.cs-visual{
  /* Fluid so the box keeps the same 424:277 shape as the card resizes,
     instead of a fixed height that would crop the sides more/less as the
     grid's 1fr columns (and the 1-column reflow at ≤900px) change width. */
  width:100%; aspect-ratio:424/277;
  background:var(--background-beige);
  position:relative;
  overflow:hidden;
  border-radius:4px;
}
.cs-visual-image,
.cs-visual-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.cs-visual-video{
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease);
}
.cs-card:hover .cs-visual-video{ opacity:1; }
.cs-visual-video-static{ opacity:1; }

/* ============================================================
   RECOMMENDATIONS
   ============================================================ */
#recommendations{ padding:233px 0; }
.rec-content{ display:flex; flex-direction:column; align-items:center; gap:var(--s8); }
.rec-viewport{
  width:100%;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  cursor:grab;
  mask-image:linear-gradient(to right, transparent, black var(--rec-peek-fade, 0), black calc(100% - var(--rec-peek-fade, 0)), transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, black var(--rec-peek-fade, 0), black calc(100% - var(--rec-peek-fade, 0)), transparent);
}
.rec-viewport.is-dragging{ cursor:grabbing; user-select:none; }
.rec-viewport.is-mobile{
  mask-image:linear-gradient(to right, black calc(100% - var(--rec-peek-fade, 0)), transparent);
  -webkit-mask-image:linear-gradient(to right, black calc(100% - var(--rec-peek-fade, 0)), transparent);
}
.rec-viewport::-webkit-scrollbar{ display:none; }
.rec-track{ display:flex; }
.rec-static-row{ display:flex; align-items:stretch; justify-content:center; gap:var(--s6); width:100%; }
.rec-static-row .rec-card{ flex:1 1 0; }
.rec-static-row.is-mobile{ flex-direction:column; align-items:center; }
.rec-static-row.is-mobile .rec-card{ flex:none; }
.rec-card{
  scroll-snap-align:start;
  flex:none; margin:0;
  display:flex; flex-direction:column; gap:var(--s5);
  background:var(--background-white);
  border:1px solid color-mix(in srgb, var(--black) 12%, transparent);
  border-radius:4px;
  padding:34px;
}
/* Small phones have little width to spare — trim the card padding so more
   of it goes to the quote text instead of wrapping into a tall column.
   Threshold matches REC_SMALL_QUERY in common.js. */
@media (max-width:480px){
  .rec-card{ padding:var(--s5); }
}
.rec-card p{ font-size:var(--fs-small); font-weight:400; color:var(--text-secondary); }
.rec-card p::before{ content:'\201C'; }
.rec-card p::after{ content:'\201D'; }
.rec-author{ display:flex; align-items:center; gap:var(--s5); margin-top:auto; }
.rec-avatar{
  width:48px; height:48px; border-radius:50%;
  flex:none; object-fit:cover;
}
div.rec-avatar{ background:var(--grey); opacity:.2; }
.rec-author-info{ display:flex; flex-direction:column; gap:var(--s2); }
.rec-card cite{ font-style:normal; font-size:var(--fs-small); color:var(--text-secondary); }
.rec-linkedin{
  display:block; width:20px; height:20px;
  color:var(--black); transition:color .2s;
}
.rec-linkedin svg{ width:100%; height:100%; }
.rec-linkedin:hover, .rec-linkedin:focus-visible{ color:var(--orange); }
.swiper-controls{ display:flex; align-items:center; gap:var(--s4); height:28px; }
.swipe-arrow{
  width:28px; height:28px; padding:0; border:none; background:none;
  color:var(--black); cursor:pointer; transition:color .2s;
}
.swipe-arrow:hover, .swipe-arrow:focus-visible{ color:var(--orange); }
.swipe-arrow svg{ width:100%; height:100%; }

/* ============================================================
   CASE STUDY DETAIL PAGES
   Shared layout for all 6 case study pages (see case-study.js) —
   only the hero image and title vary per page, the rest of the
   body is placeholder content shared across all of them for now.
   ============================================================ */
.csd-hero{ display:none; } /* temp: previewing without title images */
.csd-hero img{ width:100%; height:auto; }

.csd-body{
  max-width:var(--frame);
  margin:0 auto;
  display:flex; flex-direction:column;
  padding:0 120px;
}
/* Every direct child of .csd-body is a "section" and carries this same
   144px top/bottom padding — that's the only vertical spacing on this
   page now (no gap on .csd-body). A section with its own background
   (the .bleed-* ones) fills the padding too, so two colored sections
   sit flush against each other with no page-background sliver between,
   while still giving their content room to breathe from the edges. */
.csd-block{ padding-top:var(--s11); padding-bottom:var(--s11); }

.csd-about{ display:flex; align-items:stretch; gap:60px; }

.csd-info{ display:flex; flex-direction:column; gap:var(--s6); width:320px; flex:none; }
.csd-field{ display:flex; flex-direction:column; gap:var(--s3); }
.csd-field-label{ font-size:var(--fs-base); font-weight:600; color:var(--text-primary); }
.csd-field-value{ font-size:var(--fs-base); font-weight:400; color:var(--text-secondary); }

.csd-divider{ width:1px; background:#D5D5D5; flex:none; }

.csd-intro{ display:flex; flex-direction:column; gap:var(--s8); width:520px; flex:none; }
.csd-intro-head{ display:flex; flex-direction:column; gap:16px; }
.csd-title{ font-family:var(--font-accent); font-size:var(--fs-h1); font-weight:400; line-height:normal; color:var(--text-primary); }
/* gap matches the blank line Figma inserts between these paragraphs
   (a spacer paragraph at the same 16px line-height as the body text, var(--lh-body)) */
.csd-intro-text{ display:flex; flex-direction:column; gap:24px; }
.csd-intro-text p{ font-size:var(--fs-base); font-weight:400; color:var(--text-secondary); }
.csd-intro-note{ font-size:var(--fs-base); font-weight:600; color:var(--text-primary); }
.csd-intro-stats{ display:flex; flex-wrap:wrap; gap:0 80px; }

.csd-sections{ display:flex; flex-direction:column; gap:var(--s6); }
.csd-section{ display:flex; flex-direction:column; gap:12px; }
.csd-section h3{ font-size:var(--fs-h3); font-weight:700; line-height:normal; color:var(--text-primary); }
.csd-section-text{ display:flex; flex-direction:column; gap:24px; }
.csd-section-text p{ font-size:var(--fs-base); font-weight:400; color:var(--text-secondary); }

.csd-stats{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; }
.csd-stat{ display:flex; flex-direction:column; gap:var(--s2); }
.csd-stat-value{ font-size:var(--fs-h2); font-weight:700; line-height:normal; color:var(--text-primary); }
.csd-stat-label{ font-size:var(--fs-base); font-weight:400; color:var(--text-secondary); }
.csd-stat-label-strong{ font-weight:600; }

@media (max-width:1400px){
  .csd-body{ padding:0 var(--s6); }
}
@media (max-width:1100px){
  .csd-about{ flex-direction:column; gap:var(--s8); }
  .csd-divider{ display:none; }
  .csd-info, .csd-intro{ width:100%; }
  .csd-intro{ order:-1; }
}
@media (max-width:720px){
  /* #site-nav is position:fixed and floats over .csd-hero (which starts at
     the very top of <main>), same as it does on the work page's own hero.
     At desktop size the title image is tall enough that this goes
     unnoticed, but at mobile scale the image is short enough that the nav
     visibly cuts into it — push it down by the nav's own rendered height
     (13px padding top+bottom + its 28px icons) so it starts clear below. */
  .csd-hero{ padding-top:calc(2 * var(--s4) + 28px); }
  .csd-block{ padding-top:var(--s8); padding-bottom:var(--s8); }
  /* .csd-hero is currently display:none (see above), so .csd-about — the
     always-first section — is the one actually sitting under the fixed
     nav. The hero's own nav-clearance formula only brings content flush
     with the nav's bottom edge with no breathing room, so add the
     standard mobile section gap (--s8, same as .csd-block's own
     padding-top/bottom above) on top of it. */
  .csd-body > .csd-block:first-child{ padding-top:calc(2 * var(--s4) + 28px + var(--s8)); }
  .csd-stats{ gap:var(--s6); }

  /* Aparkado (driving-companion): 5 stats — 3 in a row, 2 below.
     Motesque MQ Fit (digital-twin): 4 stats — 2x2, hugging the left
     edge instead of the desktop space-between stretching them across
     the full row width. */
  body[data-slug="driving-companion"] .csd-stats,
  body[data-slug="digital-twin"] .csd-stats{
    display:grid;
    justify-content:start;
    justify-items:start;
  }
  body[data-slug="driving-companion"] .csd-stats{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  body[data-slug="digital-twin"] .csd-stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   CASE STUDY DETAIL — EXTENDED SECTIONS
   Video, Research, Solutions showcase, Design, Launch, Iterations
   and Results — present only on pages whose CASE_STUDY_DETAIL
   entry includes that section's data (see case-study.js). Pulled
   from the same Figma node (423:4288) as the sections above.
   Image/logo slots render as flat grey placeholders (#d9d9d9,
   matching Figma's own reserved-slot fill) until real assets are
   added.
   ============================================================ */
.csd-placeholder{ background:#D9D9D9; flex:none; border-radius:4px; }

.csd-video{ width:100%; aspect-ratio:1200/608; border-radius:4px; }
video.csd-video{ pointer-events:none; object-fit:cover; }
img.csd-video{ object-fit:contain; display:block; }

/* Full-bleed sections use the same .bleed technique as the work
   page (Case Studies/Recommendations/Footer) — background spans
   the full viewport (and, via .csd-block, its own 144px padding),
   while content stays capped at this page's 1440px frame with the
   same 120px gutters .csd-body itself uses, giving a 1200px column. */
.bleed-grey{ background:var(--background-grey); }
.bleed-black{ background:var(--background-black); }

.csd-research{ display:flex; flex-direction:column; gap:var(--s8); }
.csd-research-head{ display:flex; flex-direction:column; gap:var(--s6); width:480px; }
.csd-research-head h2{ font-size:var(--fs-h2); font-weight:700; line-height:normal; color:var(--text-primary); }
.csd-research-text{ display:flex; flex-direction:column; gap:24px; }
.csd-research-text p{ font-size:var(--fs-base); color:var(--text-secondary); }
.csd-troubles{ display:flex; gap:var(--s5); width:100%; }
.csd-troubles-card{ background:var(--background-beige); border-radius:4px; padding:var(--s5); flex:1; }
.csd-troubles-title{ font-size:var(--fs-base); font-weight:600; color:var(--text-primary); margin:0 0 var(--s3); }
.csd-troubles-card ul{ margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:0; }
.csd-troubles-card li{ font-size:var(--fs-base); color:var(--text-secondary); }

.csd-solutions-inner{ display:flex; flex-direction:column; gap:var(--s9); max-width:var(--frame); margin:0 auto; padding:0 120px; }
.csd-solutions-head{ display:flex; flex-direction:column; gap:var(--s6); width:480px; }
.csd-solutions-head h2{ font-size:var(--fs-h2); font-weight:700; line-height:normal; color:var(--text-primary); }
.csd-solutions-head p{ font-size:var(--fs-base); color:var(--text-secondary); }
.csd-solutions-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; row-gap:var(--s8); }
.csd-solutions-item{ display:flex; flex-direction:column; gap:3px; width:307px; }
.csd-solutions-image{ width:307px; height:230px; }
.csd-solutions-image img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:4px; }
.csd-solutions-item p{ font-size:var(--fs-base); color:var(--text-secondary); }
.csd-solutions-bigimage{ width:100%; aspect-ratio:2828/1680; }
.csd-solutions-bigimage img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:4px; }

.csd-design-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s8); max-width:var(--frame); margin:0 auto; padding:0 120px; }
.csd-design-head{ display:flex; flex-direction:column; gap:var(--s6); width:480px; }
.csd-design-head h2{ font-size:var(--fs-h2); font-weight:700; line-height:normal; color:var(--text-primary); }
.csd-design-head div{ display:flex; flex-direction:column; gap:24px; }
.csd-design-head p{ font-size:var(--fs-base); color:var(--text-secondary); }
.csd-design-image-1{ width:100%; aspect-ratio:2046/896; overflow:hidden; border-radius:4px; }
.csd-design-image-1 img{ width:100%; height:100%; object-fit:cover; display:block; }
.csd-design-row{ display:flex; gap:var(--s8); width:100%; }
.csd-design-image-2{ flex:1; min-width:0; aspect-ratio:792/516; border-radius:12px; overflow:hidden; }
.csd-design-image-2:last-child{ aspect-ratio:792/518; }
.csd-design-image-2 img{ width:100%; height:100%; object-fit:cover; display:block; }
.csd-design-row .csd-placeholder{ flex:1 1 0; }

.csd-launch-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--frame); margin:0 auto; padding:0 120px;
}
.csd-launch-text{ font-size:var(--fs-base); font-weight:600; color:var(--white); width:480px; }
.csd-launch-logos{ display:flex; flex-direction:column; gap:var(--s8); align-items:flex-start; }
.csd-launch-logo{ width:242px; height:40px; object-fit:contain; object-position:left; }

.csd-iterations-inner{ display:flex; flex-direction:column; gap:var(--s5); max-width:var(--frame); margin:0 auto; padding:0 120px; }
.csd-iterations-inner h2{ font-size:var(--fs-h2); font-weight:700; line-height:normal; color:var(--text-primary); }
.csd-iterations-body{ display:flex; flex-direction:column; gap:140px; width:100%; }
.csd-iterations-pairs{ display:flex; justify-content:space-between; width:100%; }
.csd-iterations-pair{ display:flex; flex-direction:column; gap:var(--s4); justify-content:flex-start; width:580px; }
.csd-iterations-pair-image{ width:100%; aspect-ratio:1160/514; overflow:hidden; }
.csd-iterations-pair-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.csd-iterations-pair p{ font-size:var(--fs-base); color:var(--text-secondary); }
.csd-iterations-solutions{ display:flex; gap:var(--s9); width:100%; align-items:flex-start; }
.csd-iterations-solutions-text{ display:flex; flex-direction:column; gap:var(--s9); width:480px; flex:none; }
.csd-iterations-solutions-intro{ font-size:var(--fs-base); color:var(--text-secondary); margin:0; }
.csd-iterations-solutions-list{ display:flex; flex-direction:column; gap:var(--s5); margin:0; padding-left:0; }
.csd-iterations-solutions-list li{ font-size:var(--fs-base); color:var(--text-secondary); list-style:disc; margin-left:1.1em; }
.csd-iterations-solutions-outro{ font-size:var(--fs-base); font-weight:600; color:var(--text-secondary); margin:0; }
.csd-iterations-solutions-images{ display:flex; flex-direction:column; gap:var(--s5); flex:1; min-width:0; }
.csd-iterations-solutions-image{ width:100%; aspect-ratio:1179/771; overflow:hidden; }
.csd-iterations-solutions-image:last-child{ aspect-ratio:1179/775; }
.csd-iterations-solutions-image img{ width:100%; height:100%; object-fit:cover; display:block; }

.csd-results{ display:flex; flex-direction:column; gap:var(--s9); width:100%; }
.csd-results-head{ display:flex; flex-direction:column; gap:var(--s6); }
.csd-results-head h2{ font-size:var(--fs-h2); font-weight:700; line-height:normal; color:var(--text-primary); }
.csd-results-head p{ font-size:var(--fs-base); color:var(--text-primary); width:534px; }
.csd-results-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s5); width:100%; }
.csd-results-stat-card{ background:var(--background-white); border-radius:4px; padding:var(--s8); display:flex; align-items:center; }
.csd-award{
  grid-column:1 / -1;
  display:flex; gap:var(--s8); align-items:center;
  background:var(--background-white); border-radius:4px; padding:var(--s8);
}
.csd-award-logo{ width:160px; height:160px; border-radius:4px; flex:none; overflow:hidden; }
.csd-award-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.csd-award-content{ display:flex; flex-direction:column; gap:var(--s3); max-width:593px; }
.csd-award-content h3{ font-size:var(--fs-h3); font-weight:700; line-height:normal; color:var(--text-primary); }
.csd-award-content p{ font-size:var(--fs-base); color:var(--text-secondary); }
.csd-testimonial-static-card{
  background:var(--background-white); border-radius:4px; padding:var(--s8);
  display:flex; flex-direction:column; gap:var(--s6); margin:0;
}
.csd-testimonial-static-card p{ font-size:var(--fs-base); font-style:italic; color:var(--text-secondary); }
.csd-testimonial-static-card cite{ font-style:normal; font-size:var(--fs-small); font-weight:600; color:var(--text-primary); }

/* Discovery, Features, Impact, Team — driving-companion's own sections,
   pulled from Figma node 423:4628. Same section-level rhythm as the
   blocks above (144px .csd-block padding, 480px text columns, 648px
   image placeholders, 72px text/image gap taken directly from Figma). */
.csd-discovery{ display:flex; flex-direction:column; gap:var(--s6); }
.csd-discovery h2{ font-size:var(--fs-h2); font-weight:700; line-height:normal; color:var(--text-primary); }
.csd-discovery-row{ display:flex; gap:72px; align-items:flex-start; width:100%; }
.csd-discovery-col{ display:flex; flex-direction:column; gap:var(--s5); width:480px; flex:none; }
.csd-discovery-text{ display:flex; flex-direction:column; gap:19px; }
.csd-discovery-text p{ font-size:var(--fs-base); color:var(--text-secondary); }
.csd-discovery-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); width:100%; }
.csd-discovery-item{ display:flex; flex-direction:column; gap:5px; }
.csd-discovery-item p:first-child{ font-size:var(--fs-base); font-weight:600; color:var(--text-primary); }
.csd-discovery-item p:last-child{ font-size:var(--fs-base); color:var(--text-secondary); }
.csd-discovery-image{ width:648px; height:603px; flex:none; }
.csd-discovery-image img{ width:100%; height:100%; object-fit:contain; display:block; border-radius:4px; }

.csd-features{ display:flex; flex-direction:column; gap:89px; }
.csd-features-head{ display:flex; flex-direction:column; gap:3px; width:480px; }
.csd-features-head h2{ font-size:var(--fs-h2); font-weight:700; line-height:normal; color:var(--text-primary); }
.csd-features-note{ font-size:var(--fs-small); color:var(--text-secondary); }
.csd-features-row{ display:flex; gap:72px; align-items:flex-start; width:100%; }
.csd-features-row-center{ align-items:center; }
.csd-features-col{ display:flex; flex-direction:column; gap:var(--s6); width:480px; flex:none; }
.csd-features-col h3{ font-size:var(--fs-h3); font-weight:700; line-height:normal; color:var(--text-primary); }
.csd-features-blocks{ display:flex; flex-direction:column; gap:var(--s6); width:100%; }
.csd-features-block{ display:flex; flex-direction:column; gap:5px; }
.csd-features-block-label{ font-size:var(--fs-base); font-weight:600; color:var(--text-primary); }
.csd-features-block p:not(.csd-features-block-label){ font-size:var(--fs-base); color:var(--text-secondary); }
.csd-features-block ul{ margin:0; padding-left:1.1em; }
.csd-features-block li{ font-size:var(--fs-base); color:var(--text-secondary); list-style:disc; }
.csd-features-hr{ width:100%; height:1px; background:#D5D5D5; flex:none; }
.csd-features-image{ width:648px; height:603px; flex:none; }
.csd-features-image img{ width:100%; height:100%; object-fit:contain; display:block; border-radius:4px; }
.csd-features-image-stack{ height:auto; align-self:stretch; display:flex; flex-direction:column; align-items:center; gap:24px; }
.csd-features-image-stack img{ width:auto; max-width:100%; height:auto; flex:1 1 0; min-height:0; object-fit:contain; border-radius:4px; }

.csd-impact{ display:flex; flex-direction:column; gap:var(--s6); width:520px; }
.csd-impact h2{ font-size:var(--fs-h2); font-weight:700; line-height:normal; color:var(--text-primary); }
.csd-impact-list{ margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:19px; }
.csd-impact-list li{ font-size:var(--fs-base); color:var(--text-secondary); list-style:disc; }

.csd-team{ display:grid; grid-template-columns:480px 648px; column-gap:72px; row-gap:34px; width:100%; }
.csd-team-col{ display:contents; }
.csd-team-col h2{ grid-column:1; grid-row:1; font-size:var(--fs-h2); font-weight:700; line-height:normal; color:var(--text-primary); }
.csd-team-col p{ grid-column:1; grid-row:2; font-size:var(--fs-base); color:var(--text-secondary); }
.csd-team-image{ grid-column:2; grid-row:2; width:648px; height:603px; flex:none; }
.csd-team-image img{ width:100%; height:100%; object-fit:contain; display:block; border-radius:4px; }

/* Story — a repeating heading+text+image row (new-web-for-new-ai's eight
   "Challenge/Visual/Navigation/..." sections, see content.js). Each row is
   its own .csd-block, so consecutive rows get the page's standard 144px
   rhythm rather than a shared internal gap. */
.csd-story{ display:flex; gap:72px; align-items:flex-start; width:100%; }
.csd-story-col{ display:flex; flex-direction:column; justify-content:center; gap:var(--s6); width:480px; flex:none; }
.csd-story-col h2{ font-size:var(--fs-h2); font-weight:700; line-height:normal; color:var(--text-primary); }
.csd-story-text{ display:flex; flex-direction:column; gap:19px; }
.csd-story-text p{ font-size:var(--fs-base); color:var(--text-secondary); }
p.csd-story-note{ font-weight:600; color:var(--text-primary); }
.csd-story-text ul{ margin:0; padding-left:1.1em; }
.csd-story-text li{ font-size:var(--fs-base); color:var(--text-secondary); list-style:disc; }
.csd-story-image{ width:648px; height:603px; flex:none; }
.csd-story-image-tall{ height:879px; }
.csd-story-image-stack{ height:auto; display:flex; flex-direction:column; gap:var(--s6); }
.csd-story-image-stack img, .csd-story-image-stack video{ width:100%; height:auto; border-radius:4px; }
.csd-story-image-stack video{ pointer-events:none; }

/* CNC-machine-specific sections — a full-width banner image, a repeating
   heading+text(+image) "narrative" block, repeating user-quote/solution
   "painPoints" groups, and a two-up before/after image row. Text/image
   widths and the gap between them follow the same 480/648/72 pattern as
   Discovery/Features/Team/Story above (per explicit instruction, since
   Figma gave this page's own frame several inconsistent one-off widths
   instead) — only each image's height stays page/row-specific, set inline
   in case-study.js since nearly every placeholder here has its own. */
.csd-banner{ width:100%; }
video.csd-banner{ display:block; height:auto; pointer-events:none; border-radius:4px; }
.csd-banner-rows{ display:flex; flex-direction:column; gap:var(--s5); width:100%; }
.csd-banner-row{ display:flex; align-items:flex-start; gap:var(--s5); width:100%; }
.csd-banner-row img, .csd-banner-row video{ display:block; height:auto; min-width:0; border-radius:4px; }
.csd-banner-row video{ pointer-events:none; }

.csd-banner-grid{ display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(2, 1fr); gap:var(--s5); width:100%; height:100vh; }
.csd-banner-grid img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:4px; }

.csd-banner-gridrows{ display:flex; flex-direction:column; gap:var(--s5); width:100%; }
.csd-banner-gridrows-row{ display:flex; gap:var(--s5); width:100%; }
.csd-banner-gridrows-row img{ display:block; flex:1 1 0; min-width:0; aspect-ratio:1/1; object-fit:cover; border-radius:4px; }
.csd-banner-gridrows-row--center{ justify-content:center; }
.csd-banner-gridrows-row--center img{ flex:0 1 calc((100% - 2 * var(--s5)) / 3); }

.csd-banner-columns{ display:flex; align-items:flex-start; gap:var(--s5); width:100%; }
.csd-banner-columns-col{ display:flex; flex-direction:column; gap:var(--s5); flex:1 1 0; min-width:0; }
.csd-banner-columns-col img{ display:block; width:100%; height:auto; border-radius:4px; }

.csd-narrative{ display:flex; flex-direction:column; gap:var(--s9); }
.csd-narrative h2{ font-size:var(--fs-h2); font-weight:700; line-height:normal; color:var(--text-primary); }
.csd-narrative-text{ display:flex; flex-direction:column; gap:19px; width:480px; }
.csd-narrative-text p{ font-size:var(--fs-base); color:var(--text-secondary); }
.csd-narrative-rows{ display:flex; flex-direction:column; gap:var(--s9); width:100%; }
.csd-narrative-row{ display:flex; gap:72px; align-items:flex-start; width:100%; }
.csd-narrative-row .csd-narrative-text{ flex:none; }
.csd-narrative-image{ width:648px; flex:none; border-radius:4px; }

.csd-painpoints{ display:flex; flex-direction:column; gap:var(--s9); width:100%; }
.csd-painpoints > h2{ font-size:var(--fs-h2); font-weight:700; line-height:normal; color:var(--text-primary); }
.csd-painpoints-intro{ display:flex; flex-direction:column; gap:19px; width:480px; }
.csd-painpoints-intro p{ font-size:var(--fs-base); color:var(--text-secondary); }
.csd-painpoints-item{ display:flex; flex-direction:column; gap:var(--s6); width:100%; }
.csd-painpoints-quote{ font-size:var(--fs-h3); font-weight:700; line-height:normal; color:var(--text-secondary); width:480px; }
.csd-painpoints-answer{ display:flex; gap:72px; align-items:flex-start; width:100%; }
.csd-painpoints-answer-text{ display:flex; flex-direction:column; gap:19px; width:480px; flex:none; }
.csd-painpoints-answer-text p{ font-size:var(--fs-base); color:var(--text-secondary); }
.csd-painpoints-answer-image{ width:648px; flex:none; }
.csd-painpoints-answer-image:not(.csd-placeholder){ display:flex; flex-direction:column; gap:var(--s5); }
.csd-painpoints-answer-image img{ width:100%; display:block; border-radius:4px; }
.csd-painpoints-answer-image video{ width:100%; display:block; border-radius:4px; pointer-events:none; }

.csd-beforeafter{ display:flex; flex-direction:column; gap:var(--s9); width:100%; }
.csd-beforeafter h2{ font-size:var(--fs-h2); font-weight:700; line-height:normal; color:var(--text-primary); }
.csd-beforeafter-row{ display:flex; gap:var(--s9); width:100%; align-items:flex-start; }
.csd-beforeafter-image{ flex:1; min-width:0; }
.csd-beforeafter-image.csd-placeholder{ height:100%; }
img.csd-beforeafter-image{ display:block; width:100%; border-radius:4px; }
.csd-beforeafter-row-stacked{ flex-direction:column; }
.csd-beforeafter-row > img, .csd-beforeafter-row > video{ flex:1; min-width:0; display:block; width:100%; border-radius:4px; }
.csd-beforeafter-row > video{ pointer-events:none; }

@media (max-width:1400px){
  .csd-solutions-inner, .csd-design-inner, .csd-launch-inner, .csd-iterations-inner{ padding:0 var(--s6); }
}
@media (max-width:1100px){
  .csd-launch-inner{ flex-direction:column; align-items:flex-start; gap:var(--s8); }
  .csd-launch-text{ width:100%; }
  .csd-troubles, .csd-iterations-pairs, .csd-award{ flex-direction:column; }
  .csd-results-grid{ grid-template-columns:1fr; }
  .csd-troubles-card, .csd-iterations-pair, .csd-solutions-head, .csd-research-head, .csd-design-head{ width:100%; }
  .csd-results-head p, .csd-features-head{ width:100%; }
  .csd-iterations-solutions{ flex-direction:column; }
  .csd-iterations-solutions-text{ width:100%; }
  .csd-design-row{ flex-direction:column; }
  .csd-award-content{ max-width:100%; }
  .csd-discovery-row, .csd-features-row, .csd-story,
  .csd-narrative-row, .csd-painpoints-answer{ flex-direction:column; align-items:center; }
  /* The stack's images normally split the height of their sibling text
     column via align-self:stretch + flex:1 1 0 (desktop only — there's no
     such stretch target once .csd-features-row stacks to a column here,
     so flex:1 1 0's 0 basis would otherwise collapse them to nothing). */
  .csd-features-image-stack{ align-self:center; }
  .csd-features-image-stack img{ flex:none; width:100%; height:auto; }
  .csd-team{ display:flex; flex-direction:column; align-items:center; }
  .csd-discovery-col, .csd-features-col, .csd-team-col, .csd-impact, .csd-story-col,
  .csd-narrative-text, .csd-painpoints-quote, .csd-painpoints-answer-text, .csd-painpoints-intro{ width:100%; }
  .csd-beforeafter-row{ flex-direction:column; align-items:center; }
}
@media (max-width:720px){
  .csd-solutions-item{ width:100%; }
  .csd-solutions-image{ width:100%; }
  .csd-discovery-grid{ grid-template-columns:1fr; }
}
@media (max-width:500px){
  /* The 648:603 box is a desktop layout constant, not the shape of the
     assets that go in it — real screenshots (esp. portrait phone UI, e.g.
     driving-companion's features) were getting object-fit:contain-ed down
     to a fraction of the section width inside that fixed landscape box.
     Above this breakpoint the row has already stacked (see max-width:1100px)
     but the box stays at its fixed desktop size — only below it does the
     box drop the ratio and follow the image's own natural size at full
     section width; only empty .csd-placeholder slots (which have no
     intrinsic size of their own) keep the reserved 648:603 shape.
     width:100% carries !important because driving-companion's features
     row (content.js) can set an inline width style that would otherwise
     win over this rule. */
  .csd-discovery-image, .csd-features-image, .csd-team-image, .csd-story-image{ width:100% !important; height:auto; }
  .csd-discovery-image.csd-placeholder, .csd-features-image.csd-placeholder,
  .csd-team-image.csd-placeholder, .csd-story-image.csd-placeholder{ aspect-ratio:648/603; }
  .csd-story-image-tall{ aspect-ratio:648/879; }
  .csd-narrative-image, .csd-painpoints-answer-image{ width:100%; }
  .csd-beforeafter-image{ width:100%; }
}

/* ============================================================
   FOOTER
   ============================================================ */
#footer{ padding:var(--s9) 0; }
.footer-content{ display:flex; justify-content:center; }
.footer-links{
  display:flex; align-items:center;
  gap:var(--s6);
  font-size:var(--fs-base);
}
.footer-links a, .footer-links button{
  font-family:var(--font-accent); font-size:var(--fs-h3); font-weight:400;
  color:var(--white);
  padding:0; margin:0; border:none; background:none;
  cursor:pointer;
  transition:opacity .2s;
}
.footer-links a:hover, .footer-links a:focus-visible,
.footer-links button:hover, .footer-links button:focus-visible{ opacity:.7; }

/* ============================================================
   LIFE PAGE
   No scroll-driven motion here (unlike the work page's linework) —
   the two side lines are static, at the fixed edges of the 1440
   frame, running the full height of everything they wrap.
   ============================================================ */
.life-linework{
  position:relative;
  max-width:var(--frame);
  margin:0 auto;
}
.life-vline{
  position:absolute;
  top:0; bottom:0;
  width:1px;
  background:var(--black);
  opacity:.18;
  pointer-events:none;
  z-index:1;
}
.life-vline-left{ left:0; }
.life-vline-right{ right:0; }

/* Nav-clipped duplicates — nested inside .nav-inner itself (see life.html)
   instead of being separately fixed + calc-positioned, so they inherit its
   proven max-width:1440/margin:auto centering and its already-fixed
   position directly, rather than re-deriving both with a parallel
   position:fixed + calc(100vw...) formula that has to be kept in sync by
   hand on every resize. top:0/bottom:0 fills nav-inner's own box exactly,
   no JS measurement needed. */
.life-vline-nav{
  position:absolute;
  top:0; bottom:0;
  width:1px;
  background:var(--black);
  opacity:.18;
  pointer-events:none;
}
.life-vline-nav-left{ left:0; }
.life-vline-nav-right{ right:0; }

#life-hero{
  height:100vh;
  min-height:640px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.life-title{
  font-family:'Manic', sans-serif;
  font-size:var(--fs-h3);
  font-weight:400;
  line-height:normal;
  text-align:left;
  max-width:630px;
  margin:0 auto;
}
@media (min-width:901px){
  /* Positioned 89px in from the left vline (which sits at the frame's
     left edge) instead of centered — .content's own auto-centering is
     overridden here so it hugs that edge and the title's margin-left
     measures the 89px offset from it directly. */
  #life-hero .content{ margin-left:0; margin-right:auto; }
  .life-title{ width:480px; max-width:none; margin-left:89px; }
}

.life-gallery{
  position:relative;
  z-index:2; /* paints over the side lines, same as .content elsewhere */
  display:flex;
  flex-direction:column;
  gap:320px;
  margin-top:320px;
}
.life-photo{
  display:block;
  width:100%;
  height:auto;
}
.life-row{
  display:flex;
  align-items:center; /* centers the fixed-height Spotify embed against the taller photo */
  gap:var(--s9);
}
.life-row > *{ flex:1 1 0; min-width:0; }
.life-spotify iframe{ display:block; }

.page-life #footer{ margin-top:320px; }

/* ============================================================
   RESPONSIVE
   Figma values above are the 1440 desktop truth. Below that the
   fixed-width blocks need to reflow, but per spec OLESYA keeps its
   144px size all the way down to the mobile breakpoint — it does NOT
   scale with the viewport.
   ============================================================ */
@media (max-width: 1400px){
  .content{ padding:0 var(--s6); }
}
@media (max-width: 1100px){
  .intro-cards{ flex-wrap:wrap; }
}
@media (max-width: 900px){
  .intro-content{ margin-left:0; }
  #intro{ padding-top:140px; }
  .intro-cards{ margin-top:280px; }
  #case-studies{ margin-top:280px; }
  /* Below this width the Case Studies grid reflows to one column, so the
     two-column frame lines 1 & 4 bracket no longer applies. */
  .cs-grid{ grid-template-columns:1fr; }
  .cs-text{ width:100%; }
  .v-line{ display:none; }
  /* No hover on mobile — show the hover-state video by default instead of the static image. */
  .cs-visual-video{ opacity:1; }
  .life-row{ flex-direction:column; align-items:stretch; }
}
@media (max-width: 720px){
  /* Mobile type scale — swaps in at the same breakpoint the hero restacks,
     per spec. OLESYA drops to the mobile Display size here rather than
     shrinking gradually on the way down. */
  :root{
    --fs-display:55px;
    --fs-h1:34px;
    --fs-h2:28px;
    --fs-h3:21px;
  }
  .nav-links{ gap:var(--s6); }
  .nav-inner{ padding:var(--s4) var(--s6); }
  /* Lines 5 & 6 now bracket "OLESYA" and "Left" separately (they no longer
     share a row), so the two extra static lines join them — see
     positionMobileLines() in script.js. */
  .h-line-mobile{ display:block; }
  #intro{ padding-top:280px; } /* match .intro-cards' 280px gap on mobile */
  .hero-content{
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:var(--s4);
    padding:0 var(--s6);
    transform:none !important;
  }
  .hero-name{ order:-1; }
  .hero-left{ flex-direction:row; }
  .intro-content, .intro-text{ width:100%; max-width:350px; }
  #recommendations{ padding:80px 0; }
  .life-gallery{ gap:var(--s9); margin-top:var(--s9); }
  .page-life #footer{ margin-top:var(--s9); }
  .life-title{ width:220px; }
}
@media (max-width:430px){
  /* Below this width the case study visual breaks out to full viewport
     width edge-to-edge, using the same .bleed technique as section
     backgrounds. Above this width (down to the 900px single-column
     reflow) it stays sized to the card, inset by .content/.cs-card
     padding like everywhere else. */
  .cs-visual{ width:100vw; position:relative; left:50%; margin-left:-50vw; }
}