/* ==========================================================================
   husbil.keroagro.se
   ==========================================================================

   Mobile first. Basreglerna gäller den smalaste skärmen (320 px) och
   desktoplayouten byggs på med min-width. Brytpunkterna ligger där innehållet
   går sönder, uppmätt: 560, 700 och 900 px.

   Flytande värden är räknade så att de träffar exakt desktopvärdet vid
   1120 px och klampas där. Allt över 1120 px är därför oförändrat mot den
   godkända designen — inte ungefär, utan per konstruktion.

   Formeln som används genomgående:
       clamp(mobilvärde, intercept + slope*vw, desktopvärde)
   där slope = (desktop - mobil) / (1120 - 320) och intercept löser
   ekvationen vid 320 px. För värden som ska bli MINDRE på desktop
   (etiketter, hjälptexter) är slope negativ och min/max byter plats.
   ========================================================================== */

/* --- Typsnitt ------------------------------------------------------------
   Självhostade. Inga anrop till Google: bättre för GDPR, ett DNS-uppslag
   mindre, och sidan bryts inte när fonts.gstatic.com är segt. Subsettade till
   latin och latin-ext; unicode-range gör att latin-ext aldrig hämtas för
   svensk text, eftersom å, ä och ö ligger i latin-intervallet.
   Archivo är variabelt (en fil täcker 100–900). Source Serif 4 och IBM Plex
   Mono är statiska instanser, så webbläsaren hämtar bara de vikter som
   sidan faktiskt använder. */

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/sourceserif-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/sourceserif-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/sourceserif-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/sourceserif-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/plexmono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/plexmono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/plexmono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/plexmono-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/plexmono-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* --- Variabler ---------------------------------------------------------- */

:root{
  --bone:#F1F2EC;
  --paper:#FFFFFF;
  --ink:#1C2620;
  --muted:#4E5A52;
  --falu:#8F3A2A;
  --falu-dark:#6F2B1E;
  --gran:#2C4438;
  --halm:#B8901F;
  --line:#D6DACF;
  --shadow:0 1px 2px rgba(28,38,32,.06),0 8px 24px rgba(28,38,32,.06);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  /* Sidmarginalen: 18 px på 320, 28 px från 1120 och uppåt. */
  --gutter:clamp(18px, 14px + 1.25vw, 28px);

  /* Sajten har ingen mörkt läge. Utan det här inverterar iOS formulärfält
     och datumväljaren till något oläsligt när telefonen står i mörkt läge. */
  color-scheme:light;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* Utan detta skalar iOS om text när telefonen vrids till liggande. */
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--body);
  font-size:clamp(17px, 16.2px + 0.25vw, 19px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* Skyddsnät: ett långt ord eller en inklistrad adress ska bryta rad
     i stället för att tvinga ut hela sidan i sidled. */
  overflow-wrap:break-word;
}

img{max-width:100%;display:block}
a{color:var(--falu)}
h1,h2,h3,.h{font-family:var(--display);font-weight:700;line-height:1.12;letter-spacing:-.02em;margin:0}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}

.eyebrow{
  font-family:var(--display);font-weight:600;
  font-size:clamp(13px, 41px - 2.5vw, 16px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--falu);margin:0 0 14px
}
.eyebrow.on-dark{color:#E7C9A0}

section{padding:clamp(44px, 28px + 5vw, 84px) 0}

.lede{
  font-size:clamp(18px, 16.8px + 0.375vw, 21px);
  color:var(--muted);max-width:62ch;margin:18px 0 0
}

/* Rubrikstorlekar. Under 900 px en egen kurva som möter designens formel
   exakt vid 900 px; från 900 px och uppåt originalvärdena oförändrade. */
.h-stor{font-size:clamp(27px, 22px + 1.55vw, 44px)}
.h-mellan{font-size:clamp(25px, 21.9px + 0.97vw, 40px)}
.h-liten{font-size:clamp(23px, 20.8px + 0.69vw, 34px)}

/* ---------- topbar ----------
   På mobil staplas raderna och telefonnumret får vara stort och lätt att
   träffa — det är sidans viktigaste genväg för den som hellre ringer. */
.topbar{
  background:var(--gran);color:#EAEFE8;font-family:var(--display);
  font-size:clamp(15px, 24.33px - 0.833vw, 16px)
}
.topbar .wrap{
  display:flex;flex-wrap:wrap;gap:4px 26px;align-items:center;
  padding-top:10px;padding-bottom:10px
}
.topbar .brand{font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.topbar .sep{opacity:.45;display:none}
.topbar a{color:#EAEFE8;text-decoration:none;border-bottom:1px solid rgba(234,239,232,.4)}
.topbar .right{display:flex;gap:6px 22px;flex-wrap:wrap;width:100%}
.topbar .right a{
  display:inline-block;padding:11px 0;margin:-5px 0;
  overflow-wrap:anywhere
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--gran);overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

/* Slöjan går uppifrån och ned på smala skärmar, eftersom texten då ligger
   över hela bildens bredd och en vinklad gradient hade lämnat nederdelen
   ljus och oläslig. Värdena är uppmätta mot den faktiska bilden. */
.hero .veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,28,23,.78) 0%,rgba(19,28,23,.90) 55%,rgba(19,28,23,.95) 100%);
}
.hero .wrap{position:relative;padding-top:clamp(40px, 17.6px + 7vw, 96px);padding-bottom:clamp(40px, 17.6px + 7vw, 96px)}
.hero h1{color:#FCFBF6;font-size:clamp(31px, 18.3px + 3.97vw, 68px);max-width:16ch}
.hero p{color:#DCE4DA;font-size:clamp(18px, 16.8px + 0.375vw, 21px);max-width:46ch;margin:20px 0 0}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* Fakta-raden staplas på smal skärm i stället för att tryckas ihop. */
.chips{
  display:flex;flex-direction:column;gap:9px;
  margin-top:30px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.22);max-width:640px
}
.chips span{
  font-family:var(--mono);font-size:clamp(14px, 32.67px - 1.667vw, 16px);
  letter-spacing:.02em;color:#D8E0D6
}
.chips span b{color:#fff;font-weight:600}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--display);font-weight:600;font-size:17px;
  padding:15px 28px;border-radius:3px;text-decoration:none;border:2px solid transparent;cursor:pointer;
  min-height:48px;
  /* Utan återkoppling vid tryck trycker folk två gånger och skickar dubbelt. */
  touch-action:manipulation;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn-primary{background:var(--falu);color:#fff}
.btn-primary:hover{background:var(--falu-dark)}
.btn-primary:active{background:#5C2318}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-ghost:active{background:rgba(255,255,255,.24)}
.btn-block{width:100%;text-align:center;font-size:18px;padding:17px 24px}
:focus-visible{outline:3px solid var(--halm);outline-offset:3px}

/* På smal skärm blir hjältens knappar fullbreda — lättare att träffa. */
.hero .cta .btn{flex:1 1 100%;text-align:center}

/* ---------- priser ---------- */
.prices{display:grid;grid-template-columns:1fr;gap:16px;margin-top:32px}
.price{
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:clamp(22px, 18.8px + 1vw, 30px) clamp(18px, 14px + 1.25vw, 28px) clamp(20px, 16.8px + 1vw, 28px);
  display:flex;flex-direction:column;box-shadow:var(--shadow)
}
.price.flag{border:2px solid var(--gran)}
.price .tag{
  font-family:var(--display);font-size:clamp(12px, 49.33px - 3.333vw, 16px);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--gran);align-self:flex-start;padding:5px 10px;border-radius:2px;margin-bottom:16px
}
.price h3{font-size:clamp(21px, 19.8px + 0.375vw, 24px)}
.price .period{font-family:var(--mono);font-size:clamp(14px, 32.67px - 1.667vw, 16px);color:var(--muted);margin:8px 0 20px}
.price .amount{font-family:var(--display);font-weight:700;font-size:clamp(34px, 29.2px + 1.5vw, 46px);letter-spacing:-.03em;line-height:1}
.price .amount span{font-size:20px;font-weight:600;letter-spacing:0}
.price .vat{font-family:var(--mono);font-size:clamp(13px, 41px - 2.5vw, 16px);color:var(--muted);margin-top:8px}
.price ul{list-style:none;margin:22px 0 0;padding:0;font-size:17px;color:var(--muted)}
.price li{padding-left:26px;position:relative;margin-bottom:9px}
.price li::before{content:"";position:absolute;left:2px;top:12px;width:12px;height:2px;background:var(--falu)}

/* ---------- steg ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:0;margin-top:32px;border-top:2px solid var(--ink)}
.step{padding:22px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .num{font-family:var(--mono);font-size:clamp(14px, 32.67px - 1.667vw, 16px);font-weight:600;color:var(--falu);letter-spacing:.1em}
.step h3{font-size:clamp(20px, 19.2px + 0.25vw, 22px);margin:12px 0 10px}
.step p{margin:0;color:var(--muted);font-size:17px}

/* ---------- hallen ---------- */
.hall{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
.hall figure{margin:0}
.hall img{border-radius:4px;border:1px solid var(--line)}
.hall figcaption{font-family:var(--mono);font-size:clamp(13px, 41px - 2.5vw, 16px);color:var(--muted);margin-top:10px}

/* Specifikationslistan staplar etikett och värde på smal skärm. En fast
   etikettkolumn på 132 px lämnade under 180 px till värdet på 320 px. */
.spec{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.spec li{display:flex;flex-direction:column;gap:3px;padding:13px 0;border-bottom:1px solid var(--line)}
.spec dt,.spec .k{
  font-family:var(--display);font-size:clamp(13px, 41px - 2.5vw, 16px);
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)
}
.spec .v{font-size:18px}

/* ---------- boka ---------- */
.book{background:var(--gran);color:#EDF1EA}
.book h2{color:#fff}
.book .lede{color:#C6D2C4}
.book .eyebrow{color:#E7C9A0}
.form-grid{display:grid;grid-template-columns:1fr;gap:28px;margin-top:34px;align-items:start}
.panel{
  background:var(--paper);border-radius:4px;
  padding:clamp(22px, 16.4px + 1.75vw, 36px) clamp(16px, 8.8px + 2.25vw, 34px);
  color:var(--ink);box-shadow:var(--shadow)
}
fieldset{border:0;padding:0;margin:0 0 26px;min-width:0}
fieldset:last-of-type{margin-bottom:22px}
legend{
  font-family:var(--display);font-size:clamp(13px, 41px - 2.5vw, 16px);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--falu);padding:0 0 14px;width:100%;border-bottom:1px solid var(--line);margin-bottom:20px
}
.row,.row-3{display:grid;grid-template-columns:1fr;gap:0}
.field{margin-bottom:18px;min-width:0}
label{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(15px, 29px - 1.25vw, 16.5px);margin-bottom:7px
}
.hint{
  font-family:var(--mono);font-size:clamp(13px, 41px - 2.5vw, 16px);
  color:var(--muted);font-weight:400;letter-spacing:0
}

input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{
  width:100%;
  /* min-width:0 är det som hindrar sidan från att spränga skärmen: utan den
     vägrar fält och listor krympa under sitt innehåll. select#fordonstyp
     krävde 271 px och label.choice 313 px innan detta. */
  min-width:0;
  font-family:var(--body);font-size:18px;color:var(--ink);background:#FBFBF8;
  border:1.5px solid var(--line);border-radius:3px;padding:13px 14px;
  min-height:50px;
}
/* iOS och Android renderar datumfält olika höga än övriga fält. */
input[type=date]{
  -webkit-appearance:none;appearance:none;
  min-height:50px;line-height:1.2
}
input:focus,select:focus,textarea:focus{border-color:var(--gran);background:#fff;outline:3px solid var(--halm);outline-offset:1px}
#regnr{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:19px}
textarea{min-height:110px;resize:vertical}

.choices{display:grid;gap:12px}

/* Periodvalet: på smal skärm hamnar priset på egen rad under rubriken
   i stället för att klämmas mot texten av margin-left:auto. */
.choice{
  display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:start;
  border:1.5px solid var(--line);border-radius:3px;
  padding:14px 16px;cursor:pointer;background:#FBFBF8;min-width:0;
  touch-action:manipulation;
  transition:border-color .15s,background .15s
}
.choice:hover{border-color:var(--gran)}
.choice:active{background:#F2F3EE}
.choice input{margin:3px 0 0;width:26px;height:26px;accent-color:var(--falu);flex:0 0 auto}
.choice.sel{border-color:var(--gran);background:#fff;box-shadow:inset 0 0 0 1px var(--gran)}
.choice > span:not(.p){grid-column:2;min-width:0}
.choice .t{font-family:var(--display);font-weight:600;font-size:17px}
.choice .d{font-size:clamp(15px, 24.33px - 0.833vw, 16px);color:var(--muted);display:block;margin-top:2px}
.choice .p{
  grid-column:2;justify-self:start;
  font-family:var(--mono);font-weight:600;font-size:17px;white-space:nowrap
}

.err{color:var(--falu);font-family:var(--display);font-size:16px;font-weight:600;margin-top:8px;display:none}
.err.on{display:block}
input.bad,select.bad{border-color:var(--falu);background:#FDF6F4}

/* kvittot – sidans signatur */
.receipt{
  background:#FCFBF4;border-radius:4px;padding:0;color:var(--ink);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.receipt .top{background:var(--ink);color:#F3F1E6;padding:18px clamp(18px, 14.8px + 1vw, 26px)}
.receipt .top .h{font-size:18px;letter-spacing:.1em;text-transform:uppercase}
.receipt .top .s{font-family:var(--mono);font-size:clamp(12.5px, 45.17px - 2.917vw, 16px);color:#A9B3A6;margin-top:4px}
.receipt .body{padding:22px clamp(18px, 14.8px + 1vw, 26px) 24px}

/* Ledlinjerna: på smal skärm bryter värdet till egen rad under etiketten
   i stället för att spilla över. "Sommarförvaring, maj–sep" och
   "10 oktober 2026" är precis den längd som spräckte raden. */
.rline{
  display:grid;grid-template-columns:1fr;gap:1px;
  font-family:var(--mono);font-size:clamp(14.5px, 28.5px - 1.25vw, 16px);
  margin-bottom:13px
}
.rline .k{color:var(--muted)}
.rline .dots{display:none}
.rline .v{text-align:left;font-weight:500;min-width:0;overflow-wrap:anywhere}
.rline .v.none{color:#6F746D}

.total{border-top:2px solid var(--ink);margin-top:20px;padding-top:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.total .k{font-family:var(--display);font-size:clamp(13px, 41px - 2.5vw, 16px);font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.total .k small{display:block;font-family:var(--mono);font-size:clamp(12px, 49.33px - 3.333vw, 16px);letter-spacing:0;text-transform:none;color:var(--muted);font-weight:400;margin-top:3px}
.total .v{font-family:var(--display);font-weight:700;font-size:clamp(28px, 24px + 1.25vw, 38px);letter-spacing:-.03em;line-height:1;white-space:nowrap}
.receipt .foot{font-family:var(--mono);font-size:clamp(12.5px, 45.17px - 2.917vw, 16px);color:var(--muted);margin-top:16px;line-height:1.5}

.done{display:none;background:#FCFBF4;border-radius:4px;padding:30px 22px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.done.on{display:block}
.done h3{font-size:24px;margin-bottom:12px}
.done p{color:var(--muted);font-size:17px;margin:0 0 10px}
.stamp{
  display:inline-block;border:2.5px solid var(--falu);color:var(--falu);border-radius:3px;
  font-family:var(--display);font-weight:700;font-size:clamp(14px, 32.67px - 1.667vw, 16px);
  letter-spacing:.18em;text-transform:uppercase;
  padding:8px 14px;transform:rotate(-3deg);margin-bottom:18px
}

/* ---------- villkor + faq ---------- */
.two{display:grid;grid-template-columns:1fr;gap:36px}
.rules{list-style:none;margin:24px 0 0;padding:0}
.rules li{padding:0 0 14px 34px;position:relative;font-size:18px}
.rules li::before{content:"";position:absolute;left:0;top:9px;width:16px;height:16px;border:2px solid var(--gran);border-radius:2px}

details{border-bottom:1px solid var(--line);padding:4px 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{
  font-family:var(--display);font-weight:600;font-size:18px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  /* Hela rubriken är träffytan; 44 px är minimum för en tumme. */
  min-height:52px;padding:6px 0;
  touch-action:manipulation
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);font-size:22px;color:var(--falu);line-height:1}
details[open] summary::after{content:"–"}
details p{margin:8px 0 16px;color:var(--muted);font-size:17px;max-width:60ch}

/* ---------- kontakt ---------- */
.contact{background:var(--paper);border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
.callout{font-family:var(--display);font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-.02em}
/* Telefonnumret ska vara sidans lättaste träffyta. */
.callout a{
  display:block;text-decoration:none;border-bottom:3px solid rgba(143,58,42,.3);
  padding:8px 0;overflow-wrap:anywhere;touch-action:manipulation
}
.callout a:hover{border-bottom-color:var(--falu)}
.addr{
  font-family:var(--mono);font-size:clamp(15px, 24.33px - 0.833vw, 16px);
  color:var(--muted);margin-top:22px;line-height:1.9;font-style:normal
}

/* ---------- footer ---------- */
footer{
  background:var(--ink);color:#B9C1B6;
  padding:34px 0;
  /* Utan detta hamnar sista raden bakom iPhones hemindikator. */
  padding-bottom:calc(34px + env(safe-area-inset-bottom, 0px));
  font-family:var(--mono);font-size:clamp(14px, 32.67px - 1.667vw, 16px)
}
footer .wrap{display:flex;flex-direction:column;gap:12px}
footer a{color:#DCE2D8;display:inline-block;padding:11px 0;margin:-6px 0;overflow-wrap:anywhere}

/* ---------- hoppa-till, honungsfälla, skärmläsartext ---------- */
.hoppa-till{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--falu);color:#fff;font-family:var(--display);font-weight:600;
  font-size:16px;padding:14px 22px;text-decoration:none;border-radius:0 0 3px 0
}
.hoppa-till:focus{left:0}

/* Ligger utanför skärmen i stället för display:none, eftersom en del bottar
   hoppar över dolda fält men fyller i det som finns i DOM:en. */
.honung{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.endast-skarmlasare{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- felsammanfattning ---------- */
.felruta{display:none;border:2px solid var(--falu);background:#FDF6F4;border-radius:3px;padding:16px 18px;margin-bottom:24px}
.felruta.on{display:block}
.felruta p{font-family:var(--display);font-weight:700;font-size:17px;color:var(--falu);margin:0 0 8px}
.felruta ul{margin:0;padding-left:20px;font-size:16px;color:var(--ink)}
.felruta li{margin-bottom:6px}
.felruta a{color:var(--falu);display:inline-block;padding:6px 0}

/* ---------- platsräknare och sommarnotis ---------- */
.platser{
  display:inline-block;font-family:var(--mono);font-size:clamp(14px, 32.67px - 1.667vw, 16px);
  border:1px solid rgba(255,255,255,.35);color:#E7C9A0;
  padding:6px 12px;border-radius:2px;margin-bottom:18px
}
.platser.pa-ljus{border-color:var(--line);color:var(--falu);background:var(--paper)}
.sommar-notis{
  font-family:var(--body);font-size:16px;color:var(--muted);
  margin:14px 0 0;padding-left:26px;position:relative;line-height:1.5
}
.sommar-notis::before{content:"";position:absolute;left:2px;top:9px;width:12px;height:2px;background:var(--halm)}

/* ---------- hitta hit ---------- */
.hitta{background:var(--bone);border-top:1px solid var(--line)}
.hitta-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}

/* Kartan laddas först vid klick. Fram till dess är det här en ren CSS-ruta
   utan ett enda anrop till en tredje part.
   OBS: ingen min-height här. Tillsammans med aspect-ratio blir min-height en
   hård MINIMIBREDD (280px * 16/10 = 448px), vilket sprängde varje telefon. */
.karta-ruta{
  position:relative;border-radius:4px;overflow:hidden;border:1px solid var(--line);
  background:var(--gran);aspect-ratio:16/10;width:100%
}
.karta-ruta iframe{width:100%;max-width:100%;height:100%;border:0;display:block}
.karta-vila{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;padding:18px;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 26px),
    repeating-linear-gradient(25deg,rgba(255,255,255,.035) 0 2px,transparent 2px 34px),
    var(--gran);
}
.karta-vila .nal{width:26px;height:26px;border-radius:50% 50% 50% 0;background:var(--falu);transform:rotate(-45deg);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.karta-vila p{font-family:var(--mono);font-size:clamp(13.5px, 36.83px - 2.083vw, 16px);color:#C6D2C4;margin:0;max-width:34ch;line-height:1.6}
.karta-knapp{
  font-family:var(--display);font-weight:600;font-size:17px;color:#fff;
  background:var(--falu);border:2px solid transparent;border-radius:3px;
  padding:14px 26px;cursor:pointer;min-height:48px;
  touch-action:manipulation;transition:background-color .15s ease
}
.karta-knapp:hover{background:var(--falu-dark)}
.karta-knapp:active{background:#5C2318}

.karta-lankar{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.karta-lankar a{
  flex:1 1 100%;display:flex;align-items:center;justify-content:center;
  min-height:56px;padding:14px 18px;
  font-family:var(--display);font-weight:600;font-size:17px;
  color:var(--ink);background:var(--paper);text-decoration:none;
  border:1.5px solid var(--line);border-radius:3px;text-align:center;
  touch-action:manipulation;
  transition:border-color .15s ease,background-color .15s ease
}
.karta-lankar a:hover{border-color:var(--gran);background:#fff}
.karta-lankar a:active{background:var(--bone)}

.vagbeskrivning{margin:24px 0 0;padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--halm);border-radius:3px}
.vagbeskrivning h3{font-size:17px;margin-bottom:8px}
.vagbeskrivning p{margin:0;color:var(--muted);font-size:17px}

/* Integritetsraden under formuläret. */
.smatext{
  font-family:var(--mono);font-size:clamp(13px, 41px - 2.5vw, 16px);
  color:var(--muted);margin:14px 0 0;text-align:center
}

/* Långa obrutna strängar: e-postadressen är 21 tecken utan brytpunkt. */
.addr,.callout a,footer a,.topbar a,.rline .v{overflow-wrap:anywhere}


/* ==========================================================================
   ≥ 560 px — två fält i bredd, priset tillbaka på egen kant
   ========================================================================== */
@media (min-width:560px){
  .row{grid-template-columns:1fr 1fr;gap:18px}
  .row-3{grid-template-columns:.7fr 1.3fr;gap:18px}

  .choice{display:flex;gap:14px;align-items:flex-start;padding:16px 18px}
  .choice .p{margin-left:auto;padding-left:12px;justify-self:auto}
  .choice input{margin:5px 0 0;width:20px;height:20px}

  .hero .cta .btn{flex:0 0 auto}
  .chips{flex-direction:row;flex-wrap:wrap;gap:10px 28px}

  .karta-lankar a{flex:1 1 220px}
  .spec li{flex-direction:row;gap:20px;align-items:baseline;padding:15px 0}
  .spec dt,.spec .k{flex:0 0 132px}
}

/* ==========================================================================
   ≥ 700 px — priskorten tål två kolumner
   ========================================================================== */
@media (min-width:700px){
  .prices{grid-template-columns:repeat(2,1fr);gap:20px}
  .topbar .right{width:auto;margin-left:auto}
  .topbar .sep{display:inline}
  .topbar .wrap{gap:8px 26px}
  footer .wrap{flex-direction:row;flex-wrap:wrap;gap:14px 40px;justify-content:space-between}
}

/* ==========================================================================
   ≥ 900 px — desktoplayouten
   Här återställs exakt de värden den godkända designen har. Allt över
   1120 px är därmed oförändrat.
   ========================================================================== */
@media (min-width:900px){
  /* Designens egna rubrikformler, oförändrade. */
  .hero h1{font-size:clamp(38px,6vw,68px)}
  .h-stor{font-size:clamp(30px,4vw,44px)}
  .h-mellan{font-size:clamp(28px,3.4vw,40px)}
  .h-liten{font-size:clamp(26px,3vw,34px)}

  /* Mellan 900 och 1120 px är hjälten bred men hjältetexten upptar en större
     andel av bredden än på desktop, så etiketten hamnar över molnpartiet och
     mätte 4,09:1. Här är slöjan därför något starkare; desktopvärdena
     återställs exakt vid 1120 px längst ned i filen. */
  .hero .veil{
    background:linear-gradient(100deg,rgba(19,28,23,.96) 0%,rgba(19,28,23,.90) 45%,rgba(19,28,23,.30) 78%,rgba(19,28,23,.06) 100%);
  }
  .hero p{margin:22px 0 0}
  .hero .cta{gap:14px;margin-top:34px}
  .chips{margin-top:44px;padding-top:26px}

  .prices{grid-template-columns:repeat(3,1fr);margin-top:44px}

  .steps{grid-template-columns:repeat(3,1fr);margin-top:44px}
  .step{padding:28px 30px 30px 0;border-right:1px solid var(--line);border-bottom:0}
  .step:last-child{border-right:0;padding-right:0}

  .hall{grid-template-columns:1.05fr .95fr;gap:56px}
  .spec{margin:30px 0 0}

  .form-grid{grid-template-columns:1.45fr .85fr;gap:44px;margin-top:46px}
  .receipt{position:sticky;top:24px}
  .rline{display:flex;align-items:baseline;gap:6px}
  .rline .k{white-space:nowrap}
  .rline .dots{display:block;flex:1;border-bottom:1.5px dotted #B9BCAF;transform:translateY(-4px)}
  .rline .v{text-align:right}
  .receipt .body{padding:24px 26px 26px}
  .receipt .top{padding:20px 26px}
  .total{margin-top:22px;padding-top:18px}
  .done{padding:36px 30px}

  fieldset{margin:0 0 30px}
  legend{margin-bottom:22px}
  .field{margin-bottom:18px}
  /* textarea är medvetet utelämnad: den har en egen min-height:110px som
     annars skulle övertrumfas härifrån, eftersom det här blocket kommer
     senare i filen med samma specificitet. */
  input[type=text],input[type=email],input[type=tel],input[type=date],select{min-height:0}
  /* Datumfältets normalisering behövs bara på telefon, där iOS och Android
     annars ger det en annan höjd än övriga fält. På desktop tillbaka till
     webbläsarens egen rendering, så layouten är exakt som i designen. */
  input[type=date]{-webkit-appearance:auto;appearance:auto;line-height:normal;min-height:0}
  .choice input{margin:5px 0 0}

  .two{grid-template-columns:1fr 1fr;gap:56px}
  .rules{margin:26px 0 0}

  .contact-grid{grid-template-columns:1fr 1fr;gap:56px}
  .addr{margin-top:24px}

  footer{padding:44px 0;padding-bottom:calc(44px + env(safe-area-inset-bottom, 0px))}

  .hitta-grid{grid-template-columns:1.15fr .85fr;gap:56px}
  .karta-ruta{min-height:280px}
  .vagbeskrivning{margin:26px 0 0;padding:20px 22px}

  .btn{min-height:0}
  .karta-knapp{padding:15px 28px;min-height:0}
  .karta-lankar{gap:14px;margin-top:22px}
  .karta-lankar a{padding:14px 20px}
}

/* ==========================================================================
   ≥ 1120 px — den godkända desktopdesignen, exakt
   Här ligger bara det som medvetet är mindre på desktop än vad en tumme
   behöver. Mellan 900 och 1120 px behåller sidan de större träffytorna:
   det spannet är inte fryst, och en 1024-skärm är ofta en pekplatta.
   ========================================================================== */
@media (min-width:1120px){
  .hero .veil{
    background:linear-gradient(100deg,rgba(19,28,23,.93) 0%,rgba(19,28,23,.84) 45%,rgba(19,28,23,.22) 75%,rgba(19,28,23,.05) 100%);
  }
  details{padding:18px 0}
  summary{min-height:0;padding:0}
  details p{margin:14px 0 4px}
  .callout a{display:inline;padding:0}

  /* Träffytorna i topp och sidfot: paddingen upphävs av lika stor negativ
     marginal, så layouten blir exakt som i designen. */
  .topbar .wrap{padding-top:12px;padding-bottom:12px}
  .topbar .right a{padding:10px 0;margin:-10px 0}
  footer a{padding:10px 0;margin:-10px 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}