/* Dynamic site – bastema (ärvt från Torrequebrada-designen).
   Färgvariablerna nedan är defaults; sajtens inställningar kan skriva över
   --sea/--sea-deep/--sun/--sand via en :root-injektion i SSR-layouten. */
:root {
  color-scheme: light dark;

  /* BAS-färgerna är de VALDA: temats, eller kundens override. De
     semantiska nedan härleds ur dem och är det CSS:en faktiskt använder.
     Uppdelningen finns för mörkt läge: där måste accenten ljusas upp för
     att synas mot mörk botten, och det går inte att räkna på en variabel
     som refererar sig själv. */
  --sand-base: #f6f1e7;
  --paper-base: #fffdf8;
  --ink-base: #23201b;
  --ink-2-base: #5b544a;
  --sea-base: #1f6f78;
  --sea-deep-base: #12484f;
  --sun-base: #d98a3d;
  --rule-base: #e6ddcd;

  --sand: var(--sand-base);
  --paper: var(--paper-base);
  --ink: var(--ink-base);
  --ink-2: var(--ink-2-base);
  --sea: var(--sea-base);
  --sea-deep: var(--sea-deep-base);
  --sun: var(--sun-base);
  --rule: var(--rule-base);
  /* Skuggan tonas i sajtens mörka färg. Den var hårdkodat turkos och
     låg under knapparna även på en sajt i brunt. */
  --shadow: 0 12px 40px -20px color-mix(in srgb, var(--sea-deep-base) 45%, transparent);
}

/* ---------------------------------------------------------------------
   Mörkt läge.

   Neutralerna byts mot fasta mörka toner — kundens ljusa bakgrundsfärg
   säger ingenting om hur en mörk sajt ska se ut. Accenterna DÄREMOT är
   kundens identitet och ska följa med, men en bränd sienna som fungerar
   mot grädde försvinner mot nästan svart. Därför ljusas de upp med
   color-mix, som behåller kulören men lyfter ljusheten.

   Två väljare, samma värden: media query för den som inte valt något
   (systemets inställning styr), attribut för den som klickat i
   sidhuvudet. :root:not([data-theme="light"]) gör att ett aktivt
   ljus-val vinner över systemets mörka läge.

   Hero-slöjan rörs INTE här. Varje tema uttrycker den i variabler som
   redan vänder (medelhav: color-mix på --sand), så en hårdkodad slöja
   hade kört över temats egen avsikt i stället för att följa den.
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sand: #16130f;
    --paper: #1e1a15;
    --ink: #ece5da;
    --ink-2: #a89e91;
    --rule: #332c24;
    /* Två deklarationer per färg med flit. color-mix mot vitt fungerar
       överallt men drar chroman mot noll — en bränd sienna blir dammig
       beige. oklch(from …) lyfter BARA ljusheten och behåller kulör och
       mättnad, vilket är vad man faktiskt vill: samma färg, läsbar mot
       mörkt. Webbläsare som inte kan relativ färgsyntax hoppar över den
       andra raden och behåller den första. */
    --sea: color-mix(in oklab, var(--sea-base), #fff 40%);
    --sea: oklch(from var(--sea-base) 0.78 c h);
    --sea-deep: color-mix(in oklab, var(--sea-base), #fff 66%);
    --sea-deep: oklch(from var(--sea-base) 0.86 c h);
    --sun: color-mix(in oklab, var(--sun-base), #fff 26%);
    --sun: oklch(from var(--sun-base) 0.82 c h);
    --shadow: 0 14px 44px -22px rgba(0, 0, 0, .8);
  }
}
:root[data-theme="dark"] {
  --sand: #16130f;
  --paper: #1e1a15;
  --ink: #ece5da;
  --ink-2: #a89e91;
  --rule: #332c24;
  --sea: color-mix(in oklab, var(--sea-base), #fff 40%);
  --sea: oklch(from var(--sea-base) 0.78 c h);
  --sea-deep: color-mix(in oklab, var(--sea-base), #fff 66%);
  --sea-deep: oklch(from var(--sea-base) 0.86 c h);
  --sun: color-mix(in oklab, var(--sun-base), #fff 26%);
  --sun: oklch(from var(--sun-base) 0.82 c h);
  --shadow: 0 14px 44px -22px rgba(0, 0, 0, .8);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--sand);
  line-height: 1.6;
}
.wrap { width: min(1100px, 92%); margin: 0 auto; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; letter-spacing: -0.02em; line-height: 1.1; }
a { color: inherit; }

/* Textfärg-klasser (enum – saneraren tillåter endast dessa i rik text) */
.c-sea { color: var(--sea); }
.c-sun { color: var(--sun); }
.c-sea-deep { color: var(--sea-deep); }
.c-ink-2 { color: var(--ink-2); }

/* Masthead */
.masthead {
  position: sticky; top: 0; z-index: 10;
  /* Härledd ur --paper, inte hårdkodad: i mörkt läge blev sidhuvudet
     annars en vit list över en mörk sajt. */
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; padding: .9rem 0; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 600; }
.brand .mark {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--sea); color: var(--paper); font-family: Georgia, serif; font-size: .95rem;
}
.brand .word { font-size: 1.05rem; }
nav a { margin-left: 1.4rem; text-decoration: none; color: var(--ink-2); font-size: .95rem; }
nav a:hover, nav a.active { color: var(--sea); }

/* ---------------------------------------------------------------------
   Mobilmenyn (layout.html.tmpl).

   Bred skärm: behållaren .site-menu ritar ingen egen låda, så menyn och
   språkväxlaren är led i sidhuvudets rad precis som förut, och knappen
   syns inte. Författarens display vinner över webbläsarens
   display:none för en stängd popover.

   Smal skärm: knappen öppnar behållaren som en popover. Det kräver inget
   skript, och Esc och klick utanför stänger den. Allt som hör till den
   står under @supports: en webbläsare utan popover får ingen död knapp,
   utan menyn som en rad under namnet, där den går att nå.

   Brytpunkten ligger så att en stående surfplatta också får knappen. En
   meny på fem sex sidor och en språkväxlare får inte plats bredvid namnet
   där, och radbrytningen var det som fick menyn att krocka med namnet.
   ------------------------------------------------------------------ */
.site-menu { display: contents; color: inherit; }
.menu-toggle { display: none; }

@media (max-width: 56rem) {
  .masthead .wrap { flex-wrap: wrap; gap: .5rem .75rem; padding: .7rem 0; }
  /* Namnet får ta den plats som finns och bryta rad, men aldrig trycka
     knapparna ut över kanten. */
  .brand { flex: 0 1 auto; min-width: 0; margin-right: auto; }
  .brand .word { line-height: 1.2; overflow-wrap: anywhere; }
  /* Reserven utan popover: menyn på en egen rad sist i sidhuvudet, och
     en menypunkt bryts aldrig mitt i. */
  .site-menu { display: block; order: 1; flex-basis: 100%; }
  .site-menu nav { display: flex; flex-wrap: wrap; gap: .15rem 1.1rem; }
  .site-menu nav a { margin-left: 0; white-space: nowrap; }
  .site-menu .langs { margin-top: .4rem; }

  @supports selector(:popover-open) {
    .masthead .wrap { flex-wrap: nowrap; }
    .menu-toggle {
      display: inline-flex; align-items: center; gap: .4rem; flex: none;
      height: 2.25rem; padding: 0 .85rem 0 .7rem;
      border: 1px solid var(--rule); border-radius: 999px;
      background: transparent; color: var(--ink);
      font: inherit; font-size: .9rem; font-weight: 600; line-height: 1;
      cursor: pointer;
      transition: color .15s, border-color .15s;
    }
    .menu-toggle:hover { color: var(--sea); border-color: var(--sea); }
    .menu-toggle:focus-visible {
      outline: none; border-color: var(--sea);
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--sea) 25%, transparent);
    }
    .menu-toggle svg { display: block; flex: none; }
    /* Ikonen visar läget: tre streck när menyn är stängd, ett kryss när
       den är öppen. Namnet är detsamma i båda lägena; läget läses upp som
       expanderat eller komprimerat. */
    .menu-toggle .i-close { display: none; }
    .menu-toggle:has(+ .site-menu:popover-open) .i-menu { display: none; }
    .menu-toggle:has(+ .site-menu:popover-open) .i-close { display: block; }
    .masthead .theme-toggle { flex: none; margin-left: 0; }

    .site-menu:not(:popover-open) { display: none; }
    /* Panelen ligger i webbläsarens översta lager, utanför sidhuvudet,
       och placeras därför med fast position. public.js sätter --menu-top
       till sidhuvudets underkant när menyn öppnas; utan skript gäller
       reserven, som är sidhuvudets höjd med ett namn på en rad. */
    .site-menu:popover-open {
      display: block;
      position: fixed; inset: var(--menu-top, calc(3.65rem + 1px)) 0 auto 0;
      width: auto; height: auto; margin: 0;
      max-height: calc(100dvh - var(--menu-top, calc(3.65rem + 1px)));
      overflow: auto; overscroll-behavior: contain;
      padding: .3rem 4% 1.3rem;
      border: 0; border-bottom: 1px solid var(--rule);
      background: var(--paper); color: var(--ink);
      box-shadow: 0 22px 40px -26px rgba(0, 0, 0, .5);
    }
    .site-menu:popover-open nav { display: block; }
    .site-menu:popover-open nav a {
      display: block; margin: 0; padding: .85rem .1rem; white-space: normal;
      border-bottom: 1px solid var(--rule);
      color: var(--ink); font-size: 1.05rem;
    }
    .site-menu:popover-open nav a:hover,
    .site-menu:popover-open nav a.active { color: var(--sea); }
    .site-menu:popover-open nav a:focus-visible {
      outline: 2px solid var(--sea); outline-offset: -2px; border-radius: 4px;
    }
    /* Språkväxlaren under menyn, med ytor stora nog för ett finger. */
    .site-menu:popover-open .langs { margin: 1rem 0 0; gap: .4rem; flex-wrap: wrap; }
    .site-menu:popover-open .langs a {
      font-size: .85rem; padding: .6rem .85rem;
      border: 1px solid var(--rule);
    }
    .site-menu:popover-open .langs a.active { border-color: var(--sea); }
  }
}

/* Hero.
   Allt härleds ur sajtens egna färger. Slöjan var hårdkodat turkos, så en
   chokladbutik i brunt fick en blågrön hero.

   BAS-färgen --sea-deep-base, inte --sea-deep: den semantiska ljusas upp
   i mörkt läge för att synas som text mot mörk botten, och som slöja
   hade den blivit en ljus yta under vit herotext. Den valda mörka färgen
   bär vit text i båda lägena (promptens färgregler: minst 7:1 mot
   sanden), och täckningen är densamma som den turkosa hade, så kontrasten
   mot vit text är minst lika god som förut. Glöden uppe till höger är
   accenten, något ljusare. */
.hero {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--sea-deep-base) 72%, transparent),
      color-mix(in srgb, var(--sea-deep-base) 55%, transparent)),
    radial-gradient(120% 120% at 80% 0%,
      color-mix(in oklab, var(--sea-base), #fff 12%) 0%,
      var(--sea-deep-base) 60%,
      color-mix(in oklab, var(--sea-deep-base), #000 25%) 100%);
  color: #fff;
  padding: 6rem 0 5rem;
}
/* Foto-hero: valfri bakgrundsbild med tema-styrd gradient-slöja. Bilden
   kommer via --hero-photo (style-attr från SSR, strikt uuid-byggd URL);
   slöjans ton/täthet sätts per tema via variablerna nedan. Klassisk = mörk
   slöja i sajtens mörka färg (vit herotext), ljusa teman overridar med
   ljus slöja. */
:root {
  --hero-veil-top: color-mix(in srgb, var(--sea-deep-base) 58%, transparent);
  --hero-veil-bottom: color-mix(in srgb, var(--sea-deep-base) 88%, transparent);
}
.hero.has-photo {
  background-image:
    linear-gradient(180deg, var(--hero-veil-top), var(--hero-veil-bottom)),
    var(--hero-photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Smal skärm tar thumben (max 1200 px). Heron går kant till kant, så
   fullstorleken behövs på stora skärmar — men en telefon som ritar den
   400 px bred ska inte ladda ned en halv megabyte för det.
   Regeln står EFTER basregeln: --hero-photo-sm sätts av SSR bredvid
   --hero-photo, och saknas den (äldre sajt) faller allt tillbaka på
   basregeln ovan. */
@media (max-width: 48rem) {
  .hero.has-photo {
    background-image:
      linear-gradient(180deg, var(--hero-veil-top), var(--hero-veil-bottom)),
      var(--hero-photo-sm, var(--hero-photo));
  }
}

/* Överraden och ingressen är ljusa toner av sajtens egna färger, inte
   fasta: persika och turkosvitt passade bara standardpaletten. */
.hero .eyebrow {
  text-transform: uppercase; letter-spacing: .22em; font-size: .72rem;
  color: color-mix(in oklab, var(--sun-base) 32%, #fff); margin: 0 0 1rem;
}
.hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin: 0 0 1rem; }
.hero .lede { max-width: 40rem; font-size: 1.15rem; color: color-mix(in srgb, #fff 90%, var(--sea-deep-base)); }
.hero-actions { margin-top: 2rem; display: flex; gap: .8rem; flex-wrap: wrap; }
/* Knappens text är --paper, som vänder med bakgrunden. --sun är en
   mättad mellanton i ljust läge (vit text, se promptens färgregler) men
   ljusas upp i mörkt läge; med fast vit text blev knappen vitt på ljust.
   --paper är nästan vitt i ljust läge och nästan svart i mörkt.
   Spökknappen står på herons mörka slöja i båda lägena och behåller vitt. */
.cta {
  display: inline-block; padding: .8rem 1.5rem; border-radius: 999px;
  background: var(--sun); color: var(--paper); text-decoration: none; font-weight: 600;
  box-shadow: var(--shadow); transition: transform .15s ease;
}
.cta:hover { transform: translateY(-2px); }
.cta.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); box-shadow: none; }

/* Språkväxlare i masthead – diskret pill-rad, ärver temats färger. */
.langs { display: flex; gap: .15rem; align-items: center; }
.langs a {
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-2); text-decoration: none;
  padding: .2rem .45rem; border-radius: 999px; line-height: 1;
}
.langs a:hover { color: var(--sea); background: color-mix(in srgb, var(--sea) 10%, transparent); }
/* --paper och inte vitt: --sea ljusas upp i mörkt läge, och vit text på
   den blev oläslig. */
.langs a.active { color: var(--paper); background: var(--sea); }

/* Logotyp i mastheaden. Ersätter initialrutan när kunden laddat upp
   en: samma yta, men bilden får behålla sina proportioner i stället för
   att beskäras till en kvadrat. object-fit: contain, inte cover — en
   avhuggen logotyp är värre än en liten. */
.brand .mark.logo {
  background: none;
  object-fit: contain;
  width: auto;
  max-width: 7rem;
}

/* Sektioner. Varje block renderas som en egen section — utan justering
   dubbleras avståndet (3+3rem) mellan alla block. Regeln: ett block bär
   sitt eget avstånd NEDÅT, efterföljande block börjar tätt. Rubrikblock
   hör ihop med blocket efter sig: stor luft före rubriken, liten efter. */
.section { padding: 3rem 0; }
.section + .section { padding-top: 0; }
.section.section-heading { padding-bottom: 1.1rem; }
.section-head { max-width: 42rem; }
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 .6rem; color: var(--sea-deep); }
.section-head p { color: var(--ink-2); font-size: 1.05rem; margin: 0; }

/* Rik text */
.prose { max-width: 46rem; font-size: 1rem; }
.prose h2, .prose h3 { color: var(--sea-deep); margin: 1.4rem 0 .5rem; }
.prose a { color: var(--sea); }
.prose blockquote {
  margin: 1rem 0; padding: .4rem 0 .4rem 1.1rem;
  border-left: 3px solid var(--sun); color: var(--ink-2);
}

/* Kort */
.cluster { margin-top: 1rem; }
.cluster-title {
  font-size: 1.1rem; color: var(--sun); margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .7rem;
  text-transform: uppercase; letter-spacing: .1em; font-family: inherit; font-weight: 700;
}
.cluster-title::before { content: ""; width: 1.8rem; height: 2px; background: var(--sun); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.cards article {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 14px;
  padding: 1.5rem; box-shadow: 0 6px 24px -18px color-mix(in srgb, var(--sea-deep) 40%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden; /* miniatyrbilden klipps av kortets hörnradie (temaföljsamt) */
}
/* Miniatyrbild i kort: kant-till-kant upptill, klick öppnar lightbox (public.js). */
.card-photo { display: block; margin: -1.5rem -1.5rem 1rem; cursor: zoom-in; }
/* aspect-ratio, inte fast höjd: korten är mellan 260 och ~540 px breda,
   och 150 px blev en tunn remsa på de breda. Proportionen håller sig
   oavsett bredd, och object-fit:cover gör att vilket foto som helst kan
   läggas in utan att bli utdraget. */
.card-photo img {
  width: 100%; aspect-ratio: 16 / 10; height: auto;
  object-fit: cover; display: block;
}
.cards article:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pin {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  /* Följer accenten. Var hårdkodat turkos, så en kund med terrakotta
     fick turkosa etiketter — och i mörkt läge en ljus plupp. */
  text-transform: uppercase; color: var(--sea);
  background: color-mix(in srgb, var(--sea) 14%, transparent);
  padding: .25rem .6rem; border-radius: 999px; margin-bottom: .8rem;
}
.cards h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.cards p { margin: 0 0 .4rem; color: var(--ink-2); font-size: .96rem; }

/* Checklistor (ul.checklist ur rik text): boxar i CSS, avbockningsbara –
   public.js togglar li.checked och minns valet i localStorage. */
.checklist { list-style:none; padding-left:.2rem; }
.checklist li { position:relative; padding-left:1.8rem; cursor:pointer; }
.checklist li::before {
  content:""; position:absolute; left:.15rem; top:.3em;
  width:.95em; height:.95em; border:2px solid var(--sea);
  border-radius:4px; background:var(--paper);
}
.checklist li.checked::before { background:var(--sea); }
.checklist li.checked::after {
  content:"✓"; position:absolute; left:.38rem; top:.32em;
  color:#fff; font-size:.75em; font-weight:700; line-height:1.1;
}
.checklist li.checked { color:var(--ink-2); }

/* Bildgalleri: kollage på 6-kolumnsraster. Varje bild spänner kolumner/rader
   efter vald storlek (s/m/l) och dense-flödet packar igen hålen. */
.gallery {
  display: grid; grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  /* Rad + mellanrum i cqw → cellernas proportioner är konstanta oavsett
     containerbredd (admin-editorns miniraster använder samma kvoter =
     WYSIWYG). px-raderna är fallback för browsers utan container queries.
     8.18cqw ≈ 90px och 1.45cqw ≈ 16px vid 1100px innehållsbredd. */
  gap: 1rem; grid-auto-rows: 90px;
  gap: 1.45cqw; grid-auto-rows: 8.18cqw;
}
.section { container-type: inline-size; }
.gallery figure {
  margin: 0; position: relative; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--rule); background: var(--paper);
}
.gallery .sz-s { grid-column: span 2; grid-row: span 2; }
.gallery .sz-m { grid-column: span 3; grid-row: span 3; }
.gallery .sz-l { grid-column: span 4; grid-row: span 5; }
/* Stående ram: samma kolumner, fler rader (aspekt ~2:3). */
.gallery .sz-s.por { grid-row: span 5; }
.gallery .sz-m.por { grid-row: span 7; }
.gallery .sz-l.por { grid-row: span 9; }
.gallery a { display: block; width: 100%; height: 100%; }
.gallery img {
  width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block;
}
/* Bildtextens tona är sajtens mörka BAS-färg, som herons slöja: vit
   text i båda lägena. */
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.1rem .7rem .45rem; font-size: .82rem; color: #fff;
  background: linear-gradient(transparent, color-mix(in srgb, var(--sea-deep-base) 78%, transparent));
}
@media (max-width: 760px) {
  .gallery { grid-auto-rows: 64px; gap: .6rem; }
  .gallery .sz-s { grid-column: span 3; grid-row: span 3; }
  .gallery .sz-m { grid-column: span 6; grid-row: span 4; }
  .gallery .sz-l { grid-column: span 6; grid-row: span 5; }
  .gallery .sz-s.por { grid-row: span 4; }
  .gallery .sz-m.por { grid-column: span 3; grid-row: span 5; }
  .gallery .sz-l.por { grid-column: span 6; grid-row: span 8; }
  /* Ett stående och ett liggande foto, och inget mer: på datorn en hel
     rad (stående s bredvid liggande l), men på en telefon blev det
     stående en halv ruta med tomt bredvid och det liggande hamnade
     under. Två foton av olika form staplas därför i full bredd. Utan
     :has faller det tillbaka på reglerna ovan. */
  .gallery:has(> figure:nth-child(2):last-child):has(> .por):has(> figure:not(.por)) > figure {
    grid-column: span 6; grid-row: span 4;
  }
  .gallery:has(> figure:nth-child(2):last-child):has(> .por):has(> figure:not(.por)) > figure.por {
    grid-row: span 6;
  }
}
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: color-mix(in srgb, var(--sea-deep-base) 92%, transparent);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out; padding: 2vh 2vw;
}
.lightbox img { max-width: 96vw; max-height: 96vh; border-radius: 6px; }

/* Kalender-embed */
.calendar-embed { position: relative; width: 100%; }
.calendar-embed iframe {
  width: 100%; height: 600px; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--paper);
}

/* Kontakt + upplåsningsformulär */
/* Kontaktblocket låg tidigare i en egen max-width på SAMMA element som
   .wrap, som har margin:0 auto — resultatet blev en centrerad spalt
   medan varje annan sektion börjar vid vänsterkanten av 1100-spalten.
   Och .section.alt målade sin paper-bakgrund enbart på den smala rutan,
   så blocket läste som en lös låda mitt på sidan i stället för en del av
   sidan.
   Nu: full spaltbredd som resten, med texten till vänster och
   formuläret i en panel till höger. Panelen är det enda som avtecknar
   sig, och den gör det med avsikt. */
.contact-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 54rem) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3.5rem; }
}
.contact-intro { max-width: 34rem; }
.contact-intro h2, .unlock h2 {
  color: var(--sea-deep);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin: 0 0 .7rem;
}
.contact-intro p { color: var(--ink-2); font-size: 1.05rem; margin: 0; }
/* Kontaktpersonen: runt porträtt med namn och roll under ingressen, så
   att den som skriver ser vem som svarar. Fotot är kundens eget, oftast
   stående och sällan centrerat på ansiktet; lite ovanför mitten träffar
   huvudet i ett vanligt porträtt bättre än mitten. Ringen är accentens
   färg, så porträttet hör till sajten och inte ser inklistrat ut. */
.contact-person {
  display: flex; align-items: center; gap: .85rem;
  margin: 1.8rem 0 0;
}
/* margin = ringens bredd, så att ringen linjerar med texten ovanför i
   stället för att sticka ut i marginalen. */
.contact-person img {
  flex: none; width: 5.5rem; height: 5.5rem; margin: 5px;
  border-radius: 50%; object-fit: cover; object-position: 50% 30%;
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--sand), 0 0 0 5px color-mix(in srgb, var(--sea) 45%, transparent);
}
.contact-person figcaption { display: grid; gap: .15rem; line-height: 1.3; }
.contact-person strong { font-size: 1.1rem; color: var(--ink); }
.contact-person span { font-size: .95rem; color: var(--ink-2); }
.contact-person + .sent-ok { margin-top: 1.2rem; }
@media (min-width: 54rem) {
  .contact-person img { width: 6.5rem; height: 6.5rem; }
}

.contact-form, .unlock form {
  display: grid;
  gap: 1.1rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  box-shadow: var(--shadow);
}
/* Namn och e-post delar rad när panelen är bred nog. Container query:
   det är PANELENS bredd som avgör om två fält får plats, inte skärmens
   — panelen är halva spalten på desktop och hel på mobil. */
.contact-form { container-type: inline-size; }
@container (min-width: 26rem) {
  .contact-form { grid-template-columns: 1fr 1fr; }
  .contact-form .span-2, .contact-form button { grid-column: 1 / -1; }
}
.contact-form label, .unlock label { display: grid; gap: .45rem; }
.contact-form label > span, .unlock label {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2);
}
.contact-form input, .contact-form textarea, .unlock input {
  font: inherit; color: var(--ink);
  padding: .8rem .9rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--sand);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--ink-2); opacity: .6; }
.contact-form input:focus, .contact-form textarea:focus, .unlock input:focus {
  outline: none;
  border-color: var(--sea);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sea) 22%, transparent);
}
.contact-form button, .unlock button {
  justify-self: start;
  padding: .85rem 1.9rem; border: 0; border-radius: 999px;
  background: var(--sea); color: var(--paper); font: inherit; font-weight: 700;
  cursor: pointer; transition: background .15s, transform .1s;
}
.contact-form button:hover, .unlock button:hover { background: var(--sea-deep); }
.contact-form button:active { transform: translateY(1px); }
.sent-ok { color: var(--sea); font-weight: 600; }
.unlock-error { color: #b3402a; font-weight: 600; }

/* Footer */
footer { padding: 2.5rem 0; color: var(--ink-2); font-size: .88rem; border-top: 1px solid var(--rule); }
/* Plattformens rad under kundens egen: mindre och dämpad, så att den
   aldrig tävlar med kundens namn. Färgen ärvs från texten runt omkring,
   så den följer temat och mörkt läge utan egna regler. */
footer .made-by { margin-top: .5rem; font-size: .8rem; opacity: .75; }
footer .made-by a { color: inherit; }

/* Sociala kanaler: ikonrad i sidfoten och på kontaktsidan (sajtfronts
   social.html.tmpl). Allt utgår från currentColor, så raden följer
   texten runt omkring: temats färger, kundens färger, mörkt läge och
   medelhavs mörka sidfot, utan en regel per fall. Ytan är 2.5rem, stor
   nog för ett finger (WCAG 2.5.8 kräver 24px). */
.social {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.social a {
  display: inline-grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  color: inherit;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: background-color .15s, border-color .15s;
}
.social a:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 12%, transparent); }
.social a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.social svg { width: 1.25rem; height: 1.25rem; display: block; }
/* På kontaktsidan står raden under ingressen, i accentfärgen. */
.contact-intro .social { margin: 1.5rem 0 0; color: var(--sea); }

/* Granskningsband – syns bara medan ett ogranskat AI-bygge ligger på
   sajten. Avsiktligt omöjligt att missa: den som landar här ska inte
   kunna tro att sajten är färdig. Försvinner när säljaren godkänt. */
.review-ribbon {
  background: #8a3b00;
  color: #fff;
  font-size: .8125rem;
  letter-spacing: .02em;
  text-align: center;
  padding: .5rem 1rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Temaväxlare i sidhuvudet.
   Diskret: en ikon i samma vikt som språkväxlaren, inte en knapp som
   konkurrerar med sajtens egna. Ikonen visar vad man BYTER TILL — sol i
   mörkt läge, måne i ljust — vilket är den konvention folk känner igen. */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem; margin-left: .5rem;
  border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--ink-2);
  cursor: pointer; padding: 0;
  transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--sea); border-color: var(--sea); }
.theme-toggle:focus-visible {
  outline: none; border-color: var(--sea);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sea) 25%, transparent);
}
.theme-toggle svg { grid-area: 1 / 1; }
/* Utan JS visas månen (sidan är ljus som default) — knappen gör inget då,
   men den ska inte se trasig ut. */
.theme-toggle .i-sun { display: none; }
.is-dark .theme-toggle .i-sun { display: block; }
.is-dark .theme-toggle .i-moon { display: none; }