/*
  INTERIOR SHEETS — Services, About, Contact (proposal, round 3, 2026-09-19)

  Loaded only by the three interior pages. index.html and styles.css are not
  touched: every rule here is drawn from The Plat (see the header of styles.css)
  and reuses its tokens.

  Round 3 changes, from Lawrence's review of round 2:
  - The nav sits inside each first viewport, the way the homepage nav sits
    inside the framed photograph, instead of in a paper strip above it.
  - Lists are budgeted. Services keeps one (the engagement stages, drawn as a
    figure), About keeps one (the six commitments), Contact keeps none. What
    was a grid or a row of facets is prose.
  - The three pages share components, not a skeleton: Services is the ink
    board with a sheet index; About is a paper sheet under a full-width
    statement, no photograph; Contact is the ink/paper split with the form.
  - The 74px blueprint grid appears only where there are no other rules to
    fight it: the first viewports and the footer. The plat band is solid on
    interiors; no mid-page ink boards.
*/

/* ── GROUNDS ───────────────────────────────────────────────────── */
.board {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(239,236,227,0.048) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,236,227,0.048) 1px, transparent 1px);
  background-size: 74px 74px;
  color: var(--paper);
}
.sheet   { background: var(--paper);   color: var(--ink); }
.sheet-2 { background: var(--paper-2); color: var(--ink); }
.plan    { background: var(--plat);    color: var(--paper); }
.board :focus-visible, .plan :focus-visible { outline-color: var(--stake-lit); }

.frame { max-width: var(--max); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.section { padding: 104px 0 112px; }

/* ── NAV, inside the first viewport ────────────────────────────── */
/* .nav is absolute at the top of its positioned parent (styles.css). On the
   homepage that parent is the hero; here it is the interior hero or the
   contact split, so the wordmark and links share the frame with the lockup. */
.nav--board, .nav--sheet, .nav--split { background: none; }
.nav--sheet { position: absolute; border-bottom: 0; }
.nav.nav--board .nav-wordmark, .nav.nav--split .nav-wordmark { text-shadow: none; }
.nav.nav--board .nav-hamburger, .nav.nav--split .nav-hamburger { filter: none; }
.nav--board .nav-link, .nav--split .nav-link { text-shadow: none; }
.nav--board .nav-link[aria-current="page"] { border-bottom-color: currentColor; }
.nav--dark .nav-link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
/* Contact: the wordmark falls on the ink column, the links on the paper one. */
.nav--split .nav-link { color: var(--graphite); }
.nav--split .nav-link:hover,
.nav--split .nav-link[aria-current="page"] { color: var(--ink); }
.nav--split .nav-link[aria-current="page"] { border-bottom-color: var(--ink); }
.mobile-menu-link[aria-current="page"] { color: var(--stake-lit); }

/* ── SHARED TYPE ROLES ─────────────────────────────────────────── */
.int-title, .head-title, .side-title, .station-title, .chapter-title,
.plan-title, .closing-title, .statement {
  font-family: var(--block);
  font-stretch: normal;
  font-weight: 600;
  text-transform: uppercase;
  font-style: normal;
}
.int-title, .statement { font-weight: 700; }

/* The flagging mark, display geometry (see styles.css for the arithmetic). */
.closing-title em, .statement em, .plan-title em {
  font: inherit;
  font-style: normal;
  color: var(--ink);
  background-image: linear-gradient(var(--stake-lit), var(--stake-lit));
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  padding: 0 0.20em;
  margin: 0 -0.20em;
  background-size: 100% 1.06em;
  background-position: 0 0.26em;
}

/* Reading copy. */
.lede  { font-size: clamp(1.18rem, 1.6vw, 1.42rem); line-height: 1.5; color: var(--ink); max-width: 48ch; }
.prose { font-size: 17px; line-height: 1.78; color: var(--body); max-width: 62ch; }
/* In a two-column row the text column is the measure, so the paragraph fills it. */
.side-grid .prose, .chapter .prose, .plan-split .prose, .next .prose, .closing-inner .prose { max-width: none; }
.plan .prose { color: rgba(239,236,227,0.88); }
.prose + .prose { margin-top: 22px; }
main p { text-wrap: pretty; }

/* Section head: block title in the left column, its standfirst in the right,
   one row on a shared baseline over the rule with the ruler tick edge. A lede
   left alone under a full-width title ends wherever its measure runs out and
   leaves half a row empty; here it has a column and a partner. */
/* One column line for every two-column row on these pages: the title side is
   wide enough for the longest section title on one line, the text side is the
   62ch measure at 1440, so a paragraph fills its column to the frame edge. */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.25fr);
  gap: 20px 72px;
  align-items: end;
  border-bottom: 1px solid var(--ink);
}
.head::after {
  content: '';
  grid-column: 1 / -1;
  display: block;
  height: 7px;
  background-image: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 26px);
  opacity: 0.55;
}
.head-title {
  font-size: clamp(2.02rem, 2.81vw, 2.71rem);
  line-height: 1;
  letter-spacing: 0.032em;
  padding-bottom: 16px;
}
.head .lede { padding-bottom: 5px; max-width: none; }

/* Stake button on paper (the ink-outlined variant of the hero button). */
.btn-stake {
  position: relative;
  display: inline-block;
  font-family: var(--disp);
  font-stretch: var(--mid);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--stake);
  padding: 17px 38px;
  text-decoration: none;
  transition: background 0.16s ease-out, color 0.16s ease-out;
}
.btn-stake::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 1px solid var(--ink);
  transition: inset 0.18s ease-out;
}
.btn-stake:hover { background: var(--ink); color: var(--paper); }
.btn-stake:hover::after { inset: -11px; }

/* ── INTERIOR HERO (framed like the photograph) ────────────────── */
.int-hero { position: relative; overflow: hidden; }
.int-hero::before {
  content: '';
  position: absolute;
  inset: 22px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(239,236,227,0.30);
}
.int-hero::after {
  content: '';
  position: absolute;
  inset: 22px;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(var(--stake),var(--stake)), linear-gradient(var(--stake),var(--stake)),
    linear-gradient(var(--stake),var(--stake)), linear-gradient(var(--stake),var(--stake)),
    linear-gradient(var(--stake),var(--stake)), linear-gradient(var(--stake),var(--stake)),
    linear-gradient(var(--stake),var(--stake)), linear-gradient(var(--stake),var(--stake));
  background-repeat: no-repeat;
  background-size: 26px 2px, 2px 26px, 26px 2px, 2px 26px, 26px 2px, 2px 26px, 26px 2px, 2px 26px;
  background-position:
    -1px -1px, -1px -1px,
    calc(100% + 1px) -1px, calc(100% + 1px) -1px,
    -1px calc(100% + 1px), -1px calc(100% + 1px),
    calc(100% + 1px) calc(100% + 1px), calc(100% + 1px) calc(100% + 1px);
}
/* About: the same frame drawn on the paper sheet. */
.int-hero--sheet { background: var(--paper); color: var(--ink); }
.int-hero--sheet::before { border-color: rgba(20,26,24,0.30); }

.int-hero-body {
  position: relative;
  z-index: 3;
  max-width: var(--max);
  margin: 0 auto;
  padding: 132px var(--gut) 84px;
  min-height: clamp(520px, 64svh, 700px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
.int-lockup { display: flex; flex-direction: column; align-items: flex-start; }
/* Services: the sheet's index, set like the nav links, in the right column. */
.int-hero-body--index {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
  gap: 56px;
  align-items: end;
}
.int-index { display: grid; align-content: end; }
.int-index-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(239,236,227,0.62);
  padding-bottom: 14px;
}
.int-index a {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  padding: 12px 0;
  border-top: 1px solid rgba(239,236,227,0.22);
  transition: color 0.16s ease-out;
}
.int-index a:last-child { border-bottom: 1px solid rgba(239,236,227,0.22); }
.int-index a:hover { color: var(--stake-lit); }

.int-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: inherit;
  margin-bottom: 26px;
}
.int-eyebrow::before { content: ''; width: 40px; height: 2px; background: var(--stake); flex: none; }
.int-title {
  font-size: clamp(2.82rem, 5.83vw, 5.26rem);
  line-height: 0.92;
  letter-spacing: 0;
  color: inherit;
}
.int-sub {
  font-size: clamp(1.02rem, 1.25vw, 1.16rem);
  line-height: 1.66;
  color: rgba(239,236,227,0.94);
  max-width: 46ch;
}
.int-hero--sheet .hero-rule { color: var(--ink); }
.int-hero--sheet .int-sub { color: var(--body); }
.int-hero--sheet .btn-stake { margin-top: 40px; }
/* .hero-rule and .hero-cta come from styles.css unchanged. */

/* ── SERVICES: the traverse, a figure (the page's one list) ────── */
.traverse {
  list-style: none;
  margin: 60px 0 0;
  padding: 40px 0 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.traverse::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 6px;
  height: 1px;
  background: var(--hair-strong);
}
.station { position: relative; }
.station::before {
  content: '';
  position: absolute;
  left: 2px; top: -40px;
  width: 11px; height: 11px;
  border: 1.5px solid var(--stake);
  background: var(--paper);
  transform: rotate(45deg);
}
.station.is-here::before { background: var(--stake); }
.station-title {
  display: block;
  font-size: 1.36rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.station-here {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stake-deep);
}
/* The stages, read in order, set in two columns like the notes on a sheet,
   edge to edge with the figure above them. */
.prose-cols { margin-top: 64px; columns: 2; column-gap: 72px; }
.prose-cols p { break-inside: avoid; max-width: none; margin: 0 0 22px; font-size: 18px; }

/* ── SERVICES: where the hours hide (side title, prose) ────────── */
.side-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.25fr);
  gap: 72px;
  align-items: start;
}
.side-title {
  font-size: clamp(2.02rem, 2.81vw, 2.71rem);
  line-height: 1;
  letter-spacing: 0.032em;
  color: var(--ink);
}
.side-grid .lede { margin-bottom: 28px; }

/* ── SERVICES: the five, as chapters ───────────────────────────── */
.chapter {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.25fr);
  gap: 72px;
  padding: 60px 0 66px;
  border-top: 1px solid var(--hair);
}
.head + .chapter { border-top: 0; padding-top: 60px; }
.chapter:last-child { padding-bottom: 8px; }
.chapter-title {
  position: relative;
  padding-top: 30px;
  font-size: clamp(1.84rem, 2.6vw, 2.5rem);
  line-height: 0.96;
  letter-spacing: 0.012em;
  color: var(--ink);
}
.chapter-title::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 11px; height: 11px;
  border: 1.5px solid var(--stake);
  transform: rotate(45deg);
}
.chapter-deck {
  margin-top: 18px;
  font-size: clamp(1.1rem, 1.35vw, 1.24rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 30ch;
}

/* ── THE PLAT BAND, interior use (solid, once per page at most) ─── */
.plan-inner { padding-top: 104px; padding-bottom: 112px; }
.plan-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.25fr);
  gap: 72px;
  align-items: start;
}
.plan-title {
  font-size: clamp(2.21rem, 3.43vw, 3.15rem);
  line-height: 1.0;  /* leaded for the mark */
  letter-spacing: 0.008em;
  color: var(--paper);
}
.plan-split .hero-rule { margin-bottom: 0; }

/* ── CLOSING (paper) ───────────────────────────────────────────── */
.closing-inner {
  padding-top: 96px;
  padding-bottom: 104px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.25fr);
  gap: 72px;
  align-items: center;
}
.closing-title {
  font-size: clamp(2.21rem, 3.43vw, 3.15rem);
  line-height: 1.0;  /* leaded for the mark */
  letter-spacing: 0.008em;
  color: var(--ink);
}
.closing-inner .prose { margin-bottom: 36px; max-width: 48ch; }

/* ── ABOUT ─────────────────────────────────────────────────────── */
/* Where this comes from: short, so it is set a size up and across the sheet
   in two columns, a spread rather than fine print in a corner. */
.origins { margin-top: 52px; columns: 2; column-gap: 72px; }
.origins p { font-size: clamp(1.14rem, 1.42vw, 1.3rem); line-height: 1.55; color: var(--ink); break-inside: avoid; margin: 0 0 24px; }

/* The six commitments: the page's one list, set plain. */
.holds {
  margin-top: 60px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.25fr);
  gap: 30px 72px;
}
.holds { list-style: none; padding: 0; counter-reset: promise; }
.holds li { font-size: clamp(1.12rem, 1.4vw, 1.3rem); line-height: 1.5; color: var(--ink); display: grid; grid-template-columns: 2.4em minmax(0, 1fr); }
.holds li::before { counter-increment: promise; content: counter(promise, decimal-leading-zero); font-family: var(--mono); font-size: 0.78em; line-height: 1.9; color: var(--stake); }
.holds-cta {
  margin-top: 76px;
  padding-top: 44px;
  border-top: 1px solid var(--ink);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px 48px;
}
.holds-cta .prose { margin: 0; }

/* ── CONTACT ───────────────────────────────────────────────────── */
/* The split sits in the ordinary frame grid so both panels share the rail
   with the nav exactly (100vw would count the scrollbar and land 5px off).
   The ink panel bleeds to the viewport edge through a pseudo-element. */
.split-wrap { position: relative; background: var(--paper); overflow-x: hidden; overflow-x: clip; }
.split { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.split-left {
  position: relative;
  z-index: 0;
  padding: 152px 56px 84px 0;
  display: flex;
  flex-direction: column;
  color: var(--paper);
}
.split-left::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0; right: 0;
  width: 100vw;
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(239,236,227,0.048) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,236,227,0.048) 1px, transparent 1px);
  background-size: 74px 74px;
}
.split-left :focus-visible { outline-color: var(--stake-lit); }
.split-right { padding: 152px 0 96px 56px; }
.split .int-title { font-size: clamp(2.6rem, 4.6vw, 4.2rem); }
.split .int-sub { max-width: 42ch; }
.direct { margin-top: 44px; font-size: 16px; line-height: 1.6; color: rgba(239,236,227,0.84); }
.direct p + p { margin-top: 6px; }
.direct a {
  color: var(--stake-lit);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.16s ease-out;
}
.direct a:hover { color: var(--paper); }
.split-right .form-note { max-width: 44ch; }

/* What happens next: a statement and the answer in prose. */
.next {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.25fr);
  gap: 72px;
  align-items: start;
}
.statement {
  font-size: clamp(2.4rem, 3.9vw, 3.62rem);
  line-height: 1.0;  /* leaded for the mark */
  letter-spacing: 0.002em;
  color: var(--ink);
}

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .traverse { gap: 20px; }
  .station-title { font-size: 1.2rem; letter-spacing: 0.015em; }
  .side-grid, .chapter, .plan-split, .next, .closing-inner { gap: 48px; }
  .head { gap: 20px 48px; }
  .holds { gap: 26px 48px; }
  .split-left { padding-right: 40px; }
  .split-right { padding-left: 40px; }
  .split-right .form-row { grid-template-columns: 1fr; gap: 30px; }
}

/* The five station labels stop fitting one per column before the two-column
   grids collapse, so the figure turns vertical a little early. */
@media (max-width: 1000px) {
  .traverse { grid-template-columns: 1fr; gap: 26px; margin-top: 48px; padding: 0 0 0 40px; }
  .traverse::before { left: 7px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .station::before { left: -38px; top: 3px; }
  .station-here { display: inline-block; margin: 0 0 0 16px; vertical-align: 2px; }
}

@media (max-width: 900px) {
  .int-hero-body--index { grid-template-columns: 1fr; }
  .int-index { display: none; }
  .prose-cols, .origins { columns: 1; margin-top: 48px; }
  .head, .side-grid, .chapter, .plan-split, .closing-inner, .next, .holds { grid-template-columns: 1fr; }
  .head { gap: 18px; }
  .head .lede { padding-bottom: 14px; }
  .side-grid { gap: 28px; }
  .chapter { gap: 30px; padding: 48px 0 52px; }
  .plan-split, .next { gap: 40px; }
  .closing-inner { gap: 32px; }
  .holds { gap: 22px; }
  .split { grid-template-columns: 1fr; }
  .split-left { padding: 140px 0 56px; }
  .split-left::before { right: auto; left: calc(-1 * var(--gut)); width: 100vw; }
  .split-right { padding: 56px 0 76px; }
  /* Stacked, the whole first viewport is ink, so the links go to paper. */
  .nav--split .nav-link,
  .nav--split .nav-link:hover,
  .nav--split .nav-link[aria-current="page"] { color: var(--paper); }
  .nav--split .nav-link[aria-current="page"] { border-bottom-color: currentColor; }
}

@media (max-width: 768px) {
  .section { padding: 72px 0 76px; }
  .plan-inner { padding-top: 72px; padding-bottom: 78px; }
  .int-hero::before, .int-hero::after { inset: 14px; }
  .int-hero::after { background-size: 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px; }
  .int-hero-body { padding: 112px var(--gut) 60px; min-height: 0; }
  .int-eyebrow { font-size: 14px; letter-spacing: 0.14em; margin-bottom: 20px; }
  .int-title, .split .int-title { font-size: clamp(1.88rem, 9.78vw, 3.38rem); line-height: 0.92; }
  .int-sub, .split .int-sub { font-size: 16.5px; max-width: 100%; }
  .int-hero--sheet .btn-stake { margin-top: 34px; }
  .head-title, .side-title { font-size: clamp(1.84rem, 7.91vw, 2.48rem); }
  .lede { font-size: 1.16rem; }
  .station-title { font-size: 1.3rem; }
  .chapter-title { font-size: clamp(1.79rem, 7.36vw, 2.21rem); }
  .chapter { padding: 40px 0 44px; gap: 24px; }
  .head + .chapter { padding-top: 44px; }
  .closing-inner { padding-top: 68px; padding-bottom: 76px; }
  .closing-title, .plan-title { font-size: clamp(1.97rem, 8.4vw, 2.44rem); }
  .statement { font-size: clamp(2.07rem, 8.84vw, 2.6rem); }
  .origins { margin-top: 36px; }
  .origins p { font-size: 1.16rem; }
  .holds { margin-top: 40px; }
  .holds-cta { margin-top: 52px; padding-top: 36px; }
  .split-left { padding: 112px 0 48px; }
  .split-right { padding: 48px 0 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-stake, .btn-stake::after, .direct a { transition: none !important; }
}