/* ==========================================================================
   VAMOS VENDING
   Design system built from Vamos Vending Brand Guidelines
   Headline face: Fraunces (stand-in for Recoleta, see /assets/README-fonts.txt)
   Body face:     Manrope
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* primary ramp */
  --g1:#014133; --g2:#06382C; --g3:#0A3026; --g4:#0B2720;
  --g5:#0C1F1A; --g6:#091813; --g7:#040E0B;
  /* secondary ramp */
  --s1:#E6F4CA; --s2:#DAE6C2; --s3:#CFD9B9; --s4:#C3CCB1;
  --s5:#B8BFA9; --s6:#ACB2A0; --s7:#A1A598;
  /* neutrals */
  --white:#FFFFFF; --paper:#F9F9F9; --rule:#D9D7D2; --rule-2:#EBEBEB;

  /* semantic */
  --bg:var(--paper);
  --ink:var(--g5);
  --ink-70:rgba(12,31,26,.70);
  --ink-52:rgba(12,31,26,.63);
  --ink-38:rgba(12,31,26,.38);
  --ink-14:rgba(12,31,26,.14);
  --on-dark:var(--paper);
  --on-dark-68:rgba(249,249,249,.68);
  --on-dark-44:rgba(249,249,249,.44);
  --on-dark-16:rgba(249,249,249,.16);

  --display:'Fraunces',ui-serif,Georgia,'Times New Roman',serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;

  --shell:1220px;
  /* Horizontal gutter. 24px is the floor on the narrowest phone, so nothing
     ever sits against the edge of the screen. */
  --gut:clamp(24px,5vw,48px);
  --gut-safe:max(var(--gut),env(safe-area-inset-left),env(safe-area-inset-right));
  --pad-card:clamp(24px,2.1vw,32px);
  --sec:clamp(64px,8.5vw,124px);
  --r:20px;
  --r-sm:13px;
  --r-pill:999px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --nav-h:70px;

  --mark-fg:var(--g1);
  --mark-bg:var(--paper);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--g1);outline-offset:3px;border-radius:4px}
.sec--dark :focus-visible{outline-color:var(--s1)}

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

body{
  font-family:var(--body);
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.62;
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- 3. TYPE SCALE ---------- */
.d1,.d2,.h2,.h3,.h4,.stat__n{
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:'SOFT' 40,'WONK' 0;
  letter-spacing:-.018em;
  line-height:.98;
  text-wrap:balance;
}
.d1{font-size:clamp(42px,6.1vw,80px);line-height:.96;letter-spacing:-.028em}
.d2{font-size:clamp(34px,4.4vw,58px);line-height:1.0;letter-spacing:-.024em}
.h2{font-size:clamp(29px,3.5vw,47px);line-height:1.02;letter-spacing:-.022em}
.h3{font-size:clamp(20px,1.65vw,25px);line-height:1.16;letter-spacing:-.014em}
.h4{font-size:clamp(17px,1.2vw,19.5px);line-height:1.24;letter-spacing:-.01em}

.lede{font-size:clamp(17.5px,1.42vw,21px);line-height:1.55;color:var(--ink-70);max-width:62ch;font-weight:450}
.sec--dark .lede,.lede--on-dark{color:var(--on-dark-68)}
.small{font-size:14.5px;line-height:1.55}
.tiny{font-size:12.5px;line-height:1.5}
.muted{color:var(--ink-52)}
.sec--dark .muted{color:var(--on-dark-44)}

.eyebrow{
  font-family:var(--body);
  font-size:14.5px;font-weight:700;
  letter-spacing:-.004em;
  color:var(--g1);margin-bottom:14px;
}
.sec--dark .eyebrow,.eyebrow--light{color:var(--s1)}

/* the slogan reads as a strapline, not a label */
.hero .eyebrow,.phero .eyebrow{
  font-family:var(--display);font-weight:600;
  font-variation-settings:'SOFT' 40,'WONK' 0;
  font-size:clamp(17px,1.5vw,21px);letter-spacing:-.014em;
  margin-bottom:16px;opacity:.92}


/* ---------- 4. LAYOUT ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut-safe)}
.sec{padding-block:var(--sec);position:relative}
.sec--tight{padding-block:clamp(46px,5.6vw,78px)}
.sec--white{background:var(--white)}
/* The equipment block sits directly under the hero, so it runs tighter at the top:
   the machines need to be in view without a scroll on a laptop. */
.sec--eq{padding-block:clamp(28px,3vw,44px) var(--sec)}
.sec--eq .sec__head{margin-bottom:clamp(20px,2vw,28px)}
.sec--dark{background:var(--g1);color:var(--on-dark);overflow:hidden;position:relative}
.sec--dark .h2,.sec--dark .d1,.sec--dark .d2,.sec--dark .h3,.sec--dark .h4,
.band .h2,.band .d1,.band .d2,.band .h3,.band .h4{color:var(--paper)}
.sec--dark p,.band p{color:var(--on-dark-68)}
.band .eyebrow{color:var(--s1)}
.band .muted{color:var(--on-dark-44)}
.band .tlink{color:var(--s1);box-shadow:inset 0 -1.5px 0 0 var(--on-dark-16)}
.band .tlink:hover{box-shadow:inset 0 -1.5px 0 0 var(--s1)}
.band :focus-visible{outline-color:var(--s1)}
.sec__head{max-width:660px;margin-bottom:clamp(34px,4.2vw,58px)}
.sec__head--wide{max-width:820px}
.sec__head .lede{margin-top:20px}

.split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4.4vw,80px);align-items:start}
.split--even{grid-template-columns:1fr 1fr}
.split--flip>:first-child{order:2}
@media(max-width:900px){.split,.split--even{grid-template-columns:1fr;gap:26px}.split--flip>:first-child{order:0}}

.grid{display:grid;gap:clamp(14px,1.5vw,20px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g-2,.g-3{grid-template-columns:1fr}}

/* ---------- 5. RALLY ARC (brand motif) ---------- */
.arc{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.arc .arc__a,.arc .arc__b{position:absolute;height:auto}
.arc .arc__a{top:-14%;right:-10%;width:min(760px,72vw)}
.arc .arc__b{bottom:-26%;left:-14%;width:min(680px,66vw)}
.sec--dark>.shell,.sec--dark>*:not(.arc){position:relative;z-index:1}

/* ---------- 6. LOGO ---------- */
.brand{display:inline-flex;align-items:center;gap:11px}
.brand__mark{width:34px;height:34px;flex:none}
.brand__txt{
  font-family:var(--display);font-weight:600;
  font-variation-settings:'SOFT' 40,'WONK' 0;
  font-size:19px;line-height:.92;letter-spacing:-.03em;
  display:flex;flex-direction:column;
}
.brand__txt em{font-style:normal}
.brand sup{font-size:.42em;vertical-align:super;font-weight:500;opacity:.75;letter-spacing:0}

/* ---------- 7. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-weight:700;font-size:15.5px;letter-spacing:-.006em;
  padding:15px 26px;border-radius:var(--r-pill);
  background:var(--g1);color:var(--s1);
  transition:transform .32s var(--ease),background .22s ease,box-shadow .32s var(--ease);
  will-change:transform;line-height:1.1;text-align:center;
}
.btn svg{width:16px;height:16px;flex:none;transition:transform .34s var(--ease)}
.btn:hover{background:var(--g2);transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(1,65,51,.55)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:18px 32px;font-size:16.5px}
.btn--sm{padding:11px 20px;font-size:14.4px}
.btn--on-dark{background:var(--s1);color:var(--g1)}
.btn--on-dark:hover{background:var(--white);box-shadow:0 12px 28px -12px rgba(0,0,0,.5)}
.btn--ghost{background:transparent;color:var(--g1);box-shadow:inset 0 0 0 1.5px var(--ink-14)}
.btn--ghost:hover{background:transparent;box-shadow:inset 0 0 0 1.5px var(--g1)}
.btn--ghost-dark{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--on-dark-16)}
.btn--ghost-dark:hover{background:transparent;box-shadow:inset 0 0 0 1.5px var(--s1);color:var(--s1)}
.btn--block{width:100%}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:clamp(26px,3vw,38px)}
/* text link with rule */
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;color:var(--g1);
  padding-bottom:3px;box-shadow:inset 0 -1.5px 0 0 var(--ink-14);transition:box-shadow .28s var(--ease)}
.tlink:hover{box-shadow:inset 0 -1.5px 0 0 var(--g1)}
.tlink svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}
.sec--dark .tlink{color:var(--s1);box-shadow:inset 0 -1.5px 0 0 var(--on-dark-16)}
.sec--dark .tlink:hover{box-shadow:inset 0 -1.5px 0 0 var(--s1)}

/* ---------- 8. TOPBAR + NAV ---------- */
.topbar{background:var(--g5);color:var(--on-dark-68);font-size:12.6px;letter-spacing:.005em;padding:10px 0}
.topbar .shell{display:flex;align-items:center;justify-content:center;gap:9px;text-align:center}
.topbar b{color:var(--s1);font-weight:600}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:var(--s1);flex:none;animation:pulse 2.6s var(--ease-io) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}
@media(max-width:560px){.topbar{font-size:11.6px}}

.nav{position:sticky;top:0;z-index:60;background:rgba(249,249,249,.86);backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s ease,background .3s ease}
.nav.is-stuck{border-bottom-color:var(--rule);background:rgba(249,249,249,.95)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h)}
.nav__links{display:flex;align-items:center;gap:4px}
.nav__links a{font-size:15px;font-weight:600;padding:9px 14px;border-radius:var(--r-pill);color:var(--ink-70);
  transition:color .2s ease,background .2s ease}
.nav__links a:hover{color:var(--g1);background:rgba(1,65,51,.06)}
.nav__links a.is-active{color:var(--g1);background:rgba(1,65,51,.08)}
.nav__cta{display:flex;align-items:center;gap:10px}
.nav__cta .btn{padding:12px 21px;font-size:14.5px}

.menu__x{display:none}
.burger{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;
  border:1px solid var(--ink-14);flex:none}
.burger span,.burger span::before,.burger span::after{content:"";display:block;width:17px;height:1.8px;background:var(--g1);
  border-radius:2px;transition:transform .34s var(--ease),opacity .18s ease}
.burger span::before{transform:translateY(-5.5px)}
.burger span::after{transform:translateY(4px)}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:rotate(-45deg) translateY(-0.5px)}

@media(max-width:940px){
  .burger{display:flex}
  .nav__cta .btn{display:none}

  /* Full-screen takeover. inset:0 means it cannot collapse, and it needs no
     JS-measured offset, which is what the previous version depended on. */
  .nav__links{
    position:fixed;inset:0;z-index:80;
    background:var(--g1);
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:calc(var(--nav-h) + 26px) var(--gut-safe) calc(36px + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .26s ease,visibility .26s;
  }
  .nav__links.is-open{opacity:1;visibility:visible;pointer-events:auto}

  .nav__links a{
    font-family:var(--display);font-weight:600;
    font-size:clamp(28px,7.6vw,38px);letter-spacing:-.022em;line-height:1.1;
    color:var(--paper);background:none!important;
    padding:17px 0;border-radius:0;
    border-bottom:1px solid rgba(249,249,249,.13);
  }
  .nav__links a:hover{color:var(--s1)}
  .nav__links a.is-active{color:var(--s1)}

  .nav__links .m-cta{margin-top:30px;padding:0;border:0}
  .nav__links .m-cta .btn{
    display:inline-flex;width:100%;font-family:var(--body);
    font-size:16px;padding:17px 26px}

  /* the bar stays above the panel so the logo and close button remain usable */
  .nav{z-index:90}
  .nav.is-menu-open{
    position:fixed;top:0;left:0;right:0;
    background:transparent;border-bottom-color:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav.is-menu-open .brand{--mark-fg:var(--s1);--mark-bg:var(--g1)}
  .nav.is-menu-open .brand__txt{color:var(--paper)}
  /* The panel is a child of .nav, so its z-index stacks above the burger's
     auto level and would cover it. The panel therefore carries its own close
     button, and the burger is taken out of play while the menu is open. */
  .nav.is-menu-open .burger{visibility:hidden;pointer-events:none}
  .nav.is-menu-open .brand{position:relative;z-index:81}

  .menu__x{
    display:flex;align-items:center;justify-content:center;
    position:fixed;top:calc((var(--nav-h) - 44px) / 2);right:var(--gut-safe);
    width:44px;height:44px;border-radius:12px;z-index:3;
    border:1px solid rgba(249,249,249,.32);color:var(--paper);background:transparent;
    transition:background .2s ease,transform .3s var(--ease)}
  .menu__x svg{width:16px;height:16px}
  .menu__x:hover{background:rgba(249,249,249,.12);transform:rotate(90deg)}
  .menu__x:focus-visible{outline:2px solid var(--s1);outline-offset:2px}
}
@media(min-width:941px){.nav__links .m-cta{display:none}}

/* ---------- 9. HERO ---------- */
.hero{background:var(--g1);color:var(--on-dark);position:relative;overflow:hidden;isolation:isolate}

/* full-bleed painted backdrop, dimmed back so the type stays legible */
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;opacity:1}
/* Neutral scrim, not green. A green wash tints the whole painting green and
   throws away the pastels. Black darkens without shifting the hue, and it is
   concentrated behind the copy so the right of the image stays full colour. */
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,
    rgba(4,14,11,.88) 0%,
    rgba(4,14,11,.85) 40%,
    rgba(4,14,11,.72) 56%,
    rgba(4,14,11,.30) 78%,
    rgba(4,14,11,.05) 100%)}

.hero__in{position:relative;z-index:2;
  padding-block:clamp(74px,10vw,142px) clamp(74px,9.4vw,134px);
  min-height:clamp(480px,66vh,720px);
  display:flex;flex-direction:column;justify-content:center}
.hero__copy{max-width:min(620px,100%)}
@media(max-width:940px){
  .hero__in{padding-block:56px 62px;min-height:0}
  .hero__bg img{object-position:58% 50%;opacity:1}
  .hero__bg::after{background:linear-gradient(178deg,
    rgba(4,14,11,.55) 0%,rgba(4,14,11,.74) 34%,rgba(4,14,11,.88) 72%,rgba(4,14,11,.93) 100%)}
}
.hero .d1{color:var(--paper);max-width:15ch;
  text-shadow:0 1px 30px rgba(4,14,11,.35)}
.hero__sub{margin-top:22px;font-size:clamp(17px,1.4vw,20px);line-height:1.55;
  color:rgba(249,249,249,.82);max-width:48ch}

/* page hero (interior pages) */
.phero{background:var(--g1);color:var(--on-dark);position:relative;overflow:hidden}
.phero__bg{position:absolute;inset:0;z-index:0}
.phero__bg img{width:100%;height:100%;object-fit:cover;object-position:58% 45%;opacity:1}
.phero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,
    rgba(4,14,11,.87) 0%,rgba(4,14,11,.83) 45%,rgba(4,14,11,.76) 100%)}
@media(max-width:900px){
  .phero__bg::after{background:linear-gradient(178deg,
    rgba(4,14,11,.58) 0%,rgba(4,14,11,.78) 40%,rgba(4,14,11,.90) 100%)}
}
.phero--art .phero__in{padding-block:clamp(52px,6.4vw,92px) clamp(56px,6.6vw,96px)}
.phero__in{position:relative;z-index:2;padding-block:clamp(42px,5.6vw,78px) clamp(46px,5.8vw,82px);
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(24px,4vw,64px);align-items:end}
@media(max-width:900px){.phero__in{grid-template-columns:1fr;gap:20px}}
.crumb{font-size:13px;color:var(--on-dark-44);margin-bottom:20px;letter-spacing:.01em}
.crumb a{color:var(--on-dark-68);box-shadow:inset 0 -1px 0 0 rgba(249,249,249,.22)}
.crumb a:hover{color:var(--s1)}

/* ---------- 11. CARDS ---------- */
.card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);
  padding:var(--pad-card);position:relative;height:100%;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s ease}
.card--hover:hover{transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(12,31,26,.34);border-color:var(--s4)}
.card .h3,.card .h4{margin-bottom:9px}
.card p{color:var(--ink-70)}
.card--soft{background:var(--s1);border-color:transparent}
.card--soft p{color:rgba(1,65,51,.78)}
.card--soft .h3{color:var(--g1)}

.card__num{display:block;font-family:var(--body);font-size:13px;font-weight:700;
  letter-spacing:-.004em;color:var(--g1);opacity:.55;margin-bottom:14px}

/* ---------- 11b. FEATURE ROWS ---------- */
/* Icon, heading, one line. Deliberately no card, border or background: the
   grid and the whitespace do the grouping. */
.feats{display:grid;gap:clamp(30px,3.2vw,48px)}
.feats--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.feats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.feats--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){
  .feats--4,.feats--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 28px}
}
@media(max-width:520px){
  .feats--4,.feats--3,.feats--2{grid-template-columns:1fr;gap:32px}
}

.feat svg{width:32px;height:32px;margin-bottom:16px;color:var(--g1)}
.feat h3{font-family:var(--display);font-weight:600;
  font-variation-settings:'SOFT' 40,'WONK' 0;
  font-size:clamp(17px,1.32vw,19.5px);letter-spacing:-.012em;line-height:1.22;margin-bottom:9px}
.feat p{font-size:14.8px;line-height:1.56;color:var(--ink-52);max-width:27ch}

.feat--c{text-align:center}
.feat--c svg{margin-inline:auto}
.feat--c p{margin-inline:auto}

.sec--dark .feat svg,.band .feat svg{color:var(--s1)}
.sec--dark .feat h3,.band .feat h3{color:var(--paper)}
.sec--dark .feat p,.band .feat p{color:var(--on-dark-68)}

/* ---------- 11c. SPEC LIST ---------- */
/* A definition list of ruled rows rather than a table: it reads better at a
   glance and needs no horizontal scroll on a phone. */
.spec{border-top:1px solid var(--rule)}
.spec__r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.spec dt{font-size:14.8px;color:var(--ink-52)}
.spec dd{margin:0;font-size:15.4px;font-weight:600;color:var(--ink)}
@media(max-width:420px){
  .spec__r{grid-template-columns:1fr;gap:3px;padding:13px 0}
}
/* ---------- locker size switcher ---------- */
.sizes__ps{margin-top:clamp(22px,2.4vw,34px)}
.sizes__p{display:none}
/* With JS off the 30 bay panel still carries is-on in the markup, so the page
   degrades to the spec it showed before the switcher existed. */
.sizes__p.is-on{display:block;animation:rise .4s var(--ease) both}
.pill--btn{cursor:pointer;border:0;font:inherit;transition:background .22s var(--ease),color .22s var(--ease)}
.pill--btn:hover{background:var(--s1)}
.pill--btn.is-on{background:var(--g1);color:var(--s1)}
.pill--btn:focus-visible{outline:2px solid var(--g1);outline-offset:2px}

.sec--dark .spec,.sec--dark .spec__r{border-color:var(--on-dark-16)}
.sec--dark .spec dt{color:var(--on-dark-44)}
.sec--dark .spec dd{color:var(--paper)}

/* ---------- 12. STEPS ---------- */
.steps{counter-reset:s;display:grid;gap:clamp(14px,1.5vw,20px);grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:30px;border-top:2px solid var(--on-dark-16)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;top:-2px;left:0;padding-top:14px;
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.06em;color:var(--s1)}
.step .h3{margin-top:16px;margin-bottom:10px}
.sec--dark .step .h3{color:var(--paper)}

/* ---------- 13. STATS ---------- */
.stat{text-align:left}
.stat__n{font-size:clamp(38px,4.4vw,60px);color:var(--s1);line-height:.92;letter-spacing:-.03em;display:block}
.stat__l{margin-top:11px;font-size:14.4px;color:var(--on-dark-68);line-height:1.45;max-width:24ch}
.sec--white .stat__n,.sec:not(.sec--dark) .stat__n{color:var(--g1)}
.sec--white .stat__l,.sec:not(.sec--dark) .stat__l{color:var(--ink-52)}

/* ---------- 14. COMPARISON TABLE ---------- */
.cmp{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.cmp__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp table{min-width:640px}
.cmp th,.cmp td{padding:15px 18px;text-align:left;font-size:14.8px;vertical-align:top;
  border-bottom:1px solid var(--rule-2)}
.cmp thead th{background:var(--g1);color:var(--paper);font-family:var(--display);font-weight:600;
  font-size:15.5px;letter-spacing:-.012em;border-bottom:0;padding-block:17px;position:sticky;top:0}
.cmp thead th:first-child{background:var(--g1)}
.cmp thead th.is-us{color:var(--s1)}
.cmp tbody th{font-weight:700;color:var(--ink);background:var(--white);width:190px;
  position:sticky;left:0;z-index:2;border-right:1px solid var(--rule-2)}
.cmp td{color:var(--ink-70)}
.cmp td.is-us{background:rgba(230,244,202,.42);color:var(--g1);font-weight:600}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp .yes{color:var(--g1);font-weight:700}
.cmp .no{color:var(--ink-38)}
@media(max-width:700px){.cmp th,.cmp td{padding:14px 16px;font-size:13.8px}.cmp tbody th{width:136px}}

/* ---------- 15. FAQ ---------- */
.faq{border-top:1px solid var(--rule)}
.faq__i{border-bottom:1px solid var(--rule)}
.faq__q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0;text-align:left;font-family:var(--display);font-weight:600;
  font-size:clamp(17px,1.32vw,20px);letter-spacing:-.014em;line-height:1.3;color:var(--ink);
  transition:color .2s ease}
.faq__q:hover{color:var(--g1)}
.faq__ic{width:26px;height:26px;border-radius:50%;background:var(--s1);color:var(--g1);flex:none;
  display:flex;align-items:center;justify-content:center;margin-top:1px;transition:transform .4s var(--ease),background .25s ease}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;width:10px;height:1.8px;background:currentColor;border-radius:2px}
.faq__ic::after{transform:rotate(90deg);transition:transform .4s var(--ease),opacity .3s ease}
.faq__ic{position:relative}
.faq__i.is-open .faq__ic{background:var(--g1);color:var(--s1)}
.faq__i.is-open .faq__ic::after{transform:rotate(0);opacity:0}
.faq__a{overflow:hidden;height:0;transition:height .42s var(--ease)}
.faq__a>div{padding-bottom:24px;max-width:70ch}
.faq__a p{color:var(--ink-70)}
.faq__a p+p{margin-top:13px}

/* ---------- 16. QUOTE ---------- */
.quote{background:var(--s1);border-radius:var(--r);padding:clamp(26px,3vw,44px);position:relative}
.quote__t{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.1vw,29px);line-height:1.25;
  letter-spacing:-.018em;color:var(--g1);text-wrap:balance}
.quote__by{margin-top:20px;display:flex;align-items:center;gap:12px;font-size:14.2px;color:rgba(1,65,51,.72)}
.quote__by b{color:var(--g1);font-weight:700}

/* ---------- 17. FIGURES / MEDIA ---------- */
.fig{border-radius:var(--r);overflow:hidden;position:relative;background:var(--g3)}
.fig img{width:100%;height:100%;object-fit:cover}
.fig--wide{aspect-ratio:16/9}
.fig--sq{aspect-ratio:1/1}
.fig--43{aspect-ratio:4/3}
.fig--dark{background:var(--g1)}
/* Product renders must never be cropped: a machine with its top cut off looks
   broken. contain fits the whole unit and the green fills whatever is left. */
.fig--fit{background:var(--g1)}
.fig--fit img{object-fit:contain}
/* On a green section the figure's own green mat would vanish into the background,
   so it drops a shade and the frame still reads as a frame. */
.sec--dark .fig--fit,.band .fig--fit{background:var(--g4)}
.fig__cap{position:absolute;left:14px;bottom:14px;right:14px;font-size:12.4px;color:var(--paper);
  background:rgba(4,14,11,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:8px 13px;border-radius:var(--r-pill);display:inline-flex;width:auto;max-width:calc(100% - 28px)}

.band{position:relative;overflow:hidden;background:var(--g1)}
.band__img{position:absolute;inset:0}
.band__img img{width:100%;height:100%;object-fit:cover;opacity:1}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,
    rgba(4,14,11,.88) 0%,rgba(4,14,11,.84) 45%,rgba(4,14,11,.77) 100%)}
@media(max-width:900px){
  .band::after{background:linear-gradient(178deg,
    rgba(4,14,11,.60) 0%,rgba(4,14,11,.80) 42%,rgba(4,14,11,.91) 100%)}
}
.band>.shell{position:relative;z-index:2}

/* ---------- IMAGE BREAK: a painting at full colour, no text over it ---------- */
.imgbreak{position:relative;overflow:hidden;background:var(--g1)}
.imgbreak img{width:100%;height:100%;object-fit:cover;display:block}
.imgbreak--wide{aspect-ratio:32/9}
@media(max-width:900px){.imgbreak--wide{aspect-ratio:16/9}}
.imgbreak__cap{position:absolute;left:var(--gut-safe);bottom:18px;z-index:2;
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(4,14,11,.58);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--paper);font-size:13px;padding:9px 15px;border-radius:var(--r-pill)}

/* ---------- 18. LOGO ROW ---------- */
.logos{display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(30px,4.4vw,64px);justify-content:center}
.logos__i{display:flex;align-items:center;justify-content:center;
  height:clamp(26px,2.4vw,34px);
  opacity:.55;filter:grayscale(1);transition:opacity .28s ease,filter .28s ease}
.logos__i:hover{opacity:1;filter:none}
/* A compact upright mark needs more height than a wordmark to read at the same
   weight beside it. Optical, not arithmetic. */
.logos__i--tall{height:clamp(34px,3.1vw,44px)}
.logos__i img,.logos__i svg{height:100%;width:auto;max-width:170px;object-fit:contain}
/* text stand-in until the real asset is dropped into /assets/brand/ */
.logos__i span{font-family:var(--display);font-weight:600;font-size:clamp(16px,1.5vw,19px);
  letter-spacing:-.016em;color:var(--ink);white-space:nowrap}
.logos__note{text-align:center;font-size:13px;color:var(--ink-52);margin-top:26px}

/* ---------- 19. TICKS ---------- */
.ticks li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:15.4px;line-height:1.5}
.ticks svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--g1)}
.ticks--light svg{color:var(--s1)}
.ticks--light li{color:var(--on-dark-68)}

/* ---------- 20. FORM ---------- */
.form label{display:block;font-size:13.2px;font-weight:700;margin-bottom:7px;color:var(--ink-70);letter-spacing:.005em}
.form input,.form select,.form textarea{
  width:100%;padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--rule);
  background:var(--white);font-size:15.6px;color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease}
.form input::placeholder,.form textarea::placeholder{color:var(--ink-38)}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:0;border-color:var(--g1);box-shadow:0 0 0 3px rgba(1,65,51,.11)}
.form select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%230C1F1A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;padding-right:40px}
.form textarea{min-height:118px;resize:vertical}
.form__2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:560px){.form__2{grid-template-columns:1fr}}
.form__err{color:#9B2226;font-size:13px;margin-top:6px;display:none}
.is-bad input,.is-bad select{border-color:#9B2226}
.is-bad .form__err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__ok{display:none;background:var(--s1);border-radius:var(--r);padding:26px;text-align:center}
.form__ok .h3{color:var(--g1);margin-bottom:8px}
.form__ok p{color:rgba(1,65,51,.78)}
.is-sent .form__fields,.is-sent .form__submit,.is-sent .form__legal{display:none}
.is-sent .form__ok{display:block}

/* ---------- 21. CALCULATOR ---------- */
.calc{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(24px,2.6vw,38px)}
.calc__field+.calc__field{margin-top:24px}
.calc__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}
.calc__val{font-family:var(--display);font-weight:600;font-size:26px;color:var(--g1);letter-spacing:-.02em}
.range{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:99px;
  background:linear-gradient(90deg,var(--g1) var(--fill,40%),var(--rule) var(--fill,40%));outline:none}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--g1);border:4px solid var(--white);box-shadow:0 2px 10px rgba(1,65,51,.4);cursor:grab}
.range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--g1);
  border:4px solid var(--white);box-shadow:0 2px 10px rgba(1,65,51,.4);cursor:grab;border-color:var(--white)}
.range::-moz-range-track{height:5px;border-radius:99px;background:var(--rule)}
.seg{display:inline-flex;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-pill);padding:4px;gap:2px}
.seg button{padding:10px 20px;border-radius:var(--r-pill);font-size:14.6px;font-weight:700;color:var(--ink-52);
  transition:background .24s var(--ease),color .24s ease}
.seg button[aria-pressed="true"]{background:var(--g1);color:var(--s1)}
.calc__assume{margin-top:22px;padding-top:20px;border-top:1px solid var(--rule-2);font-size:13.4px;color:var(--ink-52);line-height:1.55}
.calc__assume b{color:var(--ink-70)}

.result{background:var(--g1);border-radius:var(--r);padding:clamp(26px,3vw,40px);color:var(--on-dark);position:relative;overflow:hidden}
.result__lock{position:relative;z-index:2}
.result__out{display:none;position:relative;z-index:2}
.result.is-open .result__lock{display:none}
.result.is-open .result__out{display:block;animation:rise .55s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.result__n{font-family:var(--display);font-weight:600;font-size:clamp(46px,6vw,76px);color:var(--s1);
  line-height:.94;letter-spacing:-.034em;margin-block:6px 14px}
.result__pm{font-size:clamp(17px,1.6vw,21px);color:var(--on-dark-68);font-family:var(--body);font-weight:600;letter-spacing:0}
.result__yr{font-size:clamp(15px,1.4vw,18px);color:var(--on-dark-68);font-family:var(--body);margin-top:10px}
.result__yr b{color:var(--paper);font-weight:600}
.result .form input{background:rgba(255,255,255,.06);border-color:var(--on-dark-16);color:var(--paper)}
.result .form input::placeholder{color:var(--on-dark-44)}
.result .form input:focus{border-color:var(--s1);box-shadow:0 0 0 3px rgba(230,244,202,.16)}
.result .form label{color:var(--on-dark-68)}

/* ---------- 22. STICKY MOBILE CTA ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--g1);
  padding:12px var(--gut-safe) calc(12px + env(safe-area-inset-bottom));
  display:none;align-items:center;justify-content:space-between;gap:14px;
  transform:translateY(105%);transition:transform .42s var(--ease);
  box-shadow:0 -10px 30px -18px rgba(0,0,0,.6)}
.sticky.is-on{transform:none}
.sticky__t{font-size:13px;color:var(--on-dark-68);line-height:1.3}
.sticky__t b{display:block;color:var(--s1);font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.014em}
.sticky .btn{padding:12px 20px;font-size:14.4px;flex:none}
@media(max-width:820px){.sticky{display:flex}body.has-sticky{padding-bottom:76px}}

/* ---------- 23. FOOTER ---------- */
.foot{background:var(--g7);color:var(--on-dark-68);padding-block:clamp(48px,5.4vw,74px) 30px;position:relative;overflow:hidden}
.foot__top{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,46px);
  padding-bottom:clamp(34px,3.6vw,50px);border-bottom:1px solid rgba(249,249,249,.11);position:relative;z-index:2}
@media(max-width:880px){.foot__top{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){.foot__top{grid-template-columns:1fr}}
.foot .brand__txt{color:var(--paper)}
.foot__slog{margin-top:16px;font-family:var(--display);font-weight:600;font-size:19px;color:var(--s1);letter-spacing:-.018em}
.foot__bl{margin-top:12px;font-size:14px;max-width:34ch;line-height:1.55}
.foot__h{font-size:14px;font-weight:700;letter-spacing:-.004em;color:var(--paper);margin-bottom:16px}
.foot li+li{margin-top:10px}
.foot a{font-size:14.6px;color:var(--on-dark-68);transition:color .2s ease}
.foot a:hover{color:var(--s1)}
.foot__legal{padding-top:26px;display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  font-size:12.6px;color:var(--on-dark-44);position:relative;z-index:2;line-height:1.6}
.foot__legal p{max-width:74ch}
/* Build credit: sits at the same weight as the legal line, underlined on hover
   so it reads as a link without shouting on a footer that is mostly small print. */
.foot__by{color:var(--on-dark-68);box-shadow:inset 0 -1px 0 0 rgba(249,249,249,.22);transition:color .22s ease,box-shadow .22s ease}
.foot__by:hover{color:var(--s1);box-shadow:inset 0 -1px 0 0 var(--s1)}

/* ---------- 24. REVEAL ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.07s}[data-d="2"]{transition-delay:.14s}
[data-d="3"]{transition-delay:.21s}[data-d="4"]{transition-delay:.28s}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}
.no-js [data-reveal]{opacity:1;transform:none}

/* ---------- 25. UTILITIES ---------- */
.mt-s{margin-top:14px}.mt-m{margin-top:24px}.mt-l{margin-top:38px}
.center{text-align:center}
.center .lede{margin-inline:auto}
.center .eyebrow{justify-content:center}
.center .btnrow{justify-content:center}
.maxw{max-width:640px}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rule{height:1px;background:var(--rule);border:0;margin-block:clamp(34px,4vw,56px)}
.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:var(--r-pill);
  background:var(--s1);color:var(--g1);font-size:13.2px;font-weight:700}
.pillrow{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- 26. MODAL ---------- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,3vw,36px)}

.modal__scrim{position:absolute;inset:0;background:rgba(4,14,11,.62);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;
  transition:opacity .24s ease}
.modal.is-open .modal__scrim{opacity:1}

.modal__panel{position:relative;width:min(560px,100%);max-height:min(92vh,860px);
  background:var(--paper);border-radius:var(--r);overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 40px 90px -30px rgba(4,14,11,.55);
  opacity:0;transform:translateY(10px) scale(.975);
  transition:opacity .2s ease,transform .34s var(--ease)}
.modal.is-open .modal__panel{opacity:1;transform:none}
.modal.is-closing .modal__scrim{opacity:0;transition-duration:.16s}
.modal.is-closing .modal__panel{opacity:0;transform:translateY(6px) scale(.985);
  transition-duration:.16s}

.modal__head{background:var(--g1);color:var(--on-dark);position:relative;overflow:hidden;
  padding:clamp(26px,3vw,34px) var(--pad-card) clamp(24px,2.6vw,28px)}
.modal__head>*{position:relative;z-index:1}
.modal__head .h3{color:var(--paper);margin-bottom:8px}
.modal__head p:last-child{color:var(--on-dark-68)}

.modal__x{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(249,249,249,.12);color:var(--paper);
  transition:background .2s ease,transform .28s var(--ease)}
.modal__x:hover{background:rgba(249,249,249,.24);transform:rotate(90deg)}
.modal__x svg{width:15px;height:15px}

.modal__body{padding:var(--pad-card) var(--pad-card) calc(var(--pad-card) + env(safe-area-inset-bottom))}
.modal .form__ok{margin:0}

@media(max-width:600px){
  /* bottom sheet on phones */
  .modal{align-items:flex-end;padding:0}
  .modal__panel{width:100%;max-height:92vh;
    border-radius:var(--r) var(--r) 0 0;
    transform:translateY(100%) scale(1)}
  .modal.is-open .modal__panel{transform:none}
  .modal.is-closing .modal__panel{transform:translateY(100%);transition-duration:.2s}
  .modal__panel::before{content:"";position:sticky;top:0;display:block;height:0;z-index:4}
}
@media(prefers-reduced-motion:reduce){
  .modal__panel,.modal__scrim{transition:none!important;transform:none!important}
}

body.modal-open,body.menu-open{overflow:hidden}

/* ---------- 27. NARROW VIEWPORT HARDENING ---------- */
/* Nothing may push the document wider than the viewport. */
html,body{max-width:100%}
img,svg,video,table,pre{max-width:100%}
/* .shell is deliberately excluded: it must keep its --shell max-width */
.sec,.hero,.phero,.foot{max-width:100vw}

.topbar .shell{flex-wrap:wrap}

/* the calculator promo band stacks rather than squeezing its button */
.ctaband{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;
  padding:clamp(26px,3vw,44px)}
@media(max-width:640px){.ctaband{grid-template-columns:1fr;gap:18px}
  .ctaband .btn{width:100%}}

/* sticky bar on the smallest handsets */
@media(max-width:400px){
  .sticky{gap:10px;padding-inline:16px}
  .sticky__t{font-size:11.5px}
  .sticky__t b{font-size:14.5px}
  .sticky .btn{padding:11px 15px;font-size:13.2px}
}
@media(max-width:340px){
  .sticky__t{display:none}
  .sticky .btn{width:100%}
}

/* long unbroken strings (emails, URLs) must wrap rather than overflow */
.foot a,.tlink,.ticks li,.foot__legal p{overflow-wrap:anywhere}