/* Homepage layout. The contact form keeps its existing styles below. */
:root{--sp-bg:var(--bg,#fbfaf8);--sp-surface:var(--surface,#fff);--sp-ink:var(--text,#111827);--sp-muted:var(--muted,#5b6473);--sp-border:var(--border,#e6e2da);--sp-fire:var(--accent,#b91c1c);--sp-fire-2:var(--accent-2,#ef4444);--sp-ash:#111827;--sp-shadow-sm:var(--shadow);--sp-shadow-md:var(--shadow-md);--sp-radius:var(--radius,16px);--sp-radius-lg:var(--radius-lg,22px)}
.sp-container{width:min(1320px,100%);margin:0 auto;padding:0 18px}
.sp-section{padding:54px 0}
.sp-section.alt{background:color-mix(in oklab,var(--sp-bg) 92%,#000 8%);border-block:1px solid var(--sp-border)}
/* Main content stays visible with keyboard navigation and without JavaScript. */
.home-page [data-reveal]{opacity:1;transform:none;transition:none}
.sp-home-backdrop{position:relative;isolation:isolate;background:#35352e url('../img/backgroundsolvang.png') center 48%/cover no-repeat}
.sp-home-backdrop:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,18,32,.46),rgba(11,18,32,.25) 46%,rgba(11,18,32,.08))}
.sp-hero{padding:48px 0 24px;text-align:center;color:#fff}
.sp-hero-inner{display:flex;flex-direction:column;align-items:center;max-width:860px;margin:0 auto}
.sp-hero-logo{display:block;width:min(340px,72vw);height:auto;filter:brightness(0) invert(1) drop-shadow(0 2px 14px #0002)}
.sp-hero-brand{margin:0;line-height:1}
#kategorier{padding:24px 0 64px;background:transparent}
@media(min-width:1051px){
  /* Preserve the category row's position; center the logo in the space above it. */
  .sp-home-backdrop{--home-card-offset:calc(340px * 148 / 551 + 96px - clamp(48px,9svh,96px));display:grid;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);height:calc(100svh - var(--headerH,64px));min-height:600px;padding-top:var(--home-card-offset)}
  .sp-hero{display:flex;align-items:center;margin-top:calc(-1 * var(--home-card-offset));padding:0}
  #kategorier{padding:0}
}
.sp-cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.sp-cat{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #ffffffb3;border-radius:24px;background:#fff;color:var(--sp-ink);text-decoration:none;box-shadow:0 12px 32px #0002;transition:transform .22s,box-shadow .22s}
.sp-cat:hover{transform:translateY(-4px);box-shadow:0 20px 40px #0003}
.sp-cat:focus-visible{outline:3px solid #fff;outline-offset:5px;box-shadow:0 0 0 7px var(--sp-fire)}
.sp-cat-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#ece9e4}
.sp-cat-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.sp-cat:hover .sp-cat-media img{transform:scale(1.04)}
.sp-cat-foot{display:flex;align-items:flex-start;justify-content:space-between;flex:1;gap:14px;min-height:132px;padding:24px 22px;background:#fff}
.sp-cat-title{margin:0;font-size:25px;font-weight:800;line-height:1.15;letter-spacing:-.03em}
.sp-cat-sub{margin:10px 0 0;color:var(--sp-muted);font-size:13px;font-weight:450;line-height:1.6}
.sp-cat-arrow{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;margin-top:-1px;border:1px solid var(--sp-border);border-radius:50%;color:var(--sp-ink);transition:background .2s,border-color .2s,color .2s}
.sp-cat:hover .sp-cat-arrow{border-color:var(--sp-fire);background:var(--sp-fire);color:#fff}
.home-support{padding:72px 0 12px;background:var(--bg)}
.home-support-head{display:grid;grid-template-columns:1.1fr 1fr;align-items:end;gap:48px;padding-bottom:32px;border-bottom:1px solid var(--sp-border)}
.home-support h2{max-width:19ch;margin:0;font-size:clamp(30px,3vw,42px);line-height:1.12;letter-spacing:-.04em;text-wrap:balance}
.home-support-lead{max-width:48ch;margin:0 0 2px;color:var(--sp-muted);font-size:16px;line-height:1.7}
.home-support-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:32px}
.home-support-item{position:relative;padding-left:38px}
.home-support-item>svg{position:absolute;top:1px;left:0;color:var(--sp-fire)}
.home-support-item h3{margin:0 0 9px;font-size:18px;font-weight:750;line-height:1.25;letter-spacing:-.02em}
.home-support-item p{max-width:40ch;margin:0;color:var(--sp-muted);font-size:14px;line-height:1.7}
.home-support-item a{display:inline-block;margin-top:10px;color:var(--sp-ink);font-size:13px;font-weight:650;text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.home-support-item a:hover{color:var(--sp-fire)}
@media(max-width:1050px){.sp-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-cat-media{aspect-ratio:16/10}.sp-cat-foot{min-height:120px}.home-support-grid{gap:28px}}
@media(max-width:700px){.sp-hero{padding:39px 0 15px}.sp-hero-logo{width:min(300px,72vw)}#kategorier{padding-bottom:40px}.sp-cat-grid{gap:18px}.home-support{padding:44px 0 0}.home-support-head{grid-template-columns:1fr;gap:18px;padding-bottom:26px}.home-support h2{max-width:21ch}.home-support-grid{grid-template-columns:1fr;gap:28px;margin-top:28px}.home-support-item p{max-width:50ch}}
@media(max-width:540px){.sp-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.sp-cat{border-radius:18px}.sp-cat-media{aspect-ratio:1/1}.sp-cat-foot{min-height:0;padding:12px}.sp-cat-title{font-size:clamp(17px,4.6vw,22px)}.sp-cat-sub{max-width:none;margin-top:6px;font-size:12px;line-height:1.4}.sp-cat-arrow{display:none}}
@media(max-width:700px){
  .sp-home-backdrop{overflow:clip;background-image:none}
  .sp-home-backdrop:before{position:sticky;display:block;inset:auto;top:0;height:100svh;margin-bottom:-100svh;background:linear-gradient(180deg,rgba(11,18,32,.5),rgba(11,18,32,.18)),url('../img/backgroundsolvang.png') 42% center/cover no-repeat}
}
@media(prefers-reduced-motion:reduce){.sp-cat,.sp-cat-media img,.sp-cat-arrow{transition:none}.sp-cat:hover,.sp-cat:hover .sp-cat-media img{transform:none}}

    /* ---------- Kontakt ---------- */
    .sp-contact-heading{
      max-width:640px;
      margin:0 auto 24px;
      text-align:center;
    }
    .sp-contact-heading h2{
      margin:0;
      color:var(--sp-ink);
      font-size:clamp(30px, 4vw, 46px);
      letter-spacing:-.045em;
      line-height:1.02;
    }
    .sp-contact-heading p:last-child{
      margin:10px 0 0;
      color:var(--sp-muted);
      font-size:16px;
    }
    .sp-contact-card{
      position:relative;
      display:grid;
      grid-template-columns:minmax(300px, .78fr) minmax(0, 1.5fr);
      border:1px solid var(--sp-border);
      border-radius:28px;
      background:var(--sp-surface);
      box-shadow:0 22px 60px rgba(15,23,42,.12);
      overflow:hidden;
    }
    .sp-contact-card::before{
      content:"";
      position:absolute;
      inset:0 0 auto;
      z-index:2;
      height:3px;
      background:linear-gradient(90deg, var(--sp-fire), var(--sp-fire-2));
    }
    .sp-contact-aside{
      position:relative;
      isolation:isolate;
      padding:clamp(28px, 4vw, 46px);
      overflow:hidden;
      background:linear-gradient(155deg, #172033 0%, #0b1220 72%, #160d13 100%);
      color:#fff;
    }
    .sp-contact-aside::before{
      content:"";
      position:absolute;
      z-index:-1;
      width:280px;
      height:280px;
      right:-150px;
      bottom:-115px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(239,68,68,.28), transparent 68%);
    }
    .sp-contact-aside .sp-eyebrow{
      margin:0 0 12px;
      color:#fca5a5;
      font-size:11px;
      font-weight:900;
      letter-spacing:.14em;
      text-transform:uppercase;
    }
    .sp-contact-aside h3{
      margin:0;
      max-width:280px;
      font-size:clamp(25px, 3vw, 34px);
      line-height:1.08;
      letter-spacing:-.035em;
    }
    .sp-timeline{
      display:grid;
      gap:0;
      list-style:none;
      padding:0;
      margin:32px 0 0;
    }
    .sp-timeline li{
      display:grid;
      grid-template-columns:34px 1fr;
      gap:14px;
      min-height:92px;
    }
    .sp-timeline-marker{
      position:relative;
      width:32px;
      height:32px;
      display:grid;
      place-items:center;
      border:1px solid rgba(255,255,255,.24);
      border-radius:50%;
      background:rgba(255,255,255,.1);
      color:#fff;
      font-size:12px;
      font-weight:900;
      box-shadow:0 0 0 5px rgba(255,255,255,.035);
    }
    .sp-timeline li:not(:last-child) .sp-timeline-marker::after{
      content:"";
      position:absolute;
      top:37px;
      bottom:-57px;
      left:50%;
      width:1px;
      background:linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.08));
    }
    .sp-timeline b{
      display:block;
      margin:3px 0 5px;
      font-size:15px;
      letter-spacing:-.01em;
    }
    .sp-timeline p{
      margin:0;
      color:rgba(255,255,255,.66);
      font-size:13px;
      line-height:1.5;
    }
    .sp-direct{
      margin-top:20px;
      padding-top:22px;
      border-top:1px solid rgba(255,255,255,.12);
    }
    .sp-direct > span{
      display:block;
      margin-bottom:10px;
      color:rgba(255,255,255,.55);
      font-size:12px;
      font-weight:750;
    }
    .sp-direct-links{ display:grid; gap:7px; }
    .sp-direct-links a{
      display:flex;
      align-items:center;
      gap:9px;
      width:max-content;
      max-width:100%;
      color:#fff;
      font-size:13px;
      font-weight:750;
      text-decoration:none;
    }
    .sp-direct-links a:hover{ color:#fca5a5; }
    .sp-direct-links svg{ flex:0 0 auto; color:#fca5a5; }
    .sp-form-panel{ padding:clamp(26px, 4vw, 46px); }
    .sp-form-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:24px;
      padding-bottom:18px;
      border-bottom:1px solid var(--sp-border);
    }
    .sp-form-head h3{
      margin:0;
      color:var(--sp-ink);
      font-size:24px;
      letter-spacing:-.03em;
    }
    .sp-form-head p{
      margin:0;
      color:var(--sp-muted);
      font-size:12px;
      white-space:nowrap;
    }
    .sp-form{ display:grid; gap:16px; }
    .sp-row{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:16px;
    }
    .sp-field{ display:grid; gap:7px; }
    .sp-field > span{
      color:var(--sp-ink);
      font-size:13px;
      font-weight:800;
      letter-spacing:-.005em;
    }
    .sp-required{ color:var(--sp-fire); }
    .sp-input, .sp-textarea, .sp-select{
      width:100%;
      border:1px solid var(--sp-border);
      border-radius:12px;
      background:#fbfaf8;
      color:var(--sp-ink);
      padding:13px 14px;
      font:500 15px/1.3 system-ui;
      transition:border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
    }
    .sp-input:hover, .sp-textarea:hover, .sp-select:hover{ border-color:#cbd0d8; }
    .sp-input, .sp-select{ height:50px; }
    .sp-textarea{
      min-height:150px;
      resize:vertical;
      line-height:1.55;
      font-weight:450;
    }
    .sp-input:focus,
    .sp-textarea:focus,
    .sp-select:focus{
      outline:none;
      border-color: color-mix(in oklab, var(--sp-fire) 55%, var(--sp-border));
      background:#fff;
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--sp-fire) 18%, transparent);
    }
    .sp-reply{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:12px 14px;
      border:1px solid var(--sp-border);
      border-radius:12px;
      background:#fbfaf8;
    }
    .sp-reply > span{
      color:var(--sp-ink);
      font-size:13px;
      font-weight:800;
    }
    .sp-actions{
      display:flex;
      justify-content:space-between;
      gap:18px;
      align-items:center;
      margin-top:2px;
      padding-top:18px;
      border-top:1px solid var(--sp-border);
    }
    .sp-verification{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:14px;
      border:1px solid var(--sp-border);
      border-radius:12px;
      background:#fbfaf8;
    }
    .sp-verification label{ color:var(--sp-ink); font-size:14px; font-weight:800; }
    .sp-verification p{ margin:5px 0 0; color:var(--sp-muted); font-size:12px; }
    .sp-verification .sp-input{ flex:0 0 90px; width:90px; background:#fff; }
    .sp-form-feedback{ margin:0; padding:14px; border:1px solid var(--sp-border); border-radius:12px; }
    .sp-actions .btn-primary{
      min-width:190px;
      justify-content:center;
      background: var(--sp-fire);
      border-color: color-mix(in oklab, var(--sp-fire) 65%, transparent);
      color:#fff;
      box-shadow: var(--sp-shadow-md);
    }
    .sp-privacy{
      display:flex;
      align-items:flex-start;
      gap:7px;
      margin:0;
      max-width:300px;
      color:var(--sp-muted);
      font-size:12px;
      line-height:1.45;
    }
    .sp-privacy svg{ flex:0 0 auto; margin-top:1px; color:var(--sp-ash); }
    .seg{
      display:inline-grid;
      grid-auto-flow:column;
      gap:0;
      border:1px solid var(--sp-border);
      border-radius:999px;
      background:#fff;
      overflow:hidden;
    }
    .seg input{ position:absolute; opacity:0; width:0; height:0; }
    .seg label{
      padding:8px 12px;
      font-size:13px;
      line-height:1;
      cursor:pointer;
      user-select:none;
      border-right:1px solid var(--sp-border);
      font-weight:800;
      color: var(--sp-ash);
    }
    .seg label:last-of-type{ border-right:0; }
    .seg input:checked + label{
      background: color-mix(in oklab, var(--sp-fire) 14%, transparent);
      color: var(--sp-ink);
    }
    @media (max-width: 920px){
      .sp-contact-card{ grid-template-columns:1fr; }
      .sp-contact-aside{ padding:30px; }
      .sp-timeline{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
      .sp-timeline li{ grid-template-columns:32px 1fr; min-height:auto; }
      .sp-timeline li:not(:last-child) .sp-timeline-marker::after{ display:none; }
      .sp-direct{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
      .sp-direct > span{ margin:0; }
      .sp-direct-links{ display:flex; flex-wrap:wrap; gap:10px 20px; }
    }
    @media (max-width: 680px){
      .sp-contact-heading{ margin-bottom:18px; }
      .sp-contact-card{ border-radius:20px; }
      .sp-contact-aside, .sp-form-panel{ padding:24px 20px; }
      .sp-timeline{ grid-template-columns:1fr; gap:0; margin-top:25px; }
      .sp-timeline li{ min-height:82px; }
      .sp-timeline li:not(:last-child) .sp-timeline-marker::after{ display:block; bottom:-47px; }
      .sp-direct{ display:block; margin-top:10px; }
      .sp-direct > span{ margin-bottom:10px; }
      .sp-direct-links{ display:grid; }
      .sp-row{ grid-template-columns:1fr; }
      .sp-reply{ align-items:flex-start; flex-direction:column; }
      .sp-form-head{ align-items:start; }
      .sp-actions{ align-items:stretch; flex-direction:column-reverse; }
      .sp-actions .btn-primary{ width:100%; }
      .sp-privacy{ max-width:none; }
    }

    #kontakt .modal-overlay{
      position:fixed; inset:0; background:rgba(0,0,0,.42);
      display:grid; place-items:center; z-index:1000;
    }
    #kontakt .modal{
      width:min(560px,92vw);
      background:#fff;
      color:var(--sp-ink);
      border:1px solid var(--sp-border);
      border-radius:16px;
      padding:20px;
      box-shadow: var(--sp-shadow-md);
    }
    #kontakt [hidden]{ display:none !important; }
    #kontakt .error{
      border-color:#ef4444 !important;
      box-shadow: 0 0 0 3px color-mix(in oklab, #ef4444 25%, transparent);
    }