/*
  BRIM POOL CARE: the look. Written fresh for this demo (DEMO_RUNBOOK step 5): no rule here is copied
  from another demo's stylesheet. Colours come only from the checked palettes, through the variables
  the starter sets (--bg, --text, --b1 to --b4 and their text colours). Luxury here means space,
  restraint and a thin brass line, never a badge.
  No em-dashes anywhere in this file.
*/

:root {
  --serif: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "Consolas", monospace;
  --gutter: clamp(16px, 5vw, 56px);
  --max: 1240px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --rule: 1px solid var(--b2-accent, #C8A96A);
  --logo-brass: #C8A96A;
  --logo-face: #F4EFE6;
  --logo-ink: #0A1F26;
  --logo-aqua: #5FC6CF;
  /* Fallbacks so the page reads before palettes.js runs. */
  --bg: #F4EFE6; --text: #0A1F26; --muted: #4B5B61; --surface: #FBF8F2; --border: #D9CDB4;
  --accent: #7A5B22; --accent-text: #FBF8F2; --focus: #0E6F7A;
  --b2: #0A1F26; --b2-text: #F4EFE6; --b2-muted: #A9BCC0; --b2-accent: #C8A96A; --b2-accent-text: #0A1F26;
  --b3: #C8A96A; --b3-text: #0A1F26; --b3-muted: #3A2E14; --b3-accent: #0A1F26; --b3-accent-text: #C8A96A;
  --b4: #DDF0F1; --b4-text: #0A1F26; --b4-muted: #3E555A; --b4-accent: #0A1F26; --b4-accent-text: #DDF0F1;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.6 var(--sans); letter-spacing: .005em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  padding-bottom: 76px;
}
img, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Type */
.kicker {
  margin: 0 0 18px; font: 500 12px/1.2 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 14px;
}
.kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.title {
  margin: 0 0 20px; font: 400 clamp(34px, 6.4vw, 64px)/1.04 var(--serif); letter-spacing: -.01em;
  font-optical-sizing: auto; text-wrap: balance;
}
.title-sm { font-size: clamp(28px, 4.6vw, 42px); }
.lead { margin: 0 0 28px; font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); max-width: 40ch; }
.fine { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 14px 0 0; max-width: 62ch; }

/* Blocks: each section takes one measured set of colours from the palette. */
.block-deep { background: var(--b2); color: var(--b2-text); --muted: var(--b2-muted); --focus: var(--b2-accent); }
.block-deep .kicker { color: var(--b2-accent); }
.block-aqua { background: var(--b4); color: var(--b4-text); --muted: var(--b4-muted); }
.block-brass { background: var(--b3); color: var(--b3-text); --muted: var(--b3-muted); --focus: var(--b3-accent); }
.block-brass .kicker { color: var(--b3-text); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1 var(--sans); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: transform .3s var(--ease), background-color .3s, color .3s;
}
.btn:hover { transform: translateY(-1px); }
.btn-brass { background: var(--b2-accent); color: var(--b2-accent-text); }
.btn-line { border-color: currentColor; color: inherit; background: transparent; }
.btn-quiet { padding: 0 6px; color: inherit; text-decoration: underline; text-decoration-color: var(--b2-accent); }
.btn-ink { background: var(--b2); color: var(--b2-text); }
.btn-call { background: var(--accent); color: var(--accent-text); min-height: 40px; padding: 0 18px; font-size: 14px; }

/* Ribbon: the sample-site note, always present on a demo. */
.ribbon { background: var(--b2); color: var(--b2-text); font-size: 13px; position: relative; z-index: 30; }
.ribbon-row { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 36px; }
.looks-toggle {
  background: none; border: 1px solid var(--b2-accent); color: var(--b2-text); border-radius: 999px;
  font: 500 12px var(--mono); padding: 5px 12px; cursor: pointer; white-space: nowrap;
}
.looks-panel { padding-bottom: 10px; }
.palette-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.palette-switch button {
  background: transparent; color: var(--b2-text); border: 1px solid rgba(244, 239, 230, .35);
  border-radius: 999px; padding: 6px 12px; font: 500 12px var(--mono); cursor: pointer;
}
.palette-switch button[aria-pressed="true"] { background: var(--b2-accent); color: var(--b2-accent-text); border-color: var(--b2-accent); }

/* Top bar: pearl glass, sticky. */
.topbar {
  position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.topbar-row { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 40px; height: 40px; flex: none; }
.brand-mark svg, .footer-mark svg, .report-mark svg { width: 100%; height: 100%; }
.brand-word { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font: 500 24px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.brand-sub { font: 500 9.5px/1 var(--mono); letter-spacing: .42em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.nav { display: none; gap: 28px; font-size: 14px; }
.nav a { text-decoration: none; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav a:hover::after { transform: scaleX(1); }
.topbar-call { display: none; }

/* HERO: the stage. Its rules live in THE THREE PAGES at the end of this file (2026-11-12). */
.ripples { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; touch-action: pan-y; z-index: 2; }
.seal { position: relative; width: 112px; height: 112px; margin: -4px 0 22px; }
.seal-flat { position: absolute; inset: 14px; transition: opacity .8s var(--ease); }
.seal-turn { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); touch-action: pan-y; cursor: grab; }
.seal.is-3d .seal-turn { opacity: 1; }
/* the strip, in the visit report: the rendered macro, coloured to the reading on a canvas */
.strip { margin: 0 0 18px; }
.strip-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; background: #0A1F26; cursor: grab; }
.strip-hint { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.strip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.strip-row .chips { flex: 1 1 auto; }
.strip-read { margin: 12px 0 0; font-size: 15px; min-height: 1.5em; }
.strip-read b { font-weight: 600; }
.strip-swatch { display: inline-block; width: 14px; height: 14px; margin: 0 6px -2px 0; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.seal.is-3d .seal-flat { opacity: 0; }
.hero-title { margin: 0 0 20px; font: 400 clamp(46px, 11vw, 92px)/.98 var(--serif); letter-spacing: -.015em; }
.hero-title em { font-style: italic; color: var(--b2-accent); display: block; }
.hero-lead { margin: 0 0 28px; font-size: clamp(17px, 2.3vw, 20px); color: var(--b2-muted); max-width: 38ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 28px; }
.licence-line { font-size: 14px; line-height: 1.55; margin: 0; max-width: 60ch; }
.licence-line strong { font-family: var(--mono); font-weight: 500; letter-spacing: .04em; }
.licence-line a { color: var(--b2-accent); }
.now { margin-top: 28px; padding-top: 22px; border-top: var(--rule); }
.now-kicker { margin: 0 0 12px; font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--b2-accent); }
.lamps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.lamps li { display: flex; align-items: center; gap: 8px; color: var(--b2-muted); }
.lamp { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--b2-muted); }
.lamps li.is-on { color: var(--b2-text); }
.lamps li.is-on .lamp { background: #5FC6CF; border-color: #5FC6CF; box-shadow: 0 0 0 4px rgba(95, 198, 207, .18), 0 0 14px rgba(95, 198, 207, .7); }
.now-text { margin: 0; font-size: 15px; }

/* WHY */
.why { position: relative; overflow: hidden; padding: 88px 0 72px; isolation: isolate; }
.water { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .5; pointer-events: none; }
.why-grid { display: grid; gap: 40px; }
.why-media { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
.why-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: f; }
.fact { display: grid; grid-template-columns: 56px 1fr; gap: 6px 18px; padding: 26px 0; border-top: 1px solid rgba(200, 169, 106, .35); background: var(--b2); }
.fact-mark { font: 400 13px var(--mono); color: var(--b2-accent); padding-top: 6px; grid-row: span 2; }
.fact h3 { margin: 0; font: 400 26px/1.15 var(--serif); }
.fact p { margin: 0; color: var(--b2-muted); max-width: 52ch; }
.people { margin-top: 72px; }
.people-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.person { background: var(--b2); }
.person figure { margin: 0 0 16px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; }
.person img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); transition: transform 1.2s var(--ease); }
.person:hover img { transform: scale(1.03); }
.person h3 { margin: 0; font: 400 26px/1.1 var(--serif); }
.person-role { margin: 4px 0 8px; font: 500 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--b2-accent); }
.person p { margin: 0; color: var(--b2-muted); font-size: 15px; }

/* SERVICE */
.service { padding: 96px 0 80px; }
.section-head { margin-bottom: 40px; }
.sizes { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.sizes button { border: 0; background: transparent; color: var(--text); border-radius: 999px; padding: 9px 16px; font: 600 14px var(--sans); cursor: pointer; }
.sizes button[aria-pressed="true"] { background: var(--b2); color: var(--b2-text); }
.tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.tier { position: relative; padding: 32px 28px 30px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); display: flex; flex-direction: column; }
.tier-cadence { font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.tier h3 { margin: 0 0 18px; font: 400 40px/1 var(--serif); }
.tier-price { margin: 0 0 22px; display: flex; align-items: baseline; gap: 8px; }
.tier-price small { font: 500 12px var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.tier-price strong { font: 400 52px/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.tier ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.tier li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--border); position: relative; font-size: 15px; }
.tier li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 8px; height: 1px; background: var(--accent); }
.tier.is-featured { background: var(--b2); color: var(--b2-text); border-color: var(--b2); --muted: var(--b2-muted); --border: rgba(200, 169, 106, .35); --accent: var(--b2-accent); }
.tier-flag { position: absolute; top: -11px; left: 28px; background: var(--b3); color: var(--b3-text); font: 500 10px var(--mono); letter-spacing: .18em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.terms { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.terms li { padding-left: 22px; position: relative; }
.terms li::before { content: ""; position: absolute; left: 0; top: 12px; width: 10px; height: 1px; background: var(--accent); }

/* DAY */
.day { padding: 96px 0; }
.day-grid { display: grid; gap: 40px; align-items: start; }
.planner fieldset { border: 0; margin: 0 0 22px; padding: 0; }
.planner legend { font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 10px; color: var(--b4-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--b4-text); background: transparent; color: var(--b4-text); border-radius: 999px; padding: 10px 16px; font: 500 14px var(--sans); cursor: pointer; min-height: 44px; }
.chip[aria-pressed="true"] { background: var(--b4-text); color: var(--b4); }
.result { background: var(--b2); color: var(--b2-text); --muted: var(--b2-muted); padding: 32px 28px; border-radius: 6px; position: sticky; top: 88px; box-shadow: 0 30px 60px -30px rgba(10, 31, 38, .55); }
.result-kicker { margin: 0 0 14px; font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--b2-accent); }
.result-day { margin: 0 0 10px; font: 400 28px/1.2 var(--serif); }
.result-price { margin: 0 0 24px; font: 500 16px var(--mono); color: var(--b2-accent); }
.result-sub { margin: 0 0 8px; font-size: 13px; color: var(--b2-muted); }
.result-visits { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid rgba(200, 169, 106, .35); }
.result-visits li { padding: 10px 0; border-bottom: 1px solid rgba(200, 169, 106, .35); font: 400 15px var(--mono); }
.result .btn { margin-top: 20px; background: var(--b2-accent); color: var(--b2-accent-text); width: 100%; }

/* SEASONAL */
.seasonal { padding: 96px 0; }
.seasonal-grid { display: grid; gap: 40px; align-items: center; }
.seasonal-media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; }
.seasonal-media img { width: 100%; height: 100%; object-fit: cover; }

/* COMMERCIAL */
.commercial { padding: 0 0 96px; }
.commercial-media { width: 100%; height: clamp(240px, 42vw, 560px); overflow: hidden; margin-bottom: 56px; }
.commercial-media img { width: 100%; height: 100%; object-fit: cover; }
.commercial-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.commercial-list li { padding: 22px 22px 22px 0; border-top: 1px solid rgba(200, 169, 106, .35); }
.commercial-list h3 { margin: 0 0 6px; font: 400 23px/1.2 var(--serif); }
.commercial-list p { margin: 0; color: var(--b2-muted); font-size: 15px; }
.commercial .btn { margin-top: 28px; }

/* PROOF: the report and the licence */
.proof { padding: 96px 0; }
.proof-grid { display: grid; gap: 64px; }
.report { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 22px; max-width: 380px; box-shadow: 0 30px 60px -36px rgba(10, 31, 38, .45); }
.report-head { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.report-mark { width: 36px; height: 36px; flex: none; }
.report-photo { border-radius: 12px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; margin-bottom: 16px; }
.gauges { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 14px; }
.gauge-top { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.gauge-top strong { font: 500 15px var(--mono); }
.gauge-bar { position: relative; height: 8px; border-radius: 99px; background: var(--border); }
.gauge-band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, #5FC6CF 70%, var(--surface)); border-radius: 99px; }
.gauge-dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--text); border: 2px solid var(--surface); }
.gauge-guide { font-size: 12px; color: var(--muted); margin-top: 5px; }
.report-lines { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.report-lines li { padding: 7px 0; border-top: 1px solid var(--border); }
.report-note { font-size: 14px; font-style: italic; margin: 12px 0 0; }
.covers .quote { font: italic 400 20px/1.4 var(--serif); border-left: 2px solid var(--accent); padding-left: 16px; margin: 18px 0; }
.excluded { list-style: none; margin: 0; padding: 0; }
.excluded li { padding: 14px 0; border-top: 1px solid var(--border); display: grid; gap: 2px; }
.excluded li span { font-size: 13px; color: var(--muted); }
.covers-photo { margin-top: 28px; border-radius: 4px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

/* REVIEWS */
.reviews { padding: 0 0 96px; }
.empty-frame { border: 1px dashed var(--border); border-radius: 6px; padding: 40px 24px; text-align: center; color: var(--muted); font: italic 400 20px/1.4 var(--serif); }

/* ASK */
.ask { padding: 96px 0; }
.ask-grid { display: grid; gap: 40px; }
.ask-hours { font: 400 14px/1.7 var(--mono); }
.ask-form { display: grid; gap: 14px; grid-template-columns: 1fr; }
.ask-form label { display: grid; gap: 6px; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ask-form input, .ask-form select, .ask-form textarea {
  font: 400 16px var(--sans); color: var(--b3-text); background: rgba(251, 248, 242, .55);
  border: 1px solid rgba(10, 31, 38, .4); border-radius: 4px; padding: 13px 14px; min-height: 48px; width: 100%;
  letter-spacing: 0; text-transform: none;
}
.ask-form .btn { width: 100%; margin-top: 6px; }
.ask-sent { margin: 0; font-size: 15px; }

/* FOOTER */
.footer { position: relative; overflow: hidden; padding: 72px 0 40px; isolation: isolate; }
.water-footer { opacity: .35; }
.footer-grid { display: grid; gap: 28px; }
.footer-mark { width: 96px; height: 96px; --logo-face: #0A1F26; --logo-ink: #F4EFE6; }
.footer-line { font: 400 24px/1.3 var(--serif); margin: 0 0 18px; }
.footer p { font-size: 14px; }
.footer a { color: var(--b2-text); }
.footer .licence-line a { color: var(--b2-accent); }

/* PHONE: swipe rows. Each card is most of the screen wide, so the next one shows at the edge. */
.swipe { display: flex !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 4px var(--gutter) 18px;
  scroll-padding-left: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.swipe::-webkit-scrollbar { display: none; }
.swipe > li { flex: 0 0 84%; scroll-snap-align: start; }
.facts.swipe > li { flex-basis: 78%; border: 1px solid rgba(200, 169, 106, .35); border-radius: 6px; padding: 24px 22px; }
.facts.swipe > li.fact { grid-template-columns: 1fr; gap: 10px; }
.facts.swipe .fact-mark { grid-row: auto; padding: 0; }
.commercial-list.swipe > li { flex-basis: 78%; border: 1px solid rgba(200, 169, 106, .35); border-radius: 6px; padding: 22px; background: rgba(255, 255, 255, .02); }
.tiers.swipe { padding-top: 16px; }
.swipe-dots { display: flex; justify-content: center; gap: 8px; margin: 2px 0 6px; }
.swipe-dots span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .25; transition: opacity .3s, width .3s; }
.swipe-dots span.on { opacity: .9; width: 18px; border-radius: 3px; }

/* PHONE: stacked cards. Each card lies a little over the one before; tap one and it opens. */
.stack { display: grid; }
.stack-card { position: relative; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  margin-top: -10px; box-shadow: 0 -6px 18px -12px rgba(10, 31, 38, .35); transition: transform .4s var(--ease); }
.stack-card:first-child { margin-top: 0; }
.stack-card summary { list-style: none; cursor: pointer; padding: 20px 52px 20px 20px; position: relative; }
.stack-card summary::-webkit-details-marker { display: none; }
.stack-card summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--accent), var(--accent)) center / 14px 1.5px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 1.5px 14px no-repeat; transition: transform .3s var(--ease); }
.stack-card[open] summary::after { transform: rotate(45deg); }
.stack-card h3 { margin: 0; font: 400 23px/1.2 var(--serif); }
.stack-card strong { font-weight: 600; }
.stack-card p { margin: 0; padding: 0 20px 20px; color: var(--muted); }
.stack-card[open] { z-index: 1; }

/* CALL BAR: pinned on a phone. */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: rgba(10, 31, 38, .94); color: #F4EFE6;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(200, 169, 106, .4);
}
.callbar .btn-brass { background: #C8A96A; color: #0A1F26; }
.callbar:has(.callbar-before) { grid-template-columns: 1fr 1fr auto; }
.callbar-before { align-self: center; color: #C8A96A; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 10px 4px; }

/* Evening: the pool light is on. */
[data-mode="evening"] .topbar { background: color-mix(in srgb, var(--bg) 82%, transparent); }
[data-mode="evening"] .footer-mark { --logo-face: #071519; }
[data-mode="evening"] .tier.is-featured { background: var(--b4); }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@keyframes settle { from { opacity: 0; } to { opacity: 1; } }

/* Tablet and up. Media queries sit below the rules they override. */
@media (min-width: 760px) {
  .swipe { display: grid !important; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .swipe-dots { display: none; }
  .facts.swipe > li, .commercial-list.swipe > li { border: 0; border-radius: 0; padding: 26px 0; background: none; border-top: 1px solid rgba(200, 169, 106, .35); }
  .commercial-list.swipe { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 28px; }
  .people-list.swipe { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .stack-card { margin-top: 0; border-radius: 0; border-width: 1px 0 0; box-shadow: none; background: transparent; }
  .stack-card summary { padding: 18px 0 6px; cursor: default; pointer-events: none; }
  .stack-card summary::after { display: none; }
  .stack-card p { padding: 0 0 18px; }
  .tiers { grid-template-columns: repeat(3, 1fr); }
  .ask-form { grid-template-columns: 1fr 1fr; }
  .ask-form .wide { grid-column: 1 / -1; }
  .seasonal-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .footer-grid { grid-template-columns: auto 1fr; gap: 48px; }
}
@media (min-width: 960px) {
  body { padding-bottom: 0; }
  .callbar { display: none; }
  .nav { display: flex; }
  .topbar-call { display: inline-flex; }
  .why-grid { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 64px; }
  .facts, .facts.swipe { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .fact { grid-template-columns: 1fr; }
  .fact-mark { grid-row: auto; }
  .day-grid { grid-template-columns: 1.2fr 1fr; gap: 64px; }
  .proof-grid { grid-template-columns: 1fr 1fr; gap: 80px; }
  .ask-grid { grid-template-columns: 1fr 1.2fr; gap: 72px; }
}

/* THE MOTION LAYER (wave 2, the founder 2026-11-12: "movement in text ... background motion ... top tier").
   stage.js adds the classes; with scripts off or reduced motion everything simply shows. */
.has-water { position: relative; overflow: hidden; isolation: isolate; }
.water-soft { opacity: .28; }
.block-aqua .water-soft { opacity: .22; mix-blend-mode: soft-light; }
.js .rise .w { display: inline-block; opacity: 0; transform: translateY(.55em) rotate(2deg); filter: blur(6px); transition: opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.js .rise.is-in .w { opacity: 1; transform: none; filter: none; }
.js .kicker.draw::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .1s; }
.js .kicker.draw.is-in::before { transform: scaleX(1); }
.js .kicker.draw { letter-spacing: .32em; transition: letter-spacing 1.3s var(--ease); }
.js .kicker.draw.is-in { letter-spacing: .22em; }
.tilt { transition: transform .5s var(--ease), box-shadow .5s var(--ease); transform-style: preserve-3d; will-change: transform; }
.tilt.is-tilting { transition: transform .08s linear, box-shadow .3s var(--ease); box-shadow: 0 30px 60px -28px rgba(10, 31, 38, .45); }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .16), transparent 45%); opacity: 0; transition: opacity .4s var(--ease); }
.tilt.is-tilting::after { opacity: 1; }
.drift { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .js .rise .w { opacity: 1; transform: none; filter: none; transition: none; }
  .js .kicker.draw::before { transform: none; transition: none; }
  .js .kicker.draw { letter-spacing: .22em; transition: none; }
  .tilt, .tilt.is-tilting { transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .person img, .nav a::after { transition: none; }
}

/* Tier tags, 2026-11-07: a small pill on every feature above the $500 site */
.tier-tagrow { margin: -6px 0 16px; }
.tier-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid currentColor; border-radius: 999px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.tier-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5FC6CF; box-shadow: 0 0 8px rgba(95, 198, 207, .9); }
.block-deep .tier-tag, .hero .tier-tag { color: var(--b2-accent); }
.block-aqua .tier-tag { color: var(--b4-text); }
.hero .tier-tagrow { margin: -6px 0 18px; }

/* What this costs, 2026-11-07: three cards, a swipe row on a phone */
.costs { padding: 96px 0; position: relative; }
.costs .lead { color: var(--b2-muted); }
.cost { display: flex; flex-direction: column; padding: 28px 24px; border: 1px solid rgba(200, 169, 106, .4); border-radius: 6px; background: rgba(255, 255, 255, .03); }
.cost-name { margin: 0 0 6px; font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--b2-accent); }
.cost-price { margin: 0 0 8px; font: 400 clamp(34px, 8vw, 46px)/1 var(--serif); letter-spacing: -.01em; }
.cost-line { margin: 0 0 18px; color: var(--b2-muted); font-size: 15px; }
.cost ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(200, 169, 106, .35); }
.cost ul li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid rgba(200, 169, 106, .25); font-size: 15px; }
.cost ul li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 8px; height: 1px; background: var(--b2-accent); }
.cost-plus { border-color: var(--b2-accent); }
.cost-immersive { border-color: #5FC6CF; box-shadow: 0 0 40px -14px rgba(95, 198, 207, .55); }
.cost-immersive .cost-name { color: #5FC6CF; }
.cost-link { margin-top: 24px; }
.cost-link + .cost-link { margin-left: 10px; }
.ribbon-before { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.swipe-hint { margin: 2px 0 10px; font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-align: center; }
.costs .swipe-hint { color: var(--b2-muted); text-align: center; }
.swipe-arrow { display: inline-block; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.cost-row.swipe > li { flex-basis: 84%; max-width: 340px; }
@media (max-width: 759px) {
  /* The report and the licence become two cards to swipe between. No slider or input sits inside. */
  .proof-grid { display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 340px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 14px; scroll-padding-left: var(--gutter); align-items: start; }
  .proof-grid::-webkit-scrollbar { display: none; }
  .proof-grid > * { scroll-snap-align: start; min-width: 0; }
  .proof-grid .report { max-width: none; }
}
@media (min-width: 760px) {
  .cost-row.swipe { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .cost-row.swipe > li { max-width: none; border: 1px solid rgba(200, 169, 106, .4); border-radius: 6px; padding: 28px 24px; background: rgba(255, 255, 255, .03); }
  .cost-row.swipe > li.cost-plus { border-color: var(--b2-accent); }
  .cost-row.swipe > li.cost-immersive { border-color: #5FC6CF; }
  .swipe-hint { display: none; }
}

/* His circle mark, beside the founder's name (DEMO_RUNBOOK 5a). Brass glow for the pool light. */
.ftv { display: inline-block; vertical-align: middle; margin-left: .45rem; width: 3.1rem; height: 3.1rem; flex: none; border-radius: 50%;
  animation: ftv 4.5s ease-in-out infinite; filter: drop-shadow(0 0 .45rem rgba(200, 169, 106, .65)); transition: transform .35s cubic-bezier(.2, .9, .3, 1.4); }
.ftv img { width: 100%; height: 100%; }
.ftv:hover, .ftv:focus-visible { transform: scale(1.15) rotate(-10deg); }
@keyframes ftv { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) { .ftv, .swipe-arrow { animation: none; } .ftv { transition: none; } }

/* Footer home links, 2026-10-22: the agency and the maker, in the footer's own colour */
.home-links a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; display: inline-block; padding: 0.3em 0; }
.home-links a:hover, .home-links a:focus-visible { text-decoration-thickness: 2px; }

/* =====================================================================================================
   THE THREE PAGES (2026-11-12, the founder: no sharp lines anywhere, everything rounded, at least three
   pages, more movement, elegant luxury). Home, The service and The visit share this layer. Every picture,
   card and coloured block has soft corners; the hero is a rounded stage that holds on screen while the
   page scrolls.
   ===================================================================================================== */
:root { --r: clamp(22px, 2.6vw, 34px); --r-sm: 18px; --inset: clamp(6px, 1.1vw, 14px); }

/* soft corners everywhere */
main > section.block-deep, main > section.block-aqua, main > section.block-brass, .footer {
  border-radius: var(--r); margin: var(--inset); }
.why-media, .seasonal-media, .covers-photo, .person figure, .strip-canvas, .empty-frame,
.tier, .result, .cost, .cost-row.swipe > li, .facts.swipe > li, .commercial-list.swipe > li { border-radius: var(--r); }
.commercial-media { width: auto; margin: 0 0 56px; border-radius: var(--r) var(--r) 0 0; }
.ask-form input, .ask-form select, .ask-form textarea { border-radius: 14px; }
.stack-card { border-radius: var(--r-sm); }
.report { border-radius: var(--r); }
.why-media img, .seasonal-media img, .covers-photo, .person img, .commercial-media img, .door-media img {
  filter: saturate(1.08) contrast(1.03); }
.topbar { border-bottom: 0; box-shadow: 0 10px 30px -24px rgba(10, 31, 38, .5); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.btn-glass { color: #F4EFE6; border-color: rgba(244, 239, 230, .45); background: rgba(244, 239, 230, .08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgba(244, 239, 230, .16); }

/* THE STAGE: a rounded window pinned under the top bar; the section around it is the scroll it runs on */
.scrolly { position: relative; background: var(--bg); }
.js .scrolly { height: 300svh; }
.scrolly-pin { position: relative; padding: var(--inset); }
.js .scrolly-pin { position: sticky; top: 64px; height: calc(100svh - 64px - 76px - 48px); }
.hero-copy .hero-actions { display: none; }   /* on a phone the call bar below already holds Call and Text */
.stage { position: relative; height: 100%; min-height: 420px; border-radius: var(--r); overflow: hidden; background: #0A1F26;
  isolation: isolate; box-shadow: 0 40px 90px -50px rgba(10, 31, 38, .7); color: #F4EFE6; }
.no-js .stage { height: 82svh; }
.stage-frame { position: absolute; inset: 0; transform-origin: 50% 62%; will-change: transform; transform: scale(1.12); }
.stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
  pointer-events: none; animation: breathe 19s ease-in-out infinite alternate; }
.stage-img-b { z-index: 1; opacity: 0; }
@keyframes breathe { from { scale: 1; translate: 0 0; } to { scale: 1.04; translate: -1% -.6%; } }
.hero-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(7, 21, 26, .88) 0%, rgba(7, 21, 26, .45) 32%, transparent 60%),
              linear-gradient(to bottom, rgba(7, 21, 26, .55), transparent 26%); }
.hero-copy { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 0 24px 26px; }
.hero-copy.is-quiet { pointer-events: none; }
.hero-copy .hero-title { color: #F4EFE6; font-size: clamp(44px, 11vw, 112px); margin-bottom: 14px; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hero-copy .hero-lead { color: rgba(244, 239, 230, .86); margin-bottom: 20px; }
.hero-copy .hero-actions { margin-bottom: 0; }
.hero-copy .tier-tag { color: #E3C98E; }
.stage-cap { position: absolute; z-index: 4; left: 16px; right: 64px; top: 16px; padding: 16px 18px; border-radius: var(--r-sm);
  background: linear-gradient(135deg, rgba(10, 31, 38, .72), rgba(10, 31, 38, .5));
  border: 1px solid rgba(244, 239, 230, .14); opacity: 0; pointer-events: none; max-width: 30rem; }
.stage-cap a { pointer-events: auto; color: #E3C98E; text-underline-offset: 3px; }
.stage-label { margin: 0 0 4px; font: 400 clamp(26px, 3.4vw, 40px)/1.05 var(--serif); color: #F4EFE6; }
.stage-text { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(244, 239, 230, .86); }
.stage-cap.is-new .stage-label, .stage-cap.is-new .stage-text { animation: capin 1.1s var(--ease) both; }
.stage-cap.is-new .stage-text { animation-delay: .12s; }
@keyframes capin { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.stage-line { position: absolute; z-index: 5; right: 6px; top: 50%; transform: translateY(-50%); }
.stage-track { position: absolute; right: 19px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: rgba(244, 239, 230, .22); }
.stage-track i { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(#E3C98E, #5FC6CF); transform-origin: top; transform: scaleY(0); }
.stage-rail { position: relative; display: flex; flex-direction: column; }
.stage-rail button { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 30px; min-width: 40px; padding: 0 15px 0 0;
  border: 0; background: none; color: #F4EFE6; cursor: pointer; font: 600 12px/1 var(--sans); letter-spacing: .04em; }
.stage-rail button::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(244, 239, 230, .35);
  box-shadow: 0 0 0 3px rgba(10, 31, 38, .35); transition: background .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.stage-rail button.is-done::after { background: #E3C98E; }
.stage-rail button[aria-current="step"]::after { background: #5FC6CF; transform: scale(1.5); box-shadow: 0 0 0 4px rgba(95, 198, 207, .22), 0 0 16px rgba(95, 198, 207, .9); }
.stage-rail button span { position: absolute; right: 34px; opacity: 0; transform: translateX(6px); white-space: nowrap; pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease); text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.stage-cue { display: none; }

/* under the stage: the licence, the seal and the hours */
.creds { padding: 48px 0; }
.creds-grid { display: grid; gap: 28px; align-items: center; }
.creds .seal { margin: 0; }
.creds .kicker { color: var(--b2-accent); }

/* Inside Brim: three doors to the other pages */
.explore { padding: 88px 0 64px; }
.explore-row { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.door { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; height: 100%; padding: 24px;
  border-radius: var(--r); overflow: hidden; isolation: isolate; text-decoration: none; color: #F4EFE6; background: #0A1F26; }
.door-media { position: absolute; inset: 0; z-index: -2; }
.door-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.door::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(7, 21, 26, .94) 8%, rgba(7, 21, 26, .55) 45%, rgba(7, 21, 26, 0) 72%); }
.door:hover .door-media img, .door:focus-visible .door-media img { transform: scale(1.06); }
.door-k { font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #E3C98E; margin-bottom: 10px; }
.door strong { font: 400 clamp(26px, 2.6vw, 34px)/1.1 var(--serif); margin-bottom: 16px; }
.door-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; font: 600 13px/1 var(--sans);
  background: rgba(244, 239, 230, .12); border: 1px solid rgba(244, 239, 230, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .4s var(--ease), color .4s var(--ease); }
.door-go::after { content: ""; width: 14px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.door:hover .door-go { background: #E3C98E; color: #0A1F26; border-color: #E3C98E; }
.door:hover .door-go::after { width: 22px; }

/* the clips: the swimmer band and the two page openings */
.swim { padding: 72px 0; }
.swim-grid { display: grid; gap: 36px; align-items: center; }
.swim-media, .page-hero-media { margin: 0; position: relative; overflow: hidden; border-radius: var(--r); background: #0A1F26;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.swim-media { aspect-ratio: 720 / 1000; max-height: 78svh; }
.swim-media video, .page-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.swim-copy .btn { margin-top: 8px; }
.page-hero { padding: 56px 0 64px; }
.page-hero-grid { display: grid; gap: 32px; align-items: center; }
.page-title { margin: 0 0 18px; font: 400 clamp(46px, 10vw, 104px)/.98 var(--serif); letter-spacing: -.015em; }
.page-title em { display: block; font-style: italic; color: var(--b2-accent); }
.page-hero-media { aspect-ratio: 16 / 9; }
.page-hero-media.is-tall { aspect-ratio: 4 / 5; max-height: 72svh; }

@media (min-width: 760px) {
  .explore-row.swipe { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .creds-grid { grid-template-columns: auto 1.4fr 1fr; gap: 48px; }
  .creds .now { margin-top: 0; padding-top: 0; border-top: 0; padding-left: 40px; border-left: 1px solid rgba(200, 169, 106, .35); }
  .swim-grid { grid-template-columns: minmax(280px, .8fr) 1fr; gap: 72px; }
  .page-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 64px; }
  .page-hero-grid.is-wide { grid-template-columns: 1fr 1.15fr; }
}
@media (min-width: 960px) {
  .js .scrolly { height: 440svh; }
  .js .scrolly-pin { height: calc(100svh - 64px); }
  .hero-copy .hero-actions { display: flex; }
  .hero-copy { padding: 0 clamp(32px, 5vw, 72px) clamp(32px, 5vh, 56px); max-width: 980px; }
  .stage-cap { left: clamp(28px, 4vw, 56px); top: clamp(28px, 5vh, 48px); padding: 22px 26px; }
  .stage-line { right: 18px; }
  .stage-rail button { min-height: 34px; }
  .stage-rail button:hover span, .stage-rail button:focus-visible span { opacity: 1; transform: none; }
  .stage-cue { display: flex; position: absolute; z-index: 4; right: clamp(32px, 5vw, 72px); bottom: clamp(32px, 5vh, 56px); margin: 0; align-items: center; gap: 12px;
    font: 500 11px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: rgba(244, 239, 230, .8); transition: opacity .6s var(--ease); }
  .stage-cue i { width: 1px; height: 46px; background: rgba(244, 239, 230, .25); position: relative; overflow: hidden; }
  .stage-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #E3C98E; animation: cue 2.2s var(--ease) infinite; }
  .stage-cue.is-gone { opacity: 0; }
  .door { min-height: 520px; }
}
@keyframes cue { to { top: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .stage-img, .stage-cue i::after { animation: none; }
  .stage-cap.is-new .stage-label, .stage-cap.is-new .stage-text { animation: none; }
  .door-media img { transition: none; }
}

/* ---------- THE SPA REEL (2026-11-11) ----------
   The founder, on the live site: the hot tub picture should rotate images, with motion. The service page's opening
   picture is four slides of the same spa through the evening: the friends clip, the jets, blue hour, night. Each
   one drifts slowly (a pull in and a slide) while it shows and keeps drifting as it fades, so nothing snaps. */
.reel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s cubic-bezier(.4, 0, .2, 1); }
.reel-slide.is-on { opacity: 1; z-index: 1; }
.reel-slide.is-leaving { z-index: 0; }
.reel-slide img, .reel-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 50% 60%; will-change: transform; }
.reel-slide.is-on img, .reel-slide.is-leaving img, .reel-slide.is-on video, .reel-slide.is-leaving video {
  animation: reel-drift 8s cubic-bezier(.33, 0, .3, 1) both; }
.reel-slide.is-b.is-on img, .reel-slide.is-b.is-leaving img { animation-name: reel-drift-b; }
@keyframes reel-drift { from { transform: scale(1.03) translate3d(1.2%, 1%, 0); } to { transform: scale(1.13) translate3d(-1.6%, -1.4%, 0); } }
@keyframes reel-drift-b { from { transform: scale(1.14) translate3d(-1.4%, -1.2%, 0); } to { transform: scale(1.04) translate3d(1.4%, .8%, 0); } }
.reel::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(6, 22, 28, .62), rgba(6, 22, 28, 0)); border-radius: 0 0 var(--r) var(--r); }
.reel-bar { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 3; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; color: #F4F1EA; }
.reel-name { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .92; }
.reel-name.is-new { animation: reel-name .7s ease both; }
@keyframes reel-name { from { opacity: 0; transform: translateY(6px); } to { opacity: .92; transform: none; } }
.reel-dots { display: flex; gap: 6px; }
.reel-dots button { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.reel-dots button::before { content: ""; position: absolute; left: 4px; right: 4px; top: 12px; height: 4px; border-radius: 4px;
  background: rgba(244, 241, 234, .3); }
.reel-dots button i { position: absolute; left: 4px; top: 12px; height: 4px; width: 0; border-radius: 4px; background: #F4F1EA; }
.reel-dots button[aria-current="true"] i { animation: reel-fill var(--reel-ms, 6000ms) linear both; }
.reel.is-paused .reel-dots button[aria-current="true"] i { animation-play-state: paused; }
@keyframes reel-fill { to { width: calc(100% - 8px); } }
.reel-dots button:focus-visible { outline: 2px solid #F4F1EA; outline-offset: 2px; border-radius: 8px; }
.reel { touch-action: pan-y; }
@media (prefers-reduced-motion: reduce) {
  .reel-slide { transition: none; }
  .reel-slide img, .reel-slide video { animation: none !important; transform: none; }
  .reel-dots button[aria-current="true"] i { animation: none; width: calc(100% - 8px); }
}

/* the sample dashboard's door (2026-11-12, the dashboard engine): a brass pill, so it reads as a door, not a footnote */
.ribbon-dash { margin-left: 6px; padding: 3px 11px; border: 1px solid currentColor; border-radius: 99px; text-decoration: none; font-weight: 600; }
.ribbon-dash:hover, .ribbon-dash:focus-visible { color: var(--b2); background: var(--b2-text); }