/* ==========================================================================
   Nord Group — design system
   Built on the Qualis Energy system, re-palletted to Nord Group's four brands.
   The Nord Group ring mark carries these same four colours.
   ========================================================================== */

:root{
  /* --- the four brand colours, straight from the brand logos --- */
  --c-sky:    #5292B9;   /* ArcticNord */
  --c-orange: #E06C2D;   /* EmberNord  */
  --c-green:  #12A093;   /* AuraNord   */
  --c-lime:   #ECB53E;   /* ZenithNord */
  /* aliases so the shared components keep working on a four-colour cycle */
  --c-blue:   #2E6E8E;
  --c-pink:   #12A093;

  /* --- primary --- */
  --brand:      #12A093;
  --brand-dark: #0C7A70;
  --brand-pale: #E4F4F2;

  /* --- 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          */
  --nordgroup:  #12A093;   /* Nord Group  — ring teal           */

  /* the four brand colours as one gradient, for rules and edges */
  --spectrum: linear-gradient(90deg,
    var(--c-sky)    0%,  var(--c-sky)    25%,
    var(--c-orange) 25%, var(--c-orange) 50%,
    var(--c-green)  50%, var(--c-green)  75%,
    var(--c-lime)   75%, var(--c-lime)   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:62px; 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(18,160,147,.13), transparent 62%),
    radial-gradient(620px 420px at 6% 4%,  rgba(224,108,45,.10), transparent 60%),
    radial-gradient(560px 420px at 52% 6%, rgba(82,146,185,.08), 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)}


/* ---------- 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{
  --feat-c:var(--brand); --feat-pale:var(--brand-pale); --feat-ink:#fff;
  display:grid; grid-template-columns:1.12fr .88fr;
  border:1.5px solid var(--feat-c); border-radius:var(--r-lg);
  overflow:hidden; background:var(--paper);
  box-shadow:0 1px 2px rgba(17,19,21,.04), 0 10px 30px rgba(17,19,21,.05);
}
/* reversed blocks swap the columns as well as the order, so the white side is
   the same width every time rather than alternating wide and narrow */
.feature--rev{grid-template-columns:.88fr 1.12fr}
.feature-body{padding:clamp(32px,4.4vw,54px)}
.feature-aside{
  background:var(--feat-pale); color:var(--ink);
  border-left:1px solid var(--feat-c);
  padding:clamp(32px,4.4vw,54px); display:flex; flex-direction:column; justify-content:center;
}
.feature--rev .feature-aside{border-left:0; border-right:1px solid var(--feat-c)}
.feature-aside ul{list-style:none; margin:0; padding:0}
.feature-aside li{padding:12px 0; border-bottom:1px solid rgba(17,19,21,.10); 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(--feat-c); 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(4n+1){--s-c:var(--c-sky)}
.steps .step:nth-child(4n+2){--s-c:var(--c-orange)}
.steps .step:nth-child(4n+3){--s-c:var(--c-green)}
.steps .step:nth-child(4n+4){--s-c:var(--c-lime)}
.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 — four brand colours */
.acc-grid > .acc:nth-child(4n+1),.grid > .acc:nth-child(4n+1){--acc-c:var(--c-sky)}
.acc-grid > .acc:nth-child(4n+2),.grid > .acc:nth-child(4n+2){--acc-c:var(--c-orange)}
.acc-grid > .acc:nth-child(4n+3),.grid > .acc:nth-child(4n+3){--acc-c:var(--c-green)}
.acc-grid > .acc:nth-child(4n+4),.grid > .acc:nth-child(4n+4){--acc-c:var(--c-lime)}
/* 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))}

/* ---------- 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(4n+1){--chip-c:var(--c-sky)}
.strip .chip:nth-child(4n+2){--chip-c:var(--c-orange)}
.strip .chip:nth-child(4n+3){--chip-c:var(--c-green)}
.strip .chip:nth-child(4n+4){--chip-c:var(--c-lime)}
.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 --- */
.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(4n+1){--row-c:var(--c-sky)}
.ltable tbody tr:nth-child(4n+2){--row-c:var(--c-orange)}
.ltable tbody tr:nth-child(4n+3){--row-c:var(--c-green)}
.ltable tbody tr:nth-child(4n+4){--row-c:var(--c-lime)}
.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}
}
/* Between tablet and desktop the nav has to share the bar with a wider
   lockup, so tighten the spacing rather than let it collide. */
@media (max-width:920px){
  .hdr-in{gap:16px}
  .brandmark img{height:54px}
  .nav{gap:20px}
  .nav a{font-size:.86rem}
}
@media (max-width:720px){
  body{font-size:16px}
  .wrap{width:calc(100% - 36px)}
  .brandmark img{height:46px}
  .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-orange)}
.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-sky)}
.cfilters .cfilter:nth-child(7){--cf-c:var(--c-orange)}
.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(4n+1){--a-c:var(--c-sky)}
.area:nth-child(4n+2){--a-c:var(--c-orange)}
.area:nth-child(4n+3){--a-c:var(--c-green)}
.area:nth-child(4n+4){--a-c:var(--c-lime)}
.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:120px; display:flex; align-items:center; margin-bottom:20px}
.acx-logo img{
  width:100%; max-width:300px; max-height:120px; height:auto; display:block;
  object-fit:contain; object-position:left center;
  transition:scale .32s cubic-bezier(.22,.75,.3,1);
}
.acx:hover .acx-logo img{scale:1.04}
.acx-grid--4 .acx-logo{height:104px}
.acx-grid--4 .acx-logo img{max-width:260px; max-height:104px}
.acx-mark{
  width:80px; height:80px; border-radius:16px; background:var(--acx-c); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-size:1.7rem; font-weight:600;
  box-shadow:0 6px 14px rgba(17,19,21,.15);
}
.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(4n+1){--acx-c:var(--c-sky)}
.acx-grid .acx:nth-child(4n+2){--acx-c:var(--c-orange)}
.acx-grid .acx:nth-child(4n+3){--acx-c:var(--c-green)}
.acx-grid .acx:nth-child(4n+4){--acx-c:var(--c-lime)}

/* compact logo strip — used on the homepage */
.acx-strip{
  display:grid; grid-template-columns:repeat(4,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:32px 28px; border-right:1px solid var(--line);
  transition:background .25s;
}
.acx-strip div:nth-child(4n){border-right:0}
.acx-strip div:nth-child(-n+4){border-bottom:1px solid var(--line)}
.acx-strip div:hover{background:var(--paper-2)}
.acx-strip img{
  width:100%; max-width:210px; height:auto; display:block;
  transition:scale .3s cubic-bezier(.22,.75,.3,1);
}
.acx-strip div:hover img{scale:1.05}
.section--ink .acx-strip{background:#fff; border-color:transparent}
.section--ink .acx-strip div:hover{background:#F4F7F9}

@media (max-width:1080px){
  .acx-grid,.acx-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .acx-strip{grid-template-columns:repeat(2,1fr)}
  .acx-strip div{padding:26px 20px}
  .acx-strip div:nth-child(4n){border-right:1px solid var(--line)}
  .acx-strip div:nth-child(2n){border-right:0}
  .acx-strip div:nth-child(-n+6){border-bottom:1px solid var(--line)}
}
@media (max-width:720px){
  .acx-grid,.acx-grid--4{grid-template-columns:1fr}
}
.wordwall span:nth-child(4n+1){--w-c:var(--c-sky)}
.wordwall span:nth-child(4n+2){--w-c:var(--c-orange)}
.wordwall span:nth-child(4n+3){--w-c:var(--c-green)}
.wordwall span:nth-child(4n+4){--w-c:var(--c-lime)}

/* ==========================================================================
   Nord Group — the four-company panel at the top of the homepage
   ========================================================================== */
.gateway{
  padding:clamp(30px,4.5vw,54px) 0 clamp(34px,5vw,60px);
  background:
    radial-gradient(820px 460px at 82% -20%, rgba(18,160,147,.12), transparent 62%),
    radial-gradient(640px 420px at 6% 0%,  rgba(224,108,45,.09), transparent 60%),
    var(--paper);
  border-bottom:1px solid var(--line);
}
.gateway-lead{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  margin:0 0 clamp(20px,2.6vw,30px);
}
.gateway-lead h2{
  margin:0; font-size:clamp(1.35rem,2.4vw,1.85rem); letter-spacing:-.025em;
}
.gateway-lead p{margin:0; font-size:.98rem; color:var(--ink-soft)}

.gateway-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.gw{
  --gw-c:var(--brand);
  position:relative; display:flex; flex-direction:column; height:100%;
  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;
}
.gw::before{content:''; position:absolute; inset:0 0 auto; height:5px; background:var(--gw-c)}
.gw:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent}
.gw-logo{height:76px; display:flex; align-items:center; margin-bottom:18px}
.gw-logo img{max-height:76px; max-width:100%; width:auto; object-fit:contain; object-position:left center}
.gw-logo .gw-fb{
  display:none; font-family:'Outfit',sans-serif; font-size:1.4rem; font-weight:600; letter-spacing:-.025em;
}
.gw-logo.nologo img{display:none}
.gw-logo.nologo .gw-fb{display:block}
.gw-tag{
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gw-c); margin:0 0 12px;
}
.gw-body{flex:1 1 auto}
.gw-body p{font-size:.92rem; color:var(--ink-soft); margin:0}
.gw-go{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  display:inline-flex; align-items:center; gap:8px;
  font-size:.88rem; font-weight:600; color:var(--ink);
}
.gw-go .arw{transition:transform .18s}
.gw:hover .gw-go .arw{transform:translateX(4px)}
.gw--arctic{--gw-c:var(--c-sky)}
.gw--ember {--gw-c:var(--c-orange)}
.gw--aura  {--gw-c:var(--c-green)}
.gw--zenith{--gw-c:var(--c-lime)}

/* compact brand bar for inner pages */
.brandbar{background:var(--paper-2); border-bottom:1px solid var(--line)}
.brandbar-in{
  display:flex; align-items:center; gap:clamp(12px,2.4vw,32px); flex-wrap:wrap;
  padding:12px 0; font-size:.84rem;
}
.brandbar-lbl{
  font-size:.68rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-faint); margin-right:4px;
}
.brandbar a{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; font-weight:600; color:var(--ink-2);
  padding:5px 0; border-bottom:2px solid transparent; transition:border-color .16s, color .16s;
}
.brandbar a::before{content:''; width:9px; height:9px; border-radius:50%; background:var(--bb-c,var(--brand))}
.brandbar a:hover{border-bottom-color:var(--bb-c,var(--brand)); color:var(--ink)}
.brandbar a:nth-of-type(1){--bb-c:var(--c-sky)}
.brandbar a:nth-of-type(2){--bb-c:var(--c-orange)}
.brandbar a:nth-of-type(3){--bb-c:var(--c-green)}
.brandbar a:nth-of-type(4){--bb-c:var(--c-lime)}

@media (max-width:1080px){ .gateway-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){
  .gateway-grid{grid-template-columns:1fr}
  .brandbar-in{gap:14px; font-size:.8rem}
  .brandbar-lbl{width:100%; margin-bottom:2px}
}

/* single-branch tree: Qualis Energy Limited -> Nord Group -> four companies */
.tree-single{
  display:flex; flex-direction:column; align-items:center; width:100%;
  position:relative; margin-top:64px;
}
.tree-single::before{
  content:''; position:absolute; left:50%; margin-left:calc(var(--stroke) / -2);
  top:-64px; width:var(--stroke); height:64px; background:var(--rule);
}
.tree--single .tree-leaves{margin-top:58px}


/* ---------- central-accreditation banner ---------- */
.central{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,34px); align-items:start;
  background:var(--brand-pale); border:1px solid var(--line);
  border-left:5px solid var(--brand); border-radius:var(--r);
  padding:clamp(24px,3.2vw,34px);
}
.central-mark{
  width:76px; height:76px; flex:none; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:9px;
  box-shadow:0 5px 14px rgba(17,19,21,.10);
  transition:transform .2s, box-shadow .2s;
}
.central-mark img{width:100%; height:auto; display:block}
a.central-mark:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(17,19,21,.16)}
a.central-mark:focus-visible{outline:3px solid var(--c-sky); outline-offset:3px}
@media (hover:none){ a.central-mark:hover{transform:none} }
.central h2{font-size:clamp(1.25rem,2.1vw,1.6rem); margin:0 0 12px}
.central p{font-size:.97rem; color:var(--ink-soft); margin:0 0 .8em}
.central p:last-child{margin-bottom:0}
@media (max-width:720px){ .central{grid-template-columns:1fr} }

/* ==========================================================================
   Flair — devices borrowed from the ArcticNord site, adapted to a light theme.
   ArcticNord uses gradient-filled text, radial glow orbs inside cards and a
   firm hover lift. Those translate; its dark palette does not.
   ========================================================================== */

/* gradient-filled words — ArcticNord uses this on the hero headline */
.grad{
  background:linear-gradient(120deg, var(--c-green), var(--c-sky) 55%, var(--c-orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-style:normal;
}
h1 .grad,h2 .grad{padding-right:.06em}

.gw,.acx,.acc,.family{position:relative}
.gw:hover{transform:translateY(-6px); box-shadow:0 22px 50px rgba(17,19,21,.14)}

/* hero gets a deeper wash and a soft orb behind the headline */
.hero{position:relative; isolation:isolate}
.hero::after{
  content:''; position:absolute; z-index:-1; top:-120px; right:-80px;
  width:520px; height:520px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(18,160,147,.16), transparent 66%);
}
.gateway{position:relative; isolation:isolate; overflow:hidden}
.gateway::after{
  content:''; position:absolute; z-index:-1; bottom:-220px; left:-120px;
  width:560px; height:560px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(224,108,45,.10), transparent 66%);
}

/* dark bands get the same treatment, which is where ArcticNord lives */
.section--ink{overflow:hidden}
.section--ink::after{
  content:''; position:absolute; top:-160px; right:-120px;
  width:560px; height:560px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(18,160,147,.30), transparent 65%);
}
.cta{isolation:isolate}
.cta::after{
  content:''; position:absolute; z-index:-1; bottom:-180px; left:-100px;
  width:460px; height:460px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(82,146,185,.28), transparent 66%);
}

/* accreditation and info cards lift a little harder */
.acx:hover,.acc:hover{transform:translateY(-4px); box-shadow:0 18px 44px rgba(17,19,21,.12)}

/* primary button gets the gradient ArcticNord uses on its CTAs */
.btn-primary{
  background:linear-gradient(135deg, var(--c-green), #0E8C81);
  box-shadow:0 8px 22px rgba(18,160,147,.28);
}
.btn-primary:hover{
  background:linear-gradient(135deg, #0E8C81, var(--c-green));
  box-shadow:0 12px 30px rgba(18,160,147,.36);
}

/* thin gradient wash between light sections, ArcticNord's band separator */
.section--paper2{position:relative}
.section--paper2::before{
  content:''; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg, transparent, rgba(18,160,147,.35), transparent);
}


/* ==========================================================================
   MOTION
   Opt-in by design. Every reveal rule is gated behind .js-anim, which the
   script adds to <html> only when IntersectionObserver exists AND the visitor
   has not asked for reduced motion. With JavaScript off the page renders
   fully visible and completely static — nothing is hidden waiting for a script.

   Everything animates `translate`, `scale` and `opacity` — the individual
   transform properties — so none of it collides with the plain `transform`
   already used by the hover states above.
   ========================================================================== */

@keyframes rise-in{
  from{opacity:0; translate:0 20px}
  to  {opacity:1; translate:0 0}
}
@keyframes drift{
  0%,100%{translate:0 0}
  50%    {translate:-24px 18px}
}
@keyframes shimmer{
  0%,100%{background-position:0% 50%}
  50%    {background-position:100% 50%}
}

/* ---------- hero and page-head arrive on load, line by line ---------- */
.js-anim .hero > .wrap > *,
.js-anim .phead > .wrap > *{animation:rise-in .74s cubic-bezier(.22,.75,.3,1) both}
.js-anim .hero > .wrap > *:nth-child(1),.js-anim .phead > .wrap > *:nth-child(1){animation-delay:.04s}
.js-anim .hero > .wrap > *:nth-child(2),.js-anim .phead > .wrap > *:nth-child(2){animation-delay:.12s}
.js-anim .hero > .wrap > *:nth-child(3),.js-anim .phead > .wrap > *:nth-child(3){animation-delay:.20s}
.js-anim .hero > .wrap > *:nth-child(4),.js-anim .phead > .wrap > *:nth-child(4){animation-delay:.28s}
.js-anim .hero > .wrap > *:nth-child(5),.js-anim .phead > .wrap > *:nth-child(5){animation-delay:.36s}
.js-anim .hero > .wrap > *:nth-child(n+6),
.js-anim .phead > .wrap > *:nth-child(n+6){animation-delay:.44s}

/* ---------- scroll reveal ---------- */
.js-anim [data-rv]{
  opacity:0; translate:0 22px;
  transition:opacity .62s cubic-bezier(.22,.75,.3,1),
             translate .62s cubic-bezier(.22,.75,.3,1);
}
.js-anim [data-rv].rv-in{opacity:1; translate:0 0}

/* the rainbow rules wipe in from the left rather than rising */
.js-anim .spectrum[data-rv]{
  opacity:1; translate:0 0; scale:0 1; transform-origin:left center;
  transition:scale .85s cubic-bezier(.22,.75,.3,1);
}
.js-anim .spectrum[data-rv].rv-in{scale:1 1}

/* step numbers pop in just behind their card */
.js-anim .step[data-rv] .sn{
  scale:.7; opacity:0;
  transition:scale .5s cubic-bezier(.34,1.56,.64,1) .14s, opacity .38s .14s;
}
.js-anim .step[data-rv].rv-in .sn{scale:1; opacity:1}

/* ---------- ambient ---------- */
/* gradient words drift slowly through the palette */
.grad{background-size:240% 100%}
.js-anim .grad{animation:shimmer 12s ease-in-out infinite}

/* the glow orbs breathe */
.js-anim .hero::after{animation:drift 26s ease-in-out infinite}
.js-anim .cta::after{animation:drift 22s ease-in-out infinite}
.js-anim .section--ink::after{animation:drift 32s ease-in-out infinite reverse}

/* ---------- interaction ---------- */
/* sticky header gains a shadow once you leave the top of the page */
.hdr{transition:box-shadow .3s, background-color .3s}
.hdr.is-stuck{box-shadow:0 6px 26px rgba(17,19,21,.08); background:rgba(255,255,255,.95)}

/* nav underline sweeps out from the left */
.nav a::before{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--brand); opacity:.55;
  transition:right .28s cubic-bezier(.22,.75,.3,1);
}
.nav a:hover::before{right:0}
.nav a[aria-current="page"]::before{content:none}

/* buttons rise on hover, arrows already nudge */
.btn{transition:transform .18s, box-shadow .22s, background .18s, border-color .18s}
.btn:hover{transform:translateY(-2px)}

/* the round icon badges tip slightly when their card is hovered */
.acc .badge{transition:scale .3s cubic-bezier(.34,1.56,.64,1), rotate .3s}
.acc:hover .badge{scale:1.08; rotate:-4deg}

/* ---------- the override that matters ---------- */
@media (prefers-reduced-motion:reduce){
  .js-anim *,.js-anim *::before,.js-anim *::after{
    animation:none !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
  .js-anim [data-rv],.js-anim .spectrum[data-rv],.js-anim .step[data-rv] .sn{
    opacity:1 !important; translate:none !important; scale:none !important;
  }
}

/* brand-bar dots swell on hover (Nord Group only) */
.brandbar a::before{transition:scale .25s cubic-bezier(.34,1.56,.64,1)}
.brandbar a:hover::before{scale:1.4}

/* ==========================================================================
   MOBILE & TABLET
   The layout was already fluid; this block fixes the things that only show up
   on a real phone — a four-column table that was being clipped, tap targets
   under the 44px minimum, and hover states that stick on touch.
   ========================================================================== */

/* ---------- phones ---------- */
@media (max-width:720px){

  /* Headlines: the clamp floor was tuned for desktop and reads heavy on a
     narrow phone. Pull it back so a headline is 3 lines, not 6. */
  h1{font-size:clamp(2rem,8.4vw,2.6rem)}
  h2{font-size:clamp(1.6rem,6.6vw,2rem)}

  /* Tables restack into labelled cards. A four-column table cannot work at
     360px, and the wrapper was clipping it rather than scrolling. */
  .tablewrap{overflow:visible; background:transparent; border:0; padding:0}
  .tablewrap::before{display:none}
  .ltable,.ltable tbody,.ltable tr,.ltable td{display:block; width:100%}
  .ltable thead{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .ltable tbody tr{
    background:var(--paper); border:1px solid var(--line);
    border-left:4px solid var(--row-c); border-radius:var(--r-sm);
    margin-bottom:12px; padding:10px 0;
  }
  .ltable td,.ltable tbody td:first-child{
    border-bottom:0; padding:8px 16px; white-space:normal;
  }
  /* the label replaces the column header for each cell */
  .ltable td::before,
  .ltable tbody td:first-child::before{
    content:attr(data-label);
    position:static; display:block; width:auto; height:auto;
    background:none; border-radius:0; margin:0 0 3px; transform:none;
    font-size:.64rem; font-weight:600; letter-spacing:.12em;
    text-transform:uppercase; color:var(--ink-faint);
  }
  .ltable tbody td:first-child{font-size:1.06rem; padding-bottom:4px}

  /* Tap targets — the county filters were 37px tall */
  .cfilter{padding:12px 18px; font-size:.9rem}
  .cfilters{gap:10px}
  .finder-field input{font-size:1.05rem}   /* >=16px stops iOS zooming on focus */

  /* Footer and brand-bar links need room for a thumb */
  .ftr-top a{display:inline-block; padding:5px 0}
  .brandbar a{padding:9px 0}
  .brandbar-in{gap:16px 20px}

  /* Cards get a little more breathing room than the desktop padding allows */
  .acx,.acc{padding:22px 20px}
  .acx-logo{height:104px}
  .acx-logo img{max-height:104px}
}

/* very small phones — 400px and below */
@media (max-width:400px){
  h1{font-size:1.85rem}
  .acx-strip{grid-template-columns:1fr}
  .acx-strip div{border-right:0; border-bottom:1px solid var(--line)}
  .acx-strip div:last-child{border-bottom:0}
  .btn{width:100%; padding:15px 22px}
  .hero-cta{gap:10px}
}

/* ---------- touch devices, any size ---------- */
@media (hover:none){
  /* Hover lifts stick on touch — a card stays raised after you tap it.
     Turn the movement off and leave the link behaviour alone. */
  .gw:hover,.bcard:hover,.acx:hover,.acc:hover,.area:hover,
  .btn:hover,.cfilter:hover,.leaf:hover{transform:none}
  .acx:hover .acx-logo img,.acx-strip div:hover img{scale:none}
  .acc:hover .badge{scale:none; rotate:none}

  /* minimum 44px targets */
  .cfilter{min-height:44px}
  .nav a{min-height:44px; display:flex; align-items:center}
  .brandbar a{min-height:40px}
}

/* ==========================================================================
   COOKIE CONSENT
   Bottom bar plus a preferences dialog. Both are injected by assets/consent.js,
   so there is no markup for them in the page source. Styled from the same
   tokens as everything else, so it reads as part of the site rather than a
   bolted-on widget.
   ========================================================================== */

.cc{
  position:fixed; z-index:9000; left:0; right:0; bottom:0;
  background:var(--ink); color:#F4F7F9;
  border-top:4px solid transparent;
  border-image:var(--spectrum) 1;
  box-shadow:0 -10px 40px rgba(17,19,21,.28);
  animation:cc-up .42s cubic-bezier(.22,.75,.3,1) both;
}
@keyframes cc-up{ from{transform:translateY(100%)} to{transform:translateY(0)} }
@media (prefers-reduced-motion:reduce){ .cc{animation:none} }

.cc-in{
  width:min(var(--wrap),calc(100% - 48px)); margin-inline:auto;
  padding:22px 0; display:grid; grid-template-columns:1fr auto;
  gap:clamp(18px,3vw,44px); align-items:center;
}
.cc-title{
  font-family:'Outfit',sans-serif; font-size:1.02rem; font-weight:600;
  margin:0 0 6px; color:#fff; letter-spacing:-.01em;
}
.cc-text p{margin:0; font-size:.88rem; line-height:1.6; color:rgba(244,247,249,.78); max-width:74ch}
.cc-text a{color:#fff; text-decoration:underline; text-underline-offset:3px}

.cc-btns{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end}
.cc-b{
  font:inherit; font-size:.88rem; font-weight:600; cursor:pointer;
  padding:12px 22px; border-radius:999px; border:1px solid transparent;
  min-height:44px; white-space:nowrap;
  transition:background .18s, border-color .18s, color .18s, transform .16s, box-shadow .18s;
}
.cc-b--ghost{background:transparent; color:#F4F7F9; border-color:rgba(244,247,249,.34)}
.cc-b--ghost:hover{border-color:#fff; background:rgba(244,247,249,.08)}
.cc-b--go{background:#fff; color:var(--ink)}
.cc-b--go:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.3)}
.cc-b:focus-visible{outline:3px solid var(--c-sky); outline-offset:2px}

/* ---------- preferences dialog ---------- */
.ccm{position:fixed; inset:0; z-index:9100}
.ccm[hidden]{display:none}
.ccm-back{position:absolute; inset:0; background:rgba(17,19,21,.55); backdrop-filter:blur(3px)}
.ccm-box{
  position:relative; z-index:1;
  width:min(660px,calc(100% - 36px)); max-height:calc(100vh - 64px); overflow:auto;
  margin:32px auto; background:var(--paper); color:var(--ink);
  border-radius:var(--r-lg); box-shadow:0 30px 80px rgba(17,19,21,.34);
  animation:cc-in .32s cubic-bezier(.22,.75,.3,1) both;
}
@keyframes cc-in{ from{opacity:0; translate:0 18px} to{opacity:1; translate:0 0} }
@media (prefers-reduced-motion:reduce){ .ccm-box{animation:none} }
.ccm-box .spectrum{border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden}
.ccm-body{padding:clamp(24px,4vw,36px)}
.ccm-body h2{font-size:clamp(1.4rem,2.6vw,1.8rem); margin:0 0 10px}
.ccm-lede{font-size:.95rem; color:var(--ink-soft); margin:0 0 26px}

.ccm-row{
  display:grid; grid-template-columns:1fr auto; gap:20px; align-items:start;
  padding:20px 0; border-top:1px solid var(--line);
}
.ccm-row h3{font-size:1rem; margin:0 0 5px}
.ccm-row p{font-size:.88rem; color:var(--ink-soft); margin:0; max-width:52ch}
.ccm-fixed{
  font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap; padding-top:3px;
}

/* toggle — a real checkbox, restyled */
.ccm-sw{position:relative; display:block; cursor:pointer; padding-top:2px}
.ccm-sw input{position:absolute; opacity:0; width:52px; height:30px; margin:0; cursor:pointer}
.ccm-lbl{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.ccm-track{
  display:block; width:52px; height:30px; border-radius:999px;
  background:var(--paper-3); border:1px solid var(--line); position:relative;
  transition:background .22s, border-color .22s;
}
.ccm-track::after{
  content:''; position:absolute; top:3px; left:3px; width:22px; height:22px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(17,19,21,.3);
  transition:translate .22s cubic-bezier(.34,1.56,.64,1);
}
.ccm-sw input:checked + .ccm-track{background:var(--brand); border-color:var(--brand)}
.ccm-sw input:checked + .ccm-track::after{translate:22px 0}
.ccm-sw input:focus-visible + .ccm-track{outline:3px solid var(--c-sky); outline-offset:2px}

.ccm-foot{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end;
  padding-top:24px; margin-top:4px; border-top:1px solid var(--line);
}
.ccm-foot .cc-b--ghost{color:var(--ink); border-color:var(--line)}
.ccm-foot .cc-b--ghost:hover{border-color:var(--ink); background:var(--paper-2)}
.ccm-foot .cc-b--go{background:var(--brand); color:#fff}
.ccm-foot .cc-b--go:hover{background:var(--brand-dark)}

.ccm-x{
  position:absolute; top:14px; right:14px; width:38px; height:38px;
  border:0; border-radius:50%; background:rgba(17,19,21,.06); color:var(--ink);
  font-size:1.5rem; line-height:1; cursor:pointer; transition:background .18s;
}
.ccm-x:hover{background:rgba(17,19,21,.13)}
.ccm-x:focus-visible{outline:3px solid var(--c-sky); outline-offset:2px}

@media (max-width:820px){
  .cc-in{grid-template-columns:1fr; padding:20px 0}
  .cc-btns{justify-content:stretch}
  .cc-b{flex:1 1 auto}
}
@media (max-width:520px){
  .cc-in{width:calc(100% - 32px)}
  .cc-btns{flex-direction:column}
  .ccm-row{grid-template-columns:1fr; gap:14px}
  .ccm-foot{flex-direction:column-reverse}
  .ccm-foot .cc-b{width:100%}
}

/* leaf cards on the group-structure page are now links out to each company */
a.leaf{
  display:block; text-decoration:none; color:var(--ink);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
a.leaf:hover{
  transform:translateY(-3px); box-shadow:var(--shadow);
  border-color:var(--accent,var(--line));
}
.leaf-go{
  display:block; margin-top:8px; padding-top:8px;
  border-top:1px solid var(--line);
  font-weight:600; font-size:.72rem; letter-spacing:.01em;
  color:var(--accent,var(--brand));
}
a.leaf:focus-visible{outline:3px solid var(--c-sky); outline-offset:3px}

/* and the trading-name column of the register links out too */
.ltable td a{color:var(--brand); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .16s}
.ltable td a:hover{border-bottom-color:var(--brand)}

@media (hover:none){ a.leaf:hover{transform:none} }

/* the attribution line under each accreditation card links to that company */
.acx-tag a{color:inherit; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px}
.acx-tag a:hover{opacity:.75}

/* the structure-tree nodes that have a website of their own link out */
.node-go{margin:14px 0 0 !important; padding-top:12px; border-top:1px solid var(--line)}
.node-go a{
  color:var(--brand); font-weight:600; font-size:.84rem; text-decoration:none;
  display:inline-flex; align-items:center; gap:7px;
}
.node-go a .arw{transition:transform .18s}
.node-go a:hover .arw{transform:translateX(4px)}
.ftr-h5link{color:inherit; text-decoration:none; border-bottom:1px solid rgba(244,247,249,.3)}
.ftr-h5link:hover{border-bottom-color:currentColor}
@media (hover:none){ .node-go a:hover .arw{transform:none} }

/* the F-Gas / Gas Safe row carries two cards, not three */
.acx-grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:720px){ .acx-grid--2{grid-template-columns:1fr} }

/* ---------- brand feature blocks ---------- */
.feature + .feature{margin-top:clamp(20px,2.8vw,32px)}
.feature-tag{
  color:var(--feat-c); font-size:.72rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; margin:0 0 14px;
}
.feature-body h3{font-size:clamp(1.35rem,2.3vw,1.85rem)}
.feature-aside h4{margin:0 0 6px}

/* alternate the column order so five in a row do not read as a list */
.feature--rev .feature-body{order:2}
.feature--rev .feature-aside{order:1}


/* the trading-name note: keep the structure link whole, on its own line */
.hero-note a{white-space:nowrap}

@media (max-width:960px){
  /* stacked, so the aside always follows the copy it belongs to */
  .feature--rev .feature-body{order:1}
  .feature--rev .feature-aside{order:2}
}

/* per-brand colour, pale fill and the ink that reads on it */
.feature--arctic{--feat-c:var(--arctic); --feat-pale:#EDF3F8}
.feature--ember {--feat-c:var(--ember);  --feat-pale:#FDF1EA}
.feature--aura  {--feat-c:var(--aura);   --feat-pale:#E7F5F4}
.feature--zenith{--feat-c:var(--zenith); --feat-pale:#FDF6E8; --feat-ink:var(--ink)}
.feature--solar {--feat-c:var(--solar);  --feat-pale:#EAEEF4}

.feature .btn-primary{background:var(--feat-c); color:var(--feat-ink); box-shadow:none}
.feature .btn-primary:hover{filter:brightness(.93); background:var(--feat-c)}

@media (max-width:960px){
  .feature,.feature--rev{grid-template-columns:1fr}
  .feature-aside,.feature--rev .feature-aside{
    border-left:0; border-right:0; border-top:1px solid var(--feat-c);
  }
}

/* Headings that were really labels, restyled so nothing moves on screen.
   Fixes the h1 -> h3 and h2 -> h5 jumps a screen reader had to hop over. */
.ftr-h{font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:rgba(244,247,249,.46); margin:0 0 15px; font-family:'Outfit','Inter',sans-serif}
.ftr-h a{color:inherit}
.toc-h{margin:0 0 12px; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-family:'Outfit','Inter',sans-serif}
.gateway-h{
  font-family:'Outfit',sans-serif; font-weight:600; letter-spacing:-.03em; line-height:1.15;
  font-size:clamp(1.9rem,3.6vw,2.8rem); margin:0 0 10px; color:var(--ink);
}
/* card titles moved from h4 to h3, kept at their old size */
.acc h3,.acx h3{font-family:'Outfit','Inter',sans-serif; font-size:1.02rem; font-weight:600; letter-spacing:-.01em}
.acc h3{margin:0 0 7px}
.acx h3{margin:0 0 8px}
.flow-h{margin:0 0 clamp(20px,3vw,30px)}
/* sitemap section headings keep their old size at their correct level */
.sm-h{font-size:clamp(1.2rem,1.9vw,1.5rem)}
.wsec-h{font-family:'Outfit','Inter',sans-serif; font-size:1.05rem; font-weight:600; letter-spacing:-.01em; margin:0 0 .5em}
/* registered-details row now carries four cards */
.acc-grid--4{grid-template-columns:repeat(4,1fr)}
.acc-grid--4 .badge{font-size:.72rem; letter-spacing:.04em}
@media (max-width:960px){ .acc-grid--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){ .acc-grid--4{grid-template-columns:1fr} }