@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/hanken-grotesk.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/hanken-grotesk-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}:root{--accent:#D89628;--accent-dark:#a2701e;--accent-soft:#f9efdf;--font-head:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;--font-body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif}

/* ---- klientens eget designlag: <klientmappe>/theme.css ---- */
/* Alstrup Byg ApS: klientens eget designlag.
   Laegges efter motorens style.css og den genererede :root, saa alt her vinder.

   Formsprog hentet fra logoet: hvid flade, sort skrift, guld som accent, og
   den tynde guldstreg under ordmaerket. De tre skraastreger i maerket bruges
   som gennemgaaende detalje foran hver overskrift. Skarpe hjoerner, som
   det gamle site havde dem.

   🔴 Guld (#D89628) paa hvid er kun 2,6:1 i kontrast. Derfor:
     - knapper i guld har SORT tekst (8,1:1)
     - links og smaa guldtekster paa hvid bruger --accent-dark #8F5D13 (6,1:1)
     - guld som tekstfarve bruges kun paa sort baggrund (6,9:1) */

:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f5f4f1;
  --ink:#1b1b1b;
  --ink-soft:#3d3d3d;
  --muted:#6a6a6a;
  --line:#e6e3dd;
  --dark:#1b1b1b;
  --dark-2:#262626;
  --accent-dark:#8f5d13;
  --accent-soft:#f6ead6;
  --star:#d89628;
  --radius:2px;
  --radius-sm:2px;
  --shadow:0 18px 50px rgba(27,27,27,.12);
  --shadow-sm:0 4px 18px rgba(27,27,27,.07);
  --maxw:1220px;
}

body{font-size:17.5px;letter-spacing:-.003em}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.025em}
h1{font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.02;font-weight:750}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.08}
h3{font-size:1.24rem;letter-spacing:-.015em}
section{padding:96px 0}
a{color:var(--accent-dark)}

/* Overskriftsmaerket: tre skraastreger som i logoet */
.eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--accent-dark);
  font-weight:700;letter-spacing:.2em;font-size:.76rem}
.eyebrow::before{content:"";width:22px;height:14px;flex:none;
  background:linear-gradient(115deg,transparent 0 30%,var(--accent) 30% 44%,transparent 44% 56%,var(--accent) 56% 70%,transparent 70%)}
.shead{margin-bottom:52px}
.shead h2{margin-top:14px}
.shead .lead{font-size:1.14rem;color:var(--ink-soft);max-width:640px}
.shead:not(.left) .lead{margin-left:auto;margin-right:auto}

/* ---------- Knapper: kantede, sort tekst paa guld ---------- */
.btn{border-radius:var(--radius-sm);min-height:52px;padding:15px 26px;font-weight:700;letter-spacing:.01em}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn-primary:hover{background:#c4861c;border-color:#c4861c;color:var(--ink);transform:none}
.btn-outline-light{border-color:rgba(255,255,255,.55)}
.btn-light:hover{transform:none}
.btn-outline-light:hover{transform:none}

/* ---------- Header ---------- */
.site-header{background:#fff;backdrop-filter:none;border-bottom:1px solid var(--line)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent) 140px,transparent 140px)}
.nav{padding:16px 24px}
.brand-logo{width:220px;height:auto;display:block}
.menu>li>a{font-weight:600;font-size:.95rem;border-radius:0;padding:10px 13px}
.menu>li>a:hover{background:none;color:var(--accent-dark)}
.dropdown{border-radius:0;border-top:2px solid var(--accent);padding:10px;min-width:280px}
.dropdown a{border-radius:0}
.dropdown a:hover{background:var(--surface-2);color:var(--ink)}
.nav-phone{font-weight:700}
.nav-cta .btn{min-height:46px;padding:12px 20px}
@media (max-width:1180px){ .nav-phone{display:none} }
@media (min-width:861px) and (max-width:1100px){
  .brand-logo{width:170px}
  .menu>li>a{font-size:.9rem;padding-left:9px;padding-right:9px}
}
@media (max-width:560px){ .brand-logo{width:168px} }

/* ---------- Hero ---------- */
.hero{background:var(--dark)}
.hero .hero-bg{opacity:.7;filter:saturate(1.05);object-position:50% 78%}
.hero-split .container{padding-top:0;padding-bottom:0}
.hero::after{background:linear-gradient(100deg,rgba(18,18,18,.92) 0%,rgba(18,18,18,.74) 42%,rgba(18,18,18,.25) 100%)}
.hero-split .hero-grid{padding:72px 0 80px;gap:64px;grid-template-columns:1.1fr .9fr}
.hero .eyebrow{color:var(--accent)}
.hero h1{margin:.22em 0 .32em}
.hero p{font-size:1.2rem;color:#ece9e3}
.hero-bullets{gap:12px;margin:24px 0 30px}
.hero-bullets li{font-weight:500;color:#fff}
.hero-bullets .chk{fill:var(--accent)}
.hero .btn-row .btn-primary{color:var(--ink)}

/* Formularen: hvidt kort, guldstreg i toppen som under logoet */
.lead-card{border:0;border-top:3px solid var(--accent);border-radius:0;padding:28px 26px 22px;
  box-shadow:0 30px 70px rgba(0,0,0,.35)}
.lead-card h3{font-size:1.3rem;letter-spacing:-.02em}
.lead-card input,.lead-card select,.lead-card textarea{border-radius:0;background:#fafaf8;padding:12px 13px}
.lead-card input:focus,.lead-card select:focus,.lead-card textarea:focus{border-color:var(--ink);background:#fff}
.lead-card .btn-primary{width:100%;justify-content:center}
.hero .lead-card p,.lead-card .lc-sub,.lead-card .lead-note{color:var(--muted)}

/* ---------- Anmeldelser: lige under heroen ---------- */
.hero + section.bg-soft,
.breadcrumbs + .hero + section.bg-soft{background:#fff;padding:72px 0 80px;border-bottom:1px solid var(--line)}
.reviews{grid-template-columns:repeat(2,1fr);gap:28px 56px;max-width:1040px;margin:0 auto}
.review{border:0;border-left:3px solid var(--accent);border-radius:0;padding:2px 0 2px 26px;background:transparent}
.review blockquote{font-size:1.08rem;line-height:1.6;color:var(--ink)}
.review figcaption{font-size:.9rem;color:var(--muted);font-weight:600}
.r-stars .stars,.r-agg .stars{color:var(--accent)}
.r-agg{color:var(--ink-soft);font-weight:500}
@media (max-width:860px){ .reviews{grid-template-columns:1fr;gap:28px} }

/* ---------- Kort ---------- */
.grid{gap:28px}
.card{border-radius:0;border:0;box-shadow:none;background:transparent}
.card:hover{transform:none;box-shadow:none}
.card .card-img{aspect-ratio:4/3}
.card:hover .card-img img{transform:scale(1.04)}
.card .card-body{padding:20px 0 0}
.card h3{font-size:1.3rem}
.card h3 a{color:var(--ink)}
.card h3 a::after{content:"";position:absolute;inset:0}
.card{position:relative}
.card p{color:var(--ink-soft)}
.card .more{color:var(--ink);font-weight:700;display:inline-flex;align-items:center;gap:10px;
  border-bottom:2px solid var(--accent);align-self:flex-start;padding-bottom:3px}
.flere{margin:44px 0 0;font-size:1.05rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:26px}
.flere a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--accent)}
.flere a:hover{text-decoration:none;color:var(--accent-dark)}

/* ---------- Split og billeder ---------- */
.split{gap:72px}
.media{border-radius:0;box-shadow:none}
.split .media img{border-radius:0;aspect-ratio:4/3;object-fit:cover;width:100%}
.split .txt .eyebrow{margin-bottom:14px}
.split .txt h2{margin-top:0}
.txt-link{color:var(--ink);font-weight:700;border-bottom:2px solid var(--accent);padding-bottom:3px}
.txt-link:hover{text-decoration:none;color:var(--accent-dark)}
.bg-soft{background:var(--surface-2)}

/* Billedgalleri */
.foto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.foto{margin:0;background:transparent;overflow:hidden}
.foto img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s}
.foto:hover img{transform:scale(1.03)}
.foto figcaption{font-size:.9rem;color:var(--ink-soft);padding:12px 0 0;border-top:0}
@media (max-width:860px){ .foto-grid{grid-template-columns:1fr 1fr;gap:12px} }
@media (max-width:420px){ .foto-grid{grid-template-columns:1fr} }

/* ---------- Trin ---------- */
.steps{gap:0;padding:0;margin:0;border-top:1px solid var(--line)}
.steps li{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:22px 0;background:transparent;gap:22px}
.steps li::before{border-radius:0;background:var(--ink);color:var(--accent);width:42px;height:42px;font-size:1rem}
.steps li h3{margin:6px 0 4px}
.steps li p{margin:0;color:var(--ink-soft)}

/* ---------- Sort sektion ---------- */
.section-dark{background:var(--dark)}
.section-dark .eyebrow{color:var(--accent)}
.section-dark p{color:#d6d2ca}
.section-dark .txt-link{color:#fff}

/* ---------- Omraader ---------- */
.area-chip{border-radius:0;background:#fff}
.area-chip.is-home{background:var(--ink);border-color:var(--ink);color:#fff}
.area-chip.is-plain{color:var(--ink-soft);background:#fff}

/* ---------- FAQ ---------- */
.faq-item{border-radius:0;border-left:0;border-right:0;border-top:0;margin:0;background:transparent}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-q{padding:22px 0}
.faq-q .pm{border-radius:0;background:transparent;color:var(--accent-dark);font-weight:400}
.faq-a{padding:0}

/* ---------- CTA ---------- */
.cta-dark{border-radius:0;text-align:left;padding:64px;position:relative;overflow:hidden}
.cta-dark::before{content:"";position:absolute;left:64px;top:0;width:140px;height:3px;background:var(--accent)}
.cta-dark p{margin-left:0}
.cta-dark .btn-row{justify-content:flex-start}
.cta-dark .btn-primary{color:var(--ink)}
section:has(> .container > .cta-dark[style]) .cta-dark{background:var(--surface-2)!important;color:var(--ink)}
section:has(> .container > .cta-dark[style]) .cta-dark h2{color:var(--ink)}
section:has(> .container > .cta-dark[style]) .cta-dark p{color:var(--ink-soft)}
section:has(> .container > .cta-dark[style]) .btn-light{background:var(--accent);border-color:var(--accent);color:var(--ink)}
section:has(> .container > .cta-dark[style]) .btn-outline-light{color:var(--ink);border-color:var(--ink)}
@media (max-width:860px){ .cta-dark{padding:44px 24px} .cta-dark::before{left:24px} }

/* ---------- Footer ---------- */
.quote-strip{display:none}
.site-footer{background:var(--dark);border-top:3px solid var(--accent)}
.footer-brand .brand-logo{width:240px;margin-bottom:18px}
.site-footer h4{color:var(--accent);font-size:.8rem;letter-spacing:.18em}
.footer-grid{grid-template-columns:1.4fr 1fr 1.2fr}
.social-row a{border-radius:0}
.social-row a:hover{background:var(--accent)}
.footer-map iframe{filter:grayscale(1) contrast(1.05)}
@media (max-width:980px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:680px){ .footer-grid{grid-template-columns:1fr} }

/* Mobil-CTA i bunden: guld med sort tekst */
.mobile-cta a.call{background:var(--accent);color:var(--ink)}

/* Billeder med width/height: hoejden maa ikke vinde over aspect-ratio */
img[width][height]{height:auto}

@media (max-width:860px){
  section{padding:64px 0}
  .hero-split .hero-grid{padding:44px 0 52px;gap:30px;grid-template-columns:1fr}
  .split{gap:36px}
}

/* Telefon: logo, knap og burger kan ikke vaere paa én linje ved 390 px.
   Knappen skjules, fordi den faste bjaelke i bunden har baade ring og tilbud. */
@media (max-width:520px){
  .nav-cta .btn{display:none}
  .nav{padding:12px 16px}
  .hero h1{font-size:2.5rem}
  .lead-card{padding:22px 18px 18px}
}