/* ── Case study detail, v3 (Sep 2026) ────────────────────────────────
   Structured after orizon.co/work: a white page with one statement headline
   instead of a title, a full-bleed cover, three story sections that each pair
   a heading and one paragraph with an asymmetric collage, a dark testimonial
   card, then the screens at full width. Dcycle's own type and colour
   throughout: Archivo for headings, Inter for reading, Instrument Serif
   italic for the emphasised phrase, gold only where a hand should go.

   Self-contained: no Tailwind, no story.css. Only footer.css is shared, so
   the footer cannot drift from the rest of the site. Pilot: woomenow.html;
   the other eight studies move over once this one is signed off. */

:root{--ink:#0A0A0A;--paper:#FFFFFF;--smoke:#F5F5F3;--line:#E7E7E4;--mute:#6B6B6B;
  --body:#2E2E2E;--gold:#EFC63F;--goldhi:#F6D65E;--goldink:#876711;
  --r-media:clamp(16px,2.2vw,28px);--r-card:clamp(20px,2.6vw,32px);
  --ease:cubic-bezier(.2,.8,.2,1)}

/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
figure{margin:0}
h1,h2,h3,p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wordmark{font-family:'Poppins',sans-serif;font-weight:700;letter-spacing:-.02em}
.width-100{
  width: 100%;
}
/* ── widths ──
   Three measures, the way the reference page is built: the page frame, a
   reading column that stays narrow, and a media band wider than the text so
   the screens are the biggest thing on the page. */
.cswrap{max-width:1280px;margin:0 auto;padding:0 20px}
@media(min-width:1024px){.cswrap{padding:0 40px}}
.cs-read{max-width:760px;margin:0 auto}
.cs-media{max-width:1240px;margin:0 auto}

/* ── scroll reveal (same device the rest of the site uses) ── */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in,html.reveal-all .rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── nav ──
   The site header in its light form: fixed, translucent, a hairline once the
   page has scrolled. Links collapse into a drawer behind the burger below
   900px, as on the work page. */
.cn{position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s ease,background .3s ease}
.cn.is-stuck{border-bottom-color:var(--line);background:rgba(255,255,255,.9)}
.cn-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
@media(min-width:900px){.cn-in{height:72px}}
.cn-brand{display:flex;align-items:center;gap:8px;color:var(--ink)}
.cn-brand svg{height:26px;width:auto}
.cn-brand .wordmark{font-size:19px;line-height:1}
.cn-links{display:none;gap:32px}
@media(min-width:900px){.cn-links{display:flex}}
.cn-links a{font-size:14px;font-weight:500;color:var(--mute);transition:color .25s ease}
.cn-links a:hover,.cn-links a.is-here{color:var(--ink)}
.cn-end{display:flex;align-items:center;gap:12px}
.cn-cta{flex:none;font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;
  background:var(--gold);color:var(--ink);border-radius:100px;padding:11px 22px;
  transition:background .25s ease,transform .25s ease}
.cn-cta:hover{background:var(--goldhi);transform:translateY(-1px)}
.cn-burger{width:40px;height:40px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;border:1px solid var(--line);border-radius:100px;
  background:none;cursor:pointer;flex:none;padding:0}
@media(min-width:900px){.cn-burger{display:none}}
.cn-burger span{display:block;width:15px;height:1.5px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .2s ease}
.cn-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.cn-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.cn-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.cn-mnav{display:none;background:rgba(255,255,255,.97);border-top:1px solid var(--line)}
.cn-mnav.is-open{display:block}
@media(min-width:900px){.cn-mnav,.cn-mnav.is-open{display:none}}
.cn-mnav-in{max-width:1280px;margin:0 auto;padding:6px 20px 22px}
.cn-mnav a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:15px 0;font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;
  color:var(--ink);border-bottom:1px solid var(--line)}
.cn-mnav a span{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.cn-mnav a.is-cta{border-bottom:none;color:var(--goldink)}

/* ── hero: the statement ──
   No client name as a title. One sentence that says what happened, with the
   outcome set in the serif italic, then the client and the facts of the job
   in a row underneath. */
.cs-hero{padding:132px 0 56px}
@media(min-width:900px){.cs-hero{padding:172px 0 72px}}
.cs-back{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
  margin-bottom:30px;transition:color .25s}
.cs-back:hover{color:var(--ink)}
.cs-back svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.cs-hero-in{max-width:900px}
.cs-statement{font-family:'Archivo',sans-serif;font-weight:600;letter-spacing:-.035em;
  line-height:1.1;font-size:clamp(1.9rem,4.7vw,3.5rem);color:var(--ink);text-wrap:balance}
.cs-statement em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  font-size:1.08em;letter-spacing:-.01em}
.cs-meta{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px;margin-top:44px}
@media(min-width:760px){.cs-meta{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px;margin-top:56px}}
.cs-meta dt{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);margin-bottom:9px}
.cs-meta dd{margin:0;font-family:'Archivo',sans-serif;font-weight:600;font-size:16px;
  line-height:1.35;color:var(--ink)}
.cs-meta dd span{display:block;font-family:'Inter',sans-serif;font-weight:400;font-size:13.5px;
  color:var(--mute);margin-top:4px}
.cs-meta .is-client dd{display:flex;align-items:center;gap:10px}
.cs-meta .is-client dd img{width:34px;height:34px;border-radius:9px;object-fit:cover}

/* ── cover: full bleed ── */
.cs-cover{padding:0 12px}
@media(min-width:1024px){.cs-cover{padding:0 20px}}
.cs-cover figure{position:relative;overflow:hidden;border-radius:var(--r-media);background:#111;
  aspect-ratio:16/10}
@media(min-width:900px){.cs-cover figure{aspect-ratio:1.72;max-height:820px}}
.cs-cover img{width:100%;height:100%;object-fit:cover}

/* ── story sections ── */
.cs-sec{padding-top:clamp(64px,9vw,120px)}
.cs-k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--goldink);margin-bottom:18px}
.cs-h2{font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.04em;line-height:1.05;
  font-size:clamp(1.9rem,4.2vw,3.25rem);color:var(--ink);text-wrap:balance}
.cs-h2 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  font-size:1.06em;color:var(--mute)}
.cs-p{margin-top:24px;font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.7;color:var(--body)}
.cs-p+.cs-p{margin-top:18px}
.cs-p b{font-weight:600;color:var(--ink)}
.cs-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.cs-tags span{font-size:14px;color:var(--mute);border:1px solid var(--line);border-radius:100px;
  padding:10px 18px;line-height:1}

/* The phases: a compact strip under the second section rather than a list. */
.cs-phases{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;margin-top:40px;
  padding-top:30px;border-top:1px solid var(--line)}
@media(min-width:760px){.cs-phases{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cs-phase b{display:block;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:11px;
  letter-spacing:.2em;color:var(--goldink);margin-bottom:10px}
.cs-phase strong{display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:15.5px;
  line-height:1.3;color:var(--ink)}
.cs-phase span{display:block;font-size:13.5px;line-height:1.5;color:var(--mute);margin-top:5px}

/* ── collages ──
   Every cell is a rounded frame that crops its image (object-fit: cover), so
   the shapes are set here and not by the screenshots. Two arrangements:
   .is-a  one wide shot on the left, two stacked on the right
   .is-b  two stacked on the left, one tall shot on the right
   Below 760px both become a single column with each cell at its own ratio. */
.cs-collage{display:grid;gap:clamp(12px,2vw,24px);margin-top:clamp(40px,6vw,72px)}
.cs-collage figure{position:relative;overflow:hidden;border-radius:var(--r-media);background:var(--smoke)}
.cs-collage img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.cs-collage figure.is-c img{object-position:50% 50%}
.cs-collage figure{aspect-ratio:4/3}
.cs-collage figure.is-wide{aspect-ratio:16/10}
.cs-collage figure.is-tall{aspect-ratio:4/5}
@media(min-width:760px){
  .cs-collage figure,.cs-collage figure.is-wide,.cs-collage figure.is-tall{aspect-ratio:auto}
  .cs-collage.is-a{grid-template-columns:minmax(0,2.35fr) minmax(0,1fr);
    grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:1240/680}
  .cs-collage.is-a figure:first-child{grid-row:1/3}
  .cs-collage.is-b{grid-template-columns:minmax(0,1fr) minmax(0,2fr);
    grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:1240/860}
  .cs-collage.is-b figure:last-child{grid-row:1/3;grid-column:2}
}

/* ── stats ── */
.cs-stats{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px;margin-top:44px;
  padding-top:34px;border-top:1px solid var(--line)}
@media(min-width:760px){.cs-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}
.cs-stat b{display:block;font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.05em;
  line-height:1;font-size:clamp(2.1rem,4.4vw,3rem);color:var(--ink)}
.cs-stat b small{font-size:.42em;font-weight:700;letter-spacing:0;color:var(--mute);margin-left:3px}
.cs-stat i{display:block;font-style:normal;font-size:13.5px;line-height:1.5;color:var(--mute);margin-top:10px}

/* ── testimonial: a dark card beside a phone ── */
.cs-proof{display:grid;gap:clamp(12px,2vw,24px);margin-top:clamp(40px,6vw,72px)}
@media(min-width:900px){.cs-proof{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr)}}
.cs-quote{background:var(--ink);color:#fff;border-radius:var(--r-card);
  padding:clamp(34px,5vw,72px) clamp(26px,5.5vw,80px);display:flex;flex-direction:column;
  justify-content:space-between;gap:40px;position:relative;overflow:hidden}
.cs-quote::before{content:'\201C';position:absolute;top:-.12em;right:.18em;
  font-family:'Instrument Serif',Georgia,serif;font-size:clamp(9rem,16vw,15rem);line-height:1;
  color:rgba(255,255,255,.06);pointer-events:none}
.cs-quote blockquote{margin:0;font-family:'Archivo',sans-serif;font-weight:600;letter-spacing:-.025em;
  line-height:1.28;font-size:clamp(1.45rem,2.9vw,2.2rem);text-wrap:balance;position:relative}
.cs-quote blockquote em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  font-size:1.08em;color:var(--gold)}
.cs-quote-by{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;
  position:relative}
.cs-quote-who{display:flex;align-items:center;gap:14px}
.cs-quote-av{width:48px;height:48px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#F8DC6B,#DCA92A);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;letter-spacing:-.02em}
.cs-quote-who b{display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:15px}
.cs-quote-who span{display:block;font-size:13px;color:rgba(255,255,255,.55);margin-top:2px}
.cs-clutch{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.16);
  border-radius:100px;padding:9px 16px 9px 12px;font-size:12.5px;color:rgba(255,255,255,.7)}
.cs-clutch b{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;color:#fff}
.cs-clutch i{font-style:normal;color:var(--gold);letter-spacing:.06em;font-size:12px}
.cs-proof figure{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--smoke);
  aspect-ratio:4/5;min-height:100%}
@media(max-width:899px){.cs-proof figure{aspect-ratio:16/11}}
.cs-proof figure img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.cs-proof figure.is-phone{background:var(--smoke);padding:clamp(20px,3vw,36px) clamp(28px,4vw,48px) 0}
.cs-proof figure.is-phone img{border-radius:22px 22px 0 0;border:1px solid var(--line);border-bottom:none;
  box-shadow:0 30px 60px -20px rgba(10,10,10,.28);width:min(100%,300px);margin:0 auto}
@media(max-width:899px){.cs-proof figure.is-phone img{width:min(100%,260px)}}

/* ── the screens ──
   Full-page scrolls one under another at the media width. Every frame is
   16:10 (or 9:16 for a phone), the image shows its top and pans to its bottom
   on hover; a tap toggles the pan where there is no hover. */
.cs-screens{margin-top:clamp(40px,6vw,72px);display:grid;gap:clamp(18px,2.6vw,32px)}
.cs-screens .row-2{display:grid;gap:clamp(18px,2.6vw,32px)}
@media(min-width:760px){.cs-screens .row-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.cs-shot{position:relative}
.cs-shot .frame{position:relative;overflow:hidden;border-radius:var(--r-media);background:var(--smoke);
  border:1px solid var(--line);aspect-ratio:16/10}
.cs-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0;
  transition:object-position var(--pan,9s) linear}
.cs-shot.is-page{cursor:pointer}
@media(hover:hover){.cs-shot.is-page:hover img{object-position:50% 100%}}
.cs-shot.is-page.is-open img{object-position:50% 100%}
.cs-screens .row-2 .frame{aspect-ratio:4/3}
.cs-shot.is-phone .frame{display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(20px,3vw,40px) clamp(20px,3vw,40px) 0}
.cs-shot.is-phone img{height:100%;width:auto;max-width:100%;aspect-ratio:9/16;object-fit:cover;
  border-radius:22px 22px 0 0;border:1px solid var(--line);border-bottom:none;
  box-shadow:0 30px 60px -20px rgba(10,10,10,.28)}
.cs-shot figcaption{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--mute);
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.cs-shot figcaption b{font-weight:600;color:var(--ink)}
.cs-shot figcaption i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(107,107,107,.7)}
@media(prefers-reduced-motion:reduce){.cs-shot img{transition:none}}

/* ── next: one study, one CTA ── */
.cs-next{margin-top:clamp(72px,10vw,140px);border-top:1px solid var(--line);padding:clamp(48px,6vw,80px) 0}
.cs-next-in{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.cs-next-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}
.cs-next-card{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center;
  border-radius:var(--r-card);overflow:hidden}
@media(min-width:560px){.cs-next-card{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.cs-next-card figure{border-radius:var(--r-media);overflow:hidden;background:var(--smoke);aspect-ratio:16/10}
.cs-next-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.cs-next-card:hover img{transform:scale(1.035)}
.cs-next-card h3{font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.035em;line-height:1.08;
  font-size:clamp(1.5rem,2.8vw,2.1rem);margin-top:8px}
.cs-next-card p{font-size:15px;line-height:1.6;color:var(--mute);margin-top:10px;max-width:34ch}
.cs-next-go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;color:var(--ink)}
.cs-next-go svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.cs-next-card:hover .cs-next-go svg{transform:translateX(4px)}
.cs-next-cta h2{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.045em;line-height:1.02;
  font-size:clamp(2rem,4.2vw,3.2rem)}
.cs-next-cta h2 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  color:var(--mute)}
.cs-next-cta p{margin-top:16px;font-size:15.5px;line-height:1.7;color:var(--mute);max-width:44ch}
.cs-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cs-btn{display:inline-flex;align-items:center;gap:9px;border-radius:100px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:14.5px;padding:13px 26px;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.cs-btn svg{width:15px;height:15px}
.cs-btn-gold{background:var(--gold);color:var(--ink)}
.cs-btn-gold:hover{background:var(--goldhi);transform:translateY(-2px)}
.cs-btn-ghost{border:1px solid var(--line);color:var(--ink)}
.cs-btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}

/* footer.css puts the footer behind a sliding page on the homepage; here it
   sits in the flow, with a little breathing room above it. */
.ftx.ftx-static{margin-top:0}

/* ── additions (Sep 2026): a three-up row of phones, and the insight card ──
   .row-3 sits three phone frames side by side on desktop, one under another
   on a phone. .is-insight is the dark card used when a study has a design
   principle to state rather than a client quote: same card, gold label. */
.cs-screens .row-3{display:grid;gap:clamp(18px,2.6vw,32px)}
@media(min-width:760px){.cs-screens .row-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cs-screens .row-3 .frame{aspect-ratio:4/5}
.cs-quote.is-insight::before{content:'\2192'}
.cs-quote.is-insight .cs-quote-av{background:linear-gradient(135deg,#FFFFFF,#D9D9D6);font-size:17px}
.cs-quote.is-insight .cs-clutch b{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#EFC63F}

/* ── smooth pan (Sep 2026) ──
   The hover pan used to animate object-position, which repaints the whole
   bitmap every frame; on a 6000px page screenshot that stutters and reads as
   slow. The image now keeps its natural height and slides with a composited
   transform, ending exactly at its own bottom (container units give the frame
   height). Duration comes from --pan on each figure, scaled to the page's
   height: about a second per 1100px, never under 3s or over 7s. */
.cs-shot.is-page .frame{container-type:size}
.cs-shot.is-page img{height:auto;object-fit:fill;
  transition:transform var(--pan,5s) cubic-bezier(.45,0,.2,1);will-change:transform}
@media(hover:hover){.cs-shot.is-page:hover img{transform:translateY(calc(-100% + 100cqh))}}
.cs-shot.is-page.is-open img{transform:translateY(calc(-100% + 100cqh))}
.cs-shot.is-page.is-phone img{height:auto;width:min(100%,320px);aspect-ratio:auto}
@media(prefers-reduced-motion:reduce){.cs-shot.is-page img{transition:none;will-change:auto}}

/* ── full-bleed cover (Sep 2026) ──
   The cover runs edge to edge with no gutter and no rounding, so it reads as
   a band across the page rather than a card. Height still follows the
   viewport: 16:10 on phones, 1.72:1 on desktop, capped at 820px. */
.cs-cover{padding:0}
@media(min-width:1024px){.cs-cover{padding:0}}
.cs-cover figure{border-radius:0;width:100%}

/* ── the magazine (Sep 2026): a 3D flip-book for print work ──
   Six leaves, each with a front and a back page, on a plum backdrop that
   matches the Figma compositions. The book sits closed (cover only), opens
   to five spreads, closes on the back cover, then riffles back to the front.
   Leaves are absolutely positioned on the right half and rotate about the
   spine; z-index keeps the pile in order, .is-turning lifts the moving leaf. */
.cs-book{margin:0}
.cs-book-stage{position:relative;overflow:hidden;border-radius:var(--r-media);border:1px solid var(--line);
  background:radial-gradient(120% 100% at 50% 0%,#8A4BB8 0%,#5B2A8C 46%,#2A1449 100%);
  padding:clamp(28px,5vw,64px) clamp(16px,4vw,48px) clamp(18px,3vw,32px)}
.cs-book-vol{position:relative;width:min(100%,860px);aspect-ratio:1356/899;margin:0 auto;
  perspective:2600px;transition:transform 1.15s cubic-bezier(.45,.05,.2,1)}
.cs-book-vol[data-state="closed"]{transform:translateX(-25%)}
.cs-book-vol[data-state="end"]{transform:translateX(25%)}
.cs-leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;
  transform-style:preserve-3d;transition:transform var(--flip,1.15s) cubic-bezier(.45,.05,.2,1);
  z-index:calc(var(--n,6) - var(--i,0));will-change:transform}
.cs-leaf.is-turned{transform:rotateY(-180deg);z-index:calc(var(--i,0) + 1)}
.cs-leaf.is-turning{z-index:60}
.cs-book-vol.is-fast .cs-leaf{--flip:.55s}
.cs-leaf .pg{position:absolute;inset:0;overflow:hidden;background:#fff;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.55)}
.cs-leaf .pg.back{transform:rotateY(180deg)}
.cs-leaf .pg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:none}
.cs-leaf .pg::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.9;
  background:linear-gradient(to right,rgba(0,0,0,.22),rgba(0,0,0,0) 14%)}
.cs-leaf .pg.back::before{background:linear-gradient(to left,rgba(0,0,0,.22),rgba(0,0,0,0) 14%)}
.cs-leaf .pg::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(to right,rgba(0,0,0,.05),rgba(0,0,0,.42));transition:opacity .55s ease}
.cs-leaf .pg.back::after{background:linear-gradient(to left,rgba(0,0,0,.05),rgba(0,0,0,.42))}
.cs-leaf.is-turning .pg::after{opacity:1;transition-duration:.35s}
.cs-book-vol{cursor:pointer}
.cs-book-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(18px,3vw,28px)}
.cs-book-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.07);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;
  transition:background .25s ease,transform .25s ease}
.cs-book-btn svg{width:15px;height:15px}
.cs-book-btn:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.cs-book-dots{display:flex;gap:7px}
.cs-book-dots i{display:block;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);
  transition:background .35s ease,transform .35s ease}
.cs-book-dots i.is-on{background:var(--gold);transform:scale(1.3)}
@media(prefers-reduced-motion:reduce){
  .cs-book-vol,.cs-leaf,.cs-leaf .pg::after{transition:none}
  .cs-leaf{will-change:auto}
}

/* ── fitted cover (Sep 2026): a designed banner shown whole ──
   .is-fit keeps the cover band's height but never crops the artwork: the
   image is contained and centred, and the band behind it is the same
   image blurred and stretched, so the space either side reads as a soft
   continuation of the picture rather than a bar. --cover-src carries the
   image URL, set inline on the figure. */
.cs-cover figure.is-fit{background:#fff}
.cs-cover figure.is-fit::before{content:'';position:absolute;inset:-48px;
  background:var(--cover-src) center/cover no-repeat;filter:blur(36px) saturate(1.05);
  transform:scale(1.04);opacity:.92}
.cs-cover figure.is-fit img{position:relative;object-fit:contain;object-position:50% 50%}

/* ── fitted collage cells and proof card ── the same idea as the fitted
   cover: a mockup is shown whole inside whatever cell the grid gives it,
   and the cell behind it is the mockup blurred, so no bars and no crop. */
.cs-collage figure.is-fit,.cs-proof figure.is-fit{background:var(--smoke)}
.cs-collage figure.is-fit::before,.cs-proof figure.is-fit::before{content:'';position:absolute;inset:-40px;
  background:var(--cover-src) center/cover no-repeat;filter:blur(28px) saturate(1.05);
  transform:scale(1.04);opacity:.95}
.cs-collage figure.is-fit img,.cs-proof figure.is-fit img{position:relative;object-position:50% 50%}