/* ELLEGAARD Consult – website
   Layout: et enstregsdiagram (single-line diagram) bærer siden. En samleskinne løber
   fra forsiden ud til fire afgange = fire ydelser. Hvidt papir, navy blæk, blå linjer,
   orange kun dér hvor der er "spænding på": det man skal handle på. */

@font-face{font-family:"Lato";src:url("fonts/lato-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url("fonts/lato-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Lato";src:url("fonts/lato-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url("fonts/lato-latin-900-normal.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --paper:#FBFCFD;      /* baggrund: koldt hvidt papir */
  --sheet:#F1F4F7;      /* flader: tegningsfelt */
  --ink:#1B3A5C;        /* EC navy: tekst og overskrifter */
  --ink-soft:#4A5F75;   /* brødtekst sekundær */
  --line:#5B8C80;       /* salviegrøn fra logoets prikker: diagramlinjer */
  --live:#1E8C3A;       /* logoets grønne: accent, links, "spænding på" */
  --cta:#E8792B;        /* EC orange: KUN "Book en samtale" */
  --sage:#ECF3F0;       /* lys flade afledt af logoets salviegrønne */
  --slate:#EEF2F6;      /* lys flade afledt af logoets blågrå */
  --dot-a:#77A59B;--dot-b:#AFBCC8;
  --band:#1B3A5C;--on-band:#F3F7FA;
  --emblem:url("ec-emblem.svg");--emblem-band:url("ec-emblem-lys.svg");
  --rule:#D5DEE7;       /* hårlinjer */
  --grid:#E6ECF2;       /* millimeterpapir i tegningsfelter */
  --f-display:"Lato", Calibri, "Segoe UI", system-ui, sans-serif;
  --f-body:"Lato", Calibri, "Segoe UI", system-ui, sans-serif;
  --f-mono:"Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --s1:.25rem;--s2:.5rem;--s3:1rem;--s4:1.5rem;--s5:2.5rem;--s6:4rem;--s7:6rem;
  --maxw:72rem;
  --logo-light:block;--logo-dark:none;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1A27;--sheet:#13243A;--ink:#E4ECF4;--ink-soft:#A9B9CA;
    --line:#8FC4B7;--live:#5DBB5D;--cta:#F08C45;--sage:#12272A;--slate:#152436;--dot-a:#8FC4B7;--dot-b:#D3DCE6;--band:#081320;--on-band:#E4ECF4;--emblem:url("ec-emblem-lys.svg");
    --rule:#25394F;--grid:#182C43;--logo-light:none;--logo-dark:block;color-scheme:dark}
}
:root[data-theme="dark"]{
  --paper:#0E1A27;--sheet:#13243A;--ink:#E4ECF4;--ink-soft:#A9B9CA;
  --line:#8FC4B7;--live:#5DBB5D;--cta:#F08C45;--sage:#12272A;--slate:#152436;--dot-a:#8FC4B7;--dot-b:#D3DCE6;--band:#081320;--on-band:#E4ECF4;--emblem:url("ec-emblem-lys.svg");
    --rule:#25394F;--grid:#182C43;--logo-light:none;--logo-dark:block;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.6}
img,svg{max-width:100%;height:auto}
a{color:inherit;text-decoration-color:var(--line);text-underline-offset:.2em}
a:hover{color:var(--line)}
:focus-visible{outline:2px solid var(--live);outline-offset:3px}
h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;font-family:var(--f-display);line-height:1.12;text-wrap:balance;margin:0}
h1{font-size:clamp(2.2rem,5.2vw,3.9rem);font-weight:900;letter-spacing:-.02em}
h2{font-size:clamp(1.55rem,3vw,2.2rem);font-weight:900;letter-spacing:-.01em}
h3{font-size:1.2rem;font-weight:700}
p{margin:0;max-width:65ch}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.mono,.tag{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.lead{font-size:clamp(1.12rem,1.6vw,1.3rem);color:var(--ink-soft);line-height:1.55}
.stack{display:grid;gap:var(--s3)}
.stack-lg{display:grid;gap:var(--s5)}

/* Header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-block:.8rem}
.brand{display:block;width:clamp(190px,26vw,270px);flex:none}
.brand img{display:block;width:100%}
.brand .l{display:var(--logo-light)}.brand .d{display:var(--logo-dark)}
.nav{display:flex;gap:clamp(.8rem,2vw,1.6rem);align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav a{text-decoration:none;font-size:.95rem;font-weight:700;color:var(--ink-soft);padding-block:.3rem;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--live)}
.nav .cta{color:var(--live)}
.menu-btn{display:none;background:none;border:1px solid var(--rule);color:var(--ink);border-radius:4px;padding:.4rem .7rem;font:inherit;font-weight:700;cursor:pointer}
@media (max-width:860px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;inset-inline:0;top:100%;background:var(--paper);border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;padding:var(--s2) clamp(16px,4vw,40px) var(--s4);gap:0}
  .nav a{padding-block:.7rem;border-bottom:1px solid var(--rule)}
  .site-head.open .nav{display:flex}
}

/* Hero */
.hero{padding-block:clamp(2.5rem,6vw,5rem) var(--s4)}
.hero .stack{gap:var(--s4)}
.hero h1 em{font-style:normal;color:var(--live)}
.hero{position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-6rem;top:-3rem;width:clamp(16rem,36vw,30rem);aspect-ratio:1;background:var(--emblem) center/contain no-repeat;pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1}
@media (max-width:900px){.hero::after{right:-9rem;top:-4rem;opacity:.35}}

/* Enstregsdiagram */
.sld{padding-block:var(--s3) var(--s6)}
.sld-figure{position:relative}
.busbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:4px solid var(--ink);position:relative}
.busbar::before{content:"SAMLESKINNE · 30+ ÅRS ERFARING";position:absolute;right:0;top:-1.6rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;color:var(--ink-soft)}
.feeder{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:var(--s3);padding:2.6rem var(--s3) var(--s4);text-decoration:none;color:inherit;min-width:0}
.feeder::before{content:"";position:absolute;left:var(--s3);top:0;height:2.1rem;border-left:2px solid var(--line)}
.feeder::after{content:"";position:absolute;left:calc(var(--s3) - 8px);top:-10px;width:18px;height:18px;border-radius:50%;background:var(--dot-a)}
.feeder:nth-child(even)::after{background:var(--dot-b)}
.feeder .breaker{position:absolute;left:calc(var(--s3) - 6px);top:.65rem;width:14px;height:14px;border:2px solid var(--line);background:var(--paper)}
.feeder:hover .breaker,.feeder:focus-visible .breaker{background:var(--live);border-color:var(--live)}
.feeder:hover::before{border-color:var(--live)}
.feeder .art{aspect-ratio:4/3;max-width:100%;background:var(--sheet);border:1px solid var(--rule);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:16px 16px;display:grid;place-items:center;padding:var(--s3);transition:border-color .2s}
.feeder:hover .art{border-color:var(--line)}
.feeder .art{position:relative;width:100%}
.feeder .art svg{position:absolute;inset:var(--s3);width:calc(100% - 2*var(--s3));height:calc(100% - 2*var(--s3))}
.feeder h3{display:flex;justify-content:space-between;gap:var(--s2);align-items:baseline}
.feeder h3 span{font-family:var(--f-mono);font-size:.72rem;font-weight:500;color:var(--ink-soft);letter-spacing:.05em}
.feeder p{font-size:.97rem;color:var(--ink-soft)}
.feeder .go{font-weight:700;font-size:.92rem;color:var(--live)}
@media (max-width:900px){.busbar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){
  .busbar{grid-template-columns:1fr;border-top:none;border-left:4px solid var(--ink);margin-left:6px}
  .busbar::before{display:none}
  .feeder{padding:var(--s3) 0 var(--s4) 2.4rem}
  .feeder::before{left:0;top:1.4rem;height:0;width:2rem;border-left:none;border-top:2px solid var(--line)}
  .feeder::after{left:-8px;top:calc(1.4rem - 6px)}
  .feeder .breaker{left:.8rem;top:calc(1.4rem - 7px)}
}

/* Tegningslinjer (illustrationer) */
.dw{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dw-thin{fill:none;stroke:var(--line);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dw-dash{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 4}
.dw-live{fill:none;stroke:var(--live);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dw-fill{fill:var(--live);stroke:none}
.dw-paper{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.dw-text{fill:var(--ink-soft);font-family:var(--f-mono);font-size:9px;letter-spacing:.06em}

/* Sektioner */
section.band{padding-block:var(--s6);border-top:1px solid var(--rule)}
section.band.tint-sage{background:var(--sage);border-top:none}
section.band.tint-slate{background:var(--slate);border-top:none}
.tint-slate .dl .ico::after{background:var(--slate)}
.tint-sage .dl .ico::after{background:var(--sage)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5);align-items:start}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.principles > div{display:grid;gap:var(--s2);align-content:start;padding-top:var(--s3);border-top:2px solid var(--ink)}
.principles p{color:var(--ink-soft);font-size:.98rem}
@media (max-width:820px){.principles{grid-template-columns:1fr}}

.reflist{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:0;border-top:1px solid var(--rule)}
.reflist div{padding:var(--s3) var(--s3) var(--s3) 0;border-bottom:1px solid var(--rule);display:grid;gap:.15rem}
.reflist b{font-size:1.02rem}
.reflist span{font-size:.9rem;color:var(--ink-soft)}

/* Ydelsessider */
.page-hero{padding-block:clamp(2rem,5vw,4rem) var(--s5)}
.page-hero .split{align-items:center}
.plate{background:var(--sheet);border:1px solid var(--rule);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:20px 20px;position:relative}
.plate svg{display:block;width:100%;height:auto}
.titleblock{display:grid;grid-template-columns:repeat(3,auto);border-top:1px solid var(--rule);font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);background:var(--paper)}
.titleblock div{padding:.45rem .7rem;border-right:1px solid var(--rule)}
.titleblock div:last-child{border-right:none}
.titleblock b{display:block;color:var(--ink);font-weight:500}
.crumb{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.crumb a{text-decoration:none}

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:var(--s5) var(--s4)}
.cols h3{padding-bottom:var(--s2);border-bottom:2px solid var(--ink);margin-bottom:var(--s3)}
ul.clean{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
ul.clean li{padding-left:1.3rem;position:relative;color:var(--ink-soft)}
ul.clean li::before{content:"";position:absolute;left:0;top:.72em;width:.65rem;border-top:2px solid var(--line)}

/* Trappe (AI) – rækkefølgen ER informationen */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;align-items:end}
.step{border-left:1px solid var(--rule);padding:var(--s3);display:grid;gap:var(--s2);align-content:start;background:var(--paper)}
.step .lvl{font-family:var(--f-mono);font-size:.75rem;color:var(--line);letter-spacing:.06em}
.step p{font-size:.95rem;color:var(--ink-soft)}
.step:nth-child(1){border-top:3px solid var(--live);min-height:11rem}
.step:nth-child(2){border-top:3px solid var(--ink);min-height:13rem}
.step:nth-child(3){border-top:3px solid var(--ink);min-height:15rem}
.step:nth-child(4){border-top:3px solid var(--ink);min-height:17rem}
@media (max-width:820px){.steps{grid-template-columns:1fr}.step{min-height:0!important}}

.exp{width:100%;border-collapse:collapse;font-size:.97rem}
.exp th,.exp td{text-align:left;vertical-align:top;padding:.8rem 1rem .8rem 0;border-bottom:1px solid var(--rule)}
.exp th{font-weight:700;width:34%}
.exp td{color:var(--ink-soft)}
.exp .yr{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-soft);white-space:nowrap}
.table-wrap{overflow-x:auto}

/* Download */
.dl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--rule);text-decoration:none}
.dl:first-child{border-top:1px solid var(--rule)}
.dl .ico{width:2.6rem;height:3.2rem;border:1.5px solid var(--ink);position:relative;display:grid;place-items:end center;padding-bottom:.3rem;font-family:var(--f-mono);font-size:.6rem;font-weight:500}
.dl .ico::after{content:"";position:absolute;right:-1.5px;top:-1.5px;width:.8rem;height:.8rem;background:var(--paper);border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.dl b{display:block}
.dl small{color:var(--ink-soft);font-size:.88rem}
.dl .arrow{font-weight:700;color:var(--live);white-space:nowrap}
.dl:hover b{color:var(--line)}
.dl.pending{opacity:.6;pointer-events:none}

/* CTA og kontakt */
.cta-band{background:var(--band);color:var(--on-band);position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-5rem;bottom:-7rem;width:clamp(14rem,30vw,26rem);aspect-ratio:1;background:var(--emblem-band) center/contain no-repeat;opacity:.9;pointer-events:none}
.cta-band .wrap{padding-block:var(--s6);display:grid;gap:var(--s4);position:relative;z-index:1}
.cta-band h2{color:var(--on-band);max-width:22ch}
.cta-band p{color:color-mix(in srgb,var(--on-band) 78%,var(--band))}
@media (max-width:700px){.cta-band::after{opacity:.25}}
.contact{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);font-size:1.15rem}
.contact a{color:var(--on-band);text-decoration-color:var(--dot-a);font-weight:700}
.contact .mono{color:color-mix(in srgb,var(--on-band) 65%,var(--band));display:block}
.btn{display:inline-block;background:var(--cta);color:#fff;text-decoration:none;font-weight:700;padding:.85rem 1.4rem;border-radius:2px}
.btn:hover{color:#fff;filter:brightness(1.07)}
.btn.ghost{background:none;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{color:var(--line);border-color:var(--line)}
.btns{display:flex;flex-wrap:wrap;gap:var(--s3)}

.portrait{aspect-ratio:4/5;max-width:100%;background:var(--sage);border:1px dashed var(--line);display:grid;place-items:center;text-align:center;padding:var(--s4);color:var(--ink-soft);font-family:var(--f-mono);font-size:.75rem;letter-spacing:.05em;text-transform:uppercase}

.site-foot{border-top:1px solid var(--rule);padding-block:var(--s5)}
.site-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);font-size:.88rem;color:var(--ink-soft)}
.site-foot a{text-decoration:none}

@media (prefers-reduced-motion:no-preference){
  .feeder .art,.feeder .breaker{transition:background-color .2s,border-color .2s}
}

.page-hero h1{font-size:clamp(2rem,4.2vw,3.3rem)}
.split > *{min-width:0}
.stack,.stack-lg{grid-template-columns:minmax(0,1fr)}

/* Forside med intro-video */
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"head vid" "body vid";column-gap:clamp(2rem,5vw,4.5rem);row-gap:var(--s4);align-items:start}
.hero-head{grid-area:head;align-self:end}
.hero-body{grid-area:body;gap:var(--s4)}
.intro{grid-area:vid;margin:0;display:grid;gap:.6rem;justify-self:end;width:min(100%,24rem)}
.intro-frame{position:relative;aspect-ratio:3/4;max-width:100%;background:var(--band);border-radius:3px;overflow:hidden;box-shadow:0 1.5rem 3rem -1.5rem color-mix(in srgb,var(--band) 55%,transparent)}
.intro-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.intro .mono{font-size:.7rem}
.intro-ph{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding:1rem;background:linear-gradient(180deg,var(--band) 0%,color-mix(in srgb,var(--band) 75%,var(--line)) 100%)}
.intro-tag{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;color:color-mix(in srgb,var(--on-band) 70%,var(--band))}
.intro-play{align-self:center;justify-self:center;width:4.2rem;height:4.2rem;border-radius:50%;border:2px solid var(--on-band);position:relative}
.intro-play::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-left:1.1rem solid var(--on-band);border-top:.7rem solid transparent;border-bottom:.7rem solid transparent}
.intro-sub{margin:0;background:color-mix(in srgb,#000 55%,transparent);color:#fff;font-size:.95rem;line-height:1.4;padding:.5rem .7rem;border-radius:2px;text-align:center}
.sound{position:absolute;left:1rem;bottom:1rem;background:var(--cta);color:#fff;border:none;border-radius:2px;padding:.6rem .9rem;font:inherit;font-weight:700;cursor:pointer}
@media (max-width:820px){
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "vid" "body"}
  .intro{justify-self:start;width:min(100%,19rem)}
}
.portrait-img{margin:0;aspect-ratio:4/5;max-width:100%;overflow:hidden;border-radius:3px;background:var(--sage)}
.portrait-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}