/* Readable type scale: labels stay secondary, while actionable/body text
   keeps a comfortable minimum size and follows the viewport on desktop. */
@font-face { font-family:'Golos Text'; src:url('/assets/fonts/golos-text-variable.ttf') format('truetype'); font-weight:400 900; font-style:normal; font-display:swap; }
:root {
  --text-body: clamp(16px, .98vw, 18px);
  --text-secondary: clamp(14px, .86vw, 16px);
  --text-label: clamp(12px, .72vw, 14px);
}

html { font-size: 16px; overflow-x: clip; }
body { font-family:'Golos Text',Arial,sans-serif; font-size: var(--text-body); overflow-x: clip; }
.topline { font-size: 12px; letter-spacing: .1em; }
.site-header { gap: clamp(18px, 2.3vw, 36px); }
.main-nav button, .phone-link { font-size: 14px; }
.button { font-size: 14px; }
.button-small { font-size: 13px; }
.eyebrow { font-size: 12px; }
.intro-text,
.model-description,
.heading-note,
.editorial-copy > p:not(.eyebrow),
.contact-band > div:first-child > p:last-child {
  font-size: clamp(16px, 1.02vw, 18px);
}
.intro-art { min-width: 0; overflow: hidden; }
.intro-art > img { width: 100%; max-width: 100%; max-height: 410px; }
.configurator, [id].section-wrap { scroll-margin-top: 108px; }
.model-description { line-height: 1.68; }
.model-tab { font-size: clamp(12px, .82vw, 14px); }
.fact-chip span { font-size: 11px; }
.fact-chip strong { font-size: 14px; }
.price-label { font-size: 13px; }
.fine-print, .catalog-foot p { font-size: 12px; }
.filter-pill { font-size: 13px; }
.card-tag { font-size: 11px; }
.card-type { font-size: 13px; }
.card-body p { min-height: 88px; font-size: clamp(15px, .94vw, 17px); line-height: 1.62; }
.spec-pill { font-size: 12px; }
.card-bottom button, .card-bottom span { font-size: 13px; }
.scenario-title { font-size: 19px; }
.scenario-copy { font-size: 14px; }
.scenario-link { font-size: 12px; }
.journal-links button { font-size: 14px; }
.process-grid h3 { font-size: 21px; }
.process-grid p { font-size: 15px; }
.contact-band > div:first-child > p:last-child { line-height: 1.7; }
.contact-phone { font-size: clamp(22px, 1.8vw, 28px); }
.contact-card > span, .contact-card > a:last-child { font-size: 13px; }
.site-footer > p, .footer-bottom { font-size: 12px; }
.field-label { font-size: 13px; }
.consent { font-size: 12px; }
.form-status { font-size: 13px; }
.article-body { font-size: 16px; }
.mini-gallery { max-width: 100%; flex-wrap: wrap; }
.mini-gallery button { flex: 0 0 72px; }
.gallery-modal[data-single="true"] .gallery-step { visibility: hidden; pointer-events: none; }
.gallery-modal[data-single="true"] .gallery-count { display: none; }

/* Shared vehicle selector with a light surface and landscape imagery. */
main { display: flex; flex-direction: column; }
.configurator { padding-top: clamp(32px, 4vw, 58px); }
.configurator > .section-heading { display: none; }
.config-shell {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  min-height: 590px;
  background: #f4f6f6;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 22px;
  color: #161b20;
  box-shadow: 0 28px 80px rgba(0,0,0,.24);
}
.config-visual {
  padding: clamp(20px, 2.3vw, 34px);
  background: linear-gradient(145deg, #e9edef, #dfe5e8 72%, #d7dfe3);
  color: #161b20;
}
.visual-kicker, .visual-summary { color: #53616b; }
.icon-button, .round-link { background: rgba(255,255,255,.75); border-color: rgba(31,45,55,.16); color: #24333c; }
.vehicle-stage { height: clamp(310px, 32vw, 470px); background: radial-gradient(ellipse at 50% 75%, rgba(56,86,101,.16), transparent 58%); }
.vehicle-stage:after { background: linear-gradient(90deg,transparent,rgba(31,54,66,.28),transparent); }
.vehicle-stage img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 24px 20px rgba(19,29,36,.22)); }
.stage-wordmark { color: rgba(28,43,53,.07); }
.stage-orbit { border-color: rgba(35,82,101,.16); }
.visual-bottom { border-color: rgba(31,45,55,.16); }
.visual-model { color: #17232b; font-size: clamp(21px, 1.55vw, 27px); }
.mini-gallery { gap: 9px; min-height: 70px; align-items: center; }
.mini-gallery button { width: clamp(60px, 5.3vw, 78px); height: 58px; background: rgba(255,255,255,.7); border-color: rgba(31,45,55,.12); }
.mini-gallery button.is-active { border-color: #42bcd8; box-shadow: 0 0 0 2px rgba(66,188,216,.22); }
.config-panel { padding: clamp(24px, 3vw, 44px); background: #f8f9f8; }
.config-panel-head { align-items: end; }
.config-panel-head .eyebrow { color: #62717a; font-size: 11px; }
.config-panel-head h2 { max-width: none; margin: 5px 0 0; color: #131a1e; font-size: clamp(28px, 2.35vw, 38px); line-height: 1.05; letter-spacing: -.055em; }
.model-counter { color: #53616b; }
.model-counter i { color: #1399b5; }
.model-description { min-height: 0; margin: 15px 0 21px; color: #48555d; font-size: clamp(15px, .95vw, 17px); line-height: 1.58; }
.model-tabs { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.model-tab { min-height: 55px; border-radius: 10px; border-color: rgba(28,43,53,.16); background: #edf0f1; color: #34424a; font-size: clamp(13px, .82vw, 15px); }
.model-tab:hover { border-color: #42bcd8; }
.model-tab[aria-pressed="true"] { background: #d7f0f5; border-color: #28a9c5; color: #11343e; }
.color-selector { border-color: rgba(28,43,53,.16); }
.selector-label { color: #34424a; }
.selector-label strong { color: #60717a; }
.color-options { gap: 11px; }
.color-swatch { width: 42px; height: 42px; padding: 3px; }
.color-swatch { background: #f8f9f8; border-color: rgba(28,43,53,.20); }
.color-swatch.is-active { border-color: #21a6c3; box-shadow: 0 0 0 2px rgba(33,166,195,.18); }
.fact-chip { border-color: rgba(28,43,53,.15); background: rgba(255,255,255,.64); }
.fact-chip span, .price-label { color: #65737b; }
.fact-chip strong, .config-footer strong { color: #17232b; }
.config-footer { border-color: rgba(28,43,53,.16); }
.fine-print { color: #68757c; }
.config-panel .button-accent { background: #31b5d1; color: #0b2931; }
.config-panel .button-accent:hover { background: #55c9e0; }
.intro { order: 0; min-height: 0; display: block; padding-top: clamp(54px, 7vw, 100px); }
.intro-copy { max-width: 850px; padding: 0; }
.intro-art, .intro-bottom { display: none; }
.intro h2 { max-width: 850px; margin: 18px 0; font-size: clamp(38px, 4.3vw, 62px); line-height: 1.03; letter-spacing: -.06em; }
.intro-text { max-width: 760px; }
.intro-proof { display: none; }

@media (max-width: 980px) and (min-width: 761px) {
  .config-shell { grid-template-columns: minmax(0,1fr); }
  .vehicle-stage { height: clamp(320px, 48vw, 470px); }
}

@media (max-width: 760px) {
  .configurator { padding-top: 12px; }
  .config-shell { grid-template-columns: minmax(0,1fr); min-height: 0; border-radius: 16px; }
  .config-visual { padding: 14px; }
  .vehicle-stage { height: clamp(220px, 68vw, 320px); }
  .config-panel { padding: 18px 16px 20px; }
  .config-panel-head h2 { font-size: 28px; }
  .model-description { margin: 12px 0 16px; font-size: 16px; }
  .color-swatch { width: 36px; height: 36px; }
  .model-tabs { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
  .model-tab { min-height: 45px; padding: 4px 2px; font-size: 12px; }
  .config-facts { gap: 7px; margin: 17px 0; }
  .fact-chip { padding: 10px; }
  .config-footer { align-items: stretch; flex-direction: column; }
  .config-footer .button { width: 100%; }
  .intro { padding-top: 52px; }
  .intro h2 { font-size: clamp(34px, 9vw, 44px); }
  :root { --text-body: 16px; --text-secondary: 15px; --text-label: 12px; }
  .topline { font-size: 10px; letter-spacing: .06em; }
  .main-nav button { font-size: 16px; }
  .header-actions .button { min-height: 40px; padding: 0 13px; font-size: 12px; }
  .eyebrow { font-size: 11px; }
  .intro-text,
  .model-description,
  .heading-note,
  .editorial-copy > p:not(.eyebrow),
  .contact-band > div:first-child > p:last-child { font-size: 16px; }
  .intro-art { overflow: hidden; }
  .intro-art > img { width: 100%; max-width: 100%; max-height: 280px; }
  .intro-proof { font-size: 10px; }
  .intro-proof small { font-size: 9px; }
  .intro-bottom { font-size: 9px; letter-spacing: .06em; }
  .model-tab { font-size: 12px; }
  .fact-chip span { font-size: 10px; }
  .fact-chip strong { font-size: 13px; }
  .price-label, .fine-print, .catalog-foot p { font-size: 12px; }
  .filter-pill { font-size: 12px; }
  .card-body p { min-height: 0; font-size: 15px; }
  .card-type { font-size: 12px; }
  .spec-pill { font-size: 12px; }
  .card-bottom button, .card-bottom span { font-size: 13px; }
  .scenario-title { font-size: 15px; }
  .scenario-copy { font-size: 12px; }
  .scenario-link { font-size: 10px; }
  .journal-links button { font-size: 14px; }
  .process-grid h3 { font-size: 19px; }
  .process-grid p { font-size: 14px; }
  .contact-phone { font-size: 22px; }
  .contact-card > span, .contact-card > a:last-child { font-size: 13px; }
  .site-footer > p, .footer-bottom { font-size: 12px; }
  .mini-gallery { gap: 8px; }
  .mini-gallery button { flex-basis: calc((100% - 24px) / 4); max-width: 72px; height: 52px; }
  .consent { font-size: 12px; }
  .article-body { font-size: 15px; }
}

/* Sales-first landing: the model selector intentionally follows the offer. */
.sales-hero {
  min-height: min(700px, calc(100svh - 116px));
  padding-top: clamp(28px, 4vw, 58px);
  padding-bottom: clamp(24px, 3vw, 42px);
  display: grid;
  grid-template-columns: minmax(330px, .82fr) minmax(0, 1.18fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(30px, 5vw, 76px);
  row-gap: clamp(20px, 2.5vw, 34px);
}
.sales-copy { max-width: 620px; position: relative; z-index: 1; }
.sales-copy h1 {
  max-width: 660px;
  margin: clamp(20px, 2.2vw, 34px) 0 clamp(18px, 2vw, 28px);
  font-size: clamp(46px, 5.25vw, 78px);
  line-height: .99;
  letter-spacing: -.065em;
}
.sales-copy h1 em { color: #54c9e7; font-style: normal; }
.sales-lead { max-width: 560px; margin: 0; color: #c0c7cc; font-size: clamp(17px, 1.25vw, 20px); line-height: 1.65; }
.sales-actions { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(16px, 2.2vw, 30px); margin-top: clamp(24px, 3vw, 40px); }
.sales-actions .button { min-height: 54px; padding-inline: clamp(22px, 2.4vw, 34px); font-size: clamp(15px, 1vw, 17px); }
.sales-actions .text-button { font-size: clamp(15px, .95vw, 17px); }
.sales-actions .text-button span { margin-left: 8px; color: var(--accent); }
.sales-note { max-width: 520px; margin: 18px 0 0; color: #88939b; font-size: clamp(13px, .82vw, 15px); line-height: 1.5; }
.sales-visual {
  min-width: 0;
  height: clamp(390px, 41vw, 590px);
  margin: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: clamp(18px, 2vw, 30px);
  background: radial-gradient(ellipse at 72% 78%, rgba(69,142,162,.28), transparent 54%), linear-gradient(135deg, #20272d, #12171c 72%);
  box-shadow: 0 28px 80px rgba(0,0,0,.32);
}
.sales-visual::before { content: ""; position: absolute; inset: auto 5% 12%; height: 1px; z-index: 0; background: linear-gradient(90deg,transparent,rgba(91,204,229,.65),transparent); box-shadow: 0 0 35px 8px rgba(63,178,204,.12); pointer-events: none; }
.sales-visual::after { content: ""; position: absolute; inset: 62% 0 0; z-index: 0; background: linear-gradient(0deg,rgba(6,10,13,.68),transparent); pointer-events: none; }
.sales-visual img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 5% 2% 7%; object-fit: contain; object-position: center; filter: drop-shadow(0 28px 18px rgba(0,0,0,.28)); }
.sales-visual figcaption { position: absolute; z-index: 1; left: clamp(20px, 2.3vw, 34px); bottom: clamp(20px, 2.3vw, 34px); display: flex; flex-direction: column; gap: 4px; color: #fff; }
.sales-visual figcaption span:first-child { font-size: clamp(24px, 2.3vw, 34px); font-weight: 800; letter-spacing: -.045em; }
.sales-visual figcaption span:last-child { color: rgba(255,255,255,.78); font-size: clamp(14px, .95vw, 16px); }
.sales-index { position: absolute; z-index: 1; top: 22px; right: 24px; color: white; font-size: 13px; letter-spacing: .12em; }
.sales-index i { color: rgba(255,255,255,.55); font-style: normal; padding-inline: 4px; }
.sales-proof { grid-column: 1 / -1; display: flex; gap: clamp(20px, 4vw, 58px); padding-top: clamp(16px, 1.8vw, 24px); border-top: 1px solid var(--border); color: #aab4bb; font-size: clamp(14px, .9vw, 16px); }
.sales-proof span { display: flex; align-items: center; gap: 10px; }
.sales-proof b { color: var(--accent); font-size: .82em; letter-spacing: .08em; }

/* Shared rhythm and control sizing across the landing. */
.button { border-radius: 12px; font-size: 16px; gap: 12px; }
.button-small { font-size: 14px; }
.button-mark,.round-link { display: none; }
.model-page-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.model-page-links a { padding:10px 15px; border:1px solid var(--border); border-radius:8px; font-size:16px; color:#c7d7dd; }
.model-page-links a:hover { border-color:var(--accent); color:var(--accent); }
.model-detail,.model-page-link { color:var(--accent); font-size:16px; font-weight:700; text-underline-offset:5px; }
.model-detail:hover,.model-page-link:hover { text-decoration:underline; }
.model-page-link { display:inline-block; margin-top:18px; color:#087991; }
#active-car { cursor:zoom-in; }
.main-nav button, .phone-link { font-size: 16px; }
.main-nav a { color:#c1c6cb; font-size:16px; font-weight:600; transition:color .2s; }
.main-nav a:hover { color:var(--accent); }
.model-lineup,.compare-section,.editorial,.process-section,.faq-section { padding-top: clamp(64px, 7vw, 112px); }
.section-heading { gap: 28px; margin-bottom: 30px; }
.section-heading h2,.editorial h2,.contact-band h2 { font-size: clamp(34px, 3.7vw, 58px); line-height: 1.08; letter-spacing: -.045em; }
.model-card { display: flex; flex-direction: column; }
.card-body { flex: 1; display: flex; flex-direction: column; padding: 24px; }
.card-body p { font-size: 16px; line-height: 1.65; }
.card-bottom { margin-top: auto; padding-top: 22px; }
.card-bottom button { min-height: 44px; font-size: 15px; }
.model-tab { min-height: 48px; }
.fact-chip span { font-size: 13px; }
.fact-chip strong { font-size: 16px; }
.scenario-copy,.process-grid p { font-size: 16px; line-height: 1.65; }
.scenario-link { font-size: 14px; }
.faq-list { border-top: 1px solid var(--border); }
.faq-list details { border-bottom: 1px solid var(--border); padding: 24px 0; }
.faq-list summary { cursor: pointer; font-size: clamp(18px,1.4vw,23px); font-weight: 700; line-height: 1.4; }
.faq-list details p { max-width: 780px; margin: 18px 0 0; color: #b7c1c9; font-size: 17px; line-height: 1.7; }
.field-label { font-size: 15px; }
.field-label input { height: 52px; font-size: 16px; }
.modal-intro { font-size: 16px; }
.consent { font-size: 13px; }
@media (min-width:761px) and (max-width:1180px) {
  .phone-link { display: none; }
  .main-nav { gap: 16px; }
  .main-nav button { font-size: 14px; }
  .main-nav a { font-size:14px; }
  .header-actions { gap: 12px; }
}
@media (max-width:760px) {
  .section-heading { gap: 14px; margin-bottom: 24px; }
  .main-nav a { padding:13px 0; font-size:16px; border-bottom:1px solid var(--border); }
  .card-body { padding: 20px; }
  .card-body p { font-size: 16px; }
  .scenario-grid { grid-template-columns: 1fr; }
  .scenario-card { min-height: 0; padding: 22px; }
  .scenario-title { font-size: 21px; }
  .scenario-copy { font-size: 16px; }
  .scenario-icon { margin-bottom: 16px; }
  .faq-list details { padding: 20px 0; }
  .faq-list details p { font-size: 16px; }
  .model-tab { font-size: 14px; }
  .fact-chip span { font-size: 12px; }
  .fact-chip strong { font-size: 15px; }
}
@media (max-width:430px) {
  .brand-lockup { gap: 9px; }
  .brand-en { font-size: 12px; }
  .brand-zeekr { font-size: 12px; letter-spacing: .13em; }
  .header-actions .button { display: none; }
  .model-tabs { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .model-tab { font-size: 12px; }
  .sales-copy h1 { font-size: clamp(38px,10.2vw,44px); }
  .sales-actions { align-items: stretch; flex-direction: column; gap: 18px; }
  .sales-actions .text-button { align-self: flex-start; }
  .sales-proof { flex-direction: column; gap: 10px; }
}

@media (max-width: 980px) {
  .sales-hero { min-height: 0; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr); column-gap: 28px; }
  .sales-visual { height: clamp(350px, 52vw, 500px); }
  .sales-copy h1 { font-size: clamp(42px, 5.2vw, 60px); }
}
@media (max-width: 760px) {
  .sales-hero { padding-top: 30px; padding-bottom: 0; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; row-gap: 22px; }
  .sales-copy { max-width: none; }
  .sales-copy h1 { margin: 18px 0 14px; font-size: clamp(42px, 10vw, 60px); line-height: 1.02; }
  .sales-lead { font-size: 17px; line-height: 1.58; }
  .sales-actions { gap: 18px; margin-top: 22px; }
  .sales-actions .button { min-height: 50px; font-size: 15px; }
  .sales-actions .text-button { font-size: 15px; }
  .sales-note { margin-top: 13px; font-size: 13px; }
  .sales-visual { height: clamp(260px, 68vw, 380px); border-radius: 17px; }
  .sales-visual img { padding: 3% 1% 8%; }
  .sales-visual figcaption { left: 17px; bottom: 17px; }
  .sales-visual figcaption span:first-child { font-size: 23px; }
  .sales-visual figcaption span:last-child { font-size: 14px; }
  .sales-index { top: 15px; right: 16px; font-size: 12px; }
  .sales-proof { grid-column: auto; gap: 8px 18px; flex-wrap: wrap; padding-top: 16px; font-size: 13px; }
  .sales-proof span { gap: 7px; }
  .configurator { padding-top: 36px; }
}