/* ==========================================================================
   Gammelgaard Træ & Flis
   Designsystem — matcher landing page (vurdering.gammelgaardtraeogflis.dk)
   ========================================================================== */

:root{
  --dark:#223225;
  --dark2:#1e221e;
  --panel:#424b42;
  --green:#4f9d57;
  --green-d:#3f8446;
  --light:#f6f7f6;
  --sand:#eef0ea;
  --ink:#23261f;
  --muted:#565b50;
  --line:#dfe2da;
  --shadow:0 12px 34px rgba(28,40,30,.18);
  --shadow-sm:0 4px 14px rgba(28,40,30,.08);
  --radius:14px;
  --radius-lg:20px;
  --header-h:78px;
  /* Sidemargen i vw, så layoutet holder sin form når vinduet vokser
     i stedet for at indholdet trækker ind mod midten.               */
  --gutter:clamp(16px,3vw,80px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:calc(var(--header-h) + 12px);
  font-size:clamp(16px,.95vw,20px)}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--light);
  font-size:1.125rem;line-height:1.6;overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

.wrap{width:100%;max-width:none;margin:0 auto;padding:0 var(--gutter)}
.display{font-family:"Poppins",sans-serif;font-weight:800;letter-spacing:-.5px;line-height:1.12}

h1.display{font-size:clamp(2.1rem,5.2vw,3.5rem)}
h2.display{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-family:"Poppins",sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:-.2px;line-height:1.3}

.eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--green-d);
}
.eyebrow.on-dark{color:#a8d8ad}

.lead{font-size:1.08rem;color:var(--muted);max-width:62ch}
.lead.on-dark{color:rgba(255,255,255,.82)}

section{padding:4.4rem 0}
.section-head{max-width:70ch;margin-bottom:38px}
.section-head h2{margin:10px 0 14px}

/* ---------- Knapper ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border-radius:999px;border:1px solid transparent;
  font-weight:700;font-size:1rem;cursor:pointer;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 8px 20px rgba(79,157,87,.28)}
.btn-primary:hover{background:var(--green-d)}
.btn-ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.42)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{background:var(--sand);border-color:#c9d3c4}
.btn-outline svg{color:var(--green-d)}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{background:var(--dark2)}
.btn-sm{padding:11px 20px;font-size:.94rem}
.btn-lg{padding:17px 32px;font-size:1.06rem}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--line);
}
/* Header og hero er fuld bredde med proportionale sidemargener,
   så logo og overskrift altid står samme sted relativt til skærmen. */
header .wrap{max-width:none}
.bar{display:flex;align-items:center;height:var(--header-h);gap:40px}
.logo{display:flex;align-items:center;flex-shrink:0;margin-right:auto}
.logo-img{height:42px;width:auto}
.logo-mark{display:none}
.kun-smal{display:none}

nav.main{display:flex;align-items:center;gap:30px}
nav.main > a{font-size:.97rem;font-weight:600;color:var(--muted);transition:color .15s;white-space:nowrap}
nav.main > a:hover,nav.main > a[aria-current="page"]{color:var(--ink)}
.head-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.head-actions .btn{white-space:nowrap}

/* Dropdown: Vores ydelser */
.dropdown{position:relative}
.dd-btn{
  display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  font-size:.97rem;font-weight:600;color:var(--muted);padding:6px 0;transition:color .15s;
  white-space:nowrap;
}
.dd-btn:hover,.dd-btn.aktiv,.dropdown.open .dd-btn{color:var(--ink)}
.dd-btn .chev{transition:transform .2s ease}
.dropdown.open .dd-btn .chev{transform:rotate(180deg)}
.dd-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:330px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:8px;z-index:80;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease;
}
.dropdown.open .dd-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dd-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.dd-menu a{
  display:block;padding:11px 14px;border-radius:10px;transition:background .13s;
}
.dd-menu a:hover,.dd-menu a[aria-current="page"]{background:var(--sand)}
.dd-menu strong{
  display:block;font-family:"Poppins",sans-serif;font-weight:700;font-size:.97rem;
  color:var(--ink);line-height:1.3;
}
.dd-menu span{display:block;font-size:.85rem;color:var(--muted);margin-top:2px;line-height:1.4}

.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{display:none;border-top:1px solid var(--line);background:#fff;padding:14px 0 20px}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:13px 22px;font-weight:600;border-bottom:1px solid var(--line)}
.m-toggle{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:0;border-bottom:1px solid var(--line);color:inherit;
  padding:13px 22px;font-weight:600;font-size:1rem;cursor:pointer;text-align:left;
}
.m-toggle .chev{transition:transform .2s ease;color:var(--green-d);flex-shrink:0}
.m-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.m-sub-liste{display:none;background:var(--sand)}
.m-sub-liste.open{display:block}
.mobile-nav .m-sub{padding-left:34px;font-weight:500}

/* ---------- Sticky call bar (mobil) ---------- */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:#fff;border-top:1px solid var(--line);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  gap:9px;box-shadow:0 -6px 20px rgba(28,40,30,.10);
}
.callbar .btn{flex:1;padding:14px 10px;font-size:.95rem}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:var(--dark);color:#fff;overflow:hidden;padding:0;
  /* fylder skærmen under headeren, så næste sektion ikke titter frem */
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:flex-end;              /* indhold i bunden */
}
/* hero-indhold flugter med logoet i headeren */
.hero .wrap{max-width:none}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,34,30,.72) 0%,rgba(34,50,37,.82) 55%,rgba(30,34,30,.94) 100%);
}
/* Alt i hero måles i em ud fra denne ene skalerende værdi, så tekst,
   knapper, chips og afstande vokser og skrumper samlet med vinduet.   */
.hero .hero-inner{
  position:relative;z-index:1;width:100%;
  font-size:clamp(11.5px,1.06vw,23px);
  padding:clamp(45px,6.5vh,85px) var(--gutter) clamp(44px,6.25vh,75px);
}
.hero h1{margin:0 0 .3em;font-size:3.35em;line-height:1.08}
.hero-h1{white-space:nowrap}
.hero .lead{max-width:76ch;font-size:1.06em;line-height:1.6;text-wrap:balance}

/* CTA-blok: bred primærknap over to lige brede telefonknapper */
.hero-cta{margin-top:1.75em;width:100%;max-width:27em}
.hero-cta > .btn{width:100%;padding:.95em 1.6em;font-size:1.05em}
.cta-phones{display:grid;grid-template-columns:1fr 1fr;gap:.55em;margin-top:.55em}
.cta-phones .btn{width:100%;padding:.8em .6em;font-size:.94em;gap:.45em}
.cta-phones .btn svg{width:1em;height:1em}

.trust{
  display:flex;flex-wrap:wrap;gap:.75em;margin-top:1.9em;
  padding-top:1.5em;border-top:1px solid rgba(255,255,255,.18);max-width:46em;
}
.trust li{
  list-style:none;font-size:.86em;font-weight:500;letter-spacing:.3px;
  color:rgba(255,255,255,.74);display:flex;align-items:center;gap:.75em;
}
/* prik som skilletegn, så det læses som oplysninger og ikke som knapper */
.trust li:not(:last-child)::after{
  content:"";width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.34);
}

/* Hero — undersider (kompakt, ikke fuld skærm) */
.hero.sub{min-height:0;display:block}
.hero.sub .wrap{max-width:none}
.hero.sub .hero-inner{padding:64px var(--gutter) 56px}
.hero.sub h1{font-size:clamp(1.9rem,4.4vw,3rem)}
.hero.sub h1{max-width:24ch}
.crumbs{font-size:.86rem;color:rgba(255,255,255,.62);margin-bottom:14px}
.crumbs a:hover{color:#fff}

/* ---------- Proces (trin) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1em}
.proces{background:var(--sand);border-bottom:1px solid var(--line);padding:3.4rem 0}
.proces .wrap{font-size:clamp(13px,min(1.25vw,2.2vh),22px)}
.proces .section-head{margin-bottom:1.7em;max-width:none}
.proces .eyebrow{font-size:.9em}
.proces .section-head h2{font-size:2.5em;line-height:1.1;margin:.35em 0 0}
.step{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5em 1.4em;box-shadow:var(--shadow-sm);position:relative;
}
.step .num{
  width:2.3em;height:2.3em;border-radius:50%;background:var(--dark);color:#fff;
  display:grid;place-items:center;font-family:"Poppins",sans-serif;font-weight:800;
  font-size:1em;margin-bottom:.85em;
}
.step h3{margin-bottom:.4em;font-size:1.18em}
.step p{font-size:1em;line-height:1.55;color:var(--muted);max-width:46ch}

/* ---------- Ydelser ---------- */
/* Skalerer efter både bredde og HØJDE, så hele sektionen kan ses
   uden at scrolle på en almindelig skaerm.                        */
#ydelser .wrap{font-size:clamp(11.5px,min(1.05vw,1.75vh),17px)}
#ydelser .section-head{margin-bottom:1.6em;max-width:none}
#ydelser .eyebrow{font-size:.95em}
#ydelser .section-head h2{margin:.42em 0 .45em;font-size:3em;line-height:1.1}
#ydelser .lead{font-size:1.12em;line-height:1.6;max-width:70ch}

.services{display:grid;grid-template-columns:repeat(2,1fr);gap:1em}
.svc{
  display:flex;flex-direction:column;gap:.5em;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6em 1.55em;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#c9d3c4}
.svc .ico{width:2.4em;height:2.4em;color:var(--green-d)}
.svc .ico svg{width:100%;height:100%}
.svc h3{font-size:1.24em}
.svc p{font-size:1.02em;line-height:1.55;color:var(--muted);flex:1;max-width:48ch}
.svc .more{font-weight:700;font-size:.97em;color:var(--green-d);display:inline-flex;align-items:center;gap:.35em}
.svc:hover .more{gap:10px}

/* ---------- Om os / hvorfor ---------- */
.about{background:var(--dark);color:#fff;padding:2.5rem 0;
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:center}
/* Skalerer efter både bredde og HØJDE, så hele sektionen kan ses
   uden at scrolle på en almindelig skaerm.                        */
.about .wrap{font-size:clamp(12px,min(1.1vw,1.9vh),19px)}
.about-top{display:grid;grid-template-columns:1fr 1.02fr;gap:3em;align-items:center}
.about .eyebrow{font-size:.95em}
.about h2{margin:.42em 0 .3em;font-size:2.85em;line-height:1.1;text-wrap:balance}
.about p{color:rgba(255,255,255,.82);margin-bottom:.9em;font-size:1.12em;line-height:1.6;max-width:78ch;text-wrap:balance}
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:.7em;margin-top:1.5em;padding:0}
.why li{
  list-style:none;display:flex;gap:.7em;align-items:flex-start;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius);padding:.95em 1.15em;
}
.why .check{flex-shrink:0;width:1.35em;height:1.35em;color:#8ecb95;margin-top:.1em}
.why strong{display:block;font-family:"Poppins",sans-serif;font-weight:700;font-size:1.1em;margin-bottom:.15em}
.why span.t{font-size:1em;color:rgba(255,255,255,.74);line-height:1.5}
.about-cta{margin-top:1.3em}
.about-cta .btn{padding:.82em 1.7em;font-size:1.02em}
.about-media{max-width:min(100%,68vh);margin-inline:auto}
.about-media img,.about-media video{border-radius:var(--radius-lg);width:100%;height:auto;object-fit:contain}
.billedtekst{font-size:.88em;color:rgba(255,255,255,.55);margin:.75em 0 0;text-align:center}

.stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.stats li{list-style:none;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:8px 16px;font-size:.86rem;font-weight:600}

/* ---------- Kontakt ---------- */
.contact{background:var(--sand);padding:2.5rem 0;
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:center}
/* Skalerer efter både bredde og HØJDE, så formularen kan ses uden at scrolle */
.contact .wrap{font-size:clamp(12px,min(1.25vw,2.05vh),20px)}
.contact-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:2.6em;align-items:stretch}
.contact-side{display:flex;flex-direction:column;justify-content:center;gap:1.7em}
.cs-phones{margin:0}
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.9em 1.85em;box-shadow:var(--shadow);
}
.field{margin-bottom:.85em}
.field label{display:block;font-size:.88em;font-weight:700;margin-bottom:.4em}
.field input,.field select,.field textarea{
  width:100%;padding:.72em .9em;border:1px solid var(--line);border-radius:10px;
  background:#fff;font-size:1em;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(79,157,87,.16);
}
.field textarea{min-height:5.4em;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.8em}
.form-card .btn{width:100%;margin-top:.3em;padding:.9em 1.6em;font-size:1.05em}
.formnote{font-size:.82em;color:var(--muted);margin-top:.8em;text-align:center}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-msg{display:none;padding:1em 1.1em;border-radius:10px;font-size:.95em;margin-bottom:1em}
.form-msg.ok{display:block;background:#e7f4e8;border:1px solid #b8ddbc;color:#25612c}
.form-msg.err{display:block;background:#fdecea;border:1px solid #f5c2bd;color:#8c2f24}

.contact-side .eyebrow{font-size:.9em}
.contact-side h2{margin:.35em 0 .35em;font-size:2.6em;line-height:1.1;text-wrap:balance}
.contact-side .lead{font-size:1.08em;line-height:1.6;margin-bottom:0;max-width:42ch}
.phonecard{
  display:flex;align-items:center;gap:.85em;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.05em 1.1em;margin-bottom:.65em;
  transition:transform .15s,box-shadow .15s;
}
.phonecard:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.phonecard .pico{width:2.5em;height:2.5em;border-radius:50%;background:var(--dark);color:#fff;
  display:grid;place-items:center;flex-shrink:0}
.phonecard .pico svg{width:1.15em;height:1.15em}
.phonecard > span:last-child{display:flex;flex-direction:column;gap:.15em}
.phonecard .who{font-family:"Poppins",sans-serif;font-weight:700;font-size:1.02em}
.phonecard .num{font-size:.96em;color:var(--muted)}
.addr{margin-top:0;font-size:1em;color:var(--muted);line-height:1.7}
.addr strong{color:var(--ink);display:block;font-family:"Poppins",sans-serif}

/* ---------- Indhold på undersider ---------- */
.prose{max-width:70ch}
.prose h2{font-family:"Poppins",sans-serif;font-weight:800;font-size:1.6rem;letter-spacing:-.4px;
  margin:44px 0 14px;line-height:1.2}
.prose h2:first-child{margin-top:0}
.prose h3{margin:30px 0 10px}
.prose p{margin-bottom:16px;color:var(--muted)}
.prose ul{margin:0 0 20px 0;padding:0}
.prose ul li{list-style:none;position:relative;padding-left:30px;margin-bottom:11px;color:var(--muted)}
.prose ul li::before{
  content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;
  border-radius:50%;background:var(--green);
}
.prose strong{color:var(--ink)}

.split{display:grid;grid-template-columns:1.4fr .6fr;gap:52px;align-items:start}
.aside-card{
  position:sticky;top:calc(var(--header-h) + 24px);
  background:var(--dark);color:#fff;border-radius:var(--radius-lg);padding:30px 26px;
}
.aside-card h3{color:#fff;margin-bottom:10px}
.aside-card p{font-size:.95rem;color:rgba(255,255,255,.78);margin-bottom:20px}
.aside-card .btn{width:100%;margin-bottom:10px}
.aside-card .a-phone{display:block;text-align:center;font-size:.93rem;color:rgba(255,255,255,.8);
  padding:8px 0;font-weight:600}
.aside-card .a-phone:hover{color:#fff}

/* FAQ */
.faq-sektion{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid #cfd8c8;padding:3.4rem 0}
.faq-sektion .wrap{font-size:clamp(13px,min(1.2vw,2.1vh),21px)}
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:3em;align-items:start}
.faq-grid .eyebrow{font-size:.9em}
.faq-grid h2{margin:.35em 0 .4em;font-size:2.4em;line-height:1.12}
.faq-grid .lead{margin-bottom:1.4em;font-size:1em;line-height:1.6}
.faq-grid > div:first-child{position:sticky;top:calc(var(--header-h) + 28px)}
.faq{border-top:1px solid #d5dccf}
.faq details{border-bottom:1px solid #d5dccf}
.faq summary{
  cursor:pointer;list-style:none;padding:1.05em 2.2em 1.05em 0;position:relative;
  font-family:"Poppins",sans-serif;font-weight:700;font-size:1.05em;transition:color .15s;
}
.faq summary:hover{color:var(--green-d)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.3rem;top:.85rem;font-size:1.5rem;font-weight:400;
  color:var(--green-d);transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{color:var(--green-d)}
.faq details p{padding:0 2.2em 1.25em 0;color:var(--muted);font-size:1em;line-height:1.6}

/* Andre ydelser */
.andre{background:#fff;border-top:1px solid var(--line)}
.andre-grid{grid-template-columns:repeat(3,1fr)}
.andre .section-head{margin-bottom:2rem}
.andre .svc{background:var(--light)}

/* Indhold paa undersider */
.indhold{background:#fff}



/* ---------- Ydelsesside: intro ---------- */
.side-intro{
  background:var(--dark);color:#fff;padding:1.5rem 0;
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:center;
}
/* skalerer efter både bredde og højde, så sektionen fylder præcis én skærm */
.side-intro .wrap{font-size:clamp(15px,min(1.85vw,3vh),28px)}
.intro-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:3em;align-items:center}
.intro-tekst .crumbs{color:#fff;margin-bottom:.7em;font-size:.85em}
.intro-tekst .crumbs a:hover{color:#8ecb95}
.intro-tekst h1{font-size:2.6em;line-height:1.1;margin:0 0 .25em;text-wrap:balance}
.intro-tekst .lead{
  font-size:1.12em;line-height:1.6;color:#fff;
  font-weight:500;margin-bottom:.9em;max-width:none;
}
.intro-tekst p{color:#fff;margin-bottom:.7em;max-width:none;font-size:1em;line-height:1.6}
.intro-h2{
  font-family:"Poppins",sans-serif;font-weight:700;font-size:1.15em;color:#fff;
  letter-spacing:-.2px;margin:1.25em 0 .5em;
}
.intro-tekst ul{margin:0 0 .9em;padding:0}
.intro-liste{display:grid;grid-template-columns:1fr 1fr;gap:.1em 1.6em}
.intro-tekst ul li{
  list-style:none;position:relative;padding-left:1.6em;margin-bottom:.42em;
  color:#fff;font-size:1em;line-height:1.5;
}
.intro-tekst ul li::before{
  content:"";position:absolute;left:.25em;top:.62em;width:.42em;height:.42em;
  border-radius:50%;background:#8ecb95;
}
.intro-tekst strong{color:#fff}
.intro-cta{display:flex;flex-wrap:wrap;gap:.6em;margin-top:1.25em}
.intro-cta .btn{padding:.85em 1.6em;font-size:1.02em}
.intro-media{max-width:min(100%,72vh);margin-inline:auto}
.intro-media img{width:100%;height:auto;border-radius:var(--radius-lg);display:block;
  box-shadow:0 18px 40px rgba(0,0,0,.28)}

/* ---------- Om os ---------- */
.om-intro{
  background:#fff;color:var(--ink);padding:1.5rem 0;
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:center;
}
.om-intro .wrap{font-size:clamp(15px,min(1.75vw,2.95vh),28px)}
.om-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:2.8em;align-items:center}
.om-tekst .crumbs{color:var(--muted);font-size:.82em;margin-bottom:.9em}
.om-tekst .crumbs a:hover{color:var(--ink)}
.om-tekst .eyebrow{font-size:.85em;margin-bottom:.5em}
.om-tekst h1{font-size:2.3em;line-height:1.1;margin:0 0 .3em}
.om-tekst .lead{font-size:1.12em;line-height:1.6;color:var(--ink);font-weight:500;margin-bottom:.9em;max-width:none}
.om-tekst p{color:var(--muted);margin-bottom:.7em;font-size:1em;line-height:1.6;max-width:none}
.om-h2{
  font-family:"Poppins",sans-serif;font-weight:700;font-size:1.15em;color:var(--ink);
  letter-spacing:-.2px;margin:1.25em 0 .5em;
}
.om-cta{display:flex;flex-wrap:wrap;gap:.6em;margin-top:1.25em}
.om-cta .btn{padding:.85em 1.6em;font-size:1.02em}
.om-media{margin:0;max-width:100%;margin-inline:auto}
.om-media img{
  width:100%;height:auto;max-height:56vh;object-fit:cover;border-radius:var(--radius-lg);display:block;
  box-shadow:0 14px 34px rgba(28,40,30,.16);
}
.om-media figcaption{font-size:.82em;color:var(--muted);margin-top:.8em;text-align:center}

.vaerdier{
  background:var(--light);color:var(--ink);padding:1.5rem 0;
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:center;
}
.vaerdier .wrap{font-size:clamp(14px,min(1.55vw,2.7vh),26px)}
.vaerdier .section-head{margin-bottom:1.5em;max-width:none}
.vaerdier .eyebrow{font-size:.9em}
.vaerdier .section-head h2{font-size:2.2em;line-height:1.1;margin:.3em 0 0}
.vaerdier .why{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1em;margin:0;padding:0;font-size:1em;
}
.vaerdier .why li{
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  padding:1.9em 1.7em;gap:.9em;
}
.vaerdier .why strong{color:var(--ink);font-size:1.12em;margin-bottom:.15em}
.vaerdier .why span.t{color:var(--muted);font-size:1em;line-height:1.5}
.vaerdier .why .check{width:1.35em;height:1.35em;color:var(--green-d)}

.fakta-liste{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2em;padding:0;margin-top:2.2em}
.fakta-liste li{list-style:none;text-align:center}
.fakta-liste strong{
  display:block;font-family:"Poppins",sans-serif;font-weight:800;letter-spacing:-.5px;
  font-size:2.3em;color:var(--dark);line-height:1.1;
}
.fakta-liste span{display:block;font-size:.9em;color:var(--muted);margin-top:.25em}


/* ---------- Vores projekter ---------- */
.proj-intro{background:var(--dark);color:#fff;padding:1.3rem 0 1.2rem}
.proj-intro .crumbs{color:rgba(255,255,255,.55);font-size:.84rem;margin-bottom:.6rem}
.proj-intro .crumbs a:hover{color:#8ecb95}
.proj-intro h1{font-size:clamp(1.9rem,3.1vw,2.5rem);margin:0 0 .3rem}
.proj-intro .lead{color:rgba(255,255,255,.82);max-width:none}

.projekter{background:#fff;padding:2.2rem 0}
/* Videoerne fordeles med praecis lige stor afstand imellem sig og ud
   til begge kanter. Stoerrelsen foelger baade skaermens hoejde og
   bredde, saa hele striben kan ses uden at scrolle.                  */
.projekter .wrap{padding:0;max-width:none}
.projekt-grid{display:flex;justify-content:space-evenly;align-items:flex-start;gap:0}
.projekt{margin:0;width:clamp(150px,min(36.6svh,20vw),400px)}
.projekt-ramme{
  position:relative;width:100%;padding-top:177.78%;overflow:hidden;
  border-radius:var(--radius);background:var(--dark);box-shadow:var(--shadow-sm);
}
.projekt-ramme video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}

/* ---------- CTA-band ---------- */
.ctaband{background:var(--green);color:#fff;padding:56px 0}
.ctaband .inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.ctaband h2{font-family:"Poppins",sans-serif;font-weight:800;font-size:1.7rem;letter-spacing:-.4px}
.ctaband p{color:rgba(255,255,255,.9);margin-top:6px}
.ctaband-knapper{display:flex;gap:12px;flex-wrap:wrap}
.ctaband .btn{background:#fff;color:var(--dark)}
.ctaband .btn:hover{background:var(--sand)}

/* ---------- Footer ---------- */
footer{background:var(--dark2);color:rgba(255,255,255,.72);padding:56px 0 32px;font-size:.94rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:38px;padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.13)}
.foot-grid > div > p{max-width:46ch}
.foot-grid h4{font-family:"Poppins",sans-serif;font-weight:700;color:#fff;font-size:.95rem;
  margin-bottom:14px;letter-spacing:.2px}
.foot-grid a:hover{color:#fff}
.foot-grid ul{padding:0}
.foot-grid li{list-style:none;margin-bottom:9px}
.foot-logo{height:42px;width:auto;margin-bottom:16px}
.foot-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:22px;font-size:.86rem;color:rgba(255,255,255,.5)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Responsivt ---------- */
@media (max-width:980px){
  .about-top,.contact-grid,.split,.faq-grid,.intro-grid{grid-template-columns:1fr;gap:32px}
  .projekt-grid{flex-wrap:wrap;justify-content:center;gap:1.4rem 1.2rem}
  .projekt{width:calc(50% - .7rem)}

  .vaerdier,.om-intro{min-height:0;display:block}
  .om-grid{grid-template-columns:1fr;gap:1.3rem}
  .om-media{order:-1}
  .intro-media{order:-1}
  .intro-liste{grid-template-columns:1fr}
  .br-bred{display:none}
  .fakta-liste{grid-template-columns:repeat(2,1fr)}
  .vaerdier .why{grid-template-columns:1fr}
  .faq-grid > div:first-child{position:static}
  .andre-grid{grid-template-columns:1fr}
  .contact{min-height:0;display:block}
  /* paa telefon: overskrift over formularen, numre og adresse under */
  .contact-grid{display:flex;flex-direction:column;gap:1.5rem}
  .contact-side{display:contents}
  .cs-top{order:-1}
  .cs-phones{order:1;margin:0}
  .addr{order:2}
  .why{grid-template-columns:1fr;gap:12px}
  .aside-card{position:static}
  /* billedteksten ud, og mindre luft mellem billede og tekst */
  .about-media{order:-1}
  .about .billedtekst{display:none}
  .about-top{gap:1.3rem}

  .steps{grid-template-columns:1fr;gap:14px}
}
/* Overskriften må bryde når der ikke er plads til én linje.
   Skriftstørrelsen styres af em-skalaen ovenfor og røres ikke her. */
@media (max-width:1080px){
  .hero-h1{white-space:normal}
}
@media (max-width:820px){
  body{font-size:17px}
  section{padding:3.4rem 0}
  header .wrap{padding:0 20px}
  /* 40px mellemrum fra computer skubbede burgeren ud over kanten */
  .bar{gap:10px}
  nav.main{display:none}
  .burger{display:block;margin-left:.1rem;padding:6px}
  /* De to knapper flyttes op i headeren, saa call-baren i bunden kan udgaa */
  .head-actions{display:flex;gap:.4rem;margin-left:auto}
  .head-actions .btn{padding:9px 12px;font-size:.8rem;gap:5px}
  .head-actions .btn svg{width:14px;height:14px}
  .kun-bred{display:none}
  .kun-smal{display:inline}
  /* Kompakt logo, samme maerke som faviconet */
  .logo-img{display:none}
  .logo-mark{display:block;height:38px;width:auto}
  .callbar{display:none}
  body{padding-bottom:0}
  /* --gutter falder selv til 22px her via clamp; intet at overskrive */
  /* fuld skærm minus header og den faste call-bar i bunden */
  .hero{min-height:calc(100svh - var(--header-h))}
  .hero .hero-inner{padding:56px var(--gutter) 56px}
  .hero-cta{max-width:none}
  /* den groenne knap er lavere, men lige saa bred som de to under */
  .hero-cta > .btn{width:100%;padding:.6em 1.2em;font-size:1em}
  /* overskrift og underrubrik centreret, som resten af hero paa telefon */
  /* Alt centreret paa telefon. Blandet justering er det der faar hero
     til at se tilfaeldig ud, saa naar knap og stribe er centreret,
     foelger overskrift og underrubrik med.                              */
  .hero .hero-inner{text-align:center}
  .services{grid-template-columns:1fr}
  /* projekter paa telefon: stadig to ved siden af hinanden */
  .proj-intro{padding:1.3rem 0 1.2rem}
  .proj-intro h1{font-size:calc((100vw - 2 * var(--gutter)) / 9.5)}
  .projekter{padding:1.8rem 0}
  .projekt p{font-size:.88rem;line-height:1.5;margin-top:.6rem}
  /* kortene stod med 11,5px basis paa telefon. Op i stoerrelse, og
     korttitlen holder paa én linje.                                   */
  #ydelser .wrap{font-size:3.7vw}
  #ydelser .section-head h2{font-size:2.2em}
  #ydelser .section-head{margin-bottom:1.3em}
  .svc{padding:1.25em 1.2em}
  .svc h3{font-size:1.24em;line-height:1.3}
  .svc .ico{width:2em;height:2em}
  .hero .hero-inner{padding:64px var(--gutter) 58px}
  .hero.sub .hero-inner{padding:48px var(--gutter) 44px}

  /* Ydelsessidernes overskrift regnes ud fra den plads der faktisk er,
     saa "Køb af træ på roden" holder paa én linje. De laengere titler
     bryder stadig til to linjer, og det er fint.                       */
  .intro-tekst h1{font-size:calc((100vw - 2 * var(--gutter)) / 11)}

  /* Hele hero maales i vw paa telefon, saa den foelger skaermen.
     Overskriften i vw for at holde paa én linje.                       */
  .hero .hero-inner{font-size:4.2vw;padding:5.5svh var(--gutter) 4svh}
  .hero h1{font-size:7.4vw;line-height:1.12;margin-bottom:.35em}
  .hero .lead{font-size:1em;line-height:1.55}
  .hero-cta{margin-top:1.4em}
  /* de to numre ved siden af hinanden, som paa computer */
  .cta-phones{grid-template-columns:1fr 1fr;gap:.5em;margin-top:.5em}
  .cta-phones .btn{padding:.7em .35em;font-size:.8em;gap:.3em}
  .cta-phones .btn svg{width:.95em;height:.95em}
  /* Tillidsstriben paa én linje, centreret. De to mindst vigtige ud. */
  .trust{flex-wrap:nowrap;justify-content:center;margin-top:1.5em;padding-top:1.2em}
  .trust li:nth-child(n+4){display:none}
  .trust li:nth-child(3)::after{display:none}
  .trust li{font-size:3.1vw;white-space:nowrap;gap:.6em}
  .form-card{padding:26px 22px}
  /* Footeren skaeres ind til benet paa telefon: logo til venstre,
     adresse og CVR til hoejre. Numre og ydelseslinks staar allerede
     i menuen paa hver eneste side.                                    */
  footer{padding:1.9rem 0 1.4rem}
  .foot-grid{grid-template-columns:auto 1fr;gap:14px;align-items:center;padding-bottom:16px}
  .foot-grid > div:nth-child(2){display:none}
  .foot-grid > div > p{display:none}
  .foot-grid h4{display:none}
  .foot-grid li:nth-child(1),
  .foot-grid li:nth-child(2),
  .foot-grid li:last-child{display:none}
  .foot-grid > div:last-child{text-align:right}
  .foot-grid li{margin-bottom:3px;font-size:.85rem}
  .foot-logo{height:30px;margin-bottom:0}
  .foot-bottom span:last-child{display:none}
  .foot-bottom{padding-top:14px}

  /* Om os paa telefon: overskrift paa én linje, mindre luft i toppen */
  .om-intro{padding:.9rem 0 1.8rem}
  .om-intro .wrap{font-size:4.2vw}
  /* Overskriften regnes ud fra den plads der faktisk er, ikke ud fra
     skaermbredden, saa gutteren ikke aeder linjen. 14 svarer til
     20 tegn med god margen paa bogstavbredden.                        */
  .om-tekst h1{font-size:calc((100vw - 2 * var(--gutter)) / 14);margin-bottom:.25em}
  .om-tekst .crumbs{margin-bottom:.6em}
  .om-tekst .lead{margin-bottom:.7em}
  .om-media img{max-height:30svh}
  .om-media figcaption{font-size:.78em;margin-top:.55em}
  .field-row{grid-template-columns:1fr}
  .ctaband{padding:2.2rem 0}
  .ctaband .inner{flex-direction:column;align-items:flex-start;gap:.9rem}
  /* overskrift ned og underrubrik ned, saa de to staar i forhold til
     hinanden og underrubrikken holder paa én linje                    */
  .ctaband h2{font-size:1.35rem}
  .ctaband p{font-size:.8rem;margin-top:4px}
  /* de to knapper ved siden af hinanden, saa baandet fylder mindre */
  .ctaband-knapper{width:100%;flex-wrap:nowrap;gap:.6rem}
  .ctaband-knapper .btn{flex:1;padding:.8em .5em;font-size:.8rem}
}

/* Lave telefoner, fx iPhone SE. Strammer hero saa den stadig kan
   ses uden at scrolle. Roerer intet paa stoerre skaerme.            */
@media (max-width:820px) and (max-height:640px){
  .hero .hero-inner{font-size:3.8vw;padding:3svh var(--gutter) 2.5svh}
  .hero h1{font-size:6.8vw}
  .hero-cta{margin-top:1.1em}
  .trust{margin-top:1em;padding-top:.9em}
}