/* ============================================================
   LC Global Industries Inc. — site styles
   Design system: "Cold freight"
   Ground: ice grey · Ink: cold near-black · Signal: flare orange
   Display: Archivo (semi-expanded) · Body: Public Sans · Data: IBM Plex Mono
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* colour */
  --ice: #edf0f2;
  --ice-deep: #e3e8eb;
  --paper: #ffffff;
  --slate: #161d22;
  --deep: #0e1418;
  --deep-2: #161f25;
  --steel: #55636d;
  --rule: #ccd5db;
  --rule-soft: #e1e7ea;
  --rule-dark: #2a353d;
  --flare: #f04e23;
  --flare-rgb: 240, 78, 35;
  --flare-ink: #c2381a;
  /* the signal orange is for graphics and rules; filled buttons need a
     darker shade so white label text clears 4.5:1 (#f04e23 gives 3.61) */
  --flare-fill: #d13f17;
  --flare-wash: #fdeee9;
  --on-deep: #e7ecef;
  --on-deep-dim: #9aa8b1;

  /* type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* geometry */
  --r: 2px;
  --r-lg: 4px;
  --gutter: clamp(20px, 5vw, 56px);
  --measure: 62ch;
  --shell: 1240px;

  /* rhythm */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}


/* ---------- Brand palette — LCglobal_brand/design-system/tokens ----------
   Applies the official token set: primary #0E3A5F, teal #14A38B, mid blue
   #2C6FB3, the neutral ramp and the dark-UI surfaces, plus Poppins with
   italic headings (the brand's "movement" voice, echoing the wordmark).

   Three values are shifted, and only as far as AA needs — the brand hue is
   kept, the lightness is not:
     · neutral.500 #6B7A88 gives 4.03:1 on neutral.100  -> #5C6B79
     · white on teal #14A38B gives 3.16:1               -> fill #0F8570
     · teal as small text on light gives 2.89:1         -> ink  #0C7060
   #14A38B itself is untouched wherever it is a graphic (3.71:1 on the navy
   background, which clears the 3:1 graphics threshold). */
[data-brand="lc"] {
  --ice: #f3f5f7;
  --ice-deep: #e2e7ec;
  --paper: #ffffff;
  --slate: #1f2d38;
  --deep: #0a2440;
  --deep-2: #15456e;
  --steel: #5c6b79;
  --rule: #c7d0d7;
  --rule-soft: #e2e7ec;
  --rule-dark: #3e5e7e;
  --flare: #14a38b;
  --flare-rgb: 20, 163, 139;
  --flare-ink: #0c7060;
  --flare-fill: #0f8570;
  --flare-wash: #eaf6f3;
  --on-deep: #ffffff;
  --on-deep-dim: #a9c2d6;

  --display: "Poppins", system-ui, sans-serif;
  --body: "Poppins", system-ui, sans-serif;

  --r: 4px;
  --r-lg: 8px;
}

/* Poppins is not a variable font here, so the width axis has no effect and
   the display sizes need a touch less negative tracking than Archivo. */
[data-brand="lc"] .display,
[data-brand="lc"] .brand__name,
[data-brand="lc"] .market__code,
[data-brand="lc"] .pull,
[data-brand="lc"] .row__title,
[data-brand="lc"] .slat__title {
  font-variation-settings: normal;
  font-weight: 700;
  letter-spacing: -0.015em;
}
/* headings carry the italic; body copy stays roman */
[data-brand="lc"] .display,
[data-brand="lc"] .pull,
[data-brand="lc"] .market__code,
[data-brand="lc"] .brand__name { font-style: italic; }

[data-brand="lc"] .btn { border-radius: 100px; }
[data-brand="lc"] .langset { border-radius: 100px; }
[data-brand="lc"] .btn--primary:hover { background: #0c7060; }
[data-brand="lc"] .field input,
[data-brand="lc"] .field select,
[data-brand="lc"] .field textarea { border-color: #aab6c0; }

[data-brand="lc"] .mapx .mp-prov { fill: #133c62; stroke: #3e5e7e; }
[data-brand="lc"] .mapx .mp-other { fill: #0d2c4c; stroke: #24486d; }
[data-brand="lc"] .mapx .mp-grid { stroke: #16385a; }
[data-brand="lc"] .mapx .mp-lat,
[data-brand="lc"] .mapx .mp-prov-label { fill: #8fabc4; }
[data-brand="lc"] .mapx .mp-title-txt { stroke: rgba(10, 36, 64, 0.92); }
[data-brand="lc"] .mapx .mp-base-name { stroke: var(--deep); }
[data-brand="lc"] .mapx__tip { background: rgba(21, 69, 110, 0.95); border-color: #3e5e7e; }

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

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

body {
  margin: 0;
  background: var(--ice);
  color: var(--slate);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

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

::selection {
  background: var(--flare);
  color: #fff;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--slate);
  color: #fff;
  padding: 12px 20px;
  font: 500 14px/1 var(--body);
}
.skip:focus { left: 12px; top: 12px; }

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

/* ---------- 3. Type ---------- */
.display {
  font-family: var(--display);
  font-variation-settings: "wdth" 112, "wght" 700;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 0.99;
  text-wrap: balance;
}

.d1 { font-size: clamp(2.5rem, 4.7vw, 4.25rem); }
.d2 { font-size: clamp(2rem, 3.9vw, 3.1rem); line-height: 1.04; }
.d3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; }

.lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--steel);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--s5); }
.prose strong { font-weight: 600; color: var(--slate); }

.mono {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--steel);
  font-weight: 500;
}

.mono-num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.flare-text { color: var(--flare-ink); }

/* ---------- 4. Shell & grid ---------- */
.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: clamp(56px, 8vw, 104px); }
.band--tight { padding-block: clamp(40px, 5.5vw, 68px); }
.band--dark { background: var(--deep); color: var(--on-deep); }
.band--paper { background: var(--paper); }
.band--dark .mono { color: var(--on-deep-dim); }
.band--dark .lede { color: var(--on-deep-dim); }

.cols {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s6);
}

/* section marker sitting on a hairline — the document device */
.marker {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  border-top: 1px solid var(--rule);
  padding-top: var(--s3);
  margin-bottom: var(--s7);
}
.band--dark .marker { border-color: var(--rule-dark); }
.marker__id {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--flare-ink);
  font-weight: 500;
  flex: none;
}
.band--dark .marker__id { color: var(--flare); }
.marker__label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}
.band--dark .marker__label { color: var(--on-deep-dim); }


/* ---------- 4b. Utility bar ----------
   Los dos competidores directos mantienen el contacto visible en todo momento,
   y tienen razón: un comprador mayorista decide escribir en cualquier punto de
   la página, no solo al final. Franja fina, sin color de acento salvo el icono. */
.util {
  background: var(--slate);
  color: #b7c2c9;
  border-bottom: 1px solid var(--slate);
}
.util__in {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 7px var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
}
.util__wa,
.util__link {
  color: #dfe6ea;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-block: 5px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.util__wa svg { color: var(--flare); flex: none; }
.util__wa:hover, .util__link:hover { border-bottom-color: var(--flare); color: #fff; }
.util__hours { margin-left: auto; color: #8996a0; }

@media (max-width: 700px) {
  .util__in { gap: var(--s4); font-size: 0.5625rem; }
  .util__link, .util__hours { display: none; }
}

/* ---------- 5. Header ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(237, 240, 242, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.masthead__in {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex: none;
}
.brand__mark { width: 34px; height: 34px; flex: none; }
/* the mark carries the accent as a hard-coded fill so it survives being
   copied around; the theme takes it back over here */
.brand__mark [fill="#F04E23"] { fill: var(--flare); }
.brand__mark [stroke="#F04E23"] { stroke: var(--flare); }
.brand__type { display: flex; flex-direction: column; gap: 2px; }
.brand__name {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}
.brand__sub {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.22em;
  color: var(--steel);
  line-height: 1;
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin-left: auto;
}

.nav__link {
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  color: var(--slate);
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.nav__link:hover { border-bottom-color: var(--flare); }
.nav__link[aria-current="page"] {
  border-bottom-color: var(--slate);
}

.langset {
  display: flex;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  flex: none;
}
.langset__btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 9px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rule);
  color: var(--steel);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.langset__btn:last-child { border-right: 0; }
.langset__btn:hover { background: var(--ice-deep); color: var(--slate); }
.langset__btn[aria-pressed="true"] {
  background: var(--slate);
  color: #fff;
}

.burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  cursor: pointer;
  margin-left: auto;
}
.burger span {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--slate);
  position: relative;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px; height: 1.5px;
  background: var(--slate);
  transition: transform 0.2s var(--ease);
}
.burger span::before { top: -5.5px; }
.burger span::after { top: 5.5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 13px 22px;
  border-radius: var(--r);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease),
              border-color 0.16s var(--ease), transform 0.16s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--flare-fill); color: #fff; }
.btn--primary:hover { background: #b8360f; }

.btn--ink { background: var(--slate); color: #fff; }
.btn--ink:hover { background: #000; }

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

.band--dark .btn--ghost { color: var(--on-deep); border-color: var(--rule-dark); }
.band--dark .btn--ghost:hover { border-color: var(--on-deep-dim); background: var(--deep-2); }

.btn__tick {
  width: 7px; height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  flex: none;
  transition: transform 0.16s var(--ease);
}
.btn:hover .btn__tick { transform: rotate(45deg) translate(2px, -2px); }

.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
}

/* ---------- 6a. Opening band: the map ----------
   The page opens on the thing no competitor can copy: the actual service
   points, at their actual coordinates. Borders are drawn from the real
   administrative lines; the divide and the coast are generalised, and the
   SVG description says so. */
.mapx {
  background: var(--deep);
  color: var(--on-deep);
  padding-block: clamp(16px, 2vw, 24px) clamp(14px, 1.8vw, 22px);
  border-bottom: 1px solid var(--rule-dark);
}

.mapx__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.mapx__eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--flare);
}
.mapx__legend {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-deep-dim);
  flex-wrap: wrap;
}
.mapx__key { width: 7px; height: 7px; border-radius: 50%; background: var(--on-deep); flex: none; }
.mapx__key:not(:first-child) { margin-left: var(--s4); }
.mapx__key--hard { background: var(--flare); }

/* the map runs edge to edge; only the type stays inside the shell */
.mapx__stage {
  position: relative;
  width: 100%;
  padding-inline: clamp(8px, 2vw, 28px);
}

.mapx__svg {
  /* max-height caps the height and, with height:auto, pulls the width in with
     it — which is exactly what we want: half the viewport tall and narrower
     than full bleed, so the map stops swallowing the whole first screen.
     overflow must stay hidden: the rest of Canada sits far outside the final
     viewBox, and visible overflow widened the page by ~17px. */
  width: 100%;
  max-width: 1040px;
  max-height: 50vh;
  height: auto;
  margin-inline: auto;
  overflow: hidden;
}

.mapx .mp-prov {
  fill: #19222a;
  stroke: #44535e;
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.mapx .mp-grid { stroke: #26313a; stroke-width: 1; }
.mapx .mp-lat {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  fill: #6d7d87;
}
/* provinces are hoverable surfaces, not just outlines */
.mapx .mp-province { cursor: pointer; outline: none; }
.mapx .mp-prov { transition: fill 0.2s var(--ease-out), stroke 0.2s var(--ease-out); }
.mapx .mp-province:hover .mp-prov,
.mapx .mp-province:focus-visible .mp-prov,
.mapx .mp-province.is-on .mp-prov {
  fill: rgba(var(--flare-rgb), 0.16);
  stroke: rgba(var(--flare-rgb), 0.62);
}
.mapx .mp-province:focus-visible .mp-prov { stroke-dasharray: 5 4; }

.mapx .mp-prov-label {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.2em;
  fill: #8b99a3;
  text-anchor: middle;
  pointer-events: none;
  /* halo so the dots never sit on top of the letters */
  paint-order: stroke fill;
  stroke: var(--deep);
  stroke-width: 5px;
  stroke-linejoin: round;
  transition: fill 0.2s var(--ease-out);
}
.mapx .mp-province:hover .mp-prov-label,
.mapx .mp-province:focus-visible .mp-prov-label,
.mapx .mp-province.is-on .mp-prov-label { fill: var(--flare); }

.mapx .mp-hit { fill: transparent; }
.mapx .mp-dot { fill: var(--on-deep); r: 4.2; transition: r 0.16s var(--ease-out); }
.mapx .mp-pt--hard .mp-dot { fill: var(--flare); }
.mapx .mp-ring {
  fill: none;
  stroke: var(--on-deep);
  stroke-width: 1.2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.55);
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.mapx .mp-pt--hard .mp-ring { stroke: var(--flare); }
.mapx .mp-pt { cursor: pointer; outline: none; }
.mapx .mp-pt:hover .mp-ring,
.mapx .mp-pt:focus-visible .mp-ring,
.mapx .mp-pt.is-on .mp-ring { opacity: 1; transform: none; }
.mapx .mp-pt:hover .mp-dot,
.mapx .mp-pt:focus-visible .mp-dot,
.mapx .mp-pt.is-on .mp-dot { r: 5.4; }
.mapx .mp-pt:focus-visible .mp-ring { stroke-dasharray: 3 3; }

/* points arrive south to north, once, on load */
.mapx.is-routing .mp-dot {
  animation: mpIn 320ms var(--ease-out) both;
  animation-delay: calc(var(--i) * 34ms + 520ms);
}
@keyframes mpIn {
  from { opacity: 0; transform: scale(0.2); }
  to   { opacity: 1; transform: none; }
}
.mapx .mp-dot { transform-box: fill-box; transform-origin: center; }

/* the detail panel floats over the map at the point you are pointing at */
.mapx__tip {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 262px;
  background: rgba(20, 28, 34, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid #3c4a55;
  border-radius: 14px;
  padding: var(--s5) var(--s5) var(--s5);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}
.mapx__tip.is-on { opacity: 1; transform: none; }
.mapx__cardname {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--on-deep);
  margin-bottom: 4px;
}
.mapx__cardregion {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flare);
  margin-bottom: var(--s4);
}
.mapx__cardrows .spec { border-color: var(--rule-dark); grid-template-columns: 86px minmax(0, 1fr); font-size: 13.5px; }
.mapx__cardrows .spec__k { color: #5c6b75; font-size: 0.5625rem; }
.mapx__cardrows .spec__v { color: var(--on-deep); }
.mapx__cardnote {
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-deep-dim);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule-dark);
}

.mapx__hint {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8b99a3;
  margin-right: auto;
  margin-left: var(--s5);
}
@media (max-width: 700px) { .mapx__hint { display: none; } }

.mapx__line {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--on-deep-dim);
  max-width: 64ch;
  margin-top: var(--s3);
}

@media (max-width: 900px) {
  /* a tooltip that chases a fingertip is unusable, and docking it over a
     short map hides the map — so on small screens it sits below it */
  .mapx__tip {
    position: static;
    top: auto !important;
    left: auto !important;
    width: auto;
    max-width: 460px;
    margin: var(--s4) auto 0;
    display: none;
    opacity: 1;
    transform: none;
    box-shadow: none;
  }
  .mapx__tip.is-on {
    display: block;
    animation: mpTipIn 200ms var(--ease-out) both;
  }
  @keyframes mpTipIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  .mapx .mp-hit { r: 20; }
  .mapx .mp-dot { r: 5; }
  .mapx .mp-lat { font-size: 15px; }
  .mapx .mp-prov-label { font-size: 26px; letter-spacing: 0.14em; }
}


/* ---------- 6a-bis. Opening sequence ----------
   The map loads showing all of Canada, shades the three provinces we work
   in, then zooms to them and settles. Province geometry is real boundary
   data; the zoom is a transform on one group, so it is a single composited
   animation rather than a redraw. */
.mapx__zoom {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translate(var(--z-tx)) translate(0, var(--z-ty)) scale(var(--z-sc));
  transition: transform 1300ms cubic-bezier(0.66, 0, 0.24, 1);
}
.mapx.is-zoomed .mapx__zoom { transform: none; }

/* the rest of the country: present for the establishing shot, gone after */
.mapx .mp-other {
  fill: #141b21;
  stroke: #2c3841;
  stroke-width: 3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mapx .mp-others {
  opacity: 1;
  transition: opacity 900ms ease;
}
.mapx.is-zoomed .mp-others { opacity: 0; }
/* once faded, drop it from rendering entirely — nothing left to paint or measure */
.mapx.is-ready .mp-others { display: none; }

/* the shading beat, before the camera moves */
.mapx.is-shaded:not(.is-zoomed) .mp-prov {
  fill: rgba(var(--flare-rgb), 0.30);
  stroke: rgba(var(--flare-rgb), 0.85);
}
.mapx .mp-prov { vector-effect: non-scaling-stroke; }

/* nothing is interactive or legible until the camera has arrived */
.mapx .mp-points, .mapx .mp-grat, .mapx .mp-prov-label { opacity: 0; }
.mapx .mp-points { pointer-events: none; }
.mapx.is-ready .mp-points, .mapx.is-ready .mp-grat, .mapx.is-ready .mp-prov-label {
  opacity: 1;
  transition: opacity 500ms ease;
}
.mapx.is-ready .mp-points { pointer-events: auto; }
.mapx.is-ready .mp-prov-label { transition: opacity 500ms ease, fill 0.2s var(--ease-out); }



/* the establishing shot names what it is highlighting, then gets out of the
   way. Lives outside .mapx__zoom so the camera move never drags it along. */
.mapx .mp-title {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  transform-box: view-box;
  transform-origin: center;
  pointer-events: none;
}
.mapx.is-shaded:not(.is-zoomed) .mp-title { opacity: 1; transform: none; }
.mapx .mp-title-txt {
  font-family: var(--display);
  font-variation-settings: "wdth" 112, "wght" 700;
  /* 27u is the largest that fits inside the three provinces at the
     establishing scale — measured, not guessed. Do not raise it. */
  font-size: 27px;
  letter-spacing: -0.02em;
  text-anchor: middle;
  fill: var(--on-deep);
  paint-order: stroke fill;
  stroke: var(--deep);
  stroke-width: 6px;
  stroke-linejoin: round;
}
.mapx .mp-title-rule {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-anchor: middle;
  /* orange on an orange fill has no contrast — the kicker goes light and
     subordinate, and the title keeps the weight */
  fill: rgba(255, 255, 255, 0.74);
  paint-order: stroke fill;
  stroke: rgba(10, 15, 18, 0.55);
  stroke-width: 3px;
  stroke-linejoin: round;
}

@media (max-width: 760px) {
  /* the whole SVG scales down here, so the title would render around 8px.
     Enlarging it would push it outside the provinces, so it steps aside —
     the eyebrow above the map already names the region legibly. */
  .mapx .mp-title { display: none; }
}

/* ---- the base, and the runs that leave it ---- */
.mapx .mp-base { opacity: 0; transition: opacity 420ms ease; }
.mapx.is-based .mp-base { opacity: 1; }
.mapx .mp-base-halo { fill: rgba(var(--flare-rgb), 0.10); }
.mapx .mp-base-ring {
  fill: none;
  stroke: var(--flare);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.mapx.is-based .mp-base-ring { animation: basePulse 2.4s ease-out infinite; }
@keyframes basePulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
.mapx .mp-base-ring { transform-box: fill-box; transform-origin: center; }
.mapx .mp-base-dot { fill: var(--flare); }
.mapx .mp-base-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--flare);
}
.mapx .mp-base-name {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  fill: var(--on-deep);
  paint-order: stroke fill;
  stroke: var(--deep);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.mapx .mp-route {
  fill: none;
  stroke: var(--flare);
  stroke-width: 1.3;
  stroke-linecap: round;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
.mapx.is-routing .mp-route {
  animation: routeDraw 640ms cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: calc(var(--i) * 34ms);
}
@keyframes routeDraw { to { stroke-dashoffset: 0; } }

/* once the story is told the routes drop back to context, so the nine
   hard-access points are not competing with 37 orange lines */
.mapx .mp-routes { transition: opacity 700ms ease; }
.mapx.is-ready .mp-routes { opacity: 0.22; }

/* ---------- 6b. Opening band: the coverage, by latitude ----------
   The page opens on the one thing no competitor can copy — the actual
   service points, plotted against the latitude they sit at. It reads
   before a word does: this business goes a long way north. */
/* ---------- 6c. Coverage band: the three provinces, apart ----------
   Replaces an earlier latitude scatter chart. The chart was accurate but it
   was a different drawing language from the opening map, so the coverage page
   read as two unrelated diagrams. These panels reuse the map's own geometry:
   same projection, same silhouettes, same dots. */
.pvband {
  background: var(--deep);
  color: var(--on-deep);
  padding-block: clamp(26px, 3.4vw, 44px) clamp(22px, 2.8vw, 34px);
  border-bottom: 1px solid var(--rule-dark);
}
.pvband__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}
.pvband__eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--flare);
}
.pvband__legend {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-deep-dim);
}
.pvband__key {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
}
.pvband__key:not(:first-child) { margin-left: var(--s4); }
.pvband__key--hard { background: var(--flare); }

/* Columns are proportional to each province's own aspect ratio, so all three
   drawings render at the same height AND fill their column — with equal
   columns the two tall narrow provinces floated in half-empty frames.
   The numbers are width/height of each panel's viewBox:
   BC 1.21 (the coast reaches far west, the Rockies border far east),
   AB 0.58, SK 0.51. */
.pvgrid {
  display: grid;
  grid-template-columns: 1.21fr 0.58fr 0.51fr;
  gap: clamp(16px, 2.6vw, 40px);
  align-items: end;
}
.pv { margin: 0; }
/* height:auto lets the viewBox aspect set the height from the column width.
   Because the columns above are cut to those same aspects, the three drawings
   land at the same height on their own and each one fills its frame — a fixed
   height instead left the narrow provinces floating in empty boxes. */
.pv__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.pv-shape {
  fill: rgba(255, 255, 255, 0.045);
  stroke: rgba(255, 255, 255, 0.34);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pv-dot {
  fill: #ffffff;
  opacity: 0;
  animation: pvIn 420ms var(--ease-out) forwards;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 140ms var(--ease-out);
}
.pv-dot--hard { fill: var(--flare); }
@keyframes pvIn { to { opacity: 1; } }
/* stagger north to south so the eye is led down the province, not scattered.
   nth-child counts the silhouette path too, so the first point is child 2. */
.pv-pt:nth-child(3)  .pv-dot { animation-delay: 50ms; }
.pv-pt:nth-child(4)  .pv-dot { animation-delay: 100ms; }
.pv-pt:nth-child(5)  .pv-dot { animation-delay: 150ms; }
.pv-pt:nth-child(6)  .pv-dot { animation-delay: 200ms; }
.pv-pt:nth-child(7)  .pv-dot { animation-delay: 250ms; }
.pv-pt:nth-child(8)  .pv-dot { animation-delay: 300ms; }
.pv-pt:nth-child(9)  .pv-dot { animation-delay: 350ms; }
.pv-pt:nth-child(10) .pv-dot { animation-delay: 400ms; }
.pv-pt:nth-child(n+11) .pv-dot { animation-delay: 450ms; }

/* the dots are small on purpose; the hit circle is what a finger actually
   has to land on, so it is sized well past the visible mark */
.pv-hit { fill: transparent; }
.pv-pt { cursor: pointer; outline: none; }
.pv-pt:hover .pv-dot,
.pv-pt.is-on .pv-dot { transform: scale(1.55); }
.pv-pt:focus-visible .pv-dot {
  transform: scale(1.55);
  stroke: var(--flare);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* ---- the floating label ---- */
.pvstage { position: relative; }
.pvtip {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  max-width: 230px;
  background: rgba(20, 28, 34, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid #3c4a55;
  border-radius: 12px;
  padding: 10px var(--s4) 11px;
  box-shadow: var(--shadow-float, 0 20px 46px rgba(0, 0, 0, 0.55));
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px) scale(0.98);
  transition: opacity 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.pvtip.is-on { opacity: 1; transform: none; }
.pvtip__name {
  font-family: var(--display);
  font-variation-settings: "wdth" 106, "wght" 600;
  font-size: 1rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--on-deep);
}
.pvtip__acc {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flare);
  margin-top: 3px;
}
.pvband__hint {
  margin-top: var(--s5);
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-deep-dim);
}

.pv__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule-dark);
  flex-wrap: wrap;
}
.pv__name {
  font-family: var(--display);
  font-variation-settings: "wdth" 106, "wght" 600;
  font-size: clamp(13px, 1.3vw, 16px);
  letter-spacing: -0.01em;
}
.pv__num {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-deep-dim);
  white-space: nowrap;
}
.pvband__line {
  margin-top: var(--s6);
  max-width: 62ch;
  color: var(--on-deep-dim);
  font-size: 14.5px;
  line-height: 1.6;
}
@media (max-width: 700px) {
  /* three side by side stop being readable well before they stop fitting.
     BC takes the full width on its own; the two narrow provinces pair up. */
  .pvgrid { grid-template-columns: 0.58fr 0.51fr; gap: var(--s5); }
  .pv:first-child { grid-column: 1 / -1; }
  /* on its own row BC would otherwise stretch to a band the width of the page */
  .pv:first-child .pv__svg { max-width: 74%; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-dot { opacity: 1; animation: none; }
}
@media (hover: none) {
  /* no pointer to follow, and a finger would cover a label placed at the dot,
     so on touch it parks in the top-left corner of the row instead */
  .pvtip { left: 0 !important; top: 0 !important; }
}

.northing {
  background: var(--deep);
  color: var(--on-deep);
  padding-block: clamp(26px, 3.4vw, 44px) clamp(22px, 2.8vw, 34px);
  border-bottom: 1px solid var(--rule-dark);
}

.northing__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}

.northing__eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--flare);
}

.northing__legend {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-deep-dim);
  flex-wrap: wrap;
}
.northing__key {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--on-deep);
  flex: none;
}
.northing__key:not(:first-child) { margin-left: var(--s4); }
.northing__key--hard { background: var(--flare); }

.northing__svg {
  width: 100%;
  height: auto;
  max-height: 46vh;
  min-height: 240px;
  overflow: visible;
}

.northing .nx-grid { stroke: var(--rule-dark); stroke-width: 1; }
.northing .nx-grid--60 { stroke: #3a4750; stroke-dasharray: 3 4; }
.northing .nx-axis { stroke: var(--rule-dark); stroke-width: 1; }
.northing .nx-lat,
.northing .nx-count,
.northing .nx-note {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  fill: #6d7d87;
}
.northing .nx-lat { text-anchor: end; }
.northing .nx-note { text-anchor: end; text-transform: uppercase; }
.northing .nx-prov {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 600;
  font-size: 15px;
  fill: var(--on-deep);
}
.northing .nx-name {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  fill: var(--on-deep-dim);
}
.northing .nx-dot { fill: var(--on-deep); }
.northing .nx-dot--hard { fill: var(--flare); }

/* points arrive south to north, once, on load */
.northing .nx-dot,
.northing .nx-name {
  opacity: 0;
  animation: nxIn 320ms var(--ease-out) both;
  animation-delay: calc(160ms + var(--i) * 22ms);
}
@keyframes nxIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.northing .nx-name { animation-name: nxFade; }
@keyframes nxFade { from { opacity: 0; } to { opacity: 1; } }

.northing__line {
  font-size: 15px;
  line-height: 1.55;
  color: var(--on-deep-dim);
  max-width: 62ch;
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-dark);
}

.northing__compact { display: none; }

@media (max-width: 760px) {
  /* the chart drops below legibility at this width — same facts, as type */
  .northing__svg { display: none; }
  .northing__compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--rule-dark);
    border-left: 1px solid var(--rule-dark);
  }
  .northing__compact > div {
    border-right: 1px solid var(--rule-dark);
    border-bottom: 1px solid var(--rule-dark);
    padding: var(--s4) var(--s3) var(--s5);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .northing__cprov {
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    color: var(--flare);
  }
  .northing__cnum {
    font-family: var(--display);
    font-variation-settings: "wdth" 116, "wght" 700;
    font-size: 2.1rem;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--on-deep);
  }
  .northing__line { font-size: 14.5px; }
  .northing__legend { display: none; }
}

/* ---------- 7. Hero ---------- */
.hero { padding-block: clamp(48px, 7vw, 86px) clamp(48px, 6vw, 76px); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: var(--s5);
}
.hero__eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--flare);
}

.hero__title { margin-bottom: var(--s5); }
.hero__title em {
  font-style: normal;
  color: var(--flare-ink);
}

.hero__lede { margin-bottom: var(--s6); }

.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5) var(--s4);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}
.hero__metaitem dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 5px;
}
.hero__metaitem dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ---------- 8. Ledger (signature) ---------- */
.ledger {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.ledger__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.ledger__title {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
}
.ledger__count {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}

.ledger__scroll { max-height: 424px; overflow: auto; overscroll-behavior: contain; }
.ledger__place { overflow-wrap: break-word; }
/* the hero ledger reads as a printed manifest — no scrollbox inside it */
.ledger--full .ledger__scroll { max-height: none; overflow: visible; }

.ledger table { font-size: 13.5px; }
.ledger thead th {
  position: sticky;
  top: 0;
  background: var(--ice);
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
  font-weight: 500;
  text-align: left;
  padding: 8px 18px;
  border-bottom: 1px solid var(--rule);
  z-index: 1;
}
.ledger tbody td {
  padding: 9px 18px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody tr { transition: background 0.12s var(--ease); }
.ledger tbody tr:hover { background: var(--flare-wash); }

.ledger__prov {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--steel);
  width: 44px;
  border-left: 2px solid transparent;
  padding-left: 16px !important;
}
.ledger tbody tr:hover .ledger__prov {
  border-left-color: var(--flare);
  color: var(--flare-ink);
}
.ledger__place { font-weight: 500; }
.ledger__class {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--steel);
  text-align: right;
  white-space: nowrap;
}
/* the access table on the ordering page carries sentences, not codes: it needs
   normal wrapping and a readable measure inside the same ledger frame */
.ledger__body {
  color: var(--steel);
  font-size: 14.5px;
  line-height: 1.5;
  white-space: normal;
  vertical-align: top;
}

.ledger__foot {
  padding: 14px 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--steel);
  background: var(--ice);
}

/* ---------- 9. Corridor schematic ---------- */
.corridor {
  border: 1px solid var(--rule-dark);
  border-radius: var(--r-lg);
  background: var(--deep-2);
  padding: clamp(24px, 4vw, 44px);
}
.corridor svg { width: 100%; height: auto; }
.corridor .cx-rule { stroke: var(--rule-dark); stroke-width: 1; }
.corridor .cx-path {
  stroke: var(--flare);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
}
.is-drawn .corridor .cx-path { animation: draw 1.5s var(--ease) forwards; }
.is-drawn .corridor .cx-path--b { animation-delay: 0.25s; }
.is-drawn .corridor .cx-path--c { animation-delay: 0.5s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.corridor .cx-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  fill: var(--on-deep-dim);
}
.corridor .cx-node {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 600;
  font-size: 14px;
  fill: var(--on-deep);
}
.corridor .cx-box { fill: none; stroke: var(--rule-dark); stroke-width: 1; }
.corridor .cx-dot { fill: var(--flare); }

/* ---------- 10. Content blocks ---------- */
.stack > * + * { margin-top: var(--s5); }
.stack-lg > * + * { margin-top: var(--s7); }

.rows { border-top: 1px solid var(--rule); }
.band--dark .rows { border-color: var(--rule-dark); }

.row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--s5);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.band--dark .row { border-color: var(--rule-dark); }
.row__id {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--flare-ink);
  padding-top: 5px;
}
.band--dark .row__id { color: var(--flare); }
.row__title {
  font-family: var(--display);
  font-variation-settings: "wdth" 106, "wght" 600;
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.row__body { color: var(--steel); font-size: 15.5px; }
.band--dark .row__body { color: var(--on-deep-dim); }

.slats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.band--dark .slats { border-color: var(--rule-dark); }
.slat {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s5) var(--s5) var(--s6);
  background: var(--paper);
  transition: background 0.16s var(--ease);
}
.band--dark .slat { border-color: var(--rule-dark); background: var(--deep-2); }
.slat:hover { background: var(--flare-wash); }
.band--dark .slat:hover { background: #1c262d; }
.slat__id {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--steel);
  display: block;
  margin-bottom: var(--s4);
}
.band--dark .slat__id { color: var(--on-deep-dim); }
.slat__title {
  font-family: var(--display);
  font-variation-settings: "wdth" 106, "wght" 600;
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  margin-bottom: var(--s2);
}
.slat__body { font-size: 14.5px; color: var(--steel); line-height: 1.55; }
.band--dark .slat__body { color: var(--on-deep-dim); }

/* market blocks */
.market {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 56px);
  padding-block: var(--s8);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.band--dark .market { border-color: var(--rule-dark); }
.market:first-of-type { border-top: 1px solid var(--rule); }
.band--dark .market:first-of-type { border-color: var(--rule-dark); }

.market__code {
  font-family: var(--display);
  font-variation-settings: "wdth" 118, "wght" 700;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--slate);
  margin-bottom: var(--s3);
}
.band--dark .market__code { color: var(--on-deep); }
.market__region {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flare-ink);
}
.band--dark .market__region { color: var(--flare); }

.spec {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--s4);
  padding-block: 11px;
  border-top: 1px solid var(--rule-soft);
  font-size: 15px;
}
.band--dark .spec { border-color: var(--rule-dark); }
.spec__k {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--steel);
  padding-top: 4px;
}
.band--dark .spec__k { color: var(--on-deep-dim); }
.spec__v { color: var(--slate); }
.band--dark .spec__v { color: var(--on-deep); }

/* pull statement */
.pull {
  font-family: var(--display);
  font-variation-settings: "wdth" 104, "wght" 600;
  font-size: clamp(1.4rem, 2.7vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: -0.024em;
  max-width: 22ch;
  text-wrap: balance;
}

.tagset { display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 5px 9px;
  color: var(--steel);
}
.band--dark .tag { border-color: var(--rule-dark); color: var(--on-deep-dim); }

.note {
  border-left: 2px solid var(--flare);
  padding: 2px 0 2px var(--s4);
  font-size: 14.5px;
  color: var(--steel);
  max-width: var(--measure);
}
.band--dark .note { color: var(--on-deep-dim); }

/* the supplier door: the one place on the home page that still speaks to a
   brand. Kept to a single quiet row so it reads as a side entrance, not as
   the page's purpose. */
.supdoor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  padding: var(--s6) var(--s6) var(--s6) var(--s5);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--flare);
  background: var(--paper);
}
.supdoor__k {
  font-family: var(--mono);
  font-size: var(--fs-mono, 0.6875rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--flare-ink);
  margin-bottom: var(--s2);
}
.supdoor__h { margin-bottom: var(--s3); }
.supdoor__b { color: var(--steel); max-width: 62ch; font-size: 15.5px; }
.supdoor .btn { flex: none; }
@media (max-width: 720px) {
  .supdoor { flex-direction: column; align-items: flex-start; gap: var(--s5); }
}

/* ---------- 11. Forms ---------- */
/* the contact form sits on a dark band: its labels inherit the light-ground
   grey and drop to 3.0:1 there, so the dark context restates them */
.band--dark .field__label,
.band--dark .check,
.band--dark .form .mono { color: var(--on-deep-dim); }
.band--dark .field__req { color: var(--flare); }
.band--dark .field input::placeholder,
.band--dark .field textarea::placeholder { color: #7b8891; }

.form { display: grid; gap: var(--s5); max-width: 640px; }
.form__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s5);
}
.field { display: grid; gap: 7px; }
.field__label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
}
.field__req { color: var(--flare-ink); }
.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: 15.5px;
  color: var(--slate);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 11px 13px;
  width: 100%;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field textarea { resize: vertical; min-height: 118px; line-height: 1.55; }
.field select { appearance: none; background-image: none; cursor: pointer; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--flare);
  box-shadow: 0 0 0 3px rgba(var(--flare-rgb), 0.14);
}
.field input::placeholder,
.field textarea::placeholder { color: #9aa6ae; }

.check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  font-size: 14px;
  color: var(--steel);
  line-height: 1.5;
}
.check input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--flare); }

.form__status {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r);
  border: 1px solid var(--rule);
  background: var(--paper);
  display: none;
}
.form__status.is-on {
  display: block;
  animation: statusIn 240ms var(--ease-out) both;
}
@keyframes statusIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.form__status.is-ok { border-color: #1f7a4d; color: #14603a; background: #eef7f2; }
.form__status.is-err { border-color: var(--flare); color: var(--flare-ink); background: var(--flare-wash); }

/* ---------- 12. Footer ---------- */
.foot { background: var(--deep); color: var(--on-deep-dim); }
.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--s6);
  padding-block: var(--s8) var(--s7);
  border-bottom: 1px solid var(--rule-dark);
}
.foot__brand { display: flex; align-items: center; gap: 11px; margin-bottom: var(--s5); }
.foot__brand .brand__name { color: var(--on-deep); }
.foot__brand .brand__sub { color: var(--on-deep-dim); }
.foot__blurb { font-size: 14.5px; line-height: 1.6; max-width: 34ch; }
.foot__h {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--flare);
  margin-bottom: var(--s4);
}
.foot__list { display: grid; gap: 9px; }
.foot__list a { display: inline-block; padding-block: 3px; }
.foot__list a, .foot__list span {
  font-size: 14.5px;
  text-decoration: none;
  color: var(--on-deep-dim);
  overflow-wrap: anywhere;
}
.foot__list a:hover { color: var(--on-deep); text-decoration: underline; text-underline-offset: 3px; }
.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s5) var(--s6);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #8b99a3;
}
.foot__bottom a { text-decoration: none; }
.foot__bottom a:hover { color: var(--on-deep); }
.foot__legalnav { display: flex; gap: var(--s5); flex-wrap: wrap; }
.foot__legalnav a { display: inline-block; padding-block: 5px; }

/* ---------- 13. Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

/* page-load rise — the hero's left column, one orchestrated sequence that
   hands off to the ledger printing on the right. Runs once, on load only. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.rise { animation: rise 620ms var(--ease-out) both; }
.rise[data-rise="1"] { animation-delay: 0.06s; }
.rise[data-rise="2"] { animation-delay: 0.13s; }
.rise[data-rise="3"] { animation-delay: 0.21s; }
.rise[data-rise="4"] { animation-delay: 0.29s; }

/* grid entrance — decorative stagger, never blocks interaction */
.reveal .slat {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.reveal.is-in .slat { opacity: 1; transform: none; }
.reveal.is-in .slat:nth-child(1) { transition-delay: 0.04s; }
.reveal.is-in .slat:nth-child(2) { transition-delay: 0.09s; }
.reveal.is-in .slat:nth-child(3) { transition-delay: 0.14s; }
.reveal.is-in .slat:nth-child(4) { transition-delay: 0.19s; }
.reveal.is-in .slat:nth-child(5) { transition-delay: 0.24s; }
.reveal.is-in .slat:nth-child(6) { transition-delay: 0.29s; }

/* language swap — a short dip so ~100 nodes don't change under the reader */
main, .foot { transition: opacity 110ms linear; }
body.is-swapping main,
body.is-swapping .foot { opacity: 0.32; }

/* hero print-in: ledger rows arrive like a manifest printing */
.printin tbody tr {
  opacity: 0;
  animation: printrow 0.42s var(--ease) forwards;
}
@keyframes printrow {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 14. Responsive ---------- */
@media (max-width: 1040px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s7); }
  .foot__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 76px; }
  .burger { display: flex; }
  /* the panel used to teleport in on `display`. It now slides from the
     masthead edge it belongs to, and leaves the same way. */
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: var(--s3) var(--gutter) var(--s5);
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 200ms var(--ease-out),
                transform 200ms var(--ease-out),
                visibility 200ms;
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  .nav__link {
    padding-block: 15px;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 16px;
  }
  .nav__link:hover { border-bottom-color: var(--rule-soft); color: var(--flare-ink); }
  .nav .langset { margin-top: var(--s4); align-self: flex-start; }
  .masthead__in { position: relative; }

  /* the register drops its region column before it drops access —
     access is the operational fact, region is orientation */
  .ledger--reg thead th:nth-child(3),
  .ledger--reg tbody td:nth-child(3) { display: none; }

  /* the 12-column grid never collapsed: 11 gaps of 32px alone exceed a
     phone viewport, which pushed the whole site into horizontal scroll */
  .cols { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .cols > * { grid-column: 1 / -1 !important; }

  .row { grid-template-columns: 44px minmax(0, 1fr); }
  .row__body { grid-column: 2; }
  .market { grid-template-columns: 1fr; gap: var(--s5); padding-block: var(--s7); }
  .spec { grid-template-columns: 1fr; gap: 3px; }
  .foot__top { grid-template-columns: 1fr; gap: var(--s6); }
  .ledger__scroll { max-height: 360px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .ledger table { font-size: 12.5px; }
  .ledger thead th, .ledger tbody td { padding-inline: 11px; }
  .ledger__prov { width: 34px; padding-left: 10px !important; }
  .ledger__class { font-size: 9.5px; }
  .hero__meta { grid-template-columns: 1fr 1fr; gap: var(--s4); }
}

/* ---------- 15. Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .printin tbody tr { opacity: 1; }
  .corridor .cx-path { stroke-dashoffset: 0; }
  .mapx__zoom { transform: none !important; transition: none; }
  .mapx .mp-others, .mapx .mp-routes { display: none; }
  .mapx .mp-base { opacity: 1; }
  .mapx .mp-base-ring { animation: none; }
  .rise, .reveal .slat, .form__status.is-on,
  .northing .nx-dot, .northing .nx-name, .mapx .mp-dot, .mapx__tip.is-on {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .nav { transition: none; }
  body.is-swapping main,
  body.is-swapping .foot { opacity: 1; }
}

@media print {
  .masthead, .burger, .langset, .btn { display: none !important; }
  body { background: #fff; }
  .band { padding-block: 24px; }
}