:root { --paper:#f4f1eb; --ink:#191919; --accent:#ff7900; --line:#d6d1c9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #a84b00; outline-offset:5px; }
.skip-link { position:absolute; top:-100px; left:16px; padding:12px; background:white; z-index:10; }
.skip-link:focus { top:16px; }
.site-header { display:flex; gap:28px; align-items:center; justify-content:space-between; padding:14px 5vw; background:#000; color:white; }
.brand { flex-shrink:0; }
.brand img { display:block; width:150px; height:auto; }
nav { display:flex; gap:28px; flex-wrap:wrap; }
nav a,.header-phone { font-size:14px; text-decoration:none; }
nav a:hover { color:var(--accent); }
.header-phone { color:var(--accent); font-weight:bold; }
.hero { display:grid; grid-template-columns:1.2fr 1fr; background:var(--ink); color:var(--paper); }
.hero-copy { padding:80px 5vw; align-self:center; }
.eyebrow { font-size:11px; font-weight:bold; letter-spacing:2px; text-transform:uppercase; line-height:1.6; }
h1 { margin:30px 0; font-size:clamp(46px,5.4vw,88px); line-height:1.02; letter-spacing:-.055em; }
h1 span { color:var(--accent); }
.intro { max-width:480px; font-size:18px; line-height:1.7; margin-bottom:30px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:25px; padding:18px 24px; background:var(--accent); color:#171717; font:700 14px Arial,sans-serif; text-decoration:none; border:0; cursor:pointer; }
.button:hover { background:#ff922f; }
.button:disabled { background:#d2ccc3; color:#49443e; cursor:not-allowed; }
.hero-note { font-size:12px; color:#c6c1b8; margin-top:18px; }
.hero-portrait { margin:0; background:#3c3c3c; }
.hero-portrait img { display:block; width:100%; height:auto; }
.hero-portrait figcaption { display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; padding:18px 25px; font-size:13px; }
.hero-portrait figcaption span { color:#ccc; font-size:11px; }
.section { padding:85px 7vw; scroll-margin-top:25px; }
h2 { font-size:clamp(32px,4vw,60px); line-height:1.08; letter-spacing:-.045em; margin:24px 0 35px; }
h3 { font-size:25px; letter-spacing:-.025em; margin:0 0 10px; }
p { line-height:1.7; }
.service-list { margin-top:45px; }
.service-list article { display:grid; grid-template-columns:70px 1fr; padding:25px 0; border-top:1px solid var(--line); }
.service-list article>span { color:#954000; font-size:13px; padding-top:6px; }
.service-list p { margin:0; max-width:620px; color:#555; }
.projects { background:#e7e2d9; }
.projects>p { max-width:610px; }
.project-empty { border:1px solid #bfb7ab; padding:30px; margin-top:35px; min-height:180px; display:flex; flex-direction:column; justify-content:space-between; }
.project-empty>span { font-size:36px; }
.project-empty p { margin-bottom:0; }
.about,.contact { display:grid; grid-template-columns:1fr 1fr; gap:7vw; }
.about-copy { padding-top:15px; }
.about-copy p:first-child { margin-top:0; }
.signature { font-weight:bold; margin-top:30px; }
.signature span { display:block; font-weight:normal; font-size:12px; }
.contact { background:var(--ink); color:var(--paper); }
.contact-link { display:block; font-size:clamp(24px,3vw,42px); color:var(--accent); text-decoration:none; margin-top:35px; font-weight:bold; }
.contact-email { display:inline-block; margin-top:12px; text-underline-offset:5px; }
form { display:grid; gap:10px; }
label { font-size:13px; margin-top:12px; }
label span { color:#bab5ad; }
input,select,textarea { width:100%; padding:14px; border:1px solid #666; border-radius:0; background:#262626; color:white; font:16px Arial,sans-serif; }
textarea { resize:vertical; }
form .button { margin-top:12px; }
.form-notice { padding:15px; border:1px solid #847a69; color:#ddd5c8; font-size:13px; margin:0 0 10px; }
footer { padding:28px 5vw; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12px; }
@media(max-width:900px) { .header-phone { display:none; } nav { gap:16px; } .hero-copy { padding:50px 5vw; } .about,.contact { gap:40px; } }
@media(max-width:650px) { .site-header { flex-direction:column; gap:16px; padding:16px 5vw 24px; } .brand img { width:135px; } nav { justify-content:center; gap:20px; } nav a { font-size:13px; } .hero,.about,.contact { grid-template-columns:1fr; } .hero-copy { padding:45px 7vw; } .hero-portrait { max-width:100%; } .section { padding:55px 7vw; } .service-list article { grid-template-columns:40px 1fr; } h3 { font-size:22px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
/* Menuen følger med, og topbjælken får mindre luft. */
.site-header { position:sticky; top:0; z-index:100; padding:6px 5vw; }
.brand img { width:112px; }
.section { scroll-margin-top:100px; }
@media(max-width:650px) {
  .site-header { gap:8px; padding:6px 5vw 12px; }
  .brand img { width:95px; }
  .section { scroll-margin-top:125px; }
}
/* Samlet, kompakt forside med et portræt i begrænset størrelse. */
.hero {
  grid-template-columns:minmax(0, 640px) minmax(0, 380px);
  justify-content:center;
  align-items:center;
  gap:48px;
  padding:36px 32px;
}
.hero-copy { padding:0; min-width:0; }
h1 { font-size:64px; margin:22px 0; overflow-wrap:break-word; }
.intro { margin:0 0 24px; }
.hero-note { margin-bottom:0; }
.hero-portrait { width:100%; max-width:380px; justify-self:center; }
.hero-portrait img { width:100%; height:auto; }
.hero-portrait figcaption { padding:14px 16px; }
@media(max-width:1100px) {
  .hero { grid-template-columns:minmax(0, 1fr) minmax(0, 320px); gap:32px; }
  h1 { font-size:52px; }
}
@media(max-width:760px) {
  .hero { grid-template-columns:minmax(0, 1fr); padding:32px 24px; gap:28px; }
  .hero-copy { width:100%; max-width:640px; justify-self:center; }
  h1 { font-size:44px; }
  .hero-portrait { max-width:320px; }
}
/* Ydelsesmenu og undersider */
nav { align-items:center; }
.service-menu { position:relative; }
.service-menu summary { cursor:pointer; font-size:14px; list-style:none; padding:12px 0; }
.service-menu summary::-webkit-details-marker { display:none; }
.service-menu summary::after { content:' +'; color:var(--accent); }
.service-menu[open] summary::after { content:' −'; }
.dropdown { position:absolute; top:100%; left:-18px; width:265px; padding:10px; background:#111; border:1px solid #444; box-shadow:0 12px 25px #0004; }
.dropdown a { display:block; padding:13px 12px; line-height:1.4; }
.dropdown a:hover { background:#282828; }
.service-menu summary:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.nav-contact { border-bottom:1px solid var(--accent); padding-bottom:4px; }
.service-list h3 a { text-decoration:none; display:flex; justify-content:space-between; gap:20px; }
.service-list h3 a:hover { color:#a44b00; }
.service-list h3 a span { font-size:21px; color:#a44b00; }
.text-link { display:inline-block; font-weight:bold; text-underline-offset:6px; margin:12px 0; }
.projects .button { margin-top:25px; }
.process { border-top:1px solid var(--line); }
.process-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.process-grid article { border-top:2px solid var(--accent); padding-top:24px; }
.process-grid article>span { font-size:13px; color:#994400; }
.process-grid h3 { margin-top:20px; }
.service-hero { background:var(--ink); color:var(--paper); }
.service-hero h1 { max-width:900px; }
.service-hero .intro { max-width:720px; }
.breadcrumb { display:inline-block; margin-bottom:25px; font-size:13px; text-underline-offset:5px; }
.service-detail { display:grid; grid-template-columns:1fr 1fr; gap:7vw; }
.service-detail p { max-width:600px; }
@media(max-width:760px) { .process-grid,.service-detail { grid-template-columns:1fr; gap:25px; } }
@media(max-width:650px) { .dropdown { left:-10px; width:min(265px,85vw); } .service-menu summary { font-size:13px; } }

/* Kundeudtalelser nederst på forsiden. */
.testimonials { background:#e7e2d9; }
.testimonials-intro { max-width:620px; }
.testimonial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:32px; }
.testimonial-card { margin:0; padding:28px; background:var(--paper); border-top:3px solid var(--accent); }
.testimonial-card::before { content:'“'; display:block; color:#a44b00; font-size:64px; line-height:1; }
.testimonial-card blockquote { margin:0 0 26px; font-size:18px; line-height:1.7; white-space:pre-line; overflow-wrap:anywhere; }
.testimonial-card figcaption { font-weight:bold; font-size:14px; }
.testimonial-card figcaption span { display:block; margin-top:6px; font-weight:normal; font-size:12px; color:#59544c; }
.testimonials-empty { border-top:1px solid #bfb7ab; padding-top:24px; }
@media(max-width:1000px) { .testimonial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .testimonial-grid { grid-template-columns:1fr; } }

/* Fælles bundsektion med kontakt, værdier og sociale medier. */
.site-footer { display:block; background:#111; color:var(--paper); padding:55px 7vw 24px; font-size:14px; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:42px 70px; max-width:1200px; margin:auto; }
.site-footer h2 { font-size:21px; letter-spacing:-.02em; margin:0 0 22px; line-height:1.3; }
.footer-contact { display:block; width:fit-content; color:var(--accent); font-weight:bold; text-decoration:none; margin:10px 0; overflow-wrap:anywhere; }
.footer-enquiry { display:inline-block; margin-top:16px; text-underline-offset:5px; }
.footer-values { list-style:none; padding:0; margin:0; }
.footer-values li { position:relative; padding-left:25px; margin:12px 0; line-height:1.5; }
.footer-values li::before { content:'✓'; position:absolute; left:0; color:var(--accent); }
.footer-social { grid-column:1 / -1; }
.footer-social>p { max-width:650px; color:#c6c1b8; }
.social-cards { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.social-card { display:flex; align-items:center; gap:16px; padding:22px; border:1px solid #49443e; background:#1d1d1d; text-decoration:none; }
.social-symbol { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; background:var(--accent); color:#111; font-size:34px; font-weight:bold; }
.social-card strong { display:block; font-size:17px; }
.social-card div>span { display:block; margin-top:5px; font-size:12px; color:#c6c1b8; }
.social-pending { margin-left:auto; font-size:11px; color:#c6c1b8; }
.footer-bottom { max-width:1200px; margin:42px auto 0; padding-top:24px; border-top:1px solid #49443e; display:flex; justify-content:space-between; gap:20px; font-size:12px; }
.footer-bottom a { text-underline-offset:5px; }
@media(max-width:760px) { .footer-grid,.social-cards { grid-template-columns:1fr; } .footer-social { grid-column:auto; } .social-card { flex-wrap:wrap; } .footer-bottom { flex-wrap:wrap; } }
.social-card:hover { border-color:var(--accent); background:#26211c; }

/* Lys navigation med tydelige menufelter. */
.site-header { background:#fff; color:var(--ink); padding:0 0 0 5vw; gap:24px; box-shadow:0 3px 14px #00000012; }
.brand { padding:8px 0; }
.brand img { width:112px; background:#000; }
.site-header nav { margin-left:auto; gap:0; align-self:stretch; align-items:stretch; }
.site-header nav>a,.service-menu summary { display:flex; align-items:center; justify-content:center; min-height:90px; padding:18px 24px; border-left:1px solid #e7e3de; font-size:14px; }
.site-header nav>a:hover,.service-menu summary:hover { background:#f2f0ec; color:#994400; }
.site-header nav .nav-contact { background:var(--accent); color:#171717; font-weight:bold; border-bottom:0; padding:18px 35px; }
.site-header nav .nav-contact:hover { background:#ff922f; color:#171717; }
.header-phone { display:none; }
.dropdown { left:0; background:#fff; border:1px solid #e7e3de; color:var(--ink); padding:0; }
.dropdown a { border-bottom:1px solid #eee; }
.dropdown a:hover { background:#f2f0ec; color:#994400; }
.service-menu summary::after { margin-left:8px; }
.service-hero { background:#fff; color:var(--ink); padding-top:42px; padding-bottom:45px; }
.service-hero h1 { font-size:48px; max-width:850px; }
.service-hero .intro { font-size:17px; }
.service-detail { background:#fff; padding-top:25px; padding-bottom:50px; }
.service-detail h2 { font-size:36px; }
@media(max-width:900px) {
  .site-header nav>a,.service-menu summary { padding:16px; }
  .site-header nav .nav-contact { padding:16px 22px; }
}
@media(max-width:650px) {
  .site-header { padding:8px 0 0; gap:4px; }
  .brand { padding:0; }
  .brand img { width:95px; }
  .site-header nav { margin:0; width:100%; justify-content:center; }
  .site-header nav>a,.service-menu summary { min-height:48px; padding:10px 12px; font-size:12px; }
  .site-header nav .nav-contact { padding:10px 14px; }
  .dropdown { width:230px; }
  .service-hero h1 { font-size:38px; }
}

/* Mørkegrå menu; logoets sorte baggrund skjules uden at ændre originalfilen. */
.site-header { background:#303030; color:#f4f1eb; }
.brand img { background:transparent; filter:url(#logo-background); }
.site-header nav>a,.service-menu summary { border-left-color:#484848; }
.site-header nav>a:hover,.service-menu summary:hover { background:#3c3c3c; color:#ff7900; }
.dropdown { background:#303030; color:#f4f1eb; border-color:#484848; }
.dropdown a { border-bottom-color:#484848; }
.dropdown a:hover { background:#3c3c3c; color:#ff7900; }

/* Større læsetekst og mere samlet indhold på brede skærme. */
body { font-size:18px; }
.section { padding:56px max(24px, calc((100% - 1180px) / 2)); }
.eyebrow { font-size:14px; letter-spacing:1.6px; }
.breadcrumb { font-size:17px; margin-bottom:18px; }
.intro,.service-hero .intro { font-size:20px; }
.service-hero h1 { margin:18px 0 22px; }
.service-hero { padding-top:32px; padding-bottom:32px; }
.service-hero .intro { max-width:900px; }
.service-detail { padding-top:30px; padding-bottom:40px; }
.service-list { margin-top:30px; }
.service-list article>span { font-size:16px; }
.hero-note { font-size:15px; }
.button { font-size:16px; }
.site-header nav>a,.service-menu summary { font-size:16px; }
label { font-size:16px; }
.form-notice { font-size:15px; }
.project-empty { min-height:100px; padding:22px; margin-top:24px; flex-direction:row; justify-content:flex-start; align-items:center; gap:22px; }
.project-empty p { margin:0; }
.site-footer { font-size:16px; }
.footer-bottom { font-size:14px; }
.social-card div>span { font-size:14px; }
.social-pending { font-size:14px; }
.testimonial-card figcaption { font-size:16px; }
.testimonial-card figcaption span { font-size:14px; }
@media(max-width:650px) {
  body { font-size:17px; }
  .section { padding:36px 24px; }
  .site-header nav>a,.service-menu summary { font-size:13px; }
  .intro,.service-hero .intro { font-size:18px; }
  .eyebrow { font-size:13px; }
}

/* Sidestarten skal ligge helt øverst, også med den faste menu. */
#top { scroll-margin-top:0; }

/* Hele ydelsesrækken fungerer som ét link. */
.service-list article { position:relative; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.service-list h3 a::after { content:''; position:absolute; inset:0; z-index:1; cursor:pointer; }
.service-list article:hover,.service-list article:focus-within { transform:translateY(-3px); background:#fffaf2; box-shadow:0 8px 22px #00000014; }
.service-list h3 a:focus-visible { outline:none; }
.service-list article:has(a:focus-visible) { outline:3px solid #a84b00; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) {
  .service-list article { transition:none; }
  .service-list article:hover,.service-list article:focus-within { transform:none; }
}

/* Projektbilleder og afsluttende design. */
.gallery-heading { display:flex; justify-content:space-between; gap:36px; align-items:center; margin-bottom:26px; }
.gallery-heading h2 { margin-bottom:12px; }
.gallery-heading>p { max-width:420px; color:#555; }
.project-preview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.project-card { background:var(--paper); text-decoration:none; transition:transform .2s,box-shadow .2s; }
.project-card:hover { transform:translateY(-5px); box-shadow:0 14px 30px #0002; }
.project-card-image { aspect-ratio:4/3; overflow:hidden; }
.project-card img { width:100%; height:100%; object-fit:cover; }
.project-card-copy { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:22px; }
.project-card h3 { font-size:23px; margin:0; }
.project-card-copy>span { color:#a44b00; font-size:25px; }
.project-jumps { margin-top:25px; display:flex; gap:12px; flex-wrap:wrap; }
.project-jumps a { padding:12px 16px; border:1px solid var(--line); font-size:15px; text-decoration:none; }
.project-jumps a:hover { background:#f1e9dc; }
.project-group:nth-of-type(even) { background:#e7e2d9; }
.work-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
.work-photo { margin:0; min-width:0; }
.gallery-link { display:block; position:relative; overflow:hidden; background:#292929; aspect-ratio:4/3; }
.gallery-link img { width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.gallery-link:hover img { transform:scale(1.035); }
.photo-open { position:absolute; bottom:14px; right:14px; background:#191919e6; padding:10px 15px; color:#fff; font-size:14px; }
.work-photo figcaption { font-size:15px; padding:12px 0; color:#49443e; }
.project-cta { background:var(--ink); color:var(--paper); }
#photo-viewer { border:0; padding:50px 20px 20px; background:#191919; color:white; max-width:95vw; max-height:95vh; }
#photo-viewer::backdrop { background:#000d; }
#photo-viewer figure { margin:0; }
#viewer-image { display:block; max-width:85vw; max-height:75vh; width:auto; height:auto; margin:auto; }
#viewer-caption { text-align:center; padding-top:14px; font-size:16px; }
.viewer-close { position:absolute; top:12px; right:15px; background:var(--accent); color:#111; padding:8px 14px; border:0; font-size:16px; cursor:pointer; }
html:has(#photo-viewer[open]) { overflow:hidden; }
.site-header nav>a[aria-current="page"] { box-shadow:inset 0 -3px var(--accent); }
.service-list article { padding-left:14px; padding-right:14px; }
.contact form { background:#242424; padding:28px; border-top:3px solid var(--accent); }
.contact input,.contact select,.contact textarea { background:#f4f1eb; color:#191919; border-color:#d6d1c9; }
.contact textarea::placeholder { color:#68645d; }
.testimonials-empty { max-width:780px; font-size:20px; }
@media(max-width:760px) { .gallery-heading { display:block; } .project-preview { grid-template-columns:1fr; } .project-card { display:grid; grid-template-columns:1fr 1fr; } .work-gallery { gap:16px; } }
@media(max-width:500px) { .work-gallery { grid-template-columns:1fr; } .project-card { display:block; } .contact form { padding:20px; } .project-jumps a { font-size:14px; } }
@media(prefers-reduced-motion:reduce) { .project-card,.gallery-link img { transition:none; } .project-card:hover,.gallery-link:hover img { transform:none; } }
@media(max-width:650px) {
  .site-header nav { flex-wrap:nowrap; }
  .site-header nav>a,.service-menu summary { font-size:12px; padding:10px 9px; }
  .site-header nav .nav-contact { padding:10px 10px; }
}
.form-trap { display:none; }
.form-status { padding:16px; line-height:1.6; font-size:16px; border:1px solid #888; margin:12px 0 0; }
.form-status[data-state="success"] { background:#183c2a; border-color:#75b18b; color:#fff; }
.form-status[data-state="error"] { background:#4a2622; border-color:#e5a194; color:#fff; }
.form-status[hidden] { display:none; }