/* Float Therapy Tallaght. Element: water. Grammar: subtraction.
   The page switches the senses off one at a time, then turns them all back on.
   Family chrome (bar, footer, slots base) lives in /family/family.css. */

:root {
  --salt: #eef3f2;
  --salt-2: #dfeceb;
  --mist: #f6f9f8;
  --deep: #0b2a30;
  --deep-soft: #3b5a5f;
  --teal: var(--fw-water, #14666f);   /* family water: text-safe on light */
  --aqua: var(--fw-water-light, #8bd3db);
  --tank: #0a1a1e;
  --night: #030a0c;
  --pale: #d4e6e6;          /* body ink on dark grounds */

  --sc-canvas: var(--salt);
  --sc-surface: var(--salt-2);
  --sc-ink: var(--deep);
  --sc-ink-soft: var(--deep-soft);
  --sc-accent: var(--teal);
  --sc-accent-ink: var(--mist);
  --sc-font-display: "Urbanist", system-ui, sans-serif;
  --sc-font-text: "Manrope", system-ui, sans-serif;
  --pill: 999px;
  --ease: cubic-bezier(.23, 1, .32, 1);
}

body.ft { background: var(--sc-canvas); color: var(--deep); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
::selection { background: var(--aqua); color: var(--deep); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.sc-grain { opacity: .04; }

/* ---- type ---- */
.ft-display { font-family: "Urbanist", system-ui, sans-serif; font-weight: 300; letter-spacing: -.025em; line-height: 1.02; text-wrap: balance; margin: 0; }
.ft-display--lg { font-size: clamp(2.2rem, 1.4rem + 2.9vw, 4.1rem); }
.kicker { margin: 0 0 18px; font: 600 12px/1 "Manrope", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); }
.sc-body { max-width: 44ch; color: inherit; }

/* ---- controls ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--pill); font: 600 15px/1 "Manrope", system-ui, sans-serif; letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .16s var(--ease), color .16s var(--ease), transform .12s var(--ease); }
.btn:active { transform: scale(.97); }
.btn--ink { background: var(--deep); color: var(--mist); }
.btn--glow { background: var(--aqua); color: #03191d; }
@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover { background: var(--teal); }
  .btn--glow:hover { background: #b4e6eb; }
}
.btn--glow:focus-visible { outline-color: var(--aqua); }
.link { padding: 0; border: 0; background: none; color: var(--teal); font: 600 15px/1.4 "Manrope", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; }
.link:hover { text-decoration-thickness: 2px; }

/* =========================================================== 1 · hero == */
.hero { position: relative; height: calc(100svh - var(--fw-bar-h)); min-height: 600px; overflow: clip; background: var(--salt); isolation: isolate; }
.mast { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 32px; padding: 18px var(--sc-gutter); }
.mast__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--deep); text-decoration: none; }
.mast__brand img { width: 46px; height: 46px; }
.mast__word { font: 500 19px/1 "Urbanist", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.mast__word small { display: block; margin-top: 5px; font: 600 10px/1 "Manrope", system-ui, sans-serif; letter-spacing: .3em; color: var(--teal); }
.mast__nav { display: flex; gap: 28px; margin-left: auto; }
.mast__nav a { color: var(--deep); font: 600 14px/1 "Manrope", system-ui, sans-serif; text-decoration: none; padding: 8px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .2s var(--ease); }
.mast__nav a:hover { background-size: 100% 1px; }
.mast__book { min-height: 44px; padding: 0 20px; font-size: 14px; }

.hero__scene { position: absolute; inset: 0; }
/* The plate and the pod share one square box, so they stay registered in the real room. */
.hero__box { --S: clamp(640px, 108svh, 1300px); position: absolute; width: var(--S); height: var(--S); right: -14vw; bottom: calc(var(--S) * -.11);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%); mask-image: linear-gradient(to right, transparent 0, #000 26%); }
.hero__box--back { z-index: 0; }
.hero__box--front { z-index: 3; }
.hero__plate, .hero__pod { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.hero__plate { transform-origin: 60% 60%; }
.hero__pod { transform-origin: 20% 78%; filter: drop-shadow(0 30px 34px rgb(11 42 48 / .22)); }
.hero__veil { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(120% 90% at 66% 34%, rgb(3 10 12 / .1) 0, rgb(3 10 12 / .75) 100%); opacity: 0; }
.hero__copy { position: absolute; left: var(--sc-gutter); top: clamp(120px, 19svh, 190px); max-width: min(52rem, 60vw); }
/* the headline sits between the room and the pod, so the pod passes in front of it */
.hero__title { position: relative; z-index: 1; font-size: clamp(3.4rem, 1.2rem + 6.4vw, 7.4rem); font-weight: 250; line-height: .94; letter-spacing: -.04em; color: var(--deep); }
.hero__lede { position: relative; z-index: 6; max-width: 30ch; margin: 28px 0 0; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); line-height: 1.5; color: var(--deep); }
.hero__act { position: relative; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 30px 0 0; }
.hero__cue { display: inline-flex; align-items: center; gap: 10px; color: var(--deep); font: 600 13px/1 "Manrope", system-ui, sans-serif; letter-spacing: .02em; text-decoration: none; }
.hero__cue svg { width: 12px; height: 18px; fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: cue-nudge 2.6s var(--ease) 2s infinite; }
.hero__cue-touch { display: none; }
@media (pointer: coarse) { .hero__cue-fine { display: none; } .hero__cue-touch { display: inline; } .hero__cue svg { transform: rotate(180deg); animation-name: cue-nudge-up; } }
@keyframes cue-nudge { 0%, 70%, 100% { transform: translateY(0); } 35% { transform: translateY(5px); } }
@keyframes cue-nudge-up { 0%, 70%, 100% { transform: rotate(180deg) translateY(0); } 35% { transform: rotate(180deg) translateY(5px); } }
.hero__caption { position: absolute; z-index: 5; right: var(--sc-gutter); bottom: 18px; margin: 0; font-size: 12px; color: #1d3c41; background: rgb(238 243 242 / .78); padding: 4px 10px; border-radius: var(--pill); }

/* the copy is split across planes: title behind the pod, lede and actions in front */
.hero__copy { pointer-events: none; }
.hero__copy a, .hero__copy button { pointer-events: auto; }

/* ========================================================= sense nav == */
.senses { position: fixed; z-index: 40; right: 18px; top: 50%; transform: translate(12px, -50%); opacity: 0; visibility: hidden; padding: 14px 14px 10px; border-radius: 18px; background: rgb(238 243 242 / .94); color: var(--deep); box-shadow: 0 10px 30px rgb(3 10 12 / .14); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s, background-color .4s var(--ease), color .4s var(--ease); }
.senses.is-shown { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
.senses.is-dark { background: rgb(6 20 23 / .92); color: var(--pale); box-shadow: 0 10px 30px rgb(0 0 0 / .35); }
.senses__title { margin: 0 0 8px; font: 600 10px/1 "Manrope", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.senses ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sense { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; min-height: 36px; padding: 0 2px; color: inherit; text-decoration: none; font: 600 13px/1 "Manrope", system-ui, sans-serif; }
.sense svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sense__state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sense__switch { position: relative; width: 30px; height: 18px; border-radius: var(--pill); background: var(--teal); transition: background-color .35s var(--ease); }
.senses.is-dark .sense__switch { background: #2f7e88; }
.sense__switch::after { content: ""; position: absolute; top: 3px; left: 15px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .35s var(--ease); }
.sense[data-on="false"] { opacity: .62; }
.sense[data-on="false"] .sense__switch { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.sense[data-on="false"] .sense__switch::after { transform: translateX(-12px); background: currentColor; }
.sense.is-here .sense__name { text-decoration: underline; text-underline-offset: 4px; }
.sense:focus-visible { outline-offset: 2px; border-radius: 6px; }
.senses.is-dark .sense:focus-visible { outline-color: var(--aqua); }

/* ===================================================== shared act bits == */
.act { position: relative; }
.act__copy { z-index: 3; max-width: 34rem; }
.act__copy .sc-body { margin-top: 20px; }
.col-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.col-scrim--lead { background: linear-gradient(to right, rgb(238 243 242 / .93) 0, rgb(238 243 242 / .82) 30%, rgb(238 243 242 / 0) 56%); }
.col-scrim--trail { background: linear-gradient(to left, rgb(4 16 19 / .9) 0, rgb(4 16 19 / .74) 32%, rgb(4 16 19 / 0) 58%); }
.act--gravity .act__copy { color: var(--deep); }
.act__copy--dark { color: var(--pale); }
.act__copy--dark .kicker { color: var(--aqua); }
.act__copy--dark .ft-display { color: #f1f7f6; }

/* ============================================================ 3 · sound == */
.act--sound { --sc-ink: #eef6f5; color: #eef6f5; }
.act--sound .kicker { color: var(--aqua); }
.sound { display: grid; align-content: center; padding: 0 var(--sc-gutter); background: #2b4f55; }
.sound__wave { position: absolute; left: 0; right: 0; top: 50%; height: min(34vh, 300px); transform: translateY(-50%); z-index: 0; opacity: .36; }
.wave { width: 100%; height: 100%; display: block; }
.wave rect { fill: var(--aqua); transform-box: fill-box; transform-origin: center; }
.sound__copy { position: relative; z-index: 1; display: grid; grid-template-rows: auto auto; max-width: 40rem; }
.sound__copy > .ft-display { grid-row: 2; grid-column: 1; align-self: start; }
.sound__copy > .kicker { grid-row: 1; }
.sound__note { position: absolute; left: var(--sc-gutter); bottom: 9vh; margin: 0; font-size: 14px; color: #bcd6d6; }

/* ============================================================ 4 · light == */
.light__dark { position: absolute; inset: 0; z-index: 1; background: var(--tank); opacity: 0; pointer-events: none; }

/* ============================================================= 5 · time == */
.act--time { --sc-ink: var(--pale); color: var(--pale); }
.act--time .kicker { color: var(--aqua); }
.time { display: flex; align-items: center; background: var(--tank); }
.time__clock { position: absolute; z-index: 2; top: 9vh; right: calc(var(--sc-gutter) + 150px); margin: 0; font: 200 clamp(3rem, 2rem + 4vw, 6rem)/1 "Urbanist", system-ui, sans-serif; letter-spacing: -.04em; color: #e9f4f3; font-variant-numeric: tabular-nums; }
.time__clock small { margin-left: 8px; font: 600 12px/1 "Manrope", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.hour { display: flex; align-items: center; gap: 8vw; padding: 0 max(var(--sc-gutter), 250px) 0 var(--sc-gutter); will-change: transform; }
.hour__lead { flex: none; width: min(34rem, 80vw); }
.hour__lead .ft-display { color: #f1f7f6; }
.hour__lead .sc-body { margin-top: 20px; }
/* 60 minutes laid out at real proportion: the silence takes three quarters of the line */
.hour__line { --w: 300vw; position: relative; flex: none; width: var(--w); height: 220px; margin: 0; padding: 0; list-style: none;
  background:
    linear-gradient(var(--aqua), var(--aqua)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(to right, rgb(139 211 219 / .55) 0 1px, transparent 1px calc(var(--w) / 12)) 0 calc(50% - 6px) / 100% 13px no-repeat; }
.hour__line::before, .hour__line::after { content: ""; position: absolute; top: calc(50% - 22px); height: 44px; border-radius: 22px;
  background: repeating-linear-gradient(to right, rgb(139 211 219 / .55) 0 3px, transparent 3px 9px); -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.hour__line::before { left: 0; width: calc(100% / 6); }
.hour__line::after { left: calc(100% * 55 / 60); width: calc(100% / 12); }
.mark { position: absolute; display: grid; gap: 8px; width: min(18rem, 60vw); }
.mark__t { font: 600 12px/1 "Manrope", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--aqua); }
.mark__what { font: 300 clamp(1.3rem, 1.1rem + .8vw, 1.9rem)/1.2 "Urbanist", system-ui, sans-serif; color: #eef6f5; }
.mark--music { left: 0; bottom: calc(50% + 40px); }
.mark--fade { left: calc(100% * 10 / 60); top: calc(50% + 34px); }
.mark--gold { left: calc(100% * 30 / 60); bottom: calc(50% + 34px); transform: translateX(-50%); text-align: center; }
.mark--gold .mark__what { color: #f3e7c6; }
.mark--back { left: calc(100% * 55 / 60); top: calc(50% + 34px); transform: translateX(-60%); }
.mark--end { left: 100%; bottom: calc(50% + 40px); transform: translateX(-100%); text-align: right; width: 14rem; }

/* =========================================================== 6 · silence == */
.act--silence { --sc-ink: var(--pale); color: var(--pale); }
.silence { display: grid; place-items: center; background: var(--night); }
.silence__water { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.silence__ring { position: absolute; left: 50%; top: 50%; width: min(56vmin, 520px); aspect-ratio: 1; transform: translate(-50%, -50%) scale(var(--ring, .82)); border-radius: 50%; border: 1px solid rgb(139 211 219 / .5); opacity: var(--ring-o, 0); }
.silence__ring i { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgb(139 211 219 / .18), transparent); }
.silence__word { grid-area: 1 / 1; position: relative; z-index: 2; font-size: clamp(4rem, 2rem + 9vw, 10rem); font-weight: 200; letter-spacing: -.05em; color: #e9f4f3; }
.silence__line { grid-area: 1 / 1; position: relative; z-index: 2; margin: 0; width: min(30rem, 86vw); text-align: center; font: 300 clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem)/1.15 "Urbanist", system-ui, sans-serif; color: #e9f4f3; }
.silence__offer { grid-area: 1 / 1; position: relative; z-index: 2; width: min(34rem, 88vw); text-align: center; display: grid; justify-items: center; gap: 22px; }
.silence__ask { margin: 0; font: 300 clamp(1.7rem, 1.2rem + 1.9vw, 2.9rem)/1.12 "Urbanist", system-ui, sans-serif; letter-spacing: -.02em; color: #f1f7f6; text-wrap: balance; }
.silence__small { margin: 0; font-size: 14px; color: #a9c6c7; }

/* ============================================================ 7 · back == */
.act--back { position: relative; z-index: 2; background: var(--mist); --sc-ink: var(--deep); color: var(--deep); padding-block: clamp(5rem, 10vw, 9rem); }
.back { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.back__fig { margin: 0; aspect-ratio: 870 / 1080; border-radius: 999px 999px 28px 28px; overflow: hidden; background: var(--salt-2); }
.back__fig img { width: 100%; height: 100%; object-fit: cover; }
.quote { margin: 0; padding: 0 0 0 22px; border-left: 1px solid rgb(23 112 123 / .5); }
.quote p { margin: 0; font: 300 clamp(1.15rem, 1rem + .5vw, 1.45rem)/1.45 "Urbanist", system-ui, sans-serif; color: var(--deep); }
.quote footer { margin-top: 12px; font: 600 13px/1 "Manrope", system-ui, sans-serif; color: var(--teal); }
.back__copy .quote { margin-top: 36px; }
.back__retry { margin: 28px 0 0; }

/* =========================================================== 8 · first == */
.act--first { background: var(--salt); color: var(--deep); padding-block: clamp(4rem, 8vw, 8rem) clamp(4rem, 8vw, 7rem); }
.first__head { max-width: 46rem; }
.first__head .sc-body { margin-top: 18px; }
.steps { list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(1.25rem, 3vw, 3rem); counter-reset: step; }
.step { counter-increment: step; }
.step:nth-child(1) { grid-column: 1 / span 6; }
.step:nth-child(2) { grid-column: 8 / span 5; margin-top: clamp(4rem, 12vw, 11rem); }
.step:nth-child(3) { grid-column: 3 / span 6; margin-top: clamp(2.5rem, 5vw, 4rem); }
.step img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 24px; background: var(--salt-2); }
.step h3 { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 8px; font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.1 "Urbanist", system-ui, sans-serif; }
.step h3::before { content: counter(step); font: 600 12px/1 "Manrope", system-ui, sans-serif; color: var(--teal); letter-spacing: .1em; }
.step p { margin: 0; max-width: 36ch; color: var(--deep-soft); }

.faq { max-width: 50rem; margin: clamp(5rem, 9vw, 8rem) 0 0; }
.faq__title { margin: 0 0 18px; font: 400 clamp(1.6rem, 1.3rem + 1vw, 2.3rem)/1.1 "Urbanist", system-ui, sans-serif; }
.faq details { border-top: 1px solid rgb(11 42 48 / .16); }
.faq details:last-child { border-bottom: 1px solid rgb(11 42 48 / .16); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; cursor: pointer; list-style: none; font: 600 16px/1.35 "Manrope", system-ui, sans-serif; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.5px solid var(--teal); border-bottom: 1.5px solid var(--teal); transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { margin: 0 0 22px; max-width: 60ch; color: var(--deep-soft); }

.voices { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: auto auto; gap: 2.5rem clamp(2rem, 5vw, 5rem); margin-top: clamp(5rem, 9vw, 8rem); align-items: start; }
.voices__photo { grid-row: 1 / span 2; margin: 0; border-radius: 28px 28px 999px 999px; overflow: hidden; }
.voices__photo img { width: 100%; height: auto; display: block; }
.voices .quote:nth-of-type(1) { align-self: end; }

/* ============================================================ 9 · book == */
.act--book { background: var(--mist); color: var(--deep); padding-block: clamp(4.5rem, 9vw, 8rem); border-top: 1px solid rgb(11 42 48 / .1); }
.book { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 7vw, 8rem); align-items: start; }
.book__live { display: flex; align-items: center; gap: 10px; margin: 18px 0 30px; font-size: 14px; color: var(--deep-soft); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgb(23 112 123 / .5); animation: live 2.4s var(--ease) infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgb(23 112 123 / .45); } 70%, 100% { box-shadow: 0 0 0 9px rgb(23 112 123 / 0); } }
.book__slots { --s-ink: var(--deep); --s-soft: var(--deep-soft); --s-line: rgb(11 42 48 / .14); --s-accent: var(--teal); }
.book__slots .fw-slot__time { font: 400 1.35rem/1 "Urbanist", system-ui, sans-serif; letter-spacing: -.01em; }
.book__slots .fw-slot__go { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--pill); background: var(--deep); color: var(--mist); text-decoration: none; }
.book__slots .fw-slot__go:hover { background: var(--teal); }
.book__slots .fw-slot.is-full .fw-slot__go { background: transparent; color: var(--deep); box-shadow: inset 0 0 0 1px rgb(11 42 48 / .4); }
.book__sub { margin: 0 0 8px; font: 600 12px/1 "Manrope", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); }
.price { margin: 0; }
.price__row { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 18px 0; border-bottom: 1px solid rgb(11 42 48 / .14); }
.price dt { font: 600 16px/1.3 "Manrope", system-ui, sans-serif; }
.price dd { display: contents; }
.price strong { grid-column: 2; grid-row: 1; font: 300 1.9rem/1 "Urbanist", system-ui, sans-serif; letter-spacing: -.02em; text-align: right; }
.price strong small { font: 600 12px/1 "Manrope", system-ui, sans-serif; letter-spacing: 0; }
.price span { grid-column: 1 / -1; font-size: 14px; color: var(--deep-soft); }
.book__act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin: 30px 0 0; }
.book__contact { margin-top: 34px; font-style: normal; font-size: 14px; line-height: 1.7; color: var(--deep-soft); }
.book__contact a { color: var(--deep); text-underline-offset: 3px; }

/* ===================================================== the one minute == */
.lo { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #010405; color: #a7c3c4; opacity: 0; transition: opacity 1.6s ease-out; outline: none; }
.lo[hidden] { display: none; }
.lo.is-on { opacity: 1; }
.lo.is-leaving { opacity: 0; transition-duration: 1.2s; }
.lo__ring { position: absolute; left: 50%; top: 50%; width: min(60vmin, 460px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(139 211 219 / .35); transform: translate(-50%, -50%) scale(.72); }
.lo__ring i { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgb(139 211 219 / .13), transparent); }
.lo.is-on .lo__ring { animation: breathe 10s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: translate(-50%, -50%) scale(.72); } 45% { transform: translate(-50%, -50%) scale(1); } }
.lo__breath { position: absolute; left: 50%; top: calc(50% - 2.4rem); transform: translateX(-50%); margin: 0; font: 300 1.05rem/1 "Urbanist", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #8fb1b3; }
.lo__count { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -30%); margin: 0; font: 200 clamp(3rem, 2rem + 4vw, 5rem)/1 "Urbanist", system-ui, sans-serif; color: #b9d3d4; font-variant-numeric: tabular-nums; }
.lo__hint { position: absolute; left: 0; right: 0; bottom: max(28px, env(safe-area-inset-bottom)); margin: 0; text-align: center; font-size: 14px; color: #87a6a8; }
html.is-lights-out, html.is-lights-out body { overflow: hidden; }

/* ========================================================== tablet/phone == */
@media (max-width: 1100px) {
  .mast__nav { display: none; }
  .mast__book { margin-left: auto; }
}
@media (max-width: 860px) {
  .hero { min-height: 640px; }
  .mast { padding-top: 14px; gap: 12px; }
  .mast__brand img { width: 40px; height: 40px; }
  .mast__word { font-size: 16px; }
  .mast__book { min-height: 44px; padding: 0 16px; }
  .hero__copy { top: 96px; right: var(--sc-gutter); max-width: none; }
  .hero__title { position: relative; z-index: 1; font-size: clamp(2.9rem, 12.6vw, 4rem); }
  .hero__lede { margin-top: 18px; font-size: 1.02rem; }
  .hero__act { margin-top: 22px; }
  .hero__box { --S: 152vw; right: auto; left: -14vw; bottom: calc(var(--S) * -.17); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%); }
  .hero__caption { display: none; }

  .senses { top: auto; bottom: 12px; right: 50%; transform: translate(50%, 12px); padding: 4px 6px; border-radius: var(--pill); }
  .senses.is-shown { transform: translate(50%, 0); }
  .senses__title { display: none; }
  .senses ul { grid-auto-flow: column; gap: 0; }
  .sense { grid-template-columns: auto; justify-items: center; gap: 4px; min-width: 64px; min-height: 48px; padding: 6px 4px 4px; font-size: 10px; letter-spacing: .04em; }
  .sense svg { display: none; }
  .sense__switch { order: -1; width: 26px; height: 15px; }
  .sense__switch::after { top: 2.5px; left: 13px; width: 10px; height: 10px; }
  .sense[data-on="false"] .sense__switch::after { transform: translateX(-10px); }

  .col-scrim--lead { background: linear-gradient(to top, rgb(238 243 242 / .95) 0, rgb(238 243 242 / .86) 38%, rgb(238 243 242 / 0) 64%); }
  .col-scrim--trail { background: linear-gradient(to top, rgb(4 16 19 / .94) 0, rgb(4 16 19 / .8) 38%, rgb(4 16 19 / 0) 66%); }
  .act__copy { bottom: 92px; }
  .sound__note { bottom: 96px; }
  .time__clock { top: 7vh; right: var(--sc-gutter); }
  .hour { gap: 18vw; padding-right: var(--sc-gutter); }
  .hour__line { --w: 380vw; }
  .back, .book { grid-template-columns: 1fr; }
  .back__fig { width: min(78%, 22rem); }
  .steps { grid-template-columns: 1fr; gap: 3rem; }
  .step:nth-child(n) { grid-column: 1; margin-top: 0; }
  .voices { grid-template-columns: 1fr; }
  .voices__photo { grid-row: auto; width: min(70%, 20rem); }
}
@media (max-width: 380px) {
  .mast__word small { display: none; }
  .hero__title { position: relative; z-index: 1; font-size: 2.7rem; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .hero__copy { top: 84px; }
  .hero__lede { margin-top: 12px; }
  .hero__act { margin-top: 16px; }
  .hero__box { --S: 128vw; left: -6vw; bottom: calc(var(--S) * -.3); }
}

/* ===================================================== reduced motion == */
@media (prefers-reduced-motion: reduce) {
  .hero__cue svg, .dot { animation: none; }
  .hero__plate, .hero__pod { transform: none !important; }
  .lo, .lo.is-leaving { transition: none; }
  .lo.is-on .lo__ring { animation: none; transform: translate(-50%, -50%) scale(.86); }
  .senses, .sense__switch, .sense__switch::after { transition: none; }
  /* the hour stops travelling, so lay it out where it can be read in one view */
  .act--time [data-sc-stage] { overflow: hidden; }
  .hour { flex-direction: column; align-items: flex-start; gap: 36px; padding-top: 12vh; }
  .hour__line { --w: auto; width: auto; height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 24px 32px; background: none; max-width: 76rem; }
  .hour__line::before, .hour__line::after { display: none; }
  .mark, .mark--gold, .mark--back, .mark--end { position: static; transform: none; width: auto; text-align: left; padding-top: 14px; border-top: 1px solid rgb(139 211 219 / .5); }
  .mark__what { font-size: 1.25rem; }
}