/* ============================================================================
   VARIANT — "classic"
   The quote card goes back beside the copy at full height, which is the one
   thing James said he liked. The film moves out from between them and runs
   full width underneath, so it ends up LARGER than the compact hero gave it,
   not smaller. Header solid black.
   ========================================================================= */
.top { background: var(--black); backdrop-filter: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.top > .wrap { min-height: 88px; }
.top-brand svg, .top-brand img { height: 56px; }
@media (max-width: 560px) { .top-brand svg, .top-brand img { height: 42px; } }

.hero-classic { padding-bottom: 0; }
.hero-classic .hero-grid { grid-template-columns: 1.02fr .98fr; gap: clamp(1.8rem, 4vw, 3.6rem); align-items: start; }
.hero-classic h1 { font-size: clamp(2.3rem, 4.8vw, 3.9rem); }
.hero-classic .hero-cta { margin: 1.5rem 0 1.6rem; }
.hero-classic .hero-points { margin-bottom: .5rem; }

.hero-classic .quotecard { padding: clamp(1.5rem, 2.4vw, 2.1rem); }
.hero-classic .quotecard h2 { font-size: 1.55rem; }
.hero-classic .askcard input, .hero-classic .askcard select, .hero-classic .askcard textarea { margin-bottom: .75rem; }

/* the film, full width, big */
.hero-film { margin-top: clamp(2.4rem, 5vw, 4rem); padding-bottom: clamp(2.4rem, 5vw, 4rem); }
.hero-film .video { aspect-ratio: 21 / 9; border-radius: var(--r-lg); }
.hero-film .video-cap { text-align: center; margin-top: .9rem; }
@media (max-width: 900px) {
  .hero-classic .hero-grid { grid-template-columns: 1fr; }
  .hero-film .video { aspect-ratio: 16 / 9; }
}

/* ======================================================================
   15/09/2026 — photo behind the home hero, shorter hero form.
   ====================================================================== */

/* The photo sits behind the hero copy and the quote card. It is darkened
   twice — a flat scrim and a left-to-right gradient — so the yellow and
   white display type keep their measured contrast on every part of the
   image. The isolation keeps the negative z-index inside the hero. */
.hero-photo { position: relative; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--black); }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 45%; opacity: .72; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,11,8,.80) 0%, rgba(11,11,8,.50) 42%, rgba(11,11,8,.28) 100%),
    linear-gradient(180deg, rgba(11,11,8,.30) 0%, rgba(11,11,8,.10) 35%, rgba(11,11,8,.92) 100%);
}
.hero-photo h1, .hero-photo .hero-lede, .hero-photo .hero-points li { text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.hero-photo .hero-lede { color: var(--white); }
@media (max-width: 900px) {
  .hero-bg img { object-position: 60% 50%; opacity: .55; }
}

/* The hero form: name, phone, email, size, suburb + postcode, notes. */
.askcard-mini .mini-fields { display: block; }
.askcard-mini .qgrid { margin: 0; }
.askcard-mini .qgrid-suburb { grid-template-columns: 1.7fr 1fr; }
@media (max-width: 560px) { .askcard-mini .qgrid-suburb { grid-template-columns: 1fr; } }
.askcard-mini textarea { min-height: 64px; }
.askcard-mini .btn-wide { margin-top: .2rem; }
.askcard-mini .qtoggle { margin-bottom: 1rem; }

/* 15/09/2026 — the quote card carries the short form now, so it no longer needs
   the extra padding that made it a slab. */
.hero-classic .quotecard { padding: clamp(1.3rem, 2vw, 1.7rem); }
.hero-classic .quotecard h2 { font-size: 1.45rem; }
.hero-classic .qc-sub { margin-bottom: 1rem; }

/* ======================================================================
   15/09/2026 — headings in the logo's typeface.
   The Koala logo is set in Londrina Solid (Black). Matched by overlaying
   60 display faces on James's artwork: Londrina Solid 900 scored 0.89 IoU,
   the next best 0.74. James: use it for the headings throughout.
   Only the 900 weight is loaded (build.js font link), so every heading and
   every var(--display) element — eyebrows, plates, depot names, footer
   headings, the phone pill — resolves to the Black cut whatever weight the
   older rules ask for. Anton is no longer loaded. Body text stays Barlow.
   Set here rather than in style.css because v-classic is the live variant
   and loads last; the dormant comparison variants fall back to Arial Narrow.
   Tracking goes to neutral: the negative letter-spacing tuned for Barlow
   crushes a condensed hand-drawn face.
   ====================================================================== */
:root { --display: "Londrina Solid", "Arial Narrow", ui-sans-serif, system-ui, sans-serif; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 900; letter-spacing: .005em; line-height: 1.05; }
.hero h1 { letter-spacing: .005em; line-height: 1.02; }