/* ============================================================
   ENERGY STORAGE CONSULTING — shared stylesheet
   Design language: technical / executive / restrained.
   Palette drawn from ESC navy + engineering green, set on a
   near-white "spec sheet" paper. Montserrat carries authority
   in headings; Inter reads cleanly at body size; a monospace
   face is used the way a datasheet uses it — for labels,
   coordinates, and anything that reads as measured fact.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --navy:        #0B2440;
  --navy-2:      #123259;
  --navy-soft:   #2E4A6B;
  --green:       #2E8B67;
  --green-dim:   #E4F0EA;
  --ink:         #10161D;
  --ink-soft:    #4A5560;
  --paper:       #F7F7F5;
  --paper-2:     #EFF0ED;
  --line:        rgba(11,36,64,0.14);
  --line-soft:   rgba(11,36,64,0.08);
  --white:       #FFFFFF;

  --font-head: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  --max: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-head); color:var(--navy); margin:0; line-height:1.15; letter-spacing:-0.01em; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--green);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--green); display:inline-block; }

section{ padding:88px 0; }
@media (max-width:780px){ section{ padding:56px 0; } }

.hairline{ border:none; border-top:1px solid var(--line); margin:0; }

/* ---------- header / nav ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(247,247,245,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0;
}
.logo{
  font-family:var(--font-head); font-weight:800; font-size:17px;
  color:var(--navy); letter-spacing:0.01em;
  display:flex; align-items:center; gap:10px;
}
.logo .mark{
  width:30px; height:30px; flex:none;
}
.logo .word-esc{ color:var(--green); }
nav.primary ul{ display:flex; gap:34px; }
nav.primary a{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--navy-soft); position:relative; padding:4px 0;
  transition:color .15s ease;
}
nav.primary a:hover{ color:var(--navy); }
nav.primary a.active{ color:var(--navy); }
nav.primary a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--green);
}
.nav-right{ display:flex; align-items:center; gap:28px; }
.btn{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
  padding:12px 22px; border-radius:2px; display:inline-flex; align-items:center; gap:10px;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--navy); color:var(--white); }
.btn-primary:hover{ background:var(--green); transform:translateY(-1px); }
.btn-outline{ border:1px solid var(--line); color:var(--navy); }
.btn-outline:hover{ border-color:var(--navy); }
.btn-arrow::after{ content:"→"; }

.nav-toggle{ display:none; }
@media (max-width:920px){
  nav.primary{ display:none; }
  .nav-toggle{
    display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center;
    border:1px solid var(--line); background:none; cursor:pointer;
  }
  .nav-right .btn-primary{ display:none; }
}

/* ---------- hero ---------- */
.hero{
  padding:96px 0 80px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
  pointer-events:none;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{
  font-size:clamp(34px, 4.4vw, 54px);
  font-weight:800;
  margin-bottom:22px;
}
.hero .lede{
  font-size:18px; color:var(--ink-soft); max-width:46ch; margin-bottom:28px;
}
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; }
.chip{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em;
  border:1px solid var(--line); color:var(--navy-soft);
  padding:7px 13px; border-radius:100px;
}
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* schematic diagram (signature element) */
.schematic{
  aspect-ratio:1/0.92; width:100%;
  border:1px solid var(--line);
  background:var(--white);
  position:relative;
}
.schematic svg{ width:100%; height:100%; display:block; }
.schematic-cap{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:10.5px; color:var(--ink-soft);
  padding:10px 14px; border-top:1px solid var(--line-soft);
  background:rgba(255,255,255,0.9);
}

/* ---------- page header (interior pages) ---------- */
.page-head{ padding:64px 0 48px; border-bottom:1px solid var(--line); }
.page-head h1{ font-size:clamp(30px,4vw,44px); margin-bottom:16px; }
.page-head .lede{ color:var(--ink-soft); font-size:17.5px; max-width:62ch; }

/* ---------- capability cards ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:44px; }
.card-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .card-grid{ grid-template-columns:1fr; } }
.cap-card{ background:var(--white); padding:36px 32px; display:flex; flex-direction:column; }
.cap-card h3{ font-size:15px; letter-spacing:0.03em; margin:16px 0 10px; }
.cap-card .sub{ color:var(--ink-soft); font-size:14.5px; margin-bottom:20px; min-height:44px; }
.cap-card .taglist{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.cap-card .taglist span{ font-family:var(--font-mono); font-size:11.5px; color:var(--navy-soft); background:var(--paper-2); padding:5px 9px; }
.cap-card .go{ margin-top:auto; font-family:var(--font-mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--green); }
.cap-card .go::after{ content:"→"; margin-left:6px; }
.cap-num{ font-family:var(--font-mono); font-size:12px; color:var(--green); }

/* ---------- problem tiles ---------- */
.tile-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); margin-top:44px; }
@media (max-width:900px){ .tile-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .tile-grid{ grid-template-columns:1fr; } }
.tile{ background:var(--white); padding:30px 26px; }
.tile .q{ font-family:var(--font-head); font-weight:700; font-size:16.5px; color:var(--navy); margin-bottom:10px; }
.tile .a{ color:var(--ink-soft); font-size:14.5px; }

/* ---------- why columns ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; margin-top:44px; }
@media (max-width:900px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }
.why-col .eyebrow{ margin-bottom:14px; }
.why-col p{ color:var(--ink-soft); font-size:14.5px; }

/* ---------- pipeline signature ---------- */
.pipeline{ margin-top:56px; }
.pipeline-inner{
  display:flex; align-items:stretch; border:1px solid var(--line); background:var(--white);
  overflow-x:auto;
}
.pipeline-step{
  flex:1; min-width:160px; padding:26px 20px; position:relative;
  border-right:1px solid var(--line);
}
.pipeline-step:last-child{ border-right:none; }
.pipeline-step .n{ font-family:var(--font-mono); font-size:11px; color:var(--green); margin-bottom:10px; display:block; }
.pipeline-step .t{ font-family:var(--font-head); font-weight:700; font-size:14.5px; color:var(--navy); letter-spacing:0.02em; }
.pipeline-step::after{
  content:"→"; position:absolute; right:-11px; top:50%; transform:translateY(-50%);
  color:var(--green); font-size:14px; background:var(--white); width:20px; text-align:center; z-index:1;
}
.pipeline-step:last-child::after{ content:""; }

/* ---------- profile ---------- */
.profile{ display:grid; grid-template-columns:280px 1fr; gap:56px; margin-top:44px; align-items:start; }
@media (max-width:780px){ .profile{ grid-template-columns:1fr; } }
.avatar{
  aspect-ratio:1; background:var(--navy); position:relative; overflow:hidden;
}
.avatar svg{ position:absolute; inset:0; width:100%; height:100%; }
.profile-name{ font-size:22px; margin-bottom:4px; }
.profile-role{ font-family:var(--font-mono); font-size:12.5px; color:var(--green); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:22px; display:block;}
.profile p{ color:var(--ink-soft); margin-bottom:16px; max-width:62ch; }
.snapshot{ display:flex; flex-direction:column; gap:8px; margin:24px 0 26px; }
.snapshot .row{ font-family:var(--font-mono); font-size:13px; color:var(--navy-soft); border-top:1px solid var(--line-soft); padding-top:8px; }

/* ---------- engagement table ---------- */
.eng-table{ width:100%; border-collapse:collapse; margin-top:40px; }
.eng-table th{
  text-align:left; font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--ink-soft); padding:12px 16px; border-bottom:1px solid var(--navy);
}
.eng-table td{ padding:18px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.eng-table td.name{ font-family:var(--font-head); font-weight:700; color:var(--navy); width:32%; }
.eng-table td.app{ color:var(--ink-soft); }
.eng-table tr:hover td{ background:var(--paper-2); }

/* ---------- experience cards ---------- */
.exp-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:44px; }
@media (max-width:780px){ .exp-grid{ grid-template-columns:1fr; } }
.exp-card{ background:var(--white); padding:30px 28px; }
.exp-card .k{ font-family:var(--font-head); font-weight:700; font-size:17px; color:var(--navy); margin-bottom:6px; }
.exp-card .ctx{ font-family:var(--font-mono); font-size:12px; color:var(--green); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:14px; display:block; }
.exp-card p{ color:var(--ink-soft); font-size:14.5px; }

/* ---------- section head w/ intro ---------- */
.section-head{ max-width:64ch; }
.section-head h2{ font-size:clamp(24px,3vw,32px); margin-bottom:16px; }
.section-head p{ color:var(--ink-soft); font-size:16px; }
.section-head + .section-head{ margin-top:14px; }
.bar{ border-left:2px solid var(--green); padding-left:20px; margin:22px 0; }
.bar p{ color:var(--ink-soft); }
.bar p + p{ margin-top:14px; }

/* ---------- band (dark section) ---------- */
.band{ background:var(--navy); color:var(--white); }
.band h2, .band h3{ color:var(--white); }
.band .eyebrow{ color:#8FD9BC; }
.band .eyebrow::before{ background:#8FD9BC; }

/* ---------- insights list ---------- */
.insight-list{ margin-top:44px; display:flex; flex-direction:column; }
.insight-row{
  display:grid; grid-template-columns:110px 1fr auto; gap:26px; align-items:center;
  padding:26px 0; border-top:1px solid var(--line);
}
.insight-list .insight-row:last-child{ border-bottom:1px solid var(--line); }
.insight-row .tag{ font-family:var(--font-mono); font-size:11.5px; color:var(--green); text-transform:uppercase; letter-spacing:0.04em; }
.insight-row h3{ font-size:18px; }
.insight-row .status{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); white-space:nowrap; }
@media (max-width:640px){ .insight-row{ grid-template-columns:1fr; gap:8px; } }

.pipe-note{
  display:flex; align-items:center; gap:14px; margin-top:40px; padding:20px 24px;
  border:1px dashed var(--line); font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft);
  flex-wrap:wrap;
}
.pipe-note b{ color:var(--navy); }

/* ---------- industries ---------- */
.sector-list{ margin-top:44px; display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); }
.sector{ background:var(--white); padding:32px; display:grid; grid-template-columns:260px 1fr; gap:30px; }
@media (max-width:780px){ .sector{ grid-template-columns:1fr; } }
.sector h3{ font-size:19px; margin-bottom:10px; }
.sector .id{ font-family:var(--font-mono); font-size:12px; color:var(--green); margin-bottom:8px; display:block; }
.sector ul{ display:flex; flex-wrap:wrap; gap:9px; align-content:flex-start; }
.sector li{ font-family:var(--font-mono); font-size:12.5px; color:var(--navy-soft); background:var(--paper-2); padding:6px 11px; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:44px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } }
.field{ margin-bottom:20px; }
.field label{ display:block; font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); background:var(--white); padding:13px 14px;
  font-family:var(--font-body); font-size:15px; color:var(--ink); border-radius:2px;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--green); outline:none; }
.field textarea{ resize:vertical; min-height:120px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.contact-side .item{ margin-bottom:28px; }
.contact-side .lbl{ font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; color:var(--ink-soft); letter-spacing:0.05em; margin-bottom:8px; display:block;}
.contact-side .val{ font-family:var(--font-head); font-weight:700; font-size:16px; color:var(--navy); }
.consent{ font-size:12.5px; color:var(--ink-soft); margin-top:6px; }
.form-note{ font-size:13.5px; color:var(--ink-soft); margin-top:18px; }

/* ---------- CTA band ---------- */
.cta-band{ text-align:center; }
.cta-band h2{ font-size:clamp(24px,3.4vw,36px); margin-bottom:18px; color:var(--white); }
.cta-band p{ color:#C6D3E0; max-width:56ch; margin:0 auto 32px; }

/* ---------- footer ---------- */
footer.site{ background:var(--navy); color:#C6D3E0; padding:64px 0 32px; }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.14); }
.footer-brand .logo{ color:var(--white); margin-bottom:14px; }
.footer-tag{ font-family:var(--font-mono); font-size:12.5px; color:#8FA6BE; letter-spacing:0.03em; }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col h4{ font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:#8FA6BE; margin-bottom:16px; }
.footer-col a, .footer-col span{ display:block; font-size:14px; margin-bottom:10px; color:#DCE5EC; }
.footer-col a:hover{ color:var(--green); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:26px; font-size:12.5px; color:#7E93AB; flex-wrap:wrap; gap:12px; }
.footer-bottom a:hover{ color:var(--white); }

/* generic */
.stack-lg > * + *{ margin-top:20px; }
.center{ text-align:center; margin:0 auto; }


/* ---------- launch readiness: responsive navigation ---------- */
.nav-row{ position:relative; }
.nav-toggle{ padding:0; }
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--navy); margin:2px 0; transition:transform .15s ease, opacity .15s ease; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-4px) rotate(-45deg); }
@media (max-width:920px){
  .nav-row{ padding:14px 0; }
  .nav-row > .logo{ max-width:calc(100% - 56px); font-size:14px; }
  nav.primary{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:70;
    background:var(--paper); border:1px solid var(--line); border-top:none;
    box-shadow:0 12px 30px rgba(11,36,64,.10); padding:12px 22px 18px;
  }
  nav.primary.is-open{ display:block; }
  nav.primary ul{ flex-direction:column; gap:0; }
  nav.primary a{ display:block; padding:12px 0; }
  nav.primary a.active::after{ bottom:4px; width:32px; right:auto; }
  .nav-toggle{ margin-left:auto; }
  .nav-right{ display:none; }
}
@media (max-width:520px){ .nav-row > .logo{ font-size:12.5px; } .logo .mark{ width:26px; height:26px; } }

/* ---------- launch readiness: form states ---------- */
.hp-field{ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(1px,1px,1px,1px) !important; white-space:nowrap !important; }
.consent-check{ display:flex; align-items:flex-start; gap:10px; margin:4px 0 10px; font-size:12.5px; color:var(--ink-soft); line-height:1.45; }
.consent-check input{ margin-top:3px; flex:none; }
.consent-check a, .legal-copy a{ color:var(--green); text-decoration:underline; text-underline-offset:2px; }
.form-note.success{ color:var(--green); font-weight:600; }
.form-note.error{ color:#9B2C2C; font-weight:600; }
button:disabled{ opacity:.65; cursor:not-allowed !important; transform:none !important; }

/* ---------- launch readiness: legal ---------- */
.legal-copy h2{ font-size:20px; margin:30px 0 10px; }
.legal-copy h2:first-child{ margin-top:0; }
.legal-copy p{ color:var(--ink-soft); margin-bottom:14px; }
.legal-copy .legal-date{ margin-top:34px; padding-top:20px; border-top:1px solid var(--line); }

.avatar img {
    width: 280px;
    height: 280px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    display: block;
}