/* ==========================================================================
   DSPeco — Design System
   Child theme stylesheet for Astra
   --------------------------------------------------------------------------
   Every colour in this file is sampled from the DSPeco logo.
   The four quadrants of the logo mark (wind, solar, water, growth) are used
   as the colour-coding system for the four energy sources across the site.

   SECTIONS
   01  Design tokens            10  Process steps
   02  Base & typography        11  Data tables
   03  Layout helpers           12  Savings calculator
   04  Buttons                  13  FAQ accordion
   05  Astra header & nav       14  Call-to-action band
   06  Hero                     15  Contact & enquiry form
   07  Quadrants (signature)    16  Footer
   08  Cards & grids            17  Motion & accessibility
   09  Spec strip & stats       18  Responsive breakpoints
   ========================================================================== */


/* == 01  DESIGN TOKENS ===================================================== */
/* Change a value here and it updates everywhere on the site.               */

:root {
  /* Brand — sampled directly from the logo artwork */
  --dsp-blue:        #0048A7;   /* solar quadrant, deep      — primary brand */
  --dsp-blue-lt:     #0080CC;   /* solar quadrant, light                     */
  --dsp-amber:       #FA9914;   /* wind quadrant                             */
  --dsp-water:       #12A5D8;   /* water quadrant                            */
  --dsp-leaf:        #6DBE45;   /* growth quadrant                           */
  --dsp-gold:        #C6A664;   /* "Energy for Every Ecosystem" tagline gold */

  /* Neutrals */
  --dsp-ink:         #06182C;   /* darkest — dark sections, headings         */
  --dsp-ink-2:       #0E2C4A;   /* dark section gradient partner             */
  --dsp-body:        #35485C;   /* body copy                                 */
  --dsp-muted:       #6C8199;   /* captions, meta                            */
  --dsp-line:        #DCE5EE;   /* hairline borders                          */
  --dsp-paper:       #F1F5F9;   /* tinted section background                 */
  --dsp-white:       #FFFFFF;

  /* Typography */
  --dsp-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --dsp-text:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --dsp-mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* Type scale (fluid — grows with the viewport, no media queries needed) */
  --dsp-h1: clamp(2.1rem, 1.35rem + 3.4vw, 4.1rem);
  --dsp-h2: clamp(1.7rem, 1.25rem + 1.9vw, 2.7rem);
  --dsp-h3: clamp(1.22rem, 1.08rem + 0.62vw, 1.55rem);
  --dsp-lede: clamp(1.03rem, 0.97rem + 0.3vw, 1.19rem);

  /* Spacing rhythm */
  --dsp-gap:    1.5rem;
  --dsp-pad-y:  clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --dsp-pad-x:  clamp(1.15rem, 0.4rem + 3vw, 2.5rem);
  --dsp-wrap:   1180px;

  --dsp-radius: 5px;            /* deliberately small — engineering, not app */
  --dsp-shadow: 0 1px 2px rgba(6,24,44,.05), 0 12px 32px -18px rgba(6,24,44,.22);
}

/* Per-source accent. Add class .is-solar / .is-wind / .is-water / .is-hybrid
   to any section or card and its accents recolour automatically.            */
.is-solar  { --dsp-accent: var(--dsp-blue);  --dsp-accent-lt: var(--dsp-blue-lt); }
.is-wind   { --dsp-accent: var(--dsp-amber); --dsp-accent-lt: #FFC15E; }
.is-water  { --dsp-accent: var(--dsp-water); --dsp-accent-lt: #57D0EE; }
.is-hybrid { --dsp-accent: var(--dsp-leaf);  --dsp-accent-lt: #9BD97A; }
body       { --dsp-accent: var(--dsp-blue);  --dsp-accent-lt: var(--dsp-blue-lt); }


/* == 02  BASE & TYPOGRAPHY ================================================= */

.dsp-page,
.dsp-page p,
.dsp-page li {
  font-family: var(--dsp-text);
  color: var(--dsp-body);
  line-height: 1.68;
}

.dsp-page h1, .dsp-page h2, .dsp-page h3,
.dsp-page h4, .dsp-page h5 {
  font-family: var(--dsp-display);
  color: var(--dsp-ink);
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin: 0 0 .6em;
  font-weight: 600;
}

.dsp-page h1 { font-size: var(--dsp-h1); font-weight: 700; }
.dsp-page h2 { font-size: var(--dsp-h2); }
.dsp-page h3 { font-size: var(--dsp-h3); }

.dsp-lede {
  font-size: var(--dsp-lede);
  line-height: 1.62;
  color: var(--dsp-body);
  max-width: 62ch;
}

/* Eyebrow — a mono label with a colour tick. Used to open every section.    */
.dsp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--dsp-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dsp-muted);
  margin: 0 0 1.1rem;
}
.dsp-eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--dsp-accent);
  flex: none;
}
.dsp-dark .dsp-eyebrow { color: rgba(255,255,255,.62); }

/* Numeric emphasis — rupee figures, kW ratings, warranty years */
.dsp-num {
  font-family: var(--dsp-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -.01em;
}


/* == 03  LAYOUT HELPERS ==================================================== */

.dsp-wrap {
  width: 100%;
  max-width: var(--dsp-wrap);
  margin-inline: auto;
  padding-inline: var(--dsp-pad-x);
}

.dsp-section { padding-block: var(--dsp-pad-y); }
.dsp-section--tight { padding-block: calc(var(--dsp-pad-y) * .62); }
.dsp-section--paper { background: var(--dsp-paper); }
.dsp-section--line  { border-top: 1px solid var(--dsp-line); }

.dsp-dark {
  background: linear-gradient(160deg, var(--dsp-ink) 0%, var(--dsp-ink-2) 100%);
  color: rgba(255,255,255,.82);
}
.dsp-dark h1, .dsp-dark h2, .dsp-dark h3 { color: #fff; }
.dsp-dark p, .dsp-dark li { color: rgba(255,255,255,.8); }

/* Section head: heading left, supporting text right, stacks on mobile */
.dsp-head { margin-bottom: clamp(2rem, 1.2rem + 2vw, 3.2rem); }
.dsp-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 3rem;
  align-items: end;
}
@media (min-width: 900px) {
  .dsp-head--split { grid-template-columns: 1.05fr .95fr; }
}
.dsp-head h2 { margin-bottom: 0; }

.dsp-center { text-align: center; }
.dsp-center .dsp-eyebrow { justify-content: center; }
.dsp-center .dsp-lede { margin-inline: auto; }


/* == 04  BUTTONS =========================================================== */

.dsp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--dsp-text);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  padding: .95rem 1.6rem;
  border-radius: var(--dsp-radius);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease,
              border-color .18s ease, color .18s ease;
}
.dsp-btn:hover { transform: translateY(-2px); text-decoration: none; }
.dsp-btn:active { transform: translateY(0); }

.dsp-btn--primary { background: var(--dsp-accent); color: #fff; }
.dsp-btn--primary:hover { background: var(--dsp-ink); color: #fff; }

.dsp-btn--ghost {
  background: transparent;
  color: var(--dsp-ink);
  border-color: var(--dsp-line);
}
.dsp-btn--ghost:hover { border-color: var(--dsp-accent); color: var(--dsp-accent); }

.dsp-dark .dsp-btn--ghost { color: #fff; border-color: rgba(255,255,255,.32); }
.dsp-dark .dsp-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

.dsp-btn--wa { background: #1FA855; color: #fff; }
.dsp-btn--wa:hover { background: #17803F; color: #fff; }

.dsp-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.9rem;
}

/* Text link with an arrow that travels on hover */
.dsp-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .93rem;
  color: var(--dsp-accent);
  text-decoration: none;
}
.dsp-link::after { content: "→"; transition: transform .2s ease; }
.dsp-link:hover::after { transform: translateX(4px); }


/* == 05  ASTRA HEADER & NAV ================================================ */

.ast-primary-header-bar,
.site-header { border-bottom: 1px solid var(--dsp-line); }

.main-header-menu .menu-link,
.main-navigation .menu-link {
  font-family: var(--dsp-text);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .005em;
}
.main-header-menu .current-menu-item > .menu-link { color: var(--dsp-blue); }

/* Header CTA button (added as a menu item with the class "dsp-nav-cta") */
.main-header-menu .dsp-nav-cta > .menu-link {
  background: var(--dsp-blue);
  color: #fff !important;
  border-radius: var(--dsp-radius);
  padding: .62rem 1.15rem !important;
  line-height: 1;
  font-weight: 600;
  transition: background-color .18s ease;
}
.main-header-menu .dsp-nav-cta > .menu-link:hover { background: var(--dsp-ink); }

/* Remove Astra's default content padding so our sections run edge to edge */
.dsp-page .entry-content > .dsp-section:first-child { margin-top: 0; }
.dsp-fullwidth .site-content .ast-container { padding-inline: 0; max-width: 100%; }
.dsp-fullwidth .entry-content > * { margin-block: 0; }


/* == 06  HERO ============================================================== */

.dsp-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2rem + 8vw, 7rem);
}

/* The four brand colours as a soft arc behind the headline — an abstraction
   of the logo ring rather than a stock gradient wash.                       */
.dsp-hero::before {
  content: "";
  position: absolute;
  inset: -55% -20% auto auto;
  width: min(105vw, 980px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(from 205deg,
      rgba(250,153,20,.30)  0deg  90deg,
      rgba(0,72,167,.34)   90deg 180deg,
      rgba(109,190,69,.30)180deg 270deg,
      rgba(18,165,216,.32)270deg 360deg);
  filter: blur(70px);
  pointer-events: none;
}
.dsp-hero > * { position: relative; z-index: 1; }

.dsp-hero__grid {
  display: grid;
  gap: clamp(2.4rem, 1rem + 5vw, 4rem);
  align-items: center;
}
@media (min-width: 980px) {
  .dsp-hero__grid { grid-template-columns: 1.06fr .94fr; }
}

.dsp-hero h1 { margin-bottom: 1.1rem; }
.dsp-hero h1 em {
  font-style: normal;
  color: var(--dsp-gold);
}
.dsp-hero .dsp-lede { max-width: 54ch; }

/* Trust row under the hero buttons */
.dsp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.16);
  font-family: var(--dsp-mono);
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.dsp-trust span { display: inline-flex; align-items: center; gap: .5rem; }
.dsp-trust span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dsp-leaf);
}

/* Page banner for inner pages */
.dsp-banner { padding-block: clamp(2.8rem, 1.8rem + 4vw, 4.6rem); }
.dsp-banner h1 { max-width: 20ch; }
.dsp-banner .dsp-lede { color: rgba(255,255,255,.78); }
.dsp-crumb {
  font-family: var(--dsp-mono);
  font-size: .74rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 1.2rem;
}
.dsp-crumb a { color: rgba(255,255,255,.75); text-decoration: none; }
.dsp-crumb a:hover { color: #fff; }


/* == 07  QUADRANTS — the signature element ================================= */
/* A 2x2 grid that reproduces the logo's four-quadrant ring as navigation.
   Each quadrant is one energy source and floods with its own colour on
   hover. The centre emblem is the white star from the logo mark.            */

.dsp-quadrants {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--dsp-line);
  border-radius: var(--dsp-radius);
  background: var(--dsp-white);
  overflow: hidden;
}

.dsp-quad {
  position: relative;
  display: block;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.3rem);
  min-height: clamp(160px, 14vw, 215px);
  text-decoration: none;
  color: var(--dsp-body);
  border-right: 1px solid var(--dsp-line);
  border-bottom: 1px solid var(--dsp-line);
  isolation: isolate;
  transition: color .28s ease;
}
.dsp-quad:nth-child(2n) { border-right: 0; }
.dsp-quad:nth-last-child(-n+2) { border-bottom: 0; }

/* Colour flood */
.dsp-quad::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dsp-accent);
  opacity: 0;
  transform: scale(.94);
  transition: opacity .3s ease, transform .3s ease;
  z-index: -1;
}
.dsp-quad:hover::before,
.dsp-quad:focus-visible::before { opacity: 1; transform: scale(1); }
.dsp-quad:hover, .dsp-quad:focus-visible { color: rgba(255,255,255,.9); text-decoration: none; }
.dsp-quad:hover .dsp-quad__name,
.dsp-quad:focus-visible .dsp-quad__name { color: #fff; }
.dsp-quad:hover .dsp-quad__meta,
.dsp-quad:focus-visible .dsp-quad__meta { color: rgba(255,255,255,.8); }

.dsp-quad__icon { width: 30px; height: 30px; display: block; margin-bottom: 1rem; }
.dsp-quad__icon path,
.dsp-quad__icon circle,
.dsp-quad__icon line { stroke: var(--dsp-accent); transition: stroke .28s ease; }
.dsp-quad:hover .dsp-quad__icon path,
.dsp-quad:hover .dsp-quad__icon circle,
.dsp-quad:hover .dsp-quad__icon line { stroke: #fff; }

.dsp-quad__name {
  font-family: var(--dsp-display);
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--dsp-ink);
  margin: 0 0 .3rem;
  transition: color .28s ease;
}
.dsp-quad__meta {
  font-family: var(--dsp-mono);
  font-size: .73rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--dsp-muted);
  margin: 0;
  transition: color .28s ease;
}

/* Centre emblem sits over the cross where the four quadrants meet */
.dsp-quadrants__hub {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(46px, 6vw, 62px);
  height: clamp(46px, 6vw, 62px);
  border-radius: 50%;
  background: var(--dsp-white);
  border: 1px solid var(--dsp-line);
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}
.dsp-quadrants__hub img { width: 68%; height: auto; display: block; }


/* == 08  CARDS & GRIDS ===================================================== */

.dsp-grid { display: grid; gap: var(--dsp-gap); }
.dsp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.dsp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)); }
.dsp-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }

.dsp-card {
  position: relative;
  background: var(--dsp-white);
  border: 1px solid var(--dsp-line);
  border-radius: var(--dsp-radius);
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dsp-card::after {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  background: var(--dsp-accent);
  border-radius: var(--dsp-radius) var(--dsp-radius) 0 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.dsp-card:hover { transform: translateY(-3px); box-shadow: var(--dsp-shadow); border-color: transparent; }
.dsp-card:hover::after { opacity: 1; }
.dsp-card h3 { margin-bottom: .55rem; }
.dsp-card p:last-child { margin-bottom: 0; }
.dsp-card--flat:hover { transform: none; box-shadow: none; border-color: var(--dsp-line); }
.dsp-card--flat::after { display: none; }

/* Card index number — only used where content is genuinely a sequence */
.dsp-card__no {
  font-family: var(--dsp-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--dsp-accent);
  display: block;
  margin-bottom: .9rem;
}

/* Simple tick list */
.dsp-ticks { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.dsp-ticks li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: .62rem;
  font-size: .96rem;
}
.dsp-ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--dsp-accent);
}
.dsp-ticks li:last-child { margin-bottom: 0; }

/* Split feature block: text one side, panel the other */
.dsp-split { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.6rem); align-items: center; }
@media (min-width: 900px) {
  .dsp-split { grid-template-columns: 1fr 1fr; }
  .dsp-split--wide-left { grid-template-columns: 1.15fr .85fr; }
}
.dsp-split img { width: 100%; height: auto; border-radius: var(--dsp-radius); display: block; }


/* == 09  SPEC STRIP & STATS ================================================ */
/* Borrowed from equipment datasheets — figures set in mono, hairline rules. */

.dsp-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  border: 1px solid var(--dsp-line);
  border-radius: var(--dsp-radius);
  background: var(--dsp-white);
  overflow: hidden;
}
.dsp-spec > div {
  padding: 1.4rem 1.5rem;
  border-right: 1px solid var(--dsp-line);
}
.dsp-spec > div:last-child { border-right: 0; }
.dsp-spec dt {
  font-family: var(--dsp-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dsp-muted);
  margin: 0 0 .5rem;
}
.dsp-spec dd {
  font-family: var(--dsp-display);
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.95rem);
  font-weight: 600;
  color: var(--dsp-ink);
  margin: 0;
  line-height: 1;
  letter-spacing: -.02em;
}
.dsp-spec dd small {
  display: block;
  font-family: var(--dsp-text);
  font-size: .8rem;
  font-weight: 400;
  color: var(--dsp-muted);
  margin-top: .45rem;
  line-height: 1.4;
  letter-spacing: 0;
}
.dsp-dark .dsp-spec { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.dsp-dark .dsp-spec > div { border-color: rgba(255,255,255,.14); }
.dsp-dark .dsp-spec dd { color: #fff; }
.dsp-dark .dsp-spec dt,
.dsp-dark .dsp-spec dd small { color: rgba(255,255,255,.6); }


/* == 10  PROCESS STEPS ===================================================== */
/* Numbered because the installation journey genuinely runs in order.        */

.dsp-steps { display: grid; gap: 0; counter-reset: dspstep; }
.dsp-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.3rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--dsp-line);
}
.dsp-step:last-child { border-bottom: 1px solid var(--dsp-line); }
.dsp-step__no {
  counter-increment: dspstep;
  font-family: var(--dsp-mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--dsp-accent);
  padding-top: .35rem;
  min-width: 3.2rem;
}
.dsp-step__no::before { content: "0" counter(dspstep) " /"; }
.dsp-step h3 { margin-bottom: .35rem; }
.dsp-step p { margin: 0; }
.dsp-step__when {
  font-family: var(--dsp-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dsp-muted);
  margin-top: .6rem !important;
}


/* == 11  DATA TABLES ======================================================= */

.dsp-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dsp-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .95rem;
  background: var(--dsp-white);
  border: 1px solid var(--dsp-line);
  border-radius: var(--dsp-radius);
}
.dsp-table th,
.dsp-table td {
  padding: .95rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--dsp-line);
  vertical-align: top;
}
.dsp-table thead th {
  background: var(--dsp-accent);
  color: #fff;
  font-family: var(--dsp-mono);
  font-size: .73rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 0;
}
.dsp-table tbody tr:last-child td { border-bottom: 0; }
.dsp-table tbody tr:hover { background: var(--dsp-paper); }
.dsp-table td:first-child { font-weight: 600; color: var(--dsp-ink); }
.dsp-table .dsp-num { color: var(--dsp-ink); }

.dsp-note {
  font-size: .87rem;
  color: var(--dsp-muted);
  margin-top: 1rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--dsp-line);
}


/* == 12  SAVINGS CALCULATOR ================================================ */

.dsp-calc {
  display: grid;
  gap: 0;
  border: 1px solid var(--dsp-line);
  border-radius: var(--dsp-radius);
  overflow: hidden;
  background: var(--dsp-white);
}
@media (min-width: 860px) {
  .dsp-calc { grid-template-columns: 1fr 1fr; }
}
.dsp-calc__in { padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); }
.dsp-calc__out {
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem);
  background: linear-gradient(160deg, var(--dsp-ink) 0%, var(--dsp-ink-2) 100%);
  color: #fff;
}
.dsp-calc label {
  display: block;
  font-family: var(--dsp-mono);
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--dsp-muted);
  margin-bottom: .55rem;
}
.dsp-calc__field { margin-bottom: 1.5rem; }
.dsp-calc__field:last-child { margin-bottom: 0; }
.dsp-calc input[type="range"] { width: 100%; accent-color: var(--dsp-blue); }
.dsp-calc__val {
  font-family: var(--dsp-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--dsp-ink);
  display: block;
  margin-bottom: .5rem;
  letter-spacing: -.02em;
}
.dsp-calc select {
  width: 100%;
  padding: .8rem .9rem;
  font-family: var(--dsp-text);
  font-size: .95rem;
  color: var(--dsp-ink);
  border: 1px solid var(--dsp-line);
  border-radius: var(--dsp-radius);
  background: var(--dsp-white);
}
.dsp-calc__results { margin: 0; }
.dsp-calc__result { margin-bottom: 1.5rem; }
.dsp-calc__result:last-of-type { margin-bottom: 0; }
.dsp-calc__result dt {
  font-family: var(--dsp-mono);
  font-size: .71rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: .4rem;
}
.dsp-calc__result dd {
  margin: 0;
  font-family: var(--dsp-display);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.15rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -.025em;
}
.dsp-calc__result dd span { color: var(--dsp-leaf); }
.dsp-calc__disc {
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.16);
  line-height: 1.55;
}


/* == 13  FAQ ACCORDION ===================================================== */

.dsp-faq { border-top: 1px solid var(--dsp-line); }
.dsp-faq details {
  border-bottom: 1px solid var(--dsp-line);
}
.dsp-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--dsp-display);
  font-size: 1.03rem;
  font-weight: 600;
  color: var(--dsp-ink);
  transition: color .18s ease;
}
.dsp-faq summary::-webkit-details-marker { display: none; }
.dsp-faq summary:hover { color: var(--dsp-accent); }
.dsp-faq summary::after {
  content: "+";
  font-family: var(--dsp-mono);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--dsp-accent);
  line-height: 1;
  flex: none;
  transition: transform .22s ease;
}
.dsp-faq details[open] summary::after { transform: rotate(45deg); }
.dsp-faq details p {
  margin: 0 0 1.35rem;
  padding-right: 3rem;
  max-width: 70ch;
}


/* == 14  CALL-TO-ACTION BAND =============================================== */

.dsp-cta { position: relative; overflow: hidden; }
.dsp-cta::before {
  content: "";
  position: absolute;
  inset: auto -10% -70% auto;
  width: min(90vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 205deg,
    rgba(250,153,20,.26)  0deg  90deg,
    rgba(0,72,167,.30)   90deg 180deg,
    rgba(109,190,69,.26)180deg 270deg,
    rgba(18,165,216,.28)270deg 360deg);
  filter: blur(65px);
  pointer-events: none;
}
.dsp-cta > * { position: relative; z-index: 1; }
.dsp-cta h2 { max-width: 18ch; }
.dsp-cta .dsp-lede { color: rgba(255,255,255,.78); }
@media (min-width: 900px) {
  .dsp-cta__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
  .dsp-cta .dsp-btnrow { justify-content: flex-end; margin-top: 0; }
}


/* == 15  CONTACT & ENQUIRY FORM ============================================ */

.dsp-contact-list { list-style: none; margin: 0; padding: 0; }
.dsp-contact-list li {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--dsp-line);
}
.dsp-contact-list li:first-child { border-top: 1px solid var(--dsp-line); }
.dsp-contact-list strong {
  display: block;
  font-family: var(--dsp-mono);
  font-size: .71rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dsp-muted);
  font-weight: 500;
  margin-bottom: .4rem;
}
.dsp-contact-list a { color: var(--dsp-ink); text-decoration: none; font-weight: 500; }
.dsp-contact-list a:hover { color: var(--dsp-blue); }

.dsp-form { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .dsp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } }
.dsp-form label {
  display: block;
  font-family: var(--dsp-mono);
  font-size: .71rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--dsp-muted);
  margin-bottom: .45rem;
}
.dsp-form input,
.dsp-form select,
.dsp-form textarea {
  width: 100%;
  padding: .85rem .95rem;
  font-family: var(--dsp-text);
  font-size: .97rem;
  color: var(--dsp-ink);
  background: var(--dsp-white);
  border: 1px solid var(--dsp-line);
  border-radius: var(--dsp-radius);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.dsp-form input:focus,
.dsp-form select:focus,
.dsp-form textarea:focus {
  outline: none;
  border-color: var(--dsp-blue);
  box-shadow: 0 0 0 3px rgba(0,72,167,.12);
}
.dsp-form textarea { min-height: 130px; resize: vertical; }
.dsp-form__hp { position: absolute; left: -9999px; }
.dsp-form__msg { padding: .95rem 1.1rem; border-radius: var(--dsp-radius); font-size: .93rem; }
.dsp-form__msg--ok  { background: #EAF7EE; border: 1px solid #BFE5CC; color: #16643A; }
.dsp-form__msg--err { background: #FDECEC; border: 1px solid #F5C6C6; color: #9B1C1C; }

/* Sticky call bar on phones — the audience mostly arrives on mobile */
.dsp-callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  display: none;
  grid-template-columns: 1fr 1fr;
  background: var(--dsp-white);
  border-top: 1px solid var(--dsp-line);
  box-shadow: 0 -4px 20px -8px rgba(6,24,44,.2);
}
.dsp-callbar a {
  padding: .95rem;
  text-align: center;
  font-family: var(--dsp-text);
  font-weight: 600;
  font-size: .93rem;
  text-decoration: none;
}
.dsp-callbar a:first-child { background: var(--dsp-blue); color: #fff; }
.dsp-callbar a:last-child { background: #1FA855; color: #fff; }
@media (max-width: 767px) {
  .dsp-callbar { display: grid; }
  body { padding-bottom: 52px; }
}


/* == 16  FOOTER ============================================================ */

.dsp-footer { background: var(--dsp-ink); color: rgba(255,255,255,.72); }
.dsp-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.dsp-footer a:hover { color: #fff; }
.dsp-footer__grid {
  display: grid;
  gap: 2.4rem;
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}
@media (min-width: 800px) {
  .dsp-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
}
.dsp-footer img { max-width: 190px; height: auto; margin-bottom: 1.2rem; }
.dsp-footer h4 {
  font-family: var(--dsp-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  font-weight: 500;
  margin: 0 0 1.1rem;
}
.dsp-footer ul { list-style: none; margin: 0; padding: 0; }
.dsp-footer li { margin-bottom: .65rem; font-size: .94rem; }
.dsp-footer__tag {
  font-family: var(--dsp-display);
  color: var(--dsp-gold);
  font-size: .98rem;
  margin-bottom: 1rem;
}
.dsp-footer__base {
  border-top: 1px solid rgba(255,255,255,.13);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  font-size: .84rem;
  color: rgba(255,255,255,.5);
}


/* == 17  MOTION & ACCESSIBILITY ============================================ */

.dsp-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.dsp-reveal.is-in { opacity: 1; transform: none; }

:where(.dsp-page) a:focus-visible,
:where(.dsp-page) button:focus-visible,
:where(.dsp-page) summary:focus-visible,
:where(.dsp-page) input:focus-visible,
:where(.dsp-page) select:focus-visible,
:where(.dsp-page) textarea:focus-visible {
  outline: 3px solid var(--dsp-amber);
  outline-offset: 2px;
  border-radius: 2px;
}

.dsp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--dsp-ink);
  color: #fff;
  padding: .8rem 1.2rem;
  z-index: 1000;
}
.dsp-skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .dsp-reveal { opacity: 1; transform: none; }
}


/* == 18  RESPONSIVE BREAKPOINTS ============================================ */

@media (max-width: 899px) {
  .dsp-cta h2 { max-width: none; }
}

@media (max-width: 639px) {
  /* Quadrants stack to a single column so each target stays comfortable */
  .dsp-quadrants { grid-template-columns: 1fr; }
  .dsp-quad { border-right: 0; min-height: 0; }
  .dsp-quad:nth-last-child(-n+2) { border-bottom: 1px solid var(--dsp-line); }
  .dsp-quad:last-child { border-bottom: 0; }
  .dsp-quadrants__hub { display: none; }

  .dsp-spec > div { border-right: 0; border-bottom: 1px solid var(--dsp-line); }
  .dsp-spec > div:last-child { border-bottom: 0; }

  .dsp-btnrow .dsp-btn { flex: 1 1 100%; }
  .dsp-step { grid-template-columns: 1fr; gap: .5rem; }
  .dsp-faq details p { padding-right: 0; }
}


/* == 19  ELEMENTOR COMPATIBILITY ==========================================
   Only needed if you build the pages with Elementor instead of the block
   editor. Harmless otherwise — none of these selectors match without
   Elementor present. See docs/05-elementor-guide.md.
   ====================================================================== */

/* 19.1  Container width.

   The section element itself is always full-bleed, so backgrounds run edge to
   edge. What this controls is the INNER container that holds the content.

   We set it here rather than relying on Elementor's "Content Width" setting,
   so the site looks right no matter what that setting happens to be. The
   value matches --dsp-wrap, which is what .dsp-wrap uses elsewhere, so the
   slider and the Elementor sections line up with each other.

   The padding is added on top of the max-width (not inside it) so the text
   column stays a full --dsp-wrap wide on desktop, while phones still get a
   proper gutter instead of text against the screen edge.                   */
.dsp-page.elementor-section > .elementor-container {
  box-sizing: border-box;
  max-width: calc(var(--dsp-wrap) + 2 * var(--dsp-pad-x));
  padding-inline: var(--dsp-pad-x);
}

/* Sections carrying our own full-bleed markup — the hero slider — manage
   their width internally with .dsp-wrap, so the limit is lifted.           */
.elementor-section.dsp-full > .elementor-container,
.elementor-element.dsp-full > .e-con-inner {
  max-width: 100%;
  width: 100%;
  padding-inline: 0;
}

/* Flexbox containers, if this Elementor uses them instead of sections. */
.dsp-page.e-con > .e-con-inner {
  box-sizing: border-box;
  max-width: calc(var(--dsp-wrap) + 2 * var(--dsp-pad-x));
  padding-inline: var(--dsp-pad-x);
}

/* 19.2  Strip the padding and gutters Elementor adds around widgets, so a
   dark section touches both edges with no white gap.                      */
.elementor-section.dsp-full,
.elementor-element.dsp-full {
  padding: 0;
}
.elementor-section.dsp-full > .elementor-container > .elementor-column
  > .elementor-widget-wrap {
  padding: 0;
}
.dsp-page .elementor-widget-html .elementor-widget-container { padding: 0; }
.dsp-page .elementor-widget:not(:last-child) { margin-bottom: 0; }

/* 19.3  Elementor's global Site Settings write rules like
   `.elementor-kit-12 h1 {}`, which has the same specificity as `.dsp-page h1`
   and loads later, so it would win. The `body` prefix here raises our
   specificity by one so the design system keeps control of typography.
   Set matching fonts in Site Settings anyway — see the Elementor guide.    */
body .dsp-page h1,
body .dsp-page h2,
body .dsp-page h3,
body .dsp-page h4,
body .dsp-page h5 {
  font-family: var(--dsp-display);
  color: var(--dsp-ink);
  line-height: 1.1;
  letter-spacing: -0.022em;
}
body .dsp-page p,
body .dsp-page li {
  font-family: var(--dsp-text);
  color: var(--dsp-body);
  line-height: 1.68;
}
body .dsp-dark h1,
body .dsp-dark h2,
body .dsp-dark h3 { color: #fff; }
body .dsp-dark p,
body .dsp-dark li { color: rgba(255,255,255,.8); }
body .dsp-page .dsp-quad__name { color: var(--dsp-ink); }
body .dsp-page .dsp-quad:hover .dsp-quad__name { color: #fff; }
body .dsp-page .dsp-eyebrow,
body .dsp-page .dsp-quad__meta,
body .dsp-page .dsp-note { color: var(--dsp-muted); }
body .dsp-dark .dsp-eyebrow { color: rgba(255,255,255,.62); }
body .dsp-page .dsp-spec dd { color: var(--dsp-ink); }
body .dsp-dark .dsp-spec dd,
body .dsp-page .dsp-calc__out dd { color: #fff; }

/* 19.4  Elementor resets link colour on some templates. Keep ours.        */
body .dsp-page .dsp-btn--primary { color: #fff; }
body .dsp-page .dsp-btn--ghost { color: var(--dsp-ink); }
body .dsp-dark .dsp-btn--ghost { color: #fff; }
body .dsp-page .dsp-link { color: var(--dsp-accent); }
body .dsp-footer a { color: rgba(255,255,255,.72); }
body .dsp-footer a:hover { color: #fff; }

/* 19.5  In the Elementor editor, scroll-reveal elements would sit at zero
   opacity and look like empty sections. The editor adds this body class;
   we simply show everything while editing.                                */
body.elementor-editor-active .dsp-reveal { opacity: 1; transform: none; }

/* 19.6  Elementor's Shortcode widget wrapper — used for the enquiry form. */
.dsp-page .elementor-widget-shortcode .elementor-widget-container { padding: 0; }
.dsp-page .elementor-shortcode { display: block; }

/* 19.7  Native Elementor widgets given our classes (see the class reference
   in the Elementor guide) sometimes inherit Elementor's own button reset.  */
.elementor-button.dsp-btn { border-radius: var(--dsp-radius); }


/* == 20  HERO SLIDER ======================================================
   Powers the DSPeco Hero Slider Elementor widget. Slides cross-fade rather
   than sliding sideways — it keeps the headline legible and avoids the
   horizontal-scroll problems sliders cause on phones.
   ====================================================================== */

.dsp-slider {
  position: relative;
  overflow: hidden;
  background: var(--dsp-ink);
  --dsp-slider-h: 78vh;
  --dsp-slider-dim: .72;
}

.dsp-slider__track {
  position: relative;
  display: grid;
  min-height: var(--dsp-slider-h);
}

.dsp-slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  padding-block: clamp(3.5rem, 2rem + 6vw, 6rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s;
}
.dsp-slide.is-active { opacity: 1; visibility: visible; }

.dsp-slide__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Darkening layer — strength is set per slider in the Elementor panel.
   A diagonal gradient keeps the left side, where the text sits, darkest. */
.dsp-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(6,24,44,calc(var(--dsp-slider-dim) + .16)) 0%,
      rgba(6,24,44,var(--dsp-slider-dim)) 45%,
      rgba(14,44,74,calc(var(--dsp-slider-dim) * .72)) 100%);
}

.dsp-slide__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--dsp-wrap);
  margin-inline: auto;
}
.dsp-slide__title {
  font-family: var(--dsp-display);
  font-size: var(--dsp-h1);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.024em;
  color: #fff;
  margin: 0 0 1.1rem;
  max-width: 17ch;
}
.dsp-slide__title em { font-style: normal; color: var(--dsp-gold); }
.dsp-slide .dsp-lede { color: rgba(255,255,255,.84); max-width: 54ch; }
.dsp-slide .dsp-eyebrow { color: rgba(255,255,255,.66); }

/* Slides fade up as they become active */
.dsp-slide.is-active .dsp-slide__inner > * {
  animation: dsp-slide-in .7s cubic-bezier(.2,.7,.3,1) backwards;
}
.dsp-slide.is-active .dsp-slide__inner > *:nth-child(1) { animation-delay: .08s; }
.dsp-slide.is-active .dsp-slide__inner > *:nth-child(2) { animation-delay: .16s; }
.dsp-slide.is-active .dsp-slide__inner > *:nth-child(3) { animation-delay: .24s; }
.dsp-slide.is-active .dsp-slide__inner > *:nth-child(4) { animation-delay: .32s; }
@keyframes dsp-slide-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* --- arrows --- */
.dsp-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  background: rgba(6,24,44,.4);
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.dsp-slider__arrow:hover { background: var(--dsp-blue); border-color: var(--dsp-blue); }
.dsp-slider__arrow--prev { left: clamp(.6rem, 2vw, 1.6rem); }
.dsp-slider__arrow--next { right: clamp(.6rem, 2vw, 1.6rem); }

/* --- dots --- */
.dsp-slider__dots {
  position: absolute;
  left: 50%;
  bottom: clamp(1.1rem, 3vw, 2rem);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: .6rem;
}
.dsp-slider__dot {
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255,255,255,.34);
  cursor: pointer;
  transition: background-color .25s ease, width .25s ease;
}
.dsp-slider__dot.is-active { background: var(--dsp-gold); width: 52px; }

@media (max-width: 767px) {
  .dsp-slider { --dsp-slider-h: 74vh; }
  .dsp-slider__arrow { display: none; }
  .dsp-slide__title { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dsp-slide { transition: none; }
  .dsp-slide.is-active .dsp-slide__inner > * { animation: none; }
}


/* == 21  IMAGES ===========================================================
   Used by the DSPeco Image widget and by any Elementor Image widget given
   the class "dsp-img".
   ====================================================================== */

.dsp-img {
  margin: 0;
  overflow: hidden;
  border-radius: var(--dsp-radius);
  background: var(--dsp-paper);
  line-height: 0;
}
.dsp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dsp-img--4-3  { aspect-ratio: 4 / 3; }
.dsp-img--3-2  { aspect-ratio: 3 / 2; }
.dsp-img--1-1  { aspect-ratio: 1 / 1; }
.dsp-img--tall { aspect-ratio: 3 / 4; }

/* An image with a thin brand rule along its top edge */
.dsp-img--ruled { border-top: 3px solid var(--dsp-accent); border-radius: 0 0 var(--dsp-radius) var(--dsp-radius); }

/* Page banner backgrounds. Add one of these classes to a banner section and
   the matching bundled image loads — no upload, no media library. */
.dsp-banner--img {
  position: relative;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.dsp-banner--img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(6,24,44,.90) 0%, rgba(6,24,44,.78) 50%, rgba(14,44,74,.62) 100%);
}
.dsp-banner--solar   { background-image: url('../img/banner-solar.jpg'); }
.dsp-banner--wind    { background-image: url('../img/banner-wind.jpg'); }
.dsp-banner--water   { background-image: url('../img/banner-water.jpg'); }
.dsp-banner--hybrid  { background-image: url('../img/banner-hybrid.jpg'); }
.dsp-banner--subsidy { background-image: url('../img/banner-subsidy.jpg'); }
.dsp-banner--about   { background-image: url('../img/banner-about.jpg'); }
.dsp-banner--contact { background-image: url('../img/banner-contact.jpg'); }


/* == 22  NATIVE ELEMENTOR WIDGETS =========================================
   Styling for stock Elementor widgets that carry our classes, so a page can
   be built entirely from native widgets and still look like the design.
   ====================================================================== */

/* Image Box — used for the service cards */
.dsp-page .dsp-card.elementor-widget-image-box .elementor-image-box-wrapper { text-align: left; }
.dsp-page .dsp-card .elementor-image-box-img { margin-bottom: 1.2rem; }
.dsp-page .dsp-card .elementor-image-box-img img { border-radius: var(--dsp-radius); }
.dsp-page .dsp-card .elementor-image-box-title {
  font-family: var(--dsp-display);
  font-size: var(--dsp-h3);
  font-weight: 600;
  color: var(--dsp-ink);
  margin-bottom: .55rem;
}
.dsp-page .dsp-card .elementor-image-box-description {
  font-family: var(--dsp-text);
  color: var(--dsp-body);
  line-height: 1.68;
}

/* Icon Box */
.dsp-page .dsp-card .elementor-icon-box-title { font-family: var(--dsp-display); }
.dsp-page .dsp-card .elementor-icon { color: var(--dsp-accent); }

/* Icon List given .dsp-ticks */
.dsp-page .dsp-ticks .elementor-icon-list-items { list-style: none; margin: 0; padding: 0; }
.dsp-page .dsp-ticks .elementor-icon-list-item {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: .62rem;
  font-size: .96rem;
}
.dsp-page .dsp-ticks .elementor-icon-list-item::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--dsp-accent);
}
.dsp-page .dsp-ticks .elementor-icon-list-icon { display: none; }

/* Accordion / Toggle given .dsp-faq */
.dsp-page .dsp-faq .elementor-accordion-item,
.dsp-page .dsp-faq .elementor-toggle-item {
  border: 0;
  border-bottom: 1px solid var(--dsp-line);
}
.dsp-page .dsp-faq .elementor-tab-title {
  font-family: var(--dsp-display);
  font-size: 1.03rem;
  font-weight: 600;
  color: var(--dsp-ink);
  padding: 1.35rem 0;
  border: 0;
  background: transparent;
}
.dsp-page .dsp-faq .elementor-tab-title.elementor-active,
.dsp-page .dsp-faq .elementor-tab-title:hover { color: var(--dsp-accent); }
.dsp-page .dsp-faq .elementor-tab-content {
  border: 0;
  padding: 0 3rem 1.35rem 0;
  font-family: var(--dsp-text);
  color: var(--dsp-body);
  line-height: 1.68;
}
.dsp-page .dsp-faq .elementor-accordion-icon { color: var(--dsp-accent); }

/* Elementor Button given .dsp-btn */
.dsp-page .elementor-button.dsp-btn {
  font-family: var(--dsp-text);
  font-weight: 600;
  font-size: .95rem;
  padding: .95rem 1.6rem;
  border-radius: var(--dsp-radius);
}
.dsp-page .elementor-button.dsp-btn--primary { background: var(--dsp-accent); color: #fff; }
.dsp-page .elementor-button.dsp-btn--primary:hover { background: var(--dsp-ink); }

/* Google Maps widget */
.dsp-page .elementor-widget-google_maps iframe {
  border: 1px solid var(--dsp-line);
  border-radius: var(--dsp-radius);
}

/* Heading widget given .dsp-eyebrow — Elementor wraps it in a title tag */
.dsp-page .dsp-eyebrow.elementor-widget-heading .elementor-heading-title,
.dsp-page .elementor-heading-title.dsp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--dsp-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dsp-muted);
}
.dsp-page .dsp-eyebrow.elementor-widget-heading .elementor-heading-title::before,
.dsp-page .elementor-heading-title.dsp-eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--dsp-accent);
  flex: none;
}
.dsp-dark .dsp-eyebrow.elementor-widget-heading .elementor-heading-title { color: rgba(255,255,255,.62); }


/* == 23  ELEMENTOR LAYOUT CLASSES =========================================
   These turn stock Elementor sections and columns into the design system's
   layout pieces. Add the class in Advanced > CSS Classes.
   ====================================================================== */

/* Two sections in a row would otherwise double up their vertical padding.
   Put dsp-section--flush-top on the second one.                           */
.dsp-section--flush-top { padding-top: 0 !important; }
.dsp-section--flush-bottom { padding-bottom: 0 !important; }

/* A narrower measure — used for FAQ blocks, where long lines hurt reading. */
.elementor-section.dsp-narrow > .elementor-container { max-width: 860px; }

/* A column that behaves as a card. The styling sits on the inner wrap so the
   gap between Elementor columns stays intact.                              */
.elementor-column.dsp-card > .elementor-widget-wrap {
  position: relative;
  background: var(--dsp-white);
  border: 1px solid var(--dsp-line);
  border-radius: var(--dsp-radius);
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  height: 100%;
  align-content: start;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.elementor-column.dsp-card > .elementor-widget-wrap::after {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  background: var(--dsp-accent);
  border-radius: var(--dsp-radius) var(--dsp-radius) 0 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.elementor-column.dsp-card:hover > .elementor-widget-wrap {
  transform: translateY(-3px);
  box-shadow: var(--dsp-shadow);
  border-color: transparent;
}
.elementor-column.dsp-card:hover > .elementor-widget-wrap::after { opacity: 1; }
.elementor-column.dsp-card .elementor-widget:last-child { margin-bottom: 0; }
.elementor-column.dsp-card .elementor-widget-heading { margin-bottom: .55rem; }
/* An image at the top of a card should meet the card edges */
.elementor-column.dsp-card .elementor-widget-dspeco-image:first-child {
  margin: calc(-1 * clamp(1.4rem, 1.1rem + 1vw, 2rem));
  margin-bottom: 1.3rem;
}
.elementor-column.dsp-card .elementor-widget-dspeco-image:first-child .dsp-img {
  border-radius: var(--dsp-radius) var(--dsp-radius) 0 0;
}
.elementor-column.dsp-card--flat:hover > .elementor-widget-wrap {
  transform: none;
  box-shadow: none;
  border-color: var(--dsp-line);
}
.elementor-column.dsp-card--flat > .elementor-widget-wrap::after { display: none; }

/* A column whose widgets sit in a row — used for pairs of buttons. */
.elementor-column.dsp-btnrow > .elementor-widget-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
}
.elementor-column.dsp-btnrow > .elementor-widget-wrap > .elementor-widget {
  width: auto;
  margin: 0;
}
@media (min-width: 900px) {
  /* In a two-column call-to-action, push the buttons to the right. */
  .dsp-cta .elementor-column.dsp-btnrow > .elementor-widget-wrap { justify-content: flex-end; }
  .dsp-banner .elementor-column.dsp-btnrow > .elementor-widget-wrap { align-items: flex-end; }
}
@media (max-width: 639px) {
  .elementor-column.dsp-btnrow > .elementor-widget-wrap > .elementor-widget { width: 100%; }
  .elementor-column.dsp-btnrow .elementor-button { width: 100%; }
}

/* Breadcrumb line inside a Text Editor widget */
.dsp-page .dsp-crumb p {
  font-family: var(--dsp-mono);
  font-size: .74rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin: 0 0 1.2rem;
}
.dsp-page .dsp-crumb a { color: rgba(255,255,255,.75); text-decoration: none; }
.dsp-page .dsp-crumb a:hover { color: #fff; }

/* Note paragraph inside a Text Editor widget */
.dsp-page .dsp-note p {
  font-size: .87rem;
  color: var(--dsp-muted);
  margin: 0;
}
.dsp-page .dsp-note {
  padding-left: 1.1rem;
  border-left: 2px solid var(--dsp-line);
}
.dsp-dark .dsp-note p { color: rgba(255,255,255,.62); }

/* Lede paragraph inside a Text Editor widget */
.dsp-page .dsp-lede p {
  font-size: var(--dsp-lede);
  line-height: 1.62;
  max-width: 62ch;
  margin: 0;
}
.dsp-dark .dsp-lede p { color: rgba(255,255,255,.8); }

/* Vertically centre the two halves of a split section */
@media (min-width: 900px) {
  .dsp-page.elementor-section > .elementor-container { align-items: center; }
  .dsp-page.dsp-banner > .elementor-container { align-items: flex-end; }
}


/* == 24  STICKY TRANSLUCENT HEADER ========================================
   Astra's own transparent and sticky header are Pro features, so both are
   built here instead. The header floats over the hero, darkens once you
   scroll, and keeps the whole menu — including sub-menus — legible on it.
   ====================================================================== */

:root {
  --dsp-header-h: 86px;          /* desktop header height, used for offsets */
  --dsp-header-bg: rgba(6, 24, 44, .55);
  --dsp-header-bg-stuck: rgba(6, 24, 44, .88);
}

.site-header,
.ast-main-header-wrap {
  position: sticky;
  top: 0;
  z-index: 500;
}

.site-header {
  background: var(--dsp-header-bg);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* Darkens and lifts once the page scrolls — class added by dspeco.js */
body.dsp-stuck .site-header {
  background: var(--dsp-header-bg-stuck);
  border-bottom-color: rgba(255, 255, 255, .16);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8);
}

/* The WordPress admin bar sits above it when you are logged in */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* The header sits on a dark background now, so everything in it goes light */
.site-header .main-header-menu .menu-link,
.site-header .main-navigation .menu-link,
.site-header .site-title a,
.site-header .ast-builder-layout-element .ast-header-html {
  color: rgba(255, 255, 255, .86);
}
.site-header .main-header-menu .menu-link:hover,
.site-header .main-header-menu .current-menu-item > .menu-link,
.site-header .main-header-menu .current-menu-ancestor > .menu-link {
  color: #fff;
}
/* A gold underline marks the page you are on */
.site-header .main-header-menu > .menu-item > .menu-link { position: relative; }
.site-header .main-header-menu > .current-menu-item > .menu-link::after,
.site-header .main-header-menu > .current-menu-ancestor > .menu-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .35rem;
  height: 2px;
  background: var(--dsp-gold);
}
/* Astra draws the dropdown arrow with an icon font or svg */
.site-header .ast-icon,
.site-header .ast-icon svg { fill: currentColor; color: inherit; }

/* The header CTA menu item keeps its solid button */
.site-header .main-header-menu .dsp-nav-cta > .menu-link {
  background: var(--dsp-blue);
  color: #fff !important;
}
.site-header .main-header-menu .dsp-nav-cta > .menu-link:hover { background: var(--dsp-blue-lt); }
.site-header .main-header-menu .dsp-nav-cta > .menu-link::after { display: none; }

/* --- SUB-MENUS -----------------------------------------------------------
   Astra ships these white with dark text, which is unreadable against this
   header and was clipping. Rebuilt: dark panel, room to breathe, and never
   cut off at the right edge of the screen.                                */

.site-header .main-header-menu .sub-menu,
.site-header .main-navigation .sub-menu {
  background: rgba(6, 24, 44, .97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--dsp-radius);
  box-shadow: 0 22px 48px -20px rgba(0, 0, 0, .75);
  padding: .35rem 0;
  min-width: 250px;
  width: auto;
  overflow: visible;
}
.site-header .main-header-menu .sub-menu .menu-link {
  color: rgba(255, 255, 255, .84);
  padding: .72rem 1.15rem;
  line-height: 1.4;
  white-space: normal;      /* long items wrap instead of being cut off */
  border: 0;
}
.site-header .main-header-menu .sub-menu .menu-item:hover > .menu-link,
.site-header .main-header-menu .sub-menu .menu-link:focus-visible {
  background: rgba(255, 255, 255, .09);
  color: #fff;
}
.site-header .main-header-menu .sub-menu .current-menu-item > .menu-link {
  color: #fff;
  box-shadow: inset 3px 0 0 var(--dsp-gold);
}
/* Nothing in the chain may clip the dropdown */
.site-header .ast-builder-menu,
.site-header .main-navigation,
.site-header .main-header-menu,
.site-header .main-header-menu > .menu-item { overflow: visible; }

/* Menus near the right edge open leftwards so they stay on screen */
.site-header .main-header-menu > .menu-item:nth-last-child(-n+2) > .sub-menu {
  left: auto;
  right: 0;
}
/* Third-level menus flip side rather than running off the viewport */
.site-header .sub-menu .menu-item-has-children > .sub-menu { left: 100%; right: auto; }
.site-header .main-header-menu > .menu-item:nth-last-child(-n+2) .sub-menu .sub-menu {
  left: auto;
  right: 100%;
}

/* --- MOBILE HEADER ------------------------------------------------------ */
#ast-mobile-header,
.ast-mobile-header-wrap .ast-primary-header-bar { background: transparent; }
.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-trigger-fill,
.ast-button-wrap .menu-toggle.ast-mobile-menu-trigger-minimal { color: #fff; background: transparent; }
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-header-wrap .main-header-bar-navigation {
  background: #06182C;
}
.ast-mobile-popup-drawer .menu-link,
.ast-mobile-header-wrap .main-header-menu .menu-link {
  color: rgba(255, 255, 255, .88) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.ast-mobile-popup-drawer .sub-menu .menu-link { color: rgba(255, 255, 255, .7) !important; }
.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close { color: #fff; }
.ast-mobile-popup-drawer .ast-submenu-expanded > .ast-menu-toggle { color: var(--dsp-gold); }

@media (max-width: 921px) {
  :root { --dsp-header-h: 70px; }
}

/* --- CONTENT OFFSET -----------------------------------------------------
   The header overlays the top of the page, so the first block on every page
   needs to start below it.                                                */
.dsp-slide { padding-top: calc(clamp(3.5rem, 2rem + 6vw, 6rem) + var(--dsp-header-h)); }
.dsp-banner { padding-top: calc(var(--dsp-pad-y) + var(--dsp-header-h) * .55); }


/* == 25  CREATIVE LAYOUT COMPONENTS =======================================
   Extra pieces the pages are built from, all usable with free Elementor by
   adding a CSS class in the Advanced tab. Full list in the Elementor guide.
   ====================================================================== */

/* 25.1  Image band — a full-bleed picture with a single statement on it.
   Put on a section: "dsp-page dsp-full dsp-band dsp-band--solar"          */
.dsp-band {
  position: relative;
  background-size: cover;
  background-position: center;
  isolation: isolate;
  padding-block: clamp(4rem, 3rem + 5vw, 7.5rem);
}
.dsp-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(6,24,44,.86) 0%, rgba(6,24,44,.66) 50%, rgba(6,24,44,.88) 100%);
}
.dsp-band .elementor-container { max-width: 900px !important; text-align: center; }
.dsp-band h2, .dsp-band .elementor-heading-title {
  color: #fff;
  font-size: clamp(1.55rem, 1.2rem + 1.7vw, 2.4rem);
  line-height: 1.24;
  letter-spacing: -.02em;
}
.dsp-band p { color: rgba(255,255,255,.82); }
.dsp-band .dsp-eyebrow { color: rgba(255,255,255,.66); justify-content: center; }
.dsp-band--solar   { background-image: url('../img/band-solar.jpg'); }
.dsp-band--wind    { background-image: url('../img/band-wind.jpg'); }
.dsp-band--water   { background-image: url('../img/band-water.jpg'); }
.dsp-band--hybrid  { background-image: url('../img/band-hybrid.jpg'); }
.dsp-band--subsidy { background-image: url('../img/band-subsidy.jpg'); }
.dsp-band--about   { background-image: url('../img/band-about.jpg'); }
.dsp-band--cta     { background-image: url('../img/band-cta.jpg'); }

/* 25.2  Framed image — an offset brand-colour block behind the picture. */
/* Put "dsp-framed" on the Image widget (Advanced > CSS Classes). */
.elementor-widget.dsp-framed { position: relative; isolation: isolate; }
.elementor-widget.dsp-framed::before {
  content: "";
  position: absolute;
  inset: auto -14px -14px auto;
  width: 58%;
  height: 58%;
  background: var(--dsp-accent);
  border-radius: var(--dsp-radius);
  z-index: -1;
}
.elementor-widget.dsp-framed .dsp-img { position: relative; z-index: 1; }
@media (max-width: 639px) {
  .elementor-widget.dsp-framed::before { inset: auto -8px -8px auto; }
}

/* 25.3  A pull quote — one sentence, set large, with a colour rule. */
.dsp-quote { border-left: 3px solid var(--dsp-accent); padding-left: clamp(1.1rem, .8rem + 1vw, 2rem); }
.dsp-quote p {
  font-family: var(--dsp-display);
  font-size: clamp(1.15rem, 1rem + .9vw, 1.65rem);
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: -.018em;
  color: var(--dsp-ink);
}
.dsp-dark .dsp-quote p { color: #fff; }

/* 25.4  Numbered cards — for sets where the order carries meaning. */
.elementor-column.dsp-card--num { counter-increment: dspcard; }
.dsp-numset { counter-reset: dspcard; }
.elementor-column.dsp-card--num > .elementor-widget-wrap::before {
  content: "0" counter(dspcard);
  font-family: var(--dsp-mono);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--dsp-accent);
  width: 100%;
  margin-bottom: .9rem;
}

/* 25.5  A staggered set of images — the middle one drops, the outer two rise. */
@media (min-width: 900px) {
  .dsp-collage .elementor-column:nth-child(1) { transform: translateY(-18px); }
  .dsp-collage .elementor-column:nth-child(2) { transform: translateY(26px); }
  .dsp-collage .elementor-column:nth-child(3) { transform: translateY(-8px); }
}

/* 25.6  Bigger figures, for a stat row that should carry a section on its own. */
.dsp-spec--big .dsp-spec dd { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); }
.dsp-spec--big .dsp-spec > div { padding-block: 2rem; }

/* 25.7  An angled top edge, so a dark section cuts into the one above it. */
.dsp-notch { clip-path: polygon(0 3.2vw, 100% 0, 100% 100%, 0 100%); margin-top: -3.2vw; }
.dsp-notch-b { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.2vw), 0 100%); }
@media (max-width: 767px) { .dsp-notch, .dsp-notch-b { clip-path: none; margin-top: 0; } }

/* 25.8  A card that sits on the brand colour rather than on white. */
.elementor-column.dsp-card--dark > .elementor-widget-wrap {
  background: linear-gradient(160deg, var(--dsp-ink) 0%, var(--dsp-ink-2) 100%);
  border-color: transparent;
}
.elementor-column.dsp-card--dark .elementor-heading-title { color: #fff; }
.elementor-column.dsp-card--dark p { color: rgba(255,255,255,.8); }
.elementor-column.dsp-card--dark .dsp-ticks .elementor-icon-list-item { color: rgba(255,255,255,.84); }

/* 25.9  Section heading centred, for the occasional change of rhythm. */
.dsp-center-head .elementor-container { text-align: center; }
.dsp-center-head .dsp-eyebrow { justify-content: center; }
.dsp-center-head .dsp-lede p { margin-inline: auto; }


/* == 26  FORM GRID ========================================================
   Layout for the DSPeco Form widget. Each field carries "half" or "full"
   from its own panel setting; on phones everything goes full width.
   ====================================================================== */

.dsp-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.dsp-form__field.is-full { grid-column: 1 / -1; }
.dsp-form__field label span { color: var(--dsp-amber); margin-left: .15rem; }
.dsp-form__consent {
  font-size: .82rem;
  color: var(--dsp-muted);
  margin: 0;
}
@media (max-width: 639px) {
  .dsp-form__grid { grid-template-columns: 1fr; }
}

/* The call-to-action band now sits on a picture rather than flat ink. */
.dsp-cta.dsp-band--cta {
  background-image: url('../img/band-cta.jpg');
  background-size: cover;
  background-position: center;
  padding-block: clamp(3.2rem, 2.2rem + 4vw, 5rem);
}
.dsp-cta.dsp-band--cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, rgba(6,24,44,.93) 0%, rgba(6,24,44,.84) 55%, rgba(14,44,74,.72) 100%);
  filter: none;
  border-radius: 0;
  width: auto;
  aspect-ratio: auto;
}
.dsp-cta.dsp-band--cta > .elementor-container { position: relative; z-index: 1; }