/* =========================================================
   Breakfast — case-study art-direction system
   Loaded ONLY on project pages. Consumes the curated --ad-*
   custom properties emitted by Content\ArtDirection so every
   case study can look genuinely bespoke while still sitting
   inside the Breakfast design system (nav, footer, type,
   focus states, accessibility, motion tokens all shared).
   Nothing here reads untrusted input: the vars are a fixed,
   validated whitelist.
   ========================================================= */

/* ---------- Root scope + token wiring ---------- */
.cs {
  /* Derived working tokens from the resolved art-direction vars. */
  --cs-space: calc(clamp(3rem, 6vw, 5.5rem) * var(--ad-density, 1));
  --cs-radius: var(--ad-corner, 12px);
  --cs-rot: var(--ad-rot, 3deg);
  --cs-border-w: var(--ad-border-w, 2px);
  --cs-accent: var(--ad-accent, var(--primary));
  --cs-secondary: var(--ad-secondary, var(--secondary));
  --cs-on-accent: var(--ad-on-accent, #1c293c);
  --cs-maxw: 1240px;
  --cs-prose: 40rem;

  position: relative;
  color: var(--ad-text, var(--text));
  background: var(--ad-bg, var(--bg));
  font-family: var(--ad-body-font, var(--font));
  overflow: clip;                 /* contain rotated/oversized art without page scroll */
}
/* The case study paints its own field, so drop the site's dotted paper here. */
.cs { background-image: none; }

.cs :where(h1, h2, h3, h4) {
  font-family: var(--ad-display-font, var(--font));
  letter-spacing: var(--ad-display-track, -0.03em);
}
.cs[data-ad-display="mono-caps"] :where(h1, h2, h3) { text-transform: uppercase; letter-spacing: 0.02em; }

.cs__inner { width: 100%; max-width: var(--cs-maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.cs__prose { max-width: var(--cs-prose); }

/* Vertical rhythm: every top-level section gets art-directed spacing. */
.cs__body > * { margin-block: var(--cs-space); }
.cs__body > *:first-child { margin-top: calc(var(--cs-space) * 0.6); }

/* Shared "surface" treatment driven by border/corner tokens. */
.cs-surface {
  border-radius: var(--cs-radius);
  border: var(--cs-border-w) solid var(--ad-text, var(--text));
  overflow: hidden;
}
.cs[data-ad-border="none"] .cs-surface { border: 0; }
.cs[data-ad-border="thick"] .cs-surface,
.cs[data-ad-border="heavy"] .cs-surface { box-shadow: 8px 8px 0 var(--ad-text, var(--text)); }

.cs figure { margin: 0; }
.cs img { display: block; width: 100%; height: auto; }

/* =========================================================
   HERO VARIANTS
   ========================================================= */
.cs__hero { position: relative; }
.cs__kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.8;
}
.cs__title { font-size: clamp(2.4rem, 7vw, 5.5rem); line-height: 0.98; margin-block: 0.3em 0.25em; }
.cs__lead { font-size: clamp(1.05rem, 1.6vw, 1.4rem); max-width: 40rem; line-height: 1.5; }
.cs__tag {
  display: inline-block; margin-top: 1rem; padding: 0.35em 0.8em;
  font-size: 0.8rem; font-weight: 700; border-radius: 999px;
  background: var(--cs-accent); color: var(--cs-on-accent);
}

/* A. Cinematic — full-bleed media, overlaid headline. */
.cs__hero--cinematic { min-height: min(86vh, 780px); display: grid; }
.cs__hero--cinematic .cs__hero-media { grid-area: 1 / 1; }
.cs__hero--cinematic .cs__hero-media img { width: 100%; height: 100%; object-fit: cover; min-height: min(86vh, 780px); }
.cs__hero--cinematic .cs__hero-copy {
  grid-area: 1 / 1; align-self: end; z-index: 1;
  width: 100%; max-width: var(--cs-maxw); margin-inline: auto;
  padding: clamp(1.5rem, 5vw, 4rem);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
  color: #fff;
}
.cs__hero--cinematic .cs__title { color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5); }
.cs__hero--cinematic .cs__kicker { color: #fff; opacity: 0.95; }

/* B. Layered devices — desktop frame with mobile screens overlapping. */
.cs__hero--layered-devices { padding-block: var(--cs-space); }
.cs__hero--layered-devices .cs__inner { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .cs__hero--layered-devices .cs__inner { grid-template-columns: 0.9fr 1.1fr; } }
.cs__hero--layered-devices .cs__devices { position: relative; }

/* C. Editorial — big type, narrow column, off-grid image, colour field. */
.cs__hero--editorial { padding-block: var(--cs-space); position: relative; }
.cs__hero--editorial::before {
  content: ""; position: absolute; inset: 0 0 40% auto; left: 0; width: min(46%, 520px);
  background: var(--cs-accent); opacity: 0.16; z-index: 0;
}
.cs__hero--editorial .cs__inner { position: relative; z-index: 1; }
.cs__hero--editorial .cs__title { max-width: 14ch; }
.cs__hero--editorial .cs__hero-media { margin-top: clamp(1.5rem, 4vw, 3rem); transform: rotate(calc(var(--cs-rot) * -0.5)); }

/* D. Collage — several rotated screenshots, playful stagger. */
.cs__hero--collage { padding-block: var(--cs-space); }
.cs__hero--collage .cs__collage {
  margin-top: clamp(1.5rem, 4vw, 3rem);
  display: grid; gap: clamp(0.75rem, 2vw, 1.5rem);
  grid-template-columns: repeat(6, 1fr);
}
.cs__hero--collage .cs__collage > * { grid-column: span 3; }
.cs__hero--collage .cs__collage > :nth-child(1) { grid-column: span 4; transform: rotate(calc(var(--cs-rot) * -1)); }
.cs__hero--collage .cs__collage > :nth-child(2) { grid-column: span 2; transform: rotate(var(--cs-rot)); margin-top: 2rem; }
.cs__hero--collage .cs__collage > :nth-child(3) { grid-column: span 2; transform: rotate(calc(var(--cs-rot) * 0.6)); }
.cs__hero--collage .cs__collage > :nth-child(4) { grid-column: span 4; transform: rotate(calc(var(--cs-rot) * -0.5)); }

/* E. Minimal impact — huge name, one screenshot, negative space. */
.cs__hero--minimal { padding-block: calc(var(--cs-space) * 1.3) var(--cs-space); text-align: center; }
.cs__hero--minimal .cs__title { font-size: clamp(2.8rem, 11vw, 8rem); margin-inline: auto; }
.cs__hero--minimal .cs__lead { margin-inline: auto; }
.cs__hero--minimal .cs__hero-media { margin-top: clamp(2rem, 5vw, 4rem); }
.cs__hero--minimal .cs__hero-media img { border-radius: var(--cs-radius); }

/* F. Split-screen — details one side, visual the other. */
.cs__hero--split .cs__inner { display: grid; grid-template-columns: 1fr; min-height: min(80vh, 720px); }
@media (min-width: 900px) { .cs__hero--split .cs__inner { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); } }
.cs__hero--split .cs__hero-copy { padding-block: var(--cs-space); }
.cs__hero--split .cs__hero-media img { border-radius: var(--cs-radius); }

/* =========================================================
   ART-DIRECTED BLOCKS
   ========================================================= */

/* Full-bleed image — breaks the container to the viewport edge. */
.cs-fullbleed { width: 100vw; margin-inline: calc(50% - 50vw); }
.cs-fullbleed img { width: 100%; max-height: 92vh; object-fit: cover; }

/* Oversized screenshot — wider than the reading column, intentional. */
.cs-oversized { width: min(120%, 100vw); margin-inline: calc(50% - min(60%, 50vw)); }
.cs-oversized .cs-surface { transform: scale(var(--ad-img-scale, 1)); transform-origin: center; }

/* Rotated screenshot. */
.cs-rotate { --rot: var(--cs-rot); }
.cs-rotate--neg { --rot: calc(var(--cs-rot) * -1); }
.cs-rotate figure { transform: rotate(var(--rot)); transition: transform var(--dur-mid) var(--ease-out); }

/* Stacked screenshots — overlapping vertical stack. */
.cs-stack { display: grid; }
.cs-stack > * { grid-area: 1 / 1; }
.cs-stack > :nth-child(2) { transform: translate(14%, 12%) rotate(var(--cs-rot)); width: 62%; justify-self: end; align-self: end; }
.cs-stack > :nth-child(3) { transform: translate(-10%, -14%) rotate(calc(var(--cs-rot) * -1)); width: 46%; }

/* Edge-to-edge colour block. */
.cs-colourblock {
  width: 100vw; margin-inline: calc(50% - 50vw);
  background: var(--cs-accent); color: var(--cs-on-accent);
  padding-block: var(--cs-space);
}
.cs-colourblock--secondary { background: var(--cs-secondary); color: var(--ad-on-secondary, #fff); }

/* Narrow editorial text column. */
.cs-text { max-width: var(--cs-prose); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.65; }
.cs-text h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 0.6em; }
.cs-text--center { margin-inline: auto; text-align: center; }

/* Numbered story section. */
.cs-numbered { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: start; }
.cs-numbered__n { font-family: var(--ad-display-font, var(--font)); font-weight: 900; font-size: clamp(3rem, 9vw, 7rem); line-height: 0.8; color: var(--cs-accent); }

/* Project-fact band. */
.cs-facts { display: grid; gap: clamp(1rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.cs-facts__item .v { font-family: var(--ad-display-font, var(--font)); font-weight: 900; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1; }
.cs-facts__item .l { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; margin-top: 0.4em; }

/* Project statement — bold editorial narration (NOT a quote). */
.cs-statement { font-size: clamp(1.8rem, 5vw, 3.6rem); line-height: 1.08; font-weight: 900; max-width: 20ch; letter-spacing: -0.02em; }
.cs-statement--center { margin-inline: auto; text-align: center; max-width: 24ch; }
.cs-statement em { font-style: normal; color: var(--cs-accent); }

/* Horizontal page strip — scrollable row of captures. */
.cs-strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 560px); gap: clamp(0.75rem, 2vw, 1.5rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; scrollbar-width: thin; }
.cs-strip > * { scroll-snap-align: start; }

/* Font specimen. */
.cs-specimen__big { font-family: var(--ad-display-font, var(--font)); font-weight: 900; font-size: clamp(4rem, 18vw, 14rem); line-height: 0.82; letter-spacing: var(--ad-display-track); }
.cs-specimen__row { font-family: var(--ad-display-font, var(--font)); font-size: clamp(1.2rem, 3vw, 2rem); opacity: 0.9; }

/* Colour-palette moment. */
.cs-palette { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; min-height: clamp(140px, 22vw, 260px); border-radius: var(--cs-radius); overflow: hidden; }
.cs-palette__swatch { display: flex; align-items: flex-end; padding: 0.75rem; font-family: var(--mono); font-size: 0.72rem; }

/* Caption styles. */
.cs-cap { margin-top: 0.6rem; font-size: 0.85rem; opacity: 0.8; }
.cs[data-ad-caption="mono-tag"] .cs-cap { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; }
.cs[data-ad-caption="handwritten"] .cs-cap { font-family: var(--hand); font-size: 1.3rem; color: var(--cs-secondary); opacity: 1; }
.cs[data-ad-caption="boxed"] .cs-cap { display: inline-block; padding: 0.2em 0.6em; background: var(--cs-accent); color: var(--cs-on-accent); border-radius: 6px; }

/* Device arrangement — desktop frame with a mobile screen overlapping. */
.cs__devices { position: relative; }
.cs__devices > figure:first-child { width: 100%; }
.cs__device-mobile { position: relative; z-index: 2; }
@media (max-width: 760px) {
  .cs__device-mobile { position: static; width: 55% !important; margin: -8% auto 0 !important; transform: none !important; }
}

/* Full-page capture treatments — never render the raw natural height. */
.cs-fullpage--strip img { width: 100%; height: clamp(320px, 42vw, 560px); object-fit: cover; object-position: top; }
.cs-fullpage--frame { max-height: 78vh; overflow-y: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.cs-fullpage--frame img { width: 100%; height: auto; }
.cs-fullpage--pan { height: clamp(340px, 56vh, 640px); overflow: hidden; }
.cs-fullpage--pan img { width: 100%; height: auto; will-change: transform; }

/* =========================================================
   LAYERED COMPOSITION  (bounded 12×8 grid, overflow-contained)
   ========================================================= */
.cs-comp {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  aspect-ratio: var(--comp-ar, 16 / 9);
  overflow: hidden;                 /* nothing escapes the canvas → no page overflow */
  border-radius: var(--cs-radius);
  background: color-mix(in srgb, var(--ad-text, #1c293c) 6%, transparent);
}
.cs-comp__layer {
  grid-column: var(--l-col) / span var(--l-cs);
  grid-row: var(--l-row) / span var(--l-rs);
  align-self: center;
  justify-self: center;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform: scale(var(--l-scale, 1)) rotate(var(--l-rot, 0deg));
  opacity: var(--l-op, 1);
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-mid) var(--ease-out);
}
.cs-comp__layer img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.cs-comp__layer.border-thin img { border: 2px solid var(--ad-text, #1c293c); }
.cs-comp__layer.border-thick img { border: 3px solid var(--ad-text, #1c293c); }
.cs-comp__layer.shadow-sm img { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); }
.cs-comp__layer.shadow-md img { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); }
.cs-comp__layer.shadow-lg img { box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28); }
.cs-comp__layer.frame-browser { padding-top: 1.4rem; position: relative; background: #fff; border-radius: 8px; }
.cs-comp__chrome { position: absolute; top: 0; left: 0; right: 0; height: 1.4rem; background: var(--ad-text, #1c293c); border-radius: 8px 8px 0 0; }
.cs-comp__chrome::before { content: ""; position: absolute; top: 0.5rem; left: 0.6rem; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #ff5f56; box-shadow: 0.6rem 0 0 #ffbd2e, 1.2rem 0 0 #27c93f; }
.cs-comp__layer.frame-phone { border: 6px solid var(--ad-text, #1c293c); border-radius: 20px; background: #000; }
.cs-comp__caption { font-family: var(--mono); font-size: 0.8rem; text-align: center; }
.cs-comp__marker { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--cs-accent); color: var(--cs-on-accent); font-weight: 800; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.cs-comp__shape { display: block; width: 100%; height: 100%; }
.cs-comp__shape--circle { border: 3px solid var(--cs-accent); border-radius: 50%; }
.cs-comp__shape--dot { background: var(--cs-accent); border-radius: 50%; width: 60%; height: 0; padding-bottom: 60%; margin: auto; }
.cs-comp__shape--line { border-top: 3px solid var(--cs-accent); height: 0; align-self: center; }
.cs-comp__shape--underline { border-bottom: 6px solid var(--cs-accent); height: 0; align-self: end; }
.cs-comp__notes { margin-top: 1rem; display: grid; gap: 0.5rem; }
.cs-comp__notes li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.9rem; }
.cs-comp__notes b { flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--cs-accent); color: var(--cs-on-accent); font-size: 0.75rem; }

/* Per-breakpoint layer overrides + visibility. */
@media (min-width: 1025px) { .cs-comp__layer.hd { display: none; } }
@media (min-width: 641px) and (max-width: 1024px) {
  .cs-comp__layer.ht { display: none; }
  .cs-comp__layer {
    grid-column: var(--l-col-t, var(--l-col)) / span var(--l-cs-t, var(--l-cs));
    grid-row: var(--l-row-t, var(--l-row)) / span var(--l-rs-t, var(--l-rs));
    transform: scale(var(--l-scale-t, var(--l-scale, 1))) rotate(var(--l-rot-t, var(--l-rot, 0deg)));
  }
}
@media (max-width: 640px) {
  .cs-comp__layer.hm { display: none; }
  .cs-comp__layer {
    grid-column: var(--l-col-m, var(--l-col)) / span var(--l-cs-m, var(--l-cs));
    grid-row: var(--l-row-m, var(--l-row)) / span var(--l-rs-m, var(--l-rs));
    transform: scale(var(--l-scale-m, var(--l-scale, 1))) rotate(var(--l-rot-m, var(--l-rot, 0deg)));
  }
}

/* =========================================================
   PULL-QUOTE VARIANTS  (driven by [data-ad-pullquote])
   ========================================================= */
.cs-quote { max-width: 34rem; }
.cs-quote__text { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.3; font-weight: 700; }
.cs-quote__cite { margin-top: 1rem; font-size: 0.9rem; opacity: 0.75; }

.cs[data-ad-pullquote="giant"] .cs-quote { max-width: 22ch; }
.cs[data-ad-pullquote="giant"] .cs-quote__text { font-size: clamp(2rem, 6vw, 4.4rem); line-height: 1.05; letter-spacing: -0.02em; }

.cs[data-ad-pullquote="marks"] .cs-quote { position: relative; padding-top: 1.4em; max-width: 24ch; }
.cs[data-ad-pullquote="marks"] .cs-quote::before { content: "\201C"; position: absolute; top: -0.35em; left: -0.06em; font-family: var(--ad-display-font, var(--font)); font-size: clamp(6rem, 16vw, 12rem); line-height: 1; color: var(--cs-accent); }
.cs[data-ad-pullquote="marks"] .cs-quote__text { font-size: clamp(1.8rem, 5vw, 3.4rem); line-height: 1.1; }

.cs[data-ad-pullquote="panel"] .cs-quote { max-width: none; background: var(--cs-accent); color: var(--cs-on-accent); border-radius: var(--cs-radius); padding: clamp(1.5rem, 4vw, 3rem); }
.cs[data-ad-pullquote="panel"] .cs-quote__text { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }

.cs[data-ad-pullquote="rotated"] .cs-quote { background: var(--white); border: 3px solid var(--ad-text, var(--text)); box-shadow: 8px 8px 0 var(--cs-accent); border-radius: var(--cs-radius); padding: clamp(1.5rem, 4vw, 2.5rem); transform: rotate(calc(var(--cs-rot) * -1)); max-width: 30rem; }

.cs[data-ad-pullquote="over-image"] .cs-quote--over { display: grid; }
.cs[data-ad-pullquote="over-image"] .cs-quote--over > * { grid-area: 1 / 1; }
.cs[data-ad-pullquote="over-image"] .cs-quote--over .cs-quote__text { align-self: center; justify-self: start; max-width: 18ch; padding: clamp(1rem, 4vw, 3rem); color: #fff; font-size: clamp(1.6rem, 4vw, 3rem); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6); z-index: 1; }
.cs[data-ad-pullquote="over-image"] .cs-quote--over img { filter: brightness(0.7); border-radius: var(--cs-radius); }

/* =========================================================
   BEFORE / AFTER
   ========================================================= */
.cs-ba { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .cs-ba { grid-template-columns: 1fr 1fr; } }
.cs-ba figcaption { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; margin-top: 0.5rem; }
.cs-ba__label { display: inline-block; padding: 0.2em 0.6em; border-radius: 6px; background: var(--ad-text, var(--text)); color: var(--ad-bg, #fff); font-size: 0.72rem; }

/* Before/after slider (progressive-enhanced; static split without JS). */
.cs-baslider { position: relative; border-radius: var(--cs-radius); overflow: hidden; touch-action: pan-y; }
.cs-baslider__after { position: absolute; inset: 0; width: 50%; overflow: hidden; border-right: 3px solid #fff; }
.cs-baslider__after img, .cs-baslider__before img { height: 100%; object-fit: cover; }
.cs-baslider__range { position: absolute; inset: 0; width: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cs-baslider__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; pointer-events: none; }
.cs-baslider__handle::after { content: "\2194"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.2rem; height: 2.2rem; display: grid; place-items: center; background: #fff; color: #1c293c; border-radius: 999px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }

/* =========================================================
   ANNOTATIONS
   ========================================================= */
.cs-annot { position: relative; display: inline-block; }
.cs-annot__marker { position: absolute; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 999px; background: var(--cs-accent); color: var(--cs-on-accent); font-weight: 800; font-size: 0.85rem; transform: translate(-50%, -50%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.cs-annot__note { margin-top: 0.75rem; font-size: 0.9rem; display: flex; gap: 0.6rem; align-items: baseline; }
.cs-annot__note b { background: var(--cs-accent); color: var(--cs-on-accent); border-radius: 999px; width: 1.5rem; height: 1.5rem; display: inline-grid; place-items: center; font-size: 0.75rem; flex: none; }

/* =========================================================
   STICKY SCROLL STORY
   ========================================================= */
.cs-sticky { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .cs-sticky { grid-template-columns: 1fr 1fr; align-items: start; } }
.cs-sticky__media { position: sticky; top: calc(var(--header-h, 78px) + 1.5rem); }
.cs-sticky__steps > * { min-height: 60vh; display: flex; align-items: center; }

/* =========================================================
   SECTION TRANSITIONS  (driven by [data-ad-transition])
   ========================================================= */
.cs[data-ad-transition="oversized-rule"] .cs__body > * + * { border-top: 4px solid var(--ad-text, var(--text)); padding-top: var(--cs-space); }
.cs[data-ad-transition="hard-cut"] .cs-colourblock + * { margin-top: 0; }
.cs[data-ad-transition="angled"] .cs-colourblock { clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); }
.cs[data-ad-transition="slide-panel"] .cs-colourblock { position: relative; }

/* =========================================================
   MOTIFS  (decorative, aria-hidden)
   ========================================================= */
.cs-motif { position: absolute; pointer-events: none; opacity: 0.5; z-index: 0; }
.cs[data-ad-motif="dots"] .cs__hero { background-image: radial-gradient(currentColor 1.5px, transparent 0); background-size: 22px 22px; }
.cs[data-ad-motif="grid"] .cs__hero { background-image: linear-gradient(currentColor 1px, transparent 0), linear-gradient(90deg, currentColor 1px, transparent 0); background-size: 40px 40px; }
.cs[data-ad-motif="dots"] .cs__hero, .cs[data-ad-motif="grid"] .cs__hero { --tw: 1; }
.cs[data-ad-motif="dots"] .cs__hero *, .cs[data-ad-motif="grid"] .cs__hero * { position: relative; }

/* =========================================================
   ANIMATION CHARACTERS  (build on the shared .reveal contract)
   ========================================================= */
.js .cs .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.js .cs .reveal.is-visible { opacity: 1; transform: none; }

.js .cs[data-ad-anim="playful-stagger"] .reveal { transform: translateY(26px) rotate(calc(var(--cs-rot) * 0.4)); }
.js .cs[data-ad-anim="playful-stagger"] { --stagger: 120ms; }
.js .cs[data-ad-anim="mask-reveal"] .reveal { clip-path: inset(0 0 100% 0); opacity: 1; transform: none; transition: clip-path var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.js .cs[data-ad-anim="mask-reveal"] .reveal.is-visible { clip-path: inset(0 0 0 0); }
.js .cs[data-ad-anim="fade"] .reveal { transform: none; transition: opacity var(--dur-reveal) var(--ease-soft); }
.js .cs[data-ad-anim="device-assembly"] .cs__devices .reveal:nth-child(odd) { transform: translateY(24px) scale(0.96); }
.js .cs[data-ad-anim="device-assembly"] .cs__devices .reveal:nth-child(even) { transform: translateY(-24px) scale(0.96); }
.js .cs[data-ad-anim="none"] .reveal { opacity: 1; transform: none; transition: none; }

/* Parallax-lite: handled by JS adding a small translate via --cs-par; capped. */
.js .cs[data-ad-anim="parallax-lite"] .cs-par { will-change: transform; transform: translateY(var(--cs-par, 0)); }

/* =========================================================
   ENDING VARIANTS
   ========================================================= */
.cs__end { margin-top: var(--cs-space); }
.cs__end--results .cs-facts__item .v { color: var(--cs-accent); }
.cs__end--visit { text-align: center; padding-block: var(--cs-space); }
.cs__end--testimonial { background: var(--cs-accent); color: var(--cs-on-accent); }
.cs__end--motif { text-align: center; }
.cs__cta {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem;
  padding: 0.9em 1.4em; border-radius: 999px; font-weight: 800;
  background: var(--ad-text, var(--text)); color: var(--ad-bg, #fff);
  transition: transform var(--dur-fast) var(--ease-out);
}
.cs__cta:hover { transform: translateY(-2px); }

/* =========================================================
   RESPONSIVE ART DIRECTION — simplify, never break
   ========================================================= */
@media (max-width: 760px) {
  .cs { --cs-rot: calc(var(--ad-rot, 3deg) * 0.5); }        /* calmer rotation on mobile */
  .cs__hero--collage .cs__collage { grid-template-columns: 1fr 1fr; }
  .cs__hero--collage .cs__collage > * { grid-column: span 1 !important; transform: none !important; margin-top: 0 !important; }
  .cs-stack > * { position: static; transform: none !important; width: 100% !important; }
  .cs-stack { gap: 0.75rem; }
  .cs-numbered { grid-template-columns: 1fr; gap: 0.5rem; }
  .cs-oversized { width: 100vw; margin-inline: calc(50% - 50vw); }
  .cs-oversized .cs-surface { transform: none; }
  .cs-sticky__media { position: static; }
  .cs-rotate figure { transform: none; }                    /* readability first */
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .js .cs .reveal,
  .js .cs[data-ad-anim] .reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .cs-par { transform: none !important; }
  .cs-baslider__range { cursor: default; }
  .cs * { scroll-behavior: auto; }
}