/*
Theme Name: DG Cars Child
Theme URI: https://dgcars.co.uk/
Author: A Zit
Description: Child theme carrying the DG Cars 2026 redesign. New templates and styles live in the dgx- namespace so the parent theme keeps rendering every page that has not been rebuilt yet, and reverting is a single theme switch.
Template: dgcars
Version: 0.2.0
Requires at least: 5.5
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dgcars-child
*/

/* =========================================================================
   DG Cars 2026 redesign
   Shared stylesheet for the v2 mockups. This file becomes the child theme's
   style.css, so class names are kept in the parent's dg- namespace and no
   rule depends on anything outside the markup it ships with.
   ========================================================================= */

/* =========================================================================
   Tokens, from the Figma "CSS (all layers)" export
   ========================================================================= */
:root {
    --dg-green:        #349d40;
    --dg-green-dark:   #2b8034;
    --dgx-lime:        #c3cf1b;
    /* The button node is 270deg #349d40 -> #c3cf1b, i.e. lime on the left
       and green on the right once written as a CSS 90deg gradient. */
    --dgx-cta:         linear-gradient(90deg, #c3cf1b 0%, #349d40 100%);
    /* Text runs the other way to buttons: 105 of the 110 gradients applied to
       type in the file are 90deg #349d40 -> #c3cf1b. There are no flat
       coloured text accents anywhere in the design. */
    --dgx-cta-text:    linear-gradient(90deg, #349d40 0%, #c3cf1b 100%);
    --dgx-navy:        #1c274c;

    --dg-ink:          #000000;
    --dg-muted:        #4b4b57;
    --dg-faint:        #666666;
    --dg-line:         #d9d9d9;

    --dg-white:        #ffffff;
    --dg-bg-soft:      #f9fafb;
    --dgx-tint:        #eef7e8;

    --dg-radius:       12px;
    --dg-radius-lg:    24px;
    --dgx-radius-pill: 999px;
    --dg-shadow:       0 10px 30px rgba(15,15,15,.15);
    --dg-shadow-sm:    0 4px 14px rgba(15,15,15,.08);
    --dg-shadow-card:  0 4px 24px rgba(15,15,15,.06);

    --dg-container:    1368px;   /* 1320 content + 2x24 padding */
    /* Lucide check-check, the icon the Figma uses. One svg: this previously
       carried a second, nested <svg> pasted in from the exported file, which
       is invalid as a mask image and rendered nothing at all. */
    --dgx-tick:        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 7 17l-5-5'/%3E%3Cpath d='m22 10-7.5 7.5L13 16'/%3E%3C/svg%3E");
    --dg-font:         'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
                       "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================================
   Base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--dg-font);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.6;
    color: var(--dg-muted);
    background: var(--dg-white);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; color: var(--dg-ink); line-height: 1.12; letter-spacing: -.025em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* The design is drawn at 1440, and past that the layout just gets wider
   rather than better, so content is capped there and centred. The percentage
   padding resolves against the capped width, so it holds at the Figma's 60px
   from 1440 up and keeps scaling below it.

   Section backgrounds are deliberately left full-bleed: only the content
   inside them is capped. */
.dgx-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    /* vw, not %: a percentage resolves against the parent, so past the 1440
       cap the padding kept growing (80px at 1920) and pulled the content in
       to 1280 instead of the design's 1320. */
    padding: 0 clamp(16px, 4.17vw, 60px);
}
/* The hero is the one exception: it runs the full width of the screen, art,
   wash and all, however wide the display is. */
.dgx-hero > .dgx-container { max-width: none; }
.dgx-narrow { padding: 0 11%; }      /* the app ring sits narrower */

/* The design accents the closing word of nearly every heading, and always
   with the gradient rather than a flat colour. */
.dgx-accent,
.dgx-accent--lime {
    background: var(--dgx-cta-text);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

/* Section heads: small green eyebrow, big centred heading, optional lead. */
.dgx-head { text-align: center; margin-bottom: 48px; }
/* Where a section head runs straight into a wheel, the Figma leaves 95px:
   50px to the top spoke, which itself hangs 45px above the ring. */
.dgx-head:has(+ .dgx-wheel) { margin-bottom: 95px; }
.dgx-eyebrow {
    /* inline-block, so the gradient box is the width of the words. As a
       block it stretched the full container and the text showed one muddy
       slice from the middle. */
    display: inline-block;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 500;
    /* The Figma fills these with the brand gradient, not a flat green. */
    background: var(--dgx-cta-text);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.dgx-head h2 { font-size: 48px; font-weight: 800; }
.dgx-head p { max-width: 60ch; margin: 16px auto 0; }

.dgx-section { padding: 80px 0; }   /* Figma: 80px on every section */
.dgx-section--soft { background: var(--dg-bg-soft); }

/* =========================================================================
   Buttons
   ========================================================================= */
.dgx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 60px;
    padding: 0 30px;
    border: 0;
    border-radius: var(--dgx-radius-pill);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}
.dgx-btn:hover { transform: translateY(-2px); box-shadow: var(--dg-shadow-sm); }
/* Resting state is the Figma default: white label on both, and the arrow in
   a hollow disc with a 1px white outline. The inverted treatment (black on
   the gradient, gradient knocked through the label on black) is the hover,
   further down. */
.dgx-btn--grad {
    background: var(--dgx-cta);
    color: #f9fafb;
}
.dgx-btn--dark {
    background: var(--dg-ink);
    color: #f9fafb;
}
.dgx-btn--dark .dgx-btn__label {
    background: none;
    -webkit-text-fill-color: #f9fafb;
    color: #f9fafb;
}
.dgx-btn--grad .dgx-btn__arrow,
.dgx-btn--dark .dgx-btn__arrow {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

/* Hover: what these buttons used to look like at rest. */
.dgx-btn--grad:hover { color: var(--dg-ink); }
.dgx-btn--grad:hover .dgx-btn__arrow {
    background: var(--dg-ink);
    border-color: var(--dg-ink);
    color: #fff;
}
.dgx-btn--dark:hover .dgx-btn__label {
    background: var(--dgx-cta);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dgx-btn--dark:hover .dgx-btn__arrow {
    background: #fff;
    border-color: #fff;
    color: var(--dg-ink);
}
.dgx-btn--ghost {
    background: transparent;
    border: 1.5px solid var(--dg-line);
    color: var(--dg-ink);
}
.dgx-btn--ghost:hover { border-color: var(--dg-green); color: var(--dg-green); }
.dgx-btn--block { width: 100%; }

/* Figma: a 28x28 disc with a 1px outline, holding an 18x18 arrow whose
   glyph spans 7.5x7.5. The markup still carries a U+2197 character, whose
   drawn size varies with the font and rendered smaller than the design, so
   font-size:0 hides it and the mask below draws Lucide arrow-up-right at
   exactly the Figma geometry. Masking rather than embedding lets the arrow
   inherit the button's colour through every state. */
.dgx-btn__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: transparent;
    font-size: 0;
    line-height: 1;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.dgx-btn__arrow::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.44' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
            mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.44' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

/* =========================================================================
   Navbar. Floating white pill, not a full-width bar.
   ========================================================================= */
.dgx-navwrap {
    position: sticky;
    top: 0;
    /* 24 above + 92 nav = 116, which is where the Figma hero frame puts the
       255px gap to the eyebrow. A bottom pad here pushed everything 24px
       down and the fixed-height wash then ended short. */
    padding: 24px 0 0;
}
/* The pill tightens and gains a shadow once the page scrolls under it. */
.dgx-navwrap .dgx-nav { transition: box-shadow .2s ease, background .2s ease; }
@supports (animation-timeline: scroll()) {
    .dgx-navwrap .dgx-nav {
        animation: dgx-nav-lift linear both;
        animation-timeline: scroll();
        animation-range: 0 120px;
    }
    @keyframes dgx-nav-lift {
        to { box-shadow: 0 10px 30px rgba(15,15,15,.14); }
    }
}
.dgx-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 92px;
    padding: 16px 32px;
    /* Solid white is the fallback for browsers without backdrop-filter; the
       frosted 50% version is in the @supports block directly below. That
       block has to come after this rule, not before it: both selectors are
       a single class, so source order decides, and while it sat above this
       one the bar stayed fully opaque and no amount of tuning the alpha in
       it changed anything on screen. */
    background: var(--dg-white);
    border-radius: var(--dgx-radius-pill);
    box-shadow: 0 6px 24px rgba(15,15,15,.07);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .dgx-nav {
        background: rgba(255,255,255,.5);
        /* It is the blur, not the alpha, that stops whatever scrolls under
           the bar competing with the nav text, so the blur goes up as the
           panel gets more transparent. */
        -webkit-backdrop-filter: blur(30px) saturate(180%);
                backdrop-filter: blur(30px) saturate(180%);
        border: 1px solid rgba(255,255,255,.6);
    }
    /* At 50% the bar renders ~#808080 where a black section scrolls under
       it. The old #1a1a1f link colour is 4.39:1 there, just under AA, so
       links inside the frosted bar go pure black at 5.32:1. */
    .dgx-nav .dgx-menu a { color: #000; }
}
.dgx-logo { display: inline-flex; align-items: center; }
.dgx-logo img { width: auto; height: 52px; }
.dgx-footer .dgx-logo img { height: 60px; }

/* Fluid, so the menu is what absorbs the pressure as the bar narrows. Both
   cap at the point where the whole bar (logo + menu + icons + two 198px
   buttons) still fits the 1320 the Figma navbar has to play with. */
.dgx-menu {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.6vw, 22px);
    margin: 0 auto;
    min-width: 0;
}
.dgx-menu a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 500;
    white-space: nowrap;
    transition: color .18s ease;
}
/* Highlighted items take the brand gradient rather than flat green. The
   background box is sized to the text by inline-flex, so each link gets the
   full green-to-lime sweep instead of one slice of a container-wide ramp. */
.dgx-menu a:hover,
.dgx-menu a:focus-visible,
.dgx-menu a:active,
.dgx-menu a[aria-current],
.dgx-menu .current-menu-item > a,
.dgx-menu .current_page_item > a,
.dgx-menu .current-menu-ancestor > a {
    background: var(--dgx-cta-text);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
/* Drivers points at /#drivers, so WordPress marks it aria-current on the
   home page exactly as it marks Home, and it was lighting up green there.
   Client wants it black until it is actually pressed, so it opts out of the
   hover and current-page highlights and keeps only :active. Keyed to the URL
   rather than a menu ID so it survives the menu being rebuilt. */
.dgx-menu a[href*="driver"]:hover,
.dgx-menu a[href*="driver"]:focus-visible,
.dgx-menu a[href*="driver"][aria-current],
.dgx-menu .current-menu-item > a[href*="driver"],
.dgx-menu .current_page_item > a[href*="driver"],
.dgx-menu .current-menu-ancestor > a[href*="driver"] {
    background: none;
    -webkit-background-clip: border-box;
            background-clip: border-box;
    color: var(--dg-ink);
}
/* Last, so pressing it still wins over the black override above. */
.dgx-menu a[href*="driver"]:active {
    background: var(--dgx-cta-text);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.dgx-menu .caret { display: none; }
/* Book Online exists in the menu only for the mobile burger panel, which
   reveals it. Hidden by default at every width; the selector has to name the
   li as well, because `.dgx-menu li { display: flex }` above outranks a
   single class and put it back in the desktop row. */
.dgx-menu li.dgx-menu__cta { display: none; }

/* Small social affordances in the nav, sized well under the CTA buttons so
   they read as secondary. Not in the Figma navbar, so they are the first
   thing dropped when the bar runs out of room. */
.dgx-navsocial { display: inline-flex; align-items: center; gap: 6px; }
.dgx-navsocial a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--dg-bg-soft);
    color: var(--dg-muted);
    transition: background .18s ease, color .18s ease;
}
.dgx-navsocial a:hover { background: var(--dgx-tint); color: var(--dg-green); }
.dgx-navsocial svg { width: 18px; height: 18px; }
.dgx-navtoggle { display: none; }


/* wp_nav_menu wraps every item in an <li>, and adds .sub-menu for children.
   The design is a flat row of links with a dropdown panel underneath. */
.dgx-menu li { position: relative; display: flex; align-items: center; }
/* The nav is flat (wp_nav_menu depth 1), so no caret and no panel. Both are
   kept as no-ops rather than deleted, in case sub-items come back. */
.dgx-menu .menu-item-has-children > a::after { content: none; }
.dgx-menu .sub-menu {
    position: absolute;
    top: 100%; left: 50%;
    display: none;
    flex-direction: column;
    min-width: 230px;
    padding: 12px 0;
    margin-top: 18px;
    background: var(--dg-white);
    border-radius: var(--dg-radius);
    box-shadow: var(--dg-shadow);
    transform: translateX(-50%);
    z-index: 5;
}
.dgx-menu .sub-menu { display: none !important; }
.dgx-menu .sub-menu li { display: block; }
.dgx-menu .sub-menu a { width: 100%; padding: 9px 22px; font-size: 16px; }
.dgx-nav { position: relative; }

/* Book Online carries an arrow disc and Contact Us does not, so left to
   their own content they come out different widths. Two grid columns at 1fr
   are forced equal and size to the wider of the two, so the browser does the
   measuring and the pair stays matched whatever the labels are changed to.
   The 12px here is the gap between the CTAs; the nav's own 28px is the gap
   between nav regions. */
.dgx-navcta {
    display: grid;
    grid-auto-flow: column;
    gap: 12px;
    /* Never let the nav's flex layout squeeze the pair: without this the
       columns compress under pressure, the two buttons come out unequal and
       the labels eventually break onto a second line. */
    flex: none;
}
/* The nav button is 198x60 in the Figma, not the hero's 246. Fixed width
   makes the pair equal by construction, and nowrap means a label can never
   wrap however tight the bar gets. */
.dgx-navcta .dgx-btn { width: 198px; padding: 0; white-space: nowrap; }


/* =========================================================================
   Page wash. Two 902x1250 blurred shapes, green on the left and lime on the
   right, both at 20% with a 100px layer blur. Figma "Blur Shape Left" x2.

   Rendered as a standalone backdrop rather than a wrapper, so header.php can
   emit it without having to wrap content it does not own.
   ========================================================================= */
.dgx-site { position: relative; }
/* The hero swoosh bleeds 124.7% wide, so the overflow has to be clipped
   somewhere. It goes on <main>, not on .dgx-site, because an ancestor with
   overflow set would stop the sticky navbar sticking. */
.dgx-wash {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 700px;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    /* Without this the blur shapes are cut dead straight at the box edge and
       the tint ends in a hard line across the page. Fade the last third out. */
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.dgx-wash--hero { height: 1600px; }
/* Inner heroes clip the shapes inside their own frame, so the wash ends
   squarely at the section boundary rather than fading out. */
.dgx-wash--inner,
.dgx-wash--contact {
    -webkit-mask-image: none;
            mask-image: none;
}
.dgx-wash--off     { display: none; }   /* the hero paints its own */
.dgx-wash--contact { height: 1201px; }
.dgx-wash::before,
.dgx-wash::after {
    content: "";
    position: absolute;
    top: 0;
    width: 62.6%;          /* 902 of 1440 */
    height: 1250px;
    border-radius: 999px;
    filter: blur(55px);
    opacity: .22;
}
/* Inner pages sit the two shapes close to the centre so they overlap; the
   homepage pushes them out to the edges. Same size, colour and 20% opacity. */
.dgx-wash::before { left: -11.1%; background: #349d40; }
.dgx-wash::after  { left:  48.5%; background: #c3cf1b; }
.dgx-wash--hero::before { left: -29.9%; }
.dgx-wash--hero::after  { left:  54.0%; }
/* The navbar has to out-rank the page content or its dropdown panels paint
   underneath the hero, which shares the same stacking context. */
.dgx-main    { position: relative; z-index: 1; overflow-x: clip; }
.dgx-navwrap { z-index: 50; }

/* =========================================================================
   Hero
   ========================================================================= */
.dgx-hero { padding: 150px 0 0; text-align: center; }

/* The call strip: black pill, number, black pill. */
.dgx-callpill {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding: 6px;
    margin-bottom: 12px;
    background: var(--dg-white);
    border-radius: var(--dgx-radius-pill);
    box-shadow: var(--dg-shadow-sm);
    font-size: 20px;
    font-weight: 500;
}
.dgx-callpill b {
    padding: 5px 10px;
    border-radius: var(--dgx-radius-pill);
    background: var(--dg-ink);
    color: #fff;
    font-weight: 600;
}
.dgx-callpill span { color: var(--dg-ink); }
.dgx-callpill { transition: transform .18s ease, box-shadow .18s ease; }
.dgx-callpill:hover { transform: translateY(-2px); box-shadow: var(--dg-shadow); }

.dgx-hero h1 { max-width: 800px; margin: 0 auto; font-size: 64px; line-height: 76px; font-weight: 700; }
.dgx-hero__lead { max-width: none; margin: 24px auto 32px; font-size: 20px; line-height: 30px; }
.dgx-hero__cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* The swoosh group is 1646x506 starting 6px below the buttons, bleeding
   103px past each edge of the 1440 frame. The feature image is 906x906 and
   sits 119px left of centre, exactly as drawn. */
/* The Figma hero frame is 1460 tall and the 906px image starts at y=658, so
   its bottom 104px, the wrist, is clipped by the section edge. The clip sits
   on an inner element so the swoosh above can still bleed past the container. */
/* Capped at the Figma's 1320 container. The sections stay fluid, but the art
   has an intrinsic size: without a cap the swoosh (124.7%) keeps growing on a
   wide monitor while the phone stops at its 906px max, and they drift apart. */
.dgx-hero__art-wrap {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin: 6px auto 0;
}
.dgx-hero__art-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    /* Full-bleed to the viewport edges, but never taller than the art block,
       so the lines cannot run past the bottom of the hero. The background is
       stretched to the element's width and clipped by its height. */
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    background: url(assets/img/hero-swoosh.svg) center top / 100% auto no-repeat;
    pointer-events: none;
}
.dgx-hero__art-clip {
    /* Sized from the image, not the container. The image is a 906x906 square
       and the frame edge cuts it at 802px, so the visible box is 906:802 no
       matter how wide the viewport gets. */
    width: 68.6%;                   /* 906 of 1320 */
    max-width: 906px;
    margin: 1.06% auto 0;           /* 14px at a 1320 container */
    aspect-ratio: 906 / 802;
    overflow: hidden;
    /* 119px left of centre, against the element's own 906px width. */
    transform: translateX(-13.1%);
}
.dgx-hero__art { width: 100%; }

/* =========================================================================
   Trust band + accreditation logos
   ========================================================================= */
.dgx-trust { padding: 80px 0 96px; text-align: center; }
.dgx-trust h2 { font-size: 48px; font-weight: 800; margin-bottom: 44px; }
.dgx-trust__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 56px;
}
.dgx-trust__stats b { display: block; font-size: 28px; font-weight: 800; color: var(--dg-ink); }
.dgx-trust__stats span { font-size: 16px; }

/* Two rows, accreditations then clients, rather than one long row. Split
   into two lists so each centres on its own count instead of relying on
   where the wrap happens to fall. */
.dgx-trust__logos { display: flex; flex-direction: column; gap: 20px; }
.dgx-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
/* Figma tile is 210.2 x 176.3 on a 20px gap with a 32px radius, holding a
   167px square logo. We were rendering 168 x 104, which is why these read
   small against the design. */
.dgx-logos li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 210px;
    height: 176px;
    padding: 5px;
    background: var(--dg-white);
    border-radius: 32px;
    box-shadow: var(--dg-shadow-card);
}
.dgx-logos img { max-width: 167px; max-height: 167px; width: auto; height: auto; object-fit: contain; }

/* =========================================================================
   How it works. Feature list left, quote form right.
   ========================================================================= */
/* stretch, not start: the quote widget on the right finishes level with the
   feature cards on the left rather than stopping 40px short of them. */
.dgx-hiw { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
.dgx-featlist { display: flex; flex-direction: column; gap: 14px; }
.dgx-feat {
    display: flex;
    gap: 18px;
    padding: 22px 24px;
    background: var(--dg-white);
    border-radius: var(--dg-radius-lg);
    box-shadow: var(--dg-shadow-card);
}
/* Figma: 56x56 at r16, #f9fafb ground, glyph stroked #349d40. */
.dgx-feat__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--dg-bg-soft);
    color: var(--dg-green);
}
.dgx-feat__icon svg { width: 24px; height: 24px; }
.dgx-feat h3 { font-size: 24px; font-weight: 700; margin-bottom: 5px; }
.dgx-feat p { font-size: 16px; }

/* Quote panel */
.dgx-quote {
    padding: 32px;
    background: var(--dgx-tint);
    border-radius: var(--dg-radius-lg);
}
.dgx-quote h3 {
    margin-bottom: 22px;
    font-size: 30px;
    font-weight: 700;
    color: var(--dg-green);
    text-align: center;
    letter-spacing: -.02em;
}
.dgx-quote label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--dg-ink);
}
.dgx-quote__row { margin-bottom: 16px; }
.dgx-quote__labelrow { display: flex; align-items: center; justify-content: space-between; }
.dgx-via {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dg-ink);
}
.dgx-via i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--dg-green);
    color: #fff;
    font-style: normal;
    font-size: 13px;
}
.dgx-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    background: var(--dg-white);
    border-radius: var(--dgx-radius-pill);
}
.dgx-input svg { flex: none; width: 17px; height: 17px; color: var(--dg-green); }
.dgx-input select,
.dgx-input input {
    width: 100%;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--dg-muted);
    appearance: none;
}
.dgx-input select:focus,
.dgx-input input:focus { outline: 0; }
.dgx-input--date { border-radius: var(--dg-radius); }

.dgx-quote__when { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-bottom: 22px; }
.dgx-quote__time { display: flex; align-items: center; gap: 8px; }
.dgx-spin {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    background: var(--dg-white);
    border-radius: var(--dg-radius);
    font-weight: 600;
    color: var(--dg-ink);
}
.dgx-ampm { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: var(--dg-ink); }
.dgx-ampm label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; }
.dgx-ampm input { accent-color: var(--dg-green); }

/* =========================================================================
   Mobile app. A 624x624 dashed circle with the 334x670 phone centred over
   it, and two 300px callout columns either side. Figma "Image container".
   ========================================================================= */
.dgx-app { text-align: center; }
.dgx-app__cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 42px; }
/* Same fixed 246x60 as the hero pair, so Book Online and Download the App
   are one size wherever they appear. */
.dgx-app__cta .dgx-btn { width: 246px; padding: 0; }

/* Measured off the Figma: 247px text column, 3px gap, 624px circle, 3px,
   247px = 1124 total. The columns sit flush against the ring, which is why
   they read as one object rather than three floating pieces. */
.dgx-appring {
    display: grid;
    grid-template-columns: 22% 55.5% 22%;   /* 247 / 624 / 247 of 1124 */
    gap: 0.27%;
    align-items: start;
    justify-content: center;
    max-width: 1124px;
    margin: 0 auto;
}
.dgx-appring__col { display: flex; flex-direction: column; gap: 400px; padding-top: 16px; }
.dgx-appring__col--l,
.dgx-appring__col--r { text-align: left; }

.dgx-appring__point h4 {
    display: block;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}
.dgx-appring__point p { font-size: 20px; font-weight: 400; line-height: 28px; }

/* Outside the ring on the four diagonals, level with each heading. */
.dgx-appring__dot {
    position: absolute;
    width: 29px; height: 29px;
    margin: -14.5px 0 0 -14.5px;
    border-radius: 50%;
    border: 1.5px solid var(--dgx-lime);
    background: var(--dg-white);
}

.dgx-appring__stage { position: relative; }
.dgx-appring__circle {
    position: absolute;
    top: 5.5%;                      /* the phone starts 37px above the ring */
    left: 0; right: 0;
    aspect-ratio: 1;
    margin: 0;
    border-radius: 50%;
    border: 1px dashed var(--dg-line);
}
.dgx-appring__phone { position: relative; width: 53.5%; margin: 0 auto; }

/* =========================================================================
   Our Fleet. Four 650x681 cards, two up, each a pale panel inside a white
   card with two ring meters and a black Book now pill.
   ========================================================================= */
/* Four vehicles since Electric and Wheelchair Accessible folded into the
   Standard and MPV cards. Three across would leave one stranded on its own
   row, so it is two by two. */
.dgx-fleetgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.dgx-veh { display: flex; }                       /* stretch to the row height */
.dgx-veh {
    padding: 20px;
    background: var(--dg-white);
    border-radius: var(--dg-radius-lg);
    box-shadow: var(--dg-shadow-card);
}
.dgx-veh__panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 34px 24px 24px;
    background: var(--dgx-tint);
    border-radius: var(--dg-radius-lg);
    text-align: center;
}
.dgx-veh__panel .dgx-btn { margin-top: auto; }    /* pin to the card foot */
/* Every car gets the same 546x287 box the Figma uses, and scales to fit
   inside it. Without this the four source images, which have different
   aspect ratios, each set their own height and the row goes ragged. */
.dgx-veh__panel picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92%;
    aspect-ratio: 546 / 287;
    margin: 0 auto 22px;
}
.dgx-veh__panel picture img { width: 100%; height: 100%; object-fit: contain; }
.dgx-veh h3 { font-size: 32px; font-weight: 700; margin-bottom: 22px; }

.dgx-veh__specs { display: flex; justify-content: center; gap: 56px; margin-bottom: 26px; }
.dgx-veh__spec { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dgx-veh__spec span { font-size: 20px; font-weight: 500; color: var(--dg-ink); }
.dgx-veh__ring { position: relative; width: 76px; height: 76px; }
.dgx-veh__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dgx-veh__ring .track { fill: none; stroke: var(--dg-line); stroke-width: 4; }
.dgx-veh__ring .arc   { fill: none; stroke-width: 4; stroke-linecap: round; }
.dgx-veh__ring--pax .arc { stroke: var(--dgx-lime); }
.dgx-veh__ring--bag .arc { stroke: var(--dg-green); }
.dgx-veh__ring i {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--dgx-navy);
}
.dgx-veh__ring svg.icon { width: 30px; height: 30px; transform: none; }

/* =========================================================================
   Services grid
   ========================================================================= */
.dgx-svcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dgx-svc {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--dg-white);
    border-radius: var(--dg-radius-lg);
    box-shadow: var(--dg-shadow-card);
    transition: transform .2s ease, box-shadow .2s ease;
}
.dgx-svc:hover { transform: translateY(-4px); box-shadow: var(--dg-shadow); }
.dgx-svc img { border-radius: var(--dg-radius); aspect-ratio: 16 / 11; object-fit: cover; width: 100%; }
.dgx-svc h3 { margin: 20px 0 8px; font-size: 24px; font-weight: 700; }
.dgx-svc p { font-size: 16px; padding-bottom: 6px; }

/* The last row centres its two cards, as drawn. */
/* The last row is two cards, centred, at the SAME width as a card in the
   three-column row above. In the Figma every service image is 387x312. */
.dgx-svcgrid--tail {
    grid-template-columns: repeat(2, calc((100% - 48px) / 3));
    justify-content: center;
    margin-top: 24px;
}

/* =========================================================================
   Reviews
   ========================================================================= */
.dgx-reviews { padding: 40px; background: var(--dgx-tint); border-radius: var(--dg-radius-lg); }
.dgx-revgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dgx-rev {
    padding: 24px;
    background: var(--dg-white);
    border-radius: var(--dg-radius-lg);
    box-shadow: var(--dg-shadow-card);
}
.dgx-rev__who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dgx-rev__who picture { flex: none; }
.dgx-rev__who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.dgx-rev__initials {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--dgx-tint);
    color: var(--dg-green);
    font-size: 15px;
    font-weight: 700;
}
.dgx-rev__name { font-size: 16px; font-weight: 600; color: var(--dg-green); }
.dgx-rev__role { font-size: 16px; }
.dgx-rev p { font-size: 20px; }

/* =========================================================================
   Join the fleet
   ========================================================================= */
.dgx-fleet {
    position: relative;
    padding: 90px 0;
    background:
        linear-gradient(90deg, #000100 0%, #000100 52%, rgba(0,1,0,.92) 100%),
        var(--dg-ink);
    color: rgba(255,255,255,.78);
    overflow: hidden;
}
/* Faint grid, as in the Figma right-hand panel. */
.dgx-fleet::after {
    content: "";
    position: absolute;
    inset: 0 0 0 52%;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 84px 84px;
    pointer-events: none;
}
/* 50px between the text and the image, per the client. Figma sets the two
   halves 160px apart, so this is deliberately tighter than the design.
   align-items: stretch (not center) is what lets the left column match the
   image height, which is what puts the buttons on the image's bottom edge. */
.dgx-fleet__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: stretch;
}
/* Copy, ticks and buttons are one column: the first three sit together at
   the top and the buttons are pushed to the bottom by the auto margin on
   the ticks, exactly as the Figma stacks them. */
.dgx-fleet__grid > div:first-child { display: flex; flex-direction: column; align-items: flex-start; }
/* The text column sets the row height and the photo fills whatever that
   comes to, so its bottom edge lands on the buttons. The picture is taken
   out of flow: left in flow it is the taller item, so it would set the row
   height itself and hang below the buttons. cover rather than contain, so it
   fills the panel and trims the frame instead of letterboxing. */
.dgx-fleet__grid > div:last-child { position: relative; min-height: 320px; }
.dgx-fleet__grid > div:last-child picture {
    position: absolute;
    inset: 0;
    display: block;
}
.dgx-fleet__grid > div:last-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--dg-radius-lg);
}
.dgx-fleet h2 { font-size: 48px; font-weight: 800; color: #fff; margin-bottom: 18px; }
.dgx-fleet .dgx-eyebrow { text-align: left; color: var(--dgx-lime); }
/* The ticks stay with the copy: 32px below it and 32px between items, both
   measured off the Figma. The auto bottom margin then takes every remaining
   pixel of the column, which is what drops the buttons to the bottom while
   the text above them stays put. The 100px is the floor for when the column
   is short enough that there is no slack to give away. */
.dgx-fleet__ticks {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    /* Fixed rather than auto: the gap to the buttons is the specified 100px,
       and the image below shrinks to the height that produces, instead of the
       image dictating the gap. */
    margin: 32px 0 0;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}
/* 12px in the Figma, measured from the tick's visual edge; the icon box has
   ~2px of its own trailing whitespace, so 10px here lands on 12. */
.dgx-fleet__ticks li { display: flex; align-items: center; gap: 10px; }
/* check-check at its natural scale: the paths span 20x11.5 of the 24 box, so
   a 24px box renders the 21x12 tick the Figma measures. White to match the
   design; swap the colour line back to var(--dgx-lime) to undo. */
.dgx-fleet__ticks svg { width: 24px; height: 24px; flex: none; color: #fff; }
.dgx-fleet__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(48px, 8vw, 100px); }

/* =========================================================================
   FAQ
   ========================================================================= */
.dgx-faq__list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.dgx-acc {
    background: var(--dg-white);
    border-radius: var(--dg-radius-lg);
    box-shadow: var(--dg-shadow-card);
    overflow: hidden;
}
.dgx-acc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 28px;
    font-size: 24px;
    font-weight: 700;
    color: var(--dg-ink);
    cursor: pointer;
    list-style: none;
}
.dgx-acc summary::-webkit-details-marker { display: none; }
.dgx-acc summary::after {
    content: "";
    flex: none;
    width: 10px; height: 10px;
    border-right: 2px solid var(--dg-ink);
    border-bottom: 2px solid var(--dg-ink);
    transform: rotate(-135deg);
    transition: transform .2s ease;
}
.dgx-acc[open] summary::after { transform: rotate(45deg); }
.dgx-acc__body { padding: 0 28px 24px; max-width: 62ch; }

/* =========================================================================
   Contact
   ========================================================================= */
.dgx-contact { padding: 56px 0 96px; }
/* Both cards run to the same height and the map takes whatever is left in
   the right one, as the Figma draws it. */
.dgx-contact__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: stretch; }
.dgx-contact__grid > .dgx-card { display: flex; flex-direction: column; }
.dgx-card {
    background: var(--dg-white);
    border-radius: var(--dg-radius-lg);
    padding: 32px;
    box-shadow: 0 8px 40px rgba(15,15,15,.07);
}
.dgx-contact__title { font-size: 54px; font-weight: 800; color: var(--dg-green); margin-bottom: 14px; }
.dgx-contact__intro { max-width: 46ch; margin-bottom: 30px; }
.dgx-field { margin-bottom: 20px; }
.dgx-field label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--dg-ink); }
.dgx-field input,
.dgx-field textarea {
    width: 100%;
    padding: 15px 20px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--dg-ink);
    background: var(--dg-white);
    border: 1px solid var(--dg-green);
    border-radius: var(--dgx-radius-pill);
    transition: box-shadow .18s ease;
}
.dgx-field textarea { border-radius: var(--dg-radius-lg); resize: vertical; min-height: 150px; }
.dgx-field input:focus,
.dgx-field textarea:focus { outline: 0; box-shadow: 0 0 0 3px rgba(52,157,64,.18); }
.dgx-urgent { font-size: 17px; font-weight: 700; color: var(--dg-ink); line-height: 1.45; margin-bottom: 22px; }
.dgx-map {
    /* flex:1 lets the map take the card's spare height, which keeps the
       feedback copy and Support button pinned to the bottom of the card. */
    flex: 1;
    margin: 22px 0;
    border: 0;
    width: 100%;
    min-height: 430px;
    border-radius: var(--dg-radius);
}

/* =========================================================================
   Footer
   ========================================================================= */
.dgx-footer {
    padding: 70px 0 30px;
    background:
        radial-gradient(760px 420px at 8% 0%, rgba(195,207,27,.30), transparent 62%),
        radial-gradient(760px 460px at 92% 8%, rgba(52,157,64,.22), transparent 62%),
        var(--dgx-tint);
}
.dgx-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.dgx-footer__blurb { max-width: 42ch; margin: 14px 0 22px; font-size: 16px; }
.dgx-footer__subhead { display: block; margin-bottom: 12px; font-size: 15px; font-weight: 600; color: var(--dg-green); }
.dgx-footer input[type="email"] {
    width: 100%;
    max-width: 380px;
    padding: 14px 20px;
    margin-bottom: 12px;
    font-family: inherit;
    font-size: 15px;
    background: var(--dg-white);
    border: 0;
    border-radius: var(--dgx-radius-pill);
}
.dgx-footer input[type="email"]:focus { outline: 0; box-shadow: 0 0 0 3px rgba(52,157,64,.18); }
.dgx-footer .dgx-btn { max-width: 380px; }
.dgx-footer h4 { margin-bottom: 14px; font-size: 16px; font-weight: 700; color: var(--dg-green); }
.dgx-footer ul:not(.dgx-social) { display: flex; flex-direction: column; gap: 9px; }
.dgx-footer ul:not(.dgx-social) a { font-size: 16px; }
.dgx-footer ul:not(.dgx-social) a:hover { color: var(--dg-green); }
.dgx-footer .dgx-social {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}
.dgx-social li { display: flex; }
.dgx-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--dg-radius);
    background: var(--dgx-cta);
    color: #fff;
}
.dgx-social a:hover { filter: brightness(1.08); }
.dgx-social svg { width: 18px; height: 18px; fill: currentColor; }
.dgx-social i { font-size: 17px; line-height: 1; }   /* Font Awesome, from the parent */
.dgx-footer__legal {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid rgba(52,157,64,.22);
    text-align: center;
    font-size: 14px;
}

/* =========================================================================
   Responsive
   ========================================================================= */
/* The icons only fit at the full 1440. Below that they go first, before the
   menu is squeezed or the buttons are touched. */
@media (max-width: 1400px) {
    .dgx-navsocial { display: none; }
}

@media (max-width: 1080px) {
    .dgx-hero h1 { font-size: 56px; }
    .dgx-hiw { grid-template-columns: 1fr; }
    .dgx-svcgrid { grid-template-columns: repeat(2, 1fr); }
    .dgx-revgrid { grid-template-columns: repeat(2, 1fr); }
    /* No ring to sit on, so the four discs on it go. The board still shows a
       marker against each point though, so each one draws its own to the
       left of the heading with the copy aligned under the heading, not under
       the circle. */
    .dgx-appring { grid-template-columns: 1fr; gap: 28px; }
    .dgx-appring__stage { order: -1; min-height: 0; }
    .dgx-appring__circle { display: none; }
    .dgx-appring__dot { display: none; }
    .dgx-appring__point {
        display: grid;
        grid-template-columns: 29px 1fr;
        column-gap: 14px;
        align-items: start;
    }
    .dgx-appring__point::before {
        content: "";
        grid-row: 1;
        width: 29px; height: 29px;
        margin-top: 1px;
        border: 1.5px solid var(--dgx-lime);
        border-radius: 50%;
        background: var(--dg-white);
    }
    .dgx-appring__point h4,
    .dgx-appring__point p { grid-column: 2; }
    .dgx-appring__col { flex-direction: column; gap: 26px; }
    .dgx-appring__col--l, .dgx-appring__col--r { text-align: left; }
    .dgx-appring__col--l h4, .dgx-appring__col--r h4 { justify-content: flex-start; }
    .dgx-fleetgrid { grid-template-columns: 1fr; }
}
/* Even fully scaled down, six items plus two buttons stop fitting around
   1150, so the burger arrives here rather than at 960. The bar keeps its
   desktop proportions down to 960; only the menu changes. */
@media (max-width: 1180px) {
    .dgx-menu { display: none; }
    /* .dgx-menu carries margin:0 auto on desktop, which is what separates the
       logo from the buttons. Hidden here, so the buttons do the pushing. */
    .dgx-navcta { margin-left: auto; }

    .dgx-menu.is-open {
        position: absolute;
        top: calc(100% + 10px);
        left: 0; right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px;
        background: var(--dg-white);
        border-radius: var(--dg-radius-lg);
        box-shadow: var(--dg-shadow);
        /* A long menu has to be reachable, not clipped off the pill. */
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .dgx-menu.is-open li { display: block; }
    .dgx-menu.is-open > li > a { padding: 12px 16px; }
    .dgx-menu.is-open .sub-menu {
        position: static;
        display: flex;
        margin: 0 0 6px 14px;
        padding: 0;
        box-shadow: none;
        transform: none;
    }
    /* A bare glyph, as drawn, not a disc. The box stays 44px so the tap
       target clears the accessibility minimum while the mark reads as 24. */
    .dgx-navtoggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 8px;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--dg-ink);
        font: inherit;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }

    /* Book Online joins the links inside the panel. The item is emitted by a
       wp_nav_menu filter; the rule hiding it everywhere else has to sit
       outside this block, or it reappears as a seventh desktop nav link. */
    .dgx-menu.is-open li.dgx-menu__cta { display: block; margin-top: 8px; }
    .dgx-menu.is-open .dgx-menu__cta a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 56px;
        padding: 0 24px;
        background: var(--dgx-cta);
        border-radius: var(--dgx-radius-pill);
        font-weight: 600;
        color: #f9fafb;
    }
}

@media (max-width: 960px) {
    /* The mobile board keeps the bar at its full desktop proportions: a 92px
       pill on 16px/32px padding, a 60px logo and a 188x60 button. Only the
       contents change, not the scale.

       Contact us is the one button in the bar. Book Online moves into the
       burger panel with the nav links, which is the reverse of what this
       theme did before. */
    /* The board is drawn at 490. Holding its pixel values on a 375 phone
       overflows the bar, and the logo was the flex item that gave: it was
       squashed to 33x52 against a natural 1.164 aspect. Everything here
       scales with the viewport and caps at the drawn value, so 490 matches
       the design and narrower screens shrink in proportion instead of
       distorting. */
    .dgx-navwrap { padding: min(4.9vw, 24px) 0 0; }
    .dgx-nav {
        gap: 12px;
        min-height: 0;
        padding: min(3vw, 15px) min(6.5vw, 32px);
    }
    /* Never let the bar take its width out of the logo. */
    .dgx-logo { flex: none; }
    .dgx-logo img {
        flex: none;
        width: auto;
        height: clamp(38px, 10.6vw, 52px);
        object-fit: contain;
    }
    .dgx-navcta > .dgx-btn--grad { display: none; }
    .dgx-navcta > .dgx-btn--dark {
        display: inline-flex;
        width: min(38.4vw, 188px);
        min-height: clamp(48px, 12.2vw, 60px);
    }

    .dgx-contact__grid { grid-template-columns: 1fr; }
    .dgx-fleet__grid { grid-template-columns: 1fr; }
    /* One column: nothing to match heights with, so the photo comes back into
       flow and keeps its own proportions. */
    .dgx-fleet__grid > div:last-child { position: static; min-height: 0; }
    .dgx-fleet__grid > div:last-child picture { position: static; }
    .dgx-fleet__grid > div:last-child img { height: auto; }
    .dgx-fleet::after { inset: 0 0 0 100%; }
    .dgx-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .dgx-callpill {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 5px;
        font-size: 14px;
    }
    .dgx-callpill b { padding: 4px 10px; }
    /* The flat font sizes that used to sit here are gone: they predate the
       two-anchor scale and were overriding it. */
    /* Board: the three stats stack 50px apart, each one 24px between its
       number and its caption, at 32/700 over 18/500. We were running 22 and
       16 on a 28px gap, which is why the block read as an afterthought. */
    .dgx-trust__stats { grid-template-columns: 1fr; gap: 50px; }
    .dgx-trust__stats > * { display: flex; flex-direction: column; gap: 24px; }
    .dgx-trust__stats b { font-size: 32px; line-height: 28px; }
    .dgx-trust__stats span { font-size: 18px; line-height: 30px; }
    .dgx-svcgrid, .dgx-svcgrid--tail, .dgx-revgrid { grid-template-columns: 1fr; }
    /* Mobile cards are 32px top and bottom, 16px in. */
    .dgx-card { padding: 32px 16px; }
    .dgx-contact__grid { gap: 20px; }
    .dgx-reviews { padding: 20px; }
    .dgx-appring__col { flex-direction: column; gap: 28px; }
    .dgx-appring__phone { width: 100%; max-width: 300px; }
    .dgx-veh h3 { font-size: 24px; }
    .dgx-veh__specs { gap: 32px; }
}
/* The footer stays two columns on a phone, as drawn, rather than collapsing
   to one. Below this the column labels start breaking, so it does. */
@media (max-width: 420px) {
    .dgx-footer__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Services wheel

   A 774px dashed ring with eight 91px spokes sitting on its circumference at
   the angles taken from the Figma, and a 610px centre panel that swaps as you
   move between them. Percentages are of the ring, so the whole thing scales.
   ========================================================================= */
/* Figma: two 246x60 buttons, 12px apart, 50px above the wheel. */
/* Figma: 50px from the bottom of the buttons to the TOP OF THE CAR ICON.
   The top spoke hangs half its own height (45px) above the ring, so the
   space below the buttons has to be 50 + 45 = 95 for the icon to land at 50.
   It is one margin, not two: a 50px margin here plus a 45px margin on the
   wheel would collapse to 50 and change nothing, which is what happened. */
.dgx-wheel__cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 32px 0 95px; }
.dgx-wheel__cta .dgx-btn { width: 246px; padding: 0; }

.dgx-wheel {
    position: relative;
    width: min(774px, 78vw);
    aspect-ratio: 1;
    margin: 0 auto 60px;
}
.dgx-wheel__ring {
    position: absolute;
    inset: 0;
    border: 1px dashed var(--dg-line);
    border-radius: 50%;
}

.dgx-wheel__spoke {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 11.76%;                  /* 91 of 774 */
    aspect-ratio: 1;
    padding: 0;
    background: #f7f8f6;
    border: 2px solid transparent;
    border-radius: 50%;
    /* A gradient ring: the border is painted from the gradient, the fill from
       the flat colour, both drawn into the same box. */
    background-image: linear-gradient(#f7f8f6, #f7f8f6), var(--dgx-cta);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: var(--dg-ink);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: background .2s ease, color .2s ease, border-color .2s ease, scale .2s ease;
}
.dgx-wheel__spoke:hover,
.dgx-wheel__spoke:focus-visible { scale: 1.08; }
.dgx-wheel__spoke.is-active {
    background-image: linear-gradient(180deg, #c3cf1b 0%, #349d40 100%),
                      linear-gradient(180deg, #c3cf1b 0%, #349d40 100%);
    color: #fff;
    scale: 1.08;
}
/* Size comes from the inline style: Figma draws each glyph at its own
   scale inside the 91px spoke, from 41px (plane) to 52px (car). */
.dgx-wheel__icon { flex: none; }

.dgx-wheel__centre {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78.8%;                   /* 610 of 774 */
    transform: translate(-50%, -50%);
    text-align: center;
}
.dgx-wheel__panel {
    display: none;
    animation: dgx-fade .25s ease both;
}
.dgx-wheel__panel.is-active { display: block; }
@keyframes dgx-fade { from { opacity: 0; transform: translateY(6px); } }

.dgx-wheel__panel h3 { font-size: 48px; font-weight: 700; margin-bottom: 16px; }
.dgx-wheel__panel p  { max-width: 52ch; margin: 0 auto 18px; }
.dgx-wheel__points { display: flex; flex-direction: column; gap: 8px; }
.dgx-wheel__points li {
    display: flex;
    align-items: center;      /* the tick centres on the block, not line one */
    gap: 12px;
    justify-content: center;
    font-size: 16px;
}
/* Figma uses Lucide's check-check, a double tick, not a chevron. The drawn
   glyph is 21 x 11.87, so a 21px square box with contain lands on it. */
.dgx-wheel__points li::before {
    content: "";
    flex: none;
    width: 21px; height: 21px;
    background: currentColor;
    color: var(--dg-ink);
    -webkit-mask: var(--dgx-tick) center / contain no-repeat;
            mask: var(--dgx-tick) center / contain no-repeat;
}

/* Inner-page hero, measured off the Figma: the eyebrow is a pill on
   #f9fafb, not green text, and the block sits 255px below the navbar. */
/* The wash lives on the hero itself and is pulled up behind the navbar, so
   the tint is always exactly as tall as the hero however the copy wraps. A
   fixed-height backdrop left a white band whenever the two disagreed. */
.dgx-hero--inner {
    position: relative;
    margin-top: -116px;
    padding: 371px 0 255px;
    overflow: hidden;
}
.dgx-hero--inner::before,
.dgx-hero--inner::after {
    content: "";
    position: absolute;
    top: 0;
    width: 62.6%;
    height: 1250px;
    border-radius: 999px;
    filter: blur(55px);
    opacity: .22;
    z-index: 0;
}
.dgx-hero--inner::before { left: -11.1%; background: #349d40; }
.dgx-hero--inner::after  { left:  48.5%; background: #c3cf1b; }
.dgx-hero--inner > * { position: relative; z-index: 1; }
.dgx-hero--inner h1 { max-width: 1000px; margin: 0 auto; font-size: 64px; line-height: 76px; }
/* Figma h1 boxes: Services 800, About 900, Business 974. All two lines. */
.dgx-hero--inner .dgx-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 12px 20px;
    background: var(--dg-bg-soft);
    /* reset the gradient-text clipping from the base rule, or the pill's own
       background gets clipped to the glyphs and disappears */
    -webkit-background-clip: border-box;
            background-clip: border-box;
    border: 1px solid rgba(15,15,15,.10);
    border-radius: var(--dgx-radius-pill);
    font-size: 20px;
    font-weight: 500;
    /* 15px text box + 2x12 padding = the 39px pill in the Figma */
    line-height: 15px;
    color: var(--dg-muted);
}
.dgx-hero--inner .dgx-hero__lead {
    max-width: 880px;
    margin: 24px auto 0;
    font-size: 20px;
    line-height: 28px;
}

@media (max-width: 900px) {
    /* The ring cannot hold eight spokes plus a panel at this width, so the
       mobile board drops it and wraps the spokes into a centred grid above
       the panel: 60px circles on a 21px gap, which fits five to a row in
       the 458 content width (six would need 464) and gives the 2-row, 5+3
       shape the design draws. The panel then reads as one column beneath.

       Measured from the mobile frame: spoke 59.81, gap 20.98, block height
       140.6 (exactly two rows), wheel-to-panel 32. */
    .dgx-wheel {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: center;
        /* Scales with the spoke, so five always clear one row. */
        gap: min(4.28vw, 21px);
        width: 100%;
        aspect-ratio: auto;
        margin-bottom: 40px;
    }
    .dgx-wheel__ring { display: none; }
    .dgx-wheel__spoke {
        position: static;
        /* 59.81 of the 490 board = 12.2vw. Fixed at 60 the row only held
           five down to about 420 and then dropped to 4+4; scaling keeps
           services at 5+3 and business at a single row of 5 on any phone. */
        width: min(12.2vw, 60px);
        margin: 0;
        transform: none;
        /* The inline icon sizes are percentages of the spoke, and the design
           keeps the same ratios at both scales (car 57.1% desktop, 56.8%
           mobile), so the glyphs come along without touching them. */
    }
    .dgx-wheel__spoke:hover,
    .dgx-wheel__spoke:focus-visible { scale: 1; }
    .dgx-wheel__spoke.is-active { scale: 1; }
    .dgx-wheel__centre {
        position: static;
        width: 100%;
        flex-basis: 100%;
        transform: none;
        /* 21px of flex gap plus 11 makes the 32 the design sets. */
        margin-top: 11px;
    }
    .dgx-wheel__panel h3 { margin-bottom: 12px; }
    .dgx-wheel__panel p { font-size: var(--dgx-fs-body); line-height: 28px; margin-bottom: 24px; }
    .dgx-wheel__points { gap: 20px; }
    .dgx-wheel__points li { justify-content: flex-start; gap: 12px; text-align: left; }
    .dgx-hero--inner h1 { font-size: var(--dgx-fs-h1); }
}

/* =========================================================================
   Business page
   ========================================================================= */
/* Figma: a 900px block of 440x268 cards, two up with 20px gaps, and the
   fifth centred on its own row. */
.dgx-bizgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}
/* Six features fill three even rows, so the last card is no longer a
   centred half-width special case. grid-auto-rows keeps every row, not just
   every card in a row, to a single height. */
.dgx-bizgrid { grid-auto-rows: 1fr; }
.dgx-bizgrid__cta { margin-top: 40px; text-align: center; }
.dgx-bizfeat {
    padding: 20px;
    background: var(--dg-white);
    border-radius: 32px;
    box-shadow: var(--dg-shadow-card);
}
.dgx-bizfeat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    margin-bottom: 20px;
    border-radius: 16px;   /* 56x56 at r16, per the Figma Icon frame */
    background: var(--dgx-cta);
    color: #fff;
}
.dgx-bizfeat__icon svg { width: 26px; height: 26px; }
.dgx-bizfeat h3 { font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.dgx-bizfeat p  { font-size: 20px; font-weight: 400; }

/* How it works, on the near-black band */
.dgx-steps {
    position: relative;
    padding: 90px 0;
    background: var(--dg-ink);
    color: rgba(255,255,255,.78);
    overflow: hidden;
}
.dgx-steps::after {
    content: "";
    position: absolute;
    inset: 0 0 0 52%;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 84px 84px;
    pointer-events: none;
}
.dgx-steps__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dgx-steps h2 { font-size: 48px; font-weight: 800; color: #fff; margin-bottom: 32px; }
/* Figma: label 24/700 lime, copy 20/400 on 28, 12px between the two and
   32px between steps. No list marker and no indent, so the label and its
   copy share one left edge. Step 1/2/3 is the one piece of flat coloured
   text in the whole design; everything else coloured is gradient-filled. */
.dgx-steps__list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 32px;
    padding-left: 0;
    list-style: none;
}
/* Figma sets the copy measure at 610px, which is what makes steps 2 and 3
   break onto two lines instead of running the full column width. */
.dgx-steps__list li { padding-left: 0; max-width: 610px; }
.dgx-steps__list b {
    display: block;
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
    color: var(--dgx-lime);
}
.dgx-steps__list p { margin: 0; font-size: 20px; font-weight: 400; line-height: 28px; }

/* =========================================================================
   About page
   ========================================================================= */
.dgx-intro { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.dgx-intro h2 { font-size: 48px; font-weight: 800; margin-bottom: 20px; }
.dgx-intro p + p { margin-top: 16px; }
.dgx-intro__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dgx-intro__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--dg-radius); }

.dgx-valuegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; }
.dgx-valuegrid > :last-child { grid-column: 1 / -1; max-width: 440px; justify-self: center; }
/* All five are 440x240 in the Figma. Without a floor, "Always Improving"
   auto-sizes shorter than the rest because it carries less copy. */
.dgx-value {
    min-height: 240px;
    padding: 28px;
    background: var(--dg-white);
    border-radius: var(--dg-radius-lg);
    box-shadow: var(--dg-shadow-card);
}
.dgx-value__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--dgx-cta);
    color: #fff;
}
.dgx-value__icon svg { width: 24px; height: 24px; }
.dgx-value h3 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.dgx-value p  { font-size: 16px; }

.dgx-statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; }
.dgx-statcard {
    padding: 26px 30px;
    background: var(--dg-white);
    border-radius: var(--dg-radius-lg);
    box-shadow: var(--dg-shadow-card);
}
.dgx-statcard b { display: block; font-size: 32px; font-weight: 700; color: var(--dg-ink); }
.dgx-statcard span { font-size: 20px; }

@media (max-width: 900px) {
    .dgx-bizgrid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .dgx-steps__grid { grid-template-columns: 1fr; gap: 32px; }
    .dgx-steps::after { inset: 0 0 0 100%; }
    .dgx-steps h2 { font-size: 32px; }
    .dgx-intro { grid-template-columns: 1fr; gap: 32px; }
    .dgx-intro h2 { font-size: 32px; }
    .dgx-valuegrid, .dgx-statgrid { grid-template-columns: 1fr; }
    .dgx-valuegrid > :last-child { grid-column: auto; max-width: none; }
}

/* =========================================================================
   Parent form shortcode, restyled

   [dg_form type="contact"] emits the parent theme's .dg-form markup, which
   already handles the nonce, honeypot, validation and mail. Rather than
   rebuild any of that, the output is restyled to the 2026 design wherever it
   appears inside a .dgx-card.
   ========================================================================= */
.dgx-main .dg-form-row { margin-bottom: 20px; }
.dgx-main .dg-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--dg-ink);
}
.dgx-main .dg-form input[type="text"],
.dgx-main .dg-form input[type="email"],
.dgx-main .dg-form input[type="tel"],
.dgx-main .dg-form input[type="number"],
.dgx-main .dg-form input[type="date"],
.dgx-main .dg-form select,
.dgx-main .dg-form textarea {
    width: 100%;
    padding: 15px 20px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--dg-ink);
    background: var(--dg-white);
    border: 1px solid var(--dg-green);
    border-radius: var(--dgx-radius-pill);
    transition: box-shadow .18s ease;
}
.dgx-main .dg-form textarea { border-radius: var(--dg-radius-lg); resize: vertical; min-height: 150px; }
.dgx-main .dg-form :is(input, select, textarea):focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(52,157,64,.18);
}
.dgx-main .dg-form .dg-req { color: var(--dg-green); }
/* The right card's map takes its spare height, so Support sits on the card
   floor. Give the form the same treatment and Send Message lands level with
   it instead of stopping wherever the textarea ends. */
.dgx-contact__grid .dg-form-wrap,
.dgx-contact__grid .dg-form { display: flex; flex-direction: column; flex: 1; }
/* The parent theme ships .dg-form-wrap { margin: 20px 0 10px }. That trailing
   10px sits below the wrap, outside the flex fill, so Send Message stopped
   10px short of the card floor while Support sat flush on it. */
.dgx-contact__grid .dg-form-wrap { margin-bottom: 0; }
.dgx-main .dg-form-actions { margin-top: auto; padding-top: 26px; }
.dgx-main .dg-form button[type="submit"],
.dgx-main .dg-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60px;
    padding: 0 30px;
    border: 0;
    border-radius: var(--dgx-radius-pill);
    background: var(--dg-ink);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}
.dgx-main .dg-form button[type="submit"]:hover { transform: translateY(-2px); box-shadow: var(--dg-shadow-sm); }

/* The honeypot must stay in the DOM and out of sight. */
.dgx-main .dg-hp { position: absolute; left: -9999px; }

.dgx-main .dg-form-notice {
    padding: 16px 20px;
    margin-bottom: 22px;
    border-radius: var(--dg-radius);
    font-size: 16px;
}
.dgx-main .dg-form-error   { background: #fdecec; color: #8c1d1d; }
.dgx-main .dg-form-success { background: var(--dgx-tint); color: var(--dg-green-dark); }
.dgx-main .dg-form-notice ul { padding-left: 18px; list-style: disc; }

/* =========================================================================
   Hero entrance

   Transform and opacity only, so nothing reflows and there is no layout
   shift. Everything is in its final position from the first paint; the
   animation only affects how it gets there, which keeps CLS at zero and
   leaves the largest contentful paint untouched.
   ========================================================================= */
@keyframes dgx-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
/* The -13.1% offset lives on .dgx-hero__art-clip, not on the image. Repeating
   it here would shift the phone twice and crop it wrongly. */
@keyframes dgx-rise-art {
    from { opacity: 0; transform: translateY(34px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes dgx-draw {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

.dgx-hero .dgx-callpill,
.dgx-hero h1,
.dgx-hero__lead,
.dgx-hero__cta,
.dgx-hero .dgx-eyebrow {
    animation: dgx-rise .7s cubic-bezier(.22,.8,.28,1) both;
}
.dgx-hero .dgx-eyebrow  { animation-delay: .05s; }
.dgx-hero .dgx-callpill { animation-delay: .05s; }
.dgx-hero h1            { animation-delay: .16s; }
.dgx-hero__lead         { animation-delay: .27s; }
.dgx-hero__cta          { animation-delay: .38s; }

/* The swoosh is two stroked paths, so wiping it left to right reads as the
   line being drawn. */
.dgx-hero__art-wrap::before {
    animation: dgx-draw 1.4s cubic-bezier(.4,0,.2,1) .34s both;
}
.dgx-hero__art {
    animation: dgx-rise-art .9s cubic-bezier(.22,.8,.28,1) .5s both;
}

/* Anyone who has asked their OS for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
    .dgx-hero .dgx-callpill,
    .dgx-hero h1,
    .dgx-hero__lead,
    .dgx-hero__cta,
    .dgx-hero .dgx-eyebrow,
    .dgx-hero__art,
    .dgx-hero__art-wrap::before {
        animation: none;
    }
}

/* =========================================================================
   Article pages

   Careers, terms, privacy, complaints and the rest. Their content is already
   good plain HTML in the editor; this only wraps it in the 2026 header and a
   readable measure, so none of those pages need their content touched.
   ========================================================================= */
.dgx-pagehead { padding: 64px 0 40px; text-align: center; }
.dgx-pagehead h1 { font-size: 56px; font-weight: 700; }

.dgx-crumbs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 16px;
    color: var(--dg-faint);
}
.dgx-crumbs a:hover { color: var(--dg-green); }
.dgx-crumbs span[aria-hidden] { opacity: .5; }

.dgx-section--tight { padding: 24px 0 96px; }

.dgx-prose {
    max-width: 68ch;
    margin: 0 auto;
    font-size: 19px;
    line-height: 1.7;
}
.dgx-prose > * + * { margin-top: 1.1em; }
.dgx-prose h2 { margin-top: 2em; font-size: 32px; font-weight: 700; }
.dgx-prose h3 { margin-top: 1.6em; font-size: 24px; font-weight: 700; }
.dgx-prose h4 { margin-top: 1.4em; font-size: 20px; font-weight: 700; }
.dgx-prose h2 + *, .dgx-prose h3 + *, .dgx-prose h4 + * { margin-top: .6em; }
.dgx-prose a { color: var(--dg-green); text-decoration: underline; text-underline-offset: 3px; }
.dgx-prose a:hover { color: var(--dg-green-dark); }
.dgx-prose strong { color: var(--dg-ink); }

.dgx-prose ul, .dgx-prose ol { padding-left: 1.4em; }
.dgx-prose ul { list-style: disc; }
.dgx-prose ol { list-style: decimal; }
.dgx-prose li + li { margin-top: .45em; }
.dgx-prose li::marker { color: var(--dg-green); }

.dgx-prose img { border-radius: var(--dg-radius); margin: 1.6em 0; }
.dgx-prose figure { margin: 1.6em 0; }
.dgx-prose figcaption { margin-top: .6em; font-size: 16px; color: var(--dg-faint); text-align: center; }

.dgx-prose blockquote {
    margin: 1.6em 0;
    padding: 20px 28px;
    background: var(--dgx-tint);
    border-left: 4px solid var(--dg-green);
    border-radius: 0 var(--dg-radius) var(--dg-radius) 0;
}

/* Long policy tables have to be able to scroll rather than break the page. */
.dgx-prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 16px;
}
.dgx-prose th, .dgx-prose td {
    padding: 12px 16px;
    border: 1px solid var(--dg-line);
    text-align: left;
    vertical-align: top;
}
.dgx-prose th { background: var(--dg-bg-soft); color: var(--dg-ink); font-weight: 600; }

.dgx-prose hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--dg-line); }

@media (max-width: 720px) {
    .dgx-pagehead { padding: 40px 0 28px; }
    .dgx-pagehead h1 { font-size: 34px; }
    .dgx-prose { font-size: 18px; }
    .dgx-prose h2 { font-size: 26px; }
    .dgx-prose h3 { font-size: 21px; }
}

/* =========================================================================
   Compact trust block

   The homepage trust band, condensed to sit in the right column of the
   Business "How it Works" band. It lives on near-black there, so the logo
   tiles keep their white ground to stay legible, and the type inverts.
   ========================================================================= */
/* The band is a fluid two-column grid, so this column can get very wide on a
   large monitor. Left uncapped the tiles balloon and the row overflows. */
.dgx-trust--compact {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}
.dgx-trust--compact h3 {
    margin-bottom: 22px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}

.dgx-trust--compact__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 26px;
}
.dgx-trust--compact__stats b {
    display: block;
    margin-bottom: 4px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.dgx-trust--compact__stats span {
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255,255,255,.62);
}

/* Flex rather than grid: with five tiles the last row centres on its own and
   every tile keeps the same width, which a grid with nth-child margins did
   not manage. */
.dgx-trust--compact__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.dgx-trust--compact__logos li {
    flex: 0 0 calc((100% - 24px) / 3);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    padding: 14px 18px;
    background: var(--dg-white);
    border-radius: var(--dg-radius);
}
.dgx-trust--compact__logos img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }

@media (max-width: 900px) {
    .dgx-trust--compact h3 { font-size: 24px; }
    .dgx-trust--compact__stats { grid-template-columns: 1fr; gap: 12px; }
    .dgx-trust--compact__logos li { flex: 0 0 calc((100% - 12px) / 2); }
}

/* =========================================================================
   Account application form

   The form ships its own tokens in an inline <style> scoped to .dgaf-wrap.
   Overriding those rather than fighting each rule keeps the markup, the
   nonce, the honeypot and the admin-post handler completely untouched.
   The extra .dgx-main raises specificity above the inline block.
   ========================================================================= */
.dgx-main .dgaf-wrap {
    --dgaf-accent:    #349d40;
    --dgaf-panel:     #ffffff;
    --dgaf-label:     #000000;
    --dgaf-onaccent:  #ffffff;
    --dgaf-radius:    12px;

    max-width: 900px;
    margin: 0 auto 96px;
    padding: 48px;
    background: var(--dg-white);
    border-radius: var(--dg-radius-lg);
    box-shadow: 0 8px 40px rgba(15,15,15,.07);
    font-family: var(--dg-font);
    color: var(--dg-muted);
}

.dgx-main .dgaf-title {
    margin-bottom: 28px;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--dg-green);
}

.dgx-main .dgaf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.dgx-main .dgaf-field { grid-column: 1 / -1; }
.dgx-main .dgaf-half  { grid-column: span 1; }

.dgx-main .dgaf-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--dg-ink);
}
.dgx-main .dgaf-req { color: var(--dg-green); }

.dgx-main .dgaf-form :is(input[type="text"], input[type="email"], input[type="tel"],
                         input[type="number"], input[type="date"], input[type="url"], select) {
    width: 100%;
    padding: 15px 20px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--dg-ink);
    background: var(--dg-white);
    border: 1px solid var(--dg-green);
    border-radius: var(--dgx-radius-pill);
}
.dgx-main .dgaf-form textarea {
    width: 100%;
    min-height: 140px;
    padding: 15px 20px;
    font-family: inherit;
    font-size: 16px;
    color: var(--dg-ink);
    background: var(--dg-white);
    border: 1px solid var(--dg-green);
    border-radius: var(--dg-radius-lg);
    resize: vertical;
}
.dgx-main .dgaf-form :is(input, select, textarea):focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(52,157,64,.18);
}

.dgx-main .dgaf-radios { display: flex; flex-wrap: wrap; gap: 12px; }
.dgx-main .dgaf-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    background: var(--dg-bg-soft);
    border-radius: var(--dgx-radius-pill);
    font-size: 16px;
    font-weight: 500;
    color: var(--dg-ink);
    cursor: pointer;
}
.dgx-main .dgaf-radio input { accent-color: var(--dg-green); }

.dgx-main .dgaf-terms {
    grid-column: 1 / -1;
    padding: 20px 24px;
    background: var(--dgx-tint);
    border-radius: var(--dg-radius);
    font-size: 16px;
}
.dgx-main .dgaf-terms a { color: var(--dg-green); text-decoration: underline; text-underline-offset: 3px; }

.dgx-main .dgaf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60px;
    margin-top: 8px;
    padding: 0 30px;
    border: 0;
    border-radius: var(--dgx-radius-pill);
    background: var(--dgx-cta);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}
.dgx-main .dgaf-submit:hover { transform: translateY(-2px); box-shadow: var(--dg-shadow-sm); }

/* The honeypot must stay in the DOM and invisible. */
.dgx-main .dgaf-hp { position: absolute; left: -9999px; }

@media (max-width: 720px) {
    .dgx-main .dgaf-wrap { padding: 28px 22px; }
    .dgx-main .dgaf-title { font-size: 30px; }
    .dgx-main .dgaf-grid { grid-template-columns: 1fr; }
    .dgx-main .dgaf-half { grid-column: 1 / -1; }
}

/* =========================================================================
   Instagram feed (Smash Balloon)

   The plugin ships its own layout and styling. These rules override its
   output so the feed matches the nine-photo grid it replaces, rather than
   arriving as a visibly bolted-on widget. Scoped to .dgx-instafeed so the
   plugin is free to render normally anywhere else.
   ========================================================================= */
.dgx-instafeed #sb_instagram { padding: 0 !important; width: 100% !important; }
.dgx-instafeed .sb_instagram_header { display: none !important; }

/* Load More appends rows, which grew the page without limit. Capping the
   grid and scrolling inside it keeps the section a fixed size however many
   posts get loaded. The height is roughly three 4:5 rows plus their gaps. */
.dgx-instafeed #sbi_images {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    padding: 0 !important;
    max-height: 620px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
/* The plugin puts its own inline margins on these; one rule keeps the gap
   above the buttons equal to the gap between the feed rows. */
/* Smash Balloon nests the follow button inside #sbi_load. Giving both a top
   margin pushed the follow button below Load More, which is what made the
   pair look unaligned. The margin belongs on the outer row only. */
.dgx-instafeed #sbi_load {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 24px 0 0 !important;
    padding: 0 !important;
}
.dgx-instafeed .sbi_follow_btn {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
}
/* One height for both, whichever wrapper they arrive in. */
.dgx-instafeed #sbi_load .sbi_load_btn,
.dgx-instafeed .sbi_follow_btn a {
    height: 60px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.dgx-instafeed .sbi_item {
    width: 100% !important;
    padding: 0 !important;
}
.dgx-instafeed .sbi_photo_wrap,
.dgx-instafeed .sbi_photo {
    border-radius: var(--dg-radius) !important;
    overflow: hidden;
}
.dgx-instafeed .sbi_photo {
    /* Instagram's own profile grid went from 1:1 to 4:5 in 2025, and DG post
       mostly Reels, which are shot vertical. Square crops cut heads off. */
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    transition: transform .25s ease;
}
.dgx-instafeed .sbi_item:hover .sbi_photo { transform: scale(1.04); }

/* The plugin's "Load More" / "Follow" buttons, restyled as our pill. */
.dgx-instafeed #sbi_load .sbi_load_btn,
.dgx-instafeed .sbi_follow_btn a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 0 30px !important;
    border: 0 !important;
    border-radius: var(--dgx-radius-pill) !important;
    background: var(--dgx-cta) !important;
    font-family: var(--dg-font) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #fff !important;
    box-shadow: none !important;
}

@media (max-width: 900px) {
    .dgx-instafeed #sbi_images { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
}

/* =========================================================================
   WhatsApp

   Outline rather than WhatsApp's own #25D366: the site is already green, and
   a third green next to the gradient CTA would read as a mistake. The glyph
   carries the recognition, which is the part people actually scan for.
   ========================================================================= */
.dgx-btn--wa {
    background: transparent;
    border: 1.5px solid var(--dg-line);
    color: var(--dg-ink);
}
.dgx-btn--wa:hover { border-color: #25d366; color: #128c4a; }
.dgx-wa__icon { width: 20px; height: 20px; color: #25d366; }

/* The hero CTAs wrap to a second row so WhatsApp sits under the other two
   rather than squeezing all three onto one line. */
/* A two-column grid whose columns size to their content, so the WhatsApp
   button spanning both is exactly as wide as the two buttons plus the gap,
   whatever their labels say. */
.dgx-hero__cta {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 12px;
}
.dgx-hero__cta .dgx-btn--wa { grid-column: 1 / -1; }
/* Figma fixes both hero buttons at 246x60 with the content centred, rather
   than letting the longer label make a wider button. The WhatsApp button
   spans the pair, so it lands on 246+12+246 = 504 by itself. */
.dgx-hero__cta .dgx-btn { width: 246px; padding: 0; }
/* ...but not the WhatsApp button, which spans the pair: auto lets the grid
   stretch it across both columns and the gap, 246+12+246 = 504. */
.dgx-hero__cta .dgx-btn--wa { width: auto; }

/* Bottom left, so it never collides with Tawk.to, which sits bottom right. */
.dgx-wafloat {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 12px 16px;
    border-radius: var(--dgx-radius-pill);
    background: #25d366;
    color: #fff;
    font-family: var(--dg-font);
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(15,15,15,.22);
    transition: transform .18s ease;
}
.dgx-wafloat:hover { transform: translateY(-2px); }
.dgx-wafloat .dgx-wa__icon { width: 22px; height: 22px; color: #fff; }

@media (max-width: 720px) {
    /* Shrink to just the glyph on a phone, where a labelled pill eats the
       screen and sits over the content. */
    .dgx-wafloat { left: 14px; bottom: 14px; padding: 14px; }
    .dgx-wafloat span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dgx-wafloat:hover { transform: none; }
}

/* =========================================================================
   Buttons on the dark bands

   On black the light treatments invert: the label goes white rather than
   black, the arrow disc becomes a translucent well instead of a solid one,
   and the secondary button is frosted glass, since a black button on a black
   band is invisible. The gradient also runs lime to green here, the opposite
   way to the hero, as drawn.
   ========================================================================= */
.dgx-fleet .dgx-btn--grad,
.dgx-steps .dgx-btn--grad {
    background: linear-gradient(90deg, #c3cf1b 0%, #349d40 100%);
    color: #fff;
}
.dgx-fleet .dgx-btn--grad .dgx-btn__arrow,
.dgx-steps .dgx-btn--grad .dgx-btn__arrow {
    background: rgba(255,255,255,.24);
    color: #fff;
}

.dgx-fleet .dgx-btn--dark,
.dgx-steps .dgx-btn--dark {
    background: linear-gradient(135deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.07) 100%);
    color: #fff;
}
.dgx-fleet .dgx-btn--dark .dgx-btn__label,
.dgx-steps .dgx-btn--dark .dgx-btn__label {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
}
.dgx-fleet .dgx-btn--dark .dgx-btn__arrow,
.dgx-steps .dgx-btn--dark .dgx-btn__arrow {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,.45);
    color: #fff;
}
.dgx-fleet .dgx-btn--dark:hover,
.dgx-steps .dgx-btn--dark:hover {
    background: linear-gradient(135deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 100%);
}

/* =========================================================================
   Gradient display text

   Auditing the file, the ONLY flat coloured text anywhere in the design is
   "Step 1/2/3" in lime. Every other coloured word is gradient-filled, so the
   remaining display headings are swept up here. UI colour (link hovers,
   required marks, list markers, icon strokes) stays flat on purpose.
   ========================================================================= */
.dgx-quote h3,
.dgx-contact__title,
.dgx-rev__name,
.dgx-footer__subhead,
.dgx-footer h4,
.dgx-main .dgaf-title,
.dgx-fleet .dgx-eyebrow {
    background: var(--dgx-cta-text);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

/* =========================================================================
   Section glow

   Figma's "Blur Shape Right" pair: two 793x362 stadiums at 15% with a 100px
   layer blur, one green and one lime, each fading to white. They sit at 28%
   down the section, 55% wide, one hanging off each edge. Used behind the
   trust band, the FAQ and the footer.
   ========================================================================= */
.dgx-glow { position: relative; overflow: hidden; }
.dgx-glow > * { position: relative; z-index: 1; }
.dgx-glow::before,
.dgx-glow::after {
    content: "";
    position: absolute;
    top: 28%;
    width: 55.1%;
    height: 42.8%;
    border-radius: 999px;
    filter: blur(55px);
    opacity: .15;
    z-index: 0;
    pointer-events: none;
}
.dgx-glow::before { left: -6.9%; background: linear-gradient(180deg, #349d40 0%, #ffffff 100%); }
.dgx-glow::after  { left:  56%;  background: linear-gradient(180deg, #c3cf1b 0%, #ffffff 100%); }

/* =========================================================================
   Mobile refinement

   There are no mobile frames in the Figma, so this is a judgement layer
   rather than a measured one. It sits last so it wins over the earlier
   breakpoint blocks without unpicking them.

   The approach is fluid rather than stepped: clamp() ties the display sizes
   and the big vertical rhythm to the viewport, so there is no cliff at a
   breakpoint and nothing is left at a desktop value on a phone. Every
   minimum is a size that still reads on a 360px screen; every maximum is
   the measured Figma value, so desktop is untouched.
   ========================================================================= */

/* ---- display type ------------------------------------------------------
   Anchored to both Figma frames rather than guessed: the mobile board is
   490 wide and the desktop one 1440, so each size interpolates between the
   two measured values and is clamped outside that range.

     h1    42 @490  ->  64 @1440      h2    40 @490  ->  48 @1440
     body  18 @490  ->  20 @1440

   The min() is what keeps a narrow phone honest: below 490 the interpolation
   would hold the mobile size flat, so the vw term takes over and carries it
   down. Before this the mobile end was pure judgement and came out 12px
   short on h2, which is most of why mobile read as weaker than desktop. */
:root {
    --dgx-fs-h1:   clamp(30px, min(8.57vw, calc(42px + (100vw - 490px) * 0.02316)), 64px);
    --dgx-fs-h2:   clamp(26px, min(8.16vw, calc(40px + (100vw - 490px) * 0.00842)), 48px);
    --dgx-fs-body: clamp(16px, min(3.67vw, calc(18px + (100vw - 490px) * 0.00211)), 20px);
    /* Leading is anchored the same way. The board sets 42/56 on mobile, a
       ratio of 1.33, against 64/76 on desktop at 1.19. One ratio cannot serve
       both, and the flat 1.16 that was here is why the mobile headings ran
       into each other. */
    --dgx-lh-h1:   clamp(40px, min(11.43vw, calc(56px + (100vw - 490px) * 0.02105)), 76px);
    /* h2 is 56 at both ends of the board (40/56 mobile, 48/56 desktop). */
    --dgx-lh-h2:   clamp(34px, 11.43vw, 56px);
}
.dgx-hero h1,
.dgx-hero--inner h1      { font-size: var(--dgx-fs-h1); line-height: var(--dgx-lh-h1); }
.dgx-head h2,
.dgx-trust h2,
.dgx-fleet h2,
.dgx-steps h2,
.dgx-intro h2            { font-size: var(--dgx-fs-h2); line-height: var(--dgx-lh-h2); }
.dgx-wheel__panel h3     { line-height: var(--dgx-lh-h2); }
.dgx-contact__title      { font-size: clamp(30px, min(8.57vw, calc(42px + (100vw - 490px) * 0.01263)), 54px); }   /* 42 @490, 54 @1440 */
.dgx-veh h3              { font-size: clamp(24px, 3.4vw, 32px); }
.dgx-wheel__panel h3     { font-size: clamp(34px, 9.8vw, 48px); }   /* 48 at 490 and at 1440 */
.dgx-pagehead h1         { font-size: clamp(30px, 5.6vw, 56px); }

/* ---- vertical rhythm --------------------------------------------------- */
.dgx-section             { padding: clamp(48px, 8vw, 80px) 0; }
.dgx-trust               { padding: clamp(48px, 8vw, 80px) 0 clamp(56px, 9vw, 96px); }
.dgx-fleet,
.dgx-steps               { padding: clamp(56px, 9vw, 90px) 0; }
.dgx-head                { margin-bottom: clamp(32px, 4.5vw, 48px); }
.dgx-head:has(+ .dgx-wheel) { margin-bottom: clamp(56px, 8vw, 95px); }
.dgx-wheel__cta          { margin: clamp(24px, 3vw, 32px) 0 clamp(56px, 8vw, 95px); }

@media (max-width: 720px) {
    /* The mobile board uses a flat 16px gutter (490 frame, 458 content), not
       a percentage. At 4.17% a 490 viewport gets 20.4px, which is why the
       columns read wider than the design. */
    .dgx-container { padding: 0 16px; }
    .dgx-narrow { padding: 0 16px; }
    /* Mobile sections are 50px top and bottom, against 80-90 on desktop. */
    .dgx-section,
    .dgx-trust,
    .dgx-fleet,
    .dgx-steps { padding: 50px 0; }
    .dgx-head { margin-bottom: 24px; }
    .dgx-section p, .dgx-head p, .dgx-hero__lead { font-size: var(--dgx-fs-body); line-height: 30px; }
}

@media (max-width: 900px) {
    /* The inner hero carries 255px top and bottom on desktop, which is over
       half a phone screen of nothing before the copy starts. */
    /* The board puts 50px between the bar and the hero copy, and closes the
       hero 32px below it. The inner hero is pulled up behind the bar so the
       wash runs under it, so its top pad has to clear the 92px bar first:
       92 + 50 = 142. The home hero sits in flow and needs the 50 alone. */
    /* The page wash is a fixed 1600px with a fade, both desktop numbers: on a
       phone it ran 645px past the hero and dissolved into the trust section
       instead of ending at it. Any fixed height has the same problem, since
       the hero's height comes from its copy. So the hero paints its own, the
       way the inner heroes already do, and is pulled up behind the bar to
       cover it. It is then exactly as tall as the hero at every width, and
       ends on a hard edge with white beneath, as drawn.

       The bar's height is derived rather than guessed, because every part of
       it scales: 24 above + 15 padding twice + the button + 1px border twice.
       At 490 that is 116, matching the board. */
    .dgx-wash--hero { display: none; }
    .dgx-hero {
        --dgx-navh: calc(min(4.9vw, 24px) + 2 * min(3vw, 15px) + clamp(48px, 12.2vw, 60px) + 2px);
        position: relative;
        margin-top: calc(-1 * var(--dgx-navh));
        /* The home hero opens 100px below the bar, not the inner pages' 50. */
        padding: calc(var(--dgx-navh) + 100px) 0 0;
        overflow: hidden;
    }
    .dgx-hero::before,
    .dgx-hero::after {
        content: "";
        position: absolute;
        top: 0;
        width: 62.6%;
        height: 1250px;
        border-radius: 999px;
        filter: blur(55px);
        opacity: .22;
        z-index: 0;
    }
    .dgx-hero::before { left: -29.9%; background: #349d40; }
    .dgx-hero::after  { left:  54.0%; background: #c3cf1b; }
    .dgx-hero > * { position: relative; z-index: 1; }
    /* Both classes are on the same element, so this has to outrank plain
       .dgx-hero above rather than merely follow it. */
    /* The board's inner hero is 729 tall including the 24 above the bar and
       the 92 bar itself, so the element is 705. Ours came to 463 and read
       short. min-height holds it whatever the copy wraps to, and the copy
       centres in the space instead of sitting at the top of all of it. */
    .dgx-hero.dgx-hero--inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: -92px;
        padding: 92px 0 32px;
        min-height: min(143.9vw, 705px);
    }
    .dgx-hero--inner .dgx-eyebrow { font-size: 16px; padding: 9px 16px; }
    .dgx-hero--inner .dgx-hero__lead,
    .dgx-hero__lead { font-size: var(--dgx-fs-body); line-height: 30px; }

    /* The h1 keeps its authored break: the board sets it to two lines,
       "Serving Nottingham" / "for 50 Years", exactly where the <br> falls.
       The lead is the opposite case. It is two lines on the board too, but
       broken after "easier,", while the <br> in the markup breaks after
       "fast," because that is where desktop needs it. Forcing the desktop
       break here overflows line one and spills to a third, so the lead wraps
       on its own, which lands on the board's break at this measure. */
    .dgx-hero__lead br,
    .dgx-head p br,
    .dgx-fleet__grid p br { display: none; }

    /* Headings, audited against the board line by line. Most authored breaks
       already land where the board breaks and are left alone. These two do
       not: the desktop break falls mid-phrase at this measure, pushing the
       services and business h1s to four lines against the board's three, and
       breaking the trust heading after "Community's" instead of after
       "Most". Left to wrap, all three land on the board's own lines.

         board            ours before   ours after
         services h1  3        4            3
         business h1  3        4            3
         trust h2     3        3 (wrong)    3 (right breaks) */
    .dgx-hero--inner h1 br,
    .dgx-trust h2 br { display: none; }

    .dgx-section p,
    .dgx-head p { font-size: var(--dgx-fs-body); }
}

@media (max-width: 720px) {
    /* One column of buttons beats two half-width ones that each wrap. */
    .dgx-wheel__cta { flex-direction: column; align-items: center; }
    .dgx-wheel__cta .dgx-btn { width: 100%; max-width: 320px; }
    /* The mobile board runs every CTA the full 458 content width, stacked on
       a 12px gap, rather than centring a narrower pair. */
    .dgx-hero__cta { grid-template-columns: 1fr; width: 100%; max-width: none; margin: 0; }
    .dgx-hero__cta .dgx-btn,
    .dgx-wheel__cta .dgx-btn,
    .dgx-fleet__cta .dgx-btn,
    .dgx-app__cta .dgx-btn,
    .dgx-bizgrid__cta .dgx-btn { width: 100%; max-width: none; }
    .dgx-wheel__cta,
    .dgx-fleet__cta,
    .dgx-app__cta { flex-direction: column; align-items: stretch; gap: 12px; }
    /* The drivers column is align-items:flex-start, so its CTA row sized to
       its content and the 100% inside it measured against that. It has to
       claim the full column width first. */
    .dgx-fleet__cta { align-self: stretch; width: 100%; }

    .dgx-map { min-height: 280px; }
    .dgx-card { padding: 24px 20px; }
    .dgx-value { min-height: 0; }
    .dgx-veh__panel { padding: 24px 18px 20px; }
    .dgx-statcard { padding: 20px 22px; }
    .dgx-statcard b { font-size: 26px; }
    .dgx-statcard span { font-size: 17px; }

    /* Seven logo tiles at desktop size become a very long column. */
    .dgx-logos { gap: 12px; }
    /* Two-up, but never wider than the desktop tile: at 720 a bare 50% comes
       out at 298px, larger than the design's own 210. */
    .dgx-logos li { width: calc(50% - 6px); max-width: 210px; height: auto; aspect-ratio: 210 / 176; padding: 10px; }

    .dgx-acc summary { padding: 18px 20px; font-size: 18px; }
    .dgx-acc__body { padding: 0 20px 20px; font-size: 17px; }

    .dgx-footer { padding: 56px 0 24px; }
    .dgx-footer__grid { gap: 28px; }
    .dgx-footer input[type="email"],
    .dgx-footer .dgx-btn { max-width: none; }
}

@media (max-width: 480px) {
    /* The wrapped grid from the mobile board holds here too; it just fits
       four to a row rather than five. Nothing to override but the copy. */
    .dgx-wheel__points li { font-size: 16px; }
    .dgx-callpill { font-size: 13px; }
    .dgx-callpill b { padding: 4px 9px; }
    /* Stays two-up here. One per row was fine on the old squat tile, but at
       the Figma's 210x176 proportions a full-width tile is 257px tall and
       eight of them turn the section into a scroll. */
    .dgx-logos li { width: calc(50% - 6px); }
    .dgx-bizfeat { padding: 18px; }
    .dgx-bizfeat h3 { font-size: 20px; }
    .dgx-value h3 { font-size: 20px; }
}



/* =========================================================================
   Get a Quote

   Six screens on one URL: five form steps plus a confirmation. Every step
   posts nothing until the last one, so the whole thing is one <form> with
   panels shown and hidden by dgx-quote.js. Without JS every panel is
   visible and the form still submits in one go, which is why the panels are
   hidden by a class the script adds rather than by default.

   Measurements are the Figma's: 803 + 22 + 495 across the 1320 container.
   ========================================================================= */
.dgx-q-grid {
    display: grid;
    grid-template-columns: 803fr 495fr;
    gap: 22px;
    align-items: start;
}
.dgx-q-card {
    padding: 32px;
    background: var(--dg-white);
    border-radius: 32px;
}
.dgx-q-rail {
    padding: 32px;
    background: var(--dg-white);
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 32px;
}
.dgx-q-card h2 {
    font-size: clamp(28px, 3.4vw, 48px);
    font-weight: 700;
    line-height: 1.17;
    letter-spacing: -1px;
}
.dgx-q-card__intro { margin-top: 24px; font-size: 20px; line-height: 28px; color: var(--dg-muted); }

/* ---- stepper ----------------------------------------------------------- */
.dgx-q-progress { margin-top: 50px; }
.dgx-q-progress__count { font-size: 24px; font-weight: 600; line-height: 26px; color: var(--dg-ink); }
.dgx-q-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 32px;
    padding: 0;
    list-style: none;
}
.dgx-q-steps li { display: flex; flex-direction: column; gap: 21px; }
.dgx-q-steps li::before {
    content: "";
    height: 8px;
    border-radius: 9999px;
    background: var(--dg-ink);
}
.dgx-q-steps li.is-done::before,
.dgx-q-steps li.is-current::before { background: linear-gradient(90deg, #c3cf1b 0%, #349d40 100%); }
.dgx-q-steps span { font-size: 20px; font-weight: 500; line-height: 1; color: var(--dg-muted); white-space: nowrap; }
.dgx-q-steps li.is-current span { color: var(--dg-ink); }

/* ---- fields ------------------------------------------------------------ */
.dgx-q-panel { margin-top: 50px; }
.dgx-q-panel[hidden] { display: none; }
.dgx-q-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 32px;
}
.dgx-q-row--one { grid-template-columns: minmax(0, 1fr); }
.dgx-q-field { display: flex; flex-direction: column; gap: 20px; }
.dgx-q-field > label { font-size: 16px; font-weight: 600; line-height: 1; color: var(--dg-ink); }
.dgx-q-field > label .opt { font-weight: 400; color: var(--dg-muted); }
.dgx-q-field > label .req { color: var(--dg-green); }
.dgx-q-field input,
.dgx-q-field select,
.dgx-q-field textarea {
    width: 100%;
    min-height: 56px;
    padding: 0 24px;
    font: inherit;
    font-size: 16px;
    color: var(--dg-ink);
    background: var(--dg-white);
    border: 1px solid rgba(15,15,15,.18);
    border-radius: 32px;
}
.dgx-q-field textarea { min-height: 168px; padding: 18px 24px; border-radius: 24px; resize: vertical; }
.dgx-q-field :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--dg-green);
    outline-offset: 1px;
    border-color: var(--dg-green);
}
.dgx-q-field input::placeholder, .dgx-q-field textarea::placeholder { color: #9b9ba5; }

/* ---- choice cards (vehicle, payment) ----------------------------------- */
.dgx-q-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 32px;
}
.dgx-q-choice { position: relative; display: block; cursor: pointer; }
.dgx-q-choice input {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.dgx-q-choice__box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 82px;
    padding: 16px 20px;
    background: #fafbfc;
    border: 1px solid rgba(15,15,15,.1);
    border-radius: 24px;
    transition: background .15s ease, border-color .15s ease;
}
.dgx-q-choice b { font-size: 20px; font-weight: 700; line-height: 1.3; }
.dgx-q-choice small { font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--dg-muted); }
.dgx-q-choice input:hover + .dgx-q-choice__box { border-color: rgba(52,157,64,.5); }
.dgx-q-choice input:checked + .dgx-q-choice__box {
    background: rgba(52,157,64,.06);
    border-color: var(--dg-green);
}
.dgx-q-choice input:focus-visible + .dgx-q-choice__box { outline: 2px solid var(--dg-green); outline-offset: 2px; }

/* ---- pill checkboxes and radios ---------------------------------------- */
.dgx-q-ticks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 32px;
}
.dgx-q-ticks--one { grid-template-columns: minmax(0, 1fr); }
.dgx-q-tick {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 20px;
    background: var(--dg-white);
    border: 1px solid rgba(15,15,15,.14);
    border-radius: 32px;
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
}
.dgx-q-tick input {
    flex: none;
    appearance: none;
    width: 22px; height: 22px;
    margin: 0;
    border: 1.5px solid rgba(15,15,15,.3);
    border-radius: 50%;
    cursor: pointer;
}
.dgx-q-tick input:checked {
    background: var(--dg-green) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    border-color: var(--dg-green);
}
.dgx-q-tick input:focus-visible { outline: 2px solid var(--dg-green); outline-offset: 2px; }
.dgx-q-tick:has(input:checked) { border-color: var(--dg-green); }
.dgx-q-tick a { text-decoration: underline; font-weight: 600; }

/* ---- extra stops ------------------------------------------------------- */
.dgx-q-stops { display: flex; align-items: center; gap: 18px; margin-bottom: 32px; }
.dgx-q-addstop {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 20px;
    background: var(--dg-white);
    border: 1px solid rgba(15,15,15,.14);
    border-radius: 32px;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}
.dgx-q-addstop::before {
    content: "";
    width: 22px; height: 22px;
    background: var(--dgx-cta);
    border-radius: 50%;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
            mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}
.dgx-q-addstop[disabled] { opacity: .45; cursor: not-allowed; }
.dgx-q-stops__hint { font-size: 16px; color: var(--dg-muted); }

/* ---- step buttons ------------------------------------------------------ */
.dgx-q-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dgx-q-nav--one { grid-template-columns: minmax(0, 1fr); }
.dgx-q-nav .dgx-btn { width: 100%; padding: 0; }

/* ---- right rail -------------------------------------------------------- */
.dgx-q-rail__quotes {
    padding: 20px;
    background: var(--dg-ink);
    border: 1px dashed rgba(15,15,15,.15);
    border-radius: 32px;
    color: rgba(255,255,255,.82);
}
.dgx-q-rail__quotes h3 { font-size: 20px; font-weight: 700; color: var(--dgx-lime); margin-bottom: 12px; }
.dgx-q-rail__quotes p { font-size: 16px; line-height: 24px; }
.dgx-q-rail__eta { margin-top: 20px; font-size: 16px; line-height: 24px; }
.dgx-q-rail__eta b { display: block; font-size: 20px; color: #fff; }
.dgx-q-rail__std { margin-top: 20px; }
.dgx-q-rail__std h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.dgx-q-rail__std p { font-size: 16px; line-height: 24px; color: var(--dg-muted); margin-bottom: 20px; }
.dgx-q-rail__std .dgx-btn { width: 100%; padding: 0; }

/* ---- confirmation ------------------------------------------------------ */
.dgx-q-done__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    margin-bottom: 32px;
    background: var(--dgx-cta);
    border-radius: 50%;
}
.dgx-q-done__mark svg { width: 32px; height: 32px; color: #fff; }
.dgx-q-ref {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 32px 0;
    padding: 18px 24px;
    background: #fafbfc;
    border: 1px solid rgba(15,15,15,.1);
    border-radius: 32px;
    font-size: 16px;
    color: var(--dg-muted);
}
.dgx-q-ref b { font-size: 20px; color: var(--dg-ink); }

/* ---- hero pills -------------------------------------------------------- */
.dgx-q-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.dgx-q-pills li {
    padding: 10px 20px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 500;
    color: var(--dg-ink);
}

/* ---- errors ------------------------------------------------------------ */
.dgx-q-error { margin-top: 8px; font-size: 15px; font-weight: 500; color: #b3261e; }
.dgx-q-field :is(input, select, textarea)[aria-invalid="true"] { border-color: #b3261e; }
.dgx-q-notice {
    margin-bottom: 32px;
    padding: 14px 20px;
    border-radius: 20px;
    font-size: 16px;
}
.dgx-q-notice--error { background: #fdecec; color: #8c1d1d; }
/* Off-screen rather than display:none, so bots fill it but people never see it. */
.dgx-q-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 1080px) {
    .dgx-q-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
    .dgx-q-card, .dgx-q-rail { padding: 24px 20px; }
    .dgx-q-row, .dgx-q-choices, .dgx-q-ticks { grid-template-columns: minmax(0, 1fr); }
    .dgx-q-progress { margin-top: 32px; }
    .dgx-q-panel { margin-top: 32px; }
    /* Five labelled columns cannot survive a phone; the bars stay as the
       progress cue and the count above them carries the wording. */
    .dgx-q-steps { gap: 6px; margin-top: 20px; }
    .dgx-q-steps span { display: none; }
    .dgx-q-stops { flex-direction: column; align-items: stretch; }
}

/* =========================================================================
   Get a Quote widget

   Autocab's widget arrives as one self-contained block with its own inline
   <style>, its own tokens (#418a49 green, Open Sans, 4-6px radii) and its own
   dgq- namespace. Restyling it here rather than editing that block means a
   replacement widget from their side keeps our look without being re-edited
   every time.

   The inline <style> sits in the body, so it comes after this file in
   document order and wins at equal specificity. Every selector below is
   therefore one class deeper than theirs, which is why the .dgx-main prefix
   is on all of them.
   ========================================================================= */
.dgx-main .dgq {
    --dgq-green:       #349d40;
    --dgq-green-dark:  #2b8035;
    --dgq-green-light: #c3cf1b;
    --dgq-ink:         var(--dg-ink);
    --dgq-muted:       var(--dg-muted);
    --dgq-line:        rgba(15,15,15,.18);
    --dgq-soft:        #fafbfc;
    max-width: none;
    border-radius: 32px;
    box-shadow: 0 8px 40px rgba(15,15,15,.07);
    font-family: inherit;
    font-size: 16px;
    overflow: hidden;          /* so the children honour the 32px corners */
}

/* header: their tab sits on a grey ground with a hard 3px rule. Ours is the
   card's own white with the brand gradient as the rule. */
/* The Figma draws this as a tinted panel on a dashed border with a centred
   gradient heading, and no tab strip or account links across the top. The
   widget's own header is replaced by a heading on the card itself. */
.dgx-main .dgq {
    background: #eef5e9;
    border: 1px dashed rgba(52,157,64,.45);
}
.dgx-main .dgq .dgq-head {
    display: block;
    padding: 32px 32px 0;
    background: none;
    border-radius: 0;
    text-align: center;
}
.dgx-main .dgq .dgq-tab {
    display: block;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 32px;
    font-weight: 700;
    /* the design's green-to-lime run across the words */
    background-image: var(--dgx-cta-text);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.dgx-main .dgq .dgq-tab::before { content: none; }
.dgx-main .dgq .dgq-tab svg { display: none; }
/* "Have an account? / Having trouble?" is not in the design. */
.dgx-main .dgq .dgq-links { display: none; }

/* body: drop their 4px charcoal foot, which belongs to a squarer card. */
.dgx-main .dgq form.dgq-form {
    padding: 24px 32px 32px;
    background: none;      /* the tinted card shows through */
    border-bottom: 0;
    border-radius: 0 0 32px 32px;
}
.dgx-main .dgq fieldset.dgq-field { margin-top: 20px; }

/* labels and inputs on our contact-form sizing: 16/600 over a 56px pill. */
.dgx-main .dgq label.dgq-label {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--dg-ink);
}
.dgx-main .dgq input.dgq-input,
.dgx-main .dgq select.dgq-input {
    height: 56px;
    padding: 0 20px 0 48px;
    border: 1px solid rgba(15,15,15,.18);
    border-radius: 32px;
    box-shadow: none;
    font-size: 16px;
}
.dgx-main .dgq input.dgq-input:focus,
.dgx-main .dgq select.dgq-input:focus {
    border-color: var(--dg-green);
    box-shadow: none;
    outline: 2px solid var(--dg-green);
    outline-offset: 1px;
}
/* The board draws the field icons in grey; only the VIA plus stays green. */
.dgx-main .dgq .dgq-icon { left: 18px; color: var(--dg-faint); }

/* the suggestions panel */
.dgx-main .dgq ul.dgq-options {
    border: 1px solid rgba(15,15,15,.12);
    border-radius: 24px;
    box-shadow: 0 12px 30px rgba(15,15,15,.12);
    padding: 8px 0;
}
.dgx-main .dgq .dgq-opt { padding: 11px 20px; font-size: 16px; }
.dgx-main .dgq .dgq-opt:hover,
.dgx-main .dgq .dgq-opt.is-active { background: rgba(52,157,64,.06); }
.dgx-main .dgq .dgq-opt-heading { padding: 12px 20px 4px; color: var(--dg-green); }
.dgx-main .dgq .dgq-opt-msg { padding: 14px 20px; font-size: 15px; }

/* VIA, set in caps as the design draws it. Done here rather than in the
   markup so the widget file stays as supplied. */
.dgx-main .dgq button.dgq-via-btn {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dg-green);
}
/* The plus is drawn rather than typed: as a "+" glyph it sits wherever the
   font's metrics put it inside the circle, which reads as off centre on some
   phones. Two bars centred on the box are centred everywhere. */
.dgx-main .dgq .dgq-plus {
    position: relative;
    width: 20px;
    height: 20px;
    background: var(--dgx-cta);
    font-size: 0;
    color: transparent;
}
.dgx-main .dgq .dgq-plus::before,
.dgx-main .dgq .dgq-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* Even numbers: centring an odd width in the 20px circle lands the bars on
       a half pixel, which blurs one edge and reads as slightly off centre. */
    width: 10px;
    height: 2px;
    border-radius: 1px;
    background: #fff;
    transform: translate(-50%, -50%);
}
.dgx-main .dgq .dgq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.dgx-main .dgq ul.dgq-via-list li { font-size: 16px; border-bottom-color: rgba(15,15,15,.14); }

/* submit: our pill, not a 20px uppercase slab */
.dgx-main .dgq button.dgq-submit {
    min-height: 60px;
    margin-top: 28px;
    padding: 0 30px;
    border-radius: var(--dgx-radius-pill);
    background: var(--dgx-cta);
    box-shadow: none;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #f9fafb;
}
.dgx-main .dgq button.dgq-submit:hover {
    transform: translateY(-2px);
    box-shadow: var(--dg-shadow-sm);
    filter: none;
}
.dgx-main .dgq button.dgq-submit:focus-visible { outline: 2px solid var(--dg-green); outline-offset: 3px; }

.dgx-main .dgq .dgq-error { font-size: 15px; color: #b3261e; }
.dgx-main .dgq .dgq-field.has-error .dgq-input { border-color: #b3261e; }

@media (max-width: 720px) {
    .dgx-main .dgq .dgq-tab { padding: 20px 20px 14px; font-size: 18px; }
    .dgx-main .dgq .dgq-links { padding: 14px 20px; }
    .dgx-main .dgq form.dgq-form { padding: 8px 20px 24px; }
}

/* The widget fills the height the grid now gives it, with the button on the
   floor of the card rather than a gap beneath it. */
.dgx-main .dgq { display: flex; flex-direction: column; }
.dgx-main .dgq form.dgq-form { flex: 1 1 auto; display: flex; flex-direction: column; }
/* auto pushes it to the card floor when the grid stretches the widget; the
   padding keeps a gap when there is no slack to take. */
.dgx-main .dgq button.dgq-submit { margin-top: auto; }
.dgx-main .dgq form.dgq-form > .dgq-row:last-of-type { margin-bottom: 28px; }

/* The value centres in the field, matching the two time boxes beside it.
   What made it look adrift before was the field's width, not the centring:
   at 55% it was far wider than the value it held, so the calendar icon sat
   a long way from it. Trimmed to 48% the row reads evenly. */
.dgx-main .dgq input[type="date"].dgq-input {
    /* Symmetric padding, so the value centres on the field itself rather than
       on the space left over after the icon's 48px indent. */
    padding: 0 48px;
    text-align: left;
    /* A date input does not centre its value vertically the way a text input
       does: the browser lays the value out as its own block, which sat at the
       top of a 56px field while the icon beside it was centred. The line
       height covers the content box, and the pseudo-element below centres the
       value in engines that expose it. */
    line-height: 54px;
}
.dgx-main .dgq input[type="date"].dgq-input::-webkit-datetime-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
}
/* The browser adds its own calendar button on the right, so the field showed
   two calendar icons and the value sat off-centre between them. Stretched
   over the whole field and made invisible: the green icon is the only one
   visible, and clicking anywhere in the field still opens the picker. */
.dgx-main .dgq input[type="date"].dgq-input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}
.dgx-main .dgq .dgq-row > .dgq-date { flex: 0 0 calc(48% - 5px); }


/* "Electric available" / "Wheelchair accessible available": the options that
   used to have a card of their own, now noted on the vehicle that carries
   them. */
.dgx-veh__note {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: var(--dg-green);
}

/* =========================================================================
   Mobile compaction

   The mobile home page measured 17,609px, roughly 24 phone screens, with the
   services, fleet and reviews sections accounting for 11.5 of them on their
   own. Everything below is inside a mobile media query and changes layout
   only: no new components, no restyled buttons, no colour changes, and the
   desktop grids are untouched.

   Long card lists become swipeable rows rather than stacks. Swiping is a
   gesture people already use; a tap-to-reveal would add a step before anyone
   learns anything, and a modal would hijack the back button.
   ========================================================================= */
@media (max-width: 720px) {

    /* ---- swipeable rows ------------------------------------------------ */
    .dgx-svcwrap,
    .dgx-fleetgrid,
    .dgx-revgrid,
    .dgx-featlist,
    .dgx-trust__stats,
    .dgx-bizgrid,
    .dgx-valuegrid,
    .dgx-statgrid {
        display: flex;
        /* .dgx-featlist is already a column flex, so display:flex alone left
           all five stacked and the row never scrolled. The same is true of the
           stat and value grids. */
        flex-direction: row;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* The row stops at the container edges, so a card fills the whole
           scroller and neither neighbour peeks in beside it. Vertical padding
           only, to keep the cards' shadows from being clipped. */
        margin: 0;
        padding: 4px 0 12px;
    }
    .dgx-svcwrap::-webkit-scrollbar,
    .dgx-fleetgrid::-webkit-scrollbar,
    .dgx-revgrid::-webkit-scrollbar,
    .dgx-featlist::-webkit-scrollbar,
    .dgx-trust__stats::-webkit-scrollbar,
    .dgx-bizgrid::-webkit-scrollbar,
    .dgx-valuegrid::-webkit-scrollbar,
    .dgx-statgrid::-webkit-scrollbar { display: none; }

    /* One card at a time. An 82% peek sliced the next card mid-word, which
       read as broken content rather than as a preview; the dots below carry
       the affordance instead. */
    .dgx-svcgrid > *,
    .dgx-svcgrid--tail > *,
    .dgx-fleetgrid > *,
    .dgx-revgrid > *,
    .dgx-featlist > *,
    .dgx-trust__stats > *,
    .dgx-bizgrid > *,
    .dgx-valuegrid > *,
    .dgx-statgrid > * {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }

    /* ---- the app section ----------------------------------------------- */
    /* Four points each with a heading and a paragraph is most of a screen
       before the phone image. Tighten rather than hide. */
    .dgx-appring__col { gap: 18px; }
    .dgx-appring__point h4 { margin-bottom: 6px; }
    .dgx-appring__point p { font-size: 16px; line-height: 24px; }

    /* ---- section rhythm ------------------------------------------------ */
    /* 50px top and bottom on every section is 100px between each one. At this
       width 36 reads the same and returns roughly a screen and a half. */
    .dgx-section,
    .dgx-trust,
    .dgx-fleet,
    .dgx-steps { padding: 36px 0; }
    .dgx-head { margin-bottom: 20px; }
}

/* Sticky booking bar. Desktop never sees it: the navbar keeps Book Online in
   view there, so it would be redundant clutter. */
.dgx-stickycta { display: none; }

@media (max-width: 720px) {
    .dgx-stickycta {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 60;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255,255,255,.92);
        border-top: 1px solid rgba(15,15,15,.08);
        box-shadow: 0 -6px 24px rgba(15,15,15,.08);
    }
    @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
        .dgx-stickycta {
            background: rgba(255,255,255,.72);
            -webkit-backdrop-filter: blur(18px) saturate(180%);
                    backdrop-filter: blur(18px) saturate(180%);
        }
    }
    /* Two buttons only, Book Online and Download App, in equal halves. */
    .dgx-stickycta { grid-template-columns: 1fr 1fr; }
    .dgx-stickycta .dgx-btn { min-height: 52px; padding: 0 16px; white-space: nowrap; }

    /* the bar sits over the page, so the footer needs room to clear it */
    .dgx-footer { padding-bottom: 96px; }
    /* The floating bubble is gone: fixed to the corner it covered whatever it
       sat on, which on a phone was the quote widget. */
    .dgx-wafloat { display: none; }
}


/* Carousel dots. Built by dgx-carousel.js and only ever present on mobile, so
   there is nothing to hide at desktop widths. Indicators, not CTAs: they
   borrow the brand green but none of the button styling. */
.dgx-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    /* The buttons under a slide were sitting right below the dots, so the two
       read as one block. */
    margin: 6px 0 20px;
}
.dgx-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15,15,15,.18);
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}
.dgx-dot.is-on { width: 22px; border-radius: 9999px; background: var(--dgx-cta); }
.dgx-dot:focus-visible { outline: 2px solid var(--dg-green); outline-offset: 2px; }

/* The parent theme ships its own floating WhatsApp button, and this theme
   adds one, so both were stacking in the corner on every page. */
.dg-wa { display: none !important; }


@media (max-width: 720px) {
    /* The app screenshot was 611px, most of a screen on its own, before the
       four points it illustrates. */
    .dgx-appring__stage { max-width: 260px; margin: 0 auto; }
}

/* =========================================================================
   Mobile: what the phone does not need

   Desktop keeps all of it. These are whole blocks that earn their place on a
   wide screen and cost a screen and a half each on a phone.
   ========================================================================= */
@media (max-width: 720px) {

    /* The app section sells a download the hero already offers, with a 530px
       screenshot to do it. The hero's button links straight to the store, not
       to this anchor, so nothing breaks by dropping it here. */
    .dgx-app { display: none; }

    /* The logo wall gives way to the black band above the stats slide, per
       the feedback: three client logos instead of eight. */
    .dgx-trust__logos { display: none; }

    /* The drivers section stays: the nav's Drivers item points at #drivers,
       so hiding it would send that tap to a homepage with nowhere to land.
       Its photo goes instead, which is most of its height. */
    .dgx-fleet__grid > div:last-child { display: none; }
    .dgx-fleet__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Quote widget: the native date and time fields on a phone

   On touch the widget swaps its time spinners for a native <input type=time>,
   and narrow mode hides the row icons. Neither field centres its value the
   way a text input does, so the time sat at the top of a 56px box while the
   date beside it did not. Same fix as the date got, applied to both, plus the
   icon padding removed since there is no icon to clear at this width.
   ========================================================================= */
.dgx-main .dgq input[type="time"].dgq-input {
    text-align: center;
    line-height: 54px;
}
.dgx-main .dgq input[type="time"].dgq-input::-webkit-datetime-edit,
.dgx-main .dgq input[type="date"].dgq-input::-webkit-datetime-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
}
.dgx-main .dgq input[type="time"].dgq-input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}
/* Narrow mode drops the row icons, so the 48px indent that cleared them would
   just push the value off centre. */
.dgx-main .dgq.dgq--narrow .dgq-row input[type="date"].dgq-input,
.dgx-main .dgq.dgq--narrow .dgq-row input[type="time"].dgq-input {
    padding-left: 20px;
    padding-right: 20px;
}

/* The two CTAs the feedback asks for under the services slide. Desktop keeps
   the full grid, so they would only repeat what is already on screen. */
.dgx-svc-cta { display: none; }
@media (max-width: 720px) {
    .dgx-svc-cta {
        display: grid;
        gap: 12px;
        margin: 4px 0 0;
    }
    .dgx-svc-cta .dgx-btn { width: 100%; padding: 0; }
}

/* "Get a Quote" larger, per the feedback. */
@media (max-width: 720px) {
    .dgx-main .dgq .dgq-tab { font-size: 40px; }
}


/* All eight services in one swipe. The markup holds them in two grids (six,
   then a centred two on desktop), so on a phone the wrapper is the swipe row
   and both grids flatten into it with display: contents. Desktop never sees
   the wrapper styled, so its two-grid layout is untouched. */
@media (max-width: 720px) {
    .dgx-svcwrap { position: relative; }
    .dgx-svcwrap > .dgx-svcgrid { display: contents; }
}

@media (max-width: 720px) {
    /* Business trust band: the three client logos on one line, per the
       feedback, instead of two and one. The tablet two-up rule stays. */
    .dgx-trust--compact__logos { flex-wrap: nowrap; gap: 8px; }
    .dgx-trust--compact__logos li { flex: 1 1 0; min-width: 0; padding: 12px 10px; }

    /* About values heading on two lines, per the feedback. Its second line,
       "To Serve Our Community...", ran about 8% past the content width at
       every phone size and wrapped to a third. Sized from the content width
       (100vw less the two 16px gutters) so it fits; wider phones keep the
       normal h2 size through the min(). */
    .dgx-main .dgx-head h2.dgx-h2--fit {
        font-size: min(var(--dgx-fs-h2), calc((100vw - 32px) / 13.2));
        line-height: 1.4;
    }
}

/* Home trust section, phone only: the three client logos in one row under the
   heading, above the stats slide. Desktop keeps its logo wall and never shows
   this row. */
.dgx-trust__clients { display: none; }
@media (max-width: 720px) {
    .dgx-trust__clients { display: flex; margin-bottom: 24px; }
}

@media (max-width: 359px) {
    /* Measured: the two bar labels need 283px at 16px padding, which leaves
       no room at 320. A little less padding gives them some. */
    .dgx-stickycta .dgx-btn { padding: 0 14px; }
}

@media (max-width: 720px) {
    /* Home hero, phone only: Book Online and Download App are both in the bar
       pinned to the bottom of every screen, so the hero keeps WhatsApp alone
       rather than repeating them above the fold. Inner pages and desktop are
       untouched. */
    .dgx-hero:not(.dgx-hero--inner) .dgx-hero__cta > .dgx-btn--grad,
    .dgx-hero:not(.dgx-hero--inner) .dgx-hero__cta > .dgx-btn--dark { display: none; }
}

@media (max-width: 960px) {
    /* The navbar CTAs keep their arrows on desktop. At these widths the bar
       carries one narrow button, where the words matter more than the mark. */
    .dgx-navcta .dgx-btn__arrow { display: none; }
}

/* Logo tiles. The square marks (QSI, Premier Inn, the Investors badges) were
   filling their tile top to bottom while the wide ones sat at a third of it,
   so the wall read as a set of mismatched sizes. Capping the height evens them
   up; the wide logos are held by their width and do not move. */
.dgx-logos img { max-height: 120px; }
@media (max-width: 720px) {
    .dgx-trust--compact__logos img { max-height: 44px; }
}

/* Quote widget details from the board: the date reads from the left (the rule
   above sets the value's own box, this one the engine's date editor, which a
   later rule shared with the time field centres), the AM/PM circles are 20px,
   and the time steppers are big enough to hit. */
.dgx-main .dgq input[type="date"].dgq-input::-webkit-datetime-edit { justify-content: flex-start; }
.dgx-main .dgq .dgq-ampm input { width: 20px; height: 20px; }
.dgx-main .dgq .dgq-ampm label { gap: 8px; font-size: 14px; }
.dgx-main .dgq button.dgq-step { height: 22px; }
.dgx-main .dgq button.dgq-step::before {
    width: 9px;
    height: 9px;
    margin: -3px 0 0 -4.5px;
    border-left-width: 2px;
    border-top-width: 2px;
}

/* The FAQ marker turns with the answer sliding open, rather than snapping
   ahead of it. */
.dgx-acc summary::after { transition: transform .32s cubic-bezier(.4, 0, .2, 1); }

@media (max-width: 720px) {
    /* Hero call pill: the number is the point of it, and "Call us" and
       "Open 24/7" are two more things to read on a small screen. The whole
       pill is still the phone link. */
    .dgx-callpill b { display: none; }
    .dgx-callpill { gap: 0; padding: 10px 18px; }
}

@media (max-width: 720px) {
    /* The feature list, its dots and the quote widget are cells of a 32px grid
       on desktop. Stacked on a phone that gap landed on top of the dots' own
       spacing, so this block sat 38px above its dots and 52px below them while
       every other slide used 18 and 20. Plain stacking restores the rhythm. */
    .dgx-hiw { display: block; }

    /* Dots to the buttons under a slide: 40px, the same as the business
       features and the fleet. The services pair was the odd one at 20px. */
    .dgx-svc-cta { margin-top: 40px; }
}