/* Big Tex: black surfaces and the green from the original supplied artwork. */
@font-face {
  font-family: Anton;
  src: url('assets/fonts/anton-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --display: Anton, Impact, 'Arial Narrow', sans-serif;
  --brand: #64f817;
  --brand-ink: #071004;
  --ink: #000;
  --silver: #b5b5b5;
  --line: #303030;
}

/* Anton echoes the logo's condensed block lettering; the supplied mark stays original. */
h1, h2, .display,
.scene-heading, .scene-copy-split .scene-heading,
.scene-metrics strong, .menu-links a, .panel-caption h2,
.welcome-video-heading h1, .intro h1 {
  letter-spacing: .012em;
}
.card-detail h2 { letter-spacing: 0; }
.product-summary h2 { letter-spacing: -.025em; }
.section-heading h2 { font-size: clamp(52px, 5.2vw, 80px); line-height: 1.08; }
.scene-heading { font-size: clamp(44px, 5.4vw, 82px); line-height: 1.13; }
.scene-copy-split .scene-heading { font-size: clamp(36px, 4.5vw, 68px); }
.menu-links a { font-size: clamp(32px, 4vw, 52px); line-height: 1.2; }
.welcome-video-heading h1 { font-size: clamp(42px, 5.3vw, 78px); line-height: 1.12; }
@media (min-width: 761px) {
  .panel-caption h2 { font-size: clamp(22px, 2.3vw, 34px); }
  .brand-panel:not(.is-active) .panel-caption h2 { font-size: clamp(18px, 1.7vw, 25px); }
}
@media (hover: hover) and (min-width: 761px) {
  .hero-track .brand-panel:hover .panel-caption h2,
  .hero-track .brand-panel:focus-visible .panel-caption h2 { font-size: clamp(22px, 2.3vw, 34px); }
}
@media (max-width: 760px) {
  .section-heading h2 { font-size: 44px; }
  .scene-heading, .scene-copy-split .scene-heading { font-size: clamp(34px, 9.2vw, 46px); line-height: 1.17; }
  .menu-links a { font-size: clamp(26px, 7vw, 34px); }
  .panel-caption h2 { font-size: 30px; }
  .welcome-video-heading h1 { font-size: clamp(36px, 9.3vw, 46px); }
}
@media (max-height: 650px) and (min-width: 761px) {
  .scene-heading, .scene-copy-split .scene-heading { font-size: 38px; }
}
html { background: #000; }
body {
  background: #000;
  color: #fff;
}
::selection { background: var(--brand); color: var(--brand-ink); }

/* Every section rests on black; green is reserved for the logo and useful accents. */
:is(.intro, .contact-section, .questions, .brand-inventory,
    .product-summary, .product-info, .gallery-section, .related-section) {
  background: #000;
}
.inventory-heading,
.inventory-layout {
  background: #000;
}
.site-footer {
  border-top-color: #303030;
  background: #000;
  padding-bottom: 0;
}
.footer-bottom { border-top-color: #303030; color: #aaa; }

/* A final brand tableau sits below the footer links and copyright. */
.footer-signoff {
  position: relative;
  isolation: isolate;
  height: clamp(180px, 44vw, 720px);
  margin: clamp(55px, 7vw, 110px) calc(-1 * var(--gutter)) 0;
  overflow: hidden;
  background: #000;
}
.footer-signoff-word {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  font: 400 min(25vw, 390px)/1 var(--display);
  letter-spacing: .025em;
  white-space: nowrap;
  color: var(--brand);
}
.footer-cart-lineup {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: block;
  width: min(96%, 1500px);
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  /* Follow the staggered roofline so the live lettering sits behind the carts. */
  clip-path: polygon(
    0 100%, 0 60%, 2% 50%, 2.5% 37%, 4% 29.5%,
    3% 29%, 3% 27.5%, 8.5% 24%, 10.2% 23.5%, 12% 25%,
    16.2% 28%, 16.7% 35%, 17.5% 23%, 17.2% 21%,
    22.8% 15.6%, 24.5% 15.5%, 30% 19%, 37% 26%,
    37.3% 23%, 38.5% 21.5%, 39.4% 10%, 39.5% 8.5%,
    46.5% 2%, 49.5% 1%, 53.5% 3.3%, 59% 11.5%,
    62.4% 17%, 62.5% 26%, 73.5% 15.5%, 76% 15.5%,
    79.5% 19%, 82.3% 22%, 83% 33%, 83.5% 28%,
    86.7% 25.5%, 90.1% 24%, 92% 24.5%, 96.6% 27.8%,
    97% 30%, 97.5% 44%, 98.5% 50%, 100% 59%, 100% 100%
  );
}
@media (max-width: 760px) {
  .footer-grid { text-align: center; }
  .footer-grid a,
  .footer-grid .address { margin-inline: auto; }
  .footer-bottom { text-align: center; }
  .footer-signoff { height: 46vw; min-height: 145px; margin-top: 55px; }
  .footer-signoff-word { font-size: 26vw; }
  .footer-cart-lineup { width: 100%; }
}

/* Deep-black photography surfaces prevent a visible rectangle around each image. */
.hero,
.brand-panel,
.showcase,
.showcase-stage,
.showcase-scene,
.card-image,
.gallery-photo,
.lightbox,
.welcome-video,
.welcome-video-frame {
  background-color: #000;
}
.card-image,
.gallery-photo {
  box-shadow: 0 0 0 1px #ffffff0a;
}

/* Four short corner trims soften each listing photograph's edge against black. */
.card-image {
  --trim-length: 30px;
  border-radius: 10px;
  isolation: isolate;
}
.card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 2px solid var(--brand);
  border-radius: inherit;
  -webkit-mask:
    linear-gradient(#000 0 0) top left / var(--trim-length) var(--trim-length) no-repeat,
    linear-gradient(#000 0 0) top right / var(--trim-length) var(--trim-length) no-repeat,
    linear-gradient(#000 0 0) bottom left / var(--trim-length) var(--trim-length) no-repeat,
    linear-gradient(#000 0 0) bottom right / var(--trim-length) var(--trim-length) no-repeat;
  mask:
    linear-gradient(#000 0 0) top left / var(--trim-length) var(--trim-length) no-repeat,
    linear-gradient(#000 0 0) top right / var(--trim-length) var(--trim-length) no-repeat,
    linear-gradient(#000 0 0) bottom left / var(--trim-length) var(--trim-length) no-repeat,
    linear-gradient(#000 0 0) bottom right / var(--trim-length) var(--trim-length) no-repeat;
}
@media (max-width: 760px) {
  .card-image { --trim-length: 22px; border-radius: 8px; }
}

/* The halo lives behind the unmodified SVG; there is no filter on the artwork. */
.site-header {
  background: linear-gradient(180deg, #000 0%, #000e 28%, #0007 64%, transparent);
}
.site-header .wordmark,
.menu-header .wordmark {
  position: relative;
  isolation: isolate;
}
.site-header .wordmark::before,
.menu-header .wordmark::before {
  content: '';
  position: absolute;
  inset: -19px;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse, #64f81726 0%, #64f81712 35%, transparent 71%);
}
.wordmark .brand-logo { filter: none; }
.menu-dialog {
  background: #000;
}
.menu-dialog::backdrop { background: #000; }
.menu-bottom { border-top-color: #334137; }

/* Green marks action and position; reading text stays white or silver. */
.scene-tab { border-top-color: #33403a; }
.scene-tab::before { background: var(--brand); }
.scene-tab[aria-current] { color: #fff; }
.scene-tab[aria-current] .scene-tab-number { color: var(--brand); }
.brand-panel.is-active .panel-caption h2,
.brand-panel.is-active .panel-arrow { color: var(--brand); }
.panel-arrow { text-decoration-color: #64f817a6; }
.text-link { border-bottom-color: #527541; }
.hex-icon { background: #758477; }
.hex-icon::before { background: #020403; }
.skip { background: var(--brand); color: var(--brand-ink); }

.button:not(.outline) {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}
.button.outline {
  background: #000;
  border-color: #5b7257;
  color: #fff;
}
.filter-form input,
.filter-form select {
  background: #080808;
  border-color: #4b5b5d;
  color: #fff;
  accent-color: var(--brand);
}
.filter-form input::placeholder { color: #a3afb1; }
.filter-form :is(input, select):focus-visible { border-color: var(--brand); }
.feature-list li { border-color: #3b4946; background: #000; }
.verification-note { border-left-color: #7cac65; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
  outline-color: var(--brand);
}
.scene-adjacent:focus-visible .hex-icon {
  background: var(--brand);
  color: var(--brand-ink);
}
.scene-adjacent:focus-visible .hex-icon::before { background: var(--brand); }

/* Native Mux controls remain clear; only their accent and Play ring change. */
.welcome-video mux-player {
  --media-accent-color: var(--brand);
  --media-primary-color: #fff;
  --media-secondary-color: #000;
  accent-color: var(--brand);
}
.welcome-video mux-player::part(center play button) {
  border-color: #64f817b3;
  background: #020603c9;
  box-shadow: 0 0 24px #64f81712;
}
.welcome-video-frame:focus-within { outline-color: var(--brand); }

@media (hover: hover) {
  .menu-links a:hover { color: var(--brand); opacity: 1; }
  .menu-toggle:hover i { background: var(--brand); }
  .text-link:hover { color: #fff; border-bottom-color: var(--brand); }
  .footer-grid a:hover,
  .card-detail h2 a:hover,
  .filter-form .reset:hover,
  .hero-controls button:not(:disabled):hover { color: var(--brand); }
  .button:not(.outline):hover {
    background: #80ff40;
    border-color: #80ff40;
    box-shadow: 0 5px 28px #64f81714;
  }
  .button.outline:hover {
    border-color: var(--brand);
    background: #64f8170b;
    color: #fff;
  }
  .icon-button:hover { border-color: var(--brand); color: var(--brand); }
  .scene-adjacent:hover .hex-icon { background: var(--brand); color: var(--brand-ink); }
  .scene-adjacent:hover .hex-icon::before { background: var(--brand); }
  .welcome-video mux-player::part(center play button):hover {
    border-color: var(--brand);
    background: #0a1705dc;
  }
}
@media (hover: hover) and (min-width: 761px) {
  .hero-track:has(.brand-panel:hover) .panel-caption h2,
  .hero-track:has(.brand-panel:hover) .panel-arrow,
  .hero-track:has(.brand-panel:focus-visible) .panel-caption h2,
  .hero-track:has(.brand-panel:focus-visible) .panel-arrow { color: #fff; }
  .hero-track .brand-panel:hover .panel-caption h2,
  .hero-track .brand-panel:hover .panel-arrow,
  .hero-track .brand-panel:focus-visible .panel-caption h2,
  .hero-track .brand-panel:focus-visible .panel-arrow { color: var(--brand); }
}
@media (max-width: 760px) {
  .site-header .wordmark::before,
  .menu-header .wordmark::before { inset: -14px; }
  .filter-toggle { border-bottom-color: #3e5544; }
  .filters-open .filter-toggle::after { color: var(--brand); }
  .welcome-video mux-player::part(center play button) { box-shadow: 0 0 18px #64f81710; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .wordmark::before,
  .menu-header .wordmark::before { animation: none; }
}

/* A concise bridge from the showroom tour into the family story. */
.home-about { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px 10vw; padding: 85px var(--gutter) 100px; border-bottom: 1px solid var(--line); }
.home-about-label { grid-column: 1 / -1; color: var(--brand); font-size: 14px; }
.home-about h2 { font: 400 clamp(48px,6.4vw,96px)/1.12 var(--display); letter-spacing: .005em; }
.home-about > div { max-width: 480px; align-self: center; }
.home-about > div > p { font-size: 18px; }
@media (max-width: 760px) {
  .home-about { display: block; padding-block: 55px 65px; }
  .home-about-label { margin-bottom: 24px; font-size: 13px; }
  .home-about h2 { font-size: clamp(44px,10.8vw,70px); }
  .home-about > div { margin-top: 28px; }
  .home-about > div > p { font-size: 16px; }
}