/* ============================================================
   LIGHTFIX — shared stylesheet for every page
   Edit colours and spacing here once; all pages pick it up.
   ============================================================ */

:root{
  --ink:#0B0B0D;
  --ink-2:#141418;
  --ink-3:#1E1E24;
  --blue:#2178EB;
  --blue-dim:#1a5cb8;
  --gold:#DCB23C;
  --green:#3BC46F;
  --white:#FFFFFF;
  --grey:#FFFFFF;        /* secondary text is white too */
  --line:rgba(255,255,255,.10);
  --chrome:linear-gradient(178deg,#FFFFFF 0%,#D6D9DE 26%,#8E939C 48%,#E8EBEF 62%,#B4B9C1 100%);
  --wrap:1120px;
  --pad:clamp(20px,5vw,48px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:"Saira",system-ui,-apple-system,sans-serif;
  font-variation-settings:"wdth" 100;
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.band{padding:clamp(52px,8vw,96px) 0}
.band--alt{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
/* Page headings are plain white now — the chrome gradient is gone.
   The LIGHTFIX wordmark still has its metallic look, but that lives in
   the logo image, not in type. */
.chrome{color:#FFFFFF}
h1,h2{
  font-weight:800;font-style:italic;font-variation-settings:"wdth" 90;
  line-height:1.04;letter-spacing:-.018em;margin:0 0 .5em;
}
h1{font-size:clamp(2rem,5.4vw,3.2rem)}
h2{font-size:clamp(1.7rem,4vw,2.5rem)}
h3{font-weight:650;font-size:1.15rem;line-height:1.25;margin:0 0 .35em}
p{margin:0 0 1em;max-width:62ch}
.lede{font-size:clamp(1.05rem,2.2vw,1.25rem);color:#FFFFFF}
.sub{color:var(--grey);font-size:.95rem}
.blue{color:var(--blue)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.85em 1.5em;border-radius:6px;border:1px solid transparent;
  font:inherit;font-weight:650;font-size:1.02rem;text-decoration:none;cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.btn--call{background:var(--blue);color:#fff}
.btn--call:hover{background:var(--blue-dim)}
.btn--ghost{border-color:var(--line);color:var(--white);background:transparent}
.btn--ghost:hover{border-color:var(--grey)}
.btn svg{width:1.05em;height:1.05em;fill:currentColor;flex:none}

/* ---------- header + nav ---------- */
.bar{
  position:sticky;top:0;z-index:50;
  background:rgba(11,11,13,.93);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* Header spans the full viewport, not the 1120px column: logo hard left,
   nav centred in the space between, call button hard right. */
.bar__in{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:10px 20px;
  /* Gutter scales with the viewport so the logo and call button sit ~6.5%
     in from each edge on any screen, matching the reference header. */
  padding:10px clamp(18px,6.5vw,200px);
}
.bar__logo{flex:none;line-height:0;display:block}
.bar__logo img{height:32px;width:auto}
.bar__call{margin-left:auto}
/* Hidden on phones - the top row only has space for the logo and the call
   button there. The same detail is in the footer so it isn't lost. */
.bar__hours{
  display:none;margin:0;max-width:none;text-align:right;
  font-size:.78rem;line-height:1.2;letter-spacing:.04em;
}
.bar__hours strong{display:block;font-weight:650;font-size:.95rem;letter-spacing:0}
.bar .btn{padding:.58em 1.05em;font-size:.94rem}
.mainnav{width:100%;order:3}
.nav{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{
  display:block;text-decoration:none;color:var(--grey);
  font-size:1rem;font-weight:650;padding:.42em .9em;border-radius:5px;
  transition:color .15s ease,background .15s ease;
}
.nav a:hover{color:var(--white);background:rgba(255,255,255,.05)}
.nav a[aria-current="page"]{color:var(--white);background:rgba(33,120,235,.16)}

@media (min-width:900px){
  .bar__in{flex-wrap:nowrap;min-height:88px;padding-top:0;padding-bottom:0;gap:28px}
  .bar__logo img{height:46px}
  .mainnav{width:auto;order:2;margin:0 auto}   /* centres between logo and button */
  .bar__hours{display:block;order:3}
  .bar__call{order:4;margin-left:0}
  .nav{gap:8px}
  .nav a{font-size:1.1rem;padding:.5em 1.1em}
  .bar .btn{padding:.68em 1.3em;font-size:1rem}
}

/* ---------- page heading (inner pages) ---------- */
.phead{padding:clamp(40px,6vw,72px) 0 clamp(24px,3vw,36px)}
.phead p{color:#FFFFFF;font-size:clamp(1.02rem,2vw,1.2rem)}

/* ---------- hero ---------- */
.hero{padding:clamp(36px,6vw,72px) 0 clamp(44px,7vw,80px)}
.hero__grid{display:grid;gap:clamp(30px,5vw,56px);grid-template-columns:1fr}
@media (min-width:900px){.hero__grid{grid-template-columns:1.05fr 1fr;align-items:center}}
.hero h1 em{font-style:italic;color:var(--blue)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 18px}
.hero__note{font-size:.9rem;color:var(--grey);margin:0}

/* ---------- before/after comparison ---------- */
.ba{
  position:relative;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:var(--ink-3);
  aspect-ratio:1.6/1;touch-action:pan-y;
}
.ba__layer{position:absolute;inset:0}
.ba__layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__layer--after{clip-path:inset(0 0 0 var(--split,55%))}
.ph{position:absolute;inset:0;display:grid;place-content:center;gap:10px;text-align:center;padding:16px}
.ph--before{background:radial-gradient(60% 70% at 50% 45%,#6B5320 0%,#2A2312 55%,#141010 100%)}
.ph--after{background:radial-gradient(60% 70% at 50% 45%,#CFE3FF 0%,#5D82AE 50%,#1B2530 100%)}
.ph__lamp{width:min(58%,200px);margin:0 auto;opacity:.9}
.ph__txt{font-size:.68rem;font-weight:650;letter-spacing:.07em;color:rgba(255,255,255,.75)}
.ph--after .ph__txt{color:rgba(20,25,35,.8)}
.ba__badge{
  position:absolute;bottom:12px;z-index:3;
  padding:.32em .75em;border-radius:4px;
  font-size:.66rem;font-weight:650;letter-spacing:.13em;
}
.ba__badge--b{left:12px;background:#4A4D55;color:#fff}
.ba__badge--a{right:12px;background:var(--blue);color:#fff}
.ba__handle{
  position:absolute;top:0;bottom:0;left:var(--split,55%);width:2px;z-index:4;
  background:var(--white);transform:translateX(-1px);pointer-events:none;
}
.ba__handle::after{
  content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--white);
  box-shadow:0 2px 14px rgba(0,0,0,.55);
}
.ba__handle::before{
  content:"◂ ▸";position:absolute;top:50%;left:50%;z-index:1;
  transform:translate(-50%,-50%);color:var(--ink);font-size:.68rem;letter-spacing:-1px;
}
.ba__range{position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
/* max-width:none matters — the global 62ch cap on <p> was boxing this in
   and centring it inside that box instead of under the image. */
.ba__hint{margin:14px 0 0;max-width:none;font-size:1.02rem;font-weight:650;color:var(--grey);text-align:center}

/* ---------- brands we use ---------- */
.brands{
  background:var(--ink-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(30px,4vw,46px) 0;
}
.brands__lbl{
  text-align:center;margin:0 0 20px;max-width:none;
  font-size:.7rem;font-weight:650;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);
}
.brands__row{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:16px;
  justify-content:center;align-items:stretch;
}
/* Both marks are designed for a light background — 3M's red and the
   Meguiar's badge both die on black — so each sits on its own white card. */
.brands__row li{
  background:#fff;border-radius:8px;
  padding:14px 30px;min-width:190px;
  display:grid;place-items:center;
}
/* Logos have wildly different proportions, so cap both dimensions and let
   each one settle inside the same box rather than forcing a fixed height. */
.brands__row img{max-height:46px;max-width:158px;width:auto;height:auto;display:block}
/* Ozito's wordmark is white by design and has no dark version — it gets
   the brand's red behind it instead of a white card. */
.brands__row li.is-red{background:#A50020}
@media (max-width:560px){
  .brands__row li{min-width:0;flex:1 1 140px;padding:12px 18px}
  .brands__row img{max-height:34px;max-width:118px}
}

/* ---------- price finder ---------- */
.pfind{
  display:grid;gap:0;grid-template-columns:1fr;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--ink-2);
}
@media (min-width:820px){.pfind{grid-template-columns:minmax(0,380px) 1fr}}
.pfind__ask{padding:clamp(24px,3vw,34px);border-bottom:1px solid var(--line)}
@media (min-width:820px){
  .pfind__ask{border-bottom:0;border-right:1px solid var(--line)}
}
.pfind__ask label{
  display:block;margin-bottom:12px;
  font-style:italic;font-weight:800;font-variation-settings:"wdth" 90;
  font-size:1.5rem;letter-spacing:-.01em;color:var(--white);
}
.pfind__ask select{font-size:1.05rem;padding:.8em .9em}

.pfind__out{
  padding:clamp(24px,3vw,34px);
  display:flex;flex-direction:column;justify-content:center;
  min-height:190px;
}
.pfind__hint{margin:0;color:#FFFFFF}
.pfind__car{
  margin:0 0 14px;
  font-style:italic;font-weight:800;font-variation-settings:"wdth" 90;
  font-size:1.6rem;line-height:1;
}
.pfind__figs{display:flex;flex-wrap:wrap;gap:12px}
.pfig{
  flex:1 1 150px;border:1px solid var(--line);border-radius:8px;
  padding:14px 18px;background:var(--ink);
}
.pfig__lbl{
  display:block;font-size:.68rem;font-weight:650;letter-spacing:.16em;
  text-transform:uppercase;opacity:.65;margin-bottom:4px;
}
.pfig__num{
  font-style:italic;font-weight:800;font-variation-settings:"wdth" 90;
  font-size:2.3rem;line-height:1;
}
.pfind__out[data-state="a"] .pfig__num{color:var(--blue)}
.pfind__out[data-state="b"] .pfig__num{color:var(--gold)}
.pfind__sub{margin:16px 0 0;font-size:.92rem;opacity:.8;max-width:46ch}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;
  padding:18px 40px 18px 0;position:relative;
  font-weight:650;font-size:1.06rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:10px;top:50%;
  width:10px;height:10px;margin-top:-7px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq details p{margin:0 0 20px;max-width:70ch;opacity:.85}

/* ---------- included list ---------- */
.incl{list-style:none;margin:0;padding:0;display:grid;gap:2px 32px;grid-template-columns:1fr}
@media (min-width:700px){.incl{grid-template-columns:1fr 1fr}}
.incl li{padding:9px 0 9px 26px;position:relative;color:#FFFFFF;font-size:.98rem}
.incl li::before{content:"";position:absolute;left:0;top:19px;width:12px;height:2px;background:var(--blue)}

/* ---------- gallery ---------- */
.shots{display:grid;gap:26px;grid-template-columns:1fr}
@media (min-width:640px){.shots{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.shots{grid-template-columns:repeat(3,1fr)}}
.shot__cap{margin:12px 0 0;font-size:.9rem;color:var(--grey)}
.shot__cap strong{display:block;color:var(--white);font-weight:650;font-size:.98rem}

/* ---------- service area ---------- */
.suburbs{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:22px 0 0;list-style:none}
.suburbs li{border:1px solid var(--line);border-radius:4px;padding:.4em .8em;font-size:.88rem;color:#FFFFFF}

/* ---------- forms ---------- */
.formgrid{display:grid;gap:16px;grid-template-columns:1fr;max-width:640px}
@media (min-width:640px){.formgrid{grid-template-columns:1fr 1fr}.full{grid-column:1/-1}}
label{display:block;font-size:.86rem;font-weight:650;margin-bottom:6px;color:#FFFFFF}
input,select,textarea{
  width:100%;font:inherit;font-size:1rem;
  background:var(--ink-2);color:var(--white);
  border:1px solid var(--line);border-radius:6px;padding:.75em .85em;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
textarea{min-height:110px;resize:vertical}
input[type=file]{padding:.6em;font-size:.88rem;color:var(--grey)}
input[type=file]::file-selector-button{
  font:inherit;font-weight:650;font-size:.86rem;margin-right:12px;
  background:var(--ink-3);color:var(--white);border:1px solid var(--line);
  border-radius:4px;padding:.5em 1em;cursor:pointer;
}
.hp{position:absolute!important;left:-9999px}
.opt{font-weight:400;color:var(--grey)}

/* ---------- contact rail ---------- */
.cgrid{display:grid;gap:clamp(32px,5vw,64px);grid-template-columns:1fr}
@media (min-width:900px){.cgrid{grid-template-columns:1.3fr 1fr}}
.card{border:1px solid var(--line);border-radius:8px;padding:26px 24px;background:var(--ink-2)}
.card+.card{margin-top:18px}
.card p:last-child{margin-bottom:0}
.big-num{
  font-style:italic;font-weight:800;font-variation-settings:"wdth" 90;
  font-size:1.75rem;line-height:1.1;text-decoration:none;display:inline-block;
}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:clamp(44px,6vw,74px) 0 0;font-size:.95rem}
.foot__grid{display:grid;gap:clamp(30px,5vw,64px);grid-template-columns:1fr}
@media (min-width:760px){.foot__grid{grid-template-columns:1.25fr 1fr 1.15fr}}
.foot__logo{width:100%;max-width:280px;height:auto;display:block;margin-bottom:18px}
.foot__brand p{margin:0;max-width:34ch}
.foot__h{
  font-style:normal;font-variation-settings:"wdth" 100;
  font-size:1.08rem;font-weight:650;letter-spacing:0;
  margin:0 0 14px;
}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:7px 0}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot__bar{
  border-top:1px solid var(--line);
  margin-top:clamp(34px,4vw,54px);
  padding-top:22px;padding-bottom:30px;
  font-size:.88rem;
}
.foot__bar p{margin:0}

/* ---------- fixed mobile call bar ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,11,13,.96);border-top:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.callbar .btn{width:100%}
@media (min-width:720px){.callbar{display:none}}
@media (max-width:719px){body{padding-bottom:78px}}

/* ---------- service area map ---------- */
.areagrid{display:grid;gap:clamp(24px,4vw,44px);grid-template-columns:1fr;align-items:center;margin-bottom:28px}
@media (min-width:900px){.areagrid{grid-template-columns:1fr 1fr}}
.areamap{
  width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:10px;background:var(--ink);
}
.areagrid .suburbs{margin:0;align-content:center}

/* ---------- split before/after hero ---------- */
.shero{
  position:relative;display:flex;align-items:center;
  min-height:clamp(520px,80vh,780px);
  overflow:hidden;border-bottom:1px solid var(--line);
}
.shero__media{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.shero__half{position:relative;overflow:hidden}
.shero__half img{width:100%;height:100%;object-fit:cover;object-position:center}
.shero__half+.shero__half{box-shadow:-1px 0 0 0 rgba(245,246,248,.5)}
.shero__tag{
  position:absolute;bottom:16px;z-index:2;
  padding:.32em .8em;border-radius:4px;
  font-size:.66rem;font-weight:650;letter-spacing:.14em;
}
.shero__tag--b{left:16px;background:rgba(16,16,20,.88);color:#fff}
.shero__tag--a{right:16px;background:var(--blue);color:#fff}
.shero__in{position:relative;z-index:3;width:100%;text-align:center;padding:52px 0 74px}
/* The copy carries its own backing, so the photos stay at full brightness
   instead of sitting under a dark wash. */
.shero__panel{max-width:780px;margin:0 auto}
/* No box behind the text. Legibility comes from a layered shadow instead:
   a tight dark edge to separate the glyphs from whatever is behind them,
   plus a wide soft falloff that darkens the photo only right around the
   letters. Photos stay at full brightness. */
.shero__panel h1{
  text-shadow:
    0 1px 2px  rgba(0,0,0,1),
    0 2px 7px  rgba(0,0,0,.95),
    0 4px 16px rgba(0,0,0,.9),
    0 8px 40px rgba(0,0,0,.85);
}
.shero__panel .lede{
  text-shadow:
    0 0 2px  rgba(0,0,0,1),
    0 1px 3px rgba(0,0,0,1),
    0 2px 8px rgba(0,0,0,.98),
    0 4px 20px rgba(0,0,0,.92),
    0 8px 44px rgba(0,0,0,.85);
}
.shero h1{
  font-weight:800;font-style:italic;font-variation-settings:"wdth" 90;
  font-size:clamp(2rem,5.6vw,3.4rem);letter-spacing:-.02em;
  /* Each .hl box is ~1.12em tall; line-height must clear that or wrapped
     lines overlap and merge into one jagged shape. */
  line-height:1.06;
  margin:0 0 .45em;
  text-wrap:balance;
}
.shero h1 em{font-style:italic;color:var(--blue)}
.shero .lede{
  margin:0 auto 28px;max-width:48ch;line-height:1.55;
  /* Small text catches less of a soft shadow than a heavy headline does,
     so it gets pure white, more weight, a size bump and a denser halo. */
  color:#FFFFFF;font-weight:650;
  font-size:clamp(1.12rem,2.4vw,1.4rem);
}
.shero__row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:stretch}
.shero__btn{font-size:1.05rem;padding:1em 1.8em}
.shero__note{margin:24px 0 0;font-size:.88rem;color:var(--grey)}

/* review badge — deliberately light, so it reads as a real review chip */
.grate{
  background:#FFFFFF;color:#16181C;
  border-radius:6px;padding:10px 18px;
  display:flex;flex-direction:row;align-items:center;gap:12px;
  text-align:left;box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.grate__g{width:30px;height:30px;flex:none}
.grate__txt{display:flex;flex-direction:column}
.grate p{margin:0;max-width:none}
.grate__lbl{font-size:.66rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:#5F636B}
.grate__fig{display:flex;align-items:center;gap:8px;margin:1px 0}
.grate__n{
  font-style:italic;font-weight:800;font-variation-settings:"wdth" 90;
  font-size:1.45rem;line-height:1;
}
.grate__stars{color:#E0A500;letter-spacing:1px;font-size:.95rem;line-height:1}

@media (max-width:620px){
  .shero__tag{bottom:12px;font-size:.6rem;padding:.28em .6em}
  .shero__tag--b{left:10px}
  .shero__tag--a{right:10px}
  .shero__row{flex-direction:column;align-items:center}
  .grate{text-align:center}
  .shero__btn{width:100%;max-width:320px}
}

/* On a phone, two vertical strips would be ~190px wide and crop the lamps out
   again — so the halves stack, keeping each panel landscape. */
@media (max-width:720px){
  .shero__media{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .shero__half+.shero__half{box-shadow:0 -1px 0 0 rgba(245,246,248,.5)}
}

/* ---------- "See the difference" ---------- */
/* Wider than the normal column so the comparison is the thing you notice. */
.wrap--wide{max-width:1460px}
.diffgrid{display:grid;gap:clamp(26px,3vw,48px);grid-template-columns:1fr}
@media (min-width:900px){
  .diffgrid{grid-template-columns:2.7fr 1fr;align-items:center}
}
.bigclaim{
  font-style:italic;font-weight:800;font-variation-settings:"wdth" 90;
  font-size:clamp(1.55rem,2.7vw,2.35rem);line-height:1.06;letter-spacing:-.015em;
  margin:0 0 26px;max-width:14ch;
}

/* ---------- process steps ---------- */
.psteps{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:560px){.psteps{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.psteps{grid-template-columns:repeat(5,1fr)}}
.pstep{
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:8px;overflow:hidden;
}
.pstep img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;display:block}
.pstep__body{display:flex;align-items:baseline;gap:10px;padding:15px 16px 17px}
.pstep__n{
  font-style:italic;font-weight:800;font-variation-settings:"wdth" 90;
  font-size:1.5rem;line-height:1;color:var(--blue);flex:none;
}
.pstep h3{margin:0;font-size:1rem;line-height:1.22;font-weight:650}

/* Full-bleed container: no max-width, and a tighter gutter than --pad's
   5vw, which would otherwise eat ~130px a side on a wide monitor. */
.wrap--bleed{
  max-width:none;
  padding-left:clamp(16px,2.2vw,40px);
  padding-right:clamp(16px,2.2vw,40px);
}
@media (min-width:1040px){
  .wrap--bleed .psteps{gap:20px}
  .pstep__body{padding:18px 20px 20px}
  .pstep__n{font-size:1.7rem}
  .pstep h3{font-size:1.08rem}
}

/* ---------- price teaser + payment methods ---------- */
.green{color:var(--green)}
.payrow{display:grid;gap:clamp(26px,4vw,52px);grid-template-columns:1fr;align-items:center}
@media (min-width:820px){.payrow{grid-template-columns:1fr auto}}
/* Card-network marks are all designed for a light background. */
.pay{background:#fff;border-radius:10px;padding:18px 24px;display:grid;place-items:center}
.pay img{width:100%;max-width:250px;height:auto;display:block}

/* The price line carries this whole band on its own now, so it scales
   up to fill the column rather than sitting like a normal section head. */
.payrow h2.green{
  font-size:clamp(2.3rem,6vw,4.4rem);
  line-height:.97;margin:0 0 .42em;
}
.payrow .btn{font-size:1.05rem;padding:.95em 1.7em}
.pay__lbl{
  margin:0 0 12px;max-width:none;text-align:center;
  font-size:.72rem;font-weight:650;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);
}

/* ---------- centred page blocks ---------- */
/* Centres a section's own content. Paragraphs need the auto margins too:
   the global 62ch cap makes them narrower than the column, so without it
   they sit left and only their text is centred. */
.ta-c{text-align:center}
.ta-c p{margin-left:auto;margin-right:auto}
.ta-c .faq{
  margin-left:auto;margin-right:auto;
  text-align:left;          /* questions and answers stay left-aligned to read */
}

/* Pricing: the finder is a block in its own right, so cap and centre it
   rather than letting it stretch the full column width. */
.ta-c .pfind{max-width:940px;margin-left:auto;margin-right:auto;text-align:left}

/* ---------- pricing: photo band ---------- */
/* Blur and darkening are baked into the JPEG, not done with a CSS filter —
   a filter on a large background repaints every scroll frame. */
.pbg{
  background:var(--ink) url("../images/pricing-bg.jpg") center / cover no-repeat;
  border-bottom:1px solid var(--line);
  /* On a wide monitor the band would otherwise be ~4.5:1 while the photo is
     2.6:1, and cover would crop a third of its height — taking the tops of
     the projectors with it. A min-height keeps the band nearer the photo's
     shape so the whole lamp stays in frame. */
  min-height:clamp(420px,30vw,780px);
  display:flex;flex-direction:column;justify-content:center;
}
/* A phone's band is tall and narrow; cover would scale the 3:1 file to fill
   the height and crop away ~80% of its width. A portrait crop keeps ~84%. */
@media (max-width:820px){
  .pbg{background-image:url("../images/pricing-bg-narrow.jpg")}
}
.pbg .pfind{background:rgba(14,14,18,.82)}
.pbg .pfig{background:rgba(9,9,12,.78)}
.pbg select{background:rgba(9,9,12,.85)}

/* Same legibility treatment as the home hero: layered shadow, no boxes */
.pbg h1,
.pbg .phead p{
  text-shadow:
    0 1px 2px  rgba(0,0,0,1),
    0 2px 7px  rgba(0,0,0,.95),
    0 4px 16px rgba(0,0,0,.9),
    0 8px 40px rgba(0,0,0,.85);
}

/* ---------- mobile menu ---------- */
.navtoggle{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 11px;margin-left:auto;
  background:transparent;border:1px solid rgba(255,255,255,.20);
  border-radius:8px;cursor:pointer;flex:none;
}
.navtoggle span{
  display:block;height:2px;background:#fff;border-radius:2px;
  transition:transform .2s ease,opacity .2s ease;
}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:899px){
  /* Collapsed by default; the button reveals it as a stacked list. */
  .mainnav{display:none}
  .mainnav.is-open{display:block}
  .nav{flex-direction:column;gap:0;padding:4px 0 10px}
  .nav a{
    padding:.78em .2em;font-size:1.06rem;border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav li:last-child a{border-bottom:0}
  .bar__call{margin-left:12px}
}
@media (max-width:719px){
  /* The fixed call bar at the bottom of the screen covers this already,
     so the header keeps just the logo and the menu button. */
  .bar__call{display:none}
}
@media (min-width:900px){
  .navtoggle{display:none}
  .mainnav{display:block}
}

/* ---------- reply preference ---------- */
/* Radios, not checkboxes: the options are mutually exclusive, and a radio
   group makes that clear to both the person and a screen reader. */
input[type=radio],input[type=checkbox]{
  width:auto;margin:0 9px 0 0;padding:0;
  accent-color:var(--blue);vertical-align:middle;
}
.choice{border:0;margin:0;padding:0;min-width:0}
.choice legend{
  padding:0;margin-bottom:10px;
  font-size:.86rem;font-weight:650;color:#FFFFFF;
}
.choice label{
  display:inline-flex;align-items:center;margin:0 10px 10px 0;
  padding:.6em 1em;border:1px solid var(--line);border-radius:6px;
  background:var(--ink-2);cursor:pointer;font-weight:400;font-size:.98rem;
}
.choice label:hover{border-color:var(--grey)}
.choice label:has(input:checked){
  border-color:var(--blue);background:rgba(33,120,235,.16);
}

/* ---------- gallery ---------- */
/* Two per row on desktop across the full-bleed column, so each slider is
   about the size of the one on the home page. */
/* Capped so each slider lands at ~960px, the same width the home page
   comparison gets inside its 1460px column. */
.gal{
  display:grid;gap:clamp(20px,2.4vw,34px);grid-template-columns:1fr;
  max-width:1954px;margin:0 auto;
}
@media (min-width:900px){.gal{grid-template-columns:1fr 1fr}}
.galitem{margin:0}

/* ---------- scroll reveal (home page) ---------- */
/* The hidden state is only applied once JS adds .reveal-ready, so if the
   script fails or is blocked the page still renders normally. */
[data-reveal].reveal-ready > section{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1),
             transform .65s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].reveal-ready > section.is-in{opacity:1;transform:none}

/* Cards inside a section come in just behind it, one after another */
[data-reveal].reveal-ready .pstep,
[data-reveal].reveal-ready .brands__row li{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .5s ease;
}
[data-reveal].reveal-ready section.is-in .pstep,
[data-reveal].reveal-ready section.is-in .brands__row li{opacity:1;transform:none}
[data-reveal].reveal-ready .pstep:nth-child(1),
[data-reveal].reveal-ready .brands__row li:nth-child(1){transition-delay:.08s}
[data-reveal].reveal-ready .pstep:nth-child(2),
[data-reveal].reveal-ready .brands__row li:nth-child(2){transition-delay:.16s}
[data-reveal].reveal-ready .pstep:nth-child(3),
[data-reveal].reveal-ready .brands__row li:nth-child(3){transition-delay:.24s}
[data-reveal].reveal-ready .pstep:nth-child(4),
[data-reveal].reveal-ready .brands__row li:nth-child(4){transition-delay:.32s}
[data-reveal].reveal-ready .pstep:nth-child(5){transition-delay:.40s}

/* ---------- footer social ---------- */
.foot__social{padding:4px 0}
.foot__social--first{padding-top:14px}
/* Icons take their colour from the link, so one rule per network tints the
   filled Facebook, TikTok and YouTube glyphs and the stroked Instagram one. */
.soc{display:inline-flex;align-items:center;gap:10px;color:#FFFFFF;transition:color .16s ease}
.soc svg{width:26px;height:26px;flex:none}
.soc--fb svg,
.soc--tt svg,
.soc--yt svg{fill:currentColor}
.soc:hover{text-decoration:none}
.soc--fb:hover{color:#1877F2}
.soc--ig:hover{color:#E1306C}
.soc--tt:hover{color:#25F4EE}
.soc--yt:hover{color:#FF0000}
.soc span{text-decoration:underline;text-underline-offset:3px}

/* ---------- video card ---------- */
.vcard{
  position:relative;display:block;overflow:hidden;
  max-width:1100px;margin:clamp(28px,4vw,46px) auto 0;
  border:1px solid var(--line);border-radius:10px;
  text-decoration:none;
}
.vcard img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.vcard__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(64px,7vw,92px);
  transition:transform .18s ease;
}
.vcard__play svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.6))}
.vcard:hover .vcard__play{transform:translate(-50%,-50%) scale(1.08)}
.vcard__label{
  position:absolute;left:0;right:0;bottom:0;
  padding:38px 22px 18px;
  background:linear-gradient(0deg,rgba(8,8,10,.85),rgba(8,8,10,0));
  color:#FFFFFF;font-weight:650;font-size:1.02rem;text-align:center;
}


/* Map reused inside the narrow contact sidebar card. The label type in that
   copy of the SVG is scaled up to stay legible at this width. */
.areamap--card{max-width:330px;margin:0 auto}