/* CenterEdge Consulting. Built to the 2026 brand book: Forest Ink leads,
   Bone anchors, Char carries body copy, Oxide is the single accent.
   Fraunces for display, IBM Plex Sans for body, IBM Plex Mono for labels. */

/* ---- Metric-matched stand-ins, so nothing moves when the real fonts arrive ----

   The site's layout shift came entirely from text reflowing as webfonts landed. Two causes, both
   measured in Chromium against the live site by setting the same string at the same size in each
   font and comparing widths:

   1. A headline in plain Georgia is 22% wider than the same headline in Fraunces, so a three-line
      hero headline drew at a different width and the whole hero shuffled when Fraunces swapped in.
   2. IBM Plex Mono is 9% WIDER than Consolas, so the mono eyebrow above the headline drew on one
      line in the fallback and wrapped to two in Plex, pushing everything below it down 25 pixels.
      That one is easy to miss because a label looks too small to matter.

   size-adjust fixes both by scaling the stand-in to the same width as the real font. Fraunces needs
   one value per weight and style, because its width varies with weight far more than Georgia's does:
   Fraunces at 500 is 7% wider than at 300, so a single ratio measured at 300 leaves the 400-weight
   italic lede a full line out. That was the trap the first attempt fell into.

   Fraunces as a percentage of the fallback's width:

                  Georgia            Times New Roman
     weight    roman   italic       roman   italic
       300     82.0%   75.5%        89.3%   84.0%
       400     85.8%   80.7%        93.5%   89.8%
       500     87.7%   83.3%        95.6%   92.8%

   Two separate families rather than one with duplicate faces, deliberately. When two faces in the
   same family match a request equally, the later declaration wins, so a single family would hand
   Windows the Times numbers even though Georgia is installed. As separate families the stack decides:
   Georgia first, and if the system has no Georgia that family contributes nothing and Times is next.

   No ascent or descent overrides: every heading, lede and label here sets a unitless line-height, so
   the line box follows the font size rather than the font's own vertical metrics.

   Re-measure if a typeface ever changes. scripts/perf-check.mjs reports the shift and names the
   element that moved, which is how both of these were found. */
@font-face { font-family: 'Fraunces FB Georgia'; font-style: normal; font-weight: 300; src: local('Georgia'); size-adjust: 82.0%; }
@font-face { font-family: 'Fraunces FB Georgia'; font-style: normal; font-weight: 400; src: local('Georgia'); size-adjust: 85.8%; }
@font-face { font-family: 'Fraunces FB Georgia'; font-style: normal; font-weight: 500 900; src: local('Georgia'); size-adjust: 87.7%; }
@font-face { font-family: 'Fraunces FB Georgia'; font-style: italic; font-weight: 300; src: local('Georgia Italic'), local('Georgia-Italic'); size-adjust: 75.5%; }
@font-face { font-family: 'Fraunces FB Georgia'; font-style: italic; font-weight: 400; src: local('Georgia Italic'), local('Georgia-Italic'); size-adjust: 80.7%; }
@font-face { font-family: 'Fraunces FB Georgia'; font-style: italic; font-weight: 500 900; src: local('Georgia Italic'), local('Georgia-Italic'); size-adjust: 83.3%; }

@font-face { font-family: 'Fraunces FB Times'; font-style: normal; font-weight: 300; src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'), local('Tinos'); size-adjust: 89.3%; }
@font-face { font-family: 'Fraunces FB Times'; font-style: normal; font-weight: 400; src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'), local('Tinos'); size-adjust: 93.5%; }
@font-face { font-family: 'Fraunces FB Times'; font-style: normal; font-weight: 500 900; src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'), local('Tinos'); size-adjust: 95.6%; }
@font-face { font-family: 'Fraunces FB Times'; font-style: italic; font-weight: 300; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Liberation Serif Italic'); size-adjust: 84.0%; }
@font-face { font-family: 'Fraunces FB Times'; font-style: italic; font-weight: 400; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Liberation Serif Italic'); size-adjust: 89.8%; }
@font-face { font-family: 'Fraunces FB Times'; font-style: italic; font-weight: 500 900; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Liberation Serif Italic'); size-adjust: 92.8%; }

/* Consolas is the only common monospace narrower than Plex Mono; SF Mono, Menlo, Roboto Mono and
   DejaVu Sans Mono all sit at the same 0.6em advance, so they need no adjustment and the stack falls
   through to them unchanged. */
@font-face { font-family: 'Plex Mono FB'; src: local('Consolas'); size-adjust: 109.1%; }

:root {
  --ink: #1A2E2A;
  --ink-deep: #14261F;
  --ink-lift: #24423A;
  --bone: #F2EDE4;
  --char: #1F1E1B;
  --oxide: #B8513A;
  --cream: #E6DFD0;
  --stone: #807B70;
  --rule: rgba(31, 30, 27, .16);
  --rule-mid: rgba(31, 30, 27, .34);
  --rule-inv: rgba(242, 237, 228, .22);
  --bone-70: rgba(242, 237, 228, .74);
  --bone-50: rgba(242, 237, 228, .52);
  --display: 'Fraunces', 'Fraunces FB Georgia', 'Fraunces FB Times', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'Plex Mono FB', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --max: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --space: clamp(56px, 8vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bone);
  color: var(--char);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin: .25em 0; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
::selection { background: var(--oxide); color: var(--bone); }
:focus-visible { outline: 2px solid var(--oxide); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--bone); padding: .8rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Type ---- */
.display, h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -.02em;
  line-height: 1.04;
  margin: 0 0 .5em;
}
.display em, h1 em, h2 em, h3 em, .h1 em, .h2 em, .h3 em, .wm em { font-style: italic; font-weight: inherit; }
h1, .h1 { font-size: clamp(2.6rem, 5.4vw, 5rem); font-weight: 300; }
h2, .h2 { font-size: clamp(1.95rem, 3.4vw, 3.15rem); line-height: 1.08; letter-spacing: -.015em; }
h3, .h3 { font-size: clamp(1.3rem, 1.8vw, 1.7rem); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.lede { font-family: var(--display); font-style: italic; font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.45; letter-spacing: -.005em; }
.label, .num, .marker, .btn, .nav a, .brand small, .cite, .meta, .footer-cols dt, .form label, .form-note, .footer-bottom, .tag, .table-wrap th {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.5;
}
.label { color: var(--stone); }
.num { color: var(--oxide); }
.hair { width: 36px; height: 2px; background: var(--oxide); margin: 0 0 1.4rem; }
.muted { color: var(--stone); }
.mt0 { margin-top: 0 !important; }
.nb { white-space: nowrap; }
.small { font-size: .92rem; }
.geo { white-space: nowrap; }

/* ---- Layout ---- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--space) 0; }
.section + .section { padding-top: 0; }
.section.rule-top { border-top: 1px solid var(--rule); }
.marker {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: .7rem; margin-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--char);
  color: var(--char);
}
.marker span:last-child { color: var(--stone); text-align: right; }
.lead { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 72px); align-items: start; }
.lead > * { min-width: 0; }
.lead .h2, .lead h2 { margin-bottom: 0; }
.lead-text { max-width: 60ch; }
.lead-text p:last-child { margin-bottom: 0; }
.cols-3, .cols-2, .cols-4 { display: grid; gap: clamp(20px, 3vw, 48px); margin-top: clamp(32px, 4vw, 56px); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.col { border-top: 1px solid var(--char); padding-top: 1.1rem; min-width: 0; }
.col .num { display: block; margin-bottom: 1.1rem; }
.col h3 { margin-bottom: .6rem; }
.col p { font-size: .98rem; }
.col .tag { display: block; color: var(--stone); margin-top: 1.2rem; }
.col > :last-child { margin-bottom: 0; }
.col a.more { display: inline-block; margin-top: .8rem; text-decoration: none; border-bottom: 1px solid var(--oxide); font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; padding-bottom: .15rem; }
.col a.more:hover { color: var(--oxide); }

/* ---- Ink panels ---- */
.panel-ink {
  background: radial-gradient(90% 70% at 78% 28%, var(--ink-lift) 0%, var(--ink) 48%, var(--ink-deep) 100%);
  color: var(--bone);
}
.panel-ink .marker { border-bottom-color: var(--rule-inv); color: var(--bone-70); }
.panel-ink .marker span:last-child { color: var(--bone-50); }
.panel-ink .label, .panel-ink .muted, .panel-ink .stat .l { color: var(--bone-50); }
.panel-ink .col { border-top-color: var(--rule-inv); }
.panel-ink a { color: var(--bone); }
.panel-cream { background: var(--cream); }

/* ---- Mark and logo ---- */
.mark { display: block; }
.mark img { width: 100%; height: auto; }
.logo { display: block; height: 46px; width: auto; }
.brand:hover .logo { opacity: .82; }
.site-footer .logo { height: 60px; }
.site-footer .est { margin: 1rem 0 0; color: var(--bone-50); }
.wm { font-family: var(--display); font-weight: 400; letter-spacing: -.02em; line-height: 1; font-optical-sizing: auto; }
.brand { display: inline-block; text-decoration: none; color: inherit; }
.brand .wm { font-size: 1.55rem; display: block; }
.brand small { display: block; margin-top: .3rem; font-size: .52rem; color: var(--stone); letter-spacing: .24em; }

/* ---- Header ---- */
.site-header { border-bottom: 1px solid var(--rule); background: var(--bone); position: relative; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 88px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1rem, 2.4vw, 2.4rem); }
.nav a { text-decoration: none; color: var(--char); padding: .35rem 0; border-bottom: 1px solid transparent; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--oxide); }
.nav-toggle { display: none; background: none; border: 1px solid var(--char); color: var(--char); font-family: var(--mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; padding: .75rem 1rem; min-height: 44px; cursor: pointer; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bone); border-bottom: 1px solid var(--rule); padding: .6rem var(--gutter) 1.2rem; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
  .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--oxide); }
}

/* ---- Hero ---- */
.hero { padding: clamp(64px, 9vw, 140px) 0 clamp(40px, 5vw, 64px); }
.hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.hero .eyebrow { color: var(--oxide); display: block; margin-bottom: clamp(20px, 3vw, 36px); }
.hero h1 { margin-bottom: .55em; max-width: 14ch; }
.hero .lede { max-width: 34ch; color: var(--bone-70); margin: 0; }
.hero .mark { width: min(100%, 300px); margin-left: auto; }
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-top: clamp(48px, 7vw, 110px); padding-top: 1.4rem; border-top: 1px solid var(--rule-inv); }
.hero-foot .tagline { font-family: var(--display); font-style: italic; font-size: 1.2rem; margin: 0; }
.hero-foot .geo { color: var(--bone-50); }
.page-hero { padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 6vw, 80px); }
.page-hero h1 { max-width: 16ch; margin-bottom: .4em; }
.page-hero .lede { max-width: 48ch; color: var(--bone-70); margin: 0; }
.page-hero .eyebrow { color: var(--oxide); display: block; margin-bottom: 1.6rem; }
.page-hero .hero-grid { align-items: end; }
.page-hero .mark { width: min(100%, 180px); margin-left: auto; opacity: .9; }

/* ---- Stats ---- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); margin-top: clamp(40px, 5vw, 72px); }
.stat { border-top: 1px solid var(--char); padding-top: 1.2rem; }
.panel-ink .stat { border-top-color: var(--rule-inv); }
.stat .n { font-family: var(--display); font-weight: 300; font-size: clamp(2.6rem, 4.4vw, 4rem); line-height: 1; letter-spacing: -.02em; margin-bottom: .8rem; font-optical-sizing: auto; }
.stat .n em { font-style: italic; }
.stat .l { font-family: var(--sans); font-size: .98rem; line-height: 1.4; color: var(--char); max-width: 26ch; }
.stat .l b { display: block; font-weight: 500; }
.stat .l span { display: block; color: var(--stone); font-size: .88rem; margin-top: .2rem; }

/* ---- Footprint table ---- */
.footprint { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--char); }
.footprint .row { display: grid; grid-template-columns: 2fr 2fr 7fr; gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.footprint .country { font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -.01em; }
.footprint .since { color: var(--oxide); }
.footprint .note { font-family: var(--display); font-style: italic; font-size: 1.02rem; line-height: 1.45; margin: 0; }

/* ---- Quotes ---- */
.quote { margin: 0; }
.quote p { font-family: var(--display); font-style: italic; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45; letter-spacing: -.005em; margin: 0 0 1.2rem; }
.quote .cite { display: block; color: var(--stone); font-style: normal; }
.quote .cite b { font-weight: 500; color: var(--char); display: block; }
.panel-ink .quote .cite { color: var(--bone-50); }
.panel-ink .quote .cite b { color: var(--bone); }
.quote .q-more { display: none; margin: -.5rem 0 1.1rem; padding: .7rem 0 .55rem; min-height: 40px; box-sizing: border-box; background: none; border: 0; border-bottom: 1px solid var(--oxide); color: inherit; cursor: pointer; font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; line-height: 1.5; }
.js .quote .q-more { display: inline-block; }
.quote .q-more:hover { color: var(--oxide); }
.quote [hidden] { display: none !important; }
.quote-band { padding: var(--space) 0; }
.quote-band .quote { max-width: 60ch; }
.quote-band .quote p { font-size: clamp(1.5rem, 2.6vw, 2.35rem); line-height: 1.3; letter-spacing: -.012em; }
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 4vw, 64px) clamp(24px, 4vw, 72px); margin-top: clamp(32px, 4vw, 56px); }
.quotes .quote { border-left: 1px solid var(--rule-mid); padding-left: 1.3rem; }

/* ---- Brands ---- */
.brands { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(24px, 4vw, 72px); margin-top: clamp(32px, 4vw, 56px); }
.brand-group { border-top: 1px solid var(--char); padding-top: 1rem; margin-bottom: clamp(24px, 3vw, 40px); }
.brand-group .label { display: block; margin-bottom: .8rem; color: var(--oxide); }
.brand-group p { font-family: var(--display); font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.5; letter-spacing: -.01em; margin: 0; }
.brand-group .dot { color: var(--stone); padding: 0 .35em; }
.brands-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 1rem; }
.brands-foot .figures { font-family: var(--display); font-style: italic; font-size: 1.05rem; margin: 0; }

/* ---- Timeline ---- */
.timeline { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--char); margin-top: clamp(32px, 4vw, 56px); }
.timeline .t { padding: 1.1rem 1rem 0 0; position: relative; min-width: 0; }
.timeline .t::before { content: ""; position: absolute; top: -1px; left: 0; width: 1px; height: 14px; background: var(--char); }
.timeline .year { font-family: var(--display); font-size: 1.45rem; letter-spacing: -.01em; display: block; margin-bottom: .4rem; }
.timeline .num { display: block; margin-bottom: .3rem; }
.timeline p { font-size: .92rem; margin: 0; line-height: 1.45; }

/* ---- Profile ---- */
.profile { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 4vw, 72px); align-items: start; }
.profile figure { margin: 0; max-width: 360px; }
.profile figure img { filter: grayscale(1) contrast(1.02); width: 100%; }
.profile figcaption { margin-top: .8rem; color: var(--stone); }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.5rem; margin: 0; }
.dl dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); padding-top: .25rem; }
.dl dd { margin: 0; }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { padding: .55rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.list-plain li:first-child { border-top: 1px solid var(--char); }
.list-two { columns: 2; column-gap: clamp(24px, 3vw, 48px); }
.list-two li { break-inside: avoid; }

/* ---- Buttons ---- */
.btn { display: inline-block; padding: .95rem 1.5rem; border: 1px solid var(--char); color: var(--char); text-decoration: none; background: transparent; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.btn:hover { background: var(--char); color: var(--bone); }
.btn-solid { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn-solid:hover { background: var(--oxide); border-color: var(--oxide); color: var(--bone); }
.panel-ink .btn { border-color: var(--bone); color: var(--bone); }
.panel-ink .btn:hover { background: var(--bone); color: var(--ink); }
.panel-ink .btn-solid { background: var(--oxide); border-color: var(--oxide); color: var(--bone); }
.panel-ink .btn-solid:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: clamp(28px, 3vw, 44px); align-items: center; }
.actions .link { text-decoration: none; border-bottom: 1px solid var(--oxide); padding-bottom: .15rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; }

/* ---- CTA band ---- */
.cta { padding: clamp(48px, 6vw, 88px) 0; }
.cta .wrap { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta .h2 { margin: 0; max-width: 22ch; }
.cta .h2 small { display: block; font-family: var(--sans); font-size: 1rem; letter-spacing: 0; margin-top: .8rem; color: var(--bone-70); line-height: 1.5; max-width: 46ch; }

/* ---- Articles ---- */
.article-list { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; border-top: 1px solid var(--char); }
.article-list li { display: grid; grid-template-columns: 2fr 7fr 3fr; gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); margin: 0; align-items: baseline; }
.article-list .meta { color: var(--stone); }
.article-list h3 { margin: 0 0 .4rem; }
.article-list h3 a { text-decoration: none; }
.article-list h3 a:hover { color: var(--oxide); }
.article-list p { margin: 0; font-size: .96rem; color: var(--char); }
.article-list .more { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--oxide); padding-bottom: .15rem; justify-self: end; }
.article-head { padding: clamp(48px, 7vw, 96px) 0 clamp(24px, 3vw, 40px); }
.article-head .meta { color: var(--stone); display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.article-head h1 { font-size: clamp(2.2rem, 4.2vw, 3.8rem); max-width: 18ch; }
.article-head .lede { max-width: 52ch; color: var(--char); margin: 0; }
.prose { max-width: 66ch; font-size: 1.06rem; line-height: 1.68; }
.prose h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 500; margin: 2.2em 0 .6em; line-height: 1.15; }
.prose h3 { font-size: 1.25rem; margin: 1.8em 0 .5em; }
.prose p { margin: 0 0 1.3em; }
.prose a { text-decoration: none; border-bottom: 1px solid var(--oxide); }
.prose a:hover { color: var(--oxide); }
.prose blockquote { margin: 1.8em 0; padding-left: 1.3rem; border-left: 1px solid var(--rule-mid); font-family: var(--display); font-style: italic; font-size: 1.15rem; line-height: 1.5; }
.prose blockquote p { margin-bottom: .6em; }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.prose li { margin: .35em 0; }
.prose code { font-family: var(--mono); font-size: .9em; }
.table-wrap { overflow-x: auto; margin: 1.6em 0; border-top: 1px solid var(--char); }
.table-wrap table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.table-wrap th { text-align: left; padding: .8rem .6rem .6rem 0; color: var(--stone); font-weight: 500; border-bottom: 1px solid var(--rule-mid); white-space: nowrap; }
.table-wrap td { padding: .7rem .6rem .7rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table-wrap td:first-child { font-weight: 500; }
/* Share row. Text links rather than coloured logo chips: the page is quiet and a strip of brand
   badges would be the loudest thing on it. Tap targets stay at 44px on a phone. */
.share { margin-top: clamp(36px, 4vw, 56px); padding-top: 1.1rem; border-top: 1px solid var(--rule); display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap; }
.share ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.share a { display: inline-block; padding: .55rem .95rem; border: 1px solid var(--rule-mid); border-radius: 2px; font-size: .88rem; letter-spacing: .02em; text-decoration: none; color: var(--char); transition: background .18s ease, color .18s ease, border-color .18s ease; }
.share a:hover { background: var(--char); border-color: var(--char); color: var(--bone); }
.share a.copied { background: var(--oxide); border-color: var(--oxide); color: var(--bone); }
@media (max-width: 560px) { .share a { padding: .7rem 1rem; } }
.article-foot { margin-top: clamp(40px, 5vw, 64px); padding-top: 1.4rem; border-top: 1px solid var(--char); display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: baseline; }
.article-foot .author { max-width: 46ch; }
.article-foot .author b { display: block; font-family: var(--display); font-size: 1.25rem; font-weight: 400; letter-spacing: -.01em; }
.article-foot .author p { margin: .4rem 0 0; font-size: .95rem; color: var(--stone); }
.article-layout { display: grid; grid-template-columns: 8fr 4fr; gap: clamp(32px, 5vw, 96px); align-items: start; padding-bottom: var(--space); }
.article-layout > * { min-width: 0; }
.aside { position: sticky; top: 2rem; }
.aside .box { border-top: 1px solid var(--char); padding-top: 1rem; margin-bottom: 2rem; }
.aside .box .label { display: block; margin-bottom: .8rem; }
.aside .box p { font-size: .95rem; }
.aside .box ul { list-style: none; padding: 0; margin: 0; }
.aside .box li { padding: .5rem 0; border-bottom: 1px solid var(--rule); font-size: .95rem; }
.aside .box li a { text-decoration: none; }
.aside .box li a:hover { color: var(--oxide); }
.aside .box li .meta { display: block; color: var(--stone); margin-top: .2rem; }

/* ---- Contact ---- */
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.contact-grid .dl { margin-top: 1.4rem; }
.contact-grid .dl a { text-decoration: none; border-bottom: 1px solid var(--oxide); }
.contact-grid .dl a:hover { color: var(--oxide); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; border-top: 1px solid var(--char); padding-top: 1.6rem; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; color: var(--stone); margin-bottom: .35rem; }
.form input, .form textarea, .form select {
  font: inherit; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule-mid);
  padding: .65rem 0; color: var(--char); border-radius: 0; font-size: 1rem; line-height: 1.4;
}
.form select { appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.form textarea { min-height: 7.5rem; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-bottom-color: var(--oxide); }
.form .hp { position: absolute; left: -9999px; }
.form-note { color: var(--stone); margin: 0; align-self: center; text-transform: none; letter-spacing: .04em; font-size: .78rem; }
.form-status { grid-column: 1 / -1; font-size: .95rem; margin: 0; min-height: 1.4em; }

/* ---- Footer ---- */
.site-footer { margin-top: auto; }
.site-footer .top { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 4vw, 72px); padding: clamp(48px, 6vw, 88px) 0 clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--rule-inv); }
.site-footer .brand .wm { font-size: 1.9rem; }
.site-footer .brand small { color: var(--bone-50); }
.site-footer .tagline { font-family: var(--display); font-style: italic; font-size: 1.15rem; margin: 1.6rem 0 0; color: var(--bone-70); max-width: 30ch; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 0; }
.footer-cols div { border-top: 1px solid var(--rule-inv); padding-top: 1rem; }
.footer-cols dt { color: var(--bone-50); margin-bottom: .8rem; }
.footer-cols dd { margin: 0 0 .25rem; font-size: .95rem; }
.footer-cols dd a { text-decoration: none; }
.footer-cols dd a:hover { color: var(--oxide); }
.footer-cols dd i { font-family: var(--display); font-style: italic; color: var(--bone-70); }
.footer-cols .nav-list { list-style: none; padding: 0; margin: 0; }
.footer-cols .nav-list li { margin: 0 0 .3rem; font-size: .95rem; }
.footer-cols .nav-list a { text-decoration: none; }
.footer-cols .nav-list a:hover { color: var(--oxide); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding: 1.4rem 0 1.8rem; color: var(--bone-50); text-transform: none; letter-spacing: .08em; font-size: .68rem; }
.footer-bottom .geo { text-transform: uppercase; letter-spacing: .2em; }
.footer-bottom a { text-decoration: none; color: var(--bone-70); }

/* ---- Figures ---- */
.figure { margin: clamp(32px, 4vw, 56px) 0 0; }
.figure img { width: 100%; filter: grayscale(.85) contrast(1.02); }
.figure figcaption { margin-top: .7rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); }
.figure-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 32px); }

/* ---- Misc ---- */
.note { border-top: 1px solid var(--char); padding-top: 1rem; margin-top: clamp(28px, 4vw, 48px); display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.note p { font-family: var(--display); font-style: italic; font-size: 1.05rem; margin: 0; max-width: 60ch; }
.note .label { text-align: right; }
.breadcrumb { color: var(--stone); margin-bottom: 1.4rem; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--oxide); }
.plain-page .prose { margin-top: clamp(24px, 3vw, 40px); }

/* ---- Photography ---- */
.bg { position: absolute; inset: 0; overflow: hidden; }
.bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo { position: relative; min-height: min(92vh, 920px); display: flex; align-items: flex-end; color: var(--bone); background: var(--ink); isolation: isolate; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26, 46, 42, .94) 0%, rgba(26, 46, 42, .62) 38%, rgba(26, 46, 42, .18) 70%, rgba(26, 46, 42, .08) 100%), linear-gradient(100deg, rgba(20, 38, 31, .55) 0%, rgba(20, 38, 31, 0) 55%); }
.hero-photo .wrap { position: relative; z-index: 1; padding-top: clamp(120px, 18vw, 220px); padding-bottom: clamp(32px, 4vw, 56px); width: 100%; }
.hero-photo h1 { max-width: 13ch; text-shadow: 0 1px 24px rgba(0, 0, 0, .25); }
.hero-photo .lede { color: var(--bone-70); max-width: 44ch; margin: 0; }
.hero-photo .eyebrow { color: var(--oxide); display: block; margin-bottom: clamp(18px, 2.5vw, 30px); }
.hero-photo .actions { margin-top: clamp(24px, 3vw, 40px); }
.hero-photo .actions .link { border-bottom-color: var(--bone-50); }
.hero-photo .hero-foot { margin-top: clamp(36px, 5vw, 72px); }
.hero-photo .credit { position: absolute; right: var(--gutter); bottom: .9rem; z-index: 1; font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-50); }
.hero-photo .credit a { text-decoration: none; }
.page-photo { position: relative; color: var(--bone); background: var(--ink); isolation: isolate; padding: clamp(96px, 14vw, 180px) 0 clamp(40px, 6vw, 72px); }
.page-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26, 46, 42, .96) 0%, rgba(26, 46, 42, .7) 45%, rgba(26, 46, 42, .25) 100%); }
.page-photo .wrap { position: relative; z-index: 1; }
.page-photo h1 { max-width: 16ch; margin-bottom: .4em; }
.page-photo .lede { max-width: 48ch; color: var(--bone-70); margin: 0; }
.page-photo .eyebrow { color: var(--oxide); display: block; margin-bottom: 1.6rem; }
.page-photo .credit { position: absolute; right: var(--gutter); bottom: .8rem; z-index: 1; font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-50); }
.page-photo .credit a { text-decoration: none; }

/* ---- Stat strip ---- */
.strip { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.strip .stat { border-top: 0; padding: 1.6rem 1.5rem 1.6rem 0; border-left: 1px solid var(--rule); padding-left: 1.5rem; }
.strip .stat:first-child { border-left: 0; padding-left: 0; }
.strip .stat .n { font-size: clamp(2rem, 3vw, 2.8rem); margin-bottom: .5rem; }
.strip .stat .l { max-width: 24ch; }

/* ---- Image cards ---- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(32px, 4vw, 56px); }
.card { display: block; text-decoration: none; color: inherit; min-width: 0; }
.card .pic { aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream); margin-bottom: 1.1rem; }
.card .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.card:hover .pic img { transform: scale(1.03); }
.card .num { display: block; margin-bottom: .6rem; }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .98rem; margin: 0 0 .8rem; color: var(--char); }
.card .more { display: inline-block; font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; border-bottom: 1px solid var(--oxide); padding-bottom: .15rem; }
.card:hover .more { color: var(--oxide); }

/* ---- Image band with a voice ---- */
.band { position: relative; color: var(--bone); background: var(--ink); isolation: isolate; padding: clamp(96px, 14vw, 200px) 0; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 38, 31, .82) 0%, rgba(20, 38, 31, .55) 50%, rgba(20, 38, 31, .25) 100%); }
.band .wrap { position: relative; z-index: 1; }
.band .quote { max-width: 56ch; }
.band .quote p { font-size: clamp(1.5rem, 2.6vw, 2.35rem); line-height: 1.3; letter-spacing: -.012em; }
.band .cite { color: var(--bone-50); }
.band .cite b { color: var(--bone); }
.band .credit { position: absolute; right: var(--gutter); bottom: .8rem; z-index: 1; font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-50); }
.band .credit a { text-decoration: none; }

/* ---- Logo wall ---- */
.logos { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.logos > a, .logos > span { display: flex; align-items: center; justify-content: center; min-height: 112px; min-width: 0; padding: 1.2rem 1.4rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-decoration: none; }
.logos .wordmark { overflow-wrap: anywhere; hyphens: auto; }
.logos img { max-height: 40px; max-width: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .72; transition: filter .25s ease, opacity .25s ease; }
.logos a:hover img { filter: none; opacity: 1; }
.logos img[src*="the-north-face"], .logos img[src*="/ems."] { max-height: 60px; }
.hero-photo .eyebrow { text-shadow: 0 1px 12px rgba(20, 38, 31, .6); }
.logos .wordmark { font-family: var(--display); font-size: 1.15rem; letter-spacing: -.01em; color: var(--char); opacity: .8; text-align: center; line-height: 1.15; }
.brands-line { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; align-items: baseline; margin-top: 1.2rem; }
.brands-line .figures { font-family: var(--display); font-style: italic; font-size: 1.05rem; margin: 0; }

/* ---- Route strip (the six countries) ---- */
.route { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--char); margin-top: clamp(32px, 4vw, 56px); }
.route .node { padding: 1rem 1rem 0 0; position: relative; }
.route .node::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bone); border: 1px solid var(--char); }
.route .node:first-child::before { background: var(--oxide); border-color: var(--oxide); }
.route .country { font-family: var(--display); font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -.01em; display: block; margin-bottom: .3rem; }
.route .since { color: var(--oxide); display: block; }

/* ---- Compact engagement ---- */
.engage-compact { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); margin-top: clamp(28px, 4vw, 48px); }
.engage-compact .col p { margin-bottom: .6rem; }

/* ---- Article cards ---- */
.article-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(28px, 4vw, 48px); }
.article-card { display: block; text-decoration: none; color: inherit; border-top: 1px solid var(--char); padding-top: 1rem; min-width: 0; }
.article-card .pic { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream); margin-bottom: 1rem; }
.article-card .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.article-card:hover .pic img { transform: scale(1.03); }
.article-card .meta { display: block; color: var(--stone); margin-bottom: .6rem; }
.article-card h3 { margin-bottom: .4rem; font-size: clamp(1.15rem, 1.5vw, 1.4rem); }
.article-card p { font-size: .95rem; margin: 0; color: var(--char); }
.article-card:hover h3 { color: var(--oxide); }
.article-hero { margin: 0 0 clamp(32px, 4vw, 56px); }
.article-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article-hero figcaption { margin-top: .6rem; font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }
.article-hero figcaption a { text-decoration: none; }

/* ---- Contour divider ---- */
.contour { display: block; width: 100%; height: 72px; color: var(--rule-mid); margin: 0; }
.contour svg { width: 100%; height: 100%; display: block; }
.contour path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.panel-ink .contour { color: var(--rule-inv); }

@media (max-width: 1000px) {
  .logos { grid-template-columns: repeat(4, 1fr); }
  .route { grid-template-columns: repeat(3, 1fr); }
  .route .node { padding-bottom: 1.2rem; }
  .strip .wrap { grid-template-columns: repeat(2, 1fr); }
  .strip .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .strip .stat { border-top: 1px solid var(--rule); }
  .strip .stat:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 860px) {
  .cards, .article-cards, .engage-compact { grid-template-columns: 1fr 1fr; }
  .hero-photo { min-height: 78vh; }
}
@media (max-width: 600px) {
  .cards, .article-cards, .engage-compact { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .logos a, .logos span { min-height: 88px; }
  .route { grid-template-columns: 1fr 1fr; }
  .strip .wrap { grid-template-columns: 1fr; }
  .strip .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .strip .stat:first-child { border-top: 0; }
  .stat { display: grid; grid-template-columns: minmax(92px, auto) 1fr; gap: 0 1.1rem; align-items: baseline; }
  .stat .n { margin-bottom: 0; font-size: 2rem; }
  .stat .l { max-width: none; }
}

/* ---- Article figures and diagrams ---- */
.prose-figure { margin: clamp(28px, 4vw, 44px) 0; }
.prose-figure img { width: 100%; }
.prose-figure figcaption, .diagram figcaption {
  margin-top: .7rem; font-family: var(--sans); font-size: .9rem; line-height: 1.45; color: var(--stone);
}
.prose-figure figcaption .by { display: block; margin-top: .3rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; }
.prose-figure figcaption .by a { text-decoration: none; border-bottom: 1px solid var(--rule-mid); }
.diagram { margin: clamp(32px, 4.5vw, 52px) 0; color: var(--char); }
.diagram svg { width: 100%; height: auto; overflow: visible; }
.diagram figcaption { border-top: 1px solid var(--rule); padding-top: .7rem; }
/* The diagrams are drawn on a 900-unit canvas; below that they need to scroll rather than crush. */
@media (max-width: 700px) {
  .diagram { overflow-x: auto; }
  .diagram svg { min-width: 620px; }
}

/* ---- Feature rows and galleries (Work page) ---- */
.features { display: grid; gap: 0; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 72px); align-items: center; padding: clamp(28px, 4vw, 56px) 0; border-top: 1px solid var(--rule); }
.feature:first-child { border-top: 0; padding-top: 0; }
.feature .pic { aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream); }
.feature .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature:nth-child(even) .pic { order: 2; }
.feature .num { display: block; margin-bottom: 1rem; }
.feature h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 400; margin-bottom: .7rem; }
.feature p { max-width: 52ch; }
.feature .tag { display: block; color: var(--stone); margin: 1rem 0 1.3rem; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); margin-top: clamp(32px, 4vw, 56px); }
.gallery-4 { grid-template-columns: repeat(4, 1fr); }
.gallery .tile { text-decoration: none; color: inherit; display: block; }
.gallery figure { margin: 0; }
.gallery .pic { aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream); }
.gallery .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.gallery a.tile:hover .pic img { transform: scale(1.03); }
.gallery figcaption { margin-top: .6rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.gallery figcaption b { font-weight: 500; font-size: .98rem; }
.gallery figcaption span { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oxide); }
.photo-credits { margin: 1.4rem 0 0; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .article-list li { grid-template-columns: 1fr; gap: .4rem; }
  .article-list .more { justify-self: start; margin-top: .4rem; }
  .timeline { grid-template-columns: repeat(3, 1fr); }
  .timeline .t { padding-bottom: 1.4rem; }
  .brands { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .lead, .hero-grid, .profile, .contact-grid, .article-layout, .site-footer .top { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; }
  .feature:nth-child(even) .pic { order: 0; }
  .gallery, .gallery-4 { grid-template-columns: 1fr 1fr; }
  .hero .mark { margin: 0; width: min(60vw, 260px); order: -1; }
  .page-hero .mark { display: none; }
  .cols-3, .cols-4 { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr; gap: 1.4rem; }
  .quotes { grid-template-columns: 1fr; }
  .footprint .row { grid-template-columns: 1fr 1fr; }
  .footprint .note { grid-column: 1 / -1; }
  .aside { position: static; }
  .figure-pair { grid-template-columns: 1fr; }
  .list-two { columns: 1; }
}
@media (max-width: 600px) {
  html { font-size: 16px; }
  /* Phone: no mono label below 12px, and every control at least 44px tall. */
  .label, .num, .marker, .btn, .nav a, .cite, .meta, .footer-cols dt, .form label, .form-note,
  .footer-bottom, .tag, .table-wrap th, .col a.more, .card .more, .actions .link, .article-list .more,
  .dl dt, .figure figcaption, .quote .q-more, .gallery figcaption span, .photo-credits, .credit,
  .brand small, .site-footer .est { font-size: .75rem; letter-spacing: .14em; }
  .hero-photo .credit, .page-photo .credit, .band .credit { font-size: .72rem; letter-spacing: .12em; bottom: .7rem; }
  .article-hero figcaption { font-size: .75rem; letter-spacing: .14em; }
  .prose-figure figcaption .by { font-size: .75rem; letter-spacing: .12em; }
  .btn { padding: 1rem 1.4rem; min-height: 44px; }
  .quote .q-more { min-height: 44px; padding: .85rem 0 .7rem; }
  .col a.more, .card .more, .actions .link, .article-list .more { padding-top: .5rem; padding-bottom: .5rem; display: inline-block; }
  .stat .l span { font-size: .92rem; }
  .cols-3, .cols-4, .cols-2 { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .form { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 1fr; gap: .2rem 0; }
  .dl dd { margin-bottom: .8rem; }
  .footer-cols { grid-template-columns: 1fr; }
  .marker { flex-direction: column; gap: .2rem; }
  .marker span:last-child { text-align: left; }
}

@media print {
  .site-header, .site-footer, .nav-toggle, .cta { display: none; }
  .panel-ink { background: #fff; color: #000; }
}

/* ---- Related work (article foot) ---- */
.related { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.related ul { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.related li { margin: 0; }
.related a { text-decoration: none; border-bottom: 1px solid var(--oxide); padding-bottom: .1rem; font-size: .98rem; }
.related a:hover { color: var(--oxide); }

/* ---- CTA with two actions: book first, email second ---- */
.cta-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.cta-actions .link { text-decoration: none; border-bottom: 1px solid var(--oxide); padding-bottom: .15rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; }
.cta-actions .link:hover { color: var(--oxide); }
@media (max-width: 600px) { .cta-actions { gap: 1rem; } .cta-actions .link { font-size: .75rem; } }

/* ---- Booking panel (contact page) ---- */
.book { border-top: 1px solid var(--char); padding-top: 1.4rem; margin-bottom: clamp(32px, 4vw, 52px); }
.book h2 { margin-bottom: .5rem; }
.book p { max-width: 52ch; }
.book .actions { margin-top: 1.2rem; }
.book .note-line { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); margin: 1rem 0 0; }
@media (max-width: 600px) { .book .note-line { font-size: .75rem; } }