/* ==========================================================================
   Daniels Solar Cleaning — direct-response build
   Colours sampled from the logo:
     electric blue #0060D8 · deep navy #041A33 · sun amber #FFA000
   Style: heavy condensed uppercase display type, gradient badges, full-bleed
   hero art under a dark scrim, persistent offer bar, multi-step quote form.
   ========================================================================== */

:root{
  --navy-900:#041A33;
  --navy-800:#07264A;
  --navy-700:#0B3566;
  --blue-800:#0030A8;
  --blue-700:#003CC0;
  --blue-600:#0048D8;
  --blue-500:#1160F0;
  --blue-400:#4E9BFF;
  --blue-200:#A8D2FF;
  --amber-700:#E07A00;
  --amber-600:#F08C00;
  --amber-500:#FFA000;
  --amber-400:#FFC33C;
  --amber-200:#FFE6A8;
  --gold:#FFC01E;
  --green:#0FA968;

  --ink:#0A1B2D;
  --body:#445B73;
  --muted:#6D8299;
  --line:#E1E9F2;
  --line-2:#CFDDEC;
  --soft:#F2F7FC;
  --soft-2:#E8F1FA;

  --cyan-400:#5FD4FF;
  --cyan-500:#22B8F0;
  --glow-blue:0 0 0 1px rgba(95,212,255,.22), 0 18px 50px -18px rgba(0,124,255,.75);
  --glow-cyan:0 0 34px rgba(60,180,255,.45);
  --grad-brand:linear-gradient(90deg,#00C2FF 0%,#0060D8 48%,#FF8A00 100%);
  --grad-amber:linear-gradient(180deg,#FFC33C,#FF8A00);
  --grad-blue:linear-gradient(180deg,#1C7BEF,#0039A6);
  --grad-navy:linear-gradient(120deg,#041A33 0%,#0A2F5C 55%,#0039A6 100%);

  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;
  --shadow-xs:0 1px 2px rgba(4,26,51,.06);
  --shadow:0 2px 4px rgba(4,26,51,.05),0 10px 28px rgba(4,26,51,.09);
  --shadow-lg:0 28px 70px -24px rgba(4,26,51,.45);
  --shadow-amber:0 14px 34px -10px rgba(255,138,0,.6);

  --maxw:1200px;
  --font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --display:"Oswald","Arial Narrow",system-ui,sans-serif;
  --bar-h:76px;              /* sticky offer bar height */
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{
  margin:0;font-family:var(--font);color:var(--body);background:#fff;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,.display{
  font-family:var(--display);text-transform:uppercase;font-weight:700;
  color:var(--ink);line-height:1.08;letter-spacing:.005em;margin:0 0 .5em;
}
h1{font-size:clamp(2.3rem,7vw,4.2rem)}
h2{font-size:clamp(1.9rem,4.4vw,3rem)}
h3{font-size:clamp(1.1rem,1.9vw,1.35rem)}
p{margin:0 0 .85em}
ul{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.38em}
strong{color:var(--ink);font-weight:700}
:focus-visible{outline:3px solid var(--amber-500);outline-offset:3px;border-radius:4px}
::selection{background:var(--amber-200);color:var(--ink)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding:clamp(38px,4.4vw,68px) 0;position:relative}
.section--soft{background:var(--soft)}
.section:not(.section--soft):not(.section--navy):not(.section--blue){background:#fff}
.section--navy{background:linear-gradient(180deg,rgba(3,20,52,.72),rgba(2,28,76,.66));color:#D3E3F2}
.section--blue{background:linear-gradient(125deg,rgba(3,18,48,.84) 0%,rgba(0,46,124,.78) 55%,rgba(0,64,140,.78) 100%);color:#EAF3FC}
.section--navy h2,.section--navy h3,.section--blue h2,.section--blue h3{color:#fff}
.section--navy .lede,.section--blue .lede{color:#fff;font-weight:600}
.center{text-align:center}
.head{max-width:800px;margin:0 auto clamp(24px,3vw,38px);text-align:center}
.lede{font-size:clamp(1.02rem,1.5vw,1.12rem);line-height:1.5;max-width:58ch;margin-left:auto;margin-right:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;padding:10px 16px;border-radius:8px}

/* Gradient pill badge (their "ABOUT ..." chip) */
.badge{
  display:inline-block;background:var(--grad-brand);color:#fff;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(.8rem,1.4vw,.95rem);letter-spacing:.06em;
  padding:10px 22px;border-radius:8px;margin:0 0 14px;
  box-shadow:0 10px 30px -10px rgba(0,150,255,.85), inset 0 1px 0 rgba(255,255,255,.28);
}
.badge--amber{background:var(--grad-amber);color:#3A2000}

/* Gradient divider under headings */
.divider{width:110px;height:5px;border-radius:5px;background:var(--grad-brand);margin:0 0 16px;box-shadow:var(--glow-cyan)}
.center .divider,.head .divider{margin-left:auto;margin-right:auto}

/* Star rows */
.stars{display:inline-flex;gap:4px}
.stars svg{width:20px;height:20px;fill:var(--gold)}
.center .stars,.head .stars{justify-content:center}

/* Coloured emphasis inside headings/copy */
.t-blue{
  background:linear-gradient(92deg,#8FE4FF 0%,#4EA8FF 55%,#1C7BEF 100%);color:#6FC8FF;
  filter:drop-shadow(0 0 22px rgba(70,180,255,.45));
  -webkit-background-clip:text;background-clip:text;
}
@supports (-webkit-text-fill-color:transparent){
  .t-blue{-webkit-text-fill-color:transparent}
}
.t-grey{color:#B9C7D6}
.t-amber{color:var(--amber-400)}
.t-green{color:#3EDD96}
.t-cyan{color:#7FD4FF}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;
  font-weight:600;font-size:1.05rem;line-height:1.15;text-align:center;
  padding:18px 30px;border-radius:10px;border:2px solid transparent;cursor:pointer;
  text-decoration:none!important;transition:transform .16s,box-shadow .16s,background .16s;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:2}
.btn--primary{background:var(--grad-amber);color:#3A2000;box-shadow:var(--shadow-amber)}
.btn--primary:hover{box-shadow:0 20px 44px -10px rgba(255,138,0,.75)}
.btn--blue{background:var(--grad-blue);color:#fff;box-shadow:0 16px 40px -14px rgba(0,96,216,.7)}
.btn--ghost{background:rgba(90,180,255,.14);border-color:rgba(140,215,255,.6);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.btn--ghost:hover{background:rgba(90,180,255,.26);box-shadow:var(--glow-blue)}
.btn--outline{background:#fff;border-color:var(--line-2);color:var(--ink)}
.btn--outline:hover{border-color:var(--blue-600);color:var(--blue-600)}
.btn--dark{background:var(--navy-900);color:#fff}
.btn--white{background:#fff;color:var(--navy-900)}
.btn--lg{padding:21px 36px;font-size:1.15rem}
.btn--block{width:100%}
.btn-stack{display:flex;flex-wrap:wrap;gap:14px}
.center .btn-stack,.head .btn-stack{justify-content:center}

/* ---------- Scrolling trust bar (top row of the sticky action bar) ---------- */
.ticker{
  position:relative;overflow:hidden;
  background:rgba(2,14,38,.55);
  border-bottom:1px solid rgba(95,212,255,.28);
}
/* Fade the ends so items slide in and out rather than popping at the edge */
.ticker::before,.ticker::after{
  content:"";position:absolute;top:0;bottom:0;width:46px;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,#061C46,transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,#061C46,transparent)}
.ticker__track{display:flex;width:max-content;animation:tickerScroll 34s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__set{display:flex}
.ticker__item{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:7px 18px;color:#DCEBFA;
  font-family:var(--display);text-transform:uppercase;font-weight:600;
  font-size:.78rem;letter-spacing:.09em;
}
.ticker__item svg{width:13px;height:13px;flex:0 0 13px;stroke:var(--cyan-400);stroke-width:3;fill:none}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Header: white logo bar ---------- */
.header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-xs)}
.header__in{display:flex;align-items:center;gap:24px;height:96px;position:relative}
.brand{display:block;flex:0 0 auto;line-height:0}
.brand:hover{text-decoration:none}
.brand img{width:200px;height:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav a{color:var(--ink);font-weight:700;font-size:.94rem;text-decoration:none!important}
.nav a:hover{color:var(--blue-600)}
.nav .btn{padding:14px 22px;font-size:.95rem}
.nav-toggle{display:none;margin-left:auto;background:none;border:1.5px solid var(--line-2);border-radius:10px;padding:10px 11px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}

/* ---------- Page-wide photo backdrop ----------
   Sits behind everything below the white logo container. Fixed, so the roof
   photo holds still while the page scrolls and shows through every dark band.
   The scrim keeps white text at readable contrast over the sky. */
.pagebg{
  position:fixed;top:0;left:0;width:100vw;height:100vh;height:100lvh;
  z-index:-2;overflow:hidden;background:var(--navy-900);
  transform:translateZ(0);backface-visibility:hidden;will-change:transform;pointer-events:none;
}
.pagebg img{width:100%;height:100%;object-fit:cover;display:block;transform:translateZ(0)}
.pagebg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,16,40,.18) 0%,rgba(2,16,40,.04) 40%,rgba(2,16,40,.24) 100%);
}
.has-photo{position:relative}
.has-photo > .wrap,.has-photo > .crumbs{position:relative;z-index:1}

/* ---------- Hero ---------- */
.hero{position:relative;color:#CBDDF0;background:transparent}
.hero__grid{
  position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:26px;align-items:start;
  padding:clamp(14px,1.6vw,26px) 20px clamp(26px,3vw,44px);
}
/* Grid items default to min-width:auto, so a wide non-wrapping child (the price
   tag) can push a column past the viewport. Let the columns shrink instead. */
.hero__grid > *,.book > *,.calc > *,.grid > *{min-width:0}
/* Dark container over the photo backdrop - the photo stays visible around its
   edges, which is what gives the hero its depth. */
.hero__box{
  position:relative;
  background:linear-gradient(158deg,rgba(4,20,50,.90) 0%,rgba(2,34,88,.82) 55%,rgba(2,12,34,.92) 100%);
  border:1px solid rgba(120,195,255,.42);
  border-radius:16px;
  padding:clamp(26px,3.6vw,44px);
  box-shadow:inset 0 1px 0 rgba(190,230,255,.22), 0 34px 80px -32px rgba(0,90,210,.8);
}
/* Lit top edge - a thin cyan filament across the container */
.hero__box::before{
  content:"";position:absolute;left:14%;right:14%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan-400),transparent);
  opacity:.9;
}
.hero h1{color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.hero__sub{font-size:clamp(1.14rem,1.9vw,1.3rem);line-height:1.4;color:#fff;font-weight:700;max-width:none}
.hero__trustline{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0 0 18px;font-size:1rem;font-weight:700;color:#CFE4F7}
.hero__trustline span::after{content:"·";margin-left:10px;opacity:.55}
.hero__trustline span:last-child::after{display:none}
.pricetag{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 11px;margin:0 0 22px;padding:13px 22px;
  background:rgba(255,160,0,.14);border:1.5px solid rgba(255,195,60,.55);border-radius:10px;
  color:#FFE0A0;font-weight:700;font-size:1rem;
}
.pricetag b{font-family:var(--display);color:var(--amber-400);font-size:1.3rem;letter-spacing:.02em}
.pricetag svg{width:22px;height:22px;flex:0 0 22px;fill:var(--amber-400)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
.chip{
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);
  border:1px solid rgba(120,200,255,.35);border-radius:999px;padding:9px 16px;
  font-size:.83rem;font-weight:700;color:#DCE8F4;
}
.chip svg{width:15px;height:15px;flex:0 0 15px;stroke:var(--amber-400);fill:none;stroke-width:2.6}

/* ---------- Multi-step quote form ---------- */
.stepbox{background:#fff;border-radius:var(--radius-lg);padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-lg);color:var(--body)}
.stepbox__top{display:flex;justify-content:flex-end;font-size:.85rem;font-weight:800;color:var(--muted);margin-bottom:10px}
.progress{height:8px;border-radius:8px;background:var(--soft-2);overflow:hidden;margin-bottom:24px}
.progress__fill{height:100%;width:33.33%;background:var(--grad-brand);border-radius:8px;transition:width .3s ease}

/* Live fixed price - appears the moment a panel count is chosen and follows
   the customer through every remaining step. */
.quoteprice{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  background:linear-gradient(135deg,#0B8A4F,#0FA968);color:#fff;
  border-radius:12px;padding:14px 18px;margin:0 0 20px;
  box-shadow:0 14px 30px -14px rgba(15,169,104,.9);
}
.quoteprice__label{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;font-weight:600;opacity:.95}
.quoteprice__val{font-family:var(--display);font-size:2.1rem;font-weight:700;line-height:1;margin-left:auto}
.quoteprice__note{flex:1 0 100%;font-size:.8rem;font-weight:600;opacity:.92}
.stepbox h2,.stepbox .step-h{font-size:clamp(1.35rem,2.4vw,1.75rem);margin-bottom:18px}
.step-panel{display:none}
.step-panel.is-active{display:block}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
.tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:22px 12px;border:1.5px solid var(--line);border-radius:14px;background:#fff;
  font-family:inherit;font-size:.98rem;font-weight:700;color:var(--ink);cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .15s;text-align:center;
}
.tile svg{width:30px;height:30px;stroke:var(--blue-600);fill:none;stroke-width:1.8}
.tile:hover{border-color:var(--blue-400);transform:translateY(-2px)}
.tile.is-selected{border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(0,140,255,.22),0 12px 30px -14px rgba(0,120,240,.7);background:linear-gradient(160deg,#F4FAFF,#E8F3FF)}
.field{margin-bottom:14px}
.field label{display:block;font-size:.77rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:1rem;color:var(--ink);padding:15px;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--blue-600);box-shadow:0 0 0 4px rgba(0,96,216,.14)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.step-nav{display:flex;gap:12px;margin-top:6px}
.step-nav .btn{flex:1}
.step-back{
  flex:0 0 auto!important;background:none;border:1.5px solid var(--line-2);color:var(--muted);
  padding:18px 22px;border-radius:10px;font-family:var(--display);text-transform:uppercase;
  font-weight:600;cursor:pointer;font-size:.98rem;
}
.step-back:hover{border-color:var(--blue-600);color:var(--blue-600)}
.stepbox__fine{font-size:.78rem;color:var(--muted);text-align:center;margin:16px 0 0;line-height:1.5}
.form-success{display:none;text-align:center;padding:22px 6px}
.form-success svg{width:54px;height:54px;margin:0 auto 14px;stroke:var(--green);fill:none;stroke-width:2.5}
.is-sent .form-success{display:block}
.is-sent .stepbox__top,.is-sent .progress,.is-sent form,.is-sent .stepbox__fine,.is-sent .stepbox > h2,.is-sent .stepbox > .step-h{display:none}

/* ---------- Trust strip ---------- */
.strip{background:linear-gradient(90deg,rgba(4,22,56,.80),rgba(0,58,146,.72),rgba(4,22,56,.80));padding:18px 0;border-top:1px solid rgba(95,212,255,.35);box-shadow:inset 0 1px 0 rgba(150,220,255,.22)}
.strip__in{display:flex;flex-wrap:wrap;gap:12px 36px;justify-content:center;align-items:center;color:#9FBBD6;font-size:.86rem;font-weight:800}
.strip__in span{display:flex;align-items:center;gap:9px}
.strip__in svg{width:18px;height:18px;flex:0 0 18px;stroke:var(--amber-500);fill:none;stroke-width:2.2}

/* ---------- Cards ---------- */
.grid{display:grid;gap:16px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-xs);transition:box-shadow .18s,transform .18s,border-color .18s}
.card:hover{box-shadow:0 18px 44px -20px rgba(0,110,230,.55);transform:translateY(-3px);border-color:#9CC9F5}
.card p{font-size:.97rem;line-height:1.5}
.card p:last-child{margin-bottom:0}
.card__ico{
  width:60px;height:60px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(150deg,#E4F1FF,#C9E3FF);border:1px solid #A9CFF7;
  box-shadow:inset 0 1px 0 #fff, 0 6px 16px -8px rgba(0,110,230,.5);
}
.card__ico svg{width:28px;height:28px;stroke:var(--blue-600);fill:none;stroke-width:1.9}
.card--amber .card__ico{background:#FFF3DC;border-color:#FFDCA0}
.card--amber .card__ico svg{stroke:var(--amber-600)}
.section--navy .card,.section--blue .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#B4C8DC;box-shadow:none}
.section--navy .card__ico,.section--blue .card__ico{background:rgba(95,212,255,.16);border-color:rgba(95,212,255,.42);box-shadow:0 0 22px rgba(60,180,255,.3)}
.section--navy .card__ico svg,.section--blue .card__ico svg{stroke:var(--cyan-400)}
.svc{display:flex;flex-direction:column}
.svc p{flex:1}
.svc__price{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;
  border-top:1px dashed var(--line-2);font-weight:800;color:var(--ink);
}
.svc__price b{font-family:var(--display);color:var(--blue-600);font-size:1.35rem}
.svc__price span{font-size:.8rem;font-weight:700;color:var(--muted)}

/* Service card with a media slot on top */
.svc__media{margin:-28px -28px 20px;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;background:var(--navy-800)}
.svc__media svg{width:100%;height:auto;display:block}

/* ---------- Calculator ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.calc__in{padding:clamp(26px,3.2vw,42px)}
.calc__out{padding:clamp(26px,3.2vw,42px);background:var(--grad-navy);color:#BCD4EC;display:flex;flex-direction:column;justify-content:center}
.calc__out h3{color:#fff;font-size:1rem;letter-spacing:.1em;opacity:.85;margin-bottom:2px}
.range-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:12px}
.range-row label{font-size:.77rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.range-row output{font-family:var(--display);font-weight:600;color:var(--blue-600);font-size:1.2rem;white-space:nowrap}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:7px;border-radius:7px;background:var(--soft-2);margin:0 0 24px;cursor:pointer;border:1px solid var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--grad-amber);border:4px solid #fff;box-shadow:0 3px 12px rgba(4,26,51,.3)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--amber-500);border:4px solid #fff;box-shadow:0 3px 12px rgba(4,26,51,.3)}
.calc__figure{font-family:var(--display);font-size:clamp(2.8rem,7vw,4.4rem);font-weight:700;color:var(--amber-400);line-height:1;margin:8px 0 6px}
.calc__caption{font-size:.92rem;color:#9FBBD6;margin-bottom:22px}
.calc__caption strong{color:#fff}
.calc__split{display:flex;gap:24px;padding:18px 0;margin-bottom:22px;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.calc__split b{display:block;font-family:var(--display);color:#fff;font-size:1.4rem;font-weight:600}
.calc__split span{font-size:.77rem;color:#9FBBD6}
.calc__fine{font-size:.75rem;color:#89A6C2;margin:16px 0 0;line-height:1.55}
.callout{background:var(--soft);border-left:4px solid var(--amber-500);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:20px 24px;margin:26px 0}
.callout p:last-child{margin-bottom:0}

/* ---------- Before / after comparison ---------- */
.ba-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:36px;align-items:center}
.ba-copy .lede{margin-left:0;max-width:42ch;font-size:1.12rem}
.ba-points{list-style:none;padding:0;margin:0 0 22px}
.ba-points li{display:flex;gap:10px;align-items:flex-start;margin-bottom:.5em;font-weight:600;color:#EAF3FC}
.ba-points li svg{width:19px;height:19px;flex:0 0 19px;margin-top:4px;stroke:var(--cyan-400);stroke-width:3;fill:none}
.ba-note{margin:12px 0 0;font-size:.86rem;color:#A9C3DA;text-align:center}
.ba-note a{color:var(--cyan-400);font-weight:700;white-space:nowrap}

.ba{
  position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;
  background:var(--navy-900);box-shadow:0 30px 70px -26px rgba(0,0,0,.75);
  border:1px solid rgba(150,220,255,.28);touch-action:pan-y;
}
.ba__layer{position:absolute;inset:0}
.ba__layer svg,.ba__layer img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ba__layer--after{clip-path:inset(0 0 0 var(--pos,50%))}

/* The divider, grip and labels sit above the art but must not swallow the
   pointer - the range input underneath is what actually drives the slider. */
.ba__divider,.ba__grip,.ba__tag,.ba__hint{pointer-events:none}
.ba__divider{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;margin-left:-1.5px;z-index:3;
  background:linear-gradient(180deg,transparent,#fff 10%,#fff 90%,transparent);
  box-shadow:0 0 18px rgba(0,0,0,.55);
}
.ba__grip{
  position:absolute;top:50%;left:var(--pos,50%);transform:translate(-50%,-50%);z-index:4;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#fff;box-shadow:0 8px 26px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.18);
}
.ba__grip svg{width:26px;height:26px;stroke:var(--blue-700);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ba__tag{
  position:absolute;top:14px;z-index:3;padding:8px 15px;border-radius:8px;
  font-family:var(--display);text-transform:uppercase;font-size:.8rem;font-weight:600;letter-spacing:.09em;
}
.ba__tag--before{left:14px;background:rgba(10,12,14,.78);color:#F0E6CE;border:1px solid rgba(255,255,255,.25)}
.ba__tag--after{right:14px;background:var(--grad-amber);color:#3A2000}
.ba__hint{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:4;
  background:rgba(4,20,50,.82);border:1px solid rgba(150,220,255,.4);color:#fff;
  padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:700;white-space:nowrap;
  transition:opacity .3s;
}
.ba.is-used .ba__hint{opacity:0}
/* Dragging is handled by pointer events on the figure itself. The range input
   stays for keyboard users only, so it must not swallow touches. */
.ba{cursor:ew-resize;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ba.is-dragging{cursor:grabbing}
.ba__range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;z-index:5;
  opacity:0;pointer-events:none;appearance:none;-webkit-appearance:none;background:none;border:0;
}
.ba__range:focus-visible + .ba__divider,
.ba .ba__range:focus-visible ~ .ba__grip{box-shadow:0 0 0 4px var(--amber-400)}

/* ---------- Steps ---------- */
.steps{counter-reset:s;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 22px 22px}
.step::before{
  counter-increment:s;content:counter(s);position:absolute;top:-22px;left:26px;
  width:50px;height:50px;border-radius:12px;background:var(--grad-blue);color:#fff;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.4rem;
  border:4px solid var(--soft);box-shadow:0 14px 34px -10px rgba(0,140,255,.9), 0 0 0 1px rgba(95,212,255,.35);
}
.step h3{margin:16px 0 8px}
.step p{font-size:.96rem;margin:0}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.price{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:30px 26px;position:relative;display:flex;flex-direction:column}
.price--best{border-color:var(--amber-500);box-shadow:0 26px 56px -26px rgba(255,138,0,.85)}
.price__flag{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--grad-amber);color:#3A2000;
  font-family:var(--display);font-size:.76rem;font-weight:600;letter-spacing:.1em;
  padding:8px 16px;border-radius:6px;white-space:nowrap;
}
.price__ico{font-size:1.8rem;line-height:1;margin-bottom:12px}
.price h3{font-size:.86rem;letter-spacing:.09em;color:var(--muted);margin-bottom:10px}
.price__amt{font-family:var(--display);font-size:2.7rem;font-weight:700;color:var(--ink);line-height:1;margin-bottom:10px}
.price__amt small{display:block;font-size:.72rem;font-weight:600;color:var(--blue-600);letter-spacing:.09em;margin-bottom:4px}
.price__desc{font-size:.93rem;flex:1;margin-bottom:18px}
.price ul{list-style:none;padding:0;margin:0 0 22px;font-size:.93rem;flex:1}
.price li{display:flex;gap:10px;align-items:flex-start}
.price li svg{flex:0 0 17px;width:17px;height:17px;stroke:var(--green);stroke-width:3;fill:none;margin-top:5px}

/* ---------- Reviews over art ---------- */
.glass{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:var(--radius);
  padding:30px;color:#EAF2FA;backdrop-filter:blur(2px);
}
.glass__top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.glass__score{font-weight:800;color:#fff;font-size:.95rem}
.glass blockquote{margin:0 0 18px;font-size:1.05rem;line-height:1.6;font-style:italic;color:#fff}
.glass cite{font-style:normal;font-weight:800;color:var(--blue-200);font-size:.95rem}

/* ---------- Guides ---------- */
.guide{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;text-decoration:none!important;color:var(--body);transition:transform .18s,box-shadow .18s,border-color .18s;
}
.guide:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue-400)}
.guide__ico{font-size:1.7rem;line-height:1;margin-bottom:12px}
.guide h3{font-size:1.02rem;margin-bottom:8px}
.guide p{font-size:.93rem;flex:1;margin-bottom:16px}
.guide__more{font-weight:800;color:var(--blue-600);font-size:.92rem}

/* ---------- Areas ---------- */
.regions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.region{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);overflow:hidden}
.region summary{
  list-style:none;cursor:pointer;padding:15px 18px;font-family:var(--display);text-transform:uppercase;
  font-weight:600;color:#fff;font-size:1.02rem;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.region summary::-webkit-details-marker{display:none}
.region summary b{background:rgba(255,160,0,.18);border:1px solid rgba(255,160,0,.42);color:var(--amber-400);border-radius:6px;padding:3px 10px;font-size:.8rem}
.region[open] summary{border-bottom:1px solid rgba(255,255,255,.12)}
.region__list{padding:16px 22px 20px;display:flex;flex-wrap:wrap;gap:8px}
.region__list a,.region__list span{
  font-size:.86rem;font-weight:600;padding:6px 12px;border-radius:6px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#BCD4EC;
}
.region__list a{color:#fff;border-color:rgba(255,160,0,.5);background:rgba(255,160,0,.16);text-decoration:none!important;font-weight:800}
.region__list a:hover{background:rgba(255,160,0,.3)}

/* ---------- FAQ ---------- */
.faq{max-width:880px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:8px;overflow:hidden}
.faq details[open]{border-color:var(--line-2);box-shadow:var(--shadow)}
.faq summary{
  list-style:none;cursor:pointer;padding:17px 52px 17px 20px;position:relative;
  font-family:var(--display);text-transform:uppercase;font-weight:600;color:var(--ink);font-size:1.02rem;line-height:1.25;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:24px;top:50%;width:11px;height:11px;margin-top:-8px;
  border-right:2.5px solid var(--blue-600);border-bottom:2.5px solid var(--blue-600);
  transform:rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq__a{padding:0 20px 18px;font-size:.98rem}
.faq__a p:last-child{margin-bottom:0}

/* ---------- Photo gallery + lightbox ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery__item{
  position:relative;display:block;padding:0;border:0;cursor:pointer;overflow:hidden;
  border-radius:var(--radius-sm);background:var(--navy-800);line-height:0;
  box-shadow:var(--shadow-xs);transition:transform .18s,box-shadow .18s;
}
.gallery__item img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;display:block;transition:transform .3s}
.gallery__item:hover{transform:translateY(-3px);box-shadow:0 16px 36px -18px rgba(0,110,230,.7)}
.gallery__item:hover img{transform:scale(1.05)}
.gallery__item::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius-sm);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);pointer-events:none;
}

.lightbox{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:rgba(2,10,26,.94);padding:52px 12px;
}
.lightbox__img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.lightbox__close,.lightbox__nav{
  position:absolute;z-index:2;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.6rem;line-height:1;
  display:grid;place-items:center;transition:background .15s;
}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--amber-500);color:#3A2000}
.lightbox__close{top:12px;right:12px;font-size:1.9rem}
.lightbox__nav--prev{left:12px;top:50%;transform:translateY(-50%)}
.lightbox__nav--next{right:12px;top:50%;transform:translateY(-50%)}
.lightbox__count{
  position:absolute;left:0;right:0;bottom:14px;margin:0;text-align:center;
  color:#BCD4EC;font-family:var(--display);letter-spacing:.1em;font-size:.86rem;
}

/* ---------- Meet Daniel (trust block with his photo) ---------- */
.meet{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:28px;align-items:center}
.meet__photo{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.meet__photo img{width:100%;height:auto;display:block}
.meet__photo figcaption{
  position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;line-height:1.15;
  background:rgba(4,20,50,.86);border:1px solid rgba(120,195,255,.42);border-radius:10px;
  padding:10px 16px;color:#fff;box-shadow:0 10px 26px -12px rgba(0,0,0,.8);
}
.meet__photo figcaption b{font-family:var(--display);text-transform:uppercase;font-size:1.1rem;letter-spacing:.03em}
.meet__photo figcaption span{font-size:.8rem;font-weight:600;color:var(--cyan-400)}
.meet__points{list-style:none;padding:0;margin:0 0 20px}
.meet__points li{display:flex;gap:10px;align-items:flex-start;font-weight:600;margin-bottom:.45em}
.meet__points li svg{width:19px;height:19px;flex:0 0 19px;margin-top:4px;stroke:var(--green);stroke-width:3;fill:none}
.meet--onblue .meet__points li{color:#EAF3FC}
.meet--onblue .meet__points li svg{stroke:var(--cyan-400)}

/* ---------- Inclusions ---------- */
.incl{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.incl__item{background:#fff;padding:17px 20px;display:flex;gap:14px;align-items:flex-start}
.incl__item svg{width:22px;height:22px;flex:0 0 22px;margin-top:2px;stroke:var(--green);stroke-width:3;fill:none}
.incl__item b{display:block;color:var(--ink);font-size:1rem;margin-bottom:3px}
.incl__item span{font-size:.92rem;line-height:1.5}

/* ---------- Seasons ---------- */
.season{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:relative;overflow:hidden}
.season::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--grad-brand)}
.season__ico{font-size:1.8rem;margin-bottom:10px;line-height:1}
.season h3{margin-bottom:2px}
.season__when{font-family:var(--display);font-size:.82rem;font-weight:600;letter-spacing:.09em;color:var(--blue-600);margin-bottom:10px}
.season p{font-size:.93rem;margin:0}

/* ---------- Booking layout ---------- */
.book{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.book__side ul{list-style:none;padding:0;margin:24px 0 0}
.book__side li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.book__side li svg{width:20px;height:20px;flex:0 0 20px;stroke:var(--amber-400);stroke-width:3;fill:none;margin-top:5px}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(120deg,var(--amber-500),#FF7A00);position:relative;z-index:1;color:#3A2000;text-align:center;padding:clamp(40px,4.6vw,64px) 0}
.cta h2{color:#2A1700;max-width:24ch;margin:0 auto .4em}
.cta p{color:#5C3A00;font-weight:700;max-width:58ch;margin:0 auto 28px;font-size:1.08rem}

/* ---------- Breadcrumb ---------- */
.crumbs{font-size:.88rem;color:#9DB6CC;padding:0 0 18px;margin:0 0 22px;border-bottom:1px solid rgba(255,255,255,.1)}
/* Breadcrumbs kept in the markup for search engines and screen readers, but
   taken out of the visual flow. Uses the clip technique (not display:none) so
   assistive tech can still read the trail. */
.crumbs--seo{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.crumbs a{color:#CBDDF0}
.crumbs em{font-style:normal;margin:0 8px;opacity:.5}

/* ---------- Prose & tables ---------- */
.prose{max-width:76ch;margin:0 auto}
.prose h2{margin-top:1.5em}
.prose h3{margin-top:1.4em}
.prose ul li::marker{color:var(--blue-600)}
.table-wrap{overflow-x:auto;margin:26px 0;border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line)}
th{background:var(--soft);color:var(--ink);font-family:var(--display);font-size:.82rem;letter-spacing:.06em;font-weight:600}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--soft)}
td b{color:var(--blue-600)}

/* Regular vs Local price chart (mirrors the printed flyer) */
.chart th{text-align:center}
.chart th:first-child,.chart td:first-child{text-align:left}
.chart td{text-align:center;font-family:var(--display);font-size:1.6rem;font-weight:600;padding:18px 16px}
.chart td:first-child{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--ink)}
.chart th{font-size:.95rem;padding:16px}
.chart .was{color:#C2410C;text-decoration:line-through;text-decoration-thickness:2px;opacity:.85}
.chart .now{color:#0B8A4F}
.chart .col-now{background:rgba(15,169,104,.07)}
.chart thead .col-now{background:rgba(15,169,104,.14);color:#0B8A4F}
.chart thead th:first-child{color:var(--blue-700)}
.chart thead .col-was{color:#C2410C}
.pricenote{
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-top:8px;
  font-size:.9rem;font-weight:700;color:var(--ink);
}
.pricenote span{display:flex;align-items:center;gap:8px}
.pricenote svg{width:17px;height:17px;flex:0 0 17px;stroke:var(--green);stroke-width:3;fill:none}

/* ---------- Nearby ---------- */
.nearby{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.nearby a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-sm);
  padding:16px 18px;color:#DCE8F4;font-weight:700;font-size:.93rem;text-decoration:none!important;transition:.16s;
}
.nearby a:hover{background:rgba(255,160,0,.18);border-color:rgba(255,160,0,.5);transform:translateY(-2px)}
.nearby a::after{content:"→";color:var(--amber-400);font-weight:900}

/* ---------- Footer ---------- */
.footer{background:linear-gradient(180deg,rgba(3,20,52,.84),rgba(2,14,38,.90));color:#9DB6CC;padding:44px 0 0;font-size:.94rem}
.footer a{color:#BCD4EC;text-decoration:none}
.footer a:hover{color:var(--amber-400);text-decoration:underline}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:28px;padding-bottom:30px}
.footer h3{color:#fff;font-size:.86rem;letter-spacing:.14em;margin-bottom:16px}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:9px}
.footer__brand img{width:210px;background:#fff;border-radius:10px;padding:10px;margin-bottom:18px}
.footer__brand p{font-size:.92rem;max-width:40ch}
.footer__bar{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.85rem;color:#6E8AA6}

/* ---------- Sticky offer bar ---------- */
.offerbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:block;
  padding:0 0 env(safe-area-inset-bottom);
  background:linear-gradient(90deg,#04173C 0%,#0A3A86 52%,#0B57B8 100%);
  border-top:1px solid rgba(95,212,255,.5);
  box-shadow:0 -12px 34px rgba(0,60,150,.5), inset 0 1px 0 rgba(150,220,255,.3);
}
.offerbar__btns{
  display:grid;grid-template-columns:1fr 1.2fr;gap:10px;
  padding:9px 10px 10px;
}
.offerbar__btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;
  font-weight:600;font-size:1.08rem;border-radius:10px;padding:15px 10px;
  text-decoration:none!important;transition:transform .15s,box-shadow .15s,filter .15s;
}
.offerbar__btn svg{width:21px;height:21px;flex:0 0 21px;fill:none;stroke:currentColor;stroke-width:2.2}
.offerbar__btn:active{transform:translateY(1px)}
.offerbar__btn--call,.offerbar__btn--text{
  background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(150,220,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.offerbar__btn--call:hover,.offerbar__btn--text:hover{background:rgba(255,255,255,.22);box-shadow:var(--glow-blue)}
.offerbar__btn--book{
  background:var(--grad-amber);color:#3A2000;box-shadow:0 10px 26px -10px rgba(255,138,0,.9);
}
.offerbar__btn--book:hover{filter:brightness(1.06)}

/* ---------- Responsive ---------- */
@media (max-width:1040px){
  .grid--4,.price-grid{grid-template-columns:repeat(2,1fr)}
  .regions,.nearby{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:32px}
  .grid--3,.steps,.calc,.book,.footer__grid,.incl,.meet,.ba-grid{grid-template-columns:1fr}
  .nav{display:none}
  .nav-toggle{display:block}
  .nav.is-open{
    display:flex;position:absolute;top:84px;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:#fff;padding:8px 20px 22px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
  }
  .nav.is-open a{padding:15px 0;border-bottom:1px solid var(--line)}
  .nav.is-open .btn{margin-top:16px;padding:17px}
  /* Logo centred and enlarged; the menu button floats to the right of it. */
  .header__in{height:100px;justify-content:center;position:relative}
  .brand{margin:0 auto}
  .brand img{width:206px}
  .nav-toggle{position:absolute;right:0;top:50%;transform:translateY(-50%);margin-left:0}
  .nav.is-open{top:100px}

  /* Hero container reads better centred on a phone, like the reference. */
  .hero__box{text-align:center}
  .hero__box .divider{margin-left:auto;margin-right:auto}
  .hero__box .hero__sub{margin-left:auto;margin-right:auto}
  .hero__box .pricetag,.hero__box .hero__trustline,.hero__box .chips{justify-content:center}
  .hero__box .chips{border-top-color:rgba(255,255,255,.2)}
}
@media (max-width:620px){
  :root{--bar-h:104px}   /* headroom: the sub-line can wrap to two lines */
  .wrap{padding:0 12px}
  .hero__grid{padding:10px 12px 22px;gap:18px}
  .hero__box{padding:20px 16px}

  /* Phones are most of this traffic, so the type steps UP rather than down:
     bigger headlines, bigger body copy, full-width thumb-sized buttons. */
  body{font-size:18.5px;line-height:1.6}
  h1{font-size:2.45rem;line-height:1.02}
  h2{font-size:1.95rem;line-height:1.06}
  h3{font-size:1.3rem}
  .lede{font-size:1.08rem;line-height:1.42}
  .hero__sub{font-size:1.2rem;line-height:1.36;font-weight:700;color:#fff}
  .badge{font-size:.92rem;padding:12px 22px}
  .divider{width:96px;height:6px}
  .section{padding:26px 0}
  .head{margin-bottom:20px}

  .pricetag{font-size:1.06rem;padding:13px 16px}
  .pricetag b{font-size:1.7rem}
  .hero__trustline{font-size:.97rem}
  .chip{font-size:.92rem;padding:10px 15px}

  .btn{width:100%;font-size:1.14rem;padding:17px 22px}
  .btn--lg{font-size:1.2rem;padding:19px 22px}
  .btn-stack{flex-direction:column;align-items:stretch}
  .step-nav{gap:10px}
  .step-nav .btn,.step-back{width:auto;font-size:1.08rem}

  .field-row{grid-template-columns:1fr}
  .grid--2,.price-grid,.meet{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr;gap:8px}
  .ba{aspect-ratio:1/1}
  .ba__grip{width:48px;height:48px}
  .ba__grip svg{width:22px;height:22px}
  .ba-copy .lede{font-size:1.08rem;max-width:none}
  .lightbox{padding:60px 8px}
  .lightbox__close,.lightbox__nav{width:42px;height:42px}
  .meet{gap:18px}
  .meet__photo figcaption{left:10px;bottom:10px;padding:8px 13px}
  /* Short-text card grids stay two-up on phones so sections don't become
     one-card-per-screen. Cards with paragraphs (.card) stay full width. */
  .grid--4,.regions,.nearby{grid-template-columns:1fr 1fr}
  .grid--4 .card{grid-column:1 / -1}
  .guide{padding:16px}
  .guide h3{font-size:1.05rem}
  .guide p{font-size:.95rem;margin-bottom:10px}
  .guide__ico{font-size:1.4rem;margin-bottom:8px}
  .nearby a{padding:13px 14px;font-size:.95rem}
  .region summary{padding:13px 14px;font-size:.95rem}
  .calc__split{flex-direction:column;gap:14px}
  .calc__figure{font-size:3.6rem}
  .brand img{width:212px}
  /* Compact card: icon sits beside the heading instead of stacked above it,
     which removes ~60px of height from every card on a phone. */
  .card{padding:18px;display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center}
  .card__ico{width:44px;height:44px;margin:0;border-radius:10px}
  .card__ico svg{width:21px;height:21px}
  .card h3{margin:0;grid-column:2;font-size:1.16rem;line-height:1.15}
  .card p,.card .svc__price{grid-column:1 / -1;margin:10px 0 0}
  .card .svc__price{padding-top:12px}
  .faq summary{font-size:1.12rem;padding:20px 52px 20px 20px}
  .faq__a{font-size:1.02rem;line-height:1.5;padding:0 20px 16px}
  .stepbox h2,.stepbox .step-h{font-size:1.5rem}
  .tile{font-size:1.02rem;padding:18px 10px}

  /* Price chart: fits a 375px screen without sideways scrolling */
  table{min-width:0}
  .chart td{font-size:1.5rem;padding:14px 6px}
  .chart td:first-child{font-size:1.1rem}
  .chart th{font-size:.85rem;padding:12px 6px}
  .pricenote{font-size:1rem;gap:10px 16px}

    }
@media (min-width:900px){
    }
@media (max-width:400px){
  /* Very small screens: shrink the logo so it can't collide with the menu button */
  .brand img{width:176px}
  .header__in{height:88px}
  .nav.is-open{top:88px}
}
@media (max-width:400px){
  .offerbar__btns{grid-template-columns:1fr 1.15fr;gap:8px;padding:8px 8px 9px}
  .offerbar__btns{
  display:grid;grid-template-columns:1fr 1.2fr;gap:10px;
  padding:9px 10px 10px;
}
.offerbar__btn{font-size:.94rem;padding:13px 4px;gap:6px}
  .offerbar__btn svg{width:17px;height:17px;flex:0 0 17px}
  .ticker__item{font-size:.76rem;padding:8px 15px;letter-spacing:.07em}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  /* Ticker stops moving but stays readable */
  .ticker__track{width:auto;flex-wrap:wrap;justify-content:center}
  .ticker__set:last-child{display:none}
}
@media print{.header,.offerbar,.cta,.stepbox{display:none}body{padding-bottom:0}}

/* "Was" price above a tier amount (matches the flyer's red regular price) */
.price__was{font-size:.86rem;font-weight:700;color:#C2410C;text-decoration:line-through;margin:-4px 0 8px}
.price__gst{font-size:.76rem;font-weight:700;color:var(--muted);letter-spacing:.04em;margin:-4px 0 12px}