/* =====================================================================
   FLAWLESS — SITE STYLESHEET
   ---------------------------------------------------------------------
   TYPE: one family, Archivo variable, using its WIDTH axis for hierarchy.
   Headlines at wdth 125 (expanded) read confident; body at wdth 100.
   One font file instead of two — cohesive and one fewer request.

   COLOUR: emerald is the only accent, everything else neutral. Two
   competing accents on a dark ground read busy. Every pairing checked
   against WCAG AA; lowest in the system is 5.32:1 against a 4.5 need.

   Background is #0C0D0F not pure black — true black makes surfaces above
   it appear to glow and crushes shadow detail in photography.

   MOTION: only transform and opacity are ever animated. Those run on the
   compositor without triggering layout or paint. Animating width, top or
   margin instead forces a re-layout every frame — the usual cause of
   janky scrolling on mid-range phones.
   ===================================================================== */
:root{
  --bg:#0C0D0F;
  --surface:#141619;
  --surface-2:#1A1D21;
  --line:#262A2F;
  --line-strong:#363B42;

  --ink:#F2F3F5;
  --ink-dim:#8B9199;

  --green:#3ECF8E;
  --green-deep:#2FB77B;
  --green-wash:rgba(62,207,142,.10);

  --pale:#A8B2BA;
  --danger:#E5766B;
  --on-green:#0C0D0F;

  --font:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
html{scroll-behavior:smooth}
html.nav-locked,html.nav-locked body{overflow:hidden;height:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--font);
  font-variation-settings:'wdth' 100;font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
button,input,select,textarea{font-family:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:inherit}
::selection{background:var(--green);color:var(--on-green)}
img{max-width:100%;display:block}

.display{font-variation-settings:'wdth' 125;font-weight:700;text-transform:uppercase;letter-spacing:-.005em}
.micro{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.narrow{max-width:720px}

/* ---------------- NAV ---------------- */
/* `.nav` itself must NOT carry backdrop-filter (or any transform/filter/
   perspective/will-change) — any of those turn it into a containing
   block for `position:fixed` descendants, which silently traps the
   full-screen mobile menu (`.nav-mobile`, a child of `.nav`) inside the
   nav bar's own small box instead of the viewport. The blur lives on a
   ::before behind the bar's content instead, so `.nav` stays a plain
   positioning root and the fixed overlay correctly fills the screen. */
.nav{
  position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);
}
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(12,13,15,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-variation-settings:'wdth' 125;font-weight:800;font-size:17px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;flex-shrink:0}
.brand span{color:var(--green)}
.nav-links{display:none;align-items:center;gap:26px}
@media(min-width:820px){.nav-links{display:flex}}
.nav-links a{
  font-size:13px;font-weight:500;color:var(--ink-dim);text-decoration:none;
  padding:6px 0;border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--green)}
.nav-cta{
  background:var(--green);color:var(--on-green);border:1px solid var(--green);border-radius:6px;
  padding:10px 16px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;transition:background .2s var(--ease);white-space:nowrap;
  font-variation-settings:'wdth' 112;
}
.nav-cta:hover{background:var(--green-deep)}
.nav-cta-ghost{
  background:transparent;color:var(--ink);border:1px solid var(--line-strong);border-radius:6px;
  padding:10px 14px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:none;
  text-decoration:none;transition:border-color .2s var(--ease),color .2s var(--ease);white-space:nowrap;
  font-variation-settings:'wdth' 108;display:none;
}
.nav-cta-ghost:hover{border-color:var(--ink-dim);color:var(--green)}
@media(min-width:900px){.nav-cta-ghost{display:inline-block}}
/* Deliberately hidden below 900px rather than shrunk to fit — this
   button's copy ("Do you offer PPF services?") is nearly double the
   length of "Get my price", and the mobile top bar already has that
   button plus the menu toggle in a narrow space. Rather than cram a
   third element in or let it wrap awkwardly, it moves into the mobile
   menu itself below, where there's room for it to actually read well. */
.nav-toggle{
  display:block;background:none;border:1px solid var(--line-strong);border-radius:5px;padding:8px 10px;cursor:pointer;
  position:relative;z-index:2;width:34px;height:34px;
}
@media(min-width:820px){.nav-toggle{display:none}}
.nav-toggle span{
  display:block;width:16px;height:1.5px;background:var(--ink);margin:3px auto;
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.nav-toggle.open span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

/* Full-screen slide-in overlay, matching the mobile nav pattern used
   on klevadigital.com: the panel slides in from the right covering the
   whole viewport, then each link cascades in top-to-bottom with a
   staggered fade + rise, rather than a plain dropdown under the bar. */
.nav-mobile{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  position:fixed;inset:0;z-index:1;
  background:var(--bg);border-top:none;padding:0 28px;
  visibility:hidden;opacity:0;transform:translateX(100%);
  transition:transform .45s var(--ease),opacity .4s var(--ease),visibility 0s linear .45s;
}
.nav-mobile.open{
  visibility:visible;opacity:1;transform:translateX(0);
  transition:transform .45s var(--ease),opacity .4s var(--ease),visibility 0s linear 0s;
}
@media(min-width:820px){.nav-mobile{display:none!important}}
.nav-mobile a{
  display:block;width:100%;max-width:420px;padding:13px 0;font-size:26px;font-weight:700;text-decoration:none;
  color:var(--ink);border-bottom:1px solid var(--line);
  font-variation-settings:'wdth' 118;letter-spacing:-.005em;
  opacity:0;transform:translateY(16px);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.nav-mobile.open a{opacity:1;transform:translateY(0)}
.nav-mobile a:nth-child(1){transition-delay:.06s}
.nav-mobile a:nth-child(2){transition-delay:.11s}
.nav-mobile a:nth-child(3){transition-delay:.16s}
.nav-mobile a:nth-child(4){transition-delay:.21s}
.nav-mobile a:nth-child(5){transition-delay:.26s}
.nav-mobile a:last-child{border-bottom:none}
.nav-mobile-cta{
  display:block;width:100%;max-width:420px;text-align:center;margin-top:22px;padding:15px;border-radius:6px;
  background:var(--green)!important;border:1px solid var(--green)!important;color:var(--on-green)!important;
  font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  font-variation-settings:'wdth' 112;
}
@media(prefers-reduced-motion:reduce){
  .nav-toggle span,.nav-mobile,.nav-mobile a{transition:none!important}
}

/* ---------------- FOOTER ---------------- */
.footer{border-top:1px solid var(--line);margin-top:70px;padding:44px 0 34px;background:var(--surface)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:720px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.footer h4{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 14px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:9px}
.footer a{font-size:13.5px;color:var(--ink-dim);text-decoration:none;transition:color .2s var(--ease)}
.footer a:hover{color:var(--green)}
.footer-blurb{font-size:13.5px;color:var(--ink-dim);line-height:1.7;max-width:340px;margin:12px 0 0}
.footer-base{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12px;color:var(--ink-dim)}

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--green);color:var(--on-green);border:1px solid var(--green);
  border-radius:6px;padding:15px 26px;text-decoration:none;cursor:pointer;
  font-variation-settings:'wdth' 115;font-weight:700;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease);
}
.btn:hover{background:var(--green-deep);border-color:var(--green-deep)}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.3;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--pale);outline-offset:3px}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{background:transparent;border-color:var(--green);color:var(--green)}
.btn-full{width:100%}

/* ---------------- PAGE HEADERS ---------------- */
.page-hd{padding:64px 0 40px;border-bottom:1px solid var(--line)}
.page-hd .eyebrow{color:var(--green);margin-bottom:16px}
.page-hd h1{
  font-variation-settings:'wdth' 125;font-weight:700;text-transform:uppercase;
  font-size:clamp(34px,6.5vw,60px);line-height:.96;letter-spacing:-.005em;margin:0 0 16px;
  max-width:100%;overflow-wrap:break-word;
}
.page-hd p{color:var(--ink-dim);font-size:16px;line-height:1.65;max-width:560px;margin:0}

/* ---------------- HOME HERO ---------------- */
.hero{position:relative;padding:70px 0 30px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:80% 45%;opacity:0;transition:opacity .7s var(--ease)}
.hero-bg img.loaded{opacity:1}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,var(--bg) 0%,rgba(12,13,15,.92) 35%,rgba(12,13,15,.55) 62%,rgba(12,13,15,.15) 100%)}
.hero-content{position:relative;z-index:1;max-width:560px}
.hero .eyebrow{color:var(--green);margin-bottom:20px}
.hero h1{
  font-variation-settings:'wdth' 125;font-weight:700;text-transform:uppercase;
  font-size:clamp(40px,8vw,68px);line-height:.92;letter-spacing:-.005em;margin:0 0 20px;
  max-width:100%;overflow-wrap:break-word;
}
.hero h1 em{font-style:normal;color:var(--green)}
.hero p.lead{color:var(--ink-dim);font-size:16.5px;line-height:1.65;max-width:440px;margin:0 0 28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px}
.hero-reg-label{display:block;font-size:16px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.hero-reg{display:flex;gap:10px;max-width:440px}
.hero-reg input{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  padding:13px 14px;border-radius:6px;font-family:var(--font);font-size:16px;font-weight:600;letter-spacing:.04em;color-scheme:dark}
.hero-reg input::placeholder{font-weight:400;letter-spacing:normal;color:var(--ink-dim)}
.hero-reg input:focus{outline:none;border-color:var(--green)}
.hero-reg .btn{white-space:nowrap;flex-shrink:0}
.hero-reg-or{font-size:12.5px;color:var(--ink-dim);margin:10px 0 0}
.hero-reg-or a{color:var(--ink-dim);text-decoration:underline;text-underline-offset:2px}
.hero-reg-or a:hover{color:var(--green)}
@media(max-width:400px){.hero-reg{flex-direction:column}}
.media svg.hero-car{width:100%;height:100%;display:block}

/* ---------------- MEDIA ---------------- */
.media{position:relative;overflow:hidden;border-radius:10px;background:#0F1113;border:1px solid var(--line)}
.media img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease)}
.media img.loaded{opacity:1}
.media-16-10{aspect-ratio:16/10}
.media-4-3{aspect-ratio:4/3}
.media-16-9{aspect-ratio:16/9}
.media-20-7{aspect-ratio:20/7}
.media-3-4{aspect-ratio:3/4}
.media-cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));
  color:rgba(255,255,255,.74);font-size:9.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
}

/* ---------------- SECTIONS ---------------- */
.section{padding:64px 0;border-top:1px solid var(--line)}
.section-hd{margin-bottom:34px;max-width:600px}
.section-hd .eyebrow{color:var(--green);display:block;margin-bottom:12px}
.section-hd h2{
  font-variation-settings:'wdth' 125;font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,4.5vw,38px);line-height:1;letter-spacing:-.005em;margin:0 0 12px;
}
.section-hd p{color:var(--ink-dim);font-size:15px;line-height:1.65;margin:0}

/* steps */
.steps{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr);gap:28px;border-top:none}}
.step{padding:22px 0;border-bottom:1px solid var(--line)}
@media(min-width:760px){.step{border-bottom:none;border-top:2px solid var(--green);padding:20px 0 0}}
.step .n{font-variation-settings:'wdth' 125;font-weight:800;font-size:13px;color:var(--green);letter-spacing:.1em;margin-bottom:9px}
.step h3{font-variation-settings:'wdth' 118;font-weight:700;text-transform:uppercase;font-size:17px;margin:0 0 7px;letter-spacing:.01em}
.step p{color:var(--ink-dim);font-size:14px;line-height:1.6;margin:0}

/* "Different from the usual" — photo alongside the card grid. Stacks
   (photo on top) below 900px since the 2x2 cards already need their
   own full-width column at that point; side-by-side only once there's
   room for both without squeezing the cards into a single narrow one. */
.diff-split{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
@media(min-width:900px){.diff-split{grid-template-columns:0.85fr 1.15fr}}
.diff-photo{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/3}
.diff-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* cards grid */
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.grid.g2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:860px){.grid.g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:640px){.grid.g3{grid-template-columns:repeat(2,1fr)}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.card-link{text-decoration:none;color:inherit;display:block}
.card-link:hover{border-color:var(--green-deep);transform:translateY(-2px)}
.card-body{padding:20px}
.card h3{font-variation-settings:'wdth' 118;font-weight:700;font-size:17px;margin:0 0 8px;line-height:1.25;letter-spacing:.005em}
.card p{color:var(--ink-dim);font-size:13.5px;line-height:1.6;margin:0}
.card .meta{font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--green);margin-bottom:10px}

/* pricing table */
.ptable{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.ptable th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-dim);padding:0 10px 12px;border-bottom:1px solid var(--line-strong)}
.ptable th.n,.ptable td.n{text-align:right}
.ptable td{padding:14px 10px;border-bottom:1px solid var(--line)}
.ptable tr:last-child td{border-bottom:none}
.ptable .cov{font-variation-settings:'wdth' 115;font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.01em}
.ptable .num{font-variation-settings:'wdth' 118;font-weight:700;font-variant-numeric:tabular-nums}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 0;font-size:15.5px;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--green);font-size:19px;font-weight:400;flex-shrink:0;line-height:1}
.faq details[open] summary::after{content:'\2013'}
.faq p{color:var(--ink-dim);font-size:14.5px;line-height:1.75;margin:0 0 19px;max-width:640px}

/* trust strip */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust span{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}

/* cta band */
.cta-band{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:44px 30px;text-align:center;margin-top:64px;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:70px;height:1px;background:var(--green)}
.cta-band h2{font-variation-settings:'wdth' 125;font-weight:700;text-transform:uppercase;font-size:clamp(26px,4.5vw,38px);line-height:1;margin:0 0 14px}
.cta-band p{color:var(--ink-dim);font-size:15px;max-width:420px;margin:0 auto 24px;line-height:1.65}

/* ---------------- ABOUT ---------------- */
.prose{max-width:680px}
.prose p{color:var(--ink-dim);font-size:16px;line-height:1.8;margin:0 0 20px}
.prose p strong{color:var(--ink);font-weight:600}
.prose h2{font-variation-settings:'wdth' 125;font-weight:700;text-transform:uppercase;font-size:24px;margin:44px 0 16px;letter-spacing:-.005em}
.prose h3{font-variation-settings:'wdth' 118;font-weight:700;font-size:18px;margin:32px 0 12px}
.prose ul{color:var(--ink-dim);font-size:16px;line-height:1.8;padding-left:22px;margin:0 0 20px}
.prose li{margin-bottom:9px}
.prose blockquote{border-left:2px solid var(--green);padding-left:22px;margin:32px 0;color:var(--ink);font-size:18px;line-height:1.7}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin:40px 0}
.stat{border-top:2px solid var(--green);padding-top:16px}
.stat .v{font-variation-settings:'wdth' 125;font-weight:800;font-size:32px;line-height:1}
.stat .l{font-size:11px;color:var(--ink-dim);margin-top:7px;line-height:1.5}

/* ---------------- GALLERY ---------------- */
.gal{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:600px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal-item{position:relative;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:#0F1113;cursor:pointer;
  transition:border-color .25s var(--ease)}
.gal-item:hover{border-color:var(--green-deep)}
.gal-item img{aspect-ratio:4/3;width:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease),transform .5s var(--ease)}
.gal-item img.loaded{opacity:1}
.gal-item:hover img{transform:scale(1.03)}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:30px 15px 14px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.86));pointer-events:none}
.gal-cap .v{font-variation-settings:'wdth' 115;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.01em}
.gal-cap .d{font-size:11px;color:var(--pale);margin-top:3px}

.gal-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.gal-filter button, .q-filter button{
  background:transparent;border:1px solid var(--line-strong);color:var(--ink-dim);
  border-radius:99px;padding:8px 16px;font-size:11.5px;font-weight:600;letter-spacing:.06em;cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.gal-filter button:hover, .q-filter button:hover{border-color:var(--green);color:var(--green)}
.gal-filter button.on, .q-filter button.on{background:var(--green);border-color:var(--green);color:var(--on-green)}
.q-filter{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}

/* ---------------- BLOG ---------------- */
.post-hd{padding:56px 0 34px;border-bottom:1px solid var(--line)}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:18px}
.post-meta .cat{color:var(--green)}
.post-hd h1{font-variation-settings:'wdth' 125;font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,5.5vw,50px);line-height:.98;margin:0 0 16px;letter-spacing:-.005em}
.post-hd .standfirst{color:var(--ink-dim);font-size:17px;line-height:1.65;max-width:600px;margin:0}
.post-body{padding:44px 0 0}
.post-nav{display:flex;justify-content:space-between;gap:16px;margin-top:56px;padding-top:26px;border-top:1px solid var(--line);font-size:13px}
.post-nav a{color:var(--ink-dim);text-decoration:none}
.post-nav a:hover{color:var(--green)}

.callout{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--green);
  border-radius:0 8px 8px 0;padding:20px 22px;margin:32px 0}
.callout p{margin:0;font-size:14.5px;color:var(--ink-dim);line-height:1.7}
.callout p strong{color:var(--ink)}

/* ---------------- MOTION ---------------- */
.reveal{opacity:0;transform:translate3d(0,16px,0)}
.reveal.in{opacity:1;transform:translate3d(0,0,0);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.stagger>*{opacity:0;transform:translate3d(0,12px,0)}
.stagger.in>*{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.stagger.in>*:nth-child(1){transition-delay:.05s}
.stagger.in>*:nth-child(2){transition-delay:.11s}
.stagger.in>*:nth-child(3){transition-delay:.17s}
.stagger.in>*:nth-child(4){transition-delay:.23s}
.stagger.in>*:nth-child(5){transition-delay:.29s}
.stagger.in>*:nth-child(6){transition-delay:.35s}
.stagger.in>*:nth-child(7){transition-delay:.41s}
.stagger.in>*:nth-child(8){transition-delay:.47s}
.stagger.in>*:nth-child(9){transition-delay:.53s}

.section,.media,.card{content-visibility:auto;contain-intrinsic-size:auto 300px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.stagger>*{opacity:1!important;transform:none!important}
}

/* ---------------- SKIP LINK (a11y) ---------------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:var(--on-green);
  padding:12px 18px;z-index:100;font-weight:700;font-size:12px;text-decoration:none}
.skip:focus{left:8px;top:8px}

/* =====================================================================
   QUOTE FLOW
   ===================================================================== */
.q-wrap{max-width:600px;margin:0 auto;padding:38px 22px 90px}
main.q-wide .q-wrap{max-width:1120px}
/* Scoped to the quote flow specifically via the .q-wide class on its
   <main> — confirm/index.html shares .q-wrap too but was deliberately
   kept narrow and minimal, so it's untouched by this. Sizes use
   clamp() with the OLD fixed value as the floor, so mobile looks
   exactly as it always has and nothing shrinks below what already
   worked — only wide screens, where the container is now genuinely
   wider, get the larger end of each range. */
main.q-wide .q-card{padding:clamp(26px,3.4vw,44px) clamp(24px,3.2vw,42px)}
main.q-wide .q-h1{font-size:clamp(29px,3.6vw,46px)}
main.q-wide .q-sub{font-size:clamp(13.5px,1.15vw,16px);margin-bottom:clamp(22px,2.4vw,32px)}
main.q-wide .q-opt{padding:clamp(13px,1.5vw,18px) clamp(14px,1.6vw,20px)}
main.q-wide .q-opt-t{font-size:clamp(15px,1.35vw,17.5px)}
main.q-wide .q-opt-d{font-size:clamp(12px,1.05vw,13.5px)}

.q-progress{margin-bottom:22px}
.q-progress-hd{display:flex;justify-content:space-between;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:9px}
.q-bar{height:2px;background:var(--line);border-radius:1px;overflow:hidden}
/* Scaled, not width-animated: transform is compositor-only, width forces a
   layout recalculation on every frame of the transition. */
.q-bar i{display:block;height:100%;width:100%;background:var(--green);
  transform-origin:left center;transition:transform .5s var(--ease)}

.q-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:26px 24px;margin-bottom:14px;position:relative}
.q-card::before{content:'';position:absolute;top:-1px;left:24px;width:34px;height:1px;background:var(--green)}

.q-h1{font-variation-settings:'wdth' 125;font-weight:700;text-transform:uppercase;font-size:29px;line-height:1;margin:0 0 10px;letter-spacing:-.005em}
.q-h1:focus{outline:none}
.q-h2{font-variation-settings:'wdth' 125;font-weight:700;text-transform:uppercase;font-size:20px;margin:0 0 8px;letter-spacing:-.005em;color:var(--green)}
.q-sub{color:var(--ink-dim);font-size:13.5px;line-height:1.6;margin:0 0 22px}

.q-field{margin-bottom:18px}
.q-field label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px}
.q-field input{width:100%;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  padding:13px 14px;border-radius:6px;font-family:var(--font);font-size:16px;color-scheme:dark}
.q-field input:focus{outline:none;border-color:var(--green)}
.q-field input.err{border-color:var(--danger)}
.q-card-input{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:13px 14px}
.q-card-input.StripeElement--focus{border-color:var(--green)}
.q-card-input.StripeElement--invalid{border-color:var(--danger)}
.q-err{color:var(--danger);font-size:12px;font-weight:500;margin-top:8px}

.q-opts{display:grid;gap:8px;margin-bottom:4px}
.q-opt{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;
  background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:15px;
  cursor:pointer;color:var(--ink);transition:border-color .2s var(--ease),background .2s var(--ease),transform .12s var(--ease)}
.q-opt:hover{border-color:var(--line-strong)}
.q-opt:active{transform:scale(.99)}
.q-opt:focus-visible{outline:2px solid var(--pale);outline-offset:2px}
.q-opt.on{border-color:var(--green);background:var(--green-wash)}
.q-radio{flex-shrink:0;width:15px;height:15px;border:1px solid var(--line-strong);border-radius:50%;position:relative;margin-top:2px;transition:border-color .2s var(--ease)}
.q-opt.on .q-radio{border-color:var(--green)}
.q-radio::after{content:'';position:absolute;inset:0;margin:auto;width:7px;height:7px;border-radius:50%;background:var(--green);opacity:0;transition:opacity .2s var(--ease)}
.q-opt.on .q-radio::after{opacity:1}
.q-opt-t{display:block;font-variation-settings:'wdth' 115;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.01em}
.q-opt-d{display:block;font-size:12px;color:var(--ink-dim);margin-top:4px;line-height:1.45}
.q-opt.on .q-opt-t{color:var(--green)}

.q-media{border-radius:7px;overflow:hidden;border:1px solid var(--line);margin-bottom:16px;background:#0F1113}
.q-media img{width:100%;aspect-ratio:20/7;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.q-media img.loaded{opacity:1}
.q-cov-split{margin-bottom:4px}
@media(min-width:860px){
  .q-cov-split{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:start}
  .q-cov-video{margin-bottom:0}
}
/* Side by side only once the wider quote container actually has room
   for it (860px is comfortably past where two columns plus real
   option text stop feeling cramped) — stacks exactly as before on
   anything narrower, including the old 600px width this used to be
   permanently stuck at. */
.q-cov-video{position:relative;border-radius:7px;overflow:hidden;border:1px solid var(--line);
  margin-bottom:16px;background:#0F1113}
.q-cov-video video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.q-cov-video-label{position:absolute;bottom:10px;left:10px;background:rgba(12,13,15,.72);
  border:1px solid var(--line-strong);color:var(--ink);font-size:12px;font-weight:600;
  padding:5px 10px;border-radius:5px}
/* Stacked full-width, not the side-by-side split the option was named
   for — this page's own container tops out at 600px, and forcing two
   columns into that would leave neither the video nor the option text
   enough room. Same "contained preview panel, not a cinematic
   background" idea as the chosen option, just correctly sized for the
   actual space it has to work with. */

.q-check{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid var(--line);cursor:pointer}
.q-check input{margin-top:2px;accent-color:var(--green);width:15px;height:15px;flex-shrink:0}
.q-check span{font-size:12.5px;color:var(--ink-dim);line-height:1.6}
.q-check span b{color:var(--ink)}
.q-check a{color:var(--green)}

.q-back{display:block;margin:14px auto 0;background:none;border:none;color:var(--ink-dim);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:8px}
.q-back:hover{color:var(--green)}

.q-price{border:1px solid var(--line);border-radius:10px;padding:30px 24px;text-align:center;margin-bottom:14px;
  background:radial-gradient(120% 90% at 50% 0%,var(--green-wash),transparent 62%),var(--surface);position:relative}
.q-price::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:60px;height:1px;background:var(--green)}
.q-price-l{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.q-price-v{font-variation-settings:'wdth' 125;font-weight:800;font-size:clamp(48px,13vw,68px);line-height:1;color:var(--green);font-variant-numeric:tabular-nums}
.q-price-s{font-size:12.5px;color:var(--ink-dim);margin-top:10px}
/* A thin rotating ring stands in for the price while it's still
   loading — a literal "wheel turning" felt right for a car brand, and
   it fills roughly the same visual weight as the big number it
   replaces, so nothing jumps when the real price lands. conic-gradient
   draws the arc, the mask punches out the middle so only a ring shows
   (not a filled pie slice); prefers-reduced-motion already strips all
   animation globally, so this degrades to a static ring, not a spin. */
.q-price-spinner{width:46px;height:46px;margin:8px auto 2px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--green) 0deg,var(--green-deep) 80deg,transparent 100deg,transparent 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
  animation:qSpin .85s linear infinite}
@keyframes qSpin{to{transform:rotate(360deg)}}
.q-split{display:grid;gap:0;margin-top:20px;border-top:1px solid var(--line);text-align:left}
.q-split div{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.q-split div:last-child{border-bottom:none}
.q-split span{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.q-split b{font-variation-settings:'wdth' 118;font-weight:700;font-size:16px}

.q-units{display:grid;gap:9px;margin-bottom:6px}
.q-unit{display:flex;gap:14px;width:100%;text-align:left;background:var(--surface-2);
  border:1px solid var(--line);border-radius:8px;padding:14px;cursor:pointer;color:var(--ink);
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .12s var(--ease)}
.q-unit:hover{border-color:var(--line-strong)}
.q-unit:active{transform:scale(.995)}
.q-unit:focus-visible{outline:2px solid var(--pale);outline-offset:2px}
.q-unit.on{border-color:var(--green);background:var(--green-wash)}
.q-unit-img{flex-shrink:0;width:58px;height:58px;border-radius:6px;overflow:hidden;background:#0F1113;border:1px solid var(--line)}
.q-unit-img img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.q-unit-img img.loaded{opacity:1}
.q-unit-body{flex:1;min-width:0}
.q-unit-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.q-unit-name{font-variation-settings:'wdth' 115;font-weight:700;font-size:14.5px;text-transform:uppercase;letter-spacing:.01em}
.q-unit.on .q-unit-name{color:var(--green)}
.q-tag{font-size:8.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:4px 8px;
  border-radius:3px;border:1px solid var(--line-strong);color:var(--ink-dim);white-space:nowrap}
.q-unit.on .q-tag{border-color:var(--green);color:var(--green)}
.q-rec{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green);background:var(--green-wash);border:1px solid var(--green);
  border-radius:99px;padding:4px 10px 4px 8px;margin-bottom:8px}
.q-rec svg{flex-shrink:0}
.q-unit-meta{display:block;font-size:11px;color:var(--ink-dim);margin-bottom:8px}
.q-unit-row{display:flex;flex-direction:column;gap:6px}
.q-directions{align-self:flex-start;font-size:11px;font-weight:600;color:var(--green);text-decoration:none;padding-left:2px}
.q-directions:hover{text-decoration:underline}
.q-bars{display:flex;gap:3px;align-items:flex-end;height:11px}
.q-bar-i{width:3px;height:100%;background:var(--line-strong);border-radius:1px}
.q-bar-i.on{background:var(--green)}
.q-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px}
.q-badges span{font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-dim);position:relative}
.q-badges span+span::before{content:'';position:absolute;left:-7px;top:50%;width:1px;height:8px;background:var(--line-strong);transform:translateY(-50%)}

.q-rows{border-top:1px solid var(--line);margin-top:18px}
.q-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.q-rows div:last-child{border-bottom:none}
.q-rows span{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.q-rows b{font-weight:600;font-size:14px}

.q-note{font-size:11.5px;color:var(--ink-dim);line-height:1.6;margin:14px 0 0}
.q-demo{border:1px solid var(--line-strong);background:var(--surface-2);border-radius:6px;
  padding:13px;font-size:11.5px;color:var(--ink-dim);line-height:1.6;margin-top:16px}
.q-demo b{color:var(--green)}

.q-tick{width:56px;height:56px;border-radius:50%;background:var(--green-wash);border:1px solid var(--green);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px}

#quote-app.out{opacity:0;transform:translate3d(-14px,0,0);transition:opacity .15s ease-in,transform .15s ease-in}
#quote-app.out.back{transform:translate3d(14px,0,0)}
#quote-app.in{animation:qIn .4s var(--ease) both}
#quote-app.in.back{animation-name:qInBack}
@keyframes qIn{from{opacity:0;transform:translate3d(18px,0,0)}to{opacity:1;transform:none}}
@keyframes qInBack{from{opacity:0;transform:translate3d(-18px,0,0)}to{opacity:1;transform:none}}

/* =====================================================================
   ONBOARDING — extends the .q-* system above. New patterns only:
   pricing table inputs, file upload/dropzone, document checklist.
   ===================================================================== */
.q-select{width:100%;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  padding:13px 14px;border-radius:6px;font-family:var(--font);font-size:16px;color-scheme:dark;appearance:none}
.q-select:focus{outline:none;border-color:var(--green)}
.q-hint{font-size:11.5px;color:var(--ink-dim);margin-top:8px;line-height:1.5}

.q-ptable{width:100%;border-collapse:collapse;margin-bottom:6px}
.q-ptable th{text-align:left;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-dim);padding:0 8px 10px;border-bottom:1px solid var(--line-strong)}
.q-ptable th.n{text-align:right}
.q-ptable td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.q-ptable tr:last-child td{border-bottom:none}
.q-ptable .cov{font-variation-settings:'wdth' 115;font-weight:700;text-transform:uppercase;font-size:13px}
.q-ptable input{width:100px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  padding:9px 10px;border-radius:5px;font-family:var(--font);font-size:14px;text-align:right;color-scheme:dark}
.q-ptable input:focus{outline:none;border-color:var(--green)}
.q-ptable .ref{color:var(--ink-dim);font-size:11.5px;text-align:right}

.q-drop{border:1.5px dashed var(--line-strong);border-radius:8px;padding:26px 18px;text-align:center;
  cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease);background:var(--surface-2)}
.q-drop:hover,.q-drop.drag{border-color:var(--green);background:var(--green-wash)}
.q-drop input[type=file]{display:none}
.q-drop-icon{width:40px;height:40px;margin:0 auto 12px;border-radius:50%;background:var(--surface);
  border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center}
.q-drop-t{font-size:13.5px;font-weight:600;margin-bottom:4px}
.q-drop-d{font-size:11.5px;color:var(--ink-dim)}

.q-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:9px;margin-top:14px}
.q-file{position:relative;aspect-ratio:1;border-radius:7px;overflow:hidden;background:var(--surface-2);
  border:1px solid var(--line)}
.q-file img{width:100%;height:100%;object-fit:cover;display:block}
.q-file .rm{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;
  background:rgba(12,13,15,.75);border:none;color:#fff;font-size:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1}
.q-file .nm{position:absolute;left:0;right:0;bottom:0;padding:4px 6px;font-size:8.5px;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.q-checklist{display:grid;gap:9px;margin-bottom:4px}
.q-citem{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--line);
  border-radius:7px;background:var(--surface-2)}
.q-citem.done{border-color:var(--green);background:var(--green-wash)}
.q-citem .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-strong);flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.q-citem.done .dot{border-color:var(--green);background:var(--green)}
.q-citem .lbl{font-size:13px;flex:1}
.q-citem .req{font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}

.q-review dt{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-top:16px}
.q-review dt:first-child{margin-top:0}
.q-review dd{margin:4px 0 0;font-size:14.5px}
.q-review dd.muted{color:var(--ink-dim);font-size:13px}

.q-steplist{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.q-steplist span{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-dim);padding:5px 10px;border-radius:99px;border:1px solid var(--line)}
.q-steplist span.done{color:var(--green);border-color:var(--green)}
.q-steplist span.now{color:var(--ink);border-color:var(--ink-dim);background:var(--surface-2)}

.q-media-diagram{background:#0C0D0F;max-height:280px;display:flex;align-items:center;justify-content:center}
.q-media-diagram img{width:auto;height:280px;max-width:100%;aspect-ratio:3/5;object-fit:contain}

/* =====================================================================
   DIAGONAL LIGHT SECTIONS, v2 — rebuilt after the first version turned
   out invisible in real use (CSS skewY on a pseudo-element, which I
   could never actually render-test myself, and which turned out not
   to work — or not to be nearly bold enough to read as intentional).
   This version uses a real SVG polygon as the section's background,
   not a CSS transform trick — verified by literally rendering it and
   looking, the same way the logo mark and coverage diagrams were
   built. No ambiguity left about whether it's visible: it is.
   ===================================================================== */
.section-diag{position:relative;padding:100px 0;overflow:hidden;color:var(--bg)}
.section-diag .diag-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.section-diag>.wrap{position:relative;z-index:1}
.section-diag .section-hd .eyebrow{color:var(--green-deep)}
.section-diag .section-hd h2{color:var(--bg)}
.section-diag .section-hd p{color:#55585E}
.section-diag .step .n{color:var(--green-deep)}
.section-diag .step h3{color:var(--bg)}
.section-diag .step p{color:#55585E}
.section-diag .steps{border-top-color:#E4E2DB}
.section-diag .step{border-bottom-color:#E4E2DB}
.section-diag .card{background:#FFFFFF;border-color:#E4E2DB}
.section-diag .card h3{color:var(--bg)}
.section-diag .card p{color:#55585E}
.section-diag .card-link:hover{border-color:var(--green-deep)}

@media(max-width:640px){.section-diag{padding:80px 0}}

/* ---- triangle scroll accents, made bolder per direct feedback:
   bigger baseline size (handled in markup), and now a scale pop on
   top of the fade+rise, not just a subtle slide. Still only
   transform+opacity, still the same shared reveal observer. ---- */
.tri{position:absolute;pointer-events:none;opacity:0;
  transform:translate3d(0,34px,0) scale(.4) rotate(var(--r,0deg));
  transition:opacity .6s var(--ease),transform .6s cubic-bezier(.34,1.56,.64,1)}
.tri.in{opacity:var(--o,1);transform:translate3d(0,0,0) scale(1) rotate(calc(var(--r,0deg) + var(--scroll-r,0deg)))}
.tri.in.settled{transition:opacity .6s var(--ease)}
/* .settled drops the transform transition once the entrance bounce has
   finished — continuous scroll-driven rotation updates need to apply
   immediately, not animate-and-lag behind the scroll position on every
   frame, which is what keeping a .6s transform transition active would
   otherwise cause. */

/* =====================================================================
   PAGE-LEVEL DIAGONAL BACKGROUND, wide variant — same verified technique
   as flawless-partners (main.q-wrap-diag), adapted for the wider .wrap
   container these content pages use (1120px, not the 600px form width).
   One page = one diagonal light band, not multiple alternating sections
   like the homepage — these pages are continuous prose with h2
   subheadings, not discrete <section> blocks to alternate between.
   ===================================================================== */
main.page-diag{position:relative;background:#F2F3F5;overflow:hidden;padding:0 0 70px}
main.page-diag .diag-cap{position:absolute;left:0;right:0;width:100%;height:56px;z-index:0;display:block}
main.page-diag .diag-cap-top{top:-1px}
main.page-diag .diag-cap-bottom{bottom:-1px;transform:rotate(180deg)}
main.page-diag>.wrap,main.page-diag>header.page-hd{position:relative;z-index:1}
main.page-diag .page-hd{padding-top:70px;border-bottom-color:#E4E2DB}
main.page-diag .page-hd h1{color:var(--bg)}
main.page-diag .page-hd p{color:#55585E}
main.page-diag .page-hd .eyebrow{color:var(--green-deep)}
/* Photo now sits on its own below the header, at full contrast — no
   text is ever laid over it, so there's no scrim or object-position
   fight to get right; object-position just needs to keep the face
   comfortably inside frame on both a wide desktop card and a taller
   mobile one. */
.about-photo{
  margin:36px 0 0;border-radius:12px;overflow:hidden;
  aspect-ratio:16/11;max-height:520px;
}
.about-photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  display:block;
}
.about-photo figcaption{
  margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#8B9199;
}
main.page-diag .prose .lede{
  font-size:18px;line-height:1.6;color:var(--bg);font-weight:500;
  margin-bottom:22px;
}
@media(max-width:720px){
  .about-photo{aspect-ratio:4/5;max-height:440px}
  .about-photo img{object-position:50% 14%}
}
main.page-diag .prose h2{color:var(--bg)}
main.page-diag .prose p{color:#55585E}
main.page-diag .prose strong{color:var(--bg)}
main.page-diag .callout p strong{color:var(--ink)}
/* .callout keeps its own dark background regardless of whether the
   surrounding page is in light diagonal mode — it's a self-contained
   dark note, not part of the page's light prose flow. The broader
   .prose strong override above was winning here purely on CSS
   specificity (two classes beats one), rendering this text in dark-on-
   dark and making it nearly invisible. This re-asserts the callout's
   own intended styling with enough specificity to actually win. */
main.page-diag .stat .v{color:var(--bg)}
main.page-diag .stat .l{color:#6B6E74}
main.page-diag .card{background:#FFFFFF;border-color:#E4E2DB}
main.page-diag .card h3{color:var(--bg)}
main.page-diag .card p{color:#55585E}
/* Location pages (locations/*.html) run entirely inside main.page-diag
   and use plain .section/.section-hd/.steps/.faq/.check-list — none of
   which had light-mode coverage above, so they fell through to the
   dark theme's own --ink/--ink-dim text colors. --ink (near-white) on
   this light #F2F3F5 background is what made the FAQ questions and
   "Common questions" heading unreadable; --ink-dim (a mid grey tuned
   for the dark background) is what made the numbered steps and
   check-list read as washed-out grey. Same fix pattern as everything
   else in this block: dark text for headings, #55585E for secondary
   text, #E4E2DB for hairline borders. */
main.page-diag .section-hd h2{color:var(--bg)}
main.page-diag .section-hd p{color:#55585E}
main.page-diag .section-hd .eyebrow{color:var(--green-deep)}
main.page-diag .steps{border-top-color:#E4E2DB}
main.page-diag .step{border-bottom-color:#E4E2DB}
main.page-diag .step p{color:#55585E}
main.page-diag .step .n{color:var(--green-deep)}
/* .step .n was covered for .section-diag below but never for this page-
   level variant — every location page's "01/02/03" step numbers were
   left at the plain --green used on dark backgrounds, which measures
   under 2:1 on this light panel. Same green-deep swap used everywhere
   else in this block for exactly this reason. */
main.page-diag .faq{border-top-color:#E4E2DB}
main.page-diag .faq details{border-bottom-color:#E4E2DB}
main.page-diag .faq summary{color:var(--bg)}
main.page-diag .faq summary::after{color:var(--green-deep)}
main.page-diag .faq p{color:#55585E}
main.page-diag .check-list li{color:#55585E}
/* Second pass — the FAQ fix above only covered the classes location
   pages use. Blog posts, gallery, about, installers, privacy, terms
   and cancellation ALL run inside this same main.page-diag light
   section too, and use their own separate set of classes (.post-hd,
   .ptable, .prose ul/blockquote, .gal-filter…) that had exactly the
   same gap: no light-mode color of their own, so they fell through to
   the dark theme's --ink/--ink-dim text — e.g. the pricing table on
   the "how much does PPF cost" post rendering with fully invisible
   white-on-white row text. Same fix pattern throughout. */
main.page-diag .prose ul{color:#55585E}
main.page-diag .prose blockquote{color:var(--bg);border-left-color:var(--green-deep)}
main.page-diag .post-hd{border-bottom-color:#E4E2DB}
main.page-diag .post-hd h1{color:var(--bg)}
main.page-diag .post-hd .standfirst{color:#55585E}
main.page-diag .post-meta{color:#6B6E74}
main.page-diag .post-meta .cat{color:var(--green-deep)}
main.page-diag .post-nav{border-top-color:#E4E2DB}
main.page-diag .post-nav a{color:#6B6E74}
main.page-diag .ptable th{color:#6B6E74;border-bottom-color:#E4E2DB}
main.page-diag .ptable td{border-bottom-color:#E4E2DB;color:var(--bg)}
main.page-diag .card .meta{color:var(--green-deep)}
main.page-diag .gal-filter button{color:#6B6E74;border-color:#E4E2DB}
main.page-diag .gal-filter button:hover{color:var(--green-deep);border-color:var(--green-deep)}

/* =====================================================================
   PAGE-LEVEL DIAGONAL BACKGROUND, narrow variant — same verified
   main-based technique, for the quote flow's single-card .q-wrap
   layout (600px), matching flawless-partners' identical pattern.
   ===================================================================== */
main.q-wrap-diag{position:relative;background:#F2F3F5;overflow:hidden;padding:64px 0 76px}
main.q-wrap-diag .diag-cap{position:absolute;left:0;right:0;width:100%;height:56px;z-index:0;display:block}
main.q-wrap-diag .diag-cap-top{top:-1px}
main.q-wrap-diag .diag-cap-bottom{bottom:-1px;transform:rotate(180deg)}
main.q-wrap-diag>.q-wrap{position:relative;z-index:1}
main.q-wrap-diag .q-h1{color:var(--bg)}
main.q-wrap-diag .q-h2{color:var(--green-deep)}
/* .q-h2 ("Choose your installer") kept the plain --green used on dark
   cards — under 2:1 against this white card, the same failing pattern
   fixed everywhere else in this block, just missed for this heading. */
main.q-wrap-diag .q-sub{color:#55585E}
main.q-wrap-diag .q-card{background:#FFFFFF;border-color:#E4E2DB}
main.q-wrap-diag .q-field label{color:#6B6E74}
main.q-wrap-diag .q-field input{background:#F7F7F5;border-color:#E4E2DB;color:var(--bg)}
main.q-wrap-diag .q-note{color:#6B6E74}
main.q-wrap-diag .q-check{border-top-color:#E4E2DB}
main.q-wrap-diag .q-check span{color:#55585E}
main.q-wrap-diag .q-check span b{color:var(--bg)}
/* Same bug as .q-rows b below, in the same section: .q-check span b
   had no light-mode override, so the bolded remaining-balance figure
   ("Save my card and charge the remaining £2,129...") inherited the
   bright --ink meant for dark backgrounds, making it nearly invisible
   on this white card. */
main.q-wrap-diag .q-back{color:#6B6E74}
main.q-wrap-diag .q-summary-card{background:#F7F7F5;border-color:#E4E2DB}
main.q-wrap-diag .q-rows span{color:#6B6E74}
main.q-wrap-diag .q-rows b{color:var(--bg)}
/* .q-rows had no light-mode coverage at all until now — span fell
   through to --ink-dim (measured 2.86:1 on this background, the same
   failing contrast found and fixed elsewhere), and b had no color
   rule whatsoever, inheriting the bright --ink meant for dark
   backgrounds — worse than the label, not better, since bright text
   on a white card is close to invisible. Same fix as partners, since
   this is the same shared component pattern used in both. */
main.q-wrap-diag .btn-ghost{color:var(--bg);border-color:#D8D6CF}
main.q-wrap-diag .q-opt{background:#FFFFFF;border-color:#E4E2DB}
main.q-wrap-diag .q-opt-t{color:var(--bg)}
main.q-wrap-diag .q-opt-d{color:#6B6E74}
main.q-wrap-diag .q-opt.on .q-opt-t{color:var(--green-deep)}
/* .q-opt.on .q-opt-t{color:var(--green)} (base rule, three classes) is
   MORE specific than the .q-opt-t override just above (two classes +
   element), so a selected option's title was winning back the plain
   --green meant for dark cards — under 2:1 on this white card, i.e.
   the selected answer going near-invisible the moment it's picked.
   This selector adds one more class to out-specify it. */
main.q-wrap-diag .q-media{background:#E9E7E0}
main.q-wrap-diag .q-cov-video{background:#E9E7E0}
main.q-wrap-diag .q-filter button{color:#6B6E74;border-color:#E4E2DB}
main.q-wrap-diag .q-filter button:hover{color:var(--green-deep);border-color:var(--green-deep)}
/* .q-filter (the installer list's filter chips) shares its base rule
   with .gal-filter, which got a page-diag override above — .q-filter
   itself never did, even though it renders on this same light quote
   page. Left at --ink-dim it measures ~2.86:1 here, the same failing
   contrast already found and fixed for every other --ink-dim use on
   this background. */

/* ---------------- WHATSAPP FLOAT BUTTON ---------------- */
.wa-float{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.35);
  z-index:60;transition:transform .2s var(--ease)}
.wa-float:hover{transform:scale(1.06)}
.wa-bubble{position:fixed;right:18px;bottom:calc(86px + env(safe-area-inset-bottom, 0px));
  max-width:250px;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px 12px 2px 12px;
  padding:14px 34px 14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:60;cursor:pointer;
  opacity:0;transform:translate3d(0,10px,0);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.wa-bubble.show{opacity:1;transform:none;pointer-events:auto}
.wa-bubble p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink)}
.wa-bubble .wa-bubble-close{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;
  background:transparent;border:none;color:var(--ink-dim);font-size:15px;line-height:1;cursor:pointer;padding:0}
.wa-bubble .wa-bubble-close:hover{color:var(--ink)}
@media(max-width:480px){.wa-bubble{max-width:calc(100vw - 36px)}}

/* ---------------- INSTAGRAM FEED ---------------- */
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:600px){.ig-grid{grid-template-columns:repeat(4,1fr)}}
.ig-tile{display:block;position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--line);background:#0F1113}
.ig-tile img{aspect-ratio:1/1;width:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease),transform .5s var(--ease)}
.ig-tile img.loaded{opacity:1}
.ig-tile:hover img{transform:scale(1.05)}

/* ---------------- LOCATIONS (city pages) ---------------- */
.loc-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:600px){.loc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.loc-grid{grid-template-columns:repeat(3,1fr)}}
.loc-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px;
  color:var(--ink);transition:border-color .2s var(--ease),background .2s var(--ease)}
.loc-card:hover{border-color:var(--green-deep);background:#0F1113}
.loc-card .v{color:var(--ink);font-variation-settings:'wdth' 115;font-weight:700;font-size:15px}
.loc-card .d{font-size:12px;color:var(--ink-dim);margin-top:3px}
.check-list{list-style:none;margin:18px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.check-list li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.55;color:var(--ink-dim)}
.check-list li::before{content:'';position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 3px rgba(56,196,120,.15)}
.loc-group-hd{font-variation-settings:'wdth' 115;font-weight:700;font-size:13px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-dim);margin:32px 0 12px}
.loc-group-hd:first-of-type{margin-top:0}

/* ---- VIP installations page (bespoke-projects.html) ----
   Sits inside main.page-diag, so everything here is written for the
   light #F2F3F5 ground, using the same ink/greys the other page-diag
   pieces use. */
.vip-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
main.page-diag .vip-ghost{color:var(--bg);border-color:#C9CBD0}
main.page-diag .vip-ghost:hover{color:var(--green-deep);border-color:var(--green-deep)}
.vip-strip{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px}
.vip-strip figure:first-child{grid-column:1/-1}
.vip-strip figure{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/3}
@media(min-width:720px){
  .vip-strip{grid-template-columns:1.4fr 1fr 1fr}
  .vip-strip figure:first-child{grid-column:auto}
  .vip-strip figure{aspect-ratio:auto;height:300px}
}
.vip-strip img{width:100%;height:100%;object-fit:cover;display:block}
.vip-section{margin-top:64px}
.vip-section>.eyebrow{color:var(--green-deep);display:block;margin-bottom:12px}
.vip-section h2{font-variation-settings:'wdth' 125;font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,4vw,34px);line-height:1.05;margin:0 0 16px;color:var(--bg);text-wrap:balance}
.vip-lead{color:#55585E;font-size:16px;line-height:1.75;max-width:640px;margin:0 0 28px}
.vip-cards{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.vip-cards{grid-template-columns:repeat(3,1fr)}}
.vip-card{background:#fff;border:1px solid #E4E2DB;border-radius:10px;padding:24px}
.vip-card svg{width:28px;height:25px;display:block;margin-bottom:16px}
.vip-card h3{font-variation-settings:'wdth' 118;font-weight:700;font-size:17px;margin:0 0 8px;color:var(--bg)}
.vip-card p{color:#55585E;font-size:14.5px;line-height:1.65;margin:0}
.vip-steps{list-style:none;margin:0;padding:0;counter-reset:vip;display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid #E4E2DB}
@media(min-width:760px){.vip-steps{grid-template-columns:repeat(3,1fr);gap:28px;border-top:none}}
.vip-steps li{counter-increment:vip;padding:22px 0;border-bottom:1px solid #E4E2DB}
@media(min-width:760px){.vip-steps li{border-bottom:none;border-top:2px solid var(--green);padding:20px 0 0}}
.vip-steps li::before{content:counter(vip,decimal-leading-zero);display:block;font-variation-settings:'wdth' 125;
  font-weight:800;font-size:13px;color:var(--green-deep);letter-spacing:.1em;margin-bottom:9px}
.vip-steps span{display:block;font-variation-settings:'wdth' 118;font-weight:700;text-transform:uppercase;
  font-size:16px;letter-spacing:.01em;margin-bottom:7px;color:var(--bg)}
.vip-steps p{color:#55585E;font-size:14px;line-height:1.6;margin:0}
.vip-prose{margin-bottom:24px}
.vip-faq{border-top-color:#E4E2DB}
.vip-faq details{border-bottom-color:#E4E2DB}
.vip-faq summary{color:var(--bg)}
.vip-faq p{color:#55585E}

/* ---- Bespoke & Private page: gold and silver theme (scoped) ---- */
body.theme-bespoke{
  --gold:#C9A24B;--gold-deep:#8A6A1E;--gold-pale:#E6CF8E;
  --silver:#AEB3BA;--silver-pale:#E6E8EB;
  --gold-grad:linear-gradient(135deg,#E6CF8E 0%,#C9A24B 48%,#A9812F 100%);
  --silver-grad:linear-gradient(90deg,#E6E8EB 0%,#AEB3BA 50%,#D9DCE0 100%);
}
body.theme-bespoke .brand span{color:var(--gold)}
body.theme-bespoke .nav-cta,body.theme-bespoke .btn{background:var(--gold-grad);border-color:var(--gold);color:#0C0D0F}
body.theme-bespoke .nav-cta:hover,body.theme-bespoke .btn:hover{background:var(--gold-pale);border-color:var(--gold-pale);color:#0C0D0F}
body.theme-bespoke .btn:focus-visible{outline-color:var(--gold-deep)}
body.theme-bespoke .btn.vip-ghost{background:transparent;color:var(--bg);border-color:var(--silver)}
body.theme-bespoke .btn.vip-ghost:hover{background:transparent;border-color:var(--gold-deep);color:var(--gold-deep)}
body.theme-bespoke .cta-band .btn{background:var(--gold-grad);color:#0C0D0F}
body.theme-bespoke main.page-diag .page-hd .eyebrow,
body.theme-bespoke main.page-diag .section-hd .eyebrow,
body.theme-bespoke .vip-section .eyebrow{color:var(--gold-deep)}
body.theme-bespoke main.page-diag .page-hd{border-bottom:0;position:relative}
body.theme-bespoke main.page-diag .page-hd::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--silver-grad)}
body.theme-bespoke main.page-diag .page-hd::before{content:'';position:absolute;left:max(24px,calc((100% - 1100px)/2));bottom:0;width:96px;height:2px;background:var(--gold-grad);z-index:1}
body.theme-bespoke .vip-card{border-color:#DADCE0;position:relative;overflow:hidden}
body.theme-bespoke .vip-card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--silver-grad)}
body.theme-bespoke .vip-card:first-child::before{background:var(--gold-grad)}
body.theme-bespoke .vip-strip figure{box-shadow:0 0 0 1px #DADCE0}
body.theme-bespoke .vip-steps li::before{color:var(--gold-deep)}
body.theme-bespoke .vip-steps li{border-bottom-color:#DADCE0}
@media(min-width:760px){body.theme-bespoke .vip-steps li{border-top-color:var(--gold)}}
body.theme-bespoke .vip-steps{border-top-color:#DADCE0}
body.theme-bespoke main.page-diag .faq{border-top-color:#CFD2D7}
body.theme-bespoke main.page-diag .faq details{border-bottom-color:#DADCE0}
body.theme-bespoke main.page-diag .faq summary::after{color:var(--gold-deep)}
body.theme-bespoke .callout{border-left-color:var(--gold)}
body.theme-bespoke .cta-band{border-color:#2A2C31}
body.theme-bespoke .cta-band::before{background:var(--gold-grad);width:110px;height:2px}
body.theme-bespoke .cta-band h2{background:var(--silver-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--silver-pale)}
body.theme-bespoke .vip-prose li::marker{color:var(--gold-deep)}
body.theme-bespoke a:not(.btn):not(.nav-cta):not(.brand){text-decoration-color:var(--gold)}
body.theme-bespoke .prose a,body.theme-bespoke .faq a{color:var(--gold-deep)!important}
body.theme-bespoke .nav-links a:hover,body.theme-bespoke .nav-links a[aria-current="page"]{border-bottom-color:var(--gold)}

/* ---------------- BREADCRUMBS ---------------- */
.crumbs{position:relative;z-index:1;padding-top:62px;font-size:13px;color:#55585E}
.crumbs .wrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:#55585E;text-decoration:none}
.crumbs a:hover{color:var(--bg);text-decoration:underline}
.crumbs [aria-current]{color:var(--bg);font-weight:600}
main.page-diag .crumbs+.page-hd{padding-top:20px}
.loc-card,.loc-card:hover{text-decoration:none}
/* contrast: eyebrows on the light diagonal pages */
body:not(.theme-bespoke) main.page-diag .eyebrow,
body:not(.theme-bespoke) main.page-diag .page-hd .eyebrow,
body:not(.theme-bespoke) main.page-diag .section-hd .eyebrow{color:#16734B}