/* ============================================================================
   The landing page's sections.
   ========================================================================== */

/* ── Hero ──────────────────────────────────────────────────────────
   No pinned stage, no scroll-scrub, no video. A cinematic says "look what we
   build"; this company's argument is that it does not build anything. */

.hero {
  position: relative;
  background: var(--navy-900);
  color: #fff;
}
.hero-stage {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(74vh, 620px);
  padding: var(--sp-9) 0;
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10,24,38,.92) 0%, rgba(10,24,38,.78) 45%, rgba(10,24,38,.4) 100%);
}
.hero-copy { position: relative; }

/* The image ships EMPTY, and until the owner uploads one the hero is type on a
   navy band. Left-aligned, that band is 55% empty — a two-column composition
   with nothing in the second column, which reads as a photograph that failed to
   load rather than as a decision. So the plain variant is a centred
   typographic opening instead, measure-capped and shorter, and it returns to
   the left-aligned editorial layout the moment there is an image to align
   against. */
.hero--plain .hero-stage { min-height: min(52vh, 430px); }
.hero--plain .hero-copy { text-align: center; }
.hero--plain h1 { max-width: 20ch; margin-inline: auto; }
.hero--plain .hero-ingress { max-width: 54ch; margin-inline: auto; }
.hero--plain .hero-actions { justify-content: center; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font: var(--body-sm);
  font-weight: 500;
  letter-spacing: .02em;
  color: #CFE0EE;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  margin-bottom: var(--sp-5);
}
.hero-badge iconify-icon { color: var(--signal-300); }
.hero h1 { color: #fff; max-width: 18ch; }
.hero-ingress {
  font: var(--body-lg);
  color: #C9D7E4;
  max-width: 56ch;
  margin-top: var(--sp-4);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.hero .btn-ghost { border-color: rgba(255,255,255,.35); color: #fff; }
.hero .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }

/* ── Specialistområden ─────────────────────────────────────────── */

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-4);
}
.spec-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.spec-card:hover {
  border-color: var(--navy-400);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
/* A plain icon, not a tinted rounded tile with an icon in it. The tile is the
   single most recognisable ornament of a generated landing page, it adds a
   fourth surface colour to a card that already has three, and it says nothing
   the icon does not say by itself. */
.spec-card-icon {
  color: var(--navy-600);
  margin-bottom: var(--sp-3);
}
.spec-card-label {
  font: var(--display-sm);
  color: var(--text-heading);
}
.spec-card-text {
  font: var(--body-sm);
  color: var(--text-muted);
  flex: 1;
}
/* The whole card is the link, so a "Läs mer" caption under each one is the
   same three words repeated across the row saying what the cursor already
   says. An arrow that moves on hover is the affordance; the label was noise. */
.spec-card-more {
  display: flex;
  justify-content: flex-end;
  color: var(--navy-600);
  margin-top: var(--sp-4);
  transition: transform var(--speed) var(--ease);
}
.spec-card:hover .spec-card-more { transform: translateX(4px); }

/* ── Tidslinje ─────────────────────────────────────────────────────
   Horizontal on desktop, vertical on a phone. The sequence IS the argument:
   several of these cannot be done later. */

.timeline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  counter-reset: step;
}
.timeline-step {
  position: relative;
  padding: var(--sp-5) var(--sp-4) var(--sp-5) 0;
}
/* The connecting rule. A pseudo-element rather than a border so it stops at the
   last step instead of trailing off the end of the row. */
.timeline-step::before {
  content: "";
  position: absolute;
  top: calc(var(--sp-5) + 13px);
  left: 13px;
  right: 0;
  height: 2px;
  background: var(--navy-200);
}
.timeline-step:last-child::before { display: none; }
.timeline-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy-700);
  color: #fff;
  font: 600 12px/1 var(--font-display);
  margin-bottom: var(--sp-3);
}
.timeline-body { display: grid; gap: 4px; }
.timeline-label {
  font: var(--label);
  color: var(--text-heading);
  text-decoration: none;
}
a.timeline-label:hover { color: var(--navy-600); text-decoration: underline; }
/* Seven columns of ~150px, so every caption is three or four words over two or
   three lines. `pretty` is what stops each one ending on a single orphaned word
   — "Innan arbetet byggs / in" across the whole row is the difference between a
   sequence and a ransom note. */
.timeline-text {
  font: var(--body-sm);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ── När något gått fel ────────────────────────────────────────── */

.trouble {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}
/* 20ch broke this heading into three ragged lines; 24ch lets it balance
   into two. text-wrap: balance on h2 can only work with the room it is given. */
.trouble-copy h2 { max-width: 24ch; }
/* The right column: a photograph of the kind of defect, above the list of what
   we produce about it. Without the picture the column is four short lines
   beside six paragraphs, so the grid closes up to a single measure instead of
   leaving half the band empty. */
.trouble-aside { display: grid; gap: var(--sp-5); align-content: start; }
.trouble-figure {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.trouble-copy .prose-body { margin: var(--sp-4) 0 var(--sp-6); }
.trouble-copy .prose-body p { color: #C9D7E4; }

/* ── Varför ────────────────────────────────────────────────────── */

.why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: var(--sp-8);
  align-items: center;
}
/* :not(.kicker) is load-bearing. The kicker is a <p> in this block too, and
   `.why-copy p` outranks `.kicker` by one element in the selector — so this
   section's kicker rendered graphite while every other kicker on the site
   rendered in the signal accent, from one stray descendant selector. */
.why-copy p:not(.kicker) { font: var(--body-md); color: var(--text-body); margin-top: var(--sp-4); }
.why-copy .check-list { margin-top: var(--sp-6); }
.why-figure {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.why-figure-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ── Siffror ───────────────────────────────────────────────────── */

.stats-band { background: var(--navy-800); padding: var(--sp-7) 0; }
.stats-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-5);
}
.stat { display: grid; gap: 4px; text-align: center; }
.stat-value { font: 600 34px/1.1 var(--font-display); color: #fff; }
.stat-label { font: var(--body-sm); color: #8FA6BA; }

/* ── Målgrupper ────────────────────────────────────────────────── */

.aud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
}
.aud-card {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--border-card);
  border-left: 3px solid var(--navy-600);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  text-decoration: none;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.aud-card:hover { box-shadow: var(--shadow-card); border-left-color: var(--signal-500); }
.aud-card-title { font: var(--display-sm); color: var(--text-heading); }
.aud-card-text { font: var(--body-sm); color: var(--text-muted); }
/* Bottom-RIGHT, like every other card's arrow. As a grid item it defaulted to
   the start of its row, so three cards in a row pointed at their own left
   edge. */
.aud-card-more {
  justify-self: end;
  color: var(--navy-600);
  margin-top: var(--sp-2);
  transition: transform var(--speed) var(--ease);
}
.aud-card:hover .aud-card-more { transform: translateX(4px); }

/* ── Artikelrail ───────────────────────────────────────────────────
   A scroll-snapping overflow container, not a carousel: it works with a finger,
   a trackpad, a scrollbar and the keyboard before rail.js loads. The script
   only adds the arrows, which therefore ship hidden. */

.rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.rail-nav { display: flex; gap: var(--sp-2); }
.rail-arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-1);
  background: var(--paper-0);
  border-radius: var(--radius-sm);
  color: var(--navy-700);
  cursor: pointer;
}
.rail-arrow:hover { border-color: var(--navy-400); }
.rail-arrow[hidden] { display: none; }
.blog-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0;
  padding-bottom: var(--sp-3);
}
.blog-rail > * { scroll-snap-align: start; }

/* ── Omdömen ───────────────────────────────────────────────────── */

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.review {
  padding: var(--sp-5);
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
}
/* No oversized amber quote glyph glued to the first word. A testimonial is
   already marked as a quotation by being one; the decoration was an ornament
   the rest of this design system does not have anywhere else. */
.review blockquote {
  font: var(--body-md);
  color: var(--text-body);
  margin-bottom: var(--sp-4);
}
.review-author { display: block; font: var(--label); color: var(--text-heading); }
.review-role { display: block; font: var(--body-sm); color: var(--text-muted); }

/* ── Responsive ────────────────────────────────────────────────── */

/* The timeline turns vertical at the SAME number the navigation does, and the
   number is measured rather than picked: seven columns of 150px need 1050px of
   container, and the container is the viewport minus 48px of padding until it
   caps at 1140. Below that the auto-fit grid silently drops to six columns and
   leaves the seventh step alone on a second row with a connector rule running
   off the end of the first. */
@media (max-width: 1140px) {
  .timeline { grid-template-columns: minmax(0, 1fr); }
  .timeline-step { padding: 0 0 var(--sp-5) 44px; }
  .timeline-step::before {
    top: 28px;
    bottom: 0;
    left: 13px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .timeline-num { position: absolute; left: 0; top: 0; margin: 0; }
}

@media (max-width: 900px) {
  .trouble, .why { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .why-figure { order: -1; }
}