:root{
/* Locked direction palette (Showroom Light: Cinematic Workmanlike) */
--bg:#FFFFFF; --surface:#FFFFFF; --ink:#0F1B3D; --ink-soft:#5A6478;
--accent:#CC0000; --accent-hover:#A80000; --accent-on:#FFFFFF; --panel:#F2F4F8;
/* Type */
--font-head:'Manrope',system-ui,sans-serif;
--font-body:'Inter',system-ui,sans-serif;
--font-accent:'Fraunces',Georgia,serif;
--radius:6px;
/* Motion tokens (interactions.md §0.1 / §0.2) */
--ease-settle:cubic-bezier(0.25,0.74,0.22,0.99);
--ease-hero:cubic-bezier(0.55,0,0.1,1);
--ease-hover:cubic-bezier(0.4,0,0.2,1);
--dur-hover:200ms; --dur-reveal:800ms; --dur-settle:600ms; --dur-hero:900ms;
--header-h:76px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; }
body{
font-family:var(--font-body);
color:var(--ink); background:var(--bg);
font-size:clamp(16px,1rem + 0.1vw,17px);
line-height:1.6; -webkit-font-smoothing:antialiased;
font-synthesis:none;
}
/* overflow contract (§0.4.3): clip, never hidden, so sticky survives */
.page{overflow-x:clip;}
img{display:block;max-width:100%}
a{color:inherit}
/* =====================================================================
3.4 Universal focus-visible rings (keyboard-accessible everywhere)
2px accent outline + 4px offset. We replace the default ring with a
crisp on-brand one; we NEVER leave `outline:none` dangling (3.8).
===================================================================== */
:focus{outline:none} /* paired replacement below, never bare */
:focus-visible{
outline:2px solid var(--accent);
outline-offset:4px;
border-radius:3px;
}
/* On dark/photo surfaces the accent ring can wash out; add a white halo
so the ring reads on both light and dark backgrounds. */
.site-header :focus-visible,.hero :focus-visible,.svc-card:focus-visible,
.pullquote-section :focus-visible,.closer :focus-visible,.call-bar :focus-visible,
.floating-cta:focus-visible,.drawer :focus-visible{
outline-color:var(--accent);
box-shadow:0 0 0 4px rgba(255,255,255,.55);
}
h1,h2,h3{font-family:var(--font-head);font-weight:800;line-height:1.05;letter-spacing:-0.02em;margin:0;
text-wrap:pretty;text-wrap:balance}
/* P-005 orphan prevention (MANDATORY): balance headings + heading-adjacent short blocks */
.hero-sub,.lede,.eyebrow,.svc-lede,.faq .sub,.pullquote blockquote{text-wrap:balance}
.accent-serif{font-family:var(--font-accent);font-style:italic;font-weight:500;letter-spacing:-0.01em;}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#fff;
padding:.7rem 1.1rem;border-radius:0 0 var(--radius) 0;font-family:var(--font-head);font-weight:700}
.skip:focus{left:0}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
font-family:var(--font-head);font-weight:700;font-size:1rem;
padding:.9rem 1.5rem;border-radius:var(--radius);
min-height:48px;text-decoration:none;cursor:pointer;border:1.5px solid transparent;
touch-action:manipulation;
transition:background-color var(--dur-hover) var(--ease-hover),
color var(--dur-hover) var(--ease-hover),
border-color var(--dur-hover) var(--ease-hover),
transform var(--dur-hover) var(--ease-hover);
}
/* 3.6 gradient fill (not flat) + 3.7 deep shadow that sharpens on hover */
.btn-primary{
background:linear-gradient(135deg,var(--accent) 0%,var(--accent-hover) 100%);
color:var(--accent-on);border-color:var(--accent);
box-shadow:0 10px 26px -12px rgba(204,0,0,.62),0 3px 8px -4px rgba(11,20,46,.4);
}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-ghost.on-light{color:var(--ink);border-color:var(--ink-soft)}
@media (hover:hover){
.btn-primary:hover{
background:linear-gradient(135deg,var(--accent-hover) 0%,#8f0000 100%);
border-color:var(--accent-hover);transform:translateY(-1px);
box-shadow:0 16px 36px -12px rgba(204,0,0,.82),0 5px 12px -4px rgba(11,20,46,.48);
}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-ghost.on-light:hover{background:rgba(15,27,61,.06)}
}
.btn-primary:active{transform:translateY(0)}
/* =====================================================================
P-003: Transparent -> solid sticky nav
===================================================================== */
.site-header{
position:sticky;top:0;z-index:60;
/* header height == --header-h exactly (via .nav-inner min-height), so the hero's
-header-h pull-up lands flush at the top and 100dvh fills to the bottom */
padding:env(safe-area-inset-top,0px) 0 0;
padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);
/* SSR / no-JS fallback: render SOLID (legible without scrim) */
background:var(--surface);
border-bottom:1px solid rgba(15,27,61,.10);
box-shadow:0 6px 24px -18px rgba(15,27,61,.5);
}
/* When JS is active, start transparent over the hero */
html.js-motion .site-header{
background:transparent;border-bottom-color:transparent;box-shadow:none;
transition:background-color var(--dur-settle) var(--ease-settle),
border-color var(--dur-settle) var(--ease-settle),
box-shadow var(--dur-settle) var(--ease-settle);
}
html.js-motion .site-header.is-solid{
background:var(--surface);
border-bottom-color:rgba(15,27,61,.10);
box-shadow:0 6px 24px -18px rgba(15,27,61,.5);
}
/* ===================================================================
Cinematic hero (homepage): the car drives in (video), then the logo
+ hero content enter. Header + scroll-cue wait for .hero-entered.
=================================================================== */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;background:transparent}
/* Real poster image under the video: the LCP element on first paint; the video
covers it once it can play. Same framing as the video for a seamless handoff. */
.hero-poster-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;background:var(--ink)}
/* On narrow screens the wide clip crops tight; shift the framing left so the car
sits left-of-center and reads cleanly (the centered ghost logo is a separate layer). */
@media (max-width:760px){ .hero-vid,.hero-poster-img{object-position:58% 50%} }
html.js-motion .cinematic-hero .site-header{
opacity:0;
transition:background-color var(--dur-settle) var(--ease-settle),
border-color var(--dur-settle) var(--ease-settle),
box-shadow var(--dur-settle) var(--ease-settle),
opacity .8s var(--ease-settle);
}
html.js-motion .cinematic-hero.hero-entered .site-header{opacity:1}
html.js-motion .cinematic-hero .scroll-cue{opacity:0;transition:opacity .6s var(--ease-settle)}
html.js-motion .cinematic-hero.hero-entered .scroll-cue{opacity:.85}
@media (prefers-reduced-motion: reduce){
html.js-motion .cinematic-hero .site-header,
html.js-motion .cinematic-hero .scroll-cue{opacity:1;transition:none}
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex-shrink:0}
.brand img{height:38px;width:auto}
@media (max-width:480px){ .brand img,.brand-logo{height:32px} }
/* Adaptive logo: white wordmark over the transparent (dark) header, dark wordmark when solid.
Default = dark (covers no-JS solid header on white); light only over the transparent state. */
.brand-logo{height:38px;width:auto;display:block}
.brand-logo--light{display:none}
html.js-motion .site-header:not(.is-solid) .brand-logo--light{display:block}
html.js-motion .site-header:not(.is-solid) .brand-logo--dark{display:none}
/* Ghost wordmark: faint centered brand mark during the cinematic load; fades on entrance */
.hero-ghost{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none}
/* CSS background (not an ![]()
) so the ghost is NOT an LCP candidate; the full-bleed
hero poster becomes the LCP instead. */
.hero-ghost::before{content:"";width:clamp(120px,17vw,250px);aspect-ratio:1;
background:url(/assets/images/logo-mark.png) center/contain no-repeat;
filter:drop-shadow(0 4px 40px rgba(0,0,0,.5));
animation:ghost-fade 3s var(--ease-settle) forwards}
@keyframes ghost-fade{from{opacity:.38}to{opacity:0}}
@media (prefers-reduced-motion: reduce){ .hero-ghost{display:none} }
/* Internal-page hero bands inherit the homepage's transparent-nav-on-load: pull the
dark band up UNDER the sticky header so the white logo + nav stay legible on load. */
.svc-hero, .page-head, .page-hero, .about-hero{ margin-top:calc(-1 * var(--header-h)); }
/* ---------- Internal-page hero imagery (shared) ----------
Add `hero-photo` to any internal hero and drop
![]()