/**
 * DesignCoreHub — header & footer chrome.
 *
 * Elementor controls cover layout, colour, spacing and typography for these two
 * templates. This file only adds what no control can express:
 *   - backdrop blur on the floating nav pill + its scrolled state
 *   - the animated glow ring / shimmer gradient text
 *   - the breathing orb, scanline texture and glow divider in the footer CTA
 *   - pulse dots and hover micro-interactions
 * Everything is scoped to .dch-* classes set on the widgets, so nothing here
 * leaks into page content.
 */

/* ══ HEADER ═══════════════════════════════════════════════════════ */

.dch-header-band {
  /* The band is transparent; the pill inside it carries the surface. */
  background: transparent !important;
  pointer-events: none;
}
.dch-header-band > .e-con-inner,
.dch-header-band > .elementor-widget-wrap {
  pointer-events: none;
}
.dch-pill,
.dch-header-band .elementor-element {
  pointer-events: auto;
}

.dch-pill {
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  transition: background-color .5s ease, box-shadow .5s ease, border-color .5s ease;
}

/* Elementor adds .elementor-sticky--effects once the sticky offset is passed —
   that is the design's `scrolled` state. */
.dch-header-band.elementor-sticky--effects .dch-pill,
.elementor-sticky--effects .dch-pill {
  background-color: rgba(6, 10, 7, .96) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(52, 211, 153, .08) !important;
}

/* Brand lockup.
   The mark is an SVG, which Elementor's image pipeline cannot render (WordPress
   refuses to downsize non-raster attachments and swaps in placeholder.png), so
   it is drawn here as a background on the brand heading instead. */
.dch-brand .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.dch-brand .elementor-heading-title::before {
  content: '';
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  background: url('/wp-content/uploads/2026/09/designcorehub-logo.svg') center/contain no-repeat;
  transition: filter .3s ease;
}
.dch-brand:hover .elementor-heading-title::before {
  filter: drop-shadow(0 0 10px rgba(16, 185, 129, .7));
}
.dch-brand .dch-accent { color: #6EE7B7; }
.dch-brand .dch-dim { opacity: .6; }

/* Footer brand mark sits slightly larger, matching the design. */
.dch-brand-col .dch-brand .elementor-heading-title::before {
  width: 36px;
  height: 36px;
}

/* Availability badge */
.dch-badge .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(16, 185, 129, .08);
  border: 1px solid rgba(16, 185, 129, .2);
  white-space: nowrap;
}
.dch-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 6px rgba(52, 211, 153, .7);
  flex: 0 0 auto;
  animation: dch-status-pulse 2.2s ease-in-out infinite;
}
@keyframes dch-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); }
  50%      { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0); }
}

/* Divider between Sign in and the CTA */
.dch-signin .elementor-button {
  position: relative;
}
.dch-signin::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: rgba(52, 211, 153, .15);
}

/* Elementor widgets are flex children of .dch-actions and default to
   `flex: 0 1 auto`, so they shrink below their own text width and the labels
   wrap onto two lines inside a 60px pill. Pin them to their content. */
.dch-actions > .elementor-element {
  flex: 0 0 auto;
}
.dch-actions .elementor-button {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dch-nav-wrap { min-width: 0; }

/* Glow ring — animated gradient border on the primary CTAs.
   The ::before sits behind the button, so the button itself must paint an
   opaque background over it; without `overflow: hidden` on the wrapper the
   gradient also bleeds past the rounded corners. */
.glow-ring .elementor-button {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .22s ease;
}
/* overflow:hidden (needed by the ::before ring mask) clips the button's own
   glow, so the drop shadow is painted by the widget wrapper instead. */
.glow-ring.elementor-widget-button {
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(16, 185, 129, .38);
  transition: box-shadow .22s ease, transform .18s ease;
}
.glow-ring.elementor-widget-button:hover {
  box-shadow: 0 6px 28px rgba(16, 185, 129, .55);
  transform: translateY(-1px);
}
/* The wrapper now carries the lift, so the inner button must not double it. */
.glow-ring.elementor-widget-button .elementor-button:hover { transform: none; }
.glow-ring .elementor-button:active { transform: translateY(0); }
.glow-ring .elementor-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, #0F9E6E, #6EE7B7, #051209, #0F9E6E);
  background-size: 300% 300%;
  animation: dch-border-rotate 4s ease infinite;
  /* Mask to a ring so the gradient only paints the border, not the face. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.glow-ring .elementor-button:hover { transform: translateY(-1px); }
.glow-ring .elementor-button:active { transform: translateY(0); }
@keyframes dch-border-rotate {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Nav items + burger dropdown panel */
.dch-nav .elementor-item { transition: color .15s ease, background-color .15s ease; }
.dch-nav .elementor-nav-menu--dropdown {
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  background-color: rgba(6, 10, 7, .97) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.dch-nav .elementor-menu-toggle { transition: background-color .2s ease, color .2s ease; }

/* ══ FOOTER ═══════════════════════════════════════════════════════ */

.dch-eyebrow .elementor-heading-title {
  text-transform: uppercase;
}

/* Newsletter strip — subtle emerald wash over the base colour */
.dch-newsletter {
  background-image: linear-gradient(135deg, rgba(16, 185, 129, .06) 0%, rgba(110, 231, 183, .03) 100%);
}
.dch-nl-form .elementor-field-group { gap: 8px; }
.dch-nl-form input[type="email"] {
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dch-nl-form input[type="email"]:focus {
  outline: none;
  border-color: rgba(16, 185, 129, .65) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}
.dch-nl-form .elementor-button {
  background: linear-gradient(135deg, #0F9E6E 0%, #10B981 100%) !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, .38);
  transition: box-shadow .22s ease, transform .18s ease;
}
.dch-nl-form .elementor-button:hover {
  box-shadow: 0 6px 28px rgba(16, 185, 129, .55);
  transform: translateY(-1px);
}

/* CTA band — conic + radial mesh, breathing orb, scanlines */
.dch-cta-band {
  position: relative;
  background-image:
    conic-gradient(from 200deg at 80% 30%, rgba(16, 185, 129, .1) 0deg, transparent 80deg, transparent 280deg, rgba(110, 231, 183, .06) 360deg),
    radial-gradient(ellipse 75% 60% at 60% 40%, rgba(16, 185, 129, .12) 0%, transparent 55%) !important;
}
.dch-cta-band::before {
  /* Breathing orb */
  content: '';
  position: absolute;
  top: -30%;
  right: -8%;
  width: 700px;
  height: 700px;
  max-width: 90vw;
  max-height: 90vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, .18) 0%, transparent 70%);
  filter: blur(60px);
  opacity: .4;
  pointer-events: none;
  animation: dch-breathe 7s ease-in-out infinite;
  z-index: 0;
}
.dch-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(16, 185, 129, .012) 3px, rgba(16, 185, 129, .012) 4px);
  pointer-events: none;
  z-index: 1;
}
@keyframes dch-breathe {
  0%, 100% { opacity: .4; transform: scale(1); }
  50%      { opacity: .62; transform: scale(1.1); }
}
.dch-cta-inner { position: relative; z-index: 2; }

/* Animated shimmer on the CTA headline accent (the footer's bare span).
   Not on Elementor widget roots: those headings carry dch-luxury as a marker
   and gradient only their LAST line(s) through element CSS. Painting the whole
   widget made the root's transparent -webkit-text-fill-color inherit into every
   line, and its background-clip:text leaked through descenders below the
   line clips, so the plain lines showed the shimmer. */
.dch-luxury:not(.elementor-widget) {
  background: linear-gradient(110deg, #0F9E6E 0%, #6EE7B7 30%, #ffffff 50%, #34D399 70%, #0F9E6E 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: dch-shimmer 7s linear infinite;
}
@keyframes dch-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.dch-cta-title .elementor-heading-title { text-shadow: 0 0 60px rgba(110, 231, 183, .22), 0 0 120px rgba(16, 185, 129, .12); }

/* Glowing divider between the CTA band and the link grid */
.dch-links-wrap { position: relative; }
.dch-links-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, .55) 25%, rgba(110, 231, 183, .9) 50%, rgba(16, 185, 129, .55) 75%, transparent 100%);
  box-shadow: 0 0 10px rgba(16, 185, 129, .45), 0 0 30px rgba(16, 185, 129, .18), 0 0 60px rgba(16, 185, 129, .08);
}

/* Footer link grid.
   The design is a 5-column grid (300px brand + 4 equal link columns), which a
   wrapping flex row cannot express — any fixed basis either wraps or forces
   two-word labels to break. Drive the row with CSS Grid instead and let the
   container's own flex settings apply only below the tablet breakpoint. */
@media (min-width: 1025px) {
  .dch-link-grid > .e-con-inner,
  .dch-link-grid {
    display: grid !important;
    grid-template-columns: 300px repeat(4, 1fr);
    gap: 32px;
    align-items: start;
  }
  .dch-link-grid > .e-con-inner > .elementor-element,
  .dch-link-grid > .elementor-element {
    width: auto !important;
    max-width: none !important;
  }
}
.dch-link-col .elementor-nav-menu .elementor-item { white-space: nowrap; }

/* Footer link columns + hover */
.dch-footer-menu .elementor-item {
  padding: 0 !important;
  transition: color .15s ease;
}
.dch-footer-menu .elementor-nav-menu--main .elementor-item:hover { background: transparent !important; }
.dch-legal-menu .elementor-item { padding: 0 !important; transition: color .15s ease; }
.dch-legal-menu .elementor-nav-menu--main .elementor-item:hover { background: transparent !important; }

.dch-status .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Bottom bar: legal links and back-to-top share one row. */
.dch-bottom-right {
  flex-wrap: nowrap !important;
}
.dch-bottom-right > .elementor-element { flex: 0 0 auto; }
.dch-backtotop .elementor-button { white-space: nowrap; padding: 0; }
.dch-legal-menu .elementor-nav-menu { flex-wrap: nowrap; }

.dch-socials .elementor-social-icon { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.dch-backtotop .elementor-button { transition: color .2s ease; }

/* ══ RESPONSIVE ═══════════════════════════════════════════════════ */

/* Laptop — tighten the pill, keep the full horizontal menu. */
@media (max-width: 1366px) {
  .dch-badge { display: none !important; }
}

/* Tablet & below — Elementor swaps the nav to the burger dropdown at 1024px
   (nav-menu `dropdown: tablet`). The toggle lives INSIDE .dch-nav-wrap, so the
   wrapper must stay visible; hide only the horizontal menu list, and let the
   wrapper shrink to the toggle instead of eating the row. */
@media (max-width: 1024px) {
  /* Order across the pill: brand (left) … CTA + burger (right). The nav wrapper
     stops growing so it no longer pushes the actions into the middle. */
  .dch-pill > .e-con-inner,
  .dch-pill {
    justify-content: space-between !important;
  }
  .dch-pill .dch-brand-group { order: 1; }
  .dch-pill .dch-actions     { order: 2; margin-left: auto; gap: 8px; }
  .dch-nav-wrap {
    order: 3;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    width: auto !important;
  }
  .dch-nav .elementor-nav-menu--main:not(.elementor-nav-menu__container) { display: none !important; }
  .dch-nav .elementor-menu-toggle { display: flex !important; }
  .dch-signin::after { display: none; }
  .dch-brand-col { width: 100% !important; }
  /* Newsletter: stack the copy and the form so the field never overflows. */
  .dch-newsletter { flex-direction: column !important; align-items: flex-start !important; }
  .dch-nl-form { width: 100% !important; max-width: 420px !important; }
  .dch-nl-form .elementor-form { flex-wrap: nowrap; }
}

@media (max-width: 767px) {
  /* Keep the pill a single 56px row: brand left, CTA + burger right.
     The container's mobile flex-direction is column, so the row must be
     re-declared here or the three groups stack. */
  .dch-pill > .e-con-inner,
  .dch-pill {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .dch-pill { min-height: 56px; }
  .dch-pill .dch-brand-group {
    order: 1;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0;
  }
  .dch-brand .elementor-heading-title { font-size: 17px; }
  .dch-brand .elementor-heading-title::before { width: 28px; height: 28px; }
  .dch-pill .dch-actions {
    order: 2;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: 0;
  }
  .dch-pill .dch-nav-wrap { order: 3; }
  /* The CTA label is too wide for a 390px pill — the burger carries the menu. */
  .dch-cta { display: none !important; }
  .dch-newsletter { padding-left: 20px; padding-right: 20px; }
  .dch-nl-form { max-width: 100% !important; }
  /* Stack the email field above the Subscribe button on small screens. */
  .dch-nl-form .elementor-field-group { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
  .dch-bottom-right { flex-wrap: wrap !important; }
  .dch-cta-band::before { width: 420px; height: 420px; }
  .dch-link-col { width: 100% !important; flex: 0 0 100% !important; }
  .dch-bottom-bar { text-align: center; }
  .dch-bottom-right { justify-content: center; width: 100%; }
  .dch-nl-form { width: 100%; }
}

/* Respect reduced-motion: kill the ambient loops, keep the interactions. */
@media (prefers-reduced-motion: reduce) {
  .dch-dot,
  .dch-cta-band::before,
  .dch-luxury,
  .glow-ring .elementor-button::before {
    animation: none !important;
  }
}

/* Burger dropdown panel.
   Elementor anchors the dropdown to the toggle's own (narrow) widget box, which
   yields a ~97px strip hanging off the right edge. Re-anchor it to the pill so
   it reads as a full-width panel, matching the design's mobile sheet. */
.dch-pill { position: relative; }
.dch-nav .elementor-nav-menu--dropdown {
  position: absolute !important;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  width: auto !important;
  max-width: none !important;
  border-radius: 16px;
  padding: 8px;
  background: #0B120E !important;
  border: 1px solid rgba(52, 211, 153, .18);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .65);
  z-index: 60;
}
.dch-nav .elementor-nav-menu--dropdown .elementor-nav-menu,
.dch-nav .elementor-nav-menu--dropdown li {
  background: transparent !important;
}
.dch-nav .elementor-nav-menu--dropdown a.elementor-item {
  border-radius: 10px;
  padding: 12px 14px !important;
  font-size: 15px;
}
/* The toggle's own container must not clip the absolutely-positioned panel. */
.dch-nav-wrap, .dch-nav { position: static !important; }

/* Header shell.
   The header band is fixed by Elementor Pro's own sticky effect (`sticky: top`
   in the BuildPlan), which writes `position: fixed; top: 0` inline and inserts
   an .elementor-sticky__spacer to preserve the document height. So the theme
   must NOT fix the wrapper or pad the body as well — that double-counts the
   offset. Only the click-through gutter is handled here. */
.elementor-location-header { pointer-events: none; }
.elementor-location-header .dch-pill,
.elementor-location-header .elementor-nav-menu--dropdown { pointer-events: auto; }

/* ---------------------------------------------------------------------------
   WP admin bar offset.

   Generated by Design Core's generateScopedCss() `sticky` effect — keep in sync
   with src/creation/css-generator.mjs rather than hand-editing.

   For logged-in users the admin bar is fixed at the top of the viewport, so a
   sticky header pinned to `top: 0` renders underneath it. Elementor Pro's
   sticky effect writes `top: 0px` inline, so the offset needs !important.

   32px above 782px, 46px at/below it; under 600px the bar is position:absolute
   and scrolls away, so the offset is dropped. Document height is already held
   by .elementor-sticky__spacer plus the admin bar's own html{margin-top} — do
   not pad the body as well.
   --------------------------------------------------------------------------- */
body.admin-bar .elementor-location-header .elementor-sticky--active{--wp-admin--admin-bar--height:32px;top:calc(0px + var(--wp-admin--admin-bar--height, 0px)) !important;}
@media (max-width:782px){body.admin-bar .elementor-location-header .elementor-sticky--active{--wp-admin--admin-bar--height:46px;}}
@media (max-width:600px){body.admin-bar .elementor-location-header .elementor-sticky--active{top:0px !important;}}

/* ---------------------------------------------------------------------------
   Hover parity with the design source (design-html Header.tsx / Footer.tsx).

   Elementor covers colour/background/border hover natively; these are the
   transform + transition details its controls do not express.
   --------------------------------------------------------------------------- */

/* .btn-ghost:hover — lift by 1px alongside the native bg/border change. */
.dch-cta-ghost .elementor-button {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .18s ease;
}
.dch-cta-ghost .elementor-button:hover { transform: translateY(-1px); }
.dch-cta-ghost .elementor-button:active { transform: translateY(0); }

/* The newsletter Subscribe button is a form widget, which has no box-shadow
   control at all — match .btn-primary's shadow + lift here. */
.dch-nl-form .elementor-button {
  box-shadow: 0 4px 18px rgba(16, 185, 129, .38);
  transition: box-shadow .22s ease, transform .18s ease;
}
.dch-nl-form .elementor-button:hover {
  box-shadow: 0 6px 28px rgba(16, 185, 129, .55);
  transform: translateY(-1px);
}
.dch-nl-form .elementor-button:active { transform: translateY(0); }

/* Social buttons: colour/border/background only — the design has no scale. */
.dch-socials .elementor-social-icon {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Sign in + Back to top are plain colour transitions in the design. */
.dch-signin .elementor-button { transition: color .15s ease; }
.dch-backtotop .elementor-button { transition: color .2s ease; }

/* Nav items: colour only on hover (the green pill is the active state). */
.dch-nav .elementor-nav-menu--main .elementor-item {
  transition: color .15s ease;
}

/* Footer column links match the design's 150ms colour fade. */
.dch-link-col .elementor-item,
.dch-legal-menu .elementor-item {
  transition: color .15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .glow-ring.elementor-widget-button,
  .glow-ring.elementor-widget-button:hover,
  .dch-cta-ghost .elementor-button:hover,
  .dch-nl-form .elementor-button:hover { transform: none; }
  .glow-ring .elementor-button::before { animation: none; }
  .dch-cta-band::before { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PASS 3 — global effects (2026-09-23). Values measured on the prototype
   (https://design-html.designcorehub.online/) rendered DOM + CSSOM.
   Everything above this line is the live file, unchanged.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Marquee — proto .animate-marquee: marquee 28s linear infinite,
      translate(0) -> translate(-50%); .marquee-track:hover pauses. */
@keyframes dch-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.dch-marquee-inner { animation: dch-marquee 28s linear infinite; will-change: transform; }
.dch-marquee-track:hover .dch-marquee-inner { animation-play-state: paused; }

/* 2. Scroll reveal — proto .reveal / .reveal-left / .reveal-right.
      (Phase B: the unused .dch-reveal-left, .dch-delay-1..6 and .dch-grid-pattern
   rules were removed as dead CSS — C6 found nothing on any page using them.)
   The hidden state exists ONLY under html.dch-js (added by dch-chrome.js),
      and only until .dch-in is added, so with no JS nothing is ever hidden.
      The transition is only present until .dch-done, so the elements'
      own hover transitions are untouched after the entrance. */
html.dch-js .dch-reveal:not(.dch-done),
html.dch-js .dch-reveal-right:not(.dch-done) {
  transition: opacity .65s cubic-bezier(.25, .46, .45, .94), transform .65s cubic-bezier(.25, .46, .45, .94);
}
html.dch-js .dch-reveal-right:not(.dch-done) {
  transition-duration: .7s, .7s;
}
html.dch-js .dch-reveal:not(.dch-in)       { opacity: 0; transform: translateY(28px); }
html.dch-js .dch-reveal-right:not(.dch-in) { opacity: 0; transform: translateX(32px); }

/* Hero headline lines — proto: opacity + translateY (62-75px on ~99px lines),
   1s cubic-bezier(.16,1,.3,1), delays .08s / .21s / .34s. */
html.dch-js .dch-b0 .dch-display .dch-line.dch-hero-line:not(.dch-done) {
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1);
}
html.dch-js .dch-b0 .dch-display .dch-line.dch-hero-line:not(.dch-in) { opacity: 0; transform: translateY(70%); }
html.dch-js .dch-b0 .dch-display .dch-line.dch-hero-line:nth-child(1) { transition-delay: .08s; }
html.dch-js .dch-b0 .dch-display .dch-line.dch-hero-line:nth-child(2) { transition-delay: .21s; }
html.dch-js .dch-b0 .dch-display .dch-line.dch-hero-line:nth-child(3) { transition-delay: .34s; }

/* 3. Shimmer: the 7 phrases already carry dch-shimmer from page 25's CSS.
      Nothing to add here except reduced motion (below). */

/* 4. border-flow — proto .animated-border::after: border-flow 3s linear
      infinite, background 200% 100%, 0% -> 200% center. Page 25 already
      paints the gradient; this adds the motion only. */
@keyframes dch-border-flow {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.dch-link-animated .elementor-button::after,
.dch-link-underline .elementor-button::after {
  animation: dch-border-flow 3s linear infinite;
}

/* 5. Stat pills — proto .animate-float / .animate-float-delay:
      float 5s ease-in-out infinite (second pill 2s delay). */
@keyframes dch-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(.5deg); }
}
.dch-stat-pill { animation: dch-float 5s ease-in-out infinite; }
/* The delayed pill in the prototype is "3× Faster Growth". Pass 4: named by
   the class the generator puts on it — the element id this used to name is
   re-derived on every apply, and stopped matching after the next write. */
.dch-stat-pill.dch-stat-pill--delay { animation-delay: 2s; }

/* 6. Cursor glow — proto .cursor-glow; element created by dch-chrome.js
      only when (hover: hover) and motion is allowed. */
.dch-cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, .055) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  transition: left .18s ease-out, top .18s ease-out;
  will-change: left, top;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
.dch-cursor-glow.dch-on { opacity: 1; }
@media not all and (hover: hover) { .dch-cursor-glow { display: none; } }

/* 7. Logo hover glow — header rule (10px .7) is already above; the footer
      mark in the prototype uses 8px .6. */
.dch-brand-col .dch-brand:hover .elementor-heading-title::before {
  filter: drop-shadow(0 0 8px rgba(16, 185, 129, .6));
}

/* 8. Hero grid overlay — the prototype hero does NOT use .grid-pattern
      (60px/.05); it paints an inline absolute inset-0 layer:
      two 1px linear-gradients rgba(52,211,153,.03), 88px 88px, opacity 1.
      .dch-b0::after is taken by scanlines, ::before is free. */
.dch-b0 { position: relative; }
.dch-b0::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(52, 211, 153, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 211, 153, .03) 1px, transparent 1px);
  background-size: 88px 88px;
  pointer-events: none;
  z-index: 0;
}

/* Reduced motion: stop every loop added here and the hero line shimmer the
   earlier block missed; show every reveal target instantly; hide nothing. */
@media (prefers-reduced-motion: reduce) {
  .dch-marquee-inner,
  .dch-stat-pill,
  .dch-luxury .dch-line,
  .dch-glow-ring .elementor-button::before,
  .dch-glow-ring .elementor-button::after,
  .dch-nl-form .elementor-button::before,
  .dch-link-animated .elementor-button::after,
  .dch-link-underline .elementor-button::after {
    animation: none !important;
  }
  html.dch-js .dch-reveal,
  html.dch-js .dch-reveal-right,
  html.dch-js .dch-b0 .dch-display .dch-line.dch-hero-line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .dch-cursor-glow { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PASS 4 — boxed header, theme toggle, hero orbs, light theme (2026-09-23).
   Values measured on the prototype (design-html.designcorehub.online) at
   1440 and 2000 wide, dark and data-theme=light. Per-element light colours
   live on the elements themselves (light-auto.mjs): Elementor's own colour
   rules are (0,4,0) and a sheet rule here would lose to them.
   ═══════════════════════════════════════════════════════════════════ */

/* Tokens. The 15 :root tokens and the prototype's [data-theme=light] block,
   verbatim. Nothing on the built pages reads them yet except the rules below. */
:root {
  --bg-0: #060a07; --bg-1: #0a0f0c; --bg-2: #0f1a13; --bg-3: #162010;
  --surface-a: #0f1a1399; --surface-b: #060a07d9;
  --t1: #edf5f0; --t2: #a8c4b4; --t3: #709480; --t4: #547a66; --tg: #6e9480;
  --border-s: #34d3991a; --border-m: #34d39938; --border-a: #34d39966;
  --shadow-card: #00000073;
}
html[data-theme="light"] {
  --bg-0: #e8f5ee; --bg-1: #f4fbf6; --bg-2: #ffffff; --bg-3: #ebf7f0;
  --surface-a: #ffffffd9; --surface-b: #fffffffa;
  --t1: #0a1e14; --t2: #163625; --t3: #27563b; --t4: #387050; --tg: #3f7557;
  --border-s: #10b98129; --border-m: #10b98147; --border-a: #10b98180;
  --shadow-card: #00502814;
  color-scheme: light;
}
html[data-theme="light"] body { background-color: var(--bg-1); color: var(--t1); }

/* 1. Header pill — boxed at 1440 by the band's native boxed width. The band's
   inner is the new wrapper; it must stay click-through like the band. */
.dch-header-band > .e-con-inner { pointer-events: none; }
.dch-header-band > .e-con-inner > .dch-pill { pointer-events: auto; }

/* 2. Theme toggle — prototype button.w-9.h-9.rounded-xl. Prefixed with the
   wrapper class so hello-elementor's [type=button] / button:hover (#c36) rules,
   (0,1,1)-(0,2,0), cannot tie it. */
.dch-theme-toggle-wrap { flex: 0 0 auto; line-height: 0; }
.dch-theme-toggle-wrap .dch-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; margin: 0;
  border-radius: 12px; border: 1px solid rgba(52, 211, 153, .18);
  background: rgba(52, 211, 153, .08); color: #6ee7b7;
  cursor: pointer; line-height: 0; font-size: 0;
  transition: background-color .2s, border-color .2s, color .2s;
}
.dch-theme-toggle-wrap .dch-theme-toggle:hover,
.dch-theme-toggle-wrap .dch-theme-toggle:focus { background: rgba(52, 211, 153, .16); border-color: rgba(52, 211, 153, .35); color: #6ee7b7; }
.dch-theme-toggle-wrap .dch-theme-toggle:focus-visible { outline: 1px solid rgba(16, 185, 129, .65); outline-offset: 0; box-shadow: 0 0 0 3px rgba(16, 185, 129, .12); }
.dch-theme-toggle-wrap .dch-theme-toggle svg { display: block; flex: 0 0 auto; }
.dch-theme-toggle-wrap .dch-theme-toggle .dch-icon-moon { display: none; }
html[data-theme="light"] .dch-theme-toggle-wrap .dch-theme-toggle { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .28); color: #0f9e6e; }
html[data-theme="light"] .dch-theme-toggle-wrap .dch-theme-toggle:hover,
html[data-theme="light"] .dch-theme-toggle-wrap .dch-theme-toggle:focus { background: rgba(16, 185, 129, .18); border-color: rgba(16, 185, 129, .45); color: #0f9e6e; }
html[data-theme="light"] .dch-theme-toggle-wrap .dch-theme-toggle .dch-icon-sun { display: none; }
html[data-theme="light"] .dch-theme-toggle-wrap .dch-theme-toggle .dch-icon-moon { display: block; }

/* The prototype's divider (w-px h-4 mx-1) sits between the toggle and
   Sign in, not between Sign in and Get Started: toggle -> 29px -> Sign in. */
@media (min-width: 1025px) {
  .dch-actions > .dch-signin { margin-left: 19px; }
  .dch-signin::after { display: none; }
  .dch-signin::before {
    content: ''; position: absolute; left: -15px; top: 50%; transform: translateY(-50%);
    width: 1px; height: 16px; background: rgba(52, 211, 153, .15);
  }
  html[data-theme="light"] .dch-signin::before { background: rgba(16, 185, 129, .15); }
}

/* 5. Orbs — prototype .orb-blue / .orb-cyan / .orb-breathe(-alt).
   An Elementor container; `.elementor .e-con.dch-orb` (0,3,0) beats the
   container's own (0,1,0)-(0,2,0) width/flex rules. */
.elementor .e-con.dch-orb {
  position: absolute; z-index: 0; padding: 0; min-height: 0; max-width: none;
  border-radius: 50%; pointer-events: none; flex: none;
}
.elementor .e-con.dch-orb-blue { filter: blur(60px); background: radial-gradient(circle, rgba(16, 185, 129, .18) 0%, transparent 70%); }
.elementor .e-con.dch-orb-cyan { filter: blur(80px); background: radial-gradient(circle, rgba(110, 231, 183, .12) 0%, transparent 70%); }
html[data-theme="light"] .elementor .e-con.dch-orb-blue { background: radial-gradient(circle, rgba(16, 185, 129, .12) 0%, transparent 70%); }
html[data-theme="light"] .elementor .e-con.dch-orb-cyan { background: radial-gradient(circle, rgba(52, 211, 153, .09) 0%, transparent 70%); }
.elementor .e-con.dch-orb-breathe { animation: dch-orb-breathe 7s ease-in-out infinite; }
.elementor .e-con.dch-orb-breathe-alt { animation: dch-orb-breathe 9s ease-in-out 2s infinite; }
/* proto @keyframes breathe — the animated opacity replaces the inline one. */
@keyframes dch-orb-breathe {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: .72; transform: scale(1.1); }
}
.elementor .e-con.dch-orb--hero-a { width: 1000px; height: 1000px; top: -25%; right: -12%; }
.elementor .e-con.dch-orb--hero-b { width: 700px; height: 700px; bottom: -15%; left: -12%; }
.elementor .e-con.dch-orb--cta-a  { width: 800px; height: 800px; top: -30%; left: 55%; }
.elementor .e-con.dch-orb--cta-b  { width: 600px; height: 600px; bottom: -25%; left: 15%; opacity: .3; }
/* The band content paints over the orbs. */
.elementor .e-con.dch-b0-inner, .elementor .e-con.dch-b7-inner { position: relative; z-index: 2; }

/* ══ LIGHT THEME — sheet-level overrides (prototype [data-theme=light]) ══ */

/* Header pill: .nav-header-pill and .scrolled */
html[data-theme="light"] .elementor-location-header .dch-pill.dch-pill {
  background-color: #ffffffd9; border-color: #10b98138; box-shadow: 0 4px 24px #003c1e0f;
}
html[data-theme="light"] .dch-header-band.elementor-sticky--effects .dch-pill,
html[data-theme="light"] .elementor-sticky--effects .dch-pill {
  background-color: #fffffff7 !important;
  box-shadow: 0 8px 36px #003c1e1a, 0 0 0 1px #10b98126 !important;
}
html[data-theme="light"] .dch-brand .dch-accent { color: #08704c; }
html[data-theme="light"] .dch-badge .elementor-heading-title { background: #10b9811f; border-color: #10b9814d; }
html[data-theme="light"] .dch-dot { background: #0f9e6e; }
/* .nav-mobile-menu */
html[data-theme="light"] .dch-nav .elementor-nav-menu--dropdown {
  background: #fffffffa !important; border-color: #10b98133; box-shadow: 0 12px 40px #003c1e1f;
}

/* Effects */
/* (Phase B: the home glow lines are e-dividers now — their light rule is B17.) */
html[data-theme="light"] .dch-links-wrap::before {
  background: linear-gradient(90deg, #0000 0%, #10b98159 25%, #6ee7b7a6 50%, #10b98159 75%, #0000 100%);
  box-shadow: 0 0 10px #10b98140, 0 0 30px #10b98114;
}
html[data-theme="light"] .dch-scanlines::before,
html[data-theme="light"] .dch-scanlines::after {
  background: repeating-linear-gradient(0deg, #0000, #0000 3px, #10b98105 3px 4px);
}
html[data-theme="light"] .dch-cursor-glow { background: radial-gradient(circle, rgba(16, 185, 129, .08) 0%, transparent 65%); }

/* Footer: newsletter strip and CTA band (prototype .newsletter-strip; the CTA
   band keeps its mesh in light, per the user's 2026-09-22 decision to restore
   band gradients rather than flatten them). */
html[data-theme="light"] .dch-newsletter {
  background-image: linear-gradient(135deg, #10b98114 0%, #6ee7b70a 100%);
  border-top: 1px solid #10b9812e; border-bottom: 1px solid #10b98124;
}
html[data-theme="light"] .dch-cta-band {
  background-image:
    conic-gradient(from 200deg at 80% 30%, rgba(16, 185, 129, .15) 0deg, transparent 80deg, transparent 280deg, rgba(4, 120, 87, .09) 360deg),
    radial-gradient(ellipse 75% 60% at 60% 40%, rgba(16, 185, 129, .18) 0%, transparent 55%) !important;
}
html[data-theme="light"] .dch-cta-band::before { background: radial-gradient(circle, #10b9811f 0%, transparent 70%); }
html[data-theme="light"] .dch-cta-title .elementor-heading-title { text-shadow: 0 0 40px #10b98133, 0 0 80px #10b98114; }
html[data-theme="light"] .dch-luxury:not(.elementor-widget) {
  background-image: linear-gradient(110deg, #065f46 0%, #0f9e6e 30%, #10b981 50%, #0f9e6e 70%, #065f46 100%);
}
/* Inputs — prototype [data-theme=light] input */
html[data-theme="light"] .dch-nl-form input[type="email"] {
  color: var(--t1) !important; background-color: #fff !important; border-color: #10b98140 !important;
}
html[data-theme="light"] .dch-nl-form input::placeholder { color: var(--t4) !important; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .elementor .e-con.dch-orb-breathe,
  .elementor .e-con.dch-orb-breathe-alt { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE B — widget-native + atomic home page (2026-09-23).
   Everything above this banner is unchanged. This section replaces what the
   home page used to paste into ~190 elements' Custom CSS: each effect is ONE
   rule here, keyed by a class (classic widgets) or a data-dch word (atomic
   elements, which render style ids, not our classes — probe P4/P6).
   Specificity notes are inline where a rule must beat Elementor's own
   per-element CSS ((0,4,0)-(0,5,0)).
   ═══════════════════════════════════════════════════════════════════ */

/* B1. Light theme for Kit-bound colours. The page binds a classic colour to a
   Kit global only where the Kit value IS the design value; light redefines
   the bound globals once. (0,2,2) beats the Kit's .elementor-kit-N (0,1,0). */
html[data-theme="light"] body[class*="elementor-kit-"] {
  --e-global-color-heading: #0a1e14;
  --e-global-color-text: #163625;
  --e-global-color-muted: #27563b;
  --e-global-color-accent: #08704c;
  --e-global-color-primary: #08704c;
  --e-global-color-onprimary: #e8f5ee;
  --e-global-color-background: #f4fbf6;
  --e-global-color-surface: #ffffff;
}

/* B2. Atomic elements take their colours and families from V4 variables
   (design-system.mjs), which Elementor prints as `--<label>` in :root inside
   the Kit CSS — loaded BEFORE this file (probe P5). Light redefines them
   once; (0,1,1) beats :root (0,1,0) whatever the order. */
html[data-theme="light"] {
  --dch-t1: #0a1e14;
  --dch-t2: #163625;
  --dch-t3: #27563b;
  --dch-t4: #387050;
  --dch-tg: #3f7557;
  --dch-accent-text: #08704c;
  --dch-accent-glow: #08704c;
}
.elementor [data-dch~="nowrap"] { white-space: nowrap; }

/* B3. One keyboard focus ring for the page (was pasted into 21 elements).
   The design's focus treatment is the newsletter input's. The band class is
   repeated on purpose: Elementor's native button shadow is (0,4,0) and its
   hover/focus shadow (0,5,0) — this is (0,6,0), so the halo is not overpainted. */
.dch-band.dch-band.dch-band.dch-band :is(a, button, [tabindex]):focus-visible {
  outline: 1px solid rgba(16, 185, 129, .65);
  outline-offset: 0;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}

/* B4. Display headings: line spans, luxury gradient, outlined last line.
   `-webkit-text-fill-color` inherits, so every line resets it first. */
.dch-display .dch-line { display: block; -webkit-text-fill-color: currentColor; }
.dch-b0 .dch-display .dch-line { overflow: hidden; }
.elementor-widget.dch-luxury:not(.dch-luxury-2) .dch-line:last-child,
.elementor-widget.dch-luxury-2 .dch-line:nth-last-child(-n+2) {
  background-image: linear-gradient(110deg, #0f9e6e 0%, #6ee7b7 30%, #ffffff 50%, #34d399 70%, #0f9e6e 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: dch-shimmer 7s linear infinite;
}
html[data-theme="light"] .elementor-widget.dch-luxury:not(.dch-luxury-2) .dch-line:last-child,
html[data-theme="light"] .elementor-widget.dch-luxury-2 .dch-line:nth-last-child(-n+2) {
  background-image: linear-gradient(110deg, #065f46 0%, #0f9e6e 30%, #10b981 50%, #0f9e6e 70%, #065f46 100%);
}
.dch-outline-last .dch-line:last-child { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px rgba(110, 231, 183, .5); }
html[data-theme="light"] .dch-outline-last .dch-line:last-child { -webkit-text-stroke-color: rgba(8, 112, 76, .6); }

/* B5. Decorative giant words / numerals: native stroke + offsets; only these
   two properties have no control. */
.dch-deco-word, .dch-stroke-numeral { user-select: none; pointer-events: none; }

/* B6. Hero eyebrow dot (prototype .status-dot, 7px, status-pulse 2.2s). */
.dch-status-dot { flex: 0 0 auto; animation: dch-status-pulse 2.2s ease-in-out infinite; }

/* B7. Hero trust row — a RECORDED text exception (the "✓" is text). */
.dch-trust.dch-trust { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 8px; }
.dch-trust .dch-trust-item { display: inline-flex; align-items: center; gap: 6px; }
.dch-trust .dch-check { color: #34d399; }
html[data-theme="light"] .dch-trust .dch-check { color: #08704c; }

/* B8. Hero stat pills: blur has no container control. */
.dch-stat-pill { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

/* B9. Primary buttons: gradient, shadows and lift are native; the rotating
   ring is a ::before masked to a 1.5px edge. */
.dch-glow-ring .elementor-button { position: relative; isolation: isolate; }
.dch-glow-ring .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, #0f9e6e, #6ee7b7, #051209, #0f9e6e) 0 0 / 300% 300%;
  animation: dch-border-rotate 4s ease infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* B10. Animated text links (prototype .animated-border): an opacity-faded
   2px bar under the label, its gradient flowing (dch-border-flow above), the
   arrow nudging 4px. Colour and hover colour are native. In light every link
   takes #08704c and an underline — colour alone is not an affordance.
   (0,4,1) beats Elementor's per-element button colour (0,4,0). */
.dch-link-animated, .dch-link-underline { position: relative; }
:is(.dch-link-animated, .dch-link-underline) .elementor-button { position: relative; white-space: nowrap; }
:is(.dch-link-animated, .dch-link-underline) .elementor-button::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0f9e6e, #6ee7b7, #0f9e6e, transparent) 0 0 / 200% 100%;
  opacity: 0;
  transition: opacity .3s;
}
:is(.dch-link-animated, .dch-link-underline):hover .elementor-button::after,
:is(.dch-link-animated, .dch-link-underline) .elementor-button:focus-visible::after { opacity: 1; }
:is(.dch-link-animated, .dch-link-underline) .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }
html[data-theme="light"] :is(.dch-link-animated, .dch-link-underline):is(.dch-link-animated, .dch-link-underline) .elementor-button {
  color: #08704c; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}

/* B11. Image blocks: no inline gap under the img; the zoom is clipped. */
.dch-img-block img { display: block; }
.dch-theme-img, .dch-work-img { overflow: hidden; }

/* B12. Theme cards (prototype: lift 6px, image 1.07 — both instant there). */
.dch-theme-card:hover { transform: translateY(-6px); }
.dch-theme-card:hover .dch-theme-img img { transform: scale(1.07); }

/* B13. Work cards: 1.06 zoom, a .06 emerald wash under the meta, disc 1.1. */
.dch-work-card::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(16, 185, 129, .06); opacity: 0; pointer-events: none; z-index: 1;
}
.dch-work-card:hover::after { opacity: 1; }
.dch-work-card:hover .dch-work-img img { transform: scale(1.06); }
.dch-work-card:hover .dch-work-disc .elementor-icon { transform: scale(1.1); }

/* B14. Arrow discs (Icon widget, stacked circle): the 1px edge has no stacked
   control. Row hover fills and turns the service disc; Elementor's stacked
   background rule is (0,5,0), so the hover rule is written at (0,7,0). */
.dch-disc .elementor-icon { border: 1px solid rgba(52, 211, 153, .18); transition: background-color .25s, border-color .25s; }
.dch-work-disc .elementor-icon { border-color: rgba(16, 185, 129, .5); }
.dch-service-row.dch-service-row:hover .dch-svc-disc.dch-svc-disc.dch-svc-disc .elementor-icon {
  background-color: rgba(16, 185, 129, .18); border-color: rgba(16, 185, 129, .6); transform: rotate(-45deg);
}
html[data-theme="light"] .dch-svc-disc .elementor-icon { border-color: rgba(16, 185, 129, .3); }

/* B15. Service rows: number and title brighten on row hover (no parent-hover
   control exists). Atomic local styles are (0,2,0); these are (0,3,0). The
   colours are the V4 variables, so light follows B2 with no second rule. */
.dch-service-row [data-dch~="svc-num"],
.dch-service-row [data-dch~="svc-title"] { transition: color .2s; }
.dch-service-row:hover [data-dch~="svc-num"] { color: var(--dch-accent-text, #6ee7b7); }
.dch-service-row:hover [data-dch~="svc-title"] { color: var(--dch-t1, #edf5f0); }

/* B16. Stats: the two-layer glow (number_shadow is one layer) + tabular
   figures (no control). */
.dch-stat .elementor-counter-number-wrapper {
  text-shadow: 0 0 60px rgba(110, 231, 183, .22), 0 0 120px rgba(16, 185, 129, .12);
  font-variant-numeric: tabular-nums;
}

/* B17. Glow lines are e-dividers (gradient + triple glow natively, probe
   P8). Only the light variant is here: its gradient has no variable. */
/* TEMP until page 25 carries the Phase B plan: the classic glow lines of the
   old build (.dch-glow-line). Remove this selector after the apply — the hook
   gate will name it once nothing matches. */
html[data-theme="light"] .dch-glow-line.dch-glow-line,
html[data-theme="light"] .elementor [data-dch~="glow-line"] {
  background: linear-gradient(90deg, #0000 0%, #10b98159 25%, #6ee7b7a6 50%, #10b98159 75%, #0000 100%);
  box-shadow: 0 0 10px #10b98140, 0 0 30px #10b98114;
}

/* B17b. Text-only secondary buttons are e-buttons (hover = a state variant).
   Their translucent surface and edge have no variable, so light is here. */
html[data-theme="light"] .elementor [data-dch~="btn-secondary"] { background-color: rgba(16, 185, 129, .05); border-color: rgba(16, 185, 129, .24); }
html[data-theme="light"] .elementor [data-dch~="btn-secondary"]:hover { border-color: rgba(16, 185, 129, .48); }

/* B18. Marquee: one Icon List; its items never wrap. */
.dch-marquee-inner .elementor-icon-list-items { flex-wrap: nowrap; }
.dch-marquee-inner .elementor-icon-list-item { white-space: nowrap; }

/* B19. Light theme for classic widgets whose colour has no Kit twin (the
   translucent borders and surfaces, --t4, --tg). ONE rule per component
   instead of the same derived rule on every card/row/counter (C7). The
   repeated class out-ranks Elementor's own per-element colour/border/
   background rules — (0,3,0) for a container border, (0,4,0) for a
   container background (`:not(...)`) or a widget part — at (0,4,1)+. */
html[data-theme="light"] .dch-service-row.dch-service-row.dch-service-row { border-color: rgba(16, 185, 129, .13); }
html[data-theme="light"] .dch-process-step.dch-process-step.dch-process-step,
html[data-theme="light"] .dch-reason.dch-reason.dch-reason { border-color: rgba(16, 185, 129, .16); }
html[data-theme="light"] .dch-theme-card.dch-theme-card.dch-theme-card.dch-theme-card { background-color: #ffffff; border-color: #10b9812e; box-shadow: 0 4px 20px #003c1e0d; }
html[data-theme="light"] .dch-stat-pill.dch-stat-pill.dch-stat-pill.dch-stat-pill { background-color: #ffffffd9; border-color: rgba(16, 185, 129, .35); box-shadow: rgba(0, 80, 40, .1) 0 4px 20px; }
html[data-theme="light"] .dch-btn-demo.dch-btn-demo.dch-btn-demo .elementor-button { color: #3f7557; fill: #3f7557; }
html[data-theme="light"] .dch-stat-counter.dch-stat-counter.dch-stat-counter .elementor-counter-title { color: #3f7557; }
html[data-theme="light"] .dch-marquee-inner.dch-marquee-inner.dch-marquee-inner .elementor-icon-list-text { color: #3f7557; }
html[data-theme="light"] .dch-trust.dch-trust.dch-trust { color: #387050; }

@media (prefers-reduced-motion: reduce) {
  .dch-status-dot,
  .elementor-widget.dch-luxury .dch-line,
  .dch-glow-ring .elementor-button::before { animation: none !important; }
  .dch-theme-card:hover,
  .dch-theme-card:hover .dch-theme-img img,
  .dch-work-card:hover .dch-work-img img { transform: none; }
}