/* Version A: what you see, what makes it possible. Night green, forest green, brass.
   Type is DZYN's own: General Sans throughout, Gambetta only for the clients' words. */
:root {
  --sc-canvas: #141813;
  --sc-surface: #283225;
  --sc-ink: #f4f1e9;
  --sc-ink-soft: #b9beb2;
  --sc-accent: #c9a36a;
  --sc-accent-ink: #141813;
  --sc-font-display: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --sc-font-text: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Gambetta", Georgia, serif;
  --green: #283225;
  --line: rgba(244, 241, 233, 0.16);
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --inner: clamp(2.5rem, 5vw, 5.5rem);
  --k: 0;
}

html { background: var(--sc-canvas); }
body { background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); font-size: 1.0625rem; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { font-family: var(--sc-font-display); font-weight: 500; letter-spacing: -0.025em; }
p { margin: 0 0 1rem; }
a[href^="tel:"] { white-space: nowrap; }

/* The call to action is Carson's own number, set large. The consultation is a
   plain link whose rule grows on hover. No button pairs. */
.reach { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-top: 2.2rem; }
.reach--center { align-items: center; }
.reach__call { color: var(--sc-accent); text-decoration: none; font-size: clamp(2rem, 2.9vw, 2.8rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1; padding: 0.2rem 0; }
.reach__call span { display: block; margin-bottom: 0.5rem; font-size: 0.95rem; font-weight: 400; letter-spacing: 0; color: var(--sc-ink-soft); }
.reach__call:hover { color: #dcbb85; }
.reach__more { position: relative; display: inline-block; padding: 0.75rem 0; text-decoration: none; color: var(--sc-ink); font-weight: 500; }
.reach__more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.5rem; height: 1px; background: var(--sc-accent); transform-origin: left; transform: scaleX(0.3); transition: transform 320ms cubic-bezier(.2,.7,.2,1); }
.reach--center .reach__more::after { transform-origin: center; }
.reach__more:hover::after, .reach__more:focus-visible::after { transform: scaleX(1); }

/* The divider: fixed at the centre line while the split holds, travels during the collapse. */
.divider { position: fixed; inset: 0 auto 0 50%; width: 0; z-index: 40; pointer-events: none;
  transform: translateX(calc(var(--k) * -50vw)); opacity: calc(1 - var(--k) * var(--k)); }
.divider > * { pointer-events: auto; }
.divider__line { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--line); }
.divider__fill { position: absolute; inset: 0; background: var(--sc-accent); transform-origin: top; transform: scaleY(0); opacity: 0.8; will-change: transform; }
.divider__mark { position: absolute; top: 1.1rem; left: 0; display: block; width: 38px; height: 38px; transform: translateX(-50%); }
.divider__mark img { display: block; width: 38px; height: 38px; border-radius: 8px; box-shadow: 0 0 0 4px var(--sc-canvas); }
.divider__ticks { position: absolute; top: 36vh; left: 0; margin: 0; padding: 0; list-style: none; display: grid; gap: 2vh; transform: translateX(-50%); opacity: calc(1 - var(--k)); }
.divider__ticks li { position: relative; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--sc-accent); background: var(--sc-canvas); }
.divider__ticks li::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sc-accent); transform: scale(0); transition: transform 200ms ease; }
.divider__ticks li.is-on::after { transform: scale(1); }
.divider__call { position: absolute; bottom: 1.2rem; left: 0; transform: translateX(-50%); white-space: nowrap; text-align: center;
  background: var(--sc-canvas); color: var(--sc-accent); text-decoration: none; font-weight: 500; padding: 0.6rem 0.9rem; font-size: 1rem; line-height: 1.2; }
.divider__call span { display: block; font-size: 0.78rem; font-weight: 400; color: var(--sc-ink-soft); }
.strip { display: none; }

/* 1 The film and the ledger. */
.film__stage { display: grid; grid-template-columns: 1fr 1fr; }
.film__media { position: relative; overflow: hidden; }
.film__text { position: relative; background: var(--green); }
.hero, .ledger { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 6rem var(--gut) 5rem var(--inner); }
.hero { justify-content: flex-start; }
/* The ledger has no controls; it must never catch a click meant for the hero under it. */
.ledger { pointer-events: none; }
.hero__lockup { margin-bottom: auto; font-size: 1.2rem; }
.hero h1 { font-size: clamp(3rem, 5.4vw, 5.6rem); line-height: 0.96; margin: auto 0 1.4rem; max-width: 9ch; font-weight: 500; }
.where { font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.45; color: var(--sc-ink); max-width: 26ch; margin: 0 0 0.5rem; }
.lede { line-height: 1.55; color: var(--sc-ink-soft); margin: 0 0 0.5rem; max-width: 36ch; }
.lede--more { margin-top: 0.4rem; }
.hero .reach { margin-bottom: auto; }
.ledger__title { font-size: clamp(2.2rem, 3.4vw, 3.2rem); line-height: 1; margin: 0 0 0.8rem; }
.ledger__facts { color: var(--sc-ink-soft); max-width: 40ch; line-height: 1.5; margin-bottom: 2.4rem; }
.ledger__bars { display: none; }
.ledger__list { list-style: none; margin: 0; padding: 0; }
.ledger__item { position: relative; padding: 1.05rem 0 1.15rem; border-top: 1px solid var(--line); }
/* Lines not yet reached stay readable (4.9:1 on the green), they are just quieter. */
.ledger__item h3, .ledger__item p { color: #9aa090; transition: color 260ms ease; }
.ledger__item:last-child { border-bottom: 1px solid var(--line); }
.ledger__item::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--sc-accent); transform: scaleX(0); transform-origin: left; transition: transform 420ms cubic-bezier(.2,.7,.2,1); }
.ledger__item.is-done h3 { color: #d6d3ca; }
.ledger__item.is-done p { color: #aeb3a6; }
.ledger__item.is-on h3 { color: var(--sc-ink); }
.ledger__item.is-on p { color: var(--sc-ink-soft); }
.ledger__item.is-on::before { transform: scaleX(1); }
.ledger__item h3 { font-size: 1.35rem; margin: 0 0 0.25rem; }
.ledger__item p { margin: 0; line-height: 1.5; max-width: 44ch; }
.ledger__credits { margin: 1.6rem 0 0; color: var(--sc-ink-soft); font-size: 0.88rem; line-height: 1.5; max-width: 46ch; }

/* 2 to 4 The pairs: the photograph takes its whole half; the text sits tight against the divider. */
.pair { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
.pair__l { position: relative; overflow: hidden; }
.pair__l img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pair__l figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 4rem var(--gut) 1.4rem; font-size: 0.88rem; color: var(--sc-ink);
  background: linear-gradient(0deg, rgba(20, 24, 19, 0.85), rgba(20, 24, 19, 0)); }
.pair__r { display: flex; flex-direction: column; justify-content: center; background: var(--green); padding: 6rem var(--gut) 6rem var(--inner); }
.pair h2 { font-size: clamp(2.2rem, 3.6vw, 3.6rem); line-height: 1; margin: 0 0 1.4rem; max-width: 12ch; }
.pair p { line-height: 1.6; max-width: 44ch; color: var(--sc-ink-soft); }
.pair p.lead { color: var(--sc-ink); font-size: 1.15rem; }
.roles, .parts { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; max-width: 46ch; }
.roles li, .parts li { line-height: 1.55; color: var(--sc-ink-soft); padding-top: 0.9rem; border-top: 1px solid var(--line); }
.roles b, .parts b { color: var(--sc-ink); font-weight: 500; }
.people { display: flex; gap: 1.6rem; margin-top: 2.4rem; }
.people figure { display: flex; align-items: center; gap: 0.75rem; }
.people img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.people figcaption { margin: 0; font-size: 0.88rem; color: var(--sc-ink-soft); line-height: 1.35; max-width: 20ch; }
.people b { display: block; color: var(--sc-ink); font-weight: 500; }
.price { color: var(--sc-ink); font-weight: 500; white-space: nowrap; }
.pair p.fine { margin-top: 1.4rem; font-size: 0.88rem; }
.pair--reviews .pair__l { display: flex; flex-direction: column; justify-content: center; padding: 6rem var(--inner) 6rem var(--gut); overflow: visible; }
.pair p.rating { color: var(--sc-accent); margin-bottom: 1.6rem; }
.quote { margin: 0 0 2.2rem; }
.pair .quote p { margin: 0 0 0.7rem; font-family: var(--serif); font-weight: 300; font-size: 1.3rem; line-height: 1.45; color: var(--sc-ink); max-width: 40ch; }
.pair .quote--big p { font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.3; font-weight: 300; }
.quote cite { font-style: normal; font-size: 0.9rem; color: var(--sc-ink-soft); }

/* 5 The collapse. */
.collapse__stage { background: var(--green); }
.collapse__l { position: absolute; inset: 0 50% 0 0; overflow: hidden; transform: translateX(calc(var(--k) * -100%)); }
.collapse__l img { width: 100%; height: 100%; object-fit: cover; }
.collapse__intro { position: absolute; inset: 0 0 0 50%; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gut) 0 var(--inner); }
.collapse__intro h2 { font-size: clamp(2.2rem, 3.6vw, 3.6rem); line-height: 1; max-width: 13ch; margin: 0; }
.collapse__full { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--gut); }
.collapse__full h2 { font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: 0.96; margin: 0 0 1.4rem; max-width: 14ch; }
.collapse__full p { max-width: 50ch; line-height: 1.6; color: var(--sc-ink-soft); margin: 0; }

/* 6 The request. */
.request { background: var(--green); padding: clamp(5rem, 9vw, 8rem) var(--gut) 0; min-height: 100svh; }
.request__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); max-width: 1180px; margin: 0 auto; align-items: start; }
.request h2 { font-size: clamp(2.2rem, 3.6vw, 3.6rem); line-height: 1; margin: 0 0 1.4rem; max-width: 14ch; }
.request p { line-height: 1.6; color: var(--sc-ink-soft); max-width: 46ch; }
.people--row { margin: 2rem 0; flex-wrap: wrap; }
.people--row a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sc-ink-soft); font-size: 0.88rem; }
.big-call { display: inline-block; font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 500; letter-spacing: -0.03em; text-decoration: none; color: var(--sc-accent); margin: 0.4rem 0 1rem; }
.area { font-size: 0.95rem; }
.form { display: grid; gap: 0.9rem; background: var(--sc-canvas); padding: clamp(1.4rem, 3vw, 2.4rem); }
.form label { display: grid; gap: 0.3rem; font-size: 0.9rem; color: var(--sc-ink-soft); }
.form input, .form textarea { font: inherit; color: var(--sc-ink); background: transparent; border: 0; border-bottom: 1px solid rgba(244, 241, 233, 0.55); padding: 0.75rem 0.2rem; border-radius: 0; }
.form input { min-height: 46px; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-bottom-color: var(--sc-accent); }
.send { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 3.6rem; margin-top: 0.8rem; padding: 0 1.2rem;
  border: 0; background: var(--sc-accent); color: var(--sc-accent-ink); font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.send::after { content: ""; width: 1.4rem; height: 1px; background: currentColor; transition: width 260ms ease; }
.send:hover::after, .send:focus-visible::after { width: 2.6rem; }
.send:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 2px; }
.form__note { margin: 0; font-size: 0.88rem; color: var(--sc-ink-soft); }
.foot { max-width: 1180px; margin: clamp(4rem, 7vw, 6rem) auto 0; padding: 2.2rem 0 2.6rem; border-top: 1px solid var(--line); display: grid; gap: 0.6rem; font-size: 0.92rem; color: var(--sc-ink-soft); }
.foot .lockup { font-size: 1.1rem; color: var(--sc-ink); margin-bottom: 0.4rem; }
.foot p { margin: 0; max-width: 60ch; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 1.6rem; list-style: none; margin: 0; padding: 0; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__small { font-size: 0.82rem; }

/* Shorter laptop windows (1366x768, 1440x900 with browser bars): the pinned
   hero and ledger must fit, because a pinned stage never scrolls its own overflow. */
@media (min-width: 861px) and (max-height: 880px) {
  .hero, .ledger { padding-top: 3.6rem; padding-bottom: 2.4rem; }
  .hero h1 { font-size: clamp(2.6rem, 6.6vh, 4.6rem); margin-bottom: 1rem; }
  .lede--more { display: none; }
  .reach { margin-top: 1.4rem; }
  .reach__call { font-size: clamp(1.8rem, 4.2vh, 2.6rem); }
  .ledger__title { font-size: clamp(2rem, 4.4vh, 3rem); }
  .ledger__facts { margin-bottom: 1.1rem; }
  .ledger__item { padding: 0.55rem 0 0.65rem; }
  .ledger__item h3 { font-size: 1.15rem; }
  .ledger__item p { font-size: 0.95rem; line-height: 1.42; }
  .ledger__credits { margin-top: 0.9rem; }
}
@media (min-width: 861px) and (max-height: 760px) {
  .hero, .ledger { padding-top: 3rem; padding-bottom: 1.8rem; }
  .where { font-size: 1.05rem; }
  .ledger__item { padding: 0.4rem 0 0.5rem; }
  .ledger__item h3 { font-size: 1.05rem; }
  .ledger__item p { font-size: 0.88rem; line-height: 1.38; }
  .ledger__credits { font-size: 0.82rem; }
}

/* Phone-only pieces. */
.pair__bg, .talk { display: none; }

/* Phone: its own layout, taken from residences.loamhouse.com.au at 390 px, not
   the split stacked. The name and two actions on top, the film filling the
   screen with the headline on it and the ledger at its foot, each photograph
   full-bleed with its heading set on the lower part and the text running on
   below, the request as underlined fields with "prefer to talk" under it. */
@media (max-width: 860px) {
  :root { --pad: 1.25rem; --head: 6.6rem; }
  html { scroll-padding-top: var(--head); }
  body { font-size: 1rem; }
  .divider { display: none; }

  /* The header: clear over the film, solid paper once you scroll. */
  .strip { display: grid; gap: 0.15rem; position: fixed; inset: 0 0 auto 0; z-index: 40; padding: 0.3rem var(--pad) 0.55rem; color: #fff; transition: background-color 240ms ease, color 240ms ease; }
  .strip .lockup { justify-self: start; min-height: 2.75rem; font-size: 0.95rem; }
  .strip__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .strip__act { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 0.5rem; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 3px; background: rgba(255, 255, 255, 0.12); color: inherit; text-decoration: none; font-size: 0.86rem; font-weight: 500; white-space: nowrap; transition: background-color 240ms ease, border-color 240ms ease; }
  .strip.is-solid { background: rgba(244, 241, 233, 0.9); color: var(--sc-accent-ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .strip.is-solid .strip__act { border-color: rgba(20, 24, 19, 0.28); background: rgba(255, 255, 255, 0.5); }
  .strip__act:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

  /* 1 The film fills the screen; the headline sits high, the ledger at the foot. */
  .film__stage { display: block; }
  .film__media { position: absolute; inset: 0; }
  .film__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 24, 19, 0.72) 0%, rgba(20, 24, 19, 0.15) 34%, rgba(20, 24, 19, 0.1) 46%, rgba(20, 24, 19, 0.88) 100%); pointer-events: none; }
  .film__text { position: absolute; inset: 0; background: none; }
  .hero, .ledger { padding: calc(var(--head) + 2.2rem) var(--pad) 1.6rem; }
  .hero { justify-content: space-between; }
  .hero__lockup, .lede, .hero .reach { display: none; }
  .hero h1 { max-width: none; margin: 0; font-size: 2.85rem; line-height: 0.98; }
  .hero h1 span { display: block; color: var(--sc-accent); }
  .where { margin: 0; max-width: 30ch; font-size: 1rem; line-height: 1.45; text-wrap: balance; }
  .ledger { justify-content: flex-end; }
  .ledger__title { order: 0; margin: 0 0 0.3rem; font-size: 1rem; letter-spacing: 0; color: var(--sc-accent); }
  .ledger__facts { margin: 0 0 1rem; font-size: 0.88rem; line-height: 1.45; color: var(--sc-ink-soft); }
  .ledger__bars { display: flex; gap: 0.35rem; margin: 0 0 0.9rem; }
  .ledger__bars span { width: 1.6rem; height: 2px; background: rgba(244, 241, 233, 0.3); }
  .ledger__bars span.is-on { background: var(--sc-accent); }
  .ledger__list { position: relative; height: 10.2rem; }
  .ledger__item { position: absolute; inset: 0; padding: 0; border: 0; opacity: 0; transition: opacity 260ms ease; }
  .ledger__item:last-child { border-bottom: 0; }
  .ledger__item.is-done { opacity: 0; }
  .ledger__item.is-on { opacity: 1; }
  .ledger__item::before { display: none; }
  .ledger__item.is-on h3, .ledger__item h3 { margin: 0 0 0.55rem; font-size: 2.05rem; line-height: 1.02; color: var(--sc-ink); }
  .ledger__item.is-on p, .ledger__item p { font-size: 0.98rem; color: var(--sc-ink-soft); }
  .ledger__credits { margin-top: 0.4rem; font-size: 0.76rem; }

  /* 2 to 3 The photograph full-bleed, the heading set on its lower part, the text running on below. */
  .pair { display: block; min-height: 0; background: var(--sc-canvas); }
  .pair__l { height: 82svh; min-height: 30rem; }
  .pair__l figcaption { top: calc(var(--head) + 0.7rem); bottom: auto; left: auto; right: 0; max-width: 62%; padding: 0 var(--pad); background: none; text-align: right; font-size: 0.76rem; line-height: 1.4; color: rgba(244, 241, 233, 0.82); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
  .pair__r { position: relative; margin-top: -11rem; padding: 0 var(--pad) 4.2rem; background: linear-gradient(180deg, rgba(20, 24, 19, 0) 0, rgba(20, 24, 19, 0.75) 5rem, var(--sc-canvas) 11rem); }
  .pair h2 { max-width: 11ch; margin-bottom: 1.6rem; font-size: 2.6rem; line-height: 0.98; }
  .pair p.lead { font-size: 1.08rem; }
  .pair .people { display: none; }

  /* 4 What clients say: the first words centred on a darkened photograph, the others below. */
  .pair--reviews .pair__l { position: relative; isolation: isolate; display: flex; height: auto; min-height: 100svh; justify-content: center; align-items: center; padding: calc(var(--head) + 2rem) var(--pad) 3rem; text-align: center; overflow: hidden; }
  .pair__bg { display: block; position: absolute; inset: 0; z-index: -2; }
  .pair__bg img { width: 100%; height: 100%; object-fit: cover; }
  .pair--reviews .pair__l::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(20, 24, 19, 0.66); }
  .pair p.rating { margin: 0 auto 1.4rem; }
  .pair .quote--big p { margin-inline: auto; font-size: 1.75rem; line-height: 1.3; }
  .pair--reviews .pair__r { margin: 0; padding: 3.4rem var(--pad) 2rem; background: var(--sc-canvas); text-align: center; }
  .pair .quote p { margin-inline: auto; font-size: 1.15rem; }

  /* 5 The collapse: one darkened photograph, the two lines change over it. */
  .collapse__stage { background: var(--sc-canvas); }
  .collapse__l { inset: 0; transform: none; }
  .collapse__l::after { content: ""; position: absolute; inset: 0; background: rgba(20, 24, 19, 0.62); }
  .collapse__intro { inset: 0; justify-content: center; padding: var(--head) var(--pad) 0; }
  .collapse__intro h2 { max-width: 12ch; font-size: 2.6rem; line-height: 0.98; }
  .collapse__full { align-items: stretch; text-align: left; padding: var(--head) var(--pad) 0; }
  .collapse__full h2 { max-width: 11ch; font-size: 2.6rem; }
  .collapse__full p { margin-bottom: 1.8rem; }
  .collapse .reach { margin-top: 0; gap: 0.7rem; align-items: stretch; }
  .collapse .reach__call, .collapse .reach__more { display: flex; justify-content: center; align-items: center; min-height: 3.2rem; padding: 0 1rem; border-radius: 3px; font-size: 1rem; font-weight: 500; letter-spacing: 0; line-height: 1.2; }
  .collapse .reach__call { background: var(--sc-ink); color: var(--sc-accent-ink); }
  .collapse .reach__call span { display: inline; margin: 0 0.4em 0 0; font-size: inherit; font-weight: inherit; color: inherit; }
  .collapse .reach__more { border: 1px solid rgba(244, 241, 233, 0.55); }
  .collapse .reach__more::after { display: none; }

  /* 6 The request: underlined fields, a full-width button, "prefer to talk" under it. */
  .request { min-height: 0; padding: 4.4rem var(--pad) 0; background: var(--sc-canvas); }
  .request__grid { grid-template-columns: 1fr; gap: 0; }
  .request h2 { max-width: 12ch; font-size: 2.6rem; line-height: 0.98; }
  .request .people--row, .big-call { display: none; }
  .area { font-size: 0.9rem; }
  .form { gap: 0.6rem; margin-top: 1.6rem; padding: 0; background: none; }
  .send { justify-content: center; text-align: center; border-radius: 3px; margin-top: 1.4rem; }
  .send::after { display: none; }
  .form__note { text-align: center; }
  .talk { display: grid; justify-items: center; margin-top: 2.2rem; text-align: center; font-size: 0.95rem; }
  .talk p { margin: 0 0 0.3rem; font-size: 0.88rem; color: var(--sc-ink-soft); }
  .talk a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
  .foot { justify-items: center; margin-top: 3rem; padding: 2.2rem 0 1.6rem; text-align: center; }
  .foot__links { justify-content: center; }
}

/* Narrow phones (360): the two actions in a slightly smaller size. */
@media (max-width: 374px) {
  .strip__act { font-size: 0.78rem; }
  .hero h1 { font-size: 2.55rem; }
}
/* Short phones (375x667): the ledger text a little smaller so it stays clear of the headline. */
@media (max-width: 860px) and (max-height: 720px) {
  .hero h1 { font-size: 2.4rem; }
  .ledger__facts { display: none; }
  .ledger__item h3 { font-size: 1.7rem; }
  .ledger__list { height: 8.6rem; }
}
/* Tablets: the phone layout, at a size that fills the screen. */
@media (min-width: 600px) and (max-width: 860px) {
  :root { --pad: 2rem; }
  .strip__acts { max-width: 28rem; }
  .hero h1 { font-size: 4rem; }
  .pair h2, .request h2, .collapse__intro h2, .collapse__full h2 { font-size: 3.4rem; }
  .collapse__full { max-width: 34rem; }
}

/* Reduced motion: no film, so the split is a plain section with the hero above
   the finished ledger, and the collapse is a cut instead of a slide. */
@media (prefers-reduced-motion: reduce) {
  .divider { transform: none; }
  .collapse__l { transform: none; opacity: calc(1 - var(--k)); }
  .film { height: auto !important; }
  .film .film__stage { position: relative; height: auto; min-height: 100svh; }
  .film .hero, .film .ledger { position: relative; inset: auto; opacity: 1 !important; }
  .film .ledger { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .film__media { position: relative; aspect-ratio: 4 / 5; }
  .film__text { position: relative; inset: auto; background: var(--sc-canvas); }
  .film .hero, .film .ledger { padding: 2rem var(--pad) 0; }
  .ledger__list { height: auto; }
  .ledger__item { position: relative; margin-bottom: 1.4rem; }
  .ledger__item.is-on { opacity: 1; }
}