/* Case-study pages — shared layout. Each page sets its own accent via
   --cs-* tokens on <body>. Desktop values from the Figma frames (1920 wide). */

/* The case-study section frames in Portfolio.fig are 1934 wide at x=-7, so the
   real gutter on these pages is 123 and the content column 1674 — not the
   130/1660 of the home-page frame that tokens.css was derived from. */
body.case { --content: 1674px; --gutter: clamp(20px, 6.41vw, 123px); background: var(--cs-bg, var(--bg)); }
body.case .nav-links a:not(.btn) { color: var(--nav); }

/* ---------- case top nav (Figma 115:2957 / 184:3916 — 29px from the page edge) ---------- */
/* Back / Next stay pinned under the site header while you read (Itzik 2026-09-29). The bar sits
   just before the hero, so the hero gives up the 14px of its top padding that the bar now has
   above its links — at rest the page lays out exactly as before. */
.cs-topnav { position: sticky; top: 64px; z-index: 45; display: flex; justify-content: space-between; align-items: center;
  padding: 14px clamp(16px, 1.6vw, 29px);
  background: color-mix(in srgb, var(--cs-hero-from, var(--cs-bg, #fff)) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (min-width: 1024px) { .cs-topnav { top: var(--nav-h); } }
.cs-topnav a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; line-height: 22px; color: #000; transition: transform .25s var(--ease), color .25s; }
/* the bar names the neighbouring projects (not a bare "Back", which reads as "back to the portfolio") */
@media (max-width: 767px) { .cs-topnav a { font-size: 16px; } }
.cs-topnav svg { width: 18px; height: 18px; flex: none; }
@media (hover: hover) {
  .cs-topnav a:hover { color: var(--cs-accent); }
  .cs-topnav a.back:hover { transform: translateX(-3px); }
  .cs-topnav a.fwd:hover { transform: translateX(3px); }
}

/* ---------- header ---------- */
.cs-hero {
  background: linear-gradient(180deg, var(--cs-hero-from, var(--cs-bg)) 0%, var(--cs-bg) 70%);
  padding: 22px 0 0;
}
.cs-hero .wrap > .cs-brand { margin-top: 24px; }
.cs-brand { display: inline-flex; align-items: center; gap: 15px; font-weight: 700; font-size: 24px; letter-spacing: -0.01em; color: var(--ink); }
.cs-brand img { height: 53px; width: auto; }
.cs-brand .cs-mark { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--cs-accent); color: #fff; }
.cs-hero h1 {
  margin-top: 25px;
  font-weight: 600; letter-spacing: -0.015em; line-height: 0.98;
  font-size: clamp(42px, 5.4vw, 104px);
  /* each frame colours its h1 with the page ink (kkl 46:... #1c2a22, suzuki 174:1065 #1d2b45);
     --cs-h1 is for a page whose h1 differs from its body ink (Bara) */
  color: var(--cs-h1, var(--cs-ink, var(--ink))); max-width: 1206px;
}
.cs-hero .lede { margin-top: 25px; max-width: 1011px; font-size: clamp(18px, 1.3vw, 25px); line-height: 1.56; color: var(--cs-body, var(--body)); }
.cs-meta { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--cs-line); margin-top: 32px; }
/* the rule above the meta row ends with the last column, not at the gutter */
@media (min-width: 1024px) { .cs-meta { width: max-content; max-width: 100%; } }
.cs-meta > div { padding: 22px 0 0; }
.cs-meta dt { font-family: var(--mono); font-size: 16px; letter-spacing: .78px; text-transform: uppercase; color: var(--muted); }
.cs-meta dd { margin: 7px 0 0; font-weight: 600; font-size: 20px; line-height: 26px; color: var(--ink); }
.cs-hero-shot { margin: 56px auto 0; width: min(1736px, 100%); }
.cs-hero-shot img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 40px 79px -30px rgba(28, 42, 34, .35); cursor: zoom-in; }
/* phones: the hero picture ran straight into the next section — give it room below (Itzik 2026-09-29) */
@media (max-width: 1023px) { .cs-hero-shot { margin-bottom: 48px; } }
@media (min-width: 768px) { .cs-meta { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .cs-hero { padding: calc(28 * var(--k) - 6px) 0 0; }
  .cs-meta { display: flex; flex-wrap: wrap; margin-top: calc(40 * var(--k)); }
  .cs-meta > div { padding: calc(22 * var(--k)) calc(34 * var(--k)) 0; border-left: 1px solid var(--cs-line); }
  /* only Role wraps, after the dash — the other columns stay on one line */
  /* the cap makes Role break after the dash ("Product Designer - / UX/UI"), but the type is a fixed 20px,
     so below ~1770 a scaled cap split it into three lines; never narrower than "Product Designer -" */
  .cs-meta > div:first-child dd { max-width: max(calc(170 * var(--k)), 158px); }
  .cs-meta > div:first-child { padding-left: 0; border-left: 0; }
  /* no transform here: .reveal-ready .reveal.in { transform: none } outranks it once JS runs, so it only
     ever applied with JS off and the two layouts differed by 60px */
  .cs-hero-shot { margin-top: calc(90 * var(--k)); margin-bottom: calc(60 * var(--k)); }
  .cs-hero-shot img { border-radius: calc(16 * var(--k)); }
}

/* ---------- numbered sections ---------- */
.cs-section { padding: 64px 0; border-top: 1px solid var(--cs-line); }
.cs-section.alt { background: var(--surface); }
.cs-section.dark { background: var(--cs-dark); color: #fff; border-color: transparent; }
.cs-head { display: grid; gap: 24px; }
.cs-num {
  font-family: var(--mono); font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--cs-accent); border-top: 1px solid var(--cs-accent); padding-top: 10px; align-self: start; margin-top: -8px;
  display: inline-block;
}
.dark .cs-num { color: #fff; border-color: #fff; }
.cs-h2 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.07; font-size: clamp(30px, 2.9vw, 56px); color: var(--cs-ink, var(--ink)); max-width: 1030px; }
.dark .cs-h2 { color: var(--cs-bg); }
.cs-body-text { margin-top: 24px; font-size: clamp(17px, 1.2vw, 23px); line-height: 1.6; color: var(--cs-body, var(--body)); max-width: 1030px; }
.cs-body-text p + p { margin-top: 0; }   /* the .fig runs these as one text block */
.dark .cs-body-text { color: var(--cs-dark-text, #bcd9c6); }
/* Vertical section padding is 90/90 in most of the .fig, but not all of it.
   The exceptions carry data-pad="<top> <bottom>" so the markup can be audited
   against the frame. Verified directly from Portfolio.fig; bara and suzuki
   nest their sections differently and have not been measured, so they use the
   default. */
@media (min-width: 1024px) {
  .cs-section { padding: calc(90 * var(--k)) 0; }
  .cs-section[data-pad="90 60"]   { padding: calc(90 * var(--k)) 0 calc(60 * var(--k)); }
  .cs-section[data-pad="80 80"]   { padding: calc(80 * var(--k)) 0; }
  .cs-section[data-pad="100 110"] { padding: calc(100 * var(--k)) 0 calc(110 * var(--k)); }
  .cs-section[data-pad="96 119"]  { padding: calc(96 * var(--k)) 0 calc(119 * var(--k)); }
  /* Section head, revised layout (2026-09-11): the rule and its number sit at
     the gutter, the heading column begins where that 310 rule ends, and the
     heading drops below the number rather than sharing its baseline. */
  .cs-head { grid-template-columns: calc(225 * var(--k)) minmax(0, 1fr); gap: calc(5 * var(--k)); align-items: start; }
  .cs-h2 { max-width: calc(1030 * var(--k)); }
  /* Moran 2026-09-29: body text is 1250 wide on every case page (was 1030; KKL §07 in shot 3) */
  .cs-body-text { max-width: calc(1250 * var(--k)); margin-top: calc(24 * var(--k)); }
  /* the label scales with the frame too, or at 1440 a 16px 'AI-ASSISTED'
     no longer fits the 225-wide column and breaks at the hyphen */
  .cs-num { justify-self: stretch; min-width: 0;
            font-size: max(12px, calc(16 * var(--k))); letter-spacing: calc(1.5 * var(--k));
            white-space: nowrap; }
  .cs-head > div { padding-top: calc(80 * var(--k)); }
}

/* content block that sits under a head, indented to the content column on desktop */
.cs-content { margin-top: 48px; }
/* The content under a head lines up with the heading above it, and the block is
   inset the same on both sides — 230 / 1214 / 230 of the 1674 column. Running it
   flush to the right gutter is what made the borders look uneven. */
@media (min-width: 1024px) { .cs-content { margin-inline: calc(230 * var(--k)); } .cs-content.full { margin-inline: 0; } }

/* small mono caption label */
.cs-label { font-family: var(--mono); font-size: 16px; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }

/* ---------- lifecycle pipeline ---------- */
.pipe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
.pipe span { border-radius: 10px; padding: 15px 8px; min-width: 120px; text-align: center; font-weight: 700; font-size: 16px; line-height: 1.3; background: var(--cs-tint-a); color: var(--cs-accent-a); }
.pipe span.b { background: var(--cs-tint-b); color: var(--cs-accent-b); }
.pipe i { color: var(--cs-line-2); font-style: normal; font-size: 28px; line-height: 1; }
@media (min-width: 1024px) {
  .pipe { flex-wrap: nowrap; justify-content: space-between; gap: 0; }
  .pipe span { flex: 0 0 calc(161 * var(--k)); min-width: 0; height: calc(51 * var(--k)); display: grid; place-items: center; padding: 0 calc(8 * var(--k)); border-radius: calc(10 * var(--k)); font-size: max(12px, calc(16 * var(--k))); }
}
.legend { display: flex; flex-wrap: wrap; gap: 12px 23px; margin-top: 28px; font-size: 15px; color: var(--cs-body-2); }
.legend span::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 3.8px; margin-right: 8px; vertical-align: -1px; background: var(--cs-tint-a); border: 1px solid var(--cs-accent-a); }
.legend span.b::before { background: var(--cs-tint-b); border-color: var(--cs-accent-b); }

/* ---------- numbered cards ---------- */
.ncards { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 32px; list-style: none; padding: 0; }
.ncards li { background: var(--surface); border: 1px solid var(--cs-line); border-radius: 12px; padding: 30px; }
.ncards .n { font-family: var(--mono); font-size: 34px; color: var(--cs-accent); }
.ncards h3 { margin-top: 12px; font-weight: 600; font-size: 22px; line-height: 1.25; color: var(--cs-ink, var(--ink)); }
.ncards p { margin-top: 12px; font-size: 18px; line-height: 28px; color: var(--cs-body-2); }
@media (min-width: 768px) { .ncards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ncards li { padding: calc(30 * var(--k)); border-radius: calc(12 * var(--k)); }
  .ncards { gap: calc(20 * var(--k)); }
  .ncards.insights li { min-height: calc(300 * var(--k)); } }

/* ---------- challenge banner ---------- */
.banner { position: relative; overflow: hidden; margin-top: 24px; border-radius: 14px; padding: 44px 52px; background: var(--cs-accent); color: #fff; }
@media (min-width: 1024px) { .banner { margin-top: calc(24 * var(--k)); border-radius: calc(14 * var(--k)); padding: calc(44 * var(--k)) calc(52 * var(--k)); } }
.banner .cs-label { color: #fff; letter-spacing: 1.56px; font-size: 13px; }
.banner p { margin-top: 16px; font-weight: 600; font-size: clamp(22px, 1.9vw, 36px); line-height: 1.45; color: var(--cs-bg); max-width: 1050px; position: relative; }
.banner img { position: absolute; right: -10px; bottom: -8px; width: 476px; max-width: 45%; height: auto; pointer-events: none; }
@media (min-width: 1024px) { .banner img { width: calc(476 * var(--k)); } } /* after the base rule (CLAUDE.md §5) */

/* ---------- two-column comparison (backstage / onstage) ----------
   Figma 46:266 — two 580 columns with a 56px separator column between
   them; each card 125 tall with 22/27 padding, 23px between rows.      */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 11px; margin-top: 8px; }
.compare .step { grid-column: 1 / -1; }
.compare .pill { border-radius: 100px; padding: 8px 14px; font-weight: 700; font-size: 15px; display: block; text-align: center; margin: 0 0 3px; }
.pill.a { background: var(--cs-tint-a); color: var(--cs-accent-a); }
.pill.b { background: var(--cs-tint-b); color: var(--cs-accent-b); }
.compare .step {
  min-height: 125px; align-self: stretch;
  border-radius: 12px; padding: 22px 27px;
  background: var(--cs-step-a-bg); border: 1px solid var(--cs-step-a-line);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.compare .step.b { background: var(--cs-step-b-bg); border-color: var(--cs-step-b-line); }
.compare .step h3 { font-weight: 700; font-size: 19px; line-height: 25px; color: var(--cs-accent-a); }
.compare .step.b h3 { color: var(--cs-accent-b); }
.compare .step p { margin-top: 6px; font-size: 16px; line-height: 24px; color: #5c6f66; }
@media (hover: hover) {
  .compare .step:hover { background: var(--cs-accent-a); border-color: var(--cs-step-a-line); }
  .compare .step:hover h3 { color: var(--cs-step-a-bg); }
  .compare .step:hover p { color: var(--cs-step-a-line); }
  .compare .step.b:hover { background: var(--cs-accent-b); border-color: var(--cs-step-b-line); }
  .compare .step.b:hover h3 { color: var(--cs-step-b-bg); }
  .compare .step.b:hover p { color: var(--cs-step-b-line); }
}
.compare-sep { display: none; }
@media (min-width: 1024px) {
  /* three columns: card / separator / card, at the Figma 580/56/580 scaled to
     the viewport. Placement lives here so the layout is right from 1024 up. */
  /* left-aligned to the text column above it, not centred in the block */
  .compare { grid-template-columns: calc(580 * var(--k)) calc(56 * var(--k)) calc(580 * var(--k));
             justify-content: start; column-gap: 0; row-gap: calc(23 * var(--k)); }
  .compare .step { min-height: calc(125 * var(--k)); padding: calc(22 * var(--k)) calc(27 * var(--k)); border-radius: calc(12 * var(--k)); }
  .compare .step h3 { font-size: max(14px, calc(19 * var(--k))); line-height: max(18px, calc(25 * var(--k))); }
  .compare .step p { font-size: max(12px, calc(16 * var(--k))); line-height: max(18px, calc(24 * var(--k))); margin-top: calc(6 * var(--k)); }
  .compare .pill { width: max-content; margin-inline: auto; padding: 8px 20px; font-size: 16px; }
  .compare .pill.a { grid-column: 1; }
  .compare .pill.b { grid-column: 3; }
  .compare .step { grid-column: auto; }
  .compare .step.a { grid-column: 1; }
  .compare .step.b { grid-column: 3; }
  .compare-sep { display: grid; place-items: center; font-style: normal; font-size: 21px; line-height: 1; color: #7d8a80; }
  .compare-sep::before { content: "\21C4"; }
}


/* ---------- screenshots ---------- */
.shots { display: grid; gap: 14px; margin-top: 14px; }
.shots.two { grid-template-columns: 1fr; }
.shots.three { grid-template-columns: 1fr; }
@media (min-width: 640px) { .shots.two, .shots.three { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .shots.two { gap: calc(57 * var(--k)); } .shots { gap: calc(14 * var(--k)); } }
@media (min-width: 1024px) { .shots.three { grid-template-columns: repeat(3, 1fr); } }
.shot figure { margin: 0; }
.shot .frame { border: 1px solid var(--cs-line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.shot .frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; cursor: zoom-in; transition: transform .5s var(--ease); }
.shot .frame.h260 { aspect-ratio: 549 / 260; }
.shot .frame.h300 { aspect-ratio: 549 / 300; }
.shot .frame.h360 { aspect-ratio: 822 / 360; }
.shot .frame.h460 { aspect-ratio: 812 / 460; }
.shot .frame.h586 { aspect-ratio: 1674 / 586; }
.shot .frame.h620 { aspect-ratio: 1674 / 620; }
.shot .frame.raised { box-shadow: 0 30px 60px -30px rgba(28, 42, 34, .35); border-radius: 14px; }
@media (hover: hover) { .shot .frame img:hover { transform: scale(1.02); } }
.shot figcaption { margin-top: 10px; font-size: 15px; line-height: 20px; color: var(--cs-body-2); }
.shot figcaption b { font-weight: 700; color: var(--cs-accent-a); }
.shot figcaption b.b { color: var(--cs-accent-b); }
.shots-title { margin: 42px 0 20px; font-family: var(--mono); font-weight: 400; font-size: 16px; letter-spacing: 1.56px; text-transform: uppercase; color: var(--cs-accent-b); }
.shots-title.a { color: var(--cs-accent-a); }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; justify-content: flex-start; list-style: none; padding: 0; }
/* Each chip rises in after the one before it. The list itself opts out of the
   normal .reveal fade, and so does any .reveal wrapper that contains it —
   parent opacity multiplies through the children, so a wrapping fade (the
   .cs-content.reveal around section 04) washed the stagger out and read as
   no animation at all. The list still carries .reveal so the observer (and
   the failsafe) have something to switch on.

   The chip observer (not the generic one) waits until the row is in the middle
   of the screen, so the stagger plays where it can actually be seen. */
.reveal-ready .chips.reveal,
.reveal-ready .reveal:has(.chips.reveal) { opacity: 1; transform: none; transition: none; }
/* Deliberately NOT pre-hidden. animation-fill-mode: both already holds the
   from-state through each delay once .in applies the animation, which is what
   makes the stagger — and it overrides any opacity declared here, so pre-hiding
   means that if the animation never runs (observer missed, animations off, a
   rendering edge) the chips are stuck invisible with no way back. Without the
   pre-hide the worst case is chips that are simply visible and unanimated. */
.reveal-ready .chips.reveal.in li { animation: chip-in .5s var(--ease) both; }
.reveal-ready .chips.reveal.in li:nth-child(1) { animation-delay: 0s; }
.reveal-ready .chips.reveal.in li:nth-child(2) { animation-delay: .08s; }
.reveal-ready .chips.reveal.in li:nth-child(3) { animation-delay: .16s; }
.reveal-ready .chips.reveal.in li:nth-child(4) { animation-delay: .24s; }
.reveal-ready .chips.reveal.in li:nth-child(5) { animation-delay: .32s; }
.reveal-ready .chips.reveal.in li:nth-child(6) { animation-delay: .4s; }
.reveal-ready .chips.reveal.in li:nth-child(7) { animation-delay: .48s; }
.reveal-ready .chips.reveal.in li:nth-child(8) { animation-delay: .56s; }
.reveal-ready .chips.reveal.in li:nth-child(n+9) { animation-delay: .64s; }
@keyframes chip-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.chips li { border: 1px solid var(--cs-line); background: var(--surface); border-radius: 100px; padding: 9px 17px; font-weight: 600; font-size: 14.5px; color: var(--cs-ink, var(--ink)); }
@media (hover: hover) {
  .chips li { transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
  .chips li:hover { background: var(--cs-accent); color: #fff; border-color: var(--cs-accent); }
  .dark .chips li:hover { background: #fff; color: var(--cs-dark, #05341f); border-color: #fff; }
}
/* chips scale with the frame so the row keeps breaking in the same place
   instead of spilling onto a third line as the viewport narrows */
/* Figma 133:7427 — the chip block starts at the text column and breaks 5 + 3 */
@media (min-width: 1024px) {
  /* The frame breaks this row 5 + 3. Our chips render a few px wider than the
     .fig's, so the cap is 830 rather than its 790, and it floors at 700 because
     the type floors at 13px and the row stops narrowing with the frame. Checked
     at 1920 / 1600 / 1440 / 1280 / 1100 — 5 + 3 at every one. */
  .chips.indent { margin-left: calc(230 * var(--k)); max-width: max(700px, calc(830 * var(--k))); gap: calc(18 * var(--k)) calc(9 * var(--k)); }
}
.dark .chips li { background: transparent; border-color: var(--cs-dark-line, #2e6448); color: var(--cs-dark-chip, #d9e6dc); font-weight: 400; font-size: 15px; }
@media (min-width: 1024px) {
  /* Chips scale with the frame but the type is floored — scaling it all the way
     down keeps the row at two lines but lands at 8px, which is unreadable. Below
     the design width the block is allowed its full width instead, so the row
     still breaks in two with the text legible. */
  .chips li { padding: calc(9 * var(--k)) calc(17 * var(--k)); font-size: max(12.5px, calc(14.5 * var(--k))); }
  .dark .chips li { font-size: max(13px, calc(15 * var(--k))); }
}

/* ---------- design system panels ---------- */
.ds { display: grid; gap: 40px; margin-top: 34px; }
@media (min-width: 1024px) { .ds { grid-template-columns: 49.5% minmax(0, 1fr); gap: 0 9.14%; margin-top: calc(34 * var(--k)); } }
/* must stay after the rule above, or it never applies (CLAUDE.md §5) */
@media (min-width: 1024px) and (max-width: 1199px) { .ds, .ds.th { grid-template-columns: 1fr; gap: 40px; } }
.ds h3 { font-family: var(--mono); font-weight: 400; font-size: 16px; letter-spacing: 1.04px; text-transform: uppercase; color: var(--cs-label-2, #7d8a80); margin: 36px 0 12px; }
.ds h3:first-child { margin-top: 0; }
@media (min-width: 1024px) { .ds h3 { margin: calc(36 * var(--k)) 0 calc(12 * var(--k)); } .ds h3:first-child { margin-top: 0; } }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.swatches span { height: 88px; border-radius: 10px; padding: 12px 10px; display: flex; align-items: flex-end; font-weight: 600; font-size: clamp(13px, 1.05vw, 16px); line-height: 1.25; color: #fff; }
@media (min-width: 1024px) { .swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: calc(722 * var(--k)); gap: calc(12 * var(--k)); }
  .swatches span { height: calc(88 * var(--k)); border-radius: calc(10 * var(--k)); padding: calc(12 * var(--k)) calc(10 * var(--k)); } }
.panel { background: var(--surface); border: 1px solid var(--cs-line); border-radius: 10px; padding: 24px 26px; }
@media (min-width: 1024px) { .panel { padding: calc(24 * var(--k)) calc(26 * var(--k)); } } /* after the base rule (CLAUDE.md §5) */
.type-sample .face { font-weight: 700; font-size: 40px; letter-spacing: -0.01em; line-height: 1.05; color: var(--cs-ink); }
.type-sample .sub { margin-top: 8px; font-size: 15px; color: #8a9584; }
.type-sample .scale { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--cs-line); display: flex; align-items: baseline; gap: 14px; }
.type-sample .scale span:nth-child(1) { font-weight: 700; font-size: 32px; color: var(--cs-ink); }
.type-sample .scale span:nth-child(2) { font-weight: 600; font-size: 22px; color: var(--cs-ink); }
.type-sample .scale span:nth-child(3) { font-weight: 600; font-size: 17px; color: var(--cs-body); }
.type-sample .scale span:nth-child(4) { font-size: 14px; color: var(--cs-body-2); }
.type-sample .scale span:nth-child(5) { font-family: var(--mono); font-size: 12px; color: #8a9584; }
.ds-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ds-row + .ds-row { margin-top: 18px; }
.ds-btn { border-radius: 8px; padding: 10px 22px; font-weight: 700; font-size: 15px; }
.ds-tag { border-radius: 100px; padding: 5px 14px; font-weight: 600; font-size: 14px; }
.stepper { display: flex; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cs-line); }
.stepper i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; flex: none; }
.stepper b { flex: 1; height: 2px; background: var(--cs-line); }
.stepper b.on { background: var(--cs-accent); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px 16px; }
.fields label { display: block; font-size: 16px; color: #8a9584; margin-bottom: 6px; }
.fields span { display: block; border: 1px solid var(--cs-line-2); border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--cs-ink); background: var(--surface); }
.icons { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 6vw, 135px); }
.icons svg { width: 30px; height: 30px; stroke: var(--cs-ink); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* icons exported as filled outlines straight from the Figma vectors */
.icons.solid svg { fill: var(--cs-accent); stroke: none; flex: none; }
.icons .note { margin-left: auto; font-family: var(--mono); font-size: 16px; letter-spacing: 1.04px; color: #7d8a80; }

/* ---------- impact stats ---------- */
.stats { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; list-style: none; padding: 0; }
@media (max-width: 479px) { .stats { grid-template-columns: 1fr; } }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(20 * var(--k)); } }
.stats li { border: 1px solid var(--cs-line); border-radius: 12px; padding: 29px 31px; }
.stats b { display: block; font-weight: 600; font-size: 46px; line-height: 1; color: var(--cs-accent); }
@media (min-width: 1024px) { .stats b { font-size: max(28px, calc(46 * var(--k))); } }
.stats p { margin-top: 12px; font-size: 17px; line-height: 26px; color: var(--cs-body-2); }
.summary { margin-top: 24px; border: 1px solid var(--cs-accent); background: var(--cs-bg); border-radius: 12px; padding: 34px 40px; text-align: center; font-size: 20px; line-height: 33px; color: var(--cs-ink); }


/* ---------- reflection ---------- */
.reflect { display: grid; gap: 20px; margin-top: 24px; }

@media (min-width: 768px) { .reflect { grid-template-columns: 1fr 1fr; } }
.reflect div { background: var(--surface); border: 1px solid var(--cs-line); border-radius: 12px; padding: 33px 37px; transition: box-shadow .25s var(--ease); }
@media (hover: hover) { .reflect div:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .25); } }
.reflect h3 { font-family: var(--mono); font-weight: 400; font-size: 16px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--cs-accent); }
.reflect h3.next { color: #c05621; }
.reflect p { margin-top: 15px; font-size: 19px; line-height: 31px; color: var(--cs-body); }
/* after the base rules above, or the fixed px win at every width (CLAUDE.md §5) */
@media (min-width: 1024px) {
  .stats li { padding: calc(29 * var(--k)) calc(31 * var(--k)); border-radius: calc(12 * var(--k)); }
  .reflect { gap: calc(20 * var(--k)); }
  .reflect div { padding: calc(33 * var(--k)) calc(37 * var(--k)); border-radius: calc(12 * var(--k)); }
  .summary { padding: calc(34 * var(--k)) calc(40 * var(--k)); border-radius: calc(12 * var(--k)); }
}

/* ---------- prev / next ---------- */
/* case-study footer variant: shorter bottom padding */
body.case .footer { padding-top: 64px; }
@media (min-width: 1024px) { body.case .footer { padding: calc(44 * var(--k)) 0 calc(80 * var(--k)); } }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(28, 42, 34, .9); display: none; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lightbox .stage { position: relative; display: flex; padding-top: 50px; max-width: 100%; max-height: 100%; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 98px); border-radius: 10px; box-shadow: 0 40px 80px rgba(0,0,0,.5); background: #fff; cursor: zoom-in; transition: transform .25s var(--ease); transform-origin: center center; }
.lightbox.zoomed { cursor: grab; align-items: flex-start; justify-content: flex-start; overflow: auto; padding: 0; }
.lightbox.zoomed .stage { max-width: none; max-height: none; }
.lightbox.zoomed button { position: fixed; top: 16px; right: 16px; }
.lightbox.zoomed img { max-width: none; max-height: none; width: auto; cursor: grab; border-radius: 0; }
.lightbox.zoomed.dragging, .lightbox.zoomed.dragging img { cursor: grabbing; }
.lightbox .zoom-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: rgba(255,255,255,.9); color: #1c2a22; border-radius: 100px; padding: 7px 16px; font-size: 14px; font-weight: 600; pointer-events: none; }
.lightbox button { position: absolute; top: 0; right: 0; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #000; font-size: 20px; line-height: 1; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }

/* ===================== TravelHub-specific blocks ===================== */
/* hero phone (login screen drawn in CSS over the real background photo) */
.th-hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .th-hero-grid { grid-template-columns: minmax(0, 1fr) calc(330 * var(--k)); gap: calc(70 * var(--k)); } }
/* Everything inside the phone is in --u: 1px on mobile, where the phone is a
   fixed 330, and one design pixel (--k) on desktop, where the phone shrinks
   with its grid column. Fixed px inside a shrinking phone is what made the
   copy spill over the icon at 1440 and 1024. */
.th-phone { --u: 1px; width: calc(330 * var(--u)); max-width: 100%; margin: 0 auto; background: #fff; border-radius: calc(50 * var(--u)); padding: calc(12 * var(--u)); box-shadow: 0 40px 80px -30px rgba(46,26,34,.45); }
@media (min-width: 1024px) { .th-phone { --u: var(--k); } }
.th-phone .scr { position: relative; border-radius: calc(38 * var(--u)); overflow: hidden; aspect-ratio: 306 / 654; background: #2e1a22 url('/assets/img/travelhub/hero-bg.webp') center / cover; color: #fff; }
.th-phone .scr::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
.th-phone .status { position: relative; display: flex; justify-content: space-between; padding: calc(12 * var(--u)) calc(26 * var(--u)); font-weight: 700; font-size: calc(14 * var(--u)); }
.th-phone .status i { width: calc(60 * var(--u)); height: calc(9 * var(--u)); border-radius: calc(3 * var(--u)); background: #fff; opacity: .9; margin-top: calc(4 * var(--u)); display: inline-block; }
.th-phone .icon { position: relative; margin: calc(32 * var(--u)) 0 0 calc(30 * var(--u)); width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: calc(19 * var(--u)); background: #ef8e7f; display: grid; place-items: center; }
.th-phone .icon svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.th-phone .copy { position: absolute; left: calc(30 * var(--u)); right: calc(30 * var(--u)); bottom: calc(52 * var(--u)); }
.th-phone .copy h3 { font-weight: 700; font-size: calc(34 * var(--u)); line-height: calc(38 * var(--u)); }
.th-phone .copy p { margin-top: calc(12 * var(--u)); font-weight: 600; font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); }
.th-phone .copy .cta { margin-top: calc(20 * var(--u)); background: #fff; color: #e87a6a; border-radius: calc(16 * var(--u)); padding: calc(17 * var(--u)); text-align: center; font-weight: 600; font-size: calc(18 * var(--u)); box-shadow: 0 12px 24px -12px rgba(0,0,0,.4); }
.th-phone .copy small { display: block; text-align: center; margin-top: calc(14 * var(--u)); font-size: calc(15 * var(--u)); }

/* problem trio (numbered, divided) */
.trio { display: grid; margin-top: 56px; border-top: 1px solid var(--cs-line); }
.trio > div { padding: 34px 0 0; }
.trio .n { font-family: var(--mono); font-size: 40px; color: var(--ink); }
.trio h3 { margin-top: 12px; font-weight: 600; font-size: 24px; color: var(--ink); }
.trio p { margin-top: 12px; font-size: 19px; line-height: 29px; color: var(--muted-3); }
@media (min-width: 768px) { .trio { grid-template-columns: repeat(3, 1fr); } .trio > div { padding: 34px 40px 0; } .trio > div:first-child { padding-left: 0; } .trio > div + div { border-left: 1px solid var(--cs-line); } }

/* research: stats + findings */
.research { display: grid; gap: 40px; margin-top: 40px; }
@media (min-width: 1024px) { .research { grid-template-columns: calc(629 * var(--k)) minmax(0, 1fr); gap: calc(56 * var(--k)); align-items: start; } }
.statbar { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); border: 1px solid var(--cs-line); border-radius: 32px; }
.statbar div { padding: 26px 18px; text-align: center; }
.statbar div + div { border-left: 1px solid var(--cs-line); }
.statbar b { display: block; font-weight: 600; font-size: 52px; line-height: 1; color: var(--ink); }
.statbar span { display: block; margin-top: 8px; font-size: 16px; color: var(--muted-3); }
.findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.findings li { display: grid; grid-template-columns: 27px 1fr; font-size: 21px; line-height: 32px; color: var(--ink); }
.findings li::before { content: attr(data-n); font-family: var(--mono); font-size: 16px; padding-top: 5px; }
.findings b { font-weight: 700; }

/* personas */
.personas { display: grid; margin-top: 40px; border-top: 1px solid var(--cs-line); border-bottom: 1px solid var(--cs-line); }
.persona { padding: 38px 0 34px; }
.persona header { display: flex; align-items: center; gap: 14px; }
.persona .av { width: 52px; height: 52px; border-radius: 50%; background: #ef8e7f; display: grid; place-items: center; flex: none; }
.persona .av svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.persona h3 { font-weight: 700; font-size: 21px; color: var(--ink); }
.persona header span { display: block; font-weight: 600; font-size: 16px; color: var(--muted-2); }
.persona dl { margin: 22px 0 0; display: grid; gap: 16px; }
.persona dt { font-family: var(--mono); font-size: 16px; letter-spacing: .72px; text-transform: uppercase; color: var(--muted); }
.persona dd { margin: 4px 0 0; font-size: 18px; line-height: 26px; color: var(--body-2); }
@media (min-width: 768px) { .personas { grid-template-columns: repeat(3, 1fr); } .persona { padding: 38px 42px 34px; } .persona:first-child { padding-left: 0; } .persona + .persona { border-left: 1px solid var(--cs-line); } }

/* five tabs strip */
.tabs5 { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 32px; border: 1px solid var(--cs-line); border-radius: 4px; overflow: hidden; }
.tabs5 div { padding: 28px 24px; border: 1px solid var(--cs-line); margin: -1px 0 0 -1px; }
.tabs5 div.on { background: #ef8e7f; }
.tabs5 svg { width: 26px; height: 26px; stroke: var(--ink); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tabs5 h3 { margin-top: 17px; font-weight: 600; font-size: 20px; color: var(--ink); }
.tabs5 .on h3 { font-weight: 700; }
.tabs5 p { margin-top: 4px; font-size: 15px; color: var(--muted-2); }
.tabs5 .on p { color: var(--ink); }
@media (min-width: 1024px) { .tabs5 { grid-template-columns: repeat(5, 1fr); } }
.flow4 { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 20px; border-top: 1px solid var(--cs-line); border-bottom: 1px solid var(--cs-line); }
.flow4 div { padding: 28px 24px; }
.flow4 .n { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.flow4 h3 { margin-top: 9px; font-weight: 600; font-size: 21px; line-height: 28px; color: var(--ink); }
.flow4 p { margin-top: 5px; font-size: 16px; color: var(--muted-2); }
@media (min-width: 1024px) { .flow4 { grid-template-columns: repeat(4, 1fr); } .flow4 div:first-child { padding-left: 0; } .flow4 div + div { border-left: 1px solid var(--cs-line); } }

/* wireframes */
.wires { display: grid; gap: 40px; margin-top: 56px; align-items: center; }
@media (min-width: 1024px) { .wires { grid-template-columns: calc(732 * var(--k)) minmax(0, 1fr); gap: calc(60 * var(--k)); } }
.wire-row { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
.wire { width: 224px; text-align: center; }
.wire .fr { height: 452px; background: #faf9f6; border: 1px solid #ded9cd; border-radius: 30px; padding: 16px 14px; display: flex; flex-direction: column; gap: 11px; }
.wire .fr > * { border-radius: 10px; background: #f0eee7; flex: none; }
.wire .fr .bar { width: 81px; height: 13px; border-radius: 4px; background: #ddd9d0; }
.wire .fr .box { background: #eeece6; border: 1px solid #c7c3b8; border-radius: 12px; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: #aaa393; }
.wire .fr .row { display: flex; gap: 8px; background: none; }
.wire .fr .row i { display: block; height: 52px; border-radius: 9px; background: #f0eee7; flex: 1; }
.wire .fr .row i:first-child { flex: none; width: 44px; background: #eeece6; border: 1px solid #c7c3b8; }
.wire .fr .btn-w { margin-top: auto; height: 40px; border-radius: 11px; background: #ddd9d0; }
.wire span { display: block; margin-top: 14px; font-family: var(--mono); font-size: 16px; letter-spacing: 1.12px; color: var(--ink); }
.changes { border-top: 1px solid var(--cs-line); padding-top: 26px; }
.changes ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 18px; }
.changes li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; font-size: 21px; line-height: 32px; color: var(--body-2); }
.changes li::before { content: "→"; font-weight: 700; color: var(--ink); }

/* design system (TravelHub palette panel is 1060 + 565) */
.ds.th { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .ds.th { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 0 calc(49 * var(--k)); } }
.swatches.th span { border: 1px solid rgba(20, 18, 12, .06); }

/* screens grid (dark section) */
.screens { display: grid; gap: 40px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 52px; justify-items: center; }
@media (min-width: 768px) { .screens { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Figma 18:1334 / 18:1609 — three phones then four, not four then three.
   A 12-column track lets the first three span 4 each and the last four span 3. */
@media (min-width: 1200px) {
  .screens { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(40 * var(--k)) calc(40 * var(--k)); margin-top: calc(52 * var(--k)); }
  .screen { grid-column: span 3; }
  .screen:nth-child(-n+3) { grid-column: span 4; }
}
.screen { width: 100%; max-width: calc(316 * var(--k)); margin: 0; text-align: center; }
.screen .ph { aspect-ratio: 316 / 646; filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .55)); }
.screen .ph svg { width: 100%; height: auto; display: block; }
/* the phone shell is part of the drawing, so no frame/padding is added here */
.screen .ph > img { width: 100%; height: 100%; border-radius: 36px; object-fit: cover; object-position: top; display: block; background: #fbf7f3; }
.screen .ph .missing { display: grid; place-items: center; text-align: center; padding: 24px; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: #9a9089; border: 1px dashed #ddd9d0; }
.screen span { display: block; margin-top: calc(16 * var(--k)); font-family: var(--mono); font-size: 16px; letter-spacing: .52px; text-transform: uppercase; color: #fff; }
.dark.th { background: #2e1a22; }
.dark.th .cs-h2, .dark.th .cs-body-text { color: #fff; }
.dark.th .cs-h2 { font-weight: 700; }

/* interactions */
.inter { display: grid; margin-top: 40px; border-top: 1px solid var(--cs-line); }
.inter > div { display: flex; gap: 26px; padding: 32px 0; border-bottom: 1px solid var(--cs-line); }
.inter .ic { width: 58px; height: 58px; border-radius: 15px; flex: none; display: grid; place-items: center; }
.inter .ic svg { width: 30px; height: 30px; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.inter h3 { font-weight: 700; font-size: 26px; color: var(--ink); }
.inter p { margin-top: 10px; font-size: 20px; line-height: 31px; color: var(--muted-3); }
@media (min-width: 1024px) { .inter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 calc(70 * var(--k)); } }

/* testing */
.testing { display: grid; gap: 40px; margin-top: 50px; }
@media (min-width: 1024px) { .testing { grid-template-columns: calc(300 * var(--k)) minmax(0, 1fr); gap: calc(115 * var(--k)); } }
.tstats > div { padding: 22px 0; border-bottom: 1px solid var(--cs-line); }
.tstats > div:first-child { border-top: 1px solid var(--cs-line); }
.tstats b { display: block; font-weight: 700; font-size: 52px; line-height: 1; color: var(--ink); }
.tstats b.good { color: #4a9d7f; }
.tstats span { display: block; margin-top: 6px; font-size: 16px; color: var(--muted-3); }
.obs > div { display: grid; gap: 16px; padding: 28px 0; border-top: 1px solid var(--cs-line); }
.obs > div:last-child { border-bottom: 1px solid var(--cs-line); }
@media (min-width: 768px) { .obs > div { grid-template-columns: 1fr 32px 1fr; gap: 26px; align-items: center; } }
.obs .arrow { display: none; color: #c9c4b8; }
@media (min-width: 768px) { .obs .arrow { display: block; } }
.obs .cs-label { font-size: 16px; letter-spacing: .78px; }
.obs .cs-label.o { color: #c07a6a; } .obs .cs-label.c { color: #5a9a7e; }
.obs p { margin-top: 6px; font-size: 21px; line-height: 29px; color: var(--ink); }

/* outcomes */
.outcome2 { display: grid; margin-top: 50px; border-top: 1px solid var(--cs-line); border-bottom: 1px solid var(--cs-line); }
.outcome2 > div { padding: 34px 0 30px; }
.outcome2 p { margin-top: 12px; font-size: 22px; line-height: 33px; color: var(--body-2); }
@media (min-width: 1024px) { .outcome2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .outcome2 > div { padding: calc(34 * var(--k)) calc(60 * var(--k)) calc(30 * var(--k)); } .outcome2 > div:first-child { padding-left: 0; } .outcome2 > div + div { border-left: 1px solid var(--cs-line); } }
.takeaway { display: grid; gap: 16px; padding: 54px 0 10px; }
.takeaway p { font-weight: 700; font-size: clamp(26px, 2.2vw, 42px); line-height: 1.3; color: var(--ink); max-width: 900px; }
@media (min-width: 1024px) { .takeaway { grid-template-columns: calc(300 * var(--k)) minmax(0, 1fr); gap: calc(40 * var(--k)); padding-left: calc(120 * var(--k)); } }

/* ===================== Bara-specific blocks ===================== */
.bara-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; }
.bara-flow span { background: var(--cs-accent-a); color: #fff; border-radius: 11px; padding: 18px 16px; font-weight: 700; font-size: 18px; min-width: 150px; text-align: center; }
.bara-flow span.end { background: var(--cs-accent); }
.bara-flow i { color: var(--cs-line-2); font-style: normal; font-size: 34px; line-height: 1; }
.two-cards { display: grid; gap: 40px; margin-top: 44px; }
@media (min-width: 900px) { .two-cards { grid-template-columns: 1fr 1fr; } }
.two-cards div { background: #fff; border-radius: 12px; padding: 30px 34px; box-shadow: 0 4px 4px rgba(0,0,0,.06); }
.two-cards h3 { font-family: var(--mono); font-size: 16px; letter-spacing: .7px; text-transform: uppercase; color: #02a7bb; }
.two-cards p { margin-top: 14px; font-size: 20px; line-height: 32px; color: #185a6b; }
/* 133:8829 / 153:1706: #5889a8 at 11% paint opacity over the page (#f7f6f3), not solid —
   the solid blue made the text fail contrast. #e6eaeb is the same blend for browsers without color-mix. */
.cs-section.blue { background: #e6eaeb; background: color-mix(in srgb, #5889a8 11%, var(--cs-bg, #f7f6f3)); border-color: #e6e4de; }
.blue .cs-num { color: #185a6b; border-color: #185a6b; }
.blue .cs-h2 { color: #173f46; font-size: clamp(32px, 3.3vw, 64px); }
.blue .cs-body-text { color: #014f40; font-size: clamp(17px, 1.25vw, 24px); }
.blue .shot figcaption { color: #185a6b; }
.insight-wide { background: #fff; border: 1px solid var(--cs-line); border-radius: 12px; padding: 30px 32px; margin-top: 20px; }
.insight-wide .n { font-family: var(--mono); font-size: 34px; color: var(--cs-accent); }
.insight-wide p { margin-top: 12px; font-weight: 600; font-size: clamp(22px, 1.8vw, 34px); line-height: 1.35; color: var(--cs-ink); }
.annot { position: relative; }
.annot .badge { position: absolute; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 14px; color: #fff; box-shadow: 0 6px 12px -4px rgba(0,0,0,.4); transform: translate(-50%, -50%); }
.callouts { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 12px 24px; font-size: 16px; line-height: 21px; color: var(--cs-body); }
@media (min-width: 900px) { .callouts { grid-template-columns: 1fr 1fr; } }
.callouts li { display: flex; gap: 9px; align-items: flex-start; }
.callouts .badge { position: static; transform: none; width: 22px; height: 22px; font-size: 12px; flex: none; box-shadow: none;
  border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; color: #fff; }
.summary.blue { background: #e6eaeb; background: color-mix(in srgb, #5889a8 11%, var(--cs-bg, #f7f6f3)); border-color: #e6e4de; color: #243b41; }

/* ===================== Suzuki-specific blocks ===================== */
.approach { display: grid; gap: 16px; margin-top: 48px; list-style: none; padding: 0; }
@media (min-width: 768px) { .approach { grid-template-columns: repeat(3, 1fr); } }
/* 246:3797: #2f3949 at 64% paint opacity over the #1d2b45 section, not solid */
.approach li { background: #283447; border: 1px solid #2b333c; border-radius: 12px; padding: 27px 29px; }
.approach h3 { font-weight: 700; font-size: 20px; color: #ff5a6e; }
.approach p { margin-top: 8px; font-size: 16px; line-height: 25px; color: #9aa4ab; }
.dark.navy { background: #1d2b45; }
.dark.navy .cs-num { color: #ff5a6e; border-color: #ff5a6e; }
.dark.navy .cs-h2 { color: #f4f4f2; font-size: clamp(32px, 3.3vw, 64px); }
.dark.navy .cs-body-text { color: #b8c0c6; font-size: clamp(17px, 1.25vw, 24px); }

/* gallery / carousel */
.gallery { margin-top: 48px; }
.gallery .stage { position: relative; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 40px 70px -30px rgba(29,43,69,.35); aspect-ratio: 1365 / 687; }
.gallery .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.gallery .slide.on { opacity: 1; }
/* the hidden slides are stacked on top of the visible one — only the visible slide takes a tap */
.gallery .slide:not(.on) { pointer-events: none; }
.gallery .slide img, .gallery .slide video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.gallery .slide img, .ba img { cursor: zoom-in; }
.gallery .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; }
.gallery .cap { font-size: 16px; line-height: 21px; color: #6b757d; min-height: 42px; }
.gallery .cap b { color: #1d2b45; }
.gallery .ctrl { display: flex; gap: 6px; flex: none; }
.gallery .ctrl button { width: 39px; height: 39px; border-radius: 50%; border: 1px solid #acb0b9; display: grid; place-items: center; color: #1d2b45; background: #fff; transition: background .2s, opacity .2s; }
.gallery .ctrl button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .gallery .ctrl button:hover { background: #1d2b45; color: #fff; } }
.gallery .dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.gallery .dots i { width: 8px; height: 8px; border-radius: 50%; background: #acb0b9; }
.gallery .dots i.on { background: #c8102e; }

/* before / after */
.ba-title { margin: 48px 0 20px; font-family: var(--mono); font-size: 16px; letter-spacing: .5px; color: #1d2b45; text-transform: uppercase; }
.ba { display: grid; gap: 30px; }
@media (min-width: 900px) { .ba { grid-template-columns: 1fr 1fr; } }
.ba .frame { border: 1px solid #e2e6e0; border-radius: 10px; overflow: hidden; aspect-ratio: 815 / 410; background: #fff; }
.ba .frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; cursor: zoom-in; }
.ba figcaption { margin-top: 12px; font-size: 16px; line-height: 21px; color: #4d5860; }
.ba figcaption b { color: #01838d; } .ba figcaption b.new { color: #006837; }
.phones3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 20px 0; }
.phones3 img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 14px 28px -12px rgba(0,0,0,.35); }

/* Suzuki design-system swatches */
.sw-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sw-big span { height: 116px; border-radius: 10px; padding: 14px; display: flex; align-items: flex-end; font-family: var(--mono); font-size: 15px; color: #fff; opacity: 1; }
.sw-small { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.sw-small span { height: 86px; border-radius: 10px; padding: 13px; display: flex; align-items: flex-end; font-weight: 600; font-size: 15px; color: #fff; }

/* ---------- decided with Moran, 2026-09-29 ---------- */
/* §08–§09 blocks are one centred 1234 block on every case page (shot 2) */
@media (min-width: 1024px) { .stats, .summary, .reflect { margin-inline: calc(220 * var(--k)); } }

/* ---------- phones ----------
   Headings and text a size down, and image groups become a swipe row: one
   readable image at a time with the next one peeking in, instead of two or
   three thumbnails too small to read (TravelHub's screens were 151px wide). */
@media (max-width: 767px) {
  .cs-hero h1 { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.05; }
  /* the section variants (.blue, .dark.navy) set their own clamp, so name them too or they stay big */
  .cs-h2, .blue .cs-h2, .dark.navy .cs-h2 { font-size: clamp(24px, 6.8vw, 30px); line-height: 1.15; }
  .cs-hero .lede, .cs-body-text, .blue .cs-body-text, .dark.navy .cs-body-text { font-size: 16px; line-height: 1.6; }

  /* cards and boxes a size down too (the Bara pass found them oversized on every page) */
  .ncards h3 { font-size: 19px; }
  .ncards p, .stats p { font-size: 16px; line-height: 25px; }
  .stats li { padding: 22px 24px; }
  .stats b { font-size: 36px; }
  .summary { font-size: 17px; line-height: 28px; padding: 24px 22px; }
  .reflect div { padding: 24px 22px; }
  .reflect p { font-size: 16px; line-height: 26px; }
  .banner { padding: 28px 24px; }
  .banner p { font-size: 19px; line-height: 1.45; }

  /* chip rows: a two-column grid of equal pills instead of a ragged wrap (Itzik: Bara §05 had odd gaps);
     an odd last chip spans the row so nothing sits alone half-width */
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .chips li { display: grid; place-items: center; min-height: 48px; padding: 10px 12px; border-radius: 14px;
             text-align: center; white-space: normal; line-height: 1.3; }
  .chips li:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .shots.two, .shots.three, .screens {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .shots.two::-webkit-scrollbar, .shots.three::-webkit-scrollbar, .screens::-webkit-scrollbar { display: none; }
  .shots.two > .shot, .shots.three > .shot { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; }
  .screens { justify-items: initial; gap: 18px; }
  .screens .screen { flex: 0 0 min(72%, 280px); max-width: none; scroll-snap-align: start; }
}