/* HomeHero — "Linne & Å" (Local Trust). Bricolage Grotesque + Albert Sans, självhostade.
   Palett: ink #0D2D4D · turkos #00B4C6 (knappyta med mörkblå text, aldrig bakom vit text) · djup teal #006E7D (länkar)
   · akva #E6F4F7 · moln #F2F4F5 · skiffer #4A5F73 · skum #7FDDE7 (på mörkblått). Inga gradienter, inga skuggor utom öppen meny. */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/albert-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/albert-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/albert-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  --ink: #0D2D4D;
  --ink-deep: #082035;
  --turq: #00B4C6;
  --teal: #006E7D;
  --aqua: #E6F4F7;
  --cloud: #F2F4F5;
  --white: #FFFFFF;
  --slate: #4A5F73;
  --foam: #7FDDE7;
  --line: #D5E3EA;
  --field: #6B7F92;
  --error: #B42318;
  --radius: 24px;
  --radius-sm: 14px;
  --header-h: 64px;
  --gutter: 20px;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Albert Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --header-h: 76px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html.menu-open { overflow: hidden; }
body { margin: 0; font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--white); text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--teal); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
h1, h2, h3 { font-family: var(--display); color: var(--ink); line-height: 1.12; margin: 0; letter-spacing: -.012em; }
h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 3.9rem); font-weight: 700; letter-spacing: -.022em; }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; color: var(--white); }
.wrap { width: 100%; max-width: 1264px; margin-inline: auto; padding-inline: var(--gutter); }

.icon { width: 22px; height: 22px; flex: none; }
.arrow { width: 18px; height: 18px; flex: none; transition: transform .15s var(--ease); }
.roof { width: 16px; height: 16px; flex: none; color: var(--teal); }
.check { color: var(--teal); }
.no { color: var(--slate); opacity: .7; }

/* ---------- buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px; border-radius: 999px; font-family: var(--body); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.btn--primary { background: var(--turq); color: var(--ink); border-color: var(--turq); }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.btn .icon { width: 20px; height: 20px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--teal); text-decoration: none; margin-top: 8px; }
.more span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.more:hover { color: var(--ink); }
.more:hover .arrow, a:hover > .arrow { transform: translateX(3px); }
/* Länkrad under text (två .more bredvid varandra) och länk direkt efter en informationsrad. */
.story__links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 16px; }
.story__links .more { margin-top: 0; }
.info-grid + .more { margin-top: 28px; }
.info-panel p + p { margin-top: 12px; }
.inline-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.inline-link .arrow { width: 16px; height: 16px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; color: var(--teal); letter-spacing: .02em; margin: 0 0 16px; }
.lead { font-size: clamp(1.1rem, 1rem + .35vw, 1.25rem); line-height: 1.6; color: var(--ink); max-width: 62ch; }
.note { color: var(--slate); margin-top: 24px; font-size: 1rem; }

/* ---------- C1 header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 12px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex: none; margin-right: auto; border-radius: 8px; }
.brand img { width: 136px; height: auto; }
@media (min-width: 1024px) { .brand img { width: 162px; } }
/* Smalaste telefoner (320 px): logotyp, telefon och Meny får plats utan 1 px sidscroll. */
@media (max-width: 359px) { .header-row { gap: 6px; } .brand img { width: 124px; } }
.main-nav { display: none; }
.header-phone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 600; border-radius: 999px; }
.header-phone .icon { width: 22px; height: 22px; color: var(--teal); }
.header-phone__num { display: none; }
.header-cta { display: none; }
.menu-toggle { order: 10; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font: 600 .95rem var(--body); cursor: pointer; }
.menu-toggle__bars { position: relative; width: 18px; height: 12px; }
.menu-toggle__bars::before, .menu-toggle__bars::after, .menu-toggle__bars span { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform .18s var(--ease), opacity .18s var(--ease); }
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars span { top: 5px; }
.menu-toggle__bars::after { top: 10px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span { opacity: 0; }
@media (min-width: 640px) { .header-cta { display: inline-flex; min-height: 44px; padding: 8px 20px; } }

.mobile-panel { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 49; background: var(--white); overflow-y: auto; overscroll-behavior: contain; padding: 12px var(--gutter) 40px; border-top: 1px solid var(--line); }
.mobile-panel[hidden] { display: none; }
.js .mobile-panel:not([hidden]) { animation: panel-in .18s var(--ease); }
/* Endast transform: panelen är fullt synlig (opacity 1) från första bildrutan i öppet läge — animationen följer tillståndet och döljer aldrig innehåll. */
@keyframes panel-in { from { transform: translateY(-6px); } to { transform: none; } }
.mobile-nav > li { border-bottom: 1px solid var(--line); }
.mobile-nav a, .mobile-sub-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 8px 4px; font: 600 1.25rem var(--display); color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; }
.mobile-nav a[aria-current="page"] { color: var(--teal); }
.mobile-sub-toggle .chev { transition: transform .18s var(--ease); }
.mobile-sub-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mobile-sub { padding: 0 0 12px 12px; }
.mobile-sub[hidden] { display: none; }
.mobile-sub a { min-height: 48px; font: 500 1.08rem var(--body); }
.mobile-panel__contact { display: grid; gap: 12px; margin-top: 28px; }
.mobile-panel__mail { text-align: center; padding: 8px; font-weight: 600; }

@media (min-width: 1024px) {
  .menu-toggle, .mobile-panel { display: none !important; }
  .brand { margin-right: 28px; }
  .main-nav { display: block; margin-right: auto; }
  .main-nav__list { display: flex; align-items: center; gap: 2px; }
  .main-nav__list > li { position: relative; display: flex; align-items: center; }
  .main-nav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; color: var(--ink); font-weight: 600; text-decoration: none; border-radius: 10px; }
  .main-nav__link:hover { background: var(--aqua); color: var(--ink); }
  .main-nav__link[aria-current="page"], .main-nav__link[data-active="true"] { box-shadow: inset 0 -3px 0 var(--turq); border-radius: 0; }
  .has-menu .main-nav__link { padding-right: 4px; }
  .submenu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 36px; border: 0; background: none; color: var(--ink); border-radius: 8px; cursor: pointer; }
  .submenu-toggle:hover { background: var(--aqua); }
  .submenu-toggle .chev { width: 18px; height: 18px; transition: transform .18s var(--ease); }
  .submenu-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .submenu { position: absolute; top: calc(100% + 12px); left: -12px; width: 560px; padding: 16px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 40px rgba(13, 45, 77, .12); display: none; }
  .submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .has-menu.is-open .submenu { display: block; animation: panel-in .18s var(--ease); }
  html:not(.js) .has-menu:hover .submenu, html:not(.js) .has-menu:focus-within .submenu { display: block; }
  .submenu ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .submenu li a { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; color: var(--ink); text-decoration: none; }
  .submenu li a:hover { background: var(--aqua); }
  .submenu strong { display: block; font-family: var(--display); font-weight: 600; }
  .submenu small { display: block; color: var(--slate); font-size: .88rem; line-height: 1.35; }
  .illus--menu { width: 44px; height: 44px; color: var(--ink); flex: none; }
  .submenu__all { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 12px; border-top: 1px solid var(--line); font-weight: 600; text-decoration: none; }
  .header-phone { padding: 8px 12px; }
  .header-phone__num { display: inline; }
}
@media (min-width: 1024px) and (max-width: 1180px) { .header-phone__num { display: none; } }

/* ---------- sections ---------- */
.section { padding-block: 64px; }
@media (min-width: 1024px) { .section { padding-block: 96px; } }
.tone-aqua { background: var(--aqua); }
.tone-cloud { background: var(--cloud); }
.section-head { display: grid; gap: 14px; margin-bottom: 36px; max-width: 760px; }
.section-head .section-lead { color: var(--slate); font-size: 1.1rem; margin: 0; max-width: 62ch; }
@media (min-width: 1024px) {
  .section-head:has(.more--head) { max-width: none; grid-template-columns: minmax(0, 760px) auto; align-items: end; justify-content: space-between; }
  .section-head:has(.more--head) .section-lead { grid-column: 1; }
  .section-head .more--head { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}

/* ---------- C2 hero (startsidan): utfallande split, vågen i full viewportbredd ----------
   Vågen är ett barn till sektionen (inte till bilden) och täcker hela sektionens bredd, så övergången
   vit/bild → våg → akva aldrig beror på innehållets eller bildens maxbredd. */
.hero-home { position: relative; overflow: hidden; background: var(--white); padding-top: 36px; }
.hero-home__text { position: relative; z-index: 1; padding-bottom: 36px; }
.hero-home h1 { font-size: clamp(2.2rem, 1.3rem + 2.7vw, 3.55rem); max-width: 16ch; }
.hero-home .lead { margin-top: 20px; }
.hero-home .actions { margin-top: 28px; }
.hero-home__media { position: relative; margin: 0; }
.hero-home__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 50%; }
.hero-home__media figcaption { position: absolute; top: 16px; left: var(--gutter); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: .85rem; font-weight: 600; }
.hero-home__media figcaption .pin { width: 16px; height: 16px; color: var(--teal); }
.wave { position: absolute; left: 0; width: 100%; pointer-events: none; }
.wave--hero { z-index: 2; bottom: -1px; height: 40px; color: var(--aqua); }
.swash { position: relative; display: inline-block; white-space: nowrap; }
.swash__line { position: absolute; left: -2%; bottom: -.14em; width: 104%; height: .3em; color: var(--turq); pointer-events: none; }
@media (min-width: 768px) {
  .hero-home { padding-top: 56px; }
  .hero-home__media img { aspect-ratio: 16 / 9; }
  .wave--hero { height: 60px; }
}
@media (min-width: 1024px) {
  .hero-home { display: flex; align-items: center; min-height: clamp(560px, calc(100vh - var(--header-h)), 680px); padding-top: 0; }
  .hero-home__inner { width: 100%; }
  .hero-home__text { max-width: min(600px, calc(54vw - var(--gutter) - 56px)); padding: 40px 0 112px; }
  .hero-home__media { position: absolute; top: 0; right: 0; bottom: 0; width: 46vw; }
  .hero-home__media picture, .hero-home__media img { height: 100%; }
  .hero-home__media img { aspect-ratio: auto; object-position: 50% 50%; }
  .hero-home__media figcaption { top: 24px; left: 24px; }
  .wave--hero { height: 92px; }
}

/* ---------- C3 inre hero ---------- */
.page-hero { padding: 20px 0 48px; background: var(--white); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .9rem; color: var(--slate); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin: 0 8px; color: #8fa2b3; }
.crumbs a { color: var(--slate); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.page-hero__grid { display: grid; gap: 32px; margin-top: 28px; align-items: center; }
.page-hero h1 { max-width: 20ch; }
.page-hero .lead { margin-top: 18px; }
.page-hero__media--illus { display: none; justify-self: center; place-items: center; width: min(100%, 260px); aspect-ratio: 1; border-radius: 50%; background: var(--aqua); color: var(--ink); }
.page-hero__media--illus .illus { width: 62%; height: 62%; }
.page-hero__media--photo { border-radius: var(--radius); overflow: hidden; }
.page-hero__media--photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); }
.hero-facts div { max-width: 30ch; }
@media (min-width: 768px) { .hero-facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, max-content); column-gap: 36px; } .hero-facts div { max-width: none; } }
.hero-facts dt { margin-bottom: 2px; }
.hero-facts dt { font-size: .8rem; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: .06em; }
.hero-facts dd { font-weight: 600; line-height: 1.35; }
@media (min-width: 768px) { .page-hero { padding: 28px 0 72px; } }
@media (min-width: 1024px) { .page-hero__media--illus { display: grid; } }
@media (min-width: 1024px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; margin-top: 36px; }
  .page-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
  .page-hero__media--illus { width: 340px; }
  .page-hero__media--photo { width: 100%; }
  .page-hero__grid--photo { grid-template-columns: minmax(0, 1fr) 440px; }
  .page-hero__grid--photo .page-hero__media--photo img { aspect-ratio: 4 / 5; }
  .page-hero__media--uppsala-fyrisan img { object-position: 28% 62%; }
}
.illus .ill-accent { color: var(--teal); stroke: var(--teal); }

/* ---------- C4 informationsrad / löften / steg ---------- */
.info-grid { display: grid; column-gap: 32px; row-gap: 28px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.info-grid > li { padding: 22px 0 0; border-top: 1px solid var(--line); }
.tone-aqua .info-grid > li, .tone-cloud .info-grid > li { border-top-color: rgba(13, 45, 77, .16); }
.info-grid h3 { margin: 14px 0 8px; }
.info-grid p { color: var(--slate); margin: 0; }
.info-grid__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--aqua); color: var(--teal); }
.tone-aqua .info-grid__icon { background: var(--white); }
.info-grid__roof { display: inline-flex; }
.info-grid__roof .roof { width: 24px; height: 24px; color: var(--teal); }
.info-grid--two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (min-width: 1024px) { .info-grid--two { grid-template-columns: 1fr 1fr; } .info-grid--promises { grid-template-columns: repeat(4, 1fr); } }
.info-grid--local > li { padding-top: 18px; border-top: 2px solid var(--turq); }
.info-grid--local h3 { margin-top: 0; }

.steps { display: grid; gap: 20px; counter-reset: s; }
.steps li { position: relative; padding: 0 0 0 64px; min-height: 48px; }
.steps__n { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--turq); color: var(--ink); font: 700 1.1rem var(--display); }
.steps h3 { margin: 8px 0 6px; }
.steps p { color: var(--slate); margin: 0; }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .steps li { padding: 64px 0 0; }
  .steps li:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 56px; right: -16px; height: 2px; background: var(--line); }
  .local-main .steps { grid-template-columns: repeat(2, 1fr); }
  .local-main .steps li::after { display: none; }
}

/* ---------- C5 tjänsteplattor ---------- */
.tiles { display: grid; gap: 16px; }
.tile > a { display: flex; flex-direction: column; gap: 18px; height: 100%; padding: 28px; border-radius: var(--radius); background: var(--white); border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.tile > a:hover { border-color: var(--turq); color: var(--ink); }
.tone-aqua .tile > a { border-color: transparent; }
.tone-aqua .tile > a:hover { border-color: var(--turq); }
.tile__illus { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--aqua); color: var(--ink); }
.tile__illus .illus { width: 56px; height: 56px; }
.tile h3 { font-size: 1.35rem; margin-bottom: 8px; }
.tile p { color: var(--slate); }
.tile .more { margin-top: auto; }
@media (min-width: 768px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .tiles--home { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; }
  .tiles--home .tile--lead { grid-row: span 2; }
  .tiles--home .tile--lead > a { background: var(--aqua); border-color: transparent; justify-content: space-between; }
  .tiles--home .tile--lead .tile__illus { width: 140px; height: 140px; background: var(--white); }
  .tiles--home .tile--lead .tile__illus .illus { width: 100px; height: 100px; }
  .tiles--home .tile--lead h3 { font-size: 1.9rem; }
  .tiles--home .tile:not(.tile--lead):nth-child(4) { grid-column: 2 / span 2; }
  .tiles--home .tile:not(.tile--lead):nth-child(4) > a { flex-direction: row; align-items: center; }
  .tiles--four { grid-template-columns: repeat(4, 1fr); }
  .tiles--3 { grid-template-columns: repeat(3, 1fr); }
  .tiles--4 { grid-template-columns: repeat(2, 1fr); }
}
.tile--small > a { padding: 24px; }
.tile--small h3 { font-size: 1.2rem; }

/* ---------- C7 prisstege ---------- */
.price-split { display: grid; gap: 28px; align-items: start; }
.price-split__note { color: var(--ink); }
@media (min-width: 1024px) { .price-split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; } }
.ladder { padding: 0; }
.tone-cloud .ladder thead th, .tone-cloud .ladder tbody th, .tone-cloud .ladder tbody td { border-color: rgba(13, 45, 77, .14); }
.ladder caption { caption-side: top; text-align: left; padding: 14px 0 10px; font-size: .92rem; color: var(--slate); }
.ladder thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); font-weight: 600; text-align: left; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ladder tbody th, .ladder tbody td { padding: 16px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.ladder tbody tr:last-child th, .ladder tbody tr:last-child td { border-bottom: 0; }
.ladder tbody th { font-weight: 600; }
.ladder__price { font-family: var(--display); font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums; white-space: nowrap; padding-inline: 12px !important; }
.ladder tbody tr:last-child .ladder__price { font-family: var(--body); font-weight: 600; font-size: 1rem; white-space: normal; }
.ladder__bar { width: 34%; }
.ladder__bar span { display: block; height: 10px; width: var(--w); border-radius: 999px; background: var(--turq); }
.ladder__bar .ladder__open { width: 100%; height: 10px; background: none; border: 2px dashed var(--foam); }
@media (max-width: 479px) { .ladder__bar { display: none; } .ladder thead th:last-child { display: none; } }

/* ---------- C6 paket / jämförelser ---------- */
.pkg-cards { display: grid; gap: 16px; margin-bottom: 32px; }
@media (min-width: 768px) { .pkg-cards { grid-template-columns: 1fr 1fr; } }
.pkg-card { padding: 28px; border-radius: var(--radius); background: var(--aqua); }
.pkg-card--komplett { background: var(--white); border: 2px solid var(--turq); }
.tone-cloud .pkg-card--bas { background: var(--white); }
.pkg-card__tag { display: inline-block; font-size: .85rem; font-weight: 600; color: var(--teal); margin-bottom: 10px; }
.pkg-card h3 { font-size: 1.45rem; }
.pkg-card__price { font-family: var(--display); font-weight: 700; font-size: 1.6rem; margin: 10px 0 12px; }
.pkg-card__price small { font-family: var(--body); font-weight: 500; font-size: .95rem; color: var(--slate); }
.pkg-table { border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: var(--white); }
.pkg-table table { font-size: 1rem; }
.pkg-table thead th { background: var(--ink); color: var(--white); font-weight: 600; padding: 14px 16px; text-align: left; }
.pkg-table thead th:not(:first-child), .pkg-table td { width: 92px; text-align: center; }
.pkg-table td .icon { margin-inline: auto; }
.pkg-table tbody th, .pkg-table td { padding: 12px 16px; border-top: 1px solid var(--line); font-weight: 400; text-align: left; }
.pkg-table td { text-align: center; }
.pkg__room th { background: var(--aqua); font-family: var(--display); font-weight: 600 !important; font-size: 1.05rem; }
@media (max-width: 479px) { .pkg-table thead th:not(:first-child), .pkg-table td { width: 64px; padding-inline: 6px; } .pkg-table tbody th { padding-left: 12px; } }

.compare { background: var(--white); border-radius: var(--radius); overflow: hidden; }
.compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { background: var(--ink); color: var(--white); font-weight: 600; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare tbody th a { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
@media (max-width: 767px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tr { display: block; padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .compare th, .compare td { display: block; padding: 4px 0; border: 0; }
  .compare td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--slate); }
}

.choose-list { display: grid; gap: 16px; }
.choose { display: grid; gap: 20px; padding: 28px; border-radius: var(--radius); border: 1.5px solid var(--line); }
.choose__illus { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--aqua); }
.choose__illus .illus { width: 58px; height: 58px; color: var(--ink); }
.choose h3 { font-size: 1.5rem; margin-bottom: 12px; }
.choose h3 a { color: var(--ink); text-decoration: none; }
.choose h3 a:hover { color: var(--teal); text-decoration: underline; }
.choose dl { display: grid; gap: 10px; margin-bottom: 8px; }
.choose dt { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--slate); }
@media (min-width: 768px) { .choose { grid-template-columns: 96px 1fr; } .choose dl { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 1024px) { .choose-list { grid-template-columns: 1fr 1fr; } }

.incl-grid { display: grid; gap: 14px; }
@media (min-width: 768px) { .incl-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .incl-grid { grid-template-columns: repeat(3, 1fr); } }
.incl-grid li { display: flex; gap: 14px; padding: 22px; border-radius: 20px; background: var(--cloud); }
.incl-grid .check { margin-top: 2px; }
.incl-grid h3 { margin-bottom: 6px; }
.incl-grid p { color: var(--slate); margin: 0; }

.rooms { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 768px) { .rooms { grid-template-columns: 1fr 1fr; } }
.rooms__group { padding: 24px; border-radius: 20px; background: var(--cloud); }
.rooms__group h3 { margin-bottom: 12px; }
.checks { display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks .icon { width: 20px; height: 20px; margin-top: 3px; }

.freq { display: grid; gap: 14px; margin-top: 24px; }
@media (min-width: 768px) { .freq { grid-template-columns: 1fr 1fr; } }
.freq li { padding: 22px; border-radius: 20px; background: var(--cloud); }
.freq h3 { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.freq h3 .icon { color: var(--teal); }
.freq p { color: var(--slate); margin: 0; }

.duo { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 768px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo__col { padding: 26px; border-radius: 20px; background: var(--cloud); }
.duo__col--we { background: var(--aqua); }
.duo__col h3 { margin-bottom: 12px; }

/* ---------- C13 berättelsesplit ---------- */
.story__grid { display: grid; gap: 32px; align-items: center; }
.story__media { border-radius: var(--radius); overflow: hidden; }
.story__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.story__text h2 { margin-bottom: 18px; }
.statement { font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem); line-height: 1.3; color: var(--ink); padding-left: 20px; border-left: 4px solid var(--turq); margin: 0 0 22px; }
@media (min-width: 1024px) {
  .story__grid { grid-template-columns: 1fr 1fr; gap: 72px; }
  .story--reverse .story__media { order: 2; }
  .story__grid--panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .story__grid--rut { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .story__grid--tight { gap: 40px; }
}
.list-panel { padding: 28px; border-radius: var(--radius); background: var(--aqua); }
.tone-aqua .list-panel { background: var(--white); }
.list-panel__title { display: flex; gap: 10px; align-items: center; font-weight: 600; margin-bottom: 16px; }
.list-panel__note { margin-top: 16px; color: var(--slate); font-size: .95rem; }
.info-panel { display: flex; gap: 18px; align-items: flex-start; max-width: 820px; padding: 28px; border-radius: var(--radius); background: var(--aqua); font-size: 1.1rem; }
.info-panel__icon { width: 30px; height: 30px; color: var(--teal); margin-top: 2px; }
.mini-facts { display: grid; gap: 12px; }
.mini-facts dt { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--slate); }
.mini-facts dd { font-weight: 500; }

.rut-points { display: grid; gap: 12px; }
.rut-points div { padding: 20px 22px; border-radius: 18px; background: var(--cloud); }
.rut-points dt { font-family: var(--display); font-weight: 600; font-size: 1.1rem; margin-bottom: 4px; }
.rut-points dd { color: var(--slate); }
.source { margin-top: 16px; font-size: .95rem; color: var(--slate); }

/* ---------- C8 områdesgrupper ---------- */
.area-groups { display: grid; gap: 32px; }
.area-group__title { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); font-family: var(--body); font-weight: 700; margin-bottom: 14px; }
.area-group__head p { color: var(--slate); margin: -6px 0 16px; }
.area-cards { display: grid; gap: 14px; }
.area-card { padding: 24px; border-radius: 20px; background: var(--white); }
.area-card h3 { font-size: 1.4rem; }
.area-card h3 a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.area-card h3 a:hover span { text-decoration: underline; }
.area-card__dir { font-size: .9rem; font-weight: 600; color: var(--teal); margin: 4px 0 10px; }
.area-card p:not(.area-card__dir) { color: var(--slate); }
.area-card__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.area-card__links a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; background: var(--aqua); color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; }
.area-card__links a:hover { background: var(--ink); color: var(--white); }
.tone-aqua .area-card__links a { background: var(--cloud); }
.tone-aqua .area-card__links a:hover { background: var(--ink); }
@media (min-width: 768px) { .area-cards { grid-template-columns: 1fr 1fr; } .area-card--home { grid-column: 1 / -1; } }
@media (min-width: 768px) { .area-groups--hub .area-card--hub:only-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .area-groups { grid-template-columns: 1.55fr 1fr; gap: 40px; }
  .area-groups .area-group:last-child .area-cards { grid-template-columns: 1fr; }
  /* Grupperna sida vid sida; kolumnbredden följer antalet områden i varje grupp (--hub-cols/--n från byggaren),
     så korten bildar en rad. Subgrid håller korten i linje oavsett hur gruppernas ingresser bryts. */
  .area-groups--hub { grid-template-columns: var(--hub-cols, 1fr); grid-template-rows: auto auto; gap: 0 24px; }
  .area-groups--hub .area-group { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .area-groups--hub .area-cards { grid-template-columns: repeat(var(--n, 3), 1fr) !important; }
  .area-groups--hub .area-card--hub:first-child { grid-column: auto; }
  .area-groups--hub .area-group__head p { margin: 0 0 16px; max-width: 46ch; }
}
.area-card--hub { display: flex; flex-direction: column; }
.area-card--hub .more { margin-top: 18px; }

/* ---------- C9 frågor ---------- */
.faq { max-width: 860px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 16px 4px; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 600; font-size: 1.12rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal); }
.faq__icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--aqua); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--ink); border-radius: 2px; transition: transform .18s var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq details[open] .faq__icon { background: var(--turq); }
.faq details[open] .faq__icon::after { transform: rotate(0deg); }
.faq details[open] summary { color: var(--ink); }
.faq__answer { padding: 0 4px 22px; max-width: 72ch; color: var(--slate); }

/* ---------- C10 CTA-band ---------- */
.cta-band { position: relative; z-index: 1; background: var(--ink); color: var(--white); padding: 56px 0 64px; }
.wave--cta { bottom: calc(100% - 1px); height: 40px; color: var(--ink); }
.cta-band h2 { color: var(--white); margin-bottom: 12px; }
.cta-band p { color: #D4E2EC; max-width: 58ch; margin: 0; }
.cta-band__in { display: grid; gap: 28px; align-items: center; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.cta-band .btn--primary:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.cta-band__tel { display: inline-flex; align-items: center; gap: 10px; color: var(--foam); font-weight: 600; font-size: 1.15rem; text-decoration: none; min-height: 44px; }
.cta-band__tel:hover { color: var(--white); }
.cta-band :focus-visible, .site-footer :focus-visible { outline-color: var(--foam); }
@media (min-width: 768px) { .wave--cta { height: 56px; } }
@media (min-width: 1024px) { .cta-band { padding: 72px 0 88px; } .cta-band__in { grid-template-columns: 1.4fr 1fr; } .cta-band__actions { justify-content: flex-end; } }

/* ---------- C10b CTA-bandets luftbubblor (dekor) ----------
   Ren CSS, inget skript. Lagret ligger under innehållet, är aria-hidden och tar inga klick.
   Varje span stiger sin egen sträcka (--rise, annars hela bandets höjd) i egen takt; ::before ritar
   cirkeln och gungar långsamt i sidled. Bara transform och opacity animeras, så inget påverkar layouten.
   Banorna håller bubblorna borta från text och knappar i alla bredder: marginalerna (--edge = avståndet
   från bandets kant till innehållet), spalten mellan text och knappar (från 1024 px) och bandets nedre
   luft, där stigningen tonar ut innan den når innehållet. */
.cta-band { background-image: radial-gradient(90% 140% at 0% 100%, rgb(0 180 198 / .13), transparent 58%); }
.cta-band__in { position: relative; z-index: 1; }
.cta-band__bubbles { --edge: calc(max(0px, (100% - 1264px) / 2) + var(--gutter)); --inner: calc(min(100%, 1264px) - 2 * var(--gutter)); --low: 50px; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: layout paint; }
.cta-band__bubbles > span { position: absolute; top: 100%; width: var(--s); height: var(--rise, 100%); animation: bubble-rise var(--d) cubic-bezier(.42, .1, .62, .92) var(--delay) infinite; }
.cta-band__bubbles > span::before { content: ""; position: absolute; top: 0; left: 0; width: var(--s); height: var(--s); border-radius: 50%; background: rgb(127 221 231 / var(--a, .16)); animation: bubble-sway var(--sway) ease-in-out var(--delay) infinite alternate; }
.cta-band__bubbles > .is-ring::before { background: none; box-shadow: inset 0 0 0 1px rgb(127 221 231 / var(--a, .3)); }
.cta-band__bubbles > .is-glass::before { background: radial-gradient(circle at 34% 30%, rgb(255 255 255 / .2), rgb(127 221 231 / .09) 42%, rgb(127 221 231 / .03) 68%); box-shadow: inset 0 0 0 1px rgb(127 221 231 / .16); }
.cta-band__bubbles > .lane-l { left: calc(var(--edge) * var(--f) - var(--s) / 2); }
.cta-band__bubbles > .lane-r { left: calc(100% - var(--edge) * var(--f) - var(--s) / 2); }
.cta-band__bubbles > .lane-lx { left: calc(var(--edge) - var(--s) - max(4px, var(--edge) * .14)); }
.cta-band__bubbles > .lane-rx { left: calc(100% - var(--edge) + max(4px, var(--edge) * .14)); }
.cta-band__bubbles > .lane-m { left: calc(var(--edge) + (var(--inner) - 28px) * 7 / 12 + 14px - var(--s) / 2); }
.cta-band__bubbles > .lane-b { left: var(--at); --rise: var(--low); }
/* storlek · täthet · varv · fördröjning · sidledsgung · viloläge vid reducerad rörelse */
.cta-band__bubbles > :nth-child(1)  { --f: .42; --s: 9px;  --a: .2;  --d: 23s;   --delay: -4s;  --drift: 3px;  --sway: 6s;   --rest: -58%; }
.cta-band__bubbles > :nth-child(2)  { --f: .72; --s: 5px;  --a: .26; --d: 18s;   --delay: -11s; --drift: 2px;  --sway: 5s;   --rest: -24%; }
.cta-band__bubbles > :nth-child(3)  {           --s: 88px; --a: .1;  --d: 46s;   --delay: -28s; --drift: 3px;  --sway: 11s;  --rest: -34%; }
.cta-band__bubbles > :nth-child(4)  { --f: .55; --s: 34px;           --d: 32s;   --delay: -17s; --drift: 10px; --sway: 9s;   --rest: -62%; }
.cta-band__bubbles > :nth-child(5)  { --f: .3;  --s: 6px;  --a: .24; --d: 20s;   --delay: -15s; --drift: 2px;  --sway: 6s;   --rest: -70%; }
.cta-band__bubbles > :nth-child(6)  { --f: .58; --s: 10px; --a: .32; --d: 26s;   --delay: -3s;  --drift: 2px;  --sway: 7s;   --rest: -40%; }
.cta-band__bubbles > :nth-child(7)  {           --s: 60px; --a: .12; --d: 40s;   --delay: -9s;  --drift: 3px;  --sway: 10s;  --rest: -52%; }
.cta-band__bubbles > :nth-child(8)  { --f: .5;  --s: 28px;           --d: 29s;   --delay: -22s; --drift: 9px;  --sway: 8s;   --rest: -28%; }
.cta-band__bubbles > :nth-child(9)  { --f: .78; --s: 12px; --a: .18; --d: 24s;   --delay: -6s;  --drift: 6px;  --sway: 6s;   --rest: -76%; }
.cta-band__bubbles > :nth-child(10) {           --s: 12px; --a: .3;  --d: 25s;   --delay: -7s;  --drift: 4px;  --sway: 7s;   --rest: -30%; }
.cta-band__bubbles > :nth-child(11) {           --s: 6px;  --a: .24; --d: 19s;   --delay: -13s; --drift: 5px;  --sway: 5s;   --rest: -66%; }
.cta-band__bubbles > :nth-child(12) {           --s: 16px;           --d: 33s;   --delay: -21s; --drift: 3px;  --sway: 9s;   --rest: -48%; }
.cta-band__bubbles > :nth-child(13) { --at: 24%; --s: 6px;  --a: .22; --d: 9s;   --delay: -2s;  --drift: 4px;  --sway: 4s;   --rest: -60%; }
.cta-band__bubbles > :nth-child(14) { --at: 47%; --s: 13px;           --d: 12s;  --delay: -6s;  --drift: 5px;  --sway: 5s;   --rest: -45%; }
.cta-band__bubbles > :nth-child(15) { --at: 71%; --s: 10px; --a: .28; --d: 11s;  --delay: -4s;  --drift: 4px;  --sway: 4.5s; --rest: -70%; }
.cta-band__bubbles > :nth-child(16) { --at: 10%; --s: 7px;  --a: .18; --d: 13s;  --delay: -9s;  --drift: 5px;  --sway: 5.5s; --rest: -38%; }
.cta-band__bubbles > :nth-child(17) { --at: 87%; --s: 5px;  --a: .26; --d: 8.5s; --delay: -5s;  --drift: 3px;  --sway: 4s;   --rest: -55%; }
.cta-band__bubbles > :nth-child(18) { --at: 36%; --s: 9px;  --a: .24; --d: 10.5s; --delay: -8s; --drift: 4px;  --sway: 5s;   --rest: -65%; }
/* mobil: marginalbanor + nedre luft · 768: en bubbla till · 1024: spalten mellan text och knappar · 1400: breda marginaler */
.cta-band__bubbles > :is(:nth-child(4), :nth-child(8), :nth-child(9), :nth-child(10), :nth-child(11), :nth-child(12), :nth-child(17), :nth-child(18)) { display: none; }
@media (min-width: 768px) { .cta-band__bubbles > :nth-child(17) { display: block; } }
@media (min-width: 1024px) { .cta-band__bubbles { --low: 72px; } .cta-band__bubbles > :is(:nth-child(10), :nth-child(11), :nth-child(12), :nth-child(18)) { display: block; } }
@media (min-width: 1400px) { .cta-band__bubbles > :is(:nth-child(4), :nth-child(8), :nth-child(9)) { display: block; } }
@keyframes bubble-rise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 14% { opacity: 1; } 68% { opacity: 1; } 100% { transform: translate3d(0, -100%, 0); opacity: 0; } }
@keyframes bubble-sway { from { transform: translate3d(calc(var(--drift) * -1), 0, 0); } to { transform: translate3d(var(--drift), 0, 0); } }

/* ---------- C12 lokal layout + faktaskena ---------- */
.local-layout { display: grid; gap: 8px; padding-top: 8px; }
.fact-rail { padding: 26px; border-radius: var(--radius); background: var(--aqua); align-self: start; }
.fact-rail__title { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin-bottom: 16px; }
.fact-rail dl { display: grid; gap: 12px; margin-bottom: 20px; }
.fact-rail dl div { padding-bottom: 12px; border-bottom: 1px solid rgba(13, 45, 77, .12); }
.fact-rail dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--slate); }
.fact-rail dd { font-weight: 500; line-height: 1.45; }
.fact-rail .btn { width: 100%; }
.section--in { padding-block: 44px; }
.local-main > .section--in + .section--in { border-top: 1px solid var(--line); }
.section--in > h2 { margin-bottom: 18px; }
.section--in > p { max-width: 68ch; }
.section--in .info-grid { margin-top: 8px; }
.section--in .faq { margin-top: 8px; }
@media (min-width: 1024px) {
  .local-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; grid-template-areas: "main rail"; padding-top: 0; }
  .fact-rail { grid-area: rail; position: sticky; top: calc(var(--header-h) + 24px); margin-top: 44px; }
  .local-main { grid-area: main; }
  .section--in { padding-block: 56px; }
  .local-main .info-grid--local { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ---------- C15 syskonlänkar ---------- */
.sibling-groups { display: grid; gap: 28px; }
.sibling-groups h3 { font-size: 1.1rem; margin-bottom: 14px; }
@media (min-width: 1024px) { .sibling-groups { grid-template-columns: 1fr 1fr; gap: 40px; } }
.link-cards { display: grid; column-gap: 32px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.link-cards > li { border-top: 1px solid var(--line); }
.tone-aqua .link-cards > li { border-top-color: rgba(13, 45, 77, .16); }
.link-cards a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; min-height: 64px; height: 100%; padding: 14px 0; color: var(--ink); text-decoration: none; }
.link-cards a:hover { color: var(--ink); }
.link-cards__label { font-family: var(--display); font-weight: 600; font-size: 1.12rem; line-height: 1.2; transition: color .15s var(--ease); }
.link-cards a:hover .link-cards__label { color: var(--teal); }
.link-cards a:hover .arrow { transform: translateX(4px); }
.link-cards__sub { grid-row: 2; font-size: .9rem; color: var(--slate); }
.link-cards .arrow { grid-row: 1 / span 2; grid-column: 2; color: var(--teal); }
.sibling-groups .link-cards { grid-template-columns: 1fr; }
@media (min-width: 640px) { .sibling-groups .link-cards { grid-template-columns: 1fr 1fr; } }
/* Sex länkar i två jämna rader på desktop (/om-oss/). */
@media (min-width: 900px) { .section--links-three .link-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- C11 kontakt och formulär ---------- */
.contact-card { max-width: 760px; padding: 32px; border-radius: var(--radius); background: var(--cloud); }
.contact-lines { display: grid; gap: 12px; margin: 20px 0 24px; }
.contact-lines li { display: flex; gap: 12px; align-items: center; font-weight: 500; }
.contact-lines .icon { color: var(--teal); }
.section--form { padding-top: 16px; }
.form-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1024px) { .form-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; } .contact-panel { position: sticky; top: calc(var(--header-h) + 24px); } }
.form-card { padding: 28px 22px; border-radius: var(--radius); background: var(--cloud); }
@media (min-width: 768px) { .form-card { padding: 40px; } }
.form-card > h2 { margin-bottom: 10px; }
.form-card > p { color: var(--slate); }
.lead-form { display: grid; gap: 18px; margin-top: 24px; }
.field-row { display: grid; gap: 18px; }
@media (min-width: 768px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; }
.optional { font-weight: 400; color: var(--slate); }
.field-hint { margin: 0; font-size: .92rem; color: var(--slate); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; color: var(--ink); background: var(--white); border: 1.5px solid var(--field); border-radius: 12px; }
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D2D4D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: 44px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--turq); outline-offset: 1px; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field-error { color: var(--error); font-size: .92rem; font-weight: 500; min-height: 0; }
.field-error:empty { display: none; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-weight: 400 !important; }
.consent input { width: 22px; height: 22px; min-height: 0; margin-top: 3px; accent-color: var(--teal); flex: none; }
.btn--submit { justify-self: start; min-width: 200px; }
.btn--submit[data-sending="true"] { opacity: .75; cursor: progress; }
.form-status { margin: 0; padding: 14px 16px; border-radius: 12px; font-weight: 500; }
.form-status--ok { background: #DDF3E4; color: #0F4D2A; }
.form-status--error { background: #FDECEC; color: var(--error); }
.form-status--info { background: var(--aqua); color: var(--ink); }
.contact-panel { padding: 28px; border-radius: var(--radius); background: var(--aqua); }
.contact-panel h2 { font-size: 1.5rem; }
.contact-panel__after { color: var(--slate); margin: 0; }

/* ---------- prose (integritetspolicy) ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.6rem; margin: 40px 0 14px; }
.prose h3 { margin: 24px 0 10px; }
.prose section:first-child h2 { margin-top: 0; }
.prose ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: 6px; }

/* ---------- 404 ---------- */
.notfound h1 { margin-bottom: 16px; }
.notfound .link-cards { margin-top: 32px; max-width: 900px; }

/* ---------- C14 footer ---------- */
.site-footer { position: relative; z-index: 2; background: var(--ink-deep); color: #C9D8E4; padding: 56px 0 28px; margin-top: 40px; }
.cta-band + .site-footer, main:has(> .cta-band:last-child) + .site-footer { margin-top: 0; }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--foam); }
.footer-grid { display: grid; gap: 36px; }
.brand--footer img { width: 150px; }
.footer-brand p { margin: 18px 0; max-width: 42ch; }
.footer-contact { font-style: normal; line-height: 1.8; }
.footer-social { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; }
.footer-social .icon { width: 20px; height: 20px; flex: none; color: var(--foam); }
.footer-social a { display: inline-flex; align-items: center; min-height: 36px; }
.footer-col h2 { font-family: var(--body); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--foam); margin-bottom: 14px; }
.footer-col li { margin-bottom: 4px; }
.footer-col a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .92rem; }
.footer-bottom button { background: none; border: 0; padding: 0; color: var(--white); font: inherit; text-decoration: underline; cursor: pointer; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; } .footer-brand { grid-column: auto; } .site-footer { padding-top: 72px; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  /* CTA-bubblorna står still i sina banor i stället för att försvinna. */
  .cta-band__bubbles > span { animation: none !important; transform: translate3d(0, var(--rest), 0); }
  .cta-band__bubbles > span::before { animation: none !important; }
}
.area-card h3 .pin { width: 22px; height: 22px; color: var(--teal); }

/* ---------- mobila förtätningar ---------- */
@media (max-width: 767px) {
  .info-grid > li { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding: 20px 0 0; }
  .info-grid > li > :first-child { grid-row: 1 / span 2; }
  .info-grid > li h3 { margin: 4px 0 6px; }
  .info-grid__roof { padding-top: 8px; }
  .tile > a { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; padding: 22px; }
  .tile__illus { width: 56px; height: 56px; }
  .tile__illus .illus { width: 40px; height: 40px; }
  .tile h3 { font-size: 1.2rem; margin-bottom: 6px; }
  .footer-grid { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col:last-child { grid-column: 1 / -1; }
}
.form-grid > *, .lead-form, .field, .field-row > * { min-width: 0; }

/* ---------- revision efter kritik ---------- */
.fact-rail__title { font-family: var(--display); font-weight: 600; }
.info-grid--local > li { display: block; }
.info-grid--plain > li { display: block; }
.info-grid--plain h3 { margin-top: 0; }
.rooms { display: block; columns: 1; column-gap: 16px; }
.rooms__group { break-inside: avoid; margin-bottom: 16px; }
@media (min-width: 768px) { .rooms { columns: 2; } }
.pkg-cards--even { margin-bottom: 8px; margin-top: 24px; }
.pkg-card--even { background: var(--cloud); border: 0; }
.pkg-card--even .checks { margin-top: 14px; }
.section--in .ladder { margin-top: 20px; }
.incl-grid--two { margin-top: 24px; }
@media (min-width: 768px) { .incl-grid--two { grid-template-columns: 1fr 1fr !important; } }
.list-panel--after { margin-top: 16px; }
.page-hero__aside { display: none; }
@media (min-width: 1024px) { .page-hero__aside { display: block; } }
.hero-services { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero-services a { display: grid; justify-items: center; gap: 10px; padding: 22px 12px; border-radius: 20px; background: var(--aqua); color: var(--ink); text-decoration: none; font-weight: 600; text-align: center; }
.hero-services a:hover { background: #d6eef3; color: var(--ink); }
.hero-services .illus { width: 64px; height: 64px; }
.hero-card { padding: 28px; border-radius: var(--radius); background: var(--aqua); }
.hero-card__title { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 14px; }
.hero-prices { display: grid; gap: 10px; }
.hero-prices div { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px; border-radius: 14px; background: var(--white); }
.hero-prices dt { font-weight: 600; }
.hero-prices dd { font-family: var(--display); font-weight: 700; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.hero-card__note { margin: 14px 0 0; color: var(--slate); font-size: .95rem; }
.hero-card .contact-lines { margin: 0; }
.hero-areas { display: grid; gap: 8px; }
.hero-areas a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--aqua); color: var(--ink); text-decoration: none; }
.hero-areas a:hover { background: #d6eef3; color: var(--ink); }
.hero-areas .pin { color: var(--teal); }
.hero-areas strong { display: block; font-family: var(--display); font-weight: 600; }
.hero-areas small { display: block; color: var(--slate); font-size: .88rem; }
.tile__packages { display: grid; gap: 4px; margin: 4px 0 18px; padding: 16px 18px; border-radius: 16px; background: var(--white); font-size: 1rem; }
.tile__packages strong { font-family: var(--display); }
.tile__packages small { color: var(--slate); font-size: .88rem; }
@media (max-width: 767px) { .tile__packages { display: none; } }


/* ================= Designrevision 2026-09-25 — startsidans rytm ================= */
.section-title-lg { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); }

/* C4 löftesremsa — öppen, utan kort */
.promise-strip { padding-block: 40px 64px; }
.promise-strip__grid { display: grid; gap: 24px; }
.promise-strip h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); max-width: 13ch; }
.promise-strip__list li { padding: 20px 0; border-top: 1px solid rgba(13, 45, 77, .16); }
.promise-strip h3 { font-size: 1.3rem; margin-bottom: 6px; }
.promise-strip p { margin: 0; color: var(--slate); }
@media (min-width: 768px) { .promise-strip__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } }
@media (min-width: 1024px) { .promise-strip { padding-block: 48px 96px; } .promise-strip__grid { gap: 36px; } .promise-strip h2 { max-width: none; } .promise-strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 36px; } .promise-strip__list li { padding-top: 24px; } }

/* C5 tjänsteindex */
.svc-index__grid { display: grid; gap: 32px; }
.svc-index__intro h2, .price-feature h2, .steps-row h2, .faq-split h2, .areas-dark h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); margin-bottom: 14px; }
.svc-index__intro h2 { max-width: 14ch; }
.svc-index__intro .section-lead, .price-feature .section-lead, .steps-row .section-lead { color: var(--slate); font-size: 1.1rem; margin-bottom: 8px; }
.svc-index__media { margin: 28px 0 0; border-radius: var(--radius); overflow: hidden; }
.svc-index__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.svc-list { border-top: 1px solid var(--line); }
.svc-list > li { border-bottom: 1px solid var(--line); }
.svc-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 28px; gap: 16px; align-items: start; padding: 24px 4px; color: var(--ink); text-decoration: none; }
.svc-row:hover { color: var(--ink); }
.svc-row__illus { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--aqua); }
.svc-row__illus .illus { width: 38px; height: 38px; }
.svc-row__name { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.2rem); line-height: 1.08; margin-bottom: 8px; transition: color .15s var(--ease); }
.svc-row__text { margin: 0 0 12px; max-width: 54ch; color: var(--slate); }
.svc-row__meta, .svc-row__rut { display: block; font-size: .95rem; }
.svc-row__meta { font-weight: 600; }
.svc-row__rut { margin-top: 2px; font-weight: 600; color: var(--teal); }
.svc-row__packages { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.svc-row__packages strong { font-family: var(--display); }
.svc-row__muted { font-size: .9rem; color: var(--slate); }
.svc-row__go { align-self: center; color: var(--teal); }
.svc-row__go .arrow { width: 24px; height: 24px; }
.svc-row:hover .svc-row__name { color: var(--teal); }
.svc-row:hover .arrow { transform: translateX(4px); }
@media (max-width: 767px) {
  .svc-row { grid-template-columns: minmax(0, 1fr) 28px; row-gap: 12px; padding: 24px 0; }
  .svc-row__illus { grid-row: 1; grid-column: 1; width: 48px; height: 48px; }
  .svc-row__illus .illus { width: 34px; height: 34px; }
  .svc-row__go { grid-row: 1; grid-column: 2; }
  .svc-row__main { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .svc-index__grid { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
  .svc-index__media img { aspect-ratio: 4 / 5; }
  .svc-row { grid-template-columns: 72px minmax(0, 1fr) 40px; gap: 24px; padding: 30px 8px; }
  .svc-row__illus { width: 72px; height: 72px; }
  .svc-row__illus .illus { width: 52px; height: 52px; }
}

/* C7 pris — typografiskt från-pris och öppen tabell */
.price-feature__grid { display: grid; gap: 36px; align-items: start; }
.price-big { display: grid; gap: 4px; margin: 28px 0 24px; padding-left: 20px; border-left: 4px solid var(--turq); }
.price-big__label { font-weight: 600; color: var(--slate); }
.price-big__value { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 1.8rem + 3vw, 4.2rem); line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.price-big__note { font-size: .95rem; color: var(--slate); }
@media (min-width: 1024px) { .price-feature__grid { grid-template-columns: 5fr 6fr; gap: 80px; } .price-feature__table { padding-top: 96px; } }

/* C13 berättelse — utfallande bild, kontaktsignatur */
.story-bleed { background: var(--white); padding-top: 64px; }
.story-bleed__head { margin-bottom: 36px; }
.story-bleed__statement { margin: 0; max-width: 26ch; font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 1.05rem + 2vw, 2.7rem); line-height: 1.16; letter-spacing: -.01em; color: var(--ink); }
.story-bleed__statement-em { color: var(--teal); }
.story-bleed__body { display: grid; }
.story-bleed__media { margin: 0; }
.story-bleed__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%; }
.story-bleed__text { padding: 40px var(--gutter) 72px; max-width: 760px; }
@media (min-width: 600px) and (max-width: 1023px) { .story-bleed__media img { aspect-ratio: 16 / 9; } }
.story-bleed h2 { font-size: clamp(2.3rem, 1.4rem + 3vw, 3.7rem); margin-bottom: 24px; }
.signature { margin: 32px 0 20px; padding-top: 24px; border-top: 1px solid var(--line); }
.signature__label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .9rem; font-weight: 600; color: var(--teal); }
.signature__name { margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1.1; }
.signature__text { margin-bottom: 8px; color: var(--slate); }
.signature__lines, .faq-split__lines { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; }
.signature__lines a, .faq-split__lines a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.signature__lines .icon, .faq-split__lines .icon { width: 20px; height: 20px; }
@media (min-width: 1024px) {
  .story-bleed { padding-top: 104px; }
  .story-bleed__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: 64px; }
  .story-bleed__head h2 { grid-column: 1 / 8; }
  .story-bleed__statement { grid-column: 4 / 13; max-width: 24ch; }
  .story-bleed__body { grid-template-columns: 44vw minmax(0, 1fr); align-items: center; min-height: 560px; }
  .story-bleed__media { align-self: stretch; }
  .story-bleed__media picture, .story-bleed__media img { height: 100%; }
  .story-bleed__media img { aspect-ratio: auto; }
  .story-bleed__text { max-width: none; padding: 72px max(var(--gutter), calc((100vw - 1264px) / 2 + var(--gutter))) 72px 72px; }
  .story-bleed__text > * { max-width: 620px; }
}

/* C8 områden på mörkblått */
.areas-dark { background: var(--ink); color: #D4E2EC; }
.areas-dark h2 { color: var(--white); }
.areas-dark__grid { display: grid; gap: 40px; }
.areas-dark__intro p { color: #D4E2EC; }
.areas-dark .more { color: var(--foam); }
.areas-dark .more:hover { color: var(--white); }
.areas-dark :focus-visible { outline-color: var(--foam); }
.areas-dark__group h3 { margin-bottom: 8px; font-family: var(--body); font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--foam); }
.areas-dark__group + .areas-dark__group { margin-top: 32px; }
.area-rows { border-top: 1px solid rgba(255, 255, 255, .18); }
.area-row { padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.area-row__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; color: var(--white); text-decoration: none; }
.area-row__link:hover { color: var(--white); }
.area-row__name { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem); line-height: 1.1; transition: color .15s var(--ease); }
.area-row__link:hover .area-row__name { color: var(--foam); }
.area-row__dir { grid-row: 2; margin-top: 4px; font-size: .95rem; font-weight: 600; color: var(--foam); }
.area-row__link .arrow { grid-row: 1 / span 2; grid-column: 2; align-self: center; width: 24px; height: 24px; color: var(--foam); }
.area-row__text { margin: 8px 0 0; font-size: .98rem; color: #C9D8E4; }
.area-row__links { display: flex; flex-wrap: wrap; gap: 2px 20px; margin-top: 8px; }
.area-row__links a { display: inline-flex; align-items: center; min-height: 36px; font-size: .95rem; color: var(--white); }
.area-row__links a:hover { color: var(--foam); }
@media (min-width: 1024px) { .areas-dark__grid { grid-template-columns: 4fr 8fr; gap: 72px; align-items: start; } .areas-dark__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .areas-dark__group + .areas-dark__group { margin-top: 0; } }

/* C16 steg i rad */
.steps-row__head { display: grid; gap: 6px; margin-bottom: 28px; }
.steps-row__head .section-lead { max-width: 46ch; }
.steps-list { border-top: 1px solid var(--line); }
.steps-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.steps-list__n { font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: .95; color: var(--teal); font-variant-numeric: tabular-nums; }
.steps-list h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.steps-list p { margin: 0; color: var(--slate); max-width: 56ch; }
@media (min-width: 768px) {
  .steps-list--row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; border-top: 0; }
  .steps-list--row li { display: block; padding: 20px 0 32px; border-bottom: 0; border-top: 2px solid var(--ink); }
  .steps-list--row .steps-list__n { display: block; margin-bottom: 18px; font-size: 4.2rem; line-height: .9; }
  .steps-list--row h3 { margin-top: 0; }
}
@media (min-width: 1024px) {
  .steps-row__head { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: 64px; align-items: start; margin-bottom: 48px; }
  .steps-row__head h2 { grid-row: 1 / span 2; margin-bottom: 0; }
  .steps-row__head > :not(h2) { grid-column: 2; }
  .steps-row__head .section-lead { margin: 0 0 6px; padding-top: 10px; }
  .steps-list--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps-list--row .steps-list__n { font-size: 5.2rem; }
}

/* C17 frågor med sidorubrik */
.faq-split__grid { display: grid; gap: 28px; }
.faq-split__intro p { color: var(--slate); }
.faq-split .faq { max-width: none; border-top-color: rgba(13, 45, 77, .16); }
.faq-split .faq details { border-bottom-color: rgba(13, 45, 77, .16); }
.faq-split .faq__icon { background: var(--white); }
.faq-split .faq details[open] .faq__icon { background: var(--turq); }
@media (min-width: 1024px) { .faq-split__grid { grid-template-columns: 4fr 7fr; gap: 80px; align-items: start; } }


.hero-facts--home { margin-top: 28px; }
.hero-facts--home dd a { color: var(--ink); text-decoration-color: var(--turq); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hero-facts--home dd a:hover { color: var(--teal); }


/* ================= Designrevision 2026-09-28 — steg-ikoner, luftbubblor, områdesvåg ================= */

/* C16 steg: stor illustration i en akva platta + det stora stegnumret bredvid. Rubrik och text oförändrade. */
.steps-list li { display: block; }
.steps-list__head { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 18px; }
.steps-list__icon { position: relative; display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 22px; background: var(--aqua); color: var(--ink); }
/* två små luftbubblor som stiger från plattans hörn — samma motiv som bubblorna i sektionerna runt om. Ett par i
   olika storlek (inte en ensam prick), så att det aldrig läses som en notisbricka på ikonen. */
.steps-list__icon::before, .steps-list__icon::after { content: ""; position: absolute; border-radius: 50%; background: var(--foam); }
.steps-list__icon::after { top: -4px; right: -4px; width: 13px; height: 13px; opacity: .6; }
.steps-list__icon::before { top: -13px; right: 11px; width: 7px; height: 7px; opacity: .45; }
.illus--step { width: 72%; height: 72%; }
.steps-list .steps-list__n { font-size: 3rem; line-height: .82; }
.steps-list h3 { margin-top: 0; }
@media (min-width: 768px) {
  .steps-list--row .steps-list__head { justify-content: space-between; margin-bottom: 22px; }
  .steps-list--row .steps-list__icon { width: 96px; height: 96px; border-radius: 28px; }
  .steps-list--row .steps-list__n { margin-bottom: 0; font-size: 4.2rem; }
}
@media (min-width: 1024px) {
  .steps-list--row .steps-list__icon { width: 108px; height: 108px; border-radius: 30px; }
  .steps-list--row .steps-list__icon::after { top: -5px; right: -5px; width: 15px; height: 15px; }
  .steps-list--row .steps-list__icon::before { top: -16px; right: 14px; width: 8px; height: 8px; }
  .steps-list--row .steps-list__n { font-size: 5.2rem; }
}

/* C4b / C8b luftbubblor — samma mekanik som CTA-bandet (C10b) och samma keyframes: varje span stiger sin
   sträcka (--rise, annars hela sektionens höjd), ::before ritar cirkeln och gungar i sidled. Bara transform
   och opacity animeras; lagret ligger under innehållet, är aria-hidden och tar inga klick. */
.promise-strip, .areas-dark { position: relative; isolation: isolate; overflow: hidden; }
.promise-strip__grid, .areas-dark__grid { position: relative; z-index: 1; }
.air { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: layout paint; }
.air > span { position: absolute; top: 100%; left: var(--x, 50%); width: var(--s); height: var(--rise, 100%); animation: bubble-rise var(--d) cubic-bezier(.42, .1, .62, .92) var(--delay) infinite; }
.air > span::before { content: ""; position: absolute; top: 0; left: 0; width: var(--s); height: var(--s); border-radius: 50%; animation: bubble-sway var(--sway) ease-in-out var(--delay) infinite alternate; }

/* ljusa bubblor på akva: vitare än bakgrunden, aldrig mörkare — texten behåller sin kontrast */
.air--light > span::before { background: rgb(250 254 255 / var(--a, .6)); }
.air--light > .is-ring::before { background: none; box-shadow: inset 0 0 0 1.5px rgb(250 254 255 / var(--a, .9)); }
.air--light > .is-glass::before { background: radial-gradient(circle at 34% 30%, rgb(255 255 255 / .95), rgb(248 253 254 / .5) 44%, rgb(248 253 254 / .16) 72%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .75); }
.air--light > :nth-child(1)  { --x: 6%;  --s: 14px; --a: .7;  --d: 26s; --delay: -3s;  --drift: 6px;  --sway: 7s;  --rest: -22%; }
.air--light > :nth-child(2)  { --x: 17%; --s: 44px;            --d: 38s; --delay: -21s; --drift: 10px; --sway: 10s; --rest: -64%; }
.air--light > :nth-child(3)  { --x: 29%; --s: 22px; --a: .85; --d: 31s; --delay: -9s;  --drift: 7px;  --sway: 8s;  --rest: -38%; }
.air--light > :nth-child(4)  { --x: 41%; --s: 8px;  --a: .8;  --d: 22s; --delay: -14s; --drift: 4px;  --sway: 5s;  --rest: -80%; }
.air--light > :nth-child(5)  { --x: 52%; --s: 18px; --a: .55; --d: 29s; --delay: -5s;  --drift: 8px;  --sway: 7s;  --rest: -12%; }
.air--light > :nth-child(6)  { --x: 63%; --s: 30px;            --d: 35s; --delay: -26s; --drift: 9px;  --sway: 9s;  --rest: -54%; }
.air--light > :nth-child(7)  { --x: 74%; --s: 12px; --a: .95; --d: 24s; --delay: -11s; --drift: 5px;  --sway: 6s;  --rest: -72%; }
.air--light > :nth-child(8)  { --x: 86%; --s: 20px; --a: .6;  --d: 30s; --delay: -18s; --drift: 7px;  --sway: 8s;  --rest: -30%; }
.air--light > :nth-child(9)  { --x: 94%; --s: 36px;            --d: 40s; --delay: -7s;  --drift: 8px;  --sway: 11s; --rest: -86%; }
.air--light > :nth-child(10) { --x: 23%; --s: 6px;  --a: .85; --d: 19s; --delay: -8s;  --drift: 3px;  --sway: 5s;  --rest: -48%; }
.air--light > :nth-child(11) { --x: 47%; --s: 26px; --a: .8;  --d: 34s; --delay: -30s; --drift: 6px;  --sway: 9s;  --rest: -90%; }
.air--light > :nth-child(12) { --x: 68%; --s: 7px;  --a: .9;  --d: 21s; --delay: -2s;  --drift: 4px;  --sway: 5s;  --rest: -60%; }
.air--light > :nth-child(13) { --x: 80%; --s: 52px;            --d: 44s; --delay: -33s; --drift: 12px; --sway: 12s; --rest: -44%; }
.air--light > :nth-child(14) { --x: 35%; --s: 10px; --a: .75; --d: 25s; --delay: -16s; --drift: 5px;  --sway: 6s;  --rest: -6%; }
/* smal skärm: färre och mindre, så remsan inte känns full */
.air--light > :is(:nth-child(6), :nth-child(10), :nth-child(11), :nth-child(12), :nth-child(13)) { display: none; }
@media (min-width: 768px) { .air--light > :is(:nth-child(6), :nth-child(11)) { display: block; } }
@media (min-width: 1024px) { .air--light > :is(:nth-child(10), :nth-child(12), :nth-child(13)) { display: block; } }

/* mörka bubblor på mörkblått: samma foam som CTA-bandet, i banor utanför rubriker och länkar */
.air--dark { --edge: calc(max(0px, (100% - 1264px) / 2) + var(--gutter)); --inner: calc(min(100%, 1264px) - 2 * var(--gutter)); }
.air--dark > span::before { background: rgb(127 221 231 / var(--a, .16)); }
.air--dark > .is-ring::before { background: none; box-shadow: inset 0 0 0 1px rgb(127 221 231 / var(--a, .3)); }
.air--dark > .is-glass::before { background: radial-gradient(circle at 34% 30%, rgb(255 255 255 / .2), rgb(127 221 231 / .09) 42%, rgb(127 221 231 / .03) 68%); box-shadow: inset 0 0 0 1px rgb(127 221 231 / .16); }
.air--dark > .lane-l { left: calc(var(--edge) * var(--f) - var(--s) / 2); }
.air--dark > .lane-r { left: calc(100% - var(--edge) * var(--f) - var(--s) / 2); }
.air--dark > .lane-m { left: calc(var(--edge) + (var(--inner) - 72px) * 4 / 12 + 36px - var(--s) / 2); }
.air--dark > .lane-g { left: calc(var(--edge) + (var(--inner) - 72px) * 8 / 12 + 72px - var(--s) / 2); }
.air--dark > .lane-b { left: var(--at); --rise: var(--low); }
.air--dark > :nth-child(1)  { --f: .45; --s: 8px;  --a: .24; --d: 24s;  --delay: -6s;  --drift: 3px; --sway: 6s;  --rest: -30%; }
.air--dark > :nth-child(2)  { --f: .6;  --s: 11px; --a: .34; --d: 30s;  --delay: -19s; --drift: 2px; --sway: 8s;  --rest: -66%; }
.air--dark > :nth-child(3)  { --f: .5;  --s: 12px;           --d: 27s;  --delay: -11s; --drift: 3px; --sway: 7s;  --rest: -48%; }
.air--dark > :nth-child(4)  { --f: .5;  --s: 7px;  --a: .26; --d: 21s;  --delay: -14s; --drift: 2px; --sway: 5s;  --rest: -76%; }
.air--dark > :nth-child(5)  { --f: .4;  --s: 12px; --a: .3;  --d: 32s;  --delay: -4s;  --drift: 3px; --sway: 8s;  --rest: -20%; }
.air--dark > :nth-child(6)  { --f: .62; --s: 6px;  --a: .22; --d: 19s;  --delay: -9s;  --drift: 2px; --sway: 5s;  --rest: -56%; }
.air--dark > :nth-child(7)  {           --s: 16px; --a: .28; --d: 34s;  --delay: -12s; --drift: 6px; --sway: 9s;  --rest: -40%; }
.air--dark > :nth-child(8)  {           --s: 7px;  --a: .24; --d: 22s;  --delay: -3s;  --drift: 8px; --sway: 6s;  --rest: -70%; }
.air--dark > :nth-child(9)  {           --s: 22px;           --d: 38s;  --delay: -27s; --drift: 6px; --sway: 10s; --rest: -18%; }
.air--dark > :nth-child(10) {           --s: 6px;  --a: .22; --d: 23s;  --delay: -16s; --drift: 5px; --sway: 6s;  --rest: -84%; }
.air--dark > :nth-child(11) {           --s: 12px; --a: .28; --d: 29s;  --delay: -7s;  --drift: 4px; --sway: 8s;  --rest: -52%; }
.air--dark > :nth-child(12) { --at: 18%; --s: 7px;  --a: .22; --d: 10s;   --delay: -2s; --drift: 4px; --sway: 4s;   --rest: -55%; }
.air--dark > :nth-child(13) { --at: 42%; --s: 14px;           --d: 13s;   --delay: -7s; --drift: 5px; --sway: 5s;   --rest: -40%; }
.air--dark > :nth-child(14) { --at: 63%; --s: 10px; --a: .3;  --d: 11.5s; --delay: -4s; --drift: 4px; --sway: 4.5s; --rest: -68%; }
.air--dark > :nth-child(15) { --at: 81%; --s: 6px;  --a: .24; --d: 9s;    --delay: -6s; --drift: 3px; --sway: 4s;   --rest: -30%; }
.air--dark > :nth-child(16) { --at: 30%; --s: 5px;  --a: .26; --d: 8.5s;  --delay: -3s; --drift: 3px; --sway: 4s;   --rest: -62%; }
.air--dark > :nth-child(17) { --f: .5;  --s: 46px; --a: .22; --d: 44s;  --delay: -22s; --drift: 3px; --sway: 11s; --rest: -36%; }
.air--dark > :nth-child(18) { --f: .5;  --s: 34px;           --d: 40s;  --delay: -31s; --drift: 4px; --sway: 10s; --rest: -60%; }
/* banorna m/g finns först i tvåspaltslayouten; de stora kantbubblorna först när marginalen rymmer dem */
.air--dark > :is(.lane-m, .lane-g, :nth-child(17), :nth-child(18)) { display: none; }
@media (min-width: 1024px) { .air--dark > :is(.lane-m, .lane-g) { display: block; } }
@media (min-width: 1400px) { .air--dark > :is(:nth-child(17), :nth-child(18)) { display: block; } }

/* C8 områden: vågen i underkant — nästa (vita) sektion stiger in i det mörkblå, spegelvänd mot heroens våg.
   Bottenluften växer med vågens höjd så att ortraderna aldrig hamnar under den; b-bubblorna stiger ur vågen
   och tonar ut innan de når innehållet. */
.wave--areas { z-index: 1; bottom: -1px; height: 40px; color: var(--white); transform: scaleX(-1); }
.areas-dark { padding-bottom: 104px; }
.air--dark { --low: 88px; }
@media (min-width: 768px) { .wave--areas { height: 56px; } .areas-dark { padding-bottom: 124px; } .air--dark { --low: 104px; } }
@media (min-width: 1024px) { .wave--areas { height: 72px; } .areas-dark { padding-bottom: 160px; } .air--dark { --low: 136px; } }

@media (prefers-reduced-motion: reduce) {
  /* bubblorna står still på sina viloplatser i stället för att försvinna */
  .air > span { animation: none !important; transform: translate3d(0, var(--rest), 0); }
  .air > span::before { animation: none !important; }
}