/* ==========================================================================
   ACFN — main stylesheet
   An editorial magazine layout. Photography carries the page; ACFN's
   own machines appear only where a machine is the actual subject.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
/* Scene: a fifty-five year old at a kitchen table at night, deciding
   whether to put six figures into a machine route. That forces legibility
   and instrument-grade precision, not lifestyle warmth.
   Strategy: committed. One deep green carries whole surfaces; the
   neutrals sit at chroma 0 so nothing drifts toward cream. */
:root{
  /* Neutrals — beige, not white. Green and beige are the ACFN house colours,
     so the page ground carries the beige rather than leaving it to accents.
     Chroma is held low and the value high so it reads as a warm paper stock
     and not as stationery cream. */
  /* Brand palette: the ground is #FDF6DC ("yellow beige").
     The alternating band is a lighter step of the same hue, and the
     hairlines and the deeper tint are re-toned to it so nothing reads grey
     against the warmer ground. */
  --white:     #FEFAEA;
  --surface:   #FDF6DC;
  --surface-2: #F3E8C4;
  --line:      #E2D3A8;
  --line-soft: #EEE3C0;

  /* Buyers here are older. Body copy sits darker than the usual grey so it
     holds up at arm's length on a phone in daylight. */
  --ink:       #0E1112;
  --ink-2:     #262C2E;
  --muted:     #4B5254;

  /* Committed green. Used as large surface, not as a 10% accent. */
  --green:     #0A4634;
  --green-2:   #073527;
  --green-l:   #0E6A4E;
  --green-t:   rgba(10,70,52,.07);
  --on-green:  #EFF3F1;

  --sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(.22, 1, .36, 1);

  --shell:  1280px;
  --gut:    clamp(20px, 5vw, 56px);
  --disc-h: 74px;          /* measured at runtime by main.js */
  --nav-h:  88px;

  /* Sharp. A 20px radius reads consumer app; financial instruments are
     squarer than that. One scale, used everywhere. */
  --r:    6px;
  --r-lg: 8px;
}
@media (max-width: 900px){ :root{ --nav-h: 70px; } }

/* ---------- 1b. Legacy token bridge ----------
   check-availability.html and the four policy pages carry inline styles
   written against the original navy-and-gold palette. Remapping the old
   names is what lets those pages inherit this design without a rewrite. */
:root{
  --bone:      var(--surface);
  --bone-2:    var(--surface-2);
  --paper:     var(--white);
  --card:      #FFFCF2;   /* cards lift off the beige ground */
  --rule:      var(--line);
  --rule-soft: var(--line-soft);
  --emerald:   var(--green);
  --emerald-d: var(--green-2);
  --emerald-l: var(--green-l);
  --emerald-t: var(--green-t);
  --display:   var(--sans);

  --cream:    var(--surface);
  --edge:     var(--line);
  --edge-2:   var(--line-soft);
  --gold:     var(--green);
  --gold-dk:  var(--green-2);
  --gold-lt:  var(--green-l);
  --txt-soft: var(--ink-2);
  --txt-mute: var(--muted);
  --ease:     var(--ease-out);
  --r-sm:     var(--r);
  --r-xl:     var(--r-lg);
  --ease-io:  cubic-bezier(.77, 0, .175, 1);
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:19px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:var(--disc-h);
  overflow-x:hidden;
}
@media (min-width: 900px){ body{ font-size:20px; } }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,blockquote,figcaption{ margin:0; }

::selection{ background:var(--emerald); color:var(--bone); }
:focus-visible{ outline:2px solid var(--emerald); outline-offset:3px; border-radius:2px; }

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

/* ---------- 3. Typography ---------- */
.h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.35rem, 4.7vw, 4rem);
  line-height:1.04;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem, 3.4vw, 3rem);
  line-height:1.06;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.lede{
  font-size:clamp(1.14rem,1.6vw,1.34rem);
  line-height:1.54;
  color:var(--ink-2);
  max-width:52ch;
}
.prose p{
  color:var(--ink-2);
  font-size:1.19rem;
  line-height:1.66;
  max-width:60ch;
}
.prose p + p{ margin-top:1.1em; }

.label{
  font-size:.79rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--emerald);
  display:flex;
  align-items:center;
  gap:.7em;
  margin-bottom:1.3rem;
}
.label::before{
  content:''; width:24px; height:1px;
  background:currentColor; opacity:.5; flex:none;
}
.label--gold{ color:rgba(244,241,234,.85); }

/* ---------- 4. Layout ---------- */
.shell{
  width:100%; max-width:var(--shell);
  margin-inline:auto; padding-inline:var(--gut);
}

.scroll-progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:200;
  pointer-events:none;
}
.scroll-progress i{
  display:block; height:100%; width:0;
  background:var(--emerald);
}

/* ---------- 5. Buttons ---------- */
.btn{
  --btn-bg:var(--ink);
  --btn-fg:var(--bone);
  --btn-ring:transparent;
  display:inline-flex; align-items:center; gap:.6em;
  padding:.92em 1.5em;
  background:var(--btn-bg);
  color:var(--btn-fg);
  box-shadow:inset 0 0 0 1px var(--btn-ring);
  border-radius:999px;
  font-size:.95rem; font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  transition:transform 160ms var(--ease-out),
             background-color 200ms ease,
             color 200ms ease,
             box-shadow 200ms ease;
}
.btn:active{ transform:scale(.97); }
.btn__arrow{ display:inline-block; transition:transform 200ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .btn:hover .btn__arrow{ transform:translateX(3px); }
  .btn:hover{ --btn-bg:var(--emerald); --btn-fg:var(--bone); }
}

.btn--light{ --btn-bg:var(--ink); --btn-fg:var(--bone); }

/* Primary action on a dark ground: bone fill, ink label. */
.btn--gold{ --btn-bg:var(--bone); --btn-fg:var(--ink); }
@media (hover:hover) and (pointer:fine){
  .btn--gold:hover{ --btn-bg:#fff; --btn-fg:var(--emerald); }
}

/* Secondary action sitting on a photograph. The ring plus the scrim
   underneath is what keeps the label legible over any frame. */
.btn--onphoto{
  --btn-bg:rgba(22,24,26,.28);
  --btn-fg:#fff;
  --btn-ring:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
}
@media (hover:hover) and (pointer:fine){
  .btn--onphoto:hover{ --btn-bg:rgba(22,24,26,.5); --btn-fg:#fff; --btn-ring:#fff; }
}

.btn--sm{ padding:.66em 1.15em; font-size:.86rem; }
.btn--block{ width:100%; justify-content:center; }

/* ---------- 6. Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:150;
  transition:background-color 260ms ease, box-shadow 260ms ease, transform 320ms var(--ease-out);
}
.nav__wrap{ max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }
.nav__inner{ height:var(--nav-h); display:flex; align-items:center; gap:clamp(16px,3vw,44px); }

.nav__logo{ flex:none; display:block; }
.nav__logo{ position:relative; }
.nav__logo img{ height:clamp(54px,5.4vw,74px); width:auto; transition:opacity 260ms ease; }
/* Over the green hero the light version of the mark shows instead, so the
   laurel stays gold and the lettering reads; it is not a filtered copy. */
.nav__logo .nav__logo-alt{ position:absolute; left:0; top:0; opacity:0; pointer-events:none; }

/* Over the hero photograph the mark and links invert to white. */
.nav--over .nav__logo img{ opacity:0; }
.nav--over .nav__logo .nav__logo-alt{ opacity:1; }
.nav--over .nav__links a{ color:rgba(255,255,255,.82); }
.nav--over .nav__links a.is-in,
.nav--over .nav__links a:hover{ color:#fff; }
.nav--over .nav__cta{ --btn-bg:rgba(255,255,255,.14); --btn-fg:#fff; --btn-ring:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.nav--over .burger span{ background:#fff; }

.nav.is-pinned{
  background:rgba(244,241,234,.9);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
          backdrop-filter:saturate(150%) blur(14px);
  box-shadow:0 1px 0 var(--rule);
}
.nav.is-hidden{ transform:translateY(-100%); }

.nav__links{
  display:none; margin-left:auto; gap:clamp(16px,2.2vw,32px);
  font-size:.94rem; font-weight:500;
}
@media (min-width: 1000px){ .nav__links{ display:flex; } }
.nav__links a{
  position:relative; color:var(--ink-2); padding-block:4px;
  transition:color 180ms ease;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform 220ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .nav__links a:hover{ color:var(--ink); }
  .nav__links a:hover::after{ transform:scaleX(1); }
}
.nav__links a.is-in::after{ transform:scaleX(1); }

.nav__cta{ margin-left:auto; }
@media (min-width: 1000px){ .nav__cta{ margin-left:0; } }
@media (max-width: 560px){ .nav__cta{ display:none; } }

.burger{
  display:grid; place-content:center; gap:6px;
  width:44px; height:44px; margin-right:-10px;
  cursor:pointer; flex:none;
}
@media (min-width: 1000px){ .burger{ display:none; } }
.burger span{
  display:block; width:22px; height:1.5px; background:var(--ink);
  transition:transform 240ms var(--ease-out), background-color 260ms ease;
}
.burger[aria-expanded="true"] span{ background:var(--ink); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:140;
  background:var(--bone);
  padding:clamp(24px,6vw,48px) var(--gut) calc(var(--disc-h) + 24px);
  display:flex; flex-direction:column; gap:2rem;
  opacity:0; transform:translateY(-8px);
  transition:opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu.is-open{ opacity:1; transform:translateY(0); }
.mobile-menu__links{ display:flex; flex-direction:column; }
.mobile-menu__links a{
  font-family:var(--display);
  font-size:clamp(1.7rem,7vw,2.4rem);
  padding-block:.5em;
  border-bottom:1px solid var(--rule-soft);
}
.mobile-menu__cta{ margin-top:auto; }

/* ---------- 7. Hero — full-bleed plate ---------- */
.hero{
  position:relative;
  min-height:min(760px, calc(100svh - var(--disc-h)));
  display:flex; align-items:flex-end;
  padding-top:calc(var(--nav-h) + 40px);
  padding-bottom:clamp(44px,7vh,84px);
  overflow:hidden;
  isolation:isolate;
}
.hero__img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
}
/* Two stops, weighted to the bottom-left where the type sits, so the
   photograph stays a photograph instead of turning into a grey wash. */
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(10,12,13,.90) 0%, rgba(10,12,13,.66) 34%, rgba(10,12,13,.28) 64%, rgba(10,12,13,.44) 100%),
    linear-gradient(to right, rgba(10,12,13,.72) 0%, rgba(10,12,13,.34) 42%, rgba(10,12,13,0) 78%);
}
.hero__inner{ position:relative; width:100%; color:#fff; }

.hero__badge{
  display:inline-flex; align-items:center;
  font-size:.78rem; font-weight:600; letter-spacing:.04em;
  color:rgba(255,255,255,.92);
  padding:.5em 1.05em;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  margin-bottom:clamp(18px,2.6vw,26px);
}
.hero__title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.7rem, 7vw, 5.6rem);
  line-height:1.04;
  letter-spacing:-.026em;
  max-width:17ch;
  text-shadow:0 2px 30px rgba(0,0,0,.28);
}
/* Italic emphasis in the same family, and enough leading for the
   descender on "g" to clear. */
.hero__title em{
  display:block;
  font-style:italic;
  font-weight:300;
  line-height:1.12;
  padding-bottom:.06em;
  color:#fff;
}
.hero__sub{
  margin-top:clamp(16px,2.2vw,24px);
  max-width:50ch;
  font-size:clamp(1.25rem,1.6vw,1.45rem);
  color:rgba(255,255,255,.86);
}
.hero__actions{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:clamp(22px,3vw,32px);
}

/* ---------- 8. Stats ---------- */
.statsblock{ border-bottom:1px solid var(--rule); }
.stats{ display:grid; grid-template-columns:repeat(2,1fr); }
@media (min-width: 860px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stats__cell{
  padding:clamp(26px,3.4vw,44px) clamp(14px,2vw,28px);
  border-right:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
  display:flex; flex-direction:column; gap:.3rem;
}
.stats__cell:nth-child(2n){ border-right:0; }
@media (min-width: 860px){
  .stats__cell{ border-bottom:0; }
  .stats__cell:nth-child(2n){ border-right:1px solid var(--rule-soft); }
  .stats__cell:last-child{ border-right:0; }
}
.stat__num{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,3.4vw,2.9rem);
  line-height:1; letter-spacing:-.02em;
}
.stat__lbl{
  font-size:.78rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted);
}

/* ---------- 9. Ticker (the page's one marquee) ---------- */
.ticker{
  overflow:hidden;
  border-bottom:1px solid var(--rule);
  padding-block:1.1rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.ticker__track{ display:flex; align-items:center; width:max-content; will-change:transform; }
.ticker__item{
  display:flex; align-items:center;
  padding-inline:clamp(20px,3vw,42px);
  font-size:.76rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.ticker__item::after{
  content:''; width:4px; height:4px; border-radius:50%;
  background:var(--rule); margin-left:clamp(20px,3vw,42px);
}

/* ---------- 10. About spread ---------- */
/* ---------- 11b. Lead statement — the ranking claim, set large ----------
   One sentence between the ticker and the About spread. It is the only
   place on the page where body copy is set at display scale, which is
   what marks it as the opening statement rather than another paragraph. */
.lead{ padding-block:clamp(52px,7.5vw,108px); border-block:1px solid var(--rule); }
.lead .label{ margin-bottom:clamp(18px,2.4vw,26px); }
.lead__copy{
  font-family:var(--display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.35rem, 2.5vw, 2.05rem);
  line-height:1.32;
  letter-spacing:-.014em;
  color:var(--ink-2);
  max-width:44ch;
  text-wrap:pretty;
}
@media (min-width: 900px){ .lead__copy{ max-width:40ch; } }

.spread{ padding-block:clamp(64px,9vw,140px); }
.spread__grid{ display:grid; grid-template-columns:1fr; gap:clamp(32px,5vw,72px); }
@media (min-width: 1000px){
  .spread__grid{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    column-gap:clamp(44px,6vw,100px);
    align-items:start;
  }
}
.spread__media{ display:flex; flex-direction:column; gap:clamp(16px,2vw,24px); }
.spread__photo img{
  width:100%; height:auto;
  aspect-ratio:3/4; object-fit:cover;
  border-radius:var(--r);
}
.spread__plate{
  display:flex; align-items:flex-end; gap:clamp(16px,2.4vw,28px);
  padding:clamp(18px,2.4vw,26px);
  background:linear-gradient(180deg,var(--bone) 0%, var(--bone-2) 100%);
  border:1px solid var(--rule-soft);
  border-radius:var(--r);
}
.spread__plate img{ height:clamp(120px,14vw,168px); width:auto; flex:none; }
.spread__plate figcaption{
  font-size:.8rem; line-height:1.45; color:var(--muted);
  padding-bottom:.4rem;
}
@media (min-width: 1000px){
  .spread__body{ position:sticky; top:calc(var(--nav-h) + 36px); }
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:2rem; }
.chip-tag{
  display:flex; flex-direction:column; gap:3px;
  padding:.72em 1.05em;
  border:1px solid var(--rule);
  border-radius:10px;
  background:var(--card);
}
.chip-tag__v{ font-size:1.24rem; font-weight:700; color:var(--emerald); }
.chip-tag__l{
  font-size:.76rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}

/* ---------- 11. Hotel band — text left, photo right ---------- */
.hotelband{
  padding-block:clamp(56px,8vw,120px);
  background:var(--bone-2);
  border-block:1px solid var(--rule);
}
.hotelband__grid{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,64px); align-items:center; }
@media (min-width: 900px){
  .hotelband__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); column-gap:clamp(40px,6vw,90px); }
}
.hotelband__body .lede{ margin-top:1rem; }
.figures{
  display:flex; flex-wrap:wrap; gap:clamp(28px,5vw,60px);
  margin-top:2rem; padding-top:1.5rem;
  border-top:1px solid var(--rule);
}
.figures > div{ display:flex; flex-direction:column; gap:2px; }
.figures__n{
  font-family:var(--display);
  font-size:clamp(1.7rem,2.8vw,2.4rem);
  line-height:1; letter-spacing:-.02em;
}
.figures__l{
  font-size:.72rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
}
.hotelband__media img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r);
}
.hotelband__media figcaption{
  margin-top:.85rem;
  font-size:.8rem; color:var(--muted);
}

/* ---------- 12. Fleet plate — full-bleed, static ---------- */
.plate{
  position:relative;
  padding-block:clamp(52px,7vw,96px);
  /* A darker, warmer grey than the page ground. The machines are mostly
     dark hardware; on beige they shouted, on this they sit down. */
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(255,253,248,.30), rgba(255,253,248,0) 62%),
    linear-gradient(180deg, #C3BEB3 0%, #ADA89D 58%, #B7B2A7 100%);
  border-block:1px solid var(--rule);
  overflow:hidden;
}
/* The quiet element the machines stand in front of: a single wide arc, a
   hairline register grid, and nothing else. It should read as a surface,
   never as a graphic. */
.plate::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg,
      rgba(14,17,18,.055) 0 1px, rgba(14,17,18,0) 1px 96px);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 22%, #000 76%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 22%, #000 76%, transparent);
}
.plate::after{
  content:''; position:absolute; pointer-events:none;
  left:50%; bottom:-42%;
  width:min(1180px, 118%); aspect-ratio:1;
  transform:translateX(-50%);
  border:1px solid rgba(10,70,52,.13);
  border-radius:50%;
}
.plate__grid{ position:relative; z-index:1; }
.plate__grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:clamp(10px,1.6vw,26px);
  align-items:end;
  max-width:calc(var(--shell) + 120px);
  margin-inline:auto;
  padding-inline:var(--gut);
}
@media (max-width: 900px){ .plate__grid{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width: 520px){ .plate__grid{ grid-template-columns:repeat(3, 1fr); } }
.plate__cell{
  display:flex; align-items:flex-end; justify-content:center;
  position:relative;
}
.plate__cell img{
  height:clamp(88px, 11vw, 152px);
  width:auto;
  filter:drop-shadow(0 14px 22px rgba(22,24,26,.28));
}
/* The machines stand on a shared floor line rather than floating. */
.plate__cell::after{
  content:''; position:absolute; z-index:-1;
  left:50%; bottom:-3px; width:82%; height:12px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(22,24,26,.34), rgba(22,24,26,0) 70%);
  filter:blur(3px);
}
/* Rows past the first are progressively hidden on narrow screens so the
   plate stays a band and not a wall. */
@media (max-width: 900px){ .plate__cell:nth-child(n+9){ display:none; } }
@media (max-width: 520px){ .plate__cell:nth-child(n+7){ display:none; } }

/* ---------- 13. Why — bento ---------- */
.why{ padding-block:clamp(64px,9vw,140px); }
.why__head{ max-width:60ch; margin-bottom:clamp(32px,4.5vw,60px); }
.why__head .lede{ margin-top:1.1rem; }

.bento{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px,1.8vw,22px);
}
@media (min-width: 720px){ .bento{ grid-template-columns:repeat(2,1fr); } }
@media (min-width: 1060px){
  .bento{ grid-template-columns:repeat(6,1fr); }
  .bento__cell{ grid-column:span 2; }
  .bento__cell--wide{ grid-column:span 3; }
}
.bento__cell{
  display:flex; flex-direction:column;
  background:var(--card);
  border:1px solid var(--rule-soft);
  border-radius:var(--r);
  overflow:hidden;
  transition:border-color 240ms ease, transform 320ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .bento__cell:hover{ border-color:var(--rule); transform:translateY(-3px); }
}
.bento__media{ position:relative; overflow:hidden; }
.bento__media img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform 700ms var(--ease-out);
}
.bento__cell--wide .bento__media img{ aspect-ratio:2/1; }
@media (hover:hover) and (pointer:fine){
  .bento__cell:hover .bento__media img{ transform:scale(1.03); }
}
/* The scalable cell shows machines, not a photograph, so it gets the
   bone ground the specimens are shot against. */
.bento__media--fleet{
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(10px,1.6vw,20px);
  aspect-ratio:16/10;
  padding:clamp(18px,2.4vw,28px) 0 0;
  background:linear-gradient(180deg,var(--bone) 0%, var(--bone-2) 100%);
}
.bento__media--fleet img{
  width:auto; height:76%; aspect-ratio:auto;
  filter:drop-shadow(0 10px 14px rgba(22,24,26,.16));
}
.bento__body{ padding:clamp(20px,2.4vw,28px); }
.bento__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.42rem,2vw,1.8rem);
  line-height:1.14; letter-spacing:-.016em;
  margin-bottom:.5rem;
}
.bento__copy{ font-size:1.21rem; line-height:1.58; color:var(--ink-2); }
.bento__cell--accent{ border-color:rgba(14,92,74,.3); }

/* ---------- 14. Advantages ---------- */
.compareband{
  padding-block:clamp(64px,9vw,130px);
  background:var(--bone-2);
  border-block:1px solid var(--rule);
}
.compareband__head{ max-width:56ch; margin-bottom:clamp(30px,4vw,52px); }
.compare{
  background:var(--card);
  border:1px solid var(--rule-soft);
  border-radius:var(--r-lg);
  padding:clamp(26px,4vw,54px);
}
.compare__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,2.5vw,2.25rem);
  line-height:1.15; letter-spacing:-.018em;
  margin-bottom:clamp(24px,3vw,38px);
}
.compare__cols{ display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,0px); }
@media (min-width: 760px){
  .compare__cols{ grid-template-columns:1fr 1fr; gap:0; }
  .col--against{ padding-right:clamp(22px,3.5vw,48px); }
  .col--for{ padding-left:clamp(22px,3.5vw,48px); border-left:1px solid var(--rule-soft); }
}
.col__head{
  font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  padding-bottom:.9rem; margin-bottom:.4rem;
  border-bottom:1px solid var(--rule-soft);
}
.col--for .col__head{ color:var(--emerald); }
.col__list li{
  position:relative;
  padding:.8em 0 .8em 1.9em;
  font-size:1.25rem; color:var(--ink-2);
}
.col__list li + li{ border-top:1px solid var(--rule-soft); }
.col__list li::before{
  position:absolute; left:0; top:.8em;
  width:1.1em; text-align:center; font-weight:700; line-height:1.6;
}
.col--against .col__list li::before{ content:'\2013'; color:var(--muted); }
.col--for .col__list li::before{ content:'\2713'; color:var(--emerald); font-size:.9em; }
.col--for .col__list li{ color:var(--ink); font-weight:500; }
.compare__foot{
  margin-top:clamp(24px,3vw,38px); padding-top:1.4rem;
  border-top:1px solid var(--rule-soft);
  font-size:.94rem; color:var(--muted);
}

/* ---------- 15. How — numbered rows on one rule ---------- */
.how{ padding-block:clamp(64px,9vw,140px); }
.how__head{ max-width:52ch; margin-bottom:clamp(30px,4vw,56px); }
.steps{ border-top:1px solid var(--rule); }
.step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(14px,2.4vw,32px);
  align-items:start;
  padding-block:clamp(26px,3.4vw,44px);
  border-bottom:1px solid var(--rule);
}
@media (min-width: 860px){
  .step{ grid-template-columns:auto minmax(0,1fr) minmax(220px,.62fr); align-items:center; }
}
.step__n{
  font-family:var(--display);
  font-size:clamp(1.8rem,2.9vw,2.5rem);
  line-height:1; color:var(--emerald);
  min-width:1.4ch;
}
.step__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2.05rem);
  line-height:1.14; letter-spacing:-.016em;
  margin-bottom:.45rem;
}
.step__copy{ color:var(--ink-2); font-size:1.21rem; line-height:1.6; max-width:56ch; }
.step__media{ grid-column:1 / -1; }
@media (min-width: 860px){ .step__media{ grid-column:auto; } }
.step__media img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  border-radius:var(--r);
}
.step__media--atm{
  display:flex; align-items:flex-end; justify-content:center;
  aspect-ratio:16/10;
  padding-top:clamp(14px,2vw,20px);
  background:linear-gradient(180deg,var(--bone) 0%, var(--bone-2) 100%);
  border:1px solid var(--rule-soft);
  border-radius:var(--r);
}
.step__media--atm img{
  width:auto; height:84%; aspect-ratio:auto; border-radius:0;
  filter:drop-shadow(0 10px 16px rgba(22,24,26,.16));
}

/* ---------- 16. Testimonials ---------- */
.voices{
  padding-block:clamp(64px,9vw,130px);
  background:var(--bone-2);
  border-block:1px solid var(--rule);
}
.voices__head{ max-width:50ch; margin-bottom:clamp(30px,4vw,52px); }
.voices__grid{ display:grid; grid-template-columns:1fr; gap:clamp(14px,1.8vw,22px); }
@media (min-width: 880px){
  .voices__grid{ grid-template-columns:repeat(2,1fr); }
  .quote--lead{ grid-column:1 / -1; }
}
.quote{
  background:var(--card);
  border:1px solid var(--rule-soft);
  border-radius:var(--r);
  padding:clamp(24px,3.2vw,40px);
  display:flex; flex-direction:column; gap:1.5rem;
  transition:border-color 240ms ease;
}
@media (hover:hover) and (pointer:fine){ .quote:hover{ border-color:var(--rule); } }
.quote__text{
  font-family:var(--display);
  font-size:clamp(1.14rem,1.5vw,1.34rem);
  line-height:1.46; letter-spacing:-.008em;
  color:var(--ink); flex:1;
}
.quote--lead .quote__text{ font-size:clamp(1.35rem,2.3vw,1.95rem); line-height:1.32; }
.quote__by{
  display:flex; align-items:center; gap:.85rem;
  padding-top:1.2rem;
  border-top:1px solid var(--rule-soft);
}
.quote__avatar{
  display:grid; place-content:center;
  width:42px; height:42px; flex:none;
  border-radius:50%;
  background:var(--emerald-t); color:var(--emerald);
  font-size:.8rem; font-weight:700; letter-spacing:.03em;
}
.quote__who{ display:flex; flex-direction:column; }
.quote__name{ font-weight:700; font-size:.98rem; }
.quote__role{ font-size:.82rem; color:var(--muted); }

/* ---------- 17. Press ----------
   A stated block on the green, with the marks at full strength. */
.pressblock{ padding-block:clamp(56px,8vw,104px); border-block:1px solid var(--rule); }
.press{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(26px,3.4vw,44px);
  padding:clamp(34px,5vw,62px) clamp(20px,4vw,56px);
  background:var(--green);
  border-radius:var(--r-lg);
}
.press__label{
  font-size:clamp(1.5rem,2.6vw,2.15rem);
  font-family:var(--display); font-weight:500;
  letter-spacing:-.015em; text-transform:none;
  color:var(--on-green); text-align:center; text-wrap:balance;
}
.press__logos{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(22px,3.6vw,52px);
  width:100%;
}
.press__logo{
  display:grid; place-content:center;
  padding:clamp(12px,1.6vw,20px) clamp(16px,2.4vw,30px);
  background:var(--card);
  border-radius:var(--r);
}
.press__logo img{
  height:clamp(24px,2.9vw,34px); width:auto;
}

/* ---------- 18. FAQ ---------- */
.faqband{ padding-block:clamp(64px,9vw,130px); }
.faq__grid{ display:grid; grid-template-columns:1fr; gap:clamp(30px,4vw,60px); }
@media (min-width: 1000px){
  .faq__grid{ grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); column-gap:clamp(44px,6vw,100px); }
  .faq__head{ position:sticky; top:calc(var(--nav-h) + 36px); align-self:start; }
}
.faq__list{ border-top:1px solid var(--rule); }
.qa{ border-bottom:1px solid var(--rule); }
.qa__q{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding:1.3em 0;
  font-size:clamp(1.12rem,1.45vw,1.28rem);
  font-weight:400; letter-spacing:-.008em;
  cursor:pointer; list-style:none;
  transition:color 180ms ease;
}
.qa__q::-webkit-details-marker{ display:none; }
@media (hover:hover) and (pointer:fine){ .qa__q:hover{ color:var(--emerald); } }
.qa__mark{
  flex:none; display:grid; place-content:center;
  width:26px; height:26px; margin-top:2px;
  border:1px solid var(--rule); border-radius:50%;
  font-size:1rem; line-height:1; color:var(--emerald);
  transition:transform 260ms var(--ease-out), background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}
.qa[open] .qa__mark{
  transform:rotate(45deg);
  background:var(--emerald); color:var(--bone); border-color:var(--emerald);
}
.qa__wrap{ overflow:hidden; }
.qa__a{
  padding-bottom:1.5em; max-width:64ch;
  font-size:1.21rem; line-height:1.62; color:var(--ink-2);
}

/* ---------- 19. CTA — photograph beside panel ---------- */
.cta{ padding-block:clamp(56px,8vw,120px); }
.cta__split{
  display:grid; grid-template-columns:1fr;
  border-radius:var(--r-lg);
  overflow:hidden;
}
@media (min-width: 900px){
  .cta__split{ grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); }
}
.cta__media{ position:relative; min-height:240px; }
.cta__media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
}
@media (max-width: 899px){
  .cta__media{ position:relative; min-height:0; }
  .cta__media img{ position:static; height:auto; aspect-ratio:16/10; }
}
.cta__panel{
  background:var(--emerald);
  color:var(--bone);
  padding:clamp(34px,5vw,72px) clamp(24px,4vw,60px);
  display:flex; flex-direction:column; justify-content:center;
}
.cta__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem,3.6vw,3rem);
  line-height:1.06; letter-spacing:-.022em;
  margin-bottom:.9rem; text-wrap:balance;
}
.cta__copy{
  font-size:clamp(1.15rem,1.45vw,1.3rem);
  color:rgba(244,241,234,.8);
  margin-bottom:clamp(22px,3vw,32px);
}
.cta__buttons{ display:flex; flex-wrap:wrap; gap:12px; }
.cta__phone{ margin-top:1.6rem; font-size:.92rem; color:rgba(244,241,234,.68); }
.cta__phone a{
  color:var(--bone);
  border-bottom:1px solid rgba(244,241,234,.4);
  transition:border-color 200ms ease;
}
@media (hover:hover) and (pointer:fine){ .cta__phone a:hover{ border-color:var(--bone); } }

/* ---------- 20. Footer ---------- */
.footer{
  border-top:1px solid var(--rule);
  padding-block:clamp(44px,6vw,76px) clamp(26px,3vw,38px);
}
.footer__grid{
  display:grid; grid-template-columns:1fr; gap:clamp(26px,4vw,46px);
  padding-bottom:clamp(30px,4vw,50px);
}
@media (min-width: 700px){ .footer__grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width: 1000px){ .footer__grid{ grid-template-columns:1.6fr repeat(3,1fr); column-gap:clamp(32px,5vw,72px); } }
.footer__brand img{ height:clamp(48px,4.4vw,60px); width:auto; margin-bottom:1.1rem; }
.footer__brand p{ font-size:1.05rem; line-height:1.6; color:var(--muted); max-width:38ch; }
.footer__col h4{
  font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:1rem;
}
.footer__col li{ margin-bottom:.6rem; }
.footer__col a{ font-size:.94rem; color:var(--muted); transition:color 180ms ease; }
@media (hover:hover) and (pointer:fine){ .footer__col a:hover{ color:var(--emerald); } }

.footer__legal{
  display:flex; flex-wrap:wrap; gap:.6rem clamp(16px,2.4vw,32px);
  padding-block:1.4rem;
  border-top:1px solid var(--rule-soft);
  font-size:.82rem;
}
.footer__legal a{ color:var(--muted); transition:color 180ms ease; }
@media (hover:hover) and (pointer:fine){ .footer__legal a:hover{ color:var(--emerald); } }

.footer__bottom{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  padding-top:1.4rem; border-top:1px solid var(--rule-soft);
  font-size:.8rem; color:var(--muted);
}

/* ---------- 21. Compliance disclosure ---------- */
.disclosure{
  position:fixed; inset:auto 0 0 0; z-index:160;
  /* NOT var(--disc-h): main.js measures this element and writes that
     variable, so reading it back would make the observer feed its own
     input and thrash. */
  min-height:56px;
  display:flex; align-items:center;
  padding:.85rem var(--gut);
  background:var(--ink);
  color:rgba(244,241,234,.7);
}
.disclosure__inner{
  display:flex; align-items:flex-start; gap:.75rem;
  width:100%; max-width:var(--shell); margin-inline:auto;
}
.disclosure__text{
  flex:1 1 auto;
  font-size:.72rem; line-height:1.45;
}
.disclosure b{ color:var(--bone); font-weight:700; }
.disclosure__more{
  display:none; flex:none;
  font-size:.68rem; font-weight:700; letter-spacing:.02em;
  color:var(--bone); text-decoration:underline; cursor:pointer;
}
.disclosure__close{
  flex:none; display:grid; place-content:center;
  width:26px; height:26px; margin:-3px -6px 0 0;
  font-size:1.25rem; line-height:1;
  color:rgba(244,241,234,.75);
  border-radius:50%; cursor:pointer;
  transition:color 160ms ease, background-color 160ms ease;
}
@media (hover:hover) and (pointer:fine){
  .disclosure__close:hover{ color:var(--bone); background:rgba(244,241,234,.12); }
}
.disclosure[hidden]{ display:none; }

/* On a phone this bar was eating the fold, so it collapses to two lines
   with the full notice one tap away, and can be dismissed outright. */
@media (max-width: 760px){
  .disclosure{ min-height:0; padding:.55rem var(--gut); }
  .disclosure__text{ font-size:.65rem; line-height:1.38; }
  .disclosure:not(.is-open) .disclosure__text{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .disclosure__more{ display:block; align-self:center; }
}

/* ---------- 22. Reveal ---------- */
.anim [data-reveal]{
  opacity:0;
  transform:translateY(18px);
}
.anim [data-reveal].is-in{
  opacity:1;
  transform:none;
  transition:opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.no-fx [data-reveal]{ opacity:1 !important; transform:none !important; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* Never hide a visual layer here. Keep the fade, drop the movement. */
  .anim [data-reveal]{ opacity:1; transform:none; }
  .ticker__track{ transform:none !important; }
}

/* ---------- 23. Legal pages ---------- */
.legal-page{ background:var(--bone); }
.legal-nav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:var(--shell); margin-inline:auto;
  padding:clamp(16px,2.4vw,26px) var(--gut);
  border-bottom:1px solid var(--rule);
}
.legal-nav img{ height:clamp(46px,4.4vw,56px); width:auto; }
.legal__wrap{ padding-block:clamp(40px,6vw,80px) clamp(56px,7vw,104px); }
.legal__head{
  padding-bottom:clamp(28px,3.5vw,44px);
  border-bottom:1px solid var(--rule);
  margin-bottom:clamp(28px,3.5vw,44px);
}
.legal__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.2rem,5vw,3.6rem);
  line-height:1.05; letter-spacing:-.024em;
  margin-bottom:.6rem;
}
.legal__meta{ font-size:.92rem; color:var(--muted); }
.legal__note{
  display:flex; align-items:flex-start; gap:.9rem;
  padding:clamp(16px,2.2vw,22px) clamp(18px,2.4vw,26px);
  margin-bottom:clamp(32px,4vw,52px);
  background:var(--emerald-t);
  border:1px solid rgba(14,92,74,.2);
  border-radius:var(--r);
  font-size:1.08rem; line-height:1.6; color:var(--ink-2);
}
.legal__note .ico{ flex:none; width:20px; height:20px; fill:currentColor; color:var(--emerald); margin-top:2px; }
.legal__note b{ color:var(--ink); }
.legal__grid{ display:grid; grid-template-columns:1fr; gap:clamp(32px,4vw,56px); }
@media (min-width: 940px){
  .legal__grid{ grid-template-columns:minmax(0,.42fr) minmax(0,1.58fr); column-gap:clamp(40px,6vw,88px); }
  .legal__toc{ position:sticky; top:32px; align-self:start; }
}
.legal__toc h2{
  font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  padding-bottom:.9rem; margin-bottom:.4rem;
  border-bottom:1px solid var(--rule-soft);
}
.legal__toc li{ border-bottom:1px solid var(--rule-soft); }
.legal__toc a{
  display:block; padding:.7em 0; font-size:.94rem; color:var(--ink-2);
  transition:color 180ms ease, padding-left 200ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .legal__toc a:hover{ color:var(--emerald); padding-left:.4em; }
}
.legal__body{ max-width:74ch; }
.legal__body h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.4rem,2.3vw,1.9rem);
  line-height:1.16; letter-spacing:-.018em;
  margin:clamp(36px,4.4vw,56px) 0 .8rem;
  padding-top:clamp(28px,3.4vw,40px);
  border-top:1px solid var(--rule-soft);
}
.legal__body > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.legal__body h3{ font-size:1.06rem; font-weight:700; margin:1.8rem 0 .5rem; }
.legal__body p{ margin-bottom:1rem; color:var(--ink-2); line-height:1.66; }
.legal__body ul,.legal__body ol{ margin:0 0 1.2rem; }
.legal__body li{
  position:relative; padding-left:1.4em; margin-bottom:.55rem;
  color:var(--ink-2); line-height:1.62;
}
.legal__body li::before{
  content:''; position:absolute; left:.2em; top:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--rule);
}
.legal__body a{
  color:var(--emerald); border-bottom:1px solid rgba(14,92,74,.32);
  transition:border-color 180ms ease;
}
@media (hover:hover) and (pointer:fine){ .legal__body a:hover{ border-color:var(--emerald); } }
.legal__contact{
  margin-top:clamp(40px,5vw,64px); padding:clamp(22px,3vw,32px);
  background:var(--card); border:1px solid var(--rule-soft); border-radius:var(--r);
}
.legal__contact h3{ margin-top:0; }
.legal__contact p{ margin-bottom:0; }
.legal-strip{
  display:flex; flex-wrap:wrap; gap:.6rem clamp(16px,2.4vw,32px);
  padding-block:1.4rem; border-top:1px solid var(--rule-soft);
  font-size:.82rem;
}
.legal-strip a{ color:var(--muted); transition:color 180ms ease; }
@media (hover:hover) and (pointer:fine){ .legal-strip a:hover{ color:var(--emerald); } }
.legal-strip [aria-current="page"]{ color:var(--ink); font-weight:600; }

/* ---------- 24. Responsive tail ---------- */
@media (max-width: 560px){
  .hero__actions .btn,
  .cta__buttons .btn{ flex:1 1 100%; justify-content:center; }
  .footer__bottom{ flex-direction:column; }
  .spread__plate{ flex-direction:column; align-items:flex-start; gap:14px; }
  .spread__plate figcaption{ padding-bottom:0; }
}

/* ==========================================================================
   25. FINANCIAL INSTRUMENT LAYER
   Everything above this point was built around a serif and a warm ground.
   This block restates the visual language: one sans in several weights,
   figures set as data, hairlines instead of soft cards, and a green that
   owns whole surfaces rather than decorating them.
   ========================================================================== */

/* ---- Type: one family, weight does the work ---- */
.h2,.h3,.hero__title,.cta__title,.legal__title,
.bento__title,.step__title,.quote__text,.compare__title,
.checkcard__title,.fstep__title{
  font-family:var(--sans);
  font-weight:700;
  letter-spacing:-.032em;
}
.h2{ font-size:clamp(1.85rem, 3.4vw, 2.9rem); line-height:1.06; }
.h3{ font-size:clamp(1.5rem, 2.6vw, 2.2rem); line-height:1.08; }
.bento__title{ font-size:clamp(1.16rem,1.6vw,1.34rem); letter-spacing:-.024em; }
.step__title{ font-size:clamp(1.2rem,1.9vw,1.5rem); letter-spacing:-.026em; }
.compare__title{ font-size:clamp(1.3rem,2vw,1.7rem); }

/* Figures are the product of this business, so they are set as data:
   one weight heavier, tabular, and tracked tight enough to read as a
   column of numbers rather than as headings. */
.stat__num,.figures__n,.checkprog__pct{
  font-family:var(--sans);
  font-weight:900;
  letter-spacing:-.045em;
  font-feature-settings:'tnum' 1, 'ss01' 1;
}
.stat__num{ font-size:clamp(2.3rem,4.2vw,3.5rem); }
.figures__n{ font-size:clamp(1.9rem,3vw,2.6rem); }

/* Small structural labels take the mono, which is where the instrument
   feeling actually comes from. */
.stat__lbl,.figures__l,.col__head,.chip-tag__l,
.footer__col h4,.legal__toc h2,.zipform__label{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.label{
  font-family:var(--mono);
  /* The eyebrow was set at 10.9px, which is below the point where a mono
     face at this tracking stays comfortably readable. */
  font-size:.86rem;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--muted);
}
.label::before{ width:16px; opacity:.6; }
.label--gold{ color:rgba(239,243,241,.6); }

/* ---- Shape: square up ---- */
.btn{ border-radius:var(--r); }
.btn--sm{ border-radius:var(--r); }
.chip-tag,.bento__cell,.quote,.compare,.step__media img,.step__media--atm,
.spread__photo img,.spread__plate,.hotelband__media img,.legal__note,
.legal__contact,.cta__split,.bento__media img{ border-radius:var(--r); }
.qa__mark{ border-radius:var(--r); }
.quote__avatar{ border-radius:var(--r); }

/* ---- Hero: the committed surface ---- */
.hero{
  min-height:0;
  display:block;
  padding-top:calc(var(--nav-h) + clamp(40px,7vw,84px));
  padding-bottom:0;
  background:var(--green);
  color:var(--on-green);
  overflow:visible;
}
.hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(30px,4vw,48px);
  align-items:end;
}
@media (min-width: 940px){
  .hero__grid{
    grid-template-columns:minmax(0,1fr) minmax(300px,.92fr);
    column-gap:clamp(36px,4.6vw,72px);
  }
}
.hero__badge{
  display:inline-flex; align-items:center;
  font-family:var(--mono);
  font-size:.74rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(239,243,241,.72);
  padding:.5em .9em;
  border:1px solid rgba(239,243,241,.22);
  border-radius:var(--r);
  margin-bottom:clamp(20px,2.6vw,30px);
}
.hero__title{
  font-size:clamp(2.6rem, 6.1vw, 4.9rem);
  line-height:1.0;
  letter-spacing:-.038em;
  max-width:15ch;
  text-shadow:none;
  color:var(--white);
}
.hero__title span{
  display:block;
  color:rgba(239,243,241,.58);
  font-weight:700;
}
.hero__sub{
  margin-top:clamp(16px,2.2vw,24px);
  max-width:48ch;
  font-size:clamp(1.25rem,1.56vw,1.41rem);
  color:rgba(239,243,241,.84);
}
.hero__actions{ margin-top:clamp(22px,3vw,32px); }

/* The hero art stands on the fold between the green plate and the page,
   which is what makes it read as people and hardware sitting in the world
   rather than as a picture pasted on a colour. */
.hero__unit{
  position:relative;
  display:flex; justify-content:center; align-items:flex-end;
  margin-bottom:-1px;
  /* The art is cropped to a straight edge that sits on the fold, so the
     shadow must be clipped there too — otherwise it prints as a grey band
     across the section below. */
  overflow:hidden;
}
.hero__unit img{
  width:min(100%, 700px);
  height:auto;
  /* No drop-shadow. Any shadow on a cut-out group draws a second outline
     around it, which is precisely what reads as "pasted on". The art carries
     its own modelling; the plate is its ground. */
  /* The hero artwork has no baseline: the figures run straight off
     the bottom edge of the source file, which is what made it read as sliced
     by the section rule. Dissolving the last few per cent into the plate
     turns an accidental cut into a deliberate bleed. */
  --hero-fade:linear-gradient(180deg, #000 78%, rgba(0,0,0,.90) 88%,
                              rgba(0,0,0,.45) 95%, transparent 100%);
  -webkit-mask-image:var(--hero-fade);
          mask-image:var(--hero-fade);
}
@media (max-width: 939px){
  .hero__unit{ justify-content:center; }
  .hero__unit img{ width:min(100%, 540px); }
}

/* ---- Buttons on the green plate ---- */
.btn--gold{ --btn-bg:var(--white); --btn-fg:var(--ink); }
@media (hover:hover) and (pointer:fine){
  .btn--gold:hover{ --btn-bg:var(--white); --btn-fg:var(--green); }
}
.btn--onphoto{
  --btn-bg:transparent;
  --btn-fg:var(--on-green);
  --btn-ring:rgba(239,243,241,.4);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
@media (hover:hover) and (pointer:fine){
  .btn--onphoto:hover{ --btn-bg:rgba(239,243,241,.1); --btn-fg:var(--white); --btn-ring:rgba(239,243,241,.9); }
}

/* ---- Nav ---- */
.nav--over .nav__logo img{ opacity:0; }
.nav--over .nav__logo .nav__logo-alt{ opacity:1; }
.nav--over .nav__links a{ color:rgba(239,243,241,.72); }
.nav--over .nav__links a.is-in,.nav--over .nav__links a:hover{ color:var(--white); }
.nav--over .nav__cta{ --btn-bg:transparent; --btn-fg:var(--on-green); --btn-ring:rgba(239,243,241,.4); }
.nav.is-pinned{ background:rgba(254,250,234,.94); box-shadow:0 1px 0 var(--line); }

/* ---- Page surfaces ---- */
body{ background:var(--surface); }
.statsblock{ background:var(--white); border-bottom:1px solid var(--line); }
.ticker{ background:var(--white); }
.lead{ background:var(--white); }
.spread{ background:var(--surface); }
.hotelband{ background:var(--white); }
.why{ background:var(--surface); }
.compareband{ background:var(--white); }
.how{ background:var(--surface); }
.voices{ background:var(--white); }
.pressblock{ background:var(--surface); }
.faqband{ background:var(--surface); }
.cta{ background:var(--surface); }
.footer{ background:var(--white); }

/* ---- Stats as a ruled column of figures ---- */
.stats__cell{ gap:.55rem; }
.stat__lbl{ color:var(--muted); }

/* ---- Cards flatten to hairlines ---- */
.bento__cell,.quote,.compare,.chip-tag{
  background:var(--white);
  border-color:var(--line);
  box-shadow:none;
}
@media (hover:hover) and (pointer:fine){
  .bento__cell:hover{ transform:none; border-color:var(--ink); }
  .quote:hover{ border-color:var(--ink); }
}
.bento__media--fleet,.step__media--atm,.spread__plate{
  background:var(--surface-2);
  border:1px solid var(--line);
}
.bento__cell--accent{ border-color:var(--green); }
.quote__avatar{ background:var(--green); color:var(--white); }

/* ---- Comparison reads as a term sheet ---- */
.col--for .col__list li{ font-weight:700; }
.col--for .col__list li::before{ color:var(--green); }

/* ---- CTA ---- */
.cta__panel{ background:var(--green); color:var(--on-green); }
.cta__copy{ color:rgba(239,243,241,.76); }
.cta__phone{ color:rgba(239,243,241,.62); }
.cta__title{ font-size:clamp(2.05rem,3.6vw,3rem); color:var(--white); }

/* ---- Disclosure ---- */
.disclosure{ background:var(--ink); color:rgba(243,244,244,.72); }
.disclosure b{ color:var(--white); }

/* ---- Progress + selection ---- */
.scroll-progress i{ background:var(--green); }
::selection{ background:var(--green); color:var(--white); }

/* ==========================================================================
   Secondary sections
   ========================================================================== */

/* ---------- Brands — the marks ACFN already serves ----------
   Sits directly under the hero. The logos are
   third-party trademarks, so they get a clean light card each rather than
   being tinted into the palette. */
.brands{
  padding-block:clamp(44px,6vw,84px);
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.brands__head{ text-align:center; margin-bottom:clamp(26px,3.4vw,44px); }
.brands__title{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.35rem,2.4vw,2rem);
  line-height:1.14; letter-spacing:-.015em;
  text-transform:uppercase;
  color:var(--ink);
}
.brands__sub{
  margin-top:.45rem;
  font-size:clamp(1.17rem,1.45vw,1.33rem);
  color:var(--muted);
}
.brands__grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:clamp(8px,1.2vw,16px);
}
@media (max-width: 900px){ .brands__grid{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width: 520px){ .brands__grid{ grid-template-columns:repeat(3, 1fr); } }
.brands__cell{
  display:grid; place-items:center;
  padding:clamp(6px,1vw,12px);
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
}
.brands__cell img{
  width:100%; max-width:none; height:auto;
  mix-blend-mode:multiply;
}

/* ---------- Products — the automated financial kiosk ---------- */
.products{
  padding-block:clamp(60px,8vw,120px);
  background:var(--white);
  border-block:1px solid var(--line);
}
.products__head{ max-width:56ch; }
.products__head .lede{ margin-top:1.1rem; }
.products__body{ margin-top:clamp(34px,4.4vw,60px); }
.products__sub{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.35rem,2.1vw,1.9rem);
  letter-spacing:-.015em;
  padding-bottom:clamp(18px,2.2vw,26px);
  border-bottom:1px solid var(--line);
}
.products__list{
  display:grid; grid-template-columns:1fr;
  gap:0;
}
@media (min-width: 820px){
  .products__list{ grid-template-columns:repeat(3, 1fr); }
  .prod + .prod{ border-left:1px solid var(--line-soft); padding-left:clamp(24px,3vw,44px); }
}
.prod{
  padding-block:clamp(24px,3vw,36px);
  padding-right:clamp(16px,2.4vw,40px);
}
@media (max-width: 819px){ .prod + .prod{ border-top:1px solid var(--line-soft); } }
.prod__n{
  display:block;
  font-family:var(--mono);
  font-size:.82rem; font-weight:600; letter-spacing:.08em;
  color:var(--emerald);
  margin-bottom:.9rem;
}
.prod__title{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.2rem,1.7vw,1.45rem);
  line-height:1.18; letter-spacing:-.012em;
  margin-bottom:.6rem;
}
.prod__copy{ font-size:1.17rem; line-height:1.58; color:var(--ink-2); }

/* ---------- Back office — ACFN does the selling ----------
   A green plate so it reads as a claim the company is making, not as one
   more feature row. */
.backoffice{
  padding-block:clamp(64px,9vw,130px);
  background:var(--green);
  color:var(--on-green);
}
.backoffice__head{ max-width:44ch; }
.backoffice .h2{ color:var(--white); }
.backoffice__lede{
  margin-top:1.1rem;
  font-size:clamp(1.08rem,1.4vw,1.25rem);
  color:rgba(239,243,241,.72);
}
.bo{
  margin-top:clamp(34px,4.6vw,64px);
  display:grid; grid-template-columns:1fr;
  gap:0;
  border-top:1px solid rgba(239,243,241,.18);
}
@media (min-width: 900px){ .bo{ grid-template-columns:repeat(2, 1fr); column-gap:clamp(36px,5vw,80px); } }
.bo__row{
  display:flex; align-items:flex-start; gap:clamp(16px,2vw,26px);
  padding-block:clamp(22px,2.8vw,34px);
  border-bottom:1px solid rgba(239,243,241,.18);
}
.bo__n{
  flex:none;
  display:grid; place-content:center;
  width:2.4em; height:2.4em;
  border:1px solid rgba(239,243,241,.3);
  border-radius:50%;
  font-family:var(--mono); font-size:.92rem; font-weight:600;
  color:var(--white);
}
.bo__title{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.18rem,1.7vw,1.42rem);
  line-height:1.2; letter-spacing:-.012em;
  color:var(--white);
  margin-bottom:.45rem;
}
.bo__copy{ font-size:1.17rem; line-height:1.58; color:rgba(239,243,241,.76); max-width:46ch; }

/* ---------- Repeated CTA band ----------
   The same ask as the closing panel, placed where the reader has just been
   given a reason to act. */
.ctaband{ background:var(--white); border-block:1px solid var(--line); }
.ctaband__inner{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:clamp(20px,3vw,44px);
  padding-block:clamp(30px,4vw,52px);
}
.ctaband__title{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.4rem,2.4vw,2rem);
  line-height:1.12; letter-spacing:-.018em;
  color:var(--ink);
}
.ctaband__copy{ margin-top:.5rem; font-size:1.19rem; color:var(--ink-2); }
.ctaband__actions{ display:flex; flex-wrap:wrap; gap:.7rem; }
/* Off the green plate the pair needs a light-ground treatment. */
/* The hero pair, relocated below the figures. On the light stats ground it
   takes the same treatment the CTA band uses, and it is separated from the
   figure row by the row's own hairline rather than by another border. */
.stats__actions{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem;
  padding-block:clamp(26px,3.4vw,42px);
  border-top:1px solid var(--rule-soft);
}
.stats__actions .btn{ padding:1.06em 1.95em; font-size:1.08rem; }
.stats__actions .btn--gold{ --btn-bg:var(--green); --btn-fg:var(--on-green); }
.stats__actions .btn--onphoto{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-ring:var(--line); }
@media (hover:hover) and (pointer:fine){
  .stats__actions .btn--gold:hover{ --btn-bg:var(--green-2); --btn-fg:var(--on-green); }
  .stats__actions .btn--onphoto:hover{ --btn-bg:var(--surface-2); --btn-fg:var(--ink); --btn-ring:var(--muted); }
}

.ctaband .btn--gold{ --btn-bg:var(--green); --btn-fg:var(--on-green); }
.ctaband .btn--onphoto{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-ring:var(--line); }
@media (hover:hover) and (pointer:fine){
  .ctaband .btn--gold:hover{ --btn-bg:var(--green-2); --btn-fg:var(--on-green); }
  .ctaband .btn--onphoto:hover{ --btn-bg:var(--surface-2); --btn-fg:var(--ink); --btn-ring:var(--muted); }
}

/* ---------- Photographic step media ----------
   Steps 3 and 4 used to be bare cutouts on a tint; they are photographs now,
   so they take the same frame as steps 1 and 2. */
.step__media--atm{ background:none; padding:0; }

/* The kiosk the products block is describing, set beside the three services. */
.products__body{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,56px); align-items:start; }
@media (min-width: 900px){
  .products__body{ grid-template-columns:minmax(0,.42fr) minmax(0,1fr); column-gap:clamp(36px,5vw,80px); }
  .products__unit{ grid-row:span 2; }
}
.products__unit{
  display:flex; justify-content:center; align-items:center;
  padding:clamp(20px,3vw,40px);
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
}
/* A close-up of the screen itself, so the three services the copy lists
   are legible in the picture instead of only in the text. */
.products__unit{ padding:0; overflow:hidden; }
.products__unit img{
  width:100%; max-width:none; height:auto;
  border-radius:var(--r-lg);
}

/* ══════════════════════════════════════════════════════════════════
   FILM BAND
   Everything below is declared after the "Page surfaces" block on
   purpose: that block re-states section backgrounds near the end of the
   file and has silently flattened a new surface treatment before.
   ══════════════════════════════════════════════════════════════════ */
.filmband{
  position:relative;
  padding-block:clamp(60px,7.6vw,110px);
  /* The film's own ground, not the page's. A player dropped on the beige
     reads as an embed from somewhere else; giving the band the film's
     dark green makes the frame part of the film. */
  background:
    radial-gradient(120% 86% at 50% 8%, rgba(14,106,78,.20), rgba(14,106,78,0) 60%),
    linear-gradient(180deg, #073527 0%, #05271D 62%, #07231B 100%);
  border-block:1px solid rgba(239,243,241,.12);
  overflow:hidden;
}
.filmband__head{ max-width:66ch; margin-bottom:clamp(28px,3.6vw,48px); }
.filmband__title{ color:var(--on-green); }
/* .lede carries no top margin of its own — every section that uses it
   spaces it itself. Without this the lede sets solid against a 4rem
   heading and the two read as one paragraph. */
.filmband__lede{ color:rgba(239,243,241,.78); margin-top:1.15rem; }
/* .label is emerald-on-beige everywhere else; on the dark band that is
   the one colour it cannot be. */
.label--on-green{ color:rgba(239,243,241,.72); }
.label--on-green::before{ background:rgba(239,243,241,.42); }

/* ---- The player ---- */
.filmplayer{
  position:relative;
  margin:0;
  aspect-ratio:16 / 9;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:#05100C;
  border:1px solid rgba(239,243,241,.16);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75);
}
.filmplayer__video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  background:#05100C;
}

/* The overlay ships hidden and is revealed by main.js. Without
   JavaScript the native controls are the only thing over the poster, so
   the film is still playable; with it, this covers them until asked. */
/* Centred, not tucked into a corner. Every frame of this film carries
   type along its left edge, so a control parked bottom-left lands on the
   headline of whichever still is used as the poster. The middle is the
   one place the film's own layout leaves empty. */
.filmplayer__play{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(14px,1.6vw,20px);
  padding:clamp(20px,3vw,38px);
  border:0; cursor:pointer;
  color:var(--on-green);
  font:inherit; text-align:center;
  background:
    linear-gradient(0deg, rgba(4,16,12,.52) 0%, rgba(4,16,12,.18) 40%, rgba(4,16,12,.06) 100%),
    radial-gradient(52% 52% at 50% 50%, rgba(4,16,12,.46), rgba(4,16,12,0) 78%);
  transition:background .4s var(--ease-out);
}
.filmplayer__play[hidden]{ display:none; }
.filmplayer__cta{
  display:flex; flex-direction:column; gap:.2rem;
  align-items:center;
}
.filmplayer__cta b{
  font-size:clamp(1.02rem,1.5vw,1.28rem);
  font-weight:700; letter-spacing:-.018em;
}
.filmplayer__dur{
  font-family:var(--mono); font-style:normal;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(239,243,241,.66);
}
.filmplayer__disc{
  flex:0 0 auto;
  width:clamp(58px,6vw,78px); aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--on-green);
  color:var(--green-2);
  /* The disc is the only round thing on a page built from squares, which
     is the point: it is the one control, and it should not be mistaken
     for anything else. */
  transition:transform .45s var(--ease-out), background .3s var(--ease-out);
}
.filmplayer__disc svg{ width:42%; height:42%; margin-left:6%; }
@media (hover:hover) and (pointer:fine){
  .filmplayer__play:hover{
    background:
      linear-gradient(0deg, rgba(4,16,12,.78) 0%, rgba(4,16,12,.36) 38%, rgba(4,16,12,.04) 70%),
      radial-gradient(60% 60% at 50% 50%, rgba(4,16,12,.26), rgba(4,16,12,0) 70%);
  }
  .filmplayer__play:hover .filmplayer__disc{ transform:scale(1.06); }
}
.filmplayer__play:focus-visible{
  outline:2px solid var(--on-green); outline-offset:-4px;
}
@media (prefers-reduced-motion: reduce){
  .filmplayer__play,.filmplayer__disc{ transition:none; }
  .filmplayer__play:hover .filmplayer__disc{ transform:none; }
}
@media (max-width: 560px){
  .filmplayer__cta b{ font-size:1rem; }
  .filmplayer__dur{ font-size:.68rem; letter-spacing:.1em; }
}


/* ---------- Layout refinements ---------- */

/* The hero type starts close under the nav; the plate stays the full green mass. */
.hero{
  padding-top:calc(var(--nav-h) + clamp(10px, 1.8vw, 24px));
  min-height:0;
}

/* The About heading sets its own scale, a step above the page h2. */
.spread__body .h2{ font-size:clamp(2.35rem, 4.6vw, 3.9rem); line-height:1.02; }

/* The machine plate carries a title. */
.plate__head{ margin-bottom:clamp(26px,3.2vw,44px); }
.plate__title{ text-align:center; }

/* The ask, directly under the marquee, in its own band so the buttons
   have air on both sides instead of hanging off the strip above them. */
.tickercta{ background:var(--white); border-bottom:1px solid var(--line); }
.tickercta__inner{
  display:flex; flex-wrap:wrap; gap:clamp(12px,1.6vw,18px);
  justify-content:center;
  padding-block:clamp(24px,3.2vw,40px);
}
.tickercta .btn--gold{ --btn-bg:var(--green); --btn-fg:var(--on-green); }
.tickercta .btn--onphoto{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-ring:var(--line); }
@media (hover:hover) and (pointer:fine){
  .tickercta .btn--gold:hover{ --btn-bg:var(--green-2); --btn-fg:var(--on-green); }
  .tickercta .btn--onphoto:hover{ --btn-bg:var(--surface-2); --btn-fg:var(--ink); --btn-ring:var(--muted); }
}

/* ── Call line under Check My Area ────────────────────────────────────
   The phone button next to every "Check My Area" is gone; the number is a
   line under the button instead, so there is one ask and one fallback. */
.tickercta__inner,
.ctaband__actions{ flex-direction:column; align-items:center; gap:.85rem; }
.ctaband__actions{ align-items:flex-start; }
.cta-call{
  font-size:1.02rem; line-height:1.4; color:var(--ink-2);
  text-align:center;
}
.ctaband__actions .cta-call{ text-align:left; }
.cta-call a{
  color:var(--green); font-weight:700; white-space:nowrap;
  text-decoration:none; border-bottom:1px solid rgba(10,70,52,.35);
}
@media (hover:hover) and (pointer:fine){ .cta-call a:hover{ border-color:var(--green); } }
@media (max-width:700px){
  .ctaband__actions{ align-items:stretch; width:100%; }
  .ctaband__actions .cta-call{ text-align:center; }
}

/* Film band: no heading above it, and it plays itself once the
   whole frame is visible. The frame is capped to the height the viewport
   can actually show (below the nav, above the disclosure bar), otherwise a
   wide desktop window could never see it whole and it would never start. */
.filmplayer{
  width:min(100%, calc((100svh - var(--nav-h) - var(--disc-h) - 48px) * 16 / 9));
  margin-inline:auto;
}
.filmplayer__sound{
  position:absolute; right:clamp(12px,2vw,22px); top:clamp(12px,2vw,22px);
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem 1.05rem .7rem .85rem;
  border:1px solid rgba(239,243,241,.35); border-radius:999px;
  background:rgba(5,16,12,.62);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:#F6F1E7; font:700 .95rem/1 var(--sans); letter-spacing:.01em;
  cursor:pointer;
  animation:soundIn .5s var(--ease-out) both;
}
.filmplayer__sound[hidden]{ display:none; }
@media (hover:hover) and (pointer:fine){ .filmplayer__sound:hover{ background:rgba(10,70,52,.9); } }
.filmplayer__sound:focus-visible{ outline:2px solid #F6F1E7; outline-offset:3px; }
@keyframes soundIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .filmplayer__sound{ animation:none; } }

/* ---------- Franchisee stories ----------
   The three testimonials are 200-400 word accounts, too long for quote
   cards. One story is read at a time: a tab per franchisee, the story's
   own strongest line set large, its numbers beside it, and the full
   account folded under "Read the full story". Without JS (and in the
   Studio preview) the three stories simply stack, fully open. */
.stories{ --stories-pad:clamp(22px,3.4vw,48px); }
.stories__tabs{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,1.2vw,14px);
  margin-bottom:clamp(14px,1.8vw,22px);
}
.stories__tab{
  appearance:none; font:inherit; text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:.85rem;
  padding:clamp(12px,1.4vw,18px) clamp(12px,1.6vw,20px);
  background:transparent; color:var(--muted);
  border:1px solid var(--line); border-radius:var(--r);
  transition:background-color 220ms var(--ease-out), border-color 220ms var(--ease-out), color 220ms var(--ease-out), transform 160ms var(--ease-out);
}
.stories__tab:active{ transform:scale(.985); }
.stories__tab:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
@media (hover:hover) and (pointer:fine){
  .stories__tab:hover{ border-color:var(--ink); color:var(--ink); }
}
.stories__tab[aria-selected="true"]{
  background:var(--green); border-color:var(--green); color:var(--on-green);
}
.stories__tab .story__avatar{ transition:background-color 220ms, color 220ms; }
.stories__tab[aria-selected="true"] .story__avatar{ background:var(--on-green); color:var(--green); }
.stories__tabname{ display:block; font-weight:700; font-size:1.05rem; line-height:1.2; }
.stories__tabplace{ display:block; font-size:.9rem; opacity:.85; }

.stories__list{ display:grid; gap:clamp(14px,1.8vw,22px); }
.story{
  display:grid; grid-template-columns:1fr; gap:clamp(22px,3vw,40px);
  padding:var(--stories-pad);
  background:var(--white);
  border:1px solid var(--line); border-radius:var(--r);
}
@media (min-width: 900px){
  .story{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(36px,5vw,72px); }
}
.story__who{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.6rem; }
.story__avatar{
  display:grid; place-content:center; flex:none;
  width:46px; height:46px; border-radius:var(--r);
  background:var(--green); color:var(--white);
  font-size:.85rem; font-weight:700; letter-spacing:.03em;
}
.story__name{ display:block; font-weight:700; font-size:1.1rem; }
.story__place{ display:block; font-size:.95rem; color:var(--muted); }

.story__figs{ display:grid; margin:0; }
.story__fig{ padding-block:1rem; border-top:1px solid var(--line); }
.story__fig:first-child{ border-top:0; padding-top:0; }
.story__fig dt{
  font-weight:700; font-size:clamp(2.2rem,3.6vw,3rem); line-height:1;
  letter-spacing:-.03em; color:var(--green);
}
.story__fig dd{ margin:.4rem 0 0; font-size:1rem; line-height:1.4; color:var(--ink-2); }

.story__pull{
  margin:0 0 1.6rem; position:relative;
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.45rem,2.5vw,2.1rem); line-height:1.28; letter-spacing:-.012em;
  color:var(--ink); text-wrap:balance;
}
.story__pull::before{
  content:"\201C"; display:block;
  font-size:3.4em; line-height:.7; height:.42em; margin-bottom:.1em;
  color:var(--green); font-weight:700;
}
.story__body{ font-size:clamp(1.05rem,1.2vw,1.14rem); line-height:1.72; color:var(--ink-2); max-width:66ch; }
.story__body p + p{ margin-top:1em; }

.story__more{
  appearance:none; background:none; border:0; padding:.55rem 0; margin-top:.9rem;
  font:inherit; font-weight:700; font-size:1.02rem; color:var(--green); cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.3em;
}
.story__more:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:2px; }
.story__more svg{ width:16px; height:16px; transition:transform 260ms var(--ease-out); }
.story__more[aria-expanded="true"] svg{ transform:rotate(180deg); }

/* JS on: tabs replace the per-story name block, one story shows, the body folds. */
.stories.is-live .story__who{ display:none; }
.stories.is-live .story[hidden]{ display:none; }
.stories.is-live .story.is-entering{ animation:story-in 420ms var(--ease-out) both; }
.stories.is-live .story__body{
  overflow:hidden; transition:max-height 460ms var(--ease-out);
}
.stories.is-live .story__body.is-folded{
  max-height:11.5em;
  -webkit-mask-image:linear-gradient(#000 55%, transparent);
          mask-image:linear-gradient(#000 55%, transparent);
}
@keyframes story-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

@media (max-width: 899px){
  .stories__tab{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .stories__tab .story__avatar{ width:38px; height:38px; font-size:.78rem; }
  .stories__tabname{ font-size:1rem; }
  .stories__tabplace{ font-size:.82rem; }
  .story__figs{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem; }
  .story__fig, .story__fig:first-child{ border-top:0; padding:0; }
  .story__fig dt{ font-size:1.9rem; }
  .story__fig dd{ font-size:.9rem; }
}
@media (max-width: 480px){
  .stories__tab .story__avatar{ display:none; }
  .stories__tab{ padding:12px 10px; }
}
@media (prefers-reduced-motion: reduce){
  .stories.is-live .story.is-entering{ animation:none; }
  .stories.is-live .story__body{ transition:none; }
}

/* Stories, colour pass: each account opens on a deep-green panel with the
   franchisee's numbers set in laurel gold (they count up as the story
   opens), beside a cream reading column. Switching tabs replays the
   entrance: panel wipes in, figures rise one by one, the quote follows. */
.voices{ position:relative; overflow:hidden; }
.voices::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(70vw,900px); aspect-ratio:1; right:-18%; top:-30%;
  background:radial-gradient(closest-side, rgba(226,174,58,.16), rgba(226,174,58,0));
}
.voices > .shell{ position:relative; z-index:1; }
.story{
  padding:0; overflow:hidden; gap:0;
  background:var(--card); border-color:var(--line);
  box-shadow:0 1px 0 rgba(10,70,52,.04), 0 24px 60px -32px rgba(10,70,52,.35);
}
@media (min-width: 900px){ .story{ gap:0; grid-template-columns:minmax(0,4fr) minmax(0,8fr); } }
.story__side{
  position:relative; isolation:isolate; overflow:hidden;
  padding:var(--stories-pad);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(226,174,58,.22), rgba(226,174,58,0) 60%),
    linear-gradient(160deg, var(--green-l) 0%, var(--green) 45%, var(--green-2) 100%);
  color:var(--on-green);
}
.story__side::after{
  /* a big quiet quote mark, part of the panel's texture */
  content:"\201C"; position:absolute; z-index:-1; right:-.06em; bottom:-.42em;
  font-size:clamp(14rem,22vw,20rem); line-height:1; font-weight:700;
  color:rgba(239,243,241,.06);
}
.story__main{ padding:var(--stories-pad); }
.story__name{ color:#fff; }
.story__place{ color:rgba(239,243,241,.75); }
.story__side .story__avatar{ background:#E2AE3A; color:var(--green-2); }
.story__fig{ border-top-color:rgba(239,243,241,.16); }
.story__fig dt{ color:#E9BC4F; font-variant-numeric:tabular-nums; }
.story__fig dd{ color:rgba(239,243,241,.86); }
.story__pull::before{
  color:#E2AE3A; transform-origin:0 70%;
}
.story__more{ color:var(--green); text-decoration-color:#E2AE3A; text-decoration-thickness:2px; }

/* tabs: the active one carries a gold rule; idle ones get a gold initial */
.stories__tab{ position:relative; overflow:hidden; background:var(--card); }
.stories__tab .story__avatar{ background:rgba(226,174,58,.18); color:var(--green); }
.stories__tab::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:#E2AE3A; transform:scaleX(0); transform-origin:0 50%;
  transition:transform 520ms var(--ease-out);
}
.stories__tab[aria-selected="true"]{
  background:linear-gradient(160deg, var(--green-l), var(--green) 60%);
}
.stories__tab[aria-selected="true"]::after{ transform:scaleX(1); }
.stories__tab[aria-selected="true"] .story__avatar{ background:#E2AE3A; color:var(--green-2); }

/* entrance, replayed on every tab switch */
.stories.is-live .story.is-entering{ animation:story-in 520ms var(--ease-out) both; }
.stories.is-live .story.is-entering .story__side{ animation:story-wipe 760ms var(--ease-out) both; }
.stories.is-live .story.is-entering .story__fig{ animation:story-rise 620ms var(--ease-out) both; }
.stories.is-live .story.is-entering .story__fig:nth-child(1){ animation-delay:180ms; }
.stories.is-live .story.is-entering .story__fig:nth-child(2){ animation-delay:280ms; }
.stories.is-live .story.is-entering .story__fig:nth-child(3){ animation-delay:380ms; }
.stories.is-live .story.is-entering .story__pull{ animation:story-rise 700ms var(--ease-out) 220ms both; }
.stories.is-live .story.is-entering .story__pull::before{ animation:story-mark 900ms cubic-bezier(.34,1.56,.64,1) 300ms both; }
@keyframes story-wipe{ from{ clip-path:inset(0 100% 0 0 round var(--r)); } to{ clip-path:inset(0 0 0 0 round 0); } }
@keyframes story-rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes story-mark{ from{ opacity:0; transform:scale(.4) rotate(-12deg); } to{ opacity:1; transform:none; } }
@media (max-width: 899px){
  .story__fig dt{ font-size:2.1rem; }
  .story__side::after{ font-size:9rem; bottom:-.5em; right:-.04em; color:rgba(239,243,241,.05); }
  @keyframes story-wipe{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0 0 0 0); } }
}
@media (prefers-reduced-motion: reduce){
  .stories.is-live .story.is-entering .story__side,
  .stories.is-live .story.is-entering .story__fig,
  .stories.is-live .story.is-entering .story__pull,
  .stories.is-live .story.is-entering .story__pull::before{ animation:none; }
  .stories__tab::after{ transition:none; }
}

/* ---------- About: venue collage ----------
   Eight of the places behind the logos, as one composed bento: the Four
   Seasons leads full width, then pairs and a row of three, each tile named.
   Phone: the same rhythm on two columns (full, pair, full, pair, pair). */
.collage{
  --cg: clamp(8px, 1vw, 12px);
  display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:var(--cg);
}
.collage__tile{
  position:relative; margin:0; grid-column:span 3; aspect-ratio:4/3;
  overflow:hidden; border-radius:var(--r-lg); background:var(--surface-2);
  isolation:isolate;
}
.collage__tile:nth-child(1){ grid-column:1 / -1; aspect-ratio:16/9; }
.collage__tile:nth-child(4), .collage__tile:nth-child(5), .collage__tile:nth-child(6){ grid-column:span 2; aspect-ratio:1/1; }
.collage__tile img{
  display:block; width:100%; height:100%; object-fit:cover;
  transform:scale(1.001); transition:transform 1400ms var(--ease-out);
}
.anim .collage__tile[data-reveal] img{ transform:scale(1.12); }
.anim .collage__tile[data-reveal].is-in img{ transform:scale(1.001); }
.collage__tile::after{
  content:""; position:absolute; inset:auto 0 0 0; height:55%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,20,16,0) 0%, rgba(7,20,16,.62) 100%);
}
.collage__name{
  position:absolute; left:clamp(10px,1.2vw,16px); bottom:clamp(9px,1.1vw,14px); right:10px; z-index:2;
  display:flex; align-items:center; gap:8px;
  color:#fff; font-weight:600; letter-spacing:.005em; line-height:1.15;
  font-size:clamp(.8rem, .95vw, .98rem);
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}
.collage__name::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%;
  background:#E2AE3A; box-shadow:0 0 0 3px rgba(226,174,58,.28);
}
.collage__tile:nth-child(1) .collage__name{ font-size:clamp(1rem, 1.5vw, 1.3rem); }
@media (hover:hover) and (pointer:fine){
  .collage__tile img{ transition:transform 900ms var(--ease-out); }
  .anim .collage__tile[data-reveal].is-in:hover img, .collage__tile:hover img{ transform:scale(1.06); }
}
@media (max-width: 699px){
  .collage{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .collage__tile, .collage__tile:nth-child(4), .collage__tile:nth-child(5), .collage__tile:nth-child(6){ grid-column:span 1; aspect-ratio:1/1; }
  .collage__tile:nth-child(1), .collage__tile:nth-child(4){ grid-column:1 / -1; aspect-ratio:16/10; }
  .collage__name{ font-size:.86rem; }
}
@media (prefers-reduced-motion: reduce){
  .collage__tile img, .anim .collage__tile[data-reveal] img{ transform:none; transition:none; }
}

/* ---------- The ACFN Difference: existing-routes line ---------- */
.backoffice__routes{
  margin-top:clamp(28px,3.6vw,44px);
  font-size:clamp(1.12rem,1.5vw,1.3rem); line-height:1.45;
  color:var(--on-green);
}
.backoffice__routes a{
  color:var(--white); font-weight:700; white-space:nowrap;
  text-decoration:none; border-bottom:1px solid rgba(239,243,241,.45);
}
@media (hover:hover) and (pointer:fine){ .backoffice__routes a:hover{ border-color:var(--white); } }

/* ---------- Why: offer line on the veterans card ---------- */
.bento__offer{
  font-weight:700; font-size:1.21rem; line-height:1.4;
  color:var(--green); margin-bottom:.45rem;
}

/* ---------- ATM designs: grow on hover, open on click ---------- */
.plate__cell{ cursor:zoom-in; }
.plate__cell img{
  transform-origin:50% 100%;
  transition:transform 380ms var(--ease-out), filter 380ms var(--ease-out);
}
.plate__cell:focus-visible{ outline:2px solid var(--green); outline-offset:6px; border-radius:var(--r); }
@media (hover:hover) and (pointer:fine){
  .plate__grid:hover .plate__cell img{ filter:drop-shadow(0 14px 22px rgba(22,24,26,.28)) saturate(.85) opacity(.72); }
  .plate__grid .plate__cell:hover{ z-index:3; }
  .plate__grid .plate__cell:hover img{
    transform:scale(1.5);
    filter:drop-shadow(0 26px 34px rgba(22,24,26,.36));
  }
}
.atmview{
  border:0; padding:0; margin:auto; background:transparent;
  max-width:none; max-height:none; width:100%; height:100%;
  overflow:hidden;
}
.atmview::backdrop{ background:rgba(14,17,18,.78); backdrop-filter:blur(6px); }
.atmview__stage{
  position:fixed; inset:0; display:grid; place-items:center;
  padding:clamp(56px,8vh,90px) clamp(56px,8vw,120px);
}
.atmview__stage img{
  max-height:min(82vh, 900px); width:auto; max-width:100%;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.45));
  animation:atm-in 420ms var(--ease-out) both;
}
@keyframes atm-in{ from{ opacity:0; transform:scale(.92) translateY(14px); } to{ opacity:1; transform:none; } }
.atmview__btn{
  position:fixed; display:grid; place-content:center;
  width:52px; height:52px; border-radius:50%;
  background:rgba(254,250,234,.12); color:var(--white);
  border:1px solid rgba(254,250,234,.32); cursor:pointer;
  transition:background-color 200ms, transform 160ms;
}
.atmview__btn:hover{ background:rgba(254,250,234,.24); }
.atmview__btn:active{ transform:scale(.95); }
.atmview__btn:focus-visible{ outline:2px solid var(--white); outline-offset:3px; }
.atmview__btn svg{ width:22px; height:22px; }
.atmview__close{ top:20px; right:20px; }
.atmview__prev{ left:clamp(10px,2vw,28px); top:50%; margin-top:-26px; }
.atmview__next{ right:clamp(10px,2vw,28px); top:50%; margin-top:-26px; }
@media (prefers-reduced-motion: reduce){
  .plate__cell img, .collage__tile img{ transition:none; }
  .atmview__stage img{ animation:none; }
}
/* Six cards on a 2-3-1 rhythm: the last (veterans) runs the full width,
   picture left, so the grid closes instead of leaving one card alone. */
@media (min-width: 1060px){
  .bento__cell--accent{ grid-column:1 / -1; flex-direction:row; }
  .bento__cell--accent .bento__media{ flex:0 0 50%; }
  .bento__cell--accent .bento__media img{ height:100%; aspect-ratio:auto; min-height:260px; }
  .bento__cell--accent .bento__body{ align-self:center; padding:clamp(28px,3.4vw,52px); }
  .bento__cell--accent .bento__title{ font-size:clamp(1.4rem,2vw,1.8rem); }
}

/* ---------- Header mark, hero photograph, figures row, About sub-heading ----------
   The header carries the mark in its own colours (green lettering, gold
   laurel) at every scroll position, so it sits on the light bar instead of
   switching to a light variant over the green hero. */
:root{ --nav-h: 108px; }
@media (max-width: 900px){ :root{ --nav-h: 84px; } }
.nav,
.nav.nav--over{ background:rgba(254,250,234,.97); box-shadow:0 1px 0 var(--line); }
.nav__logo img{ height:clamp(66px,6.6vw,92px); }
.nav--over .nav__logo img{ opacity:1; }
.nav--over .nav__logo .nav__logo-alt{ opacity:0; }
.nav--over .nav__links a{ color:var(--ink-2, #2a2f2c); }
.nav--over .nav__links a.is-in,
.nav--over .nav__links a:hover{ color:var(--green); }
.nav--over .nav__cta{ --btn-bg:var(--ink); --btn-fg:var(--white); --btn-ring:var(--ink); -webkit-backdrop-filter:none; backdrop-filter:none; }
.nav--over .burger span{ background:var(--ink); }

/* The hero picture is one photograph — family and machine in the same
   room, same light — so it is framed as a photograph rather than cut out.
   It stands on the fold: square bottom edge on the section line, rounded
   top corners. */
@media (min-width: 940px){
  .hero__grid{ grid-template-columns:minmax(0,.95fr) minmax(320px,1.1fr); }
}
.hero__unit{ overflow:hidden; border-radius:var(--r-lg, 18px) var(--r-lg, 18px) 0 0; }
.hero__unit img{
  width:100%; height:auto; aspect-ratio:1840/1080; object-fit:cover;
  -webkit-mask-image:none; mask-image:none;
}
@media (max-width: 939px){
  .hero__unit img{ width:100%; }
}

/* The key-figures row reads as the caption to the hotel photograph above
   it, so the two sections close up and share one ground. */
.hotelband{ padding-bottom:clamp(20px,2.6vw,36px); border-bottom:0; }
.statsblock .stats__cell{ padding-top:clamp(14px,1.8vw,24px); }

.spread__sub{ margin-top:clamp(14px,1.6vw,22px); margin-bottom:clamp(22px,2.4vw,34px); max-width:34ch; }

/* ==========================================================================
   Hero: the network
   The company's own venues, set as one wall of photographs, with a single
   ACFN machine standing in front of it at the centre. The wall bleeds past
   both edges of the screen: the network continues beyond what fits.
   Everything is sized from the viewport height so headline, paragraph and
   machine all land above the fold on a laptop.
   ========================================================================== */
.hn{
  --row: clamp(92px, min(15.4svh, 11vw), 232px); /* one row of the wall */
  --tw:  calc(var(--row) * 1.34);        /* a landscape tile                */
  --tt:  calc(var(--row) * 1.02);        /* a tall tile's width             */
  --mw:  calc(var(--row) * 1.42);        /* the machine's column            */
  --gap: clamp(8px, 1vw, 14px);
  --over: calc(var(--row) * .72);        /* least the machine rises above   */
  position:relative;
  padding-top:calc(var(--nav-h) + clamp(18px, 3.2svh, 40px));
  padding-bottom:0;
  background:
    radial-gradient(60% 70% at 50% 82%, rgba(14,106,78,.55) 0%, rgba(14,106,78,0) 70%),
    linear-gradient(180deg, var(--green) 0%, #083B2C 100%);
  color:var(--on-green);
  overflow:hidden;
  isolation:isolate;
  /* fills the screen above the disclosure bar; the wall sits on its floor */
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  min-height:calc(100svh - var(--disc-h));
}
.hn__copy{ text-align:center; position:relative; z-index:2;
  margin-bottom:clamp(14px, 2.4svh, 34px); }
.hn__title{
  font-size:clamp(2.3rem, 4vw, 3.9rem);
  line-height:1.04;
  letter-spacing:-.034em;
  font-weight:700;
  color:var(--white);
  max-width:24ch;
  margin-inline:auto;
  text-wrap:balance;
}
.hn__sub{
  margin:clamp(14px, 2svh, 22px) auto 0;
  max-width:74ch;
  font-size:clamp(1.06rem, 1.25vw, 1.24rem);
  line-height:1.55;
  color:rgba(239,243,241,.86);
  text-wrap:pretty;
}

/* ---- the stage ---- */
.hn__stage{
  position:relative;
  /* takes whatever height the copy leaves; the machine grows into it */
  flex:1 1 auto; width:100%;
  min-height:calc(var(--row) * 2 + var(--gap) + var(--over));
}
/* the wall is wider than any screen; it fades out at both ends */
.hn__fade{
  position:absolute; left:0; right:0; bottom:0;
  height:calc(var(--row) * 2 + var(--gap));
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.hn__wall{
  list-style:none; margin:0; padding:0;
  position:absolute; left:50%; top:0;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:var(--tw) var(--tt) var(--tw) var(--tt) var(--mw) var(--tt) var(--tw) var(--tt) var(--tw);
  grid-template-rows:repeat(2, var(--row));
  gap:var(--gap);
}
/* A mosaic, mirrored about the machine. Reading outward on each side:
   a tall photograph framing the machine, a pair, a second tall one, and a
   pair that fades out past the edge of the screen. Order in the list is
   inner-left, then inner-right, then outward, so the first venues listed
   stand closest to the machine. */
.hn__tile:nth-child(1) { grid-area:1/4/3/5; --d:1; --dir:-1; }
.hn__tile:nth-child(2) { grid-area:1/6/3/7; --d:1; --dir: 1; }
.hn__tile:nth-child(3) { grid-area:1/3;     --d:2; --dir:-1; }
.hn__tile:nth-child(4) { grid-area:1/7;     --d:2; --dir: 1; }
.hn__tile:nth-child(5) { grid-area:2/3;     --d:2; --dir:-1; }
.hn__tile:nth-child(6) { grid-area:2/7;     --d:2; --dir: 1; }
.hn__tile:nth-child(7) { grid-area:1/2/3/3; --d:3; --dir:-1; }
.hn__tile:nth-child(8) { grid-area:1/8/3/9; --d:3; --dir: 1; }
.hn__tile:nth-child(9) { grid-area:1/1;     --d:4; --dir:-1; }
.hn__tile:nth-child(10){ grid-area:1/9;     --d:4; --dir: 1; }
.hn__tile:nth-child(11){ grid-area:2/1;     --d:4; --dir:-1; }
.hn__tile:nth-child(12){ grid-area:2/9;     --d:4; --dir: 1; }
.hn__tile:nth-child(n+13){ display:none; }
.hn__tile{
  position:relative; overflow:hidden;
  border-radius:var(--r);
  background:#062B20;
  box-shadow:0 18px 40px -18px rgba(2,20,14,.65);
  transform:translate3d(calc(var(--px, 0) * var(--d) * 3px), calc(var(--py, 0) * var(--d) * 2px), 0);
}
.hn__tile img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.94) contrast(1.04);
}
/* depth: the further a tile sits from the machine, the further it recedes */
.hn__tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,30,22,0) 45%, rgba(4,30,22,.42) 100%);
  opacity:calc(.25 + var(--d) * .18);
}

/* ---- the machine ---- */
.hn__machine{
  position:absolute; z-index:3;
  left:50%; bottom:calc(var(--row) * -.06);
  top:0;
  margin:0;
  transform:translateX(-50%) translate3d(calc(var(--px, 0) * -4px), 0, 0);
}
.hn__machine img{
  display:block; height:100%; width:auto;
  filter:drop-shadow(0 30px 34px rgba(1,16,11,.55)) drop-shadow(0 6px 10px rgba(1,16,11,.35));
}
/* a pool of light on the floor and a halo on the wall behind it */
.hn__machine::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:4%; width:190%; height:92%;
  transform:translateX(-50%);
  background:
    radial-gradient(34% 40% at 50% 40%, rgba(255,246,214,.30) 0%, rgba(255,246,214,0) 70%),
    radial-gradient(50% 50% at 50% 46%, rgba(239,243,241,.20) 0%, rgba(22,128,94,.38) 40%, rgba(10,70,52,0) 72%);
  pointer-events:none;
}
.hn__machine::after{
  content:""; position:absolute; z-index:-1;
  left:50%; bottom:-1%; width:150%; height:9%;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(1,14,10,.62) 0%, rgba(1,14,10,0) 72%);
  pointer-events:none;
}
/* the light that passes once across the machine as it lands */
.hn__shine{
  position:absolute; inset:0; pointer-events:none;
  -webkit-mask-image:var(--hn-mask); mask-image:var(--hn-mask);
  -webkit-mask-size:auto 100%; mask-size:auto 100%;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  background:linear-gradient(100deg, rgba(255,255,255,0) 38%, rgba(255,250,232,.55) 50%, rgba(255,255,255,0) 62%);
  background-size:300% 100%; background-position:120% 0;
  mix-blend-mode:soft-light;
  opacity:0;
}

/* the green ends on a straight edge into the page */
.hn::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:clamp(16px, 2.4svh, 28px);
  background:linear-gradient(180deg, rgba(5,40,29,0), rgba(5,40,29,.55));
  pointer-events:none; z-index:1;
}
.hn{ padding-bottom:clamp(18px, 2.6svh, 30px); }

/* ---- entrance: one authored moment ----
   The wall assembles outward from the machine, then the machine lands and
   a single light passes across it. Default state is fully visible: the
   animation only runs once main.js has marked the hero as ready. */
@media (prefers-reduced-motion: no-preference){
  .hn.is-armed .hn__tile{ opacity:0; }
  .hn.is-armed .hn__machine img{ opacity:0; }
  .hn.is-live .hn__tile{
    animation:hn-tile 1.1s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--d) * 110ms + 80ms);
  }
  .hn.is-live .hn__tile img{
    animation:hn-drift 18s ease-in-out calc(var(--d) * -3s) infinite alternate;
  }
  .hn.is-live .hn__machine img{
    animation:hn-land 1.15s cubic-bezier(.16,1,.3,1) 360ms both;
  }
  .hn.is-live .hn__shine{
    animation:hn-shine 1.6s cubic-bezier(.45,0,.2,1) 1.25s both;
  }
  .hn.is-live .hn__copy > *{
    animation:hn-copy .9s cubic-bezier(.16,1,.3,1) both;
  }
  .hn.is-live .hn__copy > :nth-child(2){ animation-delay:90ms; }
}
@keyframes hn-tile{
  from{ opacity:0; translate:calc(var(--dir) * -44px) 18px; scale:.94; filter:blur(6px); }
  to  { opacity:1; translate:0 0; scale:1; filter:blur(0); }
}
@keyframes hn-drift{
  from{ scale:1.0; } to{ scale:1.07; }
}
@keyframes hn-land{
  from{ opacity:0; transform:translateY(46px) scale(.97); }
  to  { opacity:1; transform:none; }
}
@keyframes hn-shine{
  0%  { opacity:0; background-position:120% 0; }
  15% { opacity:1; }
  85% { opacity:1; }
  100%{ opacity:0; background-position:-20% 0; }
}
@keyframes hn-copy{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}

/* ---- tablet and phone: the machine keeps the centre, three venues each side ---- */
@media (max-width: 760px){
  .hn{ --row: clamp(96px, 27vw, 140px); --over: calc(var(--row) * .3); }
  .hn__title{ font-size:clamp(2.1rem, 9vw, 2.7rem); max-width:14ch; }
  .hn__sub{ font-size:1.06rem; text-align:left; }
  .hn__copy{ text-align:left; }
  .hn__title{ margin-inline:0; }
  .hn__stage{
    flex:none; width:auto;
    height:calc(var(--row) * 3 + var(--gap) * 2 + var(--over));
    min-height:0;
    margin-inline:var(--gut);
  }
  .hn__fade{ -webkit-mask-image:none; mask-image:none; height:calc(var(--row) * 3 + var(--gap) * 2); }
  .hn__wall{
    position:absolute; inset:0; transform:none; left:0;
    grid-template-columns:1fr 1.25fr 1fr;
    grid-template-rows:repeat(3, var(--row));
  }
  .hn__tile:nth-child(1){ grid-area:1/1/3/2; }
  .hn__tile:nth-child(2){ grid-area:1/3/3/4; }
  .hn__tile:nth-child(3){ grid-area:3/1; }
  .hn__tile:nth-child(4){ grid-area:3/3; }
  .hn__tile:nth-child(5),.hn__tile:nth-child(6){ display:none; }
  .hn__tile:nth-child(n+7){ display:none; }
  .hn__tile{ --d:1; }
}
@media (hover:hover) and (pointer:fine){
  .hn__tile img{ transition:filter 400ms var(--ease-out); }
  .hn__tile:hover img{ filter:saturate(1.05) contrast(1.06) brightness(1.06); }
  .hn__tile:hover::after{ opacity:.15; transition:opacity 400ms var(--ease-out); }
}

/* ---------- Key figures: the live "dispensed" counter ----------
   The dollars-dispensed figure runs on its own clock (base amount on a start
   date + a per-second rate, all three editable in the Studio) and is written
   out in full dollars, so it needs a wider cell than its neighbours. */
.stats__cell--live .stat__num{ font-size:clamp(1.9rem,2.7vw,2.9rem); white-space:nowrap; }
.stats__cell--live .stat__lbl{ display:inline-flex; align-items:center; gap:.55em; }
.stats__cell--live.is-ticking .stat__lbl::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--green-l); box-shadow:0 0 0 0 rgba(14,106,78,.45);
  animation:live-pulse 2s ease-out infinite;
}
@keyframes live-pulse{ 0%{ box-shadow:0 0 0 0 rgba(14,106,78,.45); } 70%,100%{ box-shadow:0 0 0 8px rgba(14,106,78,0); } }
@media (min-width: 860px){
  .stats{ grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.75fr); }
}
@media (max-width: 859px){
  .stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stats__cell{ padding-inline:clamp(8px,2.4vw,16px); }
  .stats__cell:nth-child(2n){ border-right:1px solid var(--rule-soft); }
  .stats__cell:nth-child(3){ border-right:0; }
  .stat__num{ font-size:clamp(1.6rem,7.4vw,2.3rem); }
  .stats .stats__cell--live{ grid-column:1 / -1; border-right:0; border-bottom:0; }
  .stats__cell--live .stat__num{ font-size:clamp(2rem,9.6vw,2.9rem); }
}
@media (prefers-reduced-motion: reduce){ .stats__cell--live.is-ticking .stat__lbl::before{ animation:none; } }

/* ---------- Mobile menu: every section ----------
   Twelve destinations, so the type steps down and the panel scrolls. */
.mobile-menu{ overflow-y:auto; overscroll-behavior:contain; gap:1.4rem; }
.mobile-menu__links a{
  font-size:clamp(1.18rem,4.9vw,1.5rem);
  padding-block:.62em;
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-menu__links a::after{
  content:""; width:7px; height:7px; flex:none; margin-left:12px;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform:rotate(45deg); opacity:.45;
}
.mobile-menu__cta{ margin-top:0; position:sticky; bottom:0; padding-top:12px; background:linear-gradient(rgba(253,246,220,0), var(--bone) 30%); }

/* ---------- New business models: cannabis dispensaries ----------
   The flyer's content as a deep-green plate inside the products section:
   the two wrapped machines on the left, the reasons and inclusions right. */
.cbd{
  position:relative; overflow:hidden; isolation:isolate;
  margin-top:clamp(40px,5vw,72px);
  display:grid; grid-template-columns:1fr; gap:clamp(22px,3vw,40px);
  padding:clamp(26px,4vw,60px);
  border-radius:var(--r-lg);
  color:var(--on-green);
  background:
    radial-gradient(90% 70% at 0% 100%, rgba(226,174,58,.18), rgba(226,174,58,0) 60%),
    linear-gradient(150deg, var(--green-l) 0%, var(--green) 45%, var(--green-2) 100%);
}
@media (min-width: 900px){
  .cbd{ grid-template-columns:minmax(0,.38fr) minmax(0,1fr); grid-template-areas:"m h" "m c"; column-gap:clamp(36px,5vw,80px); align-items:start; }
  .cbd__head{ grid-area:h; } .cbd__machines{ grid-area:m; align-self:center; } .cbd__cols{ grid-area:c; }
}
.cbd__title{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(1.8rem,3.4vw,2.9rem); color:#fff;
}
.cbd__tag{
  display:inline-block; margin-top:1rem;
  padding:.55em .9em; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(226,174,58,.45);
  font-weight:600; font-size:clamp(.9rem,1.15vw,1rem); color:#F3E3B5;
}
.cbd__machines{ position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:clamp(260px,34vw,460px); }
.cbd__atm{ height:clamp(240px,31vw,440px); width:auto; filter:drop-shadow(0 26px 30px rgba(0,0,0,.35)); }
.cbd__atm--a{ position:relative; z-index:2; margin-right:-12%; }
.cbd__atm--b{ height:clamp(220px,28vw,400px); transform:translateY(-6%); }
@media (hover:hover) and (pointer:fine){
  .cbd__atm{ transition:transform 600ms var(--ease-out); }
  .cbd:hover .cbd__atm--a{ transform:translateY(-6px) rotate(-1deg); }
  .cbd:hover .cbd__atm--b{ transform:translateY(-9%) rotate(1deg); }
}
.cbd__cols{ display:grid; grid-template-columns:1fr; gap:clamp(22px,3vw,36px); }
@media (min-width: 700px){ .cbd__cols{ grid-template-columns:1fr 1fr; } }
.cbd__sub{
  font-family:var(--mono); font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:#E9BC4F; padding-bottom:.8rem; margin-bottom:.4rem; border-bottom:1px solid rgba(239,243,241,.18);
}
.cbd__list{ list-style:none; margin:0; padding:0; }
.cbd__list li{
  position:relative; padding:.8rem 0 .8rem 1.7rem;
  font-size:1.05rem; line-height:1.55; color:rgba(239,243,241,.88);
  border-bottom:1px solid rgba(239,243,241,.1);
}
.cbd__list li:last-child{ border-bottom:0; }
.cbd__list li::before{
  content:"+"; position:absolute; left:0; top:.68rem;
  font-weight:700; font-size:1.15rem; color:#E2AE3A;
}
.cbd__list b{ display:block; color:#fff; font-weight:700; margin-bottom:.15rem; }

/* ---------- Franchisee stories: four tabs ---------- */
.stories__tabs{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width: 699px){ .stories__tabs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 899px){
  .cbd__machines{ min-height:0; padding-block:6px 4px; }
  .cbd__atm{ height:min(86vw, 360px); }
  .cbd__atm--b{ height:min(78vw, 330px); }
}

/* ---------- Hero wall, venue tiles ----------
   Eight venues, larger, each named. Mirrored about
   the machine: a tall photograph either side of it, then a pair, then a
   second tall one fading out at the edge of the screen. */
.hn{
  --tw: calc(var(--row) * 1.38);   /* landscape tile */
  --tt: calc(var(--row) * 1.32);   /* tall tile's width, over two rows */
}
/* all eight fit on a laptop, so the edge fade only softens, never hides */
.hn__fade{
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
}
.hn__wall{ grid-template-columns:var(--tt) var(--tw) var(--tt) var(--mw) var(--tt) var(--tw) var(--tt); }
.hn__tile:nth-child(1){ grid-area:1/3/3/4; --d:1; --dir:-1; }
.hn__tile:nth-child(2){ grid-area:1/5/3/6; --d:1; --dir: 1; }
.hn__tile:nth-child(3){ grid-area:1/2;     --d:2; --dir:-1; }
.hn__tile:nth-child(4){ grid-area:1/6;     --d:2; --dir: 1; }
.hn__tile:nth-child(5){ grid-area:2/2;     --d:2; --dir:-1; }
.hn__tile:nth-child(6){ grid-area:2/6;     --d:2; --dir: 1; }
.hn__tile:nth-child(7){ grid-area:1/1/3/2; --d:3; --dir:-1; }
.hn__tile:nth-child(8){ grid-area:1/7/3/8; --d:3; --dir: 1; }
.hn__tile:nth-child(n+9){ display:none; }
.hn__tile{ border-radius:var(--r-lg); }
.hn__tile img{ filter:none; }
.hn__tile::after{ background:linear-gradient(180deg, rgba(4,30,22,0) 52%, rgba(4,30,22,.62) 100%); opacity:calc(.55 + var(--d) * .12); }
.hn__name{
  position:absolute; z-index:2; left:clamp(8px,.9vw,14px); right:8px; bottom:clamp(7px,.8vw,12px);
  display:flex; align-items:center; gap:7px;
  color:#fff; font-weight:600; font-size:clamp(.72rem,.85vw,.92rem); line-height:1.15;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.hn__name::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%;
  background:#E2AE3A; box-shadow:0 0 0 3px rgba(226,174,58,.28);
}
.hn__tile:nth-child(-n+2) .hn__name{ font-size:clamp(.8rem,1vw,1.05rem); }
@media (max-width: 760px){
  .hn__wall{ grid-template-columns:1fr 1.25fr 1fr; }
  .hn__tile:nth-child(1){ grid-area:1/1/3/2; }
  .hn__tile:nth-child(2){ grid-area:1/3/3/4; }
  .hn__tile:nth-child(7){ grid-area:3/1; display:block; --d:1; }
  .hn__tile:nth-child(8){ grid-area:3/3; display:block; --d:1; }
  .hn__tile:nth-child(3),.hn__tile:nth-child(4),.hn__tile:nth-child(5),.hn__tile:nth-child(6){ display:none; }
  .hn__name{ font-size:.72rem; }
}

/* ==========================================================================
   Hero machine, figures, back-to-top, difference steps, products
   ========================================================================== */

/* ---- Hero: the machine stands frontal, inside the height of the wall ---- */
.hn{ --mw: calc(var(--row) * .8); --over: 0px; }
.hn__stage{ flex:none; margin-top:auto; height:calc(var(--row) * 2 + var(--gap)); min-height:0; }
.hn__copy{ margin-block:auto clamp(18px, 3svh, 40px); }
.hn__tile{ transform:none; }
.hn__machine{
  top:auto; bottom:calc(var(--row) * -.04);
  height:calc(var(--row) * 2 + var(--gap));
  transform:translateX(-50%);
}
@media (max-width: 760px){
  .hn{ --mw: auto; }
  .hn__stage{ height:calc(var(--row) * 3 + var(--gap) * 2); }
  .hn__machine{ height:calc(var(--row) * 3 + var(--gap) * 2); bottom:calc(var(--row) * -.04); }
}

/* ---- Key figures: one size for every number, captions set larger ---- */
.stat__lbl{
  font-family:var(--sans);
  font-size:clamp(.98rem, 1.2vw, 1.12rem);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink);
}
.stats__cell{ justify-content:flex-start; }
.stats__cell--live .stat__num{ font-size:inherit; }
.stats__cell .stat__num{ font-size:clamp(2.1rem, 3.3vw, 3.3rem); line-height:1; white-space:nowrap; }
@media (min-width: 860px){
  .stats{ grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,2.15fr); }
}
@media (max-width: 859px){
  .stats__cell .stat__num{ font-size:clamp(1.6rem, 7.4vw, 2.3rem); }
  .stats__cell--live .stat__num{ font-size:clamp(1.6rem, 7.4vw, 2.3rem); }
  .stat__lbl{ font-size:clamp(.82rem, 3.2vw, .98rem); }
}

/* ---- Floating back-to-top, on every page ---- */
.totop{
  position:fixed; z-index:60;
  right:clamp(14px, 2vw, 28px);
  bottom:calc(var(--disc-h, 0px) + clamp(14px, 2vw, 24px));
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--green, #0A4634); color:#fff;
  box-shadow:0 10px 24px -8px rgba(2,20,14,.55), 0 0 0 1px rgba(255,255,255,.14) inset;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity 260ms ease, transform 260ms ease, visibility 0s linear 260ms, background-color 200ms ease;
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.totop:focus-visible{ outline:2px solid #E2AE3A; outline-offset:3px; }
@media (hover:hover) and (pointer:fine){ .totop:hover{ background:var(--green-2, #083B2C); } }
@media (prefers-reduced-motion: reduce){ .totop{ transition:opacity 1ms, visibility 0s; transform:none; } }

/* ---- About: the promise line is the section's sub-heading ---- */
.spread__sub{
  font-family:var(--display);
  font-size:clamp(1.42rem, 2.1vw, 1.9rem);
  line-height:1.28;
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--green, #0A4634);
  max-width:30ch;
  padding-left:clamp(14px, 1.4vw, 20px);
  border-left:3px solid #E2AE3A;
}

/* ---- The ACFN Difference: three steps, the last one centred ---- */
@media (min-width: 900px){
  .bo__row:last-child:nth-child(odd){
    grid-column:1 / -1; justify-self:center;
    width:calc((100% - clamp(36px,5vw,80px)) / 2);
  }
}

/* ---- New products: the whole machine, titled over the photograph ---- */
.products__unit--full{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(18px, 2.4vw, 32px) clamp(18px, 2.4vw, 32px) clamp(22px, 3vw, 40px);
  background:linear-gradient(180deg, var(--surface, #F4F1EA) 0%, var(--white, #fff) 100%);
  border:1px solid var(--line-soft, rgba(0,0,0,.08));
}
.products__unit--full img{
  width:auto; max-width:100%;
  height:clamp(460px, 52vw, 720px);
  border-radius:0;
  filter:drop-shadow(0 22px 26px rgba(22,24,26,.22));
}
.products__afs{
  align-self:stretch; text-align:center;
  margin-bottom:clamp(14px, 1.8vw, 22px);
  font-family:var(--display);
  font-size:clamp(1.1rem, 1.5vw, 1.32rem);
  font-weight:600; letter-spacing:-.01em; line-height:1.25;
  color:var(--ink);
}
.products__afs b{ color:var(--green, #0A4634); font-weight:800; }
@media (min-width: 900px){
  .products__body{ grid-template-rows:auto 1fr; align-items:start; }
  .products__list{ align-self:start; }
}
.products__afs b{ display:block; font-size:1.7em; letter-spacing:.02em; line-height:1.1; margin-bottom:.15em; }

/* ---------- July issue ----------
   The July issue's product pictures are a tall kiosk and a small screen, so
   they sit beside their paragraph instead of running the full column width. */
.issue__topic{ display:flow-root; }
.issue__fig.issue__fig--aside{ width:min(42%, 160px); margin:0 auto 1.6rem; }
@media (min-width: 700px){
  .issue__fig.issue__fig--aside{
    float:right; width:min(30%, 210px);
    margin:.35rem 0 1.2rem clamp(22px, 3vw, 36px);
  }
}
.issue__topic .issue__acct + .issue__p{ margin-top:clamp(26px, 3vw, 36px); }

/* ==========================================================================
   Hero machine, closing line
   ========================================================================== */
/* The ACFN Difference: the closing line sits on the centre axis */
#back-office .backoffice__routes{ text-align:center; }
/* Hero: the machine stands in three-quarter view, a step taller than the wall
   it stands in, so it reads as the object of the page rather than a tile */
.hn__machine{
  height:calc((var(--row) * 2 + var(--gap)) * 1.32);
  bottom:calc(var(--row) * -.08);
  z-index:4;
}
.hn__machine img{
  filter:
    drop-shadow(0 34px 38px rgba(1,16,11,.6))
    drop-shadow(0 8px 12px rgba(1,16,11,.4))
    drop-shadow(-1px 0 0 rgba(255,250,232,.35))
    drop-shadow(0 0 28px rgba(150,220,185,.28));
}
.hn__machine::after{ width:175%; height:7%; bottom:-1.5%; }
@media (max-width: 760px){
  .hn__machine{ height:calc((var(--row) * 3 + var(--gap) * 2) * 1.08); }
}
.hn{ --mw: calc(var(--row) * 1.12); }
/* a soft wash of light on the wall behind, so the green side panel separates */
.hn__machine::before{
  width:230%; top:-2%; height:100%;
  background:
    radial-gradient(30% 46% at 52% 42%, rgba(255,247,222,.42) 0%, rgba(255,247,222,0) 72%),
    radial-gradient(48% 52% at 50% 46%, rgba(62,160,120,.45) 0%, rgba(10,70,52,0) 74%);
}
@media (max-width: 760px){ .hn{ --mw:auto; } }

/* ---------- Key figures: the live total on its own plate ----------
   "Dispensed to date" is the one figure that moves, so it sits on the brand
   green with cream type and a soft light from above; the label and the live
   dot take the warm accent. */
.statsblock .stats__cell--live{
  position:relative; isolation:isolate;
  background:
    radial-gradient(120% 140% at 18% -10%, rgba(255,247,222,.16) 0%, rgba(255,247,222,0) 55%),
    linear-gradient(160deg, var(--green-l) 0%, var(--green) 48%, var(--green-2) 100%);
  border-radius:calc(var(--r) * 2);
  border-right:0;
  box-shadow:0 18px 40px -22px rgba(4,40,29,.55), inset 0 1px 0 rgba(255,250,232,.14);
  padding-inline:clamp(20px,2.6vw,36px);
  margin-block:clamp(10px,1.2vw,16px);
}
.statsblock .stats__cell--live .stat__num{ color:var(--white); font-variant-numeric:tabular-nums; }
.statsblock .stats__cell--live .stat__lbl{ color:#E8C46A; }
.statsblock .stats__cell--live.is-ticking .stat__lbl::before{
  background:#E8C46A; animation-name:live-pulse-warm;
}
@keyframes live-pulse-warm{ 0%{ box-shadow:0 0 0 0 rgba(232,196,106,.55); } 70%,100%{ box-shadow:0 0 0 8px rgba(232,196,106,0); } }
@media (max-width: 859px){
  .statsblock .stats__cell--live{ margin-top:clamp(12px,3vw,18px); }
}

/* ---------- Cannabis dispensaries: the market case ----------
   Heading, three market figures, the reasoning and its four points, then a
   closing line that links to Check My Area. Same green plate as before. */
@media (min-width: 900px){
  .cbd{ grid-template-areas:"m h" "m b"; }
  .cbd__body{ grid-area:b; }
}
.cbd__kicker{ margin-top:.7rem; font-family:var(--display); font-weight:600; font-size:clamp(1.15rem,1.7vw,1.45rem); color:#F3E3B5; }
.cbd__intro{ margin-top:.9rem; max-width:60ch; font-size:1.08rem; line-height:1.6; color:rgba(239,243,241,.88); }
.cbd__stats{
  display:grid; grid-template-columns:1fr; gap:1px; margin:0 0 clamp(26px,3vw,38px);
  background:rgba(239,243,241,.14); border:1px solid rgba(239,243,241,.14); border-radius:var(--r);
  overflow:hidden;
}
@media (min-width: 640px){ .cbd__stats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.cbd__stat{ background:rgba(4,40,29,.42); padding:clamp(16px,2vw,24px); }
.cbd__stat dt{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(1.5rem,2.3vw,2.05rem); color:#fff; font-variant-numeric:tabular-nums;
}
.cbd__stat dd{ margin:.45rem 0 0; font-size:.95rem; line-height:1.45; color:rgba(239,243,241,.78); }
.cbd__body .cbd__sub{ text-transform:none; letter-spacing:0; font-family:var(--display); font-size:clamp(1.1rem,1.5vw,1.3rem); font-weight:700; color:#E9BC4F; }
.cbd__p{ font-size:1.05rem; line-height:1.6; color:rgba(239,243,241,.88); margin:.4rem 0 .2rem; max-width:68ch; }
.cbd__close{ margin-top:clamp(18px,2vw,26px); font-size:1.12rem; line-height:1.55; font-weight:600; color:#fff; max-width:62ch; }
.cbd__cta{
  display:inline-flex; align-items:center; gap:.5em; margin-top:1rem;
  font-weight:700; color:#F3E3B5; text-decoration:underline; text-decoration-color:rgba(226,174,58,.6);
  text-underline-offset:.25em; text-decoration-thickness:1.5px;
}
.cbd__cta:hover{ color:#fff; text-decoration-color:#E2AE3A; }
.cbd__stat dt{ white-space:nowrap; font-size:clamp(1.3rem,1.95vw,1.85rem); }

/* ---------- Trusted by our partners ----------
   Nineteen endorsements from hotels and venues. A masonry wall of the
   existing quote cards, so long and short letters sit together without
   ragged rows. */
.partners{ padding-block:clamp(64px,9vw,130px); }
.partners__head{ max-width:56ch; margin-bottom:clamp(30px,4vw,52px); }
.partners__head .lede{ margin-top:.9rem; }
.partners__wall{ columns:1; column-gap:clamp(14px,1.8vw,22px); }
@media (min-width: 760px){ .partners__wall{ columns:2; } }
@media (min-width: 1180px){ .partners__wall{ columns:3; } }
.partners .quote{
  break-inside:avoid; margin:0 0 clamp(14px,1.8vw,22px);
  gap:1.2rem; padding:clamp(22px,2.6vw,32px);
}
.partners .quote__text{ font-size:clamp(1.02rem,1.2vw,1.12rem); line-height:1.55; }
.partners .quote__text::before{ content:"\201C"; display:block; font-size:2.6em; line-height:.8; height:.45em; color:var(--green-l); }
.partners .quote__by{ padding-top:1rem; }
.partners .quote__name{ font-size:1rem; }
.partners .quote__role{ font-size:.9rem; line-height:1.4; color:var(--ink-2); }

/* ---- Hero: live dollars dispensed, under the intro ---- */
.hn__live{ margin:clamp(14px,2svh,22px) auto 0; width:fit-content; max-width:100%; display:flex; align-items:center; justify-content:center; gap:.65em;
  padding:.42em 1em; border:1px solid rgba(239,243,241,.2); border-radius:999px; background:rgba(4,30,22,.3); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.hn__live-num{ font-size:clamp(1rem,1.25vw,1.2rem); font-weight:700; letter-spacing:-.01em; color:var(--white); font-variant-numeric:tabular-nums; white-space:nowrap; }
.hn__live-lbl{ display:inline-flex; align-items:center; gap:.5em; font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(239,243,241,.8); white-space:nowrap; }
.hn__live.is-ticking .hn__live-lbl::before{ content:""; width:6px; height:6px; border-radius:50%; flex:none; background:#3FD49A; animation:hn-live-pulse 2s ease-out infinite; }
@keyframes hn-live-pulse{ 0%{ box-shadow:0 0 0 0 rgba(63,212,154,.5); } 70%,100%{ box-shadow:0 0 0 7px rgba(63,212,154,0); } }
@media (prefers-reduced-motion: no-preference){ .hn.is-live .hn__copy > :nth-child(3){ animation-delay:180ms; } }
@media (prefers-reduced-motion: reduce){ .hn__live.is-ticking .hn__live-lbl::before{ animation:none; } }
@media (max-width: 760px){ .hn__live{ margin-inline:auto; } .hn__live-lbl{ letter-spacing:.08em; } }

/* ---- The disclosure bar steps aside while a field is being typed in:
   on phones the keyboard lifts fixed bars into the middle of the form ---- */
html:has(input:focus, select:focus, textarea:focus) .disclosure{ visibility:hidden; }

/* Legal pages: tables, disclaimers, GPC note */
.legal__caps{ font-size:.9rem; letter-spacing:.01em; }
.legal__table{ margin:0 0 1.4rem; overflow-x:auto; border:1px solid var(--rule-soft); border-radius:var(--r); -webkit-overflow-scrolling:touch; }
.legal__table:focus-visible{ outline:2px solid var(--emerald); outline-offset:2px; }
.legal__table table{ width:100%; min-width:640px; border-collapse:collapse; font-size:.88rem; line-height:1.45; }
.legal__table th,.legal__table td{ padding:.7rem .8rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule-soft); color:var(--ink-2); }
.legal__table thead th{ font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:rgba(0,0,0,.03); }
.legal__table tbody th{ font-weight:700; color:var(--ink); }
.legal__table tr:last-child > *{ border-bottom:0; }
.pref__gpc{ margin:1rem 0 0; font-size:.92rem; color:var(--emerald); font-weight:600; }
.legal__grid > *{ min-width:0; }