/*
  Næring og nærvær – redesign (2026)
  Retning: varm nordisk ro + tydelig booking.
*/

:root{
  /* Palette: Næring & Nærvær (warm rosa/fersken) */
  --bg:#F9E6E6;
  --surface:#FFFFFF;
  --surface-2:#FCE1D1;

  --ink:#7B4A50;
  --subtle:#8D5A61;
  --muted:#9D95A7;

  /* CTA / brand */
  --brand:#E2B7B0;
  --brand-dark:#D8A8A1;
  --brand-ink:#7B4A50;

  /* Supporting accent (peach) */
  --accent:#FCE1D1;
  --accent-dark:#F6D1BF;
  --accent-ink:#7B4A50;

  --ring: rgba(123,74,80,0.35);
  --line:#E6D9E6;
  --card:#FFFFFF;

  --shadow: 0 22px 60px rgba(123,74,80,0.10);
  --radius: 18px;

  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-serif: "Fraunces", ui-serif, Georgia, serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: var(--font-sans);
  color:var(--ink);
  background:
    radial-gradient(1200px 680px at 10% -10%, rgba(226,183,176,0.34), transparent 60%),
    radial-gradient(1000px 620px at 110% 0%, rgba(252,225,209,0.42), transparent 55%),
    
    var(--bg);
  line-height:1.65;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--ink); text-decoration:underline; text-underline-offset:2px}
.container{width:min(1100px, 92%); margin-inline:auto}

/* Skip link (tastatur/tilgængelighed) */
.skip-link{position:absolute; left:-9999px; top:12px; z-index:1000; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; color:var(--ink); text-decoration:none}
.skip-link:focus{left:12px; outline:2px solid var(--ring)}

header.site{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(10px); background:rgba(249,230,230,.86); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px}
.brand{display:flex; gap:12px; align-items:center; text-decoration:none; min-width:240px}
.brand img{width:56px; height:56px; border-radius:14px; background:var(--surface); border:1px solid var(--line)}
.brand-text{display:flex; flex-direction:column; justify-content:center}
.brand-title{font-family:var(--font-serif); font-size:22px; font-weight:650; line-height:1.05; letter-spacing:-0.02em}
.brand-tagline{margin-top:3px; font-size:13px; font-weight:520; line-height:1.25; color:var(--subtle); max-width:40ch}

.menu{display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.menu a{text-decoration:none; color:var(--ink); padding:10px 12px; border-radius:999px; border:1px solid transparent}
.menu a:hover{background:rgba(226,183,176,.18); border-color:rgba(123,74,80,.18)}
.menu a[aria-current="page"]{background:rgba(226,183,176,.26); border-color:rgba(123,74,80,.22)}

.cta{background:linear-gradient(135deg, var(--brand), var(--brand-dark)); color:var(--brand-ink); padding:10px 14px; border-radius:999px; text-decoration:none; border:1px solid rgba(123,74,80,.18); display:inline-flex; align-items:center; justify-content:center; gap:10px}
.cta:hover{filter:brightness(0.97)}
.cta:focus{outline:2px solid var(--ring); outline-offset:2px}
.cta.secondary{background:rgba(226,183,176,.14); color:var(--ink); border-color:rgba(123,74,80,.18)}
.cta.accent{background:linear-gradient(135deg, var(--brand), var(--brand-dark)); color:var(--brand-ink)}

/* Hamburger */
.hamburger{display:none; font-size:22px; background:rgba(255,255,255,.55); border:1px solid var(--line); padding:10px 12px; border-radius:999px}
.hamburger:focus{outline:2px solid var(--ring); outline-offset:2px}

/* Mobile menu */
.mobile{display:none; padding:12px 0}
.mobile[hidden]{display:none !important}
.mobile a{display:block; padding:12px 8px; text-decoration:none; color:var(--ink); border-radius:12px}
.mobile a:hover{background:rgba(226,183,176,.18)}

.backdrop{position:fixed; inset:0; background:rgba(123,74,80,.22); backdrop-filter:blur(4px); z-index:45}
.backdrop[hidden]{display:none !important}

/* Hero */
.hero{position:relative; isolation:isolate}
.hero::before{content:""; position:absolute; inset:-40px -20px auto -20px; height:340px; background:radial-gradient(320px 220px at 10% 40%, rgba(226,183,176,.34), transparent 68%), radial-gradient(420px 260px at 80% 10%, rgba(230,217,230,.55), transparent 72%); pointer-events:none; z-index:-1}
.hero-inner{display:grid; gap:24px; grid-template-columns:1.25fr 1fr; align-items:start; padding:56px 0 22px}
.badge{display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.60); border:1px solid var(--line); box-shadow:0 16px 40px rgba(123,74,80,.10); font-weight:650; font-size:13px}
.badge::before{content:""; width:8px; height:8px; border-radius:999px; background:var(--brand); box-shadow:0 12px 24px rgba(123,74,80,.20)}
.hero h1{font-family:var(--font-serif); font-size:clamp(34px, 4.8vw, 56px); line-height:1.02; margin:12px 0 12px; letter-spacing:-0.03em}
.hero p{font-size:clamp(16px, 2vw, 18px); color:var(--subtle); max-width:60ch}
.hero .actions{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}
.hero .note{font-size:13px; color:var(--muted)}
.hero .card{background:rgba(255,255,255,.72); border:1px solid var(--line); border-radius:calc(var(--radius) + 4px); padding:16px; box-shadow:var(--shadow)}
.hero .card .card-image{max-width:none; width:100%; border-radius:16px; margin-top:12px; aspect-ratio:4/5; object-fit:cover}

/* Sections */
section{padding:60px 0}
.section-title{font-family:var(--font-serif); font-size:clamp(26px, 3vw, 34px); margin:0 0 10px; letter-spacing:-0.02em}
.section-lead{color:var(--subtle); margin:0 0 26px; max-width:70ch}

/* Layout */
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3, 1fr)}
.grid.cols-2{grid-template-columns:repeat(2, 1fr)}
.grid.cols-1{grid-template-columns:1fr}
.card{background:rgba(255,255,255,.72); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:0 12px 40px rgba(123,74,80,.08)}
.card h2,.card h3{margin:0 0 10px}
.price{font-weight:800; font-size:20px; letter-spacing:-0.01em}

/* Testimonials */
.quote{background:rgba(252,225,209,.55); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.stars{font-size:18px}

/* Contact */
.contact{display:grid; grid-template-columns:1.1fr 1fr; gap:24px}
form label{display:block; font-weight:700; margin:12px 0 6px; letter-spacing:-0.01em}
input, textarea, select{width:100%; padding:12px; border:1px solid var(--line); border-radius:14px; font:inherit; background:rgba(255,255,255,.86)}
input:focus, textarea:focus, select:focus{outline:2px solid var(--ring); outline-offset:2px; border-color:transparent}
textarea{min-height:120px; resize:vertical}
button[type=submit]{margin-top:12px}

.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.help{color:var(--subtle); font-size:13px; margin-top:6px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Footer */
footer{border-top:1px solid var(--line); padding:34px 0; color:var(--subtle)}

/* Utilities */
.muted{color:var(--muted)}
.pill{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-size:13px; box-shadow:0 16px 40px rgba(123,74,80,.08)}
.stack{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.center{text-align:center}

.kicker{font-weight:750; letter-spacing:.12em; text-transform:uppercase; font-size:12px; color:var(--muted)}
.prose p{max-width:75ch}
.prose ul{max-width:75ch}
.prose li{margin:6px 0}

@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr; padding:40px 0 18px}
  .grid.cols-3{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .menu{display:none}
  .hamburger{display:inline-flex}
  .mobile{display:block}
  .form-row{grid-template-columns:1fr}
}

/* Billed-centrering i .card */
.card-image{display:block; margin:12px auto 0; border-radius:16px; max-width:100%; height:auto; border:1px solid var(--line)}
@supports (max-width: min(520px, 100%)){
  .card-image{max-width:min(520px, 100%)}
}

/* Blog posts: keep images responsive and capped */
.card.prose .card-image{max-width:100%}
@supports (max-width: min(480px, 100%)){
  .card.prose .card-image{max-width:min(480px, 100%)}
}
@supports not (max-width: min(480px, 100%)){
  .card.prose .card-image{width:100%; max-width:480px}
}

/* Reveal */
[data-reveal]{opacity:0; transform:translateY(10px); transition:opacity .7s ease, transform .7s ease}
[data-reveal].is-in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1; transform:none; transition:none}
}