/* ==========================================================================
   HARI RAM RINWA — v8.2
   One 12-column grid governs the whole page. Every section places its parts
   on the same column lines, so the left axis, the description column and the
   right edge run unbroken from the first section to the last.
   ========================================================================== */

:root {
  --ink: #141413;
  --ink-2: #3A3A37;
  --ink-soft: #6E6E69;
  --ink-faint: #9A9A93;

  --paper: #FFFFFF;
  --panel: #ECEBE7;
  --panel-deep: #DFDDD7;
  --char: #141413;

  --rule: rgba(20, 20, 19, 0.14);
  --rule-soft: rgba(20, 20, 19, 0.07);
  --rule-dark: rgba(255, 255, 255, 0.16);

  --script: 'Cormorant Garamond', Georgia, serif;
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1320px;
  --gap: clamp(14px, 1.5vw, 26px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* one vertical rhythm for every band */
  --band-y: clamp(62px, 6.4vw, 100px);
  --head-gap: clamp(30px, 3.4vw, 46px);
  --row-y: 19px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ======================================================= THE GRID */

.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* Any element carrying .g12 lays its children on the same twelve lines.
   Because every .g12 is the full width of .shell, the lines match across
   sections — that is what makes the page read as one document. */
.g12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

.c-num   { grid-column: 1 / 2; }
.c-main  { grid-column: 2 / 9; }
.c-aside { grid-column: 9 / 13; }
.c-full  { grid-column: 1 / -1; }

/* ======================================================= type */

.label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.022em; line-height: 1.05; color: var(--ink); }
.h-xl { font-size: clamp(40px, 6.2vw, 88px); line-height: 0.98; letter-spacing: -0.035em; }
.h-lg { font-size: clamp(28px, 3.7vw, 50px); }
.h-md { font-size: clamp(19px, 1.9vw, 25px); line-height: 1.18; }

p { color: var(--ink-soft); }
.body-copy p + p { margin-top: 17px; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ======================================================= bands */

section { position: relative; scroll-margin-top: 92px; }
.band { padding: var(--band-y) 0; }
.band--paper { background: var(--paper); }
.band--panel { background: var(--panel); }
.band--deep  { background: var(--panel-deep); }
.band--dark  { background: var(--char); color: #F2F1ED; }
.band--dark p, .band--dark .label { color: rgba(242, 241, 237, 0.60); }
.band--dark h1, .band--dark h2, .band--dark h3 { color: #F7F6F2; }

/* section head — the same three column positions in every section */
.head {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--head-gap);
  align-items: start;
}
.band--dark .head { border-bottom-color: var(--rule-dark); }
.head--table { border-bottom: none; margin-bottom: 0; padding-bottom: clamp(34px, 4vw, 52px); }
.head-num {
  position: sticky; top: 104px;
  font-family: var(--display);
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--ink-faint);
  line-height: 1.5;
  padding-top: 3px;
}
.band--dark .head-num { color: rgba(242, 241, 237, 0.42); }
.head-main .label { display: block; margin-bottom: 14px; }
.head-note { font-size: 14px; line-height: 1.7; padding-top: 3px; }

/* ======================================================= header + rail */

/* A solid band, not a blend. mix-blend-mode: difference inverted the bar
   against whatever sat behind it, so over mid greys the phone number and the
   menu button came out almost the same value as the background and read as
   missing. Black with white on it is legible over every section. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gutter);
  background: var(--char); color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: padding 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.site-header.is-stuck {
  padding: 13px var(--gutter);
  box-shadow: 0 1px 30px rgba(20, 20, 19, 0.34);
}
.site-header a { color: inherit; }
.header-phone:hover, .nav-toggle:hover { opacity: 0.72; }
.wordmark-sm { font-family: var(--script); font-style: italic; font-weight: 600; font-size: 21px; }
.header-right { display: flex; align-items: center; gap: 22px; }
.header-phone { font-size: 11.5px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.nav-toggle {
  background: none; border: none; cursor: pointer; color: inherit;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--body); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.nav-toggle svg { width: 16px; height: 16px; }

.rail {
  position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 100;
  display: flex; flex-direction: column; gap: 9px; mix-blend-mode: difference;
  padding: 14px 10px;
}
.rail a {
  display: flex; align-items: center; gap: 10px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.42);
  transition: color 0.3s var(--ease);
  font-variant-numeric: tabular-nums;
}
.rail a i { display: block; width: 10px; height: 1px; background: rgba(255,255,255,0.32); transition: width 0.4s var(--ease), background 0.3s; }
.rail a:hover { color: rgba(255,255,255,0.8); }
.rail a.is-active { color: #fff; }
.rail a.is-active i { width: 24px; background: #fff; }

.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--ink); z-index: 200; }

/* The list is nine items tall. Centred with no scroll, the first ones were
   cut off the top of a laptop screen with no way to reach them. */
.menu { position: fixed; inset: 0; z-index: 150; background: var(--char); color: #F7F6F2; display: none; align-items: center; padding: 104px var(--gutter) 56px; overflow-y: auto; overscroll-behavior: contain; }
.menu.is-open { display: flex; }
.menu-inner { max-width: var(--maxw); margin: auto; width: 100%; align-items: end; row-gap: 40px; }
.menu-list { grid-column: 1 / 9; display: flex; flex-direction: column; }
.menu-list a {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 4vw, 50px); letter-spacing: -0.03em;
  padding: 11px 0; border-bottom: 1px solid var(--rule-dark);
  color: rgba(247,246,242,0.55);
  transition: color 0.25s var(--ease), padding-left 0.35s var(--ease);
  display: grid; grid-template-columns: 58px 1fr; align-items: baseline;
}
.menu-list a:hover { color: #fff; padding-left: 12px; }
.menu-list a span { font-family: var(--body); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; color: rgba(247,246,242,0.35); }
.menu-meta { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 22px; }
.menu-meta .label { display: block; margin-bottom: 8px; color: rgba(247,246,242,0.4); }
.menu-meta a { display: block; font-family: var(--display); font-size: 16px; font-weight: 700; color: #F7F6F2; }
/* Was 10px of letter-spaced text in the same corner the Menu button had just
   been in, so it read as part of the background rather than as the way out. */
.menu-close {
  position: fixed; top: 16px; right: var(--gutter); z-index: 160;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px; padding: 10px 18px 10px 15px;
  color: #F7F6F2; cursor: pointer;
  font-family: var(--body); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.menu-close:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.55); }
.menu-close::before {
  content: ''; width: 15px; height: 15px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M5 5l14 14M19 5L5 19'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M5 5l14 14M19 5L5 19'/></svg>") center/contain no-repeat;
}

/* ======================================================= hero */

.hero { min-height: 100vh; display: grid; grid-template-columns: 1.3fr 1fr; }
.hero-text {
  background: var(--paper);
  display: flex; flex-direction: column; justify-content: center;
  padding: 140px clamp(36px, 5vw, 72px) 56px clamp(78px, 8vw, 132px);
}
.hero-eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.hero-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); max-width: 140px; }
.hero h1 { margin-bottom: 26px; }
.hero h1 em { font-family: var(--script); font-style: italic; font-weight: 500; letter-spacing: -0.01em; }
.hero-stand { max-width: 44ch; font-size: clamp(15.5px, 1.25vw, 17px); line-height: 1.68; color: var(--ink-2); }

.hero-meta {
  margin-top: 44px; padding-top: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  border-top: 1px solid var(--rule);
}
.hero-meta > div { padding: 15px 12px 0 0; border-right: 1px solid var(--rule); min-height: 92px; }
.hero-meta > div:last-child { border-right: none; }
.hero-meta dt { font-size: 9.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.hero-meta dd { font-family: var(--display); font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; }

.hero-photo { position: relative; overflow: hidden; background: var(--char); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(0.96); }
.photo-caption {
  position: absolute; left: 22px; bottom: 22px; z-index: 2;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.75); display: flex; align-items: center; gap: 10px;
}
.photo-caption::before { content: ""; width: 20px; height: 1px; background: rgba(255,255,255,0.5); }

/* ======================================================= figures */

.figures-grid { border-top: 1px solid var(--rule-dark); }
.figure { padding: clamp(30px, 3.6vw, 46px) var(--gap) 0 0; border-right: 1px solid var(--rule-dark); }
.figure:last-child { border-right: none; padding-right: 0; }
.figure:nth-child(1) { grid-column: 1 / 4; }
.figure:nth-child(2) { grid-column: 4 / 7; }
.figure:nth-child(3) { grid-column: 7 / 10; }
.figure:nth-child(4) { grid-column: 10 / 13; }
.figure b { display: block; font-family: var(--display); font-size: clamp(36px, 4.6vw, 58px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #F7F6F2; }
.figure span { display: block; margin-top: 13px; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(242,241,237,0.55); }
.figure em { display: block; margin-top: 11px; font-style: normal; font-size: 13px; line-height: 1.62; color: rgba(242,241,237,0.45); max-width: 30ch; }

/* ======================================================= split panels */

.split { display: grid; min-height: 92vh; }
.split--a { grid-template-columns: 0.86fr 1.14fr; }
.split--b { grid-template-columns: 1.14fr 0.86fr; }
.split-photo { position: relative; overflow: hidden; background: var(--char); }
.split-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.split-body { display: flex; align-items: center; padding: clamp(64px, 7vw, 104px) clamp(36px, 5vw, 78px) clamp(64px, 7vw, 104px) clamp(36px, 5vw, 78px); }
.split-inner { max-width: 30rem; }
.split-inner .label { display: block; margin-bottom: 20px; }
.split-inner h2 { margin-bottom: 24px; }
.split-inner .body-copy { margin-bottom: 26px; }

.pull {
  margin: 26px 0;
  padding-left: 22px;
  border-left: 1px solid var(--ink);
  font-family: var(--script); font-style: italic; font-weight: 500;
  font-size: clamp(19px, 2vw, 25px); line-height: 1.34; color: var(--ink);
}

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--body); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 15px 26px; background: var(--char); color: #fff;
  border: 1px solid var(--char); cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--light { background: transparent; color: var(--ink); }
.btn--light:hover { background: var(--char); color: #fff; }
.btn--onDark { background: #F7F6F2; color: var(--char); border-color: #F7F6F2; }
.btn--onDark:hover { background: transparent; color: #F7F6F2; }
.btn i { display: block; width: 16px; height: 1px; background: currentColor; }

/* ======================================================= principles */

.principle { padding-right: var(--gap); border-left: 1px solid var(--rule); padding-left: var(--gap); }
.principle:nth-child(1) { grid-column: 1 / 5; border-left: none; padding-left: 0; }
.principle:nth-child(2) { grid-column: 5 / 9; }
.principle:nth-child(3) { grid-column: 9 / 13; padding-right: 0; }
.principle-num { font-family: var(--display); font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -0.04em; color: var(--ink-faint); line-height: 1; display: block; margin-bottom: 20px; }
.principle h3 { margin-bottom: 13px; }
.principle p { font-size: 14px; line-height: 1.7; }

/* wrappers that exist only to carry the grid */
.principles, .enquire, .voices-rest, .figures-grid, .awards-lead, .contact-grid, .colophon, .journey { row-gap: 0; }

/* ======================================================= icons */

.ic { width: 44px; height: 44px; display: block; fill: none; stroke: currentColor; stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; }
.ic--sm { width: 34px; height: 34px; }
.ic--tiny { width: 15px; height: 15px; }
.icon-well {
  width: 78px; height: 78px; border-radius: 50%;
  display: grid; place-items: center;
  color: #FFFFFF; background: var(--char); border: 1px solid var(--char);
  transition: transform 0.55s var(--ease), opacity 0.8s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}
/* every second disc is grey, so a row of them has a rhythm rather than a wall of black */
.icon-well--grey { background: var(--ink-soft); border-color: var(--ink-soft); }

/* and they grow a little under the cursor */
.unit:hover .icon-well,
.plate:hover .icon-well,
.flow-step:hover .icon-well,
.principle:hover .icon-well,
.card:hover .icon-well { transform: scale(1.12); transition-delay: 0s; }


/* ======================================================= principles (now icon-led) */

.principle { padding-right: var(--gap); border-left: 1px solid var(--rule); padding-left: var(--gap); }
.principle:nth-child(1) { grid-column: 1 / 5; border-left: none; padding-left: 0; }
.principle:nth-child(2) { grid-column: 5 / 9; }
.principle:nth-child(3) { grid-column: 9 / 13; padding-right: 0; }
.principle .icon-well { margin-bottom: 26px; }
.principle .label { display: block; margin-bottom: 12px; }
.principle h3 { margin-bottom: 13px; }
.principle p { font-size: 14px; line-height: 1.7; }

/* ======================================================= the group — mixed-size plates,
   photographs where we have them, an icon where we do not. Nine cells, six widths. */

.units { row-gap: clamp(30px, 3.2vw, 48px); }
.unit { display: flex; flex-direction: column; }
.unit:nth-child(1) { grid-column: 1 / 5; }
.unit:nth-child(2) { grid-column: 5 / 9; }
.unit:nth-child(3) { grid-column: 9 / 13; }
.unit:nth-child(4) { grid-column: 1 / 7; }
.unit:nth-child(5) { grid-column: 7 / 13; }
.unit:nth-child(6) { grid-column: 1 / 4; }
.unit:nth-child(7) { grid-column: 4 / 7; }
.unit:nth-child(8) { grid-column: 7 / 10; }
.unit:nth-child(9) { grid-column: 10 / 13; }
.unit:nth-child(n+10) { grid-column: span 3; }
/* the four icon plates share a rule that separates them from the photographs above */
.unit:nth-child(n+6) { border-top: 1px solid var(--rule); padding-top: 30px; }

/* The crop follows the card's place in the grid, not a flag set in PHP — that
   flag drifted out of step with the columns and put a 16:8 letterbox on the
   narrow third-row cards, which is what made the pictures look mismatched. */
.unit-photo { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--panel-deep); margin-bottom: 20px; }
.unit:nth-child(4) .unit-photo,
.unit:nth-child(5) .unit-photo { aspect-ratio: 16/9; }
.unit-photo img { width: 100%; height: 106%; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: transform 0.7s var(--ease); }
.unit:hover .unit-photo img { transform: scale(1.03); }
/* every photograph on the site comes back into colour under the cursor */
.unit-photo img, .stop-photo img, .split-photo img, .hero-photo img, .award-lead img, .v-photo img {
  transition: transform 0.9s var(--ease), filter 0.55s var(--ease);
}
.unit:hover .unit-photo img,
.stop:hover .stop-photo img,
.split-photo:hover img,
.hero-photo:hover img,
.award-lead:hover img,
.voice-lead:hover .v-photo img,
.voice-sm:hover .v-photo img { filter: grayscale(0) contrast(1.02); }
.unit .icon-well { margin-bottom: 22px; }

.unit-top { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--rule); }
.unit-year { font-family: var(--display); font-size: 13px; font-weight: 800; letter-spacing: 0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.unit-kind { margin-left: auto; font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.unit--plate .unit-top { padding-top: 0; }

.unit h3 { font-size: clamp(16.5px, 1.55vw, 20px); margin-bottom: 9px; letter-spacing: -0.02em; }
.unit p { font-size: 13.5px; line-height: 1.66; }

/* ======================================================= herb to carton — an icon flow */

.flow { margin-top: clamp(46px, 5vw, 72px); border-top: 1px solid var(--rule); padding-top: 32px; }
.flow-head { grid-column: 1 / 3; }
.flow-head .label { display: block; margin-bottom: 8px; }
.flow-head p { font-size: 12.5px; line-height: 1.6; }
.flow-step { position: relative; padding-right: var(--gap); }
.flow-step:nth-child(2) { grid-column: 3 / 5; }
.flow-step:nth-child(3) { grid-column: 5 / 7; }
.flow-step:nth-child(4) { grid-column: 7 / 9; }
.flow-step:nth-child(5) { grid-column: 9 / 11; }
.flow-step:nth-child(6) { grid-column: 11 / 13; padding-right: 0; }
.flow-step::before {
  content: ""; position: absolute; left: 88px; right: 0; top: 39px;
  height: 1px; background: var(--rule);
}
.flow-step:nth-child(6)::before { display: none; }
.flow-step .icon-well { margin-bottom: 20px; position: relative; z-index: 1; }
.flow-step .n { font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; color: var(--ink-faint); display: block; margin-bottom: 7px; }
.flow-step h3 { font-size: 14.5px; margin-bottom: 7px; letter-spacing: -0.015em; }
.flow-step p { font-size: 12px; line-height: 1.58; }

/* ======================================================= recognition plates */

.plates { row-gap: 0; }
.plate { grid-column: span 3; padding: 22px var(--gap) 24px 0; border-top: 1px solid var(--rule); }
.plate .icon-well { width: 64px; height: 64px; margin-bottom: 18px; }
.plate .p-year { font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 8px; }
.plate b { display: block; font-family: var(--display); font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; margin-bottom: 6px; }
.plate span.p-body { font-size: 12px; color: var(--ink-soft); }

/* ======================================================= writing cards */

.cards { row-gap: clamp(26px, 2.8vw, 40px); }
.card { grid-column: span 4; border-top: 1px solid var(--rule); padding: 22px var(--gap) 0 0; display: flex; flex-direction: column; min-height: 168px; }
.card-photo { aspect-ratio: 4/3; overflow: hidden; background: var(--panel-deep); margin-bottom: 20px; }
.card-photo img { width: 100%; height: 106%; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: transform 0.8s var(--ease), filter 0.55s var(--ease); }
.card:hover .card-photo img { transform: scale(1.04); filter: grayscale(0) contrast(1.02); }
.card .icon-well { margin-bottom: 20px; }
.card .cat { font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.card h3 { font-size: clamp(16px, 1.5vw, 19.5px); line-height: 1.24; letter-spacing: -0.02em; margin-bottom: 12px; }
.card .meta { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.card .meta .ic { width: 18px; height: 18px; transition: transform 0.35s var(--ease); }
.card:hover .meta .ic { transform: translateX(5px); }

/* ======================================================= journey */

.journey { row-gap: clamp(40px, 5vw, 82px); }
.stop { position: relative; }
.stop:nth-child(odd)  { grid-column: 1 / 7; }
.stop:nth-child(even) { grid-column: 7 / 13; margin-top: clamp(0px, 6vw, 84px); }
.stop-photo { position: relative; aspect-ratio: 5/4; overflow: hidden; background: var(--panel); }
.stop-photo img { width: 100%; height: 112%; object-fit: cover; filter: grayscale(1) contrast(1.06); will-change: transform; }
/* The year sits on the picture, and half these photographs are light at the
   foot. A soft scrim under it keeps the numerals readable on every one without
   darkening the image itself. */
.stop-photo:not(.stop-photo--bare)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(to top, rgba(20,20,19,0.62), rgba(20,20,19,0.18) 45%, transparent);
  pointer-events: none; z-index: 2;
}
.stop-year {
  position: absolute; left: 18px; bottom: 14px; z-index: 3;
  font-family: var(--display); font-size: clamp(38px, 4.4vw, 64px); font-weight: 800;
  letter-spacing: -0.045em; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 18px rgba(20,20,19,0.35);
  pointer-events: none;
}
/* A stop with no photograph of its own: the year carries the frame instead of an
   empty grey box. Ruled, set large, sitting on the tint — deliberate, not missing. */
.stop-photo--bare { background: var(--panel-deep); border-top: 1px solid var(--char); display: grid; place-items: center; }
.stop-photo--bare .stop-year {
  position: static; color: var(--ink); mix-blend-mode: normal;
  font-size: clamp(60px, 8vw, 116px); opacity: 0.22;
}
.stop:hover .stop-photo--bare .stop-year { transform: none; opacity: 0.3; }

.stop-body { padding-top: 30px; border-top: 1px solid var(--rule); margin-top: 26px; }
.stop-cap { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.stop-body h3 { font-size: clamp(17px, 1.6vw, 20px); margin-bottom: 9px; }
.stop-body p { font-size: 13.5px; line-height: 1.68; max-width: 44ch; }

/* ======================================================= video */

.video-band { display: grid; grid-template-columns: 1.3fr 0.7fr; min-height: 76vh; }
.video-frame { background: #000; position: relative; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-side { background: var(--char); color: #F7F6F2; display: flex; align-items: center; padding: clamp(48px, 6vw, 84px) clamp(30px, 4vw, 60px); }
.video-side .label { color: rgba(242,241,237,0.55); display: block; margin-bottom: 20px; }
.video-side h2 { margin-bottom: 18px; }
.video-side p { margin-bottom: 28px; font-size: 14px; }

/* ======================================================= recognition */

.awards-lead { margin-bottom: clamp(40px, 5vw, 62px); }
.award-lead { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--panel-deep); }
.award-lead:nth-child(1) { grid-column: 1 / 5; }
.award-lead:nth-child(2) { grid-column: 5 / 9; }
.award-lead:nth-child(3) { grid-column: 9 / 13; }
.award-lead img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(0.95); transition: transform 0.7s var(--ease), filter 0.5s; }
.award-lead:hover img { transform: scale(1.04); filter: grayscale(0) brightness(1); }
.award-lead figcaption { position: absolute; left: 16px; bottom: 14px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }

/* ======================================================= voices */

/* stretch, not center: a square photo beside a taller quote left the text
   spilling past the picture at both ends. The photo now takes the height of
   the row, whatever the testimonial's length. */
.voice-lead { padding-bottom: clamp(38px, 4.5vw, 58px); border-bottom: 1px solid var(--rule); margin-bottom: clamp(38px, 4.5vw, 56px); align-items: stretch; }
.voice-lead .v-photo { grid-column: 1 / 4; aspect-ratio: auto; min-height: 320px; overflow: hidden; background: var(--panel); }
.voice-lead .v-body { grid-column: 4 / 13; display: flex; flex-direction: column; justify-content: center; }
.v-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
/* no photograph on file — the name's initials hold the square instead of leaving a hole */
.v-initials { display: grid; place-items: center; width: 100%; height: 100%; background: var(--panel-deep); color: var(--ink-soft); font-family: var(--display); font-weight: 700; letter-spacing: 0.04em; }
.voice-lead .v-initials { font-size: clamp(38px, 4.4vw, 64px); }
.voice-sm .v-initials { font-size: 17px; }
/* 26ch held the quote to a narrow strip and left a third of the row empty,
   which read as a mistake once a real testimonial ran past a line or two. */
.voice-lead blockquote { font-family: var(--script); font-style: italic; font-weight: 500; font-size: clamp(20px, 2.15vw, 30px); line-height: 1.36; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 24px; max-width: 40ch; }
.voice-attr { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.voice-attr b { font-family: var(--display); font-size: 13.5px; font-weight: 700; text-transform: capitalize; }
.voice-attr span { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }

.voice-sm { display: grid; grid-template-columns: 73px 1fr; gap: 22px; align-items: start; }
.voice-sm:nth-of-type(1) { grid-column: 1 / 7; }
.voice-sm:nth-of-type(2) { grid-column: 7 / 13; }
.voice-sm .v-photo { aspect-ratio: 1/1; overflow: hidden; background: var(--panel); }
.voice-sm p { font-size: 14px; line-height: 1.7; margin-bottom: 13px; }

/* ======================================================= enquiry */

.enquire-side { grid-column: 1 / 5; }
.enquire-side p { font-size: 14px; }
.enquire-list { margin-top: 26px; border-top: 1px solid var(--rule); }
.enquire-list div { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-2); display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: baseline; }
.enquire-list span { font-family: var(--display); font-size: 10px; font-weight: 800; color: var(--ink-faint); }

.form { grid-column: 6 / 13; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); row-gap: 22px; align-content: start; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 9.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 15px; color: var(--ink);
  background: transparent; border: none; border-bottom: 1px solid var(--rule);
  padding: 9px 0; transition: border-color 0.25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--ink); outline: none; }
.field textarea { min-height: 92px; resize: vertical; }
.hp { position: absolute; left: -9999px; }
.form-note { grid-column: 1 / -1; font-size: 13px; color: var(--ink-soft); }

/* ======================================================= contact */

.contact-band { background: var(--char); color: #F7F6F2; padding: clamp(56px, 5.5vw, 84px) 0 clamp(30px, 3.4vw, 46px); }
.contact-mark { font-family: var(--script); font-style: italic; font-weight: 600; font-size: clamp(40px, 6.8vw, 96px); line-height: 1; color: #F7F6F2; margin-bottom: 14px; }
.contact-sub { font-size: 10px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(242,241,237,0.5); margin-bottom: clamp(34px, 4vw, 54px); }
.contact-grid { border-top: 1px solid var(--rule-dark); padding-top: 32px; }
.contact-item:nth-child(1) { grid-column: 1 / 5; }
.contact-item:nth-child(2) { grid-column: 5 / 9; }
.contact-item:nth-child(3) { grid-column: 9 / 13; }
.contact-item .label { display: block; margin-bottom: 12px; color: rgba(242,241,237,0.45); }
.contact-item a { font-family: var(--display); font-size: clamp(15px, 1.4vw, 18px); font-weight: 700; letter-spacing: -0.015em; color: #F7F6F2; }
.socials { display: flex; gap: 10px; }
.socials a { width: 34px; height: 34px; border: 1px solid var(--rule-dark); display: grid; place-items: center; transition: background 0.25s, border-color 0.25s; }
.socials a:hover { background: #F7F6F2; border-color: #F7F6F2; }
.socials a:hover svg { color: var(--char); }
.socials svg { width: 14px; height: 14px; color: #F7F6F2; }

.colophon { margin-top: clamp(38px, 4.4vw, 60px); padding-top: 20px; border-top: 1px solid var(--rule-dark); font-size: 11px; color: rgba(242,241,237,0.45); letter-spacing: 0.04em; }
.colophon span:nth-child(1) { grid-column: 1 / 5; }
.colophon span:nth-child(2) { grid-column: 5 / 9; }
.colophon span:nth-child(3) { grid-column: 9 / 13; text-align: right; }

/* ======================================================= reveal */

.rv   { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-l { opacity: 0; transform: translateX(-30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv-l.in { opacity: 1; transform: none; }
.rv-r { opacity: 0; transform: translateX(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv-r.in { opacity: 1; transform: none; }

/* ======================================================= responsive
   The grid collapses in two deliberate stages: twelve lines to six, six to one.
   Nothing is left half-aligned in between. */

@media (max-width: 1180px) {
  .rail { display: none; }
  .r-name { grid-column: 2 / 8; }
  .r-kind { grid-column: 8 / 10; }
  .r-desc { grid-column: 10 / 13; }
  .r-desc--wide { grid-column: 8 / 13; }
  .r-title { grid-column: 2 / 9; }
  .r-cat { grid-column: 9 / 11; }
}

@media (max-width: 1000px) {
  /* sideways reveals overshoot the viewport on a phone — go vertical there */
  .rv-l, .rv-r { transform: translateY(24px); }
  .rv-l.in, .rv-r.in { transform: none; }

  .unit:nth-child(n) { grid-column: span 6; }
  .unit:nth-child(n) .unit-photo { aspect-ratio: 4/3; }
  .plate { grid-column: span 6; }
  .card { grid-column: span 6; }
  .flow-head { grid-column: 1 / 13; margin-bottom: 24px; }
  .flow-step:nth-child(2) { grid-column: 1 / 5; }
  .flow-step:nth-child(3) { grid-column: 5 / 9; }
  .flow-step:nth-child(4) { grid-column: 9 / 13; padding-right: 0; }
  .flow-step:nth-child(5) { grid-column: 1 / 5; margin-top: 30px; }
  .flow-step:nth-child(6) { grid-column: 5 / 9; margin-top: 30px; }
  .flow-step:nth-child(4)::before, .flow-step:nth-child(6)::before { display: none; }
  .chain-label { grid-column: 1 / 13; margin-bottom: 22px; }
  .chain-cell:nth-of-type(1) { grid-column: 1 / 5; border-left: none; padding-left: 0; }
  .chain-cell:nth-of-type(2) { grid-column: 5 / 9; }
  .chain-cell:nth-of-type(3) { grid-column: 9 / 13; padding-right: 0; }
  .chain-cell:nth-of-type(4) { grid-column: 1 / 5; border-left: none; padding-left: 0; margin-top: 26px; }
  .chain-cell:nth-of-type(5) { grid-column: 5 / 9; margin-top: 26px; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-text { order: 2; padding: 56px var(--gutter); }
  .hero-photo { order: 1; aspect-ratio: 4/3; }
  .split--a, .split--b { grid-template-columns: 1fr; min-height: auto; }
  .split-photo { aspect-ratio: 4/3; }
  .split-body { padding: 56px var(--gutter); }
  .split-inner { max-width: 34rem; }
  /* the row was stretching the frame's height, and aspect-ratio then pushed its
     width past the viewport — pin it to the column instead */
  .video-band { grid-template-columns: 1fr; min-height: 0; }
  .video-frame { aspect-ratio: 16/9; width: 100%; height: auto; align-self: start; }

  /* twelve lines become six */
  .figure:nth-child(1), .figure:nth-child(3) { grid-column: 1 / 7; }
  .figure:nth-child(2), .figure:nth-child(4) { grid-column: 7 / 13; }
  .figure:nth-child(2) { border-right: none; padding-right: 0; }
  .figure:nth-child(3), .figure:nth-child(4) { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--rule-dark); }

  .principle:nth-child(1) { grid-column: 1 / 7; }
  .principle:nth-child(2) { grid-column: 7 / 13; padding-right: 0; }
  .principle:nth-child(3) { grid-column: 1 / 13; border-left: none; padding-left: 0; margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--rule); }

  .award-lead:nth-child(1) { grid-column: 1 / 7; }
  .award-lead:nth-child(2) { grid-column: 7 / 13; }
  .award-lead:nth-child(3) { grid-column: 1 / 13; margin-top: var(--gap); aspect-ratio: 16/7; }

  .voice-lead .v-photo { grid-column: 1 / 4; }
  .voice-lead .v-body { grid-column: 5 / 13; }
  .voice-sm:nth-of-type(1), .voice-sm:nth-of-type(2) { grid-column: 1 / 13; }
  .voice-sm:nth-of-type(2) { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--rule); }

  .enquire-side { grid-column: 1 / 13; margin-bottom: 46px; }
  .form { grid-column: 1 / 13; }

  .contact-item:nth-child(1) { grid-column: 1 / 7; }
  .contact-item:nth-child(2) { grid-column: 7 / 13; }
  .contact-item:nth-child(3) { grid-column: 1 / 13; margin-top: 30px; }
  .colophon span:nth-child(1) { grid-column: 1 / 7; }
  .colophon span:nth-child(2) { grid-column: 7 / 13; text-align: right; }
  .colophon span:nth-child(3) { grid-column: 1 / 13; margin-top: 8px; text-align: left; }

  .menu-list { grid-column: 1 / 13; }
  .menu-meta { grid-column: 1 / 13; flex-direction: row; gap: 40px; flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .icon-well { width: 64px; height: 64px; }
  .ic { width: 36px; height: 36px; }
  .plate .icon-well { width: 56px; height: 56px; }
  .unit:nth-child(n), .plate, .card { grid-column: 1 / 13; padding-right: 0; }
  .flow-step:nth-child(n) { grid-column: 1 / 13; margin-top: 26px; padding-right: 0; }
  .flow-step::before { display: none; }
  .chain-label, .chain-cell:nth-of-type(n) { grid-column: 1 / 13; border-left: none; padding-left: 0; }
  .chain-cell { border-top: 1px solid var(--rule); padding-top: 20px; margin-top: 18px; }
  .head-num { position: static; grid-column: 1 / 13; margin-bottom: 12px; }
  .head-main { grid-column: 1 / 13; }
  .head-note { grid-column: 1 / 13; margin-top: 16px; }

  .hero-meta { grid-template-columns: repeat(2, 1fr); row-gap: 0; }
  .hero-meta > div { border-right: none; border-bottom: 1px solid var(--rule); padding-bottom: 15px; min-height: 0; }
  .hero-meta > div:nth-child(odd) { border-right: 1px solid var(--rule); padding-right: var(--gap); }
  .hero-meta > div:nth-last-child(-n+2) { border-bottom: none; }

  .row { row-gap: 8px; }
  .r-year { grid-column: 1 / 3; }
  .r-name, .r-title { grid-column: 3 / 13; }
  .r-kind, .r-cat { grid-column: 3 / 13; }
  .r-desc, .r-desc--wide { grid-column: 3 / 13; }
  .r-right { grid-column: 3 / 13; text-align: left; }
  .r-step { grid-column: 3 / 13; }

  .figure:nth-child(n) { grid-column: 1 / 13; border-right: none; padding-right: 0; }
  .figure:nth-child(n+2) { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--rule-dark); }

  .principle:nth-child(n) { grid-column: 1 / 13; border-left: none; padding-left: 0; padding-right: 0; }
  .principle:nth-child(n+2) { margin-top: 32px; padding-top: 30px; border-top: 1px solid var(--rule); }

  .stop:nth-child(odd), .stop:nth-child(even) { grid-column: 1 / 13; margin-top: 0; }

  .award-lead:nth-child(n) { grid-column: 1 / 13; margin-top: 0; aspect-ratio: 4/3; }
  .award-lead:nth-child(n+2) { margin-top: var(--gap); }

  .voice-lead .v-photo { grid-column: 1 / 6; margin-bottom: 26px; }
  .voice-lead .v-body { grid-column: 1 / 13; }

  .form { grid-template-columns: 1fr; }
  .contact-item:nth-child(n) { grid-column: 1 / 13; }
  .contact-item:nth-child(n+2) { margin-top: 28px; }
  .colophon span:nth-child(n) { grid-column: 1 / 13; text-align: left; }
  .colophon span:nth-child(n+2) { margin-top: 6px; }
}

/* ==========================================================================
   MOTION
   Everything below is scroll- or hover-driven, and every one of it is
   switched off under prefers-reduced-motion at the foot of this block.
   ========================================================================== */

/* --- section rules draw themselves in --- */
.head { border-bottom: none; position: relative; }
.head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--rule); transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease) 0.08s;
}
.head.in::after { transform: scaleX(1); }
.band--dark .head::after { background: var(--rule-dark); }

/* --- headline lines rise out of a mask --- */
.line { display: block; overflow: hidden; }
.line > span { display: block; transform: translateY(105%); transition: transform 1.05s var(--ease); }
.hero h1.in .line > span { transform: translateY(0); }
.hero h1 .line:nth-child(2) > span { transition-delay: 0.09s; }
.hero h1 .line:nth-child(3) > span { transition-delay: 0.18s; }

/* --- photographs wipe open rather than fading --- */
.unit-photo, .stop-photo, .split-photo, .hero-photo, .award-lead, .v-photo {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease);
}
.in .unit-photo, .in .stop-photo, .in .v-photo,
.split-photo.in, .hero-photo.in, .award-lead.in { clip-path: inset(0 0 0 0); }

/* --- icon discs settle in --- */
.rv .icon-well, .rv-l .icon-well, .rv-r .icon-well { transform: scale(0.82); opacity: 0; }
.in .icon-well { transform: scale(1); opacity: 1; transition-delay: 0.16s; }

/* --- the chain draws left to right --- */
.flow-step::before { transform: scaleX(0); transform-origin: left; transition: transform 0.95s var(--ease) 0.35s; }
.flow-step.in::before { transform: scaleX(1); }

/* --- hover: lift, and the accent moves --- */
.unit, .plate, .card { transition: transform 0.45s var(--ease); }
.unit:hover, .card:hover { transform: translateY(-4px); }
.plate:hover { transform: translateY(-3px); }
.btn i { transition: width 0.4s var(--ease); }
.btn:hover i { width: 28px; }
.stop-photo img, .award-lead img { transition: transform 0.9s var(--ease), filter 0.6s var(--ease); }
.stop:hover .stop-photo img { transform: scale(1.04); }
.stop-year { transition: transform 0.6s var(--ease); }
.stop:hover .stop-year { transform: translateY(-4px); }

/* --- the figures band counts up, and its rules divide as it arrives --- */
.figure { position: relative; }
.figure b { transition: opacity 0.5s var(--ease); }

/* --- menu items stagger in --- */
.menu-list a { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), color 0.25s var(--ease), padding-left 0.35s var(--ease); }
.menu.is-open .menu-list a { opacity: 1; transform: none; }
.menu.is-open .menu-list a:nth-child(1) { transition-delay: 0.06s; }
.menu.is-open .menu-list a:nth-child(2) { transition-delay: 0.12s; }
.menu.is-open .menu-list a:nth-child(3) { transition-delay: 0.18s; }
.menu.is-open .menu-list a:nth-child(4) { transition-delay: 0.24s; }
.menu.is-open .menu-list a:nth-child(5) { transition-delay: 0.30s; }
.menu.is-open .menu-list a:nth-child(6) { transition-delay: 0.36s; }
.menu-meta { opacity: 0; transition: opacity 0.7s var(--ease) 0.4s; }
.menu.is-open .menu-meta { opacity: 1; }

/* --- the page arrives rather than appearing --- */
.site-header, .rail { opacity: 0; animation: fade-in 1s var(--ease) 0.5s forwards; }
@keyframes fade-in { to { opacity: 1; } }

/* --- links underline from the left --- */
.contact-item a, .card h3 { background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.45s var(--ease); }
.contact-item a:hover, .card:hover h3 { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
  .head::after, .flow-step::before { transform: none !important; }
  .line > span { transform: none !important; }
  .unit-photo, .stop-photo, .split-photo, .hero-photo, .award-lead, .v-photo { clip-path: none !important; }
  .rv .icon-well, .rv-l .icon-well, .rv-r .icon-well { transform: none !important; opacity: 1 !important; }
  .site-header, .rail { opacity: 1 !important; animation: none !important; }
  .menu-list a, .menu-meta { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   INNER PAGES — writing index and the article itself
   ========================================================================== */

.doc-head { background: var(--panel); padding: clamp(120px, 13vw, 168px) 0 clamp(44px, 5vw, 70px); }
.doc-head .label { display: block; margin-bottom: 16px; }
.doc-kicker { grid-column: 1 / 10; }
.doc-title { grid-column: 1 / 10; font-size: clamp(28px, 4.2vw, 56px); line-height: 1.03; letter-spacing: -0.03em; }
.doc-side-meta { grid-column: 10 / 13; align-self: end; }
.doc-side-meta div { padding: 10px 0; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; }
.doc-side-meta div span:first-child { color: var(--ink-faint); font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding-top: 3px; }
.doc-side-meta div span:last-child { font-family: var(--display); font-weight: 700; font-size: 13px; text-align: right; }

.doc-hero { aspect-ratio: 21/9; overflow: hidden; background: var(--panel-deep); }
.doc-hero img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: filter 0.55s var(--ease); }
.doc-hero:hover img { filter: grayscale(0) contrast(1.02); }

.doc-body { padding: clamp(48px, 6vw, 86px) 0 var(--band-y); }
.doc-rail { grid-column: 1 / 3; }
.doc-rail-inner { position: sticky; top: 118px; }
.doc-rail .label { display: block; margin-bottom: 14px; }
.doc-rail a { display: block; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); padding: 9px 0; border-top: 1px solid var(--rule); transition: color 0.25s var(--ease), padding-left 0.3s var(--ease); }
.doc-rail a:hover { color: var(--ink); padding-left: 6px; }

.doc-col { grid-column: 4 / 11; }
.doc-lead { font-size: clamp(17px, 1.65vw, 21px); line-height: 1.62; color: var(--ink-2); margin-bottom: clamp(30px, 3.4vw, 44px); }
.doc-col p { font-size: 16px; line-height: 1.82; margin-bottom: 20px; }
.doc-col h2 { font-size: clamp(21px, 2.3vw, 29px); letter-spacing: -0.025em; margin: clamp(40px, 4.4vw, 60px) 0 16px; }
.doc-col h3 { font-size: 17.5px; letter-spacing: -0.015em; margin: 32px 0 10px; }
.doc-col h2 + p, .doc-col h3 + p { margin-top: 0; }
.doc-col .pull { margin: clamp(32px, 3.6vw, 48px) 0; }
.doc-col ul { list-style: none; margin: 0 0 22px; }
.doc-col li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.8; margin-bottom: 9px; }
.doc-col li::before { content: ""; position: absolute; left: 0; top: 13px; width: 10px; height: 1px; background: var(--ink-faint); }

.doc-tag { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--rule); padding: 7px 14px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }

.faq { margin-top: clamp(48px, 5.4vw, 74px); border-top: 1px solid var(--rule); }
.faq h2 { margin-top: 30px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 18px 0; font-family: var(--display); font-weight: 700; font-size: 15.5px; letter-spacing: -0.015em; transition: color 0.25s var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ink-soft); }
.faq summary::after { content: "+"; font-family: var(--body); font-weight: 500; font-size: 17px; color: var(--ink-faint); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; font-size: 15px; line-height: 1.75; max-width: 62ch; }

.doc-foot { margin-top: clamp(46px, 5vw, 68px); padding-top: 26px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.doc-foot span { font-size: 12.5px; color: var(--ink-soft); }

@media (max-width: 1000px) {
  .doc-kicker, .doc-title { grid-column: 1 / 13; }
  .doc-side-meta { grid-column: 1 / 13; margin-top: 30px; }
  .doc-rail { grid-column: 1 / 13; margin-bottom: 34px; }
  .doc-rail-inner { position: static; }
  .doc-col { grid-column: 1 / 13; }
  .doc-hero { aspect-ratio: 16/9; }
}

/* the 'all writing' button, and the brand cards that still carry a modifier */
.section-more { text-align: center; margin-top: clamp(34px, 3.6vw, 54px); }
.card-excerpt { font-size: 13.5px; line-height: 1.65; margin-bottom: 16px; color: var(--ink-soft); }
.unit--brand .unit-photo { background: var(--panel-deep); }

/* ==========================================================================
   WORDPRESS
   ========================================================================== */

.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 300; background: var(--char); color: #fff; padding: 12px 18px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }

body.admin-bar .site-header { top: 32px; }
body.admin-bar .doc-head { padding-top: calc(clamp(120px, 13vw, 168px) + 32px); }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

.doc-col img { margin: 30px 0; filter: grayscale(1) contrast(1.06); transition: filter 0.55s var(--ease); }
.doc-col img:hover { filter: grayscale(0); }
.doc-col ol { padding-left: 20px; margin: 0 0 22px; }
.doc-col ol li { padding-left: 4px; }
.doc-col ol li::before { display: none; }
.doc-col a { background-image: linear-gradient(var(--ink-faint), var(--ink-faint)); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.35s var(--ease); }
.doc-col a:hover { background-image: linear-gradient(var(--ink), var(--ink)); }
.doc-col blockquote { margin: clamp(30px, 3.4vw, 46px) 0; padding-left: 22px; border-left: 1px solid var(--ink); font-family: var(--script); font-style: italic; font-weight: 500; font-size: clamp(19px, 2vw, 25px); line-height: 1.34; color: var(--ink); }
.doc-col table { width: 100%; border-collapse: collapse; margin: 26px 0; }
.doc-col th, .doc-col td { border: 1px solid var(--rule); padding: 11px 13px; text-align: left; font-size: 14.5px; }

.pagination { margin-top: clamp(40px, 4.6vw, 62px); display: flex; justify-content: center; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.page-numbers { border: 1px solid var(--rule); padding: 10px 16px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; transition: all 0.25s var(--ease); }
.page-numbers:hover { color: var(--ink); border-color: var(--ink-faint); }
.page-numbers.current { background: var(--char); border-color: var(--char); color: #fff; }

.note-empty { grid-column: 1 / 13; font-size: 14.5px; color: var(--ink-soft); }
.form-note.is-error { color: #A33; }