:root{color-scheme:light;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}body{margin:0;font:14px system-ui}img{max-width:100%}[hidden]{display:none!important}

  /* Layout: a 12-column page on white. Tubs stand on the page itself, never on a tile. The workshop is one tub's
     journey on a deep night band, black and white like the catalogues. Light page, one dark band; walnut and copper
     come from the logo. The site is deliberately light-only: every colour is set explicitly. */
  :root {
    --paper: #ffffff;
    --stone: #f2f1ee;
    --ink: #1d1a17;
    --ink-2: #625a53;
    --ink-3: #7d736a;
    --walnut: #2b160d;
    --copper: #8e4f2e;
    --night: #1b1917;
    --on-night: #ede7e0;
    --on-night-2: #a9a097;
    --line: #e3e0db;
    --display: "Newsreader", "Iowan Old Style", Georgia, serif;
    --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    --gutter: clamp(1rem, 6vw, 5.5rem);
    --hh: 4.6rem;
    color-scheme: light;
  }
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.6 var(--sans); }
  a { color: inherit; }
  img { display: block; max-width: 100%; }
  :focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
  .story :focus-visible, .closer :focus-visible, footer.site :focus-visible { outline-color: #e9c3a5; }
  p, li, dd { text-wrap: pretty; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  main:focus { outline: none; }
  [hidden] { display: none !important; }
  .wrap { max-width: 90rem; margin: 0 auto; padding-inline: var(--gutter); }
  .eyebrow { font: 500 0.74rem/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper); }
  .arrow { font: 500 0.9rem/1.3 var(--sans); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.15rem; width: fit-content; }
  .arrow:hover { color: var(--copper); }
  .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 0.5rem; background: var(--walnut); color: #fff; text-decoration: none; border: 1px solid var(--walnut);
    font: 600 0.78rem/1.25 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; padding: 0.92rem 1.35rem; cursor: pointer; }
  .btn:hover { background: #47291b; }
  .btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
  .btn.ghost:hover { background: rgba(255,255,255,0.1); }
  .sec { padding-block: clamp(4rem, 10vw, 9rem); }
  .h2 { margin: 0; font: 300 clamp(2rem, 4.2vw, 3.4rem)/1.05 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
  .skip { position: absolute; left: 1rem; top: -4rem; z-index: 60; background: var(--ink); color: #fff; padding: 0.7rem 1rem; text-decoration: none; font-weight: 600; }
  .skip:focus { top: 0.6rem; }
  html { scroll-padding-top: calc(var(--hh) + 0.5rem); }

  /* ── Header ───────────────────────────────────────────── */
  header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); }
  header.site .wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding-block: 0.65rem; }
  .logo { width: 124px; height: auto; mix-blend-mode: multiply; }
  .nav { display: flex; justify-content: center; gap: clamp(1rem, 2.4vw, 2.4rem); flex-wrap: wrap; }
  .nav a { text-decoration: none; font: 500 0.76rem/1 var(--sans); letter-spacing: 0.15em; text-transform: uppercase; padding-block: 0.6rem; border-bottom: 1.5px solid transparent; }
  .nav a:hover, .nav a[aria-current] { border-bottom-color: var(--ink); }
  .nav .nav-login { display: none; }
  .nav .langs { display: none; }   /* the language switch moves into the menu on phones (four languages, 2026-10-28) */
  .acts { display: flex; align-items: center; gap: 1.2rem; }
  .acts .login { font: 500 0.8rem/1 var(--sans); text-decoration: none; color: var(--ink-2); }
  .acts .login:hover { color: var(--ink); }
  .acts .btn { padding: 0.8rem 1rem; }
  .acts .langs { display: flex; border: 1px solid var(--line); border-radius: 999px; }
  .acts .lang { font: 500 0.74rem/1 var(--mono); letter-spacing: 0.06em; text-decoration: none; color: var(--ink-2); padding: 0.42rem 0.55rem;
    border-radius: 999px; }
  .acts .lang + .lang { border-left: 1px solid var(--line); border-radius: 0; }
  .acts .lang:first-child:not(:last-child) { border-radius: 999px 0 0 999px; }
  .acts .lang:last-child:not(:first-child) { border-radius: 0 999px 999px 0; }
  .acts .lang:hover { color: var(--ink); background: var(--line); }
  .menu-btn { display: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); background: var(--paper); cursor: pointer; padding: 0; place-items: center; }
  .menu-btn svg { width: 1.2rem; height: 1.2rem; stroke: var(--ink); stroke-width: 1.6; fill: none; }
  .menu-btn[aria-expanded="true"] .i-open, .menu-btn[aria-expanded="false"] .i-close { display: none; }

  /* ── Hero ─────────────────────────────────────────────── */
  .hero { position: relative; min-height: clamp(30rem, 58vw, 46rem); display: grid; align-items: end; overflow: hidden; background: var(--night); color: #fff; }
  .hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
  .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,13,10,0.78) 0%, rgba(18,13,10,0.35) 48%, rgba(18,13,10,0.05) 75%); }
  .loopctl { justify-self: start; display: inline-flex; align-items: center; gap: 0.45rem; background: rgba(18,13,10,0.55); color: #fff;
    border: 1px solid rgba(255,255,255,0.45); border-radius: 999px; padding: 0.45rem 0.75rem; font: 500 0.72rem/1 var(--sans); letter-spacing: 0.08em; cursor: pointer; }
  .loopctl:hover { background: rgba(18,13,10,0.75); }
  .loopctl svg { width: 0.8rem; height: 0.8rem; fill: currentColor; }
  .loopctl[aria-pressed="true"] .i-pause, .loopctl[aria-pressed="false"] .i-play { display: none; }
  .hero .wrap { width: 100%; position: relative; z-index: 2; }
  .hero-copy { display: grid; gap: 1.3rem; padding-block: clamp(3rem, 7vw, 5.5rem); max-width: 40rem; }
  .hero h1 { margin: 0; font: 300 clamp(2.4rem, 5.2vw, 4.4rem)/1.02 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
  .hero p { margin: 0; font-size: 1.1rem; color: #e6ded6; max-width: 34ch; }
  .hero .row { display: flex; flex-wrap: wrap; gap: 0.8rem; }

  /* ── Facts bar ────────────────────────────────────────── */
  .factsbar { border-bottom: 1px solid var(--line); }
  .factsbar ul { list-style: none; margin: 0; padding: 1.1rem 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 1.5rem; }
  .factsbar li { font: 400 0.95rem/1.3 var(--display); font-style: italic; color: var(--ink); display: flex; gap: 0.55rem; align-items: baseline; }
  .factsbar li b { font: 500 0.68rem/1 var(--sans); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper); }

  /* ── Models (the menu) ────────────────────────────────── */
  .head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
  .head-row p { margin: 0.6rem 0 0; color: var(--ink-2); max-width: 46ch; }
  .lineup { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.5rem, 1.5vw, 1.5rem); }
  .lineup.rel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tub { display: grid; gap: 0.3rem; text-decoration: none; text-align: center; align-content: start; }
  .tub .pic { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
  .tub img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 500ms cubic-bezier(.2,.7,.2,1); }
  a.tub:hover img { transform: translateY(-6px) scale(1.03); }
  .tub b { font: 400 1.35rem/1.15 var(--display); }
  .tub > span:last-child { font: 400 0.75rem/1.3 var(--mono); color: var(--ink-2); }
  .tub.soon .pic { position: relative; }
  .tub.soon img { filter: grayscale(1); opacity: 0.32; }
  .tub.soon .pic::after { content: ""; position: absolute; inset: 14% 10%;
    background: linear-gradient(to top right, transparent calc(50% - 0.75px), var(--copper) calc(50% - 0.75px), var(--copper) calc(50% + 0.75px), transparent calc(50% + 0.75px)); }
  .soon-label { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-6deg); white-space: nowrap;
    background: var(--paper); border: 1.5px solid var(--copper); color: var(--copper); padding: 0.55rem 0.8rem;
    font: 600 0.7rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }
  .tub.soon b, .tub.soon > span:last-child { color: var(--ink-2); }
  .shapes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.8rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
  .shapes a { text-decoration: none; font: 500 0.78rem/1 var(--sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-2); padding-block: 0.4rem; }
  .shapes a:hover { color: var(--ink); }
  .shapes em { font-style: normal; color: var(--copper); margin-left: 0.4rem; }

  /* ── Three heaters, drawn ─────────────────────────────── */
  .heaters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: clamp(3rem, 6vw, 5rem); }
  .heater { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
  .heater svg { width: 100%; height: auto; stroke: var(--ink); fill: none; stroke-width: 1.4; stroke-linejoin: round; }
  .heater svg .steel { fill: #e9e7e3; }
  .heater svg .fire { fill: var(--copper); stroke: none; opacity: 0.85; }
  .heater b { font: 400 1.25rem/1.2 var(--display); display: block; }
  .heater p { margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--ink-2); }

  /* ── The workshop: one tub's journey ──────────────────── */
  .story { background: var(--night); color: var(--on-night); }
  .story { padding-block: clamp(3.5rem, 7vw, 6rem); }
  .story .intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
  .story .intro > div { grid-column: 1 / span 8; display: grid; gap: 1.2rem; }
  .story .intro p { margin: 0; color: var(--on-night-2); font-size: 1.1rem; max-width: 46ch; }
  .story .eyebrow { color: #c9a68d; }
  .beat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; align-items: center; margin-bottom: clamp(2.75rem, 6vw, 5rem); }
  .beat .media { grid-column: 1 / span 7; position: relative; }
  .beat .words { grid-column: 8 / span 5; display: grid; gap: 1rem; padding-left: clamp(0rem, 2vw, 2rem); }
  .beat.flip .media { grid-column: 6 / span 7; grid-row: 1; }
  .beat.flip .words { grid-column: 1 / span 5; grid-row: 1; padding-left: 0; padding-right: clamp(0rem, 2vw, 2rem); }
  .frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #2a2724; }
  .frame > img { width: 100%; height: 100%; object-fit: cover; }
  .beat h3 { margin: 0; font: 300 clamp(1.7rem, 2.8vw, 2.4rem)/1.1 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
  .beat p { margin: 0; color: var(--on-night-2); max-width: 36ch; }
  .temps { display: flex; gap: 1.6rem; align-items: baseline; margin-top: 0.4rem; }
  .temps div { display: grid; }
  .temps b { font: 200 clamp(3.2rem, 6vw, 5rem)/0.9 var(--display); color: #fff; letter-spacing: -0.03em; font-variant-numeric: lining-nums; }
  .temps span { font: 500 0.7rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-night-2); margin-top: 0.5rem; }
  .inset { position: absolute; right: -6%; bottom: -8%; width: 32%; border: 6px solid var(--night); }
  .inset .frame { aspect-ratio: 3 / 4; }
  /* the workshop in black and white, like the catalogues; the videos are graded with the same maths already */
  .story .frame > img, .story .inset img, .mat .frame > img { filter: grayscale(1) contrast(1.06) brightness(0.96); }
  .frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: none; }
  .film { margin: 0 0 clamp(2.5rem, 6vw, 4.5rem); display: grid; gap: 1rem; }
  .film video { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; filter: none; }
  .film figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.4rem 1.5rem; color: var(--on-night-2); font-size: 0.92rem; }
  .film figcaption b { font: 300 clamp(1.4rem, 2.4vw, 1.9rem)/1.15 var(--display); color: var(--on-night); }
  /* the ending is the last photo-and-words pair of the story, flipped: the words under the film's caption, the
     test steps as a test sheet (one ruled line per check, ticked) */
  .finale { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
  .finale-photo { grid-column: 6 / span 7; grid-row: 1; margin: 0; }
  .finale-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(0.96); }
  .finale-words { grid-column: 1 / span 5; grid-row: 1; display: grid; gap: 1.4rem; padding-right: clamp(0rem, 2vw, 2rem); }
  .finale h3 { margin: 0; font: 300 clamp(2rem, 3.6vw, 3.3rem)/1.04 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
  .finale .row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
  .tests { list-style: none; margin: 0; padding: 0; display: grid; }
  .tests li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid #4a443e;
    font: 400 0.8rem/1.3 var(--mono); color: var(--on-night); }
  .tests li:last-child { border-bottom: 1px solid #4a443e; }
  .tests li::after { content: "\2713" / ""; color: #c9a68d; }
  .finale .ask { margin: 0; color: var(--on-night); font: 300 1.2rem/1.4 var(--display); font-style: italic; }

  /* ── Materials ────────────────────────────────────────── */
  .mats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .mat { display: grid; gap: 0.9rem; align-content: start; }
  .mat .frame { aspect-ratio: 4 / 5; background: var(--stone); }
  .mat b { font: 400 1.5rem/1.15 var(--display); }
  .mat p { margin: 0; color: var(--ink-2); font-size: 0.95rem; max-width: 36ch; }
  .swatchband { margin-top: clamp(2.5rem, 5vw, 4rem); display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; }
  .swg { display: grid; gap: 0.6rem; align-content: start; }
  .swg .lbl { font: 500 0.7rem/1 var(--sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-2); }
  .swg .row { display: flex; flex-wrap: wrap; gap: 3px; }
  .swg img { width: clamp(1.45rem, 2.05vw, 2rem); aspect-ratio: 1 / 1.6; object-fit: cover; }

  /* ── Private label ────────────────────────────────────── */
  .pl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; align-items: center; }
  .pl .visual { grid-column: 1 / span 7; }
  .pl .visual > img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
  /* the plate, seen through a lens: a small ring round the plate on the tub, the close-up in a round lens, and the two
     lines that touch both circles (their outer tangents, computed for lens centre 21/22 r 19 and ring 44.35/59.2 r 2.1) */
  .plate-call { position: relative; }
  .plate-call .zoom { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .plate-call line { stroke: #fff; stroke-width: 1.25; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 1px rgba(29,26,23,0.6)); }
  .plate-call circle { fill: none; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 1.5px rgba(29,26,23,0.65)); }
  .plate-call .closeup { position: absolute; left: 2%; top: 3%; width: 38%; aspect-ratio: 1; margin: 0; border-radius: 50%; overflow: hidden;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(29,26,23,0.14), 0 16px 30px -14px rgba(29,26,23,0.45); }
  .plate-call .closeup img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .pl .copy { grid-column: 9 / span 4; display: grid; gap: 1.3rem; }
  .pl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
  .pl li { display: grid; gap: 0.15rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
  .pl li b { font-weight: 600; font-size: 0.95rem; }
  .pl li span { color: var(--ink-2); font-size: 0.95rem; }

  /* ── Partner app ──────────────────────────────────────── */
  .app { background: var(--stone); }
  .app-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; align-items: center; }
  .browser { grid-column: 1 / span 7; margin: 0; background: #fff; border: 1px solid #d9d4cd; box-shadow: 0 30px 60px -30px rgba(29,26,23,0.35); }
  .browser .bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid #e6e1da; }
  .browser .bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #ddd6cd; }
  .browser .bar span { margin-left: 0.8rem; font: 400 0.74rem/1 var(--mono); color: var(--ink-2); background: var(--stone); padding: 0.35rem 0.7rem; flex: 1; max-width: 18rem; }
  .browser img { width: 100%; height: auto; }
  .app-copy { grid-column: 9 / span 4; display: grid; gap: 1.2rem; }
  .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
  .ticks li { display: grid; gap: 0.15rem; padding-top: 0.9rem; border-top: 1px solid #dcd8d2; }
  .ticks b { font-weight: 600; font-size: 0.95rem; }
  .ticks span { color: var(--ink-2); font-size: 0.95rem; }

  /* ── We help you sell ─────────────────────────────────── */
  .kit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; align-items: center; }
  .covers { grid-column: 1 / span 6; position: relative; height: clamp(20rem, 38vw, 33rem); }
  .covers img { position: absolute; width: 36%; aspect-ratio: 1024 / 1448; object-fit: cover; box-shadow: 0 24px 40px -18px rgba(29,26,23,0.45); }
  .covers img:nth-child(1) { left: 0; top: 8%; transform: rotate(-4deg); }
  .covers img:nth-child(2) { left: 21%; top: 2%; transform: rotate(-1deg); }
  .covers img:nth-child(3) { left: 42%; top: 6%; transform: rotate(2deg); }
  .covers img:nth-child(4) { left: 63%; top: 12%; transform: rotate(5deg); }
  .kit-copy { grid-column: 8 / span 5; display: grid; gap: 1.2rem; }
  .kit-list { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); }
  .kit-list dt, .kit-list dd { margin: 0; padding: 0.8rem 0; border-top: 1px solid var(--line); }
  .kit-list dt { font: 400 1.15rem/1.3 var(--display); padding-right: 1.5rem; }
  .kit-list dd { color: var(--ink-2); font-size: 0.93rem; }

  /* ── The owner's manual and the marketing kit: an offer that leads to the form ── */
  .manual { border-top: 1px solid var(--line); }
  .manual-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem 1.5rem; align-items: center; }
  .manual-copy { grid-column: 1 / span 5; display: grid; gap: 1.2rem; }
  .manual-copy .lede { margin: 0; color: var(--ink-2); max-width: 46ch; }
  .manual-copy .note { margin: 0; font-size: 0.82rem; color: var(--ink-3); }
  .manual-pages { grid-column: 7 / span 6; position: relative; aspect-ratio: 6 / 5; }
  .manual-pages img { position: absolute; width: 50%; aspect-ratio: 900 / 1274; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px rgba(29,26,23,0.07), 0 24px 40px -18px rgba(29,26,23,0.45); }
  .manual-pages img:nth-child(1) { right: 5%; top: 0; transform: rotate(4deg); }
  .manual-pages img:nth-child(2) { left: 8%; top: 12%; transform: rotate(-2deg); }
  .wants { margin: 0; padding: 0; border: 0; display: grid; gap: 0.45rem; min-width: 0; }
  .wants legend { padding: 0; margin-bottom: 0.35rem; font: 600 0.7rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
  .wants label { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.93rem; cursor: pointer; }
  .wants input { width: 1.05rem; height: 1.05rem; margin: 0.15rem 0 0; accent-color: var(--walnut); flex: none; }
  .wants input:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
  .wants .err { font-size: 0.8rem; color: #a3341f; }
  .field.confirm label { display: flex; gap: 0.6rem; align-items: flex-start; font: 400 0.88rem/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
  .field.confirm input { width: 1.05rem; height: 1.05rem; margin: 0.15rem 0 0; accent-color: var(--walnut); flex: none; }
  .field select:invalid { color: var(--ink-3); }
  .field input::placeholder, .field textarea::placeholder { color: #a39a91; }

  /* ── Shells and parts, sold separately ────────────────── */
  .sep { border-top: 1px solid var(--line); }
  .sep-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
  .sep-col { display: grid; gap: 1.3rem; align-content: start; }
  .sep-col.shells { grid-column: 1 / span 7; }
  .sep-col.parts { grid-column: 9 / span 4; }
  .sep-col h3 { margin: 0; font: 300 clamp(1.6rem, 2.6vw, 2.2rem)/1.1 var(--display); }
  .sep-col > p { margin: 0; color: var(--ink-2); max-width: 52ch; }
  .shellrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.8rem; }
  .shellrow figure, .partgrid figure { margin: 0; display: grid; align-content: start; gap: 0.4rem; text-align: center; }
  .shellrow img, .partgrid img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
  .shellrow figcaption, .partgrid figcaption { font: 400 0.72rem/1.35 var(--mono); color: var(--ink-2); }
  .partgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem 0.6rem; }
  .sep-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
  .sep-foot p { margin: 0; font: 300 1.25rem/1.4 var(--display); font-style: italic; }

  /* ── How it works, trade facts, form ──────────────────── */
  .trade { background: var(--stone); }
  .steps { list-style: none; margin: 0 0 clamp(3rem, 7vw, 5.5rem); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2rem; counter-reset: s; }
  .steps li { counter-increment: s; display: grid; gap: 0.5rem; align-content: start; padding-top: 1rem; border-top: 1.5px solid var(--ink); }
  .steps li::before { content: counter(s); font: 200 2.6rem/1 var(--display); color: var(--copper); }
  .steps b { font-weight: 600; }
  .steps span { color: var(--ink-2); font-size: 0.93rem; }
  .trade-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem 2rem; }
  .trade-facts { grid-column: 1 / span 6; display: grid; gap: 2rem; align-content: start; }
  .facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; }
  .facts dt, .facts dd { margin: 0; padding: 0.75rem 0; border-top: 1px solid #dcd8d2; font-size: 0.95rem; }
  .facts dt { font-weight: 600; padding-right: 2rem; }
  .facts dd { color: var(--ink-2); min-width: 0; }
  .first { margin: 0; color: var(--ink-2); max-width: 48ch; }
  .first b { color: var(--ink); font-weight: 600; white-space: nowrap; }
  .partner-wrap { grid-column: 8 / span 5; min-width: 0; }
  form.partner, .sent { background: var(--paper); padding: clamp(1.2rem, 3vw, 2.2rem); display: grid; gap: 0.9rem; align-content: start; }
  form.partner h3 { margin: 0; font: 300 1.9rem/1.1 var(--display); }
  form.partner p.small { margin: 0; color: var(--ink-2); font-size: 0.88rem; }
  .field { display: grid; gap: 0.3rem; min-width: 0; }
  .field label { font: 600 0.7rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
  .field label i { font-style: normal; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--ink-3); }
  .field input, .field select, .field textarea { font: inherit; font-size: 0.95rem; padding: 0.7rem 0.75rem; border: 1px solid #d7d2cb; background: #fff; color: var(--ink); border-radius: 0; min-width: 0; }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--copper); outline-offset: 1px; border-color: var(--ink); }
  .field [aria-invalid="true"] { border-color: #a3341f; }
  .field .err { font-size: 0.8rem; color: #a3341f; }
  .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
  .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .consent { margin: 0; font-size: 0.82rem; color: var(--ink-2); }
  .sent { display: grid; gap: 0.9rem; align-content: start; }
  .sent h3 { margin: 0; font: 300 1.9rem/1.1 var(--display); }
  .sent p { margin: 0; color: var(--ink-2); font-size: 0.92rem; }
  .sent pre { margin: 0; padding: 0.8rem; background: var(--stone); font: 400 0.8rem/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 16rem; overflow: auto; }
  .row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
  .linkbtn { background: none; border: 0; padding: 0; font: 500 0.88rem/1.3 var(--sans); color: var(--ink); border-bottom: 1px solid currentColor; cursor: pointer; }
  .linkbtn:hover { color: var(--copper); }

  /* ── Find us ──────────────────────────────────────────── */
  .find-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem 2rem; align-items: start; }
  .mapbox { grid-column: 1 / span 8; display: grid; gap: 0.8rem; min-width: 0; }
  .maptabs { display: flex; gap: 0.35rem; }
  .maptabs button { font: 500 0.82rem/1 var(--sans); border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 0.55rem 0.85rem; border-radius: 999px; cursor: pointer; }
  .maptabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .addr { grid-column: 9 / span 4; display: grid; gap: 1.3rem; align-content: start; }
  .addr h3 { margin: 0; font: 400 1.6rem/1.15 var(--display); }
  .addr address { font-style: normal; font-size: 1.05rem; line-height: 1.5; }
  .copyline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; }
  .copyline .v { color: var(--ink); }
  .copybtn { background: none; border: 0; padding: 0.35rem 0.2rem; font: 500 0.72rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper); cursor: pointer; }
  .copybtn:hover { color: var(--ink); }
  .drive h4 { margin: 0 0 0.4rem; font: 600 0.72rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
  .drive p { margin: 0; color: var(--ink-2); font-size: 0.93rem; }
  .addr .cta .btn.ghost { color: var(--ink); border-color: var(--ink); }
  .addr .cta .btn.ghost:hover { background: var(--stone); }
  /* ── Find us: the factory map, drawn from OpenStreetMap data ── */
  .map { position: relative; margin: 0; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; background: #f3f1ec; border: 1px solid var(--line); }
  .map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .map .m-land { fill: #f3f1ec; }
  .map .m-farm { fill: #f1efe9; }
  .map .m-grass { fill: #ebede3; }
  .map .m-forest { fill: #dfe3d4; }
  .map .m-res { fill: #e9e5df; }
  .map .m-ind { fill: #e8e1d7; }
  .map .m-city { fill: #ece7e0; }
  .map .m-aero { fill: #e6e2db; }
  .map .m-term { fill: #cfc7bc; }
  .map .m-lot { fill: #f0dfd1; stroke: var(--copper); stroke-width: 1.5; stroke-dasharray: 5 4; }
  .map .m-water { fill: #d3dde1; }
  .map .m-stream, .map .m-river { fill: none; stroke: #bccbd1; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
  .map .m-river { stroke-width: 2.4; }
  .map .m-trees { fill: none; stroke: #d3d9c6; stroke-width: 3; stroke-linecap: round; }
  .map .m-cityline { fill: none; stroke: #b5aa9d; stroke-width: 1.4; stroke-dasharray: 7 5; }
  .map .m-bld { fill: #d9d2c8; }
  .map .m-factory { fill: var(--copper); stroke: #5e3119; stroke-width: 1.5; }
  .map .m-runway { fill: none; stroke: #b3aaa0; stroke-width: 7; stroke-linecap: butt; }
  .map .m-rail { fill: none; stroke: #8f877e; stroke-width: 2.6; }
  .map .m-rail-tie { fill: none; stroke: #f3f1ec; stroke-width: 1.2; stroke-dasharray: 8 8; }
  .map [class$="-case"] { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .map .m-track { fill: none; stroke: #c6bdb1; stroke-width: 1.3; stroke-dasharray: 4 4; stroke-linecap: round; }
  .map .m-svc-case { stroke: #d5cec5; stroke-width: 6; }
  .map .m-minor-case { stroke: #cdc5bb; stroke-width: 10; }
  .map .m-major-case { stroke: #bdb3a7; stroke-width: 13; }
  .map .m-trunk-case { stroke: #9f9488; stroke-width: 17; }
  .map .m-drive-case { stroke: #b58d74; stroke-width: 8; }
  .map .m-svc, .map .m-minor, .map .m-major, .map .m-trunk, .map .m-drive { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
  .map .m-svc { stroke-width: 3.5; }
  .map .m-minor { stroke-width: 7; }
  .map .m-major { stroke-width: 9.5; }
  .map .m-trunk { stroke: #fffaf0; stroke-width: 13; }
  .map .m-drive { stroke-width: 5; }
  .map .m-route { fill: none; stroke: var(--copper); stroke-width: 3.5px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; opacity: 0.92; }
  .map.area .m-minor-case { stroke-width: 4.5; } .map.area .m-minor { stroke-width: 2.6; }
  .map.area .m-major-case { stroke-width: 6.5; } .map.area .m-major { stroke-width: 4; }
  .map.area .m-trunk-case { stroke-width: 9; } .map.area .m-trunk { stroke-width: 6; }
  .map.area .m-rail { stroke-width: 1.8; } .map.area .m-rail-tie { stroke-width: 0.8; stroke-dasharray: 5 5; }
  /* HTML labels, placed in px by the page's script so they keep one size at every width */
  .mlabels { position: absolute; inset: 0; pointer-events: none; }
  .ml { position: absolute; left: 0; top: 0; white-space: nowrap; text-shadow: 0 0 2px #f3f1ec, 0 0 4px #f3f1ec, 0 0 6px #f3f1ec; }
  .ml.card, .ml.shield, .ml.pin, .ml.turn, .ml.dir { text-shadow: none; }
  .ml.place { font: 600 0.62rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: #6f665e; }
  .ml.street { font: italic 400 0.82rem/1 var(--display); color: var(--ink-2); }
  .ml.city { font: 300 clamp(1.4rem, 3vw, 2.2rem)/1 var(--display); color: var(--ink); letter-spacing: 0.02em; }
  .ml.poi, .ml.air { font: 500 0.72rem/1.2 var(--sans); color: var(--ink); display: flex; align-items: center; gap: 0.35rem; }
  .ml.poi::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ink); }
  .ml.shield { font: 600 0.66rem/1 var(--sans); color: #fff; background: #5b524a; padding: 0.22rem 0.36rem; border-radius: 3px; letter-spacing: 0.04em; }
  .ml.dir { font: 600 0.62rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); background: rgba(255,255,255,0.86); padding: 0.28rem 0.42rem; }
  .ml.turn { font: 500 0.72rem/1 var(--sans); color: var(--ink); display: flex; align-items: center; gap: 0.4rem; }
  .ml.turn::after { content: ""; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #fff; border: 2.5px solid var(--copper); flex: none; box-sizing: border-box; }
  .ml.turn span { background: rgba(255,255,255,0.92); padding: 0.2rem 0.35rem; }
  .ml.pin { width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--copper); border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--copper), 0 4px 10px rgba(0,0,0,0.25); }
  .ml.card { transform: none; background: var(--ink); color: #fff; padding: 0.45rem 0.65rem 0.5rem; display: grid; gap: 0.15rem; box-shadow: 0 8px 18px -8px rgba(0,0,0,0.5); }
  .ml.card b { font: 400 1.05rem/1 var(--display); }
  .ml.card small { font: 400 0.68rem/1.2 var(--mono); color: #cfc6bd; }
  @media (max-width: 600px) { .ml.place { display: none; } .ml.card b { font-size: 0.95rem; } .ml.card { padding: 0.35rem 0.5rem 0.4rem; } }
  .map .north { position: absolute; top: 0.8rem; right: 0.8rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; background: rgba(255,255,255,0.9);
    border: 1px solid var(--line); border-radius: 50%; font: 600 0.62rem/1 var(--sans); color: var(--ink); }
  .map .north::before { content: ""; position: absolute; top: 0.18rem; border: 4px solid transparent; border-bottom: 6px solid var(--copper); border-top: 0; }
  .map .scale { position: absolute; left: 0.8rem; bottom: 0.7rem; display: grid; gap: 0.2rem; font: 400 0.66rem/1 var(--mono); color: var(--ink-2); }
  .map .scale i { display: block; height: 0.35rem; border: 1.5px solid var(--ink-2); border-top: 0; }
  .map .osm { position: absolute; right: 0; bottom: 0; background: rgba(255,255,255,0.85); padding: 0.25rem 0.45rem; font: 400 0.64rem/1.2 var(--sans); color: var(--ink-2); text-decoration: none; }
  .map .osm:hover { color: var(--ink); }
  .map .osm:focus-visible { outline-offset: -3px; }

  /* ── Footer ───────────────────────────────────────────── */
  footer.site { background: var(--night); color: var(--on-night); }
  footer.site .cols { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 2rem; padding-block: 3.5rem 2.5rem; }
  footer.site .fh { margin: 0 0 0.7rem; font: 600 0.72rem/1.3 var(--sans); letter-spacing: 0.15em; text-transform: uppercase; }
  footer.site p, footer.site li { margin: 0; font-size: 0.88rem; color: var(--on-night-2); }
  footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
  footer.site a { text-decoration: none; } footer.site a:hover { color: #fff; }
  .legal { border-top: 1px solid #36322e; }
  .legal .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; padding-block: 1.1rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8b827a; }
  .legal a { text-decoration: none; } .legal a:hover { color: #fff; }

  /* ── Models page ──────────────────────────────────────── */
  .crumbs { font: 500 0.7rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); padding-block: 1.3rem; }
  .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--ink); }
  .ftoggle { display: none; }
  .filters { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: center; padding-block: 0.9rem; border-block: 1px solid var(--line); margin-bottom: 2rem; }
  .fgroup { display: flex; align-items: center; gap: 0.6rem; }
  .fgroup > span { font: 500 0.7rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
  .fgroup .chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .chip { font: 500 0.82rem/1 var(--sans); border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 0.5rem 0.78rem; border-radius: 999px; cursor: pointer; }
  .chip:hover { border-color: var(--ink-2); }
  .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .rcount { margin-left: auto; font: 500 0.82rem/1 var(--mono); color: var(--ink-2); display: flex; gap: 1rem; align-items: center; }
  .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 1.5rem; padding-bottom: 2rem; }
  .empty { grid-column: 1 / -1; padding: 3rem 1rem; text-align: center; color: var(--ink-2); }

  /* ── Tub page ─────────────────────────────────────────── */
  .pdp { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4.5rem); padding-bottom: 4rem; }
  /* the photo and its heater versions travel together; the stage shrinks on short screens so both stay in view */
  .gallery { position: sticky; top: calc(var(--hh) + 1rem); align-self: start; display: grid; gap: 1.1rem; min-width: 0; }
  .stage { aspect-ratio: 1; width: min(100%, calc(100vh - var(--hh) - 14rem)); justify-self: center; display: grid; place-items: center; overflow: hidden; }
  .stage img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
  .photo-note { margin: 0.4rem 0 0; text-align: center; font-size: 0.82rem; color: var(--ink-2); }
  .buy { display: grid; align-content: start; gap: 1.15rem; }
  .buy h1 { margin: 0; font: 300 clamp(3rem, 5.5vw, 4.6rem)/1 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
  .buy .sub { margin: 0; font-size: 1.08rem; color: var(--ink-2); max-width: 42ch; }
  .keys { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .keys span { font: 400 0.78rem/1 var(--mono); background: var(--stone); padding: 0.5rem 0.65rem; }
  .cta { display: flex; flex-wrap: wrap; gap: 0.8rem 1.3rem; align-items: center; }
  .buy .btn.ghost { color: var(--ink); border-color: var(--ink); }
  .buy .btn.ghost:hover { background: var(--stone); }
  .already { margin: -0.4rem 0 0; font-size: 0.86rem; color: var(--ink-2); }
  .already a { color: var(--ink); }
  .lede { margin: 0; max-width: 58ch; }
  .family { display: grid; gap: 0.55rem; }
  .family .fl { font: 600 0.7rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
  .fam { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0.5rem; }
  .fam > a, .fam > span { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: center; gap: 0.55rem;
    padding: 0.45rem 0.7rem 0.45rem 0.45rem; border: 1px solid var(--line); text-decoration: none; background: var(--paper); }
  .fam img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
  .fam .t { display: grid; gap: 0.1rem; min-width: 0; }
  .fam > a:hover { border-color: var(--ink-2); }
  .fam b { font: 600 0.82rem/1.2 var(--sans); }
  .fam small { font: 400 0.74rem/1.3 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
  .fam [aria-current] { border-color: var(--ink); background: var(--stone); box-shadow: inset 0 0 0 1px var(--ink); }
  .also { font-size: 0.88rem; color: var(--ink-2); margin: 0; }
  .also a { color: var(--ink); }
  .block { display: grid; gap: 0.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
  .bh { margin: 0; font: 600 0.72rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
  .bh span { font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--ink-2); margin-left: 0.4rem; font-size: 0.86rem; }
  table.specs { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
  table.specs th, table.specs td { text-align: left; padding: 0.55rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
  table.specs th { font-weight: 500; width: 40%; color: var(--ink-2); padding-right: 1rem; }
  .specnote { margin: 0; font-size: 0.8rem; color: var(--ink-3); }
  .sw { display: flex; flex-wrap: wrap; gap: 0.45rem; }
  .sw button { width: 2.3rem; height: 2.3rem; border-radius: 50%; padding: 0; border: 1px solid var(--line); cursor: pointer; overflow: hidden; background: var(--stone); }
  .sw button img { width: 100%; height: 100%; object-fit: cover; }
  .sw button[aria-pressed="true"] { outline: 1.5px solid var(--ink); outline-offset: 2px; }
  .sw button:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
  .shell-view { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.1rem; align-items: center; border: 1px solid var(--line); padding: 0.9rem; }
  .shell-view img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
  .shell-view img.disc { border-radius: 50%; object-fit: cover; mix-blend-mode: normal; width: 80%; margin: 10%; }
  .shell-view p { margin: 0; font-size: 0.86rem; color: var(--ink-2); }
  .clad { display: grid; gap: 0.9rem; }
  .clad h3 { margin: 0 0 0.4rem; font: 600 0.72rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
  .clad ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: 0.6rem; }
  .clad li { display: grid; align-content: start; gap: 0.25rem; font-size: 0.72rem; color: var(--ink-2); }
  .clad li img { width: 100%; aspect-ratio: 1; object-fit: cover; }
  .locked { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: 0.9rem; background: var(--stone); }
  .locked .peek { position: relative; aspect-ratio: 1; overflow: hidden; background: #fff; display: grid; }
  .locked .peek img { width: 100%; height: 100%; object-fit: cover; filter: blur(5px) grayscale(0.4); opacity: 0.75; transform: scale(1.08); }
  .locked .peek.quad { grid-template-columns: 1fr 1fr; }
  .locked .peek.quad img { object-fit: contain; transform: none; }
  .locked .lock { position: absolute; left: 50%; top: 50%; width: 2.4rem; height: 2.4rem; transform: translate(-50%, -50%); padding: 0.5rem;
    background: var(--walnut); stroke: #fff; fill: none; stroke-width: 1.6; border-radius: 50%; }
  .locked b { font: 400 1.3rem/1.2 var(--display); display: block; }
  .locked p { margin: 0.25rem 0 0.6rem; color: var(--ink-2); font-size: 0.92rem; }
  .closer { display: grid; gap: 0.9rem; padding: 1.6rem; background: var(--night); color: var(--on-night); }
  .closer h2 { margin: 0; font: 300 1.9rem/1.1 var(--display); text-wrap: balance; }
  .closer p { margin: 0; color: var(--on-night-2); }
  .closer .btn.ghost { color: #fff; border-color: #fff; }
  .closer .btn:not(.ghost), .story .btn:not(.ghost) { background: #fff; color: var(--ink); border-color: #fff; }
  .closer .btn:not(.ghost):hover, .story .btn:not(.ghost):hover { background: #e9e4de; }
  .closer .btn.ghost:hover { background: rgba(255,255,255,0.1); }
  .related { padding-top: 2.5rem; border-top: 1px solid var(--line); }

  /* ── Privacy and cookies ──────────────────────────────── */
  .doc { max-width: 46rem; padding-bottom: clamp(4rem, 8vw, 7rem); }
  .doc h1 { margin: 0.4rem 0 0.6rem; font: 300 clamp(2.4rem, 5vw, 3.6rem)/1.05 var(--display); }
  .doc .date { font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper); margin: 0 0 2rem; }
  .doc h2 { margin: 2.2rem 0 0.6rem; font: 400 1.35rem/1.2 var(--display); }
  .doc p, .doc li { color: #3d3732; max-width: 65ch; }
  .doc ul { padding-left: 1.2rem; display: grid; gap: 0.35rem; }

  .toast:empty { visibility: hidden; padding: 0; }
  .toast { position: fixed; z-index: 51; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: #fff;
    padding: 0.6rem 0.9rem; font-size: 0.86rem; max-width: calc(100% - 2rem); }

  @media (max-width: 1080px) {
    .finale-words { grid-column: 1 / span 6; }
    .finale-photo { grid-column: 7 / span 6; }
    .lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lineup.rel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pdp { grid-template-columns: minmax(0, 1fr); }
    .gallery { position: static; max-width: 40rem; width: 100%; margin-inline: auto; }
    .stage { width: 100%; }
    .trade-facts, .partner-wrap, .mapbox, .addr { grid-column: 1 / -1; }
    .addr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 2rem; }
    .addr > .cta, .addr > .drive { grid-column: 1 / -1; }
    footer.site .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .browser, .app-copy, .covers, .kit-copy, .sep-col.shells, .sep-col.parts { grid-column: 1 / -1; }
    .heaters { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
  }
  /* the header folds into the menu button wherever its links would wrap to a second row: every language needs
     1230–1270 px for one row (2026-10-28, five languages) */
  @media (max-width: 1279px) {
    :root { --hh: 4.4rem; }
    header.site .wrap { grid-template-columns: auto 1fr auto; gap: 0.8rem; }
    .menu-btn { display: grid; order: 3; }
    .acts { justify-self: end; gap: 0.6rem; }
    .acts .login { display: none; }
    .nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; gap: 0; background: var(--paper);
      border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px -18px rgba(0,0,0,0.25); padding: 0.4rem var(--gutter) 1rem; }
    .nav.open { display: flex; }
    .nav a { padding-block: 0.95rem; border-bottom: 1px solid var(--line); font-size: 0.8rem; }
    .nav a[aria-current] { border-bottom-color: var(--line); color: var(--copper); }
    .nav .nav-login { display: block; border-bottom: 0; color: var(--ink-2); }
  }
  @media (max-width: 820px) {
    .trade-grid, .find-grid, .app-grid, .kit, .sep-grid, .pl, .beat, .story .intro, .manual-grid { grid-template-columns: minmax(0, 1fr); }
    .manual-copy, .manual-pages { grid-column: 1 / -1; }
    .manual-pages { order: -1; width: 100%; max-width: 30rem; justify-self: center; }
    .hero::after { background: linear-gradient(0deg, rgba(18,13,10,0.82) 0%, rgba(18,13,10,0.5) 55%, rgba(18,13,10,0.2) 100%); }
    .tub b { font-size: 1.15rem; text-wrap: balance; }
    .mats { grid-template-columns: minmax(0, 1fr); }
    .mat .frame { aspect-ratio: 4 / 3; }
    .shellrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .steps { grid-template-columns: minmax(0, 1fr); }
    .factsbar ul { justify-content: flex-start; }
    .beat .media, .beat .words, .beat.flip .media, .beat.flip .words, .story .intro > div, .pl .visual, .pl .copy { grid-column: 1 / -1; grid-row: auto; }
    .beat .words, .beat.flip .words { padding: 0; }
    .finale { grid-template-columns: minmax(0, 1fr); }
    .finale-photo, .finale-words { grid-column: 1 / -1; grid-row: auto; }
    .finale-words { padding: 0; }
    .inset { right: 0.6rem; bottom: -1.5rem; width: 38%; }
    .grid, .lineup, .lineup.rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .two { grid-template-columns: minmax(0, 1fr); }
    .ftoggle { display: inline-flex; align-items: center; gap: 0.5rem; font: 600 0.78rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
      border: 1px solid var(--ink); background: var(--paper); color: var(--ink); padding: 0.75rem 1rem; cursor: pointer; margin-bottom: 1rem; }
    .ftoggle b { font: 500 0.78rem/1 var(--mono); color: var(--copper); letter-spacing: 0; text-transform: none; }
    .filters { display: none; }
    .filters.open { display: flex; }
    .rcount { margin-left: 0; width: 100%; }
    .fgroup { align-items: start; } .fgroup > span { min-width: 4.4rem; padding-top: 0.75rem; }
    .addr { grid-template-columns: minmax(0, 1fr); }
    .map { aspect-ratio: 4 / 3; }
  }
  @media (max-width: 520px) {
    .acts .btn { padding: 0.75rem 0.8rem; font-size: 0.72rem; }
    .acts .langs { display: none; }
    .nav .langs { display: flex; gap: 0.5rem; padding-top: 0.9rem; }
    .nav .langs .lang { font: 500 0.74rem/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-2); text-decoration: none;
      padding: 0.7rem 1rem; border: 1px solid var(--line); border-radius: 999px; }
    .logo { width: 104px; }
    footer.site .cols { grid-template-columns: minmax(0, 1fr); }
    .shell-view { grid-template-columns: 7.5rem minmax(0, 1fr); }
    .locked { grid-template-columns: 5.5rem minmax(0, 1fr); }
    .fam > a, .fam > span { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 0.5rem 0.35rem 0.6rem; gap: 0.3rem; }
    .fam img { width: 3.6rem; }
    .facts { grid-template-columns: minmax(0, 1fr); }
    .facts dt { padding-bottom: 0; border-top: 1px solid #dcd8d2; }
    .facts dd { border-top: 0; padding-top: 0.15rem; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }