/* Home: the hero, the three bands the phone travels through, the work, the close. The phone is one canvas fixed over
   the bands' backgrounds and their giant words, and under everything else that has words in it. */
.stage { position: fixed; inset: 0; z-index: 1; width: 100vw; height: 100vh; pointer-events: none; display: none; }
.gl .stage { display: block; }
.stage[data-gone="true"] { visibility: hidden; }
@media (min-width: 900px) { .gl .still { display: none; } }
.gl .still { visibility: hidden; }   /* on a narrow window the still's box stays: it is the slot the live phone docks in */
.hero__copy, .hero__follow, .step__text, .work, .close { position: relative; z-index: 2; }

/* Hero: the three words as big as the screen allows, the phone lying across them, the offer under them. */
.hero { position: relative; overflow: clip; }
.hero__in { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4); min-height: calc(100svh - var(--head) - 72px); padding: clamp(12px, 2.4vh, 36px) 0 clamp(28px, 4.5vh, 56px); }
.hero__words { font-size: min(17.2vw, 30vh); font-weight: 900; line-height: .82; letter-spacing: -0.012em; color: var(--signal); }
.hero__last { display: block; }
.hero__copy { display: grid; gap: 18px; max-width: 520px; }
.hero__lede { font: 500 clamp(19px, 1.45vw, 22px)/1.4 var(--text); }
.hero__price { color: var(--slate); font-size: 17px; }
.hero__price b { color: var(--ink); font-weight: 700; }
.hero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero__follow { display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-height: 44px; color: var(--slate); font: 700 15px/1 var(--text); text-decoration: none; }
.hero__follow::after { content: ''; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -3px; }
.hero__follow:hover { color: var(--signal-ink); }

/* The three bands. Each its own colour; its giant word low in the band, behind the phone and clear of the words. */
.step { position: relative; display: grid; align-content: start; min-height: 78vh; padding: clamp(56px, 9vh, 104px) var(--gutter) 0; overflow: clip; }
.step--found { background: var(--signal); }
.step--seen { background: var(--bone); }
.step--answered { background: var(--night); color: var(--on-dark); }
.step__word { position: absolute; left: 0; right: 0; bottom: -0.11em; font: 900 var(--word-size, 34vw)/.8 var(--display); text-transform: uppercase; letter-spacing: -0.015em; text-align: center; white-space: nowrap; pointer-events: none; user-select: none; }
.step--found .step__word { --word-size: min(29vw, 46vh); color: var(--bone); }
.step--seen .step__word { --word-size: min(33vw, 52vh); color: var(--signal); }
.step--answered .step__word { --word-size: min(20.5vw, 33vh); color: var(--signal); }
.step__text { display: grid; gap: 18px; width: min(500px, 38vw); }
.step--found .step__text, .step--answered .step__text { justify-self: end; margin-right: max(0px, (100vw - var(--wrap)) / 2 - var(--gutter)); }
.step--seen .step__text { justify-self: start; margin-left: max(0px, (100vw - var(--wrap)) / 2 - var(--gutter)); }
.step h2 { font-size: clamp(46px, 4.6vw, 76px); }
.step__price { font: 700 19px/1.35 var(--text); }
.step--found .step__price { color: var(--ink); }
.step--seen .step__price { color: var(--signal-ink); }
.step--answered .step__price { color: var(--signal); }
.step--answered .step__text p:not(.step__price) { color: var(--on-dark-soft); }
.step--answered h2 { color: var(--on-dark); }
.step__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.step__note { font-size: 15px; }
.play::before { content: ''; width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.play[aria-pressed="true"]::before { width: 10px; height: 12px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.said summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--on-dark); list-style: none; }
.said summary::-webkit-details-marker { display: none; }
.said summary::after { content: '+'; font: 500 22px/1 var(--text); }
.said[open] summary::after { content: '–'; }
.said__lines { display: grid; gap: 12px; margin-top: 8px; padding: 20px 22px; border-radius: var(--r); background: var(--night-2); box-shadow: 0 0 0 1px var(--hair-dark); }
.step--answered:has(.said[open]) { padding-bottom: calc(var(--word-size) * 0.55); }
.line { display: grid; gap: 2px; }
.line__who { font: 700 13px/1.2 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-soft); }
.line__said { color: var(--on-dark); font-size: 17px; }
.line.is-now .line__said { color: var(--signal-lit); }

/* The still phones: shown on a phone, with reduced motion, and wherever WebGL is not there. */
.still { position: relative; z-index: 1; height: auto; pointer-events: none; }
.still--hero { position: absolute; right: max(-4vw, (100vw - 1500px) / 2); top: 50%; width: min(56vw, 104vh); translate: 0 -50%; }
.still--step { position: absolute; top: 50%; width: min(36vw, 70vh); translate: 0 -46%; }
.step--found .still--step, .step--answered .still--step { left: max(2vw, (100vw - var(--wrap)) / 2 + 2vw); }
.step--seen .still--step { right: max(2vw, (100vw - var(--wrap)) / 2 + 2vw); }

/* Work: three made-up businesses at three prices; the middle one, the level we recommend, widest. */
.work { background: var(--bone); padding: var(--s5) 0 var(--s5); }
.work__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s3) var(--s5); align-items: end; margin-bottom: var(--s4); }
.work__head p { max-width: 44ch; color: var(--slate); }
.work__row { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: var(--s4); align-items: end; margin-bottom: var(--s4); }
.job { display: grid; gap: var(--s3); }
.job__shot { display: block; border-radius: 28px; background: var(--paper); overflow: hidden; transition: translate .35s var(--ease); }
.job__shot:hover { translate: 0 -6px; }
.job__shot img { width: 100%; height: min(40vh, 390px); object-fit: contain; }
.job--signature .job__shot img { height: min(47vh, 460px); }
.job__text { display: grid; gap: 6px; justify-items: start; }
.job__level { color: var(--signal-ink); font-weight: 800; }
.job__kind { color: var(--slate); font-size: 16px; margin-bottom: 6px; }

/* Close: vermilion, Growth in two numbers, the one ask. */
.close { background: var(--signal); color: var(--ink); padding: var(--s5) 0; }
.close__in { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s4) var(--s6); align-items: end; }
.close h2 { font-size: clamp(60px, 7.6vw, 128px); }
.close__ask > p { max-width: 40ch; margin-top: var(--s3); font-size: 20px; }
.close__money { display: flex; gap: var(--s5); margin-top: var(--s4); }
.close__money dt { font: 700 15px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; }
.close__money dd { margin-top: 6px; font: 900 clamp(64px, 6.4vw, 104px)/.85 var(--display); }
.close__what { max-width: 46ch; }
.close__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s3); }
.close__call { margin-top: var(--s2); font-weight: 700; }
.close__call a { display: inline-flex; align-items: center; min-height: 44px; }

/* A phone or a small tablet: no live phone; the words stack, the stills sit in the flow. */
@media (max-width: 899.98px) {
  .hero__in { min-height: 0; padding-top: 18px; }
  .hero__words { font-size: 25vw; }
  .hero__words span { display: block; }
  .still--hero { position: relative; right: auto; top: auto; translate: 0 0; width: min(92vw, 520px); margin: -26vw auto -10vw; }
  .hero { display: flex; flex-direction: column; }
  .hero__in { display: contents; }
  .hero__words { order: 1; width: calc(100% - 2 * var(--gutter)); margin: 12px auto 0; }
  .still--hero { order: 2; }
  .hero__copy { order: 3; width: calc(100% - 2 * var(--gutter)); margin: 0 auto 48px; }
  .step { min-height: 0; padding: 56px var(--gutter) 0; }
  .step__word { position: relative; bottom: auto; order: 1; margin: 0 calc(-1 * var(--gutter)) -0.08em; }
  .step--found .step__word, .step--seen .step__word, .step--answered .step__word { --word-size: 25vw; }
  .step--seen .step__word { --word-size: 40vw; }
  .step--found .step__word { --word-size: 34vw; }
  .still--step, .step--found .still--step, .step--seen .still--step, .step--answered .still--step { position: relative; order: 2; left: auto; right: auto; top: auto; translate: 0 0; width: min(86vw, 460px); margin: -18vw auto 0; }
  .step__text, .step--found .step__text, .step--seen .step__text, .step--answered .step__text { order: 3; width: 100%; margin: 8px 0 64px; justify-self: stretch; }
  .work__head, .work__row, .close__in { grid-template-columns: 1fr; }
  .work__row { gap: var(--s3); }
  .job { grid-template-columns: 128px 1fr; align-items: center; gap: var(--s3); }
  .job__shot { border-radius: 20px; }
  .job__shot img, .job--signature .job__shot img { height: 196px; }
  .close__money { gap: var(--s4); }
}