/* ================================================================
   GREENBERG ENERGY
   Direction: technical datasheet. Hairline grid, no boxes, no shadow.
   Display Liberation Sans · Body Noto Sans
   ================================================================ */
:root{
  --dark-navy:#0a2540;
  --medium-blue:#2e7ba6;
  --green:#0e7c5a;
  --orange:#f2a541;
  --white:#ffffff;
  --light-blue:#afc2cf;
  --grey-blue:#5a6b7b;
  --very-light-blue:#d9e2e8;
  --medium-grey:#8c9ba6;
  --brown:#8a5a12;

  --wrap:1320px;
  --rail:180px;
  --gut:clamp(28px,5vw,88px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--dark-navy);
  font-family:'Noto Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  font-weight:300;font-size:16.5px;line-height:1.72;letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.25em}
h1,h2,h3,h4{font-family:'Liberation Sans','Helvetica Neue',sans-serif;font-weight:500;line-height:1.02;letter-spacing:-.035em;margin:0}
strong{font-weight:500}
::selection{background:var(--dark-navy);color:var(--white)}
:focus-visible{outline:1px solid var(--green);outline-offset:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,44px);width:100%}

/* ---- the grid: label rail + content column ---- */
.row{display:grid;grid-template-columns:var(--rail) 1fr;gap:var(--gut)}
.rail{display:flex;flex-direction:column;gap:2px;padding-top:.35em}
.idx,.lbl{font-family:'Liberation Sans',ui-monospace,monospace;font-size:.688rem;letter-spacing:.14em;text-transform:uppercase}
.idx{color:var(--line-2)}
.lbl{color:var(--green)}
.col{min-width:0;max-width:none}

.row-2{grid-template-columns:1fr 1fr}
.row-side{grid-template-columns:1fr 400px;align-items:start}
@media(max-width:820px){.row-2,.row-side{grid-template-columns:1fr;gap:34px}}

/* ---- sections ---- */
.sec{border-top:1px solid var(--line);padding:clamp(56px,7.5vw,116px) 0}
.sec.first{border-top:0}
.pale{background:var(--very-light-blue)}
.pale + .pale{border-top-color:var(--line-2)}

/* ---- type ---- */
.d1{font-size:clamp(2.6rem,7.2vw,5.9rem);letter-spacing:-.043em;line-height:.98}
.d2{font-size:clamp(1.85rem,3.9vw,3.25rem);letter-spacing:-.038em}
.d3{font-size:clamp(1.3rem,2.1vw,1.72rem);letter-spacing:-.026em;line-height:1.14}
.d4{font-size:clamp(1.02rem,1.35vw,1.14rem);letter-spacing:-.018em;line-height:1.24;font-weight:500}
.lead{font-size:clamp(1.06rem,1.55vw,1.28rem);line-height:1.56;font-weight:300;color:var(--dark-navy);max-width:56ch}
.body{max-width:64ch}
.body p{color:var(--grey-blue)}
.small{font-size:.92rem;line-height:1.68;color:var(--grey-blue)}
.mono{font-family:'Liberation Sans',ui-monospace,monospace;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-blue)}.mono-lg{font-family:'Liberation Sans',ui-monospace,monospace;font-size:.78rem;letter-spacing:.1em;color:var(--grey-blue);text-transform:none}

/* ---- links ---- */
.lnk{
  display:inline-flex;align-items:baseline;gap:.55em;
  font-family:'Liberation Sans',sans-serif;font-weight:500;font-size:.95rem;letter-spacing:-.015em;
  border-bottom:1px solid var(--dark-navy);padding-bottom:3px;transition:color .3s,border-color .3s;
}
.lnk:hover{color:var(--green);border-color:var(--green)}
.lnk .ar{font-family:'Liberation Sans',monospace;font-size:.8em;transition:transform .3s}
.lnk:hover .ar{transform:translateX(4px)}
.lnk-alt{border-color:var(--line-2);color:var(--grey-blue)}
.lnk-alt:hover{color:var(--dark-navy);border-color:var(--dark-navy)}
.links{display:flex;gap:clamp(20px,3vw,40px);flex-wrap:wrap;align-items:baseline}

/* ---- hairline lists (replaces cards) ---- */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
.tri > div{padding:26px clamp(16px,2vw,32px) 6px 0;border-right:1px solid var(--line)}
.tri > div:last-child{border-right:0;padding-right:0}
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--dark-navy)}
.duo > div{padding:26px clamp(20px,3vw,48px) 6px 0;border-right:1px solid var(--line)}
.duo > div:last-child{border-right:0;padding-right:0}
.tri h4,.duo h4{margin:0 0 .55em;font-size:1.06rem;letter-spacing:-.02em}
.tri p,.duo p{font-size:.92rem;line-height:1.62;color:var(--grey-blue);margin:0 0 1.4em}
.tri .mono,.duo .mono{display:block;margin-bottom:16px}

/* ---- spec list ---- */
.spec{border-top:1px solid var(--dark-navy);margin:0}
.spec-row{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line)}
.spec-row dt{font-size:.94rem;color:var(--grey-blue);margin:0}
.spec-row dd{margin:0;font-family:'Liberation Sans',sans-serif;font-weight:500;font-size:1.05rem;letter-spacing:-.02em;text-align:right}
.spec-row.hi dd{color:var(--green)}

/* ---- comparison table ---- */
.cmp{width:100%;border-collapse:collapse;font-size:.94rem}
.cmp th,.cmp td{text-align:left;padding:16px 22px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-family:'Liberation Sans',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;color:var(--grey-blue);border-bottom:1px solid var(--dark-navy);padding-bottom:12px}
.cmp thead th:last-child{color:var(--green)}
.cmp td:first-child{width:24%;color:var(--grey-blue)}
.cmp td:nth-child(2){width:38%;color:var(--grey-blue)}
.cmp td:last-child{color:var(--dark-navy);font-weight:400}

/* ---- figures ---- */
.fig{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--dark-navy)}
.fig > div{padding:24px 20px 24px 0;border-right:1px solid var(--line)}
.fig > div:last-child{border-right:0}
.fig b{display:block;font-family:'Liberation Sans',sans-serif;font-weight:500;font-size:clamp(1.9rem,3.4vw,2.7rem);letter-spacing:-.04em;line-height:1}
.fig p{margin:.8em 0 0;font-size:.86rem;line-height:1.55;color:var(--grey-blue);max-width:26ch}
.fig .src{display:block;margin-top:.9em;font-family:'Liberation Sans',monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--line-2)}

/* ---- status ---- */
.st{display:inline-flex;align-items:center;gap:.6em;font-family:'Liberation Sans',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-blue)}
.st::before{content:"";width:6px;height:6px;flex:none}
.st-dev::before{background:var(--orange)}
.st-plan::before{background:var(--green)}
.st-tgt::before{border:1px solid var(--line-2)}

/* ---- note (content still to supply) ---- */
.note{border-left:1px solid var(--orange);padding:2px 0 2px 16px;font-family:'Liberation Sans',monospace;font-size:.7rem;line-height:1.75;letter-spacing:.02em;color:var(--orange);max-width:74ch}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;transition:background .45s,border-color .45s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px}
.logo svg{width:17px;height:17px;flex:none}
.logo span{font-family:'Liberation Sans',sans-serif;font-weight:500;font-size:.82rem;letter-spacing:.145em;text-transform:uppercase}
.nav-l{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav-l a{font-size:.86rem;font-weight:400;color:var(--grey-blue);transition:color .25s}
.nav-l a:hover,.nav-l a.on{color:var(--dark-navy)}
.nav-l a.on{font-weight:500}
.nav-r{display:flex;align-items:center;gap:22px}
.nav-r .lnk{font-size:.86rem}
.burger{display:none;width:40px;height:40px;background:none;border:0;cursor:pointer;padding:12px 8px;margin-right:-8px;color:var(--dark-navy)}
.burger span{display:block;height:1px;background:currentColor;margin:6px 0;transition:.35s}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob{position:fixed;inset:0;z-index:880;background:var(--white);display:flex;flex-direction:column;justify-content:center;padding:0 clamp(20px,6vw,44px);opacity:0;pointer-events:none;transition:opacity .4s}
.mob.open{opacity:1;pointer-events:auto}
.mob a{display:block;font-family:'Liberation Sans',sans-serif;font-size:1.9rem;font-weight:500;letter-spacing:-.035em;padding:16px 0;border-bottom:1px solid var(--line)}
.mob .mono{margin-top:30px}

/* ---- pages ---- */
.page{display:none}
.page.on{display:block}
.top{padding:calc(72px + clamp(48px,7vw,96px)) 0 0}

/* ---- hero ---- */
.hero-h{max-width:15ch;margin:0 0 clamp(26px,3vw,40px)}
.hero-meta{display:flex;gap:clamp(18px,3vw,44px);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;margin-top:clamp(40px,6vw,72px)}
.drawing{width:100%;overflow:hidden;padding:clamp(24px,4vw,48px) 0 0}
.drawing svg{width:100%;height:auto}

/* ---- reveal ---- */
.rev{overflow:hidden;display:block}
.rev > *{display:block;transform:translateY(102%);transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.rev.in > *{transform:none}
.fade{opacity:0;transform:translateY(14px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.fade.in{opacity:1;transform:none}
.fade[data-d="1"]{transition-delay:.1s}.fade[data-d="2"]{transition-delay:.2s}
.fade[data-d="3"]{transition-delay:.3s}.fade[data-d="4"]{transition-delay:.4s}
.draw{transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.draw.in{transform:none}

/* ---- process ---- */
.proc{border-top:1px solid var(--ink)}
.pstep{
  display:grid;grid-template-columns:44px 1fr auto;gap:20px;align-items:baseline;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line);padding:20px 0;cursor:pointer;color:inherit;font:inherit;
  transition:padding-left .4s cubic-bezier(.16,1,.3,1),color .3s;
}
.pstep:hover{padding-left:10px}
.pstep .pn{font-family:'Liberation Sans',monospace;font-size:.68rem;letter-spacing:.1em;color:var(--line-2)}
.pstep .pt{font-family:'Liberation Sans',sans-serif;font-weight:500;font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.028em}
.pstep .pc{font-family:'Liberation Sans',monospace;font-size:.7rem;letter-spacing:.07em;color:var(--grey-blue)}
.pstep.act{color:var(--green)}
.pstep.act .pn,.pstep.act .pc{color:var(--green)}
.pbody{display:none;padding:0 0 24px 64px;border-bottom:1px solid var(--line)}
.pbody.on{display:block}
.pbody p{max-width:62ch;color:var(--grey-blue);font-size:.95rem;margin:0}

/* ---- replication ---- */
.rep{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;max-width:400px}
.rep i{aspect-ratio:1;border:1px solid var(--line);transition:background .5s,border-color .5s}
.rep i.f{background:var(--green);border-color:var(--green)}
.rep i.f1{background:var(--orange);border-color:var(--orange)}
.rep-key{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.rep-key span{font-family:'Liberation Sans',monospace;font-size:.68rem;letter-spacing:.1em;color:var(--grey-blue);display:flex;align-items:center;gap:10px}
.rep-key b{width:9px;height:9px;display:block;flex:none}

/* ---- roadmap ---- */
.road{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--dark-navy)}
.road > div{padding:22px 24px 30px 0;border-right:1px solid var(--line)}
.road > div:last-child{border-right:0}
.road .yr{font-family:'Liberation Sans',monospace;font-size:.68rem;letter-spacing:.11em;color:var(--green);display:block;margin-bottom:14px}
.road h4{font-size:1.05rem;margin-bottom:.5em}
.road p{font-size:.88rem;color:var(--grey-blue);margin:0}

/* ---- quote ---- */
.quote{font-family:'Liberation Sans',sans-serif;font-weight:400;font-size:clamp(1.6rem,4.1vw,3.1rem);letter-spacing:-.038em;line-height:1.1;max-width:20ch;margin:0}

/* ---- form ---- */
.f{margin-bottom:22px}
.f label{display:block;font-family:'Liberation Sans',monospace;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-blue);margin-bottom:9px}
.f input,.f select,.f textarea{
  width:100%;padding:11px 0;border:0;border-bottom:1px solid var(--line-2);background:none;
  font-family:'Noto Sans',sans-serif;font-size:1rem;font-weight:300;color:var(--dark-navy);border-radius:0;
  transition:border-color .3s;-webkit-appearance:none;appearance:none;
}
.f select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0l4.5 6L9 0z' fill='%235a6b7b'/%3E%3C/svg%3E") no-repeat right 2px center}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--dark-navy)}
.f textarea{min-height:110px;resize:vertical}

/* ---- footer ---- */
.foot{background:var(--dark-navy);color:#9AA29C;padding:clamp(56px,7vw,96px) 0 34px;font-size:.9rem;font-weight:300}
.foot a{color:#9AA29C;display:block;padding:5px 0;transition:color .25s}
.foot a:hover{color:var(--white)}
.foot h5{font-family:'Liberation Sans',monospace;font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--grey-blue);margin:0 0 14px;font-weight:400}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.11)}
.foot .logo span{color:var(--white)}
.foot .disc{padding-top:26px;font-size:.76rem;line-height:1.7;color:var(--grey-blue);max-width:92ch}
.foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-family:'Liberation Sans',monospace;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--grey-blue)}

/* ---- responsive ---- */
@media(max-width:1000px){
  .fig{grid-template-columns:repeat(2,1fr)}
  .fig > div:nth-child(2n){border-right:0}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  body{font-size:16px}
  .nav-l,.nav-r .lnk{display:none}
  .burger{display:block}
  .row{grid-template-columns:1fr;gap:22px}
  .rail{flex-direction:row;gap:14px;padding-top:0}
  .tri,.duo,.road{grid-template-columns:1fr}
  .tri > div,.duo > div,.road > div{border-right:0;border-bottom:1px solid var(--line);padding:22px 0}
  .tri > div:last-child,.duo > div:last-child,.road > div:last-child{border-bottom:0}
  .cmp thead{display:none}
  .cmp,.cmp tbody,.cmp tr,.cmp td{display:block;width:100%}
  .cmp tr{border-bottom:1px solid var(--ink);padding:14px 0}
  .cmp td{border:0;padding:3px 0;width:auto!important}
  .cmp td:first-child{font-family:'Liberation Sans',sans-serif;font-weight:500;font-size:1.05rem;color:var(--dark-navy);letter-spacing:-.02em;margin-bottom:6px}
  .cmp td:nth-child(2)::before{content:"EPC — ";font-family:'Liberation Sans',monospace;font-size:.62rem;letter-spacing:.12em;color:var(--line-2)}
  .cmp td:last-child::before{content:"GREENBERG — ";font-family:'Liberation Sans',monospace;font-size:.62rem;letter-spacing:.12em;color:var(--green)}
  .pstep{grid-template-columns:36px 1fr;gap:14px}
  .pstep .pc{grid-column:2;margin-top:4px}
  .pbody{padding-left:50px}
  .rep{grid-template-columns:repeat(4,1fr);max-width:230px}
}
@media(max-width:640px){
  .drawing .lbl-g{display:none}
}
@media(max-width:520px){
  .fig{grid-template-columns:1fr}
  .fig > div{border-right:0;border-bottom:1px solid var(--line)}
  .fig > div:last-child{border-bottom:0}
  .spec-row{grid-template-columns:1fr;gap:2px}
  .spec-row dd{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation:none!important}
  .rev > *,.draw{transform:none}
  .fade{opacity:1;transform:none}
}

/* ---- utility classes for shortcodes ---- */
.hero-h{max-width:15ch;margin:0 0 clamp(26px,3vw,40px)}
.hero-meta{display:flex;gap:clamp(18px,3vw,44px);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;margin-top:clamp(40px,6vw,72px)}

/* Ensure shortcode content displays properly */
:not(pre) > code { background: transparent; padding: 0; }
img { max-width: 100%; height: auto; }