/* Cars on Caledon — Polish layer: hero cinema, grid ribbons/quick-view/skeletons,
   reviews strip (dark band), delivered ticker, mobile sticky bar.
   Light page → any white-text section gets its own dark background. */

:root{
  --coc-blue:#23419A; --coc-blue-bright:#4C7EF3; --coc-blue-deep:#16296B;
  --coc-gold:#D9B166; --coc-wa:#25D366;
}


/* ===== KEYBOARD FOCUS =====
   The page sets outline:none in several places, which left keyboard users with
   no visible focus anywhere. :focus-visible only fires for keyboard/AT input,
   so mouse users never see a ring. */
:focus-visible{
  outline:3px solid #6E9BFF;
  outline-offset:2px;
  border-radius:4px;
}
.hero :focus-visible,
.search-panel :focus-visible,
footer :focus-visible{outline-color:#9BB4F0;}
/* skip link — first tab stop, off-screen until focused */
.coc-skip{
  position:absolute;left:12px;top:-64px;z-index:400;
  background:#fff;color:#111318;font-weight:800;font-size:13px;
  padding:12px 18px;border-radius:10px;text-decoration:none;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.5);
  transition:top .2s ease;
}
.coc-skip:focus{top:12px;}

/* ===== TRUINSPECT · WORKSHOP BOOKING =====
   Dark panel under the sell grid. Books a 20-minute workshop inspection —
   the firm trade-in offer is handed over on-site, so this only gathers
   what the dealer needs to run the visit. */
.coc-trade{
  margin-top:34px;border-radius:22px;padding:clamp(22px,4vw,36px);
  background:
    radial-gradient(110% 90% at 88% 8%,rgba(46,84,190,.4),transparent 60%),
    linear-gradient(150deg,#0E1730 0%,#16244A 55%,#0B1226 100%);
  border:1px solid rgba(255,255,255,.09);color:#fff;
  box-shadow:0 30px 70px -30px rgba(10,16,40,.65);
}
.coc-trade .ct-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#F0D28C;background:rgba(217,177,102,.12);border:1px solid rgba(217,177,102,.3);
  border-radius:100px;padding:7px 14px;margin-bottom:14px;
}
.coc-trade .ct-badge i{width:6px;height:6px;border-radius:50%;background:#F0D28C;animation:cocPulse 1.8s ease-in-out infinite;}
.coc-trade h3{font-size:clamp(19px,2.6vw,26px);letter-spacing:-.02em;line-height:1.15;margin-bottom:8px;}
.coc-trade .ct-head p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.65);max-width:62ch;}
.coc-trade .ct-head p b{color:#fff;}
.ct-grid{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:22px;margin-top:24px;align-items:start;}
@media(max-width:900px){.ct-grid{grid-template-columns:1fr;gap:18px;}}
.ct-step{display:flex;gap:14px;}
.ct-sn{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-size:13px;font-weight:900;
  background:rgba(110,155,255,.16);border:1px solid rgba(110,155,255,.35);color:#9BB4F0;
}
.ct-fields{flex:1;min-width:0;display:grid;gap:12px;}
.ct-f label{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:6px;}
.ct-f input{
  width:100%;padding:12px 14px;border-radius:11px;min-height:44px;
  border:1.5px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  font-family:var(--ff,inherit);font-size:14px;font-weight:600;color:#fff;outline:none;
  transition:border-color .25s,background .25s;
}
.ct-f input::placeholder{color:rgba(255,255,255,.3);}
.ct-f input:focus{border-color:#6E9BFF;background:rgba(255,255,255,.1);}
.ct-f2{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;}
@media(max-width:480px){.ct-f2{grid-template-columns:1fr;}}
.ct-chips{display:flex;flex-wrap:wrap;gap:7px;}
.ct-chips + .ct-chips{margin-top:8px;}
.ct-chips button{
  font-family:inherit;font-size:12px;font-weight:700;color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.13);
  border-radius:100px;padding:9px 15px;cursor:pointer;min-height:38px;
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.ct-chips button:hover{border-color:rgba(110,155,255,.5);}
.ct-chips button.on{
  background:linear-gradient(135deg,#6E9BFF,#2E54BE);border-color:transparent;color:#fff;
  box-shadow:0 6px 16px -6px rgba(46,84,190,.6);
}
.ct-cta .ct-book{width:100%;justify-content:center;min-height:48px;font-size:14px;}
.ct-note{font-size:11px;line-height:1.55;color:rgba(255,255,255,.45);}
.ct-note b{color:rgba(255,255,255,.7);}

/* ===== DOUBLE-TAP CALL BUTTON =====
   .coc-call: idle -> .armed (green sweep, "tap again to call") -> dial.
   The sweep is a scaling ::before layer, so nothing here touches layout. */
.coc-call{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  font:inherit;font-weight:800;color:inherit;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:100px;padding:8px 16px;cursor:pointer;overflow:hidden;
  transition:border-color .3s,box-shadow .3s,transform .2s;
  -webkit-tap-highlight-color:transparent;
}
.coc-call::before{
  content:"";position:absolute;inset:0;border-radius:100px;
  background:linear-gradient(145deg,#2FDC74,#1DA851);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.coc-call svg{position:relative;width:15px;height:15px;flex-shrink:0;}
.coc-call .cc-num,.coc-call .cc-arm{position:relative;white-space:nowrap;transition:opacity .3s,transform .3s;}
.coc-call .cc-arm{
  position:absolute;left:38px;right:16px;text-align:left;
  opacity:0;transform:translateY(8px);font-size:12px;letter-spacing:.02em;
}
.coc-call .cc-ring{position:absolute;inset:-4px;border-radius:100px;pointer-events:none;}
/* armed */
.coc-call.armed{border-color:rgba(47,220,116,.7);box-shadow:0 6px 22px -6px rgba(37,211,102,.55);}
.coc-call.armed::before{transform:scaleX(1);}
.coc-call.armed svg{color:#fff;animation:ccWiggle .5s ease .15s 2;}
.coc-call.armed .cc-num{opacity:0;transform:translateY(-8px);}
.coc-call.armed .cc-arm{opacity:1;transform:none;color:#fff;}
.coc-call.armed .cc-ring{
  border:2px solid rgba(47,220,116,.6);
  animation:ccRing 1.1s ease-out infinite;
}
.coc-call.dialing{transform:scale(.95);}
@keyframes ccRing{0%{transform:scale(1);opacity:1;}100%{transform:scale(1.25);opacity:0;}}
@keyframes ccWiggle{0%,100%{transform:rotate(0);}25%{transform:rotate(-14deg);}75%{transform:rotate(12deg);}}
/* text variant — inline link look for hero-meta / visit / footer; the number
   only exists in the armed state, so it's never scraped-at-a-glance either */
.coc-call-text{
  background:none;border:none;border-radius:0;padding:0;overflow:visible;
  gap:6px;font:inherit;color:inherit;cursor:pointer;
  border-bottom:1px dashed currentColor;
}
.coc-call-text::before{display:none;}
.coc-call-text .cc-ring{display:none;}
.coc-call-text .cc-arm{position:static;text-align:inherit;font-size:inherit;}
.coc-call-text .cc-num{transition:none;}
.coc-call-text.armed{border-bottom-color:#25D366;}
.coc-call-text.armed .cc-num{display:none;}
.coc-call-text .cc-arm{display:none;}
.coc-call-text.armed .cc-arm{display:inline;opacity:1;transform:none;color:#25D366;font-weight:800;}

/* the mobile-bar variant sits on a light bar, keep its idle look */
.coc-mbar .coc-call{background:var(--paper-2,#EEF0F5);color:var(--coc-blue-deep);border:1px solid var(--line,rgba(17,19,24,.1));justify-content:center;border-radius:11px;}
.coc-mbar .coc-call::before{border-radius:11px;}
.coc-mbar .coc-call .cc-arm{text-align:center;left:12px;right:12px;}
.coc-mbar .coc-call .cc-ring{border-radius:11px;}

/* ===== TOPBAR TICKER (mobile) =====
   The two-group topbar squashes below 720px. Hide the static groups and run a
   seamless marquee instead — content is duplicated once, track slides -50%. */
.tb-tick{display:none;}
@media(max-width:720px){
  .topbar .tl.tb-static{display:none;}
  /* Taller bar + a bit more gap — the marquee, its dots, and the compact call
     button were all crammed into the same 36px as the desktop two-group
     layout, with barely a hairline of padding around any of it. */
  .topbar .wrap{gap:14px;height:42px;}
  .tb-tick{display:block;flex:1;min-width:0;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .tb-track{
    display:inline-flex;align-items:center;gap:22px;white-space:nowrap;
    animation:tbTick 26s linear infinite;will-change:transform;
  }
  .tb-track span{display:inline-flex;align-items:center;gap:6px;font-size:11px;}
  .tb-track i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.35);flex-shrink:0;}
  @keyframes tbTick{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  /* keep the call button compact next to the ticker, but not squeezed */
  .topbar .coc-call{padding:7px 14px;}
  .topbar .coc-call .cc-num{font-size:11px;}
}
@media(prefers-reduced-motion:reduce){.tb-track{animation:none;}}

/* ===== MOBILE HEADER FILL =====
   Live status pill + WhatsApp tap between the logo and the burger. Desktop
   already has the nav links there, so both stay hidden above 860px. */
.nav-status,.nav-wa{display:none;}
@media(max-width:860px){
  .nav-status{
    display:inline-flex;align-items:center;gap:7px;
    margin-left:auto;margin-right:2px;
    font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--coc-blue-deep);text-decoration:none;
    background:rgba(35,65,154,.07);border:1px solid rgba(35,65,154,.16);
    border-radius:100px;padding:8px 13px;white-space:nowrap;
  }
  .nav-status i{
    width:7px;height:7px;border-radius:50%;background:#22C55E;flex-shrink:0;
    box-shadow:0 0 0 0 rgba(34,197,94,.55);
    animation:cocStatusPulse 2s ease-out infinite;
  }
  .nav-status.closed i{background:#F59E0B;animation:none;}
  .nav-status.closed{color:#8a6d1f;background:rgba(245,158,11,.09);border-color:rgba(245,158,11,.25);}
  @keyframes cocStatusPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55);}100%{box-shadow:0 0 0 9px rgba(34,197,94,0);}}
  .nav-wa{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:50%;flex-shrink:0;
    color:#fff;background:linear-gradient(145deg,#2FDC74,#1DA851);
    box-shadow:0 6px 16px -6px rgba(37,211,102,.55);
  }
  .nav-wa svg{width:19px;height:19px;}
  .nav-wa:active{transform:scale(.94);}
}
@media(max-width:420px){
  .nav-status{font-size:9.5px;padding:7px 11px;letter-spacing:.05em;}
}
@media(max-width:350px){
  .nav-status span{display:none;}          /* dot-only pill on the tightest screens */
  .nav-status{padding:8px 9px;}
}

/* ===== CARD CLICKABILITY ===== */
#invgrid .card{cursor:pointer;}

/* ===== SKELETON LOADERS ===== */
.coc-sk{border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line,rgba(17,19,24,.08));box-shadow:0 8px 24px -16px rgba(17,19,24,.2);}
.coc-sk .sk-ph{aspect-ratio:16/10;}
.coc-sk .sk-b{padding:16px;display:grid;gap:10px;}
.coc-sk .sk-line{height:12px;border-radius:6px;}
.coc-sk .sk-line.s{width:55%;}
.coc-sk .sk-line.m{width:75%;}
.coc-sk .sk-ph,.coc-sk .sk-line{
  background:linear-gradient(100deg,#EDEFF4 30%,#E1E5EE 50%,#EDEFF4 70%);
  background-size:200% 100%;animation:cocShimmer 1.4s linear infinite;
}
@keyframes cocShimmer{from{background-position:180% 0;}to{background-position:-20% 0;}}

/* ===== STATUS RIBBONS ===== */
.coc-ribbon{
  position:absolute;left:12px;bottom:12px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:6px 11px;border-radius:100px;color:#fff;
  backdrop-filter:blur(6px);box-shadow:0 4px 14px -4px rgba(0,0,0,.4);
  pointer-events:none;transition:opacity .25s;
}
.coc-ribbon i{width:6px;height:6px;border-radius:50%;background:#fff;animation:cocPulse 1.8s ease-in-out infinite;}
@keyframes cocPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.7);}}
.coc-ribbon.arrived{background:rgba(35,65,154,.9);}
.coc-ribbon.reduced{background:rgba(217,177,102,.95);color:#141a2c;}
.coc-ribbon.reduced i{background:#141a2c;}
.coc-ribbon.reserved{background:rgba(220,38,38,.9);}
.card:hover .coc-ribbon{opacity:0;}

/* ===== QUICK VIEW BAR ===== */
.coc-qv{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 10px;cursor:pointer;
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(11,18,40,.92) 45%);
  transform:translateY(105%);transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.coc-qv svg{width:14px;height:14px;color:var(--coc-blue-bright);}
.card:hover .coc-qv{transform:none;}
/* Hide on ANY touch device. `hover:none` alone is not enough — Android Chrome,
   Windows touch laptops and in-app webviews (Facebook/Instagram) often report
   hover:hover, where a tap leaves a sticky :hover and the bar stays parked
   across the vehicle image. pointer:coarse catches those. */
@media (hover:none),(pointer:coarse){.coc-qv{display:none !important;}}


/* ===== DELIVERED TICKER (raised to clear TruAfford pill) ===== */
/* While the hero is in view the ticker used to overlap the search panel
   headline — hide it until the visitor scrolls past. */
html.coc-hero-visible .coc-ticker{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
.coc-ticker{
  position:fixed;left:20px;bottom:120px;z-index:210;
  display:flex;align-items:center;gap:11px;max-width:320px;
  background:linear-gradient(160deg,rgba(20,32,62,.96),rgba(12,20,40,.97));
  border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 16px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.55);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .45s,transform .45s cubic-bezier(.22,1,.36,1);
}
.coc-ticker.show{opacity:1;transform:none;}
.coc-ticker .tk-ic{width:34px;height:34px;border-radius:9px;flex-shrink:0;background:rgba(34,197,94,.14);color:#22C55E;display:flex;align-items:center;justify-content:center;}
.coc-ticker .tk-ic svg{width:16px;height:16px;}
.coc-ticker b{display:block;font-size:12px;color:#fff;}
.coc-ticker span{font-size:10.5px;color:rgba(255,255,255,.45);}
@media(max-width:860px){.coc-ticker{display:none;}}

/* ===== MOBILE STICKY ACTION BAR ===== */
.coc-mbar{display:none;}
@media(max-width:720px){
  .coc-mbar{
    position:fixed;left:0;right:0;bottom:0;z-index:230;
    display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);border-top:1px solid var(--line,rgba(17,19,24,.1));
    backdrop-filter:blur(6px);box-shadow:0 -6px 24px -12px rgba(17,19,24,.25);
  }
  .coc-mbar a{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:800;border-radius:11px;padding:12px 8px;text-decoration:none;}
  .coc-mbar a svg{width:15px;height:15px;flex-shrink:0;}
  .coc-mbar .mb-call{background:var(--paper-2,#EEF0F5);color:var(--coc-blue-deep);border:1px solid var(--line,rgba(17,19,24,.1));}
  .coc-mbar .mb-wa{background:var(--coc-wa);color:#fff;}
  .coc-mbar .mb-stock{background:linear-gradient(135deg,var(--coc-blue-bright),var(--coc-blue));color:#fff;}
  body.vd-lock .coc-mbar{display:none;}
  .coc-ticker{display:none;}

  /* Push TruAfford above TruChat so their launchers don't overlap (same z-index).
     TruChat: bottom ≈ 96px, 52px tall → top ≈ 148px. TruAfford: bottom 160px
     → top ≈ 220px — clear gap. */
  #tru-afford-host{bottom:160px !important;}
  /* Lift TruForm panel clear of the sticky bar (0–98px on notched devices).
     108px leaves a 10px gap on the tallest phones. */
  #tru-form-1{bottom:108px !important;}

  /* The fixed bar overlays the end of the document — without this the footer's
     copyright / "Powered by TruSaaS" row is permanently hidden underneath it. */
  footer{padding-bottom:calc(78px + env(safe-area-inset-bottom)) !important;}
  /* 4 stacked columns at 40px gaps makes the mobile footer ~700px tall */
  footer .f-grid{gap:26px !important;}
}

/* TruAfford's brand colour is now set via the widget's own data-accent embed
   attribute (index.html) — the canonical build renders inside a shadow root,
   so a light-DOM override like `#tru-afford-root{...}` here can no longer
   reach in and was dead weight. */

/* ===== WIDGET STACKING — TruChat fab bottom-right, rail above it ===== */
/* FAB rail sits above the chat/launcher level on desktop. */
.fab-rail{bottom:200px !important;}

/* Constrain inline TruRepay widget — the full calculator is naturally tall;
   keep it from sprawling edge-to-edge while matching the card aesthetic. */
/* The collapsible toggle needs visual weight to balance the text column.
   A dark card backing makes the toggle feel intentional, not abandoned. */
#finance-calc{
  display:flex;align-items:center;justify-content:center;
  min-height:320px;padding:32px 20px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-lg);
}
#finance-calc > [id^="tru-repay"]{max-width:420px;width:100%;}
@media(max-width:960px){
  #finance-calc{min-height:0;padding:20px 0;background:none;border:0;border-radius:0;}
  #finance-calc > [id^="tru-repay"]{max-width:100%;}
}

/* TruValue trade-in — pin the nav to the bottom so the card doesn't
   look sparse on shorter steps while still matching column height. */
.ti-grid{align-items:stretch !important;}
.ti-card{height:100%;display:flex;flex-direction:column;}
.ti-nav{margin-top:auto;}
@media(max-width:720px){
  .fab-rail{display:none !important;}
  /* Smaller + raised clear of the sticky Call/WhatsApp/Stock bar (coc-mbar)
     with real headroom, not just barely clipping it. TruAfford's equivalent
     shrink lives in coc-dock.js — its launcher is inside a shadow root, so
     this stylesheet can never reach it. */
  #tc-fab{
    width:52px !important;height:52px !important;
    bottom:calc(96px + env(safe-area-inset-bottom)) !important;
  }
  #tc-fab .tc-fab-ico{font-size:17px !important;}
  #tc-tip{display:none !important;}
  /* TruChat panel clears the mobile bar — widget.js defaults to bottom:10px
     at ≤480px which sits inside the bar zone. */
  #tc-panel{bottom:110px !important;}
}


/* ===== LIVE TRADING-HOURS PILL (coc-hours.js) ===== */
.coc-status{
  display:inline-flex!important;align-items:center;gap:7px;
  padding:3px 10px;border-radius:100px;
  font-size:10.5px;font-weight:600;letter-spacing:.06em;
  border:1px solid transparent;white-space:nowrap;
}
.coc-status i{width:6px;height:6px;border-radius:50%;flex-shrink:0;position:relative;}
.coc-status.open{background:rgba(37,211,102,.14);border-color:rgba(37,211,102,.34);color:#7BEBA6;}
.coc-status.open i{background:#25D366;}
.coc-status.open i::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #25D366;
  animation:cocRipple 2.2s ease-out infinite;
}
.coc-status.shut{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.62);}
.coc-status.shut i{background:rgba(255,255,255,.4);}
@keyframes cocRipple{0%{transform:scale(.6);opacity:.9;}100%{transform:scale(1.9);opacity:0;}}
@media (prefers-reduced-motion:reduce){.coc-status.open i::after{animation:none;}}


/* ============================================================
   TOUCH TARGETS — 44px minimum hit area on phones. Inline links
   inside prose keep their natural flow, and card titles are left
   alone because the whole card is already tappable.
   ============================================================ */
@media (pointer:coarse), (max-width:760px){
  nav a, .nav-links a, .m-menu a, header a, footer a,
  .btn, button, .chip, .fab-btn, [role="button"]{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  p a, li a, .lede a, .sec-lede a, .card-body h3 a{min-height:0;display:inline;}
}


/* ===== FAB LABELS — visible on keyboard focus and during the one-off peek =====
   Hover-only labels left touch and keyboard users guessing what each button did. */
.fab-btn:focus-visible .fab-label,
.fab-btn.peek .fab-label{
  display:block;
  opacity:1;
  transform:translateY(-50%) translateX(0);
}
@media(max-width:900px){
  /* on phones the rail sits bottom-right, so the label needs to clear it */
  .fab-btn.peek .fab-label,
  .fab-btn:focus-visible .fab-label{display:block;right:60px;font-size:11.5px;padding:7px 12px;}
}
@media (prefers-reduced-motion:reduce){
  .fab-btn.peek .fab-label{transition:none;}
}


/* ============================================================
   TOPBAR — the call button sized itself to "Call us" (~95px) while the
   armed state revealed a longer number inside overflow:hidden, so the
   number was being clipped. It now widens as it arms. The bar's text
   was also sitting at 70% white, which read flat against the near-black.
   ============================================================ */
.coc-call{
  transition:border-color .3s,box-shadow .3s,transform .2s,
             min-width .42s cubic-bezier(.22,1,.36,1);
}
.coc-call.armed{min-width:196px;}
.coc-call .cc-arm{right:14px;font-size:12.5px;font-weight:800;letter-spacing:.01em;}

/* brighter, less washed-out bar */
.topbar{color:rgba(255,255,255,.82)!important;}
.topbar .tb-static > span{color:rgba(255,255,255,.78);}
.topbar b{color:#fff;}
.topbar .tb-static > span:first-child b{
  color:#fff;
  text-shadow:0 0 18px rgba(110,155,255,.35);
}
/* the live pill carries the accent, so the rest can stay quiet */
.coc-status.shut{color:rgba(255,255,255,.72)!important;}

@media(max-width:900px){
  .coc-call.armed{min-width:0;}
  .coc-call .cc-arm{position:static;opacity:1;transform:none;}
}

/* ── Mobile: clear the hero of optional floating launchers ──────────────────
   At 375px three fixed elements sat over the hero — the TruAfford dock, the
   TruChat bubble and the quick-contact bar. Measured, the dock covered the
   hero's "WhatsApp us" button almost exactly, and the chat bubble clipped
   "Sell / trade-in". On a South African dealer site the WhatsApp button is the
   conversion, so it cannot be sitting under a widget.

   The quick bar stays put — it is the deliberate always-visible one, and it
   already carries Call, WhatsApp and Stock. The other two fade in once the
   hero is out of view (class toggled by floatingClearance() in coc-polish.js).
   Desktop is untouched: there is room there and no overlap.                  */
@media (max-width:720px){
  #tru-afford-host,
  #tc-fab{
    transition:opacity .28s ease, transform .28s ease, visibility .28s;
  }
  html.coc-hero-visible #tru-afford-host,
  html.coc-hero-visible #tc-fab{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(10px);
  }
  /* An open panel must never be hidden mid-use. */
  html.coc-hero-visible #tru-afford-host.is-open,
  html.coc-hero-visible #tc-fab.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }

  /* "Call" + "Tap to call" needed 135px in a 99px cell and rendered clipped as
     "Call Tap to c". The arm label is decorative, so it goes below 420px. */
  .coc-mbar{grid-template-columns:1fr 1.5fr 1fr;}
  .coc-mbar .mb-call{min-width:0;}
  .coc-mbar .mb-call .cc-num,
  .coc-mbar .mb-call .cc-arm{white-space:nowrap;}
}
@media (max-width:420px){
  .coc-mbar .mb-call .cc-arm{display:none;}
}

/* ── Keep the inline call link out of the filled-pill treatment ─────────────
   coc-skin.css turns .coc-call into a filled, embossed accent pill — right for
   the standalone button, which was previously a hairline ghost. But it lands on
   the .coc-call-text variant too, and that one is an inline dashed-underline
   link sitting inside a hero-meta chip, the Visit row and the footer. Given a
   fill, a border and 9px/18px padding it renders as a second square box inside
   the chip's pill — the doubled border in the hero.

   Two classes beat one, so this wins over the skin's !important rules on
   specificity and does not depend on stylesheet order.                       */
.coc-call.coc-call-text{
  background:none !important;
  border:0 !important;
  border-bottom:1px dashed currentColor !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  color:inherit !important;
  font-weight:inherit !important;
}
.coc-call.coc-call-text:hover{
  transform:none !important;
  filter:none !important;
  box-shadow:none !important;
}
.coc-call.coc-call-text.armed{
  border-bottom-color:#25D366 !important;
}
/* Cars on Caledon — Splash intro v2: cinematic stage.
   The video card lives in real 3D space (pointer tilt + drift), on a stage lit by
   layered glows and drifting particles. Stage colour is still driven from the
   video's own pixels by coc-splash.js, so the card melts into the backdrop
   through the whole light-grey -> navy fade. */
.coc-splash{
  /* Must sit above every floating widget (TruChat/TruAfford run at z:999990)
     — the splash is a full-screen intro and nothing should show through it,
     on mobile least of all, where those widgets' own launchers stay visible
     (not proxied into the desktop-only FAB rail) and were floating on top of
     the splash video at the old z-index of 500. */
  position:fixed;inset:0;z-index:1000000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  background:linear-gradient(180deg,#F0F0F0 0%,#E2E2E2 100%);
  opacity:1;transition:opacity .7s cubic-bezier(.22,1,.36,1),visibility .7s;
  perspective:1200px;overflow:hidden;
}
.coc-splash.out{opacity:0;visibility:hidden;pointer-events:none;}
.coc-splash.out .coc-splash-card{transform:scale(1.06) translateZ(60px);transition:transform .7s cubic-bezier(.22,1,.36,1);}

/* ── the card: video in true 3D ────────────────────────────────────── */
.coc-splash-card{
  position:relative;z-index:2;
  transform-style:preserve-3d;
  will-change:transform;
  animation:cocCardIn 1.1s cubic-bezier(.22,1,.36,1) both;
  transition:transform .18s cubic-bezier(.22,1,.36,1);
}
@keyframes cocCardIn{
  from{opacity:0;transform:translateY(34px) rotateX(9deg) scale(.94);}
  to{opacity:1;transform:none;}
}
.coc-splash video{
  display:block;width:min(560px,86vw);aspect-ratio:1056/864;height:auto;
  border-radius:24px;object-fit:cover;
  box-shadow:none;transition:box-shadow 1.4s ease;
  transform:translateZ(0);
}
.coc-splash.dark video{
  box-shadow:
    0 60px 120px -30px rgba(0,0,0,.9),
    0 24px 60px -20px rgba(10,20,45,.8),
    0 0 110px -16px rgba(46,84,190,.65);
}
/* glass rim + moving sheen sitting above the video in z-space */
.coc-splash-rim{
  position:absolute;inset:0;border-radius:24px;pointer-events:none;
  border:1px solid rgba(255,255,255,.14);
  transform:translateZ(2px);
}
.coc-splash-rim::after{
  content:"";position:absolute;inset:0;border-radius:24px;overflow:hidden;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);
  background-size:280% 100%;background-position:160% 0;
  animation:cocSheen 4.8s ease-in-out 1.4s infinite;
}
@keyframes cocSheen{0%,55%{background-position:160% 0;}85%,100%{background-position:-120% 0;}}
/* ground reflection under the card */
.coc-splash-refl{
  position:absolute;left:6%;right:6%;top:100%;height:34%;margin-top:14px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(46,84,190,.35),transparent 68%);
  filter:blur(6px);
  opacity:0;transition:opacity 1.4s ease;
  transform:translateZ(-40px) scaleY(.5);
}
.coc-splash.dark .coc-splash-refl{opacity:1;}

/* ── type block under the card ─────────────────────────────────────── */
.coc-splash-type{
  position:relative;z-index:2;margin-top:30px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;
}
.coc-splash-word{
  font-family:'Mulish',sans-serif;font-weight:900;font-size:clamp(17px,2.6vw,23px);
  letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:#fff;
  opacity:0;transform:translateY(14px);filter:blur(5px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1) .15s,transform .9s cubic-bezier(.22,1,.36,1) .15s,filter .9s ease .15s;
}
.coc-splash-rule{
  width:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#D9B166,transparent);
  transition:width 1.1s cubic-bezier(.22,1,.36,1) .45s;
}
.coc-splash-tag{
  font-family:'Mulish',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:rgba(155,180,240,.85);
  opacity:0;transform:translateY(10px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1) .65s,transform .8s cubic-bezier(.22,1,.36,1) .65s;
}
.coc-splash.dark .coc-splash-word{opacity:1;transform:none;filter:blur(0);}
.coc-splash.dark .coc-splash-rule{width:min(220px,42vw);}
.coc-splash.dark .coc-splash-tag{opacity:1;transform:none;}

/* ── skip: magnetic pill ───────────────────────────────────────────── */
.coc-splash-skip{
  position:absolute;right:clamp(16px,4vw,44px);bottom:clamp(16px,4vh,40px);z-index:3;
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Mulish',sans-serif;font-size:12.5px;font-weight:800;
  color:#11131A;background:rgba(17,19,26,.06);border:1px solid rgba(17,19,26,.16);
  border-radius:100px;padding:13px 26px;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:color .6s ease,background .6s ease,border-color .6s ease,box-shadow .3s ease;
  will-change:transform;
}
.coc-splash.dark .coc-splash-skip{
  color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);
}
.coc-splash-skip:hover{
  background:rgba(46,84,190,.55);border-color:rgba(110,155,255,.7);color:#fff;
  box-shadow:0 8px 30px -8px rgba(46,84,190,.7);
}
.coc-splash-skip svg{width:14px;height:14px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.coc-splash-skip:hover svg{transform:translateX(4px);}

.coc-splash-bar{
  position:absolute;left:0;bottom:0;height:3px;width:0;z-index:3;
  background:linear-gradient(90deg,#6E9BFF,#2E54BE 60%,#D9B166);
  box-shadow:0 0 12px rgba(110,155,255,.8);
  transition:width .25s linear;
}

/* autoplay refused — poster is showing; skip entrance + progress theatre */
.coc-splash.still video{animation:none;}
.coc-splash.still .coc-splash-bar{display:none;}

@media(prefers-reduced-motion:reduce){
  .coc-splash-card,.coc-splash video{animation:none;}
  .coc-splash-rim::after{animation:none;}
}
/* ============================================================
   CARS ON CALEDON — TruSaas family skin
   ============================================================
   Adopts the design language of tru-saas.com rather than copying it:

     one continuous near-black field, not alternating light/dark bands
     warm off-white text (#E8EAE6) instead of pure white
     a single accent, used sparingly and at low opacity
     restrained type — 600 weight, tight tracking, smaller headings
     mono eyebrows: 9-10px, ~2.1px tracking, uppercase
     transparent cards with hairline borders, no fills or heavy shadows
     uniform section rhythm

   The one deliberate departure: TruSaas uses cyan (#4FE3DC). Caledon keeps
   its own blue as the accent, so the site reads as part of the family
   without impersonating the parent brand.

   Loaded LAST. Remove the <link> to revert to the retail look.
   ============================================================ */

:root{
  --sk-ink:#06080D;
  --sk-ink-2:#0B0F17;
  --sk-white:#E8EAE6;
  --sk-dim:rgba(232,234,230,.72);
  --sk-muted:rgba(232,234,230,.55);
  --sk-faint:rgba(232,234,230,.32);
  --sk-accent:#6E9BFF;              /* Caledon blue, lifted for a dark field */
  --sk-accent-soft:rgba(110,155,255,.35);
  --sk-glass:rgba(232,234,230,.055);
  --sk-line:rgba(232,234,230,.14);
}

/* ---- one continuous field ------------------------------------ */
body{background:var(--sk-ink)!important;color:var(--sk-white)!important;}
section,
.cat-section,.inventory,.finance,.sell,.why,.testi,.visit,.ti,
.showroom,.delivery{
  background:transparent!important;
  color:var(--sk-white)!important;
}
/* the seam between bands becomes a hairline instead of a colour change */
section + section{border-top:1px solid rgba(232,234,230,.07);}
section{padding-top:110px!important;padding-bottom:110px!important;}
@media(max-width:760px){section{padding-top:68px!important;padding-bottom:68px!important;}}

/* ---- type: quieter, tighter ---------------------------------- */
h1,.hero h1{
  font-weight:600!important;
  letter-spacing:-.025em!important;
  line-height:1.04!important;
}
h2,.sec-h,.ti h2{
  font-weight:600!important;
  font-size:clamp(26px,3.1vw,38px)!important;
  letter-spacing:-.022em!important;
  line-height:1.12!important;
  color:var(--sk-white)!important;
}
h3{font-weight:600!important;letter-spacing:-.01em!important;}
p,.lede,.sec-lede,.ti-lede{color:var(--sk-dim)!important;}
.sec-lede,.lede,.ti-lede{font-size:15px!important;line-height:1.72!important;}

/* accent words stop shouting */
h2 em,.sec-h em,.ti h2 em,h1 em{
  color:var(--sk-accent)!important;
  font-style:normal!important;
  background:none!important;-webkit-text-fill-color:currentColor!important;
}

/* ---- mono eyebrows ------------------------------------------- */
.eyebrow,.sec-eyebrow,.ti-eyebrow,.wc-tag,.tag,.badge{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace!important;
  font-size:9.5px!important;
  font-weight:500!important;
  letter-spacing:.2em!important;
  text-transform:uppercase!important;
  color:var(--sk-accent-soft)!important;
  background:none!important;
  border:0!important;
  padding:0!important;
}
.ti-eyebrow i{background:var(--sk-accent)!important;}

/* ---- surfaces: hairline, not filled -------------------------- */
.card,.ti-card,.ti-factor,.ti-note,.calc-card,.visit-card,.wc,.t,
.cat-tile,.chip,.sp-field,.testi-card{
  background:var(--sk-glass)!important;
  border:1px solid var(--sk-line)!important;
  border-radius:18px!important;
  box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.card:hover,.cat-tile:hover,.wc:hover{
  border-color:var(--sk-accent-soft)!important;
  transform:translateY(-3px)!important;
  box-shadow:none!important;
}
.card .ph::after{background:linear-gradient(180deg,transparent 55%,rgba(6,8,13,.55))!important;}

/* ---- buttons: hairline first, one solid CTA ------------------ */
.btn,.ti-nav button{
  border-radius:100px!important;
  font-weight:600!important;
  letter-spacing:.01em!important;
  box-shadow:none!important;
}
.btn-outline,.btn-ghost,.btn-ghost-light,.ti-nav .back{
  background:transparent!important;
  border:1px solid var(--sk-line)!important;
  color:var(--sk-white)!important;
}
.btn-outline:hover,.btn-ghost:hover,.ti-nav .back:hover{
  border-color:var(--sk-accent)!important;
  background:rgba(110,155,255,.08)!important;
}
.btn-blue,.btn-grad,.btn-primary,.ti-nav .next,.btn-vd{
  background:var(--sk-accent)!important;
  border:1px solid var(--sk-accent)!important;
  color:#06080D!important;
}
.btn-blue:hover,.btn-grad:hover,.ti-nav .next:hover{
  background:#8FB4FF!important;border-color:#8FB4FF!important;
}

/* ---- chrome --------------------------------------------------- */
header,.site-header{background:rgba(6,8,13,.86)!important;border-bottom:1px solid var(--sk-line)!important;}
nav a,.nav-links a{color:var(--sk-dim)!important;font-weight:400!important;}
nav a:hover,.nav-links a:hover{color:var(--sk-white)!important;background:none!important;}
footer{background:var(--sk-ink-2)!important;border-top:1px solid var(--sk-line)!important;}


/* prices keep their weight — this is still a retail site */
.pr,.price,.vcard-price{color:var(--sk-white)!important;font-weight:700!important;letter-spacing:-.02em!important;}

@media (prefers-reduced-motion:reduce){
  .card:hover,.cat-tile:hover,.wc:hover{transform:none!important;}
}


/* ============================================================
   DARK-FIELD TEXT REPAIR
   The retail build used dark ink (#111318) and mid-grey (#6B7280)
   for text that sat on light panels. On a near-black field those
   went invisible. Restated here per role — buttons with light
   fills keep their dark text, which is correct.
   ============================================================ */
.l1,.pr-main,.pr,.price,.vcard-price,.cb-name,.cb-title,
.sn,.ct-name,.wc h3,.t b,.v-row .vv,.sec-h,h3{
  color:var(--sk-white)!important;
}
.l2,.sl,.ct-count,.stock-source,.stock-source span,.cb-year,.cb-variant,
.chip,.vk,.who span,.wc p,.t p,.f-grid a,.foot-note,.sp-field label,
.card .specs span,.card .var,.yr{
  color:var(--sk-muted)!important;
}
/* brand-blue links were #23419A — near-black on near-black */
a[class*="blue"]:not(.btn),.link-blue,.view-all,.more-link,
.sn,.stat-num{color:var(--sk-accent)!important;}
a:not([class]){color:var(--sk-dim);}
a:not([class]):hover{color:var(--sk-white);}

/* chips read as hairline pills, not grey text */
.chip{border:1px solid var(--sk-line)!important;background:transparent!important;}
.chip.on,.chip[aria-selected="true"]{
  background:rgba(110,155,255,.14)!important;
  border-color:var(--sk-accent-soft)!important;
  color:var(--sk-white)!important;
}

/* light-filled buttons keep dark text — restate so nothing above steals them */
.btn-white{background:var(--sk-white)!important;color:#06080D!important;border-color:var(--sk-white)!important;}
.btn-white:hover{background:#fff!important;}
.vir,.badge.solid{color:#06080D!important;}

/* the skip link is white-on-dark by default; it sits on a light chip */
.coc-skip{background:var(--sk-white)!important;color:#06080D!important;}


/* last four stragglers: monthly figure, step numerals, calc label, email link */
.pm b,.pm,.pr-pm,.pr-pm b,.price-row b,.cr-label,.fn,.f-contact a,a[href^="mailto:"]{
  color:var(--sk-accent)!important;
}
.cr-val,.cr-val b{color:var(--sk-white)!important;}

/* ============================================================
   CALL BUTTON — blue, matching the field's single accent
   (was a green gradient left over from the WhatsApp palette)
   ============================================================ */
.coc-call{border-color:var(--sk-accent-soft)!important;color:var(--sk-white)!important;}
.coc-call::before{background:linear-gradient(145deg,#6E9BFF,#2E54BE)!important;}
.coc-call.armed{
  border-color:var(--sk-accent)!important;
  box-shadow:0 6px 22px -6px rgba(110,155,255,.55)!important;
}
.coc-call.armed .cc-arm,.coc-call.armed .cc-num{color:#06080D!important;}
.coc-call.armed svg{color:#06080D!important;}
.coc-call .cc-ring{border-color:rgba(110,155,255,.6)!important;}
.coc-call.armed .cc-ring{border:2px solid rgba(110,155,255,.6)!important;}

/* ============================================================
   SPLASH — video framed on a flat black stage
   ============================================================ */
.coc-splash{background:#000!important;}
.coc-splash-card{
  padding:14px!important;
  background:#0A0A0A!important;
  border:1px solid rgba(232,234,230,.16)!important;
  border-radius:20px!important;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6)!important;
}
.coc-splash-card video{border-radius:12px!important;background:#000!important;}
.coc-splash-skip{color:var(--sk-white)!important;border-color:var(--sk-line)!important;}
.coc-splash-bar{background:var(--sk-accent)!important;}


/* ============================================================
   SECONDARY BUTTONS — a .14 hairline at 0.55px was effectively
   invisible until hover, so ghost buttons read as plain text.
   They now carry a resting fill and a border you can actually
   see; hover becomes an enhancement rather than the reveal.
   ============================================================ */
.btn-outline,.btn-ghost,.btn-ghost-light,.btn-ghost-blue,
.ti-nav .back,.btn-white-outline{
  background:rgba(232,234,230,.08)!important;
  border:1px solid rgba(232,234,230,.34)!important;
  color:var(--sk-white)!important;
}
.btn-outline:hover,.btn-ghost:hover,.btn-ghost-light:hover,
.btn-ghost-blue:hover,.ti-nav .back:hover{
  background:rgba(110,155,255,.16)!important;
  border-color:var(--sk-accent)!important;
  color:#fff!important;
}
/* filled buttons must keep dark labels — restated last so nothing steals them */
.btn-blue,.btn-grad,.btn-primary,.btn-vd,.ti-nav .next,.sp-go{
  color:#06080D!important;
}
.btn-white{color:#06080D!important;}
/* WhatsApp keeps its own green — it's a recognised brand cue */
.btn-wa{
  background:linear-gradient(145deg,#2FDC74,#1DA851)!important;
  color:#06210F!important;border:0!important;
}
.btn-wa:hover{background:linear-gradient(145deg,#46E88A,#25C061)!important;}

/* filter chips: visible at rest */
.chip{
  background:rgba(232,234,230,.07)!important;
  border:1px solid rgba(232,234,230,.28)!important;
  color:var(--sk-dim)!important;
}
.chip:hover{border-color:var(--sk-accent-soft)!important;color:var(--sk-white)!important;}
.chip.on,.chip[aria-selected="true"]{
  background:rgba(110,155,255,.20)!important;
  border-color:var(--sk-accent)!important;
  color:#fff!important;
}


/* ============================================================
   LIGHT PANELS LEFT OVER FROM THE RETAIL BUILD
   These were white/near-white surfaces designed for a light page.
   On the dark field they read as grey slabs. Buttons that are
   *meant* to be light (.btn-white, .btn-blue, skip link) are
   deliberately excluded.
   ============================================================ */
.stats-row,#stockSource,.stock-source,.strip,.band,.panel-light{
  background:rgba(232,234,230,.055)!important;
  border:1px solid var(--sk-line)!important;
  color:var(--sk-white)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:none!important;
}
.stats-row{border-radius:18px!important;}
.stats-row .sn,.stats-row .stat-num{color:var(--sk-accent)!important;}
.stats-row .sl,.stats-row .stat-label{color:var(--sk-muted)!important;}

/* card image well — was #E4E7EE, a light grey box behind every photo
   and fully visible on cars with no image yet */
.card .ph,.ph,.vcard-ph,.im-none{
  background:#0E1117!important;
}
.im-none,.imn-txt{color:var(--sk-muted)!important;}


/* ---- remaining light chips from the retail build ---------------- */
.specs span,.card .specs span,.spec-chip,.nav-fav,.burger,.vir,.fav-btn,.badge-light{
  background:rgba(232,234,230,.08)!important;
  border:1px solid var(--sk-line)!important;
  color:var(--sk-dim)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.vir{color:var(--sk-white)!important;}
.vir i,.vir svg{color:var(--sk-accent)!important;}
.nav-fav{color:var(--sk-white)!important;}
.burger span{background:var(--sk-white)!important;}
.fav-btn svg{stroke:var(--sk-white)!important;fill:none!important;}
.fav-btn.on{background:rgba(110,155,255,.9)!important;border-color:var(--sk-accent)!important;}
.fav-btn.on svg{fill:#fff!important;stroke:#fff!important;}

/* ============================================================
   BODY-TYPE ICONS — 3D, with a staggered flash
   The silhouettes were flat 1.6px strokes in near-black, invisible
   on a dark field. They now read as lit metal: a bright top edge,
   a coloured under-glow, and a pulse that runs across the row.
   ============================================================ */
.cat-tile svg{
  stroke:var(--sk-accent)!important;
  stroke-width:1.9!important;
  overflow:visible;
  filter:
    drop-shadow(0 -1px 0 rgba(255,255,255,.55))
    drop-shadow(0 2px 1px rgba(0,0,0,.85))
    drop-shadow(0 6px 16px rgba(110,155,255,.45));
  transform:perspective(420px) rotateX(12deg);
  transform-origin:50% 80%;
  transition:transform .45s cubic-bezier(.34,1.4,.64,1),filter .45s;
  animation:ctFlash 4.2s ease-in-out infinite;
}
@keyframes ctFlash{
  0%,72%,100%{stroke:#6E9BFF;filter:drop-shadow(0 -1px 0 rgba(255,255,255,.5)) drop-shadow(0 2px 1px rgba(0,0,0,.85)) drop-shadow(0 6px 16px rgba(110,155,255,.4));}
  80%{stroke:#CFE0FF;filter:drop-shadow(0 -1px 0 rgba(255,255,255,.95)) drop-shadow(0 2px 1px rgba(0,0,0,.9)) drop-shadow(0 10px 26px rgba(110,155,255,.85));}
}
/* the flash travels along the row rather than firing all at once */
.cat-tile:nth-child(1) svg{animation-delay:0s;}
.cat-tile:nth-child(2) svg{animation-delay:.42s;}
.cat-tile:nth-child(3) svg{animation-delay:.84s;}
.cat-tile:nth-child(4) svg{animation-delay:1.26s;}
.cat-tile:nth-child(5) svg{animation-delay:1.68s;}
.cat-tile:hover svg{
  transform:perspective(420px) rotateX(0deg) scale(1.12)!important;
  stroke:#CFE0FF!important;
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.9)) drop-shadow(0 3px 2px rgba(0,0,0,.9)) drop-shadow(0 12px 30px rgba(110,155,255,.9));
  animation-play-state:paused;
}
@media (prefers-reduced-motion:reduce){
  .cat-tile svg{animation:none!important;transform:none!important;}
}


/* ---- last of the light slabs ------------------------------------
   sell-flow steps, testimonial cards, the shortlist drawer panels
   and the seller-image badge were all built for a light page. */
.ss,.tc,.si-badge,.fav-list,.fav-foot,.fav-panel,.step,.testi .t{
  background:rgba(232,234,230,.055)!important;
  border:1px solid var(--sk-line)!important;
  color:var(--sk-white)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.ss b,.tc b,.si-badge b,.fav-list b{color:var(--sk-white)!important;}
.ss p,.tc p,.si-badge div,.fav-list p,.fav-foot,.fav-list{color:var(--sk-muted)!important;}
.ss .sn{color:var(--sk-accent)!important;}
.tc .stars,.stars{color:var(--sk-accent)!important;}


/* ---- legibility pass -------------------------------------------
   TruSaas can run eyebrows at 35% because its field is a flat black
   with almost nothing else competing. On a retail page with cards
   and photos they disappeared, so they sit brighter here. */
.eyebrow,.sec-eyebrow,.ti-eyebrow,.wc-tag,.tag{
  color:rgba(110,155,255,.85)!important;
}
.badge{color:var(--sk-white)!important;}
.tc p,.testi p,.t p,blockquote{color:var(--sk-white)!important;}
.who b,.tc .who b{color:var(--sk-white)!important;}
.who span{color:var(--sk-muted)!important;}


/* ---- final tap-target sweep (phones) ---------------------------
   The widget's own rules carry #id specificity, so its option
   buttons need to be addressed at the same weight. */
@media (pointer:coarse),(max-width:760px){
  .view-all,.more-link,a.view-all,
  a[href*="showroom"]:not(.btn),.sec-head a{
    min-height:44px;display:inline-flex;align-items:center;
  }
  .ct-chips button,#ctCond button,.ct-f button,
  a[href^="mailto:"],.f-contact a{
    min-height:44px!important;
    display:inline-flex!important;align-items:center;
  }
}


/* ---- sell panel -------------------------------------------------
   Three stacked blue gradients at 55-62% made this the loudest block
   on a near-black page, and buried the logo watermark behind it.
   Same composition, dialled right back so the mark reads and the
   panel sits with the other surfaces. */
.sell-img{
  background:
    radial-gradient(110% 80% at 22% 12%, rgba(86,128,240,.20), transparent 62%),
    radial-gradient(95% 75% at 88% 96%, rgba(52,92,205,.16), transparent 60%),
    linear-gradient(150deg, #0C1120 0%, #0E1526 55%, #0A0E1A 100%)!important;
  border:1px solid var(--sk-line)!important;
}
.sell-img::before{
  opacity:.30!important;
  filter:saturate(.2) brightness(1.5);
}
.si-badge{
  background:rgba(10,14,26,.72)!important;
  border:1px solid rgba(110,155,255,.28)!important;
  backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;
}
.si-badge .sb1{color:var(--sk-accent)!important;}
.si-badge .sb2{color:var(--sk-white)!important;}


/* ---- splash video: a light overlay ------------------------------
   The clip was punching out of the black frame. A gentle knock-down
   plus a soft vignette settles it into the stage without dulling it. */
.coc-splash-card video{
  filter:brightness(.90) contrast(1.04) saturate(.98);
}
/* vignette sits above the video, below the frame edge */
.coc-splash-refl{
  position:absolute!important;inset:14px!important;
  border-radius:12px!important;
  pointer-events:none!important;z-index:3!important;
  background:
    radial-gradient(120% 100% at 50% 40%, transparent 52%, rgba(0,0,0,.34) 100%),
    linear-gradient(180deg, rgba(6,8,13,.16) 0%, transparent 34%, rgba(6,8,13,.26) 100%)!important;
  opacity:1!important;
}


/* ---- sell panel: brand clip behind the badge --------------------
   The panel was a flat gradient block. It now runs the brand clip,
   knocked back under a veil so the badge stays legible and the
   panel doesn't compete with the stock grid. */
.sell-img{position:relative;overflow:hidden;}
.sell-img .si-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:0;
  filter:brightness(.86) saturate(.95) contrast(1.02);
}
.sell-img .si-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(130% 105% at 50% 45%, transparent 58%, rgba(6,8,13,.42) 100%),
    linear-gradient(160deg, rgba(10,14,26,.30) 0%, transparent 45%, rgba(6,8,13,.46) 100%);
}
/* No watermark over the clip — the video already carries the logo, so
   layering the mark on top put the brand over itself. */
.sell-img::before{display:none!important;}
.sell-img .si-badge{position:relative;z-index:3;}

/* data saver / reduced motion: poster frame only, no loop */
@media (prefers-reduced-motion:reduce){
  .sell-img .si-vid{display:none;}
}


/* ============================================================
   TRADE-IN FACTOR ICONS — blue, 3D, animated
   Flat white strokes in a grey square. Now lit blue chips with a
   bevelled tile, a perspective tilt and a pulse that runs down
   the list; the active factor lifts brighter still.
   ============================================================ */
.ti-factor .ic,.wc-icon{
  background:linear-gradient(160deg, rgba(110,155,255,.30), rgba(35,65,154,.18) 55%, rgba(10,14,26,.9))!important;
  border:1px solid rgba(110,155,255,.34)!important;
  border-radius:11px!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 6px 16px -8px rgba(110,155,255,.55)!important;
  transform:perspective(320px) rotateX(10deg);
  transform-origin:50% 85%;
  transition:transform .45s cubic-bezier(.34,1.4,.64,1),box-shadow .45s,background .45s;
  animation:tiIcon 4.6s ease-in-out infinite;
}
.ti-factor svg,.wc-icon svg{
  stroke:#9CC0FF!important;
  stroke-width:1.9!important;
  overflow:visible;
  filter:
    drop-shadow(0 -1px 0 rgba(255,255,255,.45))
    drop-shadow(0 2px 3px rgba(0,0,0,.8))
    drop-shadow(0 0 10px rgba(110,155,255,.55));
  transition:stroke .4s,filter .4s;
}
@keyframes tiIcon{
  0%,74%,100%{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.55),0 6px 16px -8px rgba(110,155,255,.5);
    transform:perspective(320px) rotateX(10deg);
  }
  82%{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.6),0 10px 26px -8px rgba(110,155,255,.95);
    transform:perspective(320px) rotateX(2deg) translateY(-2px);
  }
}
/* the pulse walks down the list rather than firing together */
.ti-factor:nth-child(1) .ic{animation-delay:0s;}
.ti-factor:nth-child(2) .ic{animation-delay:.5s;}
.ti-factor:nth-child(3) .ic{animation-delay:1s;}
.ti-factor:nth-child(4) .ic{animation-delay:1.5s;}

.ti-factor:hover .ic,.ti-factor.hot .ic,.wc:hover .wc-icon{
  transform:perspective(320px) rotateX(0deg) scale(1.08)!important;
  background:linear-gradient(160deg, rgba(110,155,255,.55), rgba(35,65,154,.32) 55%, rgba(10,14,26,.9))!important;
  border-color:var(--sk-accent)!important;
  animation-play-state:paused;
}
.ti-factor:hover svg,.ti-factor.hot svg,.wc:hover .wc-icon svg{
  stroke:#DCE9FF!important;
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.7)) drop-shadow(0 2px 3px rgba(0,0,0,.85)) drop-shadow(0 0 16px rgba(110,155,255,.95));
}
@media (prefers-reduced-motion:reduce){
  .ti-factor .ic,.wc-icon{animation:none!important;transform:none!important;}
}

/* why-us icons walk on their own offset so the two rows don't sync */
.why-grid .wc:nth-child(1) .wc-icon{animation-delay:.25s;}
.why-grid .wc:nth-child(2) .wc-icon{animation-delay:.75s;}
.why-grid .wc:nth-child(3) .wc-icon{animation-delay:1.25s;}
.why-grid .wc:nth-child(4) .wc-icon{animation-delay:1.75s;}
.why-grid .wc:nth-child(5) .wc-icon{animation-delay:2.25s;}
.why-grid .wc:nth-child(6) .wc-icon{animation-delay:2.75s;}
/* these tiles are larger than the trade-in chips */
.wc-icon{width:52px!important;height:52px!important;border-radius:14px!important;
  display:flex!important;align-items:center;justify-content:center;}
.wc-icon svg{width:22px!important;height:22px!important;}


/* ============================================================
   CTA BUTTONS — embossed 3D label
   Both primary CTAs carry dark text on a light fill, so the type
   is cut into the button: a bright edge above, shadow below, and
   a soft cast underneath. The whole button presses on :active.
   ============================================================ */
.btn-blue,.btn-wa,.btn-grad,.btn-primary,.btn-vd,.ti-nav .next{
  font-weight:800!important;
  letter-spacing:.005em!important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.55),
    0 -1px 0 rgba(0,0,0,.22),
    0 2px 4px rgba(0,0,0,.28)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 8px 20px -10px rgba(0,0,0,.75)!important;
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .18s,filter .25s!important;
}
.btn-blue:hover,.btn-wa:hover,.btn-grad:hover,.btn-vd:hover,.ti-nav .next:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -2px 0 rgba(0,0,0,.24),
    0 14px 28px -12px rgba(0,0,0,.8)!important;
}
.btn-blue:active,.btn-wa:active,.btn-grad:active,.btn-vd:active,.ti-nav .next:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.2),
    0 3px 8px -6px rgba(0,0,0,.8)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.35),0 -1px 0 rgba(0,0,0,.3)!important;
}
@media (prefers-reduced-motion:reduce){
  .btn-blue,.btn-wa,.btn-grad,.btn-vd,.ti-nav .next{transition:none!important;}
  .btn-blue:hover,.btn-wa:hover,.btn-grad:hover,.btn-vd:hover{transform:none;}
}


/* ============================================================
   CALL BUTTON — filled, embossed, and it pops
   It was a hairline ghost in a dark bar: the single highest-intent
   action on the page, styled like a footer link. Now a filled
   accent pill with the same 3D label as the CTAs, a slow breathing
   ring to catch the eye, and a real press.
   ============================================================ */
.coc-call{
  background:linear-gradient(145deg,#8FB4FF 0%,#6E9BFF 45%,#2E54BE 100%)!important;
  border:1px solid rgba(180,205,255,.55)!important;
  color:#06121F!important;
  font-weight:800!important;
  padding:9px 18px!important;
  text-shadow:0 1px 0 rgba(255,255,255,.5),0 -1px 0 rgba(0,0,0,.18)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -2px 0 rgba(0,0,0,.25),
    0 6px 18px -6px rgba(110,155,255,.75)!important;
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .22s,filter .22s!important;
}
.coc-call svg{color:#06121F!important;}
.coc-call .cc-num b{color:#06121F!important;}
.coc-call:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -2px 0 rgba(0,0,0,.26),
    0 12px 26px -8px rgba(110,155,255,.95)!important;
}
.coc-call:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.4),0 3px 8px -6px rgba(0,0,0,.7)!important;
}
/* the fill is already there, so the armed sweep just brightens */
.coc-call::before{
  background:linear-gradient(145deg,#DCE9FF,#8FB4FF)!important;
}
.coc-call.armed{
  border-color:#DCE9FF!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 26px -8px rgba(110,155,255,1)!important;
}
.coc-call.armed .cc-arm,.coc-call.armed .cc-num,.coc-call.armed svg{color:#06121F!important;}

/* slow breathing ring — attention without a flashing badge */
.coc-call .cc-ring{
  border:2px solid rgba(143,180,255,.75)!important;
  animation:ccBreathe 3.2s ease-out infinite;
}
@keyframes ccBreathe{
  0%{transform:scale(1);opacity:.55;}
  70%,100%{transform:scale(1.28);opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .coc-call .cc-ring{animation:none!important;opacity:0;}
  .coc-call{transition:none!important;}
  .coc-call:hover{transform:none;}
}


/* ============================================================
   WHITE CTA — same 3D treatment, kept white
   On a light fill the emboss inverts: the highlight sits *below*
   each glyph so the type reads as pressed into the surface, and
   the bevel runs bright at the top edge into shadow at the base.
   ============================================================ */
.btn-white{
  background:linear-gradient(175deg,#FFFFFF 0%,#EDEFEA 55%,#DADCD6 100%)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  color:#0A0E17!important;
  font-weight:800!important;
  letter-spacing:.005em!important;
  text-shadow:0 1px 0 rgba(255,255,255,.95),0 -1px 0 rgba(0,0,0,.14)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(0,0,0,.16),
    0 8px 20px -10px rgba(0,0,0,.8)!important;
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .22s,filter .22s!important;
}
.btn-white:hover{
  background:linear-gradient(175deg,#FFFFFF 0%,#F5F6F2 55%,#E4E6E0 100%)!important;
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 14px 28px -12px rgba(0,0,0,.85)!important;
}
.btn-white:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.5),
    0 3px 8px -6px rgba(0,0,0,.8)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.7)!important;
}
@media (prefers-reduced-motion:reduce){
  .btn-white{transition:none!important;}
  .btn-white:hover{transform:none;}
}


/* ============================================================
   IDENTITY PASS — display font + calm
   Bricolage Grotesque: a characterful humanist grotesque, warm and
   slightly irregular, premium without being clinical. Body stays
   DM Sans, eyebrows IBM Plex Mono.
   ============================================================ */
h1,h2,h3,.hero h1,.sec-h,.ti h2,.wc h3,.card-body h3,
.cb-name,.cb-title,.pr,.pr-main{
  font-family:'Bricolage Grotesque','DM Sans',system-ui,sans-serif!important;
}
h1,.hero h1{font-weight:700!important;letter-spacing:-.03em!important;}
h2,.sec-h,.ti h2{font-weight:700!important;letter-spacing:-.028em!important;}
h3,.wc h3,.card-body h3{font-weight:600!important;letter-spacing:-.015em!important;}

/* TruAfford widget hardcodes Inter — cannot reach shadow DOM from here;
   the widget's own font remains unchanged. */

/* ---- calm the perpetual ambient motion --------------------------
   Entrances and the icon flashes / call ring you asked for stay.
   These loops ran forever and made the dark field feel restless. */
.fab-btn,.fab-inner,.fab-rail .fab-btn{animation:none!important;}
#tc-fab *{animation:none!important;}
.orb,[class*="orb"]{animation:none!important;}
/* every <i> here is a decorative status dot (real icons are SVG),
   so calming them all stops the ambient blinking in one line; the
   SVG icon-flashes and the call ring (a span) keep animating. */
i,.dot,.live-dot,[class*="pulse-dot"]{animation:none!important;}


/* ---- TruChat: a slight breathing glow (blue, matched) ---------- */
#tc-fab{animation:cocChatBreath 3.4s ease-in-out infinite!important;}
@keyframes cocChatBreath{
  0%,100%{box-shadow:0 8px 22px -8px rgba(6,8,13,.6), 0 0 0 0 rgba(110,155,255,0);}
  50%{box-shadow:0 10px 26px -6px rgba(6,8,13,.6), 0 0 16px 3px rgba(110,155,255,.4);}
}
@media (prefers-reduced-motion:reduce){#tc-fab{animation:none!important;}}