:root {
    --white: #F7F5F0;   /* off-white page and card background (was pure white) */
    --bg: #EFECE6;      /* soft section background, warmed to sit with the off-white */
    --grey: #E7E4DD;
    --line: #DAD6CE;
    --ink: #111111;
    --muted: #5C5C64;   /* was #6A6A72: too faint on the beige sections for accessibility (needs 4.5:1) */
    --maroon: #C9A227;
    --maroon-dark: #AD8A1C;
    --maroon-tint: #E7E4DD;
    --radius: 10px;
    --shadow: 0 18px 50px rgba(27, 27, 31, 0.10);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Inter', system-ui, sans-serif; font-weight: 400; color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  h1, h2, h3 { font-family: 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif; font-weight: 300; line-height: 1; letter-spacing: 0.02em;   /* League Gothic is narrow, so heading sizes below run ~45% larger than they did with Oswald */ text-transform: uppercase; color: var(--ink); }
  h1 { font-weight: 200; }
  .wrap { width: min(1180px, 100% - 32px); margin: 0 auto; }
  /* Safety net: nothing can make the page scroll sideways on phones (clip keeps the sticky header working) */
  html, body { overflow-x: clip; }
  /* League Gothic comes in one weight: don't let browsers fake bold or light versions of it */
  html { font-synthesis: none; }

  /* "The Collection" wordmark: the letters are see-through and the area around them is carbon.
     multiply keeps the white letters showing whatever is behind them, on any light background. */
  .tc { display: inline-block; padding: 0.1em 0.42em 0.12em; border-radius: 3px; line-height: 1.15; white-space: nowrap; vertical-align: baseline;
        background-color: #19191b; color: #fff; mix-blend-mode: multiply; text-decoration: none; font-weight: 700;
        background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 4px),
                          repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 4px); }
  a:hover > .tc, a:focus-visible > .tc { background-color: #2a2a2d; }
  .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
  section { padding: 96px 0; }
  .section-head { max-width: 640px; margin-bottom: 48px; }
  .section-head h2, .section-head h1 { font-size: clamp(46px, 5.8vw, 67px); margin: 10px 0 14px; }
  .section-head p { color: var(--muted); font-size: 17px; }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 28px; border-radius: 8px; font: 600 15px 'Inter', sans-serif; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
  .btn-primary { background: var(--maroon); color: var(--ink); }
  .btn-primary:hover { background: var(--maroon-dark); }
  .btn-ghost { border-color: var(--line); color: var(--ink); background: var(--white); }
  .btn-ghost:hover { border-color: var(--ink); }
  /* Print quality examples (Print & frame section) + full-screen zoom viewer */
  .pq-wrap { margin-top: 56px; }
  .pq-head { margin-bottom: 20px; max-width: 640px; }
  .pq-head h3 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 8px; }
  .pq-head p { color: var(--muted); }
  .pq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  @media (max-width: 700px) { .pq-grid { grid-template-columns: minmax(0, 1fr); } }
  .pq-card { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; text-align: left; font: inherit; color: inherit; cursor: zoom-in; transition: box-shadow .25s, transform .25s; }
  .pq-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
  .pq-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .pq-img { position: relative; display: block; aspect-ratio: 4797 / 3392; background: var(--grey); }
  .pq-img img { width: 100%; height: 100%; object-fit: cover; }
  .pq-open { position: absolute; right: 12px; bottom: 12px; padding: 7px 12px; border-radius: 999px; background: rgba(17,17,17,.78); color: #fff; font-size: 13px; font-weight: 600; }
  .pq-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 14px 16px; font-size: 14px; }
  .pq-cap span { color: var(--muted); }
  #pv { position: fixed; inset: 0; z-index: 1000; background: #0c0c0d; display: none; touch-action: none; user-select: none; -webkit-user-select: none; }
  #pv.open { display: block; }
  #pv-stage { position: absolute; inset: 0; overflow: hidden; cursor: zoom-in; }
  #pv-stage.zoomed { cursor: grab; }
  #pv-stage.dragging { cursor: grabbing; }
  #pv-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; will-change: transform; -webkit-user-drag: none; }
  #pv .pv-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #fff; background: linear-gradient(rgba(0,0,0,.6), transparent); pointer-events: none; }
  #pv .pv-bar > * { pointer-events: auto; }
  #pv .pv-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #pv .pv-title span { font-weight: 400; opacity: .7; }
  #pv button.pv-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font: 600 20px/1 'Inter', sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  #pv button.pv-btn:hover { background: rgba(255,255,255,.26); }
  #pv .pv-nav { position: absolute; top: 50%; transform: translateY(-50%); }
  #pv .pv-prev { left: 12px; } #pv .pv-next { right: 12px; }
  #pv .pv-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 13px; white-space: nowrap; pointer-events: none; transition: opacity .4s; }
  #pv .pv-hint.hide { opacity: 0; }

  /* Header */
  header { position: sticky; top: 0; z-index: 50; background: rgba(247,245,240,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--grey); }
  .nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
  /* Top bar spans the full page: logo at the far left, menu at the far right. Change 32px to move them in or out from the edges. */
  header .wrap.nav { width: auto; margin: 0; padding: 0 clamp(16px, 2.5vw, 32px); }
  .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  /* Header logo: the logo file is a black car with see-through letters, used as a mask so the car can be any colour.
     Black on light backgrounds; add .on-dark for white on dark ones.
     Set the height (desktop here, phones below); the width follows the logo's 700:189 shape. Keep it the same as the other pages. */
  .logo-mark { display: block; height: 36px; aspect-ratio: 700 / 189; background: var(--ink);
    -webkit-mask: url(/assets/objects/carbonography-logo-sm.webp) center / contain no-repeat; mask: url(/assets/objects/carbonography-logo-sm.webp) center / contain no-repeat; }
  .logo-mark.on-dark { background: #FFFFFF; }
  @media (max-width: 700px) { .logo-mark { height: 28px; } }
  .logo-img { display: block; height: auto; }
  .brand-name { font-family: 'Anton', 'League Gothic', 'Arial Narrow', sans-serif; font-weight: 400; font-synthesis: none; font-size: 27px; letter-spacing: 0.14em; text-transform: uppercase; }
  .brand-name span { font-weight: 400; }
  .brand-name span { color: var(--ink); }
  .nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
  .nav-links a { text-decoration: none; font-size: 14px; font-weight: 600; color: var(--muted); }   /* same size as "My account" */
  /* Menu items and links are in capitals, slightly spaced (also .auth-btn, .footer-links and .menu-toggle) */
  .nav-links a, .nav-links .auth-btn, .menu-toggle, .footer-links a, .spec-link { text-transform: uppercase; letter-spacing: 0.06em; }
  .nav-links .auth-btn { font-size: 14px; }
  .nav-links a:hover { color: var(--ink); }
  .spec-link { color: var(--ink); font-weight: 600; white-space: nowrap; }
  @media (max-width: 700px) { .spec-link { white-space: normal; } }   /* in capitals the longer links don't fit a phone on one line */
  .nav-links .btn { padding: 12px 24px; font-size: 14px; color: var(--ink); }
  /* Header "Shop" menu (site/nav.js) */
  .shop-item { position: relative; }
  .shop-btn { background: none; border: 0; padding: 0; font: 600 14px 'Inter', sans-serif; color: var(--muted); cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; }
  .shop-btn::after { content: ''; display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; border-bottom-width: 0; vertical-align: 2px; }
  .shop-btn:hover, .shop-item.open .shop-btn { color: var(--ink); }
  .shop-menu { display: none; position: absolute; left: 50%; top: calc(100% + 18px); transform: translateX(-50%); min-width: 210px; list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 0; z-index: 50; }
  .shop-item.open .shop-menu { display: block; }
  .shop-menu a { display: block; padding: 10px 20px; white-space: nowrap; }
  .shop-menu a[aria-current="page"] { color: var(--ink); }
  .menu-toggle { display: none; background: none; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font: 600 16px 'Inter'; cursor: pointer; }
  @media (max-width: 1380px) {   /* menu folds into the Menu button below this width (1000px, then 1180px for Studio sets, 1380px for Darkroom) */
    .menu-toggle { display: block; }
    .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--white); border-bottom: 1px solid var(--grey); padding: 8px 16px 16px; }
    .nav-links.open { display: flex; }
    .nav-links li { width: 100%; }
    .nav-links a { display: block; padding: 12px 0; }
    .nav-links .btn { display: flex; margin-top: 8px; }
    .shop-btn { display: block; width: 100%; padding: 12px 0; text-align: left; cursor: default; color: var(--ink); }
    .shop-btn::after { display: none; }
    .shop-menu { display: block; position: static; transform: none; min-width: 0; background: none; border: 0; box-shadow: none; padding: 0 0 4px 16px; }
    .shop-menu a { padding: 10px 0; }
  }

  /* Hero */
  /* Hero: full-width room photo with the rotating print on the wall.
     The photo shows at its own shape, so the print's % position always lines up with the same spot in the room. */
  .hero { padding: 0; background: var(--grey); }
  .hero-stage { position: relative; width: 100%; line-height: 0; }
  .hero-room { display: block; width: 100%; height: auto; }
  /* The print: move it with left (centre, % across) and bottom/height (% of the photo's height) */
  .hero-rotator { position: absolute; left: 42%; bottom: 40%; height: 50%; max-width: 50%; aspect-ratio: 1 / 1.414; transform: translateX(-50%); background: #151515; padding: clamp(4px, 0.69%, 12.5px); box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 4px 10px rgba(0,0,0,0.2); }
  .hero-rotator .hero-slide { position: absolute; inset: clamp(4px, 0.69%, 12.5px); width: calc(100% - 2 * clamp(4px, 0.69%, 12.5px)); height: calc(100% - 2 * clamp(4px, 0.69%, 12.5px)); object-fit: cover; opacity: 0; transition: opacity 2.5s ease-in-out; }
  .hero-rotator .hero-slide.on { opacity: 1; }
  /* Lounge (home office) poster: thicker frame. Change --frame to adjust */
  #hero-scene { --frame: clamp(6px, 1.05%, 19px); padding: var(--frame); }
  #hero-scene .hero-slide { inset: var(--frame); width: calc(100% - 2 * var(--frame)); height: calc(100% - 2 * var(--frame)); }
  /* Warehouse (astronaut) poster: thicker frame. Change --frame to adjust */
  #warehouse-scene { --frame: clamp(6px, 1.05%, 19px); padding: var(--frame); }
  #warehouse-scene .hero-slide { inset: var(--frame); width: calc(100% - 2 * var(--frame)); height: calc(100% - 2 * var(--frame)); }
  /* Landscape print (warehouse section): sized by width; move it with left / bottom, resize with width */
  .hero-rotator.landscape { left: 73%; bottom: 51%; width: 28.8%; height: auto; max-width: none; aspect-ratio: 1.3 / 1 !important; }  /* lower the first number for a taller print */

  /* Intro sequence over the warehouse photo: each step fills the full width, then the whole thing fades to reveal the photo */
  .intro-seq { position: absolute; inset: 0; z-index: 5; background: transparent; transition: opacity 1.8s ease; }   /* the hero photo shows through until the first video plays */
  .intro-seq.started { background: #000; }
  .intro-seq.done { opacity: 0; pointer-events: none; }
  .intro-seq > video, .intro-seq > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
  .intro-seq > .on { opacity: 1; }
  .hero-stage.video-playing .hero-rotator { opacity: 0; }
  /* Until the first intro video starts, the top section stays dark (no still photo or poster flashing up first).
     The script removes intro-pending; if it never does, the photo shows after 10 seconds anyway. */
  #top .hero-stage.intro-pending .hero-rotator { opacity: 0; }
  #top .hero-stage.intro-pending .hero-room { opacity: 0; animation: intro-fallback 0.6s 10s forwards; }
  @keyframes intro-fallback { to { opacity: 1; } }
  .hero-stage .hero-rotator { transition: opacity 1.8s ease; }
  /* During a still marked posters: true, the rotating print sits on top of it.
     It uses the same spot as on the warehouse photo; adjust left / bottom / width here if the still's wall is elsewhere. */
  .hero-stage.show-posters .hero-rotator { opacity: 1; z-index: 6; transition-duration: 0.6s; }
  .hero-stage.show-posters .hero-rotator.landscape { left: 73%; bottom: 51%; width: 28.8%; }


  /* Welcome panels: thick white text on the left-middle of the warehouse hero, building up in sections.
     Edit the wording in the HTML; the sizes panel fills its prices from SITE.sizes. Timing: WELCOME_MS in the script. */
  #top { position: relative; }
  /* Top section as a 16:9 screen with a border in the page colour round it: smaller, so the videos stay sharp.
     Width: never wider than 1600px, and never taller than the window allows. Change 1600px / 24px to adjust.
     container-type lets the welcome text sizes (cqw) scale with this box. */
  #top { width: min(100% - 48px, 1600px, calc((100vh - 150px) * 16 / 9)); margin: 24px auto; background: #000; container-type: inline-size; }
  @media (max-width: 700px) { #top { width: calc(100% - 24px); margin: 12px auto; } }
  /* G63 video: its own section straight under the top one, same size and border */
  #g63 { width: min(100% - 48px, 1600px, calc((100vh - 150px) * 16 / 9)); margin: 0 auto 24px; padding: 0; background: #000; }
  @media (max-width: 700px) { #g63 { width: calc(100% - 24px); margin: 0 auto 12px; } }
  .g63-stage { aspect-ratio: 16 / 9; }
  .g63-stage video { display: block; width: 100%; height: 100%; object-fit: cover; }
  #top .hero-stage { aspect-ratio: 16 / 9; overflow: hidden; }
  #top .hero-room { width: 100%; height: 100%; object-fit: cover; }
  /* If the warehouse photo can't load, keep the section a 16:9 dark panel so the videos, posters and welcome text still fit */
  #top .hero-stage.no-photo { aspect-ratio: 16 / 9; background: #111; }
  #top .hero-stage.no-photo .hero-room { display: none; }
  /* Slight dimming over the whole top section (photo, videos and stills) so the white text stands out.
     Raise or lower 0.28 to change how dark it gets. The poster and text sit above it. */
  #top .hero-stage::after { content: ''; position: absolute; inset: 0; z-index: 5; background: rgba(0,0,0,0.28); pointer-events: none; }
  /* Home office (assets/rooms/home-office.webp): a landscape print (assets/cars/landscape/) hangs on the brick above
     the three monitors. Move it with left (centre) / bottom, resize with width; all % of the photo. */
  /* The photo is shot at an angle (the wall runs away to the right), so the print turns the same way:
     one 3D view for the whole photo, centre of the lens in the middle. Measured from the brick courses above the
     monitors: they meet at eye level 38.3% down, about 2.5 photo-widths to the right, which with the 60cqw perspective
     is an 18.65deg turn (nudged so the bottom edge follows the courses as closely as the top). Change --wall-turn and the 38.3% together only if the photo changes. */
  #lounge { container-type: inline-size; --wall-turn: 18.65deg; }
  #lounge .hero-stage { overflow: hidden; background: #1a1612; perspective: 60cqw; perspective-origin: 50% 38.3%; }
  #lounge #hero-scene { left: 45%; bottom: 70.36%; width: 19.5%; height: auto; max-width: none; z-index: 2; transform: translateX(-50%) rotateY(var(--wall-turn)); }
  #hero-scene { box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 4px 10px rgba(0,0,0,0.25); }   /* plain shadow, no spotlight or sheen */

  /* COLOUR POP section: robot-car photo with a frame on the left showing /assets/colour-pop/ (landscape and portrait mixed).
     The frame reshapes to each picture. Move it with left / top (centre point, % of the photo).
     Size limits: POP_MAX_W / POP_MAX_H in the script (share of the photo's width / height). */
  #colour-pop .hero-stage::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,0.18); pointer-events: none; }
  /* The frame: dark oak moulding (four mitred pieces with real grain direction) around a thin black rabbet.
     --fw = moulding width and --lip = rabbet, both set by the script from the print's size (POP_OAK). */
  .pop-frame { --fw: 16px; --lip: 3px; position: absolute; left: 40%; top: 36%; transform: translate(-50%, -50%); z-index: 2; box-sizing: content-box;
    width: 28%; aspect-ratio: 1 / 1.414; padding: calc(var(--fw) + var(--lip)); background: transparent;
    box-shadow: 0 22px 48px rgba(0,0,0,0.5), 0 6px 14px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.6);
    transition: width 0.9s ease, height 0.9s ease;
    --grain-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2400' height='2400'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.42' stitchTiles='stitch' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.035 0 0 0 0 0.02 1.7 0 0 0 -0.62'/%3E%3C/filter%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.42' stitchTiles='stitch' numOctaves='3' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0.40 0 0 0 0 0.26 0 0 0 0 0.15 0 1.3 0 0 -0.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
    --grain-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2400' height='2400'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42 0.006' stitchTiles='stitch' numOctaves='4' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.035 0 0 0 0 0.02 1.7 0 0 0 -0.62'/%3E%3C/filter%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42 0.006' stitchTiles='stitch' numOctaves='3' seed='13'/%3E%3CfeColorMatrix values='0 0 0 0 0.40 0 0 0 0 0.26 0 0 0 0 0.15 0 1.3 0 0 -0.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"); }
  .pop-frame.sized { aspect-ratio: auto; }
  .pop-frame::before { content: ''; position: absolute; left: -45%; right: -45%; top: -60%; bottom: -55%; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 50% 50% at 50% 45%, rgba(255,244,222,0.32) 0%, rgba(255,240,215,0.12) 45%, rgba(255,240,215,0) 72%); }
  /* Glass sheen + the shadow the moulding casts onto the print */
  .pop-frame::after { content: ''; position: absolute; inset: var(--fw); z-index: 3; pointer-events: none;
    box-shadow: inset 0 3px 7px rgba(0,0,0,0.65), inset 2px 0 5px rgba(0,0,0,0.4), inset -1px -1px 3px rgba(0,0,0,0.35);
    background: linear-gradient(160deg, rgba(255,248,232,0.16) 0%, rgba(255,248,232,0.04) 34%, rgba(255,248,232,0) 52%); }
  .pop-rabbet { position: absolute; inset: var(--fw); background: #0b0a09; z-index: 0; }
  .oak { position: absolute; z-index: 1; background-color: #3a2617; background-size: 2400px 2400px; }
  .oak::after { content: ''; position: absolute; inset: 0; }   /* profile shading: rounded outer edge, step down to the rabbet */
  .oak-t { left: 0; right: 0; top: 0; height: var(--fw); clip-path: polygon(0 0, 100% 0, calc(100% - var(--fw)) 100%, var(--fw) 100%);
    background-image: linear-gradient(to bottom, rgba(255,226,190,0.16) 0%, rgba(255,226,190,0.05) 18%, rgba(0,0,0,0) 45%, rgba(255,226,190,0.06) 70%, rgba(0,0,0,0.45) 100%), var(--grain-h); background-color: #34210f; }
  .oak-b { left: 0; right: 0; bottom: 0; height: var(--fw); clip-path: polygon(var(--fw) 0, calc(100% - var(--fw)) 0, 100% 100%, 0 100%);
    background-image: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 25%, rgba(0,0,0,0.1) 55%, rgba(255,226,190,0.14) 82%, rgba(255,226,190,0.04) 100%), var(--grain-h); background-color: #26180c; background-position: 130px 60px; }
  .oak-l { top: 0; bottom: 0; left: 0; width: var(--fw); clip-path: polygon(0 0, 100% var(--fw), 100% calc(100% - var(--fw)), 0 100%);
    background-image: linear-gradient(to right, rgba(255,226,190,0.20) 0%, rgba(255,226,190,0.05) 20%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.12) 70%, rgba(0,0,0,0.5) 100%), var(--grain-v); background-color: #2f1d0e; background-position: 40px 210px; }
  .oak-r { top: 0; bottom: 0; right: 0; width: var(--fw); clip-path: polygon(0 var(--fw), 100% 0, 100% 100%, 0 calc(100% - var(--fw)));
    background-image: linear-gradient(to left, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 22%, rgba(0,0,0,0.12) 50%, rgba(255,226,190,0.10) 80%, rgba(0,0,0,0.2) 100%), var(--grain-v); background-color: #24170b; background-position: 300px 90px; }
  /* Thin bright line where each mitre meets: the joint catches the light */
  .oak-t::after { background: linear-gradient(to bottom, rgba(255,230,200,0.22), rgba(255,230,200,0) 2px); }
  .pop-frame .pop-slide { position: absolute; z-index: 2; inset: calc(var(--fw) + var(--lip)); width: calc(100% - 2 * (var(--fw) + var(--lip))); height: calc(100% - 2 * (var(--fw) + var(--lip))); object-fit: cover; opacity: 0; transition: opacity 0.8s ease-in-out; }
  .pop-frame .pop-slide.on { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .pop-frame, .pop-frame .pop-slide { transition: none; } }
  /* Black strip under the colour-pop photo */
  .pop-strip { background: #000; color: #fff; text-align: center; padding: clamp(28px, 4vw, 64px) 24px; line-height: 1.2; }
  .pop-strip h2 { font-family: 'League Gothic', 'Arial Narrow', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; color: #fff;
    font-size: clamp(40px, 5.8vw, 87px); line-height: 1; margin: 0 0 0.35em; }
  .pop-strip p { font-family: Inter, sans-serif; font-weight: 300; color: rgba(255,255,255,0.85); font-size: clamp(16px, 1.6vw, 24px); margin: 0; }
  /* If the colour-pop images are missing, hide the frame (the room photo hides the whole section itself); notes go to the console only */
  .pop-frame.empty { display: none; }
  .welcome { position: absolute; left: 0; top: 0; bottom: 0; width: 57%; z-index: 7; display: flex; align-items: flex-start;   /* stops just short of the poster (its left edge is at 58.6%) */
    padding: 5.5% 0 0 clamp(20px, 5cqw, 80px); pointer-events: none;   /* distance from the top of the photo: lower the 5.5% to raise the text */
    background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.38) 55%, rgba(0,0,0,0) 100%); }
  .welcome-inner { position: relative; width: 100%; max-width: none; pointer-events: auto; }
  .welcome-panels { display: grid; grid-template-columns: minmax(0, 1fr); }
  .welcome-panel { grid-area: 1 / 1; color: #F7F5F0; opacity: 0; transform: translateX(-48px); visibility: hidden;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0.7s;
    text-shadow: 0 2px 14px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.5); }
  .welcome-panel.on { opacity: 1; transform: none; visibility: visible; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1), visibility 0s; }
  .welcome-panel.out { opacity: 0; transform: translateX(32px); }
  .welcome-eyebrow { display: block; font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: clamp(15px, 1.44cqw, 22px); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(247,245,240,0.8); margin-bottom: 12px; }
  .welcome-panel h2 { color: #F7F5F0; font-family: 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif; font-weight: 400; font-size: clamp(52px, 6.6cqw, 128px); line-height: 0.95; letter-spacing: 0.02em; margin: 0 0 18px; }
  .welcome-panel p { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: clamp(21px, 2.28cqw, 35px); line-height: 1.4; margin: 0; max-width: 30em; }
  /* The CARBONOGRAPHY word on the first panel: 40% bigger than the other headings */
  /* Wordmark is set in Anton everywhere (25 Oct 2026). Anton is ~30% wider than League Gothic, so its sizes are ~0.765× the old ones */
  .welcome-panel h2.welcome-brand { font-family: 'Anton', 'League Gothic', 'Arial Narrow', sans-serif; font-weight: 400; font-synthesis: none; font-size: min(199px, 7.57cqw); line-height: 0.95; letter-spacing: 0.01em; white-space: nowrap; }   /* huge, but stops before the poster */
  /* Tagline under the big CARBONOGRAPHY word: rises in just after the word arrives.
     The script sizes it so it spans exactly the width of CARBONOGRAPHY. */
  .welcome-panel p.welcome-tagline { font-weight: 800; font-size: 24px; letter-spacing: 0.3em; text-transform: uppercase; line-height: 1.1; margin: 10px 0 0; white-space: nowrap; max-width: none; opacity: 0; transform: translateY(14px); }
  .welcome-panel p.welcome-tagline span { display: inline-block; margin-right: -0.3em; }   /* cancels the spacing after the last letter */
  .welcome-panel.on p.welcome-tagline { animation: tagline-in 0.8s cubic-bezier(.2,.8,.2,1) 0.9s forwards; }
  @keyframes tagline-in { to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .welcome-panel.on p.welcome-tagline { animation: none; opacity: 1; transform: none; } }
  .welcome-sizes { list-style: none; display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 6px 28px; margin: 0 0 14px; padding: 0; }
  .welcome-sizes li { font-family: 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif; font-weight: 400; font-size: clamp(38px, 4.2cqw, 76px); line-height: 1; letter-spacing: 0.03em; }
  .welcome-sizes li small { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 0.55em; opacity: 0.85; margin-left: 6px; letter-spacing: 0.02em; }
  .welcome-dots { display: flex; gap: 8px; margin-top: 26px; }
  .welcome-dots:empty { display: none; }
  .welcome-dots button { width: 26px; height: 4px; border: 0; padding: 0; border-radius: 2px; background: rgba(247,245,240,0.35); cursor: pointer; transition: background 0.3s, width 0.3s; }
  .welcome-dots button.on { background: #F7F5F0; width: 42px; }
  /* CARBONOGRAPHY is always slightly see-through. Change 0.85 to adjust (1 = solid). */
  .welcome-inner { opacity: 0.85; }
  .welcome.switching { opacity: 0; }
  /* Bottom-right version, used while the robot video plays (desktop and tablet) */
  @media (min-width: 701px) {
    .welcome.corner { left: auto; right: 0; top: auto; bottom: 0; width: auto; align-items: flex-end; justify-content: flex-end;
      padding: 0 clamp(20px, 4cqw, 72px) clamp(40px, 9cqw, 220px) 0; }   /* 3rd value = gap below CARBONOGRAPHY during the robot video: raise 9cqw to lift it higher */
    .welcome.corner::before { background: radial-gradient(ellipse 120% 120% at 100% 100%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 80%); }
    .welcome.corner .welcome-panel h2.welcome-brand { font-size: min(153px, 5.35cqw); }
  }
  /* A step with hideText: the wording fades out completely */
  .welcome { transition: opacity 0.9s ease; }
  .welcome.text-off { opacity: 0; pointer-events: none; }
  /* While CARBONOGRAPHY is away at the right edge, the dark fade behind its normal place fades out */
  @media (min-width: 701px) {
    .welcome { background: none; }
    .welcome::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: opacity 6s ease;
      background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.38) 55%, rgba(0,0,0,0) 100%); }
    .welcome.away::before { opacity: 0; }
    .welcome-inner { transform-origin: 50% 50%; will-change: transform; }
  }
  /* Tablets: a little wider so the text has room */
  @media (max-width: 1100px) { .welcome { padding-top: 4%; } }
  /* Phones: the photo is too short to hold the text, so the panels sit in a black band just under it */
  @media (max-width: 700px) {
    .welcome { position: static; width: auto; background: #0d0d0d; padding: 30px 20px 26px !important; }
    .welcome-inner { max-width: none; }
    .welcome-panel { text-shadow: none; }
    .welcome-panel { min-width: 0; }
    .welcome-panel h2 { font-size: 54px; }
    .welcome-panel h2.welcome-brand { font-size: min(13cqw, 69px); }
    .welcome-panel p { font-size: 19px; max-width: none; }
    .welcome-sizes li { font-size: 40px; }
  }
  @media (prefers-reduced-motion: reduce) { .welcome-panel, .welcome-panel.on { transition: opacity 0.3s ease, visibility 0s; transform: none; } }


  /* Intro text, below the photo */
  .hero-intro { background: var(--bg); padding: 72px 0 80px; }   /* same soft background as Make it yours */
  .hero-panel { max-width: 820px; text-align: center; }
  .hero h1, .hero-intro h1 { font-size: clamp(49px, 6.67vw, 87px); margin: 14px 0 18px; line-height: 1.06; }
  .hero-intro p.lead { font-size: 18px; color: var(--muted); max-width: 640px; margin: 0 auto 30px; }
  .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
  .hero-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 24px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
  .hero-points div { font-size: 13px; color: var(--muted); }
  .hero-points strong { display: block; font-size: 15px; color: var(--ink); }
  @media (max-width: 700px) { .hero-intro { padding: 48px 0 56px; } .hero-points { grid-template-columns: 1fr 1fr; } }
  /* Intro on the left, How it works on the right, both larger. Under 1100px wide they stack. */
  .intro-split { padding: clamp(64px, 7vw, 120px) 0; }
  .intro-split-wrap { width: min(1560px, 100% - 2 * clamp(16px, 4vw, 64px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 5vw, 96px); align-items: start; }
  .intro-split .intro-left { max-width: none; text-align: left; }
  .intro-split .eyebrow { font-size: 14px; }
  .intro-split h1 { font-size: clamp(58px, 6.38vw, 110px); margin: 16px 0 22px; }
  .intro-split .intro-left p.lead { font-size: clamp(18px, 1.35vw, 22px); line-height: 1.6; max-width: 640px; margin: 0 0 34px; }
  .intro-split .hero-actions { justify-content: flex-start; }
  #real-walls[hidden] { display: none; }
  #real-walls .walls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 24px; }
  #real-walls figure { margin: 0; }
  #real-walls img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--grey); }
  #real-walls figcaption { margin-top: 12px; font-size: 15px; color: var(--muted); }
  #real-walls figcaption strong { display: block; color: var(--ink); font-size: 16px; }
  .hero-price { margin: 18px 0 0; font-size: clamp(15px, 1.1vw, 17px); color: var(--muted); }
  .hero-price strong { color: var(--ink); }
  .intro-split .hero-actions .btn { font-size: 17px; padding: 17px 30px; }
  .intro-split .hero-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; margin-top: 48px; padding-top: 32px; }
  .intro-split .hero-points div { font-size: 15px; }
  .intro-split .hero-points strong { font-size: 19px; margin-bottom: 2px; }
  .intro-split .intro-right { scroll-margin-top: 90px; }
  .intro-split .section-head { max-width: none; margin-bottom: 32px; }
  .intro-split .section-head h2 { font-size: clamp(49px, 4.93vw, 84px); }
  .intro-split .section-head p { font-size: clamp(17px, 1.25vw, 20px); }
  .intro-split .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .intro-split .step { padding: 28px 26px; }
  .intro-split .step h3 { font-size: clamp(32px, 2.61vw, 41px); }
  .intro-split .step p { font-size: clamp(15px, 1.1vw, 17px); }
  @media (max-width: 1100px) { .intro-split-wrap { grid-template-columns: minmax(0, 1fr); } .intro-split .intro-right { padding-top: 16px; border-top: 1px solid var(--line); } }
  @media (max-width: 560px) { .intro-split .steps { grid-template-columns: minmax(0, 1fr); } .intro-split .hero-actions .btn { flex: 1 1 100%; } }


  /* Framed poster mockup (used in hero and order preview) */
  .wall { background: var(--grey); border-radius: 18px; padding: 48px; display: flex; align-items: center; justify-content: center; min-height: 520px; position: relative; overflow: hidden; }
  .wall::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.04)); }
  .frame { --frame: #151515; background: var(--frame); padding: 14px; box-shadow: 0 30px 60px rgba(0,0,0,0.22), 0 6px 14px rgba(0,0,0,0.12); position: relative; z-index: 1; transition: background .3s; }
  .frame.portrait { width: min(320px, 70vw); }
  .frame.landscape { width: min(440px, 80vw); }
  .frame.white { --frame: #F4F4F4; box-shadow: 0 30px 60px rgba(0,0,0,0.16), 0 0 0 1px #E2E2E2; }
  .frame.oak { --frame: linear-gradient(135deg, #C79A6B, #A97A4C 60%, #C29264); }
  .poster { position: relative; background: #F7F5F0; overflow: hidden; }
  /* --- Realistic frame on the layout preview: bevelled moulding, inner lip, glass sheen, wall shadow --- */
  #pv-frame { padding: 12px; border-radius: 1px;
    background: linear-gradient(180deg, #2b2b2d 0%, #121213 18%, #0b0b0c 82%, #1d1d1f 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16), inset 1px 0 0 rgba(255,255,255,.06), inset -1px 0 0 rgba(0,0,0,.6), inset 0 -1px 0 rgba(0,0,0,.7),
      0 1px 1px rgba(0,0,0,.25), 0 6px 10px -2px rgba(0,0,0,.28), 0 26px 40px -12px rgba(0,0,0,.35), 14px 22px 34px -18px rgba(0,0,0,.30); }
  #pv-frame::before { content: ''; position: absolute; inset: calc(var(--pv-pad, 12px) * 0.42); pointer-events: none; z-index: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 2px 2px rgba(0,0,0,.45); }        /* step in the moulding */
  #pv-frame.white { background: linear-gradient(180deg, #ffffff 0%, #f1f0ec 20%, #e9e7e1 85%, #f6f5f1 100%);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.12), inset 1px 0 0 rgba(255,255,255,.8), inset -1px 0 0 rgba(0,0,0,.08),
      0 0 0 1px rgba(0,0,0,.06), 0 6px 10px -2px rgba(0,0,0,.16), 0 26px 40px -12px rgba(0,0,0,.24), 14px 22px 34px -18px rgba(0,0,0,.2); }
  #pv-frame.white .poster { box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
  #pv-frame.white::before { box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), inset 0 2px 2px rgba(0,0,0,.08); }
  #pv-frame.oak { background:
      repeating-linear-gradient(178deg, rgba(110,65,30,.10) 0 1px, transparent 1px 3px, rgba(255,235,200,.07) 3px 4px, transparent 4px 9px),
      repeating-linear-gradient(181deg, rgba(90,50,20,.07) 0 2px, transparent 2px 13px),
      linear-gradient(180deg, #d4a978 0%, #b8865a 25%, #a77648 80%, #c39465 100%); }
  #pv-frame.oak::before { box-shadow: inset 0 0 0 1px rgba(255,230,190,.18), inset 0 2px 2px rgba(60,35,15,.35); }
  #pv-frame.mini::before { display: none; }
  #pv-frame.brown { background:
      repeating-linear-gradient(178deg, rgba(20,10,4,.18) 0 1px, transparent 1px 3px, rgba(255,220,180,.05) 3px 4px, transparent 4px 9px),
      linear-gradient(180deg, #5a3a26 0%, #3f2718 25%, #352013 80%, #4c301e 100%); }
  /* Framed canvas: slim floating frame with a dark gap around the canvas, no glass sheen, a hint of weave */
  #pv-frame.canvas::before { inset: calc(var(--pv-pad, 12px) * 0.52); background: #0c0c0c; box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
  #pv-frame.canvas .poster { box-shadow: 0 2px 4px rgba(0,0,0,.45); }
  #pv-frame.canvas .poster::after { box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px); }
  #pv-frame .poster { z-index: 1; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
  #pv-frame .poster::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.30), inset 0 -1px 2px rgba(0,0,0,.15), inset 3px 0 4px rgba(0,0,0,.12), inset -3px 0 4px rgba(0,0,0,.12);   /* shadow cast by the frame lip */
    background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.10) 42%, rgba(255,255,255,.03) 50%, rgba(255,255,255,0) 58%); }   /* glass sheen */
  .frame.portrait .poster { aspect-ratio: 1 / 1.414; }
  .frame.landscape .poster { aspect-ratio: 1.414 / 1; }
  .frame.long .poster { aspect-ratio: 4 / 1; }   /* matches the long images (2176 × 544, 4:1) */
  .poster-scene { position: absolute; inset: 0; transition: background .3s; }
  .poster-scene img { width: 100%; height: 100%; object-fit: cover; }
  @media (prefers-reduced-motion: reduce) { .hero-rotator .hero-slide { transition: none; } }
  .poster-car { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); width: 82%; }
  .poster-car img { width: 100%; max-height: 60%; object-fit: contain; border-radius: 4px; }
  .poster-car.has-view { left: 0; bottom: 0; top: 0; width: 100%; height: 100%; transform: none; }   /* real picture fills the print, like the finished product */
  .poster-car.has-view img { width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; display: block; }
  .poster-caption { z-index: 2; position: absolute; left: 6%; bottom: 4.5%; font: 600 clamp(7px, 1.1vw, 11px) 'Inter', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
  .frame.long .poster-caption { left: 5%; top: 50%; bottom: auto; transform: translateY(-50%); font-size: clamp(8px, 1.3vw, 13px); }   /* Long prints: make / model on the left */
  .poster-plate { position: absolute; left: 50%; transform: translateX(-50%); bottom: 18%; padding: 1px 6px; font: 700 9px 'Inter', sans-serif; letter-spacing: 0.08em; background: #F7D63A; color: #111; border-radius: 2px; border: 1px solid rgba(0,0,0,0.25); white-space: nowrap; }
  /* Example image for the chosen setting replaces the drawn mock-up */
  .poster-example { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
  .poster.has-example .poster-example { display: block; }
  .poster.has-example > :not(.poster-example):not(.poster-caption) { display: none !important; }   /* the make / model caption stays on top of example pictures */
  .mock-label { position: absolute; top: 18px; left: 18px; z-index: 2; background: rgba(247,245,240,0.92); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--muted); }

  /* Full-width image */
  .full-bleed { width: 100%; line-height: 0; background: var(--grey); }
  .full-bleed img { width: 100%; height: auto; display: block; }
  /* Rotating room band: images stack and cross-fade; the first one sets the height */
  .room-rotate { position: relative; overflow: hidden; }
  .room-rotate img { transition: opacity 1.6s ease; }
  .room-rotate img + img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .room-rotate img:not(.on) { opacity: 0; }
  @media (prefers-reduced-motion: reduce) { .room-rotate img { transition: none; } }

  /* How it works */
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
  .step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; position: relative; }
  .step::before { counter-increment: step; content: '0' counter(step); font-family: 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif; font-weight: 200; font-size: 58px; color: var(--ink); display: block; margin-bottom: 14px; }
  .step h3 { font-size: 30px; margin-bottom: 8px; }
  .step p { color: var(--muted); font-size: 15px; }
  @media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

  /* Options showcase */
  .bg-soft { background: var(--bg); }
  .options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .option-card { background: var(--white); border-radius: var(--radius); padding: 30px; border: 1px solid var(--line); }
  .option-card h3 { font-size: 32px; margin-bottom: 10px; }
  .option-card p { color: var(--muted); font-size: 15px; margin-bottom: 16px; }
  .opt-list { list-style: none; display: grid; gap: 8px; }
  .opt-list li { position: relative; padding-left: 18px; font-size: 14px; color: var(--ink); }
  .opt-list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); }
  @media (max-width: 900px) { .options-grid { grid-template-columns: 1fr; } }
  /* Make it yours: larger text, matching the intro / How it works section */
  .options-section .section-head { max-width: 860px; }
  .options-section .eyebrow { font-size: 14px; }
  .options-section .section-head h2 { font-size: clamp(49px, 4.93vw, 84px); }
  .options-section .section-head p { font-size: clamp(17px, 1.25vw, 20px); }
  .options-section .options-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .options-section .option-card { padding: clamp(26px, 2.4vw, 38px); }
  .options-section .option-card h3 { font-size: clamp(35px, 2.9vw, 46px); margin-bottom: 12px; }
  .options-section .option-card p { font-size: clamp(16px, 1.15vw, 18px); margin-bottom: 20px; }
  .options-section .opt-list { gap: 10px; }
  .options-section .opt-list li { font-size: clamp(15px, 1.05vw, 17px); padding-left: 20px; }
  .options-section .opt-list li::before { width: 7px; height: 7px; }
  @media (max-width: 900px) { .options-section .options-grid { grid-template-columns: minmax(0, 1fr); } }

  /* Gallery */
  .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .gallery-item { border-radius: var(--radius); overflow: hidden; background: var(--bg); border: 1px solid var(--line); padding: 0; width: 100%; display: block; font: inherit; }
  button.gallery-item { cursor: zoom-in; }
  button.gallery-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .gallery-img { aspect-ratio: 4 / 3; background: var(--grey); position: relative; overflow: hidden; }
  .gallery-img img { width: 100%; height: 100%; object-fit: cover; }
  .gallery-img .ph { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 600; text-align: center; padding: 20px; }
  .gallery-img .ph svg { width: 54px; opacity: 0.45; }
  /* Gallery carousel */
  .gallery-carousel { position: relative; height: min(76vh, 724px); min-height: 280px; overflow: hidden; }
  .g-slide { position: absolute; inset: 0; padding: 36px 0 48px; display: flex; align-items: center; justify-content: center; transform: translateX(-100%); transition: transform 1.5s cubic-bezier(.65,0,.35,1); }
  .g-slide.notrans, .g-slide:not(.in):not(.out) { transition: none; }
  .g-slide.in { transform: translateX(0); }
  .g-slide.out { transform: translateX(100%); }
  .g-slide .g-frame { height: 100%; max-width: min(92%, 1100px); display: flex; align-items: center; }
  .g-slide img { box-sizing: border-box; max-width: 100%; max-height: 100%; object-fit: contain; border: clamp(6px, 0.9vw, 13px) solid #151515; box-shadow: 0 24px 50px rgba(0,0,0,0.28), 0 6px 14px rgba(0,0,0,0.16); }  /* black frame, matching the wall prints */
  .gallery-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
  .gallery-empty svg { width: 54px; opacity: 0.45; }
  @media (prefers-reduced-motion: reduce) { .g-slide { transition: none; } }
  @media (max-width: 900px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }

  /* Portrait showcase: six framed prints cartwheel in, hold, cartwheel out */
  .spin-section { background: var(--grey); overflow: hidden; }
  .spin-stage { width: min(1500px, 100% - 32px); margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 2vw, 32px); padding: 10px 0 24px; }
  .spin-slot { aspect-ratio: 1 / 1.414; position: relative; }
  .spin-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; box-sizing: border-box; border: clamp(5px, 0.7vw, 10px) solid #151515; background: #151515; box-shadow: 0 18px 36px rgba(0,0,0,0.26), 0 4px 10px rgba(0,0,0,0.14); opacity: 0; will-change: transform; }
  @media (max-width: 900px) { .spin-stage { grid-template-columns: repeat(3, 1fr); } .spin-slot:nth-child(n+4) { display: none; } }
  @media (max-width: 560px) { .spin-stage { grid-template-columns: repeat(2, 1fr); } .spin-slot:nth-child(n+3) { display: none; } }

  /* Long posters */
  .long-section[hidden] { display: none; }
  .long-section { background: #111; color: #F7F5F0; overflow: hidden; padding: 88px 0 96px; }
  .long-section h2 { color: #F7F5F0; font-size: clamp(44px, 5.8vw, 67px); margin: 10px 0 14px; }
  .long-section .eyebrow { color: rgba(247,245,240,0.7); }
  .long-section p { color: rgba(247,245,240,0.7); font-size: 17px; max-width: 620px; }
  .long-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 48px; }
  .long-stage { position: relative; width: min(1400px, 100% - 32px); margin: 0 auto; aspect-ratio: 4 / 1; }
  .long-slide { position: absolute; inset: 0; transform: translateX(110vw); will-change: transform; }
  /* Silver frame: brushed-metal gradient behind the print, with a fine bevel line on each edge */
  .long-slide img { width: 100%; height: 100%; object-fit: cover; box-sizing: border-box; display: block;
    border: clamp(5px, 0.7vw, 11px) solid transparent;
    background: linear-gradient(135deg, #f4f4f6 0%, #b9bcc1 18%, #e6e7ea 34%, #9a9da3 52%, #d9dadd 70%, #a7aab0 86%, #eeeff1 100%) border-box;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), 0 0 0 1px rgba(247,245,240,0.35), 0 24px 50px rgba(0,0,0,0.6); }
  .long-slide::after { content: ''; position: absolute; inset: clamp(5px, 0.7vw, 11px); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45), inset 0 2px 6px rgba(0,0,0,0.35); pointer-events: none; }

  /* Show it off */
  .feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
  .feature + .feature { margin-top: clamp(56px, 8vw, 104px); }
  .feature.flip .feature-media { order: 2; }
  .feature.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .feature-frame { position: relative; aspect-ratio: 1.414 / 1; background: #151515; border: clamp(8px, 1vw, 14px) solid #151515; box-shadow: 0 30px 60px rgba(0,0,0,0.22), 0 6px 14px rgba(0,0,0,0.12); overflow: hidden; }
  .feature-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
  .feature-frame img.on { opacity: 1; }
  .feature-frame .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--grey); color: var(--muted); font-size: 13px; font-weight: 600; }
  .feature-frame .ph svg { width: 70px; opacity: 0.45; }
  .feature-text h3 { font-size: clamp(38px, 4.35vw, 52px); margin: 8px 0 14px; }
  .feature-text p { color: var(--muted); font-size: 16px; margin-bottom: 18px; }
  .feature-text .opt-list { margin-bottom: 26px; }
  @media (max-width: 860px) { .feature, .feature.flip { grid-template-columns: 1fr; } .feature.flip .feature-media { order: 0; } }
  @media (prefers-reduced-motion: reduce) { .feature-frame img { transition: none; } }
  /* Show it off: bigger pictures — the section runs wider and the picture takes a larger share of each row.
     Change 1440px for the overall width, 1.75fr for the picture's share (text column is 1fr). */
  #show-off > .wrap { width: min(1440px, 100% - 32px); }
  @media (min-width: 861px) {
    #show-off .feature { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
    #show-off .feature.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); }
  }

  /* Mugs */
  .merch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(56px, 8vw, 104px); padding-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); }
  .merch-text h3 { font-size: clamp(38px, 4.35vw, 52px); margin: 8px 0 14px; }
  .merch-text p { color: var(--muted); font-size: 16px; margin-bottom: 18px; }
  .merch-text .opt-list { margin-bottom: 26px; }
  .merch-items { display: grid; grid-template-columns: minmax(0, 1fr); }
  .merch-item { margin: 0; }
  .merch-img { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow); }
  .merch-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
  .merch-img .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; font-weight: 600; border: 2px dashed var(--line); border-radius: var(--radius); margin: 12px; }
  /* Mugs: one photo of the four mugs */
  .mug-spread { position: relative; aspect-ratio: 1 / 1; }
  .mug-spread:has(.mugs-photo) { aspect-ratio: 2752 / 1536; }
  .mug-spread:has(.mugs-photo) .ph { display: none; }
  .mug-spread .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; font-weight: 600; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--bg); }
  /* the mug photos sit on top of each other and cross-fade every 10 seconds (script: "Mug photos") */
  .mugs-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1.2s ease; }
  .mugs-photo.on { opacity: 1; }
  /* Mug details panel */

  /* ===== HOODIE (#hoodie) ===== */
  .hoodie-section .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
  @media (max-width: 900px) { .hoodie-section .wrap { grid-template-columns: minmax(0, 1fr); } }
  .hoodie-gallery { position: sticky; top: 90px; }
  @media (max-width: 900px) { .hoodie-gallery { position: static; } }
  /* Cut-out photos sit straight on the page. Click (or tap) to zoom; move the pointer or drag to look around; click again to zoom out. */
  .hoodie-main { position: relative; aspect-ratio: 1 / 1; overflow: hidden; cursor: zoom-in; }
  .hoodie-main.zoomed { cursor: zoom-out; touch-action: none; }
  .hoodie-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s ease, transform .3s ease; }
  .hoodie-main img.on { opacity: 1; }
  .hoodie-main.zoomed img.on { transform: scale(2.4); }
  .hoodie-main.panning img.on { transition: opacity .35s ease; }   /* follows the pointer without lag */
  .hoodie-zoom-hint { margin-top: 4px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .hoodie-main .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; font-weight: 600; }
  .hoodie-views { display: flex; justify-content: center; gap: 14px; margin-top: 14px; }
  .hoodie-views button { flex: 0 0 72px; aspect-ratio: 1 / 1; padding: 0 0 6px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; opacity: .55; transition: opacity .2s; }
  .hoodie-views button:hover { opacity: .85; }
  .hoodie-views button.on { opacity: 1; border-bottom-color: var(--ink); }
  .hoodie-views img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .hoodie-info h2, .hoodie-info h1 { font-size: clamp(46px, 4.6vw, 72px); margin: 8px 0 12px; }
  .hoodie-info > p { color: var(--muted); font-size: 16px; margin-bottom: 18px; }
  .hoodie-price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
  .hoodie-price strong { font-family: 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif; font-weight: 300; font-size: 64px; line-height: 1; }
  .hoodie-price span { font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
  .hoodie-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
  .hoodie-sizes button { min-width: 58px; height: 46px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--white); font: 600 15px Inter, sans-serif; color: var(--ink); cursor: pointer; }
  .hoodie-sizes button:hover { border-color: var(--ink); }
  .hoodie-sizes button.on { background: var(--ink); border-color: var(--ink); color: var(--white); }
  .hoodie-size-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
  .hoodie-size-head .group-label { margin: 0; }
  .hoodie-buy { margin: 22px 0 8px; padding: 22px 0 0; border-top: 1px solid var(--line); }
  .hoodie-buy .field { margin-bottom: 18px; }
  .hoodie-details { border-top: 1px solid var(--line); margin-top: 28px; }
  .hoodie-details details { border-bottom: 1px solid var(--line); }
  .hoodie-details summary { cursor: pointer; padding: 16px 0; font-weight: 700; font-size: 15px; list-style: none; display: flex; justify-content: space-between; }
  .hoodie-details summary::-webkit-details-marker { display: none; }
  .hoodie-details summary::after { content: '+'; font-size: 20px; line-height: 1; }
  .hoodie-details details[open] summary::after { content: '−'; }
  .hoodie-details .opt-list, .hoodie-details .mug-specs, .hoodie-details p { margin-bottom: 18px; }
  .hoodie-details p { color: var(--muted); font-size: 14px; }
  .size-table-wrap { overflow-x: auto; margin-bottom: 10px; }
  .size-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: center; }
  .size-table th, .size-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); }
  .size-table th { font-weight: 700; }
  .size-table td:first-child, .size-table th:first-child { text-align: left; color: var(--muted); font-weight: 600; white-space: nowrap; }
  .size-table .on { background: var(--maroon-tint); }
  .size-units { display: inline-flex; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
  .size-units button { border: 0; background: var(--white); padding: 6px 14px; font: 600 13px Inter, sans-serif; cursor: pointer; color: var(--ink); }
  .size-units button.on { background: var(--ink); color: var(--white); }
  .measure-list { list-style: none; counter-reset: m; display: grid; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 18px; }
  .measure-list li { counter-increment: m; padding-left: 30px; position: relative; }
  .measure-list li::before { content: counter(m); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .measure-list strong { color: var(--ink); }
  .hoodie-section .mug-qty { margin-top: 2px; width: max-content; }
  .hoodie-section .mug-msg { min-height: 20px; margin-top: 12px; font-size: 14px; font-weight: 600; color: #B42318; }
  .hoodie-section [hidden] { display: none !important; }
  .mug-details { margin-top: clamp(40px, 6vw, 64px); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); }
  .mug-details-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
  .mug-details h3 { font-size: clamp(35px, 3.77vw, 46px); margin: 8px 0 10px; }
  .mug-details p { color: var(--muted); font-size: 16px; max-width: 560px; }
  .mug-price { text-align: right; line-height: 1; }
  .mug-price strong { display: block; font-family: 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif; font-weight: 300; font-size: 81px; }
  .mug-offer { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 18px; }
  /* Mug order form */
  .mug-details [hidden] { display: none !important; }   /* .btn's display would otherwise beat the hidden attribute */
  .mug-order { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); }
  .mug-order h4 { font-size: 20px; margin-bottom: 16px; }
  .mug-order-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 32px; margin-bottom: 6px; }
  @media (max-width: 620px) { .mug-order-grid { grid-template-columns: 1fr; } }
  .mug-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 8px; background: var(--white); overflow: hidden; }
  .mug-qty button { width: 46px; height: 48px; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--ink); }
  .mug-qty button:hover { background: var(--maroon-tint); }
  .field .mug-qty input { width: 64px; padding: 12px 4px; border: 0; border-radius: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; }
  .mug-qty input::-webkit-outer-spin-button, .mug-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .mug-drop { display: block; border: 2px dashed var(--line); border-radius: var(--radius); padding: 18px; text-align: center; cursor: pointer; background: var(--white); }
  .mug-drop:hover { border-color: var(--ink); }
  .mug-drop strong { display: block; font-size: 15px; }
  .mug-drop span { display: block; font-size: 13px; color: var(--muted); font-weight: 500; }
  .mug-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
  .mug-thumbs:not(:empty) { margin-top: 10px; }
  .mug-thumb { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--line); }
  .mug-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .mug-thumb span { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; padding: 4px; }
  .mug-thumb button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.65); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
  .mug-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 16px 0; margin: 6px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .mug-total span { font-size: 14px; color: var(--muted); font-weight: 600; margin-right: 10px; }
  .mug-total strong { font-size: 28px; }
  .mug-total small { font-size: 13px; color: var(--muted); }
  .mug-terms { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 16px; cursor: pointer; }
  .mug-terms input { width: 18px; height: 18px; accent-color: var(--ink); }
  .mug-details .mug-msg { min-height: 20px; margin-top: 12px; font-size: 14px; font-weight: 600; color: #B42318; }
  .mug-done { padding: 16px 18px; border-radius: var(--radius); background: #E8F3EA; color: #1E5B2A; font-weight: 600; font-size: 15px; }
  .mug-done.cancel { background: var(--maroon-tint); color: var(--ink); }
  #mug-mode { max-width: 440px; }
  .mug-basket { margin-bottom: 28px; }
  .mug-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .mug-line:first-child { border-top: 1px solid var(--line); }
  .mug-line-thumb { width: 64px; height: 46px; border-radius: 6px; overflow: hidden; background: var(--line); }
  .mug-line-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .mug-line-info strong { display: block; font-size: 15px; }
  .mug-line-info span { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mug-line-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 8px; background: var(--white); }
  .mug-line-qty button { width: 32px; height: 34px; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--ink); }
  .mug-line-qty span { min-width: 26px; text-align: center; font-weight: 700; font-size: 14px; }
  .mug-line-price { font-weight: 700; font-size: 15px; min-width: 64px; text-align: right; }
  .mug-line-remove { border: 0; background: none; font: 600 13px 'Inter', sans-serif; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 4px; }
  @media (max-width: 620px) {
    .mug-line { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px 12px; }
    .mug-line-thumb { width: 56px; height: 40px; grid-row: span 2; }
    .mug-line-info { grid-column: 2 / 4; }
    .mug-line-qty { grid-column: 2; justify-self: start; }
    .mug-line-price { grid-column: 3; }
    .mug-line-remove { grid-column: 2 / 4; justify-self: start; padding: 0; }
  }
  .mug-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  @media (max-width: 520px) { .mug-actions .btn { flex: 1 1 100%; } }
  .mug-details .mug-added { min-height: 20px; margin-top: 10px; font-size: 14px; font-weight: 600; color: #1E5B2A; }
  .mug-cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: max-content; gap: 12px; max-height: 460px; overflow-y: auto; padding: 4px; }
  .mug-car { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 0; border: 2px solid var(--line); border-radius: 8px; background: var(--white); cursor: pointer; text-align: left; overflow: hidden; font: inherit; color: var(--ink); transition: border-color .15s; }
  .mug-car:hover { border-color: var(--muted); }
  .mug-car.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--maroon); }
  .mug-car img { display: block; width: 100%; aspect-ratio: 1600 / 1131; object-fit: cover; background: var(--line); }
  .mug-car span { display: block; padding: 7px 9px 9px; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
  .mug-cars-note { font-size: 14px; color: var(--muted); }
  /* 2027 calendar builder (#calendar): pick 12 cars from The Collection. Settings in CAL in the calendar script. */
  .cal-section .section-head { margin-bottom: 32px; }
  .cal-section [hidden] { display: none !important; }
  .cal-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 32px); }
  .cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
  @media (max-width: 900px) { .cal-layout { grid-template-columns: minmax(0, 1fr); } }
  .cal-step { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .cal-step small { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--muted); }
  .cal-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .cal-tools .pill { padding: 8px 12px; font-size: 13px; }
  .cal-search { width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 8px; font: 500 15px 'Inter', sans-serif; color: var(--ink); background: var(--white); margin-bottom: 12px; }
  .cal-search:focus { outline: none; border-color: var(--ink); }
  .cal-cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); grid-auto-rows: max-content; gap: 10px; max-height: 880px; overflow-y: auto; padding: 4px; }
  @media (max-width: 900px) { .cal-cars { max-height: 440px; } }
  .cal-car { position: relative; display: flex; flex-direction: column; padding: 0; border: 2px solid var(--line); border-radius: 8px; background: var(--white); cursor: pointer; text-align: left; overflow: hidden; font: inherit; color: var(--ink); transition: border-color .15s; }
  .cal-car:hover { border-color: var(--muted); }
  .cal-car.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--maroon); }
  .cal-car img { display: block; width: 100%; aspect-ratio: 1600 / 1131; object-fit: cover; background: var(--line); }
  .cal-car > span { display: block; padding: 6px 8px 8px; font-size: 12px; font-weight: 600; line-height: 1.3; }
  .cal-car .cal-badge { position: absolute; top: 6px; left: 6px; padding: 3px 7px; border-radius: 6px; background: var(--ink); color: var(--white); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
  .cal-car[hidden] { display: none; }
  .cal-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-bottom: 18px; }
  .cal-slot { position: relative; border: 1.5px dashed var(--line); border-radius: 8px; background: var(--bg); overflow: hidden; cursor: pointer; font: inherit; color: var(--ink); padding: 0; text-align: left; }
  .cal-slot.filled { border-style: solid; background: var(--white); }
  .cal-slot.sel { border-color: var(--ink); box-shadow: 0 0 0 2px var(--maroon); }
  .cal-slot.over { border-color: var(--maroon); border-style: solid; }
  .cal-slot .im { display: block; width: 100%; aspect-ratio: 1600 / 1131; object-fit: cover; background: var(--grey); }
  .cal-slot .lb { display: flex; justify-content: space-between; align-items: center; padding: 4px 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .cal-slot .lb i { font-style: normal; font-weight: 600; color: var(--muted); letter-spacing: 0; text-transform: none; }
  .cal-slot .cover-tag { position: absolute; top: 4px; right: 4px; padding: 2px 6px; border-radius: 5px; background: var(--maroon); color: var(--ink); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
  /* Preview: one page of the calendar */
  .cal-preview { border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
  .cal-pv-photo { position: relative; aspect-ratio: 1600 / 1131; background: var(--grey); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; font-weight: 600; text-align: center; padding: 0; }
  .cal-pv-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cal-pv-cover { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; }
  .cal-pv-cover strong { display: block; font-family: 'Anton', 'League Gothic', 'Arial Narrow', sans-serif; font-weight: 400; font-size: clamp(40px, 6vw, 64px); line-height: 1; letter-spacing: .04em; }
  .cal-pv-cover span { display: block; font-family: 'Anton', 'League Gothic', 'Arial Narrow', sans-serif; font-weight: 400; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
  .cal-pv-grid { padding: 14px 16px 16px; }
  .cal-pv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
  .cal-pv-head strong { font-family: 'Anton', 'League Gothic', 'Arial Narrow', sans-serif; font-weight: 400; font-size: 26px; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
  .cal-pv-head span { font-size: 12px; color: var(--muted); font-weight: 600; text-align: right; }
  .cal-pv-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
  .cal-pv-table th { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 4px 0; text-align: left; }
  .cal-pv-table td { border-top: 1px solid #ECE9E2; height: 30px; vertical-align: top; padding: 4px 4px 3px; font-family: 'Anton', 'League Gothic', 'Arial Narrow', sans-serif; font-weight: 400; font-size: 14px; letter-spacing: .02em; }
  .cal-pv-table td.we { color: var(--muted); }
  .cal-pv-table td.bh { color: #A3201A; }
  .cal-pv-table td.bh::after { content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: #A3201A; margin-top: 2px; }
  .cal-pv-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 0; flex-wrap: wrap; }
  .cal-pv-nav .arrows { display: inline-flex; gap: 6px; }
  .cal-pv-nav button { font: 600 13px 'Inter', sans-serif; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); cursor: pointer; }
  .cal-pv-nav button:hover:not(:disabled) { border-color: var(--ink); }
  .cal-pv-nav button:disabled { opacity: .4; cursor: default; }
  .cal-legend { font-size: 12px; color: var(--muted); margin-top: 8px; }
  .cal-legend b { color: #A3201A; }
  .cal-order { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
  .cal-order-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 28px; }
  @media (max-width: 620px) { .cal-order-grid { grid-template-columns: minmax(0, 1fr); } }
  .cal-size small { display: block; font-weight: 500; font-size: 12px; opacity: .75; margin-top: 2px; }
  .cal-soon { padding: 14px 16px; border-radius: 8px; background: var(--bg); font-size: 14px; margin-bottom: 14px; }
  .cal-soon strong { display: block; font-size: 15px; margin-bottom: 2px; }
  .cal-share { font: 600 13px 'Inter', sans-serif; background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; cursor: pointer; }
  .cal-section .mug-msg { min-height: 20px; margin-top: 12px; font-size: 14px; font-weight: 600; color: #B42318; }
  .mug-price span { font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
  .mug-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 48px; margin-bottom: 28px; }
  .mug-specs { display: grid; gap: 0; }
  .mug-specs div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
  .mug-specs div:first-child { padding-top: 0; }
  .mug-specs dt { color: var(--muted); }
  .mug-specs dd { font-weight: 600; text-align: right; }
  @media (max-width: 700px) { .mug-spec-grid { grid-template-columns: 1fr; } .mug-price { text-align: left; } }
  .merch-item figcaption { margin-top: 12px; font-size: 14px; font-weight: 600; text-align: center; }
  @media (max-width: 860px) { .merch { grid-template-columns: 1fr; } }
  @media (max-width: 520px) { .merch-items { grid-template-columns: 1fr; } }

  /* Studio sets: example set viewer, packages and the order form (settings in SET in the script). Package pictures: assets/studio-set/set-size-<n>.webp */
  /* Fanned example sets: one vehicle's images lie stacked, then fan out around a point below the stack (script: "Studio sets").
     The fan moves on to the next vehicle every SET.fanMs; the tabs pick one. --fa is each card's angle, --i its place in the fan. */
  .set-fan { position: relative; aspect-ratio: 2 / 1; margin: 8px 0 0; }
  .set-card { position: absolute; left: 27%; top: 12%; width: 46%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--white); box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08); cursor: pointer;
    transform-origin: 50% 260%; transform: rotate(0deg); opacity: 0; transition: transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 35ms), opacity .4s ease; }
  .set-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .set-fan.in .set-card { opacity: 1; }
  .set-fan.open .set-card { transform: rotate(var(--fa)); }
  .set-fan.open .set-card:hover, .set-fan.open .set-card:focus-visible, .set-fan.open .set-card.on { transform: rotate(var(--fa)) translateY(-9%); z-index: 50 !important; transition-delay: 0s; }
  .set-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  /* A transparent example image: shown whole on a checkerboard, the usual sign for "no background" */
  .set-card img.clear { object-fit: contain; object-position: left center; background: repeating-conic-gradient(#D9D9DE 0 25%, #FFFFFF 0 50%) 0 0 / 16px 16px; }
  .set-fan-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
  .set-fan-tabs button { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
  .set-fan-tabs button:hover { border-color: var(--ink); }
  .set-fan-tabs button.on { background: var(--ink); border-color: var(--ink); color: var(--white); }
  .set-fan-note { margin-top: 12px; min-height: 1.5em; font-size: 13px; color: var(--muted); text-align: center; }
  @media (max-width: 700px) {
    .set-fan { aspect-ratio: 3 / 2; overflow-x: clip; }   /* the outer cards' corners never widen the page */
    .set-card { left: 24%; width: 52%; top: 18%; }
  }
  @media (prefers-reduced-motion: reduce) { .set-card { transition: none; } }
  .set-packages { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0 24px; }
  .set-package { display: grid; gap: 10px; align-content: start; padding: 22px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--white); text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: border-color .2s; }
  .set-package:hover { border-color: var(--muted); }
  .set-package.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .set-package img { display: block; width: 50%; height: auto; aspect-ratio: 1000 / 714; object-fit: cover; border-radius: 6px; margin-bottom: 6px; }
  .set-package h3 { font-size: 20px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .set-package h3 { align-items: flex-end; }
  .set-package h3 strong { font-family: 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif; font-weight: 300; font-size: clamp(56px, 5.5vw, 76px); line-height: 0.9; }
  .set-package p { color: var(--muted); font-size: 15px; }
  @media (max-width: 700px) { .set-packages { grid-template-columns: 1fr; } }
  .set-small { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
  .set-compare { font-size: 16px; color: var(--muted); margin: 0 0 24px; padding: 14px 18px; border-left: 3px solid var(--maroon); background: var(--white); border-radius: 0 8px 8px 0; }   /* --maroon is the gold accent */
  .set-compare strong { color: var(--ink); }
  .set-specs { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 0 0 20px; }
  .set-specs h4 { font-size: 17px; margin-bottom: 10px; }
  .set-specs dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .set-specs dl div { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
  .set-specs dt { font-weight: 600; }
  .set-specs dd { color: var(--muted); }
  .set-specs p { font-size: 14px; margin-top: 12px; }
  @media (max-width: 700px) { .set-specs dl { grid-template-columns: 1fr; } }
  .set-order [hidden] { display: none !important; }   /* .field's display would otherwise beat the hidden attribute */
  .set-order .mug-terms { align-items: flex-start; }
  .set-order .mug-terms input { flex: none; margin-top: 2px; }

  /* Motorcycles */
  .bike-section { background: #0e0e10; color: #F7F5F0; overflow: hidden; padding: 88px 0 100px; }
  .bike-section h2 { color: #F7F5F0; font-size: clamp(46px, 6.38vw, 78px); margin: 10px 0 14px; }
  .bike-section .eyebrow { color: rgba(247,245,240,0.7); }
  .bike-section p { color: rgba(247,245,240,0.72); font-size: 17px; max-width: 620px; }
  .bike-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 48px; }
  .bike-stage { position: relative; width: min(1320px, 100% - 32px); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 28px); }
  .bike-slide { position: relative; aspect-ratio: 1.414 / 1; opacity: 0; will-change: transform, filter; }
  /* Silver aluminium frame: brushed-metal gradient with a fine bevel line where it meets the print */
  .bike-slide img { width: 100%; height: 100%; object-fit: cover; box-sizing: border-box; display: block;
    border: clamp(7px, 0.9vw, 13px) solid transparent;
    background: linear-gradient(135deg, #f4f4f6 0%, #b9bcc1 18%, #e6e7ea 34%, #9a9da3 52%, #d9dadd 70%, #a7aab0 86%, #eeeff1 100%) border-box;
    box-shadow: 0 0 0 1px rgba(247,245,240,0.35), 0 30px 60px rgba(0,0,0,0.7); }
  .bike-slide::after { content: ''; position: absolute; inset: clamp(7px, 0.9vw, 13px); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45), inset 0 2px 6px rgba(0,0,0,0.35); pointer-events: none; }
  @media (max-width: 560px) { .bike-stage { grid-template-columns: 1fr; } }
  .bike-empty { grid-column: 1 / -1; aspect-ratio: 2.83 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 2px dashed rgba(247,245,240,0.18); border-radius: var(--radius); color: rgba(247,245,240,0.55); font-size: 13px; font-weight: 600; }
  .bike-empty svg { width: 90px; color: rgba(247,245,240,0.4); }

  /* Top three: three landscape prints side by side, each cross-fading through its own images */
  .top3-section { background: var(--bg); }
  .top3-head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
  .top3-head h2 { font-size: clamp(46px, 6.38vw, 78px); margin: 10px 0 16px; }
  .top3-head p { color: var(--muted); font-size: 18px; }
  .top3-stage { width: min(1400px, 100% - 32px); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.2vw, 36px); }
  .top3-frame { position: relative; aspect-ratio: 1.414 / 1; background: #151515; border: clamp(6px, 0.8vw, 12px) solid #151515; box-shadow: 0 24px 50px rgba(0,0,0,0.24), 0 6px 14px rgba(0,0,0,0.14); overflow: hidden; }
  .top3-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
  .top3-frame img.on { opacity: 1; }
  .top3-num { position: absolute; top: 10px; left: 12px; z-index: 2; font: 300 clamp(26px, 2.9vw, 41px)/1 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif; color: #F7F5F0; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
  .top3-actions { text-align: center; margin-top: 48px; }
  @media (max-width: 760px) { .top3-stage { grid-template-columns: 1fr; max-width: 560px; } }
  @media (prefers-reduced-motion: reduce) { .top3-frame img { transition: none; } }

  /* SUPERCARS & HYPERCARS: pick a car you don't own. Images: /assets/super-hypercars/<car>.webp (list in SUPERCARS in the script) */
  .hyper-section { background: var(--white); }
  .hyper-head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
  .hyper-head p { color: var(--muted); }
  .hyper-grid { width: min(1100px, 100% - 32px); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 36px); }
  .hyper-card { display: flex; flex-direction: column; background: transparent; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
  .hyper-frame { position: relative; aspect-ratio: 1 / 1.414; background: #151515; border: clamp(6px, 0.7vw, 10px) solid #151515; box-shadow: 0 18px 40px rgba(0,0,0,0.20), 0 5px 12px rgba(0,0,0,0.12); overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, outline-color .2s; outline: 3px solid transparent; outline-offset: 4px; }
  .hyper-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
  .hyper-frame .hyper-missing { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(247,245,240,0.55); font: 300 clamp(22px, 2.2vw, 32px)/1 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; padding: 16px; }
  .hyper-card:hover .hyper-frame, .hyper-card:focus-visible .hyper-frame { transform: translateY(-4px); box-shadow: 0 26px 54px rgba(0,0,0,0.26), 0 8px 16px rgba(0,0,0,0.14); }
  .hyper-card:hover .hyper-frame img { transform: scale(1.04); }
  .hyper-card:focus-visible { outline: none; }
  .hyper-card.on .hyper-frame { outline-color: var(--maroon); }
  .hyper-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; }
  .hyper-name { font: 300 clamp(28px, 2.4vw, 38px)/1 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: 0.02em; text-transform: uppercase; }
  .hyper-tag { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
  .hyper-card.on .hyper-tag { color: var(--maroon-dark); }
  .hyper-pick { margin-top: 6px; font-size: 14px; color: var(--muted); }
  .hyper-card.on .hyper-pick { color: var(--ink); font-weight: 600; }
  /* Step 01 for a car picked from The Collection or the supercars: the car instead of the upload box */
  .ready-car { display: flex; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--maroon); border-radius: var(--radius); background: var(--maroon-tint); }
  .ready-car[hidden] { display: none; }
  #step-photos { scroll-margin-top: 96px; }   /* clear of the sticky header when a picked car jumps here */
  .ready-car img { width: 140px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; flex: none; background: var(--white); }
  .ready-car strong { display: block; font-size: 17px; }
  .ready-car span { display: block; font-size: 14px; color: var(--muted); }
  .ready-car .ready-car-note { margin-top: 6px; color: var(--ink); }
  .ready-car button { background: none; border: 0; padding: 0; margin-top: 8px; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; color: var(--ink); }
  @media (max-width: 520px) { .ready-car { flex-direction: column; align-items: flex-start; } .ready-car img { width: 100%; } }
  .hyper-chosen { display: none; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--maroon); border-radius: var(--radius); background: var(--maroon-tint); font-size: 14px; }
  .hyper-chosen.show { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .hyper-chosen button { background: none; border: 0; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; color: var(--ink); }
  @media (max-width: 900px) { .hyper-grid { grid-template-columns: repeat(2, 1fr); } .hyper-grid .hyper-card:nth-child(odd):last-child { display: none; } }   /* two columns: an odd last car would sit on its own, so phones and tablets leave it out */
  @media (max-width: 560px) { .hyper-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; } .hyper-name { font-size: 24px; } .hyper-meta { flex-direction: column; gap: 4px; margin-top: 10px; } }
  @media (prefers-reduced-motion: reduce) { .hyper-frame, .hyper-frame img { transition: none; } }

  /* Room photo with caption underneath */
  .room-band { padding: 0; background: var(--bg); }   /* warmer than the page so the caption band doesn't read as white */
  .room-band .full-bleed img { width: 100%; height: auto; }
  .room-caption { padding: clamp(32px, 5vw, 56px) 16px clamp(48px, 7vw, 80px); text-align: center; }
  .room-caption h2 { font-size: clamp(38px, 5.22vw, 64px); max-width: 900px; margin: 0 auto; }

  /* Print & frame */
  .spec-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: 56px; align-items: start; }
  .spec-list { list-style: none; display: grid; gap: 18px; margin-top: 28px; }
  .spec-list li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; }
  .spec-list .tick { width: 28px; height: 28px; border-radius: 50%; background: var(--grey); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
  .spec-list strong { display: block; font-size: 16px; }
  .spec-list span { color: var(--muted); font-size: 15px; }
  .size-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 48px; }
  @media (max-width: 960px) { .size-cards { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 700px) { .size-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .size-card { padding: 18px 10px; min-width: 0; } }
  .size-card .size.word { font-size: 34px; padding: 7px 0; }
  .size-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 16px; text-align: center; }
  .size-card .size { font-family: 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif; font-weight: 200; font-size: 70px; color: var(--ink); line-height: 1; }
  .size-card .dims { color: var(--muted); font-size: 14px; margin: 8px 0 16px; }
  .size-card .price { font-size: 22px; font-weight: 700; }
  .size-card .price small { font-size: 13px; font-weight: 500; color: var(--muted); }
  .size-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 56px; flex-wrap: wrap; }
  .size-intro h3 { font-size: 38px; margin-bottom: 8px; }
  .size-intro p { color: var(--muted); font-size: 15px; max-width: 620px; }
  .a4-key { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); line-height: 1.35; }
  .a4-swatch { width: 30px; height: 42px; background: rgba(201,162,39,0.55); border: 1.5px solid var(--maroon-dark); border-radius: 2px; display: flex; align-items: flex-end; justify-content: center; font: 700 9px 'Inter', sans-serif; color: var(--ink); padding-bottom: 3px; }
  .size-cards .size-card { cursor: pointer; transition: border-color .2s, box-shadow .2s; font: inherit; color: inherit; width: 100%; }
  .size-card:hover { border-color: var(--ink); }
  .size-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .size-card.open { border-color: var(--ink); box-shadow: var(--shadow); }
  .size-visual { display: flex; align-items: flex-end; justify-content: center; height: 176px; margin: 6px 0 18px; }
  .size-visual svg { display: block; overflow: visible; max-width: 100%; height: auto; }
  .sv-sheet { fill: var(--grey); stroke: var(--ink); stroke-width: 1.5; }
  .sv-a4 { fill: rgba(201,162,39,0.55); stroke: var(--maroon-dark); stroke-width: 1; }
  .sv-grid { opacity: 0; transition: opacity .35s ease; }
  .sv-grid rect { fill: rgba(201,162,39,0.22); stroke: var(--maroon-dark); stroke-width: 0.8; }
  .sv-grid text { font: 600 8px 'Inter', sans-serif; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
  .size-card.open .sv-grid { opacity: 1; }
  .size-card.open .sv-a4 { opacity: 0; }
  .sv-a4 { transition: opacity .35s ease; }
  .a4-count { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); }
  .size-card.open .a4-count { color: var(--ink); }
  .a4-count .when-open { display: none; }
  .size-card.open .a4-count .when-open { display: inline; }
  .size-card.open .a4-count .when-closed { display: none; }
  @media (prefers-reduced-motion: reduce) { .sv-grid, .sv-a4 { transition: none; } }
  .spec-photo { justify-self: end; width: 100%; max-width: 720px; }
  .spec-photo img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
  @media (max-width: 900px) { .spec-grid { grid-template-columns: 1fr; } .spec-photo { justify-self: center; } }
  /* Framed print and framed canvas side by side (both photos are 4:5) */
  .spec-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .spec-pair figure { margin: 0; min-width: 0; }
  .spec-pair figure:only-child { grid-column: 1 / -1; }
  .spec-pair figcaption { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
  .frame-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; white-space: nowrap; }
  .frame-swatches button { flex: none; width: 24px; height: 24px; padding: 3px; border: 1.5px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
  .frame-swatches button.on { border-color: var(--ink); }
  .frame-swatches .sw-label::after { content: ' ·'; }
  @media (max-width: 600px) {
    .frame-swatches .sw-label, .frame-swatches .spec-link { flex-basis: 100%; }
    .frame-swatches .sw-label::after { content: none; }
  }
  .frame-swatches i { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }

  /* Order configurator */
  #order > .wrap { width: min(1440px, 100% - 32px); }   /* wider order area so the preview can grow */
  .order-grid { display: grid; grid-template-columns: minmax(0, 1fr) 640px; gap: 40px; align-items: start; }
  @media (max-width: 1280px) { .order-grid { grid-template-columns: minmax(0, 1fr) 540px; } }
  @media (max-width: 1020px) { .order-grid { grid-template-columns: minmax(0, 1fr); } }
  .order-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
  .panel-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
  .panel-num { font-family: 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif; font-weight: 200; font-size: 38px; color: var(--ink); }
  .panel-head h3 { font-size: 32px; }
  .panel-head p { margin-left: auto; font-size: 12px; color: var(--muted); }
  .field { display: grid; gap: 6px; margin-bottom: 14px; }
  .field:last-child { margin-bottom: 0; }
  .field label, .group-label { font-size: 13px; font-weight: 600; color: var(--ink); }
  .group-label { display: block; margin: 18px 0 10px; }
  .group-label:first-child { margin-top: 0; }
  .field input, .field textarea, .field select { width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 8px; font: 500 15px 'Inter', sans-serif; color: var(--ink); background: var(--white); transition: border-color .2s; }
  .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); }
  .field textarea { min-height: 96px; resize: vertical; }
  .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .row.two { grid-template-columns: 1fr 1fr; }
  @media (max-width: 620px) { .row, .row.two { grid-template-columns: 1fr; } }
  /* Step 02 layout */
  .vehicle-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px 20px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
  .vehicle-grid .field, .vehicle-row .field { margin-bottom: 0; }
  .vehicle-grid .group-label { margin: 0; }
  .vehicle-row { grid-template-columns: 1fr 1.4fr 0.6fr; margin-top: 18px; }
  #paint-sub { margin-top: 18px; }
  /* Segmented toggle: joined buttons that fill the width */
  .pills.segmented { display: flex; flex-wrap: nowrap; gap: 0; border: 1.5px solid var(--line); border-radius: 8px; padding: 3px; background: var(--bg); }
  .pills.segmented .pill { flex: 1; border: 0; border-radius: 6px; background: transparent; padding: 10px 12px; white-space: nowrap; }
  .pills.segmented .pill:hover { color: var(--ink); }
  .pills.segmented .pill.on { background: var(--ink); color: var(--white); }
  @media (max-width: 620px) { .vehicle-grid, .vehicle-row { grid-template-columns: 1fr; } .pills.segmented .pill { white-space: normal; line-height: 1.3; } .vehicle-row .field + .field { margin-top: 0; } }
  /* Step 07 layout */
  .details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .details-grid .field { margin-bottom: 0; }
  .details-grid .full { grid-column: 1 / -1; }
  .opt { font-weight: 500; color: var(--muted); font-size: 12px; margin-left: 4px; }
  .agree { display: grid; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
  .check-card { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 13px; line-height: 1.5; color: var(--muted); cursor: pointer; transition: border-color .2s, background .2s; }
  .check-card:hover { border-color: var(--ink); }
  .check-card:has(input:checked) { border-color: var(--ink); background: var(--white); }
  .check-card input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ink); }
  .check-card strong { display: block; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
  .check-card a { color: var(--ink); }
  @media (max-width: 620px) { .details-grid { grid-template-columns: 1fr; } }
  /* Multi-select angle tiles */
  .angle-tile { position: relative; }
  /* Engine on show / Doors open extras (step 03) */
  .pill[hidden] { display: none; }
  .engine-box { margin-top: 14px; padding: 20px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg); }
  .engine-title { display: block; font-family: 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif; font-weight: 400; font-size: 30px; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 8px; }
  .engine-lead { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
  .engine-box .group-label { margin-top: 0; }
  .engine-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
  .engine-examples.portrait { max-width: 380px; }
  .engine-card { display: grid; gap: 3px; padding: 8px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--white); cursor: pointer; text-align: left; font: inherit; color: var(--muted); transition: border-color .2s, box-shadow .2s; }
  .engine-card:hover { border-color: var(--ink); }
  .engine-card.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
  .engine-img { aspect-ratio: 1.414 / 1; border-radius: 5px; overflow: hidden; background: var(--grey); display: flex; align-items: center; justify-content: center; margin-bottom: 5px; }
  .engine-examples.portrait .engine-img { aspect-ratio: 1 / 1.414; }
  .engine-img img { width: 100%; height: 100%; object-fit: cover; }
  .engine-img .ph { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; padding: 8px; }
  .engine-card strong { font-size: 14px; color: var(--ink); }
  .engine-card span { font-size: 12px; }
  #doors-sub { margin-top: 14px; }
  #doors-sub .pills.segmented { max-width: 380px; }
  #doors-sub .engine-examples { max-width: 520px; }
  #doors-sub .engine-examples.portrait { max-width: 380px; }
  .tick-badge { position: absolute; top: 6px; right: 6px; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 700; display: none; align-items: center; justify-content: center; }
  .angle-tile.on .tick-badge { display: flex; }
  /* Print list (step 06) */
  .finish-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: -6px 0 20px; }
  .finish-photos[hidden] { display: none; }
  .frame-corners { margin: 16px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .frame-corners[hidden] { display: none; }
  .frame-corners figure { margin: 0; min-width: 0; }
  .frame-corners img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); background: var(--white); }
  .frame-corners figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.35; }
  .finish-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--white); }
  .print-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .print-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto 34px; gap: 14px; align-items: center; padding: 12px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg); }
  .print-thumb { aspect-ratio: 4 / 3; border-radius: 5px; overflow: hidden; background: var(--white); display: flex; align-items: center; justify-content: center; }
  .print-thumb img { width: 100%; height: 100%; object-fit: contain; }
  .print-thumb .ico { width: 60%; color: var(--muted); }
  .print-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
  .print-title span { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 8px; }
  .print-opts { display: flex; flex-wrap: wrap; gap: 8px; }
  .pills.segmented.small { display: inline-flex; background: var(--white); }
  .pills.segmented.small .pill { padding: 6px 12px; font-size: 13px; flex: none; }
  .print-price { font-weight: 700; font-size: 16px; }
  .print-remove { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--white); color: var(--muted); cursor: pointer; font-size: 13px; }
  .print-remove:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
  .print-remove:disabled { opacity: 0.35; cursor: default; }
  @media (max-width: 620px) {
    .print-row { grid-template-columns: 56px minmax(0, 1fr) 34px; gap: 10px; padding: 10px; }
    .pills.segmented.small { display: flex; width: 100%; }
    .pills.segmented.small .pill { flex: 1 1 auto; min-width: 0; padding: 6px 4px; font-size: 12px; }   /* auto, not 0: wider labels like "Long" get room for their text */
    .print-price { grid-column: 2; grid-row: 2; }
    .print-remove { grid-column: 3; grid-row: 1; }
  }
  .hint { font-size: 12px; color: var(--muted); }
  /* Number plate preview (step 05): front (white) and rear (yellow), at the real UK shape of 520 × 111 mm.
     Oswald stands in for the official plate lettering. */
  .plate-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0 6px; padding: 18px; background: var(--bg); border: 1.5px solid var(--line); border-radius: 8px; }
  .plate-preview[hidden] { display: none; }
  .plate-fig { margin: 0; container-type: inline-size; }
  .plate-fig figcaption { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .uk-plate { width: 100%; aspect-ratio: 520 / 111; border-radius: 1.6cqw; display: flex; align-items: center; justify-content: center; overflow: hidden;
    box-shadow: inset 0 0 0 0.4cqw rgba(17,17,17,0.85), 0 1px 0 rgba(255,255,255,0.6), 0 6px 14px -6px rgba(0,0,0,0.35); }
  .uk-plate.front { background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(255,255,255,0) 45%), #FFFFFF; }
  .uk-plate.rear { background: linear-gradient(160deg, rgba(255,255,255,0.45), rgba(255,255,255,0) 45%), #F8D21C; }
  .plate-chars { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600; font-size: 18.5cqw; line-height: 1; letter-spacing: 0.04em; color: #111; white-space: pre; transform: translateY(0.02em); }
  .plate-chars.placeholder { opacity: 0.25; }
  .uk-plate { position: relative; }
  .plate-cap { position: absolute; left: 4%; right: 4%; bottom: 1.3cqw; font: 600 3.3cqw/1 'Inter', sans-serif; letter-spacing: 0.06em; color: #111; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .plate-cap:empty { display: none; }
  .uk-plate.has-cap .plate-chars { font-size: 15.5cqw; transform: translateY(-1.7cqw); }   /* main characters make room for the caption */
  @media (max-width: 520px) { .plate-preview { grid-template-columns: minmax(0, 1fr); } }

  /* Pills (single-choice buttons) */
  .pills { display: flex; flex-wrap: wrap; gap: 8px; }
  .pill { padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--white); font: 600 14px 'Inter', sans-serif; color: var(--muted); cursor: pointer; transition: all .2s; }
  .pill:hover { border-color: var(--ink); color: var(--ink); }
  .pill.on { border-color: var(--ink); background: var(--ink); color: var(--white); }

  /* Upload */
  .drop { border: 2px dashed var(--line); border-radius: var(--radius); padding: 32px 20px; text-align: center; cursor: pointer; background: var(--bg); transition: border-color .2s, background .2s; }
  .drop:hover, .drop.over { border-color: var(--ink); background: var(--grey); }
  .drop strong { display: block; font-size: 16px; margin: 8px 0 4px; }
  .drop span { display: block; font-size: 13px; color: var(--muted); }
  .drop svg { width: 36px; color: var(--ink); margin: 0 auto; }
  .thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
  .thumb { position: relative; width: 92px; height: 70px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
  .thumb img { width: 100%; height: 100%; object-fit: cover; }
  .thumb button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,0.65); color: #F7F5F0; font-size: 12px; cursor: pointer; }
  .reg-row { display: flex; gap: 10px; }
  .reg-row input { flex: 1; min-width: 0; font-weight: 600 !important; letter-spacing: 0.12em; text-transform: uppercase; background: #F7D63A !important; border-color: #d9b91e !important; font-size: 18px !important; }
  .reg-row .btn { padding: 12px 20px; }
  .lookup-status { display: none; font-size: 13px; color: var(--muted); margin-top: 8px; }
  .lookup-status.show { display: block; }
  .confirm-note { font-size: 13px; color: var(--muted); margin-bottom: 16px; }

  /* Selectable tiles (angles, settings) */
  .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
  .tile { border: 1.5px solid var(--line); border-radius: 8px; padding: 8px; background: var(--white); cursor: pointer; text-align: center; transition: all .2s; }
  .tile:hover { border-color: var(--ink); }
  .tile.on { border-color: var(--ink); background: var(--grey); }
  .tile-img { aspect-ratio: 4 / 3; border-radius: 5px; overflow: hidden; background: var(--bg); margin-bottom: 7px; display: flex; align-items: center; justify-content: center; }
  .tile-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 0.8; transition: all .2s; }
  .tile.on .tile-img img { filter: none; opacity: 1; }
  .tile-img .ico { width: 60%; color: var(--muted); }
  .tile.on .tile-img .ico { color: var(--ink); }
  .tile-name { font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.3; }
  .tile.on .tile-name { color: var(--ink); }
  /* Camera view groups: 4 across, 2 across on small phones */
  .angle-group + .angle-group { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
  #angle-tiles + .angle-group { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }   /* space above Extras */
  .angle-group .group-label { margin-top: 0; }
  .angle-tiles { grid-template-columns: repeat(4, 1fr); }
  .angle-tiles .tile-img { background: var(--white); }
  .angle-tiles .tile-img img { object-fit: contain; }
  @media (max-width: 480px) { .angle-tiles { grid-template-columns: repeat(2, 1fr); } }
  .tile-text { padding: 16px 10px; display: flex; align-items: center; justify-content: center; min-height: 58px; }
  .tile-text .tile-name { font-size: 13px; }
  /* Setting tiles: full-colour thumbnails, 4 across (2 on small phones), tap to expand */
  .setting-tiles { grid-template-columns: repeat(2, 1fr); gap: 16px; }   /* 2 × 2, larger tiles */
  .setting-tiles .tile-name { font-size: 14px; }
  .setting-tile .tile-img { position: relative; cursor: zoom-in; }
  .setting-tile .tile-img img { filter: none; opacity: 1; transition: transform .3s ease; }
  .setting-tile:hover .tile-img img { transform: scale(1.06); }
  .expand-badge { position: absolute; right: 5px; bottom: 5px; width: 22px; height: 22px; border-radius: 5px; background: rgba(0,0,0,0.55); color: #F7F5F0; display: flex; align-items: center; justify-content: center; }
  .expand-badge svg { width: 13px; height: 13px; }
  @media (max-width: 480px) { .setting-tiles { grid-template-columns: repeat(2, 1fr); } }

  /* Setting pop-up */
  #setting-popup { position: fixed; inset: 0; z-index: 1000; background: rgba(10,10,12,0.75); display: none; align-items: center; justify-content: center; padding: 16px; }
  #setting-popup.show { display: flex; }
  .sp-card { position: relative; background: var(--white); border-radius: 14px; overflow: hidden; width: min(860px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,0.4); }
  #sp-img { display: block; width: 100%; min-height: 0; flex: 1; object-fit: cover; max-height: 70vh; }
  .sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; flex-wrap: wrap; }
  .sp-foot strong { display: block; font-size: 20px; margin-top: 4px; }
  .sp-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.55); color: #F7F5F0; font-size: 18px; cursor: pointer; }
  .sp-close:hover { background: rgba(0,0,0,0.75); }
  .swatch { width: 100%; height: 100%; }

  .sub { display: none; margin-top: 14px; }
  .sub.show { display: block; }

  /* Summary */
  .summary { position: sticky; top: 92px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .summary .wall { min-height: 660px; padding: 70px 32px 30px; flex-direction: column; }   /* bigger layout preview */
  .summary .frame.portrait { width: min(380px, 66vw); }
  .summary .frame.landscape { width: min(536px, 82vw); }
  .summary .frame.long { width: min(536px, 86vw); }
  @media (max-width: 1280px) { .summary .wall { min-height: 560px; } .summary .frame.portrait { width: min(320px, 66vw); } .summary .frame.landscape, .summary .frame.long { width: min(436px, 82vw); } }
  .summary .mock-label { font-size: 13px; }
  /* label + "Example car shown" stacked top-left, never running under the Portrait/Landscape buttons */
  .pv-labels { position: absolute; top: 18px; left: 18px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: calc(100% - 230px); }
  .pv-labels .mock-label { position: static; max-width: 100%; }
  .pv-example-note { font-size: 12px; color: var(--muted); padding-left: 4px; }
  .summary .pv-orient .pill, .summary .pv-caption-toggle .pill { font-size: 14px; padding: 8px 14px; }
  .summary .pv-toggle-label { font-size: 13px; }
  /* Room preview: rear wall (the old preview colour) and a floor. The print hangs on the wall with a guitar standing
     under it, both at one fixed scale so every print size shows its true size. Positions are set by fitRoom() in the script. */
  .summary .wall { display: block; padding: 0; min-height: 740px; background: var(--grey); }
  .summary .wall::after { display: none; }
  @media (max-width: 1280px) { .summary .wall { min-height: 640px; } }
  @media (max-width: 600px) { .summary .wall { min-height: 540px; } }
  .room-floor { position: absolute; left: 0; right: 0; bottom: 0; height: var(--floor, 110px);
    background: linear-gradient(180deg, #CEC8BD 0%, #D8D2C8 40%, #DFDAD1 100%); }
  .room-floor::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0)); }   /* where the wall meets the floor */
  .summary .wall > #pv-frame { position: absolute; left: 50%; transform: translateX(-50%); transition: width .35s ease, bottom .35s ease, left .35s ease; }
  .pv-guitar { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; width: auto; max-width: none; height: 0; transition: height .35s ease, bottom .35s ease, left .35s ease;
    filter: drop-shadow(6px 8px 10px rgba(0,0,0,0.22)); }
  .pv-guitar-shadow { position: absolute; left: 50%; transform: translateX(-50%); height: 10px; border-radius: 50%; z-index: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 70%); }
  .pv-orient { position: absolute; top: 14px; right: 14px; z-index: 2; }
  .pv-orient .pill { background: rgba(247,245,240,0.92); }
  .pv-orient .pill:disabled { opacity: .4; cursor: not-allowed; }
  .pv-caption-toggle { position: absolute; bottom: 14px; right: 14px; z-index: 2; align-items: center; }
  .pv-caption-toggle .pill { background: rgba(247,245,240,0.92); }
  .pv-toggle-label { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 8px 0 10px; white-space: nowrap; }
  .summary .wall { padding-bottom: 64px; }
  @media (max-width: 480px) { .pills.segmented.small.pv-caption-toggle { width: auto; display: inline-flex; } .pills.segmented.small.pv-caption-toggle .pill { flex: none; padding: 6px 10px; } }
  @media (max-width: 480px) { .pills.segmented.small.pv-orient { width: auto; display: inline-flex; top: 16px; right: 14px; } .pills.segmented.small.pv-orient .pill { flex: none; padding: 6px 10px; } }
  /* Print tabs under the preview: one per selected angle, tap to show it in the frame */
  .pv-prints { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  .pv-prints[hidden] { display: none; }
  .pv-tab { position: relative; display: grid; gap: 6px; padding: 8px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--white); cursor: pointer; text-align: left; font: inherit; color: var(--muted); transition: border-color .2s, box-shadow .2s, color .2s; }
  .pv-tab:hover { border-color: var(--ink); color: var(--ink); }
  .pv-tab.on { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
  .pv-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .pv-tab-img { aspect-ratio: 4 / 3; border-radius: 5px; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; }
  .pv-tab-img img { width: 100%; height: 100%; object-fit: contain; }
  .pv-tab-img .ico { width: 60%; color: var(--muted); }
  .pv-tab-num { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .pv-tab-name { font-size: 12px; font-weight: 600; line-height: 1.3; }
  .pv-tab-size { font-size: 11px; color: var(--muted); }
  .print-row { cursor: pointer; transition: border-color .2s, background .2s; }
  .print-row.viewing { border-color: var(--ink); background: var(--white); }
  .summary-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; }
  .summary-box dl { display: grid; grid-template-columns: auto 1fr; gap: 11px 20px; font-size: 16px; }
  .summary-box dt { color: var(--muted); }
  .summary-box dd { text-align: right; font-weight: 600; }
  .total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
  .total span { font-size: 16px; color: var(--muted); }
  .total strong { font-size: 56px; font-family: 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif; font-weight: 300; color: var(--ink); }
  .summary-box .btn { width: 100%; margin-top: 16px; }
  .summary-box .small { font-size: 13px; color: var(--muted); margin-top: 10px; text-align: center; }
  .form-error { display: none; margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--grey); color: var(--ink); font-size: 13px; font-weight: 600; }

  /* Confirmation */
  .confirm { display: none; text-align: center; padding: 56px 28px; }
  .confirm.show { display: block; }
  .confirm .ref { display: inline-block; margin: 16px 0; padding: 10px 18px; border-radius: 8px; background: var(--grey); color: var(--ink); font-weight: 700; letter-spacing: 0.08em; }
  .confirm h3 { font-size: 49px; }
  .confirm p { color: var(--muted); max-width: 520px; margin: 0 auto; }

  /* FAQ */
  .faq { max-width: 820px; }
  .faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
  .faq summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: '+'; color: var(--ink); font-size: 22px; line-height: 1; }
  .faq details[open] summary::after { content: '−'; }
  .faq details p { color: var(--muted); margin-top: 12px; }

  /* CTA band + footer */
  /* Latest news & discount codes sign-up */
  .news-band { background: var(--white); border-top: 1px solid var(--line); padding: 64px 0; }
  .news-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  @media (max-width: 860px) { .news-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
  .news-band h2 { font-size: clamp(44px, 4.4vw, 72px); margin: 10px 0 12px; }
  .news-band .news-lead { color: var(--muted); font-size: clamp(16px, 1.15vw, 18px); max-width: 520px; }
  .news-perks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .news-perks span { padding: 6px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
  .news-form { display: flex; gap: 10px; flex-wrap: wrap; }
  .news-form input[type=email] { flex: 1 1 240px; min-width: 0; padding: 15px 16px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; font: 400 16px 'Inter', sans-serif; color: var(--ink); }
  .news-form input[type=email]:focus { outline: none; border-color: var(--ink); }
  .news-form .btn { flex: 0 0 auto; }
  .news-form .btn[disabled] { opacity: .6; cursor: wait; }
  .news-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .news-small { margin-top: 12px; font-size: 13px; color: var(--muted); }
  .news-small a { color: var(--ink); }
  .news-msg { margin-top: 12px; font-size: 14px; color: #a12a1f; min-height: 1em; }
  .news-done { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: 22px; }
  .news-done strong { display: block; font-size: 18px; margin-bottom: 6px; }
  .news-done p { color: var(--muted); font-size: 15px; }
  .news-code { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; flex-wrap: wrap; }
  .news-code code { font: 700 22px/1 'Inter', monospace; letter-spacing: .08em; padding: 12px 16px; border: 2px dashed var(--maroon-dark); border-radius: 8px; background: #fff; }
  .news-code .btn { padding: 11px 18px; }
  .cta-band { background: var(--bg); color: var(--ink); border-top: 1px solid var(--line); padding: 72px 0; text-align: center; }
  .cta-band h2 { font-size: clamp(44px, 5.8vw, 64px); margin-bottom: 14px; }
  .cta-band p { color: var(--muted); margin-bottom: 28px; }
  .cta-band .btn { background: var(--maroon); color: var(--ink); }
  .cta-band .btn:hover { background: var(--maroon-dark); }
  footer { background: var(--bg); padding: 48px 0 32px; font-size: 14px; color: var(--muted); }
  .footer-grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
  .footer-grid a { text-decoration: none; }
  .footer-grid a:hover { color: var(--ink); }
  .footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
  .check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; margin-top: 14px; font-size: 13px; color: var(--muted); cursor: pointer; }
  .check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); }
  .check a { color: var(--ink); }
  /* Cookie banner */
  #cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900; max-width: 720px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; display: none; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
  #cookie-banner.show { display: flex; }
  #cookie-banner p { flex: 1 1 320px; min-width: 0; }
  @media (max-width: 500px) { #cookie-banner p { flex-basis: 100%; } #cookie-banner .btn { flex: 1 1 0; } }
  #cookie-banner a { color: var(--ink); }
  #cookie-banner .btn { padding: 11px 20px; font-size: 14px; }
  .footer-base { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; }
  /* Sign-in: one card used two ways — full-screen preview gate (html.locked) or a pop-up for customers (#login.open) */
  html.locked body > *:not(#login):not(script) { display: none !important; }
  #login { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; padding: 24px; background: var(--bg); }
  html.locked #login, #login.open { display: flex; }
  #login.open { background: rgba(10,10,10,0.55); backdrop-filter: blur(4px); }
  html.locked #login .pw-close { display: none; }
  .pw-card { position: relative; width: 100%; max-width: 380px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 32px; text-align: center; box-shadow: var(--shadow); }
  .pw-card .brand-name { font-size: 23px; display: block; }
  .pw-card .logo-img { width: 200px; margin: 0 auto; }
  .pw-sub { font-size: 13px; color: var(--muted); margin: 8px 0 28px; }
  .pw-card input[type="email"], .pw-card input.pw-code { width: 100%; padding: 14px; border: 1.5px solid var(--line); border-radius: 8px; font: 500 16px 'Inter', sans-serif; text-align: center; outline: none; margin-bottom: 16px; }
  .pw-card input.pw-code { letter-spacing: 0.3em; font-size: 20px; }
  .pw-card input:focus { border-color: var(--ink); }
  .pw-card .btn { width: 100%; }
  .pw-card .btn:disabled { opacity: 0.6; pointer-events: none; }
  .pw-link { background: none; border: 0; margin-top: 16px; font: 600 13px 'Inter', sans-serif; color: var(--muted); text-decoration: underline; cursor: pointer; }
  .pw-close { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 6px; }
  .pw-error { min-height: 18px; margin-top: 12px; font-size: 13px; font-weight: 600; color: #B42318; }
  .pw-card.shake { animation: pw-shake 0.35s; }
  @keyframes pw-shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
  /* Header account link and its little menu */
  .nav-links .auth-item { position: relative; }
  .auth-btn { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0; }
  .auth-menu { display: none; position: absolute; right: 0; top: calc(100% + 12px); min-width: 230px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; z-index: 50; text-align: left; }
  .auth-menu.open { display: block; }
  .auth-menu .auth-email { font-size: 13px; color: var(--muted); word-break: break-all; white-space: pre-line; margin-bottom: 12px; }
  .auth-menu .btn { width: 100%; padding: 10px 16px; font-size: 14px; }

  /* ===== Page-wide text sizes =====
     One set of sizes for every section, matching the intro / How it works section.
     Section headings · intro lines · body text · list text. Change them here to resize the whole page. */
  .eyebrow { font-size: 14px; }
  .section-head h2, .section-head h1, #print h2, .long-section h2, .bike-section h2, .top3-head h2, .cta-band h2, .room-caption h2 { font-size: clamp(49px, 4.93vw, 84px); }
  .feature-text h3, .merch-text h3, .mug-details h3, .size-intro h3 { font-size: clamp(38px, 3.3vw, 56px); }
  .section-head p, .print-lead, .long-section p, .bike-section p, .top3-head p, .size-intro p, .cta-band p { font-size: clamp(17px, 1.25vw, 20px); }
  .feature-text p, .merch-text p, .mug-details p, .step p, .option-card p, .faq details p { font-size: clamp(16px, 1.15vw, 18px); }
  .spec-list strong, .hero-points strong { font-size: clamp(17px, 1.25vw, 20px); }
  .spec-list span, .hero-points div, .opt-list li, .mug-specs div { font-size: clamp(15px, 1.05vw, 17px); }
  .spec-list li { grid-template-columns: 32px 1fr; gap: 16px; }
  .spec-list .tick { width: 32px; height: 32px; }
  .size-intro p { max-width: 760px; }
  .faq summary { font-size: clamp(18px, 1.3vw, 21px); }
  .merch-item figcaption { font-size: 16px; }
  footer { font-size: 15px; }

  /* ===== Shop pages (/studio-sets/, /mugs/, /hoodie/, /calendar/) and the homepage Shop band ===== */
  .shop-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  @media (max-width: 1000px) { .shop-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .shop-cards { grid-template-columns: minmax(0, 1fr); } }
  .shop-card { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--muted); font-size: 15px; transition: box-shadow .25s, transform .25s; }
  .shop-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
  .shop-card strong { font-family: 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif; font-weight: 400; font-size: clamp(32px, 2.6vw, 41px); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); }
  .shop-card::after { content: 'See more \2192'; margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
  .mugs-intro { margin-top: 0; padding-top: 0; border-top: 0; }
  .merch-text h1 { font-size: clamp(49px, 4.93vw, 84px); margin: 10px 0 14px; }

  /* Colour extras under a colour field (colourExtras in core.js): swatches, optional exact shade, optional paint code */
  .colour-extras { margin-top: 10px; }
  .colour-extras .cx-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
  .colour-extras .cx-swatch { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white); font: 600 12px 'Inter', sans-serif; color: var(--muted); cursor: pointer; transition: border-color .2s, color .2s; }
  .colour-extras .cx-swatch i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18); flex: none; }
  .colour-extras .cx-swatch:hover, .colour-extras .cx-swatch.on { border-color: var(--ink); color: var(--ink); }
  .colour-extras .cx-swatch.on { box-shadow: 0 0 0 1px var(--ink); }
  .colour-extras .shade-row { margin-top: 10px; display: flex; align-items: center; min-height: 34px; }
  .colour-extras .shade-add, .colour-extras .shade-clear { background: none; border: 0; padding: 4px 0; font: 600 13px 'Inter', sans-serif; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .colour-extras .shade-add[hidden], .colour-extras .shade-pick[hidden] { display: none; }
  .colour-extras .shade-pick { display: inline-flex; align-items: center; gap: 10px; }
  .colour-extras .shade-pick input[type=color] { width: 44px; height: 32px; padding: 2px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--white); cursor: pointer; }
  .colour-extras .shade-pick code { font: 600 13px ui-monospace, Menlo, monospace; color: var(--ink); }
  .colour-extras .shade-clear { color: var(--muted); font-weight: 500; }
  .colour-extras .paint-code-field { margin-top: 12px; }
  .colour-extras .paint-code-field .hint { margin-top: 6px; }

  /* Custom wrap extra (step 03): example livery picture, upload box for their design, PDF thumbnails */
  .engine-examples.wrap-example { grid-template-columns: 1fr; max-width: 220px; margin: 4px 0 4px; }
  .wrap-card { margin: 0; cursor: default; }
  .wrap-card:hover { border-color: var(--line); }
  .wrap-drop { padding: 20px 16px; }
  .wrap-drop strong { margin-top: 0; font-size: 15px; }
  .thumb-file { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--bg); font: 700 13px 'Inter', sans-serif; color: var(--ink); padding: 4px 6px; text-align: center; }
  .thumb-file small { display: block; max-width: 100%; font-size: 10px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #wrap-msg { margin-top: 8px; color: #9b2c2c; }