/* ---------- fonts: two self-hosted variable files ---------- */
@font-face { font-family: "Anybody"; src: url("/assets/fonts/anybody-latin-wght-normal.woff2") format("woff2-variations"), url("/assets/fonts/anybody-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("/assets/fonts/inter-tight-latin-wght-normal.woff2") format("woff2-variations"), url("/assets/fonts/inter-tight-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --purple: #A0469C; --lime: #CCDB1E; --charcoal: #363B3B; --plate: #2A2A2A; --ink: #121415; --black: #0B0B0D;
  --paper: #FFFFFF; --mist: #F1F3EE; --line: #DDE0D8; --muted: #5D6361; --muted-light: #A8AFAB;
  --display: "Anybody", "Archivo Black", Impact, sans-serif;
  --body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1200px; --gutter: 24px; --radius: 24px; --radius-sm: 16px; --pill: 999px;
  --fs: clamp(17px, 1vw + 13px, 19px);
  --h1: clamp(40px, 4vw + 24px, 96px);
  --h2: clamp(30px, 2.6vw + 18px, 56px);
  --h3: clamp(21px, 0.8vw + 17px, 26px);
  --sec: clamp(64px, 9vw, 140px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 var(--fs)/1.55 var(--body); color: var(--ink); background: var(--paper); font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -0.015em; margin: 0 0 0.4em; text-wrap: balance; }
h1 { font-size: var(--h1); font-weight: 900; letter-spacing: -0.02em; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.15; }
h4 { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; font-family: var(--body); font-weight: 600; color: var(--muted); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
em { font-style: normal; color: var(--lime); }
.dark em { color: var(--lime); }
section:not(.dark):not(.hero) em { color: var(--purple); }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2 * var(--gutter), 820px); }
.lede { font-size: clamp(18px, 1.2vw + 14px, 22px); line-height: 1.5; max-width: 62ch; color: var(--charcoal); }
.dark .lede { color: #d9ddd6; }
.kicker { font: 600 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--purple); margin: 0 0 18px; }
.dark .kicker { color: var(--lime); }
.note { font-size: 15px; color: var(--muted); max-width: 70ch; }
.dark .note { color: var(--muted-light); }
/* links inside body copy: the text keeps its color and carries a brand underline, so a link never reads as "visited" */
.sec p a:not(.btn), .sec li a:not(.btn), .sec figcaption a:not(.btn) { color: inherit; text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; }
.sec p a:not(.btn):hover, .sec li a:not(.btn):hover { color: var(--purple); }
.dark p a:not(.btn), .dark li a:not(.btn) { text-decoration-color: var(--lime); }
.dark p a:not(.btn):hover, .dark li a:not(.btn):hover { color: var(--lime); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--lime); color: var(--ink); padding: 10px 16px; border-radius: var(--pill); z-index: 100; }
.skip:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
/* the skip link's target takes focus so screen readers follow the jump, but it is a whole page
   region, so it must not draw a ring around everything. It is never a tab stop, so nothing is lost. */
#main:focus, #main:focus-visible { outline: none; }

/* model names on the cards are links: tall enough to tap */
.model-body h3 a { display: inline-block; padding: 10px 0; margin: -10px 0; text-decoration: none; }
/* ---------- sections ---------- */
.sec { padding: var(--sec) 0; }
.dark { background: var(--black); color: #fff; }
.mist { background: var(--mist); }
.sec + .sec.dark, .sec.dark + .sec { position: relative; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: var(--pill); font: 600 17px/1 var(--body); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s; text-align: center; line-height: 1.2; padding-block: 12px; max-width: 100%; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-lime { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.btn-lime:hover { background: #d9e63a; }
.btn-purple { background: var(--purple); color: #fff; border-color: var(--purple); }
.btn-purple:hover { background: #b055ac; }
.btn-ghost { background: transparent; color: var(--charcoal); border-color: rgba(54, 59, 59, .5); }
.btn-ghost:hover { border-color: var(--charcoal); }
.btn-ghost-light, .dark .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-ghost-light:hover, .dark .btn-ghost:hover { border-color: #fff; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); transition: background .3s, border-color .3s; }
.hdr-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; min-height: 68px; }
/* min-width so the grid can never take the shortfall out of the logo: at 900px with six nav
   items it was compressed to 73px against a natural 123, 40 percent out of aspect. */
.logo { display: inline-flex; align-items: center; min-height: 44px; min-width: 123px; }
.logo img { width: 123px; height: 38px; }
.nav { display: none; justify-self: center; align-items: center; gap: 2px; font-weight: 600; font-size: 15px; letter-spacing: -0.005em; }
.nav a {
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 14px; border-radius: var(--pill); position: relative;
  color: inherit; opacity: .72; white-space: nowrap;
  transition: opacity .18s var(--ease), background-color .18s var(--ease);
}
.nav a:hover { opacity: 1; background: rgba(18, 20, 21, .06); }
.nav a[aria-current="page"] { opacity: 1; }
/* the current page is marked by a rule under the label, inset to the text rather than the cell,
   so it reads as an underline and not as a second button */
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 7px;
  height: 2px; border-radius: 2px; background: var(--purple);
}
.hdr-cta { display: flex; align-items: center; gap: 18px; }
/* min-width is the floor, not the padding. Below 1000px this link reads "Call", which at 6px of
   padding measured 37px wide and failed the 44px target on all 22 pages. Padding follows the text;
   a floor does not. */
.tel { text-decoration: none; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 6px; opacity: .84; transition: opacity .18s var(--ease); }
.tel:hover { opacity: 1; }
.tel-full { display: none; }
.cta-long { display: none; }
.burger { width: 44px; height: 44px; border: 0; background: transparent; color: inherit; display: grid; place-content: center; gap: 5px; cursor: pointer; padding: 0; }
.burger span { display: block; width: 22px; height: 2px; background: currentColor; transition: transform .25s, opacity .25s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobnav { position: fixed; inset: 64px 0 0; background: var(--paper); padding: 20px var(--gutter) 40px; display: flex; flex-direction: column; gap: 4px; overflow: auto; z-index: 49; }
.mobnav a { text-decoration: none; font: 700 26px/1.2 var(--display); padding: 12px 0; border-bottom: 1px solid var(--line); }
.mobnav .mobnav-tel { margin-top: 16px; border: 0; font: 600 18px/1 var(--body); background: var(--lime); border-radius: var(--pill); padding: 16px; text-align: center; }
/* transparent over a dark hero until scrolled */
.hdr-over { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent; color: #fff; }
.hdr-over .btn-lime { border-color: var(--lime); }
.hdr-over.is-solid { background: rgba(11, 11, 13, .86); backdrop-filter: saturate(160%) blur(12px); border-color: rgba(255, 255, 255, .08); }
.hdr-over .mobnav { background: var(--black); color: #fff; }
.hdr-over .mobnav a { border-color: rgba(255, 255, 255, .12); }
/* over a dark hero the hover cell and the current-page rule invert, or they disappear */
.hdr-over .nav a:hover { background: rgba(255, 255, 255, .14); }
.hdr-over .nav a[aria-current="page"]::after { background: var(--lime); }
.hdr-over .mobnav .mobnav-tel { color: var(--ink); }
@media (min-width: 900px) {
  .tel-full { display: inline; } .tel-short { display: none; }
  .cta-long { display: inline; } .cta-short { display: none; }
}
/* The burger goes away only when the full bar arrives, at 1000px. It used to go at 900, which was
   fine while the nav also started at 900. Moving the nav up without moving this left 900 to 999
   with no navigation at all: no links and no button. */
@media (min-width: 1000px) { .burger { display: none; } }
@media (max-width: 899px) { .hdr-cta .btn { display: none; } }

/* ---------- hero: a title sequence (HERO-REWRITE.md v2). Three beats held 4 s each with 600 ms crossfades, then the
   H1 settles and stays. Sub-line and buttons never move. One CSS timeline on opacity and transform; no scroll listeners. ---------- */
.hero { position: relative; color: #fff; background: var(--black); min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
/* the poster and the film fill the screen; phones held upright get a portrait cut of the same film */
.hero-media picture, .hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-media video { opacity: 0; transition: opacity .8s; }
.hero.has-video .hero-media video { opacity: 1; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, 0) 34%, rgba(10, 10, 12, .38) 50%, rgba(10, 10, 12, .58) 66%, rgba(10, 10, 12, .68) 100%); }
@media (min-width: 900px) { .hero-shade { background: linear-gradient(90deg, rgba(10, 10, 12, .60) 0%, rgba(10, 10, 12, .60) 38%, rgba(10, 10, 12, .50) 52%, rgba(10, 10, 12, .26) 68%, rgba(10, 10, 12, 0) 86%), linear-gradient(180deg, rgba(10, 10, 12, 0) 62%, rgba(10, 10, 12, .42) 100%); } }
.hero-copy { position: relative; padding: 88px 0 40px; }
.hero .eyebrow { font: 600 13px/1.35 var(--body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin: 0 0 18px; }
.hero .eyebrow em { font-style: normal; color: var(--lime); }
/* the three beats and the H1 share one grid cell at the H1 size, so the sub-line and buttons below never move */
.hero-stage { display: grid; margin: 0 0 18px; }
.hero-stage .beat, .hero-stage .hero-h1 { grid-area: 1 / 1; margin: 0; max-width: 22ch; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 3.9vw + 16px, 82px); line-height: 1.0; letter-spacing: -0.02em; text-wrap: balance; text-shadow: 0 2px 10px rgba(0, 0, 0, .8), 0 0 36px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(18px); }
/* a long beat is two tiers, not smaller type: the lead sentence at the full beat size, the second sentence under it
   at 55 percent with tighter leading, so every beat stands at the same height */
.hero-stage .beat-sub { display: block; font-size: .55em; line-height: 1.08; margin-top: .18em; color: #fff; }
/* on phones the beats share a 31 px floor (the H1 keeps 34): "A family business." is 348 px wide at 34 px and the column
   is 342, so at 34 px beat 2 broke to three lines; at 31 px every beat holds two */
@media (max-width: 399px) { .hero-stage .beat { font-size: 31px; } }
.hero-stage em { font-style: normal; color: var(--lime); }
/* the timeline, one 32.6 s cycle that loops: beat 1 at 0 s, beat 2 at 4 s, beat 3 at 8 s, the H1 settles at 12 s and
   holds 20 s, then the beats run again. Every hand-over is 600 ms: the outgoing line is fully out after 300 ms and only
   then the incoming line fades in, so two lines are never legible at once. Percentages are seconds over 32.6.
   Every line is one looping animation with no delay. Beat 1 is on screen at 0 percent (the first paint) and fades
   back in over the last 300 ms of the cycle, which is what makes the loop seamless. */
.hero-stage .beat[data-beat="1"] { animation: beat1 32.6s var(--ease) infinite forwards; }
.hero-stage .beat[data-beat="2"] { animation: beat2 32.6s var(--ease) infinite forwards; }
.hero-stage .beat[data-beat="3"] { animation: beat3 32.6s var(--ease) infinite forwards; }
.hero-stage .hero-h1 { animation: h1 32.6s var(--ease) infinite forwards; }
@keyframes beat1 { 0%, 12.27% { opacity: 1; transform: none; } 13.19% { opacity: 0; transform: translateY(-14px); } 99.08% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: none; } }
@keyframes beat2 { 0%, 13.19% { opacity: 0; transform: translateY(18px); } 14.11%, 24.54% { opacity: 1; transform: none; } 25.46%, 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes beat3 { 0%, 25.46% { opacity: 0; transform: translateY(18px); } 26.38%, 36.81% { opacity: 1; transform: none; } 37.73%, 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes h1 { 0%, 37.73% { opacity: 0; transform: translateY(18px); } 38.65%, 98.16% { opacity: 1; transform: none; } 99.08%, 100% { opacity: 0; transform: translateY(-14px); } }
/* settled and still: for reduced motion and without JS. Pausing and resuming at the settled H1 is done in site.js on the
   same animations through the Web Animations API, so nothing here has to restart. */
.hero.is-settled .beat, .hero.is-static .beat { animation: none; opacity: 0; }
.hero.is-settled .hero-h1, .hero.is-static .hero-h1 { animation: none; opacity: 1; transform: none; }
/* persistent: the sub-line and the buttons */
.hero-sub { max-width: 60ch; margin: 0 0 22px; font-size: clamp(16px, .9vw + 12px, 19px); line-height: 1.45; color: rgba(255, 255, 255, .85); text-shadow: 0 2px 10px rgba(0, 0, 0, .85), 0 0 28px rgba(0, 0, 0, .65); }
.hero-sub em { font-style: normal; color: var(--lime); }
.hero-final { opacity: 1; transform: none; visibility: visible; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.tourpill { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--pill); padding: 12px 20px 12px 14px; font: 600 15px/1 var(--body); cursor: pointer; backdrop-filter: blur(8px); }
.tourpill:hover { background: rgba(255, 255, 255, .18); }
.tourpill-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(204, 219, 30, .7); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(204, 219, 30, .7); } 70% { box-shadow: 0 0 0 12px rgba(204, 219, 30, 0); } 100% { box-shadow: 0 0 0 0 rgba(204, 219, 30, 0); } }
@media (min-width: 900px) { .hero-copy { padding: 140px 0 88px; } .hero-stage { margin-bottom: 24px; } }

/* ---------- /game-trailers/: a shorter hero, and full-width model reveals ---------- */
.hero-short { min-height: 68vh; min-height: 68svh; }
.hero-short .hero-copy { padding: 96px 0 40px; }
@media (min-width: 900px) { .hero-short .hero-copy { padding: 120px 0 56px; } }
/* each model section enters like the cards: image rising and scaling from .92, headline 120 ms later, specs after */
.mreveal-grid { display: grid; gap: 28px; align-items: start; }
.mreveal-img { margin: 0; opacity: 0; transform: translateY(28px) scale(.92); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.mreveal-img img { display: block; width: 100%; height: auto; border-radius: var(--radius); aspect-ratio: 16 / 10; object-fit: cover; }
.mreveal h2, .mreveal .lede, .mreveal .specs, .mreveal .price, .mreveal .mreveal-actions, .mreveal .kicker { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mreveal.is-in .mreveal-img { opacity: 1; transform: none; }
.mreveal.is-in h2, .mreveal.is-in .kicker { opacity: 1; transform: none; transition-delay: .12s; }
.mreveal.is-in .lede, .mreveal.is-in .specs, .mreveal.is-in .price, .mreveal.is-in .mreveal-actions { opacity: 1; transform: none; transition-delay: .26s; }
.mreveal .price { font: 800 clamp(22px, 1.4vw + 14px, 30px)/1.1 var(--display); margin: 18px 0 20px; }
.mreveal-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.specs { margin: 20px 0 0; display: grid; gap: 10px 20px; }
.specs div { display: grid; grid-template-columns: minmax(150px, 38%) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.specs dt { font-weight: 600; color: var(--muted); }
.specs dd { margin: 0; }
.mreveal-tour { display: grid; gap: 12px; }
.mreveal-more { margin: 0; }
.linklike { background: none; border: 0; padding: 11px 0; margin: -11px 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.linklike:hover { color: var(--purple); }
@media (min-width: 900px) {
  .mreveal-grid { grid-template-columns: 1.15fr 1fr; gap: 48px 56px; grid-template-areas: "img copy" "tour copy"; }
  .mreveal-img { grid-area: img; }
  .mreveal-copy { grid-area: copy; }
  .mreveal-tour { grid-area: tour; }
}
/* the comparison table: sticky header row and first column, horizontal swipe on phones */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 28px 0 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cmp { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; font-size: 15px; table-layout: fixed; }
.cmp col.cmp-label { width: 22%; }
.table-hint { display: none; margin: 20px 0 -16px; font-size: 14px; color: var(--muted); }
@media (max-width: 899px) { .table-hint { display: block; } }
.cmp th, .cmp td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); background: var(--paper); }
.cmp thead th { position: sticky; top: 0; z-index: 2; font: 800 17px/1.2 var(--display); background: var(--mist); }
.cmp tbody th { position: sticky; left: 0; z-index: 1; font-weight: 600; color: var(--muted); background: var(--paper); min-width: 150px; box-shadow: 1px 0 0 var(--line); }
.cmp thead th:first-child { left: 0; z-index: 3; }
.cmp-price td { font: 800 20px/1.2 var(--display); }
.cmp-actions td { vertical-align: top; }
.cmp-actions td .btn { display: flex; margin: 0 0 8px; max-width: 220px; }
/* starred rows depend on configuration; the screens row carries a sub-line under its label; the footnote sits under a hairline */
.cmp-star { color: var(--purple); font-weight: 700; margin-left: 2px; }
.cmp-subline { display: block; font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--muted); margin-top: 3px; }
.table-foot { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 12px; }
.table-foot p { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: none; margin: 0 0 8px; }
.table-foot p:last-child { margin-bottom: 0; }
.table-footnote { color: var(--charcoal); }
.figure-note { border-top: 1px solid var(--line); margin: 22px 0 0; padding-top: 14px; font-size: 13px;
  line-height: 1.55; letter-spacing: .01em; color: var(--muted); max-width: 78ch; }
/* same thing, different words: one narrow column at the page's normal sizes */
.intro .lede { margin-bottom: 18px; }
.intro p + p:not(.lede) { margin-top: 14px; }
.custom-list-2 { max-width: 62ch; }
@media (min-width: 600px) { .custom-list-2 { grid-template-columns: 1fr 1fr; gap: 10px 32px; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* a photo beside copy, used by how we measure and standard on every build */
.split-grid { display: grid; gap: 28px; align-items: center; }
.split-img { margin: 0; }
.split-img img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.split-fig { margin: 0 0 20px; }
/* For a photograph whose source is smaller than the box it would otherwise fill. Capping the box
   is honest: the alternative is stretching a small file, which the responsive sweep flags and
   which looks soft on a big screen. */
.fig-narrow { max-width: 640px; }
.split-fig .note, .split-img .note { margin-top: 10px; }
/* the tall exterior photo fills the column on phones and sits at its own size beside the copy on wide screens */
@media (min-width: 900px) { .split-grid { grid-template-columns: 1fr 1.1fr; gap: 56px; } .split-grid-reverse { grid-template-columns: 1.1fr 1fr; } .split-img-tall { max-width: 360px; } }

/* ---------- models: each card rises and scales from .92 as it enters, headline 120 ms later, specs after ---------- */
.models { display: grid; gap: 24px; margin: 40px 0 28px; }
.model { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; opacity: 0; transform: translateY(28px) scale(.92); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: transform, opacity; }
.model.is-in { opacity: 1; transform: none; }
.model h3, .model .model-cap, .model .model-copy, .model .price, .model .model-actions { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.model.is-in h3 { opacity: 1; transform: none; transition-delay: .12s; }
.model.is-in .model-cap, .model.is-in .model-copy, .model.is-in .price, .model.is-in .model-actions { opacity: 1; transform: none; transition-delay: .26s; }
.model-img { display: block; }
.model-img img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
.model-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.model h3 { margin: 0; }
.model h3 a { text-decoration: none; }
.model-cap { font-weight: 600; color: var(--purple); margin: 0; font-size: 15px; }
.model .price { font: 800 22px/1.1 var(--display); margin: 6px 0 4px; }
.model-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 10px; }
@media (min-width: 768px) { .models { grid-template-columns: repeat(3, 1fr); } }

/* ---------- features ---------- */
.feats { display: grid; gap: 28px; margin-top: 36px; }
.feat h3 { margin-bottom: 10px; }
.feat p { color: #d9ddd6; }
@media (min-width: 768px) { .feats { grid-template-columns: repeat(2, 1fr); gap: 40px 48px; } }

/* ---------- owner builds (home) ---------- */
/* built from the ground up: photo beside the copy on wide screens, photo first on phones */
.custom-grid { display: grid; gap: 28px; align-items: center; }
.custom-img { margin: 0; }
.custom-img img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.custom-img .note { margin-top: 10px; }
.custom-list { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; }
.custom-list li { padding-left: 22px; position: relative; font-weight: 600; }
.custom-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); }
.custom-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.custom-more { margin: 14px 0 0; font-weight: 600; }
.custom-close { margin-top: 20px; }
@media (min-width: 768px) {
  .custom-grid { grid-template-columns: 1.05fr 1fr; gap: 40px 56px; }
  /* The two photographs sit side by side and the copy runs the full width beneath them. Leaving the
     copy in one grid cell was what left dead space under the second photograph. */
  .custom-copy { grid-column: 1 / -1; }
}
/* The copy column ran longer than the image column, which left dead space under the lower
   photograph. Above 1024 the body text and the build list each run in two columns, so the section
   is shorter, the width beside the images is used, and a phone still gets one column. */
@media (min-width: 1024px) {
  .custom-body { columns: 2; column-gap: 40px; }
  .custom-body p { break-inside: avoid; margin-bottom: 0.9em; }
  .custom-copy .custom-list { grid-template-columns: 1fr 1fr; gap: 10px 28px; }
}

/* a family business: the photo beside the copy on wide screens and it stays in view while the copy scrolls; photo first on phones */
.family-grid { display: grid; gap: 28px; align-items: start; }
.family-img { margin: 0; }
.family-img img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.family-body { max-width: 62ch; }
.family-body p { font-size: clamp(17px, .5vw + 15px, 19px); line-height: 1.6; color: var(--charcoal); margin-bottom: 1.1em; }
.family-copy > .rv:last-child { margin-top: 28px; }
/* under the main photo: a second, smaller photo with a caption and the closing link, so the column ends with the copy */
.family-img-2 { margin-top: 20px; }
.family-img-2 img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 70% 50%; }
.family-img-2 .note { margin-top: 10px; }
.family-link-b { margin-top: 24px; }
@media (min-width: 900px) { .family-grid { grid-template-columns: 1fr 1.1fr; gap: 56px; } .family-side { position: sticky; top: 96px; } }

.builds { display: grid; gap: 16px; margin: 32px 0 28px; }
.build { display: grid; gap: 6px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; background: var(--paper); transition: transform .2s var(--ease), border-color .2s; }
.build:hover { transform: translateY(-2px); border-color: var(--purple); }
button.build { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 0; overflow: hidden; }
.build-img { display: block; }
.build-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.build-body { display: grid; gap: 6px; padding: 20px 24px 24px; }
.build-model { font: 600 13px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--purple); }
.build-name { font: 800 clamp(22px, 1.4vw + 14px, 30px)/1.1 var(--display); }
.build-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font: 600 15px/1 var(--body); color: var(--charcoal); }
@media (min-width: 768px) { .builds { grid-template-columns: repeat(3, 1fr); } }

/* ---------- quotes ---------- */
.quotes { display: grid; gap: 20px; margin: 36px 0 32px; }
.quote { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; font-size: 17px; }
.quote p { font-size: clamp(17px, 1vw + 14px, 20px); line-height: 1.45; }
.quote cite { display: block; margin-top: 16px; font-style: normal; font-weight: 600; color: var(--purple); font-size: 15px; }
@media (min-width: 768px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

/* ---------- stats ---------- */
/* the stat bar sits right under the hero: a band, not a full section */
#numbers { padding: clamp(36px, 5vw, 64px) 0; }
/* all four numbers in one row at every width, so a phone sees them in one glance */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 10px; margin-top: 8px; }
.stat-n { font: 900 clamp(26px, 7.4vw, 84px)/1 var(--display); letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.stat-l { margin-top: 6px; font-weight: 500; color: var(--muted); font-size: clamp(11px, 3vw, 15px); line-height: 1.25; }
@media (min-width: 768px) { .stats { gap: 28px 16px; } .stat-l { margin-top: 8px; } }

/* ---------- calculator ---------- */
.calc { background: var(--ink); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius); padding: 26px 22px; margin: 34px 0 26px; display: grid; gap: 28px; }
.calc-lab { font: 800 20px/1.2 var(--display); margin: 0 0 8px; }
.calc-help { color: var(--muted-light); font-size: 15px; margin: 0 0 14px; max-width: 70ch; }
/* Three sliders that start with no value and no thumb: every figure in the result is the visitor's
   own, and PGT never positions a control. The thumb appears on first interaction and not before. */
.calc-slider { display: grid; gap: 10px; }
.calc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0; }
.calc-range::-webkit-slider-runnable-track { height: 10px; border-radius: var(--pill); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); }
.calc-range::-moz-range-track { height: 10px; border-radius: var(--pill); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); }
.calc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--lime); border: 2px solid var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.calc-range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--lime); border: 2px solid var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.is-unset .calc-range::-webkit-slider-thumb { opacity: 0; }
.is-unset .calc-range::-moz-range-thumb { opacity: 0; }
.calc-range:focus-visible { outline: 3px solid var(--lime); outline-offset: 6px; border-radius: var(--pill); }
.calc-read { font: 800 22px/1 var(--display); color: var(--lime); }
.is-unset .calc-read { font: 600 15px/1.4 var(--body); color: var(--muted-light); }
/* An empty track reads as broken rather than inviting, so the first one shimmers until it is
   touched. It carries no value and stops the moment the visitor sets one. */
.calc-cue.is-unset .calc-range::-webkit-slider-runnable-track { background-image: linear-gradient(90deg, rgba(255, 255, 255, .14) 35%, rgba(204, 219, 30, .55) 50%, rgba(255, 255, 255, .14) 65%); background-size: 260% 100%; animation: calcCue 2.6s var(--ease) infinite; }
@keyframes calcCue { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .calc-cue.is-unset .calc-range::-webkit-slider-runnable-track { animation: none; } }
.calc-out { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 22px; }
.calc-out-lab { font-weight: 600; color: var(--muted-light); font-size: 15px; }
.calc-prompt { color: var(--muted-light); font-size: 17px; margin: 0; }
.calc-big { font: 900 clamp(48px, 8vw, 96px)/1 var(--display); letter-spacing: -0.02em; color: var(--lime); margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
/* the result panel arrives rather than appearing, once the third slider is set */
#calcResult { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
#calcResult.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { #calcResult { transition: none; } }
.calc-yr { font-weight: 600; font-size: 18px; }
.disclaimer { font-size: 14px; color: var(--muted-light); line-height: 1.5; margin: 0; }
@media (min-width: 768px) { .calc { padding: 40px; } }

/* ---------- faq ---------- */
.faq { margin: 24px 0 28px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; font: 600 18px/1.3 var(--body); position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 28px/1 var(--body); color: var(--purple); transition: transform .25s; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { padding: 0 0 20px; color: var(--charcoal); max-width: 68ch; }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: 32px; margin-top: 32px; }
.leadform { display: grid; gap: 14px; }
.leadform label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: #d9ddd6; }
.leadform input, .leadform select, .leadform textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; font: 400 16px/1.3 var(--body); }
.leadform textarea { min-height: 120px; resize: vertical; }
.leadform input::placeholder, .leadform textarea::placeholder { color: rgba(255, 255, 255, .45); }
.leadform select option { color: var(--ink); }
.f2 { display: grid; gap: 14px; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
/* the trap's own label and input repeat the hiding, so it survives a restyle of the wrapper.
   Scoped to .leadform so it outranks the shared field sizing further down the sheet. */
.hp-f, .leadform .hp-f { position: absolute; left: -9999px; width: 1px; min-width: 1px; height: 1px; min-height: 1px; padding: 0; border: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.cf-turnstile { min-height: 65px; }
.formstatus { padding: 12px 16px; border-radius: 12px; font-weight: 600; }
.formstatus.ok { background: rgba(204, 219, 30, .15); color: var(--lime); }
.formstatus.err { background: rgba(255, 120, 120, .15); color: #ffb3b3; }
.callout .kicker { margin-bottom: 8px; }
.tel-big { display: inline-block; font: 900 clamp(30px, 4vw, 44px)/1 var(--display); color: var(--lime); text-decoration: none; margin-bottom: 8px; padding: 8px 0; }
.contact-mail { display: inline-block; padding: 12px 0; }
.callout p { color: #d9ddd6; font-size: 16px; }
.callout-meta a { color: var(--lime); text-decoration: none; }
@media (min-width: 768px) { .f2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.5fr 1fr; gap: 56px; } }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: #d9ddd6; padding: 56px 0 28px; font-size: 15px; }
.foot-grid { display: grid; gap: 32px; }
.foot-brand img { width: 146px; height: 45px; margin-bottom: 14px; }
.foot-brand p { max-width: 34ch; }
/* column labels, not headings: the page outline stops at the h2 sections */
.foot .foot-h { font: 600 15px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-light); margin: 0 0 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* footer links and every plain link in the contact block are at least 44 px tall to tap */
.foot a { text-decoration: none; display: inline-block; padding: 11px 0; }
.foot ul { gap: 0; }
.foot a:hover { color: var(--lime); }
.foot-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 40px; padding-top: 18px; font-size: 13px; color: var(--muted-light); }
@media (min-width: 768px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ---------- sticky call bar (phones) ---------- */
.stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(11, 11, 13, .95); backdrop-filter: blur(10px); transform: translateY(100%); transition: transform .3s var(--ease); padding-bottom: env(safe-area-inset-bottom); }
.stickybar.show { transform: none; }
.sb { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 8px; text-decoration: none; font-weight: 700; font-size: 14px; }
.sb-call { color: #fff; }
.sb-form { background: var(--lime); color: var(--ink); }
@media (min-width: 900px) { .stickybar { display: none; } }

/* ---------- tour modal and in-place posters ---------- */
.tourmodal { position: fixed; inset: 0; z-index: 90; background: rgba(11, 11, 13, .96); display: grid; grid-template-rows: auto 1fr; }
.tclose { justify-self: end; margin: 12px 16px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--pill); padding: 0 20px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; font: 600 15px/1 var(--body); cursor: pointer; }
/* focus sentinels: reachable by Tab, invisible, and out of flow so the overlay stays a two-row grid */
.tsent { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; opacity: 0; }
.tframe { position: relative; }
.tframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ---------- owners: the filter, the grid of sixteen tours, the photo band ---------- */
.owners-hero { padding-top: 132px; }
.tourfilter { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 8px; }
.filt { font: 600 15px/1 var(--body); background: var(--paper); color: var(--charcoal); border: 1px solid var(--line); border-radius: var(--pill); padding: 13px 18px; min-height: 44px; cursor: pointer; }
.filt:hover { border-color: var(--purple); color: var(--purple); }
.filt.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tourgrid { display: grid; gap: 18px; margin: 26px 0 16px; align-items: start; }
.tourcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.tourcard-tag { font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--purple); margin: 0; }
.tourcard h3 { margin: 4px 0 0; font-size: clamp(19px, 1vw + 15px, 22px); }
.tourcard-meta { color: var(--muted); font-size: 15px; margin: 0 0 14px; }
.tourcard .btn { margin-top: auto; }
.photogrid { display: grid; gap: 24px; margin-top: 32px; }
.photogrid figure { margin: 0; }
.photogrid img { display: block; width: 100%; height: auto; border-radius: var(--radius); aspect-ratio: 3 / 2; object-fit: cover; }
.photogrid .note { margin-top: 10px; }
@media (min-width: 600px) { .tourgrid { grid-template-columns: repeat(2, 1fr); } .photogrid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (min-width: 1000px) { .tourgrid { grid-template-columns: repeat(4, 1fr); } }

.model, .build { transform: translateY(28px); }
.model.is-in, .build.is-in { transform: none; }
/* a link that is the whole line is a control, not running text, so it gets a real target.
   .callout-meta is the contact strip: the email address sits alone between line breaks, so it
   is a primary way to reach the company and not a word inside a sentence. */
.crumbs a, .custom-list a, .tourlist a, .callout-meta a, .optlist dt a, .sec p > a:only-child:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
.sec p > a:only-child:not(.btn) { color: var(--purple); font-weight: 600; text-decoration-color: var(--purple); text-decoration-thickness: 2px; }
.sec p > a:only-child:not(.btn):hover { color: var(--ink); text-decoration-color: var(--ink); }
.dark .sec p > a:only-child:not(.btn), .dark p > a:only-child:not(.btn) { color: var(--lime); text-decoration-color: var(--lime); }
.dark .sec p > a:only-child:not(.btn):hover, .dark p > a:only-child:not(.btn):hover { color: #fff; text-decoration-color: #fff; }

/* ---------- form errors: the message sits with its field, and the field shows it is wrong ---------- */
.fielderr { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: #FFB4A8; }
.leadform [aria-invalid="true"] { border-color: #FFB4A8; box-shadow: 0 0 0 2px rgba(255, 180, 168, .28); }
.sec:not(.dark) .fielderr { color: #B3261E; }
.sec:not(.dark) .leadform [aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 0 0 2px rgba(179, 38, 30, .18); }

/* ---------- questions to ask: a numbered list where each question is a heading ---------- */
/* a long title, so it is set smaller than the site's display H1 or it runs to six lines */
.ask-page h1 { font-size: clamp(32px, 2.9vw + 16px, 60px); max-width: 21ch; }
.legal-page h1, .questions-page h1, .options-page h1 { font-size: clamp(32px, 2.9vw + 16px, 60px); max-width: 24ch; }
.asklist { list-style: none; counter-reset: ask; padding: 0; margin: 0; display: grid; gap: 34px; }
.askitem { counter-increment: ask; position: relative; padding-left: 52px; }
.askitem::before { content: counter(ask); position: absolute; left: 0; top: 2px; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; font: 800 16px/36px var(--display); text-align: center; }
.askitem h2 { font-size: clamp(20px, 1.1vw + 16px, 26px); margin-bottom: 10px; }
.askans { margin: 0; }
/* a darker purple than the brand accent: at 19px the accent measures 4.88:1 on mist, which is
   over the line but close enough that axe flags it. This is 5.9:1 and reads the same. */
.askans-lab { font-weight: 700; color: #8A3C86; }
@media (max-width: 480px) { .askitem { padding-left: 44px; } .askitem::before { width: 30px; height: 30px; line-height: 30px; font-size: 14px; } }

/* ---------- how it works: a numbered sequence down the page ---------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 40px; }
.step { counter-increment: step; position: relative; padding-left: 60px; }
.step::before { content: counter(step); position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--purple); color: #fff; font: 800 18px/42px var(--display); text-align: center; }
.step h2 { font-size: clamp(21px, 1.2vw + 16px, 30px); margin-bottom: 12px; }
.step .optlist { margin-top: 16px; }
.step-extra { margin-top: 16px; padding-left: 16px; border-left: 3px solid var(--lime); }
/* A build stage with a photograph. On a phone the photo sits under the text; from 700px it sits to
   the right of it. A stage with no entry in src/_data/stagePhotos.json keeps the plain layout, so an
   empty slot reads as a text item and not as a hole in a grid. */
.stage-photo { margin: 12px 0 0; }
.stage-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
@media (min-width: 700px) {
  .stage-dd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 20px; align-items: start; }
  .stage-dd .stage-photo { margin: 0; }
  /* auto then 1fr: the heading row stays as tall as the heading, and the photo's extra height goes
     under the paragraph instead of opening a gap between the heading and its own text */
  .step.has-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); grid-template-rows: auto 1fr; column-gap: 24px; align-content: start; }
  .step.has-photo > h3, .step.has-photo > p { grid-column: 1; }
  .step.has-photo > .stage-photo { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}
@media (max-width: 480px) { .step { padding-left: 48px; } .step::before { width: 34px; height: 34px; line-height: 34px; font-size: 15px; } }

/* ---------- questions hub: jump links to each group ---------- */
.qjump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.qjump a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--pill); font-size: 15px; font-weight: 600; text-decoration: none; color: var(--charcoal); }
.qjump a:hover { border-color: var(--purple); color: var(--purple); }

/* ---------- legal pages ---------- */
.legal h2 { font-size: clamp(21px, 1.1vw + 16px, 28px); margin: 36px 0 12px; }
.legal p { max-width: 74ch; }

/* ---------- thank you: the page the form redirects to ---------- */
.thanks { padding-top: 132px; }
.thanks h1 { font-size: clamp(32px, 3vw + 16px, 58px); }
.thanks-call { margin-top: 22px; font-size: 18px; }
.thanks-call .tel-big { display: inline-block; vertical-align: middle; margin-left: 6px; }

/* ---------- model pages: the photo hero, the breadcrumb, and the spec rail that stays pinned ---------- */
/* the hero photo is the model's own interior, so it carries the same scrim and type as the film heroes */
.model-hero .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.model-hero .hero-h1 { font-size: clamp(30px, 2.4vw + 14px, 50px); max-width: 26ch; }
.crumbs { background: var(--mist); border-bottom: 1px solid var(--line); font-size: 14px; }
/* the 8 px on the links is what makes a short crumb like "Home" a 44 px wide target; the
   negative margin keeps the row's left edge lined up with the rest of the page */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 0 -8px; padding: 10px 0; }
.crumbs li + li::before { content: "/"; color: var(--muted); margin-right: 10px; }
.crumbs a { color: var(--muted); text-decoration: none; padding: 4px 8px; }
.crumbs a:hover { color: var(--purple); text-decoration: underline; }
.crumbs [aria-current] { font-weight: 600; }
.spec-grid { display: grid; gap: 40px; align-items: start; }
.spec-rail .specs { margin-top: 12px; font-size: 15px; }
.spec-rail .specs div { grid-template-columns: minmax(112px, 40%) 1fr; padding: 7px 0; gap: 10px; }
.spec-rail .price { font: 800 clamp(22px, 1.4vw + 14px, 30px)/1.1 var(--display); margin: 0 0 14px; }
.spec-rail .mreveal-actions { margin-bottom: 14px; }
.spec-rail-kicker { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.spec-main { display: grid; gap: 44px; }
.spec-block h2 { margin-bottom: 14px; }
.spec-block p + p { margin-top: 14px; }
.spec-block .tourposter { margin: 20px 0 0; }
/* no owner-build still exists for every model; without one the block is a panel, not an empty photo frame */
.tourpanel { aspect-ratio: auto; display: grid; justify-items: center; gap: 12px; padding: 32px 24px; text-align: center; }
.tourpanel .tourpill { position: static; transform: none; }
.tourpanel-label { color: #fff; font: 700 18px/1.3 var(--display); margin: 0; }
.tourpanel-note { color: #b9bdb6; font-size: 14px; margin: 0; }
/* the opening sentence sits above both columns, so the phone gets a line of context before the specs */
.spec-intro { margin: 0 0 4px; }
.optlist { margin: 0 0 18px; display: grid; gap: 14px; }
.optlist div { display: grid; gap: 2px; }
.optlist dt { font-weight: 700; }
.optlist dd { margin: 0; color: var(--charcoal); }
.tourlist { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 4px; }
.tourlist li { padding-left: 22px; position: relative; }
.tourlist li::before { content: ""; position: absolute; left: 0; top: .95em; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
@media (min-width: 900px) {
  .spec-grid { grid-template-columns: 400px 1fr; gap: 40px 64px; }
  .spec-intro { grid-column: 1 / -1; max-width: 70ch; margin-bottom: 8px; }
  .spec-rail { position: sticky; top: 96px; }
  .spec-rail .specs { max-height: calc(100vh - 340px); overflow-y: auto; overscroll-behavior: contain; padding-right: 10px; }
  .model-page .models { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .spec-rail { position: static; } .spec-rail .specs { max-height: none; overflow: visible; } }

.tourposter { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--ink); }
.tourposter img { width: 100%; height: 100%; object-fit: cover; }
.tourposter button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tourposter iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- reveal ---------- */
/* The reveal fades and rises. The fade is deliberately much faster than the movement: text sitting
   at a fraction of its opacity is text nobody can read, and an accessibility audit that samples
   mid-transition is right to call it a contrast failure. At .22s the type is solid almost at once
   while the .7s movement still carries the reveal. */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .22s var(--ease), transform .7s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
/* The small uppercase label never fades. At 13 px in brand purple it measures 4.9:1 at full
   opacity, so any partial value fails contrast, and the scroll-linked reveal can hold a partial
   value for as long as the reader stays put. It still rises; it just never dims. */
.rv.kicker { opacity: 1; }
@supports (animation-timeline: view()) {
  .has-timeline .rv { opacity: 1; transform: none; transition: none; animation: rise linear both; animation-timeline: view(); animation-range: entry 5% entry 35%; }
  .has-timeline .rv.kicker { animation-name: rise-move; }
  /* Opacity finishes in the first third of the range, the movement runs the whole way. This one is
     scroll-linked, so an element parked at the bottom edge of the window holds whatever value the
     scroll position gives it: without this, text can sit half-faded for as long as the reader stays
     put, which is a real contrast failure rather than a transient one. */
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } 34% { opacity: 1; } to { opacity: 1; transform: none; } }
  @keyframes rise-move { from { transform: translateY(18px); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .rv, .has-timeline .rv { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .mreveal-img, .mreveal h2, .mreveal .kicker, .mreveal .lede, .mreveal .specs, .mreveal .price, .mreveal .mreveal-actions { opacity: 1 !important; transform: none !important; transition: none !important; }
  .model, .model h3, .model .model-cap, .model .model-copy, .model .price, .model .model-actions { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero .beat { display: none !important; }
  .hero .hero-h1 { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero-media video { transition: none !important; }
  .tourpill-dot { animation: none; }
  .btn, .stickybar, .hdr { transition: none; }
  /* the three bars swing into an X when the menu opens: a transform, so it belongs here.
     The X still appears, it just appears at once instead of sliding. */
  .burger span { transition: none; }
}

/* the one exterior photograph on /owners/, sitting above the finished-build grid */
.owners-exterior { margin: 0 auto 34px; max-width: 900px; }
.owners-exterior img { width: 100%; height: auto; border-radius: var(--r, 10px); }
.owners-exterior figcaption { margin-top: 10px; }

/* a single quote, on /game-trailers/, sits in the middle rather than as one column of three */
.quote-single { max-width: 68ch; margin-inline: auto; }

/* 900 to 1100 is where six labels, a logo, a phone number and a button all want the same row.
   Nothing overflows and the nav never wraps, but the clearance either side of the nav falls to the
   grid gap alone, which reads as crowded. Trimming the cell padding buys it back without dropping
   an item or moving the breakpoint. Every cell stays well over 44 px. */
@media (min-width: 1000px) and (max-width: 1100px) {
  .nav a { padding: 0 10px; }
  .nav a[aria-current="page"]::after { left: 10px; right: 10px; }
  .hdr-cta { gap: 14px; }
}
/* Neither of these may wrap. The phone number broke after the second hyphen at 1024 and the button
   label broke after "the", which is what crowding actually looks like once nothing overflows. */
.tel, .hdr-cta .btn { white-space: nowrap; }

/* Six items need 526px of labels. With the logo at 123 and the actions at about 212 that is 881
   before any breathing room, and the inner width at 900px is 852. Something had to give and it was
   the logo. So the full bar starts at 1000px and below that the burger carries the same six items
   in the sheet. Nothing is dropped: at 900 to 999 every one of them is still one tap away. */
@media (min-width: 1000px) {
  .nav { display: flex; }
}

/* A tour card's own still. Cards without one simply have no figure, so the grid stays even. */
.tourcard-img { margin: 0 0 14px; }
.tourcard-img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); }