/* MIRVA on the web — the same quiet mirror, off the shop floor.
   MIRVA has no colour of its own: ink on honed marble, pearl on smoky glass, one line of mercury light, and the warm
   light of a fitting-room lamp (the same room the presentation models stand in).
   Colour arrives with the store (--accent is set per retailer where a page is prepared for one).
   Motion: only opacity and transform animate. One slow moment per page; everything else is quick. */

:root {
  --serif: "Newsreader", "Iowan Old Style", "Charter", Georgia, serif;
  --sans: "Albert Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mark: "MIRVA Mark", "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif; /* the wordmark only */
  --glass: #0b0b0e;
  --glass-lift: #1e1d24;
  --lamp: #e2c995; /* warm light, never a fill colour */
  --brass: #9c7d47;
  --pearl: #f4f2ef; /* warm, as on the mirror: a blue-white reads as a screen */
  --mercury: linear-gradient(120deg, #8d95a6, #f6f8fb 32%, #c3c9d6 55%, #f1f3f7 72%, #7e8698); /* MIRVA's metal: silver (the founder kept it, 23 Oct 2026) */
  --bronze: linear-gradient(120deg, #6e543c, #e3cba5 32%, #a88763 55%, #efdcbc 72%, #6a5039); /* the MIRVA mirror's own body only */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --quick: 140ms;
  --calm: 260ms;
  --slow: 700ms;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-glass: 30px;
  --measure: 62ch;
  --page: min(1180px, 100% - 2 * clamp(20px, 5vw, 56px));
}

:root, [data-mood="porcelain"] {
  --bg: #e7e4e0;
  --bg-glow: #f5f3f0;
  --panel: #f7f5f2;
  --card: #eeebe7;
  --chip: #faf9f6;
  --ink: #14131a;
  --muted: #5e5a62;
  --line: rgba(20, 19, 26, .12);
  --accent: #14131a;
  --on-accent: #fdfcfa;
  --accent-text: #14131a;
  --good: #1f6b4a;
  --warn: #8a5a12;
  --bad: #9b2c2c;
}
[data-mood="noir"] {
  --bg: #0b0a0d;
  --bg-glow: #19171d;
  --panel: #121116;
  --card: #1a191f;
  --chip: #1a191f;
  --ink: #f3f1ee;
  --muted: #a8a29c;
  --line: rgba(255, 255, 255, .13);
  --accent: #f3f1ee;
  --on-accent: #0b0a0d;
  --accent-text: #f3f1ee;
  --good: #7fd1a8;
  --warn: #e3b866;
  --bad: #f09a9a;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn, .link, .chip, .nav-links a, .nav-toggle, .brandmark { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--ink); color: var(--panel); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: var(--r-sm); background: var(--ink); color: var(--panel); transition: top var(--quick); }
.skip:focus { top: 12px; }

/* ---------- type ---------- */
.display { font: 400 clamp(44px, 7.4vw, 104px)/.98 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.display em, .title em, .voice { font-style: italic; }
.title { font: 400 clamp(32px, 4.4vw, 60px)/1.04 var(--serif); letter-spacing: -.008em; text-wrap: balance; }
.subtitle { font: 400 clamp(23px, 2.4vw, 30px)/1.16 var(--serif); text-wrap: balance; }
.voice { font-family: var(--serif); font-weight: 400; }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--muted); max-width: 46ch; text-wrap: pretty; }
.kicker { font: 500 11.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.small { font-size: 14.5px; }
.fine { font-size: 13px; line-height: 1.5; color: var(--muted); }
/* A long email or link wraps instead of pushing the page sideways. Figures keep their width. */
.fine, .mono, td, th { overflow-wrap: anywhere; }
td.n, th.n { overflow-wrap: normal; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { font: 400 28px/1.15 var(--serif); margin-top: var(--s7); }
.prose h3 { font: 500 13px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; margin-top: var(--s6); }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose li + li { margin-top: var(--s2); }

/* ---------- layout ---------- */
.wrap { width: var(--page); margin-inline: auto; }
.section { padding-block: clamp(72px, 11vw, 150px); }
.section.tight { padding-block: clamp(48px, 7vw, 96px); }
.band { background: radial-gradient(120% 90% at 30% 0%, var(--bg-glow), var(--bg) 62%); color: var(--ink); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split.wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.stack > * + * { margin-top: var(--s5); }
.stack.close > * + * { margin-top: var(--s3); }
.row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 40px); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- navigation ---------- */
.nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--s5); padding: 14px clamp(20px, 5vw, 56px); background: color-mix(in oklab, var(--bg) 88%, transparent); border-bottom: 1px solid transparent; transition: border-color var(--calm), background-color var(--calm); }
.nav.scrolled { border-bottom-color: var(--line); background: var(--bg); }
.brandmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 500 15px/1 var(--mark); letter-spacing: .34em; }
.brandmark svg { width: 20px; height: 25px; }
.nav-links { display: flex; gap: var(--s5); margin-left: auto; }
.nav-links a { text-decoration: none; font-size: 14.5px; padding: 10px 2px; color: var(--muted); transition: color var(--quick); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-cta { display: flex; gap: var(--s2); align-items: center; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; }

/* ---------- buttons, chips, fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 500 12.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: transform var(--quick) var(--ease), opacity var(--quick); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; pointer-events: none; }
.btn.ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn.small { min-height: 40px; padding: 0 18px; font-size: 11.5px; }
.btn.wide { width: 100%; }
.btn.danger { background: var(--bad); color: #fff; }
.link { background: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; padding: 10px 0; color: var(--ink); font-size: 15px; }
.link.muted { color: var(--muted); }
.arrow::after { content: "→"; font-family: var(--sans); letter-spacing: 0; transition: transform var(--quick) var(--ease); }
.arrow:hover::after { transform: translateX(3px); }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; transition: transform var(--quick) var(--ease), background-color var(--quick), color var(--quick); }
button.chip:active { transform: scale(.97); }
.chip.on, .chip[aria-pressed="true"] { background: var(--ink); color: var(--panel); box-shadow: none; }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--glass); color: var(--pearl); font: 500 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.badge.soft { background: var(--card); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.badge.good { background: color-mix(in oklab, var(--good) 14%, var(--panel)); color: var(--good); }
.badge.warn { background: color-mix(in oklab, var(--warn) 16%, var(--panel)); color: var(--warn); }

.field { display: grid; gap: 7px; }
.field > span, .label { font: 500 11.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.input, .field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--r-md); border: 0; background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; transition: box-shadow var(--quick); }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--ink); }
.field .hint { font-size: 13px; color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 400; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.form { display: grid; gap: var(--s4); }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.formnote { min-height: 22px; font-size: 14.5px; color: var(--bad); }
.formnote.ok { color: var(--good); }

/* ---------- surfaces ---------- */
.card { background: var(--panel); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line); padding: clamp(22px, 3vw, 36px); }
.card.flat { background: var(--card); box-shadow: none; }
.panel { background: var(--panel); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line); padding: var(--s5); }
/* A dark room is a fitting room at night: smoky marble, two warm lamps, never a flat black. */
.dark { --bg: #0b0a0d; --bg-glow: #19171d; --panel: #121116; --card: #1a191f; --chip: #1a191f; --ink: #f3f1ee; --muted: #a8a29c; --line: rgba(255, 255, 255, .13); --accent: #f3f1ee; --on-accent: #0b0a0d; --accent-text: #f3f1ee; --good: #7fd1a8; --bad: #f09a9a;
  background: radial-gradient(60% 50% at 12% 0%, rgba(226, 201, 149, .13), transparent 72%), radial-gradient(48% 40% at 94% 6%, rgba(226, 201, 149, .08), transparent 70%), url(/brand/marble-dark.webp) 50% 0 / 1400px auto, radial-gradient(110% 80% at 50% 0%, #1b1920, #0b0a0d 68%);
  color: var(--ink); }

/* The Glass: a tall dark pane with a bevel of mercury. Always dark, whatever the page around it. */
.glass { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-glass); overflow: hidden; color: var(--pearl); background: radial-gradient(90% 60% at 50% 16%, var(--glass-lift), var(--glass) 70%); box-shadow: 0 50px 110px -50px rgba(4, 7, 14, .8); isolation: isolate; }
.glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: var(--mercury); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 5; }
.halo { position: absolute; top: 3.2%; left: 50%; width: 46%; transform: translateX(-50%); overflow: visible; z-index: 4; }
.halo path { fill: none; stroke-linecap: round; }
.halo .track { stroke: rgba(255, 255, 255, .16); stroke-width: 1.2; }
.halo .arc { stroke: #f6f8fb; stroke-width: 2.4; }
.halo.breathe .arc { animation: breathe 4.2s ease-in-out infinite; }
.halo.think .arc { stroke-dasharray: 16 84; animation: travel 1.15s linear infinite; }
@keyframes breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes travel { to { stroke-dashoffset: -100; } }

/* ---------- reveal on scroll ----------
   Hidden from the first paint wherever scripts run (22 Oct 2026: they were hidden only once the page's script had
   arrived, so they showed, vanished and came back: a flash). If the script never arrives they show themselves after
   four seconds; once it has, they wait for their turn (src/web/ui.js reveal). */
[data-reveal] { transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
@media (scripting: enabled) {
  [data-reveal]:not(.in) { opacity: 0; transform: translateY(10px); animation: reveal-anyway 0s var(--reveal-wait, 4s) forwards; }
}
.js { --reveal-wait: 9999s; }
:where(.js) [data-reveal]:not(.in) { opacity: 0; transform: translateY(10px); } /* browsers without (scripting) */
@keyframes reveal-anyway { to { opacity: 1; transform: none; } }

/* ---------- footer ---------- */
.foot { padding: var(--s8) 0 var(--s7); border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s6); }
.foot h3 { font: 500 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s4); }
.foot li + li { margin-top: 10px; }
.foot a { text-decoration: none; font-size: 15px; }
.foot a:hover { text-decoration: underline; }
.foot-note { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); justify-content: space-between; }

/* ---------- small pieces ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 90; transform: translate(-50%, 16px); opacity: 0; padding: 13px 20px; border-radius: 999px; background: var(--glass); color: var(--pearl); font-size: 14.5px; pointer-events: none; transition: opacity var(--calm), transform var(--calm) var(--ease); max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.offline { position: fixed; inset: 0 0 auto 0; z-index: 95; padding: 10px 16px; background: var(--glass); color: var(--pearl); font-size: 14.5px; text-align: center; pointer-events: none; animation: offline-in var(--calm) var(--ease); }
@keyframes offline-in { from { opacity: 0; transform: translateY(-100%); } }
.noimg { background: var(--card); }
.waiting .noimg { background: var(--glass-lift); }
dialog.sheet { border: 0; padding: clamp(22px, 4vw, 36px); border-radius: var(--r-lg); background: var(--panel); color: var(--ink); width: min(520px, calc(100vw - 32px)); box-shadow: 0 40px 120px -40px rgba(4, 7, 14, .6); }
dialog.sheet::backdrop { background: rgba(6, 8, 14, .55); }
dialog.sheet[open] { animation: rise var(--calm) var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); margin-bottom: var(--s4); }
/* On a phone a sheet rises from the bottom edge, where the thumb already is. */
@media (max-width: 700px) {
  dialog.sheet { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92svh; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); }
  dialog.sheet[open] { animation: sheet-up var(--calm) var(--ease); }
  dialog.sheet::before { content: ""; display: block; width: 38px; height: 4px; margin: -8px auto 14px; border-radius: 4px; background: var(--line); }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
details.faq { border-top: 1px solid var(--line); }
details.faq:last-of-type { border-bottom: 1px solid var(--line); }
details.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--s5); padding: 22px 0; font: 400 clamp(19px, 2vw, 23px)/1.25 var(--serif); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font: 300 24px/1 var(--sans); color: var(--muted); transition: transform var(--calm) var(--ease); }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq > div { padding: 0 0 24px; max-width: var(--measure); color: var(--muted); }
.spinner-line { height: 2px; width: 100%; background: var(--line); overflow: hidden; border-radius: 2px; }
.spinner-line::after { content: ""; display: block; height: 100%; width: 30%; background: var(--ink); animation: slide 1.1s var(--ease) infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.swatch { --a: #1d5b4f; --b: #0e2c27; background: linear-gradient(155deg, var(--a), var(--b)); }

@media (max-width: 900px) {
  body { font-size: 16px; }
  .split, .split.wide-left { grid-template-columns: 1fr; }
  .nav-links { position: fixed; inset: 64px 0 auto 0; flex-direction: column; gap: 0; padding: var(--s3) clamp(20px, 5vw, 56px) var(--s5); background: var(--bg); border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity var(--calm), transform var(--calm) var(--ease); }
  .nav-links a { padding: 14px 0; font-size: 18px; color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav.open .nav-links { opacity: 1; transform: none; pointer-events: auto; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav-cta .hide-s { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .form-2 { grid-template-columns: 1fr; }
}
/* On a phone a finger needs 44px in one direction. The page stylesheets load after this one, so the places
   that make a control smaller (desk toolbars, enquiry stages, the sign-in tabs) are named here and outrank them. */
@media (max-width: 900px) {
  .btn.small, button.chip, a.chip, .link, .nav-toggle, .me-tabs button { min-height: 44px; }
  :root .tabs button, :root .work-head .chip, :root .statusrow .chip { min-height: 44px; }
  .link { display: inline-block; }
  .nav-toggle { min-width: 44px; }
}
@media (max-width: 520px) {
  .foot-grid { grid-template-columns: 1fr; }
  .btn { padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* The mark and the menu button keep their size when the bar gets tight. */
.brandmark, .brandmark svg, .nav-toggle, .nav-cta { flex: none; }
.brandmark { white-space: nowrap; }
@media (max-width: 520px) { .nav { gap: var(--s3); } }

/* The home indicator and the notch sit where fixed things like to rest. These are positioned from the edge,
   so the edge moves; padding would only make them taller. */
@supports (padding: env(safe-area-inset-bottom)) {
  .toast { bottom: calc(28px + env(safe-area-inset-bottom)); }
  :root .askbar { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .offline { padding-top: calc(10px + env(safe-area-inset-top)); }
}

/* Moving between MIRVA's pages: the pages cross-fade and the mark stays put (browsers that can; others just change page). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .nav .brandmark { view-transition-name: mirva-mark; }
  .hero-glass { view-transition-name: mirva-glass; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
}

/* ---------- touch: poise (23 Oct 2026; the founder: "slimy and squishy... we are making it for elite and elegant") ----------
   A press no longer squashes a control: it sinks one pixel, firmly, and comes back in 180 ms. Every move is short and
   decisive and lands without a tail (--spring is now a standard curve; the name stays so every rule follows it), and
   nothing stretches, bounces or breathes. Only transform and opacity move. */
:root { --spring: cubic-bezier(.4, 0, .2, 1); }
.btn { transition: transform 180ms var(--spring), opacity var(--quick), background-color var(--calm), box-shadow var(--calm); }
.btn:active { transform: translateY(1px); transition-duration: 60ms; }
.chip { transition: transform 180ms var(--spring), background-color var(--calm) var(--spring), color var(--calm), box-shadow var(--calm); }
.chip:active, button.chip:active { transform: translateY(1px); transition-duration: 60ms; }
.nav-toggle, .link { transition: opacity var(--quick); }
.nav-toggle:active, .link:active { opacity: .55; }
summary { -webkit-tap-highlight-color: transparent; }

/* sheets slide in and out, and the dim behind them fades (browsers without this keep the rise above) */
@supports (transition-behavior: allow-discrete) {
  dialog.sheet, dialog.sheet[open] { animation: none; }
  dialog.sheet { transition: opacity .22s var(--spring), transform .3s var(--spring), overlay .3s allow-discrete, display .3s allow-discrete; }
  dialog.sheet:not([open]) { opacity: 0; transform: translateY(8px); }
  @starting-style { dialog.sheet[open] { opacity: 0; transform: translateY(8px); } }
  dialog.sheet::backdrop { transition: opacity .22s, overlay .3s allow-discrete, display .3s allow-discrete; }
  @starting-style { dialog.sheet[open]::backdrop { opacity: 0; } }
  @media (max-width: 700px) {
    dialog.sheet:not([open]) { opacity: 1; transform: translateY(100%); }
    @starting-style { dialog.sheet[open] { opacity: 1; transform: translateY(100%); } }
  }
}

/* an answer opens and closes smoothly, at its own height */
@supports (interpolate-size: allow-keywords) {
  details { interpolate-size: allow-keywords; }
  details::details-content { block-size: 0; overflow: clip; transition: block-size .3s var(--spring), content-visibility .3s allow-discrete; }
  details[open]::details-content { block-size: auto; }
}

/* waiting for words and pictures: soft shapes in the page's own colours, a slow light across them */
.skel { position: relative; overflow: hidden; background: var(--card); border-radius: var(--r-md); }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--panel) 70%, transparent), transparent); animation: skel 1.4s var(--ease) infinite; }
@keyframes skel { to { transform: translateX(100%); } }
.skel-line { height: 14px; border-radius: 7px; }
.skel-wrap { display: grid; gap: 14px; align-content: start; }
.skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.skel-card { aspect-ratio: 3 / 4; }

@media (prefers-reduced-motion: reduce) {
  .btn:active, .chip:active { transform: none; }
  .skel::after { animation: none; }
}

/* ---------- the room: marble under the light pages, lamplight in the dark ones, and an arch where they meet ----------
   The public pages stand in the same fitting room as the presentation models: honed marble by day, smoky marble at
   night. Where a light room meets a dark one, the later room rises in an arch (the top of the oval mirror) with one
   line of light along its rim, so the page flows instead of cutting. Only the public pages (body[data-page]). */
body[data-page]:not(.dark) { background: url(/brand/marble-light.webp) 50% 0 / 1500px auto, var(--bg); }
body[data-page].band { background: radial-gradient(120% 90% at 30% 0%, var(--bg-glow), transparent 62%), url(/brand/marble-light.webp) 50% 0 / 1500px auto, var(--bg); }
body[data-page] .band { background: radial-gradient(70% 55% at 88% 0%, rgba(226, 201, 149, .16), transparent 70%), radial-gradient(120% 90% at 30% 0%, var(--bg-glow), transparent 62%); }
body[data-page] .section, body[data-page] .hero { position: relative; overflow-x: clip; }
body[data-page] :is(.hero.dark, .section.dark) + .section:not(.dark),
body[data-page] .section:not(.dark) + .section.dark { isolation: isolate; --arch-h: clamp(34px, 7vw, 92px); --rim: rgba(246, 248, 251, .55); }
body[data-page] .section:not(.dark) + .section.dark { --rim: rgba(226, 201, 149, .6); }
body[data-page] :is(.hero.dark, .section.dark) + .section:not(.dark)::before,
body[data-page] .section:not(.dark) + .section.dark::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 1px; width: 150%; height: var(--arch-h);
  transform: translate(-50%, -100%); border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none;
  background: var(--bg-glow); box-shadow: inset 0 1px 0 var(--rim), 0 -18px 40px -24px var(--rim);
}
body[data-page] :is(.hero.dark, .section.dark) + .section:not(.dark)::after,
body[data-page] .section:not(.dark) + .section.dark::after {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: calc(var(--arch-h) * 3.2); pointer-events: none;
  background: linear-gradient(var(--bg-glow), transparent);
}

/* ---------- depth: a soft light from above on everything that can be pressed ----------
   Buttons were flat fills. Each now has a faint highlight along its top edge and a shadow tinted like the room, lifts a
   hair on hover and sinks when pressed. In a dark room the pearl button catches the lamplight. */
.btn {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 84%, white), var(--accent) 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .14), 0 1px 2px rgba(20, 16, 10, .16), 0 12px 24px -14px rgba(20, 16, 10, .55);
}
.btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .14), 0 2px 4px rgba(20, 16, 10, .16), 0 18px 30px -16px rgba(20, 16, 10, .6); }
.btn:active { box-shadow: inset 0 2px 7px rgba(0, 0, 0, .25); }
.dark .btn:not(.ghost), .hero.dark .btn:not(.ghost) {
  background: linear-gradient(180deg, #fffdfa, var(--accent) 72%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .1), 0 0 0 1px rgba(226, 201, 149, .3), 0 14px 30px -14px rgba(226, 201, 149, .45), 0 6px 14px -6px rgba(0, 0, 0, .6);
}
.btn.ghost { background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 55%, transparent), transparent); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(20, 16, 10, .06); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink), inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 18px -12px rgba(20, 16, 10, .4); }
.dark .btn.ghost { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 22px -14px rgba(0, 0, 0, .7); }
.dark .btn.ghost:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 22px -14px rgba(0, 0, 0, .7); }
.btn.danger { background: linear-gradient(180deg, color-mix(in oklab, var(--bad) 85%, white), var(--bad) 62%); }
.chip { background: linear-gradient(180deg, var(--chip), color-mix(in oklab, var(--chip) 94%, #b9a98f)); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .65), 0 1px 2px rgba(20, 16, 10, .07); }
.chip.on, .chip[aria-pressed="true"] { background: linear-gradient(180deg, color-mix(in oklab, var(--ink) 82%, white), var(--ink) 65%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 14px -8px rgba(20, 16, 10, .6); }
.card { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(20, 16, 10, .05), 0 24px 48px -36px rgba(20, 16, 10, .35); }

/* ---------- the small things ----------
   No paragraph ends on one lonely word; quotation marks hang outside the measure where the browser can; prices and
   figures line up. Printer's punctuation in the pages comes from `node scripts/typeset.mjs`. */
p, li, figcaption, dd, .lede, .fine { text-wrap: pretty; }
blockquote, q { hanging-punctuation: first; }
.price, .num, td, .compare { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- WhatsApp: every button that opens WhatsApp carries its logo (23 Oct 2026, the founder asked) ----------
   The glyph is Simple Icons' (CC0), in WhatsApp's own green, so it is known at a glance. */
.wa::before {
  content: ""; display: inline-block; flex: none; width: 1.3em; height: 1.3em; margin-right: .55em; vertical-align: -.28em;
  background: #25d366;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat;
}