/* ==========================================================================
   Delhi Golden Doodle — Premium Design System
   --------------------------------------------------------------------------
   Loaded on every page, immediately after global-site.css.

   HOW THIS REACHES 35 PAGES WITHOUT REWRITING 35 STYLESHEETS
   Every page carries its own scoped <style> block, and those blocks sit after
   </head>, so at equal specificity the page always wins. Two consequences
   shape this file:

     1. Tokens are declared on `html:root` (0,0,1,1) rather than `:root`
        (0,0,1,0), so they beat the ten pages that define their own :root.
     2. Both token namespaces are redefined — the --dgd-* set used by the
        nineteen newer pages, and the unprefixed --gold / --font / --radius-*
        / --shadow-* set used by the older ones. Changing a token here
        therefore restyles pages whose CSS is never touched.

   The polish layer at the end deliberately restricts itself to COSMETIC
   properties — radius, shadow, border colour, transition, hover transform.
   It never sets display, position, width or float, so no bespoke page layout
   can be broken by it.
   ========================================================================== */

/* The webfonts are linked from each page's <head> rather than @import-ed here,
   so the font request starts in parallel with this stylesheet instead of
   waiting for it to parse. */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
html:root {
  /* ---- Type -------------------------------------------------------------
     Fraunces is a warm, high-contrast display serif; Plus Jakarta Sans is a
     friendly geometric text face. Full system fallbacks keep the site legible
     if the webfont request fails or the user is offline. */
  --dgd-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --dgd-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font: var(--dgd-sans);
  --font-head: var(--dgd-serif);

  /* ---- Palette ----------------------------------------------------------
     Warm white → cream → beige as the ground, honey gold as the accent,
     forest green as the trust anchor, terracotta for warmth, espresso for
     text. Hue relationships stay close to the original brand so the ten
     pages styled around these tokens shift in tone, not in legibility. */
  --dgd-ivory:         #FDFBF6;
  --dgd-cream:         #FBF6EC;
  --dgd-beige:         #F3EADA;
  --dgd-sand:          #E8DAC3;

  --dgd-gold:          #C4881F;
  --dgd-gold-light:    #EFC876;
  --dgd-gold-dark:     #6B450E;
  --dgd-gold-contrast: #FFE4A0;
  --dgd-gold-pale:     #FDF4E3;
  --dgd-gold-mid:      #EFDCB2;

  --dgd-forest:        #14513F;
  --dgd-forest-deep:   #0D3628;
  --dgd-forest-pale:   #E8F2ED;
  /* the teal tokens now resolve to forest so older pages inherit the shift */
  --dgd-teal:          #14513F;
  --dgd-teal-dark:     #0D3628;
  --dgd-teal-pale:     #E8F2ED;

  --dgd-terracotta:      #C2673F;
  --dgd-terracotta-pale: #FBEDE5;

  --dgd-brown-dark:    #241A13;
  --dgd-brown-mid:     #4A3425;
  --dgd-brown-light:   #8D6B50;

  --dgd-ink:           #201811;
  --dgd-ink-2:         #4B3B2E;
  --dgd-ink-3:         #6E5B49;

  --dgd-wa:            #20D365;
  --dgd-wa-dark:       #0B7435;
  --dgd-wa-ink:        #062C16;

  --dgd-line:          #E7DAC4;
  --dgd-line-soft:     #F0E7D8;
  --dgd-white:         #FFFFFF;
  --dgd-focus:         #1E5BB8;

  /* ---- Elevation --------------------------------------------------------
     Warm-tinted and layered rather than a flat grey blur. */
  --dgd-shadow-sm: 0 1px 2px rgba(60,42,28,.05), 0 2px 8px rgba(60,42,28,.05);
  --dgd-shadow-md: 0 2px 4px rgba(60,42,28,.05), 0 8px 24px rgba(60,42,28,.09);
  --dgd-shadow-lg: 0 4px 8px rgba(60,42,28,.05), 0 18px 44px rgba(60,42,28,.13);
  --dgd-shadow-xl: 0 8px 16px rgba(60,42,28,.06), 0 32px 72px rgba(60,42,28,.16);
  --dgd-shadow-gold: 0 8px 26px rgba(196,136,31,.28);
  --dgd-shadow-forest: 0 8px 26px rgba(20,81,63,.24);

  /* ---- Radius ----------------------------------------------------------- */
  --dgd-r-sm: 10px;
  --dgd-r-md: 18px;
  --dgd-r-lg: 28px;
  --dgd-r-xl: 36px;
  --dgd-r-pill: 999px;

  /* ---- Rhythm ----------------------------------------------------------- */
  --dgd-section-y: clamp(56px, 7vw, 104px);
  --dgd-shell: 1180px;
  --dgd-shell-wide: 1340px;
  --dgd-gutter: 24px;
  --dgd-header-h: 86px;

  /* ---- Motion ----------------------------------------------------------- */
  --dgd-ease: cubic-bezier(.22, .61, .36, 1);
  --dgd-ease-out: cubic-bezier(.16, 1, .3, 1);
  --dgd-t-fast: .18s;
  --dgd-t: .28s;
  --dgd-t-slow: .5s;

  /* ---- Legacy namespace -------------------------------------------------
     The ten older pages consume these names. Mapping them onto the tokens
     above is what carries the redesign into stylesheets this file never
     edits. */
  --gold: var(--dgd-gold);
  --gold-light: var(--dgd-gold-light);
  --gold-dark: var(--dgd-gold-dark);
  --gold-contrast: var(--dgd-gold-contrast);
  --gold-pale: var(--dgd-gold-pale);
  --gold-mid: var(--dgd-gold-mid);
  --cream: var(--dgd-cream);
  --brown-dark: var(--dgd-brown-dark);
  --brown-mid: var(--dgd-brown-mid);
  --brown-light: var(--dgd-brown-light);
  --green-sage: #4E7264;
  --green-pale: var(--dgd-forest-pale);
  --teal: var(--dgd-forest);
  --teal-dark: var(--dgd-forest-deep);
  --teal-pale: var(--dgd-forest-pale);
  --text-primary: var(--dgd-ink);
  --text-secondary: var(--dgd-ink-2);
  --text-muted: var(--dgd-ink-3);
  --muted: var(--dgd-ink-3);
  --whatsapp: var(--dgd-wa);
  --whatsapp-hover: var(--dgd-wa-dark);
  --whatsapp-text: var(--dgd-wa-ink);
  --border: var(--dgd-line);
  --white: var(--dgd-white);
  --focus-ring: var(--dgd-focus);
  --shadow-sm: var(--dgd-shadow-sm);
  --shadow-md: var(--dgd-shadow-md);
  --shadow-lg: var(--dgd-shadow-lg);
  --radius-sm: var(--dgd-r-sm);
  --radius-md: var(--dgd-r-md);
  --radius-lg: var(--dgd-r-lg);
  --radius: var(--dgd-r-md);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--dgd-ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Fraunces is a variable font — this keeps headings at a warm, slightly soft
   optical grade rather than the default high-contrast display cut. */
h1, h2, h3, h4, h5, h6 {
  font-variation-settings: "SOFT" 12, "WONK" 0;
  letter-spacing: -.012em;
  text-wrap: balance;
}

/* Comfortable measure. Applied at low specificity so any page that sets its
   own width still wins. */
p { text-wrap: pretty; }

::selection {
  background: var(--dgd-gold-contrast);
  color: var(--dgd-ink);
}

/* ==========================================================================
   2b. TYPOGRAPHY ENFORCEMENT
   --------------------------------------------------------------------------
   Ten older pages hardcode `body { font-family: "Segoe UI", ... }` in their own
   <style>, which sits after this file. `html body` (0,0,0,2) outranks `body`
   (0,0,0,1), so the new faces land without editing those pages.
   ========================================================================== */
html body {
  font-family: var(--dgd-sans);
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--dgd-ink-2);
  /* Site-wide guard against horizontal scroll. `clip` rather than `hidden`
     because `hidden` would make body a scroll container and break the sticky
     header; `clip` does not. Two pages already proved this pattern. */
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
/* NO `color` here, deliberately.
   Setting a colour on every heading broke inheritance: any heading inside a
   dark section whose own CSS did not declare a colour (because it relied on
   inheriting a light one from its section) turned dark-on-dark. Headings now
   inherit their section's colour, which is correct in both light and dark
   contexts. Colour is only ever set alongside a known background. */
html body h1,
html body h2,
html body h3,
html body h4 {
  font-family: var(--dgd-serif);
  font-weight: 600;
}
/* Display scale — fluid, so headings never crowd on small screens */
html body h1 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.1;  letter-spacing: -.02em; }
html body h2 { font-size: clamp(24px, 3.1vw, 36px); line-height: 1.18; letter-spacing: -.015em; }
html body h3 { font-size: clamp(18px, 1.9vw, 22px); line-height: 1.3; }
html body h4 { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.35; }

/* Lead paragraphs read one step up from body copy */
/* Colour omitted for the same reason as the headings above — a lead paragraph
   inside a dark hero must keep inheriting its light colour. */
html body .lead {
  font-size: clamp(16.5px, 1.85vw, 19.5px);
  line-height: 1.66;
}

/* Eyebrow / section tag — small caps label above a heading */
html body .eyebrow,
html body .section-tag,
html body .tag-badge {
  font-size: 12.2px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
}

/* ==========================================================================
   2c. SECTION RHYTHM
   Containers only — never section padding, which each page owns.
   ========================================================================== */
html body .wrap { max-width: var(--dgd-shell); }
html body .narrow { max-width: 860px; }
html body .lead,
html body .sec-head p { max-width: 68ch; }

/* ==========================================================================
   3. ACCESSIBILITY
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--dgd-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Never remove an outline without replacing it */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--dgd-focus);
  outline-offset: 3px;
}

/* ==========================================================================
   4. MOTION — scroll reveal
   Elements opt in with [data-reveal]; global-site.js adds .is-revealed.
   The no-JS and reduced-motion paths both leave content fully visible, so
   nothing can ever be hidden by this system.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.dgd-js [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s var(--dgd-ease-out), transform .6s var(--dgd-ease-out);
    will-change: opacity, transform;
  }
  html.dgd-js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }
  /* staggered children */
  html.dgd-js [data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
  html.dgd-js [data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
  html.dgd-js [data-reveal][data-reveal-delay="3"] { transition-delay: .24s; }
  html.dgd-js [data-reveal][data-reveal-delay="4"] { transition-delay: .32s; }
}

/* ==========================================================================
   5. POLISH LAYER
   --------------------------------------------------------------------------
   Cosmetic properties only — radius, shadow, border colour, transition and
   hover transform. No display / position / width / float, so bespoke page
   layouts stay exactly as they are. `body ` prefixes raise specificity above
   the page-level rules that come later in the document.
   ========================================================================== */

/* ---- Cards ------------------------------------------------------------- */
body .card,
body .faq-item,
body .step,
body .stat,
body .trust-item {
  border-radius: var(--dgd-r-md);
  transition: transform var(--dgd-t) var(--dgd-ease),
              box-shadow var(--dgd-t) var(--dgd-ease),
              border-color var(--dgd-t) var(--dgd-ease);
}
body .card {
  border: 1px solid var(--dgd-line-soft);
  box-shadow: var(--dgd-shadow-sm);
}
body .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dgd-shadow-lg);
  border-color: var(--dgd-gold-mid);
}

/* ---- Buttons ----------------------------------------------------------- */
body .btn,
body .btn-gold,
body .btn-wa,
body .btn-green {
  border-radius: var(--dgd-r-pill);
  font-family: var(--dgd-sans);
  font-weight: 600;
  letter-spacing: .002em;
  transition: transform var(--dgd-t-fast) var(--dgd-ease),
              box-shadow var(--dgd-t-fast) var(--dgd-ease),
              background-color var(--dgd-t-fast) var(--dgd-ease),
              border-color var(--dgd-t-fast) var(--dgd-ease),
              color var(--dgd-t-fast) var(--dgd-ease);
}
body .btn:hover,
body .btn-gold:hover,
body .btn-wa:hover,
body .btn-green:hover {
  transform: translateY(-2px);
  box-shadow: var(--dgd-shadow-md);
}
body .btn:active,
body .btn-gold:active,
body .btn-wa:active,
body .btn-green:active { transform: translateY(0); }

/* ---- Eyebrows and tags ------------------------------------------------- */
body .eyebrow,
body .section-tag,
body .tag,
body .tag-badge,
body .area-tag,
body .area-chip {
  font-family: var(--dgd-sans);
  letter-spacing: .14em;
  border-radius: var(--dgd-r-pill);
}
body .area-chip,
body .area-tag {
  letter-spacing: .01em;
  transition: transform var(--dgd-t-fast) var(--dgd-ease),
              background-color var(--dgd-t-fast) var(--dgd-ease),
              border-color var(--dgd-t-fast) var(--dgd-ease);
}
body .area-chip:hover,
body .area-tag:hover {
  transform: translateY(-2px);
  border-color: var(--dgd-gold);
}

/* ---- Images ------------------------------------------------------------ */
body .card img,
body .split img,
body figure img {
  border-radius: var(--dgd-r-md);
}

/* ---- Forms ------------------------------------------------------------- */
body input[type="text"],
body input[type="tel"],
body input[type="email"],
body input[type="number"],
body input[type="search"],
body select,
body textarea {
  font-family: var(--dgd-sans);
  border-radius: var(--dgd-r-sm);
  transition: border-color var(--dgd-t-fast) var(--dgd-ease),
              box-shadow var(--dgd-t-fast) var(--dgd-ease),
              background-color var(--dgd-t-fast) var(--dgd-ease);
}
body input[type="text"]:hover,
body input[type="tel"]:hover,
body input[type="email"]:hover,
body select:hover,
body textarea:hover { border-color: var(--dgd-gold-mid); }
body input[type="text"]:focus,
body input[type="tel"]:focus,
body input[type="email"]:focus,
body select:focus,
body textarea:focus {
  box-shadow: 0 0 0 4px rgba(196,136,31,.14);
}
body button[type="submit"] {
  font-family: var(--dgd-sans);
  font-weight: 700;
  border-radius: var(--dgd-r-pill);
  transition: transform var(--dgd-t-fast) var(--dgd-ease),
              box-shadow var(--dgd-t-fast) var(--dgd-ease),
              background-color var(--dgd-t-fast) var(--dgd-ease);
}
body button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--dgd-shadow-gold);
}

/* ---- Details / FAQ ----------------------------------------------------- */
body details {
  border-radius: var(--dgd-r-md);
  transition: border-color var(--dgd-t) var(--dgd-ease),
              box-shadow var(--dgd-t) var(--dgd-ease);
}
body details:hover { border-color: var(--dgd-gold-mid); }
body details[open] { box-shadow: var(--dgd-shadow-sm); }
body summary { font-family: var(--dgd-sans); }

/* ---- Section rules ----------------------------------------------------- */
body .rule { border-radius: var(--dgd-r-pill); }

/* ==========================================================================
   5b. PREMIUM COMPONENTS
   --------------------------------------------------------------------------
   Eleven legacy pages share one component vocabulary (.hero, .card, .step,
   .trust-item, .faq-item, .split, .sec-head …), so styling it here upgrades
   all of them at once. `html body` prefixes clear the page-level rules that
   come later in the document.
   ========================================================================== */

/* ---- HERO -------------------------------------------------------------- */
html body .hero {
  position: relative;
  background:
    radial-gradient(88% 70% at 8% 6%, rgba(196,136,31,.26) 0%, transparent 55%),
    radial-gradient(70% 60% at 96% 92%, rgba(20,81,63,.42) 0%, transparent 58%),
    linear-gradient(150deg, #0E2A22 0%, #223026 38%, #3B2C1E 70%, #5C4322 100%);
  padding: clamp(64px, 8vw, 116px) 0 clamp(52px, 6vw, 84px);
  overflow: hidden;
  isolation: isolate;
}
/* Soft focal wash behind the copy */
html body .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 76% at 26% 44%, rgba(255,225,160,.14) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}
/* Decorative blurred orb, bottom-right. Purely ornamental. */
html body .hero::after {
  content: '';
  position: absolute;
  right: -140px;
  bottom: -180px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,136,31,.34) 0%, rgba(196,136,31,0) 68%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}
html body .hero-pattern { opacity: .05; z-index: 0; }
html body .hero > .dgd-container,
html body .hero > .wrap { position: relative; z-index: 2; }

html body .hero-eyebrow {
  background: rgba(255,225,160,.14);
  border: 1px solid rgba(255,225,160,.42);
  color: var(--dgd-gold-contrast);
  border-radius: var(--dgd-r-pill);
  padding: 8px 18px;
  font-size: 12.4px;
  font-weight: 700;
  letter-spacing: .13em;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
html body .hero-title {
  font-family: var(--dgd-serif);
  font-size: clamp(34px, 5.4vw, 62px);
  line-height: 1.07;
  letter-spacing: -.028em;
  color: #FFFDF7;
  font-weight: 600;
  text-shadow: 0 2px 18px rgba(0,0,0,.24);
}
html body .hero-title .accent {
  color: var(--dgd-gold-light);
  font-style: italic;
  font-weight: 500;
}
html body .hero-desc {
  color: rgba(255,253,247,.9);
  font-size: clamp(15.5px, 1.9vw, 18px);
  line-height: 1.74;
}
html body .hero-cta-group .btn,
html body .hero-cta .btn { border-radius: var(--dgd-r-pill); }

/* Stats read as a row of small glass cards rather than bare text */
html body .hero-stats {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: clamp(24px, 3vw, 38px);
  gap: clamp(14px, 2vw, 26px);
}
html body .hero-stats > * {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--dgd-r-md);
  padding: 16px 18px;
  transition: background-color var(--dgd-t) var(--dgd-ease),
              border-color var(--dgd-t) var(--dgd-ease),
              transform var(--dgd-t) var(--dgd-ease);
}
html body .hero-stats > *:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,225,160,.4);
}
html body .hero-stat-num {
  font-family: var(--dgd-serif);
  font-size: clamp(24px, 2.6vw, 31px);
  color: var(--dgd-gold-light);
  font-weight: 600;
  letter-spacing: -.02em;
}
html body .hero-stat-label {
  font-size: 12.6px;
  line-height: 1.5;
  color: rgba(255,253,247,.84);
}
html body .hero-badge-inner {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.19);
  border-radius: var(--dgd-r-lg);
  box-shadow: 0 22px 54px rgba(0,0,0,.3);
  backdrop-filter: blur(10px);
}
html body .hero-badge-title {
  font-family: var(--dgd-serif);
  color: var(--dgd-gold-light);
  font-weight: 600;
}

/* Hero photograph — framed, not floating */
html body .dgd-campaign-hero {
  border-radius: var(--dgd-r-lg);
  overflow: hidden;
  box-shadow: 0 28px 68px rgba(0,0,0,.36);
  border: 1px solid rgba(255,255,255,.16);
}
html body .dgd-campaign-hero img { transition: transform .7s var(--dgd-ease-out); }
@media (prefers-reduced-motion: no-preference) {
  html body .dgd-campaign-hero:hover img { transform: scale(1.04); }
}

/* ==========================================================================
   5c. THE HERO SYSTEM  (.dgd-hero)
   --------------------------------------------------------------------------
   A structural rebuild, not a restyle. One composition language shared by every
   hero and banner on the site:

     · asymmetric grid — copy on a 1.05fr column, visual on 0.95fr, never 50/50
     · the visual sits in an ORGANIC MASK (multi-value border-radius), not a
       rounded rectangle, with a counter-rotated shape layered behind it
     · decorative field behind everything: two blurred orbs, a thin arc ring
       and a paw-print motif, all aria-hidden and pointer-events:none
     · glass cards float over the visual's edges
     · a pulsing dot in the eyebrow, an italic display accent in the headline

   Page-level `.hero` rules load after this file, so every selector here is
   prefixed `html body` to win the cascade.
   ========================================================================== */

/* Every hero and banner on the site sits on a dark gradient, so the hero
   declares a light INHERITED colour. Four legacy heroes never set one, which
   left their headings inheriting the dark body ink once the blanket heading
   colour was removed. Any page rule that sets its own colour still wins —
   this is only the default for descendants that declare nothing. */
html body .dgd-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(52px, 6.5vw, 104px) 0 clamp(56px, 7vw, 112px);
  color: var(--dgd-cream);
}

/* ---- decorative field -------------------------------------------------- */
html body .dgd-hero__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
html body .dgd-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
}
/* Alpha reduced from .30/.50 to .13/.22, and orb A pushed further off-canvas.
   At the old strength the gold glow lifted the background luminance directly
   behind the eyebrow and meta line, cutting their contrast to roughly 3:1.
   Decoration must never eat into a text element's contrast budget. */
html body .dgd-hero__orb--a {
  width: clamp(280px, 34vw, 560px);
  aspect-ratio: 1;
  top: -32%;
  left: -18%;
  background: radial-gradient(circle, rgba(196,136,31,.13) 0%, rgba(196,136,31,0) 70%);
}
html body .dgd-hero__orb--b {
  width: clamp(240px, 30vw, 500px);
  aspect-ratio: 1;
  right: -12%;
  bottom: -26%;
  background: radial-gradient(circle, rgba(20,81,63,.22) 0%, rgba(20,81,63,0) 70%);
}
/* Thin arc, off-centre — a quiet geometric counterpoint to the organic mask */
/* Offset high and outboard rather than concentric with the photograph —
   centred rings read as a target behind the subject. */
html body .dgd-hero__ring {
  position: absolute;
  top: -22%;
  right: -14%;
  width: clamp(360px, 42vw, 680px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,225,160,.14);
  border-radius: 50%;
}
html body .dgd-hero__ring::after {
  content: '';
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255,225,160,.09);
  border-radius: 50%;
}
/* Paw-print motif, drawn as a repeating CSS mask so it needs no image file */
html body .dgd-hero__paws {
  position: absolute;
  left: 3%;
  bottom: 6%;
  width: clamp(150px, 20vw, 280px);
  height: clamp(110px, 14vw, 200px);
  opacity: .16;
  background-repeat: no-repeat;
  background-size: 34% 34%, 26% 26%, 20% 20%;
  background-position: 0% 100%, 46% 40%, 84% 0%;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23F4C86A'%3E%3Cellipse cx='32' cy='42' rx='15' ry='13'/%3E%3Cellipse cx='13' cy='24' rx='7' ry='9'/%3E%3Cellipse cx='26' cy='14' rx='7' ry='10'/%3E%3Cellipse cx='42' cy='14' rx='7' ry='10'/%3E%3Cellipse cx='54' cy='25' rx='7' ry='9'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23F4C86A'%3E%3Cellipse cx='32' cy='42' rx='15' ry='13'/%3E%3Cellipse cx='13' cy='24' rx='7' ry='9'/%3E%3Cellipse cx='26' cy='14' rx='7' ry='10'/%3E%3Cellipse cx='42' cy='14' rx='7' ry='10'/%3E%3Cellipse cx='54' cy='25' rx='7' ry='9'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23F4C86A'%3E%3Cellipse cx='32' cy='42' rx='15' ry='13'/%3E%3Cellipse cx='13' cy='24' rx='7' ry='9'/%3E%3Cellipse cx='26' cy='14' rx='7' ry='10'/%3E%3Cellipse cx='42' cy='14' rx='7' ry='10'/%3E%3Cellipse cx='54' cy='25' rx='7' ry='9'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- asymmetric grid --------------------------------------------------- */
html body .dgd-hero__grid { position: relative; z-index: 2; }
@media (min-width: 1024px) {
  html body .dgd-hero__grid {
    display: grid;
    /* 1.22fr : 1fr = 55% copy / 45% visual. image-system.css repeats this
       ratio for `.hero > .dgd-container.dgd-home-hero-grid`, which loads later
       and outranks this rule — the two are kept in step deliberately. */
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(40px, 4vw, 64px);
  }
}

/* ---- SPLIT: the photograph is the hero -----------------------------------
   Previously the frame was capped at 760px and centred inside a much wider
   column, so it read as a small oval marooned in empty space. It now runs
   FULL BLEED to the right edge of the viewport and fills the hero's height,
   the way a premium pet-brand hero should. */
/* ---- SPLIT: contained, evenly inset visual -------------------------------
   The full-bleed treatment made the photograph dominate the section. It is now
   a contained frame occupying ~44% of the hero width, held clear of the hero's
   top, bottom and right edges by the SAME inset so the spacing reads even. */
@media (min-width: 1024px) {
  html body .dgd-hero--split { padding-block: clamp(52px, 5.6vw, 88px); }

  html body .dgd-hero--split .dgd-hero__visual {
    /* equal breathing room on all three outer sides */
    --dgd-hero-inset: clamp(20px, 2.4vw, 40px);
    max-width: 560px;
    margin: 0 0 0 auto;
    padding: 0 var(--dgd-hero-inset) 0 0;
    align-self: center;
  }
  html body .dgd-hero--split .dgd-hero__media {
    /* 4:3 trims 25% of the 16:9 source — 12.5% a side. The earlier near-square
       frame trimmed 22.5% a side and still held both people and the dog, so
       this sits comfortably inside the safe margin while giving the column
       more height than a 16:9 letterbox would. */
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    min-height: 0;
    /* mask scaled down in proportion with the smaller frame */
    border-radius: 44% 56% 50% 50% / 52% 46% 54% 48%;
    box-shadow: 0 26px 64px rgba(0,0,0,.38);
  }
  /* Counter-shapes return at the smaller scale, tight to the mask */
  html body .dgd-hero--split .dgd-hero__blob {
    display: block;
    inset: -3% calc(var(--dgd-hero-inset) - 10px) -3% -3%;
  }
  html body .dgd-hero--split .dgd-hero__blob--back {
    display: block;
    inset: -9% calc(var(--dgd-hero-inset) - 22px) -9% -9%;
  }

  /* WhatsApp card at the bottom-left of the frame, over the floor/rug region
     of the photograph — clear of both people and the dog. */
  /* Outward offsets stay inside the column gap (36px at 1024px) so a card can
     never reach into the copy. */
  html body .dgd-hero--split .dgd-hero__float--wa {
    left: clamp(-32px, -2vw, -12px);
    right: auto;
    top: auto;
    bottom: clamp(-12px, -0.8vw, 0px);
  }
  /* Support card at the top-left, over the plain wall area, so the two cards
     sit on the same edge without crowding each other. */
  html body .dgd-hero--split .dgd-hero__float--support {
    left: clamp(-32px, -2vw, -12px);
    right: auto;
    bottom: auto;
    top: clamp(-14px, -0.9vw, 0px);
    max-width: 228px;
  }
}
html body .dgd-hero__copy { position: relative; z-index: 3; max-width: 640px; }

/* ---- eyebrow with live dot --------------------------------------------- */
html body .dgd-hero .hero-eyebrow { gap: 10px; }
html body .dgd-hero__pulse {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74,222,128,.65);
}
@media (prefers-reduced-motion: no-preference) {
  html body .dgd-hero__pulse { animation: dgd-pulse 2.4s var(--dgd-ease) infinite; }
}
@keyframes dgd-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* ---- CTAs -------------------------------------------------------------- */
html body .dgd-hero .hero-cta-group {
  gap: 14px;
  align-items: center;
  margin-bottom: clamp(30px, 4vw, 52px);
}
html body .dgd-hero .hero-cta-group .btn {
  border-radius: var(--dgd-r-pill);
  padding: 15px 30px;
  font-weight: 700;
  letter-spacing: .002em;
  transition: transform var(--dgd-t-fast) var(--dgd-ease),
              box-shadow var(--dgd-t-fast) var(--dgd-ease),
              background-color var(--dgd-t-fast) var(--dgd-ease);
}
@media (prefers-reduced-motion: no-preference) {
  html body .dgd-hero .hero-cta-group .btn:hover { transform: translateY(-3px); }
}
html body .dgd-hero .hero-cta-group .btn-primary:hover { box-shadow: var(--dgd-shadow-gold); }
html body .dgd-hero .hero-cta-group .btn-wa:hover { box-shadow: 0 10px 30px rgba(15,143,67,.36); }

/* ---- stat strip -------------------------------------------------------- */
html body .dgd-hero .hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 34px);
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: clamp(22px, 3vw, 34px);
}
html body .dgd-hero .hero-stats > * {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  position: relative;
  flex: 1 1 132px;
  min-width: 0;
}
html body .dgd-hero .hero-stats > * + *::before {
  content: '';
  position: absolute;
  left: clamp(-17px, -1.2vw, -7px);
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(255,255,255,.14);
}

/* ---- visual cluster ---------------------------------------------------- */
html body .dgd-hero__visual {
  position: relative;
  z-index: 2;
  margin-top: clamp(40px, 5vw, 0px);
  /* Caps the frame on very wide screens so the photo never balloons past a
     comfortable reading composition at 1920px and above. */
  max-width: 760px;
  margin-inline: auto;
}
/* THE organic mask.
   The source photograph is 1600x900 (16:9). A 1:1 frame discarded ~44% of its
   width, which cut one of the two people out of shot entirely. The frame is
   now 16:10, so only ~10% of the width is trimmed — roughly 5% from each side.
   Both people, the dog and all faces stay in frame at every breakpoint.
   The radii are also gentler than before: aggressive corner values combined
   with a tight crop were clipping the subjects at the edges. */
html body .dgd-hero__media {
  position: relative;
  z-index: 2;
  border: 0;
  border-radius: 46% 54% 50% 50% / 50% 46% 54% 50%;
  overflow: hidden;
  box-shadow: 0 34px 80px rgba(0,0,0,.42);
  aspect-ratio: 16 / 10;
}
html body .dgd-hero__media picture,
html body .dgd-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
/* Counter-shapes behind the photo, rotated the other way. The insets are
   measured from .dgd-hero__visual, which now carries padding, so small
   positive values still let them peek out around the mask. */
html body .dgd-hero__blob {
  position: absolute;
  inset: 1.5% 0.5% 0% 1.5%;
  z-index: 1;
  border-radius: 42% 58% 55% 45% / 55% 45% 55% 45%;
  background: linear-gradient(150deg, rgba(239,200,118,.5) 0%, rgba(196,136,31,.16) 55%, rgba(20,81,63,.32) 100%);
  filter: blur(1px);
}
html body .dgd-hero__blob--back {
  inset: -6% -7% -7% -6%;
  z-index: 0;
  border-radius: 52% 48% 40% 60% / 44% 58% 42% 56%;
  background: linear-gradient(210deg, rgba(255,225,160,.16) 0%, rgba(255,225,160,0) 62%);
  border: 1px solid rgba(255,225,160,.2);
  filter: none;
}

/* ---- floating glass cards ---------------------------------------------- */
html body .dgd-hero__float {
  position: absolute;
  z-index: 4;
  background: rgba(28,34,28,.5);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--dgd-r-lg);
  box-shadow: 0 22px 52px rgba(0,0,0,.36);
  backdrop-filter: blur(16px) saturate(150%);
  color: #FFFDF7;
}
/* Both cards are anchored to the OUTER edges of the container and sit mostly
   beyond the mask silhouette, so neither can cover a face, the dog or the
   main subject — they only ever overlap the soft transparent corner of the
   blob. The support card takes the lower-left, which is floor/rug in the
   photograph; the WhatsApp card takes the upper-right shoulder of the frame,
   clear of the people. */
html body .dgd-hero__float--support {
  display: block;
  left: clamp(-52px, -3.4vw, -12px);
  bottom: clamp(-18px, -1vw, 0px);
  max-width: 250px;
}
html body .dgd-hero__float--support .hero-badge-inner {
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 20px 22px;
  width: auto;
  text-align: left;
}
html body .dgd-hero__float--support .hero-badge-icon { font-size: 34px; margin-bottom: 8px; }

html body .dgd-hero__float--wa {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px 13px 15px;
  /* pushed outward and lifted above the frame's top edge, so it clears the
     people rather than sitting across them */
  right: clamp(-46px, -2.8vw, -10px);
  top: clamp(-14px, -1vw, 0px);
}
html body .dgd-hero__float-ico {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #2ADE72 0%, var(--dgd-wa) 100%);
  box-shadow: 0 6px 16px rgba(15,143,67,.4);
}
html body .dgd-hero__float-ico svg { width: 21px; height: 21px; fill: var(--dgd-wa-ink); }
html body .dgd-hero__float-body { display: block; min-width: 0; }
html body .dgd-hero__float--wa .hero-stat-num {
  display: block;
  font-size: 19px;
  line-height: 1.1;
}
html body .dgd-hero__float--wa .hero-stat-label {
  display: block;
  font-size: 12px;
  margin-top: 2px;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  html body .dgd-hero__float { animation: dgd-float 7s var(--dgd-ease) infinite; }
  html body .dgd-hero__float--wa { animation-delay: -3.5s; }
}
@keyframes dgd-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1023px) {
  /* Tablet: the visual centres and keeps generous margin on both sides */
  html body .dgd-hero__visual {
    max-width: 620px;
    margin-inline: auto;
    padding: clamp(14px, 3vw, 30px);
  }
  html body .dgd-hero__ring { display: none; }
}
@media (max-width: 780px) {
  /* Cards move inboard slightly so they cannot hang off a narrow viewport */
  html body .dgd-hero__float--support { left: 0; bottom: 0; }
  html body .dgd-hero__float--wa { right: 0; top: 0; }
}
@media (max-width: 620px) {
  /* Floats would crowd a phone screen, so they return to normal flow as
     stacked cards. Nothing is hidden — every element stays on the page. */
  html body .dgd-hero__visual { max-width: none; padding: 0; }
  /* 16:10 keeps the same framing as desktop, so the subjects are never
     cropped differently between breakpoints. */
  html body .dgd-hero__media { aspect-ratio: 16 / 10; border-radius: var(--dgd-r-lg); }
  html body .dgd-hero__blob,
  html body .dgd-hero__blob--back { display: none; }
  html body .dgd-hero__float {
    position: static;
    animation: none;
    margin-top: 14px;
    max-width: none;
    width: 100%;
  }
  html body .dgd-hero__float--wa { justify-content: flex-start; }
  html body .dgd-hero .hero-cta-group .btn { width: 100%; }
  html body .dgd-hero .hero-stats > * + *::before { display: none; }
}

/* ==========================================================================
   5d. HERO VARIANTS
   One design language, three compositions:
     --split  homepage — asymmetric copy + organic-masked visual + floats
     --stage  inner pages — offset accent panel behind left-aligned copy
     --doc    legal pages — compact banner with a gold rule and quiet decor
   ========================================================================== */

/* ---- STAGE: service, location, about, contact --------------------------- */
html body .dgd-hero--stage {
  padding: clamp(48px, 5.5vw, 88px) 0 clamp(44px, 5vw, 76px);
}
/* Angled accent plane sliding in from the right, behind the copy */
html body .dgd-hero--stage::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: -18%;
  right: -12%;
  width: clamp(320px, 46vw, 760px);
  height: 150%;
  /* kept faint so it never sits under the copy column's contrast budget */
  background: linear-gradient(212deg, rgba(255,225,160,.07) 0%, rgba(255,225,160,0) 58%);
  border-left: 1px solid rgba(255,225,160,.14);
  transform: skewX(-11deg);
  transform-origin: top right;
  pointer-events: none;
}
/* Everything the page already had stays above the decorative field */
html body .dgd-hero--stage > *:not(.dgd-hero__decor) { position: relative; z-index: 2; }
html body .dgd-hero--stage .dgd-hero__paws { opacity: .12; }
html body .dgd-hero--stage .dgd-hero__ring { right: -6%; opacity: .7; }

/* ---- DOC: legal pages --------------------------------------------------- */
html body .dgd-hero--doc {
  padding: clamp(48px, 5.5vw, 82px) 0 clamp(42px, 5vw, 68px);
}
html body .dgd-hero--doc > *:not(.dgd-hero__decor) { position: relative; z-index: 2; }
html body .dgd-hero--doc .dgd-hero__ring,
html body .dgd-hero--doc .dgd-hero__paws { display: none; }
html body .dgd-hero--doc .dgd-hero__orb--a { width: clamp(240px, 26vw, 420px); top: -24%; }
html body .dgd-hero--doc .dgd-hero__orb--b { width: clamp(200px, 22vw, 360px); }
/* Gold rule along the base, echoing the footer's top hairline */
html body .dgd-hero--doc::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dgd-gold) 0%, var(--dgd-gold-light) 42%, rgba(20,81,63,0) 100%);
  z-index: 2;
}

/* The decorative field must never sit above real content */
html body .dgd-hero__decor { z-index: 0; }

/* ---- TRUST BAR --------------------------------------------------------- */
html body .trust-bar {
  background: linear-gradient(90deg, var(--dgd-forest-deep) 0%, var(--dgd-forest) 100%);
  border-block: 1px solid rgba(255,255,255,.08);
}
html body .trust-item {
  border-radius: var(--dgd-r-md);
  transition: transform var(--dgd-t) var(--dgd-ease);
}
@media (prefers-reduced-motion: no-preference) {
  html body .trust-item:hover { transform: translateY(-3px); }
}
html body .trust-icon {
  border-radius: var(--dgd-r-md);
  background: rgba(255,225,160,.14);
  color: var(--dgd-gold-light);
}

/* ---- SECTION HEADS ----------------------------------------------------- */
html body .sec-head,
html body .section-head { margin-bottom: clamp(28px, 3.4vw, 48px); }
html body .section-title { letter-spacing: -.018em; }
/* Section sub-headings appear on both light and dark sections, so they keep
   inheriting rather than being forced to a dark ink. */

/* ---- CARDS ------------------------------------------------------------- */
/* No background or border shorthand here: several pages use translucent
   "glass" cards on dark sections, and forcing an opaque light surface would
   wreck them. Only radius, elevation and motion are imposed; each page keeps
   its own surface. border-color on hover is a no-op where there is no border. */
html body .card {
  border-radius: var(--dgd-r-lg);
  position: relative;
  overflow: hidden;
}
/* Gold rule that wipes in across the top edge on hover */
html body .card::after {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--dgd-gold) 0%, var(--dgd-gold-light) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s var(--dgd-ease-out);
  pointer-events: none;
}
html body .card:hover::after { transform: scaleX(1); }
html body .card:hover {
  border-color: var(--dgd-gold-mid);
  box-shadow: var(--dgd-shadow-lg);
}
html body .card-icon,
html body .card .ic {
  border-radius: var(--dgd-r-md);
  background: linear-gradient(145deg, var(--dgd-gold-pale) 0%, var(--dgd-beige) 100%);
  color: var(--dgd-gold-dark);
  transition: transform var(--dgd-t) var(--dgd-ease);
}
@media (prefers-reduced-motion: no-preference) {
  html body .card:hover .card-icon,
  html body .card:hover .ic { transform: scale(1.06) rotate(-3deg); }
}

/* ---- PROCESS / STEPS --------------------------------------------------- */
html body .step { border-radius: var(--dgd-r-lg); }
html body .step:hover { border-color: var(--dgd-gold-mid); }
html body .step .num,
html body .steps .num {
  background: linear-gradient(145deg, var(--dgd-forest) 0%, var(--dgd-forest-deep) 100%);
  color: #FFFDF7;
  border-radius: var(--dgd-r-pill);
  font-family: var(--dgd-serif);
  font-weight: 600;
  box-shadow: var(--dgd-shadow-forest);
}

/* ---- STATS ------------------------------------------------------------- */
html body .stat { border-radius: var(--dgd-r-lg); }
html body .stat:hover { border-color: var(--dgd-gold-mid); }

/* ---- SPLIT / PANEL ----------------------------------------------------- */
html body .split img,
html body .panel {
  border-radius: var(--dgd-r-lg);
}
html body .split img { box-shadow: var(--dgd-shadow-lg); }

/* ---- FAQ --------------------------------------------------------------- */
html body .faq-item {
  border-radius: var(--dgd-r-md);
  transition: border-color var(--dgd-t) var(--dgd-ease),
              box-shadow var(--dgd-t) var(--dgd-ease);
}
html body .faq-item:hover { border-color: var(--dgd-gold-mid); }
html body .faq-q {
  font-family: var(--dgd-sans);
  font-weight: 600;
  color: var(--dgd-ink);
}
html body .faq-arrow { color: var(--dgd-forest); transition: transform var(--dgd-t) var(--dgd-ease); }
html body .faq-a,
html body .faq-body { color: var(--dgd-ink-2); }

/* ---- CHECKLIST / NOTES ------------------------------------------------- */
html body .checklist li { padding-block: 5px; }
html body .note-label {
  border-radius: var(--dgd-r-pill);
  font-weight: 700;
  letter-spacing: .08em;
}

/* ==========================================================================
   6. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body .card:hover,
  body .btn:hover,
  body .btn-gold:hover,
  body .btn-wa:hover,
  body .btn-green:hover,
  body .area-chip:hover,
  body .area-tag:hover,
  body button[type="submit"]:hover,
  html body .trust-item:hover,
  html body .dgd-campaign-hero:hover img,
  html body .card:hover .card-icon,
  html body .card:hover .ic { transform: none; }
  /* the card top-rule wipe becomes a plain state change, not an animation */
  html body .card::after { transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
