/* HawaniMedia · ydelsessider (2026-10-28), samme sorte tema som resten af siden */
:root{--paper:#0B0C0D;--panel:#141618;--white:#1B1D20;--ink:#F2F3F1;--graphite:#9AA1A7;--hair:#2A2E33;--blue-d:#1F6F8B;--coral:#D15248;--yellow:#E3B341;
  --display:"Archivo","Arial Narrow",Arial,sans-serif;--sans:"IBM Plex Sans",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(16px,4vw,48px);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);overflow-x:hidden}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--blue-d);outline-offset:3px}
::selection{background:#1F6F8B;color:#fff}
img,video{display:block;max-width:100%}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:10}
.skip:focus{left:8px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gut)}
.lab{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.lab b{color:var(--ink);font-weight:500}

/* topbjælke */
.nav{position:sticky;top:0;z-index:5;background:rgba(11,12,13,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.nav .wrap{height:64px;display:flex;align-items:center;gap:16px}
.brand{margin-right:auto;display:flex}
.brand img{height:30px;width:auto}
.links{display:flex;gap:4px}
.links a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:9px 12px;border:1px solid transparent}
.links a:hover{border-color:var(--hair)}
@media (max-width:640px){.links{display:none}.brand img{height:26px}}
.lang{display:inline-flex;align-items:center;border:1px solid var(--hair);border-radius:999px;padding:2px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;line-height:1;flex:0 0 auto}
.lang b,.lang a{padding:7px 10px;border-radius:999px;text-decoration:none;color:var(--graphite);font-weight:500}
.lang b{background:var(--ink);color:var(--paper)}
.lang a:hover{color:var(--ink)}

/* hoved */
.crumbs{display:flex;gap:8px;padding-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.head{padding-block:clamp(22px,4vw,48px) clamp(22px,3vw,36px)}
h1{margin:12px 0 0;font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:-.01em;
  font-size:clamp(32px,6.4vw,96px);font-variation-settings:"wdth" 125,"wght" 900;text-wrap:balance;overflow-wrap:break-word;hyphens:manual;max-width:16ch}
@media (max-width:640px){h1{font-size:clamp(28px,8.4vw,48px);font-variation-settings:"wdth" 100,"wght" 900;max-width:none}}
.lead{max-width:60ch;margin:22px 0 0;font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:#D9DCD8}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  padding:13px 18px;border:1px solid var(--ink);background:var(--ink);color:var(--paper)}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn.ghost:hover{border-color:var(--ink)}

/* film og billeder */
figure{margin:0}
figcaption{display:flex;flex-wrap:wrap;gap:4px 12px;padding:10px 0 0;font-size:14px;color:var(--graphite)}
figcaption b{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:500}
.vid video{width:100%;height:auto;aspect-ratio:16/9;background:#000;object-fit:contain}
.vid.tall video{aspect-ratio:9/16;max-height:78vh;margin-inline:auto;width:auto}
.vid.hero,.pic.hero{margin-bottom:clamp(28px,4vw,56px)}
.vid.hero.tall video{max-height:80vh}
.pic img{width:100%;height:auto;background:var(--panel)}
.pic.hero img{max-height:80vh;object-fit:cover}
.pic a{display:block}

/* tekst */
.body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);border-top:1px solid var(--ink);padding-top:22px}
@media (max-width:900px){.body{grid-template-columns:minmax(0,1fr)}}
h2{margin:0 0 12px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.4vw,32px);line-height:1;font-variation-settings:"wdth" 112,"wght" 800}
.txt p{margin:0 0 12px;color:#D9DCD8}
.txt b{color:var(--ink)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:s}
.steps li{display:grid;gap:2px;border-bottom:1px solid var(--hair);padding-bottom:8px;color:#D9DCD8;font-size:15px}
.steps b{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:500}
.steps b::before{counter-increment:s;content:"0" counter(s) "  ";color:var(--coral)}

section.ex,section.faq,section.book,nav.rel{margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--hair);padding-top:22px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:28px 22px;align-items:start}
.vgrid .vid.tall video{max-height:none;width:100%}
.pgrid{columns:3 260px;column-gap:16px}
.pgrid .pic{break-inside:avoid;margin-bottom:22px}

/* spørgsmål og svar */
details{border-bottom:1px solid var(--hair);max-width:820px}
summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;font-weight:500;font-size:18px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:12px;font-family:var(--mono);font-size:22px;color:var(--graphite)}
details[open] summary::after{content:"–"}
details p{margin:0 0 16px;color:#D9DCD8;max-width:68ch}

.book{background:var(--panel);border:1px solid var(--hair);padding:clamp(22px,4vw,44px)!important;margin-top:clamp(40px,6vw,80px)}
.book h2{font-size:clamp(30px,4.4vw,60px);font-variation-settings:"wdth" 125,"wght" 900;font-weight:900}
.book p{margin:0;color:var(--graphite)}
.svl{display:flex;flex-wrap:wrap;gap:8px}
.svl a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:1px solid var(--hair);padding:11px 14px}
.svl a:hover{border-color:var(--ink)}

/* bund */
.foot{margin-top:clamp(56px,8vw,110px);border-top:1px solid var(--ink);background:var(--panel)}
.foot .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px 48px;padding-block:34px 40px}
@media (max-width:820px){.foot .wrap{grid-template-columns:minmax(0,1fr)}}
.foot p{margin:0;font-size:clamp(18px,2vw,24px);line-height:1.3;max-width:30ch}
.foot img{height:22px;width:auto;margin-top:18px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;align-content:start}
.foot li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--hair);padding-bottom:6px}
.foot li a{text-decoration:none}
.foot .fsv{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 18px;border-top:1px solid var(--hair);padding-top:14px}
.foot .fsv a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--graphite)}
.foot .fsv a:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}