/* JA Rentals — vehicle instrument panel */
.fleet-specs-button{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:12px 18px;border:1px solid #a68a48;background:linear-gradient(120deg,#252116,#12151b);color:#f1dca4;border-radius:5px;font:600 14px 'DM Sans',sans-serif;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}
.fleet-specs-button:hover{background:#332b19;transform:translateY(-2px);box-shadow:0 5px 24px #cba13522}.fleet-specs-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.fleet-specs-button:focus-visible,.specs-dialog button:focus-visible,.specs-dialog a:focus-visible{outline:2px solid #f4d281;outline-offset:5px}
/* The fleet card body is a column flexbox, so ordering keeps "View specs"
   under "View car" no matter which script decorates the card first. Both
   buttons share a width and sit on the same right-hand edge so they read as
   one stacked pair. */
#fleetList .car-price-row{order:4}
#fleetList .car-arrow,#fleetList .fleet-specs-button{box-sizing:border-box;width:158px;min-width:0;height:45px;padding:0 16px;border-radius:4px;justify-content:center}
#fleetList .fleet-specs-button{order:5;align-self:flex-end;margin-top:12px}
/* Stacked full width on narrow screens, where the card has no room to split. */
@media(max-width:620px){
 #fleetList .car-arrow,#fleetList .fleet-specs-button{width:100%}
 #fleetList .car-price-row{flex-direction:column;align-items:stretch;gap:12px}
}
/* Placeholder keeps the centre column centred when one dial has no figure. */
.specs-gauge-empty{visibility:hidden}
.specs-dialog{--spec-accent:#e7bf68;--spec-glow:#cba135;box-sizing:border-box;width:min(1160px,calc(100% - 40px));max-height:calc(100dvh - 40px);padding:0;border:1px solid #444348;border-radius:20px;background:#0c0e12;color:#f2f3f6;margin:auto;box-shadow:0 32px 120px #000c;overflow:auto;overscroll-behavior:contain;font:16px/1.5 'DM Sans',sans-serif}
.specs-dialog::backdrop{background:#020408dc;backdrop-filter:blur(14px)}
.specs-dialog[open]{animation:specsEnter .45s cubic-bezier(.16,1,.3,1) both}
.specs-shell{position:relative;isolation:isolate;background:radial-gradient(ellipse at 50% 30%,#2c282329,transparent 60%)}
.specs-shell::before{content:'';position:absolute;top:0;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,var(--spec-accent),transparent);box-shadow:0 0 25px var(--spec-glow)}
.specs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:30px 36px 20px}
.specs-eyebrow{color:var(--spec-accent);font-size:12px;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:9px}
.specs-eyebrow::before{content:'';width:18px;height:2px;background:var(--spec-accent)}
.specs-head h2{font-family:'Syne',sans-serif;font-size:clamp(25px,3.2vw,39px);line-height:1.12;letter-spacing:-.035em;margin:0;max-width:26ch;font-weight:600}
.specs-subtitle{color:#a4aab5;font-size:14px;margin:9px 0 0}
.specs-close{flex-shrink:0;display:grid;place-items:center;width:42px;height:42px;background:#ffffff08;border:1px solid #ffffff1a;color:#d9dce2;border-radius:50%;cursor:pointer;transition:transform .2s,background .2s;font:26px/1 sans-serif}
.specs-close:hover{background:#ffffff16;transform:rotate(90deg)}
.specs-nav{display:flex;align-items:center;gap:6px;margin:0 36px;padding:6px;background:#07090b;border:1px solid #252830;border-radius:9px;width:fit-content}
.specs-tab{padding:9px 17px;border:0;border-radius:5px;background:transparent;color:#9ca4b2;font:500 14px 'DM Sans',sans-serif;cursor:pointer;transition:color .2s,background .2s}
.specs-tab[aria-selected=true]{background:#24262c;color:#f4e2b6;box-shadow:0 2px 7px #0004}
.specs-panel[hidden]{display:none!important}.specs-panel{animation:specsFade .3s ease-out}
.specs-cluster{display:grid;grid-template-columns:1fr .72fr 1fr;align-items:center;position:relative;margin:10px 18px 0;padding:12px 0 0;border-bottom:1px solid #292b31;background:radial-gradient(ellipse at 50% 95%,#d5b4670a,transparent 75%)}
.specs-gauge{min-width:0;position:relative;text-align:center}.specs-gauge svg{width:100%;max-width:345px;display:block;margin:auto;overflow:visible}
.specs-gauge .dial-case{fill:#0d1015;stroke:#252b35;stroke-width:1}.specs-gauge .dial-tick{stroke:#535966;stroke-width:1}.specs-gauge .dial-tick-major{stroke:#9299a5;stroke-width:2}
.specs-gauge .dial-number{fill:#929aa8;font:11px 'DM Sans',sans-serif;text-anchor:middle;dominant-baseline:middle}.specs-gauge .dial-track{fill:none;stroke:#32353c;stroke-width:3;stroke-linecap:round}.specs-gauge .dial-live{fill:none;stroke:var(--spec-accent);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 4px var(--spec-glow))}.specs-gauge .dial-limit{fill:none;stroke:#d75243;stroke-width:3;opacity:.7}
.specs-gauge .dial-needle{stroke:#ffe4ab;stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 3px #cba13588)}.specs-gauge .dial-value{fill:#f5f5f7;font:500 43px 'DM Sans',sans-serif;text-anchor:middle;letter-spacing:-2px;font-variant-numeric:tabular-nums}.specs-gauge .dial-unit{fill:#c6ccd5;font:11px 'DM Sans',sans-serif;text-anchor:middle;letter-spacing:.15em}.specs-gauge .dial-title{fill:var(--spec-accent);font:11px 'DM Sans',sans-serif;text-anchor:middle;letter-spacing:.18em}
.specs-centre{align-self:center;text-align:center;padding-top:14px;min-width:0}.specs-drive{display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:5px 10px;border:1px solid #514731;border-radius:4px;color:#ddc084;font-size:11px;letter-spacing:.13em;text-transform:uppercase}.specs-drive svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4}
.specs-sprint{margin-top:20px;color:#f5f5f7;font-size:clamp(46px,6vw,70px);font-weight:500;letter-spacing:-.07em;line-height:1.1;font-variant-numeric:tabular-nums}.specs-sprint small{font-size:19px;letter-spacing:0;color:#b6bdc9;margin-left:5px}.specs-sprint-label{color:#c4c9d3;font-size:13px;margin-top:5px;letter-spacing:.07em}
.specs-speed{margin:18px 0 0;padding-top:16px;border-top:1px solid #34312b;display:flex;flex-direction:column;gap:2px}.specs-speed strong{font-size:21px;font-weight:500;color:#ded6c4}.specs-speed span{font-size:12px;letter-spacing:.05em;color:#8993a4}
.specs-summary{padding:22px 36px 26px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.specs-summary div+div{border-left:1px solid #2e3036;padding-left:24px}.specs-summary dt{font-size:12px;color:#9ba2af;letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px}.specs-summary dd{font-size:16px;color:#e5e7eb;margin:0}.specs-summary dd small{display:block;color:#9ca4b0;font-size:13px;margin-top:2px}
.specs-details{padding:24px 36px 28px;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;min-height:345px}.specs-details div{padding:13px 0;border-bottom:1px solid #272c34;display:flex;align-items:center;justify-content:space-between;gap:15px}.specs-details dt{font-size:14px;color:#9ca6b5}.specs-details dd{font-size:15px;color:#eceef2;margin:0;text-align:right}
.specs-bottom{padding:20px 36px 26px;border-top:1px solid #262b33;display:flex;align-items:center;justify-content:space-between;gap:24px;background:#080a0e77}.specs-source{color:#8f98a8;font-size:12px;line-height:1.7;max-width:620px;margin:0}.specs-source a{color:#c7b78e;text-decoration:underline;text-underline-offset:3px}.specs-bottom-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}.specs-replay{padding:9px;border:0;background:none;color:#b6bfcd;font:500 13px 'DM Sans',sans-serif;cursor:pointer}.specs-book{padding:12px 18px;border:1px solid #d0ae5f;border-radius:5px;background:#d6b669;color:#13100b;font:600 14px 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap;transition:background .2s,transform .2s}.specs-book:hover{background:#edd28e;transform:translateY(-1px)}.specs-book:disabled{background:#262b32;border-color:#3c424b;color:#b8c0cc;cursor:default;transform:none}
.specs-unknown{padding:44px 36px;text-align:center;color:#adb7c8}.specs-unknown strong{display:block;color:#f0f2f5;font-size:22px;margin-bottom:10px}
.specs-dialog{max-width:1160px}.specs-speed strong{font-size:42px;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:#f2e1ba}.specs-speed strong [data-count]{font:inherit;color:inherit;letter-spacing:inherit}.specs-speed strong small{font-size:16px;letter-spacing:0;color:#b6bdc9}
@keyframes specsEnter{from{opacity:0;transform:translateY(25px) scale(.97)}to{opacity:1;transform:none}}@keyframes specsFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:750px){.specs-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px);border-radius:14px}.specs-head{padding:24px 20px 18px}.specs-nav{margin:0 20px}.specs-cluster{grid-template-columns:1fr 1fr;margin:12px 8px 0;padding:0}.specs-centre{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:3px 20px;padding:8px 20px 22px}.specs-drive{grid-column:1/-1;justify-self:center;margin-bottom:6px}.specs-sprint{margin:0;font-size:46px}.specs-sprint-label{grid-column:1;grid-row:3;font-size:12px}.specs-speed{margin:0;padding:0;border:0;grid-column:2;grid-row:2/4;justify-content:center;border-left:1px solid #39362e}.specs-gauge svg{max-width:290px}.specs-summary{padding:20px;grid-template-columns:1fr 1fr;gap:20px}.specs-summary div+div{padding-left:0;border:0}.specs-summary div:nth-child(even){border-left:1px solid #292e36;padding-left:20px}.specs-bottom{padding:18px 20px;align-items:stretch;flex-direction:column;gap:16px}.specs-bottom-actions{justify-content:space-between}.specs-details{padding:20px;grid-template-columns:1fr;min-height:0;gap:0}.specs-details div{padding:12px 0}.specs-head h2{font-size:27px}.specs-source{font-size:12px}}
@media(max-width:500px){.specs-dialog{max-width:calc(100% - 20px)}.specs-gauge .dial-number{display:none}.specs-gauge .dial-title{font-size:23px;letter-spacing:.06em}.specs-gauge .dial-unit{font-size:20px}.specs-gauge .dial-value{font-size:52px}.specs-eyebrow{font-size:12px;letter-spacing:.1em}.specs-head{padding-top:20px}.specs-summary{gap:16px}.specs-sprint{font-size:42px}.specs-speed strong{font-size:39px}.specs-close{width:38px;height:38px}}
@media(max-width:500px){.specs-head{padding-bottom:16px}.specs-summary{padding-top:18px;padding-bottom:18px}.specs-bottom{padding-top:14px;padding-bottom:14px;gap:12px}.specs-source{line-height:1.5}}
@media(prefers-reduced-motion:reduce){.specs-dialog[open],.specs-panel{animation:none}.specs-dialog *,.fleet-specs-button{transition:none!important}}
/* Syne draws its figures shorter than its capitals, so a name like "CLA 35"
   sat unevenly. Car names already use DM Sans everywhere else on the site —
   match that here, with lining figures so digits reach full cap height. */
.specs-head h2{font-family:'DM Sans',sans-serif;font-weight:600;letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}

/* ---- Fleet section heading -------------------------------------------
   Scoped to #fleet so other section headings keep their current look.
   The parent already gains .visible from the site's reveal observer, so the
   three lines are staged off that rather than a new observer. Reduced motion
   is covered by the site-wide animation:none rule. */
#fleet .section-heading{position:relative}
#fleet .section-heading::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,#cba135,#cba13500);transform:scaleX(0);transform-origin:left}
#fleet .section-heading.visible::after{animation:jaFleetRule 1.1s .35s cubic-bezier(.16,1,.3,1) both}
#fleet .section-heading.visible .eyebrow{animation:jaFleetIn .6s .04s cubic-bezier(.16,1,.3,1) both}
#fleet .section-heading.visible h2{animation:jaFleetIn .75s .16s cubic-bezier(.16,1,.3,1) both}
#fleet .section-heading.visible>p{animation:jaFleetIn .75s .3s cubic-bezier(.16,1,.3,1) both}
@keyframes jaFleetIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes jaFleetRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* On a phone the heading has the full width to itself, so centre it and let
   it carry more weight than the squeezed two-column desktop version. */
@media(max-width:620px){
 #fleet .section-heading{align-items:center;text-align:center;gap:12px;padding-bottom:30px}
 #fleet .section-heading>div{display:flex;flex-direction:column;align-items:center}
 #fleet .section-heading .eyebrow{font-size:.8125rem;letter-spacing:.18em}
 #fleet .section-heading h2{font-size:clamp(2.9rem,12vw,3.8rem);line-height:1.02;margin-top:12px}
 #fleet .section-heading>p{text-align:center;max-width:26ch;margin:0 auto;font-size:.9375rem;line-height:1.65}
 #fleet .section-heading::after{left:22%;right:22%;background:linear-gradient(90deg,#cba13500,#cba135,#cba13500);transform-origin:center}
}
/* Brand treatments: blue Volkswagen, silver Mercedes-Benz, red AMG. */
.fleet-specs-button,.specs-dialog{--spec-accent:#e7bf68;--spec-glow:#cba135;--spec-tint:#252116;--spec-border:#a68a48}
[data-brand="volkswagen"]{--spec-accent:#85b9ff;--spec-glow:#287aff;--spec-tint:#0a254c;--spec-border:#407bc8}
[data-brand="mercedes"]{--spec-accent:#e0e5eb;--spec-glow:#9bacbc;--spec-tint:#252b33;--spec-border:#87939f}
[data-brand="amg"]{--spec-accent:#ff9299;--spec-glow:#eb3548;--spec-tint:#38151d;--spec-border:#c6505c}
[data-brand="bmw"]{--spec-accent:#8bc9ff;--spec-glow:#328ad9;--spec-tint:#14283a;--spec-border:#408bbf}
[data-brand="audi"],[data-brand="porsche"]{--spec-accent:#ffabb1;--spec-glow:#e14756;--spec-tint:#321c22;--spec-border:#a75660}
[data-brand="ford"],[data-brand="toyota"],[data-brand="tesla"],[data-brand="land-rover"],[data-brand="range-rover"]{--spec-accent:#dce6eb;--spec-glow:#9cb5c3;--spec-tint:#1c2a30;--spec-border:#77909c}
.fleet-specs-button[data-brand]{border-color:var(--spec-border);color:var(--spec-accent);background:linear-gradient(120deg,var(--spec-tint),#10141b)}
.fleet-specs-button[data-brand]:hover{background:var(--spec-tint);box-shadow:0 5px 22px #0004,inset 0 0 0 1px var(--spec-border)}
.fleet-specs-button[data-brand]:focus-visible,.specs-dialog[data-brand] button:focus-visible,.specs-dialog[data-brand] a:focus-visible{outline-color:var(--spec-accent)}
.fleet-specs-button svg{flex:0 0 23px;width:23px;height:23px}
.specs-amg-mark{font:italic 800 15px/1 Arial,sans-serif;letter-spacing:-1px;border-left:4px solid currentColor;padding-left:4px;flex-shrink:0}
.specs-brand-word{font:700 10px/1.1 Arial,sans-serif;max-width:45px;text-align:center}
.specs-eyebrow svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.4;flex-shrink:0}
.specs-eyebrow:has(svg)::before,.specs-eyebrow:has(.specs-amg-mark)::before,.specs-eyebrow:has(.specs-brand-word)::before{display:none}
.specs-dialog[data-brand] .specs-shell{background:radial-gradient(ellipse at 50% 15%,var(--spec-tint),transparent 65%)}
.specs-dialog[data-brand] .specs-tab[aria-selected=true]{color:var(--spec-accent);background:var(--spec-tint)}
.specs-dialog[data-brand] .dial-needle{stroke:var(--spec-accent);filter:drop-shadow(0 0 3px var(--spec-glow))}
.specs-dialog[data-brand] .specs-drive{color:var(--spec-accent);border-color:var(--spec-border)}
.specs-dialog[data-brand] .specs-book:not(:disabled){background:var(--spec-accent);border-color:var(--spec-border);color:#10141b}
.specs-dialog[data-brand] .specs-source a,.specs-dialog[data-brand] .specs-speed strong{color:var(--spec-accent)}