  :root {
  --red:#d6202a; --red-deep:#a3121a; --red-glow:rgba(214,32,42,.35);
  --asphalt:#121316; --char:#1b1d21; --steel:#25282e; --line:#34373e;
  --mute:#a7abb3; --paper:#f4f3f0; --ink:#17181b; --hazard:#ffc21a;
  --display:"Barlow Condensed", "Arial Narrow", sans-serif; --body:"Barlow", Arial, sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--body); font-size:17px; line-height:1.6; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
img, svg { display:block; max-width:100%; }
a { color:inherit; }
h1, h2, h3 { font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.01em; line-height:.98; margin:0; }
h2 { font-size:clamp(2.2rem, 5vw, 3.4rem); }
p { margin:0 0 1em; }
.wrap { width:min(1180px, 100% - 40px); margin-inline:auto; }
.kicker { font-family:var(--display); font-weight:700; font-size:.95rem; letter-spacing:.2em; text-transform:uppercase; color:var(--red); display:inline-flex; align-items:center; gap:.6rem; margin-bottom:.9rem; }
.kicker::before { content:""; width:28px; height:3px; background:var(--red); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-family:var(--display); font-weight:700; font-size:1.12rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; padding:.85em 1.5em; border-radius:6px; border:2px solid var(--red); background:var(--red); color:#fff; transition:background .2s, transform .2s, box-shadow .2s; white-space:nowrap; }
.btn:hover { background:var(--red-deep); border-color:var(--red-deep); transform:translateY(-1px); box-shadow:0 10px 24px -10px var(--red-glow); }
.btn svg { width:1.1em; height:1.1em; }
.btn.ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.btn.ghost:hover { background:#fff; color:var(--ink); border-color:#fff; box-shadow:none; }
.btn.dark { background:var(--ink); border-color:var(--ink); }
.btn.dark:hover { background:#000; border-color:#000; }
:focus-visible { outline:3px solid var(--hazard); outline-offset:3px; }

/* top bar + header */
.topbar { background:var(--red); color:#fff; font-size:.9rem; font-weight:500; }
.topbar .wrap { display:flex; justify-content:space-between; gap:1rem; padding:.4rem 0; }
.topbar a { text-decoration:none; font-weight:600; }
.topbar .area { opacity:.9; }
@media (max-width:640px) { .topbar .area { display:none; } .topbar .wrap { justify-content:center; } }
header.site { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.97); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:5px solid var(--red); box-shadow:0 6px 20px -14px rgba(0,0,0,.35); }
.bar { display:flex; align-items:center; justify-content:space-between; height:78px; gap:1.5rem; }
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; color:#fff; }
.brand .logo { height:60px; width:auto; }
.brand .badge { width:46px; height:46px; border-radius:50%; background:var(--red); display:grid; place-items:center; font-family:var(--display); font-weight:800; font-style:italic; font-size:1.25rem; letter-spacing:-.02em; box-shadow:inset 0 0 0 3px #fff, 0 0 0 2px var(--red); }
.brand .name { font-family:var(--display); font-weight:800; font-size:1.45rem; line-height:.95; text-transform:uppercase; }
.brand .name small { display:block; font-size:.72rem; letter-spacing:.24em; color:var(--mute); font-weight:600; }
nav.links { display:flex; align-items:center; gap:1.6rem; }
nav.links a { font-family:var(--display); font-weight:700; font-size:1.02rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--ink); }
nav.links a:hover { color:var(--red); }
nav.links .btn { padding:.6em 1.1em; font-size:1rem; color:#fff; }
nav.links .btn:hover { color:#fff; }
@media (max-width:900px) { nav.links a:not(.btn) { display:none; } }
@media (max-width:420px) { .brand .name small { display:none; } nav.links .btn span { display:none; } }

/* hero */
.hero { position:relative; overflow:hidden; color:#fff; background:
    radial-gradient(1200px 500px at 85% -10%, rgba(214,32,42,.28), transparent 60%),
    radial-gradient(800px 400px at -10% 110%, rgba(214,32,42,.12), transparent 60%),
    linear-gradient(180deg, #17181c, var(--asphalt)); padding:clamp(3.5rem, 8vw, 6rem) 0 clamp(4.5rem, 9vw, 7rem); }
.hero::before { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size:4px 4px; pointer-events:none; }
.road { position:absolute; left:50%; bottom:0; width:6px; height:100%; transform:translateX(-50%) perspective(400px) rotateX(62deg); transform-origin:bottom; background:repeating-linear-gradient(to top, var(--hazard) 0 40px, transparent 40px 80px); opacity:.18; animation:drive 1.6s linear infinite; pointer-events:none; }
@keyframes drive { to { background-position:0 80px; } }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero::after { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(90deg, rgba(14,15,18,.94) 0%, rgba(14,15,18,.82) 45%, rgba(14,15,18,.55) 100%), linear-gradient(0deg, rgba(14,15,18,.85), transparent 35%); }
.hero::before { z-index:1; }
@media (max-width:920px) { .hero::after { background:rgba(14,15,18,.82); } }
@media (prefers-reduced-motion:reduce) { .hero-video { display:none; } .hero { background:url(assets/hero-poster.jpg) center / cover; } }
.hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; }
.hero h1 { font-size:clamp(3rem, 7.4vw, 5.6rem); }
.hero h1 em { font-style:normal; color:var(--red); }
.hero .lede { font-size:1.18rem; color:#c9ccd2; max-width:31em; margin:1.4rem 0 2rem; }
.hero .ctas { display:flex; flex-wrap:wrap; gap:.8rem; }
.trust { display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; margin-top:2.2rem; color:#c9ccd2; font-size:.95rem; }
.trust span { display:inline-flex; align-items:center; gap:.45rem; }
.trust b { color:#fff; }
.stars { color:var(--hazard); letter-spacing:.08em; }

.quick { position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:1.6rem; backdrop-filter:blur(6px); box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.quick::before { content:""; position:absolute; left:0; right:0; top:0; height:6px; border-radius:14px 14px 0 0; background:repeating-linear-gradient(135deg, var(--hazard) 0 14px, #111 14px 28px); }
.quick h3 { font-size:1.7rem; margin:.5rem 0 .3rem; }
.quick p { color:var(--mute); font-size:.95rem; margin-bottom:1.1rem; }
.chips { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.chip { display:flex; align-items:center; gap:.6rem; padding:.75rem .85rem; border-radius:8px; background:var(--steel); border:1px solid var(--line); text-decoration:none; color:#fff; font-weight:600; font-size:.98rem; transition:border-color .2s, background .2s, transform .2s; }
.chip:hover { border-color:var(--red); background:#2c1a1c; transform:translateY(-1px); }
.chip svg { width:22px; height:22px; color:var(--red); flex:none; }
.quick .or { display:flex; align-items:center; gap:.8rem; color:var(--mute); font-size:.85rem; margin:1.1rem 0 .9rem; text-transform:uppercase; letter-spacing:.14em; }
.quick .or::before, .quick .or::after { content:""; flex:1; height:1px; background:var(--line); }
.quick .btn { width:100%; font-size:1.3rem; }
@media (max-width:920px) { .hero-grid { grid-template-columns:1fr; } .road { display:none; } }

/* stats */
.stats { background:var(--red); color:#fff; position:relative; }
.stats .wrap { display:grid; grid-template-columns:repeat(5, 1fr); }
.stat { padding:1.6rem 1rem; text-align:center; border-left:1px solid rgba(255,255,255,.18); }
.stat:first-child { border-left:0; }
.stat b { display:block; font-family:var(--display); font-weight:800; font-size:clamp(2rem, 4vw, 2.9rem); line-height:1; }
.stat span { font-size:.82rem; text-transform:uppercase; letter-spacing:.14em; opacity:.9; font-weight:600; }
@media (max-width:760px) { .stats .wrap { grid-template-columns:repeat(2, 1fr); } .stat { border-left:0; border-top:1px solid rgba(255,255,255,.18); } .stat:nth-child(-n+2) { border-top:0; } .stat:last-child { grid-column:1 / -1; } }


/* brands */
.brands { background:var(--asphalt); color:#fff; padding:2.2rem 0 2.4rem; overflow:hidden; }
.brands-head { display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.brands-head h2 { font-size:1.6rem; }
.brands-head span { color:var(--mute); font-size:.95rem; }
.marquee { -webkit-mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.track { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:1rem; width:max-content; animation:marquee 45s linear infinite; }
.marquee:hover .track { animation-play-state:paused; }
.track li { flex:none; width:170px; height:86px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:10px; padding:12px 16px; }
.track li:has(img[src*="goodyear"]) { background:#0f3b8c; }
.track li:has(img[src*="wix"]), .track li:has(img[src*="general"]) { background:#26292f; }
.track img { max-height:44px; max-width:100%; width:auto; height:auto; }
.track img[src*="wix"], .track img[src*="firestone"], .track img[src*="hankook"], .track img[src*="michelin"], .track img[src*="general"] { max-height:62px; }
@keyframes marquee { to { transform:translateX(calc(-50% - .5rem)); } }
@media (prefers-reduced-motion:reduce) { .track { animation:none; flex-wrap:wrap; width:auto; justify-content:center; padding:0 20px; } .track li[aria-hidden] { display:none; } .marquee { mask:none; -webkit-mask:none; } }
/* services */
.services { padding:clamp(4rem, 8vw, 6.5rem) 0; }
.head { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:2.8rem; flex-wrap:wrap; }
.head p { max-width:30rem; color:#55585f; margin:0; }
.svc-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:1.1rem; }
.svc { position:relative; background:#fff; border-radius:12px; padding:1.6rem 1.4rem 1.4rem; border:1px solid #e4e2dc; text-decoration:none; transition:transform .25s, box-shadow .25s, border-color .25s; overflow:hidden; }
.svc::after { content:""; position:absolute; left:0; bottom:0; height:4px; width:0; background:var(--red); transition:width .3s; }
.svc:hover { transform:translateY(-4px); box-shadow:0 22px 40px -24px rgba(0,0,0,.35); border-color:#d9d6ce; }
.svc:hover::after { width:100%; }
.sign { width:62px; height:62px; margin:6px 0 1.3rem 6px; position:relative; display:grid; place-items:center; }
.sign::before { content:""; position:absolute; inset:4px; background:#fff; border:3px solid var(--ink); border-radius:7px; transform:rotate(45deg); box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--red); }
.sign svg { position:relative; width:28px; height:28px; color:var(--ink); }
.svc h3 { font-size:1.55rem; margin-bottom:.35rem; }
.svc p { color:#5c5f66; font-size:.95rem; margin:0; }
@media (max-width:980px) { .svc-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px) { .svc-grid { gap:.7rem; } .svc { padding:1.1rem 1rem 1rem; } .sign { transform:scale(.8); transform-origin:top left; margin-bottom:.6rem; } .svc h3 { font-size:1.25rem; } .svc p { font-size:.86rem; line-height:1.45; } }

/* fleet band */
.fleet { background:var(--asphalt); color:#fff; overflow:hidden; position:relative; }
.fleet::before { content:""; position:absolute; inset:0 0 auto 0; height:8px; background:repeating-linear-gradient(135deg, var(--hazard) 0 18px, #111 18px 36px); }
.fleet .wrap { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; padding:clamp(4rem, 8vw, 6rem) 0; }
.fleet p { color:#c4c7cd; }
.fleet ul { list-style:none; padding:0; margin:1.4rem 0 2rem; display:grid; gap:.6rem; }
.fleet li { display:flex; gap:.7rem; align-items:flex-start; }
.fleet li svg { width:22px; height:22px; color:var(--red); flex:none; margin-top:.15rem; }
.van { position:relative; aspect-ratio:4/3; border-radius:14px; background:linear-gradient(160deg, #23262c, #16171a); border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; }
.van::after { content:"Photo: B & C service truck on a fleet job"; position:absolute; bottom:12px; left:14px; font-size:.78rem; color:#6c7078; letter-spacing:.06em; }
.van svg { width:55%; color:#2f3239; }
.van svg circle { fill:#1b1d21; }

/* truck scene */
.scene { position:relative; aspect-ratio:16/10; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(180deg, #1d2026 0%, #23262d 58%, #121316 58%); }
.scene .sky { position:absolute; inset:0 0 42% 0; background:radial-gradient(500px 220px at 75% 100%, rgba(214,32,42,.22), transparent 70%); }
.road-strip { position:absolute; left:0; right:0; bottom:0; height:42%; background:linear-gradient(180deg, #2a2c31 0, #17181b 18%, #121316); }
.road-strip span { position:absolute; left:-80px; right:-80px; top:62%; height:5px; background:repeating-linear-gradient(90deg, var(--hazard) 0 46px, transparent 46px 92px); opacity:.85; }
.scene.in .road-strip span { animation:lane 2.4s cubic-bezier(.15,.6,.25,1) both; }
@keyframes lane { from { transform:translateX(-276px); } to { transform:translateX(0); } }
.truck { position:absolute; left:6%; width:88%; bottom:22%; transform:translateX(-130%); }
.truck .body { width:100%; height:auto; position:relative; }
.truck .wheel { position:absolute; top:72.7%; width:11.68%; height:auto; }
.truck .w1 { left:23.9%; } .truck .w2 { left:82.04%; }
.truck .shadow { position:absolute; left:2%; right:2%; bottom:-3%; height:9%; background:radial-gradient(closest-side, rgba(0,0,0,.65), transparent); }
.scene.in .truck { animation:arrive 2.4s cubic-bezier(.15,.6,.25,1) both, settle .5s ease-out 2.35s; }
.scene.in .truck .wheel { animation:spin 2.4s cubic-bezier(.15,.6,.25,1) both; }
@keyframes arrive { from { transform:translateX(-130%); } to { transform:translateX(0); } }
@keyframes settle { 0% { transform:translateX(0) rotate(0); } 35% { transform:translateX(0) rotate(-.8deg); } 70% { transform:translateX(0) rotate(.3deg); } 100% { transform:translateX(0) rotate(0); } }
@keyframes spin { from { transform:rotate(-1200deg); } to { transform:rotate(0); } }
.truck { transform-origin:70% 100%; }
@media (prefers-reduced-motion:reduce) { .truck, .scene.in .truck { transform:none; animation:none; } .scene.in .truck .wheel, .scene.in .road-strip span { animation:none; } }

/* cta truck */
.cta .cruise { position:absolute; bottom:22px; left:0; width:210px; animation:cruise 9s linear infinite; pointer-events:none; }
.cta .cruise::after { content:""; position:absolute; left:4%; right:4%; bottom:-6px; height:10px; background:radial-gradient(closest-side, rgba(0,0,0,.35), transparent); }
.cta .cruise .wheel { animation:roll .55s linear infinite; }
@keyframes cruise { from { transform:translateX(-200px); } to { transform:translateX(calc(100vw + 40px)); } }
@keyframes roll { to { transform:rotate(360deg); } }
.cta .wrap { z-index:1; }
@media (max-width:760px), (prefers-reduced-motion:reduce) { .cta .cruise { display:none; } }
@media (max-width:880px) { .fleet .wrap { grid-template-columns:1fr; } }

/* about */
.about { padding:clamp(4rem, 8vw, 6.5rem) 0; }
.about .wrap { display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem, 6vw, 5rem); align-items:center; }
.photo { position:relative; aspect-ratio:3/2; border-radius:14px; background:linear-gradient(150deg, #e6e3dc, #d3cfc5); overflow:hidden; }
.photo img { width:100%; height:100%; object-fit:cover; }
.photo { box-shadow:0 30px 50px -30px rgba(0,0,0,.45); }
.photo .tag { position:absolute; right:-1px; top:22px; background:var(--red); color:#fff; font-family:var(--display); font-weight:800; text-transform:uppercase; padding:.7rem 1.1rem; border-radius:8px 0 0 8px; line-height:1; text-align:center; }
.photo .tag b { display:block; font-size:2.4rem; }
.checks { list-style:none; padding:0; margin:1.6rem 0 2rem; display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1.4rem; }
.checks li { display:flex; gap:.6rem; font-weight:600; }
.checks svg { width:22px; height:22px; color:var(--red); flex:none; }
@media (max-width:880px) { .about .wrap { grid-template-columns:1fr; } }
@media (max-width:440px) { .checks { grid-template-columns:1fr; } }


/* work carousel */
.work { padding:clamp(1rem, 3vw, 2rem) 0 clamp(4rem, 8vw, 6rem); overflow:hidden; }
.work-head { text-align:center; margin-bottom:2.2rem; }
.work-head .kicker { justify-content:center; }
.work-head .kicker::after { content:""; width:28px; height:3px; background:var(--red); }
.rail { --w:min(760px, 84vw); display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:1.2rem calc((100% - var(--w)) / 2); scrollbar-width:none; scroll-behavior:smooth; }
.rail::-webkit-scrollbar { display:none; }
.job { flex:0 0 var(--w); margin:0; scroll-snap-align:center; position:relative; border-radius:14px; overflow:hidden; background:#ddd; transform:scale(.9); opacity:.45; transition:transform .5s ease, opacity .5s ease, box-shadow .5s; }
.job.active { transform:none; opacity:1; box-shadow:0 30px 50px -28px rgba(0,0,0,.5); }
.job img { width:100%; height:auto; aspect-ratio:1140/500; object-fit:cover; display:block; }
.job figcaption { position:absolute; left:0; right:0; bottom:0; padding:2.6rem 1.2rem 1rem; background:linear-gradient(transparent, rgba(0,0,0,.8)); color:#fff; font-family:var(--display); font-weight:700; font-size:1.3rem; text-transform:uppercase; letter-spacing:.04em; text-align:center; }
.work-foot { display:flex; justify-content:center; align-items:center; gap:1.2rem; margin-top:1.2rem; }
.arrow { width:46px; height:46px; border-radius:50%; border:2px solid var(--ink); background:transparent; font-size:1.25rem; cursor:pointer; color:var(--ink); transition:background .2s, color .2s; }
.arrow:hover { background:var(--ink); color:#fff; }
.dots { display:flex; gap:.5rem; }
.dots button { width:10px; height:10px; border-radius:999px; border:0; padding:0; background:#c9c5bc; cursor:pointer; transition:width .3s, background .3s; }
.dots button[aria-selected="true"] { width:28px; background:var(--red); }
@media (prefers-reduced-motion:reduce) { .job { transition:none; } .rail { scroll-behavior:auto; } }
/* reviews */
.reviews { background:#ebe9e4; padding:clamp(4rem, 8vw, 6.5rem) 0; }
.score { display:flex; align-items:center; gap:1.2rem; }
.score b { font-family:var(--display); font-weight:800; font-size:4rem; line-height:1; }
.score .stars { font-size:1.4rem; }
.score small { display:block; color:#5c5f66; }
.rev-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.1rem; }
.rev { background:#fff; border-radius:12px; padding:1.6rem; display:flex; flex-direction:column; gap:1rem; border:1px solid #e0ddd6; }
.rev .stars { font-size:1.05rem; }
.rev blockquote { margin:0; font-size:1.03rem; flex:1; }
.rev .who { display:flex; align-items:center; gap:.7rem; font-weight:600; font-size:.95rem; }
.rev .av { width:38px; height:38px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:700; }
.rev .src { color:#7b7e85; font-weight:500; font-size:.85rem; }
.reviews .more { margin-top:2rem; display:flex; gap:.8rem; flex-wrap:wrap; }
@media (max-width:900px) { .rev-grid { grid-template-columns:1fr; } }

/* cta */
.cta { background:var(--red); color:#fff; position:relative; overflow:hidden; }
.cta::before { content:""; position:absolute; right:-80px; top:-80px; width:340px; height:340px; border:40px solid rgba(255,255,255,.08); border-radius:50%; }
.cta .wrap { position:relative; display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; padding:clamp(3rem, 6vw, 4.5rem) 0; }
.cta h2 { font-size:clamp(2rem, 4.5vw, 3rem); }
.cta p { margin:.5rem 0 0; opacity:.92; }
.cta .ctas { display:flex; gap:.8rem; flex-wrap:wrap; }
.cta .btn.ghost { border-color:rgba(255,255,255,.6); }
.cta .btn.dark:hover { background:#000; }

/* footer */
footer { background:var(--asphalt); color:#babdc4; font-size:.95rem; }
.fgrid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; padding:3.5rem 0 2.5rem; }
footer h4 { font-family:var(--display); color:#fff; text-transform:uppercase; letter-spacing:.14em; font-size:1rem; margin:0 0 1rem; }
footer ul { list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
footer a { text-decoration:none; color:#babdc4; }
footer a:hover { color:#fff; }
.fbrand { text-align:center; padding:3.5rem 0 2rem; border-bottom:1px solid var(--line); }
.fbrand img { height:120px; width:auto; margin:0 auto 1rem; filter:drop-shadow(0 0 .6px #fff) drop-shadow(0 0 .6px #fff) drop-shadow(0 0 .6px #fff) drop-shadow(0 10px 20px rgba(0,0,0,.5)); }
.fbrand p { max-width:30rem; margin:0 auto; }
.fgrid .socials { margin-top:0; }
.socials { display:flex; gap:.5rem; margin-top:1.2rem; }
.socials a { width:38px; height:38px; border-radius:50%; background:var(--steel); display:grid; place-items:center; }
.socials a:hover { background:var(--red); }
.socials svg { width:17px; height:17px; color:#fff; }
.legal { border-top:1px solid var(--line); padding:1.2rem 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-size:.85rem; color:#7f838b; }
.legal a { color:#a9adb5; }
@media (max-width:880px) { .fgrid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .fgrid { grid-template-columns:1fr; } }

/* sticky call on phones */
.callbar { display:none; }
@media (max-width:640px) {
  .callbar { display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:40; gap:.5rem; }
  .callbar .btn { flex:1; box-shadow:0 12px 30px -8px rgba(0,0,0,.5); padding:.8em .6em; }
  body { padding-bottom:78px; }
}

.reveal { opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .road { animation:none; } .reveal { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; } }
@media (min-width:761px) { .cta .wrap { padding-bottom:8.5rem; } }
  /* ---------- inner pages ---------- */
  nav.links a.on { color:var(--red); }
  .page-hero { position:relative; color:#fff; overflow:hidden; padding:clamp(3rem, 7vw, 5rem) 0 clamp(3rem, 7vw, 4.5rem);
    background:radial-gradient(900px 400px at 90% -20%, rgba(214,32,42,.3), transparent 60%), linear-gradient(180deg, #17181c, var(--asphalt)); }
  .page-hero::before { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size:4px 4px; }
  .page-hero .wrap { position:relative; }
  .page-hero h1 { font-size:clamp(2.6rem, 6vw, 4.4rem); max-width:16ch; }
  .page-hero h1 em { font-style:normal; color:var(--red); }
  .page-hero .lede { color:#c9ccd2; font-size:1.12rem; max-width:36em; margin:1.2rem 0 1.8rem; }
  .page-hero .ctas { display:flex; flex-wrap:wrap; gap:.8rem; }
  .page-hero.slim { padding:clamp(2.5rem, 5vw, 3.5rem) 0; }
  .btn.outline { background:transparent; color:var(--ink); border-color:var(--ink); }
  .btn.outline:hover { background:var(--ink); color:#fff; box-shadow:none; }
  .plain { padding:clamp(3rem, 7vw, 5rem) 0; }
  .plain.alt { background:#ebe9e4; }
  .ticks { list-style:none; padding:0; margin:1rem 0 1.6rem; display:grid; gap:.55rem; }
  .ticks li { display:flex; gap:.6rem; align-items:flex-start; }
  .ticks svg { width:21px; height:21px; color:var(--red); flex:none; margin-top:.15rem; }

  .jump { background:#fff; border-bottom:1px solid #e4e2dc; position:sticky; top:83px; z-index:20; }
  .jump .wrap { display:flex; gap:.4rem; overflow-x:auto; padding:.7rem 0; scrollbar-width:none; }
  .jump .wrap::-webkit-scrollbar { display:none; }
  .jump a { display:flex; align-items:center; gap:.5rem; flex:none; text-decoration:none; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.98rem; padding:.35rem .8rem .35rem .35rem; border-radius:999px; border:1px solid #e4e2dc; }
  .jump a:hover { border-color:var(--red); color:var(--red); }
  .jump .sign { width:30px; height:30px; margin:0; }
  .jump .sign::before { inset:5px; border-width:2px; box-shadow:0 0 0 1.5px #fff, 0 0 0 3px var(--red); border-radius:4px; }
  .jump .sign svg { width:14px; height:14px; }
  .svc-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:center; padding:clamp(2.5rem, 5vw, 4rem) 0; border-bottom:1px solid #e4e2dc; scroll-margin-top:150px; }
  .svc-row:last-child { border-bottom:0; }
  .svc-row.flip > :first-child { order:2; }
  .svc-row h2 { font-size:clamp(2rem, 4vw, 2.8rem); }
  .svc-row .sub { font-size:1.15rem; color:#4f525a; margin:.6rem 0 0; }
  .svc-row .ctas { display:flex; flex-wrap:wrap; gap:.7rem; }
  .svc-photo { border-radius:14px; overflow:hidden; box-shadow:0 30px 50px -30px rgba(0,0,0,.45); }
  .svc-photo img { width:100%; height:auto; aspect-ratio:1140/500; object-fit:cover; }
  .svc-sign { aspect-ratio:1140/500; border-radius:14px; display:grid; place-items:center; background:repeating-linear-gradient(135deg, #ecebe6 0 22px, #f4f3f0 22px 44px); border:1px solid #e4e2dc; }
  .sign.big { width:150px; height:150px; margin:0; }
  .sign.big::before { inset:12px; border-width:6px; border-radius:14px; box-shadow:0 0 0 6px #fff, 0 0 0 11px var(--red); }
  .sign.big svg { width:62px; height:62px; }
  @media (max-width:820px) { .svc-row { grid-template-columns:1fr; } .svc-row.flip > :first-child { order:0; } .jump { top:83px; } }

  .score-bar { display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-bottom:2rem; }
  .score-bar b { font-family:var(--display); font-weight:800; font-size:4rem; line-height:1; }
  .score-bar .stars { font-size:1.4rem; } .score-bar small { display:block; color:#5c5f66; }

  .req-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:2rem; align-items:start; }
  .req-form { background:#fff; border:1px solid #e4e2dc; border-radius:14px; overflow:hidden; border-top:6px solid var(--red); }
  .req-form iframe { display:block; width:100%; height:760px; border:0; }
  .req-side { display:grid; gap:1rem; position:sticky; top:110px; }
  .side-card { background:#fff; border:1px solid #e4e2dc; border-radius:14px; padding:1.5rem; }
  .side-card h3 { font-size:1.6rem; margin-bottom:.4rem; }
  .side-card p { color:#5c5f66; margin-bottom:1rem; }
  .side-card .ticks { margin-bottom:0; }
  .side-card.dark { background:var(--asphalt); color:#fff; border-color:var(--asphalt); }
  .side-card.dark p { color:#b9bcc3; }
  .side-card .btn { width:100%; }
  @media (max-width:900px) { .req-grid { grid-template-columns:1fr; } .req-side { position:static; } }

  .steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; counter-reset:st; }
  .steps li { counter-increment:st; background:#fff; border:1px solid #e4e2dc; border-radius:12px; padding:1.4rem 1.4rem 1.2rem 4.4rem; position:relative; }
  .steps li::before { content:counter(st); position:absolute; left:1.2rem; top:1.2rem; width:2.3rem; height:2.3rem; display:grid; place-items:center; background:var(--red); color:#fff; font-family:var(--display); font-weight:800; font-size:1.3rem; transform:rotate(45deg); border-radius:5px; }
  .steps li::before { content:""; }
  .steps li::after { content:counter(st); position:absolute; left:1.2rem; top:1.2rem; width:2.3rem; height:2.3rem; display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:800; font-size:1.25rem; }
  .steps b { font-family:var(--display); font-size:1.35rem; text-transform:uppercase; display:block; margin-bottom:.2rem; }
  .steps p { margin:0; color:#5c5f66; }
  @media (max-width:900px) { .steps { grid-template-columns:1fr 1fr; } }
  @media (max-width:560px) { .steps { grid-template-columns:1fr; } }
  .tip-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
  .tip-card { background:#fff; border-radius:12px; padding:1.6rem; border:1px solid #e0ddd6; }
  .tip-card h3 { font-size:1.6rem; }
  .tip-note { text-align:center; margin-top:2rem; color:#4f525a; }
  .tip-note a { color:var(--red); font-weight:600; }
  @media (max-width:880px) { .tip-grid { grid-template-columns:1fr; } }

  .legal-grid { display:grid; grid-template-columns:260px 1fr; gap:3rem; align-items:start; }
  .toc { position:sticky; top:110px; background:#fff; border:1px solid #e4e2dc; border-radius:12px; padding:1.2rem 1.4rem; }
  .toc h3 { font-size:1.1rem; letter-spacing:.1em; margin-bottom:.6rem; }
  .toc ol { margin:0; padding-left:1.2rem; display:grid; gap:.35rem; font-size:.95rem; }
  .toc a { text-decoration:none; color:#4f525a; } .toc a:hover { color:var(--red); }
  .legal-body { max-width:46rem; }
  .legal-body section { margin-bottom:2rem; scroll-margin-top:110px; }
  .legal-body h2 { font-size:1.7rem; display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; }
  .legal-body h2 span { width:2rem; height:2rem; flex:none; display:grid; place-items:center; background:var(--red); color:#fff; border-radius:6px; font-size:1.1rem; }
  .legal-body p { color:#3d4047; }
  .legal-body .muted { color:#6b6e75; border-top:1px solid #e4e2dc; padding-top:1.4rem; }
  @media (max-width:820px) { .legal-grid { grid-template-columns:1fr; } .toc { position:static; } }

  .socials-feed { padding:clamp(3rem, 6vw, 5rem) 0; background:#ebe9e4; }
  .socials-feed .work-head { margin-bottom:1.6rem; }
