/* ===========================================================================
   Case Studies — layer on top of the main site's style.css.
   Reuses the site tokens (--paper/--ink/--muted/--accent/--bg-alt/--line/--ease,
   the --f-* dark-band tints, .site-header, .pill-contact, .footer-band, .eyebrow).
   Only the case-study-specific components live here.
   =========================================================================== */

/* let native <details> panels animate open/closed where the browser supports it */
:root{ interpolate-size:allow-keywords; }

.cs-page main{ display:block; }

/* --- shared section rhythm ------------------------------------------------ */
.cs-section{ padding-block:var(--sec-pad); }
.cs-section--tight{ padding-block:clamp(56px,8vh,96px); }
.cs-section--alt{ background:var(--bg-alt); }

.cs-lede{
  font-family:'Neue Corp',Georgia,serif;font-weight:400;
  letter-spacing:-.03em;line-height:1.14;
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  max-width:20ch;
}
.cs-body{
  font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.62;color:var(--ink);
  max-width:60ch;
}
.cs-body + .cs-body{ margin-top:1.2em; }
.cs-body--muted{ color:var(--muted); }

/* ===========================================================================
   HERO
   =========================================================================== */
.cs-hero{ padding:clamp(120px,16vh,190px) 0 clamp(40px,6vh,72px); }

.cs-back{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Inter',sans-serif;font-size:.82rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  text-decoration:none;transition:color .3s var(--ease);
}
.cs-back:hover{ color:var(--accent); }
.cs-back svg{ width:18px;height:18px;transition:transform .3s var(--ease); }
.cs-back:hover svg{ transform:translateX(-4px); }

.cs-hero__title{
  font-family:'Neue Corp',Georgia,serif;font-weight:400;
  letter-spacing:-.03em;line-height:.94;
  font-size:clamp(3.4rem,11vw,8.2rem);
  margin:clamp(28px,5vh,56px) 0 0;
}

.cs-hero__row{
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px 64px;
  align-items:end;margin-top:clamp(30px,5vh,54px);
}
.cs-hero__tagline{
  font-family:'Neue Corp',Georgia,serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.2;max-width:24ch;
}

/* meta block (services / industry / year / visit) */
.cs-meta{ display:grid;grid-template-columns:1fr 1fr;gap:26px 40px; }
.cs-meta__item{ display:flex;flex-direction:column;gap:12px; }
.cs-meta__label{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.cs-meta__value{ font-size:1.02rem;line-height:1.4;color:var(--ink); }
.cs-tags{ display:flex;flex-wrap:wrap;gap:8px; }
.cs-tag{
  font-family:'Inter',sans-serif;font-size:.86rem;color:var(--ink);
  padding:6px 13px;border-radius:40px;border:1px solid var(--line);
  background:rgba(255,255,255,.35);
}
.cs-visit{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-family:'Inter',sans-serif;font-weight:500;font-size:1rem;
  color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--accent);padding-bottom:3px;
  transition:color .3s var(--ease);
}
.cs-visit:hover{ color:var(--accent); }
.cs-visit svg{ width:16px;height:16px; }

/* ===========================================================================
   FIGURES / IMAGERY
   =========================================================================== */
.cs-figure{ margin:0; }
.cs-figure__frame{
  border-radius:20px;overflow:hidden;background:var(--bg-alt);
  border:1px solid var(--line);
  box-shadow:0 30px 70px -30px rgba(20,19,16,.32);
}
.cs-figure__frame img{ display:block;width:100%;height:auto; }
.cs-figcaption{
  margin-top:16px;font-family:'Inter',sans-serif;font-size:.9rem;
  color:var(--muted);max-width:56ch;
}

/* browser-chrome mock for site screenshots */
.cs-browser{
  border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:#FBFAF7;box-shadow:0 30px 70px -30px rgba(20,19,16,.32);
}
.cs-browser__bar{
  display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;box-sizing:border-box;flex:none;
  border-bottom:1px solid var(--line);background:var(--bg-alt);
}
.cs-browser__dot{ width:10px;height:10px;border-radius:50%;background:rgba(20,19,16,.16); }
.cs-browser__url{
  margin-left:12px;font-family:'Inter',sans-serif;font-size:.75rem;line-height:1.4;color:var(--muted);
  background:var(--paper);border-radius:40px;padding:3px 14px;
}
.cs-browser__shot{ display:block;width:100%;height:auto; }

/* empty placeholder tile — clearly marks where real screenshots slot in */
.cs-shot-placeholder{
  aspect-ratio:16/10;display:grid;place-items:center;text-align:center;
  background:
    repeating-linear-gradient(-45deg,transparent 0 22px,rgba(20,19,16,.03) 22px 44px),
    var(--bg-alt);
  color:var(--muted);font-family:'Inter',sans-serif;font-size:.85rem;
  letter-spacing:.04em;text-transform:uppercase;
}

/* two / three-up media grid */
.cs-media-grid{ display:grid;gap:clamp(18px,2.4vw,30px); }
.cs-media-grid--2{ grid-template-columns:1fr 1fr; }
.cs-media-grid--3{ grid-template-columns:repeat(3,1fr); }

/* ===========================================================================
   SPLIT — sticky heading (left) + prose (right)
   =========================================================================== */
.cs-split{ display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,80px); }
.cs-split__head{ position:sticky;top:120px;align-self:start; }
.cs-split__title{
  font-family:'Neue Corp',Georgia,serif;font-weight:400;letter-spacing:-.03em;
  line-height:1.04;font-size:clamp(1.8rem,3.4vw,2.7rem);margin-top:16px;
}

/* ===========================================================================
   SPRINT / ACCORDION  (native <details> — accessible + AI-parseable as FAQ)
   =========================================================================== */
.cs-accordion{ border-top:1px solid var(--line); }
.cs-acc{ border-bottom:1px solid var(--line); }
.cs-acc__summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:18px;
  padding:clamp(20px,2.6vw,30px) 0;
  transition:padding-left .5s var(--ease);
}
.cs-acc__summary::-webkit-details-marker{ display:none; }
.cs-acc[open] .cs-acc__summary{ padding-left:6px; }
.cs-acc__index{
  font-family:'Inter',sans-serif;font-size:.9rem;font-weight:500;
  color:var(--muted);min-width:2.6ch;
}
.cs-acc__label{
  flex:1;font-family:'Neue Corp',Georgia,serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.06;color:var(--ink);
}
.cs-acc__sub{
  display:block;font-family:'Inter',sans-serif;font-size:.82rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.cs-acc__icon{ position:relative;width:20px;height:20px;flex-shrink:0;color:var(--accent); }
.cs-acc__icon::before,.cs-acc__icon::after{
  content:"";position:absolute;top:50%;left:50%;background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.cs-acc__icon::before{ width:20px;height:2px; }
.cs-acc__icon::after{ width:2px;height:20px; }
.cs-acc[open] .cs-acc__icon::after{ transform:translate(-50%,-50%) rotate(90deg);opacity:0; }

.cs-acc__panel{ overflow:hidden; }
.cs-acc__panel-inner{ padding:0 0 clamp(24px,3vw,34px) calc(2.6ch + 18px); max-width:66ch; }
.cs-acc__panel-inner .cs-body{ max-width:none; }
.cs-acc__list{ list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:12px; }
.cs-acc__list li{ position:relative;padding-left:26px;color:var(--ink);line-height:1.5; }
.cs-acc__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;
  background:var(--accent);
}
/* animate the native panel where supported; instant elsewhere */
.cs-acc::details-content{
  height:0;opacity:0;overflow:hidden;
  transition:height .45s var(--ease),opacity .35s var(--ease),content-visibility .45s allow-discrete;
}
.cs-acc[open]::details-content{ height:auto;opacity:1; }

/* ===========================================================================
   PULL QUOTE
   =========================================================================== */
/* NOTE: was max-width:24ch. `ch` resolves against THIS element's font-size
   (inherited 1rem Inter), not the 2.8rem display size on .cs-quote__text, so
   the pull-quote was clamped to ~242px and stacked into nine lines. Measured in
   the column instead: ~2-3 lines of display text, which is the range a
   pull-quote should read in. Same bug is live in redesign/case-studies/. */
.cs-quote{ max-width:min(100%,880px);margin-inline:auto;text-align:center; }
.cs-quote__text{
  font-family:'Neue Corp',Georgia,serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.12;margin:0;
}
/* <cite> is inline, so the margin-top here was silently doing nothing and the
   attribution sat on the quote's descenders. Same bug is live in
   redesign/case-studies/. */
.cs-quote__cite{
  display:block;
  margin-top:26px;font-family:'Inter',sans-serif;font-size:.95rem;color:var(--muted);
  font-style:normal;
}

/* ===========================================================================
   OUTCOME STATS
   =========================================================================== */
.cs-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px);
  border-top:1px solid var(--line);padding-top:clamp(32px,4.5vh,48px);
}
.cs-stat__num{
  font-family:'Neue Corp',Georgia,serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(2.6rem,6vw,4rem);line-height:1;color:var(--ink);
}
.cs-stat__num span{ color:var(--accent); }
.cs-stat__label{ margin-top:14px;font-size:.98rem;line-height:1.45;color:var(--muted);max-width:24ch; }

/* ===========================================================================
   NEXT PROJECT (lives inside the dark closing band, above .contact)
   =========================================================================== */
.cs-next{
  --f-dim:rgba(243,241,236,.55);--f-mid:rgba(243,241,236,.72);--f-line:rgba(243,241,236,.14);
  background:var(--ink);color:var(--paper);
  border-radius:28px 28px 0 0;
}
.cs-next__inner{ padding-block:clamp(44px,6vw,76px); }
.cs-next__label{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--f-dim);
}
.cs-next__link{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-top:20px;text-decoration:none;color:var(--paper);
}
.cs-next__name{
  font-family:'Neue Corp',Georgia,serif;font-weight:400;letter-spacing:-.03em;
  font-size:clamp(2.4rem,7vw,5rem);line-height:1;
  transition:color .3s var(--ease);
}
.cs-next__link:hover .cs-next__name{ color:var(--accent); }
.cs-next__arrow{ flex-shrink:0;color:var(--f-mid);transition:transform .4s var(--ease),color .3s var(--ease); }
.cs-next__link:hover .cs-next__arrow{ transform:translateX(8px);color:var(--paper); }
/* when the next-project band sits directly above .contact, drop its own top radius */
.cs-next + .contact{ border-radius:0; }

/* ===========================================================================
   LISTING (index.html)
   =========================================================================== */
.cs-index-hero{ padding:clamp(130px,18vh,220px) 0 clamp(20px,4vh,48px); }
.cs-index-hero__title{
  font-family:'Neue Corp',Georgia,serif;font-weight:400;letter-spacing:-.03em;
  line-height:.98;font-size:clamp(3rem,9vw,7rem);margin-top:20px;max-width:14ch;
}
.cs-index-hero__sub{ margin-top:28px;font-size:1.15rem;line-height:1.6;color:var(--muted);max-width:52ch; }

.cs-grid{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.4vw,52px); }
.cs-card{
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  border-radius:20px;overflow:hidden;
}
.cs-card__media{
  border-radius:20px;overflow:hidden;background:var(--bg-alt);border:1px solid var(--line);
  aspect-ratio:16/11;
}
.cs-card__media img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);
}
.cs-card:hover .cs-card__media img{ transform:scale(1.04); }
.cs-card__meta{ display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:22px; }
.cs-card__name{
  font-family:'Neue Corp',Georgia,serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.6rem,3vw,2.3rem);line-height:1;
  transition:color .3s var(--ease);
}
.cs-card:hover .cs-card__name{ color:var(--accent); }
.cs-card__kind{ font-family:'Inter',sans-serif;font-size:.82rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:right; }
.cs-card__desc{ margin-top:12px;color:var(--muted);line-height:1.55;max-width:44ch; }

/* ===========================================================================
   JOURNEY — scroll-scrubbed isometric scene (left) + the steps it draws (right)
   Behaviour lives in journey.js. Two variants share this layout:
   data-journey="sprints" (the four-week website build) and "path" (UX process).
   =========================================================================== */
.cs-journey{
  --cs-j-bg:var(--paper);
  --cs-j-line:rgba(20,19,16,.55);
  --cs-j-sketch:rgba(124,114,92,.55);
  --cs-j-top:#ECEAE3;   --cs-j-left:#DBD7CC;   --cs-j-right:#CAC5B9;
  --cs-j-top-a:#C7CBFE; --cs-j-left-a:#9AA1FD; --cs-j-right-a:#6670FB;

  /* Animation left, prose right. --cs-j-split is the animation column; the
     30-40% range is the design target, so it stays a knob rather than a
     baked-in fr pair (it was .92fr/1.08fr, ~46%, when the scene led). */
  --cs-j-split:36%;
  display:grid;grid-template-columns:minmax(0,var(--cs-j-split)) minmax(0,1fr);
  gap:clamp(28px,4.5vw,72px);align-items:start;
}
.cs-section--alt .cs-journey{ --cs-j-bg:var(--bg-alt); }

.cs-journey__intro{ max-width:56ch;margin-bottom:clamp(18px,2.4vh,32px); }
.cs-journey__title{
  font-family:'Neue Corp',Georgia,serif;font-weight:400;letter-spacing:-.03em;
  line-height:1.04;font-size:clamp(1.8rem,3.4vw,2.7rem);margin-top:16px;
}
.cs-journey__intro .cs-body{ margin-top:20px; }

/* The pinned stage. Its top clears the fixed header, and its height is set so
   that the stage stays pinned right through the final step: journey.js finishes
   each scene about halfway through that step, and the trailing space below the
   list covers the rest. Changing top/height here means re-checking that. */
.cs-journey__stage{
  position:sticky;top:12svh;height:76svh;
  display:grid;place-items:center;
}
.cs-journey__svg{
  display:block;width:80%;height:auto;max-height:76svh;
}

/* the steps that scrub it */
.cs-journey__steps{ list-style:none;margin:0;padding:0 0 8svh; }
.cs-journey__step{
  min-height:62svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(20px,4vh,44px);
  opacity:.3;transition:opacity .55s var(--ease);
}
/* Steps stay CENTRED, including the first: that is what keeps each step's text
   level with the pinned scene beside it (measured: 47px offset centred, 152px
   top-aligned). The gap under the intro was closed by the shorter step box and
   the tighter intro margin above, not by breaking that pairing. */
.cs-journey__step.is-active{ opacity:1; }

.cs-journey__marker{ display:flex;align-items:baseline;gap:14px; }
.cs-journey__index{
  font-family:'Inter',sans-serif;font-size:.9rem;font-weight:500;color:var(--accent);
}
.cs-journey__sub{
  font-family:'Inter',sans-serif;font-size:.82rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.cs-journey__label{
  font-family:'Neue Corp',Georgia,serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.06;color:var(--ink);
  margin:12px 0 16px;
}
.cs-journey__step .cs-body{ max-width:46ch; }
.cs-journey__points{ list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:12px; }
.cs-journey__points li{ position:relative;padding-left:26px;line-height:1.5;max-width:46ch; }
.cs-journey__points li::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;
  background:var(--accent);
}

@media(max-width:900px){
  /* stacked, there is no room to pin the scene beside the prose, so it is
     dropped and the steps read as plain text */
  .cs-journey{ grid-template-columns:1fr;gap:0; }
  .cs-journey__stage{ display:none; }
  .cs-journey__steps{ padding-bottom:0; }
  /* the steps read as a plain list here, so none of them is dimmed */
  .cs-journey__step{ min-height:0;padding-block:clamp(30px,7vh,56px);opacity:1; }
}

@media(prefers-reduced-motion:reduce){
  .cs-journey__step{ opacity:1; }
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media(max-width:900px){
  .cs-hero__row{ grid-template-columns:1fr;gap:34px; }
  .cs-split{ grid-template-columns:1fr;gap:28px; }
  .cs-split__head{ position:static;top:auto; }
  .cs-grid{ grid-template-columns:1fr; }
  .cs-media-grid--2,.cs-media-grid--3{ grid-template-columns:1fr; }
  .cs-stats{ grid-template-columns:1fr;gap:28px; }
}
@media(max-width:560px){
  .cs-meta{ grid-template-columns:1fr; }
  .cs-acc__panel-inner{ padding-left:0; }
  .cs-next__arrow{ display:none; }
}

/* ===========================================================================
   CASE STUDY STANDARD (redesign/case-studies/CASE-STUDY-GUIDE.md)
   Prose matches the Insights post body (site/insights/insights.css .post-body)
   so a case study reads in the same voice as the rest of the site.
   =========================================================================== */
.cs-glance__lead{
  font-family:'Neue Corp',Georgia,serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.16;max-width:34ch;
  margin-top:14px;
}
.cs-glance .cs-stats{ margin-top:clamp(36px,5vh,60px); }

.cs-prose{ font-family:'Inter',sans-serif;font-size:1.12rem;line-height:1.8;color:#2c2a24;max-width:62ch; }
.cs-prose p{ margin:0 0 24px; }
.cs-prose > :last-child{ margin-bottom:0; }
.cs-prose strong{ color:var(--ink);font-weight:600; }
.cs-prose h3{
  font-family:'Inter',sans-serif;font-weight:600;font-size:1.2rem;letter-spacing:-.01em;
  color:var(--ink);margin:44px 0 12px;
}
.cs-prose ul{ list-style:none;margin:0 0 24px;padding-left:4px;display:flex;flex-direction:column;gap:12px; }
.cs-prose li{ position:relative;padding-left:28px;font-size:1.08rem;line-height:1.6; }
.cs-prose ul li::before{
  content:"";position:absolute;left:4px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}

/* The journey as the story of the build: each phase is full prose with one key
   decision. Steps grow to their content, and the decision's rule lights up in
   step with the scene beside it. */
.cs-journey--story .cs-journey__step{
  min-height:0;justify-content:flex-start;
  padding-block:clamp(56px,11vh,120px);opacity:.4;
}
.cs-journey--story .cs-journey__step.is-active{ opacity:1; }
.cs-journey--story .cs-journey__step + .cs-journey__step{ border-top:1px solid var(--line); }
.cs-journey--story .cs-journey__label{ font-size:clamp(1.8rem,3.4vw,2.6rem);margin:14px 0 20px; }
.cs-journey--story .cs-prose{ max-width:58ch; }

.cs-call{
  margin-top:36px;padding-top:26px;max-width:58ch;
  border-top:1px solid var(--line);transition:border-color .55s var(--ease);
}
.cs-call__k{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);transition:color .55s var(--ease);
}
.cs-call__title{
  font-family:'Neue Corp',Georgia,serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.15;color:var(--ink);margin:10px 0 18px;
}
.is-active .cs-call{ border-top-color:var(--accent); }
.is-active .cs-call__k{ color:var(--accent); }

/* the work: image and text, alternating sides */
.cs-features{ display:flex;flex-direction:column;gap:clamp(72px,11vh,130px);margin-top:clamp(36px,5vh,64px); }
.cs-feature{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:center;
}
.cs-feature--flip{ grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); }
.cs-feature--flip .cs-feature__media{ order:2; }
.cs-feature__title{
  font-family:'Neue Corp',Georgia,serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.08;color:var(--ink);margin:14px 0 16px;
}
.cs-feature__text .cs-prose{ font-size:1.05rem; }

/* one shared image area for every work row: tune --cs-shot-ratio here, images crop to fit */
.cs-features{ --cs-shot-ratio:13/9; }
.cs-feature__media{ aspect-ratio:var(--cs-shot-ratio);width:100%; }
.cs-feature__media .cs-browser,
.cs-feature__media .cs-figure__frame{ height:100%;display:flex;flex-direction:column; }
.cs-feature__media .cs-browser__shot,
.cs-feature__media .cs-figure__frame img{ flex:1 1 0;min-height:0;width:100%;object-fit:cover;object-position:top left; }
.cs-feature__media .cs-figure__frame--contain img{ object-fit:contain;object-position:center; }
.cs-feature__media .cs-shot-placeholder{ flex:1 1 0;aspect-ratio:auto; }
.cs-feature__media.cs-media-grid--2{ grid-template-columns:1fr 1fr;align-content:center;align-items:center; }
/* frames default to square here; set --cs-frame-ratio inline on a frame to override one image */
.cs-feature__media.cs-media-grid--2 .cs-figure__frame{ height:auto;aspect-ratio:var(--cs-frame-ratio,1); }
/* mobile showcase: a phone-shaped frame centred on a panel inside the shared area */
.cs-feature__media.cs-figure--mobile{
  display:flex;justify-content:center;padding:24px;
  background:var(--bg-alt);border-radius:20px;
}
.cs-feature__media.cs-figure--mobile .cs-figure__frame{ width:auto;aspect-ratio:var(--cs-frame-ratio,.7);border-radius:12px; }

.cs-close{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px; }
.cs-close .cs-split__title{ max-width:20ch;margin-top:0; }

@media (max-width:900px){
  .cs-feature,.cs-feature--flip{ grid-template-columns:1fr;gap:24px; }
  .cs-feature--flip .cs-feature__media{ order:0; }
  .cs-features{ --cs-shot-ratio:3/2; }
  .cs-journey--story .cs-journey__step{ opacity:1;padding-block:clamp(40px,7vh,64px); }
}
@media (max-width:720px){
  .cs-prose{ font-size:1.05rem; }
  .cs-prose li{ font-size:1.02rem; }
}