/* =====================================================================
   PREMIUM THEME: loaded after styles.css.

   Quiet luxury in the logo's colours: warm ivory surfaces, Zackiel navy for
   type and the primary action, royal blue for hovers and focus, and the
   shield's maroon as a thin accent. Softness comes from
   spacing, light type and photography, not from boxes, pills and shadows.
   Everything here is presentation only; remove the <link> to soft.css in
   app-shell.html to go back to the base look.
   ===================================================================== */

:root{
  --bg:#F7F5F1;
  --surface:#FFFFFF;
  --surface-alt:#F0EDE7;
  --band:#EFECE6;
  --paper-dim:#E4E0D8;
  --line:rgba(16,32,63,.09);
  --line-strong:rgba(16,32,63,.18);
  --text:#3B4456;
  --text-muted:#646B7C;
  --heading:#10203F;
  --accent-text:#8E2327;
  --ember:#A3262B;
  --deep:#0A1528;
  --footer-bg:#0B1830;
  --btn-bg:#10203F;
  --btn-bg-hover:#1F3A6E;
  --btn-fg:#FFFFFF;
  --btn-dark-bg:var(--btn-bg);
  --btn-dark-fg:var(--btn-fg);
  --field-bg:#FFFFFF;
  --field-line:rgba(16,32,63,.14);
  --focus:#1F3A6E;
  --ring:0 0 0 4px rgba(31,58,110,.12);
  --header-bg:rgba(250,249,246,.86);
  --menu-bg:#EEF1F7;
  --menu-hover:#E1E7F2;
  --menu-line:rgba(16,32,63,.08);
  --ribbon-bg:#E7EBF3;
  --ribbon-fg:#4E586C;
  --radius-s:8px;
  --radius-m:12px;
  --radius-l:16px;
  --shadow-1:none;
  --shadow-card:0 1px 2px rgba(16,32,63,.03),0 10px 30px -20px rgba(16,32,63,.18);
  --shadow-2:0 30px 70px -36px rgba(16,32,63,.35);
  --ease:cubic-bezier(.22,.8,.26,1);
  --topbar-h:80px;
  --section:clamp(88px,11vw,152px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1220;
    --surface:#111A2B;
    --surface-alt:#16213A;
    --band:#0E1729;
    --paper-dim:#24314D;
    --line:rgba(200,215,240,.08);
    --line-strong:rgba(200,215,240,.17);
    --text:#C2C9D6;
    --text-muted:#8C95A8;
    --heading:#F1F3F8;
    --accent-text:#EFA39D;
    --ember:#D0474B;
    --deep:#070D1A;
    --footer-bg:#070D1A;
    --btn-bg:#E8EDF6;
    --btn-bg-hover:#FFFFFF;
    --btn-fg:#10203F;
    --field-bg:#16213A;
    --field-line:rgba(200,215,240,.12);
    --focus:#9DB4DE;
    --ring:0 0 0 4px rgba(157,180,222,.16);
    --header-bg:rgba(11,18,32,.82);
    --menu-bg:#141F36;
    --menu-hover:#1C2A48;
    --menu-line:rgba(200,215,240,.1);
    --ribbon-bg:#13203A;
    --ribbon-fg:#A9B4C8;
    --shadow-card:0 12px 35px -18px rgba(0,0,0,.6);
    --shadow-2:0 30px 70px -30px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#0B1220;
  --surface:#111A2B;
  --surface-alt:#16213A;
  --band:#0E1729;
  --paper-dim:#24314D;
  --line:rgba(200,215,240,.08);
  --line-strong:rgba(200,215,240,.17);
  --text:#C2C9D6;
  --text-muted:#8C95A8;
  --heading:#F1F3F8;
  --accent-text:#EFA39D;
  --ember:#D0474B;
  --deep:#070D1A;
  --footer-bg:#070D1A;
  --btn-bg:#E8EDF6;
  --btn-bg-hover:#FFFFFF;
  --btn-fg:#10203F;
  --field-bg:#16213A;
  --field-line:rgba(200,215,240,.12);
  --focus:#9DB4DE;
  --ring:0 0 0 4px rgba(157,180,222,.16);
  --header-bg:rgba(11,18,32,.82);
  --menu-bg:#141F36;
  --menu-hover:#1C2A48;
  --menu-line:rgba(200,215,240,.1);
  --ribbon-bg:#13203A;
  --ribbon-fg:#A9B4C8;
  --shadow-card:0 12px 35px -18px rgba(0,0,0,.6);
  --shadow-2:0 30px 70px -30px rgba(0,0,0,.8);
}

/* =====================================================================
   Type
   ===================================================================== */
body{background:var(--bg);color:var(--text);font-weight:350;font-size:16px;line-height:1.7;letter-spacing:.005em;}
p{color:var(--text);}
h1,h2,h3,.display{font-weight:400;letter-spacing:-.02em;color:var(--heading);line-height:1.15;}
b,strong{font-weight:500;}
/* the company name is always set bold, wherever it appears in text */
.co-name{font-weight:700;}
.sub,.lede{color:var(--text-muted);font-weight:350;}

.eyebrow{font-family:var(--font-body);font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted);gap:14px;margin-bottom:22px;}
.eyebrow::before{width:28px;height:1px;border-radius:0;background:var(--ember);}

.page-head{margin-bottom:clamp(24px,3vw,40px);padding-bottom:0;border:0;gap:24px;align-items:flex-end;}
.page-head h2,.split-aside h2{font-size:clamp(2.5rem,5.4vw,4.25rem);font-weight:300;letter-spacing:-.035em;line-height:1.02;}
.page-head .sub{font-size:1.12rem;line-height:1.65;margin-top:22px;max-width:56ch;}
.section-head{margin-bottom:clamp(36px,5vw,64px);gap:24px;}
.section-head h2{font-size:clamp(2rem,4vw,3.25rem);font-weight:300;letter-spacing:-.03em;line-height:1.05;}

/* =====================================================================
   Layout rhythm: a centred measure and generous vertical space
   ===================================================================== */
.wrap,.topbar-inner{max-width:1560px;margin-inline:auto;padding-inline:max(20px,4vw);}
.block{padding-top:var(--section);}
.block:last-child{padding-bottom:var(--section);}
.view{padding-block:clamp(28px,3.5vw,48px) var(--section);}
.view[data-view="home"]{padding-block:0;}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn{min-height:50px;padding:0 28px;border-radius:var(--radius-s);font-weight:500;font-size:.92rem;letter-spacing:.02em;gap:10px;box-shadow:none;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);}
.btn-sm{min-height:42px;padding:0 20px;font-size:.86rem;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:none;transition-duration:.1s;}
.btn-primary,.btn-dark{background:var(--btn-bg);color:var(--btn-fg);border-color:transparent;box-shadow:none;}
.btn-primary:hover,.btn-dark:hover{background:var(--btn-bg-hover);filter:none;box-shadow:none;}
.btn-outline{background:transparent;border-color:var(--line-strong);color:var(--heading);}
.btn-outline:hover{background:transparent;border-color:var(--heading);}
.btn-ghost-light{background:transparent;border-color:rgba(255,255,255,.42);color:#fff;}
.btn-ghost-light:hover{background:rgba(255,255,255,.1);border-color:#fff;}
/* WhatsApp buttons in WhatsApp green, the same in light and dark mode. Dark green text: white on #25D366 is too faint to read. */
.btn-whatsapp,.btn-whatsapp:visited{background:#25D366;border-color:#25D366;color:#06301A;}
.btn-whatsapp:hover{background:#1EBE5B;border-color:#1EBE5B;color:#06301A;}
.btn-whatsapp::before{content:"";width:17px;height:17px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.21 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.63.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35zM12.05 21.8h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.88 9.89-9.88a9.82 9.82 0 0 1 6.99 2.9 9.83 9.83 0 0 1 2.89 6.99c0 5.45-4.44 9.88-9.88 9.88zm8.41-18.3A11.81 11.81 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.89c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65a11.88 11.88 0 0 0 5.68 1.45h.01c6.55 0 11.89-5.34 11.89-11.89 0-3.18-1.24-6.16-3.48-8.41z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.21 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.63.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35zM12.05 21.8h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.88 9.89-9.88a9.82 9.82 0 0 1 6.99 2.9 9.83 9.83 0 0 1 2.89 6.99c0 5.45-4.44 9.88-9.88 9.88zm8.41-18.3A11.81 11.81 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.89c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65a11.88 11.88 0 0 0 5.68 1.45h.01c6.55 0 11.89-5.34 11.89-11.89 0-3.18-1.24-6.16-3.48-8.41z'/></svg>") center/contain no-repeat;}
.btn-whatsapp.btn-sm::before{width:15px;height:15px;}

.linkbtn{color:var(--heading);font-weight:500;font-size:.9rem;letter-spacing:.01em;text-underline-offset:5px;
  transition:color .3s var(--ease),opacity .3s var(--ease);}
.linkbtn:hover{text-decoration:underline;text-decoration-thickness:1px;}
.linkbtn.muted{color:var(--text-muted);font-weight:400;}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}

/* =====================================================================
   Header: light, translucent, almost weightless
   ===================================================================== */
.topbar{background:linear-gradient(var(--brand-red),var(--brand-red)) top/100% 3px no-repeat,var(--header-bg);color:var(--heading);border-bottom:1px solid transparent;box-shadow:none;
  -webkit-backdrop-filter:saturate(140%) blur(18px);backdrop-filter:saturate(140%) blur(18px);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease);}
.topbar.is-scrolled{border-bottom-color:var(--line);box-shadow:0 12px 30px -26px rgba(16,32,63,.4);}
.topbar-inner{min-height:var(--topbar-h);gap:40px;}

/* the navy-ink mark on the light bar, the light-ink one in dark mode */
.topbar .brand-logo-light{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .topbar .brand-logo-ink{display:none;}
  :root:not([data-theme="light"]) .topbar .brand-logo-light{display:block;}
}
:root[data-theme="dark"] .topbar .brand-logo-ink{display:none;}
:root[data-theme="dark"] .topbar .brand-logo-light{display:block;}

.brand{color:var(--heading);gap:14px;}
.brand-name{font-family:var(--font-head);font-weight:700;font-size:1.22rem;letter-spacing:.06em;color:var(--heading);}
.brand-sub{font-weight:400;font-size:.6rem;letter-spacing:.24em;color:var(--text-muted);margin-top:6px;}

.navlink{position:relative;background:none;color:var(--text);font-family:var(--font-head);font-weight:400;font-size:.94rem;letter-spacing:.01em;padding:10px 14px;border-radius:0;
  transition:color .35s var(--ease);}
.navlink::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;background:var(--ember);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
.navgroup > .navlink::after{right:4px;}
.navlink:hover,.navlink.active,.navgroup.active > .navlink{color:var(--heading);background:none;box-shadow:none;}
.navlink:hover::after,.navlink.active::after,.navgroup.active > .navlink::after{transform:scaleX(1);}
.navcaret{color:var(--text-muted);}
.navcaret:hover,.navgroup.open .navcaret{color:var(--heading);}
@media (min-width:1281px){ .sitenav{justify-content:center;} }
/* just above the phone-menu breakpoint the full menu is tight: close it up a little */
@media (min-width:1281px) and (max-width:1360px){ .topbar-inner{gap:22px;} .navlink{padding-inline:11px;} .navlink::after{left:11px;right:11px;} }

.navsub::before{background:var(--menu-bg);border:1px solid var(--menu-line);border-radius:var(--radius-m);box-shadow:0 24px 50px -28px rgba(16,32,63,.35);}
.navsub a{border-radius:var(--radius-s);margin-inline:6px;box-shadow:inset 2px 0 0 transparent;
  transition:background-color .25s var(--ease),box-shadow .25s var(--ease);}
.navsub a b{font-weight:500;color:var(--heading);}
.navsub a:hover,.navsub a:focus-visible{background:var(--menu-hover);box-shadow:inset 2px 0 0 var(--ember);}
.navsub a.active{background:var(--menu-hover);}
.navsub a.active b{color:var(--heading);}
/* dropdowns ease in rather than snapping open */
@media (min-width:1281px){
  .navsub{display:block;visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s;}
  .navgroup.open .navsub{visibility:visible;opacity:1;transform:none;transition-delay:0s;}
}
@media (min-width:1281px) and (hover:hover){
  .navgroup:hover .navsub{visibility:visible;opacity:1;transform:none;transition-delay:0s;}
  .navgroup.dismissed:not(.open) .navsub{display:block;visibility:hidden;opacity:0;}
}

.iconbtn,.navtoggle{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);background:none;color:var(--heading);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);}
.iconbtn:hover,.navtoggle:hover{background:var(--surface-alt);border-color:var(--heading);}
.rolebtn{background:none;border:1px solid var(--line-strong);color:var(--heading);border-radius:var(--radius-s);font-family:var(--font-head);font-size:.88rem;font-weight:500;padding:9px 20px;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);}
.rolebtn:hover{background:none;border-color:var(--heading);}
.rolebtn.active,.rolebtn[aria-current="page"]{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg);}
.badge-count{border-color:var(--bg);}

@media (max-width:1280px){
  .topbar-inner{gap:14px;padding-block:12px;}
  .sitenav{border-top:1px solid var(--line);padding-top:12px;margin-top:4px;}
  .navlink{padding:14px 4px;font-size:1.05rem;}
  .navlink::after{display:none;}
  .navlink.active,.navgroup.active > .navlink{font-weight:500;background:none;box-shadow:none;}
  .navsub{background:var(--menu-bg);border:1px solid var(--menu-line);border-radius:var(--radius-m);padding:6px;margin:2px 0 10px;}
  .navsub a{border-left:0;border-radius:var(--radius-s);margin-inline:0;padding:11px 14px;}
  .navsub a b{color:var(--heading);}
  .navsub a span{color:var(--text-muted);}
  .navsub a:hover,.navsub a:focus-visible{background:var(--menu-hover);}
  .navsub a.active b{color:var(--heading);}
}
@media (max-width:560px){
  .brand-name{letter-spacing:.04em;}
  .brand-sub{letter-spacing:.14em;}
}

/* =====================================================================
   Hero: cinematic photograph, a whisper of gradient for legibility
   ===================================================================== */
.hero-band{background:var(--deep);border-bottom:3px solid var(--brand-red);}
.hero-band::before{background:
  linear-gradient(90deg,rgba(8,16,32,.74) 0%,rgba(8,16,32,.5) 36%,rgba(8,16,32,.12) 68%,rgba(8,16,32,0) 100%),
  linear-gradient(0deg,rgba(8,16,32,.92) 0%,rgba(8,16,32,.55) 30%,rgba(8,16,32,0) 58%);}
.hero-bg{animation:heroSettle 2.6s var(--ease) both;}
@keyframes heroSettle{from{transform:scale(1.04);}to{transform:none;}}
.hero{padding-block:clamp(120px,17vh,200px) 64px;min-height:min(80vh,780px);gap:56px;}
.hero .eyebrow{color:rgba(255,255,255,.78);}
.hero .eyebrow::before{background:rgba(255,255,255,.7);}
.hero h1{font-size:clamp(2.4rem,4.6vw,4.2rem);font-weight:300;letter-spacing:-.035em;line-height:1.04;margin-bottom:28px;}
.hero .lede{font-size:1.14rem;font-weight:300;line-height:1.7;color:rgba(255,255,255,.8);max-width:50ch;}
.hero-ctas{gap:14px;margin-top:32px;}

.manifest-card{background:rgba(10,21,40,.45);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-l);box-shadow:none;
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);}
.manifest-body{padding:28px 28px 30px;}
.manifest-card .stamp{border-color:rgba(255,255,255,.32);border-radius:999px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;}
.manifest-body h3{font-size:1.5rem;font-weight:400;letter-spacing:-.02em;margin-top:18px;}
.manifest-meta{color:rgba(255,255,255,.62);font-size:.84rem;margin-top:8px;}
.manifest-price{font-family:var(--font-body);font-weight:300;font-size:1.75rem;letter-spacing:-.02em;color:#fff;margin-top:18px;}
.manifest-body .btn{margin-top:22px;}
.manifest-card .btn-primary{background:#fff;color:#10203F;}
.manifest-card .btn-primary:hover{background:#E8EDF6;}

/* hero slideshow. Each photo is loaded before anything changes; then, in the same frame,
   the new photo fades in over the old one while settling from a slight zoom, and the
   card's details fade in from a soft blur over the same 1.2s, so car and details arrive together. */
.hero-bg{--hero-fade:1.2s;}
.hero-bg img{position:absolute;inset:0;opacity:0;transform:scale(1.07);
  transition:opacity var(--hero-fade) var(--ease),transform 8s cubic-bezier(.2,.6,.3,1);}
.hero-bg img.is-current{opacity:1;transform:scale(1);}
.hero-bg img.is-leaving{opacity:0;transform:scale(1);transition:opacity var(--hero-fade) var(--ease);}
.manifest-body.is-changing{animation:heroCardIn 1.2s var(--ease) both;}
@keyframes heroCardIn{from{opacity:0;filter:blur(8px);transform:translateY(8px);}to{opacity:1;filter:none;transform:none;}}
.hero-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 28px 22px;}
.hero-dots{display:flex;gap:4px;}
/* 24px tap targets around small visible dots */
.hero-dot{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;}
.hero-dot::before{content:"";width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.4);transition:width .4s var(--ease),background-color .3s var(--ease);}
.hero-dot:hover::before{background:rgba(255,255,255,.75);}
.hero-dot[aria-current="true"]{width:36px;}
.hero-dot[aria-current="true"]::before{width:28px;background:rgba(255,255,255,.35);}
/* the current dot fills up until the next car arrives */
.hero-dot[aria-current="true"]::after{content:"";position:absolute;left:4px;top:8px;width:28px;height:8px;border-radius:999px;background:#fff;
  transform-origin:left;transform:scaleX(1);}
.hero-dot{position:relative;}
.is-running .hero-dot[aria-current="true"]::after{animation:heroProgress var(--hero-every,7s) linear both;}
@keyframes heroProgress{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.hero-pause{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;cursor:pointer;
  display:grid;place-items:center;transition:border-color .3s var(--ease),background-color .3s var(--ease);}
.hero-pause:hover{border-color:#fff;background:rgba(255,255,255,.1);}
.hero-pause svg{width:12px;height:12px;fill:currentColor;}

/* search: a calm concierge panel */
.specsearch{background:var(--surface);border-radius:var(--radius-l);padding:30px 32px 22px;border:0;
  box-shadow:0 40px 90px -46px rgba(0,0,0,.7);}
.ss-head{margin-bottom:22px;}
.ss-title{font-size:1.4rem;font-weight:400;letter-spacing:-.02em;}
.ss-main,.ss-more{gap:16px;}
.ss-more{margin-top:16px;padding-top:18px;}
.ss-field label{font-size:.78rem;font-weight:500;letter-spacing:.02em;color:var(--text-muted);}
.ss-field select,.ss-field input[type="text"]{background-color:var(--surface-alt);border:1px solid transparent;font-weight:400;}
.ss-field select:hover,.ss-field input[type="text"]:hover{border-color:var(--line-strong);}
.ss-submit{height:52px;min-height:52px;padding-inline:32px;}
.ss-foot{margin-top:16px;gap:24px;}

.live-pill{font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);}
.live-pill.is-live::before{animation:none !important;}

.bodychips{margin-top:22px;gap:10px;}
.bc-label{color:rgba(255,255,255,.66);font-size:.84rem;}
.bodychip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;font-weight:400;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);}
.bodychip span{background:rgba(255,255,255,.14);}
.bodychip:hover{background:#fff;border-color:#fff;color:#10203F;}
.bodychip:hover span{background:rgba(16,32,63,.08);}

.hero-band .hero-stats{margin-top:64px;border-top-color:rgba(255,255,255,.14);}
.hero-stat{padding:28px 24px 36px 0;}
.hero-stat + .hero-stat{border-left-color:rgba(255,255,255,.14);padding-left:28px;}
.hero-stat b{font-family:var(--font-body);font-weight:300;font-size:clamp(1.35rem,2.2vw,2rem);letter-spacing:-.02em;}
.hero-stat span{display:block;margin-top:6px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.58);}

@media (max-width:900px){
  .hero-bg img{height:58vh;inset:0 0 auto 0;}
  /* phones: a compact caption over the photo names the car on screen */
  .hero .manifest-card{display:block;position:absolute;top:14px;left:max(20px,4vw);right:max(20px,4vw);width:auto;max-width:none;z-index:1;
    border-radius:var(--radius-m);background:rgba(10,21,40,.55);}
  .hero .manifest-card:empty{display:none;}
  .hero .manifest-body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:12px 14px 4px;}
  .hero .manifest-card .stamp,.hero .manifest-meta{display:none;}
  .hero .manifest-body h3{grid-column:1/-1;font-size:1rem;line-height:1.25;margin:0;}
  .hero .manifest-price{grid-column:1;font-size:.92rem;font-weight:400;margin:4px 0 0;white-space:nowrap;color:rgba(255,255,255,.85);}
  .hero .manifest-body .btn{grid-column:2;margin:4px 0 0;min-height:36px;padding:0 12px;font-size:.78rem;}
  .hero .hero-controls{padding:0 10px 6px;}
  .hero .hero-pause{width:28px;height:28px;}
  .hero-band::before{background:linear-gradient(180deg,rgba(8,16,32,0) 0,rgba(8,16,32,.08) 20vh,rgba(8,16,32,.72) 42vh,var(--deep) 58vh);}
  .hero{padding-block:36vh 36px;}
  .hero-stat{padding:22px 16px 26px 0;}
  .hero-stat + .hero-stat{padding-left:18px;}
  .hero-stat:nth-child(odd){padding-left:0;}
  .hero-stat:nth-child(n+3){border-top-color:rgba(255,255,255,.14);}
  .hero-band .hero-stats{margin-top:44px;}
}
@media (max-width:560px){
  .specsearch{padding:22px 18px 16px;}
  .hero .lede{font-size:1.02rem;}
}

/* brand strip: quiet, scrolling (animation comes from styles.css) */
.ribbon{background:var(--ribbon-bg);color:var(--ribbon-fg);border-bottom:1px solid var(--menu-line);padding-block:24px;}
.ribbon-track{gap:24px;padding-right:24px;font-family:var(--font-body);
  font-size:.72rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;}
.ribbon-track span{gap:24px;}
.ribbon-track span::after{width:4px;height:4px;background:var(--ember);opacity:.85;}
@media (max-width:560px){
  .ribbon{padding-block:18px;}
  .ribbon-track{font-size:.64rem;letter-spacing:.12em;gap:14px;padding-right:14px;}
  .ribbon-track span{gap:14px;}
}
/* reduced motion: hold still as a centred, wrapping line */
@media (prefers-reduced-motion: reduce){
  .ribbon{white-space:normal;}
  .ribbon-inner{display:flex;justify-content:center;}
  .ribbon-track + .ribbon-track{display:none;}
  .ribbon-track{display:flex;flex-wrap:wrap;justify-content:center;row-gap:12px;padding:0 20px;}
  .ribbon-track span:last-child::after{content:none;}
}

/* =====================================================================
   Editorial value columns (no boxes)
   ===================================================================== */
.valuegrid{gap:clamp(40px,5vw,72px) clamp(32px,4vw,56px);background:none;border:0;border-radius:0;}
.valuecard{background:none;border:0;border-top:1px solid var(--line-strong);border-radius:0;box-shadow:none;padding:30px 0 0;}
.valuecard .num{display:block;width:auto;height:auto;background:none;border-radius:0;font-family:var(--font-body);
  font-weight:400;font-size:.76rem;letter-spacing:.16em;color:var(--accent-text);}
.valuecard h3{font-size:1.4rem;font-weight:400;margin-top:22px;}
.valuecard p{font-size:1rem;line-height:1.75;color:var(--text-muted);margin-top:14px;}
.valuecard .linkbtn{margin-top:18px;}
.about-values{margin-top:var(--section);}

/* =====================================================================
   Vehicle cards: photograph first, a few quiet lines beneath
   ===================================================================== */
.vgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(36px,4vw,48px) clamp(18px,2vw,28px);}
@media (max-width:640px){ .vgrid{grid-template-columns:minmax(0,1fr);} }

/* home featured stock: fresh imports beside Ugandan used, two cars each */
.stock-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,4vw,64px);}
.stock-split{column-gap:0;}
.stock-col:first-child{padding-right:clamp(20px,2.4vw,36px);}
.stock-col + .stock-col{padding-left:clamp(20px,2.4vw,36px);border-left:1px solid var(--line);}
.stock-col-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:18px;margin-bottom:28px;border-bottom:1px solid var(--line);}
.stock-col-head h3{font-size:1.4rem;font-weight:400;letter-spacing:-.015em;}
.stock-col-head p{margin-top:6px;font-size:.92rem;color:var(--text-muted);}
.stock-col-head .linkbtn{flex:none;white-space:nowrap;}
.vgrid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:1000px){
  .stock-split{grid-template-columns:minmax(0,1fr);}
  .stock-split{row-gap:56px;}
  .stock-col:first-child{padding-right:0;}
  .stock-col + .stock-col{padding-left:0;border-left:0;}
}
@media (max-width:640px){ .vgrid-2{grid-template-columns:minmax(0,1fr);} }

/* stock type: a quiet label on cards, a switch in the admin list */
.stock-tag{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;
  font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);}
.stock-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.stock-tag.stock-import::before{background:#2F5597;}
.stock-tag.stock-local::before{background:#C8921F;}
.stock-switch{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:999px;border:1px solid var(--line-strong);background:none;
  font-size:.72rem;font-weight:500;color:var(--text);cursor:pointer;}
.stock-switch.stock-local{border-color:rgba(200,146,31,.55);}
.stock-switch:hover{border-color:var(--heading);color:var(--heading);}

/* inventory: All stock / On the lot now / Ugandan used */
.stock-tabs{display:flex;flex-wrap:wrap;gap:0 36px;margin:0 0 clamp(28px,3vw,40px);border-bottom:1px solid var(--line);}
.stock-tabs a{padding:14px 0;margin-bottom:-1px;font-size:1rem;color:var(--text-muted);text-decoration:none;box-shadow:inset 0 -1px 0 transparent;
  transition:color .3s var(--ease),box-shadow .3s var(--ease);}
.stock-tabs a span{margin-left:6px;font-size:.78rem;opacity:.8;}
.stock-tabs a:hover{color:var(--heading);}
.stock-tabs a[aria-current="page"]{color:var(--heading);box-shadow:inset 0 -2px 0 var(--ember);}
@media (max-width:560px){
  .stock-tabs{gap:8px;border-bottom:0;}
  .stock-tabs a{padding:8px 14px;margin:0;font-size:.88rem;border:1px solid var(--line-strong);border-radius:999px;}
  .stock-tabs a span{display:none;}
  .stock-tabs a[aria-current="page"]{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg);box-shadow:none;}
}
/* phones: one card per row with a shorter crop */
@media (max-width:640px){ .vgrid{gap:36px;} .vgrid .vcard .swatch{aspect-ratio:16/10;} }

.vcard{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;
  transition:transform .6s var(--ease);}
.vcard:hover{transform:none;box-shadow:none;}
.vcard .swatch{aspect-ratio:4/3;border-radius:var(--radius-m);overflow:hidden;isolation:isolate;}
.vcard .car-photo{transition:transform 1.1s var(--ease);}
.vcard:hover .car-photo{transform:scale(1.04);}
.vcard .swatch::after{background:linear-gradient(to bottom,rgba(0,0,0,.2),transparent 30%);}
.vcard .lot{top:14px;left:14px;background:rgba(255,255,255,.88);color:#10203F;font-size:.68rem;font-weight:500;letter-spacing:.08em;
  border-radius:6px;padding:4px 9px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.badge-new{top:44px;left:14px;background:var(--ember);color:#fff;border-radius:6px;font-size:.64rem;letter-spacing:.14em;padding:3px 8px;}
.vcard .status{bottom:14px;right:14px;background:rgba(255,255,255,.9);color:#10203F;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.vcard .sold-ribbon{transform:none;left:14px;bottom:14px;padding:4px 10px;border-radius:6px;background:var(--brand-red);letter-spacing:.16em;box-shadow:none;z-index:1;}
.vcard .card-actions{top:12px;right:12px;gap:8px;}
.chipbtn{height:36px;min-width:36px;border-radius:999px;background:rgba(255,255,255,.88);color:#10203F;border:0;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .3s var(--ease),color .3s var(--ease);}
.chipbtn:hover{background:#fff;}
.chipbtn[aria-pressed="true"]{background:#10203F;color:#fff;}
.vcard .swatch .chipbtn svg{width:15px;height:15px;stroke-width:1.7;}

.vcard:not(.skeleton) .vcard-body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto 1fr;
  column-gap:16px;padding:22px 2px 0;}
.vcard-body h3,.vcard-body .spec-row,.vcard-body .desc{grid-column:1/-1;}
.vcard-body h3{font-size:1.18rem;font-weight:400;line-height:1.3;letter-spacing:-.01em;transition:color .3s var(--ease);}
.vcard-body .spec-row{gap:4px 8px;margin-top:8px;}
.vcard-body .spec-row span{background:none;padding:0;border-radius:0;font-size:.84rem;color:var(--text-muted);}
.vcard-body .spec-row span + span::before{content:none;}
.vcard-body .spec-row span:not(:last-child)::after{content:"·";margin-left:8px;opacity:.7;}
.vcard-body .desc{grid-row:3;margin-top:12px;}
.vcard-body .price{grid-row:4;align-self:end;font-family:var(--font-body);font-weight:400;font-size:1.2rem;letter-spacing:-.01em;
  color:var(--heading);margin:0;padding-top:18px;}
.vcard-body .btn{grid-row:4;grid-column:2;align-self:end;width:auto;min-height:44px;margin:0;padding:0;background:none;border:0;
  color:var(--heading);font-size:.84rem;font-weight:500;letter-spacing:.04em;justify-content:flex-end;}
.vcard-body .btn::after{content:"→";transition:transform .4s var(--ease);}
.vcard-body .btn:hover{background:none;transform:none;}
.vcard:hover .vcard-body .btn::after{transform:translateX(4px);}
.vcard-body .price{white-space:nowrap;}
/* narrow cards: the link drops under the price instead of squeezing it */
@media (max-width:420px){
  .vcard:not(.skeleton) .vcard-body{grid-template-columns:minmax(0,1fr);}
  .vcard-body .btn{grid-row:5;grid-column:1;justify-self:start;margin-top:4px;}
}
/* grid cards are narrow, so the link always sits under the price */
.vgrid:not(.as-list) .vcard:not(.skeleton) .vcard-body{grid-template-columns:minmax(0,1fr);}
.vgrid:not(.as-list) .vcard-body .btn{grid-row:5;grid-column:1;justify-self:start;margin-top:4px;}

.vgrid.as-list{gap:0;}
.vgrid.as-list .vcard{align-items:flex-start;padding-block:24px;border-bottom:1px solid var(--line);}
.vgrid.as-list .vcard:first-child{padding-top:0;}
.vgrid.as-list .vcard .swatch{width:240px;border-radius:var(--radius-m);aspect-ratio:4/3;min-height:0;}
.vgrid.as-list .vcard-body{padding:2px 0 0 28px;}
.vgrid.as-list .vcard-body h3{font-size:1.3rem;font-weight:400;}
/* thumbnails are small now, so the favourite / compare buttons stay icon-only */
.vgrid.as-list .vcard .chipbtn span{display:none;}
/* phones: a compact row, small thumbnail on the left */
@media (max-width:640px){
  .vgrid.as-list .vcard{flex-direction:row;align-items:flex-start;padding-block:18px;}
  .vgrid.as-list .vcard .swatch{width:128px;flex:none;aspect-ratio:4/3;border-radius:var(--radius-s);}
  .vgrid.as-list .vcard .lot,.vgrid.as-list .vcard .status,.vgrid.as-list .badge-new{display:none;}
  .vgrid.as-list .vcard .card-actions{top:6px;right:6px;gap:4px;}
  .vgrid.as-list .chipbtn{height:28px;min-width:28px;}
  .vgrid.as-list .vcard .swatch .chipbtn svg{width:13px;height:13px;}
  .vgrid.as-list .vcard-body{padding:0 0 0 14px;}
  .vgrid.as-list .vcard-body h3{font-size:1.02rem;}
  .vgrid.as-list .vcard-body .spec-row span{font-size:.78rem;}
  .vgrid.as-list .vcard-body .desc{display:none;}
  .vgrid.as-list .vcard-body .price{font-size:1.05rem;padding-top:10px;}
}

.skeleton .swatch{border-radius:var(--radius-m);}
.empty-state{border-color:var(--line-strong);border-radius:var(--radius-l);padding:56px 24px;}

/* status: a neutral label with a coloured dot */
.status{display:inline-flex;align-items:center;gap:7px;background:var(--surface-alt);color:var(--heading);font-size:.72rem;font-weight:500;
  letter-spacing:.02em;border-radius:999px;padding:4px 11px 4px 9px;}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.status-available::before{background:#3E8E5E;}
.status-reserved::before{background:#C08A2B;}
.status-sold::before{background:var(--ember);}

/* =====================================================================
   Import route: a quiet timeline with line icons
   ===================================================================== */
/* footer route map: its own band, soft blue-grey in light mode, deep navy in dark mode.
   Hidden on the import page, which has its own map. */
.foot-route-band{
  --rb-bg:radial-gradient(90% 120% at 100% 0%,#DCE4F2 0%,rgba(220,228,242,0) 60%),linear-gradient(180deg,#EEF2F8 0%,#E6ECF5 100%);
  --rb-heading:#10203F;--rb-text:#46506A;--rb-line:rgba(16,32,63,.28);--rb-line-hover:#10203F;
  --rb-land:rgba(16,32,63,.1);--rb-halo:#E9EEF6;--rb-dot:#10203F;
  --rb-japan:#B0303A;--rb-uk:#2F5597;--rb-road:#10203F;--rb-pin:#B0303A;--rb-pin-ring:#fff;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .foot-route-band{
    --rb-bg:radial-gradient(90% 120% at 100% 0%,rgba(47,85,151,.35) 0%,rgba(47,85,151,0) 60%),linear-gradient(180deg,#12203B 0%,#0E1A31 100%);
    --rb-heading:#F1F3F8;--rb-text:rgba(255,255,255,.74);--rb-line:rgba(255,255,255,.4);--rb-line-hover:#fff;
    --rb-land:rgba(255,255,255,.08);--rb-halo:#101D35;--rb-dot:rgba(255,255,255,.85);
    --rb-japan:#E0575B;--rb-uk:#8AA6D6;--rb-road:#fff;--rb-pin:#E0575B;--rb-pin-ring:#fff;}
}
:root[data-theme="dark"] .foot-route-band{
  --rb-bg:radial-gradient(90% 120% at 100% 0%,rgba(47,85,151,.35) 0%,rgba(47,85,151,0) 60%),linear-gradient(180deg,#12203B 0%,#0E1A31 100%);
  --rb-heading:#F1F3F8;--rb-text:rgba(255,255,255,.74);--rb-line:rgba(255,255,255,.4);--rb-line-hover:#fff;
  --rb-land:rgba(255,255,255,.08);--rb-halo:#101D35;--rb-dot:rgba(255,255,255,.85);
  --rb-japan:#E0575B;--rb-uk:#8AA6D6;--rb-road:#fff;--rb-pin:#E0575B;--rb-pin-ring:#fff;}

body[data-view="import"] .sitefooter{padding-top:clamp(40px,5vw,64px);}
body[data-view="import"] .foot-route-band{display:none;}
.sitefooter .foot-route-band{background:var(--rb-bg);color:var(--rb-text);padding-block:clamp(48px,6vw,80px);margin-bottom:clamp(40px,5vw,64px);}
.foot-route-band h2{color:var(--rb-heading);}
.foot-route-band .eyebrow{color:var(--rb-text);}
.foot-route-band .eyebrow::before{background:var(--rb-japan);}
.foot-route-band .btn-ghost-light{border-color:var(--rb-line);color:var(--rb-heading);}
.foot-route-band .btn-ghost-light:hover{background:transparent;border-color:var(--rb-line-hover);}
.foot-route{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:center;}
.foot-route-copy h2{font-size:clamp(2rem,4vw,3.25rem);font-weight:300;letter-spacing:-.03em;line-height:1.05;}
.foot-route-copy p{color:var(--rb-text);font-size:1.06rem;line-height:1.75;margin-top:22px;max-width:44ch;}
.foot-route .route-legend{flex-direction:column;gap:12px;margin-top:30px;font-size:.88rem;color:var(--rb-text);}
.foot-route .route-legend .key{width:26px;border-top-width:2px;}
.foot-route .route-legend .key-japan{border-top-color:var(--rb-japan);}
.foot-route .route-legend .key-uk{border-top-color:var(--rb-uk);}
.foot-route .route-legend .key-road{border-top-color:var(--rb-road);}
.foot-route-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}
.route-map.route-map-foot{margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;}
.route-map-foot .land{fill:var(--rb-land);}
.route-map-foot .route{stroke-width:2.2;}
.route-map-foot .route-japan{stroke:var(--rb-japan);}
.route-map-foot .route-uk{stroke:var(--rb-uk);}
.route-map.route-map-foot .route-japan,.route-map.route-map-foot .route-uk{animation:route-flow 1.4s linear infinite;}
.route-map-foot .route-road{stroke:var(--rb-road);stroke-width:2.4;}
.route-map-foot .port circle{fill:var(--rb-halo);stroke:var(--rb-dot);}
.route-map-foot .port text{font-size:11px;font-weight:500;fill:var(--rb-heading);stroke:var(--rb-halo);}
.route-map-foot .port-home circle{fill:var(--rb-pin);stroke:var(--rb-pin-ring);stroke-width:2;}
.route-map-foot .port-home .pulse{stroke:none;opacity:.5;transform-box:fill-box;transform-origin:center;animation:pinPulse 2.4s var(--ease) infinite;}
@keyframes pinPulse{from{transform:scale(1);opacity:.55;}to{transform:scale(3.6);opacity:0;}}
.route-map-foot .pin-name{font-size:13px;font-weight:700;fill:var(--rb-heading);}
.route-map-foot .pin-place{font-size:10px;font-weight:400;fill:var(--rb-text);}
@media (max-width:900px){
  .foot-route{grid-template-columns:minmax(0,1fr);}
  .route-map-foot .port text{font-size:15px;}
  .route-map-foot .pin-name{font-size:17px;}
  .route-map-foot .pin-place{display:none;}
}

/* shared icons for the five stages (drawn as masks, so they take the text colour) */
.route h3::before,.tstep h3::before{content:"";display:block;width:26px;height:26px;margin:22px 0 18px;background:currentColor;
  -webkit-mask:var(--stage-icon) center/contain no-repeat;mask:var(--stage-icon) center/contain no-repeat;opacity:.85;}
.tstep h3::before{margin:0 0 16px;}
.route li:nth-child(1),.tstep:nth-child(1){--stage-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='M20 20l-4.9-4.9'/></svg>");}
.route li:nth-child(2),.tstep:nth-child(2){--stage-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='4.5' width='14' height='16.5' rx='2'/><path d='M9 3h6v3H9zM9 13.5l2 2 4-4'/></svg>");}
.route li:nth-child(3),.tstep:nth-child(3){--stage-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 15h18l-2.4 5H5.4z'/><path d='M6.5 15v-5h11v5M12 10V5.5M9.5 5.5h5'/></svg>");}
.route li:nth-child(4),.tstep:nth-child(4){--stage-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 3h7.5l4 4v14h-11.5z'/><path d='M14 3v4h4M9.5 12h5.5M9.5 16h5.5'/></svg>");}
.route li:nth-child(5),.tstep:nth-child(5){--stage-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='15.5' r='4'/><path d='M11 12.5l8.5-8.5M16.5 7l2 2M14.3 9.2l1.6 1.6'/></svg>");}

/* import page: vertical timeline */
.split{gap:clamp(40px,7vw,120px);}
.split-aside p{font-size:1.06rem;line-height:1.75;margin-top:24px;}
.split-aside .btn{margin-top:28px;}
.timeline{gap:0;}
.tstep{position:relative;grid-template-columns:64px minmax(0,1fr);gap:32px;background:none;border:0;border-radius:0;box-shadow:none;padding:0 0 64px;}
.tstep::before{content:"";position:absolute;left:31.5px;top:72px;bottom:8px;width:1px;background:var(--line-strong);}
.tstep:last-child{padding-bottom:0;}
.tstep:last-child::before{content:none;}
.tstep .idx{width:64px;height:64px;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:400;font-size:.84rem;letter-spacing:.08em;color:var(--heading);background:var(--bg);}
.tstep h3{font-size:1.5rem;font-weight:400;margin:10px 0 12px;}
.tstep p{font-size:1.02rem;line-height:1.75;color:var(--text-muted);}
.tstep .meta{display:block;background:none;padding:0;margin-top:18px;border-radius:0;font-size:.7rem;letter-spacing:.14em;color:var(--text-muted);}
@media (max-width:520px){
  .tstep{grid-template-columns:44px minmax(0,1fr);gap:18px;padding:0 0 48px;}
  .tstep::before{left:21.5px;top:52px;}
  .tstep .idx{width:44px;height:44px;font-size:.76rem;}
  .tstep h3{font-size:1.3rem;margin-top:4px;}
}
.route-map{margin-top:48px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:none;padding:24px 22px 18px;}
.route-map .route-japan,.route-map .route-uk{animation:none;}

/* =====================================================================
   Inventory: filters as a soft concierge panel
   ===================================================================== */
.inv-layout{grid-template-columns:300px minmax(0,1fr);gap:clamp(32px,4vw,64px);}
.filterbar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:none;padding:28px 24px;gap:18px;}
.filter-head{font-family:var(--font-body);font-size:1.15rem;font-weight:400;letter-spacing:-.01em;border-bottom-color:var(--line);padding-bottom:18px;}
.frange legend{font-size:.82rem;font-weight:500;color:var(--text);margin-bottom:8px;}
.frange .field label{font-size:.74rem;}
.results-bar{font-size:.92rem;margin-bottom:28px;gap:16px;}
.active-filters{margin:-8px 0 28px;}
.ftag{box-shadow:none;border-color:var(--line-strong);font-weight:400;transition:border-color .3s var(--ease);}
.ftag:hover{border-color:var(--heading);}
.ftag:hover span{color:var(--heading);}
@media (max-width:860px){ .inv-layout{grid-template-columns:minmax(0,1fr);gap:24px;} }

.notify{background:var(--surface-alt);color:var(--text);border:0;border-radius:var(--radius-l);box-shadow:none;padding:clamp(32px,5vw,64px);
  margin-top:var(--section);gap:clamp(24px,4vw,64px);}
.notify h3{color:var(--heading);font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:300;letter-spacing:-.025em;}
.notify p{color:var(--text-muted);font-size:1rem;margin-top:12px;}
.notify form{gap:12px;}
.notify input{background:var(--field-bg);color:var(--text);border-color:var(--field-line);}
.notify input::placeholder{color:var(--text-muted);}

/* segmented control (grid / list) */
.seg{border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);padding:3px;gap:2px;overflow:visible;}
.seg button{border:0 !important;border-radius:6px;color:var(--text-muted);font-weight:500;font-size:.82rem;padding:7px 14px;
  transition:background-color .3s var(--ease),color .3s var(--ease);}
.seg button:hover{color:var(--heading);}
.seg button[aria-pressed="true"]{background:var(--surface-alt);color:var(--heading);}

/* page tabs (services, financing): quiet underlines */
.seg.fin-tabs{display:flex;flex-wrap:wrap;gap:0 36px;padding:0;margin:0 0 clamp(36px,5vw,56px);background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;}
.fin-tabs button{background:none;border-radius:0;padding:16px 0;margin-bottom:-1px;font-size:.98rem;font-weight:400;color:var(--text-muted);
  box-shadow:inset 0 -1px 0 transparent;transition:color .3s var(--ease),box-shadow .3s var(--ease);}
.fin-tabs button:hover{color:var(--heading);background:none;}
.fin-tabs button[aria-selected="true"]{background:none;color:var(--heading);box-shadow:inset 0 -2px 0 var(--heading);}
@media (max-width:560px){
  .seg.fin-tabs{gap:8px;border-bottom:0;}
  .fin-tabs button{flex:0 0 auto;margin:0;padding:9px 16px;font-size:.88rem;border:1px solid var(--line-strong) !important;border-radius:999px;}
  .fin-tabs button[aria-selected="true"]{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg) !important;box-shadow:none;}
}

/* =====================================================================
   Forms: large comfortable fields, soft borders, gentle focus
   ===================================================================== */
select,input[type="text"],input[type="tel"],input[type="email"],input[type="number"],input[type="password"],input[type="search"],input[type="date"],textarea,.datefield-btn{
  background-color:var(--field-bg);color:var(--text);border:1px solid var(--field-line);border-radius:var(--radius-s);
  min-height:52px;padding:13px 16px;font-size:1rem;font-weight:400;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease);}
select{-webkit-appearance:none;appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23858585' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5 6 7.5 9 4.5'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px;}
select.select-sm{padding:8px 38px 8px 14px !important;min-height:42px;background-position:right 14px center;}
input.select-sm{min-height:42px;padding:8px 14px !important;}
textarea{min-height:140px;line-height:1.6;}
select:hover,input:hover,textarea:hover,.datefield-btn:hover{border-color:var(--line-strong);}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--focus);box-shadow:var(--ring);}
.datefield-btn:focus-visible,.datefield.is-open .datefield-btn{outline:none;border-color:var(--focus);box-shadow:var(--ring);}
input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:.75;}
input[type="range"],.fin-inputs input[type="range"],.checkrow input{accent-color:var(--btn-bg);}

.field{gap:8px;}
.field label{font-size:.82rem;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--text);}
.field .opt{font-weight:350;color:var(--text-muted);}
form.stack{gap:22px;}

.formgroup{border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none;padding:32px 0 12px;margin:0 0 8px;}
.formgroup:first-child{border-top:0;padding-top:0;}
.formgroup legend{float:left;width:100%;padding:0;margin:0 0 24px;font-family:var(--font-body);font-size:1.3rem;font-weight:400;
  letter-spacing:-.015em;text-transform:none;color:var(--heading);}
.formgroup legend + *{clear:both;}
.formgrid{gap:22px 24px;}
.svcform .formgrid,.fin-apply .formgrid{gap:22px 24px;}

/* =====================================================================
   Panels: a white page on ivory, hairline edge, no floating shadow
   ===================================================================== */
.infocard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:none;padding:clamp(24px,3vw,40px);}
.infocard h3{font-size:1.4rem;font-weight:400;margin-bottom:18px;}
.infocard .row{padding-block:14px;border-top-color:var(--line);font-size:.96rem;}
.infocard .row b{font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);padding-top:4px;width:100px;}
.infocard .btn{margin-top:24px;}
.hourstable td{padding:12px 0;border-top-color:var(--line);}
.twocol{gap:clamp(32px,5vw,80px);}
.prose p{font-size:1.06rem;line-height:1.8;}
.prose p:first-child{font-size:clamp(1.3rem,2vw,1.6rem);font-weight:300;line-height:1.5;letter-spacing:-.01em;color:var(--heading);}

.svcbook-icon{width:52px;height:52px;border-radius:var(--radius-m);background:none;border:1px solid var(--line-strong);color:var(--heading);margin-bottom:22px;}
.svcbook-icon svg{width:24px;height:24px;stroke-width:1.4;}
.svcbook-list{font-size:.94rem;}
.svcbook-list li{padding:7px 0 7px 22px;}
.svc-next{font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin:18px 0 10px;}
.fin-steps{font-size:.94rem;line-height:1.7;}
.fin-layout{gap:clamp(28px,4vw,56px);}

/* financing: the answer is the focal point */
.fin-headline{background:var(--surface-alt);color:var(--text);border-radius:var(--radius-l);padding:clamp(28px,4vw,48px);}
.fin-kicker{color:var(--text-muted);font-size:.9rem;}
.fin-big{color:var(--heading);font-size:clamp(2.4rem,5vw,3.8rem);font-weight:300;letter-spacing:-.035em;line-height:1.05;margin:12px 0 10px;}
.fin-breakdown{background:none;border:0;border-radius:0;box-shadow:none;gap:0 32px;margin-top:28px;}
.fin-breakdown div{background:none;padding:16px 0;border-top:1px solid var(--line);}
.fin-breakdown dt{font-size:.78rem;}
.fin-breakdown dd{font-weight:400;font-size:1.08rem;margin-top:4px;}
.fin-bar{height:28px;border-radius:6px;margin-top:24px;}
.fin-bar-principal{background:var(--brand-navy);}
.fin-bar-interest{background:var(--ember);}
.fin-subhead{font-size:1.2rem;font-weight:400;margin:48px 0 16px;}
.fin-results .hero-ctas{margin-top:36px;}
.dtable-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:none;}
table.dtable th{font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:14px 16px;}
table.dtable td{padding:13px 16px;}
.fin-schedule{margin-top:20px;}
.fin-schedule summary{font-weight:500;}

/* =====================================================================
   Vehicle detail: a presentation, price up front
   ===================================================================== */
.modal-overlay,.drawer-overlay{background:rgba(14,15,18,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.modal{max-width:1240px;border-radius:var(--radius-l);border:1px solid var(--line);box-shadow:0 50px 120px -50px rgba(0,0,0,.55);}
.modal-close{top:16px;right:16px;width:40px;height:40px;background:rgba(255,255,255,.88);color:#10203F;border:0;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .3s var(--ease);}
.modal-close:hover{background:#fff;}
.drawer-head .modal-close{background:var(--surface-alt);color:var(--text);}
.vm{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);}
.vm-media{aspect-ratio:3/2;}
.vm-media .status{left:18px;bottom:18px;background:rgba(255,255,255,.9);color:#10203F;}
.vm-nav{width:44px;height:44px;background:rgba(255,255,255,.85);color:#10203F;font-size:1.5rem;font-weight:300;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .4s var(--ease),background-color .3s var(--ease);}
.vm-nav.prev{left:18px;}
.vm-nav.next{right:18px;}
@media (hover:hover){
  .vm-media .vm-nav{opacity:0;}
  .vm-media:hover .vm-nav,.vm-media .vm-nav:focus-visible{opacity:1;}
}
.vm-count{right:18px;bottom:18px;background:rgba(20,21,24,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:.06em;padding:4px 10px;}
.vm-thumbs{background:none;padding:14px 18px 0;gap:10px;}
.vm-thumbs button{width:84px;height:58px;border:0;border-radius:var(--radius-s);opacity:.5;transition:opacity .35s var(--ease),box-shadow .35s var(--ease);}
.vm-thumbs button:hover{opacity:.85;}
.vm-thumbs button[aria-pressed="true"]{opacity:1;box-shadow:0 0 0 1.5px var(--heading);border-color:transparent;}

.vm-info{display:flex;flex-direction:column;padding:clamp(24px,3.2vw,44px);}
.vm-info h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300;letter-spacing:-.03em;line-height:1.08;}
.vm-info > .modal-price{order:1;}
.vm-info > p{order:2;font-size:1.02rem;line-height:1.75;margin-top:22px !important;}
.vm-info > .specsheet{order:3;}
.vm-info > .calc{order:4;}
.modal-price{font-family:var(--font-body);font-weight:300;font-size:clamp(1.7rem,2.6vw,2.2rem);letter-spacing:-.02em;color:var(--heading);margin-top:14px;}
.vm-title-row{gap:20px;}
.vm-title-row .chipbtn{width:40px;height:40px;background:var(--surface);border:1px solid var(--line-strong);color:var(--heading);}
.vm-title-row .chipbtn:hover{border-color:var(--heading);}
.vm-title-row .chipbtn[aria-pressed="true"]{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg);}
.specsheet{background:none;padding:0;border-radius:0;gap:0 28px;margin-top:28px;font-size:.96rem;}
.specsheet div{padding:14px 0;border-top:1px solid var(--line);}
.specsheet div b{font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;}
.specsheet div span{font-weight:400;color:var(--heading);}
.calc{margin-top:32px;border-color:var(--line);border-radius:var(--radius-m);padding:18px 22px;}
.calc summary{font-weight:500;}
.calc summary .mono{color:var(--heading);font-weight:400;}
.calc-result b{font-family:var(--font-body);font-weight:400;font-size:1.4rem;}

.vm-side{padding:clamp(24px,3vw,40px);gap:18px;border-left-color:var(--line);}
.vm-side h3{font-size:1.35rem;font-weight:400;}
.vm-side .thread{background:var(--surface-alt);border-radius:var(--radius-m);}
.related{background:var(--surface-alt);padding:clamp(24px,3vw,40px);border-top:0;}
.related h3{font-size:1.2rem;font-weight:400;margin-bottom:18px;}
.related-row{gap:16px;}
.mini{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:10px;gap:14px;transition:border-color .3s var(--ease);}
.mini:hover{border-color:var(--heading);}
.mini b{font-weight:500;}
.mini span{color:var(--text-muted);font-weight:400;}
.thumb{border-radius:6px;}
@media (max-width:860px){
  .vm-side{border-top-color:var(--line);}
}

/* messages */
.msg.me,.msg.dealer,.cmsg.me{background:var(--btn-bg);color:var(--btn-fg);}
.cmsg.them,.msg.them{border-color:var(--line);}

/* =====================================================================
   Footer
   ===================================================================== */
.sitefooter{background:var(--footer-bg);color:#A6AFC0;border-top:3px solid var(--brand-red);padding-block:0 calc(24px + env(safe-area-inset-bottom,0px));}
.footgrid{gap:28px clamp(24px,3vw,48px);}
/* phones: Explore and Opening hours side by side, contacts full width */
@media (max-width:480px){
  .footgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;}
  .footgrid > :first-child,.footgrid > :nth-child(3){grid-column:1/-1;}
}
.footbrand{gap:12px;margin-bottom:12px;}
.sitefooter .footbrand .brand-logo{height:40px;}
/* footer company name: Cambria where the device has it, otherwise the site's usual font */
.sitefooter{--font-company:Cambria,var(--font-head);}
.footbrand .brand-name{color:#F3F5F9;font-family:var(--font-company);font-weight:700;font-size:1.1rem;letter-spacing:.06em;}
.footbrand .brand-sub{color:#8993A6;font-family:var(--font-company);letter-spacing:.26em;}
.footbottom .co-name{font-family:var(--font-company);}
.footgrid h4{font-family:var(--font-body);font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#8993A6;margin-bottom:10px;}
.footgrid p{color:#9CA5B7;font-size:.88rem;line-height:1.7;max-width:36ch;}
.footgrid a,.footgrid .footline{color:#D5DBE6;font-size:.9rem;padding-block:3px;}
.sitefooter a{transition:color .3s var(--ease);}
.footgrid a:hover{color:#fff;}
.footbottom{border-top-color:rgba(255,255,255,.08);margin-top:clamp(28px,4vw,40px);padding-top:16px;color:#7D879A;font-size:.78rem;letter-spacing:.02em;}

/* =====================================================================
   Floating helpers: chat, back to top, toast, compare
   ===================================================================== */
.chat-launcher{width:56px;height:56px;background:var(--brand-navy);color:#fff;box-shadow:0 18px 40px -18px rgba(16,20,30,.65);
  transition:transform .4s var(--ease),background-color .3s var(--ease);}
.chat-launcher:hover{background:var(--brand-blue);transform:translateY(-2px);}
.chat-launcher svg{width:24px;height:24px;stroke-width:1.6;}
.chat-teaser{border:1px solid var(--line);border-radius:14px 14px 4px 14px;box-shadow:0 20px 40px -24px rgba(16,32,63,.35);font-weight:400;right:94px;}
.chat-panel{border-radius:var(--radius-l);border-color:var(--line);box-shadow:0 40px 90px -40px rgba(14,15,18,.5);}
/* a compact chat window: smaller on desktop, a bottom sheet (not full screen) on phones */
.chat-panel{width:350px;height:min(500px,calc(100vh - 140px));}
.chat-head{padding:12px 14px;gap:10px;}
.chat-avatar{width:34px;height:34px;}
.chat-title b{font-size:.9rem;line-height:1.25;}
.chat-title .live-pill{font-size:.7rem;}
@media (max-width:560px){
  .chat-panel{inset:auto 10px calc(10px + env(safe-area-inset-bottom,0px)) 10px;width:auto;height:min(70vh,520px);
    border-radius:var(--radius-l);border:1px solid var(--line);}
}
.chat-head{background:var(--brand-navy);}
.chat-send{background:var(--btn-bg);color:var(--btn-fg);}
.chat-send:hover{background:var(--btn-bg-hover);}
.chat-chip:hover{border-color:var(--heading);color:var(--heading);}
.chat-car:hover{border-color:var(--heading);}
.to-top{background:var(--surface);color:var(--heading);border:1px solid var(--line-strong);box-shadow:0 14px 30px -20px rgba(16,32,63,.4);
  transition:border-color .3s var(--ease),transform .4s var(--ease);}
.to-top:hover{background:var(--surface);border-color:var(--heading);transform:translateY(-2px);}
.to-top svg{stroke-width:1.6;}
@media (max-width:560px){
  .chat-launcher{width:52px;height:52px;}
  .chat-teaser{right:80px;}
}
.toast{background:#10203F;border-radius:10px;padding:14px 22px;}
.compare-tray{border-radius:var(--radius-m);background:#10203F;}

/* date picker follows the calm palette */
.dp{border-radius:var(--radius-l);}
.dp-day.is-selected,.dp-day.range-start{background:var(--btn-bg);color:var(--btn-fg);}
.dp-day.in-range{background:rgba(20,33,61,.08);}
.dp-link{color:var(--heading);}

/* dealer area: same calm surfaces */
.kpi,.addvehicle,.inbox-split,.reqcard{border:1px solid var(--line);box-shadow:none;}
/* admin: a seller's photos on their request, with publish / reject forms */
.reqphotos{margin-top:16px;}
.reqphotos-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:12px;font-size:.9rem;}
.reqphotos-head b{font-weight:500;color:var(--heading);}
.photo-state{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-muted);}
.photo-state::before{content:"";width:7px;height:7px;border-radius:50%;background:#C08A2B;}
.photo-state.ok::before{background:#3E8E5E;}
.photo-state.no::before{background:var(--ember);}
.photo-state .linkbtn{font-size:.8rem;}
.reqphotos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;}
.reqphoto{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--radius-s);overflow:hidden;background:var(--surface-alt);}
.reqphoto img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease);}
a.reqphoto:hover img{transform:scale(1.04);}
.reqphoto.pick{cursor:pointer;}
.reqphoto.pick input{position:absolute;top:8px;left:8px;width:20px;height:20px;accent-color:var(--btn-bg);z-index:1;}
.reqphoto.pick:has(input:not(:checked)) img{opacity:.35;filter:grayscale(1);}
.reqform{margin-top:16px;padding:18px;border-radius:var(--radius-m);background:var(--surface-alt);}
.reqform .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:12px 0;}
.reqform .field{gap:6px;}
.reqform input,.reqform select,.reqform textarea{min-height:44px;padding:10px 12px;font-size:.92rem;}
.reqform textarea{min-height:88px;}
.reqform-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.kpi b{font-weight:400;}
.login-notice{box-shadow:none;}

/* =====================================================================
   Motion: page changes fade, sections settle in as they scroll into view
   ===================================================================== */
.view:not([hidden]){animation:viewIn .6s var(--ease) both;}
@keyframes viewIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.finpanel:not([hidden]){animation:viewIn .5s var(--ease) both;}

/* reveal on scroll (classes added by app.js, so no-JS still shows everything) */
.has-reveal [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--reveal-delay,0ms);}
.has-reveal [data-reveal].is-in{opacity:1;transform:none;}

.vgrid > .vcard{animation:cardIn .7s var(--ease) both;}
.vgrid > .vcard:nth-child(2){animation-delay:.06s;}
.vgrid > .vcard:nth-child(3){animation-delay:.12s;}
.vgrid > .vcard:nth-child(4){animation-delay:.18s;}
.vgrid > .vcard:nth-child(n+5){animation-delay:.24s;}
@keyframes cardIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* where enquiry alerts are going, above the inbox */
.alertbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-bottom:16px;padding:12px 16px;
  border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);font-size:.88rem;color:var(--text-muted);}
.alertbar[hidden]{display:none;}
.alertbar b{color:var(--heading);font-weight:600;}
.alertbar .dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);flex:none;}
.alertbar.on .dot{background:#3E8E5E;}
.alertbar .btn{margin-left:auto;}
@media (max-width:560px){.alertbar .btn{margin-left:0;width:100%;}}

/* ---------- Traffic tab ----------
   One data colour, checked against both surfaces for contrast and for the common
   forms of colour blindness; the text around it stays in the normal ink colours. */
:root{--chart:#2C5BB8;--chart-soft:rgba(44,91,184,.14);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--chart:#5E93E8;--chart-soft:rgba(94,147,232,.18);}
}
:root[data-theme="dark"]{--chart:#5E93E8;--chart-soft:rgba(94,147,232,.18);}

.traffic-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 20px;margin-bottom:20px;}
.traffic-head h3{font-size:1.15rem;margin:0 0 4px;}
.traffic-head .hint{margin:0;max-width:60ch;}
.traffic-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.traffic-controls .seg button{padding:7px 12px;}
.traffic-controls .seg button.active{background:var(--btn-dark-bg);color:var(--btn-dark-fg);}
#dtabTraffic .kpi i{display:block;font-style:normal;font-size:.72rem;letter-spacing:0;text-transform:none;color:var(--text-muted);margin-top:2px;}

.tpanel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:18px;margin-bottom:16px;}
.tpanel h4{margin:0 0 14px;font-size:.95rem;display:flex;align-items:baseline;gap:8px;}
.tpanel h4 .hint{font-size:.78rem;}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}
.tgrid .tpanel{margin-bottom:0;}

.tchart-wrap{position:relative;}
.tchart-peak{font-size:.78rem;color:var(--text-muted);margin-bottom:6px;}
.tchart-peak span{font-weight:600;color:var(--heading);font-size:.95rem;}
.tchart{width:100%;height:150px;display:block;}
.tbar{fill:var(--chart);}
.tbar:hover{fill:var(--heading);}
.tchart .taxis{stroke:var(--line-strong);stroke-width:1;}
.tchart-days{display:flex;justify-content:space-between;margin-top:7px;font-size:.74rem;color:var(--text-muted);}
.tchart-tip{position:absolute;transform:translate(-50%,-100%);background:var(--heading);color:var(--surface);
  border-radius:8px;padding:7px 10px;font-size:.78rem;line-height:1.35;pointer-events:none;white-space:nowrap;z-index:2;
  display:flex;flex-direction:column;box-shadow:0 10px 24px -12px rgba(8,16,32,.5);}
.tchart-tip[hidden]{display:none;}
.tchart-tip span{opacity:.85;}

.tlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.tlist-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 10px;border-radius:6px;font-size:.88rem;overflow:hidden;}
.tlist-fill{position:absolute;inset:0 auto 0 0;background:var(--chart-soft);border-radius:6px;}
.tlist-name{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}
.tlist-num{position:relative;flex:none;font-weight:600;color:var(--heading);}
.tlist-sub{font-weight:400;font-size:.76rem;color:var(--text-muted);}
@media (max-width:700px){
  /* two stat tiles a row, whatever the inventory tab's own tile rules say */
  #dtabTraffic .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  #dtabTraffic .kpis .kpi,#dtabTraffic .kpis .kpi:nth-child(n+4){grid-column:auto;}
  .traffic-controls{width:100%;justify-content:space-between;}
  .tpanel{padding:14px;}
  .tchart{height:120px;}
}

/* add-vehicle photo picker: drag or arrow the photos into their running order */
.pphotos{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;width:100%;margin:0 0 10px;padding:0;}
.pphoto{position:relative;aspect-ratio:4/3;border-radius:var(--radius-s);overflow:hidden;background:var(--surface-alt);border:1px solid var(--line);cursor:grab;touch-action:manipulation;}
.pphoto img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.pphoto.dragging{opacity:.4;}
.pphoto.over{outline:2px solid var(--heading);outline-offset:-2px;}
.pphoto-pos{position:absolute;top:6px;left:6px;padding:2px 7px;border-radius:999px;background:rgba(8,16,32,.72);color:#fff;font-size:.7rem;font-weight:600;line-height:1.5;}
.pphoto:first-child .pphoto-pos{background:var(--ember);}
.pphoto-acts{position:absolute;left:0;right:0;bottom:0;display:flex;gap:2px;padding:4px;background:linear-gradient(transparent,rgba(8,16,32,.75));}
.pphoto-acts button{flex:1;height:26px;border:0;border-radius:6px;background:rgba(255,255,255,.9);color:#10203F;font-size:.85rem;line-height:1;cursor:pointer;padding:0;}
.pphoto-acts button:hover:not(:disabled){background:#fff;}
.pphoto-acts button:disabled{opacity:.35;cursor:default;}
.pphoto-acts [data-del]{flex:0 0 30px;background:rgba(255,255,255,.9);color:var(--ember);font-size:1rem;}
.pphotos-hint{flex-basis:100%;margin-top:2px;}
@media (max-width:560px){
  .pphotos{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;}
  .pphoto-acts button{height:30px;}
}

/* dealer progress notice: top-right, just under the header */
.notice{
  position:fixed;top:calc(var(--topbar-h) + 12px);right:24px;z-index:400;
  width:min(360px,calc(100vw - 32px));display:flex;align-items:flex-start;gap:12px;
  padding:14px 12px 14px 16px;background:var(--surface);color:var(--text);
  border:1px solid var(--line-strong);border-left:4px solid var(--btn-bg);border-radius:var(--radius-m);
  box-shadow:0 18px 40px -18px rgba(8,16,32,.45);animation:noticeIn .3s var(--ease) both;
}
.notice[hidden]{display:none;}
.notice.is-success{border-left-color:#3E8E5E;}
.notice.is-error{border-left-color:var(--ember);}
.notice-icon{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;font-weight:700;line-height:1;}
.notice.is-loading .notice-icon{border:2.5px solid var(--line-strong);border-top-color:var(--heading);animation:noticeSpin .8s linear infinite;}
.notice.is-success .notice-icon{background:#3E8E5E;}
.notice.is-success .notice-icon::before{content:"✓";}
.notice.is-error .notice-icon{background:var(--ember);}
.notice.is-error .notice-icon::before{content:"!";}
.notice-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.notice-title{font-weight:600;color:var(--heading);font-size:.95rem;overflow-wrap:anywhere;}
.notice-text{font-size:.86rem;color:var(--text-muted);overflow-wrap:anywhere;}
.notice-bar{display:block;height:4px;margin-top:8px;border-radius:999px;background:var(--surface-alt);overflow:hidden;}
.notice-bar > span{display:block;height:100%;width:0;border-radius:inherit;background:var(--heading);transition:width .35s var(--ease);}
.notice-bar.indeterminate > span{width:35%;animation:noticeSlide 1.1s ease-in-out infinite;}
.notice.is-success .notice-bar,.notice.is-error .notice-bar{display:none;}
.notice-close{flex:none;width:28px;height:28px;margin:-4px -2px 0 0;border:0;border-radius:50%;background:none;color:var(--text-muted);font-size:1.2rem;line-height:1;cursor:pointer;}
.notice-close:hover{background:var(--surface-alt);color:var(--heading);}
@keyframes noticeIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
@keyframes noticeSpin{to{transform:rotate(360deg);}}
@keyframes noticeSlide{from{transform:translateX(-100%);}to{transform:translateX(290%);}}
@media (max-width:560px){.notice{right:16px;top:calc(var(--topbar-h) + 8px);}}

/* people who ask for less motion get none */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .has-reveal [data-reveal]{opacity:1;transform:none;}
  .btn:hover,.vcard:hover .car-photo,.chat-launcher:hover,.to-top:hover{transform:none;}
}