/* ---------- 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; }



@font-face { font-family: "Anybody Fallback"; src: local("Arial Black"), local("Arial-Black"); size-adjust: 107%; font-weight: 100 900; }
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 95.5%; font-weight: 100 900; }

/* ---------- 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", "Anybody Fallback", "Archivo Black", Impact, sans-serif;
  --body: "Inter Tight", "Inter Tight Fallback", "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; } }

/* Logo, "Call", the button and the menu need 418 px at the desktop spacing, so below 420 px the
   header alone tightens its margins and gaps. Nothing is resized and every control stays 44 px. */
@media (max-width: 419px) {
  .hdr .hdr-in { width: calc(100% - 32px); gap: 8px; }
  .hdr .hdr-cta { gap: 6px; }
  .hdr .hdr-cta .btn { padding: 0 12px; }
}



.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; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.mreveal.rvp .mreveal-img { opacity: 0; transform: translateY(28px) scale(.92); }
.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 { transition: opacity .5s var(--ease), transform .5s var(--ease);  }
.mreveal.rvp h2, .mreveal.rvp .lede, .mreveal.rvp .specs, .mreveal.rvp .price, .mreveal.rvp .mreveal-actions, .mreveal.rvp .kicker { opacity: 0; transform: translateY(12px); }
.mreveal.rvp.is-in .mreveal-img { opacity: 1; transform: none; }
.mreveal.rvp.is-in h2, .mreveal.rvp.is-in .kicker { opacity: 1; transform: none; transition-delay: .12s; }
.mreveal.rvp.is-in .lede, .mreveal.rvp.is-in .specs, .mreveal.rvp.is-in .price, .mreveal.rvp.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; }
}


.table-wrap { margin: 24px 0 18px; }
.cmp { width: 100%; border-collapse: collapse; }
.cmp colgroup { display: none; }
.cmp thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.cmp tbody tr { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; }
.cmp th, .cmp td { display: block; padding: 3px 0; text-align: left; border: 0; }
.cmp tbody th { font-weight: 800; color: var(--purple); }
.cmp td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); }
.cmp-price td { font: 800 20px/1.2 var(--display); }
.cmp-actions td .btn { display: flex; margin: 6px 0 0; width: 100%; }
.cmp-actions th { display: none; }
.table-hint { display: none; }
@media (min-width: 900px) {
  .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; min-width: 760px; table-layout: fixed; }
  .cmp colgroup { display: table-column-group; }
  .cmp col.cmp-label { width: 22%; }
  .cmp thead { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; display: table-header-group; }
  .cmp tbody tr { display: table-row; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; }
  .cmp thead tr { display: table-row; }
  .cmp th, .cmp td { display: table-cell; padding: 12px 14px; 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 td[data-label]::before { content: none; }
  .cmp-actions th { display: table-cell; }
  .cmp-actions td { vertical-align: top; }
  .cmp-actions td .btn { 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; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.model.rvp { opacity: 0; transform: translateY(28px) scale(.92); }
.model.rvp.is-in { opacity: 1; transform: none; }
.model h3, .model .model-cap, .model .model-copy, .model .price, .model .model-actions { transition: opacity .5s var(--ease), transform .5s var(--ease);  }
.model.rvp h3, .model.rvp .model-cap, .model.rvp .model-copy, .model.rvp .price, .model.rvp .model-actions { opacity: 0; transform: translateY(12px); }
.model.rvp.is-in h3 { opacity: 1; transform: none; transition-delay: .12s; }
.model.rvp.is-in .model-cap, .model.rvp.is-in .model-copy, .model.rvp.is-in .price, .model.rvp.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; }


.nosurprise { margin-top: 24px; }
.nosurprise .kicker { margin-bottom: 12px; }
.nosurprise ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.nosurprise li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.35; color: #d9ddd6; }
.nosurprise li::before { content: ""; position: absolute; left: 0; top: .42em; width: 7px; height: 7px; border-radius: 2px; background: var(--lime); }
@media (min-width: 900px) { .nosurprise ul { grid-template-columns: repeat(3, 1fr); } .nosurprise li { font-size: 15px; } }
.nosurprise + .contact-grid { margin-top: 24px; }
.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 .form-line { margin: 0; font-size: 14px; }
.leadform input::placeholder, .leadform textarea::placeholder { color: rgba(255, 255, 255, .45); }
.leadform select option { color: var(--ink); }
.f2 { display: grid; gap: 14px; }


.fmore { border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.fmore summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-weight: 600; font-size: 16px; color: #d9ddd6; }
.fmore summary::-webkit-details-marker { display: none; }
.fmore summary::after { content: "+"; font: 400 26px/1 var(--body); color: var(--lime); transition: transform .25s; }
.fmore[open] summary::after { transform: rotate(45deg); }
.fmore summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 6px; }
.fmore-in { display: grid; gap: 14px; padding: 4px 0 18px; }
@media (prefers-reduced-motion: reduce) { .fmore summary::after { transition: none; } }
.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: 72px; }
.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; } }
/* Below 900 px the sticky bar can be showing at the very bottom of the page, so the footer keeps the
   bar's height free under its last line. */
@media (max-width: 899px) { .foot { padding-bottom: calc(28px + 56px + env(safe-area-inset-bottom)); } }

/* ---------- tour modal and in-place posters ---------- */
.tourmodal { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; z-index: 90; background: #0b0b0d; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overscroll-behavior: contain; }
.tourmodal[hidden] { display: none; }
.ttop { display: flex; justify-content: flex-start; padding: 8px 12px; }
.tclose { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #0b0b0d; border: 0; border-radius: var(--pill); padding: 0 20px 0 16px; min-height: 44px; min-width: 44px; font: 700 16px/1 var(--body); cursor: pointer; }
.tclose-x { flex: none; }
.tbar { display: grid; gap: 8px; padding: 8px 12px 10px; background: #0b0b0d; }
.tbar .btn { width: 100%; min-height: 44px; font-size: 16px; white-space: nowrap; }
@media (min-width: 560px) { .tbar { grid-template-columns: 1fr 1fr; max-width: 720px; width: 100%; justify-self: center; } }
/* 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.rvp, .build.rvp { transform: translateY(28px); }
.model.rvp.is-in, .build.rvp.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 { display: inline-flex; align-items: center; min-height: 44px; }
/* A link that is the only link in its paragraph stays an ordinary inline link, so a comma or period
   after it can never be pushed to the start of the next line on a phone. The vertical padding keeps
   the tap area at least 44 px tall without changing the line height. */
.sec p > a:only-child:not(.btn) { padding-block: 13px; }


.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; }


.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; }


/* 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; }
/* Gamers Utopia: its photo has a bright yellow ceiling at the top and a large sign on the right wall.
   On phones the shade starts dark at the very top, so the header's Call link and the small heading
   read against it; on wider screens the headline wraps short enough to end before the sign. */
@media (max-width: 899px) {
  .model-hero--gamers-utopia .hero-shade { background: linear-gradient(180deg, rgba(10, 10, 12, .74) 0%, rgba(10, 10, 12, .62) 22%, rgba(10, 10, 12, .46) 36%, rgba(10, 10, 12, .46) 50%, rgba(10, 10, 12, .58) 66%, rgba(10, 10, 12, .68) 100%); }
}
@media (min-width: 900px) { .model-hero--gamers-utopia .hero-h1 { max-width: 20ch; } }
.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 { transition: opacity .22s var(--ease), transform .7s var(--ease); }


.rv.rvp { opacity: 0; transform: translateY(18px); }
.rv.rvp.is-in { opacity: 1; transform: none; }


.rv.rvp.kicker { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv.rvp { 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); }




html { scroll-padding-top: 76px; scroll-padding-bottom: 96px; }
.note { font-size: 16px; }
.leadform label { font-size: 16px; }
.leadform .opt { font-weight: 400; color: #bfc5c0; }

/* ---------- header: logo, Call, menu ---------- */
.hdr-call { gap: 8px; padding: 0 16px; min-width: 44px; }
.hdr-call svg { flex: none; }
@media (max-width: 419px) { .hdr .hdr-cta .hdr-call { padding: 0 14px; } }

/* ---------- sticky bar: phones only, two buttons, clear of the home indicator ---------- */
.stickybar { gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(11, 11, 13, .96); }
.stickybar.kb { transform: translateY(100%); }
.sb { min-height: 56px; border-radius: 14px; font-size: 16px; }
.sb-call { background: #3A4245; }
@media (max-width: 899px) { .foot { padding-bottom: calc(28px + 72px + env(safe-area-inset-bottom)); } }

/* ---------- home: hero ---------- */
.hero18 { min-height: 0; }
.hero18 .hero-copy { padding: 84px 0 28px; }
.hero18 .eyebrow { margin-bottom: 14px; }
.hero-h18 { margin: 0 0 14px; max-width: 18ch; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 7.4vw + 10px, 76px); line-height: 1.02; 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); }
.hero18 .hero-sub { margin: 0 0 20px; font-size: 18px; }
.hero18 .hero-sub strong { color: #fff; font-weight: 800; }
.hero18 .hero-cta { flex-direction: column; gap: 10px; margin-bottom: 8px; }
.hero18 .hero-cta .btn { width: 100%; min-height: 54px; }
.hero-tourlink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--lime); font: 700 16px/1.2 var(--body); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-shadow: 0 2px 10px rgba(0, 0, 0, .85); }
@media (min-width: 600px) {
  .hero18 .hero-cta { flex-direction: row; flex-wrap: wrap; }
  .hero18 .hero-cta .btn { width: auto; }
}
@media (min-width: 600px) { .hero18 { min-height: min(100svh, 640px); } }
@media (min-width: 900px) { .hero18 { min-height: min(100svh, 820px); } .hero18 .hero-copy { padding: 140px 0 80px; } .hero18 .hero-sub { font-size: 21px; } }

/* ---------- home: quick facts ---------- */
.quick { background: var(--black); color: #fff; padding: 12px 0; }
.quick-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.quick-n { display: block; font: 900 clamp(26px, 5vw + 10px, 44px)/1 var(--display); color: var(--lime); margin-bottom: 6px; }
.quick-l { display: block; font-size: 15px; line-height: 1.3; color: #d9ddd6; }

/* ---------- home: section rhythm, tighter on a phone ---------- */
.h18-sec { padding: 26px 0; }
.h18-sec h2 { font-size: clamp(26px, 4vw + 12px, 52px); margin-bottom: 10px; }
.h18-sec .lede { font-size: 17px; margin-bottom: 0; }
@media (min-width: 768px) { .h18-sec { padding: clamp(56px, 7vw, 110px) 0; } }

/* ---------- home: model cards ---------- */
.picks { display: grid; gap: 12px; margin: 14px 0 12px; }
.pick { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; display: flex; flex-direction: column; }
.pick-img img { display: block; width: 100%; height: 140px; object-fit: cover; }
.pick-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pick-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.pick-head h3 { margin: 0; font-size: 20px; }
.pick-head h3 a { text-decoration: none; display: inline-block; padding: 10px 0; margin: -10px 0; }
.pick-price { margin: 0; font: 800 17px/1.1 var(--display); color: var(--purple); }
.pick-spec { margin: 0; font-size: 16px; line-height: 1.45; color: var(--charcoal); }
.pick-actions { display: grid; gap: 8px; margin-top: auto; padding-top: 2px; }
.pick-actions .btn { width: 100%; min-height: 48px; font-size: 16px; }
.h18-more { margin: 0; }
.h18-more .btn { width: 100%; }
@media (min-width: 768px) { .picks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .pick-img img { height: auto; aspect-ratio: 16 / 10; } .h18-more .btn { width: auto; } }

/* ---------- home: what comes with every trailer ---------- */
.ticks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; font-size: 17px; line-height: 1.35; }
.ticks li { position: relative; padding-left: 38px; }
.ticks li::before { content: ""; position: absolute; left: 6px; top: .28em; width: 9px; height: 15px; border: solid var(--purple); border-width: 0 3px 3px 0; transform: rotate(45deg); }
@media (min-width: 768px) { .ticks { grid-template-columns: 1fr 1fr; gap: 14px 40px; } }

/* ---------- home: the guide offer and its form ---------- */
.guide18 { background: var(--black); }
.guide-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.guide-cover { flex: none; width: 104px; }
.guide-cover img { width: 104px; height: auto; border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.guide-head .kicker { margin-bottom: 8px; }
.guide-head h2 { margin: 0; font-size: clamp(26px, 4vw + 12px, 44px); }
.guide-points { margin: 0 0 18px; padding: 0 0 0 22px; display: grid; gap: 4px; font-size: 16px; line-height: 1.4; color: #e6e9e3; }
.leadform { max-width: 560px; gap: 12px; }
.leadform .btn { width: 100%; min-height: 56px; font-size: 18px; }
.leadform .form-line { text-align: center; }
.guide-call { max-width: 560px; margin-top: 18px; display: grid; gap: 8px; }
.guide-call .btn { width: 100%; min-height: 52px; }
.guide-call .note { text-align: center; margin: 0; }
@media (min-width: 900px) {
  .guide18 .wrap { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; align-items: start; }
  .guide-top, .guide-points { grid-column: 1; }
  .guide18 .leadform, .guide-call { grid-column: 2; grid-row: 1 / span 3; }
  .guide-call { grid-row: 4; margin-top: 0; }
  .guide-cover { width: 150px; } .guide-cover img { width: 150px; }
}

/* ---------- home: owners ---------- */
.quotes18 { display: grid; gap: 10px; margin: 16px 0; }
.quote18 { margin: 0; background: var(--paper); border-radius: var(--radius-sm); padding: 12px 16px; }
.quote18 p { margin: 0 0 6px; font-size: 16px; line-height: 1.4; color: var(--charcoal); }
.quote18 cite { font-style: normal; font-weight: 700; font-size: 16px; color: var(--purple); }
@media (min-width: 900px) { .quotes18 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* ---------- home: closing ---------- */
.closing18 { text-align: center; }
.closing-cta { display: grid; gap: 10px; max-width: 420px; margin: 14px auto 0; }
.closing-cta .btn { width: 100%; min-height: 54px; padding-inline: 12px; }
@media (min-width: 600px) { .closing-cta { grid-template-columns: 1fr 1fr; max-width: 640px; } }

/* ---------- home: compact footer ---------- */
.foot-compact { padding: 24px 0 20px; }
.foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.foot-links a { display: block; padding: 11px 0; font-weight: 600; color: #fff; }
.foot-line { margin: 16px 0 0; font-size: 16px; color: #bfc5c0; }
.foot-line a { display: inline; padding: 12px 0; }
@media (min-width: 768px) { .foot-links { grid-template-columns: repeat(7, auto); justify-content: start; gap: 0 28px; } }

/* ---------- thank-you: the guide is ready ---------- */
.thanks .thanks-dl { width: 100%; min-height: 56px; font-size: 18px; }
.thanks-read { display: inline-flex; align-items: center; min-height: 44px; color: var(--lime); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.thanks .lede { margin-top: 8px; }
.thanks .thanks-call { margin-top: 22px; padding: 18px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .06); font-size: 16px; display: grid; gap: 10px; }
.thanks-call-h { margin: 0; font-weight: 700; font-size: 17px; }
.thanks-call .btn { width: 100%; min-height: 52px; }
.thanks-call .note { margin: 0; text-align: center; }
.thanks .btn[data-tour] { width: 100%; }
@media (min-width: 600px) { .thanks .thanks-dl, .thanks .btn[data-tour] { width: auto; } .thanks-call .btn { width: auto; justify-self: start; } .thanks-call .note { text-align: left; } }

/* ---------- the web guide (/investment-guide/) ---------- */
.g-intro { padding-top: 120px; padding-bottom: 44px; }
.g-intro h1 { font-size: clamp(32px, 3vw + 18px, 60px); }
.g-intro .btn { width: 100%; min-height: 56px; font-size: 18px; }
@media (min-width: 600px) { .g-intro .btn { width: auto; } }
.g18 h2 { font-size: clamp(26px, 3vw + 14px, 44px); }
.g18 h3 { font-size: clamp(19px, .6vw + 16px, 24px); margin-top: 22px; }
.g18 p, .g18 li, .g18 td, .g18 th { font-size: 16px; line-height: 1.5; }
.g18 .lede { font-size: 18px; }
.g-sec .kicker { margin-bottom: 12px; }
.g-link { margin: 8px 0 0; }
.g-link a { display: inline-flex; align-items: center; min-height: 44px; color: var(--purple); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* tables stack into cards on a phone: the column heading rides in front of each value, so nothing needs to scroll sideways */
.g18 table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.g18 thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.g18 tbody tr { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; }
.g18 tbody th, .g18 tbody td { display: block; padding: 3px 0; text-align: left; border: 0; }
.g18 tbody th { font-weight: 800; color: var(--purple); }
.g18 td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); }
.g18 tr.g-price { background: rgba(204, 219, 30, .22); border-color: var(--lime); }
.g18 tr.g-price th, .g18 tr.g-price td { font-weight: 800; color: var(--ink); }
.g-q { font-weight: 700; color: var(--purple); }
@media (min-width: 768px) {
  .g18 { --gw: 100%; }
  .g18 thead { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; }
  .g18 table { display: table; }
  .g18 thead { display: table-header-group; } .g18 tbody { display: table-row-group; }
  .g18 tbody tr { display: table-row; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; }
  .g18 thead tr { display: table-row; }
  .g18 th, .g18 td { display: table-cell; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
  .g18 thead th { background: var(--charcoal); color: #fff; font-weight: 800; }
  .g18 tbody th { width: 28%; }
  .g18 td[data-label]::before { content: none; }
  .g18 tr.g-price th, .g18 tr.g-price td { background: rgba(204, 219, 30, .28); }
}
.g-callout { background: rgba(204, 219, 30, .2); border-left: 5px solid var(--lime); border-radius: 12px; padding: 14px 16px; margin: 18px 0; }
.g-callout h3 { margin: 0 0 6px; }
.g-callout p { margin: 0; }
.g-grid { display: grid; gap: 12px; margin: 18px 0; }
.g-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.g-card h3 { margin: 0 0 6px; font-size: 20px; }
.g-price { font-weight: 800; }
.g-card .g-price { color: var(--purple); margin: 0 0 6px; font-size: 17px; }
.g-cols { display: grid; gap: 12px; margin: 14px 0; }
.g-item { line-height: 1.5; }
.g-item strong { color: var(--purple); }
.g-band { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; background: var(--black); color: #fff; border-radius: 14px; padding: 16px 12px; margin: 18px 0; text-align: center; }
.g-band .g-n { display: block; font: 900 28px/1 var(--display); color: var(--lime); }
.g-band .g-l { display: block; font-size: 15px; line-height: 1.3; color: #d9ddd6; margin-top: 4px; }
.g-check { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.g-check li { position: relative; padding-left: 28px; }
.g-check li::before { content: ""; position: absolute; left: 6px; top: .3em; width: 8px; height: 13px; border: solid var(--purple); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.g-check a { color: inherit; text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 2px; text-underline-offset: 3px; display: inline-block; padding: 9px 0; }
.g-steps { list-style: none; counter-reset: gs; margin: 16px 0; padding: 0; display: grid; gap: 14px; }
.g-steps li { counter-increment: gs; position: relative; padding-left: 48px; }
.g-steps li::before { content: counter(gs); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--lime); color: var(--ink); font: 800 16px/34px var(--body); text-align: center; }
.g-steps h3 { margin: 0 0 4px; font-size: 19px; }
.g-ws { list-style: none; margin: 16px 0; padding: 14px 16px; display: grid; gap: 8px; border: 2px solid var(--charcoal); border-radius: 14px; font-weight: 600; }
.g18 blockquote { margin: 0 0 12px; padding: 16px; background: var(--paper); border-radius: 14px; font-size: 17px; line-height: 1.5; }
.g18 blockquote cite { display: block; margin-top: 8px; font-style: normal; font-weight: 800; color: var(--purple); font-size: 16px; }
.g-close .tel-big { margin-bottom: 4px; }
@media (min-width: 768px) { .g-grid { grid-template-columns: 1fr 1fr; } .g-cols { grid-template-columns: 1fr 1fr; gap: 12px 32px; } .g-band { grid-template-columns: repeat(4, 1fr); } }

.home .faq { margin: 14px 0 18px; }
.home .faq-item summary { padding: 14px 40px 14px 0; }
.home .faq-a { padding-bottom: 14px; }

.home .leadform label { margin-bottom: 4px; }
.home .leadform .btn { min-height: 54px; }

/* the hero copy now sits over the whole picture, not only the lower half, so the scrim covers all of it */
.hero18 .hero-shade { background: linear-gradient(180deg, rgba(10, 10, 12, .62) 0%, rgba(10, 10, 12, .66) 45%, rgba(10, 10, 12, .82) 100%); }
.hero18 .eyebrow { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
@media (min-width: 900px) { .hero18 .hero-shade { background: linear-gradient(90deg, rgba(10, 10, 12, .72) 0%, rgba(10, 10, 12, .66) 40%, rgba(10, 10, 12, .38) 66%, rgba(10, 10, 12, .08) 100%), linear-gradient(180deg, rgba(10, 10, 12, 0) 62%, rgba(10, 10, 12, .4) 100%); } }



h4, .note, .btn-sm, .nav, .tel, .tourpill, .model-cap, .build-cta, .quote cite, .stat-l, .calc-help, .is-unset .calc-read,
.calc-out-lab, .disclaimer, .nosurprise li, .leadform .form-line, .foot, .foot .foot-h, .foot-bottom, .sb, .filt,
.tourcard-meta, .fielderr, .qjump a, .crumbs, .spec-rail .specs, .tourpanel-note, .figure-note, .table-foot p,
.cmp, .cmp-subline, .table-hint { font-size: 16px; }
.kicker, .hero .eyebrow, .build-model, .tourcard-tag { font-size: 14px; line-height: 1.3; }
.nosurprise li, .faq-item summary { line-height: 1.4; }
.btn { line-height: 1.3; }
@media (min-width: 900px) { .nosurprise li { font-size: 16px; } }
/* stacked rows are separate targets: the FAQ rows, the footer links, the tour lists */
.faq { display: grid; gap: 8px; }
.foot ul, .tourlist { gap: 8px; }
.hdr .hdr-cta { gap: 8px; }
@media (max-width: 419px) { .hdr .hdr-cta { gap: 8px; } }
.pick-head h3 a { padding: 11px 0; margin: -11px 0; }
.g-check a { padding: 10px 0; }
.stat-l { line-height: 1.3; }
.tourlist .linklike { margin: 0; }
.quick-l, .g-band .g-l { font-size: 16px; line-height: 1.3; }
.ticks, .calc-lab { line-height: 1.4; }
.foot-links { row-gap: 8px; }
.custom-more { margin-top: 26px; }
.price-link { margin-bottom: 28px; }
.tourlist { margin-bottom: 30px; }
.nav { gap: 8px; }
.h18-sec { padding: 22px 0; }
@media (min-width: 768px) { .h18-sec { padding: clamp(56px, 7vw, 110px) 0; } }
.hero18 .hero-copy { padding-bottom: 24px; }


a[href^="tel:"] { white-space: nowrap; }
/* the quick answers sit in the same container as every other section, not a narrower indented one */
.home #questions .faq-a { max-width: 68ch; }
.h18-sec { padding: 20px 0; }
@media (min-width: 768px) { .h18-sec { padding: clamp(56px, 7vw, 110px) 0; } }
.hero18 .hero-cta .btn, .closing-cta .btn { min-height: 52px; }
.closing-cta { gap: 8px; }
.home .faq { margin: 12px 0 14px; }
.h18-sec h2 { margin-bottom: 8px; }


.hdr-call-num { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.hdr-call { white-space: nowrap; }
@media (min-width: 1024px) {
  .hdr-call-word { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .hdr-call-num { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; }
}


.leadform .field-hint { margin: 6px 0 0; color: #d9ddd6; }
.leadform .consent { margin: -4px 0 0; }
.leadform select { appearance: auto; }

/* ---------- home: "Something different?" ---------- */
.diff-h { margin: 16px 0 8px; font: 800 20px/1.2 var(--display); }
/* the two cards use the .pick card above, so nothing else here: the second grid just sits close under the heading */
.picks-diff { margin-top: 0; }
.pick-img a { display: block; }
/* the photo is a link on these two cards, so the title link starts 8 px under it: same tap height (11 + 11), shifted down */
.picks-diff .pick-head h3 a { padding: 6px 0 16px; margin: -6px 0 -16px; }
.closing-line { margin: 0 0 4px; font-size: 18px; line-height: 1.4; color: #e6e9e3; }

/* ---------- very narrow phones: the Turnstile widget is 300 px wide and the form column at 320 px is 272 ---------- */
.leadform { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 339px) {
  .leadform .cf-turnstile { width: 300px; min-height: 0; height: 66px; margin-bottom: 0; transform: scale(.9); transform-origin: 0 0; }
  .leadform .cf-turnstile iframe { max-width: 300px; }
}
.nw { white-space: nowrap; }
@media (max-width: 339px) {
  .guide-call { grid-template-columns: minmax(0, 1fr); }
  .guide-call .btn { white-space: normal; line-height: 1.2; padding-top: 8px; padding-bottom: 8px; }
}