/* ==========================================================================
   Auckland Laundry - design system
   Ported from The Mortgage Advisers (header, reveal, cards, split, marquee,
   reviews slider, FAQ, modal) with the MEOS quickbar + booking flow.
   Brand: ink navy + warm gold accent on paper (the earlier aqua build is scheme 1 in build.py's SCHEMES). Swap --accent to #C4A24D and
   --accent-deep to #A8862F and the whole site reads exactly like TMA's gold.
   ========================================================================== */

/* ============ TOKENS ============ */
:root{
  --navy-950:#071223;
  --navy-900:#0C1D38;
  --navy-850:#182842;
  --navy-800:#24344C;
  --navy-700:#414F64;
  --accent:#C4A24D;          /* warm gold */
  --accent-deep:#897136;     /* text-on-white version, 4.6:1 */
  --accent-pale:#ECE1C6;     /* text on navy */
  --paper:#F8F6F1;
  --white:#FFFFFF;
  --ink:#1E2739;
  --muted:#5D6370;
  --line:#E0E1E3;
  --line-accent:rgba(196,162,77,.4);
  --line-navy:rgba(236,225,198,.16);
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Inter Tight","Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1320px;
  --radius:12px;
  --shadow:0 18px 45px -18px rgba(12,29,56,.22);
  --ease:cubic-bezier(.22,.8,.3,1);
  --wa:#25D366;
  /* tokens added so a colour scheme can be swapped by overriding variables only */
  --accent-rgb:196,162,77; --pale-rgb:236,225,198; --deep-rgb:137,113,54;
  --navy-rgb:12,29,56; --navy950-rgb:7,18,35; --navy700-rgb:65,79,100;
  --hero-end:#1F2F48;          /* last stop of the dark hero gradient */
  --on-accent:#071223; /* text/icon colour on an accent-coloured button */
  --tint:#FFFFFF;              /* page background behind plain (non-paper) sections */
  --d1:#ECEDEF; --d2:#DFE2E5; --d3:#CACDD3; --d4:#B1B7BF; --d5:#8A939F; /* text shades on dark sections, lightest to dimmest */
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--tint);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
input,select,textarea{font:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,3vw,48px)}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.025em}
h2{font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.14;color:var(--navy-900);text-wrap:balance}
h3{font-weight:600;letter-spacing:-.01em}
.ai{font-style:italic;color:var(--accent-deep)}
.on-navy .ai{color:var(--accent-pale)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:1.1rem}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.on-navy .eyebrow{color:var(--accent-pale)}
.section-head.center .eyebrow::before{display:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.95rem 1.7rem;border-radius:8px;font-weight:600;font-size:.95rem;letter-spacing:.01em;border:1px solid transparent;text-align:center;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.btn-accent{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-pale);border-color:var(--accent-pale);box-shadow:0 12px 28px -10px rgba(var(--accent-rgb),.6)}
.btn-outline{border-color:var(--line-accent);color:var(--navy-900)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-deep)}
.hero .btn-outline,.on-navy .btn-outline{border-color:rgba(var(--pale-rgb),.45);color:var(--accent-pale)}
.hero .btn-outline:hover,.on-navy .btn-outline:hover{border-color:var(--accent-pale);background:rgba(var(--pale-rgb),.08)}
.btn-navy{background:var(--navy-900);color:#fff}
.btn-navy:hover{background:var(--navy-700)}
.btn-lg{padding:1.1rem 2.1rem;font-size:1.02rem}
.btn .arrow{display:none}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ============ HEADER ============ */
.header{position:fixed;top:0;left:0;right:0;z-index:80;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.header.scrolled{box-shadow:0 10px 30px -18px rgba(var(--navy-rgb),.35)}
.header.at-top{background:transparent;backdrop-filter:none;border-bottom-color:transparent;box-shadow:none}
.header.hidden{transform:translateY(-100%)}
.header .wrap{display:flex;align-items:center;min-height:76px;gap:1.2rem}
.brand{display:flex;align-items:center;position:relative;z-index:80;flex:none}
.brand img{display:block;height:48px;width:auto}
.brand .wm-light,.header.at-top .brand .wm-dark{display:none}
.header.at-top .brand .wm-light,.f-brand .brand .wm-light{display:block}
@media (max-width:640px){.header .brand img{height:40px}}
.nav{display:flex;align-items:center;margin-left:auto}
.nav > ul{display:flex;align-items:center;gap:.2rem}
.nav > ul > li{position:relative}
.nav-link{display:flex;align-items:center;gap:.35rem;padding:.55rem .8rem;font-size:.92rem;font-weight:500;color:var(--navy-900);border-radius:6px;transition:color .2s;white-space:nowrap}
.nav-link:hover{color:var(--accent-deep)}
.header.at-top .nav-link{color:var(--d1)}
.header.at-top .nav-link:hover{color:var(--accent-pale)}
.nav-link .caret{position:relative;flex:none;width:10px;height:10px} /* + when closed, - when open */
.nav-link .caret::before,.nav-link .caret::after{content:"";position:absolute;left:0;top:50%;width:10px;height:1.6px;margin-top:-.8px;border-radius:1px;background:currentColor;transition:transform .25s var(--ease),opacity .2s}
.nav-link .caret::after{transform:rotate(90deg)}
.has-mega.open > .nav-link .caret::after,.has-mega:hover > .nav-link .caret::after,.has-mega:focus-within > .nav-link .caret::after{transform:rotate(0);opacity:0}
.mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(calc(-50% + var(--shift,0px)),8px);min-width:300px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 30px 60px -20px rgba(var(--navy-rgb),.35);padding:1rem;opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;z-index:90}
.mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.has-mega:hover > .mega,.has-mega.open > .mega,.has-mega:focus-within > .mega{opacity:1;visibility:visible;transform:translate(calc(-50% + var(--shift,0px)),0)}
.mega-cols{display:grid;grid-auto-flow:column;gap:1.2rem}
.mega-col{min-width:210px}
.mega-title{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);padding:.3rem .5rem .5rem}
.mega a.mi{display:block;padding:.42rem .5rem;border-radius:6px;font-size:.9rem;color:var(--navy-800);transition:background .18s,color .18s}
.mega a.mi:hover{background:var(--paper);color:var(--accent-deep)}
.nav-cta{margin-left:.6rem}
.nav-tel{display:inline-grid;place-items:center;flex:none;width:50px;height:50px;margin:0 .45rem 0 .9rem;border-radius:50%;background:var(--accent);color:var(--on-accent);transition:box-shadow .25s var(--ease),background .25s var(--ease)}
.nav-tel:hover{background:var(--accent-pale);box-shadow:0 12px 28px -10px rgba(var(--accent-rgb),.6)}
.nav-tel svg{width:20px;height:20px}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:10px;margin-left:auto;z-index:80}
.nav-toggle span{width:24px;height:2px;background:var(--navy-900);transition:transform .3s var(--ease),opacity .3s,background .35s}
.header.at-top .nav-toggle span{background:#fff}
.nav.openm ~ .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.openm ~ .nav-toggle span:nth-child(2){opacity:0}
.nav.openm ~ .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{position:relative;display:flex;align-items:center;min-height:100vh;overflow:hidden;color:#fff}
@supports (height:100svh){.hero{min-height:100svh}}
.hero-bg.photo{background-image:linear-gradient(100deg,rgba(var(--navy950-rgb),.92) 0%,rgba(var(--navy-rgb),.78) 45%,rgba(var(--navy-rgb),.55) 100%),url('../img/hero-laundry.jpg');background-size:cover;background-position:center right}
.hero-bg.photo::after{opacity:.03}
.hero-bg{position:absolute;inset:0;z-index:0;background:
  radial-gradient(900px 600px at 85% 10%,rgba(var(--accent-rgb),.28),transparent 60%),
  radial-gradient(700px 500px at 10% 90%,rgba(var(--navy700-rgb),.8),transparent 60%),
  linear-gradient(160deg,var(--navy-950) 0%,var(--navy-900) 55%,var(--hero-end) 100%)}
.hero-bg::after{ /* subtle linen weave */
  content:"";position:absolute;inset:0;opacity:.06;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:28px 28px;mask-image:radial-gradient(circle at 70% 40%,#000,transparent 70%);-webkit-mask-image:radial-gradient(circle at 70% 40%,#000,transparent 70%)}
.hero-bubbles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-bubbles i{position:absolute;bottom:-120px;border-radius:50%;border:1px solid rgba(var(--pale-rgb),.35);background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.25),rgba(var(--accent-rgb),.08) 60%,transparent 70%);animation:rise var(--d,22s) linear infinite;animation-delay:var(--dl,0s);left:var(--x);width:var(--s);height:var(--s);opacity:0}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}10%{opacity:.7}90%{opacity:.5}100%{transform:translateY(-120vh) scale(1.1);opacity:0}}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:clamp(6rem,10vw,8rem);padding-bottom:clamp(3rem,5vw,4.5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3.5rem;align-items:center}
.hero h1{font-size:clamp(2.4rem,4.6vw,3.7rem);line-height:1.06;font-weight:700;color:#fff;letter-spacing:-.03em;text-wrap:balance}
.hero h1 .ai{color:var(--accent-pale)}
.hero-sub{margin-top:1.4rem;font-size:1.1rem;line-height:1.7;color:var(--d3);max-width:34rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.hero-proof{display:flex;align-items:center;gap:1rem;margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line-navy);flex-wrap:wrap}
.avatars{display:flex}
.avatars span{width:38px;height:38px;border-radius:50%;border:2px solid var(--navy-900);margin-left:-10px;background:linear-gradient(135deg,var(--accent),var(--navy-700));display:grid;place-items:center;font-size:.72rem;font-weight:700;color:#fff}
.avatars span:first-child{margin-left:0}
.stars{color:#F5C451;font-size:.95rem;letter-spacing:.08em;line-height:1}
.hero-proof b{display:block;font-size:.92rem;color:#fff}
.hero-proof small{font-size:.8rem;color:var(--d4)}
/* Quote card (MEOS hero form, TMA card styling) */
.hero-form{background:#fff;color:var(--ink);border-radius:16px;padding:1.6rem 1.6rem 1.4rem;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);position:relative}
.hero-form::before{content:"";position:absolute;inset:-1px;border-radius:17px;padding:1px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.9),transparent 40%,transparent 60%,rgba(var(--accent-rgb),.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hf-title{font-family:var(--display);font-weight:700;font-size:1.32rem;line-height:1.25;color:var(--navy-900);letter-spacing:-.02em}
.hf-sub{font-size:.88rem;color:var(--muted);margin:.3rem 0 1.1rem}
.hf-row{display:grid;gap:.8rem;margin-bottom:.8rem}
.hf-row.two{grid-template-columns:1fr 1fr}
.hf-row label{display:block;font-size:.78rem;font-weight:600;color:var(--navy-900);margin-bottom:.35rem}
.hf-row input,.hf-row select,.hf-row textarea{width:100%;padding:.75rem .9rem;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.hf-row input:focus,.hf-row select:focus,.hf-row textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2);background:#fff}
.hero-form .btn{width:100%;margin-top:.25rem}
.hf-note{font-size:.78rem;color:var(--muted);margin-top:.8rem;display:flex;gap:.45rem;align-items:center}
.hf-note svg{width:14px;height:14px;color:var(--accent-deep);flex:0 0 auto}
/* live price in the quote card */
.qp{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-radius:10px;background:var(--navy-900);color:#fff;margin:.2rem 0 .9rem}
.qp b{font-family:var(--display);font-size:1.7rem;letter-spacing:-.03em}
.qp span{font-size:.8rem;color:var(--d4)}
.qp em{font-style:normal;font-size:.8rem;color:var(--accent-pale)}
/* line-item quantity rows (hero quote + booking) */
.lines{display:grid}
.line{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:none}
.line b{display:block;font-size:.95rem;color:var(--navy-900);font-weight:600}
.line span{font-size:.85rem;color:var(--muted)}
.line.on b{color:var(--accent-deep)}
.qty{display:flex;align-items:center;gap:.2rem;border:1px solid var(--line);border-radius:999px;padding:3px;background:#fff;flex:0 0 auto}
.qty button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:1.15rem;font-weight:600;color:var(--navy-900);background:var(--paper);transition:background .2s,color .2s}
.qty button:last-of-type{background:var(--accent-pale);color:var(--navy-950)}

.qty button:disabled{opacity:.35;pointer-events:none}
.qty output{min-width:2rem;text-align:center;font-weight:700;color:var(--navy-900);font-variant-numeric:tabular-nums}
.line.shake{animation:shake .45s var(--ease)}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.total-row{display:flex;align-items:baseline;gap:.5rem;padding:1rem 0 .6rem;font-size:1.05rem;color:var(--navy-900)}
.total-row b{font-family:var(--display);font-size:1.6rem;letter-spacing:-.03em}
.total-row small{color:var(--muted);font-size:.85rem}
.consent{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;font-size:.84rem;color:var(--ink);padding:.85rem .9rem;border:1px solid var(--line);border-radius:10px;background:var(--paper);margin:.4rem 0 .9rem;cursor:pointer;transition:border-color .2s,background .2s}
.consent:has(input:checked){border-color:var(--accent);background:#fff}
.consent input{width:18px;height:18px;margin-top:.15rem;accent-color:var(--accent-deep)}
.consent a{color:var(--accent-deep);text-decoration:underline}
/* weight stepper (legacy) */
.stepper{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--paper);overflow:hidden}
.stepper button{height:44px;font-size:1.3rem;font-weight:600;color:var(--navy-900);transition:background .2s}
.stepper button:hover{background:var(--accent-pale)}
.stepper output{text-align:center;font-weight:600;color:var(--navy-900)}
.stepper output small{font-weight:500;color:var(--muted);margin-left:.2rem}

/* trust strip (MEOS) */
.trust-strip{background:#fff;border-bottom:1px solid var(--line)}
.trust-strip ul{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 0}
.trust-strip li{display:flex;align-items:center;gap:.55rem;font-size:.86rem;font-weight:500;color:var(--navy-800)}
.trust-strip svg{width:18px;height:18px;color:var(--accent-deep);flex:0 0 auto}

/* ============ SECTIONS ============ */
.section{padding:clamp(4rem,7vw,6.5rem) 0}
.section-head{max-width:44rem;margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head .lede{margin-top:1rem;color:var(--muted);font-size:1.05rem}
.bg-paper{background:var(--paper)}
.on-navy{background:linear-gradient(165deg,var(--navy-950),var(--navy-900));color:var(--d2)}
.on-navy h2{color:#fff}
.on-navy .section-head .lede{color:var(--d4)}
.on-navy h3{color:#fff}

/* Reveal (JS-gated) */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .stagger > *{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .stagger.in > *{opacity:1;transform:none}
.js .stagger.in > :nth-child(1){transition-delay:0ms}.js .stagger.in > :nth-child(2){transition-delay:90ms}.js .stagger.in > :nth-child(3){transition-delay:180ms}.js .stagger.in > :nth-child(4){transition-delay:270ms}.js .stagger.in > :nth-child(5){transition-delay:360ms}.js .stagger.in > :nth-child(6){transition-delay:450ms}.js .stagger.in > :nth-child(7){transition-delay:540ms}.js .stagger.in > :nth-child(8){transition-delay:630ms}

/* ============ HOW IT WORKS (steps) ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;counter-reset:step}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:2rem 1.6rem 1.7rem;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.step:hover{transform:translateY(-6px);box-shadow:0 26px 50px -22px rgba(var(--navy-rgb),.35);border-color:var(--line-accent)}
.s-num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--navy-900);color:var(--accent-pale);font-family:var(--display);font-weight:700;font-size:1.05rem;margin-bottom:1.2rem;box-shadow:0 0 0 4px #fff,0 0 0 5px var(--line-accent)}
.step h3{font-size:1.12rem;color:var(--navy-900);margin-bottom:.5rem}
.step p{font-size:.9rem;color:var(--muted)}
.step .s-time{display:inline-block;margin-top:1rem;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep)}

/* ============ FEATURE CARDS (why / included) ============ */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.why-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;padding:2.2rem 1.7rem 1.8rem;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.why-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -22px rgba(var(--navy-rgb),.35);border-color:var(--line-accent)}
.why-media{position:relative;width:130px;height:130px;margin:0 auto 1.5rem;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 30% 25%,var(--navy-700) 0%,var(--navy-800) 45%,var(--navy-900) 100%);box-shadow:0 0 0 5px #fff,0 0 0 6px rgba(var(--accent-rgb),.55),0 18px 30px -18px rgba(var(--navy-rgb),.5);transition:transform .5s var(--ease);display:grid;place-items:center;color:var(--accent-pale)}
.why-media svg{width:54px;height:54px}
.why-media::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1px dashed rgba(var(--pale-rgb),.55);opacity:0;transition:opacity .4s var(--ease)}
.why-card:hover .why-media{transform:scale(1.04)}
.why-card:hover .why-media::after{opacity:1;animation:spin 14s linear infinite}
@keyframes spin{to{rotate:360deg}}
.why-card h3{font-size:1.15rem;color:var(--navy-900);margin-bottom:.6rem;line-height:1.3;text-align:center}
.why-card p{font-size:.9rem;color:var(--muted);flex:1;text-align:center}
.why-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.3rem;font-size:.9rem;font-weight:600;color:var(--navy-900);justify-content:center}
.why-arrow{width:18px;height:18px;display:inline-flex;color:var(--accent-deep);transition:transform .3s var(--ease)}
.why-link:hover{color:var(--accent-deep)}
.why-link:hover .why-arrow{transform:translateX(5px)}

/* ============ SERVICE / LINK CARDS (image-first, sheen sweep) ============ */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.svc-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;color:inherit;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.svc-card:hover{transform:translateY(-6px);box-shadow:0 28px 54px -24px rgba(var(--navy-rgb),.38);border-color:var(--line-accent)}
.svc-media{position:relative;overflow:hidden;height:clamp(150px,13vw,190px);display:grid;place-items:center;color:var(--accent-pale)}
.svc-media.m1{background:linear-gradient(135deg,var(--navy-900),var(--navy-700))}.svc-media.m2{background:linear-gradient(135deg,var(--hero-end),var(--accent-deep))}.svc-media.m3{background:linear-gradient(135deg,var(--navy-800),var(--accent))}
.svc-media svg{width:64px;height:64px;transition:transform .9s var(--ease)}
.svc-card:hover .svc-media svg{transform:scale(1.1) rotate(-4deg)}
.svc-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.18) 50%,transparent 58%);transform:translateX(-130%);transition:transform .9s var(--ease)}
.svc-card:hover .svc-media::after{transform:translateX(130%)}
.svc-tag{position:absolute;left:14px;top:14px;z-index:2;background:rgba(var(--navy950-rgb),.72);color:var(--accent-pale);font-size:.68rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:.36rem .72rem;border-radius:999px;border:1px solid rgba(var(--pale-rgb),.32)}
.svc-body{padding:1.45rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1;gap:.5rem}
.svc-body h3{font-size:1.15rem;color:var(--navy-900);line-height:1.3;transition:color .3s var(--ease)}
.svc-card:hover .svc-body h3{color:var(--accent-deep)}
.svc-body p{font-size:.9rem;color:var(--muted);flex:1}
.svc-cta{margin-top:.7rem;font-size:.88rem;font-weight:600;color:var(--navy-900);display:inline-flex;gap:.4rem;align-items:center}
.svc-arrow{width:18px;height:18px;display:inline-flex;color:var(--accent-deep);transition:transform .3s var(--ease)}
.svc-card:hover .svc-arrow{transform:translateX(5px)}

/* ============ SPLIT (offset frame) ============ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.split-text .lede{margin-top:1.1rem;color:var(--muted);font-size:1.02rem;max-width:36rem}
.on-navy .split-text .lede{color:var(--d4)}
.split-text .hero-ctas{margin-top:1.9rem}
.split-media{position:relative}
.split-media .pic{width:100%;aspect-ratio:4/3;border-radius:14px;box-shadow:0 30px 60px -28px rgba(var(--navy950-rgb),.55);transition:transform .8s var(--ease);overflow:hidden;position:relative;display:grid;place-items:center;color:#fff}
.pic.p1{background:radial-gradient(circle at 30% 30%,var(--accent),var(--navy-900) 70%)}.pic.p2{background:radial-gradient(circle at 70% 30%,var(--navy-700),var(--navy-950) 75%)}.pic.p3{background:radial-gradient(circle at 50% 80%,var(--accent-deep),var(--navy-900) 70%)}
.pic svg{width:38%;height:auto;opacity:.9}
.pic .cap{position:absolute;left:1rem;bottom:1rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65);z-index:2}
/* photos in picture panels and guide thumbnails (the icon stays underneath as a fallback) */
img.ph{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--pos,center);z-index:1}
.pic.has-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;z-index:1;pointer-events:none;background:linear-gradient(transparent,rgba(var(--navy950-rgb),.72))}
.pic.has-photo .cap{color:rgba(255,255,255,.92)}
/* product shot on white: show the whole image on a white panel with a dark caption */
.pic.has-photo.light{background:#fff;border:1px solid var(--line)}
.pic.has-photo.light img.ph{object-fit:contain;padding:1.4rem 1.4rem 2.2rem}
.pic.has-photo.light::after{display:none}
.pic.has-photo.light .cap{color:var(--muted)}
.split-media::before{content:"";position:absolute;inset:16px -16px -16px 16px;border:1px solid var(--line-accent);border-radius:14px;pointer-events:none;transition:inset .6s var(--ease)}
.split.img-left .split-media::before{inset:16px 16px -16px -16px}
.split-media:hover .pic{transform:translate(-4px,-4px)}
.split-media:hover::before{inset:20px -20px -20px 20px}
.split.img-left .split-media:hover::before{inset:20px 20px -20px -20px}
.check-list{margin-top:1.4rem;display:grid;gap:.6rem}
.check-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem}
.check-list li::before{content:"";flex:0 0 auto;margin-top:.3rem;width:18px;height:18px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23071224' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E") center/12px no-repeat}
.on-navy .check-list li{color:var(--d2)}

/* ============ PRICING ============ */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch}
.price-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:2rem 1.8rem;display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.price-card:hover{transform:translateY(-6px);box-shadow:0 28px 54px -24px rgba(var(--navy-rgb),.38);border-color:var(--line-accent)}
.price-card.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 30px 60px -28px rgba(var(--accent-rgb),.5)}
.pc-badge{position:absolute;top:-13px;left:1.6rem;background:var(--navy-900);color:var(--accent-pale);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px}
.pc-name{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}
.pc-price{font-family:var(--display);font-size:2.6rem;font-weight:700;letter-spacing:-.04em;color:var(--navy-900);margin:.5rem 0 .1rem;line-height:1}
.pc-price small{font-family:var(--sans);font-size:.95rem;font-weight:500;color:var(--muted);letter-spacing:0}
.pc-for{font-size:.9rem;color:var(--muted);margin-bottom:1.2rem}
.pc-list{display:grid;gap:.55rem;margin:1rem 0 1.5rem;flex:1}
.pc-list li{display:flex;gap:.6rem;font-size:.9rem}
.pc-list li::before{content:"";flex:0 0 auto;margin-top:.28rem;width:16px;height:16px;border-radius:50%;background:var(--accent-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23157F77' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E") center/11px no-repeat}
.pc-list li.no::before{background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23A0A8B5' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l8 8M14 6l-8 8'/%3E%3C/svg%3E") center/10px no-repeat}
.pc-list li.no{color:var(--muted)}
.addons{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.addon{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.3rem;transition:border-color .3s,transform .3s var(--ease),box-shadow .3s var(--ease)}
.addon:hover{border-color:var(--line-accent);transform:translateY(-3px);box-shadow:var(--shadow)}
.addon b{font-size:.98rem;color:var(--navy-900)}
.addon span{font-size:.85rem;color:var(--muted)}
.addon em{font-style:normal;font-weight:700;color:var(--accent-deep);font-size:.95rem;margin-top:.3rem}
.ptable{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ptable th,.ptable td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
.ptable th{background:var(--paper);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-800)}
.ptable tr:last-child td{border-bottom:none}
.ptable td b{color:var(--navy-900)}
.fine{font-size:.82rem;color:var(--muted);margin-top:1rem;max-width:52rem}

/* table scroll wrapper */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
.tscroll .ptable{min-width:560px}
.prose .tscroll table{min-width:480px}

/* ============ MARQUEE (hotel tiles) ============ */
.marquee-rows{display:grid;gap:1rem}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:1rem;width:max-content;animation:marquee 42s linear infinite}
.marquee.rev .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-50% - .5rem))}}
.tile{--c:0;display:flex;align-items:center;gap:.7rem;padding:.9rem 1.3rem;border-radius:10px;background:#fff;border:1px solid color-mix(in srgb,var(--line),var(--accent) calc(var(--c) * 60%));white-space:nowrap;font-weight:600;font-size:.92rem;color:color-mix(in srgb,var(--muted),var(--navy-900) calc(var(--c) * 100%));transition:border-color .3s,color .3s}
.tile i{width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--line),var(--accent) calc(var(--c) * 100%));transition:background .3s}
.tile small{font-weight:500;color:var(--muted);font-size:.8rem}

/* logo tiles */
.tile.logo{height:84px;width:200px;padding:.9rem 1.4rem;justify-content:center}
.tile.logo img{max-height:100%;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:calc(.45 + var(--c) * .55);transition:filter .3s,opacity .3s}
.tile.logo{filter:none}
.tile.logo img{filter:grayscale(calc(1 - var(--c)))}
@media (prefers-reduced-motion:reduce){.tile.logo img{filter:none;opacity:1}}

/* ============ REVIEWS SLIDER (dark) ============ */
.reviews-slider{position:relative;overflow:hidden}
.reviews-slider::before{content:"";position:absolute;width:900px;height:900px;left:50%;top:-500px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.22),transparent 60%);pointer-events:none}
.rv-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:2rem;position:relative}
.rv-score{display:flex;align-items:center;gap:.8rem}
.rv-g{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;padding:8px}
.rv-score b{font-family:var(--display);font-size:1.9rem;color:#fff;letter-spacing:-.03em}
.rv-score span{font-size:.88rem;color:var(--d4)}
.rv-nav{display:flex;gap:.5rem}
.rv-nav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-navy);color:#fff;display:grid;place-items:center;transition:background .25s,border-color .25s,opacity .25s,transform .25s var(--ease)}
.rv-nav button:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:translateY(-2px)}
.rv-nav button:disabled{opacity:.3;pointer-events:none}
.rv-nav svg{width:18px;height:18px}
.rv-track{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:.5rem .25rem 1rem;position:relative}
.rv-track::-webkit-scrollbar{display:none}
.rv-card{flex:0 0 calc((100% - 3.6rem) / 4);scroll-snap-align:start;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--line-navy);border-radius:14px;padding:1.5rem;position:relative;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s;display:flex;flex-direction:column}
.rv-card::before{content:"\201C";position:absolute;right:1.1rem;top:.4rem;font-family:Georgia,serif;font-size:4rem;line-height:1;color:rgba(var(--pale-rgb),.15);transition:color .4s}
.rv-card:hover{transform:translateY(-5px);border-color:var(--line-accent);box-shadow:0 20px 40px -20px rgba(var(--accent-rgb),.4)}
.rv-card:hover::before{color:rgba(var(--pale-rgb),.5)}
.rv-who{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}
.rv-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--navy-700));display:grid;place-items:center;font-weight:700;font-size:.85rem;color:#fff}
.rv-who b{display:block;color:#fff;font-size:.95rem}
.rv-who small{color:var(--d4);font-size:.78rem}
.rv-stars{color:#F5C451;font-size:.85rem;letter-spacing:.08em;margin-bottom:.6rem}
.rv-text{font-size:.9rem;color:var(--d3);line-height:1.6;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;transition:max-height .6s var(--ease)}
.rv-card.open .rv-text{display:block;-webkit-line-clamp:unset}
.rv-more{align-self:flex-start;margin-top:.7rem;font-size:.82rem;font-weight:600;color:var(--accent-pale);border-bottom:1px solid transparent;transition:border-color .2s}
.rv-more:hover{border-color:currentColor}

/* ============ FAQ ============ */
.faq-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.faq-aside{position:sticky;top:110px}
.faq-aside .lede{margin-top:1rem;color:var(--muted);font-size:1.05rem}
.faq-aside .btn{margin-top:1.6rem}
.faq-wrap{display:grid;gap:.9rem}
.faq{border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .3s,box-shadow .3s}
.faq:hover{border-color:var(--line-accent)}
.faq[open]{border-color:var(--accent);box-shadow:0 14px 34px -22px rgba(var(--navy-rgb),.3)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:1.3rem 1.5rem;font-weight:600;font-size:1.02rem;line-height:1.4;color:var(--navy-900);cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.fq-ic{position:relative;flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-accent);color:var(--accent-deep);transition:background .3s,color .3s,border-color .3s}
.fq-ic::before,.fq-ic::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2px;margin:-1px 0 0 -6.5px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),opacity .25s}
.fq-ic::after{transform:rotate(90deg)} /* vertical bar: + when closed, fades out to leave a minus when open */
.faq[open] .fq-ic{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.faq[open] .fq-ic::after{transform:rotate(0);opacity:0}
.fq-body{padding:0 4.6rem 1.4rem 1.5rem;color:var(--muted);font-size:.97rem;animation:fq-in .35s var(--ease)}
.fq-body a{color:var(--accent-deep);text-decoration:underline}
@media (max-width:920px){.faq-layout{grid-template-columns:1fr;gap:1.8rem}.faq-aside{position:static}}
@media (max-width:640px){.faq summary{padding:1.1rem 1.15rem}.fq-body{padding:0 1.15rem 1.2rem}}
@keyframes fq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ============ FINAL CTA ============ */
.final-cta{text-align:center;position:relative;overflow:hidden}
.final-cta::after{content:"";position:absolute;inset:auto -10% -60% -10%;height:80%;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.25),transparent 60%);pointer-events:none}
.final-cta .wrap{position:relative;z-index:1}
.final-cta h2{font-size:clamp(2rem,4vw,3rem)}
.final-cta .lede{margin:1rem auto 0;max-width:36rem;color:var(--d4)}
.final-cta .hero-ctas{justify-content:center}

/* ============ PAGE HERO (inner) ============ */
.page-hero{min-height:0}
.page-hero .wrap{padding-top:clamp(7rem,11vw,9rem);padding-bottom:clamp(3rem,5vw,4.5rem)}
.page-hero h1{font-size:clamp(2.3rem,4.6vw,3.5rem)}
/* 404 */
.nf-hero .wrap{padding-bottom:clamp(4rem,8vw,7rem)}
.nf-code{display:inline-block;margin-bottom:1.4rem;padding:.4rem .9rem;border:1px solid var(--line-accent);border-radius:999px;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-pale)}
.hero-tag{margin-top:1rem;font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,1.9vw,1.4rem);line-height:1.35;color:var(--accent-pale);max-width:36rem;text-wrap:balance}
.crumbs{list-style:none;display:flex;gap:.5rem;font-size:.8rem;color:var(--d4);margin-bottom:1.2rem;flex-wrap:wrap}
.crumbs a:hover{color:#fff}
.crumbs li+li::before{content:"/";margin-right:.5rem;opacity:.5}
.hero-bullets{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line-navy)}
.hero-bullets li{display:flex;align-items:center;gap:.55rem;font-size:.9rem;color:var(--d2);font-weight:500}
.hero-bullets li::before{content:"";flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23071224' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E") center/12px no-repeat}

/* ============ PROSE / GUIDES ============ */
.prose{max-width:46rem;font-size:1.02rem}
.prose h2{font-size:1.6rem;margin:2.4rem 0 .8rem}
.prose h3{font-size:1.18rem;color:var(--navy-900);margin:1.6rem 0 .5rem}
.prose p{margin-bottom:1rem;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 1rem 1.3rem;color:var(--ink)}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--accent-deep);text-decoration:underline;text-decoration-color:rgba(var(--deep-rgb),.4);text-underline-offset:3px}
.prose blockquote{border-left:3px solid var(--accent);padding:.6rem 1.2rem;margin:1.4rem 0;background:var(--paper);border-radius:0 10px 10px 0;color:var(--navy-900);font-weight:500}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;margin:1rem 0 1.5rem}
.prose th,.prose td{padding:.6rem .8rem;border-bottom:1px solid var(--line);text-align:left}
.prose th{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-800);background:var(--paper)}
.article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:4rem;align-items:start}
.aside{position:sticky;top:100px;display:grid;gap:1rem}
.aside-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1.4rem}
.aside-card h3{font-size:1rem;color:var(--navy-900);margin-bottom:.6rem}
.aside-card p{font-size:.88rem;color:var(--muted);margin-bottom:1rem}
.aside-card .btn{width:100%}
.aside-card ul{display:grid;gap:.4rem;font-size:.9rem}
.aside-card ul a{color:var(--navy-800);display:flex;gap:.4rem}
.aside-card ul a::before{content:"→";color:var(--accent-deep)}
.aside-card ul a:hover{color:var(--accent-deep)}
.meta{display:flex;gap:1rem;font-size:.82rem;color:var(--muted);margin-bottom:1.6rem;flex-wrap:wrap}
.meta b{color:var(--navy-900)}
.toc{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.4rem;margin-bottom:2rem}
.toc b{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:.5rem}
.toc ol{list-style:decimal;margin-left:1.2rem;font-size:.92rem}
.toc a{color:var(--navy-800)}
.toc a:hover{color:var(--accent-deep)}

/* ============ GUIDE CARDS ============ */
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.bl-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.bl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-accent)}
.bl-thumb{height:150px;background:linear-gradient(135deg,var(--navy-900),var(--navy-700));display:grid;place-items:center;color:var(--accent-pale);position:relative;overflow:hidden}
.bl-thumb svg{width:50px;height:50px;transition:transform .6s var(--ease)}
.bl-card:hover .bl-thumb svg{transform:scale(1.12)}
.bl-thumb.has-photo{height:190px}
.bl-thumb img.ph{transition:transform .6s var(--ease)}
.bl-card:hover .bl-thumb img.ph{transform:scale(1.05)}
.bl-body{padding:1.3rem 1.4rem 1.4rem;display:flex;flex-direction:column;flex:1;gap:.45rem}
.bl-cat{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}
.bl-title{font-size:1.08rem;color:var(--navy-900);line-height:1.35}
.bl-ex{font-size:.88rem;color:var(--muted);flex:1}
.bl-more{font-size:.85rem;font-weight:600;color:var(--navy-900);display:inline-flex;gap:.4rem;align-items:center;margin-top:.5rem}
.bl-more .arrow{width:15px;height:15px;color:var(--accent-deep);transition:transform .25s var(--ease)}
.bl-card:hover .bl-more .arrow{transform:translateX(4px)}
/* guide article: photo hero with byline, feature image, sidebar link rows */
.guide-hero{min-height:clamp(440px,56vh,580px)}
.guide-hero h1{max-width:46rem}
.guide-hero .hero-sub{margin-top:1.1rem;max-width:38rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:.3rem 0;margin-top:1.4rem;font-size:.86rem;color:var(--d3)}
.hero-meta span+span::before{content:"·";margin:0 .7rem;opacity:.6}
.hero-meta b{color:#fff;font-weight:600}
.guide-hero .hero-ctas{margin-top:1.6rem}
.ar-figure{position:relative;margin:0 0 2.2rem;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,var(--navy-900),var(--navy-700));box-shadow:0 30px 60px -32px rgba(var(--navy950-rgb),.5)}
.ar-figure:not(.has-photo){display:none}
.ar-section .aside-card{background:#fff}
.ar-links ul{gap:0}
.ar-links ul a{justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.88rem;font-weight:600}
.ar-links ul li:last-child a{border-bottom:none;padding-bottom:0}
.ar-links ul a::before{display:none}
.ar-links ul a::after{content:"→";flex:none;color:var(--accent-deep);transition:transform .25s var(--ease)}
.ar-links ul a:hover::after{transform:translateX(3px)}
/* guides hub: filter chips, featured card, photo-led grid */
.bl-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.bl-chip{padding:.55rem 1rem;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--navy-900);font-size:.88rem;font-weight:600;transition:background .2s,color .2s,border-color .2s}
.bl-chip:hover{border-color:var(--accent)}
.bl-chip[aria-pressed="true"]{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.bl-hub .bl-thumb,.bl-hub .bl-thumb.has-photo{height:auto;aspect-ratio:16/10}
.bl-hub .bl-cat{align-self:flex-start;padding:.3rem .65rem;border-radius:999px;background:rgba(var(--accent-rgb),.14);font-size:.68rem;font-weight:700}
.bl-hub .bl-ex{flex:0 1 auto}
.bl-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:1rem;font-size:.82rem;color:var(--muted)}
.bl-meta .bl-more{margin-top:0}
.bl-hub:not(.filtered) .bl-feature{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:400px}
.bl-hub:not(.filtered) .bl-feature .bl-thumb{height:100%;aspect-ratio:auto;min-height:260px}
.bl-hub:not(.filtered) .bl-feature .bl-body{padding:2.2rem 2.4rem;justify-content:center;gap:.8rem}
.bl-hub:not(.filtered) .bl-feature .bl-title{font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.2}
.bl-hub:not(.filtered) .bl-feature .bl-ex{font-size:.98rem}
.bl-hub:not(.filtered) .bl-feature .bl-meta{margin-top:.4rem}
@media (max-width:920px){.bl-hub:not(.filtered) .bl-feature{grid-template-columns:1fr;min-height:0}.bl-hub:not(.filtered) .bl-feature .bl-thumb{height:auto;aspect-ratio:16/10;min-height:0}.bl-hub:not(.filtered) .bl-feature .bl-body{padding:1.5rem 1.4rem}}

/* ============ AREA / HOTEL LIST ============ */
.hotel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.hotel{display:flex;align-items:center;gap:.9rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;transition:border-color .3s,transform .3s var(--ease)}
.hotel:hover{border-color:var(--line-accent);transform:translateX(3px)}
.hotel i{width:40px;height:40px;border-radius:10px;background:var(--paper);display:grid;place-items:center;color:var(--accent-deep);flex:0 0 auto}
.hotel i svg{width:20px;height:20px}
.hotel b{display:block;font-size:.95rem;color:var(--navy-900)}
.hotel span{font-size:.8rem;color:var(--muted)}
.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.area{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.5rem;display:flex;flex-direction:column;gap:.4rem;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.area:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-accent)}
.area b{font-size:1.05rem;color:var(--navy-900)}
.area span{font-size:.86rem;color:var(--muted);flex:1}
.area em{font-style:normal;font-size:.78rem;font-weight:600;color:var(--accent-deep);letter-spacing:.06em;text-transform:uppercase}

/* ============ STATS ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;text-align:center}
.stat b{display:block;font-family:var(--display);font-size:clamp(2.2rem,4vw,3rem);letter-spacing:-.04em;color:#fff;line-height:1}
.stat span{display:block;margin-top:.5rem;font-size:.88rem;color:var(--d4)}

/* ============ BOOKING FLOW (MEOS 3-step) ============ */
.book-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:2.5rem;align-items:start}
.bk-steps{display:flex;gap:.5rem;margin-bottom:1.6rem}
.bk-steps li{flex:1;display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:.85rem;font-weight:600;color:var(--muted);transition:border-color .3s,color .3s,background .3s}
.bk-steps li i{width:24px;height:24px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-style:normal;font-size:.78rem;color:var(--muted)}
.bk-steps li.active{border-color:var(--accent);color:var(--navy-900)}
.bk-steps li.active i{background:var(--accent);color:var(--on-accent)}
.bk-steps li.done i{background:var(--navy-900);color:var(--accent-pale)}
.bk-steps li.done{color:var(--navy-900)}
.bk-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.8rem;margin-bottom:1.2rem}
.bk-panel h2{font-size:1.35rem;margin-bottom:.3rem}
.bk-panel .lede{font-size:.92rem;color:var(--muted);margin-bottom:1.3rem}
.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.opt{position:relative;border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.1rem 1rem;cursor:pointer;transition:border-color .25s,box-shadow .25s,transform .25s var(--ease);background:var(--paper)}
.opt:hover{transform:translateY(-2px);border-color:var(--line-accent)}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opt:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:#fff}
.opt b{display:block;font-size:1rem;color:var(--navy-900)}
.opt span{font-size:.82rem;color:var(--muted)}
.opt em{display:block;font-style:normal;font-weight:700;color:var(--accent-deep);margin-top:.4rem}
.opt .pop{position:absolute;top:-10px;right:10px;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;background:var(--navy-900);color:var(--accent-pale);padding:.25rem .55rem;border-radius:999px}
.addon-list{display:grid;gap:.6rem}
.addon-row{display:flex;align-items:center;gap:.9rem;border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;background:var(--paper);cursor:pointer;transition:border-color .25s,opacity .3s}
.addon-row:has(input:checked){border-color:var(--accent);background:#fff}
.addon-row input{width:18px;height:18px;accent-color:var(--accent-deep)}
.addon-row b{display:block;font-size:.92rem;color:var(--navy-900)}
.addon-row span{font-size:.8rem;color:var(--muted)}
.addon-row em{margin-left:auto;font-style:normal;font-weight:700;color:var(--accent-deep);white-space:nowrap}
.addon-list.locked .addon-row{opacity:.45;pointer-events:none}
.lock-note{font-size:.82rem;color:var(--muted);margin-bottom:.8rem;display:flex;gap:.4rem;align-items:center}
.lock-note svg{width:14px;height:14px;color:var(--accent-deep)}
.bk-actions{display:flex;justify-content:space-between;gap:1rem;margin-top:1.4rem}
.summary{position:sticky;top:100px;background:var(--navy-900);color:#fff;border-radius:16px;padding:1.6rem;box-shadow:0 30px 60px -28px rgba(var(--navy950-rgb),.6)}
.summary h3{font-size:1.05rem;color:#fff;margin-bottom:1rem}
.sum-row{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;color:var(--d3);padding:.5rem 0;border-bottom:1px solid var(--line-navy)}
.sum-row b{color:#fff;font-weight:600}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:1rem;margin-top:.2rem}
.sum-total b{font-family:var(--display);font-size:2rem;letter-spacing:-.04em;color:#fff}
.sum-total span{font-size:.85rem;color:var(--accent-pale)}
.sum-trust{margin-top:1.2rem;display:grid;gap:.5rem;font-size:.82rem;color:var(--d4)}
.sum-trust li{display:flex;gap:.5rem;align-items:center}
.sum-trust svg{width:14px;height:14px;color:var(--accent);flex:0 0 auto}
.suggest{position:relative}
.suggest-list{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:5;overflow:hidden;display:none}
.suggest-list.show{display:block}
.suggest-list button{display:block;width:100%;text-align:left;padding:.7rem .9rem;font-size:.9rem;transition:background .15s}
.suggest-list button:hover{background:var(--paper)}
.suggest-list small{display:block;color:var(--muted);font-size:.78rem}
.oa-note{display:none;margin-top:.7rem;padding:.8rem 1rem;border-radius:10px;background:#FFF7E6;border:1px solid #F3D9A4;font-size:.86rem;color:#6B4E0A}
.oa-note.show{display:block}
.pay-box{display:grid;gap:.8rem;margin-top:.4rem}
.pay-box .card-mock{border:1px dashed var(--line-accent);border-radius:10px;padding:1rem;background:var(--paper);font-size:.86rem;color:var(--muted);display:flex;align-items:center;gap:.7rem}
.pay-box .card-mock svg{width:28px;height:28px;color:var(--accent-deep)}
.tc{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;font-size:.85rem;color:var(--muted);margin-top:1rem}
.tc input{margin-top:.25rem;accent-color:var(--accent-deep)}
.tc a{color:var(--accent-deep);text-decoration:underline}
.bk-done{text-align:center;padding:2rem 1rem}
.bk-done .tick{width:72px;height:72px;border-radius:50%;background:var(--accent);display:grid;place-items:center;margin:0 auto 1.2rem;color:var(--on-accent);animation:pop .6s var(--ease)}
.bk-done .tick svg{width:34px;height:34px}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

.dropoff{display:flex;flex-direction:column;gap:.15rem;padding:1rem 1.2rem;border:1px solid var(--accent);border-radius:12px;background:#fff;margin-bottom:1.2rem}
.dropoff b{font-size:1.05rem;color:var(--navy-900)}
.dropoff span{font-size:.85rem;color:var(--muted)}

/* ============ CONTACT ============ */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3rem;align-items:start}
.c-list{display:grid;gap:1rem;margin-top:1.6rem}
.c-item{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.2rem;background:#fff;border:1px solid var(--line);border-radius:12px;transition:border-color .3s,transform .3s var(--ease)}
.c-item:hover{border-color:var(--line-accent);transform:translateX(3px)}
.c-item i{width:42px;height:42px;border-radius:10px;background:var(--navy-900);color:var(--accent-pale);display:grid;place-items:center;flex:0 0 auto}
.c-item i svg{width:20px;height:20px}
.c-item b{display:block;color:var(--navy-900);font-size:.95rem}
.c-item span{font-size:.88rem;color:var(--muted)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.8rem;box-shadow:var(--shadow)}

/* ============ QUICKBAR (MEOS, pure CSS) ============ */
.quickbar{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;display:flex;flex-direction:column;border-radius:12px 0 0 12px;overflow:hidden;box-shadow:0 20px 40px -16px rgba(0,0,0,.5)}
.quickbar a{width:54px;height:54px;display:grid;place-items:center;color:#fff;transition:filter .2s}
.quickbar a:hover{filter:brightness(1.15)}
.quickbar a svg{width:22px;height:22px}
.qb-call{background:var(--navy-900)}
.qb-wa{background:var(--wa)}
.qb-tab{background:var(--accent);color:var(--on-accent)!important;writing-mode:vertical-rl;transform:rotate(180deg);height:auto!important;padding:1.1rem 0;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}

/* ============ MODAL ============ */
.modal{border:none;border-radius:16px;padding:0;max-width:520px;width:calc(100% - 2rem);background:#fff;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.modal::backdrop{background:rgba(var(--navy950-rgb),.7);backdrop-filter:blur(4px)}
.modal[open]{animation:modal-in .35s var(--ease)}
.modal[open]::backdrop{animation:modal-fade .35s}
@keyframes modal-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes modal-fade{from{opacity:0}to{opacity:1}}
.modal-inner{padding:1.8rem}
.modal-close{position:absolute;top:.8rem;right:.8rem;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:background .2s,color .2s}
.modal-close:hover{background:var(--paper);color:var(--navy-900)}
.modal-close svg{width:18px;height:18px}

/* ============ FOOTER ============ */
.footer{background:var(--navy-950);color:var(--d5);padding:4rem 0 2rem;font-size:.9rem}
.footer a{transition:color .2s}
.footer a:hover{color:#fff}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--line-navy)}
.f-brand .brand{display:inline-flex;z-index:auto}
.f-brand .brand img{height:52px}
.f-brand p{margin-top:1rem;max-width:22rem;font-size:.88rem}
.f-col h4{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem;font-weight:600}
.f-col li{margin-bottom:.5rem}
.f-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.6rem;font-size:.8rem}
.f-bottom span b{color:#fff;font-weight:500}
.f-bottom a{text-decoration:none;transition:color .2s}
.f-bottom a:hover{color:#fff}

/* ============ MOBILE STICKY BAR (home) ============ */
.sticky-bar{display:none}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .stagger > *{opacity:1;transform:none;transition:none}
  .hero-bubbles,.marquee-track{animation:none!important}
  .marquee-track{flex-wrap:wrap;width:auto;justify-content:center}
  .marquee-dup{display:none}
  .marquee{mask-image:none;-webkit-mask-image:none}
  .modal[open],.modal[open]::backdrop,.fq-body,.bk-done .tick{animation:none}
  html{scroll-behavior:auto}
  .rv-track{scroll-behavior:auto}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .why-grid,.steps,.addons,.area-grid,.stats{grid-template-columns:repeat(2,1fr)}
  .svc-grid,.bl-grid,.hotel-grid,.price-grid{grid-template-columns:repeat(2,1fr)}
  .rv-card{flex-basis:calc((100% - 1.2rem) / 2)}
  .article{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
  .f-grid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:920px){
  .nav-toggle{display:flex}
  .nav{position:fixed;inset:0;background:#fff;transform:translateX(100%);transition:transform .35s var(--ease);padding:6rem 1.5rem 2rem;overflow:auto;margin:0}
  .nav.openm{transform:none}
  .nav > ul{flex-direction:column;align-items:stretch;gap:0}
  .nav-link{font-size:1.1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
  .header.at-top .nav-link{color:var(--navy-900)}
  .mega{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;padding:.4rem 0 .8rem;display:none;min-width:0}
  .has-mega.open > .mega{display:block}
  .mega-cols{grid-auto-flow:row}
  .nav-cta,.nav-tel{display:none}
  .hero-grid,.split,.book-layout,.contact-grid{grid-template-columns:1fr}
  .hero{min-height:0}
  .hero .wrap{padding-top:7rem}
  .split.img-left .split-media{order:-1}
  .summary{position:static}
  .sticky-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);padding:.7rem 1rem;align-items:center;justify-content:space-between;gap:1rem;transform:translateY(110%);transition:transform .35s var(--ease)}
  .sticky-bar.show{transform:none}
  .sticky-bar b{font-size:.88rem;color:var(--navy-900)}
  .sticky-bar small{display:block;font-size:.75rem;color:var(--muted)}
  body.has-quickbar{padding-bottom:56px}
  .quickbar{top:auto;bottom:0;right:0;left:0;transform:none;flex-direction:row;border-radius:0}
  .quickbar a{width:68px;height:56px}
  .qb-tab{writing-mode:horizontal-tb;transform:none;flex:1;padding:0;height:56px!important}
  body.has-quickbar .sticky-bar{bottom:56px}
}
@media (max-width:640px){
  .why-grid,.steps,.addons,.svc-grid,.bl-grid,.hotel-grid,.price-grid,.area-grid,.opt-grid,.hf-row.two,.stats{grid-template-columns:1fr}
  .rv-card{flex-basis:88%}
  .hero-ctas .btn{width:100%}
  .trust-strip ul{justify-content:flex-start}
  .f-grid{grid-template-columns:1fr 1fr}
  .bk-steps{flex-direction:column}
  .price-card.featured{transform:none}
}

/* ============ DARK VARIANTS (any section with .on-navy) ============ */
/* booking flow: used by the order page */
#bookFlow.on-navy{background:var(--navy-950);color-scheme:dark}
/* order page: the booking flow sits inside the hero as one section */
.order-hero{display:block;overflow:visible;overflow:clip} /* clip (not hidden) keeps the sticky order summary working */
.order-hero .book-layout{margin-top:2.2rem}
/* same photo as the homepage hero, pinned to the viewport while the form scrolls over it (so it is never stretched to the section's full height) */
.order-hero .hero-bg.photo{position:sticky;inset:auto;top:0;height:100vh;margin-bottom:-100vh}
@supports (height:100svh){.order-hero .hero-bg.photo{height:100svh;margin-bottom:-100svh}}
.order-hero .wrap{padding-bottom:clamp(3.5rem,6vw,5rem)}
#bookFlow.on-navy + .on-navy{background:var(--navy-950);border-top:1px solid var(--line-navy)}
.on-navy .bk-panel{background:var(--navy-850);border-color:var(--line-navy)}
.on-navy .bk-panel .lede{color:var(--d4)}
.on-navy .line{border-bottom-color:var(--line-navy)}
.on-navy .line b{color:#fff}
.on-navy .line span{color:var(--d4)}
.on-navy .line.on b{color:var(--accent-pale)}
.on-navy .qty{background:rgba(255,255,255,.05);border-color:rgba(var(--pale-rgb),.22)}
.on-navy .qty button{background:rgba(255,255,255,.1);color:#fff}
.on-navy .qty button:last-of-type{background:var(--accent);color:var(--on-accent)}
.on-navy .qty output{color:#fff}
.on-navy .hf-row label{color:var(--d2)}
.on-navy .hf-row input,.on-navy .hf-row select,.on-navy .hf-row textarea{background:rgba(255,255,255,.06);border-color:rgba(var(--pale-rgb),.22);color:#fff}
.on-navy .hf-row input::placeholder,.on-navy .hf-row textarea::placeholder{color:var(--d5)}
.on-navy .hf-row input:focus,.on-navy .hf-row select:focus,.on-navy .hf-row textarea:focus{background:rgba(255,255,255,.1);border-color:var(--accent)}
.on-navy .hf-row select option,.on-navy .hf-row select optgroup{background:var(--navy-850);color:#fff}
.on-navy .dropoff{background:rgba(var(--accent-rgb),.1)}
.on-navy .dropoff b{color:#fff}
.on-navy .dropoff span{color:var(--d4)}
.on-navy .pay-box .card-mock{background:rgba(255,255,255,.04);color:var(--d4)}
.on-navy .pay-box .card-mock svg{color:var(--accent-pale)}
.on-navy .tc{color:var(--d4)}
.on-navy .tc a{color:var(--accent-pale)}
.on-navy .tc input{accent-color:var(--accent)}
.on-navy .oa-note{background:rgba(243,217,164,.1);border-color:rgba(243,217,164,.4);color:#F3D9A4}
.on-navy .suggest-list{background:var(--navy-800);border-color:rgba(var(--pale-rgb),.22)}
.on-navy .suggest-list button{color:#fff}
.on-navy .suggest-list button:hover{background:rgba(255,255,255,.08)}
.on-navy .suggest-list small{color:var(--d4)}
.on-navy .summary{background:var(--navy-800);border:1px solid var(--line-accent)}
.on-navy .bk-done .lede{color:var(--d3)}
.on-navy .btn-navy{background:var(--accent);color:var(--on-accent)}
.on-navy .btn-navy:hover{background:var(--accent-pale)}
/* FAQ cards on a dark section */
.on-navy .faq-aside .lede{color:var(--d4)}
.on-navy .faq{background:var(--navy-850);border-color:var(--line-navy)}
.on-navy .faq:hover{border-color:rgba(var(--pale-rgb),.4)}
.on-navy .faq[open]{border-color:var(--accent);box-shadow:none}
.on-navy .faq summary{color:#fff}
.on-navy .fq-ic{border-color:rgba(var(--pale-rgb),.4);color:var(--accent-pale)}
.on-navy .faq[open] .fq-ic{color:var(--navy-950)}
.on-navy .fq-body{color:var(--d4)}
.on-navy .fq-body a{color:var(--accent-pale)}
/* accent buttons turn pale on hover, so their text must go dark again */
.btn-accent:hover,.nav-tel:hover,.on-navy .btn-navy:hover{color:var(--navy-950)}
/* forms: hidden honeypot field (bots fill it, people never see it) and the send-failed message */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{margin-top:.9rem;padding:.7rem .9rem;border-radius:8px;background:#FDECEA;border:1px solid #F3B4AC;color:#8A1C12;font-size:.88rem}

/* ---------- Phones: typing in a form (Auckland Laundry, 2026-11-11) ----------
   iPhones zoom the whole page into any field under 16px when it is tapped, and the page then
   looks broken until it is zoomed back out; at 16px nothing zooms. On phones the fixed Book now
   bars are taken away while a form is on screen (body.bars-off, assets/js/main.js), so they
   never cover a field; on a desktop the side tab always shows. */
@media (max-width:920px){
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{font-size:16px}
}
.quickbar,.sticky-bar{transition:transform .3s var(--ease),opacity .3s}
@media (max-width:920px){
  body.bars-off .quickbar{transform:translateY(120%);opacity:0;pointer-events:none}
  body.bars-off .sticky-bar,body.bars-off .sticky-bar.show{transform:translateY(calc(100% + 60px));opacity:0;pointer-events:none}
}
/* The phone menu is a full-screen panel (position:fixed). A blur or a slide on the header makes
   the header its containing block, and the open menu was then squeezed into the header's own
   height once the page had scrolled. On phones the header needs neither (it is near-opaque),
   and while the menu is open the header does not slide away. */
@media (max-width:920px){
  .header,.header.at-top{backdrop-filter:none;-webkit-backdrop-filter:none}
  .header.menu-open{transform:none}
  /* The links start under the logo and run the full width, not floating mid-screen. */
  .nav{flex-direction:column;align-items:stretch;justify-content:flex-start}
}

/* ---------- The bag: fixed minimum and on/off options (build.py bag_lines) ---------- */
.line .incl{flex:0 0 auto;display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;color:var(--accent-deep);padding:.45rem .8rem;border-radius:999px;background:var(--accent-pale)}
.line small{display:block;font-size:.76rem;color:var(--muted);margin-top:.15rem;line-height:1.35}
.line.toggle{cursor:pointer}
.sw{position:relative;flex:0 0 auto;width:52px;height:30px}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.sw i{position:absolute;inset:0;border-radius:999px;background:var(--paper);border:1px solid var(--line);transition:background .2s,border-color .2s}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.sw input:checked + i{background:var(--accent);border-color:var(--accent)}
.sw input:checked + i::after{transform:translateX(22px)}
.sw input:focus-visible + i{outline:2px solid var(--accent-deep);outline-offset:2px}
.on-navy .line .incl{background:rgba(var(--accent-rgb),.18);color:var(--accent-pale)}
.on-navy .line small{color:var(--d4)}
.on-navy .sw i{background:rgba(255,255,255,.1);border-color:rgba(var(--pale-rgb),.22)}
.on-navy .sw input:checked + i{background:var(--accent);border-color:var(--accent)}
.suggest-list .suggest-google{margin:0;padding:.45rem .9rem;font-size:.7rem;color:var(--muted);text-align:right;border-top:1px solid var(--line)}
.f-brand .f-address a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3)}