@import url("https://use.typekit.net/cha6esn.css");

/* Only the weights case-study pages use: 200 (h1 em), 300 (h1/h2).
   Pages needing an extra weight declare their own @font-face inline.
   No ExtraLight cut exists — the Thin file doubles as weight 200. */
@font-face {
  font-family: 'Merchant';
  src: url('Merchant/Merchant-Thin copy.ttf') format('truetype');
  font-weight: 200; font-style: normal;
}
@font-face {
  font-family: 'Merchant';
  src: url('Merchant/Merchant-Light copy.ttf') format('truetype');
  font-weight: 300; font-style: normal;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #0C0C0C;               /* page background — matches portfolio.css --bg */
  --ink:      #FFFFFF;
  --ink-2:    #D4D0C8;
  --ink-3:    #A6A299;               /* tertiary / labels — 7.7:1 on --bg, 7.2:1 on --surface (AAA) */
  --surface:  #161411;               /* lifted card / band surface */
  --paper:    #161411;               /* card surface (alias of --surface) */
  --divider:  #252320;
  --divider-mid: #3A3730;            /* ghost numerals, placeholder text */
  --accent:   #6BA3CA;               /* page accent, lightened for dark bg — the same blue on
                                        every case study (no page overrides) */
  --accent-light: rgba(107,163,202,0.12);  /* accent tint for callout backgrounds */
  --gold:     oklch(0.70 0.148 83);

  /* feedback colors — mirrors portfolio.css */
  --error:    #E5887A;        /* terracotta — error text/icons (password gate; 7.6:1 on --bg, AAA) */
  --success:  #A8D4A0;        /* sage — success text/icons */

  --animation-border: 8px solid var(--ink);  /* device-style frame around animation/prototype
                                                 loop videos — resolves to near-black inside the
                                                 case-body light band; the one sanctioned thick border */

  --merchant: 'Merchant';
  --utile:    'utile', 'utile-display';

  /* tracking scale — mirrors portfolio.css */
  --track-body:    0.01em;    /* body copy — a tiny bit of tracking for reading comfort */
  --track-text:    0.02em;    /* small text & title-case labels */
  --track-cta:     0.03em;    /* pill CTAs & buttons */
  --track-nav:     0.08em;    /* nav links */

  --text-body: clamp(1rem, calc(0.875rem + 0.35vw), 1.125rem);   /* Body tier — 16px floor (mobile), fluid to 18px cap on desktop (~1180px+) */


  --radius:   16px;           /* Default radius step — cards, media frames, callouts, fused shells.
                                 The other steps stay literal: 2px bar caps, 100px pills. */

  --max:      clamp(1100px, 82vw, 1200px);  /* fluid band — ramps from 1100 up to a 1200 ceiling
                                                so the content column grows smoothly across
                                                breakpoints instead of snapping. Lower ceiling than
                                                portfolio.css (1400) on purpose: case studies place
                                                single full-width images/grids in this band, so a
                                                narrower cap keeps them from sprawling. --pad gutters
                                                stay identical to the other pages for consistency. */
  --pad:      clamp(1.5rem, 5vw, 4rem);
  --content:  calc(var(--max) - 2 * var(--pad));  /* the single content column shared by every band.
                                                     .section/.hero-inner reach it by putting --pad
                                                     INSIDE their max-width:var(--max) box. The
                                                     full-width bands (gallery/stats/quotes/
                                                     more-projects/footer) pad their outer element
                                                     instead, so their centered inner caps at
                                                     --content to land on the SAME left/right edge —
                                                     one continuous gutter down the whole page. */

  /* readable line-length measure — WCAG 1.4.8 (AAA): keep text ≤80 characters/line.
     rem-based so it holds the char count if the user changes base font size.
     --measure ≈ 80 chars at 16px body; --measure-wide ≈ 78 chars at 22px H5 subhead. */
  --measure:      33rem;   /* ~528px — body copy; measured worst-case 79 chars at 16px/400 (34rem tipped to 81) */
  --measure-wide: 42rem;   /* ~672px — hero/subhead lead (22px/200 packs more chars; ~78) */
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--utile);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;      /* body copy floor — never smaller for legibility */
  font-weight: 400;     /* body-tier default — 400 regular. Thin 200 is reserved for
                           the H5 and Stat display tiers, which set it explicitly. */
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

/* ─── TYPE SYSTEM ─────────────────────────────────────────
   Same tier scale as portfolio.css — NOT a separate system. Case-study pages sit
   one level below the Work page, so there is no H1; the page title starts at H2.
   The values below are byte-identical to portfolio.css's H2/H3/H5 — keep in sync.
   <h1> page title   → H2 tier (Merchant 300, 6vw, lh 0.9)   [portfolio H2]
   <h2> section title→ H3 tier (Merchant 300, 3vw, lh 1.25)  [portfolio H3]
   <h3>/<h4> cards   → Body Bold (Utile 600) — card titles, same as the homepage
   Section headers use .section-label (H4). Body Utile 400 16px→18px lh 1.75. */
h1, .text-h1 {
  font-family: var(--merchant);
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* Titles follow their tier — an <em>/<i> in a heading never re-weights or italicizes it. */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.text-h1 em, .text-h2 em, .text-h3 em, .text-h4 em, .text-h5 em, .text-h6 em {
  font-weight: inherit;
  font-style: normal;
}

h2, .text-h2,
.more-project-name {   /* card cross-link title — same H3 tier, not a section header */
  font-family: var(--merchant);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h3, .text-h3,
h4, .text-h4 {
  font-family: var(--utile);
  font-weight: 600;
  font-size: var(--text-body);
  line-height: 1.5;
  letter-spacing: var(--track-body);
  color: var(--ink);
}

.text-subhead, .text-h5, .quote-text,
.problem-card h3, .stat-card-title {   /* card titles + quotes — H5 tier (thin), not bold body */
  font-family: var(--utile);
  font-weight: 200;
  font-size: clamp(1rem, 2vw, 1.375rem);   /* H5 cap 22px (was 1.6rem/25.6px — too large at ≥1440px) */
  line-height: 1.5;
  letter-spacing: var(--track-body);       /* slight tracking helps the thin 200 weight breathe */
  color: var(--ink-2);
}
/* card titles stay primary ink (hierarchy over the ink-2 body copy below) */
.problem-card h3, .stat-card-title { color: var(--ink); }

p, .text-body {
  font-family: var(--utile);
  font-weight: 400;                    /* Utile Regular — body reading weight (kit has no 300; 200 read too thin) */
  font-size: var(--text-body); letter-spacing: var(--track-body);   /* Body tier — 16px floor, fluid to 18px on desktop */
  line-height: 1.75;
  color: var(--ink-2);
  max-width: var(--measure);           /* WCAG 1.4.8 — cap body line length ≤80 chars */
}

strong, b, .text-body-bold {
  font-family: var(--utile);
  font-weight: 600;
  font-size: var(--text-body); letter-spacing: var(--track-body);
  line-height: 1.75;
}
/* Body-tier text on non-<p> elements — one definition. Per-component line-height
   and max-width deltas live in each component below. */
.meta-value, .outcome-desc, .callout-body,
.stat-label, .metric-label, .research-stat-label {
  font-size: var(--text-body);
  letter-spacing: var(--track-body);
  line-height: 1.75;
  color: var(--ink-2);
}

.text-link {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  color: inherit;
  transition: color 0.2s;
}
.text-link:hover { color: var(--ink); }

/* ── WIDOWS & ORPHANS ──
   No single word or line may dangle at the start or end of a text
   block (a widow/orphan). Headings, titles, subheads, and short
   labels BALANCE their lines (text-wrap: balance) so a lone trailing
   word can't strand; flowing body copy uses text-wrap: pretty, which
   lets the browser avoid a very short orphan last line. Both are
   progressive enhancements, safely ignored where unsupported. Applied
   at the type tiers + case-study blocks so every section inherits it —
   see DESIGN.md → Typography → Widows & orphans. */
h1, h2, h3, h4, h5, h6,
.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6,
.text-subhead, .section-label, .hero-sub, .hero-tldr,
.highlight-statement, .more-projects-title,
.more-project-name, .stat-card-title, .asset-label,
.meta-value, .stat-label, .metric-label, .research-stat-label,
.gallery-caption, .gallery-sub, .quote-attr {
  text-wrap: balance;
}
p, .text-body, .prose,
.outcome-desc, .callout-body, .quote-text {
  text-wrap: pretty;
}

/* ── DISPLAY NUMBERS ──
   All display numbers use the H3 accent-title style (Merchant 300) — no separate
   Stat tier. Color and margins stay per component. */
.stat-num, .outcome-num, .research-stat-num, .problem-num, .metric-num {
  font-family: var(--merchant);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* ── NAV ──
   Exact port of the portfolio.css nav so the header is identical on
   every page. The bar's glass background is --bg at 92% alpha
   (kept as a literal rgba — alpha variants aren't tokenized). */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Full-bleed bar: logo/links sit at the --pad edge (64px on desktop), identical on
     every page. NOT aligned to the --content column on purpose — --content differs
     between case studies and the homepage, so aligning would jump the nav per page. */
  padding: 0 var(--pad);
  background: rgba(12,12,12,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 28px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.nav-links a {
  font-family: var(--utile);
  font-size: 0.875rem; /* H6 tier — 14px */
  font-weight: 400;
  letter-spacing: var(--track-nav);
  text-transform: none;
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-links a:hover { color: var(--ink); }

.nav-links a.active {
  color: var(--ink);
  font-weight: 600; /* Body Bold — active/selected weight (matches filter active) */
}

.nav-links a::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url('Right Parentheses.svg') center / contain no-repeat;
  flex-shrink: 0;
  opacity: 0;
}

.nav-links a::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url('Left Parentheses.svg') center / contain no-repeat;
  flex-shrink: 0;
  opacity: 0;
}

.nav-links a.active::before,
.nav-links a.active::after {
  opacity: 1;
}

/* ── HAMBURGER TOGGLE (matches portfolio.css) ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 210;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 640px) {
  .nav-toggle { display: flex; }

  .nav-links {
    display: none;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 60px;
    left: 0; right: 0;
    bottom: 0;
    background: var(--bg);
    padding: 1.5rem var(--pad) 2rem;
    border-top: 1px solid var(--divider);
    overflow-y: auto;
  }

  .nav-links.is-open { display: flex; }

  /* When the menu is open, make the bar opaque too so no page content shows through */
  nav:has(.nav-links.is-open) {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-links li { border-bottom: 1px solid var(--divider); }

  .nav-links a {
    padding: 1rem 0;
    font-size: 1rem;
    width: 100%;
  }

  /* Crescent parentheses are a desktop-only accent — hide on all links so
     the active and inactive links stay left-aligned (no reserved space) */
  .nav-links a::before,
  .nav-links a::after {
    display: none;
  }
}

/* ── CASE BODY — LIGHT INTERIOR BAND ──
   Everything below the hero and above More Projects sits in an inverted
   white band for long-form legibility (the hero, More Projects, and footer
   keep the dark theme). Components are unchanged — custom properties
   cascade, so re-scoping the tokens flips every section, card, and callout.
   All text pairs pass WCAG AAA (7:1) on white and on the light --surface. */
.case-body {
  --bg:       #FFFFFF;               /* the inverse band — matches the footer's white */
  --ink:      #0C0C0C;
  --ink-2:    #3E434A;               /* secondary text — cool slate, 10.0:1 on white, 9.1:1 on surface */
  --ink-3:    #4B5158;               /* tertiary / labels — cool slate, 8.0:1 on white, 7.3:1 on surface */
  --surface:  #F3F4F6;               /* lifted card / band — cool slate lift */
  --paper:    #F3F4F6;
  --divider:  #E2E4E8;
  --divider-mid: #C3C7CC;            /* ghost numerals — decorative only */
  --accent:   #264F66;               /* page accent, darkened for white — 8.8:1 / 8.0:1 / 7.5:1 on tint */
  --accent-mid: #3679B0;             /* medium-light accent — the brighter emphasis blue between the
                                        dark shell's #6BA3CA and this band's #264F66. 4.65:1 on white:
                                        LARGE/BOLD text (≥18.66px at 600) and decorative glyphs only —
                                        quote emphasis + quote marks. Never body-size text. */
  --accent-light: rgba(38,79,102,0.10);
  /* Composite tokens bake in var() at the scope where they're declared, so the
     :root version keeps the dark theme's white ink — re-declare to pick up this
     band's ink and render the device frame dark on white. */
  --animation-border: 8px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
}
/* The highlight cell still inverts — now to dark-on-light. Its secondary text
   is the light-band counterpart of the dark theme's --bg-at-72% literal. */
.case-body .outcome-card.highlight .outcome-desc { color: rgba(255,255,255,0.82); }

/* ── HERO ── */
.hero {
  padding: clamp(104px, 11vw, 124px) 0 clamp(60px, 8vw, 100px);
  background: var(--bg);
}
.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);   /* mirrors .section's box model so the hero image and title
                              sit in the same content column as the body sections (same
                              horizontal gutters) — no 20px jog between hero and content */
}
.hero h1 {
  color: var(--ink);
  margin-bottom: 1.5rem;
  max-width: 1000px;   /* was 820px — too narrow, forced the intended 2-line title to wrap to 3 (long line needs ~893px) */
}
.hero-sub {
  /* H5 tier */
  font-family: var(--utile);
  font-weight: 200;
  font-size: clamp(1rem, 2vw, 1.375rem);   /* H5 cap 22px (was 1.6rem/25.6px — too large at ≥1440px) */
  line-height: 1.5;
  letter-spacing: var(--track-body);       /* slight tracking helps the thin 200 weight breathe */
  color: var(--ink-2);
  max-width: var(--measure-wide);   /* ~78 chars at 22px — WCAG 1.4.8 AAA ≤80 (was 600px/~67) */
  margin-bottom: 3rem;
}
/* 10-second scan line — outcome-first dek between the title and the hero-sub.
   No custom size: it is the Body tier in the blue --accent. */
.hero-tldr {
  font-family: var(--utile);
  font-weight: 400;
  font-size: var(--text-body);
  letter-spacing: var(--track-body);
  line-height: 1.75;
  color: var(--accent);
  max-width: var(--measure-wide);
  margin: -0.5rem 0 1.25rem;   /* pull up under the title, then breathe before the sub */
}
.hero-image {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 2.5rem;
}
/* Span the full content width at its native aspect ratio — no cropping, no
   height cap. Because .hero-inner mirrors .section's box model, this fills the
   same content column as the body sections at every breakpoint. height:auto is
   required to release the img's height attribute (see the full-width-image rule). */
.hero-image img { display: block; width: 100%; height: auto; }

/* ── META STRIP ── */
.meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
/* ── EYEBROW ──
   Small label above content. H6 tier, regular casing (never uppercase). The one
   reusable label class — use it instead of ad-hoc inline label styling.
   Add .accent for the blue variant. */
.eyebrow,
.meta-label, .quotes-label, .quote-attr, .layer-header-text,
.research-highlight-label, .layer-label, .callout-label {
  font-family: var(--utile);
  font-weight: 400;             /* H6 tier — 400 at 14px */
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: var(--track-text);
  color: var(--ink-3);
}
.eyebrow { margin-bottom: 0.5rem; }
.eyebrow.accent,
.research-highlight-label, .layer-label, .callout-label { color: var(--accent); }

.meta-label { margin-bottom: 0.25rem; }   /* eyebrow type from the shared rule */
/* ── SECTIONS ── */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(60px, 8vw, 100px) var(--pad);
}
.section-label {
  /* H4 tier — section kicker. Semantically an <h2> (screen-reader navigation);
     visually unchanged — this class overrides the Merchant h2 element styles. */
  font-family: var(--utile);
  font-size: clamp(1.1rem, 2.25vw, 1.8rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 1rem;
}
.section h2:not(.section-label) {
  margin-bottom: 1.25rem;
}
.prose {
  max-width: var(--measure);   /* was 640px (~92 chars) — WCAG 1.4.8 ≤80 */
}
.prose + .prose { margin-top: 1rem; }

/* ── PROBLEM CARDS ── */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
.problem-num {
  /* H3 tier — display number */
  color: var(--divider-mid);
  margin-bottom: 0.5rem;
}
.problem-card h3 { margin-bottom: 0.35rem; }

/* ── TWO COL ── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
  margin-top: 2.5rem;
}

/* ── ASSET LABELS ──
   Accent Title Case micro-label placed ABOVE a case-study asset, naming its
   artifact type (Sitemap, User Personas, Wireframes, Final Screens, …) so a
   scanning reader knows what each image is before reading it. Colored with
   --accent (re-scopes to #264F66 on the white .case-body — AAA at 14px; gold is
   too light to pass at this size). Title Case is authored in the markup (no
   text-transform), tracked at --track-text (title-case labels, not the wider
   uppercase-eyebrow track). Every label is a direct child of the content column
   so they all share one left edge down the page — never nested inside a grid
   cell, centered figure, or offset (width:50%) block. */
/* Bold micro-label — H6 tier at weight 600. Shared by asset labels + gallery captions. */
.asset-label, .gallery-caption {
  font-family: var(--utile);
  font-weight: 600;
  font-size: 0.875rem;               /* H6 tier — 14px */
}
.asset-label {
  display: flex;
  align-items: center;
  line-height: 1.4;
  letter-spacing: var(--track-text); /* Title Case — small-text tracking, not the eyebrow track */
  color: var(--accent);
  margin-bottom: 0.85rem;
}
/* A stack of labelled assets: the wrapper spaces each block from the last so a
   label always clears the image above it. Opt-in, so it never fights grid/flex
   gaps that already handle separation. */
.asset-stack { display: flex; flex-direction: column; gap: 2.5rem; }

/* ── SCREENS GALLERY ── */
.gallery-section {
  padding: clamp(60px, 8vw, 100px) var(--pad);
}
.gallery-inner { max-width: var(--content); margin: 0 auto; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--divider);
  background: var(--paper);
}
.gallery-item img { width: 100%; height: auto; display: block; }
.gallery-caption { padding: 0.75rem 1rem; color: var(--ink); border-top: 1px solid var(--divider); }   /* bold micro-label type from the shared rule */
.gallery-sub { font-size: 0.875rem; /* H6 tier — 14px */ color: var(--ink-3); font-weight: 400; /* H6 floor — 400 min at 14px */ margin-top: 0.15rem; line-height: 1.5; }
.gallery-wide { grid-column: span 2; }
.gallery-full { grid-column: span 3; }

/* ── OUTCOME GRID ── */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--divider);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 2.5rem;
}
.outcome-card { background: var(--paper); padding: 2rem 1.5rem; }
/* highlight inverts to white — mirrors the site's inverted footer emphasis */
.outcome-card.highlight { background: var(--ink); }
.outcome-num {
  /* H3 tier — display number */
  margin-bottom: 0.5rem;
  color: var(--ink);
}
.outcome-card.highlight .outcome-num { color: var(--bg); }
.outcome-card.highlight .outcome-desc { color: rgba(12,12,12,0.72); }

/* ── HIGHLIGHT STATEMENT ──
   An emphasized statement — a distilled insight or thesis called out from the
   surrounding copy. Borderless by design so it reads as emphasized text, not a
   boxed aside. No custom size: it is the system's Body Bold tier (Utile 600) in
   the blue --accent (re-scopes to #264F66 inside .case-body — 8.8:1 on white,
   AAA). Emphasis comes from weight + color, not a bespoke size. */
.highlight-statement {
  font-family: var(--utile);
  font-weight: 600;
  font-size: var(--text-body);
  letter-spacing: var(--track-body);
  line-height: 1.75;
  color: var(--accent);
  max-width: var(--measure-wide);
  margin: 0 0 1.75rem;
}
/* Inline form of the same emphasis: a <span> for accenting a phrase INSIDE a
   body-tier block (metric labels, prose) without pulling it out into its own
   statement. Inherits the parent's size/leading; adds only the weight + accent
   pair above. */
.accent-em {
  font-weight: 600;
  color: var(--accent);
}

/* ── CASE IMAGE ──
   The standard full-width rounded content image — replaces the inline
   width/display/radius styles that used to repeat on every case page. */
.case-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

/* ── DESKTOP SCROLL DEMO ──
   Full-page scroll captures (1518×1080). The frame takes the capture's own
   1518:1080 ratio so the video fills it edge-to-edge (no letterbox). It fills
   the padded content column to match the other desktop prototypes' width, BUT
   is capped so its height never exceeds 80vh — on shorter laptop viewports the
   width backs off (80vh × ratio) and the frame shrinks, centered, so the whole
   animation stays visible without scrolling the page. */
.scroll-demo {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.scroll-demo-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--animation-border);
  background: var(--ink);   /* fills any subpixel sliver so no white line shows */
  font-size: 0;             /* kill inline-baseline gap under the video */
  width: min(100%, 80vh * 1518 / 1080);
  aspect-ratio: 1518 / 1080;
}
.scroll-demo-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── PLACEHOLDER VISUAL ── */
.placeholder-visual {
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);   /* the label is information ("Screens coming soon") — divider-mid (1.54:1) is decorative-only */
  font-family: var(--utile);
  font-size: var(--text-body); letter-spacing: var(--track-body);
  font-weight: 400;
  letter-spacing: var(--track-text);
}

/* ── FOOTER ── */
/* Inverted white footer — exact port of portfolio.css */
.footer {
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--pad) clamp(2rem, 4vw, 2.75rem);
  background: var(--ink);
}
.footer-inner {
  max-width: var(--content);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2.5rem, 6vw, 5.5rem);
}
.footer-col h4 { color: var(--bg); margin-bottom: 0.4rem; }  /* matches portfolio.css exactly */
.footer-col p, .footer-col a { font-family: var(--utile); font-weight: 400; font-size: 0.875rem; line-height: 1.75; color: var(--bg); opacity: 0.75; text-decoration: none; display: block; }
.footer-col a:hover { opacity: 1; }

@media (max-width: 640px) {
  .footer-inner { gap: 2rem; }
}

/* ── STATS BAR ── */
/* Impact metrics just below the hero */
.stats-bar {
  padding: clamp(3rem, 5vw, 4.5rem) var(--pad);
}
.stats-inner {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  text-align: center;
}
.stat-num {
  /* H3 tier — display number */
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.stat-label { line-height: 1.5; }   /* Body tier from the shared rule; tighter lh here */

/* ── METRICS ──
   Un-boxed stat display: a Stat-tier number + a subtitle line on the plain
   page ground — the portfolio's normal number/subtitle look, no gray card. */
.metrics {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: 2.5rem;
}
.metrics.cols-2 { grid-template-columns: repeat(2, 1fr); }
.metrics.cols-3 { grid-template-columns: repeat(3, 1fr); }
.metric-num { color: var(--ink); margin-bottom: 0.5rem; }
.metric-label { line-height: 1.6; max-width: 30rem; }   /* Body tier from the shared rule */
@media (max-width: 640px) {
  .metrics.cols-2, .metrics.cols-3 { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── RESEARCH STATS ── */
/* 3-col stat grid with accent top border — cohort sizes, confidence, metrics */
.research-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--divider);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 2.5rem;
}
.research-stat {
  background: var(--paper);
  padding: 2rem 1.5rem;
  border-top: 3px solid var(--accent);
}
.research-stat-num {
  /* H3 tier — display number */
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.research-stat-label { line-height: 1.5; }   /* Body tier from the shared rule */
/* ── QUOTE CARDS ── */
/* Verbatim user / stakeholder quotes */
.quotes-section {
  padding: clamp(60px, 8vw, 100px) var(--pad);
}
.quotes-inner { max-width: var(--content); margin: 0 auto; }
/* Hairline frame around the whole quote grid — same treatment as a case image */
.quotes-frame {
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.quotes-label { margin-bottom: 1rem; }   /* eyebrow type from the shared rule */
.quotes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.quote-card {
  padding: 1.5rem 2rem;
}
.quote-mark {
  /* Matches the quote's bold emphasis (.accent-em): H5 size inherited from
     .quote-text, Utile 600, --accent-mid. Inline curly marks bracket the quote. */
  color: var(--accent-mid);
  font-weight: 600;
}
/* Hang the opening mark into the left margin so the first word stays flush;
   snug the closing mark against the final character. */
.quote-text .quote-mark:first-child { margin-left: -0.4rem; margin-right: 0.05rem; }
.quote-text .quote-mark:last-child  { margin-left: 0.05rem; }
.quote-text { margin-bottom: 0.5rem; }   /* H5 tier from the shared rule; 0.5rem step ties attr to its quote */
/* Quote emphasis rides the brighter --accent-mid (AAA-large at the H5 size);
   .accent-em elsewhere (metric labels, body) stays on the darker --accent. */
.quote-text .accent-em { color: var(--accent-mid); }
/* .quote-attr — eyebrow type from the shared rule (no deltas) */

/* ── SYSTEM / ARCHITECTURE LAYERS ── */
/* Show LLM pipeline, design system layers, or multi-tier architecture */
.system-layers {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--divider);
}
.layer {
  background: var(--paper);
  padding: 1.5rem 2rem;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 2rem;
  align-items: start;
}
.layer-label { padding-top: 0.2rem; }   /* accent eyebrow from the shared rule */
.layer-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.layer-header {
  background: var(--divider);
  padding: 1rem 2rem;
}
/* .layer-header-text — eyebrow type from the shared rule (no deltas) */

/* ── MORE PROJECTS ── */
/* Cross-links to the other case studies, above the footer on every case study page */
.more-projects {
  padding: clamp(60px, 8vw, 100px) var(--pad);
}
.more-projects-inner { max-width: var(--content); margin: 0 auto; }
.more-projects-title {
  /* H2 tier — Merchant accent title */
  font-family: var(--merchant);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.more-projects-title span { flex-shrink: 0; }
.more-projects-title-arrow { width: 50px; height: auto; display: block; transform: translateY(0.1em); }
.more-projects-title-arrow.flip { transform: scaleX(-1) translateY(0.1em); }
.more-projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.more-project-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.more-project-card:hover { transform: translateY(-5px); }
.more-project-visual {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--divider);
  aspect-ratio: 16 / 10;
  background: var(--surface);
}
.more-project-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s ease, filter 0.35s ease;
}
.more-project-card:hover .more-project-visual img {
  transform: scale(1.03);
  filter: brightness(1.05);
}
.more-project-name {
  /* H3 tier comes from the shared rule above; only the spacing delta lives here */
  margin-top: 1.25rem;
}

/* ── RESPONSIVE ── */
@media (max-width: 760px) {
  .more-projects-grid { grid-template-columns: 1fr; gap: 2.75rem; }
  .two-col { grid-template-columns: 1fr; }
  .problem-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-wide, .gallery-full { grid-column: span 1; }
  .outcome-grid { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: 1fr; text-align: left; }
  .research-stats { grid-template-columns: 1fr; }
  /* Stacked quotes: card padding + gap sum to the page's 2.5rem rhythm
     (1rem + 0.5rem + 1rem) — the two-column paddings read too airy stacked. */
  .quotes-grid { grid-template-columns: 1fr; gap: 0.5rem; }
  .quote-card { padding: 1rem 1.25rem; }
  .layer { grid-template-columns: 1fr; gap: 0.5rem; }
}