/* =========================================
   MOBILE: unified band spacing for Intro,
   Details, Autonomy and Configurator
========================================= */
@media (max-width: 767px) {
  /* 1) Section shells: no extra margins/padding */
  .ddt-intro,
  #details.ddt-cards,
  #autonomy.ddt-autonomy,
  #configurator.ddt-configurator {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .ddt-intro > .wrap,
  #details.ddt-cards > .wrap,
  #autonomy.ddt-autonomy > .wrap,
  #configurator.ddt-configurator > .wrap {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* 2) Intro: hero → copy → Details gap */
  .ddt-intro .copy {
    padding-block-end: var(--band-gap-mobile);
  }

  /* 3) Details: carousel → Autonomy gap */
  #details.ddt-cards {
    --cards-gap-below: var(--band-gap-mobile);
    margin-block-end: var(--cards-gap-below);
  }

  /* 4) Autonomy: tiles + safety grid → Configurator gap */
  #autonomy.ddt-autonomy .safety-grid {
    margin-bottom: var(--band-gap-mobile);
    padding-bottom: 0;
  }

  /* 5) Configurator: small breathing room at the top, but no extra wrapper margins */
  #configurator.ddt-configurator {
    padding-top: clamp(8px, 3vw, 14px);
    margin-top: 0;
  }
  #configurator.ddt-configurator .configurator-head {
    margin-top: 0;
    padding-top: 0;
  }
}
/*=========================================================
  Dog & Drive • Product Layout + Enquiry Form (SCOPED)
  – Unified 1.5s theme fade via --dnd-transition-duration
  – Carousel participates in the theme fade (incl. margins)
  – 4px system corners (global + Autonomy)
  – Scroll overlay behind content (z-index safe)
=========================================================*/

/* ---------- Tokens ---------- */
:root{
  --font-sans:"neue-haas-grotesk-display","Neue Haas Grotesk Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;

  --maxw:1280px;
  --gutter:24px;

  --space-sm:clamp(12px,1.6vw,20px);
  --space-md:clamp(24px,3vw,48px);
  --space-lg:clamp(56px,7vw,120px);
  --space-xl:clamp(80px,12vw,160px);

  /* unified corners */
  --radius:4px;
  --btn-radius:12px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --line:#e9ecef;
  --bg:#fff;
  --text:#0c0c0c;
  --muted:#5f6368;

  --fly-h:42px;
  --fly-bg:rgba(255,255,255,.78);
  --fly-stroke:rgba(0,0,0,.08);

  --edge:50px;

  /* Alignment anchor */
  --first-card-left: 250px;

  --band-gap-desktop: clamp(64px, 12vw, 144px);
  --band-gap-mobile: clamp(24px, 7vw, 40px);
  --intro-pad-top: clamp(14px, 2.6vw, 32px);
  --intro-pad-bottom: clamp(56px, 7vw, 110px);
  --heading-weight: 560;

  /* THEME TRANSITION — single source of truth (1.5s) */
  --dnd-transition-duration: 1.5s;

  /* Shared transition for theme surface fades */
  --surface-transition: background-color var(--dnd-transition-duration) cubic-bezier(.2,.6,.2,1);

  /* Theme tokens (start light) */
  --invert: 0;
  --overlay: 0; /* JS drives exact final dark */
  --dnd-bg-color: var(--bg, #ffffff);
  --dnd-text-color: var(--text, #0c0c0c);
  --dnd-link-color: #0a6cff;

  /* Dark palette — matte near-black */
  --dnd-bg-color-dark: #121212;
  --dnd-text-color-dark: #f5f5f5;
  --dnd-link-color-dark: #9ec4ff;

  /* Tesla stats divider */
  --stat-divider-light: #e0e0e0;
  --stat-divider-dark: rgba(255,255,255,.25);

  /* Carousel end inset (defaults to left inset) */
  --right-inset: var(--left-inset, 90px);

  /* Motion tokens (fast, minimal) */
  --motion-short: .20s;
  --motion-mod: .32s;
  --motion-long: .48s;
  --ease-std: cubic-bezier(.22,.61,.36,1);
  --stagger: 70ms;
}

/* Enforce Adobe font globally */
*,*::before,*::after{
  font-family:var(--font-sans)!important
}

/* Prefer our family inside layout areas */
.ddt-flybar,.ddt-sticky,.ddt-hero,.ddt-intro,.ddt-autonomy,.ddt-specs,
#dd-enquiry-for-product-bgfix{
  font-family:var(--font-sans)!important
}

/* Keep the family stable while JS toggles theme classes */
body.ddp-layout-active,
body.ddp-layout-active #page,
body.ddp-layout-active .site{
  font-family:var(--font-sans);
  font-synthesis:none;
}

/* Basic page */
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  color:var(--text);
  background-color:var(--bg);
  font:400 16px/1.6 var(--font-sans);
}
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter)
}
img,video{
  border-radius:var(--radius)
}
.ddt-hero .media img,.ddt-hero .media video{
  border-radius:0
}

/* Desktop-only: enforce 16:9 box for the desktop CAD image
   Leaves mobile rules untouched (mobile image class remains unchanged). */
@media (min-width: 1024px) {
  .chassis-model--desktop{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
  }
}

/* Headings (locked) */
h1,h2,h3{
  font-weight:var(--heading-weight);
  line-height:1.15;
  margin:.2em 0 .35em;
  letter-spacing:-.015em;
  font-synthesis:none;
  font-family:var(--font-sans);
}
h1{
  font-weight:520
}
body.dnd-theme-inverted h1{
  font-weight:500
}
h1{
  font-size:clamp(22px,3.5vw,45px);
  line-height:1.08;
  letter-spacing:-.02em;
  margin:.12em 0 .24em;
}
h2{font-size:clamp(26px,4.4vw,48px)}
h3{font-size:clamp(20px,3.2vw,28px)}
h1 + p, h2 + p, h3 + p{
  margin-top:.25rem
}
.wrap:first-of-type > h1{
  margin-block-start: calc(.12em * 1.1)
}

/* Container helper */
.cq{
  container-type:inline-size;
  container-name:section;
  scroll-margin-top:84px
}

/* =======================================================
   THEME FADE (driven by JS coverage)
======================================================= */

/* Overlay BEHIND content — matte dark */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:transparent;
  opacity:0;
  transition:none;
  z-index:0;
  display:none;
}
@supports (will-change: opacity){
  body.dnd-animating::before{
    will-change:opacity;
  }
}

/* Lift content above overlay */
#page,.site,header,main,footer,.elementor,.elementor-location-header,.elementor-location-footer{
  position:relative;
  z-index:1;
}

/* Variable-driven UI swap */
html,body{
  transition:
    background-color var(--dnd-transition-duration) cubic-bezier(.2,.6,.2,1),
    color var(--dnd-transition-duration) cubic-bezier(.2,.6,.2,1);
}
body{
  background-color:var(--dnd-bg-color);
  color:var(--dnd-text-color);
}
a{
  color:var(--dnd-link-color);
  transition: color var(--dnd-transition-duration) cubic-bezier(.2,.6,.2,1);
}

/* Global dark flip */
body.dnd-theme-inverted{
  --dnd-bg-color:var(--dnd-bg-color-dark);
  --dnd-text-color:var(--dnd-text-color-dark);
  --dnd-link-color:var(--dnd-link-color-dark);
}

/* Return to LIGHT as soon as carousel captions enter view on upward scroll. */
@supports(selector(:has(*))){
  body.dnd-theme-inverted.dnd-scroll-up:has(#details .ddt-carousel__meta.reveal.in-view),
  body.dnd-theme-inverted.dnd-scroll-up:has(#details .ddt-card-body.reveal.in-view),
  body.dnd-theme-inverted.dnd-scroll-up:has(#details .ddt-carousel__desc.reveal.in-view){
    --overlay:0;
    --dnd-bg-color:var(--bg);
    --dnd-text-color:var(--text);
    --dnd-link-color:var(--dnd-link-color);
  }

  /* Fallback: regardless of scroll direction */
  body.dnd-theme-inverted:has(#details .ddt-carousel__meta.reveal.in-view),
  body.dnd-theme-inverted:has(#details .ddt-card-body.reveal.in-view),
  body.dnd-theme-inverted:has(#details .ddt-carousel__desc.reveal.in-view){
    --overlay:0;
    --dnd-bg-color:var(--bg);
    --dnd-text-color:var(--text);
    --dnd-link-color:var(--dnd-link-color);
  }
}

svg[aria-hidden="true"]{
  stroke:currentColor;
  fill:none
}

@media (prefers-reduced-motion:reduce){
  body::before,html,body,a{
    transition:none!important
  }
}

/* ---------- Flybar ---------- */
.ddt-flybar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  height:calc(var(--fly-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background-color:var(--fly-bg);
  color:var(--text);
  border-bottom:1px solid var(--fly-stroke);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  transform:translateY(calc(-100% - env(safe-area-inset-top)));
  transition:transform .28s ease,box-shadow .2s ease,background-color .2s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
  pointer-events:none;
  border-radius:0;
}
.ddt-flybar.is-visible{
  transform:translateY(0);
  pointer-events:auto;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.admin-bar .ddt-flybar{
  top:32px
}
.ddt-flybar__wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
  height:var(--fly-h);
}
.ddt-flybar__row{
  height:100%;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
}
.ddt-flybar__brand{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:inherit;
  white-space:nowrap;
}
.ddt-flybar__logo{
  width:22px;
  height:22px;
  display:block;
  border-radius:4px;
}
.ddt-flybar__text{
  font-weight:600
}
.ddt-flybar__cta{
  display:inline-block;
  border:1px solid currentColor;
  border-radius:4px;
  padding:.46rem .9rem;
  line-height:1;
  text-decoration:none;
  color:inherit;
  font-weight:600;
  box-shadow:0 0 0 4px rgba(0,0,0,.08);
}
.ddt-flybar__cta:hover,
.ddt-flybar__cta:focus{
  background:var(--text);
  color:#fff;
  outline:2px solid transparent;
  outline-offset:2px;
}
@media (max-width:380px){
  .ddt-flybar__brand{font-size:.95rem}
  .ddt-flybar__cta{font-size:.95rem; padding:.38rem .8rem}
}
@media (prefers-reduced-motion:reduce){
  .ddt-flybar{ transition:none }
}
.ddt-flybar.is-invert{
  background-color:rgba(0,0,0,.72);
  color:#fff;
  border-color:rgba(255,255,255,.14);
}
.ddt-flybar.is-invert .ddt-flybar__cta{
  border-color:#fff;
  color:#fff;
}
.ddt-flybar.is-invert .ddt-flybar__cta:hover,
.ddt-flybar.is-invert .ddt-flybar__cta:focus{
  background:#fff;
  color:#000;
}

/* ---------- Motion / Buttons / Sticky ---------- */
.reveal{
  opacity:0;
  transform:translateY(12px)
}
.reveal.in-view{
  opacity:1;
  transform:none;
  transition:
    opacity var(--motion-mod) var(--ease-std),
    transform var(--motion-mod) var(--ease-std);
  /* clamp stagger to first 3 items */
  transition-delay: calc( min(var(--i,0), 3) * var(--stagger,70ms) );
}
@media (prefers-reduced-motion:reduce){
  .reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}
.ddt-btn{
  display:inline-block;
  border:1px solid currentColor;
  border-radius:var(--btn-radius);
  padding:.6rem 1.1rem;
  text-decoration:none;
  color:inherit;
  white-space:nowrap;
  font-weight:500;
}
.ddt-btn:hover,
.ddt-btn:focus{
  background:var(--text);
  color:#fff;
  outline:2px solid transparent;
  outline-offset:2px;
}

.ddt-sticky{
  position:sticky;
  top:0;
  z-index:50;
  background-color:var(--bg);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
  transition:box-shadow .2s ease;
}
.ddt-sticky.is-elev{
  box-shadow:var(--shadow)
}
.ddt-sticky .bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:.6rem var(--gutter);
}
.ddt-sticky.is-cta-only .bar{
  justify-content:center
}
.admin-bar .ddt-sticky{
  top:32px
}

/* ---------- Hero ---------- */
.ddt-hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:min(100vh,100svh);
  padding:var(--space-lg) 0;
  color:#fff;
  background:#121212;
}
.ddt-hero h1,
.ddt-hero h2,
.ddt-hero h3,
.ddt-hero p,
.ddt-hero .ddt-btn{
  color:#fff
}
.ddt-hero h1{
  color:#dcdcdc;
  font-weight:520;
}
.ddt-hero .media{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
}
.ddt-hero .media img,
.ddt-hero .media video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  max-width:none;
  max-height:none;
  border-radius:0!important;
}
.ddt-hero .overlay{
  position:relative;
  z-index:1;
  text-align:center;
  padding:var(--space-md) var(--gutter);
}
.ddt-hero .overlay .cta{
  margin-top:var(--space-sm);
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

.ddt-hero--natural .media{
  position:absolute;
  inset:0
}
.ddt-hero--natural .media img,
.ddt-hero--natural .media video{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------- Intro / Wide Image / Copy ---------- */
.ddt-intro,.ddt-autonomy,.ddt-specs{
  container-type:inline-size;
  container-name:section;
}
.ddt-intro{ --edge:100px }

.ddt-intro .image-wide{
  margin: clamp(24px,5vw,56px) 0 clamp(16px,3vw,32px);
  position:relative;
  overflow:visible; /* allow full 16:9 frame; no cropping */
  border-radius:var(--radius);
  width:calc(100vw - (var(--edge) * 2));
  max-width:none!important;
  margin-left:calc(50% - 50vw + var(--edge))!important;
  margin-right:calc(50% - 50vw + var(--edge))!important;
}
.ddt-intro .image-wide img{
  display:block;
  width:100%;
  height:auto;
  /* Intro hero: soften corners */
  border-radius:4px;
}
.ddt-intro,
.ddt-intro .wrap{
  overflow:visible!important
}
.ddt-intro .copy{
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.ddt-intro .copy h2{
  font-size:clamp(30px,3.8vw,36px);
  font-weight:560;
  letter-spacing:-.02em;
  line-height:1.2;
  max-width:42ch;
  margin:clamp(40px,6vw,72px) 0 clamp(24px,3vw,36px);
}

@media (min-width: 701px) {
  .ddt-intro .image-wide{
    /* Desktop: reduce gap to text by ~75% */
    margin-bottom:clamp(4px,0.75vw,8px);
  }
  .ddt-intro .copy {
    margin-left: calc(50% - 50vw + var(--edge));
    margin-right: calc(50% - 50vw + var(--edge));
    padding-inline: 0;
    /* Small gap between Defender image and heading */
    padding-block-start: var(--space-sm);
    /* Heading → carousel gap (match cards → next section) */
    padding-block-end: clamp(64px, 10vw, 160px);
    max-width: none !important;
  }
  .ddt-intro .copy h2 {
    margin-block: 0;
  }
}

@media (max-width:700px){
  .ddt-intro .copy{
    margin:0;
    /* Use only the .wrap gutter so text aligns with hero/image edges */
    padding-inline:0;
    padding-block-start:clamp(12px,4vw,24px);
    padding-block-end:clamp(28px,8vw,48px);
  }
}
.ddt-intro .copy p,
.ddt-intro .copy .lead{
  margin:.25rem 0 0;
  color:var(--muted);
  font-weight:400;
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.55;
}
.ddt-intro .copy p:last-child{
  margin-bottom:0
}
.ddt-intro .elementor-widget-spacer,
.ddt-intro .elementor-widget-divider,
.ddt-intro .elementor-widget-divider .elementor-divider-separator{
  margin:0 !important;
  background-color:transparent !important;
  transition: background-color var(--dnd-transition-duration) cubic-bezier(.2,.6,.2,1);
  height:clamp(8px,2.4vw,18px) !important;
}
@media (max-width:700px){
  .ddt-intro .elementor-widget-spacer,
  .ddt-intro .elementor-widget-divider,
  .ddt-intro .elementor-widget-divider .elementor-divider-separator{
    height:0 !important;
  }
}

/* ---------- Stats ---------- */
#highlights .wrap {
  max-width: 960px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
}
#highlights .stats-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(32px, 6vw, 80px);
  list-style: none;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  border:0 !important;
}
#highlights .stat {
  text-align: center;
  padding-block: clamp(14px, 3vw, 32px);
  border-left:0 !important;
  border-right:0 !important;
}
#highlights .k {
  font-size: clamp(28px, 4vw, 56px) !important;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.14em;
}
#highlights .k .unit {
  font-size: 0.5em;
  white-space: nowrap;
}
#highlights .s {
  margin-top: 0.5rem;
  font-size: clamp(12px, 0.9vw, 15px) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#highlights .sub {
  margin-top: 0.2rem;
  font-size: clamp(11px, 0.85vw, 14px);
  color: rgba(0,0,0,0.55);
}
@media (max-width: 900px) {
  #highlights .stats-grid{
    grid-template-columns:1fr;
    justify-items:center;
  }
  #highlights .k {
    font-size: clamp(28px, 10vw, 48px) !important;
  }
}
body.dnd-theme-inverted #highlights .sub {
  color: rgba(255,255,255,0.55);
}

.ddt-stats{
  padding-block: var(--space-xl);
  margin-block: 0;
}
.ddt-stats .wrap{
  max-width:960px;
  margin-inline:auto;
}
.ddt-stats .stat::marker{ content:none }
.ddt-stats .stat{
  position:relative;
  padding-inline:clamp(16px,4vw,28px);
  padding-block:0;
  border:0;
  text-align:center;
}
.ddt-stats .k{
  font-weight:600;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  font-size:clamp(52px,10vw,80px);
  line-height:1.05;
}
.ddt-stats .k .unit{
  font-size:.52em;
  font-weight:400;
  margin-left:.15em;
  position:relative;
  top:-.06em;
}
.ddt-stats .s{
  margin-top:.35rem;
  font-weight:400;
  font-size:clamp(13px,1.7vw,15px);
}
.ddt-stats .sub{
  margin-top:.15rem;
  color:var(--muted);
  font-size:clamp(11px,1.5vw,13px);
  font-weight:400;
}
#highlights .k{
  white-space:nowrap;
  display:inline-flex;
  align-items:baseline;
  gap:.14em;
  font-size:clamp(52px,10vw,80px);
  font-weight:600;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
@media (max-width:700px){
  #highlights .k{ font-size:clamp(32px,9vw,40px) }
}
@media (min-width:900px){
  .ddt-stats{
    padding-block: calc(var(--space-xl) * 0.8);
  }
  .ddt-stats .stats-grid{
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    column-gap: clamp(32px, 6vw, 80px);
  }
  .ddt-stats .stat{
    text-align: center;
    padding-inline: clamp(24px, 4vw, 48px);
    border: 0 !important;
  }
  .ddt-stats .stats-grid::before,
  .ddt-stats .stats-grid::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--stat-divider-light);
  }
  body.dnd-theme-inverted .ddt-stats .stats-grid::before,
  body.dnd-theme-inverted .ddt-stats .stats-grid::after{
    background: var(--stat-divider-dark);
  }
  .ddt-stats .stats-grid::before{
    left: 33.333%;
    transform: translateX(-50%);
  }
  .ddt-stats .stats-grid::after{
    left: 66.666%;
    transform: translateX(-50%);
  }
}
@media (max-width:899px){
  .ddt-stats .stats-grid{
    display:grid;
    grid-template-columns:1fr;
    row-gap:clamp(18px, 6vw, 28px);
    grid-auto-flow:row;
    grid-auto-rows:auto;
    justify-items:center;
  }
  .ddt-stats .stat{
    text-align:center;
    padding-inline:clamp(16px,4vw,24px);
    display:block;
    width:100%;
  }
  .ddt-stats .stats-grid::before,
  .ddt-stats .stats-grid::after{
    content:none;
    display:none;
  }
}

/* DD stats vertical dividers (theme-aware) */
.ddt-stats--tesla{
  --stat-divider: var(--stat-divider-light)
}
body.dnd-theme-inverted .ddt-stats--tesla{
  --stat-divider: var(--stat-divider-dark)
}
.ddt-stats--tesla .stat{
  position:relative;
  padding-inline:clamp(24px, 4vw, 48px);
  border:0;
  text-align:center;
}
.ddt-stats--tesla .stat + .stat{
  border:0;
}
@media (max-width:900px){
  .ddt-stats--tesla .stat{
    padding-inline:1.5rem
  }
  /* Mobile: kill vertical strokes and use a horizontal divider instead */
  .ddt-stats--tesla .stat + .stat{
    border-top:0;
    border-left:0 !important;
  }
  #highlights.ddt-stats--tesla .stat + .stat{
    border-top:1px solid rgba(0,0,0,0.08);
  }
  body.dnd-theme-inverted #highlights.ddt-stats--tesla .stat + .stat{
    border-top:1px solid rgba(255,255,255,0.16);
  }
  .ddt-stats--tesla .stat::before,
  .ddt-stats--tesla .stat::after{
    content:none !important;
    display:none !important;
  }
}

/* ---------- Cards / Carousel ---------- */
.ddt-cards{
  --gap:clamp(16px,2vw,24px);
  --left-inset:90px;
  --cards-gap-below:clamp(64px,10vw,160px);
  /* NO background on generic class - #details override handles it */
  background: transparent;
  color: var(--dnd-text-color);
  transition: color var(--dnd-transition-duration) cubic-bezier(.2,.6,.2,1);
  isolation:isolate;
  margin-block-end:var(--cards-gap-below);
  display: flow-root; /* prevents margin-collapse showing a white ancestor */
}
@media (min-width:701px){
  #details.ddt-cards{
    --left-inset: var(--first-card-left);
  }
}
.ddt-cards.is-tight{
  --cards-gap-below:clamp(32px,6vw,72px)
}

/* ---------- Divider video (desktop/mobile swap) ---------- */
.dd-divider-video{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
}
.dd-divider-video__frame{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.dd-divider-video__frame > video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.dd-video-mobile{ display:none }

@media (max-width:700px){
  .dd-divider-video__frame{ padding-top:100% }
  .dd-video-desktop{ display:none }
  .dd-video-mobile{ display:block }
}

/* Nuke stray local backgrounds inside the carousel */
.ddt-cards .wrap,
.ddt-cards [class*="has-background"],
.ddt-cards .wp-block-group__inner-container,
.ddt-cards .elementor-section,
.ddt-cards .elementor-container,
.ddt-cards .elementor-widget-wrap{
  background:transparent!important
}

/* White-band killers (spacers/dividers) */
.ddt-cards .elementor-widget-spacer,
.ddt-cards .wp-block-spacer,
.ddt-cards .elementor-divider,
.ddt-cards .elementor-widget-divider .elementor-divider-separator{
  background-color: var(--dnd-bg-color) !important;
  transition: background-color var(--dnd-transition-duration) cubic-bezier(.2,.6,.2,1);
}

/* Hard-coded whites to theme surface */
.ddt-cards [style*="background:#fff"],
.ddt-cards [style*="background:#ffffff"],
.ddt-cards [style*="background-color:#fff"],
.ddt-cards [style*="background-color:#ffffff"]{
  background-color: var(--dnd-bg-color) !important;
}

/* Also let the immediate next section match, so no gutter flash */
.ddt-cards + .elementor-section,
.ddt-cards + .elementor-element,
.ddt-cards + .elementor-element.e-con-full,
.ddt-cards + section,
.ddt-cards + .wp-block-group{
  background: transparent !important;
}
#details.ddt-cards + .elementor-section,
#details.ddt-cards + .elementor-element,
#details.ddt-cards + .elementor-element.e-con-full,
#details.ddt-cards + .wp-block-group{
  margin-top:0!important;
  padding-top:0!important;
  background: transparent !important;
}

/* Media placeholders */
.ddt-cards img,
.ddt-cards video{
  background-color: var(--dnd-bg-color)
}

/* Smooth fade-in for lazyloaded media in key sections */
#details img.lazyload,
#details video.lazyload,
#autonomy img.lazyload,
#autonomy video.lazyload,
.ddt-configurator img.lazyload,
.ddt-configurator video.lazyload{
  opacity:0;
  transition:opacity .35s var(--ease-std);
}
#details img.lazyloaded,
#details video.lazyloaded,
#autonomy img.lazyloaded,
#autonomy video.lazyloaded,
.ddt-configurator img.lazyloaded,
.ddt-configurator video.lazyloaded{
  opacity:1;
}

.ddt-cards .dd-flex-bottom-a{
  display:flex;
  gap:var(--gap);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;
  scroll-snap-type:x mandatory;
  scroll-snap-stop:always;
  touch-action:pan-x pan-y pinch-zoom;
  outline:none;
  -webkit-tap-highlight-color:transparent;
  padding-block-end:max(10px,env(safe-area-inset-bottom));
  scrollbar-width:none;
  scrollbar-gutter:stable both-edges;
}
.ddt-cards .dd-flex-bottom-a::-webkit-scrollbar{
  height:0;
  background:transparent;
  display:none;
}
.ddt-cards .dd-flex-bottom-a:focus-visible{
  outline:2px solid rgba(0,0,0,.28);
  outline-offset:4px;
  border-radius:8px;
}

/* START/END inset spacers */
@media (min-width:701px){
  .ddt-cards.has-left-inset .dd-flex-bottom-a::before{
    content:"";
    display:block;
    flex:0 0 var(--left-inset);
    inline-size:var(--left-inset);
  }
  .ddt-cards.has-right-inset .dd-flex-bottom-a::after{
    content:"";
    display:block;
    flex:0 0 var(--right-inset);
    inline-size:var(--right-inset);
  }
  .ddt-cards.has-left-inset .dd-flex-bottom-a{
    scroll-padding-inline-start:var(--left-inset);
    scroll-padding-left:var(--left-inset);
  }
}

/* RTL swap */
@media (min-width:701px){
  [dir="rtl"] .ddt-cards.has-left-inset .dd-flex-bottom-a::before{ content:none }
  [dir="rtl"] .ddt-cards.has-left-inset .dd-flex-bottom-a::after{
    content:"";
    display:block;
    flex:0 0 var(--left-inset);
    inline-size:var(--left-inset);
  }
  [dir="rtl"] .ddt-cards.has-right-inset .dd-flex-bottom-a::after{ content:none }
  [dir="rtl"] .ddt-cards.has-right-inset .dd-flex-bottom-a::before{
    content:"";
    display:block;
    flex:0 0 var(--right-inset);
    inline-size:var(--right-inset);
  }
}

.ddt-cards .dd-block-a{
  flex:0 0 auto;
  scroll-snap-align:center;
  border-radius:var(--radius);
  overflow:visible;
  background:transparent;
  box-shadow:none;
  display:block;
  position:relative;
}
#details.ddt-cards .dd-block-a{
  /* Ensure all corners render as 4px on desktop cards */
  border-radius:var(--radius);
  overflow:hidden;
}
#details.ddt-cards .dd-block-a > img{
  border-radius:inherit;
}
.ddt-cards .dd-block-a > img{
  display:block;
  width:100%;
  height:auto!important;
  aspect-ratio:21/9;
  object-fit:cover;
  object-position:center;
  -webkit-user-drag:none;
  user-select:none;
  border-radius:var(--radius);
}
@media (max-width:700px){
  .ddt-cards .dd-block-a{
    flex-basis:100%;
    min-height:clamp(260px,85vw,520px);
  }
}
@media (min-width:701px){
  .ddt-cards .dd-block-a{
    flex-basis:calc(((100% - var(--gap)) / 1.6666667) * .85);
  }
}

/* #details: 4:5 cards on mobile */
@media (max-width:700px){
  #details.ddt-cards .dd-block-a > img{
    aspect-ratio:4 / 5;
  }
}

@media (max-width:700px){
  #details.ddt-cards{
    --cards-gap-below:clamp(8px,4vw,16px)
  }
  #details.ddt-cards + .elementor-section,
  #details.ddt-cards + .wp-block-group{
    margin-top:0!important;
    padding-top:0!important;
    background:transparent!important;
  }
}

/* Slide captions kept visible */
.ddt-cards .ddt-card-body{
  margin:0;
  padding-block-start:var(--space-sm);
  padding-inline:0;
  max-width:min(66ch,100%);
  font-family:var(--font-sans);
  position:static!important;
  inset:auto!important;
  transform:none!important;
  display:block!important;
}

/* Card title */
.ddt-cards .ddt-card-title{
  margin:.1rem 0 .2rem;
  font-weight:var(--heading-weight,560);
  font-size:clamp(20px, 2.1vw, 28px);
  letter-spacing:-0.02em;
  line-height:1.2;
}

/* Card description: ALWAYS show from data-desc via ::after */
.ddt-cards .dd-block-a{ position: relative; }

/* Hide original .ddt-card-desc paragraph */
.ddt-cards .ddt-card-body .ddt-card-desc{
  display: none !important;
}

/* Display data-desc as ::after pseudo-element for guaranteed visibility */
.ddt-cards .dd-block-a::after{
  content: attr(data-desc);
  display: block;
  margin: .25rem 0 0;
  padding: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.55;
  max-width: min(66ch, 100%);
  white-space: normal;
  font-family: var(--font-sans);
  transition: color var(--dnd-transition-duration) cubic-bezier(.2,.6,.2,1);
}
body.dnd-theme-inverted .ddt-cards .dd-block-a::after{
  color: #d6d6d6;
}

@media (max-width:700px){
  .ddt-cards:not(#details) .dd-flex-bottom-a{
    display:block;
    overflow-x:visible;
    scroll-snap-type:none;
    scroll-snap-stop:unset;
    scroll-padding:0;
    gap:0;
    touch-action:auto;
    -webkit-overflow-scrolling:auto;
    overscroll-behavior-x:auto;
    padding-block-end:0;
    scrollbar-width:auto;
  }
  .ddt-cards:not(#details) .dd-block-a{
    width:100%;
    max-width:100%;
    margin:0 0 var(--space-md);
    border-radius:var(--radius);
    overflow:hidden;
    scroll-snap-align:unset;
  }
  .ddt-cards:not(#details) .dd-block-a:last-child{
    margin-bottom:0
  }
  .ddt-cards:not(#details) .dd-block-a > img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:inherit;
  }
  .ddt-cards:not(#details) .dd-block-a::before{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:55%;
    background:linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,0));
    pointer-events:none;
    border-bottom-left-radius:inherit;
    border-bottom-right-radius:inherit;
    z-index:0;
  }
  .ddt-cards:not(#details) .ddt-card-body{
    position:absolute !important;
    inset:auto 0 0 0 !important;
    padding:clamp(16px,4vw,22px) clamp(18px,4vw,28px) clamp(52px,11vw,64px) !important;
    color:#fff;
    background:transparent;
    z-index:1;
    text-shadow:0 6px 20px rgba(0,0,0,.35);
  }
  .ddt-cards:not(#details) .ddt-card-title{
    color:#fff
  }
  .ddt-cards:not(#details) .dd-block-a::after{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:0 clamp(18px,4vw,28px) clamp(18px,5vw,32px);
    color:#f5f5f5;
    z-index:1;
  }
  body.dnd-theme-inverted .ddt-cards .dd-block-a::after{
    color:#f8f8f8
  }
}

/* Global carousel meta (created by JS) */
.ddt-cards .ddt-carousel__meta{
  margin-top:clamp(8px, 1.6vw, 14px);
  max-width:min(66ch,100%);
  display:block!important;
  visibility:visible!important;
}
.ddt-cards .ddt-carousel__title{
  margin:.1rem 0 .2rem;
  font-weight:var(--heading-weight,560);
  font-size:clamp(20px, 2.1vw, 28px);
  letter-spacing:-0.02em;
  line-height:1.2;
}
.ddt-cards .ddt-carousel__desc{
  margin:.25rem 0 0;
  color:var(--muted);
  font-size:clamp(15px, 1.5vw, 20px);
  line-height:1.55;
  white-space:normal;
}

/* Heading/body colors inside carousel handled by unified surface above */
body.dnd-theme-inverted .ddt-cards .elementor-heading-title,
body.dnd-theme-inverted .ddt-cards .ddt-card-body h1,
body.dnd-theme-inverted .ddt-cards .ddt-card-body h2,
body.dnd-theme-inverted .ddt-cards .ddt-card-body h3{
  color:#fff !important;
}

/* Dots & scrollbars */
.ddt-cards .dd-mobile-dots{
  display:none!important
}
.ddt-cards .dd-flex-bottom-a{
  -webkit-mask-image:none!important;
  mask-image:none!important
}

@media (hover:hover) and (pointer:fine){
  .ddt-cards .dd-flex-bottom-a{
    scrollbar-width:thin;
    scrollbar-color:rgba(0,0,0,.35) transparent
  }
  .ddt-cards .dd-flex-bottom-a::-webkit-scrollbar{
    height:8px
  }
  .ddt-cards .dd-flex-bottom-a::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.28);
    border-radius:6px;
  }
  .ddt-cards .dd-flex-bottom-a::-webkit-scrollbar-track{
    background:transparent
  }
}

@supports (content-visibility:auto){
  .ddt-cards .dd-block-a{
    content-visibility:auto;
    contain-intrinsic-block-size:clamp(320px, 90vw, 560px);
  }
}
@media (prefers-reduced-motion:reduce){
  .ddt-cards .dd-flex-bottom-a{
    scroll-behavior:auto
  }
}

/* ---------- Carousel widget wrapper fix (scoped to this widget) ---------- */
.elementor-element-51e3e6e,
.elementor-element-51e3e6e > .elementor-widget-container {
  /* Keep wrapper in sync with the dark fade so no white strip shows */
  background: transparent !important;
}
.elementor-element-51e3e6e > .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
.elementor-element-51e3e6e + .elementor-widget-spacer,
.elementor-element-51e3e6e ~ .elementor-widget-spacer,
.elementor-element-51e3e6e + .elementor-widget-divider,
.elementor-element-51e3e6e ~ .elementor-widget-divider {
  background: transparent !important;
}

#details.ddt-cards + .elementor-widget-spacer,
#details.ddt-cards + .elementor-widget-divider,
.ddt-intro + .elementor-widget-spacer,
.ddt-intro + .elementor-widget-divider{
  display:none !important;
}

.ddt-intro + .elementor-section,
.ddt-intro + .elementor-element,
.ddt-intro + .elementor-element.e-con-full,
#details.ddt-cards + .elementor-section{
  margin:0 !important;
  padding:0 !important;
}
.ddt-intro + .elementor-section > .elementor-container,
.ddt-intro + .elementor-section .elementor-column,
.ddt-intro + .elementor-section .elementor-widget-wrap,
#details.ddt-cards + .elementor-section > .elementor-container,
#details.ddt-cards + .elementor-section .elementor-column,
#details.ddt-cards + .elementor-section .elementor-widget-wrap{
  margin:0 !important;
  padding:0 !important;
}

@supports (selector(:has(*))) {
  .elementor-section:has(#details),
  .elementor-column:has(#details),
  .elementor-container:has(#details) {
    background: transparent !important;
  }
}

/* ========== UNIFIED THEME SURFACE via .dd-surface-band ========== */

/* Both sections sit on ONE continuous 100vw band that fades together */
#details.ddt-cards,
#autonomy.ddt-autonomy,
#configurator.ddt-configurator {
  /* NO background-color here - rely on the surface band pseudo only */
  background: transparent !important;
  color: var(--dnd-text-color);
  position: relative;
  isolation: isolate;
  z-index: 0;
  transition: color var(--dnd-transition-duration) cubic-bezier(.2,.6,.2,1);
}

.dd-surface-band{
  position:relative;
  isolation:isolate;
  background:transparent;
  /* Full-bleed band lives on the wrapper, not the pseudo */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.dd-surface-band::before{
  content:"";
  position:absolute;
  inset:0;
  background-color:var(--dnd-bg-color);
  z-index:-1;
  pointer-events:none;
  transition:var(--surface-transition);
  will-change:background-color;
}

.dd-surface-band > #details.ddt-cards,
.dd-surface-band > .ddt-cards,
.dd-surface-band > .ddt-intro,
.dd-surface-band > .cq,
.dd-surface-band > #autonomy.ddt-autonomy,
.dd-surface-band > .ddt-autonomy,
.dd-surface-band > .ddt-configurator,
.dd-surface-band > #dde-car-enquiry-form-bgfix,
.dd-surface-band > #dd-enquiry-for-product-bgfix{
  margin:0 !important;
  background:transparent !important;
}

/* Intro band spacing: mobile/tablet tight, desktop uses band gap */
.ddt-intro{
  margin-block-start: 0;
  margin-block-end: 0;
}
@media (min-width:701px){
  .ddp-layout-active{
    --ddp-section-gap-desktop: calc(var(--band-gap-desktop) * 0.75);
  }
  .ddt-intro{
    margin-block-end: var(--ddp-section-gap-desktop);
  }
}

/* Disable legacy per-section pseudo backgrounds now that the surface band drives the fade */
#details.ddt-cards::before,
#autonomy.ddt-autonomy::before,
#configurator.ddt-configurator::before,
#dde-car-enquiry-form-bgfix::before,
#dd-enquiry-for-product-bgfix::before{
  content:none !important;
  display:none !important;
  background:transparent !important;
}

/* Reduce gap below carousel so autonomy sits tight on mobile; desktop uses band gap */
#details.ddt-cards{
  display: flow-root;
  margin-block-start: 0;
  margin-block-end: 0;
}
@media (min-width:701px){
  #details.ddt-cards{
    margin-block-end: var(--ddp-section-gap-desktop);
  }
}

/* Autonomy: zero top margin, sits right against details */
#autonomy.ddt-autonomy{
  display:flow-root;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
#autonomy.ddt-autonomy + [data-element_type="widget"]{
  margin-top:0 !important;
}
#autonomy.ddt-autonomy + .elementor-section,
#autonomy.ddt-autonomy + .elementor-element,
#autonomy.ddt-autonomy + .elementor-element.e-con-full,
.ddt-configurator + .elementor-section,
.ddt-configurator + .elementor-element,
.ddt-configurator + .elementor-element.e-con-full{
  background: transparent !important;
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Mobile: force configurator top margin to zero only on small screens */
@media (max-width:700px){
  #configurator.ddt-configurator{
    margin-top:0 !important;
  }
}

/* If Elementor inserts empty sections after autonomy/configurator, collapse them entirely */
#autonomy.ddt-autonomy + .elementor-section:empty,
#autonomy.ddt-autonomy + .elementor-element:empty,
#autonomy.ddt-autonomy + .elementor-element.e-con-full:empty,
.ddt-configurator + .elementor-section:empty,
.ddt-configurator + .elementor-element:empty,
.ddt-configurator + .elementor-element.e-con-full:empty{
  display:none !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
}

.elementor-element-2fb6634.e-con-full{
  background: transparent !important;
  /* Remove default flex gap between autonomy + configurator to avoid white band */
  gap:0 !important;
  row-gap:0 !important;
  overflow:visible !important;
  height:auto !important;
  min-height:0 !important;
}
.elementor-element-2fb6634.e-con-full > .elementor-widget-wrap{
  overflow:visible !important;
  height:auto !important;
  min-height:0 !important;
}
.elementor-element-415c6d4.e-con-full{
  background: transparent !important;
  overflow:visible !important;
  height:auto !important;
  min-height:0 !important;
}
.elementor-element-415c6d4.e-con-full > .elementor-widget-wrap{
  overflow:visible !important;
  height:auto !important;
  min-height:0 !important;
}

/* Ensure Elementor wrappers around our full-bleed bands inherit the active surface */
body.ddp-layout-active .elementor-section:has(#details),
body.ddp-layout-active .elementor-section:has(#autonomy),
body.ddp-layout-active .elementor-section:has(#configurator),
body.ddp-layout-active .elementor-section:has(#dde-car-enquiry-form-bgfix),
body.ddp-layout-active .elementor-section:has(#dd-enquiry-for-product-bgfix),
body.ddp-layout-active .elementor-element.e-con-full:has(#details),
body.ddp-layout-active .elementor-element.e-con-full:has(#autonomy),
body.ddp-layout-active .elementor-element.e-con-full:has(#configurator),
body.ddp-layout-active .elementor-element.e-con-full:has(#dde-car-enquiry-form-bgfix),
body.ddp-layout-active .elementor-element.e-con-full:has(#dd-enquiry-for-product-bgfix){
  background: transparent !important;
  margin-top:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* Keep fade timing in sync on the surfaces that should animate */
body.ddp-layout-active .elementor-section:has(#details),
body.ddp-layout-active .elementor-section:has(#autonomy),
body.ddp-layout-active .elementor-section:has(#configurator),
body.ddp-layout-active .elementor-element.e-con-full:has(#details),
body.ddp-layout-active .elementor-element.e-con-full:has(#autonomy),
body.ddp-layout-active .elementor-element.e-con-full:has(#configurator){
  transition: background-color var(--dnd-transition-duration) cubic-bezier(.2,.6,.2,1);
}

/* Fallback for browsers without :has — force wrappers around autonomy/configurator to share the surface */
.elementor-section:has(#autonomy),
.elementor-section:has(#configurator),
.elementor-element.e-con-full:has(#autonomy),
.elementor-element.e-con-full:has(#configurator){
  background: transparent !important;
  margin-top:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

@media (max-width:767px){
  /* Ensure full-bleed autonomy hero isn't offset by wrapper padding on mobile */
  .elementor-section:has(#autonomy),
  .elementor-element.e-con-full:has(#autonomy){
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* ==================== Mobile: fix Autonomy → Configurator gap (forceful) ==================== */
  body.ddp-layout-active .elementor-element-2ec705a,
  body.ddp-layout-active .elementor-element-2ec705a > .elementor-widget-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #autonomy.ddt-autonomy {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Kill any residual bottom margin on the Autonomy widget itself */
body.ddp-layout-active .elementor-element-2ec705a{
  margin-bottom:0 !important;
}

/* Also ensure the container above the carousel doesn’t add stray padding */
body.ddp-layout-active .elementor-element-d4752e9{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

#autonomy.ddt-autonomy + .elementor-widget-spacer,
#autonomy.ddt-autonomy + .elementor-widget-divider,
.ddt-configurator + .elementor-widget-spacer,
.ddt-configurator + .elementor-widget-divider{
  display:none !important;
  height:0 !important;
  margin-top:0 !important;
  padding-top:0 !important;
  background:transparent !important;
}

/* Text colors for carousel captions */
#details .ddt-card-title,
#details .ddt-carousel__title{
  color: var(--dnd-text-color) !important;
  transition: color var(--dnd-transition-duration) cubic-bezier(.2,.6,.2,1);
}
#details .ddt-card-desc,
#details .ddt-carousel__desc{
  color: var(--muted);
  transition: color var(--dnd-transition-duration) cubic-bezier(.2,.6,.2,1);
}
body.dnd-theme-inverted #details .ddt-card-title,
body.dnd-theme-inverted #details .ddt-carousel__title{
  color: #fff !important;
}
body.dnd-theme-inverted #details .ddt-card-desc,
body.dnd-theme-inverted #details .ddt-carousel__desc{
  color: #d6d6d6 !important;
}

/* Autonomy text colors */
#autonomy h2,
#autonomy h3,
#autonomy p{
  color: var(--dnd-text-color);
  transition: color var(--dnd-transition-duration) cubic-bezier(.2,.6,.2,1);
}
body.dnd-theme-inverted #autonomy h2,
body.dnd-theme-inverted #autonomy h3,
body.dnd-theme-inverted #autonomy p{
  color: #f5f5f5;
}

/* Safe image placeholder */
#details img,
#details video,
#autonomy img,
#autonomy video{
  background-color: var(--dnd-bg-color);
}

/* AUTONOMY – 3D Scan / CAD split */
.ddt-autonomy{
  --aut-bg:#ffffff;
  --aut-card-bg:#ffffff;
  --aut-card-border:rgba(0,0,0,.10);
  --aut-card-shadow:0 14px 34px rgba(0,0,0,.08);
  --aut-radius:4px;
  --aut-pad:clamp(144px,16vw,240px);
  --line-dark:rgba(0,0,0,.12);

  /* NEW: single source of truth for tile geometry (desktop defaults) */
  --aut-tile-min-height:clamp(160px,18vh,190px);
  --aut-tile-pad-block:clamp(24px,3vw,32px);
  --aut-tile-pad-inline:clamp(26px,3.2vw,36px);

  /* Colors handled by unified surface above - NO background here */
  background: transparent !important;
  padding-inline: 0;

  /* Desktop/tablet: restore original bottom padding */
  padding-top: 0;
  padding-bottom: clamp(16px,3vw,32px);
  margin-block-end:0;
}
@media (max-width:767px){
  .ddt-autonomy{
    padding-top:clamp(10px,6vw,24px);
    /* Mobile: remove bottom gap entirely */
    padding-bottom:0;

    /* Mobile-specific values for tiles */
    --aut-tile-min-height:auto;
    --aut-tile-pad-block:clamp(16px,4vw,20px);
    --aut-tile-pad-inline:clamp(16px,4vw,20px);
  }
}

/* Transparent inner wrappers */
.ddt-autonomy .wrap,
.ddt-autonomy [class*="has-background"],
.ddt-autonomy .wp-block-group__inner-container{
  background:transparent!important
}

/* Heading - calm, minimal, aligned with tile left edges */
.ddt-autonomy .autonomy-title{
  font-size:clamp(30px,3.8vw,36px);
  font-weight:560;
  letter-spacing:-.02em;
  line-height:1.2;
  max-width:42ch;
  margin:clamp(40px,6vw,72px) 0 clamp(24px,3vw,36px);
}

/* Desktop: larger breathing room and alignment */
@media (min-width:1024px){
  .ddt-autonomy .autonomy-title{
    padding-left:0;
    margin:clamp(64px,8vw,96px) 0 clamp(32px,4vw,48px);
    max-width:var(--aut-tiles-max, 840px);
    margin-left:calc(50% - 50vw + var(--first-card-left));
    margin-right:calc(50% - 50vw + var(--first-card-left));
  }
}

/* Tablet/desktop alignment below 1024px */
@media (min-width:701px) and (max-width:1023px){
  .ddt-autonomy .autonomy-title{
    padding-left:0;
    margin-left:max(0px, calc((100% - var(--aut-tiles-max, 840px)) / 2));
  }
}

/* Mobile: standard gutter + tighter vertical spacing */
@media (max-width:767px){
  .ddt-autonomy .autonomy-title{
    padding-inline:clamp(8px,4vw,14px);
    margin:clamp(24px,6vw,40px) 0 clamp(16px,3vw,28px);
  }
}

/* Top hero media (100px gutters - full bleed) */
.ddt-autonomy{ --edge:100px }
.ddt-autonomy,
.ddt-autonomy .wrap{ overflow:visible!important }
.ddt-autonomy .hero-frame{
  /* Porsche-style letterbox inside 100px gutters */
  position:relative;
  overflow:hidden !important;
  border:0 !important;
  border-radius:var(--radius);
  box-shadow:none !important;
  background:transparent !important;
  width:calc(100vw - (var(--edge) * 2));
  max-width:none !important;
  margin-left:calc(50% - 50vw + var(--edge)) !important;
  margin-right:calc(50% - 50vw + var(--edge)) !important;
  margin-top:0;
  margin-bottom:0;
}
.ddt-autonomy .autonomy-hero--mobile{
  display:none;
}
.ddt-autonomy .autonomy-hero--desktop{
  display:block;
}
@media (max-width:767px){
  .ddt-autonomy .hero-frame{
    width:100%;
    max-width:100%;
    margin:0;
    aspect-ratio:1 / 1;
    overflow:hidden;
    border-radius:0;
  }
  .ddt-autonomy .autonomy-hero--desktop{
    display:none !important;
  }
  .ddt-autonomy .autonomy-hero--mobile{
    display:block;
  }
}
@media (max-width:767px){
  .ddt-autonomy{ --edge:0 }
}
.ddt-autonomy .hero-frame img,
.ddt-autonomy .hero-frame video{
  display:block;
  width:100% !important;
  height:auto !important;
  object-fit:cover !important;
  border-radius:inherit !important;
  margin:0;
  background:transparent !important;
  transition:var(--surface-transition) !important;
}
.ddt-autonomy .hero-frame img[src*="DefenderCompressedFinal"],
.ddt-autonomy .hero-frame video[src*="DefenderCompressedFinal"],
.ddt-autonomy .hero-frame img[src*="DefenderNew"],
.ddt-autonomy .hero-frame video[src*="DefenderNew"]{
  width:100% !important;
  height:auto !important;
  object-fit:cover !important;
  background:transparent !important;
  transition:var(--surface-transition) !important;
}

/* Hard guard: only one autonomy hero shows */
.ddt-autonomy .hero-frame img.autonomy-hero--mobile{
  display:none !important;
  position:absolute;
  inset:0;
}
.ddt-autonomy .hero-frame img.autonomy-hero--desktop{
  position:relative;
  z-index:1;
}
@media (max-width:767px){
  .ddt-autonomy .hero-frame img.autonomy-hero--desktop{
    display:none !important;
  }
  .ddt-autonomy .hero-frame img.autonomy-hero--mobile{
    display:block !important;
    position:relative;
  }
}

/* =========================================================
   Autonomy hero: ensure ONLY one image shows (desktop vs mobile)
   ========================================================= */

/* Desktop default */
.ddt-autonomy .hero-frame > img.autonomy-hero--desktop{
  display:block !important;
}
.ddt-autonomy .hero-frame > img.autonomy-hero--mobile{
  display:none !important;
}

/* Mobile swap */
@media (max-width: 767px){
  .ddt-autonomy .hero-frame > img.autonomy-hero--desktop{
    display:none !important;
  }
  .ddt-autonomy .hero-frame > img.autonomy-hero--mobile{
    display:block !important;
  }
}

/* The text that follows the hero sits above the frame */
.ddt-autonomy .wrap{
  position:relative;
  z-index:1
}

/* Desktop: Autonomy — keep HERO wrap centered like global .wrap,
   but inset the CONTENT wrap(s) below the hero to --first-card-left */
@media (min-width:701px){

  /* 1) HERO wrap (first direct child .wrap of the section) */
  #autonomy.ddt-autonomy > .wrap:first-of-type{
    max-width: var(--maxw);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* 2) CONTENT wrap(s) below hero (second and any subsequent direct child .wrap) */
  #autonomy.ddt-autonomy > .wrap + .wrap{
    max-width: none !important;
    margin-left: calc(50% - 50vw + var(--first-card-left));
    margin-right: calc(50% - 50vw + var(--first-card-left));
    padding-inline: 0;
    --aut-tiles-max: 840px;
  }
}
@media (max-width:767px){
  .ddt-autonomy .wrap{
    margin:0 auto;
    padding-inline:var(--gutter);
    max-width:100%;
  }
}

/* Feature tiles - even spacing inheriting 250px side margins */
.ddt-autonomy .feature-tiles{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(24px,3vw,40px);
  grid-template-columns:1fr;
  max-width:var(--aut-tiles-max, 840px);
  margin-left:auto;
  margin-right:auto;
}
@container section (min-width:980px){
  #autonomy.ddt-autonomy > .wrap + .wrap{
    --aut-tiles-max: 100%;
  }
  .ddt-autonomy .feature-tiles{
    grid-template-columns:repeat(3,1fr);
  }
}
.no-cq .ddt-autonomy .feature-tiles{
  grid-template-columns:repeat(3,1fr)
}

.ddt-autonomy .tile{
  display:grid;
  grid-template-columns:56px 1fr;
  align-items:start;
  gap:18px;

  /* Use the shared tokens instead of hard-coded values */
  padding:var(--aut-tile-pad-block) var(--aut-tile-pad-inline);
  min-height:var(--aut-tile-min-height);

  background-color:var(--aut-card-bg);
  border:1px solid var(--aut-card-border);
  border-radius:var(--aut-radius);
  box-shadow:none;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Desktop tile hover: subtle lift */
@media (min-width:980px) and (hover:hover){
  .ddt-autonomy .tile:hover{
    transform:translateY(-1px);
    border-color:rgba(0,0,0,.22);
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
  }
  body.dnd-theme-inverted .ddt-autonomy .tile:hover{
    border-color:rgba(255,255,255,.16);
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
  }
}

.ddt-autonomy .tile .icon{
  width:56px;
  height:56px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(0,0,0,.14);
  background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.01));
}
.ddt-autonomy .tile .copy h3{
  margin:.1rem 0 .35rem;
  font-size:clamp(17px,1.8vw,20px);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.2;
  color:#212121;
}
.ddt-autonomy .tile .copy h3 small{
  font-size:.75em;
  font-weight:600;
  opacity:.9;
}
.ddt-autonomy .tile .copy p{
  margin:0 0 .5rem;
  color:#4a4a4a;
  font-size:clamp(13px,1.5vw,15px);
  line-height:1.55;
}
.ddt-autonomy .tile .copy p:last-child{
  margin-bottom:0;
}

.ddt-autonomy .safety-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,4vw,64px);
  align-items:center;
  justify-content:stretch;
  width:100%;
  padding-block:clamp(40px,7.5vw,70px);
  margin-block:0;
}
.ddt-autonomy .safety-copy,
.ddt-autonomy .chassis-frame{
  align-self:center
}
.ddt-autonomy .safety-copy{
  padding-block:clamp(16px,2vw,24px);
  max-width:36rem;
}

/* Desktop: align heading with card titles above (icon 56px + gap 18px + left padding) */
@media (min-width:980px){
  .ddt-autonomy .safety-copy{
    /* left-align the copy block in its grid cell */
    padding-left: clamp(12px,2vw,20px);
    justify-self: start;
    text-align: left;
    max-width: 48ch;
  }
  .ddt-autonomy .safety-copy h3,
  .ddt-autonomy .safety-copy p{
    padding-left: 0;
  }
}

.ddt-autonomy .safety-copy h3{
  font-size:clamp(24px,3vw,34px);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.15;
  margin:0 0 clamp(16px,2vw,24px);
  color:#212121;
}
.ddt-autonomy .safety-copy > :first-child{ margin-top:0 }
.ddt-autonomy .safety-copy p{
  max-width:48ch;
  color:#4a4a4a;
  font-size:clamp(15px,1.8vw,16px);
  line-height:1.6;
  margin:0 0 .5rem;
}

/* Big media panel - responsive viewport for the 3D model */
.ddt-autonomy .chassis-frame{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  background:#000;
  box-shadow:none;
  position:relative;
  display:block;
  aspect-ratio:21 / 9;
  min-height:clamp(260px,38vw,420px);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

@media (min-width: 768px){
  /* Desktop: lock CAD frame to 21:9 while scaling responsively */
  .ddt-autonomy .chassis-frame{
    aspect-ratio:21 / 9;
    min-height:0;
    height:auto;
    max-width:100%;
  }
}

/* Desktop hover: subtle lift and glow */
@media (min-width:980px) and (hover:hover){
  .ddt-autonomy .chassis-frame:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
    border-color:rgba(255,255,255,0.10);
  }
}

/* Fill frame completely - images and video */
.ddt-autonomy .chassis-frame img,
.ddt-autonomy .chassis-frame video{
  display:block;
  width:100%;
  border-radius:inherit;
  margin:0;
  padding:0;
}
.ddt-autonomy .chassis-frame img:not(.chassis-model--mobile),
.ddt-autonomy .chassis-frame video{
  height:100%;
  object-fit:cover;
}
/* CAD swap: desktop vs mobile */
.ddt-autonomy .chassis-model--mobile{
  display:none !important;
}
.ddt-autonomy .chassis-model--desktop{
  display:block;
}
@media (max-width:767px){
  .ddt-autonomy .chassis-model--desktop{
    display:none !important;
  }
  .ddt-autonomy .chassis-model--mobile{
    display:block !important;
    height:auto;
    object-fit:contain;
  }
  .ddt-autonomy .chassis-frame{
    aspect-ratio:1 / 1;
    min-height:0;
    max-height:none;
    height:auto;
  }
}

/* CAD viewer: fill width, keep full model visible */
.ddt-autonomy .chassis-frame model-viewer{
  display:block;
  width:100%;
  height:100%;
}

@media (max-width:900px){
  .ddt-autonomy .safety-grid{
    grid-template-columns:1fr;
    gap:var(--space-md);
  }
  .ddt-autonomy .chassis-frame{ order:-1; }
}

@media (min-width:980px){
  /* Desktop: keep the CAD frame aligned with the card grid edges */
  .ddt-autonomy .safety-grid{
    /* Align with the feature tiles above (center card edge + right gutter) */
    max-width:none;
    margin-left:calc(50% - 50vw + var(--first-card-left));
    margin-right:calc(50% - 50vw + var(--gutter));
    padding-inline:0;
    grid-template-columns: minmax(280px, 1fr) 2fr; /* text 1fr, image 2fr => ~1/3 : 2/3 */
    column-gap:clamp(32px,4vw,64px);
    row-gap:clamp(24px,3vw,40px);
  }
  .ddt-autonomy .safety-grid .safety-copy{
    max-width:clamp(360px, 32vw, 480px);
    align-self:center; /* vertically center to the card row above */
    justify-self:start;
    margin-left:0;
  }
  .ddt-autonomy .safety-copy p{
    line-height:1.5; /* slightly tighter to reduce depth on desktop */
  }
  .ddt-autonomy .safety-grid .chassis-frame{
    width:100%;
    max-width:none;
    margin-left:0;
  }
}

/* ---------- Mobile layout polish (≤767px) ---------- */
@media (max-width:767px){
  .ddt-hero{
    position:relative;
    display:block;
    min-height:auto;
    padding:0;
    margin:0;
    background:#000;
  }
  .ddt-hero .media{
    position:relative;
    inset:auto;
    width:100vw;
    max-width:none;
    margin:0;
    margin-left:calc(50% - 50vw);
    aspect-ratio:4 / 5;
    overflow:hidden;
    border-radius:0;
    box-shadow:none;
    z-index:0;
  }
  .ddt-hero .media img,
  .ddt-hero .media video{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:0 !important;
  }
  .ddt-hero.ddt-hero--natural .media{
    position:relative
  }
  .ddt-hero.ddt-hero--natural .media img,
  .ddt-hero.ddt-hero--natural .media video{
    border-radius:0 !important
  }
  .ddt-hero .overlay{
    position:absolute;
    inset:0;
    margin:0;
    padding-top:clamp(8px,4vw,16px);
    padding-right:var(--gutter);
    padding-bottom:clamp(32px,10vw,56px);
    padding-left:var(--gutter);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    text-align:center;
    background:none;
    border-radius:0;
    z-index:1;
  }
  .ddt-hero .overlay h1{
    margin:0 0 clamp(8px,3vw,14px);
  }
  .ddt-hero .overlay p{
    margin:0 0 clamp(10px,3vw,18px);
    max-width:min(86vw,36ch);
  }
  .ddt-hero .overlay .cta{
    margin-top:clamp(10px,3vw,18px);
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
  }

  .ddt-intro,
  .ddt-stats,
  .ddt-configurator,
  #dde-car-enquiry-form-bgfix{
    padding-inline:var(--gutter)
  }

  #autonomy.ddt-autonomy{
    padding-inline:0
  }
  #autonomy.ddt-autonomy .wrap{
    padding-inline:var(--gutter)
  }
  #autonomy.ddt-autonomy .wrap:first-of-type{
    padding-inline:0;
  }
  #autonomy.ddt-autonomy .feature-tiles{
    max-width:min(640px,100%);
    margin-inline:auto;
    padding-inline:0;
    width:calc(100% - (var(--gutter) * 0));
    justify-items:stretch;
  }
  #autonomy.ddt-autonomy .tile{
    margin-inline:auto;
    width:100%;
    box-sizing:border-box;
  }

  .ddt-intro{
    padding-block:clamp(32px,8vw,56px) var(--band-gap-mobile);
    padding-inline:0;
  }
  .ddt-intro .image-wide{
    width:100%;
    aspect-ratio:4 / 5;
    overflow:hidden;
    margin:clamp(20px,6vw,40px) 0 clamp(18px,6vw,32px);
    margin-left:0 !important;
    margin-right:0 !important;
    border-radius:var(--radius);
  }
  .ddt-intro .image-wide img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:inherit;
  }

  .ddt-stats{
    padding-top:clamp(24px,7vw,40px);
    padding-bottom:clamp(24px,7vw,40px);
  }
  #highlights{
    margin:0!important
  }
  #highlights .wrap{
    inline-size:100%;
    max-inline-size:340px;
    margin-inline:auto;
    padding-inline:var(--gutter);
  }
  #highlights.ddt-stats{
    padding-top:var(--band-gap-mobile);
    padding-bottom:var(--band-gap-mobile);
    justify-content:center;
  }
  .ddt-stats .stats-grid{
    margin-inline:auto;
    inline-size:100%;
    max-inline-size:300px;
    box-sizing:border-box;
    justify-items:center;
    text-align:center;
  }
  .ddt-stats .stat{
    padding-inline:0
  }

  .ddt-cards{
    --cards-gap-below:clamp(24px,7vw,40px)
  }
  #details.ddt-cards{
    padding-inline:0;
    --cards-gap-below:clamp(20px,6vw,36px);
    --left-inset:0;
    --right-inset:0;
  }
  #details.ddt-cards .dd-flex-bottom-a{
    padding-left:calc(10vw + 10px);
    padding-right:10vw;
    margin-inline:0;
  }
  #details.ddt-cards .dd-block-a{
    flex-basis:80%;
    max-width:80%;
    margin-bottom:clamp(16px,6vw,28px);
  }

  .ddt-autonomy .hero-frame{
    width:100%;
    margin:0;
    aspect-ratio:1 / 1;
    overflow:hidden;
  }
  .ddt-autonomy .hero-frame img,
  .ddt-autonomy .hero-frame video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  .ddt-autonomy .feature-tiles{
    grid-template-columns:1fr;
    gap:clamp(18px,6vw,28px);
  }
  .ddt-autonomy .cad-demo{
    margin-top:clamp(16px,6vw,32px);
  }
  .ddt-autonomy .safety-grid{
    gap:clamp(20px,6vw,32px);
    padding-block:clamp(20px,6vw,32px);
  }
  .ddt-autonomy .chassis-frame{
    min-height:clamp(200px,58vw,300px);
    aspect-ratio:4 / 5;
  }
  .ddt-autonomy .chassis-frame model-viewer{
    min-height:inherit
  }

  /* Tighten autonomy CAD block on mobile to reduce bottom footprint */
  .ddt-autonomy .chassis-frame{
    aspect-ratio:4 / 5;
    min-height:clamp(140px,38vw,200px);
    max-height:220px;
  }
  .ddt-autonomy .chassis-frame model-viewer{
    height:100%;
    min-height:inherit;
    max-height:inherit;
  }
  .ddt-autonomy .safety-grid{
    padding-block:clamp(12px,4vw,20px);
    gap:clamp(16px,4vw,24px);
  }

  /* Normalize autonomy padding/band to a single thin value */
  #autonomy.ddt-autonomy{
    padding-top:clamp(12px,4vw,22px);
    padding-bottom:clamp(4px,2vw,10px);
    margin:0 !important;
  }

  .ddt-configurator{
    padding-block:clamp(8px,4vw,16px) clamp(16px,6vw,32px);
  }

  /* Kill any widget/container padding/margin around autonomy widget */
  .elementor-element-2ec705a,
  .elementor-element-2ec705a > .elementor-widget-container{
    margin:0 !important;
    padding:0 !important;
    min-height:0 !important;
  }

  .ddt-configurator{
    padding-block:clamp(8px,4vw,16px) clamp(16px,6vw,32px);
    padding-inline:var(--gutter);
  }
  .ddt-configurator .wrap{
    padding-inline:0
  }
  .ddt-configurator .configurator-head{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
  .ddt-configurator .configurator-head p,
  .ddt-configurator .ddt-config__heading{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
  .ddt-configurator .config-step-label{
    text-align:center;
    margin:0 0 12px;
    justify-self:center;
  }

/* =========================================
   MOBILE: Configurator header spacing + top image figure reset
   (Keep text centred; only normalise spacing)
========================================= */
@media (max-width: 767px) {

  /* 1) Mobile-only top image: remove default figure spacing */
  #configurator.ddt-configurator .configurator-top-mobile{
    margin: 0;
  }
  #configurator.ddt-configurator .configurator-top-mobile__img{
    display: block;
    width: 100%;
    height: auto;
  }

  /* 2) Header block: keep centred but remove incidental spacing */
  #configurator.ddt-configurator .configurator-head{
    margin-top: 0;
    padding-top: 0;
    /* keep existing centring rules intact elsewhere */
  }

  /* 3) Balanced spacing after the intro/lead before Step 1 label */
  #configurator.ddt-configurator .ddt-config__lead{
    margin-bottom: var(--band-gap-mobile, var(--space-md));
  }
}

  .ddt-configurator .config-width-grid,
  .ddt-configurator .config-extras-grid{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    max-width:100%;
    gap:clamp(16px,6vw,24px);
    margin-top:8px;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter);
    padding-inline:0;
    margin-inline:0;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
    scroll-snap-stop:always;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    touch-action:pan-x pan-y pinch-zoom;
    scrollbar-gutter:stable both-edges;
  }
  .ddt-configurator .config-width-grid::-webkit-scrollbar,
  .ddt-configurator .config-extras-grid::-webkit-scrollbar{
    height:0;
    background:transparent;
    display:none;
  }
  .ddt-configurator .config-card{
    flex:0 0 auto;
  }
  .ddt-configurator .config-width-grid .config-card,
  .ddt-configurator .config-extras-grid .config-card{
    min-width:min(82%, 420px);
    max-width:min(82%, 420px);
    scroll-snap-align:center;
  }

  .ddt-stats + .elementor-section,
  .ddt-cards + .elementor-section,
  .ddt-configurator + .elementor-section{
    margin-top:0!important
  }

  #dde-car-enquiry-form-bgfix{
    padding:clamp(32px,8vw,52px) var(--gutter) clamp(48px,10vw,68px);
  }
  #dde-car-enquiry-form{
    width:100%;
    max-width:100%;
    padding:clamp(24px,6vw,32px) clamp(16px,5vw,28px);
  }
}

@media (max-width:700px){
  /* Mobile-only override: larger cards while keeping next peek visible */
  #details.ddt-cards .dd-block-a{
    flex-basis:88%;
    max-width:88%;
    margin-bottom:clamp(16px,6vw,28px);
  }
}

@media (max-width:767px){
  #details.ddt-cards,
  #autonomy.ddt-autonomy,
  .ddt-configurator{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }
  #configurator.ddt-configurator{
    position:relative;
    overflow:visible;
    margin-top:0 !important;
    z-index:1;
  }
  #autonomy.ddt-autonomy{
    padding-bottom:0;
  }
  .ddt-configurator{
    padding-top:0;
    padding-bottom:clamp(8px,4vw,16px)
  }
  .ddt-configurator .steps-figure{
    width:min(92%,398px);
    margin:clamp(16px,6vw,28px) auto clamp(30px,9vw,46px);
    justify-content:center;
  }
  .ddt-configurator .steps-figure img,
  .ddt-configurator .steps-figure__image{
    margin-inline:auto;
  }

  .elementor-element-2fb6634.e-con-full,
  .elementor-element-415c6d4.e-con-full{
    background:transparent !important;
    margin:0 !important;
    padding-top:0 !important;
  }
}

/* Buttons inside Autonomy (light) */
.ddt-autonomy .ddt-btn{
  border-color:#212121;
  color:#212121;
}
.ddt-autonomy .ddt-btn:hover,
.ddt-autonomy .ddt-btn:focus{
  background:#212121;
  color:#ffffff;
}

/* Accessibility: respect reduced motion preference */
@media (prefers-reduced-motion:reduce){
  .ddt-autonomy .tile,
  .ddt-autonomy .chassis-frame,
  .ddt-autonomy .hero-frame img,
  .ddt-autonomy .hero-frame video{
    transition:none !important;
    transform:none !important;
  }
}

/* ---------- Autonomy DARK palette — cards/borders only ---------- */
body.dnd-theme-inverted .ddt-autonomy{
  --aut-bg:var(--dnd-bg-color);
  --aut-card-bg:var(--dnd-bg-color);
  --aut-card-border:rgba(255,255,255,.10);
  --line-dark:rgba(255,255,255,.12);
}
body.dnd-theme-inverted .ddt-autonomy .hero-frame{
  background-color:var(--aut-card-bg) !important;
  border-color:var(--line-dark) !important;
}

/* Chassis-frame keeps its dark canvas in both light/dark themes */
body.dnd-theme-inverted .ddt-autonomy .chassis-frame{
  background-color:#050505 !important;
  border-color:rgba(255,255,255,0.08) !important;
}
body.dnd-theme-inverted .ddt-autonomy .tile{
  background-color:var(--aut-card-bg) !important;
  border-color:var(--aut-card-border) !important;
}
body.dnd-theme-inverted .ddt-autonomy .tile .icon{
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
}
body.dnd-theme-inverted .ddt-autonomy .ddt-btn{
  border-color:#fff;
  color:#fff;
}
body.dnd-theme-inverted .ddt-autonomy .ddt-btn:hover,
body.dnd-theme-inverted .ddt-autonomy .ddt-btn:focus{
  background:#fff;
  color:#000;
}

/* Autonomy text contrast in dark theme */
body.dnd-theme-inverted .ddt-autonomy .tile .copy h3,
body.dnd-theme-inverted .ddt-autonomy .tile .copy p,
body.dnd-theme-inverted .ddt-autonomy .safety-copy h3,
body.dnd-theme-inverted .ddt-autonomy .safety-copy p{
  color:var(--dnd-text-color-dark) !important;
}

/* ---------- Configurator (Choose your system) ---------- */
.ddt-configurator{
  position:relative;
  isolation:isolate;
  z-index:1; /* keep configurator content above preceding fades */
  padding:clamp(16px,3vw,32px) 0 clamp(40px,7vw,80px);
  color:var(--dnd-text-color);
  background:transparent !important;
  text-align:center;

  --config-card-bg:rgba(255,255,255,.04);
  --config-card-border:rgba(255,255,255,.12);
  --config-card-hover:rgba(255,255,255,.08);
  --config-card-active:rgba(255,255,255,.18);
  --config-card-shadow:0 30px 80px rgba(0,0,0,.35);
  --config-grid-gap-top:clamp(24px,4vw,40px);
  --config-width-card:max(320px,42%);
  --config-extra-card:max(280px,30%);
}
@media (max-width:700px){
  .ddt-configurator{
    padding-top:clamp(12px,4vw,22px)
  }
}

body:not(.dnd-theme-inverted) .ddt-configurator{
  --config-card-bg:rgba(0,0,0,.02);
  --config-card-border:rgba(0,0,0,.14);
  --config-card-hover:rgba(0,0,0,.05);
  --config-card-active:rgba(0,0,0,.10);
  --config-card-shadow:0 24px 60px rgba(0,0,0,.2);
}

.ddt-configurator .wrap{
  width:100%;
  max-width:min(1080px,100%);
  margin:0 auto;
  padding:0 var(--gutter);
}
.ddt-configurator .configurator-head{
  max-width:min(58ch,100%);
  margin:0 auto clamp(10px,1vw,20px);
  text-align:center;
}
.ddt-configurator .configurator-head .eyebrow{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  color:var(--muted);
  margin:0 0 12px;
}
@media (min-width:1024px){
  /* Reduce text-to-hero gap by ~25% on desktop */
  .ddt-configurator .configurator-head{
    margin:0 auto calc(clamp(10px,1vw,20px) * 0.75);
  }
}
.ddt-configurator .configurator-head h2{
  margin:0 0 12px;
  font-size:clamp(32px,4.5vw,48px);
  font-weight:var(--heading-weight);
  letter-spacing:-.02em;
}
.ddt-configurator .configurator-head p{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
body:not(.dnd-theme-inverted) .ddt-configurator .configurator-head h2:first-of-type{
  color:var(--text,#0c0c0c);
}
body.dnd-theme-inverted .ddt-configurator .configurator-head h2:first-of-type{
  color:var(--dnd-text-color-dark,#f5f5f5);
}
.ddt-configurator .ddt-config__heading{
  color:var(--text,#0c0c0c);
  margin-top:.14em;
}
body.dnd-theme-inverted .ddt-configurator .ddt-config__heading{
  color:var(--dnd-text-color-dark,#f5f5f5);
}
.ddt-configurator .configurator-head p{
  margin:0;
  color:var(--muted);
  font-size:clamp(18px,1.8vw,22px);
  line-height:1.5;
}
.ddt-configurator p:not(.extras-note){
  margin-block:0;
}
.ddt-configurator .extras-note{
  margin-block-start:var(--space-sm);
  margin-block-end:0;
  color:var(--muted);
  font-size:.92rem;
}
.ddt-configurator .config-step-label{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:clamp(14px,1.4vw,16px);
  margin:0 auto 12px;
  text-align:center;
  color:var(--muted);
}

.ddt-configurator .config-width{
  display:grid;
  justify-items:center;
  align-content:start;
  row-gap:clamp(20px,3vw,32px);
  margin-bottom:clamp(56px,7vw,92px);
}
.ddt-configurator .config-width .config-step-label{
  text-align:center;
}
.ddt-configurator .config-width-grid{
  justify-self:stretch;
  width:100%;
}

.ddt-configurator .config-width-grid,
.ddt-configurator .config-extras-grid{
  display:grid;
  gap:clamp(18px,3vw,32px);
  justify-content:center;
  justify-items:center;
}
.ddt-configurator .config-width-grid{
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  max-width:960px;
  row-gap:clamp(20px,3vw,36px);
}
.ddt-configurator .config-extras-grid{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  max-width:1100px;
  margin-top:var(--config-grid-gap-top);
}
.ddt-configurator .config-width-grid .config-card{
  width:min(100%,500px);
  min-height:210px;
}
.ddt-configurator .config-extras-grid .config-card{
  width:min(100%,400px);
}
@media (min-width:768px){
  .ddt-configurator .config-width-grid{
    margin:0 auto;
  }
  .ddt-configurator .config-extras-grid{
    margin:var(--config-grid-gap-top) auto 0;
  }
}
@media (min-width:701px) and (max-width:900px){
  .ddt-configurator .config-extras-grid{
    grid-template-columns:repeat(2,minmax(220px,1fr))
  }
}

.ddt-configurator .steps-figure{
  display:flex;
  justify-content:center;
  max-width:383px;
  width:min(100%,383px);
  aspect-ratio:5 / 4;
  margin:0 auto calc(clamp(24px,4vh,40px) + 16px);
}
.ddt-configurator .steps-figure img,
.ddt-configurator .steps-figure__image{
  display:block;
  width:100%;
  max-width:500px;
  height:auto;
  object-fit:contain;
  border-radius:var(--radius);
  margin:0 auto;
}
@media (min-width:1024px){
  #configurator.ddt-configurator .steps-figure{
    max-width:min(574px,80vw);
    width:100%;
    margin-inline:auto;
  }
  #configurator.ddt-configurator .steps-figure img,
  #configurator.ddt-configurator .steps-figure__image{
    max-width:100%;
    height:auto;
    display:block;
    margin-inline:auto;
  }
}

.ddt-configurator .config-card{
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2vw,22px);
  padding:clamp(22px,2.8vw,32px);
  border-radius:40px;
  border:1px solid transparent; /* default: no outline */
  background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));
  background-color:var(--config-card-bg);
  text-align:left;
  cursor:pointer;
  color:inherit;
  min-height:100%;
  position:relative;
  overflow:visible;
  transition:
    transform var(--motion-mod) var(--ease-std),
    border-color var(--motion-mod) var(--ease-std),
    background-color var(--motion-mod) var(--ease-std),
    box-shadow var(--motion-mod) var(--ease-std);
  box-shadow:0 0 0 rgba(0,0,0,0);
}
/* Hover only for width tiles (Extras must have NO hover state) */
.ddt-configurator .config-width-grid .config-card:hover{
  border-color: var(--config-card-hover);
  background: var(--config-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
/* Suppress default focus (pointer-triggered) and keep visible focus only for keyboard
   via :focus-visible to avoid the outline stacking with the tile border. */
.ddt-configurator .config-card:focus{
  outline:none;
  outline-offset:0;
}

/* Fix double-band: outline + overflow:hidden can appear as a second inner ring.
   Use a focus ring via box-shadow instead (not clipped like outline). */
.ddt-configurator .config-card:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.06),
    0 20px 55px rgba(0,0,0,.28);
}

/* Active styling for WIDTH tiles only (Extras get their own active model below) */
.ddt-configurator .ddt-config__width-tile.is-active,
.ddt-configurator .ddt-config__width-tile[aria-pressed="true"]{
  border-color: var(--config-card-active);
  background: var(--config-card-active);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  transform: translateY(-3px);
}
@media (max-width:700px){
  .ddt-configurator .config-card{
    box-shadow:none
  }
}
.ddt-configurator button.config-card{
  appearance:none;
  -webkit-appearance:none;
}

/* Frame for the step renders / 3D model */
.ddt-configurator .model-slot{
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  width: 100%;
  margin-inline: auto; /* safe "just in case" centring */
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  /* treat as a centred viewbox */
  display: flex;
  align-items: center; /* or flex-end if you want them to sit on the floor */
  justify-content: center;
  padding: clamp(14px, 3vw, 22px);
}
/* High-quality scaling for the PNG renders */
.ddt-configurator .model-slot img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain; /* show the whole step, no cropping */
  border-radius: inherit;
}
/* If we ever swap back to model-viewer, keep it full-frame */
.ddt-configurator .model-slot model-viewer{
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.ddt-configurator .model-slot__placeholder{
  position:absolute;
  inset:auto 16px 16px 16px;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
body:not(.dnd-theme-inverted) .ddt-configurator .model-slot__placeholder{
  color:rgba(0,0,0,.55);
}

.ddt-configurator .config-extras-grid .config-card{
  align-items:stretch;
  gap:clamp(16px,2vw,20px);

  /* Extras: no visible border/shadow unless selected (reserve border space to prevent shift) */
  border:2px solid transparent;
  box-shadow:none;
  transform:none;
  background:var(--config-card-bg);
}
.ddt-configurator .config-extras-grid .config-card-media{
  width:100%;
  aspect-ratio:4 / 5;
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.02));
  margin-bottom:clamp(10px,1.4vw,14px);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border:1px solid rgba(255,255,255,.08);
  transition:
    transform var(--motion-mod) var(--ease-std),
    border-color var(--motion-mod) var(--ease-std),
    box-shadow var(--motion-mod) var(--ease-std);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
body:not(.dnd-theme-inverted) .ddt-configurator .config-extras-grid .config-card-media{
  background:linear-gradient(135deg,rgba(0,0,0,.04),rgba(0,0,0,.01));
  border-color:rgba(0,0,0,.08);
  box-shadow:0 16px 26px rgba(0,0,0,.12);
}
.ddt-configurator .config-extras-grid .config-card-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transition:transform var(--motion-mod) var(--ease-std);
}
.ddt-configurator .config-extras-grid .config-card.is-active .config-card-media{
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 24px 60px rgba(0,0,0,.32);
}
.ddt-configurator .config-extras-grid .config-card.is-active .config-card-media img{
  transform:scale(1.03);
}
.ddt-configurator .config-extras-grid .card-copy{
  display:flex;
  flex-direction:column;
  gap:clamp(6px,1vw,10px);
  min-height:0;
}
.ddt-configurator .card-copy h3{
  margin:0 0 6px;
  font-size:clamp(18px,2vw,22px);
  font-weight:560;
  letter-spacing:-.01em;
}
.ddt-configurator .card-copy p{
  margin:0 0 10px;
  color:var(--muted);
  font-size:clamp(14px,1.4vw,16px);
  line-height:1.55;
}
.ddt-configurator .card-copy small{
  font-size:.85rem;
  color:rgba(255,255,255,.65);
  letter-spacing:.04em;
  text-transform:uppercase;
}
body:not(.dnd-theme-inverted) .ddt-configurator .card-copy small{
  color:rgba(0,0,0,.55);
}
.ddt-configurator .config-extras-grid .card-copy small{
  margin-top:auto;
}
.ddt-configurator .card-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background-color:rgba(255,255,255,.08);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:inherit;
}
body:not(.dnd-theme-inverted) .ddt-configurator .card-tag{
  background-color:rgba(0,0,0,.06);
}
.ddt-configurator .card-meta{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.9rem;
  color:var(--muted);
}
.ddt-configurator .config-extras-grid .card-meta{
  flex-direction:row;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:4px 14px;
  width:100%;
}
.ddt-configurator .card-meta span{
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}

/* ---------- Specs ---------- */
.ddt-specs{
  padding:var(--space-lg) 0;
  border-top:1px solid var(--line);
}
.ddt-specs .grid{
  display:grid;
  gap:var(--space-md);
}
@container section (min-width:980px){
  .ddt-specs .grid{
    grid-template-columns:1fr 1.2fr;
    align-items:start;
  }
}
.no-cq .ddt-specs .grid{
  grid-template-columns:1fr 1.2fr;
  align-items:start;
}
.ddt-specs .specs-intro .lead{
  color:var(--muted)
}
.ddt-specs .specs-intro .ddt-btn{
  margin-top:10px
}
.ddt-specs table{
  width:100%;
  border-collapse:collapse;
}
.ddt-specs th,
.ddt-specs td{
  padding:12px 10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
.ddt-specs th{
  width:42%;
  color:var(--muted);
  font-weight:var(--heading-weight);
}
.ddt-specs .footnote{
  margin-top:10px;
  color:var(--muted);
  font-size:.95rem;
}

/* ---------- A11y helpers ---------- */
a:focus,
button:focus,
input:focus,
textarea:focus{
  outline:2px solid currentColor;
  outline-offset:2px;
}
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* Container-query fallback */
@media (min-width:980px){
  .no-cq .ddt-specs .grid{
    grid-template-columns:1fr 1.2fr;
  }
}

/* ---------- Dev alignment aid ---------- */
html.debug-align::before{
  content:"";
  position:fixed;
  inset:0 auto 0 var(--first-card-left);
  width:1px;
  background:magenta;
  opacity:.45;
  pointer-events:none;
  z-index:99999;
}

/* ---------- One-off tweak: move the specific dark Unsplash image up by 30px ---------- */
img[src*="photo-1550355291-bbee04a92027"][alt*="Fahrzeug"]{
  margin-top:-30px !important;
  display:block;
}

/* =========================================================
   Enquiry Form (scoped)
========================================================= */

#dd-enquiry-for-product-bgfix{
  --dde-font:var(--font-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif);
  --dde-text:var(--text,#121212);
  --dde-muted:var(--muted,#777);
  --dde-line:var(--line,#e6e6e6);
  --dde-bg:var(--bg,#fff);

  font-family:var(--dde-font);
  color:var(--dde-text);
  width:100%;
  max-width:100%;

  /* Match details/autonomy structure: transparent parent, ::before for fade */
  background: transparent !important;
  position: relative;
  isolation: isolate;
  z-index: 0;
}

#dd-enquiry-for-product{
  /* Shell stays static white; only outer bgfix wrapper fades */
  background:#fff !important;
  border:1px solid var(--dde-line);
  width:880px;
  max-width:97vw;
  min-width:320px;
  margin:24px auto;
  padding:38px 60px 32px;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  border-radius:0;
  position:relative;
  z-index:1;
  opacity:1;
}

#dd-enquiry-for-product *{
  box-sizing:border-box
}
#dd-enquiry-for-product .dde-form-subtitle{
  font-size:16px;
  font-weight:500;
  line-height:20px;
  letter-spacing:1px;
  margin:0 0 20px;
  color:#555;
}
#dd-enquiry-for-product label{
  font-size:16px;
  font-weight:600;
  line-height:20px;
  letter-spacing:.5px;
  margin-bottom:6px;
  display:block;
  color:#121212;
}
#dd-enquiry-for-product .dde-hint{
  font-weight:400;
  color:#888;
  font-size:13px;
  margin-left:4px;
}
#dd-enquiry-for-product .dde-small-hint{
  color:#888;
  display:block;
  margin-top:6px;
  font-size:13px;
}
#dd-enquiry-for-product .dde-section{
  margin:18px 0 22px;
}
#dd-enquiry-for-product .dde-field-group{
  margin-bottom:16px;
  position:relative;
  overflow:visible!important;
}
#dd-enquiry-for-product input[type="text"],
#dd-enquiry-for-product input[type="email"],
#dd-enquiry-for-product input[type="tel"],
#dd-enquiry-for-product textarea,
#dd-enquiry-for-product select{
  width:100%;
  padding:14px 16px;
  border:1px solid #e6e6e6;
  border-radius:6px;
  font-size:16px;
  background:#fff;
  font-family:inherit;
  transition:border-color .18s,background .18s,box-shadow .18s;
  color:#121212;
  min-width:0;
  touch-action:manipulation;
}
#dd-enquiry-for-product textarea{
  min-height:120px;
  resize:vertical;
}
#dd-enquiry-for-product input:focus,
#dd-enquiry-for-product textarea:focus,
#dd-enquiry-for-product select:focus{
  outline:none;
  border-color:#121212;
  background:#fff;
  box-shadow:0 0 0 3px rgba(18,18,18,.08);
}
#dd-enquiry-for-product ::placeholder{
  color:#9a9a9a
}
#dd-enquiry-for-product #dde-land{
  -webkit-appearance:none;
  appearance:none;
  padding-right:48px;
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 16px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  cursor:pointer;
  position:relative;
  z-index:5;
  display:block!important;
}
#dd-enquiry-for-product #dde-land:focus{
  border-color:#121212;
  box-shadow:0 0 0 3px rgba(18,18,18,.08);
}
#dd-enquiry-for-product #dde-land:invalid{
  color:#777
}
#dd-enquiry-for-product #dde-land option{
  color:#121212
}
#dd-enquiry-for-product #dde-land-button,
#dd-enquiry-for-product #dde-land-menu{
  display:none!important
}
#dd-enquiry-for-product #dde-phone{
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
#dd-enquiry-for-product button[type="submit"]{
  font-size:17px;
  font-weight:500;
  color:#fff;
  background:#121212;
  border:none;
  border-radius:6px;
  padding:16px 0;
  width:100%;
  margin-top:4px;
  letter-spacing:.6px;
  cursor:pointer;
  transition:background .18s,opacity .18s;
}
#dd-enquiry-for-product button[type="submit"]:hover,
#dd-enquiry-for-product button[type="submit"]:focus{
  background:#121212;
}
#dd-enquiry-for-product button[type="submit"]:disabled{
  opacity:.7;
  cursor:default;
}
#dd-enquiry-for-product .dde-privacy-hint{
  font-size:14px;
  color:#777;
  margin:4px 0 0;
  line-height:1.35;
}
#dd-enquiry-for-product .dde-privacy-hint a{
  color:#121212;
  text-decoration:underline;
}
#dd-enquiry-for-product .dde-privacy-hint a:hover{
  opacity:.85
}
#dd-enquiry-for-product .dde-error{
  margin-top:8px;
  color:#b00020;
  font-size:.95rem;
  display:none;
}
#dde-form-success.dde-success{
  /* Success message stays white – only wrapper fades */
  background:#fff;
  border:1px solid #121212;
  padding:56px 24px;
  border-radius:0;
  max-width:720px;
  margin:0 auto;
  text-align:center;
  color:#216a33;
  font-size:1.12rem;
  font-weight:500;
}
#dd-enquiry-for-product .dde-custom-dropdown{
  --sel-h:60px;
  --hdr-pad:56px;
  --hdr-btn:36px;
  --z:999;
  position:relative;
  z-index:var(--z);
}
#dd-enquiry-for-product .dde-custom-dropdown-selected{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  min-height:var(--sel-h);
  padding:16px 56px 16px 16px;
  border:1px solid #e6e6e6;
  border-radius:6px;
  background:#fff;
  cursor:pointer;
  line-height:1.2;
}
#dd-enquiry-for-product .dde-custom-dropdown-selected:focus-visible{
  outline:3px solid rgba(18,18,18,.24);
  outline-offset:2px;
}
#dd-enquiry-for-product .dde-custom-dropdown .dde-dd-caret{
  position:absolute;
  right:14px;
  top:50%;
  transform: translateY(-50%);
  width:18px;
  height:18px;
  pointer-events:none;
  background:no-repeat center/16px 16px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
#dd-enquiry-for-product .dde-custom-dropdown-list{
  position:absolute;
  inset:auto 0 0 0;
  top:calc(var(--sel-h) + 8px);
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:10px;
  box-shadow:0 20px 40px rgba(0,0,0,.12);
  display:none;
  max-height:min(420px,65vh);
  overflow:auto;
}
#dd-enquiry-for-product .dde-custom-dropdown[aria-expanded="true"] .dde-custom-dropdown-list{
  display:block;
}
#dd-enquiry-for-product .dde-custom-dropdown-header{
  position:sticky;
  top:0;
  z-index:2;
  background:#fff;
  border-bottom:1px solid #eee;
  display:grid;
  grid-template-columns:var(--hdr-btn) 1fr var(--hdr-btn);
  align-items:center;
  padding:10px;
}
#dd-enquiry-for-product .dde-custom-dropdown-back,
#dd-enquiry-for-product .dde-custom-dropdown-exit{
  width:var(--hdr-btn);
  height:var(--hdr-btn);
  border:0;
  background:#f4f4f4;
  border-radius:6px;
  cursor:pointer;
}
#dd-enquiry-for-product #dde-dd-search{
  width:100%;
  border:1px solid #e6e6e6;
  border-radius:6px;
  padding:10px 12px;
  font:inherit;
}
#dd-enquiry-for-product #dde-dd-items{
  padding:8px
}
#dd-enquiry-for-product .dde-custom-dropdown-item{
  display:block;
  text-align:left;
  padding:14px 12px;
  border-radius:8px;
  cursor:pointer;
  border:1px solid transparent;
  background:#fff;
  margin:2px 0;
}
#dd-enquiry-for-product .dde-custom-dropdown-item:hover,
#dd-enquiry-for-product .dde-custom-dropdown-item:focus{
  background:#f7f7f7;
}
#dd-enquiry-for-product .dde-dd-section-hint{
  padding:10px 12px;
  font-size:12px;
  color:#777;
  text-transform:uppercase;
  letter-spacing:.06em;
}
#dd-enquiry-for-product .dde-dd-empty{
  padding:20px 12px;
  color:#777;
}
#dd-enquiry-for-product .dde-dd-other{
  background:#fafafa;
  border:1px dashed #ddd;
}
#dd-enquiry-for-product .dde-dd-helper{
  padding:14px 12px;
  color:#555;
}
#dd-enquiry-for-product .dde-stepper{
  display:flex;
  gap:8px;
  align-items:center;
  margin:6px 0 0 2px;
}
#dd-enquiry-for-product .dde-step-bullet{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ddd;
}
#dd-enquiry-for-product .step-1.active .dde-step-bullet,
#dd-enquiry-for-product .step-2.active .dde-step-bullet{
  background:#121212;
}
@media (min-width:1001px){
  #dd-enquiry-for-product{
    width:1100px;
    max-width:98vw;
    padding:44px 72px 36px;
  }
  #dd-enquiry-for-product .dde-stepper{
    padding:var(--stepper-pt,0) 96px var(--stepper-pb,0) 12px;
  }
  #dd-enquiry-for-product .dde-custom-dropdown-selected{
    padding:16px 56px 16px 48px;
    min-height:60px;
  }
  #dd-enquiry-for-product .dde-custom-dropdown-list{
    max-height:360px;
  }
  #dd-enquiry-for-product .dde-custom-dropdown-item,
  #dd-enquiry-for-product .dde-dd-item{
    padding:16px 20px 14px 48px;
  }
}
@media (max-width:1000px){
  #dd-enquiry-for-product{
    width:98vw;
    max-width:99vw;
    padding:32px 4vw 24px;
  }
  #dd-enquiry-for-product .dde-form-subtitle{
    font-size:14px
  }
}
@media (max-width:750px){
  #dd-enquiry-for-product{
    width:100vw;
    max-width:100vw;
    min-width:0;
    padding:22px 2vw 16px;
  }
  #dd-enquiry-for-product .dde-form-subtitle{
    font-size:13px
  }
  #dd-enquiry-for-product label,
  #dd-enquiry-for-product input,
  #dd-enquiry-for-product textarea,
  #dd-enquiry-for-product select,
  #dd-enquiry-for-product .dde-custom-dropdown-selected,
  #dd-enquiry-for-product .dde-custom-dropdown-item,
  #dd-enquiry-for-product .dde-dd-item{
    font-size:13px
  }
  #dd-enquiry-for-product input,
  #dd-enquiry-for-product textarea,
  #dd-enquiry-for-product select{
    padding:10px 10px;
  }
  #dd-enquiry-for-product .dde-step-label{
    font-size:14px
  }
  #dd-enquiry-for-product .dde-custom-dropdown{
    --sel-h:52px;
    --hdr-pad:44px;
    --hdr-btn:32px;
  }
  #dd-enquiry-for-product .dde-custom-dropdown-selected{
    padding:12px 52px 12px 12px;
  }
  #dd-enquiry-for-product .dde-custom-dropdown-exit{
    right:8px;
    top:8px;
    width:32px;
    height:32px;
  }
  #dd-enquiry-for-product .dde-custom-dropdown-list{
    border-radius:6px
  }
}
@media (max-width:500px){
  #dd-enquiry-for-product{
    padding-left:16px!important;
    padding-right:16px!important;
    gap:16px!important;
  }
  #dd-enquiry-for-product .dde-privacy-hint{
    margin-top:0!important;
    margin-bottom:0!important;
  }
  #dd-enquiry-for-product button[type="submit"]{
    margin-top:0!important;
  }
  #dd-enquiry-for-product .dde-custom-dropdown-list{
    max-height:min(320px,60vh);
  }
  #dd-enquiry-for-product #dde-dd-search{
    font-size:16px
  }
  #dd-enquiry-for-product a,
  #dd-enquiry-for-product a:link,
  #dd-enquiry-for-product a:visited,
  #dd-enquiry-for-product a[href^="tel:"],
  #dd-enquiry-for-product a[href^="mailto:"],
  #dd-enquiry-for-product a[href^="sms:"]{
    color:#121212!important;
    text-decoration:underline;
  }
}
@media (prefers-reduced-motion:reduce){
  #dd-enquiry-for-product *{
    transition:none!important;
    animation:none!important;
  }
}

/* Begin returning to light when JS sets .dnd-caption-up */
body.dnd-theme-inverted.dnd-caption-up{
  --overlay:0;
  --dnd-bg-color:var(--bg);
  --dnd-text-color:var(--text);
  --dnd-link-color:var(--dnd-link-color);
  /* everything already transitions via --dnd-transition-duration */
}

/* =========================================================
   Porsche-style polish (page-load intro, hero zoom, hover)
   – No HTML changes
   – Respects prefers-reduced-motion
   – Reuses existing motion tokens / easing
========================================================= */

/* 1) Page-load intro: overlay text, CTA */

/* Initial (before DOMContentLoaded) */
html:not(.dd-page-loaded) .ddt-hero .overlay .reveal,
html:not(.dd-page-loaded) .ddt-hero .overlay .cta{
  opacity:0;
  transform:translateY(12px);
}

/* Activated (after DOMContentLoaded) with subtle stagger */
html.dd-page-loaded .ddt-hero .overlay .reveal{
  opacity:1;
  transform:none;
  transition: opacity .7s var(--ease-std), transform .7s var(--ease-std);
  transition-delay: 0s;
}
html.dd-page-loaded .ddt-hero .overlay .cta{
  opacity:1;
  transform:none;
  transition: opacity .7s var(--ease-std), transform .7s var(--ease-std);
  transition-delay: .10s;
}
html.dd-page-loaded .ddt-intro .copy{
  opacity:1;
  transform:none;
  transition: opacity .7s var(--ease-std), transform .7s var(--ease-std);
  transition-delay: .20s;
}

/* Respect reduced motion: no opacity/transform animations */
@media (prefers-reduced-motion:reduce){
  html:not(.dd-page-loaded) .ddt-hero .overlay .reveal,
  html:not(.dd-page-loaded) .ddt-hero .overlay .cta{
    opacity:1;
    transform:none;
  }
  html.dd-page-loaded .ddt-hero .overlay .reveal,
  html.dd-page-loaded .ddt-hero .overlay .cta,
  html.dd-page-loaded .ddt-intro .copy{
    transition:none!important;
  }
}

/* 2) Subtle hero “zoom out” on load */
html:not(.dd-page-loaded) .ddt-hero .media img,
html:not(.dd-page-loaded) .ddt-hero .media video{
  transform:scale(1.02);
}
html.dd-page-loaded .ddt-hero .media img,
html.dd-page-loaded .ddt-hero .media video{
  transform:scale(1);
  transition:transform 8s cubic-bezier(.2,.6,.2,1);
}
@media (prefers-reduced-motion:reduce){
  html:not(.dd-page-loaded) .ddt-hero .media img,
  html:not(.dd-page-loaded) .ddt-hero .media video,
  html.dd-page-loaded .ddt-hero .media img,
  html.dd-page-loaded .ddt-hero .media video{
    transform:none;
    transition:none!important;
  }
}

/* ================= Premium Minimal Form (scoped) ================= */

#dde-car-enquiry-form-bgfix{
  width:100vw;
  max-width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:100px 0;
  box-sizing:border-box;
  background:transparent;
}

/* Shell */
#dde-car-enquiry-form{
  /* Shell stays static white; wrapper (#dde-car-enquiry-form-bgfix) handles fade */
  background:#fff !important;
  border:1px solid #e9e9e9;
  width:820px;
  max-width:97vw;
  min-width:320px;
  margin:0 auto;
  padding:38px 60px 32px;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  font-family:inherit;
  color:#121212;
  gap:.6rem;
  border-radius:0;
  position:relative;
  z-index:1;
  opacity:1;
}

/* Typography */
#dde-car-enquiry-form .dde-form-subtitle{
  font-size:16px;
  font-weight:500;
  line-height:20px;
  letter-spacing:1px;
  margin:0 0 20px;
  color:#555;
}
#dde-car-enquiry-form label{
  font-size:16px;
  font-weight:600;
  line-height:20px;
  letter-spacing:.5px;
  margin-bottom:6px;
  display:block;
  color:#121212;
}
#dde-car-enquiry-form .dde-hint{
  font-weight:400;
  color:#888;
  font-size:13px;
  margin-left:4px;
}
#dde-car-enquiry-form .dde-small-hint{
  color:#888;
  display:block;
  margin-top:6px;
  font-size:13px;
}

/* Fields (allow overlays; avoid clipping) */
#dde-car-enquiry-form .dde-field-group{
  margin-bottom:16px;
  position:relative;
  overflow:visible;
}
#dde-car-enquiry-form input[type="text"],
#dde-car-enquiry-form input[type="email"],
#dde-car-enquiry-form input[type="tel"],
#dde-car-enquiry-form textarea,
#dde-car-enquiry-form select{
  width:100%;
  padding:14px 16px;
  border:1px solid #e6e6e6;
  border-radius:6px;
  font-size:16px;
  background:#fff;
  font-family:inherit;
  box-sizing:border-box;
  transition:border-color .18s, background .18s, box-shadow .18s;
  color:#121212;
  min-width:0;
  touch-action: manipulation;
}
#dde-car-enquiry-form input:focus,
#dde-car-enquiry-form textarea:focus,
#dde-car-enquiry-form select:focus{
  outline:none;
  border-color:#121212;
  background:#fff;
  box-shadow:0 0 0 3px rgba(18,18,18,.08);
}
#dde-car-enquiry-form ::placeholder{
  color:#9a9a9a
}

/* Land (native select, premium styling) */
#dde-car-enquiry-form #dde-land{
  -webkit-appearance:none;
  appearance:none;
  padding-right:48px;
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 16px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  cursor:pointer;
  position:relative;
  z-index:5;
  pointer-events:auto;
  display:block !important;
}
#dde-car-enquiry-form #dde-land:focus{
  border-color:#121212;
  box-shadow:0 0 0 3px rgba(18,18,18,.08);
}
#dde-car-enquiry-form #dde-land:invalid{
  color:#777
}
#dde-car-enquiry-form #dde-land option{
  color:#121212
}

/* Kill any jQuery UI wrappers if they leak in */
#dde-car-enquiry-form #dde-land-button,
#dde-car-enquiry-form #dde-land-menu{
  display:none !important
}

/* Phone – reads nicely with international codes */
#dde-car-enquiry-form #dde-phone{
  font-variant-numeric: tabular-nums;
  letter-spacing:.02em;
}

/* Submit */
#dde-car-enquiry-form button[type="submit"]{
  font-size:17px;
  font-weight:500;
  color:#fff;
  background:#121212;
  border:none;
  border-radius:6px;
  padding:16px 0;
  width:100%;
  margin-top:4px;
  letter-spacing:.6px;
  cursor:pointer;
  transition:background .18s, opacity .18s;
  min-width:0;
}
#dde-car-enquiry-form button[type="submit"]:hover,
#dde-car-enquiry-form button[type="submit"]:focus{
  background:#121212;
}
#dde-car-enquiry-form button[type="submit"]:disabled{
  opacity:.7;
  cursor:default;
}

/* Privacy + errors + success */
#dde-car-enquiry-form .dde-privacy-hint{
  font-size:14px;
  color:#777;
  margin:4px 0 0;
  line-height:1.35;
}
#dde-car-enquiry-form .dde-privacy-hint a{
  color:#121212;
  text-decoration:underline;
}
#dde-car-enquiry-form .dde-privacy-hint a:hover{
  opacity:.85;
}
#dde-car-enquiry-form .dde-error{
  margin-top:8px;
  color:#b00020;
  font-size:0.95rem;
  display:none;
}
#dde-form-success.dde-success{
  /* Success message stays white – only wrapper fades */
  background:#fff;
  border:1px solid #121212;
  padding:56px 24px;
  border-radius:0;
  max-width:460px;
  margin:0 auto;
  text-align:center;
  color:#216a33;
  font-size:1.12rem;
  font-weight:500;
  display:none;
}
#dde-form-success{
  display:none;
}
#dde-form-success.is-visible{
  display:block !important;
}
#dde-form-error{
  display:none;
}

/* ================= Custom dropdown (Vehicle) ================= */
#dde-car-enquiry-form .dde-custom-dropdown{
  --stepper-pt:12px;
  --stepper-ph:56px;
  --stepper-pb:14px;
  --gap-below:6px;
  --sel-h:56px;

  position:relative;
  width:100%;
  margin:0;
  border:0;
  background:transparent;
  border-radius:0;
  --hdr-btn:36px;
  --hdr-pad:60px;
  z-index:auto;
}

/* Stepper */
#dde-car-enquiry-form .dde-stepper{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:22px;
  min-height:var(--stepper-ph);
  padding:var(--stepper-pt) var(--hdr-pad) var(--stepper-pb) var(--hdr-pad);
  margin:0 0 var(--gap-below);
}
#dde-car-enquiry-form .dde-step-label{
  font-size:16px;
  font-weight:500;
  color:#888;
  letter-spacing:.5px;
}
#dde-car-enquiry-form .dde-step-label.active{
  color:#121212;
  font-weight:600;
}

/* Selected bar */
#dde-car-enquiry-form .dde-custom-dropdown-selected{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  font:inherit;
  font-size:16px;
  color:#121212;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:6px;
  min-height:var(--sel-h);
  padding:14px 52px 14px 42px;
  cursor:pointer;
  outline:none;
  text-align:left;
  width:100%;
  transition:border-color .18s, background .18s;
  position:relative;
  box-sizing:border-box;
}
#dde-car-enquiry-form .dde-custom-dropdown-selected:hover{
  background:#fff;
  border-color:#d9d9d9;
}
#dde-car-enquiry-form .dde-custom-dropdown-selected:focus-visible{
  border-color:#121212;
  box-shadow:0 0 0 3px rgba(18,18,18,.08);
}
#dde-car-enquiry-form .dde-custom-dropdown[aria-expanded="true"] .dde-custom-dropdown-selected{
  background:#fff;
  border-color:#121212;
  pointer-events:none;
}

/* Down chevron */
#dde-car-enquiry-form .dde-custom-dropdown-selected::after{
  content:"";
  position:absolute;
  top:50%;
  right:16px;
  width:16px;
  height:16px;
  transform:translateY(-50%);
  transition:transform .15s;
  background-repeat:no-repeat;
  background-size:16px 16px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
#dde-car-enquiry-form .dde-custom-dropdown[aria-expanded="true"] .dde-custom-dropdown-selected::after{
  transform:translateY(-50%) rotate(180deg);
}

/* Back & Close */
#dde-car-enquiry-form .dde-custom-dropdown-back,
#dde-car-enquiry-form .dde-custom-dropdown-exit{
  position:relative;
  top:auto;
  transform:none;
  width:var(--hdr-btn);
  height:var(--hdr-btn);
  border:none;
  background:transparent;
  border-radius:6px;
  cursor:pointer;
  z-index:2;
  padding:0;
  line-height:1;
  display:none;
  flex:0 0 var(--hdr-btn);
  align-items:center;
  justify-content:center;
}
#dde-car-enquiry-form .dde-custom-dropdown[aria-expanded="true"] .dde-custom-dropdown-back.active{
  display:flex;
  align-items:center;
  justify-content:center;
}
#dde-car-enquiry-form .dde-custom-dropdown[aria-expanded="true"] .dde-custom-dropdown-exit{
  display:flex;
  align-items:center;
  justify-content:center;
}
#dde-car-enquiry-form .dde-custom-dropdown-back:after,
#dde-car-enquiry-form .dde-custom-dropdown-exit:after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:18px;
  height:18px;
  background-repeat:no-repeat;
  background-size:18px 18px;
}
#dde-car-enquiry-form .dde-custom-dropdown-back:after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'><path d='M15.5 6l-6 6 6 6' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
#dde-car-enquiry-form .dde-custom-dropdown-exit:after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round'/></svg>");
}
#dde-car-enquiry-form .dde-custom-dropdown-back:focus-visible,
#dde-car-enquiry-form .dde-custom-dropdown-exit:focus-visible{
  outline:2px solid #121212;
  outline-offset:2px;
}
#dde-car-enquiry-form .dde-custom-dropdown-back:hover,
#dde-car-enquiry-form .dde-custom-dropdown-exit:hover{
  background:#f6f6f6;
}

/* Panel */
#dde-car-enquiry-form .dde-custom-dropdown-list{
  display:none !important;
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 4px);
  background:#fff;
  border:1px solid #e9e9e9;
  border-radius:6px;
  max-height:300px;
  overflow:auto;
  z-index:4000;
  box-shadow:none;
  pointer-events:auto;
}
#dde-car-enquiry-form .dde-custom-dropdown[aria-expanded="true"]{
  z-index:4000;
}
#dde-car-enquiry-form .dde-custom-dropdown[aria-expanded="true"] .dde-custom-dropdown-list{
  display:block !important;
}

/* Header (search + back/exit) */
#dde-car-enquiry-form .dde-custom-dropdown-header{
  position:sticky;
  top:0;
  z-index:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  background:#fff;
  border-bottom:1px solid #f0f0f0;
  box-sizing:border-box;
}

/* Sticky search */
#dde-car-enquiry-form .dde-dd-search-wrap{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid #f0f0f0;
  padding:10px 10px;
  z-index:1;
}
#dde-car-enquiry-form #dde-dd-search{
  width:100%;
  flex:1 1 auto;
  min-width:0;
  padding:10px 12px;
  border:1px solid #e6e6e6;
  border-radius:6px;
  font-size:16px;
  background:#fff;
  color:#121212;
  outline:none;
}
#dde-car-enquiry-form #dde-dd-items{
  padding:8px;
}
#dde-car-enquiry-form #dde-dd-search:focus{
  border-color:#121212;
}

/* Items */
#dde-car-enquiry-form .dde-custom-dropdown-item{
  display:block;
  width:100%;
  text-align:left;
  font:inherit;
  font-size:16px;
  color:#121212;
  padding:14px 18px 12px 42px;
  cursor:pointer;
  border:0;
  border-bottom:1px solid #f2f2f2; /* only bottom border to avoid stacked gridlines */
  background:#fff;
  transition:background .13s;
  white-space:normal;
  overflow-wrap:anywhere;
}
#dde-car-enquiry-form .dde-custom-dropdown-item:last-child{
  border-bottom:none;
}
#dde-car-enquiry-form .dde-custom-dropdown-item:hover,
#dde-car-enquiry-form .dde-custom-dropdown-item[aria-selected="true"]{
  background:#f7f7f7;
}
#dde-car-enquiry-form .dde-vehicle-summary{
  display:none;
}
#dde-car-enquiry-form .dde-dd-section-hint{
  padding:10px 16px 8px;
  font-size:12px;
  letter-spacing:.08em;
  color:#777;
  text-transform:uppercase;
  border-bottom:1px solid #f6f6f6;
}
#dde-car-enquiry-form .dde-dd-empty{
  padding:14px 16px;
  color:#777;
  font-size:14px;
}
#dde-car-enquiry-form .dde-dd-helper{
  padding:14px 16px;
  color:#555;
  font-size:14px;
}

/* Don’t allow clicks to fall through the selected bar when open */
#dde-car-enquiry-form .dde-custom-dropdown[aria-expanded="true"] .dde-custom-dropdown-selected{
  pointer-events:none;
}

/* A11y helpers */
#dde-car-enquiry-form .sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  border:0 !important;
}

/* ===== Desktop wide layout (>=1001px) ===== */
@media (min-width:1001px){
  #dde-car-enquiry-form{
    width:1100px;
    max-width:98vw;
    padding:44px 72px 36px;
  }
  #dde-car-enquiry-form .dde-custom-dropdown{
    --sel-h:60px;
  }
  #dde-car-enquiry-form .dde-stepper{
    padding:var(--stepper-pt) 96px var(--stepper-pb) 12px;
  }
  #dde-car-enquiry-form .dde-custom-dropdown-selected{
    padding:16px 56px 16px 48px;
    min-height:60px;
  }
  #dde-car-enquiry-form .dde-custom-dropdown-list{
    max-height:360px;
  }
  #dde-car-enquiry-form .dde-custom-dropdown-item{
    padding:16px 20px 14px 48px;
  }
  #dde-form-success.dde-success{
    max-width:720px;
    padding:64px 28px;
  }
}

/* ================= Responsive ================= */
@media (max-width:1000px){
  #dde-car-enquiry-form{
    width:98vw;
    max-width:99vw;
    padding:32px 4vw 24px;
  }
  #dde-car-enquiry-form .dde-form-subtitle{
    font-size:14px
  }
}
@media (max-width:750px){
  #dde-car-enquiry-form{
    width:100vw;
    max-width:100vw;
    min-width:0;
    padding:22px 2vw 16px;
  }
  #dde-car-enquiry-form .dde-form-subtitle{
    font-size:13px
  }
  #dde-car-enquiry-form label,
  #dde-car-enquiry-form input,
  #dde-car-enquiry-form textarea,
  #dde-car-enquiry-form select,
  #dde-car-enquiry-form .dde-custom-dropdown-selected,
  #dde-car-enquiry-form .dde-custom-dropdown-item{
    font-size:13px;
  }
  #dde-car-enquiry-form input,
  #dde-car-enquiry-form textarea,
  #dde-car-enquiry-form select{
    padding:10px 10px;
  }
  #dde-car-enquiry-form .dde-step-label{
    font-size:14px
  }
  #dde-car-enquiry-form .dde-custom-dropdown{
    --sel-h:52px;
    --hdr-pad:44px;
    --hdr-btn:32px;
  }
  #dde-car-enquiry-form .dde-custom-dropdown-selected{
    padding:12px 52px 12px 12px;
  }
  #dde-car-enquiry-form .dde-custom-dropdown-exit{
    right:8px;
    top:8px;
    width:32px;
    height:32px;
  }
  #dde-car-enquiry-form .dde-custom-dropdown-list{
    border-radius:6px;
  }
}

/* ===== Mobile-fit (<=500px) ===== */
@media (max-width:500px){
  #dde-car-enquiry-form-bgfix{
    width:100%;
    padding:24px max(16px, env(safe-area-inset-right))
             28px max(16px, env(safe-area-inset-left));
    overflow-x:hidden;
  }
  #dde-car-enquiry-form{
    padding-left:16px !important;
    padding-right:16px !important;
    gap:16px !important;
    max-width:100%;
    width:100%;
  }
  #dde-car-enquiry-form .dde-privacy-hint{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }
  #dde-car-enquiry-form button[type="submit"]{
    margin-top:0 !important;
  }
  /* keep vehicle panel within viewport on phones */
  #dde-car-enquiry-form .dde-custom-dropdown-list{
    max-height:min(320px, 60vh);
  }
  #dde-car-enquiry-form #dde-dd-search{
    font-size:16px
  }
  #dde-car-enquiry-form a,
  #dde-car-enquiry-form a:link,
  #dde-car-enquiry-form a:visited,
  #dde-car-enquiry-form a[href^="tel:"],
  #dde-car-enquiry-form a[href^="mailto:"],
  #dde-car-enquiry-form a[href^="sms:"]{
    color:#121212 !important;
    text-decoration:underline;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #dde-car-enquiry-form *{
    transition:none !important;
    animation:none !important;
  }
}

/* ---- Vertically centre the vehicle selector text ---- */
#dde-car-enquiry-form .dde-custom-dropdown .dde-custom-dropdown-selected{
  height: var(--sel-h) !important;
  min-height: var(--sel-h) !important;
  padding: 0 52px 0 42px !important;
  line-height: var(--sel-h) !important;
  display: block !important;
  -webkit-appearance: none;
  appearance: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@supports (line-height: calc(1px)){
  #dde-car-enquiry-form .dde-custom-dropdown .dde-custom-dropdown-selected{
    line-height: calc(var(--sel-h) - 1px) !important;
  }
}
@media (max-width:750px){
  #dde-car-enquiry-form .dde-custom-dropdown .dde-custom-dropdown-selected{
    padding: 0 52px 0 12px !important;
  }
}

/* =========================================================
   Scroll safety guards (footer visibility, no trapped pages)
========================================================= */
body.ddp-layout-active{
  overflow-x:hidden;
  overflow-y:auto;
}
#page,
.site,
main,
body.ddp-layout-active{
  background-color:var(--dnd-bg-color);
}

/* 1. Keep layout root visible once JS activates */
body.ddp-layout-active{
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

/* 2. Make sure Elementor containers aren't clipping children
      (leave custom sections like the configurator free to manage overflow) */
body.ddp-layout-active .e-con,
body.ddp-layout-active .elementor-section,
body.ddp-layout-active .ddt-autonomy,
body.ddp-layout-active .ddt-cards,
body.ddp-layout-active .dd-surface-band{
  overflow: visible !important;
}

/* 3. Mobile: lock page width and constrain configurator overflow */
@media (max-width:767px){
  html,
  body,
  #page,
  .site{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .ddt-configurator{
    overflow-x:hidden !important;
    overflow-y:visible;
  }
  .ddt-configurator .wrap{
    padding-inline:0;
  }
  .ddt-configurator .config-width-grid,
  .ddt-configurator .config-extras-grid{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter);
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
    scroll-snap-stop:always;
    scrollbar-width:none;
    touch-action:pan-x pan-y pinch-zoom;
  }
  .ddt-configurator .config-width-grid::-webkit-scrollbar,
  .ddt-configurator .config-extras-grid::-webkit-scrollbar{
    height:0;
    background:transparent;
  }
  .ddt-configurator .config-width-grid .config-card,
  .ddt-configurator .config-extras-grid .config-card{
    min-width:min(82%, 420px);
    max-width:min(82%, 420px);
    scroll-snap-align:center;
  }
}

/* =========================================================
   FINAL mobile guard – clamp configurator carousels and
   100vw surface bands so they never widen the page
========================================================= */
@media (max-width: 767px){
  /* Hard-clamp configurator to the viewport */
  .ddt-configurator{
    padding-inline: 0;
    margin-inline: 0;
    overflow-x: hidden !important;
  }
  .ddt-configurator .wrap{
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 0;
  }

  /* Width + extras grids behave as self-contained carousels */
  .ddt-configurator .config-width-grid,
  .ddt-configurator .config-extras-grid{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    overscroll-behavior-x: contain;
    gap: clamp(16px, 6vw, 24px);
    margin: calc(var(--config-grid-gap-top) * 0.75) 0 0 0;
    padding-inline: max(var(--gutter), 16px);
    max-width: 100%;
    scrollbar-width: none;
    scroll-padding-inline: max(var(--gutter), 16px);
  }
  .ddt-configurator .config-width-grid::-webkit-scrollbar,
  .ddt-configurator .config-extras-grid::-webkit-scrollbar{
    height: 0;
    background: transparent;
  }

  /* Internal left/right gutters that DON'T increase page width */
  .ddt-configurator .config-width-grid::before,
  .ddt-configurator .config-width-grid::after,
  .ddt-configurator .config-extras-grid::before,
  .ddt-configurator .config-extras-grid::after{
    content: "";
    flex: 0 0 clamp(24px, 8vw, 36px);
  }

  /* Cards sit at ~4/5 width, scroll-snapped */
  .ddt-configurator .config-width-grid .config-card,
  .ddt-configurator .config-extras-grid .config-card{
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: center;
  }
}

/* =========================================================
   Hard clamp: kill phantom space at the bottom of the band
   (Details + Autonomy + Configurator + Car Enquiry + Product Enquiry)
========================================================= */
@media (max-width: 767px){
  /* Small, consistent bottom padding only */
  #details.ddt-cards,
  #dde-car-enquiry-form-bgfix,
  #dd-enquiry-for-product-bgfix{
    margin-bottom: 0 !important;
    padding-bottom: clamp(12px, 4vw, 20px) !important;
  }

  /* Collapse any spacer/section Elementor inserts after the last bands */
  #dde-car-enquiry-form-bgfix + .elementor-section,
  #dde-car-enquiry-form-bgfix + .elementor-element.e-con-full,
  #dd-enquiry-for-product-bgfix + .elementor-section,
  #dd-enquiry-for-product-bgfix + .elementor-element.e-con-full{
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  #dde-car-enquiry-form-bgfix + .elementor-section .elementor-widget-spacer,
  #dde-car-enquiry-form-bgfix + .elementor-element.e-con-full .elementor-widget-spacer,
  #dd-enquiry-for-product-bgfix + .elementor-section .elementor-widget-spacer,
  #dd-enquiry-for-product-bgfix + .elementor-element.e-con-full .elementor-widget-spacer{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
  }
}

/* -------------------------------------------------------
   Mobile refinements: hero centring, autonomy padding,
   configurator spacing and band overlap
-------------------------------------------------------- */
@media (max-width:767px){
  .ddt-hero .overlay{
    padding-inline: var(--gutter);
    padding-top: clamp(22px, 7vw, 34px);
    padding-bottom: clamp(48px, 14vw, 68px);
    justify-content: flex-end;
    transform: translateY(-15%);
  }
  .ddt-hero .overlay h1{
    max-width:min(88vw,20ch);
    margin-inline:auto;
    margin-bottom: clamp(1px, 0.8vw, 4px);
  }
  .ddt-hero .overlay p{
    max-width:min(86vw,36ch);
    margin-inline:auto;
    margin-top: 0;
    margin-bottom: clamp(2px, 0.8vw, 5px);
  }

  .ddt-configurator{
    padding-block:0 0;
  }
  .ddt-configurator .configurator-head,
  .ddt-configurator .configurator-head p,
  .ddt-configurator .ddt-config__heading,
  .ddt-configurator .config-step-label{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    max-width:min(640px,100%);
  }
  .ddt-configurator .configurator-head{
    margin-bottom:clamp(12px,4vw,20px);
  }
  .ddt-configurator .config-width .config-step-label{
    justify-self:center;
  }
  .ddt-configurator .config-step-label{
    max-width:min(640px,100%);
  }
  .ddt-configurator .steps-figure{
    max-width:min(520px,92vw);
    margin:clamp(14px,4vw,22px) auto clamp(22px,7vw,32px);
  }
  .ddt-configurator .config-width{
    margin-bottom:clamp(40px,8vw,64px);
  }
  .ddt-configurator .config-width-grid,
  .ddt-configurator .config-extras-grid{
    padding-inline:clamp(24px,8vw,36px);
    scroll-padding-inline:clamp(24px,8vw,36px);
    padding-block:clamp(12px,4vw,20px);
  }
  .ddt-configurator .config-width-grid .config-card,
  .ddt-configurator .config-extras-grid .config-card{
    flex:0 0 78%;
    max-width:78%;
  }
  /* Let lifted/active cards breathe on small screens */
  .ddt-configurator{
    overflow:visible !important;
  }
  .ddt-configurator .config-width-grid,
  .ddt-configurator .config-extras-grid{
    overflow-y:visible;
  }
  /* Prevent active/hover lift from clipping on small screens */
  .ddt-configurator .config-card{
    transform:scale(.965)!important;
    transform-origin:center;
    box-shadow:0 10px 26px rgba(0,0,0,.16);
  }
  /* Hover transform only for width tiles (Extras must not react to hover) */
  .ddt-configurator .config-width-grid .config-card:hover{
    transform:scale(.965)!important;
    transform-origin:center;
    box-shadow:0 10px 26px rgba(0,0,0,.16);
  }
  .ddt-configurator .ddt-config__width-tile.is-active{
    box-shadow:0 12px 30px rgba(0,0,0,.22);
  }

  /* Autonomy layout refinements */
  #autonomy.ddt-autonomy .hero-frame{
    margin-top:0;
    margin-bottom:0;
  }
  #autonomy.ddt-autonomy .autonomy-title{
    padding-inline:clamp(8px,4vw,14px);
    margin:clamp(18px,5vw,26px) 0 clamp(14px,4vw,22px);
  }
  #autonomy.ddt-autonomy .feature-tiles{
    max-width:min(620px,100%);
    margin:clamp(10px,4vw,18px) auto clamp(18px,5vw,26px);
    padding-inline:clamp(8px,4vw,14px);
    grid-template-columns:1fr;
    justify-items:stretch;
  }
  #autonomy.ddt-autonomy .tile{
    width:100%;
    margin-inline:auto;
    border-radius:var(--radius);
    box-shadow:0 10px 28px rgba(0,0,0,.08);
  }
  #autonomy.ddt-autonomy .safety-grid{
    grid-template-columns:1fr;
    max-width:min(720px,100%);
    margin:clamp(10px,4vw,20px) auto 0;
    padding-inline:clamp(6px,4vw,14px);
    justify-items:stretch;
  }
  #autonomy.ddt-autonomy .chassis-frame{
    width:100%;
    max-width:min(720px,100%);
    margin-inline:auto;
    aspect-ratio:1 / 1;
    min-height:0;
    height:auto;
    max-height:none;
  }

  /* Stabilise the top carousel so swiping it never nudges following sections */
  #details.ddt-cards .dd-flex-bottom-a{
    contain: layout paint;
  }
  #details.ddt-cards .dd-block-a{
    min-height:clamp(260px,78vw,520px);
  }
}

/* =========================
   Configurator – Extras: text-only cards
   (remove image slot + unused space)
========================= */
.ddt-configurator .config-extras-grid .config-card-media{
  display: none; /* hides the figure + image */
}
/* Let the extras cards shrink to their copy */
.ddt-configurator .config-extras-grid .config-card{
  align-items: flex-start;
  gap: clamp(8px, 1.4vw, 12px); /* smaller gap now there's no image */
  padding-block: clamp(18px, 2vw, 26px); /* slightly lighter vertical padding */
  min-height: auto; /* no forced tall card */
}
/* Copy stack stays neat */
.ddt-configurator .config-extras-grid .card-copy{
  gap: clamp(4px, 0.8vw, 8px);
}

/* Desktop: match hero image → intro heading gap to card image → card heading gap */
@media (min-width: 701px) {
  .ddt-intro .copy {
    margin-left: calc(50% - 50vw + var(--edge));
    margin-right: calc(50% - 50vw + var(--edge));
    /* use the same spacing token as the card bodies */
    padding-block-start: var(--space-sm); /* gap above "Everyday practicality" */
    padding-block-end: 0;
    margin-block-start: 0; /* stop any extra section margin */
  }
  .ddt-intro .copy h2 {
    margin-block-start: 0; /* prevent heading from adding extra on top */
  }
}

/* ==================
   MOBILE INTRO SPACING
================== */
@media (max-width: 700px) {
  .ddt-intro .copy {
    /* align with mobile carousel inset */
    margin: 0;
    padding-inline: var(--gutter);
    /* hero → heading gap (small, minimal) */
    padding-block-start: var(--space-sm);
    /* heading → carousel gap (a touch larger) */
    padding-block-end: var(--space-md);
  }
  /* avoid extra browser margins changing the gaps */
  .ddt-intro .copy h2 {
    margin-block: 0;
  }
  /* ==================== Mobile: fix Autonomy → Configurator gap ==================== */
  /* 1) Strip extra padding/height from the Elementor HTML widget wrapper
     (this is the wrapper around my custom HTML that contains .dd-surface-band
     and #autonomy). Limit it to this layout only. */
  body.ddp-layout-active .elementor-element-2ec705a > .elementor-widget-container{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* 2) Give the Autonomy section a controlled bottom gap before the configurator */
  #autonomy.ddt-autonomy{
    margin-bottom: var(--space-lg);
  }
}

/* MOBILE PATCH v1.0 */
/* #details carousel: unclip captions, correct media ratio, and align gutters on phones */
@media (max-width:700px){
  #details.ddt-cards .dd-block-a{
    overflow:visible;
    flex-basis:83%;
    max-width:83%;
  }
  #details.ddt-cards .dd-block-a picture{
    display:block;
    width:100%;
    aspect-ratio:4 / 5;
    border-radius:var(--radius);
    overflow:hidden;
  }
  #details.ddt-cards .dd-block-a picture > img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:inherit;
  }
  #details.ddt-cards .dd-block-a > img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:4 / 5;
    object-fit:cover;
    border-radius:var(--radius);
  }
  #details.ddt-cards .ddt-card-body .ddt-card-desc{
    display:block !important;
    margin:.25rem 0 0;
    color:var(--muted);
    font-size:clamp(15px, 1.5vw, 20px);
    line-height:1.55;
  }
  #details.ddt-cards .dd-block-a::after{
    content:none !important;
  }
  #details.ddt-cards .dd-flex-bottom-a{
    padding-inline:var(--gutter);
    padding-left:var(--gutter);
    padding-right:var(--gutter);
    scroll-padding-inline:var(--gutter);
    scroll-padding-left:var(--gutter);
    scroll-padding-right:var(--gutter);
    margin-inline:0;
  }
}

/* MOBILE PATCH v1.1 */
/* Remove debug outlines and keep intro hero centered on phones */
@media (max-width:767px){
  .dd-surface-band,
  #autonomy.ddt-autonomy{
    outline:none !important;
  }
}
@media (max-width:700px){
  .ddt-intro .image-wide{
    width:100%;
    max-width:100%;
    margin-inline:auto;
  }
}

/* MOBILE PATCH v1.2 – keep details cards inset and text clear */
@media (max-width:767px){
  /* add breathing room so text isn’t clipped under the viewport top */
  #details.ddt-cards{
    padding-top:clamp(14px,5vw,24px);
    padding-inline:clamp(16px,5vw,22px);
  }
  /* tighter carousel gutter and wider card body */
  #details.ddt-cards .dd-flex-bottom-a{
    padding-inline:0;
    gap:clamp(14px,5vw,18px);
  }
  #details.ddt-cards .dd-block-a{
    flex-basis:90%;
    max-width:90%;
  }
  /* ensure captions aren’t clipped inside the card */
  #details.ddt-cards .ddt-card-body{
    padding-inline:clamp(12px,4vw,16px);
  }
}

/* MOBILE PATCH v1.3 – valid media queries + visible captions */
@media (max-width:700px){
  /* Intro: keep the hero contained and use a single spacer between image and heading */
  .ddt-intro .image-wide{
    width:100%;
    max-width:100%;
    margin:clamp(16px,6vw,28px) 0 clamp(14px,5vw,22px);
    aspect-ratio:auto;
  }
  .ddt-intro .copy{
    margin:0;
    padding-inline:0;
    padding-block-start:0;
    padding-block-end:var(--space-md);
  }
  .ddt-intro .copy h2{
    margin-block:0;
  }

  /* Details: ensure captions render on phones even if range queries are dropped */
  #details.ddt-cards{
    padding-inline:clamp(16px,5vw,22px);
  }
  #details.ddt-cards .dd-flex-bottom-a{
    contain:none;
    padding-inline:var(--gutter);
    gap:clamp(14px,5vw,18px);
  }
  #details.ddt-cards .dd-block-a{
    overflow:visible;
    flex-basis:86%;
    max-width:86%;
  }
  #details.ddt-cards .dd-block-a::after{
    content:none !important;
  }
  #details.ddt-cards .ddt-card-body{
    padding-inline:0;
  }
  #details.ddt-cards .ddt-card-body .ddt-card-desc{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    margin-top:.3rem;
    color:var(--muted);
  }
  #details.ddt-cards .ddt-carousel__meta{
    padding-inline:0;
  }
  #details.ddt-cards .ddt-carousel__meta{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    height:auto !important;
  }
}

/* MOBILE — unify H2 top spacing (Intro matches Details) */
@media (max-width:700px){
  /* Prevent margin-collapsing so H2 spacing is consistent */
  .ddt-intro .copy{ display: flow-root; }

  /* Shared top spacing token for intro + details headings */
  :root{ --dd-mobile-h2-top: clamp(12px, 4vw, 24px); }

  .ddt-intro h2{
    margin-block-start: var(--dd-mobile-h2-top);
  }

  #details.ddt-cards h2{
    margin-block-start: var(--dd-mobile-h2-top);
  }
}
/* =========================================================
   MOBILE FIX — #details carousel spans full viewport width
   (single gutter layer, no double-inset)
========================================================= */
@media (max-width: 767px){

  /* 1) Break #details out of any parent padding (Elementor/.wrap) */
  #details.ddt-cards{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  /* 2) Apply ONE gutter layer on the scroll track (not on the section) */
  #details.ddt-cards .dd-flex-bottom-a{
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    scroll-padding-left: max(var(--gutter), env(safe-area-inset-left));
    scroll-padding-right: max(var(--gutter), env(safe-area-inset-right));
    box-sizing: border-box;
  }

  /* 3) Ensure it behaves like a proper “one card + peek” carousel */
  #details.ddt-cards .dd-block-a{
    flex: 0 0 clamp(84%, 86vw, 92%);
    max-width: clamp(84%, 86vw, 92%);
  }
}
/* =========================================================
   MOBILE — inset the first (and last) slide like the page
   without re-boxing the whole carousel
========================================================= */
@media (max-width: 767px){

  /* Set your preferred inset here */
  #details.ddt-cards{
    --details-edge-left:  max(var(--gutter), env(safe-area-inset-left));
    --details-edge-right: max(var(--gutter), env(safe-area-inset-right));
    /* If you want “like before” but bigger, swap var(--gutter) for 40px/60px */
    /* --details-edge-left:  60px; */
    /* --details-edge-right: 60px; */
  }

  /* Remove track padding so the section stays full-bleed */
  #details.ddt-cards .dd-flex-bottom-a{
    padding-left: 0 !important;
    padding-right: 0 !important;
    scroll-padding-left: var(--details-edge-left);
    scroll-padding-right: var(--details-edge-right);
  }

  /* Add real spacers so the first card starts inset */
  #details.ddt-cards .dd-flex-bottom-a::before{
    content:"";
    flex: 0 0 var(--details-edge-left);
  }
  #details.ddt-cards .dd-flex-bottom-a::after{
    content:"";
    flex: 0 0 var(--details-edge-right);
  }
}
/* =========================================
   MOBILE BAND SPACING — FINAL (place LAST)
   Intro → Details → Autonomy → Configurator
========================================= */
@media (max-width: 767px){

  /* Single knob */
  :root{
    --dd-band-gap: clamp(18px, 6vw, 32px);
  }

  /* If Elementor inserts spacer/divider widgets inside the band, kill them */
  body.ddp-layout-active .dd-surface-band .elementor-widget-spacer,
  body.ddp-layout-active .dd-surface-band .elementor-widget-divider{
    display:none !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Also zero the common Elementor wrappers that hold these sections (mobile only) */
  @supports(selector(:has(*))){
    body.ddp-layout-active .elementor-section:has(.ddt-intro),
    body.ddp-layout-active .elementor-section:has(#details),
    body.ddp-layout-active .elementor-section:has(#autonomy),
    body.ddp-layout-active .elementor-section:has(#configurator),
    body.ddp-layout-active .elementor-element.e-con-full:has(.ddt-intro),
    body.ddp-layout-active .elementor-element.e-con-full:has(#details),
    body.ddp-layout-active .elementor-element.e-con-full:has(#autonomy),
    body.ddp-layout-active .elementor-element.e-con-full:has(#configurator){
      margin:0 !important;
      padding-top:0 !important;
      padding-bottom:0 !important;
      row-gap:0 !important;
      gap:0 !important;
      background:transparent !important;
    }
  }

  /* 1) INTRO → DETAILS (gap controlled ONLY here) */
  .ddt-intro{
    margin:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  .ddt-intro .copy{
    margin:0 !important;
    padding-block-start: var(--space-sm) !important;
    padding-block-end: var(--dd-band-gap) !important;
  }
  .ddt-intro .copy h2{
    margin:0 0 var(--space-sm) !important;
  }

  /* 2) DETAILS → AUTONOMY (section gap controlled here) */
  #details.ddt-cards{
    margin-top:0 !important;
    margin-bottom: var(--dd-band-gap) !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    --cards-gap-below: var(--dd-band-gap);
  }

  /* Remove the per-card bottom margin that inflates the whole section height on mobile */
  #details.ddt-cards .dd-block-a{
    margin-bottom:0 !important;
  }

  /* Keep a small internal “breath” under the carousel itself */
  #details.ddt-cards .dd-flex-bottom-a{
    padding-block-end: var(--space-sm) !important;
  }

  /* 3) AUTONOMY → CONFIGURATOR (gap controlled here) */
  #autonomy.ddt-autonomy{
    margin:0 !important;
    padding-top:0 !important;
    padding-bottom: var(--dd-band-gap) !important;
  }
  #autonomy.ddt-autonomy .safety-grid{
    margin:0 !important;
    padding-bottom:0 !important;
  }

  /* 4) CONFIGURATOR top breathing room, but no extra wrapper spacing */
  #configurator.ddt-configurator{
    margin:0 !important;
    padding-top: clamp(8px, 3vw, 14px) !important;
  }
}
/* =========================================================
   MOBILE — smaller carousel cards (keep 4/5)
========================================================= */
@media (max-width: 767px){

  /* 1) Control card size here */
  #details.ddt-cards{
    --details-card-w: clamp(240px, 72vw, 320px); /* smaller card width */
    --details-card-gap: 14px;
  }

  /* 2) Track spacing */
  #details.ddt-cards .dd-flex-bottom-a{
    gap: var(--details-card-gap);
  }

  /* 3) Make each slide/card a fixed-width flex item */
  #details.ddt-cards .dd-flex-bottom-a > .dd-block-a{
    flex: 0 0 var(--details-card-w);
    scroll-snap-align: start;
  }

  /* 4) Force the media to stay 4/5, regardless of card width */
  #details.ddt-cards .dd-block-a > picture,
  #details.ddt-cards .dd-block-a .dd-media,
  #details.ddt-cards .dd-block-a figure{
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius, 4px);
  }

  #details.ddt-cards .dd-block-a img,
  #details.ddt-cards .dd-block-a video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
/* =========================================================
   MOBILE — #details carousel: smaller cards + true 4:5
   + first-slide inset (place LAST in the file)
========================================================= */
@media (max-width: 767px){

  /* Tunables */
  #details.ddt-cards{
    --details-edge-left:  max(20px, env(safe-area-inset-left));
    --details-edge-right: max(20px, env(safe-area-inset-right)); /* set to 0 if you truly want ONLY left inset */
    --details-card-w: clamp(240px, 74vw, 320px);                 /* smaller card width */
    --details-card-gap: clamp(12px, 3.5vw, 16px);
  }

  /* Track: no padding, use spacers for inset */
  #details.ddt-cards .dd-flex-bottom-a{
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;
    gap: var(--details-card-gap) !important;

    scroll-padding-left:  var(--details-edge-left) !important;
    scroll-padding-right: var(--details-edge-right) !important;
  }

  /* Real start/end spacers so the first card sits inset */
  #details.ddt-cards .dd-flex-bottom-a::before{
    content: "" !important;
    flex: 0 0 var(--details-edge-left) !important;
  }
  #details.ddt-cards .dd-flex-bottom-a::after{
    content: "" !important;
    flex: 0 0 var(--details-edge-right) !important;
  }

  /* Slides: fixed width (smaller) */
  #details.ddt-cards .dd-block-a{
    flex: 0 0 var(--details-card-w) !important;
    max-width: var(--details-card-w) !important;

    /* premium scroll feel: aligns to the left edge + inset spacer */
    scroll-snap-align: start !important;

    overflow: visible !important; /* captions outside media */
    margin-bottom: 0 !important;
  }

  /* Force a true 4:5 media frame for both <picture> and direct <img> */
  #details.ddt-cards .dd-block-a picture,
  #details.ddt-cards .dd-block-a > img{
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    overflow: hidden;
  }

  #details.ddt-cards .dd-block-a picture > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
  }

  #details.ddt-cards .dd-block-a > img{
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius);
  }
}
@media (max-width: 767px) {
  /* Remove the band padding/margins applied by Elementor container wrappers */
  body.ddp-layout-active .elementor-element.elementor-element-3c99a9e,
  body.ddp-layout-active .elementor-element.elementor-element-d4752e9,
  body.ddp-layout-active .elementor-element.elementor-element-2fb6634,
  body.ddp-layout-active .elementor-element.elementor-element-82519b4 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* If Elementor is applying padding to an inner container, kill that too */
  body.ddp-layout-active .elementor-element.elementor-element-3c99a9e > .e-con-inner,
  body.ddp-layout-active .elementor-element.elementor-element-d4752e9 > .e-con-inner,
  body.ddp-layout-active .elementor-element.elementor-element-2fb6634 > .e-con-inner,
  body.ddp-layout-active .elementor-element.elementor-element-82519b4 > .e-con-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}
@media (max-width: 767px){
  /* Inset the scrolling content (what you actually see as the “first card edge”) */
  #details.ddt-cards .dd-flex-bottom-a{
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }

  /* Ensure you also get a right inset at the end of the scroll */
  #details.ddt-cards .dd-flex-bottom-a::after{
    content:"";
    flex: 0 0 var(--gutter);
  }
}
/* MOBILE — Details carousel starts further in than the Intro hero */
@media (max-width: 767px){
  #details.ddt-cards{
    --details-inset-mobile: calc(var(--gutter) * 2);
  }

  #details.ddt-cards .dd-flex-bottom-a{
    padding-left: max(var(--details-inset-mobile), env(safe-area-inset-left)) !important;
    scroll-padding-left: max(var(--details-inset-mobile), env(safe-area-inset-left)) !important;

    /* keep right consistent too (so the last card ends “correctly”) */
    padding-right: max(var(--details-inset-mobile), env(safe-area-inset-right)) !important;
    scroll-padding-right: max(var(--details-inset-mobile), env(safe-area-inset-right)) !important;
  }
}
@media (max-width: 767px){
  #details.ddt-cards .dd-flex-bottom-a::before{ content:none !important; }
}
/* =========================================================
   MOBILE ONLY: portrait framing
   (Desktop remains exactly as-is)
========================================================= */
@media (max-width: 767px){

  /* Autonomy hero portrait on mobile */
  #autonomy.ddt-autonomy .hero-frame{
    aspect-ratio: 4 / 5 !important;
  }
  #autonomy.ddt-autonomy .hero-frame img,
  #autonomy.ddt-autonomy .hero-frame video{
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Details carousel media portrait on mobile (if you’re using picture/img) */
  #details.ddt-cards .dd-block-a > img,
  #details.ddt-cards .dd-block-a picture{
    aspect-ratio: 4 / 5 !important;
  }
  #details.ddt-cards .dd-block-a picture > img{
    height: 100% !important;
    object-fit: cover !important;
  }
}
/* Default (desktop): keep current layout + show desktop image */
.chassis-frame .chassis-model--mobile { display: none; }

/* Desktop (non-mobile): make the chassis frame occupy 2/3 of its container.
   Mobile rules are untouched — mobile-specific hiding/showing remains in the
   existing max-width:767px media query below. */
@media (min-width: 768px) {
  figure.chassis-frame{
    width: 66.6667%;
    max-width: 66.6667%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  figure.chassis-frame > img,
  figure.chassis-frame > video{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
  }
}

/* Override autonomy-scoped frame settings (higher specificity) on desktop
   so the chassis frame is 16:9 and takes 2/3 of the container. */
@media (min-width: 768px) {
  .ddt-autonomy figure.chassis-frame{
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    min-height: auto;    /* unset autonomy min-height */
    max-height: none;    /* unset autonomy max-height */
    overflow: hidden;
  }

  .ddt-autonomy figure.chassis-frame > img,
  .ddt-autonomy figure.chassis-frame > video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* Mobile only: portrait frame + use mobile image */
@media (max-width: 767px) {

  figure.chassis-frame{
    width: 100%;
    aspect-ratio: 1 / 1;
    display:flex;
    align-items:center;
    justify-content:center;

    /* this is the bit that’s currently preventing portrait */
    max-height: none !important;
    min-height: 0 !important;

    overflow: hidden;
    border-radius: var(--radius);
  }

  figure.chassis-frame > img{
    width: 100%;
    height: auto;
    max-width:100%;
    max-height:100%;
    display: block;
    object-fit: contain;
    object-position: center;
  }

  .chassis-frame .chassis-model--desktop { display: none !important; }
  .chassis-frame .chassis-model--mobile  { display: block !important; }
}
@media (max-width: 767px){
  #configurator.ddt-configurator .configurator-head{
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--gutter); /* matches your site gutter */
    text-align: center;            /* keep the intro centred on mobile */
  }
}
/* Mobile-only top image in configurator */
.configurator-top-mobile {
  margin: 0;
  width: 100%;
}

/* Ensure the image fills the frame (4/5 handled by the asset itself) */
.configurator-top-mobile__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* Hide on desktop */
@media (min-width: 768px) {
  .configurator-top-mobile {
    display: none !important;
  }
}
/* Mobile-only configurator top image: force normal flow + full-bleed */
.configurator-top-mobile{
  display: none; /* default: hidden everywhere */
}

@media (max-width: 767px){
  .ddt-configurator .configurator-top-mobile{
    display: block;

    /* prevent overlap caused by inherited positioning rules */
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    float: none !important;
    clear: both;

    margin: 0 0 calc(var(--dd-band-gap, clamp(18px, 6vw, 32px)) * 2) !important;
    padding: 0 !important;

    /* full-bleed without taking it out of flow */
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw) !important;
  }

  .ddt-configurator .configurator-top-mobile__img{
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
  }
}
/* 1) Default (desktop + everything): hidden */
.ddt-configurator .configurator-top-mobile{
  display: none;
}

/* 2) Mobile: show, full-bleed, 4:5, controlled gap */
@media (max-width: 767px){
  .ddt-configurator .configurator-top-mobile{
    display: block;

    /* kill default figure margins */
    margin: 0 0 calc(var(--dd-band-gap, clamp(18px, 6vw, 32px)) * 2);
    padding: 0;

    /* full-bleed while keeping the rest of .wrap constrained */
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);

    /* 4/5 frame */
    aspect-ratio: 4 / 5;
    overflow: hidden;

    /* ensure it stays in-flow (prevents overlap) */
    position: relative;
  }

  .ddt-configurator .configurator-top-mobile__img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (max-width: 767px){
  /* Ensure configurator cannot be pulled upward */
  body.ddp-layout-active #configurator.ddt-configurator{
    margin-top: 0 !important;
    transform: none !important;
  }

  /* Ensure the mobile top image is IN flow (reserves height) */
  body.ddp-layout-active #configurator.ddt-configurator .configurator-top-mobile{
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    transform: none !important;
    margin-top: 0 !important;
  }

  /* If Elementor container is being shifted */
  body.ddp-layout-active .elementor-element-82519b4{
    margin-top: 0 !important;
    transform: none !important;
  }
}
/* =========================================================
   MOBILE — Fix Autonomy → Configurator “overlap”
   Use real inter-section gap (margin), remove stacking quirks
   (place LAST)
========================================================= */
@media (max-width: 767px){

  /* 1) Make the gap between sections real (outside Autonomy) */
  #autonomy.ddt-autonomy{
    padding-bottom: 0 !important;
    margin-bottom: var(--dd-band-gap) !important;
  }

  /* 2) Stop configurator forming a higher paint layer */
  #configurator.ddt-configurator{
    z-index: auto !important;
    overflow: visible !important; /* kills overflow-y:auto and overflow-x:hidden if inherited */
  }

  /* 3) Keep the top mobile image strictly in-flow */
  #configurator.ddt-configurator .configurator-top-mobile{
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }
}
/* =========================================
   MOBILE — KILL TOP GAP (place LAST)
========================================= */
@media (max-width: 767px){

  /* Prevent margin-collapsing + remove any inherited top spacing */
  .ddt-intro,
  #details.ddt-cards,
  #autonomy.ddt-autonomy,
  #configurator.ddt-configurator{
    display: flow-root;          /* stops first-child margin collapse */
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Browser defaults that commonly create “mystery” gaps */
  .ddt-intro figure,
  #autonomy.ddt-autonomy figure{
    margin: 0 !important;
  }

  /* If the gap you mean is between HERO -> INTRO image */
  .ddt-intro{ padding-block-start: 0 !important; }
  .ddt-intro .image-wide{ margin-top: 0 !important; }

  /* If the gap you mean is above the Details carousel */
  #details.ddt-cards{ padding-top: 0 !important; }
}
@media (max-width:767px){
  body.ddp-layout-active .elementor-element-abc1234{
    display:none !important;
  }
}
/* MOBILE: restore Autonomy → Configurator separation and drop stacking */
@media (max-width: 767px){
  /* Beat the in-band zero-margin rule */
  .dd-surface-band > #autonomy.ddt-autonomy{
    margin-bottom: var(--dd-band-gap, clamp(18px, 6vw, 32px)) !important;
    padding-bottom: 0 !important;
  }

  /* Remove the configurator’s stacking context on mobile */
  .dd-surface-band > #configurator.ddt-configurator{
    position: static !important;
    isolation: auto !important;
    z-index: 0 !important;
    overflow: visible !important;
    margin-top: 0 !important;
    padding-top: clamp(10px, 4vw, 18px);
  }

  /* Keep the mobile top image in normal flow */
  #configurator.ddt-configurator .configurator-top-mobile{
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    margin-top: 0 !important;
  }
}
/* =========================================================
   MOBILE — Fix Configurator overlapping / clipping Autonomy
   Place LAST in the CSS file
========================================================= */
@media (max-width: 767px){

  /* 1) Stop Elementor containers from clipping Autonomy */
  @supports(selector(:has(*))){
    body.ddp-layout-active .elementor-section:has(#autonomy),
    body.ddp-layout-active .elementor-element.e-con-full:has(#autonomy),
    body.ddp-layout-active .e-con:has(#autonomy),
    body.ddp-layout-active .e-con-inner:has(#autonomy),
    body.ddp-layout-active .elementor-widget:has(#autonomy),
    body.ddp-layout-active .elementor-widget-container:has(#autonomy){
      overflow: visible !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
    }
  }

  /* 2) Ensure Autonomy can’t be painted “under” the next section */
  #autonomy.ddt-autonomy{
    position: relative;
    z-index: 2;              /* Autonomy above */
    overflow: visible !important;
  }

  /* 3) Prevent Configurator from overlapping upward */
  #configurator.ddt-configurator{
    position: relative;
    z-index: 1;              /* Configurator below Autonomy */
    margin-top: 0 !important;
    top: auto !important;
    transform: none !important;
  }
}
/* =========================================================
   MOBILE — FIX: Autonomy band must include the bottom space
   (place this at the VERY END of the stylesheet)
========================================================= */
@media (max-width: 767px){

  /* 1) Make the band wrapper contain its children (prevents margin-collapse issues) */
  .dd-surface-band{
    display: flow-root; /* key: contains first/last child margins */
  }
  /* mask-based fade removed so band remains fully opaque on mobile */

  /* 2) NEVER use margin to create the Autonomy → next-section gap.
        Use padding so the band/background covers it. */
  #autonomy.ddt-autonomy{
    margin-bottom: 0 !important;
    padding-bottom: var(--dd-band-gap, clamp(18px, 6vw, 32px)) !important;
  }
  /* If Elementor wraps the band, zero its margin so we don't double the gap */
  .dd-surface-band > #autonomy.ddt-autonomy{
    margin-bottom: 0 !important;
    padding-bottom: var(--dd-band-gap, clamp(18px, 6vw, 32px)) !important;
  }

  /* 3) Kill any “last block” margins that can sit outside the painted area */
  #autonomy.ddt-autonomy .safety-grid{
    margin-bottom: 0 !important;
  }
  #autonomy.ddt-autonomy .wrap > :last-child{
    margin-bottom: 0 !important;
  }

  /* 4) If Elementor adds space OUTSIDE the band, paint the wrapper too (same variable, so it theme-fades correctly) */
  @supports(selector(:has(*))){
    body.ddp-layout-active .elementor-section:has(.dd-surface-band),
    body.ddp-layout-active .elementor-element.e-con-full:has(.dd-surface-band){
      background-color: var(--dnd-bg-color) !important;
      transition: var(--surface-transition);
    }
  }
}
@media (max-width: 767px){
  :is(#configurator, .ddt-configurator){ padding-top: clamp(8px, 3vw, 14px); margin-top:0; }
  :is(#configurator, .ddt-configurator) .configurator-head{ margin-top:0; padding-top:0; }

  #configurator.ddt-configurator .configurator-top-mobile{
    margin: 0 0 calc(var(--dd-band-gap, clamp(18px, 6vw, 32px)) * 2);
  }

  #configurator.ddt-configurator .configurator-head{
    margin-top: 0;
    padding-top: 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  #configurator.ddt-configurator .configurator-head,
  #configurator.ddt-configurator .configurator-head p,
  #configurator.ddt-configurator .ddt-config__heading,
  #configurator.ddt-configurator .config-step-label{
    text-align: center;
  }
}

/* MOBILE – keep configurator cards fully visible when active/hovered */
@media (max-width: 767px){
  /* allow shadows/outline to render */
  #configurator.ddt-configurator,
  #configurator.ddt-configurator .wrap{
    overflow: visible !important;
  }
  .ddt-configurator .config-width-grid,
  .ddt-configurator .config-extras-grid{
    padding-inline: clamp(18px, 6vw, 28px);
    scroll-padding-inline: clamp(18px, 6vw, 28px);
    padding-block: clamp(12px, 4vw, 18px);
    overflow-x: auto;
    overflow-y: visible;
  }
  .ddt-configurator .config-width-grid .config-card,
  .ddt-configurator .config-extras-grid .config-card{
    flex: 0 0 76%;
    max-width: 76%;
  }
  .ddt-configurator .config-card,
  .ddt-configurator .config-card.is-active{
    transform: none !important;
    padding: clamp(18px, 3.6vw, 22px);
    border-radius: 32px;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
  }
  .ddt-configurator .ddt-config__width-tile.is-active{
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
  }
}

/* ================================
   EXTRAS TILES (no hover, border+shadow only when selected)
   ================================ */
.ddt-configurator .config-extras-grid .config-card{
  /* Constant border width prevents layout shift; invisible when not selected */
  align-items:stretch;
  gap:clamp(16px,2vw,20px);
  border:2px solid transparent;
  box-shadow:none;
  transform:none;
  background:var(--config-card-bg);
}

/* Extras keyboard focus: visible ring without creating a double inner band */
.ddt-configurator .config-extras-grid .config-card:focus-visible{
  outline:2px solid rgba(0,0,0,.35);
  outline-offset:10px;
}

/* Selected Extras: single stroke + shadow (no second ring) */
.ddt-configurator .config-extras-grid .config-card.is-active{
  border-color:rgba(0,0,0,.90);
  background-color:#fff;
  box-shadow:var(--config-card-shadow-active);
  transform:none;
}

/* MOBILE — consolidate configurator card sizing (stop flex-shrink overrides from Elementor) */
@media (max-width: 767px){
  /* Force a single flex carousel layout */
  .ddt-configurator .config-width-grid,
  .ddt-configurator .config-extras-grid{
    display:flex;
    flex-wrap:nowrap;
    gap:clamp(16px,6vw,22px);
    padding-inline:clamp(18px,6vw,28px);
    scroll-padding-inline:clamp(18px,6vw,28px);
    overflow-x:auto;
  }

  /* Make every item a non-shrinking slide, regardless of nested Elementor wrappers */
  .ddt-configurator .config-width-grid > *,
  .ddt-configurator .config-extras-grid > *{
    flex:0 0 78%;
    max-width:78%;
    flex-shrink:0;
  }

  /* Card-specific width guard (covers the expected class when present) */
  .ddt-configurator .config-width-grid .config-card,
  .ddt-configurator .config-extras-grid .config-card{
    flex:0 0 78%;
    max-width:78%;
    flex-shrink:0;
  }
}
/* DESKTOP ONLY — only affects <section id="hero" class="ddt-hero ddt-hero--natural"> */
@media (min-width: 768px){
  #hero.ddt-hero.ddt-hero--natural{
    min-height: auto;
    height: auto;
    padding: 0;
    display: block;
  }

  #hero.ddt-hero.ddt-hero--natural > .media{
    position: relative;
    inset: auto;
    width: 100vw;
    margin-left: calc(50% - 50vw); /* full-bleed */
    overflow: hidden;
    z-index: 0;
  }

  #hero.ddt-hero.ddt-hero--natural .media picture,
  #hero.ddt-hero.ddt-hero--natural .media img{
    display: block;
  }

  #hero.ddt-hero.ddt-hero--natural .media img{
    width: 100%;
    height: auto !important;      /* natural height */
    object-fit: contain !important;/* no crop */
  }

  #hero.ddt-hero.ddt-hero--natural > .overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;       /* centres the text */
    text-align: center;
    padding: var(--space-md) var(--gutter);
  }
}
/* ==========================================================================
   DOG CRATE PAGE — Crate size selection cards
   Namespace: .dd-crate-sizes (scoped; safe site-wide)
   ========================================================================== */

/* =========================
   Section spacing + tokens
   ========================= */
.dd-crate-sizes{
  padding-block: clamp(36px, 5vw, 72px);

  /* Card system */
  --dd-crate-card-radius: 26px;
  --dd-crate-surface: rgba(0,0,0,.02);
  --dd-crate-shadow: 0 14px 40px rgba(0,0,0,.06);
  --dd-crate-divider: rgba(0,0,0,.06);

  /* Type */
  --dd-crate-muted: var(--muted, #5f6368);
}

@media (max-width: 700px){
  .dd-crate-sizes{
    --dd-crate-card-radius: 22px;
    padding-block: clamp(30px, 7vw, 56px);
  }
}

/* Optional adaptive tokens (useful if your theme inverts colours) */
@supports (background: color-mix(in srgb, #000 1%, transparent)){
  .dd-crate-sizes{
    --dd-crate-surface: color-mix(in srgb, currentColor 3%, transparent);
    --dd-crate-divider: color-mix(in srgb, currentColor 10%, transparent);
    --dd-crate-muted: color-mix(in srgb, currentColor 55%, transparent);
  }
}


/* =========================
   Header
   ========================= */
.dd-crate-sizes .dd-crate-sizes__head{
  text-align: center;
  max-width: 860px;
  margin: 0 auto 28px;
}

/* Ready to order (and any other title in this section): 28px max on desktop */
.dd-crate-sizes .dd-crate-sizes__title{
  margin: 0 auto 10px;
  max-width: 18ch;

  /* Max 28 on desktop */
  font-size: clamp(24px, 2.2vw, 28px);
  line-height: 1.15;
  font-weight: var(--heading-weight, 560);
  letter-spacing: -0.01em;
}

.dd-crate-sizes .dd-crate-sizes__lead{
  margin: 0;
  max-width: min(58ch, 100%);
  margin-inline: auto;

  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  color: var(--dd-crate-muted);
}


/* =========================
   Grid
   ========================= */
.dd-crate-sizes .dd-crate-sizes__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;

  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 700px){
  .dd-crate-sizes .dd-crate-sizes__grid{ gap: 18px; }
}


/* =========================
   Card styling (borderless)
   ========================= */
.dd-crate-sizes .dd-crate-sizes__tile{
  display: flex;
  flex-direction: column;
  text-align: left;

  border: 0;
  border-radius: var(--dd-crate-card-radius);
  overflow: hidden;

  background: var(--dd-crate-surface);
  box-shadow: var(--dd-crate-shadow);

  transform: scale(1);
  transform-origin: center;
  will-change: transform;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
}

/* Accessible focus (kept subtle) */
.dd-crate-sizes .dd-crate-sizes__tile:focus-within{
  outline: 2px solid rgba(0,0,0,.12);
  outline-offset: 3px;
}
@supports (outline-color: color-mix(in srgb, #000 1%, transparent)){
  .dd-crate-sizes .dd-crate-sizes__tile:focus-within{
    outline-color: color-mix(in srgb, currentColor 18%, transparent);
  }
}


/* =========================
   Media (image at top)
   ========================= */
.dd-crate-sizes .config-card-media,
.dd-crate-sizes .dd-crate-sizes__media{
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0;
}

.dd-crate-sizes .config-card-media img,
.dd-crate-sizes .dd-crate-sizes__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* for CAD/renders use: contain */
}


/* =========================
   Copy block + typography
   ========================= */
.dd-crate-sizes .dd-crate-sizes__tile .card-copy{
  padding: 22px 26px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

@media (max-width: 700px){
  .dd-crate-sizes .dd-crate-sizes__tile .card-copy{ padding: 18px 18px 20px; }
}

/* Small / Medium / Large — 22px */
.dd-crate-sizes .dd-crate-sizes__name{
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.15;
}

.dd-crate-sizes .dd-crate-sizes__meta{
  margin: 0;
  color: var(--dd-crate-muted);
}

.dd-crate-sizes .dd-crate-sizes__suitability{
  margin: 10px 0 0;
  line-height: 1.45;
  max-width: 38ch;
  color: var(--dd-crate-muted);
}

.dd-crate-sizes .dd-crate-sizes__price{
  margin: 16px 0 0;
  font-weight: 600;
  opacity: .92;
}


/* =========================
   Action zone (inside card)
   ========================= */
.dd-crate-sizes .dd-crate-sizes__order-row{
  margin-top: 16px;
  padding-top: 12px;
  min-height: 30px;

  display: flex;
  align-items: center;

  border-top: 1px solid var(--dd-crate-divider);
}


/* =========================
   “Order now” reveal (no arrow)
   ========================= */
.dd-crate-sizes .dd-crate-sizes__order-link{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  color: inherit;
  font-weight: 600;
  letter-spacing: .02em;

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;

  transition:
    opacity 180ms cubic-bezier(.2,.8,.2,1),
    visibility 0ms linear 180ms,
    text-decoration-thickness 160ms cubic-bezier(.2,.8,.2,1),
    text-underline-offset 160ms cubic-bezier(.2,.8,.2,1),
    letter-spacing 160ms cubic-bezier(.2,.8,.2,1);
}

.dd-crate-sizes .dd-crate-sizes__tile:hover .dd-crate-sizes__order-link,
.dd-crate-sizes .dd-crate-sizes__tile:focus-within .dd-crate-sizes__order-link{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 180ms cubic-bezier(.2,.8,.2,1),
    visibility 0ms linear 0ms,
    text-decoration-thickness 160ms cubic-bezier(.2,.8,.2,1),
    text-underline-offset 160ms cubic-bezier(.2,.8,.2,1),
    letter-spacing 160ms cubic-bezier(.2,.8,.2,1);
}

.dd-crate-sizes .dd-crate-sizes__order-link:hover,
.dd-crate-sizes .dd-crate-sizes__order-link:focus-visible{
  text-decoration-thickness: 2px;
  text-underline-offset: .34em;
  letter-spacing: .03em;
}

/* Touch devices: keep link visible */
@media (hover: none), (pointer: coarse){
  .dd-crate-sizes .dd-crate-sizes__order-link{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }
}


/* =========================
   Subtle enlargement on hover
   ========================= */
@media (hover: hover) and (pointer: fine){
  .dd-crate-sizes .dd-crate-sizes__tile:hover,
  .dd-crate-sizes .dd-crate-sizes__tile:focus-within{
    transform: scale(1.012);
  }
}


/* =========================
   Reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  .dd-crate-sizes .dd-crate-sizes__tile,
  .dd-crate-sizes .dd-crate-sizes__order-link{
    transition: none !important;
  }
}