/* ============================================
   EKVALITA — Main Stylesheet
   ============================================ */

/* Self-hosted DM Sans variable font — body and UI text */
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/DM_Sans/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/DM_Sans/DMSans-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

/* Fraunces removed — the site now uses DM Sans only. Highlights are colour-based. */

/* ── Variables ── */
:root {
  /* Primary brand */
  --blue:      #323f88;
  --blue-lt:   #4d5ba8;
  --blue-dk:   #1f2659;
  --peach:     #fbbb8c;

  /* Backgrounds & surfaces */
  --cream:        #fff5d9;
  --lilac:        #ecebfa;   /* pale lilac — section BACKGROUND (lavender counterpart to cream) */
  --lilac-accent: #c5ccff;   /* stronger lilac — accents/highlights ON lilac sections */
  --yellow:       #F5C842;
  --yellow-lt:    #ffde80;
  --white:        #f7f6ff;

  /* Text highlights (DM Sans, colour-based — no serif).
     --hl-bg is the active highlight colour; default is soft orange for
     cream/yellow sections. Lilac sections override --hl-bg to --hl-lilac. */
  --hl-bg:     #ffcaa3;             /* soft orange — highlight on cream/yellow */
  --hl-lilac:  var(--lilac-accent); /* highlight on lilac sections */
  --hl-yellow: #ffe599;             /* soft yellow */

  /* First-intro / lead paragraph size — one value drives every page's intro.
     Matches the om-oss page_tagline size; semibold, blue, contrast to body. */
  --intro-size: clamp(1.15rem, 2.2vw, 1.4rem);

  /* Text */
  --ink:       #323f88;
  --ink-mid:   #323f88;
  --ink-lt:    #323f88;

  --font-display: 'DM Sans', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  --max-w:      1200px;
  --sec-pad:    2.5rem 3rem;
  --radius:     2px;
  --transition: 0.22s ease;

  /* Orb breathing speed — set by JS via ORB_BREATH_SPEED */
  --orb-breath-mult: 1;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75;
  color: var(--ink);
  background: var(--cream);
  position: relative;
  overflow-x: hidden;
  overflow-y: clip; /* orbs are position:absolute — clip stops them extending scroll height */
  max-width: 100%;
}
main, .site-footer { position: relative; z-index: 1; }

/* ── Typography baseline ── */
h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  font-weight: 800;
  color: #833b48;
  letter-spacing: 0.02em;
  line-height: 1.1;
  font-optical-sizing: auto;
}
h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: #833b48;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-optical-sizing: auto;
}
h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600;
  color: #833b48;
  letter-spacing: 0;
  line-height: 1.3;
  font-optical-sizing: auto;
}
h4, .entry-meta-heading {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600;
  color: #833b48 !important;
  letter-spacing: 0;
  line-height: 1.3;
  font-optical-sizing: auto;
}

/* ── Page-wide gradient orbs ──
   Big diffuse orbs (2, 4, 6) anchor in the hero as atmospheric backdrop;
   small sharper orbs (1, 3, 5) start below the fold and slide up via the
   parallax script in main.js — closer "layer", scrolls faster.
   The `translate` property (set via CSS variable from JS) composes with the
   keyframe `transform` cleanly, so drift + parallax run together. */
.page-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  will-change: transform, opacity;
}
.page-orb--1 { width: 460px; height: 460px; background-image: url("../assets/Bakgrund, mjuka bollar/3.png"); top:  108vh; animation: orbDrift 38s ease-in-out infinite,         orbBreath calc(13s / var(--orb-breath-mult, 1)) ease-in-out infinite; }
.page-orb--2 { width: 820px; height: 820px; background-image: url("../assets/Bakgrund, mjuka bollar/4.png"); top: -260px; animation: orbDrift 44s ease-in-out infinite reverse, orbBreath calc(16s / var(--orb-breath-mult, 1)) ease-in-out infinite; animation-delay: -3s,  -2s; }
.page-orb--3 { width: 380px; height: 380px; background-image: url("../assets/Bakgrund, mjuka bollar/5.png"); top:  195vh; animation: orbDrift 40s ease-in-out infinite,         orbBreath calc(11s / var(--orb-breath-mult, 1)) ease-in-out infinite; animation-delay: -7s,  -4s; }
.page-orb--4 { width: 680px; height: 680px; background-image: url("../assets/Bakgrund, mjuka bollar/6.png"); top:   30vh; animation: orbDrift 36s ease-in-out infinite reverse, orbBreath calc(14s / var(--orb-breath-mult, 1)) ease-in-out infinite; animation-delay: -1s,  -6s; }
.page-orb--5 { width: 500px; height: 500px; background-image: url("../assets/Bakgrund, mjuka bollar/7.png"); top:  275vh; animation: orbDrift 42s ease-in-out infinite,         orbBreath calc(12s / var(--orb-breath-mult, 1)) ease-in-out infinite; animation-delay: -5s,  -3s; }
.page-orb--6 { width: 820px; height: 820px; background-image: url("../assets/Bakgrund, mjuka bollar/8.png"); top:    0;    animation: orbDrift 46s ease-in-out infinite,         orbBreath calc(17s / var(--orb-breath-mult, 1)) ease-in-out infinite; animation-delay: -10s, -8s; }

/* On the home page the hero must stay clean — push the big atmosphere orbs below it.
   orb2 becomes the big left ball at the team section.
   orb4 sits just below the hero on the right.
   orb6 anchors the right side near the education section. */
body.home .page-orb--2 { top: 375vh; }
body.home .page-orb--4 { top:  80vh; }
body.home .page-orb--6 { top: 390vh; }

/* Home-only accent orbs — spread across the page, left-side, no same-side triple overlap.
   Left sequence:  orb1@108vh → orb7@165vh → orb5@275vh → orb2@375vh → orb9@490vh
   Right sequence: orb4@80vh  → orb3@195vh → orb6@390vh                              */
.page-orb--7  { width: 560px; height: 560px; background-image: url("../assets/Bakgrund, mjuka bollar/13.png");  top: 165vh; animation: orbDrift 39s ease-in-out infinite reverse, orbBreath calc(15s / var(--orb-breath-mult, 1)) ease-in-out infinite; animation-delay: -5s,  -2s; }
.page-orb--9  { width: 580px; height: 580px; background-image: url("../assets/Bakgrund, mjuka bollar/1.png");   top: 490vh; animation: orbDrift 47s ease-in-out infinite reverse, orbBreath calc(13s / var(--orb-breath-mult, 1)) ease-in-out infinite; animation-delay: -9s,  -4s; }
.page-orb--10 { width: 500px; height: 500px; background-image: url("../assets/Bakgrund, mjuka bollar/9-1.png"); top: 248vh; animation: orbDrift 41s ease-in-out infinite,         orbBreath calc(14s / var(--orb-breath-mult, 1)) ease-in-out infinite; animation-delay: -6s,  -3s; }
.page-orb--11 { width: 480px; height: 480px; background-image: url("../assets/Bakgrund, mjuka bollar/13-1.png");top: 418vh; animation: orbDrift 43s ease-in-out infinite reverse, orbBreath calc(16s / var(--orb-breath-mult, 1)) ease-in-out infinite; animation-delay: -2s,  -7s; }
.page-orb--12 { width: 680px; height: 680px; background-image: url("../assets/Bakgrund, mjuka bollar/9.png");   top:  93vh; animation: orbDrift 45s ease-in-out infinite,         orbBreath calc(18s / var(--orb-breath-mult, 1)) ease-in-out infinite; animation-delay: -4s,  -9s; }

@keyframes orbDrift {
  0%, 100% { transform: translate(   0,    0); }
  25%      { transform: translate( 180px,  -90px); }
  50%      { transform: translate( -80px,  150px); }
  75%      { transform: translate(-180px,  -50px); }
}

/* Sine-wave size breathing — independent of position drift. */
@keyframes orbBreath {
  0%, 100% { scale: 0.85; opacity: 0.40; }
  50%      { scale: 1.15; opacity: 0.62; }
}
img { max-width: 100%; display: block; }

/* ── Accent styles — DM Sans, colour-based (no serif) ────────────────────
   .kw    : ==keyword==  inline concept — semibold with a soft-orange underline
   .kw-bg : !!highlight!! brand value — soft-coloured background highlight
   Highlight colour is driven by --hl-bg (orange on cream/yellow); lilac
   sections set --hl-bg: var(--hl-lilac) to switch the accent automatically. */
.kw {
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(transparent 55%, var(--hl-bg) 55%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.kw--lilac  { background: linear-gradient(transparent 55%, var(--hl-lilac)  55%); }
.kw--yellow { background: linear-gradient(transparent 55%, var(--hl-yellow) 55%); }
.kw-bg {
  font-weight: 700;
  color: inherit;
  background: var(--hl-bg);
  padding: 0.02em 0.22em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.kw-bg--lilac  { background: var(--hl-lilac);  }
.kw-bg--yellow { background: var(--hl-yellow); }
/* ── end accent styles ───────────────────────────────────────────────────── */

a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--peach); }
a:hover { text-decoration-color: var(--ink); }
a[href^="mailto:"] { text-decoration-color: var(--peach); }
ul { list-style: none; }

/* ── NAV ── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--cream);
  display: flex;
  align-items: center;
  padding: 0 2rem;
  height: 64px;
  gap: 0.5rem;
  transition: transform 0.3s ease;
  will-change: transform;
}
.site-nav.nav-hidden { transform: translateY(-100%); }
/* offset content to clear the now-fixed nav */
header.site-header,
body > header { padding-top: 64px; }

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 1rem;
}
/* On the home page the hero carries the logo — hide the nav wordmark at
   the top and reveal it once the hero has scrolled away. */
body.home .logo-mark { opacity: 0; transition: opacity 0.4s ease; }
body.home.scrolled .logo-mark { opacity: 1; }
/* Show logo-mark when mobile hamburger is open so users see the brand */
body.home .site-nav.hamburger-open .logo-mark { opacity: 1; }

/* Floating standalone logo — visible on home page when the nav is hidden
   (scrolling down past the hero). Sits at the same position as the nav
   logo-mark so the two never overlap. */
.floating-logo {
  position: fixed;
  top: 17px;
  left: 2rem;
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
}
.floating-logo.show { opacity: 1; pointer-events: auto; }
/* No floating logo on mobile — the hero is compact and visible */
@media (max-width: 960px) { .floating-logo { display: none !important; } }
.floating-logo-mark {
  display: block;
  width: 145px;
  height: 30px;
  background: url('../assets/Ekvalita_txt_blue_rgb.svg') no-repeat left center / 140px auto;
}
.logo-mark {
  display: block;
  width: 120px;
  height: 30px;
  background: url('../assets/Ekvalita_txt_blue_rgb.svg') no-repeat center / 140px auto;
}

/* Nav links — two group triggers */
.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  margin-left: auto;
  gap: 5rem;
}
.nav-links li { position: static; }
.nav-links > li > a {
  display: block;
  padding: 0 1rem;
  height: 64px;
  line-height: 64px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
  min-width: 8rem;
  transition: color var(--transition);
  cursor: default;
}
.nav-links > li > a:hover { color: var(--blue-dk); }

/* Mega-menu — full-width panel behind the nav bar.
   --mega-start and --mega-col1-w are set by JS from real tab positions. */
.nav-mega {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--peach);
  padding-top: calc(64px - 0.75rem);
  padding-bottom: 1.5rem;
  padding-left: var(--mega-start, 60%);
  padding-right: 2rem;
  display: flex;
  gap: 0;
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 100;
}
/* Col 1 min-width = distance between "Vårt arbete" and "Om oss" → col 2 sits under "Om oss" */
.nav-mega-col:first-child { min-width: var(--mega-col1-w, 12rem); }

/* Nav goes transparent when mega is open so salmon shows through */
.site-nav.mega-open { background: transparent; }

/* Shown via JS (.nav-mega.open) — above hero (150) but below nav (200) */
.nav-mega.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 195;
}
.nav-mega-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.nav-mega a {
  color: var(--blue);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--transition);
  height: auto;
  line-height: 1.4;
  padding: 0.35rem 1.5rem 0.35rem 0;
  white-space: nowrap;
}
.nav-mega a::before { content: "→"; }
.nav-mega a:hover { color: var(--ink); text-decoration: underline; }

/* Kontakt pill button */
.nav-kontakt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1.25rem;
  min-width: 9rem;
  background: var(--white);
  color: var(--blue);
  border: none;
  border-radius: 2rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 1rem;
  transition: background var(--transition), color var(--transition);
}
.nav-kontakt:hover,
.nav-kontakt.active {
  background: var(--blue);
  color: var(--white);
  text-decoration: none;
}

/* ── LANGUAGE SWITCHER ── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 2.4rem;
  flex-shrink: 0;
}
.lang-switcher [data-lang] {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-lt);
  padding: 0.3rem 0.6rem;
  transition: background var(--transition), color var(--transition);
  line-height: 1;
}
.lang-switcher [data-lang="en"] { display: none; }
.lang-switcher [data-lang]:hover { background: rgba(0,0,0,0.04); color: var(--ink); }
.lang-switcher [data-lang].active {
  background: var(--blue);
  color: var(--white);
}

/* Hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: var(--transition);
}

/* ── HERO ── */
.hero {
  background: transparent;
  color: var(--ink);
  position: relative;
  z-index: 150;
  width: 100%;
  min-height: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 2rem 2rem 4rem;
}
/* Canvas fills the entire hero — balls travel across the full banner */
#ekv-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
/* Text sits on top of the canvas */
.hero-text {
  position: relative;
  z-index: 2;
  text-align: center;
}
.hero-logo {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}
.hero-logo.visible { opacity: 1; transform: none; }
.hero-wordmark {
  display: block;
  width: clamp(220px, 29vw, 285px);
  height: auto;
  margin: 0 auto;
  transform: translateX(6px);
}
.hero-subtitle {
  /* h1 — inherits 40pt extrabold #833b48 from base */
  text-align: center;
  max-width: 550px;
  margin: 0 auto 1rem;
  min-height: 1.5rem;
  letter-spacing: -0.01em; /* keep original hero tracking — H1 tracking bump is for page titles only */
}

/* ── SECTIONS ── */
.section-inner { max-width: 880px; margin: 0 auto; }

/* Intro */
.intro-section { padding: 0 3rem 1rem; background: transparent; }
.intro-section h3 {
  font-weight: 800;
  text-align: left;
  max-width: 600px;
  margin: 0 auto 0 15%;
}

/* About panel */
.about-panel {
  background: transparent;
  padding: 0 3rem 2rem;
}
.about-panel { position: relative; }
.about-panel-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}
.about-content .btn-pill {
  margin-top: 1.5rem;
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.about-decoration {
  position: absolute;
  top: 50%;
  right: -120px;
  /* `translate` (individual property) handles vertical centring so
     `transform` is free for the orbDrift keyframe to animate. */
  translate: 0 -50%;
  width: 460px;
  height: 460px;
  background: url("../assets/Bakgrund, mjuka bollar/10.png") center/contain no-repeat;
  pointer-events: none;
  animation: orbDrift 48s ease-in-out infinite,
             orbBreath 14s ease-in-out infinite;
}
.about-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
}
.about-logo svg { width: 110px; height: 110px; }
.about-logo-name {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--ink);
}
.about-content p { color: var(--ink-mid); margin-bottom: 0.85rem; }
.about-content strong { color: var(--ink); font-weight: 700; }
.about-content ul {
  margin: 0.5rem 0 1rem;
  list-style: none;
}
.about-content ul li {
  padding: 0.2rem 0 0.2rem 1.4rem;
  position: relative;
  color: var(--ink-mid);
}
.about-content ul li::before {
  content: '◼';
  font-size: 0.35em;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue);
}
.about-content a { color: var(--blue); font-weight: 500; }

/* Team grid (home page) */
.team-section { padding: var(--sec-pad); background: transparent; }
.team-read-more {
  text-align: center;
  font-weight: 600;
  margin-bottom: 2rem;
}
.team-read-more a { text-decoration-color: var(--peach); }
.team-section-heading {
  text-align: center;
  margin-bottom: 2.5rem;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}
@media (max-width: 880px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
}
.team-card {
  text-align: center;
}
.team-card-photo {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  margin-bottom: 0.85rem;
  background: var(--cream);
}
.team-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.team-card-photo:hover img { transform: scale(1.04); }
.team-card-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: white;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
}
.team-card-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
  text-decoration: none;
}
.team-card-name:hover { color: var(--blue); }
.team-card-role {
  font-size: 0.88rem;
  color: var(--ink-mid);
  margin-bottom: 0.65rem;
  line-height: 1.4;
}
.team-card-contact {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.85rem;
}
.team-card-email { color: var(--blue); }
.team-card-phone { color: var(--ink-mid); }

/* Team member full view (om-oss page) */
.team-member {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3.5rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.team-member:last-child { border-bottom: none; }
.team-sidebar { text-align: center; }
.team-photo { width: 100%; border-radius: 3px; display: block; }
.team-photo-placeholder {
  width: 100%; aspect-ratio: 3/4; border-radius: 3px;
  background: var(--cream); display: flex; align-items: center;
  justify-content: center; font-size: 3rem; font-weight: 700; color: var(--ink-mid);
}
.team-name {
  font-weight: 700; font-size: 1.1rem;
  color: #833b48; margin-top: 1rem;
}
.team-role { color: var(--ink-mid); font-size: 0.88rem; margin-top: 0.25rem; }
.team-contact {
  margin-top: 0.75rem; display: flex; flex-direction: column;
  gap: 0.2rem; font-size: 0.85rem;
}
.team-contact a { color: var(--blue); text-decoration-color: var(--peach); }
.team-contact span { color: var(--ink-mid); }
.team-bio p { margin-bottom: 1rem; line-height: 1.8; }
.team-bio p:last-child { margin-bottom: 0; }
.team-pronouns { font-size: 0.88rem; color: var(--ink-mid); margin-top: 0.5rem; }
@media (max-width: 700px) {
  .team-member { grid-template-columns: 1fr; gap: 1.5rem; }
  .team-sidebar { display: flex; flex-direction: column; align-items: center; }
  .team-photo { max-width: 200px; }
}

/* Services */
.services-section { padding: var(--sec-pad); background: transparent; }
.services-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.services-header h1 {
  margin-bottom: 0.75rem;
}
/* renderSlot wraps plain text in <p> — inherit h1 colour */
.services-header h1 p { color: inherit; display: inline; margin: 0; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.service-card {
  text-align: center;
  background: none;
  border: none;
  padding: 0;
}
.service-card-circle {
  width: 200px;
  height: 200px;
  margin: 0 auto 1.25rem;
  transition: transform var(--transition);
}
.service-card:hover .service-card-circle { transform: translateY(-4px); }
.service-card-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.service-card p { font-size: 0.93rem; color: var(--ink-mid); line-height: 1.7; }

/* Testimonial */
.testimonial-block {
  background: transparent;
  padding: 3.5rem 2rem;
}
.testimonial-inner { max-width: 880px; margin: 0 auto; }
.testimonial-block blockquote {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.85;
  margin-bottom: 1.25rem;
}
.testimonial-block cite {
  font-style: normal;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
}

/* CTA */
.cta-section {
  padding: 4rem 2rem;
  text-align: center;
  background: transparent;
}
.btn {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.9rem 2.4rem;
  border-radius: var(--radius);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform 0.15s;
}
.btn:hover {
  background: var(--blue-lt);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--white);
}

/* ── THREE CARDS ── */
.cards-section { padding: var(--sec-pad); background: transparent; }
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.info-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--cream);
  border-radius: 12px;
  overflow: hidden;
}
.info-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info-card-img--placeholder img {
  object-fit: contain;
  padding: 2rem;
}
.info-card h1 {
  font-size: 1.75rem;
  margin: 1.25rem 1rem 0.5rem;
}
.info-card h1 a { color: inherit; text-decoration: none; }
.info-card h1 a:hover { text-decoration: underline; text-decoration-color: var(--peach); }
.info-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 0 1.25rem;
  flex: 1;
  margin-bottom: 0;
}
.info-card .btn-pill { margin: 1.25rem 0 1.5rem; }

/* ── PILL BUTTON ── */
.btn-pill {
  display: inline-flex;
  align-items: center;
  background: var(--peach);
  color: var(--blue);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.6rem 1.75rem;
  border-radius: 2rem;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.btn-pill:hover { background: var(--blue); color: var(--white); text-decoration: none; }
.btn-pill p { display: inline; margin: 0; }

.section-cta { text-align: center; margin-top: 2.5rem; }

/* ── VARFÖR EKVALITA ── */
.varfor-section { padding: var(--sec-pad); background: transparent; text-align: center; }
.varfor-section h1 {
  margin-bottom: 1.5rem;
}
.varfor-body {
  max-width: 680px;
  margin: 0 auto 2rem;
  color: var(--ink-mid);
  line-height: 1.8;
  text-align: left;
}

/* ── NEWSLETTER ── */
.newsletter-section { padding: 3rem; text-align: center; }

/* ── EKVALITA EDUCATION ── */
.edu-section { padding: var(--sec-pad); }
.edu-inner {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
}
.edu-logo { width: 320px; }
.edu-pencil { width: 100%; max-width: 500px; }
.edu-text { font-size: 1.1rem; line-height: 1.7; }
.edu-text a { color: var(--blue); font-weight: 700; }

/* ── CLOSING CTA ── */
.closing-cta { padding: var(--sec-pad); text-align: center; }
.closing-cta h1 { margin-bottom: 0.75rem; }

/* ── FOOTER ── */
.site-footer {
  background: transparent;
  color: var(--ink);
  padding: 4rem 2rem 3rem;
  text-align: center;
  border-top: 1px solid rgba(50, 63, 136, 0.12);
}
.footer-company {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  margin-bottom: 2.5rem;
  color: var(--blue);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2rem;
  max-width: 820px;
  margin: 0 auto 2.5rem;
  text-align: left;
}
.footer-col address,
.footer-col p {
  font-size: 0.88rem;
  line-height: 2;
  color: var(--ink-mid);
  font-style: normal;
}
.footer-col strong {
  color: var(--ink);
  font-weight: 600;
  display: block;
  margin-bottom: 0.2rem;
}
.footer-col a { color: var(--blue); }
.footer-col a:hover { color: var(--blue-lt); }
.footer-legal {
  font-size: 0.78rem;
  color: var(--ink-lt);
  line-height: 2.2;
}
.footer-legal a { color: var(--ink-lt); }
.footer-legal a:hover { color: var(--blue); }
.footer-social { margin-top: 1.75rem; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(50, 63, 136, 0.28);
  border-radius: 50%;
  color: var(--blue);
  transition: all var(--transition);
  text-decoration: none;
}
.footer-social a:hover {
  background: rgba(50, 63, 136, 0.08);
  color: var(--blue);
  border-color: rgba(50, 63, 136, 0.55);
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ── Mobile submenu (accordion inside the hamburger drawer) ── */
.mobile-submenu {
  display: none; /* hidden on desktop via min-width guard below */
  list-style: none;
  margin: 0;
  padding: 0.2rem 0.75rem 0.65rem;
  background: transparent;
}
.mobile-submenu a {
  display: block;
  padding: 0.22rem 0;
  font-size: 0.83rem;
  color: var(--blue);
  text-decoration: none;
}
.mobile-submenu a:hover { text-decoration: underline; text-decoration-color: var(--peach); }

/* Hide mobile submenus entirely on desktop */
@media (min-width: 961px) {
  .mobile-submenu { display: none !important; }
}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .about-panel-inner { grid-template-columns: 1fr; gap: 2rem; }
  .about-logo { flex-direction: row; justify-content: flex-start; }
  .about-decoration { display: none; }

  /* Remove horizontal padding from the nav bar itself so nav-links can be
     truly full-width. Add the padding back to individual items instead. */
  .site-nav { flex-wrap: wrap; height: auto; padding: 0.75rem 0; }
  .logo { order: 1; margin-left: 1.25rem; transition: opacity 0.25s ease; }
  /* Peach from the very top when hamburger is open — mirrors desktop mega */
  .site-nav.hamburger-open { background: var(--peach); }
  .lang-switcher { order: 2; margin-left: auto; }
  .nav-toggle { display: flex; flex-direction: column; order: 3; margin-left: 0.75rem; margin-right: 1.25rem; }
  .nav-kontakt { display: none; }

  .nav-links {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    width: 100%;
    margin-top: 0;
    order: 4;
    background: var(--peach);
  }
  .nav-links.open { display: flex; }
  /* Tabs: natural width, centered as a group, not spread edge-to-edge */
  .nav-links > li { flex: 0 1 48%; min-width: 0; }
  /* Same colour for both tabs — active state is desktop-only */
  .nav-links > li > a,
  .nav-links .active > a { color: var(--blue); }
  .nav-links > li > a {
    height: auto;
    line-height: 1;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
  }
  /* Chevron indicator for collapsible groups */
  .has-drop > a::after {
    content: "›";
    font-size: 1.1rem;
    display: inline-block;
    transform: rotate(90deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 0.5rem;
    color: var(--ink-lt);
  }
  .has-drop.open > a::after { transform: rotate(-90deg); }
  .has-drop.open > .mobile-submenu { display: block; }

  /* Hide desktop mega on mobile */
  .nav-mega { display: none !important; }
  .nav-mega-heading { margin-bottom: 0.6rem; }
  .nav-toggle { display: flex; }
}

@media (max-width: 768px) {
  .closing-cta h1 { font-size: 1.75rem; }
  .info-card h1 { font-size: 1.4rem; }

  .cards-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

  .intro-section { padding: 0 1.5rem 1rem; }
  .about-panel { padding: 0 1.5rem 2rem; }
  .newsletter-section { padding: 2rem 1.5rem; }
  .edu-logo { width: 220px; }
}

@media (max-width: 600px) {
  :root { --sec-pad: 3rem 1.25rem; }
  .hero { padding: 5rem 1.25rem 4rem; min-height: 480px; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card-circle { width: 150px; height: 150px; }
}

@media (max-width: 480px) {
  .closing-cta h1 { font-size: 1.4rem; }
}

/* ── Keyboard focus ── */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}