/* ==== continuity-light-base ==== */
:root{--c-navy:#16233F;--c-petrol:#162E40;--c-slate:#5D6472;--c-bronze:#AC8748;
 --c-ember:#AD500F;--c-amber:#E87B1E;--c-sand:#DCD5C6;--c-parchment:#E8E0CF;
 --c-warmwhite:#F4F2EE;--c-paper:#FBFAF7;
 /* slate family — replaces the warm sand/parchment neutrals. Slate lives here
    as the cool light band and the hairline, not as a dark band. */
 --c-mist:#E9ECF0;--c-rule:#C9CDD6;}
html,body{background:var(--c-paper)!important;}
/* Hero art is hotlinked from images.pexels.com in the published Webflow
   stylesheet (dividend-energy-partners.webflow.shared.*.css) — an external
   dependency on a stock host for the top of the page. Point it at the local
   asset instead. NOTE: this fixes the staged bundle only; the live Webflow
   site still carries the Pexels URL until it is changed there too. */
.dep-hero-bg{background-image:url("https://cdn.prod.website-files.com/636156aa7196312107002459/6a80bb4272421534b5356c06_hero-plant.jpg")!important;
  background-size:cover!important;background-position:center center!important;
  background-repeat:no-repeat!important}
/* three-tone banding: paper reads, parchment accents, navy anchors.
   the dark bands are why the hero and footer work — the middle needs them too. */
.dep-card{box-shadow:0 1px 2px rgba(22,35,63,.05),0 10px 28px rgba(22,35,63,.05)!important}
/* the dark bands set their own inherited colour — body's is recoloured to navy,
   so anything inheriting inside them would otherwise land navy-on-navy */
.dep-section-alt{color:var(--c-warmwhite)!important}
.dep-section-alt .dep-section-title,.dep-section-alt h2,.dep-section-alt h3,
.dep-section-alt h4,.dep-section-alt h5{color:#FBFAF7!important}
/* footer fine print was 2.7:1 and 2.1:1 on the dark ground — both below AA.
   two tiers kept so the disclaimer still reads as fine print. */
.dep-footer-bottom-text{color:#8A9AB5!important}   /* 6.7:1 — matches the address block */
.dep-disclaimer{color:#7C8AA5!important}           /* 5.5:1 — dimmer, still comfortably AA */
/* bolder: amber earns the primary actions + the headline figure */
.dep-btn-primary,.dep-nav-cta,.dep-form-submit,input[type=submit],button.w-button,.w-button.dep-btn-primary{
  background-color:var(--c-amber)!important;border-color:var(--c-amber)!important;color:#FBFAF7!important}
.dep-eyebrow,.dep-eyebrow div,[class*="eyebrow"]{color:var(--c-ember)!important;font-weight:700!important}
.dep-eyebrow-line,[class*="eyebrow-line"]{background-color:var(--c-amber)!important}
/* stronger separation: light bands get a hairline, dark bands separate by colour alone */
section{border-top:1px solid var(--c-rule)!important}
.dep-section-alt{border-top-color:rgba(233,236,240,.14)!important}
/* cards lift off the band */
[class*="card"],[class*="-item"],[class*="panel"]{border-color:var(--c-rule)!important}
#stg-flag{position:fixed;left:0;right:0;bottom:0;z-index:99999;background:#16233F;
 color:#F4F2EE;font:600 11px/1.5 -apple-system,Helvetica,Arial,sans-serif;
 letter-spacing:.06em;text-align:center;padding:7px 12px;border-top:3px solid #E87B1E}
#stg-flag b{color:#E8B77E;font-weight:700}

/* ==== continuity-texture ==== */
/* ---- TEXTURE ------------------------------------------------------------
   Light bands get laid-paper grain; navy bands get engraved hatching. Both
   ride on ::before so the recolour script keeps full control of background-color.
   Opacity is deliberately at the edge of perception — you should notice the
   absence of flatness, not the texture itself. */
.dep-section,.dep-section-alt,.dep-stats-bar{position:relative}
.dep-section>*,.dep-section-alt>*,.dep-stats-bar>*{position:relative;z-index:1}
.dep-section::before,.dep-section-alt::before,.dep-stats-bar::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
/* fractal-noise grain — reads as laid paper rather than flat screen beige */
.dep-section::before,.dep-stats-bar::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.032}
.dep-stats-bar::before{opacity:.045}
/* engraved hatching — the register of a share certificate, not a startup gradient */
.dep-section-alt::before{
  background-image:repeating-linear-gradient(115deg,rgba(233,236,240,.05) 0 1px,transparent 1px 9px);
  opacity:1}

/* ---- MOTION -------------------------------------------------------------
   .dep-anim/.dep-vis were defined but never wired to anything. Replaced with
   a reveal that actually runs. 16px of travel — a settle, not an entrance. */
.dep-rise{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.dep-rise.dep-in{opacity:1;transform:none}

/* ---- MOTION THAT CARRIES CONTENT ---------------------------------------
   The decline curve is the one graphic on the page that explains the
   business — production falling over 25 years — so it's the one worth
   animating. A left-to-right wipe draws it the way the years run. Using
   clip-path rather than stroke-dashoffset keeps the dashed "settled
   production" line dashed instead of unravelling it. */
#about-chart-target.dep-rise svg{clip-path:inset(0 100% 0 0)}
#about-chart-target.dep-in svg{clip-path:inset(0 0 0 0);
  transition:clip-path 1.7s cubic-bezier(.25,.7,.35,1) .25s}
/* every section opens by drawing its rule out from the left — the same
   gesture eight times, which is what makes it read as a system */
.dep-eyebrow .dep-eyebrow-line{transform-origin:left center}
.dep-eyebrow.dep-rise .dep-eyebrow-line{transform:scaleX(0)}
.dep-eyebrow.dep-in .dep-eyebrow-line{transform:scaleX(1);
  transition:transform .75s cubic-bezier(.22,.61,.36,1) .12s}

/* ---- PROGRESSIVE ILLUMINATION -------------------------------------------
   Prose resolves word by word as the block scrolls through, pacing the read
   instead of dumping it. Deliberate departure from the reference: their dim
   state is near-white and would fail AA. Here the range runs slate → navy,
   so BOTH ends are legible — 5.0:1 dim, 13–15:1 lit. Words also start at the
   dim colour rather than transparent, so a script failure leaves prose
   readable rather than invisible. */
.dep-w{color:var(--c-slate);transition:color .5s cubic-bezier(.22,.61,.36,1)}
.dep-w.lit{color:var(--c-navy)}
.dep-section-alt .dep-w{color:#8A9AB5}
.dep-section-alt .dep-w.lit{color:#FBFAF7}

@media (prefers-reduced-motion:reduce){
  .dep-w{color:var(--c-navy)!important}
  .dep-section-alt .dep-w{color:#FBFAF7!important}
}
/* cards lift on hover — 3px, the amount you feel without seeing */
.dep-card,.dep-svc-card,.dep-feature-item{
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1)}
.dep-section .dep-card:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(22,35,63,.06),0 18px 40px rgba(22,35,63,.10)!important}
.dep-hero-bg,.dep-hero-content{will-change:transform}

/* ---- ICON WEIGHT --------------------------------------------------------
   The icons were drawn at stroke-width 1.2–1.5 against different viewBoxes,
   so their *rendered* stroke ranged 0.9px–1.5px and they read inconsistently
   as well as thin. Normalised to ~1.8px rendered by dividing through each
   icon's viewBox-to-render ratio. Chart and hero decoration are left alone. */
.dep-stat-icon svg,.dep-stat-icon svg *,
.dep-svc-icon svg,.dep-svc-icon svg *{stroke-width:2.4}          /* 48→36 and 64→48, ratio .75 */
.dep-icon-box svg,.dep-icon-box svg *,
.dep-tf-icon svg,.dep-tf-icon svg *,
.dep-ci-icon-hidden svg,.dep-ci-icon-hidden svg *{stroke-width:1.8}  /* rendered 1:1 */
.dep-stat-icon svg *,.dep-svc-icon svg *,.dep-icon-box svg *,
.dep-tf-icon svg *,.dep-ci-icon-hidden svg *{stroke-linecap:round;stroke-linejoin:round}
/* dashed strokes need butt caps and a longer dash at this weight — round caps
   overrun the 2-unit gaps and the dashes close up into a solid line */
.dep-stat-icon svg [stroke-dasharray],.dep-icon-box svg [stroke-dasharray],
.dep-svc-icon svg [stroke-dasharray],.dep-tf-icon svg [stroke-dasharray]{
  stroke-linecap:butt;stroke-dasharray:3.2 2.6}

/* ---- NAV ----------------------------------------------------------------
   Was warm white #F4F2EE — a tone that appeared nowhere else on the page.
   Now it rides transparent over the hero and resolves to navy once you leave
   it, so the bar belongs to the same system as the bands and the footer.
   The wordmark goes back to gold-on-dark: the treatment the footer already uses. */
.dep-nav{background-color:transparent!important;box-shadow:none!important;
  transition:background-color .45s ease,box-shadow .45s ease}
.dep-nav.dep-nav-solid{background-color:rgba(22,35,63,.94)!important;
  -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
  box-shadow:0 1px 0 rgba(232,224,207,.12)!important}

@media (prefers-reduced-motion:reduce){
  .dep-rise{opacity:1!important;transform:none!important}
  .dep-hero-bg,.dep-hero-content{transform:none!important;will-change:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}