/* Apex Auto Film — visual system.

   COLOUR comes from the logo, not from taste: #083459 is the exact ink sampled out of the
   logo artwork, and it is also the theme_color in the live site's own manifest, so it is the
   brand navy by two independent accounts rather than by eye.

   TYPE is the pairing from flippratz.com — Saira for display, Manrope for text — because that
   is Ryan's own design language, and Saira's squared, slightly condensed letterforms echo the
   logo's geometry closely. Headings carry NEGATIVE tracking, as they do there.

   GEOMETRY is the logo's, and this is where the two references disagree. FlippRatz rounds
   everything to 16-20px. The Apex logo has ZERO rounded corners anywhere — the A is a summit,
   the E has an angled chevron cut, the X is all straight lines. Softening that away would
   discard the only distinctive thing the identity owns, so the radius here is 0 and the
   recurring device is the peak itself.
*/
:root{
  /* sampled from the logo artwork */
  --navy:#083459; --navy-deep:#051f36; --navy-mid:#0a3f6b; --navy-lift:#0e4d81;
  /* tinted glass catching light — the product itself. Interactive things only. */
  --ice:#6fb5e0; --ice-dim:#4a93c4;
  --ground:#f2f5f8; --surface:#fff; --surface-2:#e9eef4;
  --ink:#0f1720; --ink-2:#4a5866; --ink-3:#7b8894; --line:#ccd7e2;
  --wrap:1200px;
  --f-display:"Saira","Segoe UI",system-ui,sans-serif;
  --f-body:"Manrope","Segoe UI",system-ui,sans-serif;
  --step:clamp(52px,8vw,104px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:22px}
.wrap.narrow{max-width:780px}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:100;background:#fff;padding:10px 18px;
  outline:3px solid var(--navy)}
:focus-visible{outline:3px solid var(--ice);outline-offset:2px}

/* ── the peak, drawn from the logo's summit-A ───────────────────────────────── */
.peak{width:34px;height:auto;display:block;fill:var(--ice);margin-bottom:18px}
.card .peak{width:26px;margin-bottom:14px;fill:var(--navy)}
.hero .peak{width:44px;fill:var(--ice)}
.peak-rule{display:flex;align-items:center;gap:18px;margin:0 0 6px}
.peak-rule::before,.peak-rule::after{content:"";height:1px;background:var(--line);flex:1}
.peak-rule .peak{margin:0;width:28px;fill:var(--navy)}

/* ── header ─────────────────────────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff}
.site-head::after{content:"";display:block;height:2px;
  background:linear-gradient(90deg,var(--ice) 0%,transparent 55%)}
.head-inner{display:flex;align-items:center;gap:26px;min-height:80px}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand-logo{height:48px;width:auto;object-fit:contain;filter:brightness(0) invert(1)}
.brand-foot .brand-logo{height:42px}
.nav{display:flex;gap:26px;margin-left:auto;flex-wrap:wrap}
.nav a{text-decoration:none;font-family:var(--f-display);font-size:12.5px;font-weight:600;
  letter-spacing:.055em;color:rgba(255,255,255,.82);padding:8px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--ice);transition:right .22s ease}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a.is-active::after{right:0}
.nav a.is-active{color:#fff}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0}

/* ── buttons: square, like the mark ─────────────────────────────────────────── */
.btn{display:inline-block;padding:14px 28px;text-decoration:none;font-family:var(--f-display);
  font-weight:600;font-size:12.5px;letter-spacing:.08em;border:2px solid transparent;
  cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn-accent{background:var(--ice);color:var(--navy-deep);border-color:var(--ice)}
.btn-accent:hover{background:#fff;border-color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-lg{padding:17px 36px;font-size:13px}
.band .btn-accent{background:var(--navy);color:#fff;border-color:var(--navy)}
.band .btn-accent:hover{background:var(--navy-lift);border-color:var(--navy-lift)}

/* ── hero ───────────────────────────────────────────────────────────────────── */
.hero{--hero-img:none;position:relative;color:#fff;padding-block:var(--step);
  background-image:linear-gradient(105deg,rgba(5,31,54,.94) 0%,rgba(5,31,54,.72) 55%,
    rgba(5,31,54,.55) 100%),var(--hero-img),
    linear-gradient(160deg,var(--navy-mid),var(--navy-deep));
  background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-inner{max-width:920px}
.hero h1{margin:0 0 16px;font-family:var(--f-display);font-weight:700;
  font-size:clamp(2.2rem,6vw,4.1rem);line-height:1.02;letter-spacing:-.022em;
  text-wrap:balance}
.hero-sub{margin:0 0 30px;font-family:var(--f-display);font-weight:500;
  font-size:clamp(.8rem,1.5vw,.95rem);letter-spacing:.16em;color:var(--ice)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.kicker,.eyebrow{margin:0 0 10px;font-family:var(--f-display);font-size:11.5px;
  letter-spacing:.2em;font-weight:600;color:var(--ice)}
.band .eyebrow{color:var(--ink-3)}

/* ── badges ─────────────────────────────────────────────────────────────────── */
.badges{background:var(--navy-deep);border-bottom:1px solid rgba(255,255,255,.08)}
.badges ul{display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:center;list-style:none;
  margin:0;padding:20px 0}
.badges li{font-family:var(--f-display);font-size:11px;font-weight:600;letter-spacing:.17em;
  color:rgba(255,255,255,.7)}

/* ── bands ──────────────────────────────────────────────────────────────────── */
.band{padding-block:var(--step)}
.band-dark{background:var(--navy);color:#fff}
.band-dark .eyebrow{color:var(--ice)}
.band-cta{background:var(--surface-2)}
.band-quote{background:var(--surface-2)}
.band h2{margin:0 0 10px;font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.5rem,3.4vw,2.5rem);letter-spacing:-.018em;line-height:1.08;
  text-wrap:balance}
.lede{color:var(--ink-2);margin:0 0 26px;font-size:1.06rem;max-width:62ch}
.band-dark .lede{color:rgba(255,255,255,.78)}
.muted{color:var(--ink-3);font-size:.9rem}
.band-dark .muted{color:rgba(255,255,255,.55)}

/* ── cards: hairline grid, no radius ────────────────────────────────────────── */
.cards,.svc-grid{display:grid;gap:2px;margin-top:34px;background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.card,.svc{background:var(--surface);padding:32px 28px;display:flex;flex-direction:column;
  gap:11px;transition:background .2s ease,transform .2s ease}
.card:hover,.svc:hover{background:#fbfcfe;transform:translateY(-2px)}
.card h3,.svc h3{margin:0;font-family:var(--f-display);font-size:1.02rem;font-weight:600;
  letter-spacing:-.005em;color:var(--navy);line-height:1.25}
.card p,.svc p{margin:0;color:var(--ink-2);font-size:.95rem}
.card-cta{margin-top:auto;padding-top:10px;font-family:var(--f-display);font-weight:600;
  font-size:12px;letter-spacing:.07em;color:var(--navy);text-decoration:none;
  align-self:flex-start;border-bottom:2px solid var(--ice);padding-bottom:2px}
.card-cta:hover{border-bottom-color:var(--navy)}

/* ── quote form ─────────────────────────────────────────────────────────────── */
.quote-form{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.quote-form .row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.quote-form input,.quote-form textarea{font-family:var(--f-body);font-size:.97rem;
  padding:14px 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  width:100%}
.quote-form input:focus,.quote-form textarea:focus{outline:none;border-color:var(--navy);
  box-shadow:inset 0 -2px 0 var(--ice)}
.quote-form button{align-self:flex-start}
.form-note{margin:2px 0 0;font-size:.92rem;color:var(--navy);font-weight:600}

/* ── two-up / location ──────────────────────────────────────────────────────── */
.two-up{display:grid;gap:44px;grid-template-columns:1.15fr .85fr;align-items:start}
.loc h3{margin:0 0 12px;font-family:var(--f-display);font-size:1.05rem;font-weight:600;
  letter-spacing:.01em}
.loc p{margin:0 0 7px}
.loc a{color:var(--ice);text-decoration:none;border-bottom:1px solid transparent}
.loc a:hover{border-bottom-color:var(--ice)}
address{font-style:normal;font-size:.97rem;line-height:1.55;margin-bottom:10px}
.loc address{color:rgba(255,255,255,.88)}

/* ── gallery ────────────────────────────────────────────────────────────────── */
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:26px 0 12px}
.ig-grid img{aspect-ratio:1;width:100%;object-fit:cover;background:var(--surface-2);
  filter:saturate(.92);transition:filter .25s ease,transform .25s ease}
.ig-grid img:hover{filter:saturate(1.1);transform:scale(1.015)}
.ig-grid div{aspect-ratio:1;background:var(--surface-2)}
blockquote{margin:0;font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.05rem,2.2vw,1.45rem);line-height:1.45;color:#fff;letter-spacing:-.01em}

/* ── footer ─────────────────────────────────────────────────────────────────── */
.site-foot{background:var(--navy-deep);color:rgba(255,255,255,.76);padding-block:60px 24px}
.foot-grid{display:grid;gap:38px;grid-template-columns:1.5fr 1fr 1.1fr 1.2fr}
.foot-grid h4{margin:0 0 14px;font-family:var(--f-display);font-size:11.5px;
  letter-spacing:.16em;color:#fff;font-weight:600}
.foot-grid a{display:block;text-decoration:none;font-size:.93rem;padding:4px 0;
  color:rgba(255,255,255,.76)}
.foot-grid a:hover{color:var(--ice)}
.brand-foot{margin-bottom:14px}
.foot-blurb{margin:0;font-size:.93rem;color:rgba(255,255,255,.55);max-width:34ch}
.signup{display:flex;gap:9px;flex-wrap:wrap}
.signup input{flex:1 1 150px;padding:13px 14px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);color:#fff;font-family:var(--f-body)}
.signup input::placeholder{color:rgba(255,255,255,.45)}
.foot-legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:40px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.86rem;
  color:rgba(255,255,255,.5)}
.foot-legal a{color:rgba(255,255,255,.7);text-decoration:none}

@media (max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .two-up{grid-template-columns:1fr;gap:32px}
  .ig-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .nav-toggle{display:block}
  .nav{display:none;order:3;flex-basis:100%;flex-direction:column;gap:0;padding-bottom:12px}
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav a::after{display:none}
  .head-inner{flex-wrap:wrap;padding-block:12px;gap:14px;min-height:0}
  .head-cta{margin-left:auto}
  .quote-form .row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-cta{flex-direction:column;align-items:flex-start}
  .hero-cta .btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::after{transition:none!important;animation:none!important}
  .card:hover,.svc:hover,.ig-grid img:hover{transform:none}
}

/* ═══ CREDIBILITY ═════════════════════════════════════════════════════════════
   Added because for a local trade the things that actually convert are proof and
   specificity, not ornament: who certifies the film, how fast it is done, whether the
   price is a guess, what the shades look like, and one real customer in their own words. */

.band-trust{padding-block:clamp(34px,4.5vw,56px);background:var(--surface);
  border-bottom:1px solid var(--line)}
.trust-grid{display:grid;gap:2px;background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.trust{background:var(--surface);padding:26px 26px 28px;display:flex;flex-direction:column;
  gap:9px}
.trust .peak{width:24px;margin-bottom:8px;fill:var(--ice-dim)}
.trust h3{margin:0;font-family:var(--f-display);font-size:.88rem;font-weight:600;
  letter-spacing:.11em;color:var(--navy)}
.trust p{margin:0;color:var(--ink-2);font-size:.93rem;line-height:1.6}

/* ── the shade scale: film transmitting a percentage of what hits it ──────── */
.band-shade{background:var(--surface)}
.shades{list-style:none;display:grid;gap:2px;margin:32px 0 18px;padding:0;
  grid-template-columns:repeat(5,1fr);background:var(--line)}
.shades li{background:var(--surface);padding:0 0 16px;text-align:center;overflow:hidden}
.shades .sw{display:block;height:110px;position:relative;margin-bottom:12px;
  background:linear-gradient(180deg,var(--navy-mid),var(--navy-deep));overflow:hidden}
/* the swatch darkens as VLT drops; 5% is nearly opaque, 70% nearly clear */
.shades li:nth-child(1) .sw{opacity:1}
.shades li:nth-child(2) .sw{opacity:.84}
.shades li:nth-child(3) .sw{opacity:.66}
.shades li:nth-child(4) .sw{opacity:.46}
.shades li:nth-child(5) .sw{opacity:.26}
/* light passing across the film */
.shades .sw::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.34) 50%,transparent 65%);
  transform:translateX(-130%);animation:sweep 5.5s ease-in-out infinite}
.shades li:nth-child(2) .sw::after{animation-delay:.28s}
.shades li:nth-child(3) .sw::after{animation-delay:.56s}
.shades li:nth-child(4) .sw::after{animation-delay:.84s}
.shades li:nth-child(5) .sw::after{animation-delay:1.12s}
@keyframes sweep{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
.shades b{display:block;font-family:var(--f-display);font-size:1.18rem;font-weight:700;
  color:var(--navy);letter-spacing:-.01em}
.shades i{display:block;font-style:normal;font-size:.78rem;letter-spacing:.11em;
  color:var(--ink-3);font-family:var(--f-display);font-weight:500;margin-top:2px}

/* ── the review, given its own room ──────────────────────────────────────── */
.band-quote-hero{position:relative;overflow:hidden}
.band-quote-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(760px 300px at 50% -10%,rgba(111,181,224,.16),transparent 70%)}
.band-quote-hero .wrap{position:relative}
.attrib{margin:18px 0 0;font-family:var(--f-display);font-size:.8rem;letter-spacing:.14em;
  color:var(--ice)}

/* ═══ MOTION ══════════════════════════════════════════════════════════════════
   Everything below is an ENHANCEMENT on top of a page that is already complete and
   readable. The resting state is the visible state -- the .is-ready hook is added by JS,
   so if the script never runs, nothing is hidden. Reveals move a few pixels and fade;
   they do not slide content in from off-screen. */

.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.shown{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}

/* hero entrance: the peak, then the line, then the rest */
.js .hero .peak,.js .hero h1,.js .hero .hero-sub,.js .hero .hero-cta,.js .hero .kicker{
  opacity:0;transform:translateY(16px)}
.js .hero.shown .peak,.js .hero.shown h1,.js .hero.shown .hero-sub,
.js .hero.shown .hero-cta,.js .hero.shown .kicker{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js .hero.shown .kicker{transition-delay:.05s}
.js .hero.shown h1{transition-delay:.12s}
.js .hero.shown .hero-sub{transition-delay:.22s}
.js .hero.shown .hero-cta{transition-delay:.3s}

/* cards arrive in sequence rather than as a block */
.js .cards .card,.js .svc-grid .svc,.js .trust-grid .trust{opacity:0;transform:translateY(12px)}
.js .shown .card,.js .shown .svc,.js .shown .trust{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s ease}
.js .shown .card:nth-child(2),.js .shown .svc:nth-child(2),
.js .shown .trust:nth-child(2){transition-delay:.07s}
.js .shown .card:nth-child(3),.js .shown .svc:nth-child(3),
.js .shown .trust:nth-child(3){transition-delay:.14s}
.js .shown .card:nth-child(4){transition-delay:.21s}
.js .shown .card:nth-child(5){transition-delay:.26s}
.js .shown .card:nth-child(6){transition-delay:.31s}

/* the peak lifts slightly with its card */
.card .peak,.trust .peak{transition:transform .3s ease,fill .3s ease}
.card:hover .peak{transform:translateY(-3px);fill:var(--ice-dim)}

/* buttons get a light sweep, same idea as the film */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%)}
.btn:hover::after{transform:translateX(120%);transition:transform .65s ease}

@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal.shown,.js .hero .peak,.js .hero h1,.js .hero .hero-sub,
  .js .hero .hero-cta,.js .hero .kicker,.js .cards .card,.js .svc-grid .svc,
  .js .trust-grid .trust{opacity:1!important;transform:none!important;transition:none!important}
  .shades .sw::after{animation:none;opacity:0}
  .btn::after{display:none}
}
@media (max-width:760px){
  .shades{grid-template-columns:repeat(5,1fr)}
  .shades .sw{height:76px}
  .shades b{font-size:.92rem}
  .shades i{font-size:.62rem;letter-spacing:.06em}
}

.hours{margin:0 0 8px;font-family:var(--f-display);font-weight:500;font-size:.95rem;
  letter-spacing:.01em;color:#fff}