/* ==========================================================================
   SOLIVAR — solivarco.com
   Design system: Cresco Labs layout/proportions, Solivar brand tokens.
   See docs/research/cresco-design-spec.md for the translation map.
   ========================================================================== */

/* Fonts are loaded twice — <link> in the head AND this @import.
   GHL and some hosts strip <link> tags, which silently drops the whole type
   system to Times New Roman. Belt and braces. */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500&family=Roboto:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* ---- Source palette (supplied) ---------------------------------------
     Warmer and greener than the v2 brand guidelines' champagne/bone system,
     which read too close to GOTTA. */
  --olive-leaf:   #606c38;
  --black-forest: #283618;
  --cornsilk:     #fefae0;
  --sunlit-clay:  #dda15e;
  --copperwood:   #bc6c25;

  /* ---- Semantic tokens, mapped onto the source palette -------------------
     Component CSS only ever references these, so the whole site can be
     re-skinned by rewriting this block alone.
     Ratio target: ~70% Paper/Bone, ~20% Ink text, ~10% clay + copper. */
  --paper:      var(--cornsilk);      /* page field */
  --bone:       #f2ebcb;              /* derived: cornsilk stepped down, for the
                                         alternating band. The one colour not in
                                         the supplied five — the palette has no
                                         mid-tone between cornsilk and olive. */
  --champagne:  var(--sunlit-clay);   /* highlight + headings on the dark footer */
  --solar-gold: var(--copperwood);    /* signature accent */
  --leaf-olive: var(--olive-leaf);    /* quiet secondary, mono captions */
  --deep-moss:  #3f4a24;              /* derived: between forest and olive, for
                                         lead paragraphs and subheads */
  --olive-ink:  var(--black-forest);  /* body text, headings */
  --noir:       var(--black-forest);  /* footer field — deep forest, not near-black */

  --gold-hairline: rgba(188, 108, 37, 0.30);
  --ink-hairline:  rgba(40, 54, 24, 0.16);

  /* Type — Google Sans Medium for headings, Roboto Regular for body.
     Both are in the public Google Fonts catalogue (Product Sans is the
     restricted one; Google Sans is not). */
  --font-display: 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout — Cresco's measurements, kept exactly */
  --container:  1140px;
  --container-wide: 1400px;
  --measure:    700px;
  --measure-narrow: 640px;

  /* Fluid spacing */
  --gap-xs: clamp(0.5rem, 1vw, 0.75rem);
  --gap-s:  clamp(0.85rem, 1.6vw, 1.25rem);
  --gap-m:  clamp(1.5rem, 3vw, 2.5rem);
  --gap-l:  clamp(2.5rem, 5vw, 4rem);
  --gap-xl: clamp(3.5rem, 8vw, 6.5rem);

  --radius-card: 5px;
  --radius-pill: 30px;

  --header-h: 78px;
  --strip-gap: 1.1rem;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--olive-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* --------------------------------------------------------------------------
   3. Typography
   Google Sans Medium (500) for headings, Roboto Regular (400) for body.

   Everything is SENTENCE CASE — no text-transform anywhere in this stylesheet.
   Tracking is near-zero to match: the wider values this file used to carry only
   existed to open up all-caps, and read as broken spacing on lowercase. Where a
   string needs to be uppercase (a licence number, a batch ID) it is written
   that way in the HTML rather than forced by CSS.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;            /* Medium */
  color: var(--olive-ink);
  margin: 0 0 var(--gap-s);
  text-wrap: balance;
}

/* Cresco pattern: H1 is the page label, H2 the visual headline — H1 is the
   smaller of the two. Copied deliberately; it is why interior pages read calm. */
h1, .page-label {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  line-height: 1.25;
  letter-spacing: 0.005em;
}

h3 {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
}

h4 {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

p { margin: 0 0 var(--gap-s); max-width: 68ch; }

.lead { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--deep-moss); }


/* The mono layer. Per the brand guidelines this is what "turns compliance
   data into a design feature" — it gives the page a second texture without
   introducing a second colour. */
.mono {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--leaf-olive);
}

.rule {
  border: 0;
  border-top: 1px solid var(--gold-hairline);
  margin: var(--gap-m) 0;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
/* The design runs its big sections at 5.5% side margins — 89% content width
   at 1920 — not a fixed pixel cap. Capped at 1800px so ultrawide screens
   don't stretch forever. Inner text blocks keep their own 1140 container. */
.container--wide { max-width: none; width: min(89vw, 1800px); padding-inline: 0; }
.measure { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }

/* Alternating Paper / Bone bands — Cresco's rhythm, Solivar's colours. */
/* Design rhythm is tight: 24-128px between blocks, not 200+. */
.section { padding-block: var(--gap-l); }
.section--bone { background: var(--bone); }
.section--tight { padding-block: var(--gap-l); }

.center { text-align: center; }
.center p, .center .measure { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. Image slots
   Every image is an EMPTY placeholder at this stage, by request. Each slot
   prints its ID and intended ratio so art can be commissioned to spec.
   Replace .img-slot with <img> when assets land.
   -------------------------------------------------------------------------- */
.img-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(96, 108, 56, 0.07) 0 12px,
      transparent 12px 24px
    ),
    var(--bone);
  border: 1px dashed var(--gold-hairline);
  border-radius: var(--radius-card);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
/* A step darker again, so the slot still reads as a hole in the page when it
   sits on the Bone band rather than on Paper. */
.section--bone .img-slot { background-color: #e7dfb4; }

.img-slot__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--leaf-olive);
  text-align: center;
  padding: 1rem;
  line-height: 1.7;
}
.img-slot__label strong {
  display: block;
  font-weight: 500;
  color: var(--deep-moss);
}

.img-slot--21x9  { aspect-ratio: 21 / 9; }
.img-slot--16x9  { aspect-ratio: 16 / 9; }
.img-slot--4x3   { aspect-ratio: 4 / 3; }
.img-slot--4x5   { aspect-ratio: 4 / 5; }
.img-slot--1x1   { aspect-ratio: 1 / 1; }

/* Real images dropped into slots — same ratios as the placeholders they
   replace, cover-cropped. Inside .hero-full__media the explicit height rules
   win over aspect-ratio, which is the behaviour we want. */
.img-fill {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
  aspect-ratio: 3 / 2;
}
.img-fill--21x9 { aspect-ratio: 21 / 9; }
.img-fill--16x9 { aspect-ratio: 16 / 9; }
.img-fill--4x3  { aspect-ratio: 4 / 3; }
.img-fill--4x5  { aspect-ratio: 4 / 5; }
.img-fill--1x1  { aspect-ratio: 1 / 1; }

/* --------------------------------------------------------------------------
   6. Buttons — Cresco's pill, kept exactly, recoloured to Solar Gold
   -------------------------------------------------------------------------- */
/* Fill is Black Forest, not Copperwood. Copperwood on Cornsilk measures
   3.8:1 — fine for large display text, but a 13px button label needs 4.5:1.
   Forest gives 12:1 and Copperwood becomes the hover, so the warm tone still
   pays off on interaction. */
.button {
  display: inline-block;
  min-width: 220px;
  padding: 15px 40px;
  border: 1px solid var(--olive-ink);
  border-radius: var(--radius-pill);
  background: var(--olive-ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.button:hover, .button:focus-visible { background: var(--copperwood); border-color: var(--copperwood); color: var(--cornsilk); }

.button--ghost { background: transparent; color: var(--olive-ink); border-color: var(--copperwood); }
.button--ghost:hover, .button--ghost:focus-visible { background: var(--olive-ink); border-color: var(--olive-ink); color: var(--paper); }

.button-row { display: flex; flex-wrap: wrap; gap: var(--gap-s); }
.center .button-row { justify-content: center; }

/* Inline directional link — Cresco's "Meet Our Brands →" pattern.
   Label only, never a subline. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--leaf-olive);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--gold-hairline);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.link-arrow::after { content: '→'; transition: transform 0.2s ease; }
.link-arrow:hover, .link-arrow:focus-visible { color: var(--deep-moss); border-color: var(--deep-moss); }
.link-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(245, 241, 234, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-hairline);
}
.header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
}

/* The supplied artwork is the primary horizontal lockup and carries its own
   Bone field with rounded corners — the guidelines are explicit that these
   marks are not to be cut out or floated. So it sits as a panel, not a
   knocked-out wordmark, and the rounded corners are part of the file. */
.logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo img { height: 48px; width: auto; display: block; }

@media (max-width: 480px) { .logo img { height: 40px; } }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.75rem); list-style: none; margin: 0; padding: 0; }
/* Sentence case, not caps. Tracking drops to near-zero with it — 0.1em was
   there to open up all-caps and just looks loose on lowercase — and the size
   goes up, since lowercase at 11.8px read too small. */
.nav__link {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--olive-ink);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.nav__link:hover, .nav__link:focus-visible, .nav__link[aria-current='page'] {
  color: var(--deep-moss);
  border-color: var(--solar-gold);
}
.nav__link--utility { color: var(--leaf-olive); font-weight: 400; }

/* The nav carries its own CTA for the mobile drawer only. At desktop the
   header__cta button is the visible one — without this the two stack up and
   the line-sheet CTA renders twice in the header. */
.nav > .button { display: none; }

.header__cta { display: none; flex-shrink: 0; }
/* nowrap + shrink:0 — without these the flex row squeezes the pill until the
   label wraps to three lines inside a circle. */
.header__cta .button {
  min-width: 0;
  padding: 11px 22px;
  font-size: 0.7rem;
  white-space: nowrap;
}

/* Mobile menu toggle */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span { display: block; height: 1.5px; background: var(--olive-ink); transition: transform 0.25s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer — relayout, not a shrunken desktop nav */
.nav--open {
  display: block;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--paper);
  padding: var(--gap-l) clamp(1.25rem, 5vw, 2.5rem);
  overflow-y: auto;
  z-index: 55;
}
.nav--open .nav__list { flex-direction: column; align-items: flex-start; gap: var(--gap-s); }
.nav--open .nav__link { font-size: 1.1rem; letter-spacing: 0.01em; }
.nav--open > .button { display: inline-block; margin-top: var(--gap-m); }

/* Back down to 1000px. This was raised to 1140px when the image lockup (191px
   vs the old 101px text wordmark) pushed logo + 8 nav items + CTA past the
   available width. With the nav trimmed to 6 items it measures clean at 900px,
   so tablets get the full nav again; 1000px keeps a margin over that floor. */
@media (min-width: 1000px) {
  .nav { display: block; }
  .header__cta { display: block; }
  .nav-toggle { display: none; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
/* Plain stacked hero — the fallback for pages with no hero art (contact).
   Everything else uses .hero-full above. */
.hero { padding-block: var(--gap-xl) var(--gap-l); }
.hero__label { color: var(--solar-gold); }
.hero .lead { max-width: var(--measure); }

/* --------------------------------------------------------------------------
   9. Stat band — one per page, phrased as a lead-in sentence, never
   floating numbers. Cresco's pattern.
   -------------------------------------------------------------------------- */
.statband { background: var(--bone); padding-block: var(--gap-l); }
.statband__lead {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  letter-spacing: 0.005em;
  color: var(--deep-moss);
  margin-bottom: var(--gap-m);
  max-width: var(--measure);
}
.statband__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-m);
  border-top: 1px solid var(--gold-hairline);
  padding-top: var(--gap-m);
}
.stat__figure {
  font-family: var(--font-mono);
  /* Sized so "100 lbs" holds ONE line in a four-up panel column. */
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--solar-gold);
  display: block;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--deep-moss);
  margin-top: 0.6rem;
  display: block;
  max-width: 22ch;
}

@media (min-width: 600px) { .statband__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .statband__grid { grid-template-columns: repeat(4, 1fr); } }
.statband__grid--3 { }
@media (min-width: 900px) { .statband__grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   10. Section rail — alternating image + text rows. The workhorse of the
   whole site. Body copy is capped ~50 words by the copy deck, not by CSS.
   -------------------------------------------------------------------------- */
.rail { display: grid; gap: var(--gap-m); align-items: center; }
.rail + .rail { margin-top: var(--gap-xl); }

@media (min-width: 900px) {
  .rail { grid-template-columns: 1fr 1fr; gap: var(--gap-l); }
  /* Reverse alternates the image side without reordering the DOM, so the
     reading order stays correct for screen readers. */
  .rail--reverse .rail__media { order: -1; }
}

.rail__body p:last-child { margin-bottom: var(--gap-s); }

/* --------------------------------------------------------------------------
   10b. Cresco's real layout devices

   The thing that stops Cresco reading as a stack of rows is the OVERHANG: a
   background band placed in a grid cell that spans the full width but only the
   middle rows, with content deliberately assigned to overlapping rows so it
   breaks out above and below the band. Three sections use it. Copied here.

   One deviation: Cresco pushes its bands back with `z-index: -1`, which works
   only because its <body> has no background. Ours is painted Paper, so -1
   would bury the band behind it. Bands sit at z-index 0 and content at 1.
   -------------------------------------------------------------------------- */

/* --- Hero: a tall contained image with the copy panel floating over its
   right side. Contained, not full-bleed — it sits inside the wide container
   so there is breathing room down both edges and the rounded corners read. --- */
.hero-full { padding-block: 0; }
/* The hero ignores the container's max-width: it spans 90vw at every viewport
   (5vw gutter each side) instead of stopping at 1400px, which left large dead
   margins on wide screens. Everything below the hero keeps the page grid. */
.hero-full > .container { max-width: none; width: auto; padding-inline: clamp(16px, 1vw, 20px); }
.hero-full__inner { position: relative; }
.hero-full__copy > :last-child { margin-bottom: 0; }
.hero-full__copy > .eyebrow { margin-top: 0; }

/* Height is the point of this section — it should dominate the first screen. */
.hero-full__media .img-slot {
  aspect-ratio: auto;
  height: clamp(520px, 88vh, 1000px);
}
.hero-full__media img {
  width: 100%;
  height: clamp(520px, 88vh, 1000px);
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* Stat panel hanging off the hero's bottom edge — the four numbers a buyer
   or investor needs first, lifted out of the old stat band. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-m);
  background: var(--paper);
  border: 1px solid var(--ink-hairline);
  border-radius: var(--radius-card);
  padding: var(--gap-m) var(--gap-l);
  box-shadow: 0 14px 40px rgba(40, 54, 24, 0.14);
  margin-top: var(--gap-m);
}

@media (min-width: 900px) {
  .hero-stats {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 38%);
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 3vw, 3.5rem);
    width: min(86%, 1180px);
    margin-top: 0;
    z-index: 6;
  }
  .hero-stats .stat { border-left: 1px solid var(--gold-hairline); padding-left: clamp(1rem, 2vw, 2rem); }
  .hero-stats .stat:first-child { border-left: 0; padding-left: 0; }
  /* Clearance below the image for the hanging 38% of the panel. */
  .hero-full--stats { margin-bottom: clamp(6rem, 8vw, 9rem); }
}

/* Shorter on interior pages — an 88vh hero on every page is exhausting. */
.hero-full--interior .img-slot,
.hero-full--interior img { height: clamp(380px, 58vh, 620px); }

/* Mobile: the panel follows the image rather than covering it. */
.hero-full__overlay { padding-block: var(--gap-m); }

@media (min-width: 900px) {
  .hero-full__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: clamp(2rem, 5vw, 6rem);
    /* Let clicks reach the image; re-enable on the copy itself. */
    pointer-events: none;
    /* The design sets its copy straight on the slide with no panel. Our art
       is not guaranteed dark, so a forest-tinted scrim rises under the copy
       side to hold the white text. Clipped to the image's radius. */
    border-radius: var(--radius-card);
    background: linear-gradient(90deg, rgba(40, 54, 24, 0) 42%, rgba(40, 54, 24, 0.55) 78%);
  }
  .hero-full__copy {
    pointer-events: auto;
    width: min(46%, 540px);
  }
  .hero-full__copy h1 { color: var(--cornsilk); }
  .hero-full__copy p { color: var(--bone); }
  .hero-full__copy .button { background: var(--cornsilk); border-color: var(--cornsilk); color: var(--olive-ink); }
  .hero-full__copy .button:hover, .hero-full__copy .button:focus-visible { background: var(--copperwood); border-color: var(--copperwood); color: var(--cornsilk); }
}

/* --- Hero rotator ---------------------------------------------------------
   Six frames of the operation cross-fading in place. The stack is absolutely
   positioned inside a fixed-height box so the section never reflows between
   frames, and frame one carries .is-active in the markup — with no script the
   hero is simply a static image, which is the correct fallback.

   Timing is driven by the CSS progress animation on the active tick rather
   than a JS interval: advancing happens on `animationend`, so pausing costs a
   single `animation-play-state` and stays exactly in sync with the bar the
   visitor is watching. Under reduced motion the animation never runs, so the
   hero holds on frame one and the ticks become manual controls. ----------- */
.hero-rotator {
  position: relative;
  height: clamp(520px, 88vh, 1000px);
  --hero-interval: 6.5s;
  /* Keep the slides' z-indexes inside this box. Without a stacking context the
     active frame's z-index competes with its own siblings in .hero-full__inner
     and paints straight over the copy overlay. */
  isolation: isolate;
}
.hero-rotator__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
  opacity: 0;
  z-index: 0;
}
/* The outgoing frame is held opaque beneath the incoming one for the length of
   the fade. Without it, two half-transparent frames would let the bottom of
   the stack show through and the cross-fade would flash. */
.hero-rotator__slide.is-under { opacity: 1; z-index: 1; }
.hero-rotator__slide.is-active {
  opacity: 1;
  z-index: 2;
  transition: opacity 900ms ease;
}

/* Progress ticks. Bottom-left of the image, and on desktop lifted clear of the
   stat panel that hangs over the image's bottom edge. */
.hero-ticks {
  position: absolute;
  left: clamp(1rem, 2.5vw, 2.5rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* The frames run from bright cultivation rooms to dusk exteriors, so the
     controls carry their own separation rather than relying on the art. */
  filter: drop-shadow(0 1px 3px rgba(40, 54, 24, 0.8));
}
@media (min-width: 900px) {
  .hero-ticks { bottom: clamp(7rem, 11vh, 8.5rem); }
}

/* The bar is 3px, the button is not: a 3px control is untappable, so the
   visible track is drawn inside a transparent hit area tall enough for touch. */
.hero-ticks__tick {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: clamp(26px, 3vw, 34px);
  height: 28px;
  background: none;
  position: relative;
  cursor: pointer;
}
.hero-ticks__tick::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 1.5px);
  height: 3px;
  border-radius: 999px;
  background: rgba(254, 250, 224, 0.45);
  transition: background-color 0.2s ease;
}
.hero-ticks__tick:hover::before { background: rgba(254, 250, 224, 0.75); }
.hero-ticks__tick:focus-visible { outline: 2px solid var(--cornsilk); outline-offset: 2px; border-radius: 4px; }

/* The fill is animated from script, which also makes it the rotator's clock --
   see js/main.js. The duration stays here as --hero-interval so the timing
   lives with the rest of the design tokens. */
.hero-ticks__fill {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 1.5px);
  height: 3px;
  border-radius: 999px;
  background: var(--sunlit-clay);
  transform: scaleX(0);
  transform-origin: left center;
}

.hero-ticks__toggle {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin-left: 0.15rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: rgba(254, 250, 224, 0.72);
  cursor: pointer;
  transition: color 0.2s ease;
}
.hero-ticks__toggle:hover { color: var(--cornsilk); }
.hero-ticks__toggle:focus-visible { outline: 2px solid var(--cornsilk); outline-offset: 3px; }
.hero-ticks__toggle svg { grid-area: 1 / 1; width: 10px; height: 11px; fill: currentColor; }
.hero-ticks__toggle .hero-ticks__play { display: none; }
.hero-ticks__toggle[aria-pressed="true"] .hero-ticks__pause { display: none; }
.hero-ticks__toggle[aria-pressed="true"] .hero-ticks__play { display: block; }

@media (prefers-reduced-motion: reduce) {
  .hero-rotator__slide.is-active { transition: none; }
  /* Script skips the clock entirely under reduced motion, so nothing advances
     on its own; the active tick is simply shown full and the ticks become
     manual controls. */
  .hero-ticks__tick[aria-current="true"] .hero-ticks__fill { transform: scaleX(1); }
}

/* --- Zigzag with a bleeding band (.home-opp-blocks) --- */
.opp-blocks { display: grid; gap: var(--gap-m); position: relative; }
.opp-blocks > * { position: relative; z-index: 1; }

@media (min-width: 900px) {
  .opp-blocks {
    grid-template-columns: 1.5rem 1fr 1fr 1.5rem;
    grid-template-rows: 2rem 4rem 1fr 5rem 1fr 4rem;
    gap: 0;
  }
  .opp-blocks__copy-one { grid-column: 2 / 3; grid-row: 3 / 4; padding-left: 8%; padding-right: 8%; align-self: center; }
  .opp-blocks__media-one { grid-column: 3 / 4; grid-row: 2 / 4; padding-right: 8%; }
  .opp-blocks__media-two { grid-column: 2 / 3; grid-row: 5 / 7; padding-left: 8%; }
    /* Both copy blocks pad TOWARD the centre line as well — measured flush
     against the image edge before this; the design holds ~74px there. */
.opp-blocks__copy-two { grid-column: 3 / 4; grid-row: 5 / 7; padding-left: 8%; padding-right: 8%; align-self: center; }
  /* The band. Spans every column but only rows 3–6, so both images overhang it. */
  .opp-blocks::after {
    content: '';
    display: block;
    background: var(--bone);
    grid-column: 1 / 5;
    grid-row: 3 / 6;
    z-index: 0;
  }
}

/* --- Overhang (.overhang-new) — interior-page workhorse --- */
.overhang { display: grid; gap: var(--gap-m); position: relative; }
.overhang__bg { display: none; }

@media (min-width: 900px) {
  .overhang {
    grid-template-columns: 5.5% 1fr 5.5%;
    grid-template-rows: 70px 1fr 100px;
    gap: 0;
  }
  .overhang__bg {
    display: block;
    grid-column: 1 / 4;
    grid-row: 1 / 3;
    background: var(--bone);
    z-index: 0;
  }
  .overhang__wrap {
    grid-column: 2 / 3;
    grid-row: 1 / 4;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 70px 1fr 100px;
    gap: var(--gap-m);
    padding-top: 3%;
    z-index: 1;
  }
  /* Rows 2–4 against a band that stops at row 3 — the image hangs past it. */
  .overhang__media { grid-column: 1 / 2; grid-row: 2 / 4; align-self: center; }
  .overhang__copy { grid-column: 2 / 3; grid-row: 2 / 3; display: flex; flex-direction: column; justify-content: center; padding-bottom: var(--gap-m); }
  .overhang--media-right .overhang__media { grid-column: 2 / 3; }
  .overhang--media-right .overhang__copy { grid-column: 1 / 2; }
}

/* --- Contained card (.card-horizontal) --- */
.card-h {
  display: grid;
  gap: var(--gap-m);
  padding: var(--gap-m);
  border-radius: var(--radius-card);
  background: var(--bone);
}
.card-h__body > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .card-h { grid-template-columns: 1fr 1fr; gap: var(--gap-l); padding: var(--gap-l); }
  .card-h__media { order: 2; }
  .card-h--media-left .card-h__media { order: -1; }
}

/* --- Endorsement lockup — the back-panel line, set live rather than
   photographed. Bone plate, rules either side, tracked caps at the small
   scale it actually prints at. --- */
.endorsement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  background: var(--bone);
  border-radius: var(--radius-card);
  aspect-ratio: 3 / 2;
  padding: var(--gap-m);
}
.endorsement__rule { flex: 1 1 auto; max-width: 90px; height: 1px; background: var(--gold-hairline); }
.endorsement__line {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 1.3vw, 1rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--deep-moss);
  white-space: nowrap;
}

/* --- Split (.img-copy-split) ---
   Body always comes first in the DOM so reading order stays correct; the
   modifier moves the image left visually only. */
.split { display: grid; gap: var(--gap-m); align-items: center; }
@media (min-width: 900px) {
  /* Design proportion: image 848px vs text 690px at 1920 — the image column
     is the bigger one on whichever side it sits. */
  .split { grid-template-columns: 1fr 1.2fr; gap: clamp(2.5rem, 4vw, 4.25rem); }
  .split--media-left { grid-template-columns: 1.2fr 1fr; }
  .split--media-left .split__media { order: -1; }
}

/* --- Horizontal scroll strip (.horizontal-slider) --- */
.h-strip { display: flex; align-items: center; gap: 0.5rem; }
.h-strip__track {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: var(--strip-gap);
  /* NO scroll-behavior: smooth and NO scroll-snap here. Both were tried and
     both break programmatic paging in Chrome — a scrollLeft assignment under
     CSS smooth reverts to 0 (verified: instant lands 1630, smooth lands 0).
     The arrows tween scrollLeft themselves in main.js instead, and the
     exact-fit widths mean every page already lands flush on a card edge.
     scroll-behavior is pinned to auto so nothing cascades smooth back onto it. */
  scroll-behavior: auto;
}
.h-strip__track::-webkit-scrollbar { display: none; }
/* Widths subtract the gaps so N cards fit EXACTLY in the track — a flat 25%
   overflowed by 3 gaps and clipped the fourth card. */
.h-strip__item {
  flex: 0 0 auto;
  width: calc(100% - (var(--strip-gap) * 2));   /* 1 up, with a peek */
}
/* Design cards are portrait — 446x538 at 1920 (~5:6) — not landscape. */
.h-strip__item .img-fill, .h-strip__item .img-slot { aspect-ratio: 5 / 6; }
@media (min-width: 600px)  { .h-strip__item { width: calc((100% - var(--strip-gap)) / 2); } }
@media (min-width: 900px)  { .h-strip__item { width: calc((100% - var(--strip-gap) * 2) / 3); } }
@media (min-width: 1170px) { .h-strip__item { width: calc((100% - var(--strip-gap) * 3) / 4); } }

.h-strip__arrow {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: none;
  align-items: center; justify-content: center;
  font-size: 1.3rem; line-height: 1;
  background: var(--olive-ink);
  color: var(--paper);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.h-strip__arrow:hover { background: var(--copperwood); }
.h-strip__arrow:disabled { opacity: 0.3; cursor: default; }
@media (min-width: 900px) { .h-strip__arrow { display: flex; } }


/* --------------------------------------------------------------------------
   11. Cards
   -------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: 1fr; gap: var(--gap-m); }
@media (min-width: 600px) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 600px) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 600px) { .cards--6 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards--6 { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: var(--gap-m);
  background: var(--paper);
  border: 1px solid var(--ink-hairline);
  border-radius: var(--radius-card);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.section--bone .card { background: var(--paper); }
.card:hover { border-color: var(--gold-hairline); }
/* Hover lift is desktop-only — on touch it never triggers and just costs paint. */
@media (min-width: 1030px) and (prefers-reduced-motion: no-preference) {
  .card:hover { transform: translateY(-3px); }
}
.card p { margin-bottom: 0; }
.card__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--leaf-olive);
}
.card__spec { margin-top: auto; padding-top: var(--gap-s); }
.card .link-arrow { margin-top: auto; padding-top: var(--gap-s); align-self: flex-start; border-bottom: 0; }

.card--plain { background: transparent; border: 0; padding: 0; border-top: 1px solid var(--gold-hairline); padding-top: var(--gap-s); border-radius: 0; }
.section--bone .card--plain { background: transparent; }
.card--plain:hover { transform: none; }

/* --------------------------------------------------------------------------
   11b. Feature grid — icon / heading / body, borderless, 4x2 on desktop.
   Format copied from the Shopify reference Aaron supplied.
   -------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-l) var(--gap-m);
  margin-top: var(--gap-l);
}
@media (min-width: 640px)  { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }

/* Supplied illustrations (assets/icons/) vary in aspect — size by height so
   they share a visual scale; ink colour is baked into the files. */
.feature__icon { height: 58px; width: auto; max-width: 72px; margin-bottom: var(--gap-s); }
.feature h3 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin-bottom: 0.5rem; }
.feature p { font-size: 0.95rem; color: var(--deep-moss); margin-bottom: 0.5rem; }

/* --------------------------------------------------------------------------
   11c. Facility locator — real state geometry (public-domain boundary data)
   with the two licensed states interactive. Hover/focus/click updates the
   detail panel beside it.
   -------------------------------------------------------------------------- */
.locator { display: grid; gap: var(--gap-l); align-items: center; }
@media (min-width: 900px) { .locator { grid-template-columns: 1.15fr 1fr; } }

.locator__map svg { width: 100%; height: auto; display: block; }
/* A step darker than the Bone band this sits on — at fill:var(--bone) the
   surrounding states matched the section background and vanished to outlines. */
.map__context path { fill: #e5dcb0; stroke: var(--bone); stroke-width: 1.5; }
.map__state {
  fill: var(--leaf-olive);
  stroke: var(--paper);
  stroke-width: 2;
  cursor: pointer;
  transition: fill 0.2s ease;
}
.map__state:hover,
.map__state:focus-visible,
.map__state[aria-current='true'] { fill: var(--copperwood); outline: none; }

.locator__panel { border-top: 2px solid var(--gold-hairline); padding-top: var(--gap-m); }
.locator__panel h3 { margin-bottom: var(--gap-xs); }
.locator__rows { list-style: none; margin: var(--gap-s) 0 0; padding: 0; }
.locator__rows li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--ink-hairline);
  font-size: 0.94rem;
}
.locator__rows dt, .locator__rows .k {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--leaf-olive);
}
.locator__tabs { display: flex; gap: 0.5rem; margin-bottom: var(--gap-s); }
.locator__tab {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.45rem 1rem;
  border: 1px solid var(--ink-hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--olive-ink);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.locator__tab[aria-selected='true'] { background: var(--olive-ink); border-color: var(--olive-ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   11e. Flat vector diagrams — same language as the facility locator: brand
   fills, Cornsilk strokes, Copperwood on interaction. Information shown
   rather than described.
   -------------------------------------------------------------------------- */
/* Stage row. Icons are painted with CSS masks rather than <img> so they can
   take a colour on hover — a standalone SVG in an <img> cannot inherit one. */
.flow__stages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-m) 0;
  position: relative;
  margin-top: var(--gap-l);
}
/* Connector sits behind the icons; each icon carries a band of the section
   colour so the line appears to run between them rather than through. */
@media (min-width: 760px) {
  .flow__stages::before {
    content: '';
    position: absolute;
    top: 38px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--gold-hairline);
  }
}
.flow__node {
  flex: 1 1 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
@media (min-width: 760px) { .flow__node { flex: 1 1 0; } }

.flow__iconwrap { background: var(--bone); padding-inline: 18px; }
.flow__icon {
  display: block;
  width: 76px;
  height: 76px;
  background-color: var(--leaf-olive);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain;    mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: background-color 0.2s ease;
}
/* Mask URLs live here, not in an inline custom property: url() inside a
   custom property resolves against the STYLESHEET, so an inline
   `--icon: url(assets/…)` pointed at /css/assets/… and silently 404'd. */
.flow__icon--cultivation { -webkit-mask-image: url(../assets/icons/stage-cultivation.svg); mask-image: url(../assets/icons/stage-cultivation.svg); }
.flow__icon--extraction { -webkit-mask-image: url(../assets/icons/group-230.svg); mask-image: url(../assets/icons/group-230.svg); }
.flow__icon--production { -webkit-mask-image: url(../assets/icons/group-232.svg); mask-image: url(../assets/icons/group-232.svg); }
.flow__icon--brands { -webkit-mask-image: url(../assets/icons/group-235.svg); mask-image: url(../assets/icons/group-235.svg); }
.flow__icon--dispensary { -webkit-mask-image: url(../assets/icons/group-234.svg); mask-image: url(../assets/icons/group-234.svg); }
.flow__label {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--olive-ink);
  transition: color 0.2s ease;
}
.flow__node:hover .flow__icon,
.flow__node:focus-visible .flow__icon,
.flow__node[aria-current='true'] .flow__icon { background-color: var(--copperwood); }
.flow__node:hover .flow__label,
.flow__node:focus-visible .flow__label,
.flow__node[aria-current='true'] .flow__label { color: var(--copperwood); }
.flow__node:focus { outline: none; }
.flow__node:focus-visible .flow__label { text-decoration: underline; text-underline-offset: 4px; }

.flow__detail {
  max-width: var(--measure);
  margin: var(--gap-m) auto 0;
  text-align: center;
  min-height: 3.2em;              /* reserve the tallest line so swapping never jumps */
}
.flow__detail p { margin: 0 auto; color: var(--deep-moss); font-size: 1.05rem; }


/* --- Category tiles: image over label, used for product ranges --- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-m); margin-top: var(--gap-l); }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile img { width: 100%; border-radius: var(--radius-card); aspect-ratio: 4 / 3; object-fit: cover; }
.tile h3 { margin: var(--gap-s) 0 0.35rem; }
.tile p { font-size: 0.94rem; color: var(--deep-moss); margin-bottom: 0; }

/* Icon + label rows — reuses the supplied illustration set */
.iconrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-m); margin-top: var(--gap-l); }
@media (min-width: 900px) { .iconrow { grid-template-columns: repeat(4, 1fr); } }
.iconrow__item img { height: 56px; width: auto; max-width: 70px; margin-bottom: var(--gap-s); }
.iconrow__item h3 { margin-bottom: 0.35rem; }
.iconrow__item p { font-size: 0.94rem; color: var(--deep-moss); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11d. Spec table — the plain fact rows a trade buyer scans for
   -------------------------------------------------------------------------- */
.spec-table { width: 100%; border-collapse: collapse; margin-top: var(--gap-m); }
.spec-table th, .spec-table td { text-align: left; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--ink-hairline); vertical-align: top; }
.spec-table th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--leaf-olive);
  width: 34%;
}
.spec-table td { font-size: 0.96rem; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

/* Brand showcase — a sub-brand presented on its own terms */
.brandcard { display: grid; gap: var(--gap-m); align-items: center; }
@media (min-width: 900px) { .brandcard { grid-template-columns: 1fr 1.1fr; gap: var(--gap-l); } }
.brandcard__mark { height: 46px; width: auto; margin-bottom: var(--gap-s); }
.brandcard__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-s); }
.brandcard__grid img { border-radius: var(--radius-card); width: 100%; }

/* --------------------------------------------------------------------------
   12. Timeline — onboarding sequence on /manufacturing
   -------------------------------------------------------------------------- */
.timeline { display: grid; gap: var(--gap-m); counter-reset: step; }
@media (min-width: 768px) { .timeline { grid-template-columns: repeat(5, 1fr); gap: var(--gap-s); } }

.timeline__step { border-top: 2px solid var(--gold-hairline); padding-top: var(--gap-s); }
.timeline__when {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--leaf-olive);
  display: block;
  margin-bottom: 0.5rem;
}
.timeline__step h3 { font-size: 0.95rem; letter-spacing: 0.042em; margin-bottom: 0.5rem; }
.timeline__step p { font-size: 0.92rem; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   13. Spec list — the "what you get" bullet stacks
   -------------------------------------------------------------------------- */
.spec-list { list-style: none; margin: 0 0 var(--gap-s); padding: 0; max-width: 68ch; }
.spec-list li {
  position: relative;
  padding-left: 1.4rem;
  padding-block: 0.42rem;
  border-bottom: 1px solid var(--ink-hairline);
  font-size: 0.96rem;
}
.spec-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.1rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--solar-gold);
}

/* --------------------------------------------------------------------------
   14. Facility / footprint band
   -------------------------------------------------------------------------- */
.facility { border-top: 1px solid var(--gold-hairline); padding-top: var(--gap-s); }
.facility h3 { margin-bottom: 0.4rem; }

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */
.form { max-width: var(--measure); }
.form__grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-s); }
@media (min-width: 600px) { .form__grid--2 { grid-template-columns: repeat(2, 1fr); } }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--deep-moss);
}
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--olive-ink);
  background: var(--paper);
  border: 1px solid var(--ink-hairline);
  border-radius: var(--radius-card);
  padding: 0.75rem 0.9rem;
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--solar-gold);
  outline-offset: 1px;
  border-color: transparent;
}
.form__note { margin-top: var(--gap-s); }

/* The site-wide submit button. Explicit, so no host stylesheet dark-styles it. */
.form button[type='submit'] { float: none; }

/* --------------------------------------------------------------------------
   16. CTA band
   -------------------------------------------------------------------------- */
.cta-band { background: var(--bone); padding-block: var(--gap-l); text-align: center; position: relative; overflow: hidden; }
/* text-align does not centre flex children — the buttons sat hard left. */
.cta-band .button-row { justify-content: center; }

.cta-band p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   17. Footer — the one Noir surface per page.
   "Cream is the default; noir is the occasion." Guidelines §02.
   -------------------------------------------------------------------------- */
.footer { background: var(--noir); color: var(--bone); padding-block: var(--gap-l) var(--gap-m); position: relative; overflow: hidden; }
.footer__brand { margin-bottom: var(--gap-l); }
.footer__brand img { height: 58px; width: auto; display: block; }
.footer a { color: var(--bone); text-decoration: none; }
.footer a:hover, .footer a:focus-visible { color: var(--champagne); }

.footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-m); }
@media (min-width: 600px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: repeat(4, 1fr); } }

.footer h4 {
  color: var(--champagne);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  margin-bottom: var(--gap-s);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.footer__list a { font-size: 0.92rem; }

/* Compliance strip — does real work. Fastest answer to "are these people
   real" for a regulator or a buyer, and exactly the "compliance data as a
   design feature" the guidelines ask for. */
.compliance {
  margin-top: var(--gap-l);
  padding-top: var(--gap-m);
  border-top: 1px solid rgba(221, 161, 94, 0.30);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--champagne);
  line-height: 2;
}
.compliance strong { font-weight: 500; }

.footer__base {
  margin-top: var(--gap-m);
  padding-top: var(--gap-s);
  border-top: 1px solid rgba(221, 161, 94, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-s);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: rgba(254, 250, 224, 0.62);
}

/* --------------------------------------------------------------------------
   18. Age gate
   -------------------------------------------------------------------------- */
.agegate {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--noir);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-m);
}
.agegate[hidden] { display: none; }
.agegate__inner { max-width: 460px; text-align: center; }
.agegate .logo { display: inline-flex; margin-bottom: var(--gap-l); }
.agegate .logo img { height: 76px; }
.agegate h2 { color: var(--bone); margin-bottom: var(--gap-s); }
.agegate p { color: rgba(254, 250, 224, 0.82); margin-inline: auto; font-size: 0.95rem; }
.agegate .button-row { justify-content: center; margin-top: var(--gap-m); }
/* The primary button's Black Forest fill disappears against the gate's own
   Black Forest field — invert it here: Cornsilk fill, Ink label (12:1). */
.agegate .button { background: var(--cornsilk); border-color: var(--cornsilk); color: var(--olive-ink); }
.agegate .button:hover, .agegate .button:focus-visible { background: var(--copperwood); border-color: var(--copperwood); color: var(--cornsilk); }
.agegate .button--ghost { background: transparent; color: var(--bone); border-color: rgba(221, 161, 94, 0.55); }
.agegate .button--ghost:hover { background: var(--bone); color: var(--noir); border-color: var(--bone); }
.agegate .mono { color: rgba(221, 161, 94, 0.75); margin-top: var(--gap-m); display: block; font-size: 0.66rem; }

/* Locks scroll while the gate is up */
body.is-gated { overflow: hidden; }

/* --------------------------------------------------------------------------
   19. Accessibility
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--olive-ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 300;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--solar-gold); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}