/* ============================================================
   SHARED — design system for the homepage and project pages.
   NOTE: url() paths are relative to THIS file (css/),
   so assets resolve via ../assets/...
   ============================================================ */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --primary: #141413;
  --primary-active: #3d3d3a;
  --primary-disabled: #e6dfd8;
  --success: #5db872;

  --ink: #141413;
  --body: #3d3d3a;
  --body-strong: #252523;
  --muted: #6c6a64;
  --muted-soft: #8e8b82;
  --on-primary: #ffffff;
  --on-dark: #faf9f5;
  --on-dark-soft: #a09d96;

  --canvas: #faf9f5;
  --surface-soft: #f5f0e8;
  --surface-card: #efe9de;
  --surface-cream-strong: #e8e0d2;
  --surface-dark: #181715;
  --surface-dark-elevated: #252320;
  --surface-dark-soft: #1f1e1b;
  --hairline: #e6dfd8;
  --hairline-soft: #ebe6df;

  --r-xs: 4px;  --r-sm: 6px;  --r-md: 8px;
  --r-lg: 12px; --r-xl: 16px; --r-pill: 9999px;

  --s-xxs: 4px; --s-xs: 8px;  --s-sm: 12px; --s-md: 16px;
  --s-lg: 24px; --s-xl: 32px; --s-xxl: 48px; --s-section: 96px;

  --font-display: "Cormorant Garamond", "EB Garamond", "Tiempos Headline", Garamond, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 40px; }
.wrap--narrow { max-width: 820px; }

.display-xl, .display-lg, .display-md, .display-sm {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
}
.display-xl { font-size: clamp(40px, 6.4vw, 68px); line-height: 1.03; letter-spacing: -1.5px; }
.display-lg { font-size: clamp(34px, 4.6vw, 48px); line-height: 1.1; letter-spacing: -1px; }
.display-md { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; letter-spacing: -0.5px; }
.display-sm { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -0.3px; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 500; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
}
.lead { font-size: 18px; line-height: 1.55; color: var(--body-strong); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1;
  height: 44px; padding: 0 22px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:active { background: var(--primary-active); }
.btn--secondary { background: var(--canvas); color: var(--ink); border-color: var(--hairline); }
.btn--secondary:active { border-color: var(--muted-soft); }

.textlink {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--primary); font-weight: 500; font-size: 15px;
}
.textlink .arrow { transition: transform .2s ease; }
.textlink:hover .arrow { transform: translateX(4px); }
.textlink--back .arrow { transition: transform .2s ease; }
.textlink--back:hover .arrow { transform: translateX(-4px); }

/* ============================================================
   SPIKE MARK
   ============================================================ */
.spike { width: 20px; height: 20px; flex: none; }
.spike path { fill: currentColor; }

/* ============================================================
   TOP NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: #ffffff; border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.nav.scrolled {
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--hairline);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 600; font-size: 17px; letter-spacing: -0.2px; }
.brand__logo { height: 36px; width: auto; display: block; }
.nav__menu { display: flex; gap: 4px; }
.nav__link {
  font-size: 14px; font-weight: 500; color: var(--body); padding: 8px 14px;
  border-radius: var(--r-md); transition: background-color .15s ease, color .15s ease;
}
.nav__link:hover { background: var(--surface-card); color: var(--ink); }
.nav__right { display: flex; align-items: center; gap: 10px; }
.nav__icon {
  width: 38px; height: 38px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--canvas); border: 1px solid var(--hairline); color: var(--ink);
  transition: background-color .15s ease;
}
.nav__icon:hover { background: var(--surface-card); }
.nav__pill {
  height: 38px; padding: 0 16px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--canvas); border: 1px solid var(--hairline); color: var(--ink);
  font-size: 14px; font-weight: 500; transition: background-color .15s ease;
}
.nav__pill:hover { background: var(--surface-card); }
.nav__burger { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; }

/* mobile sheet */
.sheet { position: fixed; inset: 0; z-index: 60; background: var(--canvas); transform: translateY(-100%); transition: transform .3s ease; padding: 24px 28px; display: flex; flex-direction: column; }
.sheet.open { transform: none; }
.sheet__head { display: flex; justify-content: space-between; align-items: center; height: 40px; margin-bottom: 40px; }
.sheet a.nav__link { font-family: var(--font-display); font-weight: 500; font-size: 34px; letter-spacing: -1px; color: var(--ink); padding: 14px 0; border-bottom: 1px solid var(--hairline-soft); border-radius: 0; }
.sheet a.nav__link:hover { background: none; }
.sheet__close { background: none; border: 0; color: var(--ink); cursor: pointer; font-size: 28px; line-height: 1; }

/* ============================================================
   PROJECT HERO
   ============================================================ */
.project-hero { padding-block: clamp(40px, 6vw, 80px) clamp(40px, 5vw, 64px); background-color: #ffffff; }
.p-back { margin-bottom: clamp(24px, 4vw, 40px); }
.p-back .textlink { color: var(--muted); font-size: 14px; }
.p-back .textlink:hover { color: var(--ink); }

.project-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.project-hero__eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.project-hero__eyebrow .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--muted-soft); }
.project-hero h1 { margin-bottom: 22px; }
.project-hero__sub { max-width: 34ch; margin-bottom: 30px; }

.p-meta { display: flex; flex-wrap: wrap; gap: 28px 44px; padding-top: 26px; border-top: 1px solid var(--hairline); }
.p-meta__item { min-width: 0; }
.p-meta__k { font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted-soft); margin-bottom: 7px; }
.p-meta__v { font-size: 14px; color: var(--body-strong); font-weight: 500; }

/* Hero mockup panel — textured like the homepage case media */
.project-hero__media {
  position: relative; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 4vw, 52px); min-height: 340px;
  border: 1px solid var(--hairline); border-radius: var(--r-xl);
  background-color: var(--panel, #f0eee7);
  background-image: url("../assets/img/Bgnd.webp");
  background-size: cover; background-repeat: no-repeat; background-position: center;
  background-blend-mode: multiply;
  overflow: hidden;
}
.project-hero__media img { width: 100%; max-width: 520px; object-fit: contain; }
/* Overlay copy of eyebrow + title — shown only on mobile (see responsive) */
.project-hero__overlay { display: none; }

/* Web view: the SAME diagonal clip-path reveal used on the landing-page hero
   photo — wipes in from the right, rests as an angled parallelogram (right edge
   straight, diagonal cut on the left). Reset to a plain rounded panel on mobile
   (see responsive section). */
@keyframes heroReveal {
  from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
  to   { clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%); }
}
@media (min-width: 901px) {
  /* Web view: the mockup panel bleeds to the top & bottom of the hero section
     (section padding removed → moved onto the text column, which stays centered). */
  .project-hero { padding-block: 0; }
  .project-hero__grid { align-items: stretch; }
  .project-hero__text { align-self: center; padding-block: clamp(48px, 7vw, 96px); }
  .project-hero__media {
    border: 0; border-radius: 0; min-height: 0;
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
    animation: heroReveal 1.2s cubic-bezier(0, 0.55, 0.45, 1) both;
  }
}

/* ============================================================
   NARRATIVE SECTIONS  (sticky label + prose)
   ============================================================ */
.narrative { padding-block: clamp(56px, 8vw, var(--s-section)); }
.narrative--soft { background-color: var(--surface-soft); border-block: 1px solid var(--hairline-soft); }
.narrative__grid { display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.narrative__label { position: sticky; top: 96px; }
.narrative__label .eyebrow { display: block; margin-bottom: 10px; }
.narrative__label .num { font-family: var(--font-display); font-size: 42px; font-weight: 500; color: var(--muted); line-height: 1; letter-spacing: -1px; }
.narrative__body { max-width: 66ch; }
.narrative__body h3 { margin-bottom: 20px; }
.narrative__body p { margin-bottom: 20px; color: var(--body); }
.narrative__body p:last-child { margin-bottom: 0; }
.narrative__body p.lead { color: var(--body-strong); }
.narrative__body strong { color: var(--body-strong); font-weight: 600; }
.narrative__body ul { list-style: none; margin: 4px 0 24px; }
.narrative__body li { position: relative; padding-left: 26px; margin-bottom: 14px; color: var(--body); }
.narrative__body li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--surface-cream-strong); border: 1px solid var(--muted-soft); }
/* Sub-scenarios nested under a parent bullet — hollow dot to read one level down */
.narrative__body li > ul { margin: 12px 0 0; }
.narrative__body li li { margin-bottom: 10px; }
.narrative__body li li:last-child { margin-bottom: 0; }
.narrative__body li li::before { background: transparent; }
/* Subheads that split a narrative body into beats (e.g. Research). Scoped to the
   direct child so the .ps__h inside problem/solution columns keeps its own spacing. */
.case-body > .ps__h { margin-top: 44px; }
.case-body > .ps__h:first-child { margin-top: 0; }

/* Figure block — constrained width so device mockups stay reasonably sized */
.figure-block { margin: 8px 0 4px; display: flex; flex-direction: column; align-items: center; }
.figure-block figure { border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-card); max-width: 700px; margin-inline: auto; }
.figure-block img { max-width: 100%; width: auto; display: block; height: auto; margin-inline: auto; }
/* caption lives inside the frame, as a bar under the image — same as .figure-grid / .fig-wide */
.figure-block figcaption { font-size: 13px; color: var(--muted); padding: 12px 16px; background: var(--canvas); border-top: 1px solid var(--hairline-soft); }

/* ============================================================
   OUTCOMES / METRICS
   ============================================================ */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 6px; }
.metric { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 28px 26px; }
.metric .n { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 4.4vw, 52px); line-height: 1; color: var(--ink); letter-spacing: -1px; margin-bottom: 12px; }
.metric .l { font-size: 14px; color: var(--muted); }

/* ============================================================
   STAT BAND  (headline impact, sits right under the hero)
   ============================================================ */
.stat-band { background-color: var(--surface-soft); border-block: 1px solid var(--hairline-soft); padding-block: clamp(30px, 4vw, 46px); }
.stat-band__grid { display: flex; flex-wrap: wrap; gap: 28px 56px; }
.stat-band__item { display: flex; flex-direction: column; gap: 8px; }
.stat-band__n { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 4vw, 46px); line-height: 1; letter-spacing: -1px; color: var(--ink); }
.stat-band__l { font-size: 13px; color: var(--muted); max-width: 26ch; }

/* ============================================================
   PULL QUOTE  (verbatim user voice)
   ============================================================ */
.pullquote { margin: 6px 0 26px; padding-left: 22px; border-left: 2px solid var(--surface-cream-strong); }
.pullquote p { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 2.2vw, 25px); line-height: 1.32; letter-spacing: -0.3px; color: var(--body-strong); margin: 0; }
.pullquote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: var(--muted); }

/* ============================================================
   PERSONA CARD  (target user)
   ============================================================ */
.persona { display: grid; grid-template-columns: auto 1fr; gap: 4px 22px; align-items: center; background-color: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 32px); }
.persona__badge { grid-row: span 2; width: 60px; height: 60px; border-radius: var(--r-pill); background: var(--surface-card); border: 1px solid var(--hairline); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 500; font-size: 26px; color: var(--ink); }
.persona__name { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.3px; color: var(--ink); align-self: end; }
.persona__role { font-size: 13px; color: var(--muted); align-self: start; }
.persona__attrs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--hairline-soft); }
.persona__attr .k { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted-soft); margin-bottom: 5px; }
.persona__attr .v { font-size: 14px; color: var(--body-strong); }

/* ============================================================
   PRINCIPLES GRID  (design principles / guardrails)
   ============================================================ */
.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 6px 0 8px; }
.principle { background-color: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 24px; }
.principle__n { font-family: var(--font-mono); font-size: 12px; color: var(--muted-soft); letter-spacing: 1px; }
.principle__t { font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: -0.2px; color: var(--ink); margin: 10px 0 8px; }
.principle p { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; }
.principle ul { list-style: none; margin: 0; padding: 0; }
.principle li { position: relative; padding-left: 18px; margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.principle li:last-child { margin-bottom: 0; }
.principle li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--surface-cream-strong); border: 1px solid var(--muted-soft); }
/* Cards stacked in a column beside an asset rather than spread across the measure. */
.principles--stack, .case-body .principles.principles--stack { grid-template-columns: 1fr; max-width: 520px; }

/* ============================================================
   PROBLEM → SOLUTION  (before / after iteration rows)
   ============================================================ */
.ps__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; padding-block: clamp(30px, 4vw, 46px); border-top: 1px solid var(--hairline); }
.ps__row:first-child { border-top: 0; padding-top: 6px; }
.ps__col { min-width: 0; display: flex; flex-direction: column; }
/* Order: label -> heading ("eyebrow") -> description. Rows that carry a
   screenshot use .fig-split instead, which sets the image beside the text. */
.ps__col > .ps__tag { order: 1; align-self: flex-start; }
.ps__col > .ps__h { order: 2; }
.ps__col > p { order: 3; }
.ps__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 12px; }
.ps__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Neutral by design — the label text carries the meaning, not a colour code. */
.ps__tag--problem { color: var(--muted); }
.ps__tag--solution { color: var(--muted); }
.ps__h { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 2vw, 22px); line-height: 1.22; letter-spacing: -0.2px; color: var(--ink); margin-bottom: 12px; }
.ps__col p { font-size: 15px; color: var(--body); margin-bottom: 12px; }
.ps__col p:last-child { margin-bottom: 0; }

/* ============================================================
   FIGURE GRID  (2-up screenshots) — pairs with .figure-block
   ============================================================ */
.figure-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 8px auto 4px; max-width: 900px; }
/* equal-height cards: image centers in the space above, caption pins to the
   bottom so the two captions line up even when the shots differ in height */
.figure-grid figure { border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-card); display: flex; flex-direction: column; }
.figure-grid img, .figure-grid video { max-width: 100%; width: auto; display: block; height: auto; margin-inline: auto; margin-block: auto; }
.figure-grid figcaption { margin-top: auto; }
.figure-grid figcaption { font-size: 12px; color: var(--muted); padding: 10px 14px; background: var(--canvas); border-top: 1px solid var(--hairline-soft); }

/* ============================================================
   CASE FIGURES  (big, full-content-width images)
   ============================================================ */
/* stacked .wrap blocks inside one narrative section get spacing between them */
.narrative > .wrap + .wrap { margin-top: 30px; }
.case-figs { display: flex; flex-direction: column; gap: 20px; }
.fig-wide { border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-card); }
.fig-wide img, .fig-wide video { max-width: 100%; width: auto; display: block; height: auto; margin-inline: auto; }
.fig-wide figcaption { font-size: 13px; color: var(--muted); padding: 12px 16px; background: var(--canvas); border-top: 1px solid var(--hairline-soft); }
/* portrait screenshots (e.g. a phone view) stay centered at a sane width */
.fig-wide--portrait { max-width: 440px; margin-inline: auto; }

/* ------------------------------------------------------------
   SPLIT FIGURE — asset on one side, describing text on the other.
   The house pattern for ANY screen asset (phone or desktop): never
   stack the description under the image. Default is shot-left /
   text-right; add --flip to read text-left / shot-right, which is
   how consecutive rows should alternate.
     .fig-split            desktop/wide screenshot (media leads)
     .fig-split--phone     phone asset, media capped at phone width
     .fig-split--flip      mirror the columns
   Markup order is always shot-then-text so mobile stacks image first.
   ------------------------------------------------------------ */
.fig-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; text-align: left; }
.fig-split--phone { grid-template-columns: minmax(0, 300px) 1fr; }
.fig-split--flip { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.fig-split--phone.fig-split--flip { grid-template-columns: 1fr minmax(0, 300px); }
/* Columns hug their content and the pair centres, instead of the text column
   stretching to fill and opening a gulf between it and the asset. */
.fig-split.fig-split--hug { grid-template-columns: auto auto; justify-content: center; gap: clamp(28px, 4vw, 56px); }
.fig-split--hug > .fig-split__shot { width: 300px; max-width: 100%; }
.fig-split--hug > .fig-split__text { max-width: 48ch; }
/* visual mirror only — DOM order stays shot-first */
.fig-split--flip > .fig-split__shot { grid-column: 2; grid-row: 1; }
.fig-split--flip > .fig-split__text { grid-column: 1; grid-row: 1; }

.fig-split__shot { border-radius: var(--r-lg); overflow: hidden; align-self: center; }
.fig-split__shot img, .fig-split__shot video { width: 100%; display: block; height: auto; }
/* a desktop screenshot needs the card chrome; a phone render floats free */
.fig-split:not(.fig-split--phone) > .fig-split__shot { border: 1px solid var(--hairline); background: var(--surface-card); }
.fig-split__shot figcaption { font-size: 12px; color: var(--muted); padding: 10px 14px; background: var(--canvas); border-top: 1px solid var(--hairline-soft); }
/* A phone that anchors a text block rather than illustrating it: show the top of
   the screen only, so it reads as a device running off the bottom of the row. */
.fig-split--top { align-items: start; }
.fig-split__shot--crop img { aspect-ratio: 300 / 370; object-fit: cover; object-position: top center; }

.fig-split__text { color: var(--muted); font-size: 15px; line-height: 1.75; }
.fig-split__text p { margin: 0 0 16px; }
.fig-split__text p:last-child { margin-bottom: 0; }
.fig-split__text strong { color: var(--ink); font-weight: 600; }
.fig-split__text > .ps__tag { margin-bottom: 10px; }

/* Consecutive splits: breathe between rows, and rule off where a new
   problem opens (i.e. a shot-left row following a flipped solution row). */
.case-body > .fig-split + .fig-split { margin-top: clamp(28px, 4vw, 48px); }
.case-body > .fig-split--flip + .fig-split:not(.fig-split--flip) {
  margin-top: clamp(36px, 5vw, 60px); padding-top: clamp(36px, 5vw, 60px);
  border-top: 1px solid var(--hairline);
}
/* a new problem opening straight after a set of delighters needs the same
   rule and air — the sibling selector above can't see across the wrapper */
.case-body > .ux-delighter + .fig-split {
  margin-top: clamp(48px, 6vw, 76px); padding-top: clamp(44px, 5vw, 64px);
  border-top: 1px solid var(--hairline);
}

/* ------------------------------------------------------------
   PHONE ROW — 2–3 phone screens side by side, e.g. an iteration
   sequence ending in the shipped design. Screens bottom-align so
   the device bases sit on a common line; captions read beneath.
   Accepts <img> or <video> (a screen recording of the final state).
   ------------------------------------------------------------ */
/* A problem can be answered by several solutions ("delighters"), numbered in
   the order they were designed. .ux-delighter wraps the set; .delighter is one. */
.ux-delighter { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(30px, 4vw, 44px); border-top: 1px solid var(--hairline); }
.ux-delighter > .ps__tag { margin-bottom: 22px; }
.delighter + .delighter { margin-top: clamp(44px, 6vw, 72px); }
.delighter__head { display: flex; align-items: baseline; gap: 14px; }
.delighter__n { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--muted-soft); letter-spacing: 1px; flex: none; }
.delighter__head .ps__h { margin-bottom: 0; }
.delighter__body { margin-top: 12px; padding-left: 36px; max-width: 72ch; }
.delighter__body p { font-size: 15px; color: var(--body); margin: 0 0 10px; }
.delighter__body p:last-child { margin-bottom: 0; }
.delighter__body strong { color: var(--body-strong); font-weight: 600; }
/* Figures inside a delighter run the full content width, flush with the
   redline sheet below them — not centred at the narrower .figure-grid measure. */
.delighter .figure-grid { max-width: none; }

/* Redline spec sheet closing out a delighter set — dense, so it runs full width. */
.redlines { margin-top: clamp(44px, 6vw, 72px); }
.redlines > .eyebrow { display: block; margin-bottom: 18px; }
.phone-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 48px); max-width: 860px; margin: clamp(24px, 3vw, 40px) auto 0; align-items: end; }
.phone-row--2 { grid-template-columns: repeat(2, 1fr); max-width: 600px; }
.phone-row--4 { grid-template-columns: repeat(4, 1fr); max-width: 1080px; gap: clamp(14px, 2vw, 30px); }
.phone-row--1 { grid-template-columns: 1fr; max-width: 300px; }
.phone-row figure { display: flex; flex-direction: column; min-width: 0; }
.phone-row img, .phone-row video { width: 100%; height: auto; display: block; margin-top: auto; border-radius: var(--r-md); }

/* Phone assets arrive two ways: exported mockups carry ~7% padding around the
   device, screen recordings are device-only. .shot frames the device itself, so
   every phone in a row renders at the same size. Because each device shares the
   frame's aspect ratio and sits centred in its export, one scale — the export's
   height over the device's height — pushes the padding out of frame on both axes.
   Override --dev per asset when its padding differs. */
/* Rounded to the device's own corner (r≈124px on an 846px frame), so the white
   corners in the JPEG exports fall outside the frame instead of squaring off
   against the page. Split radius keeps the curve circular, not elliptical. */
.shot { position: relative; overflow: hidden; aspect-ratio: 846 / 1708; margin-top: auto; border-radius: 14.7% / 7.28%; }
.shot img, .shot video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transform: scale(var(--dev, 1.03)); }
.shot--mockup { --dev: 1.0855; }
/* Video already cropped flush to the device body: no scale nudge, and a radius
   matched to that tighter crop so the opaque corners stay hidden. */
.shot--tight { --dev: 1; aspect-ratio: 1044 / 2138; border-radius: 16.2% / 7.9%; }
.phone-row figcaption { text-align: center; font-size: 13px; font-style: italic; color: var(--muted); margin-top: 16px; }

/* Feature list beside an asset: label + supporting line, per feature. */
.fig-split__feats { display: grid; gap: 26px; margin-top: 4px; }
.feat__k { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 6px; line-height: 1.4; }
.feat__d { margin: 0; color: var(--muted); }

/* ============================================================
   CENTERED SECTION HEADER + FULL-WIDTH BODY  (case studies)
   Header (eyebrow + optional heading) centers like the homepage;
   the body opens up to the full content width, aligned with the images.
   ============================================================ */
.case-head { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.case-head .eyebrow { display: block; margin-bottom: 14px; }
.case-head h3, .case-head .display-sm { color: var(--ink); }
/* body reuses .narrative__body text styles but drops its narrow measure */
.case-body { max-width: none; margin-top: 30px; }
.case-figs { margin-top: 30px; }
/* principles fill the wider row instead of a fixed 2-up */
.case-body .principles { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* centered impact / stat band */
.stat-band--center { text-align: center; }
.stat-band--center .stat-band__grid { justify-content: center; gap: 28px 72px; }
.stat-band--center .stat-band__item { align-items: center; text-align: center; }
.stat-band--center .stat-band__l { max-width: 30ch; }

/* ============================================================
   LEARNINGS  (numbered takeaways) — avoids .narrative li styling
   ============================================================ */
.learnings { display: grid; gap: 20px; margin-top: 14px; }
.learn { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; }
.learn__n { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1; letter-spacing: -1px; color: var(--muted-soft); }
.learn__t { color: var(--body); }
.learn__t strong { color: var(--body-strong); font-weight: 600; }

/* ============================================================
   RELATED PROJECTS
   ============================================================ */
.related { padding-block: clamp(56px, 8vw, var(--s-section)); background-color: #ffffff; border-top: 1px solid var(--hairline-soft); }
.related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 44px); flex-wrap: wrap; }
.related__head .eyebrow { display: block; margin-bottom: 12px; }

/* Peek carousel — tall image-fill cards, overlaid text, arrows + dots.
   Track is constrained to the content column (aligned with the section
   heading on the left and the section's right edge). Cards clip at those
   content boundaries and fade out there (see the ::before/::after below)
   instead of bleeding to the window edges. */
.related__viewport { position: relative; }
.related__grid {
  display: flex; gap: 18px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 6px;
  scrollbar-width: none;
  cursor: grab;
}
.related__grid::-webkit-scrollbar { display: none; }

/* soft fade at the left / right content boundaries — shown only when there
   is more of the track to scroll in that direction (toggled from JS) */
.related__viewport::before,
.related__viewport::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(32px, 5vw, 64px);
  z-index: 4; pointer-events: none; opacity: 0; transition: opacity .22s ease;
}
.related__viewport::before { left: 0; background: linear-gradient(to right, #ffffff 12%, rgba(255,255,255,0)); }
.related__viewport::after { right: 0; background: linear-gradient(to left, #ffffff 12%, rgba(255,255,255,0)); }
.related__viewport.fade-left::before { opacity: 1; }
.related__viewport.fade-right::after { opacity: 1; }

.rcard {
  position: relative; isolation: isolate;
  flex: 0 0 auto; width: clamp(262px, 28vw, 336px); aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid var(--hairline); border-radius: var(--r-xl); overflow: hidden;
  /* light cream media panel + the same Bgnd topo texture as the landing-page cards */
  background-color: var(--card, #f0eee7);
  background-image: url("../assets/img/Bgnd.webp");
  background-size: cover; background-repeat: no-repeat; background-blend-mode: multiply;
  box-shadow: 0 8px 24px rgba(20,20,19,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rcard:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(20,20,19,.12); border-color: var(--muted-soft); }
/* per-card texture crop so no two panels look identical (matches landing page) */
.rcard:nth-child(1) { background-position: left top; }
.rcard:nth-child(2) { background-position: right center; }
.rcard:nth-child(3) { background-position: center bottom; }
.rcard:nth-child(4) { background-position: left bottom; }
.rcard:nth-child(5) { background-position: 35% 65%; }
/* device mockup sits in the upper part; text overlays the lower part */
.rcard__shot { position: absolute; left: 0; right: 0; top: 0; height: 56%; z-index: 0; display: flex; align-items: center; justify-content: center; padding: clamp(22px, 3vw, 32px) clamp(20px, 2.6vw, 28px) 0; }
.rcard__shot img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* the lower text zone is always solid WHITE (mockup sits on the cream/textured
   top, text reads on white below) — fades up into the panel */
.rcard::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 36%, #ffffff 56%); }
.rcard__meta { position: relative; z-index: 2; padding: 0 clamp(22px, 2.6vw, 28px) clamp(22px, 2.6vw, 26px); }
.rcard__tag { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.rcard__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.4vw, 26px); line-height: 1.15; letter-spacing: -0.4px; color: var(--ink); margin-bottom: 10px; }
.rcard__desc { font-size: 14px; line-height: 1.45; color: var(--muted); margin-bottom: 16px; }
.rcard__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--primary); }
.rcard__link .arrow { transition: transform .2s ease; }
.rcard:hover .rcard__link .arrow { transform: translateX(4px); }

/* prev / next arrows overlaid on the peeking edges */
.related__arrow {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 6;
  width: 46px; height: 46px; border-radius: var(--r-pill); border: 1px solid var(--hairline); cursor: pointer;
  background: rgba(255,255,255,.94); color: #141413;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(20,20,19,.12);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, opacity .2s ease, transform .2s ease;
}
.related__arrow:hover { background: #ffffff; }
.related__arrow svg { width: 20px; height: 20px; }
.related__arrow--prev { left: clamp(4px, 1vw, 12px); }
.related__arrow--next { right: clamp(4px, 1vw, 12px); }
.related__arrow[disabled] { opacity: 0; pointer-events: none; }

/* pagination dots */
.related__dots { display: flex; gap: 8px; justify-content: center; margin-top: 26px; }
.related__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--hairline); cursor: pointer; transition: background .2s ease, width .2s ease; }
.related__dot:hover { background: var(--muted-soft); }
.related__dot.active { background: var(--muted); width: 22px; }

/* ============================================================
   CTA
   ============================================================ */
.cta { padding-block: var(--s-section); background-color: var(--canvas); }
.cta__card {
  background: var(--surface-card); color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: clamp(40px, 6vw, 72px);
  text-align: center;
}
.cta__card h2 { color: var(--ink); margin: 0 auto 18px; max-width: 20ch; }
.cta__card p { color: var(--muted); max-width: 46ch; margin: 0 auto 32px; font-size: 17px; }

/* ============================================================
   FOOTER
   ============================================================ */
/* Dark footer with topographic FooterBgnd texture */
.footer {
  position: relative; isolation: isolate;
  background-color: #141413;
  background-image: url("../assets/img/FooterBgnd.webp");
  background-size: cover; background-position: center;
  color: var(--on-dark);
  padding-block: clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(20,20,19,.30), rgba(20,20,19,.62));
}
.footer .wrap { position: relative; z-index: 1; }
.footer__top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
  flex-wrap: wrap; padding-bottom: clamp(40px, 6vw, 64px);
}
.footer__eyebrow { color: var(--on-dark-soft); display: block; margin-bottom: 20px; }
.footer__headline { color: var(--on-dark); max-width: 20ch; margin-bottom: 26px; }
.footer__mail {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 500; color: var(--on-dark);
  border-bottom: 1px solid rgba(250,249,245,.32); padding-bottom: 3px;
  transition: border-color .2s ease;
}
.footer__mail .arrow { transition: transform .2s ease; }
.footer__mail:hover { border-color: var(--on-dark); }
.footer__mail:hover .arrow { transform: translateX(4px); }
.footer__social { display: flex; gap: 12px; flex: none; }
.footer__icon {
  width: 46px; height: 46px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: #faf9f5; color: #141413;
  transition: transform .2s ease, background-color .2s ease;
}
.footer__icon:hover { transform: translateY(-2px); background: #ffffff; }
.footer__icon svg { width: 20px; height: 20px; }
.footer__icon { position: relative; }
/* copy-confirmation tooltip — shared by the footer + nav email icons */
.nav__icon { position: relative; }
.copy-tip {
  position: absolute; right: 0; white-space: nowrap;
  padding: 9px 13px; border-radius: 10px; font-size: 12.5px; line-height: 1; font-weight: 500;
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease; z-index: 80;
}
.copy-tip::after { content: ""; position: absolute; right: 16px; border: 6px solid transparent; }
/* footer: cream tip ABOVE the icon */
.footer__icon .copy-tip { bottom: calc(100% + 12px); background: #faf9f5; color: #141413; border: 1px solid rgba(20,20,19,.08); transform: translateY(6px); }
.footer__icon .copy-tip::after { top: 100%; border-top-color: #faf9f5; }
/* nav: dark tip BELOW the icon */
.nav__icon .copy-tip { top: calc(100% + 12px); background: #141413; color: #faf9f5; transform: translateY(-6px); }
.nav__icon .copy-tip::after { bottom: 100%; border-bottom-color: #141413; }
.is-copied .copy-tip { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .copy-tip { transition: opacity .18s ease; transform: none; } }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px 28px;
  flex-wrap: wrap; padding-top: 28px; font-size: 13px; color: var(--on-dark-soft);
}
.footer__brand { display: inline-flex; align-items: center; gap: 9px; color: var(--on-dark); font-weight: 600; font-size: 16px; }
.footer__brand .spike { color: var(--on-dark); }
.footer__links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__links a { color: var(--on-dark-soft); transition: color .15s ease; }
.footer__links a:hover { color: var(--on-dark); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .project-hero__media { animation: none; }   /* rests at final clip-path, no motion */
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================
   Coverage: desktop (default) · tablet (1024) · mobile portrait
   (900 / 560) · mobile landscape (orientation + short height).
   ============================================================ */
@media (max-width: 1024px) {
  .narrative__grid { grid-template-columns: 180px 1fr; gap: 40px; }
  .footer__cols { gap: 48px; }
}

@media (max-width: 900px) {
  .wrap { padding-inline: 28px; }
  .nav__menu { display: none; }
  .nav__burger { display: inline-flex; }

  .project-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .project-hero__media { order: -1; min-height: 0; max-width: 520px; margin-inline: auto; }

  .narrative__grid { grid-template-columns: 1fr; gap: 20px; }
  .narrative__label { position: static; display: flex; align-items: baseline; gap: 14px; }
  .narrative__label .num { font-size: 30px; }
  .narrative__label .eyebrow { margin-bottom: 0; }

  .metrics { grid-template-columns: 1fr; }
}

/* Mobile PORTRAIT: eyebrow + title overlaid on the hero panel (dark text on a
   white fade, like the carousel cards) so the sub + meta lift up. Landscape
   keeps the side-by-side layout with normal in-flow text. */
@media (max-width: 900px) and (orientation: portrait) {
  /* FULL-BLEED: the hero panel spans edge-to-edge (breaks out of the wrap),
     eyebrow + title overlaid on a white fade at the bottom. */
  .project-hero { padding-top: clamp(16px, 3vw, 28px); overflow-x: clip; }
  .project-hero__media {
    width: 100vw; margin-left: calc(50% - 50vw); max-width: none;
    border: 0; border-radius: 0;
    aspect-ratio: 1 / 1; align-items: center; padding: 20px 20px 0;
  }
  .project-hero__media img { max-width: min(96%, 560px); margin-block: -6% auto; margin-inline: auto; }
  .project-hero__media::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, transparent 50%, #ffffff 74%);
  }
  .project-hero__overlay {
    display: flex; flex-direction: column; gap: 10px;
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 0 28px 28px;
  }
  .project-hero__overlay .project-hero__eyebrow { margin-bottom: 0; }
  .project-hero__title-ov { font-family: var(--font-display); font-weight: 500; color: var(--ink); font-size: clamp(28px, 8vw, 40px); line-height: 1.08; letter-spacing: -0.6px; }
  /* hide the in-flow eyebrow; keep the real <h1> for AT but visually hidden */
  .project-hero__text > .project-hero__eyebrow { display: none; }
  .project-hero__text > h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* Case-study components: stack to a single column on narrower screens */
@media (max-width: 760px) {
  .principles { grid-template-columns: 1fr; }
  .ps__row { grid-template-columns: 1fr; gap: 22px; }
  .figure-grid { grid-template-columns: 1fr; }
  /* split figure stacks: shot on top, text below — --flip collapses to the same
     order, so the image always leads regardless of desktop side. */
  .fig-split, .fig-split--phone, .fig-split--flip, .fig-split--phone.fig-split--flip, .fig-split.fig-split--hug { grid-template-columns: 1fr; gap: 24px; }
  .fig-split--hug > .fig-split__shot { width: auto; margin-inline: auto; }
  .fig-split--flip > .fig-split__shot, .fig-split--flip > .fig-split__text { grid-column: 1; grid-row: auto; }
  .fig-split--phone > .fig-split__shot { max-width: 300px; margin-inline: auto; }
  /* phones stay side by side but shrink; captions carry the sequence */
  .phone-row { gap: 12px; }
  .phone-row--4 { grid-template-columns: repeat(2, 1fr); }
  .phone-row figcaption { font-size: 11px; margin-top: 10px; }
  .delighter__body { padding-left: 0; }
}

@media (max-width: 560px) {
  .wrap { padding-inline: 20px; }
  .project-hero__cta .btn, .cta__card .btn { width: 100%; }
  .p-meta { gap: 20px 32px; }
  /* Narrow cards wrap longer titles onto more lines. A fixed 3:4 box clips them,
     so let the tallest card set the row height and the rest stretch to match. */
  .rcard { width: 76vw; aspect-ratio: auto; min-height: calc(76vw * 4 / 3); }
  .related__arrow { display: none; }   /* swipe on mobile; dots still show position */
  .footer__top { flex-direction: column; }
  .stat-band__grid { gap: 22px 40px; }
  .persona { grid-template-columns: 1fr; }
  .persona__badge { grid-row: auto; }
}

/* Mobile LANDSCAPE — short viewport, wide: keep the hero side-by-side,
   trim vertical rhythm so content isn't buried below the fold. */
@media (orientation: landscape) and (max-height: 560px) {
  .project-hero { padding-block: 28px 32px; }
  .project-hero__grid { grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
  .project-hero__media { order: 0; min-height: 0; }
  .project-hero__media img { max-height: 46vh; }
  .p-meta { gap: 16px 28px; padding-top: 18px; }
  .narrative { padding-block: 44px; }
  .related, .cta { padding-block: 44px; }
  .sheet { padding: 16px 24px; overflow-y: auto; }
  .sheet a.nav__link { font-size: 26px; padding: 10px 0; }
}