/* ============================================================
   Uteklok – basstilar
   Mål: läsbar kod, korta rader, tydliga sektioner.
   ============================================================ */

/* Self-hosted latin (åäö ingår i U+0000-00FF).
   Fallback metrics match Source Sans 3 / Source Serif 4 so a late swap
   does not change line breaks. size-adjust is the average advance of the
   webfont divided by Arimo/Tinos (Arial/Times-compatible). */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin.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: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin.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: "Source Sans 3 Fallback";
  font-style: normal;
  font-weight: 400;
  src: local("Arimo"), local("Arial"), local("Liberation Sans");
  /* Tuned to the rendered lede, not only the ASCII average: Arimo stayed ~7% wider. */
  size-adjust: 89.36%;
  ascent-override: 114.59%;
  descent-override: 44.76%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Source Sans 3 Fallback";
  font-style: normal;
  font-weight: 600 700;
  src: local("Arimo Bold"), local("Arial Bold"), local("Liberation Sans Bold");
  size-adjust: 91.12%;
  ascent-override: 112.38%;
  descent-override: 43.90%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Source Sans 3 Noto";
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans");
  size-adjust: 89.24%;
  ascent-override: 114.75%;
  descent-override: 44.82%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Source Sans 3 Noto";
  font-style: normal;
  font-weight: 600 700;
  src: local("Noto Sans Bold");
  size-adjust: 86%;
  ascent-override: 119.07%;
  descent-override: 46.51%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Source Serif 4 Fallback";
  font-style: normal;
  font-weight: 600;
  src: local("Tinos Bold"), local("Times New Roman Bold"), local("Liberation Serif Bold");
  size-adjust: 114.85%;
  ascent-override: 90.21%;
  descent-override: 29.17%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Source Serif 4 Noto";
  font-style: normal;
  font-weight: 600;
  src: local("Noto Serif Bold");
  size-adjust: 95.60%;
  ascent-override: 108.37%;
  descent-override: 35.04%;
  line-gap-override: 0%;
}

/* Design tokens ------------------------------------------- */
:root {
  --sans: "Source Sans 3", "Source Sans 3 Fallback", "Source Sans 3 Noto", system-ui, sans-serif;
  --serif: "Source Serif 4", "Source Serif 4 Fallback", "Source Serif 4 Noto", Georgia, serif;
  /* Palett A: skiffer + rost */
  --slate: #243536;
  --slate-dark: #1a2728;
  --cream: #f3efe8;
  --cream-2: #e7e2d8;
  --ink: #1e2321;
  --muted: #5c5c5c;
  --rust: #c45c26;
  /* Knappfyllning. #f3efe8 på #a84e1f är 4.85:1. Samma färg i hover och active. */
  --rust-btn: #a84e1f;
  --white: #fff;
  --line: #d4cdc2;
  --max: 70rem;
  --read: 42rem;
  --radius: 0.35rem;

  /* Alias så gamla klasser fortfarande funkar */
  --green: var(--slate);
  --green-dark: var(--slate-dark);
  --gold: var(--rust);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--green);
}

a:hover {
  color: var(--green-dark);
}

/* Layout helpers ------------------------------------------ */
.wrap {
  width: min(100% - 2rem, var(--max));
  margin-inline: auto;
}

.read {
  width: min(100% - 2rem, var(--read));
  margin-inline: auto;
  overflow-x: auto;
}

/* Skip link (tillgänglighet + SEO-signal) ----------------- */
.skip {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  background: var(--green);
  color: var(--cream);
  padding: 0.5rem 0.75rem;
  z-index: 20;
}

.skip:focus {
  top: 0.75rem;
}

/* Synlig fokusring på alla kontroller (WCAG 2.4.7). */
:focus-visible {
  outline: 3px solid var(--slate);
  outline-offset: 2px;
}

.skip:focus-visible,
.notice :focus-visible,
.hero :focus-visible {
  outline-color: var(--cream);
}

/* Top bar: affiliate-disclaimer --------------------------- */
.notice {
  background: var(--green-dark);
  color: var(--cream);
  font-size: 0.85rem;
  text-align: center;
  margin: 0;
  padding: 0.45rem 1rem;
}

.notice a {
  color: var(--gold);
}

/* Header / nav -------------------------------------------- */
.site-header {
  position: relative;
  z-index: 30;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--green);
}

.brand img {
  width: 2.15rem;
  height: 2.15rem;
}

.brand-name {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  background: var(--cream);
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.8rem;
  font: inherit;
  cursor: pointer;
  color: var(--ink);
}

.nav-list {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  text-decoration: none;
  color: var(--ink);
  font-size: 0.95rem;
}

.nav-list a[aria-current="page"] {
  color: var(--green);
  font-weight: 600;
}

/* Hero ---------------------------------------------------- */
.hero {
  position: relative;
  min-height: 26rem;
  display: grid;
  align-items: end;
  color: var(--cream);
  background: var(--slate);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(36, 53, 54, 0.88) 0%,
    rgba(36, 53, 54, 0.45) 52%,
    rgba(36, 53, 54, 0.18) 100%
  );
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding: 3.5rem 0 3rem;
}

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--gold);
  margin: 0 0 0.6rem;
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.15;
  margin: 0 0 0.75rem;
  font-weight: 600;
  max-width: 16ch;
}

.lede {
  max-width: 36ch;
  margin: 0 0 1.4rem;
  font-size: 1.1rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* Buttons ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* inline-flex drops the space between the label text and <small>(annons)</small> */
  column-gap: 0.3em;
  text-decoration: none;
  text-align: center;
  min-height: 48px;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.btn-gold,
.btn-gold:hover,
.btn-gold:active {
  background: var(--rust-btn);
  color: var(--cream);
}

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}

.btn-ghost:hover {
  background: var(--cream);
  color: var(--green);
}

.btn-solid,
.btn-solid:hover,
.btn-solid:active {
  background: var(--rust-btn);
  color: var(--cream);
}

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

.hero .btn:focus-visible {
  outline-color: var(--cream);
}

/* Sections ------------------------------------------------ */
.section {
  padding: 3rem 0;
}

.section h2 {
  font-family: var(--serif);
  font-size: 1.8rem;
  margin: 0 0 1.25rem;
}

/* Two lines at 1.8rem / line-height 1.6. The loaded serif is already two
   lines on mobile; reserving that height stops a fallback from collapsing it. */
.shop-row > h2 {
  min-height: 2lh;
}

/* Promise row --------------------------------------------- */
.promises {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.promise h2 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-family: inherit;
}

.promise p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Cards --------------------------------------------------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}

.card img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  background: var(--cream-2);
}

.card-body {
  padding: 0.9rem 1rem 1.1rem;
}

.tag {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: baseline;
}

/* Buy-link marker on guide cards. Not a shop button. */
.shop-mark {
  color: var(--rust);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.shop-card .price {
  color: var(--ink);
  font-weight: 700;
  margin: 0.45rem 0;
}

/* Same discreet second shop as .cms-product .buy-alt on the guides. */
.shop-card .buy-alt {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.35rem;
  font-size: 0.92rem;
  line-height: 1.35;
  color: #243536;
}

.shop-card .btn,
.cms-shop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  margin-top: 0.7rem;
  padding: 0.5rem 0.5rem;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

/* One buy button on uteklok: card, CMS card, snabbval and table use the same size,
   48 px, 600, radius var(--radius). 0.95rem keeps "Se pris hos Pannlampa-specialisten (annons)" on one line at 375 px. */
.shop-card .btn,
.cms-products .cms-shop-btn,
.snabbval .btn,
.compare .table-cta {
  min-height: 48px;
  padding-inline: 0.5rem;
  column-gap: 0.3em; /* same gap before <small>(annons)</small> as .btn */
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius);
  text-wrap: balance;
}

.shop-card .btn,
.cms-shop-btn,
.cms-shop-btn:hover,
.cms-shop-btn:active {
  background: var(--rust-btn);
  color: var(--cream);
}

.card h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 0.25rem 0 0.4rem;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Product cards in a grid (start page, /utrustning/, CMS cards in the guides):
   the buy button sits at the bottom and lines up across the row, whatever the
   length of title and description. Cards already stretch to equal height.
   Fallback: the card is a flex column and the description grows, which pushes
   price, shop and button to the bottom.
   With subgrid every part of the card has its own row, shared by the cards in
   the same grid row, so price, shop line, button and "eller hos …" line up too.
   A missing part leaves an empty row with no height. The grid's row gap moves to
   a margin under each card (subgrid rows would otherwise inherit the gap), and
   the grid gets the same negative margin, so spacing around the grid is unchanged.
   One column (mobile) = one card per row, so it looks as before.
   The inline CMS variant (.cms-products-inline) is not affected. */
.grid-3 > .shop-card,
.cms-products:not(.cms-products-inline) .cms-products-grid > .cms-product {
  display: flex;
  flex-direction: column;
}

.grid-3 > .shop-card > .card-body,
.cms-products:not(.cms-products-inline) .cms-product > .cms-product-body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.grid-3 > .shop-card > .card-body > p:not(.price, .shop-name),
.cms-products:not(.cms-products-inline) .cms-product-body > .cms-product-note {
  flex-grow: 1;
}

/* Flex and grid items do not collapse margins: keep the gaps the CMS card had in
   normal flow (the bottom margin of the element above wins). */
.cms-products:not(.cms-products-inline) .cms-product-body > p {
  margin-top: 0;
}

@supports (grid-template-rows: subgrid) and selector(:has(> *)) {
  .grid-3:has(> .shop-card) {
    --cards-row-gap: 1.25rem;
  }

  .cms-products:not(.cms-products-inline) .cms-products-grid {
    --cards-row-gap: 1rem;
  }

  .grid-3:has(> .shop-card),
  .cms-products:not(.cms-products-inline) .cms-products-grid {
    row-gap: 0;
    margin-bottom: calc(-1 * var(--cards-row-gap));
  }

  .grid-3 > .shop-card,
  .cms-products:not(.cms-products-inline) .cms-products-grid > .cms-product {
    display: grid;
    grid-row: span 8;
    grid-template-rows: subgrid;
    row-gap: 0;
    margin-bottom: var(--cards-row-gap);
  }

  .grid-3 > .shop-card > img,
  .cms-products:not(.cms-products-inline) .cms-product > .product-img {
    grid-row: 1;
  }

  .grid-3 > .shop-card > .card-body,
  .cms-products:not(.cms-products-inline) .cms-product > .cms-product-body {
    display: grid;
    grid-row: 2 / span 7;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  /* Rows in the card body: tag, title, description, price, shop, button, second shop. */
  .grid-3 > .shop-card > .card-body > .tag { grid-row: 1; }
  .grid-3 > .shop-card > .card-body > h3,
  .cms-products:not(.cms-products-inline) .cms-product-body > h3 { grid-row: 2; }
  .grid-3 > .shop-card > .card-body > p:not(.price, .shop-name),
  .cms-products:not(.cms-products-inline) .cms-product-body > .cms-product-note { grid-row: 3; }
  .grid-3 > .shop-card > .card-body > .price,
  .cms-products:not(.cms-products-inline) .cms-product-body > .price { grid-row: 4; }
  .grid-3 > .shop-card > .card-body > .shop-name,
  .cms-products:not(.cms-products-inline) .cms-product-body > .shop-name { grid-row: 5; }
  .grid-3 > .shop-card > .card-body > .btn,
  .cms-products:not(.cms-products-inline) .cms-product-body > .cms-shop-btn { grid-row: 6; }
  .grid-3 > .shop-card > .card-body > .buy-alt,
  .cms-products:not(.cms-products-inline) .cms-product-body > .buy-alt { grid-row: 7; }
}

/* Partner stills on white (Suunto Core): show the whole square photo, never crop.
   CMS product cards get a square box; shop-card rows keep the row's image box so
   every card in the row stays the same height. */
.cms-product img.product-still {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
}

.card img.product-still {
  object-fit: contain;
  background: #fff;
}

/* Category tiles ------------------------------------------ */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
}

.tile {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 1rem;
  text-decoration: none;
  color: inherit;
}

.tile strong {
  display: block;
  margin-bottom: 0.2rem;
}

.tile span {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Article ------------------------------------------------- */
.article-hero {
  padding: 2.2rem 0 0;
}

.article-hero h1 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1.2;
  margin: 0.3rem 0 0.5rem;
}

/* The 36ch cap on .lede is for the homepage hero. In guides the intro follows the article column like the body text. */
.article-hero .lede {
  max-width: none;
}

.meta {
  color: var(--muted);
  font-size: 0.9rem;
}

.article-figure {
  /* Block margin only: keep margin-inline:auto from .read so the top image centres in the article column. */
  margin-block: 1.4rem;
}

.article-figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 28rem;
  object-fit: cover;
  object-position: center;
  background: var(--cream-2);
}

.answer {
  border-left: 4px solid var(--green);
  background: var(--white);
  padding: 1rem 1.1rem;
  margin: 1.2rem 0 1.6rem;
}

.answer h2 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

.answer p {
  margin: 0.25rem 0;
}

.prose p {
  margin: 0 0 1rem;
}

.prose h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  margin: 1.8rem 0 0.6rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--white);
  margin: 1rem 0 1.4rem;
}

th,
td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  padding: 0.55rem 0.4rem;
  vertical-align: top;
}

.cta-row {
  margin: 1.5rem 0 2rem;
}

.price {
  white-space: nowrap;
}

/* Snabbval: compact buy box under Snabbsvar */
.snabbval {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem 0.85rem;
  margin: 0 0 1rem;
}

.snabbval h2 {
  font-family: var(--serif);
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
}

.snabbval-name {
  margin: 0;
  font-weight: 700;
}

.snabbval .price {
  margin: 0.15rem 0 0.55rem;
  font-weight: 700;
}

.snabbval .btn {
  width: 100%;
}

.price-checked {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Internal next-step and featured guides. Not shop links. */
.next-step,
.featured-guides {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 0.85rem 1rem;
  margin: 0.75rem 0 1.4rem;
}

.next-step h2,
.featured-guides h2 {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
}

.next-step p,
.featured-guides p {
  margin: 0;
}

.next-step ul,
.featured-guides ul {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.next-step a,
.featured-guides a {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-weight: 600;
}

/* Product comparison tables */
.compare .price {
  white-space: nowrap;
}

.compare .table-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  min-width: 44px;
  padding: 0.5rem 0.5rem;
  background: var(--rust-btn);
  color: var(--cream);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius);
}

.compare .table-cta:hover,
.compare .table-cta:active {
  background: var(--rust-btn);
  color: var(--cream);
}

.prose {
  max-width: 100%;
  overflow-x: auto;
}

/* Money pages: on a phone, Snabbsvar and Snabbval come before the hero. */
@media (max-width: 639px) {
  .money-page {
    display: flex;
    flex-direction: column;
    padding-top: 0.65rem;
  }

  .money-page > * {
    min-width: 0;
    max-width: 100%;
  }

  .money-page .article-lead .lede {
    margin-bottom: 0.35rem;
  }

  .money-page .answer {
    margin: 0.45rem 0 0.55rem;
    padding: 0.65rem 0.85rem;
  }

  .money-page .article-lead {
    order: 1;
  }

  .money-page .decision {
    order: 2;
  }

  .money-page .article-figure {
    order: 3;
  }

  .money-page .article-body {
    order: 4;
  }

  table.compare {
    display: block;
    width: 100%;
    margin: 0 0 0.5rem;
    background: transparent;
    border: 0;
  }

  table.compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  table.compare tbody,
  table.compare tr,
  table.compare td {
    display: block;
    width: auto;
  }

  table.compare tr {
    background: var(--white);
    border: 1px solid var(--line);
    margin: 0 0 0.75rem;
    padding: 0.75rem 0.85rem;
  }

  table.compare td {
    border: 0;
    padding: 0.2rem 0;
  }

  table.compare td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }

  table.compare td:first-child {
    font-weight: 700;
  }

  table.compare .table-cta {
    width: 100%;
    margin-top: 0.35rem;
  }
}

.cms-products {
  margin: 2rem 0 1.5rem;
}

.cms-product {
  background: var(--white);
  border: 1px solid var(--line);
}

.cms-product img,
.cms-product .product-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--cream-2);
}

/* Footer -------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 2rem 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1.5rem;
}

.site-footer .footer-grid > div:nth-child(n + 2) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.site-footer .footer-grid br {
  display: none;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 0.15rem;
  text-decoration: none;
}

/* Mobile -------------------------------------------------- */
@media (max-width: 48rem) {
  .nav-toggle {
    display: inline-block;
    margin-left: auto;
  }

  .header-row nav {
    position: static;
    width: 0;
    height: 0;
    overflow: visible;
  }

  .nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    padding: 0.9rem 1.25rem 1.1rem;
    gap: 0.85rem;
    box-shadow: 0 8px 16px rgba(30, 35, 33, 0.08);
  }

  .nav-list.is-open {
    display: flex;
  }

  .nav-list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.45rem 0;
  }

  .promises,
  .grid-3,
  .tiles,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 20rem;
  }

  .hero h1 {
    max-width: none;
  }
}