/* ==========================================================================
   ABK Ekonomitjänst AB — stilmall
   ========================================================================== */

:root {
  --blue: #428BCA;          /* ramar och accenter — som originalet */
  --blue-solid: #337AB7;    /* ytor med vit text ovanpå (WCAG AA 4.56:1) */
  --blue-dark: #2C6899;     /* hover */
  --orange: #BA4811;
  --ink: #000;
  --body: #1c1c1c;
  --muted: #6F6F6F;
  --dark: #0A0E14;
  --radius: 10px;
  --container: 1140px;
  --font-head: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Lato", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, 88px) + 12px); }

body {
  margin: 0;
  background: #fff;
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 25px;
  letter-spacing: .5px;
  -webkit-font-smoothing: antialiased;
  /* Element som väntar på att tonas in ligger förskjutna i sidled och
     skulle annars skapa horisontell scroll. clip klipper utan att göra
     elementet scrollbart; hidden är fallback för äldre webbläsare. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* height: auto krävs eftersom bilderna har width/height-attribut — utan den
   används attributets höjd rakt av och bilden sträcks. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 18px;
}

h1 { font-size: 45px; line-height: 53px; }
h2 { font-size: 37px; line-height: 1.2; }
h3 { font-size: 24px; line-height: 1.3; }

p { margin: 0 0 18px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

.section { padding: 80px 0; }
.center { text-align: center; }

.eyebrow {
  color: var(--orange);
  font-size: 16px;
  letter-spacing: .5px;
  margin-bottom: 6px;
}

.lead {
  max-width: 700px;
  margin: 0 auto 50px;
}

/* ---------- Inladdnings- och scrollanimationer ----------
   .reveal sätts i HTML, .is-visible sätts av main.js när elementet
   kommer in i vyn. Utan JS visas allt direkt (se .no-js-fallback). */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
}

.js .reveal.is-visible { opacity: 1; transform: none; }

/* Varianter */
.js .reveal--left  { transform: translateX(-34px); }
.js .reveal--right { transform: translateX(34px); }
.js .reveal--zoom  { transform: scale(.94); }

/* Trappstegsfördröjning för kort i rad */
.js .reveal[data-delay="1"] { transition-delay: .12s; }
.js .reveal[data-delay="2"] { transition-delay: .24s; }
.js .reveal[data-delay="3"] { transition-delay: .36s; }
.js .reveal[data-delay="4"] { transition-delay: .48s; }

/* Hero animeras direkt vid sidladdning */
.js .hero .reveal { transition-duration: .85s; }

/* Inladdningsanimationerna är en skrivbordsfiness. På en telefon scrollar
   man förbi snabbare än de hinner spela, och på svagare enheter rycker de.
   Där visas allt direkt i stället.

   Regeln ligger här och inte i mobilblocken längst ned för att all
   reveal-logik ska stå samlad. Brytpunkten är samma 900 px som resten av
   mobillayouten, och main.js läser samma värde och hoppar över
   IntersectionObserver helt — den här regeln är skyddet för stunden innan
   JavaScript hunnit köra. */
@media (max-width: 900px) {
  .js .reveal,
  .js .hero .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .hero .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
  .site-header,
  .logo img,
  .nav-link,
  .nav-link::after,
  .caret,
  .sub-menu,
  .sub-menu li,
  .sub-menu a,
  .nav-toggle span,
  .main-nav,
  .nav-list > li { transition: none !important; }
  .sub-menu li,
  .nav-list > li { opacity: 1 !important; transform: none !important; }
}

/* ---------- Knappar ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .5px;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--blue-solid); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); color: #fff; }

.btn-sm { padding: 13px 20px; font-size: 15px; }
.btn-block { width: 100%; text-align: center; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
  /* Mjuk in- och utglidning: långsam start, snabb mitt, mjukt stopp */
  transition: transform .45s cubic-bezier(.32, .72, 0, 1),
              box-shadow .35s ease;
  will-change: transform;
}

/* Glider upp när man scrollar nedåt, tillbaka ner när man scrollar uppåt */
.site-header.is-hidden { transform: translateY(-100%); }

/* Lite tydligare skugga så snart sidan lämnat toppen */
.site-header.is-scrolled { box-shadow: 0 4px 24px rgba(16, 32, 48, .1); }

/* Logotypen krymper diskret när sidan lämnat toppen. Headern är fixed och
   body-paddingen statisk, så innehållet påverkas inte av höjdändringen. */
.logo img { transition: width .4s cubic-bezier(.32, .72, 0, 1); }
.site-header.is-scrolled .logo img { width: 98px; }

/* Headern ligger utanför flödet — puffa ner innehållet lika mycket.
   --header-h sätts av main.js efter faktisk höjd. */
body { padding-top: var(--header-h, 88px); }

/* Tre kolumner där ytterkolumnerna alltid är lika breda (1fr vardera).
   Mittenkolumnen hamnar därmed exakt i headerns mitt oavsett hur bred
   logotypen eller knappen är — menyn står still när logotypen krymper. */
.header-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.logo { justify-self: start; }
.logo img { width: 114px; height: auto; }

.main-nav { justify-self: center; }
.btn-header { justify-self: end; }

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: inline-block;
  color: #222;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .3px;
  padding: 8px 0;
  position: relative;
  transition: color .25s ease;
}
.nav-link:hover { color: var(--blue-solid); text-decoration: none; }

/* Strecket växer ut från vänster vid hover och dras tillbaka åt höger när
   muspekaren lämnar — mjukare än att bara tändas och släckas. */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .4s cubic-bezier(.32, .72, 0, 1);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.has-sub:hover > .nav-link::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav-link.is-active::after {
  transform: scaleX(1);
  background: #555;
}
.nav-link.is-active:hover::after { background: currentColor; }

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .65;
  transition: transform .35s cubic-bezier(.32, .72, 0, 1), opacity .25s ease;
}

.has-sub:hover .caret,
.has-sub:focus-within .caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* Undermeny */
.has-sub { position: relative; }

/* Osynlig brygga över mellanrummet till undermenyn, så att den inte
   försvinner när muspekaren rör sig ner mot den. */
.has-sub::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(.97);
  transform-origin: top center;
  min-width: 244px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(16, 32, 48, .14), 0 2px 6px rgba(16, 32, 48, .06);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease,
              transform .34s cubic-bezier(.32, .72, 0, 1),
              visibility .34s;
}

.has-sub:hover .sub-menu,
.has-sub:focus-within .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Posterna tonas in en efter en när menyn fälls ut */
.sub-menu li {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.32, .72, 0, 1);
}
.has-sub:hover .sub-menu li,
.has-sub:focus-within .sub-menu li { opacity: 1; transform: none; }
.sub-menu li:nth-child(1) { transition-delay: .04s; }
.sub-menu li:nth-child(2) { transition-delay: .07s; }
.sub-menu li:nth-child(3) { transition-delay: .10s; }
.sub-menu li:nth-child(4) { transition-delay: .13s; }
.sub-menu li:nth-child(5) { transition-delay: .16s; }
.sub-menu li:nth-child(6) { transition-delay: .19s; }

.sub-menu a {
  display: block;
  padding: 10px 20px;
  color: #333;
  font-size: 15px;
  transition: background-color .22s ease, color .22s ease, padding-left .28s cubic-bezier(.32, .72, 0, 1);
}
.sub-menu a:hover,
.sub-menu a:focus-visible {
  background: #f2f6fa;
  color: var(--blue-solid);
  padding-left: 26px;
  text-decoration: none;
}
.sub-menu a.is-active { color: var(--blue-solid); font-weight: 600; }

.btn-header { flex-shrink: 0; }
.btn-header .arrow { margin-left: 6px; }

/* Mobilmeny-knapp */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px 8px;
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: #333;
  border-radius: 2px;
  transition: transform .4s cubic-bezier(.68, -.4, .27, 1.4),
              opacity .2s ease,
              background-color .25s ease;
}
.nav-toggle:hover span { background: var(--blue-solid); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 90px 16px 120px;
  background-color: #000;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: .3;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 797px;
  text-align: center;
  color: #fff;
}

.hero-content h1 { color: #fff; margin-bottom: 20px; }
.hero-content p {
  max-width: 660px;
  margin: 0 auto 30px;
  color: #fff;
}

.shape-divider {
  position: absolute;
  left: 50%;
  bottom: -1px;
  /* rotate(180deg) vänder vågen så bergen pekar uppåt, som i originalet */
  transform: translateX(-50%) rotate(180deg);
  width: calc(255% + 1.3px);
  height: 51px;
  line-height: 0;
  direction: ltr;
  z-index: 2;
}
.shape-divider svg { width: 100%; height: 100%; display: block; }
.shape-fill { fill: #fff; }

/* ==========================================================================
   Tjänster
   ========================================================================== */
.services { padding-bottom: 60px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: stretch;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  padding: 20px;
  background: #fff;
}

.card h3 { margin-bottom: 10px; }
.card p { margin-bottom: 24px; }
.card .btn { align-self: flex-start; }

/* CTA-banner */
.cta-banner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 620px;
  margin: 60px auto 0;
  padding: 13px 13px 13px 35px;
  background: var(--blue-solid);
  border-radius: 0 90px 90px 90px;
  color: #fff;
}

.cta-banner p { margin: 0; color: #fff; }
.cta-banner a { color: #fff; text-decoration: none; }
.cta-banner a:hover { text-decoration: underline; }

.cta-banner img {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

/* ==========================================================================
   AI-sektion
   ========================================================================== */
.ai-section {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 450px;
  padding: 90px 0;
  background-color: #000;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

.ai-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: .35;
}

.ai-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  text-align: center;
  color: #fff;
}

.ai-content h2 {
  color: #fff;
  font-size: 45px;
  line-height: 53px;
  margin-bottom: 20px;
}

.ai-content p {
  max-width: 660px;
  margin: 0 auto;
  color: #fff;
}

.ai-content .btn { margin-top: 28px; }

/* ==========================================================================
   Om oss
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Som originalet: 90 % bredd med mjuka hörn */
.about-media img { width: 90%; border-radius: 10px; }

.about-text h2 { margin-bottom: 22px; }

/* ==========================================================================
   Så fungerar det
   ========================================================================== */
.steps-grid { margin-top: 60px; }

.step-card {
  position: relative;
  justify-content: flex-start;
  padding-top: 40px;
}

.step-badge {
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 7px 22px;
  background: var(--blue-solid);
  color: #fff;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
}

.step-icon { margin-bottom: 18px; }
.step-icon svg {
  width: 62px;
  height: 62px;
  fill: var(--blue);
}

.step-card h3 { margin-bottom: 10px; }
.step-card p { margin-bottom: 0; }

/* ==========================================================================
   Kvalitet (parallax)
   ========================================================================== */
.quality {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 450px;
  padding: 80px 0;
  background: #000 url("../img/bg-certifikat.webp") center center / cover no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

.quality-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: .38;
}

.quality-content {
  position: relative;
  z-index: 2;
  color: #fff;
}

.quality-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.quality-top h2 {
  color: #fff;
  font-size: 45px;
  line-height: 53px;
  margin: 0;
}

.quality-top p { color: #fff; margin: 0; }

.quality-rule {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .85);
  margin: 40px 0;
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.stat h3 {
  color: #fff;
  font-size: 45px;
  line-height: 53px;
  margin: 0 0 4px;
}

.stat p { color: #fff; margin: 0; }

/* ==========================================================================
   Kontakt
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: 60px;
  align-items: center;
}

.form-box {
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  padding: 40px;
  background: #fff;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.field { margin-bottom: 20px; }

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  color: #444;
}

.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px;
  color: #222;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.field input::placeholder,
.field textarea::placeholder { color: #767676; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(66, 139, 202, .18);
}

.field textarea { resize: vertical; min-height: 150px; }

.form-status {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--orange);
  min-height: 22px;
}

.form-status--ok { color: #1c7a3e; font-weight: 600; }
.form-status--fel { color: #b3261e; }

/* Dolt fält som fångar robotar. Göms utan display:none, eftersom en del
   robotar hoppar över fält som är helt bortdolda. */
.honungsfalla {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-info h2 { margin-bottom: 22px; }
.contact-info p { font-size: 17px; color: #000; }
.contact-info .eyebrow { font-size: 16px; color: var(--orange); }
.contact-info a { color: #000; }
.contact-info a:hover { color: var(--blue); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--dark);
  color: #d5d8dc;
  padding: 70px 0 60px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 28% 1fr 1fr 1fr;
  gap: 40px;
}

.footer-logo { width: 130px; margin-bottom: 22px; }

.site-footer p { font-size: 15px; line-height: 24px; color: #cfd3d8; }

.copyright { margin-top: 26px; }

.site-footer h3,
.site-footer h4 {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 22px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col ul li { margin-bottom: 14px; }

.footer-col ul a,
.site-footer a { color: #cfd3d8; font-size: 15px; }
.footer-col ul a:hover,
.site-footer a:hover { color: #fff; text-decoration: none; }

.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-top: 24px;
  border: 1px solid #5f6672;
  border-radius: 50%;
}
.social svg { width: 14px; height: 14px; fill: #cfd3d8; }
.social:hover { border-color: var(--blue); }
.social:hover svg { fill: var(--blue); }

/* ==========================================================================
   Undersidor
   ========================================================================== */
.hero--inner { min-height: 70vh; }

/* Hoppa till innehållet — syns bara vid tangentbordsnavigering */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--blue-solid);
  color: #fff;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
  text-decoration: none;
}

/* Varvade bild/text-sektioner på tjänstesidorna */
.split--shade { background: #f7f8fa; }

.split .about-text .btn { margin-top: 10px; }

.btn-arrow .arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform .2s ease;
}
.btn-arrow:hover .arrow { transform: translateX(3px); }

/* Punktkort (#1, #2 …) bredvid texten */
.point-card {
  position: relative;
  margin: 28px 0 10px;
  padding: 26px 24px 20px;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
}

.point-num {
  position: absolute;
  top: -17px;
  right: 22px;
  padding: 5px 16px;
  background: var(--blue-solid);
  color: #fff;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 500;
  border-radius: 6px;
}

.point-card h3 {
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
}

.point-card p { margin: 0; }

/* Kort som lyfter lite vid hover */
.card { transition: transform .25s ease, box-shadow .25s ease; }
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(66, 139, 202, .16);
}

/* Tydlig fokusmarkering för tangentbord */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.hero--inner .hero-content { max-width: 711px; }
.hero--inner .hero-content p { font-size: 17px; }

/* Medarbetare */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 30px;
  margin-top: 20px;
}

.team-member { text-align: center; }

.team-member img {
  width: 172px;
  height: 172px;
  margin: 0 auto 22px;
  border-radius: 50%;
  object-fit: cover;
  background: #c9c9c9;
}

.team-member h3 { margin-bottom: 4px; }

.team-role {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.team-contact {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}
.team-contact a { color: var(--muted); }
.team-contact a:hover { color: var(--blue); }

/* CTA-bannern på Om oss har en stående bild */
.cta-banner--omoss img { width: 104px; height: 104px; }

/* ==========================================================================
   Responsivt
   ========================================================================== */
@media (max-width: 1024px) {
  .nav-list { gap: 22px; }
  .nav-link { font-size: 16px; }
  .header-inner { padding: 12px 16px; gap: 16px; }
}

@media (max-width: 900px) {
  h1, .ai-content h2, .quality-top h2, .stat h3 { font-size: 37px; line-height: 1.1em; }
  h2 { font-size: 31px; }

  .section { padding: 64px 0; }

  /* Mer luft i sidled än desktopens 16 px. På en telefon ligger texten
     annars i kant med skärmen och sidan känns trång. */
  .container { padding: 0 20px; }

  /* Kort och formulär behöver proportionellt mer innerkant när de går
     från en tredjedels bredd till full skärmbredd. */
  .card { padding: 26px 22px; }
  .form-box { padding: 32px 26px; }

  /* Stycken och ingresser får lite mer radavstånd och luft under sig —
     lättare att läsa på en smal spalt. */
  body { line-height: 27px; }
  p { margin-bottom: 20px; }
  .lead { margin-bottom: 40px; }

  /* Utan menyn och kontaktknappen räcker två kolumner: logotyp och knapp */
  .header-inner { grid-template-columns: 1fr auto; }
  .nav-toggle {
    display: flex;
    grid-column: 2;
    justify-self: end;
    margin-left: 0;
  }
  .btn-header { display: none; }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    background: #fff;
    box-shadow: 0 10px 28px rgba(16, 32, 48, .14);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .42s cubic-bezier(.32, .72, 0, 1),
                opacity .3s ease;
  }
  .main-nav.is-open {
    max-height: 80vh;
    overflow-y: auto;
    opacity: 1;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 20px;
  }
  .nav-list > li { border-bottom: 1px solid #eee; }

  /* Posterna glider in en efter en när menyn öppnas */
  .nav-list > li {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .3s ease, transform .35s cubic-bezier(.32, .72, 0, 1);
  }
  .main-nav.is-open .nav-list > li { opacity: 1; transform: none; }
  .main-nav.is-open .nav-list > li:nth-child(1) { transition-delay: .08s; }
  .main-nav.is-open .nav-list > li:nth-child(2) { transition-delay: .13s; }
  .main-nav.is-open .nav-list > li:nth-child(3) { transition-delay: .18s; }

  .nav-link { padding: 14px 0; width: 100%; }
  .nav-link.is-active::after,
  .nav-link::after { display: none; }
  .nav-link.is-active { color: var(--blue-solid); font-weight: 600; }

  /* Pilen pekar nedåt i mobilmenyn — undermenyn ligger alltid utfälld */
  .has-sub:hover .caret,
  .has-sub:focus-within .caret { transform: none; }
  .has-sub::after { display: none; }

  /* I mobilmenyn ligger undermenyn alltid utfälld. Det finns ingen hover
     här, så posterna måste visas utan den — annars blir de osynliga. */
  .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    padding: 0 0 10px;
    min-width: 0;
  }
  .sub-menu li {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .sub-menu a { padding: 10px 14px; }
  .sub-menu a:hover,
  .sub-menu a:focus-visible { padding-left: 20px; }

  .card-grid { grid-template-columns: 1fr; gap: 40px; }
  .steps-grid { gap: 48px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
  .hero--inner { min-height: 56vh; }

  .about-grid,
  .contact-grid,
  .quality-top,
  .stats { grid-template-columns: 1fr; gap: 40px; }

  /* Staplad tar bilden hela spaltbredden — desktopens 90 % ser ut som ett
     misstag när den inte längre står bredvid en textspalt. */
  .about-media img { width: 100%; }

  /* Varannan text/bild-sektion har bilden efter texten i koden, så att
     bilden hamnar till höger på desktop. När spalterna staplas skulle den
     ordningen lägga bilden under en lång textmassa. Bilden först ger samma
     rytm på alla sektioner: se bilden, läs texten. */
  .about-media { order: -1; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Bilden överst och tätare komposition. Den stora rundningen från
     desktop blir för dominant när bannern är nästan kvadratisk. */
  .cta-banner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 24px 22px;
    border-radius: 0 34px 34px 34px;
  }
  .cta-banner img { order: -1; }

  /* iOS/Safari renderar fixed bakgrunder illa — rulla med istället */
  .quality,
  .ai-section { background-attachment: scroll; }

  /* Större klickytor för fingrar — 44 px är rekommendationen */
  .footer-col ul a {
    display: inline-block;
    padding: 10px 0;
  }
  .footer-col ul li { margin-bottom: 6px; }
  .social { width: 44px; height: 44px; }
  .logo { padding: 3px 0; }

  /* Att ringa eller mejla är det besökaren faktiskt gör på en mobil, men
     som ren text blir länkarna bara ~19 px höga. De står ensamma på varsin
     rad (åtskilda av <br>), så de kan växa utan att texten runt omkring
     påverkas. */
  .team-contact a,
  .contact-info p a,
  .footer-col p a {
    display: inline-block;
    padding: 13px 0;
    line-height: 1.2;
  }
  .team-contact a { padding: 11px 0; }

  /* CTA-bannerns länkar står mitt i en mening och kan inte bli 44 px utan
     att rycka isär stycket. Luftigare radavstånd ger dem ändå en tryckyta
     som går att träffa, och understrykningen visar att de går att trycka på.
     Samma telefon och e-post finns som fulla knappytor i kontaktsektionen
     och i footern. */
  .cta-banner p { line-height: 30px; }
  .cta-banner p a {
    display: inline-block;
    padding: 8px 0;
    line-height: 1.2;
    text-decoration: underline;
  }
}

@media (max-width: 560px) {
  /* 1.1em från 900 px-brytpunkten blir för hårt knipet när rubriken bryts
     på tre eller fyra rader. */
  h1, .ai-content h2, .quality-top h2 { font-size: 30px; line-height: 1.2; }
  h2 { font-size: 27px; }
  h3 { font-size: 22px; }

  .hero { min-height: 70vh; padding: 70px 20px 90px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .form-box { padding: 26px 22px; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-banner {
    padding: 22px 18px;
    border-radius: 0 26px 26px 26px;
  }
  .cta-banner img,
  .cta-banner--omoss img { width: 74px; height: 74px; }
  .cta-banner p { font-size: 15px; }
  .team-grid { grid-template-columns: 1fr; gap: 44px; }

  /* Sektionerna är korta på en telefon — håll avståndet mellan dem tydligt
     så att det syns var en ny sektion börjar. */
  .section { padding: 56px 0; }
  .steps-grid { margin-top: 44px; }
  .card-grid { gap: 32px; }
}