:root{
  --cyan:#13A9DD; --cyan-d:#0090B5; --navy:#012A3A; --teal:#003A49;
  --ink:#0E1F28; --slate:#4A5A64; --mist:#F3F7F9; --line:#E2ECF0; --white:#fff;
  --maxw:1180px; --r:16px;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--slate); background:var(--white); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
/* Pictures carry width/height attributes (they stop the page jumping while it loads).
   Without this the height attribute wins whenever CSS only sets the width, and the
   picture is stretched. :where() has no weight, so any rule that sets a height still wins. */
:where(img){height:auto}
h1,h2,h3{color:var(--ink); line-height:1.08; letter-spacing:-.02em; text-wrap:balance; font-weight:800}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.eyebrow{font-size:15.5px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; color:var(--cyan)}
.sub-eyebrow{color:var(--slate); opacity:.7; margin-top:8px; font-size:12.5px; letter-spacing:.22em}
.bx-inline{height:1.72em; width:auto; display:inline-block; vertical-align:-.34em; margin:0 .06em}
.eyebrow .bx-inline{height:2.05em; vertical-align:-.58em; margin-right:.12em}
.btn{display:inline-flex; align-items:center; gap:.5em; border-radius:999px; padding:14px 26px; font-weight:700; font-size:15px; cursor:pointer; transition:.18s; border:1.5px solid transparent; white-space:nowrap}
.btn-primary{background:var(--cyan); color:#fff}
.btn-primary:hover{background:var(--cyan-d)}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-outline:hover{border-color:var(--cyan); color:var(--cyan-d)}
.btn-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-white:hover{background:rgba(255,255,255,.1)}

/* sticky top chrome — curved util bar + header stick together */
.topchrome{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(10px)}

/* utility bar */
.util{background:var(--cyan); color:#fff; font-size:14.5px; border-radius:0 0 50% 50% / 0 0 26px 26px; box-shadow:0 5px 14px -8px rgba(1,42,58,.28)}
.util .wrap{display:flex; justify-content:center; gap:20px; align-items:center; height:58px; padding-bottom:8px; max-width:1400px}
.util a{color:#fff; opacity:.95; font-weight:700; white-space:nowrap} .util a:hover{opacity:1}
.util .grp span{font-weight:700; white-space:nowrap}
.util .grp{display:flex; gap:20px; align-items:center}
.util .sep{opacity:.4}
.util-login{font-weight:800 !important; opacity:1 !important; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px}

/* header */
header{border-bottom:1px solid var(--line)}
header .wrap{display:flex; align-items:center; gap:30px; height:128px; max-width:1400px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); font-size:21px; letter-spacing:-.01em; white-space:nowrap; flex-shrink:0}
.brand img{width:32px;height:32px}
header a.brand img.brandlogo{width:auto !important; height:74px !important; max-width:none !important; flex-shrink:0}
.brand .slash{color:var(--line); font-weight:400; font-size:22px}
.brand .fs{color:var(--cyan); font-weight:600}
nav.main{display:flex; gap:30px; margin-left:6px; flex:1; justify-content:flex-end; padding-right:8px}
nav.main a{font-size:18.5px; font-weight:700; color:var(--ink); opacity:.85; white-space:nowrap}
nav.main a:hover{opacity:1; color:var(--cyan-d)}
.head-cta{display:flex; gap:14px; align-items:center}
.head-cta .btn{padding:14px 26px; font-size:16px}

/* hero — full-bleed real photo */
.hero{position:relative; min-height:78vh; display:flex; align-items:center; overflow:hidden; background:var(--navy)}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% center}
.hero-scrim{position:absolute; inset:0; background:linear-gradient(90deg, rgba(1,32,44,0) 14%, rgba(1,32,44,.24) 42%, rgba(1,32,44,.78) 70%, rgba(1,26,36,.94) 100%)}
.hero-inner{position:relative; z-index:2; color:#fff; padding-top:64px; padding-bottom:64px; display:flex; flex-direction:column; align-items:flex-end; text-align:right}
.hero .btns{justify-content:flex-end}
.hero .eyebrow.light{color:#57cdf0; letter-spacing:.14em}
.hero h1{color:#fff; font-size:66px; line-height:1.02; letter-spacing:-.025em; margin:16px 0 22px; max-width:15ch}
.hero h1 .pd{color:var(--cyan)}
.hero .sub{color:#d6e6ee; font-size:19px; line-height:1.55; max-width:46ch; margin:0}
.hero .btns{display:flex; gap:14px; margin:32px 0 0; flex-wrap:wrap}

/* section shell */
section.pad{padding:88px 0}
.center{text-align:center; max-width:none}
.section-head{max-width:680px; margin:0 auto 52px; text-align:center}
.section-head h2{font-size:42px; margin:16px 0 16px}
.section-head p{font-size:16.5px}
.section-head p+p{margin-top:10px}

/* who we serve */
.who{background:#fff}
.serve-row{display:grid; grid-template-columns:repeat(6,1fr); gap:26px 22px; margin-bottom:64px}
.serve{text-align:center; display:flex; flex-direction:column; align-items:center}
.si{width:64px; height:64px; stroke:var(--navy); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; fill:none; margin-bottom:14px}
.serve h3{font-size:14.5px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px}
.tick{display:block; width:34px; height:3px; background:var(--cyan-d); border-radius:2px; margin:0 auto 12px}
.serve p{font-size:13.5px; line-height:1.55; max-width:24ch}

/* proudly local map panel */
.local{display:grid; grid-template-columns:.85fr 1.15fr; gap:0; background:linear-gradient(120deg,#eef5f9 0%,#f6f8f3 100%); border-radius:22px; overflow:hidden; box-shadow:0 24px 54px -36px rgba(1,42,58,.35)}
.local-copy{padding:52px 20px 52px 48px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start}
.local-copy h2{font-size:34px; margin:12px 0 14px}
.tick.tl{margin:0 0 16px}
.local-copy p{font-size:15.5px; max-width:38ch; margin-bottom:24px}
.local-map{position:relative; aspect-ratio:1200/1239}
.local-map>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pin{position:absolute; transform:translate(-6px,-9px); font-size:12.5px; font-weight:700; color:var(--ink); white-space:nowrap; padding-left:16px}
.pin:before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:11px; height:11px; border-radius:50% 50% 50% 0; background:var(--navy); rotate:-45deg; box-shadow:0 2px 5px rgba(0,0,0,.28)}
.pin-l{padding-left:0; padding-right:16px; transform:translate(calc(-100% + 6px),-9px)}
.pin-l:before{left:auto; right:0}
.pin-sf,.pin-sj{font-size:14px}
.pin-hq{color:var(--cyan-d)}
.pin-hq:before{background:var(--cyan-d); width:13px; height:13px}
.local-card{position:absolute; top:22px; right:22px; background:#fff; border-radius:14px; padding:16px 20px; text-align:center; box-shadow:0 14px 34px -14px rgba(1,42,58,.4)}
.local-card img{height:52px; width:auto; margin:0 auto 8px}
.local-card div{font-size:13px; font-weight:700; color:var(--ink); line-height:1.4}

/* what we do — numbered grid */
.sol{background:var(--mist)}
.do-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.do-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 24px; transition:.18s}
.do-card:hover{border-color:var(--cyan); box-shadow:0 18px 38px -24px rgba(1,42,58,.32); transform:translateY(-3px)}
.do-card .cn{font-weight:800; color:var(--cyan); font-size:15px; letter-spacing:.05em; font-variant-numeric:tabular-nums}
.do-card h3{font-size:18px; margin:8px 0 8px; letter-spacing:-.01em}
.do-card p{font-size:14px; line-height:1.5}
@media(max-width:920px){ .do-grid{grid-template-columns:1fr 1fr} }
/* our solutions — 8-card grid */
.sol-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.sol-card{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:.2s}
.sol-card:hover{box-shadow:0 22px 46px -28px rgba(1,42,58,.4); transform:translateY(-4px)}
.sc-ph{position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--mist)}
.sc-ph img{width:100%; height:100%; object-fit:cover}
.powered{position:absolute; top:10px; right:10px; background:rgba(255,255,255,.95); border-radius:8px; padding:6px 10px 7px; font-size:8.5px; line-height:1; color:var(--slate); text-align:center; font-weight:600; letter-spacing:.04em; text-transform:uppercase; box-shadow:0 4px 12px -4px rgba(0,0,0,.3)}
.powered img{display:block; width:78px; height:auto; margin-top:3px}
.sc-body{display:flex; gap:13px; padding:20px 20px 22px; align-items:flex-start; flex:1}
.sc-ic{width:46px; height:46px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 auto}
.sc-ic.sc-co2{font-size:13px; font-weight:800; letter-spacing:-.02em}
.sc-txt h3{font-size:16.5px; margin-bottom:7px; letter-spacing:-.01em; line-height:1.15}
.sc-txt p{font-size:13.5px; line-height:1.5; margin-bottom:12px}
.sc-txt .more{color:var(--cyan-d); font-weight:700; font-size:13.5px}
@media(max-width:1000px){ .sol-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .sol-grid{grid-template-columns:1fr} }
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:.2s}
.card:hover{box-shadow:0 24px 48px -28px rgba(1,42,58,.4); transform:translateY(-4px)}
.card .ph{aspect-ratio:16/11; overflow:hidden; background:var(--navy)}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .body{padding:24px 24px 26px}
.card h3{font-size:20px; margin-bottom:10px}
.card p{font-size:14.5px}
.card .more{display:inline-block; margin-top:16px; color:var(--cyan-d); font-weight:700; font-size:14.5px}

/* Alameda Soda — full-bleed lifestyle hero, shaded like the top hero */
.asoda{position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; background:var(--navy)}
.asoda-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% center}
.asoda-scrim{position:absolute; inset:0; background:linear-gradient(90deg, rgba(1,26,36,.94) 0%, rgba(1,32,44,.80) 28%, rgba(1,32,44,.32) 56%, rgba(1,32,44,.04) 78%)}
.asoda-inner{position:relative; z-index:2; color:#fff; padding-top:84px; padding-bottom:84px}
.asoda-copy{max-width:580px}
.asoda-logo{width:min(430px,88%); height:auto; margin:20px 0 26px; filter:drop-shadow(0 4px 16px rgba(0,0,0,.4))}
.asoda-copy h2{color:#fff; font-size:clamp(28px,3.2vw,42px); letter-spacing:-.02em; margin-bottom:16px}
.asoda-copy p{color:rgba(255,255,255,.9); font-size:17.5px; line-height:1.65; margin-bottom:32px; max-width:52ch}

/* fountain band — real DAM machine + 3-gal BIB stack, cut out on white */
.fountain{background:#fff}
.fountain-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:center}
.f-copy h2,.f-copy h3{font-size:clamp(26px,2.6vw,34px); letter-spacing:-.02em; margin:10px 0 14px}
.f-copy p{font-size:16px; color:var(--slate); line-height:1.65; margin-bottom:26px}
.f-btns{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:30px}
.f-btns .btn{padding:13px 22px; font-size:14.5px}
.f-mach{text-align:center}
.f-mach img{width:100%; max-width:330px; margin:0 auto; mix-blend-mode:multiply}
.crests{display:flex; gap:26px; justify-content:flex-start; align-items:flex-end; flex-wrap:wrap}
.crests img{height:46px; width:auto; opacity:.85; transition:.18s}
.crests img:hover{opacity:1; transform:scale(1.06)}

/* customer logo wall */
.custwall{display:flex; gap:44px; justify-content:center; align-items:center; flex-wrap:wrap; margin-bottom:30px}
.custwall img{height:46px; width:auto; max-width:140px; object-fit:contain; filter:grayscale(1); opacity:.55; transition:.18s}
.custwall img.cw-pixar{height:30px; max-width:170px}
.custwall img.cw-melt{height:64px}
.custwall img.cw-starbird{height:88px; max-width:130px}
.custwall img:hover{filter:none; opacity:1}
.more-cust{text-align:center; font-size:14px; color:var(--slate); max-width:64ch; margin:0 auto 34px}

/* why band */
.why{background:var(--navy); color:#dceaf0}
.why .section-head h2{color:#fff}
.why .section-head .eyebrow{color:#57c7ea}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; text-align:center}
.stat .n{font-size:40px; font-weight:800; color:#fff; letter-spacing:-.02em}
.stat .n .c{color:#57c7ea}
.stat .l{font-size:14px; margin-top:8px; color:#a9c6d3}

/* lifecycle */
.life{background:var(--mist)}
.steps{display:grid; grid-template-columns:repeat(6,1fr); gap:18px}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 16px 24px; text-align:center; position:relative; transition:.2s}
.step:hover{transform:translateY(-4px); box-shadow:0 24px 48px -28px rgba(1,42,58,.4); border-color:transparent}
.step .num{position:absolute; top:13px; left:16px; font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--cyan-d); opacity:.9}
.step .si{width:50px; height:50px; margin:10px auto 14px}
.step h3{font-size:16.5px; margin-bottom:6px}
.step p{font-size:13px; line-height:1.5}
.step:not(:last-child):after{content:"›"; position:absolute; right:-15px; top:50%; transform:translateY(-56%); color:var(--cyan); font-size:24px; font-weight:800; z-index:1; line-height:1}

/* final cta */
.final{background:linear-gradient(160deg,#012A3A,#01394d)}
.final .wrap{text-align:center; padding:92px 0}
.final h2{color:#fff; font-size:42px; margin-bottom:16px}
.final p{color:#bcd6e0; font-size:18px; max-width:44ch; margin:0 auto 30px}
.final .btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ---- sub-pages ---- */
.page{display:none} .page.active{display:block}
[id]{scroll-margin-top:200px}
.eyebrow.light{color:#57cdf0}
.page-hero{position:relative; min-height:44vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--navy)}
.ph-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ph-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(1,26,36,.34) 0%, rgba(1,26,36,.9) 94%)}
.page-hero .wrap{position:relative; z-index:2; color:#fff; padding-top:130px; padding-bottom:56px; width:100%}
.page-hero h1{color:#fff; font-size:clamp(34px,4vw,52px); margin:12px 0 12px}
.page-hero p{color:rgba(255,255,255,.9); font-size:17px; max-width:62ch}
.checks{display:grid; grid-template-columns:repeat(2,1fr); gap:13px 30px; margin:24px 0}
.checks div{position:relative; padding-left:28px; font-size:15.5px}
.checks div:before{content:"✓"; position:absolute; left:0; color:var(--cyan-d); font-weight:800}
.two-col{display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center}
.two-col .cut img{width:100%; mix-blend-mode:multiply}
.two-col .cut img{max-height:520px; object-fit:contain} /* tall product shots (the dispenser) stay in proportion with the text beside them */
.two-col h2{font-size:34px; margin:12px 0 14px}
.two-col > div > p{font-size:16px}
.two-col .btns{display:flex; gap:12px; flex-wrap:wrap}
.pg-mist{background:var(--mist)}
.stats-light .stat .n{color:var(--ink)}
.stats-light .stat .l{color:var(--slate)}
.lease-banner{display:flex; align-items:center; justify-content:space-between; gap:30px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:34px 40px; flex-wrap:wrap; box-shadow:0 24px 48px -30px rgba(1,42,58,.35)}
.lease-banner .amt2{font-size:46px; font-weight:800; color:var(--ink); letter-spacing:-.02em} .lease-banner .amt2 small{font-size:17px; color:var(--slate); font-weight:700}
.lease-banner h3{font-size:22px; margin-bottom:4px} .lease-banner p{font-size:14.5px; max-width:46ch}
.rf-brands{display:grid; grid-template-columns:1fr 1fr; gap:44px 40px; align-items:center; justify-items:center; padding:20px 0}
.rf-brands img{max-height:46px; max-width:170px; width:auto; height:auto; object-fit:contain; opacity:.75}
@media(max-width:900px){ .two-col{grid-template-columns:1fr; gap:32px} .page-hero .wrap{padding-top:100px} }
@media(max-width:640px){ .checks{grid-template-columns:1fr} .lease-banner{padding:26px 24px} }

/* equipment types + planning service blocks */
.eq-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.eq-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; transition:.2s}
.eq-card:hover{transform:translateY(-4px); box-shadow:0 24px 48px -28px rgba(1,42,58,.4); border-color:transparent}
.eq-card .si{width:42px; height:42px; margin:0 0 12px}
.eq-card h2,.eq-card h3{font-size:17px; margin-bottom:8px}
.eq-card p{font-size:13.5px; line-height:1.55}
.svc-note{margin-top:34px; text-align:center; font-size:15.5px; color:var(--ink)}
.svc-note a{color:var(--cyan-d); font-weight:700}
.plan-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.plan-grid .eq-card{padding:24px 20px}
.plan-grid .eq-card p{font-size:12.8px}
.melt-case{display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:42px 48px; box-shadow:0 26px 52px -32px rgba(1,42,58,.4)}
.melt-case > img{width:100%; max-width:170px; margin:0 auto}
.melt-case h3{font-size:25px; margin-bottom:10px}
.melt-case p{font-size:15px; line-height:1.68}
.melt-tags{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.melt-tags span{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--cyan-d); background:var(--mist); border:1px solid var(--line); border-radius:999px; padding:6px 14px}
@media(max-width:1000px){ .eq-grid{grid-template-columns:repeat(2,1fr)} .plan-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .eq-grid,.plan-grid{grid-template-columns:1fr} .melt-case{grid-template-columns:1fr; text-align:center; padding:30px 24px; gap:24px} }

/* popular sizes & starting prices */
.price-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; align-items:start}
.price-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.price-card .ph-head{background:var(--navy); color:#fff; padding:18px 24px}
.price-card .pimg{height:180px; display:flex; align-items:center; justify-content:center; padding:16px 20px; background:#fff; border-bottom:1px solid var(--line)}
.price-card .pimg img{max-height:100%; max-width:90%; width:auto; object-fit:contain; mix-blend-mode:multiply}
.price-card .ph-head h3{color:#fff; font-size:17px}
.price-card .ph-head span{font-size:12px; color:#8fc3d8; font-weight:600}
.price-row{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:15px 24px; border-bottom:1px solid var(--line)}
.price-row:last-child{border-bottom:none}
.price-row .nm{font-size:14.5px; font-weight:700; color:var(--ink)}
.price-row .ds{display:block; font-size:12px; color:var(--slate); font-weight:400; margin-top:2px}
.price-row .pr{font-size:15px; font-weight:800; color:var(--cyan-d); white-space:nowrap}
.price-row .pr small{font-size:11px; color:var(--slate); font-weight:600; display:block; text-align:right}
.price-note{text-align:center; font-size:13px; color:var(--slate); margin-top:26px; max-width:72ch; margin-left:auto; margin-right:auto}
@media(max-width:1000px){ .price-grid{grid-template-columns:1fr} }

/* footer */
footer{background:var(--navy); color:#9fbecb; font-size:14px; padding:66px 0 30px}
.fgrid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px}
footer .brand{color:#fff; margin-bottom:14px} footer .brand .slash{color:#2a5566}
footer p.blurb{max-width:34ch; line-height:1.6; color:#9fbecb}
footer .addr{margin-top:14px; font-size:13.5px; color:#7ea6b6}
footer .social{display:flex; gap:10px; margin-top:16px}
footer .social a{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); color:#cfe3ec; transition:background .15s,color .15s}
footer .social a:hover,footer .social a:focus-visible{background:#57cdf0; color:#0b2733}
footer h4{color:#fff; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px}
footer ul{list-style:none; display:flex; flex-direction:column; gap:10px}
footer ul a{color:#9fbecb} footer ul a:hover{color:#fff}
.legal{border-top:1px solid rgba(255,255,255,.1); margin-top:46px; padding-top:24px; font-size:13px; color:#6f97a7}
.legal a{color:#9fc3d1; text-decoration:underline}
.legal{padding-bottom:64px; line-height:1.9}

/* trust wall */
.trust{background:var(--mist); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.trust .wrap{padding:22px 28px 20px; max-width:1400px; text-align:center}
.trust-title{font-size:12.5px; font-weight:800; color:var(--slate); letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px; opacity:.85}
.trust-title span{color:var(--cyan-d)}
.logowall{display:flex; flex-wrap:wrap; gap:14px 22px; justify-content:center; align-items:center}
.logowall .wm{font-size:24px; font-weight:800; letter-spacing:-.01em; color:var(--ink); opacity:.45; transition:.18s; white-space:nowrap}
.logowall .wm:hover{opacity:.9; color:var(--cyan-d)}
.blogo-link{display:inline-flex; align-items:center}
.logowall .blogo{max-height:38px; max-width:128px; width:auto; height:auto; object-fit:contain; opacity:.65; transition:.18s}
.logowall .blogo-link:hover .blogo{opacity:1}
.logowall a.wm{align-self:center}

/* 6-step row */
.steps6 .wrap{display:grid; grid-template-columns:repeat(6,1fr); gap:22px; padding:44px 28px}
.s6{display:flex; flex-direction:column; gap:6px; padding-left:2px; border-left:2px solid var(--line)}
.s6{padding:2px 0 2px 16px}
.s6i{font-size:22px; color:var(--cyan-d)}
.s6 b{color:var(--ink); font-size:16px; margin-top:4px}
.s6 span{font-size:12.5px; color:var(--slate); line-height:1.45}

/* customers / reviews */
.proof{background:var(--mist)}
.partners{display:flex; flex-wrap:wrap; gap:12px 14px; justify-content:center; margin-bottom:56px}
.partners .chip{background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 20px; font-weight:700; font-size:14.5px; color:var(--ink); opacity:.85; transition:.18s}
.partners .chip:hover{border-color:var(--cyan); color:var(--cyan-d); opacity:1}
.rating{display:flex; gap:10px; align-items:center; justify-content:center; margin-bottom:30px}
.rating .stars{color:#F4B400; font-size:17px; letter-spacing:2px}
.rating .txt{font-weight:700; color:var(--ink); font-size:14px}
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.review{position:relative; background:#fff; border-radius:18px; padding:34px 26px 26px; display:flex; flex-direction:column; box-shadow:0 18px 40px -30px rgba(1,42,58,.35)}
.review:before{content:"“"; position:absolute; top:6px; left:20px; font-size:64px; line-height:1; color:var(--cyan); opacity:.22; font-family:Georgia,serif}
.review .stars{display:none}
.review p{font-size:15px; color:var(--ink); line-height:1.62; flex:1}
.review .who{display:flex; align-items:center; gap:12px; margin-top:18px}
.review .av{width:38px;height:38px;border-radius:50%;background:var(--cyan);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px}
.review .who .nm{font-weight:700; color:var(--ink); font-size:14px}
.review .who .src{font-size:12.5px; color:var(--slate)}
.rev-cta{text-align:center; margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* equipment leasing band */
.equip{background:var(--mist)}
.equip-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.equip-img{position:relative; border-radius:var(--r); overflow:hidden; box-shadow:0 26px 54px -30px rgba(1,42,58,.5)}
.equip-img img{width:100%; display:block; aspect-ratio:4/3; object-fit:cover}
.equip .badge{position:absolute; left:18px; bottom:18px; background:#fff; border-radius:14px; padding:13px 19px; box-shadow:0 12px 28px -10px rgba(0,0,0,.35)}
.equip .badge .lab{font-size:12px; font-weight:700; color:var(--slate)}
.equip .badge .amt{font-size:26px; font-weight:800; color:var(--ink)}
.equip .badge .amt small{font-size:14px; font-weight:700; color:var(--cyan-d)}
.equip h2{font-size:34px; margin:14px 0 14px}
.equip p{font-size:16.5px; margin-bottom:18px}
.lvr{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.lvr-c{background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px}
.lvr-c b{display:block; color:var(--cyan-d); font-size:15px; margin-bottom:6px}
.lvr-c span{font-size:13.5px; color:var(--slate); line-height:1.5}

/* authorized brands */
.brands{background:#fff}
.brandwall{display:flex; flex-wrap:wrap; gap:14px 20px; justify-content:center}
.brandwall .b{border:1px solid var(--line); border-radius:10px; padding:12px 22px; font-weight:700; font-size:15px; color:var(--ink); opacity:.72}
.brandwall .b:hover{opacity:1; border-color:var(--cyan)}

@media(max-width:1060px){
  .util .hide-sm{display:none}
}
@media(max-width:1320px){
  header a.brand img.brandlogo{height:68px !important}
  header .wrap{gap:20px; height:100px}
  nav.main{gap:15px} nav.main a{font-size:15px}
  .head-cta .btn{padding:11px 18px; font-size:14px}
}
@media(max-width:920px){
  .reviews{grid-template-columns:1fr}
  .logowall{gap:14px 24px; justify-content:center} .logowall .wm{font-size:16px}
  .hero{min-height:0}
  .hero-inner{padding-top:48px; padding-bottom:48px; align-items:flex-start; text-align:left}
  .hero .btns{justify-content:flex-start}
  .hero h1{font-size:40px} .hero .sub{max-width:none}
  .hero-scrim{background:linear-gradient(180deg, rgba(1,26,36,.35) 0%, rgba(1,26,36,.88) 100%)}
  .trust-grid{justify-content:center; text-align:center} .trust-lab{width:100%}
  .steps6 .wrap{grid-template-columns:repeat(2,1fr); gap:20px 24px}
  .do-grid{grid-template-columns:1fr}
  .serve-row{grid-template-columns:repeat(3,1fr); gap:30px 18px}
  .local{grid-template-columns:1fr}
  .local-copy{padding:36px 28px 8px}
  .local-map{min-height:400px}
  .cards{grid-template-columns:1fr}
  .asoda{min-height:0}
  .asoda-inner{padding-top:70px; padding-bottom:70px}
  .asoda-scrim{background:linear-gradient(180deg, rgba(1,26,36,.5) 0%, rgba(1,26,36,.9) 100%)}
  .fountain-grid{grid-template-columns:1fr 1fr; gap:30px}
  .custwall{gap:26px} .custwall img{height:36px; max-width:110px}
  .equip-grid{grid-template-columns:1fr; gap:34px}
  .stats{grid-template-columns:repeat(2,1fr); gap:34px}
  .steps{grid-template-columns:repeat(3,1fr); gap:26px}
  .step:after{display:none}
  nav.main{display:none}
  .fgrid{grid-template-columns:1fr 1fr; gap:30px}
  .section-head h2,.hero h1,.final h2{font-size:34px}
}
@media(max-width:640px){
  .util .hide-sm{display:none}
  .util a[href^="mailto"]{display:none}
  .util .wrap{gap:14px} .util{font-size:13px}
  header .wrap{gap:12px; height:76px; padding:0 16px}
  header a.brand img.brandlogo{height:48px !important}
  .head-cta .btn{padding:9px 14px; font-size:12.5px}
  .wrap{padding:0 18px}
  /* .wrap above resets padding on everything that is also a .wrap; give the hero bands theirs back */
  .hero .hero-inner{padding-top:72px; padding-bottom:56px}
  .asoda .asoda-inner{padding-top:64px; padding-bottom:64px}
  .hero h1{font-size:34px}
  .trust-title{font-size:11px}
  .logowall{gap:12px 20px} .logowall .blogo{max-height:30px; max-width:110px}
  .fgrid{grid-template-columns:1fr; gap:26px}
  .f-btns .btn{white-space:normal; text-align:center; line-height:1.35}
  .asoda-logo{width:min(320px,90%)}
  .fountain-grid{grid-template-columns:1fr}
  .f-mach img{max-width:220px}
  .crests{gap:18px} .crests img{height:38px}
  .equip h2{font-size:27px}
}
@media(max-width:520px){
  .serve-row{grid-template-columns:repeat(2,1fr)}
  .local-map{min-height:340px} .pin{font-size:10.5px} .pin-sf,.pin-sj{font-size:11.5px}
  .local-card{top:12px; right:12px; padding:10px 12px} .local-card img{height:36px} .local-card div{font-size:10.5px}
  .stats{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .util .hide-sm{display:none}
  .head-cta .store{display:none}
}

/* header fits the Order CTA */
@media(max-width:1560px){
  nav.main{gap:19px} nav.main a{font-size:16.5px}
  .head-cta .btn{padding:12px 20px; font-size:14.5px}
  header .wrap{gap:18px}
}
@media(max-width:1180px){
  nav.main a{font-size:15px} nav.main{gap:13px}
  header a.brand img.brandlogo{height:60px !important}
}
@media(max-width:920px){ .head-cta{display:none} }

/* FAQ (city and service pages) */
details.faq{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 22px;margin-bottom:10px}
details.faq summary{cursor:pointer;font-weight:700;font-size:16.5px;padding:18px 0;list-style:none;position:relative;padding-right:28px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:after{content:"+";position:absolute;right:0;top:14px;font-size:24px;color:var(--cyan-d);font-weight:400}
details.faq[open] summary:after{content:"–"}
details.faq p{margin:0 0 18px;font-size:15.5px}

/* beverage hero heading promoted h2 -> h1 */
.asoda-copy h1{color:#fff;font-size:clamp(28px,3.2vw,42px);letter-spacing:-.02em;margin-bottom:16px}

/* mobile nav (added for production) */
.mnav{display:none;margin-left:auto;position:relative}
.mnav>summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;flex-direction:column;
 justify-content:center;gap:5px;padding:0 10px;border-radius:10px}
.mnav>summary::-webkit-details-marker{display:none}
.mnav>summary span{display:block;height:2.5px;background:var(--ink);border-radius:2px}
.mnav[open]>summary{background:var(--mist)}
.mnav-panel{position:absolute;right:0;top:52px;background:#fff;border:1px solid var(--line);
 border-radius:14px;box-shadow:0 24px 48px -20px rgba(1,42,58,.35);padding:10px;min-width:230px;
 display:flex;flex-direction:column;z-index:60}
.mnav-panel a{padding:12px 14px;border-radius:9px;font-weight:700;color:var(--ink);font-size:15.5px}
.mnav-panel a:hover{background:var(--mist);color:var(--cyan-d)}
.skip{position:absolute;left:-9999px;top:0;background:var(--cyan);color:#fff;padding:12px 18px;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}
@media(max-width:920px){ .mnav{display:block} }

/* resource library */
.kb-wrap{max-width:820px;margin:0 auto}
.kb-body{overflow-wrap:break-word}
.kb-body a{word-break:break-word}
.kb-body a:not([class]){color:var(--cyan-d);text-decoration:underline;text-underline-offset:2px}
.kb-body a:not([class]):hover{color:var(--navy)}
.kb-body h2{font-size:26px;margin:38px 0 14px}
.kb-body h3{font-size:19px;margin:28px 0 10px}
.kb-body p{font-size:16.5px;line-height:1.72;margin-bottom:16px}
.kb-body ul,.kb-body ol{margin:0 0 18px 22px}
.kb-body li{font-size:16px;line-height:1.68;margin-bottom:9px}
.kb-body blockquote{border-left:4px solid var(--cyan);background:var(--mist);
 padding:16px 22px;border-radius:0 12px 12px 0;margin:22px 0}
.kb-body blockquote p{margin:0;font-size:16px}
.kb-body strong{color:var(--ink)}
.kb-body code{background:var(--mist);padding:2px 6px;border-radius:5px;font-size:.92em}
.kb-search{max-width:560px;margin:0 auto 34px}
.kb-search input{width:100%;padding:15px 20px;border:1px solid var(--line);border-radius:999px;
 font:inherit;font-size:16px;color:var(--ink);background:#fff;box-shadow:0 8px 22px -16px rgba(1,42,58,.4)}
.kb-search input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(19,169,221,.15)}
.kb-search p{text-align:center;font-size:13.5px;color:var(--slate);margin-top:12px;min-height:20px}
.kb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kb-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;transition:.2s;display:block}
.kb-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(1,42,58,.4);border-color:transparent}
.kb-card h3{font-size:16.5px;margin-bottom:8px}
.kb-card p{font-size:13.5px;line-height:1.55}
.kb-help{background:var(--mist);border:1px solid var(--line);border-radius:var(--r);
 padding:26px 30px;margin-top:44px;display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.kb-help h2,.kb-help h3{font-size:19px;margin-bottom:4px}
.kb-help p{font-size:14.5px}
@media(max-width:1000px){.kb-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.kb-grid{grid-template-columns:1fr}}

/* contact form */
.cform{margin-top:22px;max-width:560px}
.cform label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:14px}
.cform input,.cform select,.cform textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;
 border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px;font-weight:400;
 color:var(--ink);background:#fff}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--cyan);
 box-shadow:0 0 0 3px rgba(19,169,221,.15)}
.cform textarea{resize:vertical}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.cform button{margin-top:6px;cursor:pointer}
.cf-note{font-size:13px;color:var(--slate);margin-top:14px;font-weight:400}
.cf-note a{color:var(--cyan-d);font-weight:700}
.hp{position:absolute;left:-9999px}
@media(max-width:640px){.cf-row{grid-template-columns:1fr}}