/* Open Link Company: The Cobalt Wall.
   One plain typeface on a near-black page; every piece sits on the cobalt of the Castlemead wall.
   Tokens on :root are the only colours, sizes and timings in use. No serif, no monospace, no
   tracked eyebrows, no hover transforms. Breakpoints: phone (max 639), two-up (max 899),
   compact chrome (max 1023), desktop (min 1024), wide (min 1200), xwide (min 1440). */

/* ------------------------------------------------------------------ font
   Hanken Grotesk v12, variable weight axis 100 to 900 (read from the fvar table), SIL Open Font
   License (OFL-HankenGrotesk.txt beside the files). /fonts/* is cached for a year as immutable,
   so a changed file must get a new name. */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/hanken-grotesk-latin-v12.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/hanken-grotesk-latin-ext-v12.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ------------------------------------------------------------------ tokens */
:root {
  /* colour */
  --ground: #0B1018;        /* page background everywhere; ink text on white buttons */
  --ground-2: #131A26;      /* raised surfaces only. Never on product cards */
  --rule: #222B39;          /* 1px dividers only */
  --field: #5B6779;         /* borders of inputs, selects, checkboxes, toggles, header WhatsApp outline */
  --text: #F2F4F7;          /* headings, names, prices, nav, outline buttons */
  --text-2: #A3ADBB;        /* body paragraphs, deks, brand line, facts line, labels */
  --text-3: #7D8899;        /* fine print, numerals, counts, No. 81, underline colour at rest */
  --wall: #1E4A92;          /* THE cobalt. Never a text colour */
  --tile: var(--wall);      /* ground of every product tile; Will's pale option = var(--wall-alt) */
  --wall-text: #C9D6EC;     /* secondary text and numerals on cobalt */
  --wall-rule: rgba(255,255,255,.22);
  --wall-alt: #C9D9F0;      /* inner panel of the raw-render fallback only */
  --paper: #FFFFFF;         /* primary button fill, focus ring, saved heart, toggle on, monogram */
  --paper-hover: #DCE3EE;
  --hover-tint: rgba(255,255,255,.06);
  --contact: #030C1E;
  --cut-shadow: drop-shadow(0 16px 22px rgb(3 12 30 / .45));
  --cut-shadow-sm: drop-shadow(0 4px 6px rgb(3 12 30 / .45));
  --error: #F2B8B5;         /* form error text only */
  --scrim: rgba(5,8,13,.8);
  --scrim-menu: rgba(5,8,13,.6);
  --lightbox: rgba(11,16,24,.96);
  --chip: rgba(11,16,24,.78);
  /* type */
  --font: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  /* layout */
  --maxw: 1320px; --pad: 24px; --gap: 24px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --sec: 64px;
  --radius: 2px;            /* buttons, inputs, toggles, panels, modals, chips. Images and tiles are always 0 */
  --hdr-h: 72px; --util-h: 36px; --bbar-h: 65px;
  /* imagery */
  --cut-w: 70%;             /* cut-out width inside a tile */
  --mat: 4%;                /* cobalt mat around photographs */
  /* motion. --t-fast, --t-menu and --t-swap-static are the timings of pages that never get
     html.motion (admin, dashboard, browsers without IntersectionObserver). Everything new lives
     under html.motion (see MOTION near the end of this file). */
  --t-fast: 150ms; --t-menu: 120ms; --t-swap-static: 300ms;
  /* easing: no y value outside 0 to 1, so nothing springs, bounces or lifts */
  --ease-std:  cubic-bezier(.25, .1, .25, 1);  /* colour, underline colour, crossfades, scrims */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);   /* quint-out: arrivals, reveals, panels opening, cut-out push-in */
  --ease-move: cubic-bezier(.4, 0, .2, 1);     /* travel between two resting states: sheets, header condense, lightbox, accordions */
  --ease-exit: cubic-bezier(.4, 0, 1, 1);      /* anything leaving */
  /* durations: quick to respond, slow to settle */
  --t-press: 90ms;        /* :active fill */
  --t-colour: 200ms;      /* hover colour, background and border in */
  --t-settle: 400ms;      /* link underline and colour returning to rest */
  --t-line: 300ms;        /* nav underline drawing in */
  --t-exit: 180ms;        /* overlays, menus and toasts leaving */
  --t-fade: 240ms;        /* scrims, mega panel, toast in, grid swap */
  --t-accordion: 280ms;   /* block-size of user-opened disclosures */
  --t-panel: 360ms;       /* modal, search, sheet travel, mobile menu, header condense, wizard step */
  --t-flip: 420ms;        /* lightbox grow from the gallery tile */
  --t-swap: 450ms;        /* card second-image crossfade in */
  --t-swap-out: 300ms;    /* crossfade back */
  --t-reveal: 600ms;      /* one-time scroll reveal of home and editorial groups */
  --t-zoom: 700ms;        /* cut-out push-in on hover */
  --t-zoom-out: 450ms;
  --t-land: 400ms;        /* a below-the-fold watch arriving on its still cobalt tile */
  --t-page-out: 160ms;    /* view transition, old page */
  --t-page-in: 340ms;     /* view transition, new page, starting as the old one has almost gone */
  /* distances, scales and intent */
  --rise: 12px;           /* reveal travel */
  --nudge: 8px;           /* modal, search panel and toast travel */
  --drift: 12px;          /* wizard step and lightbox step travel, signed by direction */
  --condense: 12px;       /* header 72 to 60, by transform only */
  --zoom: 1.04;           /* cut-out push-in */
  --stagger: 60ms;        /* JS caps the reveal stagger at 180ms */
  --intent-card: 60ms;    /* hover intent before a card swaps to its second image */
  --intent-mega: 80ms;    /* JS delay before the first mega panel opens on mouseenter */
  color-scheme: dark;
}
@media (max-width: 1023px) { :root { --hdr-h: 56px; --util-h: 32px; } }
@media (max-width: 639px)  { :root { --pad: 16px; --sec: 48px; } }
/* The height the utility bar and header take once app.js has drawn them (109px desktop, 89px below 1024) */
:root { --chrome-h: calc(var(--util-h) + var(--hdr-h) + 1px); }

/* Legacy aliases: safety net for missed inline styles and src/worker.js fallback pages.
   Never use in new markup. */
:root { --bg: var(--ground); --surface: var(--ground-2); --surface-2: var(--ground-2); --line: var(--rule); --ink: var(--text); --muted: var(--text-2); --gold: var(--text); --gold-soft: var(--text); --btn-blue: var(--wall); --field-line: var(--field); --serif: var(--font); --sans: var(--font); --mono: var(--font); }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* The hidden attribute always wins, even on elements whose class sets display (.btn, .lb-nav) */
[hidden] { display: none !important; }
html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hdr-h) + 16px);
  scroll-behavior: smooth;
}
body {
  min-height: 100vh;
  background: var(--ground); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 26px; font-weight: 400; font-style: normal;
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0; text-transform: none;
}
/* Page load stability: app.js draws the utility bar and header at the top of <body>. Until it has
   (class olc-chrome on <html>, set in the same task), their height is reserved, so <main> never
   jumps down by 109px. Worker fallback pages do not load app.js and never match; with scripting
   off nothing is reserved. */
@media (scripting: enabled) {
  html:not(.olc-chrome) body:has(> script[src^="/js/app.js"]) { padding-top: var(--chrome-h); }
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; text-align: inherit; }
b, strong { font-weight: 600; }
em, i { font-style: normal; color: var(--text); }
small { font-size: 14px; line-height: 20px; }
hr { border: 0; height: 1px; background: var(--rule); margin: 24px 0; }
::selection { background: var(--wall); color: #fff; }

/* ------------------------------------------------------------------ accessibility helpers */
.visually-hidden, .sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}
.hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; overflow: hidden; pointer-events: none; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 16px; border-radius: var(--radius);
  background: var(--paper); color: var(--ground);
  font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none;
}
.skip:focus { left: 16px; top: 8px; }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------------ icons (one SVG set, white via currentColor) */
svg.ic { display: block; flex: none; overflow: visible; }
.ic8 { width: 8px; height: 8px; }
.ic10 { width: 10px; height: 10px; }
.ic16 { width: 16px; height: 16px; }
.ic18 { width: 18px; height: 18px; }
.ic20 { width: 20px; height: 20px; }
.ic24 { width: 24px; height: 24px; }

/* ------------------------------------------------------------------ type scale */
h1, h2, h3, h4, h5, h6 { color: var(--text); letter-spacing: 0; text-transform: none; }
h1, .h1 { font-size: 40px; line-height: 46px; font-weight: 400; letter-spacing: -.015em; text-wrap: balance; }
h2, .h2 { font-size: 24px; line-height: 30px; font-weight: 400; letter-spacing: -.01em; text-wrap: balance; }
h3, .h3 { font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: 0; }
h4 { font-size: 15px; line-height: 22px; font-weight: 600; }
h5, h6 { font-size: 14px; line-height: 20px; font-weight: 500; }
.h2b { font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: -.01em; text-wrap: balance; }
.slogan { font-size: 20px; line-height: 28px; font-weight: 400; color: var(--text); margin-top: 12px; }
.lead { font-size: 17px; line-height: 28px; color: var(--text-2); max-width: 56ch; margin-top: 16px; }
.sub { font-size: 16px; line-height: 26px; color: var(--text-2); max-width: 64ch; margin-top: 16px; }
.dek { font-size: 14px; line-height: 20px; color: var(--text-2); margin-top: 4px; }
.lab { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-2); letter-spacing: 0; text-transform: none; }
.p15 { font-size: 15px; line-height: 24px; color: var(--text-2); }
.small { font-size: 14px; line-height: 20px; }
.micro { font-size: 13px; line-height: 18px; }
.muted { color: var(--text-2); }
.brand { display: block; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.logotext { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
@media (max-width: 639px) {
  h1, .h1 { font-size: 30px; line-height: 36px; }
  h2, .h2 { font-size: 21px; line-height: 28px; }
  .h2b { font-size: 24px; line-height: 30px; }
  .slogan { font-size: 18px; line-height: 26px; margin-top: 8px; }
  .lead { font-size: 16px; line-height: 26px; margin-top: 12px; }
  .sub { font-size: 15px; line-height: 24px; margin-top: 12px; }
}

/* ------------------------------------------------------------------ layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.g12 > * { min-width: 0; }
@media (max-width: 1023px) { .g12 { display: block; } }
main { display: block; padding-bottom: var(--sec); }
main.flush-end { padding-bottom: 0; }
.sec { margin-top: var(--sec); }
.intro + .sec, .phd + .sec { margin-top: 32px; }
@media (max-width: 639px) { .intro + .sec, .phd + .sec { margin-top: 24px; } }
/* A page that opens on a plain section (a journal post) starts its head where a .phd would */
main > .sec:first-child { margin-top: 48px; }
@media (max-width: 639px) { main > .sec:first-child { margin-top: 24px; } }

/* ------------------------------------------------------------------ links and buttons */
/* Inline links inside running text. :where keeps this at zero specificity so components win. */
:where(main p, main li, main dd, main td, .modal p, .form-error) a:where(:not(.btn):not(.tl)) {
  color: var(--text);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--text-3);
  transition: text-decoration-color var(--t-fast);
}
:where(main p, main li, main dd, main td, .modal p, .form-error) a:where(:not(.btn):not(.tl)):hover { text-decoration-color: var(--text); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 6px 24px; margin: 0;
  border: 1px solid var(--text); border-radius: var(--radius);
  background: transparent; color: var(--text);
  font-family: var(--font); font-size: 15px; line-height: 20px; font-weight: 500;
  letter-spacing: 0; text-transform: none; text-align: center; text-decoration: none;
  cursor: pointer; vertical-align: middle; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn:hover { background-color: var(--hover-tint); }
.btn.solid { background: var(--paper); color: var(--ground); border-color: var(--paper); }
.btn.solid:hover, .btn.solid:active { background: var(--paper-hover); border-color: var(--paper-hover); }
.btn.sm { min-height: 40px; padding: 4px 16px; font-size: 14px; }
.btn.full { display: flex; width: 100%; }
.btn.warn { color: var(--error); border-color: var(--error); }
.btn:disabled, a.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
a.btn[aria-disabled="true"] { pointer-events: none; }
.btn[aria-busy="true"] { opacity: .55; cursor: progress; }
.tl, .linkbtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; margin: 0; background: none; border: 0;
  font-family: var(--font); font-size: 15px; line-height: 20px; font-weight: 500; color: var(--text);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--text-3);
  cursor: pointer; transition: text-decoration-color var(--t-fast);
}
.tl:hover, .linkbtn:hover { text-decoration-color: var(--text); }
@media (max-width: 1023px), (pointer: coarse) { .tl { min-height: 44px; } }
@media (max-width: 639px) {
  .btn.m-tl {
    min-height: 44px; padding: 0; border: 0; background: none; gap: 8px;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--text-3);
  }
  .btn.m-tl:hover { background: none; text-decoration-color: var(--text); }
}

/* ------------------------------------------------------------------ section head */
.sh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 24px; row-gap: 2px; margin-bottom: 16px; }
.sh > div { min-width: 0; }
.sh-links { display: flex; flex-wrap: wrap; column-gap: 24px; }
@media (max-width: 639px) { .sh { margin-bottom: 20px; } }

/* ------------------------------------------------------------------ home intro and page head */
.intro { padding: 40px 0 24px; }
.intro .g12 { align-items: end; }
.intro-txt { grid-column: 1 / span 7; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.acts .tl { margin-left: 12px; }
.phd { padding: 48px 0 32px; }
.phd .h1 { max-width: 744px; }
.dek.split { display: flex; flex-wrap: wrap; column-gap: 12px; }
@media (max-width: 639px) {
  .intro { padding: 24px 0; }
  .intro .acts { column-gap: 28px; row-gap: 16px; }
  .intro .acts .btn.solid { flex: 0 0 100%; }
  .acts .tl { margin-left: 0; }
  .phd { padding: 24px 0 20px; }
}

/* ------------------------------------------------------------------ home landing
   The home page's first screen, before the watches. Desktop: the line, the doors and the facts on the
   left; the showroom film (the OLC monogram on the cobalt wall) standing the full height on the right,
   with a quiet cue down to the cabinet. Under 1024px the film fills the screen behind the words, which
   sit on its dark lower third, and the watches begin below the fold. The film is a still until its clip
   is playing (app.js film()). */
.landing { position: relative; padding: 0; }
.land-g { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); min-height: calc(100svh - var(--chrome-h)); }
.land-txt { grid-column: 1 / span 7; align-self: center; padding: 56px 0 104px; }
.landing .h1 { font-size: clamp(44px, 4.2vw, 60px); line-height: 1.06; letter-spacing: -.025em; max-width: 13em; }
.landing .slogan { font-size: 22px; line-height: 30px; margin-top: 16px; }
.landing .lead { margin-top: 20px; }
.landing .acts { margin-top: 32px; }
.landing .facts.f-desk { grid-column: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--rule); }
.landing .facts.f-desk b { font-size: 18px; line-height: 26px; }
.land-film { position: relative; grid-column: 8 / span 5; overflow: hidden; background: var(--wall); }
.land-film > img, .land-film > video, .fph > video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 36%; }
.fph { position: relative; }
.fph > video { object-position: 50% 40%; }
.land-film > video, .fph > video { opacity: 0; transition: opacity 900ms var(--ease-std); }
:is(.land-film, .fph).is-playing > video { opacity: 1; }
.film-pause {
  position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center;
  padding: 0; border: 1px solid rgb(255 255 255 / .4); border-radius: 0; background: rgb(11 16 24 / .5); color: #fff; cursor: pointer;
  opacity: 0; transition: opacity var(--t-fade, 240ms) var(--ease-std);
}
.land-film .film-pause { right: auto; left: 12px; }
:is(.land-film, .fph).is-playing .film-pause, .film-pause:focus-visible, .film-pause.is-paused { opacity: 1; }
.film-pause:hover { background: rgb(11 16 24 / .75); }
.film-pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.land-cue { position: absolute; left: var(--pad); bottom: 32px; display: inline-flex; align-items: center; gap: 14px; font-size: 14px; line-height: 20px; color: var(--text-2); text-decoration: none; }
.land-cue i { position: relative; display: block; width: 1px; height: 40px; background: var(--rule); overflow: hidden; }
.land-cue i::after { content: ''; position: absolute; inset: 0; background: var(--text); transform: scaleY(0); transform-origin: top; }
.land-cue:hover { color: var(--text); }
.landing + .sec { margin-top: var(--sec); }
@media (max-width: 1023px) {
  .land-g { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100svh - var(--chrome-h) - var(--bbar-h)); }
  .land-film { position: absolute; inset: 0; }
  .land-film::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgb(11 16 24 / .96) 0%, rgb(11 16 24 / .86) 34%, rgb(11 16 24 / .35) 62%, rgb(11 16 24 / 0) 82%); }
  .land-film > img, .land-film > video { object-position: 50% 22%; }
  .film-pause { z-index: 3; }
  .land-film .film-pause { top: 12px; bottom: auto; left: auto; right: var(--pad); }
  .land-txt { position: relative; z-index: 2; padding: 40vh 0 32px; max-width: 640px; }
  .landing .lead { color: #C3CBD6; }
  .land-cue { display: none; }
}
@media (max-width: 1023px) and (min-width: 640px) { .landing .h1 { font-size: 48px; line-height: 52px; } }
@media (min-width: 1024px) and (max-height: 840px) {
  .land-txt { padding: 28px 0 76px; }
  .landing .h1 { font-size: clamp(40px, 3.8vw, 54px); }
  .landing .lead { margin-top: 14px; }
  .landing .acts { margin-top: 24px; }
  .landing .facts.f-desk { margin-top: 32px; padding-top: 16px; }
  .land-cue { bottom: 20px; }
}
@media (max-width: 639px) {
  .landing .h1 { font-size: 36px; line-height: 40px; }
  .landing .slogan { font-size: 19px; line-height: 26px; margin-top: 10px; }
  .landing .lead { font-size: 16px; line-height: 25px; margin-top: 14px; }
  .landing .acts { margin-top: 22px; }
  .land-txt { padding-top: 34vh; }
}

/* ------------------------------------------------------------------ facts row (static, never animated) */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); column-gap: 24px; row-gap: 14px;
  padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-size: 14px; line-height: 20px; color: var(--text-2);
}
.facts > * { min-width: 0; }
.facts b { display: block; font-weight: 600; color: var(--text); }
.facts.f-desk { grid-column: 8 / span 5; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; padding: 0; border: 0; }
.facts.f-desk b { font-size: 20px; line-height: 28px; }
.facts.f-mob { margin-top: 40px; }
@media (min-width: 1024px) { .facts.f-mob { display: none; } }
@media (max-width: 1023px) { .facts.f-desk { display: none; } }
@media (max-width: 639px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } }

/* ------------------------------------------------------------------ tile: every product image area
   Flat cobalt, radius 0, never tinted or overlaid. Cut-outs stand at --cut-w with a contact shadow;
   photographs fill the tile inside a 4% mat. The mat is padding on the image itself, so it resolves
   against the tile's own width wherever the tile sits. */
.tile {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4;
  margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden;
  background: var(--tile); color: var(--wall-text);
}
.tile.r45 { aspect-ratio: 4 / 5; }
button.tile { cursor: zoom-in; font: inherit; }
.tile img { display: block; max-width: none; }
.tile.is-cut { display: flex; align-items: center; justify-content: center; }
.tile.is-cut > .t-main {
  flex: none; width: calc(var(--cut-w) * var(--cut-k, 1)); height: auto;
  max-height: 100%; object-fit: cover; /* an over-tall cut keeps its width and is clamped, so its fade stays inside the tile */
  filter: var(--cut-shadow);
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.tile.is-mat > .t-main { width: 100%; height: 100%; padding: var(--mat); object-fit: cover; object-position: var(--pos, 50% 50%); }
.tile.is-raw > .raw { display: block; width: 100%; height: 100%; padding: var(--mat); background: var(--wall-alt); background-clip: content-box; isolation: isolate; }
.tile.is-raw .t-main { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: darken; }
.tile.is-art { display: flex; align-items: center; justify-content: center; }
.tile.is-art > .art { display: block; width: 54%; color: var(--wall-text); }
.tile.is-art svg { width: 100%; height: auto; }
/* Second photo on hover (hover devices only, added by app.js only when one exists) */
.tile > .t-alt { position: absolute; inset: 0; width: 100%; height: 100%; padding: var(--mat); object-fit: cover; opacity: 0; transition: opacity var(--t-swap-static); }
.tile > .t-alt.t-altcut {
  inset: 0; margin: auto; padding: 0; height: auto; width: calc(var(--cut-w) * var(--cut-k, 1)); max-height: 100%; object-fit: cover;
  filter: var(--cut-shadow);
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.tile.has-alt .t-main { transition: opacity var(--t-swap-static); }
.tile.mini { width: 64px; flex: none; }
.tile.mini.is-cut > .t-main { width: 60%; filter: var(--cut-shadow-sm); }

/* ------------------------------------------------------------------ product card */
.product { position: relative; min-width: 0; }
.plink { display: flex; flex-direction: column; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.plink > * { min-width: 0; }
.product .brand, .plink > .tile + .model { margin-top: 14px; }
/* The underline is always there in a transparent colour, so hover only changes its colour (and,
   under html.motion, that colour can fade in and settle back out) */
.model { display: block; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--text); margin-top: 2px; text-wrap: balance; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: transparent; }
.fl { display: flex; flex-wrap: wrap; column-gap: 12px; font-size: 13px; line-height: 18px; color: var(--text-2); margin-top: 2px; }
.price { display: block; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--text); margin-top: 6px; }
.price.is-sold { font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.st { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0; color: var(--text-2); margin-left: 12px; }
.fav {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  background: none; border: 0; color: rgba(255,255,255,.92); cursor: pointer;
}
.fav svg { fill: transparent; filter: drop-shadow(0 0 2px rgb(3 12 30 / .7)) drop-shadow(0 1px 1px rgb(3 12 30 / .5)); } /* transparent, not none, so the fill can ease when saved */
.fav.on { color: var(--paper); }
.fav.on svg { fill: var(--paper); stroke: var(--paper); }
.fav:focus-visible { outline-offset: -2px; }
.plink:focus-visible { outline-offset: 4px; }
.plink:focus-visible .model { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .product:hover .model { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--text); }
  .product:hover .t-alt, .plink:focus-visible .t-alt { opacity: 1; }
  .product:hover .has-alt .t-main, .plink:focus-visible .has-alt .t-main { opacity: 0; }
}
@media (max-width: 639px) {
  .product .brand, .plink > .tile + .model { margin-top: 12px; }
  .model, .price { font-size: 15px; line-height: 21px; }
  .fl { column-gap: 10px; }
}

/* ------------------------------------------------------------------ product grids */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 40px; }
@media (min-width: 900px) {
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pgrid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pgrid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Four watches a row from tablet landscape up (the home cabinet is .c4 from 900px) */
@media (min-width: 1024px) { .pgrid:not(.c3) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Phones and small tablets keep the home cabinet to three rows of two */
@media (max-width: 899px) { #featuredList > .product:nth-child(n+7) { display: none; } }
@media (max-width: 639px) { .pgrid { column-gap: 8px; row-gap: 28px; } }
/* Captions line up row by row across a grid (brand, model, facts, price) */
@supports (grid-template-rows: subgrid) {
  .pgrid { row-gap: 0; margin-bottom: -40px; }
  .pgrid > .product { display: grid; grid-row: span 5; grid-template-rows: subgrid; padding-bottom: 40px; }
  .pgrid > .product > .plink { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; align-content: start; }
  .pgrid > .product > .plink > * { align-self: start; }
  @media (max-width: 639px) {
    .pgrid { margin-bottom: -28px; }
    .pgrid > .product { padding-bottom: 28px; }
  }
}
/* Placeholder cards (phCards in app.js): the cobalt wall is drawn in the first frame and the watches
   land on it. Same classes as a real card, so every caption line keeps its real height; only the
   flat tile shows. No shimmer, no pulse, no grey. */
.is-ph { pointer-events: none; }
.product.is-ph .plink > :not(.tile), .post-card.is-ph .pbody > *, .pdp.is-ph .pdp-sum > * { visibility: hidden; }
.pdp.is-ph .ph-h1 { height: 38px; margin-top: 6px; }
@media (max-width: 639px) { .pdp.is-ph .ph-h1 { height: 34px; } }
/* A count line above a grid that is still loading keeps its one line, so the grid does not drop by 20px when it fills */
html.olc-chrome p.count:empty:has(+ [aria-busy="true"])::before { content: '\a0'; }
.empty { grid-column: 1 / -1; padding: 48px 0; font-size: 16px; line-height: 26px; color: var(--text-2); text-align: left; }
/* A grid straight under the page head (the archive with nothing sold yet): the message starts where content would */
.phd + .sec .pgrid > .empty:only-child { padding-top: 16px; }

/* ------------------------------------------------------------------ full price list (replaces the ticker) */
.pricelist { margin-top: 32px; }
.pricelist > summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; color: var(--text); }
.pricelist > summary::-webkit-details-marker { display: none; }
.pricelist > summary > .ic { color: var(--text-2); }
.pricelist[open] > summary > .ic { transform: rotate(180deg); }
.pricelist > summary:hover .tl { text-decoration-color: var(--text); }
.pl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-items: start; margin-top: 24px; }
.pl > div { min-width: 0; border-bottom: 1px solid var(--rule); }
.plh { display: flex; align-items: baseline; padding: 24px 0 10px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.plh:first-child { padding-top: 0; }
.plh .ct { color: var(--text-3); font-weight: 400; margin-left: 8px; }
.plh.sp { height: 28px; padding: 0; }
.plr {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  min-height: 44px; padding: 11px 0; border-top: 1px solid var(--rule);
  font-size: 15px; line-height: 22px; color: var(--text); text-decoration: none;
}
.plr .pn { flex: 1 1 auto; min-width: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: transparent; }
.plr .rf { color: var(--text-2); margin-left: 10px; }
.plr .pv { flex: none; text-align: right; font-weight: 600; white-space: nowrap; }
.plr:hover .pn { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--text-3); }
@media (max-width: 639px) {
  .pl { grid-template-columns: minmax(0, 1fr); }
  .pl > div:first-child { border-bottom: 0; }
  .pl .plh.sp { display: none; }
}

/* ------------------------------------------------------------------ editorial feature */
.feat { align-items: stretch; }
.fph { grid-column: 1 / span 7; align-self: start; aspect-ratio: 1 / 1; overflow: hidden; background: var(--ground-2); }
.fph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.fside { grid-column: 8 / span 5; padding-left: 24px; }
.ed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; }
.wy { min-width: 0; border-top: 1px solid var(--rule); padding-top: 16px; }
.wy .h3 { font-size: 18px; line-height: 26px; margin-top: 6px; }
.wy .p15 { font-size: 16px; line-height: 26px; margin-top: 8px; }
.wy .tl { margin-top: 16px; }
@media (max-width: 1023px) {
  .feat { display: flex; flex-direction: column; }
  .fside { padding-left: 0; }
  .ed { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 24px; border-bottom: 1px solid var(--rule); }
  .wy { padding: 16px 0 20px; }
}
@media (max-width: 1023px) { .fph { align-self: stretch; } }
@media (min-width: 640px) and (max-width: 1023px) { .ed { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
@media (min-width: 640px) and (max-width: 1023px) { .fph { max-height: calc(100svh - 136px); } }
@media (max-width: 639px) { .fph { aspect-ratio: 4 / 5; } .fph img { object-position: 50% 38%; } }

/* ------------------------------------------------------------------ numbered sequence (only where order is real) */
.iline { font-size: 17px; line-height: 28px; color: var(--text-2); max-width: 60ch; }
.seq { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule); }
.seq > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-content: start; min-width: 0; }
.seq .n { font-size: 17px; line-height: 24px; color: var(--text-3); }
.seq .h3, .seq h3 { margin: 0; }
.seq .p15 { grid-column: 2; margin-top: 8px; }
@media (max-width: 1023px) {
  .seq { grid-template-columns: minmax(0, 1fr); row-gap: 24px; margin-top: 24px; padding-top: 20px; }
  .seq .p15 { margin-top: 6px; }
}
@media (max-width: 639px) { .iline { font-size: 16px; line-height: 26px; } }

/* ------------------------------------------------------------------ service list (unnumbered) */
.svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; margin-top: 56px; }
.svc > * { min-width: 0; }
.svc h3 { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text); }
.svc p { font-size: 14px; line-height: 20px; color: var(--text-2); margin-top: 4px; }
@media (max-width: 1023px) { .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 24px; margin-top: 40px; } }

/* ------------------------------------------------------------------ unboxed blocks */
.blocks { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; row-gap: 48px; }
.blocks > * { min-width: 0; }
@media (min-width: 640px) { .blocks.b2, .blocks.b3, .blocks.b4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .blocks.b3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blocks.b4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 639px) { .blocks { row-gap: 32px; } }
.block { border-top: 1px solid var(--rule); padding-top: 16px; }
.block > * + * { margin-top: 8px; }
.block > .lab + * { margin-top: 6px; }
.block > .tl, .block > .btn, .block > .acts { margin-top: 16px; }
.block p { color: var(--text-2); }
.block p.slogan { color: var(--text); }
a.block { display: block; color: inherit; text-decoration: none; }
a.block h3, a.block .h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: transparent; }
a.block:hover h3, a.block:hover .h3, a.block:focus-visible h3, a.block:focus-visible .h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--text); }

/* ------------------------------------------------------------------ cobalt band (one per page at most) */
.band { background: var(--wall); color: #fff; margin-top: var(--sec); }
.band-in { padding-block: 64px; align-items: center; }
.band-l { grid-column: 1 / span 6; min-width: 0; }
.band-r { grid-column: 8 / span 5; min-width: 0; }
.band h2, .band h3, .band p, .band li { color: #fff; }
.band .dek, .band .lab { color: var(--wall-text); }
.band-p { font-size: 16px; line-height: 26px; color: #fff; margin-top: 20px; max-width: 56ch; }
.band .acts { gap: 24px; margin-top: 32px; }
.band .acts .tl { margin-left: 0; }
.band .btn { color: #fff; border-color: #fff; }
.band .btn.solid { background: var(--paper); color: var(--ground); border-color: var(--paper); }
.band .btn.solid:hover { background: var(--paper-hover); border-color: var(--paper-hover); }
.band .tl, .band a:not(.btn) { color: #fff; text-decoration-color: rgba(255,255,255,.7); }
.band .tl:hover, .band a:not(.btn):hover { text-decoration-color: #fff; }
.band :focus-visible { outline-color: #fff; }
.band-steps, .band-info { list-style: none; }
.band-steps > li, .band-info > li { padding: 16px 0; border-top: 1px solid var(--wall-rule); font-size: 17px; line-height: 24px; color: #fff; }
.band-steps > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); }
.band-info > li { display: block; }
.band-steps > li:last-child, .band-info > li:last-child { border-bottom: 1px solid var(--wall-rule); }
.band-steps .n { color: var(--wall-text); }
.band-info a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.band-cta .band-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-block: 48px; }
.band-cta .h2b { font-size: 24px; line-height: 30px; }
.band-cta .acts { margin-top: 0; }
@media (max-width: 1023px) { .band-r { margin-top: 32px; } }
@media (max-width: 639px) {
  .band-in { padding-block: 48px; }
  .band-p { font-size: 15px; line-height: 24px; }
  .band .acts { gap: 20px; margin-top: 24px; }
  .band-steps > li, .band-info > li { padding: 14px 0; font-size: 16px; }
}

/* ------------------------------------------------------------------ social strip */
.soc { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.soc > * { min-width: 0; }
@media (max-width: 899px) { .soc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } }
#videoRow:not([hidden]) { margin-top: 24px; }

/* ------------------------------------------------------------------ newsletter row */
.news { background: var(--ground-2); margin-top: var(--sec); }
.news > .wrap { padding-block: 48px; align-items: center; }
.news-l { grid-column: 1 / span 5; min-width: 0; }
.news-l h2, .news-l h3 { font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: 0; }
.news-l p { font-size: 15px; line-height: 24px; color: var(--text-2); margin-top: 6px; }
.news-r { grid-column: 7 / span 6; min-width: 0; }
.news-r label { margin-top: 0; }
.join { display: flex; }
.join input { flex: 1 1 auto; min-width: 0; border-radius: var(--radius) 0 0 var(--radius); border-right: 0; }
.join .btn { flex: none; padding: 0 28px; border-radius: 0 var(--radius) var(--radius) 0; }
.nl-done { font-size: 15px; line-height: 24px; color: var(--text); outline: none; }
@media (max-width: 1023px) { .news-r { margin-top: 24px; } }
@media (max-width: 639px) { .news > .wrap { padding-block: 40px; } }

/* ------------------------------------------------------------------ panel and CTA row
   Page panels (explanations, page forms, tool inputs) are unboxed: whitespace and one 1px rule on
   top, like the product page guarantees. A filled --ground-2 box is kept for raised surfaces only;
   .card stays boxed for the admin tables. */
.panel { background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 16px 0 0; }
.card, .cta { background: var(--ground-2); border: 0; border-radius: var(--radius); padding: 32px; }
.cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.cta > div { min-width: 0; }
.cta h3 + p, .cta h2 + p { margin-top: 4px; }
.cta .acts { margin-top: 0; }
@media (max-width: 639px) { .card, .cta { padding: 24px 16px; } }

/* ------------------------------------------------------------------ forms */
label { display: block; margin: 20px 0 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text); letter-spacing: 0; text-transform: none; }
:is(.panel, .card) > label:first-child,
:is(.panel, .card) > .hp:first-child + label,
:is(.panel, .card) > form:first-child > label:first-child,
:is(.panel, .card) > form:first-child > .hp:first-child + label { margin-top: 0; }
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="submit"], [type="button"], [type="image"], [type="reset"], [type="color"])),
:where(select), :where(textarea) {
  display: block; width: 100%; height: 48px; margin: 0; padding: 0 16px;
  background-color: var(--ground); border: 1px solid var(--field); border-radius: var(--radius);
  color: var(--text); font-family: var(--font); font-size: 16px; line-height: 24px; font-weight: 400;
  color-scheme: dark; -webkit-appearance: none; appearance: none;
  transition: border-color var(--t-fast);
}
:where(textarea) { height: auto; min-height: 112px; padding: 12px 16px; resize: vertical; }
:where(select) {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%23A3ADBB' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 10px;
}
:where(select[multiple], select[size]) { height: auto; padding: 8px 16px; background-image: none; }
select::-ms-expand { display: none; }
:where(input[type="date"]) { min-height: 48px; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
::placeholder { color: var(--text-3); opacity: 1; }
/* Phones: placeholders a touch smaller so the examples fit the field. The input stays 16px, so iOS does not zoom. */
@media (max-width: 639px) { input::placeholder, textarea::placeholder { font-size: 15px; } }
:where(input, select, textarea):focus { border-color: var(--text); }
:where(input, select, textarea):focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--paper); }
.check, label.check {
  display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 8px 0 0;
  font-size: 15px; line-height: 22px; font-weight: 400; color: var(--text); cursor: pointer;
}
.check input[type="checkbox"], .check input[type="radio"] { width: 20px; height: 20px; flex: none; margin: 0; padding: 0; cursor: pointer; }
.check span { color: var(--text); }
.check input:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.field-hint { font-size: 13px; line-height: 18px; color: var(--text-2); margin-top: 6px; }
.form-privacy { font-size: 13px; line-height: 18px; color: var(--text-3); margin-top: 12px; }
.form-privacy a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; }
.viewing-fields, .fields2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.viewing-fields > *, .fields2 > * { min-width: 0; }
.opt, .popup-opt { font-weight: 400; color: var(--text-2); }
@media (max-width: 639px) { .viewing-fields, .fields2 { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ toggles and tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.tabs button, .tog > span, .mt, .carat {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; margin: 0; padding: 0 14px;
  border: 1px solid var(--field); border-radius: var(--radius); background: transparent; color: var(--text);
  font-family: var(--font); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; text-transform: none;
  cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tabs button:hover, .tog:hover > span, .mt:hover, .carat:hover { background-color: var(--hover-tint); }
.tabs button.on, .tabs button[aria-pressed="true"], .tog input:checked + span,
.mt.on, .mt[aria-pressed="true"], .carat.on, .carat[aria-pressed="true"] { background: var(--paper); color: var(--ground); border-color: var(--paper); }
.carat { flex-direction: column; gap: 0; min-height: 56px; padding: 8px 10px; text-align: center; }
.carat b { display: block; font-size: 17px; line-height: 24px; font-weight: 600; }
.carat span { display: block; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--text-2); }
.carat.on span, .carat[aria-pressed="true"] span { color: inherit; }
.tog { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.tog input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tog input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: 2px; }
.tab-count { display: inline-block; min-width: 20px; margin-left: 8px; padding: 0 6px; border-radius: var(--radius); background: var(--wall); color: #fff; font-size: 12px; line-height: 20px; font-weight: 500; text-align: center; }

/* ------------------------------------------------------------------ shop filter bar (900 up) and filter sheet (phones) */
.fbar { background: var(--ground); border-bottom: 1px solid var(--rule); }
.fbar-in { display: flex; align-items: center; gap: 8px; padding-block: 12px; }
details.filters { min-width: 0; }
details.filters > summary { list-style: none; }
details.filters > summary::-webkit-details-marker { display: none; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fsum, .fsheet-head, .fsheet-scrim, .filter-row .fsheet-apply { display: none; }
.sel {
  position: relative; display: inline-flex; align-items: center; height: 40px; margin: 0; padding: 0 0 0 14px;
  border: 1px solid var(--field); border-radius: var(--radius);
  font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text); cursor: pointer;
  transition: border-color var(--t-fast);
}
.sel .k { flex: none; color: var(--text-2); white-space: nowrap; margin-right: 2px; }
.sel select {
  width: auto; height: 38px; min-height: 0; padding: 0 34px 0 2px; border: 0; border-radius: 0;
  background-color: transparent; background-position: right 12px center;
  font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text);
}
.sel select:focus, .sel select:focus-visible { outline: none; border: 0; }
.sel:focus-within { border-color: var(--text); outline: 2px solid var(--paper); outline-offset: 2px; }
.sel + .tog { margin-left: 8px; }
.count { font-size: 14px; line-height: 20px; color: var(--text-2); }
.fbar-in > .count { margin-left: auto; white-space: nowrap; }
@media (pointer: coarse) { .sel select { font-size: 16px; } }
@media (min-width: 900px) {
  .fbar { position: sticky; top: calc(var(--hdr-h) + 1px); z-index: 40; }
  details.filters { flex: 1 1 auto; }
}
@media (max-width: 899px) {
  .fbar { border-top: 1px solid var(--rule); }
  .fbar-in { height: 60px; padding-block: 0; }
  .fsum {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px;
    border: 1px solid var(--field); border-radius: var(--radius);
    font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text); white-space: nowrap; cursor: pointer;
  }
  .fsum:hover { background: var(--hover-tint); }
  details.filters[open] > .filter-row {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    max-height: 90svh; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 12px;
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
    background: var(--ground-2); border-radius: var(--radius) var(--radius) 0 0;
  }
  details.filters[open] > .fsheet-scrim { display: block; position: fixed; inset: 0; z-index: 94; background: var(--scrim); }
  .fsheet-head { display: flex; flex: 0 0 100%; justify-content: space-between; align-items: center; }
  .fsheet-head h2, .fsheet-head .h3 { font-size: 20px; line-height: 28px; font-weight: 400; }
  .fsheet-head .icb { margin-right: -12px; }
  .filter-row .sel { flex: 1 1 calc(50% - 6px); flex-direction: column; align-items: stretch; height: auto; padding: 0; border: 0; min-width: 0; cursor: default; }
  .filter-row .sel:focus-within { outline: none; }
  .filter-row .sel .k { margin: 0 0 8px; font-weight: 500; color: var(--text); }
  .filter-row .sel select {
    width: 100%; height: 48px; padding: 0 40px 0 14px;
    border: 1px solid var(--field); border-radius: var(--radius); background-color: var(--ground); background-position: right 14px center;
    font-size: 16px; line-height: 24px;
  }
  .filter-row .sel select:focus { border-color: var(--text); }
  .filter-row .sel select:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
  .sel + .tog { margin-left: 0; }
  .tog + .tog { margin-left: -4px; }
  .filter-row .fsheet-apply { display: flex; flex: 0 0 100%; margin-top: 8px; }
  html:has(details.filters[open]) body { overflow: hidden; }
}

/* ------------------------------------------------------------------ search chip */
.qchips { margin-top: 16px; }
.qchips:empty { display: none; }
.qchip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 14px;
  border: 1px solid var(--field); border-radius: var(--radius); background: transparent; color: var(--text);
  font-size: 14px; line-height: 20px; font-weight: 400; cursor: pointer;
}
.qchip:hover { background: var(--hover-tint); }

/* ------------------------------------------------------------------ back link and pager */
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 24px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-2); text-decoration: none; transition: color var(--t-fast); }
.back .ic { color: var(--text); }
.back:hover { color: var(--text); }
.pager { display: flex; flex-wrap: wrap; align-items: baseline; gap: 24px; margin-top: 48px; }
@media (max-width: 639px) { .back { margin-top: 16px; } }

/* ------------------------------------------------------------------ product page */
.pdp { margin-top: 20px; align-items: start; }
.pdp-gal { grid-column: 1 / span 7; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pdp-gal > .gal-item { min-width: 0; }
.pdp-gal.one > .gal-item:first-child { grid-column: 1 / -1; justify-self: start; width: min(100%, calc((100vh - 136px) * .75)); }
.gal-count { display: none; }
/* The header condenses by transform only, so its layout height never changes and the sticky top is a
   constant: 12px under the full 72px header, 24px under the condensed one (where it actually sticks) */
.pdp-sum { grid-column: 9 / span 4; position: sticky; top: calc(var(--hdr-h) + 12px); padding-top: 8px; min-width: 0; overflow-wrap: anywhere; }
.pdp-sum .brand { font-size: 14px; line-height: 20px; }
.pdp-sum h1 { font-size: 32px; line-height: 38px; font-weight: 400; letter-spacing: -.015em; margin-top: 6px; }
.refl { display: flex; flex-wrap: wrap; column-gap: 12px; margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--text-2); }
.no { color: var(--text-3); }
.prow { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; margin-top: 24px; }
.pp { font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -.01em; color: var(--text); }
.pp.is-sold { color: var(--text-2); }
.cd { font-size: 14px; line-height: 20px; color: var(--text-2); }
.desc { margin-top: 20px; }
.desc p { font-size: 16px; line-height: 26px; color: var(--text-2); }
.desc p + p { margin-top: 12px; }
.pacts { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.plinks { display: flex; flex-wrap: wrap; column-gap: 28px; margin-top: 8px; }
.pdp2 { margin-top: 64px; align-items: start; }
.notfound { max-width: 720px; padding-top: 24px; }
.notfound .sub { margin-top: 12px; }
@media (max-width: 1023px) {
  /* A swipe carousel; the counter chip is placed against .pdp (a size container), so it stays put while the strip scrolls */
  .pdp { position: relative; container-type: inline-size; margin-top: 12px; --gal-h: calc(100svh - 200px); }
  .pdp-gal {
    position: static; display: flex; gap: 4px; margin-inline: calc(-1 * var(--pad));
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .pdp-gal::-webkit-scrollbar { display: none; }
  .pdp-gal > .gal-item, .pdp-gal.one > .gal-item:first-child { flex: 0 0 min(calc(100% - 44px), calc(var(--gal-h) * .75)); width: auto; scroll-snap-align: start; }
  .pdp-gal > .gal-item:only-child, .pdp-gal.one > .gal-item:only-child,
  .pdp-gal > .gal-item:first-child:nth-last-child(2):has(+ .gal-count),
  .pdp-gal.one > .gal-item:first-child:nth-last-child(2):has(+ .gal-count) { flex-basis: min(100%, calc(var(--gal-h) * .75)); }
  .gal-count {
    display: block; position: absolute; z-index: 2;
    left: calc(12px - var(--pad));
    top: calc(min(100cqw + 2 * var(--pad) - 44px, var(--gal-h) * .75) * 4 / 3 - 36px);
    padding: 2px 10px; border-radius: var(--radius); background: var(--chip);
    font-size: 13px; line-height: 20px; color: var(--text); pointer-events: none;
  }
  .pdp-sum { position: static; padding-top: 24px; }
  .pacts { margin-top: 16px; }
  .pacts > .btn { display: none; }
  .plinks { margin-top: 0; }
  .pdp2 { margin-top: 48px; }
}
/* Tablets: a shorter photo, so the name, price and condition show on the first screen above the bottom bar.
   The 50svh floor keeps the photo from collapsing on short screens (a phone turned sideways). */
@media (min-width: 640px) and (max-width: 1023px) { .pdp { --gal-h: max(100svh - 440px, 50svh); } }
@media (max-width: 639px) { .pdp-sum h1 { font-size: 28px; line-height: 34px; } .prow { margin-top: 18px; } }

/* ------------------------------------------------------------------ specification (technical data) */
.spec { grid-column: 1 / span 7; min-width: 0; }
.sgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; margin-top: 20px; }
.sgrid .cell { min-width: 0; border-top: 1px solid var(--rule); padding: 16px 0 28px; overflow-wrap: anywhere; }
.sgrid dt { font-size: 14px; line-height: 20px; color: var(--text-2); }
.sgrid dd { font-size: 17px; line-height: 24px; color: var(--text); margin: 4px 0 0; }
@media (max-width: 1023px) {
  .sgrid { grid-template-columns: minmax(0, 1fr); margin-top: 16px; border-bottom: 1px solid var(--rule); }
  .sgrid .cell { display: grid; grid-template-columns: 40% 60%; padding: 12px 0; }
  .sgrid dt, .sgrid dd { font-size: 15px; line-height: 22px; }
  .sgrid dt { padding-right: 12px; }
  .sgrid dd { margin: 0; }
}

/* ------------------------------------------------------------------ guarantees */
.guar { grid-column: 9 / span 4; padding-top: 4px; min-width: 0; }
.guar h2 { font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: 0; }
.guar p { font-size: 15px; line-height: 24px; color: var(--text-2); margin-top: 8px; }
.guar .sep { height: 1px; background: var(--rule); margin: 24px 0; }
@media (max-width: 1023px) { .guar { margin-top: 48px; } }

/* ------------------------------------------------------------------ modals */
@keyframes olc-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-bg { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 16px; background: var(--scrim); }
.modal-bg.on { display: flex; animation: olc-fade var(--t-fast) ease-out; }
.modal {
  position: relative; width: 100%; max-width: 520px; max-height: 88svh; overflow-y: auto; overscroll-behavior: contain;
  padding: 32px; border: 0; border-radius: var(--radius); background: var(--ground-2); box-shadow: none;
}
.modal .close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  background: none; border: 0; color: var(--text); cursor: pointer;
}
.modal > h2, .modal > h3 { font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: 0; padding-right: 48px; }
.modal form > label:first-of-type { margin-top: 20px; }
.modal form > .btn[type="submit"], .modal form > .btn.full { margin-top: 24px; }
.modal .form-privacy { margin-top: 16px; }
.enq-piece { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.enq-txt { display: flex; flex-direction: column; min-width: 0; }
.pm { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--text); }
.pref { font-size: 13px; line-height: 18px; color: var(--text-2); }
.pr2 { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text); margin-top: 4px; }
.pr2 .no { font-size: 13px; font-weight: 400; margin-left: 10px; }
@media (max-width: 639px) { .modal { padding: 24px; } }

/* ------------------------------------------------------------------ lightbox */
.modal-bg.lb { padding: 0; background: var(--lightbox); touch-action: pinch-zoom; }
.modal.lightbox-modal {
  width: 100vw; max-width: none; height: 100vh; height: 100svh; max-height: none; overflow: hidden;
  display: grid; place-items: center; padding: 0; border-radius: 0; background: none; touch-action: pinch-zoom;
}
.lightbox-modal .close { position: fixed; top: 12px; right: 12px; }
/* One grid cell: during a step the outgoing and incoming tiles sit on top of each other */
.lb-stage { display: grid; place-items: center; touch-action: pinch-zoom; }
.lb-stage > .tile { grid-area: 1 / 1; }
.lb-stage > .tile.lb-in { background: transparent; } /* the outgoing tile's cobalt shows through, so the ground never dips */
.lb-stage .tile { width: min(calc((100vh - 96px) * .75), calc(100vw - 32px)); width: min(calc((100svh - 96px) * .75), calc(100vw - 32px)); cursor: default; }
.lb-nav { display: contents; }
.lb-prev, .lb-next {
  position: fixed; top: 50%; margin-top: -24px; z-index: 2;
  width: 48px; height: 48px; display: grid; place-items: center; padding: 0;
  background: none; border: 0; color: #fff; cursor: pointer;
}
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lb-count { position: fixed; top: 24px; left: 24px; font-size: 13px; line-height: 18px; color: var(--text-2); }
@media (max-width: 639px) { .lb-prev { left: 8px; } .lb-next { right: 8px; } .lb-count { top: 24px; left: 16px; } }

/* ------------------------------------------------------------------ first-visit sell popup (bottom sheet on phones) */
.popup { max-width: 460px; text-align: left; }
.popup .lab { font-weight: 500; }
.popup h3 { font-size: 20px; line-height: 28px; font-weight: 400; margin-top: 6px; padding-right: 40px; }
.popup .form-done h3 { margin-top: 0; padding-right: 0; }
.popup-lead { font-size: 15px; line-height: 24px; color: var(--text-2); margin: 8px 0 20px; }
.popup form > label:first-of-type { margin-top: 0; }
.popup .popup-submit { margin-top: 16px; }
.popup-switch {
  display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 8px auto 0; padding: 0 8px;
  background: none; border: 0; color: var(--text); cursor: pointer;
  font-size: 15px; line-height: 20px; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--text-3);
}
.popup-switch:hover { text-decoration-color: var(--text); }
.popup-small { font-size: 13px; line-height: 18px; color: var(--text-2); margin-top: 20px; }
.popup-small a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--text-3); }
.popup .form-privacy { margin-top: 8px; }
@media (max-width: 639px) {
  /* The phone sheet does not block the page: taps go through the light dim (pointer-events: none),
     which only sets the sheet apart; its top edge is the --field line */
  .modal-bg.sheet { background: rgba(5,8,13,.45); pointer-events: none; align-items: flex-end; padding: 0; }
  .modal-bg.sheet .modal {
    pointer-events: auto; max-width: none; max-height: 80svh;
    padding: 28px 16px calc(24px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--field); border-radius: var(--radius) var(--radius) 0 0;
  }
}

/* ------------------------------------------------------------------ toast, form error, thank-you */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translateX(-50%);
  max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: var(--radius);
  background: var(--paper); color: var(--ground); font-size: 14px; line-height: 20px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast);
}
.toast.on { opacity: 1; }
@media (max-width: 1023px) { html.has-bbar .toast { bottom: calc(var(--bbar-h) + 16px + env(safe-area-inset-bottom)); } }
.form-error { margin-top: 12px; padding: 0; border: 0; background: none; font-size: 14px; line-height: 20px; color: var(--error); }
.form-error a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.form-done { padding: 8px 0; text-align: left; outline: none; }
.form-done h2, .form-done h3 { font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: 0; color: var(--text); }
.form-done p { margin-top: 8px; }
.form-done .btn { margin: 20px 12px 0 0; }
.form-done .tick { display: none; }

/* ------------------------------------------------------------------ wizard */
.steps-labels { display: flex; gap: 8px; margin-bottom: 8px; }
.steps-labels span { flex: 1; min-width: 0; font-size: 13px; line-height: 18px; color: var(--text-2); text-align: left; letter-spacing: 0; text-transform: none; }
.steps-labels span.on { color: var(--text); font-weight: 500; }
.steps { display: flex; gap: 8px; margin-bottom: 32px; scroll-margin-top: 8px; } /* adds to html scroll-padding-top */
.steps .s { flex: 1; height: 2px; background: var(--rule); }
.steps .s.on { background: var(--text); }
.wizard-panel { display: none; }
.wizard-panel.on { display: block; animation: olc-fade var(--t-fast) ease-out; }
.wizard-panel h2, .wizard-panel h3 { font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: 0; }
.wiz-nav { display: flex; gap: 12px; margin-top: 32px; }
.wiz-nav #nextBtn { flex: 1; }

/* ------------------------------------------------------------------ photo drop zone and thumbs */
.drop, label.drop {
  display: block; margin: 0; padding: 32px; text-align: center;
  border: 1px dashed var(--field); border-radius: var(--radius);
  font-size: 15px; line-height: 24px; font-weight: 400; color: var(--text-2); cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.drop span { font-size: 13px; line-height: 18px; }
.drop:hover, .drop.over, .drop:focus-within { border-color: var(--text); color: var(--text); }
.drop:focus-within { outline: 2px solid var(--paper); outline-offset: 2px; }
.drop[aria-busy="true"] { cursor: progress; }
.thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.thumbs img { width: 84px; height: 84px; object-fit: cover; }
.thumbs button.thumb { position: relative; width: 84px; height: 84px; padding: 0; margin: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: 0; background: var(--ground-2); cursor: pointer; }
.thumbs button.thumb img { width: 100%; height: 100%; border: 0; }
.thumbs button.thumb::after {
  content: ''; position: absolute; top: 0; right: 0; width: 24px; height: 24px;
  background: var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='%23F2F4F7' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  opacity: 0; transition: opacity var(--t-fast);
}
.thumbs button.thumb:hover, .thumbs button.thumb:focus-visible { border-color: var(--error); }
.thumbs button.thumb:hover::after, .thumbs button.thumb:focus-visible::after { opacity: 1; }
@media (hover: none) { .thumbs button.thumb::after { opacity: 1; } }
.photo-note { font-size: 14px; line-height: 20px; margin-top: 12px; }

/* ------------------------------------------------------------------ result and estimate panels */
.estimate-box, .result { background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 16px 0 0; text-align: left; align-content: start; }
.range { font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -.01em; color: var(--text); margin-top: 4px; }
.fig { font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -.01em; color: var(--text); }
.fig.fig-msg { font-weight: 400; }
.rowline { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 22px; }
.rowline > span:last-child { text-align: right; }
@media (min-width: 1024px) { .result { position: sticky; top: calc(var(--hdr-h) + 12px); } }

/* ------------------------------------------------------------------ compare (sell vs consign)
   Side by side, both columns share one set of rows (label, heading, text, table, action), so the
   headings, table rows and buttons line up even though only one column has a label. */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.compare > * { min-width: 0; }
.compare .lab { margin-bottom: 6px; }
.compare h3 + p { margin-top: 8px; }
.compare table { margin: 16px 0 20px; }
@media (max-width: 899px) { .compare { grid-template-columns: minmax(0, 1fr); } }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .compare { grid-template-rows: repeat(4, auto) 1fr; }
    .compare > .panel { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-items: start; }
    .compare > .panel > .lab { grid-row: 1; }
    .compare > .panel > h3 { grid-row: 2; margin-top: 0; }
    .compare > .panel > p:not(.lab) { grid-row: 3; }
    .compare > .panel > table { grid-row: 4; }
    .compare > .panel > :last-child { grid-row: 5; align-self: end; justify-self: start; }
  }
}

/* ------------------------------------------------------------------ tables */
table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
th, td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); }
th { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-2); letter-spacing: 0; text-transform: none; }
td { font-variant-numeric: lining-nums tabular-nums; }
.table-scroll { overflow-x: auto; position: relative; }

/* ------------------------------------------------------------------ status words, badges, pipeline, events */
.badge, .badge.sold, .badge.reserved, .badge.grey {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; vertical-align: middle;
  border: 1px solid var(--rule); border-radius: var(--radius); background: none;
  font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-2); letter-spacing: 0; text-transform: none;
}
.pipeline { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; padding: 0; list-style: none; }
.pipeline > li { list-style: none; }
.pipeline .stage { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--field); border-radius: var(--radius); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-2); letter-spacing: 0; text-transform: none; }
.pipeline .stage.done { color: var(--text); border-color: var(--rule); }
.pipeline .stage.now { background: var(--paper); color: var(--ground); border-color: var(--paper); }
.event { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 22px; }
.event time { display: block; flex: 0 0 100%; font-size: 13px; line-height: 18px; color: var(--text-3); }

/* ------------------------------------------------------------------ FAQ and other disclosures */
summary { cursor: pointer; }
.faq details, details:not([class]) { border-bottom: 1px solid var(--rule); padding: 16px 0; }
.faq { max-width: 840px; }
.faq details:first-of-type { border-top: 1px solid var(--rule); }
.faq summary, details:not([class]) > summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px;
  font-size: 17px; line-height: 24px; font-weight: 500; color: var(--text);
}
.faq summary::-webkit-details-marker, details:not([class]) > summary::-webkit-details-marker { display: none; }
/* The chevron shifts with translate rather than margin (same pixels), so the shift can ease */
.faq summary::after, details:not([class]) > summary::after {
  content: ''; flex: none; width: 8px; height: 8px; margin: 0 4px 0 0; translate: 0 -2px;
  border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: rotate(45deg);
}
.faq details[open] > summary::after, details:not([class])[open] > summary::after { transform: rotate(-135deg); translate: 0 2px; }
/* Resting state of the disclosure body where ::details-content exists. A closed body is skipped by the
   browser anyway (content-visibility: hidden), so this changes nothing on screen; it only gives the
   motion layer something to ease between. */
:is(.faq details, details:not([class]), .nav-more)::details-content { block-size: 0; opacity: 0; }
:is(.faq details, details:not([class]), .nav-more)[open]::details-content { block-size: auto; opacity: 1; }
.pricelist::details-content { opacity: 0; }
.pricelist[open]::details-content { opacity: 1; }
.faq details p, details:not([class]) > p { font-size: 16px; line-height: 26px; color: var(--text-2); margin-top: 8px; max-width: 64ch; }

/* ------------------------------------------------------------------ article, legal, journal post */
.article, .legal { max-width: 720px; }
.article p, .legal p { font-size: 16px; line-height: 26px; color: var(--text-2); margin-bottom: 16px; max-width: 64ch; }
.article h2, .legal h2 { font-size: 24px; line-height: 30px; font-weight: 400; color: var(--text); margin: 40px 0 12px; }
@media (max-width: 639px) { .article h2, .legal h2 { font-size: 21px; line-height: 28px; margin-top: 32px; } }
.article > h2:first-child, .legal > h2:first-child { margin-top: 0; }
.article h3, .legal h3 { font-size: 17px; line-height: 24px; font-weight: 500; color: var(--text); margin: 24px 0 8px; }
.article ul, .article ol, .legal ul, .legal ol { margin: 0 0 16px 20px; }
.article :is(ul, ol):not(.toc), .legal :is(ul, ol):not(.toc) { max-width: calc(64ch - 20px); }
.article li, .legal li { font-size: 16px; line-height: 26px; color: var(--text-2); margin-bottom: 8px; }
.article strong, .legal strong { color: var(--text); font-weight: 600; }
.post-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; line-height: 18px; color: var(--text-2); letter-spacing: 0; text-transform: none; }
.article h1 { font-size: 32px; line-height: 38px; }
/* A journal post still loading (only its 'Loading…' line) holds a screen's height, so the band and
   footer below start out of sight instead of being pushed down when the post lands */
html.olc-chrome .article:has(> p.muted:only-child) { min-height: 100svh; }
.article h1 + .post-meta { margin-top: 8px; font-size: 14px; line-height: 20px; }
.article-hero { aspect-ratio: 21 / 9; overflow: hidden; margin: 24px 0 32px; background: var(--wall); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.post-body p.muted { font-size: 13px; line-height: 18px; }
.legal .toc { list-style: none; columns: 2; column-gap: 32px; margin: 0 0 24px; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: none; }
.legal .toc li { break-inside: avoid; margin-bottom: 6px; font-size: 15px; line-height: 22px; }
.updated, .article p.updated, .legal p.updated { font-size: 13px; line-height: 18px; color: var(--text-3); letter-spacing: 0; text-transform: none; margin-bottom: 12px; }
.legal .summary, .cancel-form { background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 16px 0 0; margin: 16px 0 24px; }
.cancel-form { border-bottom: 1px solid var(--rule); padding-bottom: 16px; }
.legal .summary p:last-child, .cancel-form p:last-child { margin-bottom: 0; }
.cancel-form p { font-size: 15px; line-height: 24px; color: var(--text); margin-bottom: 10px; }
.cancel-form .note { font-size: 13px; line-height: 18px; color: var(--text-2); }
.contact-list { list-style: none; }
/* Desktop: a data table may use the full grid width; everything else keeps the 720px measure */
@media (min-width: 1024px) {
  .legal { max-width: none; }
  .legal > :not(.table-scroll) { max-width: 720px; }
}
.legal .contact-list, .article .contact-list { margin-left: 0; }
@media (max-width: 639px) {
  .legal .toc { columns: 1; }
  .article h1 { font-size: 28px; line-height: 34px; }
}

/* ------------------------------------------------------------------ journal cards */
.post-card { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; background: none; border: 0; }
.post-card .pimg { aspect-ratio: 16 / 9; overflow: hidden; background: var(--wall); }
.post-card .pimg img { width: 100%; height: 100%; object-fit: cover; }
.post-card .pbody { padding: 16px 0 0; }
.post-card h3 { font-size: 17px; line-height: 24px; font-weight: 500; color: var(--text); margin: 6px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: transparent; }
.post-card:hover h3, .post-card:focus-visible h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--text); }
.post-card .pex { font-size: 15px; line-height: 24px; color: var(--text-2); }

/* ------------------------------------------------------------------ link lists and area grid */
.related { margin-top: var(--sec); border-top: 0; padding-top: 0; }
.links-list { list-style: none; columns: 2; column-gap: 32px; margin-top: 8px; }
.links-list li { break-inside: avoid; }
.links-list li a { display: flex; align-items: center; min-height: 44px; padding: 10px 0; font-size: 15px; line-height: 24px; color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: transparent; }
.links-list li a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--text-3); }
@media (min-width: 1024px) { .related .links-list { columns: 3; column-gap: var(--gap); } }
.area-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.area { display: block; min-width: 0; padding: 20px 16px 20px 0; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
.area .an { display: block; font-size: 17px; line-height: 24px; font-weight: 500; color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: transparent; }
.area .ad { display: flex; flex-wrap: wrap; column-gap: 12px; margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--text-2); letter-spacing: 0; text-transform: none; }
.area:hover .an, .area:focus-visible .an { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--text); }
@media (max-width: 899px) { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .links-list { columns: 1; } }

/* ================================================================== CHROME (rendered by app.js) */

/* ------------------------------------------------------------------ utility bar (static) */
.util { height: var(--util-h); background: var(--ground); border-bottom: 1px solid var(--rule); font-size: 13px; line-height: 18px; color: var(--text-2); white-space: nowrap; }
.util-in { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); column-gap: 32px; align-items: center; height: 100%; }
.util-l { display: flex; align-items: center; gap: 24px; min-width: 0; }
.util-l { grid-column: 1; }
.util-r { grid-column: 3; display: flex; align-items: center; gap: 20px; justify-self: end; }
/* Centre messages are static. They sit in reverse DOM order on one clipped line, so a message that
   does not fit drops out whole (the first one, the widest, goes first) instead of overlapping. */
.util-c { grid-column: 2; display: none; flex-direction: row-reverse; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 24px; height: 18px; overflow: hidden; }
.util a { display: inline-flex; align-items: center; min-height: calc(var(--util-h) - 1px); color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: transparent; transition: color var(--t-fast); }
.util a:hover { color: var(--text); text-decoration-color: var(--text); }
.util a:focus-visible { outline-offset: -2px; }
@media (min-width: 1200px) { .util-c { display: flex; } .util-wide { display: none; } }
@media (min-width: 1440px) { .util-in { column-gap: 20px; } .util-l { gap: 20px; } .util-r { gap: 16px; } .util-c { column-gap: 24px; } .util-wide { display: inline; } }
@media (max-width: 1023px) { .util-tel { display: none !important; } }
@media (max-width: 639px) { .util-g { display: none !important; } }

/* ------------------------------------------------------------------ header */
header.site { position: sticky; top: 0; z-index: 50; background: var(--ground); border-bottom: 1px solid var(--rule); }
html.nav-open header.site { z-index: 70; }
.hdr-in { display: flex; align-items: center; height: var(--hdr-h); }
.logo { display: inline-flex; align-items: center; gap: 12px; flex: none; min-height: 44px; color: var(--text); text-decoration: none; white-space: nowrap; }
.logomark { height: 34px; width: auto; filter: invert(1); }
header.site .logotext { display: none; }
.icb { width: 40px; height: 40px; display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--text); cursor: pointer; transition: background-color var(--t-fast); }
.icb:hover { background-color: var(--hover-tint); }
.burger, .nav-head { display: none; }
.bar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.wa-link {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 1px solid var(--field); border-radius: var(--radius); color: var(--text); text-decoration: none; white-space: nowrap;
  font-size: 14px; line-height: 20px; font-weight: 500; transition: background-color var(--t-fast);
}
.wa-link:hover { background-color: var(--hover-tint); }
nav.main { font-size: 14px; line-height: 20px; font-weight: 500; }
.nav-item { display: flex; align-items: center; }
.nav-item > a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; white-space: nowrap; }
.mega-toggle { display: flex; align-items: center; padding: 0; border: 0; background: none; color: var(--text-2); cursor: pointer; transition: color var(--t-fast); }
.mega-toggle:hover { color: var(--text); }
.mega-toggle[aria-expanded="true"] .ic { transform: rotate(180deg); }
.nav-more { display: none; }
.nav-more > summary { list-style: none; }
.nav-more > summary::-webkit-details-marker { display: none; }
.mega { display: none; }
.mega-h { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text); letter-spacing: 0; text-transform: none; margin-bottom: 16px; }
.mega ul { list-style: none; display: grid; row-gap: 12px; }
.mega li a { font-size: 15px; line-height: 22px; color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: transparent; }
.mega li a:hover { text-decoration-color: var(--text-3); }
.mega .ct { color: var(--text-3); margin-left: 8px; }
.mtile { display: block; width: 180px; color: inherit; text-decoration: none; }
.mtile .tc { display: block; margin-top: 10px; font-size: 13px; line-height: 18px; }
.mtile .tc > span { display: block; }
.mtile .tc > span + span { color: var(--text-2); }
.mtile .tc > span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: transparent; }
.mtile:hover .tc > span:first-child, .mtile:focus-visible .tc > span:first-child { text-decoration-color: currentColor; }

@media (min-width: 1024px) {
  /* Condensed header (class hdr-c, set by app.js once the header is stuck): 72px to 60px by transform
     only. The header lifts 12px and its contents drop 6px to stay centred in what remains; the mark
     scales from 34px to 28px and the wordmark closes the gap it leaves. Layout never changes, so
     nothing below the header moves. With or without motion the end states are the same. */
  html.hdr-c header.site { translate: 0 calc(-1 * var(--condense)); }
  html.hdr-c :is(.hdr-in > .logo, .bar-actions) { translate: 0 calc(var(--condense) / 2); }
  html.hdr-c .logomark { scale: .8235; transform-origin: 0 50%; }
  /* The mark is 240:195, so 6px less height is 7.385px less width: the wordmark and the nav close up by that */
  html.hdr-c header.site .logotext { translate: -7.385px 0; }
  html.hdr-c :is(.nav-item > a, .mega-toggle) { translate: -7.385px calc(var(--condense) / 2); }
  html.hdr-c .fbar { translate: 0 calc(-1 * var(--condense)); } /* into the page head's empty bottom padding */
  nav.main { display: flex; align-items: center; gap: 28px; margin-left: 56px; }
  /* The nav line always exists at zero width; hover draws it in from the left */
  .nav-item > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--text-3); transform: scaleX(0); transform-origin: right center; }
  .nav-item > a:hover::after { transform: scaleX(1); transform-origin: left center; }
  .nav-item > a.active::after { background: var(--text); transform: scaleX(1); }
  /* 32 x 44 hit area; the chevron sits 6px after the label and the spare width overlaps the gap */
  .mega-toggle { width: 32px; height: 44px; justify-content: flex-start; padding-left: 6px; margin-right: -18px; }
  .mega { position: absolute; left: 0; right: 0; top: calc(100% + 1px); z-index: 1; padding: 32px 0 40px; background: var(--ground-2); }
  .mega.open { display: block; animation: olc-fade var(--t-menu) ease-out; }
  /* The dim below an open mega panel. It lives on body, not the header, because the condensed header
     carries a transform and would become the containing block of anything fixed inside it. */
  body::after { content: ''; position: fixed; inset: var(--mega-top, 0px) 0 0; z-index: 45; background: var(--scrim-menu); opacity: 0; visibility: hidden; pointer-events: none; }
  body:has(header.site.mega-on)::after { opacity: 1; visibility: visible; }
  .megagrid { align-items: start; }
  .megagrid > .mcol:nth-child(1) { grid-column: 1 / span 2; }
  .megagrid > .mcol:nth-child(2) { grid-column: 3 / span 2; }
  .megagrid > .mcol:nth-child(3) { grid-column: 5 / span 2; }
  .megagrid > .mcol:nth-child(4) { grid-column: 7 / span 2; }
  /* Three-column panels (Jewellery, Sell) give the middle column a third track, so 'Consign jewellery &
     valuables' fits; any label longer than its track wraps inside it instead of running into the next column. */
  .megagrid.m3 > .mcol:nth-child(2) { grid-column: 3 / span 3; }
  .megagrid.m3 > .mcol:nth-child(3) { grid-column: 6 / span 2; }
  .megagrid > .mtiles { grid-column: 9 / span 4; grid-row: 1; justify-self: end; display: flex; gap: 24px; }
  .mega li a { white-space: normal; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  nav.main { gap: 20px; margin-left: 40px; }
  /* Four tracks cannot hold two 180px tiles here, so one tile shows */
  .megagrid > .mtiles { grid-column: 10 / span 3; }
  .megagrid > .mtiles > .mtile:nth-child(n+2) { display: none; }
}
@media (min-width: 1200px) { header.site .logotext { display: inline; } }

@media (max-width: 1023px) {
  .icb { width: 44px; height: 44px; }
  .hdr-in { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; }
  .burger { display: grid; margin-left: -10px; }
  .hdr-in > .logo { justify-self: center; }
  .logomark { height: 28px; }
  .bar-actions { margin-left: 0; justify-self: end; }
  .search-btn { margin-right: -12px; }
  .wa-link { display: none; }
  /* The phone and tablet menu: a full-height sheet; the bottom bar stays above it. The sheet styles sit
     on the closed state too (it is display: none there), so a closing sheet keeps its shape. */
  nav.main {
    display: none; position: fixed; inset: 0; z-index: 1;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 0 16px calc(var(--bbar-h) + 24px + env(safe-area-inset-bottom));
    background: var(--ground-2); font-size: 20px; line-height: 28px; font-weight: 400;
  }
  nav.main.open { display: block; }
  html.nav-open, html.nav-open body { overflow: hidden; }
  .nav-head { display: flex; justify-content: flex-end; align-items: center; height: 56px; }
  .nav-close { margin-right: -12px; }
  .nav-item { flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
  .nav-item > a { flex: 1 1 auto; min-height: 56px; font-size: 20px; line-height: 28px; font-weight: 400; }
  .nav-item > a.active { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
  .mega-toggle { width: 44px; height: 56px; justify-content: center; margin-right: -12px; }
  .mega-toggle .ic { width: 10px; height: 10px; }
  /* Accordion: the bottom space is on the inner grid, so a closing panel can collapse to nothing */
  .mega { flex: 0 0 100%; }
  .mega.open { display: block; }
  .mega .megagrid { padding-inline: 0; padding-bottom: 16px; }
  .mega-h { margin: 16px 0 8px; color: var(--text-2); }
  .mega ul { row-gap: 0; }
  .mega li a { display: flex; align-items: center; min-height: 44px; font-size: 17px; line-height: 26px; }
  .mtiles { display: none; }
  .nav-more { display: block; border-bottom: 1px solid var(--rule); }
  .nav-more > summary { display: flex; justify-content: space-between; align-items: center; min-height: 56px; font-size: 20px; line-height: 28px; }
  .nav-more > summary .ic { width: 10px; height: 10px; margin-right: 5px; color: var(--text-2); }
  .nav-more[open] > summary .ic { transform: rotate(180deg); }
  .nav-more-links { padding: 0 0 16px; }
  .nav-more-links a { display: flex; align-items: center; min-height: 44px; font-size: 17px; line-height: 26px; color: var(--text); text-decoration: none; }
}

/* ------------------------------------------------------------------ search panel (under the header) */
.modal-bg.search-bg { top: var(--search-top, 0px); align-items: flex-start; padding: 0; background: var(--scrim); }
.modal.search-modal {
  width: 100%; max-width: none; max-height: calc(100svh - var(--search-top, 0px));
  border-radius: 0; background: var(--ground-2);
  padding: 24px max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad))) 32px;
}
.search-modal .close { top: 14px; right: max(8px, calc((100% - var(--maxw)) / 2 + 8px)); }
.search-label { margin: 0 0 8px; padding-right: 48px; }
#searchIn { height: 48px; }
#searchOut { margin-top: 16px; }
.search-group { margin: 16px 0 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-2); }
.search-group:first-child { margin-top: 0; }
.search-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 22px; color: var(--text); text-decoration: none; }
.search-row > span:first-child { min-width: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: transparent; }
.search-row:hover > span:first-child, .search-row:focus-visible > span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--text-3); }
.sr-ref { font-size: 13px; color: var(--text-3); margin-left: 10px; }
.search-row > .sr-ref { flex: none; margin-left: 0; }
.sr-price { flex: none; font-weight: 600; white-space: nowrap; }
.search-msg { font-size: 14px; line-height: 20px; color: var(--text-2); }
.search-msg a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ footer */
footer.site { margin: 0; padding: 64px 0 32px; background: var(--ground-2); border-top: 1px solid var(--rule); font-size: 15px; line-height: 24px; color: var(--text-2); }
.promise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 12px; font-size: 15px; line-height: 22px; color: var(--text-2); }
.fcols { margin-top: 48px; }
.fc1 { grid-column: 1 / span 3; }
.fc2 { grid-column: 4 / span 2; }
.fc3 { grid-column: 6 / span 2; }
.fc4 { grid-column: 8 / span 2; }
.fc5 { grid-column: 10 / span 3; }
.foot-h { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text); letter-spacing: 0; text-transform: none; margin-bottom: 8px; }
footer.site ul { list-style: none; }
footer.site li a { display: inline-block; font-size: 15px; line-height: 32px; color: var(--text-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: transparent; transition: color var(--t-fast); }
footer.site li a:hover { color: var(--text); text-decoration-color: var(--text); }
.fc1 p { font-size: 15px; line-height: 24px; color: var(--text-2); margin-top: 20px; max-width: 30ch; }
.visit p { padding: 4px 0; font-size: 15px; line-height: 24px; color: var(--text-2); overflow-wrap: anywhere; }
.visit .addr { color: var(--text); }
.visit .gap { margin-top: 16px; }
.visit .links { display: flex; flex-wrap: wrap; column-gap: 16px; }
.visit a, .fine-links a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--field); transition: color var(--t-fast); }
.visit a:hover, .fine-links a:hover { color: var(--text); text-decoration-color: var(--text); }
.fineprint { display: flex; flex-wrap: wrap; column-gap: 32px; row-gap: 8px; margin-top: 56px; font-size: 13px; line-height: 18px; color: var(--text-3); }
.fine-links { display: flex; flex-wrap: wrap; column-gap: 20px; }
.fine-legal { flex: 0 0 100%; }
@media (max-width: 1023px) {
  footer.site .fcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 36px; }
  .fc1 { grid-column: 1 / -1; }
  .fc2 { grid-column: 1; grid-row: 2; }
  .fc4 { grid-column: 1; grid-row: 3; }
  .fc3 { grid-column: 2; grid-row: 2 / span 2; }
  .fc5 { grid-column: 1 / -1; grid-row: 4; }
  .fc1 p { max-width: none; }
}
@media (max-width: 639px) {
  footer.site { padding: 48px 0 32px; }
  .promise { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .fcols { margin-top: 40px; }
  .fineprint { flex-direction: column; margin-top: 40px; }
}

/* ------------------------------------------------------------------ bottom action bar (compact only) */
.bbar { display: none; }
@media (max-width: 1023px) {
  .bbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background: var(--ground-2); border-top: 1px solid var(--rule);
  }
  html.nav-open .bbar { z-index: 80; }
  .bbar-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bbar-in .btn { min-height: 48px; padding: 0 12px; }
  .bbar-in.wbar { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  .bbar-in.wbar .btn { gap: 8px; padding: 0 8px; font-size: 14px; }
  html.has-bbar body { padding-bottom: calc(var(--bbar-h) + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------------ floating WhatsApp (wide desktop only)
   Shown only from 1440px, where it sits in the gutter beside the 1320px content instead of over the
   fourth grid column; narrower desktops keep the header's WhatsApp button. Hidden while a mega menu dims the page. */
.wa-float { display: none; }
@media (min-width: 1440px) {
  .wa-float {
    position: fixed; right: 24px; bottom: 24px; z-index: 60;
    width: 52px; height: 52px; display: grid; place-items: center;
    background: var(--wall); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius);
    transition: border-color var(--t-fast);
  }
  .wa-float:hover { border-color: rgba(255,255,255,.5); }
  body:has(header.site.mega-on) .wa-float { display: none; }
}

/* ------------------------------------------------------------------ tap targets
   44px on phones, tablets and any touch screen. The 40px small controls stay on desktop with a mouse. */
@media (max-width: 1023px), (pointer: coarse) {
  .btn.sm, .tabs button, .tog > span, .mt { min-height: 44px; }
  .qchip, .fsum, .sel { height: 44px; }
  .sel select { height: 42px; }
}
@media (max-width: 1023px) {
  .visit a, .fine-links a { display: inline-flex; align-items: center; min-height: 44px; }
  footer.site li a { padding-block: 6px; }
  header.site .logo { min-width: 44px; justify-content: center; }
  .legal .toc a { display: inline-block; padding: 12px 0; }
  .legal .toc li { margin-bottom: 0; }
}

/* ================================================================== COMPATIBILITY
   Older class names still produced by admin, dashboard and the worker's fallback pages, or by
   stale cached HTML. They map onto the system above and add nothing new. */
.eyebrow { display: block; margin: 0 0 6px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-2); letter-spacing: 0; text-transform: none; }
.eyebrow::before { content: none; }
h1.eyebrow { font-size: 40px; line-height: 46px; font-weight: 400; letter-spacing: -.015em; color: var(--text); margin: 0; }
.display { display: block; font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: 0; color: var(--text); margin-top: 12px; }
.serif, .mono { font-family: inherit; }
.reveal, .reveal.in { opacity: 1; transform: none; }
.hero, .hero.page-hero { position: relative; padding: 48px 0 32px; }
.hero-inner { position: relative; max-width: none; }
.hero-bg, .hero-video, .glow-dial, .motion-toggle, .ticker-wrap > .motion-toggle { display: none !important; }
.grid { display: grid; gap: 24px; }
.grid > * { min-width: 0; }
.grid.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { h1.eyebrow { font-size: 40px; line-height: 46px; } }
@media (max-width: 899px) { .grid.cols3, .grid.cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  h1.eyebrow { font-size: 30px; line-height: 36px; }
  .display { font-size: 18px; line-height: 26px; margin-top: 8px; }
  .hero, .hero.page-hero { padding: 24px 0 20px; }
  .grid.cols3, .grid.cols4 { grid-template-columns: minmax(0, 1fr); }
  .grid.keep2, .grid.cols4.keep2, .grid:has(> .product) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================== MOTION
   Motion follows the visitor; it never leads. Calm means few properties, one direction and long
   gentle tails: only opacity and transform (translate, scale) move, plus colour. The one exception
   is a disclosure the visitor opens, whose block-size eases so the content below glides instead of
   jumping. The cobalt ground of a tile never moves and photographs are never scaled; only a cut-out
   watch drifts closer or crossfades. Exits are real but short; focus never animates.

   One gate: everything here is written under html.motion, which app.js adds one frame after the
   chrome is drawn, only on public pages, only when reduced motion is not asked for and
   IntersectionObserver exists. JavaScript off, print, /admin, /dashboard and reduced motion behave
   exactly as before. The gate only adds transitions; a resting value that does change with it (the
   toast) is covered by motion-init, which holds every transition off for that one frame, so nothing
   already on screen animates when motion switches on. */
html.motion-init, html.motion-init *, html.motion-init *::before, html.motion-init *::after { transition: none !important; }

/* ------------------------------------------------------------------ colour: buttons, toggles, fields */
html.motion :is(.btn, .wa-link, .icb, .tabs button, .tog > span, .mt, .carat, .qchip, .fsum, .sel) {
  transition: background-color var(--t-colour) var(--ease-std), border-color var(--t-colour) var(--ease-std), color var(--t-colour) var(--ease-std), text-decoration-color var(--t-colour) var(--ease-std), opacity var(--t-fade) var(--ease-std);
}
html.motion :is(.btn, .wa-link, .icb, .tabs button, .tog > span, .mt, .carat, .qchip, .fsum, .sel):active { transition-duration: var(--t-press); }
html.motion .carat span { transition: color var(--t-colour) var(--ease-std); }
html.motion :is(input, select, textarea) { transition: border-color var(--t-colour) var(--ease-std), background-color var(--t-colour) var(--ease-std), opacity var(--t-fade) var(--ease-std); }
html.motion .drop { transition: border-color var(--t-colour) var(--ease-std), color var(--t-colour) var(--ease-std); }
html.motion .fav { transition: color var(--t-colour) var(--ease-std); }
html.motion .fav svg { transition: fill var(--t-colour) var(--ease-std), stroke var(--t-colour) var(--ease-std); }

/* ------------------------------------------------------------------ text links: quick to arrive, slow to settle */
html.motion :where(main p, main li, main dd, main td, .modal p, .form-error) a:where(:not(.btn):not(.tl)),
html.motion :is(.tl, .linkbtn, .popup-switch, .visit a, .fine-links a, .form-privacy a, .popup-small a, .search-msg a, .form-error a, .band a:not(.btn), .back) {
  transition: text-decoration-color var(--t-settle) var(--ease-std), color var(--t-settle) var(--ease-std);
}
html.motion :where(main p, main li, main dd, main td, .modal p, .form-error) a:where(:not(.btn):not(.tl)):hover,
html.motion :is(.tl, .linkbtn, .popup-switch, .visit a, .fine-links a, .form-privacy a, .popup-small a, .search-msg a, .form-error a, .band a:not(.btn), .back):hover,
html.motion .pricelist > summary:hover .tl { transition-duration: var(--t-colour); }
/* Lines that only appear on hover rest in a transparent colour (set with each component), so here
   they fade in and settle back out instead of popping */
html.motion :is(.model, .plr .pn, a.block h3, a.block .h3, .post-card h3, .area .an, .mtile .tc > span, .util a, footer.site li a, .links-list li a, .mega li a, .search-row > span:first-child) {
  transition: text-decoration-color var(--t-settle) var(--ease-std), color var(--t-settle) var(--ease-std);
}
html.motion :is(.product:hover .model, .plink:focus-visible .model, .plr:hover .pn, a.block:hover :is(h3, .h3), a.block:focus-visible :is(h3, .h3), .post-card:hover h3, .post-card:focus-visible h3, .area:hover .an, .area:focus-visible .an, .mtile:hover .tc > span, .mtile:focus-visible .tc > span, .util a:hover, footer.site li a:hover, .links-list li a:hover, .mega li a:hover, .search-row:hover > span:first-child, .search-row:focus-visible > span:first-child) {
  transition-duration: var(--t-colour);
}
html.motion .back .ic { transition: translate var(--t-colour) var(--ease-out); }
html.motion .back:hover .ic { translate: -2px 0; }

/* ------------------------------------------------------------------ header: condense, nav line, mega menu */
@media (min-width: 1024px) {
  html.motion :is(header.site, .hdr-in > .logo, .nav-item > a, .bar-actions, .logomark, header.site .logotext, .fbar) {
    transition: translate var(--t-panel) var(--ease-move), scale var(--t-panel) var(--ease-move);
  }
  html.motion .mega-toggle { transition: color var(--t-colour) var(--ease-std), translate var(--t-panel) var(--ease-move); }
  html.motion .mega-toggle .ic { transition: transform var(--t-fade) var(--ease-move); }
  /* The nav line draws in from the left and retracts to the right */
  html.motion .nav-item > a::after { transition: transform var(--t-exit) var(--ease-exit); }
  html.motion .nav-item > a:hover::after { transition: transform var(--t-line) var(--ease-out); }
  html.motion .nav-item > a.active::after { transition: none; }
  /* The panel arrives as one quiet sheet and fades away; switching between menus keeps the ground
     solid and fades only the new columns (data-mega-swap, set by app.js for 300ms) */
  html.motion .mega { opacity: 0; transition: opacity var(--t-exit) var(--ease-exit), display var(--t-exit) allow-discrete; }
  html.motion .mega.open { opacity: 1; animation: none; transition: opacity var(--t-fade) var(--ease-std), display 0s; }
  @starting-style { html.motion .mega.open { opacity: 0; } }
  html.motion header.site[data-mega-swap] :is(.mega, .mega.open) { transition: none; }
  html.motion header.site[data-mega-swap] .mega.open .megagrid { animation: olc-fade var(--t-fade) var(--ease-std) both; }
  html.motion body::after { transition: opacity var(--t-exit) var(--ease-exit), visibility 0s linear var(--t-exit); }
  html.motion body:has(header.site.mega-on)::after { transition: opacity var(--t-fade) var(--ease-std), visibility 0s; }
}
@media (min-width: 1440px) {
  html.motion .wa-float { transition: border-color var(--t-colour) var(--ease-std), opacity var(--t-fade) var(--ease-std), visibility 0s; }
  html.motion body:has(header.site.mega-on) .wa-float {
    display: grid; opacity: 0; visibility: hidden;
    transition: border-color var(--t-colour) var(--ease-std), opacity var(--t-exit) var(--ease-exit), visibility 0s linear var(--t-exit);
  }
}
/* Phone and tablet menu: the sheet drifts 24px in from the left as it fades, and leaves the same way.
   Watches, Jewellery and Sell open as accordions (the disclosure exception). */
@media (max-width: 1023px) {
  html.motion nav.main {
    opacity: 0; translate: -12px 0; interpolate-size: allow-keywords;
    transition: opacity var(--t-exit) var(--ease-exit), translate var(--t-exit) var(--ease-exit), display var(--t-exit) allow-discrete;
  }
  html.motion nav.main.open { opacity: 1; translate: 0 0; transition: opacity var(--t-fade) var(--ease-std), translate var(--t-panel) var(--ease-out), display 0s; }
  @starting-style { html.motion nav.main.open { opacity: 0; translate: -24px 0; } }
  html.motion nav.main .mega {
    overflow: clip; overflow-clip-margin: 6px; block-size: 0; opacity: 0;
    transition: block-size var(--t-exit) var(--ease-move), opacity 120ms var(--ease-exit), display var(--t-exit) allow-discrete;
  }
  html.motion nav.main .mega.open { block-size: auto; opacity: 1; transition: block-size var(--t-accordion) var(--ease-move), opacity var(--t-fade) var(--ease-std) 60ms, display 0s; }
  @starting-style { html.motion nav.main .mega.open { block-size: 0; opacity: 0; } }
  html.motion .mega-toggle { transition: color var(--t-colour) var(--ease-std); }
  html.motion :is(.mega-toggle .ic, .nav-more > summary .ic) { transition: transform var(--t-accordion) var(--ease-move); }
}

/* ------------------------------------------------------------------ disclosures: FAQ, plain details, 'Services and guides', price list */
html.motion :is(.faq details, details:not([class]), .nav-more) { interpolate-size: allow-keywords; }
html.motion :is(.faq details, details:not([class]), .nav-more)::details-content {
  overflow: clip; overflow-clip-margin: 6px;
  transition: block-size var(--t-exit) var(--ease-move), opacity 120ms var(--ease-exit), content-visibility var(--t-exit) allow-discrete;
}
html.motion :is(.faq details, details:not([class]), .nav-more)[open]::details-content {
  transition: block-size var(--t-accordion) var(--ease-move), opacity var(--t-fade) var(--ease-std) 60ms, content-visibility var(--t-accordion) allow-discrete;
}
html.motion :is(.faq summary, details:not([class]) > summary)::after { transition: transform var(--t-accordion) var(--ease-move), translate var(--t-accordion) var(--ease-move); }
/* A 42-row list does not slide 1,000px: it only fades */
html.motion .pricelist::details-content { transition: opacity var(--t-exit) var(--ease-exit), content-visibility var(--t-exit) allow-discrete; }
html.motion .pricelist[open]::details-content { transition: opacity var(--t-fade) var(--ease-std), content-visibility var(--t-fade) allow-discrete; }
html.motion .pricelist > summary > .ic { transition: transform var(--t-accordion) var(--ease-move); }

/* ------------------------------------------------------------------ modals, popup, search, lightbox: every overlay that fades in also fades out */
html.motion .modal-bg { transition: opacity var(--t-exit) var(--ease-std), display var(--t-exit) allow-discrete; }
html.motion .modal-bg.on { animation: none; }
html.motion .modal-bg:not(.on):not(.lb) { opacity: 0; pointer-events: none; }
html.motion .modal-bg.on:not(.lb) { opacity: 1; transition: opacity var(--t-fade) var(--ease-std), display 0s; }
html.motion .modal-bg:not(.lb) > .modal { translate: 0 calc(var(--nudge) / 2); opacity: 0; transition: translate var(--t-exit) var(--ease-exit), opacity var(--t-exit) var(--ease-exit); }
html.motion .modal-bg.on:not(.lb) > .modal { translate: 0 0; opacity: 1; transition: translate var(--t-panel) var(--ease-out), opacity var(--t-fade) var(--ease-std); }
/* The search panel drops from the header instead of rising */
html.motion .modal-bg.search-bg:not(.lb) > .modal.search-modal { translate: 0 calc(-1 * var(--nudge)); }
html.motion .modal-bg.search-bg.on:not(.lb) > .modal.search-modal { translate: 0 0; }
@starting-style {
  html.motion .modal-bg.on:not(.lb) { opacity: 0; }
  html.motion .modal-bg.on:not(.lb) > .modal { translate: 0 var(--nudge); opacity: 0; }
  html.motion .modal-bg.search-bg.on:not(.lb) > .modal.search-modal { translate: 0 calc(-1 * var(--nudge)); }
}
/* Phone sell popup: a bottom sheet that travels up from the edge; only its light dim fades */
@media (max-width: 639px) {
  html.motion .modal-bg.sheet { transition: background-color 240ms var(--ease-std), display 240ms allow-discrete; }
  html.motion .modal-bg.sheet:not(.on):not(.lb) { opacity: 1; background-color: rgb(5 8 13 / 0); }
  html.motion .modal-bg.sheet.on:not(.lb) { background-color: rgb(5 8 13 / .45); transition: background-color var(--t-fade) var(--ease-std), display 0s; }
  html.motion .modal-bg.sheet:not(.lb) > .modal { translate: 0 100%; opacity: 1; transition: translate 240ms var(--ease-exit); }
  html.motion .modal-bg.sheet.on:not(.lb) > .modal { translate: 0 0; transition: translate var(--t-panel) var(--ease-move); }
  @starting-style {
    html.motion .modal-bg.sheet.on:not(.lb) { opacity: 1; background-color: rgb(5 8 13 / 0); }
    html.motion .modal-bg.sheet.on:not(.lb) > .modal { translate: 0 100%; opacity: 1; }
  }
}
/* Lightbox: the tile grows out of its gallery place (watch.html), the dark ground fades behind it and
   the controls follow 160ms later. It keeps display until its tile has gone back. */
html.motion .modal-bg.lb { transition: background-color var(--t-fade) var(--ease-std), display var(--t-panel) allow-discrete; }
html.motion .modal-bg.lb:not(.on) { background-color: rgb(11 16 24 / 0); pointer-events: none; }
html.motion .modal-bg.lb.on { transition: background-color 300ms var(--ease-std), display 0s; }
html.motion .modal-bg.lb :is(.close, .lb-prev, .lb-next, .lb-count) { opacity: 0; transition: opacity var(--t-exit) var(--ease-exit); }
html.motion .modal-bg.lb.on :is(.close, .lb-prev, .lb-next, .lb-count) { opacity: 1; transition: opacity var(--t-fade) var(--ease-std) 160ms; }
@starting-style {
  html.motion .modal-bg.lb.on { background-color: rgb(11 16 24 / 0); }
  html.motion .modal-bg.lb.on :is(.close, .lb-prev, .lb-next, .lb-count) { opacity: 0; }
}

/* ------------------------------------------------------------------ toast, thank-you states, form errors */
html.motion .toast { translate: 0 var(--nudge); transition: opacity var(--t-exit) var(--ease-exit), translate var(--t-exit) var(--ease-exit); }
html.motion .toast.on { translate: 0 0; transition: opacity var(--t-fade) var(--ease-std), translate var(--t-panel) var(--ease-out); }
html.motion :is(.form-done, .nl-done, .wiz-done) { transition: opacity var(--t-fade) var(--ease-std), translate var(--t-panel) var(--ease-out); }
html.motion .form-error { transition: opacity var(--t-fade) var(--ease-std); }
@starting-style {
  html.motion :is(.form-done, .nl-done, .wiz-done) { opacity: 0; translate: 0 var(--nudge); }
  html.motion .form-error { opacity: 0; }
}

/* ------------------------------------------------------------------ wizard: the step arrives from the side it was asked for */
@keyframes olc-step { from { opacity: 0; translate: calc(var(--dir, 1) * var(--drift)) 0; } }
form[data-dir="back"] { --dir: -1; }
html.olc-chrome form:not([data-dir]) .wizard-panel.on { animation: none; } /* step 1 is first screen: never faded in at load */
html.motion form[data-dir] .wizard-panel.on { animation: olc-step var(--t-panel) var(--ease-out) both; }
html.motion .steps .s { position: relative; overflow: hidden; }
html.motion .steps .s::after { content: ''; position: absolute; inset: 0; background: var(--text); transform: scaleX(0); transform-origin: left center; transition: transform 500ms var(--ease-out); }
html.motion .steps .s.on { background: var(--rule); }
html.motion .steps .s.on::after { transform: scaleX(1); }
html.motion .steps-labels span { transition: color var(--t-colour) var(--ease-std); }

/* ------------------------------------------------------------------ shop filter sheet leaving (shop.html closeSheet adds .closing only with motion) */
@media (max-width: 899px) {
  details.filters.closing > .filter-row { translate: 0 100%; transition: translate 220ms var(--ease-exit); }
  details.filters.closing > .fsheet-scrim { opacity: 0; transition: opacity 220ms var(--ease-exit); }
  /* Opening: CSS entrance from the first frame (the details 'toggle' event fires a frame late) */
  details.filters[open]:not(.closing) > .filter-row { transition: translate 360ms cubic-bezier(.4,0,.2,1); }
  details.filters[open]:not(.closing) > .fsheet-scrim { transition: opacity 240ms cubic-bezier(.25,.1,.25,1); }
  @starting-style {
    details.filters[open] > .filter-row { translate: 0 100%; }
    details.filters[open] > .fsheet-scrim { opacity: 0; }
  }
  details.filters.sheet-pre > .filter-row { translate: 0 100%; transition: none !important; }
  details.filters.sheet-pre > .fsheet-scrim { opacity: 0; transition: none !important; }
}

/* ------------------------------------------------------------------ product cards (hover devices)
   A cut-out with no second image drifts closer; a piece with a second image only crossfades. The swap
   waits for the second image (alt-ok) so the watch never fades to empty cobalt, and a photograph
   under a photograph stays put (no dip); the main image fades only when a cut-out is involved (alt-x). */
@media (hover: hover) and (pointer: fine) {
  html.motion .tile.is-cut:not(.has-alt) > .t-main { transition: transform var(--t-zoom-out) var(--ease-out); }
  html.motion :is(.product:hover, .plink:focus-visible, .mtile:hover, .mtile:focus-visible) .tile.is-cut:not(.has-alt) > .t-main { transform: scale(var(--zoom)); transition: transform var(--t-zoom) var(--ease-out); }
  html.motion .tile.has-alt > :is(.t-main, .t-alt) { transition: opacity var(--t-swap-out) var(--ease-std); }
  html.motion :is(.product:hover, .plink:focus-visible) .tile.has-alt > :is(.t-main, .t-alt) { transition: opacity var(--t-swap) var(--ease-std) var(--intent-card); }
  html.motion :is(.product:hover, .plink:focus-visible) .tile.has-alt:not(.alt-ok) > .t-alt { opacity: 0; }
  html.motion :is(.product:hover, .plink:focus-visible) .tile.has-alt:is(:not(.alt-ok), :not(.alt-x)) > .t-main { opacity: 1; }
  /* alt-x (a cut-out under a photograph): the photograph fades in first and the cut-out only goes once it
     is fully over it; on the way back the cut-out is already there as the photograph fades. No cobalt dip. */
  html.motion .tile.has-alt.alt-x > .t-main { transition: opacity 0ms; }
  html.motion :is(.product:hover, .plink:focus-visible) .tile.has-alt.alt-ok.alt-x > .t-main { transition: opacity 120ms var(--ease-std) calc(var(--intent-card) + var(--t-swap)); }
}

/* ------------------------------------------------------------------ arrivals below the first screen
   Listing grids never slide: a watch below the fold lands on its still cobalt tile when its image has
   loaded (.ld, then .ld-in). Home and editorial groups rise 12px once, gently staggered (.rv). Both
   are set by app.js only on elements that start below the first screen. */
/* (0,6,1): above the hover-device tile transitions, which would otherwise replace the landing fade */
html.motion:not(.no-sda) .tile.ld:not(.ld-in) > :is(.t-main, .raw) { opacity: .01; translate: 0 14px; transition: none; }
html.motion:not(.no-sda) .tile.ld-in:not(.ld) > :is(.t-main, .raw) { transition: opacity 700ms var(--ease-std) var(--land-d, 0ms), translate 1000ms var(--ease-out) var(--land-d, 0ms), transform var(--t-zoom-out) var(--ease-out); }
/* The first stock on the first screen: each card's lines follow its watch (app.js sets --land-d) */
html.motion .product.arrive .plink > :not(.tile) { animation: olc-arrive 800ms var(--ease-out) calc(var(--land-d, 0ms) + 100ms) backwards; --arrive: 10px; }
html.motion .rv:not(.in) { opacity: 0; transform: translate3d(0, var(--rise), 0); }
html.motion .rv.in { transition: opacity var(--t-reveal) var(--ease-out) var(--rv-d, 0ms), transform var(--t-reveal) var(--ease-out) var(--rv-d, 0ms); }

/* ------------------------------------------------------------------ landing: every page arrives
   Pure CSS from the first paint, in every browser, only without reduced motion: the page head's lines
   rise into place one after another (60ms, then about 90ms apart), and on the home page the showroom
   film settles in while the line, the doors and the facts follow. The first stock on the first screen
   lands after them (app.js). Admin and the dashboard never animate (html.no-sda). */
/* Entrances start at opacity .01, not 0: invisible, but it counts as painted, so Largest Contentful Paint is
   measured when the page first draws rather than when an entrance ends (Chrome ignores opacity 0 paints) */
@keyframes olc-arrive { from { opacity: .01; translate: 0 var(--arrive, 20px); } }
@keyframes olc-film-in { from { opacity: .01; scale: 1.18; } }
@keyframes olc-cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (prefers-reduced-motion: no-preference) {
  :root { --ease-arrive: cubic-bezier(.25, .8, .25, 1); }
  /* Zero-specificity base, so the per-line delays and durations below always win over its shorthand */
  html:not(.no-sda) :where(main > .phd .wrap > :is(h1, p, .acts, nav), .land-txt > *, .pdp:not(.is-ph) > .pdp-sum > *) { animation: olc-arrive 1100ms var(--ease-arrive) backwards; }
  html:not(.no-sda) :is(main > .phd .wrap, .pdp:not(.is-ph) > .pdp-sum) > :nth-child(1) { animation-delay: 80ms; animation-duration: 1200ms; --arrive: 28px; }
  html:not(.no-sda) :is(main > .phd .wrap, .pdp:not(.is-ph) > .pdp-sum) > :nth-child(2) { animation-delay: 200ms; }
  html:not(.no-sda) :is(main > .phd .wrap, .pdp:not(.is-ph) > .pdp-sum) > :nth-child(3) { animation-delay: 300ms; }
  html:not(.no-sda) :is(main > .phd .wrap, .pdp:not(.is-ph) > .pdp-sum) > :nth-child(4) { animation-delay: 390ms; }
  html:not(.no-sda) :is(main > .phd .wrap, .pdp:not(.is-ph) > .pdp-sum) > :nth-child(n+5) { animation-delay: 470ms; }
  /* Home: the film first, then the words, line by line */
  .land-film > :is(img, video) { scale: 1.1; }
  .land-film > img { animation: olc-film-in 2400ms var(--ease-arrive) backwards; }
  html:not(.no-sda) .land-txt > :nth-child(1) { animation-duration: 1500ms; animation-delay: 260ms; --arrive: 44px; }
  html:not(.no-sda) .land-txt > :nth-child(2) { animation-duration: 1300ms; animation-delay: 520ms; --arrive: 28px; }
  html:not(.no-sda) .land-txt > :nth-child(3) { animation-delay: 660ms; }
  html:not(.no-sda) .land-txt > :nth-child(4) { animation-delay: 800ms; }
  html:not(.no-sda) .land-txt > :nth-child(5) { animation-delay: 980ms; --arrive: 14px; }
  .land-cue { animation: olc-fade 1000ms var(--ease-std) 1500ms backwards; }
  .land-cue i::after { animation: olc-cue 2600ms var(--ease-move) 2100ms 3; }
}

/* ------------------------------------------------------------------ scroll-linked arrivals
   Where the browser can tie an animation to the scroll position (Chrome, Edge, Safari 26 and later), a
   block's arrival is drawn by the compositor in step with the scroll instead of starting after the block
   is already on screen: nothing to wait for, so nothing lags, and scrolling back plays it in reverse. A
   block rises 32px into place over its first ~220px on screen (column by column in a grid, 24px apart),
   and big photographs drift slowly inside their frame. Pure CSS from the first paint, so a block that is
   already on screen at load is already in place; app.js skips the timed engine above in these browsers
   (it stays for the rest). The end of every range sits well inside the footer's height, so the last
   block on a page always finishes. Admin and the dashboard opt out (html.no-sda). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes olc-sd-rise { from { opacity: 0; translate: 0 var(--sd-rise); } }
    @keyframes olc-sd-drift { from { translate: 0 -5%; } to { translate: 0 5%; } }
    @keyframes olc-sd-settle { from { scale: 1.08; } }
    :root { --sd-rise: 32px; --sd-end: min(26vh, 220px); --sd-ease: cubic-bezier(.22, .61, .36, 1); }
    html:not(.no-sda) main :is(.sh, .feat > .fph, .feat > .fside, .ed > .wy, .svc > *, .seq > *, .band-in, .blocks > *, .compare, .faq > *, .news > .wrap, .area-grid > *, .post-card, .soc > *, .related, .visit-media > *, .pgrid > .product:not(.is-ph)) {
      animation: olc-sd-rise var(--sd-ease) both;
      animation-timeline: view();
      animation-range: entry var(--sd-o, 0px) entry calc(var(--sd-end) + var(--sd-o, 0px));
    }
    /* Columns follow each other left to right: each grid's own column count at each width */
    html:not(.no-sda) main :is(.pgrid, .svc, .area-grid) > :nth-child(2n) { --sd-o: 24px; }
    html:not(.no-sda) main .soc > :nth-child(3n+2) { --sd-o: 16px; }
    html:not(.no-sda) main .soc > :nth-child(3n) { --sd-o: 32px; }
    @media (min-width: 640px) {
      html:not(.no-sda) main :is(.ed, .blocks.b2, .blocks.b3, .blocks.b4) > :nth-child(2n) { --sd-o: 24px; }
    }
    @media (min-width: 900px) {
      html:not(.no-sda) main :is(.pgrid, .area-grid, .soc) > :nth-child(n) { --sd-o: 0px; }
      html:not(.no-sda) main .pgrid > :nth-child(3n+2) { --sd-o: 24px; }
      html:not(.no-sda) main .pgrid > :nth-child(3n) { --sd-o: 48px; }
      html:not(.no-sda) main :is(.pgrid.c4, .area-grid) > :nth-child(n) { --sd-o: 0px; }
      html:not(.no-sda) main :is(.pgrid.c4, .area-grid) > :nth-child(4n+2) { --sd-o: 24px; }
      html:not(.no-sda) main :is(.pgrid.c4, .area-grid) > :nth-child(4n+3) { --sd-o: 48px; }
      html:not(.no-sda) main :is(.pgrid.c4, .area-grid) > :nth-child(4n) { --sd-o: 72px; }
      html:not(.no-sda) main .soc > :nth-child(6n+2) { --sd-o: 12px; }
      html:not(.no-sda) main .soc > :nth-child(6n+3) { --sd-o: 24px; }
      html:not(.no-sda) main .soc > :nth-child(6n+4) { --sd-o: 36px; }
      html:not(.no-sda) main .soc > :nth-child(6n+5) { --sd-o: 48px; }
      html:not(.no-sda) main .soc > :nth-child(6n) { --sd-o: 60px; }
    }
    @media (min-width: 1024px) {
      html:not(.no-sda) main .feat > .fside { --sd-o: 48px; }
      html:not(.no-sda) main :is(.svc, .seq, .blocks.b3, .blocks.b4) > :nth-child(n) { --sd-o: 0px; }
      html:not(.no-sda) main :is(.svc, .seq, .blocks.b4) > :nth-child(4n+2) { --sd-o: 24px; }
      html:not(.no-sda) main :is(.svc, .seq, .blocks.b4) > :nth-child(4n+3) { --sd-o: 48px; }
      html:not(.no-sda) main :is(.svc, .seq, .blocks.b4) > :nth-child(4n) { --sd-o: 72px; }
      html:not(.no-sda) main .blocks.b3 > :nth-child(3n+2) { --sd-o: 24px; }
      html:not(.no-sda) main .blocks.b3 > :nth-child(3n) { --sd-o: 48px; }
    }
    @media (min-width: 1024px) {
      html:not(.no-sda) main .pgrid:not(.c3, .c4) > :nth-child(n) { --sd-o: 0px; }
      html:not(.no-sda) main .pgrid:not(.c3, .c4) > :nth-child(4n+2) { --sd-o: 24px; }
      html:not(.no-sda) main .pgrid:not(.c3, .c4) > :nth-child(4n+3) { --sd-o: 48px; }
      html:not(.no-sda) main .pgrid:not(.c3, .c4) > :nth-child(4n) { --sd-o: 72px; }
    }
    /* Photographs: the frame rises, the picture inside drifts against the scroll and settles */
    html:not(.no-sda) main :is(.fph, .article-hero, .post-card .pimg) { view-timeline: --olc-ph block; }
    html:not(.no-sda) main :is(.fph, .article-hero) > :is(img, video) { scale: 1.12; animation: olc-sd-drift linear both; animation-timeline: --olc-ph; animation-range: cover 0% cover 100%; }
    /* Leaving the landing: the film sinks a little behind the words; on desktop, where the words sit mid-screen,
       they also lift away and fade (under 1024px they sit low on the film and simply scroll) */
    @keyframes olc-land-out { to { opacity: 0; translate: 0 -72px; } }
    @keyframes olc-film-sink { to { translate: 0 6%; } }
    html:not(.no-sda) .landing { view-timeline: --olc-land block; }
    @media (min-width: 1024px) { html.olc-chrome:not(.no-sda) .land-txt { animation: olc-land-out linear both; animation-timeline: --olc-land; animation-range: exit 0% exit 75%; } }
    html:not(.no-sda) .land-film > :is(img, video) { animation-name: olc-film-in, olc-film-sink; animation-duration: 2400ms, auto; animation-timing-function: var(--ease-arrive), linear; animation-fill-mode: backwards, both; animation-timeline: auto, --olc-land; animation-range: normal, exit 0% exit 100%; }
    html:not(.no-sda) .land-film > video { animation-name: none, olc-film-sink; }
    html:not(.no-sda) main .post-card .pimg img { animation: olc-sd-settle var(--sd-ease) both; animation-timeline: --olc-ph; animation-range: entry 0% cover 50%; }
  }
}

/* ------------------------------------------------------------------ page to page
   Cross-document view transition, CSS only, never delaying a navigation. The old page fades out over
   200ms, the new one fades in over 360ms from 40ms later. The header, the phone bottom bar and the
   floating WhatsApp are named, so they hold still or glide between states instead of crossfading with
   themselves. Overriding the root animation drops the browser's plus-lighter blend, so the overlap
   dips toward --ground by about 15% for about 150ms: intended, it reads as a breath on this dark page.
   Do not add plus-lighter with these unequal timings (it overbrightens). Admin and dashboard opt out. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
header.site { view-transition-name: olc-hdr; }
@media (max-width: 1023px) { .bbar { view-transition-name: olc-bbar; } }
@media (min-width: 1440px) { .wa-float { view-transition-name: olc-wa; } }
::view-transition-old(root) { animation: olc-vt-out var(--t-page-out) var(--ease-exit) both; }
::view-transition-new(root) { animation: olc-vt-in var(--t-page-in) var(--ease-out) 120ms both; }
@keyframes olc-vt-out { to { opacity: 0; } }
@keyframes olc-vt-in { from { opacity: 0; transform: translateY(8px); } }
::view-transition-group(olc-hdr), ::view-transition-group(olc-bbar), ::view-transition-group(olc-wa) { animation-duration: var(--t-page-in); animation-timing-function: var(--ease-move); }
::view-transition-old(olc-hdr), ::view-transition-new(olc-hdr), ::view-transition-old(olc-bbar), ::view-transition-new(olc-bbar), ::view-transition-old(olc-wa), ::view-transition-new(olc-wa) { animation-duration: var(--t-page-in); }
/* Leaving page (pageswap): open menus close at once, so nothing is captured inside the header snapshot */
html.vt-out :is(nav.main, .mega, .modal-bg), html.vt-out body::after { transition: none !important; }

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root { --t-press: 0ms; --t-colour: 0ms; --t-settle: 0ms; --t-line: 0ms; --t-exit: 0ms; --t-fade: 0ms; --t-accordion: 0ms; --t-panel: 0ms; --t-flip: 0ms; --t-swap: 0ms; --t-swap-out: 0ms; --t-reveal: 0ms; --t-zoom: 0ms; --t-zoom-out: 0ms; --t-land: 0ms; --t-page-out: 0ms; --t-page-in: 0ms; --stagger: 0ms; --intent-card: 0ms; --intent-mega: 0ms; }
  /* html.motion is never set here and @view-transition is not declared */
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ print */
@media print {
  :root { --ground: #fff; --ground-2: #fff; --rule: #ccc; --field: #888; --text: #000; --text-2: #333; --text-3: #555; color-scheme: light; }
  .util, .bbar, .wa-float, .toast, .skip, .modal-bg, .mega, .burger, .bar-actions, .fbar, .pricelist > summary .ic { display: none !important; }
  header.site { position: static; margin: 0; }
  .logomark { filter: none; }
  html.has-bbar body { padding-bottom: 0; }
  .pdp-sum, .result { position: static; }
  a { text-decoration: none; }
  /* Motion never reaches paper: nothing waits to be revealed and a page printed while scrolled does
     not print a lifted header or a shrunken mark */
  .rv, .tile.ld > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .tile > .t-main, .tile > .raw, .tile .raw > .t-main { opacity: 1 !important; }
  .tile > .t-alt { opacity: 0 !important; }
  .land-film, .film-pause, .land-cue, .fph > video { display: none !important; }
  .land-g { display: block; min-height: 0; }
  .land-txt { padding: 0 0 24px; opacity: 1 !important; translate: none !important; }
  .landing .lead { color: var(--text-2); }
  header.site, header.site *, .fbar { translate: none !important; scale: none !important; transition: none !important; }
  body::after { display: none !important; }
}