/* ============================================================
   Sections — the page's components, in page order.

   Imagery is monumental, type is quiet: hierarchy comes from the
   image-to-type ratio, not from display sizes.
   ============================================================ */

/* ---- intro: the wordmark holds, then fades to reveal the film ---- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--ground);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.7s var(--ease);
}

.intro.gone {
  opacity: 0;
  pointer-events: none;
}

.intro .mark svg {
  display: block;
  height: 26px;
  width: auto;
  color: var(--ink);
  opacity: 0;
  transform: translateY(6px);
  animation: introMark 0.7s var(--ease) 0.12s forwards;
}

@keyframes introMark {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- hero: the film is the hero; type is a caption layer ---- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  background: #000;
  overflow: hidden;
}

.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero .overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 var(--margin) 28px;
  color: #fff;
}

.hero .body {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 16px;
}

.hero .lnk {
  color: #fff;
}

.hero .scroll-cue {
  display: inline-block;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--t-12);
  letter-spacing: 0.02em;
}

/* ---- quiet type screens ---- */
section.quiet {
  background: var(--ground);
}

/* ---- the spine thread: drawn across the base of a film ---- */
.spine-thread {
  display: flex;
  align-items: center;
  color: #fff;
}

.spine-thread .node {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font-size: var(--t-12);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.spine-thread .node:not(.rev) {
  flex: 1;
}

.spine-thread .dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
}

.spine-thread .line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.32);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease);
}

/* revenue: the one node that earns colour */
.spine-thread .rev .dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 47, 167, 0.28);
}

.reveal .spine-thread .node {
  opacity: 1;
  transform: none;
}

.reveal .spine-thread .line {
  transform: scaleX(1);
}

.reveal .spine-thread .node:nth-child(2) { transition-delay: 0.1s; }
.reveal .spine-thread .node:nth-child(3) { transition-delay: 0.2s; }
.reveal .spine-thread .node:nth-child(4) { transition-delay: 0.32s; }
.reveal .spine-thread .node:nth-child(1) .line { transition-delay: 0.05s; }
.reveal .spine-thread .node:nth-child(2) .line { transition-delay: 0.18s; }
.reveal .spine-thread .node:nth-child(3) .line { transition-delay: 0.28s; }

@media (max-width: 640px) {
  .spine-thread {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .spine-thread .node:not(.rev) { flex: none; }
  .spine-thread .line { display: none; }
}

/* ---- the measurement spine's contained film ---- */
.spine-film {
  position: relative;
  background: #000;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--hairline);
}

.spine-film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spine-film .spine-thread {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 26px 22px;
}

@media (max-width: 640px) {
  .spine-film {
    aspect-ratio: 4 / 3;
    margin-top: 44px;
  }
  .spine-film .spine-thread { padding: 0 16px 16px; }
}

/* ---- platform index rows ---- */
.idx {
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}

.idx:first-of-type {
  border-top: 1px solid var(--hairline);
}

.idx .names {
  font-weight: 500;
  color: var(--ink-strong);
  font-size: var(--t-14);
}

.idx .names span:not(:last-child)::after {
  content: " · ";
  color: var(--rule);
  font-weight: 400;
}

/* the attributed-revenue row: the payoff, so it earns the blue */
.idx.rev .names,
.idx.rev .cap {
  color: var(--accent);
}

/* ---- what it does: sticky phone at cols 4–6, modules at col 8 ---- */
.whatdoes {
  align-items: start;
  row-gap: 0;
}

/* The section label doubles as its heading, so it carries the section's
   opening space rather than an eyebrow's. */
.wd-label {
  margin: 0 0 40px;
}

.wd-mod .eyebrow {
  margin-bottom: 10px;
}

.wd-content .wd-mod {
  padding: 34px 0;
  border-bottom: 1px solid var(--hairline);
}

.wd-content .wd-mod:first-of-type {
  padding-top: 0;
}

.wd-content .wd-mod:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.wd-content .wd-mod .col {
  margin: 16px 0 0;
}

/* ---- OPEN QUESTION for Nick (see PR description) --------------------
   The prototype declared `.mod .pname { color: var(--accent) }`, but the
   markup class is `.wd-mod` — so the selector never matched and the module
   names (Measure / Predict / Insight) render in the muted eyebrow colour,
   not Klein blue.

   Two readings, and they disagree:
     · the approved artefact shows them muted, which is what Nick signed off
     · the design system says product names earn the accent, and the phone
       screen's own "ANAMA Insight" label is explicitly blue — so the page
       is currently inconsistent with itself

   This build reproduces what was approved, stated explicitly rather than
   left to a selector that silently misses. If the accent is wanted, the
   whole fix is changing `inherit` to `var(--accent)` on the next line. */
.wd-content .pname {
  color: inherit;
}

/* ---- the phone: a sticky product shot. Its UI keeps a fixed light
       palette in both themes, because it is a screenshot of a product,
       not a surface of this page. ---- */
.phone {
  position: sticky;
  top: 96px;
  align-self: start;
}

/* The device is a fixed-ratio box holding variable-height content, so the
   ratio must leave room for the longest conversation the screen shows. The
   current screen needs 628px of the 670px available — about 42px, or two
   lines of copy, in hand.

   300 x 690 (1:2.30) is also closer to a real phone than the prototype's
   300 x 588 (1:1.96) was.

   If you lengthen the copy or add a campaign row, run
   `tools/phone-fit.html` — it measures the screen against the frame at every
   breakpoint. The content clips silently otherwise, and `overflow: hidden`
   below means it clips without a scrollbar to warn you. */
.phone .device {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 300 / 690;
  background: #0e0f12;
  border-radius: 36px;
  padding: 10px;
}

.phone .screen {
  height: 100%;
  background: #fff;
  color: #15171b;
  border-radius: 27px;
  overflow: hidden;
  padding: 18px 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--t-12);
  letter-spacing: 0.005em;
}

.phone .lab {
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: #767b84;
}

.phone .s-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-10);
  color: #a2a6ad;
}

.phone .s-top b {
  color: #15171b;
  font-weight: 600;
}

.phone .s-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.phone .s-rows {
  display: flex;
  flex-direction: column;
}

.phone .s-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid #edeff2;
}

/* Each row is a campaign, with the channel it ran on beneath it. Two lines
   rather than one because "Winter set menu · meta" does not fit on a phone,
   and the campaign name is the thing being compared. */
.phone .s-row .ch {
  flex: 1;
  min-width: 0;
  color: #15171b;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.phone .s-row .camp {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone .s-row .chan {
  font-size: var(--t-10);
  letter-spacing: 0.02em;
  color: #9a9ea6;
}

.phone .s-row .val {
  font-variant-numeric: tabular-nums;
  color: #464b54;
}

.phone .chip {
  flex: none;
  width: 10px;
  height: 2px;
  border-radius: 1px;
}

/* Series colours are fixed, not themed — they must agree with the chart
   strokes in the SVG above them, which are literal values in the markup.
   Change one, change both.

   Colour encodes the campaign, not the channel: four campaigns across two
   channels would leave only two colours, and the chart needs four
   distinguishable lines. The channel is stated in text under each name
   instead. Klein blue goes to the top performer — money at work. */
.phone .chip-brand    { background: #002fa7; }
.phone .chip-menu     { background: #15171b; }
.phone .chip-pmax     { background: #767b84; }
.phone .chip-retarget { background: #b4b8bf; }

/* Klein blue inside the screenshot stays the product's blue in both
   themes, for the same reason the screen stays white. */
.phone .accent {
  color: #002fa7;
}

/* the guest's question */
.phone .u-msg {
  align-self: flex-end;
  max-width: 88%;
  background: #f2f3f5;
  border-radius: 16px 16px 4px 16px;
  padding: 9px 12px;
  font-size: var(--t-12);
  line-height: 1.4;
  color: #15171b;
}

/* the plain-language answer */
.phone .a-msg {
  font-size: var(--t-12);
  line-height: 1.5;
  color: #15171b;
  max-width: 95%;
}

.phone .a-msg b {
  font-weight: 600;
}

/* the charted proof */
.phone .card {
  border: 1px solid #edeff2;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phone .card svg {
  width: 100%;
  height: auto;
  display: block;
}

.phone .ask {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dfe1e6;
  border-radius: 999px;
  padding: 6px 6px 6px 14px;
  color: #9a9ea6;
  font-size: 11.5px;
}

.phone .ask .send {
  margin-left: auto;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #002fa7;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.phone figcaption {
  color: var(--muted);
  margin-top: 14px;
}

@media (max-width: 800px) {
  .phone {
    position: static;
    margin: 0 0 40px;
  }
  .phone .device { margin: 0 auto; }
}

/* Between the mobile stack and the width where the phone's four columns reach
   its 300px design width (~940px), the column is too narrow: a narrower device
   is a shorter device, and the conversation clips. Stack the phone above the
   modules through that band — still starting at column 4, so the grid law
   holds and columns 1–3 stay a margin. */
@media (min-width: 801px) and (max-width: 940px) {
  .whatdoes .phone,
  .whatdoes .wd-content {
    grid-column: 4 / -1;
  }

  .whatdoes .phone {
    position: static;
    margin-bottom: 48px;
  }
}

/* ---- case study ---- */
.case-col .eyebrow {
  margin-bottom: 8px;
}

/* The client's mark reads as a masthead against the case-study headline:
   right-aligned at columns 11–12, its base sitting on the headline's own
   base. `align-items: end` does that without a magic offset — the row's
   height is set by the heading block, and both items sit on its floor. */
.case-head {
  align-items: end;
}

.client-logo {
  height: 56px;
  width: auto;
  justify-self: end;
}

/* Stacked, the masthead pairing has nothing to align to, so the mark returns
   to the reading edge and takes its own space. */
@media (max-width: 800px) {
  .case-head {
    align-items: start;
  }

  .client-logo {
    justify-self: start;
    margin-top: 32px;
  }
}

/* ---- CTA ---- */
.cta-lede {
  margin: 24px 0 0;
  max-width: var(--measure-tight);
}

.cta-actions {
  margin: 32px 0 0;
}

.cta-actions .sep {
  margin: 0 12px;
}

/* ---- photo reel: full-bleed, images breathe ---- */
.reel {
  background: var(--ground);
}

.reel .caps {
  display: flex;
  justify-content: space-between;
  padding: 12px var(--margin);
}

.reel .strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  height: clamp(380px, 62vh, 680px);
}

.reel .strip figure {
  overflow: hidden;
}

.reel .strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 820px) {
  .reel .strip {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    height: clamp(320px, 52vh, 500px);
  }
  .reel .strip figure { scroll-snap-align: start; }
  .reel .strip::-webkit-scrollbar { display: none; }
}

/* ---- reduced motion: skip straight to the final state ---- */
@media (prefers-reduced-motion: reduce) {
  a { transition: none; }
  html { scroll-behavior: auto; }
  .intro .mark svg {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .spine-thread .node {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .spine-thread .line {
    transform: scaleX(1);
    transition: none;
  }
  .skip { transition: none; }
}