/* Layout: night garage. Full-bleed photo and film moments, short punchy blocks between them.
   Single dark look on purpose: the shop is lit by white hex LEDs; the accent is the blue of the MJcustoms sign. */
:root {
  --ink: #0d0e10;        /* page ground, blue-black like the shop ceiling */
  --panel: #15181c;      /* raised surfaces */
  --line: #262a30;       /* hairlines */
  --led: #f2f4f6;        /* LED white, primary text */
  --dim: #9aa1aa;        /* secondary text */
  --accent: #0074e1;     /* logo blue */
  --accent-hi: #3d9bf2;  /* logo blue, lifted for text on dark */
  --ok: #3ccf6e;         /* open-now dot */
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --bar-h: 64px;
  color-scheme: dark;
  /* scrollcraft engine tokens, mapped onto the page palette */
  --sc-canvas: var(--ink); --sc-surface: var(--panel);
  --sc-ink: var(--led); --sc-ink-soft: var(--dim);
  --sc-accent: var(--accent); --sc-accent-ink: #fff;
  --sc-font-display: var(--display); --sc-font-text: var(--body); --sc-font-mono: var(--mono);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--led); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: .95; text-wrap: balance; margin: 0; text-transform: uppercase; }
h2 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
p { margin: 0; }

.eyebrow { font: 500 .75rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: .6em; margin-bottom: 1rem; }
.eyebrow::before { content: ""; width: .8em; height: .9em; background: var(--accent); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.sub { color: var(--dim); max-width: 52ch; margin-top: 1rem; font-size: 1.05rem; }

.wrap { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section-tight { padding-block: clamp(40px, 6vw, 72px); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem; font: 600 .95rem/1 var(--body); text-decoration: none; border: 1px solid transparent; border-radius: 2px; transition: background .2s, color .2s, border-color .2s; }
.btn-solid { background: var(--accent); color: #fff; }
.btn-solid:hover { background: var(--led); color: var(--ink); }
.btn-line { border-color: rgba(242, 244, 246, .6); color: var(--led); }
.btn-line:hover { background: var(--led); color: var(--ink); }

/* Top bar */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 20; padding: env(safe-area-inset-top, 0px) var(--gutter) 0; height: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 2rem; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.bar.is-solid { background: rgba(13, 14, 16, .9); backdrop-filter: blur(10px); border-color: var(--line); }
.brand { flex: none; display: block; background: var(--accent); padding: 6px 10px; border-radius: 2px; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; gap: 1.5rem; margin-right: auto; align-items: center; }
.nav a { text-decoration: none; font-size: .9rem; color: var(--dim); transition: color .2s; }
.nav a:hover, .nav a[aria-current] { color: var(--led); }
.nav .nav-shop { color: var(--led); border: 1px solid var(--accent); padding: .35rem .7rem; border-radius: 2px; }
.bar-end { display: flex; align-items: center; gap: .8rem; margin-left: auto; }
.lang { display: flex; border: 1px solid var(--line); border-radius: 2px; }
.lang button { background: none; border: 0; color: var(--dim); cursor: pointer; font: 500 .75rem/1 var(--mono); padding: .55rem .55rem; letter-spacing: .08em; }
.lang button[aria-pressed="true"] { background: var(--led); color: var(--ink); }
.call { font: 600 .9rem/1 var(--body); text-decoration: none; background: var(--accent); color: #fff; padding: .7rem .9rem; border-radius: 2px; }
@media (max-width: 900px) {
  .nav a:not(.nav-shop) { display: none; }
  .bar { gap: .8rem; }
}
@media (max-width: 420px) {
  .bar { gap: .45rem; }
  .bar-end { gap: .45rem; }
  .brand img { height: 17px; }
  .brand { padding: 6px 7px; }
  .nav .nav-shop { padding: .35rem .55rem; }
  .lang button { padding: .5rem .4rem; }
  .call { padding: .65rem .6rem; font-size: .85rem; }
}

/* Hero: plate, headline, LED plane. The engine pins the stage and publishes --sc-p. */
.garage { position: relative; }
.garage-stage { height: 100vh; height: 100svh; overflow: hidden; }
.plane { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 62%; transform-origin: 44% 48%; will-change: transform; }
.plane-back { transform: scale(calc(1.3 - .3 * var(--sc-p, 0))); filter: brightness(calc(.7 + .25 * var(--sc-p, 0))); }
/* bloom starts registered on the real tubes, then comes toward the camera faster than the room */
.plane-front { z-index: 2; pointer-events: none; mix-blend-mode: screen; transform: translateY(calc(var(--sc-p, 0) * -9vh)) scale(calc(1.3 + .25 * var(--sc-p, 0))); opacity: calc(.35 + .2 * var(--sc-p, 0)); }
/* nearest plane: floor shade that rises faster than everything behind it */
.plane-floor { position: absolute; left: 0; right: 0; bottom: -20vh; height: 60vh; z-index: 2; pointer-events: none; background: linear-gradient(to top, var(--ink) 35%, rgba(13,14,16,0)); transform: translateY(calc(var(--sc-p, 0) * -14vh)); }
.garage-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, var(--ink) 0%, rgba(13,14,16,.75) 30%, rgba(13,14,16,0) 62%), linear-gradient(to right, rgba(13,14,16,.55), rgba(13,14,16,0) 60%); }
.garage-copy { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(48px, 9vh, 100px); max-width: 900px; }
.open-now { display: inline-flex; align-items: center; gap: .55rem; font: 500 .78rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: rgba(13,14,16,.6); border: 1px solid var(--line); padding: .55rem .75rem; border-radius: 2px; margin: 0 0 1.2rem; }
.open-now .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.open-now.is-open .dot { background: var(--ok); box-shadow: 0 0 0 4px rgba(60, 207, 110, .18); }
.hero-title { font-size: clamp(3rem, 9.5vw, 7.6rem); font-weight: 900; letter-spacing: 0; }
.hero-title .line { display: block; }
.hero-title .l2 { color: color-mix(in oklab, var(--dim), var(--accent-hi) calc(var(--sc-p, 0) * 100%)); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
@media (max-width: 760px) {
  .plane { object-position: 40% 60%; transform-origin: 40% 45%; }
  .plane-front { transform: translateY(calc(var(--sc-p, 0) * -6vh)) scale(calc(1.3 + .2 * var(--sc-p, 0))); }
}

/* Three tiles */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tile { background: var(--ink); padding: clamp(1.5rem, 3vw, 2.4rem); text-decoration: none; display: flex; flex-direction: column; gap: .8rem; min-height: 15rem; transition: background .25s; }
.tile:hover { background: var(--panel); }
.tile h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.tile p { color: var(--dim); flex: 1; }
.tile-go { font: 600 .9rem/1 var(--body); color: var(--led); }
.tile:hover .tile-go { color: var(--accent-hi); }
.makes { margin-top: 1.2rem; font: 400 .8rem/1.5 var(--mono); color: var(--dim); letter-spacing: .04em; }
@media (max-width: 760px) { .tiles { grid-template-columns: 1fr; } .tile { min-height: 0; } }

/* Recent jobs ticker */
.ticker { overflow: hidden; border-block: 1px solid var(--line); padding-block: 1rem; }
.ticker-track { display: flex; gap: 3rem; width: max-content; animation: ticker 40s linear infinite; }
.ticker span { font: 800 1.3rem/1 var(--display); text-transform: uppercase; white-space: nowrap; }
.ticker i { font: 400 .75rem/1 var(--mono); font-style: normal; color: var(--dim); text-transform: none; margin-left: .5rem; letter-spacing: .04em; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Drift story (peak): three chapters, find → weld → drift. Each picture holds on the left while its copy
   passes on the right, and every edge of it melts into the page, so one chapter dissolves into the next.
   The copy's lines rise in with the scroll (scrollcraft cues) and the welding clip follows the scroll.
   On a phone the picture sits on top and the copy follows underneath; nothing is laid over the picture. */
.story { position: relative; padding-bottom: clamp(32px, 8vh, 96px); }
.chapter { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); min-height: 150vh; min-height: 150svh; }
.chapter + .chapter { margin-top: -30vh; margin-top: -30svh; }
.chapter-media { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 98%), linear-gradient(to bottom, transparent, #000 18%, #000 80%, transparent);
  mask-image: linear-gradient(to right, #000 55%, transparent 98%), linear-gradient(to bottom, transparent, #000 18%, #000 80%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.slides, .slides img, .story-video, .scrub-poster, .story-scrub { position: absolute; inset: 0; width: 100%; height: 100%; }
.slides img, .story-video, .scrub-poster, .story-scrub { max-width: none; object-fit: cover; }
/* the upright welding clip: keep the torch and the welder in frame when a wide column crops it */
.scrub-poster, .story-scrub { object-position: 50% 58%; }
.story-scrub { opacity: 0; transition: opacity .4s ease; }
.story-scrub.is-live { opacity: 1; }
/* a slide fades in and eases back from a slight zoom; once hidden it resets for its next turn */
.slides img { opacity: 0; transform: scale(1.08); transition: opacity 1.4s ease, transform 0s linear 1.4s; }
.slides img.is-on { opacity: 1; transform: scale(1); transition: opacity 1.4s ease, transform 9s linear; }
.slides { transition: opacity .8s ease; }
.chapter-media.has-video .slides { opacity: 0; }
.story-video { transition: opacity .55s ease; }
.chapter-media.is-dip .story-video { opacity: .25; }
.chapter-text { align-self: center; max-width: 560px; padding: 0 var(--gutter) 0 clamp(8px, 2vw, 32px); }
.chapter-text h2 { font-size: clamp(2.4rem, 4.2vw, 4.4rem); }
.step-no { color: var(--accent-hi); }
@media (max-width: 699px) {
  .chapter { grid-template-columns: 1fr; min-height: 0; }
  .chapter + .chapter { margin-top: 0; }
  .chapter-media { position: relative; height: auto; aspect-ratio: 4 / 5;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 70%, transparent);
    -webkit-mask-composite: source-over; mask-composite: add; }
  .chapter-text { position: relative; max-width: none; margin-top: -1rem; padding: 0 var(--gutter) clamp(56px, 12svh, 104px); }
}

/* E36 build */
.build-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.spec { margin: 0; border-top: 1px solid var(--line); }
.spec div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.spec dt { font: 500 .72rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.spec dd { margin: 0; font-weight: 600; }
.yt { margin-top: 1.8rem; display: inline-flex; align-items: center; gap: 1rem; text-decoration: none; padding: .8rem 1.3rem .8rem .8rem; border: 1px solid var(--line); border-radius: 2px; transition: border-color .2s; }
.yt:hover { border-color: var(--accent); }
.yt-play { width: 44px; height: 50px; background: var(--accent); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); position: relative; flex: none; }
.yt-play::after { content: ""; position: absolute; left: 17px; top: 17px; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.yt small { display: block; font: 400 .75rem/1.4 var(--mono); color: var(--dim); margin-top: .2rem; }
@media (max-width: 820px) { .build-grid { grid-template-columns: 1fr; } }
.build-gallery { margin-top: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 12px; }
.bg-main { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #111; }
.bg-main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; display: block; }
.bg-thumbs { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bg-thumbs button { padding: 0; border: 2px solid transparent; background: #111; cursor: pointer; overflow: hidden; opacity: .6; transition: opacity .2s, border-color .2s; min-height: 0; }
.bg-thumbs button:hover, .bg-thumbs button[aria-pressed="true"] { opacity: 1; }
.bg-thumbs button[aria-pressed="true"] { border-color: var(--accent); }
.bg-thumbs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bg-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 820px) {
  .build-gallery { grid-template-columns: 1fr; }
  .bg-main { aspect-ratio: 1; }
  .bg-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; }
  .bg-thumbs button { aspect-ratio: 1; }
}

/* Rental: the trailer is towed in by scroll and hitches to the van (signature move) */
.rent { overflow: hidden; }
.rent-head { max-width: 760px; }
.rig { --tow: clamp(0, calc((var(--sc-p, 1) - .06) / .26), 1); display: grid; grid-template-columns: minmax(0, 1fr) clamp(28px, 5vw, 72px) minmax(0, 1fr); align-items: start; margin-top: clamp(28px, 5vw, 56px); }
.rig-card { margin: 0; min-width: 0; position: relative; }
.rig-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
@media (max-width: 760px) {
  .rig { grid-template-columns: 1fr; grid-template-rows: auto 56px auto; }
  .rig-van { grid-row: 1; }
  .hitch { grid-row: 2; align-self: stretch; justify-self: center; width: 16px; height: auto; top: 0; margin: 0; }
  .hitch::before { left: 6px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; transform-origin: top; transform: scaleY(clamp(0, calc((var(--tow) - .85) * 7), 1)); }
  .hitch i { right: auto; left: 0; top: calc(50% - 8px); }
  .rig-trailer { grid-row: 3; }
  .rig-card img { aspect-ratio: 16 / 10; }
}
.rig-card figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 1rem; padding-top: .8rem; }
.rig-card figcaption b { font: 800 clamp(1.3rem, 2.4vw, 2rem)/1 var(--display); text-transform: uppercase; }
.rig-card figcaption > span { color: var(--dim); }
.rig-card strong { color: var(--led); font: 900 clamp(1.6rem, 3vw, 2.4rem)/1 var(--display); }
.rig-trailer { transform: translateX(calc((1 - var(--tow)) * -85%)) rotate(calc((1 - var(--tow)) * -2deg)); will-change: transform; }
.hitch { align-self: start; margin-top: calc((min(100%, 520px)) * 0); height: 12px; position: relative; top: 55%; }
.hitch::before { content: ""; position: absolute; left: -8px; right: -8px; top: 4px; height: 4px; background: var(--dim); transform-origin: right; transform: scaleX(clamp(0, calc((var(--tow) - .85) * 7), 1)); }
.hitch i { position: absolute; right: -14px; top: -2px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--ink); opacity: clamp(0, calc((var(--tow) - .95) * 20), 1); }
.rent-cta { margin-top: 2rem; }

/* Reviews: rating, then an endless rail of Google reviews (pauses on hover) */
.rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; text-decoration: none; }
.rating-num { font: 900 clamp(4rem, 9vw, 6.4rem)/.85 var(--display); }
.stars { color: #fbbc04; font-size: 1.6rem; letter-spacing: .1em; }
.rating-meta b { display: block; font-weight: 600; }
.rating-meta small { color: var(--accent-hi); font-size: .9rem; }
.rating:hover .rating-meta small { text-decoration: underline; }
.reviews-rail-wrap { position: relative; margin-top: 2.2rem; }
.review-rail { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-block: .3rem; cursor: grab; mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
.review-rail::-webkit-scrollbar { display: none; }
.review-rail.is-dragging { cursor: grabbing; user-select: none; }
.review-rail:empty { display: none; }
.review-track { display: flex; gap: 1rem; width: max-content; padding-inline: var(--gutter); }
.rail-nav { display: flex; gap: .5rem; justify-content: flex-end; max-width: 1180px; margin: 0 auto .8rem; padding-inline: var(--gutter); }
.rail-nav button { width: 44px; height: 44px; border: 1px solid var(--line); background: var(--panel); color: var(--led); font-size: 1.2rem; border-radius: 2px; cursor: pointer; }
.rail-nav button:hover { border-color: var(--accent); }
.review { flex: none; width: min(320px, 78vw); display: flex; flex-direction: column; gap: .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 1.2rem; text-decoration: none; transition: border-color .2s; }
.review:hover { border-color: var(--accent); }
.review .stars { font-size: 1rem; }
.review p { color: #d3d7dc; flex: 1; margin: 0; }
.review-photo { position: relative; height: 170px; border-radius: 3px; overflow: hidden; background: var(--ink); }
.review-photo img { width: 100%; height: 100%; object-fit: cover; }
.review-photo .more { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.65); color: #fff; font: 500 .75rem/1 var(--mono); padding: .35rem .45rem; border-radius: 2px; }
.review p { white-space: pre-line; }
.review .ph { height: 150px; border: 1px dashed var(--line); border-radius: 3px; display: grid; place-items: center; color: var(--dim); font: 400 .75rem/1.4 var(--mono); text-align: center; padding: 1rem; }
.review.is-sample p { color: var(--dim); font-style: italic; }
.review footer { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--dim); }
.review footer b { color: var(--led); font-weight: 600; }

/* Booking dialog */
.book { width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 32px); border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--led); padding: 0; }
.book::backdrop { background: rgba(5, 6, 8, .72); backdrop-filter: blur(3px); }
.book-form { padding: clamp(20px, 4vw, 32px); display: grid; gap: 1rem; position: relative; }
.book h2 { font-size: clamp(2rem, 5vw, 2.8rem); padding-right: 2.5rem; }
.book .sub { margin: 0; }
.book[data-mode="servis"] .for-prenajom, .book[data-mode="prenajom"] .for-servis { display: none; }
.book-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 1px solid var(--line); background: none; color: var(--led); font-size: 1.4rem; border-radius: 2px; cursor: pointer; }
.book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.book-grid label { display: grid; gap: .35rem; min-width: 0; }
.book-grid label.wide { grid-column: 1 / -1; }
.book-grid span { font: 500 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.book-grid input, .book-grid select, .book-grid textarea { width: 100%; min-height: 44px; background: var(--ink); color: var(--led); border: 1px solid var(--line); border-radius: 2px; padding: .6rem .7rem; font: 400 1rem/1.3 var(--body); }
.book-grid :is(input, select, textarea):focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.book-send { display: flex; flex-wrap: wrap; gap: .6rem; }
.book-send .btn { cursor: pointer; flex: 1 1 200px; }
.book-status { min-height: 1.2em; margin: 0; color: var(--accent-hi); font-size: .9rem; }
.book-call { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; border-top: 1px solid var(--line); padding-top: 1rem; color: var(--dim); }
.book-call a { font: 900 1.8rem/1 var(--display); color: var(--led); text-decoration: none; }
.copy { background: none; border: 1px solid var(--line); color: var(--dim); font: 500 .75rem/1 var(--mono); padding: .5rem .6rem; border-radius: 2px; cursor: pointer; }
@media (max-width: 520px) { .book-grid { grid-template-columns: 1fr; } }

/* Contact */
.contact { border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); }
.phone { display: inline-block; font: 900 clamp(2.8rem, 7vw, 5rem)/1 var(--display); text-decoration: none; color: var(--led); }
.phone:hover { color: var(--accent-hi); }
.facts { margin: 0; display: grid; gap: 1.6rem; align-content: start; }
.facts dt { font: 500 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: .6rem; }
.facts dd { margin: 0; }
.hours { border-collapse: collapse; width: 100%; max-width: 340px; font-variant-numeric: tabular-nums; }
.hours th, .hours td { text-align: left; font-weight: 400; padding: .3rem 0; }
.hours td { text-align: right; color: var(--dim); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--accent-hi); font-weight: 600; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

.foot { border-top: 1px solid var(--line); padding-block: 2rem calc(2rem + env(safe-area-inset-bottom, 0px)); color: var(--dim); font-size: .85rem; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; }

/* Shop page */
.shop-hero { padding: calc(var(--bar-h) + clamp(56px, 10vw, 120px)) 0 clamp(40px, 6vw, 72px); background: radial-gradient(ellipse at 80% 0%, rgba(26, 127, 224, .22), rgba(26, 127, 224, 0) 60%); border-bottom: 1px solid var(--line); }
.shop-hero h1 { font-size: clamp(3rem, 9vw, 7rem); font-weight: 900; max-width: 14ch; }

@media (prefers-reduced-motion: no-preference) and (max-width: 0px) {
  html { scroll-behavior: auto; }
  .plane-back, .plane-front, .plane-floor { transform: none; }
  .rig { --tow: 1; }
  .ticker-track { animation: none; flex-wrap: wrap; width: auto; }
  .slides img, .slides img.is-on { transform: none; transition: opacity .01s; }
}

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(24px, 6vw, 96px); align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 1.1rem 2.2rem 1.1rem 0; font-weight: 600; font-size: 1.05rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: .9rem; font: 500 1.4rem/1 var(--mono); color: var(--accent-hi); }
.faq details[open] summary::after { content: "–"; }
.faq summary:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.faq details p { margin: 0 0 1.2rem; color: var(--dim); max-width: 60ch; }
@media (max-width: 820px) { .faq-grid { grid-template-columns: 1fr; } }
.book-consent { margin: 0; font-size: .82rem; color: var(--dim); }
.book-consent a { color: var(--accent-hi); }

/* Plain text pages: privacy, 404 */
.page-text main { padding: calc(var(--bar-h) + clamp(40px, 8vw, 96px)) 0 clamp(48px, 8vw, 96px); }
.page-text h1 { font-size: clamp(2.6rem, 7vw, 5rem); margin: 0 0 1.5rem; }
.page-text h2 { font-size: 1.8rem; margin: 2.4rem 0 .6rem; }
.page-text .prose { max-width: 70ch; }
.page-text .prose p, .page-text .prose li { color: var(--dim); }
.page-text .prose a:not(.btn) { color: var(--accent-hi); }
.page-text .prose p { margin: 0 0 1rem; }
.page-text .prose ul { padding-left: 1.2rem; margin: 0 0 1rem; }

/* Shop: one screen, one word */
.soon-main { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--bar-h) + 6vh) 0 8vh;
  background: radial-gradient(ellipse at 75% 20%, rgba(0, 116, 225, .22), rgba(0, 116, 225, 0) 60%); }
.soon-word { font-size: clamp(6rem, 26vw, 22rem); font-weight: 900; line-height: .8; letter-spacing: -.01em; margin: 0 0 clamp(1.2rem, 3vw, 2.2rem); }
.soon-line { font-size: clamp(1.8rem, 4vw, 3.2rem); max-width: 18ch; }