/* ==========================================================================
   NIKO Signs & GraFX — Design System
   Dark, bold, premium. Accent blue #0C83DF (sampled from the shop's building graphics). Anton / Archivo / Manrope.
   Mobile-first, accessible (focus states, reduced motion), performant.
   ========================================================================== */

:root{
  --bg:#0A0A0B;          /* page background */
  --bg-2:#0C0C0E;        /* alt sections */
  --bg-3:#08080A;        /* footer */
  --surface:#131316;     /* cards */
  --surface-2:#17171b;   /* raised */
  --text:#F4F4F5;        /* primary text */
  --text-2:#C9C9CF;      /* secondary */
  --muted:#9C9CA3;       /* muted body */
  --muted-2:#7D7D83;     /* labels */
  --faint:#5A5A60;       /* faintest */
  --line:rgba(255,255,255,0.08);
  --line-2:rgba(255,255,255,0.14);
  --accent:#0C83DF;      /* brand blue - matches the hex graphics on the Colby Dr building */
  --accent-hover:#0A6CB8;
  --accent-soft:rgba(12,131,223,0.12);
  --accent-ring:rgba(12,131,223,0.55);
  --radius-s:8px; --radius:14px; --radius-l:18px; --radius-xl:22px;
  --shadow:0 20px 50px -20px rgba(0,0,0,0.6);
  --maxw:1320px;
  --header-h:72px;
  --font-body:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-display:'Anton',Impact,sans-serif;
  --font-alt:'Archivo',var(--font-body);
}

/* -------- reset -------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-weight:500;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;overflow-x:clip;
  /* full-bleed .section--light::before uses 100vw (incl. scrollbar gutter);
     clip at the root so it never produces a horizontal scrollbar. */
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px} /* 16px prevents iOS zoom */
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;border-radius:4px}

/* -------- typography -------- */
h1,h2,h3,h4{line-height:1.05;letter-spacing:-0.01em}
.display{font-family:var(--font-display);text-transform:uppercase;font-weight:400;letter-spacing:0.5px;line-height:0.92}
.h1{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(40px,7vw,104px);line-height:0.92;letter-spacing:-0.5px}
.h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(32px,4.6vw,60px);line-height:1;letter-spacing:-0.5px}
.h3{font-family:var(--font-alt);font-weight:800;font-size:clamp(20px,2.4vw,26px)}
.eyebrow{color:var(--accent);font-weight:800;font-size:13px;letter-spacing:2.4px;text-transform:uppercase;margin-bottom:14px;display:block}
.lead{font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--text-2);font-weight:500}
.muted{color:var(--muted)}
p{color:var(--text-2)}

/* -------- layout -------- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,5vw,64px);width:100%}
.section{padding-block:clamp(56px,9vh,120px)}
.section-tight{padding-block:clamp(40px,6vh,72px)}
.bg-2{background:var(--bg-2);border-block:1px solid var(--line)}
.grid{display:grid;gap:18px}
.stack>*+*{margin-top:16px}
.center{text-align:center}
.mt-s{margin-top:12px}.mt{margin-top:24px}.mt-l{margin-top:40px}
.flex{display:flex;gap:14px;flex-wrap:wrap}
.between{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px}

/* -------- buttons -------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:800;font-size:15px;letter-spacing:0.3px;
  padding:15px 26px;border-radius:var(--radius-s);transition:background .18s,border-color .18s,transform .18s,color .18s;
  white-space:nowrap;min-height:48px;text-align:center}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:rgba(255,255,255,0.06);color:#fff;border:1px solid var(--line-2)}
.btn-ghost:hover{background:rgba(255,255,255,0.12)}
.btn-outline{background:none;border:1px solid var(--line-2);color:#fff}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-dark{background:var(--bg);color:#fff}
.btn-dark:hover{background:#1a1a1d}
.btn-lg{padding:17px 32px;font-size:16px}
.btn-block{width:100%}

/* -------- badges / pills / tags -------- */
.badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,0.07);
  border:1px solid var(--line-2);padding:7px 14px;border-radius:100px;
  font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text)}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tag{font-family:var(--font-alt);font-weight:900;font-size:12px;letter-spacing:2px;color:var(--accent);
  background:var(--accent-soft);padding:6px 11px;border-radius:6px;align-self:flex-start;text-transform:uppercase}
.pill{background:rgba(255,255,255,0.05);border:1px solid var(--line-2);color:var(--text-2);
  font-weight:700;font-size:13.5px;padding:10px 16px;border-radius:100px}
.stars{color:var(--accent);letter-spacing:2px;font-size:15px}

/* -------- header -------- */
.header{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:clamp(18px,5vw,64px);
  background:rgba(10,10,11,0.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:11px;flex:0 1 auto;min-width:0}
.logo-mark{width:32px;height:32px;background:var(--accent);border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:20px;color:#fff;line-height:1;flex:none}
.logo-txt{font-family:var(--font-alt);font-weight:900;letter-spacing:1.4px;font-size:16px;color:#fff}
.logo-txt span{color:var(--muted-2);font-weight:700}
.logo-img{height:52px;width:auto;display:block;flex:none}
.logo-foot .logo-img{height:64px}
/* "NIKO Signs & GraFX" wordmark that sits beside the round badge. Only rendered
   when site/assets/logo-wordmark.png exists (see HAS_WORDMARK in build.py); the
   footer swaps in logo-wordmark-full.png, which also carries the strapline.
   Niko's artwork is very wide — 8.70:1 for the header cut, 6.58:1 for the full
   footer one — so BOTH dimensions are left auto and the size is driven by
   max-width / max-height. That is deliberate: a fixed height plus a max-width
   clamps the box without the ratio, and the image then letterboxes inside it —
   on a 390px phone the old rule squeezed the lockup to 15px tall. With both
   auto, the browser re-solves from the intrinsic ratio, so whichever cap binds
   first the lockup stays true and simply gets smaller. */
.logo-word{width:auto;height:auto;max-height:32px;max-width:278px;display:block;flex:none}
/* the footer lockup sits in a grid column, so cap against the column (100%)
   rather than the viewport: 70px badge + 11px gap = 81px of it is spoken for */
.logo-foot .logo-word{max-height:44px;max-width:min(290px,calc(100% - 88px))}
.nav{display:flex;align-items:center;gap:clamp(10px,1.6vw,24px);flex:none}
.nav a.navlink{font-weight:700;font-size:12.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--text-2);white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav a.navlink:hover,.nav a.navlink[aria-current="page"]{color:#fff;border-color:var(--accent)}
.nav .btn{padding:11px 16px;min-height:auto;white-space:nowrap}
.nav-desktop{display:none}
.menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--line-2);border-radius:10px}
.menu-toggle span{position:relative;width:20px;height:2px;background:#fff;display:block;transition:.2s}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;transition:.2s}
.menu-toggle span::before{top:-6px}.menu-toggle span::after{top:6px}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* mobile menu drawer */
.mobile-menu{position:fixed;inset:var(--header-h) 0 0 0;z-index:99;background:rgba(8,8,10,0.98);
  backdrop-filter:blur(8px);padding:24px clamp(18px,5vw,64px) 120px;overflow-y:auto;
  transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s}
.mobile-menu.open{opacity:1;transform:none;pointer-events:auto}
.mobile-menu a{display:block;font-family:var(--font-alt);font-weight:800;font-size:22px;color:#fff;padding:15px 0;border-bottom:1px solid var(--line)}
.mobile-menu a:hover{color:var(--accent)}
.mobile-menu .mm-sub{font-size:15px;font-family:var(--font-body);color:var(--text-2);padding-left:14px;font-weight:600}
.mobile-menu .btn{margin-top:20px}

/* -------- sticky mobile CTA bar -------- */
.sticky-cta{position:fixed;inset:auto 0 0 0;z-index:95;display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px;
  padding:9px 10px calc(9px + env(safe-area-inset-bottom));background:rgba(8,8,10,0.94);
  backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.sticky-cta a{display:flex;align-items:center;justify-content:center;gap:7px;font-weight:800;font-size:14px;
  padding:13px 8px;border-radius:10px;min-height:48px}
.sticky-cta .s-call{background:rgba(255,255,255,0.08);color:#fff;border:1px solid var(--line-2)}
.sticky-cta .s-text{background:rgba(255,255,255,0.08);color:#fff;border:1px solid var(--line-2)}
.sticky-cta .s-quote{background:var(--accent);color:#fff}

/* -------- hero -------- */
.hero{position:relative;min-height:calc(100svh - var(--header-h));display:flex;align-items:flex-end;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-poster{position:absolute;inset:0;display:block}
/* video fades in over the poster once it can actually play */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s ease;pointer-events:none;background:#0a0a0b}
.hero-vid.is-playing{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,10,11,0.62) 0%,rgba(10,10,11,0.34) 38%,rgba(10,10,11,0.97) 100%),
  linear-gradient(90deg,rgba(10,10,11,0.55) 0%,rgba(10,10,11,0.12) 58%,transparent 100%),
  radial-gradient(120% 80% at 80% 8%,rgba(12,131,223,0.14),transparent 55%)}
@media (prefers-reduced-motion:reduce){.hero-vid{display:none}}
.hero-inner{position:relative;z-index:2;padding-block:clamp(40px,7vh,90px);max-width:1000px}
.hero .h1{margin-top:22px}
.hero .h1 .red{color:var(--accent)}
.hero-sub{max-width:580px;margin-top:22px}
.page-hero{padding-top:calc(var(--header-h) + clamp(40px,7vh,88px));padding-bottom:clamp(28px,4vh,44px)}
.page-hero .h1{font-size:clamp(38px,6vw,84px)}

/* -------- brand / trust strip --------
   Five identical credential cells in one hairline-ruled panel. The 1px grid gap
   over a --line background draws the dividers, so every cell is guaranteed the
   same width and the same height no matter how long its copy runs. */
.trust-strip{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--bg-2),var(--bg));padding-block:0}
.trust-strip::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1400px 320px at 50% -18%,rgba(12,131,223,.20),transparent 70%)}
/* Full bleed. This is a band, not a card: boxing it inside the 1320px container
   left dead gutters at both ends of the glow. It now runs edge to edge and the
   hairline rules above and below are the only frame it needs. */
.trust-strip > .container{max-width:none;padding-inline:0}
.trust-row{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;
  gap:1px;background:var(--line);border-block:1px solid var(--line);border-inline:0;border-radius:0}
/* Cells are translucent rather than solid so the blue halo bleeds up through the
   top of the band instead of being masked off by five opaque rectangles. */
.trust-cell{display:flex;align-items:center;gap:14px;padding:16px 18px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  transition:background .25s ease}
@supports not (background:color-mix(in srgb,red 50%,transparent)){.trust-cell{background:var(--surface)}}
.trust-cell:hover{background:var(--surface-2)}
.tw-mark{flex:none;width:54px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.012));
  font-family:var(--font-alt);color:#fff;line-height:1;text-align:center}
.tw-xpel{font-weight:900;font-size:13.5px;letter-spacing:1.1px}
.tw-rate{font-weight:900;font-size:20px;letter-spacing:-.5px}
.tw-num{font-weight:900;font-size:15px;letter-spacing:-.2px}
.tw-ico{color:var(--accent);font-size:23px;font-weight:700}
.tw-img{display:block;padding:0;object-fit:cover;background:#fff}
.tw-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.tw-txt b{font-family:var(--font-alt);font-weight:800;font-size:14.5px;letter-spacing:.1px;color:#fff;line-height:1.2}
.tw-txt span{font-size:12.5px;line-height:1.35;color:var(--muted)}

/* -------- service cards -------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.svc-card{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:28px;display:flex;flex-direction:column;gap:12px;min-height:236px;
  transition:border-color .2s,transform .2s;color:inherit}
.svc-card:hover{border-color:var(--accent-ring);transform:translateY(-4px)}
.svc-card h3{font-family:var(--font-alt);font-weight:800;font-size:22px;color:#fff;margin-top:auto}
.svc-card p{font-size:14.5px;line-height:1.55;color:var(--muted)}
.svc-card .go{font-weight:800;font-size:14px;color:#fff;margin-top:4px}
.svc-card .go .arw{color:var(--accent)}

/* -------- value stats -------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.stat{padding:clamp(32px,5vw,56px) clamp(20px,3vw,40px);border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat .n{font-family:var(--font-display);font-size:clamp(38px,4.4vw,56px);color:var(--accent);line-height:1}
.stat .t{font-family:var(--font-alt);font-weight:800;font-size:18px;margin:12px 0 8px;color:#fff}
.stat p{font-size:14px;line-height:1.55;color:var(--muted)}

/* -------- process -------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.step{border-top:2px solid var(--accent);padding-top:22px}
.step .n{font-family:var(--font-display);font-size:44px;color:#26262b;line-height:1}
.step h3{font-family:var(--font-alt);font-weight:800;font-size:20px;margin:12px 0 10px;color:#fff}
.step p{font-size:14.5px;line-height:1.6;color:var(--muted)}

/* -------- portfolio -------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.filter{background:rgba(255,255,255,0.05);color:var(--text-2);border:1px solid var(--line-2);
  font-weight:800;font-size:13px;letter-spacing:0.6px;text-transform:uppercase;padding:11px 18px;border-radius:100px;transition:.15s}
.filter:hover{color:#fff}
.filter[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:26px}
.gal-item{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--surface)}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gal-item:hover img{transform:scale(1.05)}
.gal-item .cap{position:absolute;left:12px;bottom:12px;background:rgba(10,10,11,0.72);backdrop-filter:blur(6px);
  border:1px solid var(--line-2);padding:6px 12px;border-radius:7px;font-weight:700;font-size:12.5px;letter-spacing:0.4px}
.gal-item.hide{display:none}
/* Service-page proof grid. Explicit column counts (1 → 2 → 4, never 3) so the
   eight-tile block always ends on a full row; auto-fill would let the count
   drift and leave a ragged last row at some viewport widths. */
.svc-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:980px){.svc-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:479px){.svc-gallery{grid-template-columns:1fr}}

/* -------- Recent Work mosaic --------
   Row heights come from the two right tiles' aspect-ratio, NOT from vh units.
   The old grid-auto-rows:minmax(170px,30vh) tied the crop to the browser
   WINDOW HEIGHT, so on a short laptop those tiles became a 2.4:1 letterbox and
   sliced the roof off every car. Fixed ratios mean the photo is cropped once,
   at build time, and looks identical on every screen. */
.rw-grid{display:grid;grid-template-columns:1fr;gap:14px}
.rw-tile{position:relative;margin:0;border-radius:16px;overflow:hidden;background:var(--surface-2)}
.rw-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.rw-tile:hover img{transform:scale(1.04)}
.rw-a{aspect-ratio:5/4}
.rw-b,.rw-c{aspect-ratio:16/9}
@media (min-width:760px){
  .rw-grid{grid-template-columns:1.45fr 1fr}
  .rw-a{grid-row:span 2;aspect-ratio:auto;min-height:100%}
}

/* -------- reviews -------- */
/* Fixed column counts, not auto-fit — auto-fit let the column count drift with
   the viewport, so any card count could leave a hole. 3-up at desktop means six
   reviews fill exactly two rows. */
.reviews-grid{display:grid;grid-template-columns:1fr;gap:16px}
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:26px;
  display:flex;flex-direction:column;transition:border-color .2s ease}
.review:hover{border-color:var(--line-2)}
.review .stars{margin-bottom:12px}
.review p{color:var(--text-2);font-size:15px;line-height:1.6;flex:1 0 auto}
.review .who{margin-top:16px;font-weight:700;color:#fff;font-size:14px}
.review .who span{color:var(--muted-2);font-weight:600}
/* Reviews page: a flowing testimonial wall. Multi-column balances the cards so
   an odd review count never leaves a hole the way a fixed grid would. */
.reviews-flow{columns:1;column-gap:16px}
.reviews-flow .review{display:block;break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 16px}
@media (min-width:640px){.reviews-flow{columns:2}}
@media (min-width:1040px){.reviews-flow{columns:3}}
.rating-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rating-hero .big{font-family:var(--font-display);font-size:56px;color:#fff;line-height:1}

/* -------- pricing tiles -------- */
.price-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.price-from{font-size:12px;color:var(--muted-2);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.price-val{font-family:var(--font-alt);font-weight:900;font-size:24px;color:#fff}

/* -------- feature/service detail rows -------- */
.svc-row{display:grid;grid-template-columns:300px 1fr auto;gap:clamp(20px,4vw,48px);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:clamp(20px,3vw,28px)}
.svc-row .thumb{width:100%;height:190px;border-radius:12px;object-fit:cover;background:var(--bg-2)}
.svc-row h2{font-family:var(--font-alt);font-weight:800;font-size:clamp(22px,2.4vw,30px);margin:14px 0 10px;color:#fff}
.svc-row p{font-size:15px;line-height:1.6;color:var(--muted);max-width:560px}
.svc-row .right{text-align:right;display:flex;flex-direction:column;gap:14px;align-items:flex-end}

/* content prose (service/city/article body) */
.prose{max-width:760px}
.prose h2{font-family:var(--font-alt);font-weight:800;font-size:clamp(22px,2.6vw,30px);color:#fff;margin:36px 0 14px}
.prose h3{font-family:var(--font-alt);font-weight:800;font-size:20px;color:#fff;margin:26px 0 10px}
.prose p{margin-bottom:14px;color:var(--text-2)}
.prose ul{margin:0 0 16px 0;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--text-2)}
.prose ul li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;background:var(--accent);border-radius:2px}
.two-col{display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,56px);align-items:start}

/* cards for applications / why */
.mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.mini{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.mini h4{font-family:var(--font-alt);font-weight:800;font-size:17px;color:#fff;margin-bottom:8px}
.mini p{font-size:14px;color:var(--muted);line-height:1.55}
.mini .ico{color:var(--accent);font-size:22px;margin-bottom:10px}

/* -------- FAQ accordion -------- */
.faq{max-width:820px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 0;font-family:var(--font-alt);font-weight:800;font-size:clamp(16px,2vw,19px);color:#fff}
.faq-q .pm{flex:none;width:26px;height:26px;border:1px solid var(--line-2);border-radius:50%;position:relative;transition:.2s}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--accent);inset:50% 6px auto 6px;height:2px;transform:translateY(-50%);transition:.2s}
.faq-q .pm::after{transform:translateY(-50%) rotate(90deg)}
.faq-q[aria-expanded="true"] .pm::after{transform:translateY(-50%) rotate(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.faq-a-inner{padding:0 0 22px;color:var(--text-2);line-height:1.6;max-width:720px}

/* -------- forms -------- */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(22px,3.4vw,40px)}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
/* Every control is nested INSIDE its <label>, so the label — not .field — has to
   be the column that stacks caption over input. Without this the caption and the
   control sit side by side and each row ends up a different width. */
.field > label{display:flex;flex-direction:column;gap:7px;width:100%;min-width:0}
.field label,.label{font-size:12.5px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;max-width:100%;box-sizing:border-box;
  /* the caption's uppercase/tracking would otherwise inherit into the control */
  text-transform:none;letter-spacing:normal;
  background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:14px;color:#fff;font-weight:500;transition:border-color .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:110px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.help{font-size:12.5px;color:var(--muted-2)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* multi-step */
.steps-bar{display:flex;gap:8px;margin-bottom:24px}
.steps-bar .sdot{flex:1;height:5px;border-radius:100px;background:var(--line-2)}
.steps-bar .sdot.on{background:var(--accent)}
.fstep{display:none}.fstep.active{display:block;animation:rise .35s ease both}
.form-nav{display:flex;gap:12px;margin-top:8px}
.chip-select{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--line-2);background:var(--bg);color:var(--text-2);border-radius:12px;padding:14px 16px;font-weight:700;font-size:14px;transition:.15s;min-height:48px}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:#fff}
.conditional{display:none}.conditional.show{display:block}
.form-success{text-align:center;padding:36px 10px}
.form-success .check{width:60px;height:60px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 18px}

/* -------- CTA band -------- */
.cta-band{position:relative;overflow:hidden;background:var(--accent);padding-block:clamp(52px,9vh,104px);text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% -20%,rgba(255,255,255,0.18),transparent 60%)}
.cta-band .inner{position:relative;max-width:840px;margin-inline:auto}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,0.92);font-weight:600;max-width:520px;margin:18px auto 32px}

/* -------- info cards (contact) -------- */
.info-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:block;transition:border-color .2s}
a.info-card:hover{border-color:var(--accent-ring)}
.info-card .k{font-size:12px;color:var(--accent);font-weight:800;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:8px}
.info-card .v{font-family:var(--font-alt);font-weight:800;font-size:20px;color:#fff}
.hours-row{display:flex;justify-content:space-between;font-size:14.5px;font-weight:600;color:var(--text-2);padding:4px 0}
.hours-row span:last-child{color:#fff}

/* -------- breadcrumb -------- */
.crumb{font-size:13px;color:var(--muted-2);font-weight:600;margin-bottom:14px}
.crumb a:hover{color:var(--text)}
.crumb span{color:var(--faint);margin:0 6px}

/* -------- footer --------
   Link rows are on a shared 30px rhythm so every column lands on the same
   baseline grid; Service Areas runs two-up (.fcol-2col) so its ten links make
   five rows instead of ten and the columns come out the same height. */
.footer{background:var(--bg-3);border-top:1px solid var(--line);padding:clamp(40px,5vh,60px) 0 26px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:30px 40px;align-items:start}
.footer .blurb{color:var(--muted);font-size:13.5px;line-height:1.6;max-width:330px;margin-top:14px}
.footer h4{font-weight:800;font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted-2);
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.footer .fcol{min-width:0}
.footer .fcol a,.footer .fcol span{display:block;color:var(--text-2);font-size:14px;font-weight:600;
  line-height:1.45;padding:0;margin-bottom:9px}
.footer .fcol a{transition:color .18s ease}
.footer .fcol a:hover{color:#fff}
.footer .fcol > :last-child{margin-bottom:0}
.fcol-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.fcol-2col a{white-space:nowrap}
.fcol-2col a:nth-last-child(-n+2){margin-bottom:0}
.socials{display:flex;gap:9px;margin-top:16px}
.socials a{width:40px;height:40px;border:1px solid var(--line-2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--text-2)}
.socials a:hover{border-color:var(--accent);color:var(--accent)}
.foot-bottom{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--faint);font-size:13px}
.foot-bottom a{color:var(--muted-2)}.foot-bottom a:hover{color:var(--text)}

/* -------- marquee (brand/keywords) --------
   Display-scale type, alternating solid / outlined words, accent diamonds as
   separators and a slow sheen sweeping across. Pauses on hover. */
.marquee{position:relative;overflow:hidden;border-block:1px solid var(--line);
  padding-block:clamp(18px,2.8vh,28px);
  background:radial-gradient(760px 150px at 50% 125%,rgba(12,131,223,.14),transparent 72%),
             linear-gradient(180deg,var(--bg),var(--bg-2));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-track{display:flex;width:max-content;gap:0;white-space:nowrap;animation:marquee 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track .grp{display:flex;align-items:center}
.marquee-track .w{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(21px,3.2vw,38px);line-height:1;letter-spacing:.4px;padding-inline:clamp(14px,1.6vw,24px);
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.24)}
.marquee-track .grp .w:nth-child(4n+1){color:#fff;-webkit-text-stroke:0}
.marquee-track .dot{flex:none;width:7px;height:7px;border-radius:1px;transform:rotate(45deg);
  background:var(--accent);box-shadow:0 0 15px rgba(12,131,223,.9)}
.marquee-sheen{position:absolute;inset:0;pointer-events:none;transform:translateX(-100%);
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.09) 47%,rgba(12,131,223,.17) 53%,transparent 62%);
  animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%{transform:translateX(-100%)}58%,100%{transform:translateX(100%)}}

/* -------- utility -------- */
.hide-mobile{display:none}
.spacer-header{height:var(--header-h)}
.divider{height:1px;background:var(--line);margin-block:clamp(40px,6vh,72px)}
.tc-red{color:var(--accent)}
.mw-640{max-width:640px}

/* -------- animations -------- */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.anim-rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.js [data-reveal].in{opacity:1;transform:none}

/* -------- responsive -------- */
@media (min-width:560px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .trust-row{grid-template-columns:repeat(2,1fr)}
  .trust-cell:last-child{grid-column:1/-1}
}
@media (min-width:640px){
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1040px){
  .reviews-grid{grid-template-columns:repeat(3,1fr)}
}
/* Five across only once each cell can hold its title on one line. Above this
   the cells stack their mark over the copy and centre it, which keeps all five
   the exact same shape. */
@media (min-width:1080px){
  .trust-row{grid-template-columns:repeat(5,1fr)}
  .trust-cell{flex-direction:column;justify-content:center;text-align:center;gap:13px;padding:26px 14px;min-height:162px}
  .trust-cell:last-child{grid-column:auto}
  .tw-txt{align-items:center}
}
@media (min-width:900px){
  .hide-mobile{display:block}
  .two-col{grid-template-columns:1.15fr .85fr}
  .two-col.form-first{grid-template-columns:1.1fr .9fr}
}
/* four footer columns only once the first one is wide enough to hold the full
   badge + wordmark lockup; below that it stays two columns */
@media (min-width:1100px){
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
}
/* Desktop nav switches on at 1000px, not 900. With the NIKO wordmark now in
   the lockup there isn't room for six links plus two buttons below that, and a
   squeezed nav wrapped "Vehicle Wraps" onto two lines and clipped the phone
   button. 900-999px gets the burger and the sticky call/text/quote bar. */
@media (min-width:1000px){
  .nav-desktop{display:flex}
  .menu-toggle{display:none}
  .sticky-cta{display:none}
  body{padding-bottom:0}
}
/* nav ladder — drop the least-essential links first as the header tightens.
   Everything hidden here is still in the Services mega menu and the footer. */
@media (max-width:1349px){ .nav-desktop .nav-l3{display:none} }
@media (max-width:1249px){ .nav-desktop .nav-l2{display:none} }
/* ...and hold the wordmark off the nav inside each tier. The constant backed
   out of 100vw is the measured widest the nav plus the badge, gap and page
   gutters ever get in that tier, plus ~24px of breathing room. Below the top
   of a tier the wordmark scales down proportionally instead of colliding. */
@media (min-width:1350px){ .header .logo-word{max-width:min(278px,calc(100vw - 1167px))} }
@media (min-width:1250px) and (max-width:1349px){ .header .logo-word{max-width:min(278px,calc(100vw - 975px))} }
@media (min-width:1000px) and (max-width:1249px){ .header .logo-word{max-width:min(278px,calc(100vw - 792px))} }
@media (max-width:999px){
  body{padding-bottom:72px} /* room for sticky bar */
  /* badge + wordmark must still clear the burger button: 44px badge (~48px
     wide) + 8px gap + 46px burger + 2x18px padding + breathing room ≈ 156px */
  .header .logo{gap:8px}
  .header .logo-img{height:44px}
  .header .logo-word{max-height:26px;max-width:calc(100vw - 156px)}
}
@media (max-width:899px){
  .svc-row{grid-template-columns:1fr;text-align:left}
  .svc-row .right{text-align:left;align-items:flex-start}
  .svc-row .thumb{height:220px}
  .stat{border-right:none;border-bottom:1px solid var(--line)}
  .rating-hero{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .marquee-track{animation:none;transform:none}
  [data-reveal]{opacity:1;transform:none}
}

/* ---- Ceramic coating package tiers (ceramic-coating service page) --------- */
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px;align-items:stretch}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:26px 24px;display:flex;flex-direction:column;position:relative}
.tier--pop{border-color:var(--accent-ring);box-shadow:0 0 0 1px var(--accent-ring)}
.tier-badge{position:absolute;top:-11px;left:24px;background:var(--accent);color:#fff;
  font-family:var(--font-alt);font-weight:800;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  padding:5px 12px;border-radius:100px}
.tier-tag{font-family:var(--font-alt);font-weight:900;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:5px 10px;border-radius:6px;align-self:flex-start}
.tier h3{font-family:var(--font-alt);font-weight:800;font-size:22px;color:#fff;margin-top:14px}
.tier-life{color:var(--accent);font-weight:800;font-size:14px;margin-top:4px}
.tier-desc{color:var(--muted);font-size:14px;line-height:1.55;margin-top:10px}
.tier-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin:16px 0 22px;padding:0}
.tier-list li{position:relative;padding-left:24px;color:var(--text-2);font-size:14px;line-height:1.5}
.tier-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:800}
.tier .btn{margin-top:auto}