:root {
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #eaf5ff;
  background: #04101b;
  --surface: #10283e;
  --line: #29465e;
  --muted: #a9bed0;
  --accent: #5ce1ee;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
input, button { font: inherit; }
button, summary { cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
h1, h2, h3, h4, p { margin: 0; }
p { line-height: 1.55; }
img { display: block; max-width: 100%; }

.shell {
  width: min(100%, 540px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: auto;
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 88% 0%, #10304a 0, transparent 340px), #071525;
  box-shadow: 0 0 80px #0009;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 18px 10px;
}

.logo img { width: min(45vw, 184px); height: auto; }
.page { padding: 10px 18px 24px; }
.page > h2 { margin: 7px 0 14px; font-size: clamp(1.65rem, 6vw, 2.1rem); letter-spacing: -.04em; }
.page > .btn, .page > .inline, .page > details, .page > .muted + .status { margin-top: 14px; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; font-weight: 800; }
.muted, .card p, .contactline span, .quick-link span { color: var(--muted); font-size: .88rem; }
.inline { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.hero { overflow: hidden; border: 1px solid #2b5069; border-radius: 24px; background: #11283e; }
.hero-photo { position: relative; overflow: hidden; background: #0d1b28; }
.hero-photo img { width: 100%; height: auto; }
.photo-label { position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; border-radius: 7px; background: #071525e8; font-size: .71rem; font-weight: 750; }
.photo-label.after { right: 10px; left: auto; color: #062132; background: var(--accent); }
.hero-copy { padding: 19px; background: radial-gradient(circle at 100% 0%, #1b4356, transparent 72%); }
.hero h1 { margin: 7px 0 10px; font-size: clamp(2.2rem, 10vw, 3.55rem); line-height: .99; letter-spacing: -.055em; }
.hero h1 span { color: var(--accent); }
.hero-copy > p:not(.eyebrow) { color: #c1d3df; font-size: .9rem; }
.buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border: 1px solid #3a5a70;
  border-radius: 12px;
  background: #18364d;
  color: #edfaff;
  text-align: center;
  font-size: .85rem;
  font-weight: 780;
}
.btn.primary { background: #4ed9e9; border-color: #4ed9e9; color: #062132; }
.btn.small { padding-inline: 10px; font-size: .8rem; }
.top .btn { flex-shrink: 0; }
.btn:hover, .quick-link:hover, .contactline:hover { border-color: var(--accent); }
[aria-disabled="true"] { opacity: .58; cursor: default; }

.status {
  margin-top: 14px;
  padding: 14px 15px;
  border: 1px solid #345568;
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  background: #102b3e;
}
.status strong { display: block; margin: 3px 0; font-size: .98rem; }
.status p:not(.eyebrow) { color: #c8dae4; font-size: .84rem; }
.status a { display: inline-flex; min-height: 44px; align-items: center; color: var(--accent); font-size: .84rem; font-weight: 750; }
.sectiontitle { margin: 22px 0 12px; font-size: 1.13rem; letter-spacing: -.02em; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.quick-link, .contactline { display: grid; gap: 5px; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.quick-link strong, .contactline strong { font-size: .9rem; }
.quick-link span { font-size: .77rem; }
.contactline { margin-top: 9px; }
.contactline span { overflow-wrap: anywhere; }
.warranty-badge { display: grid; gap: 3px; margin: 16px 0 0; font-size: .8rem; color: var(--muted); }
.warranty-badge strong { color: #eaf5ff; }

.cards, .pricing-grid, .additional-pricing, .permanent-specials-grid, .hours-grid { display: grid; gap: 9px; }
.card, .service-card, .permanent-special-card, .monthly-promotion, .hours-grid article {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
}
.card h3, .service-card h3, .permanent-special-card h4, .monthly-promotion h4 { margin-bottom: 5px; font-size: 1rem; }
.card p, .service-card p, .permanent-special-card p, .monthly-promotion p { font-size: .86rem; color: var(--muted); }
.card .btn, .service-card .btn, .monthly-promotion .btn { margin-top: 12px; }
.book-card, .maintenance-pricing, .additional-pricing, .oversized-headlights, .monthly-promotion, .hours-grid { margin-top: 10px; }
.service-card .tier { color: var(--accent); font-size: .69rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; }
.service-card .tier-price, .permanent-special-card .permanent-special-price { color: var(--accent); font-weight: 850; font-size: 1.14rem; margin-bottom: 5px; }
.tier-price span, .permanent-special-price span { font-size: .75rem; }
.service-promotion-link { display: block; margin: 5px 0; font-size: .8rem; color: var(--accent); }
.pricing-note, .promotion-terms { margin-top: 12px; color: var(--muted); font-size: .83rem; }
.oversized-prices { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: .86rem; text-align: left; }
.oversized-prices th, .oversized-prices td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
.oversized-prices td { color: var(--accent); font-weight: 800; white-space: nowrap; }
.process-grid article { margin-top: 10px; }
.monthly-promotion .promotion-price { color: var(--accent); font-weight: 800; }
.promotion-price span { margin-left: 4px; }
.hours-grid span { display: block; color: var(--muted); font-size: .82rem; }
.hours-grid p { color: var(--accent); font-size: .75rem; }

.gallery-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.gallery-card img { width: 100%; max-height: 510px; object-fit: contain; }
.gallery-card figcaption { padding: 12px 14px; font-size: .88rem; font-weight: 750; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; margin: 8px 0; padding: 12px 14px; }
details summary { min-height: 25px; font-size: .9rem; font-weight: 750; }
details > p, .faq details > p { margin: 7px 0 0; color: var(--muted); font-size: .85rem; }
.faq details a { color: var(--accent); text-decoration: underline; }

.chat { overflow: hidden; margin-top: 12px; border: 1px solid var(--line); border-radius: 16px; background: #0d2236; }
.transcript { display: grid; gap: 8px; max-height: 50vh; max-height: 48dvh; min-height: 132px; padding: 11px; overflow: auto; }
.chat-message { width: fit-content; max-width: 100%; padding: 9px 12px; border-radius: 12px; background: #18334a; }
.chat-message.customer { justify-self: end; background: #184450; }
.chat-message p { white-space: pre-line; overflow-wrap: anywhere; font-size: .86rem; }
.chat-message .buttons { margin-top: 8px; }
.chat-form { display: flex; gap: 7px; border-top: 1px solid var(--line); padding: 8px; }
.chat-form input, #share-link {
  min-width: 0; min-height: 44px; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 9px; background: #071525; color: #eaf5ff; font-size: 1rem;
}
.chat-form input { flex: 1; }
#share-link { width: 100%; }
.offline-banner { padding: 9px 18px; color: #f9d6a2; background: #362b1d; font-size: .84rem; }

.nav {
  position: fixed;
  z-index: 5;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 540px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 6px max(4px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  border-top: 1px solid var(--line);
  background: #0b2033f6;
  backdrop-filter: blur(14px);
}
.nav a { min-height: 48px; display: grid; align-content: center; justify-items: center; gap: 4px; color: var(--muted); font-size: .69rem; font-weight: 700; border-radius: 10px; }
.nav a[aria-current="page"] { color: var(--accent); background: #163347; }
.nav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

dialog {
  width: min(calc(100% - 24px), 410px); padding: 18px; border: 1px solid var(--line);
  border-radius: 17px; background: #10283e; color: #eaf5ff;
}
dialog::backdrop { background: #04101bd9; }
dialog h2 { margin: 0 0 9px; font-size: 1.25rem; }
dialog p { margin-bottom: 10px; font-size: .9rem; }