/* ==========================================================================
   Apex Films Fresno — Rebrand Bridge Landing Page (replaces WrapBrosFresno.com)
   Brand: amber #F19901 / black / Orbitron + Saira(≈Eurostile) + Roboto. Sharp 0-radius.
   ========================================================================== */
:root{
  --amber:#F19901; --amber-deep:#D98200;
  --black:#000; --ink:#050505; --charcoal:#1A1A1A; --charcoal-2:#121212;
  --white:#fff; --white-76:rgba(255,255,255,.76); --white-50:rgba(255,255,255,.5);
  --border:rgba(255,255,255,.12);
  --f-display:'Orbitron',system-ui,sans-serif;
  --f-body:'Saira',system-ui,sans-serif;        /* Eurostile stand-in (Adobe kit is domain-locked) */
  --f-ui:'Roboto',system-ui,sans-serif;
  --container:1200px; --pad:clamp(20px,5vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0; background:var(--black); color:var(--white-76);
  font-family:var(--f-body); font-size:18px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--amber); text-decoration:none}
a:hover{color:var(--amber-deep)}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px}
.skip{position:absolute; left:-9999px; top:0; background:var(--amber); color:#000; padding:10px 16px; z-index:200; font-family:var(--f-ui)}
.skip:focus{left:8px; top:8px}

h1,h2,h3{font-family:var(--f-display); color:var(--white); line-height:1.25; margin:0}
h1{font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.eyebrow{font-family:var(--f-display); font-weight:600; color:var(--amber);
  letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; margin:0 0 14px}
.eyebrow::before{content:"// "}
.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:clamp(56px,9vw,104px)}
.section--charcoal{background:var(--charcoal-2)}
.section__head{max-width:64ch; margin-bottom:40px}
.section__head h2{font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:700; text-transform:uppercase; letter-spacing:.03em}
.lead{font-size:1.075rem; color:var(--white-76)}
.rule{width:56px;height:3px;background:var(--amber);border:0;margin:18px 0 0}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:var(--f-ui); font-weight:500;
  font-size:1rem; letter-spacing:.03em; padding:14px 30px; border:0; border-radius:0; cursor:pointer;
  transition:background-color .2s ease-out,color .2s ease-out,transform .2s ease-out}
.btn--primary{background:var(--amber); color:#fff}
.btn--primary:hover{background:var(--amber-deep); color:#fff}
.btn--ghost{background:transparent; color:#fff; box-shadow:inset 0 0 0 1px var(--amber)}
.btn--ghost:hover{background:var(--amber); color:#fff}
.btn .arr{transition:transform .2s ease-out}
.btn:hover .arr{transform:translateX(3px)}

/* Header */
.header{position:sticky; top:0; z-index:100; background:rgba(0,0,0,.82);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--border)}
.header__bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px}
.header__logo img{height:34px; width:auto}
.header .btn{padding:11px 22px; font-size:.92rem}
@media (max-width:560px){.header .btn .full{display:none}}

/* Hero */
.hero{position:relative; min-height:clamp(560px,86vh,820px); display:flex; align-items:center; overflow:hidden}
.hero__bg{position:absolute; inset:0; background:#000 center/cover no-repeat; z-index:0}
.hero__scrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.82) 38%,rgba(0,0,0,.35) 70%,rgba(0,0,0,.55) 100%),
             linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,0) 45%)}
.hero__inner{position:relative; z-index:2; width:100%; padding-block:64px}
.hero__content{max-width:680px}
.hero h1{font-size:clamp(1.9rem,5.2vw,3.4rem); line-height:1.12}
.hero h1 .mark{color:var(--amber)}
.hero__sub{font-size:clamp(1.05rem,2.2vw,1.25rem); color:var(--white-76); margin:20px 0 0; max-width:60ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.hero__note{margin-top:22px; font-family:var(--f-display); font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--white-50)}

/* Rebrand strip */
.strip{background:var(--amber); color:#1a1a1a}
.strip__inner{display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; padding-block:16px;
  font-family:var(--f-display); font-weight:600; letter-spacing:.02em; text-transform:uppercase; font-size:.92rem}
.strip__inner strong{color:#000}

/* Generic grid */
.grid{display:grid; gap:24px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:1.05fr .95fr; align-items:center; gap:48px}
@media (max-width:880px){.grid--3{grid-template-columns:1fr}.grid--2{grid-template-columns:1fr; gap:32px}}

/* Service cards */
.card{background:var(--charcoal); border:1px solid var(--border); display:flex; flex-direction:column;
  transition:transform .2s ease-out, border-color .2s ease-out}
.card:hover{transform:translateY(-4px); border-color:rgba(241,153,1,.5)}
.card__media{aspect-ratio:3/2; background:#000 center/cover no-repeat}
.card__body{padding:24px 24px 28px; display:flex; flex-direction:column; gap:12px; flex:1}
.card__kicker{font-family:var(--f-display); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber)}
.card h3{font-size:1.18rem; font-weight:600; letter-spacing:.02em; color:#fff}
.card p{margin:0; font-size:.98rem; color:var(--white-76)}
.card__link{margin-top:auto; font-family:var(--f-display); font-weight:600; font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--amber); display:inline-flex; gap:.4em; align-items:center}
.card__link .arr{transition:transform .2s ease-out}
.card:hover .card__link .arr{transform:translateX(3px)}

/* Why / trust */
.why__media{position:relative}
.why__media img{width:100%; height:100%; object-fit:cover; border:1px solid var(--border)}
.feature-list{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:16px}
.feature-list li{padding-left:26px; position:relative; color:var(--white-76)}
.feature-list li::before{content:""; position:absolute; left:0; top:.55em; width:10px; height:10px; background:var(--amber)}
.feature-list strong{color:#fff; font-family:var(--f-display); font-weight:600; letter-spacing:.02em}
.stats{display:flex; flex-wrap:wrap; gap:36px 56px; margin-top:36px}
.stat__num{font-family:var(--f-display); font-weight:800; font-size:clamp(2rem,5vw,2.8rem); color:var(--amber); line-height:1; letter-spacing:-.01em}
.stat__lbl{margin-top:8px; font-size:.85rem; color:var(--white-50); text-transform:uppercase; letter-spacing:.1em; font-family:var(--f-display)}

/* Location / CTA */
.contact__grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start}
@media (max-width:880px){.contact__grid{grid-template-columns:1fr; gap:32px}}
.nap{font-style:normal; font-size:1.05rem; line-height:1.9; color:var(--white-76)}
.nap a{color:#fff} .nap a:hover{color:var(--amber)}
.nap .label{font-family:var(--f-display); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); display:block; margin-top:18px}
.cta-card{background:var(--charcoal); border:1px solid var(--border); padding:32px}
.cta-card h3{font-size:1.3rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em}
.cta-card p{color:var(--white-76); margin:12px 0 24px}
.cta-card .btn{width:100%; justify-content:center; margin-bottom:12px}

/* Footer */
.footer{background:var(--ink); border-top:1px solid var(--border); padding-block:48px 36px}
.footer__top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px}
.footer__logo img{height:32px; margin-bottom:14px}
.footer__col h4{font-family:var(--f-display); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--white-50); margin:0 0 12px}
.footer__col ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.footer__col a{color:var(--white-76)} .footer__col a:hover{color:var(--amber)}
.footer__legal{margin-top:36px; padding-top:20px; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; font-size:.82rem; color:var(--white-50)}
.footer__former{color:var(--white-50)}
.footer__former b{color:var(--white-76); font-family:var(--f-display); font-weight:600}

/* XPEL badge row */
.badges{display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:28px; opacity:.85}
.badges img{height:30px; width:auto; filter:grayscale(1) brightness(1.6); opacity:.8}
.badges .since{font-family:var(--f-display); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--white-50)}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease-out, transform .6s ease-out}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none}}