/* visualutopia.ai v2: Method and the case study pages, 2026-10-14.
   The main page scrolls; Method and each case study open on pages of their own
   (Andrea, 2026-10-14). Layout only; values come from tokens.css through styles.css. */

.reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.sec-title {
  font-size: clamp(34px, 4.6vw, 68px); font-weight: var(--vu-weight-light);
  letter-spacing: var(--vu-track-caps); text-transform: uppercase; line-height: 1.08;
  margin: 0 0 calc(var(--step) * 6);
}
.method-page .block { padding: calc(var(--step) * 10) 0; }
@media (min-width: 761px) { .method-page .block:nth-of-type(even) .prose { order: 2; } }

.page-end {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--step) * 4);
  padding: calc(var(--step) * 10) 0 calc(var(--step) * 14); border-top: var(--vu-border) solid var(--vu-line);
}
.btn {
  display: inline-block; background: var(--vu-accent); color: var(--vu-accent-on); text-decoration: none;
  font-size: var(--vu-size-small); font-weight: var(--vu-weight-medium); letter-spacing: var(--vu-track-caps);
  text-transform: uppercase; padding: 12px 22px;
}

/* ---- Case study pages ---- */
.case-main { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.case-page .case { padding: 0; }
.case-page .peel { height: 100vh; clip-path: none; margin-top: 0; }
.case-page .peel-pane { position: absolute; }
.case-page .peel-copy { opacity: 1; transform: none; }
.case-page .case-body { padding-top: calc(var(--step) * 10); }
.case-page .case-body > * + .blk, .case-page .blk + .gal-nav { margin-top: calc(var(--step) * 6); }

/* The blocks a case study page can mix, any number, any order */
.blk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: calc(var(--step) * 2); }
.blk-grid img, .blk-grid video { width: 100%; height: auto; display: block; }
.blk-single img, .blk-single video { width: 100%; height: auto; display: block; }
.blk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--step) * 2); align-items: start; }
.blk-pair img, .blk-pair video { width: 100%; height: auto; display: block; }
.blk-text { max-width: 40em; }
.blk-text p { font-size: calc(var(--vu-size-body) * 1.2); line-height: 1.55; }
@media (max-width: 760px) { .blk-pair { grid-template-columns: 1fr; } }

/* ---- The Method door on the main page ---- */
.method-door .door { max-width: 44em; margin: 0 auto; text-align: center; padding: calc(var(--step) * 12) 0 calc(var(--step) * 4); }
.method-door .door .lede { margin: 0 auto calc(var(--step) * 5); }

/* ---- 2026-10-14: case study pages carry running copy between pictures (Jeanée's Marathon copy).
   Each passage sits on the surface tone across the full width, the same tone as the deck boxes
   on the main page, so text and pictures alternate as bands. ---- */
.c-head-page {
  font-size: clamp(28px, 4.7vw, 48px); font-weight: var(--vu-weight-medium); letter-spacing: var(--vu-track-caps); /* 48px top size, 28px on a phone (2026-10-16) */
  text-transform: uppercase; line-height: 1.02; margin: calc(var(--step) * 1) 0 0; color: #fff; max-width: 12em;
}
.case-page .case-body { padding-top: 0; }
.blk-text {
  max-width: none; background: var(--vu-surface); margin: 0 calc(50% - 50vw); padding: calc(var(--step) * 12) var(--gutter);
}
.blk-text p { max-width: 36em; margin: 0 auto; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.55; }
.case-page .case-body > .blk + .blk { margin-top: calc(var(--step) * 10); }
.case-page .case-body > .blk-text + .blk, .case-page .case-body > .blk + .blk-text { margin-top: calc(var(--step) * 10); }

/* A row of pictures at one height, side by side; a grid on a phone */
.blk-band { display: flex; gap: calc(var(--step) * 1.5); height: clamp(220px, 22vw, 360px); }
.blk-band img { height: 100%; width: auto; flex: 1 1 auto; min-width: 0; object-fit: cover; display: block; }
.blk-band.band-4 { height: clamp(260px, 28vw, 440px); }
@media (max-width: 760px) {
  .blk-band, .blk-band.band-4 { display: grid; grid-template-columns: 1fr 1fr; height: auto; }
  .blk-band img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}

/* The film, with its credit beneath */
.blk-film { margin-left: 0; margin-right: 0; }
.blk-film video { width: 100%; height: auto; display: block; background: #0c0c0e; }
.blk-film figcaption {
  font-size: var(--vu-size-small); font-weight: var(--vu-weight-medium); letter-spacing: var(--vu-track-caps);
  text-transform: uppercase; padding-top: calc(var(--step) * 2);
}

/* Square crops for a band (Andrea, 2026-10-14: the mixed shapes "look strange on computer").
   Equal squares in one row on a laptop, two to a row on a phone. */
.blk-band.band-square { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; height: auto; }
.blk-band.band-square img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 760px) { .blk-band.band-square { grid-template-columns: 1fr 1fr; grid-auto-flow: row; } }

/* ---- 2026-10-14: the samurai moves out of the opener into Method (Andrea): the references
   beside the clip they made. A wide block, words above, four references and the clip below. ---- */
.method-page .block.block-wide { display: block; }
.method-page .block.block-wide .prose { max-width: 40em; margin-bottom: calc(var(--step) * 5); }
.refs-clip { display: grid; grid-template-columns: 1.2fr 1fr; gap: calc(var(--step) * 2); align-items: end; }
.refs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--step) * 2); }
.refs figure, .refs-clip .clip { margin: 0; }
.refs img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: #fff; }
.refs-clip video { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; display: block; background: #0c0c0e; }
.refs figcaption, .refs-clip .clip figcaption { font-size: var(--vu-size-small); color: var(--vu-muted); padding-top: calc(var(--step) * 1); line-height: 1.4; }
@media (max-width: 760px) { .refs-clip { grid-template-columns: 1fr; } }

/* Three references now (Andrea, 2026-10-14: the mask close-up was a second mask, used for details). */
.refs { grid-template-columns: 1fr 1fr 1fr; }
.refs-clip { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 760px) { .refs { grid-template-columns: 1fr 1fr 1fr; } }

/* The clip on a row of its own at every width, below the references (Andrea, 2026-10-14). */
.refs-clip { display: block; }
.refs-clip .clip { margin: calc(var(--step) * 4) auto 0; width: min(100%, 560px, calc(85vh * 2 / 3)); }
.refs-clip .clip figcaption { text-align: center; }

.blk-single .frame { width: 100%; aspect-ratio: 16 / 10; }

/* FLO screenshots: a thin line around them so the interface reads as a screen on the page */
.shot-img { margin-left: 0; margin-right: 0; }
.shot-img img { width: 100%; height: auto; display: block; border: var(--vu-border) solid var(--vu-line-strong); }

/* A slider of FLO screens: taller, each with the screen line */
.gallery.shots > * { height: clamp(260px, min(52vw, 72vh), 760px); }
.gallery.shots img { border: var(--vu-border) solid var(--vu-line-strong); }

/* Three portrait-format source photographs, Lifetime (2026-10-15). */
.blk-band.band-3 { height: clamp(300px, 34vw, 520px); justify-content: center; }
.blk-band.band-3 img { height: 100%; width: auto; flex: 0 1 auto; }
@media (max-width: 760px) { .blk-band.band-3 { grid-template-columns: 1fr 1fr 1fr; } .blk-band.band-3 img { aspect-ratio: 3 / 4; } }

/* Fixed column counts for a case page grid (Virtual Casting, 2026-10-15). */
.blk-grid.grid-2 { grid-template-columns: 1fr 1fr; }
.blk-grid.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 760px) { .blk-grid.grid-2 { grid-template-columns: 1fr 1fr; } .blk-grid.grid-3 { grid-template-columns: 1fr; } }

/* ---- 2026-10-17 (Jeanée): the top of Process in the case-page style. Text on the surface-tone
   bands, pictures beneath; each step's pictures in a sideways slider. ---- */
.method-page .gallery { display: flex; gap: calc(var(--step) * 1.5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.method-page .gallery::-webkit-scrollbar { display: none; }
.method-page .gallery > * { flex: none; height: clamp(280px, min(44vw, 64vh), 640px); scroll-snap-align: start; }
.method-page .gallery img { width: auto; display: block; object-fit: cover; }
.method-page .gal-nav { display: flex; justify-content: flex-end; gap: calc(var(--step) * 2); margin: calc(var(--step) * 3) 0 0; }
.method-page .gal-nav button { width: 44px; height: 44px; border-radius: 50%; background: transparent; cursor: pointer; border: 2px solid var(--vu-accent); color: var(--vu-accent); font-size: 20px; line-height: 1; padding: 0; font-family: system-ui, sans-serif; }
.process-intro { padding-bottom: 0; }
.process-top { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.process-top > .blk + .blk, .process-top > .gal-nav + .blk { margin-top: calc(var(--step) * 10); }
.process-top > .blk-gallery { margin-top: calc(var(--step) * 6); }
.blk-text .c-head, .blk-text .part-title { max-width: 36rem; margin: 0 auto calc(var(--step) * 3); }
.blk-text p + p { margin-top: calc(var(--step) * 2.5); }
.c-head { font-size: clamp(20px, 2vw, 28px); font-weight: var(--vu-weight-medium); letter-spacing: var(--vu-track-caps); text-transform: uppercase; line-height: 1.2; }
.blk-text .part-title { font-size: clamp(24px, 3.7vw, 54px); font-weight: var(--vu-weight-light); letter-spacing: var(--vu-track-caps); text-transform: uppercase; line-height: 1.08; }
.ab-pair .frame { aspect-ratio: 4 / 5; width: 100%; }
.process-more { text-align: center; margin: calc(var(--step) * 5) 0 calc(var(--step) * 4); }
.process-top .blk-text > * { max-width: 820px; margin-left: auto; margin-right: auto; }

/* ---- 2026-10-18 (Jeanée): Process, second round. Everything aligns left with the A-heads; B-heads in
   the homepage's "A human-forward…" style, in black; blue bullets; the five steps open from a blue
   symbol into the live site's slideshow; run-in heads in blue over faint rules. ---- */
.process-top { padding-top: calc(var(--step) * 12); padding-bottom: calc(var(--step) * 4); }
.process-top > .sec-title { margin: calc(var(--step) * 14) 0 calc(var(--step) * 5); }
.process-top > .sec-title:first-child { margin-top: 0; }
.process-top .blk-text { padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); }
.process-top .blk-text > * { max-width: 820px; margin-left: 0; margin-right: 0; }
.process-top .blk-text > .blue-list, .process-top .blk-text > .runins { max-width: none; }
.process-top > .sec-title + .blk { margin-top: 0; }
.b-head { font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: var(--vu-weight-medium); line-height: 1.2; color: var(--vu-ink); text-transform: none; letter-spacing: normal; margin: 0 0 calc(var(--step) * 3); }
.blue-list { list-style: disc; padding-left: 1.2em; margin-top: calc(var(--step) * 2.5); display: grid; gap: calc(var(--step) * 1.5) calc(var(--step) * 6); }
.blue-list li { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.45; padding-left: .2em; }
.blue-list li::marker { color: var(--vu-accent); }
.blue-list.qs { grid-template-columns: repeat(3, auto); justify-content: start; }
.blue-list.two { grid-template-columns: 1fr 1fr; max-width: 1100px !important; }
@media (max-width: 860px) { .blue-list.qs, .blue-list.two { grid-template-columns: 1fr; } }
details.steps { margin-top: calc(var(--step) * 2.5); }
details.steps summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: calc(var(--step) * 2); color: var(--vu-accent); }
details.steps summary::-webkit-details-marker { display: none; }
.steps-line { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.45; }
.steps-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--vu-accent); position: relative; }
.steps-icon::before, .steps-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: var(--vu-accent); transform: translate(-50%, -50%); }
.steps-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
details.steps[open] .steps-icon::after { display: none; }
details.steps summary:hover .steps-icon { background: var(--vu-accent); }
details.steps summary:hover .steps-icon::before, details.steps summary:hover .steps-icon::after { background: var(--vu-accent-on); }
.steps-body { margin-top: calc(var(--step) * 8); }
.slideshow { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slideshow::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: start; }
.slide-swap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.swap-cell { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
.swap-cell .sc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transition: opacity .9s; }
.swap-cell .sc-img.sc-on { opacity: 1; }
.slide-copy .step-k { font-size: var(--vu-size-small); letter-spacing: var(--vu-track-caps); text-transform: uppercase; color: var(--vu-muted); margin: 0 0 calc(var(--step) * 2); }
.slide-copy .c-head { margin-bottom: calc(var(--step) * 2.5); }
.slide-copy p { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; }
@media (max-width: 760px) { .slide { grid-template-columns: 1fr; gap: calc(var(--step) * 3); } }
.runins { margin-top: calc(var(--step) * 4); }
.runins p { border-top: 1px solid var(--vu-line, rgba(0,0,0,.15)); padding: calc(var(--step) * 2.5) 0; margin: 0 !important; }
.runins p:last-child { border-bottom: 1px solid var(--vu-line, rgba(0,0,0,.15)); }
.runins strong { color: var(--vu-accent); font-weight: var(--vu-weight-medium); }
/* "COLLABORATE" is one long word: on a narrow phone the Process A-heads step down so it fits. */
@media (max-width: 420px) { .process-top > .sec-title { font-size: 21px; } }
/* Places sits inside the five steps now (Jeanée, 2026-10-18): its head a smaller B-head, the
   Cumberland photographs a band of squares like the Iceland band on Marathon. */
.b-head-sm { font-size: clamp(1.2rem, 2vw, 1.75rem); }
.blk-band.band-4sq { display: grid; grid-template-columns: repeat(4, 1fr); height: auto; }
.steps-body > .blk + .blk, .steps-body > .gal-nav + .blk { margin-top: calc(var(--step) * 10); }
.steps-body .blk-text { padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); }
.steps-body .blk-text > * { max-width: 820px; margin-left: 0; margin-right: 0; }
@media (max-width: 760px) { .blk-band.band-4sq { grid-template-columns: 1fr 1fr; } }
/* About 30% less space above "We start here", desktop and phone (Jeanée, 2026-10-18). */
.page.method-page { padding-top: calc(var(--step) * 10 * 0.7); }
.process-top { padding-top: calc(var(--step) * 12 * 0.7); }
@media (max-width: 860px) { .page.method-page { padding-top: calc(var(--step) * 6 * 0.7); } }
/* Process ends on a ribbon CTA styled exactly like the homepage's "Where do we start?" (Jeanée, 2026-10-18).
   Same values as scroll.css .turn-wrap.ribbon, which this page does not load. */
.cta-ribbon { margin: calc(var(--step) * 14) 0 0; background: var(--vu-accent); color: var(--vu-accent-on); padding: calc(var(--step) * 5) var(--gutter); display: flex; align-items: center; justify-content: center; text-align: center; }
.cta-ribbon h2 { font-size: clamp(28px, 4vw, 56px); font-weight: var(--vu-weight-medium); line-height: 1.02; margin: 0; }
.cta-ribbon h2 a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.cta-ribbon h2 a:hover, .cta-ribbon h2 a:focus-visible { color: #BFE6EF; }
@media (max-width: 760px) { .cta-ribbon { margin-top: calc(var(--step) * 14 * 0.7); padding-top: calc(var(--step) * 5 * 0.7); padding-bottom: calc(var(--step) * 5 * 0.7); } }
.cta-ribbon { margin-top: 0; }
@media (max-width: 760px) { .cta-ribbon { margin-top: 0; } }
/* Places: Andrea's photograph beside the frame made from it, at one height (Andrea, 2026-10-18). */
.blk-band.place-pair { display: flex; height: clamp(240px, 30vw, 460px); gap: calc(var(--step) * 1.5); }
.blk-band.place-pair img { height: 100%; width: auto; flex: 0 1 auto; min-width: 0; object-fit: cover; }
@media (max-width: 760px) { .blk-band.place-pair { flex-direction: column; height: auto; } .blk-band.place-pair img { width: 100%; height: auto; } }
/* Fix 2026-10-19: on a phone the three Lifetime source photos kept their natural width and pushed the
   page sideways. Each now shrinks into its third of the row. */
@media (max-width: 760px) { .blk-band.band-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .blk-band.band-3 img { width: 100%; height: auto; min-width: 0; } }
.cta-ribbon h2 { text-wrap: balance; }

/* Process questions: three equal columns, so the bullets sit equally apart on desktop (Jeanée, 2026-10-19). */
.blue-list.qs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .blue-list.qs { grid-template-columns: 1fr; } }