/*  ============================================================================
 *  Dickson Group Total — child-theme stylesheet
 *  ============================================================================
 *
 *  Contains:
 *    1. Design tokens (CSS custom properties)
 *    2. Reset / base typography for our scoped components
 *    3. Custom utility / layout classes (.dg-container, .dg-grid, .dg-flex, .dg-btn)
 *       — these replace Bootstrap utilities we previously relied on
 *    4. Top bar, header, footer (our brand chrome)
 *    5. All seven [dg_*] section styles (.dg-hero, .dg-services, etc.)
 *
 *  No Bootstrap 5 rules. All classes are .dg-* prefixed so they coexist with
 *  Total's CSS framework (--wpex-* / .wpex-*) and WPBakery's .vc_* classes
 *  without collision.
 *  ========================================================================== */

/* ----- 1. DESIGN TOKENS ----- */
:root{
  --dg-red:#BD2328;
  --dg-red-dark:#8F1A1E;
  --dg-red-soft:#F8E5E6;
  --dg-ink:#0E0E10;
  --dg-ink-2:#1C1C20;
  --dg-muted:#6B6B70;
  --dg-line:#E6E6E6;
  --dg-paper:#F7F5F1;
  --dg-white:#FFFFFF;
  --dg-ok:#2D5F4E;
  --dg-shadow-md: 0 4px 14px rgba(14,14,16,.08), 0 20px 40px rgba(14,14,16,.06);
  --dg-shadow-lg: 0 12px 40px rgba(14,14,16,.12), 0 40px 80px rgba(14,14,16,.08);
  --dg-ease: cubic-bezier(.2,.7,.2,1);
  --dg-container-w: 1280px;
  --dg-container-max: 90%;
  --dg-font-sans: 'Archivo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dg-font-serif: 'Fraunces', Georgia, serif;

  /* Total accent overrides — point Total's primary variables at our brand
     red so any Total component (links, buttons, .wpex-*) renders in our
     brand colour. Also acts as a safety net if cache plugins strip our
     own variables; Total uses --wpex-accent everywhere it matters. */
  --wpex-accent: #BD2328;
  --wpex-accent-alt: #8F1A1E;
  --wpex-on-accent: #ffffff;
  --wpex-on-accent-alt: #ffffff;
}

/* ----- 2. UTILITY / LAYOUT ----- */

/* Container: matches Total's responsive width pattern (1280px max, 90% on smaller). */
.dg-container{
  width: var(--dg-container-w);
  max-width: var(--dg-container-max);
  margin: 0 auto;
  padding: 0;
}

/* Flex utilities — only used inside our chrome / sections. */
.dg-flex{ display:flex; }
.dg-flex--center{ align-items:center; }
.dg-flex--between{ justify-content:space-between; }
.dg-flex--wrap{ flex-wrap:wrap; }
.dg-flex--gap-2{ gap:8px; }
.dg-flex--gap-3{ gap:12px; }

/* CSS Grid replaces Bootstrap .row/.col-*. */
.dg-grid{ display:grid; gap:16px; }
.dg-grid--cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.dg-grid--cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.dg-grid--cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.dg-grid--cols-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.dg-grid--gap-3{ gap:12px; }
.dg-grid--gap-4{ gap:16px; }
.dg-grid--gap-5{ gap:24px; }
@media (max-width: 991.98px){
  .dg-grid--cols-3,
  .dg-grid--cols-4,
  .dg-grid--cols-5{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 575.98px){
  .dg-grid--cols-2,
  .dg-grid--cols-3,
  .dg-grid--cols-4,
  .dg-grid--cols-5{ grid-template-columns:1fr; }
}

/* Button system — replaces .btn / .btn-brand / .btn-ghost-light. */
.dg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px;
  border-radius:8px;
  font-family:var(--dg-font-sans);
  font-weight:600; font-size:14px; line-height:1.2;
  text-decoration:none;
  border:0; cursor:pointer;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s;
  white-space:nowrap;
}
.dg-btn--hero{ padding:14px 24px; border-radius:10px; font-size:15px; }
.dg-btn--brand{
  background:var(--dg-red); color:#fff;
  box-shadow:0 4px 14px rgba(189,35,40,.25);
}
.dg-btn--brand:hover{
  background:var(--dg-red-dark); color:#fff;
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(189,35,40,.35);
}
.dg-btn--ghost-light{
  background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.2);
}
.dg-btn--ghost-light:hover{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.3); }
.dg-btn--ink{ background:var(--dg-ink); color:#fff; padding:10px 18px; border-radius:8px; font-size:13px; }
.dg-btn--ink:hover{ background:var(--dg-red); color:#fff; transform:translateY(-1px); }

.dg-sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Eyebrow / section title / sub helpers used across sections. */
.dg-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--dg-red); font-weight:600; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:14px;
}
.dg-eyebrow::before, .dg-eyebrow::after{ content:""; width:24px; height:1px; background:var(--dg-red); }
.dg-section-title{
  font-family:var(--dg-font-serif); font-weight:500;
  font-size:clamp(32px,4vw,48px); letter-spacing:-.02em; line-height:1.1;
  margin:0;
}
.dg-section-title em{ font-style:italic; }
.dg-section-sub{ color:var(--dg-muted); margin-top:14px; font-size:17px; line-height:1.55; }
.dg-section-head{ text-align:center; max-width:680px; margin:0 auto 48px; }

/* ----- 3. TOP BAR ----- */
.dg-topbar{
  background:var(--dg-ink); color:#CFCFD2;
  font-family:var(--dg-font-sans);
  font-size:13px; line-height:1.55;
  padding:10px 0;
  letter-spacing:.01em;
}
.dg-topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.dg-topbar a{ color:inherit; text-decoration:none; transition:color .2s; }
.dg-topbar a:hover{ color:#fff; }
.dg-topbar .bi{ font-size:14px; opacity:.75; vertical-align:-.1em; }
.dg-topbar__info{ display:flex; flex-wrap:wrap; gap:12px 18px; }
.dg-topbar__item--md{ display:none; }
.dg-topbar__item--lg{ display:none; }
@media (min-width: 768px){ .dg-topbar__item--md{ display:inline; } }
@media (min-width: 992px){ .dg-topbar__item--lg{ display:inline; } }
.dg-topbar__social{ display:none; gap:8px; }
@media (min-width: 576px){ .dg-topbar__social{ display:inline-flex; } }
.dg-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;
}
.dg-topbar__social a:hover{ background:var(--dg-red); transform:translateY(-1px); }

/* ----- 4. SITE HEADER (NAVBAR) ----- */
.dg-site-header{
  background:#fff;
  border-bottom:1px solid var(--dg-line);
  font-family:var(--dg-font-sans);
  z-index:100;
}
@media (min-width: 1200px){
  .dg-site-header{ position:sticky; top:0; backdrop-filter:saturate(1.2) blur(8px); }
  .admin-bar .dg-site-header{ top:32px; }
}
.dg-site-header__inner{
  display:flex; align-items:center; gap:12px;
  /* Allow the collapse drawer to wrap to its own row on mobile/tablet
     instead of squeezing into the brand+hamburger row. */
  flex-wrap:wrap;
  min-height:77px;
  padding:12px 0;
}
.dg-site-header__brand{ display:inline-flex; flex-shrink:0; }
.dg-site-header__brand img{ display:block; }
.dg-site-header__cta{ flex-shrink:0; }

/* Hamburger toggle (mobile/tablet) */
.dg-nav-toggle{
  margin-left:auto;
  background:transparent; border:0; cursor:pointer;
  font-size:28px; color:var(--dg-ink);
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
}
.dg-nav-toggle:hover{ background:var(--dg-paper); }
@media (min-width: 1200px){ .dg-nav-toggle{ display:none; } }

.dg-nav-collapse{
  display:none;
  width:100%;
  /* When visible on mobile, claim a full new row below brand+hamburger
     (parent uses flex-wrap; flex-basis:100% guarantees the row break). */
  flex-basis:100%;
}
.dg-nav-collapse.is-open{ display:block; }
@media (min-width: 1200px){
  .dg-nav-collapse{ display:flex; flex-basis:auto; flex:1; align-items:center; gap:12px; }
}

/* ----- NAVIGATION MENU ----- */
.dg-nav__list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
}
@media (min-width: 1200px){
  .dg-nav__list{
    flex-direction:row; align-items:center; flex-wrap:wrap;
    justify-content:center; flex:1;
  }
}

.dg-nav__item{
  position:relative;
  display:flex; align-items:center; flex-wrap:wrap;
  border-radius:8px;
  transition: background .2s;
}
.dg-nav__link{
  font-weight:500; font-size:15px; color:var(--dg-ink);
  padding:10px 14px; border-radius:8px;
  text-decoration:none;
  transition: color .2s, background .2s;
  display:inline-flex; align-items:center;
}
.dg-nav__item:not(.dg-nav__item--has-children) .dg-nav__link:hover{
  color:var(--dg-red); background:var(--dg-red-soft);
}
.dg-nav__item--has-children:hover,
.dg-nav__item--has-children.is-open{
  background:var(--dg-red-soft);
}
.dg-nav__item--has-children:hover > .dg-nav__link,
.dg-nav__item--has-children:hover > .dg-nav__caret,
.dg-nav__item--has-children.is-open > .dg-nav__link,
.dg-nav__item--has-children.is-open > .dg-nav__caret{
  color:var(--dg-red); background:transparent;
}
.dg-nav__item--has-children > .dg-nav__link{ padding-right:4px; }

/* Caret button for top-level items with children */
.dg-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(--dg-ink);
  border-radius:6px;
  transition: color .2s, transform .2s;
}
.dg-nav__caret[aria-expanded="true"]{ transform:rotate(180deg); }
.dg-nav__caret:focus, .dg-nav__caret:focus-visible{ outline:none; box-shadow:none; }

/* DROPDOWN MENUS */
.dg-nav__dropdown{
  list-style:none; padding:0; margin:0;
}
@media (min-width: 1200px){
  .dg-nav__dropdown{
    position:absolute; top:100%; left:0;
    min-width:240px;
    background:#fff;
    border:1px solid var(--dg-line);
    border-radius:12px;
    box-shadow:var(--dg-shadow-lg);
    padding:10px;
    margin-top:4px;
    display:none;
    z-index:1000;
  }
  .dg-nav__item--has-children:hover > .dg-nav__dropdown,
  .dg-nav__item--has-children.is-open > .dg-nav__dropdown{
    display:block;
  }
}

.dg-nav__sub-item{ list-style:none; position:relative; }
.dg-nav__sub-link{
  display:block;
  padding:10px 12px;
  border-radius:6px;
  font-size:14px; color:var(--dg-ink);
  text-decoration:none;
  transition:background .2s, color .2s;
}
.dg-nav__sub-link:hover, .dg-nav__sub-link.is-active{
  background:var(--dg-paper); color:var(--dg-red);
}

/* Level-3 (nested) — desktop flyout to the right */
@media (min-width: 1200px){
  .dg-nav__dropdown--nested{
    position:absolute; top:-10px; left:calc(100% + 4px);
    min-width:220px;
    display:none;
  }
}
.dg-nav__sub-item--has-children > .dg-nav__sub-link{ padding-right:32px; position:relative; }
.dg-nav__sub-item--has-children > .dg-nav__sub-link::after{
  content:"›"; position:absolute; right:12px; top:50%;
  transform:translateY(-50%); font-size:18px; line-height:1; color:var(--dg-muted);
}
@media (min-width: 1200px) and (hover: hover){
  .dg-nav__sub-item--has-children:hover > .dg-nav__dropdown--nested,
  .dg-nav__sub-item--has-children:focus-within > .dg-nav__dropdown--nested{
    display:block;
  }
}

/* Level-2 submenu toggle — hidden by default, shown on tablet/mobile and on
   touch devices at desktop width. */
.dg-nav__sub-toggle{ display:none; }
@media (min-width: 1200px) and (hover: none){
  .dg-nav__sub-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(--dg-muted);
    border-radius:6px;
    transition: transform .2s, color .2s, background .2s;
    z-index:1;
  }
  .dg-nav__sub-toggle[aria-expanded="true"]{
    transform:translateY(-50%) rotate(180deg);
    color:var(--dg-red);
  }
  .dg-nav__sub-item--has-children > .dg-nav__sub-link::after{ content:none; }
  .dg-nav__sub-item--has-children > .dg-nav__sub-link{ padding-right:40px; }
  .dg-nav__sub-item--has-children.is-open > .dg-nav__dropdown--nested{ display:block; }
}

/* Mobile/tablet navigation styles */
@media (max-width: 1199.98px){
  .dg-nav-collapse{
    background:#fff;
    border-top:1px solid var(--dg-line);
    box-shadow:var(--dg-shadow-md);
    margin-top:12px;
    padding:12px 8px;
    border-radius:12px;
  }
  .dg-nav__list{ width:100%; }
  .dg-nav__item{ width:100%; flex-wrap:wrap; }
  .dg-nav__link{ flex:1; }

  /* Dropdowns inline (no popper positioning) */
  .dg-nav__dropdown{
    width:100%;
    padding:4px 0 4px 14px;
    margin:4px 0 0;
    display:none;
  }
  .dg-nav__item--has-children.is-open > .dg-nav__dropdown{ display:block; }

  /* Level-2 submenu toggle becomes a flex item next to its link */
  .dg-nav__sub-item--has-children{
    display:flex; flex-wrap:wrap; align-items:center;
  }
  .dg-nav__sub-item--has-children > .dg-nav__sub-link{
    flex:1; font-weight:600; padding-right:8px;
  }
  .dg-nav__sub-item--has-children > .dg-nav__sub-link::after{ content:none; }
  .dg-nav__sub-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(--dg-ink);
    border-radius:6px;
    transition: transform .2s, color .2s, background .2s;
  }
  .dg-nav__sub-toggle[aria-expanded="true"]{
    transform: rotate(180deg);
    background:var(--dg-red-soft); color:var(--dg-red);
  }

  .dg-nav__dropdown--nested{
    display:none;
    flex-basis:100%;
    padding-left:18px;
    margin-top:2px;
    border-left:2px solid var(--dg-line);
  }
  .dg-nav__sub-item--has-children.is-open > .dg-nav__dropdown--nested{ display:block; }
  .dg-nav__dropdown--nested .dg-nav__sub-link{
    font-weight:400; font-size:13px; color:var(--dg-muted);
  }
  .dg-nav__dropdown--nested .dg-nav__sub-link:hover{ color:var(--dg-red); }

  .dg-site-header__cta{ margin:12px 0 4px; width:100%; justify-content:center; }
}

/* ----- 5. SITE FOOTER ----- */
.dg-site-footer{
  background:var(--dg-ink); color:#B8B8BC;
  padding:80px 0 32px;
  font-family:var(--dg-font-sans);
}
.dg-site-footer__columns{
  display:grid;
  grid-template-columns: 5fr 2fr 2fr 2fr;
  gap:32px;
}
@media (max-width: 991.98px){
  .dg-site-footer__columns{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px){
  .dg-site-footer__columns{ grid-template-columns: 1fr; }
}
.dg-site-footer__brand-link img{ display:block; }
.dg-site-footer__blurb{ margin-top:20px; font-size:14px; line-height:1.7; max-width:320px; }
.dg-site-footer__address{
  font-style:normal; margin-top:18px; font-size:14px; line-height:1.6; color:#fff;
}
.dg-site-footer__address .bi{ color:var(--dg-red); }
.dg-site-footer__social{ margin-top:18px; display:flex; gap:8px; }
.dg-site-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;
  transition:all .2s; text-decoration:none;
}
.dg-site-footer__social a:hover{ background:var(--dg-red); transform:translateY(-2px); }
.dg-site-footer__col-title{
  color:#fff; font-size:13px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  margin:0 0 22px;
}
.dg-site-footer__list{ list-style:none; padding:0; margin:0; }
.dg-site-footer__list li{ margin-bottom:10px; }
.dg-site-footer__list a{
  font-size:14px; color:#B8B8BC; text-decoration:none;
  transition:color .2s, padding .2s;
}
.dg-site-footer__list a:hover{ color:#fff; padding-left:4px; }
.dg-site-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;
}
.dg-site-footer__accred{ display:flex; gap:12px; flex-wrap:wrap; }
.dg-site-footer__accred span{ color:#8a8a90; }
.dg-site-footer__accred a{ color:#B8B8BC; text-decoration:none; }
.dg-site-footer__accred a:hover{ color:#fff; }

/* ============================================================================
 *  PRODUCTION CONTENT COMPATIBILITY
 *  Custom CSS classes referenced by the page content that was migrated from
 *  the dicksongroup.com.sg production site. On production these are defined
 *  in Total's Customizer → Additional CSS; we replicate them here so the same
 *  page content renders identically without depending on Customizer state.
 *  ========================================================================== */
.home-title{
  color: #2836a3;
  font-size: 28px;
  margin-bottom: 0;
}
.divider{
  width: 48px;
  display: block;
  margin: 10px auto;
  height: 2px;
  background: #2836a3;
  margin-bottom: 20px !important;
}

/* ============================================================================
 *  HOMEPAGE SECTIONS — [dg_*]
 *  Each section's HTML is in /inc/sections/<name>.php; styles below mirror
 *  the original Bootstrap-based theme but use only .dg-* classes.
 *  ========================================================================== */

/* Break sections out of any width constraint imposed by Total's content
   wrapper (.single-page-content) — important when a [dg_*] shortcode is
   used inside a regular page where Total's full-screen layout isn't active.
   Total's #outer-wrap has wpex-overflow-clip, so the viewport-width breakout
   never causes horizontal scroll. */
.dg-hero,
.dg-services,
.dg-vehicles,
.dg-heritage,
.dg-testimonials,
.dg-facilities,
.dg-cta{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* ----- HERO ----- */
.dg-hero{
  background:#0A0A0C; color:#fff; overflow:hidden;
  min-height:680px; display:flex; align-items:center;
  font-family:var(--dg-font-sans);
}
.dg-hero__bg{ position:absolute; inset:0; z-index:0; }
.dg-hero__photo{ position:absolute; pointer-events:none; z-index:1; }
.dg-hero:not([data-variant="a"]):not([data-variant="b"]) .dg-hero__photo{ display:none; }
.dg-hero[data-variant="a"] .dg-hero__bg{
  background: radial-gradient(ellipse at 78% 55%, rgba(189,35,40,.22), transparent 58%),
    linear-gradient(180deg, #0A0A0C 0%, #131318 100%);
}
.dg-hero[data-variant="a"] .dg-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%);
}
.dg-hero[data-variant="a"] .dg-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;
}
.dg-hero[data-variant="b"]{ background:var(--dg-paper); color:var(--dg-ink); }
.dg-hero[data-variant="b"] .dg-hero__bg{
  background: radial-gradient(circle at 88% 18%, rgba(189,35,40,.10), transparent 45%),
    linear-gradient(180deg, #FAF8F4 0%, #F2EFE8 100%);
}
.dg-hero[data-variant="b"] .dg-hero__bg::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--dg-red) 30%, var(--dg-red) 70%, transparent);
  opacity:.4;
}
.dg-hero[data-variant="b"] .dg-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);
}
.dg-hero[data-variant="b"] .dg-hero__eyebrow{ background:#fff; border-color:var(--dg-line); color:var(--dg-ink); }
.dg-hero[data-variant="b"] .dg-hero__title{ color:var(--dg-ink); }
.dg-hero[data-variant="b"] .dg-hero__title em::after{ background:var(--dg-red); opacity:.18; height:14px; }
.dg-hero[data-variant="b"] .dg-hero__lede{ color:var(--dg-muted); }
.dg-hero[data-variant="c"] .dg-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;
}
.dg-hero[data-variant="d"] .dg-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;
}
.dg-hero[data-variant="e"] .dg-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;
}
.dg-hero__container{ position:relative; z-index:2; padding-top:80px; padding-bottom:80px; }
.dg-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);
}
.dg-hero__eyebrow-dot{ width:6px; height:6px; border-radius:50%; background:var(--dg-red); box-shadow:0 0 12px var(--dg-red); }
.dg-hero__title{
  font-family:var(--dg-font-serif); font-weight:500;
  font-size:clamp(40px,6vw,80px); line-height:1.02; letter-spacing:-.02em;
  margin:22px 0 20px; max-width:780px;
  color:#fff;
}
.dg-hero__title em{ font-style:italic; position:relative; }
.dg-hero__title em::after{
  content:""; position:absolute; left:0; right:0; bottom:.1em; height:3px;
  background:var(--dg-red); border-radius:2px;
}
.dg-hero__lede{ font-size:18px; max-width:560px; color:rgba(255,255,255,.82); margin-bottom:36px; }
.dg-hero__buttons{ display:flex; gap:8px; flex-wrap:wrap; }

.dg-vehicle-search{
  position:relative; z-index:3;
  background:#fff; color:var(--dg-ink);
  border-radius:16px; padding:14px;
  box-shadow:var(--dg-shadow-lg);
  display:grid; grid-template-columns:repeat(4,1fr) auto; gap:6px;
  max-width:960px; margin-top:44px;
}
.dg-vehicle-search__field{
  padding:14px 16px; border-right:1px solid var(--dg-line);
  display:flex; flex-direction:column; gap:2px;
}
.dg-vehicle-search__field:last-of-type{ border-right:0; }
.dg-vehicle-search__field label{ font-size:11px; color:var(--dg-muted); text-transform:uppercase; letter-spacing:.1em; font-weight:600; }
.dg-vehicle-search__field select{
  border:0; outline:none; font-family:inherit; font-size:15px; font-weight:600;
  color:var(--dg-ink); background:transparent; padding:0; cursor:pointer;
}
.dg-vehicle-search__submit{
  background:var(--dg-red); color:#fff;
  padding:0 28px; border-radius:10px; border:0;
  display:inline-flex; align-items:center; gap:8px; font-weight:600;
  cursor:pointer;
}
.dg-vehicle-search__submit:hover{ background:var(--dg-red-dark); }
@media (max-width: 991.98px){
  .dg-vehicle-search{ grid-template-columns:1fr 1fr; }
  .dg-vehicle-search__field{ border-right:0; border-bottom:1px solid var(--dg-line); }
  .dg-vehicle-search__field:nth-child(3),
  .dg-vehicle-search__field:nth-child(4){ border-bottom:0; }
  .dg-vehicle-search__submit{ grid-column:1 / -1; padding:16px; }
}

.dg-hero__stats{ display:flex; gap:40px; margin-top:48px; flex-wrap:wrap; }
.dg-hero__stat{ border-left:2px solid var(--dg-red); padding-left:16px; }
.dg-hero__stat-num{ font-family:var(--dg-font-serif); font-size:32px; font-weight:600; line-height:1; color:#fff; }
.dg-hero__stat-lbl{ font-size:13px; color:rgba(255,255,255,.7); margin-top:4px; }
.dg-hero[data-variant="b"] .dg-hero__stat-num{ color:var(--dg-ink); }
.dg-hero[data-variant="b"] .dg-hero__stat-lbl{ color:var(--dg-muted); }
@media (max-width: 575.98px){
  .dg-hero__stats{ gap:24px; }
  .dg-hero__stat-num{ font-size:26px; }
}

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

/* ----- VEHICLES ----- */
.dg-vehicles{ padding:100px 0; background:#fff; font-family:var(--dg-font-sans); }
.dg-vehicles__head{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:flex-end; gap:12px; margin-bottom:24px;
}
.dg-vehicles__view-all{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; color:var(--dg-ink); padding:10px 18px;
  border:1px solid var(--dg-line); border-radius:999px; text-decoration:none;
  transition:all .2s;
}
.dg-vehicles__view-all:hover{ background:var(--dg-ink); color:#fff; border-color:var(--dg-ink); }
.dg-vehicles__grid{
  display:grid; gap:16px;
}
.dg-vehicles__grid--cols-1{ grid-template-columns:1fr; }
.dg-vehicles__grid--cols-2{ grid-template-columns:repeat(2,1fr); }
.dg-vehicles__grid--cols-3{ grid-template-columns:repeat(3,1fr); }
.dg-vehicles__grid--cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width: 991.98px){
  .dg-vehicles__grid--cols-3,
  .dg-vehicles__grid--cols-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 575.98px){
  .dg-vehicles__grid--cols-2,
  .dg-vehicles__grid--cols-3,
  .dg-vehicles__grid--cols-4{ grid-template-columns:1fr; }
}

.dg-vehicle-card{
  background:#fff; border:1px solid var(--dg-line); border-radius:14px; overflow:hidden;
  transition:all .3s var(--dg-ease); display:flex; flex-direction:column; height:100%;
}
.dg-vehicle-card:hover{ transform:translateY(-4px); box-shadow:var(--dg-shadow-md); border-color:transparent; }
.dg-vehicle-card__image{ position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,#f0f0f0,#dcdcdc); }
.dg-vehicle-card__image img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--dg-ease); }
.dg-vehicle-card:hover .dg-vehicle-card__image img{ transform:scale(1.06); }
.dg-vehicle-card__badge{
  position:absolute; top:12px; left:12px;
  background:#fff; color:var(--dg-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;
}
.dg-vehicle-card__badge-dot{ width:6px; height:6px; border-radius:50%; background:var(--dg-ok); }
.dg-vehicle-card__badge--sold{ color:var(--dg-muted); }
.dg-vehicle-card__badge--sold .dg-vehicle-card__badge-dot{ background:var(--dg-muted); }
.dg-vehicle-card--sold .dg-vehicle-card__image img{ filter:grayscale(.6); opacity:.85; }
.dg-vehicle-card--sold .dg-vehicle-card__price{ color:var(--dg-muted); text-decoration:line-through; }
.dg-vehicle-card__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(--dg-ink); cursor:pointer;
}
.dg-vehicle-card__fav:hover{ background:#fff; color:var(--dg-red); }
.dg-vehicle-card__body{ padding:22px; display:flex; flex-direction:column; flex-grow:1; }
.dg-vehicle-card__body h3{ font-size:19px; font-weight:700; letter-spacing:-.01em; margin:0 0 14px; }
.dg-vehicle-card__body h3 a{ color:inherit; text-decoration:none; }
.dg-vehicle-card__specs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:14px 0; border-top:1px solid var(--dg-line); border-bottom:1px solid var(--dg-line);
  margin-bottom:16px;
}
.dg-vehicle-card__spec-label{ font-size:11px; color:var(--dg-muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.dg-vehicle-card__spec-value{ font-size:13px; font-weight:600; color:var(--dg-ink); }
.dg-vehicle-card__footer{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.dg-vehicle-card__price-label{ font-size:11px; color:var(--dg-muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600; display:block; }
.dg-vehicle-card__price{ font-family:var(--dg-font-serif); font-weight:600; font-size:24px; color:var(--dg-red); }
.dg-vehicle-card__cta{
  background:var(--dg-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;
}
.dg-vehicle-card__cta:hover{ background:var(--dg-red); color:#fff; transform:translateY(-1px); }

/* ----- HERITAGE ----- */
.dg-heritage{ padding:110px 0; background:var(--dg-ink); color:#fff; position:relative; overflow:hidden; font-family:var(--dg-font-sans); }
.dg-heritage::before{
  content:"1988"; position:absolute; right:-80px; top:50%; transform:translateY(-50%);
  font-family:var(--dg-font-serif); font-weight:500;
  font-size:520px; line-height:1; letter-spacing:-.04em;
  color:rgba(255,255,255,.025); pointer-events:none;
}
@media (max-width: 991.98px){ .dg-heritage::before{ font-size:280px; right:-60px; opacity:.6; } }
.dg-heritage__container{ position:relative; z-index:2; }
.dg-heritage__row{
  display:grid; grid-template-columns:repeat(2,1fr); gap:48px;
  align-items:center;
}
@media (max-width: 991.98px){ .dg-heritage__row{ grid-template-columns:1fr; } }
.dg-heritage__image{
  aspect-ratio:4/5; border-radius:18px; overflow:hidden;
  position:relative; box-shadow:var(--dg-shadow-lg);
  max-width:480px;
}
.dg-heritage__image img{ width:100%; height:100%; object-fit:cover; }
.dg-heritage__year-chip{
  position:absolute; bottom:24px; left:24px;
  background:var(--dg-red); color:#fff;
  padding:14px 20px; border-radius:12px; font-weight:700;
}
.dg-heritage__year-chip small{ display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.85; font-weight:500; }
.dg-heritage__year-chip strong{ font-family:var(--dg-font-serif); font-weight:600; font-size:28px; line-height:1; display:block; }
.dg-heritage .dg-section-title{ color:#fff; }
.dg-heritage .dg-section-title em{ color:#FF8A8E; }
.dg-heritage .dg-eyebrow{ color:#FF6A6F; }
.dg-heritage .dg-eyebrow::before, .dg-heritage .dg-eyebrow::after{ background:#FF6A6F; }
.dg-heritage__body p{ color:rgba(255,255,255,.78); font-size:17px; line-height:1.7; }
.dg-heritage__body p:first-of-type{ margin-top:14px; }
.dg-heritage__stats{
  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);
}
.dg-heritage__stats-num{ font-family:var(--dg-font-serif); font-size:36px; font-weight:600; line-height:1; color:#fff; }
.dg-heritage__stats-lbl{ font-size:13px; color:rgba(255,255,255,.65); margin-top:6px; }
.dg-heritage__accred{
  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;
}
.dg-heritage__accred-label{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:600; }
.dg-heritage__accred-list{ display:flex; gap:8px; flex-wrap:wrap; }
.dg-heritage__accred-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 ----- */
.dg-testimonials{ padding:110px 0; background:var(--dg-paper); font-family:var(--dg-font-sans); }
.dg-testimonial-card{
  background:#fff; border-radius:20px; padding:56px 64px;
  box-shadow:var(--dg-shadow-md); position:relative; max-width:960px; margin:0 auto;
}
@media (max-width: 575.98px){ .dg-testimonial-card{ padding:40px 24px; } }
.dg-testimonial-card::before{
  content:"\201C"; position:absolute; top:-20px; left:40px;
  font-family:var(--dg-font-serif); font-size:160px; font-weight:700;
  color:var(--dg-red); line-height:1;
}
.dg-testimonial-card__text{
  font-family:var(--dg-font-serif); font-weight:400; font-style:italic;
  font-size:clamp(20px,2vw,26px); line-height:1.5; color:var(--dg-ink);
  margin:0;
}
.dg-testimonial-card__person{
  margin-top:36px; padding-top:28px; border-top:1px solid var(--dg-line);
  display:flex; align-items:center; gap:16px;
}
.dg-testimonial-card__avatar{
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,var(--dg-red),var(--dg-red-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:18px;
}
.dg-testimonial-card__info strong{ font-weight:700; font-size:15px; display:block; }
.dg-testimonial-card__info span{ font-size:13px; color:var(--dg-muted); }
.dg-testimonial-card__rating{ margin-left:auto; color:#F5B818; font-size:16px; }
.dg-testimonials__controls{ display:flex; justify-content:center; gap:8px; margin-top:28px; align-items:center; }
.dg-testimonials__ctrl{
  width:40px; height:40px; border-radius:50%;
  background:#fff; border:1px solid var(--dg-line);
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .2s; color:var(--dg-ink); cursor:pointer;
}
.dg-testimonials__ctrl:hover{ background:var(--dg-red); color:#fff; border-color:var(--dg-red); }
.dg-testimonials__dots{ display:flex; gap:6px; align-items:center; padding:0 14px; }
.dg-testimonials__dots span{ width:8px; height:8px; border-radius:50%; background:var(--dg-line); transition:all .2s; cursor:pointer; }
.dg-testimonials__dots span.is-active{ background:var(--dg-red); width:28px; border-radius:4px; }

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

/* ----- CTA BANNER ----- */
.dg-cta{ padding:0 0 80px; background:#fff; font-family:var(--dg-font-sans); }
.dg-cta__inner{
  background:linear-gradient(130deg,var(--dg-red) 0%, var(--dg-red-dark) 100%);
  border-radius:24px; padding:64px; color:#fff; position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
@media (max-width: 991.98px){
  .dg-cta__inner{ padding:40px 28px; grid-template-columns:1fr; }
}
.dg-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%);
  pointer-events:none;
}
.dg-cta__head, .dg-cta__paths{ position:relative; z-index:2; }
/* Higher specificity beats Total's parent h2 colour/font rule. */
.dg-cta__inner .dg-cta__title,
.dg-cta .dg-cta__title{
  font-family:var(--dg-font-serif);
  font-weight:500;
  font-size:clamp(28px,3.2vw,40px);
  line-height:1.08;
  letter-spacing:-.02em;
  color:#fff;
  margin:0 0 12px;
}
.dg-cta__title em{ font-style:italic; color:#fff; }
.dg-cta__subtitle{
  font-family:var(--dg-font-sans);
  color:#fff;
  font-size:17px; opacity:.9; margin:0;
}
.dg-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;
}
.dg-cta__path:last-child{ margin-bottom:0; }
.dg-cta__path:hover{ background:rgba(255,255,255,.18); transform:translateX(4px); color:#fff; }
.dg-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;
}
.dg-cta__path-text{ flex-grow:1; }
.dg-cta__path-text strong{ display:block; font-weight:700; font-size:16px; }
.dg-cta__path-text small{ font-size:13px; opacity:.8; }