/* ==========================================================================
   The Ramnik Group — stylesheet
   Single file, no build step. Sections in order:
   tokens · zones · reset · typography · layout · header · hero · buttons · stats ·
   cards · process · specs · photos · lists · quote · timeline · certs ·
   forms · footer · motion · responsive · print
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */

:root {
  /* The ink family sits on the logo's hue (211) so the two agree. It is a
     two thirds of the mark's saturation. A third was tried first and was too
     subtle to read as navy at all on a phone; the full 77% turns a page of
     body text into corporate blue. Lightness is
     unchanged from the charcoal it replaces, so every contrast pair that was
     checked before still holds. */
  --ink: #0a1b2e;
  --ink-2: #25384e;
  --ink-3: #4a6480;
  --paper: #faf9f7;
  --paper-2: #f1efeb;
  --paper-3: #e6e3dd;

  /* --ember is decorative (rules, fills, focus ring). Type set small uses
     --ember-text, which clears WCAG AA 4.5:1 on every paper tone; on the
     dark sections use --ember-lit. Same split for the sustainability green. */
  --ember: #b4611f;
  --ember-text: #964f18;
  --ember-lit: #e0a04f;
  --green-text: #2f6b45;
  --green-lit: #8fd4a8;

  /* Zone accents. The mark is three stacked bands — the sun on top for solar,
     the ingot in the middle for the alloys, the rock beneath for the mine — so
     each of those three pages takes its accent from its own band and the page
     agrees with the logo. Everything decorative points at --zone-*, not at
     --ember-*, and a page declares which band it belongs to with data-zone on
     the body. Un-zoned pages (home, legacy, gallery, contact) keep the ember,
     because they are the whole group rather than one band.

     The literal band colours could not all be used as they are. The sun is
     2.42:1 on paper and the ingot's silver 1.57:1 — neither can carry type —
     so each zone's --zone-text is a darkened relative of its band, and its
     --zone-lit a lightened one for the dark sections. The bands themselves
     appear undiluted in .bands, which is the one place they are pure colour
     on a dark ground and so need no adjusting. */
  --zone: var(--ember);
  --zone-text: var(--ember-text);
  --zone-lit: var(--ember-lit);
  --zone-line: rgba(180, 97, 31, 0.5); /* underlines under body links */
  --zone-ring: rgba(180, 97, 31, 0.15); /* focus halo on form fields */
  --zone-glow: rgba(180, 97, 31, 0.28); /* the hero's corner light */
  --zone-wash: rgba(180, 97, 31, 0.16); /* the light thrown over a photograph */
  --zone-edge: rgba(180, 97, 31, 0.45); /* a card's border when it is hovered */
  /* --zone-veil tints the hero photograph itself. It is the bottom layer of
     the scrim, so the dark gradient still goes over the top of it and the
     white text keeps every bit of the contrast it had. Un-zoned pages leave
     it transparent and look exactly as they did. */
  --zone-veil: transparent;

  /* The three bands, straight off the logo sheet. Only the rock is altered:
     #0c325c is 1.35:1 on --ink and would vanish, so on dark grounds it is
     lifted to --band-rock-lit at 5.70:1. */
  --band-sun: #e58f03;
  --band-ingot: #c8c9cd;
  --band-rock: #0c325c;
  --band-rock-lit: #6296da;

  --line: rgba(10, 27, 46, 0.13);
  --line-soft: rgba(10, 27, 46, 0.07);
  --line-dark: rgba(250, 249, 247, 0.16);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --radius: 3px;

  --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.75vw, 2rem);
  --step-3: clamp(1.85rem, 1.55rem + 1.5vw, 2.85rem);
  --step-4: clamp(2.4rem, 1.8rem + 3vw, 4.4rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- zones -------------------------------------------------------------- */

/* Solar — the sun on the top band. This is the zone nearest the ember the site
   already used, so the sustainability page changes least; it warms and
   brightens towards the logo's #E58F03 rather than the earthier ember. */
[data-zone="solar"] {
  --zone: #c9760a;
  --zone-text: #8b550e; /* 5.86:1 on --paper */
  --zone-lit: #e9a449; /* 8.16:1 on --ink */
  --zone-line: rgba(201, 118, 10, 0.5);
  --zone-ring: rgba(201, 118, 10, 0.16);
  --zone-glow: rgba(229, 143, 3, 0.3);
  --zone-wash: rgba(229, 143, 3, 0.18);
  --zone-edge: rgba(201, 118, 10, 0.45);
  --zone-veil: rgba(229, 143, 3, 0.45);
}

/* Ferro alloys — the ingot on the middle band. Its silver is 1.57:1 on paper
   and cannot be used at all as an accent, so the zone takes the colour the
   metal actually is under the shed lights: a petrol steel. A straight desaturated
   blue was tried first and came out only ΔE 6 from --ink-3, which made every
   accent read as ordinary muted text. This one is ΔE 16.7 from it. */
[data-zone="alloys"] {
  --zone: #2a7d8c;
  --zone-text: #20646f; /* 6.41:1 on --paper */
  --zone-lit: #8cc0cb; /* 8.70:1 on --ink */
  --zone-line: rgba(42, 125, 140, 0.55);
  --zone-ring: rgba(42, 125, 140, 0.16);
  --zone-glow: rgba(42, 125, 140, 0.32);
  --zone-wash: rgba(140, 192, 203, 0.16);
  --zone-edge: rgba(42, 125, 140, 0.45);
  --zone-veil: rgba(42, 125, 140, 0.42);
}

/* The mine — the rock on the bottom band, the logo's own navy. It is the one
   zone whose band colour is close to the body ink, so the accents are pushed
   brighter than the band to stay legible as accents: ΔE 24 from --ink-3. */
[data-zone="mine"] {
  --zone: #3272b8;
  --zone-text: #184681; /* 8.94:1 on --paper */
  --zone-lit: #6296da; /* 5.70:1 on --ink */
  --zone-line: rgba(50, 114, 184, 0.55);
  --zone-ring: rgba(50, 114, 184, 0.18);
  --zone-glow: rgba(50, 114, 184, 0.3);
  --zone-wash: rgba(98, 150, 218, 0.16);
  --zone-edge: rgba(50, 114, 184, 0.45);
  --zone-veil: rgba(50, 114, 184, 0.45);
}

/* The three bands themselves, laid across the foot of a hero in the order they
   appear in the mark: sun, ingot, rock. On a zoned page the page's own band is
   thicker and at full strength and the other two step back, so the strip says
   both "these are the three parts of the group" and "you are in this one". On
   the home page nothing is dimmed — that page is all three. */
.bands {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: 5px;
}

.bands span {
  flex: 1;
  transition: opacity 0.4s var(--ease), flex-grow 0.4s var(--ease);
}

.bands span:nth-child(1) {
  background: var(--band-sun);
}
.bands span:nth-child(2) {
  background: var(--band-ingot);
}
.bands span:nth-child(3) {
  background: var(--band-rock-lit);
}

[data-zone] .bands span {
  opacity: 0.3;
}

[data-zone="solar"] .bands span:nth-child(1),
[data-zone="alloys"] .bands span:nth-child(2),
[data-zone="mine"] .bands span:nth-child(3) {
  opacity: 1;
  flex-grow: 2.4;
}

/* A second, quieter echo of the same idea: on a zoned page the dark sections
   carry a hairline of the zone's band along their top edge, so the colour
   returns down the page instead of appearing once in the hero and vanishing. */
[data-zone] .section--ink {
  border-top: 2px solid var(--zone-lit);
}

/* --- reset -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

/* --- typography --------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.13;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-4);
}
h2 {
  font-size: var(--step-3);
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}

p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

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

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

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

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--zone-text);
  margin: 0 0 1.25rem;
}

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

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

.note {
  font-size: 0.85rem;
  color: var(--ink-3);
}

/* --- layout ------------------------------------------------------------- */

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

.section {
  padding-block: clamp(4rem, 8vw, 7.5rem);
}

.section--tight {
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}

.section--ink {
  background: var(--ink);
  color: var(--paper);
}

.section--ink h2,
.section--ink h3,
.section--ink h4 {
  color: var(--paper);
}

.section--ink .lede,
.section--ink .muted,
.section--ink .note {
  color: rgba(250, 249, 247, 0.68);
}

.section--ink .eyebrow {
  color: var(--zone-lit);
}

.section--ink a:hover {
  color: var(--zone-lit);
}

.section--alt {
  background: var(--paper-2);
}

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

.rule {
  height: 1px;
  border: 0;
  background: var(--line);
  margin: 0;
}

.grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.split--even {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.split--media {
  align-items: center;
}

/* --- skip link ---------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
}

.skip:focus {
  left: 0;
}

/* --- header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 249, 247, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
}

.brand__mark {
  width: 2.15rem;
  height: 2.15rem;
  flex: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand__name {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.brand__sub {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Small enough that --ink-3 falls under AA against the header's tinted
     backdrop, so this line is set darker than the other muted labels. Kept
     proportional to --ink-3 rather than matching the ground's saturation: a
     small uppercase label this blue starts to read as a link. 7.33:1 there. */
  color: #3c556f;
}

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

.nav a {
  font-size: 0.83rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-2);
  position: relative;
  padding-block: 0.35rem;
  white-space: nowrap;
}

.nav .lang-pill a::after {
  display: none;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--zone);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

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

.nav .btn::after {
  display: none;
}

/* The language switch is a two-state pill, EN | JP — with German sunset the
   site has exactly two languages, so the control can show the whole choice at
   once, current state included. Two copies exist on the English pages: one in
   the nav row for desktop, one in the header bar for the collapsed layouts,
   because the nav row leaves the flow entirely when it becomes the slide-down
   panel. The current language is a <span>, not a link — it goes nowhere. The
   Japanese page keeps a single copy in a .header-actions group that never
   collapses. */
.lang-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

.lang-pill a,
.lang-pill span {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  color: var(--ink-3);
}

.lang-pill [aria-current] {
  background: var(--ink);
  color: var(--paper);
}

.lang-pill a:hover {
  color: var(--ink);
}

.lang-pill--bar {
  display: none;
  margin-left: auto;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.nav-toggle {
  display: none;
  flex-shrink: 0; /* never squeezed by a long brand — a 20px tap target is no target */
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 1.05rem;
  height: 1px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
}

.nav-toggle span::before {
  transform: translateY(-5px);
}

.nav-toggle span::after {
  transform: translateY(5px);
}

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

.nav-toggle[aria-expanded="true"] span::before {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  transform: rotate(-45deg);
}

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.btn:hover {
  background: var(--zone-text);
  border-color: var(--zone-text);
  color: #fff;
  transform: translateY(-1px);
}

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

.btn--ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.btn--light {
  background: transparent;
  border-color: rgba(250, 249, 247, 0.4);
  color: var(--paper);
}

.btn--light:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

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

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--zone-text);
}

.arrow-link::after {
  content: "\2192";
  transition: transform 0.25s var(--ease);
}

.arrow-link:hover::after {
  transform: translateX(4px);
}

.section--ink .arrow-link {
  color: var(--zone-lit);
}

/* --- hero --------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  background-color: #22262b;
  background-image: linear-gradient(118deg, #2a2f35 0%, #1b1f24 46%, #14171a 100%);
  background-size: cover;
  background-position: center;
  opacity: 0.85;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      100deg,
      rgba(10, 27, 46, 0.94) 0%,
      rgba(10, 27, 46, 0.82) 45%,
      rgba(10, 27, 46, 0.55) 100%
    ),
    radial-gradient(60rem 34rem at 88% 6%, var(--zone-glow), transparent 62%),
    linear-gradient(0deg, var(--zone-veil), var(--zone-veil));
}

.hero__inner {
  position: relative;
  padding-block: clamp(4.5rem, 11vw, 9rem) clamp(3.5rem, 7vw, 6rem);
  max-width: 56rem;
}

.hero h1 {
  color: var(--paper);
  margin-bottom: 1.5rem;
}

.hero h1 em {
  font-style: italic;
  color: var(--zone-lit);
}

.hero .eyebrow {
  color: var(--zone-lit);
}

.hero .lede {
  color: rgba(250, 249, 247, 0.78);
  max-width: 54ch;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.25rem;
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 249, 247, 0.62);
}

.page-hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}

.page-hero .hero__inner {
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.75rem, 5vw, 4.25rem);
}

.page-hero h1 {
  color: var(--paper);
}

.page-hero .eyebrow {
  color: var(--zone-lit);
}

.page-hero .lede {
  color: rgba(250, 249, 247, 0.75);
  max-width: 56ch;
}

/* --- stats -------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat {
  padding: clamp(1.6rem, 3.5vw, 2.5rem) clamp(1rem, 2vw, 2rem);
  border-right: 1px solid var(--line);
}

.stat:last-child {
  border-right: 0;
}

.stat__value {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.4rem + 1.9vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat__unit {
  font-size: 0.5em;
  letter-spacing: 0;
  color: var(--ink-3);
}

.stat__label {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.section--ink .stats {
  border-color: var(--line-dark);
}

.section--ink .stat {
  border-right-color: var(--line-dark);
}

.section--ink .stat__label,
.section--ink .stat__unit {
  color: rgba(250, 249, 247, 0.6);
}

/* --- cards -------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--zone-edge);
  box-shadow: 0 18px 40px -28px rgba(10, 27, 46, 0.5);
}

.card__tag {
  font-size: 0.67rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--zone-text);
  margin-bottom: 0.9rem;
}

.card h3 {
  font-size: var(--step-1);
  margin-bottom: 0.55rem;
}

.card p {
  color: var(--ink-2);
  font-size: 0.94rem;
  margin-bottom: 1.15rem;
}

.card__foot {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.section--ink .card {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--line-dark);
}

.section--ink .card p {
  color: rgba(250, 249, 247, 0.7);
}

.section--ink .card__tag {
  color: var(--zone-lit);
}

.section--ink .card__foot {
  color: rgba(250, 249, 247, 0.5);
}

/* --- numbered principles ------------------------------------------------ */

.principles {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: principle;
}

.principles li {
  counter-increment: principle;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.25rem);
  padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
  border-top: 1px solid var(--line);
}

.principles li:last-child {
  border-bottom: 1px solid var(--line);
}

.principles li::before {
  content: counter(principle, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--zone-text);
  padding-top: 0.3rem;
}

.principles h3 {
  font-size: var(--step-1);
  margin-bottom: 0.35rem;
}

.principles p {
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0;
}

.section--ink .principles li,
.section--ink .principles li:last-child {
  border-color: var(--line-dark);
}

.section--ink .principles li::before {
  color: var(--zone-lit);
}

.section--ink .principles p {
  color: rgba(250, 249, 247, 0.7);
}

/* --- process flow ------------------------------------------------------- */

/* Gridlines live on each tile rather than on the container background: a partly
   filled last row would otherwise paint the empty cells as a solid block. */
.process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1px;
  counter-reset: step;
}

.process li {
  counter-increment: step;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.process li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--zone-text);
  margin-bottom: 0.85rem;
}

.process h3 {
  font-size: 1.05rem;
  font-family: var(--sans);
  letter-spacing: -0.005em;
  margin-bottom: 0.35rem;
}

.process p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-3);
}

.section--alt .process li {
  background: var(--paper);
}

/* --- spec table --------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 34rem;
}

caption {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 0.9rem;
}

th,
td {
  text-align: left;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}

thead th {
  background: var(--paper-2);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}

tbody th {
  font-weight: 400;
  color: var(--ink);
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

td.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- photo slots -------------------------------------------------------- */

/* Photographs are pending. Each slot carries the intended image as an inline
   background-image; while the file is absent the graphite placeholder shows
   instead, so nothing breaks. Drop the file at the documented path to fill it. */
.photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: #23272c;
  background-image: linear-gradient(135deg, #2b3036 0%, #1e2227 55%, #171b1f 100%);
  background-size: cover;
  background-position: center;
  aspect-ratio: 4 / 3;
}

.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    18rem 18rem at 50% 45%,
    var(--zone-wash),
    transparent 70%
  );
}

.photo--tall {
  aspect-ratio: 3 / 4;
}

.photo--wide {
  aspect-ratio: 16 / 7;
}

.photo--16x9 {
  aspect-ratio: 16 / 9;
}

.photo--3x2 {
  aspect-ratio: 3 / 2;
}

/* For true panoramas. Wider than --wide, and deliberately so: a stitched
   panorama cropped back to 16:7 loses the sweep that made it worth taking.
   On a phone that sweep is unreadable anyway — 2.7:1 inside a 350px column is a
   130px strip — so below 640px the box goes to 16:9 and background-size:cover
   trims the ends, keeping the middle at a size worth looking at. Frame the
   subject centrally in anything using this class. */
.photo--pano {
  aspect-ratio: 27 / 10;
}

@media (max-width: 640px) {
  .photo--pano {
    aspect-ratio: 16 / 9;
  }
}

/* A wide crop of a portrait original. On a desktop the 16:9 band is right; on a
   phone it collapses to a ~200px strip and the picture stops registering. So
   below 640px the slot takes the uncropped frame instead and goes portrait.
   Both files are passed in as custom properties rather than as an inline
   background-image, because an inline value cannot be overridden by a media
   query without !important. A missing file still degrades to the graphite
   placeholder, which is the reason the slots work this way at all. */
.photo--phone-tall {
  background-image: var(--wide);
}

@media (max-width: 640px) {
  .photo--phone-tall {
    background-image: var(--tall);
    aspect-ratio: 3 / 4;
  }
}

.photo-caption {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.section--ink .photo-caption {
  color: rgba(250, 249, 247, 0.55);
}

figure {
  margin: 0;
}

/* --- fact lists --------------------------------------------------------- */

.facts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.facts li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

.facts li:first-child {
  border-top: 1px solid var(--line);
}

.facts dt,
.facts .facts__key {
  color: var(--ink-3);
}

.facts .facts__val {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.section--ink .facts li {
  border-color: var(--line-dark);
}

.section--ink .facts .facts__key {
  color: rgba(250, 249, 247, 0.62);
}

.pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pills li {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.82rem;
  color: var(--ink-2);
  background: var(--paper);
}

.section--ink .pills li {
  border-color: var(--line-dark);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(250, 249, 247, 0.82);
}

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

/* The marker is positioned rather than made a grid item. As a two-column grid,
   an <li> containing inline markup (e.g. a leading <strong>) produced a third
   grid item, which wrapped onto row 2 into the 1.1rem marker column and set the
   text one word per line. Positioning is indifferent to how many children the
   item has. */
.checks li {
  position: relative;
  padding-left: 1.95rem;
  color: var(--ink-2);
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--zone);
}

.checks--green li::before {
  background: var(--green-text);
}

.section--ink .checks li {
  color: rgba(250, 249, 247, 0.75);
}

.section--ink .checks li::before {
  background: var(--zone-lit);
}

/* --- quote -------------------------------------------------------------- */

.quote {
  margin: 0;
  padding: clamp(1.6rem, 3.5vw, 2.5rem);
  background: var(--paper-2);
  border-left: 2px solid var(--zone);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.quote p {
  font-family: var(--serif);
  font-size: var(--step-2);
  line-height: 1.35;
  margin-bottom: 1.1rem;
}

.quote footer {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.section--ink .quote {
  background: rgba(255, 255, 255, 0.045);
  border-left-color: var(--zone-lit);
}

.section--ink .quote footer {
  color: rgba(250, 249, 247, 0.55);
}

/* --- timeline ----------------------------------------------------------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
}

.timeline li:last-child {
  border-bottom: 1px solid var(--line);
}

.timeline__year {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--zone-text);
}

.timeline h3 {
  font-size: 1.05rem;
  font-family: var(--sans);
  margin-bottom: 0.25rem;
}

.timeline p {
  margin: 0;
  color: var(--ink-2);
  max-width: 62ch;
}

.section--ink .timeline li,
.section--ink .timeline li:last-child {
  border-color: var(--line-dark);
}

.section--ink .timeline__year {
  color: var(--zone-lit);
}

.section--ink .timeline p {
  color: rgba(250, 249, 247, 0.7);
}

/* --- people ------------------------------------------------------------- */

.person {
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  display: grid;
  grid-template-columns: clamp(6.5rem, 14vw, 9rem) minmax(0, 1fr);
  gap: clamp(1.1rem, 2.5vw, 1.75rem);
  align-items: start;
}

/* Headshot slot. Same approach as .photo — the file is set as an inline
   background-image, and while it is absent the placeholder shows instead.
   The text sits in .person__body so the portrait's height stays independent
   of it; spanning rows instead would stretch the gaps between name and bio. */
.person__portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background-color: #23272c;
  background-image: linear-gradient(150deg, #2f343a 0%, #22262b 55%, #1a1e22 100%);
  background-size: cover;
  background-position: center top;
}

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

.person h3 {
  font-size: var(--step-1);
  margin-bottom: 0.2rem;
}

.person__role {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zone-text);
  margin-bottom: 1rem;
}

.person p {
  color: var(--ink-2);
  font-size: 0.95rem;
}

/* --- certifications ----------------------------------------------------- */

.certs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.certs li {
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.certs h3 {
  font-size: 1rem;
  font-family: var(--sans);
  letter-spacing: 0;
  margin-bottom: 0.3rem;
}

.certs p {
  margin: 0;
  font-size: 0.87rem;
  color: var(--ink-3);
}

.section--ink .certs li {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--line-dark);
}

.section--ink .certs p {
  color: rgba(250, 249, 247, 0.62);
}

/* --- contact / forms ---------------------------------------------------- */

.form {
  display: grid;
  gap: 1.2rem;
}

.field {
  display: grid;
  gap: 0.5rem;
}

.field label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--zone);
  box-shadow: 0 0 0 3px var(--zone-ring);
}

.field textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.2rem;
}

/* --- wide figures ------------------------------------------------------- */

/* The trade map carries labels sized for a desktop reading distance. Rather
   than let them shrink to illegibility on a phone, it keeps a minimum width and
   scrolls inside its own box — the same treatment the product table gets. The
   country lists beneath it hold the same information as text. */
.figure-scroll {
  overflow-x: auto;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
}

.figure-scroll img {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
}

/* --- map ---------------------------------------------------------------- */

.map {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 16 / 10;
}

.map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Full-width band. The letterbox suits a map at desktop widths but goes too
   shallow to read on a phone, so it squares up there. */
.map--band {
  aspect-ratio: 21 / 9;
}

@media (max-width: 700px) {
  .map--band {
    aspect-ratio: 4 / 3;
  }
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-list li {
  padding-block: 1.15rem;
  border-top: 1px solid var(--line);
}

.contact-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.contact-list__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.35rem;
}

/* --- CTA band ----------------------------------------------------------- */

.cta {
  text-align: center;
}

.cta h2 {
  max-width: 22ch;
  margin-inline: auto;
}

.cta .lede {
  margin-inline: auto;
  text-align: center;
}

.cta .btn-row {
  justify-content: center;
}

/* --- video -------------------------------------------------------------- */

/* Phone footage, 478px wide. Capped at its own native width so it is never
   upscaled, and centred in its column so it does not sit oddly against the
   text beside it. The cap is what matters here, not the shape: the clip in
   this slot has already changed aspect once, so nothing below assumes one. */
.video {
  margin: 0;
  max-width: 27rem;
  margin-inline: auto;
}

.video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: #0d0f11;
}

.video figcaption {
  margin-top: 0.85rem;
  text-align: center;
}

/* --- gallery ------------------------------------------------------------ */

/* The album carries photographs of five different aspect ratios, from a 27:10
   panorama to a 3:4 headgear tower. A uniform grid would have to re-crop them
   all; CSS columns let each keep its own shape. Reading order runs down each
   column rather than across, which is the right trade for an album. */

.page-hero--plain {
  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(2.75rem, 7vw, 5rem);
}

.album {
  columns: 1;
  column-gap: clamp(0.85rem, 2vw, 1.35rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

@media (min-width: 600px) {
  .album {
    columns: 2;
  }
}

@media (min-width: 960px) {
  .album {
    columns: 3;
  }
}

/* Two frames only, so three columns would leave a hole. */
.album--pair {
  columns: 1;
}

@media (min-width: 600px) {
  .album--pair {
    columns: 2;
  }
}

.shot {
  break-inside: avoid;
  /* Safari still needs the old property to honour the above. */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 clamp(0.85rem, 2vw, 1.35rem);
}

.shot > a {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-3);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s var(--ease);
}

.js .shot > a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 27, 46, 0);
  transition: background 0.35s var(--ease);
}

.js .shot > a:hover::after,
.js .shot > a:focus-visible::after {
  background: rgba(10, 27, 46, 0.14);
}

.shot > a:hover img {
  transform: scale(1.03);
}

.shot figcaption {
  margin-top: 0.6rem;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--ink-3);
}

.section--ink .shot figcaption {
  color: rgba(250, 249, 247, 0.6);
}

.section--ink .shot > a {
  background: rgba(250, 249, 247, 0.06);
}

/* --- lightbox ----------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  /* Above .site-header (100), below .skip (200): the sticky header would
     otherwise sit over the overlay and cover the close button. */
  z-index: 150;
  background: rgba(10, 12, 14, 0.95);
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}

/* Not `display:none` on [hidden] plus `display:flex` here — the flex would win
   and the shell would sit over the page permanently. */
.lightbox:not([hidden]) {
  display: flex;
}

.lightbox__figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.lightbox__figure img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  width: auto;
  height: auto;
  border-radius: var(--radius);
}

.lightbox__figure figcaption {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(250, 249, 247, 0.72);
  text-align: center;
  max-width: 60ch;
}

/* Shown only for certificates: the overlay holds a picture of the document, so
   there has to be a way through to the document itself. */
.lightbox__download {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--zone-lit);
  text-decoration: none;
  border-bottom: 1px solid rgba(224, 160, 79, 0.45);
  padding-bottom: 1px;
}

.lightbox__download:hover {
  border-bottom-color: var(--zone-lit);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(250, 249, 247, 0.08);
  border: 1px solid rgba(250, 249, 247, 0.22);
  border-radius: var(--radius);
  color: var(--paper);
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s var(--ease);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(250, 249, 247, 0.18);
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid var(--zone-lit);
  outline-offset: 2px;
}

.lightbox__close {
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.6rem;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 3.75rem;
  font-size: 2rem;
}

.lightbox__nav--prev {
  left: clamp(0.5rem, 2vw, 1.5rem);
}

.lightbox__nav--next {
  right: clamp(0.5rem, 2vw, 1.5rem);
}

/* Stops the page behind scrolling while the lightbox is open. */
body.is-lightboxed {
  overflow: hidden;
}

/* --- footer ------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: rgba(250, 249, 247, 0.7);
  padding-block: clamp(2.75rem, 5vw, 4rem) 2rem;
  font-size: 0.9rem;
}

.site-footer a {
  text-decoration: none;
  color: rgba(250, 249, 247, 0.7);
}

.site-footer a:hover {
  color: var(--zone-lit);
}

.site-footer .brand__name,
.site-footer .footer-grid h3 {
  color: var(--paper);
}

.site-footer .brand__sub {
  color: rgba(250, 249, 247, 0.58);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.25rem, 4vw, 3rem);
}

.footer-grid h3 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.79rem;
  color: rgba(250, 249, 247, 0.5);
}

/* --- 404 ---------------------------------------------------------------- */

.center-page {
  min-height: 60vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding-block: 5rem;
}

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

/* Hiding is scoped to .js (set by an inline script in <head>) so content is
   never invisible when scripting is unavailable. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 960px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The collapse point moved up from 900px when the language links joined the
   home page nav: nine items need 1160px before the row fits inside the wrap.
   One breakpoint for every page — a nav that collapses at different widths on
   different pages reads as a bug when moving between them. Keep the matchMedia
   width in main.js in step with this. */
@media (max-width: 1160px) {
  .js .nav-toggle {
    display: inline-flex;
    position: relative;
  }

  .js .lang-pill--bar {
    display: inline-flex;
  }

  /* The bar copy serves the collapsed state; the panel copy would repeat it. */
  .js .nav .lang-pill {
    display: none;
  }

  /* Without scripting there is no toggle, so the links stay in flow. */
  html:not(.js) .nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem 1.15rem;
  }

  .js .nav {
    position: fixed;
    inset: 4.75rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-block: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.5rem;
    transform: translateY(-125%);
    transition: transform 0.35s var(--ease);
    box-shadow: 0 24px 40px -32px rgba(10, 27, 46, 0.6);
    max-height: calc(100vh - 4.75rem);
    overflow-y: auto;
  }

  .js .nav.is-open {
    transform: translateY(0);
  }

  .js .nav a {
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1rem;
  }

  .nav a::after {
    display: none;
  }

  .js .nav .btn {
    margin-top: 1rem;
    justify-content: center;
    border-bottom: 0;
  }

}

@media (max-width: 480px) {
  /* The tagline under the brand is 257px set, and with the language link and
     the menu button beside it the header needs ~440px — no phone has it. The
     name alone identifies the site; the three trades are the first thing the
     page itself says. */
  .brand__sub {
    display: none;
  }

  .site-header__inner {
    gap: 0.75rem;
  }

  .lang-pill a,
  .lang-pill span {
    padding: 0.28rem 0.55rem;
    font-size: 0.66rem;
  }

  /* On the Japanese page the contact button yields to the pill; the page's
     own body and footer both carry the contact route. */
  .header-actions .btn {
    display: none;
  }
}

/* Below this the bar cannot hold the pill even with everything trimmed; the
   footer still links the Japanese page, so nothing is lost, only the shortcut. */
@media (max-width: 340px) {
  .js .lang-pill--bar {
    display: none;
  }
}

@media (max-width: 640px) {
  .stat {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .stat:last-child {
    border-bottom: 0;
  }

  .section--ink .stat {
    border-bottom-color: var(--line-dark);
  }

  .principles li,
  .timeline li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .facts li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }

  .facts .facts__val {
    text-align: left;
  }

  /* Two footer columns squeeze the brand lockup into a wrap at phone widths. */
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- print -------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .btn-row,
  .nav-toggle,
  .photo {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .section,
  .hero__inner {
    padding-block: 1.25rem;
  }

  .hero,
  .page-hero,
  .section--ink {
    background: #fff !important;
    color: #000 !important;
  }

  .hero h1,
  .page-hero h1,
  .section--ink h2,
  .section--ink h3 {
    color: #000 !important;
  }

  /* Sections below the fold are never observed, so un-hide them for print. */
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}