/* Generated from theme.css + site.css. Edit those files, then run scripts/render-site-data.php. */

/* Clean Getaway theme
   Borrow this file for admin.cleangetaway.pro.
   Load it from https://cleangetaway.pro/css/theme.css so fonts resolve,
   or copy public_html/assets/fonts/ with it.
   Do not import main.css / site.css; those are marketing-page styles. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/permanent-marker-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/saira-italic-800-latin.woff2') format('woff2');
}

:root {
  --navy-950: #070f1e;
  --navy-900: #0a1930;
  --navy-850: #071428;
  --navy-800: #102a4c;
  --navy-700: #071326;
  --blue-700: #163e6e;
  --blue-500: #2068b3;
  --blue-300: #71b5ea;
  --orange-500: #f5a623;
  --orange-600: #e8720c;
  --ice-100: #eaf2ff;
  --ice-200: #c4d4e5;
  --ice-300: #b8c9e0;
  --ink: #07101f;
  --panel: rgba(16, 42, 76, .74);
  --line: rgba(111, 187, 255, .28);
  --shadow: 0 24px 80px rgba(0, 0, 0, .4);
  --warn: #ffbf69;
  --max: 1200px;
  --radius: .75rem;
  --radius-sm: .35rem;
  --font-display: Saira, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
body { margin: 0; overflow-x: hidden; background: var(--navy-950); color: var(--ice-300); font: 400 1rem/1.65 var(--font-body); }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(circle at 75% 8%, rgba(30, 143, 255, .16), transparent 34%), linear-gradient(130deg, transparent 0 47%, rgba(30, 143, 255, .04) 47% 48%, transparent 48%); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--blue-300); outline-offset: 4px; }

.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 100; transform: translateY(-150%); padding: .7rem 1rem; background: var(--ice-100); color: var(--navy-950); }
.skip-link:focus { transform: none; }
.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; }

.container { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; }
.eyebrow { margin: 0 0 .6rem; color: var(--blue-300); font: 800 italic .78rem/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; color: var(--ice-100); font-family: var(--font-display); font-style: italic; font-weight: 800; letter-spacing: -.035em; line-height: .98; text-transform: uppercase; }
h1 { max-width: 13ch; font-size: clamp(3rem, 6vw, 5rem); }
h2 { font-size: clamp(2.25rem, 5vw, 4.25rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
.lead { max-width: 62ch; font-size: clamp(1.05rem, 2vw, 1.22rem); }
.marker { color: var(--orange-500); font-family: "Permanent Marker", cursive; font-style: normal; text-transform: none; }
.muted, small { color: var(--ice-300); }

.button { position: relative; display: inline-flex; min-height: 48px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid transparent; border-radius: var(--radius-sm); padding: .75rem 1.2rem; color: var(--ink); background: linear-gradient(120deg, var(--orange-500), var(--orange-600)); box-shadow: 0 8px 28px rgba(232, 114, 12, .22); font-weight: 800; text-decoration: none; cursor: pointer; }
.button::after, .gloss::after { content: ""; position: absolute; inset: -100% -40%; transform: translateX(-70%) rotate(18deg); background: linear-gradient(90deg, transparent 35%, rgba(255, 255, 255, .4), transparent 65%); transition: transform .6s ease; pointer-events: none; }
.button:hover::after, .gloss:hover::after { transform: translateX(65%) rotate(18deg); }
.button--ghost { border-color: var(--blue-500); color: var(--ice-100); background: rgba(7, 15, 30, .48); box-shadow: none; }
.button--small { min-height: 42px; padding: .55rem .9rem; }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; background: linear-gradient(145deg, rgba(20, 53, 94, .94), rgba(8, 24, 46, .92)); box-shadow: var(--shadow); }
.card::before { content: ""; position: absolute; top: 0; right: 12%; left: 0; height: 2px; background: linear-gradient(90deg, var(--blue-300), transparent); box-shadow: 0 0 14px var(--blue-500); }
.card--popular { border-color: var(--orange-500); }
.badge { display: inline-block; margin-bottom: 1rem; padding: .25rem .5rem; color: var(--ink); background: var(--orange-500); font: 800 italic .72rem/1 var(--font-display); letter-spacing: .08em; }
.badge--blue { background: var(--blue-300); }

.toggle { display: inline-flex; flex-wrap: wrap; gap: .35rem; border: 1px solid var(--line); border-radius: .5rem; padding: .3rem; background: rgba(7, 15, 30, .7); }
.toggle button { border: 0; border-radius: .3rem; padding: .65rem .85rem; color: var(--ice-300); background: transparent; cursor: pointer; }
.toggle button[aria-pressed="true"] { color: var(--navy-950); background: var(--blue-300); font-weight: 800; }

.accordion { display: grid; gap: .7rem; }
.accordion-item { border: 1px solid var(--line); border-radius: .5rem; background: rgba(16, 42, 76, .48); }
.accordion-button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; border: 0; padding: 1.15rem; color: var(--ice-100); background: transparent; font-weight: 600; text-align: left; cursor: pointer; }
.accordion-button::after { content: "+"; color: var(--blue-300); font-size: 1.5rem; }
.accordion-button[aria-expanded="true"]::after { content: "−"; }
.accordion-panel { padding: 0 1.15rem 1.15rem; }
.accordion-panel[hidden] { display: none; }

.fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.field { display: grid; gap: .35rem; }
.field[hidden] { display: none; }
.field--wide { grid-column: 1 / -1; }
.field label { color: var(--ice-100); font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem; color: var(--ice-100); background: var(--navy-700); }
.field textarea { min-height: 110px; resize: vertical; }
.form-error { color: #ffd0c3; }

.price-table { width: 100%; margin-top: 1.5rem; border-collapse: collapse; border: 1px solid var(--line); background: rgba(7, 15, 30, .48); }
.price-table caption { padding: 0 0 .7rem; color: var(--ice-100); font: 800 italic 1.25rem/1 var(--font-display); text-align: left; text-transform: uppercase; }
.price-table th, .price-table td { border-bottom: 1px solid var(--line); padding: .8rem 1rem; text-align: left; }
.price-table th { color: var(--blue-300); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.price-table td:not(:first-child), .price-table th:not(:first-child) { text-align: right; }
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table strong { color: var(--ice-100); }

.dialog,
.service-dialog,
.addon-dialog { max-width: none; overflow: auto; border: 1px solid rgba(113, 181, 234, .46); border-radius: 1rem; padding: 0; color: var(--ice-300); background: var(--navy-850); }
.dialog { width: min(720px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); box-shadow: 0 32px 100px rgba(0, 0, 0, .75); }
.dialog::backdrop,
.service-dialog::backdrop,
.addon-dialog::backdrop { background: rgba(2, 7, 15, .84); backdrop-filter: blur(10px); }
.dialog__shell,
.service-dialog__shell,
.addon-dialog__shell { position: relative; padding: clamp(1.2rem, 4vw, 2.5rem); background: radial-gradient(circle at 85% 5%, rgba(32, 104, 179, .22), transparent 34%), linear-gradient(145deg, #0b213b, #050c17 72%); }
.dialog__close,
.service-dialog__close,
.addon-dialog__close { position: absolute; top: 1rem; right: 1rem; z-index: 2; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .45rem .7rem; color: var(--ice-100); background: rgba(7, 15, 30, .82); font-size: .78rem; font-weight: 800; text-transform: uppercase; cursor: pointer; }

.readout,
.wheel-hero__readout,
.trim-hero__readout,
.city-readout { border: 1px solid rgba(113, 181, 234, .42); border-radius: .8rem; padding: 1.5rem; background: linear-gradient(145deg, rgba(7, 15, 30, .93), rgba(16, 42, 76, .72)); box-shadow: 0 24px 70px rgba(0, 0, 0, .4), inset 0 0 38px rgba(32, 104, 179, .12); }
.readout > span,
.wheel-hero__readout > span,
.trim-hero__readout > span,
.city-readout > span { color: var(--orange-500); font: 800 italic .72rem/1 var(--font-display); letter-spacing: .15em; text-transform: uppercase; }
.readout > strong,
.wheel-hero__readout > strong,
.trim-hero__readout > strong,
.city-readout > strong { display: block; margin: .65rem 0 1.2rem; color: var(--ice-100); font: 800 italic clamp(1.45rem, 3vw, 2.1rem)/1.05 var(--font-display); text-transform: uppercase; }
.readout ul,
.wheel-hero__readout ul,
.trim-hero__readout ul,
.city-readout ul { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.readout li,
.wheel-hero__readout li,
.trim-hero__readout li { border-top: 1px solid rgba(113, 181, 234, .2); padding-top: .6rem; color: var(--ice-100); font-weight: 700; }
.readout b,
.wheel-hero__readout b { margin-right: .7rem; color: var(--blue-300); font: 800 italic .82rem/1 var(--font-display); }

.note { margin: 1.5rem 0 0; padding: 1rem 1.2rem; background: var(--navy-850); border-left: 3px solid var(--orange-500); }

@media (max-width: 700px) {
  .fields { grid-template-columns: 1fr; }
  .field--wide { grid-column: auto; }
  .dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
  .dialog__shell { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Marketing page styles. Load after theme.css.
   Generated with theme.css into main.css for the public site. */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(111,187,255,.2); background: rgba(7,15,30,.84); backdrop-filter: blur(18px); }
.nav { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 1rem; }
.brand img { width: 250px; max-height: 76px; height: auto; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 1.35rem; }
.nav-links a { text-decoration: none; font-weight: 600; }
.nav-links > a:not(.button) { position: relative; padding: .5rem 0; }
.nav-links > a:not(.button)::after { position: absolute; right: 0; bottom: .22rem; left: 0; height: 2px; transform: scaleX(0); transform-origin: left; background: var(--orange-500); content: ""; transition: transform .2s ease; }
.nav-links > a:not(.button):hover::after, .nav-links > a:not(.button):focus-visible::after, .nav-links > a:not(.button)[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a:not(.button):hover, .nav-links a[aria-current="page"] { color: var(--blue-300); }
.nav-menu { position: relative; }
.nav-menu::after { position: absolute; top: 100%; right: -1rem; left: -1rem; height: .6rem; content: ""; }
.nav-menu__trigger { position: relative; display: inline-flex; align-items: center; border: 0; padding: .5rem 0; color: inherit; background: transparent; font-weight: 600; cursor: pointer; }
.nav-menu__trigger::after { position: absolute; right: 0; bottom: .22rem; left: 0; height: 2px; transform: scaleX(0); transform-origin: left; background: var(--orange-500); content: ""; transition: transform .2s ease; }
.nav-menu:hover .nav-menu__trigger::after, .nav-menu:focus-within .nav-menu__trigger::after, .nav-menu.is-current .nav-menu__trigger::after { transform: scaleX(1); }
.nav-menu__panel { position: absolute; top: calc(100% + .45rem); left: -1rem; display: none; min-width: 220px; border: 1px solid var(--line); border-radius: .55rem; padding: .45rem; background: rgba(7, 19, 38, .98); box-shadow: var(--shadow); }
.nav-menu__panel a { display: block; border-radius: .35rem; padding: .65rem .75rem; white-space: nowrap; }
.nav-menu__panel a:hover, .nav-menu__panel a[aria-current="page"] { color: var(--ice-100); background: rgba(30, 143, 255, .16); }
.nav-menu.is-open .nav-menu__panel { display: grid; }
.nav-menu.is-current .nav-menu__trigger { color: var(--blue-300); }
.nav-toggle { display: none; border: 1px solid var(--line); border-radius: .4rem; background: var(--navy-900); color: var(--ice-100); padding: .55rem .7rem; }

.diagonal-section { position: relative; margin-top: -1px; padding: clamp(5rem, 9vw, 8rem) 0; background: var(--navy-900); clip-path: polygon(0 2.1rem, 72% 0, 100% 2.1rem, 100% calc(100% - 2.1rem), 28% 100%, 0 calc(100% - 2.1rem)); }
.diagonal-section::before { content: ""; position: absolute; top: 1.4rem; left: 0; width: 100%; height: 2px; transform: rotate(-1.3deg); background: var(--blue-500); box-shadow: 0 0 18px var(--blue-500); }
.diagonal-section:nth-of-type(even) { background: linear-gradient(135deg, var(--navy-950), var(--navy-800)); clip-path: polygon(0 0, 72% 2.1rem, 100% 0, 100% 100%, 28% calc(100% - 2.1rem), 0 100%); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }

.hero { position: relative; min-height: 760px; overflow: hidden; background: #050c17; }
.hero-grid { display: grid; min-height: 760px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
.hero-copy { position: relative; z-index: 3; padding: 7rem 2rem 7rem 0; }
.hero-copy h1 { font-size: clamp(3rem, 5vw, 4.75rem); }
.hero-copy .lead { max-width: 48ch; }
.hero-media { position: absolute; inset: 0 0 0 32%; overflow: hidden; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
.hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--navy-950) 0, transparent 38%), linear-gradient(0deg, var(--navy-950), transparent 35%), rgba(10,39,76,.18); box-shadow: inset 0 0 120px #000; }
.hero-media::after { content: ""; position: absolute; inset: -10% 0; z-index: 2; width: 2px; transform: skewX(-15deg); background: var(--blue-500); box-shadow: 0 0 24px var(--blue-500), -5px 0 var(--orange-500); }
.hero-media picture { display: contents; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero-proof { max-width: 52ch; margin-top: 1rem; color: var(--ice-300); font-size: .8rem; }
.light-bars { position: absolute; inset: 8% 3% auto auto; z-index: 2; display: flex; gap: 5rem; }
.light-bars i { width: 3px; height: 170px; background: linear-gradient(transparent, var(--blue-300), transparent); box-shadow: 0 0 16px var(--blue-300); }
.hero-sweep { position: absolute; inset: 0; z-index: 3; transform: translateX(-150%) skewX(-15deg); background: linear-gradient(90deg, transparent, rgba(111,187,255,.12), transparent); animation: hero-sweep 1.5s .35s ease-out both; pointer-events: none; }
@keyframes hero-sweep { to { transform: translateX(150%) skewX(-15deg); } }

.trust-bar { position: relative; z-index: 4; margin-block: -1rem; border-block: 1px solid var(--line); padding-block: 1rem; background: #071428; clip-path: polygon(0 0, 72% 1rem, 100% 0, 100% 100%, 28% calc(100% - 1rem), 0 100%); }
.trust-list { display: grid; grid-template-columns: repeat(4, 1fr); margin-block: 0; padding: 1rem 0; list-style: none; }
.trust-list li { padding: .35rem 1rem; border-right: 1px solid var(--line); color: var(--ice-100); text-align: center; font: 600 .82rem/1.35 Inter, sans-serif; text-transform: uppercase; }
.trust-list li:last-child { border: 0; }

#packages .toggle { flex: 0 0 auto; flex-wrap: nowrap; }
#packages .toggle button { white-space: nowrap; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.price-readout { display: flex; align-items: center; gap: .5rem; margin: 1.2rem 0 0; color: var(--orange-500); font: 800 italic .68rem/1 Saira, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.price-readout::before { content: ''; flex: none; width: .6rem; height: 2px; background: var(--blue-300); box-shadow: 0 0 6px rgba(113,181,234,.8); }
.price { display: flex; align-items: flex-start; margin: 1.1rem 0; color: var(--ice-100); font: 800 italic 3rem/1 Saira, sans-serif; }
.price-readout + .price { margin-top: .45rem; }
.price span { margin-top: .25rem; color: var(--orange-500); font-size: 1rem; text-shadow: 0 0 10px rgba(245,166,35,.45); }
.price strong { --price-fill: linear-gradient(180deg, #fff 0%, var(--ice-100) 42%, var(--blue-300) 100%); background: var(--price-fill); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.03em; filter: drop-shadow(0 0 12px rgba(113,181,234,.5)) drop-shadow(0 2px 0 rgba(32,104,179,.35)); }
.price strong, .service-price strong { padding-right: .12em; font-variant-numeric: tabular-nums; }
.price strong i, .service-price strong i { display: inline-block; height: 1em; padding-right: .12em; margin-right: -.12em; vertical-align: top; font-style: inherit; clip-path: inset(0 -.3em); }
.price strong b, .service-price strong b { display: block; height: 1em; font-weight: inherit; }
/* While rolling, only the moving <b> may paint the gradient: a text clip on an ancestor would paint a stationary ghost of the digit. */
.price strong.is-rolling, .price strong .odo { background: none; }
.price strong i:not(.odo), .price strong .odo b { background: var(--price-fill); -webkit-background-clip: text; background-clip: text; }
.odo--up b { animation: odo-up .55s cubic-bezier(.2, .75, .2, 1) var(--odo-delay, 0s) both; }
.odo--down b { animation: odo-down .55s cubic-bezier(.2, .75, .2, 1) var(--odo-delay, 0s) both; }
.odo--in { animation: odo-grow .55s cubic-bezier(.2, .75, .2, 1) var(--odo-delay, 0s) both; }
.odo--out { animation: odo-shrink .55s cubic-bezier(.2, .75, .2, 1) var(--odo-delay, 0s) both; }
@keyframes odo-up { from { transform: translateY(0); } to { transform: translateY(-1em); } }
@keyframes odo-down { from { transform: translateY(-1em); } to { transform: translateY(0); } }
@keyframes odo-grow { from { width: 0; } to { width: .62em; } }
@keyframes odo-shrink { from { width: .62em; } to { width: 0; } }
.check-list { min-height: 10rem; padding-left: 1.2rem; }
.check-list li::marker { color: var(--blue-300); }
.card .button { width: 100%; margin-top: 1rem; }
.package-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.package-cards .card { display: flex; flex-direction: column; }
.package-cards .check-list { min-height: 0; flex: 1; }
.package-cards .button { margin-top: auto; }
.package-cards .card--wide { display: grid; grid-column: span 2; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); grid-template-areas: "intro list" "button button"; column-gap: 2rem; }
.card--wide__intro { grid-area: intro; }
.package-cards .card--wide .check-list { grid-area: list; margin-top: 0; }
.package-cards .card--wide .button { grid-area: button; }
.quote-line { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .6rem; background: rgba(7,15,30,.54); }

.comparison { position: relative; min-height: clamp(320px, 52vw, 620px); overflow: hidden; border: 1px solid var(--line); border-radius: .8rem; background: #050a12; box-shadow: var(--shadow); touch-action: none; }
.comparison > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) saturate(.8) contrast(1.08); }
.comparison-after { clip-path: inset(0 0 0 var(--position, 50%)); }
.comparison::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 100px rgba(0,0,0,.65), inset 0 0 55px rgba(30,143,255,.15); pointer-events: none; }
.comparison-handle { position: absolute; top: 0; bottom: 0; left: var(--position, 50%); z-index: 4; width: 3px; border: 0; padding: 0; background: var(--blue-300); box-shadow: 0 0 22px var(--blue-300); cursor: ew-resize; }
.comparison-handle::after { content: "↔"; position: absolute; top: 50%; left: 50%; display: grid; width: 52px; height: 52px; place-items: center; transform: translate(-50%,-50%); border: 2px solid var(--blue-300); border-radius: 50%; color: var(--ice-100); background: var(--navy-900); box-shadow: 0 0 24px var(--blue-500); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 36px var(--blue-300); } }
.comparison-label { position: absolute; bottom: 1rem; z-index: 3; border: 1px solid var(--line); padding: .35rem .65rem; background: rgba(7,15,30,.82); color: var(--ice-100); font-weight: 600; }
.comparison-label:first-of-type { left: 1rem; }
.comparison-label:last-of-type { right: 1rem; }
.work-feature { overflow: hidden; margin: 1.25rem 0 0; border: 1px solid var(--line); border-radius: .8rem; background: #050a12; box-shadow: var(--shadow); }
.work-feature img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.work-feature figcaption { padding: .85rem 1rem; color: var(--ice-100); background: linear-gradient(90deg, rgba(16,42,76,.96), rgba(7,15,30,.96)); }
.work-strip, .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.work-tile { position: relative; min-height: 260px; display: flex; overflow: hidden; flex-direction: column; justify-content: end; border: 1px solid var(--line); border-radius: .65rem; padding: 1.1rem; background: linear-gradient(135deg,#102a4c,#070f1e); box-shadow: inset 0 0 55px rgba(30,143,255,.1); }
.work-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,15,30,.96), rgba(7,15,30,.08)); }
.work-tile strong, .work-tile span { position: relative; z-index: 1; }
.work-tile strong { color: var(--ice-100); }
.placeholder { background: repeating-linear-gradient(135deg, rgba(30,143,255,.08) 0 2px, transparent 2px 16px), linear-gradient(145deg,#102a4c,#070f1e); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.3rem; counter-reset: steps; }
.step { position: relative; counter-increment: steps; }
.step::before { content: "0" counter(steps); display: block; margin-bottom: .75rem; color: var(--blue-300); font: 800 italic 3rem/1 Saira, sans-serif; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 2rem; left: calc(100% + .2rem); width: 2.1rem; height: 2px; transform: rotate(-25deg); background: var(--blue-500); box-shadow: 0 0 12px var(--blue-500); }

.area-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: center; }
.service-map { width: 100%; }
.service-map__frame { position: relative; width: 100%; aspect-ratio: 620 / 430; overflow: hidden; isolation: isolate; border: 1px solid #29577f; border-radius: 1rem 4rem 1rem 4rem; background: #071326; box-shadow: inset 0 0 70px #000, 0 0 40px rgba(30,143,255,.14); }
.service-map__frame::after { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 60px rgba(0,0,0,.62); pointer-events: none; }
.service-map__intro { margin-top: .9rem; border-left: 2px solid var(--orange-500); padding: .3rem .75rem; color: var(--ice-100); }
.service-map__intro strong, .service-map__intro span { display: block; }
.service-map__intro strong { font: 800 italic .78rem/1.1 Saira, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.service-map__intro span { margin-top: .25rem; color: var(--ice-300); font-size: .78rem; }
.service-map__base { position: absolute; inset: 0; width: 100%; height: 100%; }
.service-map .radar-sweep { transform-origin: 310px 215px; }
.service-map__compass { fill: #6fbbff; font: 700 10px Inter, sans-serif; opacity: .75; text-anchor: middle; }
.service-map__city { position: absolute; top: var(--y); left: var(--x); z-index: 3; width: 34px; height: 34px; transform: translate(-50%,-50%); border: 0; padding: 0; color: var(--ice-100); background: transparent; cursor: pointer; }
.service-map__city:hover, .service-map__city:focus { z-index: 5; }
.service-map__city::before { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; transform: translate(-50%,-50%); border: 2px solid #d8edff; border-radius: 50%; background: var(--blue-300); box-shadow: 0 0 0 4px rgba(111,187,255,.13), 0 0 15px rgba(111,187,255,.8); transition: transform .18s ease, box-shadow .18s ease; }
.service-map__city--home::before { width: 17px; height: 17px; border-color: #ffe2ac; background: var(--orange-500); box-shadow: 0 0 0 5px rgba(245,166,35,.14), 0 0 20px rgba(245,166,35,.85); }
.service-map__city:hover::before, .service-map__city:focus-visible::before { transform: translate(-50%,-50%) scale(1.35); box-shadow: 0 0 0 7px rgba(111,187,255,.19), 0 0 24px rgba(111,187,255,.95); }
.service-map__city--home:hover::before, .service-map__city--home:focus-visible::before { box-shadow: 0 0 0 8px rgba(245,166,35,.2), 0 0 27px rgba(245,166,35,.95); }
.service-map__city:focus-visible { outline: 2px solid var(--ice-100); outline-offset: 4px; border-radius: 50%; }
.service-map__name { position: absolute; top: 50%; left: 26px; transform: translateY(-50%); color: var(--ice-100); font-size: .72rem; font-weight: 800; line-height: 1; text-shadow: 0 2px 4px #000, 0 0 8px #000; white-space: nowrap; pointer-events: none; }
.service-map__city--east .service-map__name { right: 26px; left: auto; }
.service-map__city--west .service-map__name { left: 22px; }
.service-map__tooltip { position: absolute; bottom: calc(100% + 9px); left: 50%; width: max-content; max-width: 210px; transform: translate(-50%,6px); visibility: hidden; border: 1px solid var(--orange-500); border-radius: .35rem; padding: .55rem .7rem; color: var(--ice-100); background: rgba(4,10,19,.96); box-shadow: 0 10px 24px rgba(0,0,0,.48), 0 0 18px rgba(30,143,255,.2); font-size: .75rem; font-weight: 700; line-height: 1.2; opacity: 0; white-space: nowrap; pointer-events: none; transition: opacity .16s ease, transform .16s ease, visibility .16s ease; }
.service-map__city--west .service-map__tooltip { left: 0; transform: translate(0,6px); }
.service-map__city--east .service-map__tooltip { right: 0; left: auto; transform: translate(0,6px); }
.service-map__city--north .service-map__tooltip { top: calc(100% + 9px); bottom: auto; }
.service-map__city:hover .service-map__tooltip, .service-map__city:focus .service-map__tooltip { visibility: visible; transform: translate(-50%,0); opacity: 1; }
.service-map__city--west:hover .service-map__tooltip, .service-map__city--west:focus .service-map__tooltip, .service-map__city--east:hover .service-map__tooltip, .service-map__city--east:focus .service-map__tooltip { transform: translate(0,0); }
.city-list { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.city-list li { border: 1px solid var(--line); padding: .4rem .75rem; background: rgba(16,42,76,.5); }
.city-list li:has(a) { border: 0; padding: 0; background: none; }
.city-list a { display: inline-flex; min-height: 44px; align-items: center; border: 1px solid var(--blue-500); border-radius: var(--radius-sm); padding: .55rem 1rem; color: var(--ice-100); background: rgba(7,15,30,.48); font-weight: 700; text-decoration: none; transition: transform .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.city-list a:hover, .city-list a:focus-visible { transform: translateY(-3px); border-color: transparent; color: var(--ink); background: linear-gradient(120deg, var(--orange-500), var(--orange-600)); box-shadow: 0 10px 28px rgba(232,114,12,.3); }
.review-grid, .owner-grid, .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.owner-grid--team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.review { min-height: 190px; }
.review blockquote { margin: 1rem 0; color: var(--ice-100); font-size: 1.1rem; }
.review-source, .review-credit { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.review-source { color: var(--ice-300); font-weight: 700; }
.review-stars { color: #fbbc04; letter-spacing: .08em; }
.review-stars--yelp { color: #ff1a1a; }
.review-credit a { font-size: .9rem; }
.portrait { position: relative; min-height: 380px; display: flex; overflow: hidden; align-items: end; background: #071326; }
.portrait > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,15,30,.96), transparent 70%); }
.portrait > :not(img) { position: relative; z-index: 1; }
.team-list { display: grid; gap: 2rem; }
.team-profile { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr); overflow: hidden; border: 1px solid var(--line); border-radius: .75rem; background: linear-gradient(145deg, rgba(20,53,94,.94), rgba(8,24,46,.92)); box-shadow: var(--shadow); }
.team-profile__photo { min-height: 100%; }
.team-profile__photo img { display: block; width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.team-profile__bio { align-self: center; padding: clamp(2rem, 5vw, 4.5rem); }
.team-profile__bio h2 { margin-bottom: .25rem; }
.team-profile__role { margin: 0 0 1.5rem; color: var(--blue-300); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.team-profile__bio p:last-child { margin-bottom: 0; }

.cta-band { padding: 6rem 0; background: linear-gradient(120deg, var(--navy-800), var(--navy-950)); clip-path: polygon(0 2.4rem, 74% 0, 100% 2.4rem, 100% calc(100% - 2.4rem), 30% 100%, 0 calc(100% - 2.4rem)); }
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.site-footer { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--line); padding: 0 0 5rem; background: radial-gradient(ellipse at 0 40%, rgba(32,104,179,.13), transparent 55%), #040a13; }
.site-footer > .brand-rail, .footer-main, .footer-ad, .footer-bottom { position: relative; z-index: 1; }
.brand-rail { position: relative; margin-bottom: 3rem; overflow: hidden; border-block: 1px solid rgba(91,170,255,.2); padding: 2.2rem 0 2.6rem; background: radial-gradient(circle at 18% 0, rgba(36,126,207,.14), transparent 34%), linear-gradient(180deg, rgba(10,28,51,.4), rgba(3,10,20,.08)); }
.brand-rail::after { position: absolute; right: 8%; bottom: 0; left: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(91,170,255,.45), transparent); content: ""; }
.brand-rail__header { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; }
.brand-rail__header h2 { max-width: none; font-size: clamp(1.35rem, 2.5vw, 2rem); }
.brand-rail__controls { display: flex; gap: .45rem; flex: 0 0 auto; }
.brand-rail__controls button { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border: 1px solid rgba(127,190,255,.38); border-radius: 50%; padding: 0; color: var(--ice-100); background: rgba(15,41,76,.82); font: 800 1.45rem/1 Inter, sans-serif; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.brand-rail__controls button:hover { border-color: var(--blue-300); background: var(--blue-700); transform: translateY(-2px); }
.brand-rail__controls button:focus-visible { outline: 3px solid var(--blue-300); outline-offset: 3px; }
.brand-rail__controls [data-brand-toggle] { font-size: .9rem; }
.brand-rail__viewport { position: relative; overflow-x: auto; padding: .45rem max(1.25rem, calc((100vw - 1180px) / 2)); cursor: grab; scrollbar-width: none; touch-action: pan-x pan-y; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); }
.brand-rail__viewport::-webkit-scrollbar { display: none; }
.brand-rail__viewport:focus-visible { outline: 2px solid var(--blue-300); outline-offset: -2px; }
.brand-rail__viewport.is-dragging { cursor: grabbing; user-select: none; }
.brand-rail__track { display: flex; width: max-content; gap: 1.15rem; }
.brand-rail__group { display: flex; gap: 1.15rem; margin: 0; padding: 0; list-style: none; }
.brand-logo { position: relative; display: grid; width: clamp(165px, 15vw, 194px); height: 98px; overflow: hidden; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.32); border-radius: 1rem; padding: 1rem; background: linear-gradient(145deg, #fff, #e8eef6); box-shadow: 0 14px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.9); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.brand-logo::before { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.7), transparent 34%, transparent 66%, rgba(94,168,235,.08)); content: ""; pointer-events: none; }
.brand-logo img { position: relative; z-index: 1; display: block; width: 148px; max-width: 88%; height: 58px; max-height: 72%; object-fit: contain; filter: grayscale(1) drop-shadow(0 0 1px rgba(0,0,0,.7)); opacity: .82; transition: filter .2s ease, opacity .2s ease, transform .2s ease; }
.brand-logo img[src$="adams-polishes.svg"],
.brand-logo img[src$="chemical-guys.svg"],
.brand-logo img[src$="griots-garage.svg"] { width: 72px; height: 72px; max-width: 80%; max-height: 80%; transform: scale(1.35); }
.brand-logo img[src$="carpro.svg"] { transform: scale(1.3); }
.brand-logo img[src$="chemical-guys.svg"] { filter: grayscale(1) drop-shadow(0 0 1px #17283d) drop-shadow(0 0 2px rgba(23,40,61,.8)); opacity: .96; }
.brand-logo img[src$="meguiars.svg"] { filter: grayscale(1) contrast(1.35) drop-shadow(0 0 1px rgba(0,0,0,.7)); opacity: .94; }
.brand-logo:hover { border-color: rgba(87,170,255,.9); box-shadow: 0 17px 42px rgba(0,0,0,.34), 0 0 24px rgba(41,137,223,.12); transform: translateY(-4px); }
.brand-logo:hover img { filter: drop-shadow(0 0 1px rgba(0,0,0,.65)); opacity: 1; transform: scale(1.035); }
.brand-logo:hover img[src$="adams-polishes.svg"],
.brand-logo:hover img[src$="chemical-guys.svg"],
.brand-logo:hover img[src$="griots-garage.svg"] { transform: scale(1.4); }
.brand-logo:hover img[src$="carpro.svg"] { transform: scale(1.36); }
.footer-main { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 6vw, 6rem); padding-block: 0 2rem; }
.footer-contact { min-width: 0; }
.footer-location { margin: .75rem 0 1.25rem; font-size: .85rem; }
.footer-phone { position: relative; display: grid; width: fit-content; gap: .35rem; border-left: 3px solid var(--orange-500); border-radius: 0 .5rem .5rem 0; padding: .75rem 3rem .9rem 1rem; background: linear-gradient(100deg, rgba(245,166,35,.12), rgba(245,166,35,.02)); text-decoration: none; transition: background .2s ease, transform .2s ease; }
.footer-phone__label { color: var(--orange-500); font-size: .65rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.footer-phone__number { color: var(--ice-100); font: 800 italic clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--font-display); white-space: nowrap; }
.footer-phone__arrow { position: absolute; right: 1rem; top: 50%; color: var(--orange-500); font-size: 1.5rem; transform: translateY(-50%); }
.footer-phone:hover { background: rgba(245,166,35,.16); transform: translateX(3px); }
.footer-hours { max-width: 390px; margin: 1rem 0 0; font-size: .76rem; line-height: 1.65; }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-self: start; }
.footer-nav h2 { margin: 0 0 .85rem; color: var(--blue-300); font: 600 .72rem/1.2 var(--font-body); letter-spacing: .15em; text-transform: uppercase; }
.footer-nav ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.footer-nav a { display: flex; min-height: 44px; align-items: center; border: 1px solid var(--line); border-radius: .35rem; padding: .6rem .85rem; background: rgba(16,42,76,.28); color: var(--ice-100); font-size: .82rem; line-height: 1.4; text-decoration: none; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.footer-nav a::after { content: '\2197'; margin-left: auto; padding-left: .5rem; color: var(--blue-300); transition: transform .2s ease; }
.footer-nav a:hover { border-color: var(--blue-300); background: var(--navy-800); transform: translateY(-2px); }
.footer-nav a:hover::after { transform: translate(2px, -2px); }
.footer-ad { width: min(calc(100% - 1rem), var(--max)); margin-inline: auto; border-top: 1px solid var(--line); padding-block: 1.5rem; }
.footer-ad__space { display: flex; justify-content: center; align-items: center; }
.footer-ad__space .signal-slot { flex: 0 1 auto; max-width: 100%; }
/* Signal hides empty or failed placements. Keep its container measurable for resize. */
.footer-ad:has(.signal-slot[style*="display: none"]), .footer-ad.is-unavailable { height: 0; overflow: hidden; border: 0; padding-block: 0; visibility: hidden; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; border-top: 1px solid var(--line); padding-block: 1.5rem; }
.footer-address { margin: 0; color: var(--ice-300); font-size: .68rem; line-height: 1.35; text-align: right; }
.fine-print { margin: 0; font-size: .8rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; }
.footer-legal a { color: var(--ice-300); font-size: .7rem; text-decoration: none; text-underline-offset: .25em; }
.footer-legal a:hover { color: var(--ice-100); text-decoration: underline; }
.footer-suds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.footer-bubbles { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; pointer-events: none; z-index: 30; }
.footer-suds { z-index: 0; }
.footer-foam { position: absolute; inset: auto 0 0; height: 4.5rem; background: linear-gradient(0deg, rgba(169,216,240,.16), transparent 85%); }
.soap-bubble { position: absolute; bottom: 0; width: var(--bubble-size); height: var(--bubble-size); border: 1px solid rgba(216,244,255,.62); border-radius: 50%; background: radial-gradient(ellipse at 28% 23%, rgba(255,255,255,.7) 0 2%, transparent 8%), radial-gradient(ellipse at 68% 80%, rgba(176,139,235,.24), transparent 46%), radial-gradient(circle at 40% 35%, transparent 48%, rgba(139,219,245,.25) 72%, rgba(235,249,255,.48) 98%); box-shadow: inset 2px 3px 6px rgba(236,250,255,.19), inset -2px -3px 5px rgba(93,190,236,.16); }
.soap-bubble::before { position: absolute; top: 12%; left: 17%; width: 34%; height: 19%; border-top: 2px solid rgba(255,255,255,.7); border-radius: 50%; transform: rotate(-35deg); content: ""; }
.footer-foam .soap-bubble { opacity: .55; }
.footer-bubbles .soap-bubble { bottom: auto; opacity: .4; will-change: transform, translate; }
.soap-burst { position: absolute; width: 0; height: 0; pointer-events: none; }
.soap-burst span { position: absolute; width: 2px; height: 7px; border-radius: 50%; background: rgba(211,240,255,.55); box-shadow: 0 0 3px rgba(161,222,255,.2); }
.footer-motion { position: absolute; right: max(1rem, calc((100% - var(--max)) / 2)); bottom: 1rem; z-index: 2; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 50%; padding: 0; color: var(--ice-300); background: rgba(4,10,19,.85); cursor: pointer; }
.footer-motion::after { position: absolute; inset: -4px; border-radius: 50%; content: ""; }
.footer-motion span { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.footer-motion[aria-pressed="true"] span { width: 0; height: 0; margin-left: 3px; border: 6px solid transparent; border-right: 0; border-left: 9px solid currentColor; }
.footer-motion:hover { border-color: var(--blue-300); color: var(--ice-100); }
.footer-motion[hidden] { display: none; }
@media (max-width: 760px) {
  .footer-main { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-contact > img { width: 210px; }
  .footer-nav { gap: .65rem; }
  .footer-nav a { min-height: 58px; padding: .65rem; font-size: .76rem; }
  .footer-foam .soap-bubble:nth-child(even) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-phone, .footer-nav a, .footer-nav a::after { transition: none; }
  .footer-phone:hover, .footer-nav a:hover, .footer-nav a:hover::after { transform: none; }
  .footer-bubbles, .footer-motion { display: none; }
}

.page-hero { min-height: 420px; display: grid; align-items: end; padding: 8rem 0 6rem; background: linear-gradient(90deg, rgba(7,15,30,.98), rgba(7,15,30,.45)), url('/assets/hero-mobile-detailing.webp') center/cover; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.2rem), 30% 100%, 0 calc(100% - 2.2rem)); }
.page-hero.page-hero--booking { min-height: 0; height: 450px; padding: 6rem 0 4.75rem; background-image: linear-gradient(90deg, rgba(7,15,30,.98) 0 24%, rgba(7,15,30,.72) 52%, rgba(7,15,30,.12) 82%), linear-gradient(0deg, rgba(7,15,30,.55), transparent 55%), image-set(url('/assets/book-classic-hero.avif') type('image/avif'), url('/assets/book-classic-hero.webp') type('image/webp')); background-position: center 58%; background-repeat: no-repeat; background-size: cover; }
.page-hero.page-hero--services { background-image: linear-gradient(90deg, rgba(7,15,30,.98) 0 28%, rgba(7,15,30,.76) 49%, rgba(7,15,30,.16) 78%), url('/assets/services-hero-bmw-z4.webp'); background-position: center; }
.page-hero.page-hero--our-work { position: relative; isolation: isolate; overflow: hidden; background-image: linear-gradient(90deg, rgba(7,15,30,.98) 0 25%, rgba(7,15,30,.68) 48%, rgba(7,15,30,.08) 78%), url('/assets/work-porsche-911-turbo-rear.webp'); background-position: 66% 54%; }
.page-hero--our-work > .container { position: relative; z-index: 2; }
.page-hero__video { position: absolute; inset: 0; z-index: 0; display: none; opacity: 0; overflow: hidden; transition: opacity .45s ease; }
.page-hero__video::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,15,30,.98) 0 25%, rgba(7,15,30,.68) 48%, rgba(7,15,30,.08) 78%), linear-gradient(0deg, rgba(7,15,30,.38), transparent 48%); content: ""; }
.page-hero__video video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-hero__video.is-ready { opacity: 1; }
.contact-section { padding-block: clamp(3rem, 7vw, 6rem); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); align-items: start; gap: clamp(1.5rem, 4vw, 3.5rem); }
.contact-panel, .contact-aside { border: 1px solid var(--line); border-radius: .75rem; background: rgba(9,27,50,.88); box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.contact-panel { padding: clamp(1.25rem, 4vw, 2.5rem); }
.contact-panel .section-heading { margin-bottom: 2rem; }
.contact-panel .section-heading a { color: var(--blue-300); }
.contact-form__actions { display: flex; min-height: 52px; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.contact-status { margin: 0; color: var(--blue-300); font-weight: 700; }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-aside { position: sticky; top: 106px; padding: clamp(1.4rem, 3vw, 2rem); border-top-color: var(--orange-500); }
.contact-aside h2 { margin-top: 0; }
.contact-direct { display: block; margin-top: .85rem; color: var(--blue-300); font-weight: 800; overflow-wrap: anywhere; }
.support-turbo { overflow: hidden; }
.support-turbo__avatar { display: block; width: 104px; height: 104px; margin: -.35rem 0 1rem; object-fit: contain; }
.support-turbo .button { margin-top: .65rem; }
.support-privacy { max-width: 58ch; margin: 1rem 0 0; font-size: .82rem; }
.page-hero.page-hero--our-team { background-image: linear-gradient(90deg, rgba(7,15,30,.98) 0 20%, rgba(7,15,30,.72) 42%, rgba(7,15,30,.08) 72%), linear-gradient(0deg, rgba(7,15,30,.7), transparent 46%), url('/assets/team-hero-corvette-detailing.webp'); background-position: center; background-repeat: no-repeat; background-size: cover; }
.page-hero h1 { max-width: 17ch; }

.booking-shell { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.25rem; align-items: start; }
.booking-sidebar { position: sticky; top: 94px; display: grid; gap: 1.25rem; min-width: 0; }
.booking-sidebar:has(.summary[hidden]) { display: none; }
.booking-ad { display: flex; justify-content: center; align-items: center; min-width: 0; border: 1px solid var(--line); border-radius: .75rem; padding: 14px; background: linear-gradient(145deg, rgba(16,42,76,.98), rgba(7,15,30,.98)); box-shadow: var(--shadow); }
.booking-ad .signal-slot { flex: 0 1 auto; max-width: 100%; }
.booking-ad:has(.signal-slot[style*="display: none"]), .booking-ad.is-unavailable { display: none; }
.wizard { min-width: 0; border: 1px solid var(--line); border-radius: .75rem; background: rgba(10,25,48,.88); box-shadow: var(--shadow); }
.progress { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(72px, 1fr); overflow-x: auto; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.progress li { position: relative; padding: .9rem .3rem; color: var(--ice-300); font-size: .72rem; text-align: center; }
.progress li[aria-current="step"] { color: var(--ice-100); background: rgba(30,143,255,.13); }
.progress li.is-complete { color: var(--blue-300); }
.wizard-step { padding: clamp(1.25rem, 4vw, 2.5rem); }
.wizard-step[hidden] { display: none; }
.wizard-step > h2:focus { outline: none; }
.option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin: 1.2rem 0; }
.option { position: relative; display: block; border: 1px solid var(--line); border-radius: .55rem; padding: 1rem; background: rgba(16,42,76,.45); cursor: pointer; }
.option[hidden] { display: none; }
.option:has(input:checked) { border-color: var(--blue-300); box-shadow: 0 0 20px rgba(30,143,255,.18); }
.option input { margin-right: .45rem; accent-color: var(--orange-500); }
.option strong { color: var(--ice-100); }
.legal-section { padding: 4rem 0 6rem; }
.legal-copy { max-width: 820px; }
.legal-copy h2 { margin-top: 2.5rem; font-size: clamp(1.45rem,3vw,2rem); }
.legal-copy h3 { margin-top: 1.75rem; }
.legal-copy li + li { margin-top: .6rem; }
.legal-copy a { color: var(--blue-300); }
.option-grid--vehicles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option--vehicle { overflow: hidden; padding: 0; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.option--vehicle:hover { border-color: var(--blue-300); transform: translateY(-3px); }
.option--vehicle:has(input:checked) { border-color: var(--orange-500); box-shadow: 0 0 0 2px rgba(255,157,47,.16), 0 16px 30px rgba(0,0,0,.25); }
.option--vehicle:has(input:focus-visible) { outline: 2px solid var(--orange-500); outline-offset: 3px; }
.option--vehicle > input { position: absolute; opacity: 0; pointer-events: none; }
.booking-vehicle-visual { display: block; overflow: hidden; aspect-ratio: 9 / 5; border-bottom: 1px solid var(--line); background: #061a33; }
.booking-vehicle-visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease; }
.option--vehicle:hover .booking-vehicle-visual img, .option--vehicle:has(input:checked) .booking-vehicle-visual img { transform: scale(1.045); }
.booking-vehicle-copy { display: flex; min-height: 158px; flex-direction: column; gap: .3rem; padding: 1rem; }
.booking-vehicle-copy > span { color: var(--ice-300); font-size: .88rem; line-height: 1.4; }
.booking-vehicle-copy small { margin-top: auto; padding-top: .75rem; color: #8fb3d9; font-size: .72rem; line-height: 1.45; }
.booking-vehicle-copy small b { display: block; margin-bottom: .15rem; color: var(--orange-500); letter-spacing: .1em; text-transform: uppercase; }
.option--vehicle-text { grid-column: 1 / -1; }
.service-option { position: relative; min-width: 0; }
.service-option:focus-within { z-index: 20; }
.service-option:has(.service-info:hover), .service-option:has(.service-info:focus) { z-index: 40; }
.service-option > .option { height: 100%; padding-right: 3.35rem; }
.service-info { position: absolute; top: .7rem; right: .7rem; z-index: 2; display: grid; width: 1.85rem; height: 1.85rem; place-items: center; border: 1px solid var(--blue-300); border-radius: 50%; padding: 0; color: var(--blue-300); background: rgba(4,15,30,.92); box-shadow: 0 0 14px rgba(30,143,255,.14); font: 800 italic .9rem/1 Saira, sans-serif; cursor: help; transition: border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease; }
.service-info:hover, .service-info:focus { border-color: var(--orange-500); outline: none; color: #071326; background: var(--orange-500); box-shadow: 0 0 18px rgba(255,157,47,.28); }
.service-info__tooltip { position: absolute; top: 3rem; right: .7rem; z-index: 3; visibility: hidden; width: min(330px, calc(100% - 1.4rem)); border: 1px solid rgba(255,157,47,.75); border-radius: .45rem; padding: .8rem .9rem; color: var(--ice-100); background: rgba(4,12,24,.98); box-shadow: 0 16px 34px rgba(0,0,0,.52), 0 0 20px rgba(30,143,255,.16); font-size: .8rem; font-weight: 600; line-height: 1.45; opacity: 0; pointer-events: none; transform: translateY(-5px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; }
.service-info:hover + .service-info__tooltip, .service-info:focus + .service-info__tooltip { visibility: visible; opacity: 1; transform: translateY(0); }
.addon-info { cursor: pointer; }
.addon-dialog { width: min(650px, calc(100% - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); overflow: auto; border: 1px solid rgba(87,170,255,.58); border-radius: .9rem; padding: 0; color: var(--ice-300); background: #071428; box-shadow: 0 32px 100px rgba(0,0,0,.75); }
.addon-dialog::backdrop { background: rgba(2,7,15,.84); backdrop-filter: blur(8px); }
.addon-dialog__shell { position: relative; padding: clamp(1.35rem, 4vw, 2.4rem); background: radial-gradient(circle at 85% 0, rgba(30,143,255,.2), transparent 40%), linear-gradient(145deg, #0b213b, #050c17 72%); }
.addon-dialog__close { position: absolute; top: 1rem; right: 1rem; border: 1px solid var(--line); border-radius: .35rem; padding: .42rem .68rem; color: var(--ice-100); background: rgba(7,15,30,.88); font: 800 .72rem/1 Saira, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.addon-dialog h2 { max-width: 18ch; margin: .55rem 4rem 1rem 0; font-size: clamp(1.8rem, 5vw, 2.8rem); }
.addon-dialog__lead { max-width: 58ch; margin-bottom: 1.2rem; color: var(--ice-200); font-size: 1.02rem; line-height: 1.65; }
.addon-dialog__benefits { display: grid; gap: .65rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.addon-dialog__benefits li { position: relative; border-left: 2px solid var(--blue-300); padding: .58rem .8rem; color: var(--ice-100); background: rgba(16,42,76,.48); line-height: 1.45; }
.addon-dialog__offer { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.addon-dialog__offer > div { display: grid; gap: .2rem; }
.addon-dialog__offer span, .addon-dialog__offer small { color: var(--ice-300); }
.addon-dialog__offer strong { color: var(--ice-100); font: 800 italic 2rem/1 Saira, sans-serif; }
.wizard-actions { display: flex; justify-content: space-between; gap: .7rem; margin-top: 1.5rem; }
.vehicle-description-field { max-width: 560px; margin-top: 1rem; }
.booking-vehicle-list, .vehicle-photo-list { display: grid; gap: .85rem; margin: 1.25rem 0; }
.booking-vehicle-card, .vehicle-photo-card { border: 1px solid var(--line); border-radius: .65rem; padding: 1rem; background: rgba(16,42,76,.5); }
.booking-vehicle-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem 1.25rem; align-items: start; }
.booking-vehicle-card h3, .vehicle-photo-card h3 { margin: 0 0 .3rem; font-size: 1.2rem; }
.booking-vehicle-card p { margin: .2rem 0; }
.booking-vehicle-card__actions { display: flex; gap: .45rem; }
.booking-vehicle-card__actions button { min-height: 38px; padding: .45rem .7rem; }
.booking-vehicle-card__price { color: var(--ice-100); font: 800 italic 1.65rem/1 Saira, sans-serif; }
.add-vehicle-button[hidden] { display: none; }
.vehicle-photo-card label { display: grid; gap: .5rem; color: var(--ice-100); font-weight: 650; }
.fallback { margin: 1.25rem 0 0; border-left: 3px solid var(--blue-300); padding: .6rem .8rem; background: rgba(30,143,255,.08); }
.confirmation-step > h2 { margin-bottom: 1.3rem; }
.summary-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 0 0 1.25rem; }
.summary-details__item { min-width: 0; border: 1px solid rgba(121,180,238,.2); border-radius: .55rem; padding: .85rem 1rem; background: rgba(5,18,37,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.summary-details dt { margin: 0 0 .3rem; color: var(--blue-300); font-size: .68rem; font-weight: 800; letter-spacing: .09em; line-height: 1.2; text-transform: uppercase; }
.summary-details dd { margin: 0; overflow-wrap: anywhere; color: var(--ice-100); font-size: 1.02rem; font-weight: 650; line-height: 1.35; }
.summary-details__item--total { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 1rem; border-color: rgba(87,170,255,.62); padding: 1rem 1.15rem; background: linear-gradient(110deg, rgba(18,69,119,.88), rgba(11,37,71,.94)); box-shadow: 0 12px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08); }
.summary-details__item--total dt { margin: 0; color: var(--ice-200); font-size: .78rem; }
.summary-details__item--total dd { color: #fff; font: 800 italic clamp(1.65rem, 4vw, 2.25rem)/1 Saira, sans-serif; }
.payment-methods { display: grid; gap: .6rem; margin-block: 1.25rem; border: 1px solid var(--line); border-radius: .75rem; padding: 1rem 1.15rem; background: rgba(5,12,23,.45); }
.payment-methods__title { margin: 0; color: var(--blue-300); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.payment-methods__marks { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.payment-methods__marks img { display: block; width: 3.4rem; height: auto; }
.payment-methods__note { margin: 0; color: var(--ice-200); font-size: .88rem; line-height: 1.5; }
.confirmation-note { max-width: 65ch; color: var(--ice-200); font-size: .92rem; line-height: 1.55; }
.confirmation-note--pricing { border-left: 2px solid rgba(87,170,255,.5); padding-left: .85rem; color: var(--ice-300); font-size: .82rem; }
.summary { border: 1px solid var(--line); border-radius: .75rem; padding: 1.4rem; background: linear-gradient(145deg, rgba(16,42,76,.98), rgba(7,15,30,.98)); box-shadow: var(--shadow); }
.summary h2 { max-width: 100%; font-size: clamp(1.75rem, 2.5vw, 2.35rem); line-height: .98; }
.summary-price { color: var(--ice-100); font: 800 italic 2.7rem/1 Saira, sans-serif; }
.summary dl { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
.summary dt, .summary dd { margin: 0; }
.summary dd { color: var(--ice-100); text-align: right; }
.address-lookup { position: relative; }
.address-suggestions { position: absolute; top: calc(100% - 1.4rem); right: 0; left: 0; z-index: 20; overflow: hidden; border: 1px solid var(--blue-300); border-radius: .45rem; background: #071326; box-shadow: 0 18px 40px rgba(0,0,0,.48); }
.address-suggestions[hidden] { display: none; }
.address-suggestion { display: block; width: 100%; border: 0; border-bottom: 1px solid rgba(121,180,238,.16); padding: .75rem .85rem; color: var(--ice-100); background: transparent; font: inherit; line-height: 1.35; text-align: left; cursor: pointer; }
.address-suggestion:last-child { border-bottom: 0; }
.address-suggestion:hover, .address-suggestion.is-active { background: rgba(30,143,255,.18); }
.calendar-controls { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.calendar-grid span { padding: .45rem; text-align: center; font-size: .75rem; }
.calendar-day { border: 1px solid var(--line); border-radius: .3rem; padding: .55rem .3rem; color: var(--ice-100); background: rgba(16,42,76,.4); cursor: pointer; }
.calendar-day:disabled { opacity: .25; cursor: default; }
.calendar-day[aria-pressed="true"] { color: var(--navy-950); background: var(--blue-300); }
.slots { display: flex; flex-wrap: wrap; gap: .45rem; min-height: 52px; margin-top: 1rem; }
.slot { border: 1px solid var(--line); border-radius: 2rem; padding: .5rem .75rem; color: var(--ice-100); background: rgba(16,42,76,.55); cursor: pointer; }
.slot[aria-pressed="true"] { color: #07101f; background: var(--orange-500); }
.success { text-align: center; }
.success .success-mark { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 1rem; border: 2px solid var(--blue-300); border-radius: 50%; color: var(--blue-300); font-size: 2rem; box-shadow: 0 0 30px rgba(30,143,255,.28); }

.services-intro { display: grid; gap: 2rem; }
.services-intro__copy { max-width: 850px; }
.vehicle-control { width: 100%; }
.vehicle-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.vehicle-rail button { min-height: 52px; }
.vehicle-select { display: none; }
.services-price-note { margin: .8rem 0 0; color: var(--ice-100); font-weight: 600; text-align: right; }
.service-detail { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.service-detail--reverse { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.service-detail--reverse .service-detail__media { order: 2; }
.service-detail__media { position: relative; min-height: 460px; overflow: hidden; border: 1px solid var(--line); border-radius: .85rem; background: var(--navy-950); box-shadow: var(--shadow); }
.service-detail__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 90px rgba(0,0,0,.55), inset 0 0 35px rgba(30,143,255,.12); pointer-events: none; }
.service-detail__media .badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; }
.service-detail__media img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; }
.service-detail__body { position: relative; }
.service-detail__body .lead { margin-bottom: 1rem; }
.service-kicker { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.2rem 0; }
.service-kicker span { border: 1px solid var(--line); border-radius: 999px; padding: .38rem .7rem; color: var(--ice-100); background: rgba(7,15,30,.55); font-size: .85rem; font-weight: 600; }
.service-price { display: flex; align-items: baseline; gap: .55rem; margin: 1.2rem 0; color: var(--ice-100); }
.service-price strong { font: 800 italic clamp(3rem, 6vw, 5rem)/.9 Saira, sans-serif; }
.service-price span { color: var(--ice-300); font-weight: 600; }
.service-includes { columns: 2; column-gap: 2rem; margin: 1.25rem 0 1.5rem; padding-left: 1.15rem; }
.service-includes li { break-inside: avoid; margin-bottom: .42rem; }
.service-includes li::marker { color: var(--blue-300); }
.service-detail .button { min-width: 170px; }
.addon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.addon-card { display: flex; min-height: 230px; flex-direction: column; }
.addon-card .addon-price { margin: 1rem 0 .35rem; color: var(--orange-500); font: 800 italic 2rem/1 Saira, sans-serif; }
.addon-card p { margin-bottom: 0; }
.addon-card .button { width: 100%; margin-top: auto; }
.specialty-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2rem; }
.specialty-grid .card { min-height: 290px; }
.service-utility-note { margin-top: 2rem; border-left: 3px solid var(--orange-500); padding: 1rem 1.25rem; background: rgba(7,15,30,.52); }
.page-hero.page-hero--trim { position: relative; min-height: 620px; overflow: hidden; align-items: center; background-image: linear-gradient(90deg, rgba(7,15,30,.98) 0 32%, rgba(7,15,30,.82) 56%, rgba(7,15,30,.34)), linear-gradient(0deg, rgba(7,15,30,.82), transparent 58%), url('/assets/services-hero-bmw-z4.webp'); background-position: center; }
.page-hero--trim::before { position: absolute; inset: -30% auto -30% -20%; width: 22%; transform: rotate(13deg); background: linear-gradient(90deg, transparent, rgba(113,181,234,.17), rgba(245,166,35,.09), transparent); content: ""; animation: trim-hero-scan 7s ease-in-out infinite; pointer-events: none; }
@keyframes trim-hero-scan { 0%, 14% { left: -30%; opacity: 0; } 35% { opacity: 1; } 72%, 100% { left: 120%; opacity: 0; } }
.trim-hero__layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr); align-items: center; gap: clamp(2rem, 7vw, 7rem); }
.trim-hero__readout { position: relative; overflow: hidden; border: 1px solid rgba(113,181,234,.45); border-radius: .8rem; padding: 1.5rem; background: linear-gradient(145deg, rgba(7,15,30,.9), rgba(16,42,76,.68)); box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 0 40px rgba(32,104,179,.1); }
.trim-hero__readout > span { color: var(--blue-300); font: 800 italic .72rem/1 Saira, sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.trim-hero__readout > strong { display: block; margin: .6rem 0 1.25rem; color: var(--ice-100); font: 800 italic clamp(1.5rem, 3vw, 2.2rem)/1.05 Saira, sans-serif; text-transform: uppercase; }
.trim-hero__readout ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.trim-hero__readout li { display: flex; align-items: center; gap: .7rem; border-top: 1px solid rgba(113,181,234,.18); padding-top: .55rem; color: var(--ice-100); font-weight: 700; }
.trim-hero__readout b { color: var(--orange-500); font: 800 italic .8rem/1 Saira, sans-serif; }
.trim-hero__scan { position: absolute; top: 0; bottom: 0; left: -40%; width: 34%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(113,181,234,.16), transparent); animation: trim-readout-scan 4.8s ease-in-out infinite; }
@keyframes trim-readout-scan { 0%, 18% { left: -45%; } 76%, 100% { left: 125%; } }
.trim-expertise { display: grid; grid-template-columns: minmax(0, .92fr) minmax(360px, .78fr); align-items: center; gap: clamp(2rem, 7vw, 6rem); }
.trim-expertise__copy > p:not(.eyebrow) { max-width: 62ch; }
.trim-diagnostic { position: relative; overflow: hidden; border: 1px solid rgba(113,181,234,.38); border-radius: 1rem; padding: 1rem; background: linear-gradient(155deg, rgba(16,42,76,.95), rgba(4,13,27,.98)); box-shadow: var(--shadow); }
.trim-diagnostic::after { position: absolute; right: -15%; bottom: -55%; width: 70%; aspect-ratio: 1; border: 1px solid rgba(113,181,234,.17); border-radius: 50%; box-shadow: 0 0 80px rgba(30,143,255,.12); content: ""; pointer-events: none; }
.trim-diagnostic__head { position: relative; z-index: 1; padding: .45rem .45rem 1rem; }
.trim-diagnostic__head span { display: block; color: var(--orange-500); font: 800 italic .7rem/1 Saira, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.trim-diagnostic__head strong { display: block; margin-top: .5rem; color: var(--ice-100); font: 800 italic 1.35rem/1.05 Saira, sans-serif; text-transform: uppercase; }
.trim-diagnostic__tabs { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.trim-diagnostic__tabs button { border: 1px solid var(--line); border-radius: .4rem; padding: .7rem .55rem; color: var(--ice-300); background: rgba(7,15,30,.62); font-weight: 750; cursor: pointer; }
.trim-diagnostic__tabs button[aria-selected="true"] { border-color: var(--orange-500); color: #07101f; background: var(--orange-500); }
.trim-diagnostic__panel { position: relative; z-index: 1; margin-top: .7rem; border: 1px solid rgba(113,181,234,.2); border-radius: .65rem; padding: 1rem; background: rgba(4,13,27,.7); }
.trim-diagnostic__panel[hidden] { display: none; }
.trim-diagnostic__panel h3 { margin-bottom: .75rem; font-size: clamp(1.75rem, 4vw, 2.6rem); }
.trim-diagnostic__panel p:last-child { margin-bottom: 0; }
.trim-surface { position: relative; height: 150px; overflow: hidden; margin-bottom: 1rem; border-radius: .45rem; background: linear-gradient(145deg, #718090, #303a44 47%, #151c24 48%, #44515f); box-shadow: inset 0 0 45px rgba(0,0,0,.46); }
.trim-surface--black { background: linear-gradient(145deg, #353b42, #101318 47%, #05080c 48%, #20272e); }
.trim-surface::before { position: absolute; inset: 0; background: repeating-linear-gradient(113deg, transparent 0 5px, rgba(255,255,255,.035) 5px 6px); content: ""; }
.trim-surface i { position: absolute; inset: -30% auto -30% -35%; width: 24%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); animation: trim-surface-shine 4.4s ease-in-out infinite; }
@keyframes trim-surface-shine { 0%, 25% { left: -35%; opacity: 0; } 42% { opacity: 1; } 80%, 100% { left: 125%; opacity: 0; } }
.trim-systems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.trim-system { display: flex; min-height: 100%; flex-direction: column; }
.trim-systems--expert { gap: 1.4rem; }
.trim-systems--expert .trim-system { border-color: rgba(113,181,234,.34); padding: 0; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.trim-systems--expert .trim-system:hover { border-color: rgba(245,166,35,.72); transform: translateY(-7px); box-shadow: 0 30px 90px rgba(0,0,0,.5), 0 0 32px rgba(245,166,35,.08); }
.trim-system__visual { position: relative; display: grid; min-height: 230px; overflow: hidden; align-content: center; padding: 1.5rem; background: radial-gradient(circle at 72% 20%, rgba(113,181,234,.24), transparent 32%), linear-gradient(145deg, #4f5d69, #121923 58%, #060b12); box-shadow: inset 0 -60px 80px rgba(0,0,0,.45); }
.trim-system__visual--sf { background: radial-gradient(circle at 72% 20%, rgba(245,166,35,.17), transparent 30%), linear-gradient(145deg, #353a3f, #0b0d10 58%, #020304); }
.trim-system__visual::before { position: absolute; inset: 0; background: repeating-linear-gradient(118deg, transparent 0 7px, rgba(255,255,255,.025) 7px 8px); content: ""; }
.trim-system__visual > span, .trim-system__visual > strong, .trim-system__visual > small { position: relative; z-index: 1; }
.trim-system__visual > span { color: var(--blue-300); font: 800 italic .72rem/1 Saira, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.trim-system__visual--sf > span { color: var(--orange-500); }
.trim-system__visual > strong { margin-block: .2rem; color: rgba(234,242,255,.94); font: 800 italic clamp(5rem, 11vw, 8.5rem)/.85 Saira, sans-serif; letter-spacing: -.08em; text-shadow: 0 0 34px rgba(113,181,234,.24); }
.trim-system__visual > small { color: var(--ice-100); font-weight: 800; text-transform: uppercase; }
.trim-system__visual i { position: absolute; inset: -25% auto -25% -35%; width: 24%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent); animation: trim-surface-shine 5.6s 1.2s ease-in-out infinite; }
.trim-system__content { display: flex; height: 100%; flex-direction: column; padding: clamp(1.35rem, 3vw, 2rem); }
.trim-system__content h4 { margin: 1.25rem 0 .35rem; color: var(--orange-500); font: 800 italic 1rem/1.1 Saira, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.trim-fact-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-top: auto; padding-top: 1.5rem; }
.trim-fact-row span { border-top: 1px solid var(--line); padding-top: .65rem; font-size: .78rem; line-height: 1.35; }
.trim-fact-row b { display: block; margin-bottom: .25rem; color: var(--blue-300); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.trim-ott { display: grid; grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr); overflow: hidden; border: 1px solid rgba(113,181,234,.36); border-radius: 1rem; background: linear-gradient(145deg, rgba(16,42,76,.78), rgba(4,13,27,.96)); box-shadow: 0 28px 90px rgba(0,0,0,.42), inset 0 0 55px rgba(32,104,179,.08); }
.trim-ott__visual { position: relative; display: grid; min-height: 470px; overflow: hidden; align-content: center; gap: 2.5rem; padding: clamp(1.5rem, 4vw, 3rem); background: radial-gradient(circle at 42% 32%, rgba(32,143,255,.25), transparent 36%), linear-gradient(155deg, #0f2949, #050c18 72%); }
.trim-ott__visual::before { position: absolute; inset: 0; background: linear-gradient(rgba(113,181,234,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(113,181,234,.05) 1px, transparent 1px); background-size: 28px 28px; content: ""; mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); }
.trim-ott__visual > i { position: absolute; inset: -25% auto -25% -32%; width: 22%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(113,181,234,.2), rgba(255,255,255,.18), transparent); animation: trim-surface-shine 5.8s ease-in-out infinite; }
.trim-ott__readout, .trim-ott__layers { position: relative; z-index: 1; }
.trim-ott__readout span { display: block; color: var(--orange-500); font: 800 italic .72rem/1 Saira, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.trim-ott__readout strong { display: block; margin-block: .25rem; color: var(--ice-100); font: 800 italic clamp(4rem, 9vw, 7rem)/.86 Saira, sans-serif; letter-spacing: -.06em; text-shadow: 0 0 34px rgba(113,181,234,.3); }
.trim-ott__readout small { color: var(--blue-300); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.trim-ott__layers { display: grid; gap: .45rem; perspective: 500px; }
.trim-ott__layer { position: relative; display: block; border: 1px solid rgba(113,181,234,.28); padding: .7rem .85rem; transform: rotateX(58deg) rotateZ(-3deg); color: var(--ice-300); background: rgba(7,15,30,.72); box-shadow: 0 14px 25px rgba(0,0,0,.3); font: 800 italic .7rem/1 Saira, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.trim-ott__layer--weather { border-color: rgba(113,181,234,.65); color: var(--blue-300); background: rgba(18,60,100,.76); }
.trim-ott__layer--barrier { border-color: rgba(245,166,35,.65); color: var(--orange-500); background: rgba(45,38,24,.78); }
.trim-ott__layer--surface { color: var(--ice-100); background: #090d12; }
.trim-ott__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.8rem, 5vw, 4rem); }
.trim-ott__copy h2 { margin-bottom: 1rem; }
.trim-ott__copy > p:not(.eyebrow) { max-width: 64ch; }
.trim-ott__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1.2rem; }
.trim-ott__specs span { border: 1px solid rgba(113,181,234,.2); border-radius: .45rem; padding: .85rem; background: rgba(7,15,30,.48); font-size: .83rem; line-height: 1.35; }
.trim-ott__specs b { display: block; margin-bottom: .3rem; color: var(--blue-300); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.trim-ott__price { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; border-top: 1px solid rgba(245,166,35,.58); padding-top: 1rem; }
.trim-ott__price span { color: var(--ice-300); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.trim-ott__price strong { color: var(--orange-500); font: 800 italic 1.5rem/1 Saira, sans-serif; text-transform: uppercase; }
.trim-coat-section { background: linear-gradient(145deg, rgba(10,28,50,.98), rgba(4,13,27,.99)); }
.trim-coat { display: grid; grid-template-columns: minmax(280px, .68fr) minmax(0, 1.32fr); overflow: hidden; border: 1px solid rgba(245,166,35,.48); border-radius: 1rem; background: linear-gradient(145deg, rgba(18,42,70,.94), rgba(4,13,27,.98)); box-shadow: 0 28px 90px rgba(0,0,0,.46), inset 0 0 50px rgba(245,166,35,.04); }
.trim-coat__signal { position: relative; display: flex; min-height: 620px; overflow: hidden; flex-direction: column; justify-content: center; border-right: 1px solid rgba(245,166,35,.32); padding: clamp(1.8rem, 4vw, 3.2rem); background: radial-gradient(circle at 48% 42%, rgba(245,166,35,.2), transparent 34%), linear-gradient(160deg, #372815, #0b0d12 68%); text-align: center; }
.trim-coat__signal::before { position: absolute; inset: 1.2rem; border: 1px solid rgba(245,166,35,.42); background: linear-gradient(rgba(245,166,35,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(245,166,35,.035) 1px, transparent 1px); background-size: 24px 24px; content: ""; }
.trim-coat__signal > * { position: relative; z-index: 1; }
.trim-coat__brand { display: grid; gap: .4rem; }
.trim-coat__brand span { color: var(--ice-100); font: 800 italic 1.45rem/1 Saira, sans-serif; letter-spacing: .04em; }
.trim-coat__brand small { color: var(--orange-500); font: 800 italic .67rem/1 Saira, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.trim-coat__signal > strong { display: block; margin: 3.2rem 0 .25rem; color: var(--ice-100); font: 800 italic clamp(5.4rem, 10vw, 8.4rem)/.78 Saira, sans-serif; letter-spacing: -.08em; text-shadow: 0 0 38px rgba(245,166,35,.24); }
.trim-coat__signal > strong span { color: var(--orange-500); font-size: .45em; vertical-align: top; }
.trim-coat__signal > p { margin: 1rem auto 3rem; color: var(--ice-300); font: 800 italic .72rem/1.25 Saira, sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.trim-coat__status { display: flex; justify-content: center; gap: .45rem; }
.trim-coat__status span { border: 1px solid rgba(245,166,35,.45); padding: .45rem .55rem; color: var(--orange-500); background: rgba(7,15,30,.68); font: 800 .62rem/1 Inter, sans-serif; letter-spacing: .08em; }
.trim-coat__signal > i { position: absolute; inset: -25% auto -25% -32%; z-index: 0; width: 22%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(245,166,35,.16), rgba(255,255,255,.14), transparent); animation: trim-surface-shine 6.4s 1s ease-in-out infinite; }
.trim-coat__body { padding: clamp(1.8rem, 5vw, 4rem); }
.trim-coat__body h2 { margin-bottom: 1rem; }
.trim-coat__body > p:not(.eyebrow):not(.trim-coat__source) { max-width: 70ch; }
.trim-coat__explainers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 1.6rem 0; }
.trim-coat__explainers article { border-top: 2px solid var(--orange-500); padding: 1rem; background: rgba(7,15,30,.52); }
.trim-coat__explainers article:nth-child(2) { border-color: var(--blue-300); }
.trim-coat__explainers h3 { margin-bottom: .55rem; font-size: 1rem; }
.trim-coat__explainers p { margin: 0; font-size: .88rem; }
.trim-coat__proof { margin-block: 1.2rem; border-left: 3px solid var(--orange-500); padding: 1rem 1.1rem; background: rgba(3,10,20,.62); }
.trim-coat__proof strong { color: var(--ice-100); font: 800 italic .9rem/1.1 Saira, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.trim-coat__proof p { margin: .45rem 0 0; font-size: .9rem; }
.trim-coat__offer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; margin-top: 1.4rem; border: 1px solid rgba(113,181,234,.24); border-radius: .55rem; }
.trim-coat__offer > span { display: grid; gap: .35rem; padding: .85rem 1rem; background: rgba(7,15,30,.58); }
.trim-coat__offer > span + span { border-left: 1px solid rgba(113,181,234,.2); }
.trim-coat__offer small { color: var(--blue-300); font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.trim-coat__offer strong { color: var(--ice-100); font: 800 italic 1.75rem/1 Saira, sans-serif; }
.trim-coat__action { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.trim-coat__action div { display: grid; gap: .2rem; }
.trim-coat__action b { color: var(--orange-500); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.trim-coat__action small, .trim-coat__source { color: var(--ice-300); font-size: .74rem; }
.trim-coat__source { margin: 1rem 0 0; line-height: 1.45; }
.trim-decision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.trim-process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: trim-step; }
.trim-process li { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: .65rem; padding: 3.2rem 1rem 1rem; background: rgba(7,15,30,.48); counter-increment: trim-step; transition: border-color .25s ease, transform .25s ease; }
.trim-process li::before { position: absolute; top: .9rem; left: 1rem; color: var(--orange-500); content: "0" counter(trim-step); font: 800 italic 1.35rem/1 Saira, sans-serif; }
.trim-process--active li::after { position: absolute; right: -40%; bottom: -70%; width: 80%; aspect-ratio: 1; border: 1px solid rgba(113,181,234,.16); border-radius: 50%; content: ""; transition: transform .35s ease; }
.trim-process--active li:hover { border-color: rgba(245,166,35,.7); transform: translateY(-5px); }
.trim-process--active li:hover::after { transform: scale(1.35); }
.trim-longevity { display: grid; grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr); align-items: center; gap: clamp(2rem, 7vw, 6rem); }
.trim-longevity__track { position: relative; display: grid; gap: .8rem; }
.trim-longevity__track article { position: relative; z-index: 1; margin-left: 2.1rem; border: 1px solid var(--line); border-radius: .6rem; padding: 1rem 1.1rem; background: rgba(7,15,30,.68); transition: border-color .25s ease, transform .25s ease; }
.trim-longevity__track article:hover { border-color: var(--orange-500); transform: translateX(7px); }
.trim-longevity__track article::before { position: absolute; top: 1.2rem; left: -2.45rem; width: .72rem; height: .72rem; border: 2px solid var(--blue-300); border-radius: 50%; background: var(--navy-900); box-shadow: 0 0 18px var(--blue-500); content: ""; }
.trim-longevity__track article span { color: var(--orange-500); font: 800 italic .74rem/1 Saira, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.trim-longevity__track article strong { display: block; margin-top: .35rem; color: var(--ice-100); font: 800 italic 1.2rem/1 Saira, sans-serif; text-transform: uppercase; }
.trim-longevity__track article p { margin-bottom: 0; font-size: .9rem; }
.trim-longevity__line { position: absolute; top: 1.4rem; bottom: 1.4rem; left: .25rem; width: 2px; overflow: hidden; background: rgba(113,181,234,.24); }
.trim-longevity__line i { position: absolute; top: -30%; left: 0; width: 100%; height: 32%; background: linear-gradient(transparent, var(--blue-300), var(--orange-500), transparent); box-shadow: 0 0 16px var(--blue-300); animation: trim-track 4s ease-in-out infinite; }
@keyframes trim-track { 0% { top: -35%; } 70%, 100% { top: 110%; } }
.trim-readouts { gap: .65rem; margin-top: 1.5rem; }
.trim-readouts .accordion-item { position: relative; overflow: hidden; border-color: rgba(113,181,234,.24); border-radius: .65rem; background: linear-gradient(90deg, rgba(16,42,76,.64), rgba(7,15,30,.74)); transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.trim-readouts .accordion-item::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; transform: scaleY(0); transform-origin: center; background: var(--orange-500); box-shadow: 0 0 18px rgba(245,166,35,.5); content: ""; transition: transform .22s ease; }
.trim-readouts .accordion-item:hover { border-color: rgba(113,181,234,.62); transform: translateX(4px); box-shadow: 0 12px 36px rgba(0,0,0,.2); }
.trim-readouts .accordion-item:has(.accordion-button[aria-expanded="true"]) { border-color: rgba(245,166,35,.58); box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 0 0 32px rgba(32,104,179,.05); }
.trim-readouts .accordion-item:has(.accordion-button[aria-expanded="true"])::before { transform: scaleY(1); }
.trim-readouts .accordion-button { display: grid; grid-template-columns: 9.25rem minmax(0, 1fr) 2.7rem; min-height: 76px; gap: 0; padding: 0; color: var(--ice-100); background: transparent; }
.trim-readouts .accordion-button:focus-visible { outline: 2px solid var(--orange-500); outline-offset: -3px; }
.trim-readouts .accordion-button::after { display: grid; width: 2rem; height: 2rem; align-self: center; place-items: center; border: 1px solid rgba(113,181,234,.42); border-radius: 50%; color: var(--blue-300); background: rgba(7,15,30,.7); font: 500 1.35rem/1 system-ui, sans-serif; transition: border-color .22s ease, color .22s ease, transform .22s ease; }
.trim-readouts .accordion-button[aria-expanded="true"]::after { border-color: var(--orange-500); color: var(--orange-500); transform: rotate(180deg); }
.trim-readout__meta { display: flex; height: 100%; align-items: center; gap: .65rem; border-right: 1px solid rgba(113,181,234,.18); padding-inline: 1.1rem; }
.trim-readout__meta b { color: var(--orange-500); font: 800 italic 1.1rem/1 Saira, sans-serif; }
.trim-readout__meta small { color: var(--blue-300); font: 800 .62rem/1.15 Saira, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.trim-readout__question { padding: 1rem 1.25rem; font: 800 italic clamp(.95rem, 2vw, 1.15rem)/1.15 Saira, sans-serif; letter-spacing: .015em; text-transform: uppercase; }
.trim-readouts .accordion-panel { border-top: 1px solid rgba(113,181,234,.16); padding: 1.1rem 4.7rem 1.3rem 10.5rem; color: var(--ice-300); background: rgba(3,10,20,.36); }
.trim-readouts .accordion-panel:not([hidden]) { animation: trim-answer-in .24s ease-out; }
@keyframes trim-answer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .page-hero--trim::before, .trim-hero__scan, .trim-surface i, .trim-system__visual i, .trim-ott__visual > i, .trim-coat__signal > i, .trim-longevity__line i, .trim-readouts .accordion-panel:not([hidden]) { animation: none; }
}

/* Trim restoration estimator */
.estimator-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(5rem, 9vw, 8rem) 0 3rem; background: radial-gradient(circle at 78% 18%, rgba(57, 131, 196, .22), transparent 34%), linear-gradient(135deg, var(--navy-850), #0d213b); border-bottom: 1px solid rgba(111, 187, 255, .2); }
.estimator-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .28; background-image: linear-gradient(rgba(111, 187, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(111, 187, 255, .12) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000); mask-image: linear-gradient(90deg, transparent, #000 35%, #000); }
.estimator-hero::after { content: ""; position: absolute; right: -12%; bottom: -70%; z-index: -1; width: 55vw; height: 55vw; border: 1px solid rgba(111, 187, 255, .26); border-radius: 50%; box-shadow: 0 0 0 70px rgba(57, 131, 196, .04), 0 0 0 140px rgba(57, 131, 196, .025); }
.estimator-hero__layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); align-items: start; gap: clamp(2rem, 6vw, 6rem); }
.estimator-hero h1 { max-width: 16ch; margin: .2rem 0 1rem; font-size: clamp(3.25rem, 6vw, 5.5rem); text-shadow: 0 0 34px rgba(111, 187, 255, .11); }
.estimator-hero .lead { max-width: 760px; }
.estimator-hero__readout { position: relative; display: grid; gap: .55rem; overflow: hidden; padding: 1.3rem; color: #9fc1e2; background: rgba(4, 15, 30, .72); border: 1px solid rgba(111, 187, 255, .32); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.estimator-hero__readout > span { color: var(--orange-500); font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.estimator-hero__readout > strong { margin-bottom: .45rem; color: var(--ice-100); font: 800 italic 1.2rem/1.2 var(--font-display); }
.estimator-hero__readout > div { display: flex; align-items: baseline; gap: .65rem; font-size: .73rem; letter-spacing: .09em; }
.estimator-hero__readout > div b { min-width: 2ch; color: var(--blue-300); font-family: var(--font-display); font-size: 1.15rem; }
.estimator-hero__readout i { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0 46%, rgba(111, 187, 255, .18) 50%, transparent 54%); background-size: 100% 80px; animation: estimator-scan 5s linear infinite; }

.trim-builder-section { padding: clamp(2rem, 5vw, 5rem) 0; background: #081426; }
.trim-builder { position: relative; isolation: isolate; overflow: hidden; max-width: 1120px; margin: auto; padding: clamp(1rem, 3vw, 2.5rem); color: inherit; background: linear-gradient(145deg, rgba(16, 34, 56, .98), rgba(7, 20, 40, .98)); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 28px 70px rgba(0, 0, 0, .32); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.trim-builder::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .22; background-image: radial-gradient(circle at 1px 1px, rgba(111, 187, 255, .24) 1px, transparent 0); background-size: 22px 22px; -webkit-mask-image: linear-gradient(135deg, #000, transparent 68%); mask-image: linear-gradient(135deg, #000, transparent 68%); }
.trim-builder__progress { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; list-style: none; margin: 0 0 2.5rem; padding: 0; }
.trim-builder__progress::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, var(--orange-500) 0 var(--estimator-progress, 33%), #29435e var(--estimator-progress, 33%)); box-shadow: 0 0 15px rgba(245, 166, 35, .3); transition: background .35s ease; }
.trim-builder[data-step="2"] { --estimator-progress: 66%; }
.trim-builder[data-step="3"] { --estimator-progress: 100%; }
.trim-builder__progress li { position: relative; z-index: 1; display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; color: #7793b2; border: 0; }
.trim-builder__progress b { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; }
.trim-builder__progress .is-active { color: var(--ice-100); }
.trim-builder__progress .is-complete { color: var(--blue-300); }
.trim-builder__step { margin: 0; padding: 0; border: 0; }
.trim-builder__step[hidden] { display: none; }
.trim-builder__step legend { display: block; width: 100%; margin: 0 0 .75rem; color: var(--ice-100); font: 800 italic clamp(2.8rem, 6vw, 5.4rem)/.92 var(--font-display); letter-spacing: -.04em; text-transform: uppercase; }
.trim-builder__step legend span { display: block; margin-bottom: .35rem; color: var(--blue-300); font-family: var(--font-body); font-size: .76rem; font-style: normal; letter-spacing: .16em; }
.trim-builder__intro { max-width: 800px; margin: 0 0 1.5rem; }
.trim-builder__error { min-height: 1.5rem; margin: -1rem 0 1rem; color: var(--warn); font-weight: 700; }
.trim-builder__actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.trim-builder__actions > a:not(.button) { color: #8fcaff; }
.trim-builder__fineprint { margin: 1.5rem 0 0; padding: 1rem 1.2rem; background: var(--navy-850); border-left: 3px solid var(--orange-500); }

.vehicle-tier-grid, .condition-grid, .trim-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.vehicle-tier-grid { gap: 12px; }
.vehicle-tier, .condition-card { position: relative; display: flex; min-height: 275px; flex-direction: column; padding: 1.2rem; cursor: pointer; background: #0b1c32; border: 1px solid #284b6c; border-radius: 12px; transition: transform .2s, border-color .2s, box-shadow .2s; }
.vehicle-tier { min-height: 390px; padding: 0 0 1.2rem; overflow: hidden; border-radius: 3px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.vehicle-tier::before, .vehicle-tier::after { content: ""; position: absolute; z-index: 3; pointer-events: none; width: 22px; height: 22px; border-color: rgba(111, 187, 255, .6); }
.vehicle-tier::before { top: 8px; left: 8px; border-top: 1px solid; border-left: 1px solid; }
.vehicle-tier::after { right: 8px; bottom: 8px; border-right: 1px solid; border-bottom: 1px solid; }
.vehicle-tier:hover, .condition-card:hover { transform: translateY(-3px); border-color: var(--blue-300); }
.vehicle-tier:has(input:checked), .condition-card:has(input:checked) { border-color: var(--orange-500); box-shadow: 0 0 0 2px rgba(245, 166, 35, .18), 0 18px 36px rgba(0, 0, 0, .28); }
.vehicle-tier:has(input:checked) { transform: translateY(-4px); }
.vehicle-tier input, .condition-card input { position: absolute; opacity: 0; pointer-events: none; }
.vehicle-tier > strong, .vehicle-tier > small, .vehicle-tier > .tier-models { margin-inline: 1.15rem; }
.vehicle-tier strong, .condition-card strong { color: var(--ice-100); font-size: 1.1rem; }
.vehicle-tier > strong { margin-top: .85rem; font: 800 italic 1.45rem/1.15 var(--font-display); text-transform: uppercase; }
.vehicle-tier small, .condition-card small { margin-top: .4rem; color: #a9bad0; line-height: 1.45; }
.tier-models { margin-top: auto; padding-top: 1rem; color: #8fb3d9; font-size: .8rem; }
.tier-models b { display: block; color: var(--orange-500); text-transform: uppercase; letter-spacing: .1em; }
.vehicle-tier__code { position: absolute; top: .75rem; left: 1rem; z-index: 4; color: #8fcaff; font-size: .61rem; font-weight: 800; letter-spacing: .12em; }
.vehicle-visual { position: relative; display: block; width: 100%; aspect-ratio: 9 / 5; overflow: hidden; background: #06172f; border-bottom: 1px solid rgba(111, 187, 255, .24); }
.vehicle-visual::after { content: "PROFILE DATA / SELECT TO RESOLVE"; position: absolute; right: .75rem; bottom: .55rem; z-index: 3; color: rgba(159, 193, 226, .7); font: 700 .54rem/1 var(--font-body); letter-spacing: .1em; }
.vehicle-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease, transform .7s cubic-bezier(.2, .7, .2, 1), filter .35s ease; }
.vehicle-visual__simple { opacity: .84; }
.vehicle-visual__detail { opacity: 0; filter: brightness(1.12); transform: scale(1.025); }
.vehicle-visual i { position: absolute; top: 0; bottom: 0; left: -30%; z-index: 2; width: 26%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(111, 187, 255, .2), rgba(255, 255, 255, .34), transparent); transform: skewX(-12deg); }
.vehicle-tier:hover .vehicle-visual__simple, .vehicle-tier:has(input:checked) .vehicle-visual__simple { opacity: 0; }
.vehicle-tier:hover .vehicle-visual__detail, .vehicle-tier:has(input:checked) .vehicle-visual__detail { opacity: 1; transform: scale(1); }
.vehicle-tier:hover .vehicle-visual i, .vehicle-tier:has(input:checked) .vehicle-visual i { opacity: 1; animation: vehicle-scan 1.1s ease-out both; }
.vehicle-tier:has(input:checked) .vehicle-visual::after { content: "PROFILE RESOLVED / SELECTED"; color: var(--orange-500); }
.vehicle-tier:has(input:checked) .vehicle-tier__code { color: var(--orange-500); }

.trim-color-choice { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.5rem; }
.trim-color-choice p { margin: 0 1rem 0 0; color: var(--ice-100); font-weight: 700; }
.trim-color-choice label input { position: absolute; opacity: 0; }
.trim-color-choice label span { display: block; padding: .65rem 1.2rem; border: 1px solid #395775; border-radius: 999px; cursor: pointer; }
.trim-color-choice label:has(input:checked) span { color: var(--navy-850); background: var(--orange-500); border-color: var(--orange-500); font-weight: 800; }

.condition-card, .trim-result { border-radius: 3px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.condition-card { min-height: 330px; padding: 1rem; }
.condition-card > strong { margin-top: .9rem; font: 800 italic 1.28rem/1.15 var(--font-display); text-transform: uppercase; }
.trim-material { position: relative; display: block; height: auto; aspect-ratio: 16 / 9; margin-bottom: 1.1rem; overflow: hidden; border: 1px solid rgba(111, 187, 255, .24); border-radius: 2px; background: var(--navy-850); }
.trim-material img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .28s ease, transform .6s ease; }
.condition-grid[data-color="black"] .trim-material__black, .condition-grid[data-color="gray"] .trim-material__gray { opacity: 1; }
.condition-grid[data-color="black"] .trim-material__gray, .condition-grid[data-color="gray"] .trim-material__black { opacity: 0; }
.trim-material::before { content: ""; position: absolute; inset: 0; z-index: 2; opacity: .35; background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(111, 187, 255, .07) 4px); }
.trim-material::after { content: attr(data-black); position: absolute; inset: auto .55rem .5rem auto; z-index: 4; padding: .38rem .48rem; color: #b9dcfb; background: rgba(4, 15, 30, .76); font: 800 .56rem/1 var(--font-body); letter-spacing: .11em; }
.condition-grid[data-color="gray"] .trim-material::after { content: attr(data-gray); }
.trim-material i { position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg, transparent 35%, rgba(255, 255, 255, .3), transparent 70%); transform: translateX(-100%); transition: transform .7s; }
.condition-card:hover .trim-material i { transform: translateX(100%); }
.condition-card:hover .trim-material img, .condition-card:has(input:checked) .trim-material img { transform: scale(1.025); }
.condition-card:has(input:checked) .trim-material::after { color: var(--navy-850); background: var(--orange-500); }

.trim-result-grid { grid-template-columns: repeat(2, 1fr); margin-top: 2rem; }
.trim-result { position: relative; padding: 1.6rem; background: #0b1c32; border: 1px solid #284b6c; }
.trim-result.is-recommended { border-color: var(--orange-500); background: linear-gradient(145deg, rgba(24, 44, 67, .98), rgba(7, 20, 40, .98)); box-shadow: 0 0 0 2px rgba(245, 166, 35, .17), 0 24px 50px rgba(0, 0, 0, .28); }
.trim-result.is-unavailable { opacity: .68; }
.trim-result__status { display: inline-block; margin-bottom: 1rem; padding: .35rem .65rem; color: #8fcaff; border: 1px solid #365b80; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.is-recommended .trim-result__status { color: var(--navy-850); background: var(--orange-500); border-color: var(--orange-500); }
.trim-result h3 { margin: .2rem 0 .75rem; }
.trim-result__numbers { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.4rem 0; }
.trim-result__numbers strong { color: #fff; font: 800 italic 3rem/.9 var(--font-display); letter-spacing: -.035em; }
.trim-result__numbers span { color: #9fc1e2; }
.trim-result .button { width: 100%; text-align: center; }
.ott-switch { display: flex; gap: .75rem; margin: 0 0 1.2rem; padding: .9rem; background: var(--navy-850); border-left: 3px solid var(--blue-300); cursor: pointer; }
.ott-switch span { display: flex; flex-direction: column; }
.ott-switch b { color: var(--ice-100); }
.ott-switch small { color: #9fc1e2; }

@keyframes vehicle-scan { from { left: -30%; } to { left: 115%; } }
@keyframes estimator-scan { from { background-position: 0 -80px; } to { background-position: 0 160px; } }

@media (min-width: 901px) {
  .estimator-hero { max-height: 450px; padding: clamp(2.25rem, 4vw, 3.25rem) 0 clamp(2rem, 3vw, 2.75rem); }
}
@media (max-width: 900px) {
  .estimator-hero__layout { grid-template-columns: 1fr; }
  .estimator-hero__readout { display: none; }
  .vehicle-tier-grid { grid-template-columns: 1fr; }
  .vehicle-tier { min-height: 0; }
  .vehicle-visual { aspect-ratio: 2 / 1; }
}
@media (max-width: 760px) {
  .trim-builder__progress li { padding: .6rem .25rem; flex-direction: column; gap: .1rem; font-size: .72rem; }
  .vehicle-tier-grid, .condition-grid, .trim-result-grid { grid-template-columns: 1fr; }
  .trim-builder__actions { align-items: stretch; flex-direction: column-reverse; }
  .trim-builder__actions .button { width: 100%; text-align: center; }
  .trim-color-choice { align-items: stretch; flex-wrap: wrap; }
  .trim-color-choice p { width: 100%; }
  .trim-result__numbers { align-items: flex-start; flex-direction: column; gap: .2rem; }
}
@media (max-width: 560px) {
  .estimator-hero h1 { font-size: clamp(3.3rem, 18vw, 5.2rem); }
  .trim-builder { padding: 1rem; clip-path: none; }
  .trim-builder__step legend { font-size: clamp(2.65rem, 14vw, 4rem); }
  .vehicle-visual { aspect-ratio: 9 / 5; }
  .vehicle-tier__code { font-size: .56rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vehicle-tier, .condition-card, .trim-material i { transition: none; }
}

/* Wheel protection detail */
.page-hero.page-hero--wheels{position:relative;overflow:hidden;min-height:590px;background:linear-gradient(90deg,rgba(4,13,27,.99) 0%,rgba(4,13,27,.92) 44%,rgba(4,13,27,.5) 74%,rgba(4,13,27,.68) 100%),linear-gradient(0deg,rgba(7,35,65,.5),transparent 55%),image-set(url('/assets/wheel-protection-ferrari-hero.avif') type('image/avif'),url('/assets/wheel-protection-ferrari-hero.webp') type('image/webp')) center/cover no-repeat}
.page-hero.page-hero--wheels::before{position:absolute;inset:auto -8% -38% 36%;width:68%;aspect-ratio:1;border:1px solid rgba(113,181,234,.28);border-radius:50%;box-shadow:0 0 0 7vw rgba(18,68,112,.08),0 0 0 14vw rgba(18,68,112,.055);content:"";pointer-events:none}
.page-hero.page-hero--wheels::after{position:absolute;inset:0;background:linear-gradient(rgba(113,181,234,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(113,181,234,.055) 1px,transparent 1px),linear-gradient(115deg,transparent 64%,rgba(245,166,35,.36) 64.15%,transparent 64.3%);background-size:34px 34px,34px 34px,100% 100%;content:"";mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.3) 72%,transparent);pointer-events:none}
.wheel-hero__layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.58fr);align-items:center;gap:clamp(2rem,7vw,7rem)}
.wheel-hero__layout>div{min-width:0}.wheel-hero__layout>div:first-child{max-width:760px}.wheel-hero__readout{border:1px solid rgba(113,181,234,.42);border-radius:.8rem;padding:1.5rem;background:linear-gradient(145deg,rgba(7,15,30,.93),rgba(16,42,76,.72));box-shadow:0 24px 70px rgba(0,0,0,.4),inset 0 0 38px rgba(32,104,179,.12)}
.wheel-hero__readout>span{color:var(--orange-500);font:800 italic .72rem/1 Saira,sans-serif;letter-spacing:.15em;text-transform:uppercase}.wheel-hero__readout>strong{display:block;margin:.65rem 0 1.2rem;color:var(--ice-100);font:800 italic clamp(1.45rem,3vw,2.1rem)/1.05 Saira,sans-serif;text-transform:uppercase}.wheel-hero__readout ul{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}.wheel-hero__readout li{border-top:1px solid rgba(113,181,234,.2);padding-top:.6rem;color:var(--ice-100);font-weight:700}.wheel-hero__readout b{margin-right:.7rem;color:var(--blue-300);font:800 italic .82rem/1 Saira,sans-serif}
.wheel-system-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;margin-top:2rem}.wheel-system{display:grid;grid-template-rows:auto 1fr;overflow:hidden;padding:0}.wheel-system__code{position:relative;display:grid;min-height:230px;align-content:center;padding:2rem;background:radial-gradient(circle at 72% 18%,rgba(113,181,234,.23),transparent 34%),linear-gradient(145deg,#183653,#050c17 72%)}.wheel-system--sealant .wheel-system__code{background:radial-gradient(circle at 72% 18%,rgba(245,166,35,.2),transparent 34%),linear-gradient(145deg,#3b2d19,#050c17 72%)}.wheel-system__code span{color:var(--orange-500);font:800 italic .72rem/1 Saira,sans-serif;letter-spacing:.14em;text-transform:uppercase}.wheel-system__code strong{color:var(--ice-100);font:800 italic clamp(4.5rem,10vw,7.5rem)/.86 Saira,sans-serif;letter-spacing:-.06em;text-shadow:0 0 35px rgba(113,181,234,.28)}.wheel-system__code small{color:var(--blue-300);font-weight:800;text-transform:uppercase}.wheel-system>div:last-child{padding:clamp(1.4rem,3vw,2rem)}
.wheel-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1.5rem}.wheel-facts span{border-top:1px solid var(--line);padding-top:.7rem;font-size:.78rem;line-height:1.4}.wheel-facts b{display:block;margin-bottom:.28rem;color:var(--blue-300);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.wheel-compat{display:grid;grid-template-columns:minmax(0,.8fr) minmax(480px,1.2fr);align-items:center;gap:clamp(2rem,7vw,6rem)}.wheel-compat__matrix{overflow:hidden;border:1px solid rgba(113,181,234,.32);border-radius:.8rem;background:rgba(7,20,40,.84);box-shadow:var(--shadow)}.wheel-compat__matrix>div{display:grid;grid-template-columns:1.2fr 1fr 1fr}.wheel-compat__matrix>div>*{margin:0;border-bottom:1px solid rgba(113,181,234,.15);padding:.8rem .9rem}.wheel-compat__matrix>div:first-child{color:var(--orange-500);background:rgba(16,42,76,.78);font:800 italic .78rem/1.2 Saira,sans-serif;text-transform:uppercase}.wheel-compat__matrix b{color:var(--ice-300);font-size:.82rem}.wheel-compat__matrix .is-yes{color:#8fcaff}.wheel-compat__matrix .is-no{color:#ffbf69}
.wheel-exposure{position:relative;overflow:hidden;background:radial-gradient(circle at 12% 62%,rgba(32,104,179,.15),transparent 28%),linear-gradient(145deg,#06101f,#0a1d34)}.wheel-exposure::after{position:absolute;inset:0;background-image:radial-gradient(rgba(113,181,234,.11) 1px,transparent 1px);background-size:22px 22px;content:"";mask-image:linear-gradient(90deg,#000,transparent 42%);pointer-events:none}.wheel-exposure>.container{position:relative;z-index:1}.wheel-exposure__intro{display:grid;grid-template-columns:minmax(0,.8fr) minmax(420px,1.2fr);align-items:end;gap:clamp(2rem,7vw,7rem)}.wheel-exposure__intro .lead{margin-bottom:.45rem}.wheel-example-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2.2rem}.wheel-example-card{display:grid;grid-template-rows:auto 1fr;margin:0;overflow:hidden;border:1px solid rgba(113,181,234,.38);border-radius:.8rem;background:rgba(3,11,22,.84);box-shadow:0 22px 60px rgba(0,0,0,.35)}.wheel-example-card img{width:100%;aspect-ratio:1;object-fit:cover}.wheel-example-card figcaption{display:grid;align-content:start;gap:.48rem;border-top:1px solid rgba(113,181,234,.24);padding:1rem;background:linear-gradient(145deg,rgba(16,42,76,.74),rgba(3,11,22,.96))}.wheel-example-card figcaption span{color:var(--orange-500);font:800 italic .67rem/1 Saira,sans-serif;letter-spacing:.12em;text-transform:uppercase}.wheel-example-card figcaption strong{color:var(--ice-100);font:800 italic 1rem/1.08 Saira,sans-serif;text-transform:uppercase}.wheel-example-card figcaption small{color:var(--ice-300);font-size:.76rem;line-height:1.45}.wheel-exposure__analysis{margin-top:1rem;border:1px solid rgba(113,181,234,.32);border-radius:.85rem;padding:clamp(1.2rem,3vw,2rem);background:rgba(7,20,40,.8);box-shadow:inset 0 0 50px rgba(32,104,179,.06)}.wheel-exposure__status{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1.1rem;padding-bottom:1rem;border-bottom:1px solid rgba(113,181,234,.2)}.wheel-exposure__status span{color:var(--orange-500);font:800 italic .7rem/1 Saira,sans-serif;letter-spacing:.13em;text-transform:uppercase}.wheel-exposure__status strong{color:var(--ice-100);font:800 italic 1rem/1 Saira,sans-serif;text-align:right;text-transform:uppercase}.wheel-exposure__scale{display:grid;gap:.75rem}.exposure-band{position:relative;display:grid;grid-template-columns:120px minmax(170px,.7fr) minmax(0,1.3fr);align-items:center;gap:1rem;overflow:hidden;border:1px solid rgba(113,181,234,.18);border-radius:.55rem;padding:1rem;background:rgba(4,13,27,.72)}.exposure-band::before{position:absolute;inset:0 auto 0 0;width:4px;background:var(--blue-300);content:""}.exposure-band--mid::before{background:#d0a74f}.exposure-band--high::before{background:var(--orange-500)}.exposure-band>div{display:grid;gap:.2rem}.exposure-band>div b{color:var(--ice-100);font:800 italic 1.45rem/1 Saira,sans-serif;text-transform:uppercase}.exposure-band>div span{color:var(--blue-300);font-size:.67rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.exposure-band>strong{color:var(--ice-100);font:800 italic 1rem/1.1 Saira,sans-serif;text-transform:uppercase}.exposure-band p{margin:0;color:var(--ice-300);font-size:.82rem;line-height:1.48}.wheel-exposure__note{margin:1.2rem 0 0;border-left:3px solid var(--orange-500);padding:1rem 1.2rem;background:rgba(3,11,22,.72)}.wheel-exposure__note strong{color:var(--ice-100)}
.wheel-chemistry{position:relative;overflow:hidden;background:radial-gradient(circle at 86% 28%,rgba(32,104,179,.15),transparent 28%),linear-gradient(145deg,#06101f,#0a1d34)}.wheel-chemistry::after{position:absolute;inset:0;background-image:linear-gradient(rgba(113,181,234,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(113,181,234,.055) 1px,transparent 1px);background-size:32px 32px;content:"";mask-image:linear-gradient(90deg,transparent,#000 50%,transparent);pointer-events:none}.wheel-chemistry>.container{position:relative;z-index:1}.wheel-chemistry__intro{display:grid;grid-template-columns:minmax(0,.8fr) minmax(420px,1.2fr);align-items:end;gap:clamp(2rem,7vw,7rem)}.wheel-chemistry__intro .lead{margin-bottom:.45rem}.wheel-chemistry__stack{display:grid;gap:1.4rem;margin-top:2.2rem}.wheel-chemistry__card{display:grid;grid-template-columns:minmax(250px,.38fr) minmax(0,1.62fr);overflow:hidden;border:1px solid rgba(113,181,234,.38);border-radius:.9rem;background:rgba(4,13,27,.88);box-shadow:0 24px 70px rgba(0,0,0,.38)}.wheel-chemistry__card--sealant{border-color:rgba(245,166,35,.42)}.wheel-chemistry__signal{display:grid;align-content:center;justify-items:center;min-height:420px;border-right:1px solid rgba(113,181,234,.25);padding:2rem;background:radial-gradient(circle at 50% 43%,rgba(32,104,179,.3),transparent 28%),linear-gradient(145deg,#102f4f,#030a14);text-align:center}.wheel-chemistry__card--sealant .wheel-chemistry__signal{border-color:rgba(245,166,35,.26);background:radial-gradient(circle at 50% 43%,rgba(245,166,35,.24),transparent 28%),linear-gradient(145deg,#392a17,#030a14)}.wheel-chemistry__signal>span,.wheel-chemistry__signal>small{color:var(--blue-300);font:800 italic .68rem/1.3 Saira,sans-serif;letter-spacing:.12em;text-transform:uppercase}.wheel-chemistry__card--sealant .wheel-chemistry__signal>span,.wheel-chemistry__card--sealant .wheel-chemistry__signal>small{color:var(--orange-500)}.wheel-chemistry__signal>strong{margin:.8rem 0;color:var(--ice-100);font:800 italic clamp(4.6rem,9vw,7rem)/.85 Saira,sans-serif;letter-spacing:-.06em;text-shadow:0 0 35px rgba(113,181,234,.35)}.wheel-chemistry__signal>div{display:flex;gap:.48rem;margin:.55rem 0 1.1rem}.wheel-chemistry__signal i{width:10px;height:10px;border:1px solid var(--blue-300);border-radius:50%;background:rgba(113,181,234,.3);box-shadow:0 0 15px rgba(113,181,234,.7)}.wheel-chemistry__card--sealant .wheel-chemistry__signal i{border-color:var(--orange-500);background:rgba(245,166,35,.3);box-shadow:0 0 15px rgba(245,166,35,.55)}.wheel-chemistry__body{padding:clamp(1.5rem,4vw,3rem)}.wheel-chemistry__index{color:var(--orange-500);font:800 italic .72rem/1 Saira,sans-serif;letter-spacing:.14em}.wheel-chemistry__body h3{margin:.6rem 0 1rem}.wheel-chemistry__body>p{max-width:900px}.wheel-chemistry__mechanism{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1.5rem 0}.wheel-chemistry__mechanism>div{border-top:2px solid var(--blue-300);padding:1rem;background:rgba(16,42,76,.48)}.wheel-chemistry__card--sealant .wheel-chemistry__mechanism>div{border-color:var(--orange-500)}.wheel-chemistry__mechanism b{display:block;margin-bottom:.45rem;color:var(--ice-100);font:800 italic .86rem/1 Saira,sans-serif;letter-spacing:.05em;text-transform:uppercase}.wheel-chemistry__mechanism p{margin:0;color:var(--ice-300);font-size:.82rem;line-height:1.55}.wheel-chemistry__payoff{margin:0;border-left:3px solid var(--orange-500);padding:1rem 1.2rem;background:rgba(3,11,22,.72)}.wheel-chemistry__payoff strong{color:var(--ice-100)}
.wheel-cure__panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.45fr);align-items:center;gap:2rem;border:1px solid rgba(245,166,35,.58);border-radius:1rem;padding:clamp(1.5rem,4vw,3rem);background:linear-gradient(135deg,rgba(54,39,18,.72),rgba(7,20,40,.96));box-shadow:0 24px 80px rgba(0,0,0,.38),inset 0 0 50px rgba(245,166,35,.06)}.wheel-cure__clock{display:grid;justify-items:center;border-left:1px solid rgba(245,166,35,.3);text-align:center}.wheel-cure__clock strong{color:var(--ice-100);font:800 italic clamp(6rem,12vw,9rem)/.78 Saira,sans-serif;text-shadow:0 0 30px rgba(245,166,35,.2)}.wheel-cure__clock span{color:var(--orange-500);font:800 italic 1.3rem/1 Saira,sans-serif;text-transform:uppercase}.wheel-cure__clock small{margin-top:.65rem;color:var(--ice-300)}
.wheel-price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin-top:1.2rem}
.service-dialog{width:min(1040px,calc(100% - 2rem));max-width:none;max-height:calc(100dvh - 2rem);overflow:auto;border:1px solid rgba(113,181,234,.46);border-radius:1rem;padding:0;color:var(--ice-300);background:#071428;box-shadow:0 35px 120px rgba(0,0,0,.72)}
.service-dialog::backdrop{background:rgba(2,7,15,.84);backdrop-filter:blur(10px)}
.service-dialog__shell{position:relative;padding:clamp(1.2rem,4vw,2.5rem);background:radial-gradient(circle at 85% 5%,rgba(32,104,179,.22),transparent 34%),linear-gradient(145deg,#0b213b,#050c17 72%)}
.service-dialog__close{position:absolute;top:1rem;right:1rem;z-index:2;border:1px solid var(--line);border-radius:.35rem;padding:.45rem .7rem;color:var(--ice-100);background:rgba(7,15,30,.82);font-size:.78rem;font-weight:800;text-transform:uppercase;cursor:pointer}
.service-dialog__heading{padding-right:5rem}.service-dialog__heading h2{max-width:16ch;font-size:clamp(2rem,5vw,3.5rem)}.service-dialog__heading>p:last-child{max-width:62ch;margin-bottom:0}
.service-dialog__options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.8rem}
.service-dialog__option{display:grid;grid-template-rows:auto 1fr;overflow:hidden;border:1px solid rgba(113,181,234,.3);border-radius:.75rem;background:rgba(4,13,27,.86)}
.service-dialog__option img{width:100%;aspect-ratio:20/13;object-fit:cover}.service-dialog__option>div{display:grid;grid-template-rows:auto auto 1fr auto;gap:.7rem;padding:1.25rem}.service-dialog__option span{color:var(--orange-500);font:800 italic .7rem/1 Saira,sans-serif;letter-spacing:.13em;text-transform:uppercase}.service-dialog__option p{margin:0 0 .35rem;font-size:.9rem;line-height:1.55}.service-dialog__option .button{width:100%}
@media(max-width:1050px){.wheel-example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.wheel-hero__layout,.wheel-compat,.wheel-cure__panel,.wheel-exposure__intro,.wheel-chemistry__intro{grid-template-columns:1fr}.wheel-hero__readout{max-width:620px}.wheel-compat__matrix{min-width:0}.wheel-cure__clock{border-top:1px solid rgba(245,166,35,.3);border-left:0;padding-top:2rem}.wheel-system-grid,.wheel-price-grid{grid-template-columns:1fr}.wheel-chemistry__card{grid-template-columns:1fr}.wheel-chemistry__signal{min-height:260px;border-right:0;border-bottom:1px solid rgba(113,181,234,.25)}.exposure-band{grid-template-columns:110px minmax(160px,.7fr) minmax(0,1.3fr)}}
@media(max-width:650px){.page-hero.page-hero--wheels{min-height:0;background-image:linear-gradient(90deg,rgba(4,13,27,.98),rgba(4,13,27,.76)),linear-gradient(0deg,rgba(7,35,65,.54),transparent 55%),image-set(url('/assets/wheel-protection-ferrari-hero-mobile.avif') type('image/avif'),url('/assets/wheel-protection-ferrari-hero-mobile.webp') type('image/webp'));background-position:center}.page-hero--wheels h1{max-width:100%;font-size:clamp(2.6rem,12vw,3rem)}.wheel-system-grid,.wheel-example-grid{grid-template-columns:1fr}.wheel-facts,.wheel-chemistry__mechanism{grid-template-columns:1fr}.wheel-chemistry__signal{min-height:220px}.wheel-chemistry__body{padding:1.25rem}.wheel-compat{display:block}.wheel-compat__matrix{margin-top:1.5rem;font-size:.75rem}.wheel-compat__matrix>div{grid-template-columns:1.1fr 1fr 1fr}.wheel-compat__matrix>div>*{padding:.65rem .45rem}.wheel-price-grid{display:block}.wheel-price-grid .price-table+ .price-table{margin-top:1.2rem}.wheel-exposure__status{align-items:flex-start;flex-direction:column}.wheel-exposure__status strong{text-align:left}.exposure-band{grid-template-columns:1fr;padding:1rem 1rem 1.15rem}.service-dialog{width:calc(100% - 1rem);max-height:calc(100dvh - 1rem)}.service-dialog__shell{padding:1rem}.service-dialog__heading{padding-top:2.5rem;padding-right:0}.service-dialog__options{grid-template-columns:1fr}.service-dialog__option>div{padding:1rem}}

.wheel-chemistry__brand{display:block;width:auto;max-width:145px;height:auto;max-height:34px;margin-bottom:1.1rem}.wheel-chemistry__brand--cerakote{max-width:108px;max-height:40px}.wheel-chemistry__signal>strong{display:grid;width:120px;height:230px;margin:.4rem 0;place-items:center;transform:rotate(-90deg);white-space:nowrap}.wheel-chemistry__card--sealant .wheel-chemistry__signal>strong{font-size:clamp(3.8rem,6vw,5.1rem);letter-spacing:-.04em;transform:translateY(22px) rotate(-90deg)}

.reveal { opacity: 0; transform: translate(12px,-8px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (min-width: 981px) {
  .hero-copy { padding-block: 4rem; }
  .hero-copy h1 { font-size: clamp(3rem, 4vw, 4rem); }
  .nav-menu:hover .nav-menu__panel, .nav-menu:focus-within .nav-menu__panel { display: grid; }
}

@media (min-width: 981px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .page-hero__video { display: block; }
}

@media (min-width: 981px) and (max-width: 1100px) {
  .hero-copy h1 { font-size: 3rem; }
}

@media (max-width: 980px) {
  .owner-grid--team { grid-template-columns: 1fr; }
  .nav-toggle { display: block; }
  .nav-links { position: absolute; top: 76px; right: 1rem; display: none; width: min(310px, calc(100% - 2rem)); align-items: stretch; flex-direction: column; border: 1px solid var(--line); padding: 1rem; background: var(--navy-900); box-shadow: var(--shadow); }
  .nav-links.is-open { display: flex; }
  .nav-menu, .nav-menu__trigger { width: 100%; }
  .nav-menu::after { display: none; }
  .nav-menu__trigger { justify-content: space-between; }
  .nav-menu__panel { position: static; min-width: 0; margin-top: .25rem; box-shadow: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 690px; padding-right: 0; }
  .hero-media { inset: 0; opacity: .48; clip-path: none; }
  .hero-media::after { left: 74%; }
  .hero-media img { object-position: 72% center; }
  .page-hero { background-image: linear-gradient(90deg, rgba(7,15,30,.98), rgba(7,15,30,.45)), url('/assets/hero-mobile-detailing-1024.webp'); }
  .page-hero.page-hero--services { background-image: linear-gradient(90deg, rgba(7,15,30,.98) 0 20%, rgba(7,15,30,.82) 55%, rgba(7,15,30,.42)), url('/assets/services-hero-bmw-z4.webp'); background-position: 68% center; }
  .page-hero.page-hero--our-work { background-image: linear-gradient(90deg, rgba(7,15,30,.96) 0 12%, rgba(7,15,30,.78) 52%, rgba(7,15,30,.28)), url('/assets/work-porsche-911-turbo-rear.webp'); background-position: 62% center; }
  .page-hero.page-hero--our-team { background-image: linear-gradient(90deg, rgba(7,15,30,.96) 0 12%, rgba(7,15,30,.76) 48%, rgba(7,15,30,.2)), linear-gradient(0deg, rgba(7,15,30,.72), transparent 52%), url('/assets/team-hero-corvette-detailing.webp'); background-position: center; }
  .page-hero.page-hero--trim { background-image: linear-gradient(90deg, rgba(7,15,30,.98) 0 12%, rgba(7,15,30,.82) 58%, rgba(7,15,30,.55)), linear-gradient(0deg, rgba(7,15,30,.86), transparent 58%), url('/assets/services-hero-bmw-z4.webp'); background-position: 68% center; }
  .trim-hero__layout, .trim-expertise, .trim-ott, .trim-longevity, .trim-coat { grid-template-columns: 1fr; }
  .trim-hero__readout { max-width: 620px; }
  .trim-ott__visual { min-height: 380px; }
  .trim-coat__signal { min-height: 390px; border-right: 0; border-bottom: 1px solid rgba(245,166,35,.32); }
  .trim-longevity__track { min-width: 0; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card--popular { transform: none; }
  .area-grid, .booking-shell { grid-template-columns: 1fr; }
  .booking-sidebar { position: static; }
  .service-detail, .service-detail--reverse { grid-template-columns: 1fr; }
  .service-detail--reverse .service-detail__media { order: 0; }
  .addon-grid { grid-template-columns: repeat(2, 1fr); }
  .trim-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .hero, .hero-grid { min-height: 720px; }
  .hero-copy { padding-block: 3.5rem; }
  .hero-copy h1 { font-size: clamp(2.7rem, 13vw, 3.4rem); }
  .trust-list { grid-template-columns: repeat(2, 1fr); }
  .trust-list li:nth-child(2) { border-right: 0; }
  .trust-list li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .section-heading, .cta-band .container { align-items: flex-start; flex-direction: column; }
  .cards, .work-strip, .gallery-grid, .steps, .review-grid, .owner-grid, .trust-grid, .option-grid { grid-template-columns: 1fr; }
  .package-cards .card--wide { display: flex; grid-column: auto; }
  .addon-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
  .addon-dialog__shell { padding: 1rem; }
  .addon-dialog h2 { margin-top: 2.6rem; margin-right: 0; }
  .addon-dialog__offer { align-items: stretch; flex-direction: column; }
  .addon-dialog__offer .button { width: 100%; }
  .trim-systems, .trim-decision-grid, .trim-process { grid-template-columns: 1fr; }
  .trim-ott__visual { min-height: 330px; }
  .trim-ott__specs { grid-template-columns: 1fr; }
  .trim-coat__signal { min-height: 330px; }
  .trim-coat__signal > strong { margin-top: 2.4rem; }
  .trim-coat__signal > p { margin-bottom: 2.2rem; }
  .trim-coat__explainers, .trim-coat__offer { grid-template-columns: 1fr; }
  .trim-coat__offer > span + span { border-top: 1px solid rgba(113,181,234,.2); border-left: 0; }
  .trim-coat__action { align-items: stretch; flex-direction: column; }
  .trim-coat__action .button { width: 100%; text-align: center; }
  .trim-readouts .accordion-button { grid-template-columns: 5rem minmax(0, 1fr) 2.35rem; min-height: 70px; }
  .trim-readout__meta { justify-content: center; padding-inline: .55rem; }
  .trim-readout__meta small { display: none; }
  .trim-readout__question { padding-inline: .85rem; }
  .trim-readouts .accordion-panel { padding: 1rem 1rem 1.15rem 5.85rem; }
  .page-hero.page-hero--booking { height: 390px; padding: 5.5rem 0 4rem; background-image: linear-gradient(90deg, rgba(7,15,30,.97), rgba(7,15,30,.55)), linear-gradient(0deg, rgba(7,15,30,.58), transparent 58%), image-set(url('/assets/book-classic-hero-mobile.avif') type('image/avif'), url('/assets/book-classic-hero.webp') type('image/webp')); background-position: 72% center; }
  .page-hero.page-hero--trim { min-height: 760px; padding-block: 6rem 5rem; }
  .trim-hero__layout { gap: 1.5rem; }
  .trim-hero__readout { padding: 1.1rem; }
  .trim-expertise { gap: 2rem; }
  .trim-diagnostic__tabs { grid-template-columns: 1fr; }
  .trim-system__visual { min-height: 185px; }
  .trim-fact-row { grid-template-columns: 1fr; }
  .trim-fact-row span { display: grid; grid-template-columns: 105px 1fr; gap: .5rem; }
  .trim-longevity__track article { margin-left: 1.55rem; }
  .trim-longevity__track article::before { left: -1.9rem; }
  .price-table th, .price-table td { padding: .7rem .55rem; font-size: .86rem; }
  .team-profile { grid-template-columns: 1fr; }
  .team-profile__photo img { min-height: 0; aspect-ratio: 1; }
  .step:not(:last-child)::after { left: 1.2rem; top: calc(100% + .1rem); transform: rotate(75deg); }
  .service-map__frame { border-radius: .75rem 2rem .75rem 2rem; }
  .service-map__name { font-size: .62rem; }
  .service-map__tooltip { max-width: 180px; padding: .45rem .55rem; font-size: .66rem; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-aside { position: static; }
  .contact-form__actions { align-items: stretch; flex-direction: column; }
  .contact-form__actions .button { width: 100%; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .footer-address { text-align: left; }
  .brand-rail { margin-bottom: 2.5rem; padding: 1.8rem 0 2.1rem; }
  .brand-rail__header { align-items: flex-start; }
  .brand-rail__header h2 { max-width: 13ch; }
  .brand-rail__viewport { padding-inline: 1rem; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
  .brand-logo { width: 154px; height: 84px; padding: .8rem; }
  .brand-logo img { width: 126px; height: 48px; }
  .brand-logo img[src$="adams-polishes.svg"],
  .brand-logo img[src$="chemical-guys.svg"],
  .brand-logo img[src$="griots-garage.svg"] { width: 62px; height: 62px; }
  .progress, .progress--wheel { grid-template-columns: repeat(3, 1fr); }
  .booking-vehicle-card { grid-template-columns: 1fr; }
  .booking-vehicle-card__actions { flex-wrap: wrap; }
  .summary-details { grid-template-columns: 1fr; }
  .summary-details__item--total { grid-column: auto; }
  .wizard-actions { flex-wrap: wrap; }
  .wizard-actions .button { flex: 1; }
  .toggle { width: 100%; }
  .toggle button { flex: 1 1 40%; }
  #packages .toggle button { flex: 1 1 0; padding-inline: .45rem; font-size: .78rem; white-space: normal; }
  .service-detail__media, .service-detail__media img { min-height: 320px; }
  .service-includes { columns: 1; }
  .addon-grid, .specialty-grid { grid-template-columns: 1fr; }
}

@media (min-width: 701px) and (max-width: 1050px) {
  #packages .section-heading { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .option--vehicle, .booking-vehicle-visual img { transition: none; }
}

@media (max-width: 560px) {
  .vehicle-rail { display: none; }
  .vehicle-select { display: grid; gap: .45rem; color: var(--ice-100); font-weight: 700; }
  .vehicle-select select { width: 100%; border: 1px solid var(--blue-300); border-radius: .5rem; padding: .85rem 2.7rem .85rem .9rem; color: var(--ice-100); background: linear-gradient(145deg, rgba(20,53,94,.96), rgba(8,24,46,.96)); font: 700 1rem/1.2 Inter, sans-serif; }
  .services-price-note { text-align: left; }
}

/* Headlight restoration */
.headlight-page h1, .headlight-page .lead { max-width: none; }
.page-hero--headlights { background: linear-gradient(90deg, rgba(5,12,23,.96), rgba(5,12,23,.76) 48%, rgba(5,12,23,.55)), image-set(url('/assets/hero-porsche-911-1600.avif') type('image/avif'), url('/assets/hero-porsche-911-1600.webp') type('image/webp')) center/cover no-repeat; }
.headlight-hero__layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.headlight-hero__panel { border: 1px solid rgba(113,181,234,.5); border-top: 3px solid var(--orange-500); border-radius: .75rem; padding: clamp(1.25rem, 3vw, 2rem); background: linear-gradient(145deg, rgba(16,42,76,.93), rgba(7,15,30,.96)); box-shadow: var(--shadow); }
.headlight-hero__price { margin: 1.2rem 0 .5rem; }
.headlight-hero__price strong { color: var(--ice-100); font: 800 italic clamp(3.5rem, 6vw, 5rem)/1 var(--font-display); }
.headlight-hero__price span { display: block; color: var(--blue-300); font-size: .85rem; }
.headlight-hero__panel dl { margin: 1.5rem 0; }
.headlight-hero__panel dl div { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1rem; border-top: 1px solid var(--line); padding-block: .7rem; }
.headlight-hero__panel dt { font-size: .85rem; }
.headlight-hero__panel dd { margin: 0; color: var(--ice-100); font-weight: 700; text-align: right; }
.headlight-hero__panel .button { width: 100%; }
.headlight-pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2rem; }
.headlight-option { display: grid; grid-template-rows: auto 1fr; min-width: 0; padding: 0; }
.headlight-option__head { display: grid; align-content: center; min-height: 220px; padding: 2rem; background: radial-gradient(circle at 78% 20%, rgba(113,181,234,.26), transparent 36%), linear-gradient(145deg, #183653, #050c17 72%); border-bottom: 1px solid rgba(113,181,234,.25); }
.headlight-option--addon .headlight-option__head { background: radial-gradient(circle at 78% 20%, rgba(245,166,35,.22), transparent 36%), linear-gradient(145deg, #3b2d19, #050c17 72%); border-bottom-color: rgba(245,166,35,.3); }
.headlight-option__head > span { color: var(--orange-500); font: 800 italic .72rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.headlight-option__head > small { color: var(--blue-300); font-weight: 800; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.headlight-option__price { display: flex; align-items: baseline; gap: .6rem; margin: .8rem 0 .5rem; }
.headlight-option__price small { color: var(--ice-300); font-size: .85rem; }
.headlight-option__price strong { color: var(--ice-100); font: 800 italic clamp(4.2rem, 8vw, 6.5rem)/.86 var(--font-display); letter-spacing: -.05em; text-shadow: 0 0 35px rgba(113,181,234,.28); }
.headlight-option--addon .headlight-option__price strong { text-shadow: 0 0 35px rgba(245,166,35,.22); }
.headlight-option__body { display: flex; flex-direction: column; padding: clamp(1.4rem, 3vw, 2rem); }
.headlight-option__body > p:not([class]) { margin-bottom: 0; }
.headlight-tiers__label { margin: 1.5rem 0 .6rem; color: var(--blue-300); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.headlight-tiers { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.headlight-tiers li > a, .headlight-tiers li:not(:has(a)) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; min-height: 3.4rem; border: 1px solid var(--line); border-radius: .6rem; padding: .7rem 1rem; background: rgba(5,12,23,.45); color: var(--ice-100); text-decoration: none; }
.headlight-tiers li:not(:has(a)) { grid-template-columns: minmax(0, 1fr) auto; }
.headlight-tiers span { font-weight: 600; font-size: .95rem; }
.headlight-tiers strong { font: 800 italic 1.5rem/1 var(--font-display); }
.headlight-tiers em { color: var(--orange-500); font-style: normal; font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.headlight-tiers em::after { content: " \2192"; }
.headlight-tiers a { transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.headlight-tiers a:hover, .headlight-tiers a:focus-visible { border-color: var(--orange-500); background: rgba(245,166,35,.08); transform: translateX(3px); }
.headlight-option__body .button-row, .headlight-option__facts { margin-top: auto; padding-top: 1.5rem; }
.headlight-pricing__note { margin: 1.25rem 0 0; color: var(--ice-300); font-size: .9rem; text-align: center; }
.headlight-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.headlight-process li { position: relative; overflow: hidden; border: 1px solid var(--line); border-top: 3px solid var(--blue-300); border-radius: var(--radius); padding: 1.6rem; background: linear-gradient(145deg, rgba(20,53,94,.7), rgba(8,24,46,.85)); }
.headlight-process li:last-child { border-top-color: var(--orange-500); }
.headlight-process li > span { position: absolute; top: .4rem; right: 1rem; color: rgba(113,181,234,.16); font: 800 italic 5.5rem/1 var(--font-display); }
.headlight-process h3 { position: relative; margin-top: 2.2rem; font-size: clamp(1.4rem, 2vw, 1.8rem); }
.headlight-process p { position: relative; margin-bottom: 0; }
.headlight-source { margin-top: 1.25rem; font-size: .85rem; color: var(--ice-300); }
.headlight-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2rem; }
.headlight-limits__col { border: 1px solid rgba(113,181,234,.4); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem); background: linear-gradient(145deg, rgba(20,53,94,.7), rgba(8,24,46,.85)); }
.headlight-limits__col--no { border-color: rgba(245,166,35,.45); background: linear-gradient(145deg, rgba(54,39,18,.6), rgba(7,20,40,.92)); }
.headlight-limits__col ul { display: grid; gap: .75rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.headlight-limits__col li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .5rem; color: var(--ice-100); }
.headlight-limits__col li::before { content: "\2713"; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(113,181,234,.18); color: var(--blue-300); font-weight: 800; font-size: .85rem; }
.headlight-limits__col--no li::before { content: "\2715"; background: rgba(245,166,35,.16); color: var(--orange-500); }
.headlight-callout { margin-top: 1.5rem; border-left: 3px solid var(--orange-500); padding: 1rem 1.25rem; background: rgba(16,42,76,.5); }
.headlight-aftercare h2 { margin-top: 0; }
.headlight-logistics { margin-top: 1.5rem; color: var(--ice-300); }
@media (max-width: 900px) { .headlight-hero__layout, .headlight-pricing, .headlight-process, .headlight-limits { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .headlight-option__head { min-height: 0; padding: 1.5rem; } .headlight-page h1 { font-size: clamp(2.5rem, 11vw, 3.5rem); } .page-hero--headlights { background: linear-gradient(rgba(5,12,23,.88), rgba(5,12,23,.92)), image-set(url('/assets/hero-porsche-911-mobile-480.avif') type('image/avif'), url('/assets/hero-porsche-911-mobile-480.webp') type('image/webp')) center/cover no-repeat; } }

/* ---- City landing pages (CG-08) ---- */
.city-page h1, .city-page .lead { max-width: none; }
.city-service-copy { margin-top: 2rem; }
.city-service-copy article + article { margin-top: 1.8rem; border-top: 1px solid var(--line); padding-top: 1.8rem; }
.city-service-copy h3 { margin-bottom: .75rem; }
.city-service-copy p { margin: .75rem 0 0; }
.page-hero--city{position:relative;overflow:hidden;min-height:560px;background:linear-gradient(90deg,rgba(5,12,23,.97) 0 30%,rgba(5,12,23,.78) 52%,rgba(5,12,23,.34) 76%,rgba(5,12,23,.6) 100%),linear-gradient(0deg,rgba(7,15,30,.55),transparent 55%),image-set(url('/assets/hero-porsche-911-1600.avif') type('image/avif'),url('/assets/hero-porsche-911-1600.webp') type('image/webp')) center/cover no-repeat #050c17}
.page-hero--city::before{position:absolute;inset:0;background:linear-gradient(rgba(113,181,234,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(113,181,234,.055) 1px,transparent 1px);background-size:34px 34px;content:"";mask-image:linear-gradient(115deg,#000 28%,rgba(0,0,0,.35) 66%,transparent);pointer-events:none}
.page-hero--city::after{position:absolute;inset:0;background:linear-gradient(115deg,transparent 58%,rgba(245,166,35,.34) 58.15%,transparent 58.3%),radial-gradient(circle at 78% 26%,rgba(30,143,255,.16),transparent 46%);content:"";pointer-events:none}
.city-hero__layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:3rem;align-items:center;padding-block:4.2rem}
.city-hero__layout>div{min-width:0}
.city-readout{max-width:430px;justify-self:end;border:1px solid rgba(113,181,234,.42);border-radius:.8rem;padding:1.4rem;background:linear-gradient(145deg,rgba(7,15,30,.93),rgba(16,42,76,.72));box-shadow:0 24px 70px rgba(0,0,0,.4),inset 0 0 38px rgba(32,104,179,.12)}
.city-readout>span{color:var(--orange-500);font:800 italic .72rem/1 Saira,sans-serif;letter-spacing:.15em;text-transform:uppercase}
.city-readout>strong{display:block;margin:.6rem 0 1rem;color:var(--ice-100);font:800 italic clamp(1.25rem,2.4vw,1.7rem)/1.08 Saira,sans-serif;text-transform:uppercase}
.city-radar{position:relative;margin-bottom:1rem}
.city-radar svg{display:block;width:100%;height:auto}
.radar-ring{fill:none;stroke:rgba(113,181,234,.3);stroke-width:1}
.radar-ring--zone{stroke:rgba(245,166,35,.6);stroke-width:1.5;stroke-dasharray:4 7}
.radar-axis{stroke:rgba(113,181,234,.14);stroke-width:1}
.radar-label{fill:#71b5ea;font:600 10px Inter,sans-serif;letter-spacing:.06em}
.radar-sweep{transform-origin:150px 150px;animation:radar-spin 7s linear infinite}
@keyframes radar-spin{to{transform:rotate(360deg)}}
.radar-blip{fill:#f5a623}
.radar-blip-pulse{fill:none;stroke:#f5a623;stroke-width:1.4;transform-box:fill-box;transform-origin:center;animation:radar-blip 2.4s ease-out infinite}
@keyframes radar-blip{0%{transform:scale(.4);opacity:.9}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
.radar-base{fill:#71b5ea}
.city-readout ul{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}
.city-readout li{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid rgba(113,181,234,.2);padding-top:.55rem;color:var(--ice-300);font-size:.85rem}
.city-readout li b{color:var(--ice-100);font-weight:700;text-align:right}
.city-readout li.is-live b{color:var(--orange-500);font:800 italic .8rem/1.3 Saira,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.city-points{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-block:1.6rem}
.city-point{border:1px solid var(--line);border-radius:.7rem;padding:1.1rem 1.2rem;background:rgba(16,42,76,.42)}
.city-point strong{display:block;margin-bottom:.35rem;color:var(--ice-100)}
.city-point--fee{border-color:rgba(245,166,35,.5);background:linear-gradient(145deg,rgba(16,42,76,.42),rgba(78,47,7,.28))}
.city-siblings{color:var(--ice-300);font-size:.92rem}
@media(max-width:900px){.city-hero__layout{grid-template-columns:1fr;padding-block:3.2rem}.city-readout{max-width:520px;justify-self:start}.city-points{grid-template-columns:1fr}}
@media(max-width:650px){.page-hero--city{min-height:0;background:linear-gradient(rgba(5,12,23,.9),rgba(5,12,23,.72) 42%,rgba(5,12,23,.92)),image-set(url('/assets/hero-porsche-911-mobile-480.avif') type('image/avif'),url('/assets/hero-porsche-911-mobile-480.webp') type('image/webp')) center 32%/cover no-repeat #050c17}.page-hero--city h1{max-width:100%;font-size:clamp(2.5rem,11vw,3rem)}}