@font-face { font-family: 'Formula Oswald'; src: url('./assets/formula-oswald.woff2') format('woff2'); font-style: normal; font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Formula Inter'; src: url('./assets/formula-inter.woff2') format('woff2'); font-style: normal; font-weight: 300 700; font-display: swap; }

/* No hairlines on this page. Sections are told apart by space and by the tone of the band they sit
   in; groups inside a section by space alone. Secondary text is a warm grey, not a faded black. */
:root {
  --ink: #11100f;
  --ink-soft: #1a1917;
  --cream: #e9dfcf;
  --cream-muted: rgba(233, 223, 207, .64);
  --paper: #f0ebe2;
  --paper-deep: #e6ded1;
  --muted: #6d655c;
  --bronze: #9b7251;
  --display: 'Formula Oswald', 'Arial Narrow', sans-serif;
  --text: 'Formula Inter', Inter, Arial, sans-serif;
  --shell: min(92vw, 1380px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
/* Components below set their own display (the menus are flex), which would otherwise beat the
   browser's own rule for the hidden attribute and leave a closed menu on screen. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--text); font-size: 1.0625rem; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; }
/* height: auto so the width/height attributes reserve each image's space before it loads, and
   a menu link's scroll is not cut short by images growing above its target. */
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--bronze); color: var(--paper); }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 100; padding: .8rem 1rem; background: var(--cream); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.shell { width: var(--shell); margin-inline: auto; }
/* Clear the fixed header when a menu link lands on a section. */
main [id] { scroll-margin-top: 76px; }

.band-paper { background: var(--paper); }
.band-paper-deep { background: var(--paper-deep); }
.band-ink { color: var(--cream); background: var(--ink); }
.band-ink-soft { color: var(--cream); background: var(--ink-soft); }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 80px; padding-inline: 3.5vw; color: #fff; transition: height .45s var(--ease), background .45s var(--ease), transform .45s var(--ease); }
/* Slides away while the reader scrolls down and returns the moment they scroll up. */
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.scrolled { height: 64px; color: var(--cream); background: rgba(17, 16, 15, .84); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The official lockup. Its box is much taller than the wordmark (the letters fill the middle 44%), so
   it is sized by height to put the wordmark near the menu's own type size. */
.brand { display: inline-flex; width: fit-content; }
.brand img { width: auto; height: 34px; }
.site-nav { display: flex; align-items: center; gap: 2rem; font-size: .92rem; font-weight: 500; }
.site-nav > a, .eco-trigger { opacity: .82; transition: opacity .25s ease; }
.site-nav > a:hover, .eco-trigger:hover, .eco-trigger[aria-expanded="true"] { opacity: 1; }

/* Ecosystem menu: one dark surface under the bar, whatever the bar is over. */
.eco-menu { position: relative; }
.eco-trigger { display: inline-flex; align-items: center; gap: .4rem; padding: 0; border: 0; color: inherit; background: none; font: inherit; cursor: pointer; }
.eco-trigger svg { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.eco-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.eco-panel { position: absolute; top: calc(100% + 22px); left: 50%; display: flex; gap: 1.2rem; width: min(580px, calc(100vw - 4rem)); padding: 1rem; border-radius: 22px; color: var(--cream); background: #15120f; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .75); transform: translateX(-50%); animation: panelIn .3s var(--ease); }
.eco-panel::before { content: ''; position: absolute; inset: -22px 0 auto; height: 22px; }
@keyframes panelIn { from { opacity: 0; transform: translate(-50%, -6px); } }
.eco-products { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; }
.eco-products a { display: flex; gap: .9rem; padding: .8rem .9rem; border-radius: 14px; transition: background .25s ease; }
.eco-products a:hover, .eco-explore:hover { background: rgba(233, 223, 207, .06); }
.eco-icon svg { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--bronze); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.eco-name { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-family: var(--display); font-size: 1.05rem; font-weight: 300; line-height: 1.1; letter-spacing: -.01em; }
.eco-name b { font-weight: 700; }
.eco-short { display: block; margin-top: .35rem; font-size: .86rem; line-height: 1.4; color: var(--cream-muted); }
.eco-explore { width: 190px; flex: none; padding: .7rem; border-radius: 16px; transition: background .25s ease; }
.eco-explore-media { display: block; aspect-ratio: 4 / 3; margin-bottom: .8rem; overflow: hidden; border-radius: 12px; background: var(--paper-deep); }
.eco-explore-media img, .eco-explore-media video { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(.9); transition: transform .7s var(--ease); }
.eco-explore:hover .eco-explore-media img, .eco-explore:hover .eco-explore-media video { transform: scale(.96); }
.badge { display: inline-block; padding: .18rem .55rem; border-radius: 999px; color: #c79b74; background: rgba(155, 114, 81, .2); font-family: var(--text); font-size: .72rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; }

/* Phone menu */
.menu-toggle { display: none; position: relative; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); cursor: pointer; }
.menu-toggle i { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease); }
.menu-toggle i:first-of-type { top: 16px; }.menu-toggle i:last-of-type { top: 22px; }
.menu-toggle[aria-expanded="true"] i:first-of-type { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] i:last-of-type { transform: translateY(-3px) rotate(-45deg); }
.phone-menu { position: fixed; inset: 0; z-index: 29; display: flex; flex-direction: column; gap: 2rem; padding: 88px 1.25rem 2rem; overflow-y: auto; color: var(--cream); background: var(--ink); animation: fadeIn .3s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } }
.phone-menu nav { display: grid; gap: .3rem; }
.phone-menu nav a { font-family: var(--display); font-size: 2.3rem; font-weight: 300; line-height: 1.2; letter-spacing: -.01em; }
.phone-menu-products { display: grid; gap: .5rem; }
.phone-menu-products a { padding: 1rem 1.1rem; border-radius: 18px; background: rgba(233, 223, 207, .06); }
.phone-menu .button-light { margin-top: auto; align-self: flex-start; }
html.menu-open { overflow: hidden; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 1rem; }
.header-cta { padding: .5rem 1rem; border-radius: 999px; color: var(--ink); background: var(--cream); font-size: .86rem; font-weight: 500; transition: background .2s ease; }
.header-cta:hover { background: #fff; }

/* Type */
h1, h2, h3 { margin: 0; }
.hero h1, .contact h2 { font-family: var(--display); font-size: clamp(3.4rem, 7vw, 6.5rem); font-weight: 300; line-height: .94; letter-spacing: -.02em; }
.section-head h2, .object-intro h2, .details-intro h2, .benefits h2, .story h2, .compare h2, .delivery h2 { max-width: 26ch; font-family: var(--display); font-size: clamp(2.25rem, 4.4vw, 4.4rem); font-weight: 300; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
h1 strong, h2 strong, h3 strong { font: inherit; font-weight: 700; }
/* The light phrase takes one line and the bold phrase the next, as in the hero, so the weight
   change never lands mid-line wherever the browser happens to wrap. */
.section-head h2 strong, .object-intro h2 strong, .details-intro h2 strong, .benefits h2 strong, .story h2 strong, .compare h2 strong, .delivery h2 strong { display: block; }
.section-lede { max-width: 54ch; margin: 1.4rem 0 0; font-size: 1.1rem; line-height: 1.65; color: var(--muted); }
.band-ink .section-lede, .band-ink-soft .section-lede { color: var(--cream-muted); }
.section-lede + .section-lede { margin-top: 1rem; }
/* Split heading, after the live site's Specs and Ecosystem heads: the statement on the left and the section's own
   copy in a column beside it, bottom-aligned, so a wide screen is not left half empty. */
.split-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 29rem); column-gap: clamp(3rem, 7vw, 8rem); align-items: end; }
.split-head > h2 { grid-column: 1; }
.split-aside { grid-column: 2; margin: 0; padding: 0 0 .5rem; }
.split-aside .section-lede { max-width: 46ch; margin-top: 0; }
/* Delivery process: three cards that rise and darken from Study to Install. Each carries its number oversized and
   faded, cropped by the card's edge, so the sequence is felt rather than labelled. */
.process { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 3.2rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.process li { position: relative; overflow: hidden; counter-increment: step; padding: 1.8rem 1.9rem; border-radius: 26px; color: var(--ink); background: var(--paper-deep); }
.process li:nth-child(1) { min-height: 12rem; }
.process li:nth-child(2) { min-height: 15.5rem; background: #dcd1c1; }
.process li:nth-child(3) { min-height: 19rem; color: var(--cream); background: var(--ink); }
.process h3 { margin: 0; font-family: var(--display); font-size: clamp(2rem, 2.8vw, 2.8rem); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; }
.process p { max-width: 30ch; margin: .6rem 0 0; font-size: 1.02rem; line-height: 1.55; color: var(--muted); text-wrap: balance; }
.process li:nth-child(3) p { color: var(--cream-muted); }
.process li::after { content: counter(step); position: absolute; right: -.6rem; bottom: -3.2rem; font-family: var(--display); font-size: 15rem; font-weight: 700; line-height: 1; color: rgba(17, 16, 15, .06); pointer-events: none; }
.process li:nth-child(3)::after { color: rgba(233, 223, 207, .07); }
.process h3, .process p { position: relative; z-index: 1; }

/* Hero */
.hero { position: relative; min-height: 100dvh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: var(--ink); }
.hero-media { position: absolute; inset: 0; }
.hero-media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; transform: scale(1.025); animation: settle 2.3s var(--ease) both; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,6,5,.7) 0%, rgba(6,6,5,.26) 45%, rgba(6,6,5,.04) 78%), linear-gradient(0deg, rgba(6,6,5,.46), transparent 50%); }
.hero-copy { position: relative; z-index: 2; width: min(760px, 86vw); margin: 0 0 9vh 6vw; }
.hero-intro { max-width: 40ch; margin: 1.8rem 0 0; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.55; color: rgba(255, 255, 255, .82); }
@keyframes settle { from { transform: scale(1.09); filter: brightness(.72); } to { transform: scale(1.025); filter: brightness(1); } }
/* Scroll cue, ported from the live hero: pinned to the foot of the first screenful rather than the section,
   blended by difference so it reads on dark video and on light alike. Entrance and glide use the live timing
   (20px lift over 2s from 0.7s; the dot travels 10px and back every 1.8s). */
.scroll-cue { position: absolute; left: 50%; top: calc(100svh - 3.75rem); z-index: 3; margin-left: -10px; pointer-events: none; }
.scroll-cue-mouse { display: flex; align-items: flex-start; justify-content: center; width: 20px; height: 36px; padding: 4px; border: 1px solid rgba(233, 223, 207, .7); border-radius: 999px; mix-blend-mode: difference; animation: cueIn 2s cubic-bezier(.44, 0, .56, 1) .7s both; }
.scroll-cue-mouse span { width: 4px; height: 6px; border-radius: 999px; background: var(--cream); animation: cueGlide 1.8s ease-in-out infinite; }
@keyframes cueIn { from { opacity: 0; transform: translateY(20px); } }
@keyframes cueGlide { 50% { transform: translateY(10px); } }

/* Video pause/play, as on the live site: a round dark glass button in a corner of each film. */
.video-toggle { position: absolute; right: 1rem; bottom: 1rem; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: var(--cream); background: rgba(17, 16, 15, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; transition: background .25s ease, transform .2s ease; }
.video-toggle:hover { background: rgba(17, 16, 15, .8); }
.video-toggle:active { transform: scale(.95); }
.video-toggle svg { width: 13px; height: 13px; fill: currentColor; }
.video-toggle .icon-play, .video-toggle.is-paused .icon-pause { display: none; }
.video-toggle.is-paused .icon-play { display: block; }
/* The hero's sits below the fixed bar, top right, where the live site puts it. */
/* The hero's control sits in the bottom-right corner, not up under the header.
   Up there it read as part of the bar and crowded the nav; down here it is where
   a video control is expected, clear of the copy on the left and of the scroll
   cue in the middle. The insets are not decoration: the hero runs edge to edge
   under `viewport-fit=cover`, so on a phone this corner is where the home
   indicator lives and in landscape it is behind the notch. */
.video-toggle.is-hero {
  top: auto;
  right: max(3.5vw, calc(env(safe-area-inset-right) + 1rem));
  bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1rem));
}
.video-toggle.is-corner { right: 3.5vw; bottom: 2rem; }

/* Links and buttons: filled shapes, never underlines. */
.button-light { display: inline-block; margin-top: 3rem; padding: .95rem 1.7rem; border-radius: 999px; color: var(--ink); background: var(--cream); font-size: 1rem; font-weight: 500; transition: background .2s ease, transform .35s var(--ease); }
.button-light:hover { background: #fff; transform: translateY(-2px); }
.button-dark, .button-soft { display: inline-block; padding: .95rem 1.7rem; border-radius: 999px; font-size: 1rem; font-weight: 500; transition: background .2s ease, transform .35s var(--ease); }
.button-dark { color: var(--paper); background: var(--ink); }
.button-dark:hover { background: #2a2622; transform: translateY(-2px); }
.button-soft { color: var(--ink); background: rgba(17, 16, 15, .07); }
.button-soft:hover { background: rgba(17, 16, 15, .13); }

/* Benefits */
.benefits { padding-block: 7rem 4rem; }
.benefit-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; margin: 3.5rem 0 0; padding: 0; list-style: none; }
.benefit-row li { color: var(--muted); font-size: 1rem; line-height: 1.55; }
.benefit-row b, .rail-caption b, .system-points b { color: var(--ink); font-weight: 600; }
.band-ink-soft .system-points b { color: var(--cream); }

/* Moments */
.moments { padding-block: 4rem 7rem; }
.section-head { padding-bottom: 3.5rem; }

/* Apple's mixed-width rail (apple.com/iphone-duo): one tile height, a wide 696 and a narrow 372
   tile at 452 tall, 20px apart. The track spans the viewport; its inset lines the first tile up
   with the page's left edge and lets the rest run off the right. */
.card-rail { --rail-inset: calc((100vw - var(--shell)) / 2); --tile-h: clamp(250px, 31.4vw, 452px); margin-top: 3.5rem; }
.section-head + .card-rail { margin-top: 0; }
.rail-track { display: flex; gap: 20px; margin: 0; padding: .5rem var(--rail-inset) 1.4rem; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-inset); scrollbar-width: none; }
.rail-track::-webkit-scrollbar { display: none; }
.rail-track::after { content: ''; flex: 0 0 1px; }
.rail-tile { flex: 0 0 auto; scroll-snap-align: start; }
.rail-tile.is-wide { width: calc(var(--tile-h) * 696 / 452); }
.rail-tile.is-narrow { width: calc(var(--tile-h) * 372 / 452); }
.rail-media { height: var(--tile-h); overflow: hidden; border-radius: 28px; background: #d6cec3; }
.rail-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); transition: transform 1.2s var(--ease); }
.rail-tile:hover .rail-media img { transform: scale(1.025); }
.rail-caption { margin: 1.1rem .4rem 0; font-size: 1.02rem; line-height: 1.35; color: var(--muted); }
.rail-controls { display: flex; justify-content: flex-end; gap: .75rem; margin-top: .4rem; }
.rail-controls button, .faq summary::after { background: rgba(17, 16, 15, .07); }
.rail-controls button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; color: var(--ink); cursor: pointer; transition: background .2s ease, opacity .2s ease; }
.rail-controls button:hover:not(:disabled) { background: rgba(17, 16, 15, .13); }
.rail-controls button:disabled { opacity: .35; cursor: default; }
.rail-controls svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Chips: a filled pill marks the active choice, instead of an underline. */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips button { padding: .5rem 1rem; border: 0; border-radius: 999px; color: var(--ink); background: rgba(17, 16, 15, .06); font: 500 .92rem var(--text); cursor: pointer; transition: background .25s ease, color .25s ease; }
.chips button:hover { background: rgba(17, 16, 15, .11); }
.chips button.active { color: var(--paper); background: var(--ink); }

/* Video reel */
.experience-reel { padding-top: 6rem; }
.reel-head { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 1.6rem; }
.reel-head h3 { font-family: var(--display); font-size: clamp(1.6rem, 2.2vw, 2.1rem); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }
.reel-frame { position: relative; overflow: hidden; aspect-ratio: 16/8.6; border-radius: 28px; background: #272522; }
.reel-frame video { width: 100%; height: 100%; display: block; object-fit: cover; transition: opacity .35s ease, transform 1.2s var(--ease); }
.reel-frame.switching video { opacity: 0; transform: scale(1.025); }
.reel-caption { position: absolute; inset: auto 0 0; display: grid; gap: .2rem; padding: 6rem 2.2rem 1.9rem; color: #fff; background: linear-gradient(transparent, rgba(8, 8, 7, .66)); }
.reel-caption strong { font-size: 1.15rem; font-weight: 600; }
.reel-caption small { font-size: .95rem; opacity: .75; }

/* The object: the 3D device, then the measurements that matter, set large. */
.object { position: relative; isolation: isolate; overflow: hidden; padding-block: 7rem 6rem; }
/* Fine grain over the dark band, so it reads as a lit room rather than a flat fill, and the glows do not band. */
.object::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' 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 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.product-stage { position: relative; width: min(1100px, 90vw); margin: 2.5rem auto 0; }
/* The studio. script.js sets the variables from where the base meets the floor on screen (--fx, --fy), where
   the horizon falls for the current camera tilt (--hy), the light pool's size (--pw, --ph, flattening as the
   camera levels out) and where the tablet is (--sx, --sy). The fallbacks are the default view. */
.stage-floor { --fx: 50%; --fy: 76%; --hy: -10%; --pw: 34%; --ph: 10%; --sx: 50%; --sy: 38%; --glow-w: 22vw; --glow-h: 24vw; --edge: 24%;
  position: absolute; left: 50%; top: 0; z-index: -1; width: 100vw; height: 112%; transform: translateX(-50%); pointer-events: none;
  background:
    radial-gradient(ellipse var(--glow-w) var(--glow-h) at var(--sx) var(--sy), rgba(232, 220, 200, .13) 0%, rgba(198, 154, 99, .06) 45%, transparent 75%),
    radial-gradient(ellipse var(--pw) var(--ph) at var(--fx) var(--fy), rgba(236, 224, 204, .2) 0%, rgba(198, 154, 99, .08) 42%, transparent 72%),
    linear-gradient(180deg, var(--ink) 0, var(--ink) var(--hy), #171512 calc(var(--hy) + (var(--fy) - var(--hy)) * .55), #2a251f var(--fy), #1c1915 calc(var(--fy) + 16%), #121110 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%), linear-gradient(180deg, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%), linear-gradient(180deg, #000 80%, transparent 100%);
  mask-composite: intersect; }
.stage-anchor { width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* On a phone the device spans most of the width, so the side fade starts near the edge and the spotlight grows. */
@media (max-width: 600px) { .stage-floor { --glow-w: 58vw; --glow-h: 60vw; --edge: 6%; } }
.product-stage model-viewer { display: block; width: 100%; height: min(62vw, 700px); --poster-color: transparent; outline: none; }
.product-stage model-viewer::part(default-progress-bar) { display: none; }
.model-progress { position: absolute; left: 50%; top: 50%; width: min(220px, 45vw); height: 2px; border-radius: 2px; background: rgba(233, 223, 207, .14); transform: translate(-50%, -50%); overflow: hidden; }
.model-progress i { display: block; width: 45%; height: 100%; background: var(--cream); animation: modelLoad 1.1s ease-in-out infinite alternate; }
@keyframes modelLoad { to { transform: translateX(125%); } }
.model-controls { display: flex; flex-direction: column; align-items: center; gap: .9rem; margin-top: .5rem; }
.orientation { display: flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: rgba(233, 223, 207, .07); }
.orientation button { min-height: 44px; padding: .5rem 1.15rem; border: 0; border-radius: 999px; color: var(--cream-muted); background: transparent; font: 500 .92rem var(--text); cursor: pointer; transition: background .25s ease, color .25s ease; }
.orientation button:hover { color: var(--cream); }
.orientation button[aria-pressed="true"] { color: var(--ink); background: var(--cream); }
.orientation button:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.model-hint { margin: 0; text-align: center; font-size: .92rem; color: var(--cream-muted); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; margin: 5rem auto 0; }
.stats dt { font-family: var(--display); font-size: clamp(2.6rem, 4.6vw, 4.6rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.stats dd { margin: .7rem 0 0; font-size: 1rem; color: var(--cream-muted); }

/* Details */
.details { padding-block: 7rem 5rem; }

/* Screen story. The section is tall; .story-pin sticks to the viewport while it scrolls past, and
   the script marks one step and one screen active from how far through the section the reader is. */
/* The room dims as the reader scrolls. `--dark` runs 0..1 from the script and every colour in the
   section is mixed against it, so the paper, the headings and the body copy cross over together
   rather than snapping at a threshold. The plain values are the lit state, and stand alone where
   color-mix is unavailable or the script never runs. */
.story { height: 300vh; --dark: 0; --dark-text: 0; --mid: 0; background: var(--paper-deep); }
.story .story-steps { opacity: calc(1 - var(--mid)); }
@supports (color: color-mix(in oklab, #000 50%, #fff)) {
  /* Text crosses over on `--dark-text`, which is the same scroll steepened to a narrow band. Sharing
     one curve with the background is what breaks this: both reach mid-grey at the same moment and
     the copy drops to about 1.7:1 against the paper it is sitting on. Crossing the type early means
     it is already cream while the background is still on its way down, and the reverse on the way
     out, so the two are never the same value at once. */
  .story { background: color-mix(in oklab, var(--ink) calc(var(--dark) * 100%), var(--paper-deep)); color: color-mix(in oklab, var(--cream) calc(var(--dark-text) * 100%), var(--ink)); }
  .story .story-steps p { color: color-mix(in oklab, #c4bbac calc(var(--dark-text) * 100%), var(--muted)); }
  .story h2, .story .story-steps h3, .story .story-steps p { transition: color .18s linear; }
}
.story-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
/* The studio, revealed rather than crossfaded. At rest the section is flat paper, continuous with the
   bands above and below it; the backdrop fades in as the room dims, so killing the fill light is what
   uncovers the key's shape. That is also why there is no lit counterpart image: a white cyc genuinely
   has no visible falloff, and giving it one would make this section read as a treated panel dropped
   into a flat page. The falloff is computed per pixel from a light position rather than stacked from
   gradient stops — see scripts note in the commit; gradients topped out at a third of this contrast. */
.story-pin::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  opacity: var(--dark); background: url('/draft/assets/closeups/story-sweep-dark.webp') center / cover no-repeat; }
/* Grain, the same noise the Design section lays over its dark band. Tied to --dark so the paper end
   stays clean: film grain over bright paper reads as dirt, not as photography. */
.story-pin::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: calc(var(--dark) * .06); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' 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 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Narrower than the page shell on purpose. The copy sets to about 34ch and the device is capped by
   height, so at full shell width the two sit at opposite edges with a dead gap between them and
   neither reads as being about the other. Pulling the container in closes that gap without cramping
   either block. */
.story-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .92fr 1.08fr; gap: 3.5vw; align-items: center; width: min(90vw, 1150px); }
.story-steps { position: relative; min-height: 11rem; margin: 2.6rem 0 0; padding: 0; list-style: none; }
/* The outgoing line leaves quickly and the incoming one follows, so the two never sit on top of each other. */
.story-steps li { position: absolute; inset: 0 auto auto 0; max-width: 34ch; opacity: 0; transform: translateY(-10px); transition: opacity .25s ease, transform .25s ease; }
.story-steps li.is-active { opacity: 1; transform: none; transition: opacity .6s var(--ease) .2s, transform .6s var(--ease) .2s; }
.story-steps h3 { font-family: var(--display); font-size: clamp(1.7rem, 2.4vw, 2.3rem); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; }
.story-steps p { margin: .9rem 0 0; font-size: 1.1rem; line-height: 1.6; color: var(--muted); }
/* The device is a 48-frame sequence, scrubbed by scroll. Each frame carries its own baked contact
   shadow, which is why there is no CSS one: the base travels from 46% to 54% of the frame across the
   turn, so a fixed ellipse would sit under nothing for most of the section. */
/* Capped by height, not width. The frames are cropped tight to the device, so letting it fill the
   column put it at 80% of the viewport height and it read as oversized rather than as a subject in
   a frame. 66svh of width is about 61svh of device, which leaves the pin room to breathe above and
   below and stops it hugging the shell's right edge. The width has to be definite: both the still
   and the canvas are absolutely positioned, so a centred grid item with only a max-width has nothing
   to size itself from and collapses to zero. */
.story-device { position: relative; aspect-ratio: 920 / 857; width: min(100%, 66svh); justify-self: center; }
.story-still, .story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* The still is the real element: it is what a reader without JavaScript, without the bandwidth for
   2MB of frames, or with reduced motion asked for, actually sees, and it stays in the accessibility
   tree behind the canvas so the sequence never has to describe itself. */
.story-canvas { opacity: 0; transition: opacity .35s ease; }
.story-device.is-live .story-canvas { opacity: 1; }
.story-device.is-live .story-still { opacity: 0; }

/* System */
.system { padding-block: 7rem; }
.dashboard { margin-block: 0; }
/* Drawn browser window, ported from the live site's BrowserFrame. Its chrome is neutral grey rather than the
   page's warm ink on purpose: no browser tints its toolbar to the page inside it, and a warm bar over the cool
   dashboard shows as a seam. Sizes are the live component's, phone values first, desktop from 640px. */
.browser { overflow: hidden; border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; background: #16171a; box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 40px 90px -30px rgba(0, 0, 0, .9); }
.browser svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.browser-tabs { display: flex; align-items: flex-end; gap: .5rem; padding: .5rem .625rem 0; }
.browser-lights { display: flex; flex-shrink: 0; align-items: center; gap: 5px; padding-bottom: .5rem; }
.browser-lights span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 95, 87, .85); }
.browser-lights span:nth-child(2) { background: rgba(254, 188, 46, .85); }
.browser-lights span:nth-child(3) { background: rgba(40, 200, 64, .85); }
.browser-tab { display: flex; flex: 1; align-items: center; gap: .5rem; min-width: 0; max-width: 200px; padding: .375rem .625rem; border-radius: 8px 8px 0 0; background: #212429; }
.browser-tab img { flex-shrink: 0; width: auto; height: 12px; opacity: .9; }
.browser-tab span { overflow: hidden; font-size: 10.5px; line-height: 1; color: rgba(255, 255, 255, .7); white-space: nowrap; text-overflow: ellipsis; }
.browser .browser-tab-close { display: none; flex-shrink: 0; width: 10px; height: 10px; margin-left: auto; color: rgba(255, 255, 255, .35); stroke-width: 1.4; }
.browser-new-tab { display: none; padding-bottom: .625rem; font-size: 15px; line-height: 1; color: rgba(255, 255, 255, .3); }
.browser-toolbar { display: flex; align-items: center; gap: .5rem; padding: .5rem .625rem; border-bottom: 1px solid rgba(255, 255, 255, .06); background: #212429; }
.browser-nav { display: none; flex-shrink: 0; align-items: center; gap: .875rem; color: rgba(255, 255, 255, .4); }
.browser-nav svg, .browser-actions svg { width: 15px; height: 15px; stroke-width: 1.5; }
.browser-nav .is-back { color: rgba(255, 255, 255, .6); }
.browser-nav .is-forward { color: rgba(255, 255, 255, .25); }
.browser-address { display: flex; flex: 1; align-items: center; gap: .5rem; min-width: 0; padding: .375rem .75rem; border-radius: 999px; background: #131518; }
.browser-address svg { flex-shrink: 0; width: 12px; height: 12px; color: rgba(255, 255, 255, .4); stroke-width: 1.2; }
.browser-address span { overflow: hidden; font-size: 10.5px; line-height: 1; color: rgba(255, 255, 255, .55); white-space: nowrap; text-overflow: ellipsis; }
.browser-actions { display: flex; flex-shrink: 0; align-items: center; gap: .75rem; color: rgba(255, 255, 255, .4); }
.browser-profile { display: none; width: 17px; height: 17px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; }
.browser-page { display: block; width: 100%; height: auto; }
@media (min-width: 640px) {
  .browser-tabs { gap: .75rem; padding: .75rem .875rem 0; }
  .browser-lights { gap: 7px; padding-bottom: .625rem; }
  .browser-lights span { width: 11px; height: 11px; }
  .browser-tab { max-width: 280px; padding: .5rem .75rem; }
  .browser-tab img { height: 13px; }
  .browser-tab span, .browser-address span { font-size: 11.5px; }
  .browser .browser-tab-close { display: block; }
  .browser-new-tab { display: block; }
  .browser-toolbar { gap: .75rem; padding: .625rem .875rem; }
  .browser-nav { display: flex; }
  .browser-profile { display: block; }
}
.system-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 3.5rem; margin-bottom: 0; padding: 0; list-style: none; }
.system-points li { color: var(--cream-muted); font-size: 1rem; line-height: 1.55; }

/* Signage or Rooms, then how a deployment runs */
.compare { padding-block: 7rem; }
.compare-head { margin-bottom: 3rem; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare-card { padding: 14px 14px 2.4rem; border-radius: 34px; background: rgba(255, 255, 255, .5); }
.compare-card figure { margin: 0 0 2rem; aspect-ratio: 16/10; overflow: hidden; border-radius: 22px; }
.compare-card img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx) var(--fy); }
.compare-card h3, .compare-card p { margin-inline: 1.4rem; }
.compare-card h3 { font-family: var(--display); font-size: clamp(1.9rem, 2.6vw, 2.5rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.compare-card p { max-width: 48ch; margin-top: 1rem; margin-bottom: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.compare-card .compare-where { margin-top: 1.2rem; color: var(--ink); font-weight: 500; }
.delivery { margin-top: 7rem; }

/* Specifications and questions */
.specs { padding-block: 7rem; }
.specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: start; }
.specs h2 { margin-bottom: 2rem; font-family: var(--display); font-size: clamp(1.9rem, 2.8vw, 2.7rem); font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; margin: 0; }
.spec-list dt { font-size: .92rem; color: var(--muted); }
.spec-list dd { margin: .2rem 0 0; font-size: 1.02rem; line-height: 1.45; }
.faq { display: grid; gap: .5rem; }
.faq h2 { margin-bottom: 1.5rem; }
.faq details { border-radius: 18px; background: rgba(255, 255, 255, .45); transition: background .25s ease; }
.faq details[open] { background: rgba(255, 255, 255, .72); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.05rem 1.2rem 1.05rem 1.4rem; font-size: 1rem; font-weight: 500; line-height: 1.4; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: 1.15rem; font-weight: 300; line-height: 1; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 56ch; margin: -.2rem 1.4rem 1.3rem; color: var(--muted); font-size: .98rem; line-height: 1.6; }

/* Ecosystem: the live site's two current products, as two tiles of different tone. */
.ecosystem { padding-block: 7rem; }
.ecosystem-head { margin-bottom: 3.5rem; }
.ecosystem h2 { max-width: 26ch; font-family: var(--display); font-size: clamp(2.25rem, 4.4vw, 4.4rem); font-weight: 300; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.ecosystem h2 strong { display: block; }
.eco-board { display: grid; grid-template-columns: 7fr 5fr; gap: 20px; }
.eco-tile { position: relative; display: flex; flex-direction: column; min-height: 640px; overflow: hidden; padding: 2.8rem 2.6rem 0; border-radius: 28px; background: var(--paper-deep); }
main .eco-tile[id] { scroll-margin-top: 100px; }
.eco-tile.is-featured { color: var(--cream); background: var(--ink); }
.eco-tile .badge { align-self: flex-start; margin-bottom: 1.2rem; }
.eco-tile h3 { font-family: var(--display); font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 300; line-height: 1.02; letter-spacing: -.02em; }
.eco-tile > p { max-width: 46ch; margin: 1rem 0 0; font-size: 1.02rem; line-height: 1.6; color: var(--muted); }
.eco-tile.is-featured > p { color: var(--cream-muted); }
.eco-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }
.eco-actions .button-light { margin-top: 0; }
.eco-screen { position: relative; margin-top: auto; padding-top: 2.5rem; }
.eco-screen video { display: block; width: 100%; height: auto; border-radius: 16px 16px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .35); }
.eco-device { display: flex; flex: 1; align-items: flex-end; justify-content: center; margin-inline: -2.6rem; padding-top: 1.5rem; }
.eco-device img { width: 100%; max-width: 640px; transition: transform 1.2s var(--ease); }
.eco-tile:hover .eco-device img { transform: scale(1.02); }

/* The close: the suite at night, dimmed, with the invitation on the left and both demo options in a
   frosted card on the right. */
.contact { position: relative; isolation: isolate; overflow: hidden; color: var(--cream); background: var(--ink); }
.contact-media { position: absolute; inset: 0; z-index: -1; }
.contact-media video { width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(.9); }
.contact-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,9,8,.86) 0%, rgba(10,9,8,.55) 48%, rgba(10,9,8,.25) 100%), linear-gradient(180deg, var(--ink) 0%, transparent 18%, transparent 82%, var(--ink) 100%); }
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 6vw; align-items: center; min-height: 92vh; padding-block: 9rem; }
.contact h2 { font-family: var(--display); font-size: clamp(3.4rem, 7vw, 6.5rem); font-weight: 300; line-height: .94; letter-spacing: -.02em; }
.contact-lede { max-width: 42ch; margin: 2rem 0 0; font-size: 1.2rem; line-height: 1.55; color: rgba(233, 223, 207, .86); }
.contact-note { max-width: 52ch; margin: 1.2rem 0 0; font-size: 1rem; line-height: 1.65; color: var(--cream-muted); }
.contact-card { padding: 2.2rem; border-radius: 30px; background: rgba(24, 21, 18, .58); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); }
.contact-card h3 { font-family: var(--display); font-size: clamp(1.9rem, 2.6vw, 2.4rem); font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.contact-card > p { margin: .7rem 0 1.6rem; font-size: 1rem; color: var(--cream-muted); }
.contact-option { display: flex; align-items: center; gap: 1rem; width: 100%; margin-top: .6rem; padding: 1.1rem 1.2rem; border: 0; border-radius: 20px; color: var(--cream); background: rgba(233, 223, 207, .08); font: inherit; text-align: left; cursor: pointer; transition: background .25s ease, transform .35s var(--ease); }
.contact-option:hover { background: rgba(233, 223, 207, .14); transform: translateY(-2px); }
.contact-option.is-primary { color: var(--ink); background: var(--cream); }
.contact-option.is-primary:hover { background: #fff; }
.contact-option b, .demo-choice b { display: block; font-family: var(--display); font-size: 1.3rem; font-weight: 500; line-height: 1.1; }
.contact-option small, .demo-choice small { display: block; margin-top: .3rem; font-size: .9rem; line-height: 1.4; opacity: .7; }
.contact-option > span:nth-child(2) { flex: 1; }
.contact-option-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: rgba(233, 223, 207, .1); }
.is-primary .contact-option-icon, .demo-choice.is-light .contact-option-icon { background: rgba(17, 16, 15, .08); }
.contact-option-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* The one solid glyph among the outlines, because it is a logo rather than an instruction. */
.contact-option-icon svg.icon-wa, .cc-rail-icon svg.icon-wa { fill: currentColor; stroke: none; }
.contact-option-arrow { font-size: 1.2rem; transition: transform .3s var(--ease); }
.contact-option:hover .contact-option-arrow, .demo-choice:hover .contact-option-arrow { transform: translateX(4px); }

/* Demonstration panel */
.demo-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadeIn .25s ease; }
.demo-panel { display: flex; flex-direction: column; width: 100%; max-width: 960px; max-height: min(780px, calc(100svh - 3rem)); overflow: hidden; border-radius: 26px; color: var(--cream); background: #141210; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .8); animation: panelRise .34s var(--ease); }
@keyframes panelRise { from { opacity: 0; transform: translateY(32px) scale(.985); } }
.demo-bar { display: flex; align-items: center; justify-content: space-between; flex: none; padding: 1.1rem 1.2rem 1.1rem 2rem; }
.demo-brand { display: flex; align-items: center; gap: .8rem; font-size: .95rem; font-weight: 500; color: var(--cream-muted); }
.demo-brand img { width: auto; height: 28px; }
.demo-close, .demo-calendar-bar button { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 1rem; border: 0; border-radius: 999px; color: var(--cream); background: rgba(233, 223, 207, .08); font: 500 .92rem var(--text); cursor: pointer; transition: background .2s ease; }
.demo-close:hover, .demo-calendar-bar button:hover { background: rgba(233, 223, 207, .15); }
.demo-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.demo-options { overflow-y: auto; padding: 1.5rem 2.6rem 2.8rem; }
.demo-kicker { margin: 0; font-size: .95rem; font-weight: 500; color: #c79b74; }
.demo-options h2 { max-width: 13ch; margin-top: 1rem; font-family: var(--display); font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 300; line-height: .96; letter-spacing: -.02em; }
.demo-lede { max-width: 56ch; margin: 1.4rem 0 0; font-size: 1.05rem; line-height: 1.6; color: var(--cream-muted); }
/* Three channels, three columns — two columns would leave the third alone on a row of its own. */
.demo-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 2.4rem; }
.demo-choice { display: flex; flex-direction: column; justify-content: space-between; min-height: 190px; padding: 1.6rem; border: 0; border-radius: 20px; color: var(--cream); background: rgba(233, 223, 207, .07); font: inherit; text-align: left; cursor: pointer; transition: background .25s ease, transform .35s var(--ease); }
.demo-choice:hover { background: rgba(233, 223, 207, .12); transform: translateY(-2px); }
.demo-choice.is-light { color: var(--ink); background: var(--cream); }
.demo-choice.is-light:hover { background: #fff; }
.demo-choice-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.demo-choice b { font-size: 1.55rem; }
/* The foot hangs from the bottom of the card, so a heading or a note that runs to one line instead of
   two lifts everything above it and the three cards stop sharing a baseline. Reserving two lines for
   each keeps them one object — and the WhatsApp note is the one that changes wording by time of day. */
.demo-choice b { min-height: 2.2em; }
.demo-choice small { min-height: 2.8em; }
.demo-calendar { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.demo-calendar-bar { display: flex; align-items: center; gap: 1rem; padding: 0 2rem 1rem; font-size: .92rem; color: var(--cream-muted); }
.demo-frame { position: relative; display: flex; flex: 1; min-height: 620px; background: #fff; }
.demo-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: .95rem; color: #6d655c; }
/* The booking page takes a few seconds; the message shows through until it has painted. */
.demo-calendar iframe { position: relative; flex: 1; width: 100%; border: 0; background: transparent; opacity: 0; transition: opacity .4s ease; }
.demo-calendar iframe.is-loaded { opacity: 1; background: #fff; }

.site-footer { color: var(--cream); background: var(--ink); }
.footer-inner { padding-block: 5rem max(3rem, env(safe-area-inset-bottom)); }
.footer-top { display: flex; justify-content: space-between; gap: 3rem; }
.footer-brand img { width: auto; height: 36px; }
.footer-brand p { max-width: 36ch; margin: 1.1rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--cream-muted); }
.footer-brand .footer-maker { margin-top: .8rem; font-size: .88rem; }
.footer-columns { display: grid; grid-template-columns: repeat(2, auto); gap: 5rem; }
/* Column headings label their list rather than competing with it, so they set
   small, letterspaced and muted — the same register the section kickers use. */
.footer-columns h2 { font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--cream-muted); }
.footer-columns ul { margin: .35rem 0 0; padding: 0; list-style: none; }
.footer-columns a { display: flex; align-items: center; min-height: 44px; font-size: .95rem; color: var(--cream-muted); transition: color .2s ease; }
.footer-columns a:hover { color: var(--cream); }
/* A row that leaves the site says so. The arrow is keyed on the attribute rather
   than a class, so anything given target="_blank" in here is marked without
   anyone having to remember to mark it — and the screen-reader note travels with
   it in the markup, since an icon alone announces nothing. */
.footer-columns a[target="_blank"] svg {
  flex: none; width: 9px; height: 9px; margin-left: .5em;
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  opacity: .55; transition: opacity .2s ease, transform .2s var(--ease);
}
.footer-columns a[target="_blank"]:hover svg { opacity: 1; transform: translate(1px, -1px); }
/* The bottom row is set apart by space and a drop in tone, not by a rule. */
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 6rem; font-size: .86rem; color: rgba(233, 223, 207, .6); }
.footer-sign { letter-spacing: .16em; text-transform: uppercase; }

/* Motion: one quiet rise per block, not per element. */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .process { grid-template-columns: 1fr; gap: 1rem; margin-top: 2.2rem; }.process li { min-height: 0 !important; }.process li::after { font-size: 10rem; bottom: -2.2rem; }
  .split-head { grid-template-columns: 1fr; }.split-aside { grid-column: 1; padding-bottom: 0; }.split-aside .section-lede { margin-top: 1.4rem; }
  .site-header { height: 64px; padding-inline: 1.25rem; grid-template-columns: 1fr auto; }.site-nav, .header-cta { display: none; }.menu-toggle { display: block; color: inherit; }.brand img { height: 30px; }
  .hero-copy { margin: 0 1.3rem 12vh; width: calc(100% - 2.6rem); }.hero h1 { font-size: clamp(3rem, 13vw, 4.6rem); }.hero-media video { object-position: 58% 50%; }
  .benefit-row, .stats { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .compare-grid, .specs-grid { grid-template-columns: 1fr; }.specs-grid { gap: 4rem; }
  .story-grid { grid-template-columns: 1fr; gap: 1.5rem; }.story-device { order: -1; width: min(100%, 560px); margin-inline: auto; }.story-steps { margin-top: 1.4rem; min-height: 9.5rem; }
  .benefits { padding-block: 5rem 3rem; }.moments { padding-bottom: 5rem; }.object, .details, .system, .compare, .specs { padding-block: 5rem; }
  .card-rail { margin-top: 2.5rem; }.experience-reel { padding-top: 4rem; }.delivery { margin-top: 5rem; }
  .product-stage model-viewer { height: 92vw; }.stats { margin-top: 3.5rem; }
  .system-points { grid-template-columns: 1fr; gap: 1.2rem; }
  .eco-board { grid-template-columns: 1fr; }.eco-tile { min-height: 0; }.ecosystem { padding-block: 5rem; }
  .contact-grid { grid-template-columns: 1fr; min-height: 0; gap: 3rem; padding-block: 6rem; }.contact-media::after { background: linear-gradient(180deg, var(--ink) 0%, rgba(10,9,8,.6) 30%, rgba(10,9,8,.75) 100%); }
  .demo-overlay { align-items: flex-end; padding: 0; }.demo-panel { max-height: 100svh; border-radius: 24px 24px 0 0; }.demo-choices { grid-template-columns: 1fr; }.demo-choice { min-height: 150px; }
  .footer-top { flex-direction: column; }
}

@media (max-width: 600px) {
  :root { --shell: calc(100vw - 2.5rem); }
  body { font-size: 1rem; }
  .hero-intro { font-size: 1rem; }
  .benefit-row { grid-template-columns: 1fr; gap: 1.4rem; }
  .card-rail { --rail-inset: 1.25rem; --tile-h: 208px; }.rail-track { gap: 12px; }.rail-media { border-radius: 20px; }.rail-caption { font-size: .95rem; }
  .reel-head { flex-direction: column; align-items: flex-start; gap: 1rem; }.reel-frame { aspect-ratio: 4/5; border-radius: 20px; }.reel-caption { padding: 5rem 1.3rem 1.3rem; }
  .stats { gap: 1.8rem 1rem; }
  .spec-list { grid-template-columns: 1fr; gap: 1.1rem; }
  .compare-card { border-radius: 26px; }.compare-card h3, .compare-card p { margin-inline: .6rem; }
  .contact h2 { font-size: 3rem; }.contact-card { padding: 1.4rem; border-radius: 24px; }.demo-options { padding: 1rem 1.4rem 2rem; }.demo-bar { padding-left: 1.4rem; }.demo-close span { display: none; }.demo-calendar-bar { padding-inline: 1.4rem; }.demo-frame { min-height: calc(100svh - 9rem); }
  .eco-tile { padding: 2rem 1.4rem 0; border-radius: 24px; }.footer-columns { gap: 3rem; }.footer-bottom { flex-direction: column; margin-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }.hero-media video, .scroll-cue-mouse, .scroll-cue-mouse span { animation: none; }.reveal { opacity: 1; transform: none; transition: none; }
  .story-steps li, .story-device img { transition: none; }
}

/* Content revision: clearer introduction and configuration entry point. */
.hero-copy { padding-top: 8rem; }
.hero-kicker { margin: 0 0 1.2rem; font-size: .85rem; font-weight: 500; letter-spacing: .04em; }
.hero-intro { max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.8rem; }
.hero-actions .button-light { margin-top: 0; }
.configuration-note { max-width: 65ch; margin: 2rem 0 0; color: var(--muted); line-height: 1.6; }
.deployment { padding-block: 7rem; }
.deployment .delivery { margin-top: 0; }
@media (max-width: 600px) {
  .hero-copy { margin-bottom: 5rem; }
  .hero-kicker { max-width: 28ch; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .deployment { padding-block: 5rem; }
}

/* A single order travels from the real guest UI to an illustrative PMS receipt.
   Preserve the page's typography and palette; variance 6, motion 4, density 3. */
.request-flow { padding-block: 6rem 7rem; overflow: hidden; }
.request-flow-head { margin-bottom: 3.5rem; }
.request-flow-head h2 { max-width: 28ch; }
.request-journey { display: grid; grid-template-columns: 1.25fr .8fr 1fr; gap: 2rem; padding: 0; margin: 0; list-style: none; }
.request-step { min-width: 0; }
.request-visual { position: relative; height: 300px; display: flex; align-items: center; justify-content: center; }
.request-tablet { position: relative; z-index: 2; width: 100%; padding: 9px; border: 1px solid #5a554e; border-radius: 22px; background: #0c0b0a; box-shadow: 0 24px 44px #0004; }
.request-tablet img { border-radius: 13px; }
.request-hub { position: relative; z-index: 2; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; border: 1px solid #70685b; background: var(--ink-soft); box-shadow: 0 0 0 13px var(--ink-soft), 0 0 0 14px #e9dfcf12; }
.request-hub img { width: 40px; height: 48px; object-fit: contain; }
.request-connection { position: absolute; left: -3rem; right: -3rem; top: 50%; height: 1px; background: #e9dfcf40; }
.request-connection::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--cream); border-right: 1px solid var(--cream); transform: rotate(45deg); }
.request-connection i { position: absolute; width: 34px; height: 3px; top: -1px; background: var(--cream); opacity: 0; }
.request-journey.visible .request-connection i { animation: request-transmit 2s .4s var(--ease) both; }
.request-receipt { position: relative; z-index: 2; width: 100%; max-width: 350px; padding: 24px; border-radius: 16px; background: var(--cream); color: var(--ink); box-shadow: 0 24px 44px #0003; }
.request-receipt-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .75rem; }
.request-received { border: 1px solid #827967; border-radius: 5px; padding: 3px 7px; }
.request-room { margin: 23px 0; font-size: 1rem; }
.request-room strong { display: block; font-family: var(--display); font-size: 3.4rem; font-weight: 400; line-height: 1.1; }
.request-order { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid #11100f30; font-size: .9rem; font-weight: 500; }
.request-receipt-note { margin: 15px 0 0; font-size: .7rem; color: #60594e; }
.request-caption { display: flex; gap: 14px; margin-top: 32px; align-items: baseline; }
.request-number { font-size: .8rem; color: var(--cream-muted); font-variant-numeric: tabular-nums; }
.request-caption h3 { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 400; line-height: 1.2; }
.request-caption p { margin: 10px 0 0; font-size: .9rem; color: var(--cream-muted); }
@keyframes request-transmit { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 34px); opacity: 0; } }
@media (max-width: 900px) {
  .request-journey { gap: 1.25rem; grid-template-columns: 1.1fr .7fr 1fr; }
  .request-visual { height: 270px; }
  .request-receipt { padding: 18px; }
  .request-receipt-top { align-items: flex-start; flex-direction: column; gap: 6px; }
  .request-hub { width: 84px; height: 84px; }
}
@media (max-width: 650px) {
  .request-flow { padding-block: 4rem; }
  .request-flow-head { margin-bottom: 2rem; }
  .request-journey { display: grid; grid-template-columns: 1fr; gap: 0; padding-left: 25px; position: relative; }
  .request-journey::before { content: ''; position: absolute; left: 0; top: 30px; bottom: 55px; width: 1px; background: #e9dfcf40; }
  .request-visual { height: auto; min-height: 0; justify-content: flex-start; }
  .request-tablet { max-width: 400px; }
  .request-caption { position: relative; margin-top: 22px; margin-bottom: 38px; gap: 12px; }
  .request-caption::before { content: ''; position: absolute; left: -28px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--cream); }
  .request-route .request-visual { height: 110px; }
  .request-hub { width: 80px; height: 80px; margin-left: 14px; }
  .request-hub img { width: 32px; height: 39px; }
  .request-connection { left: -25px; right: auto; width: 1px; top: -22px; height: 164px; }
  .request-connection::after { top: auto; bottom: 0; left: -3px; transform: rotate(135deg); }
  .request-connection i { width: 3px; height: 25px; left: -1px; }
  .request-journey.visible .request-connection i { animation-name: request-transmit-mobile; }
  .request-receipt { max-width: 350px; padding: 24px; }
  .request-receipt-top { flex-direction: row; align-items: center; }
  .request-team .request-caption { margin-bottom: 0; }
}
@keyframes request-transmit-mobile { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 25px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .request-journey.visible .request-connection i { animation: none; }
}

/* Keep each desktop caption on the same centre axis as its visual. */
@media (min-width: 651px) {
  .request-caption { position: relative; display: block; text-align: center; padding-top: 1.25rem; }
  .request-number { position: absolute; top: 0; left: 50%; transform: translateX(-50%); line-height: 1; }
}

/* Production accessibility and smaller viewport refinements. */
.skip-link { color: var(--ink); }
#main:focus { outline: none; }
[id] { scroll-margin-top: 6rem; }
@media (prefers-reduced-motion: reduce) {
  .story { height: auto; }
  .story-pin { position: relative; height: auto; padding-block: 5rem; }
  .story-steps li { opacity: 1; }
  .story-screen { transition: none; }
}
@media (min-width: 651px) {
  .request-visual { height: clamp(300px, 25vw, 365px); }
}
@media (max-width: 380px) {
  .hero-copy { padding-top: 9rem; }
  .hero h1 { font-size: 2.9rem; }
  .hero-intro { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .story-steps li { position: relative; inset: auto; transform: none; margin-bottom: 2rem; }
}


/* ---------------------------------------------------------------------------
   Preloader

   Four place-words roll through a fixed band and resolve into the lockup, a
   count runs in the corner, and the ink thins until the hero is through it.
   There are no curtains: the handover is one continuous move rather than an
   animation followed by a page.

   It lives here rather than inline because this stylesheet is render-blocking,
   so it is in hand before the first paint and the overlay can never flash
   unstyled. The script that drives it cannot go in script.js for the mirror
   image of that reason: that file is deferred, and by the time it runs the
   flash it exists to prevent has already happened.

   Hidden by default and shown only once the gate adds the class, so a reader
   with JavaScript off never meets a curtain nothing is going to lift.
--------------------------------------------------------------------------- */
#preloader { display: none; position: fixed; inset: 0; z-index: 200; overflow: hidden; }
html.preloading #preloader, html.preloading-out #preloader { display: block; }
html.preloading, html.preloading body { overflow: hidden; }

/* Held back so they arrive as the ink thins rather than playing to nobody
   behind it. The reveal observer marks the hero copy visible the moment the
   deferred script runs, which is well inside the overlay's life. */
html.preloading .hero-copy.reveal.visible { opacity: 0; transform: translateY(24px); transition: none; }
html.preloading .hero-media video, html.preloading .scroll-cue-mouse { animation-play-state: paused; }

#preloader .pre-ink { position: absolute; inset: 0; background: var(--ink); }
#preloader .pre-panel { position: absolute; inset: 0; display: grid; place-items: center; }

/* A rolling band: each word leaves through the top as the next arrives from
   below, both clipped by this window. Every beat takes the same 400ms on the
   same curve, and a word's exit starts on the frame the next one's entrance
   does — locked that way the two read as one strip rather than two words
   drifting at different speeds. */
.pre-words { position: relative; width: 100%; height: 1.35em; overflow: hidden; font-family: var(--display); font-size: clamp(2.6rem, 8vw, 6rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--cream); }
  /* Block, not grid, and the reason is the full stop. A grid container turns
     each child into its own grid item — so "Events" and the <i> holding its
     period became two items stacked in two rows, and the bronze dot rendered
     underneath its own word rather than after it. Clipped by the band, all that
     survived was a stray bronze square floating near the logo. Block layout
     keeps the word and its stop in one inline run, where they belong, and a
     line-height equal to the band's own height centres that run in it. */
.pre-words > span { position: absolute; inset: 0; display: block; text-align: center; line-height: 1.35em; white-space: nowrap; transform: translateY(100%); }
/* The lockup is a single child, so it is centred the direct way. */
.pre-words > span.pre-logo { display: grid; place-items: center; }
.pre-words i { font-style: normal; color: #c79b74; }

/* Sized by height: the lockup is three and a third times wider than it is tall,
   so matching the width of a word would leave it looking timid. Width is stated
   rather than left auto because an SVG given only a height falls back to a
   300px default in some engines. 3.066em is .92em x 614.61:184.41. */
.pre-lockup { display: block; width: 3.066em; height: .92em; color: var(--cream); }

/* Low right, clear of the headline arriving bottom-left. Fixed-width digits are
   load-bearing, not polish: proportional numerals are different widths and a
   counter without them visibly twitches as it climbs. */
.pre-count { position: absolute; right: 4vw; bottom: 1.6rem; font-family: var(--display); font-size: clamp(4.6rem, 10.5vw, 9.6rem); font-weight: 600; line-height: .82; letter-spacing: -.028em; color: var(--cream); opacity: 0; font-variant-numeric: tabular-nums; }


/* ── Concierge rail ─────────────────────────────────────────────────────────────────────────────
   A tab on the right edge rather than a bubble in the corner, for two reasons. The corner is
   already taken: .video-toggle sits bottom-right inside the hero and the contact section, and a
   fixed widget there covers it. And a circle in the corner is the shape people have learned to read
   as "chat widget", which is the one thing this page should not look like.

   Its label and its link both follow the section on screen, so a reader on Specs opens a message
   about mounting and power rather than a blank chat. Colour follows the band: fixed chrome cannot
   inherit a band's tone, so the script sets data-cc-tone and the tokens below swap. */
.cc {
  --cc-bg: var(--ink);
  --cc-fg: var(--cream);
  --cc-soft: rgba(233, 223, 207, .08);
  --cc-soft-hover: rgba(233, 223, 207, .14);
  --cc-icon-primary: rgba(17, 16, 15, .08);
  /* Full height and shrink-to-fit wide, so the rail centres without a transform. A transform here
     would make this the containing block for the panel's `fixed` position on phones — the same trap
     that once left the phone menu 152px tall. */
  position: fixed;
  inset-block: 0;
  right: 0;
  z-index: 28;
  display: flex;
  align-items: center;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.cc[data-cc-tone="ink"] {
  --cc-bg: var(--paper);
  --cc-fg: var(--ink);
  --cc-soft: rgba(17, 16, 15, .06);
  --cc-soft-hover: rgba(17, 16, 15, .11);
  --cc-icon-primary: rgba(233, 223, 207, .14);
}
.cc > * { pointer-events: auto; }
/* Out of the way while a menu or the demonstration panel is up. Both set this class. */
html.menu-open .cc, html.preloading .cc, html.preloading-out .cc { opacity: 0; pointer-events: none; }

.cc-rail {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1.35rem .7rem 1.35rem .75rem;
  margin-right: env(safe-area-inset-right, 0px);
  border: 0;
  border-radius: 16px 0 0 16px;
  color: var(--cc-fg);
  background: var(--cc-bg);
  font: 500 .8rem/1 var(--text);
  letter-spacing: .04em;
  writing-mode: vertical-rl;
  cursor: pointer;
  /* One shadow, and a soft one: it says the tab sits above the page, not that it is precious. */
  box-shadow: -8px 0 28px -16px rgba(0, 0, 0, .75);
  transition: padding .35s var(--ease), background .45s var(--ease), color .45s var(--ease);
}
.cc-rail:hover { padding-left: 1.05rem; }
.cc-rail-icon { display: block; }
.cc-rail-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cc-rail-label { display: block; }

.cc-panel {
  position: absolute;
  right: calc(100% + .7rem);
  top: 50%;
  transform: translateY(-50%);
  width: 19.25rem;
  padding: 1.1rem;
  border-radius: 21px;
  color: var(--cc-fg);
  background: var(--cc-bg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 44px 90px -34px rgba(0, 0, 0, .8);
  animation: ccRise .32s var(--ease);
}
@keyframes ccRise { from { opacity: 0; transform: translateY(calc(-50% + 10px)); } }
.cc-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .9rem; margin-bottom: .7rem; }
.cc-panel-title { max-width: 13ch; margin: 0; font-family: var(--display); font-size: 1.3rem; font-weight: 500; line-height: 1.08; letter-spacing: -.01em; }
.cc-close { display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: inherit; background: var(--cc-soft); cursor: pointer; transition: background .2s ease; }
.cc-close:hover { background: var(--cc-soft-hover); }
.cc-close svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* The rows are the contact card's, re-pointed at the rail's tone so they read on either band. */
.cc-panel .contact-option { margin-top: .3rem; padding: .6rem .72rem; gap: .72rem; border-radius: 13px; color: var(--cc-fg); background: var(--cc-soft); transition: background .25s ease; }
.cc-panel .contact-option:hover { background: var(--cc-soft-hover); transform: none; }
.cc-panel .contact-option.is-primary { color: var(--cc-bg); background: var(--cc-fg); }
.cc-panel .contact-option.is-primary:hover { background: var(--cc-fg); transform: none; }
.cc-panel .contact-option-icon { width: 29px; height: 29px; background: var(--cc-soft); }
.cc-panel .is-primary .contact-option-icon { background: var(--cc-icon-primary); }
.cc-panel .contact-option-icon svg { width: 14px; height: 14px; }
/* Body type, not the condensed display face: DESIGN.md keeps Oswald for claims, and a row label at
   this size is an instruction. The panel's own heading is still the claim. */
.cc-panel .contact-option b { font-family: var(--text); font-size: .885rem; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
.cc-panel .contact-option small { margin-top: .05rem; font-size: .745rem; line-height: 1.35; opacity: .55; }
.cc-panel .contact-option-arrow { font-size: .95rem; opacity: .4; }

/* Phones and small tablets: the tab stops being a tab.
   An edge tab works on a wide screen because the text column ends well short of the edge. At 600px
   the column runs to within 24px of it, so a vertical tab sits on top of the last word of every
   line. Below the width where this site already swaps its nav for a menu, the tab becomes a pill in
   the bottom-right corner instead — the reach of a thumb, and where a phone user looks for this.

   That corner already had the film controls in it, so they move to the left one below this width.
   They are the secondary of the two: someone who wants to pause a background clip will go looking
   for the control, and someone who wants to ask a question should not have to.

   960px, not the 900px where the nav collapses: --shell leaves 4vw of margin either side, so a 38px
   tab only clears the text column above ~950px. Below that it is standing on the last word. */
@media (max-width: 960px) {
  .video-toggle.is-hero { right: auto; left: max(3.5vw, calc(env(safe-area-inset-left) + 1rem)); }
  .video-toggle.is-corner { right: auto; left: 3.5vw; }

  .cc {
    inset: auto max(1rem, env(safe-area-inset-right, 0px)) calc(1rem + env(safe-area-inset-bottom, 0px)) auto;
    align-items: flex-end;
  }
  .cc-rail {
    writing-mode: horizontal-tb;
    gap: .5rem;
    padding: .5rem .9rem .5rem .62rem;
    margin-right: 0;
    border-radius: 999px;
    font-size: .8rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .16), 0 20px 40px -22px rgba(0, 0, 0, .7);
    transition: opacity .3s var(--ease), transform .3s var(--ease), background .45s var(--ease), color .45s var(--ease);
  }
  /* The desktop hover grow is a mouse affordance and there is no mouse here. */
  .cc-rail:hover { padding-left: .62rem; }
  .cc-rail-label { max-width: 58vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

  /* It steps back with the header, for the same reason the header steps back: while someone is
     going down the page they are reading it, not looking for us. Scrolling up brings both back.
     An open panel keeps its pill, and so does a focused one, so neither can vanish mid-use. */
  .site-header.is-hidden ~ .cc .cc-rail[aria-expanded="false"] {
    opacity: 0;
    transform: translateY(1rem);
    pointer-events: none;
  }
  .site-header.is-hidden ~ .cc .cc-rail[aria-expanded="false"]:focus-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Directly above the pill, sharing its right edge, and never wider than the screen. */
  .cc-panel {
    right: 0;
    left: auto;
    top: auto;
    bottom: calc(100% + .55rem);
    width: min(19.25rem, calc(100vw - 2rem));
    transform: none;
  }
  @keyframes ccRise { from { opacity: 0; transform: translateY(10px); } }
}
/* On a short screen the tab loses its words rather than running past the edges. */
@media (max-height: 560px) and (min-width: 961px) {
  .cc-rail-label { display: none; }
  .cc-rail { padding-block: .9rem; }
  .cc-rail:hover { padding-left: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-panel { animation: none; }
  .cc-rail, .cc { transition: none; }
}

/* Launch fixes, 2026-10-01. */

/* A phone held sideways has no room under the hero copy for the scroll hint, which otherwise lands
   on the intro sentence. The page is plainly scrollable there anyway. */
@media (max-height: 500px) { .scroll-cue { display: none; } }

/* At 208px tall a wide tile is 320px, wider than a 320px screen once the inset is taken off. Cap it
   so the next tile still shows at the edge rather than this one running past it. */
@media (max-width: 600px) {
  .rail-tile.is-wide { width: min(calc(var(--tile-h) * 696 / 452), calc(100vw - 3.5rem)); }
}

/* On phones the hero copy fills most of the screen and crosses the brightest stone in the footage,
   where the desktop scrim (which darkens the left edge) does little. Measured by sampling the film
   under every line at seven points in the loop, the worst 5% of pixels: these keep the kicker and the
   intro above 4.5:1 at 390x844, 375x667 and 360x740, and the short-screen stop does the same at
   320x568, where the copy reaches almost to the top. */
@media (max-width: 600px) {
  .hero-shade { background: linear-gradient(0deg, rgba(6,6,5,.8) 0%, rgba(6,6,5,.66) 40%, rgba(6,6,5,.55) 70%, rgba(6,6,5,.4) 100%); }
}
@media (max-width: 600px) and (max-height: 620px) {
  .hero-shade { background: linear-gradient(0deg, rgba(6,6,5,.82) 0%, rgba(6,6,5,.7) 40%, rgba(6,6,5,.62) 75%, rgba(6,6,5,.5) 100%); }
}

/* A short phone (iPhone SE, 568px) cannot fit the hero copy under its 9rem top padding, so the hero
   grows past the screen and "Request a demo" lands under the WhatsApp pill. The header is 64px; this
   still clears it. */
@media (max-width: 600px) and (max-height: 600px) {
  .hero-copy { padding-top: 5.5rem; }
}

/* A phone held sideways puts the hero's pause control (bottom-left, 44px) over "Request a demo".
   Lifting the copy clears it. */
@media (max-width: 960px) and (max-height: 500px) {
  .hero-copy { margin-bottom: calc(2rem + 44px + 1rem); }
  /* Sized by the screen's height, not its width: at 13vw the headline alone filled a sideways phone
     and pushed the buttons a whole screen down. */
  .hero h1 { font-size: clamp(2.2rem, 12vh, 3.2rem); }
  .hero-copy { padding-top: 5rem; }
}

/* Booking a call is switched off for now: every "Book a 30-minute call" row and the Contact page's
   link to its calendar. Delete this rule (and uncomment #call in contact.html) to bring them back. */
[data-demo="calendar"], [data-demo-calendar], a[href="#call"] { display: none !important; }
@media (min-width: 901px) { .demo-choices { grid-template-columns: repeat(2, 1fr); } }