/* Elite Power-Vac — Big Type, Bold Color.
   Whole sections drenched in the logo's slate and lime, very large heavy type,
   few words. The phone number is set as big as the headline. White is a
   resting field between color blocks, never a card. */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Saira"; src: url("../fonts/saira.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 125%; font-style: normal; font-display: swap; }

:root {
  --slate: #333d3e;
  --slate-2: #404b4c;
  --slate-3: #4d5a5b;
  --lime: #8dc63c;
  --lime-2: #a2d45e;
  --ink: #1b2223;
  --white: #ffffff;
  --paper: #f5f7f3;
  --on-slate: #ffffff;
  --on-slate-2: #c4cfce;
  --on-lime-2: #2c3a1a;
  --green-text: #3b7811;
  --rust: #c4482b;

  --text: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mark: "Saira", "Archivo", sans-serif;
  --wrap: 1360px;
  --gutter: clamp(18px, 4.5vw, 56px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; scrollbar-color: var(--slate-3) var(--paper); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--text); font-stretch: 100%; font-size: 1.125rem; line-height: 1.6; caret-color: var(--green-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 3px solid var(--green-text); outline-offset: 4px; }
.on-slate :focus-visible { outline-color: var(--lime); }
.on-lime :focus-visible { outline-color: var(--ink); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--slate-3); border: 3px solid var(--paper); border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lime); color: var(--ink); padding: 10px 16px; font-weight: 800; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* color fields */
.on-slate { background: var(--slate); color: var(--on-slate); }
.on-lime { background: var(--lime); color: var(--ink); }
.on-white { background: var(--white); color: var(--ink); }
.on-paper { background: var(--paper); color: var(--ink); }

/* type: one heavy voice, three sizes */
.mega, .big, .mid { margin: 0; font-weight: 870; font-stretch: 110%; letter-spacing: -.035em; text-wrap: balance; }
.mega { font-size: clamp(3rem, 8.4vw, 6rem); line-height: .94; }
.big { font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: .98; }
.mid { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.08; letter-spacing: -.025em; }
.lime { color: var(--lime); }
.body { font-size: clamp(1.1rem, 1.35vw, 1.25rem); line-height: 1.6; max-width: 46ch; }
.on-slate .body { color: var(--on-slate-2); }
.on-lime .body { color: var(--on-lime-2); }
.on-white .body, .on-paper .body { color: #4a5657; }

/* ---------- Header ---------- */
.cab { position: absolute; inset: 0 0 auto 0; z-index: 30; color: #fff; }
.cab .wrap { display: flex; align-items: center; gap: 28px; min-height: 88px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand svg { width: 44px; height: 44px; color: #fff; --mark-cut: var(--slate); }
.wordmark { font-family: var(--mark); font-weight: 760; font-stretch: 72%; text-transform: uppercase; font-size: 1.55rem; letter-spacing: .05em; line-height: 1; white-space: nowrap; }
.wordmark .w1 { color: #fff; }
.wordmark .w2 { color: var(--lime); }
.cab-nav { display: flex; gap: 26px; margin-left: auto; }
.cab-nav a { font-weight: 700; font-size: 1rem; text-decoration: none; color: var(--on-slate-2); padding: 8px 0; background: linear-gradient(var(--lime), var(--lime)) left bottom / 0 3px no-repeat; transition: color .2s, background-size .35s var(--ease-out); }
.cab-nav a:hover, .cab-nav a[aria-current="page"] { color: #fff; background-size: 100% 3px; }
.cab-phone { font-weight: 850; font-stretch: 105%; font-size: 1.15rem; text-decoration: none; color: var(--lime); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cab-phone:hover { color: #fff; }
.menu-btn, .drawer { display: none; }
@media (max-width: 1120px) {
  .cab-nav, .cab-phone { display: none; }
  .cab .wrap { min-height: 72px; }
  .brand svg { width: 38px; height: 38px; }
  .wordmark { font-size: 1.3rem; }
  .menu-btn { display: inline-flex; margin-left: auto; align-items: center; gap: 8px; background: none; border: 2px solid rgba(255,255,255,.5); color: #fff; font: 800 .95rem/1 var(--text); padding: 10px 14px; cursor: pointer; }
  .menu-btn .icon { width: 20px; height: 20px; }
  .menu-btn .i-close { display: none; }
  .menu-btn[aria-expanded="true"] .i-close { display: block; }
  .menu-btn[aria-expanded="true"] .i-menu { display: none; }
  .drawer { display: block; background: var(--slate); border-top: 1px solid rgba(255,255,255,.14); }
  .drawer[hidden] { display: none; }
  .drawer nav { display: grid; padding: 4px var(--gutter) 22px; }
  .drawer a { font-weight: 870; font-stretch: 110%; letter-spacing: -.02em; font-size: 1.9rem; line-height: 1.15; color: #fff; text-decoration: none; padding: 10px 0; }
  .drawer a[aria-current="page"] { color: var(--lime); }
}

/* ---------- Hero: a full slate field ---------- */
.hero { padding-block: clamp(128px, 15vw, 190px) clamp(64px, 8vw, 110px); position: relative; overflow: hidden; }
.hero .mega > span { display: block; }
.hero .body { margin: clamp(30px, 4vw, 52px) 0 0; }
.crumbs { margin: 0 0 18px; font-weight: 700; font-size: .95rem; color: var(--on-slate-2); }
.crumbs a { color: var(--on-slate-2); text-decoration: none; }
.crumbs a:hover { color: var(--lime); }

/* the two actions, set as type at the same size */
.acts { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: clamp(16px, 4vw, 56px); margin-top: clamp(36px, 5vw, 64px); align-items: end; }
.act { display: block; text-decoration: none; padding-bottom: 12px; background: linear-gradient(currentColor, currentColor) left bottom / 100% 5px no-repeat; transition: background-size .45s var(--ease-out), color .2s; }
.act .what { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 1rem; margin-bottom: 8px; }
.act .what .icon { width: 20px; height: 20px; }
.act .how { display: flex; align-items: center; gap: .25em; font-weight: 880; font-stretch: 108%; letter-spacing: -.03em; font-size: clamp(2.1rem, 5vw, 4.2rem); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.act .how .icon { width: .6em; height: .6em; stroke-width: 2.6; transition: transform .45s var(--ease-out); }
.act:hover .how .icon { transform: translateX(.12em); }
.act:hover { background-size: 30% 5px; }
.on-slate .act-call { color: var(--lime); }
.on-slate .act-book { color: #fff; }
.on-lime .act-call { color: var(--ink); }
.on-lime .act-book { color: var(--ink); }
.act .what { color: inherit; opacity: .85; }

.status { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; font-size: 1rem; margin-top: clamp(28px, 3.5vw, 40px); }
.status[hidden] { display: none; }
.lamp { width: 11px; height: 11px; border-radius: 50%; background: #8a9695; flex: none; }
.status.is-open .lamp { background: var(--lime); box-shadow: 0 0 0 4px rgba(141,198,60,.28); }
.on-lime .status.is-open .lamp { background: var(--ink); box-shadow: 0 0 0 4px rgba(27,34,35,.18); }

/* entrance: the headline lines rise once, only when the page is visible */
@media (prefers-reduced-motion: no-preference) {
  .anim .hero .mega > span { animation: rise .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
  .anim .hero .acts { animation: rise .9s var(--ease-out) both .42s; }
  @keyframes rise { from { transform: translateY(.4em); } to { transform: none; } }
}

/* ---------- Service bands: half photo, half color ---------- */
.band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(460px, 48vw, 660px); }
.band .ph { position: relative; overflow: hidden; background: var(--slate-2); }
.band .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band .tx { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 96px) clamp(24px, 5.5vw, 88px); }
.band .tx .body { margin: 22px 0 0; }
.band.flip .ph { order: 2; }
.band .go, .statement .go { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; font-weight: 850; font-size: 1.15rem; text-decoration: none; align-self: flex-start; padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) left bottom / 100% 3px no-repeat; transition: background-size .4s var(--ease-out); }
.band .go .icon, .statement .go .icon { width: 22px; height: 22px; transition: transform .4s var(--ease-out); }
.band .go:hover, .statement .go:hover { background-size: 40% 3px; }
.band .go:hover .icon, .statement .go:hover .icon { transform: translateX(5px); }
.band h2 a { text-decoration: none; }

/* ---------- Statements ---------- */
.statement { padding-block: clamp(80px, 10vw, 150px); }
.statement .big { max-width: 17ch; }
.statement .big em { font-style: normal; color: var(--rust); }
.statement .body { margin-top: 26px; }
.split { display: grid; grid-template-columns: 60fr 40fr; height: clamp(22px, 2.6vw, 30px); margin-top: clamp(36px, 5vw, 56px); max-width: 980px; }
.split .a { background: var(--lime); }
.split .b { background: repeating-linear-gradient(-45deg, var(--rust) 0 10px, #a93a20 10px 20px); }
.split-key { display: grid; grid-template-columns: 60fr 40fr; max-width: 980px; margin-top: 12px; font-weight: 750; font-size: 1rem; }
.split-key span:last-child { color: var(--rust); }

/* ---------- Proof ---------- */
.proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.proof .ph { background: #222a2b; }
.proof .ph img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.proof .tx { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 96px) clamp(24px, 5.5vw, 88px); }
.proof .tx .body { margin-top: 22px; }

/* ---------- Reviews: one voice at a time, large ---------- */
.reviews { padding-block: clamp(80px, 10vw, 140px); }
.reviews ol { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; gap: clamp(40px, 5vw, 64px); }
.reviews blockquote { margin: 0; }
.reviews blockquote p { margin: 0; font-weight: 780; font-stretch: 104%; letter-spacing: -.02em; font-size: clamp(1.45rem, 2.8vw, 2.3rem); line-height: 1.22; max-width: 34ch; text-wrap: pretty; }
.reviews cite { display: block; margin-top: 14px; font-style: normal; font-weight: 750; font-size: 1rem; color: var(--on-lime-2); }
.reviews .more-links { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: clamp(40px, 5vw, 64px); }
.reviews .more-links a { display: inline-flex; align-items: center; gap: 10px; font-weight: 850; font-size: 1.1rem; text-decoration: none; padding-bottom: 5px; background: linear-gradient(var(--ink), var(--ink)) left bottom / 100% 3px no-repeat; transition: background-size .4s var(--ease-out); }
.reviews .more-links a:hover { background-size: 40% 3px; }
.reviews .more-links .icon { width: 20px; height: 20px; }

/* ---------- Visit: hours, address, pay ---------- */
.visit { padding-block: clamp(80px, 10vw, 140px); }
.visit-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); margin-top: clamp(40px, 5vw, 64px); }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th, .hours td { text-align: left; padding: 18px 0; border-bottom: 2px solid rgba(255,255,255,.14); font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 800; letter-spacing: -.01em; }
.hours td { text-align: right; color: var(--on-slate-2); font-weight: 700; }
.hours tr.closed th, .hours tr.closed td { color: #a9b4b3; }
.hours tr.today th, .hours tr.today td { color: var(--lime); }
.visit dl { margin: 0; display: grid; gap: 26px; }
.visit dt { font-weight: 750; font-size: .95rem; color: var(--on-slate-2); margin-bottom: 6px; }
.visit dd { margin: 0; font-weight: 800; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.4; }
.visit dd a { text-decoration: none; background: linear-gradient(var(--lime), var(--lime)) left bottom / 100% 2px no-repeat; padding-bottom: 2px; }
.visit dd a:hover { color: var(--lime); }

/* ---------- Footer: the wordmark across the width ---------- */
.foot { padding-block: clamp(56px, 7vw, 96px) 28px; overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; font-weight: 700; }
.foot-grid h2 { margin: 0 0 12px; font-size: .95rem; font-weight: 800; color: var(--on-lime-2); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.foot-mark { margin: clamp(48px, 6vw, 80px) 0 0; font-family: var(--mark); font-weight: 800; font-stretch: 66%; text-transform: uppercase; letter-spacing: .02em; line-height: .8; font-size: clamp(3.4rem, 14.6vw, 14.2rem); white-space: nowrap; color: var(--ink); }
.foot-mark span { color: var(--white); }
.foot-base { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .92rem; font-weight: 700; color: var(--on-lime-2); }

/* ---------- Other services: giant links ---------- */
.others { padding-block: clamp(64px, 8vw, 110px); }
.others ul { list-style: none; margin: 18px 0 0; padding: 0; }
.others li + li { border-top: 2px solid rgba(27,34,35,.12); }
.others a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; text-decoration: none; }
.others a .icon { width: clamp(28px, 3vw, 44px); height: clamp(28px, 3vw, 44px); transition: transform .4s var(--ease-out); }
.others a:hover { color: var(--green-text); }
.others a:hover .icon { transform: translateX(8px); }
.others .label { font-weight: 800; font-size: 1rem; color: #4a5657; }

/* ---------- Service page facts ---------- */
.facts { padding-block: clamp(80px, 10vw, 140px); }
.facts ol { list-style: none; margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; display: grid; gap: 0; }
.facts li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 64px); padding: clamp(24px, 3vw, 36px) 0; border-top: 3px solid var(--ink); }
.facts li:last-child { border-bottom: 3px solid var(--ink); }
.facts h3 { margin: 0; }
.facts p { margin: 0; font-size: clamp(1.1rem, 1.35vw, 1.25rem); color: #4a5657; }
.facts .hz h3 { color: var(--rust); }

/* ---------- Mobile dock ---------- */
.dock { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 72px; }
  .dock { display: grid; grid-template-columns: 1fr 1fr; position: fixed; inset: auto 0 0 0; z-index: 50; padding-bottom: env(safe-area-inset-bottom); background: var(--slate); transition: transform .45s var(--ease-out), opacity .3s; }
  .dock.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
  .dock a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; text-decoration: none; font-weight: 880; font-stretch: 106%; letter-spacing: -.01em; font-size: 1.15rem; }
  .dock .icon { width: 20px; height: 20px; }
  .dock .d-call { background: var(--slate); color: var(--lime); }
  .dock .d-book { background: var(--lime); color: var(--ink); }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .band, .proof { grid-template-columns: 1fr; min-height: 0; }
  .band .ph { aspect-ratio: 4 / 3; }
  .band.flip .ph { order: 0; }
  .visit-grid { grid-template-columns: 1fr; }
  .facts li { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 640px) {
  .acts { grid-template-columns: 1fr; gap: 26px; }
  .act .how { font-size: clamp(2rem, 10.5vw, 2.8rem); }
  .foot-grid { grid-template-columns: 1fr; }
}

@media print { .cab, .dock { display: none !important; } .on-slate, .on-lime { background: #fff; color: #000; } }
/* heavy display type at tight leading: keep descenders clear of what follows */
.mega { padding-bottom: .14em; }
.big { padding-bottom: .08em; }

/* ---------- polish ---------- */
.proof-quote { color: var(--ink) !important; font-weight: 750; }
.proof-quote span { color: #4a5657; font-weight: 600; }
.status { padding-left: 4px; }
.cab.on-slate { background: transparent; }
.drawer { position: relative; z-index: 1; }

/* service heroes: the service's own photo bleeds off the right edge */
.hero--photo .hero-ph { position: absolute; top: 88px; right: 0; bottom: 0; width: 40%; overflow: hidden; }
.hero--photo .hero-ph img { width: 100%; height: 100%; object-fit: cover; }
.hero--photo .hero-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--slate) 0%, rgba(51,61,62,0) 22%); }
.hero--photo .wrap > * { max-width: 58%; }
.hero--photo .acts { grid-template-columns: max-content; gap: 28px; }
@media (max-width: 900px) {
  .hero--photo { padding-bottom: 0; }
  .hero--photo .wrap > * { max-width: none; }
  .hero--photo .hero-ph { position: relative; width: auto; aspect-ratio: 4 / 3; margin-top: 48px; order: 2; }
  .hero--photo .hero-ph::after { background: linear-gradient(180deg, var(--slate) 0%, rgba(51,61,62,0) 18%); }
  .hero--photo { display: flex; flex-direction: column; }
}

/* final review fixes */
.hero .body { text-wrap: pretty; }
.hero--photo .hero-ph { width: min(40%, 520px); }
.hero--photo .hero-ph img { object-position: 55% 30%; }
@media (max-width: 900px) {
  .hero--photo .hero-ph { width: auto; margin-top: 32px; }
  .hero--photo .status { margin-bottom: 0; }
  .proof .tx { order: -1; }
}
@media (max-width: 900px) { .hero--photo .hero-ph::after { background: linear-gradient(180deg, var(--slate) 0%, rgba(51,61,62,0) 7%); } .hero--photo .hero-ph { margin-top: 24px; } }
/* phones: the photo flows after the actions (no desktop header offset), and
   in every photo/text band the text comes first, so photos never touch */
@media (max-width: 900px) {
  .hero--photo .hero-ph { top: 0; }
  .band .tx { order: -1; }
}

/* SEO pass: service headlines carry the town, so they run longer */
.hero--photo .mega { font-size: clamp(2.6rem, 6.2vw, 4.9rem); }

/* booking page: the Square calendar on a white field */
.booking { padding-block: clamp(64px, 8vw, 120px); }
.booking-widget { margin-top: clamp(28px, 4vw, 44px); min-height: 72px; }
.booking-widget iframe { width: 100% !important; max-width: 100%; border: 0; }
.booking-help { margin-top: 28px; }
.booking-help a, .booking-widget a { color: var(--green-text); font-weight: 750; }

/* Square's "Book Appointment Now" button, restyled into the site's type */
.booking-widget > div { text-align: left !important; }
.booking-widget a[href*="squareup.com"] { display: inline-flex !important; align-items: center; height: auto !important; line-height: 1 !important; padding: 24px 34px !important; border-radius: 0 !important; background: var(--lime) !important; color: var(--ink) !important; font-family: var(--text) !important; font-weight: 880 !important; font-stretch: 108%; letter-spacing: -.02em; font-size: clamp(1.5rem, 3vw, 2.3rem) !important; transition: background-color .2s; }
.booking-widget a[href*="squareup.com"]:hover { background: var(--lime-2) !important; }
.booking-widget a[href*="squareup.com"]:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.booking-widget iframe { min-height: 560px !important; }
@media (max-width: 760px) { .booking-widget iframe { min-height: 780px !important; } }

/* three actions: Call, Book, Pay at equal size */
.acts { grid-template-columns: repeat(3, minmax(0, max-content)); column-gap: clamp(20px, 3.4vw, 52px); }
.act .how { font-size: clamp(1.9rem, 3.5vw, 3.1rem); }
.on-slate .act-pay { color: #fff; }
.on-lime .act-pay { color: var(--ink); }
.hero--photo .acts { grid-template-columns: max-content; }
@media (max-width: 1180px) { .acts { grid-template-columns: repeat(2, minmax(0, max-content)); row-gap: 30px; } }
@media (max-width: 640px) { .acts { grid-template-columns: 1fr; } .act .how { font-size: clamp(2rem, 10vw, 2.6rem); } }
@media (max-width: 760px) {
  .dock { grid-template-columns: 1fr 1fr 1fr; }
  .dock a { font-size: 1.05rem; gap: 8px; }
  .dock .d-pay { background: var(--slate-2); color: #fff; border-left: 1px solid rgba(255,255,255,.12); }
  .dock .d-pay .icon { color: var(--lime); }
}

/* ---------- Touch targets and dock clearance ---------- */
/* Small text links keep their look but get a thumb-sized hit area. */
.crumbs a, .visit dd a { position: relative; }
.crumbs a::before, .visit dd a::before { content: ""; position: absolute; inset: -12px -6px; }
@media (max-width: 760px) {
  /* Clear the Call/Book/Pay bar, including the iPhone home-indicator inset. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom) + 20px); }
  .foot ul { gap: 0; }
  .foot ul a { display: block; padding-block: 8px; }
  .foot-grid h2 { margin-bottom: 2px; }
}

/* ---------- Pay online, always in reach ---------- */
/* A solid lime button in the header on every page, and at the foot of the phone menu. */
.cab-pay { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 48px; padding: 0 20px; background: var(--lime); color: var(--ink); font-weight: 850; font-stretch: 105%; font-size: 1.05rem; text-decoration: none; white-space: nowrap; transition: background-color .2s; }
.cab-pay .icon { width: 20px; height: 20px; }
.cab-pay:hover { background: var(--lime-2); }
.cab-pay:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 1120px) {
  .cab-pay { display: none; }
  .drawer .drawer-pay { display: flex; align-items: center; gap: 12px; margin: 0 var(--gutter) 24px; padding: 18px 20px; background: var(--lime); color: var(--ink); font-size: 1.6rem; }
  .drawer .drawer-pay .icon { width: 26px; height: 26px; }
  .drawer .drawer-pay .icon:last-child { margin-left: auto; }
}
/* Pay's card icon picks up the lime on dark bands, so it reads as its own action */
.on-slate .act-pay .what .icon { color: var(--lime); }
/* keep the header on one line between the phone menu and full desktop */
.cab-nav a { white-space: nowrap; }
@media (min-width: 1121px) and (max-width: 1300px) {
  .cab .wrap { gap: 18px; }
  .cab-nav { gap: 16px; }
  .cab-nav a { font-size: .95rem; }
  .cab-pay { padding: 0 16px; }
}
@media (max-width: 1120px) { .drawer { border-bottom: 1px solid rgba(255,255,255,.14); } }

/* <picture> wrappers stay out of layout so image rules apply as before */
picture { display: contents; }