/* ==========================================================================
   LaundryMate 2026 theme layer
   Loaded on every public page AFTER site.css. It re-skins the shared pieces
   (type, buttons, eyebrows, header, footer, page banners, WhatsApp button)
   so inner pages match the new homepage, without touching the page-specific
   rules in site.css that the booking wizard, pricing and account pages use.
   ========================================================================== */

:root {
  --midnight: #04111F;
  --navy: #0A2342;
  --brand: #0A57A2;
  --brand-2: #2C83DB;
  --brand-600: #1A6FC4;
  --brand-700: #084680;
  --aqua: #7FE7F5;
  --pearl: #F3F7FB;
  --gold: #E8B54A;
  --ink: #0C1A2C;
  --ink-2: #4F607A;
  --ink-3: #8797AC;
  --line: #E0E8F1;
  --on-dark: #EAF2FB;
  --on-dark-2: #9FB3CB;

  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --sh-1: 0 1px 2px rgba(12,26,44,.05), 0 4px 14px rgba(12,26,44,.06);
  --sh-2: 0 2px 6px rgba(12,26,44,.06), 0 18px 44px rgba(12,26,44,.12);
  --sh-3: 0 30px 80px rgba(4,17,31,.28);
  --hdr-h: 84px;
  --gut: clamp(20px, 5vw, 44px);
}

[hidden] { display: none !important; }
html, body { overflow-x: clip; }
/* The canvas behind the page. On a laptop touchpad (and on phones) the
   browser lets the page bounce past its top and bottom edges, and whatever
   colour sits here shows in that gap. It was the light page colour, which
   flashed a white band above the dark header. Midnight matches the hero and
   the footer, so the bounce is invisible. */
html { background: var(--midnight, #04111F); }
body { background: var(--paper, #F3F7FB); }
::selection { background: rgba(127,231,245,.45); color: var(--ink); }

h1, h2, h3, h4 { text-wrap: balance; }
h1 { letter-spacing: -.035em; }
h2 { letter-spacing: -.03em; }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
h1 .serif, h2 .serif { color: var(--brand); font-size: 1.1em; line-height: .9; }

.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- eyebrow: small mono label with a water drop ---------- */
.eyebrow {
  background: none; padding: 0; border-radius: 0;
  font-family: var(--font-mono); font-weight: 500;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand); gap: .6rem;
}
.eyebrow::before {
  width: 7px; height: 9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: rotate(180deg);
}
.section--ink .eyebrow, .on-dark .eyebrow { background: none; color: var(--aqua); }

/* ---------- buttons ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  border-width: 1px; font-weight: 650;
  transition: transform .35s var(--spring), box-shadow .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn .ico { width: 19px; height: 19px; }
.btn--primary {
  background: linear-gradient(180deg, #2E86DE 0%, #0A57A2 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 28px rgba(10,87,162,.34);
}
.btn--primary::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .9s var(--ease);
}
.btn--primary:hover { background: linear-gradient(180deg, #3A90E4 0%, #0C5EAE 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 36px rgba(10,87,162,.42); }
.btn--primary:hover::after { transform: translateX(120%); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--sh-1); }
.btn--ghost:hover { border-color: var(--brand-2); color: var(--brand); box-shadow: var(--sh-2); }
.btn--glass { color: var(--on-dark); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn--glass:hover { color: #fff; background: rgba(255,255,255,.13); }
.btn--light, .btn--white { background: #fff; color: var(--brand); box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.btn--light:hover, .btn--white:hover { background: #fff; color: var(--brand-700); }
.btn--wa { color: #062A1E; background: linear-gradient(180deg, #6BF0B4, #25D366); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 28px rgba(37,211,102,.25); }
.btn--wa:hover { color: #062A1E; background: linear-gradient(180deg, #7AF4BE, #2BDB6E); }
.btn--sm { border-width: 1px; }

/* ==========================================================================
   HEADER: open bar at the top of a dark hero; midnight glass, edge to edge,
   once the page scrolls (and from the start on pages with a light top).
   The header box keeps one height so nothing below it jumps; only the bar
   inside it slims down.
   ========================================================================== */
.hdr {
  position: sticky; z-index: 90; top: env(safe-area-inset-top, 0px);
  height: var(--hdr-h); pointer-events: none;
}
/* the glass: full width, behind the bar */
.hdr::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 66px; pointer-events: none;
  background: rgba(5,18,34,.94);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 18px 40px rgba(4,17,31,.28);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
/* thin aqua glow along the bottom edge of the glass */
.hdr::after {
  content: ''; position: absolute; left: 0; right: 0; top: 65px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(127,231,245,.55) 30%, rgba(44,131,219,.6) 70%, transparent);
  opacity: 0; transition: opacity .45s var(--ease);
}
.hdr.is-solid::before { opacity: 1; transform: none; }
.hdr.is-solid::after { opacity: 1; }
.hdr .wrap { position: relative; z-index: 1; }

.hdr__bar {
  pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem;
  height: 84px; border-bottom: 1px solid rgba(255,255,255,.1);
  transition: height .45s var(--ease), border-color .45s;
}
.hdr.is-solid .hdr__bar { height: 66px; border-bottom-color: transparent; }

.hbrand { position: relative; width: 120px; height: 52px; flex: none; transition: width .45s var(--ease), height .45s var(--ease); }
.hbrand img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.hbrand .logo-c { display: none; }
.hdr.is-solid .hbrand { width: 100px; height: 42px; }

.hnav { display: flex; justify-content: center; gap: clamp(1.1rem, 2.4vw, 2.2rem); }
.hnav a { position: relative; padding: .45rem 0; font-size: .95rem; font-weight: 550; color: var(--on-dark-2); white-space: nowrap; transition: color .25s; }
.hnav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, var(--aqua), var(--brand-2));
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.hnav a:hover { color: #fff; }
.hnav a:hover::after { transform: scaleX(1); }
.hnav a.is-active { color: #fff; font-weight: 650; }
.hnav a.is-active::after { transform: scaleX(1); }

.hdr__end { display: flex; align-items: center; gap: .55rem; justify-self: end; }
.hacct {
  display: inline-flex; align-items: center; gap: .6rem; padding: 4px 12px 4px 4px; border-radius: 999px;
  font-weight: 650; font-size: .93rem; color: #fff; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  transition: background .3s, border-color .3s;
}
.hacct:hover { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24); }
.hacct__av {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 750; font-size: .85rem; color: var(--midnight);
  background: linear-gradient(160deg, #D9FAFE, var(--aqua)); box-shadow: 0 0 0 2px rgba(127,231,245,.25);
}
.hacct__av .ico { width: 16px; height: 16px; }
.hacct--out .hacct__av { color: #fff; background: rgba(255,255,255,.1); box-shadow: none; }
.hacct__chev { width: 14px; height: 14px; opacity: .6; }

.burger { display: none; width: 42px; height: 42px; border-radius: 50%; place-items: center; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.2); cursor: pointer; transition: background .3s; }
.burger:hover { background: rgba(255,255,255,.08); }
.burger span, .burger span::before, .burger span::after { content: ''; display: block; width: 17px; height: 1.8px; border-radius: 2px; background: currentColor; position: relative; transition: transform .3s var(--ease), background .3s; }
.burger span::before { position: absolute; top: -6px; }
.burger span::after { position: absolute; top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* phone menu: the same midnight glass */
.hsheet {
  pointer-events: auto; position: absolute; left: var(--gut); right: var(--gut); top: 76px;
  display: grid; gap: 2px; padding: 10px; border-radius: 22px;
  background: rgba(5,18,34,.97); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 30px 70px rgba(4,17,31,.45); max-height: calc(100vh - 120px); overflow: auto;
  animation: hsheetIn .35s var(--spring);
}
@keyframes hsheetIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.hsheet a { display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; border-radius: 14px; font-weight: 600; color: var(--on-dark); }
.hsheet a:hover { background: rgba(255,255,255,.06); color: #fff; }
.hsheet a.is-active { color: #fff; background: linear-gradient(90deg, rgba(127,231,245,.14), rgba(44,131,219,.06)); box-shadow: inset 2px 0 0 var(--aqua); }
.hsheet__acct { margin-top: 6px; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0 0 14px 14px !important; padding-top: 1rem !important; }
.hsheet__acct .ico { color: var(--aqua); }

/* pages without a dark hero or banner start with the glass already on */
body:not(:has(.lm-hero, main > .page-banner)) .hdr::before { opacity: 1; transform: none; }
body:not(:has(.lm-hero, main > .page-banner)) .hdr::after { opacity: 1; }
body:not(:has(.lm-hero, main > .page-banner)) .hdr__bar { height: 66px; border-bottom-color: transparent; }
body:not(:has(.lm-hero, main > .page-banner)) .hbrand { width: 100px; height: 42px; }

@media (max-width: 1080px) {
  .hnav { display: none; }
  .burger { display: grid; }
  .hacct__nm, .hacct__chev { display: none; }
  .hacct { padding: 3px; }
}
@media (max-width: 600px) {
  :root { --hdr-h: 76px; }
  .hdr__bar { height: 70px; }
  .hbrand { width: 100px; height: 44px; }
  .hdr.is-solid .hbrand { width: 86px; height: 36px; }
  .hdr.is-solid .hdr__bar { height: 60px; }
  .hdr::before { height: 60px; }
  .hdr::after { top: 59px; }
  .hsheet { top: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .hdr::before, .hdr::after, .hdr__bar, .hbrand { transition: none; }
}

/* the old top bar and header are replaced; hide them if a cached template still prints them */
.topbar, .site-header { display: none; }

/* ==========================================================================
   INNER PAGE BANNER: slides up under the glass header, same night palette
   as the homepage hero, with the faint laundromat tile wall.
   ========================================================================== */
main > .page-banner { margin-top: calc(-1 * var(--hdr-h)); }
.page-banner {
  min-height: calc(300px + var(--hdr-h)); max-height: calc(470px + var(--hdr-h));
  padding-top: var(--hdr-h); background: var(--midnight);
}
.page-banner::before {
  background:
    linear-gradient(100deg, rgba(4,17,31,.94) 0%, rgba(6,22,42,.82) 40%, rgba(10,35,66,.55) 72%, rgba(10,87,162,.35) 100%);
}
.page-banner::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.page-banner h1 { font-size: clamp(2.3rem, 4.8vw, 3.8rem); font-weight: 720; letter-spacing: -.04em; line-height: 1.02; }
.page-banner h1 .serif { color: var(--aqua); }
.page-banner p { color: var(--on-dark-2); }
@media (max-width: 640px) {
  .page-banner { min-height: calc(240px + var(--hdr-h)); }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr { margin-top: clamp(70px, 9vw, 120px); background: var(--midnight); color: var(--on-dark-2); padding-block: 80px 30px; position: relative; overflow: hidden; }
.ftr::before { content: ''; position: absolute; right: -10%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(44,131,219,.18), transparent); pointer-events: none; }
.ftr .wrap { position: relative; }
.ftr__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 3rem; }
.ftr__logo { width: 160px; height: auto; }
.ftr p { margin: 1rem 0 0; font-size: .94rem; max-width: 22rem; line-height: 1.7; }
.ftr h4 { color: #fff; font-size: .95rem; letter-spacing: 0; margin: 0 0 1rem; font-weight: 650; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; font-size: .94rem; }
.ftr a { color: var(--on-dark-2); }
.ftr a:hover { color: #fff; }
.ftr__contact li { display: flex; gap: .6rem; align-items: flex-start; }
.ftr__contact .ico { width: 17px; height: 17px; margin-top: .2rem; color: var(--aqua); }
.ftr__base { margin-top: 60px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }
.fsocials { display: flex; gap: .5rem; margin-top: 1.4rem; }
.fsocials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); color: var(--on-dark); transition: background .25s, color .25s; }
.fsocials a:hover { background: #fff; color: var(--midnight); }
.fsocials .ico { width: 18px; height: 18px; }
@media (max-width: 1000px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ftr__grid { grid-template-columns: 1fr; gap: 2.2rem; } .ftr { padding-block: 60px 26px; } }

/* WhatsApp button */
.lm-fab {
  position: fixed; z-index: 80;
  right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: linear-gradient(180deg, #3BE07D, #1FAF54);
  box-shadow: 0 14px 34px rgba(37,211,102,.4); transition: transform .4s var(--spring);
}
.lm-fab:hover { color: #fff; transform: scale(1.08) rotate(-6deg); }
.lm-fab .ico { width: 30px; height: 30px; }

@media (prefers-reduced-motion: reduce) {
  .btn--primary::after, .hsheet { transition: none; animation: none; }
}