/* ==========================================================================
   ABOUT US · THE SYMMETRIC SPEC
   The page's own design layer.        Applied 2026-09-10
   ==========================================================================

   Picked as concept 09 from the ten whole-page architectures at
   /doctor/about-ui-system-lab-v1.html. The other nine stay there as the
   record of what was considered.

   ---------------------------------------------------------------------------
   STRUCTURAL DNA — the thing that must survive every later edit
   ---------------------------------------------------------------------------
     geometry    a centred axis. Headings sit on it; content divides into two
                 exactly equal halves under it. Nothing on this page is
                 left-weighted, and that is what makes it one page rather
                 than seven sections that happen to share a footer.
     containment ONE bordered frame per section, divided down the middle
     axis        the centre line, and a 12-tick ruler above every frame
     navigation  a control whose indicator IS the frame's own top edge
     selected    the control and the surface it opens are one construction
     detail      a panel swap at a reserved height, never a new box
     rhythm      four-up, five-up, two-up: the division changes, the axis
                 does not
     mobile      the halves stack; the axis becomes the page's own centre

   ---------------------------------------------------------------------------
   WHAT THIS FILE DELIBERATELY DOES NOT OWN
   ---------------------------------------------------------------------------
   Four things on this page belong to the site, not to this design, and are
   left to the shared layers that carry them on every other page:

     the section grounds     site/shelf.css   — #chapters, #journey, #tc-who
                             are editorial white; #reach, #people, #tc-system
                             are shelves; #tc-close is the one close block.
                             That is why the seven live section ids below are
                             kept exactly as they were: shelf.css already
                             names them, so this page's surfaces, aisles and
                             block edges arrive with no new CSS at all.
     the heading scale       site/ds.css      — .k-eyebrow / .k-h2 / .k-sub,
                             the same three classes every other page uses.
     the actions             site/cta.css     — .btn, .btn.ghost, .btn.link.
     the selected state      site/paper.css   — a selection row sits one step
                             darker than the page and the chosen control is
                             the only white paper in it. Section 3 of that
                             file names this page's three controls. Nothing
                             here paints a selection.

   So everything below is geometry, measure and type. No section background,
   no block edge, no selection colour, no button.
   ========================================================================== */


/* ==========================================================================
   1 · THE LANE, AND THE SECTION
   ========================================================================== */
:root{
  --k9-lane: min(1160px, 100% - (2 * clamp(18px, 3.2vw, 40px)));
  --k9-gap:  clamp(20px, 2.3vw, 28px);   /* head to frame */
}

.k9-in{ width: var(--k9-lane); margin-inline: auto; }

/* the 12-tick ruler — the axis made visible, once per section */
.k9-rule{
  height: 8px; margin-bottom: clamp(18px, 2vw, 26px);
  background-image: repeating-linear-gradient(90deg,
                    var(--line-b) 0 1px, transparent 1px 8.3333%);
  border-bottom: 1px solid var(--line-b);
}

/* the head sits ON the axis. ds.css sets the three sizes. */
.k9-hd{ text-align: center; max-width: 680px; margin: 0 auto var(--k9-gap); }
.k9-hd .k-sub{ margin-inline: auto; }


/* ==========================================================================
   2 · THE FRAME — one per section, divided down the middle
   ========================================================================== */
.k9-frame{ border: 1px solid var(--line-b); background: var(--paper); }

.k9-two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.k9-four{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.k9-three{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }

.k9-half{ padding: 26px 28px 28px; border-right: 1px solid var(--line-2); min-width: 0; }
.k9-half:last-child{ border-right: 0; }
.k9-cell{ padding: 22px 20px 24px; border-right: 1px solid var(--line-2); min-width: 0; }
.k9-cell:last-child{ border-right: 0; }


/* ==========================================================================
   3 · WHAT GOES INSIDE A HALF
   ========================================================================== */
.k9-k{
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.k9-frame h3{ font-size: 17px; margin: 10px 0 7px; letter-spacing: -.03em; }
.k9-frame h3.lg{ font-size: 20px; }
.k9-frame p.b{ font-size: 13.4px; line-height: 1.58; color: var(--ink-2); }
.k9-frame u{
  display: block; margin-top: 12px; text-decoration: none;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}

/* the spec list — the same ruled pair on every screen */
.k9-sp{ margin-top: 14px; border-top: 1px solid var(--line-2); }
.k9-sp div{
  display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line-2);
}
.k9-sp dt{
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); padding-top: 2px;
}
.k9-sp dd{ margin: 0; font-size: 12.6px; line-height: 1.45; color: var(--ink-2); }

/* two chapters share one half: the gap between them is the only vertical
   division inside a half, so it is air rather than another rule */
.k9-sepr{ height: 24px; }

/* the leader's title, then what the title answers for */
.k9-role{ font-weight: 700; color: var(--navy); }
.k9-acc{ margin-top: 10px; }

.k9-li{ display: grid; gap: 7px; margin-top: 15px; }
.k9-li li{
  position: relative; padding-left: 19px; font-size: 12.8px; line-height: 1.5;
  color: var(--ink-2);
}
.k9-li li::before{
  content: ''; position: absolute; left: 0; top: 8px;
  width: 10px; height: 2px; border-radius: 1px; background: var(--ink-4);
}

/* a panel swap happens at a RESERVED height, so nothing under it moves */
.k9-pane{ min-height: 214px; }


/* ==========================================================================
   4 · THE THREE CONTROLS — geometry only
   --------------------------------------------------------------------------
   Every one of them is welded to the surface it opens: the control's own
   edge IS the frame's edge. site/paper.css paints which one is chosen; the
   1px weld below is what makes the chosen one continuous with its panel,
   and it is geometry, so it lives here.
   ========================================================================== */

/* ---- a DOCK · the panel is directly beneath ----------------------------- */
.k9-seg{ display: grid; border-bottom: 1px solid var(--line-b); }
.k9-seg.n5{ grid-template-columns: repeat(5, minmax(0,1fr)); }
.k9-sg{
  background: none; border: 0; cursor: pointer; padding: 15px 16px 16px;
  text-align: center; border-right: 1px solid var(--line-2); position: relative;
}
.k9-sg:last-child{ border-right: 0; }
.k9-sg b{
  display: block; font-size: 14px; font-weight: 700; letter-spacing: -.028em;
  color: var(--ink-2);
}
.k9-sg span{ display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }
/* the weld: the chosen control's paper runs one pixel past the row's edge,
   into the panel it opened */
.k9-sg.on::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--pl-on, #FFFFFF);
}

/* ---- a RAIL · the panel is beside it ------------------------------------ */
.k9-vseg{ border-right: 1px solid var(--line-b); display: grid; grid-auto-rows: 1fr; }
.k9-vs{
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 15px 22px; border-bottom: 1px solid var(--line-2); position: relative;
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: baseline;
}
.k9-vs:last-child{ border-bottom: 0; }
.k9-vs b{ font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-2); }
.k9-vs span{
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .11em; color: var(--ink-3);
}
.k9-vs.on::after{
  content: ''; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px;
  background: var(--pl-on, #FFFFFF);
}

/* ---- a DOCK, with a plate · the leadership team -------------------------- */
.k9-pc{
  background: none; border: 0; cursor: pointer; padding: 20px 14px 22px;
  text-align: center; border-right: 1px solid var(--line-2); position: relative;
}
.k9-pc:last-child{ border-right: 0; }
.k9-pc img{
  width: 52px; height: 52px; border-radius: 10px; margin: 0 auto;
  border: 1px solid var(--line-b); background: var(--paper);
}
.k9-pc b{
  display: block; margin-top: 11px; font-size: 14px; font-weight: 700;
  letter-spacing: -.024em; color: var(--ink-2);
}
.k9-pc span{ display: block; margin-top: 4px; font-size: 11.2px; line-height: 1.35; color: var(--ink-3); }
.k9-pc.on::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--pl-on, #FFFFFF);
}
.k9-three{ border-bottom: 1px solid var(--line-b); }
.k9-spec{ background: var(--paper); }


/* ==========================================================================
   5 · THE HERO
   One screen. The headline is sized against the SHORTER of the two axes, so
   a laptop at 800px tall shrinks it instead of pushing the facts under the
   fold — see the site rule about a hero fitting its first screen.
   ========================================================================== */
.k9-hero{ text-align: center; padding: clamp(30px, 4.4vh, 58px) 0 clamp(34px, 5vh, 62px); }
.k9-hero .k-eyebrow{ margin-bottom: 15px; }
.k9-h1{
  font-size: clamp(30px, min(4.4vw, 6.4vh), 52px);
  line-height: 1.07; letter-spacing: -.044em;
  margin: 0 auto; max-width: 18ch;
}
.k9-h1 em{ font-style: normal; color: var(--navy); }
.k9-lede{
  margin: clamp(13px, 1.6vh, 18px) auto 0;
  font-size: var(--ds-sub, 16px); line-height: 1.6; color: var(--ink-2); max-width: 62ch;
}
.k9-cta{
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: clamp(20px, 2.6vh, 28px) 0 clamp(24px, 3.2vh, 34px);
}
.k9-fx{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.k9-fx div{ padding: clamp(15px, 2vh, 21px) 16px; border-right: 1px solid var(--line-2); }
.k9-fx div:last-child{ border-right: 0; }
.k9-fx b{
  display: block; font-size: clamp(21px, 2.4vh, 28px); font-weight: 800;
  letter-spacing: -.045em; color: var(--navy);
}
.k9-fx span{ font-size: 11.8px; font-weight: 600; color: var(--ink-3); }


/* ==========================================================================
   6 · THE COMPANY — the photograph is one exact half
   ========================================================================== */
.k9-shot{ margin: 0; height: 100%; }
.k9-shot img{ width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block; }
.k9-rec div{ padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.k9-rec div:last-child{ border-bottom: 0; }
.k9-rec dt{
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
}
.k9-rec dd{ margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.k9-rec dd u{
  display: block; margin-top: 2px; text-decoration: none; font-family: var(--sans);
  font-size: 12.4px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ink-3);
}
.k9-cap{
  padding: 13px 28px; border-top: 1px solid var(--line-2); font-size: 12.2px;
  line-height: 1.5; color: var(--ink-3); display: flex; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; align-items: center;
}
.k9-cap b{ color: var(--ink-2); font-weight: 600; }


/* ==========================================================================
   7 · CAPABILITIES · THE CLOSE, AND CONTACT
   ========================================================================== */
.k9-end{
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; align-items: center;
  padding: 15px 28px; border-top: 1px solid var(--line-b); background: var(--tint);
}
.k9-end b{ font-size: 14.5px; color: var(--navy); }
.k9-end span{ font-size: 12.8px; color: var(--ink-2); line-height: 1.45; }

.k9-reach div{ padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.k9-reach div:last-child{ border-bottom: 0; }
.k9-reach dt{
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
}
.k9-reach dd{ margin: 4px 0 0; font-size: 13.2px; line-height: 1.5; color: var(--ink-2); }
.k9-reach a{ color: var(--cta-ink, #535D5E); font-weight: 600; }
.k9-reach a:hover{ text-decoration: underline; text-underline-offset: 3px; }
/* the close block's one sentence — it carries the half on its own, so it
   sits a step above the frame's ordinary body copy */
.k9-frame p.b.k9-say{ margin-top: 10px; font-size: 15px; line-height: 1.55; max-width: 34ch; }
.k9-act{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* the close block's frame stands on the tint, so it keeps the tint's edge */
#tc-close .k9-frame{ border-color: var(--edge); }
#tc-close .k9-rule{ border-bottom-color: var(--edge); }


/* ==========================================================================
   8 · TABLETS — the divisions fold before the halves do
   ========================================================================== */
@media (max-width: 980px){
  .k9-four{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .k9-cell:nth-child(2n){ border-right: 0; }
  .k9-cell:nth-child(-n+2){ border-bottom: 1px solid var(--line-2); }
  /* the plate strip is three wide already, so it needs no fold here */
}


/* ==========================================================================
   9 · PHONES — the halves stack, and the axis becomes the page's own centre
   ========================================================================== */
@media (max-width: 720px){
  .k9-two{ grid-template-columns: minmax(0,1fr); }
  .k9-half{ padding: 20px 18px 22px; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .k9-half:last-child{ border-bottom: 0; }

  /* five into three leaves a hole in the second row, and a hole in a strip
     reads as a missing option. The last one takes the space instead. */
  .k9-seg.n5{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .k9-sg:nth-child(3n){ border-right: 0; }
  .k9-sg:nth-child(-n+3){ border-bottom: 1px solid var(--line-2); }
  .k9-sg:nth-child(-n+3).on::after{ display: none; }
  .k9-sg:last-child{ grid-column: 2 / -1; border-right: 0; }
  .k9-pane{ min-height: 0; }

  .k9-vseg{ border-right: 0; border-bottom: 1px solid var(--line-b); grid-auto-rows: auto; }
  .k9-vs.on::after{ top: auto; bottom: -1px; right: 0; left: 0; width: auto; height: 1px; }

  .k9-four{ grid-template-columns: minmax(0,1fr); }
  .k9-cell{ border-right: 0; border-bottom: 1px solid var(--line-2); }
  .k9-cell:nth-child(-n+2){ border-bottom: 1px solid var(--line-2); }
  .k9-cell:last-child{ border-bottom: 0; }

  /* the same again: the last plate takes the whole bottom row rather than
     standing beside an empty cell */
  .k9-three{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .k9-pc{ padding: 16px 10px 18px; }
  .k9-pc:nth-child(2n){ border-right: 0; }
  .k9-pc:nth-child(-n+2){ border-bottom: 1px solid var(--line-2); }
  /* a plate in the top row would weld into the row below it, not the panel —
     the weld belongs to the bottom row only */
  .k9-pc:nth-child(-n+2).on::after{ display: none; }
  .k9-pc:last-child{ grid-column: 1 / -1; border-right: 0; }

  .k9-fx{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .k9-fx div:nth-child(2n){ border-right: 0; }
  .k9-fx div:nth-child(-n+2){ border-bottom: 1px solid var(--line-2); }

  .k9-shot img{ min-height: 0; height: 210px; }
  .k9-cap{ padding: 13px 18px; }
  .k9-end{ grid-template-columns: minmax(0,1fr); gap: 5px; padding: 14px 18px; }

  /* a ruled pair is two lines on a phone, not two columns */
  .k9-sp div{ display: block; padding: 8px 0; }
  .k9-sp dt{ display: inline; margin-right: 7px; }
  .k9-sp dd{ display: inline; font-size: 12.4px; line-height: 1.42; }

  .k9-h1{ max-width: none; }
  .k9-lede{ max-width: none; }
  .k9-hero .btn{ width: 100%; }
  .k9-cta{ display: grid; grid-template-columns: minmax(0,1fr); }
  .k9-cta .btn.link{ justify-self: center; }
}