/* ==========================================================================
   Qualis Energy — design system
   Palette sampled directly from the Qualis Energy logo mark.
   ========================================================================== */

:root{
  /* --- the six logo colours --- */
  --c-lime:   #88C53F;
  --c-green:  #37B54A;
  --c-blue:   #0F74BC;
  --c-sky:    #24A9E2;
  --c-orange: #F4941C;
  --c-pink:   #EC2077;

  /* --- primary --- */
  --brand:      var(--c-blue);
  --brand-dark: #0B5A93;
  --brand-pale: #E7F1F9;

  /* --- surfaces --- */
  --paper:     #FFFFFF;
  --paper-2:   #F4F7F9;
  --paper-3:   #E9EEF2;
  --ink:       #111315;
  --ink-2:     #1B2024;
  --ink-soft:  #4E585E;
  --ink-faint: #838D94;
  --line:      #E1E7EB;
  --line-soft: rgba(17,19,21,.08);

  /* --- brand accents, sampled from each brand's own logo --- */
  --arctic:     #5292B9;   /* ArcticNord  — snowflake steel blue */
  --ember:      #E06C2D;   /* EmberNord   — flame orange        */
  --aura:       #12A093;   /* AuraNord    — teal                */
  --zenith:     #ECB53E;   /* ZenithNord  — sun yellow          */
  --solar:      #05214D;   /* SOLARFIELD  — navy, from the logo */
  --nordgroup:  #12A093;   /* Nord Group  — ring teal           */

  /* the six logo colours as one gradient, for rules and edges */
  --spectrum: linear-gradient(90deg,
    var(--c-sky)    0%,   var(--c-sky)    16.66%,
    var(--c-blue)   16.66%, var(--c-blue)   33.33%,
    var(--c-green)  33.33%, var(--c-green)  50%,
    var(--c-lime)   50%,    var(--c-lime)   66.66%,
    var(--c-orange) 66.66%, var(--c-orange) 83.33%,
    var(--c-pink)   83.33%, var(--c-pink)   100%);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --shadow:    0 1px 2px rgba(17,19,21,.04), 0 8px 24px rgba(17,19,21,.06);
  --shadow-lg: 0 2px 4px rgba(17,19,21,.05), 0 22px 56px rgba(17,19,21,.11);
  --wrap: 1220px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

h1,h2,h3{
  font-family:'Outfit','Inter',sans-serif; font-weight:600;
  line-height:1.1; letter-spacing:-.025em; margin:0 0 .5em;
}
h1{font-size:clamp(2.4rem,5.4vw,4rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
h3{font-size:clamp(1.2rem,1.9vw,1.5rem)}
h4{font-family:'Outfit','Inter',sans-serif; font-size:1.05rem; font-weight:600; letter-spacing:-.01em; margin:0 0 .5em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

/* ---------- layout ---------- */
.wrap{width:min(var(--wrap),calc(100% - 48px)); margin-inline:auto}
.section{padding:clamp(60px,8vw,110px) 0}
.section--tight{padding:clamp(44px,6vw,74px) 0}
.section--paper2{background:var(--paper-2)}
.section--ink{background:var(--ink); color:#F4F7F9; position:relative}
.section--ink::before{content:''; position:absolute; inset:0 0 auto; height:4px; background:var(--spectrum)}
.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.lede{font-size:clamp(1.08rem,1.5vw,1.24rem); color:var(--ink-soft); max-width:64ch; line-height:1.62}
.measure{max-width:66ch}

/* ---------- spectrum rule (the six logo colours) ---------- */
.spectrum{display:flex; height:4px; width:100%}
.spectrum i{flex:1}
.spectrum i:nth-child(1){background:var(--c-sky)}
.spectrum i:nth-child(2){background:var(--c-blue)}
.spectrum i:nth-child(3){background:var(--c-green)}
.spectrum i:nth-child(4){background:var(--c-lime)}
.spectrum i:nth-child(5){background:var(--c-orange)}
.spectrum i:nth-child(6){background:var(--c-pink)}
.spectrum--short{width:120px; height:5px; border-radius:3px; overflow:hidden}

/* ---------- eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand); margin:0 0 16px;
}
.eyebrow::before{content:''; width:20px; height:2px; background:currentColor; border-radius:2px}
.section--ink .eyebrow{color:var(--c-sky)}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.hdr-in{display:flex; align-items:center; justify-content:space-between; gap:24px; height:78px}
.brandmark{display:block; flex-shrink:0}
.brandmark img{height:48px; width:auto}
.nav{display:flex; align-items:center; gap:32px}
.nav a{text-decoration:none; font-size:.93rem; font-weight:500; color:var(--ink-soft); padding:6px 0; position:relative; transition:color .18s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--brand)}
.nav .btn[aria-current="page"]::after{display:none}
.nav-tog{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:var(--r-sm); background:transparent; cursor:pointer; align-items:center; justify-content:center; padding:0}
.nav-tog span{display:block; width:18px; height:1.5px; background:var(--ink); position:relative}
.nav-tog span::before,.nav-tog span::after{content:''; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink)}
.nav-tog span::before{top:-6px} .nav-tog span::after{top:6px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:999px; text-decoration:none;
  font-size:.95rem; font-weight:600; border:1px solid transparent; cursor:pointer;
  transition:transform .16s, box-shadow .16s, background .16s, color .16s, border-color .16s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 6px 18px rgba(15,116,188,.24)}
.btn-primary:hover{background:var(--brand-dark); box-shadow:0 10px 26px rgba(15,116,188,.30)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{background:#fff; color:var(--ink)}
.btn-sm{padding:10px 20px; font-size:.88rem}
.btn .arw{transition:transform .16s}
.btn:hover .arw{transform:translateX(3px)}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(56px,8vw,104px) 0 clamp(52px,7vw,88px);
  background:
    radial-gradient(760px 460px at 84% -14%, rgba(36,169,226,.13), transparent 62%),
    radial-gradient(620px 420px at 6% 4%,  rgba(136,197,63,.11), transparent 60%),
    radial-gradient(560px 420px at 52% 6%, rgba(236,32,119,.055), transparent 62%),
    var(--paper);
}
.hero h1{max-width:16ch}
.hero .lede{margin-top:20px}
.hero-cta{display:flex; flex-wrap:wrap; gap:13px; margin-top:30px}
.hero-note{margin-top:22px; font-size:.86rem; color:var(--ink-faint)}

/* ---------- Nord Group family panel ---------- */
.family{
  margin-top:clamp(40px,5vw,62px);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:calc(var(--r-lg) + 8px);
  padding:clamp(26px,3.4vw,40px);
  position:relative; overflow:hidden;
}
.family::before{content:''; position:absolute; inset:0 0 auto; height:5px; background:linear-gradient(90deg,var(--arctic) 0%,var(--arctic) 25%,var(--ember) 25%,var(--ember) 50%,var(--aura) 50%,var(--aura) 75%,var(--zenith) 75%)}
.family-head{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,3.5vw,52px);
  align-items:center; margin-bottom:clamp(24px,3vw,34px);
}
.family-head .flogo{min-height:100px; display:flex; align-items:center}
.family-head .flogo img{max-height:100px; width:auto; object-fit:contain}
.family-head .flogo .bfb{
  display:none; font-family:'Outfit',sans-serif; font-size:2.4rem; font-weight:600; letter-spacing:-.025em;
}
.family-head .flogo.nologo img{display:none}
.family-head .flogo.nologo .bfb{display:block}
.family-head p{font-size:.97rem; color:var(--ink-soft); margin:0; max-width:62ch}

/* ---------- brand cards ---------- */
.brands{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.family .brands{margin-top:0}
.bcard{
  --accent:var(--brand);
  position:relative; display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 22px 22px; text-decoration:none; overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.bcard::before{content:''; position:absolute; inset:0 0 auto; height:4px; background:var(--accent)}
.bcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent}
.bfam{
  font-size:.64rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 12px;
}
/* Brand name block — shows the brand's own logo when the file is present,
   and falls back to the name set in Outfit when it isn't. The onerror
   handler on each <img> adds .nologo to this element. */
.bcard .bname{
  font-family:'Outfit',sans-serif; font-size:1.35rem; font-weight:600;
  letter-spacing:-.025em; margin:0 0 16px; color:var(--ink);
  min-height:74px; display:flex; align-items:center;
}
.bname img{max-height:74px; max-width:100%; width:auto; object-fit:contain; object-position:left center}
.bname .bfb{display:none; line-height:1.1}
.bname.nologo img{display:none}
.bname.nologo .bfb{display:block}
.bcard .btag{font-size:.72rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--accent); margin:0 0 14px}
.bcard p{font-size:.93rem; color:var(--ink-soft); margin:0 0 20px}
.bcard .blink{margin-top:auto; display:inline-flex; align-items:center; gap:7px; font-size:.87rem; font-weight:600; color:var(--ink)}
.bcard .blink .arw{transition:transform .18s}
.bcard:hover .blink .arw{transform:translateX(4px)}
.bcard--arctic{--accent:var(--arctic)}
.bcard--ember {--accent:var(--ember)}
.bcard--zenith{--accent:var(--zenith)}
.bcard--aura  {--accent:var(--aura)}
.bcard--solar {--accent:var(--solar)}

/* SOLARFIELD — its own full-width card, outside the Nord Group panel.
   The logo is a white reverse lockup, so the card carries its native navy. */
.bcard--wide{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:clamp(24px,3.5vw,48px);
  padding:clamp(28px,3.2vw,38px) clamp(26px,3.2vw,38px);
  margin-top:18px;
}
/* SOLARFIELD's lockup is a wordmark with no icon, so it runs about 4.9:1 where
   the Nord lockups run 2.9:1. Matched on width rather than height, otherwise it
   dwarfs them. */
.bcard--wide .bname{min-height:52px; margin:0}
.bcard--wide .bname img{max-height:52px}
.bcard--wide .bname .bfb{font-size:1.9rem}
.bcard--wide p{margin:0}
.bcard--wide .blink{margin-top:0; white-space:nowrap}
.bcard--wide .bwrap{min-width:0}

.bcard--solar{
  background:var(--solar); border-color:var(--solar);
}
.bcard--solar::before{background:rgba(255,255,255,.28)}
.bcard--solar .bname,
.bcard--solar .bname .bfb,
.bcard--solar .blink{color:#fff}
.bcard--solar .btag{color:#9FC4E8}
.bcard--solar p{color:rgba(255,255,255,.78)}
.bcard--solar:hover{box-shadow:0 2px 4px rgba(5,33,77,.2), 0 24px 60px rgba(5,33,77,.32)}

/* ---------- generic grids ---------- */
.grid{display:grid; gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

/* ---------- feature block ---------- */
.feature{display:grid; grid-template-columns:1.12fr .88fr; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--paper)}
.feature-body{padding:clamp(32px,4.4vw,54px)}
.feature-aside{background:linear-gradient(158deg,var(--ink) 0%,#1D2A22 100%); color:#F4F7F9; padding:clamp(32px,4.4vw,54px); display:flex; flex-direction:column; justify-content:center}
.feature-aside ul{list-style:none; margin:0; padding:0}
.feature-aside li{padding:12px 0; border-bottom:1px solid rgba(244,247,249,.13); font-size:.93rem; display:flex; gap:11px; align-items:flex-start}
.feature-aside li:last-child{border-bottom:0}
.feature-aside li::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--solar); flex-shrink:0; margin-top:8px}

/* ---------- steps ---------- */
.steps{counter-reset:s; display:grid; gap:2px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.step{background:var(--paper); padding:30px clamp(22px,3vw,38px); display:grid; grid-template-columns:62px 1fr; gap:22px; align-items:start}
.step .sn{counter-increment:s; font-family:'Outfit',sans-serif; font-weight:600; font-size:1.6rem; color:var(--s-c,var(--brand)); line-height:1; padding-top:5px}
.steps .step:nth-child(6n+1){--s-c:var(--c-sky)}
.steps .step:nth-child(6n+2){--s-c:var(--c-blue)}
.steps .step:nth-child(6n+3){--s-c:var(--c-green)}
.steps .step:nth-child(6n+4){--s-c:var(--c-lime)}
.steps .step:nth-child(6n+5){--s-c:var(--c-orange)}
.steps .step:nth-child(6n+6){--s-c:var(--c-pink)}
.steps .step{position:relative}
.steps .step::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--s-c,var(--brand)); opacity:.85}
.step .sn::before{content:'0' counter(s)}
.step h3{margin-bottom:.35em}
.step p{color:var(--ink-soft); font-size:.97rem; margin:0 0 .8em}
.step p:last-child{margin-bottom:0}

/* ---------- cards / accreditation tiles ----------
   Each card picks up one of the six logo colours, cycling across the grid, so
   the inner pages carry the same colour signature as the homepage. */
.acc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.acc{
  --acc-c:var(--brand);
  position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:26px 24px; display:flex; flex-direction:column;
  overflow:hidden; transition:box-shadow .2s, transform .2s;
}
.acc::before{content:''; position:absolute; inset:0 0 auto; height:3px; background:var(--acc-c)}
.acc:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.acc .badge{
  width:42px; height:42px; border-radius:11px; background:var(--acc-c); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  font-family:'Outfit',sans-serif; font-size:1rem; font-weight:600;
  box-shadow:0 4px 10px rgba(17,19,21,.13);
}
.acc h4{margin:0 0 7px}
.acc p{font-size:.91rem; color:var(--ink-soft); margin:0}
.acc .ref{margin-top:14px; padding-top:13px; border-top:1px solid var(--line); font-size:.79rem; color:var(--ink-faint)}
.section--paper2 .acc{background:#fff}

/* colour cycle across any grid of cards */
.acc-grid > .acc:nth-child(6n+1),.grid > .acc:nth-child(6n+1){--acc-c:var(--c-sky)}
.acc-grid > .acc:nth-child(6n+2),.grid > .acc:nth-child(6n+2){--acc-c:var(--c-blue)}
.acc-grid > .acc:nth-child(6n+3),.grid > .acc:nth-child(6n+3){--acc-c:var(--c-green)}
.acc-grid > .acc:nth-child(6n+4),.grid > .acc:nth-child(6n+4){--acc-c:var(--c-lime)}
.acc-grid > .acc:nth-child(6n+5),.grid > .acc:nth-child(6n+5){--acc-c:var(--c-orange)}
.acc-grid > .acc:nth-child(6n+6),.grid > .acc:nth-child(6n+6){--acc-c:var(--c-pink)}
/* stacked cards outside a grid (contact page column) */
.acc + .acc{--acc-c:var(--c-green)}
.acc + .acc + .acc{--acc-c:var(--c-orange)}
.acc + .acc + .acc + .acc{--acc-c:var(--c-pink)}

/* ---------- approved partners: no boxes, no dots, just the names ---------- */
.approvals{margin-top:8px}
.approvals + .approvals{margin-top:clamp(34px,4.5vw,52px)}
.approvals-label{
  display:flex; align-items:center; gap:14px;
  font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 22px;
}
.approvals-label::before{
  content:''; width:76px; height:4px; border-radius:2px; flex:none; background:var(--spectrum);
}
.wordwall{display:flex; flex-wrap:wrap; gap:6px clamp(26px,3.4vw,46px); margin:0}
.wordwall span{
  font-family:'Outfit',sans-serif; font-weight:600;
  font-size:clamp(1.4rem,3vw,2.1rem); letter-spacing:-.03em; line-height:1.35;
  color:var(--ink); padding-bottom:5px;
  border-bottom:3px solid var(--w-c,var(--line));
  transition:color .2s ease, border-color .2s ease;
}
.wordwall span:hover{color:var(--w-c,var(--brand))}
.wordwall span:nth-child(6n+1){--w-c:var(--c-sky)}
.wordwall span:nth-child(6n+2){--w-c:var(--c-blue)}
.wordwall span:nth-child(6n+3){--w-c:var(--c-green)}
.wordwall span:nth-child(6n+4){--w-c:var(--c-lime)}
.wordwall span:nth-child(6n+5){--w-c:var(--c-orange)}
.wordwall span:nth-child(6n+6){--w-c:var(--c-pink)}

/* ---------- chips ---------- */
.strip{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 18px;
  border:1px solid var(--line); border-left:3px solid var(--chip-c,var(--brand));
  border-radius:999px; font-size:.86rem; font-weight:600;
  color:var(--ink-2); background:var(--paper);
}
.strip .chip:nth-child(6n+1){--chip-c:var(--c-sky)}
.strip .chip:nth-child(6n+2){--chip-c:var(--c-blue)}
.strip .chip:nth-child(6n+3){--chip-c:var(--c-green)}
.strip .chip:nth-child(6n+4){--chip-c:var(--c-lime)}
.strip .chip:nth-child(6n+5){--chip-c:var(--c-orange)}
.strip .chip:nth-child(6n+6){--chip-c:var(--c-pink)}
.section--ink .chip{border-color:rgba(244,247,249,.22); border-left-color:var(--chip-c,var(--c-sky)); color:#F4F7F9; background:rgba(244,247,249,.04)}

/* ---------- callout ---------- */
.callout{border-left:4px solid var(--co-c,var(--brand)); background:var(--brand-pale); padding:22px 26px; border-radius:0 var(--r) var(--r) 0; font-size:.97rem}
.callout--lime{--co-c:var(--c-lime); background:#F2F8E9}
.callout--orange{--co-c:var(--c-orange); background:#FEF4E7}
.callout--green{--co-c:var(--c-green); background:#EAF7EC}
.callout strong{color:var(--brand-dark)}

/* ---------- CTA band ---------- */
.cta{background:var(--ink); color:#F4F7F9; border-radius:var(--r-lg); padding:clamp(38px,6vw,68px); text-align:center; position:relative; overflow:hidden}
.cta .spectrum{position:absolute; top:0; left:0; right:0}
.cta h2{color:#fff; max-width:20ch; margin-inline:auto}
.cta p{color:rgba(244,247,249,.72); max-width:52ch; margin-inline:auto}
.cta .hero-cta{justify-content:center}
.cta .eyebrow{color:var(--c-sky)}

/* ---------- page head ---------- */
.phead{
  position:relative;
  padding:clamp(48px,7vw,92px) 0 clamp(32px,4.5vw,52px);
  background:
    radial-gradient(620px 320px at 88% -30%, rgba(36,169,226,.12), transparent 60%),
    radial-gradient(520px 300px at 4% -10%,  rgba(136,197,63,.10), transparent 58%),
    linear-gradient(180deg,var(--paper-2) 0%,var(--paper) 100%);
}
.phead::after{content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--spectrum)}
.crumb{font-size:.82rem; color:var(--ink-faint); margin-bottom:16px}
.crumb a{color:var(--ink-faint); text-decoration:none}
.crumb a:hover{color:var(--brand)}

/* ---------- footer ---------- */
.ftr{background:var(--ink); color:rgba(244,247,249,.7); padding:clamp(48px,6vw,78px) 0 32px; font-size:.9rem}
.ftr-top{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:40px; padding-bottom:42px; border-bottom:1px solid rgba(244,247,249,.13)}
.ftr h5{font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:rgba(244,247,249,.46); margin:0 0 15px}
.ftr ul{list-style:none; margin:0; padding:0}
.ftr li{margin-bottom:10px}
.ftr a{color:rgba(244,247,249,.74); text-decoration:none; transition:color .16s}
.ftr a:hover{color:#fff}
.ftr .brandmark img{height:42px}
.ftr-blurb{margin-top:18px; max-width:40ch; font-size:.89rem; color:rgba(244,247,249,.58)}
.ftr-legal{padding-top:24px; font-size:.78rem; color:rgba(244,247,249,.44); line-height:1.7}
.ftr-legal p{margin:0 0 8px}

/* ---------- legal structure tree ----------
   Connectors are drawn as a stem, a horizontal bar and a leg into each child.
   The bar's ends are offset by a quarter/eighth of the grid gap so they land
   exactly on the centre of the outermost children. --line-2 is the stroke. */
.tree{
  --gap2:22px; --gap4:12px; --stroke:2px; --rule:#C9D3DA;
  display:flex; flex-direction:column; align-items:center; text-align:center; width:100%;
}
.tree .node{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 28px; max-width:520px; box-shadow:var(--shadow); width:100%;
}
.tree .node{position:relative; overflow:hidden}
.tree .node--entity{border-color:var(--brand); background:var(--brand-pale)}
.tree .node--entity::before{content:''; position:absolute; inset:0 0 auto; height:5px; background:var(--spectrum)}
.tree .node--nord::before{content:''; position:absolute; inset:0 0 auto; height:4px;
  background:linear-gradient(90deg,var(--arctic) 0 25%,var(--ember) 25% 50%,var(--aura) 50% 75%,var(--zenith) 75% 100%)}
.tree .node--solar::before{content:''; position:absolute; inset:0 0 auto; height:4px; background:var(--solar)}
.tree .node h3{margin:0 0 6px; font-size:1.3rem}
.tree .node .kind{
  font-size:.68rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 10px;
}
.tree .node--entity .kind{color:var(--brand-dark)}
.tree .node p{font-size:.9rem; color:var(--ink-soft); margin:0}

/* --- level 1: Qualis Energy Limited → Nord Group + SOLARFIELD --- */
.tree-split{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--gap2);
  width:100%; position:relative; margin-top:64px; align-items:start;
}
.tree-split::before{            /* stem down from the entity node */
  content:''; position:absolute; left:50%; margin-left:calc(var(--stroke) / -2);
  top:-64px; width:var(--stroke); height:32px; background:var(--rule);
}
.tree-split::after{             /* bar joining the two branch centres */
  content:''; position:absolute; top:-32px; height:var(--stroke); background:var(--rule);
  left:calc(25% - var(--gap2) / 4); right:calc(25% - var(--gap2) / 4);
}
.tree-branch{position:relative; display:flex; flex-direction:column; align-items:center; width:100%}
.tree-branch::before{           /* leg down into each branch */
  content:''; position:absolute; top:-32px; left:50%; margin-left:calc(var(--stroke) / -2);
  width:var(--stroke); height:32px; background:var(--rule);
}

/* --- level 2: Nord Group → its four brands --- */
.tree-leaves{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap4);
  width:100%; position:relative; margin-top:58px;
}
.tree-leaves::before{           /* stem down from the Nord Group node */
  content:''; position:absolute; left:50%; margin-left:calc(var(--stroke) / -2);
  top:-58px; width:var(--stroke); height:29px; background:var(--rule);
}
.tree-leaves::after{            /* bar across the four brands */
  content:''; position:absolute; top:-29px; height:var(--stroke); background:var(--rule);
  left:calc(12.5% - var(--gap4) * 0.375); right:calc(12.5% - var(--gap4) * 0.375);
}
.leaf{
  position:relative;
  background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--accent,var(--line));
  border-radius:var(--r-sm); padding:14px 12px; font-size:.86rem; font-weight:600;
}
.leaf::before{                  /* leg down into each brand */
  content:''; position:absolute; top:-29px; left:50%; margin-left:calc(var(--stroke) / -2);
  width:var(--stroke); height:29px; background:var(--rule);
}
.leaf span{display:block; font-weight:400; font-size:.76rem; color:var(--ink-faint); margin-top:3px}

/* ---------- manufacturer approval pills ---------- */
.pillgroup{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 24px; margin-bottom:16px;
}
.pillgroup:last-child{margin-bottom:0}
.pillgroup-label{
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 16px;
}
.pills{display:flex; flex-wrap:wrap; gap:10px}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px 11px 15px;
  border:1px solid var(--line); border-radius:10px; background:var(--paper);
  font-family:'Outfit',sans-serif; font-size:.95rem; font-weight:600;
  letter-spacing:-.01em; color:var(--ink-2);
  box-shadow:0 1px 2px rgba(17,19,21,.05);
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.pill::before{
  content:''; width:9px; height:9px; border-radius:50%;
  background:var(--accent,var(--brand)); flex:none;
}
.pill:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--ink-faint)}
.section--paper2 .pillgroup{background:#fff}
.leaf--arctic{--accent:var(--arctic)}
.leaf--ember {--accent:var(--ember)}
.leaf--aura  {--accent:var(--aura)}
.leaf--zenith{--accent:var(--zenith)}

.ltable{width:100%; border-collapse:collapse; font-size:.93rem}
.ltable tbody tr{--row-c:var(--brand)}
.ltable tbody tr:nth-child(6n+1){--row-c:var(--c-sky)}
.ltable tbody tr:nth-child(6n+2){--row-c:var(--c-blue)}
.ltable tbody tr:nth-child(6n+3){--row-c:var(--c-green)}
.ltable tbody tr:nth-child(6n+4){--row-c:var(--c-lime)}
.ltable tbody tr:nth-child(6n+5){--row-c:var(--c-orange)}
.ltable tbody tr:nth-child(6n+6){--row-c:var(--c-pink)}
.ltable tbody td:first-child{position:relative; padding-left:22px}
.ltable tbody td:first-child::before{
  content:''; position:absolute; left:0; top:16px; width:8px; height:8px;
  border-radius:2px; background:var(--row-c);
}
.tablewrap{position:relative; overflow:hidden}
.tablewrap::before{content:''; position:absolute; inset:0 0 auto; height:4px; background:var(--spectrum)}
.ltable th,.ltable td{text-align:left; padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.ltable th{font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint)}
.ltable td:first-child{font-weight:600; white-space:nowrap}
.ltable tr:last-child td{border-bottom:0}

/* ---------- forms ---------- */
.form{display:grid; gap:17px; max-width:620px}
.field{display:grid; gap:6px}
.field label{font-size:.86rem; font-weight:600; color:var(--ink-2)}
.field input,.field select,.field textarea{font:inherit; font-size:.96rem; padding:13px 15px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); color:var(--ink); width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,116,188,.14)}
.field textarea{min-height:140px; resize:vertical}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:17px}

/* ==========================================================================
   BUILD ANNOTATIONS — everything in this block must be deleted before go-live.
   Two kinds:
     .ph    an inline value still to be supplied (a number, a tier, a limit)
     .note  a message to James — never customer-facing copy
   ========================================================================== */

/* inline slot for a missing value */
.ph{
  background:#FFF0B3; box-shadow:0 0 0 1px #E0A800 inset;
  padding:1px 5px; border-radius:3px; font-weight:600; color:#6B4A00;
  white-space:nowrap;
}
.ph::before{content:'▸ '; opacity:.6}

/* a note to James — deliberately looks nothing like page copy */
.note{
  display:block; margin:16px 0 0; padding:14px 16px;
  background:repeating-linear-gradient(135deg,#FFF9E6,#FFF9E6 12px,#FFF3CC 12px,#FFF3CC 24px);
  border:2px dashed #C77700; border-radius:10px;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.82rem; line-height:1.55; color:#6B4A00; white-space:normal;
}
.note::before{
  content:'⚠ NOTE FOR JAMES — DELETE BEFORE GO-LIVE';
  display:block; font-size:.63rem; font-weight:700; letter-spacing:.12em;
  color:#B35C00; margin-bottom:7px;
}
.note strong{color:#8A4B00}
.note .ph{white-space:normal}
.section--ink .note,.cta .note{color:#6B4A00}

/* running total, injected at the top of every page by the build-notes script */
.buildbar{
  position:sticky; top:0; z-index:200;
  background:#C77700; color:#fff; text-align:center;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.78rem; font-weight:600; letter-spacing:.04em; padding:8px 16px;
}
.buildbar a{color:#FFE9C2}
/* ======================= end build annotations ======================= */

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .brands{grid-template-columns:repeat(2,1fr)}
  .bcard--wide{grid-template-columns:1fr; gap:18px}
  .bcard--wide .blink{margin-top:4px}
  .family-head{grid-template-columns:1fr; gap:20px}
}
@media (max-width:960px){
  .grid-3,.acc-grid{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr}
  .ftr-top{grid-template-columns:1fr 1fr; gap:32px}
}
@media (max-width:720px){
  body{font-size:16px}
  .wrap{width:calc(100% - 36px)}
  .brandmark img{height:38px}
  .nav{display:none; position:absolute; top:78px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:8px 18px 18px; box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav a{padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:1rem}
  .nav a[aria-current="page"]::after{display:none}
  .nav .btn{margin-top:14px; border-bottom:0}
  .nav-tog{display:flex}
  .brands,.grid-3,.grid-2,.acc-grid{grid-template-columns:1fr}
  .tree-split{grid-template-columns:1fr; gap:20px; margin-top:40px}
  .tree-split::before{height:20px; top:-40px}
  .tree-split::after{display:none}
  .tree-branch::before{display:none}
  .tree-leaves{grid-template-columns:1fr 1fr; margin-top:34px; gap:10px}
  .tree-leaves::before{height:17px; top:-34px}
  .tree-leaves::after,.leaf::before{display:none}
  .ltable td:first-child{white-space:normal}
  .step{grid-template-columns:1fr; gap:8px}
  .step .sn{padding-top:0}
  .row2,.ftr-top{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* ---------- location finder ---------- */
.finder{max-width:none}
.finder-field{display:block; margin-bottom:18px; max-width:560px}
.finder-label{
  display:block; font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:9px;
}
.finder-field input{
  font:inherit; font-size:1.05rem; width:100%; padding:15px 18px;
  border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:var(--r-sm); background:var(--paper); color:var(--ink);
}
.finder-field input:focus{outline:none; box-shadow:0 0 0 3px rgba(15,116,188,.14)}

.cfilters{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:20px}
.cfilter{
  font:inherit; font-size:.86rem; font-weight:600; cursor:pointer;
  padding:9px 17px; border-radius:999px; background:var(--paper);
  border:1px solid var(--line); border-left:3px solid var(--cf-c,var(--ink-faint));
  color:var(--ink-2); transition:background .16s, color .16s, border-color .16s, transform .16s;
}
.cfilter:hover{transform:translateY(-1px); border-color:var(--ink-faint)}
.cfilter.is-on{background:var(--cf-c,var(--brand)); border-color:var(--cf-c,var(--brand)); color:#fff}
.cfilters .cfilter:nth-child(1){--cf-c:var(--brand)}
.cfilters .cfilter:nth-child(2){--cf-c:var(--c-sky)}
.cfilters .cfilter:nth-child(3){--cf-c:var(--c-blue)}
.cfilters .cfilter:nth-child(4){--cf-c:var(--c-green)}
.cfilters .cfilter:nth-child(5){--cf-c:var(--c-lime)}
.cfilters .cfilter:nth-child(6){--cf-c:var(--c-orange)}
.cfilters .cfilter:nth-child(7){--cf-c:var(--c-pink)}

.finder-count{font-size:.84rem; color:var(--ink-faint); margin:0 0 14px; min-height:1.2em}

.arealist{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px;
}
.area{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
  border-left:3px solid var(--a-c,var(--brand)); padding:13px 16px;
  display:flex; flex-direction:column; gap:2px;
  transition:transform .16s, box-shadow .16s;
}
.area:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.area[hidden]{display:none}
.area-town{font-family:'Outfit',sans-serif; font-weight:600; font-size:1.02rem; letter-spacing:-.01em}
.area-county{font-size:.78rem; color:var(--ink-faint)}
.area:nth-child(6n+1){--a-c:var(--c-sky)}
.area:nth-child(6n+2){--a-c:var(--c-blue)}
.area:nth-child(6n+3){--a-c:var(--c-green)}
.area:nth-child(6n+4){--a-c:var(--c-lime)}
.area:nth-child(6n+5){--a-c:var(--c-orange)}
.area:nth-child(6n+6){--a-c:var(--c-pink)}

.finder-empty{
  margin:18px 0 0; padding:20px 24px; border-radius:var(--r);
  background:var(--brand-pale); border-left:4px solid var(--brand); font-size:.96rem;
}
.finder-empty a{color:var(--brand-dark); font-weight:600}

/* ---------- long-form legal / policy pages ---------- */
.legal{max-width:74ch}
.legal h2{font-size:clamp(1.35rem,2.2vw,1.75rem); margin:44px 0 10px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.08rem; font-family:'Outfit',sans-serif; margin:26px 0 8px}
.legal p,.legal li{color:var(--ink-soft); font-size:1rem}
.legal ul,.legal ol{margin:0 0 1.1em; padding-left:22px}
.legal li{margin-bottom:7px}
.legal strong{color:var(--ink)}
.legal .rule{height:4px; width:88px; border-radius:2px; background:var(--spectrum); margin:0 0 30px}
.legal table{width:100%; border-collapse:collapse; font-size:.93rem; margin:0 0 1.4em}
.legal th,.legal td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.legal th{font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint)}
.legal td{color:var(--ink-soft)}
.updated{
  display:inline-flex; align-items:center; gap:10px; font-size:.82rem; color:var(--ink-faint);
  border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:999px; padding:8px 18px; margin-bottom:30px;
}

/* table of contents for the legal pages */
.toc{
  position:sticky; top:100px; align-self:start;
  border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; background:var(--paper);
}
.toc::before{content:''; display:block; height:4px; width:56px; border-radius:2px; background:var(--spectrum); margin-bottom:16px}
.toc h4{margin:0 0 12px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:t}
.toc li{margin-bottom:9px; font-size:.9rem}
.toc a{color:var(--ink-soft); text-decoration:none}
.toc a:hover{color:var(--brand)}
.legal-layout{display:grid; grid-template-columns:250px 1fr; gap:clamp(32px,5vw,64px); align-items:start}

@media (max-width:960px){
  .legal-layout{grid-template-columns:1fr}
  .toc{position:static}
}

/* ---------- accreditation cards with logos ----------
   Every logo image is pre-rendered on the same 660x264 canvas and scaled so the
   marks read at equal weight, so width:100% gives an identical box every time.
   Cards stretch to the tallest in the row and the brand line is pinned to the
   bottom, so that last line sits on the same baseline across the whole row. */
.acx-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.acx-grid--4{grid-template-columns:repeat(4,1fr)}
.acx{
  --acx-c:var(--brand);
  position:relative; height:100%;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s;
}
.acx::before{content:''; position:absolute; inset:0 0 auto; height:3px; background:var(--acx-c)}
.acx:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.acx-logo{height:88px; display:flex; align-items:center; margin-bottom:18px}
.acx-logo img{width:100%; max-width:216px; height:auto; display:block}
.acx-mark{
  width:52px; height:52px; border-radius:12px; background:var(--acx-c); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-size:1.15rem; font-weight:600;
  box-shadow:0 4px 10px rgba(17,19,21,.13);
}
.acx h4{margin:0 0 8px; font-size:1.02rem}
.acx > p{font-size:.9rem; color:var(--ink-soft); margin:0}
.acx-body{flex:1 1 auto}
.acx-tag{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  font-size:.72rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--acx-c);
}
.acx-grid .acx:nth-child(6n+1){--acx-c:var(--c-sky)}
.acx-grid .acx:nth-child(6n+2){--acx-c:var(--c-blue)}
.acx-grid .acx:nth-child(6n+3){--acx-c:var(--c-green)}
.acx-grid .acx:nth-child(6n+4){--acx-c:var(--c-lime)}
.acx-grid .acx:nth-child(6n+5){--acx-c:var(--c-orange)}
.acx-grid .acx:nth-child(6n+6){--acx-c:var(--c-pink)}

/* compact logo strip — used on the homepage */
.acx-strip{
  display:grid; grid-template-columns:repeat(8,1fr);
  border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:var(--paper);
}
.acx-strip div{display:flex; align-items:center; justify-content:center; padding:22px 14px; border-right:1px solid var(--line)}
.acx-strip div:last-child{border-right:0}
.acx-strip img{width:100%; max-width:118px; height:auto; display:block}
.section--ink .acx-strip{background:#fff; border-color:transparent}

@media (max-width:1080px){
  .acx-grid,.acx-grid--4{grid-template-columns:repeat(2,1fr)}
  .acx-strip{grid-template-columns:repeat(4,1fr)}
  .acx-strip div:nth-child(4n){border-right:0}
  .acx-strip div:nth-child(-n+4){border-bottom:1px solid var(--line)}
}
@media (max-width:720px){
  .acx-grid,.acx-grid--4{grid-template-columns:1fr}
  .acx-strip{grid-template-columns:repeat(2,1fr)}
  .acx-strip div:nth-child(2n){border-right:0}
  .acx-strip div:nth-child(-n+6){border-bottom:1px solid var(--line)}
}