:root {
  --ink: #202827;
  --muted: #727b78;
  --accent: #b62c4d;
  --line: #e3e6e2;
  --paper: #f6f7f3;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; font-family: 'Pretendard', 'Noto Sans KR', Arial, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button { color: inherit; }
:focus-visible { outline: 3px solid #c85a73; outline-offset: 5px; }
[hidden] { display: none !important; }
.wrap { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.skip { position: fixed; left: 20px; top: -100px; z-index: 100; padding: 15px; background: white; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.header { height: 90px; position: absolute; z-index: 5; top: 0; left: 0; width: 100%; display: flex; align-items: center; padding-inline: 56px; color: white; border-bottom: 1px solid #ffffff29; gap: 50px; }
.brand { font-size: 41px; font-weight: 800; letter-spacing: -3px; line-height: 1; }
.brand span { color: #de4164; }
.header nav { display: flex; align-items: center; gap: 40px; margin-left: auto; font-size: 14px; font-weight: 600; }
.header nav a { padding-block: 20px; }
.header-cta { border: 1px solid #ffffff8a; border-radius: 30px; padding: 12px 20px; font-size: 13px; display: flex; gap: 22px; }
.menu-toggle { display: none; }
.hero { position: relative; min-height: 0; height: 100vh; height: 100dvh; color: white; background: #273336; isolation: isolate; }
.hero-video, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-shade { background: linear-gradient(90deg, #10191cc9 0%, #10191c6b 52%, #10191c26), linear-gradient(0deg, #10191c8c, transparent 40%, #10191c26); z-index: -1; }
.hero-copy { padding-top: clamp(190px, 24vh, 260px); }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.3px; color: var(--accent); margin: 0 0 22px; line-height: 1.5; }
.eyebrow.light { color: #fff; opacity: .84; }
.hero .eyebrow { display: flex; gap: 12px; align-items: center; }
.hero .eyebrow span { height: 6px; width: 6px; background: #dd4366; border-radius: 50%; }
h1 { font-size: clamp(42px, 4.65vw, 72px); font-weight: 650; letter-spacing: -3px; line-height: 1.24; margin: 0; }
em { font-style: normal; font-weight: 350; }
.hero-description { font-size: 17px; color: #e0e5e4; line-height: 1.9; margin: 28px 0 36px; letter-spacing: -.3px; }
.hero-actions { display: flex; align-items: center; gap: 30px; }
.button { display: flex; justify-content: space-between; align-items: center; gap: 35px; min-height: 55px; padding: 17px 23px; border: 0; border-radius: 4px; font-size: 14px; font-weight: 650; transition: transform .2s; }
.button:hover { transform: translateY(-2px); }
.white { background: #fff; color: var(--ink); }
.button span, .text-link span { font-size: 22px; font-weight: 400; }
.text-link { display: flex; align-items: center; gap: 22px; font-size: 13px; }
.hero-bottom { position: absolute; bottom: 36px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: 1.5px; }
.hero-bottom > a { display: flex; align-items: center; gap: 28px; }
.hero-bottom > a span { font-size: 20px; }
.video-control { display: flex; align-items: center; gap: 25px; letter-spacing: .3px; }
.video-control button { border: 1px solid #ffffff70; color: white; background: #15202633; border-radius: 30px; min-width: 80px; height: 36px; font-size: 11px; }
.discovery { padding-block: 100px 85px; }
.section-heading { display: flex; justify-content: space-between; gap: 30px; align-items: flex-end; margin-bottom: 40px; }
h2 { font-size: clamp(28px, 2.7vw, 40px); line-height: 1.4; font-weight: 650; letter-spacing: -1.5px; margin: 0; }
.section-heading .eyebrow { margin-bottom: 15px; }
.section-heading > p { font-size: 14px; line-height: 1.8; color: var(--muted); margin: 0 0 4px; }
.vehicle-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 30px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters button { border: 1px solid var(--line); background: #fff; padding: 12px 22px; border-radius: 30px; font-size: 13px; }
.filters button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.search { display: flex; align-items: center; border-bottom: 1px solid #bbc3be; min-width: 260px; }
.search input { border: 0; outline-offset: -2px; padding: 14px 0; width: 100%; font-size: 12px; background: transparent; }
.search > span:last-child { font-size: 26px; }
.vehicle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.vehicle-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: border-color .2s, transform .2s; }
.vehicle-card:hover { border-color: #a4b1a9; transform: translateY(-3px); }
.car-visual { height: 235px; background: #f5f6f3; position: relative; padding: 45px 15px 0; }
.car-visual img { width: 100%; height: 185px; object-fit: contain; mix-blend-mode: multiply; }
.car-visual > span { position: absolute; top: 20px; left: 22px; font-size: 10px; letter-spacing: 1.5px; color: #65716b; }
.car-body { padding: 23px; }
.car-brand { color: var(--muted); font-size: 12px; margin: 0 0 9px; }
.car-body h3 { font-size: 20px; letter-spacing: -.7px; margin: 0 0 9px; }
.car-detail { font-size: 12px; color: var(--muted); margin: 0 0 25px; }
.car-action { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 17px; }
.car-action > span { font-size: 12px; color: #69756e; }
.car-action button { border: 0; background: none; font-size: 13px; font-weight: 650; padding: 7px 0 7px 14px; }
.car-action button span { padding-left: 13px; color: var(--accent); }
.catalog-note { font-size: 11px; color: #7b847e; line-height: 1.7; margin: 22px 0; }
.vehicle-bottom { border-top: 1px solid var(--line); padding-top: 22px; display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; gap: 20px; }
.vehicle-bottom strong { color: var(--ink); margin-left: 20px; font-weight: 600; }
.empty { padding: 45px 20px; line-height: 1.8; background: var(--paper); text-align: center; color: var(--muted); }
.services { background: var(--paper); padding-block: 90px; }
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.service-card { position: relative; padding: 34px; border-radius: 6px; min-height: 275px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.rental { background: #e5eae1; }
.lease { background: #ece5de; }
.service-card::after { content: ''; position: absolute; right: -50px; top: -70px; width: 290px; height: 370px; border: 1px solid #ffffff9c; border-radius: 48%; transform: rotate(-35deg); pointer-events: none; }
.service-number { font-size: 10px; letter-spacing: 1.4px; color: #636b62; }
.service-card h3 { font-size: 30px; font-weight: 600; margin: 25px 0 14px; letter-spacing: -1px; }
.service-card p { font-size: 13px; line-height: 1.9; margin: 0; color: #596057; }
.round-link { position: absolute; right: 30px; bottom: 33px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #78827460; background: transparent; font-size: 22px; z-index: 1; }
.journey { padding-block: 100px; }
.small-link { font-size: 12px; padding-bottom: 7px; border-bottom: 1px solid var(--ink); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; list-style: none; margin: 48px 0 0; gap: 32px; }
.steps li { border-top: 1px solid #cad0ca; padding-top: 22px; }
.steps li > span { display: block; color: var(--accent); font-size: 12px; letter-spacing: 1px; margin-bottom: 38px; }
.steps h3 { font-size: 17px; letter-spacing: -.6px; margin: 0 0 13px; }
.steps p { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 0; }
.consult { background: #263630; color: #fff; padding-block: 85px; }
.consult-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.consult-copy { position: relative; padding-block: 18px; }
.consult-copy h2 { font-size: 53px; line-height: 1.35; letter-spacing: -2px; }
.consult-copy > p:not(.eyebrow) { color: #c2cec6; font-size: 14px; line-height: 1.9; margin-top: 25px; }
.consult-mark { font-size: 92px; font-weight: 800; letter-spacing: -7px; color: #ffffff10; margin-top: 50px; }
.consult-mark span { color: #ffffff1c; }
.consult-form { background: #fff; border-radius: 8px; padding: 34px; color: var(--ink); }
.form-heading { margin-bottom: 26px; }
.form-heading h3 { font-size: 21px; letter-spacing: -.6px; margin: 0 0 9px; }
.form-heading span { color: var(--muted); font-size: 11px; }
.consult-form label, .consult-form legend { font-size: 12px; display: block; margin-bottom: 10px; font-weight: 600; }
.consult-form > input, .form-row input { width: 100%; border: 1px solid #dce1dc; border-radius: 4px; height: 47px; padding: 12px; font-size: 12px; background: white; }
.consult-form input:disabled { background: #f6f7f5; }
fieldset { border: 0; padding: 0; margin: 23px 0; min-width: 0; }
.product-options { display: flex; gap: 8px; }
.product-options label { flex: 1; position: relative; margin: 0; cursor: pointer; }
.product-options input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; }
.product-options span { display: block; border: 1px solid #dce1dc; border-radius: 4px; text-align: center; padding: 13px 3px; font-size: 12px; font-weight: 400; }
.product-options input:checked + span { color: var(--accent); border-color: var(--accent); background: #fcf5f6; font-weight: 600; }
.product-options input:focus-visible + span { outline: 3px solid #c85a73; outline-offset: 3px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.preview-notice { color: #70786f; font-size: 11px; line-height: 1.8; margin: 19px 0; }
.submit { width: 100%; background: var(--accent); color: white; font-size: 13px; }
.form-result { font-size: 13px; line-height: 1.8; padding: 16px; background: #f1f5f0; margin-bottom: 0; }
.faq { padding-block: 90px; display: grid; grid-template-columns: 1fr 1.65fr; gap: 80px; }
.faq h2 { font-size: 29px; }
.faq-items { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; padding: 23px 30px 23px 0; position: relative; font-size: 14px; line-height: 1.5; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 20px; font-size: 23px; font-weight: 300; }
.faq details[open] summary::after { content: '−'; }
.faq details p { font-size: 13px; color: var(--muted); line-height: 1.9; margin: 0 25px 25px 0; }
.footer { padding-block: 40px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 30px; }
.footer .brand { font-size: 35px; }
.footer p { color: var(--muted); font-size: 11px; margin: 18px 0 10px; }
.footer > div:last-child { text-align: right; }
.footer > div:last-child > a { font-size: 12px; }
.footer small { font-size: 10px; color: var(--muted); }
.mobile-consult { display: none; }
@media (min-width: 1600px) { .header { padding-inline: calc((100vw - 1280px) / 2); } }
@media (max-width: 1050px) {
  .wrap { width: calc(100% - 64px); }
  .header { padding-inline: 32px; gap: 28px; }
  .header nav { gap: 25px; }
  .car-visual { height: 190px; padding-top: 35px; }
  .car-visual img { height: 150px; }
  .car-body { padding: 18px; }
  .car-body h3 { font-size: 17px; }
  .car-action { gap: 10px; }
  .car-action > span { font-size: 10px; }
  .car-action button { font-size: 12px; padding-left: 0; }
  .consult-grid { gap: 40px; }
  .consult-copy h2 { font-size: 42px; }
  .consult-form { padding: 25px; }
  .service-card p { max-width: 80%; }
  .steps { gap: 20px; }
  .steps h3 { font-size: 15px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 25px; }
  .wrap { width: calc(100% - 40px); }
  .header { height: 74px; padding-inline: 22px; gap: 16px; }
  .header .brand { font-size: 35px; }
  .header-cta { margin-left: auto; font-size: 11px; padding: 10px 13px; gap: 12px; }
  .header nav { display: none; position: absolute; top: 74px; left: 0; right: 0; background: #263630; padding: 12px 24px; }
  .header nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .header nav a { padding: 17px 0; }
  .menu-toggle { display: block; border: 0; background: transparent; color: white; width: 35px; height: 42px; font-size: 21px; }
  .hero-copy { padding-top: 185px; }
  h1 { font-size: clamp(33px, 8.4vw, 56px); letter-spacing: -1.8px; line-height: 1.35; }
  .hero .eyebrow { font-size: 9px; letter-spacing: 1.6px; }
  .hero-description { font-size: 14px; margin: 22px 0 28px; }
  .hero-actions { gap: 20px; align-items: flex-start; flex-direction: column; }
  .button { min-height: 50px; font-size: 13px; padding: 13px 20px; }
  .text-link { font-size: 12px; }
  .hero-bottom { bottom: 26px; font-size: 8px; letter-spacing: 1px; }
  .video-control > span { display: none; }
  .video-control button { font-size: 10px; min-width: 70px; }
  .discovery, .journey { padding-block: 65px; }
  .section-heading { display: block; margin-bottom: 28px; }
  .section-heading > p { font-size: 13px; margin-top: 20px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.6px; }
  h2 { font-size: 27px; letter-spacing: -1.1px; }
  .vehicle-toolbar { flex-direction: column; align-items: stretch; gap: 18px; }
  .filters { gap: 6px; }
  .filters button { font-size: 12px; padding: 10px 15px; }
  .vehicle-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .car-visual { height: 145px; padding: 32px 4px 0; }
  .car-visual img { height: 110px; }
  .car-visual > span { top: 15px; left: 13px; font-size: 8px; }
  .car-body { padding: 15px 12px; }
  .car-brand { font-size: 10px; }
  .car-body h3 { font-size: 16px; line-height: 1.4; min-height: 44px; letter-spacing: -.7px; }
  .car-detail { font-size: 10px; min-height: 27px; line-height: 1.5; margin-bottom: 15px; }
  .car-action { display: block; padding-top: 12px; }
  .car-action > span { display: block; }
  .car-action button { padding: 12px 0 0; font-size: 12px; width: 100%; text-align: left; display: flex; justify-content: space-between; }
  .vehicle-bottom { display: block; font-size: 11px; }
  .vehicle-bottom > a { display: block; margin-top: 15px; line-height: 1.9; }
  .vehicle-bottom strong { margin-left: 7px; }
  .services { padding-block: 60px; }
  .service-grid { grid-template-columns: 1fr; gap: 15px; }
  .service-card { padding: 26px; min-height: 250px; }
  .service-card h3 { font-size: 28px; }
  .service-card p { font-size: 12px; }
  .round-link { right: 22px; bottom: 25px; width: 39px; height: 39px; }
  .small-link { display: inline-block; margin-top: 20px; font-size: 11px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 30px 20px; margin-top: 30px; }
  .steps li > span { margin-bottom: 24px; }
  .steps h3 { font-size: 14px; }
  .steps p { font-size: 11px; }
  .consult { padding-block: 60px; }
  .consult-grid { grid-template-columns: 1fr; gap: 25px; }
  .consult-copy { padding: 0; }
  .consult-copy h2 { font-size: 41px; }
  .consult-copy > p:not(.eyebrow) { font-size: 13px; }
  .consult-mark { display: none; }
  .consult-form { padding: 24px 20px; }
  .form-heading h3 { font-size: 19px; }
  .product-options span { font-size: 11px; }
  .faq { display: block; padding-block: 60px; }
  .faq-items { margin-top: 28px; }
  .faq summary { font-size: 13px; }
  .footer { padding-block: 32px 100px; display: block; }
  .footer > div:last-child { text-align: left; margin-top: 30px; }
  .footer small { font-size: 9px; }
  .mobile-consult { display: flex; justify-content: space-between; position: fixed; z-index: 8; bottom: 0; left: 0; right: 0; padding: 18px 24px calc(18px + env(safe-area-inset-bottom)); background: var(--accent); color: white; font-size: 13px; box-shadow: 0 -5px 20px #00000010; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* First-screen consultation intake. */
.hero {
  height: auto;
  min-height: 100svh;
  padding-block: 0;
}
.hero-intake-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(370px, .85fr);
  align-items: stretch;
  min-height: 100svh;
  gap: clamp(32px, 5vw, 80px);
}
.hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 132px 104px;
}
.hero-copy h1 {
  font-size: clamp(38px, 4vw, 64px);
}
.hero-form-anchor {
  min-width: 0;
  scroll-margin-top: 0;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: #fff;
  box-shadow:
    -18px 0 32px -18px rgba(0, 0, 0, .22),
    18px 0 32px -18px rgba(0, 0, 0, .22);
}
.hero-consult {
  color: var(--ink);
  padding: 30px;
  box-shadow: none;
  border-radius: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.hero-consult input[type="hidden"] {
  display: none;
}
.form-heading h2 {
  font-size: 23px;
  letter-spacing: -.9px;
}
.form-eyebrow {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin: 0 0 9px;
}
.form-intro, .form-reassurance {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}
.form-intro {
  margin: 0 0 22px;
}
.form-reassurance {
  margin: 14px 0 0;
  text-align: center;
}
.field-optional, .field-required {
  font-size: 10px;
  margin-left: 5px;
  font-weight: 400;
}
.field-required {
  color: var(--accent);
}
.consent-block {
  margin: 22px 0;
}
.consult-form .consent-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
}
.consent-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.consent-details {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.consent-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  list-style: none;
}
.consent-details summary::-webkit-details-marker {
  display: none;
}
.consent-details summary:hover {
  border-color: var(--accent);
}
.consent-details summary svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.consent-details__hide,
.consent-details[open] .consent-details__show {
  display: none;
}
.consent-details[open] .consent-details__hide {
  display: inline;
}
.consent-details[open] summary svg {
  transform: rotate(180deg);
}
.consent-details p {
  margin: 8px 0 0;
  padding: 12px;
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.intake-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  overflow: hidden;
}
.intake-error {
  padding: 12px;
  border: 1px solid #b62c4d;
  background: #fff1f4;
  color: #8c1936;
  font-size: 13px;
  line-height: 1.7;
}
.submit:disabled {
  cursor: wait;
  opacity: .65;
}
.receipt-page {
  background: var(--paper);
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.receipt-card {
  width: min(100%, 480px);
  padding: 44px 32px;
  border-radius: 12px;
  background: #fff;
  text-align: center;
}
.receipt-check {
  font-size: 36px;
  color: var(--accent);
  margin-bottom: 24px;
}
.receipt-card h1 {
  font-size: 32px;
  letter-spacing: -1px;
}
.receipt-card > p {
  line-height: 1.8;
}
.receipt-date, .receipt-phone {
  font-size: 12px;
  color: var(--muted);
}
.receipt-phone {
  display: block;
  margin-top: 20px;
}
@media (max-width: 960px) {
  .hero {
    min-height: 0;
    padding-block: 0;
  }
  .hero-intake-layout {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 640px;
  }
  .hero-copy h1 {
    font-size: clamp(32px, 5.4vw, 48px);
  }
  .hero-description {
    margin: 18px 0 22px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .hero-actions .text-link {
    display: flex;
    justify-content: space-between;
    min-height: 50px;
    padding: 13px 20px;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 650;
    background: #fff;
    color: var(--ink);
  }
  .hero-actions .button.white {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .65);
  }
  .hero-consult {
    padding: 24px;
  }
}
@media (max-width: 390px) {
  .hero-consult {
    padding: 20px;
  }
  .form-heading h2 {
    font-size: 21px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}


/* Logo and intake share one full-height white column. */
.consult-brand {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 30px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.consult-brand .site-brand-image {
  max-width: 220px;
  max-height: 56px;
  filter: brightness(0);
}
.hero-copy .header {
  padding: 0;
  border: 0;
  height: 90px;
  gap: 16px;
}
.hero-copy .header nav {
  margin-left: 0;
  gap: 24px;
}
.hero-copy .header-cta {
  display: none;
}
.hero-copy .hero-bottom {
  width: 100%;
  gap: 16px;
}
.hero-copy .video-control > span {
  display: none;
}
@media (max-width: 960px) {
  .hero-copy {
    padding-block: 112px 100px;
  }
  .hero-form-anchor {
    min-height: 100svh;
  }
  .consult-brand {
    min-height: 90px;
  }
}
@media (max-width: 760px) {
  .hero-copy .header {
    height: 74px;
    justify-content: flex-end;
  }
  .hero-copy .header nav {
    top: 64px;
    gap: 0;
  }
  .hero-copy .hero-bottom {
    bottom: 30px;
  }
  .hero-form-anchor {
    margin-inline: -20px;
  }
}

/* Shared section boundaries for menu anchors and page arrows. */
html.car2-onepage {
  scroll-padding-top: 0;
}
.car2-onepage [data-page-section] {
  scroll-margin-top: 0;
}
.section-navigation {
  display: none;
}
@media (min-width: 961px) {
  html.car2-onepage {
    scroll-snap-type: y proximity;
  }
  html.car2-onepage:has(#consult-form:focus-within) {
    scroll-snap-type: none;
  }
  .car2-onepage .wrap {
    width: min(1280px, calc(100% - 224px));
  }
  .car2-onepage [data-page-section] {
    min-height: 100svh;
    scroll-snap-align: start;
  }
  .car2-onepage .discovery,
  .car2-onepage .journey {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 40px;
  }
  .car2-onepage .services {
    display: flex;
    align-items: center;
    padding-block: 60px;
  }
  .car2-onepage .faq,
  .car2-onepage .footer {
    align-items: center;
  }
  .car2-onepage .discovery .section-heading {
    margin-bottom: 24px;
  }
  .car2-onepage .discovery .eyebrow {
    margin-bottom: 8px;
  }
  .car2-onepage .discovery h2 {
    font-size: clamp(28px, 2.4vw, 36px);
  }
  .car2-onepage .vehicle-toolbar {
    margin-bottom: 20px;
  }
  .car2-onepage .vehicle-grid {
    gap: 16px;
  }
  .car2-onepage .car-visual {
    height: clamp(100px, 15vh, 160px);
    padding: 22px 12px 0;
  }
  .car2-onepage .car-visual img {
    height: 100%;
  }
  .car2-onepage .car-visual > span {
    top: 12px;
    left: 16px;
    font-size: 9px;
  }
  .car2-onepage .car-body {
    padding: 14px 16px;
  }
  .car2-onepage .car-brand {
    font-size: 11px;
    margin-bottom: 5px;
  }
  .car2-onepage .car-body h3 {
    font-size: 17px;
    margin-bottom: 5px;
  }
  .car2-onepage .car-detail {
    font-size: 11px;
    margin-bottom: 10px;
  }
  .car2-onepage .car-action {
    padding-top: 8px;
  }
  .car2-onepage .car-action > span {
    font-size: 11px;
  }
  .car2-onepage .car-action button {
    font-size: 12px;
  }
  .car2-onepage .catalog-note {
    margin-block: 16px;
  }
  .car2-onepage .vehicle-bottom {
    padding-top: 16px;
  }
  .section-navigation {
    position: fixed;
    right: max(12px, calc((100vw - 1280px) / 2 - 100px));
    width: 52px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .section-navigation__arrow {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #dce1dc;
    border-radius: 50%;
    color: var(--ink);
    background: #fffffff2;
    box-shadow: 0 3px 14px #00000014;
    transition: background .2s, color .2s;
  }
  .section-navigation__arrow svg {
    width: 21px;
    height: 21px;
  }
  .section-navigation__arrow:hover:not(:disabled) {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
  }
  .section-navigation__arrow:disabled {
    opacity: .4;
    cursor: default;
  }
  .section-navigation__position {
    padding: 5px 7px;
    border-radius: 12px;
    font-size: 10px;
    letter-spacing: .5px;
    color: var(--ink);
    background: #fffffff2;
    white-space: nowrap;
  }
}

/* FAQ and company details share the final screen. */
.closing-page {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 64px 32px;
  background: radial-gradient(ellipse at 5% 5%, #dde6df 0, transparent 58%), #f0f3ef;
}
.company-anchor {
  position: absolute;
  top: 0;
}
.closing-page .faq {
  padding-block: 24px 48px;
  align-items: center;
  gap: 48px;
}
.closing-description {
  margin: 24px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
}
.closing-consult {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  padding: 16px 22px;
  border-radius: 6px;
  color: #fff;
  background: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.closing-page .faq-items {
  border: 1px solid #dce3dc;
  border-radius: 16px;
  background: #fff;
  padding: 8px 28px;
  box-shadow: 0 12px 36px #24392d08;
}
.closing-page .faq details:last-child {
  border-bottom: 0;
}
.closing-page .footer {
  align-items: flex-start;
  padding-block: 32px 8px;
  border-color: #cfd8cf;
}
.closing-page .footer .site-brand-image {
  filter: brightness(0);
}
.closing-page .site-company-info {
  max-width: 580px;
}
@media (max-width: 760px) {
  .closing-page {
    padding-block: 40px 100px;
  }
  .closing-page .faq {
    padding-block: 0 32px;
  }
  .closing-page .faq-items {
    padding-inline: 18px;
  }
}

html.product-modal-open {
  overflow: hidden;
}
.product-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100svh - 40px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 20px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 24px 80px #10271d38;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.product-dialog::backdrop {
  background: #12251db3;
  backdrop-filter: blur(5px);
}
.product-dialog__body {
  position: relative;
  padding: 44px 36px 32px;
}
.product-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f0f3ef;
  font-size: 26px;
  color: var(--ink);
}
.product-dialog .eyebrow {
  margin-bottom: 12px;
  padding-right: 28px;
}
.product-dialog h2 {
  font-size: 32px;
}
.product-dialog__intro {
  margin: 20px 0 24px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
}
.product-dialog__checklist {
  padding: 22px;
  border-radius: 12px;
  background: #f0f3ef;
}
.product-dialog__checklist h3 {
  margin: 0 0 14px;
  font-size: 15px;
}
.product-dialog__checklist ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.8;
}
.product-dialog__checklist li + li {
  margin-top: 8px;
}
.product-dialog__note {
  margin: 20px 0 24px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
}
.product-dialog__consult {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 18px 22px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
@media (max-width: 760px) {
  .product-dialog__body {
    padding: 44px 24px 24px;
  }
}

/* A compact, illustrated four-step guide. */
.car2-onepage .journey {
  padding-block: 64px;
  background: radial-gradient(ellipse at 90% 10%, #e4ebe5 0, transparent 55%), #f6f7f3;
}
.journey .section-heading {
  margin-bottom: 32px;
}
.journey .steps {
  gap: 18px;
  margin: 0;
}
.journey .steps li {
  position: relative;
  padding: 26px 22px;
  border: 1px solid #dfe5dd;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px #23382b06;
}
.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.step-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #eaf0e8;
  color: #344f40;
}
.step-icon svg {
  width: 28px;
  height: 28px;
}
.journey .steps li:nth-child(2) .step-icon {
  background: #f7e9ec;
  color: var(--accent);
}
.journey .steps li:nth-child(3) .step-icon {
  background: #eeeaf3;
  color: #635274;
}
.journey .steps li:nth-child(4) .step-icon {
  background: #f4eee0;
  color: #80673b;
}
.step-number {
  color: #c8d2c8;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -1px;
}
.journey .steps li > .step-label {
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: 0;
}
.journey .steps h3 {
  font-size: 17px;
  line-height: 1.5;
}
.journey .steps p {
  font-size: 13px;
  line-height: 1.9;
}
.journey-start {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
  padding: 26px 30px;
  border-radius: 16px;
  background: #263b30;
  color: #fff;
}
.journey-start h3 {
  margin: 0 0 8px;
  font-size: 18px;
}
.journey-start p {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: #d0dbd2;
}
.journey-start a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-shrink: 0;
  padding: 16px 22px;
  border-radius: 6px;
  background: #fff;
  color: #263b30;
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 1100px) {
  .journey .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .car2-onepage .journey {
    padding-block: 48px;
  }
  .journey .steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .journey .steps li {
    padding: 22px;
  }
  .step-top {
    margin-bottom: 18px;
  }
  .journey-start {
    align-items: stretch;
    flex-direction: column;
    padding: 24px;
  }
}

/* Reserve the complete catalog area while filters or search hide cards. */
.vehicle-results {
  position: relative;
  min-height: 560px;
}
.vehicle-grid {
  align-content: start;
}
.vehicle-card[hidden] {
  display: none;
}
.vehicle-results > .empty {
  margin: 0;
}
@media (min-width: 961px) {
  .car2-onepage .vehicle-results {
    min-height: calc(clamp(100px, 15vh, 160px) * 2 + 288px);
  }
}

#vehicles .section-heading > p,
#vehicles .catalog-note,
#vehicles .empty {
  white-space: pre-line;
}

@media (min-width: 961px) {
  .hero-actions .text-link,
  .hero-actions .button.white {
    display: flex;
    justify-content: space-between;
    height: 62px;
    min-height: 62px;
    box-sizing: border-box;
    padding: 17px 23px;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 650;
    gap: 35px;
  }
  .hero-actions .text-link {
    background: #fff;
    color: var(--ink);
  }
  .hero-actions .button.white {
    background: transparent;
    color: #fff;
  }
}

/* The portrait background belongs above the intake form, at its original ratio. */
@media (max-width: 767px) {
  .hero--mobile-video > video.hero-video {
    height: calc(100vw * 16 / 9);
    object-fit: contain;
    object-position: center top;
  }

  .hero--mobile-video > .hero-shade {
    height: calc(100vw * 16 / 9);
  }

  .hero--mobile-video .hero-copy {
    min-height: calc(100vw * 16 / 9);
  }
}