/*!
 * GEC Sections — Griffin EnerG Consulting
 * Layout only. Colour and type are inherited: the --gec-* properties below are
 * overwritten at runtime by GEC_Tokens from the Astra Customizer, and font
 * families are never re-declared, so the theme stays the source of truth.
 */
/* ==========================================================================
   GEC sections — inherits Astra colour + type, adds layout only.
   Colour comes in as --gec-* custom properties printed by PHP from the
   Customizer, so changing Astra changes these sections.
   ========================================================================== */
.gec{
  --gec-blue:#4082A5;
  --gec-green:#287A6B;
  --gec-text:#222222;
  --gec-muted:#454F5E;
  --gec-line:#7A7A7A40;
  --gec-hair:#7A7A7A24;
  --gec-wash:#4082A508;
  --gec-sand:#F9F0C8;
  --gec-max:1200px;
  --gec-gut:clamp(20px,4vw,40px);
  --gec-pad:clamp(52px,6.5vw,92px);
  color:var(--gec-text);
  font-size:16px;
  line-height:1.75;
}
.gec *,.gec *::before,.gec *::after{box-sizing:border-box;}

/* --- shell ---------------------------------------------------------------- */
/* Section grounds resolve through --gec-sec-bg so the wash="" attribute can set
   one per section without the markup knowing which treatment it started as.
   Unset, each rule falls back to the ground the variant was designed with. */
.gec-s{padding:var(--gec-pad) var(--gec-gut);background:var(--gec-sec-bg,transparent);}
.gec-s--wash{background:var(--gec-sec-bg,var(--gec-wash));}
.gec-s--tight{padding-top:calc(var(--gec-pad) * .55);}
.gec-w{max-width:var(--gec-max);margin-inline:auto;}
.gec-w--narrow{max-width:var(--gec-max);}

/* --- type ----------------------------------------------------------------- */
.gec h1,.gec h2,.gec h3,.gec h4{
  color:var(--gec-blue);
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.15;
  text-wrap:balance;
  margin:0;
}
.gec h1{font-size:clamp(29px,3.3vw,44px);letter-spacing:-.022em;}
.gec h2{font-size:clamp(23px,2.2vw,31px);}
.gec h3{font-size:clamp(16.5px,1.4vw,18.5px);line-height:1.35;}
:where(.gec) :where(p){margin:0 0 1.15em;}
:where(.gec) :where(p:last-child){margin-bottom:0;}
/* Browsers give blockquote a UA margin of 40px on each side. Left in, it insets
   the pull quotes from the prose they sit under — barely visible at 1200px, a
   quarter of the usable width on a phone. Reset at zero specificity so the
   quote classes keep control of their own vertical margins. */
:where(.gec) :where(blockquote){margin:0;}
.gec-lead{font-size:clamp(16.5px,1.35vw,18px);line-height:1.65;color:var(--gec-muted);}
.gec-stand{
  font-size:clamp(17.5px,1.7vw,22px);
  line-height:1.45;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  color:var(--gec-blue);
  letter-spacing:-.012em;
  text-wrap:balance;
}
.gec-label{
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gec-green);
  margin:0 0 14px;
}
.gec-kicker{
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gec-muted);
  font-weight:500;margin:0 0 18px;
}
.gec-kicker a{color:var(--gec-muted);text-decoration:none;}
.gec-kicker a:hover{color:var(--gec-green);}
.gec-head{margin-bottom:clamp(26px,3vw,40px);}
.gec-head p{margin-top:18px;}
.gec-close{
  font-size:clamp(16px,1.4vw,18px);
  color:var(--gec-muted);
  border-left:2px solid var(--gec-green);
  padding-left:20px;
  margin-top:clamp(26px,3vw,38px);
}

/* --- button (mirrors .ast-button: square, 15/30) --------------------------- */
.gec-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gec-green);color:#fff;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.02em;line-height:1.2;
  padding:16px 32px;border:1px solid var(--gec-green);border-radius:0;
  text-decoration:none;transition:background .18s ease,border-color .18s ease;
}
.gec-btn:hover,.gec-btn:focus-visible{background:var(--gec-blue);border-color:var(--gec-blue);color:#fff;}
.gec-btn svg{width:17px;height:17px;flex:none;}
.gec :focus-visible{outline:2px solid var(--gec-green);outline-offset:3px;}

/* --- media ---------------------------------------------------------------- */
.gec-fig{margin:0;position:relative;}
.gec-fig img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;}
.gec-fig--tall img{aspect-ratio:4/5;}
.gec-fig--wide img{aspect-ratio:16/10;}
.gec-fig--sq img{aspect-ratio:1/1;}
/* a single flat accent rule instead of a shadow or a rounded card */
.gec-fig::after{
  content:"";position:absolute;left:0;bottom:-1px;width:84px;height:4px;
  background:var(--gec-green);
}

/* --- hero ----------------------------------------------------------------- */
.gec-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;}
.gec-hero__body{max-width:none;}
.gec-hero__body h1{margin-bottom:22px;}
.gec-hero .gec-lead{margin-bottom:32px;}

/* --- intro: standfirst beside the running copy ---------------------------- */
.gec-intro{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(28px,4vw,64px);align-items:start;
}
.gec-intro__stand{position:relative;padding-top:14px;border-top:2px solid var(--gec-green);}

/* --- two-column prose ----------------------------------------------------- */
.gec-prose2{columns:2;column-gap:clamp(30px,4vw,64px);}
.gec-prose2 p{break-inside:avoid;}
.gec-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,64px);align-items:start;}
.gec-split--media-first .gec-fig{order:-1;}
.gec-split--center{align-items:center;}

/* --- pull quote ----------------------------------------------------------- */
.gec-quote{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  border-top:1px solid var(--gec-line);border-bottom:1px solid var(--gec-line);
  padding:26px 0;margin-top:clamp(28px,3vw,40px);
}
.gec-quote svg{width:26px;height:26px;color:var(--gec-green);flex:none;margin-top:5px;}
.gec-quote p{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(17px,1.6vw,21px);line-height:1.45;color:var(--gec-blue);
  letter-spacing:-.01em;margin:0;text-wrap:balance;
}

/* --- checklist ------------------------------------------------------------ */
.gec-listhead{
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:15px;
  color:var(--gec-text);margin:0 0 18px;
  padding-bottom:12px;border-bottom:1px solid var(--gec-line);
}
.gec-checks{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(22px,3vw,44px);row-gap:2px;
}
.gec-checks--2{grid-template-columns:repeat(2,1fr);}
.gec-checks li{
  display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:baseline;
  padding:9px 0;font-size:15.5px;line-height:1.5;
  border-bottom:1px solid var(--gec-hair);
}
.gec-checks svg{width:15px;height:15px;color:var(--gec-green);transform:translateY(2px);}

/* --- icon boxes ----------------------------------------------------------- */
.gec-boxes{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.8vw,24px);
}
.gec-boxes--4{grid-template-columns:repeat(4,1fr);}
.gec-boxes--2{grid-template-columns:repeat(2,1fr);}
.gec-box{
  background:#fff;border:1px solid var(--gec-line);
  padding:clamp(22px,2.2vw,28px);
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .18s ease,transform .18s ease;
}
.gec-s--wash .gec-box{background:var(--gec-card-bg,#fff);}
.gec-s:not(.gec-s--wash) .gec-boxes:not(.gec-boxes--flat) .gec-box{background:var(--gec-card-bg,var(--gec-wash));}
.gec-box:hover{border-color:var(--gec-green);transform:translateY(-2px);}
.gec-box__i{
  width:46px;height:46px;flex:none;
  display:grid;place-items:center;
  background:var(--gec-green);color:#fff;
}
.gec-box__i svg{width:22px;height:22px;}
.gec-box h3{margin:0;}
.gec-box p{font-size:14.5px;line-height:1.6;color:var(--gec-muted);margin:0;}

/* --- facts strip ---------------------------------------------------------- */
.gec-facts{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,34px);
  background:var(--gec-sand);padding:clamp(26px,3vw,38px);
  margin-top:clamp(30px,3.4vw,44px);
}
.gec-fact__n{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(26px,2.8vw,38px);line-height:1;color:var(--gec-blue);
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;
}
.gec-fact__u{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gec-green);font-weight:600;margin:8px 0 10px;
}
.gec-fact p{font-size:14px;line-height:1.55;color:#4A4433;margin:0;}

/* --- full-width statement band -------------------------------------------- */
.gec-s--band{background:var(--gec-sec-bg,var(--gec-blue));color:#fff;}
.gec-s--band h2,.gec-s--band .gec-band-q{color:#fff;}
.gec-band-q{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(21px,2.6vw,34px);line-height:1.3;letter-spacing:-.02em;
  margin:0 0 26px;text-wrap:balance;max-width:22ch;
}
.gec-s--band .gec-lead,.gec-s--band p{color:#EAF2F6;}
.gec-s--band .gec-checks li{border-bottom-color:#ffffff2e;}
.gec-s--band .gec-checks svg{color:#fff;}
.gec-band-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,4vw,60px);align-items:start;}

/* --- dark custom wash ------------------------------------------------------
   wash="#0B2229" and the like. PHP measures the colour it is handed and adds
   this class when the ground is too dark for the normal blue-on-white type, so
   picking a dark hex cannot produce dark-on-dark. Mirrors the band treatment. */
.gec--ondark h1,.gec--ondark h2,.gec--ondark h3,.gec--ondark h4{color:#fff;}
.gec--ondark,.gec--ondark p,.gec--ondark .gec-lead,.gec--ondark .gec-stand{color:#EAF2F6;}
.gec--ondark .gec-quote,.gec--ondark .gec-bigquote{border-color:#ffffff2e;}
.gec--ondark .gec-quote p,.gec--ondark .gec-bigquote p{color:#fff;}
.gec--ondark .gec-checks li,.gec--ondark .gec-listhead{border-bottom-color:#ffffff2e;}
.gec--ondark .gec-checks svg{color:#fff;}
.gec--ondark .gec-box{border-color:#ffffff2e;}
.gec--ondark .gec-tier{border-top-color:#ffffff40;}
.gec--ondark .gec-kicker,.gec--ondark .gec-label{color:#fff;}

/* --- tier cards (no borders, a rule and a number) -------------------------- */
.gec-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,2.6vw,36px);}
.gec-tier{border-top:2px solid var(--gec-line);padding-top:22px;}
.gec-tier__n{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;
}
.gec-tier__n span{
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.1em;color:var(--gec-muted);font-variant-numeric:tabular-nums;
}
.gec-tier__n svg{width:22px;height:22px;color:var(--gec-green);}
.gec-tier h3{margin-bottom:12px;}
.gec-tier p{font-size:15px;line-height:1.65;color:var(--gec-muted);}

/* --- stepper -------------------------------------------------------------- */
.gec-steps{list-style:none;margin:0;padding:0;}
.gec-step{
  display:grid;grid-template-columns:74px minmax(0,.32fr) minmax(0,.68fr);gap:clamp(20px,3vw,40px);
  padding:clamp(24px,2.6vw,34px) 0;border-top:1px solid var(--gec-line);
}
.gec-step:last-child{border-bottom:1px solid var(--gec-line);}
.gec-step__n{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(24px,2.4vw,32px);line-height:1;color:var(--gec-green);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.gec-step__b h3{margin-bottom:0;}
.gec-step__t{align-self:start;}
.gec-step__b p{color:var(--gec-muted);font-size:15.5px;margin:0;}

/* --- question statement --------------------------------------------------- */
.gec-ask{
  border-left:3px solid var(--gec-green);padding:6px 0 6px 26px;
  margin:clamp(22px,2.6vw,32px) 0;
}
.gec-ask p{
  font-family:'Montserrat',sans-serif;font-weight:600;color:var(--gec-blue);
  font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.015em;margin:0;
  text-wrap:balance;
}

/* --- certification band --------------------------------------------------- */
.gec-band{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,34px);align-items:start;}
.gec-band__i svg{width:34px;height:34px;color:var(--gec-green);}
.gec-band h2{margin-bottom:16px;}
.gec-band p{color:var(--gec-muted);margin:0;}

/* --- why / closing -------------------------------------------------------- */
.gec-tag{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(18px,2vw,25px);line-height:1.4;color:var(--gec-green);
  letter-spacing:-.012em;margin:clamp(24px,2.6vw,32px) 0 clamp(26px,3vw,36px);
}

/* --- faq ------------------------------------------------------------------ */
.gec-faq{border-top:1px solid var(--gec-line);}
.gec-faq details{border-bottom:1px solid var(--gec-line);}
.gec-faq summary{
  display:grid;grid-template-columns:1fr 22px;gap:20px;align-items:center;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(16px,1.6vw,19px);line-height:1.4;color:var(--gec-blue);
}
.gec-faq summary::-webkit-details-marker{display:none;}
.gec-faq summary h3{font:inherit;color:inherit;margin:0;letter-spacing:inherit;}
.gec-faq summary::after{
  content:"";width:13px;height:13px;justify-self:center;
  border-right:2px solid var(--gec-green);border-bottom:2px solid var(--gec-green);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s ease;
}
.gec-faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px);}
.gec-faq summary:hover{color:var(--gec-green);}
.gec-faq__a{padding:0 0 24px;}
.gec-faq__a p{color:var(--gec-muted);margin:0;}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:900px){
  .gec-step{grid-template-columns:64px 1fr;}
  .gec-step__b{grid-column:2;}
}
@media (max-width:1024px){
  .gec-tiers{grid-template-columns:repeat(2,1fr);row-gap:34px;}
  .gec-checks{grid-template-columns:repeat(2,1fr);}
  .gec-boxes,.gec-boxes--4{grid-template-columns:repeat(2,1fr);}
  .gec-facts{grid-template-columns:1fr;gap:24px;}
  .gec-band-grid{grid-template-columns:1fr;gap:28px;}
}
@media (max-width:860px){
  .gec-hero{grid-template-columns:1fr;gap:34px;}
  .gec-intro{grid-template-columns:1fr;gap:24px;}
  .gec-hero__body{max-width:none;}
  .gec-split{grid-template-columns:1fr;gap:30px;}
  .gec-split--media-first .gec-fig{order:0;}
  .gec-prose2{columns:1;}
  .gec-fig--tall img{aspect-ratio:16/10;}
}
@media (max-width:560px){
  .gec{font-size:15.5px;}
  .gec-tiers{grid-template-columns:1fr;row-gap:28px;}
  .gec-checks{grid-template-columns:1fr;}
  .gec-boxes,.gec-boxes--4{grid-template-columns:1fr;}
  .gec-step{grid-template-columns:1fr;gap:10px;}
  .gec-step__t{margin-bottom:2px;}
  .gec-step__n{font-size:26px;}
  .gec-btn{width:100%;justify-content:center;padding-inline:18px;font-size:14.5px;}
  .gec-band{grid-template-columns:1fr;}
  /* Stack the quote mark above the text: side by side it costs the quote 46px
     of a ~350px line. `balance` is dropped because at 4-5 lines it evens the
     rag into a short block with a gap down the right. */
  .gec-quote{grid-template-columns:1fr;gap:12px;padding:22px 0;}
  .gec-quote svg{margin-top:0;}
  .gec-quote p{text-wrap:pretty;}
}
@media (prefers-reduced-motion:reduce){
  .gec *{transition:none!important;animation:none!important;}
}

/* ==========================================================================
   Figures. Images come from the slots on Settings > GEC Sections, so
   any of them can be swapped without touching markup.
   ========================================================================== */
.gec-fig--wide{aspect-ratio:16/10;}
.gec-fig--tall{aspect-ratio:4/5;}
.gec-fig--band{aspect-ratio:21/9;}
.gec-fig--band img{aspect-ratio:21/9;}

/* ==========================================================================
   B — hero over image
   ========================================================================== */
.gec-hero-ov{position:relative;min-height:clamp(380px,46vw,520px);display:grid;align-items:center;}
/* The hero is a grid so the background layer and the content stack. .gec-w
   carries margin-inline:auto, and a grid item with auto side-margins shrinks to
   its content instead of filling the track — so the hero width drifted narrower
   than the 1200px the rest of the page uses whenever the copy was short (Net
   Zero). width:100% makes it fill the track and cap at --gec-max like every
   other section; a no-op on pages whose content already reached 1200. */
.gec-hero-ov>.gec-w{width:100%;}
.gec-hero-ov__bg{position:absolute;inset:0;overflow:hidden;}
.gec-hero-ov__bg img{width:100%;height:100%;object-fit:cover;display:block;}
.gec-hero-ov__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#0B2229F7 0%,#0B2229E8 34%,#0B22293D 70%,#0B222900 100%);
}
.gec-hero-ov__in{position:relative;padding:clamp(34px,4.5vw,60px) 0;max-width:min(72%,780px);}
.gec-hero-ov h1,.gec-hero-ov .gec-kicker,.gec-hero-ov .gec-lead{color:#fff;}
.gec-hero-ov .gec-kicker a{color:#BFD6E0;}
.gec-hero-ov .gec-lead{color:#DCE8ED;}
.gec-hero-ov .gec-kicker{margin-bottom:14px;}
.gec-hero-ov__in h1{margin-bottom:18px;}
.gec-hero-ov__in .gec-lead{margin-bottom:30px;max-width:60ch;}

/* ==========================================================================
   B — intro with a full-width lead line
   ========================================================================== */
.gec-lead-line{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(19px,2vw,27px);line-height:1.35;color:var(--gec-blue);
  letter-spacing:-.018em;margin:0 0 clamp(26px,3vw,38px);
  padding-bottom:clamp(22px,2.4vw,30px);border-bottom:1px solid var(--gec-line);
  text-wrap:balance;
}
.gec-prose3{columns:3;column-gap:clamp(26px,3.2vw,48px);}
.gec-prose3 p{break-inside:avoid;}

/* ==========================================================================
   B — statement-first quote
   ========================================================================== */
.gec-bigquote{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.2vw,28px);
  align-items:start;margin-bottom:clamp(28px,3.2vw,40px);
}
.gec-bigquote svg{width:34px;height:34px;color:var(--gec-green);flex:none;}
.gec-bigquote p{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(21px,2.4vw,30px);line-height:1.32;color:var(--gec-blue);
  letter-spacing:-.02em;margin:0;text-wrap:balance;
}

/* ==========================================================================
   B — facts as a solid band
   ========================================================================== */
.gec-facts--band{background:var(--gec-blue);}
.gec-facts--band .gec-fact__n{color:#fff;}
.gec-facts--band .gec-fact__u{color:#B9DCEA;}
.gec-facts--band .gec-fact p{color:#DCEAF1;}
.gec-facts--band .gec-fact{border-left:2px solid #ffffff3d;padding-left:clamp(18px,2vw,26px);}
.gec-facts--lead{margin-top:0;margin-bottom:clamp(30px,3.4vw,44px);}

/* ==========================================================================
   B — numbered icon boxes with a sticky heading column
   ========================================================================== */
.gec-withhead{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:clamp(28px,3.6vw,56px);align-items:start;}
.gec-withhead__h{position:sticky;top:24px;}
.gec-boxes--num .gec-box{position:relative;padding-top:clamp(26px,2.6vw,32px);}
.gec-boxes--num .gec-box__n{
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;
  color:var(--gec-green);font-variant-numeric:tabular-nums;margin-bottom:-4px;
}
.gec-boxes--flat .gec-box{border:0;background:transparent;padding:0;}
.gec-boxes--flat .gec-box__i{width:40px;height:40px;background:transparent;color:var(--gec-green);
  border:1px solid var(--gec-line);}
.gec-boxes--flat .gec-box:hover{transform:none;}

/* ==========================================================================
   B — escalating scope rows (audit levels)
   ========================================================================== */
.gec-rows{border-top:1px solid var(--gec-line);}
.gec-row{
  display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(18px,2.6vw,38px);align-items:start;
  padding:clamp(22px,2.4vw,30px) 0;border-bottom:1px solid var(--gec-line);
}
.gec-row__i{width:44px;height:44px;display:grid;place-items:center;background:var(--gec-green);color:#fff;}
.gec-row__i svg{width:21px;height:21px;}
.gec-row h3{margin:0 0 10px;}
.gec-row p{font-size:14.5px;line-height:1.62;color:var(--gec-muted);margin:0;}
.gec-meter{display:flex;gap:4px;margin-top:12px;}
.gec-meter i{height:4px;flex:1;background:var(--gec-line);}
.gec-meter i.on{background:var(--gec-green);}
.gec-meter__l{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gec-muted);
  margin-top:8px;display:block;font-weight:600;}

/* ==========================================================================
   B — two-sided comparison
   ========================================================================== */
.gec-compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--gec-line);
  border:1px solid var(--gec-line);}
.gec-compare>div{background:#fff;padding:clamp(24px,2.8vw,34px);}
.gec-s--wash .gec-compare>div{background:var(--gec-card-bg,#fff);}
.gec-compare__t{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gec-green);
}
.gec-compare__t svg{width:18px;height:18px;}
.gec-compare p{font-size:15px;line-height:1.65;color:var(--gec-muted);margin:0;}
.gec-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,2.6vw,32px);}
.gec-chip{
  font-size:13.5px;font-weight:500;padding:8px 15px;
  border:1px solid var(--gec-line);color:var(--gec-text);background:#fff;
}
.gec-s--band .gec-chip{background:transparent;border-color:#ffffff4d;color:#fff;}

/* ==========================================================================
   B — horizontal process timeline
   ========================================================================== */
.gec-tl{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,30px) clamp(20px,2.4vw,34px);}
.gec-tl__i{position:relative;padding-top:38px;}
.gec-tl__i::before{
  content:"";position:absolute;top:13px;left:0;right:0;height:1px;background:var(--gec-line);
}
.gec-tl__i:first-child::before{left:13px;}
.gec-tl__i:last-child::before{right:calc(100% - 13px);}
.gec-tl__i:nth-child(4n)::before{right:calc(100% - 13px);}
.gec-tl__d{
  position:absolute;top:6px;left:0;width:15px;height:15px;background:var(--gec-green);
  border-radius:50%;
}
.gec-tl__n{font-family:'Montserrat',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.12em;
  color:var(--gec-green);font-variant-numeric:tabular-nums;margin-bottom:7px;}
.gec-tl h3{font-size:15.5px;line-height:1.3;margin:0 0 8px;}
.gec-tl p{font-size:13.5px;line-height:1.55;color:var(--gec-muted);margin:0;}

/* ==========================================================================
   B — bordered deliverables panel
   ========================================================================== */
.gec-panel{border:1px solid var(--gec-line);background:#fff;}
.gec-panel__h{
  display:flex;align-items:center;gap:14px;padding:clamp(18px,2vw,24px) clamp(22px,2.4vw,30px);
  border-bottom:1px solid var(--gec-line);
}
.gec-panel__h svg{width:22px;height:22px;color:var(--gec-green);}
.gec-panel__h span{font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;color:var(--gec-text);}
.gec-panel__b{padding:clamp(20px,2.4vw,30px);}
.gec-panel__f{
  padding:clamp(18px,2vw,22px) clamp(22px,2.4vw,30px);background:var(--gec-wash);
  border-top:1px solid var(--gec-line);font-size:15px;color:var(--gec-blue);
  font-family:'Montserrat',sans-serif;font-weight:600;
}

/* ==========================================================================
   B — centered certification / tagline moments
   ========================================================================== */
.gec-center{text-align:center;max-width:1000px;margin-inline:auto;}
.gec-center .gec-box__i{margin-inline:auto;}
/* .gec-ctas is a flex row (default justify-content:flex-start), so a button in a
   centered block pins left. Centre it to match the centred text around it. */
.gec-center .gec-ctas{justify-content:center;}
.gec-center h2{margin-bottom:16px;}
.gec-center p{color:var(--gec-muted);}
.gec-tagband{
  background:var(--gec-green);color:#fff;padding:clamp(26px,3vw,38px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  margin-top:clamp(28px,3vw,40px);
}
.gec-tagband p{
  font-family:'Montserrat',sans-serif;font-weight:600;margin:0;
  font-size:clamp(17px,1.8vw,23px);line-height:1.35;letter-spacing:-.012em;max-width:22ch;
}
.gec-tagband .gec-btn{background:#fff;color:var(--gec-green);border-color:#fff;}
.gec-tagband .gec-btn:hover{background:var(--gec-blue);border-color:var(--gec-blue);color:#fff;}

/* ==========================================================================
   B — FAQ in two columns, open
   ========================================================================== */
.gec-qa{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--gec-line);
  border:1px solid var(--gec-line);}
.gec-qa__i{background:#fff;padding:clamp(22px,2.4vw,30px);}
.gec-qa h3{margin:0 0 10px;}
.gec-qa p{font-size:14.5px;line-height:1.62;color:var(--gec-muted);margin:0;}

/* ==========================================================================
   C — the plain treatment. Structure only: no boxes, washes or images.
   ========================================================================== */
.gec-c .gec-s{padding-block:clamp(40px,4.6vw,64px);}
.gec-c h2{margin-bottom:16px;}
.gec-c-prose{columns:2;column-gap:clamp(28px,3.4vw,56px);}
.gec-c-prose p{break-inside:avoid;}
.gec-c .gec-c-sub{
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;color:var(--gec-text);
  margin:clamp(22px,2.4vw,30px) 0 12px;
}
.gec-c-list{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(24px,3vw,48px);}
.gec-c-list--3{grid-template-columns:repeat(3,1fr);}
.gec-c-list li{
  padding:7px 0 7px 18px;position:relative;font-size:15px;line-height:1.5;
  border-bottom:1px solid var(--gec-hair);
}
.gec-c-list li::before{
  content:"";position:absolute;left:0;top:15px;width:7px;height:1px;background:var(--gec-green);
}
.gec-c-defs{margin:0;}
.gec-c-defs>div{padding:clamp(16px,1.8vw,22px) 0;border-top:1px solid var(--gec-line);}
.gec-c-defs>div:last-child{border-bottom:1px solid var(--gec-line);}
.gec-c-defs h3{margin:0 0 8px;}
.gec-c-defs p{font-size:15px;line-height:1.65;color:var(--gec-muted);margin:0;}
.gec-c-defs__n{
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.1em;
  color:var(--gec-green);font-variant-numeric:tabular-nums;margin-bottom:6px;display:block;
}
.gec-c-quote{
  border-left:2px solid var(--gec-green);padding-left:20px;margin:clamp(22px,2.4vw,30px) 0 0;
  font-size:16.5px;line-height:1.6;color:var(--gec-blue);
}

/* ==========================================================================
   responsive for the variants
   ========================================================================== */
@media (max-width:860px){
  .gec-hero-ov__in{max-width:none;}
}
@media (max-width:1024px){
  .gec-tl{grid-template-columns:repeat(2,1fr);gap:26px;}
  .gec-tl__i:nth-child(4n)::before{right:0;}
  .gec-tl__i:nth-child(2n)::before{right:calc(100% - 13px);}
  .gec-tl__i::before{display:none;}
  .gec-withhead{grid-template-columns:1fr;}
  .gec-withhead__h{position:static;}
  .gec-prose3{columns:2;}
  .gec-row{grid-template-columns:44px 1fr;}
  .gec-row__body{grid-column:2;}
  .gec-qa{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .gec-tl{grid-template-columns:1fr;}
  .gec-prose3{columns:1;}
  .gec-compare{grid-template-columns:1fr;}
  .gec-c-list,.gec-c-list--3{grid-template-columns:1fr;}
  .gec-c-prose{columns:1;}
  .gec-hero-ov__bg::after{background:linear-gradient(180deg,#0B2229E8,#0B2229F7);}
  .gec-hero-ov__in{max-width:none;}
  .gec-tagband{flex-direction:column;align-items:flex-start;}
}
/* Matches the .gec-quote breakpoint deliberately: A and B are shown side by
   side for comparison, so the two pull quotes must break at the same width. */
@media (max-width:560px){
  .gec-bigquote{grid-template-columns:1fr;gap:12px;}
  .gec-bigquote p{text-wrap:pretty;}
}


/* --------------------------------------------------------------------------
   An image slot can be left empty. The layout closes up rather than leaving a
   hole where the picture would have been.
   -------------------------------------------------------------------------- */
.gec-split--single{grid-template-columns:1fr;}
.gec-hero--single{grid-template-columns:1fr;}
.gec-hero--single .gec-hero__body{max-width:none;}
.gec-hero-ov__bg:empty{background:#123039;}

/* The overlay hero carries a real <img> rather than a background-image, so it
   needs sizing — without this it renders at intrinsic width and pushes a
   horizontal scrollbar onto every screen narrower than the photo. */
.gec-hero-ov__bg{overflow:hidden;}
.gec-hero-ov__bg img{width:100%;height:100%;object-fit:cover;display:block;}

/* The overlay only lightened h1, the kicker and .gec-lead. Any ordinary
   paragraph or inline link kept body colour and disappeared into the scrim —
   which no layout check catches, because the box is exactly where it belongs.

   Scoped to .gec-nz: unscoped, this ties on specificity with
   `.gec-hero-ov .gec-kicker a` and wins only by being later in the file, which
   silently restyled a link on the already-approved latitude hero. */
.gec-nz .gec-hero-ov__in p{color:#DCE8ED;}
.gec-nz .gec-hero-ov__in a:not(.gec-btn){
  color:#fff;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;
}
.gec-nz .gec-hero-ov__in a:not(.gec-btn):hover{color:#BFD6E0;}

/* ==========================================================================
   Net Zero — spec list for the project cards
   ========================================================================== */
:where(.gec) :where(dl,dd){margin:0;}
.gec-spec{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:0 clamp(16px,2vw,28px);margin-top:16px;
}
.gec-spec dt{
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:12.5px;
  letter-spacing:.02em;color:var(--gec-muted);
  padding:9px 0;border-bottom:1px solid var(--gec-hair);
  display:flex;align-items:center;gap:10px;
}
/* Sand reads as a ground, never as a mark — 1.15:1 against white. The tick
   sits on it rather than being drawn in it. */
.gec-spec__m{
  flex:none;width:20px;height:20px;display:inline-grid;place-items:center;
  background:var(--gec-sand);color:var(--gec-green);
}
.gec-spec__m svg{width:12px;height:12px;}
.gec--ondark .gec-spec__m{background:#ffffff1f;color:#fff;}
.gec-spec dd{
  font-size:14.5px;line-height:1.5;color:var(--gec-text);
  padding:9px 0;border-bottom:1px solid var(--gec-hair);
}
.gec-spec dt:last-of-type,.gec-spec dd:last-of-type{border-bottom:0;}

/* The certification programme above a project name. Deliberately NOT .gec-tag
   or .gec-label — both already exist and are in use by the latitude sections,
   and redefining either would change that approved page. */
.gec-prog{
  display:inline-block;font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gec-green);margin-bottom:10px;
}
.gec--ondark .gec-prog{color:#fff;}

/* Prose links.
   The base stylesheet has no generic link colour — it never needed one, because
   the latitude page carries a single link and it sits in a kicker. This page
   runs eighteen through its body copy, so without this they render in the
   browser's default blue (and purple once visited). Scoped to .gec-nz. */
.gec-nz :where(p,li,dd,dt) a:not(.gec-btn){
  color:var(--gec-blue);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;
}
.gec-nz :where(p,li,dd,dt) a:not(.gec-btn):hover{color:var(--gec-green);}

/* On a dark ground the blue is unreadable — follow the ground, not the brand. */
.gec-nz.gec--ondark :where(p,li,dd,dt) a:not(.gec-btn),
.gec-nz .gec-s--band :where(p,li,dd,dt) a:not(.gec-btn){color:#fff;}

/* Never let a long certification name push a grid column open. */
.gec-checks span,.gec-c-list li{overflow-wrap:anywhere;}

/* ==========================================================================
   Net Zero — the founder bio
   A portrait in a 50/50 split runs far taller than the few paragraphs beside
   it, leaving a column of dead space. Give the photo a fixed, modest column
   and let the copy take the rest.
   ========================================================================== */
.gec-bio{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(26px,3.6vw,52px);align-items:start;
}
/* The portrait keeps its own proportions — forcing 4:5 on a 0.70 source crops
   the top of the head. */
.gec-fig--nat img{aspect-ratio:464/661;height:auto;}

@media (max-width:760px){
  .gec-bio{grid-template-columns:1fr;gap:24px;}
  .gec-bio .gec-fig{max-width:300px;}
}

/* ==========================================================================
   Vertical rhythm
   The shared components carry no outer margin on purpose, so a call site can
   compose them tightly. The latitude sections hand-placed a margin at every
   join; these sections state the rule once instead. Everything here is scoped
   to .gec-nz so the approved latitude page cannot be affected.
   ========================================================================== */
.gec-nz .gec-boxes,
.gec-nz .gec-checks,
.gec-nz .gec-rows,
.gec-nz .gec-tiers,
.gec-nz .gec-tl,
.gec-nz .gec-steps,
.gec-nz .gec-c-list,
.gec-nz .gec-c-defs,
.gec-nz .gec-compare,
.gec-nz .gec-qa,
.gec-nz .gec-faq,
.gec-nz .gec-chips{margin-top:clamp(24px,2.8vw,34px);}

.gec-nz .gec-listhead{margin-top:clamp(28px,3.2vw,40px);}
.gec-nz .gec-close{margin-top:clamp(20px,2.2vw,28px);}
.gec-nz .gec-c-quote{margin-top:clamp(24px,2.6vw,32px);}
.gec-nz .gec-spec{margin-top:14px;}

/* These two already supply the gap below themselves — a second one from the
   block that follows would read as a hole. */
.gec-nz .gec-listhead + *,
.gec-nz .gec-head + *{margin-top:0;}

/* Headings set margin:0 globally, so every heading-to-body join has to be
   stated. A lead paragraph gets air; a caption stays tight to its heading
   because it belongs to it — but not touching. */
.gec-nz h1 + .gec-lead,
.gec-nz h2 + .gec-lead{margin-top:clamp(12px,1.4vw,16px);}
.gec-nz h3 + .gec-label{margin-top:4px;}
.gec-nz .gec-prog + h3{margin-top:0;}

/* A trailing button or note after a block of content. */
.gec-nz .gec-c-prose + p,
.gec-nz .gec-prose2 + p,
.gec-nz .gec-prose3 + p,
.gec-nz .gec-c-defs + p,
.gec-nz .gec-spec + p,
.gec-nz .gec-checks + p,
.gec-nz .gec-c-list + p,
.gec-nz .gec-chips + p{margin-top:clamp(20px,2.2vw,28px);}

/* The section's own padding opens the block; nothing inside should add to it. */
.gec-nz .gec-w > :first-child,
.gec-nz .gec-c-defs > div > :first-child,
.gec-nz .gec-box > :first-child,
.gec-nz .gec-compare > div > :first-child{margin-top:0;}

/* A heading sharing a row with its body copy needs the gap set explicitly —
   .gec h2 is margin:0 and these layouts have no .gec-head to supply it. */
.gec-nz .gec-withhead__h h2,
.gec-nz .gec-band-grid h2{margin-bottom:clamp(14px,1.6vw,20px);}

@media (max-width:640px){
  /* Label above value rather than beside it — at phone width the two-column
     form squeezes the value to a few characters. */
  .gec-spec{grid-template-columns:1fr;gap:0;}
  .gec-spec dt{border-bottom:0;padding-bottom:0;}
  .gec-spec dd{padding-top:2px;}
}

/* ==========================================================================
   Five icon boxes
   Five items on a three-column track leave a visible hole in the second row.
   A six-column track lets the first row take three (span 2) and the second
   take two (span 3), both filling the full width.
   ========================================================================== */
.gec-nz .gec-boxes--5{grid-template-columns:repeat(6,1fr);}
.gec-nz .gec-boxes--5 > *{grid-column:span 2;}
.gec-nz .gec-boxes--5 > :nth-child(4),
.gec-nz .gec-boxes--5 > :nth-child(5){grid-column:span 3;}

@media (max-width:1024px){
  /* two per row, the odd one out taking the full width rather than sitting
     half-empty beside nothing */
  .gec-nz .gec-boxes--5 > *,
  .gec-nz .gec-boxes--5 > :nth-child(4){grid-column:span 3;}
  .gec-nz .gec-boxes--5 > :nth-child(5){grid-column:span 6;}
}
@media (max-width:560px){
  .gec-nz .gec-boxes--5 > *,
  .gec-nz .gec-boxes--5 > :nth-child(4),
  .gec-nz .gec-boxes--5 > :nth-child(5){grid-column:span 6;}
}

/* Seven boxes: the same problem as five, one row further along. A twelve-column
   track gives three per row (span 4) and lets the seventh take the full width
   rather than sitting alone in a third of it. */
.gec-nz .gec-boxes--7{grid-template-columns:repeat(12,1fr);}
.gec-nz .gec-boxes--7 > *{grid-column:span 4;}
.gec-nz .gec-boxes--7 > :nth-child(7){grid-column:span 12;}

@media (max-width:1024px){
  .gec-nz .gec-boxes--7 > *{grid-column:span 6;}
  .gec-nz .gec-boxes--7 > :nth-child(7){grid-column:span 12;}
}
@media (max-width:560px){
  .gec-nz .gec-boxes--7 > *,
  .gec-nz .gec-boxes--7 > :nth-child(7){grid-column:span 12;}
}

/* ==========================================================================
   A pair of calls to action
   The ESCO page is the first with two buttons side by side. The second is a
   ghost so the primary still reads as the primary.
   ========================================================================== */
.gec-nz .gec-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:clamp(22px,2.4vw,30px);}
.gec-nz .gec-btn--ghost{background:transparent;color:var(--gec-green);border-color:var(--gec-green);}
.gec-nz .gec-btn--ghost:hover{background:var(--gec-green);color:#fff;}

/* On the scrim the green ghost disappears; follow the ground. */
.gec-nz .gec-hero-ov__in .gec-btn--ghost{color:#fff;border-color:#ffffff8c;}
.gec-nz .gec-hero-ov__in .gec-btn--ghost:hover{background:#fff;color:var(--gec-green);border-color:#fff;}

@media (max-width:560px){
  /* .gec-btn goes full width at this size, so the pair has to stack or the
     two buttons fight for the same row. */
  .gec-nz .gec-ctas{flex-direction:column;align-items:stretch;}
}

/* ==========================================================================
   Energy Audit (2026-08-06 rebuild)
   ========================================================================== */

/* --- rounded buttons, site-wide ------------------------------------------
   Was 0 (square, mirroring .ast-button). The site's own Elementor hero
   buttons are 50px pills; the client asked for rounded everywhere. */
.gec-btn{border-radius:50px;}

/* --- verbatim lists, balanced -------------------------------------------
   The client's lists are published in full and unedited, so their lengths are
   whatever the document says — 9, 10, 12, 14, 19. A grid fills row by row and
   strands the remainder (19 items on three tracks leaves one alone on the last
   row). Multi-column balances the runs instead: 7/6/6, 7/7, 5/5, 4/4/4. */
.gec-flow{
  list-style:none;margin:0;padding:0;
  column-gap:clamp(24px,3vw,48px);
}
.gec-flow--2{columns:2;}
.gec-flow--3{columns:3;}
.gec-flow--4{columns:4;}
.gec-flow li{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  display:flex;gap:11px;align-items:flex-start;
  padding:11px 0;border-bottom:1px solid var(--gec-line);
  font-size:15px;line-height:1.5;color:var(--gec-text);
}
.gec-flow li svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--gec-green);}
.gec-flow li span{display:block;}
.gec--ondark .gec-flow li{border-bottom-color:#ffffff2e;}

/* These two tie .gec-checks on specificity (0,1,0) and sit later in the file,
   so they were beating the base sheet's own mobile collapse and holding three
   columns at 390px — "ENERGY STAR Portfolio Manager review" in a 100px column.
   The responsive block at the end of this file puts the collapse back. */
.gec-checks--3{grid-template-columns:repeat(3,1fr);}
.gec-checks--4{grid-template-columns:repeat(4,1fr);}

/* --- padding after images -------------------------------------------------
   Client: "Padding after each image", "Spacing issue: padding between images
   and blocks". The figures carried no bottom margin at all — a block following
   one sat flush against it. */
.gec-fig--after{margin-bottom:clamp(30px,3.4vw,46px);}
.gec-ea .gec-fig{margin-bottom:0;}
.gec-ea .gec-fig--after{margin-bottom:clamp(30px,3.4vw,46px);}
.gec-ea .gec-split .gec-fig + *,
.gec-ea .gec-fig--band + *:not(.gec-listhead){margin-top:clamp(26px,3vw,38px);}
.gec-fig--port img{aspect-ratio:4/5;}
.gec-fig--band img{aspect-ratio:21/9;}

/* --- answer box ----------------------------------------------------------
   The doc's "add an answer box near the top" block, which the client agreed
   to. A quiet rule rather than a tinted panel — the hero already carries the
   page's one high-contrast moment. */
.gec-answer{
  font-size:clamp(15.5px,1.3vw,17px);line-height:1.65;
  border-left:2px solid var(--gec-green);padding-left:20px;
  margin:22px 0 30px;
}
.gec-hero-ov__in .gec-answer{border-left-color:#fff;color:#DCE8ED;}

/* --- facts strip ---------------------------------------------------------
   Client: "Not a fan of yellow — change the colour to the brand colour",
   "May 1 should align with text", "Below 50 should align with above text -
   padding". Sand becomes a pale blue tint. The 38px inset that pushed all
   three figures out of line with the prose above is gone; the columns now sit
   on the same 1200px grid as the body copy, so 25,000 / May 1 / Below 50 each
   start exactly where the paragraph above them starts. */
.gec-ea .gec-facts{
  background:color-mix(in srgb, var(--gec-blue) 8%, #fff);
  padding:clamp(26px,3vw,34px) 0;
  border-top:1px solid color-mix(in srgb, var(--gec-blue) 22%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--gec-blue) 22%, transparent);
  margin-top:clamp(30px,3.4vw,44px);
  gap:clamp(20px,2.4vw,34px);
}
.gec-ea .gec-fact{padding-inline:0;}
.gec-ea .gec-fact p{color:var(--gec-text);}
.gec-ea .gec-facts--bare .gec-fact__u{margin-bottom:0;}
/* Older browsers without color-mix fall back to the existing 3% wash token
   rather than to sand, so the yellow cannot come back. */
@supports not (background:color-mix(in srgb,#000 5%,#fff)){
  .gec-ea .gec-facts{background:var(--gec-wash);border-color:var(--gec-line);}
}

/* --- audit levels --------------------------------------------------------
   Not a stated process, so these keep icons — the client's "'without process
   stated,' keep icons". The depth meter shows scope without inventing a claim
   about cost or duration. */
.gec-levels{border-top:1px solid var(--gec-line);}
.gec-level{
  display:grid;grid-template-columns:56px minmax(240px,1fr) 1.35fr;
  gap:clamp(20px,2.6vw,38px);align-items:start;
  padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--gec-line);
}
.gec-level__i{
  width:44px;height:44px;display:grid;place-items:center;
  background:var(--gec-green);color:#fff;
}
.gec-level__i svg{width:21px;height:21px;}
.gec-level__h h3{margin:0 0 2px;}
.gec-level__d{
  display:block;margin-top:9px;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gec-muted);font-weight:600;
}
.gec-level__b p{margin:0;color:var(--gec-muted);font-size:15px;line-height:1.65;}

/* --- question band -------------------------------------------------------- */
.gec-qband{
  background:var(--gec-blue);color:#fff;
  padding:clamp(30px,3.6vw,48px) 0;margin:clamp(30px,3.4vw,44px) 0;
}
.gec-qband .gec-band-q{color:#fff;margin:0;}
.gec-band-q--rule{
  border-left:3px solid var(--gec-green);padding-left:22px;
  margin:clamp(26px,3vw,36px) 0;
}

/* --- spacing between composed blocks -------------------------------------
   The shared components carry no outer margin on purpose so a call site can
   compose them tightly; that is exactly how the previous build produced gaps
   measuring 0.0px. These joins are hand-placed. */
.gec-prose2--after{margin-top:clamp(26px,3vw,38px);}
.gec-steps--after{margin-top:clamp(26px,3vw,38px);}
.gec-ea .gec-listhead + .gec-flow,
.gec-ea .gec-listhead + .gec-checks,
.gec-ea .gec-listhead + .gec-chips{margin-top:0;}
.gec-ea .gec-chips{margin-top:0;}
.gec-ea .gec-close{margin-top:clamp(26px,3vw,38px);}

/* --- icons: green ground, white glyph -------------------------------------
   Client: "Keep icons green and white (not white and green)". The flat
   treatment rendered a green glyph on nothing, so four boxes in the Latitude
   section read as a different language from the rest of the page. Scoped to
   .gec-ea: the Federal page still uses the flat treatment and is not in scope
   for this pass. */
.gec-ea .gec-boxes--flat .gec-box__i{
  width:46px;height:46px;background:var(--gec-green);color:#fff;
}
.gec-ea .gec-box__i,
.gec-ea .gec-row__i,
.gec-ea .gec-level__i{background:var(--gec-green);color:#fff;}
.gec-ea .gec-box__i svg,
.gec-ea .gec-row__i svg,
.gec-ea .gec-level__i svg{color:#fff;}

/* --- intro fills the width ------------------------------------------------
   The standfirst used to sit alone in a half-width column with ~300px of empty
   space under it, which is the "everything must fill 1200px" rule being
   broken in the first screenful of the page. */
.gec-ea .gec-intro{grid-template-columns:.85fr 1.15fr;align-items:start;}
.gec-ea .gec-intro .gec-prose2{columns:2;}

/* --- panel label ----------------------------------------------------------
   The deliverables panel led with a 22px outline glyph in pale green on white,
   which all but disappeared on a phone. It becomes the same green chip with a
   white glyph the rest of the page uses. */
.gec-panel__h span{line-height:1.4;}
.gec-ea .gec-panel__h{gap:14px;align-items:center;}
.gec-ea .gec-panel__h svg{
  width:38px;height:38px;flex:none;padding:9px;
  background:var(--gec-green);color:#fff;
}

/* --- joins the audit found at exactly 0.0px -------------------------------
   A gap measuring exactly zero is no margin being applied at all, not
   tightness. Each of these was a real one. */
.gec-ea .gec-prose2 + .gec-fig,
.gec-ea .gec-prose3 + .gec-fig{margin-top:clamp(28px,3.2vw,42px);}
.gec-ea .gec-c-list + .gec-c-prose,
.gec-ea .gec-c-defs + .gec-c-prose{margin-top:clamp(24px,2.8vw,34px);}
.gec-ea .gec-c-prose + .gec-c-q{margin-top:clamp(26px,3vw,36px);}
.gec-ea .gec-c-q{
  font-size:clamp(17px,1.7vw,21px);line-height:1.4;color:var(--gec-blue);
  margin:0 0 clamp(18px,2vw,24px);
}

/* --- three-column prose ---------------------------------------------------
   The introduction runs four short paragraphs. Two columns left the second one
   long and the section deep; three fills the 1200px without either. */
.gec-prose3{columns:3;column-gap:clamp(26px,3vw,48px);}
.gec-prose3 p{break-inside:avoid;}
.gec-stand--rule{
  border-top:2px solid var(--gec-green);padding-top:16px;
  margin-bottom:clamp(26px,3vw,36px);
}

/* --- introduction: text one side, image the other --------------------------
   Client, 2026-08-07: "the text splitting into two columns brings confusion,
   can we maintain an order of text on one side, then other side its image."
   CSS multi-column reads down the left track and back up to the right, which
   is the confusion. One track beside a figure removes it.

   The figure STRETCHES to the height of the prose rather than carrying a fixed
   ratio. "Keep them symmetrical" cost two rounds on Net Zero and Utility
   Incentives, both times because a fixed-ratio photo came out shorter or
   taller than the column beside it; a stretched figure cannot, whatever the
   copy length. min-height is the guard against the zero-height lazy-load
   collapse — .gec-fig--nat measured 0px once for exactly that reason.

   Scoped to .gec-ea and to a name of its own: .gec-intro already exists on
   this sheet from the previous build, and redefining a live class is the trap
   that has broken approved pages four times.

   .gec-ea-tsplit is the same component under a second name, used by the
   Elevate Buildings section from 2026-08-07 ("we can replace the magazine
   style with how the introductions section text looks like"). Two names rather
   than one because the two differ in vertical spacing: the introduction opens
   its section and composes its own margins, while the benchmarking splits sit
   between a heading, a list and an icon-box row and need margins of their own.
   Renaming the intro's class would have edited an approved section for no
   visible gain, which is not worth the risk on this page. */
.gec-ea .gec-ea-intro,
.gec-ea .gec-ea-tsplit{align-items:stretch;}
.gec-ea .gec-ea-intro>div,
.gec-ea .gec-ea-tsplit>div{min-width:0;}
.gec-stand--top{margin-bottom:clamp(18px,2vw,26px);}

/* Spacing for the benchmarking splits only. The shared components carry no
   outer margin on purpose, and composing them without hand-placing one is how
   ~20 joins on the latitude page came out at exactly 0.0px. */
.gec-ea .gec-ea-tsplit{margin-top:clamp(28px,3.2vw,40px);}
.gec-ea .gec-ea-tsplit + .gec-listhead{margin-top:clamp(32px,3.6vw,46px);}
.gec-ea .gec-boxes--fact{margin-top:clamp(30px,3.4vw,44px);}
/* .gec-fact__u carries margin:8px 0 10px for the old bare strip; inside a
   flex box that trailing 10px pushes the card taller than its neighbours. */
.gec-ea .gec-boxes--fact .gec-fact__u{margin:6px 0 0;}

/* The image is positioned ABSOLUTELY inside its figure, which is the whole
   trick. Left in flow it keeps its intrinsic 4:5 height, so the photograph
   drives the row and the prose column stretches to match it — 123px of white
   under the last paragraph, measured, which is the dead space he has flagged
   twice before. Out of flow it contributes no height, so the row is set by the
   copy and the photograph fills exactly that. The layout gate passes either
   way (it compares the two columns, and both stretch), so this one only shows
   up in a screenshot.

   min-height is a collapse guard, not a design height — keep it well under the
   shortest block that uses this, or it starts forcing dead space instead of
   preventing it. The benchmarking closing copy is two paragraphs, ~260px. */
@media (min-width:701px){
  .gec-ea .gec-ea-intro>.gec-fig,
  .gec-ea .gec-ea-tsplit>.gec-fig{height:100%;min-height:240px;}
  .gec-ea .gec-ea-intro>.gec-fig img,
  .gec-ea .gec-ea-tsplit>.gec-fig img{
    position:absolute;inset:0;height:100%;width:100%;object-fit:cover;aspect-ratio:auto;
  }
}

/* Variant C's ground. The brand blue #4082A5 is 4.24:1 against white — under
   AA's 4.5:1, which is tolerable on a heading and not on a whole section of
   body copy. #2E6480 is the same hue darkened: 6.46:1 against white, 5.70:1
   against the .gec--ondark type colour. Resolves through --gec-sec-bg so a
   wash="" attribute still overrides it. */
.gec-ea .gec-s--deep{background:var(--gec-sec-bg,#2E6480);}

/* --- plain treatment, single paragraph ------------------------------------
   .gec-c-prose is two columns. One paragraph in it left the entire second
   column empty — 580px of dead space, which is the same "fill 1200px" fault
   the client flagged on the live page. */
.gec-c-prose--1{columns:1;}

/* --- band grid ------------------------------------------------------------
   A heading block is always shorter than the prose beside it; centring makes
   that deliberate rather than a hole under the heading. */
.gec-ea .gec-band-grid{align-items:center;}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:1024px){
  .gec-flow--4{columns:2;}
  .gec-flow--3{columns:2;}
  .gec-checks--3,.gec-checks--4{grid-template-columns:repeat(2,1fr);}
  .gec-level{grid-template-columns:44px 1fr;row-gap:14px;}
  .gec-level__b{grid-column:2;}
  .gec-ea .gec-intro{grid-template-columns:1fr;}
  .gec-ea .gec-intro .gec-prose2{columns:1;}
}
@media (max-width:700px){
  .gec-flow--2,.gec-flow--3,.gec-flow--4{columns:1;}
  .gec-checks--2,.gec-checks--3,.gec-checks--4{grid-template-columns:1fr;}
  .gec-ea .gec-facts{grid-template-columns:1fr;gap:22px;}
}

/* ==========================================================================
   Net Zero (2026-08-06 rebuild)
   ========================================================================== */

/* --- a list inside a process step ----------------------------------------
   Steps 2 and 3 of the five-step process each carry a list of their own — 7
   and 13 items. Both were dropped from the live page. They need a quieter
   label and closing line than a section-level one, or the step starts
   competing with the section heading above it. */
.gec-listhead--sub{
  font-size:13.5px;letter-spacing:.01em;
  margin:22px 0 14px;padding-bottom:9px;
}
.gec-close--sub{
  font-size:14.5px;line-height:1.6;
  border-left-width:2px;padding-left:16px;
  margin:18px 0 0;
}
.gec-step__b .gec-flow li{font-size:14.5px;padding:8px 0;}
/* Steps 1, 4 and 5 run to two and three paragraphs. The shared components
   carry no outer margin, so without this they butt against one another and
   read as one wall of text. */
.gec-step__b p + p,
.gec-stepcard p + p{margin-top:1em;}

/* --- process, card treatment (variant B) ---------------------------------
   Numbered, not icon-led. Two of the five cards are much taller than the other
   three because of their lists, so these run as a single column rather than a
   grid that would leave a hole. */
.gec-stepcards{display:flex;flex-direction:column;gap:0;
  border-top:1px solid var(--gec-line);}
.gec-stepcard{
  display:grid;grid-template-columns:78px 1fr;
  gap:clamp(16px,2vw,28px);align-items:start;
  padding:clamp(24px,2.8vw,34px) 0;border-bottom:1px solid var(--gec-line);
}
.gec-stepcard__n{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:clamp(26px,2.6vw,34px);line-height:1;color:var(--gec-green);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.gec-stepcard h3{margin:0 0 12px;grid-column:2;}
.gec-stepcard > *:not(.gec-stepcard__n){grid-column:2;}

/* --- project cards -------------------------------------------------------
   Client: "Keep them symmetrical". The two cards carried five spec rows
   against three, and a note on one and not the other, so they finished at
   visibly different heights. Equal-height columns with the note pinned to the
   bottom of its own card fixes that without inventing content for the
   shorter one. */
.gec-cards{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,2.4vw,32px);margin-top:clamp(26px,3vw,36px);
}
.gec-cards--even .gec-card{display:flex;flex-direction:column;height:100%;}
.gec-card{
  border:1px solid var(--gec-line);background:var(--gec-card-bg,#fff);
  padding:clamp(22px,2.6vw,30px);
}
.gec-cards--flat .gec-card{border:0;background:transparent;padding:0;}
.gec-card h3{margin:0 0 4px;}
.gec-card__foot{margin-top:auto;}
.gec-card .gec-spec{margin-top:16px;}

/* --- the sand chip is retired --------------------------------------------
   Sand #F9F0C8 was a ground, never a mark, and the client is not a fan of the
   yellow. The check now sits on the section's own ground in the brand green,
   which is also what "keep icons green and white" asks for elsewhere. */
.gec-netzero .gec-spec__m{
  background:transparent;color:var(--gec-green);
  width:15px;height:15px;padding:0;margin-right:0;
}
.gec-netzero .gec-spec__m svg{width:15px;height:15px;}
/* How far the label's text sits from the row's left edge: the tick's own width
   plus the flex gap the dt already applies. Used to line the value up
   underneath it on a phone. Setting a margin on the tick as well as relying on
   that gap is what put the two out by ten pixels. */
.gec-netzero .gec-spec{--gec-spec-indent:25px;}
/* Federal still renders the 20px chip, so its label sits 30px in. */
.gec-fed .gec-spec{--gec-spec-indent:30px;}

/* --- icons: green ground, white glyph ------------------------------------- */
.gec-netzero .gec-box__i,
.gec-netzero .gec-row__i{background:var(--gec-green);color:#fff;}
.gec-netzero .gec-box__i svg,
.gec-netzero .gec-row__i svg{color:#fff;}
.gec-netzero .gec-boxes--flat .gec-box__i{
  width:46px;height:46px;background:var(--gec-green);color:#fff;
}

/* --- question boxes ------------------------------------------------------
   The five early questions are questions, not features, so the box carries a
   heading and no body copy. Without this they render with a stranded gap
   where the paragraph would have been. */
.gec-netzero .gec-boxes--5 .gec-box h3{margin:0;}
.gec-netzero .gec-boxes--5 .gec-box{gap:12px;}

/* --- joins --------------------------------------------------------------- */
.gec-netzero .gec-listhead + .gec-flow,
.gec-netzero .gec-listhead + .gec-checks,
.gec-netzero .gec-listhead + .gec-chips,
.gec-netzero .gec-listhead + .gec-boxes,
.gec-netzero .gec-listhead + .gec-rows{margin-top:0;}
.gec-netzero .gec-chips{margin-top:0;}
.gec-netzero .gec-fig{margin-bottom:0;}
.gec-netzero .gec-fig--after{margin-bottom:clamp(30px,3.4vw,46px);}
.gec-netzero .gec-prose2 + .gec-fig,
.gec-netzero .gec-lead + .gec-fig{margin-top:clamp(28px,3.2vw,42px);}
.gec-netzero .gec-close{margin-top:clamp(26px,3vw,38px);}
.gec-netzero .gec-ctas{margin-top:clamp(26px,3vw,36px);}
.gec-netzero .gec-c-defs .gec-listhead--sub{margin-top:16px;}

/* --- band grid -----------------------------------------------------------
   A heading alone in the left column is 50px against 387px of prose. Centring
   makes that deliberate rather than a hole under the heading. */
.gec-netzero .gec-band-grid{align-items:center;}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:1024px){
  .gec-cards{grid-template-columns:1fr;}
  .gec-stepcard{grid-template-columns:56px 1fr;}
}
@media (max-width:700px){
  .gec-stepcard{grid-template-columns:1fr;row-gap:6px;}
  .gec-stepcard h3,.gec-stepcard > *:not(.gec-stepcard__n){grid-column:1;}
}

/* --- spec rows on a phone, for every page that uses them -------------------
   Deliberately unscoped. Net Zero and Federal are the only two pages carrying
   .gec-spec, and both have the same fault, so this belongs on the component
   rather than being written twice.

   Astra styles bare <dd> with a 1.5em inline-start margin — 21.75px here. It
   is invisible in the review mock, which does not load the theme, and it is
   what put the value 22px right of its label on the live page after the indent
   below was added. Reset it before positioning anything on it. */
.gec-spec dd{margin:0;}

@media (max-width:640px){
  .gec-spec dt{padding-bottom:0;}
  .gec-spec dd{
    padding-left:var(--gec-spec-indent,30px);
    padding-top:3px;padding-bottom:11px;
  }
}

/* --- Energy Consulting: the icon rows on a phone ---------------------------
   Client, 2026-08-07, looking at the live page on a phone: "the spaces left on
   mobile a bit big."

   Measured at 390px: 40px between a row's heading and its own paragraph, while
   consecutive rows sit 44px apart. The heading was therefore no closer to the
   text it introduces than to the next item entirely, so the five benefits read
   as ten loose blocks rather than five.

   The cause is that .gec-row uses one `gap` for both axes. Below 1024px the
   body drops onto its own grid track, so the 18px row-gap lands between the
   heading and the copy and stacks on the h3's own 10px bottom margin. Stating
   row-gap separately leaves the 44px column gap to the icon untouched.

   Two things were adding up. The `gap` shorthand put 18px between the heading
   and the copy, and the h3's own 10px sat on top of it. Then the 44px icon —
   not the heading — sets the height of the first grid track, and align-items
   :start pinned the 22px heading to the top of it, leaving 22px of slack
   underneath before the copy even began. Centring the heading against the icon
   splits that slack so it reads as space around the pair rather than a gap
   inside it.

   Deliberately UNSCOPED. .gec-row is shared by Net Zero, ESCO, Federal and the
   Energy Audit and every one of them had the identical 40px gap, so this
   belongs on the component rather than being written five times. The client
   asked for it across the pages already built once he had seen it here.

   It ties with the base .gec-row on specificity — a media query does not raise
   it — and wins only by sitting later in the built stylesheet, which is the
   trap that has broken approved work four times. NZ2_CSS is appended after
   VARIANT_CSS in make_css.py, so the order holds; if that ever changes, this
   silently stops applying. */
@media (max-width:1024px){
  .gec-row{row-gap:6px;align-items:center;}
  .gec-row h3{margin-bottom:0;}
  /* The body is on its own track, so centring must not apply to it. */
  .gec-row__body{align-self:start;}
}

/* --- Utility Incentives / Energy Consulting: prose beside an image ---------
   Third page to take this component, rebuilt 2026-08-07 from the April 2026
   brief. Its own class again rather than a shared one: .gec-ea-tsplit,
   .gec-nz-tsplit and .gec-ui-tsplit have identical geometry and differ in the
   margins each page needs around it, and a shared class is how approved work
   has been broken four times on this stylesheet. */
.gec-ui .gec-ui-tsplit{align-items:stretch;}
.gec-ui .gec-ui-tsplit>div{min-width:0;}
.gec-ui .gec-head + .gec-ui-tsplit{margin-top:0;}
.gec-ui .gec-ui-tsplit{margin-top:clamp(24px,2.8vw,34px);}
.gec-ui .gec-ui-tsplit + .gec-boxes,
.gec-ui .gec-ui-tsplit + .gec-c-defs{margin-top:clamp(30px,3.4vw,44px);}

@media (min-width:701px){
  .gec-ui .gec-ui-tsplit>.gec-fig{height:100%;min-height:240px;}
  .gec-ui .gec-ui-tsplit>.gec-fig img{
    position:absolute;inset:0;height:100%;width:100%;object-fit:cover;aspect-ratio:auto;
  }
}

/* --- Relevant Net Zero Experience: the two project cards -------------------
   Client, 2026-08-07: "align together the items, no need to underline the
   pointers."

   The label column was minmax(0,auto), so it sized to its own card's longest
   label — 'David Griffin's contribution' on the left, 'Certification level' on
   the right. The two cards therefore had different label widths and none of
   the values lined up across the pair. A stated width makes both cards share
   one grid, which is what "align together" asks for and what "keep them
   symmetrical" has always asked for.

   Scoped to .gec-netzero: the Federal and ESCO pages use .gec-spec too, with
   their own indent token, and are not in scope for this pass. */
@media (min-width:701px){
  .gec-netzero .gec-spec{grid-template-columns:200px minmax(0,1fr);}
  .gec-netzero .gec-spec dt{align-items:flex-start;}
  .gec-netzero .gec-spec__m{margin-top:1px;}
}
/* The hairline under every row. It read as an underline on each label rather
   than as a rule between rows, which is what he is objecting to. */
.gec-netzero .gec-spec dt,
.gec-netzero .gec-spec dd{border-bottom:0;padding-top:7px;padding-bottom:7px;}

/* --- prose beside an image, not in columns ---------------------------------
   Client, 2026-08-07: "changes are as what we have done in audit energy page
   … just remove magazine style". Same component as .gec-ea-tsplit, scoped to
   this page's own class so neither page can move the other — a shared name is
   how approved work has been broken four times on this stylesheet.

   The image is absolutely positioned so it contributes no height: left in
   flow it keeps its 4:5 ratio, drives the row, and leaves white space under
   the copy. Out of flow the copy sets the height and the photograph fills it,
   which is what "keep them symmetrical" asks for. min-height is only a guard
   against a lazy-loaded figure collapsing to zero. */
.gec-netzero .gec-nz-tsplit{align-items:stretch;}
.gec-netzero .gec-nz-tsplit>div{min-width:0;}
.gec-netzero .gec-nz-tsplit{margin-top:clamp(24px,2.8vw,34px);}
/* The bare `+ p` matters: "Why Choose" variant C puts its button in a plain
   <p>, not a .gec-ctas, and the join measured exactly 0.0px — the tell that a
   component with no outer margin has been composed without one. */
.gec-netzero .gec-nz-tsplit + .gec-listhead,
.gec-netzero .gec-nz-tsplit + .gec-close,
.gec-netzero .gec-nz-tsplit + .gec-ctas,
.gec-netzero .gec-nz-tsplit + p{margin-top:clamp(30px,3.4vw,44px);}

@media (min-width:701px){
  .gec-netzero .gec-nz-tsplit>.gec-fig{height:100%;min-height:240px;}
  .gec-netzero .gec-nz-tsplit>.gec-fig img{
    position:absolute;inset:0;height:100%;width:100%;object-fit:cover;aspect-ratio:auto;
  }
}

/* ==========================================================================
   Federal Energy Consulting Services (2026-08-06 rebuild)
   ========================================================================== */

/* Icons: green ground, white glyph — the house rule, applied here too. */
.gec-fed .gec-box__i,
.gec-fed .gec-row__i{background:var(--gec-green);color:#fff;}
.gec-fed .gec-box__i svg,
.gec-fed .gec-row__i svg{color:#fff;}
.gec-fed .gec-boxes--flat .gec-box__i{
  width:46px;height:46px;background:var(--gec-green);color:#fff;
}

/* Sand is retired site-wide; the spec mark is a plain green tick. */
.gec-fed .gec-spec__m{
  background:transparent;color:var(--gec-green);
  width:15px;height:15px;padding:0;margin-right:0;
}
.gec-fed .gec-spec__m svg{width:15px;height:15px;}
.gec-fed .gec-spec{--gec-spec-indent:25px;}

/* Joins — the shared components carry no outer margin on purpose. */
.gec-fed .gec-listhead + .gec-flow,
.gec-fed .gec-listhead + .gec-checks,
.gec-fed .gec-listhead + .gec-chips,
.gec-fed .gec-listhead + .gec-boxes,
.gec-fed .gec-listhead + .gec-rows{margin-top:0;}
.gec-fed .gec-chips{margin-top:0;}
.gec-fed .gec-fig{margin-bottom:0;}
.gec-fed .gec-fig--after{margin-bottom:clamp(30px,3.4vw,46px);}
.gec-fed .gec-prose2 + .gec-fig,
.gec-fed .gec-lead + .gec-fig{margin-top:clamp(28px,3.2vw,42px);}
.gec-fed .gec-close{margin-top:clamp(26px,3vw,38px);}
.gec-fed .gec-ctas{margin-top:clamp(26px,3vw,36px);}

/* A heading alone beside a column of prose is a hole; centre it instead. */
.gec-fed .gec-band-grid{align-items:center;}

/* --- panel header icon, for every page that uses one ----------------------
   Deliberately unscoped. It was a 22px outline glyph in pale green on white,
   which all but disappeared on a phone — the client reported it on the Energy
   Audit page. That was fixed there under .gec-ea; the same component is used
   here, so the fix belongs on the component. Identical rule, wider reach. */
.gec-panel__h{gap:14px;align-items:center;}
.gec-panel__h svg{
  width:38px;height:38px;flex:none;padding:9px;
  background:var(--gec-green);color:#fff;
}

/* Two buttons side by side in the hero and at the foot of the page. */
.gec-fed .gec-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
/* The second button in a pair is the secondary action. The PHP button helper
   emits a bare .gec-btn, so the pairing is expressed here rather than by
   threading a class through the generated token. */
.gec-fed .gec-ctas .gec-btn + .gec-btn,
.gec-fed .gec-btn--ghost{
  background:transparent;color:var(--gec-green);border-color:var(--gec-green);
}
.gec-fed .gec-ctas .gec-btn + .gec-btn:hover,
.gec-fed .gec-btn--ghost:hover{background:var(--gec-green);color:#fff;}
/* On the overlay hero the secondary button sits on a dark photograph, so it
   has to be white — a green outline on a dark scrim is unreadable.
   The leading .gec is not decoration: a page-scoped rule like
   `.gec-esco .gec-ctas .gec-btn + .gec-btn` is (0,3,0) and so was this, so
   whichever stylesheet came last won. It shipped once as dark-green-on-dark.
   (0,4,0) puts it beyond any page scope. */
.gec .gec-hero-ov__in .gec-ctas .gec-btn + .gec-btn,
.gec .gec-hero-ov__in .gec-btn--ghost{
  background:transparent;border-color:#fff;color:#fff;
}
.gec .gec-hero-ov__in .gec-ctas .gec-btn + .gec-btn:hover,
.gec .gec-hero-ov__in .gec-btn--ghost:hover{
  background:#fff;color:var(--gec-green);border-color:#fff;
}

/* ==========================================================================
   ESCO Performance Contracting Support (2026-08-06 rebuild)
   ========================================================================== */

/* Icons: green ground, white glyph. */
.gec-esco .gec-box__i,
.gec-esco .gec-row__i{background:var(--gec-green);color:#fff;}
.gec-esco .gec-box__i svg,
.gec-esco .gec-row__i svg{color:#fff;}
.gec-esco .gec-boxes--flat .gec-box__i{
  width:46px;height:46px;background:var(--gec-green);color:#fff;
}

/* Sand is retired; the spec mark is a plain green tick. */
.gec-esco .gec-spec__m{
  background:transparent;color:var(--gec-green);
  width:15px;height:15px;padding:0;margin-right:0;
}
.gec-esco .gec-spec{--gec-spec-indent:25px;}

/* Each lifecycle step runs to two paragraphs; the shared components carry no
   outer margin, so without this they butt together as one block of text. */
.gec-esco .gec-step__b p + p,
.gec-esco .gec-stepcard p + p{margin-top:1em;}

/* Joins. */
.gec-esco .gec-listhead + .gec-flow,
.gec-esco .gec-listhead + .gec-checks,
.gec-esco .gec-listhead + .gec-chips,
.gec-esco .gec-listhead + .gec-boxes,
.gec-esco .gec-listhead + .gec-rows{margin-top:0;}
.gec-esco .gec-chips{margin-top:0;}
.gec-esco .gec-fig{margin-bottom:0;}
.gec-esco .gec-fig--after{margin-bottom:clamp(30px,3.4vw,46px);}
.gec-esco .gec-prose2 + .gec-fig,
.gec-esco .gec-lead + .gec-fig,
.gec-esco .gec-head + .gec-fig{margin-top:clamp(28px,3.2vw,42px);}
.gec-esco .gec-close{margin-top:clamp(26px,3vw,38px);}
.gec-esco .gec-ctas{margin-top:clamp(26px,3vw,36px);}

/* A heading alone beside a column of prose is a hole; centre it instead. */
.gec-esco .gec-band-grid{align-items:center;}

/* --- body text on the blue statement band, every page ---------------------
   Deliberately unscoped. The band set its body copy in #EAF2F6, which is
   3.74:1 against the brand blue — below the 4.5:1 minimum. Pure white is
   4.24:1 on the same ground: still short of the standard, but the best the
   brand blue allows, and free. The remaining shortfall is a property of
   #4082A5 itself and is the client's call, not ours to make silently. */
.gec-s--band .gec-lead,
.gec-s--band p,
.gec--ondark,
.gec--ondark p,
.gec--ondark .gec-lead,
.gec--ondark .gec-stand{color:#fff;}

/* Two buttons in the hero: the second is the secondary action. */
.gec-esco .gec-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.gec-esco .gec-ctas .gec-btn + .gec-btn{
  background:transparent;color:var(--gec-green);border-color:var(--gec-green);
}
.gec-esco .gec-ctas .gec-btn + .gec-btn:hover{background:var(--gec-green);color:#fff;}

/* ==========================================================================
   Homepage (2026-08-07)
   ========================================================================== */

/* --- hero slider -----------------------------------------------------------
   Client, 2026-08-07: "do hero as slides". Four of them — the recommended
   headline from his brief plus the three alternatives it offers.

   The scrim is a gradient, not a flat wash: white on these photographs is well
   under AA in their bright areas, and a flat overlay heavy enough to fix that
   kills the picture. The gradient is dense where the type sits and clears
   where it does not. This is the same fault that shipped a dark-green button
   on a dark photograph once already.

   Slides are stacked and cross-faded rather than translated, so the section
   never needs a fixed height and cannot jump when a slide's copy is longer. */
.gec-hero-slider{position:relative;padding:0;overflow:hidden;}
.gec-slides{display:grid;}
.gec-slide{
  grid-area:1/1;position:relative;
  display:flex;align-items:center;
  min-height:clamp(440px,58vh,620px);
  padding:clamp(56px,7vw,96px) var(--gec-gut) clamp(88px,9vw,120px);
  opacity:0;visibility:hidden;transition:opacity .5s ease;
}
.gec-slide.is-active{opacity:1;visibility:visible;}
.gec-slide__bg{position:absolute;inset:0;overflow:hidden;}
.gec-slide__bg img{width:100%;height:100%;object-fit:cover;display:block;}
.gec-slide__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#0B2530F2 0%,#0B2530D9 42%,#0B253066 72%,#0B253026 100%);
}
.gec-hero-slider--center .gec-slide__bg::after{
  background:linear-gradient(180deg,#0B253099 0%,#0B2530E6 100%);
}
.gec-slide .gec-w{position:relative;width:100%;}
.gec-slide__in{max-width:62ch;}
.gec-hero-slider--center .gec-slide__in{max-width:70ch;margin-inline:auto;text-align:center;}
.gec-hero-slider--center .gec-slide__in .gec-ctas{justify-content:center;}
.gec-slide h1,.gec-slide__h{
  font-family:'Montserrat',sans-serif;font-weight:600;color:#fff;
  font-size:clamp(29px,3.3vw,44px);line-height:1.15;letter-spacing:-.022em;
  margin:0 0 18px;text-wrap:balance;
}
.gec-slide .gec-kicker{color:#B9DCEA;}
.gec-slide .gec-lead{color:#E4EEF3;margin-bottom:30px;}
.gec-slide .gec-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0;}

/* The secondary button, on a photograph.
   .gec-nz .gec-btn--ghost paints it green on transparent, which is right on
   white and unreadable on a dark scrim — the contrast gate failed this build
   at 0.154 luminance on both the slider and the closing CTA, which is the
   exact fault that gate was written for after a dark-green button shipped on
   a dark photograph. The existing on-dark rule only covers .gec-hero-ov__in,
   so these two new containers need their own. (0,3,0) beats (0,2,0); HOME_CSS
   is appended last, so it also wins any tie. */
.gec-home .gec-slide__in .gec-btn--ghost,
.gec-home .gec-ctabg .gec-btn--ghost{
  background:transparent;color:#fff;border-color:#FFFFFF8C;
}
.gec-home .gec-slide__in .gec-btn--ghost:hover,
.gec-home .gec-slide__in .gec-btn--ghost:focus-visible,
.gec-home .gec-ctabg .gec-btn--ghost:hover,
.gec-home .gec-ctabg .gec-btn--ghost:focus-visible{
  background:#fff;color:var(--gec-green);border-color:#fff;
}

.gec-slider__nav{position:absolute;left:0;right:0;bottom:clamp(22px,3vw,34px);}
.gec-slider__nav .gec-w{display:flex;align-items:center;gap:14px;}
.gec-arrow{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  background:#FFFFFF1F;border:1px solid #FFFFFF4D;color:#fff;cursor:pointer;
  border-radius:50%;transition:background .18s ease;
}
.gec-arrow:hover{background:#FFFFFF33;}
.gec-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.gec-arrow--prev svg{transform:rotate(180deg);}
.gec-arrow svg{width:18px;height:18px;}
/* The dot you can see is 9px. The dot you can HIT is 24x44.
   Built the obvious way first and the mobile check measured the tap target at
   9x9 — a third of the 24x24 WCAG 2.2 minimum and unusable with a thumb. The
   visual mark moves to ::before so the button itself can carry a real target
   without the dots looking like buttons. */
.gec-dots{display:flex;gap:4px;margin-right:auto;}
.gec-dot{
  min-width:24px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;
}
.gec-dot::before{
  content:"";display:block;width:9px;height:9px;border-radius:50%;
  background:#FFFFFF59;transition:background .18s ease,width .18s ease;
}
.gec-dot.is-active::before{background:#fff;width:22px;border-radius:5px;}
.gec-dot:focus-visible{outline:2px solid #fff;outline-offset:-8px;}

@media (max-width:700px){
  .gec-slide{min-height:clamp(400px,72vh,560px);}
  .gec-slide .gec-ctas .gec-btn{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .gec-slide{transition:none;}
}

/* --- closing call to action on a photograph --------------------------------
   Client: "on final CTA we can have image as background with a nice overlay."
   Same reasoning as the slider scrim — the overlay is what makes white type
   legible here, not decoration. */
.gec-ctabg{position:relative;overflow:hidden;}
.gec-ctabg__bg{position:absolute;inset:0;overflow:hidden;}
.gec-ctabg__bg img{width:100%;height:100%;object-fit:cover;display:block;}
.gec-ctabg__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#0B2530D9 0%,#0B2530F2 100%);
}
.gec-ctabg .gec-w{position:relative;}
.gec-ctabg h2{color:#fff;}
.gec-ctabg .gec-ctas{display:flex;flex-wrap:wrap;gap:12px;}
.gec-ctabg .gec-center .gec-ctas{justify-content:center;}

/* --- prose beside a picture ------------------------------------------------
   Fourth page to take this component. The image is positioned absolutely so it
   contributes no height: left in flow it keeps its 4:5 ratio, drives the grid
   row, and leaves white space under the copy — the dead space the client has
   flagged twice. Out of flow the copy sets the height and the picture fills it.
   min-height is only a guard against a lazy figure collapsing to zero. */
.gec-home .gec-home-tsplit{align-items:stretch;}
.gec-home .gec-home-tsplit>div{min-width:0;}
.gec-home .gec-head + .gec-home-tsplit{margin-top:0;}
.gec-home .gec-home-tsplit{margin-top:clamp(24px,2.8vw,34px);}

@media (min-width:701px){
  .gec-home .gec-home-tsplit>.gec-fig{height:100%;min-height:240px;}
  .gec-home .gec-home-tsplit>.gec-fig img{
    position:absolute;inset:0;height:100%;width:100%;object-fit:cover;aspect-ratio:auto;
  }
}

/* --- picture cards ---------------------------------------------------------
   The six services each carry a photograph on the live page, so the card is
   built around one rather than having the picture bolted above it. New names:
   .gec-card is the Net Zero project card and redefining it would move an
   approved page.

   Equal height by grid, not by hope — "keep them symmetrical". Six divides by
   three and by two, so no row is ever short. */
.gec-pcards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.2vw,30px);margin-top:clamp(26px,3vw,38px);
}
.gec-pcard{
  display:flex;flex-direction:column;height:100%;
  border:1px solid var(--gec-line);background:var(--gec-card-bg,#fff);
  transition:border-color .18s ease,transform .18s ease;
}
.gec-pcard:hover{border-color:var(--gec-green);transform:translateY(-2px);}
.gec-pcard .gec-fig{margin:0;}
.gec-pcard__b{padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;gap:10px;}
.gec-pcard h3{margin:0;}
.gec-pcard p{font-size:14.5px;line-height:1.62;color:var(--gec-muted);margin:0;}

/* --- joins -----------------------------------------------------------------
   The shared components carry no outer margin on purpose, so every call site
   states its own. Composing them without doing that is how ~20 joins on the
   latitude page came out at exactly 0.0px. */
.gec-home .gec-lead + .gec-boxes,
.gec-home .gec-lead + .gec-rows,
.gec-home .gec-lead + .gec-c-defs{margin-top:clamp(26px,3vw,36px);}
.gec-home .gec-boxes + .gec-ctas,
.gec-home .gec-rows + .gec-ctas,
.gec-home .gec-c-defs + .gec-ctas,
.gec-home .gec-pcards + .gec-ctas{margin-top:clamp(28px,3.2vw,40px);}
.gec-home .gec-ctas{margin-top:clamp(24px,2.8vw,34px);}
.gec-home .gec-head + .gec-rows,
.gec-home .gec-head + .gec-pcards,
.gec-home .gec-head + .gec-c-defs{margin-top:clamp(24px,2.8vw,34px);}

/* --- centred treatments ---------------------------------------------------- */
.gec-home .gec-center{text-align:center;}
.gec-home .gec-center .gec-ctas{justify-content:center;display:flex;}
.gec-home .gec-center h2{margin-inline:auto;max-width:22ch;}
.gec-home .gec-center p{margin-inline:auto;max-width:62ch;}

/* --- responsive ------------------------------------------------------------ */
@media (max-width:1024px){
  .gec-pcards{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:700px){
  .gec-pcards{grid-template-columns:1fr;}
}

/* HVAC Size Reduction ------------------------------------------------------ */

/* The band image must not touch the block above it — "padding between images
   and the blocks around them". The shared .gec-fig--after only sets
   margin-bottom, so the benefit boxes sat flush against the picture. */
.gec-hvac .gec-fig--after{margin-top:clamp(30px,3.4vw,46px);}

/* The benefit and certification descriptions are short one-liners, so the
   default card padding and gap left a large empty band under the text. Tighten
   both so the cards fit their content. */
.gec-hvac .gec-box{padding:clamp(18px,1.8vw,22px) clamp(18px,1.8vw,24px);gap:10px;}

/* Life Cycle Cost Analysis ------------------------------------------------- */

/* The page's three graphics are infographics, not photographs: show them whole
   (object-fit:contain) centred on a light panel, never cropped. A top margin so
   a band graphic never touches the block before it. */
.gec-lcca .gec-info{background:var(--gec-wash,#F4F7F8);border:1px solid var(--gec-line);
  padding:clamp(20px,3vw,44px);display:flex;justify-content:center;align-items:center;}
.gec-lcca .gec-info img{width:100%;height:auto;max-width:560px;object-fit:contain;}
.gec-lcca .gec-info--after{margin-top:clamp(30px,3.4vw,46px);}
.gec-lcca .gec-info--after img{max-width:900px;}

/* Several cost factors are label-only, so tighten the cards and the icon-to-text
   gap the same way the HVAC pass did. */
.gec-lcca .gec-box{padding:clamp(18px,1.8vw,22px) clamp(18px,1.8vw,24px);gap:10px;}

/* ENERGY STAR Building Certifications --------------------------------------- */
/* Short one-line card descriptions, so tighten padding and the icon-to-text gap,
   matching the HVAC/LCCA spacing pass. */
.gec-estar .gec-box{padding:clamp(18px,1.8vw,22px) clamp(18px,1.8vw,24px);gap:10px;}

/* ENERGY STAR MFNC ---------------------------------------------------------- */
.gec-mfnc .gec-box{padding:clamp(18px,1.8vw,22px) clamp(18px,1.8vw,24px);gap:10px;}

/* Green Globes -------------------------------------------------------------- */
.gec-gg .gec-box{padding:clamp(18px,1.8vw,22px) clamp(18px,1.8vw,24px);gap:10px;}

/* HERS Rating Certification ------------------------------------------------- */
.gec-hers .gec-box{padding:clamp(18px,1.8vw,22px) clamp(18px,1.8vw,24px);gap:10px;}

/* ILFI Zero Energy ---------------------------------------------------------- */
.gec-ze .gec-box{padding:clamp(18px,1.8vw,22px) clamp(18px,1.8vw,24px);gap:10px;}

/* ILFI Living Building Challenge --------------------------------------------- */
.gec-lbc .gec-box{padding:clamp(18px,1.8vw,22px) clamp(18px,1.8vw,24px);gap:10px;}

/* LEED Certification -------------------------------------------------------- */
.gec-leed .gec-box{padding:clamp(18px,1.8vw,22px) clamp(18px,1.8vw,24px);gap:10px;}

/* Building Certifications index --------------------------------------------- */
.gec-idx .gec-directory{margin-top:6px;}

.gec-idx .gec-certrow{
  display:grid;grid-template-columns:190px 1fr;gap:clamp(24px,3.2vw,44px);
  align-items:start;padding:clamp(24px,3vw,34px) 0;border-top:1px solid var(--gec-line);
}
.gec-idx .gec-directory > .gec-certrow:last-child{border-bottom:1px solid var(--gec-line);}

.gec-idx .gec-certlogo{display:flex;align-items:center;justify-content:center;min-height:78px;}
.gec-idx .gec-certlogo-fig{margin:0;display:flex;align-items:center;justify-content:center;}
.gec-idx .gec-certlogo img{width:auto;max-width:100%;max-height:92px;object-fit:contain;}
.gec-idx .gec-certlogo__badge{
  width:72px;height:72px;flex:none;display:grid;place-items:center;
  background:var(--gec-green);color:#fff;
}
.gec-idx .gec-certlogo__badge svg{width:34px;height:34px;}

.gec-idx .gec-certbody h3{margin:0 0 10px;}
.gec-idx .gec-certbody p{margin:0 0 10px;}
.gec-idx .gec-certbody p:last-child{margin-bottom:0;}

.gec-idx .gec-learn{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;letter-spacing:.01em;
  color:var(--gec-green);text-decoration:none;
}
.gec-idx .gec-learn svg{width:15px;height:15px;}
.gec-idx .gec-learn:hover{color:var(--gec-blue);}

/* b — bordered cards on a wash band. */
.gec-idx .gec-directory--cards{display:flex;flex-direction:column;gap:16px;}
.gec-idx .gec-directory--cards .gec-certrow{
  border:1px solid var(--gec-line);padding:clamp(20px,2.4vw,28px);
  background:var(--gec-card-bg,#fff);align-items:center;
}
.gec-idx .gec-directory--cards > .gec-certrow:last-child{border-bottom:1px solid var(--gec-line);}

/* c — plain, no logos. */
.gec-idx .gec-directory--plain .gec-certplain{
  padding:clamp(20px,2.6vw,30px) 0;border-top:1px solid var(--gec-line);
}
.gec-idx .gec-directory--plain .gec-certplain:last-child{border-bottom:1px solid var(--gec-line);}
.gec-idx .gec-directory--plain h3{margin:0 0 10px;}

@media (max-width:700px){
  .gec-idx .gec-certrow{grid-template-columns:1fr;gap:16px;align-items:start;}
  .gec-idx .gec-certlogo{justify-content:flex-start;min-height:0;}
  .gec-idx .gec-certlogo img{max-height:70px;}
}

/* Projects index ----------------------------------------------------------- */

/* Two label/description points inside a sector. The bold label is the point's
   name, the rest its description — one paragraph, never a magazine column. */
.gec-projects .gec-point{margin:0 0 12px;}
.gec-projects .gec-point:last-of-type{margin-bottom:0;}
.gec-projects .gec-point strong{color:var(--gec-ink,#222);}

/* "learn more" — a text link with an arrow, not a pill. The pill is reserved
   for the primary CTA; a secondary in-page link should read quieter. */
.gec-projects .gec-plink-w{margin:16px 0 0;}
.gec-projects .gec-plink{display:inline-flex;align-items:center;gap:7px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.01em;color:var(--gec-accent,#287A6B);text-decoration:none;}
.gec-projects .gec-plink:hover{text-decoration:underline;}
.gec-projects .gec-plink svg{width:16px;height:16px;transition:transform .2s;}
.gec-projects .gec-plink:hover svg{transform:translateX(3px);}

/* a — alternating image/text rows, one per sector. Space between the sectors
   and padding after each image, per his standing rules. */
.gec-projects .gec-sectors-a .gec-sector + .gec-sector{margin-top:clamp(34px,4vw,56px);}

/* b — a symmetrical 2x2 grid of sector cards, photo on top of each. Cards are
   equal height so the pairs line up. */
.gec-projects .gec-pcards{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2vw,26px);}
.gec-projects .gec-pcard{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--gec-line,#7A7A7A40);overflow:hidden;}
.gec-projects .gec-pcard__fig{margin:0;}
.gec-projects .gec-pcard__fig img{display:block;width:100%;height:230px;
  object-fit:cover;}
.gec-projects .gec-pcard__b{display:flex;flex-direction:column;flex:1;
  padding:clamp(20px,2vw,26px);}
.gec-projects .gec-pcard__b h2{font-size:clamp(19px,1.7vw,21px);margin:0 0 12px;}
.gec-projects .gec-pcard__b .gec-plink-w{margin-top:auto;padding-top:14px;}

@media (max-width:760px){
  .gec-projects .gec-pcards{grid-template-columns:1fr;}
  .gec-projects .gec-pcard__fig img{height:210px;}
}

/* Commercial Projects ------------------------------------------------------ */

/* Service tiles: icon + label, no description. Centre the label against the
   icon and tighten the box, since there is no paragraph to fill it out. */
.gec-commercial .gec-svc .gec-box{align-items:flex-start;gap:12px;
  padding:clamp(18px,1.8vw,22px) clamp(18px,1.8vw,24px);}
.gec-commercial .gec-svc .gec-box h3{margin:0;font-size:clamp(16px,1.4vw,17px);
  align-self:center;}

/* Project examples — a symmetrical 2x2 card grid. */
.gec-commercial .gec-projs{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,1.8vw,22px);margin-top:clamp(22px,2.4vw,30px);}
.gec-commercial .gec-proj{background:#fff;border:1px solid var(--gec-line,#7A7A7A40);
  padding:clamp(20px,2vw,26px);}
.gec-commercial .gec-proj__i{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;background:var(--gec-accent,#287A6B);color:#fff;margin-bottom:14px;}
.gec-commercial .gec-proj__i svg{width:22px;height:22px;}
.gec-commercial .gec-proj h3{margin:0 0 10px;font-size:clamp(17px,1.5vw,19px);}
.gec-commercial .gec-proj__d{margin:0 0 6px;color:var(--gec-ink-2,#5A6470);font-size:14.5px;}
.gec-commercial .gec-proj__d:last-child{margin-bottom:0;}

/* Project examples — the row treatment (variant B), icon at the left. */
.gec-commercial .gec-projrows{display:grid;gap:clamp(12px,1.4vw,16px);
  margin-top:clamp(22px,2.4vw,30px);}
.gec-commercial .gec-projrow{display:flex;gap:16px;background:#fff;
  border:1px solid var(--gec-line,#7A7A7A40);padding:clamp(16px,1.6vw,20px);}
.gec-commercial .gec-projrow__i{flex:none;display:inline-flex;align-items:center;
  justify-content:center;width:40px;height:40px;background:var(--gec-accent,#287A6B);color:#fff;}
.gec-commercial .gec-projrow__i svg{width:20px;height:20px;}
.gec-commercial .gec-projrow h3{margin:0 0 8px;font-size:clamp(16px,1.4vw,18px);}
.gec-commercial .gec-projrow__d,
.gec-commercial .gec-projrow p{margin:0 0 5px;color:var(--gec-ink-2,#5A6470);font-size:14.5px;}
.gec-commercial .gec-projrow p:last-child{margin-bottom:0;}

@media (max-width:760px){
  .gec-commercial .gec-projs{grid-template-columns:1fr;}
}

/* Government Projects ------------------------------------------------------ */

/* Project examples — a symmetrical card grid (eight on a two-column track). */
.gec-government .gec-projs{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,1.8vw,22px);margin-top:clamp(22px,2.4vw,30px);}
.gec-government .gec-proj{background:#fff;border:1px solid var(--gec-line,#7A7A7A40);
  padding:clamp(20px,2vw,26px);}
.gec-government .gec-proj__i{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;background:var(--gec-accent,#287A6B);color:#fff;margin-bottom:14px;}
.gec-government .gec-proj__i svg{width:22px;height:22px;}
.gec-government .gec-proj h3{margin:0 0 10px;font-size:clamp(16px,1.4vw,18px);}
.gec-government .gec-proj__d{margin:0 0 6px;color:var(--gec-ink-2,#5A6470);font-size:14.5px;}
.gec-government .gec-proj__d:last-child{margin-bottom:0;}

/* Project examples — the row treatment (variant B), icon at the left. */
.gec-government .gec-projrows{display:grid;gap:clamp(12px,1.4vw,16px);
  margin-top:clamp(22px,2.4vw,30px);}
.gec-government .gec-projrow{display:flex;gap:16px;background:#fff;
  border:1px solid var(--gec-line,#7A7A7A40);padding:clamp(16px,1.6vw,20px);}
.gec-government .gec-projrow__i{flex:none;display:inline-flex;align-items:center;
  justify-content:center;width:40px;height:40px;background:var(--gec-accent,#287A6B);color:#fff;}
.gec-government .gec-projrow__i svg{width:20px;height:20px;}
.gec-government .gec-projrow h3{margin:0 0 8px;font-size:clamp(16px,1.4vw,18px);}
.gec-government .gec-projrow__d,
.gec-government .gec-projrow p{margin:0 0 5px;color:var(--gec-ink-2,#5A6470);font-size:14.5px;}
.gec-government .gec-projrow p:last-child{margin-bottom:0;}

/* The closing line after a list should breathe from the boxes above it. */
.gec-government .gec-projs + .gec-close,
.gec-government .gec-projrows + .gec-close{margin-top:clamp(20px,2.2vw,28px);}

@media (max-width:760px){
  .gec-government .gec-projs{grid-template-columns:1fr;}
}

/* Hospital Projects -------------------------------------------------------- */

/* The single "Our Goal" statement: icon + heading + line, as a callout. */
.gec-hospital .gec-goal{display:flex;gap:16px;align-items:flex-start;
  margin-top:clamp(14px,1.6vw,20px);}
.gec-hospital .gec-goal__i{flex:none;display:inline-flex;align-items:center;
  justify-content:center;width:46px;height:46px;background:var(--gec-accent,#287A6B);color:#fff;}
.gec-hospital .gec-goal__i svg{width:23px;height:23px;}
.gec-hospital .gec-goal h3{margin:0 0 6px;font-size:clamp(17px,1.5vw,19px);}
.gec-hospital .gec-goal p{margin:0;color:var(--gec-ink-2,#5A6470);}
.gec-hospital .gec-goal-c{max-width:760px;margin-inline:auto;}
.gec-hospital .gec-goal-c .gec-goal{justify-content:center;text-align:left;}

/* Featured project card — one project, title + size meta + description. */
.gec-hospital .gec-feat{background:#fff;border:1px solid var(--gec-line,#7A7A7A40);
  border-left:3px solid var(--gec-accent,#287A6B);
  padding:clamp(22px,2.2vw,30px);margin-top:clamp(18px,2vw,26px);}
.gec-hospital .gec-feat__h{display:flex;gap:16px;align-items:center;margin-bottom:14px;}
.gec-hospital .gec-feat__i{flex:none;display:inline-flex;align-items:center;
  justify-content:center;width:46px;height:46px;background:var(--gec-accent,#287A6B);color:#fff;}
.gec-hospital .gec-feat__i svg{width:23px;height:23px;}
.gec-hospital .gec-feat h3{margin:0;font-size:clamp(18px,1.6vw,21px);}
.gec-hospital .gec-feat__m{margin:2px 0 0;font-family:'Montserrat',sans-serif;
  font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--gec-accent,#287A6B);}
.gec-hospital .gec-feat > p{margin:0;color:var(--gec-ink-2,#5A6470);}

/* Padding after the banded image, before the checklist / closing line. */
.gec-hospital .gec-fig--after{margin-top:clamp(30px,3.4vw,46px);}

/* About -------------------------------------------------------------------- */

/* "view completed work" — a text link with an arrow, not a pill (the pill is
   reserved for the primary CTA). */
.gec-about .gec-plink-w{margin:18px 0 0;}
.gec-about .gec-plink{display:inline-flex;align-items:center;gap:7px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.01em;color:var(--gec-accent,#287A6B);text-decoration:none;}
.gec-about .gec-plink:hover{text-decoration:underline;}
.gec-about .gec-plink svg{width:16px;height:16px;transition:transform .2s;}
.gec-about .gec-plink:hover svg{transform:translateX(3px);}

/* Hero — the centred wash treatment keeps a comfortable measure. */
.gec-about .gec-about-hero{max-width:820px;margin-inline:auto;}

/* The LinkedIn glyph inside the "LET'S CONNECT" button. */
.gec-about .gec-btn svg{width:18px;height:18px;}

/* "Our approach" prose runs in ONE top-to-bottom column — never magazine
   columns (his standing rule). Constrain the measure for readability. */
.gec-about .gec-onecol{max-width:820px;}
.gec-about .gec-onecol p{margin:0 0 16px;}
.gec-about .gec-onecol p:last-child{margin-bottom:0;}

/* Values grid — space it from the paragraphs above. */
.gec-about .gec-vals{margin-top:clamp(24px,2.6vw,34px);}

/* Closing standards statement. */
.gec-about .gec-standards{max-width:760px;margin-inline:auto;}
.gec-about .gec-standards .gec-stand{margin:0;}

/* FAQ page ----------------------------------------------------------------- */

.gec-faq .gec-faq-hero{max-width:820px;margin-inline:auto;}

/* B — separated cards on a wash band. */
.gec-faq--cards{display:grid;gap:12px;}
.gec-faq--cards details{background:#fff;border:1px solid var(--gec-line,#7A7A7A40);
  border-left:3px solid var(--gec-accent,#287A6B);padding:4px 20px;}
.gec-faq--cards summary{padding:14px 0;}
.gec-faq--cards .gec-faq__a{padding-bottom:16px;}

/* C — minimal, thin rules only. */
.gec-faq--min details{border-bottom:1px solid var(--gec-line,#7A7A7A40);}
.gec-faq--min summary{padding:16px 0;}
.gec-faq--min .gec-faq__a{padding-bottom:18px;}

/* The eighteen-item service list inside an answer keeps two columns (a bullet
   list may, unlike prose). Give it room under the lead line. */
.gec-faq .gec-faq__a .gec-c-list{margin-top:12px;}

/* Portfolio ---------------------------------------------------------------- */

.gec-portfolio .gec-pf-hero{max-width:820px;margin-inline:auto;}

/* Project images — big. A photo fills the frame (cover); a logo stays contained
   so it is shown whole, never cropped. Uniform height so the cards line up. */
.gec-portfolio .gec-pf__info{margin:0 0 18px;}
.gec-portfolio .gec-pf__info img{display:block;width:100%;height:260px;
  border:1px solid var(--gec-line,#7A7A7A40);}
.gec-portfolio .gec-pf__info--photo img{object-fit:cover;}
.gec-portfolio .gec-pf__info--logo img{object-fit:contain;background:#f4f6f7;padding:16px;}

/* Project cards — three across, stretched to full width. Collapses to two, then
   one, as the viewport narrows (mobile included). */
.gec-portfolio .gec-pfgrid{display:grid;gap:clamp(16px,1.8vw,22px);
  margin-top:clamp(22px,2.4vw,30px);}
.gec-portfolio .gec-pfgrid--3{grid-template-columns:repeat(3,1fr);}
.gec-portfolio .gec-pfgrid--2{grid-template-columns:repeat(2,1fr);}
.gec-portfolio .gec-pf{display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--gec-line,#7A7A7A40);
  border-top:3px solid var(--gec-accent,#287A6B);padding:clamp(20px,2vw,26px);}
.gec-portfolio .gec-pf h3{margin:0 0 4px;font-size:clamp(16px,1.4vw,18px);}
.gec-portfolio .gec-pf__loc{margin:0 0 14px;font-family:'Montserrat',sans-serif;
  font-weight:600;font-size:12.5px;letter-spacing:.04em;color:var(--gec-ink-2,#5A6470);}
.gec-portfolio .gec-pf .gec-spec{margin:0;}

/* Inside a card the shared label|value 2-column spec squeezes the value onto
   three or four lines. Stack each row instead — label (with tick) on one line,
   value on the next at full card width — and put one continuous hairline under
   each pair. Never squeezed, on desktop or mobile. */
.gec-portfolio .gec-spec{display:block;margin-top:6px;}
.gec-portfolio .gec-spec dt{border-bottom:0;padding:12px 0 2px;}
.gec-portfolio .gec-spec dd{margin:0;padding:0 0 12px;
  border-bottom:1px solid var(--gec-hair,#e5e8ea);}
.gec-portfolio .gec-spec dd:last-of-type{border-bottom:0;padding-bottom:0;}

/* Sand is retired — the spec tick is a green ground with a white glyph, per the
   standing rule. Scoped to portfolio so the approved pages are untouched. */
.gec-portfolio .gec-spec__m{background:var(--gec-green,#27B42A);color:#fff;}

/* Project spec rows (variant B). */
.gec-portfolio .gec-pfrows{display:grid;gap:clamp(14px,1.6vw,18px);
  margin-top:clamp(22px,2.4vw,30px);}
.gec-portfolio .gec-pfrow{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(16px,2vw,28px);
  align-items:start;background:#fff;border:1px solid var(--gec-line,#7A7A7A40);
  padding:clamp(18px,1.8vw,24px);}
.gec-portfolio .gec-pfrow__h h3{margin:0 0 4px;font-size:clamp(17px,1.5vw,19px);}
.gec-portfolio .gec-pfrow .gec-pf__loc{margin:0;}
.gec-portfolio .gec-pfrow .gec-spec{margin:0;}

/* Project credits — a symmetrical 3x3 grid. */
.gec-portfolio .gec-credits{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,18px);margin-top:clamp(20px,2.2vw,28px);}
.gec-portfolio .gec-credit{background:#fff;border:1px solid var(--gec-line,#7A7A7A40);
  border-left:3px solid var(--gec-accent,#287A6B);padding:14px 16px;}
.gec-portfolio .gec-credit strong{display:block;font-size:14.5px;}
.gec-portfolio .gec-credit span{color:var(--gec-ink-2,#5A6470);font-size:13.5px;}

@media (max-width:860px){
  .gec-portfolio .gec-pfgrid--3{grid-template-columns:repeat(2,1fr);}
  .gec-portfolio .gec-credits{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .gec-portfolio .gec-pfgrid--3,.gec-portfolio .gec-pfgrid--2,
  .gec-portfolio .gec-credits{grid-template-columns:1fr;}
  .gec-portfolio .gec-pfrow{grid-template-columns:1fr;}
}

/* Press -------------------------------------------------------------------- */

/* "Read the Full Article" — a text link with an arrow, not a pill. */
.gec-press .gec-plink-w{margin:14px 0 0;}
.gec-press .gec-plink{display:inline-flex;align-items:center;gap:7px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;
  color:var(--gec-accent,#287A6B);text-decoration:none;}
.gec-press .gec-plink:hover{text-decoration:underline;}
.gec-press .gec-plink svg{width:16px;height:16px;transition:transform .2s;}
.gec-press .gec-plink:hover svg{transform:translateX(3px);}

/* Year badge. */
.gec-press .gec-press__y{display:inline-block;font-family:'Montserrat',sans-serif;
  font-weight:600;font-size:12px;letter-spacing:.08em;color:var(--gec-accent,#287A6B);
  margin-bottom:8px;}

/* A — cards, image on top, matching the portfolio cards (accent top rule). The
   press images are tall article scans, so anchor them to the top: the masthead
   and headline show at a uniform card height instead of a cropped middle. */
.gec-press .gec-presses{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2vw,26px);}
.gec-press .gec-press{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--gec-line,#7A7A7A40);border-top:3px solid var(--gec-accent,#287A6B);
  overflow:hidden;}
.gec-press .gec-press__fig{margin:0;}
/* Layout A — show the whole article thumbnail (natural height), on a light
   ground, with a hairline separating it from the text below. */
.gec-press .gec-press__fig img{display:block;width:100%;height:auto;
  background:#f4f6f7;border-bottom:1px solid var(--gec-line,#7A7A7A40);}
.gec-press .gec-press__b{padding:clamp(20px,2vw,26px);}
.gec-press .gec-press__b h3{margin:0;font-size:clamp(18px,1.6vw,21px);}

/* B — rows, photo beside the text. */
.gec-press .gec-pressrows{display:grid;gap:clamp(16px,1.8vw,22px);}
.gec-press .gec-pressrow{display:grid;grid-template-columns:minmax(0,320px) 1fr;
  gap:clamp(18px,2.4vw,32px);align-items:center;background:#fff;
  border:1px solid var(--gec-line,#7A7A7A40);padding:clamp(16px,1.6vw,20px);}
.gec-press .gec-pressrow__fig{margin:0;}
.gec-press .gec-pressrow__fig img{display:block;width:100%;height:100%;
  max-height:240px;object-fit:cover;}
.gec-press .gec-pressrow h3{margin:0;font-size:clamp(18px,1.6vw,22px);}

/* C — plain. */
.gec-press .gec-press-plain h3{margin:0;}

@media (max-width:760px){
  .gec-press .gec-presses{grid-template-columns:1fr;}
  .gec-press .gec-pressrow{grid-template-columns:1fr;}
}