/* TL-Watchmaking — site.css */
:root {
  --ink: #16140f; --ink-2: #4a463d; --ink-3: #6b6558;
  --paper: #f7f3ea; --paper-2: #efe8da; --card: #fffdf8; --line: #ddd3c0;
  --night: #0f1519; --night-2: #17212a; --cream: #efe8da;
  --brass: #b8925a; --brass-2: #d8b77f; --blue: #3f5b8e;
  /* Brass as text on the light pages: the same hue, dark enough to read
     (small text 4.8:1, large italic 3.4:1 on paper). --brass stays for lines,
     fills and everything on the dark sections. */
  --brass-ink: #80602c; --brass-deep: #9a7640;
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --r: 18px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; }

html[data-lang="fr"] [data-l]:not([data-l="fr"]),
html[data-lang="en"] [data-l]:not([data-l="en"]),
html[data-lang="nl"] [data-l]:not([data-l="nl"]),
html[data-lang="de"] [data-l]:not([data-l="de"]) { display: none !important; }

.wrap { width: min(1180px, 100%); margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; line-height: 1.06; margin: 0; }
h1 { font-size: clamp(46px, 6.6vw, 88px); }
h2 { font-size: clamp(36px, 4.6vw, 58px); text-wrap: balance; }
h3 { font-size: 27px; line-height: 1.12; }
h4, .h4 { font: 600 15px/1.35 var(--sans); margin: 0 0 6px; letter-spacing: 0; }
em { font-style: italic; color: var(--brass-deep); }
p { margin: 0; }
.eyebrow { font: 500 12px/1.4 var(--sans); text-transform: uppercase; color: var(--brass-ink); margin: 0 0 18px; }
.muted { color: var(--ink-3); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s; white-space: nowrap; }
.btn-brass { background: var(--brass); color: #16140f; }
.btn-brass:hover { background: var(--brass-2); }
.btn-line { border-color: currentColor; color: inherit; background: transparent; }
.btn-line:hover { background: rgba(184, 146, 90, .12); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: #2b2820; }
.link-arrow { font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--brass); padding-bottom: 2px; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 50; 
  }
.top-in { display: flex; align-items: center; gap: 22px; height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand-mark { height: 38px; width: auto; display: block; opacity: 1; transition: opacity .3s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.brand:hover .brand-mark { opacity: 1; transform: translateX(2px); }
.brand-name { font: 500 12px/1 var(--sans); text-transform: uppercase; }
.foot-brand img { height: 54px; width: auto; opacity: .5; transition: opacity .4s ease; }
.foot-brand img:hover { opacity: .85; }
.nav { display: flex; }
.nav a { text-decoration: none; transition: opacity .2s, color .2s; white-space: nowrap; }
@media (max-width: 1260px) { .top-cta { display: none; } }
.lang { display: flex; border-radius: 999px; }
.lang button { background: none; border: 0; color: inherit; font: 500 11px/1 var(--sans); letter-spacing: .1em; padding: 7px 9px; border-radius: 999px; cursor: pointer; opacity: .6; }
.lang button.on { background: var(--brass); color: var(--ink); opacity: 1; }
.lang a { color: inherit; text-decoration: none; font: 500 11px/1 var(--sans); }
.lang a:hover { opacity: 1; }
.lang a.on { opacity: 1; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--brass); color: var(--ink); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
.menu { display: none; background: none; border: 0; color: inherit; padding: 10px; margin-right: -10px; cursor: pointer; }
.menu span { display: block; width: 22px; height: 1.5px; background: currentColor; margin: 5px 0; transition: transform .3s; }
@media (max-width: 1080px) {
  .nav { position: fixed; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; 
    padding: 6px clamp(16px, 4vw, 40px) 22px; transform: translateY(-110%); visibility: hidden; transition: transform .35s, visibility .35s;
    z-index: -1; }
  .nav a { padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 17px; opacity: .9; }
  body.nav-open .nav { transform: none; visibility: visible; }
  body.nav-open .menu span:first-child { transform: translateY(3.25px) rotate(45deg); }
  body.nav-open .menu span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .menu { display: block; }
  .top-cta { display: none; }
  .top-in { gap: 12px; }
}
@media (max-width: 520px) {
  .menu { margin-right: -6px; }
  .brand { gap: 9px; }
  .brand-mark { height: 27px; }
  .brand-name { font-size: 11px; letter-spacing: .2em; }
  .lang button, .lang a { padding: 7px 7px; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-radial-gradient(circle at 78% 40%, rgba(216, 183, 127, .045) 0 1px, transparent 1px 14px); }
.hero h1 { text-wrap: balance; }
.hero-in { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(52px, 8vw, 110px); }
.hero .lead { font-size: clamp(17px, 1.6vw, 20px); max-width: 34em; margin: 28px 0 36px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-facts { list-style: none; padding: 26px 0 0; margin: 52px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(216, 183, 127, .2); }
.hero-facts b { display: block; font: 500 21px/1.15 var(--serif); margin-bottom: 4px; }
.hero-facts li > span { font-size: 12.5px; line-height: 1.45; display: block; }
.hero-facts a { text-decoration: none; }
.hero-dial { margin: 0; }
.hero-dial svg { width: 100%; height: auto; }
.hero-dial figcaption { text-align: center; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; margin-top: 12px; }
@media (max-width: 880px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-dial { max-width: 300px; width: 74%; margin: 0 auto; order: -1; }
  .hero-facts { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
}

.page-hero { background: var(--night); color: var(--cream); }
.page-hero .lead { font-size: 18px; margin-top: 20px; }

/* ── Sections ───────────────────────────────────────────────────────────── */
.sec-alt { background: var(--paper-2); }
.sec-dark { background: var(--night); color: var(--cream); }
.sec-dark .eyebrow, .sec-dark em { color: var(--brass-2); }
.sec-head { max-width: 780px; }
.sec-lead { font-size: 18px; color: var(--ink-2); margin-top: 22px; }
.sec-dark .sec-lead { color: rgba(239, 232, 218, .72); }
.sub-title { font: 500 13px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px; }
.sec-dark .sub-title { color: rgba(239, 232, 218, .55); }
.block { margin-top: clamp(52px, 7vw, 84px); }
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.block-head .sub-title { margin: 0; }

.cards { display: grid; gap: 18px; }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1040px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } .cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cards-4, .cards-3, .cards-2 { grid-template-columns: 1fr; } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; color: var(--ink); display: flex; flex-direction: column; }
/* A light card inside a dark section keeps its own dark ink (it used to take
   the section's cream, which left the kit names white on white). */
.sec-dark .card:not(.card-feature) em { color: var(--brass-deep); }
.sec-dark .card:not(.card-feature) .eyebrow { color: var(--brass-ink); }
.card .sub { color: var(--ink-3); font-size: 14px; margin-top: 8px; }
.card-feature { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.card-feature .sub, .card-feature .opts { color: rgba(239, 232, 218, .7); }
.card-feature .opts { border-color: rgba(239, 232, 218, .16); }
.card-feature .price { color: var(--brass-2); }
.badge { display: inline-block; align-self: flex-start; font: 500 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2); margin-bottom: 18px; }
.card-feature .badge, .sec-dark .badge { border-color: rgba(216, 183, 127, .4); color: var(--brass-2); }
.price { font: 500 42px/1 var(--serif); margin: 22px 0 18px; }
.price small { font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; vertical-align: middle; }
.card-feature .price small { color: rgba(239, 232, 218, .55); }
.opts { list-style: none; padding: 14px 0 0; margin: auto 0 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.opts li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.opts li b { font-weight: 600; white-space: nowrap; }
.note-line { margin-top: 26px; color: var(--ink-2); font-size: 15px; }

/* ── Online course ──────────────────────────────────────────────────────── */
.online { display: grid; grid-template-columns: 1.05fr .95fr; background: var(--night); color: var(--cream); border-radius: calc(var(--r) + 6px); overflow: hidden; }
.online-text { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; }
.online-text h3 { font-size: clamp(32px, 3.4vw, 44px); }
.online-text .badge { border-color: rgba(216, 183, 127, .45); color: var(--brass-2); }
.online-text .sub { color: rgba(239, 232, 218, .74); font-size: 16px; margin-top: 14px; }
.online-text .price { color: var(--brass-2); font-size: 52px; margin: 26px 0 8px; }
.online-text .incl { list-style: none; padding: 0; margin: 12px 0 26px; font-size: 14.5px; color: rgba(239, 232, 218, .8); }
.online-text .incl li { padding: 5px 0; display: flex; gap: 10px; }
.online-text .incl li::before { content: "✓"; color: var(--brass-2); }
.online-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.online .ph { border-radius: 0; aspect-ratio: auto; min-height: 320px; height: 100%; }
@media (max-width: 880px) { .online { grid-template-columns: 1fr; } .online .ph { min-height: 240px; aspect-ratio: 16 / 10; order: -1; } }

.steps { list-style: none; padding: 0; margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.steps.three { grid-template-columns: repeat(3, 1fr); }
.steps li { border-top: 1px solid var(--ink); padding-top: 18px; }
.steps p { color: var(--ink-2); font-size: 15px; }
.sec-dark .steps li { border-top-color: rgba(239, 232, 218, .22); }
.sec-dark .steps p { color: rgba(239, 232, 218, .72); }
.sec-dark .step-n, .sec-dark .link-more, .sec-dark .pl-cat { color: var(--brass-2); }
.sec-dark .topic { color: var(--ink); }          /* a light tile keeps its dark ink in a dark section */
.step-n { font: italic 400 36px/1 var(--serif); color: var(--brass-deep); display: block; margin-bottom: 14px; }
@media (max-width: 900px) { .steps, .steps.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps, .steps.three { grid-template-columns: 1fr; } }

.kit h3 { font-size: 26px; }
.kit .price { font-size: 36px; margin: 16px 0 14px; }
.tags { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 12.5px; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.kit .btn { margin-top: auto; align-self: flex-start; }
.items { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1px solid var(--ink); }
.items div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dotted var(--line); font-size: 15px; }
.items b { font-weight: 600; white-space: nowrap; }
.items .ship { color: var(--ink-3); }
.sec-dark .items .ship { color: rgba(239, 232, 218, .7); }
@media (max-width: 640px) { .items { grid-template-columns: 1fr; } }

.mini-steps { margin: 18px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 15px; }
.mini-steps li { padding: 4px 0; }
.inperson { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 880px) { .inperson { grid-template-columns: 1fr; } }

.price-list { margin-top: 40px; border-top: 1px solid var(--ink); }
.price-list details { border-bottom: 1px solid var(--line); }
.price-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; padding: 18px 0; font: 500 22px/1.2 var(--serif); }
.price-list summary::-webkit-details-marker { display: none; }
.price-list summary::after { content: "+"; font-family: var(--sans); font-weight: 300; color: var(--brass); }
.price-list details[open] summary::after { content: "−"; }
.pl-group { padding-bottom: 18px; columns: 2; column-gap: 48px; }
.pl-row { break-inside: avoid; display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px dotted var(--line); font-size: 15px; }
.pl-row small { display: block; color: var(--ink-3); font-size: 13px; }
.pl-row b { font-weight: 600; white-space: nowrap; }
.pl-cat { break-after: avoid; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass-ink); margin: 14px 0 6px; }
@media (max-width: 720px) { .pl-group { columns: 1; } }

/* ── Photos (graceful when missing) ─────────────────────────────────────── */
.ph { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%;
  background: repeating-radial-gradient(circle at 30% 35%, rgba(216, 183, 127, .07) 0 1px, transparent 1px 10px), linear-gradient(140deg, #26333c, #0e1418); }
.ph::before { content: "TL"; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border: 1px solid rgba(216, 183, 127, .28);
  border-radius: 50%; display: grid; place-items: center; font: 500 26px/1 var(--serif); color: rgba(216, 183, 127, .45); }
.ph img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.ph-tall { aspect-ratio: 4 / 5; }
.ph-square { aspect-ratio: 1; }
.ph-light { background: #eceef0; }
.ph-light img { object-fit: contain; }
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: clamp(40px, 5vw, 60px); }
.strip .ph { aspect-ratio: 3 / 4; border-radius: 14px; }
@media (max-width: 640px) { .strip { grid-template-columns: 1fr 1fr; } }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(40px, 5vw, 64px); }
.gallery .ph { aspect-ratio: 16 / 10; border-radius: 14px; }
@media (max-width: 640px) { .gallery { grid-template-columns: 1fr 1fr; } }

/* ── Photos of the work, captioned (GALLERY) ───────────────────────────── */
.pics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 14px; margin-top: clamp(28px, 4vw, 44px); }
.pic { margin: 0; }
.pic .ph { aspect-ratio: 1; border-radius: 12px; }
.pic .ph img { height: 100%; aspect-ratio: auto; }
.pic figcaption { font-size: 14px; line-height: 1.45; color: var(--ink-3); margin-top: 9px; }
.pics-revision { counter-reset: step; }
.pics-revision .pic figcaption::before { counter-increment: step; content: counter(step) ". "; color: var(--brass-ink); font-weight: 600; }
.works { display: grid; gap: clamp(44px, 6vw, 72px); margin-top: clamp(36px, 5vw, 56px); }
.work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.work h3 { margin: 0 0 10px; }
.work .pics { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
.work .pics:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
.work .pics:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
.work .pic figcaption { font-size: 13px; }
@media (max-width: 900px) { .pics { grid-template-columns: repeat(3, 1fr); } .work { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .pics, .work .pics, .work .pics:has(> :nth-child(3)), .work .pics:has(> :nth-child(4)) { grid-template-columns: 1fr 1fr; } }

/* ── Sessions ───────────────────────────────────────────────────────────── */
.session { display: grid; grid-template-columns: 76px 1fr auto; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.s-date { text-align: center; border: 1px solid var(--line); border-radius: 14px; padding: 10px 0 9px; background: var(--card); }
.s-day { display: block; font: 500 32px/1 var(--serif); }
.s-mon { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.session h3 { font-size: 25px; }
.s-when { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; }
.s-meta { display: flex; gap: 8px 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-3); margin-top: 6px; }
.s-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.seats { font-size: 12.5px; font-weight: 500; color: #3d6b4a; }
.seats.few { color: #a0611c; }
.seats.full { color: #9b3b30; }
.s-cal { font-size: 12.5px; color: var(--ink-3); }
.session.full .s-date, .session.full h3 { opacity: .55; }
@media (max-width: 640px) {
  .session { grid-template-columns: 62px 1fr; gap: 14px; }
  .s-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}
.empty { padding: 22px 0; color: var(--ink-2); }
.month { font: 500 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); margin: 40px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--card); color: var(--ink-2); padding: 9px 14px; border-radius: 999px; cursor: pointer; font-size: 13.5px; }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.gift { display: flex; flex-direction: row; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--night); color: var(--cream); border-color: var(--night); }
.gift h3 { color: var(--brass-2); }
.gift p { color: rgba(239, 232, 218, .72); margin-top: 6px; }

/* ── Creations & patent ─────────────────────────────────────────────────── */
.creations { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 22px; }
.creation h3 { margin-top: 20px; color: var(--cream); }
.creation p { color: rgba(239, 232, 218, .7); margin-top: 8px; font-size: 15px; }
.creation .ph { aspect-ratio: 1; }
.creation:first-child .ph { aspect-ratio: 5 / 6; }
@media (max-width: 900px) { .creations { grid-template-columns: 1fr 1fr; } .creation:first-child { grid-column: 1 / -1; } .creation:first-child .ph { aspect-ratio: 16 / 12; } }
@media (max-width: 560px) { .creations { grid-template-columns: 1fr; } }
.patent { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px, 4vw, 48px); align-items: center;
  border: 1px solid rgba(216, 183, 127, .28); border-radius: calc(var(--r) + 4px); padding: clamp(24px, 4vw, 40px);
  background: linear-gradient(135deg, rgba(216, 183, 127, .08), rgba(216, 183, 127, 0) 60%); }
.seal { width: 112px; height: 112px; border-radius: 50%; border: 1px solid var(--brass); display: grid; place-items: center; text-align: center;
  font: 500 12px/1.25 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass-2); }
.seal b { display: block; font: 500 26px/1 var(--serif); letter-spacing: 0; text-transform: none; margin: 4px 0; }
.patent h3 { color: var(--cream); font-size: clamp(26px, 2.8vw, 34px); }
.patent p { color: rgba(239, 232, 218, .74); margin-top: 10px; max-width: 46em; }
.patent .meta { font-size: 13px; color: rgba(239, 232, 218, .5); margin-top: 12px; }
@media (max-width: 880px) { .patent { grid-template-columns: 1fr; } .seal { width: 96px; height: 96px; } }

/* ── WIM ────────────────────────────────────────────────────────────────── */
.wim-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: end; margin-bottom: clamp(36px, 5vw, 56px); }
.wim-top .sec-head { margin-bottom: 0; }
.wim-logo { font: 600 13px/1 var(--sans); letter-spacing: .28em; color: var(--blue); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.wim-logo span { width: 34px; height: 34px; border-radius: 9px; background: var(--blue); color: #fff; display: grid; place-items: center; letter-spacing: 0; font: 600 17px/1 var(--serif); }
.apps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app { border-radius: 16px; padding: 20px; background: var(--card); border: 1px solid var(--line); }
.app b { display: block; font: 600 13px/1 var(--sans); letter-spacing: .14em; color: var(--blue); margin-bottom: 8px; }
.app p { font-size: 14px; color: var(--ink-2); }
@media (max-width: 880px) { .wim-top { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .apps { grid-template-columns: 1fr; } }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.features > div { padding: 26px 26px 26px 0; border-bottom: 1px solid var(--line); }
.features > div:nth-child(3n+2), .features > div:nth-child(3n) { padding-left: 26px; border-left: 1px solid var(--line); }
.features .ic { font-size: 22px; display: block; margin-bottom: 12px; }
.features p { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 900px) { .features { grid-template-columns: 1fr 1fr; } .features > div, .features > div:nth-child(3n+2), .features > div:nth-child(3n) { padding: 22px 16px 22px 0; border-left: 0; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.demo { margin-top: clamp(40px, 5vw, 64px); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--blue); color: #fff; border-radius: calc(var(--r) + 4px); padding: clamp(24px, 4vw, 40px); }
.demo h3 { font-size: clamp(26px, 3vw, 36px); }
.demo p { color: rgba(255, 255, 255, .78); margin-top: 8px; }
.demo .btn { background: #fff; color: var(--blue); }
.pro-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; margin-top: clamp(52px, 7vw, 84px); }
.pro-photos { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; }
.pro-photos .ph { aspect-ratio: 4 / 5; border-radius: 14px; }
.pro-photos .ph:first-child { aspect-ratio: auto; }
.places { list-style: none; padding: 0; margin: 18px 0 6px; }
.places li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.places b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.wim-mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 24px; }
.wim-mod { border-top: 2px solid var(--brass, #b8925a); padding-top: 14px; }
.wim-mod ul { list-style: none; padding: 0; margin: 10px 0 0; }
.wim-mod li { font-size: 14.5px; color: var(--ink-2); padding: 7px 0; border-bottom: 1px solid var(--line); }
.wim-faq { margin-top: clamp(36px, 5vw, 56px); display: grid; gap: 8px; }
.wim-faq details { border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; background: var(--card, #fff); }
.wim-faq summary { cursor: pointer; font-weight: 600; }
.wim-faq p { margin: 10px 0 0; color: var(--ink-2); }
.whys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 24px; }
.why { background: var(--card, #fff); padding: 18px 20px; display: grid; gap: 6px; }
.why b { font: 500 21px/1.2 var(--serif); }
.why span { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 900px) { .whys { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .whys { grid-template-columns: 1fr; } }
.brand-names { font: 400 clamp(24px, 3vw, 34px)/1.3 var(--serif); margin: 10px 0 0; letter-spacing: .01em; }
.pro-list { list-style: none; padding: 0; margin: 18px 0 0; }
.pro-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.pro-list b { display: block; font-weight: 600; font-size: 15px; }
.pro-list span { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 880px) { .pro-row { grid-template-columns: 1fr; } }

/* ── About ──────────────────────────────────────────────────────────────── */
.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.about-text p + p { margin-top: 18px; }
.about-text .big { font: 400 clamp(22px, 2.3vw, 27px)/1.45 var(--serif); color: var(--ink); }
.about-photos { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (max-width: 880px) { .about { grid-template-columns: 1fr; } }

/* ── Contact ────────────────────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 6vw, 88px); }
.contact-list { list-style: none; padding: 0; margin: 40px 0 0; }
.contact-list li { padding: 16px 0; border-bottom: 1px solid rgba(239, 232, 218, .12); }
.contact-list small { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(239, 232, 218, .5); margin-bottom: 4px; }
.contact-list a, .contact-list span { font: 400 23px/1.3 var(--serif); text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--brass-2); }
.form { background: var(--night-2); border: 1px solid rgba(216, 183, 127, .16); border-radius: var(--r); padding: clamp(22px, 3vw, 36px); display: grid; gap: 16px; align-content: start; }
.form label { display: grid; gap: 7px; font-size: 13px; color: rgba(239, 232, 218, .7); }
.form input, .form select, .form textarea { width: 100%; font: 400 16px/1.4 var(--sans); color: var(--cream); background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(239, 232, 218, .16); border-radius: 12px; padding: 13px 14px; }
.form select option { color: var(--ink); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--brass); }
.form textarea { min-height: 140px; resize: vertical; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .hint { font-size: 12.5px; color: rgba(239, 232, 218, .45); }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .f-photos { display: grid; gap: 10px; }
.form .f-photos-pick input[type=file] { padding: 10px; border: 1px dashed rgba(239, 232, 218, .3); border-radius: 6px; background: transparent; color: inherit; font: inherit; }
.form .f-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.form .f-thumbs:empty { display: none; }
.form .f-thumb { position: relative; width: 72px; height: 72px; padding: 0; border: 1px solid rgba(239, 232, 218, .25); border-radius: 6px; overflow: hidden; background: #111; cursor: pointer; }
.form .f-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.form .f-thumb span { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; line-height: 20px; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px; }
.form .f-thumb:focus-visible { outline: 2px solid var(--brass, #c9a84c); outline-offset: 2px; }
.form .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.form .consent input { width: auto; margin: 3px 0 0; accent-color: var(--brass); }
.form .consent a { color: var(--brass-2); }
.form .consent-text { flex: 1; }
.form-msg { border-radius: 12px; padding: 14px 16px; font-size: 14.5px; margin: 0; }
.form-msg.ok { background: rgba(61, 107, 74, .28); color: #d4ecd9; }
.form-msg.err { background: rgba(155, 59, 48, .28); color: #f3d3ce; }
.form-msg a { color: inherit; font-weight: 600; }
.form button[disabled] { opacity: .6; cursor: wait; }
@media (max-width: 880px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form .row2 { grid-template-columns: 1fr; } }

/* ── Legal page ─────────────────────────────────────────────────────────── */
.legal { max-width: 760px; }
.legal h2 { font-size: 32px; margin: 44px 0 12px; }
.legal p, .legal li { color: var(--ink-2); }
.legal dl { display: grid; grid-template-columns: 180px 1fr; gap: 8px 20px; margin: 0; }
.legal dt { color: var(--ink-3); }
.legal dd { margin: 0; }
.todo { background: #fbeccb; padding: 1px 6px; border-radius: 4px; }
@media (max-width: 560px) { .legal dl { grid-template-columns: 1fr; } .legal dd { margin-bottom: 8px; } }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot { background: #0a0f12; color: rgba(239, 232, 218, .6); font-size: 13.5px; padding-block: 40px; }
.foot-in { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--brass-2); }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }

/* ── Student area ───────────────────────────────────────────────────────── */
.space-page { background: var(--paper-2); }
.space { padding-block: clamp(32px, 5vw, 64px); min-height: 60vh; }
.space-who { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--ink-2, #3a3d42); }
.space-login { max-width: 560px; }
.space-login h1 { font-size: clamp(34px, 4vw, 52px); margin: 10px 0 14px; }
.space-login .lead { color: var(--ink-2); font-size: 17px; }
.space-form { display: grid; gap: 14px; margin-top: 26px; max-width: 360px; }
.space-form label { display: grid; gap: 6px; font-size: 13px; color: var(--ink-3); }
.space-form input { font: 500 20px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-align: center;
  padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
.space-head h1 { font-size: clamp(30px, 3.6vw, 46px); margin-top: 6px; }
.space-head .lead { color: var(--ink-2); margin-top: 10px; max-width: 46em; }
.space-grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(20px, 3vw, 40px); margin-top: clamp(26px, 4vw, 44px); align-items: start; }
.chapters { display: grid; gap: 6px; position: sticky; top: 92px; }
.chapter { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: inherit; font: inherit; }
.chapter:hover { border-color: var(--brass); }
.chapter.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.ch-n { font: 500 15px/1 var(--serif); color: var(--brass-ink); }
.ch-t { font-size: 14.5px; } .ch-t small { display: block; font-size: 12px; color: var(--ink-3); }
.chapter.on .ch-t small { color: rgba(239, 232, 218, .6); }
.ch-p { font-size: 12px; color: var(--ink-3); } .ch-p.done { color: #3d6b4a; font-size: 15px; }
.chapter.on .ch-p { color: var(--brass-2); }
.player { aspect-ratio: 16 / 9; background: #0b1014; border-radius: var(--r); overflow: hidden; }
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-empty { display: grid; place-items: center; height: 100%; color: rgba(239, 232, 218, .4); }
.player-col h2 { font-size: 27px; margin-top: 18px; }
.film-langs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.film-langs button { font: 500 13px/1 var(--sans); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--hair, rgba(0,0,0,.15)); background: none; color: inherit; cursor: pointer; }
.film-langs button.on { background: var(--brass); border-color: var(--brass); color: var(--ink); }
/* the ten free minutes, offered under the buy buttons */
.free-nudge { margin: 14px 0 0; font-size: 14px; }
.free-nudge a { color: var(--ink-2, inherit); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }
.free-nudge a:hover { color: var(--brass-d, #9a7438); }
/* the course: its moments under each film, and a search through what is said */
.moments { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 4px; font-size: 13px; color: var(--ink-3); }
.moments button { font: 400 13px/1.2 var(--sans); padding: 6px 10px; border: 1px solid var(--hair, rgba(0,0,0,.15)); background: none; color: inherit; cursor: pointer; text-align: left; }
.moments button b { font-weight: 500; color: var(--brass-d, #9a7438); font-variant-numeric: tabular-nums; margin-right: 4px; }
.moments button:hover { border-color: var(--brass); }
.course-search { margin: 0 0 16px; position: relative; }
.course-search input { width: 100%; box-sizing: border-box; font: 400 16px/1.3 var(--sans); padding: 12px 14px; border: 1px solid var(--hair, rgba(0,0,0,.18)); background: var(--paper, #fff); color: inherit; }
.course-search input:focus { outline: none; border-color: var(--brass); }
.search-res { display: grid; gap: 2px; margin-top: 6px; max-height: 420px; overflow-y: auto; border: 1px solid var(--hair, rgba(0,0,0,.12)); background: var(--paper, #fff); }
.search-res p { margin: 10px 14px; }
.search-res .hit { display: grid; gap: 2px; text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--hair, rgba(0,0,0,.08)); background: none; color: inherit; cursor: pointer; font: inherit; }
.search-res .hit:hover { background: rgba(154,116,56,.08); }
.search-res .hit-where { font: 500 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.search-res .hit.moment .hit-where::before { content: '◆ '; color: var(--brass); }
.search-res .hit-text { font-size: 14px; line-height: 1.45; }
.search-res mark { background: rgba(201,168,76,.35); color: inherit; padding: 0 1px; }
.ask { margin-top: 14px; }
.ask-time { opacity: .8; font-variant-numeric: tabular-nums; }
.ask form { margin-top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 10px; }
.ask label { display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.ask-at { width: 76px; text-align: center; font-variant-numeric: tabular-nums; }
.ask input, .ask textarea { font: 400 15px/1.5 var(--sans); padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.ask-actions { display: flex; gap: 8px; }
.ask-photo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ask-photo-hint { font-size: 12.5px; color: var(--ink-2); opacity: .8; }
.ask-photo-thumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.ask-photo-thumb img { width: 104px; height: 78px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.qa-pic { display: block; margin-top: 8px; }
.qa-pic img { max-width: 320px; width: 100%; border-radius: 10px; border: 1px solid var(--line); }

/* The drawing board — a photo and a few ways to point at something on it. */
body.drawing { overflow: hidden; }
.draw { position: fixed; inset: 0; z-index: 60; background: rgba(8, 11, 14, .92); display: grid; place-items: center; padding: 12px; }
.draw-in { display: flex; flex-direction: column; gap: 10px; width: min(1100px, 100%); max-height: 100%; }
.draw-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; color: #efe8da; }
.draw-title { font: 500 14px/1.3 var(--sans); opacity: .85; flex: 1 1 100%; }
.draw-tools, .draw-colors, .draw-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.draw-acts { margin-left: auto; }
.draw-t, .draw-b { font: 500 13px/1 var(--sans); color: #efe8da; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px; padding: 9px 13px; cursor: pointer; }
.draw-t.on { background: var(--brass); border-color: var(--brass); color: #16110a; }
.draw-b.go { background: var(--brass); border-color: var(--brass); color: #16110a; }
.draw-b.ghost { opacity: .75; }
.draw-c { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); cursor: pointer; padding: 0; }
.draw-c.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.draw-stage { flex: 1; min-height: 0; display: grid; place-items: center; }
.draw-stage canvas { max-width: 100%; max-height: 74vh; border-radius: 10px; background: #000; touch-action: none; cursor: crosshair; }
@media (max-width: 720px) {
  .draw-t, .draw-b { padding: 10px 12px; }
  .draw-stage canvas { max-height: 62vh; }
}
.qa { margin-top: 30px; }
.qa h3 { font-size: 22px; margin-bottom: 10px; }
.qa-item { border-top: 1px solid var(--line); padding: 14px 0; }
.qa-item h4 { font: 600 14.5px/1.4 var(--sans); }
.qa-item p { color: var(--ink-2); font-size: 15px; margin-top: 6px; }
.qa-item.pending { opacity: .7; }
.qa-tag { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-ink); margin-left: 6px; }
.space .form-msg { margin-top: 10px; }
.space .form-msg.ok { background: rgba(61, 107, 74, .18); color: #2f5a3c; }
.space .form-msg.err { background: rgba(155, 59, 48, .15); color: #8d3a30; }
@media (max-width: 900px) {
  .space-grid { grid-template-columns: 1fr; }
  .chapters { position: static; grid-auto-flow: row; }
}

/* ── Following a repair ─────────────────────────────────────────────────── */
.stages { list-style: none; margin: 28px 0 22px; padding: 0; display: grid; gap: 0; max-width: 440px; }
.stage { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center; padding: 11px 0; color: var(--ink-3); font-size: 15.5px; position: relative; }
.stage + .stage::before { content: ""; position: absolute; left: 12px; top: -12px; width: 1px; height: 24px; background: var(--line); }
.stage .dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--line); justify-self: center; background: var(--paper); }
.stage.done { color: var(--ink-2); }
.stage.done .dot { background: var(--brass); border-color: var(--brass); }
.stage.now { color: var(--ink); font-weight: 600; }
.stage.now .dot { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 4px rgba(184, 146, 90, .25); }
#tr-watch { margin-bottom: 8px; }
#tr-stage { font-size: clamp(28px, 3.4vw, 42px); margin: 0 0 8px; }
.tr-note { color: var(--ink-3); font-size: 14.5px; max-width: 46em; }

/* ── What will it cost? ─────────────────────────────────────────────────── */
.calc-tabs { display: flex; gap: 8px; margin-top: 22px; }
.calc-tab { font: 500 14px/1 var(--sans); letter-spacing: .02em; padding: 11px 18px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.calc-tab.on { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.calc-grid { display: grid; grid-template-columns: 1fr 300px; gap: clamp(18px, 3vw, 36px); margin-top: 20px; align-items: start; }
.calc-pane { display: none; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.calc-pane.on { display: grid; }
.calc fieldset { border: 0; margin: 0; padding: 0; }
.calc legend { font: 500 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; padding: 0; }
.opt { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; font-size: 14.5px; }
.opt:hover { border-color: var(--brass); }
.opt input { accent-color: var(--brass); width: 16px; height: 16px; margin: 0; }
.opt b { font: 500 14px/1 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.opt:has(input:checked) { border-color: var(--brass); background: rgba(184, 146, 90, .07); }
.calc-out { position: sticky; top: 92px; background: var(--ink); color: var(--cream); border-radius: var(--r); padding: 22px; }
.calc-from { margin: 0; font: 500 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(239, 232, 218, .55); }
.calc-total { margin: 8px 0 12px; font: 400 clamp(34px, 4vw, 46px)/1 var(--serif); color: var(--brass-2); font-variant-numeric: tabular-nums; }
.calc-note { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: rgba(239, 232, 218, .62); }
.calc-out .btn { width: 100%; justify-content: center; }
@media (max-width: 820px) {
  .calc-grid { grid-template-columns: 1fr; }
  .calc-out { position: static; }
}

/* ── Topic pages ────────────────────────────────────────────────────────── */
.dial-link { display: block; color: inherit; text-decoration: none; }
.dial-link figcaption::after { content: " →"; opacity: 0; transition: opacity .3s ease; }
.dial-link:hover figcaption::after { opacity: 1; }
.page-hero { position: relative; overflow: hidden; padding-block: clamp(44px, 7vw, 96px); }
.page-hero-dark { background: radial-gradient(1100px 620px at 78% 32%, #243441 0%, var(--night) 62%); color: var(--cream); }
.page-hero-in { display: grid; grid-template-columns: 1fr minmax(280px, 540px); gap: clamp(28px, 5vw, 72px); align-items: center; }
.page-hero h1 { font-size: clamp(42px, 5.6vw, 76px); line-height: 1; margin: 12px 0 18px; }
.page-hero h1 em { display: block; font-size: .56em; line-height: 1.15; color: var(--brass-2); margin-top: 10px; }
.page-hero .lead { color: rgba(239, 232, 218, .78); max-width: 52ch; }
.page-hero .eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(216, 183, 127, .35); }
.page-hero .hint { font-size: 13px; color: rgba(239, 232, 218, .5); margin-top: 18px; }
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 28px; margin: 26px 0 30px; max-width: 620px; }
.specs div { border-top: 1px solid rgba(216, 183, 127, .22); padding: 11px 0; }
.specs dt { font: 500 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass-2); }
.specs dd { margin: 4px 0 0; font-size: 15px; color: var(--cream); }
.model-photos { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.model-photos figure { margin: 0; }
.link-more { font-weight: 500; color: var(--brass-ink); text-decoration: none; border-bottom: 1px solid currentColor; }
.astro-stage { margin: 0; display: grid; place-items: center; }
.astro-stage .mech-svg { width: min(560px, 90vw); }
.astro-photo { gap: 10px; }
.astro-photo .ph { width: min(480px, 90vw); aspect-ratio: 1207 / 1600; border-radius: 18px; box-shadow: 0 24px 60px rgba(20, 16, 8, .18); }
.astro-photo figcaption { font-size: 13.5px; color: var(--ink-3); text-align: center; max-width: 46ch; }
.follow-band { padding-block: 40px; }
.follow-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r); padding: 26px 30px; background: var(--card); }
.follow-in h3 { margin: 6px 0 0; font-size: clamp(22px, 2.4vw, 28px); }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 30px; }
.topic { display: grid; grid-template-rows: auto auto auto 1fr; gap: 6px; text-decoration: none; color: inherit;
  border: 1px solid var(--line); overflow: hidden; padding-bottom: 20px;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease, border-color .3s ease; }
.topic:hover { transform: translateY(-4px); }
.topic-ph { display: block; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 12px; }
.topic-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.topic:hover .topic-ph img { transform: scale(1.05); }
.topic-k { padding-inline: 20px; font: 500 11px/1 var(--sans); text-transform: uppercase; }
.topic b { padding-inline: 20px; font: 400 26px/1.15 var(--serif); }
.topic-t { padding-inline: 20px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.creation-link { display: block; color: inherit; text-decoration: none; }
.creation-link h3 { transition: color .3s ease; }
.creation-link:hover h3 { color: var(--brass-2); }
@media (max-width: 860px) {
  .page-hero-in, .model-photos { grid-template-columns: 1fr; }
}

/* ── Polish ─────────────────────────────────────────────────────────────── */
.eyebrow { position: relative; }
.sec-head .eyebrow::before, .sec .wrap > .eyebrow::before {
  content: ""; display: inline-block; width: 26px; height: 1px; background: var(--brass); vertical-align: middle;
  margin-right: 12px; opacity: .8; }
.card, .kit, .creation .ph, .shots figure { position: relative; }
.card::after, .kit::after { content: ""; position: absolute; inset: 0 0 auto; height: 1px; 
  background: linear-gradient(to right, transparent, rgba(216, 183, 127, .5), transparent); pointer-events: none; }
.creation .ph img, .shots img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.creation:hover .ph img { transform: scale(1.035); }
.btn-brass { position: relative; overflow: hidden; }
.btn-brass::after { content: ""; position: absolute; top: 0; bottom: 0; width: 42px; left: -60px; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transition: left .7s ease; }
.btn-brass:hover::after { left: 115%; }
.hero-dial { position: relative; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  .creation:hover .ph img { transform: none; }
  .btn-brass::after { display: none; }
}

/* ── Astro & TL01, running ──────────────────────────────────────────────── */
.mech { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(30px, 5vw, 56px); }
.mech-card { margin: 0; display: grid; justify-items: center; gap: 16px; }
.mech-svg { width: min(320px, 78vw); height: auto; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .45)); }
.mech-card figcaption { font-size: 14.5px; line-height: 1.55; color: rgba(239, 232, 218, .66); max-width: 34ch; text-align: center; }
.mech-card figcaption b { display: block; font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brass-2); margin-bottom: 8px; }
.mech-label { font: 400 4.6px/1 var(--sans); fill: #2a2f35; }
.mech-tick { font: 400 2.5px/1 var(--sans); fill: #2a2f35; }
.mech-date { font: 400 1.35px/1 var(--sans); fill: #5a4a22; }
.mech-month { font: 400 2.3px/1 var(--sans); fill: #5a4a22; }
.mech-season { font: 400 2.1px/1 var(--sans); fill: #5a4a22; }
.mech-zodiac { font: 400 2.8px/1 "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols", serif; fill: #5a4a22; }

/* the globe opens on the clock */
#astro { cursor: pointer; }
#lid-closed { transform-box: view-box; transform-origin: 210px 250px;
  transition: transform 1.4s cubic-bezier(.22, .9, .25, 1), opacity .7s ease .35s; }
#astro.opened #lid-closed { transform: translateY(-104px) rotate(-10deg) scaleY(.4); opacity: 0; }
#lid-open { opacity: 0; transform-box: view-box; transform-origin: 210px 250px; transform: translateY(46px) scaleY(.5);
  transition: opacity .8s ease .45s, transform 1.4s cubic-bezier(.22, .9, .25, 1) .25s; }
#astro.opened #lid-open { opacity: 1; transform: none; }
#astro-clock { transform-box: view-box; transform-origin: 210px 220px; opacity: 0; transform: scale(.94);
  transition: opacity .9s ease .45s, transform 1.2s cubic-bezier(.22, .9, .25, 1) .35s; }
#astro.opened #astro-clock { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  #lid-closed, #lid-open, #astro-clock { transition: none; }
}

@keyframes tl-turn { to { transform: rotate(360deg); } }
@keyframes tl-beat { 0% { transform: rotate(-132deg); } 50% { transform: rotate(132deg); } 100% { transform: rotate(-132deg); } }
.tl-wheel { transform-box: view-box; animation: tl-turn linear infinite; animation-play-state: paused; }
.running .tl-wheel { animation-play-state: running; }
.tl-beat { transform-box: view-box; transform-origin: 308px 250px; animation: tl-beat .8s cubic-bezier(.45, 0, .55, 1) infinite; animation-play-state: paused; }
.running .tl-beat { animation-play-state: running; }

/* ── The movement, assembled while you scroll ───────────────────────────── */
.scene { background: radial-gradient(1200px 700px at 50% 18%, #1b262e 0%, var(--night) 70%); color: var(--cream);
  height: 420vh; position: relative; }
.scene-in { position: sticky; top: var(--head, 72px); height: calc(100vh - var(--head, 72px)); display: grid; grid-template-columns: 1.15fr .85fr;
  align-items: center; gap: clamp(20px, 4vw, 60px); max-width: var(--wrap, 1180px); margin: 0 auto; padding-inline: 24px; }
.scene-stage { display: grid; place-items: center; }
.scene-parts { position: relative; width: min(560px, 46vw); aspect-ratio: 900 / 858; filter: drop-shadow(0 34px 80px rgba(0, 0, 0, .6)); }
.scene-part { position: absolute; inset: 0; width: 100%; height: auto; transform-origin: 50% 52%; will-change: transform, opacity; }
.scene-canvas { display: none; width: min(660px, 52vw); aspect-ratio: 1 / 1; cursor: grab; touch-action: pan-y; }
.scene-canvas:active { cursor: grabbing; }
.has-3d .scene-canvas { display: block; animation: fade-in 1.2s ease both; }
.has-3d .scene-parts, .has-3d .note-2d, .scene:not(.has-3d) .note-3d { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.mech-shot { width: min(320px, 78vw); height: auto; border-radius: 50%; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .45)); }
.scene-text { max-width: 38ch; }
.scene-text h2 { font-size: clamp(27px, 3.2vw, 40px); line-height: 1.1; margin: 10px 0 28px; }
.scene-note { margin: 26px 0 0; font-size: 12.5px; color: rgba(239, 232, 218, .38); max-width: 34ch; }
.scene-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; max-width: 34ch; }
.scene-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: baseline;
  opacity: .28; transition: opacity .5s ease, transform .5s ease; transform: translateY(4px); font-size: 16px; line-height: 1.55; }
.scene-steps li b { font: 400 13px/1 var(--mono, var(--sans)); letter-spacing: .1em; color: var(--brass-2); }
.scene-steps li.on { opacity: 1; transform: none; }
.scene-steps li.on span { color: var(--cream); }
@media (max-width: 860px) {
  /* On a phone the whole pinned block must fit under the header: the movement
     takes about half the height left, and one step shows at a time, the next
     fading in over it as you scroll. */
  .scene { height: 340vh; }
  .scene-in { grid-template-columns: 1fr; align-content: center; gap: 18px; }
  .scene-parts { width: min(340px, 76vw, calc((100svh - var(--head, 72px)) * .48)); }
  .scene-canvas { width: min(420px, 88vw, calc((100svh - var(--head, 72px)) * .5)); justify-self: center; }
  .scene-text h2 { margin-bottom: 16px; }
  .scene-steps { justify-self: stretch; }
  .scene-steps li { grid-area: 1 / 1; opacity: 0; }
  .scene-steps li.on { opacity: 1; }
  .scene-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scene { height: auto; }
  .scene-in { position: static; height: auto; padding-block: 60px; }
  .tl-wheel, .tl-beat { animation: none; }
  .scene-steps li { opacity: 1; transform: none; }
}

/* ── Software screenshots ───────────────────────────────────────────────── */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: clamp(26px, 4vw, 44px); }
.shots figure { margin: 0; background: #0d1218; border: 1px solid rgba(216, 183, 127, .16); border-radius: var(--r); overflow: hidden; aspect-ratio: auto; }
.shots img { display: block; width: 100%; height: auto; }
.shots figcaption { padding: 12px 14px 14px; font-size: 13.5px; line-height: 1.45; color: rgba(239, 232, 218, .72); }
.shots-note { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: rgba(239, 232, 218, .45); }
.sec:not(.sec-dark) .shots figcaption { color: var(--ink-3); }
.sec:not(.sec-dark) .shots figure { background: var(--card); border-color: var(--line); }
.sec:not(.sec-dark) .shots-note { color: var(--ink-3); }

/* ── Videos ─────────────────────────────────────────────────────────────── */
.videos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 26px; }
.vid { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r); overflow: hidden;
  background: #0b1014; cursor: pointer; aspect-ratio: 16 / 9; font: inherit; color: var(--cream); }
.vid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, opacity .4s ease; opacity: .88; }
.vid:hover img, .vid:focus-visible img { transform: scale(1.03); opacity: 1; }
.vid-play { position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(15, 21, 25, .62); color: var(--brass-2); font-size: 20px; padding-left: 4px; backdrop-filter: blur(2px);
  border: 1px solid rgba(216, 183, 127, .5); transition: background .3s ease, transform .3s ease; }
.vid:hover .vid-play { background: rgba(15, 21, 25, .82); transform: scale(1.06); }
.vid-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px; text-align: left; font-size: 15px; line-height: 1.35;
  background: linear-gradient(to top, rgba(10, 15, 19, .88), transparent); }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid.playing { cursor: default; }
.vid.playing .vid-play, .vid.playing .vid-t, .vid.playing img { display: none; }
.yt-note { margin-top: 12px; font-size: 13px; color: var(--ink-3); }

/* ── Photos, bigger ─────────────────────────────────────────────────────── */
.ph img, .gallery img { cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(9, 13, 16, .93);
  padding: clamp(12px, 4vw, 48px); opacity: 0; transition: opacity .25s ease; }
.lb.on { opacity: 1; }
.lb img { max-width: 100%; max-height: 82vh; border-radius: 4px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); cursor: zoom-out; }
.lb figcaption { color: rgba(239, 232, 218, .8); font-size: 14px; text-align: center; margin-top: 14px; max-width: 60ch; }
.lb figure { margin: 0; display: grid; justify-items: center; }
.lb-close, .lb-prev, .lb-next { position: absolute; background: none; border: 0; color: rgba(239, 232, 218, .75); cursor: pointer;
  font: 400 28px/1 var(--sans); padding: 12px 16px; }
.lb-close { top: 6px; right: 10px; font-size: 30px; }
.lb-prev { left: 4px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 4px; top: 50%; transform: translateY(-50%); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { color: var(--brass-2); }
.lb-count { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: rgba(239, 232, 218, .55); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .lb, .vid img { transition: none; } }

/* ── Motion ─────────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
}

/* ═══ Maison — the studio light of the renders ═══════════════════════════════
   A watch at this level is shown the way the independents show theirs: a soft
   grey studio ground, a great deal of air, thin serif capitals, no prices.
   This layer sits over the base styles. */
:root {
  --studio: #e9e9ea; --studio-hi: #f8f8f8; --studio-lo: #cdced1;
  --graphite: #1b1f24; --slate: #5c636b; --hair: rgba(27, 31, 36, .13);
  --gilt: #a5874a;
}

/* header */
/* Opaque, and no blur: an iPhone's Safari draws the page behind the clock and
   fills that strip with whatever is fixed or sticky at the very top of the
   screen. A see-through or blurred bar (a backdrop-filter counts as glass)
   lets the page show there, text above the header. Nothing else may stick at
   the very top either, so the pinned blocks below stick under the header
   (--head, measured in site.js). */
.top { background: #f1f1f2; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--graphite); border-bottom: 1px solid var(--hair); }
.brand-name { letter-spacing: .34em; font-weight: 500; }
.nav { gap: 26px; }
.nav a { font-size: 13px; letter-spacing: .05em; opacity: .66; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--graphite);
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; color: var(--graphite); }
.nav a:hover::after { transform: none; }
.lang { border-color: var(--hair); }
.lang a.on { background: var(--graphite); color: #f4f4f4; }
.top-cta { font: 500 11.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--graphite);
  border: 1px solid var(--graphite); transition: background .3s ease, color .3s ease; }
.top-cta:hover { background: var(--graphite); color: #f4f4f4; }
@media (max-width: 1080px) {
  .nav { background: #f1f1f2; border-bottom: 1px solid var(--hair); }
  .nav a { border-bottom-color: var(--hair); }
  .nav a::after { display: none; }
}

/* buttons */
.btn-maison { background: var(--graphite); color: #f4f4f4; border: 1px solid var(--graphite);
  font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 17px 28px; }
.btn-maison:hover { background: transparent; color: var(--graphite); }
.hero .btn-line, .maison-hero .btn-line, .page-hero-studio .btn-line { border-color: rgba(27, 31, 36, .35); color: var(--graphite);
  font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 17px 26px; }
.hero .btn-line:hover { border-color: var(--graphite); }

/* home hero — the studio */
.hero { background: radial-gradient(1200px 760px at 74% 40%, var(--studio-hi) 0%, var(--studio) 46%, var(--studio-lo) 100%); color: var(--graphite); }
.hero::before { display: none; }
.hero h1 { letter-spacing: -.02em; }
.hero h1 em { color: var(--gilt); font-weight: 400; }
.hero .eyebrow { color: var(--slate); }
.hero .lead { color: var(--slate); }
.hero-facts { border-top-color: var(--hair); }
.hero-facts b { color: var(--graphite); font-weight: 500; }
.hero-facts li > span { color: var(--slate); }
.hero-dial svg { filter: drop-shadow(0 46px 60px rgba(24, 28, 34, .26)); }
.hero-dial figcaption { color: var(--slate); }

/* pages in studio light */
.page-hero-studio { background: radial-gradient(1100px 700px at 72% 42%, var(--studio-hi) 0%, var(--studio) 48%, var(--studio-lo) 100%); color: var(--graphite); }
.page-hero-studio .lead { color: var(--slate); }
.page-hero-studio .eyebrow a { border-bottom-color: var(--hair); }
.page-hero-studio h1 em { color: var(--gilt); }
.page-hero-studio .hint { color: var(--slate); }

/* ── Model 1 ── */
.maison-hero { background: radial-gradient(1300px 900px at 50% 46%, var(--studio-hi) 0%, var(--studio) 44%, var(--studio-lo) 100%);
  color: var(--graphite); padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 110px); text-align: center; overflow: hidden; }
.maison-hero-in { display: grid; justify-items: center; }
.maison-hero .eyebrow { color: var(--slate); }
.maison-hero .eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hair); }
.maison-title { font: 300 clamp(64px, 10vw, 148px)/.9 var(--serif); letter-spacing: -.035em; margin: 14px 0 10px; }
.maison-sub { margin: 0; font: 500 11.5px/1.6 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--slate); }
.maison-line { max-width: 34ch; margin: 22px auto 0; font: 400 clamp(20px, 2.2vw, 26px)/1.35 var(--serif); font-style: italic; color: var(--graphite); }

.watch-stage { width: min(520px, 84vw); margin: clamp(22px, 4vw, 44px) auto 0; }
.watch-flip { position: relative; aspect-ratio: 400 / 520; transform-style: preserve-3d; cursor: pointer;
  transition: transform 1.3s cubic-bezier(.3, .1, .2, 1); }
.watch-flip[data-face="back"] { transform: rotateY(180deg); }
.watch-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.watch-back { transform: rotateY(180deg); }
.watch-face .hero-dial, .watch-face .hero-dial svg { width: 100%; height: 100%; }
.watch-face .hero-dial figcaption { display: none; }
.watch-face .hero-dial::after { display: none; }
.caseback { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 46px 60px rgba(24, 28, 34, .26)); pointer-events: none; }
.back-window { position: absolute; inset: 0; }
.back-window canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.watch-back.has-3d .back-window canvas { display: block; }
.back-fallback { position: absolute; left: 14.5%; top: 21%; width: 71%; height: auto; border-radius: 50%; }
.watch-back.has-3d .back-fallback { display: none; }
/* With the whole watch in 3D, the real caseback is drawn by the model itself —
   the S-shaped window, the winding wheel, the screws — and the drawing of it
   steps aside. It stays for a browser without WebGL. */
.watch-back.has-3d.whole .caseback { display: none; }
.watch-back.has-3d.whole .back-window canvas { filter: drop-shadow(0 46px 60px rgba(24, 28, 34, .26)); }
#wind-wheel { transform-box: view-box; transform-origin: 160px 112px; transition: transform 2.4s cubic-bezier(.3, .1, .2, 1); }
.wind-mark { font: 500 9px/1 var(--sans); letter-spacing: .08em; fill: #6b5424; }
.wind-arrow { font: 400 9px/1 var(--sans); fill: #6b5424; }
.flip-ctrl { display: inline-flex; gap: 2px; margin-top: 26px; padding: 3px; border: 1px solid var(--hair); border-radius: 999px; }
.flip-ctrl button { border: 0; background: none; cursor: pointer; color: var(--slate); padding: 10px 20px; border-radius: 999px;
  font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; transition: background .3s ease, color .3s ease; }
.flip-ctrl button[aria-pressed="true"] { background: var(--graphite); color: #f4f4f4; }

.statement { background: var(--studio); color: var(--graphite); padding-block: clamp(80px, 12vw, 170px); text-align: center; border-top: 1px solid var(--hair); }
.statement p { margin: 0 auto; max-width: 22ch; font: 300 clamp(32px, 4.6vw, 64px)/1.08 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.statement em { color: #97793f; }

.maison-split { background: #f3f3f3; padding-block: clamp(72px, 10vw, 140px); color: var(--graphite); }
.maison-split-rev { background: var(--studio); }
.maison-split-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.maison-split-rev .maison-split-in { grid-template-columns: .85fr 1.15fr; }
.maison-split-rev .maison-shot { order: 2; }
.maison-shot { margin: 0; }
.maison-shot img { width: 100%; height: auto; box-shadow: 0 40px 80px -50px rgba(24, 28, 34, .5); }
.maison-split-rev .maison-shot img { max-width: 460px; margin-inline: auto; border-radius: 4px; }
.maison-text .eyebrow { color: var(--slate); }
.maison-text h2 { font: 300 clamp(32px, 3.8vw, 52px)/1.05 var(--serif); letter-spacing: -.02em; margin: 14px 0 22px; }
.maison-text h2 em { color: #97793f; }        /* --gilt, deep enough to read on the pale grey */
.maison-text p { color: var(--slate); max-width: 44ch; }
.maison-hint { font-size: 13px; letter-spacing: .04em; }
.maison-list { list-style: none; padding: 0; margin: 0; }
.maison-list li { padding: 14px 0; border-top: 1px solid var(--hair); color: var(--slate); font-size: 15px; }
.maison-list li:last-child { border-bottom: 1px solid var(--hair); }

.maison-specs { background: #f3f3f3; color: var(--graphite); padding-block: clamp(72px, 10vw, 130px); }
.maison-specs .eyebrow { color: var(--slate); }
.specs-light { max-width: none; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 48px; margin-top: 28px; }
.specs-light div { border-top-color: var(--hair); padding: 18px 0 20px; }
.specs-light dt { color: var(--slate); letter-spacing: .2em; }
.specs-light dd { color: var(--graphite); font: 400 22px/1.3 var(--serif); margin-top: 6px; }

.maison-reserve { background: radial-gradient(900px 500px at 50% 0%, var(--studio-hi), var(--studio) 60%, var(--studio-lo)); color: var(--graphite);
  padding-block: clamp(90px, 13vw, 180px); text-align: center; }
.maison-reserve-in { display: grid; justify-items: center; }
.maison-reserve .eyebrow { color: var(--slate); }
.maison-reserve h2 { font: 300 clamp(44px, 6vw, 84px)/1 var(--serif); letter-spacing: -.03em; margin: 12px 0 20px; }
.maison-reserve p { color: var(--slate); max-width: 40ch; margin: 0 auto 34px; }
.reserve-cta { display: flex; gap: 28px; align-items: center; justify-content: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  .maison-split-in, .maison-split-rev .maison-split-in { grid-template-columns: 1fr; }
  .maison-split-rev .maison-shot { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .watch-flip, #wind-wheel { transition: none; }
}

/* home doors */
.topics { background: #f3f3f3; }
.topics-quiet { background: var(--studio); }
.topic { background: #fbfbfb; border-color: var(--hair); border-radius: 6px; }
.topic:hover { border-color: rgba(27, 31, 36, .35); box-shadow: 0 30px 60px -40px rgba(24, 28, 34, .45); }
.topic b { font-weight: 400; font-size: 28px; }
.topic-k { color: var(--slate); letter-spacing: .24em; }
.topic-ph { background: #d9dadc; }
.topic-ph.ph-light { background: #e4e4e6; }
.topics .sec-head h2 { font-weight: 300; }

/* ── The utility row: shop, student area, repair tracking ───────────────── */
.util-bar { border-bottom: 1px solid var(--hair); background: rgba(236, 236, 237, .7); }
.util-in { display: flex; justify-content: flex-end; gap: 22px; height: 32px; align-items: center; }
.util-in a { font: 500 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  color: var(--slate); transition: color .25s ease; }
.util-in a:hover { color: var(--graphite); }
.nav .nav-util { display: none; }
@media (max-width: 1080px) {
  .util-bar { display: none; }
  .nav .nav-util { display: block; color: var(--slate); letter-spacing: .14em; text-transform: uppercase; font-size: 12.5px; }
}

/* ── The course band, first thing under the hero ─────────────────────────── */
.course-band { background: var(--graphite); color: var(--cream); padding-block: clamp(56px, 8vw, 104px);
  border-top: 1px solid rgba(216, 183, 127, .16); }
.course-band-in { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.course-band .eyebrow { color: var(--brass-2); }
.course-band h2 { font: 300 clamp(30px, 3.9vw, 50px)/1.08 var(--serif); letter-spacing: -.02em; margin: 12px 0 18px; }
.course-band h2 em { font-style: italic; color: var(--brass-2); }
.course-band .lead { color: rgba(239, 232, 218, .74); max-width: 46ch; margin: 0 0 22px; font-size: 16.5px; line-height: 1.65; }
.course-points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 9px; }
.course-points li { position: relative; padding-left: 22px; font-size: 14.5px; color: rgba(239, 232, 218, .86); }
.course-points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 1px; background: var(--brass); }
.course-price { font: 400 15px/1 var(--sans); color: rgba(239, 232, 218, .6); margin: 0 0 22px; }
.course-price b { font: 400 30px/1 var(--serif); color: var(--cream); margin-left: 8px; }
.course-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.course-band .btn-maison { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.course-band .btn-maison:hover { background: var(--brass-2); border-color: var(--brass-2); }
.course-band .link-more { color: rgba(239, 232, 218, .7); }
.course-band .link-more:hover { color: var(--brass-2); }
.course-band-shot { margin: 0; }
.course-band-shot img { width: 100%; height: auto; display: block; border-radius: 4px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.course-band-shot figcaption { margin-top: 12px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(239, 232, 218, .62); }
@media (max-width: 880px) { .course-band-in { grid-template-columns: 1fr; } .course-band-shot { order: -1; } }

/* ── Shop: the cards that carry no picture ──────────────────────────────── */
#boutique .topic-grid .topic { grid-template-rows: auto auto 1fr; padding-top: 26px; }
#boutique .topic-grid .topic b { font-size: 24px; }

@media (max-width: 1400px) { .nav { gap: 17px; } .nav a { font-size: 12.5px; } .top-in { gap: 16px; } }
@media (max-width: 1180px) and (min-width: 761px) { .nav { gap: 13px; } .nav a { font-size: 12px; } .brand-name { display: none; } }
.top-cta { white-space: nowrap; }

/* ── The bench: the course movement, in the corner, coming apart as you read ──
   No frame: the movement itself, standing on the page, and one line under it. */
.bench { position: fixed; right: clamp(6px, 1.2vw, 20px); bottom: clamp(6px, 1.5vw, 22px); z-index: 30;
  width: min(270px, 21vw); pointer-events: none; opacity: 0; transform: translateY(16px) scale(.97);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.bench.has-3d.in { opacity: 1; transform: none; pointer-events: auto; }
.bench.away, .bench.has-3d.in.away { opacity: 0; transform: translateY(16px) scale(.97); pointer-events: none; }   /* stepping aside wins over being shown */
#bench-3d { display: block; width: 100%; aspect-ratio: 1 / .92; cursor: grab; touch-action: pan-y;
  filter: drop-shadow(0 26px 34px rgba(24, 28, 34, .38)); }
#bench-3d:active { cursor: grabbing; }
.bench-line { margin: 2px 4px 0; font: italic 400 15px/1.35 var(--serif, 'Cormorant Garamond', serif); color: var(--ink-2);
  text-align: right; text-wrap: balance; pointer-events: none; }
@media (max-width: 760px) { .bench-line { font-size: 12.5px; } }
/* The page gives the corner its own margin: the movement stands beside the
   text rather than on top of it. Full-bleed backgrounds are untouched — only
   what is written moves left. */
@media (min-width: 900px) {
  body.with-bench main .wrap { padding-right: clamp(130px, 17vw, 300px); }   /* main only: never the header or the foot */
}
@media (max-width: 1080px) { .bench { width: 220px; } }
@media (max-width: 760px) { .bench { width: 42vw; right: 2px; bottom: 2px; } }
@media (prefers-reduced-motion: reduce) { .bench { transition: none; } }

/* ── The finishing ──────────────────────────────────────────────────────────
   What separates a page from an object: a grain over the flat colours, a line
   that says how far you have read, ink that answers when you touch it. */
body::after {                       /* the grain of a printed page, barely there */
  content: ""; position: fixed; inset: -50%; pointer-events: none; z-index: 60; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
/* On the header's lower edge rather than the top of the screen: nothing
   see-through may sit at the very top, where Safari takes its colour. */
.read-line { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; transform: scaleX(0);
  transform-origin: 0 50%; background: linear-gradient(90deg, var(--brass), var(--brass-2));
  transition: transform .12s linear; }
.top > .read-line { position: absolute; top: auto; bottom: -1px; }

::selection { background: rgba(184, 146, 90, .3); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }

/* A button fills from the side it was approached from, rather than blinking. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: left;
  }
.btn:hover::after { transform: none; }

/* Photographs breathe a little when looked at. */
.ph, .maison-shot, .topic-ph, .course-band-shot { overflow: hidden; }
.ph img, .maison-shot img, .course-band-shot img {
  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1), filter 1.4s ease; will-change: transform; }
.ph:hover img, .maison-shot:hover img, .course-band-shot:hover img { transform: scale(1.035); }

/* Section rules that fade out instead of stopping dead. */
hr.divider, .sec + .sec { border-image: linear-gradient(90deg, transparent, var(--hair), transparent) 1; }

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  .read-line { transition: none; }
  .ph img, .maison-shot img, .course-band-shot img, .btn::after { transition: none; }
}

/* ── On a telephone ─────────────────────────────────────────────────────────
   A watch the size of the screen ends up half under the header as soon as the
   page moves. Everything is brought in a little so a whole object, and what is
   written under it, are on screen together. */
@media (max-width: 760px) {
  .maison-hero { padding-block: 30px 38px; }
  .maison-title { font-size: clamp(44px, 14vw, 72px); margin: 10px 0 6px; }
  .maison-sub { font-size: 12px; }
  .watch-stage { width: min(360px, 70vw); margin-top: 16px; }
  .maison-line { font-size: 14.5px; margin-top: 18px; }
  .hero-in { padding-block: 34px 44px; }
  .hero-dial { max-width: 260px; width: 66%; }
  .hero h1 { margin-bottom: 14px; }
  .hero-facts { margin-top: 22px; }
  .sec, .sec-alt { padding-block: clamp(44px, 12vw, 70px); }
  .course-band { padding-block: 44px; }
  .course-band h2 { font-size: clamp(27px, 8vw, 36px); }
  .flip-ctrl { margin-top: 14px; }
  .statement p { font-size: clamp(22px, 6.4vw, 30px); }
}

/* The film carries the name of whoever is watching it: not a lock, a signature.
   A copy that travels says where it came from, and that is usually enough. */
.player { position: relative; }
.player-sign { position: absolute; z-index: 2; pointer-events: none; white-space: nowrap; opacity: 0;
  font: 400 10px/1 var(--sans); letter-spacing: .06em; color: rgba(255, 255, 255, .14); transition: opacity 1.2s ease; }
.player-sign.on { opacity: 1; }
.player-full { position: absolute; top: 8px; right: 8px; z-index: 3; width: 34px; height: 34px; border: 0; border-radius: 6px;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .2s; }
.player.ctl .player-full, .player-full:focus-visible { opacity: 1; }
.player:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; }
.player:fullscreen .player-sign { font-size: 13px; }
@media (max-width: 640px) { .player-sign { font-size: 8.5px; } }

/* ── Two ways to pay ────────────────────────────────────────────────────── */
.pay-ways .ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 22px; }
.pay-ways .way { border: 1px solid var(--hair, rgba(27,31,36,.13)); border-radius: 6px; padding: 20px; display: grid; align-content: start; gap: 8px; }
.pay-ways .way-k { margin: 0; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); }
.pay-ways .way-d { margin: 0 0 6px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2, #4a463d); }
.pay-ways .way .btn { justify-self: start; }
.pay-ways.pay-one .ways { max-width: 560px; }
.pay-ways .way-how { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-3, #857f71); line-height: 1.6; }

/* ── The questions ──────────────────────────────────────────────────────── */
.faq-list { display: grid; gap: 0; margin-top: 24px; max-width: 800px; }
.faq-q { border-bottom: 1px solid var(--hair, rgba(27,31,36,.13)); }
.faq-q summary { cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative;
  font: 400 clamp(17px, 2vw, 20px)/1.4 var(--serif); }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font: 300 22px/1 var(--sans); color: var(--brass); transition: transform .3s ease; }
.faq-q[open] summary::after { content: "−"; }
.faq-q p { margin: 0 0 18px; max-width: 68ch; color: var(--ink-2, #4a463d); font-size: 15.5px; line-height: 1.7; }
.faq-q summary:hover { color: var(--brass); }

/* A video lesson, asked for on one of the workshop's free slots. */
.visio-ask { margin-top: 30px; }
.visio-ask h3 { font-size: 22px; margin-bottom: 6px; }
.visio-ask .lead { font-size: 15px; margin-bottom: 12px; }
.visio-h { font: 600 13px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 4px 0 6px; }
.visio-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.visio-slot { font: 500 13.5px/1 var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 14px; cursor: pointer; }
.visio-slot:hover { border-color: var(--brass); }
.visio-slot.on { background: var(--brass); border-color: var(--brass); color: #16110a; }
.visio-tz { font-size: 12.5px; margin-top: 8px; }
.visio-mine { border-left: 2px solid var(--line); padding: 6px 0 6px 10px; margin-bottom: 8px; font-size: 14.5px; }
.visio-mine.confirmed { border-left-color: var(--brass); }
.visio-mine.proposed { border-left-color: var(--brass); background: color-mix(in srgb, var(--brass) 7%, transparent); padding-right: 10px; }
.visio-answer { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.visio-other { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; font-size: 13.5px; }
.visio-other input { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; }
.visio-mine p { margin-top: 4px; color: var(--ink-2); }
.visio-ask form { margin-top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 10px; }
.visio-ask label { display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.visio-ask textarea { font: 400 15px/1.5 var(--sans); padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }

/* A movement of their own, photographed and asked about. (Not .bench — that
   name belongs to the little 3D movement in the corner of the course page.) */
.own-bench { margin-top: 30px; }
.own-bench h3 { font-size: 22px; margin-bottom: 6px; }
.own-bench .lead { font-size: 15px; margin-bottom: 12px; }
.own-bench form { margin-top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 10px; }
.own-bench label { display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.own-bench textarea { font: 400 15px/1.5 var(--sans); padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.link-btn { background: none; border: 0; padding: 0; font: 500 13.5px/1.4 var(--sans); color: var(--brass-ink); cursor: pointer; text-decoration: underline; }
.visio-free { margin-top: 10px; }
.visio-chosen { font: 500 14px/1.4 var(--sans); color: var(--ink); margin: 0; }

/* The space's own menu: five places, practice opening on its own row of five.
   On a telephone the five sit at the bottom of the screen, where the thumb is. */
.space-tabs { display: flex; gap: 8px; margin: 18px 0 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.space-tabs::-webkit-scrollbar, .sp-sub::-webkit-scrollbar { display: none; }
.sp-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--sans); color: var(--ink-2);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 11px 17px; cursor: pointer; }
.sp-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.sp-tab:hover { border-color: var(--brass); color: var(--ink); }
.sp-tab.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sp-tab .tab-n { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--brass); color: #16110a; font: 600 11.5px/1 var(--sans); }
.sp-tab.on .tab-n { background: var(--brass); color: #16110a; }
.sp-sub { display: flex; gap: 6px; margin: 0 0 22px; padding: 10px 0 0; border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.sp-sub[hidden] { display: none; }
.sp-subtab { padding: 8px 14px; font-size: 13.5px; background: transparent; }
.sp-subtab.on { background: var(--brass); border-color: var(--brass); color: #16110a; }
.own-bench, .visio-ask { margin-top: 0; }
.practice-hub h3 { font: 400 30px/1.15 var(--serif); margin: 4px 0 6px; }
.hub-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 18px; }
.hub-card { position: relative; display: grid; gap: 6px; text-align: left; padding: 14px 14px 16px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.hub-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .07); border-color: var(--brass); }
.hub-art { display: block; height: 92px; border-radius: 10px; background: var(--paper-2); color: var(--ink-2); padding: 8px; }
.hub-art svg { width: 100%; height: 100%; }
.hub-card b { font: 400 21px/1.2 var(--serif); }
.hub-card small { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.hub-seen { position: absolute; top: 20px; right: 20px; display: none; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: #3a7d44; color: #fff; font: 600 13px/1 var(--sans); font-style: normal; }
.hub-card.seen .hub-seen { display: grid; }
@media (max-width: 720px) {
  .space-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    gap: 0; background: rgba(255, 253, 248, .97); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .06);
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; overflow: visible; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .space-tabs .sp-tab { position: relative; flex-direction: column; gap: 4px; padding: 7px 2px 5px; border: 0; border-radius: 12px; background: transparent;
    font-size: 11px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .space-tabs .sp-tab svg { width: 22px; height: 22px; }
  .space-tabs .sp-tab.on { background: transparent; color: var(--brass-ink); }
  .space-tabs .sp-tab.on svg { stroke-width: 2.1; }
  .space-tabs .sp-tab .tab-n { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 17px; height: 17px; font-size: 10.5px; }
  body:has(#sp-course:not([hidden])) { padding-bottom: 76px; }
  .sp-sub { margin: 4px -16px 18px; padding: 10px 16px 2px; }
  .hub-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hub-art { height: 70px; }
  .hub-card b { font-size: 18px; }
  .hub-card small { font-size: 12.5px; }
}
@media (max-width: 560px) {
  .hub-cards { grid-template-columns: 1fr; gap: 8px; }
  .hub-card { grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 10px; align-items: center; }
  .hub-art { grid-row: span 2; height: 64px; padding: 4px; }
  .hub-seen { top: 8px; right: 8px; width: 20px; height: 20px; font-size: 11px; }
}
.calc-part, .qt, .wico, .practice-hub, .sp-sub { scroll-margin-top: 92px; }

/* The photographs of a repair, on the customer's own page. */
.tr-album { margin-top: 34px; }
.tr-album h2 { font-size: 24px; margin-bottom: 14px; }
.tr-shots { margin-bottom: 20px; }
.tr-shots h3 { font: 600 12.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: 8px; }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.tr-grid figure { margin: 0; }
.tr-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.tr-grid figcaption { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }
.tr-album-keep { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.tr-album-until { font-size: 13px; color: var(--ink-2); }
@media (max-width: 720px) { .tr-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } }

/* The movement of the course, taken apart by hand. */
.explode { padding-top: 10px; }
.explode .lead { max-width: 60ch; margin-bottom: 20px; }
.ex3d { position: relative; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #1b2026 0%, #10141a 60%, #0b0e12 100%); outline: none; }
.ex3d canvas { display: block; width: 100%; height: min(62vh, 560px); touch-action: none; cursor: grab; }
.ex3d.turning canvas { cursor: grabbing; }
.ex3d.no-3d canvas { display: none; }
.ex3d-hud { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px 16px;
  background: linear-gradient(to top, rgba(8, 11, 14, .86), rgba(8, 11, 14, 0)); color: #efe8da; }
.ex3d-line { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ex3d-label { font: 500 16px/1.3 var(--sans); }
.ex3d-count { font-size: 12.5px; opacity: .7; font-variant-numeric: tabular-nums; }
.ex3d-controls { display: flex; align-items: center; gap: 10px; }
.ex3d-b { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08); color: #efe8da; font-size: 20px; line-height: 1; cursor: pointer; }
.ex3d-b:hover { background: var(--brass); border-color: var(--brass); color: #16110a; }
.ex3d-rail { flex: 1; accent-color: var(--brass); height: 22px; }
.ex3d-dots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ex3d-dot { border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #efe8da;
  border-radius: 999px; padding: 6px 11px; font: 500 12px/1 var(--sans); cursor: pointer; }
.ex3d-dot.on { background: var(--brass); border-color: var(--brass); color: #16110a; }
.ex3d-hint { position: absolute; top: 12px; right: 14px; margin: 0; font-size: 12px; color: rgba(239, 232, 218, .62); }
@media (max-width: 720px) {
  .ex3d canvas { height: 56vh; }
  .ex3d-hint { display: none; }
  .ex3d-dot { padding: 7px 10px; font-size: 11.5px; }
}
.ex3d.spin .ex3d-hud { display: none; }

/* The movement in 3D, in the student's own space. */
.mvt3d h3 { font-size: 22px; margin-bottom: 6px; }
.mvt3d .lead { font-size: 15px; margin-bottom: 14px; }
.see3d { margin: 6px 0 4px; }

/* The first minutes of the course, on the course page. */
.ph.preview { position: relative; background: #0b0e12; }
.ph.preview video { display: block; width: 100%; height: 100%; object-fit: contain; aspect-ratio: 16 / 9; background: #0b0e12; }

/* The course's films on its page: one player at the film's own shape, the chapters under it */
.films { margin: 0; align-self: center; display: grid; gap: 14px; padding: clamp(14px, 2vw, 22px); }
.films-screen { position: relative; border-radius: 14px; overflow: hidden; background: #000; }
.films-screen video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.films-screen .preview-tag { position: absolute; left: 12px; top: 12px; pointer-events: none; }
.films-head { font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass-2); margin-top: 4px; }
.films-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.films-list button { width: 100%; display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: baseline; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 9px 12px; color: rgba(239, 232, 218, .82); cursor: pointer; font: 400 15px/1.3 var(--sans); }
.films-list button:hover { border-color: rgba(216, 183, 127, .35); }
.films-list button.on { background: rgba(216, 183, 127, .12); border-color: rgba(216, 183, 127, .4); color: var(--cream); }
.films-n { font: italic 400 17px/1 var(--serif); color: var(--brass-2); }
.films-d { font-size: 12.5px; color: rgba(239, 232, 218, .58); white-space: nowrap; }
@media (max-width: 880px) { .online .films { order: -1; padding: 0 0 8px; } }
.ph.preview figcaption { position: absolute; left: 12px; top: 12px; pointer-events: none; }
.preview-tag { display: inline-block; font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: #16110a; background: var(--brass); border-radius: 999px; padding: 7px 11px; }

/* ── Reviews: leaving one, and those published ─────────────────────────── */
.rv-form { display: grid; gap: 16px; margin-top: 26px; max-width: 520px; }
.rv-form label { display: grid; gap: 6px; font-size: 13px; color: var(--ink-3); }
.rv-form textarea, .rv-form input:not([type=radio]):not([type=checkbox]) { font: 400 16px/1.5 var(--sans); padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
.rv-form .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); }
.rv-form .btn { justify-self: start; }
.rv-stars { border: 0; padding: 0; margin: 0; }
.rv-stars legend { font-size: 13px; color: var(--ink-3); margin-bottom: 6px; padding: 0; }
.rv-row { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rv-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-stars label { cursor: pointer; font-size: 38px; line-height: 1; color: var(--line); display: block; padding: 2px; }
.rv-stars label::before { content: "★"; }
.rv-row input:checked ~ label, .rv-row label:hover, .rv-row label:hover ~ label { color: var(--brass-deep); }
.rv-stars input:focus-visible + label { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.reviews { display: grid; gap: 22px; }
.reviews-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.reviews-score { font: 500 15px/1 var(--sans); color: var(--ink-2); }
.stars { color: var(--brass-deep); letter-spacing: .08em; }
.stars .off { color: var(--line); }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.review { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; margin: 0; display: grid; gap: 10px; align-content: start; }
.review blockquote { margin: 0; font: italic 400 19px/1.45 var(--serif); color: var(--ink); }
.review figcaption { font-size: 13px; color: var(--ink-3); }

/* How long a service takes, on the repair page */
.turnaround { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); max-width: 46em; font-size: 15px; }
.turnaround small { color: var(--ink-3); font-size: 13px; }
.turnaround-dot { flex: none; width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; background: #5f9a6b; box-shadow: 0 0 0 4px rgba(95, 154, 107, .18); }

/* ── The course certificate ─────────────────────────────────────────────── */
.cert-band { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 0; padding: 14px 18px; border-radius: 14px;
  background: var(--night-2); color: var(--cream); }
.cert-band b { color: var(--brass-2); margin-right: 6px; }
.cert-band .btn { margin-left: auto; }
.cert-band-mark { color: var(--brass-2); font-size: 20px; }
.cert-band.fresh { animation: cert-in .9s ease both; }
@keyframes cert-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cert-band.fresh { animation: none; } }
.cert-verdict { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: rgba(95, 154, 107, .14); color: #2f5a39; font-weight: 500; max-width: 560px; }

.cert-sheet { position: fixed; inset: 0; z-index: 1000; overflow: auto; background: rgba(15, 21, 25, .95); padding: 20px 16px 40px; }
body.cert-open { overflow: hidden; }
.cert-tools { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 auto 16px; }
.cert-tools .btn-line { color: var(--cream); border-color: rgba(239, 232, 218, .4); }
.sp-seatself { margin-top: 10px; display: grid; gap: 8px; justify-items: start; }
.cert-page { width: min(1000px, 100%); margin: 0 auto; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
/* the sheet itself is drawn by espace/cert.js — the same drawing WOCA shows him */

@media print {
  @page { size: A4 landscape; margin: 0; }
  body.cert-open { background: #fff; overflow: visible; }
  body.cert-open > *:not(.cert-sheet) { display: none !important; }
  body.cert-open .cert-sheet { position: static; background: none; padding: 0; overflow: visible; }
  body.cert-open .cert-tools { display: none; }
  body.cert-open .cert-page { width: 297mm; height: 210mm; box-shadow: none; }
  body.cert-open .cert-page .tlc { height: 210mm; aspect-ratio: auto; }
}

/* ── Page not found ─────────────────────────────────────────────────────── */
.lost h1 { font-size: clamp(40px, 6vw, 72px); margin: 8px 0 14px; }
.lost .lead { color: var(--ink-2); font-size: 18px; }
.lost-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 34px; max-width: 760px; }
.lost-links a { padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); text-decoration: none; font-size: 15px; }
.lost-links a:hover { border-color: var(--brass); }
.lost-other { border-top: 1px solid var(--line); padding-top: 18px; color: var(--ink-2); font-size: 15px; max-width: 760px; }

/* ── The workshop journal ───────────────────────────────────────────────── */
.jhead { font-size: clamp(40px, 5.4vw, 72px); }
.jgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-top: 28px; }
.jcard { display: grid; align-content: start; gap: 8px; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; padding-bottom: 20px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.jcard:hover { transform: translateY(-3px); border-color: var(--brass); box-shadow: 0 24px 50px -30px rgba(15, 21, 25, .4); }
.jcard > *:not(.jcard-img) { padding-inline: 20px; }
.jcard-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); margin-bottom: 8px; }
.jcard-img img { width: 100%; height: 100%; object-fit: cover; }
.jcard-when { font-size: 12.5px; letter-spacing: .06em; color: var(--ink-3); }
.jcard b { font: 500 25px/1.15 var(--serif); }
.jcard-sum { color: var(--ink-2); font-size: 15px; }
.jcard-go { font-weight: 500; font-size: 14px; color: var(--brass-ink); margin-top: 4px; }
.jart-in { max-width: 760px; }
.jart h1 { font-size: clamp(38px, 5vw, 64px); margin: 6px 0 12px; }
.jart .eyebrow a { color: inherit; text-decoration: none; }
.jart-meta { color: var(--ink-3); font-size: 14px; margin: 0 0 18px; }
.jart .lead { font-size: 19px; color: var(--ink-2); }
.jart-body { font-size: 17px; line-height: 1.75; margin-top: 26px; }
.jart-body h2 { font-size: clamp(28px, 3.2vw, 38px); margin: 38px 0 12px; }
.jart-body p, .jart-body ul { margin: 0 0 18px; }
.jfig { margin: 28px 0; }
.jfig img { width: 100%; height: auto; border-radius: 12px; }
.jfig figcaption { font-size: 13.5px; color: var(--ink-3); margin-top: 8px; }
.jgallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.jgallery .jfig { margin: 0; }
.jgallery .jfig img { aspect-ratio: 4 / 3; object-fit: cover; }
.jart-cta { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .jcard, .jcard:hover { transition: none; transform: none; } }

/* The name of the part that was tapped, in the movement you take apart */
.ex3d-tag { position: absolute; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none; z-index: 3;
  background: var(--night); color: var(--cream); font: 500 13.5px/1.2 var(--sans); padding: 7px 12px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.ex3d-tag::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--night); transform: translateX(-50%) rotate(45deg); }

/* What the shelf says, in the shop */
.stock { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1.2 var(--sans); color: var(--ink-2); margin: 2px 0 10px; }
.stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5f9a6b; flex: none; }
.stock-last::before { background: #c08a2e; }
.stock-order::before { background: #8a8f98; }
.stock-out::before { background: #b5533c; }
.card.is-out .price { opacity: .55; }
.items .stock { margin: 0 0 0 10px; font-size: 12px; }
.sec-dark .card .stock { color: var(--ink-2); }
.sec-dark .items .stock { color: rgba(239, 232, 218, .72); }

/* Group lessons in the student area */
.visio-groups { display: grid; gap: 12px; margin: 6px 0 22px; }
.visio-group { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.visio-group p { margin: 4px 0; color: var(--ink-2); font-size: 14.5px; }
.visio-group .btn { justify-self: start; margin-top: 6px; }
.visio-left { font-size: 13px; color: var(--ink-3); }
.visio-in { font-weight: 600; color: #2f5a39; }

/* A chapter kept for the higher tier */
.chapter.locked .ch-t { opacity: .7; }
.player-locked { aspect-ratio: 16 / 9; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; padding: 24px;
  background: var(--night-2); color: var(--cream); border-radius: inherit; }
.player-locked > span { font-size: 28px; }
.player-locked b { font: 500 24px/1.2 var(--serif); color: var(--brass-2); }
.player-locked p { max-width: 36em; margin: 0; color: rgba(239, 232, 218, .8); font-size: 15px; }
.player-locked .muted { color: rgba(239, 232, 218, .6); }

/* ── Guides on the 3D movement (as WIM's assembly guides) ────────────────── */
.ex3d.guided .ex3d-controls, .ex3d.guided .ex3d-dots, .ex3d.guided .ex3d-line { display: none; }
.ex3d-pins { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.ex3d-pin { position: absolute; transform: translate(-9px, -50%); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ex3d-pin-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--brass); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); flex: none; }
.ex3d-pin .oil-glyph { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); flex: none; }
.ex3d-pin-t { background: rgba(15, 21, 25, .88); color: var(--cream); font: 500 12.5px/1.25 var(--sans); padding: 5px 9px; border-radius: 8px; max-width: 220px; white-space: normal; }
.ex3d-pin-t:empty { display: none; }
.g3d { margin-top: 16px; display: grid; gap: 14px; }
.g3d-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.g3d-head select { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.g3d-mode { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--card); }
.g3d-mode button { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; cursor: pointer; font: 500 14px/1 var(--sans); color: var(--ink-2); }
.g3d-mode button.on { background: var(--night); color: var(--cream); }
.g3d-step { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.g3d-count { margin: 0 0 4px; font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); }
.g3d-step h4 { font: 500 24px/1.2 var(--serif); margin: 0 0 8px; }
.g3d-body p { margin: 0 0 10px; color: var(--ink-2); }
.g3d-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.g3d-lists ul { margin: 4px 0 0; padding-left: 18px; }
.g3d-lists ul li { margin: 2px 0; }
.g3d-lists .oil-glyph { vertical-align: -3px; }
#g3d-oils ul { list-style: none; padding-left: 0; }
.g3d-check { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.g3d-check label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.g3d-nav { display: flex; justify-content: space-between; gap: 10px; }
.g3d-nav button:disabled { opacity: .4; cursor: default; }
.g3d-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.g3d-steps button { width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 8px 12px; cursor: pointer; font: 400 14.5px/1.3 var(--sans); color: var(--ink-2); }
.g3d-steps button span { font: italic 400 16px/1 var(--serif); color: var(--brass-ink); margin-right: 8px; }
.g3d-steps button.on { background: var(--card); border-color: var(--brass); color: var(--ink); }

/* The toolbar on the 3D movement, as on WIM's bench app */
.ex3d.tooled .ex3d-hint { display: none; }
.ex3d-bar { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 4; display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; pointer-events: none; }
.ex3d-tools { display: flex; gap: 4px; flex-wrap: wrap; pointer-events: auto; }
.ex3d-t { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(10, 14, 18, .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #efe8da; border-radius: 8px; padding: 6px 9px; font: 500 12.5px/1 var(--sans); cursor: pointer; }
.ex3d-t b { font-weight: 600; font-size: 13px; }
.ex3d-t:hover { border-color: var(--brass-2); }
.ex3d-t.on { background: var(--brass); border-color: var(--brass); color: #16110a; }
.ex3d-find { margin-left: auto; position: relative; width: min(230px, 42%); pointer-events: auto; }
.ex3d-find input { width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(10, 14, 18, .72); color: #efe8da; font: 400 13px/1.2 var(--sans); }
.ex3d-found { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: rgba(10, 14, 18, .94); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px; overflow: hidden; }
.ex3d-found button { display: block; width: 100%; text-align: left; background: none; border: 0; color: #efe8da; padding: 8px 10px; font: 400 13px/1.2 var(--sans); cursor: pointer; }
.ex3d-found button:hover { background: rgba(216, 183, 127, .18); }
.ex3d-found p { margin: 0; padding: 8px 10px; color: rgba(239, 232, 218, .6); font-size: 12.5px; }
.ex3d-help { flex-basis: 100%; margin: 0; max-width: 520px; background: rgba(10, 14, 18, .9); color: #efe8da; font-size: 12.5px; line-height: 1.5;
  padding: 8px 11px; border-radius: 8px; pointer-events: auto; }
.ex3d-tag { white-space: pre-line; text-align: center; }
@media (max-width: 700px) {
  .ex3d-t span { display: none; }
  .ex3d-t { padding: 7px 9px; }
  .ex3d-find { width: 100%; margin-left: 0; }
}
/* A guide being followed: the movement stays in view while the step is read */
.mvt3d.guiding .ex3d { position: sticky; top: calc(var(--head, 72px) + 8px); z-index: 5; }
@media (max-width: 700px) { .mvt3d.guiding .ex3d canvas { height: 46vh; } }

/* ── Course documents, and their reader ─────────────────────────────────── */
.docs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; margin-top: 14px; }
.doc-card { display: grid; gap: 6px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; cursor: pointer; font: inherit; color: var(--ink); }
.doc-card:hover { border-color: var(--brass); }
.doc-card img, .doc-ph { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 6px; background: var(--paper-2); border: 1px solid var(--line); }
.doc-ph { display: grid; place-items: center; font: 600 14px/1 var(--sans); color: var(--ink-3); }
.doc-card b { font: 500 16px/1.25 var(--serif); }
.doc-card .muted { font-size: 12.5px; color: var(--ink-3); }
.doc-card.locked { opacity: .65; cursor: default; }
.reader { margin-top: 12px; background: var(--paper-2); border-radius: 12px; }
.reader-bar { position: sticky; top: var(--head, 72px); z-index: 3; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px; background: var(--night); color: var(--cream); border-radius: 12px 12px 0 0; }
.reader-bar .btn-line { color: var(--cream); border-color: rgba(239, 232, 218, .35); }
.reader-title { font: 500 16px/1.2 var(--serif); flex: 1; min-width: 120px; }
.reader-page { font-size: 12.5px; color: rgba(239, 232, 218, .7); font-variant-numeric: tabular-nums; }
.rd-b { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid rgba(239, 232, 218, .3); background: transparent; color: var(--cream); cursor: pointer; font-size: 16px; text-decoration: none; }
.rd-b:hover { border-color: var(--brass-2); }
.reader-pages { display: grid; justify-items: center; gap: 12px; padding: 14px 8px 20px; overflow-x: auto; }
.rd-slot { background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); max-width: none; }
.rd-slot canvas { display: block; }
.reader:fullscreen { overflow: auto; background: #1b1f24; border-radius: 0; }
.reader.reader-max { position: fixed; inset: 0; z-index: 1000; overflow: auto; border-radius: 0; }
.reader.reader-max .reader-bar { top: 0; border-radius: 0; }

/* The dates of the story, on the About page */
.story-dates { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line); }
.story-dates li { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.story-dates b { font: 500 16px/1.4 var(--serif); color: var(--brass-ink); }
@media (max-width: 520px) { .story-dates li { grid-template-columns: 1fr; gap: 2px; } }

/* The narrowest iPhones (SE, mini): the name, the languages and the menu on one line */
@media (max-width: 385px) {
  .top-in { gap: 10px; }
  .brand { gap: 8px; }
  .brand-mark { height: 30px; }
  .brand-name { font-size: 10px; letter-spacing: .18em; }
  .lang a { padding: 7px 7px; }
}
@media (max-width: 340px) { .brand-name { display: none; } }

/* ── The menu, in groups: learning, the workshop, professionals ─────────────
   A group opens on hover or focus with a pointer, on a tap or Enter anywhere;
   on a phone the groups lie open, each under its own small title. */
.nav { align-items: center; }
.nav-group { position: relative; }
.nav-g { background: none; border: 0; padding: 0; font: inherit; color: inherit; font-size: 13px; letter-spacing: .05em; opacity: .66;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: opacity .2s; }
.nav-g::after { content: ""; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
.nav-group:hover .nav-g, .nav-g[aria-expanded="true"], .nav-group.here .nav-g { opacity: 1; }
.nav-drop { position: absolute; top: calc(100% + 14px); left: -18px; min-width: 230px; display: grid; padding: 8px 0;
  background: #f7f7f8; border: 1px solid var(--hair); box-shadow: 0 18px 40px -18px rgba(27, 31, 36, .35);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 5; }
.nav-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }   /* the gap the pointer crosses */
.nav-drop a { padding: 10px 18px; opacity: .8; font-size: 13.5px; }
.nav-drop a::after { display: none; }
.nav-drop a:hover, .nav-drop a[aria-current="page"] { opacity: 1; background: rgba(27, 31, 36, .05); }
@media (hover: hover) and (min-width: 1081px) { .nav-group:hover .nav-drop { opacity: 1; visibility: visible; transform: none; } }
.nav-group:focus-within .nav-drop, .nav-g[aria-expanded="true"] + .nav-drop { opacity: 1; visibility: visible; transform: none; }
.nav-g[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
@media (max-width: 1080px) {
  .nav { align-items: stretch; }
  .nav-g { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .55; padding: 18px 0 4px; pointer-events: none; }
  .nav-g::after { display: none; }
  .nav-drop { position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; }
  .nav-drop::before { display: none; }
  .nav-drop a { padding: 13px 0; font-size: 17px; opacity: .9; }
  .nav > a:not(.nav-util) { margin-top: 6px; font-size: 17px; opacity: .9; }
}

/* ── The strip under the hero: what the visitor can trust, before reading ── */
.trust { border-bottom: 1px solid var(--hair); }
.trust-in { list-style: none; margin: 0 auto; display: grid; }
.trust li, .trust li > a { display: flex; gap: 14px; align-items: flex-start; color: inherit; text-decoration: none; }
.trust svg { flex: none; fill: none; stroke: var(--gilt); stroke-linecap: round; stroke-linejoin: round; }
.trust b { display: block; color: var(--graphite); margin-bottom: 3px; }
.trust li span { display: block; color: var(--slate); }
.trust a:hover b { color: var(--gilt); }

/* ── The repair block on the home page: light, the parcel on the left ────── */
.repair-band { background: #fbfbfb; padding-block: clamp(56px, 8vw, 104px); }
.repair-band-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.repair-band-shot { margin: 0; }
.repair-band-shot img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--r); display: block; }
.repair-band h2 { font: 300 clamp(30px, 3.9vw, 50px)/1.08 var(--serif); letter-spacing: -.02em; margin: 12px 0 18px; }
.repair-band h2 em { color: var(--gilt); }
.repair-band .course-points li { color: var(--graphite); }
.repair-band .lead { color: var(--slate); margin: 0 0 22px; max-width: 52ch; }
.course-points b { font-weight: 600; }
.course-band .course-points b { color: var(--cream); }
@media (max-width: 880px) { .repair-band-in { grid-template-columns: 1fr; } .repair-band-shot img { max-height: 340px; } }

/* ── The 3D movement on the course page: a film of the student area's viewer ── */
.demo3d-film { margin: 28px 0 0; border-radius: var(--r); overflow: hidden; background: #0f1519; aspect-ratio: 16 / 9; }
.demo3d-film video { width: 100%; height: 100%; display: block; object-fit: cover; }
/* the water-resistance bench is filmed wide (tools/film_bench.py, 1280 × 560): shown whole, never cut to 16:9 */
.demo3d-film.film-bench { aspect-ratio: 1280 / 560; background: var(--card); }
.demo3d-film.film-bench video { object-fit: contain; }

/* A part's name, and what he wrote about it under it */
.ex3d-tag b { display: block; font-weight: 500; }
.ex3d-tag-about, .ex3d-tag-step { display: block; margin-top: 4px; font: 400 12.5px/1.45 var(--sans); color: rgba(239, 232, 218, .78); }
.ex3d-tag-step { color: var(--brass-2); }
.ex3d-tag.wide { white-space: normal; width: max-content; max-width: min(300px, 80%); border-radius: 12px; padding: 10px 14px; text-align: left; }

/* ── The student's planner of video lessons: a week, or the month ─────────── */
.vp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.vp-views { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; margin-right: 6px; }
.vp-views button { border: 0; background: none; font: 500 12.5px/1 var(--sans); padding: 8px 14px; border-radius: 999px; cursor: pointer; color: var(--ink); }
.vp-views button.on { background: var(--ink); color: var(--paper); }
.vp-nav { border: 1px solid var(--line); background: var(--card); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 16px; color: var(--ink); }
.vp-title { font: 500 15px/1.2 var(--sans); min-width: 150px; text-align: center; }
.vp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.vp-day { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; min-height: 90px; }
.vp-day.none { opacity: .55; }
.vp-dh { font-size: 12px; color: var(--muted, #6b6258); text-transform: capitalize; margin-bottom: 6px; }
.vp-dh b { font-size: 15px; color: var(--ink); }
.vp-slots { display: flex; flex-direction: column; gap: 5px; }
.vp-slots .visio-slot { padding: 8px 6px; text-align: center; width: 100%; }
.vp-dash { color: var(--line); text-align: center; }
.vp-own { font-size: 11.5px; border-radius: 6px; padding: 5px 6px; background: rgba(184, 146, 90, .18); color: var(--ink); text-align: center; }
.vp-own.confirmed { background: var(--brass); color: #16110a; }
.vp-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.vp-mh { text-align: center; font-size: 11.5px; color: var(--muted, #6b6258); padding: 4px 0; text-transform: uppercase; }
.vp-md { position: relative; aspect-ratio: 1 / .82; border: 1px solid var(--line); background: var(--card); border-radius: 8px; cursor: pointer; font: 500 14px/1 var(--sans); color: var(--ink); padding: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.vp-md:disabled { cursor: default; opacity: .45; background: none; }
.vp-md.out { opacity: .3; }
.vp-md.has { border-color: var(--brass); }
.vp-md.on { background: var(--brass); color: #16110a; }
.vp-md i { font-style: normal; font-size: 11px; background: rgba(184, 146, 90, .22); border-radius: 999px; padding: 2px 7px; }
.vp-md.on i { background: rgba(0, 0, 0, .15); }
.vp-md u { position: absolute; right: 6px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); text-decoration: none; }
.vp-daylist { margin-top: 12px; }
.vp-dayname { margin: 0 0 8px; font-weight: 500; text-transform: capitalize; }
.vp-daylist .vp-slots { flex-direction: row; flex-wrap: wrap; }
.vp-daylist .visio-slot { width: auto; padding: 9px 16px; }
@media (max-width: 700px) {
  .vp-week { grid-template-columns: 1fr; }
  .vp-day { display: grid; grid-template-columns: 70px 1fr; align-items: start; min-height: 0; padding: 8px 10px; }
  .vp-day.none { display: none; }
  .vp-day .vp-slots { flex-direction: row; flex-wrap: wrap; }
  .vp-day .visio-slot { width: auto; padding: 8px 14px; }
}

/* ── A chapter offered for an e-mail, on the course page ─────────────────── */
.free-chapter { background: #fbf8f1; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.free-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.free-form { display: grid; gap: 12px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); padding: 22px; }
.free-form label { display: grid; gap: 6px; font-size: 13px; color: var(--slate); }
.free-form input:not([type=checkbox]) { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.free-form .check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.free-form .check input { margin-top: 3px; }
.free-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 800px) { .free-in { grid-template-columns: 1fr; } }
.free-form .form-msg.ok { background: #e7f2e9; color: #1f5130; }
.free-form .form-msg.err { background: #f8e6e3; color: #7a2a20; }

/* ═══ Student area — the watch calculations, explained and animated ═══════ */
.calc { max-width: 1040px; margin: 0 auto; padding-bottom: 40px; }
.calc-head { padding: 18px 0 8px; }
.calc-kicker { font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brass-ink, #8a6a2e); margin: 0 0 12px; }
.calc-head h3 { font: 400 clamp(30px, 4vw, 44px)/1.1 var(--serif); margin: 0 0 12px; }
.calc-head h3 em { color: var(--gilt, #a5874a); }
.calc-lead { font-size: 17px; line-height: 1.7; color: var(--slate, #5c636b); max-width: 70ch; margin: 0 0 18px; }
.calc-toc { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 14px; }
.calc-toc a { font-size: 13px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--card); }
.calc-toc a:hover { border-color: var(--brass); }
.calc-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; margin: 0; }
.calc-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.calc-legend .c-wheel::before { background: #c9a256; } .calc-legend .c-pinion::before { background: #6f8fae; }
.c-wheel { color: #8a6424; } .c-pinion { color: #3d5f82; }
b.c-wheel, b.c-pinion { font-weight: 600; }

.calc-part { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 3vw, 32px);
  margin-top: 22px; scroll-margin-top: calc(var(--head, 72px) + 12px); }
.calc-num { position: absolute; top: clamp(14px, 2.4vw, 26px); right: clamp(16px, 3vw, 30px); margin: 0; font: 300 44px/1 var(--serif); color: rgba(165, 135, 74, .35); }
.calc-part h4 { font: 400 clamp(22px, 2.6vw, 30px)/1.2 var(--serif); margin: 0 0 12px; padding-right: 50px; }
.calc-part p { line-height: 1.7; }
.calc-two { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(18px, 3vw, 34px); align-items: start; }
@media (max-width: 860px) { .calc-two { grid-template-columns: 1fr; } }

.calc-stage { margin: 16px 0 0; position: relative; }
.calc-svg { width: 100%; height: auto; display: block; border-radius: 14px; background: #0d1115; }
.calc-lbl { fill: #e9e2d2; font: 600 13px/1 var(--sans, sans-serif); letter-spacing: .02em; }
.calc-lbl2 { fill: #b7bdc4; font: 12px/1 var(--sans, sans-serif); }
.calc-lbl2 .w { fill: #e3c47e; } .calc-lbl2 .p { fill: #a8c2dc; }
.calc-tic { fill: #e3c47e; font: italic 400 30px/1 var(--serif, serif); opacity: 0; transition: opacity .25s; }
.calc-tic.on { opacity: 1; transition: none; }
.calc-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 10px; font-size: 13.5px; color: var(--slate, #5c636b); }
.calc-controls label { display: inline-flex; gap: 8px; align-items: center; }
.calc-controls input[type=range] { width: 150px; accent-color: #b8925a; }
.calc-controls select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.calc-hint { flex: 1 1 260px; font-size: 12.5px; color: #5c636b; }
.calc-btn { font: 600 12.5px/1 var(--sans); border: 1px solid var(--ink); background: var(--ink); color: var(--paper, #fff); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.calc-btn:hover { background: transparent; color: var(--ink); }
.calc-count { font: 500 13.5px/1.4 var(--sans); color: var(--ink); margin-top: 8px; }
.calc-train-box { position: relative; }
.calc-dial { position: absolute; right: 16px; top: 16px; width: 150px; text-align: center; }
.calc-dial svg { width: 150px; height: 150px; display: block; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45)); }
.calc-dial p { margin: 6px 0 0; color: #e9e2d2; font: 600 12px/1.2 var(--sans); background: rgba(13, 17, 21, .7); border-radius: 999px; padding: 5px 8px; }
@media (max-width: 700px) { .calc-dial { position: static; width: auto; display: flex; align-items: center; gap: 12px; margin-top: 10px; }
  .calc-dial svg { width: 96px; height: 96px; } .calc-dial p { color: var(--ink); background: none; } }

.calc-rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-top: 14px; }
.calc-rates div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; }
.calc-rates b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--slate, #5c636b); font-weight: 600; }
.calc-rates span { display: block; font: 500 17px/1.35 var(--serif); margin-top: 3px; }
.calc-rates i { display: block; font-style: normal; font-size: 12px; color: var(--slate, #5c636b); margin-top: 2px; }

.calc-rule { font-size: 16px; margin: 12px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.calc-rule.big { font-size: 18px; }
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; text-align: center; margin: 0 2px; }
.frac > span { padding: 2px 6px; line-height: 1.35; }
.frac > span:first-child { border-bottom: 1.5px solid currentColor; }
.frac > span.c-wheel:first-child { border-bottom-color: var(--ink); }
.calc-formula { background: #faf6ee; border: 1px solid #eadfca; border-radius: 14px; padding: 14px 18px; margin: 14px 0; overflow-x: auto; }
.calc-example { margin: 8px 0 0; }
.calc-result { color: var(--ink); background: linear-gradient(transparent 58%, rgba(201, 162, 86, .35) 58%); padding: 0 2px; }
.calc-aside { font-size: 14px; color: var(--slate, #5c636b); }
.calc-check { border-left: 3px solid #4d8a5a; background: #f1f7f2; border-radius: 0 12px 12px 0; padding: 10px 14px; margin-top: 12px; }
.calc-check p { margin: 0; }

.calc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.calc-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--slate, #5c636b); padding: 10px; background: #faf6ee; }
.calc-table td { padding: 9px 10px; border-top: 1px solid var(--line); }
.calc-table tr:nth-child(2) td { background: rgba(201, 162, 86, .1); }
@media (max-width: 560px) { .calc-table th:nth-child(2), .calc-table td:nth-child(2) { display: none; } }

.calc-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.calc-presets .calc-btn { background: transparent; color: var(--ink); }
.calc-presets .calc-btn:hover { background: var(--ink); color: var(--paper, #fff); }
.calc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.calc-form fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; margin: 0; background: #fff; display: grid; gap: 8px; }
.calc-form legend { font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--slate, #5c636b); padding: 0 4px; }
.calc-form label { display: grid; gap: 4px; font-size: 12.5px; }
.calc-form input { font: 500 16px/1 var(--sans); padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; width: 100%; box-sizing: border-box; }
.calc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 16px; }
.calc-card { background: #1b1f24; color: #f4f1ea; border-radius: 14px; padding: 14px 16px; }
.calc-card span { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #b7bdc4; }
.calc-card b { display: block; font: 400 26px/1.2 var(--serif); color: #e3c47e; margin: 4px 0; }
.calc-card i { display: block; font-style: normal; font-size: 12px; color: #b7bdc4; word-break: break-word; }
.calc-warn { background: #fbefe4; border: 1px solid #efcfae; color: #7a4a1c; border-radius: 12px; padding: 10px 14px; font-size: 14px; margin-top: 12px; }

.calc-ex { border-top: 1px solid var(--line); padding: 12px 0; }
.calc-ex p { margin: 0 0 6px; }
.calc-ex details summary { cursor: pointer; font-size: 13.5px; color: var(--brass-ink, #8a6a2e); font-weight: 600; }
.calc-ex details p { background: #faf6ee; border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
@media (max-width: 700px) {
  .calc-train-box { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .calc-train-box #calc-train { min-width: 720px; }
  #calc-escape { min-width: 0; }
  .calc-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.calc-steps { margin: 0; padding: 14px 16px 14px 34px; background: #faf6ee; border: 1px solid #eadfca; border-radius: 14px; font-size: 14.5px; line-height: 1.6; }
.calc-steps li + li { margin-top: 6px; }
.calc-words { margin: 6px 0 10px; padding-left: 18px; line-height: 1.65; }
.calc-words li + li { margin-top: 4px; }
.calc-regleur { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 14px 16px; margin-top: 14px; display: grid; gap: 8px; }
.calc-regleur label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; }
.calc-regleur input[type=range] { width: min(260px, 100%); accent-color: #b8925a; }
.calc-regleur label b { font-variant-numeric: tabular-nums; min-width: 4.5em; }
.calc-rg-out { margin: 4px 0; font-size: 15px; }
.calc-part > * + p, .calc-two > div > * + p, .calc-formula > * + p { margin-top: 12px; }
.calc-stage + .calc-two, .calc-two + .calc-formula { margin-top: 18px; }
.calc-steps li { border-radius: 8px; padding: 3px 6px; margin-left: -6px; transition: background .2s; }
.calc-steps li.on { background: rgba(201, 162, 86, .22); }
.calc-phase { flex: 1 1 100%; font: 500 13px/1.4 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-controls input[type=checkbox] { accent-color: #b8925a; }
@media (max-width: 700px) {
  .calc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; }
  .calc-scroll #calc-bal { min-width: 700px; }
}
/* the course's 6497 in 3D, in the calculations lesson: one viewer, a place for it in every part */
.calc-sub { font: 600 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink, #8a6a2e); margin: 24px 0 10px; }
.calc-h5 { font: 400 clamp(19px, 2.2vw, 24px)/1.25 var(--serif); margin: 30px 0 8px; }
.calc-3d-block { display: none; }
.calc-3d-block.has-3d { display: block; }
.calc-3d-slot { --h3d: min(64vh, 540px); position: relative; min-height: var(--h3d); border-radius: 14px; overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 0%, #1b2026 0%, #10141a 60%, #0b0e12 100%) center / cover no-repeat; }
.calc-3d-slot:empty::after { content: "Le 6497 en 3D"; position: absolute; inset: 0; display: grid; place-items: center; color: #8a95a1; font: 500 13px/1 var(--sans); }
.calc-3d { position: relative; cursor: default;
  background: radial-gradient(120% 90% at 50% 0%, #1b2026 0%, #10141a 60%, #0b0e12 100%); }
.calc-3d canvas { display: block; width: 100%; height: var(--h3d, min(64vh, 540px)); touch-action: none; cursor: grab; }
.calc-3d.turning canvas { cursor: grabbing; }
.calc-3d.no-3d canvas, .calc-3d.no-3d .calc-3d-bar, .calc-3d.no-3d .calc-3d-top { display: none; }
.calc-3d-load { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #b7bdc4; font-size: 14px; pointer-events: none; }
.calc-3d.ready .calc-3d-load { display: none; }
.calc-3d.no-3d .calc-3d-load { position: static; padding: 28px; }
.calc-3d-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.calc-3d-labels span { position: absolute; left: 0; top: 0; white-space: nowrap; font: 600 11.5px/1 var(--sans); color: #f4ead6;
  background: rgba(10, 13, 17, .72); border: 1px solid rgba(227, 196, 126, .45); border-radius: 999px; padding: 5px 9px; }
.calc-3d-top { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; gap: 8px 12px; align-items: baseline; flex-wrap: wrap;
  color: #e9e2d2; font: 500 12.5px/1.35 var(--sans); pointer-events: none; }
.calc-3d-top b { font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; background: rgba(10, 13, 17, .6); padding: 6px 10px; border-radius: 999px; }
.calc-3d-top span { color: #d6dbe0; background: rgba(10, 13, 17, .55); padding: 4px 8px; border-radius: 8px; max-width: 60ch; }
.calc-3d-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px 14px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  background: linear-gradient(to top, rgba(8, 11, 14, .9), rgba(8, 11, 14, 0)); color: #e9e2d2; font-size: 13px; }
.calc-3d-bar label { display: inline-flex; gap: 6px; align-items: center; }
.calc-3d-bar select { font: inherit; font-size: 12.5px; padding: 5px 8px; border-radius: 8px; border: 1px solid rgba(233, 226, 210, .3); background: #1b2026; color: #e9e2d2; }
.calc-3d-v select { font-weight: 600; }
.calc-3d-bar button { font: 600 13px/1 var(--sans); color: #e9e2d2; background: rgba(255, 255, 255, .06); min-width: 34px;
  border: 1px solid rgba(233, 226, 210, .25); border-radius: 999px; padding: 7px 10px; cursor: pointer; }
.calc-3d-bar input[type=checkbox] { accent-color: #e3c47e; }
.calc-3d-legend { margin-top: 8px; }
@media (max-width: 700px) {
  .calc-3d-slot { --h3d: 60vh; }
  .calc-3d-bar { font-size: 12px; }
  .calc-3d-bar select { font-size: 12px; }
  .calc-3d-labels span { font-size: 10.5px; padding: 4px 7px; }
  .calc-3d-top span { font-size: 11.5px; }
}
.calc-3d-extra { display: contents; }
.calc-3d-bar button[aria-pressed="true"] { background: #e3c47e; color: #1b1f24; border-color: #e3c47e; }
.calc-3d-step { position: absolute; left: 14px; right: 14px; bottom: 64px; margin: 0; padding: 10px 12px; border-radius: 12px; pointer-events: none;
  background: rgba(10, 13, 17, .78); color: #e9e2d2; font: 400 13px/1.45 var(--sans); max-width: 70ch; }
.calc-3d-step b { color: #e3c47e; font-weight: 600; }
.calc-3d-tip { position: absolute; margin: 0; max-width: 230px; padding: 9px 11px; border-radius: 12px; background: #f4ead6; color: #1b1f24;
  font: 400 12.5px/1.4 var(--sans); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); pointer-events: none; z-index: 2; }
.calc-3d-tip b { display: block; font-weight: 600; margin-bottom: 2px; }
@media (max-width: 700px) {
  .calc-3d-step { bottom: 92px; }
  .calc-3d-top span { max-width: 100%; }
}
.calc-one > div > * + p { margin-top: 12px; }
.maison-film { margin: 0; }
.maison-film video { display: block; width: 100%; height: auto; max-width: 380px; margin-inline: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 6px; background: #1b1f24; }
.calc-3d-tip span { display: block; }
.calc-3d-tip span + span { margin-top: 3px; color: #5c636b; font-size: 12px; }
.calc-3d.film .calc-3d-bar, .calc-3d.film .calc-3d-top, .calc-3d.film .calc-3d-step, .calc-3d.film .calc-3d-labels, .calc-3d.film .calc-3d-tip { display: none; }
@media (max-width: 700px) {
  .calc-3d-lt { display: none; }
  .calc-3d-bar { gap: 6px; padding: 8px; }
  .calc-3d-bar button { padding: 6px 9px; font-size: 12px; min-width: 30px; }
  .calc-3d-bar select { padding: 4px 6px; max-width: 44vw; }
  .calc-3d-step { left: 8px; right: 8px; padding: 8px 10px; font-size: 11.5px; line-height: 1.4; max-height: 34%; overflow: auto; }
}
.block-first { margin-top: 0; }
.calc-3d-see { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.calc-3d-see input[type=range] { width: 110px; accent-color: #e3c47e; }
@media (max-width: 700px) { .calc-3d-see input[type=range] { width: 90px; } }

/* the students' marks beside the course's price */
.course-score { display: inline-flex; gap: 6px; align-items: baseline; font-size: 14px; color: var(--ink-2); text-decoration: none; margin: -4px 0 10px; }
.course-score .stars { color: var(--brass); letter-spacing: .08em; }
.course-score:hover b { text-decoration: underline; }

/* who teaches the course, beside its price */
.course-teacher { display: flex; gap: 10px; align-items: center; margin: 4px 0 14px; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.course-teacher img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
/* on a phone, the course and its price at the foot of the screen once its card has scrolled away */
.buy-bar { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 16px; border-radius: 14px; background: rgba(21, 25, 30, .94); color: var(--cream); box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform: translateY(0); transition: transform .3s ease, opacity .3s ease; }
.buy-bar[hidden] { display: flex; transform: translateY(140%); opacity: 0; pointer-events: none; }
.buy-bar div { display: grid; line-height: 1.25; font-size: 13px; min-width: 0; }
.buy-bar b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buy-bar span { color: var(--brass-2, #d9b77a); }
@media (min-width: 900px) { .buy-bar { display: none !important; } }
.online .course-teacher { color: rgba(239, 232, 218, .78); }

/* the watch and the movement as cards, the accessories with their own small buttons */
.item-cards { margin-bottom: 18px; }
.item-cards:empty { display: none; }
.items .item-buy { display: inline-flex; gap: 6px; margin-left: 12px; vertical-align: middle; }
.btn-xs { padding: 6px 11px; font-size: 12px; }
@media (max-width: 640px) { .items .item-buy { margin-left: 8px; }
  /* a part's name, its price and its two buttons don't fit one phone line: the price and buttons go under */
  .items div { flex-wrap: wrap; gap: 6px 16px; } .items b { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .items .item-buy { margin-left: 0; flex-wrap: wrap; } }

/* the whole order at once, under the course card */
.basket { margin: 28px 0 8px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: 18px; background: var(--paper, #fbf8f1); color: var(--ink); max-width: 760px; }
.basket h3 { font: 500 clamp(24px, 3vw, 30px)/1.15 var(--serif); margin: 0; }
.basket .sub { color: var(--ink-2); margin: 6px 0 14px; }
.bk-group { display: grid; gap: 2px; margin-top: 10px; }
.bk-h { font: 600 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 8px 0 6px; }
.bk-line { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 2px; border-bottom: 1px dotted var(--line); cursor: pointer; font-size: 15px; }
.bk-line input { accent-color: var(--brass); width: 17px; height: 17px; margin: 0; }
.bk-soldout { display: none; margin-left: 8px; font-size: 12px; color: #b5533c; }
.bk-out { cursor: not-allowed; color: var(--ink-3); }
.bk-out .bk-soldout { display: inline; }
.bk-next { display: block; font-size: 12px; color: var(--brass-ink); margin-top: 2px; }
.bk-out .bk-next { display: none; }
.bk-out b { text-decoration: line-through; font-weight: 400; }
.bk-line b, .bk-ship b, .bk-total b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-ship, .bk-total { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; }
.bk-ship { color: var(--ink-3); font-size: 14.5px; }
.bk-total { border-top: 1px solid var(--ink); margin-top: 6px; font-size: 18px; }
.bk-go { margin-top: 12px; }
.bk-go:disabled { opacity: .5; cursor: default; }
.bk-note { font-size: 13px; color: var(--ink-3); margin: 10px 0 0; }
.paid-thanks { margin: 14px auto; max-width: 1100px; padding: 14px 18px; border-radius: 12px; background: rgba(95, 154, 107, .14); color: #2f5a39; font-weight: 500; }
.bk-part { font-size: 13.5px; color: var(--ink-2); margin: 6px 0 0; }

/* the offer of today, the courses to come, a gift and a code in the order block */
/* the offer of the day, on every page */
.promo-top { position: relative; z-index: 51; }
.promo-top-in { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; justify-content: center; padding: 8px 40px 8px 16px; min-height: 38px; text-align: center; }
.promo-top a { font-weight: 500; text-underline-offset: 3px; }
.promo-copy { font: 600 13px/1 ui-monospace, Menlo, monospace; letter-spacing: .06em; padding: 5px 9px; border-radius: 6px; cursor: pointer;
  border: 1px dashed currentColor; background: rgba(255, 255, 255, .14); color: inherit; }
.promo-copy.done { border-style: solid; }
.promo-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px; opacity: .85; }
.promo-pop { position: fixed; left: 16px; bottom: 16px; z-index: 80; max-width: 340px; background: #fffdf8; color: var(--ink, #16140f);
  border: 1px solid var(--line, #e4ddcf); box-shadow: 0 18px 50px rgba(20, 16, 8, .18); padding: 20px 20px 16px;
  transform: translateY(12px); opacity: 0; transition: opacity .3s, transform .3s; }
.promo-pop.on { transform: none; opacity: 1; }
.promo-pop .promo-x { top: 8px; right: 6px; transform: none; color: var(--ink-3, #6b6558); }
.promo-pop-t { font: 500 22px/1.2 var(--serif); margin: 0 18px 8px 0; }
.promo-pop-s { font-size: 14px; color: var(--ink-2, #4a463d); margin: 0 0 14px; }
.promo-pop-c { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; }
.promo-pop .promo-copy { color: var(--brass-ink, #8a6a35); background: #fbf5e8; font-size: 15px; padding: 8px 12px; }
@media (max-width: 640px) { .promo-top { font-size: 13px; } .promo-pop { left: 12px; right: 12px; bottom: 12px; max-width: none; } }
@media print { .promo-top, .promo-pop { display: none !important; } }
.promo-bar { margin: 0 0 16px; font-size: 15px; }
.promo-bar b { font-weight: 600; }
.promo-note { display: block; margin-top: 4px; font-size: 14px; opacity: .92; }
.promo-pop-s + .promo-pop-s { font-size: 13px; color: var(--ink-3, #6b6558); }
.promo-bar .num { font-family: ui-monospace, Menlo, monospace; letter-spacing: .04em; }
.upcoming .badge { margin-bottom: 8px; }
.bk-giftline { margin-top: 8px; }
.bk-codeline { display: grid; gap: 4px; margin: 10px 0 2px; font-size: 13.5px; color: var(--ink-2); }
.bk-codeline input { font: inherit; font-size: 15px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink);
  max-width: 260px; text-transform: uppercase; letter-spacing: .04em; }
.bk-friend { font-size: 13.5px; color: var(--ok, #2f6b45); margin: 4px 0 0; }
/* the workshop's logo, always engraved; and the buyer's own engraving, free, made to measure */
.bk-logo { display: block; font-size: 12px; color: var(--brass-ink); margin-top: 2px; }
.kit-logo { font-size: 13px; color: var(--brass-ink); margin: 6px 0 10px; }
.bk-engrave { margin-top: 10px; }
.bk-eng-delay { display: block; font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.bk-eng-box { display: grid; gap: 8px; padding: 4px 2px 10px 30px; }
.bk-eng-box .bk-codeline { margin-top: 4px; }
.bk-eng-box .bk-codeline input { text-transform: none; letter-spacing: 0; max-width: 320px; }
.bk-eng-where { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.bk-eng-where label, .bk-eng-ack { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.bk-eng-where input, .bk-eng-ack input { accent-color: var(--brass); width: 16px; height: 16px; margin: 2px 0 0; flex: none; }
.bk-eng-ack { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.bk-eng-need { font-size: 13px; color: #b5533c; margin: 0; }
.bk-eng-view { border-radius: 14px; background: radial-gradient(120% 90% at 50% 0%, #34383d, #15171a); padding: 14px 14px 10px; max-width: 520px; }
.bk-eng-svg svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.bk-eng-3d { position: relative; aspect-ratio: 4 / 3; margin: -4px -4px 10px; border-radius: 10px; overflow: hidden; }
.bk-eng-3d canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; opacity: 0; transition: opacity .6s; }
.bk-eng-3d.ready canvas { opacity: 1; }
.bk-eng-3d:not(.ready)::after { content: ''; position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .25); border-top-color: #d9c08a; animation: bk-spin 1s linear infinite; }
.bk-eng-3d.failed { display: none; }
@keyframes bk-spin { to { transform: rotate(360deg); } }
.bk-eng-zoom { position: absolute; right: 10px; top: 10px; font: 500 12.5px/1 var(--sans); color: #f2ede3; background: rgba(20, 22, 26, .66);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 8px 12px; cursor: pointer; backdrop-filter: blur(4px); }
.bk-eng-3d + .bk-eng-svg { max-width: 300px; margin: 0 auto; }
.bk-eng-cap { font-size: 12.5px; color: #c9c3b6; margin: 8px 2px 0; line-height: 1.4; }
.bk-eng-cap.is-long { color: #ffb4a1; }
.bk-off { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; color: var(--ok, #2f6b45); font-size: 14.5px; }
.bk-off b { font-weight: 600; white-space: nowrap; }
.bills { margin: 14px 0 0; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--card, #fff); }
.bills-h { margin: 0 0 6px; font: 500 20px/1.2 var(--serif); }
.bill { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.bill:first-child { border-top: 0; }
.bill-what { display: grid; gap: 2px; min-width: 0; }
.bill-what .muted { font-size: 13px; }
.bill-amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.bill-state { font-size: 13px; color: #b5533c; }
.bill-state.ok { color: #2f6b45; }
@media (max-width: 560px) { .bill { grid-template-columns: minmax(0, 1fr) auto; } .bill .btn { grid-column: 1 / -1; justify-self: start; } }
.friend-band { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 14px 0 0; padding: 14px 18px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(184, 146, 90, .08); font-size: 14.5px; }
.friend-band > span:first-child { flex: 1 1 320px; }
.friend-band b { display: block; margin-bottom: 2px; }
.friend-link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.friend-link code { font-size: 13px; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, .05); word-break: break-all; }
#sp-friend-copy.done { border-color: var(--ok, #2f6b45); }


/* ── Watches assembled to order: the dial chosen on the card ─────────────── */
.watch-build .wb-photo { margin: -4px -4px 12px; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: #f3efe7; }
.watch-build .wb-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.watch-build .wb-desc { font-size: .92em; opacity: .8; margin: 0 0 8px; }
.watch-build .wb-h { margin: 6px 0; font-size: .92em; }
.wb-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.wb-opt { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border: 1px solid transparent; border-radius: 10px;
  background: none; cursor: pointer; font: inherit; font-size: .8em; color: inherit; min-width: 52px; }
.wb-opt img, .wb-opt .wb-dot { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.wb-opt .wb-dot { background: linear-gradient(135deg, #d9d2c3, #9a7438); }
.wb-opt[aria-pressed="true"] { border-color: #9a7438; }
.wb-opt:disabled { opacity: .35; cursor: not-allowed; }
.wb-opt:focus-visible { outline: 2px solid #9a7438; outline-offset: 2px; }
.bk-wb .bk-h { margin-top: 4px; }

/* ── The consultation booking page ───────────────────────────────────────── */
.rdv .rdv-tz { font-size: .9em; opacity: .75; }
.rdv .rdv-day { margin: 0 0 18px; }
.rdv .rdv-dayname { font-size: 1.05rem; font-weight: 600; margin: 0 0 8px; font-family: inherit; letter-spacing: 0; }
.rdv .rdv-times { display: flex; flex-wrap: wrap; gap: 8px; }
.rdv .rdv-time { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer; min-width: 74px; }
.rdv .rdv-time:hover, .rdv .rdv-time:focus-visible { background: #9a7438; color: #fff; border-color: #9a7438; outline: none; }
.rdv .rdv-chosen { font-weight: 600; font-size: 1.05rem; margin: 0 0 12px; }
.rdv #rdv-form label { display: block; margin-bottom: 12px; }
.rdv #rdv-form input, .rdv #rdv-form textarea { width: 100%; }
.rdv #rdv-back { margin-left: 8px; }
.rdv .space-form { max-width: 480px; }
.rdv .space-form input, .rdv .space-form textarea { font: 400 16px/1.4 var(--sans); letter-spacing: 0; text-transform: none; text-align: left;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.rdv .space-form textarea { resize: vertical; min-height: 96px; }
.rdv h1 { margin: 6px 0 14px; }
.rdv .lead { margin: 0 0 18px; max-width: 46em; }
.rdv #rdv-slots { margin-top: 18px; }
.rdv #rdv-done p { margin: 0 0 16px; }

/* the week of free hours */
.rdv .rdv-next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 16px 18px; margin: 4px 0 22px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.rdv .rdv-next-t { margin: 0; width: 100%; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.rdv .rdv-next-w { margin: 0; font-size: 1.15rem; font-weight: 600; flex: 1; min-width: 200px; }
.rdv .rdv-week { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 14px; }
.rdv .rdv-week-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rdv .rdv-week-title { flex: 1; margin: 0; text-align: center; display: grid; gap: 2px; }
.rdv .rdv-week-title span { font-size: 13px; color: var(--ink-3); }
.rdv .rdv-nav { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.rdv .rdv-nav:disabled { opacity: .3; cursor: default; }
.rdv .rdv-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.rdv .rdv-col { border-radius: 10px; padding: 8px 4px; text-align: center; background: rgba(0,0,0,.025); }
.rdv .rdv-col.has { background: rgba(154,116,56,.08); }
.rdv .rdv-col.past { opacity: .4; }
.rdv .rdv-col.today .rdv-colh b { color: #9a7438; }
.rdv .rdv-colh { margin: 0 0 8px; display: grid; gap: 1px; font-size: 12px; color: var(--ink-3); text-transform: capitalize; }
.rdv .rdv-colh b { font-size: 18px; color: var(--ink); }
.rdv .rdv-col .rdv-times { display: grid; gap: 6px; justify-items: stretch; }
.rdv .rdv-col .rdv-time { min-width: 0; padding: 7px 4px; font-size: 14px; }
.rdv .rdv-none { color: var(--ink-3); opacity: .6; }
.rdv .rdv-tz { margin: 12px 0 0; text-align: center; }
.rdv .rdv-hint { font-size: 13px; color: var(--ink-3); margin: -4px 0 4px; }
.rdv .rdv-sign { margin-top: 26px; }
.rdv .rdv-msg { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
@media (max-width: 720px) {
  .rdv .rdv-grid { grid-template-columns: 1fr; gap: 6px; }
  .rdv .rdv-col { display: grid; grid-template-columns: 64px 1fr; align-items: center; text-align: left; padding: 8px 10px; }
  .rdv .rdv-col:not(.has) { display: none; }
  .rdv .rdv-colh { margin: 0; }
  .rdv .rdv-col .rdv-times { display: flex; flex-wrap: wrap; }
  .rdv .rdv-col .rdv-time { padding: 8px 14px; }
}

/* how the course works: four points, two by two */
.whys.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .whys.two { grid-template-columns: 1fr; } }
.how-course { margin-top: clamp(30px, 4vw, 48px); }
.wa-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  background: #25d366; color: #fff; vertical-align: 1px; }

/* the student area, shown on the course page */
.space-tour .shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.space-tour .shot { margin: 0; }
.space-tour .shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; border-radius: 12px;
  border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); display: block; transition: transform .2s; }
.space-tour .shot img { cursor: zoom-in; }
.space-tour .shot img:hover { transform: translateY(-2px); }
.space-tour .shot figcaption { font-size: 14px; color: var(--ink-2); margin-top: 8px; line-height: 1.45; }
@media (max-width: 900px) { .space-tour .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .space-tour .shots { grid-template-columns: 1fr; } }
/* students' real questions under the films, and his answers */
.course-qa { margin-top: 56px; }
.qa-cards { columns: 2 340px; column-gap: 18px; margin-top: 18px; }
.qa-card { break-inside: avoid; margin: 0 0 18px; padding: 16px 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.qa-where { margin: 0 0 10px; font: 500 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-ink); }
.qa-who { display: block; font: 600 12.5px/1.3 var(--sans); color: var(--ink-3); margin-bottom: 4px; }
.qa-q { padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: var(--paper-2); font-size: 15px; }
.qa-a { margin: 10px 0 0 18px; padding: 10px 12px; border-radius: 12px 12px 4px 12px; background: #f3ead8; border-left: 3px solid var(--brass); font-size: 15px; }
.qa-q p, .qa-a p { margin: 0 0 8px; } .qa-q p:last-child, .qa-a p:last-child { margin-bottom: 0; }
.qa-a a { word-break: break-all; }

/* ── le réglage et l'étanchéité (espace élève) ──────────────────────────── */
.reglage .rg-list { display: grid; gap: 10px; padding-left: 20px; margin: 12px 0; }
.reglage .rg-steps { display: grid; gap: 10px; padding-left: 22px; margin: 12px 0; }
.reglage .rg-values table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.reglage .rg-values th, .reglage .rg-values td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.reglage .rg-values th { font-weight: 600; color: var(--ink-2); font-size: 13px; }
.reglage .rg-note { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.reglage .rg-faults dt { font-weight: 600; margin-top: 14px; }
.reglage .rg-faults dd { margin: 4px 0 0; color: var(--ink-2); }
.reglage .rg-values { overflow-x: auto; }
.tg { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 14px; }
.tg-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; margin: 10px 0; align-items: end; }
.tg-controls label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.tg-controls select, .tg-controls input[type=range] { width: 100%; accent-color: #9a7438; }
.tg-controls select { padding: 7px 8px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font: inherit; color: var(--ink); }
.tg-controls small { font-size: 11px; opacity: .7; }
.tg-advice { font-size: 14.5px; margin: 10px 0 0; min-height: 1.4em; }
.tg-exo { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.tg-exo p { margin: 0; font-size: 14px; flex: 1; min-width: 220px; }

/* the timegrapher: a grey instrument, its liquid-crystal screen, the level knob and six round keys */
.wico { --lcd: #c3cbb0; --lcd-ink: #1d231a; display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 18px; margin-top: 16px; padding: 18px;
  border-radius: 14px; background: linear-gradient(180deg, #ecebe6, #dcdad3); border: 1px solid #b9b6ad; box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgba(0, 0, 0, .1); }
.wico-lcd { background: linear-gradient(180deg, #ccd4b9, var(--lcd)); color: var(--lcd-ink); border: 2px solid #3b3f38; border-radius: 6px; padding: 10px 12px 8px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .18); font-family: ui-monospace, Menlo, Consolas, monospace; }
.wico-heads, .wico-nums, .wico-params, .wico-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wico-heads span { font: 600 11px/1.2 var(--sans); border-bottom: 1.5px solid var(--lcd-ink); padding-bottom: 3px; }
.wico-heads i { font-weight: 800; }
.wico-heads small { font-weight: 500; font-size: 10px; }
.wico-nums b { font: 700 clamp(26px, 4.4vw, 40px)/1.15 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; padding: 4px 0 2px; }
#tg-paper { width: 100%; display: block; margin: 4px 0; }
.wico-params, .wico-labels { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wico-params span { font: 600 15px/1.5 ui-monospace, Menlo, Consolas, monospace; padding: 0 4px; border-radius: 2px; }
.wico-params span.sel { background: var(--lcd-ink); color: var(--lcd); }
.wico-labels span { font: 700 9.5px/1.15 var(--sans); font-style: italic; color: #2b2e28; padding: 6px 4px 0; border-top: 1.5px solid #2b2e28; margin-top: 6px; text-transform: uppercase; }
.wico-name { margin: 10px 0 0; font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #2b2e28; }
.wico-name span { font-weight: 500; letter-spacing: .04em; text-transform: none; color: #6b6558; }
.wico-side { border: 2px solid #3b3f38; border-radius: 8px; padding: 12px; display: grid; gap: 14px; align-content: start; background: rgba(255, 255, 255, .25); }
.wico-level { display: grid; grid-template-columns: 1fr auto; align-items: center; justify-items: center; row-gap: 4px; }
.wico-sig { display: grid; justify-items: center; gap: 4px; font: italic 600 11px/1 var(--sans); color: #2b2e28; grid-row: 1; grid-column: 2; align-self: start; }
.wico-sig i { width: 11px; height: 11px; border-radius: 50%; background: #5d2a2a; border: 1px solid #222; }
.wico-sig i.on { background: #ff4d3a; box-shadow: 0 0 8px #ff4d3a; }
.wico-knob { --turn: 0deg; grid-row: 1; grid-column: 1; width: 92px; height: 92px; border-radius: 50%; border: 0; cursor: grab; touch-action: none; position: relative;
  background: radial-gradient(circle at 50% 45%, #6a6e72 0 34%, #2a2d30 35% 41%, transparent 42%),
              repeating-conic-gradient(#1c1e20 0 5deg, #3a3d40 5deg 10deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.wico-knob i { position: absolute; left: 50%; top: 50%; width: 3px; height: 26px; margin: -26px 0 0 -1.5px; background: #f2f2ee; border-radius: 2px;
  transform-origin: 50% 100%; transform: rotate(var(--turn)); }
.wico-knob:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.wico-cap { font: italic 700 12px/1 var(--sans); color: #2b2e28; grid-column: 1; }
.wico-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.wico-btns span { display: grid; justify-items: center; gap: 3px; }
.wico-btns button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: radial-gradient(circle at 40% 35%, #8c9094, #4c5054 70%); color: #fff;
  font-size: 13px; cursor: pointer; box-shadow: 0 3px 6px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .25); }
.wico-btns button:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.wico-btns button.on { box-shadow: 0 0 0 3px var(--brass), 0 3px 6px rgba(0, 0, 0, .3); }
.wico-btns small { font: italic 700 11px/1 var(--sans); color: #2b2e28; }
.bal-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
.bal-view { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 10px; }
#tg-balance { width: 100%; display: block; touch-action: none; }
.bal-3d { position: relative; }
#bal-gl { position: absolute; left: 0; top: 0; width: 100%; display: block; pointer-events: none; }
#bal-gl[hidden] { display: none; }
#tg-balance.over-3d { position: relative; z-index: 1; }
.bal-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.bal-names { font-size: 13px; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; }
.bal-read { font-size: 13.5px; color: var(--ink-2); margin: 8px 2px 0; line-height: 1.5; }
.bal-tip { font-size: 13.5px; color: var(--ink-2); }
.pos-pick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 8px 0 6px; }
.pos-pick button { display: grid; justify-items: center; gap: 2px; padding: 6px 2px 5px; border-radius: 10px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink-2); font: 600 12px/1 var(--sans); cursor: pointer; }
.pos-pick button svg { width: 30px; height: 30px; }
.pos-pick button.on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.tg-ticket { margin-top: 16px; padding: 14px 16px; background: #fffef9; border: 1px dashed #b9b6ad; border-radius: 6px;
  font-family: ui-monospace, Menlo, Consolas, monospace; box-shadow: 0 6px 18px rgba(0, 0, 0, .05); }
.tg-ticket table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tg-ticket th, .tg-ticket td { text-align: left; padding: 5px 8px; border-bottom: 1px dotted #cfccc3; }
.tg-ticket small { color: var(--ink-3); font-family: var(--sans); }
@media (max-width: 860px) {
  .wico { grid-template-columns: 1fr; padding: 12px; }
  .wico-side { grid-template-columns: auto 1fr; align-items: center; }
  .wico-btns { grid-template-columns: repeat(3, 1fr); }
  .bal-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .wico-params span { font-size: 12px; padding: 0 1px; }
  .wico-labels span { font-size: 7.5px; }
  .wico-heads span { font-size: 9.5px; }
  .wico-knob { width: 74px; height: 74px; }
  .wico-side { grid-template-columns: 1fr; }
}

/* the online timegrapher (/chronocomparateur/): the same instrument, a real microphone */
.cg-setup { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) 120px 150px auto; gap: 10px 14px; align-items: end; margin-top: 8px; }
.cg-field { display: grid; gap: 6px; font: 500 11.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); min-width: 0; }
.cg-field select, .cg-field input { font: 400 15px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); width: 100%; min-width: 0; box-sizing: border-box; }
.cg-go { justify-content: center; white-space: nowrap; }
.cg-go .cg-go-off, .cg.on .cg-go .cg-go-on { display: none; }
.cg.on .cg-go .cg-go-off { display: inline; }
.cg-calnote { font-size: 13.5px; color: var(--ink-2); margin: 8px 0 0; min-height: 1.3em; }
#cg-paper { width: 100%; display: block; margin: 4px 0; }
.cg-h { margin-top: 22px; }
.cg-tip { font-size: 14px; color: var(--ink-2); margin: 4px 0 0; max-width: 72ch; }
.cg-pickup { font-weight: 500; margin: 14px 0 10px; }
.cg-fine { font-size: 13.5px; margin-top: 22px; max-width: 80ch; }
/* the public page shows the instrument still, the working one is in the student area */
.cg-show { max-width: 620px; pointer-events: none; }
.cg-show .wico { grid-template-columns: 1fr; }
.cg-trace { width: 100%; height: 96px; display: block; margin: 4px 0; }
.cg-buy { max-width: 620px; margin: 18px auto 0; display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.cg-buy > p { flex: 1 0 100%; margin: 0; }
.cg-buy .cg-pickup { flex: 1 0 100%; margin: 0; }
.cg-wait { font-size: 14px; color: var(--ink-3); margin: 8px 0; }
.cg-wait[hidden] { display: none; }
#sp-chrono [data-l] { display: none !important; }
#sp-chrono[data-own="fr"] [data-l="fr"] { display: revert !important; }
#sp-chrono[data-own="en"] [data-l="en"] { display: revert !important; }
#sp-chrono[data-own="nl"] [data-l="nl"] { display: revert !important; }
#sp-chrono[data-own="de"] [data-l="de"] { display: revert !important; }
.with-course { display: block; font-size: 12px; color: var(--ink-3); margin: 0 0 6px; }
@media (max-width: 860px) { .cg-setup { grid-template-columns: 1fr 1fr; } .cg-go { grid-column: 1 / -1; } }
@media (max-width: 520px) { .cg-setup { grid-template-columns: 1fr; } }

/* the water-resistance bench: the bell and the curve side by side */
.et-stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; }
#et-scene, #et-chart { width: 100%; display: block; border-radius: 10px; border: 1px solid var(--line); background: #fbf8f1; }
.et-read { margin: 12px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); display: grid; gap: 4px; }
@media (max-width: 760px) { .et-stage { grid-template-columns: 1fr; } }

/* the quartz tester: three displays and their lamps, the movement on its table, the test modes */
.qt { --lcd: #c3cbb0; margin-top: 16px; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, #f1f0ec, #e2e0d9); border: 1px solid #b9b6ad;
  box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgba(0, 0, 0, .1); }
.qt-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qt-disp { border: 2px solid #3b3f38; border-radius: 6px; padding: 6px 8px 8px; background: rgba(255, 255, 255, .35); }
.qt-h { margin: 0 0 4px; font: italic 800 12px/1 var(--sans); color: #2b2e28; border-bottom: 1.5px solid #2b2e28; padding-bottom: 3px; }
.qt-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.qt-led, .qt-unit { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font: italic 600 10.5px/1.2 var(--sans); color: #2b2e28; }
.qt-led li, .qt-unit li { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.qt-led i, .qt-unit i { width: 8px; height: 8px; border-radius: 50%; background: #6d7a3a; opacity: .35; border: 1px solid #333; flex: 0 0 auto; }
.qt-led i.on, .qt-unit li.on i { opacity: 1; background: #b8e04a; box-shadow: 0 0 6px #b8e04a; }
.qt-led i.blink { animation: qtblink 1s steps(2, start) infinite; }
@keyframes qtblink { 0% { opacity: .35; } 50% { opacity: 1; background: #b8e04a; box-shadow: 0 0 6px #b8e04a; } }
.qt-sub { font-style: normal !important; font-weight: 700 !important; }
.qt-lcd { display: block; text-align: center; background: linear-gradient(180deg, #ccd4b9, var(--lcd)); border: 2px solid #3b3f38; border-radius: 4px;
  font: 700 clamp(20px, 3.4vw, 30px)/1.25 ui-monospace, Menlo, Consolas, monospace; color: #1d231a; padding: 4px 6px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .18); }
.qt-mid { margin: 12px 0; }
#qz-mvt { width: 100%; display: block; border-radius: 10px; }
.qt-cond { margin: 6px 2px 0; font-size: 13px; color: var(--ink-2); font-style: italic; }
.qt-modes { display: grid; grid-template-columns: 0.8fr 1.4fr 2.6fr 1fr; gap: 10px; }
.qt-grp { border-top: 1.5px solid #2b2e28; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
.qt-grp p { flex: 0 0 100%; margin: 0; font: italic 800 11px/1 var(--sans); text-transform: uppercase; color: #2b2e28; }
.qt-grp button { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 9px; border: 1px solid #9c998f; background: #fbfaf6; cursor: pointer;
  font: 600 13px/1.15 var(--sans); color: var(--ink); }
.qt-grp button small { font: italic 500 10.5px/1 var(--sans); color: var(--ink-3); }
.qt-grp button:hover { border-color: var(--brass); }
.qt-grp button.on { background: #2b2e28; border-color: #2b2e28; color: #f1f0ec; }
.qt-grp button.on small { color: #c9c6bc; }
.qz-log { margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: var(--ink-2); }
.qz-log:empty { display: none; }
.qz-exo select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font: inherit; }
@media (max-width: 860px) { .qt-modes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .qt-row { grid-template-columns: 1fr; }
  .qt-in { grid-template-columns: 70px minmax(0, 1fr) 76px; }
  .qt-modes { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .tg-screen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The course page's live timegrapher: the student area's lesson block, without its exercises */
.practice-demo .rg-demo { max-width: 1040px; margin: 8px auto 0; padding: 0; }
.practice-demo .rg-demo .tg-advice { min-height: 1.5em; }
.practice-demo .practice-water { margin-top: 56px; }

/* Courses at the workshop: a card per course, its dates in a list, booked and paid at once */
.ws-card h3 { font-size: 24px; }
.ws-card .badge { align-self: flex-start; margin-bottom: 10px; }
.ws-card .price { font-size: 36px; margin: 14px 0 14px; }
.ws-card .price small { margin: 0 0 0 6px; }
.ws-go { margin-top: auto; padding-top: 16px; display: grid; gap: 10px; }
.ws-pick { display: grid; gap: 4px; font-size: 13px; color: var(--ink-3); }
.ws-pick select { font: inherit; font-size: 15px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; }
.ws-note { font-size: 13px; margin: 0; }
.ws-none { font-size: 14px; color: var(--ink-2); margin: 0; }
.ws-other { font-size: 13px; color: var(--brass-ink); }
.ws-err { margin: 0; }
#atelier .pics { margin-top: 28px; }

/* ═══ Haute — the manner of the great houses ═════════════════════════════════
   Taken from how A. Lange & Söhne, Greubel Forsey, Voutilainen and Rexhepi show
   their work (Oct 2026): the name in the middle of the header, the menu to its
   left, nothing rounded — square photographs, square hairline buttons — light
   serif capitals with air around them, the language as plain letters, and
   photographs that are unveiled, slowly, as they come into view. This layer
   sits over all the others. */
:root { --ease-lux: cubic-bezier(.19, 1, .22, 1); --r: 2px; }

/* type: lighter, larger, more air */
h1, h2 { font-weight: 300; letter-spacing: -.015em; }
h2 { line-height: 1.04; }
.hero h1 { font-weight: 300; line-height: .98; }
.sec-lead, .hero .lead, .course-band .lead { font-weight: 300; line-height: 1.75; }
.eyebrow { letter-spacing: .32em; font-size: 11px; }
.sec { padding-block: clamp(96px, 12vw, 168px); }
.sec-head { margin-bottom: clamp(48px, 6vw, 80px); }

/* header: the menu, the name in the middle, the languages and the course */
@media (min-width: 1181px) {
  .top-in { position: relative; height: 84px; }
  .brand { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; flex-direction: column; gap: 6px; }
  .brand .brand-mark { height: 34px; }
  .brand-name { font-size: 10px; letter-spacing: .5em; margin-right: -.5em; }
  .brand:hover .brand-mark { transform: none; opacity: .8; }
  .nav { margin-right: auto; }
}
.lang { border: 0; padding: 0; gap: 2px; }
.lang a { border-radius: 0; padding: 6px 7px; opacity: .5; letter-spacing: .14em; position: relative; }
.lang a.on, .lang a.on:hover { background: none; color: inherit; opacity: 1; }
.lang a.on::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 1px; height: 1px; background: currentColor; }
.top-cta { border-radius: 0; padding: 12px 20px; }
.nav-drop { border-radius: 0 !important; }

/* the offer: one quiet line in ink, not a gold banner */
.promo-top { background: var(--graphite) !important; color: rgba(239, 232, 218, .86) !important; font-size: 12px; letter-spacing: .06em; }
.promo-top b { font-weight: 500; color: var(--cream); }
.promo-top a { color: var(--brass-2) !important; }
.promo-top code, .promo-top .promo-code, .promo-top kbd { border: 0 !important; background: none !important; color: var(--brass-2) !important; letter-spacing: .18em; padding: 0 2px !important; }
.promo-pop { border-radius: 0 !important; }

/* nothing rounded: buttons, photographs, cards */
.btn, .btn-maison, .btn-sm, .chip, .calc-tab, .film-langs button, .badge, .tags li { border-radius: 0 !important; }
.btn { font: 500 11.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; padding: 18px 30px; }
.btn-sm { padding: 13px 20px; font-size: 11px; }
.btn:hover { transform: none; }
.btn-brass::after { display: none; }
.btn::after { opacity: 1; background: var(--graphite); transition: transform .7s var(--ease-lux); }
.btn-dark::after, .btn-maison::after, .sec-dark .btn::after, .course-band .btn::after { background: var(--brass); }
.btn:hover { color: #f4f4f4; }
.btn-dark:hover, .btn-maison:hover, .sec-dark .btn:hover, .course-band .btn:hover { color: var(--ink); background: var(--graphite); border-color: var(--brass); }
.course-band .btn-maison:hover, .sec-dark .btn-brass:hover { background: var(--brass); }
.ph, .ph img, .topic, .topic-ph, .course-band-shot img, .maison-shot, .maison-shot img, .card, .kit, .app,
.strip .ph, .gallery .ph, .pic .ph, .pro-photos .ph, .astro-photo .ph, .whys, .s-date, .wim-faq details,
.form input, .form select, .form textarea, .form-msg, video, .vid, .vid img, .shots figure, .shots img { border-radius: 0 !important; }
.card::after, .kit::after { border-radius: 0; }

/* links: the line is drawn from the left */
.link-arrow, .link-more { border-bottom: 0 !important; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 3px; transition: background-size .6s var(--ease-lux); box-shadow: inset 0 -1px 0 rgba(165, 135, 74, .45); }
.link-arrow:hover, .link-more:hover { background-size: 100% 1px; }

/* the hero comes in: the words rise, then the rest */
@keyframes lux-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes lux-fade { from { opacity: 0; } to { opacity: 1; } }
.hero .eyebrow, .page-hero-studio .eyebrow, .maison-hero .eyebrow { animation: lux-fade 1.2s var(--ease-lux) .1s both; }
.hero h1, .page-hero-studio h1, .maison-hero h1 { animation: lux-rise 1.5s var(--ease-lux) .2s both; }
.hero .lead, .page-hero-studio .lead { animation: lux-rise 1.5s var(--ease-lux) .45s both; }
.hero-cta { animation: lux-rise 1.5s var(--ease-lux) .65s both; }
.hero-dial { animation: lux-fade 2.2s ease .3s both; }

/* photographs unveiled from below as they arrive (set by site.js) */
.unveil { overflow: hidden; }
.unveil img, .unveil video { clip-path: inset(100% 0 0 0); transform: scale(1.12);
  transition: clip-path 1.6s var(--ease-lux), transform 2.4s var(--ease-lux) !important; }
.unveil.in img, .unveil.in video { clip-path: inset(0 0 0 0); transform: none; }
.unveil.in:hover img { transform: scale(1.03); }

/* dark sections: a lamp over the bench */
.sec-dark, .course-band { position: relative; isolation: isolate; }
.sec-dark::before, .course-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 520px at 70% 0%, rgba(216, 183, 127, .07), transparent 70%); }

/* the hairline between the facts of the hero, as on a caseback */
.hero-facts { gap: 0; }
.hero-facts li { padding-inline: 18px; border-left: 1px solid var(--hair); }
.hero-facts li:first-child { padding-left: 0; border-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero h1, .hero .lead, .hero-cta, .hero-dial, .page-hero-studio h1, .page-hero-studio .lead,
  .page-hero-studio .eyebrow, .maison-hero h1, .maison-hero .eyebrow { animation: none; }
  .unveil img, .unveil video { clip-path: none; transform: none; transition: none !important; }
}
.hero h1 { font-size: clamp(44px, 5.3vw, 84px); }
.promo-top .promo-copy { border: 0 !important; background: none !important; color: var(--brass-2) !important; letter-spacing: .2em; padding: 0 3px !important; font-family: var(--sans) !important; text-decoration: underline dotted rgba(216, 183, 127, .5); text-underline-offset: 4px; }
/* the course band: one gold button, the second one a hairline beside it */
.course-band .course-cta .btn-brass { background: transparent; color: var(--cream); border-color: rgba(239, 232, 218, .4); }
.course-band .course-cta .btn-brass:hover { color: var(--ink); border-color: var(--brass); }
@media (max-width: 760px) { .top-in { gap: 12px; } .brand { margin-right: auto; } .brand-name { font-size: 10px; letter-spacing: .26em; } .lang a { padding: 6px 5px; } }
@media (max-width: 400px) { .brand-name { display: none; } }
/* the offer inside a page: a hairline and a gold rule, not a gold slab */
.promo-bar { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--hair) !important; border-left: 2px solid var(--brass) !important;
  border-radius: 0 !important; padding: 18px 22px !important; }
.promo-bar b, .promo-bar strong { font: 400 21px/1.25 var(--serif); color: var(--ink); }
.promo-bar p, .promo-bar span { color: var(--ink-2); }
.sec-dark .promo-bar, .course-band .promo-bar { color: var(--cream) !important; border-color: rgba(239, 232, 218, .16) !important; }
.sec-dark .promo-bar b, .sec-dark .promo-bar p, .sec-dark .promo-bar span { color: var(--cream); }

/* ── The bench, filmed: full width, under the distinctions ────────────────────
   The way the great houses open on a film of the workshop: silent, slow, graded
   down so the green mat reads as a bench and not as a colour. */
.film-band { position: relative; isolation: isolate; overflow: hidden; background: #0d1114; color: var(--cream);
  height: min(86vh, 58vw); min-height: 420px; display: flex; align-items: flex-end; }
.film-band-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  filter: saturate(.5) contrast(1.08) brightness(.82); transform: scale(1.14); transform-origin: 40% 62%; }
.film-band::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 13, 16, .82) 0%, rgba(10, 13, 16, .25) 42%, rgba(10, 13, 16, 0) 70%),
              radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(10, 13, 16, .55) 100%); }
.film-band-in { padding-block: clamp(36px, 6vw, 80px); }
.film-band .eyebrow { color: var(--brass-2); }
.film-band-t { font: 300 clamp(28px, 3.6vw, 52px)/1.08 var(--serif); letter-spacing: -.015em; max-width: 18em; margin: 0 0 22px; text-wrap: balance; }
.film-band-t em { color: var(--brass-2); }
.film-band .link-more { color: rgba(239, 232, 218, .85); font-size: 14px; text-decoration: none; }
@media (max-width: 760px) { .film-band { height: 72vh; min-height: 380px; } .film-band-v { object-position: 50% 40%; } }

/* ── The distinctions: given the room of a line on a caseback ───────────────── */
.trust { background: var(--studio-hi, #f8f8f8); border-top: 0; }
.trust-in { padding-block: clamp(34px, 4.5vw, 56px); gap: 0; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.trust-in > li { padding: 6px clamp(14px, 2vw, 28px); border-left: 1px solid var(--hair); flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.trust-in > li:first-child { border-left: 0; }
.trust li > a { flex-direction: column; align-items: center; gap: 12px; }
.trust svg { width: 28px; height: 28px; stroke-width: 1.1; }
.trust b { font: 400 20px/1.2 var(--serif); letter-spacing: .01em; text-wrap: balance; }
.trust li span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; }
@media (max-width: 760px) {
  .trust-in { grid-template-columns: 1fr 1fr; gap: 26px 0; }
  .trust-in > li:nth-child(odd) { border-left: 0; }
  .trust b { font-size: 17.5px; }
}
/* the course page opens on the bench, the way the home page's band does */
.film-hero { height: min(88vh, 60vw); min-height: 460px; }
.film-hero .film-band-t { font-size: clamp(36px, 5vw, 76px); max-width: 15em; animation: lux-rise 1.5s var(--ease-lux) .2s both; }
.film-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; animation: lux-rise 1.5s var(--ease-lux) .5s both; }
.film-hero .btn-maison { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.film-hero .btn-maison::after { background: var(--cream); }
.film-hero .btn-line { color: var(--cream); border-color: rgba(239, 232, 218, .45); }
.film-hero .btn-line::after { background: var(--cream); }
.film-hero .btn:hover { color: var(--ink); }
.film-hero + .sec { padding-top: clamp(72px, 9vw, 120px); }
@media (prefers-reduced-motion: reduce) { .film-hero .film-band-t, .film-hero-cta { animation: none; } }
/* the student area and the repair tracking, once in a grey bar of their own, end their menus under a hairline */
.nav-drop a.nav-sep { border-top: 1px solid var(--hair); margin-top: 6px; padding-top: 12px; }
@media (max-width: 1080px) { .nav { overflow-y: auto; overscroll-behavior: contain; } }
body.nav-open .buy-bar, body.nav-open .bench { visibility: hidden; }
.ship-note, .ship-out { display: block; font-size: 12px; letter-spacing: .02em; opacity: .8; margin-top: 2px; }
.ship-note[hidden], .ship-out[hidden] { display: none; }

/* ── The page the bios point to (liens/) ─────────────────────────────────────
   One column, the width of a phone, dark like the bench films: the chapter
   offered first, in gold, then the other ways in. */
.links-page { background: radial-gradient(900px 600px at 50% 0%, #22201a 0%, #12110d 70%); color: var(--cream); min-height: 100vh; }
.links { width: min(520px, 100%); margin: 0 auto; padding: 48px 20px 40px; text-align: center; }
.links-mark img { width: 120px; height: auto; margin: 0 auto 18px; filter: invert(1) brightness(1.1); opacity: .92; }
.links .eyebrow { color: var(--brass-2); }
.links h1 { font: 300 clamp(30px, 8vw, 40px)/1.08 var(--serif); margin: 6px 0 30px; }
.links h1 em { color: var(--brass-2); display: block; }
.links-list { display: grid; gap: 12px; text-align: left; }
.links-list a { display: block; padding: 16px 20px; border: 1px solid rgba(239, 232, 218, .2); text-decoration: none; color: inherit;
  transition: border-color .4s var(--ease-lux), background .4s var(--ease-lux); }
.links-list a:hover { border-color: var(--brass); background: rgba(216, 183, 127, .06); }
.links-list b { display: block; font: 400 21px/1.25 var(--serif); }
.links-list small { display: block; margin-top: 3px; font-size: 13px; color: rgba(239, 232, 218, .62); }
.links-list a.links-main { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.links-list a.links-main small { color: rgba(22, 20, 15, .72); }
.links-list a.links-main:hover { background: var(--brass-2); }
.links-foot { margin-top: 26px; font-size: 13px; color: rgba(239, 232, 218, .5); }
.links-foot a { color: inherit; }

/* ── The TL01 in hand, at the top of the home page and of Model 1 ───────────── */
.hero-film { margin: 0 auto; width: min(400px, 100%); }
.hero-film video { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 74vh; object-fit: cover; background: #1b1f24;
  box-shadow: 0 50px 90px -40px rgba(24, 28, 34, .55); }
.hero-film figcaption { text-align: center; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--slate); margin-top: 14px; }
.maison-hero .hero-film { margin-top: clamp(22px, 4vw, 40px); width: min(380px, 78vw); }
.maison-watch { display: flex; justify-content: center; }
.maison-watch .watch-stage { margin-top: 0; }
@media (max-width: 760px) { .hero-film video { max-height: 62vh; } }

/* The grain starts under the header: a see-through layer pinned at the very top
   of the screen is what an iPhone's Safari paints the status-bar strip from,
   and the page then showed through above the header. */
body::after { inset: auto; top: var(--head, 72px); left: 0; right: 0; bottom: 0; }

/* The TL01 in hand as the banner of the home page and of Model 1: a portrait film,
   so the band keeps the movement in the middle of it. */
.home-hero .film-band-v, .maison-banner .film-band-v { object-position: 50% 62%; transform: none; filter: saturate(.85) contrast(1.05) brightness(.78); }
.home-hero { height: min(92vh, 62vw); min-height: 520px; }
.home-hero .lead { color: rgba(239, 232, 218, .82); max-width: 36em; margin: 0 0 26px; font-size: clamp(16px, 1.4vw, 19px); }
.home-hero .eyebrow, .maison-banner .eyebrow, .maison-banner .eyebrow a { color: var(--brass-2); }
.home-hero .hero-cta .btn-maison { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.home-hero .hero-cta .btn-maison::after { background: var(--cream); }
.home-hero .hero-cta .btn-line { color: var(--cream); border-color: rgba(239, 232, 218, .45); }
.home-hero .hero-cta .btn-line::after { background: var(--cream); }
.home-hero .hero-cta .btn:hover { color: var(--ink); }
.film-hero-tag { display: inline-block; margin-top: 22px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(239, 232, 218, .7); text-decoration: none; }
.film-hero-tag:hover { color: var(--brass-2); }
.maison-banner .film-band-in { text-align: center; }
.maison-banner .maison-title { color: var(--cream); font: 300 clamp(64px, 11vw, 150px)/1 var(--serif); margin: 6px 0 8px; animation: lux-rise 1.5s var(--ease-lux) .2s both; }
.maison-banner .maison-sub, .maison-banner .maison-line { color: rgba(239, 232, 218, .78); }
.maison-banner .maison-line { max-width: 34em; margin: 14px auto 0; }
@media (max-width: 760px) { .home-hero { height: 86vh; min-height: 560px; } .home-hero .film-band-v, .maison-banner .film-band-v { object-position: 50% 55%; } }
.home-hero::after { background: linear-gradient(90deg, rgba(10, 12, 14, .88) 0%, rgba(10, 12, 14, .62) 38%, rgba(10, 12, 14, .12) 72%, rgba(10, 12, 14, 0) 100%),
                                linear-gradient(to top, rgba(10, 12, 14, .55) 0%, rgba(10, 12, 14, 0) 40%); }
.maison-banner::after { background: linear-gradient(to top, rgba(10, 12, 14, .9) 0%, rgba(10, 12, 14, .6) 45%, rgba(10, 12, 14, .15) 75%, rgba(10, 12, 14, .05) 100%); }
@media (max-width: 760px) {
  .home-hero::after { background: linear-gradient(to top, rgba(10, 12, 14, .94) 0%, rgba(10, 12, 14, .8) 45%, rgba(10, 12, 14, .2) 75%, rgba(10, 12, 14, 0) 100%); }
  .home-hero .film-band-v, .maison-banner .film-band-v { object-position: 50% 30%; }
}
@media (max-width: 760px) {
  /* the movement in the upper half, the words under it */
  .home-hero .film-band-v, .maison-banner .film-band-v { object-position: 50% 50%; transform: scale(1.55); transform-origin: 50% 96%; }
}

/* ── The course on the phone's home screen: the one-time hint (espace) ───────── */
.app-hint { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 70; display: flex; gap: 12px; align-items: flex-start;
  background: #fbfbfb; color: var(--graphite, #1b1f24); border: 1px solid var(--hair, rgba(27, 31, 36, .13)); padding: 14px 16px;
  box-shadow: 0 24px 50px -24px rgba(24, 28, 34, .45); max-width: 460px; margin: 0 auto; animation: lux-rise .9s var(--ease-lux) both; }
.app-hint img { flex: none; border: 1px solid var(--hair, rgba(27, 31, 36, .13)); }
.app-hint-t { display: block; font: 400 20px/1.2 var(--serif); margin-bottom: 4px; }
.app-hint p { font-size: 14px; line-height: 1.5; color: var(--slate, #5c636b); margin: 0 0 10px; }
.app-hint-do { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
@media (min-width: 900px) { .app-hint { bottom: 20px; } }

/* Paying in three with Klarna, under a price */
.klarna { margin: -10px 0 16px; font: 500 13px/1.4 var(--sans); color: var(--ink-3); }
.online-text .klarna, .card-feature .klarna { color: rgba(239, 232, 218, .7); margin: 4px 0 16px; }
#chrono-how .card { min-width: 0; }
#chrono-how .btn { white-space: normal; }

/* ── Told when it is back (site.js tlRestock) ─────────────────────────────── */
.restock { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 10px; font: 13px/1.45 var(--sans); }
.restock [hidden] { display: none !important; }
.restock .rs-h { margin: 0 0 2px; font-weight: 600; color: var(--ink, inherit); }
.restock .rs-why { margin: 0 0 8px; color: var(--ink-2, inherit); }
.restock .rs-row { display: flex; gap: 8px; flex-wrap: wrap; }
.restock input[type=email] { flex: 1 1 160px; min-width: 0; padding: 7px 10px; border: 1px solid var(--line, rgba(0,0,0,.2)); border-radius: 8px; font: inherit; background: transparent; color: inherit; }
.restock .rs-ok { margin: 0; color: #4f8a5c; }
.restock .rs-err { margin: 6px 0 0; color: #b5533c; }
.restock .rs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── To go further, and the shop's items by kind ────────────────────────── */
.bk-further .bk-line[hidden] { display: none !important; }
.bk-further-all { margin: 6px 0 0; font-size: 13.5px; color: var(--brass-ink, #8a6a2e); text-decoration: underline; text-underline-offset: 3px; }
.bk-further-all[hidden] { display: none; }
.items .items-h { grid-column: 1 / -1; margin: 22px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.items .items-h:first-child { margin-top: 12px; }
.items .item-ph { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; margin-right: 12px; vertical-align: middle; float: left; }