/* ========== DESIGN TOKENS (mapped onto Bootstrap) ========== */
:root{
  --red:#BD2328;
  --red-dark:#8F1A1E;
  --red-soft:#F8E5E6;
  --ink:#0E0E10;
  --ink-2:#1C1C20;
  --muted:#6B6B70;
  --line:#E6E6E6;
  --paper:#F7F5F1;
  --white:#FFFFFF;
  --ok:#2D5F4E;
  --shadow-md: 0 4px 14px rgba(14,14,16,.08), 0 20px 40px rgba(14,14,16,.06);
  --shadow-lg: 0 12px 40px rgba(14,14,16,.12), 0 40px 80px rgba(14,14,16,.08);
  --ease: cubic-bezier(.2,.7,.2,1);

  /* Override Bootstrap primary */
  --bs-primary: #BD2328;
  --bs-primary-rgb: 189,35,40;
  --bs-body-font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  --bs-body-color: #0E0E10;
  --bs-body-font-size: 16px;
  --bs-body-line-height: 1.55;
}

body{ -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.font-serif{ font-family:'Fraunces', Georgia, serif; font-weight:500; letter-spacing:-.02em; }
.font-serif em{ font-style:italic; }

/* ========== TOP BAR ========== */
.topbar{
  background:var(--ink); color:#CFCFD2;
  font-size:13px; line-height:1.55; padding:10px 0;
  letter-spacing:.01em;
}
.topbar a{ color:inherit; text-decoration:none; transition:color .2s; }
.topbar a:hover{ color:#fff; }
.topbar .bi{ font-size:14px; opacity:.75; vertical-align:-.1em; }
.topbar-social a{
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s, transform .2s; color:#fff;
}
.topbar-social a:hover{ background:var(--red); transform:translateY(-1px); }

/* ========== HEADER ========== */
.site-header{
  background:#fff;
  z-index:100;
  border-bottom:1px solid var(--line);
}

/* Sticky behaviour is enabled on desktop only (≥ XL breakpoint), matching
   when the navbar is expanded. On mobile/tablet (< XL) the header scrolls
   naturally — Chrome on iOS/Android has a known compositor bug with
   position:sticky and the dynamic address bar that clips part of the header
   during scroll. Letting it scroll normally sidesteps the issue entirely. */
@media (min-width: 1200px){
  .site-header{
    position:sticky; top:0;
    backdrop-filter:saturate(1.2) blur(8px);
  }
  /* WP admin bar offset only matters when the header is sticky. */
  .admin-bar .site-header{ top:32px; }
}
.site-header .navbar-nav .nav-link{
  font-weight:500; font-size:15px; color:var(--ink);
  padding:10px 14px !important; border-radius:8px;
  transition: color .2s, background .2s;
}

/* Keep every top-level nav item AND the header CTA button vertically
   centered, even when one long label (e.g. "Automotive Solutions") wraps
   to two lines on a tight viewport between 1200px and ~1400px. */
@media (min-width: 1200px){
  .site-header .navbar-collapse{ align-items:center; }
  .site-header .navbar-nav{ align-items:center; }
  .site-header .navbar-nav .nav-item{ display:flex; align-items:center; }
}

/* Items WITHOUT a submenu — the link is the hover target. */
.site-header .navbar-nav .nav-item:not(.dropdown) .nav-link:hover{
  color:var(--red); background:var(--red-soft);
}

/* Items WITH a submenu — link + caret share a single pill that highlights together.
   We make the <li> the rounded background, and keep the inner link / caret
   transparent so they read as one connected control. The hover rule on the <li>
   also fires when the cursor is on the caret button, so there's no visual gap. */
.site-header .navbar-nav .nav-item.dropdown{
  display:flex; align-items:center;
  border-radius:8px;
  transition: background .2s;
}
.site-header .navbar-nav .nav-item.dropdown:hover,
.site-header .navbar-nav .nav-item.dropdown.show{
  background:var(--red-soft);
}
.site-header .navbar-nav .nav-item.dropdown:hover > .nav-link,
.site-header .navbar-nav .nav-item.dropdown:hover > .nav-caret,
.site-header .navbar-nav .nav-item.dropdown.show  > .nav-link,
.site-header .navbar-nav .nav-item.dropdown.show  > .nav-caret{
  color:var(--red); background:transparent;
}

.site-header .navbar-nav .nav-item.dropdown .nav-link{ padding-right:4px !important; }
.site-header .navbar-nav .nav-caret{
  background:transparent; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:32px; margin:0 6px 0 0;
  font-size:12px; color:var(--ink);
  border-radius:6px;
  transition: color .2s, transform .2s;
}
.site-header .navbar-nav .nav-caret[aria-expanded="true"]{ transform:rotate(180deg); }
/* No separate focus ring on the caret — the parent .nav-item.dropdown pill
   already highlights via background colour, so a second visual border would
   be redundant. */
.site-header .navbar-nav .nav-caret:focus,
.site-header .navbar-nav .nav-caret:focus-visible{ outline:none; box-shadow:none; }
.site-header .dropdown-menu{
  border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow-lg); padding:10px; margin-top:4px;
  min-width:240px;
}
.site-header .dropdown-item{
  border-radius:6px; padding:10px 12px; font-size:14px;
}
.site-header .dropdown-item:hover{ background:var(--paper); color:var(--red); }

/* Nested submenu (level 2+) — flyout on desktop, indented on mobile.
   Walker renders these as <ul class="dropdown-menu dropdown-submenu-menu"> inside a
   <li class="dropdown-submenu">. */
.site-header .dropdown-submenu{ position:relative; }
/* The chevron is rendered as ::after of the .dropdown-item link. Anchor its
   positioning context to the link itself, NOT the parent .dropdown-submenu
   <li> — otherwise on mobile (where the nested submenu is rendered inline
   below the link) the chevron would float in the vertical middle of the
   whole block, appearing AFTER the level-3 items. */
.site-header .dropdown-submenu > .dropdown-item{ position:relative; padding-right:28px; }
.site-header .dropdown-submenu > .dropdown-item::after{
  content:"›"; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:18px; line-height:1; color:var(--muted);
}
.site-header .dropdown-submenu-menu{ display:none; }

/* The level-2 dg-submenu-toggle button is hidden by default. It's shown
   on mobile (rules further down) AND on touch devices at desktop width
   (rule below) so tablet users can tap to reveal the level-3 submenu —
   without a hover event there's no other way to open it. */
.site-header .dg-submenu-toggle{ display:none; }

/* Desktop position for the level-3 submenu (mouse hover OR tablet tap).
   The vertical flyout positions to the right of its level-2 parent. */
@media (min-width: 1200px){
  .site-header .dropdown-submenu > .dropdown-submenu-menu{
    position:absolute; top:-10px; left:calc(100% + 4px); min-width:220px;
  }
}

/* Desktop with mouse (hover-capable): hover or keyboard focus reveals the
   level-3 submenu. No toggle button needed. */
@media (min-width: 1200px) and (hover: hover){
  .site-header .dropdown-submenu:hover > .dropdown-submenu-menu,
  .site-header .dropdown-submenu:focus-within > .dropdown-submenu-menu{
    display:block;
  }
}

/* Touch device at desktop width (tablet ≥ XL, no hover): show the toggle
   button so users can tap. Tap toggles .show on the parent <li>; the rule
   below reveals the submenu when .show is present. ::after chevron is
   hidden so the toggle button is the only indicator. */
@media (min-width: 1200px) and (hover: none){
  .site-header .dg-submenu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    background:transparent; border:0; cursor:pointer;
    position:absolute; right:8px; top:50%;
    transform:translateY(-50%);
    width:28px; height:28px;
    font-size:12px; color:var(--muted);
    border-radius:6px;
    transition: transform .2s, color .2s, background .2s;
    z-index:1;
  }
  .site-header .dg-submenu-toggle[aria-expanded="true"]{
    transform: translateY(-50%) rotate(180deg);
    color:var(--red);
  }
  .site-header .dropdown-submenu > .dropdown-item::after{ content:none; }
  .site-header .dropdown-submenu > .dropdown-item{ padding-right:40px; }
  .site-header .dropdown-submenu.show > .dropdown-submenu-menu{ display:block; }
}

/* Mobile nav (< XL): collapsed menu lives below the navbar. Make sure it has a
   solid background, sits below the toggle, and has comfortable tap targets. */
@media (max-width: 1199.98px){
  .site-header .navbar-collapse{
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:var(--shadow-md);
    margin-top:12px;
    padding:12px 4px;
    border-radius:12px;
  }
  .site-header .navbar-nav{ width:100%; }
  .site-header .navbar-nav .nav-item{ width:100%; }
  .site-header .navbar-nav .nav-item.dropdown{ flex-wrap:wrap; }
  .site-header .navbar-nav .nav-item.dropdown > .nav-link{ flex:1; }
  /* Caret button stays on the right of each top-level item */
  .site-header .navbar-nav .nav-caret{ margin-left:auto; }
  /* Inline (non-floating) submenus on mobile */
  .site-header .dropdown-menu{
    position:static !important;
    transform:none !important;
    box-shadow:none;
    border:0;
    margin:4px 0 0;
    padding:0 0 0 14px;
    width:100%;
  }
  /* Level-2 items that own a level-3 menu: lay out as a flex row so the link
     and the toggle button stay side-by-side on the FIRST row. The nested
     submenu has flex-basis:100% below, so when revealed it wraps to a NEW row
     beneath — the toggle button can't drift down into the submenu (which is
     what happened when the button was position:absolute relative to the LI). */
  .site-header .dropdown-submenu{
    display:flex; flex-wrap:wrap; align-items:center;
  }
  .site-header .dropdown-submenu > .dropdown-item{
    flex:1; font-weight:600;
    padding-right:8px;
    width:auto; min-width:0;
  }
  .site-header .dropdown-submenu > .dropdown-item::after{ content:none; }

  /* Toggle button — now an inline flex item on the same row as the link. */
  .site-header .dg-submenu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    background:transparent; border:0; cursor:pointer;
    position:static; transform:none;
    width:28px; height:28px;
    margin-right:8px; flex-shrink:0;
    font-size:11px; color:var(--ink);
    border-radius:6px;
    transition: transform .2s, color .2s, background .2s;
  }
  .site-header .dg-submenu-toggle:hover{ background:var(--red-soft); color:var(--red); }
  .site-header .dg-submenu-toggle[aria-expanded="true"]{
    transform: rotate(180deg);
    background:var(--red-soft); color:var(--red);
  }

  /* Level-3 menu hidden by default; revealed when the level-2 <li> gets .show.
     flex-basis:100% forces it onto its own row in the flex container above. */
  .site-header .dropdown-submenu-menu{
    display:none;
    flex-basis:100%;
    padding-left:18px;
    margin-top:2px;
    border-left:2px solid var(--line);
  }
  .site-header .dropdown-submenu.show > .dropdown-submenu-menu{ display:block; }
  .site-header .dropdown-submenu-menu .dropdown-item{
    font-weight:400; font-size:13px; color:var(--muted);
  }
  .site-header .dropdown-submenu-menu .dropdown-item:hover{ color:var(--red); }
}

.btn-brand{
  background:var(--red); color:#fff; font-weight:600; font-size:14px;
  padding:11px 20px; border-radius:8px; border:0;
  box-shadow:0 4px 14px rgba(189,35,40,.25);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-brand:hover{ background:var(--red-dark); color:#fff; transform:translateY(-1px); box-shadow:0 6px 20px rgba(189,35,40,.35); }
.btn-brand:focus{ box-shadow:0 0 0 .25rem rgba(189,35,40,.25); color:#fff; }
/* Header CTA: keep the label + arrow on one line and stop the button shrinking
   into a column when the navbar gets cramped on 1200–1400px viewports. */
.site-header .btn-brand{ white-space:nowrap; flex-shrink:0; }

/* ========== HERO ========== */
.hero{
  position:relative; background:#0A0A0C; color:#fff; overflow:hidden;
  min-height:680px; display:flex; align-items:center;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-photo{ position:absolute; pointer-events:none; z-index:1; }
.hero:not([data-variant="a"]):not([data-variant="b"]) .hero-photo{ display:none; }
.hero[data-variant="a"] .hero-bg{
  background:
    radial-gradient(ellipse at 78% 55%, rgba(189,35,40,.22), transparent 58%),
    linear-gradient(180deg, #0A0A0C 0%, #131318 100%);
}
.hero[data-variant="a"] .hero-bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 30% 50%, #000 30%, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 90% at 30% 50%, #000 30%, transparent 75%);
}
.hero[data-variant="a"] .hero-photo{
  right:-4%; top:50%; transform:translateY(-50%);
  width:54%; max-width:780px; aspect-ratio:5/3;
  background:url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=1200&q=80') center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 28%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 28%, #000 100%);
  opacity:.85;
}
.hero[data-variant="b"]{ background:var(--paper); color:var(--ink); }
.hero[data-variant="b"] .hero-bg{
  background: radial-gradient(circle at 88% 18%, rgba(189,35,40,.10), transparent 45%),
    linear-gradient(180deg, #FAF8F4 0%, #F2EFE8 100%);
}
.hero[data-variant="b"] .hero-bg::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg, transparent, var(--red) 30%, var(--red) 70%, transparent);
  opacity:.4;
}
.hero[data-variant="b"] .hero-photo{
  right:-2%; top:50%; transform:translateY(-50%);
  width:46%; max-width:680px; aspect-ratio:4/3;
  background:url('https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=1200&q=80') center/cover no-repeat;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(14,14,16,.18);
}
.hero[data-variant="b"] .hero-eyebrow{ background:#fff; border-color:var(--line); color:var(--ink); }
.hero[data-variant="b"] h1{ color:var(--ink); }
.hero[data-variant="b"] h1 em::after{ background:var(--red); opacity:.18; height:14px; }
.hero[data-variant="b"] .lede{ color:var(--muted) !important; }
.hero[data-variant="c"] .hero-bg{
  background:
    linear-gradient(95deg, #0A0A0C 0%, rgba(10,10,12,.92) 38%, rgba(10,10,12,.55) 60%, rgba(10,10,12,.15) 100%),
    url('https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=1800&q=85') right center/cover no-repeat;
}
.hero[data-variant="d"] .hero-bg{
  background:
    linear-gradient(95deg, rgba(10,10,12,.92) 0%, rgba(10,10,12,.7) 40%, rgba(10,10,12,.35) 70%, rgba(10,10,12,.15) 100%),
    url('https://dicksongroup.com.sg/wp-content/uploads/2021/03/banner.png') center/cover no-repeat;
}
.hero[data-variant="e"] .hero-bg{
  background:
    linear-gradient(100deg, rgba(10,10,12,.9) 0%, rgba(10,10,12,.65) 45%, rgba(10,10,12,.25) 80%, rgba(10,10,12,.1) 100%),
    url('https://dicksongroup.com.sg/wp-content/uploads/2022/04/DG-Panorama-2-scaled.jpg') center/cover no-repeat;
}
.hero > .container{ position:relative; z-index:2; padding-top:80px; padding-bottom:80px; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  padding:6px 14px; border-radius:999px;
  font-size:12px; letter-spacing:.15em; text-transform:uppercase; font-weight:500;
  backdrop-filter:blur(8px);
}
.hero-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--red); box-shadow:0 0 12px var(--red); }
.hero h1{
  font-family:'Fraunces',Georgia,serif; font-weight:500;
  font-size:clamp(40px,6vw,80px); line-height:1.02; letter-spacing:-.02em;
  margin:22px 0 20px; max-width:780px;
}
.hero h1 em{ font-style:italic; position:relative; }
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.1em; height:3px;
  background:var(--red); border-radius:2px;
}
.hero .lede{ font-size:18px; max-width:560px; color:rgba(255,255,255,.82); margin-bottom:36px; }
.btn-ghost-light{
  background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.2);
  padding:14px 24px; border-radius:10px; font-weight:600;
}
.btn-ghost-light:hover{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.3); }
.btn-hero{ padding:14px 24px; border-radius:10px; font-weight:600; font-size:15px; }

/* Vehicle search */
.vehicle-search{
  position:relative; z-index:3;
  background:#fff; color:var(--ink);
  border-radius:16px; padding:14px;
  box-shadow:var(--shadow-lg);
  display:grid; grid-template-columns:repeat(4,1fr) auto; gap:6px;
  max-width:960px; margin-top:44px;
}
.vs-field{
  padding:14px 16px; border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:2px;
}
.vs-field:last-of-type{ border-right:0; }
.vs-field label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-weight:600; }
.vs-field select{
  border:0; outline:none; font-family:inherit; font-size:15px; font-weight:600;
  color:var(--ink); background:transparent; padding:0; cursor:pointer;
}
.vs-submit{
  background:var(--red); color:#fff;
  padding:0 28px; border-radius:10px; border:0;
  display:inline-flex; align-items:center; gap:8px; font-weight:600;
}
.vs-submit:hover{ background:var(--red-dark); }
.hero-stats{ display:flex; gap:40px; margin-top:48px; flex-wrap:wrap; }
.hero-stats .stat{ border-left:2px solid var(--red); padding-left:16px; }
.hero-stats .num{ font-family:'Fraunces',Georgia,serif; font-size:32px; font-weight:600; line-height:1; }
.hero-stats .lbl{ font-size:13px; color:rgba(255,255,255,.7); margin-top:4px; }
.hero[data-variant="b"] .hero-stats .num{ color:var(--ink); }
.hero[data-variant="b"] .hero-stats .lbl{ color:var(--muted); }

/* Section heads */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--red); font-weight:600; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:14px;
}
.eyebrow::before, .eyebrow::after{ content:""; width:24px; height:1px; background:var(--red); }
.section-title{
  font-family:'Fraunces',Georgia,serif; font-weight:500;
  font-size:clamp(32px,4vw,48px); letter-spacing:-.02em; line-height:1.1;
}
.section-title em{ font-style:italic; }
.section-sub{ color:var(--muted); margin-top:14px; font-size:17px; }

/* Service cards */
.services{ padding:100px 0; background:var(--paper); }
.service-card{
  background:#fff; border-radius:14px; padding:32px 24px;
  border:1px solid var(--line); position:relative; overflow:hidden;
  display:flex; flex-direction:column; min-height:260px;
  transition:all .3s var(--ease); height:100%;
}
.service-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.service-card:hover::before{ transform:scaleX(1); }
.service-icon{
  width:52px; height:52px; border-radius:12px;
  background:var(--red-soft); color:var(--red);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; font-size:24px;
}
.service-card h3{ font-size:18px; font-weight:700; margin-bottom:8px; letter-spacing:-.01em; }
.service-card p{ font-size:14px; color:var(--muted); flex-grow:1; }
.service-card .arrow{
  margin-top:20px; display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--ink); text-decoration:none;
  transition:color .2s, gap .2s;
}
.service-card:hover .arrow{ color:var(--red); gap:10px; }

/* Vehicles */
.vehicles{ padding:100px 0; background:#fff; }
.view-all{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; color:var(--ink); padding:10px 18px;
  border:1px solid var(--line); border-radius:999px; text-decoration:none;
  transition:all .2s;
}
.view-all:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.vehicle-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:all .3s var(--ease); display:flex; flex-direction:column; height:100%;
}
.vehicle-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.vehicle-image{ position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,#f0f0f0,#dcdcdc); }
.vehicle-image img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.vehicle-card:hover .vehicle-image img{ transform:scale(1.06); }
.vehicle-badge{
  position:absolute; top:12px; left:12px;
  background:#fff; color:var(--ok);
  padding:6px 12px; border-radius:999px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  display:inline-flex; align-items:center; gap:6px;
}
.vehicle-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); }
.vehicle-badge--sold{ color:var(--muted); }
.vehicle-badge--sold .dot{ background:var(--muted); }
.vehicle-card--sold .vehicle-image img{ filter:grayscale(.6); opacity:.85; }
.vehicle-card--sold .vehicle-price .amount{ color:var(--muted); text-decoration:line-through; }
.vehicle-fav{
  position:absolute; top:12px; right:12px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.92); border:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .2s; color:var(--ink);
}
.vehicle-fav:hover{ background:#fff; color:var(--red); }
.vehicle-body{ padding:22px; display:flex; flex-direction:column; flex-grow:1; }
.vehicle-body h3{ font-size:19px; font-weight:700; letter-spacing:-.01em; margin-bottom:14px; }
.vehicle-specs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-bottom:16px;
}
.spec-label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.spec-value{ font-size:13px; font-weight:600; color:var(--ink); }
.vehicle-footer{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.vehicle-price .label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600; display:block; }
.vehicle-price .amount{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:24px; color:var(--red); }
.vehicle-cta{
  background:var(--ink); color:#fff;
  padding:10px 18px; border-radius:8px; font-size:13px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  transition:all .2s;
}
.vehicle-cta:hover{ background:var(--red); color:#fff; transform:translateY(-1px); }

/* Heritage */
.heritage{ padding:110px 0; background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.heritage::before{
  content:"1988"; position:absolute; right:-80px; top:50%; transform:translateY(-50%);
  font-family:'Fraunces',Georgia,serif; font-weight:500;
  font-size:520px; line-height:1; letter-spacing:-.04em;
  color:rgba(255,255,255,.025); pointer-events:none;
}
.heritage > .container{ position:relative; z-index:2; }
.heritage-image{
  aspect-ratio:4/5; border-radius:18px; overflow:hidden;
  position:relative; box-shadow:var(--shadow-lg);
}
.heritage-image img{ width:100%; height:100%; object-fit:cover; }
.year-chip{
  position:absolute; bottom:24px; left:24px;
  background:var(--red); color:#fff;
  padding:14px 20px; border-radius:12px; font-weight:700;
}
.year-chip small{ display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.85; font-weight:500; }
.year-chip strong{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:28px; line-height:1; }
.heritage h2{ color:#fff; }
.heritage h2 em{ color:#FF8A8E; }
.heritage .eyebrow{ color:#FF6A6F; }
.heritage .eyebrow::before, .heritage .eyebrow::after{ background:#FF6A6F; }
.heritage p{ color:rgba(255,255,255,.78); font-size:17px; line-height:1.7; }
.heritage-meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin-top:36px; padding-top:36px; border-top:1px solid rgba(255,255,255,.12);
}
.heritage-meta .num{ font-family:'Fraunces',Georgia,serif; font-size:36px; font-weight:600; line-height:1; color:#fff; }
.heritage-meta .lbl{ font-size:13px; color:rgba(255,255,255,.65); margin-top:6px; }
.accreditations{
  margin-top:40px; padding:22px 26px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.accreditations .label{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:600; }
.acc-badge{
  padding:8px 16px; background:rgba(255,255,255,.08);
  border-radius:6px; font-size:13px; font-weight:600; color:#fff;
  border:1px solid rgba(255,255,255,.12);
}

/* Testimonials */
.testimonials{ padding:110px 0; background:var(--paper); }
.testimonial-card{
  background:#fff; border-radius:20px; padding:56px 64px;
  box-shadow:var(--shadow-md); position:relative; max-width:960px; margin:0 auto;
}
.testimonial-card::before{
  content:"\201C"; position:absolute; top:-20px; left:40px;
  font-family:'Fraunces',Georgia,serif; font-size:160px; font-weight:700;
  color:var(--red); line-height:1;
}
.testimonial-text{
  font-family:'Fraunces',Georgia,serif; font-weight:400; font-style:italic;
  font-size:clamp(20px,2vw,26px); line-height:1.5; color:var(--ink);
}
.testimonial-person{
  margin-top:36px; padding-top:28px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:16px;
}
.person-avatar{
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:18px;
}
.person-info strong{ font-weight:700; font-size:15px; display:block; }
.person-info span{ font-size:13px; color:var(--muted); }
.testimonial-rating{ margin-left:auto; color:#F5B818; font-size:16px; }
.testimonial-controls{ display:flex; justify-content:center; gap:8px; margin-top:28px; align-items:center; }
.testimonial-controls .ctrl-btn{
  width:40px; height:40px; border-radius:50%;
  background:#fff; border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .2s; color:var(--ink);
}
.testimonial-controls .ctrl-btn:hover{ background:var(--red); color:#fff; border-color:var(--red); }
.testimonial-dots{ display:flex; gap:6px; align-items:center; padding:0 14px; }
.testimonial-dots span{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:all .2s; cursor:pointer; }
.testimonial-dots span.active{ background:var(--red); width:28px; border-radius:4px; }

/* Facilities */
.facilities{ padding:110px 0; background:#fff; }
.facility-grid{
  display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:200px 200px; gap:16px;
}
.facility{
  border-radius:16px; overflow:hidden; position:relative;
  cursor:pointer; transition:transform .3s var(--ease); background:var(--ink);
}
.facility:hover{ transform:translateY(-4px); }
.facility img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), opacity .3s; opacity:.82; }
.facility:hover img{ transform:scale(1.06); opacity:.7; }
.facility::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.75),transparent 55%); }
.facility .label{ position:absolute; left:20px; bottom:18px; right:20px; z-index:2; color:#fff; }
.facility .label small{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.78; display:block; margin-bottom:2px; }
.facility .label strong{ font-size:17px; font-weight:700; line-height:1.2; }
.facility-1{ grid-column:span 3; grid-row:span 2; }
.facility-1 .label strong{ font-size:22px; }
.facility-2{ grid-column:span 3; grid-row:span 1; }
.facility-3{ grid-column:span 2; grid-row:span 1; }
.facility-4{ grid-column:span 1; grid-row:span 1; }

/* CTA banner */
.cta-banner{ padding:0 0 80px; background:#fff; }
.cta-inner{
  background:linear-gradient(130deg,var(--red) 0%, var(--red-dark) 100%);
  border-radius:24px; padding:64px; color:#fff; position:relative; overflow:hidden;
}
.cta-inner::before{
  content:""; position:absolute; right:-100px; top:-100px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);
}
.cta-inner > .row{ position:relative; z-index:2; }
.cta-inner h2{
  font-family:'Fraunces',Georgia,serif; font-weight:500;
  font-size:clamp(28px,3.2vw,40px); line-height:1.08; letter-spacing:-.02em; margin-bottom:12px;
}
.cta-inner p{ font-size:17px; opacity:.9; }
.cta-path{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  border-radius:12px; padding:18px 22px;
  display:flex; align-items:center; gap:16px;
  text-decoration:none; color:#fff;
  transition:all .2s; backdrop-filter:blur(10px); margin-bottom:12px;
}
.cta-path:last-child{ margin-bottom:0; }
.cta-path:hover{ background:rgba(255,255,255,.18); transform:translateX(4px); color:#fff; }
.cta-path-icon{
  width:44px; height:44px; border-radius:10px;
  background:rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-size:20px;
}
.cta-path-text{ flex-grow:1; }
.cta-path-text strong{ display:block; font-weight:700; font-size:16px; }
.cta-path-text small{ font-size:13px; opacity:.8; }

/* Footer */
.site-footer{ background:var(--ink); color:#B8B8BC; padding:80px 0 32px; }
.site-footer h4{ color:#fff; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:22px; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer ul li{ margin-bottom:10px; }
.site-footer ul a{ font-size:14px; color:#B8B8BC; text-decoration:none; transition:color .2s, padding .2s; }
.site-footer ul a:hover{ color:#fff; padding-left:4px; }
.footer-brand p{ margin-top:20px; font-size:14px; line-height:1.7; max-width:320px; }
.footer-brand address{ font-style:normal; margin-top:18px; font-size:14px; line-height:1.6; color:#fff; }
.footer-social a{
  width:36px; height:36px; border-radius:8px;
  background:rgba(255,255,255,.06); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  margin-right:10px; transition:all .2s;
}
.footer-social a:hover{ background:var(--red); transform:translateY(-2px); }
.footer-bottom{
  padding-top:28px; margin-top:48px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  font-size:13px;
}
.footer-bottom a{ color:#B8B8BC; text-decoration:none; }
.footer-bottom a:hover{ color:#fff; }

/* ========== SECONDARY PAGES (page.php / single.php / archive.php / search.php / 404.php) ========== */
.page-shell{ background:#fff; min-height:50vh; }
.page-shell .entry-content{ font-size:17px; line-height:1.7; color:var(--ink); }
.page-shell .entry-content h2,
.page-shell .entry-content h3,
.page-shell .entry-content h4{
  font-family:'Fraunces',Georgia,serif; font-weight:600; letter-spacing:-.01em;
  margin-top:1.6em; margin-bottom:.6em;
}
.page-shell .entry-content h2{ font-size:32px; }
.page-shell .entry-content h3{ font-size:24px; }
/* Scope link styling to prose contexts only so plugin output (SGCarMart cards,
   WPBakery buttons, etc.) doesn't get unwanted underlines / red colour. */
.page-shell .entry-content p a,
.page-shell .entry-content li a,
.page-shell .entry-content blockquote a,
.page-shell .entry-content td a{ color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.page-shell .entry-content p a:hover,
.page-shell .entry-content li a:hover,
.page-shell .entry-content blockquote a:hover,
.page-shell .entry-content td a:hover{ color:var(--red-dark); }
.page-shell .entry-content blockquote{
  border-left:3px solid var(--red);
  padding:8px 0 8px 22px; margin:1.6em 0;
  font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:20px; color:var(--ink);
}
.page-shell .entry-content code{ background:var(--paper); padding:2px 6px; border-radius:4px; font-size:.92em; }
.page-shell .entry-content pre{ background:var(--ink); color:#fff; padding:18px; border-radius:10px; overflow-x:auto; }

/* Pagination */
.pagination-wrap .nav-links,
.pagination-wrap .navigation{
  display:flex; justify-content:center; gap:8px; flex-wrap:wrap;
}
.pagination-wrap .page-numbers{
  min-width:40px; height:40px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:8px;
  font-weight:600; color:var(--ink); text-decoration:none;
  transition:all .2s;
}
.pagination-wrap .page-numbers:hover{ background:var(--paper); }
.pagination-wrap .page-numbers.current{ background:var(--red); color:#fff; border-color:var(--red); }
.pagination-wrap .page-numbers.dots{ border-color:transparent; }

/* Widget area */
.widget-title{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:20px; margin-bottom:14px; }
.widget ul{ list-style:none; padding:0; }
.widget ul li{ padding:6px 0; border-bottom:1px solid var(--line); }
.widget ul li:last-child{ border-bottom:0; }
.widget ul li a{ color:var(--ink); text-decoration:none; }
.widget ul li a:hover{ color:var(--red); }

/* Comments */
.comments-area{ margin-top:48px; padding-top:32px; border-top:1px solid var(--line); }
.comments-area .comment-list{ list-style:none; padding:0; }
.comments-area .comment{ padding:18px 0; border-bottom:1px solid var(--line); }
.comments-area .comment-author{ font-weight:700; }

/* Search form (default WP) */
.search-form{ display:flex; gap:8px; }
.search-form .search-field{ flex:1; padding:10px 14px; border:1px solid var(--line); border-radius:8px; font-family:inherit; }
.search-form .search-submit{
  background:var(--red); color:#fff; border:0; border-radius:8px;
  padding:10px 18px; font-weight:600; cursor:pointer;
}

/* Responsive */
@media (max-width: 991.98px){
  .vehicle-search{ grid-template-columns:1fr 1fr; }
  .vs-field{ border-right:0; border-bottom:1px solid var(--line); }
  .vs-field:nth-child(3),.vs-field:nth-child(4){ border-bottom:0; }
  .vs-submit{ grid-column:1 / -1; padding:16px; }
  .heritage::before{ font-size:280px; right:-60px; opacity:.6; }
  .facility-grid{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,180px); }
  .facility-1,.facility-2,.facility-3,.facility-4{ grid-column:span 1; grid-row:span 1; }
  .facility-1{ grid-column:1/-1; }
  .cta-inner{ padding:40px 28px; }
}
@media (max-width: 575.98px){
  .testimonial-card{ padding:40px 24px; }
  .hero-stats{ gap:24px; }
  .hero-stats .num{ font-size:26px; }
}

/* ========================================================================
 *  PAGE CONTAINER — mirrors Total theme's responsive container so WPBakery
 *  pages line up with production: 1280px max width, capped at 90% of the
 *  viewport on smaller screens. Applied to .page-shell--full which page.php
 *  sets when the page uses WPBakery or any [dg_*] section shortcode.
 *
 *  Full-bleed sections still work: WPBakery's data-vc-full-width rows
 *  break out via its own JS (calculates body width, applies negative
 *  margins). Our own [dg_*] sections break out via the viewport-width
 *  rule below, so a hero placed on a WPBakery page spans the screen
 *  even though the article wrapper is constrained.
 * ====================================================================== */
:root{
  --dg-container-width: 1280px;
  --dg-container-max-width: 90%;
}
.page-shell--full{ overflow-x:hidden; } /* prevent horizontal scroll from break-outs */
.page-shell--full > article{
  width: var(--dg-container-width);
  max-width: var(--dg-container-max-width);
  margin: 0 auto;
}
.page-shell--full .hero,
.page-shell--full .services,
.page-shell--full .vehicles,
.page-shell--full .heritage,
.page-shell--full .testimonials,
.page-shell--full .facilities,
.page-shell--full .cta-banner{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ========================================================================
 *  PLUGIN COMPAT — Contact Form 7
 * ====================================================================== */
.wpcf7-form{ font-family:inherit; }
.wpcf7-form p{ margin-bottom:18px; }
.wpcf7-form label{ display:block; font-weight:600; font-size:14px; margin-bottom:6px; color:var(--ink); }

.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-url,
.wpcf7-form-control.wpcf7-number,
.wpcf7-form-control.wpcf7-date,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select{
  width:100%;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:8px;
  font-family:inherit;
  font-size:15px;
  background:#fff;
  color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-tel:focus,
.wpcf7-form-control.wpcf7-url:focus,
.wpcf7-form-control.wpcf7-number:focus,
.wpcf7-form-control.wpcf7-date:focus,
.wpcf7-form-control.wpcf7-textarea:focus,
.wpcf7-form-control.wpcf7-select:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(189,35,40,.15);
}
.wpcf7-form-control.wpcf7-textarea{ min-height:120px; resize:vertical; }

.wpcf7-form-control.wpcf7-submit{
  background:var(--red);
  color:#fff;
  font-weight:600;
  font-size:14px;
  letter-spacing:.01em;
  padding:12px 28px;
  border-radius:8px;
  border:0;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(189,35,40,.25);
  transition:background .2s, transform .2s, box-shadow .2s;
}
.wpcf7-form-control.wpcf7-submit:hover{
  background:var(--red-dark);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(189,35,40,.35);
}
.wpcf7-form-control.wpcf7-submit:disabled{
  opacity:.6; cursor:not-allowed; transform:none;
}

.wpcf7-form-control.wpcf7-checkbox,
.wpcf7-form-control.wpcf7-radio{
  display:flex; flex-wrap:wrap; gap:8px 16px;
}
.wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item,
.wpcf7-form-control.wpcf7-radio .wpcf7-list-item{ margin:0; }

.wpcf7-not-valid-tip{ color:var(--red); font-size:13px; margin-top:4px; display:block; }
.wpcf7-form-control.wpcf7-not-valid{ border-color:var(--red); }

.wpcf7-response-output{
  border-radius:8px; padding:14px 18px; margin-top:18px;
  font-size:14px; line-height:1.55;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output{ border-color:var(--red); color:var(--red); background:var(--red-soft); }
.wpcf7 form.sent .wpcf7-response-output{ border-color:var(--ok); color:var(--ok); background:#E7F4EE; }

/* ========================================================================
 *  PLUGIN COMPAT — SGCarMart Listings
 *  Neutralise Bootstrap 5 / theme.css side-effects on plugin markup.
 * ====================================================================== */
.sgcarmartplugin .carlist,
.sgcarmartplugin .carlist:hover,
.sgcarmartplugin .carlist *,
.sgcarmartplugin a.carlist{
  color:inherit !important;
  text-decoration:none !important;
}
.sgcarmartplugin [class*="col-"]{
  padding-left:0;
  padding-right:0;
}
.sgcarmartplugin .col-sm-4.item-template{ padding-left:7.5px; padding-right:7.5px; }
.sgcarmartplugin .form-control{
  border-radius:0;
  padding:6px 12px;
  font-size:14px;
  height:auto;
  background:#fff;
}
.sgcarmartplugin .cartitle,
.sgcarmartplugin .pricee{ color:var(--ink); }
.sgcarmartplugin .pricee.status{ color:var(--muted); }
.sgcarmartplugin .filter-label{ font-weight:600; color:var(--ink); }

/* Single-vehicle detail view rendered by [sgcm] when ?carid= is in the URL. */
#single-page-sgcarmart .product_title{ font-family:'Fraunces',Georgia,serif; font-weight:600; }
#single-page-sgcarmart .single-page-sgcarmart-Price-amount{ color:var(--red); font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:32px; }
#back-list-sgcarmart-page{ color:var(--ink); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:6px; margin-bottom:20px; }
#back-list-sgcarmart-page:hover{ color:var(--red); }
#back-list-sgcarmart-page::before{ content:"←"; }