/* ==========================================================================
   Advokatfirmaet Hellander - "Nordisk Juridisk" design system
   Nordic minimalist: off-white canvas, obsidian ink, one midnight-cobalt
   accent, whisper hairlines, Outfit throughout. Flat by construction:
   hierarchy comes from type, tone and 1px rules, never from shadows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Type: Outfit, self-hosted variable font. Latin covers æ ø å.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: "Outfit";
  src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Canvas and tonal layers. Depth is a shift in tone, never a shadow. */
  --canvas: #fdfdfd;
  --surface-1: #f7f6f7;
  --surface-2: #f0edef;
  --surface-3: #eae7e9;

  /* Ink. Pure black is forbidden. */
  --ink: #1a1a1a;
  --ink-soft: #45474c;
  /* The design system's `outline` grey (#75777d) is a 4.4:1 tone against the
     canvas, which fails AA for the 11-12px labels that use it. Darkened just
     enough to clear 4.5:1 on the tinted panels too. */
  --ink-faint: #64666c;

  /* One accent: Midnight Cobalt. Used for CTAs, active states, rules. */
  --accent: #1e293b;
  --accent-deep: #091426;
  --on-accent: #ffffff;

  /* The one colour outside the cobalt system. Review stars are a convention
     borrowed from elsewhere - readers scan for gold - so they get their own
     token rather than bending the accent. Used only on rating stars.
     Deeper than a pure gold in light mode: a bright #f5b301 sits at 2.2:1 on
     the tinted panel and reads as washed out. This value clears 3:1, the
     non-text threshold, while still reading unmistakably gold. */
  --star: #b87d00;

  /* Whisper borders */
  --line: #e2e8f0;
  --line-strong: #c5c6cd;

  /* Functional states only */
  --error: #ba1a1a;

  --font: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Fluid scale, 360px to 1440px */
  --step--2: clamp(0.7rem, 0.685rem + 0.07vw, 0.75rem);
  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.975rem + 0.11vw, 1.0625rem);
  --step-1: clamp(1.08rem, 1.02rem + 0.28vw, 1.25rem);
  --step-2: clamp(1.3rem, 1.19rem + 0.49vw, 1.55rem);
  --step-3: clamp(1.6rem, 1.32rem + 1.24vw, 2.35rem);
  --step-4: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);
  --step-5: clamp(2.4rem, 1.62rem + 3.45vw, 4rem);

  /* Shape: 4px on controls, 8px on containers and media. Nothing else. */
  --radius: 4px;
  --radius-lg: 8px;

  --container: 1240px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --measure: 65ch;
  --header-height: 72px;
  --section: clamp(4.5rem, 9vw, 8rem);
  --section-tight: clamp(2.75rem, 6vw, 4.5rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --track: 0.16em;
}

/* Same system, inverted tones. Values come from the design system's own
   inverse tokens, so the brand reads identically in either mode. */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #1b1b1d;
    --surface-1: #202023;
    --surface-2: #262629;
    --surface-3: #303032;
    --ink: #f3f0f2;
    --ink-soft: #c5c6cd;
    --ink-faint: #9a9ba1;
    --accent: #bcc7de;
    --accent-deep: #d8e3fb;
    --on-accent: #111c2d;
    --star: #f2b418;
    --line: #35353a;
    --line-strong: #4a4a52;
    --error: #ffb4ab;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  color-scheme: light dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.nav-open {
  overflow: hidden;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

/* Every photo is wrapped in <picture> to offer AVIF and WebP before the JPEG.
   display: contents removes the wrapper from layout entirely, so rules like
   `.hero-media img { height: 100% }` keep resolving against .hero-media rather
   than against the <picture> box — the markup gained a level, the layout did
   not. Safe here because <picture> carries no semantics of its own; it is a
   selection mechanism, and the <img> inside remains the rendered element. */
picture {
  display: contents;
}

a {
  color: inherit;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.25em;
  transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}

a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  font-family: var(--font);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin: 0 0 0.55em;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--step-4);
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

p {
  margin: 0 0 1em;
  color: var(--ink-soft);
}

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

address {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.narrow {
  width: min(760px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.section {
  padding-block: var(--section);
}

.section-tight {
  padding-block: var(--section-tight);
}

.section-heading {
  max-width: 34ch;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}

.section-heading > :last-child {
  margin-bottom: 0;
}

.section-heading p:not(.eyebrow) {
  max-width: var(--measure);
  font-size: var(--step-1);
}

/* A rule above a section is the only separator this system uses. */
.section-rule {
  border-top: 1px solid var(--line);
}

/* Small uppercase label with a leading hairline. Rationed: at most one per
   three sections, per the design system. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.4rem;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--ink-faint);
}

/* Kept for the tonal shift inside the hero headline. The class name survives
   from the previous build because the English string carries it. */
.text-gradient {
  color: var(--ink-soft);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 400;
  transform: translateY(-150%);
  padding: 0.75rem 1.35rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.25s var(--ease);
}

.skip-link:focus {
  transform: translateY(0.75rem);
  color: var(--on-accent);
}

[id] {
  scroll-margin-top: calc(var(--header-height) + 2rem);
}

/* --------------------------------------------------------------------------
   Buttons. Flat, 4px, no gradients, no glow. Tactile 1px press.
   -------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease), transform 0.12s var(--ease);
}

.button-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.button-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--on-accent);
}

.button-outline,
.button-secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.button-outline:hover,
.button-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.button:active {
  transform: translateY(1px);
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Header. One line at desktop, 72px, hairline underneath.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 150;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: var(--header-height);
}

/* The lockup is measured from the supplied artwork (content 777x133: mark 101
   wide, 39 gap, 637 of text). Everything below is expressed as a fraction of
   the mark height, so the header and footer versions stay the same drawing at
   different sizes instead of drifting apart. */
.wordmark {
  --lockup-mark: 38px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--lockup-mark) * 0.293);
  margin-right: auto;
  text-decoration: none;
  color: var(--ink);
}

.wordmark:hover {
  color: var(--ink);
}

/* The H emblem, traced from the supplied artwork at its own scale: the
   viewBox is the mark's real 101x133, so every number below is an artwork
   pixel and nothing is a re-proportioning. Two hollow columns with a stepped
   top - the right column is the full 133 tall, the left starts 23 lower -
   joined by a hollow crossbar whose upper rule carries on through the right
   column and divides its counter. The step and that divided counter are what
   distinguish the mark; a symmetrical H is a different drawing.

   Filled, not stroked: the outlines are a single even path whose counters are
   wound the opposite way, so nonzero fill leaves them open while the crossbar
   rule laid over the right counter still inks. Stroking it would need three
   different widths and would not reproduce that overlap.

   currentColor rather than embedded artwork, so it inks itself from the
   surrounding text and is correct in light mode, dark mode and on the
   inverted surfaces without shipping a second file. */
.wordmark-mark {
  height: var(--lockup-mark, 38px);
  width: auto;
  flex: none;
  fill: currentColor;
  stroke: none;
}

/* Two lines, one size, wide tracking, ragged right: the lockup as drawn. */
.wordmark-text {
  display: flex;
  flex-direction: column;
  gap: 0.32em;
  line-height: 1;
  white-space: nowrap;
}

/* Weight and tracking are the artwork's, checked by overlaying the supplied
   PNG: at 0.442 of the mark height the two lines measure 182px against the
   artwork's 182px, so the lockup is the same drawing rather than a lookalike. */
.wordmark-firm,
.wordmark-name {
  font-size: calc(var(--lockup-mark, 38px) * 0.442);
  font-weight: 500;
  letter-spacing: 0.158em;
  text-transform: uppercase;
  color: var(--ink);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}

/* nowrap because these are flex items in a nowrap row: without it they are
   allowed to shrink below their text and break at the space instead, which
   turned "Om Anja" into two stacked lines once a fifth item joined the row.
   A nav label that wraps mid-item reads as a broken header, not as a tight
   fit - better to let the row demand its width and size the breakpoints
   around that. */
.site-nav a {
  padding: 0.4rem 0;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.site-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--line-strong);
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-cta {
  padding: 0.7rem 1.3rem;
  font-size: var(--step--2);
}

/* Language switch: two hairline-joined cells, active one filled. */
.lang-switch {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.lang-switch button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0.45rem 0.65rem;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.lang-switch button + button {
  border-left: 1px solid var(--line-strong);
}

.lang-switch button:hover {
  color: var(--ink);
}

.lang-switch button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

.nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle-lines,
.nav-toggle-lines::before,
.nav-toggle-lines::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 17px;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform 0.3s var(--ease), top 0.3s var(--ease), opacity 0.2s;
}

.nav-toggle-lines {
  top: 50%;
  transform: translate(-50%, -50%);
}

.nav-toggle-lines::before {
  top: -6px;
}

.nav-toggle-lines::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines::before {
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines::after {
  top: 0;
  transform: translateX(-50%) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Hero. Asymmetric 7/4 split: message left, standing panel right.
   -------------------------------------------------------------------------- */

/* The photo sits in its own layer behind everything in the hero. `isolation`
   pins the stacking context to .hero, so the z-index below cannot escape and
   slide underneath the page background. Extra bottom padding makes room for
   the licence credit, which is absolutely placed. */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(6.25rem, 8vw, 8rem);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* cover, not contain: the hero is anything from 390x600 on a phone to a
   1080p window, and the facade is symmetric, so a centre crop holds the
   entrance in frame at every one of them. Biased slightly up because the
   foreground pavement is the least interesting band of the picture. */
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* One flat wash, not a gradient - the system has no gradients, and a
   directional scrim would read as one. The alpha is set by contrast, not by
   taste: measured against the photo's own darkest pixels under each run of
   hero copy, this is the lightest veil where every string still clears
   4.5:1. Dark mode takes a little more, because the picture is a bright
   dusk exposure being pushed under pale ink. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(253, 253, 253, 0.78);
}

@media (prefers-color-scheme: dark) {
  .hero-media::after {
    background: rgba(27, 27, 29, 0.82);
  }
}

/* The one token exception in the hero, and it buys the photograph. --ink-faint
   is a 4.5:1 tone against the flat canvas, but not against a canvas with a
   building showing through it: at 11px it lands near 3.3:1 over the trees.
   Promoting these two small strings to --ink-soft clears AA at a wash of
   0.78; holding them at --ink-faint would need 0.91, which erases the image
   the wash exists to sit on. Body copy and the headline are unchanged. */
.hero .eyebrow,
.hero-credit {
  color: var(--ink-soft);
}

.hero .eyebrow::before {
  background: var(--ink-soft);
}

.hero-credit {
  position: absolute;
  bottom: clamp(1.25rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  /* Same expression as .container, so the credit starts on the same optical
     line as the headline instead of the raw viewport edge. */
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin: 0;
  font-size: var(--step--2);
  letter-spacing: 0.02em;
}

.hero-credit a {
  color: inherit;
  text-underline-offset: 0.25em;
}

.hero-credit a:hover {
  color: var(--accent);
}

/* Every layout grid declares minmax(0, 1fr) in its single-column state.
   A bare `auto` track is sized by its content's min-content width, so one
   nowrap button is enough to push a whole section past the viewport. */
.hero-grid,
.about-grid,
.rating-layout,
.stat-grid,
.contact-grid,
.process-grid,
.footer-grid,
.form-grid {
  grid-template-columns: minmax(0, 1fr);
}

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.hero h1 {
  max-width: 16ch;
  font-size: var(--step-5);
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin-bottom: 0.4em;
}

.hero-lede {
  max-width: 48ch;
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--ink-soft);
}

.hero-aside {
  align-self: start;
  padding: clamp(1.6rem, 3vw, 2.25rem);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
}

.panel-label {
  margin: 0 0 1.25rem;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hero-badges {
  display: grid;
}

.hero-badges li + li {
  border-top: 1px solid var(--line-strong);
}

.hero-badges a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.9rem 0;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.hero-badges a:hover {
  color: var(--accent);
}

.hero-badges li:first-child a {
  padding-top: 0;
}

.hero-badges li:last-child a {
  padding-bottom: 0;
}

.hero-badges .star {
  color: var(--accent);
}

@media (min-width: 900px) {
  /* Desktop hero fills the viewport below the sticky header. Content is
     anchored to the top of it, not centred: centring puts the headline 40%
     down a 1080p screen, which reads as a layout fault. Start-aligned, the
     headline lands in the same place at every window height and the open
     canvas below carries the section into the fold.
     min-height, not height, so a short window or a longer translation grows
     the section instead of clipping it. The vh line is the fallback for
     browsers without dynamic viewport units. */
  .hero {
    display: grid;
    align-content: start;
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100dvh - var(--header-height));
  }

  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
  }

  /* The hairline between the two columns is the composition, in place of a
     box around either of them. */
  .hero-aside {
    margin-left: clamp(1rem, 3vw, 2.5rem);
  }
}

/* Sub-page hero: same language, smaller register, hairline underneath. */
.page-hero {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}

.page-hero h1 {
  max-width: 18ch;
  font-size: var(--step-4);
  letter-spacing: -0.028em;
}

/* Scoped away from .eyebrow and .legal-meta: both are <p> too, and a bare
   `.page-hero p` outranks their own single-class rules. */
.page-hero p:not(.eyebrow):not(.legal-meta) {
  max-width: var(--measure);
  font-size: var(--step-1);
}

.page-hero p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   About: portrait left, copy right
   -------------------------------------------------------------------------- */

.about-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.portrait-frame {
  max-width: 420px;
}

.portrait-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: var(--radius-lg);
  filter: grayscale(1) contrast(1.03);
}

/* Years of experience: a stated fact under the portrait, not a sticker on it. */
.portrait-badge {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}

.portrait-badge strong {
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.portrait-badge span {
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.about-copy p {
  max-width: var(--measure);
}

@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* --------------------------------------------------------------------------
   Ratings: one large figure, rankings as a hairline register
   -------------------------------------------------------------------------- */

.rating-section {
  border-top: 1px solid var(--line);
}

.rating-layout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

.rating-score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
}

.rating-value {
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.rating-stars {
  display: inline-flex;
  gap: 0.2rem;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  color: var(--star);
}

.rating-score strong {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.rating-caption {
  max-width: 30ch;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-soft);
}

.rating-score .button {
  margin-top: 1.25rem;
}

/* Rankings read as a register of figures, not as six boxes. */
.stat-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-strong);
}

.stat-item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}

.stat-rank {
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.stat-desc {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-soft);
}

.source-line {
  margin: 1.5rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

@media (min-width: 700px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
  }
}

@media (min-width: 1000px) {
  .rating-layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }
}

/* --------------------------------------------------------------------------
   Practice-area tiles (home). Centred row of tiles; each reveals a
   photograph on hover or keyboard focus.
   -------------------------------------------------------------------------- */

/* Flex rather than grid: with five tiles, a wrapped row centres itself here,
   where grid would strand the remainder against the left edge. The 1px gaps
   let the container's background read as hairline dividers. */
.service-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.service-tile {
  position: relative;
  isolation: isolate;
  flex: 1 1 200px;
  max-width: 280px;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  padding: 1.75rem 1.35rem;
  background: var(--canvas);
  color: inherit;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
}

/* A real <img> rather than a CSS background: a relative url() inside a custom
   property is resolved against the stylesheet's folder, not the document, so
   the background form silently pointed at assets/css/assets/images/. The
   element form also gets lazy loading and reserved dimensions. */
.service-tile__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.45s var(--ease), transform 0.7s var(--ease);
}

.service-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim. Weighted to the lower half where the text sits, so white copy clears
   AA against any photograph behind it, not just the ones chosen today. */
.service-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(9, 20, 38, 0.45) 0%,
    rgba(9, 20, 38, 0.86) 55%,
    rgba(9, 20, 38, 0.92) 100%
  );
}

.service-tile:hover .service-tile__media,
.service-tile:focus-visible .service-tile__media {
  opacity: 1;
  transform: none;
}

.service-tile__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}

.service-tile h3 {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: color 0.35s var(--ease);
}

.service-tile p {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-soft);
  transition: color 0.35s var(--ease);
}

.service-tile__go {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-top: 0.5rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
    transform 0.35s var(--ease);
}

.service-tile:hover h3,
.service-tile:focus-visible h3,
.service-tile:hover p,
.service-tile:focus-visible p {
  color: #ffffff;
}

.service-tile:hover .service-tile__go,
.service-tile:focus-visible .service-tile__go {
  background: var(--on-accent);
  color: var(--accent-deep);
  transform: translateX(3px);
}

/* Tiles are set at a fixed basis per breakpoint so five of them never leave a
   single stranded card: five across, then three, then one. */
@media (max-width: 1079px) {
  .service-tile {
    flex-basis: 240px;
  }
}

@media (max-width: 759px) {
  .service-tile {
    flex-basis: 100%;
    max-width: none;
    min-height: 240px;
  }
}

/* The photograph is a hover affordance, not information. Without a pointer
   there is no hover, so it never appears and the tile stays legible. */
@media (hover: none) {
  .service-tile__media {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-tile__media {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Services: an index of practice areas, one hairline row each
   -------------------------------------------------------------------------- */

.services-grid {
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.service-card {
  display: grid;
  gap: 0.5rem clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.6rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.3s var(--ease);
}

a.service-card:hover {
  color: inherit;
  background: var(--surface-1);
}

.service-card h3 {
  margin: 0;
  transition: color 0.25s var(--ease);
}

a.service-card:hover h3 {
  color: var(--accent);
}

.service-card p {
  margin: 0;
  max-width: 58ch;
  font-size: var(--step-0);
  color: var(--ink-soft);
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: gap 0.3s var(--ease), color 0.25s var(--ease);
}

a.service-card:hover .service-link {
  gap: 0.8rem;
  color: var(--accent);
}

@media (min-width: 820px) {
  .service-card {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto;
    align-items: baseline;
  }

  .service-card h3 {
    grid-column: 1;
  }

  .service-card p {
    grid-column: 2;
  }

  .service-link {
    grid-column: 3;
    justify-self: end;
  }

  /* Pricing cards on the services page have no link, so the body fills the
     row instead of leaving the third column hanging. */
  .service-card:not(a) {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  }
}

/* Anchor chips (services page) */
.anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.anchor-nav a {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease),
    background-color 0.25s var(--ease);
}

.anchor-nav a:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* Contact actions: the two links that replaced the contact form. Each is a
   full-width target carrying an icon, a label and the actual number or
   address, so what the visitor is about to open is visible before they tap.
   Sized past the 44px touch minimum, since on a phone these are the whole
   point of the page. */
.contact-actions-buttons {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.contact-action {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: flex-start;
  padding: 1.15rem 1.35rem;
  text-align: left;
  min-height: 44px;
}

.contact-action svg {
  flex: none;
}

.contact-action-label {
  display: block;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track);
  text-transform: uppercase;
  opacity: 0.75;
}

.contact-action-value {
  display: block;
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
}

@media (min-width: 560px) {
  .contact-actions-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Breadcrumbs on the practice-area pages. Sits above the H1 in the page hero
   and mirrors the BreadcrumbList schema, so the trail a search result shows
   is the trail the page shows. Kept to label size and faint ink: it is
   orientation, not content. */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.breadcrumb a {
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.breadcrumb a:hover {
  color: var(--ink);
  border-bottom-color: var(--line-strong);
}

.breadcrumb [aria-current="page"] {
  color: var(--ink-soft);
}

.service-detail-more {
  margin: 0;
}

.service-detail-more a {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.25s var(--ease);
}

.service-detail-more a:hover {
  border-bottom-color: var(--accent);
}

/* Practice-area detail blocks */
.service-detail-list {
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.service-detail {
  display: grid;
  gap: 0.75rem clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-bottom: 1px solid var(--line);
}

.service-detail h2 {
  margin: 0;
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.service-detail p {
  margin: 0;
  max-width: var(--measure);
}

@media (min-width: 820px) {
  .service-detail {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }
}

/* --------------------------------------------------------------------------
   Process: three columns split by vertical hairlines, no boxes
   -------------------------------------------------------------------------- */

.process-section {
  border-top: 1px solid var(--line);
}

.process-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

/* Icon sits above the step title, one tonal step back from it: the icon is
   the slowest thing to read and should not outrank the words. */
.process-icon {
  display: block;
  margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem);
  color: var(--ink-soft);
}

.process-icon svg {
  display: block;
  width: clamp(38px, 4.5vw, 46px);
  height: auto;
}

.process-step h3 {
  margin-bottom: 0.6rem;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.process-step p {
  margin: 0;
  font-size: var(--step-0);
  color: var(--ink-soft);
}

@media (min-width: 820px) {
  .process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .process-step + .process-step {
    padding-left: clamp(2rem, 4vw, 3.5rem);
    border-left: 1px solid var(--line);
  }
}

/* --------------------------------------------------------------------------
   Coverage: two hairline columns, what is covered against what is not.
   Deliberately not colour-coded. Green/red would be the obvious move and the
   wrong one here: the split is not good news against bad news, it is two
   legal categories, and half the "not covered" entries turn on a threshold
   the reader cannot check from a web page. The two headings, the rule
   between them and the bolded lead term carry the structure instead.
   -------------------------------------------------------------------------- */

.coverage-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}

.coverage-col h2 {
  margin-bottom: 0;
  padding-bottom: clamp(1rem, 2vw, 1.35rem);
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--line-strong);
}

.coverage-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.coverage-list li {
  padding: clamp(1.1rem, 2.2vw, 1.4rem) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-0);
  color: var(--ink-soft);
}

/* The lead term on its own line: these entries are long, and a reader
   scanning for "forsikring" should not have to read seven full sentences. */
.coverage-list strong {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  color: var(--ink);
}

@media (min-width: 820px) {
  .coverage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 5vw, 4rem);
  }

  /* Same hairline-between-columns figure as .process-step. */
  .coverage-col + .coverage-col {
    padding-left: clamp(2.5rem, 5vw, 4rem);
    border-left: 1px solid var(--line);
  }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq-list {
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ink-soft);
  transition: transform 0.3s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
  border-color: var(--accent);
  color: var(--accent);
}

.faq-item summary:hover {
  color: var(--accent);
}

.faq-item summary:hover::after {
  border-color: var(--accent);
  color: var(--accent);
}

.faq-item p {
  margin: 0;
  padding: 0 0 1.5rem;
  max-width: var(--measure);
  font-size: var(--step-0);
}

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */

.cta-banner {
  padding-block: 0 var(--section);
}

.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  padding: clamp(2.25rem, 5vw, 3.5rem);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
}

.cta-title {
  margin: 0;
  max-width: 22ch;
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.cta-sub {
  margin: 0.6rem 0 0;
  max-width: 44ch;
  font-size: var(--step-0);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

.form-grid {
  display: grid;
  gap: 1.5rem;
}

.form-field label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.5;
  transition: border-color 0.25s var(--ease);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}

.form-field select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2345474c' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}

@media (prefers-color-scheme: dark) {
  .form-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23c5c6cd' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
  }
}

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

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.form-field [aria-invalid="true"] {
  border-color: var(--error);
}

/* Glidende skrivemarkør. Systemmarkøren hopper fra tegn til tegn; denne blir
   dratt etter av en fjær, så øyet ser hvor den kom fra. En 2px strek i
   aksentfargen, uten blink: designsystemet holder seg unna uendelige
   animasjoner, og forbildet blinker heller ikke.

   caret-color skrus av først når JavaScript faktisk har koblet opp feltet
   (is-smooth settes fra skriptet, ikke i markupen). Uten skript beholder
   feltet systemmarkøren, framfor å stå igjen uten markør i det hele tatt. */
.field-caret-host {
  position: relative;
  display: block;
}

.field-caret-host.is-smooth input,
.field-caret-host.is-smooth textarea {
  caret-color: transparent;
}

.field-caret {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s var(--ease);
}

.field-caret.is-visible {
  opacity: 1;
}

/* Målebrettet. Samme typografi, samme bredde og samme innrykk som feltet,
   men uten flate: her legges teksten fram markøren opp for å finne ut hvor
   den slutter. height og overflow holder det utenfor sidens rullehøyde,
   visibility utenfor både skjerm og skjermleser. */
.field-caret-mirror {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.checkbox-field {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.checkbox-field input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.3rem 0 0;
  flex: none;
  accent-color: var(--accent);
}

.checkbox-field label {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  text-transform: none;
  color: var(--ink-soft);
}

.form-error {
  margin: 0.5rem 0 0;
  font-size: var(--step--1);
  color: var(--error);
}

.form-error:empty {
  display: none;
}

.form-note {
  margin: 1.5rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.form-status {
  margin: 1rem 0 0;
  font-size: var(--step--1);
  font-weight: 500;
}

.form-status.is-success {
  color: var(--accent);
}

.form-status.is-error {
  color: var(--error);
}

.contact-panel {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
}

.contact-panel h2 {
  margin: 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--step-2);
  font-weight: 500;
}

.contact-list {
  display: grid;
  gap: 1.35rem;
}

.contact-list li {
  display: grid;
  gap: 0.3rem;
  font-size: var(--step-0);
  color: var(--ink);
}

.contact-list .contact-label {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.contact-list .contact-note {
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.contact-list a {
  text-decoration: none;
}

.contact-list a:hover {
  text-decoration: underline;
}

/* The map keeps Google's own colours: it is a wayfinding tool, and desaturating
   it costs the visitor the landmark and road-type cues they navigate by. */
.map-frame {
  width: 100%;
  height: 260px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   Samtykkeruta ved ankomst

   Flat som resten av systemet: 1px hårlinje, 8px hjørner, ingen skygge og
   ingen bakgrunnsuskarphet. Den ligger nederst framfor midt på skjermen -
   en rute midt i bildet dekker det man kom for å lese, og ekomloven krever
   et svar, ikke at man blir hindret i å lese sida imens.
   -------------------------------------------------------------------------- */
.consent-bar {
  position: fixed;
  z-index: 500;
  left: 50%;
  bottom: clamp(0.75rem, 2.5vw, 1.5rem);
  transform: translateX(-50%);
  width: min(38rem, 100% - var(--gutter) * 2);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
}

.consent-bar:focus {
  outline: none; /* fokus flyttes hit for opplesing, ikke for å tegne ramme */
}

.consent-bar__title {
  margin: 0 0 0.4rem;
  font-size: var(--step-0);
  font-weight: 600;
}

.consent-bar__text {
  margin: 0 0 1rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.consent-bar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* Godta og Avvis deler klasse, bredde og typografi. Bare fyllet skiller dem.
   Å gjøre nei-knappen mindre eller blassere er et mørkt mønster, og gjør
   samtykket ugyldig - Datatilsynet er tydelig på at avvisning ikke skal
   koste ekstra. Ikke «forbedre» dette ved å tone ned Avvis. */
.consent-bar__btn {
  /* flex-basis 0, ikke auto: da deler de to knappene plassen likt i stedet
     for å arve bredden fra ordlengden. «Godta» og «Avvis» er ikke like
     brede i Outfit, og da blir ja-knappen målbart større enn nei-knappen
     uten at noen har bestemt det. Med 0 er de identiske på alle språk. */
  flex: 1 1 0;
  min-width: 7.5rem;
  justify-content: center;
}

/* SC 2.5.8: 24 px høy klikkflate. Teksten flytter seg ikke - raden
   sentrerer vertikalt, og 0.6rem avstand til knappene holder
   24 px-sirklene fra å overlappe. */
.consent-bar__more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-inline-start: auto;
  font-size: var(--step--2);
  color: var(--ink-muted);
}

.consent-status {
  margin: 0 0 0.9rem;
  font-size: var(--step--1);
}

@media (max-width: 30rem) {
  /* På smal skjerm får knappene hver sin linje i full bredde, fortsatt like
     store som hverandre. */
  .consent-bar__btn { flex: 1 1 100%; }
  .consent-bar__more { margin-inline-start: 0; }
}

/* Samtykkeruta står der kartet kommer. Samme høyde som rammen, så siden
   ikke hopper når kartet lastes inn. */
.map-consent {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.map-consent__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.35rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2, var(--surface));
}

.map-consent__lede {
  margin: 0;
  font-size: var(--step--1);
}

.map-consent__note {
  margin: 0;
  font-size: var(--step--2);
  color: var(--ink-muted);
}

/* Knappen gjør ingenting uten JavaScript, så den vises ikke uten. Da står
   igjen forklaringen og adressen rett over - siden er fortsatt brukbar, og
   ingenting lastes fra Google, som er den trygge tilstanden å falle til. */
.map-consent__btn {
  display: none;
}

.js-enabled .map-consent__btn {
  display: inline-flex;
}

.map-consent__withdraw {
  align-self: flex-start;
  padding: 0.3rem 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--step--2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.map-consent__withdraw:hover {
  color: var(--ink);
}

@media (min-width: 1000px) {
  .contact-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

/* Oversikten over hva som lagres. Første tabellen på nettstedet, så reglene
   står her framfor i en generisk table-regel - kommer det flere tabeller
   senere, flytt dem ut. Hårlinjer og typografi følger designsystemet: ingen
   fyllfarge på annenhver rad, ingen ramme rundt hver celle. */
.table-scroll {
  overflow-x: auto;
  margin-top: 1.1rem;
  /* Brede tabeller skal rulle i sin egen boks, aldri dytte sida bortover. */
  -webkit-overflow-scrolling: touch;
}

.cookie-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--step--1);
  text-align: left;
}

.cookie-table th,
.cookie-table td {
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.cookie-table thead th {
  border-bottom: 1px solid var(--line-strong);
  font-weight: 600;
  white-space: nowrap;
}

.cookie-table code {
  font-size: 0.95em;
  word-break: break-word;
}

.legal-content {
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.legal-content > section {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  border-bottom: 1px solid var(--line);
}

.legal-content h2 {
  margin-bottom: 0.75rem;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.legal-content p {
  margin-bottom: 0.75em;
}

.legal-content p:last-child {
  margin-bottom: 0;
}

.legal-meta {
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Footer. Tinted layer, hairline structure.
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: clamp(3.5rem, 7vw, 5rem) 2.5rem;
  background: var(--surface-1);
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
}

/* The same lockup as the header, one step larger since it has room here. */
/* Same drawing as the header, one size up. Only the mark height is set: the
   gap and the type scale off it, so the proportions cannot drift. */
.footer-lockup {
  --lockup-mark: 44px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--lockup-mark) * 0.293);
  margin-bottom: 1.25rem;
  color: var(--ink);
}

.footer-brand p {
  max-width: 36ch;
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.footer-heading {
  margin: 0 0 1.15rem;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.footer-nav,
.footer-contact {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

/* Knappen som henter fram samtykkeruta igjen. Den er en ekte <button> fordi
   den åpner en dialog på gjeldende side i stedet for å navigere - en
   skjermleser skal si «knapp», ikke «lenke». Utseendet følger lenkene rundt
   den, så bunnteksten fortsatt leses som én liste. */
.footer-nav__button {
  padding: 0;
  border: 0;
  background: none;
  /* font, ikke bare font-family: en <button> arver verken skriftstørrelse
     eller linjehøyde fra omgivelsene. Uten dette ble knappen 16px høy der
     lenkene rundt er 23px - visuelt ute av takt, og et merkbart mindre mål
     å treffe enn det den ser ut som. */
  font: inherit;
  line-height: inherit;
  text-align: start;
  cursor: pointer;
}

.footer-nav a,
.footer-nav__button,
.footer-contact a,
.footer-contact span {
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-decoration: none;
  width: fit-content;
}

.footer-nav a:hover,
.footer-nav__button:hover,
.footer-contact a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.footer-legal {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.footer-legal p {
  max-width: 92ch;
  margin-bottom: 0.5em;
  font-size: var(--step--2);
  line-height: 1.7;
  color: var(--ink-faint);
}

.footer-legal p:last-child {
  margin-bottom: 0;
}

@media (min-width: 820px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */

.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 240;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--canvas);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Reveal on scroll. Opacity and transform only.
   -------------------------------------------------------------------------- */

.js-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}

.js-enabled [data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* The header drops to the mark alone once the bar gets tight. Scoped to the
   header: the footer has room for the full lockup at every width, and a bare
   H down there would leave the firm unnamed.
   Raised from 1080px to 1200px when the fifth nav item was added: the
   wordmark text costs about 180px, and at 1081px that was exactly what the
   longer row no longer had. The mark alone still identifies the firm; a
   cramped nav does not. */
@media (max-width: 1200px) {
  .site-header .wordmark-text {
    display: none;
  }
}

@media (max-width: 900px) {
  :root {
    --header-height: 64px;
  }

  .nav-toggle {
    display: block;
  }

  .nav-cta-fixed {
    display: none;
  }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 10;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    padding: calc(var(--header-height) + 2rem) var(--gutter) 2rem;
    background: var(--canvas);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s var(--ease), visibility 0.3s;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-nav a {
    width: 100%;
    padding: 1.1rem 0;
    font-size: var(--step-2);
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }

  .site-nav a[aria-current="page"] {
    border-bottom-color: var(--accent);
  }

  .wordmark,
  .header-actions {
    position: relative;
    z-index: 11;
  }
}

@media (max-width: 640px) {
  /* Long labels are allowed to break onto a second line here rather than
     push the page sideways. Desktop keeps every CTA on one line. */
  .button {
    white-space: normal;
    text-align: center;
  }

  .rating-score .button {
    width: 100%;
  }

  .stat-item {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 1rem;
  }

  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .button-row .button {
    width: 100%;
  }

  .back-to-top {
    right: 1rem;
    bottom: 1rem;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }

  .js-enabled [data-reveal] {
    opacity: 1;
    transform: none;
  }
}