/* 0. SKRIFTER =============================================================
   Selvhostet, kun latin-utvalget, som dekker æ, ø og å. Hentet fra Google
   Fonts, lisens SIL Open Font License 1.1.

   Inter er én variabel fil. Google serverte den tre ganger, én per vekt, med
   identisk innhold. Her ligger den én gang, med vektområde, og siden sparer
   omtrent 95 kB.
   ========================================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/SpaceGrotesk.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Benmoussa Transport, stilark

   1. Tokens        2. Base          3. Layout
   4. Knapper       5. Kort og ikon  6. Header
   7. Seksjoner     8. Footer        9. Bevegelse, utskrift, tilgjengelighet

   Regler som gjelder hele arket:
   - Grønn betyr «dette kan du trykke på». Aldri pynt, aldri overskrifter.
   - Én knappestørrelse. Stil skiller viktighet, ikke størrelse.
   - Én grupperingsmekanisme per gruppe: ramme ELLER luft, ikke begge.
   - Ingen gradienter, ingen glød, ingen skygge utenom de to i seksjon 1.
   ========================================================================== */

/* 1. TOKENS ================================================================= */

:root {
  /* Lyse flater */
  --bg:            #FFFFFF;
  --bg-sunken:     #F5F7F6;

  /* Tekst. Kontrast mot hvitt i parentes. */
  --ink:           #0A1513;   /* 18.6:1 */
  --ink-2:         #4C5C57;   /*  7.1:1 */
  --ink-3:         #5B6B66;   /*  5.6:1 */

  --line:          rgba(10, 21, 19, 0.10);
  --line-2:        rgba(10, 21, 19, 0.16);

  /* Handling. Kun på ting som kan trykkes. */
  --action:        #08814F;   /* 4.9:1 med hvit tekst */
  --action-hover:  #046A40;   /* 6.7:1 med hvit tekst */
  --action-quiet:  rgba(8, 129, 79, 0.08);

  /* Mørkt felt (kun hero) */
  --dark:          #0A1513;
  --dark-ink:      #FFFFFF;   /* 18.6:1 */
  --dark-ink-2:    #B7C6C0;   /* 10.5:1 */
  --dark-line:     rgba(255, 255, 255, 0.14);

  /* Handlingsfargen sin mørk-variant. Samme kulør og metning som --action
     (155°, 88 %), kun lysere, slik at den leses som samme grønn og ikke
     som en ny farge. 6.1:1 mot --dark, 6.1:1 med --ink som tekst. */
  --action-on-dark: #0BA968;
  --action-on-dark-hover: #099A5F;

  --brand:         #00C878;   /* Kun logoen. Aldri i grensesnittet. */

  --danger:        #B3261E;

  /* Skrift */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --t-display: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  --t-title:   clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  --t-heading: 1.1875rem;
  --t-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --t-body:    1rem;
  --t-caption: 0.875rem;
  --t-label:   0.75rem;

  /* Rom, 4px-skala */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --gutter:    clamp(20px, 1rem + 2vw, 40px);
  --section-y: clamp(64px, 2.5rem + 5vw, 112px);
  --max:       1120px;
  --max-text:  680px;

  /* Form */
  --r-pill:  980px;
  --r-card:  16px;
  --r-panel: 20px;
  --r-field: 12px;

  /* De eneste to skyggene som finnes */
  --shadow-header: 0 1px 0 rgba(10, 21, 19, 0.08);
  --shadow-float:  0 -1px 0 rgba(10, 21, 19, 0.08),
                   0 -8px 24px -12px rgba(10, 21, 19, 0.14);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --header-h: 64px;
}

/* 2. BASE =================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s5));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 36ch;
}

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-title);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

h3 {
  font-weight: 600;
  font-size: var(--t-heading);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

h4 {
  font-weight: 600;
  font-size: var(--t-caption);
  line-height: 1.3;
}

p { margin: 0; text-wrap: pretty; max-width: 68ch; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
figure { margin: 0; }
dl, dd, dt { margin: 0; }

/* Lenker i løpende tekst er grønne, fordi de kan trykkes på */
.prose a,
.link {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover,
.link:hover { color: var(--action-hover); }

:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  border-radius: 4px;
}
.hero :focus-visible { outline-color: var(--action-on-dark); }

::selection { background: var(--action); color: #fff; }

.skip-link {
  position: fixed;
  left: 50%;
  top: 0;
  z-index: 200;
  transform: translate(-50%, -150%);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: var(--t-caption);
  padding: var(--s3) var(--s5);
  border-radius: 0 0 var(--r-field) var(--r-field);
  transition: transform 180ms var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Skjult for øyet, lesbart for skjermleser */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 3. LAYOUT ================================================================= */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--sunken { background: var(--bg-sunken); }

/* Seksjonshode. Rytme: eyebrow → 12 → h2 → 16 → lead → 48 → innhold */
.s-head { max-width: var(--max-text); margin-bottom: var(--s7); }
.s-head--center { margin-inline: auto; text-align: center; }
.s-head h2 { margin-bottom: var(--s4); }
.s-head p { font-size: var(--t-lead); color: var(--ink-2); }
.s-head--center p { margin-inline: auto; }

.eyebrow {
  display: block;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s3);
}

.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 4. KNAPPER ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: 600 0.9375rem/1 var(--font);
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 180ms var(--ease),
              border-color 180ms var(--ease),
              color 180ms var(--ease),
              transform 120ms var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: scale(0.98); }

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

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--secondary:hover {
  background: rgba(10, 21, 19, 0.04);
  border-color: var(--ink-3);
}

.btn--brand { background: var(--action-on-dark); color: var(--ink); }
.btn--brand:hover { background: var(--action-on-dark-hover); }

.btn--quiet {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: var(--dark-line);
}
.btn--quiet:hover { background: rgba(255, 255, 255, 0.2); }

.btn--block { width: 100%; }

/* Tekstlenke med pil. Grønn, fordi den kan trykkes på. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  color: var(--action);
  font-weight: 600;
  font-size: 0.9375rem;
}
.arrow-link svg {
  width: 18px; height: 18px;
  transition: transform 180ms var(--ease);
}
.arrow-link:hover { color: var(--action-hover); }
.arrow-link:hover svg { transform: translateX(3px); }

/* 5. KORT, IKONBRØNN, MERKELAPP ============================================= */

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s5);
}
.card h3 { margin-bottom: var(--s2); max-width: 20ch; }
.card p { color: var(--ink-2); }

a.card, .card--link { transition: border-color 180ms var(--ease); }
a.card:hover, .card--link:hover { border-color: var(--line-2); }

/* Ikonbrønn. Nøytral, aldri grønn: ikonet er ikke en knapp. */
.iwell {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--r-field);
  background: var(--bg-sunken);
  color: var(--ink-2);
  margin-bottom: var(--s4);
}
.iwell svg { width: 20px; height: 20px; }

.card--link .iwell,
.section--sunken .card .iwell { background: rgba(10, 21, 19, 0.05); }

.hero .iwell {
  background: rgba(255, 255, 255, 0.08);
  color: var(--dark-ink);
}

/* Liten faktalapp. Nøytral. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-caption);
  font-weight: 500;
  color: var(--ink-2);
}
.chip svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); }

/* Avkrysset liste */
.checklist { display: grid; gap: var(--s3); }
.checklist li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s3);
  align-items: start;
  color: var(--ink-2);
  font-size: var(--t-caption);
}
.checklist svg {
  width: 20px; height: 20px;
  color: var(--ink-2);    /* nøytral: haken kan ikke trykkes på */
  margin-top: 1px;
}

/* 6. HEADER ================================================================= */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  transition: box-shadow 180ms var(--ease);
}
.header--stuck { box-shadow: var(--shadow-header); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: var(--header-h);
}

.logo { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; }
.logo__mark { width: 36px; height: 36px; flex: none; }
.logo__mark svg { width: 100%; height: 100%; }
.logo__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}
.logo__name span { color: var(--ink-3); font-weight: 500; }

.nav { display: flex; align-items: center; gap: var(--s1); }
.nav a {
  padding: var(--s2) var(--s3);
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color 180ms var(--ease), background-color 180ms var(--ease);
}
.nav a:hover { color: var(--ink); background: rgba(10, 21, 19, 0.04); }
.nav a[aria-current="true"] { color: var(--action); }

.header__end { display: flex; align-items: center; gap: var(--s2); }

/* Menyknappen: tre strek som en stablet last, der overste laget er
   halvfullt. Det gjor den til var og ikke en hvilken som helst
   hamburger, men den leses fortsatt umiddelbart som en meny.

   Strekene ligger absolutt plassert, ikke i flex. Tidligere la de seg
   ved siden av hverandre, fordi knappen er flex med rad som retning, og
   da ble det tre sma streker pa rad i stedet for en meny. */
.burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink);
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.burger:hover { background: rgba(10, 21, 19, 0.04); border-color: var(--ink-3); }

.burger span {
  position: absolute;
  left: 12px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: width 260ms var(--ease),
              transform 260ms var(--ease),
              opacity 130ms var(--ease);
}
.burger span:nth-child(1) { top: 15px; width: 20px; }
.burger span:nth-child(2) { top: 22px; width: 20px; }
.burger span:nth-child(3) { top: 29px; width: 13px; }

/* Apen: lasten legger seg ned i et kryss. Den korte streken vokser ut,
   slik at begge armene er like lange. */
.burger[aria-expanded="true"] { border-color: var(--action); color: var(--action); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.burger[aria-expanded="true"] span:nth-child(3) { width: 20px; transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: var(--s3) var(--gutter) var(--s5);
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-nav .btn { margin-top: var(--s4); border-bottom: 0; }

/* 7. SEKSJONER ============================================================== */

/* --- Hero. Sidens eneste mørke felt. ------------------------------------- */
.hero {
  background: var(--dark);
  color: var(--dark-ink);
  padding-block: clamp(72px, 4rem + 6vw, 136px);
  text-align: center;
}
.hero h1 { margin-inline: auto; max-width: 18ch; }
.hero__lead {
  margin: var(--s5) auto 0;
  max-width: 52ch;
  font-size: var(--t-lead);
  color: var(--dark-ink-2);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  margin-top: var(--s7);
}
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3) var(--s6);
  margin-top: var(--s7);
  padding-top: var(--s6);
  border-top: 1px solid var(--dark-line);
}
.hero__proof .chip { color: var(--dark-ink-2); }
.hero__proof .chip svg { color: var(--dark-ink-2); }

/* --- To dører: bedrift eller privat -------------------------------------- */
.doors { display: grid; gap: var(--s5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.door { display: flex; flex-direction: column; padding: var(--s6); }
.door p { margin-bottom: var(--s5); }
.door .checklist { margin-bottom: var(--s5); }
.door .arrow-link { margin-top: auto; align-self: flex-start; }

/* --- Tjenester ------------------------------------------------------------ */
.services { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- Bilpark -------------------------------------------------------------- */

/* Bilparken. To kjoretoy side ved side, samme format og samme grunnlinje. */
.fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.vehicle__media {
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: #E9EDEB;           /* samme flate som er brent inn i utklippet */
  margin-bottom: var(--s5);
}
.vehicle__media img { width: 100%; height: 100%; object-fit: cover; }

.vehicle h3 { margin-bottom: var(--s2); }
.vehicle p { color: var(--ink-2); }
.vehicle { display: flex; flex-direction: column; }
.specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--s5);
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
}
.specs > div + div { border-left: 1px solid var(--line); padding-left: var(--s4); }
.specs dt {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s1);
}
.specs dd { font-weight: 600; font-size: 0.9375rem; color: var(--ink); }

.vehicle .specs { margin-top: auto; }

.pallets {
  display: grid;
  gap: var(--s7);
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  margin-top: var(--s7);
  padding-top: var(--s7);
  border-top: 1px solid var(--line);
}
.pallets h3 { margin-bottom: var(--s3); }
.pallets > div > p { color: var(--ink-2); margin-bottom: var(--s5); }
.pallets figure {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: var(--s5);
}
.pallets figcaption {
  margin-top: var(--s4);
  font-size: var(--t-caption);
  color: var(--ink-3);
  text-align: center;
}
.pallet-diagram { width: 100%; height: auto; color: var(--ink-3); }

/* --- Derfor. Gruppert med luft, ikke med rammer. -------------------------- */
.reasons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s7) var(--s6);
}
.reason > svg {
  width: 24px; height: 24px;
  color: var(--ink-2);
  margin-bottom: var(--s4);
}
.reason h3 { margin-bottom: var(--s2); }
.reason p { color: var(--ink-2); font-size: var(--t-caption); }

/* --- Prosess -------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s6);
  counter-reset: step;
}
.step { position: relative; padding-top: var(--s6); }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-3);
}
/* Hårstrek som binder stegene sammen */
.step::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 22px;
  right: calc(var(--s6) * -1);
  height: 1px;
  background: var(--line);
}
.step:last-child::after { display: none; }
.step h3 { margin-bottom: var(--s2); }
.step p { color: var(--ink-2); font-size: var(--t-caption); }

/* --- Kontakt -------------------------------------------------------------- */
.contact {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1.15fr 1fr;
  align-items: start;
}

.contact__panel {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: var(--s6);
}
.contact__panel h3 { margin-bottom: var(--s2); }
.contact__panel > p { color: var(--ink-2); font-size: var(--t-caption); margin-bottom: var(--s5); }

.contact__aside { display: grid; gap: var(--s4); align-content: start; }
.contact__aside-text {
  margin-top: var(--s2);
  color: var(--ink-2);
  font-size: var(--t-caption);
}

/* Ringekortet. Fylt grønt fordi hele kortet er en lenke. */
.call-card {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s5);
  border-radius: var(--r-card);
  background: var(--action);
  color: #fff;
  transition: background-color 180ms var(--ease), transform 120ms var(--ease);
}
.call-card:hover { background: var(--action-hover); }
.call-card:active { transform: scale(0.99); }
.call-card svg { width: 24px; height: 24px; flex: none; }
.call-card__label {
  display: block;
  font-size: var(--t-caption);
  color: rgba(255, 255, 255, 0.85);
}
.call-card__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}
.call-card .call-card__arrow { margin-left: auto; width: 20px; height: 20px; }

.mail-card {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s5);
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--bg);
  transition: border-color 180ms var(--ease);
}
.mail-card:hover { border-color: var(--line-2); }
.mail-card__label { display: block; font-size: var(--t-caption); color: var(--ink-3); }
.mail-card__value { display: block; font-weight: 600; color: var(--ink); word-break: break-all; }
.mail-card .mail-card__arrow { margin-left: auto; width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.mail-card .iwell { margin-bottom: 0; }

.info-block {
  padding: var(--s5);
  border-radius: var(--r-card);
  border: 1px solid var(--line);
}
.info-block__head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: var(--s2);
}
.info-block__head svg { width: 18px; height: 18px; color: var(--ink-3); }
/* :not() holder spesifisiteten over .info-block__head, som er en <p> */
.info-block > p:not(.info-block__head) { color: var(--ink-2); font-size: var(--t-caption); }

/* 8. FOOTER ================================================================= */

.footer {
  background: var(--bg-sunken);
  border-top: 1px solid var(--line);
  padding-block: var(--s8) var(--s6);
}
.footer__grid {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  padding-bottom: var(--s7);
}
.footer__about {
  margin-top: var(--s4);
  color: var(--ink-2);
  font-size: var(--t-caption);
  max-width: 34ch;
}
.footer h4 { margin-bottom: var(--s4); color: var(--ink); }
.footer li + li { margin-top: var(--s3); }
.footer li a, .footer li span {
  display: inline-flex;
  align-items: center;
  font-size: var(--t-caption);
  color: var(--ink-2);
  transition: color 180ms var(--ease);
}
.footer li a:hover { color: var(--action); }

/* På berøringsskjerm er 17 px høye lenker for smått å treffe. Der gir vi
   dem full trykkflate. Med mus er presisjonen god nok til at footeren kan
   holdes tett. */
@media (max-width: 720px), (pointer: coarse) {
  .footer li + li { margin-top: 0; }
  .footer li a, .footer li span { min-height: 44px; }
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.footer__bottom p { font-size: var(--t-caption); color: var(--ink-3); }

/* Mobil ringefelt */
.callbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  gap: var(--s3);
  padding: var(--s3) var(--gutter);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: var(--shadow-float);
}
.callbar .btn { flex: 1; }

/* --- Forespørselsskjema --------------------------------------------------- */
.qform,
.qform *,
.qform *::before,
.qform *::after {
  box-sizing: border-box;
}

.qform {
  display: block;
  /* Ingen egen boks: .contact__panel er ramma rundt skjemaet allerede. */
}

/* --- Feltrutenett -----------------------------------------------------
   Én kolonne som standard. Fra 640px: to kolonner, der fra/til og
   navn/telefon havner side ved side. Felt merket .field--full spenner
   over begge kolonnene og skyver de neste feltene ned på egen rad. */
.qform__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5) var(--s4);
}

@media (min-width: 640px) {
  .qform__fields {
    grid-template-columns: 1fr 1fr;
  }
  .qform__fields .field--full {
    grid-column: 1 / -1;
  }
}

/* --- Felt ---------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.field__label {
  font: 600 0.875rem/1.3 var(--font);
  color: var(--ink);
}

.field__optional {
  font-weight: 400;
  color: var(--ink-3);
}

.field__control {
  width: 100%;
  min-height: 48px;
  padding: var(--s3) var(--s4);
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-field);
  font: 400 1rem/1.4 var(--font);
  transition: border-color 180ms var(--ease);
}

.qform textarea.field__control {
  min-height: 96px;
  resize: vertical;
}

.field__control::placeholder {
  color: var(--ink-3);
}

/* Nøytraliser nettleserens innebygde :invalid-stil. novalidate stopper
   valideringsboblene, men noen nettlesere legger uansett farge på
   :invalid-kontroller via sitt UA-stilark. Vi styrer feil selv, via
   aria-invalid. */
.field__control:invalid {
  box-shadow: none;
}

.field__control:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  border-color: var(--action);
}

.field__control[aria-invalid="true"] {
  border-color: var(--danger);
}

.field__error {
  font: 400 0.875rem/1.45 var(--font);
  color: var(--danger);
}

.field__error[hidden] {
  display: none;
}

/* --- Innsending og hjelpetekst -------------------------------------------- */
.qform__btn {
  width: 100%;
  justify-content: center;
  margin-top: var(--s6);
}

.qform__helper {
  margin-top: var(--s3);
  font: 400 0.875rem/1.45 var(--font);
  color: var(--ink-3);
  text-align: center;
}

.qform__status {
  margin-top: var(--s3);
  font: 500 0.875rem/1.45 var(--font);
  color: var(--ink-2);
  text-align: center;
}

.qform__status:empty {
  display: none;
}

/* --- Ingen JavaScript ------------------------------------------------------ */
.qform__noscript {
  margin: 0 0 var(--s5);
  padding: var(--s4);
  background: var(--bg-sunken);
  border-radius: var(--r-field);
  font: 400 0.875rem/1.5 var(--font);
  color: var(--ink-2);
}

.qform__noscript a {
  color: var(--action);
}

/* 9. BEVEGELSE, RESPONSIVT, UTSKRIFT ======================================== */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --- Responsivt ----------------------------------------------------------- */

@media (max-width: 1024px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reasons  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) var(--s6); }
  .step::after { display: none; }
  .contact  { grid-template-columns: 1fr; }
  .pallets  { grid-template-columns: 1fr; gap: var(--s6); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .header__end .btn--primary span { display: none; }
  .header__end .btn--primary { padding: 0; width: 44px; }
}

@media (max-width: 720px) {
  .doors  { grid-template-columns: 1fr; }
  .fleet { grid-template-columns: 1fr; }
  .door   { padding: var(--s5); }
  .contact__panel { padding: var(--s5); }
  body { padding-bottom: 76px; }          /* plass til ringefeltet */
  .callbar { display: flex; }
}

@media (max-width: 560px) {
  .services { grid-template-columns: 1fr; }
  .reasons  { grid-template-columns: 1fr; gap: var(--s6); }
  .steps    { grid-template-columns: 1fr; gap: var(--s5); }
  .step     { padding-top: 0; padding-left: var(--s6); }
  .step::before { top: 2px; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s6); }
  .hero__proof { gap: var(--s3); flex-direction: column; align-items: center; }
  .hero__actions .btn { width: 100%; }
}

/* --- Mindre bevegelse ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .arrow-link:hover svg { transform: none; }
  .btn:active { transform: none; }
}

/* --- Utskrift ------------------------------------------------------------- */

@media print {
  .header, .callbar, .mobile-nav, .skip-link, .qform, .hero__actions { display: none !important; }
  .hero { background: #fff; color: #000; padding-block: var(--s6); }
  .hero h1, .hero__lead, .hero__proof .chip { color: #000; }
  .section { padding-block: var(--s5); page-break-inside: avoid; }
  .card, .door, .contact__panel, .info-block { border-color: #ccc; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="tel:"]::after, a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}