/* ============================================================
   Abundant Energy Partners — abundantenergypartners.com (TBD)
   Sister brand of Abundant Mines. Navy + electric cyan.
   Energy-developer facing. Transparent about flexible compute.
   Premium build: layered hero, scroll reveals, animated metrics.
   Shared stylesheet across all pages.
   ============================================================ */

:root{
  /* Light & airy, Abundant Mines sky blue. No navy, no purple.
     --navy is repurposed to near-black ink (token name kept so all
     existing color refs resolve); tasteful BLACK used for dark accents. */
  --navy:#0b0f13;      /* near-black ink: headings, body text, dark accents */
  --ink:#0b0f13;
  --indigo:#12171c;    /* charcoal, only for black-accent section depth */
  --black:#000000;
  --slate:#47555f;
  --mist:#7b8893;
  --fog:#eef5f9;
  --line:#d7e6ee;      /* sky-tinted hairline */
  --paper:#ffffff;
  --wash:#f2fafe;      /* pale sky wash */
  --wash-2:#e7f5fc;
  --cyan:#00d1fe;      /* AM sky blue */
  --cyan-2:#5fe3ff;
  --cyan-deep:#0093c4; /* deep sky: links, eyebrows, headline numerals */
  --cyan-soft:#e6f9ff;
  --green:#2ea582;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);background:var(--paper);
  line-height:1.65;font-size:17px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}

h1,h2,h3,h4{font-family:"Space Grotesk","Segoe UI",Helvetica,Arial,sans-serif;line-height:1.06;letter-spacing:-0.02em;font-weight:600;color:var(--navy)}
h1{font-size:clamp(2.5rem,1.4rem + 4.2vw,4.3rem);font-weight:700;letter-spacing:-0.035em}
h2{font-size:clamp(1.85rem,1.3rem + 1.8vw,2.75rem)}
h3{font-size:1.25rem;letter-spacing:-0.01em}
p{margin-bottom:1.05rem}
a{color:var(--cyan-deep);text-decoration:none;transition:color .2s}
a:hover{color:var(--navy)}
strong,b{font-weight:600}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--cyan-deep);margin-bottom:1.3rem;display:inline-flex;align-items:center;gap:.7rem;font-weight:500;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--cyan-deep);opacity:.8}
section.dark .eyebrow{color:var(--cyan-2)}
section.dark .eyebrow::before{background:var(--cyan-2)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ---------- Reveal (content is ALWAYS visible; entrance is a pure enhancement) ---------- */
[data-reveal]{opacity:1;transform:none}
.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal][data-delay="1"]{transition-delay:.07s}
.js [data-reveal][data-delay="2"]{transition-delay:.14s}
.js [data-reveal][data-delay="3"]{transition-delay:.21s}
@media(prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:60;transition:background .3s,box-shadow .3s,border-color .3s;
  background:rgba(255,255,255,.72);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent}
header.scrolled{background:rgba(255,255,255,.94);border-bottom-color:var(--line);box-shadow:0 1px 24px rgba(9,2,29,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Space Grotesk",sans-serif;
  font-weight:700;font-size:1.1rem;color:var(--navy);letter-spacing:-0.02em;white-space:nowrap;flex-shrink:0}
.brand .accent{color:var(--cyan-deep)}
.nav ul{display:none;gap:26px;list-style:none;flex-wrap:nowrap;margin:0 auto}
@media(min-width:1000px){.nav ul{display:flex}}
.nav ul a{color:var(--slate);font-size:.92rem;font-weight:500;position:relative;padding:6px 0;white-space:nowrap}
.nav ul a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--cyan);transition:width .25s var(--ease)}
.nav ul a:hover,.nav ul a.active{color:var(--navy)}
.nav ul a:hover::after,.nav ul a.active::after{width:100%}
.nav .cta{display:none;white-space:nowrap;flex-shrink:0;padding:11px 20px;font-size:.9rem}
@media(min-width:1000px){.nav .cta{display:inline-flex}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;background:var(--cyan);color:var(--navy);
  padding:14px 26px;border-radius:6px;font-weight:600;font-size:.97rem;letter-spacing:.01em;
  border:1px solid var(--cyan);transition:transform .18s var(--ease),box-shadow .25s,background .2s;
  box-shadow:0 6px 20px -8px rgba(0,209,254,.55)}
.btn:hover{background:var(--cyan-2);border-color:var(--cyan-2);color:var(--navy);transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(0,209,254,.7)}
.btn .arr{transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--cyan-deep);background:transparent;color:var(--navy);transform:translateY(-2px)}
section.dark .btn.ghost{color:#fff;border-color:rgba(255,255,255,.3)}
section.dark .btn.ghost:hover{border-color:var(--cyan)}
.hero .btn.ghost{color:var(--ink);border-color:var(--line)}
.hero .btn.ghost:hover{border-color:var(--cyan-deep);color:var(--ink)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:2.2rem}

/* ---------- Sections ---------- */
section{padding:106px 0;position:relative}
@media(max-width:640px){section{padding:72px 0}}
section.dark{background:
  radial-gradient(900px 520px at 85% -10%,rgba(0,209,254,.18),transparent 60%),
  linear-gradient(180deg,#161c21,#000000);color:#d7dce6}
section.dark h2,section.dark h3,section.dark h4{color:#fff}
section.dark p{color:#b3bccb}
section.wash{background:var(--wash)}
.lead{font-size:clamp(1.16rem,1.05rem + .5vw,1.4rem);color:var(--slate);max-width:780px;line-height:1.5;font-weight:400}
section.dark .lead{color:#c6cedd}
.section-head{max-width:768px;margin-bottom:3.1rem}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;color:var(--ink);
  background:
   radial-gradient(1100px 620px at 82% -8%,rgba(0,209,254,.20),transparent 58%),
   radial-gradient(820px 600px at 2% 112%,rgba(0,147,196,.10),transparent 60%),
   linear-gradient(178deg,#ffffff 0%,#edf8fd 58%,#e2f3fb 100%);
  padding:132px 0 0;border-bottom:1px solid var(--line)}
.hero.short{padding:120px 0 96px}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(0,120,160,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,120,160,.05) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(900px 600px at 78% 0%,#000,transparent 75%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{max-width:17ch;color:var(--ink)}
.hero.short h1{max-width:20ch}
.hero .eyebrow{color:var(--cyan-deep)}
.hero .eyebrow::before{background:var(--cyan-deep)}
.hero .lead{margin-top:1.6rem;color:var(--slate);max-width:680px}
.hero-status{display:inline-flex;align-items:center;gap:10px;
  font-family:"IBM Plex Mono",monospace;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist);margin-top:2.3rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(57,185,138,.18);animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(57,185,138,.16)}50%{box-shadow:0 0 0 7px rgba(57,185,138,.05)}}

/* Hero metric panel (floating) */
.metric-panel{position:relative;z-index:2;margin-top:4.4rem;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px 16px 0 0;
  backdrop-filter:blur(6px);display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.metric-panel{grid-template-columns:repeat(4,1fr)}}
.metric{padding:32px 30px;border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.metric:last-child{border-right:none}
@media(max-width:759px){.metric:nth-child(even){border-right:none}}
.metric .n{font-family:"IBM Plex Mono",monospace;font-size:clamp(1.7rem,1.4rem + 1.1vw,2.4rem);color:#fff;font-weight:500;letter-spacing:-0.02em;display:block}
.metric .l{font-size:.83rem;color:#9098a8;margin-top:8px;line-height:1.4}
.metric .n::before{content:"";display:block;width:30px;height:2px;background:var(--cyan);margin-bottom:16px}

/* Hero impact stat (headline number) */
.hero-stat{position:relative;z-index:2;margin-top:3.4rem;display:grid;grid-template-columns:1fr;
  background:rgba(255,255,255,.78);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 70px -44px rgba(6,60,90,.35)}
@media(min-width:820px){.hero-stat{grid-template-columns:1.2fr 1fr}}
.hero-stat .big{padding:32px 34px;border-bottom:1px solid var(--line)}
@media(min-width:820px){.hero-stat .big{border-bottom:none;border-right:1px solid var(--line)}}
.hero-stat .num{font-family:"IBM Plex Mono",monospace;font-weight:500;color:var(--ink);
  font-size:clamp(2.1rem,1.5rem + 2.2vw,3.2rem);letter-spacing:-0.02em;line-height:1;
  display:flex;align-items:baseline;gap:.34em;flex-wrap:wrap}
.hero-stat .num .arrow{color:var(--cyan-deep)}
.hero-stat .num .to{color:var(--cyan-deep)}
.hero-stat .cap{color:var(--slate);font-size:.9rem;margin-top:14px;line-height:1.55;max-width:44ch}
.hero-stat .cap b{color:var(--ink);font-weight:600}
.hero-stat .side{padding:26px 32px;display:flex;flex-direction:column;justify-content:center;gap:15px;background:var(--wash)}
.hero-stat .row{display:flex;align-items:baseline;gap:13px}
.hero-stat .row b{font-family:"IBM Plex Mono",monospace;color:var(--cyan-deep);font-weight:600;font-size:.98rem;min-width:78px;flex-shrink:0}
.hero-stat .row span{color:var(--slate);font-size:.88rem;line-height:1.45}

/* ---------- Accent band ---------- */
.band{background:linear-gradient(90deg,var(--cyan-deep),var(--cyan));color:var(--navy);padding:0}
.band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 38px;padding-top:28px;padding-bottom:28px;text-align:center}
.band .item{display:flex;align-items:baseline;gap:11px;font-size:1.01rem;color:#052033}
.band .item .v{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.4rem;letter-spacing:-0.02em;color:var(--navy)}
.band .sep{width:5px;height:5px;border-radius:50%;background:rgba(9,2,29,.35)}
@media(max-width:680px){.band .sep{display:none}}

/* ---------- Cards ---------- */
.grid3{display:grid;grid-template-columns:1fr;gap:24px;margin-top:1rem}
@media(min-width:840px){.grid3{grid-template-columns:repeat(3,1fr)}}
.grid2{display:grid;grid-template-columns:1fr;gap:24px;margin-top:1rem}
@media(min-width:760px){.grid2{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:34px 30px;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;position:relative}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 50px -28px rgba(9,2,29,.28);border-color:#c6dbe6}
section.dark .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
section.dark .card:hover{box-shadow:0 22px 50px -26px rgba(0,0,0,.6);border-color:rgba(0,209,254,.4)}
section.wash .card{background:#fff}
.card .tag{font-family:"IBM Plex Mono",monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--cyan-deep);display:block;margin-bottom:1.1rem}
section.dark .card .tag{color:var(--cyan-2)}
.card h3{margin-bottom:.6rem}
.card p{margin-bottom:0;color:var(--slate);font-size:.97rem}
section.dark .card p{color:#b3bccb}

/* ---------- Steps ---------- */
.steps{counter-reset:step;display:grid;grid-template-columns:1fr;gap:2px;margin-top:1rem;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.step{background:var(--paper);padding:30px 32px;display:grid;grid-template-columns:56px 1fr;gap:22px;align-items:start;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:"IBM Plex Mono",monospace;font-size:.95rem;color:var(--cyan-deep);font-weight:500;padding-top:4px}
.step h3{margin-bottom:.4rem}
.step p{margin-bottom:0;color:var(--slate);font-size:.98rem}

/* ---------- Two-col ---------- */
.cols{display:grid;grid-template-columns:1fr;gap:48px;align-items:start}
@media(min-width:900px){.cols{grid-template-columns:1.05fr .95fr}}
.cols.tight{gap:40px}

/* Checklist / spec */
.check{list-style:none;margin-top:.6rem}
.check li{padding:11px 0 11px 30px;position:relative;color:var(--slate)}
.check li::before{content:"";position:absolute;left:0;top:18px;width:11px;height:11px;border:2px solid var(--cyan-deep);border-top:none;border-right:none;transform:rotate(-45deg)}
section.dark .check li{color:#b9c2d1}
section.dark .check li::before{border-color:var(--cyan)}

.spec{list-style:none;border-top:1px solid var(--line)}
.spec li{padding:18px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:4px}
@media(min-width:520px){.spec li{grid-template-columns:200px 1fr;gap:18px;align-items:baseline}}
.spec b{font-family:"Space Grotesk",sans-serif;color:var(--navy);font-weight:600}
.spec span{color:var(--slate);font-size:.97rem}

/* Tags */
.tags{display:flex;flex-wrap:wrap;gap:11px;margin-top:2.2rem}
.tags span{font-family:"IBM Plex Mono",monospace;font-size:.8rem;background:rgba(255,255,255,.06);
  color:#c6cedd;padding:9px 15px;border-radius:6px;border:1px solid rgba(255,255,255,.1)}
section:not(.dark) .tags span{background:var(--cyan-soft);color:var(--cyan-deep);border-color:#bfeaffff}

/* ---------- Markets ---------- */
.market{border:1px solid var(--line);border-radius:14px;padding:32px;background:#fff;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.market:hover{transform:translateY(-5px);border-color:#c6dbe6;box-shadow:0 24px 50px -30px rgba(9,2,29,.26)}
.market .label{font-family:"IBM Plex Mono",monospace;font-size:.73rem;letter-spacing:.12em;color:var(--cyan-deep);text-transform:uppercase}
.market h3{margin:10px 0 .55rem;color:var(--navy)}
.market p{margin-bottom:0;color:var(--slate);font-size:.97rem}
/* Illustrated market card */
.market.pic{padding:0;overflow:hidden;display:flex;flex-direction:column}
.market .thumb{aspect-ratio:16/9;background:var(--wash-2);overflow:hidden;line-height:0}
.market .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.market.pic:hover .thumb img{transform:scale(1.045)}
.market .m-body{padding:26px 30px 30px}
.market .m-body h3{margin:9px 0 .55rem}

/* Illustrated thumbnail inside a standard card (home preview) */
.card .thumb{aspect-ratio:16/9;background:var(--wash-2);border-radius:10px;overflow:hidden;line-height:0;margin-bottom:22px}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .thumb img{transform:scale(1.045)}

/* Energy-types strip */
.estrip{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:2.6rem}
@media(min-width:620px){.estrip{grid-template-columns:repeat(4,1fr)}}
.estrip .cell{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--wash-2);border:1px solid var(--line)}
.estrip .cell img{width:100%;height:100%;object-fit:cover}
.estrip .cell span{position:absolute;left:0;right:0;bottom:0;padding:20px 12px 9px;
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.06em;color:#dfe6f2;
  background:linear-gradient(180deg,transparent,rgba(6,1,15,.82))}

/* Callout */
.callout{background:var(--cyan-soft);border:1px solid #bde9f7;border-left:3px solid var(--cyan-deep);border-radius:10px;padding:26px 30px;margin-top:1.5rem}
.callout p{margin-bottom:0;color:var(--navy)}
.callout .lbl{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-deep);display:block;margin-bottom:.6rem}

/* Draft/placeholder marker (internal) */
.tbd{background:#fff7e6;border:1px dashed #e0b34e;border-radius:8px;padding:6px 12px;font-family:"IBM Plex Mono",monospace;font-size:.74rem;color:#8a6314;display:inline-block;margin-top:8px}

/* ---------- Form ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:900px){.contact-grid{grid-template-columns:.85fr 1.15fr}}
.contact-side .li{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-side .li:first-of-type{border-top:1px solid var(--line)}
.contact-side .k{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);min-width:96px}
.contact-side .vv{font-weight:500;color:var(--navy)}
.form{display:grid;grid-template-columns:1fr;gap:18px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:34px;box-shadow:0 30px 60px -40px rgba(9,2,29,.28)}
@media(min-width:620px){.form .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}}
label{font-size:.76rem;color:var(--slate);font-weight:600;display:block;margin-bottom:7px;
  font-family:"IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase}
input,select,textarea{width:100%;padding:13px 15px;border:1px solid #cfd6dd;border-radius:8px;
  font-family:inherit;font-size:1rem;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan-deep);box-shadow:0 0 0 3px rgba(0,209,254,.16)}
textarea{min-height:122px;resize:vertical}
.note{font-size:.85rem;color:var(--slate);font-style:italic;margin-top:1.2rem}

/* ---------- CTA band ---------- */
.cta-band{background:
  radial-gradient(700px 400px at 50% 120%,rgba(0,209,254,.28),transparent 60%),
  linear-gradient(180deg,#161c21,#000000);color:#fff;text-align:center;padding:100px 0}
.cta-band h2{color:#fff;max-width:20ch;margin:0 auto}
.cta-band p{max-width:600px;margin:1.1rem auto 0;color:#bcc6d6}
.cta-band .btn{margin-top:2rem}

/* ---------- Footer ---------- */
footer{background:#000000;color:#8a93a6;padding:70px 0 38px;font-size:.92rem}
.footgrid{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:760px){.footgrid{grid-template-columns:2.2fr 1fr 1fr}}
footer .brand{color:#fff;margin-bottom:16px;font-size:1.22rem}
footer .brand .accent{color:var(--cyan)}
footer p{color:#7e879a;max-width:36ch}
footer h4{color:#fff;font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;font-weight:500}
footer a{color:#aeb6c4;display:block;padding:5px 0}
footer a:hover{color:var(--cyan)}
.legal{margin-top:46px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);font-size:.83rem;color:#6b7480;line-height:1.7}