:root {
  --bg: #090b12;
  --bg-deep: #07080d;
  --surface: #121722;
  --surface-raised: #181e2b;
  --surface-soft: #20293a;
  --surface-glass: rgb(20 26 38 / 0.76);
  --ink: #f4f7ff;
  --ink-soft: #c5cbd8;
  --muted: #8993a6;
  --line: rgb(213 225 255 / 0.13);
  --line-strong: rgb(213 225 255 / 0.22);
  --primary: #9bdfff;
  --primary-strong: #d5f2ff;
  --primary-deep: #183346;
  --accent: #b6b8ff;
  --success: #9ef0c2;
  --danger: #ffb0a2;
  --font-body: "Onest", sans-serif;
  --font-display: "Unbounded", sans-serif;
  --text-caption: 0.75rem;
  --text-label: 0.6875rem;
  --text-ui: 0.875rem;
  --text-body: 1rem;
  --text-lead: clamp(1rem, 1.4vw, 1.125rem);
  --page: clamp(18px, 5vw, 88px);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 30px;
  --radius-pill: 999px;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-feedback: 160ms;
  --duration-state: 280ms;
  --duration-entrance: 720ms;
  --z-sticky: 10;
  --z-menu: 20;
  --z-modal: 30;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg-deep); }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 4%, rgb(94 174 255 / 0.12), transparent 22rem),
    radial-gradient(circle at -6% 34%, rgb(150 131 255 / 0.09), transparent 24rem),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  line-height: 1.6;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
input, select, textarea { width: 100%; }
::selection { background: var(--primary); color: var(--bg-deep); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

.site-header {
  position: sticky;
  z-index: var(--z-sticky);
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 70px;
  padding: 0 clamp(18px, 3vw, 48px);
  border-bottom: 1px solid var(--line);
  background: rgb(9 11 18 / 0.94);
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.1);
}
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding-right: clamp(14px, 1.6vw, 22px); border-right: 1px solid var(--line); letter-spacing: -0.04em; }
.brand span { color: var(--ink); font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; line-height: 1; }
.brand small { color: var(--primary); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.main-nav { display: flex; flex: 0 0 auto; gap: clamp(19px, 2vw, 28px); margin-left: clamp(38px, 3.5vw, 48px); color: var(--ink-soft); font-size: var(--text-caption); font-weight: 700; }
.main-nav a, .header-information-item, .contact-links a { transition: color var(--duration-feedback) var(--ease-out-quart), opacity var(--duration-feedback) var(--ease-out-quart); }
.main-nav a:hover, .header-information-item:hover, .contact-links a:hover { color: var(--primary); }
.main-nav a[aria-current="page"] { color: var(--primary); }
.header-information { display: flex; align-items: center; gap: clamp(16px, 1.65vw, 23px); margin-left: clamp(34px, 3.1vw, 42px); }
.header-information-item { display: grid; min-height: 44px; place-content: center; gap: 3px; min-width: max-content; margin: 0; color: var(--ink); line-height: 1.25; }
.header-information-item span { color: var(--muted); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.075em; text-transform: uppercase; }
.header-information-item strong { font-size: var(--text-caption); font-weight: 800; }
.header-socials { display: flex; flex: 0 0 auto; gap: 5px; }
.site-header > .header-socials { margin-left: clamp(34px, 3.1vw, 42px); }
.social-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft); transition: transform var(--duration-feedback) var(--ease-out-quart), border-color var(--duration-feedback) var(--ease-out-quart), background var(--duration-feedback) var(--ease-out-quart), color var(--duration-feedback) var(--ease-out-quart); }
.social-icon img { width: 18px; height: 18px; object-fit: contain; }
.social-icon:hover { border-color: rgb(155 223 255 / 0.62); background: rgb(155 223 255 / 0.12); color: var(--primary); transform: translateY(-2px); }
.menu-button { display: none; min-width: 78px; min-height: 42px; border-radius: var(--radius-pill); background: var(--surface-soft); color: var(--ink); cursor: pointer; font-size: var(--text-caption); font-weight: 800; }
.mobile-menu { position: fixed; z-index: var(--z-menu); top: 76px; right: 0; left: 0; display: grid; padding: 12px var(--page) 18px; border-bottom: 1px solid var(--line); background: rgb(14 18 27 / 0.98); box-shadow: 0 18px 36px rgb(0 0 0 / 0.25); }
.mobile-menu > a { padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 700; }
.mobile-menu-information { display: grid; gap: 10px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.mobile-menu-information a, .mobile-menu-information p { display: grid; gap: 2px; margin: 0; color: var(--ink); font-size: var(--text-caption); font-weight: 800; }
.mobile-menu-information a:hover { color: var(--primary); }
.mobile-menu-information span { color: var(--muted); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.075em; text-transform: uppercase; }
.mobile-menu-socials { display: flex; align-items: center; gap: 8px; padding: 14px 0 2px; }
.mobile-menu-socials .header-socials { display: flex; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; font-weight: 700; }
.footer-links a:hover { color: var(--primary); }

#catalog, #services, #process, #contacts { scroll-margin-top: 105px; }
.hero, .section, .site-footer { margin-right: auto; margin-left: auto; padding-right: var(--page); padding-left: var(--page); }

.hero {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: calc(100svh - 92px);
  padding-top: clamp(94px, 11vw, 160px);
  padding-bottom: clamp(88px, 10vw, 138px);
  text-align: center;
}
.hero::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: auto;
  aspect-ratio: auto;
  border-radius: 0;
  background: radial-gradient(circle at 50% 44%, rgb(94 180 255 / 0.14), transparent 38%);
  content: "";
  filter: none;
  pointer-events: none;
}
.hero-copy { position: relative; z-index: 2; display: grid; justify-items: center; max-width: 1080px; padding: 16px 0; }
.eyebrow, .vehicle-picker-kicker, .catalog-source, .dialog-kicker { margin: 0 0 16px; color: var(--primary); font-size: var(--text-label); font-weight: 800; letter-spacing: 0.105em; text-transform: uppercase; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }
h1 { max-width: 1050px; margin: 0 0 26px; color: var(--ink); font-size: clamp(2.75rem, 5.25vw, 5.55rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.06; }
.hero h1 { min-height: 3.18em; }
h1 span { color: var(--primary); }
.hero-rotating-text { position: relative; }
.hero-lead { max-width: 52ch; margin: 0 0 32px; color: var(--ink-soft); font-size: var(--text-lead); letter-spacing: -0.01em; line-height: 1.7; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 13px 22px; border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer; font-size: var(--text-ui); font-weight: 800; transition: transform var(--duration-feedback) var(--ease-out-quart), background var(--duration-feedback) var(--ease-out-quart), border-color var(--duration-feedback) var(--ease-out-quart), box-shadow var(--duration-feedback) var(--ease-out-quart); }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--primary); color: #071119; box-shadow: 0 10px 28px rgb(105 211 255 / 0.16); }
.button-primary:hover { background: var(--primary-strong); box-shadow: 0 15px 34px rgb(105 211 255 / 0.27); }
.button-light { border-color: var(--line-strong); background: var(--surface-glass); color: var(--ink); }
.button-light:hover { border-color: rgb(155 223 255 / 0.55); background: var(--surface-soft); }
.text-action, .service-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 10px; border-radius: var(--radius-pill); background: transparent; color: var(--ink); cursor: pointer; font-size: var(--text-ui); font-weight: 800; text-align: left; transition: color var(--duration-feedback) var(--ease-out-quart), background var(--duration-feedback) var(--ease-out-quart); }
.text-action:hover, .service-link:hover { background: rgb(255 255 255 / 0.07); color: var(--primary); }
.text-action span, .service-link span { color: var(--primary); font-size: 18px; transition: transform var(--duration-feedback) var(--ease-out-quart); }
.text-action:hover span, .service-link:hover span { transform: translate(2px, -2px); }
.hero-vin-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: min(100%, 560px);
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 12px 14px 14px;
  border: 1px solid rgb(155 223 255 / 0.18);
  border-radius: 20px;
  background: linear-gradient(135deg, rgb(7 14 24 / 0.76), rgb(6 11 19 / 0.48));
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.16);
  backdrop-filter: blur(12px);
}
.hero-vin-kicker {
  margin: 0;
  color: var(--primary);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}
.hero-vin-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.hero-vin-form .search-control { text-align: left; }
.hero-vin-form .search-control input { min-height: 42px; font-size: 0.96rem; }
.hero-vin-form .button {
  min-height: 42px;
  padding-right: 16px;
  padding-left: 16px;
  font-size: 0.88rem;
  white-space: nowrap;
}
.hero-media { position: absolute; inset: 0; z-index: 0; min-height: auto; overflow: hidden; border: 0; border-radius: 0; background: var(--surface-soft); box-shadow: none; }
.hero-media::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(4 6 11 / 0.77), rgb(4 6 11 / 0.53) 50%, rgb(4 6 11 / 0.74)), linear-gradient(0deg, rgb(4 6 11 / 0.76), transparent 52%); content: ""; pointer-events: none; }
.hero-product-visual, .hero-product-visual img { width: 100%; height: 100%; min-height: auto; }
.hero-product-visual img { object-fit: cover; object-position: 54% 52%; filter: saturate(0.76) contrast(1.06) brightness(0.78); transition: transform 1.2s var(--ease-out-expo), filter 1.2s var(--ease-out-expo); }
.hero-media:hover .hero-product-visual img { transform: scale(1.035); filter: saturate(0.86) contrast(1.06) brightness(0.8); }
.hero-media-label, .hero-product-caption { position: absolute; z-index: 2; border: 1px solid rgb(242 249 255 / 0.19); border-radius: var(--radius-pill); background: rgb(11 14 22 / 0.56); backdrop-filter: blur(16px); }
.hero-media-label { top: 18px; left: 18px; display: none; align-items: center; gap: 8px; padding: 9px 13px; }
.hero-media-label span { color: var(--ink-soft); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.hero-media-label b { color: var(--ink); font-size: 0.68rem; line-height: 1; }
.hero-product-caption { right: 18px; bottom: 18px; display: none; max-width: min(85%, 335px); padding: 11px 14px; color: var(--ink); font-size: var(--text-caption); font-weight: 650; line-height: 1.5; }
.glass-orbit { display: none; }

.page-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.56fr); gap: clamp(30px, 6vw, 92px); align-items: start; width: min(1500px, 100%); min-height: 0; margin-right: auto; margin-left: auto; padding: clamp(70px, 9vw, 132px) var(--page) clamp(64px, 8vw, 112px); }
.page-hero-copy { display: grid; align-content: start; gap: 18px; max-width: 44rem; padding-top: clamp(8px, 1vw, 14px); }
.page-hero-copy .eyebrow { margin-bottom: 0; }
.page-hero h1 { max-width: 13ch; margin: 0; font-size: clamp(2.45rem, 4.7vw, 4.7rem); }
.page-hero-lead { max-width: 42ch; margin: 0; color: var(--ink-soft); font-size: var(--text-lead); line-height: 1.72; }
.page-hero-aside {
  position: relative;
  align-self: start;
  height: clamp(300px, 24vw, 360px);
  margin: clamp(38px, 4vw, 48px) 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: #0c121b;
  box-shadow: 0 22px 55px rgb(0 0 0 / 0.18);
}
.page-hero-aside::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(5 8 13 / 0.02) 15%, rgb(5 8 13 / 0.08) 48%, rgb(5 8 13 / 0.34) 100%),
    linear-gradient(130deg, rgb(8 31 47 / 0.2), rgb(8 31 47 / 0) 46%);
  content: "";
  pointer-events: none;
}
.page-hero-aside img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.02) brightness(0.9);
  transition: transform 1.1s var(--ease-out-expo), filter 1.1s var(--ease-out-expo);
}
.page-hero-aside:hover img {
  transform: scale(1.03);
  filter: saturate(0.98) contrast(1.04) brightness(0.93);
}
.route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.route-card { display: grid; align-content: space-between; min-height: 270px; padding: clamp(22px, 3vw, 36px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); transition: transform var(--duration-state) var(--ease-out-quart), border-color var(--duration-state) var(--ease-out-quart), background var(--duration-state) var(--ease-out-quart); }
.route-card:hover { border-color: rgb(155 223 255 / 0.45); background: var(--surface-raised); transform: translateY(-5px); }
.route-card span { color: var(--primary); font-size: var(--text-label); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.route-card h3 { max-width: 14ch; margin: 40px 0 12px; color: var(--ink); font-size: clamp(1.35rem, 2.1vw, 2.1rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.2; }
.route-card p { margin: 0; color: var(--muted); font-size: var(--text-ui); line-height: 1.65; }
.route-card a { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 26px; color: var(--primary); font-size: var(--text-caption); font-weight: 800; }
.route-card a::after { content: "↗"; font-size: 1rem; }
.route-card--catalog, .route-card--services { position: relative; isolation: isolate; background: var(--bg-deep); }
.route-card--catalog::before, .route-card--services::before { position: absolute; inset: -8px; z-index: 0; background-position: center; background-size: cover; content: ""; filter: grayscale(1) contrast(1.08) brightness(0.64); transform: scale(1.02); transition: filter 700ms var(--ease-out-expo), transform 900ms var(--ease-out-expo); }
.route-card--catalog::after, .route-card--services::after { position: absolute; inset: 0; z-index: 0; background: linear-gradient(115deg, rgb(8 31 47 / 0.86), rgb(42 120 164 / 0.5)); content: ""; opacity: 0; pointer-events: none; transition: opacity 700ms var(--ease-out-expo); }
.route-card--catalog::before { background-image: linear-gradient(110deg, rgb(5 7 11 / 0.9), rgb(5 7 11 / 0.48)), url("./assets/catalog-windshield.jpg"); }
.route-card--services::before { background-image: linear-gradient(110deg, rgb(5 7 11 / 0.9), rgb(5 7 11 / 0.48)), url("./assets/service-glass-bodywork.jpg"); background-position: center 56%; }
.route-card--catalog:hover::before, .route-card--catalog:focus-within::before, .route-card--services:hover::before, .route-card--services:focus-within::before { filter: grayscale(1) contrast(1.08) brightness(0.76); transform: scale(1.07); }
.route-card--catalog:hover::after, .route-card--catalog:focus-within::after, .route-card--services:hover::after, .route-card--services:focus-within::after { opacity: 1; }
.route-card--catalog > *, .route-card--services > * { position: relative; z-index: 1; }
.route-card--catalog p, .route-card--services p { color: var(--ink-soft); }
.price-band { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(280px, 1fr); gap: clamp(28px, 6vw, 86px); align-items: center; padding: clamp(28px, 5vw, 56px); border: 1px solid rgb(155 223 255 / 0.26); border-radius: var(--radius-l); background: linear-gradient(120deg, rgb(30 64 89 / 0.92), rgb(18 24 37 / 0.94)); }
.price-band strong { display: block; margin-top: 8px; color: var(--primary); font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 4.2rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.price-band p { max-width: 46ch; margin: 0; color: var(--ink-soft); line-height: 1.7; }
.price-band-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(18px, 2vw, 28px); }
.price-band-action .button { margin: 0; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr); gap: clamp(32px, 8vw, 130px); }
.about-copy { display: grid; align-content: start; gap: 24px; }
.about-copy > p { max-width: 52ch; color: var(--ink-soft); font-size: var(--text-body); line-height: 1.75; }
.about-aside { display: grid; align-content: start; gap: 22px; }
.about-aside-lead { margin: 0; color: var(--muted); font-size: var(--text-body); line-height: 1.72; }
.fact-list { display: grid; gap: 10px; }
.fact-list div { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-s); background: rgb(255 255 255 / 0.025); }
.fact-list span { display: block; margin-bottom: 4px; color: var(--muted); font-size: var(--text-label); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.fact-list strong { color: var(--ink); font-size: var(--text-ui); }
.fact-list p { margin: 8px 0 0; color: var(--ink-soft); font-size: var(--text-caption); line-height: 1.65; }
.studio-cases { border-top: 1px solid var(--line); }
.studio-cases-heading { align-items: start; }
.studio-cases-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  grid-template-areas:
    "featured featured black black"
    "featured featured kia audi";
  align-items: stretch;
}
.studio-case {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #0d111a;
}
.studio-case-featured { grid-area: featured; }
.studio-case--black { grid-area: black; }
.studio-case--kia { grid-area: kia; }
.studio-case--audi { grid-area: audi; }
.studio-case-media {
  position: relative;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: inherit;
  background: #0d111a;
}
.studio-case-media::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(5 8 13 / 0) 26%, rgb(5 8 13 / 0.14) 54%, rgb(5 8 13 / 0.86) 100%),
    linear-gradient(120deg, rgb(11 18 28 / 0.08), rgb(11 18 28 / 0) 42%);
  content: "";
  pointer-events: none;
}
.studio-case-featured .studio-case-media { aspect-ratio: 1.06 / 1; }
.studio-case--black .studio-case-media { aspect-ratio: 1.62 / 1; }
.studio-case--kia .studio-case-media, .studio-case--audi .studio-case-media { aspect-ratio: 0.98 / 1; }
.studio-case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out-expo), filter 900ms var(--ease-out-expo); }
.studio-case:hover img { transform: scale(1.03); filter: saturate(1.03) contrast(1.03); }
.studio-case--matte img { object-position: center 52%; }
.studio-case--black img { object-position: center 46%; }
.studio-case--kia img { object-position: 52% center; }
.studio-case--audi img { object-position: center 50%; }
.studio-case-copy {
  position: absolute;
  right: clamp(16px, 2vw, 24px);
  bottom: clamp(16px, 2vw, 24px);
  left: clamp(16px, 2vw, 24px);
  z-index: 1;
  display: grid;
  gap: 12px;
  align-content: end;
}
.studio-case-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgb(213 225 255 / 0.22);
  border-radius: 50%;
  background: rgb(9 13 21 / 0.58);
  color: var(--primary-strong);
  font-family: var(--font-display);
  font-size: 0.8rem;
  line-height: 1;
  backdrop-filter: blur(10px);
}
.studio-case-copy > div { max-width: 30ch; }
.studio-case-featured .studio-case-copy > div { max-width: 34ch; }
.studio-case-meta {
  display: block;
  margin-bottom: 8px;
  color: rgb(244 247 255 / 0.72);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.studio-case h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.2vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.24;
  text-shadow: 0 4px 18px rgb(0 0 0 / 0.32);
}
.studio-case p {
  margin: 0;
  color: rgb(244 247 255 / 0.76);
  font-size: 0.82rem;
  line-height: 1.55;
  text-shadow: 0 3px 16px rgb(0 0 0 / 0.28);
}
.studio-case:not(.studio-case-featured) p { max-width: 26ch; }
.studio-cases-note {
  margin: clamp(18px, 2vw, 24px) 0 0;
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: 1.6;
}
.detailing-work { border-top: 1px solid var(--line); }
.detailing-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.detailing-case { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); box-shadow: 0 18px 42px rgb(0 0 0 / 0.12); }
.detailing-case-media { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #0d111a; }
.detailing-case-media::after { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgb(255 255 255 / 0.66); box-shadow: 0 0 0 4px rgb(7 10 15 / 0.28); content: ""; pointer-events: none; }
.detailing-case img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out-expo); }
.detailing-case:hover img { transform: scale(1.025); }
.detailing-case figcaption { padding: clamp(18px, 2.25vw, 28px); }
.detailing-case figcaption span { display: block; margin-bottom: 10px; color: var(--primary); font-size: var(--text-label); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.detailing-case h3 { margin: 0 0 7px; color: var(--ink); font-family: var(--font-body); font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 800; letter-spacing: -0.025em; }
.detailing-case p { margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.65; }

.section { width: min(1500px, 100%); padding-top: clamp(74px, 9vw, 132px); padding-bottom: clamp(74px, 9vw, 132px); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.47fr); gap: clamp(var(--space-6), 5vw, 86px); align-items: end; margin-bottom: var(--space-7); }
.section-heading--top { align-items: start; }
.section-heading h1 { margin: 0; color: var(--ink); font-size: clamp(2.05rem, 4vw, 4.2rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.14; }
h2 { margin: 0; color: var(--ink); font-size: clamp(2.05rem, 4vw, 4.2rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.14; }
.section-heading > p { max-width: 37ch; margin: 0; color: var(--muted); font-size: var(--text-body); line-height: 1.72; }
.seo-copy { display: grid; gap: 16px; align-content: start; }
.seo-copy p { margin: 0; color: var(--ink-soft); font-size: var(--text-body); line-height: 1.8; }
.services { border-top: 1px solid var(--line); }
.section.services { padding-bottom: clamp(38px, 4vw, 62px); }
.section.service-price-section { padding-top: clamp(24px, 3vw, 46px); }
.service-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.service-feature { position: relative; display: flex; flex-direction: column; min-height: 270px; padding: clamp(26px, 3.2vw, 44px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); transition: transform var(--duration-state) var(--ease-out-quart), border-color var(--duration-state) var(--ease-out-quart), background var(--duration-state) var(--ease-out-quart); }
.service-feature::before { position: absolute; inset: 0; background: radial-gradient(circle at 82% 15%, rgb(144 213 255 / 0.12), transparent 34%); content: ""; opacity: 0; transition: opacity var(--duration-state) var(--ease-out-quart); pointer-events: none; }
.service-feature:hover { border-color: rgb(156 223 255 / 0.38); background: #182131; transform: translateY(-4px); }
.service-feature:hover::before { opacity: 1; }
.service-feature img { transition: transform 900ms var(--ease-out-expo); }
.service-feature:hover img, .service-feature:focus-within img { transform: scale(1.025); }
.service-feature-main { grid-column: span 7; min-height: 500px; background: linear-gradient(135deg, #1c2a3e, #131925 65%); }
.service-feature-media { display: block; width: 100%; min-height: 0; padding: 0; aspect-ratio: 4 / 3; background: #090d14; }
.service-feature-media::before { display: none; }
.service-feature-media:hover { background: #090d14; transform: translateY(-4px); }
.service-feature-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.service-image-copy { position: absolute; z-index: 1; top: clamp(38px, 17%, 130px); left: clamp(18px, 6.7%, 98px); max-width: min(47%, 34rem); }
.service-image-copy .service-index { display: block; margin: 0 0 clamp(9px, 1.5vw, 18px); }
.service-image-copy h3 { margin: 0 0 clamp(10px, 1.5vw, 18px); max-width: 15ch; font-size: clamp(1.55rem, 3.1vw, 3.6rem); text-shadow: 0 2px 18px rgb(0 0 0 / 0.32); }
.service-image-copy p { margin: 0; font-size: clamp(0.8rem, 1.15vw, 1.05rem); text-shadow: 0 2px 12px rgb(0 0 0 / 0.42); }
.service-image-action { position: absolute; z-index: 1; top: 63%; left: clamp(18px, 6.7%, 98px); }
.service-price { position: absolute; z-index: 2; right: clamp(18px, 5%, 58px); bottom: clamp(26px, 6%, 52px); display: inline-flex; align-items: baseline; gap: 9px; padding: 9px 14px 10px; border: 1px solid rgb(213 225 255 / 0.24); border-radius: 12px; background: rgb(8 13 23 / 0.84); box-shadow: 0 5px 8px rgb(0 0 0 / 0.12); color: var(--ink); font-variant-numeric: tabular-nums; backdrop-filter: blur(8px); }
.service-price small { color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.035em; }
.service-price strong { color: var(--primary-strong); font-size: 1.15rem; letter-spacing: -0.035em; line-height: 1; }
.service-image-action .button, .service-tint-action .button, .service-repair-action .button, .service-card-action { min-height: 48px; }
.service-image-action .button:focus-visible, .service-tint-action .button:focus-visible, .service-repair-action .button:focus-visible, .service-card-action:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.service-feature-tint { background: #181d2a; }
.service-feature-repair { background: #161c27; }
.service-feature-repair-media { display: block; padding: 0; background: #090d14; }
.service-feature-repair-media::before { display: none; }
.service-feature-repair-media:hover { background: #090d14; }
.service-feature-repair-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.service-repair-action { position: absolute; z-index: 2; bottom: clamp(42px, 12%, 68px); left: clamp(18px, 6.7%, 98px); }
.service-card-action { position: relative; z-index: 1; align-self: flex-start; min-height: 48px; margin-top: auto; padding-right: 20px; padding-left: 20px; }
.service-feature-tint-media { display: block; padding: 0; background: #080d15; }
.service-feature-tint-media::before { display: none; }
.service-feature-tint-media:hover { background: #080d15; }
.service-feature-tint-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.service-stack .service-image-copy { top: 17%; max-width: 51%; }
.service-stack .service-image-copy .service-index { margin-bottom: 7px; font-size: 0.62rem; }
.service-stack .service-image-copy h3 { margin-bottom: 7px; font-size: clamp(1.15rem, 1.75vw, 1.7rem); line-height: 1.08; }
.service-stack .service-image-copy p { font-size: clamp(0.7rem, 0.78vw, 0.8rem); line-height: 1.42; }
.service-tint-action { position: absolute; z-index: 2; bottom: clamp(42px, 12%, 68px); left: clamp(18px, 6.7%, 98px); }
.service-stack { display: grid; grid-column: span 5; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; }
.service-detail-grid { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service-detail-card { min-height: 300px; padding-bottom: 92px; background: #121928; }
.service-detail-card-polish, .service-detail-card-media { background: linear-gradient(90deg, rgb(8 13 23 / 0.9), rgb(8 13 23 / 0.24)), #121928; }
.service-detail-card-polish img, .service-detail-card-media img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.service-detail-card-polish::after, .service-detail-card-media::after { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgb(8 13 23 / 0.86) 0%, rgb(8 13 23 / 0.3) 76%), linear-gradient(0deg, rgb(8 13 23 / 0.36), transparent 48%); content: ""; pointer-events: none; }
.service-index { position: relative; z-index: 1; margin-bottom: auto; color: var(--primary); font-size: var(--text-label); font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.service-feature h3 { position: relative; z-index: 1; max-width: 17ch; margin: 0 0 14px; color: var(--ink); font-size: clamp(1.55rem, 2.4vw, 2.7rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.18; }
.service-feature p { position: relative; z-index: 1; max-width: 47ch; margin: 0 0 20px; color: var(--ink-soft); font-size: var(--text-ui); line-height: 1.65; }
.service-link { position: relative; z-index: 1; width: fit-content; margin-top: auto; color: var(--ink); }

@media (min-width: 901px) {
  .service-feature-media { align-self: stretch; aspect-ratio: 4 / 3; }
  .service-feature-media img { object-fit: cover; object-position: 30% center; }
}

.service-feature-main img { object-fit: contain; object-position: center; }

@media (min-width: 1366px) {
  .service-feature-main, .service-stack { align-self: start; }
  .service-stack { aspect-ratio: 0.944; }
  .service-stack .service-feature { min-height: 0; }
}

.catalog { position: relative; }
.catalog.section { padding-top: 0; }
.catalog::before { position: absolute; top: 10%; left: -10%; width: 38vw; height: 38vw; border-radius: 50%; background: radial-gradient(circle, rgb(151 184 255 / 0.08), transparent 66%); content: ""; pointer-events: none; }
.catalog > * { position: relative; }
.catalog-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.44fr); gap: clamp(var(--space-6), 5vw, 86px); align-items: end; margin-bottom: var(--space-7); }
.catalog-intro-side { display: grid; gap: 14px; color: var(--muted); font-size: var(--text-ui); line-height: 1.7; }
.catalog-intro-side p { margin: 0; }
.catalog-sync { display: flex; align-items: center; gap: 8px; color: var(--primary); font-size: var(--text-caption); font-weight: 750; }
.catalog-sync::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px rgb(155 223 255 / 0.12); content: ""; }
.catalog-brand-gate, .vin-picker, .vehicle-picker { display: grid; grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr); column-gap: clamp(var(--space-6), 5vw, 72px); row-gap: var(--space-5); margin-bottom: 16px; padding: clamp(24px, 4vw, 42px); border: 1px solid rgb(160 224 255 / 0.24); border-radius: var(--radius-l); background: linear-gradient(115deg, rgb(31 51 70 / 0.92), rgb(20 27 40 / 0.96)); box-shadow: 0 18px 46px rgb(0 0 0 / 0.16); }
.catalog-brand-gate { border-color: rgb(230 198 123 / 0.3); background: linear-gradient(126deg, rgb(52 41 19 / 0.96), rgb(22 28 40 / 0.97)); }
.vin-picker { border-color: rgb(155 223 255 / 0.4); background: linear-gradient(125deg, rgb(27 56 78 / 0.97), rgb(15 23 35 / 0.97)); }
.catalog-brand-gate h3, .vin-picker h3, .vehicle-picker h3 { margin: 0 0 14px; color: var(--ink); font-size: clamp(1.55rem, 2.5vw, 2.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.16; }
.catalog-brand-gate > div > p:last-child, .vin-picker > div > p:last-child, .vehicle-picker > div > p:last-child { max-width: 34ch; margin: 0; color: var(--ink-soft); font-size: var(--text-ui); line-height: 1.65; }
.catalog-brand-form, .vin-picker-form { display: grid; align-self: center; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.vin-picker-form { display: grid; align-self: center; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.vehicle-picker-form { display: grid; align-self: center; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; align-items: end; }
.catalog-brand-form .button, .vin-picker-form .button, .vehicle-picker-form .button { min-height: 46px; white-space: nowrap; }
.vehicle-picker-note { grid-column: 1 / -1; min-height: 1.5em; margin: 0; color: var(--ink-soft); font-size: var(--text-caption); line-height: 1.5; }
.vin-vehicle { grid-column: 1 / -1; display: grid; gap: 3px; padding: 12px 14px; border: 1px solid rgb(155 223 255 / 0.22); border-radius: var(--radius-s); background: rgb(5 13 21 / 0.38); }
.vin-vehicle p { margin: 0; color: var(--primary); font-size: var(--text-label); font-weight: 800; letter-spacing: 0.075em; text-transform: uppercase; }
.vin-vehicle strong { color: var(--ink); font-size: var(--text-ui); }
.vin-vehicle > span { color: var(--ink-soft); font-size: var(--text-caption); line-height: 1.5; }
.vin-vehicle-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 16px; margin: 8px 0 0; }
.vin-vehicle-details div { display: grid; gap: 2px; }
.vin-vehicle-details dt { color: var(--ink-soft); font-size: var(--text-label); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.vin-vehicle-details dd { margin: 0; color: var(--ink); font-size: var(--text-caption); }
.catalog-controls { display: grid; grid-template-columns: minmax(240px, 2fr) minmax(160px, 0.75fr) minmax(160px, 0.75fr) auto; gap: 10px; align-items: end; margin-bottom: clamp(22px, 3vw, 36px); padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-m); background: rgb(20 25 37 / 0.72); backdrop-filter: blur(14px); }
.search-control, .select-control { display: grid; gap: 7px; }
.search-control span, .select-control span { color: var(--muted); font-size: var(--text-label); font-weight: 800; letter-spacing: 0.075em; text-transform: uppercase; }
.search-control input, .select-control select { min-height: 46px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--radius-s); outline: none; background: rgb(255 255 255 / 0.055); color: var(--ink); font-size: var(--text-ui); font-weight: 650; transition: border-color var(--duration-feedback) var(--ease-out-quart), background var(--duration-feedback) var(--ease-out-quart), box-shadow var(--duration-feedback) var(--ease-out-quart); }
.select-control select option { background: var(--surface); color: var(--ink); }
.search-control input::placeholder { color: var(--muted); opacity: 1; }
.search-control input:focus, .select-control select:focus { border-color: rgb(155 223 255 / 0.58); background: rgb(255 255 255 / 0.075); box-shadow: 0 0 0 4px rgb(155 223 255 / 0.08); }
.reset-button { min-height: 46px; padding: 0 17px; border: 1px solid var(--line); border-radius: var(--radius-s); background: transparent; color: var(--ink-soft); cursor: pointer; font-size: var(--text-caption); font-weight: 800; transition: border-color var(--duration-feedback) var(--ease-out-quart), background var(--duration-feedback) var(--ease-out-quart), color var(--duration-feedback) var(--ease-out-quart); }
.reset-button:hover { border-color: var(--line-strong); background: rgb(255 255 255 / 0.07); color: var(--ink); }
.catalog-head { display: flex; justify-content: space-between; gap: var(--space-5); align-items: end; padding: clamp(28px, 4vw, 52px) 0 var(--space-6); }
.catalog-head h1 { max-width: none; margin: 0; color: var(--ink); font-size: clamp(2.15rem, 4.2vw, 4.3rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.14; }
.catalog-head > p { max-width: 38ch; margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.55; text-align: right; }
.catalog-seo { padding-top: clamp(74px, 9vw, 132px); border-top: 1px solid var(--line); }
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.product-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-m); background: rgb(19 24 35 / 0.83); box-shadow: 0 8px 20px rgb(0 0 0 / 0.06); color: inherit; text-decoration: none; transition: transform var(--duration-state) var(--ease-out-quart), border-color var(--duration-state) var(--ease-out-quart), background var(--duration-state) var(--ease-out-quart), box-shadow var(--duration-state) var(--ease-out-quart); }
.product-card:hover { border-color: rgb(155 223 255 / 0.48); background: #1a2130; box-shadow: 0 18px 36px rgb(0 0 0 / 0.19); transform: translateY(-5px); }
.product-media { aspect-ratio: 1.16 / 1; overflow: hidden; background: linear-gradient(135deg, #23334a, #16202f); }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out-expo), filter 600ms var(--ease-out-expo); }
.product-card:hover .product-media img { transform: scale(1.055); filter: saturate(1.08); }
.product-content { display: flex; flex: 1; flex-direction: column; padding: 18px; }
.product-section { margin: 0 0 8px; color: var(--primary); font-size: var(--text-label); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.product-title { margin: 0 0 20px; color: var(--ink); font-family: var(--font-body); font-size: var(--text-ui); font-weight: 750; letter-spacing: -0.018em; line-height: 1.52; }
.product-price-row { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; }
.product-price { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 1.45rem; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; }
.product-meta { color: var(--muted); font-size: var(--text-caption); font-weight: 650; text-align: right; }
.details-button { width: fit-content; min-height: 38px; margin-top: 10px; padding: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: var(--text-caption); font-weight: 800; text-align: left; transition: color var(--duration-feedback) var(--ease-out-quart), border-color var(--duration-feedback) var(--ease-out-quart); }
.details-button::after { margin-left: 8px; color: var(--primary); content: "→"; }
.details-button:hover { border-color: var(--primary); color: var(--primary); }
.empty { position: relative; isolation: isolate; padding: clamp(34px, 6vw, 66px) 24px; overflow: hidden; border: 1px solid rgb(155 223 255 / 0.3); border-radius: var(--radius-m); background: linear-gradient(116deg, rgb(27 49 69 / 0.94), rgb(18 25 38 / 0.98)); text-align: center; }
.empty::before { position: absolute; z-index: -1; top: -116px; left: 50%; width: 330px; height: 220px; border-radius: 50%; background: radial-gradient(ellipse, rgb(155 223 255 / 0.2), transparent 68%); content: ""; transform: translateX(-50%); pointer-events: none; }
.empty h3 { max-width: 23ch; margin: 0 auto 12px; color: var(--ink); font-size: clamp(1.7rem, 3.2vw, 2.65rem); letter-spacing: -0.04em; line-height: 1.25; text-wrap: balance; }
.empty p { max-width: 60ch; margin: 0 auto 24px; color: var(--ink-soft); font-size: var(--text-ui); line-height: 1.7; text-wrap: pretty; }
.empty-kicker { margin-bottom: 12px !important; color: var(--primary) !important; font-size: var(--text-label) !important; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.more { padding-top: 30px; text-align: center; }
.more button { min-height: 48px; padding: 0 21px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); cursor: pointer; font-weight: 800; transition: transform var(--duration-feedback) var(--ease-out-quart), border-color var(--duration-feedback) var(--ease-out-quart); }
.more button:hover { border-color: var(--primary); transform: translateY(-2px); }

.process { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr); gap: clamp(42px, 9vw, 145px); border: 1px solid var(--line); border-right: 0; border-left: 0; }
.process-statement > p:not(.eyebrow) { max-width: 35ch; margin: 24px 0 0; color: var(--muted); font-size: var(--text-body); line-height: 1.7; }
.process-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.process-list li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 17px 18px; border: 1px solid var(--line); border-radius: var(--radius-s); background: rgb(255 255 255 / 0.025); transition: transform var(--duration-feedback) var(--ease-out-quart), border-color var(--duration-feedback) var(--ease-out-quart); }
.process-list li:hover { border-color: rgb(155 223 255 / 0.35); transform: translateX(4px); }
.process-list span { color: var(--primary); font-family: var(--font-display); font-size: 1rem; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.05em; }
.process-list h3 { margin: 0 0 5px; color: var(--ink); font-family: var(--font-body); font-size: var(--text-ui); font-weight: 800; letter-spacing: -0.02em; }
.process-list p { margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.6; }

.request { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(330px, 0.7fr); gap: clamp(42px, 9vw, 145px); margin-bottom: clamp(32px, 5vw, 70px); border: 1px solid rgb(163 221 255 / 0.18); border-radius: var(--radius-l); background: linear-gradient(125deg, #1c2e44, #101724 56%, #141525); box-shadow: 0 24px 60px rgb(0 0 0 / 0.18); }
.request--plain { border: 0; border-radius: 0; background: none; box-shadow: none; }
.request .eyebrow { color: var(--primary); }
.request h1, .request h2 { color: var(--ink); }
.request h1 { max-width: 14ch; margin: 0; font-size: clamp(2.1rem, 4.2vw, 4.1rem); line-height: 1.1; }
.request-copy > p:not(.eyebrow) { max-width: 47ch; margin: 24px 0; color: var(--ink-soft); font-size: var(--text-body); letter-spacing: -0.01em; line-height: 1.7; }
.contact-phone { display: inline-block; margin-bottom: 22px; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.8rem, 3.7vw, 3.25rem); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.04em; line-height: 1.25; }
.contact-links { display: flex; flex-wrap: wrap; gap: 8px; color: var(--ink-soft); font-size: var(--text-caption); font-weight: 800; }
.contact-links a { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.request-form, .order-dialog form { display: grid; gap: 17px; align-content: start; padding: clamp(22px, 3.2vw, 38px); border: 1px solid rgb(255 255 255 / 0.11); border-radius: var(--radius-m); background: rgb(9 12 19 / 0.5); backdrop-filter: blur(16px); }
.request--plain .request-form { padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; }
.request-form label, .order-dialog label { display: grid; gap: 7px; }
.request-form label span, .order-dialog label span { color: var(--ink-soft); font-size: var(--text-label); font-weight: 800; letter-spacing: 0.075em; text-transform: uppercase; }
.request-form input, .request-form select, .request-form textarea, .order-dialog input, .order-dialog textarea { min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); outline: 0; background: rgb(255 255 255 / 0.055); color: var(--ink); resize: vertical; transition: border-color var(--duration-feedback) var(--ease-out-quart), background var(--duration-feedback) var(--ease-out-quart), box-shadow var(--duration-feedback) var(--ease-out-quart); }
.request-form select option { background: var(--surface); color: var(--ink); }
.request-form input::placeholder, .request-form textarea::placeholder, .order-dialog input::placeholder, .order-dialog textarea::placeholder { color: var(--muted); opacity: 1; }
.request-form input:focus, .request-form select:focus, .request-form textarea:focus, .order-dialog input:focus, .order-dialog textarea:focus { border-color: rgb(155 223 255 / 0.58); background: rgb(255 255 255 / 0.08); box-shadow: 0 0 0 4px rgb(155 223 255 / 0.08); }
.fulfillment, .vehicle-preference { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.fulfillment legend, .vehicle-preference legend { margin-bottom: 4px; color: var(--ink-soft); font-size: var(--text-label); font-weight: 800; letter-spacing: 0.075em; text-transform: uppercase; }
.choice { display: flex !important; align-items: center; min-height: 38px; gap: 9px; color: var(--ink-soft); font-size: var(--text-caption); font-weight: 650; }
.choice input { width: 16px; height: 16px; accent-color: var(--primary); }
.delivery-address { margin-top: -4px; }
.unavailable-request-form { max-width: 760px; margin: 30px auto 0; text-align: left; }
.vehicle-request-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-note a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.form-note { margin: 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.55; }
.form-note.is-success { color: var(--success); }
.form-note.is-error { color: var(--danger); }
.site-footer { display: flex; justify-content: space-between; gap: 24px; align-items: center; width: min(1500px, 100%); min-height: 105px; color: var(--muted); font-size: var(--text-caption); }
.site-footer p { margin: 0; }

.order-dialog { width: min(590px, calc(100% - 28px)); max-height: min(900px, calc(100dvh - 28px)); padding: 0; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-l); background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px rgb(0 0 0 / 0.46); }
.order-dialog::backdrop { background: rgb(3 5 10 / 0.72); backdrop-filter: blur(10px); }
.order-dialog .dialog-close { position: sticky; z-index: 1; top: 14px; display: block; min-height: 38px; margin: 14px 14px -38px auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: rgb(12 16 25 / 0.72); color: var(--ink); cursor: pointer; font-size: var(--text-caption); font-weight: 800; backdrop-filter: blur(14px); }
.attribute-list { display: grid; gap: 0; margin: 0 0 26px; border-top: 1px solid var(--line); }
.attribute-row { display: flex; justify-content: space-between; gap: 22px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: var(--text-caption); line-height: 1.5; }
.attribute-row span { color: var(--muted); }
.attribute-row strong { text-align: right; }
.dialog-order-button { width: 100%; }
.product-page { padding-top: clamp(48px, 7vw, 92px); }
.product-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: clamp(28px, 5vw, 64px); color: var(--ink-soft); font-size: var(--text-caption); font-weight: 800; transition: color var(--duration-feedback) var(--ease-out-quart); }
.product-back:hover { color: var(--primary); }
.product-page-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 6vw, 96px); align-items: end; margin-bottom: clamp(28px, 5vw, 56px); }
.product-page-heading .eyebrow { margin-bottom: 14px; }
.product-page-heading h1 { max-width: 24ch; margin: 0; font-size: clamp(2.1rem, 4.5vw, 4.8rem); letter-spacing: -0.04em; line-height: 1.13; }
.product-page-price { margin: 0; color: var(--primary); font-family: var(--font-display); font-size: clamp(1.7rem, 3.3vw, 3.2rem); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.product-gallery { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-soft); }
.product-gallery-stage { position: relative; min-width: 0; height: clamp(340px, 54vw, 620px); margin: 0; overflow: hidden; background: #0b1019; }
.product-gallery-stage img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery-status { position: absolute; right: 16px; bottom: 16px; padding: 6px 10px; border: 1px solid rgb(213 225 255 / 0.18); border-radius: var(--radius-pill); background: rgb(8 13 22 / 0.68); color: var(--ink); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; backdrop-filter: blur(10px); }
.product-gallery-controls { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 7px; }
.product-gallery.has-controls .product-gallery-status { right: 116px; }
.product-gallery-controls button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgb(213 225 255 / 0.18); border-radius: 50%; background: rgb(8 13 22 / 0.74); color: var(--ink); cursor: pointer; font-size: 1rem; line-height: 1; backdrop-filter: blur(10px); transition: background var(--duration-feedback) var(--ease-out-quart), color var(--duration-feedback) var(--ease-out-quart); }
.product-gallery-controls button:hover { background: var(--primary); color: var(--bg-deep); }
.product-gallery-controls button[hidden] { display: none; }
.product-gallery.is-empty { display: grid; min-height: 420px; place-items: center; }
.product-page-content { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); gap: clamp(32px, 8vw, 128px); padding-top: clamp(36px, 6vw, 84px); }
.product-page-description h2 { margin-bottom: 20px; font-size: clamp(1.65rem, 2.8vw, 2.6rem); }
.product-page-description > p { max-width: 68ch; margin: 0; color: var(--ink-soft); font-size: var(--text-body); line-height: 1.78; white-space: pre-line; }
.product-page-specifications { align-self: start; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-m); background: rgb(20 25 37 / 0.7); }
.product-page-label { margin: 0 0 14px; color: var(--primary); font-size: var(--text-label); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.product-empty-attributes { margin: 0 0 26px; color: var(--muted); font-size: var(--text-caption); }
.delivery-payment { display: grid; grid-template-columns: minmax(210px, 0.56fr) minmax(0, 1.44fr); gap: clamp(26px, 6vw, 88px); margin-top: clamp(48px, 8vw, 112px); padding: clamp(24px, 4vw, 48px); border: 1px solid rgb(155 223 255 / 0.3); border-radius: var(--radius-l); background: linear-gradient(120deg, rgb(28 47 66 / 0.92), rgb(18 25 38 / 0.96)); box-shadow: 0 18px 44px rgb(0 0 0 / 0.16); }
.delivery-payment-heading h2 { margin: 0; font-size: clamp(1.8rem, 3.1vw, 3rem); letter-spacing: -0.04em; line-height: 1.05; }
.delivery-payment-heading .eyebrow { margin-bottom: 12px; }
.delivery-payment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.delivery-payment-card { min-height: 100%; padding: 20px; border: 1px solid rgb(213 225 255 / 0.13); border-radius: var(--radius-s); background: rgb(8 14 24 / 0.3); }
.delivery-payment-label { margin: 0 0 14px; color: var(--primary); font-size: var(--text-label); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.delivery-payment-card ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.delivery-payment-card li, .delivery-payment-card > p:not(.delivery-payment-label) { margin: 0; color: var(--ink-soft); font-size: var(--text-caption); line-height: 1.58; }
.delivery-payment-card li::before { margin-right: 8px; color: var(--primary); content: "•"; }
.product-page-status { display: grid; gap: 20px; max-width: 620px; padding: 10vh 0; }
.product-page-status h1 { margin: 0; }
.product-page-status p { margin: 0; color: var(--ink-soft); }
.order-dialog-content { padding: 54px clamp(24px, 5vw, 48px) clamp(24px, 5vw, 48px); background: var(--surface); }
.order-dialog-content h2 { margin-bottom: 12px; font-size: clamp(1.7rem, 3vw, 2.65rem); }
.order-dialog-content > p:not(.eyebrow) { color: var(--muted); font-size: var(--text-ui); line-height: 1.55; }
.order-dialog form { padding: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; }
.image-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); font-size: var(--text-ui); font-weight: 700; }
.vehicle-picker-note.is-error { color: var(--danger); }
.hidden { display: none !important; }

@keyframes hero-copy-enter {
  from { opacity: 0.84; transform: translateY(12px); filter: blur(1px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes hero-media-enter {
  from { opacity: 0.78; transform: translateY(12px) scale(0.985); filter: saturate(0.8) blur(2px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1) blur(0); }
}
@keyframes picker-enter {
  from { opacity: 0.8; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes product-card-enter {
  from { opacity: 0.8; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dialog-enter {
  from { opacity: 0.82; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes status-nudge {
  35% { transform: translateX(-3px); }
  70% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
@keyframes status-confirm {
  from { opacity: 0.45; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ambient-shift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2%, 2%, 0) scale(1.04); }
}
@keyframes typing-caret {
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: ambient-shift 12s ease-in-out infinite; }
  .motion-ready .hero-rotating-text::after { display: inline-block; width: 0.07em; height: 0.85em; margin-left: 0.12em; background: currentColor; content: ""; vertical-align: -0.06em; animation: typing-caret 900ms steps(1, end) infinite; }
  .motion-ready .hero-copy > * { animation: hero-copy-enter var(--duration-entrance) var(--ease-out-expo) both; }
  .motion-ready .hero-copy > :nth-child(1) { animation-delay: 40ms; }
  .motion-ready .hero-copy > :nth-child(2) { animation-delay: 110ms; }
  .motion-ready .hero-copy > :nth-child(3) { animation-delay: 180ms; }
  .motion-ready .hero-copy > :nth-child(4) { animation-delay: 250ms; }
  .motion-ready .hero-copy > :nth-child(5) { animation-delay: 310ms; }
  .motion-ready .hero-media { animation: hero-media-enter 800ms var(--ease-out-expo) 90ms both; }
  .motion-ready .page-hero-copy { animation: hero-copy-enter var(--duration-entrance) var(--ease-out-expo) both; }
  .motion-ready .page-hero-aside { animation: hero-media-enter 680ms var(--ease-out-expo) 120ms both; }
  [data-motion-reveal][data-motion-state="entered"] { animation: picker-enter 520ms var(--ease-out-quart) both; }
  .products.is-motion-active .product-card.is-fresh { animation: product-card-enter 480ms var(--ease-out-quart) calc(var(--card-index) * 52ms) both; }
  .order-dialog[open] { animation: dialog-enter 300ms var(--ease-out-quart) both; }
  .vehicle-picker-note.is-error { animation: status-nudge 240ms var(--ease-out-quart); }
  .form-note.is-success { animation: status-confirm var(--duration-state) var(--ease-out-quart); }
}

@media (max-width: 1120px) {
  .site-header { justify-content: flex-start; }
  .main-nav { display: none; }
  .header-information { margin-left: auto; }
  .header-information-item:not(:first-child) { display: none; }
  .site-header > .header-socials { display: none; }
  .menu-button { display: inline-block; margin-left: 16px; }
  .service-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero { min-height: calc(100svh - 86px); }
  .section-heading, .catalog-intro, .process, .request { grid-template-columns: 1fr; }
  .page-hero, .price-band, .about-grid, .detailing-gallery, .catalog-brand-gate, .vin-picker, .vehicle-picker { grid-template-columns: 1fr; }
  .hero-vin-cta { width: min(100%, 560px); }
  .page-hero-aside { height: clamp(360px, 88vw, 520px); margin-top: 0; }
  .studio-cases-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "featured featured"
      "black kia"
      "audi audi";
  }
  .studio-case-featured .studio-case-media { aspect-ratio: 1.18 / 1; }
  .studio-case--black .studio-case-media, .studio-case--kia .studio-case-media, .studio-case--audi .studio-case-media { aspect-ratio: 1.04 / 1; }
  .service-layout { grid-template-columns: 1fr; }
  .service-feature-main, .service-stack { grid-column: auto; }
  .service-feature-main { min-height: 410px; }
  .service-stack { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .service-detail-grid { grid-column: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vehicle-picker { grid-template-columns: 1fr; }
  .vehicle-picker-form { grid-template-columns: 1fr 1fr; }
  .vehicle-picker-form .button { grid-column: 1 / -1; }
  .catalog-controls { grid-template-columns: 1fr 1fr; }
  .search-control { grid-column: 1 / -1; }
  .reset-button { grid-column: 1 / -1; }
  .catalog-head { align-items: start; flex-direction: column; }
  .catalog-head > p { text-align: left; }
  .product-page-heading, .product-page-content, .delivery-payment { grid-template-columns: 1fr; }
  .product-page-price { justify-self: start; }
}

@media (max-width: 620px) {
  :root { --page: 14px; }
  .site-header { min-height: 64px; padding: 0 var(--page); }
  .brand span { font-size: 0.94rem; }
  .brand small { font-size: 0.54rem; }
  .brand { min-height: 34px; padding-right: 0; border-right: 0; }
  .header-information { display: none; }
  .menu-button { margin-left: auto; }
  .mobile-menu { top: 64px; }
  .hero { min-height: calc(100svh - 74px); padding-top: 88px; padding-bottom: 64px; }
  h1 { font-size: clamp(2.3rem, 11vw, 3.1rem); line-height: 1.12; }
  h2 { font-size: clamp(1.85rem, 8vw, 2.35rem); }
  .hero-product-visual img { object-position: 57% center; }
  .section-heading, .catalog-intro { gap: var(--space-5); }
  .section { padding-top: 72px; padding-bottom: 72px; }
  .hero-vin-cta { padding: 13px 14px; }
  .hero-vin-form { grid-template-columns: 1fr; }
  .studio-cases-grid { grid-template-columns: 1fr; grid-template-areas: "featured" "black" "kia" "audi"; }
  .studio-case, .studio-case-media, .detailing-case { border-radius: 18px; }
  .studio-case-featured .studio-case-media, .studio-case--black .studio-case-media, .studio-case--kia .studio-case-media, .studio-case--audi .studio-case-media { aspect-ratio: 1.02 / 1; }
  .studio-case-copy { right: 14px; bottom: 14px; left: 14px; gap: 10px; }
  .studio-case-index { width: 32px; height: 32px; font-size: 0.72rem; }
  .studio-case h3 { font-size: 1rem; }
  .studio-case p { font-size: 0.75rem; }
  .detailing-case { border-radius: 18px; }
  .price-band-action { grid-template-columns: 1fr; justify-items: start; }
  .service-stack, .service-detail-grid, .catalog-controls, .catalog-brand-form, .vin-picker-form, .vehicle-picker-form { grid-template-columns: 1fr; }
  .vehicle-request-grid { grid-template-columns: 1fr; }
  .route-grid { grid-template-columns: 1fr; }
  .vehicle-picker-form .button { grid-column: auto; }
  .service-feature { min-height: 255px; border-radius: 18px; }
  .service-feature-main { min-height: 340px; }
  .service-image-copy p { display: none; }
  .service-feature-main .service-image-action { top: auto; bottom: 14px; }
  .service-price { right: 12px; bottom: 14px; gap: 6px; padding: 8px 10px 9px; }
  .service-price small { font-size: 0.58rem; }
  .service-price strong { font-size: 0.95rem; }
  .service-image-action .button, .service-tint-action .button, .service-repair-action .button, .service-card-action { min-height: 42px; padding: 10px 13px; font-size: 0.68rem; }
  .vehicle-picker, .request { border-radius: 22px; }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .product-card { border-radius: 14px; }
  .product-content { padding: 12px; }
  .product-section { font-size: 0.56rem; }
  .product-title { margin-bottom: 14px; font-size: 0.75rem; line-height: 1.45; }
  .product-price { font-size: 1.12rem; }
  .product-meta { display: none; }
  .details-button { min-height: 32px; margin-top: 6px; font-size: 0.64rem; }
  .request { gap: 36px; margin-bottom: 24px; }
  .site-footer { align-items: flex-start; flex-direction: column; padding-top: 24px; padding-bottom: 30px; }
  .order-dialog { width: calc(100% - 20px); border-radius: 20px; }
  .product-page { padding-top: 36px; }
  .product-page-heading h1 { font-size: clamp(1.85rem, 8vw, 2.55rem); }
  .product-gallery-stage { height: 290px; }
  .product-page-content { gap: 32px; padding-top: 32px; }
  .product-page-specifications { padding: 20px; }
  .delivery-payment { gap: 28px; padding: 24px; }
  .delivery-payment-grid { grid-template-columns: 1fr; }
}

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