/* Linkobalt — one stylesheet for all pages. Decisions live in DESIGN.md. */

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

:root {
  --ink: #0f1d2b;
  --paper: #f4f6f7;
  --white: #ffffff;
  --steel: #52616f;
  --baltic: #1f4e79;
  --signal: #e8732a;
  --on-ink: #c4d0db;
  --rule: #c9d2d9;
  --field: #7a8995;

  --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-head: "IBM Plex Sans Condensed", "Arial Narrow", "IBM Plex Sans", system-ui, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.6rem + 3vw, 4rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: clamp(3rem, 2rem + 4vw, 6rem);

  --page: 77.5rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 68ch;
  --radius: 3px;
  --focus: var(--baltic);
}

/* Fonts: Latin and Latin Extended (Estonian) for every language, Cyrillic
   for RU. unicode-range means a page only downloads the files whose
   characters it uses. Only the heading face is preloaded (per language). */

@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-condensed-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* IBM Plex Sans Condensed has no Cyrillic, so Russian headings use the
   regular-width Plex Sans: same family, and no line mixes two widths. */
:root:lang(ru) {
  --font-head: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}


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

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

/* Components set display: grid/flex; [hidden] must still win. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
  /* Long Estonian and Russian words ("konfidentsiaalsuse",
     "конфиденциальности") do not fit a 320 px screen at heading size:
     hyphenate by the page's lang, and break as a last resort. */
  hyphens: auto;
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--step-4);
  letter-spacing: -0.01em;
}

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

h3 {
  font-size: var(--step-2);
  line-height: 1.2;
}

p,
ul,
ol,
dl,
figure {
  margin: 0;
}

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

a {
  color: var(--baltic);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

/* The dark footer switches link and focus colours so both stay above 3:1. */
.site-footer {
  --focus: var(--signal);
  background: var(--ink);
  color: var(--paper);
}

.site-footer a {
  color: var(--paper);
}

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

.wrap {
  width: 100%;
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.section--white {
  background: var(--white);
}

.section__head {
  display: grid;
  gap: var(--space-2);
  max-width: var(--measure);
  margin-bottom: var(--space-4);
}

.stack > * + * {
  margin-top: var(--space-2);
}

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--space-2);
}

.prose ul {
  padding-left: 1.25em;
}

.prose h2 {
  margin-top: var(--space-4);
  font-size: var(--step-2);
}

.lead {
  max-width: var(--measure);
  font-size: var(--step-1);
  line-height: 1.5;
}

.muted {
  color: var(--steel);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip link -------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  z-index: 10;
  padding: var(--space-1) var(--space-2);
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  --focus: var(--signal);
}

/* Buttons ---------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 1.25rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  font: 600 var(--step-0) / 1.2 var(--font-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button--signal {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--ink);
}

.button--signal:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

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

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

.button[disabled],
.button[aria-disabled="true"] {
  background: var(--rule);
  border-color: var(--rule);
  color: var(--steel);
  cursor: not-allowed;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.more {
  display: inline-block;
  margin-top: var(--space-3);
  font-weight: 600;
}

/* Header ----------------------------------------------------------------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font: 600 1.2rem / 1 var(--font-head);
  text-decoration: none;
}

.brand img {
  width: auto;
  height: 1.75rem;
}

.site-header__phone {
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}

/* Phone and language switch share one cell, so the brand row stays two
   columns on phones and three on wide screens. Below 30em they stack at
   the right edge: side by side they would run into the brand. */
.site-header__tools {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem var(--space-2);
}

@media (min-width: 30em) {
  .site-header__tools {
    flex-direction: row;
    align-items: center;
  }
}

.lang-switch ul {
  display: flex;
  gap: 0.15rem;
  padding: 0;
  list-style: none;
}

.lang-switch a {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0.2rem 0.25rem;
  color: var(--steel);
  font-size: var(--step--1);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

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

.lang-switch a[aria-current="true"] {
  color: var(--ink);
  border-bottom-color: var(--signal);
}

/* Brand and phone share the first row; at 320 px they only fit at the smaller size. */
@media (min-width: 30em) {
  .brand {
    gap: 0.6rem;
    font-size: 1.375rem;
  }

  .brand img {
    height: 2.25rem;
  }

  .site-header__phone {
    font-size: var(--step-0);
  }
}

.site-nav {
  grid-column: 1 / -1;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: 0;
  list-style: none;
}

.site-nav a:not(.button) {
  display: inline-block;
  padding-block: 0.35rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.site-nav a:not(.button):hover {
  border-bottom-color: var(--rule);
}

/* Current page: bold carries the meaning, the signal underline is decoration. */
.site-nav a[aria-current="page"]:not(.button) {
  font-weight: 600;
  border-bottom-color: var(--signal);
}

@media (min-width: 64em) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
  }

  .site-nav {
    grid-column: auto;
    grid-row: 1;
    grid-column-start: 2;
    justify-self: end;
  }

  .site-header__tools {
    grid-column-start: 3;
  }

  .site-nav ul {
    flex-wrap: nowrap;
  }
}

/* Hero ------------------------------------------------------------------- */

.hero {
  padding-block: var(--space-4) var(--space-5);
}

.hero__grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

.hero__text {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 64em) {
  .hero__grid {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-5);
  }
}

.page-intro {
  padding-block: var(--space-4);
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}

.page-intro .wrap {
  display: grid;
  gap: var(--space-2);
}

/* Grid items default to min-width: auto (the longest word), which would
   let a long heading word push the page wider than a phone screen. */
.page-intro .wrap > * {
  min-width: 0;
}

/* Waybill: the hero's side panel, styled after a transport document. */

.waybill {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 6px solid var(--ink);
}

.waybill__title {
  font: 600 var(--step--1) / 1.3 var(--font-text);
  color: var(--steel);
}

/* Regions in the hero panel: the name carries the row, countries follow
   on their own line where the region needs spelling out. */
.places li {
  font: 600 var(--step-1) / 1.3 var(--font-head);
}

.places span {
  display: block;
  font: 400 var(--step--1) / 1.4 var(--font-text);
  color: var(--steel);
}

/* Lines: service rows like the lines of a waybill ------------------------ */

.lines {
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.lines__row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 7.5rem) 1fr;
  gap: 0.25rem var(--space-2);
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--rule);
}

.lines__label {
  font: 600 var(--step-0) / 1.4 var(--font-head);
}

/* Marked rows (special cargo): the label becomes a signal plate, so the row
   stands out while the columns stay aligned with the rest of the list. */
.lines__row--accent .lines__label {
  justify-self: start;
  padding: 0 0.45rem;
  background: var(--signal);
  color: var(--ink);
}

.lines__row--accent .lines__text {
  font-weight: 600;
}

.lines__text {
  min-width: 0;
}

.lines__codes {
  grid-column: 2;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Detail rows on inner pages: a heading per group, then plain items. */
.group + .group {
  margin-top: var(--space-4);
}

/* Special cargo is set apart as a card: the owner wants it noticed. */
.group--accent {
  padding: var(--space-3);
  background: var(--white);
  border-left: 6px solid var(--signal);
}

.group__head {
  display: grid;
  gap: 0.35rem;
  margin-bottom: var(--space-2);
}

.items {
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.items li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.items li::before {
  content: "";
  position: absolute;
  top: 1.3rem;
  left: 0.15rem;
  width: 0.6rem;
  height: 3px;
  background: var(--signal);
}

.code {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Split: the two business lines side by side, equal weight -------------- */

.split {
  display: grid;
  gap: var(--space-5) var(--space-4);
}

.split__part {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

@media (min-width: 64em) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
}

/* Facts ------------------------------------------------------------------ */

.facts {
  display: grid;
  gap: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.facts li {
  display: grid;
  gap: 0.25rem var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.facts__key {
  font: 600 var(--step-3) / 1 var(--font-head);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 48em) {
  .facts li {
    grid-template-columns: 12rem 1fr;
    align-items: baseline;
  }
}

/* Membership and rating badges ------------------------------------------- */

/* Marks are sized by height so square seals and the horizontal Koda logo
   sit on one line. Where the image carries the wording itself, it has alt
   text and links on its own; otherwise the text next to it explains it. */
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) 0 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 18rem;
  font-size: var(--step--1);
  line-height: 1.4;
}

.badge img {
  flex: none;
  width: auto;
  height: 4rem;
}

.badge > a {
  display: block;
}

.badge--footer {
  margin-top: var(--space-3);
}

.badge--footer img {
  height: 3.5rem;
}

.credentials {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

.credential {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.credential img {
  width: auto;
  max-width: 100%;
  height: 5rem;
}

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

.credential .more {
  margin-top: var(--space-1);
  overflow-wrap: anywhere;
}

@media (min-width: 48em) {
  .credentials {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
}

/* Partners strip (preview) ---------------------------------------------- */

/* A static list is the baseline. JS adds a duplicate for a seamless loop;
   the edge mask lets marks fade into the background without extra images. */
.partners {
  padding-block: var(--space-4);
  background: var(--white);
  border-top: 1px solid var(--rule);
}

.partners__inner {
  display: grid;
  gap: var(--space-2);
}

.partners__title {
  font-size: var(--step-1);
}

.partners__viewport {
  min-width: 0;
}

.partners__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  list-style: none;
}

.partners__list[aria-hidden="true"] {
  display: none;
}

.partners__list li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6rem;
  padding: var(--space-2);
}

.partners__list img {
  width: auto;
  height: auto;
  max-width: min(100%, 9rem);
  max-height: 2.25rem;
}

@media (min-width: 40em) {
  .partners__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .partners__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.partners--animated .partners__viewport {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 clamp(1.5rem, 5vw, 4rem), #000 calc(100% - clamp(1.5rem, 5vw, 4rem)), transparent);
}

.partners--animated .partners__track {
  display: flex;
  width: max-content;
  animation: partners-drift 60s linear infinite;
}

.partners--animated .partners__list {
  display: flex;
  flex: none;
}

.partners--animated .partners__list li {
  flex: none;
  width: clamp(10rem, 18vw, 14rem);
}

.partners[hidden] .partners__track {
  animation-play-state: paused;
}

@keyframes partners-drift {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .partners--animated .partners__track {
    animation: none;
  }
}

/* Temporary control for showing the strip to the client. Styled to look
   like a tool, not part of the site. */
.preview-toggle {
  position: fixed;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 100;
  padding: 0.45rem 0.8rem;
  border: 2px dashed var(--signal);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font: 600 var(--step--1) / 1.2 var(--font-text);
  cursor: pointer;
}

.preview-toggle[aria-pressed="true"] {
  background: var(--signal);
  color: var(--ink);
  border-color: var(--ink);
}

.preview-toggle:focus-visible {
  outline-color: var(--signal);
}

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

.contact {
  display: grid;
  gap: var(--space-4);
}

/* Grid items default to min-width: auto, so a fixed-width third-party
   widget inside the form could otherwise stretch the column past the page. */
.contact > * {
  min-width: 0;
}

.contact__list {
  display: grid;
  gap: var(--space-2);
}

.contact__list dt {
  font-size: var(--step--1);
  color: var(--steel);
}

.contact__list dd {
  margin: 0;
  font-weight: 600;
}

.contact__list a {
  color: var(--ink);
}

@media (min-width: 64em) {
  .contact--wide {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
}

/* Photo with caption (About) --------------------------------------------- */

.photo {
  display: grid;
  gap: var(--space-1);
}

.photo img {
  width: 100%;
  border: 1px solid var(--rule);
}

.photo figcaption,
.gallery figcaption {
  font-size: var(--step--1);
  color: var(--steel);
}

.columns {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 64em) {
  .columns {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
}

/* Local table of contents (Logistics) ----------------------------------- */

.toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding: 0;
  list-style: none;
}

.toc a {
  font-weight: 600;
}

/* Gallery ---------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-4) var(--space-3);
  padding: 0;
  list-style: none;
}

.gallery__figure {
  display: grid;
  gap: var(--space-1);
}

.gallery__link {
  display: block;
  overflow: hidden;
  background: var(--rule);
  aspect-ratio: 4 / 3;
}

.gallery__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Portrait shots keep heads and stand signs in the 4:3 crop. */
  object-position: 50% 30%;
}

.gallery__link:hover img {
  opacity: 0.9;
}

.lightbox {
  width: min(100% - 2rem, 75rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  --focus: var(--signal);
}

.lightbox::backdrop {
  background: rgb(15 29 43 / 0.85);
}

.lightbox__body {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
}

.lightbox__image img {
  width: 100%;
  max-height: calc(100dvh - 11rem);
  object-fit: contain;
}

.lightbox__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.lightbox__caption {
  flex: 1 1 16rem;
  color: var(--on-ink);
}

.lightbox__controls {
  display: flex;
  gap: var(--space-1);
}

.lightbox .button {
  border-color: var(--paper);
  color: var(--paper);
  background: transparent;
}

.lightbox .button:hover {
  background: var(--paper);
  color: var(--ink);
}

/* Lock page scroll behind the open viewer. */
html:has(.lightbox[open]) {
  overflow: hidden;
}

/* Form ------------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 6px solid var(--ink);
}

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

.field label,
.choice legend {
  font-weight: 600;
}

.optional {
  font-weight: 400;
  color: var(--steel);
}

.hint {
  font-size: var(--step--1);
  color: var(--steel);
}

.field input,
.field textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--field);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

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

.field [aria-invalid="true"] {
  border: 2px solid var(--ink);
  box-shadow: inset 4px 0 0 var(--signal);
}

.error {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
}

.error::before {
  content: "! ";
  color: var(--ink);
}

.choice {
  margin: 0;
  padding: 0;
  border: 0;
}

.choice__options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 0.35rem var(--space-2);
  margin-top: 0.5rem;
}

.choice__options label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.25rem;
  font-weight: 400;
  cursor: pointer;
}

.choice__options input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--ink);
}

/* From → To joined by a signal line: the two fields read as one leg. */
.leg {
  display: grid;
  gap: var(--space-2);
}

.leg__line {
  display: none;
}

@media (min-width: 40em) {
  .leg {
    grid-template-columns: 1fr 2rem 1fr;
    align-items: start;
    gap: var(--space-1);
  }

  /* Sits level with the inputs: label line plus the label-to-input gap. */
  .leg__line {
    display: block;
    height: 3px;
    margin-top: calc(1.6em + 0.35rem + 1.375rem - 1.5px);
    background: var(--signal);
  }
}

.form__note {
  font-size: var(--step--1);
  color: var(--steel);
}

.honeypot {
  display: none;
}

.status {
  padding: var(--space-2);
  border-left: 6px solid var(--ink);
  background: var(--paper);
}

.status:empty {
  display: none;
}

.status--error {
  border-left-color: var(--signal);
}

.notice {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--signal);
}

.notice--success {
  border-left-color: var(--ink);
}

.captcha {
  min-height: 78px;
}

/* Home page request block: direct channels beside a short form ---------- */

.reach {
  display: grid;
  gap: var(--space-4);
}

/* Same reason as .contact: the captcha widget must not widen the column. */
.reach > * {
  min-width: 0;
}

@media (min-width: 64em) {
  .reach {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--space-5);
  }
}

.form__foot {
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.form__more {
  font-weight: 600;
}

/* Channels: call, messengers, email. Each is one link with a visible name. */
.channels {
  display: grid;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.channel {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  align-items: center;
  gap: 0 0.75rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}

.channel__icon {
  grid-row: span 2;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--baltic);
}

.channel__name {
  font: 600 var(--step-0) / 1.3 var(--font-head);
}

.channel__value {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--step--1);
  color: var(--steel);
}

.channel:hover .channel__name {
  text-decoration: underline;
}

@media (min-width: 40em) {
  .channels {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-3);
  }
}

/* Footer ----------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-4);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-4);
}

.site-footer h2 {
  margin-bottom: var(--space-1);
  font-size: var(--step-1);
}

.site-footer ul {
  padding: 0;
  list-style: none;
}

.site-footer li + li {
  margin-top: 0.35rem;
}

.site-footer__reg {
  margin-top: var(--space-1);
  color: var(--on-ink);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid #2c3d4e;
  color: var(--on-ink);
  font-size: var(--step--1);
}

@media (min-width: 48em) {
  .site-footer__grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}