/* ==========================================================================
   Tint Station — master.css  (LIGHT-first automotive design system)
   White content · dark header/footer/bands · racing red + metallic gold + chrome
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800&family=Fraunces:ital,opsz,wght@1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* light surfaces (content) */
  --paper:#ffffff;
  --paper-2:#f5f6f8;
  --paper-3:#eef0f3;
  --surface:#ffffff;
  --hair:rgba(15,18,25,.10);
  --hair-2:rgba(15,18,25,.16);

  /* text on light */
  --text:#0f1116;
  --text-soft:#3b414c;
  --text-mute:#697180;
  --text-faint:#98a0ad;

  /* dark surfaces (header/footer/bands) */
  --ink:#0b0b0d;
  --ink-2:#131419;
  --ink-3:#1b1d23;
  --ink-4:#24262e;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --fg:#f4f5f7;
  --fg-soft:#c8ccd4;
  --fg-mute:#949aa6;
  --fg-faint:#5c626d;

  /* brand */
  --red:#e0111f;
  --red-600:#c20e1a;
  --red-glow:rgba(224,17,31,.42);
  --gold:#bf8a2c;          /* deeper gold reads on white */
  --gold-2:#e2b657;        /* bright gold on dark */
  --gold-deep:#9c6f22;

  /* metallic text fills */
  --chrome-dark:linear-gradient(180deg,#20242c 0%,#0b0d12 100%);   /* on light */
  --chrome-silver:linear-gradient(180deg,#ffffff 0%,#f2f5f9 44%,#cfd7e0 60%,#f7f9fc 80%,#ffffff 100%); /* on dark — crisp, no grey mud */

  --display:'Saira Condensed',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;

  --wrap:1200px;--wrap-wide:1360px;
  --gutter:clamp(20px,5vw,64px);
  --section-y:clamp(60px,8vw,116px);
  --radius:14px;--radius-lg:22px;--radius-sm:9px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-sm:0 8px 24px -14px rgba(15,18,25,.28);
  --shadow:0 26px 60px -28px rgba(15,18,25,.38);
  --shadow-red:0 18px 40px -18px var(--red-glow);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:.01em;color:var(--text)}
p{margin:0 0 1em}
strong{color:inherit}
::selection{background:var(--red);color:#fff}

/* ---- Layout --------------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:1}
.wrap--wide{max-width:var(--wrap-wide)}
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:clamp(42px,6vw,80px)}
.center{text-align:center}
.grid{display:grid;gap:clamp(16px,2vw,26px)}
@media(min-width:640px){.g-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}}
@media(max-width:899px){.g-4{grid-template-columns:repeat(2,1fr)}}

/* alt light band + dark band */
.section--alt{background:var(--paper-2)}
.section--dark{background:linear-gradient(180deg,var(--ink-2),var(--ink));color:var(--fg)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--fg)}
.section--dark .lead{color:var(--fg-soft)}

/* ---- Type ----------------------------------------------------------------- */
.display{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:.94;letter-spacing:.005em;text-transform:uppercase}
.h1{font-size:clamp(2.2rem,4.8vw,3.8rem);text-transform:uppercase}
.h2{font-size:clamp(1.9rem,3.6vw,2.9rem);text-transform:uppercase}
.h3{font-size:clamp(1.25rem,2vw,1.65rem);text-transform:uppercase;letter-spacing:.02em}
.lead{font-size:clamp(1.05rem,1.5vw,1.26rem);color:var(--text-soft);max-width:64ch}
.eyebrow{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.26em;
  font-size:.82rem;color:var(--gold);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--red),var(--gold))}
.chrome{background:var(--chrome-dark);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .chrome,.cta-band .chrome,.section--dark .chrome,.site-footer .chrome,.showcase .chrome{background:var(--chrome-silver);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-red{color:var(--red)}.text-gold{color:var(--gold)}.muted{color:var(--text-mute)}
.section--dark .text-gold{color:var(--gold-2)}
/* elegant serif italic accent for a single headline word (à la the reference sites) */
.hl-serif{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;text-transform:none;
  letter-spacing:0;line-height:.9;display:inline-block;padding-right:.06em}
.sec-head{max-width:70ch}.sec-head.center{margin-inline:auto}
.sec-head .lead{margin-top:1rem}.sec-head.center .lead{margin-inline:auto}

/* ---- Buttons -------------------------------------------------------------- */
.btn{--pad:.95em 1.6em;display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.98rem;
  padding:var(--pad);border-radius:var(--radius-sm);cursor:pointer;border:1px solid transparent;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,color .2s,border-color .2s;line-height:1}
.btn:hover{transform:translateY(-2px)}
.btn--red{background:linear-gradient(180deg,var(--red),var(--red-600));color:#fff;box-shadow:var(--shadow-red)}
.btn--gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a1206}
.btn--ghost{border-color:var(--hair-2);color:var(--text);background:#fff}
.btn--ghost:hover{border-color:var(--red);color:var(--red)}
.section--dark .btn--ghost,.hero .btn--ghost,.cta-band .btn--ghost,.showcase .btn--ghost{background:rgba(255,255,255,.04);border-color:var(--line-2);color:#fff}
.section--dark .btn--ghost:hover,.hero .btn--ghost:hover,.cta-band .btn--ghost:hover,.showcase .btn--ghost:hover{border-color:var(--gold-2);color:var(--gold-2)}
.btn--lg{--pad:1.15em 2em;font-size:1.05rem}
.btn svg{width:1.05em;height:1.05em}

/* ---- Cards ---------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);
  padding:clamp(22px,2.4vw,32px);position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);border-color:var(--hair-2);box-shadow:var(--shadow)}
.card__icon{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(150deg,rgba(224,17,31,.12),rgba(191,138,44,.12));border:1px solid var(--hair);color:var(--red)}
.card__icon svg{width:26px;height:26px}
.card h3{margin-bottom:.4em}
.card p{color:var(--text-mute);margin:0}
a.card{display:block;color:inherit}
a.card .more{margin-top:16px;display:inline-flex;align-items:center;gap:.4em;color:var(--red);
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem}
a.card:hover .more{gap:.7em;color:var(--gold)}
/* cards inside dark bands */
.section--dark .card{background:linear-gradient(180deg,var(--ink-3),var(--ink-2));border-color:var(--line);box-shadow:none;color:var(--fg)}
.section--dark .card p{color:var(--fg-mute)}
.section--dark .card__icon{background:radial-gradient(120% 120% at 30% 20%,rgba(224,17,31,.22),rgba(226,182,87,.12));border-color:var(--line-2);color:var(--gold-2)}
.section--dark a.card .more{color:var(--gold-2)}

/* ---- Hero (home) ---------------------------------------------------------- */
.hero{position:relative;min-height:clamp(560px,86vh,880px);display:flex;align-items:center;overflow:hidden;isolation:isolate;background:var(--ink)}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(6,6,8,.96) 6%,rgba(8,8,11,.82) 40%,rgba(8,8,11,.30) 82%),
            linear-gradient(0deg,var(--ink),transparent 46%)}
.hero__glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(38vw 38vw at 80% 32%,var(--red-glow),transparent 60%)}
@media(max-width:700px){
  /* stronger, full-width scrim on mobile so the white headline always reads over a bright image */
  .hero__bg::after{background:linear-gradient(180deg,rgba(6,6,8,.78) 0%,rgba(8,8,11,.55) 35%,rgba(6,6,8,.82) 100%)}
}
.hero .wrap{padding-block:clamp(80px,10vw,120px)}
.hero__inner{max-width:46rem}
.hero h1{margin:.35em 0 .5em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero .lead{margin-bottom:2rem;color:var(--fg-soft)}
.hero .eyebrow{color:var(--gold-2)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero__trust{display:flex;flex-wrap:wrap;gap:22px;margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--line)}
.hero__trust .t{display:flex;flex-direction:column;line-height:1.1}
.hero__trust .t b{font-family:var(--display);font-weight:800;font-size:2.1rem;line-height:1;color:var(--gold-2)}
.hero__trust .t span{font-size:.76rem;color:var(--fg-mute);text-transform:uppercase;letter-spacing:.14em;margin-top:.35em}

/* ---- Showcase (big image + big text + CTA, Fantazy-style) ----------------- */
.showcase{position:relative;min-height:clamp(420px,58vh,640px);display:flex;align-items:center;
  overflow:hidden;isolation:isolate;background:var(--ink);color:#fff}
.showcase__bg{position:absolute;inset:0;z-index:-2}
.showcase__bg img{width:100%;height:100%;object-fit:cover}
.showcase__ph{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(135deg,#17181c,#0b0b0d 55%),repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 22px)}
.showcase__ph::after{content:"IMAGE PLACEHOLDER";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);letter-spacing:.3em;font-size:.8rem;color:rgba(255,255,255,.22)}
.showcase::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(6,6,8,.9),rgba(8,8,11,.55) 55%,rgba(8,8,11,.2))}
.showcase--center::after{background:linear-gradient(0deg,rgba(6,6,8,.85),rgba(8,8,11,.35) 60%),radial-gradient(60% 60% at 50% 50%,transparent,rgba(6,6,8,.55))}
.showcase .wrap{padding-block:clamp(56px,7vw,96px)}
.showcase__inner{max-width:44rem}
.showcase--center .showcase__inner{max-width:60rem;margin-inline:auto;text-align:center}
.showcase h2{color:#fff;font-size:clamp(2.2rem,5vw,4.2rem);text-transform:uppercase;line-height:.96;margin-bottom:.35em}
.showcase p{color:var(--fg-soft);font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:52ch;margin-bottom:1.6rem}
.showcase--center p{margin-inline:auto}
.showcase .eyebrow{color:var(--gold-2)}
.showcase__cta{display:flex;flex-wrap:wrap;gap:14px}
.showcase--center .showcase__cta{justify-content:center}

/* ---- Stat strip (dark accent band) ---------------------------------------- */
.strip{background:linear-gradient(180deg,var(--ink),var(--ink-2));color:#fff;border-block:1px solid var(--line)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,60px);justify-content:space-between;padding-block:clamp(28px,4vw,44px)}
.stat b{font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.4vw,3rem);display:block;line-height:1;color:var(--gold-2)}
.stat span{color:var(--fg-mute);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem}

/* ---- Feature split -------------------------------------------------------- */
.split{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
@media(min-width:920px){.split{grid-template-columns:1.05fr 1fr}.split--rev>.split__media{order:2}}
.split__media{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--hair);position:relative;box-shadow:var(--shadow)}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split ul.checks{margin-top:1.4rem;display:grid;gap:.7rem}
.checks li{display:flex;gap:.7em;color:var(--text-soft)}
.section--dark .checks li{color:var(--fg-soft)}
.checks li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:6px;
  background:linear-gradient(150deg,var(--red),var(--gold-deep));
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/70% no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/70% no-repeat}

/* ---- Brand logos strip ---------------------------------------------------- */
.brand-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6vw,20px);align-items:stretch}
@media(max-width:900px){.brand-logos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.brand-logos{grid-template-columns:repeat(2,1fr)}}
.brand-logos img{width:100%;height:78px;object-fit:contain;background:#fff;padding:14px 18px;
  border:1px solid var(--hair);border-radius:12px;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s}
.brand-logos img:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

/* ---- CTA band ------------------------------------------------------------- */
.cta-band{position:relative;overflow:hidden;border-radius:var(--radius-lg);color:#fff;
  background:linear-gradient(120deg,#1a0507,#0c0d10 60%);border:1px solid var(--line-2);
  padding:clamp(32px,5vw,64px);text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(40vw 30vw at 50% -20%,var(--red-glow),transparent 60%)}
.cta-band>*{position:relative}
.cta-band .eyebrow{color:var(--gold-2)}
.cta-band .h2{margin-bottom:.5em}
.cta-band .lead{color:var(--fg-soft)}

/* ---- FAQ (AEO) ------------------------------------------------------------ */
.faq{display:grid;gap:12px;max-width:820px;margin-inline:auto}
.faq details{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;list-style:none;padding:20px 24px;font-family:var(--display);font-weight:600;
  font-size:1.12rem;display:flex;justify-content:space-between;gap:1em;align-items:center;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-size:1.4em;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{color:var(--red)}
.faq .faq__a{padding:0 24px 22px;color:var(--text-mute)}
.section--dark .faq details{background:var(--ink-3);border-color:var(--line)}
.section--dark .faq summary{color:var(--fg)}
.section--dark .faq .faq__a{color:var(--fg-mute)}

/* ---- Breadcrumbs ---------------------------------------------------------- */
.crumbs{font-size:.82rem;color:var(--text-faint);display:flex;gap:.5em;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.08em}
.crumbs a:hover{color:var(--red)}
.crumbs span{color:var(--text-mute)}
.phero .crumbs a:hover{color:var(--gold-2)}

/* ---- Author / E-E-A-T ----------------------------------------------------- */
.author{display:flex;gap:20px;align-items:center;background:var(--paper-2);border:1px solid var(--hair);
  border-radius:var(--radius);padding:22px;max-width:720px}
.author .ava{flex:none;width:70px;height:70px;border-radius:50%;background:linear-gradient(160deg,var(--red),var(--gold-deep));
  display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.6rem;color:#fff}
.author b{color:var(--text)}.author .role{color:var(--red);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em}
.author p{margin:.3em 0 0;color:var(--text-mute);font-size:.95rem}
.section--dark .author{background:var(--ink-3);border-color:var(--line)}
.section--dark .author b{color:#fff}.section--dark .author .role{color:var(--gold-2)}
.section--dark .author p{color:var(--fg-mute)}

/* ---- Interior page hero (LIGHT with dramatic tint) ------------------------ */
.phero{position:relative;padding-block:clamp(72px,10vw,116px) clamp(38px,5vw,54px);overflow:hidden;
  background:linear-gradient(180deg,var(--ink),var(--ink-2));color:#fff;border-bottom:3px solid var(--red)}
.phero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(50vw 40vw at 82% 0%,rgba(224,17,31,.20),transparent 60%),
            radial-gradient(40vw 40vw at 0% 30%,rgba(191,138,44,.12),transparent 60%)}
.phero .wrap{position:relative;z-index:1}
/* image hero variant */
.phero--img{padding-block:clamp(96px,13vw,168px) clamp(42px,6vw,70px);min-height:clamp(340px,40vw,520px);
  display:flex;align-items:flex-end}
.phero__bg{position:absolute;inset:0;z-index:0}
.phero__bg img{width:100%;height:100%;object-fit:cover}
.phero--img::before{z-index:1;background:
  linear-gradient(90deg,rgba(8,9,12,.9) 0%,rgba(8,9,12,.66) 42%,rgba(8,9,12,.25) 100%),
  linear-gradient(0deg,rgba(8,9,12,.9),rgba(8,9,12,.15) 55%),
  radial-gradient(50vw 40vw at 88% 6%,rgba(224,17,31,.28),transparent 62%)}
.phero--img .wrap{z-index:2;width:100%}
.phero h1{color:#fff}
.phero .lead{color:var(--fg-soft)}
.phero .eyebrow{color:var(--gold-2)}
.phero .crumbs{margin-bottom:1.2rem;color:var(--fg-mute)}
.phero .crumbs span{color:var(--fg-soft)}
.phero h1.chrome{background:var(--chrome-silver);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- Prose (blog / long copy) --------------------------------------------- */
.prose{max-width:min(760px,100%);color:var(--text-soft);font-size:1.08rem}
.prose h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin:1.8em 0 .5em;text-transform:none;color:var(--text)}
.prose h3{font-size:1.3rem;margin:1.4em 0 .4em;text-transform:none;color:var(--text)}
.prose a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.prose img{border-radius:var(--radius);margin:1.5em 0}
.prose ul{list-style:disc;padding-left:1.3em;margin:0 0 1.2em}
.prose ul li{margin:.3em 0}
.prose blockquote{border-left:3px solid var(--red);padding-left:1.2em;margin:1.4em 0;color:var(--text);font-style:italic}

/* ---- Blog index ----------------------------------------------------------- */
.blog-filters{display:flex;flex-wrap:wrap;gap:10px}
.blog-filters .chip{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  font-size:.85rem;color:var(--text-soft);background:var(--surface);border:1px solid var(--hair-2);
  border-radius:999px;padding:.55em 1.1em;cursor:pointer;transition:all .2s var(--ease)}
.blog-filters .chip:hover{border-color:var(--red);color:var(--red)}
.blog-filters .chip.is-active{background:linear-gradient(180deg,var(--red),var(--red-600));border-color:transparent;color:#fff}
.post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);color:inherit;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--hair-2)}
.post-card.is-hidden{display:none}
.post-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.post-card:hover .post-card__media img{transform:scale(1.05)}
.post-card__ph{position:absolute;inset:0;background:linear-gradient(135deg,#17181c,#0b0b0d)}
.post-card__cat{position:absolute;top:12px;left:12px;background:rgba(9,9,12,.82);color:#fff;
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;
  padding:.4em .8em;border-radius:999px;backdrop-filter:blur(4px)}
.post-card__body{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;gap:.5em;flex:1}
.post-card__title{font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.12;color:var(--text)}
.post-card:hover .post-card__title{color:var(--red)}
.post-card__ex{color:var(--text-mute);font-size:.95rem;margin:0;flex:1}
.post-card__meta{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  font-size:.78rem;color:var(--gold);margin-top:.4em}

/* ---- Process steps -------------------------------------------------------- */
.steps-list{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;gap:clamp(14px,2vw,22px)}
@media(min-width:760px){.steps-list{grid-template-columns:repeat(2,1fr)}}
.step{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--radius);padding:clamp(18px,2vw,26px);box-shadow:var(--shadow-sm)}
.section--dark .step{background:var(--ink-3);border-color:var(--line)}
.step__n{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:1.15rem;color:#fff;
  background:linear-gradient(180deg,var(--red),var(--red-600));box-shadow:var(--shadow-red)}
.step__t{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:1.05rem;margin:.1em 0 .3em}
.section--dark .step__t{color:var(--fg)}
.step p{margin:0;color:var(--text-mute);font-size:.96rem}
.section--dark .step p{color:var(--fg-mute)}

/* ---- Related services (internal links) ----------------------------------- */
.rel-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:620px){.rel-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.rel-grid{grid-template-columns:repeat(3,1fr)}}
.rel-card{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--radius);
  background:#fff;border:1px solid var(--hair-2);box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.rel-card:hover{transform:translateY(-3px);border-color:var(--red);box-shadow:var(--shadow)}
.rel-card__ic{flex:none;width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);color:var(--red)}
.rel-card__ic svg{width:20px;height:20px}
.rel-card__t{flex:1;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:.98rem;color:var(--text);line-height:1.05}
.rel-card__a{color:var(--text-faint);display:flex}.rel-card__a svg{width:16px;height:16px}
.rel-card:hover .rel-card__a{color:var(--red)}
.prose h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.15rem,1.8vw,1.4rem);margin:1.6em 0 .5em;color:var(--text)}
.section--dark .prose h3{color:var(--fg)}
.prose ul{list-style:disc;padding-left:1.2em;margin:0 0 1em;color:var(--text-soft)}
.prose ul li{margin:.3em 0}

/* form fields */
.ts-form input,.ts-form textarea{width:100%;padding:.85em 1em;border-radius:var(--radius-sm);
  border:1px solid var(--hair-2);background:#fff;color:var(--text);font:inherit;font-size:1rem}
.ts-form input:focus,.ts-form textarea:focus{outline:2px solid var(--red);border-color:var(--red)}
.ts-form textarea{resize:vertical}
.ts-form{display:grid;gap:14px}
.ts-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ts-form button[type=submit][disabled]{opacity:.6;cursor:progress;transform:none}
.ts-form__status{margin:0;font-size:.94rem;line-height:1.4;min-height:1.2em;font-weight:500}
.ts-form__status.is-ok{color:#1a7f37}
.ts-form__status.is-err{color:var(--red)}

/* ---- Scroll reveal (gated on html.ts-js) ---------------------------------- */
.ts-js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ts-js .reveal.in{opacity:1;transform:none}
.ts-js .reveal[data-d="1"]{transition-delay:.08s}
.ts-js .reveal[data-d="2"]{transition-delay:.16s}
.ts-js .reveal[data-d="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .ts-js .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   CHROME — header, nav, mega-menu, footer  (stays DARK)
   ========================================================================== */
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--red);color:#fff;padding:.7em 1.2em;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* thin utility bar above the header */
.topbar{background:#08080a;color:var(--fg-mute);font-size:.82rem;position:relative;z-index:101}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:40px;flex-wrap:wrap}
.topbar__l,.topbar__r{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap}
.topbar a{color:var(--fg-soft)}.topbar a:hover{color:var(--gold-2)}
.topbar .tb-loc{display:inline-flex;align-items:center;gap:7px}
.topbar .dot{width:5px;height:5px;border-radius:50%;background:var(--red);flex:none}
.topbar strong{color:var(--fg);font-weight:600}
.topbar .slogan{font-family:var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);font-size:.74rem}
@media(max-width:820px){.topbar{display:none}}
.nav-mobile-only{display:none}
@media(max-width:1023px){.nav-mobile-only{display:block}}

.site-header{position:sticky;top:0;z-index:100;background:linear-gradient(180deg,rgba(10,10,13,.95),rgba(9,9,12,.9));
  backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
  transition:background .3s,box-shadow .3s}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--red) 0%,var(--gold) 42%,transparent 78%)}
.site-header.is-scrolled{background:rgba(8,8,11,.98);box-shadow:0 12px 34px -20px rgba(0,0,0,.95)}
.site-header__bar{display:flex;align-items:center;gap:clamp(12px,2vw,30px);min-height:78px;padding-block:10px}
.brand{flex:none;display:flex;align-items:center}
.brand img{height:62px;width:auto;transition:height .3s}
.is-scrolled .brand img{height:52px}
.site-nav{margin-inline:auto}
.nav-list{display:flex;align-items:center;gap:clamp(2px,.9vw,8px)}
.nav-list>li>a{display:inline-flex;align-items:center;gap:.35em;padding:.62em .68em;border-radius:8px;white-space:nowrap;
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.045em;font-size:.92rem;
  color:var(--fg-soft);transition:color .2s,background .2s}
.nav-list>li>a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-list>li>a svg{transition:transform .3s;opacity:.7}

.has-sub{position:static}
.mega{position:absolute;left:0;right:0;top:100%;margin-top:1px;
  background:linear-gradient(180deg,var(--ink-2),var(--ink));border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.85);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;z-index:90}
.has-sub:hover .mega,.has-sub:focus-within .mega{opacity:1;visibility:visible;transform:none}
.has-sub:hover>a svg{transform:rotate(180deg)}
.mega__inner{max-width:var(--wrap-wide);margin-inline:auto;padding:36px var(--gutter);display:grid;grid-template-columns:1fr 300px;gap:38px;align-items:start}
.mega__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 30px}
.mega__cat{display:flex;align-items:center;gap:.55em;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-2);font-size:1rem;padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.mega__cat:hover{color:#fff}
.mega__cat-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;flex:none;background:radial-gradient(120% 120% at 30% 20%,rgba(224,17,31,.25),rgba(226,182,87,.12));border:1px solid var(--line-2)}
.mega__cat-ic svg{width:17px;height:17px}
.mega__col ul{display:grid;gap:1px}
.mega__col li a{display:block;padding:.4em 0;color:var(--fg-mute);font-size:.9rem;transition:color .2s,padding .2s}
.mega__col li a:hover{color:#fff;padding-left:.35em}
.mega__promo{position:relative;overflow:hidden;border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column;gap:8px;color:var(--fg);min-height:100%;background:linear-gradient(150deg,#230609,#0c0d10 62%);border:1px solid var(--line-2)}
.mega__promo::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 80% 0%,var(--red-glow),transparent 60%)}
.mega__promo>*{position:relative}
.mega__promo-logo{width:150px;height:auto;margin-bottom:6px;opacity:.96}
.mega__promo-tag{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:var(--gold-2)}
.mega__promo-title{font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.1;color:#fff}
.mega__promo-copy{color:var(--fg-mute);font-size:.88rem}
.mega__promo-cta{margin-top:auto;display:inline-flex;align-items:center;gap:.5em;color:var(--gold-2);font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;transition:gap .2s}
.mega__promo:hover .mega__promo-cta{gap:.85em}
.mega__promo:hover{border-color:var(--gold-2)}
.mega__foot{border-top:1px solid var(--line);background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:var(--wrap-wide);margin-inline:auto;padding:16px var(--gutter)}
.mega__foot-txt{color:var(--fg-soft);font-size:.95rem}
.mega__foot-cta{display:flex;align-items:center;gap:20px}
.mega__phone{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:700;color:#fff;letter-spacing:.03em}
.mega__phone svg{color:var(--gold-2)}
.mega__phone:hover{color:var(--gold-2)}

/* compact dropdown (Builds) */
.has-drop{position:relative}
.has-drop .drop{left:auto;right:auto;top:100%;width:max-content;min-width:230px}
.has-drop .drop.mega{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.drop__list{padding:8px}
.drop__list li a{display:block;padding:.6em .9em;border-radius:8px;color:var(--fg-soft);font-size:.95rem;transition:background .2s,color .2s}
.drop__list li a:hover{background:rgba(255,255,255,.06);color:var(--gold-2)}
@media(max-width:1023px){.has-drop .drop{position:static;width:auto;min-width:0;border:0;border-radius:0}.drop__list li a{padding:.55em 0 .55em 12px;border-left:1px solid var(--line);border-radius:0}}

.site-header__cta{display:flex;align-items:center;gap:14px;flex:none;margin-left:auto}
.hdr-phone{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:700;color:var(--fg);letter-spacing:.04em;white-space:nowrap}
.hdr-phone svg{color:var(--gold-2)}
.hdr-phone:hover{color:var(--gold-2)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:10px;margin-left:auto}
.nav-toggle span{width:26px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
.nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:95}
body.nav-open .nav-scrim{opacity:1;visibility:visible}

@media(max-width:1023px){
  .nav-toggle{display:flex}
  .site-header__cta .btn{display:none}
  .site-header__cta{margin-left:0}
  .hdr-phone span{display:none}
  .site-nav{position:fixed;top:0;right:0;height:100dvh;width:min(400px,86vw);z-index:99;
    background:linear-gradient(180deg,var(--ink-2),var(--ink));border-left:1px solid var(--line);
    margin:0;padding:88px 26px 40px;overflow-y:auto;transform:translateX(100%);transition:transform .35s var(--ease)}
  body.nav-open .site-nav{transform:none}
  body.nav-open{overflow:hidden}
  .nav-list{flex-direction:column;align-items:stretch;gap:2px}
  .nav-list>li>a{font-size:1.15rem;padding:.7em .2em;justify-content:space-between}
  .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;max-height:0;overflow:hidden;transition:max-height .4s var(--ease);margin:0}
  .has-sub.open .mega{max-height:2200px}
  .has-sub.open>a svg{transform:rotate(180deg)}
  .mega__inner{display:block;padding:6px 0 10px}
  .mega__cols{grid-template-columns:1fr;gap:14px}
  .mega__cat{font-size:.92rem}
  .mega__col li a{padding:.5em 0 .5em 12px;border-left:1px solid var(--line)}
  .mega__promo{margin-top:16px;min-height:0}
  .mega__foot{flex-direction:column;align-items:stretch;padding:16px 0}
  .mega__foot-cta{flex-direction:column;align-items:stretch;gap:12px}
  .nav-toggle{position:relative;z-index:100}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---- Footer (DARK) -------------------------------------------------------- */
.pre-foot{padding-block:clamp(40px,6vw,80px) clamp(40px,6vw,80px);background:var(--paper-2)}
.site-footer{background:linear-gradient(180deg,#0b0b0d,#050506);color:var(--fg);border-top:1px solid var(--line);padding-block:clamp(48px,6vw,80px) 28px}
.site-footer__top{display:grid;gap:clamp(28px,4vw,50px);grid-template-columns:1.6fr 1fr 1fr 1.3fr}
@media(max-width:900px){.site-footer__top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.site-footer__top{grid-template-columns:1fr}}
.site-footer__brand img{height:82px;width:auto;margin-bottom:18px}
.site-footer__brand p{color:var(--fg-mute);max-width:38ch;font-size:.95rem}
.foot-col h3{font-size:1.05rem;color:#fff;margin-bottom:16px;text-transform:uppercase;letter-spacing:.08em}
.foot-col ul{display:grid;gap:9px}
.foot-col a{color:var(--fg-mute);font-size:.95rem}
.foot-col a:hover{color:var(--gold-2)}
.foot-col address{font-style:normal;display:grid;gap:14px;color:var(--fg-mute);font-size:.94rem}
.foot-phone{font-family:var(--display);font-weight:700;font-size:1.4rem;color:var(--gold-2)}
.foot-phone:hover{color:#fff}
.foot-loc b{color:var(--fg-soft)}
.foot-hours{margin-top:18px;display:grid;gap:5px;color:var(--fg-mute);font-size:.9rem}
.foot-hours b{color:var(--fg-soft);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;margin-bottom:4px}
.site-footer__bottom{margin-top:clamp(32px,4vw,52px);padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;color:var(--fg-faint);font-size:.85rem}
.foot-legal{display:flex;gap:20px}
.foot-legal a:hover,.foot-credit a{color:var(--gold-2)}
.foot-credit a:hover{color:#fff}

/* ---- Tint visualizer ("Design Your Tint") -------------------------------- */
.tint-viz{display:grid;gap:clamp(22px,3vw,40px);margin-top:clamp(30px,4vw,50px);
  grid-template-columns:1fr;align-items:stretch}
@media(min-width:940px){.tint-viz{grid-template-columns:1.15fr .85fr}}
.tv-stage{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow);background:#0b0b0d;min-height:clamp(280px,42vw,460px)}
.tv-glass{position:absolute;inset:0}
.tv-glass .tv-photo,.tv-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* CSS Florida scene (fallback when no photo supplied) */
.tv-scene{background:linear-gradient(180deg,#8fd0f0 0%,#bfe6f5 42%,#f4ead0 66%,#e7d8b6 100%)}
.tv-sun{position:absolute;top:16%;right:22%;width:clamp(70px,12vw,120px);height:clamp(70px,12vw,120px);
  border-radius:50%;background:radial-gradient(circle,#fff 0%,#ffe89a 45%,rgba(255,224,120,0) 72%);
  filter:blur(.5px)}
.tv-palm{position:absolute;bottom:26%;width:8px;background:linear-gradient(180deg,#3c2f1e,#20180e);border-radius:6px}
.tv-palm::before{content:"";position:absolute;top:-6px;left:50%;width:120px;height:60px;transform:translateX(-50%);
  background:radial-gradient(60px 26px at 50% 100%,#1f5b32 0%,#123c20 60%,transparent 62%);
  -webkit-mask:radial-gradient(60px 26px at 50% 100%,#000 60%,transparent 62%)}
.tv-palm--1{left:14%;height:34%}.tv-palm--1::before{width:150px;height:70px}
.tv-palm--2{left:26%;height:24%;bottom:24%}.tv-palm--2::before{width:110px;height:52px;opacity:.85}
.tv-road{position:absolute;left:0;right:0;bottom:0;height:26%;
  background:linear-gradient(180deg,#3a3d44 0%,#26282e 100%)}
.tv-road::before{content:"";position:absolute;top:46%;left:0;right:0;height:5px;
  background:repeating-linear-gradient(90deg,#e8c94a 0 34px,transparent 34px 64px)}
/* the film — opacity driven by --tv-op set by JS */
.tv-film{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,12,.96),rgba(10,13,20,.9));
  opacity:var(--tv-op,.62);transition:opacity .35s var(--ease)}
.tv-badge{position:absolute;top:14px;left:14px;z-index:2;display:flex;align-items:baseline;gap:4px;
  padding:8px 14px;border-radius:999px;background:rgba(11,11,13,.72);backdrop-filter:blur(6px);
  border:1px solid var(--line-2);color:#fff;font-family:var(--display);letter-spacing:.04em}
.tv-badge b{font-size:1.5rem;font-weight:800;color:var(--gold-2);line-height:1}
.tv-badge span{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-soft)}
.tv-shade{position:absolute;bottom:14px;right:16px;z-index:2;padding:6px 13px;border-radius:999px;
  background:rgba(224,17,31,.92);color:#fff;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;box-shadow:var(--shadow-red)}
/* control panel */
.tv-panel{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius-lg);
  padding:clamp(20px,2.4vw,30px);box-shadow:var(--shadow-sm)}
.section--dark .tv-panel{background:var(--ink-3);border-color:var(--line)}
.tv-presets{display:flex;flex-wrap:wrap;gap:8px}
.tv-preset{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  font-size:.82rem;padding:.5em .85em;border-radius:999px;cursor:pointer;
  border:1px solid var(--hair-2);background:#fff;color:var(--text-soft);transition:all .18s var(--ease)}
.section--dark .tv-preset{background:rgba(255,255,255,.05);border-color:var(--line-2);color:var(--fg-soft)}
.tv-preset:hover{border-color:var(--red);color:var(--red)}
.tv-preset.is-active{background:linear-gradient(180deg,var(--red),var(--red-600));border-color:transparent;color:#fff;box-shadow:var(--shadow-red)}
.tv-slider{display:block}
.tv-slider__ends{display:flex;justify-content:space-between;font-size:.78rem;color:var(--text-mute);
  font-weight:600;margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em}
.section--dark .tv-slider__ends{color:var(--fg-mute)}
.tv-slider input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:8px;border-radius:99px;
  background:linear-gradient(90deg,var(--ink) 0%,var(--paper-3) 100%);outline:none;cursor:pointer}
.tv-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;
  border-radius:50%;background:linear-gradient(180deg,#fff,#d7dbe2);border:2px solid var(--red);
  box-shadow:var(--shadow-red);cursor:grab}
.tv-slider input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#d7dbe2);border:2px solid var(--red);box-shadow:var(--shadow-red);cursor:grab}
.tv-meters{display:grid;gap:14px}
.tv-meter{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 10px}
.tv-meter__k{font-size:.82rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.section--dark .tv-meter__k{color:var(--fg-mute)}
.tv-meter__v{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--text);text-align:right}
.section--dark .tv-meter__v{color:var(--fg)}
.tv-meter__v b{font-size:1.3rem}
.tv-bar{grid-column:1/-1;height:6px;border-radius:99px;background:var(--paper-3);overflow:hidden}
.section--dark .tv-bar{background:var(--ink-4)}
.tv-bar i{display:block;height:100%;border-radius:99px;width:60%;
  background:linear-gradient(90deg,var(--gold),var(--red));transition:width .35s var(--ease)}
.tv-note{font-size:.8rem;color:var(--text-faint);margin:0}
.section--dark .tv-note{color:var(--fg-faint)}
.tv-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto}

/* ---- 3D tint visualizer (three.js stage) --------------------------------- */
.tv3d-stage{background:radial-gradient(120% 120% at 50% 18%,#20242b 0%,#0b0b0d 70%)}
.tv3d-canvas{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)}
.tv3d-canvas canvas{display:block;width:100%!important;height:100%!important;touch-action:none;cursor:grab}
.tv3d-canvas canvas:active{cursor:grabbing}
.tint-viz--3d.is-3d-ready .tv3d-canvas{opacity:1}
.tint-viz--3d.is-3d-ready .tv3d-fallback,
.tint-viz--3d.is-3d-ready .tv3d-loading{opacity:0;pointer-events:none}
/* loading overlay */
.tv3d-loading{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;gap:14px;
  align-items:center;justify-content:center;color:var(--fg-soft);font-family:var(--display);
  text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;transition:opacity .4s var(--ease)}
.tv3d-spinner{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.16);
  border-top-color:var(--red);animation:tv3d-spin .8s linear infinite}
@keyframes tv3d-spin{to{transform:rotate(360deg)}}
/* drag hint */
.tv3d-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  background:rgba(11,11,13,.66);backdrop-filter:blur(6px);border:1px solid var(--line-2);
  color:var(--fg-soft);font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.72rem;transition:opacity .4s var(--ease)}
.tv3d-hint svg{width:1em;height:1em;transform:rotate(180deg)}
.tint-viz--3d.is-dragged .tv3d-hint{opacity:0}
@media(prefers-reduced-motion:reduce){.tv3d-spinner{animation-duration:2s}}
.tv-credit{text-align:center;font-size:.7rem;line-height:1.5;color:var(--text-faint);margin:16px 0 0;opacity:.8}
.tv-credit a{text-decoration:underline;color:inherit}
.section--dark .tv-credit{color:var(--fg-faint)}

/* ---- Tint reveal (before/after wipe on a real photo) --------------------- */
.tint-reveal{margin-top:clamp(30px,4vw,50px);max-width:1000px;margin-inline:auto}
.tvr{position:relative;container-type:inline-size;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow);aspect-ratio:16/10;background:#0b0b0d;user-select:none;touch-action:pan-y}
.tvr__img{position:absolute;inset:0;width:100cqw;height:100%;object-fit:cover;display:block}
.tvr__tinted{position:absolute;top:0;left:0;height:100%;width:var(--rev,52%);overflow:hidden}
.tvr__img--tint{filter:brightness(.4) contrast(1.08) saturate(.82)}
.tvr__tinted::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(24,34,54,.55),rgba(6,8,12,.22) 42%,rgba(70,92,124,.16));
  mix-blend-mode:screen}
.tvr__divider{position:absolute;top:0;bottom:0;left:var(--rev,52%);width:2px;
  background:#fff;transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.28)}
.tvr__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;
  border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;
  gap:1px;box-shadow:var(--shadow-sm)}
.tvr__grip svg{width:13px;height:13px}
.tvr__grip svg:first-child{transform:rotate(180deg)}
.tvr__tag{position:absolute;top:14px;z-index:3;display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:999px;font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;font-size:.74rem;backdrop-filter:blur(6px)}
.tvr__tag svg{width:1em;height:1em}
.tvr__tag--l{left:14px;background:rgba(224,17,31,.94);color:#fff}
.tvr__tag--r{right:14px;background:rgba(255,255,255,.86);color:var(--ink)}
.tvr__range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;
  cursor:ew-resize;z-index:4;-webkit-appearance:none;appearance:none;background:transparent}
.tvr__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:46px;height:100%;cursor:ew-resize}
.tvr__range::-moz-range-thumb{width:46px;height:100%;border:0;background:transparent;cursor:ew-resize}
.tvr__cap{text-align:center;font-size:.86rem;color:var(--text-mute);margin:16px 0 0}
.section--dark .tvr__cap{color:var(--fg-mute)}

/* ---- Our Work gallery ---------------------------------------------------- */
.gal-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:clamp(28px,4vw,44px)}
.gal-chip{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  font-size:.86rem;padding:.55em 1.1em;border-radius:999px;cursor:pointer;border:1px solid var(--hair-2);
  background:#fff;color:var(--text-soft);transition:all .18s var(--ease)}
.gal-chip:hover{border-color:var(--red);color:var(--red)}
.gal-chip.is-active{background:linear-gradient(180deg,var(--red),var(--red-600));border-color:transparent;color:#fff;box-shadow:var(--shadow-red)}
.gallery{columns:3;column-gap:clamp(12px,1.6vw,20px)}
@media(max-width:900px){.gallery{columns:2}}
@media(max-width:560px){.gallery{columns:1}}
.gal-item{display:block;width:100%;margin:0 0 clamp(12px,1.6vw,20px);padding:0;border:0;background:none;
  break-inside:avoid;position:relative;border-radius:var(--radius);overflow:hidden;cursor:zoom-in;
  box-shadow:var(--shadow-sm)}
.gal-item.is-hidden{display:none}
.gal-item img{width:100%;display:block;transition:transform .5s var(--ease)}
.gal-item:hover img{transform:scale(1.05)}
.gal-item__meta{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:2px;
  padding:26px 14px 12px;text-align:left;color:#fff;
  background:linear-gradient(0deg,rgba(6,8,12,.86),transparent);
  opacity:0;transform:translateY(8px);transition:all .28s var(--ease)}
.gal-item:hover .gal-item__meta,.gal-item:focus-visible .gal-item__meta{opacity:1;transform:none}
.gal-item__cat{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--gold-2)}
.gal-item__title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1rem;line-height:1.05}
/* lightbox */
.gal-lightbox{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:rgba(6,7,10,.92);backdrop-filter:blur(6px);padding:clamp(16px,4vw,60px)}
.gal-lightbox[hidden]{display:none}
.gal-lightbox__img{max-width:100%;max-height:82vh;border-radius:var(--radius);box-shadow:var(--shadow)}
.gal-lightbox__cap{position:absolute;bottom:max(18px,3vh);left:0;right:0;text-align:center;color:#fff;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:1rem}
.gal-lightbox__close,.gal-lightbox__nav{position:absolute;background:rgba(255,255,255,.1);border:1px solid var(--line-2);
  color:#fff;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:background .18s}
.gal-lightbox__close:hover,.gal-lightbox__nav:hover{background:var(--red);border-color:var(--red)}
.gal-lightbox__close{top:max(16px,3vh);right:max(16px,3vw);width:46px;height:46px;font-size:1.6rem;line-height:1}
.gal-lightbox__nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2rem;line-height:1}
.gal-lightbox__prev{left:max(10px,2vw)}.gal-lightbox__next{right:max(10px,2vw)}
@media(max-width:560px){.gal-lightbox__nav{width:42px;height:42px;font-size:1.5rem}}

.hero .text-gold,.phero .text-gold{color:var(--gold-2)}

/* ==========================================================================
   ELEVATION PASS v2 (2026-08-18) — icons dropped · motion added · CTA unboxed
   Appended overrides win by source order. Every page loads this file, so these
   apply site-wide with no per-page rebuild. Motion gated on .ts-js and fully
   disabled under prefers-reduced-motion.
   ========================================================================== */

/* ---- 1. DROP ALL DECORATIVE ICONS ---------------------------------------- */
/* Removed: card feature icons, rel-card leading chips, tint-reveal tag glyph,
   button glyphs (phone/arrow), mega-menu category icons, header phone glyph.
   Kept (functional): nav caret, visualizer grips, gallery + FAQ controls. */
.card__icon,
.rel-card__ic,
.mega__cat-ic,
.tvr__tag svg,
.btn svg,
.hdr-phone svg,
.mega__phone svg,
a.card .more svg,
.rel-card__a svg{display:none !important}

.card__icon{margin:0}
.rel-card{gap:8px}
.btn{gap:0}
.btn--lg{letter-spacing:.07em}

/* directional affordance without icons: animated CSS arrow */
a.card .more::after{content:"\2192";margin-left:.5em;display:inline-block;
  transition:transform .28s var(--ease)}
a.card:hover .more::after{transform:translateX(6px)}
.rel-card__a::before{content:"\2192";font-family:var(--body);font-weight:600;
  color:var(--text-faint);transition:transform .28s var(--ease),color .28s}
.rel-card:hover .rel-card__a::before{transform:translateX(5px);color:var(--red)}

/* ---- 2. MOTION & MOVEMENT ------------------------------------------------- */
/* a. richer scroll-reveal + per-item stagger (JS sets --i inside grids) */
.ts-js .reveal{transition-duration:.8s}
.ts-js .reveal[style*="--i"]{transition-delay:calc(var(--i) * .07s)}

/* b. card lift + light sheen sweep on hover */
.card{transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.card::after{content:"";position:absolute;top:0;left:-45%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none;z-index:2}
.section--dark .card::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent)}
.ts-js .card:hover::after{animation:ts-sheen .8s var(--ease)}
@keyframes ts-sheen{0%{left:-45%;opacity:0}12%{opacity:1}100%{left:130%;opacity:0}}

/* c. eyebrow accent line grows in as its block reveals */
.eyebrow::before{transition:width .6s var(--ease) .12s}
.ts-js .reveal .eyebrow::before{width:0}
.ts-js .reveal.in .eyebrow::before{width:26px}

/* d. slow ken-burns drift on hero / showcase imagery */
@keyframes ts-kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.ts-js .hero__bg img,
.ts-js .showcase__bg img{animation:ts-kenburns 18s var(--ease) alternate infinite}

/* e. button press feedback + sharper red hover shadow */
.btn--red:hover{box-shadow:0 22px 46px -16px var(--red-glow)}
.btn:active{transform:translateY(0)}

/* f. footer link underline sweep */
.site-footer a:not(.foot-phone):not(.foot-credit a){
  background-image:linear-gradient(var(--gold-2),var(--gold-2));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .3s var(--ease)}
.site-footer a:not(.foot-phone):hover{background-size:100% 1px}

/* ---- 3. FULL-IMAGE, UNBOXED CTA BAND -------------------------------------- */
/* Breaks out of .wrap to the full viewport, drops the rounded box, lays a
   cinematic photo behind a dark scrim. Applies to every cta_band() site-wide. */
.section:has(> .wrap > .cta-band){padding-block:0}
.cta-band{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  border-radius:0;border:0;isolation:isolate;
  padding-block:clamp(76px,11vw,152px)}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(0deg,rgba(6,6,8,.90),rgba(8,8,11,.60) 52%,rgba(6,6,8,.82)),
    url("https://tintstation.unifiedmktg.com/wp-content/uploads/2026/08/Tintstation-hero-2.jpg") center/cover no-repeat}
.cta-band::before{z-index:-1}
.ts-js .cta-band::after{animation:ts-kenburns 24s var(--ease) alternate infinite;
  transform-origin:center}
.cta-band .lead{max-width:58ch;margin-inline:auto}

/* ---- reduced-motion: kill all the added motion --------------------------- */
@media(prefers-reduced-motion:reduce){
  .ts-js .hero__bg img,
  .ts-js .showcase__bg img,
  .ts-js .cta-band::after,
  .ts-js .card:hover::after{animation:none}
  a.card:hover .more::after,
  .rel-card:hover .rel-card__a::before{transform:none}
}