/* ==========================================================================
   IKC — Page surfaces.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   Full-bleed corporate blue. The statement holds the left seven columns,
   a commissioned circular sculpture occupies the right. The stepped mark
   remains the visual signature of inner-page heroes. The three forces are
   named in text beneath so the image never carries information alone.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem) 0;
  overflow: hidden;
}

.hero--signal {
  background: var(--signal);
  color: var(--on-signal);
  padding-block: clamp(3rem, 1.6rem + 6vw, 6.5rem) clamp(3rem, 1.6rem + 4vw, 5rem);
}

.hero--signal .hero__statement,
.hero--signal .lead {
  color: var(--on-signal);
}

.hero--signal .hero__statement .is-back {
  color: var(--on-signal-soft);
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-6);
  align-items: start;
}

.hero__statement {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 104;
  font-weight: 600;
  font-size: var(--t-hero-statement);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
  margin: 0;
}

/* The second line is the one that carries the argument; it is set in ink
   while the first is set back in graphite, so the sentence has a hierarchy
   inside itself rather than needing an accent colour. */
.hero__statement span {
  display: block;
}

.hero__field {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  color: var(--paper);
}

.hero__field-plate {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  display: grid;
  place-items: center;
}

.hero-engraving {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1) grayscale(1) contrast(1.2);
  mix-blend-mode: screen;
}

.disc-field {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__subline {
  grid-column: 1 / -1;
}

.hero--signal .hero__subline {
  color: var(--on-signal-soft);
  max-width: var(--measure);
}

.hero__actions {
  grid-column: 1 / -1;
  margin-top: var(--s-2);
}

/* Narrow: the argument reads before the diagram illustrating it. */
@media (max-width: 59.99rem) {
  .hero__statement {
    order: 1;
  }
  .hero__subline {
    order: 2;
  }
  .hero__actions {
    order: 3;
  }
  .hero__field {
    order: 4;
    margin-top: var(--s-3);
  }
}

@media (min-width: 60rem) {
  .hero__statement {
    grid-column: 1 / span 7;
  }

  .hero__field {
    grid-column: 8 / span 5;
    grid-row: 1 / span 4;
    justify-content: flex-start;
  }

  .hero__field-plate {
    aspect-ratio: 1;
    flex: none;
    width: 100%;
    min-height: 0;
    max-width: none;
    height: auto;
  }

  .hero__subline {
    grid-column: 1 / span 5;
  }

  .hero__actions {
    grid-column: 1 / span 7;
  }
}

/* The register beneath the hero: the three forces, stated plainly. This is
   the text equivalent of the field and remains the only source of that
   information when motion or scripting is unavailable. */
.force-register {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-5);
  margin-top: 0;
  padding-top: var(--s-7);
  border-top: 0;
}

.hero--signal .force-register {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid color-mix(in oklab, var(--on-signal) 28%, transparent);
}

.hero--signal .force h2 {
  color: var(--on-signal);
}

.hero--signal .force p {
  color: var(--on-signal-soft);
}

.force {
  grid-column: 1 / -1;
}

@media (min-width: 48rem) {
  .force {
    grid-column: span 4;
  }
}

.force h2 {
  font-size: var(--t-h4);
  font-family: var(--font-ui);
  font-weight: 650;
  letter-spacing: var(--tr-heading);
  color: var(--ink);
  margin-bottom: var(--s-3);
}

.force p {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--graphite);
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   BELIEF — a full-width statement with its explanation set beside it.
   -------------------------------------------------------------------------- */

.belief {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-6);
}

.belief__statement {
  grid-column: 1 / -1;
}

.belief__body {
  grid-column: 1 / -1;
}

@media (min-width: 60rem) {
  .belief__statement {
    grid-column: 1 / span 6;
  }

  .belief__body {
    grid-column: 8 / span 5;
    padding-top: 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   CAPABILITY SYSTEM
   Six domains shown as a connected sequence rather than six cards. A single
   hairline runs the length of the list; each domain marks it.
   -------------------------------------------------------------------------- */

.capability-system {
  display: grid;
  gap: 0;
  border-top: var(--rule);
}

.capability {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-2);
  padding-block: var(--s-5);
  border-bottom: var(--rule-soft);
  position: relative;
}

.capability__stage {
  grid-column: 1 / -1;
  color: var(--signal-ink);
}

.capability__name {
  grid-column: 1 / -1;
  font-size: var(--t-h4);
}

.capability__list {
  grid-column: 1 / -1;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--graphite);
}

.capability__list li {
  position: relative;
}

.capability__list li + li::before {
  content: '';
  position: absolute;
  left: calc(var(--s-4) / -2);
  top: 0.55em;
  width: 1px;
  height: 0.9em;
  background: var(--line-strong);
}

@media (min-width: 60rem) {
  .capability__stage {
    grid-column: 1 / span 2;
    padding-top: 0.45rem;
  }

  .capability__name {
    grid-column: 3 / span 3;
  }

  .capability__list {
    grid-column: 7 / span 6;
    padding-top: 0.3rem;
  }
}

/* --------------------------------------------------------------------------
   COMPANIES
   Editorial rows, not a logo grid. Logo, sector/copy and host sit on the
   same ruled line. The sector is a column label, never an eyebrow. Legal
   names live in a visually-hidden heading so the brand mark can use the
   width. The description is the full approved copy, set as paragraphs.
   -------------------------------------------------------------------------- */

.company-row__logo {
  grid-column: 1 / -1;
  display: block;
  width: var(--company-logo-w);
  height: var(--company-logo-h);
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.company-row > .row__inner {
  padding-inline: var(--s-4);
  margin-inline: calc(var(--s-4) * -1);
}

.company-row__logo--ajan {
  height: var(--company-logo-ajan-h);
}

.company-row__logo--sender,
.company-row__logo--workly {
  height: var(--company-logo-sender-h);
}

.company-row__sector {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 650;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--s-3);
}

.company-row__host {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--t-small);
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--signal-ink);
}

.company-row__slot {
  display: none;
}

.company-row__desc p {
  margin: 0;
}

.company-row__desc p + p {
  margin-top: var(--s-4);
}

.company-row .row__link:hover .company-row__host {
  color: var(--ink);
}

.company-row .row__link,
.company-row .row__inner {
  padding-block: var(--s-5);
}

@media (min-width: 60rem) {
  .company-row .row__link,
  .company-row .row__inner {
    align-items: start;
  }

  .company-row .row__link .company-row__logo,
  .company-row .row__inner .company-row__logo {
    grid-column: 1 / span 2;
    align-self: start;
  }

  .company-row .row__link:not(:has(.row__index)) .row__body,
  .company-row .row__inner:not(:has(.row__index)) .row__body {
    grid-column: 3 / span 8;
  }

  .company-row .row__link .row__aside,
  .company-row .row__inner .row__aside {
    grid-column: 11 / span 2;
    text-align: end;
    padding-top: 0;
    align-self: start;
  }
}

.companies-partner .section-head .lead {
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.companies-follow {
  margin-top: var(--s-7);
}

.companies-mark {
  display: block;
  width: var(--s-7);
  height: var(--s-7);
  margin-bottom: var(--s-5);
  color: var(--signal-ink);
}

.companies-lenses {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  border-top: var(--rule-strong);
}

.companies-lens {
  padding-block: var(--s-6);
  border-bottom: var(--rule);
}

.companies-lens h3 {
  margin-bottom: var(--s-3);
  font-size: var(--t-h3);
}

.companies-lens p {
  max-width: var(--measure-narrow);
  color: var(--ink-soft);
}

@media (min-width: 60rem) {
  .companies-lenses {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .companies-lens {
    padding-block: var(--s-7);
    border-bottom: var(--rule-strong);
  }

  .companies-lens:not(:last-child) {
    padding-inline-end: var(--s-7);
  }

  .companies-lens + .companies-lens {
    padding-inline-start: var(--s-7);
    border-inline-start: var(--rule);
  }

  .companies-lens p {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   TEAM — founding partners on the row grid. Name and role sit together;
   the biography is the reading column. Not a card and not a photo grid.
   -------------------------------------------------------------------------- */

.person .row__inner {
  padding-block: var(--s-7);
  row-gap: var(--s-4);
  align-items: start;
}

.person__identity {
  grid-column: 1 / -1;
}

.person__name {
  font-size: var(--t-h3);
  font-variation-settings: 'wdth' 100;
}

.person__role {
  margin-top: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 650;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--stone);
}

.person__body {
  grid-column: 1 / -1;
  max-width: var(--measure);
  color: var(--ink-soft);
}

.person__body p + p {
  margin-top: var(--s-4);
}

@media (min-width: 60rem) {
  .person__identity {
    grid-column: 1 / span 4;
  }

  .person__body {
    grid-column: 6 / span 7;
    max-width: none;
  }

  .person .person__name {
    grid-column: auto;
  }
}

.organ .row__inner,
.way .row__inner {
  align-items: start;
}

@media (min-width: 60rem) {
  .organ .row__inner:not(:has(.row__index)) .row__title,
  .way .row__inner:not(:has(.row__index)) .row__title {
    grid-column: 1 / span 4;
  }

  .organ .row__inner:not(:has(.row__index)) .row__body,
  .way .row__inner:not(:has(.row__index)) .row__body {
    grid-column: 6 / span 7;
  }
}

/* --------------------------------------------------------------------------
   CAREERS
   Four reading modes: an essay, five disciplines on one meridian (many
   orbits, one mechanism), a sunk perspective, and a six-trait stance.
   No perk list and no invented roles.
   -------------------------------------------------------------------------- */

.career-mark {
  display: block;
  width: 2rem;
  height: 2rem;
  color: var(--signal-ink);
}

.career-fields__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-5);
  margin-bottom: var(--s-8);
}

.career-fields__head > h2,
.career-fields__head > p {
  grid-column: 1 / -1;
}

.career-fields__head > p {
  max-width: var(--measure);
  color: var(--ink-soft);
}

.career-fields {
  list-style: none;
  position: relative;
  border-top: var(--rule-strong);
}

.career-fields::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
  pointer-events: none;
}

.career-field {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: var(--s-5);
  align-items: start;
  padding-block: var(--s-6);
  border-bottom: var(--rule);
}

.career-field .career-mark {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: relative;
  z-index: 1;
  box-sizing: content-box;
  padding-block: var(--s-2);
  margin-block: calc(var(--s-2) * -1);
  background: var(--paper);
}

.career-field h3,
.career-field p {
  grid-column: 2;
}

.career-traits {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--s-8);
  border-top: var(--rule);
}

.career-trait {
  padding-block: var(--s-6);
  border-top: var(--rule-soft);
}

.career-trait:first-child {
  border-top: 0;
}

.career-trait .career-mark {
  margin-bottom: var(--s-4);
}

.career-field h3,
.career-trait h3 {
  margin-bottom: var(--s-3);
  font-size: var(--t-h3);
}

.career-field p,
.career-trait p {
  max-width: var(--measure-narrow);
  color: var(--ink-soft);
}

.career-span {
  background: var(--paper-sunk);
  border-block: var(--rule-soft);
}

.career-span__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-6);
}

.career-span__grid > h2,
.career-span__copy {
  grid-column: 1 / -1;
}

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

.career-span__copy > * + * {
  margin-top: var(--s-4);
}

.career-span em {
  font-style: normal;
  color: var(--signal-ink);
}

.career-open {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-8);
  align-items: start;
}

.career-open__intro,
.career-open__body {
  grid-column: 1 / -1;
}

.career-open__intro .lead {
  max-width: var(--measure-narrow);
  margin-top: var(--s-5);
}

.career-open__body .contact-primary-mail {
  margin-top: var(--s-6);
}

@media (min-width: 60rem) {
  .career-fields__head:has(> p) > h2 {
    grid-column: 1 / span 5;
  }

  .career-fields__head > p {
    grid-column: 7 / span 6;
  }

  .career-field {
    grid-template-columns: 2rem minmax(10rem, 0.42fr) minmax(0, 1fr);
    column-gap: var(--col-gap);
    padding-block: var(--s-7);
    border-bottom: var(--rule-strong);
  }

  .career-field .career-mark {
    grid-row: 1;
  }

  .career-field h3 {
    grid-column: 2;
    margin-bottom: 0;
    padding-top: 0.12em;
  }

  .career-field p {
    grid-column: 3;
    max-width: none;
  }

  .career-span__grid > h2 {
    grid-column: 1 / span 4;
  }

  .career-span__copy {
    grid-column: 6 / span 7;
  }

  .career-traits {
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
  }

  .career-trait {
    padding: var(--s-7) 0;
  }

  .career-trait:nth-child(odd) {
    padding-inline-end: var(--s-7);
    border-inline-end: var(--rule-soft);
  }

  .career-trait:nth-child(even) {
    padding-inline-start: var(--s-7);
  }

  .career-trait:nth-child(-n + 2) {
    border-top: 0;
  }

  .career-trait:nth-child(n + 3) {
    border-top: var(--rule-soft);
  }

  .career-open__intro {
    grid-column: 1 / span 4;
  }

  .career-open__body {
    grid-column: 6 / span 7;
  }
}

.relationship {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 650;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--ink-soft);
  border: var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.28rem 0.5rem;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   FIVE QUESTIONS — the signature editorial device. Numbers are load-bearing
   here: the sequence is the argument, so they are set as real ordinals.
   -------------------------------------------------------------------------- */

.questions {
  list-style: none;
  counter-reset: q;
  border-top: var(--rule);
}

.questions li {
  counter-increment: q;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-2);
  padding-block: var(--s-6);
  border-bottom: var(--rule);
}

.questions li::before {
  content: counter(q, decimal-leading-zero);
  grid-column: 1 / -1;
  font-family: var(--font-ui);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: var(--tr-meta);
  color: var(--signal-ink);
}

.questions h3 {
  grid-column: 1 / -1;
  font-size: var(--t-h3);
  max-width: 22ch;
}

.questions p {
  color: var(--ink-soft);
}

.questions > li > p,
.questions__answer {
  grid-column: 1 / -1;
}

.questions__answer {
  display: grid;
  gap: var(--s-3);
}

.questions__answer strong {
  color: var(--ink);
}

@media (min-width: 60rem) {
  .questions li::before {
    grid-column: 1 / span 1;
    padding-top: 0.7rem;
  }

  .questions h3 {
    grid-column: 2 / span 5;
  }

  .questions > li > p,
  .questions__answer {
    grid-column: 8 / span 5;
    padding-top: 0.45rem;
  }
}

/* --------------------------------------------------------------------------
   FOUNDER INVITATION — a statement and one action, on paper. The footer
   is the sole inverted surface, so this close stays in the page.
   -------------------------------------------------------------------------- */

.invitation {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-6);
  align-items: end;
}

.invitation__statement {
  grid-column: 1 / -1;
}

.invitation__actions {
  grid-column: 1 / -1;
}

.invitation__lead {
  margin-top: var(--s-5);
  max-width: var(--measure-narrow);
}

@media (min-width: 60rem) {
  .invitation__statement {
    grid-column: 1 / span 7;
  }

  .invitation__actions {
    grid-column: 9 / span 4;
    justify-self: end;
  }
}

/* --------------------------------------------------------------------------
   CLOSING — one line, full stop.
   -------------------------------------------------------------------------- */

.closing {
  padding-block: var(--s-11);
}

.closing__statement {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 106;
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  max-width: 18ch;
  text-wrap: balance;
}

.closing__answer {
  margin-top: var(--s-6);
}

/* --------------------------------------------------------------------------
   INVESTMENT PHILOSOPHY
   Three distinct reading modes replace repeated full-width rows: an open
   icon lens, the numbered decision sequence, and a compact boundary index.
   -------------------------------------------------------------------------- */

.philosophy-overview__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-5);
  margin-bottom: var(--s-8);
}

.philosophy-overview__head > h2,
.philosophy-overview__copy {
  grid-column: 1 / -1;
}

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

.philosophy-overview__copy > * + * {
  margin-top: var(--s-4);
}

.philosophy-lenses {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  border-top: var(--rule-strong);
}

.philosophy-lens {
  padding-block: var(--s-6);
  border-bottom: var(--rule);
}

.philosophy-lens__mark {
  display: block;
  width: var(--s-7);
  height: var(--s-7);
  margin-bottom: var(--s-5);
  color: var(--signal-ink);
}

.philosophy-lens h3 {
  margin-bottom: var(--s-3);
  font-size: var(--t-h3);
}

.philosophy-lens p {
  max-width: var(--measure-narrow);
  color: var(--ink-soft);
}

.philosophy-questions {
  background: var(--paper-sunk);
  border-block: var(--rule-soft);
}

.philosophy-questions .questions {
  border-top: var(--rule-strong);
}

.philosophy-questions .questions li {
  border-bottom: var(--rule-strong);
}

.philosophy-boundaries {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-8);
  align-items: start;
}

.philosophy-boundaries__intro,
.philosophy-boundaries__list {
  grid-column: 1 / -1;
}

.philosophy-boundaries__intro .lead {
  max-width: var(--measure-narrow);
  margin-top: var(--s-5);
}

.philosophy-boundaries__list {
  list-style: none;
  border-top: var(--rule-strong);
}

.philosophy-boundaries__list li {
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-5);
  border-bottom: var(--rule);
}

.philosophy-boundaries__list h3 {
  font-size: var(--t-h4);
  line-height: var(--lh-heading);
}

.philosophy-boundaries__list p {
  color: var(--ink-soft);
}

@media (min-width: 60rem) {
  .philosophy-overview__head > h2 {
    grid-column: 1 / span 5;
  }

  .philosophy-overview__copy {
    grid-column: 7 / span 6;
  }

  .philosophy-lenses {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .philosophy-lens {
    padding-block: var(--s-7);
    border-bottom: var(--rule-strong);
  }

  .philosophy-lens:not(:last-child) {
    padding-inline-end: var(--s-7);
  }

  .philosophy-lens + .philosophy-lens {
    padding-inline-start: var(--s-7);
    border-inline-start: var(--rule);
  }

  .philosophy-boundaries__intro {
    grid-column: 1 / span 4;
  }

  .philosophy-boundaries__list {
    grid-column: 6 / span 7;
  }

  .philosophy-boundaries__list li {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .philosophy-boundaries__list h3 {
    grid-column: 1 / span 3;
  }

  .philosophy-boundaries__list p {
    grid-column: 4 / span 4;
  }
}

/* --------------------------------------------------------------------------
   PAGE HERO
   Every route except home opens the same way: the argument at display scale
   on the left, the supporting paragraph beside it, and the disc field as
   the page's architectural mark on the right.
   -------------------------------------------------------------------------- */

.page-hero {
  padding-block: clamp(3rem, 1.9rem + 4.6vw, 6rem) var(--section-y-tight);
}

.page-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-6);
  align-items: end;
}

.page-hero__title {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 104;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  max-width: 18ch;
}

.page-hero__lead {
  grid-column: 1 / -1;
}

.page-hero__lead .lead {
  max-width: none;
}

.page-hero__lead .lead + .lead {
  margin-top: var(--s-4);
}

.page-hero__field {
  grid-column: 1 / -1;
  color: var(--signal);
  width: min(11rem, 42vw);
}

.page-hero__field--engraving {
  width: min(20rem, 72vw);
  color: inherit;
}

.page-hero__field--engraving-wide {
  width: min(26rem, 88vw);
}

.page-hero-engraving {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

@media (min-width: 60rem) {
  .page-hero__title {
    grid-column: 1 / span 7;
  }

  .page-hero__lead {
    grid-column: 1 / span 7;
    grid-row: 2;
  }

  .page-hero__field {
    grid-column: 8 / span 5;
    grid-row: 1 / span 2;
    width: min(16rem, 100%);
    justify-self: end;
    align-self: center;
  }

  .page-hero__field--engraving {
    width: min(24rem, 100%);
  }

  .page-hero__field--engraving-wide {
    width: 100%;
  }

}

/* --------------------------------------------------------------------------
   ABOUT — untitled essay, then four stance marks on a ruled 2×2.
   Hairlines only; no cards. Marks share the action-arrow 1.4 stroke.
   -------------------------------------------------------------------------- */

.about-essay {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--s-5);
}

.about-essay p {
  max-width: none;
}

.about-essay p + p {
  margin-top: 0;
}

.about-span {
  display: block;
  width: min(100%, var(--about-span-max));
  margin-top: var(--s-5);
  margin-inline: auto;
  aspect-ratio: var(--about-span-ratio);
  overflow: hidden;
}

.about-span__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--about-span-position-y);
  opacity: var(--about-span-opacity);
  mix-blend-mode: multiply;
}

.stance {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--s-5);
  border-top: var(--rule);
}

.stance__item {
  padding-block: var(--s-6);
  border-top: var(--rule-soft);
}

.stance__item:first-child {
  border-top: 0;
}

.stance__mark {
  display: block;
  width: 2rem;
  height: 2rem;
  color: var(--signal-ink);
  margin-bottom: var(--s-4);
}

.stance__title {
  font-size: var(--t-h3);
  margin-bottom: var(--s-3);
}

.stance__item p {
  color: var(--ink-soft);
  max-width: none;
}

.stance__item p + p {
  margin-top: var(--s-4);
}

.stance__item a {
  padding-block: var(--s-1);
}

@media (min-width: 60rem) {
  .about-essay {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--col-gap);
    row-gap: 0;
  }

  .stance {
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
  }

  .stance__item {
    padding: var(--s-7) 0;
  }

  .stance__item:nth-child(odd) {
    padding-inline-end: var(--s-7);
    border-inline-end: var(--rule-soft);
  }

  .stance__item:nth-child(even) {
    padding-inline-start: var(--s-7);
  }

  .stance__item:nth-child(-n + 2) {
    border-top: 0;
  }

  .stance__item:nth-child(n + 3) {
    border-top: var(--rule-soft);
  }
}

/* --------------------------------------------------------------------------
   PROSE BLOCK — a titled passage on the editorial grid.
   -------------------------------------------------------------------------- */

.passage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-4);
  padding-block: var(--s-7);
  border-top: var(--rule-soft);
}

.passage:first-child {
  border-top: 0;
  padding-top: 0;
}

.passage__title {
  grid-column: 1 / -1;
  font-size: var(--t-h3);
}

.passage__body {
  grid-column: 1 / -1;
  max-width: var(--measure);
}

.passage__body p + p {
  margin-top: var(--s-4);
}

/* Inline legal/document links keep a 24px touch box without changing prose rhythm. */
.passage__body a {
  padding-block: var(--s-1);
}

@media (min-width: 60rem) {
  .passage__title {
    grid-column: 1 / span 4;
  }

  .passage__body {
    grid-column: 6 / span 7;
  }
}

/* A plain marked list inside a passage. The marker is a hairline, not a bullet
   glyph and not an icon. */
.marked {
  list-style: none;
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.marked li {
  position: relative;
  padding-inline-start: var(--s-5);
}

.marked li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.72em;
  width: 0.75rem;
  height: 1px;
  background: var(--line-strong);
}

.marked--signal li::before {
  background: var(--signal);
}

/* --------------------------------------------------------------------------
   PROCESS — an honest sequence. The numbers carry the order, which is the
   information; they are not decoration.
   -------------------------------------------------------------------------- */

.process {
  list-style: none;
  counter-reset: step;
  border-top: var(--rule);
}

.process li {
  counter-increment: step;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-2);
  padding-block: var(--s-5);
  border-bottom: var(--rule-soft);
}

.process li::before {
  content: counter(step, decimal-leading-zero);
  grid-column: 1 / -1;
  font-family: var(--font-ui);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: var(--tr-meta);
  color: var(--stone);
}

.process h3 {
  grid-column: 1 / -1;
  font-size: var(--t-h4);
}

.process p {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: var(--t-small);
  line-height: 1.55;
}

@media (min-width: 60rem) {
  .process li::before {
    grid-column: 1 / span 1;
    padding-top: 0.5rem;
  }

  .process h3 {
    grid-column: 2 / span 4;
  }

  .process p {
    grid-column: 7 / span 6;
    padding-top: 0.25rem;
  }
}

/* --------------------------------------------------------------------------
   CONTACT
   Two conversation lanes, a four-channel directory, then the office.
   Marks are the wayfinding. Emails are the action. Hairline
   rules, not containers, hold the page together.
   -------------------------------------------------------------------------- */

.contact-hero__note {
  margin-top: var(--s-4);
  color: var(--graphite);
  max-width: var(--measure-narrow);
}

.contact-mark {
  display: block;
  width: var(--s-6);
  height: var(--s-6);
  flex: none;
}

.contact-focus__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-7);
  align-items: start;
}

.contact-focus__heading,
.contact-focus__body,
.contact-focus__copy,
.contact-circle,
.contact-focus__follow {
  grid-column: 1 / -1;
}

.contact-focus__heading {
  padding-top: 0;
}

.contact-focus__heading > .contact-mark {
  width: var(--s-8);
  height: var(--s-8);
  margin-bottom: var(--s-5);
  color: var(--signal-ink);
}

.contact-focus__heading h2 {
  font-size: var(--t-h2);
  max-width: 15ch;
}

.contact-focus__lead {
  margin-top: var(--s-5);
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--ink-soft);
  max-width: var(--measure-narrow);
}

.contact-focus__copy {
  display: grid;
  gap: var(--s-4);
  color: var(--ink-soft);
  max-width: none;
}

.contact-circle {
  margin-top: var(--s-2);
}

.contact-focus__follow {
  margin-top: var(--s-2);
}

.contact-cues {
  list-style: none;
  display: grid;
  gap: var(--s-5);
}

.contact-cues li {
  display: grid;
  grid-template-columns: var(--s-7) minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: start;
}

.contact-cues .contact-mark {
  width: var(--s-6);
  height: var(--s-6);
  margin-top: 0.15rem;
  color: var(--signal-ink);
}

.contact-cues p {
  color: var(--ink-soft);
  max-width: var(--measure-narrow);
}

.contact-primary-mail {
  display: grid;
  grid-template-columns: var(--s-6) minmax(0, 1fr) var(--s-4);
  column-gap: var(--s-4);
  align-items: center;
  margin-top: var(--s-6);
  margin-inline: calc(var(--s-3) * -1);
  padding: var(--s-5) var(--s-3);
  border-top: var(--rule-strong);
  color: var(--ink);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease-out),
    background var(--d-fast) var(--ease-out);
}

.contact-primary-mail:hover,
.contact-primary-mail:focus-visible {
  color: var(--signal-ink);
  background: var(--signal-wash);
}

.contact-primary-mail .contact-mark {
  color: var(--signal-ink);
}

.contact-primary-mail__copy {
  min-width: 0;
}

.contact-primary-mail__copy .meta {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--graphite);
}

.contact-primary-mail__address {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-h4);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.contact-primary-mail > .action__mark {
  width: var(--s-4);
  height: var(--s-4);
}

.contact-primary-mail:hover > .action__mark {
  transform: translateX(var(--s-1));
}

.contact-note {
  margin-top: var(--s-5);
  font-family: var(--font-ui);
  font-size: var(--t-small);
  line-height: var(--lh-body);
  color: var(--graphite);
  max-width: var(--measure-narrow);
}

.contact-circle {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--s-4);
  border-top: var(--rule);
}

.contact-circle li {
  display: grid;
  grid-template-columns: var(--s-6) minmax(0, 1fr);
  column-gap: var(--s-3);
  align-items: center;
  min-height: var(--s-8);
  padding-block: var(--s-4);
  border-bottom: var(--rule);
}

.contact-circle .contact-mark {
  width: var(--s-5);
  height: var(--s-5);
  color: var(--signal-ink);
}

.contact-circle span {
  font-family: var(--font-ui);
  font-size: var(--t-small);
  font-weight: 650;
  letter-spacing: var(--tr-heading);
  color: var(--ink);
}

.contact-focus--partnership {
  background: var(--paper-sunk);
}

.contact-directory {
  list-style: none;
  border-top: var(--rule-strong);
}

.contact-directory > li {
  border-bottom: var(--rule);
}

.contact-directory__link {
  display: grid;
  grid-template-columns: var(--s-8) minmax(0, 1fr) var(--s-5);
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  align-items: center;
  min-height: var(--s-10);
  padding-block: var(--s-5);
  color: var(--ink);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease-out),
    background var(--d-fast) var(--ease-out);
}

.contact-directory__link:hover,
.contact-directory__link:focus-visible {
  background: var(--signal-wash);
  color: var(--signal-ink);
}

.contact-directory__link .contact-mark {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: var(--s-7);
  height: var(--s-7);
  color: var(--signal-ink);
}

.contact-directory__topic {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: var(--tr-heading);
}

.contact-directory__email {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--signal-ink);
  overflow-wrap: anywhere;
}

.contact-directory__link > .action__mark {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: var(--s-4);
  height: var(--s-4);
}

.contact-directory__link:hover > .action__mark {
  transform: translateX(var(--s-1));
}

.contact-directory__note {
  display: grid;
  grid-template-columns: var(--s-5) minmax(0, 1fr);
  column-gap: var(--s-3);
  align-items: start;
  margin-top: var(--s-5);
  font-family: var(--font-ui);
  font-size: var(--t-small);
  line-height: var(--lh-body);
  color: var(--graphite);
  max-width: var(--measure);
}

.contact-directory__note .contact-mark {
  width: var(--s-5);
  height: var(--s-5);
  color: var(--signal-ink);
}

.contact-office {
  padding-block: var(--section-y-tight);
}

.contact-office__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-7);
  align-items: start;
}

.contact-office__intro,
.contact-office__details {
  grid-column: 1 / -1;
}

.contact-office__intro h2 {
  font-size: var(--t-h1);
  max-width: 14ch;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}

.contact-office__item {
  display: grid;
  grid-template-columns: var(--s-6) minmax(0, 1fr) auto;
  column-gap: var(--s-4);
  align-items: start;
  padding-block: var(--s-5);
  border-top: var(--hair) solid color-mix(in oklab, var(--on-signal) 28%, transparent);
  color: var(--on-signal);
  text-decoration: none;
}

.contact-office__item:last-child {
  border-bottom: var(--hair) solid color-mix(in oklab, var(--on-signal) 28%, transparent);
}

.contact-office__item .contact-mark {
  color: var(--on-signal-soft);
}

.contact-office__item .meta {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--on-signal-soft);
}

.contact-office__item address,
.contact-office__item strong {
  display: block;
  font-style: normal;
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  font-weight: 500;
  color: var(--on-signal);
  overflow-wrap: anywhere;
}

.contact-office__item > .action__mark {
  align-self: center;
  width: var(--s-4);
  height: var(--s-4);
}

.contact-office__item[href]:hover strong,
.contact-office__item[href]:focus-visible strong {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.contact-office__item[href]:hover > .action__mark {
  transform: translateX(var(--s-1));
}

.contact-directory-section h2 {
  margin-bottom: var(--s-6);
  font-size: var(--t-h2);
}

@media (min-width: 60rem) {
  .contact-focus__heading {
    grid-column: 1 / span 5;
  }

  .contact-focus__body {
    grid-column: 7 / span 6;
    padding-top: var(--s-1);
  }

  .contact-focus--partnership .contact-focus__heading,
  .contact-focus--partnership .contact-focus__copy,
  .contact-focus--partnership .contact-focus__follow {
    grid-column: 1 / -1;
  }

  .contact-focus--partnership .contact-focus__heading h2,
  .contact-focus--partnership .contact-focus__lead {
    max-width: none;
  }

  .contact-circle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-circle li:nth-child(odd) {
    padding-inline-end: var(--s-5);
  }

  .contact-circle li:nth-child(even) {
    padding-inline-start: var(--s-5);
    border-inline-start: var(--rule);
  }

  .contact-directory__link {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .contact-directory__link .contact-mark {
    grid-column: 1 / span 1;
    grid-row: 1;
  }

  .contact-directory__topic {
    grid-column: 2 / span 4;
    grid-row: 1;
  }

  .contact-directory__email {
    grid-column: 7 / span 5;
    grid-row: 1;
    font-size: var(--t-body);
  }

  .contact-directory__link > .action__mark {
    grid-column: 12;
    grid-row: 1;
    justify-self: end;
  }

  .contact-office__intro {
    grid-column: 1 / span 5;
  }

  .contact-office__details {
    grid-column: 7 / span 6;
  }
}

@media (min-width: 80rem) {
  .contact-circle {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .contact-circle li {
    grid-template-columns: 1fr;
    align-content: start;
    gap: var(--s-4);
    min-height: 0;
    padding-inline: 0;
    padding-block: var(--s-6);
    border-inline-start: 0;
  }

  .contact-circle li + li {
    padding-inline-start: var(--s-5);
    border-inline-start: var(--rule);
  }

  .contact-circle li:not(:last-child) {
    padding-inline-end: var(--s-5);
  }

  .contact-circle .contact-mark {
    width: var(--s-7);
    height: var(--s-7);
  }
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */

.form {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-5);
}

.field {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--s-2);
}

@media (min-width: 48rem) {
  .field--half {
    grid-column: span 6;
  }
}

.field > label {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 650;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field .req {
  color: var(--signal-ink);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 2.875rem;
  padding: var(--s-3) 0;
  background: transparent;
  border: 0;
  border-bottom: var(--rule-strong);
  border-radius: 0;
  font-family: var(--font-text);
  font-size: var(--t-body);
  color: var(--ink);
  transition: border-color var(--d-fast) var(--ease-out);
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.55;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-bottom-color: var(--ink);
  outline: none;
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--stone);
}

.field [aria-invalid='true'] {
  border-bottom-color: var(--alert);
}

.field__hint {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  color: var(--graphite);
}

.field__error {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 650;
  color: var(--alert);
  margin: 0;
}

.field__error:empty {
  display: none;
}

.field--consent {
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: var(--rule-soft);
}

.field--consent input {
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  margin-top: 0.1rem;
  border: var(--rule-strong);
  padding: 0;
}

.field--consent label {
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* The consent notice link is a thumb target sitting inside a sentence.
   Vertical padding on an inline element grows the hit box without touching
   the line box, so the paragraph still sets exactly as it did. */
.field--consent label a {
  padding-block: 0.3rem;
}

.form__submit {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
}

.form__status {
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--graphite);
}

.form__status[data-kind='error'] {
  color: var(--signal-ink);
  font-weight: 650;
}

.form__status[data-kind='ok'] {
  color: var(--ink);
}

.form__notice {
  grid-column: 1 / -1;
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  line-height: 1.6;
  color: var(--graphite);
  border-inline-start: 1px solid var(--line-strong);
  padding-inline-start: var(--s-4);
  max-width: var(--measure-narrow);
}

/* --------------------------------------------------------------------------
   DEFINITION ROWS — corporate records, governance documents, press facts.
   -------------------------------------------------------------------------- */

.records {
  border-top: var(--rule);
  margin: 0;
}

.records > div {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-2);
  padding-block: var(--s-4);
  border-bottom: var(--rule-soft);
}

.records dt {
  grid-column: 1 / -1;
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 650;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--stone);
}

.records dd {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--t-small);
}

/* A record whose value is a download is still a thumb target: the type stays
   in the record register, the hit area does not. */
.records dd a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--signal-ink);
  text-decoration-color: var(--signal);
}

@media (min-width: 48rem) {
  .records dt {
    grid-column: 1 / span 3;
    padding-top: 0.2rem;
  }

  .records dd {
    grid-column: 4 / span 9;
  }
}

/* --------------------------------------------------------------------------
   SCALING MAP — Product → Market → Operating system → Scale → Institution.
   A horizontal register on wide screens, a vertical reading sequence on
   narrow ones. The stages are the argument, not decoration.
   -------------------------------------------------------------------------- */

.scaling-map {
  display: grid;
  gap: 0;
  border-top: var(--rule);
  counter-reset: stage;
}

.stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-3);
  padding-block: var(--s-6);
  border-bottom: var(--rule);
}

.stage__name {
  grid-column: 1 / -1;
  font-size: var(--t-h3);
}

.stage__question {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  max-width: var(--measure-narrow);
}

.stage__caps {
  grid-column: 1 / -1;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
}

.stage__caps li {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: var(--rule);
  border-radius: var(--radius);
  padding: 0.28rem 0.5rem;
}

@media (min-width: 60rem) {
  .stage__name {
    grid-column: 1 / span 3;
  }

  .stage__question {
    grid-column: 4 / span 4;
  }

  .stage__caps {
    grid-column: 8 / span 5;
    padding-top: 0.3rem;
  }
}

/* The page hero already carries a full measure of space beneath it; the first
   section after it must not stack a second one. */
.page-hero + .section {
  padding-top: var(--section-y-tight);
}

/* --------------------------------------------------------------------------
   BREADCRUMB — deeper routes only.
   -------------------------------------------------------------------------- */

.breadcrumb {
  padding-top: var(--s-6);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  list-style: none;
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 650;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--stone);
}

.breadcrumb li + li::before {
  content: '/';
  margin-inline-end: var(--s-3);
  color: var(--line-strong);
}

.breadcrumb a {
  text-decoration: none;
  color: var(--graphite);
}

.breadcrumb a:hover {
  color: var(--signal-ink);
}

.breadcrumb + .page-hero {
  padding-top: var(--s-6);
}

/* --------------------------------------------------------------------------
   BRAND — the logo is the subject. Colour fields show the two grounds;
   construction sits on hairlines, not cards.
   -------------------------------------------------------------------------- */

.wordmark--brand.brand-lockup {
  color: inherit;
}

.page-hero__field--lockup {
  width: min(22rem, 88vw);
  color: var(--brand-mark);
}

.page-hero__field--lockup .brand-lockup {
  height: calc(var(--wordmark-h) * 2.1);
}

.brand-grounds {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--rule);
}

.brand-ground {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--s-6);
  min-height: var(--s-11);
  padding: var(--s-9) var(--s-6);
}

.brand-ground--paper {
  background: var(--paper-sunk);
  color: var(--brand-mark);
  border-bottom: var(--rule);
}

.brand-ground--signal {
  background: var(--signal);
  color: var(--brand-mark-reversed);
}

.brand-ground .brand-lockup {
  height: calc(var(--wordmark-h) * 1.85);
}

.brand-ground figcaption {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 650;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  text-align: center;
  max-width: 36ch;
}

.brand-ground--paper figcaption {
  color: var(--graphite);
}

.brand-ground--signal figcaption {
  color: var(--on-signal-soft);
}

.brand-parts {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  border-top: var(--rule);
}

.brand-parts__item {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-6);
  border-bottom: var(--rule-soft);
}

.brand-parts__show {
  display: flex;
  align-items: center;
  min-height: calc(var(--wordmark-h) * 1.15);
  color: var(--brand-mark);
}

.brand-parts__show .brand-lockup {
  height: var(--wordmark-h);
}

.brand-parts__item h3 {
  font-size: var(--t-h4);
}

.brand-parts__item p {
  max-width: var(--measure-narrow);
  color: var(--ink-soft);
}

@media (max-width: 59.99rem) {
  .brand-parts__item h3 {
    order: 1;
  }

  .brand-parts__item p {
    order: 2;
  }

  .brand-parts__show {
    order: 3;
  }
}

@media (min-width: 60rem) {
  .page-hero__field--lockup {
    width: min(26rem, 100%);
  }

  .brand-grounds {
    grid-template-columns: 1fr 1fr;
  }

  .brand-ground--paper {
    border-bottom: 0;
    border-inline-end: var(--rule);
  }

  .brand-parts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .brand-parts__item {
    padding-inline-end: var(--s-5);
  }

  .brand-parts__item + .brand-parts__item {
    padding-inline-start: var(--s-5);
    border-inline-start: var(--rule-soft);
  }
}

/* --------------------------------------------------------------------------
   NEWS — a civic notice: the latest dispatch occupies a signal field;
   four further records sit on a ruled ledger with authored marks.
   Not a card grid, not the companies logo row, not a dated blog.
   -------------------------------------------------------------------------- */

.news-pin {
  padding-block: clamp(3.5rem, 2.2rem + 5vw, 7rem);
}

.news-pin__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-7);
  align-items: center;
}

.news-pin__copy,
.news-pin__field {
  grid-column: 1 / -1;
}

.news-pin .news-mark {
  width: 2rem;
  height: 2rem;
  color: var(--on-signal);
  margin-bottom: var(--s-5);
}

.news-pin__copy > h2 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 104;
  font-size: var(--t-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  max-width: 16ch;
  margin: 0;
}

.news-pin__kind {
  margin-top: var(--s-3);
}

.news-pin__copy > .lead {
  margin-top: var(--s-5);
  max-width: var(--measure);
}

.news-pin__copy > .actions {
  margin-top: var(--s-6);
}

.news-pin__field {
  width: min(18rem, 70vw);
  justify-self: start;
}

.news-pin__engraving {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: invert(1) grayscale(1) contrast(1.2);
  mix-blend-mode: screen;
}

.news-board__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-5);
  margin-bottom: var(--s-8);
}

.news-board__head > h2,
.news-board__head > p {
  grid-column: 1 / -1;
}

.news-board__head > p {
  color: var(--ink-soft);
}

.news-ledger {
  list-style: none;
  border-top: var(--rule);
}

.news-entry {
  border-bottom: var(--rule);
}

.news-entry__link {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-3);
  padding-block: var(--s-6);
  padding-inline: var(--s-4);
  margin-inline: calc(var(--s-4) * -1);
  text-decoration: none;
  color: inherit;
  transition: background var(--d-base) var(--ease-out);
}

.news-entry__link:hover {
  background: var(--paper-raised);
}

.news-entry .news-mark {
  grid-column: 1 / -1;
  width: 2rem;
  height: 2rem;
  color: var(--signal-ink);
}

.news-entry__identity,
.news-entry__body,
.news-entry__go {
  grid-column: 1 / -1;
}

.news-entry__title {
  font-size: var(--t-h3);
  font-variation-settings: 'wdth' 100;
}

.news-entry__kind {
  margin-top: var(--s-2);
}

.news-entry__body {
  color: var(--ink-soft);
  max-width: var(--measure);
}

.news-entry__go {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--signal-ink);
}

.news-entry__link:hover .news-entry__title {
  color: var(--signal-ink);
}

.news-entry__link:hover .news-entry__go {
  color: var(--ink);
}

@media (min-width: 60rem) {
  .news-pin__copy {
    grid-column: 1 / span 7;
  }

  .news-pin__field {
    grid-column: 8 / span 5;
    width: min(24rem, 100%);
    justify-self: end;
  }

  .news-board__head > h2 {
    grid-column: 1 / span 6;
  }

  .news-board__head > p {
    grid-column: 8 / span 5;
  }

  .news-entry .news-mark {
    grid-column: 1 / span 1;
    align-self: start;
    margin-top: 0.2rem;
  }

  .news-entry__identity {
    grid-column: 2 / span 4;
  }

  .news-entry__body {
    grid-column: 7 / span 4;
    max-width: none;
  }

  .news-entry__go {
    grid-column: 11 / span 2;
    justify-self: end;
    align-self: start;
    padding-top: 0.35rem;
  }
}