/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ---- Hero background: soft blurred blobs drifting behind the hero content.
   Purely decorative — aria-hidden, sits behind .hero-grid-v2 (z-index below
   it, see layout.css), frozen by the global prefers-reduced-motion rule in
   base.css. Does not touch the diagram SVG or its markup/behavior. ---- */
.hero-blobs{ position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.hero-blob{ position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; will-change: transform; }
.hero-blob--1{
  width: 480px; height: 480px; top: 50%; margin-top: -240px; left: -140px;
  background: radial-gradient(circle at 35% 35%, #4DD9FF, transparent 70%);
  animation: heroBlobDrift1 26s ease-in-out infinite;
}
.hero-blob--2{
  width: 420px; height: 420px; top: -150px; right: -90px;
  background: radial-gradient(circle at 60% 60%, var(--accent), transparent 70%);
  animation: heroBlobDrift2 32s ease-in-out infinite;
}
.hero-blob--3{
  width: 320px; height: 320px; top: 40%; left: 50%;
  background: radial-gradient(circle at 50% 50%, #5EA3DB, transparent 72%);
  animation: heroBlobDrift3 22s ease-in-out infinite;
}
@keyframes heroBlobDrift1{
  0%,100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(60px,40px) scale(1.08); }
  66%{ transform: translate(-30px,70px) scale(.95); }
}
@keyframes heroBlobDrift2{
  0%,100%{ transform: translate(0,0) scale(1); }
  40%{ transform: translate(-70px,-40px) scale(1.1); }
  70%{ transform: translate(20px,-80px) scale(.92); }
}
@keyframes heroBlobDrift3{
  0%,100%{ transform: translate(-50%,-50%) translate(0,0) scale(1); }
  50%{ transform: translate(-50%,-50%) translate(50px,-40px) scale(1.15); }
}

.eyebrow{
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); font-weight: 500; margin-bottom: .8rem;
}
.eyebrow::before{ content: ""; width: 18px; height: 1px; background: var(--accent); display: inline-block; }

.tag{
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent-deep); padding: .32em .7em; border-radius: 999px;
}

/* ---- Buttons ---- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); line-height: 1;
  padding: .9em 1.5em; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap; flex: none;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover{ background: var(--accent-deep); }
.btn-outline{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--bg); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--ink); }
.btn-whatsapp{ background: #1F6B52; color: #fff; }
.btn-whatsapp:hover{ background: #164F3D; }
.btn-block{ width: 100%; }

.cta-row{ display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* ---- Header / Nav ---- */
#site-header{ position: sticky; top: 0; z-index: 100; }
body[data-page="home"] #site-header{ position: fixed; inset-inline: 0; }
body[data-page="home"] #site-header.header-scroll-gated{ opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) ease; }
body[data-page="home"] #site-header.header-scroll-gated.is-visible{ opacity: 1; pointer-events: auto; }

.nav{ background: var(--bg); border-bottom: 1px solid var(--line); }
.nav-inner{ display: flex; align-items: center; justify-content: space-between; padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem); max-width: 1180px; margin-inline: auto; }
.nav-logo{ font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap; }
.nav-logo span{ color: var(--accent); }
.nav-links{ display: flex; align-items: center; gap: 2.1rem; }
.nav-links a{ text-decoration: none; font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft); position: relative; padding-block: .3rem; transition: color .15s ease; }
.nav-links a:hover{ color: var(--ink); }
.nav-links a.is-active{ color: var(--ink); }
.nav-links a.is-active::after{ content: ""; position: absolute; inset-inline: 0; bottom: -3px; height: 2px; background: var(--accent); border-radius: 2px; }
.nav-cta{ display: flex; align-items: center; gap: 1.4rem; }
.nav-cta .btn span.btn-label-short{ display: none; }

.nav-toggle{ display: none; background: none; border: none; cursor: pointer; padding: .4rem; margin-left: .5rem; flex-direction: column; gap: 5px; }
.nav-toggle span{ width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; transform-origin: center; }
.nav-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity: 0; }
.nav-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.nav-back{ font-size: var(--text-sm); color: var(--ink-soft); text-decoration: none; display: inline-flex; gap: .4em; align-items: center; font-family: var(--font-mono); letter-spacing: .03em; }
.nav-back:hover{ color: var(--accent); }

@media (max-width: 860px){
  .nav-links{
    position: fixed; inset: 64px 0 0 0; background: var(--bg); flex-direction: column; align-items: flex-start;
    padding: 1.5rem 1.5rem; gap: 1.4rem; transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease; border-top: 1px solid var(--line);
  }
  .nav-links a{ font-size: var(--text-xl); }
  .nav-links.is-open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-cta .btn span.btn-label-full{ display: none; }
  .nav-cta .btn span.btn-label-short{ display: inline; }
  .nav-toggle{ display: flex; }
}

/* ---- Footer ---- */
#site-footer{ border-top: 1px solid var(--line); background: var(--bg-alt); }
.footer-inner{ padding-top: var(--card-gap); padding-bottom: var(--card-gap); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--card-gap); }
.footer-brand{ font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }
.footer-brand span{ color: var(--accent); }
.footer-links{ display: flex; gap: 1.6rem; flex-wrap: wrap; }
.footer-links a{ text-decoration: none; color: var(--ink-soft); font-size: var(--text-sm); }
.footer-links a:hover{ color: var(--ink); }
.footer-bottom{ border-top: 1px solid var(--line); padding-block: .9rem; font-size: var(--text-xs); color: var(--ink-faint); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }

/* ---- Cards: work grid, testimonials (shared with v1 home) ---- */
.work-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--card-gap); }
.work-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast), border-color var(--duration-fast); }
.work-card:hover{ transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(27,26,24,.28); }
.work-card-media{ aspect-ratio: 16/10; overflow: hidden; background: var(--bg-alt); }
.work-card-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.work-card:hover .work-card-media img{ transform: scale(1.045); }
.work-card-body{ padding: var(--card-gap); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.work-card-tags{ display: flex; flex-wrap: wrap; gap: .4rem; }
.work-card h3{ font-size: var(--text-xl); margin: .1em 0 0; }
.work-card .client{ color: var(--ink-faint); font-size: var(--text-sm); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.work-card p{ color: var(--ink-soft); margin: 0; }
.work-card .arrow{ margin-top: auto; padding-top: .8rem; font-weight: 600; font-size: var(--text-sm); display: flex; align-items: center; gap: .4em; color: var(--accent); }
.work-card .arrow svg{ width: 16px; height: 16px; transition: transform .2s ease; }
.work-card:hover .arrow svg{ transform: translateX(4px); }

/* ---- Secondary work row: 3-up, lighter visual weight than the 2-up featured
   row above it — supporting stories, not flagship ones. ---- */
.work-grid--secondary{ grid-template-columns: repeat(3, 1fr); }
.work-card--compact .work-card-media{ aspect-ratio: 16/11; }
.work-card--compact .work-card-body{ padding: calc(var(--card-gap) * .75); gap: .4rem; }
.work-card--compact h3{ font-size: var(--text-lg); }
.work-card--compact p{ font-size: var(--text-sm); }

.logo-strip{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--card-gap); opacity: .85; }
.logo-item{ height: 48px; width: 120px; display: flex; align-items: center; justify-content: center; flex: none; }
.logo-item img{ max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .65; }

/* ---- Testimonials — editorial layout: no card box, no display serif on the
   body copy (only the opening quote mark is oversized; the quote itself
   reads like a normal paragraph, closing quote included inline at normal
   size). Paginated 2-up carousel, centered inside the normal .container
   (same width as the rest of the page) — each Prev/Next click advances a
   full pair, and native scroll-snap only creates a snap point every other
   card (see .testi-editorial:nth-child(odd)) so manual swiping also lands
   on clean pairs instead of stopping mid-pair. ---- */
.testi-head{ margin-bottom: var(--story-gap); }
.testi-nav{ display: flex; gap: .6rem; flex: none; }
/* ---- Nav arrows live below the carousel, not next to the heading — on
   mobile that keeps them within thumb reach instead of up by the title. ---- */
.testi-nav-bottom{ justify-content: flex-end; margin-top: 1.4rem; }
.testi-nav-btn{
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
  transition: border-color var(--duration-fast) ease, transform var(--duration-fast) ease;
}
/* :not(:disabled) so a disabled arrow never shows the hover lift/border —
   no feedback on a control that can't be activated, no false affordance. */
.testi-nav-btn:not(:disabled):hover{ border-color: var(--ink); transform: translateY(-2px); }
.testi-nav-btn:disabled{ opacity: .3; cursor: default; }
.testi-nav-btn svg{ width: 18px; height: 18px; color: var(--ink); }

.testi-carousel{
  /* No justify-content:center here on purpose — centering a scrollable,
     snapping flex container is a known cross-browser landmine (Chrome/
     Safari both compute scroll bounds and snap targets against the
     centered line rather than its natural start, which is what caused
     pairs to rest half-scrolled between cards). Left-aligned is enough:
     each pair is sized to fill the .container's width, and .container
     itself is already centered on the page. */
  --testi-card-gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  display: flex; align-items: stretch; gap: var(--testi-card-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: .4rem 1rem;
}
.testi-carousel::-webkit-scrollbar{ display: none; }
.testi-editorial{
  /* Exactly 2 fill the container width — no peek of a 3rd. */
  flex: 0 0 clamp(280px, calc((100% - var(--testi-card-gap)) / 2), 500px);
  display: flex; flex-direction: column;
}
/* Snap point only every other card, so Prev/Next and manual swipe both
   land on pair boundaries (1-2, 3-4, 5-6…) instead of every single card. */
.testi-editorial:nth-child(odd){ scroll-snap-align: start; }
.testi-mark{
  display: block; font-family: var(--font-display); font-weight: 600; font-style: normal;
  font-size: clamp(3.4rem, 2.4rem + 3vw, 5rem); line-height: .8; color: var(--accent); margin-bottom: .3rem;
}
.testi-editorial-quote{
  font-family: var(--font-body); font-style: normal; font-weight: 400;
  font-size: var(--text-lg); line-height: 1.6; color: var(--ink-soft); margin: 0 0 1.6rem;
}
/* margin-top:auto pushes this to the bottom of the card; since the flex
   row stretches every .testi-editorial to the height of the tallest one
   (align-items:stretch above), every card's meta row lands on the exact
   same baseline regardless of how long its quote is. */
.testi-editorial-meta{ display: flex; align-items: center; gap: .9rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.testi-avatar{
  width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center; flex: none;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .02em;
}
.testi-editorial-meta b{ display: block; font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.testi-editorial-meta span.testi-role{ display: block; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin-top: .2rem; }

/* ==========================================================================
   NEW: Impact component (metrics as a real component, not one-off styles)
   <div class="impact-grid">
     <div class="impact-card"><b class="impact-number" data-value="400" data-prefix="" data-suffix="K">400K</b><span class="impact-label">New mobile users</span></div>
   </div>
   ========================================================================== */
.impact-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--story-gap) var(--card-gap); }
/* ---- Variant: extra horizontal breathing room — used where the row reads as a
   single confident statement (e.g. the home hero stats) rather than a dense group ---- */
.impact-grid--wide{ gap: var(--story-gap) clamp(2rem, 1.4rem + 3vw, 4rem); }
/* ---- Variant: short centered labels only (no checklist) — true fixed gap instead of
   equal-width columns, so different-length words (e.g. "Afore" vs "Digital Banking")
   don't create visually uneven whitespace between them ---- */
.impact-grid--labels{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--story-gap); }
.impact-grid--labels > div{ flex: 0 1 auto; }
.impact-card{ text-align: center; }
.impact-number{ display: block; font-family: var(--font-numbers); font-weight: 600; font-size: clamp(2.1rem, 1.6rem + 2vw, 3.2rem); color: var(--accent); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.impact-label{ display: block; margin-top: .5rem; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }

/* ---- Plain checkmark list — used inline within story prose (e.g. a list of
   research findings), distinct from .impact-theme-list which is the themed
   Impact-section component with icon headers. ---- */
.impact-checklist{ display: grid; gap: 0; }
.impact-checklist li{ display: flex; gap: .7rem; align-items: flex-start; padding-block: .6rem; border-bottom: 1px solid var(--line); font-size: var(--text-md); color: var(--ink-soft); }
.impact-checklist li:last-child{ border-bottom: none; }
.impact-checklist li::before{ content: "✓"; color: var(--accent); font-weight: 700; flex: none; }

/* ==========================================================================
   NEW: Quote hierarchy — statement (billboard) → quote (voice) → editor-note
   ========================================================================== */
.statement{ text-align: center; }
.statement h2, .statement p{
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--display-md); line-height: 1.3; max-width: 18ch; margin-inline: auto;
}

.quote{ max-width: 640px; margin-inline: auto; text-align: center; }
.quote p{ font-family: var(--font-display); font-style: italic; font-size: var(--display-sm); color: var(--ink); line-height: 1.45; margin: 0; }
.quote cite{ display: block; margin-top: 1.2rem; font-family: var(--font-mono); font-style: normal; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }

/* ---- Hero statement — a personal motto/tagline, not a caption. Deliberately
   no accent blue: it's a standalone statement, not a link or UI element. A
   thin neutral rule gives it a "pull-quote" beat of its own. ---- */
.hero-statement{
  margin-top: var(--story-gap); padding-top: 1.3rem; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--display-sm); line-height: 1.32; color: var(--ink);
  text-align: center; max-width: 19ch; margin-inline: auto;
}

.editor-note{ font-size: var(--text-sm); font-style: italic; color: var(--ink-faint); max-width: var(--measure); margin-top: 1rem; }
.editor-note::before{ content: "— "; }

/* ==========================================================================
   NEW: Decision — the portfolio's signature component.
   <aside class="decision"><h3>Why this mattered</h3><p>…</p></aside>
   ========================================================================== */
.decision{
  max-width: 46ch; margin-block: var(--card-gap) 0; padding: 1.6rem 1.8rem;
  background: var(--bg-alt); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.decision h3{ font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: .6rem; }
.decision p{ font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); margin: 0; color: var(--ink); max-width: none; }

/* ==========================================================================
   NEW: Figure — case-study images are documentation, not a gallery.
   <figure class="story-figure"><div class="media-frame">…</div><figcaption>…</figcaption></figure>
   ========================================================================== */
.story-figure{ margin: 0; max-width: 920px; margin-inline: auto; }
.media-frame{
  aspect-ratio: 1:1; border: 1.5px dashed var(--line); border-radius: var(--radius-lg); background: var(--bg-alt);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 0; text-align: center;
  overflow: hidden;
}
.media-frame img{ width: 100%; height: 100%; object-fit: cover; }
.media-frame svg{ width: 34px; height: 34px; color: var(--ink-faint); }
.media-frame .add-tag{ font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.media-frame .add-desc{ font-size: var(--text-sm); color: var(--ink-soft); max-width: 34ch; }
figcaption{ text-align: center; font-size: var(--text-sm); color: var(--ink-faint); margin-top: .9rem; max-width: var(--measure); margin-inline: auto; }

/* ---- Overview definition list ---- */
.overview-list{ max-width: 780px; margin-inline: auto; border-top: 1px solid var(--line); }
.overview-row{ display: grid; grid-template-columns: 160px 1fr; gap: var(--card-gap); padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.overview-row dt{ font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.overview-row dd{ margin: 0; font-size: var(--text-md); color: var(--ink); }

/* ---- Roadmap phase ---- */
.phase{ max-width: var(--measure); margin-inline: auto; }
.phase + .phase{ margin-top: var(--story-gap); }
.phase .phase-eyebrow{ font-family: var(--font-mono); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: .5rem; }
.phase .phase-focus{ font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); margin-bottom: 1.1rem; color: var(--ink); }
.phase ul{ display: grid; gap: .5rem; }
.phase ul li{ padding-left: 1.1em; position: relative; color: var(--ink-soft); font-size: var(--text-lg); }
.phase ul li::before{ content: "—"; position: absolute; left: 0; color: var(--accent); }

/* ---- Example: observation / decision-style callout for usability findings ---- */
.example-card{ max-width: 620px; margin-inline: auto; padding: 1.5rem 1.7rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.example-card .row + .row{ margin-top: 1.1rem; }
.example-card .row .k{ display: block; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: .35rem; }
.example-card .row p{ margin: 0; font-size: var(--text-md); color: var(--ink); }

/* ==========================================================================
   NEW: Key Decisions — a 40-second summary for someone who will only ever
   skim. Numbered, minimal, no elaboration.
   ========================================================================== */
.key-decisions{ max-width: 560px; margin-inline: auto; }
.key-decision{ display: flex; align-items: baseline; gap: 1.5rem; padding-block: 1.4rem; border-bottom: 1px solid var(--line); }
.key-decision:last-child{ border-bottom: none; }
.key-decision .kd-num{ font-family: var(--font-numbers); font-weight: 600; font-size: 1.6rem; color: var(--accent); flex: none; width: 2.2ch; }
.key-decision h3{ margin: 0; font-size: var(--text-xl); font-weight: 600; }


/* ==========================================================================
   NEW: image-forward case-study kit — for stories where screens carry the
   narrative and text is deliberately minimal.
   ========================================================================== */

/* ---- 3-card overview: Challenge / Approach / Outcome ---- */
.overview-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }
.overview-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--card-gap); }
.overview-card h3{ font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin-bottom: .8rem; font-weight: 600; }
.overview-card p{ margin: 0; color: var(--ink); font-size: var(--text-md); }
/* ---- Variant: quieter header + optional prominent value line / list — used for
   process/meta cards (cadence, participants, deliverables) instead of the louder
   accent header above. Was a separate .float-card component; merged here since the
   only real difference was header color/weight, not structure. ---- */
.overview-card--muted h3{ color: var(--ink-faint); font-weight: 500; }
.overview-card--muted .float-value{ font-family: var(--font-display); font-size: var(--text-xl); color: var(--ink); }
.overview-card--muted ul{ display: grid; gap: .4rem; margin-top: .3rem; }
.overview-card--muted li{ color: var(--ink-soft); font-size: var(--text-sm); }

/* ---- Principle cards: the ideas, not the interfaces ---- */
.principle-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); max-width: 900px; margin-inline: auto; }
/* ---- Variant: 5-up row (e.g. 5 experience principles instead of 3 design
   principles) — was a page-local .grid-5 declared inline on one case study;
   moved here so column-count variants live in one place. ---- */
.principle-grid--5col{ grid-template-columns: repeat(5, 1fr); max-width: none; }
.principle-card{ text-align: center; padding: 1.8rem 1rem; border-top: 2px solid var(--accent); }
.principle-card p{ margin: 0; font-family: var(--font-display); font-size: var(--text-xl); color: var(--ink); }

/* ---- Before / After comparison ---- */
.compare-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); align-items: start; }
.compare-grid figure{ margin: 0; }
.compare-label{ display: block; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: .6rem; text-align: center; }

/* ---- Gallery: a flexible wrap of screens, for promos / errors / microinteractions ---- */
.shot-gallery{ display: flex; flex-wrap: wrap; gap: var(--card-gap); justify-content: center; }
.shot-gallery .media-frame{ flex: 1 1 220px; max-width: 260px; }

/* ---- Mega figure: the image IS the content, full width, phone-collage proportions ---- */
.mega-figure{ max-width: 1100px; margin-inline: auto; }
.mega-figure .media-frame{ aspect-ratio: 16/10; }
.mega-figure--tall .media-frame{ aspect-ratio: 3/4; }

/* ==========================================================================
   NEW: Design-system guide kit — deliberately lighter than the rest of the
   site. Thin 1px lines, no shadows, generous white space, floating chips.
   Used only by the Design System case study, so it reads as its own
   artifact — closer to a style guide than an editorial page.
   ========================================================================== */

/* ---- Floating card: thin border, no shadow, sits on white ---- */
/* ---- Component chip: a single component name, floating, thin-line ---- */
.chip-row{ display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.chip{
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: .5em 1.1em; background: var(--surface);
}
.chip--accent{ color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }

/* ---- Tool chip: a logo + tool name, used wherever "what I work in" needs
   showing (home, process, resume). Moved here from pages.css since it's no
   longer exclusive to the 4 legacy pages. ---- */
.tool-chips{ display: flex; flex-wrap: wrap; gap: .5rem; }
.tool-chip{ display: flex; align-items: center; gap: .5em; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .4em .9em .4em .5em; font-size: .86rem; }
.tool-chip img{ width: 18px; height: 18px; object-fit: contain; }

/* ---- Vertical flow: a thin-line process diagram (governance, foundations) ---- */
.flow-v{ max-width: 360px; margin-inline: auto; display: grid; }
.flow-v-step{
  text-align: center; padding-block: .9rem; border-bottom: 1px dashed var(--line);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-soft); letter-spacing: .02em;
  position: relative;
}
.flow-v-step:last-child{ border-bottom: none; font-weight: 600; color: var(--accent); }
.flow-v-step::after{
  content: "↓"; display: block; color: var(--ink-faint); font-family: var(--font-body); margin-top: .5rem; font-size: .85rem;
}
.flow-v-step:last-child::after{ content: none; }

/* ---- Component gallery: many small samples, thin borders, generous gaps ---- */
.component-gallery{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.component-gallery .media-frame{ aspect-ratio: 1/1; border-style: solid; }

/* ---- Full-viewport statement: the boldest single line on the page ---- */
.statement--full{
  min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding-block: var(--section-gap);
}
.statement--full h2{
  font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 4vw + 1rem, 5.5rem);
  line-height: 1.18; max-width: 18ch; margin: 0 auto;
}

/* ==========================================================================
   NEW: Snapshot — qualitative impact, phrases rather than counted numbers.
   Use when the honest impact is directional/qualitative, not a fabricated stat.
   <div class="snapshot-grid"><div class="snapshot-card">↓ Calls to support</div></div>
   ========================================================================== */
.snapshot-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--card-gap); max-width: 1100px; margin-inline: auto; list-style: none; padding: 0; }
.snapshot-card{
  flex: 0 1 300px; max-width: 320px; text-align: center; padding: 1.4rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); line-height: 1.35;
}

/* ==========================================================================
   NEW: Horizontal timeline — a sequence of named beats (Brief → Benchmark → …)
   <div class="timeline-h"><div class="timeline-h-step">Brief</div><div class="timeline-h-step timeline-h-step--emphasis">+4 months</div></div>
   ========================================================================== */
.timeline-h{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; max-width: 1000px; margin-inline: auto; }
.timeline-h-step{
  font-family: var(--font-mono); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); padding: .6em 1.1em; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
/* Tinted, not solid-filled: this is editorial emphasis on a label, not a clickable
   action, so it deliberately avoids the .btn-primary treatment (solid accent +
   white text) and reuses the .chip--accent look instead. */
.timeline-h-step--emphasis{ color: var(--accent); background: var(--accent-soft); border-color: var(--accent-soft); font-weight: 600; }
.timeline-h-arrow{ color: var(--ink-faint); font-size: 1.1rem; }
@media (max-width: 700px){
  .timeline-h{ flex-direction: column; }
  .timeline-h-arrow{ transform: rotate(90deg); }
}

/* ---- Next case study footer — used at the end of every case study.
   Two cards: left is always the related project (same client), right is
   a randomly picked one of the remaining case studies (see inline script
   at the bottom of each case-study file). ---- */
.next-case-grid{ display:grid; grid-template-columns:1fr 1fr; gap: var(--card-gap); border-top:1px solid var(--line); padding-top: var(--card-gap); }
.next-case-card{ text-decoration:none; color:var(--ink); display:block; }
.next-case-card--right{ text-align:right; }
.next-case-label{ font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase; color:var(--ink-faint); letter-spacing:.08em; }
.next-case-title{ display:block; font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; margin:.3em 0 .5em; }
.next-case-arrow{ font-weight:600; font-size:var(--text-sm); display:flex; align-items:center; gap:.4em; color:var(--accent); }
.next-case-card--right .next-case-arrow{ justify-content:flex-end; }
.next-case-arrow svg{ width:16px; height:16px; transition: transform .2s ease; }
.next-case-card:hover .next-case-arrow svg{ transform: translateX(4px); }
@media (max-width: 700px){
  .next-case-grid{ grid-template-columns:1fr; gap: var(--story-gap); }
  .next-case-card--right{ text-align:left; }
  .next-case-card--right .next-case-arrow{ justify-content:flex-start; }
}

/* ---- Impact hero — one standout metric + a smaller supporting row.
   Used in case studies instead of a flat wall of equal-weight numbers,
   so the single most meaningful result gets to actually read as a result. ---- */
.impact-hero{ display:flex; flex-direction:column; align-items:center; gap: var(--story-gap); text-align:center; }
.impact-hero-main{ padding-bottom: var(--card-gap); border-bottom: 1px solid var(--line); width:100%; max-width: 640px; }
.impact-number--hero{ font-size: clamp(3.4rem, 2.6rem + 4vw, 5.8rem); line-height:1; }
.impact-hero-label{ display:block; margin-top:.9rem; font-size: var(--text-lg); color: var(--ink-soft); max-width:44ch; margin-inline:auto; }
.impact-hero-secondary{ display:flex; flex-wrap:wrap; justify-content:center; gap: var(--card-gap) clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem); }
.impact-mini{ text-align:center; }
.impact-number--mini{ font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); color: var(--ink); }
.impact-mini .impact-label{ margin-top:.35rem; }

/* ---- Impact themes — replaces both the flat fact-card grid and the plain
   checklist columns with one component: an icon-led theme per lane, and
   checkmarks as small filled dots instead of bare text glyphs. Used for the
   "Impact" section on every case study. ---- */
.impact-themes{ display:grid; grid-template-columns:repeat(3, 1fr); gap: var(--card-gap); align-items:start; }
.impact-theme{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding: var(--card-gap); }
.impact-theme-head{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.2rem; }
.impact-theme-icon{ width:46px; height:46px; border-radius:50%; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; flex:none; }
.impact-theme-icon svg{ width:22px; height:22px; color:var(--accent-deep); }
.impact-theme-head h3{ font-size:var(--text-xl); margin:0; }
.impact-theme-list{ display:grid; gap:0; }
.impact-theme-list li{ display:flex; gap:.7rem; align-items:flex-start; padding-block:.65rem; border-bottom:1px solid var(--line); font-size:var(--text-md); color:var(--ink-soft); }
.impact-theme-list li:last-child{ border-bottom:none; }
.impact-theme-list .check-dot{ width:20px; height:20px; border-radius:50%; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; flex:none; margin-top:.15em; }
.impact-theme-list .check-dot svg{ width:11px; height:11px; color:var(--accent-deep); }

/* ---- Next case study — single centered variant (used while the site has too
   few case studies for a meaningful "or explore" random pick; add it back
   with .next-case-grid once there are 6+). ---- */
.next-case-single{ text-align: center; border-top: 1px solid var(--line); padding-top: var(--card-gap); }
.next-case-single .next-case-title{ font-size: var(--display-sm); }
.next-case-single .next-case-arrow{ justify-content: center; }

/* ---- Component gallery, 3-column variant — used when a gallery has 6 items
   and 3 columns gives two clean rows instead of the default 4-col layout's
   uneven 4+2 split. Never use an inline style for this — it defeats the
   responsive breakpoints in responsive.css. ---- */
.component-gallery--3col{ grid-template-columns: repeat(3, 1fr); }

/* ---- Simple two-column media+text split (image left, text right), for
   one-off sections that don't need the full story-section--split treatment. ---- */
.two-col-media{ display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--story-gap); align-items:center; }

/* ---- Two equal columns (text+text or image+placeholder side by side).
   Only the column count lives here — gap/max-width/margin can still be set
   inline per instance since those don't need to change at breakpoints. ---- */
.two-col{ display:grid; grid-template-columns: 1fr 1fr; }