/* All Nations Mobile Barbers London: page styles.
   scrollcraft.css is the floor and the mechanism; nothing here restyles
   .sc-stage, .sc-copy or any [data-sc-*] selector. */

:root {
  /* The livery: near-black, cool white, chrome. One accent, and it is the chrome. */
  --sc-canvas:     #0b0c0e;
  --sc-surface:    #15171b;
  --sc-ink:        #eef0f3;
  --sc-ink-soft:   #a1a8b3;
  --sc-accent:     #cfd4db;
  --sc-accent-ink: #0b0c0e;
  --sc-font-display: "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist", system-ui, sans-serif;
  --sc-shadow-color: 220 14% 2%;

  --chrome: linear-gradient(105deg, #1a1b1e 0%, #7a7f87 14%, #f6f7f9 26%, #565a61 38%, #0e0f11 50%, #a8adb5 64%, #ffffff 75%, #43464c 87%, #1a1b1e 100%);
  --r-card: 14px;
  --bar-h: clamp(4.5rem, 4rem + 1.4vw, 5.75rem);
  --fab: 3.5rem;
}

body { font-weight: 380; }
.sc-display { font-weight: 720; font-stretch: 78%; }
.sc-label { font-family: var(--sc-font-text); font-weight: 520; letter-spacing: 0.12em; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--sc-ink); color: var(--sc-canvas); padding: .6rem 1rem; border-radius: 999px; }
.skip:focus { top: 1rem; }
.icon { width: 1.05em; height: 1.05em; flex: none; fill: currentColor; }

/* ------------------------------------------------------------ chrome button
   Ported from 21st.dev "Metallic Button" (starc007): a drifting chrome rim,
   a dark inner plate, and a light sweep on hover. Transform and opacity only. */
.chrome {
  --pad-y: .95rem; --pad-x: 1.6rem;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 999px; border: 0;
  color: var(--sc-ink); background: transparent; text-decoration: none; cursor: pointer;
  font: 600 var(--sc-t-sm)/1 var(--sc-font-text); letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 2px 4px hsl(var(--sc-shadow-color) / .35), 0 10px 26px -8px hsl(var(--sc-shadow-color) / .6);
  transition: transform 140ms var(--sc-ease-out);
}
.chrome::before {
  content: ""; position: absolute; inset: 0 auto 0 -18%; width: 136%; z-index: -3;
  background: var(--chrome); border-radius: inherit;
  animation: chrome-drift 8s var(--sc-ease-in-out) infinite;
}
.chrome::after {
  content: ""; position: absolute; inset: 1.5px; z-index: -2; border-radius: inherit;
  background: linear-gradient(180deg, #1b1d21, #0d0e10);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), inset 0 -1px 0 rgb(0 0 0 / .4);
  transition: opacity 160ms var(--sc-ease-out);
}
.chrome__shine {
  position: absolute; inset: 0 auto 0 -60%; width: 50%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .38) 48%, transparent);
  transform: translateX(0) skewX(-14deg); opacity: .7;
  transition: transform 900ms var(--sc-ease-out);
}
.chrome:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .chrome:hover .chrome__shine { transform: translateX(420%) skewX(-14deg); }
}
.chrome--sm { --pad-y: .7rem; --pad-x: 1.15rem; min-height: 2.75rem; }
.chrome--lg { --pad-y: 1.2rem; --pad-x: 2.2rem; font-size: var(--sc-t-base); }
@keyframes chrome-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(13%); } }

.textlink {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem;
  color: var(--sc-ink); text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
  text-underline-offset: .28em; font-weight: 500;
  transition: text-decoration-color 160ms var(--sc-ease-out);
}
.textlink:hover { text-decoration-color: currentColor; }

/* ------------------------------------------------------------------ top bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h); padding-inline: var(--sc-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transition: background-color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out);
}
.bar.is-solid { background: color-mix(in oklab, var(--sc-canvas) 90%, transparent); box-shadow: 0 1px 0 var(--sc-hairline); }
.bar__mark { display: flex; align-items: center; gap: .7rem; min-height: 2.75rem; text-decoration: none; }
.bar__mark img { height: clamp(2.6rem, 1.9rem + 1.9vw, 3.9rem); width: auto; }
.bar__sub { font: 520 var(--sc-t-xs)/1.15 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); border-left: 1px solid var(--sc-hairline-strong); padding-left: .7rem; }
.bar__right { display: flex; align-items: center; gap: 1.25rem; }
.bar__tel { font-size: var(--sc-t-sm); text-decoration: none; color: var(--sc-ink-soft); display: inline-flex; gap: .4rem; align-items: center; }
.bar__tel:hover { color: var(--sc-ink); }
@media (max-width: 860px) { .bar__sub, .bar__tel { display: none; } }

/* ==================================================================== ACT 1
   Arrive: an editorial cover. One black-and-white photograph in two layers,
   the street behind a solid MOBILE masthead and the van and Adrian in front
   of it, with BARBERS drawn in the logo's silver outline across the bottom.
   Page JS places the masthead against the van roof and writes scroll motion. */
.ed { background: var(--sc-canvas); }
.ed .sc-stage, .ed [data-sc-stage] { background: var(--sc-canvas); }
.ed__stage {
  --panel-l: 40vw;
  --mast-fs: min(19.5vw, 30vh);
  --mast-top: calc(var(--bar-h) + 1vh);
}
.ed__frame { position: absolute; top: 0; bottom: 0; left: var(--panel-l); right: 0; overflow: hidden; }
.ed__frame--photo { z-index: 1; }
.ed__frame--cut { z-index: 3; pointer-events: none; }
.ed__shift { position: absolute; inset: 0; transform-origin: 50% 72%; will-change: transform; }
.ed__shift img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% var(--py, 19%); }
.ed__shade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgb(11 12 14 / .92) 0%, rgb(11 12 14 / .5) 22%, transparent 44%),
    linear-gradient(180deg, rgb(11 12 14 / .6) 0%, transparent 16%); }
.ed__mast {
  position: absolute; z-index: 2; left: var(--sc-gutter); top: var(--mast-top); margin: 0;
  display: flex; font: 880 var(--mast-fs)/.8 var(--sc-font-display); font-stretch: 96%;
  letter-spacing: -.012em; text-transform: uppercase; white-space: nowrap; color: #f3f5f7;
  will-change: transform;
}
.ed__mast span { display: inline-block; }
.ed__outline { position: absolute; z-index: 4; left: var(--sc-gutter); bottom: clamp(1rem, 4vh, 2.8rem); width: min(calc(100vw - var(--sc-gutter) * 1.5), 128vh); height: auto; overflow: visible; will-change: transform; }
.ed__outline path { fill: transparent; stroke: url(#ed-silver); stroke-width: 2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ed__copy { position: absolute; z-index: 5; left: var(--sc-gutter); top: calc(var(--mast-top) + var(--mast-fs) * .8 + 4.5vh); width: calc(var(--panel-l) - var(--sc-gutter) - 3rem); }
.ed__copy h1 { font-size: clamp(2.1rem, .9rem + 2.5vw, 3.8rem); line-height: .96; max-width: 13ch; }
.ed__copy > p { margin-top: var(--sc-4); max-width: 34ch; color: color-mix(in oklab, var(--sc-ink) 78%, transparent); font-size: var(--sc-t-base); line-height: 1.5; }
.ed__actions { margin-top: var(--sc-5); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
.ed__proof { margin-top: var(--sc-4); display: flex; align-items: center; gap: .55rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.ed__proof strong { color: var(--sc-ink); font-weight: 600; }
.ed__stars { display: inline-flex; gap: .12rem; color: var(--sc-accent); }
.ed__stars .icon { width: .95rem; height: .95rem; }
.ed__caption { position: absolute; z-index: 4; right: calc(var(--sc-gutter) * .5 + .4rem); top: calc(var(--bar-h) + 1.2rem); writing-mode: vertical-rl; font: 560 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: .2em; text-transform: uppercase; color: rgb(255 255 255 / .72); }

/* arrival: the photograph wipes in, the masthead rises letter by letter, the outline draws itself */
@media (prefers-reduced-motion: no-preference) {
  .ed.is-intro .ed__frame { animation: ed-wipe 1150ms var(--sc-ease-in-out) both; }
  .ed.is-intro .ed__shift img { animation: ed-settle 1700ms var(--sc-ease-out) both; }
  .ed.is-intro .ed__mast span { animation: ed-rise 900ms var(--sc-ease-out) both; }
  .ed.is-intro .ed__mast span:nth-child(1) { animation-delay: 380ms; } .ed.is-intro .ed__mast span:nth-child(2) { animation-delay: 440ms; }
  .ed.is-intro .ed__mast span:nth-child(3) { animation-delay: 500ms; } .ed.is-intro .ed__mast span:nth-child(4) { animation-delay: 560ms; }
  .ed.is-intro .ed__mast span:nth-child(5) { animation-delay: 620ms; } .ed.is-intro .ed__mast span:nth-child(6) { animation-delay: 680ms; }
  .ed.is-intro .ed__outline path { stroke-dasharray: 1 1; animation: ed-draw 2000ms var(--sc-ease-in-out) 700ms both; }
  .ed.is-intro .ed__copy > * { animation: copy-in 800ms var(--sc-ease-out) both; }
  .ed.is-intro .ed__copy > :nth-child(1) { animation-delay: 620ms; } .ed.is-intro .ed__copy > :nth-child(2) { animation-delay: 740ms; }
  .ed.is-intro .ed__copy > :nth-child(3) { animation-delay: 860ms; } .ed.is-intro .ed__copy > :nth-child(4) { animation-delay: 960ms; }
  .ed.is-intro .ed__caption { animation: pool-in 900ms var(--sc-ease-out) 1200ms both; }
}
@keyframes ed-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes ed-settle { from { transform: scale(1.12); } to { transform: none; } }
@keyframes ed-rise { from { opacity: 0; transform: translateY(42%); } to { opacity: 1; transform: none; } }
@keyframes ed-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes copy-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pool-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 860px) and (min-height: 561px) {
  .ed__stage { --panel-l: 0px; --panel-top: calc(var(--bar-h) + 2svh); --panel-h: 41svh; --mast-fs: 31vw; }
  .ed__mast { font-stretch: 62%; letter-spacing: -.005em; }
  .ed__frame { top: var(--panel-top); bottom: auto; height: var(--panel-h); }
  .ed__shade { background:
    linear-gradient(0deg, rgb(11 12 14 / 1) 0%, rgb(11 12 14 / .5) 22%, transparent 44%),
    linear-gradient(180deg, rgb(11 12 14 / .35) 0%, transparent 18%); }
  /* explicit width, centred with auto margins: Safari sizes an SVG with width:auto from its
     own fallback rather than the left/right box, which pushed the S off the edge */
  .ed__outline { left: 0; right: 0; margin-inline: auto; width: 84vw; bottom: auto; top: calc(var(--panel-top) + var(--panel-h) - 10vw); }
  .ed__copy { width: auto; right: var(--sc-gutter); top: calc(var(--panel-top) + var(--panel-h) + 7vw); }
  .ed__copy h1 { font-size: clamp(1.9rem, 1.1rem + 3.6vw, 2.6rem); max-width: 14ch; }
  .ed__copy > p { font-size: var(--sc-t-sm); }
}

/* ============================================================ EVERY NATION
   Real clients in tilted columns that travel with the scroll, never on a
   timer, so nothing moves unless the reader does. */
.wall { position: relative; overflow: clip; min-height: 118svh; display: grid; place-items: center; padding-block: var(--sc-section); isolation: isolate; }
.wall__grid { position: absolute; inset: -18% -8%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.6rem, 1.2vw, 1.1rem); transform: rotate(-7deg); z-index: -2; }
.wall__col { display: flex; flex-direction: column; gap: clamp(.6rem, 1.2vw, 1.1rem); transform: translate3d(0, calc((var(--sc-p, .5) - .5) * var(--dir, 1) * 22%), 0); will-change: transform; }
.wall__col:nth-child(odd) { --dir: -1; margin-top: -12%; }
.wall__col img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; filter: saturate(.85) brightness(.58); max-width: none; }
.wall__veil { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(46% 42% at 50% 50%, rgb(11 12 14 / .9), rgb(11 12 14 / .55) 62%, rgb(11 12 14 / .25) 100%),
  linear-gradient(180deg, var(--sc-canvas) 0%, transparent 14%, transparent 86%, var(--sc-canvas) 100%); }
.wall__copy { text-align: center; }
.wall__copy h2 { font-size: clamp(3rem, 1.2rem + 6.2vw, 8.2rem); line-height: .9; font-stretch: 72%; letter-spacing: -.02em; }
.wall__copy h2 em { font-style: normal; color: transparent; -webkit-text-stroke: 2px var(--sc-ink); }
.wall__copy p { margin: var(--sc-5) auto 0; max-width: 46ch; color: color-mix(in oklab, var(--sc-ink) 82%, transparent); font-size: var(--sc-t-lg); }
.wall__copy .textlink { margin-top: var(--sc-4); }
@media (max-width: 860px) {
  .wall__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); inset: -12% -24%; }
  .wall__col:nth-child(n+4) { display: none; }
  .wall__copy h2 { font-size: 15vw; }
  .wall__copy p { font-size: var(--sc-t-base); }
}
@media (prefers-reduced-motion: reduce) { .wall__col { transform: none; } }

/* ==================================================================== ACT 2
   Where should we pull up? */
.where { padding-block: clamp(4rem, 8vw, 8rem) var(--sc-section); }
.where__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.where__head p { margin-top: var(--sc-4); }
.where__answer { margin-top: var(--sc-7); min-height: 5.5em; }
.where__answer strong { display: block; font: 680 var(--sc-t-xl)/1.1 var(--sc-font-display); font-stretch: 78%; color: var(--sc-ink); letter-spacing: var(--sc-track-snug); }
.where__answer span { display: block; margin-top: .5rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 44ch; }
.areas { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem .45rem; }
.areas legend { margin-bottom: var(--sc-4); }
.area { position: relative; }
.area input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.area span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .25rem 1.05rem;
  border-radius: 999px; border: 1px solid var(--sc-hairline-strong);
  font: 640 var(--sc-t-base)/1 var(--sc-font-display); font-stretch: 70%; letter-spacing: .02em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  transition: color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.area input:checked + span { color: var(--sc-accent-ink); background: var(--sc-accent); border-color: var(--sc-accent); }
.area input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.area input:active + span { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .area:hover span { color: var(--sc-ink); border-color: color-mix(in oklab, var(--sc-ink) 45%, transparent); } }
.area--base span { border-style: dashed; }
.where__fine { margin-top: var(--sc-6); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 60ch; }
@media (max-width: 860px) { .where__grid { grid-template-columns: 1fr; } .where__answer { margin-top: var(--sc-5); min-height: 0; } }

/* ==================================================================== ACT 3
   The usual trip. Lines arrive in the dark and each one is struck through as
   the next lands. */
.trip__stage { display: grid; place-items: center; }
.trip__inner { width: 100%; max-width: var(--sc-maxw); padding-inline: var(--sc-gutter); }
.trip__list { list-style: none; margin: 0; padding: 0; }
.trip__list li {
  position: relative; width: fit-content;
  font: 640 var(--sc-t-3xl)/1.02 var(--sc-font-display); font-stretch: 72%; letter-spacing: var(--sc-track-tight);
  color: color-mix(in oklab, var(--sc-ink) 88%, transparent);
}
.trip__list li + li { margin-top: .08em; }
.trip__list li::after {
  content: ""; position: absolute; left: -.04em; right: -.04em; top: 52%; height: .07em; border-radius: 1px;
  background: var(--sc-ink-soft); transform-origin: 0 50%; transform: scaleX(var(--strike, 0));
}
.trip__list li[data-struck] { color: color-mix(in oklab, var(--sc-ink) 34%, transparent); transition: color 260ms var(--sc-ease-out); }
.trip__turn { margin-top: var(--sc-7); }
.trip__turn h2 { font-size: var(--sc-t-3xl); max-width: 16ch; color: var(--sc-ink); }
.trip__turn blockquote { margin: var(--sc-6) 0 0; max-width: 52ch; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.trip__turn cite { display: block; margin-top: .5rem; font-style: normal; color: color-mix(in oklab, var(--sc-ink-soft) 80%, transparent); }

/* the scissors that cut each line: steel bodies, silver outline, drawn in on arrival */
.scissors { position: absolute; z-index: 2; top: 0; right: calc(var(--sc-gutter) * .6); width: min(42vw, 50rem); height: auto; overflow: visible; pointer-events: none; transform-origin: 58% 50%; will-change: transform; }
.scissors :is(.sc__blade, .sc__body, .sc__tang, .sc__screw) { fill: url(#sc-steel); stroke: url(#ed-silver); stroke-width: 1.6; stroke-linejoin: round; }
.scissors .sc__tang { fill: none; }
.scissors .sc__edge { fill: none; stroke: rgb(255 255 255 / .38); stroke-width: 1; stroke-linecap: round; }
.scissors .sc__slot { stroke: #9aa0a8; stroke-width: 1.6; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .scissors :is(.sc__blade, .sc__body, .sc__tang, .sc__screw, .sc__edge) { stroke-dasharray: 1200; stroke-dashoffset: 1200; fill-opacity: 0; transition: stroke-dashoffset 1800ms var(--sc-ease-in-out), fill-opacity 900ms var(--sc-ease-out) 900ms; }
  .scissors.is-drawn :is(.sc__blade, .sc__body, .sc__tang, .sc__screw, .sc__edge) { stroke-dashoffset: 0; fill-opacity: 1; }
}
@media (max-width: 860px) and (min-height: 561px) { .scissors { display: none; } }

/* ==================================================================== ACT 4
   Step in. The signature move: the van's open door becomes the room. */
.door__stage { background: var(--sc-canvas); }
.door__view { position: absolute; inset: 0; will-change: clip-path; }
.door__ext { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; }
.door__ext img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.door__intro { position: absolute; z-index: 3; left: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(24rem, 26vw); }
.door__intro h2 { font-size: var(--sc-t-3xl); }
.door__intro p { margin-top: var(--sc-4); color: var(--sc-ink-soft); max-width: 30ch; }
.door__panel {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; z-index: 0;
  background: #1a1c20; border-radius: 6px; will-change: transform;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .7);
}
.door__panel > * { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; will-change: transform, opacity; }
.door__panel video { opacity: 0; }
.door__ext { z-index: 1; }
.door__copy { position: absolute; z-index: 3; left: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(32rem, 40vw); }
.door__copy h2 { font-size: var(--sc-t-3xl); }
.door__copy p { margin-top: var(--sc-5); color: var(--sc-ink-soft); max-width: 40ch; }
.door__copy--b { top: auto; translate: none; bottom: clamp(3rem, 14vh, 9rem); }
.door__copy--b h3 { font: 680 var(--sc-t-2xl)/1.02 var(--sc-font-display); font-stretch: 78%; letter-spacing: var(--sc-track-snug); }
.door__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(0deg, rgb(11 12 14 / .94) 0%, rgb(11 12 14 / .62) 34%, transparent 58%); }
@media (max-width: 860px) {
  .door__copy, .door__copy--b { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: auto; translate: none; bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .door__copy p { font-size: var(--sc-t-sm); }
  .door__intro { top: auto; translate: none; width: auto; right: var(--sc-gutter); bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .door__intro h2 { font-size: var(--sc-t-2xl); }
  .door__copy h2 { font-size: var(--sc-t-2xl); }
  .door__copy--b h3 { font-size: var(--sc-t-xl); }
  .door__scrim { opacity: 1; }
  .door__panel { border-radius: 0; }
}

/* ==================================================================== ACT 5
   Inside: facts set as labels beside two real photos. */
.inside { padding-block: var(--sc-section); }
.inside__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.inside__photo { margin: 0; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sc-e3); }
.inside__photo img { width: 100%; height: auto; }
.inside__photo--a img { aspect-ratio: 3 / 4; object-fit: cover; }
.inside__media { position: relative; padding-bottom: 16%; }
.inside__photo--a { width: 80%; }
/* the close-up overlaps the room's lower corner, ringed in the page ground, so the pair reads as one composition */
.inside__photo--b { position: absolute; right: 0; bottom: 0; width: 50%; border: clamp(4px, .5vw, 8px) solid var(--sc-canvas); border-radius: calc(var(--r-card) + 4px); }
.inside__photo--b img { aspect-ratio: 1; object-fit: cover; border-radius: var(--r-card); }
.inside__text h2 { font-size: var(--sc-t-3xl); max-width: 12ch; }
.inside__text > p { margin-top: var(--sc-5); }
.facts { margin: var(--sc-7) 0 0; display: grid; grid-template-columns: 1fr; }
.facts > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding-block: .95rem; border-top: 1px solid var(--sc-hairline); }
.facts > div:last-child { border-bottom: 1px solid var(--sc-hairline); }
.facts dt { font: 520 var(--sc-t-xs)/1.5 var(--sc-font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); padding-top: .15rem; }
.facts dd { margin: 0; color: var(--sc-ink); }
/* the tour: Adrian's own footage and photos, one even row on desktop, the film leading on phones */
.tour { margin-top: var(--sc-section); }
.tour__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 2rem; margin-bottom: var(--sc-6); }
.tour__head h3 { font-size: var(--sc-t-2xl); }
.tour__head p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.tour__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1.25rem); }
.tour__item { margin: 0; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sc-e3); background: var(--sc-surface); aspect-ratio: 3 / 4; }
.tour__item :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.tour__item--counter img { object-position: 50% 40%; }
@media (max-width: 860px) {
  .inside__grid { grid-template-columns: 1fr; }
  .facts > div { grid-template-columns: 6.5rem 1fr; }
  .tour__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour__item--film { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
}

/* ==================================================================== ACT 6
   The cuts: lateral travel through real work. */
.cuts__stage { display: flex; align-items: center; }
.rail { gap: clamp(1rem, 2vw, 1.75rem); padding-inline: var(--sc-gutter); align-items: center; }
.rail__lead { flex: 0 0 min(26rem, 78vw); padding-right: clamp(1rem, 4vw, 4rem); }
.rail__lead h2 { font-size: var(--sc-t-3xl); }
.rail__lead p { margin-top: var(--sc-5); }
.cut { flex: 0 0 clamp(15rem, 22vw, 20.5rem); margin: 0; }
.cut__frame { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sc-e2); background: var(--sc-surface); }
.cut__frame img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.cut figcaption { padding-top: .95rem; }
.cut h3 { font: 680 var(--sc-t-lg)/1.1 var(--sc-font-display); font-stretch: 78%; letter-spacing: var(--sc-track-snug); }
.cut dl { margin: .45rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; font-size: var(--sc-t-sm); }
.cut dt { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); letter-spacing: .12em; text-transform: uppercase; padding-top: .14rem; }
.cut dd { margin: 0; }
.rail__end { flex: 0 0 min(20rem, 70vw); padding-left: clamp(1rem, 3vw, 3rem); }
.rail__end p { color: var(--sc-ink-soft); }
.rail__end .textlink { margin-top: var(--sc-4); }
@media (prefers-reduced-motion: no-preference) {
  .cut { opacity: calc(0.55 + 0.45 * var(--settle, 1)); transform: translateY(calc((1 - var(--settle, 1)) * 18px)); }
}

/* ==================================================================== ACT 7
   Reviews. 5.0 from 198 is Booksy's own figure, so it may count. */
.reviews { padding-block: var(--sc-section) clamp(3rem, 6vw, 6rem); overflow: clip; }
.reviews__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.score__num { font: 760 clamp(6rem, 4rem + 9vw, 11rem)/.86 var(--sc-font-display); font-stretch: 70%; letter-spacing: -0.03em; }
.score__stars { display: flex; gap: .3rem; margin-top: var(--sc-4); color: var(--sc-accent); }
.score__stars .icon { width: 1.25rem; height: 1.25rem; }
.score__meta { margin-top: var(--sc-3); color: var(--sc-ink-soft); }
.score__meta a { color: var(--sc-ink); }
.feature { margin: 0; }
.feature blockquote { margin: 0; font: 560 var(--sc-t-xl)/1.28 var(--sc-font-display); font-stretch: 86%; letter-spacing: var(--sc-track-snug); text-wrap: pretty; }
.feature figcaption { margin-top: var(--sc-5); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
/* Ported from 21st.dev "Testimonials Marquee" (scrollxui): duplicated rows on a
   transform loop, paused on hover, static under reduced motion. */
.marquee { margin-top: var(--sc-9); display: grid; gap: 1rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__row { display: flex; gap: 1rem; width: max-content; animation: marquee var(--dur, 70s) linear infinite; }
.marquee__row--rev { animation-direction: reverse; --dur: 82s; }
.marquee:hover .marquee__row, .marquee.is-paused .marquee__row, .marquee:focus-within .marquee__row { animation-play-state: paused; }
.reviews__controls { display: flex; justify-content: flex-end; margin-top: var(--sc-4); }
.reviews__controls .textlink { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); background: none; border: 0; padding: 0; cursor: pointer; }
.reviews__controls .textlink:hover { color: var(--sc-ink); }
.quote { flex: 0 0 auto; width: 22rem; padding: 1.15rem 1.25rem; border-radius: var(--r-card); background: var(--sc-surface); box-shadow: var(--sc-edge), var(--sc-e1); }
.quote p { font-size: var(--sc-t-sm); color: var(--sc-ink); }
.quote span { display: block; margin-top: .6rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: .04em; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__row { animation: none; width: auto; flex-wrap: wrap; padding-inline: var(--sc-gutter); }
  .marquee__row [aria-hidden="true"], .marquee__row--rev, .reviews__controls { display: none; }
}
@media (max-width: 860px) { .reviews__grid { grid-template-columns: 1fr; } .quote { width: 17rem; } }

/* ==================================================================== ACT 8
   Prices, on van white. A hard cut, so the ink is restated with the tokens. */
.prices {
  --sc-ink: #121418; --sc-ink-soft: #50565f; --sc-accent: #1d2026; --sc-accent-ink: #f4f5f7;
  --sc-hairline: rgb(18 20 24 / .12); --sc-hairline-strong: rgb(18 20 24 / .22);
  color: var(--sc-ink); background: #eef0f2;
  padding-block: var(--sc-section);
  position: relative; z-index: 2;
}
.prices ::selection { background: #1d2026; color: #f4f5f7; }
.prices :focus-visible { outline-color: #1d2026; }
.prices__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem; }
.prices__head h2 { font-size: var(--sc-t-3xl); }
.prices__head p { margin-top: var(--sc-4); }
/* Ported from 21st.dev "Segmented Control" (halaska-studio): native radios,
   one sliding thumb driven by transform. */
.seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: #dfe2e6; box-shadow: inset 0 1px 2px rgb(0 0 0 / .08); border: 0; margin: 0; min-width: min(26rem, 100%); }
.seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.seg__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #121418; box-shadow: 0 2px 6px rgb(0 0 0 / .18); transition: transform 320ms var(--sc-ease-drawer); }
.seg[data-mode="stationary"] .seg__thumb { transform: translateX(100%); }
.seg label { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: .7rem 1.2rem; border-radius: 999px; cursor: pointer; text-align: center; transition: color 200ms var(--sc-ease-out); color: #50565f; }
.seg label strong { font: 650 var(--sc-t-sm)/1.2 var(--sc-font-text); }
.seg label small { font-size: var(--sc-t-xs); opacity: .8; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg input:checked + label { color: #f4f5f7; }
.seg input:focus-visible + label { outline: 2px solid #121418; outline-offset: 2px; }

.menu { margin-top: var(--sc-8); border: 0; padding: 0; }
.menu legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.svc { position: relative; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.2rem .25rem; border-top: 1px solid var(--sc-hairline); cursor: pointer; }
.svc:last-of-type { border-bottom: 1px solid var(--sc-hairline); }
.svc input { position: absolute; opacity: 0; pointer-events: none; }
.svc__dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1.5px solid var(--sc-hairline-strong); display: grid; place-items: center; transition: border-color 160ms var(--sc-ease-out); }
.svc__dot::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #121418; transform: scale(0); transition: transform 180ms var(--sc-ease-out); }
.svc input:checked ~ .svc__dot { border-color: #121418; }
.svc input:checked ~ .svc__dot::after { transform: scale(1); }
.svc input:focus-visible ~ .svc__name { outline: 2px solid #121418; outline-offset: 4px; border-radius: 4px; }
.svc__name strong { display: block; font: 680 var(--sc-t-xl)/1.1 var(--sc-font-display); font-stretch: 80%; letter-spacing: var(--sc-track-snug); }
.svc__name small { display: block; margin-top: .25rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.svc__price { font: 700 var(--sc-t-2xl)/1 var(--sc-font-display); font-stretch: 80%; letter-spacing: -0.01em; display: inline-flex; align-items: baseline; }
.svc__price .cur { font-size: .62em; margin-right: .06em; color: var(--sc-ink-soft); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .svc:hover .svc__dot { border-color: #121418; } }
/* Ported from 21st.dev "Sliding Number" (ibelick): each digit is a column of
   0-9 moved by transform. */
.digit { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.digit > span { display: block; transition: transform 460ms var(--sc-ease-out); }
.digit > span > i { display: block; height: 1em; font-style: normal; }
.prices__fine { margin-top: var(--sc-6); display: grid; gap: .45rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 70ch; }
@media (max-width: 860px) { .seg { width: 100%; } }

/* ==================================================================== ACT 9
   Book. The page stops on the assembled visit. */
.book__stage { display: flex; flex-direction: column; justify-content: center; }
.book__inner { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: calc(var(--bar-h) + 1rem) var(--sc-gutter) 0; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.book__inner h2 { font-size: var(--sc-t-4xl); max-width: 9ch; }
.book__inner > div > p { margin-top: var(--sc-5); max-width: 40ch; }
.book__ctas { margin-top: var(--sc-7); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.visit {
  position: relative; border-radius: 18px; padding: 1.5rem 1.6rem 1.4rem; isolation: isolate;
  background: linear-gradient(180deg, #181a1f, #111215);
  box-shadow: var(--sc-e3);
}
.visit::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--chrome); z-index: -1;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; }
.visit__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.visit__top img { width: 2.2rem; height: 2.2rem; }
.visit dl { margin: 1.1rem 0 0; }
.visit dl > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .7rem; border-top: 1px solid var(--sc-hairline); }
.visit dt { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.visit dd { margin: 0; text-align: right; font-weight: 520; }
.visit dd.is-empty { color: var(--sc-ink-soft); font-weight: 400; }
.visit__total dd { font: 720 var(--sc-t-xl)/1 var(--sc-font-display); font-stretch: 80%; }
.visit__total dd.is-empty { font: 400 var(--sc-t-sm)/1.4 var(--sc-font-text); font-stretch: normal; }
.visit__edit { margin-top: .8rem; display: flex; gap: 1.2rem; font-size: var(--sc-t-sm); }
.hours { margin-top: var(--sc-6); display: grid; grid-template-columns: auto auto; justify-content: start; gap: .2rem 1.6rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.hours .is-today { color: var(--sc-ink); font-weight: 560; }
.foot { width: 100%; max-width: var(--sc-maxw); margin: auto auto 0; padding: var(--sc-7) var(--sc-gutter) 1.6rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.foot__social { display: flex; gap: .4rem; }
.foot__social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--sc-hairline); color: var(--sc-ink); transition: border-color 160ms var(--sc-ease-out); }
.foot__social a:hover { border-color: var(--sc-hairline-strong); }
@media (max-width: 860px) {
  .book__stage { justify-content: flex-start; }
  .book__inner { grid-template-columns: 1fr; gap: 1.2rem; padding-top: calc(var(--bar-h) + 1rem); }
  .book__inner h2 { font-size: var(--sc-t-2xl); max-width: none; }
  .book__inner > div > p { display: none; }
  .book__ctas { margin-top: var(--sc-4); gap: .9rem 1.4rem; }
  .book__ctas .chrome--lg { --pad-y: .95rem; --pad-x: 1.6rem; font-size: var(--sc-t-sm); }
  .visit { padding: 1.1rem 1.2rem 1rem; }
  .visit dl > div { padding-block: .5rem; }
  .visit__edit { display: none; }
  .hours { margin-top: var(--sc-5); }
  .foot { padding-top: var(--sc-5); }
}

/* the close arrives once, on a clock rather than on 0.2vh of scroll */
.book [data-in] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 1000ms var(--sc-ease-out), transform 1100ms var(--sc-ease-out); transition-delay: var(--d, 0ms); }
.book [data-in="right"] { transform: translate3d(48px, 0, 0); }
.book .rise { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.book .rise > span { display: block; transform: translate3d(0, 105%, 0); transition: transform 1100ms var(--sc-ease-out); transition-delay: var(--d, 0ms); }
.book .rise > span + span { --d: 120ms; }
.book.is-in [data-in] { opacity: 1; transform: none; }
.book.is-in .rise > span { transform: none; }
.book.is-in .visit::before { animation: rim 1600ms var(--sc-ease-in-out) 500ms both; }
@keyframes rim { from { opacity: 0; } 40% { opacity: 1; } to { opacity: .7; } }
@media (prefers-reduced-motion: reduce) {
  .book [data-in], .book [data-in="right"], .book .rise > span { transform: none; transition-duration: 300ms; }
}

/* =================================================================== DOCKET
   The visit docket: stage readout, jump links, and the booking you build. */
.docket {
  position: fixed; z-index: calc(var(--sc-z-chrome) - 1); right: calc(var(--sc-gutter) + var(--fab) + .75rem); bottom: 1.25rem;
  width: min(21rem, calc(100vw - 2 * var(--sc-gutter)));
  border-radius: 18px; isolation: isolate;
  background: color-mix(in oklab, #121317 94%, transparent);
  box-shadow: 0 4px 10px hsl(var(--sc-shadow-color) / .35), 0 24px 60px -18px hsl(var(--sc-shadow-color) / .7);
  transform: translateY(calc(100% + 2rem)); opacity: 0;
  transition: transform 520ms var(--sc-ease-drawer), opacity 300ms var(--sc-ease-out);
  color: var(--sc-ink);
}
.docket::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--chrome); z-index: -1;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; }
.docket.is-on { transform: none; opacity: 1; }
.docket__bar { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .7rem .7rem .7rem 1rem; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; border-radius: 18px; }
.docket__bar img { width: 1.6rem; height: 1.6rem; flex: none; }
.docket__sum { flex: 1; min-width: 0; }
.docket__stage { display: block; font: 520 var(--sc-t-xs)/1.3 var(--sc-font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.docket__line { display: block; font-size: var(--sc-t-sm); font-weight: 520; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docket__chev { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--sc-hairline); transition: transform 240ms var(--sc-ease-out); }
.docket.is-open .docket__chev { transform: rotate(180deg); }
.docket__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms var(--sc-ease-drawer); }
.docket.is-open .docket__body { grid-template-rows: 1fr; }
.docket__body > div { overflow: hidden; }
.docket__inner { padding: 0 1rem 1rem; }
.stages { list-style: none; margin: 0; padding: .2rem 0 .8rem; display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 1px solid var(--sc-hairline); }
.stages a { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: .35rem .75rem; border-radius: 999px; font-size: var(--sc-t-xs); text-decoration: none; color: var(--sc-ink-soft); border: 1px solid transparent; }
.stages a::before { content: ""; width: .38rem; height: .38rem; border-radius: 50%; background: currentColor; opacity: .5; }
.stages a[aria-current="step"] { color: var(--sc-ink); border-color: var(--sc-hairline-strong); }
.stages a[aria-current="step"]::before { opacity: 1; background: var(--sc-accent); }
.stages a:hover { color: var(--sc-ink); }
.docket dl { margin: .5rem 0 0; font-size: var(--sc-t-sm); }
.docket dl > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .38rem; }
.docket dt { color: var(--sc-ink-soft); }
.docket dd { margin: 0; text-align: right; }
.docket dd.is-empty { color: var(--sc-ink-soft); }
.docket .chrome { width: 100%; margin-top: .8rem; }
@media (max-width: 860px) {
  .docket { right: calc(.75rem + var(--fab) + .6rem); left: .75rem; width: auto; bottom: max(.75rem, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .docket, .docket__body, .chrome::before { transition: none; animation: none; }
}

/* ================================================================ WHATSAPP
   A floating chrome button that opens a small compose card; Send hands the
   typed message to WhatsApp (wa.me) with the text already in the chat. */
.wa { position: fixed; z-index: var(--sc-z-chrome); right: var(--sc-gutter); bottom: 1.25rem; }
.wa__fab { width: var(--fab); height: var(--fab); padding: 0; --pad-x: 0; --pad-y: 0; color: #fff;
  box-shadow: 0 2px 4px hsl(var(--sc-shadow-color) / .35), 0 10px 26px -8px rgb(18 140 70 / .55); }
/* WhatsApp green inside the chrome rim, so it reads as WhatsApp at a glance */
.wa__fab::after { background: linear-gradient(180deg, #1a9f52, #0f8044); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -1px 0 rgb(0 0 0 / .18); }
@media (hover: hover) and (pointer: fine) { .wa__fab:hover::after { background: linear-gradient(180deg, #1ca756, #118a49); } }
.wa__fab .icon { width: 1.5rem; height: 1.5rem; }
.wa__fab .wa__x { display: none; }
.wa.is-open .wa__fab .wa__glyph { display: none; }
.wa.is-open .wa__fab .wa__x { display: block; }
.wa__card {
  position: absolute; right: 0; bottom: calc(100% + .8rem);
  width: min(23rem, calc(100vw - 2 * var(--sc-gutter)));
  border-radius: 18px; isolation: isolate; padding: 1.1rem 1.1rem 1rem;
  background: linear-gradient(180deg, #181a1f, #111215); color: var(--sc-ink);
  box-shadow: 0 4px 10px hsl(var(--sc-shadow-color) / .35), 0 28px 70px -18px hsl(var(--sc-shadow-color) / .75);
  transform-origin: 100% 100%; transform: translate3d(0, 10px, 0) scale(.96); opacity: 0; visibility: hidden;
  transition: transform 260ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out), visibility 0s linear 260ms;
}
.wa__card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--chrome); z-index: -1; opacity: .6;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.wa.is-open .wa__card { transform: none; opacity: 1; visibility: visible; transition: transform 300ms var(--sc-ease-out), opacity 220ms var(--sc-ease-out), visibility 0s; }
.wa__head { display: flex; align-items: center; gap: .7rem; }
.wa__head img { width: 2.2rem; height: 2.2rem; flex: none; }
.wa__head h2 { font: 680 var(--sc-t-lg)/1.1 var(--sc-font-display); font-stretch: 80%; letter-spacing: var(--sc-track-snug); }
.wa__head p { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-top: .15rem; }
.wa__card label { display: block; margin-top: 1rem; font-size: var(--sc-t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.wa__card textarea {
  display: block; width: 100%; margin-top: .45rem; min-height: 7.5rem; max-height: 40vh; resize: vertical;
  padding: .8rem .9rem; border-radius: 12px; border: 1px solid var(--sc-hairline-strong);
  background: #0d0e11; color: var(--sc-ink); font: 400 var(--sc-t-base)/1.5 var(--sc-font-text);
  transition: border-color 160ms var(--sc-ease-out);
}
.wa__card textarea::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 75%, transparent); }
.wa__card textarea:focus { outline: none; border-color: var(--sc-accent); }
.wa__card textarea:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.wa__add { margin-top: .6rem; background: none; border: 0; padding: 0; cursor: pointer; font-size: var(--sc-t-sm); }
.wa__add[hidden] { display: none; }
.wa__foot { margin-top: .9rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wa__foot small { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.wa__send:disabled { opacity: .45; cursor: not-allowed; }
.wa__send:disabled .chrome__shine { display: none; }
@media (max-width: 860px) {
  .wa { right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); }
  .wa__card { width: calc(100vw - 1.5rem); }
}
@media (prefers-reduced-motion: reduce) { .wa__card { transition: opacity 150ms linear, visibility 0s; transform: none; } }

/* ============================================================= SHORT SCREENS
   Phones on their side and squat windows: pinned scenes go back to a
   side-by-side arrangement and the type steps down so nothing is clipped. */
@media (max-height: 560px) and (orientation: landscape) {
  :root { --bar-h: 3.6rem; }
  .bar__mark img { height: 2.1rem; }
  .ed__stage { --mast-fs: min(15vw, 30vh); --mast-top: calc(var(--bar-h) + .5vh); --panel-l: 44vw; }
  .ed__copy { top: calc(var(--mast-top) + var(--mast-fs) * .8 + 2vh); }
  .ed__copy h1 { font-size: clamp(1.4rem, .8rem + 4.6vh, 2.2rem); }
  .ed__copy > p { display: none; }
  .ed__actions { margin-top: .7rem; }
  .ed__actions .textlink, .ed__proof { display: none; }
  .ed__outline { width: min(44vw, 100vh); bottom: .6rem; }
  .ed__caption { display: none; }

  .trip__list li, .trip__turn h2 { font-size: clamp(1.4rem, .6rem + 6vh, 2.4rem); }
  .trip__turn { margin-top: 1rem; }
  .trip__turn blockquote { display: none; }

  .door__intro { left: var(--sc-gutter); right: auto; top: 50%; bottom: auto; translate: 0 -50%; width: min(20rem, 34vw); }
  .door__copy, .door__copy--b { left: var(--sc-gutter); right: auto; width: min(24rem, 42vw); top: 50%; bottom: auto; translate: 0 -50%; }
  .door__copy h2, .door__intro h2 { font-size: clamp(1.4rem, .6rem + 6vh, 2.4rem); }
  .door__copy--b h3 { font-size: clamp(1.2rem, .6rem + 4.5vh, 1.8rem); }
  .door__copy p, .door__intro p { font-size: .88rem; margin-top: .6rem; }
  .door__scrim { opacity: 0; }
  .door__panel { border-radius: 6px; }

  .cuts__stage { padding-top: var(--bar-h); padding-bottom: 4.5rem; }
  .cut { flex-basis: clamp(8rem, (100svh - var(--bar-h) - 8.5rem) * .8, 20rem); }
  .docket { left: auto; right: calc(var(--sc-gutter) + var(--fab) + .75rem); width: min(19rem, 46vw); bottom: .75rem; }
  .cut figcaption { padding-top: .5rem; }
  .cut dl { display: none; }
  .rail__lead h2 { font-size: clamp(1.6rem, 1rem + 5vh, 2.6rem); }
  .rail__lead p { font-size: .9rem; }

  .book__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; padding-top: calc(var(--bar-h) + .6rem); }
  .book__inner h2 { font-size: clamp(1.6rem, 1rem + 6vh, 2.6rem); }
  .book__inner > div > p, .hours, .visit__edit { display: none; }
  .book__ctas { margin-top: .8rem; gap: .2rem 1.2rem; }
  .book__ctas .chrome--lg { --pad-y: .8rem; --pad-x: 1.3rem; font-size: var(--sc-t-sm); }
  .visit { padding: .8rem 1rem; }
  .visit dl { margin-top: .3rem; }
  .visit dl > div { padding-block: .3rem; }
  .foot { padding-block: .6rem; }
}