/* HOLON (concepts/premium-holon.html). The page lives in a world drawn behind it (world.js): above
   a sea of clouds at first light, in cool silver-blue air. Layers: the world and the watches are one
   canvas at the back (the giant words are drawn into it too, so the watches pass in front of them),
   every other word sits above it. Inter Tight for display, Inter for reading; one accent, ice blue.
   Without the 3D (reduced motion, no WebGL2) the hero shows a still of the same world and the
   line-up, the giant words are set in the page, and nothing is pinned. */
@font-face { font-family: 'Inter Tight'; src: url(../fonts/inter-tight-latin-wght.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(../fonts/inter-latin-wght.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #0d1a2d;
  --ink: #eef2fb;
  --ink2: #c9d3ea;
  --muted: #94a2c4;
  --line: rgba(238, 242, 251, .14);
  --line2: rgba(238, 242, 251, .28);
  --acc: #8db0ff;
  --acc-ink: #0a1730;
  --head: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gut: 60px;
  --max: 1320px;
  --nav: 84px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav); }
html, body { margin: 0; }
body { background: linear-gradient(180deg, #1b2e4a 0, #13243c 900px, #0e1b2f 1800px, #0a1424 100%); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 4px; }
.wrap { width: min(var(--max), calc(100% - 2 * var(--gut))); margin-inline: auto; }

/* ---------- type ---------- */
h1, h2, h3, .giant, .note.num b, .price { font-family: var(--head); text-wrap: balance; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 14px 2px rgba(141, 176, 255, .55); flex: none; }
.lead { font-size: 17px; line-height: 1.6; color: var(--ink2); max-width: 34em; }
/* words over the world: a soft shade behind them, so they read wherever the light is */
.hero-copy, .hero-cta .link, .asm-head, .part, .mv-notes .note, .visit h2, .visit .lead, .visit-info { text-shadow: 0 1px 2px rgba(6, 14, 28, .3), 0 0 24px rgba(6, 14, 28, .42); }
/* the first screen's words arrive over the film (its brightest shot is STEEL's morning) */
.hero-copy, .hero-cta .link { text-shadow: 0 1px 3px rgba(6, 14, 28, .45), 0 0 30px rgba(6, 14, 28, .6); }
p { text-wrap: pretty; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; transition: transform .5s var(--ease), background .3s, box-shadow .3s, color .3s; }
.btn.sm { height: 42px; padding: 0 20px; font-size: 13.5px; }
.btn.pri { background: var(--acc); color: var(--acc-ink); box-shadow: 0 10px 40px -10px rgba(141, 176, 255, .6); }
.btn.pri:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -10px rgba(141, 176, 255, .8); }
.btn.ghost { box-shadow: inset 0 0 0 1px var(--line2); color: var(--ink); background: rgba(12, 24, 44, .25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn svg { width: 20px; height: 20px; flex: none; }
.link { position: relative; font-size: 15px; font-weight: 500; color: var(--ink); padding: 6px 0; white-space: nowrap; }
.link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform-origin: right; transform: scaleX(.35); transition: transform .5s var(--ease); }
.link:hover::after { transform-origin: left; transform: scaleX(1); }

/* ---------- navigation ---------- */
.nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 20; overflow-x: clip; }
/* Scrolled, the bar is frosted: its tint and blur on a layer of their own that fades in. One fixed blur,
   so the browser makes it once, before the first scroll turns it on (::before below); a blur that grew
   would need a new one for every radius it passed, made at the first scroll, which then stopped a moment. */
.nav-wrap::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(13, 26, 45, .55); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); opacity: 0; transition: opacity .4s; }
.nav-wrap.scrolled::after { opacity: 1; }
.nav-wrap.scrolled { box-shadow: 0 1px 0 var(--line); }
/* the same frosting once, unseen (1% strong, for a moment), so the browser has made it before the first
   scroll: on the still page as it opens; with the 3D once its programs are on their way
   (frost-ready, set by scene.js), not in its first moments, when the GPU is busiest and the page would
   stop to wait for it */
.nav-wrap::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .01; pointer-events: none; }
.still .nav-wrap::before, .nav-wrap.frost-ready::before { animation: frost-ready .4s .25s; }
@keyframes frost-ready { from, to { background: rgba(13, 26, 45, .55); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); } }
.top { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--nav); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; font-family: var(--head); font-size: 15px; font-weight: 600; letter-spacing: .38em; white-space: nowrap; }
.brand .nm { margin-right: -.38em; }
/* The mark: a whole, and a part within it; its lines draw themselves once. */
.mk { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mk-o { stroke-dasharray: 66; stroke-dashoffset: 66; animation: draw 1.6s var(--ease) .2s forwards; }
.mk-i { stroke: var(--acc); stroke-dasharray: 29; stroke-dashoffset: 29; animation: draw 1.2s var(--ease) .9s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.brand.long { gap: 10px; font-size: 12.5px; letter-spacing: .1em; line-height: 1.2; white-space: normal; }
.brand.long .nm { margin-right: 0; }
.links { display: flex; gap: 38px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.links a { transition: color .3s; }
.links a:hover { color: var(--ink); }
.menu-i { display: none; width: 44px; height: 44px; flex: none; flex-direction: column; justify-content: center; align-items: flex-end; gap: 7px; }
.menu-i i { display: block; height: 1.5px; width: 24px; background: currentColor; transition: transform .4s var(--ease), width .4s var(--ease); }
.menu-i i + i { width: 16px; }
.menu-i[aria-expanded='true'] i { width: 22px; transform: translateY(4.25px) rotate(45deg); }
.menu-i[aria-expanded='true'] i + i { transform: translateY(-4.25px) rotate(-45deg); }
.menu { position: fixed; inset: var(--nav) 0 0; z-index: 19; display: flex; flex-direction: column; gap: 6px; padding: 28px 20px 40px; background: #0d1a2d; }
.menu[hidden] { display: none; }
.menu a:not(.btn) { font-family: var(--head); font-size: 34px; font-weight: 500; letter-spacing: -.02em; padding: 10px 0; border-bottom: 1px solid var(--line); }
.menu .btn { margin-top: 28px; }

/* ---------- the world (one canvas at the back) and its still pictures ---------- */
/* (it comes in quickly, the world only: the film's first watch rises once it is in, never see-through) */
.world { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease-out; }
html.gl-on .world { opacity: 1; }
main, .foot { position: relative; z-index: 1; }
.watch-spot { position: relative; aspect-ratio: 1; }
.watch-spot img { width: 100%; height: 100%; object-fit: contain; transition: opacity .9s var(--ease); }
html.gl-on .watch-spot img { opacity: 0; }

/* ---------- giant words (set here without the 3D; drawn by the world with it) ---------- */
.giant-wrap { position: relative; width: min(var(--max), calc(100% - 2 * var(--gut))); margin-inline: auto; text-align: center; pointer-events: none; }
/* line-height .73: the box is the height of the capitals, its bottom the baseline. */
.giant { display: inline-block; font-weight: 300; line-height: .73; letter-spacing: -.035em; white-space: nowrap; }
/* HOLON behind the three: bold, near-solid frosted white, a soft dark glow behind the letters, so it
   reads at a glance over any sky */
.giant.solid { font-size: 21vw; font-weight: 760; letter-spacing: -.03em; color: #eef2fb; background: linear-gradient(180deg, #fff 0%, rgba(242, 246, 252, .97) 60%, rgba(218, 227, 242, .94) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-top: .02em; filter: drop-shadow(0 0 26px rgba(6, 14, 28, .5)); }
.giant.outline { font-size: 14vw; font-weight: 700; color: transparent; -webkit-text-stroke: 1.2px rgba(214, 226, 255, .42); letter-spacing: -.03em; }
html.gl-on .giant { visibility: hidden; }

/* ---------- hero ---------- */
/* With the 3D the first section is pinned while the scroll turns its stage: SPORT, STEEL, CLASSIC,
   then the three together (scene.js, CHAPTERS); without it, one still screen. */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; }
html.live .hero { height: 460vh; height: 460svh; }
.hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; }
.hero-pin::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(img/bg-sport.webp) center / cover no-repeat; transition: opacity 1.2s var(--ease); }
html.still .hero-pin::before { background-image: url(img/world-hero.webp); }
html.gl-on .hero-pin::before { opacity: 0; }
.hero-stage { position: absolute; inset: 0; }
/* HOLON high, so most of each letter shows above and between the three; the film's names keep the
   line it used to stand on (.film-line, never shown, only measured) */
.hero .giant-wrap { position: absolute; left: 0; right: 0; top: calc(var(--nav) + 1.5vh); }
.hero .giant-wrap.film-line { top: auto; bottom: 36%; visibility: hidden; }
/* where the opening film plays each watch (a box the 3D reads) */
.film-spot { position: absolute; left: 50%; top: 44%; width: min(64vh, 64svh, 50vw, 660px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
/* the line-up the film ends in: Sport, Classic, Steel. The places of the three are kept in step
   with LINEUP_BOX in scene.js (the still picture is drawn from it). */
.lineup { position: absolute; left: 50%; top: 41%; width: min(1180px, 84vw, 128vh); aspect-ratio: 2.15; transform: translate(-50%, -50%); }
/* the three's places (the first section's line-up and the finale's) */
.trio picture, .trio img { position: absolute; inset: 0; width: 100%; height: 100%; }
.trio img { object-fit: contain; transition: opacity .9s var(--ease); }
html.live .trio img, html.gl-on .trio img { opacity: 0; transition: none; }
.trio .watch-spot { position: absolute; aspect-ratio: auto; }
.trio .t-l { left: 5.83%; top: 9%; width: 35.35%; height: 76%; }
.trio .t-m { left: 26.74%; top: 3%; width: 46.51%; height: 100%; }
.trio .t-r { left: 58.83%; top: 9%; width: 35.35%; height: 76%; }
/* while the film plays, the first screen's words wait (the 3D brings them in at its end) */
html.live .hero .eyebrow, html.live .hero h1, html.live .hero .lead, html.live .hero-cta { opacity: 0; }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-bottom: 46px; }
.hero-copy { max-width: 470px; }
.hero h1 { margin-top: 16px; font-size: clamp(28px, 2.4vw, 38px); font-weight: 500; line-height: 1.1; letter-spacing: -.022em; }
.hero .lead { margin-top: 12px; font-size: 16px; max-width: 26em; }
.hero-cta { display: flex; align-items: center; gap: 28px; flex: none; }

/* ---------- assembly: pinned while the parts come together ---------- */
.assembly { position: relative; height: 560vh; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; --ws: min(62vh, 62svh, 40vw, 600px); }
.asm-head { position: absolute; left: 0; right: 0; top: calc(var(--nav) + 22px); z-index: 2; }
.asm-head h2 { margin-top: 16px; font-size: clamp(34px, 3.4vw, 52px); font-weight: 500; line-height: 1.02; letter-spacing: -.032em; }
.asm-head p { margin-top: 12px; color: var(--ink2); font-size: 15.5px; max-width: 24em; }
.asm-stage { position: absolute; inset: 0; }
.asm-stage .watch-spot { position: absolute; left: 50%; top: 54%; width: var(--ws); transform: translate(-50%, -50%); }
.parts { position: absolute; inset: 0; z-index: 2; }
.part { position: absolute; width: 250px; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.part b { display: block; font-family: var(--head); font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.part span { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.part.on { opacity: 1; transform: none; }
.part.l { right: calc(50% + var(--ws) / 2 + 74px); text-align: right; }
.part.r { left: calc(50% + var(--ws) / 2 + 74px); }
/* Each name level with where its line starts on the watch, so no two lines cross. */
.part[data-part='case'] { top: 33%; }
.part[data-part='movement'] { top: 44%; }
.part[data-part='hands'] { top: 55%; }
.part[data-part='dial'] { top: 66%; }
.part[data-part='crystal'] { top: 25%; }
.part[data-part='bezel'] { top: 35.5%; }
.part[data-part='crown'] { top: 46%; }
.part[data-part='caseback'] { top: 56.5%; }
.part[data-part='strap'] { top: 67%; }
.leads { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.leads path { fill: none; stroke: var(--acc); stroke-width: 1; opacity: .85; }
.leads circle { fill: var(--acc); }
.asm-foot { position: absolute; left: 0; right: 0; bottom: 38px; z-index: 2; display: flex; align-items: center; gap: 22px; }
.count { font-family: var(--head); font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.count b { color: var(--ink); font-weight: 600; }
.progress { flex: 0 1 220px; height: 1px; background: var(--line); }
.progress i { display: block; height: 100%; background: var(--acc); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- build yours ---------- */
.build { position: relative; display: grid; align-items: center; min-height: 100vh; min-height: 100svh; padding: 110px 0; }
.build-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 40px; }
.build .watch-spot { width: min(100%, 66vh, 620px); justify-self: center; }
.config { position: relative; z-index: 2; padding: 38px 38px 34px; border-radius: 24px; background: rgba(14, 28, 50, .55); container-type: inline-size; box-shadow: inset 0 0 0 1px var(--line), 0 30px 80px -30px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15); }
.config h2 { margin: 14px 0 26px; font-size: clamp(32px, 2.9vw, 44px); font-weight: 500; line-height: 1.02; letter-spacing: -.03em; }
.opt { padding: 16px 0 18px; border-top: 1px solid var(--line); }
.opt legend { float: left; width: 100%; margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.sw { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.sw label { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 6px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink2); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s, color .3s, background .3s; }
.sw label:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line2); }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sw input:checked + i + span { color: var(--ink); }
.sw label:has(input:checked) { background: rgba(141, 176, 255, .12); box-shadow: inset 0 0 0 1px var(--acc); color: var(--ink); }
.sw label:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.sw i { width: 28px; height: 28px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 6px rgba(0, 0, 0, .35); }
.c-titanium { background: linear-gradient(135deg, #d9dde2, #8e959e 48%, #c4c9cf 52%, #6f767f); }
.c-steel { background: linear-gradient(135deg, #ffffff, #c3c8ce 48%, #f1f3f5 52%, #9aa1a9); }
.c-black { background: linear-gradient(135deg, #5a5e66, #1d1f23 48%, #3d4148 52%, #121316); }
.c-gold { background: linear-gradient(135deg, #fff3cc, #e2bc62 46%, #f7e09d 52%, #c99b3e); }
.t-sport { background: radial-gradient(circle, #25282e 0 46%, #c8f23c 47% 55%, #2b2d32 56%); }
.t-steel { background: radial-gradient(circle, #b9cfe6 0 52%, #9aa1a9 53% 58%, #e8ebef 59%); }
.t-classic { background: radial-gradient(circle, #1b3a86 0 52%, #6f767f 53% 58%, #b4bac1 59%); }
.d-midnight { background: conic-gradient(from 20deg, #1b3a86, #0c1c47, #22489e, #0c1c47, #1b3a86); }
.d-glacier { background: conic-gradient(from 20deg, #d4e3f3, #9fbbdb, #e3eef9, #9fbbdb, #d4e3f3); }
.d-graphite { background: conic-gradient(from 20deg, #3a3e45, #1a1c20, #454a52, #1a1c20, #3a3e45); }
.d-forest { background: conic-gradient(from 20deg, #1f5a48, #0b2a21, #276a55, #0b2a21, #1f5a48); }
.s-rubber { background: repeating-linear-gradient(90deg, #1b1c20 0 3px, #26282d 3px 4px); }
.s-leather { background: radial-gradient(circle at 50% 50%, transparent 54%, #c3c9d3 55% 57%, transparent 58%), #1b2440; }
.s-bracelet { background: linear-gradient(90deg, #8e959e 0 30%, #e3e6ea 30% 70%, #8e959e 70%); }
.total { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 0 20px; border-top: 1px solid var(--line); }
.total .label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.price { display: block; margin-top: 4px; font-size: 34px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; transition: opacity .25s; }
.price.swap { opacity: .35; }
.sum { color: var(--ink2); font-size: 14.5px; padding-bottom: 6px; }
.config .btn { width: 100%; }
.config .note { margin-top: 12px; font-size: 13.5px; color: var(--muted); text-align: center; }
/* a narrow panel: the choices as even tiles, one row each (never one left over on a row) */
@container (max-width: 420px) {
  .sw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .n4 .sw { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sw label { flex-direction: column; justify-content: center; height: auto; min-height: 68px; padding: 10px 2px 9px; gap: 7px; border-radius: 14px; font-size: 12.5px; line-height: 1.2; text-align: center; }
}

/* ---------- the movement ---------- */
.movement { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: center; min-height: 100vh; min-height: 100svh; padding: 100px 0; overflow: clip; }
/* CALIBRE behind the watch's back, just below the notes (never under their words) */
.movement .giant-wrap { grid-row: 1; grid-column: 1; align-self: start; margin-top: 300px; }
.movement .watch-spot { grid-row: 1; grid-column: 1; justify-self: center; width: min(74vh, 74svh, 46vw, 680px); }
/* its two notes in one column at the top right, beside the watch's back (clear of it as the page
   passes), so they leave together, with CALIBRE, before the finale's sunrise */
.mv-notes { position: absolute; left: 0; right: 0; top: 110px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 30px; pointer-events: none; }
.mv-notes .note { width: 300px; max-width: 100%; }
.mv-notes .note p { margin-top: 16px; color: var(--ink2); font-size: 16px; }
.note.num b { display: block; font-size: clamp(60px, 6.4vw, 104px); font-weight: 300; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.note.num span { display: block; margin-top: 10px; color: var(--ink2); font-size: 15px; font-weight: 500; }

/* ---------- visit: the finale, the page's last screen ---------- */
/* The three (HOLON behind them) fill what the words leave free; the words, the details and a small
   footer sit under them, over the photograph; nothing of its own behind (no band). */
.visit { position: relative; }
.visit-stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; height: 100vh; height: 100svh; min-height: 560px; padding-top: var(--nav); }
.trio-row { position: relative; container-type: size; }
.finale { position: absolute; left: 50%; top: 50%; width: min(calc(100cqw - 2 * var(--gut)), calc(100cqh * 2.05), 1180px); aspect-ratio: 2.15; transform: translate(-50%, -50%); }
.end-word { position: absolute; left: 0; right: 0; top: 3%; }
.visit-copy { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 4px 0 20px; }
.visit h2 { font-size: clamp(30px, 2.9vw, 44px); font-weight: 500; line-height: 1.04; letter-spacing: -.03em; }
.visit .lead { margin-top: 8px; font-size: 15.5px; max-width: 30em; }
.visit-cta { display: flex; gap: 14px; flex: none; }
.visit-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); text-align: left; }
.visit-info div { padding: 14px 24px 12px 0; }
.visit-info div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.visit-info span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink2); }
.visit-info b { display: block; margin-top: 6px; font-family: var(--head); font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
html.still .visit-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(img/world-hero.webp) center / cover no-repeat; }

/* ---------- footer ---------- */
.foot { padding: 10px 0 16px; font-size: 13px; color: var(--ink2); }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); text-shadow: 0 1px 2px rgba(6, 14, 28, .4); }
.foot .brand { color: var(--ink); max-width: 100%; white-space: normal; line-height: 1.3; }
.foot-in > span { text-wrap: balance; }
.foot .mk-o, .foot .mk-i { animation: none; stroke-dashoffset: 0; }
.fl { display: flex; gap: 28px; }
.fl a:hover { color: var(--ink); }

/* ---------- arriving as you scroll ---------- */
html.js .rv { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
html.js .rv.in { opacity: 1; transform: none; }

/* ---------- smaller computers and tablets ---------- */
@media (max-width: 1100px) {
  :root { --gut: 40px; }
  .links { gap: 24px; }
  .part { width: 220px; }
  .part.l { right: calc(50% + var(--ws) / 2 + 26px); }
  .part.r { left: calc(50% + var(--ws) / 2 + 26px); }
  .build-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .config { padding: 30px 28px 28px; }
}
@media (max-width: 860px) {
  .links { display: none; }
  .menu-i { display: flex; }
  .top .btn { display: none; }
  .build-grid { grid-template-columns: 1fr; gap: 10px; }
  .build .watch-spot { width: min(78vw, 52vh); }
  .visit-info { grid-template-columns: 1fr; }
  .visit-info div, .visit-info div + div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-left: 0; }
  .visit-info div + div { border-top: 1px solid var(--line); }
  .visit-info b { margin-top: 0; text-align: right; }
}
/* Between phone and computer the labels would crowd the watch: one at a time, under it. */
@media (max-width: 980px) {
  .pin { --ws: min(56vh, 56svh, 74vw, 520px); }
  .asm-stage .watch-spot { top: 47%; }
  .part, .part.l, .part.r { left: var(--gut); right: var(--gut); top: auto !important; bottom: 92px; width: auto; text-align: center; }
  .part.on { opacity: 0; }
  .part.now { opacity: 1; transform: none; }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {
  :root { --gut: 20px; --nav: 64px; }
  .brand { font-size: 14px; letter-spacing: .34em; }
  .brand .nm { margin-right: -.34em; }
  /* The watch high in the screen, resting on the word; the words under the horizon. */
  .hero-pin::before { background-image: url(img/bg-sport-phone.webp); }
  html.still .hero-pin::before { background-image: url(img/world-hero-phone.webp); }
  /* HOLON just above the three, its foot behind their tops */
  .hero .giant-wrap { top: calc(31% - 36.5vw); }
  .hero .giant-wrap.film-line { top: auto; bottom: 40%; }
  .film-spot { top: 33%; width: min(90vw, 46svh); }
  .lineup { top: 31%; width: 100%; aspect-ratio: 1.08; }
  .trio .t-l { left: 0.85%; top: 19%; width: 46.3%; height: 50%; }
  .trio .t-m { left: 15.74%; top: 18%; width: 68.52%; height: 74%; }
  .trio .t-r { left: 51.85%; top: 19%; width: 46.3%; height: 50%; }
  .finale { width: min(calc(100cqw - 2 * var(--gut)), calc(100cqh * 1.08)); aspect-ratio: 1.08; }
  .end-word { top: calc(50cqh - min(100cqw - 2 * var(--gut), 108cqh) * .222 - 14.2vw); }
  .hero-foot { flex-direction: column; align-items: stretch; gap: 18px; padding-bottom: 26px; }
  .hero .eyebrow { display: none; }
  .hero h1 { margin-top: 12px; font-size: 27px; }
  .hero .lead { margin-top: 8px; font-size: 15px; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta .link { align-self: center; }
  .hero-cta .link::after { transform-origin: center; }
  .assembly { height: 640vh; }
  .pin { --ws: min(86vw, 46svh); }
  .asm-head { top: calc(var(--nav) + 10px); }
  .asm-head h2 { margin-top: 10px; font-size: 30px; }
  .asm-head p { display: none; }
  .asm-stage .watch-spot { top: 46%; }
  .part, .part.l, .part.r { bottom: 84px; }
  .part b { font-size: 18px; }
  .asm-foot { bottom: 30px; justify-content: center; }
  .progress { flex-basis: 140px; }
  /* (with the 3D, room after the configurator: a watch shows there as it passes) */
  .build { padding: 84px 0 72px; }
  html.live .build { padding-bottom: 150px; }
  .build .watch-spot { width: min(80vw, 44svh); }
  /* The configurator, compact, so the watch always has room above or below it as the page passes:
     two choices to a row, each a row of swatches, the chosen one named under it. */
  .config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; padding: 20px 16px 16px; border-radius: 20px; background: rgba(14, 28, 50, .9); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .config > :not(.opt) { grid-column: 1 / -1; }
  .config .eyebrow { display: none; }
  .config h2 { margin: 0 0 12px; font-size: 27px; }
  .opt { position: relative; padding: 11px 0 30px; }
  .opt legend { margin-bottom: 10px; font-size: 10.5px; letter-spacing: .18em; }
  .sw, .n4 .sw { display: flex; flex-wrap: nowrap; gap: 5px; }
  .sw label { position: static; width: 37px; height: 37px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; }
  .sw i { width: 25px; height: 25px; }
  .sw label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sw label:has(input:checked) span { left: 0; bottom: 9px; width: auto; height: auto; overflow: visible; clip-path: none; font-size: 12.5px; line-height: 1.2; }
  .total { padding: 12px 0 14px; }
  .total .label { font-size: 11px; }
  .price { margin-top: 2px; font-size: 27px; line-height: 1.15; }
  .sum { font-size: 13px; padding-bottom: 3px; }
  .config .btn { height: 48px; }
  .config .note { margin-top: 9px; font-size: 12.5px; }
  /* The movement: the note and the number (beside its words), then the caseback. */
  .movement { grid-template-rows: auto auto auto; padding: 84px 0 64px; min-height: 0; }
  .mv-notes { position: static; display: contents; }
  .mv-notes .note { width: auto; }
  .mv-notes .note:first-child { grid-row: 1; padding: 0 var(--gut); max-width: none; }
  .note.num { grid-row: 2; justify-self: end; display: flex; align-items: flex-end; gap: 12px; max-width: none; padding: 14px var(--gut) 0; text-align: left; }
  .note.num b { font-size: 60px; }
  .note.num span { max-width: 8.6em; margin: 0 0 3px; font-size: 14px; line-height: 1.35; }
  .movement .giant-wrap, .movement .watch-spot { grid-row: 3; }
  .movement .giant-wrap { align-self: center; margin-top: 0; }
  .movement .watch-spot { width: min(92vw, 52svh); }
  .visit-copy { flex-direction: column; align-items: stretch; gap: 12px; padding: 0 0 14px; }
  .visit h2 { font-size: 26px; }
  .visit .lead { margin-top: 6px; font-size: 14px; }
  .visit-cta { width: 100%; }
  .visit-cta .btn { width: 100%; height: 48px; }
  /* the details compact (each on one line, its name beside it), so the page's last screen still
     shows the three above them */
  .visit-info span { font-size: 10.5px; }
  .visit-info b { font-size: 14px; }
  .foot { padding: 6px 0 12px; font-size: 12px; }
  .foot-in { gap: 6px 14px; padding-top: 10px; }
  .foot .brand { font-size: 12.5px; }
  html.still .visit-stage::before { background-image: url(img/world-hero-phone.webp); }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 24px; }
  .hero .lead { font-size: 14.5px; }
  .asm-head h2 { font-size: 27px; }
  .config { column-gap: 12px; }
  .sw, .n4 .sw { gap: 4px; }
  .sw label { width: 31px; height: 31px; }
  .sw i { width: 22px; height: 22px; }
}

/* ---------- still and calm: reduced motion, or no 3D ---------- */
html.still .assembly { height: auto; padding: 110px 0 80px; }
html.still .pin { position: static; height: auto; overflow: visible; display: grid; gap: 24px; }
html.still .asm-head, html.still .asm-stage, html.still .asm-foot { position: static; }
html.still .asm-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; width: min(var(--max), calc(100% - 2 * var(--gut))); margin-inline: auto; }
html.still .asm-stage .watch-spot { position: relative; left: auto; top: auto; transform: none; width: min(100%, 560px); justify-self: center; order: 1; }
html.still .parts { position: static; order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
html.still .part, html.still .part.l, html.still .part.r { position: static; width: auto; opacity: 1; transform: none; text-align: left; }
html.still .leads, html.still .asm-foot { display: none; }
@media (max-width: 860px) {
  html.still .asm-stage { grid-template-columns: 1fr; }
  html.still .parts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .world { display: none; }
  .mk-o, .mk-i { animation: none; stroke-dashoffset: 0; }
  html.js .rv, html.js .rv.in { opacity: 1; transform: none; transition: none; }
  .btn, .link::after { transition: none; }
}