:root{
  --page:#f7f6f6;--surface:#fff;--ink:#0c0c0b;--muted:#666;--line:#cfcfcf;
  --accent:#d41406;--content:min(1160px,calc(100vw - 28px));--cta:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--site-font-family,Roboto,Arial,sans-serif);background:var(--page);color:var(--ink);line-height:1.45}
body{padding-bottom:calc(var(--cta) + 24px + env(safe-area-inset-bottom))}
a{color:inherit;text-decoration:none}
button,select,input{font:inherit}
img{display:block;max-width:100%}
.header{position:sticky;top:0;z-index:50;background:rgba(247,246,246,.97);backdrop-filter:blur(10px);border-bottom:4px solid var(--ink)}
.header-inner{width:var(--content);margin:auto;min-height:84px;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:12px}
.brand{font-weight:900;font-size:var(--type-paragraph);white-space:nowrap;letter-spacing:-.04em}
.brand b{color:var(--accent)}
.phone{font-weight:900;font-size:var(--type-paragraph);white-space:nowrap}
.icon-btn{width:50px;height:50px;border:2px solid var(--ink);border-radius:50%;background:#fff;font-weight:900}
.menu-btn{width:52px;height:52px;border:2px solid var(--ink);border-radius:14px;background:#fff;display:grid;place-items:center;gap:4px;padding:12px}
.menu-btn i{display:block;width:22px;height:3px;background:var(--ink);border-radius:99px}
.menu{display:none;background:#fff;border-bottom:2px solid var(--ink)}
.menu.open{display:block}
.menu-inner{width:var(--content);margin:auto;padding:16px 0;display:grid;gap:10px}
.menu a{padding:14px 16px;border:1px solid var(--line);border-radius:10px;font-weight:800}
main{width:var(--content);margin:auto}
.hero{width:100vw;margin-left:calc(50% - 50vw);background:#000}
.hero-media{min-height:calc(100svh - 84px);display:flex;align-items:flex-end;background-position:center;background-size:cover}
.hero-copy{width:var(--content);margin:0 auto clamp(112px,17svh,170px);color:#fff}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--accent);font-weight:900;text-transform:uppercase;letter-spacing:.11em;white-space:nowrap;overflow:hidden}
.eyebrow:before{content:"";width:54px;border-top:5px solid currentColor;flex:none}
h1,h2,h3{letter-spacing:-.045em}
.hero h1{font-size:var(--type-hero-header);line-height:.96;margin:14px 0 16px;max-width:none;text-wrap:balance}
.hero p{font-size:var(--type-hero-subtitle);color:#eee;max-width:58rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-actions a{min-height:54px;padding:0 18px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:900}
.hero-actions .primary{background:var(--accent);color:#fff}
.hero-actions .secondary{background:#fff;color:var(--ink)}
.section{margin:28px 0;padding:28px 0}
.section.soft{padding:28px;background:#fff;border:1px solid var(--line);border-radius:10px}
.section h2{font-size:var(--type-section-header);line-height:.98;margin:12px 0 14px;text-wrap:balance}
.intro{color:var(--muted);max-width:66rem;font-size:var(--type-section-subtitle)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.card-media{aspect-ratio:16/10;background:center/cover no-repeat}
.card-body{padding:18px}
.card h3{margin:0 0 8px;font-size:var(--type-paragraph)}
.card p{margin:0;color:var(--muted)}
.task{border:1px solid var(--line);background:#fff;border-radius:10px;padding:18px;min-height:108px;display:flex;flex-direction:column;justify-content:space-between}
.task strong{font-size:var(--type-paragraph)}.task span{color:var(--muted)}
.selector{display:flex;gap:8px;flex-wrap:wrap}
.selector button{min-height:50px;padding:0 16px;border:2px solid var(--ink);border-radius:999px;background:#fff;font-weight:900}
.selector button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.finder{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:20px}
.filters{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px}
.field{margin-bottom:14px}.field label{display:block;font-weight:900;margin-bottom:8px}
.field select,.field input{width:100%;min-height:54px;border:1px solid var(--line);border-radius:10px;padding:0 14px;background:#fff}
.primary-btn{width:100%;min-height:54px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-weight:900}
.results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vehicle{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.vehicle-img{aspect-ratio:16/10;background:center/cover no-repeat}
.vehicle-body{padding:16px}.vehicle h3{margin:0 0 8px;font-size:var(--type-paragraph)}
.meta{display:flex;gap:7px;flex-wrap:wrap}.chip{background:#eee;border-radius:999px;padding:6px 9px;font-size:var(--type-paragraph);font-weight:800}
.price{font-size:var(--type-paragraph);font-weight:900;margin:12px 0}
.expand{border-top:1px solid var(--line)}
.expand:last-child{border-bottom:1px solid var(--line)}
.expand button{width:100%;min-height:64px;display:grid;grid-template-columns:minmax(0,1fr) 38px;align-items:center;gap:12px;border:0;background:transparent;padding:14px 0;text-align:left;font-weight:900}
.mark{width:34px;height:34px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center}
.expand-copy{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .28s ease,opacity .22s ease}
.expand-copy>div{overflow:hidden}.expand-copy p{margin:0;padding:0 0 0;color:var(--muted)}
.expand button[aria-expanded="true"]+.expand-copy{grid-template-rows:1fr;opacity:1}
.expand button[aria-expanded="true"]+.expand-copy p{padding-bottom:16px}
.expand button[aria-expanded="true"] .mark{background:var(--accent);color:#fff;border-color:var(--accent)}

.box-title{border:1px solid var(--line);background:#fff;border-radius:10px;overflow:hidden}
.box-title button{width:100%;min-height:64px;display:grid;grid-template-columns:minmax(0,1fr) 36px;align-items:center;gap:12px;border:0;background:#fff;padding:16px 18px;text-align:left;font-weight:900}
.box-title .box-mark{width:34px;height:34px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:var(--type-paragraph)}
.box-title-copy{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .28s ease,opacity .22s ease}
.box-title-copy>div{overflow:hidden}.box-title-copy p{margin:0;padding:0 18px;color:var(--muted)}
.box-title button[aria-expanded="true"]+.box-title-copy{grid-template-rows:1fr;opacity:1}
.box-title button[aria-expanded="true"]+.box-title-copy p{padding-bottom:16px}
.box-title button[aria-expanded="true"] .box-mark{background:var(--accent);color:#fff;border-color:var(--accent)}




.config-shell{
  position:relative;
  margin-top:24px;
  padding:22px;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:18px;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  overflow:hidden;
}
.config-shell::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:8px;
  background:var(--accent);
}
.config-shell-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:0 0 18px 10px;
  margin-bottom:18px;
  border-bottom:2px solid var(--line);
}
.config-shell-title{display:flex;align-items:center;gap:14px;min-width:0}
.config-shell-title img{width:min(210px,42vw);height:auto;display:block}
.config-shell-title strong{font-size:var(--type-paragraph)}
.estimate-pill{
  min-width:190px;
  padding:11px 14px;
  border:2px solid var(--ink);
  border-radius:12px;
  background:#f7f7f7;
  text-align:right;
}
.estimate-pill small{display:block;color:var(--muted);font-weight:800}
.estimate-pill strong{display:block;font-size:var(--type-paragraph);line-height:1.1;margin-top:3px}
.price-box{
  margin-top:16px;
  padding:16px;
  border:2px solid #fff;
  border-radius:10px;
  background:#1d1d1d;
}
.price-box .price-label{font-size:var(--type-paragraph);text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:#bbb}
.price-box .price-main{font-size:var(--type-paragraph);font-weight:950;margin-top:3px}
.price-box .price-sub{margin-top:6px;color:#ccc;font-size:var(--type-paragraph);line-height:1.4}
.price-box .price-options{margin-top:10px;padding-top:10px;border-top:1px solid #444;font-weight:800;color:#fff}
.choice-icon{
  width:48px;height:48px;border:2px solid var(--ink);border-radius:12px;
  display:grid;place-items:center;font-size:var(--type-paragraph);flex:0 0 auto;background:#f7f7f7;
}
.choice-title-row.icon-row{grid-template-columns:auto minmax(0,1fr) auto}
.choice.selected .choice-icon{background:var(--accent);color:#fff;border-color:var(--accent)}
.config-gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:0 14px 14px;
}
.config-thumb{
  border:2px solid #444;border-radius:8px;overflow:hidden;background:#111;color:#fff;
  padding:0;cursor:pointer;text-align:left;
}
.config-thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.config-thumb span{display:block;padding:7px 8px;font-size:var(--type-paragraph);font-weight:800;line-height:1.25}
.config-thumb:hover,.config-thumb:focus-visible{border-color:#fff}
.source-note{font-size:var(--type-paragraph);color:var(--muted);margin-top:10px}
@media(max-width:720px){
  .config-shell{padding:16px 14px 18px}
  .config-shell-head{grid-template-columns:1fr;padding-left:8px}
  .estimate-pill{text-align:left;min-width:0}
  .config-gallery{grid-template-columns:1fr 1fr}
}

.config-brand{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.config-brand img{display:block;max-width:210px;max-height:62px;object-fit:contain}
.choice-image{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#eee}
.choice-main.with-image{padding:0}
.choice-main.with-image .choice-title-row{padding:14px 16px 16px}
.config-preview{isolation:isolate}
.config-image{position:relative;background-image:none!important}
.config-image img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s ease,transform .35s ease}
.config-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.42));pointer-events:none}
.preview-logo{position:absolute;left:14px;top:14px;z-index:2;background:rgba(255,255,255,.93);border-radius:8px;padding:8px 10px;box-shadow:0 2px 12px rgba(0,0,0,.18)}
.preview-logo img{display:block;width:142px;height:auto;object-fit:contain}
.config-trust{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid #444}
.config-trust img{display:block;max-height:42px;max-width:118px;object-fit:contain;background:#fff;border-radius:6px;padding:5px}
.review-contact{display:flex;align-items:center;gap:10px;margin-top:16px;padding:14px 16px;border:2px solid var(--ink);border-radius:10px;font-weight:900}
.review-contact img{width:24px;height:24px;object-fit:contain}
.step-icon{display:block;font-size:var(--type-paragraph);line-height:1;margin-bottom:3px}
@media(max-width:620px){
  .config-brand img{max-width:175px}
  .choice-main.with-image .choice-title-row{padding:12px 14px 14px}
  .preview-logo img{width:122px}
}

.configurator{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:22px;align-items:start}
.config-preview{position:sticky;top:104px;background:#111;color:#fff;border-radius:12px;overflow:hidden}
.config-image{aspect-ratio:16/10;background:
  linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.22)),
  url('https://ijccarsalesltd.co.uk/wp-content/uploads/2024/02/why-choose-bottom.jpeg') center/cover no-repeat}
.config-summary{padding:18px}
.config-summary h3{margin:0 0 8px;font-size:var(--type-paragraph)}
.config-summary p{margin:0;color:#ccc}
.config-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.config-tag{background:#282828;border:1px solid #444;border-radius:999px;padding:7px 10px;font-size:var(--type-paragraph);font-weight:800}
.config-progress{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0 0 18px}
.config-progress button{min-height:46px;border:1px solid var(--line);background:#fff;border-radius:8px;font-weight:900;padding:6px}
.config-progress button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.config-panel{display:none}
.config-panel.active{display:block}
.config-panel h3{margin:0 0 6px;font-size:var(--type-paragraph)}
.config-panel>.intro{margin-top:0}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.choice{position:relative;border:2px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.choice.selected{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.choice-main{width:100%;border:0;background:#fff;padding:18px;text-align:left;cursor:pointer}
.choice-title-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.choice-title{font-weight:900;font-size:var(--type-paragraph)}
.choice-check{width:28px;height:28px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:var(--type-paragraph)}
.choice.selected .choice-check{background:var(--accent);border-color:var(--accent);color:#fff}
.choice-more{border-top:1px solid var(--line)}
.choice-more button{width:100%;min-height:44px;border:0;background:#fafafa;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:800;text-align:left}
.choice-copy{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .25s ease,opacity .2s ease}
.choice-copy>div{overflow:hidden}
.choice-copy p{margin:0;padding:0 16px;color:var(--muted)}
.choice-more button[aria-expanded="true"]+.choice-copy{grid-template-rows:1fr;opacity:1}
.choice-more button[aria-expanded="true"]+.choice-copy p{padding-bottom:14px}
.config-nav{display:flex;justify-content:space-between;gap:10px;margin-top:20px}
.config-nav button{min-height:50px;padding:0 18px;border-radius:10px;border:2px solid var(--ink);background:#fff;font-weight:900}
.config-nav .next{background:var(--accent);color:#fff;border-color:var(--accent)}
.config-nav button:disabled{opacity:.4}
.review-list{display:grid;gap:10px;margin-top:16px}
.review-row{display:grid;grid-template-columns:160px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.review-row strong{font-weight:900}
.config-note{margin-top:16px;padding:14px 16px;background:#fff6f4;border-left:4px solid var(--accent);color:#4b1d18}
@media(max-width:900px){.configurator{grid-template-columns:1fr}.config-preview{position:relative;top:auto}.config-progress{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.choice-grid{grid-template-columns:1fr}.config-progress{grid-template-columns:repeat(2,1fr)}.review-row{grid-template-columns:1fr;gap:4px}}

.a11y{position:fixed;right:12px;top:92px;z-index:90;width:min(320px,calc(100vw - 24px));background:#fff;border:2px solid var(--ink);border-radius:10px;padding:14px}
.a11y[hidden]{display:none}.a11y-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.a11y button{min-height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;font-weight:800}.a11y .motion{width:100%;margin-top:8px}
.reveal{opacity:1;transform:none;transition:none}.reveal.show{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none!important}}
@media(max-width:820px){.grid3,.grid2{grid-template-columns:1fr}.finder{grid-template-columns:1fr}.results{grid-template-columns:1fr}}
@media(max-width:620px){:root{--content:calc(100vw - 24px)}.header-inner{min-height:76px;gap:9px}.brand{font-size:var(--type-paragraph)}.phone{font-size:var(--type-paragraph)}.icon-btn{width:46px;height:46px}.menu-btn{width:48px;height:48px}.hero-media{min-height:calc(100svh - 76px)}.hero-copy{margin-bottom:clamp(110px,18svh,155px)}.hero h1{font-size:var(--type-paragraph)}.section.soft{padding:20px 16px}}

/* =========================================================
   V28 VISUAL LANGUAGE OVERRIDES
   Content/behaviour from the latest configurator is retained.
   ========================================================= */
:root{
  --page:#efefef;
  --surface:#f7f7f7;
  --ink:#111111;
  --muted:#666666;
  --line:#1f1f1f;
  --line-soft:#cfcfcf;
  --accent:#e10600;
  --content:min(1120px,calc(100vw - 32px));
  --shadow:0 8px 18px rgba(0,0,0,.12);
}
body{background:var(--page)}
.header{background:rgba(247,247,247,.98);border-bottom:4px solid var(--ink)}
.header-inner{min-height:92px}
.brand{letter-spacing:-.045em}
.phone{font-size:var(--type-paragraph)}
.icon-btn{border:2px solid var(--ink);border-radius:50%;background:var(--surface)}
.menu-btn{border:2px solid var(--ink);border-radius:14px;background:var(--surface)}

.hero-copy{
  width:var(--content);
  margin:0 auto clamp(64px,8vh,110px);
  padding:36px 0;
}
.hero h1{
  margin:0;
  font-size:var(--type-paragraph);
  line-height:.96;
  letter-spacing:-.06em;
  max-width:none;
  text-wrap:balance;
}
.hero p{max-width:58rem}
.eyebrow{
  display:flex;align-items:center;gap:14px;
  color:var(--accent);
  font-weight:900;text-transform:uppercase;
  letter-spacing:.12em;font-size:var(--type-section-eyebrow);
  margin-bottom:14px;white-space:nowrap;overflow:hidden;
}
.eyebrow:before{width:54px;border-top:5px solid currentColor}

.section{
  background:var(--surface);
  border:2px solid #bdbdbd;
  border-radius:20px;
  padding:34px;
  margin:26px 0;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.section.soft{
  background:var(--surface);
  border:2px solid #bdbdbd;
  border-radius:20px;
  padding:34px;
}
.section h2{
  margin:0 0 16px;
  font-size:var(--type-section-header);
  line-height:.96;
  letter-spacing:-.055em;
  max-width:none;
  text-wrap:balance;
}

.config-shell{
  position:relative;
  margin-top:26px;
  padding:26px;
  background:var(--surface);
  border:2px solid #bdbdbd;
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.config-shell::before{width:7px;background:var(--accent)}
.config-shell-head{
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  padding:0 0 20px 8px;
  margin-bottom:20px;
  border-bottom:2px solid var(--line-soft);
}
.config-shell-title img{max-width:230px}
.estimate-pill{
  min-width:190px;
  padding:12px 16px;
  border:2px solid var(--line);
  border-radius:14px;
  background:#fff;
  text-align:right;
}
.estimate-pill strong{font-size:var(--type-paragraph)}

.configurator{
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:24px;
}

.config-progress{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  margin:0 0 20px;
}
.config-progress button{
  min-height:58px;
  border:2px solid var(--line-soft);
  background:#fff;
  border-radius:14px;
  font-weight:900;
  padding:8px;
}
.config-progress button.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.step-icon{margin-bottom:4px}

.config-panel h3{
  margin:0 0 8px;
  font-size:var(--type-paragraph);
  line-height:1;
  letter-spacing:-.04em;
}
.choice-grid{gap:16px;margin-top:18px}
.choice{
  border:2px solid var(--line-soft);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
}
.choice.selected{
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent);
}
.choice-image{aspect-ratio:16/9}
.choice-main.with-image .choice-title-row,
.choice-main{padding:18px 20px}
.choice-title{font-size:var(--type-paragraph)}
.choice-check{
  width:36px;height:36px;
  border:2px solid var(--line);
  font-weight:900;
}
.choice-more{border-top:1px solid var(--line-soft)}
.choice-more button{
  min-height:52px;
  background:#fff;
  padding:12px 18px;
  font-weight:900;
}
.choice-icon{
  width:54px;height:54px;
  border:2px solid var(--line);
  border-radius:14px;
  background:var(--surface);
}
.choice.selected .choice-icon{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.config-nav{
  position:sticky;
  bottom:calc(76px + env(safe-area-inset-bottom));
  z-index:6;
  padding:12px 0 0;
  margin-top:20px;
  background:linear-gradient(to top,var(--surface) 70%,rgba(247,247,247,0));
}
.config-nav button{
  min-height:58px;
  padding:0 22px;
  border:2px solid var(--line);
  border-radius:14px;
  background:#fff;
  font-weight:900;
}
.config-nav .next{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.config-preview{
  position:sticky;
  top:112px;
  background:#111;
  border:2px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.config-image{aspect-ratio:16/10}
.preview-logo{left:16px;top:16px;border-radius:10px}
.config-summary{padding:20px}
.config-summary h3{font-size:var(--type-paragraph)}
.config-tags{gap:8px}
.config-tag{border-radius:999px;padding:7px 11px}
.price-box{
  margin-top:18px;
  padding:18px;
  border:2px solid rgba(255,255,255,.9);
  border-radius:14px;
  background:#1a1a1a;
}
.price-box .price-main{font-size:var(--type-paragraph)}
.config-gallery{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:0 16px 16px;
}
.config-thumb{border-radius:10px}

.task,.box-title,.card,.vehicle,.filters{
  border:2px solid var(--line-soft);
  border-radius:18px;
}
.expand button{min-height:68px}
.mark,.box-mark{width:36px;height:36px}

@media(max-width:900px){
  .configurator{grid-template-columns:1fr}
  .config-preview{position:relative;top:auto}
  .config-progress{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:620px){
  :root{--content:calc(100vw - 24px)}
  .section,.section.soft{padding:22px 16px;border-radius:18px}
  .config-shell{padding:18px 14px 20px;border-radius:18px}
  .config-shell-head{grid-template-columns:1fr}
  .estimate-pill{text-align:left}
  .choice-grid{grid-template-columns:1fr}
  .config-progress{grid-template-columns:repeat(2,1fr)}
  .config-progress button{min-height:54px}
  .config-nav{bottom:calc(70px + env(safe-area-inset-bottom))}
  .config-nav button{min-height:54px}
  .config-preview{border-radius:16px}
}


/* =========================================================
   VIEWPORT-FITTED CONFIGURATOR
   One focused step per screen; no long configurator scroll.
   ========================================================= */
#build{
  padding:22px;
}
#build > .intro{
  margin-bottom:14px;
}
.config-shell{
  height:calc(100svh - 188px);
  min-height:620px;
  max-height:860px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  padding:18px 18px 14px;
  margin-top:14px;
  overflow:hidden;
}
.config-shell-head{
  margin:0 0 12px;
  padding:0 0 12px 8px;
}
.config-shell-title img{max-width:180px}
.estimate-pill{padding:9px 12px}
.estimate-pill strong{font-size:var(--type-paragraph)}
.configurator{
  min-height:0;
  height:100%;
  grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);
  gap:16px;
  overflow:hidden;
}
.configurator > div:first-child{
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}
.config-progress{
  margin:0 0 10px;
  gap:6px;
}
.config-progress button{
  min-height:44px;
  padding:5px 6px;
  border-radius:10px;
  font-size:var(--type-paragraph);
}
.step-icon{
  display:inline;
  margin:0 4px 0 0;
  font-size:var(--type-paragraph);
}
.config-panel{
  min-height:0;
  overflow:hidden;
}
.config-panel.active{
  display:flex;
  flex-direction:column;
}
.config-panel h3{
  font-size:var(--type-paragraph);
  margin:0 0 4px;
}
.config-panel>.intro{
  margin:0 0 8px;
  font-size:var(--type-paragraph);
  line-height:1.35;
}
.choice-grid{
  min-height:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:4px;
  align-content:start;
}
.choice{
  border-radius:12px;
  min-width:0;
}
.choice-image{
  aspect-ratio:16/8.8;
}
.choice-main.with-image .choice-title-row,
.choice-main{
  padding:10px 11px;
}
.choice-title{
  font-size:var(--type-paragraph);
  line-height:1.1;
}
.choice-title small{
  font-size:var(--type-paragraph);
  font-weight:700;
}
.choice-check{
  width:28px;
  height:28px;
  font-size:var(--type-paragraph);
}
.choice-icon{
  width:38px;
  height:38px;
  font-size:var(--type-paragraph);
  border-radius:10px;
}
.choice-more button{
  min-height:38px;
  padding:7px 10px;
  font-size:var(--type-paragraph);
}
.choice-copy{
  position:absolute;
  left:6px;
  right:6px;
  bottom:6px;
  z-index:5;
  display:none;
  opacity:1;
  grid-template-rows:1fr;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:10px;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.choice-more button[aria-expanded="true"]+.choice-copy{display:block}
.choice-copy p{
  padding:10px !important;
  font-size:var(--type-paragraph);
  line-height:1.35;
}
.config-nav{
  position:static;
  padding:10px 0 0;
  margin:0;
  background:transparent;
}
.config-nav button{
  min-height:44px;
  padding:0 16px;
  border-radius:10px;
}
.config-preview{
  top:auto;
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(160px,1fr) auto auto;
  align-self:stretch;
}
.config-image{
  min-height:0;
  aspect-ratio:auto;
}
.config-summary{
  padding:12px 14px;
}
.config-summary h3{
  font-size:var(--type-paragraph);
  margin-bottom:4px;
}
.config-summary p{
  font-size:var(--type-paragraph);
}
.config-tags{
  margin-top:8px;
}
.config-tag{
  padding:4px 7px;
  font-size:var(--type-paragraph);
}
.price-box{
  margin-top:8px;
  padding:10px 12px;
}
.price-box .price-main{
  font-size:var(--type-paragraph);
}
.price-box .price-sub,
.price-box .price-options{
  font-size:var(--type-paragraph);
}
.config-gallery{
  display:none;
}
.source-note{
  margin:8px 0 0 8px;
  font-size:var(--type-paragraph);
}

/* Driveway preview is now a configurator step rather than a separate page block. */
.driveway-stage{
  min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:stretch;
}
.driveway-upload,
.driveway-preview{
  border:2px solid var(--line-soft);
  border-radius:12px;
  background:#fff;
  padding:12px;
}
.driveway-upload{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.driveway-upload label{
  font-weight:900;
  margin-bottom:8px;
}
.driveway-upload input{
  width:100%;
  min-height:44px;
}
.driveway-preview{
  position:relative;
  overflow:hidden;
  background:#dce7ed;
  min-height:220px;
}
.driveway-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:.72;
}
.driveway-vehicle{
  position:absolute;
  left:50%;
  bottom:8%;
  width:76%;
  transform:translateX(-50%);
  filter:drop-shadow(0 10px 8px rgba(0,0,0,.25));
}
.driveway-vehicle img{
  width:100%;
  height:auto;
  object-fit:contain;
  opacity:1;
}
.driveway-note{
  margin-top:7px;
  font-size:var(--type-paragraph);
  color:var(--muted);
}
@media(max-width:900px){
  .config-shell{
    height:calc(100svh - 170px);
    min-height:560px;
    max-height:none;
  }
  .configurator{
    grid-template-columns:1fr;
  }
  .config-preview{
    display:none;
  }
  .choice-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:620px){
  #build{padding:14px 10px}
  #build > .eyebrow,
  #build > h2,
  #build > .intro{
    display:block;
    width:100%;
    max-width:none;
  }
  .config-shell{
    height:calc(100svh - 158px);
    min-height:520px;
    padding:12px 10px 10px;
    margin-top:0;
    border-radius:14px;
  }
  .config-shell-head{
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    padding:0 0 8px 6px;
    margin-bottom:8px;
  }
  .config-shell-title{
    gap:8px;
  }
  .config-shell-title img{
    max-width:118px;
  }
  .config-shell-title strong{
    font-size:var(--type-paragraph);
  }
  .estimate-pill{
    min-width:0;
    padding:6px 8px;
    border-radius:8px;
  }
  .estimate-pill small{font-size:var(--type-paragraph)}
  .estimate-pill strong{font-size:var(--type-paragraph)}
  .config-progress{
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:4px;
    overflow:visible;
  }
  .config-progress button{
    min-width:0;
    min-height:38px;
    font-size:var(--type-paragraph);
    padding:4px;
  }
  .config-progress button::after{
    content:attr(data-short);
    font-size:var(--type-paragraph);
  }
  .config-progress button .step-icon{
    display:none;
  }
  .config-panel h3{
    font-size:var(--type-paragraph);
  }
  .config-panel>.intro{
    font-size:var(--type-paragraph);
  }
  .choice-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  .choice-image{
    aspect-ratio:1.15/1;
  }
  .choice-main.with-image .choice-title-row,
  .choice-main{
    padding:8px;
  }
  .choice-title{
    font-size:var(--type-paragraph);
  }
  .choice-title small{
    display:none;
  }
  .choice-title-row.icon-row{
    grid-template-columns:auto minmax(0,1fr) auto;
  }
  .choice-icon{
    width:32px;height:32px;font-size:var(--type-paragraph);
  }
  .choice-check{
    width:24px;height:24px;
  }
  .choice-more button{
    min-height:34px;
    font-size:var(--type-paragraph);
  }
  .config-nav{
    padding-top:7px;
  }
  .config-nav button{
    min-height:40px;
    padding:0 12px;
  }
  .driveway-stage{
    grid-template-columns:1fr 1.15fr;
    gap:6px;
  }
  .driveway-upload,.driveway-preview{
    padding:8px;
    border-radius:10px;
  }
  .driveway-preview{
    min-height:180px;
  }
  .driveway-upload label{
    font-size:var(--type-paragraph);
  }
  .driveway-upload input{
    font-size:var(--type-paragraph);
  }
  .driveway-note{
    font-size:var(--type-paragraph);
  }
  .source-note{
    display:none;
  }
}


/* ===== v7: stable compact grid + modal detail ===== */
.config-shell{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}
.configurator{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}
.configurator > div:first-child{
  display:block !important;
  min-height:0 !important;
}
.config-panel{display:none !important;overflow:visible !important;min-height:0 !important}
.config-panel.active{display:block !important}
.choice-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  align-items:stretch !important;
  align-content:start !important;
  min-height:0 !important;
  margin-top:12px !important;
}
.choice{
  position:relative !important;
  min-width:0 !important;
  height:auto !important;
  border:2px solid var(--line-soft) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:#fff !important;
}
.choice.selected{border-color:var(--accent)!important;box-shadow:inset 0 0 0 1px var(--accent)!important}
.choice-main{
  width:100% !important;
  height:100% !important;
  min-height:112px !important;
  padding:14px !important;
  border:0 !important;
  background:#fff !important;
  text-align:left !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  gap:10px !important;
}
.choice-main.with-image{padding:0 !important}
.choice-main.with-image .choice-title-row{padding:12px 14px 14px !important}
.choice-image{width:100%!important;aspect-ratio:16/9!important;object-fit:cover!important}
.choice-title-row{width:100%;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:center!important}
.choice-title-row.icon-row{grid-template-columns:auto minmax(0,1fr) auto!important}
.choice-title{font-size:var(--type-paragraph) !important;line-height:1.12!important}
.choice-check{width:30px!important;height:30px!important}
.choice-icon{width:40px!important;height:40px!important;font-size:var(--type-paragraph) !important}
.choice-more{display:none!important}
.choice-info-hint{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:auto;
  font-size:var(--type-paragraph);
  color:var(--muted);
  font-weight:800;
}
.choice-info-hint::before{
  content:"i";
  width:18px;height:18px;
  border:1.5px solid currentColor;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:var(--type-paragraph);
}
.config-nav{
  position:static!important;
  margin-top:14px!important;
  padding:0!important;
  background:none!important;
}
.config-preview{
  position:sticky!important;
  top:104px!important;
  height:auto!important;
  min-height:0!important;
  display:block!important;
}
.option-info-modal{
  position:fixed;inset:0;z-index:300;display:none;
  background:rgba(0,0,0,.78);
  padding:24px;
}
.option-info-modal.open{display:grid;place-items:center}
.option-info-card{
  width:min(720px,100%);
  max-height:min(820px,calc(100svh - 48px));
  overflow:auto;
  background:var(--surface);
  border:3px solid var(--ink);
  border-radius:20px;
  box-shadow:0 18px 42px rgba(0,0,0,.25);
}
.option-info-media{display:none;width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:2px solid var(--ink)}
.option-info-media.show{display:block}
.option-info-body{padding:26px}
.option-info-eyebrow{display:flex;align-items:center;gap:10px;color:var(--accent);font-weight:900;text-transform:uppercase;letter-spacing:.11em;font-size:var(--type-paragraph);margin-bottom:10px}
.option-info-eyebrow::before{content:"";width:42px;border-top:4px solid currentColor}
.option-info-title{margin:0;font-size:var(--type-paragraph);line-height:.98;letter-spacing:-.055em}
.option-info-copy{margin-top:16px;font-size:var(--type-paragraph);color:var(--muted);line-height:1.55}
.option-info-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.option-info-actions button{min-height:54px;border:2px solid var(--ink);border-radius:12px;font-weight:900;background:#fff}
.option-info-actions .select-option{background:var(--accent);color:#fff;border-color:var(--accent)}
.option-info-close{
  position:fixed;right:24px;top:24px;z-index:301;
  width:48px;height:48px;border:2px solid #fff;border-radius:50%;
  background:#111;color:#fff;font-size:var(--type-paragraph);font-weight:900
}
@media(max-width:900px){
  .configurator{grid-template-columns:1fr!important}
  .config-preview{display:none!important}
}
@media(max-width:620px){
  .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .choice-main{min-height:96px!important;padding:10px!important}
  .choice-main.with-image{padding:0!important}
  .choice-title{font-size:var(--type-paragraph) !important}
  .choice-icon{width:34px!important;height:34px!important}
  .option-info-modal{padding:0;background:#fff}
  .option-info-card{width:100%;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none}
  .option-info-body{padding:24px 18px calc(24px + env(safe-area-inset-bottom))}
  .option-info-close{right:14px;top:calc(14px + env(safe-area-inset-top))}
  .option-info-actions{grid-template-columns:1fr}
}


/* ===== v8: driveway first, roomier site typography, simple white outline ===== */
.config-shell{
  background:#fff !important;
  border:2px solid #c8c8c8 !important;
  border-radius:20px !important;
  box-shadow:var(--shadow) !important;
  padding:24px !important;
  margin-top:18px !important;
}
.config-shell::before{display:none !important}
.config-shell-head{
  padding:0 0 18px !important;
  margin-bottom:18px !important;
  border-bottom:1px solid #d7d7d7 !important;
}
.config-shell-title img{max-width:190px !important}
.config-shell-title strong{font-size:var(--type-paragraph) !important}
.estimate-pill{
  padding:11px 14px !important;
  border:2px solid var(--ink) !important;
  border-radius:12px !important;
}
.estimate-pill small{font-size:var(--type-paragraph) !important}
.estimate-pill strong{font-size:var(--type-paragraph) !important}
.config-progress{
  gap:8px !important;
  margin-bottom:18px !important;
}
.config-progress button{
  min-height:50px !important;
  padding:7px 8px !important;
  font-size:var(--type-paragraph) !important;
  border-radius:12px !important;
}
.config-panel h3{
  font-size:var(--type-paragraph) !important;
  margin-bottom:6px !important;
}
.config-panel>.intro{
  font-size:var(--type-paragraph) !important;
  line-height:1.45 !important;
  margin-bottom:14px !important;
}
.choice-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-top:14px !important;
}
.choice-main{
  min-height:132px !important;
  padding:16px !important;
}
.choice-main.with-image{padding:0 !important}
.choice-main.with-image .choice-title-row{padding:14px 16px 16px !important}
.choice-title{font-size:var(--type-paragraph) !important;line-height:1.15 !important}
.choice-title small{font-size:var(--type-paragraph) !important}
.choice-icon{width:46px !important;height:46px !important;font-size:var(--type-paragraph) !important}
.choice-check{width:32px !important;height:32px !important}
.choice-info-hint{font-size:var(--type-paragraph) !important}
.config-nav{margin-top:18px !important}
.config-nav button{min-height:52px !important;padding:0 18px !important;font-size:var(--type-paragraph) !important}
.driveway-stage{
  grid-template-columns:minmax(260px,.85fr) minmax(340px,1.15fr) !important;
  gap:14px !important;
}
.driveway-upload,.driveway-preview{
  padding:16px !important;
  border-radius:14px !important;
}
.driveway-upload label{font-size:var(--type-paragraph) !important}
.driveway-note{font-size:var(--type-paragraph) !important;line-height:1.4 !important}
.driveway-preview{min-height:300px !important}
@media(max-width:900px){
  .config-shell{padding:20px !important}
  .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .driveway-stage{grid-template-columns:1fr !important}
  .driveway-preview{min-height:260px !important}
}
@media(max-width:620px){
  .config-shell{
    padding:16px !important;
    border-radius:16px !important;
  }
  .config-shell-head{
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
  }
  .config-shell-title img{max-width:135px !important}
  .config-shell-title strong{font-size:var(--type-paragraph) !important}
  .estimate-pill{padding:7px 9px !important}
  .estimate-pill small{font-size:var(--type-paragraph) !important}
  .estimate-pill strong{font-size:var(--type-paragraph) !important}
  .config-progress{
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
    gap:5px !important;
  }
  .config-progress button{
    min-height:42px !important;
    font-size:var(--type-paragraph) !important;
    padding:4px !important;
    overflow:hidden;
    color:transparent;
    text-indent:-9999px;
  }
  .config-progress button::after{
    content:attr(data-short);
    font-size:var(--type-paragraph) !important;
    color:var(--ink);
    line-height:1;
    text-indent:0;
  }
  .config-panel h3{font-size:var(--type-paragraph) !important}
  .config-panel>.intro{font-size:var(--type-paragraph) !important}
  .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important}
  .choice-main{min-height:116px !important;padding:12px !important}
  .choice-main.with-image{padding:0 !important}
  .choice-main.with-image .choice-title-row{padding:12px !important}
  .choice-title{font-size:var(--type-paragraph) !important}
  .choice-title small{font-size:var(--type-paragraph) !important}
  .choice-icon{width:40px !important;height:40px !important;font-size:var(--type-paragraph) !important}
  .driveway-preview{min-height:230px !important}
  .driveway-upload,.driveway-preview{padding:12px !important}
}


/* ===== v10 clean configurator additions ===== */
.hero-actions .secondary{
  border:2px solid #fff;
  background:rgba(255,255,255,.96);
  color:var(--ink);
}
.choice-main{cursor:pointer}
.choice-main:disabled{cursor:not-allowed}
.choice-meta-row{
  width:100%;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}
.choice-price{
  display:block;
  font-weight:950;
  font-size:var(--type-paragraph);
  line-height:1.05;
  color:var(--ink);
  white-space:nowrap;
}
.choice-price small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:var(--type-paragraph);
  font-weight:800;
}
.choice-info-hint{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border:1px solid #bdbdbd;
  border-radius:999px;
  background:#f7f7f7;
  color:var(--muted);
  font-size:var(--type-paragraph);
  font-weight:900;
}
.choice-info-hint::before{
  content:"i";
  width:18px;
  height:18px;
  border:1.5px solid currentColor;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:var(--type-paragraph);
}
.disabled-choice{
  opacity:.46;
  filter:grayscale(1);
  border-style:dashed !important;
}
.disabled-choice .choice-main{
  background:#ececec !important;
}
.choice-disabled-mark{
  width:32px;
  height:32px;
  border:2px solid #777;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:950;
  color:#666;
}

.option-info-modal{
  position:fixed;
  inset:0;
  z-index:300;
  display:grid !important;
  place-items:center;
  padding:24px;
  background:rgba(12,12,12,0);
  backdrop-filter:blur(0);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .22s ease,
    background-color .22s ease,
    backdrop-filter .22s ease,
    visibility 0s linear .22s;
}
.option-info-modal.open{
  background:rgba(12,12,12,.58);
  backdrop-filter:blur(5px);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}
.option-info-card{
  position:relative;
  width:min(660px,calc(100vw - 32px));
  max-height:min(760px,calc(100svh - 48px));
  overflow:auto;
  background:#fff;
  border:2px solid #c8c8c8;
  border-radius:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.25),8px 8px 0 rgba(0,0,0,.08);
  transform:translateY(18px) scale(.965);
  opacity:0;
  transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease;
}
.option-info-modal.open .option-info-card{
  transform:translateY(0) scale(1);
  opacity:1;
}
.option-info-close{
  position:absolute !important;
  right:12px !important;
  top:12px !important;
  width:44px !important;
  height:44px !important;
  border:2px solid var(--ink) !important;
  border-radius:50% !important;
  background:#fff !important;
  color:var(--ink) !important;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
}
.option-info-media{
  border-bottom:1px solid #d7d7d7 !important;
}
.option-info-price{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  margin-top:12px;
  padding:8px 10px;
  border:2px solid var(--ink);
  border-radius:10px;
  background:#f7f7f7;
  font-weight:950;
}
.option-info-price small{color:var(--muted);font-weight:800}
.option-estimate-note{
  margin-top:16px;
  padding:12px 14px;
  background:#fff4f2;
  border-left:4px solid var(--accent);
  border-radius:8px;
  font-size:var(--type-paragraph);
  line-height:1.45;
}
.config-price-breakdown{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #444;
  display:grid;
  gap:5px;
  font-size:var(--type-paragraph);
}
.config-price-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.config-price-line span{color:#ccc}
.config-price-line strong{color:#fff}
.live-price-note{
  margin-top:8px;
  color:#bbb;
  font-size:var(--type-paragraph);
  line-height:1.35;
}

.info-list{display:grid;gap:10px;margin-top:18px}
.info-list details{
  border:2px solid #c8c8c8;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}
.info-list summary{
  min-height:64px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px;
  gap:12px;
  align-items:center;
  cursor:pointer;
  font-weight:950;
  list-style:none;
}
.info-list summary::-webkit-details-marker{display:none}
.info-mark{
  width:32px;height:32px;border:2px solid var(--ink);border-radius:50%;
  display:grid;place-items:center;
}
.info-list details[open] .info-mark{position:relative;color:transparent;font-size:var(--type-paragraph)}
.info-list details[open] .info-mark::after{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);content:"−";font-size:var(--type-paragraph)}
.info-copy{
  padding:0 16px 16px;
  color:var(--muted);
  line-height:1.55;
  font-size:var(--type-paragraph);
}
@media(max-width:620px){
  .hero-actions{display:grid;grid-template-columns:1fr 1fr}
  .hero-actions a{min-width:0;text-align:center;padding-left:10px;padding-right:10px}
  .choice-meta-row{align-items:center}
  .choice-price{font-size:var(--type-paragraph)}
  .option-info-modal{padding:14px}
  .option-info-card{
    width:min(100%,520px);
    max-height:calc(100svh - 28px);
    border-radius:18px;
  }
}
@media(prefers-reduced-motion:reduce){
  .option-info-modal,.option-info-card{transition:none !important}
}

/* ===== v11: overlay vehicle names + larger typography + compact centred modal ===== */
.choice-title{
  font-size:var(--type-paragraph) !important;
  line-height:1.15 !important;
}
.choice-price{
  font-size:var(--type-paragraph) !important;
}
.choice-info-hint{
  font-size:var(--type-paragraph) !important;
}
.config-panel h3{
  font-size:var(--type-paragraph) !important;
}
.config-panel>.intro{
  font-size:var(--type-paragraph) !important;
  line-height:1.5 !important;
}

.base-card-media{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
}
.base-card-media .choice-image{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}
.base-card-media::after{
  content:"";
  position:absolute;
  inset:38% 0 0;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.78));
  pointer-events:none;
}
.base-card-overlay{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:12px;
  padding:18px 16px 14px;
  color:#fff;
  text-align:left;
}
.base-card-name{
  font-size:var(--type-paragraph) !important;
  line-height:1.05 !important;
  letter-spacing:-.025em;
  color:#fff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.base-card-overlay .choice-check{
  background:var(--accent);
  color:#fff;
  border-color:#fff;
}
.choice[data-group="base"] .choice-meta-row{
  padding:14px 16px 15px;
  margin:0 !important;
}
.choice[data-group="base"] .choice-price small{
  display:none !important;
}

.option-info-modal{
  display:grid !important;
  place-items:center !important;
  align-items:center !important;
  justify-items:center !important;
  padding:24px !important;
}
.option-info-card{
  position:relative !important;
  display:block !important;
  width:min(680px,calc(100vw - 40px)) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:min(780px,calc(100svh - 48px)) !important;
  margin:auto !important;
  align-self:center !important;
  overflow:auto !important;
  background:#fff !important;
  border:2px solid #c8c8c8 !important;
  border-radius:22px !important;
  box-shadow:0 24px 70px rgba(0,0,0,.25),8px 8px 0 rgba(0,0,0,.08) !important;
}
.option-info-media{
  aspect-ratio:16/8.5 !important;
  max-height:310px;
}
.option-info-body{
  padding:26px 26px 24px !important;
}
.option-info-title{
  font-size:var(--type-paragraph) !important;
}
.option-info-price{
  font-size:var(--type-paragraph);
}
.option-info-price small{
  display:none !important;
}
.option-info-copy{
  font-size:var(--type-paragraph) !important;
  line-height:1.55 !important;
  margin-top:18px !important;
}

.option-spec-sheet{
  margin-top:18px;
  border:2px solid #c8c8c8;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}
.option-spec-sheet summary{
  min-height:58px;
  padding:12px 14px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px;
  gap:12px;
  align-items:center;
  cursor:pointer;
  list-style:none;
  font-weight:950;
  font-size:var(--type-paragraph);
}
.option-spec-sheet summary::-webkit-details-marker{display:none}
.spec-mark{
  width:32px;
  height:32px;
  border:2px solid var(--ink);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:950;
}
.option-spec-sheet[open] .spec-mark{
  font-size:var(--type-paragraph);
}
.option-spec-sheet[open] .spec-mark::after{
  content:"−";
  font-size:var(--type-paragraph);
}
.option-spec-body{
  border-top:1px solid #d7d7d7;
  padding:14px;
}
.option-spec-body dl{
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.option-spec-body dl>div{
  padding:10px 11px;
  border:1px solid #d7d7d7;
  border-radius:10px;
  background:#f7f7f7;
}
.option-spec-body .spec-wide{
  grid-column:1/-1;
}
.option-spec-body dt{
  margin:0 0 4px;
  color:var(--muted);
  font-size:var(--type-paragraph);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.option-spec-body dd{
  margin:0;
  font-size:var(--type-paragraph);
  font-weight:850;
  line-height:1.35;
}
.option-info-actions{
  margin-top:18px !important;
}

@media(max-width:620px){
  .choice-title{font-size:var(--type-paragraph) !important}
  .choice-price{font-size:var(--type-paragraph) !important}
  .choice-info-hint{font-size:var(--type-paragraph) !important}
  .config-panel h3{font-size:var(--type-paragraph) !important}
  .config-panel>.intro{font-size:var(--type-paragraph) !important}
  .base-card-name{font-size:var(--type-paragraph) !important}
  .base-card-overlay{padding:16px 12px 12px}
  .choice[data-group="base"] .choice-meta-row{padding:12px}
  .option-info-modal{
    padding:14px !important;
    background:rgba(12,12,12,.58) !important;
  }
  .option-info-card{
    width:min(100%,540px) !important;
    height:auto !important;
    min-height:0 !important;
    max-height:calc(100svh - 28px) !important;
    border:2px solid #c8c8c8 !important;
    border-radius:18px !important;
    box-shadow:0 20px 55px rgba(0,0,0,.28),6px 6px 0 rgba(0,0,0,.08) !important;
  }
  .option-info-media{
    aspect-ratio:16/9 !important;
    max-height:260px;
  }
  .option-info-body{
    padding:22px 18px 18px !important;
  }
  .option-info-title{font-size:var(--type-paragraph) !important}
  .option-info-copy{font-size:var(--type-paragraph) !important}
  .option-spec-body dl{grid-template-columns:1fr}
  .option-spec-body .spec-wide{grid-column:auto}
}

/* ===== v12 interaction + review fixes ===== */
.choice{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
.choice-main{
  flex:1 1 auto;
  cursor:pointer !important;
}
.choice-main:disabled{
  cursor:not-allowed !important;
}

/* Vehicle circles: white when unselected, red + tick when selected. */
.choice .choice-check{
  background:#fff !important;
  color:transparent !important;
  border:2px solid var(--ink) !important;
}
.choice.selected .choice-check{
  background:var(--accent) !important;
  color:#fff !important;
  border-color:var(--accent) !important;
}
.choice.selected .choice-check::after{
  content:"✓";
  color:#fff;
  font-weight:950;
}
.choice.selected .choice-check{
  font-size:var(--type-paragraph) !important;
}
.base-card-overlay .choice-check{
  box-shadow:0 2px 10px rgba(0,0,0,.22);
}

/* Price + Details are now a real footer, outside the selection button. */
.choice-footer{
  flex:0 0 auto;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-top:1px solid #d7d7d7;
  background:#fff;
  overflow:visible;
}
.choice-footer .choice-price{
  min-width:0;
  white-space:normal !important;
  font-size:var(--type-paragraph) !important;
}
.choice-details-button{
  flex:0 0 auto;
  min-height:38px;
  padding:6px 10px;
  border:1px solid #bdbdbd;
  border-radius:999px;
  background:#f7f7f7;
  color:var(--muted);
  font:inherit;
  font-size:var(--type-paragraph);
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.choice-details-button:hover,
.choice-details-button:focus-visible{
  transform:translateY(-1px);
  background:#fff;
  border-color:var(--ink);
}
.disabled-footer{
  justify-content:flex-start;
  color:var(--muted);
}
.choice-more{display:none !important}

/* Keep the detail popup compact and genuinely centred. */
.option-info-modal{
  align-items:center !important;
  justify-items:center !important;
}
.option-info-card{
  height:auto !important;
  min-height:0 !important;
  max-height:min(780px,calc(100svh - 48px)) !important;
  align-self:center !important;
  margin:auto !important;
}
.option-info-body{
  padding-bottom:22px !important;
}

/* Warranty offer on final review. */
.warranty-offer{
  margin-top:16px;
}
.warranty-choice{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 34px;
  align-items:center;
  gap:14px;
  padding:16px;
  border:2px solid #c8c8c8;
  border-radius:14px;
  background:#fff;
  text-align:left;
  cursor:pointer;
}
.warranty-choice[aria-pressed="true"]{
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent);
}
.warranty-copy{
  display:grid;
  gap:4px;
}
.warranty-kicker{
  color:var(--accent);
  font-size:var(--type-paragraph);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.warranty-copy strong{
  font-size:var(--type-paragraph);
}
.warranty-copy>span:last-child{
  color:var(--muted);
  font-size:var(--type-paragraph);
  line-height:1.4;
}
.warranty-price{
  font-weight:950;
  white-space:nowrap;
}
.warranty-price small{
  display:block;
  color:var(--muted);
  font-size:var(--type-paragraph);
  font-weight:800;
}
.warranty-check{
  width:32px;
  height:32px;
  border:2px solid var(--ink);
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
}
.warranty-choice[aria-pressed="true"] .warranty-check{
  border-color:var(--accent);
  background:var(--accent);
}
.warranty-choice[aria-pressed="true"] .warranty-check::after{
  content:"✓";
  color:#fff;
  font-weight:950;
}
.review-actions{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:10px;
  margin-top:14px;
}
.review-enquiry,
.review-used{
  min-height:54px;
  border:2px solid var(--ink);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  font-weight:950;
  text-align:center;
  text-decoration:none;
}
.review-enquiry{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.review-used{
  background:#fff;
  color:var(--ink);
}

/* Enquiry modal uses the same rounded, dimmed language as Details. */
.enquiry-modal{
  position:fixed;
  inset:0;
  z-index:320;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(12,12,12,0);
  backdrop-filter:blur(0);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease,background-color .22s ease,backdrop-filter .22s ease,visibility 0s linear .22s;
}
.enquiry-modal.open{
  background:rgba(12,12,12,.58);
  backdrop-filter:blur(5px);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}
.enquiry-card{
  position:relative;
  width:min(720px,calc(100vw - 40px));
  max-height:min(820px,calc(100svh - 48px));
  overflow:auto;
  background:#fff;
  border:2px solid #c8c8c8;
  border-radius:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.25),8px 8px 0 rgba(0,0,0,.08);
  transform:translateY(18px) scale(.965);
  opacity:0;
  transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease;
}
.enquiry-modal.open .enquiry-card{
  transform:translateY(0) scale(1);
  opacity:1;
}
.enquiry-close{
  position:absolute;
  right:12px;
  top:12px;
  z-index:2;
  width:44px;
  height:44px;
  border:2px solid var(--ink);
  border-radius:50%;
  background:#fff;
  font-size:var(--type-paragraph);
  font-weight:950;
}
.enquiry-head{
  padding:26px 26px 0;
}
.enquiry-head h2{
  margin:0;
  font-size:var(--type-paragraph);
  line-height:.98;
  letter-spacing:-.05em;
}
.enquiry-head>p{
  color:var(--muted);
  font-size:var(--type-paragraph);
  line-height:1.5;
}
.enquiry-build-summary{
  margin-top:14px;
  padding:12px 14px;
  border:2px solid var(--ink);
  border-radius:12px;
  background:#f7f7f7;
  font-weight:900;
  line-height:1.45;
}
.enquiry-form{
  padding:20px 26px 26px;
}
.enquiry-turnstile{ margin:14px 0; min-height:65px; }
.enquiry-error{ color:#a40000; font-weight:900; }
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.field{
  display:grid;
  gap:6px;
}
.field-wide{
  grid-column:1/-1;
}
.field>span{
  font-weight:900;
}
.field input,
.field select,
.field textarea{
  width:100%;
  min-height:48px;
  box-sizing:border-box;
  border:2px solid #bdbdbd;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:var(--type-paragraph);
  padding:10px 12px;
}
.field textarea{
  min-height:88px;
  resize:vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:3px solid rgba(207,67,24,.22);
  border-color:var(--accent);
}
.form-note{
  margin:14px 0 0;
  color:var(--muted);
  font-size:var(--type-paragraph);
}
.enquiry-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:16px;
}
.primary-action,
.secondary-action{
  min-height:52px;
  border:2px solid var(--ink);
  border-radius:12px;
  font:inherit;
  font-weight:950;
}
.primary-action{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.secondary-action{
  background:#fff;
  color:var(--ink);
}
.enquiry-success{
  padding:42px 26px 28px;
  text-align:center;
}
.success-mark{
  width:58px;
  height:58px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:var(--type-paragraph);
  font-weight:950;
}
.enquiry-success h3{
  margin:0 0 8px;
  font-size:var(--type-paragraph);
}
.enquiry-success p{
  color:var(--muted);
  line-height:1.5;
}

@media(max-width:620px){
  .choice-footer{
    min-height:54px;
    padding:9px 10px;
  }
  .choice-footer .choice-price{
    font-size:var(--type-paragraph) !important;
  }
  .choice-details-button{
    font-size:var(--type-paragraph);
    padding:5px 8px;
  }
  .warranty-choice{
    grid-template-columns:minmax(0,1fr) 32px;
  }
  .warranty-price{
    grid-column:1;
    grid-row:2;
  }
  .warranty-check{
    grid-column:2;
    grid-row:1 / span 2;
  }
  .review-actions{
    grid-template-columns:1fr;
  }
  .enquiry-modal{
    padding:14px;
  }
  .enquiry-card{
    width:min(100%,560px);
    max-height:calc(100svh - 28px);
    border-radius:18px;
  }
  .enquiry-head{
    padding:22px 18px 0;
  }
  .enquiry-form{
    padding:18px;
  }
  .form-grid{
    grid-template-columns:1fr;
  }
  .field-wide{
    grid-column:auto;
  }
}
@media(prefers-reduced-motion:reduce){
  .choice-details-button,
  .enquiry-modal,
  .enquiry-card{
    transition:none !important;
  }
}

/* ===== v13: review reuses the actual configurator cards ===== */
.config-shell,
.configurator,
.configurator>div:first-child,
.config-panel.active{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}
.configurator>div:first-child{
  display:block !important;
}
.config-nav{
  position:static !important;
  bottom:auto !important;
}

/* Review becomes a long list of the selected cards. */
.review-card-stack{
  display:grid;
  gap:18px;
  margin-top:18px;
}
.review-card-group{
  display:grid;
  gap:8px;
}
.review-card-label{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--accent);
  font-size:var(--type-paragraph);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.review-card-label::before{
  content:"";
  width:34px;
  flex:0 0 34px;
  border-top:4px solid currentColor;
}
.review-card-group .choice{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
.review-card-group .choice-main{
  min-height:118px !important;
}
.review-card-group .choice[data-group="base"] .base-card-media .choice-image{
  aspect-ratio:16/7.2 !important;
  min-height:210px;
}
.review-card-group .choice[data-group="base"] .base-card-name{
  font-size:var(--type-paragraph) !important;
}
.review-card-group .choice-footer{
  min-height:62px;
  padding:12px 14px;
}
.review-card-group .choice-price{
  font-size:var(--type-paragraph) !important;
}
.review-card-group .choice-details-button{
  min-height:42px;
  font-size:var(--type-paragraph);
}

/* The review clone is still the same card. Its main area simply takes
   the customer back to the relevant step to change that choice. */
.review-choice .choice-main{
  cursor:pointer !important;
}
.review-choice .choice-main:hover,
.review-choice .choice-main:focus-visible{
  background:#fafafa !important;
}
.review-edit-hint{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  color:var(--muted);
  font-size:var(--type-paragraph);
  font-weight:900;
  white-space:nowrap;
}
.review-edit-hint::before{
  content:"↩";
  font-size:var(--type-paragraph);
}

/* Multiple equipment selections stay as individual reused cards. */
.review-card-group[data-review-group="equipment"]{
  gap:10px;
}
.review-card-group[data-review-group="equipment"] .choice{
  margin-bottom:0 !important;
}

/* Warranty remains a card in the same long review flow. */
.review-warranty{
  margin-top:20px !important;
}
.review-warranty::before{
  content:"Warranty";
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  color:var(--accent);
  font-size:var(--type-paragraph);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.warranty-choice{
  min-height:118px;
}

/* The old text row presentation is no longer part of Review. */
.review-list,
.review-row{
  display:none !important;
}

@media(max-width:620px){
  .review-card-stack{
    gap:15px;
  }
  .review-card-label{
    font-size:var(--type-paragraph);
  }
  .review-card-group .choice[data-group="base"] .base-card-media .choice-image{
    aspect-ratio:16/9 !important;
    min-height:0;
  }
  .review-card-group .choice-main{
    min-height:108px !important;
  }
  .review-edit-hint{
    font-size:var(--type-paragraph);
  }
}

/* ===== v14 base-spec expansion ===== */
.option-info-modal{overflow:hidden !important}
.option-info-card{
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  transition:
    height .28s cubic-bezier(.2,.8,.2,1),
    max-height .28s cubic-bezier(.2,.8,.2,1),
    transform .26s cubic-bezier(.2,.8,.2,1),
    opacity .2s ease !important;
}
.option-info-card.spec-expanded{
  height:calc(100svh - 48px) !important;
  max-height:calc(100svh - 48px) !important;
  overflow-y:auto !important;
}
.spec-source-note{
  margin-bottom:12px;
  padding:10px 12px;
  border-left:4px solid var(--accent);
  border-radius:8px;
  background:#f7f7f7;
  color:var(--muted);
  font-size:var(--type-paragraph);
  line-height:1.45;
}
.option-spec-body dd{overflow-wrap:anywhere}
@media(max-width:620px){
  .option-info-card.spec-expanded{
    height:calc(100svh - 28px) !important;
    max-height:calc(100svh - 28px) !important;
  }
}
@media(prefers-reduced-motion:reduce){
  .option-info-card{transition:none !important}
}

/* v15 requested fix only: selected circles retain the white tick. */
.choice.selected .choice-check::after{
  font-size:var(--type-paragraph) !important;
  line-height:1 !important;
}


/* ===== v17 requested layout + review-change corrections only ===== */
.config-progress{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
.configurator{
  grid-template-columns:1fr !important;
}
.config-preview{
  display:none !important;
}
@media(min-width:901px){
  .section h2{
    font-size:var(--type-paragraph) !important;
    line-height:1 !important;
  }
}
.grid3 .expand{
  border:2px solid var(--line-soft);
  border-radius:14px;
  background:#fff;
  padding:0 14px;
}
.grid3 .expand:last-child{
  border-bottom:2px solid var(--line-soft);
}

.change-choice-modal{
  position:fixed;
  inset:0;
  z-index:290;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(12,12,12,0);
  backdrop-filter:blur(0);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease,background-color .22s ease,backdrop-filter .22s ease,visibility 0s linear .22s;
}
.change-choice-modal.open{
  background:rgba(12,12,12,.58);
  backdrop-filter:blur(5px);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}
.change-choice-card{
  position:relative;
  width:min(820px,calc(100vw - 40px));
  max-height:min(820px,calc(100svh - 48px));
  overflow:auto;
  background:#fff;
  border:2px solid #c8c8c8;
  border-radius:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.25),8px 8px 0 rgba(0,0,0,.08);
  transform:translateY(18px) scale(.965);
  opacity:0;
  transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease;
}
.change-choice-modal.open .change-choice-card{
  transform:translateY(0) scale(1);
  opacity:1;
}
.change-choice-close{
  position:absolute;
  right:12px;
  top:12px;
  z-index:2;
  width:44px;
  height:44px;
  border:2px solid var(--ink);
  border-radius:50%;
  background:#fff;
  font-size:var(--type-paragraph);
  font-weight:950;
}
.change-choice-head{
  padding:26px 26px 10px;
}
.change-choice-head h2{
  margin:0;
  font-size:var(--type-paragraph);
  line-height:1;
  letter-spacing:-.05em;
}
.change-choice-head p{
  margin:10px 0 0;
  color:var(--muted);
}
.change-choice-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:12px 26px 20px;
}
.change-choice-list .choice{
  width:100% !important;
  margin:0 !important;
}
.change-choice-actions{
  padding:0 26px 26px;
}
.change-choice-actions button{
  width:100%;
}
@media(max-width:620px){
  .config-progress{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .change-choice-modal{padding:14px}
  .change-choice-card{
    width:min(100%,560px);
    max-height:calc(100svh - 28px);
    border-radius:18px;
  }
  .change-choice-head{padding:22px 18px 8px}
  .change-choice-list{
    grid-template-columns:1fr;
    padding:10px 18px 16px;
  }
  .change-choice-actions{padding:0 18px 18px}
}
@media(prefers-reduced-motion:reduce){
  .change-choice-modal,.change-choice-card{transition:none !important}
}



/* ===== v19: landing breathing room + floating mode bar ===== */
/* Keep photography full-bleed; only inset the hero copy so it never hugs the viewport edge. */
.hero-copy{
  width:min(1120px,calc(100vw - 64px)) !important;
  padding:42px 0 !important;
}
.hero-copy .eyebrow{margin-bottom:18px !important}
.hero-copy h1{margin-bottom:20px !important}
.hero-copy p{
  line-height:1.52 !important;
  margin:0 !important;
}
.hero-actions{margin-top:26px !important}

@media(max-width:620px){
  .hero-copy{
    width:calc(100vw - 48px) !important;
    padding:34px 0 !important;
  }
  .hero-copy .eyebrow{margin-bottom:14px !important}
  .hero-copy h1{margin-bottom:18px !important}
  .hero-actions{margin-top:22px !important}
}


/* ===== v20: stock filters + precisely centred floating mode bar ===== */
.stock-filter-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:14px;
}
.stock-filter-grid .field{margin-bottom:0}

/* ===== v21: fixed-width hero + labelled mode bar + image footer ===== */
/* Landing photography now follows the same max-width contract as the page. */
.hero{
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.hero-media{
  width:100%;
}
.hero-copy{
  width:calc(100% - 64px) !important;
  max-width:1120px !important;
}


/* Reintroduced visual footer: real IJC photography, deliberately softened behind concise information. */
.site-footer{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100vw;
  margin-left:calc(50% - 50vw);
  min-height:360px;
  margin-top:42px;
  padding:58px 0 calc(110px + env(safe-area-inset-bottom));
  color:#fff;
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:-24px;
  z-index:-2;
  background-image:url('https://ijccarsalesltd.co.uk/wp-content/uploads/2024/02/why-choose-bottom.jpeg');
  background-position:center;
  background-size:cover;
  filter:blur(10px);
  transform:scale(1.06);
}
.site-footer::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.68),rgba(0,0,0,.84));
}
.footer-inner{width:var(--content);margin:0 auto}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(150px,.7fr));
  gap:32px;
  align-items:start;
}
.footer-brand{font-size:var(--type-paragraph);font-weight:950;letter-spacing:-.045em}
.footer-brand b{color:#ff2a1a}
.footer-tagline{max-width:520px;margin:14px 0 20px;color:#f1f1f1;font-size:var(--type-paragraph)}
.footer-trust{display:grid;gap:8px;max-width:430px;margin-top:16px}.footer-trust-label{font-size:var(--type-paragraph);font-weight:950;letter-spacing:.08em;text-transform:uppercase;color:#fff}.footer-trust img{display:block;width:min(100%,390px);max-height:82px;object-fit:contain;object-position:left center;background:rgba(255,255,255,.94);border-radius:10px;padding:8px 10px;box-sizing:border-box}
.footer-phone{display:inline-flex;align-items:center;min-height:52px;padding:0 16px;border:2px solid #fff;border-radius:10px;font-size:var(--type-paragraph);font-weight:950}
.site-footer h3{margin:4px 0 12px;color:#fff;font-size:var(--type-paragraph);text-transform:uppercase;letter-spacing:.08em}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-links a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.footer-bottom{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.35);display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap;color:#ddd;font-size:var(--type-paragraph)}

@media(max-width:760px){
  .hero-copy{width:calc(100% - 40px) !important}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-lead{grid-column:1 / -1}
}
@media(max-width:520px){
  .hero-copy{width:calc(100% - 32px) !important}
  .footer-grid{grid-template-columns:1fr;gap:22px}
  .footer-lead{grid-column:auto}
}



/* ===== v22 shared public-site widget shell =====
   Search, configurator, why, stories and FAQ all use one outer shell.
   Each module owns only the content inside this shared shell. */
.section.app-shell{
  background:var(--surface) !important;
  border:2px solid #bdbdbd !important;
  border-radius:20px !important;
  padding:34px !important;
  margin:26px 0 !important;
  box-shadow:var(--shadow) !important;
  overflow:hidden !important;
}
.section.app-shell > .eyebrow,
.section.app-shell > h2,
.section.app-shell > .intro{
  width:100% !important;
  max-width:none !important;
}
.section.app-shell > h2{
  text-wrap:wrap !important;
}
/* The configurator is app content inside the shared shell, not a second shell. */
#build.app-shell .config-shell{
  margin-top:24px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
#build.app-shell .config-shell::before{display:none !important;}
@media(max-width:620px){
  .section.app-shell{
    padding:20px 16px !important;
    border-radius:18px !important;
  }
  #build.app-shell{padding:20px 16px !important;}
  #build.app-shell .config-shell{margin-top:20px !important;}
}


/* ===== v23: one desktop frame for header + hero + app shells =====
   The previous desktop composition mixed a clamped hero/main with a full-width
   header surface, which made the page feel like unrelated layers. Keep the
   public-site content on one centred frame at larger sizes, while preserving
   edge-to-edge behaviour on small screens. */
@media (min-width:761px){
  .header{
    width:var(--content);
    margin:0 auto;
    border-left:2px solid #bdbdbd;
    border-right:2px solid #bdbdbd;
    border-bottom:4px solid var(--ink);
    border-radius:0;
    overflow:visible;
  }
  .header-inner{
    width:100%;
    padding:0 28px;
  }
  .menu{
    border-bottom:0;
  }
  .menu-inner{
    width:100%;
    padding:16px 28px 20px;
  }

  .hero{
    margin-top:22px !important;
    border:2px solid #bdbdbd;
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--shadow);
  }
  .hero-media{
    min-height:min(calc(100svh - 138px),820px);
  }
  .hero-copy{
    width:calc(100% - 72px) !important;
  }
}

@media (max-width:760px){
  .header{
    width:100%;
    margin:0;
    border-radius:0;
    border-left:0;
    border-right:0;
  }
  .header-inner,.menu-inner{width:var(--content);padding-left:0;padding-right:0}

  /* Keep the landing photography edge-to-edge on phone/tablet widths. */
  .hero{
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
}


/* ===== v24 scoped configurator header correction =====
   Keep the section heading/intro visible on small screens and make the
   planning estimate the only full-width configurator header element. */
#build.app-shell > .eyebrow,
#build.app-shell > h2,
#build.app-shell > .intro{
  display:block !important;
  width:100% !important;
  max-width:none !important;
}
#build.app-shell .config-shell-head{
  display:block !important;
  padding-left:0 !important;
}
#build.app-shell .estimate-pill{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  text-align:left !important;
}
#build.app-shell .estimate-pill small,
#build.app-shell .estimate-pill strong{
  margin:0 !important;
}
@media(max-width:620px){
  #build.app-shell{padding:20px 16px !important;}
  #build.app-shell .config-shell{margin-top:20px !important;}
  #build.app-shell .config-shell-head{margin-bottom:14px !important;}
  #build.app-shell .estimate-pill{padding:11px 12px !important;}
  #build.app-shell .estimate-pill small{font-size:var(--type-paragraph) !important;}
  #build.app-shell .estimate-pill strong{font-size:var(--type-paragraph) !important;}
}


/* ===== v25: polished Microcamper header + independent expands + lighter floating mode bar =====
   Scoped to the exact issues requested in this pass. */

/* Persistent identity now carries the Microcamper context, so the hero does not need a low-contrast eyebrow. */
.header{
  top:10px !important;
  width:var(--content) !important;
  margin:10px auto 0 !important;
  background:linear-gradient(180deg,#171717 0%,#090909 72%,#101010 100%) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:18px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12) !important;
  overflow:visible !important;
}
.header-inner{
  width:100% !important;
  min-height:78px !important;
  padding:0 22px !important;
}
.brand{
  color:#fff !important;
  font-size:var(--type-paragraph) !important;
  letter-spacing:-.035em !important;
}
.brand b{color:var(--accent) !important}
.brand span{color:#fff !important}
.phone{color:#fff !important}
.icon-btn,.menu-btn{
  color:#fff !important;
  background:linear-gradient(180deg,#1b1b1b,#0b0b0b) !important;
  border-color:rgba(255,255,255,.78) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.menu-btn i{background:#fff !important}
.header .menu{
  margin-top:8px;
  background:#111 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:16px !important;
  box-shadow:0 14px 34px rgba(0,0,0,.24) !important;
  overflow:hidden;
}
.header .menu a{
  color:#fff !important;
  background:#171717 !important;
  border-color:#333 !important;
}

/* With the eyebrow removed, keep the splash composition intentional rather than leaving a dead gap. */
.hero-copy h1{margin-top:0 !important}
.hero-copy p{max-width:54rem !important}

/* The desktop Why heading should use the row rather than wrapping into an oversized two-line block. */
#why-microcamper > h2{
  font-size:var(--type-paragraph) !important;
  line-height:1.02 !important;
  max-width:none !important;
  text-wrap:nowrap !important;
}

/* Grid rows must not stretch collapsed siblings to the height of the one open item. */
#why-microcamper .grid3{
  align-items:start !important;
}
#why-microcamper .expand{
  align-self:start !important;
  width:100%;
}

@media(max-width:760px){
  .header{
    top:8px !important;
    width:calc(100% - 16px) !important;
    margin:8px auto 0 !important;
    border-radius:16px !important;
  }
  .header-inner{
    min-height:72px !important;
    padding:0 12px !important;
    gap:8px !important;
  }
  .brand{font-size:var(--type-paragraph) !important}
  .phone{font-size:var(--type-paragraph) !important}
  .icon-btn{width:44px !important;height:44px !important}
  .menu-btn{width:46px !important;height:46px !important;padding:10px !important}
  .header .menu{margin:7px 0 0 !important}

  #why-microcamper > h2{
    font-size:var(--type-paragraph) !important;
    text-wrap:wrap !important;
  }

}

@media(max-width:470px){
  .header-inner{gap:6px !important;padding:0 9px !important}
  .brand{font-size:var(--type-paragraph) !important}
  .phone{font-size:var(--type-paragraph) !important}
  .icon-btn{width:42px !important;height:42px !important}
  .menu-btn{width:44px !important;height:44px !important}
}


/* ===== v26: step-local estimate + clearer configurator icons =====
   Keep the estimate visually attached to the decision currently being made. */
.config-step-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(230px,310px);
  gap:24px;
  align-items:end;
  margin:0 0 16px;
}
.config-step-copy{min-width:0}
.config-step-copy h3{margin:0 0 6px !important}
.config-step-copy>.intro{
  margin:0 !important;
  font-size:var(--type-paragraph) !important;
  line-height:1.5 !important;
  color:var(--muted);
}
#build.app-shell .config-step-head .estimate-pill{
  width:100% !important;
  max-width:310px !important;
  min-width:0 !important;
  margin:0 0 2px auto !important;
  padding:11px 14px !important;
  align-self:end;
}
#build.app-shell .config-step-head .estimate-pill small{font-size:var(--type-paragraph) !important}
#build.app-shell .config-step-head .estimate-pill strong{font-size:var(--type-paragraph) !important}
.config-progress .step-icon{
  display:inline-block !important;
  margin:0 5px 0 0 !important;
  font-size:var(--type-paragraph) !important;
  vertical-align:-.08em;
}
@media(max-width:760px){
  .config-step-head{
    grid-template-columns:1fr;
    gap:10px;
    align-items:start;
  }
  #build.app-shell .config-step-head .estimate-pill{
    max-width:none !important;
    margin:0 !important;
  }
}
@media(max-width:620px){
  .config-progress button .step-icon{display:none !important}
  .config-step-copy>.intro{font-size:var(--type-paragraph) !important}
}


/* ===== video hero, reusable footer, header contact action, stock filtering ===== */
.header-inner{grid-template-columns:minmax(0,1fr) auto auto auto auto !important}
.ask-question-btn{
  min-height:46px;padding:0 16px;border:1px solid rgba(255,255,255,.2);border-radius:999px;
  background:linear-gradient(180deg,#f1261d,#c71208);color:#fff;font-weight:900;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px rgba(0,0,0,.2);white-space:nowrap
}
.ask-question-btn:hover{filter:brightness(1.06)}
.ask-short{display:none}
.phone{display:inline-flex;align-items:center;gap:7px}
.phone-icon{font-size:var(--type-paragraph)}
.video-hero{position:relative;overflow:hidden;background-position:center;background-size:cover}
.hero-video{position:absolute;inset:0;overflow:hidden;z-index:0;background:#111}
.hero-video iframe{position:absolute;left:50%;top:50%;width:max(100%,177.78vh);height:max(100%,56.25vw);border:0;transform:translate(-50%,-50%) scale(1.16);pointer-events:none}
.hero-video-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.22) 45%,rgba(0,0,0,.74) 100%);pointer-events:none}
.video-hero .hero-copy{position:relative;z-index:2}
.autotrader-rating{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 18px;padding:9px 12px;border:1px solid rgba(255,255,255,.34);border-radius:10px;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);color:#fff;font-size:var(--type-paragraph);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.autotrader-rating .rating-stars{color:#ffb400;letter-spacing:.08em;font-size:var(--type-paragraph)}
.autotrader-rating strong{font-weight:950}
.stock-finder{align-items:start}
.stock-count{margin:12px 0 0;color:var(--muted);font-weight:800;font-size:var(--type-paragraph)}
.stock-results{grid-template-columns:repeat(2,minmax(0,1fr))}
.stock-vehicle[hidden]{display:none !important}
.stock-vehicle .vehicle-img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#ddd}
.stock-kicker{color:var(--accent);font-size:var(--type-paragraph);font-weight:950;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.stock-vehicle .choice-copy{display:none}
.stock-details{min-height:42px;margin-top:10px}
.reusable-public-footer{
  width:var(--content) !important;margin:44px auto 24px !important;min-height:0 !important;
  padding:46px 0 34px !important;border-radius:24px !important;box-shadow:var(--shadow);
}
.reusable-public-footer .footer-inner{width:calc(100% - 56px) !important}
.reusable-public-footer .footer-tagline{margin-bottom:0}
.reusable-public-footer .footer-bottom{margin-top:26px;padding-top:16px}
@media(max-width:900px){
  .header-inner{grid-template-columns:minmax(0,1fr) auto auto auto auto !important}
  .stock-results{grid-template-columns:1fr}
}
@media(max-width:620px){
  .header-inner{grid-template-columns:minmax(0,1fr) auto auto auto auto !important}
  .ask-full{display:none}.ask-short{display:inline}
  .ask-question-btn{padding:0 12px;min-height:42px}
  .phone{font-size:var(--type-paragraph) !important;gap:4px}
  .phone-icon{font-size:var(--type-paragraph)}
  .video-hero .hero-copy{margin-bottom:clamp(108px,17svh,145px)}
  .autotrader-rating{font-size:var(--type-paragraph);gap:6px;padding:7px 9px;margin-bottom:14px}
  .reusable-public-footer{width:calc(100% - 16px) !important;margin:34px auto 18px !important;border-radius:20px !important;padding:34px 0 28px !important}
  .reusable-public-footer .footer-inner{width:calc(100% - 32px) !important}
}
@media(max-width:430px){
  .brand span{font-size:var(--type-paragraph)}
  .ask-question-btn{padding:0 10px}
  .phone-icon{display:none}
}


/* ===== v28: compact stock browser + resilient Vimeo embed ===== */
.stock-finder{display:block !important}
.stock-finder>.filters{
  width:100%;padding:12px !important;margin:0 0 14px !important;
  display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;align-items:end;
}
.stock-finder .stock-filter-grid{display:contents !important}
.stock-finder .field{min-width:0;margin:0 !important}
.stock-finder .field label{margin-bottom:5px;font-size:var(--type-paragraph)}
.stock-finder select{min-height:44px;padding:0 11px;font-size:var(--type-paragraph)}
.stock-count{grid-column:1/-1;margin:0 !important;font-size:var(--type-paragraph)}
.stock-results{
  display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;align-items:start;
}
.stock-vehicle{min-width:0;border-radius:14px !important}
.stock-vehicle .vehicle-img{aspect-ratio:16/8.8 !important}
.stock-vehicle .vehicle-body{padding:11px 12px 12px !important}
.stock-vehicle h3{font-size:var(--type-paragraph) !important;line-height:1.12;margin:0 0 8px !important}
.stock-vehicle .stock-kicker{font-size:var(--type-paragraph);margin-bottom:5px}
.stock-vehicle .meta{gap:5px}
.stock-vehicle .chip{padding:4px 7px;font-size:var(--type-paragraph)}
.stock-vehicle .price{font-size:var(--type-paragraph);margin:9px 0 4px !important}
.stock-vehicle .stock-details{min-height:34px;margin-top:5px;padding:0 9px;font-size:var(--type-paragraph)}
.hero-video iframe{
  width:max(100%,177.78vh) !important;height:max(100%,56.25vw) !important;
}
@media(max-width:900px){
  .stock-results{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:620px){
  .stock-finder>.filters{grid-template-columns:1fr 1fr !important;gap:8px}
}
@media(max-width:520px){
  .stock-results{grid-template-columns:1fr !important}
}



/* ===== v30: compact stock carousel + configurator stage shell + footer fit ===== */
/* The fixed mode selector no longer creates a pale empty page tail after the footer. */
body{padding-bottom:0 !important}
.reusable-public-footer{
  margin-bottom:12px !important;
  /* The floating mode selector occupies this visual area, so the footer itself remains the page end. */
  padding-bottom:84px !important;
}
@media(max-width:900px){.reusable-public-footer{padding-bottom:150px !important}}
@media(max-width:620px){.reusable-public-footer{padding-bottom:190px !important}}

/* Restore the shared eyebrow treatment on the configurator heading. An older mobile
   correction changed this one eyebrow to block layout, which detached its red rule. */
#build.app-shell > .eyebrow{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  overflow:visible !important;
}

/* The six configurator stages are one control group, not six loose buttons. */
#build.app-shell .config-progress{
  padding:10px !important;
  border:2px solid var(--line-soft) !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:0 6px 14px rgba(0,0,0,.1) !important;
  margin-bottom:20px !important;
}

/* Stock is a compact, finite carousel. Three cards are visible on desktop; arrows reveal
   any remaining filtered vehicles without turning the page into a long stock wall. */
.stock-carousel-shell{
  position:relative;
  width:100%;
  padding:0 40px;
}
.stock-results{
  display:flex !important;
  grid-template-columns:none !important;
  gap:10px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding:16px 0 12px !important;
  margin-top:-16px;
}
.stock-results::-webkit-scrollbar{display:none}
.stock-vehicle{
  flex:0 0 calc((100% - 20px)/3) !important;
  scroll-snap-align:start;
  min-width:0 !important;
}
.stock-vehicle .vehicle-img{aspect-ratio:16/9 !important}
.stock-vehicle .vehicle-body{padding:10px !important}
.stock-vehicle h3{font-size:var(--type-paragraph) !important;line-height:1.12 !important;margin-bottom:7px !important}
.stock-vehicle .stock-kicker{font-size:var(--type-paragraph) !important}
.stock-vehicle .chip{font-size:var(--type-paragraph) !important;padding:3px 6px !important}
.stock-vehicle .price{font-size:var(--type-paragraph) !important;margin:7px 0 2px !important}
.stock-vehicle .stock-details{min-height:32px !important;font-size:var(--type-paragraph) !important;padding:0 8px !important}
.stock-carousel-arrow{
  position:absolute;
  top:50%;
  z-index:3;
  width:34px;
  height:54px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border:2px solid var(--ink);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  font-size:var(--type-paragraph);
  font-weight:900;
  line-height:1;
  cursor:pointer;
  box-shadow:0 5px 12px rgba(0,0,0,.12);
}
.stock-carousel-prev{left:0}
.stock-carousel-next{right:0}
.stock-carousel-arrow:disabled{opacity:.28;cursor:default;box-shadow:none}

@media(max-width:900px){
  .stock-carousel-shell{padding:0 36px}
  .stock-vehicle{flex-basis:calc((100% - 10px)/2) !important}
}
@media(max-width:520px){
  .stock-carousel-shell{padding:0 32px}
  .stock-vehicle{flex-basis:100% !important}
  .stock-carousel-arrow{width:28px;height:48px;border-radius:10px;font-size:var(--type-paragraph)}
  .reusable-public-footer{padding-bottom:190px !important}
}

/* ===== v31: three-card stock carousel + flush configurator content ===== */
@media(min-width:901px){
  .stock-vehicle{flex-basis:calc((100% - 20px)/3) !important;}
}
#build.app-shell .config-shell{
  padding-left:0 !important;
  padding-right:0 !important;
}


/* ===== v32: client-supplied journey, VIP, awards and warranty content ===== */
.story-feature,
.vip-feature,
.customer-review-feature{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:24px;
  align-items:stretch;
  margin-top:22px;
}
.story-media,
.vip-media,
.review-media{
  margin:0;
  min-height:320px;
  overflow:hidden;
  border:2px solid #cfcfcf;
  border-radius:18px;
  background:#eee;
}
.story-media img,
.vip-media img,
.review-media img{
  width:100%;
  height:100%;
  min-height:320px;
  display:block;
  object-fit:cover;
}
.story-copy,
.vip-copy,
.customer-review-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.story-quote{
  margin:0;
  font-size:var(--type-paragraph);
  line-height:1.25;
  font-weight:900;
  letter-spacing:-.025em;
}
.story-byline{
  margin:14px 0 0;
  color:var(--accent);
  font-weight:900;
}
.story-details,
.vip-details{
  margin-top:20px;
  border:2px solid #d1d1d1;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.story-details summary,
.vip-details summary{
  min-height:58px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  font-weight:900;
  list-style:none;
}
.story-details summary::-webkit-details-marker,
.vip-details summary::-webkit-details-marker{display:none}
.story-details summary::after,
.vip-details summary::after{
  content:'+';
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border:2px solid var(--ink);
  border-radius:50%;
  font-size:var(--type-paragraph);
}
.story-details[open] summary::after,
.vip-details[open] summary::after{content:'−';background:var(--accent);border-color:var(--accent);color:#fff}
.story-details-body,
.vip-details-body{
  padding:0 16px 18px;
  color:var(--muted);
  line-height:1.65;
}
.story-details-body p,
.vip-details-body p{margin:0 0 12px}
.story-details-body p:last-child,
.vip-details-body p:last-child{margin-bottom:0}
.story-watch,
.travel-enquiry{
  align-self:flex-start;
  margin-top:16px;
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border:2px solid var(--ink);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
}
.story-watch:hover,
.travel-enquiry:hover{transform:translateY(-1px);box-shadow:0 5px 0 rgba(0,0,0,.08)}
.story-gallery,
.review-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
.story-gallery img,
.review-gallery img{
  width:100%;
  aspect-ratio:16/10;
  display:block;
  object-fit:cover;
  border:2px solid #d1d1d1;
  border-radius:14px;
}
.vip-lead{
  margin:0;
  font-size:var(--type-paragraph);
  line-height:1.5;
  font-weight:800;
}
.vip-highlights{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.vip-highlights span{
  min-height:54px;
  display:flex;
  align-items:center;
  padding:12px 14px;
  border:1px solid #d2d2d2;
  border-radius:12px;
  background:#f8f8f8;
  font-weight:850;
}
.travel-assist{
  margin-top:22px;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:2px solid var(--ink);
  border-radius:16px;
  background:#fff;
}
.travel-assist strong{display:block;font-size:var(--type-paragraph);margin-bottom:4px}
.travel-assist p{margin:0;color:var(--muted)}
.travel-enquiry{margin:0;flex:0 0 auto;background:var(--accent);border-color:var(--accent);color:#fff}
.customer-review-feature{
  margin-top:30px;
  padding-top:28px;
  border-top:1px solid #d1d1d1;
}
.customer-review-copy{justify-content:flex-start;padding-top:8px}
.awards-panel{
  margin-top:28px;
  padding-top:26px;
  border-top:1px solid #d1d1d1;
}
.awards-panel h3{margin:0 0 14px;font-size:var(--type-paragraph)}
.awards-panel img{
  width:100%;
  max-height:300px;
  object-fit:contain;
  display:block;
  padding:12px;
  border:2px solid #d1d1d1;
  border-radius:16px;
  background:#fff;
}
.modal-list{
  margin:12px 0 0 1.1em;
  padding:0;
  display:grid;
  gap:7px;
}
.warranty-terms{
  display:inline-block;
  margin:10px 4px 0;
  color:var(--ink);
  font-weight:850;
  text-underline-offset:3px;
}
.enquiry-travel{
  grid-column:1/-1;
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border:1px solid #d1d1d1;
  border-radius:12px;
  background:#f7f7f7;
}
.enquiry-travel input{margin-top:4px;transform:scale(1.2)}
.enquiry-travel strong{display:block;margin-bottom:3px}
.enquiry-travel span{color:var(--muted);font-size:var(--type-paragraph);line-height:1.45}
@media(max-width:760px){
  .story-feature,.vip-feature,.customer-review-feature{grid-template-columns:1fr}
  .story-media,.vip-media,.review-media,.story-media img,.vip-media img,.review-media img{min-height:250px}
  .vip-highlights{grid-template-columns:1fr}
  .travel-assist{align-items:stretch;flex-direction:column}
  .travel-enquiry{align-self:stretch}
}
@media(max-width:520px){
  .story-gallery,.review-gallery{grid-template-columns:1fr 1fr}
  .story-quote{font-size:var(--type-paragraph)}
}



/* ===== v34: framed configurator + stronger planning estimate + reusable location popup ===== */
/* The shared section shell owns the page module; this inner frame makes the configurator
   itself read as one distinct interactive tool without changing the surrounding content. */
#build.app-shell .config-shell{
  margin-top:24px !important;
  padding:16px !important;
  border:2px solid var(--line-soft) !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 6px 14px rgba(0,0,0,.1) !important;
}
#build.app-shell .configurator{width:100% !important;min-width:0 !important;}

/* Keep the estimate beside the active step copy, but give it enough visual weight to scan instantly. */
#build.app-shell .config-step-head .estimate-pill{
  min-width:270px !important;
  width:auto !important;
  padding:14px 18px !important;
  border:2px solid var(--ink) !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:0 4px 10px rgba(0,0,0,.1) !important;
  gap:14px !important;
}
#build.app-shell .config-step-head .estimate-pill small{
  font-size:var(--type-paragraph) !important;
  line-height:1.1 !important;
  font-weight:950 !important;
  letter-spacing:.045em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}
#build.app-shell .config-step-head .estimate-pill strong{
  font-size:var(--type-paragraph) !important;
  line-height:.95 !important;
  letter-spacing:-.04em !important;
  white-space:nowrap !important;
}

/* Reusable footer action: visually identical to the other footer navigation links. */
.footer-link-button{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:#fff;
  font:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  cursor:pointer;
  text-align:left;
}
.footer-link-button:hover,.footer-link-button:focus-visible{text-decoration-thickness:2px;}

/* Location uses the same rounded, dimmed modal language as vehicle/option Details. */
.location-card{width:min(620px,calc(100vw - 40px)) !important;}
.location-body{padding:28px !important;}
.location-address{
  margin:18px 0 0;
  padding:18px;
  border:2px solid var(--line-soft);
  border-radius:14px;
  background:#f7f7f7;
  text-align:center;
}
.location-address strong{display:block;font-size:var(--type-paragraph);line-height:1.45;}
.location-address span{display:block;margin-top:5px;color:var(--muted);font-weight:800;}
.location-divider{margin:22px 0;border:0;border-top:1px solid var(--line-soft);}
.location-label{
  margin:0 0 12px;
  font-size:var(--type-paragraph);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-align:center;
}
.location-stations{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.location-station{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 16px;
  border:2px solid var(--accent);
  border-radius:999px;
  font-weight:950;
  text-align:center;
}
.location-close-action{
  width:100%;
  min-height:50px;
  margin-top:22px;
  border:2px solid var(--ink);
  border-radius:12px;
  background:#fff;
  font:inherit;
  font-weight:950;
  cursor:pointer;
}
@media(max-width:760px){
  #build.app-shell .config-shell{padding:12px !important;}
  #build.app-shell .config-step-head .estimate-pill{
    width:100% !important;
    min-width:0 !important;
    padding:13px 14px !important;
  }
  #build.app-shell .config-step-head .estimate-pill strong{font-size:var(--type-paragraph) !important;}
}
@media(max-width:520px){
  .location-body{padding:24px 18px !important;}
  .location-stations{display:grid;grid-template-columns:1fr;}
}



/* ===== v35: compact inline estimate =====
   The estimate now fills the spare space beside the active step title instead of behaving like a second heading. */
#build.app-shell .config-step-head{
  grid-template-columns:1fr !important;
  gap:0 !important;
  align-items:start !important;
}
#build.app-shell .config-step-copy{
  display:grid !important;
  grid-template-columns:max-content minmax(0,1fr) !important;
  column-gap:18px !important;
  row-gap:4px !important;
  align-items:center !important;
  width:100% !important;
  min-width:0 !important;
}
#build.app-shell .config-step-copy>h3{
  grid-column:1 !important;
  grid-row:1 !important;
  margin:0 !important;
  white-space:nowrap !important;
}
#build.app-shell .config-step-copy>.intro{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
  margin:0 !important;
}
#build.app-shell .config-step-copy>.estimate-pill{
  grid-column:2 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:8px 14px !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:baseline !important;
  gap:8px !important;
  text-align:right !important;
}
#build.app-shell .config-step-copy>.estimate-pill strong{
  font-size:var(--type-paragraph) !important;
  line-height:1 !important;
  letter-spacing:-.035em !important;
  white-space:nowrap !important;
}
#build.app-shell .config-step-copy>.estimate-pill .estimate-suffix{
  display:inline !important;
  font-size:var(--type-paragraph) !important;
  line-height:1 !important;
  color:var(--muted) !important;
  font-weight:850 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  white-space:nowrap !important;
}
@media(max-width:760px){
  #build.app-shell .config-step-copy{
    grid-template-columns:1fr !important;
    row-gap:8px !important;
  }
  #build.app-shell .config-step-copy>h3{
    grid-column:1 !important;
    grid-row:1 !important;
    white-space:normal !important;
  }
  #build.app-shell .config-step-copy>.intro{
    grid-column:1 !important;
    grid-row:2 !important;
  }
  #build.app-shell .config-step-copy>.estimate-pill{
    grid-column:1 !important;
    grid-row:3 !important;
    justify-content:flex-start !important;
    text-align:left !important;
  }
}

/* ===== v36: supplied Microcampers logo + separated journey/reviews + visual Why gallery ===== */
.brand-image{display:flex!important;align-items:center;min-width:0;text-decoration:none!important}
.brand-image img{display:block;width:clamp(150px,19vw,230px);max-height:54px;object-fit:contain;object-position:left center}
.footer-brand-image{display:block!important}
.footer-brand-image img{display:block;width:min(100%,270px);max-height:82px;object-fit:contain;object-position:left center}
/* Customer-service award artwork is a transparent asset; do not put it back on a fake white card. */
.footer-trust img{background:transparent!important;padding:0!important;border-radius:0!important;max-height:96px!important}
.awards-panel img{background:transparent!important;padding:0!important;border:0!important;border-radius:0!important}

.why-gallery{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:18px 0 20px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.why-gallery figure{margin:0;min-width:0;scroll-snap-align:start;border:1.5px solid #d1d1d1;border-radius:14px;overflow:hidden;background:#fff}
.why-gallery img{display:block;width:100%;height:clamp(180px,22vw,300px);object-fit:cover}
.why-gallery figcaption{padding:10px 12px;font-weight:900;font-size:var(--type-paragraph);border-top:1px solid #ddd}

@media(max-width:760px){
  .brand-image img{width:145px;max-height:46px}
  .why-gallery{grid-template-columns:none;grid-auto-columns:82%;padding-bottom:4px}
  .why-gallery img{height:230px}
}


/* ===== v37: intrinsic estimate + video-led customer journey ===== */
/* Keep the estimate anchored to the right edge. It grows only toward the left if the value needs more room. */
#build.app-shell .config-step-copy{
  grid-template-columns:max-content minmax(0,1fr) !important;
}
#build.app-shell .config-step-copy>.estimate-pill{
  width:max-content !important;
  max-width:100% !important;
  min-width:0 !important;
  justify-self:end !important;
  justify-content:flex-end !important;
  padding:8px 14px !important;
}
@media(max-width:760px){
  #build.app-shell .config-step-copy>.estimate-pill{
    width:max-content !important;
    max-width:100% !important;
    justify-self:start !important;
  }
}

/* ===== v38: mobile header hierarchy + review sizing + hero trust alignment ===== */
/* Keep every item inside the Auto Trader trust chip vertically and horizontally aligned. */
.autotrader-rating{
  justify-content:flex-start !important;
  text-align:left !important;
  line-height:1.15 !important;
}
.autotrader-rating > *{
  display:inline-flex;
  align-items:center;
  line-height:1.15 !important;
}
.mobile-hero-logo{display:none}

@media(max-width:620px){
  /* On mobile, the immediate action replaces the logo in the fixed header. */
  .header-inner{
    grid-template-columns:auto minmax(0,1fr) auto auto !important;
  }
  .header .brand-image{display:none !important}
  .ask-question-btn{
    min-height:44px !important;
    padding:0 13px !important;
    font-size:var(--type-paragraph) !important;
  }
  .ask-full{display:inline !important}
  .ask-short{display:none !important}

  /* The brand still appears immediately in the page itself, above the trust proof. */
  .mobile-hero-logo{
    display:block;
    width:min(210px,58vw);
    max-height:64px;
    object-fit:contain;
    object-position:left center;
    margin:0 0 12px;
  }
  .autotrader-rating{
    width:max-content;
    max-width:100%;
    flex-wrap:nowrap !important;
    gap:4px !important;
    padding:7px !important;
    margin-bottom:16px !important;
  }
  .autotrader-rating .rating-stars{letter-spacing:.03em}
  .autotrader-rating>strong{white-space:nowrap}
}


/* ===== v40: Pixel-class mobile density + compact galleries + two-column footer =====
   Mobile-only polish. Desktop/tablet composition and configurator behaviour are unchanged. */
@media(max-width:620px){
  /* Keep the app-like hierarchy, but stop headings dominating a phone viewport. */
  .hero h1{
    font-size:var(--type-paragraph) !important;
    line-height:.99 !important;
    letter-spacing:-.04em !important;
  }
  .hero p{
    font-size:var(--type-paragraph) !important;
    line-height:1.45 !important;
  }
  .hero-actions a{
    min-height:50px !important;
    padding:0 14px !important;
    font-size:var(--type-paragraph) !important;
  }
  .section.app-shell{
    padding:18px 14px !important;
    margin:20px 0 !important;
  }
  .section.app-shell > h2{
    font-size:var(--type-paragraph) !important;
    line-height:1.02 !important;
    margin:10px 0 12px !important;
  }
  .section.app-shell > .intro{
    font-size:var(--type-paragraph) !important;
    line-height:1.45 !important;
  }
  .eyebrow{
    gap:9px !important;
    font-size:var(--type-paragraph) !important;
    letter-spacing:.1em !important;
  }
  .eyebrow::before{
    width:42px !important;
    border-top-width:4px !important;
  }
  /* The photo strips should read as compact carousels, not giant single-image panels. */
  .why-gallery{
    grid-auto-columns:68% !important;
    gap:10px !important;
    margin:14px 0 16px !important;
    padding-bottom:2px !important;
  }
  .why-gallery img{
    height:178px !important;
  }
  .why-gallery figcaption{
    padding:8px 10px !important;
    font-size:var(--type-paragraph) !important;
    line-height:1.25 !important;
  }

  /* Reusable footer: brand/trust first, then two compact navigation columns. */
  .reusable-public-footer{
    padding:28px 0 calc(92px + env(safe-area-inset-bottom)) !important;
  }
  .reusable-public-footer .footer-inner{
    width:calc(100% - 28px) !important;
  }
  .reusable-public-footer .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:20px 14px !important;
  }
  .reusable-public-footer .footer-lead{
    grid-column:1 / -1 !important;
  }
  .footer-brand-image img{
    width:min(100%,210px) !important;
    max-height:64px !important;
  }
  .footer-tagline{
    margin:10px 0 14px !important;
    font-size:var(--type-paragraph) !important;
    line-height:1.45 !important;
  }
  .footer-trust{
    max-width:none !important;
    margin-top:10px !important;
  }
  .footer-trust-label{
    font-size:var(--type-paragraph) !important;
  }
  .footer-trust img{
    width:100% !important;
    max-height:72px !important;
    object-position:left center !important;
  }
  .site-footer h3{
    margin:0 0 8px !important;
    font-size:var(--type-paragraph) !important;
  }
  .footer-links{
    gap:8px !important;
  }
  .footer-links a,
  .footer-link-button{
    font-size:var(--type-paragraph) !important;
    line-height:1.35 !important;
  }
  .footer-bottom{
    display:grid !important;
    gap:6px !important;
    margin-top:22px !important;
    padding-top:14px !important;
    font-size:var(--type-paragraph) !important;
    line-height:1.45 !important;
  }
}


/* ===== v41: mobile hero-under-header + one-line section heads + card footer selection =====
   Scoped mobile polish only. No configurator logic or desktop layout changes. */
@media(max-width:620px){
  /* Let the opening video continue behind the floating header instead of exposing
     the page background through the header's outer margin. */
  .hero{
    margin-top:-88px !important;
  }
  .hero-media{
    min-height:100svh !important;
    padding-top:88px;
  }

  /* Single-sentence app-shell titles stay on one line at phone widths.
     The deliberately two-sentence Why heading is the exception. */
  .section.app-shell > h2{
    font-size:var(--type-paragraph) !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
  }
  #why-microcamper > h2{
    font-size:var(--type-paragraph) !important;
    line-height:1.05 !important;
    white-space:normal !important;
    text-wrap:pretty !important;
  }
  /* On compact cards, reserve the title area for the title. Put price first in
     the footer, then the selection state and Details underneath. */
  .config-panel .choice:not([data-group="base"]),
  .change-choice-list .choice:not([data-group="base"]),
  .review-card-group .choice:not([data-group="base"]){
    position:relative !important;
  }
  .config-panel .choice:not([data-group="base"]) .choice-title-row,
  .change-choice-list .choice:not([data-group="base"]) .choice-title-row,
  .review-card-group .choice:not([data-group="base"]) .choice-title-row{
    grid-template-columns:minmax(0,1fr) !important;
    padding-right:0 !important;
  }
  .config-panel .choice:not([data-group="base"]) .choice-title-row.icon-row,
  .change-choice-list .choice:not([data-group="base"]) .choice-title-row.icon-row,
  .review-card-group .choice:not([data-group="base"]) .choice-title-row.icon-row{
    grid-template-columns:auto minmax(0,1fr) !important;
  }
  .config-panel .choice:not([data-group="base"]) .choice-check,
  .change-choice-list .choice:not([data-group="base"]) .choice-check,
  .review-card-group .choice:not([data-group="base"]) .choice-check{
    position:absolute !important;
    left:14px !important;
    right:auto !important;
    top:auto !important;
    bottom:12px !important;
    width:34px !important;
    height:34px !important;
    z-index:3;
  }
  .config-panel .choice:not([data-group="base"]) .choice-footer,
  .change-choice-list .choice:not([data-group="base"]) .choice-footer,
  .review-card-group .choice:not([data-group="base"]) .choice-footer{
    min-height:92px !important;
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) auto !important;
    grid-template-rows:auto auto !important;
    gap:7px 8px !important;
    align-items:center !important;
    padding:10px 12px !important;
  }
  .config-panel .choice:not([data-group="base"]) .choice-footer .choice-price,
  .change-choice-list .choice:not([data-group="base"]) .choice-footer .choice-price,
  .review-card-group .choice:not([data-group="base"]) .choice-footer .choice-price{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    width:100% !important;
  }
  .config-panel .choice:not([data-group="base"]) .choice-footer .choice-details-button,
  .change-choice-list .choice:not([data-group="base"]) .choice-footer .choice-details-button,
  .review-card-group .choice:not([data-group="base"]) .choice-footer .choice-details-button{
    grid-column:3 !important;
    grid-row:2 !important;
    justify-self:end !important;
  }
}



/* ===== v42: contact-first header, hero tagline, 16:9 customer journey ===== */

/* The configurator is an enquiry generator. Keep price data available for a
   future client decision, but do not present vehicle, option or total prices. */
#build .estimate-pill,
#build .choice-price,
#build .price-box,
#build .warranty-price,
#build .config-price-breakdown,
#build .live-price-note,
#optionInfoModal .option-info-price { display:none !important; }
#build .choice-footer { justify-content:flex-end; }
/* Header keeps the actual IJC Microcampers mark visible at every size. The phone
   number now lives inside Contact rather than consuming permanent header space. */
.header-inner{grid-template-columns:minmax(0,1fr) auto auto auto !important}
.header .phone{display:none !important}

/* Any copy placed over moving imagery needs enough separation to remain readable. */
.video-hero .hero-copy h1,
.video-hero .hero-copy p,
.video-hero .hero-copy .autotrader-rating{
  text-shadow:0 2px 5px rgba(0,0,0,.78),0 1px 1px rgba(0,0,0,.9);
}

/* Contact presents direct details first, then the existing form as the alternative. */
.contact-direct{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;margin-top:16px}
.contact-phone,.contact-address{
  display:flex;align-items:center;gap:12px;min-height:76px;padding:13px 15px;
  border:2px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);
  text-decoration:none;box-sizing:border-box;
}
.contact-phone>span:first-child,.contact-address>span:first-child{font-size:var(--type-paragraph);flex:0 0 auto}
.contact-phone>span:last-child,.contact-address>span:last-child{display:grid;gap:2px;min-width:0}
.contact-phone small,.contact-address small{font-size:var(--type-paragraph);color:var(--muted);font-weight:800;line-height:1.2}
.contact-phone strong{font-size:var(--type-paragraph);line-height:1.1}
.contact-address strong{font-size:var(--type-paragraph);line-height:1.3}
.contact-phone:hover{border-color:var(--accent);color:var(--accent)}
.contact-or{display:flex;align-items:center;gap:10px;padding:18px 26px 0;color:var(--muted)}
.contact-or::before,.contact-or::after{content:"";height:1px;background:#d0d0d0;flex:1}
.contact-or span{text-transform:uppercase;font-size:var(--type-paragraph);font-weight:900;letter-spacing:.12em}
.contact-or strong{color:var(--ink);font-size:var(--type-paragraph);white-space:nowrap}

@media(max-width:620px){
  .header-inner{grid-template-columns:minmax(0,1fr) auto auto auto !important}
  .header .brand-image{display:flex !important}
  .brand-image img{width:min(122px,29vw) !important;max-height:42px !important}
  .ask-question-btn{min-height:42px !important;padding:0 12px !important;font-size:var(--type-paragraph) !important}
  .mobile-hero-logo{display:none !important}
  .contact-direct{grid-template-columns:1fr}
  .contact-phone,.contact-address{min-height:66px}
  .contact-or{padding-left:20px;padding-right:20px}
}
@media(max-width:430px){
  .brand-image img{width:min(112px,27vw) !important}
  .ask-question-btn{padding:0 10px !important;font-size:var(--type-paragraph) !important}
}


/* ===== v43: decision reassurance, mobile configurator price hierarchy, YouTube links ===== */
/* The short client phrase sits exactly at the stock-versus-bespoke decision point. */
.decision-nudge{
  padding-top:clamp(20px,2.5vw,30px) !important;
  padding-bottom:clamp(20px,2.5vw,30px) !important;
}
.decision-nudge h2{
  max-width:none !important;
  margin:10px 0 8px !important;
  font-size:var(--type-paragraph) !important;
  line-height:1.05 !important;
}
.decision-nudge .intro{margin-bottom:0 !important;}

.stock-youtube-link{
  width:max-content;
  max-width:100%;
  min-height:46px;
  margin:16px auto 0;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--ink);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font-weight:900;
  text-decoration:none;
  box-shadow:0 4px 0 rgba(0,0,0,.06);
}
.stock-youtube-link:hover,
.stock-youtube-link:focus-visible{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);}

/* Customer quotations are always quotations visually, not body copy. */
.story-quote,
.journey-lead-quote{
  font-style:italic !important;
}

/* Never let the active-step helper text behave like a single unbreakable line. */
#build.app-shell .config-step-copy>.intro,
#build.app-shell>.intro{
  white-space:normal !important;
  text-wrap:pretty !important;
  overflow-wrap:normal !important;
  min-width:0 !important;
  max-width:100% !important;
}

@media(max-width:760px){
  /* On mobile the running total is a full-width bar under the title/subtitle. */
  #build.app-shell .config-step-copy{
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
  }
  #build.app-shell .config-step-copy>h3,
  #build.app-shell .config-step-copy>.intro,
  #build.app-shell .config-step-copy>.estimate-pill{
    grid-column:1 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }
  #build.app-shell .config-step-copy>.estimate-pill{
    justify-self:stretch !important;
    justify-content:center !important;
    text-align:center !important;
  }
}

@media(max-width:620px){
  .decision-nudge h2{
    font-size:var(--type-paragraph) !important;
    line-height:1.2 !important;
    white-space:normal !important;
    text-wrap:pretty !important;
  }
  .stock-youtube-link{
    width:100%;
    min-height:44px;
    margin-top:13px;
    font-size:var(--type-paragraph);
  }

  /* Option cards: title, then price, then divider, then selection + Details. */
  .config-panel .choice:not([data-group="base"]) .choice-main,
  .change-choice-list .choice:not([data-group="base"]) .choice-main,
  .review-card-group .choice:not([data-group="base"]) .choice-main{
    min-height:auto !important;
    padding:13px 12px 9px !important;
  }
  .config-panel .choice:not([data-group="base"]) .choice-footer,
  .change-choice-list .choice:not([data-group="base"]) .choice-footer,
  .review-card-group .choice:not([data-group="base"]) .choice-footer{
    position:relative !important;
    min-height:94px !important;
    grid-template-columns:42px minmax(0,1fr) auto !important;
    grid-template-rows:auto 1px auto !important;
    gap:8px !important;
    padding:5px 12px 11px !important;
    border-top:0 !important;
  }
  .config-panel .choice:not([data-group="base"]) .choice-footer::before,
  .change-choice-list .choice:not([data-group="base"]) .choice-footer::before,
  .review-card-group .choice:not([data-group="base"]) .choice-footer::before{
    content:"";
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    height:1px;
    background:#d7d7d7;
  }
  .config-panel .choice:not([data-group="base"]) .choice-footer .choice-price,
  .change-choice-list .choice:not([data-group="base"]) .choice-footer .choice-price,
  .review-card-group .choice:not([data-group="base"]) .choice-footer .choice-price{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    width:100% !important;
    padding:0 0 2px !important;
  }
  .config-panel .choice:not([data-group="base"]) .choice-footer .choice-details-button,
  .change-choice-list .choice:not([data-group="base"]) .choice-footer .choice-details-button,
  .review-card-group .choice:not([data-group="base"]) .choice-footer .choice-details-button{
    grid-column:3 !important;
    grid-row:3 !important;
    justify-self:end !important;
  }
  .config-panel .choice:not([data-group="base"]) .choice-check,
  .change-choice-list .choice:not([data-group="base"]) .choice-check,
  .review-card-group .choice:not([data-group="base"]) .choice-check{
    bottom:11px !important;
  }
}


/* ===== v44: make the decision reassurance deliberately stand out ===== */
.section.app-shell.decision-nudge{
  background:linear-gradient(180deg,#171717 0%,#090909 72%,#101010 100%) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 8px 0 rgba(0,0,0,.11),0 18px 32px rgba(0,0,0,.18) !important;
  color:#fff !important;
}
.decision-nudge .eyebrow{
  color:var(--accent) !important;
  overflow:visible !important;
}
.decision-nudge .eyebrow::before{
  border-top-color:var(--accent) !important;
}
.decision-nudge h2{
  color:#fff !important;
}
.decision-nudge .intro{
  color:#e8e8e8 !important;
}
@media(max-width:620px){
  .decision-nudge .eyebrow{
    white-space:normal !important;
    text-wrap:pretty !important;
    overflow:visible !important;
    line-height:1.18 !important;
    align-items:flex-start !important;
  }
  .decision-nudge h2{
    white-space:normal !important;
    text-wrap:pretty !important;
    overflow-wrap:anywhere !important;
  }
}


/* ===== v45: mobile base vehicle list + review hint clearance =====
   Requested mobile-only fixes. No desktop/configurator behaviour changes. */
@media(max-width:620px){
  /* Base vehicle choices stack as a clean list of three rather than leaving
     a third card stranded underneath a two-column grid. */
  .config-panel[data-panel="0"] .choice-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .config-panel[data-panel="0"] .choice[data-group="base"]{
    width:100% !important;
    max-width:none !important;
  }

  /* In Review, reserve the space immediately after the selection tick for
     the change hint so the two can never overlap. */
  .review-card-group .choice:not([data-group="base"]) .review-edit-hint{
    grid-column:2 !important;
    grid-row:3 !important;
    justify-self:start !important;
    align-self:center !important;
    margin-left:0 !important;
    padding-left:2px !important;
    white-space:nowrap !important;
  }
}


/* ===== v47: motion-only port from Workbench Platform Motion v54 =====
   Intentionally changes no content, layout, sizing, colours, or component structure.
   Motion principles: tiny displacement, fast opacity resolves, tactile intent,
   staggered structural reveal, and reduced-motion parity. */
:root{
  --ijc-motion-fast:140ms;
  --ijc-motion-standard:220ms;
  --ijc-motion-slow:320ms;
  --ijc-motion-ease:cubic-bezier(.2,.72,.2,1);
  --ijc-motion-emphasised:cubic-bezier(.16,1,.3,1);
}

/* Existing reveal targets keep their exact final geometry; only the motion profile changes. */
.reveal{
  opacity:1;
  transform:none;
  transition:none;
  will-change:auto;
}
.reveal.show{opacity:1;transform:none;will-change:auto}

/* Structural page reveal: the section stays put while its existing children resolve in sequence. */
.motion-sequence-item{
  opacity:1;
  transform:none;
  transition:none;
  will-change:auto;
}
.motion-sequence.motion-sequence-in > .motion-sequence-item{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* Tactile card response, adapted from the Workbench launcher-card interaction. */
.motion-card{
  transform-origin:50% 56%;
  transition:
    transform 160ms cubic-bezier(.2,.75,.2,1),
    filter 160ms ease;
}
@media (hover:hover) and (pointer:fine){
  .motion-card:not(.disabled-choice):hover{
    transform:translateY(-2px);
    filter:drop-shadow(0 7px 9px rgba(12,12,11,.08));
  }
  .motion-card:not(.disabled-choice):hover .choice-icon{
    transform:translateY(-2px) scale(1.025);
  }
}
.motion-card.motion-pressed:not(.disabled-choice){
  transform:translateY(1px) scale(.986);
  filter:drop-shadow(0 3px 5px rgba(12,12,11,.06));
}
.motion-card .choice-icon{
  transition:transform 110ms cubic-bezier(.2,.75,.2,1);
}
.motion-card.motion-pressed .choice-icon{transform:translateY(1px) scale(.972)}
.motion-card.motion-releasing{animation:ijcCardRelease 190ms cubic-bezier(.2,.82,.2,1)}
.motion-card.motion-releasing .choice-icon{animation:ijcIconRelease 190ms cubic-bezier(.2,.82,.2,1)}
@keyframes ijcCardRelease{
  0%{transform:translateY(1px) scale(.986)}
  62%{transform:translateY(-.4px) scale(1.002)}
  100%{transform:none}
}
@keyframes ijcIconRelease{
  0%{transform:translateY(1px) scale(.972)}
  68%{transform:translateY(-.4px) scale(1.003)}
  100%{transform:none}
}

/* Buttons acknowledge intent without altering their resting style or geometry. */
.motion-tactile{
  transition:
    scale 90ms cubic-bezier(.2,.7,.2,1),
    translate 110ms cubic-bezier(.2,.75,.2,1),
    filter 140ms ease !important;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.motion-tactile.motion-pressed,
.motion-tactile:active{
  scale:.97;
  translate:0 1px;
}
.motion-tactile.motion-releasing{animation:ijcButtonRelease 180ms cubic-bezier(.2,.82,.2,1)}
@keyframes ijcButtonRelease{
  0%{scale:.97;translate:0 1px}
  68%{scale:1.008;translate:0 -0.3px}
  100%{scale:1;translate:0 0}
}

/* Configurator navigation mirrors the Workbench app settle: fade + only 2px of travel. */
.config-panel.motion-step-in{animation:ijcStepIn 210ms cubic-bezier(.2,.75,.2,1) both}
@keyframes ijcStepIn{
  from{opacity:0;transform:translate3d(0,2px,0)}
  58%{opacity:1}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* Selected-state acknowledgement is local to the existing tick, never the layout. */
.choice.motion-selection-ack .choice-check{animation:ijcSelectionAck 190ms cubic-bezier(.2,.82,.2,1)}
@keyframes ijcSelectionAck{
  0%{transform:scale(.84);opacity:.55}
  64%{transform:scale(1.08);opacity:1}
  100%{transform:scale(1);opacity:1}
}

/* Filtered stock resolves like the Workbench registry: quiet opacity + 2px settle. */
.stock-vehicle.motion-stock-in{animation:ijcStockIn 190ms var(--ijc-motion-emphasised) both}
@keyframes ijcStockIn{
  from{opacity:.2;transform:translate3d(0,2px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* Existing rounded modals retain their styling; only the travel/tempo is normalised. */
.option-info-modal,
.change-choice-modal,
.enquiry-modal{
  transition:
    opacity 150ms ease,
    background-color 150ms ease,
    backdrop-filter 150ms ease,
    visibility 0s linear 150ms !important;
}
.option-info-modal.open,
.change-choice-modal.open,
.enquiry-modal.open{transition-delay:0s !important}
.option-info-card,
.change-choice-card,
.enquiry-card{
  transform:translate3d(0,5px,0) !important;
  opacity:0;
  transition:
    transform 180ms var(--ijc-motion-ease),
    opacity 150ms ease !important;
}
.option-info-modal.open .option-info-card,
.change-choice-modal.open .change-choice-card,
.enquiry-modal.open .enquiry-card{
  transform:translate3d(0,0,0) !important;
  opacity:1;
}

/* Native information rows get a quiet content resolve when opened. */
.info-list details[open] .info-copy,
.vip-details[open] .vip-details-body{
  animation:ijcDetailIn 180ms var(--ijc-motion-ease) both;
}
@keyframes ijcDetailIn{
  from{opacity:0;transform:translate3d(0,2px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

@media(prefers-reduced-motion:reduce){
  .reveal,
  .motion-sequence-item{
    opacity:1 !important;
    transform:none !important;
  }
  .motion-sequence.motion-sequence-in > .motion-sequence-item,
  .motion-card,
  .motion-card .choice-icon,
  .motion-tactile,
  .config-panel.motion-step-in,
  .choice.motion-selection-ack .choice-check,
  .stock-vehicle.motion-stock-in,
  .info-list details[open] .info-copy,
  .vip-details[open] .vip-details-body{
    animation:none !important;
    transition:none !important;
    transform:none !important;
    translate:none !important;
    scale:none !important;
    filter:none !important;
  }
  .option-info-modal,
  .change-choice-modal,
  .enquiry-modal,
  .option-info-card,
  .change-choice-card,
  .enquiry-card{
    transition:none !important;
  }
}
.autotrader-rating{text-decoration:none;cursor:pointer}
.autotrader-rating .rating-link{margin-left:.25em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.autotrader-rating:hover,.autotrader-rating:focus-visible{border-color:#fff!important;background:rgba(0,0,0,.72)!important;outline:3px solid rgba(255,255,255,.28)}
.stock-modal-save{display:grid;gap:7px;margin:16px 0 0}
.stock-modal-save[hidden]{display:none}
.stock-modal-save p{margin:0;color:var(--muted);font-size:var(--type-paragraph);text-align:center}

/* Preserve the compact v53 mobile step labels without using a one-off text size. */
@media(max-width:620px){
  .config-progress button{overflow:hidden;color:transparent;text-indent:-9999px}
  .config-progress button::after{color:var(--ink);line-height:1;text-indent:0}
  .config-progress button.active::after{color:#fff}
}