/* ==========================================================================
   Belsara Cotton
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* colour
     ------------------------------------------------------------------
     One family, not three. The previous ramp put warm greige surfaces
     (#edeae2) next to a neutral grey-black (#1d2125) next to a cool blue
     (#1f4e9e), and scattered warm greys (#8a8780, #6f6c66) through the form.
     Warm neutrals beside a cool accent is the combination that reads muddy,
     and no single value was at fault — the mismatch was.

     Everything below shares one cool, blue-cast ramp, so the surfaces, the
     type and the accent belong to each other. The dark sections are navy
     rather than flat grey, which is what makes them read as rich instead of
     switched-off. The blue is still the blue of the logo cross and the pack
     artwork, just stated with more conviction.                              */
  --cotton: #f7f9fc;       /* bleached cotton: page */
  --paper: #ffffff;
  --veil: rgb(247 249 252 / 0.9);   /* the sticky header, over the page */
  --haze: #eaeff6;         /* tinted bands, pack stages, soft surfaces */
  --haze-deep: #d8e2ee;
  --line: #ccd8e6;

  --ink: #10233b;          /* deep navy: text, dark sections */
  --ink-soft: #4e6178;
  --ink-faint: #7f92a7;    /* input borders and other non-text boundaries */
  --ink-muted: #637890;    /* placeholder text - 4.5:1 on white, unlike the
                              line above, which is a 3:1 boundary colour */

  --indigo: #1a5fb4;       /* Belsara blue, from the logo cross */
  --indigo-deep: #12468a;
  --indigo-veil: rgb(26 95 180 / 0.25);

  --crimson: #c22b47;      /* from the wordmark: errors only */
  --crimson-veil: #f8e8ec;
  --leaf: #16745c;

  --on-dark: #eaf1f8;
  --on-dark-soft: #9db2c9;
  --line-dark: #25405d;

  /* shadows, all cast from the ink rather than from an unrelated brown */
  --shadow-soft: rgb(16 35 59 / 0.10);
  --shadow-panel: rgb(16 35 59 / 0.12);
  --shadow-pack: rgb(16 35 59 / 0.26);
  --shadow-floor: rgb(16 35 59 / 0.30);

  /* type */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wide: 118%;
  --semi-wide: 108%;

  --step--1: 0.875rem;                               /* 14 */
  --step-0: 1.0625rem;                               /* 17 */
  --step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);  /* 18 → 21 */
  --step-2: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);      /* 21 → 24 */
  --step-3: clamp(1.625rem, 1.35rem + 1.2vw, 2.375rem);    /* 26 → 38 */
  --step-4: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);      /* 34 → 52 */
  --step-5: clamp(2.625rem, 1.55rem + 4.6vw, 5.25rem);     /* 42 → 84 */

  /* space */
  --gutter: 1rem;
  --section: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  --header-h: 4rem;

  --radius-sm: 4px;
  --radius: 8px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 600px) { :root { --gutter: 1.5rem; } }
@media (min-width: 1024px) { :root { --gutter: 2.5rem; --header-h: 4.5rem; } }

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--cotton);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

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

/* GTM's no-JavaScript fallback must remain outside the visible layout. */
.gtm-noscript {
  display: none;
  width: 0;
  height: 0;
  visibility: hidden;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.5rem; left: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.container {
  width: min(100% - 2 * var(--gutter), 76rem);
  margin-inline: auto;
}
@media (min-width: 1280px) {
  .site-nav__list { gap: 2rem; }
}

@media (min-width: 1500px) { .container { width: min(100% - 2 * var(--gutter), 82rem); } }

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

.section-title {
  font-size: var(--step-4);
  font-weight: 640;
  font-stretch: var(--wide);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.section-title--split { text-wrap: initial; }
.section-title__primary,
.section-title__secondary { display: block; }
.section-title__secondary {
  max-width: 34rem;
  margin-top: 0.625rem;
  color: var(--ink-soft);
  font-size: var(--step-2);
  font-weight: 560;
  font-stretch: var(--semi-wide);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  font-stretch: var(--semi-wide);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn--lg { min-height: 3.25rem; padding-inline: 1.625rem; }
.btn--block { width: 100%; }

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

.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--cotton); }

.btn[aria-disabled="true"] { cursor: progress; opacity: 0.75; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--veil);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.site-header.is-scrolled,
.site-header.is-open { border-bottom-color: var(--line); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-right: auto;
  text-decoration: none;
}
.brand__mark { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.brand__name {
  font-size: 1.125rem;
  font-weight: 680;
  font-stretch: var(--wide);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.site-nav { display: none; }
.site-nav__list { display: flex; gap: 2.25rem; }
.site-nav__link {
  position: relative;
  padding-block: 0.5rem;
  color: var(--ink-soft);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.125rem;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.site-nav__link:hover,
.site-nav__link.is-current,
.site-nav__link[aria-current="page"] { color: var(--ink); }
.site-nav__link.is-current::after,
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.site-header__cta { display: none; }

.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.625rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.menu-toggle__icon { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.menu-toggle__line { transform-origin: 12px 12px; transition: transform 0.3s var(--ease); }
.menu-toggle[aria-expanded="true"] .menu-toggle__line--top { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__line--bottom { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: calc(100vh - var(--header-h));
  padding-block: 0.5rem 2rem;
  overflow-y: auto;
  background: var(--cotton);
  animation: menu-in 0.28s var(--ease);
}
@supports (height: 100dvh) {
  .mobile-menu { height: calc(100dvh - var(--header-h)); }
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__list { margin-bottom: 2rem; }
.mobile-menu__link {
  display: block;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.75rem;
  font-weight: 620;
  font-stretch: var(--wide);
  letter-spacing: -0.015em;
  text-decoration: none;
}
.mobile-menu__call {
  margin-top: 1.25rem;
  color: var(--ink-soft);
  text-align: center;
}
.mobile-menu__call a { color: var(--ink); font-weight: 600; }

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
}

/* Six links plus the brand and the Contact button need real room. Below this
   the hamburger takes over, and it carries every link the header does plus
   FAQ and Contact — so nothing is unreachable at any width. */
@media (min-width: 1060px) {
  .site-nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .site-nav__list { gap: 1.5rem; }
  .menu-toggle, .mobile-menu { display: none !important; }
  .brand__mark { width: 2.5rem; height: 2.5rem; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2.5rem, 1rem + 5vw, 4.5rem) clamp(4rem, 2rem + 6vw, 6rem); }

.hero__inner {
  display: grid;
  gap: 3rem;
}

.hero__title {
  font-size: clamp(2.375rem, 1.55rem + 4vw, 4.5rem);
  font-weight: 660;
  font-stretch: 112%;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.hero__line { display: block; white-space: nowrap; }

.hero__sub {
  display: block;
  margin-top: 1rem;
  max-width: 30rem;
  color: var(--ink-soft);
  font-size: var(--step-1);
  font-weight: 500;
  font-stretch: normal;
  line-height: 1.4;
  letter-spacing: 0;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero__call {
  margin-top: 1.5rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.hero__call a {
  color: var(--ink);
  font-weight: 600;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.hero__call a:hover { color: var(--indigo); }

.hero__visual {
  position: relative;
  margin-inline: calc(-1 * var(--gutter));
}

.hero__photo {
  --photo-radius: 0px;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--photo-radius);
  background: var(--haze-deep);
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.hero__pack {
  position: absolute;
  left: calc(var(--gutter) + 4%);
  bottom: -2.5rem;
  width: 30%;
  max-width: 13rem;
  filter: drop-shadow(0 1.5rem 1.5rem var(--shadow-pack));
}

@media (min-width: 600px) {
  .hero__actions { margin-top: 2.25rem; }
  .hero__visual { margin-inline: 0; }
  .hero__photo { --photo-radius: var(--radius); aspect-ratio: 16 / 11; }
  .hero__pack { left: 5%; width: 24%; }
}

@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
    min-height: min(calc(100svh - var(--header-h) - 8rem), 46rem);
  }
  .hero__photo { aspect-ratio: 4 / 5; }
  .hero__pack {
    left: -12%;
    bottom: 7%;
    width: 38%;
    max-width: none;
  }
}

/* One orchestrated load sequence, only when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .hero__title,
  .hero__actions,
  .hero__call { animation: rise 0.9s var(--ease) both; }
  .hero__actions { animation-delay: 0.08s; }
  .hero__call { animation-delay: 0.16s; }

  .hero__photo { animation: unveil 1.2s var(--ease) 0.1s backwards; }
  .hero__photo img { animation: settle 1.6s var(--ease) 0.1s both; }
  .hero__pack { animation: rise-pack 1.1s var(--ease) 0.55s both; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1.25rem); }
}
@keyframes unveil {
  from { clip-path: inset(100% 0 0 0 round var(--photo-radius)); }
  to { clip-path: inset(0 0 0 0 round var(--photo-radius)); }
}
@keyframes settle {
  from { transform: scale(1.08); }
}
@keyframes rise-pack {
  from { opacity: 0; transform: translateY(2.5rem) rotate(-2deg); }
}

/* ---------- About ---------- */
.about { background: var(--haze); }

.about__inner { display: grid; }

/* Small screens: heading and legal identity, then the photo and facts. */
.about__content { display: contents; }
.about .section-title { order: 1; }
.about__entity { order: 2; }
.about__media { order: 3; }
.facts { order: 5; }

.about__media {
  margin: 2rem calc(-1 * var(--gutter)) 0;
  overflow: hidden;
  background: var(--haze-deep);
}
.about__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.about__entity {
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.6;
}

.facts {
  display: grid;
  margin-top: 2.5rem;
  border-top: 1px solid var(--haze-deep);
}
.facts__item {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--haze-deep);
}
.facts dt { color: var(--ink-soft); font-size: var(--step--1); padding-top: 0.125rem; }
.facts dd { font-weight: 600; }

@media (min-width: 600px) {
  .about__media { margin-inline: 0; border-radius: var(--radius); }
}

@media (min-width: 960px) {
  .about__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
  }
  .about__content { display: block; }
  .about__media { order: 0; margin: 0; }
  .about__media img { aspect-ratio: 4 / 5; object-position: 28% 50%; }
  .facts { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--haze-deep); }
  .facts__item {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 1rem 1.25rem 0.25rem 0;
    border-bottom: 0;
  }
  .facts__item + .facts__item { padding-left: 1.25rem; border-left: 1px solid var(--haze-deep); }
}

/* ---------- Products ---------- */
.products__header {
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

/* Two product lines, each with its own heading and grid. Pack photos are
   portrait for rolls and landscape for Zig Zag, so they are kept apart:
   within a group every pack still stands at the same height. */
.product-lines {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.product-line__title {
  font-size: var(--step-2);
  font-weight: 640;
  font-stretch: var(--semi-wide);
  letter-spacing: -0.015em;
}
.product-line__title + .product-grid { margin-top: 1.5rem; }
.product-line__blurb {
  max-width: 34rem;
  margin-top: 0.375rem;
  margin-bottom: 1.5rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.55;
}

.product-grid {
  display: grid;
  gap: 1rem;
}

.product-grid__fallback { color: var(--ink-soft); }
.product-grid__fallback[hidden] { display: none; }

.product {
  display: grid;
  grid-template-columns: minmax(7.5rem, 38%) 1fr;
  gap: 1.25rem;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.product:last-child { border-bottom: 0; padding-bottom: 0; }

.product__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--haze);
  border-radius: var(--radius);
  overflow: hidden;
}
/* soft floor shadow under the pack */
.product__stage::after {
  content: "";
  position: absolute;
  left: 20%; right: 20%; bottom: 8%;
  height: 6%;
  background: radial-gradient(closest-side, var(--shadow-floor), transparent);
}
/* every pack stands at the same height, so sizes compare honestly */
.product__stage img {
  position: absolute;
  z-index: 1;
  left: 8%;
  top: 10%;
  width: 84%;
  height: 79%;
  object-fit: contain;
}
/* A wide pillow pack in the same 4/5 frame: fill the width and centre it,
   and bring the floor shadow up to meet it. */
.product__stage--landscape img {
  left: 4%;
  top: 28%;
  width: 92%;
  height: 44%;
}
.product__stage--landscape::after {
  left: 12%; right: 12%; bottom: 28%;
}

.product__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  font-size: var(--step--1);
  text-align: center;
}

.product__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.625rem;
}
.product__brand {
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.product__status {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  padding: 0.2rem 0.6rem;
  color: var(--indigo-deep);
  font-size: var(--step--1);
  font-weight: 650;
  line-height: 1;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.product__title { display: grid; gap: 0.375rem; }
.product__size {
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  font-weight: 660;
  font-stretch: var(--wide);
  line-height: 1;
  letter-spacing: -0.03em;
}
.product__name {
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.35;
}
.product__cta { margin-top: 1.25rem; }

@media (min-width: 720px) {
  /* auto-fit rather than a fixed 3, so a line of four packs does not
     wrap to 3 + 1 and a line of three still fills the row. */
  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
  }
  .product,
  .product:last-child {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 1.5rem;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .product__body { display: flex; flex-direction: column; height: 100%; }
  /* margin-top:auto only equalises cards of DIFFERENT heights - it pushes the
     button down using space left over. Every pack card carries the same one
     line of text, so there is no space left over and the button ends up hard
     against the name. The title's own bottom margin is what guarantees the
     gap; the auto margin still lines the buttons up if a card ever runs long. */
  .product__title { margin-bottom: 1.25rem; }
  .product__cta { align-self: flex-start; margin-top: auto; }
  .product-line--single .product-grid { width: min(100%, 18rem); }
}

/* ---------- Frequently asked questions ---------- */
.faq-section { background: var(--haze); }

.faq-section__header {
  margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3rem);
}

.faq-list { border-top: 1px solid var(--haze-deep); }
.faq { border-bottom: 1px solid var(--haze-deep); }
.faq__q {
  position: relative;
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  padding: 0.875rem 3rem 0.875rem 0;
  font-size: var(--step-1);
  font-weight: 620;
  font-stretch: var(--semi-wide);
  line-height: 1.3;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  position: absolute;
  right: 0;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  color: var(--indigo);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}
.faq[open] .faq__q::after { content: "−"; }
.faq__q:hover { color: var(--indigo-deep); }
.faq__a {
  max-width: 68rem;
  margin: 0;
  padding: 0 3rem 1.25rem 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.6;
}

@media (min-width: 960px) {
  .faq__a {
    padding-right: 6rem;
    font-size: var(--step-0);
  }
}

/* ---------- Where to buy ---------- */
.where-to-buy { background: var(--haze); }

.where-to-buy__inner { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); }

.where-to-buy__intro {
  max-width: 34rem;
  margin-top: 1.25rem;
  color: var(--ink-soft);
  font-size: var(--step-1);
  line-height: 1.6;
}
.where-to-buy__intro a {
  color: var(--indigo);
  font-weight: 600;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.where-to-buy__intro a:hover { color: var(--indigo-deep); }

.distributor {
  align-self: start;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--haze-deep);
  border-radius: var(--radius);
}
.distributor__role {
  color: var(--indigo);
  font-size: var(--step--1);
  font-weight: 620;
  font-stretch: var(--semi-wide);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.distributor__name {
  margin-top: 0.5rem;
  font-size: var(--step-2);
  font-weight: 660;
  font-stretch: var(--semi-wide);
  letter-spacing: -0.015em;
}
.distributor__address {
  margin-top: 0.875rem;
  color: var(--ink-soft);
  font-size: var(--step-0);
  font-style: normal;
  line-height: 1.6;
}
.distributor__phones {
  display: grid;
  justify-items: start;
  gap: 0.375rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--haze-deep);
}
.distributor__phone {
  color: var(--ink);
  font-size: var(--step-1);
  font-weight: 620;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.distributor__phone:hover { color: var(--indigo); }

@media (min-width: 960px) {
  .where-to-buy__inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }
}

/* ---------- Certifications ---------- */
.certifications__header {
  margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3rem);
}

/* One panel with hairline rules between rows, not three loose cards. */
.cert-panel {
  display: grid;
  gap: 1px;
  background: var(--haze-deep);
  border: 1px solid var(--haze-deep);
  border-radius: var(--radius);
  overflow: hidden;
}
.cert {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--paper);
}
.cert__mark {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--haze);
}
.cert__mark svg { width: 1.5rem; height: 1.5rem; stroke: var(--indigo); }

.cert__title {
  font-size: var(--step-1);
  font-weight: 620;
  font-stretch: var(--semi-wide);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.cert__subtitle {
  margin-top: 0.125rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.cert__scope {
  margin-top: 0.75rem;
  font-size: var(--step--1);
  line-height: 1.5;
}
.cert__scope-label { color: var(--ink-soft); font-weight: 600; }
.cert__issuer {
  margin-top: 0.375rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.5;
}
.cert__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  margin-top: 0.875rem;
  font-size: var(--step--1);
}
.cert__meta dt { color: var(--ink-soft); }
.cert__meta dd { font-weight: 600; font-variant-numeric: tabular-nums; }

.cert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  margin-top: 1rem;
}
.cert__link {
  color: var(--indigo);
  font-size: var(--step--1);
  font-weight: 600;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.cert__link:hover { color: var(--indigo-deep); }

.certifications__entity {
  margin-top: 2rem;
  border-top: 1px solid var(--haze-deep);
}

@media (min-width: 600px) {
  .cert { grid-template-columns: 2.75rem 1fr; }
}

@media (min-width: 960px) {
  .certifications__entity { grid-template-columns: repeat(4, 1fr); }
  .certifications__entity .facts__item {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding-inline: 1.5rem;
    border-bottom: 0;
    border-left: 1px solid var(--haze-deep);
  }
  .certifications__entity .facts__item:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- Customers ---------- */
.customers { background: var(--haze); }

/* One block: text + action beside a single panel listing who we supply */
.customers__inner {
  display: grid;
  grid-template-areas: "head" "proof" "cta";
  gap: 2rem;
}
.customers__header { grid-area: head; }
.customers__proof { grid-area: proof; }
.customer-grid {
  display: grid;
  gap: 1px; /* hairlines between cells */
  background: var(--haze-deep);
  border: 1px solid var(--haze-deep);
  border-radius: var(--radius);
  overflow: hidden;
}
.customer {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.25rem;
  background: var(--paper);
}
.customer__mark {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--haze);
}
.customer__mark svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--indigo);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.customer__title {
  font-size: var(--step-1);
  font-weight: 620;
  font-stretch: var(--semi-wide);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.customer__title abbr { text-decoration: none; }
.customer__desc {
  margin-top: 0.25rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.5;
}

.customers__cta {
  grid-area: cta;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 0.875rem;
}
.customers__cta p { font-weight: 600; }

.customers__note {
  max-width: 34rem;
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.5;
}

@media (min-width: 600px) {
  .customer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 1.25rem;
    padding: clamp(1.5rem, 2.5vw, 2rem);
  }
}

@media (min-width: 1200px) {
  .customers__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    /* Both rows size to their content and the leftover height is shared out
       around them, so the heading and its button sit against the middle of
       the panel. A 1fr second row instead pinned the button to the top and
       left the rest of the column empty. */
    grid-template-rows: auto auto;
    align-content: center;
    grid-template-areas:
      "head proof"
      "cta  proof";
    column-gap: clamp(3rem, 6vw, 6rem);
    row-gap: 2.5rem;
  }
  .customers__proof { align-self: center; }
}

/* ---------- Delivery ---------- */
.delivery__header {
  display: grid;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
}
.delivery__stats { display: flex; gap: clamp(2rem, 5vw, 3.5rem); }
.delivery__stat { display: flex; flex-direction: column-reverse; gap: 0.375rem; }
.delivery__stat dd {
  color: var(--indigo);
  font-size: clamp(3rem, 2.2rem + 3.4vw, 5rem);
  font-weight: 660;
  font-stretch: var(--wide);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.delivery__stat dt { color: var(--ink-soft); font-size: var(--step--1); font-weight: 500; }

/* The journey: one indigo band, steps joined by a dashed route */
.route {
  --node: 3rem;
  --route-gap: 2rem;
  display: grid;
  gap: var(--route-gap);
  margin: 0;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  background: var(--indigo);
  border-radius: var(--radius);
  color: #fff;
  counter-reset: step;
}
.route__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) 1fr;
  column-gap: 1rem;
  align-content: start;
  counter-increment: step;
}
.route__node {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  background: #fff;
  border-radius: 50%;
}
.route__node svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--indigo);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* vertical route on small screens */
.route__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--node) / 2 - 0.75px);
  top: calc(var(--node) + 0.5rem);
  bottom: calc(-1 * var(--route-gap) + 0.5rem);
  border-left: 1.5px dashed rgb(255 255 255 / 0.5);
}
.route__step::before {
  content: counter(step, decimal-leading-zero);
  grid-column: 2;
  color: rgb(255 255 255 / 0.7);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.route__title {
  grid-column: 2;
  font-size: var(--step-1);
  font-weight: 620;
  font-stretch: var(--semi-wide);
  line-height: 1.25;
}
.delivery__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
  color: var(--ink-soft);
}
.delivery__cta p a { color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.delivery__cta p a:hover { text-decoration: underline; }

@media (min-width: 860px) {
  .route { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .route__step { grid-template-columns: 1fr; }
  .route__node { grid-row: auto; order: -1; margin-bottom: 1rem; }
  .route__step::before, .route__title { grid-column: 1; }
  /* horizontal route: from this node to the next one */
  .route__step:not(:last-child)::after {
    left: calc(var(--node) + 0.75rem);
    right: calc(-1 * var(--route-gap) + 0.75rem);
    top: calc(var(--node) / 2 - 0.75px);
    bottom: auto;
    border-left: 0;
    border-top: 1.5px dashed rgb(255 255 255 / 0.5);
  }
}

@media (min-width: 960px) {
  .delivery__header { grid-template-columns: 1fr auto; align-items: start; gap: 3rem; }
}

/* ---------- Contact ---------- */
.contact {
  background: var(--ink);
  color: var(--on-dark);
}
.contact :focus-visible { outline-color: var(--on-dark); }
.contact .form-panel :focus-visible { outline-color: var(--indigo); }

.contact__header { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

.contact__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-areas:
    "details"
    "form"
    "map";
}

.contact-details { grid-area: details; display: grid; }
.contact-details__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.875rem;
  padding-block: 1rem;
  border-top: 1px solid var(--line-dark);
}
.contact-details__item:last-child { border-bottom: 1px solid var(--line-dark); }
.contact-details__icon {
  grid-row: span 2;
  margin-top: 0.125rem;
  fill: none;
  stroke: var(--on-dark-soft);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.contact-details__label { color: var(--on-dark-soft); font-size: var(--step--1); }
.contact-details__value {
  font-size: var(--step-1);
  font-weight: 600;
  font-style: normal;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
a.contact-details__value {
  padding-block: 0.625rem;
  margin-block: -0.5rem -0.625rem;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  justify-self: start;
  transition: background-size 0.3s var(--ease);
}
a.contact-details__value:hover { background-size: 100% 1px; }
.contact-details__address { font-weight: 500; }

.form-panel {
  grid-area: form;
  display: flex;
  flex-direction: column;
  margin-inline: calc(-1 * var(--gutter));
  padding: 2rem var(--gutter);
  background: var(--cotton);
  color: var(--ink);
}

.map { grid-area: map; }
.map__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--line-dark);
}
.map__frame iframe { width: 100%; height: 100%; border: 0; }
.map__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  margin-top: 0.5rem;
  color: var(--on-dark);
  font-weight: 600;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.map__link svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 600px) and (max-width: 959px) {
  .map__frame { aspect-ratio: 16 / 9; }
}

@media (min-width: 600px) {
  .form-panel { margin-inline: 0; padding: clamp(1.75rem, 1rem + 2.5vw, 2.75rem); border-radius: var(--radius); }
}

@media (min-width: 960px) {
  .contact__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "details form"
      "map     form";
    column-gap: clamp(3rem, 5vw, 5rem);
    row-gap: 2rem;
  }
  .map { align-self: end; }
}

/* ---------- Form ---------- */
.form-grid {
  display: grid;
  gap: 1.25rem 1.25rem;
}
@media (min-width: 600px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

.field { display: grid; gap: 0.375rem; align-content: start; }
.field__label { font-size: var(--step--1); font-weight: 600; }
.field__optional { color: var(--ink-soft); font-weight: 400; }

.field__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius-sm);
  font-size: 1rem; /* 16px keeps iOS from zooming */
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field__input:hover { border-color: var(--ink-soft); }
.field__input:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 2px var(--indigo);
}
.field__input::placeholder { color: var(--ink-muted); opacity: 1; }

.field__select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2310233b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}
.field__select:invalid,
.field__select.is-empty { color: var(--ink-muted); }
.field__select option { color: var(--ink); }
.field__select.is-flash { animation: flash 1.4s var(--ease); }
@keyframes flash {
  0%, 40% { border-color: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-veil); }
}

.field__textarea { min-height: 8rem; resize: vertical; }

.field__hint { color: var(--ink-soft); font-size: 0.8125rem; }

.field__error {
  display: none;
  color: var(--crimson);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.4;
}
.field.is-invalid .field__error { display: block; }
.field.is-invalid .field__input { border-color: var(--crimson); }
.field.is-invalid .field__input:focus { border-color: var(--crimson); box-shadow: 0 0 0 2px var(--crimson); }
.field.is-invalid .field__hint { display: none; }

.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: 1.5rem;
  padding: 0.875rem 1rem;
  border-left: 3px solid var(--ink-soft);
  background: var(--haze);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--step--1);
  line-height: 1.5;
}
.form-status:empty { margin: 0; padding: 0; border: 0; }
.form-status:focus { outline: none; }
.form-status[data-type="error"] { border-left-color: var(--crimson); background: var(--crimson-veil); }
.form-status[data-type="info"] { border-left-color: var(--indigo); background: var(--haze); }
.form-status a { color: inherit; font-weight: 600; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.75rem;
}
.form-actions .btn { min-width: 11rem; }
.form-actions__note {
  flex: 1 1 14rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.45;
}
@media (max-width: 599.98px) {
  .form-actions .btn { width: 100%; }
}

.form-success { margin-block: auto; padding-block: 1rem; }
.form-success[hidden] { display: none; }
.form-success__icon {
  fill: none;
  stroke: var(--leaf);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.form-success__title {
  margin-top: 1rem;
  font-size: var(--step-2);
  font-weight: 640;
  font-stretch: var(--semi-wide);
}
.form-success__title:focus { outline: none; }
.form-success__text {
  max-width: 32rem;
  margin: 0.5rem 0 1.5rem;
  color: var(--ink-soft);
}

.spinner {
  width: 1rem; height: 1rem;
  border: 2px solid rgb(255 255 255 / 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Footer ---------- */
.site-footer {
  padding-block: 3rem 2rem;
  background: var(--ink);
  color: var(--on-dark);
  font-size: var(--step--1);
}
.site-footer .container { border-top: 1px solid var(--line-dark); padding-top: 2.5rem; }
.site-footer :focus-visible { outline-color: var(--on-dark); }

.site-footer__top {
  display: grid;
  align-items: start;
  gap: 2.5rem;
}
.site-footer__blurb {
  max-width: 22rem;
  margin-top: 1rem;
  color: var(--on-dark-soft);
  line-height: 1.55;
}
@media (min-width: 900px) {
  .site-footer__top { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: clamp(2.5rem, 6vw, 5rem); }
}
.brand--footer { margin-right: 0; }
.brand--footer .brand__mark { width: 2.25rem; height: 2.25rem; }

.footer-nav {
  display: grid;
  gap: 1.75rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.footer-nav__title {
  margin-bottom: 0.25rem;
  color: var(--on-dark-soft);
  font-size: 0.8125rem;
  font-weight: 620;
  font-stretch: var(--semi-wide);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-nav__list { display: grid; }
.footer-nav a[aria-current="page"] { color: #fff; font-weight: 600; }
.footer-nav a,
.footer-contact a {
  display: inline-block;
  padding-block: 0.625rem;
  color: var(--on-dark);
  text-decoration: none;
}
.footer-nav a:hover,
.footer-contact a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  margin-top: 1.5rem;
  color: var(--on-dark-soft);
}
.footer-contact li { display: flex; align-items: center; min-height: 2.5rem; }

.footer-meta {
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
}
.footer-meta__item {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 1rem;
  font-size: var(--step--1);
}
.footer-meta dt { color: var(--on-dark-soft); }
.footer-meta dd { color: var(--on-dark); }
.footer-meta a { color: var(--on-dark); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.footer-meta a:hover { color: #fff; }

@media (min-width: 720px) {
  .footer-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .footer-meta__item { grid-template-columns: 1fr; gap: 0.25rem; }
}

.site-footer__legal {
  margin-top: 2rem;
  color: var(--on-dark-soft);
  font-size: 0.8125rem;
}

/* ==========================================================================
   Multi-page furniture
   --------------------------------------------------------------------------
   Everything below arrived with the split from one long page into twelve.
   It adds no new colours, type sizes or spacing values: the tokens at the top
   of this file are the whole vocabulary, and these rules only arrange them.
   ========================================================================== */

/* ---------- Section heading block ---------- */
/* One rule in place of the per-section __header rules each section used to
   carry. Those still exist below and still work; this is what new sections
   use. */
.section__head { margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3rem); }

/* An inner page opens with a 52px H1 in the band above, so its section
   headings step down rather than compete with it. The home page keeps the
   full size, where those headings are the page's own structure. */
.page .section-title { font-size: var(--step-3); }
.page .section { padding-block: clamp(3.25rem, 2rem + 4vw, 5.5rem); }

/* Sections that share the page background have nothing between them but air.
   Collapsing the join stops two full-height paddings stacking into a void. */
.section--plain + .section--plain { padding-top: 0; }
.section__intro,
.delivery__line {
  max-width: 44rem;
  margin-top: 1.25rem;
  color: var(--ink-soft);
  font-size: var(--step-1);
  line-height: 1.6;
}

/* A link out of a section to the page that carries the whole subject. */
.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  color: var(--indigo);
  font-weight: 600;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
.link-arrow::after {
  content: "\2192";
  transition: transform 0.25s var(--ease);
}
.link-arrow:hover { color: var(--indigo-deep); }
.link-arrow:hover::after { transform: translateX(0.25em); }
@media (prefers-reduced-motion: reduce) {
  .link-arrow::after { transition: none; }
  .link-arrow:hover::after { transform: none; }
}

.section__more { margin-top: 2.25rem; }
.contact .link-arrow,
.contact .section__intro { color: var(--on-dark-soft); }
.contact .link-arrow { color: var(--on-dark); }

/* ---------- Header dropdown ---------- */
.site-nav__item { position: relative; display: flex; align-items: center; }
.site-nav__caret {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.125rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.site-nav__caret svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s var(--ease);
}
.site-nav__item--menu:hover .site-nav__caret svg,
.site-nav__caret[aria-expanded="true"] svg { transform: rotate(180deg); }

.site-nav__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -1rem;
  z-index: 20;
  min-width: 17rem;
  padding: 0.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow-panel);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.site-nav__item--menu:hover .site-nav__menu,
.site-nav__item--menu:focus-within .site-nav__menu,
.site-nav__menu[data-open] {
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .site-nav__menu { transition: none; }
  .site-nav__caret svg { transition: none; }
}
.site-nav__menu-link {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: var(--step--1);
  text-decoration: none;
}
.site-nav__menu-link:hover { background: var(--haze); color: var(--ink); }
.site-nav__menu-link[aria-current="page"] { color: var(--ink); font-weight: 620; }

.mobile-menu__link[aria-current="page"] { color: var(--ink); font-weight: 640; }

/* ---------- Page head band ---------- */
/* Every page except the home page opens with this: where you are, what the
   page is, and one sentence saying what is on it. */
.page-head {
  padding-block: clamp(2rem, 1rem + 4vw, 3.5rem) clamp(2.5rem, 1.5rem + 4vw, 4rem);
  background: var(--haze);
  border-bottom: 1px solid var(--haze-deep);
}
.page-head__title {
  max-width: 24ch;
  font-size: var(--step-4);
  font-weight: 640;
  font-stretch: var(--wide);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.page-head__lead {
  max-width: 42rem;
  margin-top: 1.125rem;
  color: var(--ink-soft);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}

.breadcrumb { margin-bottom: 1.5rem; }
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.breadcrumb__item { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  color: var(--haze-deep);
}
.breadcrumb a {
  color: var(--ink-soft);
  text-decoration: none;
  text-underline-offset: 0.2em;
}
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); }

/* ---------- Page copy ---------- */
/* Deliberately not .prose: that class belongs to privacy.html, which is a
   full-height centred document. */
/* The measure sits on an inner box, never on .container itself: .container
   centres what it is given, so capping its width there would centre the
   column in the viewport instead of aligning it with the rest of the page. */
.copy__inner { max-width: 72rem; }
.copy__block + .copy__block { margin-top: clamp(2.25rem, 1.5rem + 2vw, 3rem); }
.copy__title {
  margin-bottom: 1rem;
  font-size: var(--step-2);
  font-weight: 640;
  font-stretch: var(--semi-wide);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Wide screens: the heading moves into its own column beside the text it
   introduces. A 44rem measure left-aligned in a 76rem container reads as a
   ribbon stranded against an empty right-hand third; this uses that width
   for something, and lets a reader scan the headings down one edge. */
@media (min-width: 1000px) {
  .copy__block {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4rem);
  }
  /* Every child sits in the text column; only the heading takes column one,
     so a block that has no heading simply leaves that column empty and its
     text stays in line with every other block. */
  .copy__block > * { grid-column: 2; }
  .copy__title {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    font-size: var(--step-1);
    line-height: 1.25;
  }
  .copy__block + .copy__block { margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 3.5rem); }

  /* A list or spec table that opens a block sits in the next column, not
     under the heading, so the leading space it carries in the stacked layout
     would drop it half a line below its own heading. */
  .copy__title + .spec,
  .copy__title + .copy__list,
  .copy__title + .copy__steps { margin-top: 0; }
}
.copy p {
  max-width: 44rem;
  color: var(--ink-soft);
  line-height: 1.7;
  text-wrap: pretty;
}
.copy p + p { margin-top: 1rem; }
.copy a {
  color: var(--indigo);
  font-weight: 560;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.copy a:hover { color: var(--indigo-deep); }

.copy__list,
.copy__steps {
  display: grid;
  gap: 0.75rem;
  max-width: 44rem;
  margin-top: 1.25rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
/* The marker is positioned, not a grid column. A grid <li> turns every child
   into a grid item — including each text node around an inline link — so a
   sentence with a link in it would come apart into stacked fragments. */
.copy__list li,
.copy__steps li { position: relative; }
.copy__list li { padding-left: 1.5rem; }
.copy__list li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--indigo);
}
/* The base reset clears list-style on ul but not on ol, so an ol keeps the
   browser's own "1." beside the numbered marker below unless it is cleared. */
.copy__steps { counter-reset: step; list-style: none; padding-left: 0; }
.copy__steps li { counter-increment: step; padding-left: 2.25rem; min-height: 1.5rem; }
.copy__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.06em;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--indigo);
  color: var(--on-dark);
  font-size: 0.8125rem;
  font-weight: 640;
}
.copy__list + p,
.copy__steps + p,
.spec + p { margin-top: 1.25rem; }

/* A specification: one fact per row, readable straight down the left edge. */
.spec {
  margin-top: 1.5rem;
  border-top: 1px solid var(--haze-deep);
}
.spec__row {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--haze-deep);
}
.spec dt { color: var(--ink); font-weight: 620; }
.spec dd { color: var(--ink-soft); line-height: 1.6; }
.spec a { color: var(--indigo); font-weight: 560; text-underline-offset: 0.2em; }
@media (min-width: 720px) {
  .spec__row { grid-template-columns: 14rem minmax(0, 1fr); }
}

/* ---------- Call to action ---------- */
/* One panel, text and buttons together. Not a scattering of cards. */
.cta-section { background: var(--haze); }
.cta {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  padding: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  background: var(--paper);
  border: 1px solid var(--haze-deep);
  border-radius: var(--radius);
}
.cta__title {
  font-size: var(--step-2);
  font-weight: 640;
  font-stretch: var(--semi-wide);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.cta__text {
  max-width: 40rem;
  margin-top: 0.625rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (min-width: 860px) {
  .cta { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 4vw, 3.5rem); }
  .cta__actions { justify-content: flex-end; }
}

/* ---------- Products: the link to a line's own page ---------- */
.product-line__title a {
  color: inherit;
  text-decoration: none;
}
.product-line__title a:hover {
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.product-line__more { margin-top: 1.5rem; }

/* ---------- About, on its own page ---------- */
/* The home page runs heading, identity line, photo and facts in one ordered
   flow; the About page has the heading in the band above, so the photo leads. */
.about__more { order: 6; margin-top: 1.75rem; }
.about__inner--page .about__entity { order: 2; font-size: var(--step-1); }
@media (min-width: 960px) {
  .about__inner--page {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    row-gap: clamp(2rem, 4vw, 3rem);
  }
  /* display:contents lets the photo, the identity line and the facts strip
     each take their own cell of the outer grid, so the facts can run the
     full width instead of being crushed into the right-hand column. */
  .about__inner--page .about__content { display: contents; }
  .about__inner--page .about__media { grid-column: 1; grid-row: 1; margin: 0; }
  /* One short paragraph beside a tall photo leaves a void if it sits at the
     top, so it sits against the middle of the image instead. */
  .about__inner--page .about__entity { grid-column: 2; grid-row: 1; margin-top: 0; align-self: center; font-size: var(--step-1); }
  .about__inner--page .facts { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  /* A portrait crop towers over one short paragraph here; landscape sits
     better above the full-width facts strip. */
  .about__inner--page .about__media img { aspect-ratio: 5 / 4; }
}

/* Without its own button there is nothing to put beside the panel, and a
   heading alone in a half-width column just leaves a hole. So the section
   stacks instead: heading, then the panel across the full width, where the
   four cards get a row of their own rather than a cramped two-by-two. */
.customers__inner--nocta {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas: "head" "proof";
}
@media (min-width: 960px) {
  .customers__inner--nocta .customer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- The people ---------- */
/* One panel with a row per person, not a card each: the same grouped
   treatment the certificates get, because it answers the same question. */
.people-panel {
  display: grid;
  gap: 1px;
  background: var(--haze-deep);
  border: 1px solid var(--haze-deep);
  border-radius: var(--radius);
  overflow: hidden;
}
.person {
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--paper);
}
.person__name {
  font-size: var(--step-2);
  font-weight: 640;
  font-stretch: var(--semi-wide);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.person__role {
  margin-top: 0.25rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.4;
}
/* The one number a buyer remembers, so it is allowed to look like one. */
.person__highlight {
  margin-top: 0.875rem;
  color: var(--indigo);
  font-size: var(--step-1);
  font-weight: 640;
  font-stretch: var(--semi-wide);
  line-height: 1.25;
  text-wrap: balance;
}
.person__body p {
  color: var(--ink-soft);
  line-height: 1.7;
  text-wrap: pretty;
}
.person__body p + p { margin-top: 0.875rem; }

@media (min-width: 900px) {
  .person {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  /* No sticky here: over two paragraphs it buys nothing, and it leaves the
     name floating out of line with the text it belongs to. */
  .person__head { align-self: start; }
}

/* ---------- Registered entity, on its own ---------- */
.entity .facts { margin-top: 0; }

/* ---------- Indicative rates ---------- */
/* Hidden entirely until data.js carries real figures. */
.rates {
  max-width: 52rem;
  padding: clamp(1.25rem, 1rem + 2vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--haze-deep);
  border-radius: var(--radius);
}
.rates__table { width: 100%; border-collapse: collapse; }
.rates__table th,
.rates__table td {
  padding: 0.75rem 1rem 0.75rem 0;
  text-align: left;
  border-bottom: 1px solid var(--haze-deep);
}
.rates__table thead th {
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: 620;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rates__table tbody th { font-weight: 620; }
.rates__table tbody td { color: var(--ink-soft); }
.rates__note,
.rates__asof {
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.55;
}

/* ---------- Link cards ---------- */
.linkcards {
  display: grid;
  gap: 1px;
  background: var(--haze-deep);
  border: 1px solid var(--haze-deep);
  border-radius: var(--radius);
  overflow: hidden;
}
.linkcard { padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem); background: var(--paper); }
.linkcard__title { font-size: var(--step-1); font-weight: 620; line-height: 1.25; }
.linkcard__title a { color: inherit; text-decoration: none; }
.linkcard__title a:hover { color: var(--indigo); }
.linkcard__text { margin-top: 0.5rem; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; }
@media (min-width: 720px) {
  .linkcards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

/* ---------- Standalone pages (404, privacy) ---------- */
/* These two are hand-written files, not sections of the one-pager. They
   borrow the same tokens so they never look like a different website. */
.errorpage,
.prose { min-height: 100vh; display: grid; align-content: center; }

.errorpage__inner,
.prose__inner { max-width: 44rem; }

.errorpage .brand,
.prose .brand { margin-bottom: 2.5rem; }

.errorpage__code {
  color: var(--indigo);
  font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  font-weight: 660;
  font-stretch: var(--wide);
  line-height: 1;
  letter-spacing: -0.03em;
}
.errorpage__title { margin-top: 0.5rem; }
.errorpage__lead,
.prose__lead {
  max-width: 34rem;
  margin-top: 1.25rem;
  color: var(--ink-soft);
  font-size: var(--step-1);
  line-height: 1.6;
}

.errorpage__links {
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.errorpage__links a {
  color: var(--ink);
  font-weight: 600;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.errorpage__links a:hover { color: var(--indigo); }

.errorpage__call {
  margin-top: 1.5rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.errorpage__call a { color: var(--indigo); font-weight: 600; }
.errorpage__back,
.prose__back { margin-top: 2rem; }

.prose__title { margin-top: 0; }
.prose h2 {
  margin-top: 2.5rem;
  font-size: var(--step-2);
  font-weight: 640;
  font-stretch: var(--semi-wide);
  letter-spacing: -0.015em;
}
.prose p {
  max-width: 38rem;
  margin-top: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.7;
}
.prose p strong { color: var(--ink); font-weight: 620; }
.prose a {
  color: var(--indigo);
  font-weight: 600;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--indigo-deep); }
.prose .btn { color: inherit; font-weight: 600; }

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