/* Car Teks site styles. Written for this rebuild (no Duda code).
   Look: near-black panels, heavy wide uppercase headings, slanted buttons. */

:root {
  --bg: #0b0404;
  --bg-2: #141010;
  --panel: rgba(11, 4, 4, 0.88);
  --text: #e7e7e7;
  --text-dim: #bdbdbd;
  --white: #ffffff;
  --light: #e7e7e7;
  --ink: #0b0404;
  --line: rgba(255, 255, 255, 0.9);
  --heading: "Archivo", "Arial Black", Impact, sans-serif;
  --body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --skew: -15deg;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 300 14px/2 var(--body);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--light); color: var(--ink); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* ---------- headings ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading);
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.45em;
  line-height: 1.12;
}
h1 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 900; letter-spacing: -0.05em; }
h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 900; letter-spacing: -0.05em; }
h3 { font-size: 16px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.5; }
h4 { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.5; }
h5, h6 { font-size: 13px; font-weight: 800; letter-spacing: 0; line-height: 1.6; }
h1 a, h2 a { text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: #9a9a9a; }

/* small label box above headings ("Car Teks", "Expert Installations") */
.eyebrow {
  display: inline-block;
  background: var(--light);
  color: var(--ink);
  font: 400 12px/24px var(--body);
  letter-spacing: 2.4px;
  text-transform: uppercase;
  padding: 2px 20px;
  margin: 0 0 18px;
}
.center .eyebrow { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 18px 22px; margin-top: 26px; align-items: center; }
.center .btns { justify-content: center; }
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  min-height: 52px;
  padding: 0 26px;
  font: 800 13px/1.2 var(--heading);
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--light);
  border: 1px solid var(--light);
  transform: skewX(var(--skew));
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn > span { display: inline-block; transform: skewX(calc(var(--skew) * -1)); }
.btn::after {           /* offset outline behind the button */
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  transform: translate(6px, 6px);
  z-index: -1;
  pointer-events: none;
}
.btn.dark { background: var(--bg); color: var(--white); border-color: var(--white); }
.btn:hover, .btn:focus-visible { background: var(--white); color: var(--ink); }
.btn.dark:hover, .btn.dark:focus-visible { background: var(--light); color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.site-header .bar { display: flex; align-items: center; gap: 24px; min-height: 96px; max-width: 1440px; margin: 0 auto; padding: 10px var(--gutter); }
.site-header .logo img { width: clamp(150px, 15vw, 200px); }
.nav { flex: 1; display: flex; justify-content: center; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.nav > ul > li { position: relative; display: flex; align-items: center; }
.nav > ul > li + li::before { content: "|"; color: var(--white); padding: 0 8px; font-size: 13px; }
.nav a, .nav button {
  font: 800 11.5px/2 var(--heading);
  font-stretch: 118%;
  font-variation-settings: "wdth" 118;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
}
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.nav .more-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 18px;
  flex-direction: column;
}
.nav .more:hover .more-menu, .nav .more:focus-within .more-menu, .nav .more.open .more-menu { display: flex; }
.nav .more-menu li::before { content: none !important; }
.site-header .cta { flex: none; }
.menu-toggle { display: none; margin-left: auto; width: 46px; height: 42px; background: var(--light); border: 0; cursor: pointer; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 24px; height: 2px; background: var(--ink); margin: 0 auto; position: relative; content: ""; }
.menu-toggle span::before { position: absolute; top: -7px; }
.menu-toggle span::after { position: absolute; top: 7px; }

@media (max-width: 1100px) {
  .nav, .site-header .cta .btn { display: none; }
  .menu-toggle { display: block; }
  .site-header .cta { margin-left: auto; }
  body.menu-open .nav {
    display: block;
    position: fixed;
    inset: 96px 0 0 0;
    background: #000;
    padding: 24px var(--gutter);
    overflow-y: auto;
  }
  body.menu-open .nav ul { flex-direction: column; align-items: flex-start; }
  body.menu-open .nav > ul > li + li::before { content: none; }
  body.menu-open .nav a, body.menu-open .nav button { font-size: 16px; padding: 10px 0; }
  body.menu-open .nav .more > button { display: none; }
  body.menu-open .nav .more-menu { display: flex; position: static; transform: none; border: 0; padding: 0; background: none; min-width: 0; }
  body.menu-open .nav .more-menu a { font-size: 16px; padding: 10px 0; }
}

/* ---------- sections ---------- */
.sec { position: relative; padding: clamp(56px, 8vw, 100px) 0; background: var(--bg); }
.sec.has-bg { background-size: cover; background-position: center; }
.sec.has-bg::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.sec > .wrap { position: relative; }
.center { text-align: center; }
.center p { max-width: 980px; margin-left: auto; margin-right: auto; }
.cols { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.cols.c2 { grid-template-columns: 1fr 1fr; }
.cols.c5-7 { grid-template-columns: 5fr 7fr; }
.cols.c7-5 { grid-template-columns: 7fr 5fr; }
@media (max-width: 860px) {
  .cols.c2, .cols.c5-7, .cols.c7-5 { grid-template-columns: 1fr; }
  .cols.reverse-mobile > :first-child { order: 2; }
}
.logo-mark { width: 170px; margin: 0 auto 10px; }

/* hero */
.hero { padding: clamp(40px, 6vw, 90px) 0 clamp(60px, 7vw, 110px); min-height: min(88vh, 860px); display: flex; align-items: center; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(17, 17, 17, 0.33), rgba(17, 17, 17, 0) 77%),
    linear-gradient(to right, rgba(17, 17, 17, 0.92) 0%, rgba(17, 17, 17, 0.55) 60%, rgba(17, 17, 17, 0.75) 100%);
  z-index: 1;
}
.hero .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero > .wrap { z-index: 2; width: 100%; max-width: 1440px; }
.hero .media img, .hero .media video { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.hero .lead { border-left: 2px solid var(--light); padding-left: 14px; color: var(--text); }
.hero h1 a { color: var(--white); }
.scroll-cue { position: absolute; z-index: 2; right: clamp(16px, 6vw, 90px); bottom: 24px; width: 52px; height: 52px; border: 2px solid var(--white); border-radius: 50%; display: grid; place-items: center; color: var(--white); text-decoration: none; font-size: 22px; }

/* service cards */
.cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.cards a.card { position: relative; display: block; text-decoration: none; overflow: hidden; aspect-ratio: 3 / 4; }
.cards a.card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; filter: brightness(0.8); }
.cards a.card:hover img { transform: scale(1.05); filter: brightness(1); }
.cards .card-label { position: absolute; left: 12px; right: 12px; top: 14px; background: var(--light); color: var(--ink); padding: 10px 12px; font: 800 13px/1.3 var(--heading); font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; letter-spacing: -0.02em; text-align: center; margin: 0; }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }

/* split: heading on the left, text on the right */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 70px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* panel over a background photo */
.panel { background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.12); padding: clamp(26px, 4vw, 48px); max-width: 720px; }
.panel.right { margin-left: auto; }
.panel ul { padding-left: 1.2em; }
.panel li { margin-bottom: 0.6em; }
.panel li strong { color: var(--white); font-weight: 600; }

/* photo strip / gallery */
.gallery { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 14px; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* brand logos */
.brands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; align-items: center; margin-top: 40px; }
.brands img { max-height: 70px; width: auto; margin: 0 auto; object-fit: contain; }
@media (max-width: 760px) { .brands { grid-template-columns: repeat(3, 1fr); } }

/* moving strip of service names */
.ticker { overflow: hidden; background: var(--light); color: var(--ink); padding: 18px 0; white-space: nowrap; }
.ticker .track { display: inline-flex; gap: 48px; animation: ticker 30s linear infinite; padding-left: 48px; }
.ticker span { font: 900 22px/1 var(--heading); font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; letter-spacing: -0.04em; }
.ticker span::after { content: "\2726"; margin-left: 48px; font-size: 16px; vertical-align: middle; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* packages / pricing cards */
.packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-top: 30px; text-align: left; }
.package { background: var(--bg-2); border: 1px solid rgba(255, 255, 255, 0.14); padding: 28px 24px; display: flex; flex-direction: column; }
.package .btns { margin-top: auto; padding-top: 18px; }
.package .btn { min-width: 0; flex: 1; padding: 0 14px; }
.jump { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 22px 0 10px; }

/* FAQ accordion */
.faq { max-width: 900px; margin: 30px auto 0; text-align: left; }
.faq details { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary > * { margin: 0; }
.faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--white); background: no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E"); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq .answer { padding: 0 0 18px; }

/* blog */
.post-hero { min-height: 420px; display: flex; align-items: flex-end; }
.post-hero::before { background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35)) !important; }
.article { max-width: 860px; margin: 0 auto; font-size: 15px; }
.article h2 { font-size: clamp(20px, 2.2vw, 26px); margin-top: 1.6em; }
.article h3 { margin-top: 1.4em; }
.article img { margin: 24px 0; width: 100%; }
.article table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.article th, .article td { border: 1px solid rgba(255, 255, 255, 0.2); padding: 8px 10px; text-align: left; }
.post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post-list article { background: var(--bg-2); border: 1px solid rgba(255, 255, 255, 0.1); }
.post-list img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-list h3 { padding: 16px 18px 20px; margin: 0; font-size: 14px; }
.post-list h3 a { text-decoration: none; }
.post-list h3 a:hover { text-decoration: underline; }
@media (max-width: 900px) { .post-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .post-list { grid-template-columns: 1fr; } }

/* quote form */
.quote-form { background: var(--bg-2); border: 1px solid rgba(255, 255, 255, 0.14); padding: clamp(22px, 4vw, 40px); text-align: left; }
.quote-form fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.quote-form legend, .quote-form label { display: block; font-weight: 500; color: var(--white); margin-bottom: 6px; }
.quote-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quote-form .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 640px) { .quote-form .row, .quote-form .row3 { grid-template-columns: 1fr; } }
.quote-form input[type="text"], .quote-form input[type="email"], .quote-form input[type="tel"], .quote-form textarea {
  width: 100%; background: #000; color: var(--white); border: 1px solid rgba(255, 255, 255, 0.3); padding: 12px 14px; font: 400 14px/1.4 var(--body); margin-bottom: 14px;
}
.quote-form textarea { min-height: 120px; resize: vertical; }
.quote-form input:focus, .quote-form textarea:focus { outline: 2px solid var(--white); outline-offset: 1px; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.checks label { display: inline-flex; gap: 8px; align-items: center; font-weight: 400; margin: 0; }
.quote-form .hp { position: absolute; left: -9999px; }
.form-status { margin-top: 14px; min-height: 1.5em; }
.map { width: 100%; min-height: 320px; border: 0; filter: grayscale(0.4) invert(0.9) hue-rotate(180deg); }

/* placeholder copy (shown until the written copy is imported) */
.pending { color: #8d8d8d; font-style: italic; }
h1.pending, h2.pending, h3.pending, h4.pending { color: #b8b8b8; font-style: normal; }

/* ---------- footer ---------- */
.site-footer { background: linear-gradient(rgba(43, 43, 43, 0.8), #000); padding: 70px 0 30px; font-size: 14px; }
.site-footer .grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 36px; }
.site-footer h2 { font-size: 16px; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer dl { margin: 0; }
.site-footer dt { font-weight: 600; color: var(--white); }
.site-footer dd { margin: 0 0 8px; }
.social { display: flex; gap: 12px; }
.social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--white); border-radius: 50%; }
.social svg { width: 18px; height: 18px; fill: var(--white); }
.site-footer .legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: var(--text-dim); font-size: 13px; }
@media (max-width: 900px) { .site-footer .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer .grid { grid-template-columns: 1fr; } }

/* tint shade preview (Car Teks' own, replaces the agency widget) */
.tint-chooser { max-width: 760px; margin: 26px auto 0; }
.tint-stage { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); }
.tint-stage img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tint-glass { position: absolute; inset: 0; background: #000; opacity: var(--shade, 0.5); transition: opacity 0.35s ease; mix-blend-mode: multiply; }
.tint-pick { margin: 18px 0 8px; font-weight: 500; color: var(--white); }
.tint-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.tint-buttons button { min-width: 74px; padding: 10px 14px; background: var(--bg); color: var(--white); border: 1px solid var(--white); font: 800 14px/1 var(--heading); font-stretch: 125%; cursor: pointer; transform: skewX(var(--skew)); }
.tint-buttons button[aria-pressed="true"], .tint-buttons button:hover { background: var(--light); color: var(--ink); }
.tint-note { font-size: 12px; color: var(--text-dim); margin-top: 12px; }
.logo-row { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; margin: 0 0 22px; }
.center .logo-row { justify-content: center; }
.logo-row img { height: 44px; width: auto; object-fit: contain; }
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin: 30px 0 50px; text-align: left; }
.option { background: var(--bg-2); border: 1px solid rgba(255, 255, 255, 0.14); padding: 28px 26px; }
.option .logo-row img { height: 40px; }
.option > p:first-child { display: inline-block; background: var(--light); color: var(--ink); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; padding: 0 14px; }
.pkg-head { margin-top: 20px; }
.package .btns { flex-direction: column; align-items: stretch; gap: 16px; }
.package .btn { width: calc(100% - 8px); }
.package ul { padding-left: 1.2em; }

/* ---------- tint simulator (Car Teks' own) ---------- */
.tint-sim { max-width: 1000px; margin: 30px auto 0; text-align: left; }
.ts-stage { background: radial-gradient(ellipse at 50% 70%, #2a2a2a 0%, #141414 60%, #0b0b0b 100%); border: 1px solid rgba(255, 255, 255, 0.12); padding: clamp(10px, 3vw, 30px); }
.ts-svg { width: 100%; height: auto; display: block; }
.ts-credit { font-size: 11px; color: var(--text-dim); margin: 6px 0 0; text-align: right; }
.ts-controls { margin-top: 22px; display: grid; gap: 14px; }
.ts-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center; }
.ts-row > label, .ts-label { color: var(--white); font-weight: 500; }
@media (max-width: 640px) { .ts-row { grid-template-columns: 1fr; gap: 6px; } }
.ts-select { background: #000; color: var(--white); border: 1px solid rgba(255, 255, 255, 0.35); padding: 10px 12px; font: 400 14px var(--body); max-width: 420px; }
.ts-shades { display: flex; flex-wrap: wrap; gap: 10px; }
.ts-shades button { min-width: 64px; padding: 9px 12px; background: var(--bg); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.7); font: 800 13px/1 var(--heading); font-stretch: 118%; cursor: pointer; transform: skewX(var(--skew)); }
.ts-shades button[aria-pressed="true"] { background: var(--light); color: var(--ink); border-color: var(--light); }
.ts-shades button:focus-visible, .ts-swatch:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.ts-shades .ts-strip { margin-left: 8px; }
.ts-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.ts-swatch { width: 32px; height: 32px; border-radius: 50%; background: var(--c); border: 2px solid rgba(255, 255, 255, 0.4); cursor: pointer; }
.ts-swatch[aria-pressed="true"] { border-color: var(--white); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); }
.ts-readout { margin: 4px 0 0; color: var(--white); font-weight: 500; }

.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; }

/* ---------- film ratings and heat-rejection meters (Car Teks' own) ---------- */
.option { position: relative; border-top: 4px solid var(--brand-c, rgba(255, 255, 255, 0.14)); }
.option[data-brand="xpel"] { --brand-c: #ffd100; }
.option[data-brand="global"] { --brand-c: #e4202f; }
.option > p:first-child { background: var(--brand-c, var(--light)); color: var(--ink); }
.option[data-brand="global"] > p:first-child { color: #fff; }
.rating { display: flex; gap: 4px; margin: 2px 0 12px; }
.rating svg { width: 20px; height: 20px; }
.ir-meter { margin: 18px 0 6px; padding: 16px 16px 12px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.1); }
.ir-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.ir-label { font: 600 12px/1.3 var(--body); letter-spacing: 1.6px; text-transform: uppercase; color: var(--text); }
.ir-num { font: 900 34px/1 var(--heading); font-stretch: 125%; font-variation-settings: "wdth" 125; color: var(--brand); letter-spacing: -0.04em; }
.ir-cells { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; height: 22px; }
.ir-cells i { display: block; background: rgba(255, 255, 255, 0.1); transform: skewX(var(--skew)); }
.ir-cells i.on { background: var(--brand); box-shadow: 0 0 10px color-mix(in srgb, var(--brand) 45%, transparent); }
.ir-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); margin-top: 6px; }
/* animate on scroll (site.js adds .ready, then .in-view) */
.ir-meter.ready .ir-cells i.on { background: rgba(255, 255, 255, 0.1); box-shadow: none; transition: background 0.2s ease calc(var(--i) * 45ms), box-shadow 0.2s ease calc(var(--i) * 45ms); }
.ir-meter.ready.in-view .ir-cells i.on { background: var(--brand); box-shadow: 0 0 10px color-mix(in srgb, var(--brand) 45%, transparent); }

/* shade guide (shown until the tint simulator has vehicles) */
.shade-guide { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 26px; }
.shade-guide figure { margin: 0; }
.shade-pic { position: relative; aspect-ratio: 4 / 3; background-size: cover; background-position: center; border: 1px solid rgba(255, 255, 255, 0.15); }
.shade-pic span { position: absolute; inset: 0; background: #05070a; }
.shade-guide figcaption { margin-top: 8px; font-size: 13px; }
.shade-guide strong { color: var(--white); font: 900 16px var(--heading); font-stretch: 118%; margin-right: 4px; }
.shade-note { font-size: 13px; color: var(--text-dim); margin-top: 14px; }
@media (max-width: 760px) { .shade-guide { grid-template-columns: repeat(3, 1fr); } }
/* package badges ("Starter Coverage", "Ultimate Protection") */
.package > p:first-child, .package > .eyebrow:first-child { align-self: flex-start; display: inline-block; background: var(--light); color: var(--ink); font: 400 11px/22px var(--body); letter-spacing: 2px; text-transform: uppercase; padding: 1px 14px; margin: 0 0 14px; }
.contact-info h4 { margin-top: 18px; }
.contact-info p { margin-bottom: 4px; }

/* ---- Added Oct 16, 2026: breadcrumbs, updated dates, Google reviews as text, service-area links ---- */
.crumbs { padding-top: 18px; font-size: 13px; color: var(--text-dim); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "\203A"; margin-right: 6px; color: var(--text-dim); }
.crumbs a { color: var(--text-dim); }
.updated { font-size: 13px; color: var(--text-dim); margin: 6px auto 0; }
.review-summary { font-size: 16px; margin: 4px 0 18px; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 24px 0; text-align: left; }
.review { margin: 0; padding: 20px; background: var(--bg-2); border: 1px solid rgba(255, 255, 255, 0.12); }
.review-stars { color: #ffd100; letter-spacing: 2px; font-size: 16px; }
.review blockquote { margin: 10px 0; font-size: 14px; line-height: 1.7; }
.review figcaption { font-size: 12px; color: var(--text-dim); }
.review-note { font-size: 12px; color: var(--text-dim); }
.site-footer .areas { margin-top: 34px; font-size: 13px; color: var(--text-dim); }
.site-footer .areas a { color: var(--text-dim); }
.site-footer .areas ul { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.facts li, .service-list li { margin-bottom: 8px; }
.hours { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 0 0 18px; }
.hours dt { font-weight: 600; color: var(--white); }
.hours dd { margin: 0; }
.price-box { margin: 34px 0 10px; padding: 22px 24px; border: 1px solid rgba(255, 209, 0, 0.5); background: var(--bg-2); }
.price-box h2 { font-size: 18px; margin-top: 0; }

/* ======================================================================================================
   Matched to the live site (measured Oct 19, 2026 with tools/compare/compare.mjs at 1280 wide).
   Louie: "do a one by one page for every single page and make them identical".
   Headings: the live site's Fierce (a heavy, very wide face, set italic) is matched with Archivo at its widest,
   black and italic. Sizes: h1 42px, h2 32px (48px lines), h3 16px (24px lines); body 12px Poppins on 24px lines.
   ====================================================================================================== */
h1, h2, h3, h4, h5, h6 { font-style: italic; letter-spacing: -0.01em; }
h1 { font-size: clamp(30px, 3.3vw, 42px); line-height: 1.16; }
h2 { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.5; }
h3 { font-size: 16px; line-height: 1.5; }
.btn, .btn > span, .nav a, .nav button, .card-label { font-style: italic; }

/* hero with a background video (home) */
.hero.hero-video { min-height: min(980px, 100vh); padding: 0; background: #0b0404; }
.hero.hero-video::before { background: rgba(0, 0, 0, 0.66); }
.h-accent { color: #c4c4c4; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 7px; }
.hero.hero-video video.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-left { position: absolute; left: 0; top: 0; bottom: 0; width: 41.6%; z-index: 1; background: #0b0404; overflow: hidden; }
.hero-left::after {               /* a waving checkered flag, drawn in code, fading in from the bottom-left corner */
  content: ""; position: absolute; left: -10%; bottom: -12%; width: 120%; height: 55%;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.07) 0 25%, transparent 0 50%) 0 0 / 46px 46px;
  transform: perspective(600px) rotateX(48deg) skewX(-14deg);
  -webkit-mask-image: radial-gradient(ellipse at 15% 100%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 15% 100%, #000 10%, transparent 70%);
}
.hero.hero-video > .wrap { max-width: 1280px; padding: 110px 28px 120px; }
.hero.hero-video .cols.c5-7 { grid-template-columns: minmax(0, 615px) minmax(0, 1fr); gap: 52px; }
.hero.hero-video h1 { max-width: 560px; }
.slides { position: relative; aspect-ratio: 615 / 549; overflow: hidden; }
.slide { position: absolute; inset: 0; opacity: 0; animation: slideshow calc(var(--n) * 5s) infinite; animation-delay: calc(var(--i) * 5s - 1s); }
.slide img, .hero .media .slide img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; box-shadow: none; }
@keyframes slideshow { 0% { opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .slide:first-child { opacity: 1; } }
@media (max-width: 860px) {
  .hero-left { display: none; }
  .hero.hero-video > .wrap { padding: 40px 16px 80px; }
  .hero.hero-video .cols.c5-7 { grid-template-columns: 1fr; }
}

/* service tiles: a photo, with its white label box overlapping the photo's lower edge */
.cards { gap: 16px; }
.cards a.card { aspect-ratio: auto; overflow: visible; display: flex; flex-direction: column; }
.cards a.card img { aspect-ratio: 236 / 241; height: auto; filter: none; }
.cards a.card:hover img { transform: none; filter: brightness(1.08); }
.cards .card-label { position: relative; left: auto; right: auto; top: auto; margin: -64px 10px 0; padding: 20px 10px; min-height: 64px; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1.6; background: #e7e7e7; }

/* photo backgrounds that stay put while the page scrolls (desktop; phones scroll them) */
@media (min-width: 900px) and (hover: hover) { .sec.bg-fixed { background-attachment: fixed; } }
.sec.bg-fixed::before { background: rgba(0, 0, 0, 0.18); }
.sec.flush-bottom { padding-bottom: 0; }
.panel { background: rgba(11, 4, 4, 0.82); border: 1px solid rgba(255, 255, 255, 0.85); padding: clamp(26px, 3.4vw, 48px) clamp(22px, 3vw, 44px); max-width: 650px; }
.panel.left { margin-left: clamp(0px, 5vw, 60px); margin-right: auto; max-width: 735px; }

/* brands beside a framed photo with the logos across it */
.brands-photo .cols.c5-7 { align-items: center; }
.brand-frame { position: relative; aspect-ratio: 700 / 510; background-size: cover; background-position: center; border: 1px solid rgba(255, 255, 255, 0.75); display: flex; align-items: center; }
.brand-frame::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); }
.brand-row { position: relative; display: flex; justify-content: space-around; align-items: center; gap: 10px; width: 100%; padding: 0 18px; }
.brand-row img { max-height: 46px; max-width: 19%; width: auto; object-fit: contain; }

/* the photo carousel: tall photos, four in view, dots below */
.gallery-carousel { padding: 100px 0 30px; }
.carousel { overflow: hidden; }
.carousel .track { display: flex; gap: 18px; transition: transform 0.7s ease; }
.carousel .cell { flex: 0 0 calc((100% - 54px) / 4); }
.carousel .cell img { width: 100%; aspect-ratio: 282 / 352; object-fit: cover; }
.carousel .dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.carousel .dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.carousel .dots i.on { background: #fff; }
@media (max-width: 760px) { .carousel .cell { flex-basis: calc((100% - 18px) / 2); } }

/* the huge outlined words */
.ticker.outline { background: var(--bg); color: transparent; padding: 0; height: 129px; display: flex; align-items: center; }
.ticker.outline .track { gap: 70px; animation-duration: 40s; }
.ticker.outline span { font: italic 900 96px/1 var(--heading); font-stretch: 125%; font-variation-settings: "wdth" 125; -webkit-text-stroke: 1.5px #e7e7e7; color: transparent; letter-spacing: -0.02em; }
.ticker.outline span::after { content: none; }
@media (max-width: 760px) { .ticker.outline { height: 90px; } .ticker.outline span { font-size: 60px; } }

/* follow us: logo, heading, square social buttons, a row of photo tiles over a dark photo */
.social-sec { padding: 60px 0 40px; }
.social.square { justify-content: center; }
.social.square a { border-radius: 0; width: 34px; height: 34px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 290px)); justify-content: center; gap: 16px; margin-top: 34px; }
.tile img { width: 100%; aspect-ratio: 290 / 260; object-fit: cover; }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
/* home touch-ups after the side-by-side (Oct 19) */
h1, h2 { letter-spacing: 0.005em; }
.cards .card-label { margin: -64px 5px 0; }
.panel li strong { text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.panel.left { margin-left: 40px; }
.carousel { position: relative; }
.carousel .track { gap: 6px; }
.carousel .cell { flex-basis: calc((100% - 18px) / 4); }
.carousel .dots { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; }
.tiles { gap: 0; grid-template-columns: repeat(4, minmax(0, 290px)); }
@media (max-width: 760px) { .carousel .cell { flex-basis: calc((100% - 6px) / 2); } .panel.left { margin-left: 0; } }

/* ---- the live service pages' layouts (measured Oct 19, 2026) ---- */
/* hero: text on a dark half with the checkered flag, a photo filling the right half */
.hero.hero-half { min-height: 800px; padding: 0; background: #0b0404; }
.hero.hero-half::before { content: none; }
.hero-half .hero-left { width: 50%; }
.hero-half .hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; background-size: cover; background-position: center; z-index: 0; }
.hero-half > .wrap { position: relative; z-index: 2; max-width: 1280px; padding: 120px 40px; }
.hero-half .hero-text { max-width: 560px; }
.hero-half .logo-row { margin-bottom: 14px; }
.hero-half .logo-row img { height: 50px; }
@media (max-width: 860px) {
  .hero.hero-half { min-height: 0; }
  .hero-half .hero-left { display: none; }
  .hero-half .hero-photo { position: relative; display: block; width: 100%; height: 320px; }
  .hero-half > .wrap { padding: 40px 16px 70px; }
}

/* a framed photo beside a bordered box */
.photo-panel { padding: 150px 0 75px; }
.pp-grid { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); align-items: center; }
.pp-photo { aspect-ratio: 500 / 740; background-size: cover; background-position: center; }
.pp-grid .panel { position: relative; margin-left: -40px; max-width: 650px; }
@media (max-width: 860px) {
  .photo-panel { padding: 60px 0 40px; }
  .pp-grid { grid-template-columns: 1fr; }
  .pp-photo { aspect-ratio: 4 / 3; }
  .pp-grid .panel { margin: -40px 12px 0; }
}

/* a row of photos */
.photo-row { padding: 30px 0; }
.photo-row .gallery { gap: 21px; }
.photo-row .gallery img { aspect-ratio: var(--ratio, 4 / 3); }

/* packages as bordered rows beside their photo, alternating sides */
.pkg-rows { display: grid; gap: 50px; margin-top: 40px; text-align: left; }
.pkg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; padding: 25px; border: 1px solid rgba(255, 255, 255, 0.35); align-items: stretch; }
.pkg-row.flip .pkg-photo { order: 2; }
.pkg-photo { min-height: 460px; background: #1c1c1e no-repeat center / contain; }
.pkg-row .package { background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); padding: 34px 32px; justify-content: center; }
.pkg-row .package h3 { font-size: 26px; line-height: 1.3; }
.pkg-row .package h4 { align-self: flex-start; display: inline-block; background: #e7e7e7; color: var(--ink); padding: 8px 16px; font-size: 16px; margin: 4px 0 12px; }
.pkg-row .package .btns { max-width: 260px; }
@media (max-width: 860px) {
  .pkg-row { grid-template-columns: 1fr; padding: 14px; }
  .pkg-row.flip .pkg-photo { order: 0; }
  .pkg-photo { min-height: 260px; }
}

/* questions in a bordered box over a photo */
.panel.qa .faq { margin: 18px 0 0; max-width: none; }
.panel.qa .faq details { border: 1px solid rgba(255, 255, 255, 0.55); padding: 0 14px; margin-bottom: 10px; }
.panel.qa .faq summary { padding: 12px 0; }
.panel.qa .faq summary h3 { font-size: 14px; line-height: 1.5; }

/* bordered boxes */
.boxes-sec { padding: 30px 0 100px; }
.boxes { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 20px; margin: 36px 0 10px; text-align: center; }
.box { border: 1px solid rgba(255, 255, 255, 0.55); padding: 34px 22px; }
.box h4 { font-size: 18px; line-height: 1.4; }
@media (max-width: 860px) { .boxes { grid-template-columns: 1fr; } }

/* every page's ticker is the outlined one on the live site */
.ticker:not(.outline) { background: var(--bg); color: transparent; padding: 0; height: 129px; display: flex; align-items: center; }
.ticker:not(.outline) span { font: italic 900 96px/1 var(--heading); font-stretch: 125%; font-variation-settings: "wdth" 125; -webkit-text-stroke: 1.5px #e7e7e7; color: transparent; }
.ticker:not(.outline) span::after { content: none; }
.panel.center { margin: 0 auto; text-align: center; }
.panel.center .btns { justify-content: center; }

/* ---- blog posts, blog index and contact, matched to the live site (Oct 19) ---- */
.post-hero { min-height: 480px; align-items: center; justify-content: center; text-align: center; }
.post-hero::before { background: rgba(0, 0, 0, 0.45) !important; }
.post-hero h1 { max-width: 900px; margin: 0 auto 12px; }
.post-hero .byline { margin: 0; font-size: 13px; color: var(--text); }
.page-post .article, .page-guide .article { max-width: 1200px; font-size: 12px; line-height: 2; }
.page-post .article h2 { font-size: 32px; line-height: 1.5; }
.post-list { gap: 30px; }
.post-list article { background: transparent; border: 0; }
.post-list img { aspect-ratio: 393 / 190; }
.post-list h3 { padding: 18px 0 0; font-size: 22px; line-height: 1.3; }
.contact-photo .cp-top { display: grid; grid-template-columns: minmax(0, 539px) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.contact-photo .cp-photo { min-height: 640px; background-size: cover; background-position: center; }
.contact-photo .cp-form .eyebrow { margin-bottom: 10px; }
.contact-photo .cp-form .quote-form { margin-top: 18px; }
.contact-photo .cp-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 70px; align-items: start; }
.contact-photo .cp-faq .faq { margin-top: 18px; }
@media (max-width: 860px) {
  .contact-photo .cp-top, .contact-photo .cp-bottom { grid-template-columns: 1fr; }
  .contact-photo .cp-photo { min-height: 300px; }
}
/* phones, as the live site: the hero photo before the headline; service tiles one per row, wide */
@media (max-width: 860px) { .hero.hero-video .cols.reverse-mobile > :first-child { order: 0; } }
@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  .cards a.card img { aspect-ratio: 708 / 241; }
}
/* film cards as on the live tint page: Global on dark, XPEL on white, both badges red */
.option > p:first-child, .option[data-brand="global"] > p:first-child { background: #d81f26; color: #fff; }
.option[data-brand="xpel"] { background: #f4f4f4; color: #1c1c1c; border-top-color: #d81f26; }
.option[data-brand="xpel"] h4, .option[data-brand="xpel"] p, .option[data-brand="xpel"] li { color: #1c1c1c; }
.option[data-brand="xpel"] .ir-meter { background: rgba(0, 0, 0, 0.82); color: var(--text); }
.option[data-brand="xpel"] .ir-meter .ir-label, .option[data-brand="xpel"] .ir-meter .ir-scale { color: #d8d8d8; }
.option[data-brand="xpel"] .rating svg path[fill="none"] { stroke: rgba(0, 0, 0, 0.35); }
.option[data-brand="global"] { border-top-color: #d81f26; }

/* ---- home hero and header, to the live site's measured pixels (1265 wide, Oct 19, 2026) ----
   header 122 tall over the hero, logo 198 x 101 at 40,7; nav 11px in two rows; estimate button 186 x 52.
   hero 981 tall; left column 41.66% (dark, checkered); the video fills only the right 58.34%;
   slider 609 x 549 at 28,190 (sliding); eyebrow at 657,267; headline 558 wide at 657,305 (42px);
   lead 558 wide at 657,603 with a 5px light rule and 20px indent, 14px on 28px lines; buttons 213 x 50 at y 711. */
@media (min-width: 1101px) {
  .site-header { background: rgba(0, 0, 0, 0.82); }
  .site-header .bar { min-height: 122px; max-width: none; padding: 7px 40px; gap: 40px; }
  .site-header .logo img { width: 198px; height: auto; }
  .nav a, .nav button { font-size: 11px; line-height: 30px; }
  .site-header .cta .btn { min-width: 186px; min-height: 52px; font-size: 14px; }
  .site-header { position: fixed; left: 0; right: 0; }
  .page-home main { padding-top: 0; }
  .hero.hero-video { height: 981px; min-height: 0; }
  .hero.hero-video::before { left: 41.66%; background: rgba(0, 0, 0, 0.5); }
  .hero.hero-video video.hero-bg { left: 41.66%; width: 58.34%; }
  .hero-video .hero-left { width: 41.66%; }
  .hero.hero-video > .wrap { position: static; max-width: none; padding: 0; }
  .hero.hero-video .cols.c5-7 { display: block; }
  .hero.hero-video .media { position: absolute; left: 28px; top: 190px; width: 609px; height: 549px; z-index: 3; }
  .hero.hero-video .hero-text { position: absolute; left: calc(41.66% + 130px); top: 267px; width: 558px; z-index: 3; }
  .hero.hero-video .eyebrow { height: 28px; line-height: 24px; margin: 0 0 10px; }
  .hero.hero-video h1 { font-size: 42px; line-height: 48px; max-width: 558px; margin: 0 0 10px; }
  .hero.hero-video .lead { border-left: 5px solid #e7e7e7; padding-left: 20px; font-size: 14px; line-height: 28px; margin: 0; }
  .hero.hero-video .btns { margin-top: 20px; gap: 25px; }
  .hero.hero-video .btn { min-width: 213px; min-height: 50px; font-size: 14px; }
}
.slides { position: relative; overflow: hidden; aspect-ratio: 609 / 549; }
.slides-track { display: flex; height: 100%; transition: transform 1s ease-in-out; }
.slides .slide { position: relative; inset: auto; opacity: 1; animation: none; flex: 0 0 100%; height: 100%; }
.slides .slide img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1101px) { .hero.hero-video .media .slides { width: 100%; height: 100%; aspect-ratio: auto; } }
/* photos that fill their box (real images, sized per screen) */
.pp-photo, .pkg-photo, .cp-photo, .brand-frame { position: relative; overflow: hidden; }
img.fill, video.fill { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
img.fill.contain { object-fit: contain; }
.brand-frame::before { z-index: 1; }
.brand-row { z-index: 2; }
.hero-half .hero-photo img.fill { object-position: center; }

/* ---- phones, tuned on their own (Oct 19, 2026). The live site sends phones its 768-wide tablet layout, which runs
   off the screen; ours is laid out for the phone instead. ---- */
@media (max-width: 860px) {
  .hero.hero-half { flex-direction: column; align-items: stretch; }
  .hero-half .hero-photo { order: -1; height: 300px; }
  .hero-half > .wrap { width: 100%; }
}
@media (max-width: 760px) {
  .photo-row .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; scrollbar-width: none; }
  .photo-row .gallery::-webkit-scrollbar { display: none; }
  .photo-row .gallery img { flex: 0 0 82%; scroll-snap-align: start; }
  .phone-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(3, 1fr); background: #000; border-top: 1px solid rgba(255, 255, 255, 0.25); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .phone-bar a { display: flex; align-items: center; justify-content: center; min-height: 56px; font: italic 900 14px/1 var(--heading); font-stretch: 125%; text-transform: uppercase; color: #fff; text-decoration: none; }
  .phone-bar a + a { border-left: 1px solid rgba(255, 255, 255, 0.25); }
  .phone-bar a:last-child { background: #e7e7e7; color: var(--ink); }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}
.phone-bar { display: none; }
@media (max-width: 760px) { .phone-bar { display: grid; } }

/* ======================================================================================================
   Exact pass (Oct 19, 2026), from tools/compare/measure.mjs at 1280 wide.
   Live content runs 1200 wide (x 40 to 1240); buttons are 213 x 50; boxes keep text 61px from their border.
   ====================================================================================================== */
:root { --max: 1280px; }
.btn { min-width: 213px; min-height: 50px; padding: 0 18px; font-size: 14px; }
.btns { gap: 18px 26px; }
.panel { padding: 50px 61px; }
.panel.left { max-width: var(--panelw, 747px); }

/* settings a section carries from its measurements (s.tune) */
.sec[style*="--h2w"] h2 { max-width: var(--h2w); }
.sec.center[style*="--h2w"] h2 { margin-left: auto; margin-right: auto; }
.sec[style*="--h2lh"] h2 { line-height: var(--h2lh); }
.sec[style*="--pw"] p { max-width: var(--pw); }
@media (min-width: 901px) {
  .sec[style*="--cols"] .split, .sec[style*="--cols"] .cols { grid-template-columns: var(--cols); justify-content: space-between; gap: var(--gap, 13px); }
}

/* service tiles: 236 x 241 photos 10 apart, a 233 wide label under each; labels 2 and 4 rise 40 over their photo;
   the row tucks 88px up into the section above */
.cards-sec { padding: 0 0 20px; }
@media (min-width: 1001px) {
  .cards { grid-template-columns: repeat(5, 236px); gap: 10px; justify-content: center; margin-top: -88px; }
  .cards .card-label { margin: 0; width: 233px; padding: 15px 10px; min-height: 0; font-size: 16px; line-height: 24px; }
}

/* carousel: 282 x 352 photos, 18 apart, 1182 wide in all */
@media (min-width: 1001px) {
  .carousel { max-width: 1182px; margin: 0 auto; }
  .carousel .track { gap: 18px; }
  .carousel .cell { flex: 0 0 282px; }
}
/* follow us: four 290 x 260 photos, touching, 1160 wide */
@media (min-width: 1001px) { .tiles { grid-template-columns: repeat(4, 290px); } }
.btn { padding: 0 8px; letter-spacing: -0.035em; font-size: 13px; }
.logo-mark { width: 282px; }
.hero.hero-video .btns { margin-left: 20px; }
.sec[style*="--panelr"] .panel.right { margin-right: var(--panelr); }
@media (min-width: 1001px) {
  .cards { margin-top: 0; position: relative; top: -88px; margin-bottom: -88px; }
  .cards .card-label { padding: 15px 23px; }
}
.split > div:last-child { padding-top: 13px; }
/* exact pass, round 2 */
.btn, .site-header .cta .btn, .hero.hero-video .btn { font-size: 13px; }
@media (min-width: 1001px) { .cards a.card:nth-child(even) { transform: translateY(-40px); } }
.split > div:last-child { padding-top: 13px; }
.split > div:first-child { padding-top: 7px; }
.panel { padding-top: 59px; }
.panel ul { margin: 10px 0 0; }
.panel li { margin-bottom: 0; font-size: 12px; line-height: 24px; }
.btn, .btn > span { font-stretch: 112%; font-variation-settings: "wdth" 112; }
/* exact pass, round 3: live buttons are 200 x 50 (the slant makes them look 213), 12px text */
.btn, .hero.hero-video .btn { min-width: 200px; padding: 0 12px; font-size: 12px; letter-spacing: normal; }
.site-header .cta .btn { min-width: 172px; min-height: 52px; font-size: 12px; }
.btns, .hero.hero-video .btns { column-gap: 40px; }
.panel { padding: 67px 60px 61px; }
.panel .eyebrow { margin-bottom: 10px; }
.panel h2 { margin-bottom: 12px; }
.panel ul { margin: 12px 0 0; padding-left: 28px; list-style-type: "-   "; }
.panel li { font-size: 14px; line-height: 28px; }
.panel .btns { margin-top: 22px; }
.split > div:last-child p { margin: 0 0 28px; }
.split > div:last-child p:last-child { margin-bottom: 0; }
/* service tile labels: 236 x 102 boxes, words centred in a 186 wide column */
@media (min-width: 1001px) {
  .cards .card-label { width: 236px; height: 102px; padding: 0 25px; display: flex; align-items: center; justify-content: center; }
}
.tiles { margin-top: 41px; }
/* tile labels: the stand-in font runs narrower than the agency's, so a touch more spacing gives the same line breaks */
@media (min-width: 1001px) { .cards .card-label { letter-spacing: 0.4px; } }

/* ===== Service pages, exact (Oct 19, 2026): the live window tinting page measured section by section ===== */
body { font-weight: 400; }
.faq .answer p { font-weight: 300; color: #dcdcdc; }
p.fine { text-transform: uppercase; font-style: italic; letter-spacing: 2.8px; }

/* hero: text on the dark half, centred top to bottom; the two film logos in 191 x 89 boxes */
@media (min-width: 1001px) {
  .hero.hero-half { min-height: 947px; display: flex; align-items: center; }
  .hero-half > .wrap { padding: 0 0 0 60px; max-width: none; width: 100%; margin: 0; }
  .hero-half .hero-text { max-width: 540px; }
  .hero-half .logo-row { gap: 0; margin: 0 0 30px; justify-content: flex-start; }
  .hero-half .logo-row img { width: 191px; height: 89px; object-fit: contain; }
  .hero-half .eyebrow { margin: 0 0 10px; }
  .hero-half h1 { line-height: 48px; margin: 0 0 12px; }
  .hero-half .lead { border-left: 2px solid #e7e7e7; padding-left: 20px; margin: 0 0 22px; max-width: 540px; }
  .hero-half .btns { margin-top: 0; }
}

/* photo beside a framed band with a grey text box */
@media (min-width: 1001px) {
  .photo-panel { padding: 81px 0 6px; }
  .pp-grid { display: block; position: relative; min-height: 756px; }
  .pp-photo { position: absolute; left: 1px; top: 0; width: 499px; height: 756px; aspect-ratio: auto; z-index: 2; }
  .pp-frame { margin-top: 69px; min-height: 618px; border: 1px solid #474747; background: #0b0404; display: flex; justify-content: flex-end; padding-right: 50px; }
  .pp-grid .pp-frame .panel { margin: 0; max-width: none; width: 699px; background: #1f1f1f; border: 0; padding: 53px 45px 45px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
}
.pp-frame .panel p { margin: 0 0 28px; }
.pp-frame .panel .btns { margin-top: -6px; }
@media (max-width: 1000px) {
  .pp-grid { display: block; }
  .pp-photo { aspect-ratio: 4 / 3; }
  .pp-frame { position: relative; z-index: 1; margin: -36px 12px 0; border: 1px solid #474747; background: #0b0404; padding: 10px; }
  .pp-grid .pp-frame .panel { margin: 0; max-width: none; background: #1f1f1f; border: 0; padding: 28px 20px 30px; }
}

/* photo row in a thin frame, 10px inside it */
.photo-row .gallery { border: 1px solid #474747; padding: 10px; gap: 10px; }
@media (max-width: 760px) { .photo-row .gallery { border: 0; padding: 0; } }

/* the tint chooser: one grey box; five shade tabs; the shade in big letters over the car */
.grey-box { background: #1f1f1f; padding: 20px 20px 80px; }
.grey-box .logo-mark { margin: 0 auto 2px; }
.grey-box h2 { margin: 0 0 22px; }
p.pill { display: inline-block; background: #e7e7e7; color: #000; font: 600 14px/28px var(--body); letter-spacing: 3.64px; text-transform: uppercase; padding: 8px 54px 8px 60px; margin: 0 0 41px; }
.shade-tabs { display: flex; justify-content: center; gap: 23px; }
.shade-tabs button { width: 176px; height: 45px; padding: 0; cursor: pointer; background: #fff; color: #000; border: 1px solid #e7e7e7; transform: skewX(var(--skew)); font: 800 12px/1 var(--heading); font-stretch: 112%; font-variation-settings: "wdth" 112; font-style: italic; text-transform: uppercase; }
.shade-tabs button > span { display: inline-block; transform: skewX(calc(var(--skew) * -1)); }
.shade-tabs button[aria-pressed="true"] { background: #ababab; color: #fff; }
.shade-tabs button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.shade-stage { position: relative; height: 498px; }
.shade-big { position: absolute; left: 172px; top: 43px; margin: 0; font: italic 900 120px/121px var(--heading); font-stretch: 125%; font-variation-settings: "wdth" 125; letter-spacing: -0.05em; color: #e7e7e7; }
.shade-car { position: absolute; left: 114px; top: 125px; width: 973px; height: auto; --paint: #8b8d90; }
.shade-glass { transition: opacity 0.35s ease; }
@media (max-width: 1000px) {
  .grey-box { padding: 20px 12px 30px; }
  p.pill { padding: 6px 18px; letter-spacing: 2px; font-size: 12px; margin-bottom: 24px; }
  .shade-tabs { gap: 8px; padding: 0 6px; }
  .shade-tabs button { flex: 1 1 0; width: auto; height: 40px; }
  .shade-stage { height: auto; padding-top: 10px; }
  .shade-big { position: static; font-size: 64px; line-height: 64px; text-align: left; padding-left: 12px; margin-top: 12px; }
  .shade-car { position: static; width: 100%; margin-top: -14px; }
}

/* packages: the two film cards, the jump tabs, then each package in a framed row */
.pkg-sec .options { grid-template-columns: 1fr 1fr; gap: 0; margin: 16px 0 59px; text-align: center; }
.pkg-sec .option { position: relative; border: 0; padding: 35px 10px 30px; background: #282828; color: #fff; }
.pkg-sec .option[data-brand="xpel"] { background: #fff; color: #000; }
.pkg-sec .option[data-brand="xpel"] h4, .pkg-sec .option[data-brand="xpel"] p, .pkg-sec .option[data-brand="xpel"] strong { color: #000; }
.pkg-sec .option > p:first-child { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); margin: 0; min-width: 168px; padding: 5px 34px; border-radius: 17px; background: #ff2d00; color: #e7e7e7; font: 400 14px/28px var(--body); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }
.pkg-sec .option[data-brand="xpel"] > p:first-child { color: #e7e7e7; top: -16px; }
.pkg-sec .option .logo-row { justify-content: center; align-items: center; height: 123px; margin: 0 0 15px; }
.pkg-sec .option[data-brand="global"] .logo-row img { height: 123px; width: auto; }
.pkg-sec .option[data-brand="xpel"] .logo-row img { width: 258px; height: auto; }
.pkg-sec .option h4 { font-size: 20px; line-height: 30px; margin: 0; color: #fff; }
.pkg-sec .option .rating { justify-content: center; gap: 1px; margin: 2px 0 15px; }
.pkg-sec .option .rating svg { width: 20px; height: 20px; }
.pkg-sec .option .rating path { fill: #f7c52f; stroke: #f7c52f; }
.pkg-sec .option .rating path[fill="none"] { fill: #fff; stroke: #fff; }
.pkg-sec .option p { max-width: 424px; margin: 0 auto 12px; }
.pkg-sec .option p strong { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.ir-meter { width: 436px; max-width: 100%; margin: 5px auto 0; padding: 0; background: none; border: 0; }
.ir-track { height: 30px; background: #000; border: 1px solid rgba(191, 191, 191, 0.5); }
.ir-fill { height: 28px; width: var(--v); background: linear-gradient(90deg, #f8df00, #ff2200); text-align: right; padding-right: 10px; white-space: nowrap; }
.ir-num { font: 300 14px/28px var(--body); color: #fff; }
.ir-meter.ready .ir-fill { width: 0; }
.ir-meter.ready.in-view .ir-fill { width: var(--v); transition: width 1.1s cubic-bezier(0.2, 0.7, 0.3, 1); }
.pkg-sec .pkg-head { margin: 0; }
.pkg-sec .pkg-head .eyebrow { margin-bottom: 2px; }
.pkg-sec .pkg-head h3 { font-size: 28px; line-height: 42px; margin: 0; }
.pkg-sec .pkg-head p { margin: 0; }
.pkg-sec .jump { gap: 0; flex-wrap: nowrap; margin: 39px 0 45px; }
.pkg-sec .jump .btn { min-width: 290px; min-height: 60px; font-size: 14px; background: #000; padding: 0 16px; }
.pkg-sec .pkg-rows { gap: 40px; margin-top: 0; }
.pkg-sec .pkg-row { grid-template-columns: 1fr 1fr; gap: 20px; padding: 60px; border: 1px solid #474747; }
.pkg-sec .pkg-photo { min-height: 0; background-color: #282828; }
.pkg-sec .pkg-row .package { background: #1f1f1f; border: 1px solid #e7e7e7; padding: 35px 25px 25px; justify-content: flex-start; }
.pkg-sec .pkg-row .package h3 { font-size: 28px; line-height: 42px; margin: 0 0 14px; }
.pkg-sec .pkg-row .package h4, .pkg-sec .pkg-row .package h5 { display: block; align-self: auto; background: none; padding: 0; margin: 0; color: #fff; font: 800 20px/30px var(--heading); font-stretch: 112%; font-variation-settings: "wdth" 112; font-style: normal; letter-spacing: -0.03em; text-transform: uppercase; }
.pkg-sec .pkg-row .package h5:first-of-type { font-size: 16px; line-height: 24px; margin-bottom: 12px; }
.pkg-sec .pkg-row .package h5:nth-of-type(2) { color: #ababab; }
.pkg-sec .pkg-row .package p { margin: 23px 0 0; padding-top: 19px; border-top: 1px solid rgba(231, 231, 231, 0.3); }
.pkg-sec .pkg-row .package .btns { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 32px; padding-top: 0; max-width: none; }
.pkg-sec .pkg-row .package .btn { min-width: 230px; min-height: 49px; width: auto; flex: none; }
@media (max-width: 1000px) {
  .pkg-sec .options { grid-template-columns: 1fr; gap: 44px; }
  .pkg-sec .jump { flex-wrap: wrap; gap: 14px 10px; }
  .pkg-sec .jump .btn { min-width: 0; flex: 1 1 40%; min-height: 50px; font-size: 12px; }
  .pkg-sec .pkg-row { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
  .pkg-sec .pkg-photo { min-height: 240px; }
  .pkg-sec .pkg-row .package { padding: 24px 18px 22px; }
  .pkg-sec .pkg-row .package h3 { font-size: 22px; line-height: 30px; }
}

/* questions in a box: each question in its own bordered row with a light round arrow */
.panel.qa { padding: 33px 25px 25px; }
.panel.qa .faq { margin: 0; }
.panel.qa .faq details { border: 1px solid #e7e7e7; padding: 0; margin: 0 0 10px; }
.panel.qa .faq summary { padding: 18px 29px 18px 20px; gap: 20px; }
.panel.qa .faq summary h3 { font-size: 16px; line-height: 24px; }
.panel.qa .faq summary::after { width: 31px; height: 31px; border: 0; background: #e7e7e7 no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b0404' stroke-width='1.8'/%3E%3C/svg%3E"); }
.panel.qa .faq .answer { padding: 0 20px 18px; }
.panel.qa .btns { margin-top: 10px; }
/* the care tips: the box over the left of the shop's clip */
@media (min-width: 1001px) {
  .qa-video { padding: 50px 0 40px; }
  .qa-video .wrap { position: relative; min-height: 647px; }
  .qa-media { position: absolute; left: 647px; top: 0; width: 483px; height: 647px; }
  .qa-video .panel.qa { position: relative; z-index: 1; margin: 50px 0 0; width: 677px; max-width: none; background: rgba(0, 0, 0, 0.6); border-color: #fff; }
}
.qa-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1000px) {
  .qa-video { padding: 40px 0; }
  .qa-media { aspect-ratio: 16 / 9; }
  .qa-video .panel.qa { margin: -30px 12px 0; position: relative; }
}
/* the questions over a photo that sits inside the page width and fades out at the bottom */
.qa-inset { padding: 100px 0; }
.qa-inset .wrap { position: relative; }
.qa-bg { position: absolute; top: -100px; bottom: -100px; left: var(--gutter); right: var(--gutter); background-size: cover; background-position: center; }
.qa-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 4, 4, 0.1) 0%, rgba(11, 4, 4, 0.35) 55%, #0b0404 92%); }
@media (min-width: 900px) and (hover: hover) { .qa-bg.bg-fixed { background-attachment: fixed; } }
.qa-inset .panel.qa { position: relative; z-index: 1; margin-left: 40px; width: 747px; max-width: 100%; background: rgba(0, 0, 0, 0.6); border-color: #e7e7e7; }
@media (max-width: 1000px) { .qa-inset { padding: 40px 0; } .qa-bg { top: -40px; bottom: -40px; } .qa-inset .panel.qa { margin-left: 0; } }

/* three boxes, each with a round line icon; the middle one sits 20px lower */
@media (min-width: 1001px) {
  .boxes-sec { padding: 45px 0 125px; }
  .boxes-sec .logo-mark { margin: 0 auto 8px; }
  .boxes-sec .eyebrow { margin-bottom: 10px; }
  .boxes-sec h2 { max-width: var(--h2w, 640px); margin: 0 auto; }
  .boxes { grid-template-columns: repeat(3, 360px); gap: 20px; justify-content: center; margin: 40px 0 35px; align-items: start; }
  .box { min-height: 566px; }
  .box:nth-child(2) { margin-top: 20px; min-height: 576px; }
}
.box { background: #1f1f1f; border: 1px solid #e7e7e7; padding: 30px 20px 35px; }
.box-icon { display: flex; width: 80px; height: 80px; margin: 0 auto 14px; border: 1px solid #e7e7e7; border-radius: 50%; align-items: center; justify-content: center; color: #e7e7e7; }
.box-icon svg { width: 40px; height: 40px; }
.box h4 { font-size: 20px; line-height: 30px; margin: 0 18px 15px; }
.box p { margin: 0; }

/* this page's own phrase in thin outline letters, drifting across */
.ticker.word { background: var(--bg); color: transparent; padding: 0; height: 174px; display: flex; align-items: flex-start; }
.ticker.word .track { gap: 167px; padding: 50px 0 0 167px; animation-duration: 36s; }
.ticker.word span { font: italic 900 92px/80px var(--heading); font-stretch: 125%; font-variation-settings: "wdth" 125; -webkit-text-stroke: 1.5px #e7e7e7; color: transparent; text-transform: uppercase; letter-spacing: 0; }
.ticker.word span::after { content: none; }
@media (max-width: 760px) { .ticker.word { height: 110px; } .ticker.word .track { padding-top: 27px; gap: 60px; } .ticker.word span { font-size: 56px; line-height: 56px; } }
@media (min-width: 1001px) {
  .pp-grid { padding-top: 69px; }
  .pp-frame { margin-top: 0; }
  .pkg-sec > .wrap > h2 { line-height: 37px; }
  .pkg-sec .options { margin-top: 27px; }
}
.pp-frame .panel p.eyebrow { margin-bottom: 10px; }
.pkg-sec > .wrap > .eyebrow { margin-bottom: 10px; }
.pkg-sec .option[data-brand="global"] p { max-width: 404px; }
.pkg-sec .option .ir-meter { margin-top: -7px; }
.panel.qa .faq details { border: 0; }
.panel.qa .faq summary { border: 1px solid #e7e7e7; }
.panel.qa .faq .answer { padding: 18px 20px 8px; }
.panel.qa .btns { margin-top: 20px; }
@media (min-width: 1001px) {
  .qa-video .wrap { padding-top: 50px; }
  .qa-media { left: 687px; top: 50px; }
  .qa-video .panel.qa { margin-top: 50px; }
  .shade-big { left: 152px; }
  .shade-car { left: 94px; }
}
@media (min-width: 1001px) { .qa-media { top: 0; } .qa-video .panel.qa { margin-top: 0; } }
.pkg-sec .pkg-head { text-align: center; }

/* ===== Paint protection film page, exact (Oct 19, 2026). Sections can carry their own live numbers ("tune"),
   read here as CSS variables with the window tinting page's numbers as the defaults. ===== */
@media (min-width: 1001px) {
  .hero-half[style*="--mh"] { min-height: var(--mh); }
  .hero-half[style*="--logoh"] .logo-row img { width: var(--logow); height: var(--logoh); }
  .photo-panel { padding: var(--pp-pad, 81px 0 6px); }
  .pp-grid { padding-top: var(--pp-ft, 69px); min-height: var(--pp-h, 756px); }
  .pp-photo { left: var(--pp-x, 1px); width: var(--pp-w, 499px); height: var(--pp-h, 756px); }
  .pp-frame { min-height: var(--pp-fh, 618px); border: var(--pp-fb, 1px solid #474747); }
  .pp-grid .pp-frame .panel { width: var(--pp-pw, 699px); border: var(--pp-pb, 0); padding: var(--pp-pp, 53px 45px 45px); }
  .pkg-sec[style*="--cols"] .pkg-row { grid-template-columns: var(--cols); }
  .box:nth-child(2) { margin-top: 0; }
  .box:nth-child(even) { margin-top: 20px; }
  .boxes[style*="--n:4"] { grid-template-columns: repeat(4, 285px); }
  .boxes[style*="--n:4"] .box { min-height: 654px; }
  .boxes { margin-bottom: var(--bm, 35px); }
}
.pp-grid .pp-frame .panel .btn { min-width: var(--pp-bw, 200px); }

/* package header with the brand logo above it, then the rows straight after the heading */
.pkg-sec > .wrap > .logo-row { justify-content: center; margin: 0 0 19px; }
.pkg-sec > .wrap > .logo-row img { width: 196px; height: 53px; object-fit: contain; }
.pkg-sec > .wrap > h2 + .pkg-rows { margin-top: 37px; }

/* the PPF package box: a label, the name, the starting price in a light box, the turnaround, the film, then what's
   included behind a bordered row with a round arrow */
.pkg-sec .pkg-row .package { padding: 25px; text-align: left; }
.pkg-sec .pkg-row .package h3 { margin: 10px 0 14px; }
.pkg-sec .pkg-row .package p { margin: 0; padding-top: 0; border-top: 0; }
.pkg-sec .pkg-row .package h5 + p { margin-top: 23px; padding-top: 19px; border-top: 1px solid rgba(231, 231, 231, 0.3); }
.pkg-sec .pkg-row .package > .eyebrow:first-child, .pkg-sec .pkg-row .package > p:first-child { display: inline-block; align-self: flex-start; background: #e7e7e7; color: #0b0404; font: 400 12px/24px var(--body); letter-spacing: 2.4px; text-transform: uppercase; padding: 2px 11px; margin: 0; border: 0; }
.pkg-sec .pkg-row .package h4 { display: inline-block; align-self: flex-start; background: #e7e7e7; color: #0b0404; padding: 10px 54px 10px 20px; margin: 0; font-size: 20px; line-height: 30px; }
.pkg-sec .pkg-row .package h3 + h4 { margin-top: -4px; }
.pkg-sec .pkg-row .package h4 + h5 { margin-top: 10px; }
.pkg-sec .pkg-row .package h5 .lbl { color: #ababab; }
.pkg-sec .pkg-row .package > h6 { border-left: 2px solid #e7e7e7; padding-left: 20px; margin: 12px 0 0; font: 800 16px/24px var(--heading); font-stretch: 112%; font-variation-settings: "wdth" 112; font-style: normal; text-transform: uppercase; }
.pkg-sec .pkg-row .package > .faq { align-self: stretch; max-width: none; margin: 20px 0 0; padding-top: 22px; border-top: 1px solid rgba(231, 231, 231, 0.3); }
.pkg-sec .pkg-row .package .faq details { border: 0; margin: 0; }
.pkg-sec .pkg-row .package .faq summary { border: 1px solid #e7e7e7; padding: 18px 29px 18px 20px; gap: 20px; }
.pkg-sec .pkg-row .package .faq summary h6 { font: 800 16px/24px var(--heading); font-stretch: 112%; font-variation-settings: "wdth" 112; font-style: normal; text-transform: uppercase; }
.pkg-sec .pkg-row .package .faq summary::after { width: 31px; height: 31px; border: 0; background: #e7e7e7 no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b0404' stroke-width='1.8'/%3E%3C/svg%3E"); }
.pkg-sec .pkg-row .package .faq .answer { padding: 18px 20px 0; }
.pkg-sec .pkg-row .package .faq .answer ul { padding-left: 40px; margin: 0; }
.pkg-sec .pkg-row .package .faq .answer li { font-weight: 300; color: #dcdcdc; margin: 0; }
.pkg-sec .pkg-row .package .faq .answer strong { color: #bc9b00; }
.pkg-sec .pkg-row .package .faq .answer p strong, .pkg-sec .pkg-row .package .faq .answer p em strong { color: #dcdcdc; }
.pkg-sec .pkg-row .package > .faq + .btns { margin-top: 30px; }

/* questions panels: their own width and padding where the live page differs */
.panel.qa { padding: var(--qapad, 33px 25px 25px); }
.qa-inset .panel.qa { width: var(--panelw, 747px); }
.pkg-sec .pkg-row .package > h6 { margin-top: 0; }
.pkg-sec .pkg-row .package h6 + p { margin-top: 20px; padding-top: 22px; border-top: 1px solid rgba(231, 231, 231, 0.3); }
.pkg-sec .pkg-row .package > p + .btns { margin-top: var(--pbm, 32px); }
.pkg-sec .pkg-row .package { padding: var(--pkpad, 25px); }
.pkg-sec .pkg-row .package h5:has(+ p) { margin-bottom: 0; }
.pp-frame .panel .btns { column-gap: var(--pp-bg, 40px); }
/* the stand-in heading font runs about 7% narrower than the agency's; a little spacing gives the live line breaks */
.panel.qa .faq summary h3 { letter-spacing: 0.9px; }
@media (min-width: 1001px) { .boxes[style*="--n:4"] .box h4 { margin: 0 2px 15px; } }
.panel.qa .faq summary h3 { letter-spacing: 0.6px; }
.pkg-sec .pkg-row .package h5:first-of-type:has(+ p) { margin-bottom: 0; }
.pkg-sec .pkg-rows > .pkg-row:first-child .package { padding-top: var(--pkpad1, var(--pkpad, 25px)); }
@media (min-width: 1001px) { .sec.pkg-sec { padding-bottom: 75px; } }

/* ===== Remote start page, exact (Oct 19, 2026) ===== */
/* package rows: a row can have its own height (the live product photos); the box's text centres in it */
.pkg-sec .pkg-row .package { justify-content: center; }
@media (min-width: 1001px) { .pkg-sec .pkg-photo { min-height: var(--rh, 0px); } }
.pkg-sec .pkg-row .package h4 + p { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(231, 231, 231, 0.3); }
.pkg-sec .pkg-row .package h4.plain { background: none; padding: 0; color: #fff; margin-top: 36px; }
.pkg-sec .pkg-row .package h4.plain + ul { margin: 0; padding-left: 28px; list-style: disc; }
.pkg-sec .pkg-row .package h4.plain + ul li { margin: 0; line-height: 28px; }
.pkg-sec .pkg-row .package ul + .btns { margin-top: 32px; }

/* the photo panel the other way round: the box on the left, the photo on the right */
@media (min-width: 1001px) {
  .photo-panel.flip .pp-photo { left: auto; right: var(--pp-x, 1px); }
  .photo-panel.flip .pp-frame { justify-content: flex-start; padding-right: 0; }
}
/* questions inside a photo panel: the same bordered rows as the questions boxes */
.pp-frame .panel .faq { align-self: stretch; max-width: none; margin: 6px 0 0; }
.pp-frame .panel .faq details { border: 0; margin: 0 0 10px; }
.pp-frame .panel .faq details:last-child { margin-bottom: 0; }
.pp-frame .panel .faq summary { border: 1px solid #e7e7e7; padding: 18px 29px 18px 20px; gap: 20px; }
.pp-frame .panel .faq summary h3 { font-size: 16px; line-height: 24px; letter-spacing: 0.6px; }
.pp-frame .panel .faq summary::after { width: 31px; height: 31px; border: 0; background: #e7e7e7 no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b0404' stroke-width='1.8'/%3E%3C/svg%3E"); }
.pp-frame .panel .faq .answer { padding: 18px 20px 8px; }
.pp-frame .panel .faq + .btns { margin-top: 20px; }

/* boxes: their own width, height and top padding where the live page differs */
@media (min-width: 1001px) {
  .boxes[style*="--n:4"] { grid-template-columns: repeat(4, var(--boxw, 285px)); }
  .boxes[style*="--n:4"] .box { min-height: var(--boxh, 654px); }
}
.box { padding-top: var(--boxpt, 30px); }
@media (min-width: 1001px) { .hero-half[style*="--hshift"] > .wrap { margin-top: var(--hshift); } }
.box { padding-left: var(--boxpx, 20px); padding-right: var(--boxpx, 20px); }
.pkg-sec .pkg-row .package h4.plain { margin-top: 20px; }
/* package names: the stand-in font runs narrower; this spacing gives the live line breaks */
.pkg-sec .pkg-row .package h3 { letter-spacing: 1.3px; }
.pkg-sec .pkg-row .package h3 { letter-spacing: 0.8px; }

/* ===== Tesla page, exact (Oct 19, 2026) ===== */
/* film cards: their own top padding, logo size and gap below where the live page differs */
.pkg-sec .option { padding-top: var(--optpt, 35px); }
.pkg-sec .option:not(:has(.logo-row)) { padding-top: calc(var(--optpt, 35px) + 10px); }
.pkg-sec .option .logo-row { height: var(--logorow, 123px); margin-bottom: var(--logomb, 15px); }
.pkg-sec .option[data-brand="xpel"] .logo-row img { width: var(--xpelw, 258px); }
.pkg-sec .options { margin-bottom: var(--optmb, 59px); }
/* the model cards: photo, name, buttons; three across then two (the Tesla page) */
.models { display: grid; grid-template-columns: repeat(6, 1fr); gap: 25px; margin-top: 2px; }
.models .model { grid-column: span 2; background: #1f1f1f; border: 1px solid #e7e7e7; padding: 10px 10px 21px; display: flex; flex-direction: column; align-items: center; }
.models .model:nth-child(n + 4) { grid-column: span 3; }
.model-photo { position: relative; overflow: hidden; align-self: stretch; height: 342px; }
.models .model:nth-child(n + 4) .model-photo { height: 354px; }
.models .model h3 { font-size: 28px; line-height: 42px; margin: 27px 0 12px; letter-spacing: 0.8px; }
.models .model .btns { flex-direction: column; align-items: center; gap: 19px; margin: 0; }
@media (max-width: 1000px) {
  .models { grid-template-columns: 1fr; gap: 18px; }
  .models .model, .models .model:nth-child(n + 4) { grid-column: auto; }
  .model-photo, .models .model:nth-child(n + 4) .model-photo { height: auto; aspect-ratio: 4 / 3; }
  .models .model h3 { font-size: 22px; line-height: 30px; margin: 16px 0 10px; }
}
/* a line straight after the included-work row (the Tesla charging note) */
.pkg-sec .pkg-row .package > .faq + p { margin-top: 14px; }
/* boxes with the live dark fade instead of flat grey */
.box { background: var(--boxbg, #1f1f1f); }
.pkg-sec .pkg-row .package { justify-content: var(--pkjust, center); }
.models { row-gap: 30px; }
.pkg-sec .pkg-rows > .pkg-row:first-child .package { padding: var(--pkpad1, var(--pkpad, 25px)); }
/* panels: their own padding, width (a centred panel too) and logo size where the live page differs */
.panel { padding: var(--panelpad, 67px 60px 61px); }
.sec[style*="--panelw"] .panel.center { max-width: var(--panelw); width: 100%; }
.sec[style*="--logomw"] .logo-mark { width: var(--logomw); }
/* the live panels' shade: black at 65% with a white edge (some pages set their own) */
.panel { background: var(--panelbg, rgba(0, 0, 0, 0.65)); border-color: #fff; }
.panel.qa { background: var(--panelbg, rgba(0, 0, 0, 0.6)); }
.pp-frame .panel { background: #1f1f1f; }

/* ===== Contact page, exact (Oct 19, 2026) ===== */
/* the hero's second paragraph carries the same side line as the first */
.hero-half .lead:has(+ p) { margin-bottom: 28px; }
.hero-half .lead + p { border-left: 2px solid #e7e7e7; padding-left: 20px; margin: 0 0 22px; max-width: 540px; }

/* the quote form, live style: hidden labels with the words in the boxes, "Vehicle Details" as its own heading */
.quote-form { background: none; border: 0; padding: 0; }
.quote-form fieldset { margin: 0; }
.quote-form legend, .quote-form .flabel { display: block; font: 700 16px/32px var(--body); color: #fff; margin: 0 0 5px; padding: 0; }
.quote-form .checks { display: grid; gap: 9px; }
.quote-form .checks label { display: flex; align-items: center; gap: 10px; margin: 0; font: italic 300 13px/20px var(--body); color: #fff; }
.quote-form .checks input { width: 16px; height: 16px; margin: 0 0 0 4px; accent-color: #e7e7e7; }
.quote-form .row { gap: 27px; margin: 17px 0 0; }
.quote-form .row + .row { margin-top: 16px; }
.quote-form .row3 { gap: 26px; margin: 13px 0 0; }
.quote-form input[type="text"], .quote-form input[type="email"], .quote-form input[type="tel"], .quote-form textarea { height: 40px; margin: 0; background: transparent; border: 1px solid #e7e7e7; padding: 8px 12px; font: 400 14px/22px var(--body); color: #fff; }
.quote-form textarea { height: 80px; min-height: 80px; margin-top: 16px; display: block; width: 100%; }
.quote-form ::placeholder { color: rgba(255, 255, 255, 0.75); }
.quote-form .flabel { margin: 13px 0 0; }
.quote-form .fnote { font: italic 300 13px/26px var(--body); color: #fff; margin: 0; }
.quote-form textarea + fieldset { margin-top: 13px; }
.quote-form .btns { margin-top: 30px; }
.quote-form .btns .btn { width: calc(100% - 20px); min-height: 55px; margin-left: 5px; }
.quote-form .btns .btn:not(.dark) { background: #fff; border-color: #e7e7e7; }

@media (min-width: 1001px) {
  .contact-photo { padding: 100px 0; }
  .contact-photo .cp-top { grid-template-columns: 539px 539px; gap: 0; padding: 60px; background: #000; border: 1px solid #333; }
  .contact-photo .cp-photo { min-height: 925px; }
  .contact-photo .cp-form { background: #1f1f1f; padding: 15px 0 30px 30px; }
  .contact-photo .cp-form .eyebrow { margin: 0 0 10px; }
  .contact-photo .cp-form h2 { max-width: 460px; margin: 0 0 22px; }
  .contact-photo .cp-form .quote-form { margin: 0; padding: 0 23px; }
  .contact-photo .cp-bottom { grid-template-columns: 462px 678px; gap: 0; margin-top: 50px; padding: 50px 0 40px 60px; background: #1f1f1f; align-items: start; }
  .contact-photo .cp-map { margin-top: 61px; border: 1px solid #474747; padding: 20px; }
  .contact-photo .cp-map .map { display: block; width: 100%; height: 429px; border: 0; }
}
.contact-photo .cp-bottom .contact-info h4 { font-size: 20px; line-height: 30px; margin: 30px 0 12px; font-style: normal; }
.contact-photo .cp-bottom .contact-info h4:first-child { margin-top: 0; }
.contact-photo .cp-bottom .contact-info p { margin: 0 0 12px; }
.contact-photo .cp-bottom .contact-info .social { margin: 0 0 16px !important; gap: 4px; }
.contact-photo .cp-faq .eyebrow { margin-bottom: 10px; }
.contact-photo .cp-faq h2 { margin: 0 0 18px; }
.contact-photo .cp-faq .faq { margin: 0; max-width: none; }
.contact-photo .cp-faq .faq details { border: 0; margin: 0 0 10px; }
.contact-photo .cp-faq .faq summary { border: 1px solid #e7e7e7; padding: 18px 29px 18px 20px; gap: 20px; }
.contact-photo .cp-faq .faq summary h3 { font-size: 16px; line-height: 24px; letter-spacing: 0.6px; }
.contact-photo .cp-faq .faq summary::after { width: 31px; height: 31px; border: 0; background: #e7e7e7 no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b0404' stroke-width='1.8'/%3E%3C/svg%3E"); }
.contact-photo .cp-faq .faq .answer { padding: 18px 20px 8px; }
@media (max-width: 1000px) {
  .contact-photo .cp-form { background: #1f1f1f; padding: 22px 16px 26px; }
  .contact-photo .cp-bottom { background: #1f1f1f; padding: 26px 16px; gap: 30px; }
  .contact-photo .cp-map { margin-top: 30px; border: 1px solid #474747; padding: 10px; }
  .contact-photo .cp-map .map { width: 100%; height: 320px; border: 0; }
}
.contact-photo .cp-bottom .contact-info h4 { margin-top: 0; }
.contact-photo .cp-bottom .contact-info p { max-width: 400px; }
.contact-photo .cp-bottom .contact-info .social { margin: 20px 0 13px !important; }
.contact-photo .cp-bottom .contact-info .social a { width: 36px; height: 36px; }
.contact-photo .cp-faq h2 { max-width: 530px; margin-bottom: 12px; }
@media (min-width: 1001px) { .contact-photo .cp-map { padding: 30px 20px; } }
@media (min-width: 1001px) { .contact-photo .cp-bottom { padding-bottom: 27px; } }
/* the live social icons are square boxes */
.social a { border-radius: 0; }
.quote-form ::placeholder { color: #8a8a8a; font-style: italic; }
.quote-form .checks label { gap: 4px; }
.quote-form .checks input { width: 13px; height: 13px; margin: 0 0 0 6px; accent-color: auto; }
.quote-form .btns .btn { font-size: 18px; }
@media (min-width: 1001px) { .contact-photo .quote-form .btns .btn { width: 489px; margin-left: 2px; } }

/* ===== Reviews page, exact (Oct 19, 2026): the live page's reviews panel, as our own plain text ===== */
.hero-half[style*="--leadw"] .lead { max-width: var(--leadw); }
.reviews-panel { padding: 110px 0; }
.rv-box { position: relative; background: #111; border-radius: 24px; padding: 40px 40px 66px; text-align: left; }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #222; border-radius: 12px; padding: 24px; min-height: 110px; }
.rv-title { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.rv-src { grid-row: span 2; font: 700 24px/32px var(--body); letter-spacing: -0.02em; color: #fff; width: 76px; }
.rv-title strong { font: 700 20px/26px var(--body); color: #fff; }
.rv-rating { display: flex; align-items: center; gap: 8px; }
.rv-rating b { font: 700 22px/28px var(--body); color: #fff; }
.rv-rating .review-stars { color: #fbbc04; font-size: 22px; letter-spacing: 0; line-height: 22px; }
.rv-count { font: 300 12px/14px var(--body); color: rgba(255, 255, 255, 0.5); }
.rv-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 21px; border-radius: 24px; background: #fff; color: #111; font: 700 14px/18px var(--body); text-decoration: none; white-space: nowrap; }
.rv-btn:hover, .rv-btn:focus-visible { background: #e7e7e7; }
.rv-track { display: grid; grid-auto-flow: column; grid-auto-columns: 360px; gap: 20px; margin-top: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rv-track::-webkit-scrollbar { display: none; }
.reviews-panel .review { scroll-snap-align: start; margin: 0; background: #222; border-radius: 8px; padding: 25px; min-height: 222px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; border: 0; }
.rv-who { display: flex; align-items: center; gap: 12px; margin: 0; }
.rv-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #4a4f5a; color: #fff; font: 600 18px/1 var(--body); }
.rv-name { display: block; font: 600 15px/18px var(--body); color: #fff; }
.rv-who time { display: block; font: 300 12px/16px var(--body); color: rgba(255, 255, 255, 0.5); margin-top: 4px; }
.reviews-panel .review-stars { color: #fbbc04; font-size: 18px; line-height: 18px; letter-spacing: 0; margin: 16px 0 6px; }
.reviews-panel blockquote { margin: 0; font: 300 16px/23px var(--body); color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.reviews-panel .review.open blockquote { -webkit-line-clamp: unset; display: block; }
.rv-more { all: unset; cursor: pointer; font: 300 16px/23px var(--body); color: #fff; opacity: 0.7; }
.rv-more:hover, .rv-more:focus-visible { opacity: 1; text-decoration: underline; }
.rv-nav { position: absolute; left: 40px; right: 40px; bottom: 18px; display: flex; justify-content: center; gap: 12px; }
.rv-nav button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; color: #fff; font: 400 20px/1 var(--body); cursor: pointer; }
.rv-nav button:hover, .rv-nav button:focus-visible { border-color: #fff; }
@media (max-width: 760px) {
  .reviews-panel { padding: 40px 0; }
  .rv-box { padding: 16px 16px 60px; border-radius: 16px; }
  .rv-head { flex-wrap: wrap; padding: 16px; }
  .rv-track { grid-auto-columns: 85%; }
}
.rv-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px; }
.rv-src { width: auto; grid-row: auto; font-size: 24px; line-height: 32px; }
.rv-title strong { line-height: 32px; }
.rv-rating { flex-basis: 100%; }
.rv-rating .review-stars { font-size: 25px; line-height: 28px; }
.rv-head { min-height: 0; padding: 24px; }
.rv-title { align-items: center; }
.rv-rating { height: 28px; line-height: 28px; }
.rv-rating .review-stars { line-height: 1; display: inline-block; }

/* ===== Blog index, exact (Oct 19, 2026): search box, then white post cards three across ===== */
.blog-search { background: #000; padding: 150px 0 40px; }
.blog-search .wrap { display: flex; justify-content: center; }
.blog-search input { width: 420px; max-width: 100%; height: 55px; border-radius: 25px; border: 1px solid #939393; background: transparent; color: #fff; padding: 0 24px; font: 400 15px/1 var(--body); }
.blog-search input::placeholder { color: #939393; }
.blog-search input:focus { outline: 2px solid #e7e7e7; outline-offset: 2px; }
.post-list-sec { background: #000; padding: 60px 0 100px; }
.post-list { gap: 20px; }
.post-list article { background: #fff; color: #000; border: 0; display: flex; flex-direction: column; min-height: 462px; }
.post-list article[hidden] { display: none; }
.post-list .pl-img img { width: 100%; height: 190px; aspect-ratio: auto; object-fit: cover; }
.post-list .pl-body { display: flex; flex-direction: column; flex: 1; padding: 15px; }
.post-list .pl-body h3 { padding: 0; margin: 0; font: italic 900 18px/27px var(--heading); font-stretch: 125%; font-variation-settings: "wdth" 125; letter-spacing: -0.02em; text-transform: uppercase; color: #000; }
.post-list .pl-body h3 a { color: #000; text-decoration: none; }
.post-list .pl-body h3 a:hover { text-decoration: underline; }
.post-list .pl-body time { display: block; font: 300 13px/26px var(--body); color: #939393; margin-top: 14px; }
.post-list .pl-body p { font: 300 15px/21px var(--body); color: #000; margin: 12px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-list .pl-more { margin-top: auto; padding-top: 14px; font: 300 14px/28px var(--body); color: #000; text-decoration: none; }
.post-list .pl-more:hover { text-decoration: underline; }
.pl-none { text-align: center; margin-top: 30px; }
@media (min-width: 1001px) {
  .post-list-sec .wrap { max-width: none; padding: 0 30px; }
  .post-list { grid-template-columns: repeat(3, 393px); justify-content: space-between; }
}
@media (max-width: 760px) { .blog-search { padding: 40px 0 10px; } .post-list-sec { padding: 30px 0 60px; } }
.post-list .pl-body h3 { letter-spacing: 0.5px; }

/* ===== Blog posts, exact (Oct 19, 2026) ===== */
/* title and date centred over the photo, 180px above and below */
.post-hero { min-height: 0; display: block; padding: 180px 0 180px; }
.post-hero h1 { max-width: 860px; margin: 0 auto 15px; }
.post-hero .byline { font: 300 16px/32px var(--body); color: #fff; margin: 0; }
/* the article on a 1180 column: 14px text on 28px lines, 35px between paragraphs */
.page-post .post-hero + .sec, .page-post main > .sec:has(> .wrap > .article) { padding: 40px 0 44px; }
.page-post .article { max-width: 1180px; font-size: 14px; line-height: 28px; }
.page-post .article p { margin: 0 0 35px; }
.page-post .article h2 { font-size: 32px; line-height: 48px; margin: 0 0 32px; }
.page-post .article h3 { font-size: 28px; line-height: 42px; margin: 0 0 29px; }
.page-post .article > :last-child { margin-bottom: 0; }
.post-nav { max-width: 1180px; margin: 64px auto 0; display: flex; justify-content: space-between; font: 300 14px/28px var(--body); }
.post-nav a { color: #fff; text-decoration: none; }
.post-nav a:hover { text-decoration: underline; }
/* share buttons: five round brand-coloured buttons, centred */
.post-share { padding: 15px 0; }
.post-share .wrap { display: flex; justify-content: center; gap: 17px; }
.post-share a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.post-share svg { width: 18px; height: 18px; fill: currentColor; }
.post-share .sh-fb { background: #1877f2; }
.post-share .sh-x { background: #0f1419; }
.post-share .sh-in { background: #0079b4; }
.post-share .sh-wa { background: #01e675; }
.post-share .sh-mail { background: #707070; }
/* the other posts under a post: 380 wide cards, title and summary only */
.post-list-sec.related { background: transparent; padding: 40px 0 60px; }
.related .post-list article { min-height: 0; border-radius: 4px; overflow: hidden; }
.related .post-list .pl-body time, .related .post-list .pl-more { display: none; }
.related .post-list .pl-body p { color: #747474; margin-top: 15px; }
@media (min-width: 1001px) {
  .post-list-sec.related .wrap { max-width: none; padding: 0 50px; }
  .related .post-list { grid-template-columns: repeat(3, 380px); }
}
@media (max-width: 760px) { .post-hero { padding: 110px 0 70px; } .page-post .article p { margin-bottom: 24px; } }
/* a post can carry the live spacing of its own copy (the older posts sit their paragraphs close together) */
.page-post .article p { margin-bottom: var(--pgap, 35px); }
.page-post .article h2 { margin-bottom: var(--h2mb, 32px); }
.page-post .article img { margin: var(--imgm, 24px) 0; }
.page-post .article > h3:first-child { margin: 60px 0 0; }
.page-post .article img.inline-photo { max-height: 620px; object-fit: cover; }
/* simple centred pages (the thank-you page): stacked buttons and tight lines where the live page has them */
.sec[style*="--btndir"] .btns { flex-direction: var(--btndir); align-items: center; gap: 20px; margin-top: var(--btnmt, 26px); }
.sec[style*="--btnw"] .btn { min-width: var(--btnw); min-height: 49px; }
.sec[style*="--pmb"] p { margin-bottom: var(--pmb); }

/* ===== Footer, exact (Oct 19, 2026): dark checkered half, white half, dark bar ===== */
.site-footer { background: none; padding: 0; font-size: 14px; border-top: 1px solid #e7e7e7; }
.ft-split { display: grid; grid-template-columns: 1fr 1fr; }
.ft-left { position: relative; overflow: hidden; background: #0b0404; color: #fff; }
.ft-left::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-conic-gradient(rgba(255, 255, 255, 0.05) 0 25%, transparent 0 50%) 0 0 / 120px 120px; transform: perspective(900px) rotateY(-28deg) rotateZ(-12deg) scale(1.6); transform-origin: 20% 100%; mask-image: linear-gradient(to top right, #000 10%, transparent 70%); -webkit-mask-image: linear-gradient(to top right, #000 10%, transparent 70%); }
.ft-in { position: relative; z-index: 1; padding: 60px 60px 69px; }
.ft-logo { width: 256px; height: auto; margin: 0 0 14px; }
.ft-in p { color: #fff; max-width: 520px; margin: 0 0 34px; }
.ft-in .map { display: block; width: 520px; max-width: 100%; height: 280px; border: 0; }
.ft-right { background: #fff; color: #0b0404; }
.ft-cols { display: grid; grid-template-columns: 201px 202px 1fr; margin: 65px 25px 0; padding-top: 48px; border-top: 1px solid #e3e3e3; }
.ft-right h2 { font: 800 16px/24px var(--heading); font-stretch: 112%; font-variation-settings: "wdth" 112; font-style: normal; text-transform: uppercase; letter-spacing: -0.02em; color: #000; margin: 0 0 14px; max-width: 170px; }
.ft-right ul { list-style: none; padding: 0; margin: 0; }
.ft-right li { margin: 0 0 15px; }
.ft-right li a { font: 300 14px/28px var(--body); letter-spacing: 0.42px; color: #000; text-decoration: none; }
.ft-right li a:hover { text-decoration: underline; }
.ft-right p { font: 400 14px/28px var(--body); color: #0b0404; margin: 0 0 12px; max-width: 185px; }
.ft-right p a { color: #0b0404; text-decoration: none; }
.ft-right p strong { font-weight: 700; }
.ft-right .ft-hours { margin-top: 18px; }
.ft-right .social { margin: 0 0 39px; gap: 4px; }
.ft-right .social a { width: 42px; height: 42px; border: 1px solid #0b0404; border-radius: 0; color: #0b0404; }
.ft-right .social svg { fill: #0b0404; }
.ft-right .btns { flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; }
.ft-right .btn { min-width: 187px; min-height: 50px; }
.ft-right .btn:not(.dark) { border-color: #0b0404; }
.ft-right .btn::after { border-color: #0b0404; }
.ft-bar { background: linear-gradient(rgba(43, 43, 43, 0.8), #000); padding: 24px 0 26px; color: #fff; font-size: 12px; }
.ft-bar .areas { margin: 0 0 14px; text-align: center; }
.ft-bar .areas ul { justify-content: center; }
.ft-bar .legal { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; font-size: 12px; }
.ft-bar .legal a { color: #fff; text-decoration: none; }
.ft-bar .legal a:hover { text-decoration: underline; }
@media (max-width: 1000px) {
  .ft-split { grid-template-columns: 1fr; }
  .ft-in { padding: 40px 16px; }
  .ft-in .map { width: 100%; height: 240px; }
  .ft-cols { grid-template-columns: 1fr 1fr; gap: 26px 16px; margin: 0; padding: 36px 16px 40px; border-top: 0; }
  .ft-cols > div:last-child { grid-column: 1 / -1; }
  .ft-right p { max-width: none; }
  .ft-right h2 { max-width: none; }
}
/* header, exact (Oct 19, 2026): 65% black with a faint line under it; the menu in two upright rows low in the bar;
   the estimate button on two lines */
@media (min-width: 1101px) {
  .site-header { background: rgba(0, 0, 0, 0.65); border-bottom: 1px solid rgba(255, 255, 255, 0.33); }
  .site-header .bar { min-height: 121px; }
  .site-header .logo img { width: 200px; }
  .nav { align-self: flex-end; padding-bottom: 7px; }
  .nav a, .nav button { font-style: normal; letter-spacing: 1.2px; line-height: 22px; padding: 4px 0; }
  .nav > ul > li + li::before { padding: 0 9px; font-size: 12px; }
  .site-header .cta { align-self: center; margin-top: 13px; }
  .site-header .cta .btn { min-width: 176px; max-width: 176px; min-height: 52px; white-space: normal; line-height: 14px; font-size: 12px; text-align: center; }
}
.site-footer .ft-in .map { height: 280px; }
@media (min-width: 1101px) { .nav { padding-bottom: 0; margin-left: -28px; } }
/* the live header blurs whatever scrolls under it */
@media (min-width: 1101px) { .site-header { -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); } }
/* maps in the light style, like live */
iframe.map { color-scheme: light; }
.ft-cols { border-bottom: 1px solid #e3e3e3; padding-bottom: 34px; align-self: start; }
@media (max-width: 760px) { .post-nav a { display: inline-block; padding: 8px 0; min-height: 44px; } }

/* ===== Phones (Oct 19, 2026): the measured desktop numbers stay on desktop; phones get their own spacing ===== */
@media (min-width: 1001px) {
  .sec[style*="--pt:"] { padding-top: var(--pt); }
  .sec[style*="--pb:"] { padding-bottom: var(--pb); }
}
@media (max-width: 1000px) {
  .panel, .sec[style*="--panelpad"] .panel { padding: 26px 18px 28px; }
  .panel.qa { padding: 24px 14px 22px; }
  .sec[style*="--panelr"] .panel.right { margin-right: 0; }
  .panel.left, .panel.right, .qa-inset .panel.qa, .qa-video .panel.qa, .sec[style*="--panelw"] .panel { max-width: none; width: auto; margin-left: 0; margin-right: 0; }
  .sec.has-bg:has(> .wrap > .panel) { padding-top: 140px; padding-bottom: 40px; }
  .sec.has-bg.flush-bottom:has(> .wrap > .panel) { padding-bottom: 0; }
  .panel.qa .faq summary { padding: 14px 14px 14px 14px; }
  .panel.qa .faq summary h3, .pp-frame .panel .faq summary h3, .contact-photo .cp-faq .faq summary h3 { font-size: 14px; line-height: 20px; letter-spacing: 0.2px; }
  .panel ul { padding-left: 20px; }
  .box, .boxes[style*="--n:4"] .box { min-height: 0; margin-top: 0; }
  .box:nth-child(even) { margin-top: 0; }
}
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1000px) {
  .pkg-sec .options { grid-template-columns: minmax(0, 1fr); }
  .pkg-sec .option { min-width: 0; padding-left: 16px; padding-right: 16px; }
  .ir-meter { width: 100%; }
  .pkg-sec .option[data-brand="xpel"] .logo-row img, .pkg-sec .option[data-brand="global"] .logo-row img { max-width: 100%; height: auto; max-height: 100px; width: auto; }
}

/* ===== Each Tesla model's own prices on its card (Oct 19, 2026; Louie: "realistically we can show exact tesla
   pricing"): a small table of PPF by years, then the window tint, every figure from the CRM's engines ===== */
.model-prices { align-self: stretch; margin: 0 10px 16px; text-align: left; }
.mp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(231, 231, 231, 0.25); font: 800 13px/20px var(--heading); font-stretch: 112%; font-variation-settings: "wdth" 112; text-transform: uppercase; color: #fff; }
.mp-head span { font: 300 12px/20px var(--body); text-transform: none; color: #bdbdbd; }
.mp-ppf { width: 100%; border-collapse: collapse; margin: 0 0 14px; font: 400 13px/22px var(--body); color: #e7e7e7; }
.mp-ppf th, .mp-ppf td { padding: 3px 4px; text-align: right; white-space: nowrap; }
.mp-ppf thead th { font: 300 11px/16px var(--body); color: #bdbdbd; vertical-align: bottom; white-space: normal; }
.mp-ppf th:first-child { text-align: left; }
.mp-ppf tbody th { font-weight: 600; color: #fff; }
.mp-ppf tbody tr + tr th, .mp-ppf tbody tr + tr td { border-top: 1px solid rgba(231, 231, 231, 0.12); }
.mp-tint { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font: 400 13px/22px var(--body); color: #e7e7e7; }
.mp-tint b { font-weight: 600; color: #fff; margin-left: 4px; }
@media (max-width: 760px) { .model-prices { margin: 0 4px 14px; } .mp-ppf { font-size: 12px; } }
.models .model .btns { margin-top: auto; }
.mp-ppf sup { font-size: 10px; margin-left: 1px; color: #bdbdbd; }
.mp-note { font: 300 11px/16px var(--body); color: #bdbdbd; margin: -8px 0 12px; }
.mp-note + .mp-note { margin-top: -10px; }
/* A model with its own colored PPF installation price (the Cybertruck, Oct 19, 2026): the price, what it includes in
   the engine's words, and a link to the model's own page */
.mp-color { margin: 0 0 14px; font: 400 13px/20px var(--body); color: #e7e7e7; }
.mp-color b { display: block; font: 600 20px/28px var(--body); color: #fff; }
.mp-color + .mp-note { margin-top: -6px; }
.mp-more { margin: -2px 0 14px; font: 600 13px/20px var(--body); }
.mp-more a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* What the shop does next to a typical job, one row per difference (the Cybertruck colored PPF page, Oct 19, 2026):
   a table on a computer, one card per row on a phone */
.compare-wrap { max-width: 980px; margin: 0 auto 40px; }
.compare { width: 100%; border-collapse: collapse; text-align: left; font: 400 15px/24px var(--body); color: #bdbdbd; }
.compare thead th { padding: 14px 20px; font: 800 15px/22px var(--heading); font-stretch: 112%; font-variation-settings: "wdth" 112; text-transform: uppercase; color: #bdbdbd; }
.compare thead th.us { background: #e7e7e7; color: #000; }
.compare tbody th { padding: 18px 20px 18px 0; width: 20%; font: 800 14px/22px var(--heading); font-stretch: 112%; font-variation-settings: "wdth" 112; text-transform: uppercase; color: #fff; vertical-align: top; }
.compare tbody td { padding: 18px 20px; width: 40%; vertical-align: top; border-top: 1px solid #474747; }
.compare tbody td.us { background: #1f1f1f; color: #fff; border-top-color: #333; }
.compare tbody tr:first-child td { border-top: 0; }
.compare tbody tr.pending th, .compare tbody tr.pending td { color: #8d8d8d; font-style: italic; }
@media (max-width: 760px) {
  .compare-wrap { margin-bottom: 28px; }
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare tbody th, .compare tbody td { display: block; width: auto; }
  .compare tbody tr { margin: 0 0 14px; border: 1px solid #474747; }
  .compare tbody th { padding: 12px 16px; background: #0b0404; border-bottom: 1px solid #474747; }
  .compare tbody td { padding: 12px 16px; border-top: 0; }
  .compare tbody td::before { content: attr(data-col); display: block; margin-bottom: 2px; font: 800 11px/16px var(--heading); text-transform: uppercase; letter-spacing: 0.5px; color: #8d8d8d; }
  .compare tbody td.us::before { color: #bdbdbd; }
}
/* Photo tiles with a heading each (the Cybertruck colored PPF page, Oct 19, 2026): tall close-ups of the hard spots,
   or wide shots of finished trucks; a clip plays silently on a loop */
.spots { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 21px; margin: 10px 0 40px; }
.spot { flex: 0 1 calc((100% - 42px) / 3); max-width: 386px; text-align: left; }
.spot-media { aspect-ratio: 4 / 5; overflow: hidden; background: #1f1f1f; border: 1px solid #474747; }
.spots-sec.wide .spot-media { aspect-ratio: 16 / 9; }
.spot-media img, .spot-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.spot h3 { margin: 16px 0 8px; font-size: 18px; line-height: 26px; }
@media (min-width: 761px) { .spots-sec.wide .spot { flex-basis: calc((100% - 21px) / 2); max-width: 590px; } }
.spots-sec.wide .spot h3 { text-align: center; margin-bottom: 0; }
.spot p { margin: 0; font: 400 14px/24px var(--body); color: #e7e7e7; }
.spot-wait { display: flex; align-items: center; justify-content: center; height: 100%; padding: 20px; text-align: center; border: 1px dashed #8d8d8d; font: 600 13px/20px var(--body); text-transform: uppercase; letter-spacing: 1px; }
@media (max-width: 1000px) { .spot { flex-basis: calc((100% - 21px) / 2); } }
@media (max-width: 760px) {
  .spots { gap: 28px; margin-bottom: 28px; }
  .spot { flex-basis: 100%; max-width: none; }
  .spots-sec:not(.wide) .spot-media { aspect-ratio: 1 / 1; }
  .spots-sec.wide .spots { gap: 14px; }
  .spots-sec.wide .spot { flex-basis: calc((100% - 14px) / 2); }
  .spots-sec.wide .spot h3 { font-size: 14px; line-height: 20px; margin-top: 8px; }
}

/* ======================================================================================================
   Wide screens (Oct 19, 2026; Louie at his ~2000px monitor: "significatnly differnt"). The live site's frame grows
   with the screen: content is min(1600px, screen - 80px) wide, centered, so at 1280 nothing moves. Its header: the
   logo a sixth of the frame, the estimate button about a sixth (16.75% - 25px), logo, menu and button on fixed top
   lines (7, 54, 42), the bar as tall as the logo needs. Measured with tools/compare/measure.mjs --width=1600/2000.
   ====================================================================================================== */
@media (min-width: 1101px) {
  :root { --max: 1680px; }
  .site-header .bar { align-items: flex-start; max-width: none; padding: 7px max(40px, calc((100% - 1600px) / 2)); }
  .site-header .logo { flex: 0 0 16.667%; }
  .site-header .logo img { display: block; width: 100%; height: auto; }
  .nav { align-self: flex-start; margin-top: 47px; }
  .site-header .cta { flex: 0 0 calc(16.75% - 25px); align-self: flex-start; margin: 35px 11px 0 0; }
  .site-header .cta .btn { width: 100%; min-width: 0; max-width: none; }
}
/* the home hero: the slider a fixed 549 tall and 41.66% + 82px wide; the text from 41.66% + 130px to 50px short of
   the right edge (the headline 42px, three lines at 2000), the lead at most 690 wide; the hero as tall as its text
   plus 220 below the buttons (981 at 1280, 857 at 1600, 809 at 2000) */
@media (min-width: 1101px) {
  .hero.hero-video { height: auto; }
  .hero.hero-video .media { width: calc(41.66% + 82px); }
  .hero.hero-video .hero-text { position: relative; left: auto; top: auto; width: calc(58.34% - 189px); margin-left: calc(41.66% + 130px); padding: 267px 0 220px; }
  .hero.hero-video h1 { max-width: none; }
  .hero.hero-video .lead { max-width: 690px; }
}
/* the photo tiles under "Expert installations" run the full width less 30px a side, five across with 10px between
   (236 wide at 1280, 300 at 1600, 380 at 2000), each label the tile's width */
@media (min-width: 1101px) {
  .cards-sec > .wrap { max-width: none; padding: 0 30px; }
  .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cards .card-label { width: calc(100% - 3px); }
}
/* blog: the posts grid runs min(1600px, screen - 60px), three across with 20px between (393 wide at 1280, 520 at
   2000); a post's article, its links and the three other posts run min(1600px, screen) less 50px a side (1180 at
   1280, 1500 at 2000) */
@media (min-width: 1001px) {
  .post-list-sec .wrap { max-width: 1660px; }
  .post-list { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
  .post-list-sec.related .wrap { max-width: 1600px; }
  .related .post-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-post main > .sec:has(> .wrap > .article) > .wrap { max-width: 1600px; padding: 0 50px; }
  .page-post .article, .post-nav { max-width: none; }
}

/* ======================================================================================================
   Wide screens, service pages (Oct 19, 2026). Read off the live page at 1280 and 2000 (tools/compare/chain.mjs,
   rows.js, livewide.mjs): the live columns are twelfths of the frame, min(1600px, screen - 80px), so each box below
   is a share of the frame instead of a 1280 pixel count. Only above 1280, so the 1280 pass stays exactly as it was;
   each share equals the 1280 number at 1280.
   ====================================================================================================== */
@media (min-width: 1281px) {
  /* hero: the text half is half the screen, 200 above and below, 60 in from the left, 40 from the middle; as tall
     as its words (947 at 1280, 823 at 2000) */
  .hero.hero-half { min-height: 0; align-items: flex-start; }
  .hero-half > .wrap { width: 50%; padding: var(--hpt, 208px) 40px 200px 60px; margin: 0; }
  .hero-half .hero-text, .hero-half .lead { max-width: none; }
  /* photo beside the framed band: the photo five twelfths of the frame, the grey box seven twelfths tucked 50 under
     its edge, 50 short of the frame's right side; the band as tall as the box, the photo 69 past it above and below */
  .pp-grid { min-height: 0; padding-bottom: var(--pp-ft, 69px); }
  .pp-photo { top: 0; bottom: 0; height: auto; width: calc((100% - 2px) * 5 / 12); }
  .pp-frame { min-height: 0; }
  .pp-grid .pp-frame .panel { width: calc((100% + 50px) * 7 / 12); }
  /* a row of photos: wider photos, the same height as at 1280 */
  /* (tune "full": the row runs the whole screen less 40 a side, as the live PPF page's) */
  .photo-row[style*="--full"] > .wrap { max-width: none; }
  .photo-row .gallery img { aspect-ratio: auto; height: calc((1178px - (var(--n) - 1) * 10px) / var(--n) / (var(--ratio))); }
  /* the tint chooser: the shade tabs and the car run 85% of the box, at most 1161 wide, centred */
  .shade-tabs { max-width: min(1161px, 85.35%); margin: 0 auto; }
  .shade-tabs button { flex: 1 1 0; width: auto; }
  .shade-car { width: min(1161px, 85.35%); left: calc((100% - min(1161px, 85.35%)) / 2); }
  .shade-big { left: calc((100% - min(1161px, 85.35%)) / 2 + 58px); }
  /* package jump tabs: four equal tabs across the frame less 20 a side */
  .pkg-sec .jump { padding: 0 20px; }
  .pkg-sec[style*="--cols-wide"] .pkg-row { grid-template-columns: var(--cols-wide); }
  .pkg-sec .jump .btn { flex: 1 1 0; min-width: 0; }
  /* care tips: this row sits 40 in from the right of the screen; the box seven twelfths of its frame, the clip five
     twelfths, tucked 30 under the box, 50 above it and 60 below */
  .qa-video > .wrap { max-width: 1720px; padding: 50px 80px 60px 40px; min-height: 0; }
  .qa-video .panel.qa { width: calc(100% * 7 / 12); }
  .qa-media { left: calc(40px + (100% - 120px) * 7 / 12 - 30px); width: calc((100% - 120px) * 5 / 12); top: 0; bottom: 0; height: auto; }
  /* boxes: equal shares of the frame less 40 a side, 20 between; as tall as the tallest, the even ones 20 lower and
     10 taller */
  .boxes { --bw: var(--boxw, 360px); }
  .boxes[style*="--n:4"] { --bw: var(--boxw, 285px); }
  .boxes[style] { grid-template-columns: repeat(var(--n), calc((100% - (1200px - var(--n) * var(--bw) - (var(--n) - 1) * 20px) - 20px * (var(--n) - 1)) / var(--n))); align-items: stretch; }
  .boxes .box, .boxes[style*="--n:4"] .box { min-height: 0; }
  .boxes .box:nth-child(even) { margin-top: 20px; margin-bottom: -30px; }
  .boxes { margin-bottom: calc(var(--bm, 35px) + 30px); }
  .box { padding-top: calc(var(--boxpt, 30px) - 5px); padding-bottom: 30px; }
  .boxes[style*="--n:4"] .box:nth-child(even) { margin-bottom: -20px; }
  .boxes[style*="--n:4"] { margin-bottom: calc(var(--bm, 35px) + 20px); }
  /* questions: the stand-in font with its 1280 spacing runs a line long in the widest boxes */
  .panel.qa .faq summary h3, .pp-frame .panel .faq summary h3 { letter-spacing: 0.3px; }
  /* questions over the inset photo: that row is min(1600, screen - 160) wide, the box eight twelfths of it */
  .qa-inset .panel.qa { margin-left: clamp(0px, (1760px - 100vw) / 2, 40px); width: calc(min(1600px, 100vw - 160px) * var(--qafrac, 0.6667)); max-width: none; }
  /* headings and words tuned to the 1280 line breaks run free on wide screens unless a section gives a wide value */
  .sec[style*="--h2w"] h2 { max-width: var(--h2w-wide, none); }
  .boxes-sec[style*="--h2w"] h2 { max-width: var(--h2w-wide, var(--h2w)); }
  /* package rows as tall as their box (the 1280 row heights were the live product photos' at that width) */
  .pkg-sec .pkg-photo { min-height: var(--rhw, 0px); }
  .hero-half .lead + p { max-width: none; }
  /* a centred box that runs the whole frame (tune "panelw-wide") */
  .sec[style*="--panelw-wide"] .panel.center { max-width: var(--panelw-wide); }
  /* contact: the photo and the form split the framed band in half; the details and the questions below share it
     as at 1280 (462 to 678) */
  .contact-photo .cp-top { grid-template-columns: 1fr 1fr; }
  .contact-photo .cp-photo { min-height: 0; }
  .contact-photo .cp-form h2 { max-width: none; }
  .contact-photo .cp-bottom { grid-template-columns: 462fr 678fr; }
  .contact-photo .cp-bottom .contact-info p { max-width: none; }
  /* (tune "h1w": a hero headline that keeps its 1280 width, as the live remote start page's) */
  .hero-half[style*="--h1w"] h1 { max-width: var(--h1w); }
  /* the photo panel the other way round: the box seven twelfths of the frame from its left edge */
  .photo-panel.flip .pp-grid .pp-frame .panel { width: calc(100% * 7 / 12); }
  .sec[style*="--pw"] p { max-width: var(--pw-wide, none); }
}

/* Wide screens, the home page's lower sections (Oct 19, 2026), measured the same way. */
@media (min-width: 1281px) {
  /* the service tiles' photos stay 241 tall as they widen */
  .cards a.card img { aspect-ratio: auto; height: 241px; }
  .cards .card-label { height: auto; min-height: 78px; padding: 12px 25px; }
  /* the brands photo stays 510 tall as it widens */
  .brand-frame { aspect-ratio: auto; height: 510px; }
  /* boxes over a still photo: that row is min(1600, screen - 160) wide; the box is its own share of it (tune
     "panelfrac": seven twelfths for "What we offer", eight for "Let's talk shop"), 40 in from the frame below 1760 */
  .sec[style*="--panelfrac"] .panel.right, .sec[style*="--panelfrac"] .panel.left { width: calc(min(1600px, 100vw - 160px) * var(--panelfrac)); max-width: none; }
  .sec[style*="--panelfrac"] .panel.right { margin-right: clamp(0px, (1760px - 100vw) / 2, 40px); }
  .sec[style*="--panelfrac"] .panel.left { margin-left: clamp(0px, (1760px - 100vw) / 2, 40px); }
  /* columns with their own wide shares (tune "cols-wide") */
  .sec[style*="--cols-wide"] .split, .sec[style*="--cols-wide"] .cols { grid-template-columns: var(--cols-wide); }
  /* the photo carousel: four across the whole frame, 1.5% between and 0.75% at each end, 352 tall */
  .carousel { max-width: none; padding: 0 0.75%; }
  .carousel .track { gap: 1.523%; }
  .carousel .cell { flex: 0 0 calc((100% - 3 * 1.523%) / 4); }
  .carousel .cell img { aspect-ratio: auto; height: 352px; }
  /* follow us: four photos across the screen less 60 a side, 260 tall */
  .social-sec > .wrap { max-width: none; padding: 0 60px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile img { aspect-ratio: auto; height: 260px; }
  /* blog: the post cards are 435 tall once their titles fit two lines (462 at 1280) */
  .post-list-sec:not(.related) .post-list article { min-height: 435px; }
}

/* Louie's tint studio in the window tinting page's grey box (Oct 19, 2026; build.mjs tintStudio, docs/TINT-MODULE.md):
   the module's own white card, as wide as the old chooser (at most 1161), in the site's body font, square corners and
   the site's near-black for the chosen buttons; space is held for it while it loads so the page doesn't jump. */
.tint-studio { max-width: 1161px; margin: 0 auto; text-align: left; }
.tint-studio carteks-tint { --ct-font: var(--body); --ct-accent: #0b0404; --ct-radius: 0px; --ct-focus: #d81f26; --ct-controls-surface: #f4f4f4; }
.ts-mount { min-height: 620px; }
.tint-studio.ready .ts-mount { min-height: 0; }
.ts-wait { margin: 0; padding: 260px 20px 0; text-align: center; color: #ababab; }
.ts-btns { justify-content: center; margin-top: 30px; }
@media (max-width: 760px) { .ts-mount { min-height: 900px; } .ts-wait { padding-top: 200px; } }

/* ======================================================================================================
   Phones, as an iPhone sees the live site (Oct 19, 2026). The live site sends phones a layout of its own (the
   earlier phone pass never saw it: it didn't say it was a phone). Measured with measure.mjs --phone and
   chain.mjs --phone at 390 wide: 15px side margins, sections 15 above and below, headings 23px (the hero 26px),
   small 10px labels, every button the full width, the hero's words before its photos.
   ====================================================================================================== */
@media (max-width: 760px) {
  :root { --gutter: 15px; }
  main .sec, main .sec[style] { padding-top: 15px; padding-bottom: 15px; }
  main h1, main .sec h1 { font-size: 26px; line-height: 30px; margin-bottom: 12px; }
  main .sec h2, main .sec[style] h2 { font-size: 23px; line-height: 27px; margin-bottom: 12px; max-width: none; }
  main .eyebrow, main .sec .eyebrow { font-size: 10px; line-height: 20px; letter-spacing: 2px; padding: 0 10px; margin-bottom: 12px; }
  main .sec p { max-width: none; }
  main .btns, main .sec .btns { flex-direction: column; align-items: stretch; gap: 25px; margin-top: 19px; }
  main .btn, main .sec .btn { width: 100%; min-width: 0; min-height: 50px; }
  main .logo-mark { width: 202px; }

  /* home hero: the words over the clip first, then the photos below in a grey frame */
  .hero.hero-video { min-height: 0; height: auto; padding: 0 0 20px; display: block; }
  .hero.hero-video > .wrap { padding: 0; max-width: none; }
  .hero.hero-video .cols.c5-7 { display: flex; flex-direction: column; gap: 0; }
  .hero.hero-video .hero-text { order: 1; padding: 30px 12px 156px; position: relative; }
  .hero.hero-video .media { order: 2; margin: 15px 15px 0; height: 221px; background: #eee; }
  .hero.hero-video .media .slides { height: 100%; aspect-ratio: auto; }
  .hero.hero-video video.hero-bg, .hero.hero-video::before { bottom: 271px; height: auto; }
  .hero.hero-video .lead { padding-left: 20px; border-left-width: 5px; }
  .hero.hero-video .btns { margin-left: 5px; margin-right: 5px; }
  .hero.hero-video .scroll-cue { right: auto; left: calc(50% - 26px); bottom: 327px; }

  /* service tiles: one per row, a 200 tall photo with its name in a light bar under it */
  .cards-sec { padding: 10px 0 40px; }
  .cards-sec > .wrap { padding: 0 25px; }
  .cards { grid-template-columns: 1fr; gap: 10px; margin: 0; }
  .cards a.card img { aspect-ratio: auto; height: 200px; }
  .cards .card-label { margin: 0; height: auto; min-height: 50px; padding: 15px 20px; font-size: 16px; line-height: 20px; }

  /* a section's own phone numbers (tune ppt / ppb: padding above and below; ppanel: its box's padding; palign:
     "center" for a section the live phone layout centres) */
  main .sec.sec[style*="--ppt"] { padding-top: var(--ppt); }
  main .sec.sec[style*="--ppb"] { padding-bottom: var(--ppb); }
  main .sec[style*="--ppanel"] .panel { padding: var(--ppanel); }
  main .sec[style*="--palign"] { text-align: var(--palign); }
  main .sec[style*="--palign"] .eyebrow { margin-left: auto; margin-right: auto; }

  .hero.hero-video .cols.reverse-mobile > .media { order: 2; }
  .hero.hero-video .btns { margin-left: 12px; margin-right: 12px; }
  /* boxes over a still photo: 20 inside the box; the section 45 above it, 30 below */
  main .panel, main .sec .panel { padding: 20px; }
  main .sec.has-bg:has(> .wrap > .panel) { padding-top: var(--ppt, 45px); padding-bottom: var(--ppb, 30px); }
  main .panel ul { padding-left: 28px; }
  .brands-photo .btns { margin: 19px 41px 0 9px; }
  .brands-photo .brand-frame { margin-top: 0; }
  main .sec.brands-photo h2 { margin-bottom: 24px; }
  main .sec.has-bg.flush-bottom:has(> .wrap > .panel) { padding-bottom: var(--ppb, 30px); }
  /* the split section: centred, its label at most 267 wide, its words 24 in from each side, buttons 18 in */
  .split > div:last-child { padding: 0 24px; }
  .split .eyebrow { max-width: 267px; }
  .split .btns { margin-left: 18px; margin-right: 18px; }
  /* the brands photo, 232 tall */
  .brand-frame { aspect-ratio: auto; height: 232px; }
  /* the photo carousel: one 288 x 267 photo in the middle, the next ones peeking in, 12 apart */
  .gallery-carousel, main .sec.gallery-carousel { padding: 15px 0; }
  .carousel { max-width: none; padding: 0 51px; margin: 0 -15px; }
  .carousel .track { gap: 12px; }
  .carousel .cell { flex: 0 0 288px; }
  .carousel .cell img { aspect-ratio: auto; height: 267px; }
  /* the outlined words, as tall as on a computer */
  .ticker.outline, .ticker:not(.outline) { height: 129px; margin: 15px 0; }
  .ticker.outline span, .ticker:not(.outline) span { font-size: 96px; }
  /* follow us: over the dark photo, 20 in from each side; four photos two by two, 175 x 124 */
  main .sec.social-sec { padding: 20px 0; }
  .social-sec > .wrap { padding: 0 20px; }
  .tiles, .social-sec .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 30px; }
  .tile img { aspect-ratio: auto; height: 124px; }
}

/* the phone header, as live: a call button on the left, the logo in the middle (150 wide), the plain menu lines on
   the right; the call button only on phones */
.hdr-call { display: none; }
@media (max-width: 760px) {
  .site-header .bar { position: relative; justify-content: center; min-height: 97px; padding: 10px; gap: 0; }
  .site-header .logo { position: absolute; left: calc(50% - 75px); top: 10px; margin: 0; }
  .site-header .cta { display: none; }
  .site-header .logo img { width: 150px; height: auto; }
  .hdr-call { display: grid; place-items: center; position: absolute; left: 10px; top: 23px; width: 47px; height: 50px; color: #e7e7e7; }
  .site-header .menu-toggle { position: absolute; right: 10px; top: 29px; width: 40px; height: 40px; margin: 0; background: transparent; }
  .site-header .menu-toggle span, .site-header .menu-toggle span::before, .site-header .menu-toggle span::after { background: #e7e7e7; width: 26px; }
}

/* Phones, the service pages' shared layouts (Oct 19, 2026), as an iPhone sees the live window tinting page. */
@media (max-width: 760px) {
  /* hero: the photo on top, 229 tall; under it the logos (145 x 63), the label, headline, words and the buttons,
     20 in from the sides */
  .hero.hero-half { min-height: 0; }
  .hero-half .hero-photo { height: 229px; }
  .hero.hero-half > .wrap { padding: 20px 20px 40px; margin: 0; }
  main .hero-half .logo-row { margin: 30px 0 32px; padding-left: 20px; gap: 20px; }
  main .hero-half .logo-row img { width: 145px; height: 63px; object-fit: contain; }
  main .hero-half .eyebrow { margin-left: 10px; }
  main .hero-half .lead, main .hero-half .lead + p { margin-bottom: 0; }
  main .hero-half .btns { margin: 20px 20px 0; gap: 22px; }

  /* photo panel: a dark framed band, the photo across its top (245 tall), the grey box under it */
  main .sec.photo-panel { padding: 15px 0; }
  .pp-grid, .photo-panel.flip .pp-grid { display: flex; flex-direction: column; border: 1px solid #474747; background: #0b0404; padding: 15px 0; }
  .pp-photo, .photo-panel.flip .pp-photo { position: relative; inset: auto; width: auto; height: 245px; aspect-ratio: auto; }
  .pp-frame, .photo-panel.flip .pp-frame { margin: 0; border: 0; padding: 0; background: none; }
  main .pp-grid .pp-frame .panel { margin: 0; width: auto; padding: 10px; background: #1f1f1f; border: 0; }
  main .pp-frame .panel .eyebrow { margin: 10px 0 12px 20px; }
  main .pp-frame .panel .btns { margin-top: 24px; gap: 24px; }

  /* a row of photos: stacked, 153 tall, 5 apart, in a thin frame */
  main .sec.photo-row { padding: 25px 0; }
  .photo-row .gallery { display: grid; grid-template-columns: 1fr; gap: 5px; padding: 5px; border: 1px solid #474747; overflow: visible; }
  .photo-row .gallery img { flex: none; height: 153px; aspect-ratio: auto; }

  /* package section: the two film cards stacked 40 apart, the jump tabs stacked full width (60 tall, 20 apart),
     each package a framed row: its photo (200 tall) over its bordered box, the buttons 250 wide in the middle */
  .pkg-sec .options { gap: 40px; margin-bottom: 40px; }
  .pkg-sec .option { padding: 25px 15px; }
  main .pkg-sec .option .logo-row img { width: 134px; max-height: 87px; }
  main .pkg-sec .pkg-head h3, main .pkg-sec .pkg-row .package h3 { font-size: 20px; line-height: 23px; }
  .pkg-sec .jump { flex-direction: column; flex-wrap: nowrap; gap: 20px; padding: 0 15px; margin: 20px 0; }
  main .pkg-sec .jump .btn { width: 100%; flex: none; min-height: 60px; background: #000; border-color: #474747; }
  .pkg-sec .pkg-rows { gap: 20px; }
  .pkg-sec .pkg-row { padding: 20px; gap: 0; }
  .pkg-sec .pkg-photo, .pkg-sec .pkg-photo[style] { min-height: 0; height: 200px; }
  main .pkg-sec .pkg-row .package { padding: 15px; }
  main .pkg-sec .pkg-row .package .btns { align-items: center; margin-left: 0; margin-right: 0; }
  main .pkg-sec .pkg-row .package .btn { width: 250px; min-width: 0; }

  /* care tips: the clip on top (209 tall), the box under it, 20 between */
  main .sec.qa-video { padding: 15px 0; }
  .qa-video .wrap { display: flex; flex-direction: column; gap: 20px; padding-top: 20px; }
  .qa-media { position: relative; inset: auto; width: auto; height: 209px; aspect-ratio: auto; }
  main .qa-video .panel.qa { margin: 0; width: auto; }

  /* boxes: one per row, 20 apart, 20 / 10 inside; headings 17px */
  .boxes, .boxes[style] { grid-template-columns: 1fr; gap: 20px; }
  main .box { padding: 20px 10px; }
  main .box h4 { font-size: 17px; line-height: 21px; }
  main .boxes-sec .btns { margin-left: 15px; margin-right: 15px; }

  /* questions boxes: 20 inside; over the inset photo, 30 down */
  main .panel.qa { padding: 20px; }
  main .sec.qa-inset { padding: 30px 0 15px; }
}

/* Phones, service pages, second round (Oct 19, 2026) */
@media (max-width: 760px) {
  main .hero-half .btns { margin-right: 0; }
  main .hero-half .btns .btn:first-child { width: calc(100% - 20px); }
  /* package boxes: 15 inside (the first one too), live's heading and price sizes */
  main .pkg-sec .pkg-rows > .pkg-row .package { padding: 15px; }
  main .pkg-sec .pkg-row .package h3 { margin: 10px 0 12px; }
  main .pkg-sec .pkg-row .package h5 { font-size: 16px; line-height: 20px; }
  main .pkg-sec .pkg-row .package h5:first-of-type { font-size: 14px; line-height: 17px; margin-bottom: 12px; }
  main .pkg-sec .pkg-row .package h4 { font-size: 17px; line-height: 21px; }
  main .pkg-sec .option h4 { font-size: 17px; line-height: 21px; }
  /* care tips: the clip 50 down; the box's buttons 250 wide in the middle */
  .qa-video .wrap { padding-top: 35px; }
  main .qa-video .panel.qa .btns { align-items: center; }
  main .qa-video .panel.qa .btn { width: 250px; }
  /* boxes, as live on a phone: everything left-aligned, the icon at the left, 31 under the words */
  main .boxes-sec { text-align: left; }
  main .boxes-sec .eyebrow, main .boxes-sec .logo-mark, main .boxes-sec h2 { margin-left: 0; margin-right: 0; }
  main .box { text-align: left; padding: 20px 10px 31px; }
  main .box-icon { margin: 12px 0 41px 10px; }
  main .box h4 { margin: 0 0 12px; }
  /* questions: each one in its bordered row, 19 above and below, at most 232 wide, 16px lines */
  main .panel.qa .faq summary { padding: 19px 21px; }
  main .panel.qa .faq summary h3 { line-height: 16px; max-width: 232px; flex: 0 1 232px; }
}
@media (max-width: 760px) {
  .pp-grid, .photo-panel.flip .pp-grid { align-items: stretch; }
  .pkg-sec .jump { margin-top: 36px; }
}
/* the service tiles' names in the slanted heading face, as live */
.cards .card-label { font-style: italic; }
@media (max-width: 760px) {
  /* no scroll arrow on the service pages' phone hero (live has none; it sat on the second button) */
  .hero-half .scroll-cue { display: none; }
}

/* ===== Prices first (the window tinting mock-up, Oct 19, 2026): a shorter hero with the starting price, three
   reasons to trust the shop and the exact-price button, then a price table ===== */
.hero.hero-quick { min-height: 0; }
.price-line { margin: 18px 0 6px; font: 400 16px/1.4 var(--body); color: var(--text); }
.price-line strong { display: inline-block; margin: 0 4px; font: italic 900 40px/1.05 var(--heading); font-stretch: 125%; font-variation-settings: "wdth" 125; color: #fff; letter-spacing: -0.01em; }
.price-line .pl-note { display: block; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: #ababab; }
.trust { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.trust li { position: relative; padding-left: 26px; font-size: 14px; line-height: 22px; color: #e7e7e7; }
.trust li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 8px; border-left: 2px solid #e7e7e7; border-bottom: 2px solid #e7e7e7; transform: rotate(-45deg); }
.trust li:has(.tr-stars)::before { content: none; }
.trust .tr-stars { position: absolute; left: 0; top: 0; color: #f7c52f; font-size: 16px; }
.hero-quick .btns { margin-top: 24px; }
@media (min-width: 1001px) {
  .hero.hero-quick { min-height: 640px; }
  .hero-quick > .wrap { padding: 150px 0 60px 60px; }
}
@media (min-width: 1281px) { .hero-half.hero-quick > .wrap { padding-top: 150px; padding-bottom: 60px; } }

.price-table-sec { padding: 60px 0; text-align: center; }
.price-table-sec > .wrap > p { max-width: 640px; margin-left: auto; margin-right: auto; }
.pt-wrap { max-width: 860px; margin: 28px auto 0; border: 1px solid #474747; background: #1f1f1f; overflow-x: auto; }
.price-table { width: 100%; border-collapse: collapse; text-align: left; }
.price-table th, .price-table td { padding: 16px 20px; border-bottom: 1px solid rgba(231, 231, 231, 0.15); }
.price-table thead th { font: 600 12px/1.4 var(--body); letter-spacing: 2px; text-transform: uppercase; color: #ababab; }
.price-table tbody th { font: italic 800 17px/1.3 var(--heading); font-stretch: 112%; font-variation-settings: "wdth" 112; text-transform: uppercase; color: #fff; }
.price-table tbody th a { color: inherit; text-decoration: none; }
.price-table tbody th span { display: block; margin-top: 2px; font: 400 11px/1.4 var(--body); font-style: normal; letter-spacing: 1.5px; color: #f7c52f; }
.price-table td { font: italic 900 22px/1.2 var(--heading); font-stretch: 125%; font-variation-settings: "wdth" 125; color: #fff; white-space: nowrap; }
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td { border-bottom: 0; }
.pt-small { margin: 12px auto 0; font-size: 12px; color: #ababab; }
@media (max-width: 760px) {
  .hero-quick .hero-photo { height: 170px; }
  .hero.hero-quick > .wrap { padding: 18px 20px 26px; }
  .price-line strong { font-size: 34px; }
  .price-table-sec { padding: 30px 0; }
  .price-table th, .price-table td { padding: 12px 10px; }
  .price-table tbody th { font-size: 14px; }
  .price-table td { font-size: 17px; }
  .price-table thead th { font-size: 10px; letter-spacing: 1px; }
}
.price-table-sec .btns { justify-content: center; }
/* prices first: several services' starting prices (the home hero) and a price under each service tile's name */
.from-prices { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.from-prices a { display: flex; align-items: baseline; gap: 10px; color: var(--text); text-decoration: none; font-size: 15px; }
.from-prices a:hover span { text-decoration: underline; }
.from-prices strong { font: italic 900 26px/1.15 var(--heading); font-stretch: 125%; font-variation-settings: "wdth" 125; color: #fff; }
.cards .card-label .card-from { display: block; margin-top: 2px; font: 400 12px/1.3 var(--body); font-style: normal; letter-spacing: 1px; text-transform: none; color: #3a3a3a; }

/* The big button to the quote engine (Louie, Oct 19, 2026: "LARGE LARGE LARGE buttons"): red so it can't be missed,
   slanted like the site's buttons, the main words big and a line under them, an arrow; a call or text line under it */
.big-cta-wrap { margin: 26px 0 0; }
.big-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; max-width: 680px; padding: 20px 30px; background: #d81f26; border: 2px solid #d81f26; color: #fff; text-decoration: none; transform: skewX(var(--skew)); box-shadow: 0 12px 34px rgba(216, 31, 38, 0.35); transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.big-cta .bc-text, .big-cta .bc-arrow { transform: skewX(calc(var(--skew) * -1)); }
.big-cta .bc-main { display: block; font: italic 900 24px/1.12 var(--heading); font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; letter-spacing: -0.005em; }
.big-cta .bc-sub { display: block; margin-top: 6px; font: 400 14px/1.4 var(--body); color: rgba(255, 255, 255, 0.92); }
.big-cta .bc-arrow { flex: none; font-size: 38px; line-height: 1; }
.big-cta:hover, .big-cta:focus-visible { background: #fff; border-color: #fff; color: #0b0404; }
.big-cta:hover .bc-sub, .big-cta:focus-visible .bc-sub { color: #3a3a3a; }
.big-cta:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.bc-call { margin: 14px 0 0; font-size: 14px; color: #ababab; }
.bc-call a { color: #fff; }
.center .big-cta, .price-table-sec .big-cta, .cta-sec .big-cta { margin-left: auto; margin-right: auto; text-align: left; }
.cta-sec { padding: 50px 0; }
.cta-sec h2 { margin-bottom: 4px; }
.pt-span { text-align: center; }
.mp-tint.mp-none { font-size: 13px; color: #ababab; }
@media (max-width: 760px) {
  .big-cta { padding: 16px 18px; gap: 10px; }
  .big-cta .bc-main { font-size: 19px; }
  .big-cta .bc-sub { font-size: 13px; }
  .big-cta .bc-arrow { font-size: 30px; }
  .cta-sec, main .sec.cta-sec { padding: 30px 0; }
}
/* what happens after the big button, in three steps (prices first drafts) */
.bc-steps { max-width: 680px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: bc; display: grid; gap: 10px; text-align: left; }
.bc-steps li { counter-increment: bc; position: relative; padding-left: 40px; font-size: 14px; line-height: 21px; color: #dcdcdc; }
.bc-steps li::before { content: counter(bc); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: #e7e7e7; color: #0b0404; font: italic 900 14px/26px var(--heading); text-align: center; }
.bc-steps strong { color: #fff; }
.center .bc-steps, .cta-sec .bc-steps, .price-table-sec .bc-steps { margin-left: auto; margin-right: auto; }
/* text / call / email under the big price button */
.contact-row { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 18px; max-width: 680px; }
.contact-row .btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 10px; font-size: 13px; background: #0b0404; color: #fff; border-color: #e7e7e7; }
.contact-row .btn:hover, .contact-row .btn:focus-visible { background: #e7e7e7; color: #0b0404; }
.center .contact-row, .cta-sec .contact-row, .price-table-sec .contact-row { margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { .contact-row { gap: 10px; } .contact-row .btn, main .contact-row .btn { width: auto; flex: 1 1 0; font-size: 11px; padding: 0 4px; } }
@media (max-width: 760px) { .big-cta { width: calc(100% - 14px); margin-left: 7px; margin-right: 7px; } }
/* phones get the smaller copy of a background photo (build.mjs puts both in the style) */
@media (max-width: 760px) { [style*="--bg-sm"] { background-image: var(--bg-sm) !important; } }

/* The CRM's PPF coverage pictures in the package rows (lib/ppf_pictures.mjs, Oct 19, 2026): the drawing fits its box,
   gold where the film goes, with the CRM's note under it. */
.pkg-photo.cov { margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; }
.pkg-photo.cov svg { display: block; width: 100%; height: auto; }
.pkg-photo.cov figcaption { margin-top: 12px; font-size: 13px; line-height: 1.4; color: #ababab; text-align: center; }

/* A Tesla model's tint versions (the Model 3's partial and entire rear glass, Oct 19, 2026): the version's name, the
   CRM's description beside it, then its two films. */
.mp-version { margin: 6px 0 0; font: 600 13px/20px var(--body); color: #fff; }
.mp-version span { font-weight: 400; color: #ababab; }

/* Three Tesla cards share a row between phone and full width: their PPF tables tighten so the full car column stays
   inside the card (it spilled 30-40px at 1024, Oct 19, 2026). */
@media (min-width: 761px) and (max-width: 1279px) {
  .models .mp-ppf { font-size: 11.5px; }
  .models .mp-ppf th, .models .mp-ppf td { padding: 3px 2px; }
}

/* The owner by photo and name (Oct 20, 2026): on About and under his story on the home page; a small round photo
   beside his name on each post's byline. */
.owner-card { display: flex; align-items: center; gap: 16px; margin: 18px 0; }
.owner-card img { width: 140px; height: auto; border-radius: 6px; flex: none; }
.owner-card figcaption { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.owner-card figcaption strong { font: 800 20px/1.2 var(--heading); font-stretch: 112%; text-transform: uppercase; letter-spacing: -0.01em; }
.owner-card figcaption span { opacity: 0.75; }
.split .owner-card img, .owner-card.small img { width: 84px; border-radius: 50%; }
.byline-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 8px; }
@media (max-width: 760px) { .owner-card img { width: 96px; } }

/* Wide-screen fixes after launch (Oct 20, 2026; Louie, at work on a wide screen: "this layout is broken a bit",
   "main page layuot is broken too a bit"). */
/* The photo panel's grey box tucks 50px under the photo at every desktop width, so its words start 26px past the
   photo's edge (Duda's own gap), whatever padding a section tunes; before, a 25px or 45px padding left them under it. */
@media (min-width: 1001px) {
  .photo-panel:not(.flip) .pp-grid .pp-frame .panel { padding-left: 76px; }
}
/* From 1001 to 1279 the photo panel takes the wide screens' proportions (photo five twelfths, box seven twelfths
   tucked 50 under it): 1280's fixed 499 + 699 didn't fit, and the photo covered a third of the words. */
@media (min-width: 1001px) and (max-width: 1279.98px) {
  .pp-grid { min-height: 0; padding-bottom: var(--pp-ft, 69px); }
  .pp-photo { top: 0; bottom: 0; height: auto; width: calc((100% - 2px) * 5 / 12); }
  .pp-frame { min-height: 0; }
  .pp-grid .pp-frame .panel { width: calc((100% + 50px) * 7 / 12); }
  .photo-panel.flip .pp-grid .pp-frame .panel { width: calc(100% * 7 / 12); }
}
/* The home hero's photo runs from its top down to the bottom of the words beside it (the prices-first words are
   taller than Duda's were, which left an empty floor under a 549px photo). */
/* Never taller than 5:4 (portrait) for its width, centred on the words when they run taller still (1101-1280,
   where the words column is narrow). */
@media (min-width: 1101px) {
  .hero.hero-video .media { top: 190px; bottom: 220px; margin: auto 0; min-height: 549px;
    height: min(calc(100% - 410px), calc((41.66vw + 82px) * 1.25)); }
}
/* A service card's "from" price sits under the card's name, not run into it. */
.cards .card-label { flex-direction: column; text-align: center; }
/* The big red button, loud, clear and centred (Louie, Oct 20, 2026): its words centred on the button in larger type,
   the arrow held at the right edge. */
.big-cta { position: relative; justify-content: center; padding-left: 64px; padding-right: 64px; }
.big-cta .bc-text { text-align: center; }
.big-cta .bc-main { font-size: 28px; line-height: 1.1; }
.big-cta .bc-arrow { position: absolute; right: 26px; top: 50%; transform: translateY(-50%) skewX(calc(var(--skew) * -1)); }
@media (max-width: 760px) {
  .big-cta { padding-left: 30px; padding-right: 30px; }
  .big-cta .bc-main { font-size: 17px; }
  .big-cta .bc-arrow { right: 10px; font-size: 26px; }
}
/* The service cards ride over the bottom of the home hero (as on Duda's page), so they sit above the hero's video, its
   dark left side and its photo (z-index up to 3), under the sticky header. Before, those painted over the cards' tops
   (Louie, Oct 20, 2026: "its clipping the 5 cards below it"). */
.cards-sec { position: relative; z-index: 5; }