/* Ember — concept site by Nexora.
   One motif: the round, red face of Ember's pressure gauge. It is the disc behind the machine, the mask on
   every photograph, the shape of every button and the bullet in every list. Black ground, off-white type,
   crimson only where the gauge would put it. Albert Sans throughout.
   Motion is transform, opacity and clip-path only; the 360° machine is pre-rendered frames. */

:root {
  --bg: #0a0a0a;
  --surface: #121212;
  --surface-2: #1c1c1c;
  --surface-3: #272727;
  --ink: #efefef;
  --muted: #a3a3a3;
  --accent: #b11226;
  --accent-hi: #c9182f;
  --accent-deep: #8c0e1e;
  --paper: #efefef;
  --paper-2: #e0e0de;
  --paper-ink: #0a0a0a;
  --paper-muted: #525252;
  --m: clamp(16px, 2.4vw, 36px);
  --maxw: 1520px;
  --gap: clamp(112px, 13vw, 220px);
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
  --step-display: clamp(4rem, 1.6rem + 8vw, 9rem);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: 88px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--step-body); line-height: 1.5; font-kerning: normal;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, video, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, ol, ul, figure, fieldset { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.035em; line-height: 1; text-wrap: balance; overflow-wrap: anywhere; }
h2 { font-size: var(--step-head); }
h3 { font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.375rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
p { text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 4px; }
.finishes :focus-visible, .compare :focus-visible { outline-color: var(--paper-ink); }

.frame { width: min(100% - 2 * var(--m), var(--maxw)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -60px; z-index: 100; padding: 12px 18px; background: var(--paper); color: var(--paper-ink); border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- buttons: the gauge's round shape, one size of corner everywhere ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 30px; border-radius: 999px;
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  transition: transform .16s var(--ease), background-color .2s ease, color .2s ease;
}
.btn:active { transform: scale(.97); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-paper { background: var(--paper); color: var(--paper-ink); }
.btn-ink { background: var(--paper-ink); color: var(--paper); }
.btn-sm { min-height: 42px; padding: 0 20px; font-size: .9375rem; }
.btn-block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn-accent:hover { background: var(--accent-hi); }
  .btn-paper:hover { background: #fff; }
  .btn-ink:hover { background: #262626; }
}
.link { display: inline-block; padding-block: 10px; margin-block: -10px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; transition: text-underline-offset .2s var(--ease); }
@media (hover: hover) { .link:hover { text-underline-offset: 9px; } }

/* ---------- nav: wordmark, five words, one action ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .3s ease; }
.nav.is-solid { background: var(--bg); }
.nav-in { width: min(100% - 2 * var(--m), var(--maxw)); margin-inline: auto; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.3125rem; letter-spacing: -0.03em; }
.logo svg { width: 30px; height: 30px; color: var(--ink); }
.nav-links { display: flex; gap: clamp(18px, 2.2vw, 34px); font-size: .9688rem; }
.nav-links a { position: relative; text-decoration: none; padding: 10px 0; }
.nav-links a::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform .3s var(--ease); }
.nav-links a.is-active::after { transform: scale(1); }
@media (max-width: 860px) { .nav-links { display: none; } .nav-in { height: 64px; } }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: clip; display: flex; align-items: center;
  padding: 120px max(var(--m), calc((100% - var(--maxw)) / 2)) 96px;
}
/* the studio: a warm light falls on the dial from above, and the room around it stays dark */
.hero-spot { position: absolute; left: 70%; top: 42%; width: 150svh; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 196, 160, .11), rgba(255, 150, 110, .04) 55%, transparent); pointer-events: none; }

/* the gauge: a lit crimson face with machined grooves, a slow sweep of light, and two rings of ticks that turn */
.hero-disc { position: absolute; width: min(120svh, 96vw); aspect-ratio: 1; left: 77%; top: 55%; translate: -50% -50%; pointer-events: none; }
.hero-disc > * { position: absolute; border-radius: 50%; }
.disc-glow { inset: -16%; background: radial-gradient(closest-side, rgba(214, 26, 50, .42), rgba(177, 18, 38, .14) 58%, transparent); animation: breathe 7s ease-in-out infinite alternate; will-change: opacity; }
@keyframes breathe { from { opacity: .55; } to { opacity: 1; } }
.disc-face { inset: 0; overflow: hidden;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .028) 0 1.5px, transparent 1.5px 7px),
    radial-gradient(circle at 38% 30%, #e42a44 0%, #c4172f 30%, #a3101f 62%, #6d0815 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 -40px 120px rgba(40, 0, 6, .55); }
.disc-sheen { inset: 0; background: conic-gradient(from 210deg, transparent 0 8%, rgba(255, 236, 228, .16) 15%, transparent 24% 58%, rgba(255, 236, 228, .08) 66%, transparent 74%); animation: spin 26s linear infinite; will-change: transform; }
.dial { position: absolute; overflow: visible; pointer-events: none; }
.dial path { fill: none; stroke-linecap: round; }
.dial-out { inset: -7%; width: 114%; height: 114%; animation: spin 150s linear infinite; }
.dial-out path { stroke: rgba(239, 239, 239, .22); stroke-width: 2.4; }
.dial-out path.major { stroke: rgba(239, 239, 239, .42); stroke-width: 3.2; }
.dial-in { inset: 4%; width: 92%; height: 92%; }
.dial-in path { stroke: rgba(255, 255, 255, .26); stroke-width: 5; }
@keyframes spin { to { transform: rotate(360deg); } }
.dial-out { will-change: transform; }

/* embers: the brand's name, rising slowly through the light */
.embers { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.ember { position: absolute; left: var(--x); bottom: -24px; width: var(--s); height: var(--s); opacity: 0; }
.ember i { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, #fff1d6 0, #ffb26b 26%, rgba(255, 92, 40, .85) 46%, rgba(255, 60, 30, 0) 72%); }
.hero.is-off .hero-disc * { animation-play-state: paused; }

.hero-copy { position: relative; z-index: 3; width: min(44%, 640px); }
.hero-title { font-size: var(--step-display); line-height: .9; letter-spacing: -0.05em; white-space: nowrap; }
.hero-sub { margin-top: 32px; font-size: var(--step-lead); line-height: 1.35; max-width: 27ch; }
.hero-cta { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hero-price { margin-top: 24px; color: var(--muted); font-size: var(--step-small); max-width: 42ch; }
.hero-stage { position: absolute; z-index: 1; width: min(50vw, 108svh); aspect-ratio: 1300 / 889; left: 77%; top: 55%; translate: -50% -50%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.hero-stage.is-dragging { cursor: grabbing; }
.hero-stage:focus-visible { outline-offset: -12px; }
.tt-canvas, .tt-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.hero-hint { position: absolute; z-index: 2; left: 77%; bottom: max(28px, 5svh); translate: -50% 0; display: flex; align-items: center; gap: 10px; color: #fff; font-size: var(--step-small); white-space: nowrap; }
.hero-hint svg { width: 22px; height: 22px; }

/* the signature move: the dial opens like a shutter, the rings and glow come up, then the machine settles onto it */
.js:not(.no-anim) .disc-face { clip-path: circle(0% at 50% 50%); animation: shutter 1.1s var(--ease) .05s forwards; }
.js:not(.no-anim) .hero-stage { opacity: 0; scale: 1.08; animation: settle 1.2s var(--ease) .35s forwards; }
.js:not(.no-anim) .hero-hint { opacity: 0; animation: fade .8s ease 1.2s forwards; }
@keyframes shutter { to { clip-path: circle(50% at 50% 50%); } }
@keyframes settle { to { opacity: 1; scale: 1; } }
@keyframes fade { to { opacity: 1; } }

@media (max-width: 860px) {
  .hero { display: grid; grid-template-rows: auto auto auto 1fr; align-items: start; padding: 104px var(--m) 0; }
  .hero-copy { width: auto; grid-row: 1; }
  .hero-title { font-size: clamp(3.5rem, 17vw, 6rem); }
  .hero-sub { margin-top: 20px; font-size: clamp(1.1875rem, 1rem + 1.2vw, 1.375rem); max-width: 32ch; }
  .hero-cta { margin-top: 28px; }
  .hero-price { margin-top: 18px; }
  .hero-disc { grid-row: 2 / 5; grid-column: 1; position: relative; left: auto; top: auto; translate: none; width: 130vw; margin: 9vw 0 0 calc(50% - 65vw); }
  .hero-spot { left: 50%; top: 72%; width: 160vw; }
  .hero-stage { grid-row: 2; grid-column: 1; position: relative; left: auto; top: auto; translate: none; width: 100%; margin-top: 16px; }
  .hero-hint { grid-row: 3; grid-column: 1; position: relative; left: auto; bottom: auto; translate: none; justify-self: center; padding: 6px 0 40px; }
}

/* ---------- key figures ---------- */
.figures { padding-top: clamp(72px, 8vw, 120px); }
.figures-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.fig strong { display: block; font-size: var(--step-head); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fig span { display: block; margin-top: 14px; max-width: 24ch; font-size: 1rem; color: var(--muted); }
@media (max-width: 760px) { .figures-in { grid-template-columns: 1fr 1fr; row-gap: 44px; } }

/* ---------- features: specimens on colour tiles ---------- */
.features { padding-top: var(--gap); }
.features-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.features-head { grid-column: 1 / 4; align-self: start; position: sticky; top: 112px; padding-right: 8px; }
.features-head p { margin-top: 24px; max-width: 30ch; }
.specimens { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; row-gap: 44px; }
.spec-wide { grid-column: span 2; }
/* each part photographed close, edge to edge, on the studio's own dark ground */
.spec-tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #1c1c1c; }
.spec-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: box-shadow .4s ease; }
.spec-wide .spec-tile { aspect-ratio: 8 / 5; }
.spec-tile img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .spec:hover .spec-tile img { scale: 1.05; }
  .spec:hover .spec-tile::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
}
/* the heat-up tile: a timer on the gauge's lit crimson, its ring filling as it comes into view */
.spec-accent .spec-tile { display: grid; place-items: center; background: repeating-radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .03) 0 1.5px, transparent 1.5px 7px), radial-gradient(circle at 50% 38%, #dc2540 0%, #b11226 46%, #6d0815 100%); }
.spec-timer { width: 78%; height: auto; overflow: visible; }
.tm-ticks path { stroke: rgba(255, 255, 255, .5); stroke-width: 3; stroke-linecap: round; }
.tm-track { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 7; }
.tm-ring { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.js:not(.no-anim) .spec-accent .tm-ring { stroke-dashoffset: 100; transition: stroke-dashoffset 2.6s cubic-bezier(.4, 0, .2, 1) .5s; }
.js:not(.no-anim) .spec-accent.in .tm-ring { stroke-dashoffset: 0; }
.tm-big { fill: #fff; font: 600 46px 'Albert Sans', system-ui, sans-serif; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.tm-small { fill: rgba(255, 255, 255, .82); font: 500 13px 'Albert Sans', system-ui, sans-serif; }
.spec figcaption { margin-top: 20px; padding-right: 12px; }
.spec figcaption p { margin-top: 8px; font-size: 1rem; color: var(--muted); max-width: 40ch; }
@media (max-width: 960px) {
  .features-head { grid-column: 1 / -1; position: static; margin-bottom: 48px; }
  .specimens { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 32px; }
  .spec-wide { grid-column: 1 / -1; order: -1; }
  .spec figcaption h3 { font-size: 1.0625rem; }
  .spec figcaption p { font-size: .9375rem; }
}

/* ---------- film: looking down into the basket ---------- */
.film { padding-top: var(--gap); }
.film-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.film-copy { grid-column: 1 / 6; }
.film-copy p { margin-top: 28px; font-size: var(--step-lead); line-height: 1.35; max-width: 26ch; }
.film-circle { grid-column: 6 / 13; justify-self: end; width: min(100%, 80svh); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #24150f; }
.film-video { width: 100%; height: 100%; object-fit: cover; scale: 1.02; }
@media (max-width: 860px) {
  .film-copy, .film-circle { grid-column: 1 / -1; }
  .film-circle { justify-self: center; width: min(100%, 520px); margin-top: 48px; }
}

/* ---------- pressure profiles ---------- */
.profiles { position: relative; overflow: clip; margin-top: var(--gap); padding-block: clamp(80px, 9vw, 140px); background: rgba(22, 20, 20, .72); }
.profiles-grid { position: relative; z-index: 1; }
.profiles-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.profiles-copy { grid-column: 1 / 6; }
.sec-lead { margin-top: 24px; max-width: 34ch; }
.tabs { position: relative; display: inline-flex; gap: 4px; padding: 5px; margin-top: 40px; border-radius: 999px; background: var(--surface-3); }
.tab { position: relative; z-index: 1; min-height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 500; transition: color .3s ease; }
.tabs:not(.has-pill) .tab.is-on { background: var(--paper); }
.tab.is-on { color: var(--paper-ink); }
.pill { position: absolute; left: 0; top: 0; border-radius: 999px; background: var(--paper); pointer-events: none; }
.pill.ready { transition: transform .45s var(--ease), width .45s var(--ease); }
.profile-card { margin-top: 28px; padding: clamp(24px, 3vw, 36px); background: rgba(32, 30, 30, .78); }
.profile-card h3 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); font-weight: 600; letter-spacing: -0.03em; }
.profile-card > p { margin-top: 14px; max-width: 46ch; }
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 24px; }
.notes div { padding: 14px 16px; background: rgba(255, 255, 255, .06); }
.notes dt { font-size: .875rem; color: var(--muted); }
.notes dd { margin-top: 4px; font-weight: 500; }
.chart-card { grid-column: 7 / 13; padding: clamp(20px, 2.6vw, 36px); background: rgba(30, 28, 28, .62); }
.chart { width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.chart-grid path { stroke: rgba(239, 239, 239, .09); stroke-width: 1; fill: none; }
.chart-axis text { fill: var(--muted); font-size: 12px; font-family: inherit; font-variant-numeric: tabular-nums; }
.chart-area { fill: rgba(177, 18, 38, .26); transition: d .5s var(--ease); }
.chart-line { fill: none; stroke: #e0283f; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; transition: d .5s var(--ease); }
.chart-line.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chart-hover { opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.chart.is-hover .chart-hover { opacity: 1; }
.ch-x { stroke: rgba(239, 239, 239, .35); stroke-width: 1; }
.ch-dot { fill: var(--paper); stroke: var(--accent); stroke-width: 3; }
.ch-tip rect { fill: var(--paper); }
.ch-t1 { fill: var(--paper-ink); font-size: 13px; font-weight: 600; font-family: inherit; }
.ch-t2 { fill: var(--paper-muted); font-size: 12px; font-family: inherit; }
.chart-hit { fill: transparent; cursor: crosshair; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 24px; }
.steps li { padding: 14px 16px; background: rgba(255, 255, 255, .055); font-size: .9375rem; line-height: 1.35; }
.steps time { display: block; color: var(--muted); font-variant-numeric: tabular-nums; }
.steps b { display: block; margin-top: 6px; font-weight: 500; }
.steps span { display: block; margin-top: 4px; color: var(--muted); }
.steps.swap li { animation: swap .5s var(--ease) both; }
.steps.swap li:nth-child(2) { animation-delay: .04s; } .steps.swap li:nth-child(3) { animation-delay: .08s; }
.steps.swap li:nth-child(4) { animation-delay: .12s; } .steps.swap li:nth-child(5) { animation-delay: .16s; } .steps.swap li:nth-child(6) { animation-delay: .2s; }
@keyframes swap { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 960px) {
  .profiles-copy, .chart-card { grid-column: 1 / -1; }
  .chart-card { margin-top: 32px; }
}
@media (max-width: 560px) { .steps { grid-template-columns: 1fr 1fr; } .notes { grid-template-columns: 1fr 1fr 1fr; } .tab { padding: 0 16px; } }

/* ---------- finishes: one square plate, spare text ---------- */
.finishes { padding-block: clamp(80px, 9vw, 140px); background: var(--paper); color: var(--paper-ink); }
.finishes-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 96px); min-height: 88svh; }
.finish-plate { position: relative; align-self: center; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); }
.plate-disc { position: absolute; left: 50%; top: 50%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: #f7f7f6; translate: -50% -50%; }
.finish-img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; opacity: 0; transition: opacity .55s ease; }
.finish-img.is-on { opacity: 1; }
.finish-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding-block: 12px; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.swatch { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-size: 1.125rem; color: var(--paper-muted); transition: color .25s ease; }
.swatch::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .35s var(--ease); }
.swatch.is-on { color: var(--paper-ink); font-weight: 500; }
.swatch.is-on::before { transform: scale(1); }
@media (hover: hover) { .swatch:hover { color: var(--paper-ink); } }
.finish-desc { margin-top: 40px; font-size: var(--step-lead); line-height: 1.35; max-width: 30ch; }
.finish-note { margin-top: 18px; max-width: 40ch; color: var(--paper-muted); }
.finish-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cell { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 0 22px; border-radius: 999px; text-align: center; text-decoration: none; font-weight: 500; transition: transform .16s var(--ease), background-color .2s ease; }
.cell:active { transform: scale(.97); }
.cell-ink { background: var(--paper-ink); color: var(--paper); }
.cell-tone { background: var(--paper-2); color: var(--paper-ink); }
@media (hover: hover) and (pointer: fine) { .cell-ink:hover { background: #262626; } .cell-tone:hover { background: #d3d3d1; } }
@media (max-width: 860px) {
  .finishes-grid { grid-template-columns: 1fr; min-height: 0; }
  .finish-copy { gap: 32px; padding-top: 28px; }
  .swatch { font-size: 1.0625rem; }
  .finish-desc { margin-top: 24px; }
  .finish-actions { grid-template-columns: 1fr; }
  .cell { min-height: 60px; }
}

/* ---------- bean to cup: an accordion from roast to crema ---------- */
.journey { padding-top: var(--gap); }
.journey-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.journey-intro h2 { grid-column: 1 / 6; }
.journey-intro p { grid-column: 7 / 12; max-width: 44ch; }
.acc { display: flex; height: clamp(440px, 40vw, 560px); margin-top: 64px; container-type: inline-size; }
.acc-p { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--c); color: var(--ci); transition: flex-grow .5s var(--ease-io); }
.acc-p.is-open { flex-grow: 6; }
.acc-b { position: absolute; inset: 0; width: 100%; text-align: left; }
.acc-b span { position: absolute; left: 22px; bottom: 26px; writing-mode: vertical-rl; rotate: 180deg; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
@media (hover: hover) { .acc-p:not(.is-open) .acc-b:hover span { translate: 0 -6px; } .acc-b span { transition: translate .3s var(--ease); } }
.acc-p.is-open .acc-b { visibility: hidden; }
.acc-c { position: absolute; inset: 0 auto 0 0; width: 60cqi; display: grid; grid-template-columns: 1fr 1fr; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.acc-p.is-open .acc-c { opacity: 1; pointer-events: auto; transition: opacity .45s ease .22s; }
.acc-text { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 3vw, 40px); }
.acc-text h3 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 600; letter-spacing: -0.035em; }
.acc-text p { max-width: 34ch; font-size: 1.0625rem; }
.acc-c img { align-self: center; justify-self: center; width: min(84%, 420px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
@media (max-width: 860px) {
  .journey-intro h2, .journey-intro p { grid-column: 1 / -1; }
  .journey-intro p { margin-top: 20px; }
  .acc { flex-direction: column; height: auto; margin-top: 40px; }
  .acc-p { flex: none; }
  .acc-b { position: relative; display: flex; align-items: center; height: 64px; padding: 0 20px; }
  .acc-b span { position: static; writing-mode: horizontal-tb; rotate: none; font-size: 1.125rem; }
  .acc-p.is-open .acc-b { display: none; }
  .acc-c { position: relative; width: auto; display: none; grid-template-columns: 1fr; }
  .acc-p.is-open .acc-c { display: grid; }
  .acc-text { gap: 14px; padding: 24px 20px 8px; }
  .acc-c img { width: min(72%, 320px); margin: 20px 0 28px; }
}

/* ---------- specifications: set like a menu ---------- */
.specs { padding-top: var(--gap); }
.spec-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 96px); }
.spec-group header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: clamp(56px, 6vw, 96px) 0 28px; }
.spec-group h3 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 3.125rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.spec-group header span { font-size: 1rem; color: var(--muted); white-space: nowrap; }
.spec-group dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 12px 0; }
.spec-group dt { display: flex; align-items: baseline; gap: 14px; font-weight: 500; }
.spec-group dt::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); translate: 0 -2px; }
.spec-group dd { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .spec-cols { grid-template-columns: 1fr; }
  .spec-group header { padding-top: 48px; }
}
@media (max-width: 480px) { .spec-group dl div { flex-direction: column; gap: 2px; } .spec-group dd { text-align: left; padding-left: 23px; color: var(--muted); } }

/* ---------- compare ---------- */
.compare { margin-top: var(--gap); padding-block: clamp(80px, 9vw, 140px); background: var(--paper); color: var(--paper-ink); }
.compare-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.compare-head h2 { grid-column: 1 / 7; }
.compare-head p { grid-column: 7 / 11; max-width: 36ch; }
.diff-toggle { grid-column: 11 / 13; justify-self: end; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 1rem; white-space: nowrap; }
.diff-toggle input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: #c7c7c5; cursor: pointer; transition: background-color .25s ease; }
.diff-toggle input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.diff-toggle input:checked { background: var(--accent); }
.diff-toggle input:checked::after { transform: translateX(18px); }
.table-scroll { margin-top: 56px; overflow-x: auto; }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cmp th, .cmp td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid #cfcfcd; }
.cmp thead th { padding-block: 20px; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); font-weight: 600; letter-spacing: -0.02em; border-bottom: 0; }
.cmp thead th.hot { background: var(--accent); color: #fff; }
.cmp tbody th { font-weight: 500; color: var(--paper-muted); width: 24%; }
.cmp td.hot { background: var(--paper-2); }
.cmp td.no { color: var(--paper-muted); }
.cmp .row-price td { font-weight: 600; font-size: 1.125rem; }
.cmp.only-diff tr.same { display: none; }
@media (max-width: 960px) {
  .compare-head h2, .compare-head p { grid-column: 1 / -1; }
  .compare-head p { margin-top: 18px; }
  .diff-toggle { grid-column: 1 / -1; justify-self: start; margin-top: 20px; }
}
@media (max-width: 640px) {
  .table-scroll { margin-top: 36px; overflow: visible; }
  .cmp { min-width: 0; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp tr { padding: 18px 0 14px; border-bottom: 1px solid #cfcfcd; }
  .cmp th, .cmp td { padding: 0; border: 0; }
  .cmp tbody th { width: auto; margin-bottom: 10px; color: var(--paper-ink); font-weight: 600; }
  .cmp td { display: flex; justify-content: space-between; gap: 16px; padding: 7px 12px; }
  .cmp td::before { content: attr(data-label); color: var(--paper-muted); }
  .cmp td.hot::before { color: var(--accent); font-weight: 600; }
  .cmp td.hot { background: var(--paper-2); }
}

/* ---------- questions: index cards in a drawer ---------- */
.faq { padding-top: var(--gap); }
.faq-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.faq-head, .cards { grid-column: 3 / 11; }
.faq-head p { margin-top: 22px; max-width: 46ch; }
.faq-head a { text-underline-offset: 4px; }
.cards { margin-top: 64px; padding-top: 40px; }
.card { position: relative; z-index: calc(var(--i) + 1); --cc: var(--surface-2); background: var(--cc); }
.card:nth-child(3n + 2) { --cc: var(--surface-3); }
.card:nth-child(3n + 3) { --cc: #333; }
.card + .card { margin-top: -22px; }
.card summary { display: block; list-style: none; cursor: pointer; padding: 28px clamp(20px, 3vw, 36px) 64px; }
.card summary::-webkit-details-marker { display: none; }
.card-tab { position: absolute; top: -40px; left: calc(var(--i) * (100% - 200px) / 5); width: 200px; height: 41px; display: flex; align-items: center; justify-content: center; background: var(--cc); font-size: 1rem; font-weight: 500; clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 100%, 0 100%); }
.card[open] .card-tab { color: #fff; background: var(--accent); }
.card-q { display: block; font-size: clamp(1.1875rem, 1.05rem + .4vw, 1.375rem); font-weight: 500; letter-spacing: -0.015em; }
.card p { margin-top: -38px; padding: 0 clamp(20px, 3vw, 36px) 72px; max-width: calc(50ch + 72px); }
.card[open] p { animation: open .45s var(--ease) both; }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } }
.card summary:focus-visible { outline-offset: -6px; }
@media (max-width: 960px) { .faq-head, .cards { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .card-tab { width: 120px; left: calc(var(--i) * (100% - 120px) / 5); font-size: .9375rem; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 100%, 0 100%); }
  .card summary { padding: 24px 20px 56px; }
  .card p { padding: 0 20px 64px; margin-top: -30px; font-size: 1rem; }
}

/* ---------- reserve: the action tile ---------- */
.reserve { padding-top: var(--gap); }
.tiles { display: grid; grid-template-columns: minmax(0, 1fr) min(1040px, 100% - 2 * var(--m) - 160px) minmax(0, 1fr); gap: 12px; }
.tile-side { min-height: 100%; overflow: hidden; }
.tile-photo img { width: 100%; height: 100%; object-fit: cover; }
.tile-flat { background: var(--paper); }
.tile-main { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(28px, 4vw, 56px); padding: clamp(28px, 4vw, 56px); color: #fff;
  background: repeating-radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .025) 0 1.5px, transparent 1.5px 7px), radial-gradient(circle at 85% 10%, #d8213b 0%, #b11226 42%, #7d0b19 100%); }
.tile-main > :not(.tile-dial) { position: relative; z-index: 1; }
.tile-main h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); }
.reserve-note { margin-top: 16px; max-width: 34ch; }
.rf-preview { display: grid; place-items: center; width: min(240px, 70%); aspect-ratio: 1; margin: 32px 0; border-radius: 50%; background: var(--paper); }
.rf-preview img { width: 88%; height: 88%; object-fit: contain; }
.field-group + .field-group { margin-top: 28px; }
.field-group legend { margin-bottom: 12px; font-size: .9375rem; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input, .extra input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--accent-deep); font-weight: 500; transition: background-color .2s ease, color .2s ease; }
.chip input:checked + span { background: var(--paper); color: var(--paper-ink); }
.chip input:focus-visible + span, .extra input:focus-visible ~ span { outline: 2px solid #fff; outline-offset: 3px; }
.extra { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 20px; background: var(--accent-deep); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.extra + .extra { margin-top: 6px; }
.extra::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 7px var(--accent-deep); transition: box-shadow .25s var(--ease), background-color .2s ease; }
.extra:has(input:checked) { background: var(--paper); color: var(--paper-ink); }
.extra:has(input:checked)::before { background: var(--accent); box-shadow: inset 0 0 0 5px var(--paper); }
.extra b { display: block; font-weight: 500; }
.extra small { display: block; margin-top: 2px; font-size: .875rem; opacity: .85; }
.extra em { font-style: normal; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.summary { padding: 20px 22px; background: var(--paper-ink); color: var(--paper); font-variant-numeric: tabular-nums; }
.summary p { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.summary strong { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; }
.summary-sub { margin-top: 6px; font-size: .9375rem; color: var(--muted); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0 14px; }
.field span { display: block; margin-bottom: 8px; font-size: .9375rem; font-weight: 500; }
.field input { width: 100%; height: 54px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--paper); color: var(--paper-ink); font: inherit; font-size: 16px; }
.field input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--paper-ink); }
.form-note { margin-top: 14px; padding: 14px 18px; background: var(--paper); color: var(--paper-ink); font-size: .9375rem; }
@media (max-width: 960px) {
  .tiles { grid-template-columns: 1fr 1fr; padding-inline: var(--m); gap: 8px; }
  .tile-main { grid-column: 1 / -1; grid-row: 1; grid-template-columns: 1fr; gap: 28px; }
  .tile-side { height: 140px; min-height: 0; }
  .rf-preview { margin: 24px 0; }
}
@media (max-width: 480px) { .fields { grid-template-columns: 1fr; } .tile-main { padding: 28px 20px; } }

/* ---------- footer: the name, built from blocks ---------- */
.foot { padding: clamp(96px, 9vw, 150px) 0 40px; }
.mark-built { display: flex; align-items: flex-end; gap: 4px; height: 34svh; min-height: 220px; max-height: 360px; text-decoration: none; }
.mark-built span { flex: 1 1 0; height: var(--h); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: var(--c); color: var(--bg); font-size: min(15vw, 24svh, 260px); font-weight: 600; line-height: .76; letter-spacing: -0.05em; transition: height .6s var(--ease); }
@media (hover: hover) and (pointer: fine) { .mark-built:hover span:nth-child(odd) { height: calc(var(--h) - 6%); } }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 56px; }
.foot-grid nav, .foot-contact { display: flex; flex-direction: column; gap: 4px; }
.foot-grid nav { grid-column: span 3; }
.foot-contact { grid-column: 9 / 13; }
.foot-grid h3 { margin-bottom: 10px; font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.foot-grid a, .foot-grid span { padding: 5px 0; font-size: .9688rem; text-decoration: none; }
.foot-grid span { color: var(--muted); }
@media (hover: hover) { .foot-grid a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 64px; }
.foot-base p { max-width: 70ch; font-size: .9375rem; color: var(--muted); }
.credits { margin-top: 24px; max-width: 92ch; font-size: .8125rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 860px) {
  .mark-built { height: 22svh; min-height: 150px; }
  .foot-grid nav { grid-column: span 6; }
  .foot-contact { grid-column: 1 / -1; margin-top: 32px; }
  .foot-base { flex-direction: column; align-items: flex-start; }
}

/* ---------- entrances: heading, then text, then picture ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.no-anim .reveal, .js.no-anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.hero .reveal { transform: translateY(16px); }
@media (max-width: 640px) { .js .reveal { transform: translateY(14px); transition-duration: .6s; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .disc-face, .js .hero-stage, .js .hero-hint { animation: none !important; clip-path: none !important; opacity: 1 !important; scale: 1 !important; }
  .disc-glow, .disc-sheen, .dial, .am-orb, .bg-dial .needle-w { animation: none !important; }
  .embers { display: none; }
  .acc-p { transition: none; }
  .pill.ready, .chart-line, .chart-area { transition: none; }
}
.no-anim .disc-face, .no-anim .hero-stage, .no-anim .hero-hint { animation: none !important; clip-path: none !important; opacity: 1 !important; scale: 1 !important; }


/* ---------- the room behind everything: slow warm light, a few embers, and film grain ---------- */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.am-orb { position: absolute; width: 72vmax; aspect-ratio: 1; border-radius: 50%; will-change: transform; }
.am-a { left: -18vmax; top: 18vh; background: radial-gradient(closest-side, rgba(177, 18, 38, .22), rgba(177, 18, 38, .07) 55%, transparent); animation: drift-a 46s ease-in-out infinite alternate; }
.am-b { right: -22vmax; top: -16vmax; background: radial-gradient(closest-side, rgba(196, 118, 64, .14), rgba(196, 118, 64, .04) 55%, transparent); animation: drift-b 58s ease-in-out infinite alternate; }
@keyframes drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(18vw, -12vh, 0) scale(1.12); } }
@keyframes drift-b { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-16vw, 22vh, 0) scale(.92); } }
.embers-am { z-index: 0; }
.ambient::after { content: ""; position: absolute; inset: 0; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (max-width: 760px) { .am-orb { width: 110vmax; } }

/* a large, faint gauge turning behind the pressure chart, and a smaller one in the reservation tile */
.bg-dial { right: -6vw; top: 50%; width: min(64vw, 960px); height: auto; aspect-ratio: 1; translate: 0 -50%; z-index: 0; }
.bg-dial path { stroke: rgba(239, 239, 239, .07); stroke-width: 2.4; }
.bg-dial path.major { stroke: rgba(224, 40, 63, .38); stroke-width: 4; }
.bg-dial text { fill: rgba(239, 239, 239, .2); font: 600 38px 'Albert Sans', system-ui, sans-serif; }
.bg-dial .needle { transform-box: view-box; transform-origin: 50% 50%; transform: rotate(var(--a, -135deg)); transition: transform 1.4s cubic-bezier(.34, 1.36, .5, 1); }
.bg-dial.is-hover .needle { transition-duration: .35s; }
.bg-dial .needle-w { transform-box: view-box; transform-origin: 50% 50%; animation: quiver 2.6s ease-in-out infinite alternate; }
@keyframes quiver { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }
.bg-dial .needle-line { stroke: rgba(224, 40, 63, .34); stroke-width: 8; }
.bg-dial .hub { fill: rgba(224, 40, 63, .4); }
.tile-dial { right: -26%; top: -38%; width: 72%; height: auto; aspect-ratio: 1; opacity: .9; animation: spin 180s linear infinite; z-index: 0; }
.tile-dial path { stroke: rgba(255, 255, 255, .12); stroke-width: 2.4; }
.tile-dial path.major { stroke: rgba(255, 255, 255, .26); stroke-width: 3.2; }
@media (max-width: 960px) { .bg-dial { right: -40vw; width: 120vw; opacity: .4; } .tile-dial { width: 120%; right: -50%; top: -24%; } }
.profiles.is-off .bg-dial *, .reserve.is-off .tile-dial { animation-play-state: paused; }