/* ============================================================
   POSTER LAYER — Advisory Support, Holding Shape direction
   Built from Figma `Advisory · 1440` (374:186), 24 Aug 2026.

   NAMESPACE: every class in this file starts `po-`.
   That is not decoration. comp.css and layouts.css already
   collided once (13 selectors, `.band` and `.grid` among them)
   and it cost a day to find. Nothing here may share a name with
   either file.

   THE FOUR WEDGES are pure CSS border-radius on a black box —
   no SVG, no image. Every one has exactly ONE square corner and
   that corner is where the heading lives. See the DISC / ARC
   note further down for the geometry, which was read off the
   Figma vector paths, not eyeballed off the render.

   They scale, stay crisp at any size, and recolor for free —
   which matters, because these are placeholders for photography
   later.
   ============================================================ */


/* ============================================================
   25 Aug — ONE CONTENT WIDTH, ONE VERTICAL RHYTHM.
   Ali: "everything needs to be the 1280 width and be spaced
   evenly throughout."
   Section padding ranged from 50px to 138px with no system
   behind it. Every content section now uses --sec-y, which is
   defined in tokens.css so every page gets it. The only
   deliberate exception is the first section's TOP padding,
   which has to clear the fixed header.
   ============================================================ */

.po-opener,.po-def,.po-help,.po-work,.po-who,.po-statement,.po-cta{
  position:relative}

/* ---------- 1 · opener -------------------------------------
   Figma draws this as two frames overlapping by 10px: a black
   block, then a rounded panel holding the lede. Merged into one
   black mass with a rounded bottom — identical render, half the
   nodes, and the radius can't drift away from the fill.
   Figma's 80px top padding would tuck the H1 under the fixed
   header, so the site's standing first-section clearance wins. */
.po-opener{
  background:var(--ink);
  padding:clamp(140px,13vw,192px) 0 var(--sec-y);
  border-bottom-left-radius:clamp(48px,10.4vw,150px);
  border-bottom-right-radius:clamp(48px,10.4vw,150px);
  overflow:hidden;
  text-align:center}

/* 110px, not the 74 the Figma frame carried — Ali confirmed that
   was drift. This is the shared inner-page title ladder, the one
   restored as a bug fix on 20 Aug, so it reads at the same size
   as every other inner page. Bound to the tokens rather than
   re-typed, so the ladder can only ever move in one place. */
.po-opener h1{
  margin:0;
  font-size:var(--ramp-title);
  line-height:var(--lh-page-title);
  letter-spacing:var(--tr-page-title);
  font-weight:var(--fw-bold);
  color:var(--w);
  text-wrap:balance}

/* Ali: "heading and subheading are really tight together." --s5 put
   the sub 24px under a 110px title, which at that scale reads as one
   block rather than two. 40px at 1440. First attempt used
   clamp(14,1.6vw,26), which resolves to 23px — TIGHTER than the 24 it
   replaced. Check what a clamp actually computes at the width you
   care about before assuming it loosened anything. */
.po-sub{
  margin:clamp(22px,2.6vw,40px) auto 0;
  font-size:var(--ramp-h2-cta);
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:var(--fw-bold);
  color:var(--w);
  max-width:none}

/* the arch colonnade — a tiled SVG, so it stays sharp at any
   width and recolors with the stroke. Figma used a 139px PNG,
   which goes soft the moment it is scaled. */
.po-arch{
  height:clamp(112px,14.4vw,207px);
  margin:var(--s5) 0 0;
  background-repeat:repeat-x;
  background-position:left top;
  background-size:auto 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='139.4' height='219.1' viewBox='0 0 139.4 219.1'%3E%3Cg fill='none' stroke='%23FFFEFA' stroke-opacity='.62' stroke-width='1.2'%3E%3Cpath d='M0 219.1V69.7A69.7 69.7 0 0 1 139.4 69.7V219.1'/%3E%3Cpath d='M11.5 219.1V69.7A58.2 58.2 0 0 1 127.9 69.7V219.1'/%3E%3Cpath d='M23 219.1V69.7A46.7 46.7 0 0 1 116.4 69.7V219.1'/%3E%3Cpath d='M34.5 219.1V69.7A35.2 35.2 0 0 1 104.9 69.7V219.1'/%3E%3Cpath d='M46 219.1V69.7A23.7 23.7 0 0 1 93.4 69.7V219.1'/%3E%3Cpath d='M57.5 219.1V69.7A12.2 12.2 0 0 1 81.9 69.7V219.1'/%3E%3C/g%3E%3C/svg%3E")}

.po-lede{
  margin:clamp(32px,4vw,56px) auto 0;
  max-width:min(841px,var(--measure-lede));
  font-size:var(--t-lead);
  line-height:var(--lh-lead);
  letter-spacing:-.015em;
  font-weight:var(--fw-med);
  color:var(--w)}


/* ---------- photo opener (25 Aug) --------------------------
   The four sub-page openers were four identical black slabs
   with an arch band. They now carry a Serra "Wake" frame from
   the curated 1-hero set, veiled to ink.

   The veil is a MEASURED value, not a taste call. Porcelain
   over each graded crop at 58%: advisory 5.9 · about 6.0 ·
   who-its-for 7.3 · coffee-chat 5.6. Re-measure by compositing
   if a crop or a grade changes; axe cannot see text on a photo.

   The sky in every frame was fighting the brand teal (2.0-2.4:1
   against #0071A5 — Ali's own note: "too close to read as a
   deliberate second color, too far to read as the same one").
   The grade desaturates the blue band 68% toward neutral, so the
   corten steel carries the colour and the sky recedes. */
.po-opener-shot{position:relative;isolation:isolate;
  padding-top:clamp(104px,10.4vw,150px);
  padding-bottom:clamp(104px,10.4vw,150px)}

.po-shot-img{position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:center 46%}

.po-opener-shot::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(4,14,20,.74) 0%,
    rgba(4,14,20,.58) 30%,
    rgba(4,14,20,.58) 72%,
    rgba(4,14,20,.70) 100%)}

/* the lede sat 32-56px below an arch band that is now gone */
.po-opener-shot .po-lede{margin-top:clamp(24px,2.6vw,34px)}

/* Advisory has a 48px subtitle between its 110px h1 and its 18px
   lede. About, Who It's For and Coffee Chat have no subtitle in
   the approved copy, so those heroes jumped 110px straight to
   18px — a 6x step with nothing in between. The copy is Colleen's
   and is not mine to add to, so the rung is typographic: where
   there is no subtitle, the lede carries the middle of the ramp.

   Held to 24px rather than the full h2-sm rung: Who It's For and
   Coffee Chat have one-line ledes that carry 27px easily, but
   About's is four sentences, and at 27px it filled five centered
   lines and out-shouted the h1. 24 is the rung that serves both. */
.po-opener-shot:not(:has(.po-sub)) .po-lede{
  font-size:clamp(19px,16.4px + .5vw,24px);
  line-height:1.34;
  letter-spacing:-.02em;
  max-width:min(760px,var(--measure-lede));
  color:var(--w)}

@media (prefers-reduced-motion:no-preference){
  .po-shot-img{will-change:auto}
}

/* ---------- the wedge -------------------------------------- */
.po-wedge{
  position:relative;
  background:var(--ink);
  aspect-ratio:625 / 557;
  display:flex;
  overflow:hidden;
  /* Grid items default to min-width:auto and will not shrink below
     their content. Combined with aspect-ratio that is how a wedge
     computes a width WIDER than its column. Belt and braces. */
  min-width:0;
  max-width:100%}

.po-wedge h2{
  margin:0;
  padding:clamp(20px,2.4vw,30px) clamp(24px,2.4vw,35px);
  font-size:var(--ramp-h2);
  line-height:1.05;
  letter-spacing:-.02em;
  font-weight:var(--fw-bold);
  color:var(--w);
  max-width:18ch}

/* Two families, taken off the Figma vectors rather than guessed:

   DISC  — a circle with exactly ONE square corner (400x400).
           path: M200 0 C… C… H0 V200 C… Z
   ARC   — WAS a quarter with a sweeping curve; as of 25 Aug these
           two are curved rectangles instead. Name kept because it
           still says where the heading sits.

   The heading MUST sit over the square corner. Park it anywhere
   else and the curve eats the text — which is exactly what
   happened on first build, on the wedge whose corner I had
   mirrored. The class name now says which corner is square, so
   the heading placement can't drift from the shape. */

.po-disc-br{border-radius:50% 50% 0 50%;
  justify-content:flex-end;align-items:flex-end}
.po-disc-br h2{text-align:right}

.po-disc-bl{border-radius:50% 50% 50% 0;
  justify-content:flex-start;align-items:flex-end}

/* 25 Aug — the two BIG half-moon arcs are now curved rectangles.
   Ali: "JUST the half circles, the smaller circleish shapes stay."
   These were the ones sweeping across a third of a screen; the
   discs below and the About portrait keep their circle geometry.
   With no arc left on these two, the old rule that their heading
   must sit over the square corner no longer binds. */
.po-arc-tr,.po-arc-bl{border-radius:var(--corner) 0 var(--corner) 0}

.po-arc-tr{justify-content:flex-end;align-items:flex-start}
.po-arc-tr h2{text-align:right}

.po-arc-bl{justify-content:flex-start;align-items:flex-end}
/* the bottom edge of this one is flat across its full width, so
   its heading has room to run on a single line as Figma sets it */
.po-arc-bl h2{max-width:28ch}

/* ---------- shared section shell --------------------------- */
.po-def,.po-help,.po-work,.po-who{
  background:var(--porcelain);
  padding:var(--sec-y) 0}

.po-row{
  display:grid;
  gap:var(--gap-md);
  align-items:center}

.po-body p{
  margin:0;
  font-size:var(--t-lead);
  line-height:var(--lh-lead);
  letter-spacing:-.015em;
  font-weight:var(--fw-med);
  color:var(--mut);
  max-width:var(--measure)}
.po-body p + p{margin-top:var(--s6)}
.po-body .po-fine{font-size:var(--t-body-sm);line-height:1.6}

/* 2 · definition — square wedge, text right ------------------
   Figma insets this section to 145px rather than the site's 80.
   Honored on wide viewports, released below so the measure does
   not strangle on a laptop. */
/* was max-width:1150px, an inset copied off one Figma frame.
   Every section sits on the 1280 grid now. */
.po-def .po-row{grid-template-columns:400px minmax(0,1fr)}
.po-def .po-wedge{aspect-ratio:1;width:400px}

/* 3 · what I help you with ----------------------------------
   The wedge carries the section's H2, so in the DOM it comes
   FIRST — otherwise the six list items are read out before the
   heading that names them, and a screen-reader user hears them
   filed under "What a fractional CFO is". `order` puts it back
   on the right visually. Same reasoning in `who` below. */
.po-help .po-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch}
.po-help .po-wedge{aspect-ratio:auto;order:2}
.po-help .po-list{order:1}

.po-list{margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(24px,2.5vw,36px)}
.po-list h3{
  margin:0 0 5px;
  font-size:var(--ramp-h3);
  line-height:1.22;
  letter-spacing:-.025em;
  font-weight:var(--fw-bold);
  color:var(--text-strong)}
.po-list p{
  margin:0;
  font-size:var(--t-body);
  line-height:var(--lh-body);
  font-weight:var(--fw-med);
  color:var(--mut)}

/* 4 · what working together looks like ---------------------- */
.po-work .po-row{grid-template-columns:626px minmax(0,1fr)}
.po-work .po-lead-in{
  margin:0 0 var(--s6);
  font-size:var(--ramp-h2-sm);
  line-height:1.25;
  letter-spacing:-.02em;
  font-weight:var(--fw-bold);
  color:var(--text-strong)}
.po-work .po-body p{color:var(--text-strong)}/* 6 · statement — goldenrod GROUND, never type --------------- */
.po-statement{
  background:var(--gold);
  padding:var(--sec-y) 0;
  text-align:center}
/* Figma breaks the statement between its two sentences; below
   the two-line width that break stops helping, so it is dropped. */
.po-brk{display:none}
@media (min-width:1100px){.po-brk{display:inline}}

.po-statement p{
  margin:0 auto;
  max-width:1280px;
  font-family:var(--serif);
  font-size:clamp(1.5rem,3.06vw,2.75rem);     /* 44px at 1440 */
  line-height:1.23;
  letter-spacing:-.012em;
  color:var(--ink)}

/* 7 · closing CTA ------------------------------------------- */
.po-cta{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  padding:var(--sec-y) 0 calc(var(--sec-y) + clamp(52px,5.6vw,84px));
  text-align:center}

/* The arch colonnade used to sit inside each sub-page opener.
   The photo openers replaced it, so it bookends the page here
   instead — same motif, one place, and it no longer competes
   with a photograph for the same band. */
.po-cta::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:clamp(52px,5.6vw,84px);
  background-repeat:repeat-x;background-position:left bottom;
  background-size:auto 190%;
  opacity:.55;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='139.4' height='219.1' viewBox='0 0 139.4 219.1'%3E%3Cg fill='none' stroke='%23FFFEFA' stroke-opacity='.62' stroke-width='1.2'%3E%3Cpath d='M0 219.1V69.7A69.7 69.7 0 0 1 139.4 69.7V219.1'/%3E%3Cpath d='M11.5 219.1V69.7A58.2 58.2 0 0 1 127.9 69.7V219.1'/%3E%3Cpath d='M23 219.1V69.7A46.7 46.7 0 0 1 116.4 69.7V219.1'/%3E%3Cpath d='M34.5 219.1V69.7A35.2 35.2 0 0 1 104.9 69.7V219.1'/%3E%3Cpath d='M46 219.1V69.7A23.7 23.7 0 0 1 93.4 69.7V219.1'/%3E%3Cpath d='M57.5 219.1V69.7A12.2 12.2 0 0 1 81.9 69.7V219.1'/%3E%3C/g%3E%3C/svg%3E")}
/* Scoped to .po-cta-copy on 26 Aug. As `.po-cta h2` / `.po-cta p`
   these also matched the "Let's talk" mark, which is a <p> inside
   the same section, and at (0,1,1) they beat .po-cta-mark (0,1,0)
   on colour, size, weight and max-width — so the mark rendered as
   18px porcelain text on a porcelain disc. Invisible.

   Same shape as the `main > section.L6:first-child` bug: when a
   fix does not take, the cause is usually a MORE SPECIFIC rule
   somewhere else, not the rule you just edited. Both times the
   edited rule was fine and something older was winning. */
.po-cta-copy h2{
  margin:0 auto;
  max-width:680px;
  font-size:var(--ramp-h2-cta);
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:var(--fw-bold);
  color:var(--w)}
.po-cta-copy p{
  margin:var(--s5) auto 0;
  max-width:min(680px,var(--measure-lede));
  font-size:var(--t-lead);
  line-height:var(--lh-lead);
  letter-spacing:-.015em;
  font-weight:var(--fw-med);
  color:var(--w-dim)}
.po-cta-copy .po-act{margin-top:clamp(32px,3.9vw,56px)}

/* SQUARE button, radius 0 — the containers-square rule. Teal on
   ink is 3.90:1, over the 3:1 bar for a non-text boundary;
   porcelain on teal is 5.36:1. Both measured, not assumed. */
.po-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-width:200px;min-height:var(--btn-h);padding:0 var(--s6);
  /* a <button> carries a 2px UA border, which made the Coffee Chat
     submit 54px tall where every link-button was 50 */
  border:0;
  border-radius:0;
  background:var(--teal);color:var(--w);
  font-size:var(--t-nav,14px);line-height:1.5;
  font-weight:var(--fw-semi);letter-spacing:-.01em;
  text-decoration:none;
  transition:background .3s var(--ease)}
.po-btn:hover{background:var(--teal-deep)}
.po-btn:focus-visible{outline:2px solid var(--w);outline-offset:3px}

.po-tl-link{margin-top:var(--s6)}

/* ---------- responsive -------------------------------------
   25 Aug rework. The previous pass flattened EVERY wedge to a
   2.6:1 band once the columns collapsed. Two things were wrong
   with that:

   · a PHOTO in a 728x190 letterbox is a bad crop, and the image
     stops carrying the section
   · a TEXT-ONLY wedge at 728x190 is a full-width black rectangle
     holding four words. On desktop that emptiness is a device;
     stacked on a tablet it just reads as a bug

   So the two now behave differently. Photo wedges keep a real
   picture aspect. Text-only wedges stop being boxes at all and
   hug their heading. */
@media (max-width:1180px){
  .po-def .po-row{grid-template-columns:300px minmax(0,1fr)}
  .po-def .po-wedge{width:300px}
  .po-work .po-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

@media (max-width:900px){
  .po-row{grid-template-columns:minmax(0,1fr) !important;
    gap:clamp(24px,4vw,36px)}
  /* aspect-ratio is DROPPED here, not re-tuned. With a min-height
     set, `aspect-ratio` back-computes the width — min-height 200 at
     ratio 2.6 asks for 520px inside a 335px column, which is exactly
     how horizontal overflow got onto four pages. Width fills the
     column; height is a floor that content may exceed. */
  /* text-only wedge: height comes from the heading, not a ratio */
  .po-wedge{width:auto !important;aspect-ratio:auto !important;
    min-height:0 !important;height:auto}
  .po-wedge h2{padding:clamp(24px,4vw,34px) clamp(24px,4vw,34px)}

  /* photo wedge: a real picture aspect so the image is not a slot.
     The floor is 264, not 220. WCAG 1.4.12 requires no loss of content
     when the reader forces line-height 1.5 and letter-spacing .12em;
     measured at 320, "A few things that matter to me" then needs 240px
     and was being clipped by a 220px box. Raising the floor keeps the
     heading at its site-wide size — which Ali has asked twice not to
     change — and makes the box grow instead. Above about 470 the
     16:9 ratio is taller than the floor anyway, so nothing else
     moves. */
  .po-wedge.po-shot{aspect-ratio:16 / 9 !important;min-height:264px !important}

  /* Discs stay DISCS at every width. Flattening them into wide
     banners below 900 was tried twice and rejected twice — Ali:
     "the shape gets lost when you go to tablet", and again on this
     one. A rectangle with one rounded corner is not the same mark
     as a circle with one square corner, and the circle is the
     thing that carries the identity.

     The reason the banner kept coming back is the orphan problem:
     a 260px circle alone in a stacked 688px row leaves 428px of
     nothing beside it. So the answer is to stop stacking those
     rows rather than to change the shape — the disc pairs with
     its own copy below 900 instead (see the pairing rule after
     this block). Photo wedges still stack full width; they are
     too wide to sit beside a readable column. */
  .po-wedge.po-disc-br,.po-wedge.po-disc-bl{
    width:100% !important;
    max-width:none !important;
    aspect-ratio:1 !important;
    min-height:0 !important;
    justify-self:stretch !important}
  .po-def .po-row,.po-who .po-row{max-width:none}
  /* every section now leads with its own heading in the DOM, so
     stacking in source order already opens with the name */
  .po-help .po-wedge,.po-who .po-wedge,.po-work .po-wedge{order:0}
  .po-help .po-list,.po-who .po-body{order:0}  .po-wedge h2{max-width:none}
}

@media (max-width:560px){
  /* :not() the discs. This rule sits AFTER the 900 block, so a bare
     `.po-wedge{aspect-ratio}` at equal specificity beat the disc rule
     above it and the circles went back to being ellipses on a phone.
     That is the bug that survived the last pass. */
  .po-wedge:not(.po-disc-br):not(.po-disc-bl){aspect-ratio:2.1 !important}
  .po-wedge.po-disc-br,.po-wedge.po-disc-bl{aspect-ratio:1 !important}
  .po-opener{padding-top:clamp(120px,26vw,150px)}
}

/* reduced motion is handled globally in craft.css; nothing here
   animates on its own. */

/* ============================================================
   PER-PAGE DEVICES
   The chrome is shared (opener, arch, goldenrod, CTA) but each
   page varies the COUNT and MIX of shapes. Advisory rejected
   twice in July for pages that looked like each other — same
   system, different composition, is the answer to that.
   ============================================================ */

/* ---------- ABOUT · the voice quote -------------------------
   About's own device, not borrowed from Advisory: Crete Round
   at display size, with the illustration held in a disc. */
.po-voice{background:var(--porcelain-cool);
  padding:var(--sec-y) 0}
.po-voice .po-row{grid-template-columns:220px minmax(0,1fr);
  align-items:start}
/* Porcelain, NOT ink: the illustration is dark line-art and
   disappears entirely on a black ground. The same slot takes a
   photograph later, which is the reason it is a frame and not a
   silhouette. */
.po-voice .po-portrait{width:220px;aspect-ratio:1;
  border-radius:50% 50% 50% 0;overflow:hidden;
  background:var(--porcelain)}
.po-voice .po-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.po-voice blockquote{margin:0}
.po-voice blockquote p{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.375rem,2.36vw,2.125rem);
  line-height:1.32;
  letter-spacing:-.01em;
  color:var(--text-strong)}
.po-voice cite{display:block;margin-top:clamp(24px,2.8vw,40px);font-style:normal}
.po-voice cite b{display:block;font-size:var(--t-body-sm);font-weight:var(--fw-semi);
  letter-spacing:-.01em;color:var(--text-strong)}
.po-voice cite span{display:block;margin-top:8px;
  font-size:var(--t-body-sm);line-height:1.6;font-weight:var(--fw-med);color:var(--mut)}

/* ---------- a plain two-column prose section ----------------
   No shape at all. Deliberate: it is the breath between wedges
   and it stops the page reading as a shape parade. */
.po-plain{background:var(--porcelain);padding:var(--sec-y) 0}
.po-plain h2{
  margin:0 0 clamp(28px,3vw,44px);
  font-size:var(--ramp-h2);
  line-height:1.2;letter-spacing:-.025em;
  font-weight:var(--fw-bold);color:var(--text-strong)}
.po-spread{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,3vw,44px)}
.po-spread p{margin:0;font-size:var(--t-lead);line-height:var(--lh-lead);
  letter-spacing:-.015em;font-weight:var(--fw-med);color:var(--mut)}
.po-spread p:first-child{color:var(--text-strong)}

/* ---------- the goldenrod margin note -----------------------
   Carried over from the L7 pattern. Goldenrod as a RULE, never
   as type — the standing brand constraint. */
.po-note{position:relative;margin-top:clamp(28px,3vw,44px);padding-left:16px}
.po-note::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:3px;
  background:linear-gradient(var(--gold) 0%,var(--gold) 62%,rgba(217,164,4,0) 100%)}
.po-note p{margin:0;font-size:var(--t-body-sm);line-height:1.6;
  font-weight:var(--fw-med);color:var(--mut)}
.po-note p + p{margin-top:var(--s5)}

@media (max-width:900px){
  .po-voice .po-row{grid-template-columns:minmax(0,1fr)}
  .po-voice .po-portrait{width:150px}
  .po-spread{grid-template-columns:minmax(0,1fr)}
}

/* ---------- WHO IT'S FOR · the ground inversion --------------
   This page's device. Two panels, same size, opposite grounds:
   the fit and the not-fit argued side by side. Containers stay
   SQUARE — the Holding Shape rule is that panels are square and
   only the shapes curve, so the drama here is tonal, not formal. */
.po-split{background:var(--porcelain-cool);padding:var(--sec-y) 0}
.po-split .po-row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.po-panel{padding:var(--pad-panel);border-radius:0}
.po-panel.po-yes{background:var(--porcelain);box-shadow:0 0 0 1px rgba(2,26,38,.10)}
.po-panel.po-no{background:var(--ink)}
.po-panel h2{margin:0 0 var(--s5);
  font-size:var(--ramp-h2-sm);line-height:1.2;
  letter-spacing:-.025em;font-weight:var(--fw-bold);color:var(--text-strong)}
.po-panel .po-intro{margin:0 0 clamp(24px,2.6vw,36px);
  font-size:var(--t-body);line-height:var(--lh-body);
  font-weight:var(--fw-med);color:var(--mut)}
.po-panel.po-no h2{color:var(--w)}
.po-panel.po-no .po-intro,.po-panel.po-no .po-ticks li{color:var(--w-dim)}

.po-ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.po-ticks li{position:relative;padding-left:26px;
  font-size:var(--t-body);line-height:var(--lh-body);
  font-weight:var(--fw-med);color:var(--mut)}
.po-ticks li::before{content:"";position:absolute;left:0;top:.62em;
  width:14px;height:2px;background:var(--teal)}
/* goldenrod as a MARK on the dark panel — never as type */
.po-panel.po-no .po-ticks li::before{background:var(--gold)}

/* ---------- the card rail ----------------------------------- */
.po-rail-sec{background:var(--porcelain);padding:var(--sec-y) 0}
.po-rail-sec h2{margin:0 0 clamp(28px,3vw,44px);
  font-size:var(--ramp-h2);line-height:1.2;
  letter-spacing:-.025em;font-weight:var(--fw-bold);color:var(--text-strong)}
.po-rail{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-sm)}
.po-rail li{padding:var(--pad-chip);background:var(--porcelain-cool);
  border-radius:0;
  /* the li is a CARD, not a line of text — the comp.css measure
     floor was capping it at 33em (561px) and leaving 67px of the
     grid track empty. The <p> inside still carries the measure. */
  max-width:none}
.po-rail li p{margin:0;
  font-size:var(--ramp-h3);line-height:1.32;
  letter-spacing:-.02em;font-weight:var(--fw-bold);color:var(--text-strong)}

/* ---------- COFFEE CHAT · facts + form ----------------------- */
/* the three facts ride inside the opener, under a gold hairline */
.po-facts{margin:clamp(32px,3.4vw,48px) auto 0;
  max-width:841px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;
  /* the 2px gold rule that used to sit above this strip was the
     last hairline on the site. Removed 27 Aug — no hairlines. */
  border-top:0}
.po-facts li{list-style:none;font-size:var(--t-body);line-height:1.5;
  font-weight:var(--fw-med);color:var(--w-dim2)}
.po-facts b{color:var(--w);font-weight:var(--fw-bold)}

.po-form-sec{background:var(--porcelain-cool);padding:var(--sec-y) 0}
.po-form-sec .po-row{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  align-items:start}
.po-form-sec .po-wedge{aspect-ratio:1.3;order:1}
.po-form{order:2;display:flex;flex-direction:column;gap:clamp(20px,2vw,28px);max-width:640px}
.po-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-sm)}
.po-field label{display:block;margin:0 0 6px;
  font-size:var(--t-body-sm);line-height:1.3;
  font-weight:var(--fw-semi);letter-spacing:-.01em;color:var(--text-strong)}
.po-field .po-opt{font-weight:var(--fw-med);color:var(--mut)}
.po-field input,.po-field textarea{
  width:100%;padding:14px 16px;
  border:1px solid rgba(0,0,0,.22);border-radius:0;   /* containers are square */
  background:var(--porcelain);color:var(--body);
  font-family:var(--sans);font-size:var(--t-body);line-height:var(--lh-body);
  font-weight:var(--fw-med)}
.po-field textarea{min-height:170px;resize:vertical}
.po-field input:focus-visible,.po-field textarea:focus-visible{
  outline:2px solid var(--teal);outline-offset:2px;border-color:var(--teal)}
.po-hint{margin:7px 0 0;font-size:var(--t-body-sm);line-height:1.5;
  font-weight:var(--fw-med);color:var(--mut)}
.po-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.po-send{display:flex;flex-direction:column;gap:var(--s5);align-items:flex-start}

/* ---------- HOMEPAGE · six-card grid ------------------------- */
.po-cards-sec{background:var(--porcelain);padding:var(--sec-y) 0}
.po-cards-sec .po-intro{margin:0 0 clamp(32px,3.4vw,48px);max-width:70ch;
  font-size:var(--t-lead);line-height:var(--lh-lead);letter-spacing:-.015em;
  font-weight:var(--fw-med);color:var(--mut)}
.po-cards{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap-sm)}
.po-cards li{padding:var(--pad-card);background:var(--porcelain-cool);border-radius:0}
.po-cards h3{margin:0 0 8px;
  font-size:var(--ramp-h3);line-height:1.22;
  letter-spacing:-.025em;font-weight:var(--fw-bold);color:var(--text-strong)}
.po-cards p{margin:0;font-size:var(--t-body);line-height:var(--lh-body);
  font-weight:var(--fw-med);color:var(--mut)}

/* the homepage title outruns the inner-page ladder — it is the
   front door, not a section head */
.po-opener.po-front h1{font-size:var(--t-display);
  line-height:var(--lh-display);letter-spacing:var(--tr-display);
  max-width:20ch;margin-inline:auto}

@media (max-width:900px){
  .po-split .po-row,.po-form-sec .po-row{grid-template-columns:minmax(0,1fr)}
  .po-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .po-form-sec .po-wedge{order:0}
}
/* two columns is right for a tablet; one only once it is a phone */
@media (max-width:620px){
  .po-cards{grid-template-columns:minmax(0,1fr)}
  .po-pair{grid-template-columns:minmax(0,1fr)}
}

/* Goldenrod as TYPE is allowed here and ONLY here: on ink it
   measures 9.26:1. The brand rule that bans it ("never type")
   is about porcelain, where it fails badly. Never lift this
   selector onto a light ground. */
.po-opener .accent-phrase{color:var(--gold)}

.po-creds{display:flex;flex-wrap:wrap;gap:clamp(20px,2.4vw,36px);
  margin-top:clamp(28px,3vw,44px)}
.po-creds .po-cred{min-width:0}
.po-creds .k{font-size:var(--t-micro,12px);line-height:1.3;font-weight:var(--fw-bold);
  letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.po-creds .v{margin-top:4px;font-size:var(--t-body-sm);line-height:1.45;
  font-weight:var(--fw-med);color:var(--text-strong)}

/* portrait slot still awaiting the real photograph */
.po-portrait.po-empty{display:flex;align-items:center;justify-content:center;
  background:var(--porcelain-cool)}
.po-portrait.po-empty span{font-size:var(--t-body-sm);font-weight:var(--fw-med);
  color:var(--mut);text-align:center;padding:0 18px}

/* ---------- fixes found in the browser, not in the plan ------ */

/* The opener's button had no separation from the lede: the
   margin rule was scoped to `.po-cta .po-act` only. */
.po-opener .po-act{margin-top:clamp(28px,3.2vw,44px)}

/* `.po-help .po-wedge` takes its height from the row, which works
   on Advisory (a six-item list) and collapses on the homepage,
   where the body is one paragraph. The arc stops reading as an
   arc below roughly 220px. */
.po-help .po-wedge{min-height:clamp(200px,24vw,340px)}

/* An empty portrait frame on a cool ground was all but invisible.
   Until the real photograph lands it needs to read as a
   deliberate reserved slot, not a rendering failure. */
.po-portrait.po-empty{
  background:var(--porcelain);
  box-shadow:0 0 0 1px rgba(2,26,38,.16)}

/* ============================================================
   BLEND WITH THE HOMEPAGE LANGUAGE — 25 Aug 2026
   Ali: "It needs to be a blend of the two."

   Crossing over FROM the homepage (home.css):
     · the diagonal corner, 40 0 40 0, on every card and panel
     · teal-tint card grounds
     · radius-8 buttons
     · photography

   Staying FROM the poster system:
     · the black rounded opener + arch colonnade
     · the wedges and their negative space
     · the goldenrod statement band

   Everything here is an OVERRIDE appended at the end of the file,
   so reverting the blend is deleting one block rather than
   unpicking the system.
   ============================================================ */
:root{--corner:var(--corner-fluid)}

/* --- containers take the diagonal corner ------------------- */
.po-panel,
.po-rail li,
.po-voice .po-portrait{
  border-radius:var(--corner) 0 var(--corner) 0}

/* the portrait keeps its disc geometry — it is a SHAPE, not a
   container, and the disc is what ties it to the wedges */
.po-voice .po-portrait{border-radius:50% 50% 50% 0}

/* --- card grounds move from cool grey to the teal tint ----- */
.po-rail li{background:var(--teal-tint)}
.po-split{background:var(--porcelain)}
.po-panel.po-yes{background:var(--teal-tint);box-shadow:none}

/* --- buttons match the homepage: radius 8, not square ------ */
.po-btn{border-radius:8px;padding:14px 24px;min-height:0;
  font-size:14.4px;font-weight:var(--fw-med)}

/* --- form fields follow the buttons ------------------------ */
.po-field input,.po-field textarea{border-radius:8px}

/* --- the statement band matches the homepage's setting ----- */
.po-statement p{font-size:clamp(1.625rem,3.33vw,3rem);line-height:1.27}

/* --- photography inside a wedge ---------------------------- *
   The wedges were always described as placeholders for photos.
   A photo-filled wedge keeps its shape and takes a scrim, because
   a heading sitting on unmodified photography is exactly the
   contrast failure that has bitten this project twice. Scrim
   values are measured per image, not assumed. */
.po-wedge.po-shot{overflow:hidden;isolation:isolate}
.po-wedge.po-shot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2;display:block}
.po-wedge.po-shot::after{content:"";position:absolute;inset:0;z-index:-1}
.po-wedge.po-shot h2{position:relative;z-index:1}

/* per-shape scrim direction, so the gradient always deepens
   toward the corner the heading sits on */
/* THE SCRIM MUST BE DARKEST WHERE THE HEADING SITS.
   These were diagonal (20deg / 200deg), tuned when the wedge was tall
   and the heading happened to fall on the dark end. Once the wedge
   became 16:9 the bottom-anchored headings landed on the .28 end and
   measured 2.09–2.38:1 over the real photo — a fail axe cannot see,
   because axe does not read text over images.
   Now the gradient runs along the axis the heading is anchored to.
   Measured worst case over all three photos at 1440/768/390:
   bottom-anchored 4.32:1, top-anchored 6.28:1, coffee disc 4.85:1. */
.po-arc-bl.po-shot::after,
.po-disc-bl.po-shot::after,
.po-disc-br.po-shot::after{
  background:linear-gradient(180deg,rgba(4,14,20,.25) 0%,rgba(4,14,20,.55) 55%,rgba(4,14,20,.80) 100%)}
.po-arc-tr.po-shot::after{
  background:linear-gradient(180deg,rgba(4,14,20,.80) 0%,rgba(4,14,20,.50) 55%,rgba(4,14,20,.25) 100%)}

/* --- the Coffee Chat form's prototype state ---------------- *
   The handler is deferred to the conversation with Colleen, so
   the button must not fail silently in front of her. */
.po-formnote{margin:0;padding:14px 18px;border-radius:8px;
  background:var(--teal-tint);
  font-size:var(--t-body-sm);line-height:1.5;font-weight:var(--fw-med);
  color:var(--text-strong)}
.po-formnote:not(.is-on){display:none}
.po-formnote b{font-weight:var(--fw-bold)}
/* the same note, in the failure case. Warm rather than red: red is not in
   the palette, and a send that can be retried is not an alarm. */
.po-formnote.is-err{background:#FDF3E0}

/* uncapped strays found by the measure audit — see --measure.
   Kept as one block so the next audit has one place to look. */
.po-lede{max-width:min(841px,var(--measure-lede))}
.po-spread p{max-width:var(--measure)}
.po-field .po-hint{max-width:var(--measure)}
.po-panel .po-intro,
.po-intro,
.po-statement p,
.po-ticks li{max-width:var(--measure)}

/* ---------- tablet band (25 Aug) ---------------------------
   768 audited as the weakest width on the site. Three defects,
   all measured rather than eyeballed:

   1 · gutter was 20px — the SAME value as a 390 phone, because
       clamp(20px,2vw,27px) bottoms out below 1000. A 728px
       content column inside 20px margins reads as a stretched
       phone, not a tablet.
   2 · every disc sat ALONE in a full-width row: 260px of shape
       and 468px of nothing beside it, on three pages.
   3 · measure ran 86-97 characters (fixed above by --measure).

   The upper bound stops at 1023 on purpose. From 1334 up the
   container is capped so the content column can stay at exactly
   1280, which fixes --gut at 27; widening it there would eat
   into the 1280 lock. */
@media (min-width:621px) and (max-width:1023px){

  /* RETIRED 26 Aug — see below. Keeping the disc rows paired at
     768 while every other row stacked put Advisory into a mixed
     state: the audit read its rows as 2-1-1-2 at the same width,
     which is what "inconsistent across the breakpoints" feels
     like from the outside. One collapse point now, for every row
     on every page. */
}

/* ---------- section rhythm (26 Aug) ------------------------
   Measured, not guessed. Across the whole site: ink is 30% of
   vertical space, photography 9%, teal 9%, goldenrod 4% — so 78%
   of every page is two colours. Advisory was the worst: 38% ink,
   4% photo, 2% teal, with a single unbroken 697px run of solid
   black. Ali's read was "flat and heavy". That is what flat and
   heavy measures like.

   The cause was one selector. `.po-def,.po-help,.po-work,.po-who`
   shared ONE ground and ONE padding, so four consecutive sections
   were identical and the only variation left was whether the black
   shape sat left or right.

   No new colours here. tokens.css already says the system "needs
   three light grounds so no two adjacent sections match" — the
   poster layer simply never used them and hardcoded porcelain for
   all four. This uses --porcelain-cool, the cool neutral chosen on
   20 Aug when the card washes moved off teal-tint.

   Deliberately NOT used, per decisions already on record:
     · teal-tint as a section ground — "i dont really want any of
       that light blue background on cards" (20 Aug). The rejection
       was about cards, not full-bleed grounds, so this is a question
       for Ali rather than an assumption.
     · any warm/yellow tint — "i dont want anything with the light
       yellow" (20 Aug). --porcelain-warm and --gold-tint are retired. */
.po-g1,.po-g4{background:var(--porcelain)}
.po-g2,.po-g3{background:var(--porcelain-cool)}

/* the pulse: open wide, tighten through the middle, open again, so
   the page stops reading as a metronome */
.po-g1{padding:calc(var(--sec-y) * 1.15) 0}
.po-g2{padding:var(--sec-y) 0}
.po-g3{padding:calc(var(--sec-y) * 0.86) 0}
.po-g4{padding:calc(var(--sec-y) * 1.15) 0}

/* ══════════════════════════════════════════════════════════
   ADVISORY PASS · 26 Aug — Ali's four notes
   ══════════════════════════════════════════════════════════ */

/* 1 · "the body text isn't really giving it the space it needs"
   The lede sat 24-34px under the sub and ran at the body's own
   line-height, so the hero read as three stacked blocks rather
   than a heading with a paragraph under it. */
.po-opener-shot .po-lede{
  margin-top:clamp(38px,4.4vw,60px);
  line-height:1.66;
  max-width:min(700px,var(--measure-lede))}
.po-opener-shot{padding-bottom:clamp(120px,12vw,172px)}

/* 2 · "maybe we can add color vs the black and white"
   Both measured, both inside rules already on record:
     teal   #0071A5 + porcelain = 5.33:1   (bar 3.0 for the 34px
                                            bold heading; clears
                                            4.5 as well)
     copper-deep #9E4227 + porcelain = 6.38:1
   See the note on .po-copper below for why it is the deep step
   and not the locked copper. */
.po-wedge.po-teal{background:var(--teal)}
.po-wedge.po-teal h2{color:var(--porcelain)}

/* Locked copper #C65A3A only takes black type (4.92:1 with ink,
   4.23:1 with porcelain), and orange-with-black is the ugliest
   pairing in the palette. --copper-deep exists precisely because
   "the locked copper fails AA on porcelain" — at 6.38:1 it takes
   white, and reads as burnt terracotta rather than safety orange. */
.po-wedge.po-copper{background:var(--copper-deep)}
.po-wedge.po-copper h2{color:var(--porcelain)}

/* 2b · "not a huge fan of how the text looks in these"
   It was 34px jammed into the square corner on ~20px of padding,
   so it read as a caption stuck to the shape rather than as the
   section's heading. Bigger, more air, and a measure that breaks
   the line where the sense breaks instead of where the curve is. */
.po-wedge h2{
  padding:clamp(30px,3.4vw,46px) clamp(32px,3.6vw,50px);
  font-size:var(--ramp-h2-xl);
  line-height:1.04;
  letter-spacing:-.03em;
  max-width:13ch;
  text-wrap:balance}

/* Disc headings need more room at the bottom than the curved
   rectangles do, and the reason is geometric. A disc is a circle
   with one square corner, so along its very bottom edge only the
   square quadrant is painted — half the width. The heading sits
   in that corner, and at 56px "Who it's for" ran to within 3px of
   the curve. Not clipped; measured at 0 pixels off the shape. But
   at 3px the eye reads the diagonal edge as slicing the r, which
   is the same problem from the reader's side.

   Percentage padding resolves against the wedge width, so the
   text rises out of the narrow bottom band as the disc grows.
   Verified with check-glyphs-in-shape.py, which measures the real
   clearance rather than the bounding box. */
.po-disc-br h2,.po-disc-bl h2{padding-bottom:max(44px,22%)}
/* NB this must sit AFTER `.po-wedge h2{padding:...}` above. Same
   specificity (0,1,1), so source order decides, and the shorthand
   resets padding-bottom. Placed 650 lines earlier the first time
   and it silently did nothing. */


/* 3 · "the list of services feels too rigid" + "the supporting
   text feels very light" on the cool ground.
   Rigid because six identical label+sentence pairs sat in one
   flat column with equal gaps and nothing to group them. Now two
   columns with a hairline grid, which also halves the height and
   lets the section breathe. Supporting copy moves off --mut. */
/* Cards, not hairlines — Ali: "I dont like the faint lines
   betweem tjese amd would like to go back to a card... Keep the
   2 x3 layout just make them cards."

   The section's light blue ground is gone at her request, and the
   cards stay porcelain — "keep them porcelin but have a drop
   shadow like you did for section 2".

   That makes porcelain cards on a porcelain ground: 1.0:1, no
   tonal difference at all. The shadow is not decoration here, it
   is the ONLY thing separating card from page. Same values as the
   lead card in section 2 so the two sections read as one idea.

   Worth knowing if this ever gets revisited: at 1.0:1 there is no
   fallback. Anything that flattens the shadow — a forced-colours
   mode, a print stylesheet — leaves six invisible cards and what
   looks like one long list. The tint version had a tonal
   difference to fall back on; this does not. */
.po-help{background:var(--porcelain)}
.po-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.5vw,20px)}
.po-list li{
  background:var(--porcelain);
  border-radius:clamp(16px,1.8vw,24px);
  box-shadow:0 20px 52px rgba(2,26,38,.13);
  padding:clamp(20px,2.1vw,28px);
  border:0}
.po-list h3{margin:0 0 6px}
/* Subtext: 14px at 1440, easing to 13 at 390. This is card
   microcopy under a 22px label, not body prose, so it can sit
   below the site's 17px body size.

   Floored at 13, not taken lower. Contrast is not the constraint
   — --mut on porcelain is 7.16:1 at any size, well over the 4.5
   bar — but small type is harder to read regardless of contrast,
   and 13px on a phone is already at the bottom of comfortable.
   The ramp is gentle on purpose: one pixel across the whole
   range, because there is nowhere to go underneath it. */
.po-list p{
  font-size:clamp(13px,12.63px + .095vw,14px);
  line-height:1.6;
  color:var(--mut)}

@media (max-width:900px){
  .po-list{grid-template-columns:minmax(0,1fr)}
}

/* 4 · the CTA, fourth pass — Ali picked "a blend of b and d".
   From D: the page no longer ends on a saturated full-bleed band.
   The ground is porcelain and the CTA is an object sitting on it,
   so the only dark thing below the fold is the footer.
   From B: the layout is asymmetric with the shape carrying
   "Let's talk", which is what every other section on this page
   does — copy one side, shape the other.
   Teal is out at her call; the band version is gone entirely.

   Why the previous three attempts missed: they all treated the
   decoration. The CTA was the only CENTRED block on a page whose
   every other section is asymmetric, so it read as bolted on no
   matter what pattern or colour went into it.

   Contrast, all measured:
     porcelain on copper-deep #9E4227 = 6.38:1   heading + lede
     ink on porcelain                 = 20.4:1   the disc, the button */
.po-cta{
  background:var(--porcelain);
  padding:var(--sec-y) 0;
  border-radius:0;
  text-align:left}
.po-cta::after{content:none}

/* Four goes at this section; Ali picked the teal card, 26 Aug.

   The earlier "no teal" was about a full-bleed teal BAND spanning
   the viewport, which is a different object from a contained card
   sitting on a porcelain page — the page still stops ending on a
   dark or saturated full-width slab, which was the point.
   Copper-deep is out: it put the tail warm-on-warm, copper disc
   into goldenrod band into copper card, three in a row.

   Teal is the brand primary and the action colour the buttons
   already use, so the most important block on the page is finally
   the most saturated one. No hairline needed here — teal on
   porcelain is 5.33:1, so the card edge reads on its own. */
/* THE CLOSING CARD · one centred column (option A, 27 Aug, Ali)
   The "Let's talk" disc is gone. It was the reason the card was
   two columns, and the reason the copy sat in a 500px block
   pinned toward the middle. Left where it was, that block had
   nothing explaining why it stopped where it did — so the card
   centres, and the heading, line and button stack down the
   middle. Colours are untouched: porcelain on teal is 5.33:1 for
   the heading, .95 porcelain 4.97:1 for the line, and the button
   stays porcelain-on-ink at 20.81:1. */
.po-cta-card{
  background:var(--teal);
  border-radius:var(--corner-fluid) 0 var(--corner-fluid) 0;
  padding:clamp(40px,4.6vw,68px) clamp(32px,3.8vw,60px);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  text-align:center;
  gap:clamp(28px,3.6vw,56px)}
.po-cta-copy{max-width:min(680px,100%)}

/* Scoped to .po-cta-copy, not .po-cta. As `.po-cta p` this rule
   also matched .po-cta-mark — which IS a <p> — and painted
   "Let's talk" porcelain on a porcelain disc, i.e. invisible.
   (0,1,1) beat the (0,1,0) of .po-cta-mark. */
.po-cta-copy h2{margin:0 auto;color:var(--porcelain);max-width:20ch;text-wrap:balance}  /* 5.33:1 */
 /* .95, not .90. Full porcelain on teal is only 5.33:1 to begin
    with, so dimming eats the margin fast: .90 lands at 4.63:1,
    3% over the 4.5 bar for 18px text, and .85 fails outright.
    .95 gives 4.97:1 and still reads softer than the heading. */
.po-cta-copy p{margin:var(--s5) auto 0;color:rgba(255,254,250,.95);
  max-width:min(46ch,var(--measure-lede));text-wrap:balance}
.po-cta-copy .po-act{margin-top:clamp(30px,3.4vw,44px)}
/* on a teal card the teal button disappears — porcelain with ink
   type instead, 20.81:1, the .hp-btn-white pattern */
.po-cta .po-btn{background:var(--porcelain);color:var(--ink)}
.po-cta .po-btn:hover{background:#EFE9DC}
.po-cta .po-btn:focus-visible{outline-color:var(--porcelain)}

@media (max-width:900px){
  .po-cta-card{gap:clamp(26px,4vw,36px)}
}

/* Buttons. Must sit after the blend override at ~681, which
   hardcoded radius 8. Same value now, but from the token, so the
   homepage and the poster pages cannot drift apart again.
   See --btn-radius in tokens.css. */
.po-btn{border-radius:var(--btn-radius)}

/* ---------- lead band (26 Aug) -----------------------------
   Ali: "i still want to come up with an alternative to having
   the body text in the hero."

   The opening paragraph now sits in its own band directly under
   the hero instead of over the photograph. Three things get
   better: the hero carries a title and nothing else, so the
   picture is legible as a picture; the paragraph gets to be
   larger than 18px because it is no longer competing with a
   photograph for contrast; and it stops being the third stacked
   text block in a row.

   Applied to all four sub-pages at once — heroes that differed
   page to page is the kind of drift the breakpoint audit kept
   turning up.

   Named .po-lead-band, NOT .po-intro. `.po-intro` was already
   taken by the intro PARAGRAPH inside .po-panel and .po-cards-sec,
   and it carries `max-width:var(--measure)` from the measure
   audit. Reusing the name put a 561px cap on a full-bleed section
   and the whole band collapsed to a third of the page. */
.po-lead-band{
  background:var(--porcelain);
  padding:clamp(52px,6vw,88px) 0 clamp(48px,5.4vw,78px);
  text-align:center}

.po-lead-band .po-lede{
  margin:0 auto;
  font-size:clamp(20px,15.9px + 1.28vw,28px);
  line-height:1.44;
  letter-spacing:-.02em;
  font-weight:var(--fw-med);
  color:var(--text-strong);
  max-width:min(720px,var(--measure-lede))}

/* the Coffee Chat facts strip travels with the paragraph */
.po-lead-band .po-facts{margin-top:clamp(26px,3vw,40px)}

/* the hero has one job now */
.po-opener-shot{padding-bottom:clamp(96px,10vw,140px)}

/* The facts strip travelled with the paragraph out of the hero and
   onto a porcelain ground, still coloured for a photograph — white
   on white, invisible. Third time this exact failure has appeared
   (the wedge headings, "Let's talk", now this): moving an element
   between grounds without re-checking its colour. */
.po-lead-band .po-facts li{color:var(--mut)}      /* 6.90:1 on porcelain */
.po-lead-band .po-facts b{color:var(--text-strong)}.po-def .po-row{grid-template-columns:minmax(0,1fr) 400px}
.po-def .po-wedge{justify-self:end;order:2}
.po-def .po-body{order:1}

/* ---------- the definition section, rebuilt -----------------
   Ali: "this feels very under designed." It was a flat teal disc
   beside two undifferentiated paragraphs, with the right third of
   the section empty. Nothing to look at and no hierarchy.

   The structure was already sitting in the approved copy and was
   simply not being expressed. Sentence one IS a definition, so it
   is set as one. The last three sentences are three separate
   statements about three different people — bookkeeper,
   accountant, me — so they become three rows instead of a
   paragraph. No words changed, added or reordered; only the
   markup that carries them. */
.po-def .po-lead-in{
  margin:0 0 var(--s6);
  font-size:var(--ramp-h2-sm);
  line-height:1.25;
  letter-spacing:-.02em;
  font-weight:var(--fw-bold);
  color:var(--text-strong)}

/* wider than the paragraph above it on purpose. The paragraph is
   prose and holds to the measure; these are three short
   statements, and letting them run wider closes the dead gap that
   was sitting between the text column and the disc. */
.po-roles{
  list-style:none;
  margin:clamp(28px,3vw,42px) 0 0;
  padding:0;
  max-width:min(660px,100%)}
.po-roles li{
  padding:clamp(13px,1.4vw,18px) 0;
  font-size:var(--t-body);
  line-height:var(--lh-body);
  font-weight:var(--fw-med);
  color:var(--mut)}
/* the third row is the point of the other two — it carries the
   weight, the darker ink, and a teal rule to mark the turn */
.po-roles .po-roles-mine{
  border-top:2px solid var(--teal);
  font-size:var(--ramp-h3);
  line-height:1.35;
  letter-spacing:-.015em;
  font-weight:var(--fw-bold);
  color:var(--text-strong)}

/* ---------- disc rows pair below 900 (26 Aug) --------------
   So the disc can stay round without leaving a hole beside it.
   Scoped with :has() to rows that actually hold a disc — the
   photo wedges keep stacking full width, because a 16:9 image
   beside a readable column at 768 leaves neither enough room.

   That does mean a tablet page can show a two-column row and a
   stacked row together. I flagged that as an inconsistency in the
   breakpoint audit and removed the pairing because of it; between
   the two, keeping the shape intact is what Ali has asked for
   twice, so the mixed row wins. */
@media (min-width:600px) and (max-width:900px){}
/* below 1200 the note column is too narrow to set 15px type in,
   so it drops under the body rather than being squeezed */
@media (max-width:1199px){}
@media (max-width:900px){}
/* ---------- Advisory · the lead card ----------------------
   Fifth version, and the notes that got it here are worth
   keeping because each one killed a whole family of attempts:

     "this feels very under designed"  — a bare centred paragraph
     "the inner pages need to be different from the homepage"
                                       — killed the ported scallop
     "the block in the shape isnt a headline, and its being
      treated as one"                  — killed every version that
                                         set the first sentence at
                                         38-46px
     "I like A, but i dont like it overlapping. Also i dont like
      this in columns."                — the card, landed.

   So: a card, sitting normally under the hero rather than riding
   up into it, with both sentences stacked in ONE column. It is
   body copy and it is set as body copy; the shadow and the
   corner do the design work, not the type size.

   Full width, and one curve on all four corners. The earlier
   version was 820px hard against the left edge and read as
   something that had failed to fill its space rather than
   something sized on purpose.

   That leaves the measure to solve a different way. A single
   column across the whole 1152px content box would run 107
   characters; the fix is symmetric padding, not a narrower card.
   The copy sits centred with `margin:auto`, so the slack is split
   evenly and reads as generous padding rather than as a hole on
   one side — which is what killed every version that capped text
   inside a wide box and left it hanging left.

   Type is option D of six: left-aligned, 25px at 1440, bold
   claim over muted support. Left rather than centred because the
   copy runs four lines and centring costs the reader the left
   edge on every return — fine for one or two lines, not for four.
   25px is the largest that still reads as body copy; past that it
   starts pretending to be the heading again, which is the note
   that killed four earlier versions.

   700, not 760 or 820. The measure has to come down as the type
   goes up: at 25px, 700px is 56 characters. 820 at 21px measured
   exactly 78, sitting on the audit's own ceiling at three widths. */
.po-lead-band:has(.po-lead-card){text-align:left}

.po-lead-card{
  background:var(--porcelain);
  box-shadow:0 20px 52px rgba(2,26,38,.13);
  border-radius:clamp(30px,4vw,64px);
  padding:clamp(38px,4.6vw,68px) clamp(34px,4vw,58px)}

.po-lead-card p{
  margin:0 auto;
  max-width:min(700px,100%);
  font-size:clamp(18px,15.4px + .667vw,25px);
  line-height:1.46;
  letter-spacing:-.012em;
  font-weight:var(--fw-med);
  color:var(--text-strong)}          /* 19.5:1 on porcelain */
.po-lead-card p + p{
  margin-top:.95em;
  color:var(--mut)}                  /* 7.16:1 — support, not claim */
.po-lead-card p:first-child{
  font-weight:var(--fw-bold);
  letter-spacing:-.018em}

/* ---------- disc rows pair below 900 (26 Aug) --------------
   So the disc can stay round without leaving a hole beside it.
   Scoped with :has() to rows that actually hold a disc — the
   photo wedges keep stacking full width, because a 16:9 image
   beside a readable column at 768 leaves neither enough room.

   That does mean a tablet page can show a two-column row and a
   stacked row together. I flagged that as an inconsistency in the
   breakpoint audit and removed the pairing because of it; between
   the two, keeping the shape intact is what Ali has asked for
   twice, so the mixed row wins. */
@media (min-width:600px) and (max-width:900px){}
/* below 1200 the note column is too narrow to set 15px type in,
   so it drops under the body rather than being squeezed */
@media (max-width:1199px){}
@media (max-width:900px){}
/* ---------- disc rows pair below 900 (26 Aug) --------------
   So the disc can stay round without leaving a hole beside it.
   Scoped with :has() to rows that actually hold a disc — the
   photo wedges keep stacking full width, because a 16:9 image
   beside a readable column at 768 leaves neither enough room.

   That does mean a tablet page can show a two-column row and a
   stacked row together. I flagged that as an inconsistency in the
   breakpoint audit and removed the pairing because of it; between
   the two, keeping the shape intact is what Ali has asked for
   twice, so the mixed row wins. */
@media (min-width:600px) and (max-width:900px){
  .po-row:has(> .po-disc-br),
  .po-row:has(> .po-disc-bl){
    grid-template-columns:minmax(0,clamp(200px,27vw,270px)) minmax(0,1fr) !important;
    gap:clamp(26px,3.4vw,40px) !important;
    align-items:center !important}
}
@media (max-width:599px){
  /* one column, and the disc takes most of it so it reads as a
     mark rather than a dot with a margin */
  .po-wedge.po-disc-br,.po-wedge.po-disc-bl{
    width:min(78%,300px) !important;justify-self:start !important}
}/* below 1200 the note column is too narrow to set 15px type in,
   so it drops under the body rather than being squeezed */
@media (max-width:1199px){}
@media (max-width:900px){}
/* ══════════════════════════════════════════════════════════
   ADVISORY · section 3 — WHO IT'S FOR
   One authoritative block. Before this there were FIVE top-level
   `.po-who .po-row` rules with three different column counts,
   each silently overriding the last, plus a `justify-content:
   space-between` still live from the version Ali rejected for
   dumping 280px of slack into one gutter. Splicing new rules in
   without deleting the old ones is how that happens; the linter
   now flags a rule defined twice in the same scope.
   ══════════════════════════════════════════════════════════ */

/* Three columns: the disc, the body, and the note.
   The note carries the qualifying detail and the onward link —
   marginalia, not a third of the argument — so it takes the
   narrowest column and the smallest type. */
.po-who .po-row{
  grid-template-columns:minmax(0,1.5fr) minmax(0,2.2fr) minmax(0,1.05fr);
  gap:clamp(30px,3.4vw,50px);
  /* Ali: "have everything aligned to the bottom of the shape on
     the left." The disc is the tallest thing in the row, so
     end-aligning hangs the body and the note off its baseline
     instead of leaving them floating at the top. */
  align-items:end}

.po-who .po-wedge{aspect-ratio:1;width:100%;justify-self:start;order:1}
.po-who .po-body{order:2}

/* the note, as a card — Ali: "this section on the right can sit
   in a card and be smaller" */
.po-who .po-aside{
  order:3;
  margin:0;
  background:var(--teal-tint);
  border-radius:clamp(16px,1.8vw,24px);
  padding:clamp(20px,2.1vw,28px)}
.po-who .po-aside .po-fine{
  margin:0;
  max-width:none;
  font-size:clamp(13.5px,12.9px + .2vw,15px);
  line-height:1.62;
  color:var(--mut)}
.po-who .po-aside .po-tl-link{margin:clamp(16px,1.8vw,22px) 0 0}

@media (max-width:1199px){
  /* the note column cannot hold 14px type below this, so it drops
     under the body rather than being squeezed */
  .po-who .po-row{grid-template-columns:minmax(0,1.4fr) minmax(0,2.4fr)}
  .po-who .po-aside{grid-column:2}
}
@media (max-width:900px){
  .po-who .po-aside{grid-column:2;margin-top:clamp(16px,2.2vw,24px)}
}
@media (max-width:599px){
  .po-who .po-row{grid-template-columns:minmax(0,1fr)}
  .po-who .po-aside{grid-column:1}
}

/* ---------- Advisory · §5 bottom alignment -----------------
   Ali: "have the text align with the bottom of the card on the
   left." The row was centred, so the copy floated 119px above
   the wedge's baseline at 1440. Same treatment as §3. */
.po-work .po-row{align-items:end}

/* ---------- Advisory · §6 no hairlines ---------------------
   Ali: "remove the hair line dividers." The three role rows
   separate on space alone.

   27 Aug: the teal 2px rule above the last row went too. I had
   kept it on the argument that it was an accent rather than a
   divider — but that was my call, not hers, and "i do not want
   hairlines anywhere on the site" has no accent exemption. It
   was the last decorative rule left on the site. The row still
   reads as the one the other two set up: it is the only bold
   one, and the space above it is now doing the separating. */
.po-roles li{border-top:0;padding:clamp(3px,.35vw,5px) 0}
.po-roles .po-roles-mine{
  border-top:0;
  margin-top:clamp(14px,1.7vw,22px)}

/* Ali: "the text is spaced very strangely, tighten this."
   Once the hairlines came out, the padding that had been holding
   text off them was just floating each single-line row in 26px of
   air, and the block read as five unrelated fragments. The rows
   are now set close, and the space that separates the three parts
   of the section sits BETWEEN the parts rather than inside them. */
.po-def .po-lead-in{margin-bottom:clamp(14px,1.5vw,20px)}
.po-roles{margin-top:clamp(20px,2.1vw,30px)}

/* ---------- Advisory · §8 close the gap --------------------
   Ali: "keep the teal the same width just bring the left and
   right side elements closer together."

   The grid gap was never the problem — it was 52px. The copy
   column was stretching to 846px while the text only filled 577,
   so 269px of empty column sat between them on top of the gap:
   321px of teal in total. Capping the column and centring the
   pair closes it to the gap itself. The card keeps its full
   width. */
/* "make these much closer and centered in the teal card" — the
   column comes down from 600 to 500 so it stops holding the text
   away from the mark, and the gap halves. justify-content:center
   keeps the pair centred rather than pinned to the card edges. */
/* The 500px copy column and the 240px mark column both existed to
   hold the "Let's talk" disc. With the disc gone (27 Aug, Ali) the
   card is one centred column — see the CLOSING CARD note below. */
/* min-width guarded, NOT left bare. As a top-level rule this sat
   400 lines BELOW the @media(max-width:900px) that stacks the card
   on tablet and phone, and beat it on source order — the card
   stayed two-column at 768 with an 8px gap between the copy and
   the mark. Fifth time source order has caught me in this file;
   a min-width guard cannot lose to a later top-level rule. */

/* ---------- Advisory · §6 stacks with everything else -------
   The tablet audit caught it: §6 held two columns all the way
   down to 620 with a FIXED 400px disc, so its text column
   collapsed to 243px at 900 and 207px at 768 — about 24
   characters a line. Every other row on the page stacks at 900
   or 1024; this one was the only holdout, which is exactly what
   was making tablet look wrong.

   Above 900 the disc also stops being a fixed 400 and takes a
   share of the row, so it shrinks with the page instead of
   eating the text column as the viewport narrows. */
@media (min-width:901px){
  .po-def .po-row{grid-template-columns:minmax(0,1.9fr) minmax(0,1.1fr)}
  .po-def .po-wedge{width:100%;max-width:400px}
}
/* §6 STACKS at tablet rather than pairing, and needs !important to
   say so — the :has() disc-pairing rule that keeps §3's disc round
   also matched this row and handed it a 207px disc at 768.

   §3's heading is "Who it's for", 12 characters, and sits happily
   in 207px. §6's is "What a fractional CFO is", 24 characters at
   40px, and does not: it ran straight off the teal onto the
   porcelain behind, where porcelain type measured 1.69:1 against a
   3.0 bar. Caught by check-text-on-art.py, which composites the
   real pixels — the CSS looked identical for both discs.

   So the two rows diverge at tablet on content length, which is
   the honest reason for them to diverge. */
@media (max-width:900px){
  .po-def .po-row{grid-template-columns:minmax(0,1fr) !important}
  .po-def .po-wedge{order:1;width:min(78%,300px) !important;
    justify-self:start !important;aspect-ratio:1 !important}
  .po-def .po-body{order:2}
}

/* ══════════════════════════════════════════════════════════
   FULL-WIDTH RULE · decided 26 Aug, Ali
   ──────────────────────────────────────────────────────────
   Where a section stacks to one column, its text fills the
   column. Text goes up to the card; the card does not come down
   to the text.

   This OVERRIDES the 78-character measure ceiling at tablet, and
   that is the deliberate trade, not an oversight. At 900 the
   column is 812px and the body is 17px, so filling it is 96
   characters; the note's 14.7px fine print is 105. The only way
   to fill 812px AND land at 78 would be to grow the body type to
   ~21px, larger than it is on desktop, which is backwards.

   The cost is bounded by these being three-to-five-line
   paragraphs on a brochure page rather than continuous reading.

   APPLIES TO ALL FIVE INNER PAGES when the treatment rolls out.
   The rules below are still scoped to .pg-advisory only because
   the other four have not been touched yet — lift the scope, do
   not write a second rule.
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   TABLET PASS · 26 Aug — Ali's four notes
   SCOPED TO .pg-advisory, on <main> in advisory.html only.

   The first version of this block was scoped by component class,
   and .po-list / .po-work exist on About too. Lifting the measure
   cap off `.po-list li` for Advisory's cards also lifted it off
   About's list, which runs long text directly in the li rather
   than a label plus a caption — About went to 96 characters at
   900. Ali had asked for no changes to the other pages, and this
   changed one silently.

   Three of the notes share one cause: the measure floor in comp.css
   (`main :is(p,li){max-width:var(--measure)}`) caps LAYOUT BOXES,
   not just lines of text. On desktop every column is narrower
   than 561px so it never bites. At tablet, where rows go full
   width, it silently capped the §4 cards and the §5 paragraphs
   at 561 while the photo above them ran to 812.
   ══════════════════════════════════════════════════════════ */

@media (max-width:900px){

  /* 1 · §3 and §6 — "the shape is different sizes and feels weird"
     §3's disc came from the :has() pairing rule at clamp(200,27vw,270)
     — 243px at 900, 207 at 768. §6's came from the stacking rule at
     min(78%,300px) — a flat 300 everywhere. Two rules, two sizes, on
     what reads as the same mark. Both stack now, both at one size. */
  .pg-advisory .po-who .po-row{grid-template-columns:minmax(0,1fr) !important}
  .pg-advisory .po-who .po-wedge,
  /* §6 text full width — Ali. */
  .pg-advisory .po-def .po-body,
  .pg-advisory .po-def .po-body p,
  .pg-advisory .po-def .po-roles{max-width:none !important}

  .pg-advisory .po-who .po-wedge,
  .pg-advisory .po-def .po-wedge{
    width:min(78%,300px) !important;
    max-width:none !important;
    aspect-ratio:1 !important;
    justify-self:start !important;
    order:1}

  /* §6 disc to the RIGHT — Ali. Must sit AFTER the shared rule
     above, which sets justify-self:start for both discs. Placed
     before it, at equal specificity, source order silently ate it
     and the disc stayed left. Sixth time in this file. §3 keeps
     its disc left, so the two stacked sections mirror rather than
     repeat. */
  .pg-advisory .po-def .po-wedge{justify-self:end !important}
  .pg-advisory .po-who .po-body,
  .pg-advisory .po-def .po-body{order:2}
  /* grid-column MUST be reset here. The ≤1199 and ≤900 rules above
     pin the aside to column 2; with the row collapsed to a single
     explicit track that placement creates an IMPLICIT second track,
     the implicit track takes all the width, and the explicit 1fr
     track is left at 0px — which collapsed the disc to nothing,
     because its width is a percentage of the track it sits in. */
  .pg-advisory .po-who .po-aside{order:3;grid-column:1 !important}
  /* §3 text full width — Ali. See the note at the foot of this
     block for what that costs in measure. */
  .pg-advisory .po-who .po-body,
  .pg-advisory .po-who .po-body p{max-width:none !important}

  /* 2 · §4 — "the cards should be the full width of the main card"
     The card is a <li>, so the measure floor was holding it to 561
     against an 812 photo. The cap belongs on the line inside, not
     on the box: 14px across 812px would be 116 characters. */
  .pg-advisory .po-list li{max-width:none}
  .pg-advisory .po-list p{max-width:var(--measure)}

  /* 3 · §5 — "text the same width as the card above"
     Originally solved by bringing the CARD down to 663px so both
     sat at 78 characters. Reversed 26 Aug when Ali set the
     site-wide rule (see FULL-WIDTH RULE below): the text goes up
     to the card, not the card down to the text. */
  .pg-advisory .po-work .po-body,
  .pg-advisory .po-work .po-body p,
  .pg-advisory .po-work .po-lead-in{max-width:none !important}

  /* 4 · §8 — "both sections need to be in line with one another"
     Stacked, the copy ran full width while the mark was pinned
     right, so nothing shared an edge. */
  /* §8 stays SIDE BY SIDE — Ali: "even if they need to be smaller
     to fit the width." Proportional columns so the pair shrinks
     together rather than one crushing the other.

     The mark needs the disc-heading treatment as it gets small:
     a disc is only half its own width along the bottom edge, and
     "Let's talk" at 24px in a 212px disc runs straight off the
     curve. Percentage bottom padding lifts it into the wide part,
     the same fix the section discs use. Verified with
     check-glyphs-in-shape.py rather than by eye. */

  /* The note fills its card too — Ali. I had capped this at the
     measure when it first ran 105 characters, but that is the same
     cap she has now asked me to drop from the §3 and §6 body copy,
     and leaving it on the note alone made the one card on the page
     that stops short. Full width, and the measure goes with it. */
  .pg-advisory .po-who .po-aside,
  .pg-advisory .po-who .po-aside .po-fine,
  .pg-advisory .po-who .po-aside .po-tl-link{max-width:none !important}
}


/* ---------- About · lead card with portrait ----------------
   Ali: About's hero takes Advisory's structure — h1 "About" over
   a "Meet Colleen" subhead — and §2 takes Advisory's lead card
   with her photograph beside it.

   The card, the shadow, the radius and the type ramp are the same
   rules Advisory's uses. What differs is that a photo column
   makes the copy narrower, so the measure had to be re-checked
   rather than assumed: the text column lands at 500px, which at
   25px is 40 characters — short, but this is a two-sentence
   introduction, not a passage.

   The portrait is colleen-portrait.jpg, cropped 4:5 with the
   window biased left because she sits centre-left in frame.
   colleen-portrait-2.jpg stays in §3 so the two consecutive
   sections are not the same photograph twice. */
.po-lead-card-shot{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.52fr);
  gap:clamp(28px,3.4vw,56px);
  align-items:center;
  padding:clamp(30px,3.4vw,46px)}

.po-lead-card-shot .po-lead-copy{max-width:none}
.po-lead-card-shot .po-lead-copy p{margin:0 auto;max-width:none}
.po-lead-card-shot .po-lead-copy p + p{margin-top:.95em;color:var(--mut)}
.po-lead-card-shot .po-lead-copy p:first-child{
  font-weight:var(--fw-bold);letter-spacing:-.018em}

/* <picture>, not a single file with a clever object-position.
   The stacked layout was showing the 4:5 portrait squeezed into a
   16:10 band, and cover-cropping a portrait that hard took her
   chin off — no object-position value fixes that, because the
   band is simply shallower than her face.

   So there are two crops, both cut to contain hair-top to chin
   with margin, and the browser picks by width. The <picture> is
   the grid item, so it carries the sizing; the <img> inside just
   fills it. */
.po-lead-photo{
  display:block;
  width:100%;
  border-radius:clamp(22px,2.8vw,44px);
  overflow:hidden}
.po-lead-photo img{
  display:block;
  width:100%;
  /* height AUTO, not 100%. An explicit height beats aspect-ratio,
     so height:100% made the photo fill whatever the row happened
     to be — at 900 that was a 246x455 box, a 0.52 aspect holding
     a crop cut for 0.80. The crop only survives if the box keeps
     its shape. */
  height:auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:center 38%}

@media (max-width:820px){
  /* Stacks at 820, not 760. At 768 the two-column card left the
     copy at 395px — 38 characters at 20.5px, which is below the
     45-character floor as surely as 96 is above the ceiling.
     Stacked it gets the full card: 60 characters.

     The portrait becomes a band rather than a tall column when it
     stacks — a 4:5 photo at full width runs 430px deep on a phone
     and pushes the copy off the screen. */
  .po-lead-card-shot{grid-template-columns:minmax(0,1fr);gap:clamp(22px,3.4vw,30px)}
  /* 5:4, and the file is cut to match. This took three goes:
     16:10 was too shallow for her face; 4:3 fitted only if the
     band was offset, and cut from y=0 it clipped her chin because
     her chin sits near y=900 in a 1402px source while the band
     ends at 842. 5:4 at y=90 clears her hair by 50px and her chin
     by 87. Measured off a gridded render of the source — the
     skin-tone detector I tried first read the terracotta mosaic
     as face and anchored 237px low. */
  .po-lead-photo img{aspect-ratio:5 / 4;object-position:center 50%}
}

/* ---------- About · the quote, folded into the lead card ----
   Ali: fold §3's quote into §2, drop the duplicate portrait, and
   use a headshot the homepage does not already use.

   The card now carries the whole introduction — who she is, what
   she does, and why she started — which is what §2 and §3 were
   saying between them. The section that held the quote is gone
   rather than emptied, so the page is six sections, not five and
   a gap.

   The photograph is colleen-portrait-2.jpg. index.html uses
   colleen-portrait.jpg, and §2 had been using the same file, so
   the About card and the homepage were showing one image twice.
   The other portrait was freed by removing §3.

   The serif setting is lifted from .po-voice rather than
   reinvented — same face, same ramp, one step down because it now
   sits inside a card next to body copy instead of owning a
   section. */
.po-lead-quote{margin:clamp(30px,3.2vw,44px) 0 0}
.po-lead-quote p{
  margin:0 !important;
  font-family:var(--serif);
  font-size:clamp(1.125rem,1.62vw,1.5rem);
  line-height:1.36;
  letter-spacing:-.01em;
  font-weight:400 !important;
  color:var(--text-strong) !important}
.po-lead-quote cite{display:block;margin-top:clamp(16px,1.8vw,24px);font-style:normal}
.po-lead-quote cite b{display:block;font-size:var(--t-body-sm);font-weight:var(--fw-semi);
  letter-spacing:-.01em;color:var(--text-strong)}
.po-lead-quote cite span{display:block;margin-top:8px;
  font-size:var(--t-body-sm);line-height:1.6;font-weight:var(--fw-med);color:var(--mut)}

/* The card is much taller now, so the portrait stops being a
   fixed 4:5 slot and takes the height of the copy beside it —
   but ONLY while they are side by side.

   min-width guarded. Bare, this sat below the @media(max-width:820px)
   that turns the portrait into a 16:10 band when the card stacks,
   and beat it on source order: at 768 the photo went back to full
   height and ran 430px deep under the copy, which is the exact
   thing that media query exists to prevent. Seventh time source
   order has caught me in this file. */
/* The stretch only applies while the photo column is wide enough
   to take it. Guarded at 821 it ran down to 860 and 900, where the
   column narrows to ~240px against a 455px-tall card — a 0.52
   aspect box. Cover-fitting the 4:5 crop into that is a tall
   vertical strip, which is the same squeeze that was cutting her
   chin off, turned ninety degrees. Above 1000 the column is wide
   enough that stretching reads as a full-height portrait. */
@media (min-width:1001px){
  .po-lead-card-shot .po-lead-photo{align-self:stretch;height:100%}
  .po-lead-card-shot .po-lead-photo img{aspect-ratio:auto;height:100%}
}

/* ---------- About · §3 professional background -------------
   Ali: combine the two paragraphs into one on the left, and put
   the hard facts in a card beside it.

   The prose was two paragraphs saying one thing — the range, then
   what the range taught her. Joined verbatim, no words changed.

   The card is teal-tint, matching Advisory's note card, because
   this section's ground is porcelain and a porcelain card here
   would need a shadow to exist at all (1.0:1). Same reasoning as
   §4 on Advisory, opposite conclusion, because the ground differs.

   Labels are 13px uppercase with tracking, values at body size —
   a definition list, which is what this is. <dl> rather than a
   stack of divs so a screen reader reads "Experience: 20+ yrs"
   as a pair rather than as two unrelated lines. */
.po-bg-row{
  display:grid;
  /* 1.2 : 1, not 1.45 : 1. At 1.45 the copy column was 727px and
     the joined paragraph ran 86 characters — over the ceiling, and
     NOT covered by the full-width rule, which is about sections
     that have stacked. This is a two-column desktop layout, so the
     column itself has to be the measure. 1.2fr landed on 79 — one
     over, which is the kind of margin that disappears the moment
     the type ramp shifts. 1.15fr gives 76. */
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(30px,3.6vw,60px);
  align-items:start}

/* Two paragraphs again, not one. Ali asked to combine them, then
   asked for the second line to stand apart — it is a different
   kind of statement: the first is the record, the second is what
   the record means. So it separates on weight and colour rather
   than just a paragraph break, the same claim/support split the
   lead card uses. */
.po-bg-copy{margin:0;max-width:none}
.po-bg-copy p{
  margin:0;
  max-width:none;
  font-size:var(--t-body);
  line-height:var(--lh-body);
  letter-spacing:var(--tr-body);
  font-weight:var(--fw-med);
  color:var(--text-strong)}
.po-bg-copy .po-bg-note{
  margin-top:clamp(20px,2.2vw,30px);
  color:var(--mut)}

.po-facts-card{
  margin:0;
  background:var(--teal-tint);
  border-radius:clamp(16px,1.8vw,24px);
  padding:clamp(22px,2.2vw,30px)}
.po-facts-card > div + div{
  margin-top:clamp(18px,1.9vw,26px)}
.po-facts-card dt{
  font-size:13px;
  line-height:1.2;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:var(--fw-bold);
  color:var(--mut)}                    /* 6.44:1 on the tint */
.po-facts-card dd{
  margin:6px 0 0;
  font-size:var(--t-body);
  line-height:1.45;
  letter-spacing:-.01em;
  font-weight:var(--fw-med);
  color:var(--text-strong)}            /* 17.4:1 on the tint */

@media (max-width:820px){
  .po-bg-row{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3.4vw,34px)}
}

/* ---------- About · §5 values -------------------------------
   Ali: this section needs a photo, a sixth card, and
   "Relationship over transaction" should stop stacking onto two
   lines on desktop.

   The wrapping is not a copy problem, which is why the copy has
   not been touched. Measured across the 2-column card grid:

     1440  cards 300px  1 label wraps
     1200  cards 270px  2 labels wrap
     1024  cards 231px  3 labels wrap

   Advisory's version of this grid works because its labels are
   short — "Financial clarity", "Cash flow strategy". About's are
   up to 29 characters, and 29 characters at 22px needs ~330px
   against a 231px card. Shortening one label would not fix the
   other two, and no type size rescues it: the label would have to
   drop to 13px at 1024 to fit, below the site's floor.

   So the cards run in ONE column beside the photograph instead.
   At 619px nothing wraps at any width, the list reads as the list
   of values it is, and a sixth card is simply a sixth row rather
   than the thing that finally balances a 2x3 grid. */
.pg-about .po-help .po-list{
  grid-template-columns:minmax(0,1fr);
  gap:clamp(12px,1.3vw,18px)}
/* Label above its line, not beside it. Side by side, each card
   was its own grid, so the label column sized to that card's own
   label and none of the five lined up — and pinning the column to
   a fixed width brought the wrapping straight back, because
   "Relationship over transaction" needs 330px and the column can
   only afford 260. Stacked, every card is identical and nothing
   wraps. Same arrangement as Advisory's cards. */
.pg-about .po-help .po-list li{
  padding:clamp(16px,1.7vw,22px) clamp(18px,1.9vw,26px)}
.pg-about .po-help .po-list h3{margin:0 0 5px;max-width:none}
/* The measure cap was holding these to 462px while the card had
   509 to give, so four of the five descriptions were wrapping for
   no reason. Lifted — the card is the constraint now.

   All five sit on one line at 1440, 1200 and 900. 1024 is the
   pinch — the two-column row is at its narrowest there — so the
   list takes a larger share of the row than the photograph,
   which buys the ~40px the longest line needs.

   (An earlier version of this note quoted 594px as the width
   needed for the inclusion line. That figure came from a JS probe
   whose font shorthand did not resolve, so it measured in a
   fallback face and overstated by about 20%. The real number is
   ~494px. Measure with the real element or check the render;
   do not trust a probe you have not verified.)

   The row ratio is left ALONE. I widened the list to 1.6 : 1 to
   buy the longest line more room, which narrowed the photo wedge
   from 626px to 476 — and the heading inside it, unchanged at
   55.97px, went from three lines to five. Ali: "do not change
   that size bc that is consistent across the site." It never
   changed; the box around it did, which reads as the same thing.

   The wedge heading is 55.97px on every wedge on every page at
   1440, and the wedge is 619-626px wide on all of them. Both stay
   that way. The room for the card line comes from the card's own
   measure cap instead, lifted just below. */
.pg-about .po-help .po-list p{max-width:none}
/* and the card itself — the measure floor was holding the <li> to
   561px inside a 619px column, which is 58px the longest line
   could have used. */
.pg-about .po-help .po-list li{max-width:none}

/* ---------- About · the full-width rule at tablet -----------
   Same rule Advisory follows (see FULL-WIDTH RULE above): where a
   section stacks to one column, its text fills the column. The
   measure floor in comp.css caps <li> and <p> at 561px, which
   held About's value cards to 561 inside an 812 column.

   Scoped to .pg-about, matching the .pg-advisory block, because
   Who It's For and Coffee Chat have not been converted yet. When
   they are, collapse the two scopes into one — do not add a
   third. */
@media (max-width:900px){
  .pg-about .po-help .po-list li,
  .pg-about .po-bg-copy p,
  .pg-about .po-work .po-body p,
  .pg-about .po-lead-copy p{max-width:none}
}

/* ---------- Who It's For · §2 -------------------------------
   The lead card takes the claim + support split the other two
   pages use — bold statement, muted follow-on. I had set these
   two sentences as one paragraph on the grounds that they were
   not a claim/support pair; they are. "Here's how to tell if
   that's you" leads into the section below it.

   Centred, at Ali's request, where Advisory and About are left
   aligned. That is a deliberate difference, not drift: those
   cards carry four and six lines respectively, and centring a
   paragraph that long costs the reader the left edge on every
   return. Two short lines do not have that problem. If this card
   ever grows past about three lines it should go back to left. */
.pg-who .po-lead-card{text-align:center}

/* ---------- Who It's For · §3 marks -------------------------
   Ali: checks on "Who I work with", crosses on "when I might not
   be the right fit", both in place of the dash.

   Drawn as SVG masks rather than text glyphs (✓ / ✕) so the mark
   is a shape the CSS colours, not a character the font has to
   have — and so it cannot be read out by a screen reader as
   "check mark" before every item.

   The SHAPE carries the meaning here, not the colour: a tick and
   a cross read as yes and no in greyscale, and each list already
   sits under a heading that says which it is. That matters
   because goldenrod on the light panel measures 2.02:1 — see the
   note on .po-yes below. */
.po-ticks li::before{
  content:"";position:absolute;left:0;top:.34em;
  width:15px;height:15px;background:var(--teal);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}

.po-panel.po-yes .po-ticks li::before{
  /* goldenrod on porcelain is 2.25:1, against a 3.0 bar for
     non-text. Still under, and still flagged rather than quietly
     substituted — the mark is a tick, so the meaning survives
     without the colour, but it reads faint. A deeper gold
     (#9A7B00) measures 4.0:1 on porcelain if the palette can take
     a second gold step. */
  background:var(--gold);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.6l4 4L14 3.6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.6l4 4L14 3.6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

.po-panel.po-no .po-ticks li::before{
  /* copper on ink is 4.92:1, over the 3.0 bar for non-text.
     The locked copper, not copper-deep, which drops to 3.26 on a
     black ground and is the wrong direction for a mark that has
     to carry at 15px. */
  background:var(--copper);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 3.4l9.2 9.2M12.6 3.4l-9.2 9.2' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 3.4l9.2 9.2M12.6 3.4l-9.2 9.2' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}

.po-ticks li{padding-left:28px}

/* Who It's For · the two panels each close on a paragraph.
   YES carries the sentence that used to be its own section (the
   bookkeeper/accountant boundary); NO carries a matching close so
   the two sides hold the same amount of information. */
.po-panel .po-outro{
  margin:clamp(22px,2.4vw,30px) 0 0;
  font-size:var(--t-body);line-height:var(--lh-body);
  font-weight:var(--fw-med);color:var(--mut);
  max-width:var(--measure)}
.po-panel.po-no .po-outro{color:var(--w-dim)}

/* §4 rail · two columns, and the type sized so every statement
   holds ONE line on desktop. Measured at 1440: the text column is
   564px and 18.5px is the largest size all four fit on one line,
   so 18px is the ceiling with a margin. Below 1024 the cards are
   too narrow for one line at any readable size, so the ramp
   value stands. */
/* the smaller size is only needed once the rail is TWO columns —
   below 1280 it is one wide column and the ramp value fits. */
@media (min-width:1280px){
  .po-rail li p{font-size:clamp(16px,7.5px + .73vw,18px)}
}

/* §4 rail · the cards went from four narrow to two wide, so two
   columns stop working below 1280: measured at 768 they ran to
   three lines and at 621 one hit four. Below 1280 the rail is a
   single column, and the FULL-WIDTH RULE applies — the section
   has stacked to one column, so its text fills that column
   instead of stopping at the 33em measure, which would otherwise
   leave a 1009px card holding a 528px line. With the cap lifted
   every statement holds one line from 621 up. */
@media (max-width:1279px){
  .po-rail{grid-template-columns:minmax(0,1fr)}
  .po-rail li p{max-width:none}
}

/* Who It's For · the statement band is set smaller than the ones
   on the homepage and Advisory because the sentence is longer:
   168 characters against 89 and 103. Line count does not change
   (the measure is in em, so it shrinks with the type and the
   block stays three lines) — what changes is that the block
   narrows and stops shouting. 36px at 1440 keeps it above every
   h2 on the page, which tops out at 34px. */
/* Ali, 27 Aug: "still very large. I think making it slightly
   smaller so that this is two lines."
   Line count here is governed by the WIDTH, not the size — the
   measure is in em, so shrinking the type shrinks the column with
   it and the block stayed three lines at every size from 48 down
   to 26. Two lines needs the column released to the full 1280 as
   well. Measured: at 1280 wide it breaks to two lines at 34px and
   below. 32px takes it with a line to spare.
   That is 84 characters a line, longer than the other statement
   bands (44 and 51), which is the trade for two lines. */
/* Ali, 27 Aug: sentence one is line one, sentence two is line two.
   An explicit break between them, and the type sized so the SECOND
   sentence — 97 characters, the longer of the pair — still holds one
   line. Measured at 1280 wide: three lines at 31px, two at 30 and
   below. 28px takes it with room.
   The break only exists where both sentences fit; below 1100 it is
   dropped and the paragraph wraps naturally. */
.pg-who .po-statement p{
  font-size:clamp(21px,14.6px + 0.93vw,28px);
  max-width:min(1280px,100%)}
.stmt-brk{display:none}
@media (min-width:1100px){.stmt-brk{display:inline}}

/* Ali: "the padding between sections feels large."
   Two neighbouring sections each contributed 88px, so 176px of air
   between every block. Scoped to this page, not the site. */
/* tightened again 27 Aug — 66 still read as too much air. 52 puts
   104px between neighbouring sections, down from the site's 176. */
.pg-who{--sec-y:clamp(36px,3.6vw,52px)}

/* Who It's For · the two panels line up row for row.
   The copy is approved and cannot be padded out, and the two
   intros break to different line counts (3 against 2 at 1440),
   so the ticks and the closing line used to start at different
   heights inside two boxes of equal height. Subgrid pins the
   four rows — heading, intro, list, closing — to the same
   baselines across both panels, so each row is as tall as the
   taller of the two and both panels end together.
   Only above 900, where they sit side by side. */
@supports (grid-template-rows:subgrid){
@media (min-width:901px){
  .pg-who .po-split .po-row{grid-template-rows:auto auto auto auto}
  .pg-who .po-split .po-panel{
    display:grid;grid-template-rows:subgrid;grid-row:span 4;
    /* subgrid inherits the row gap of .po-row (40px), which would
       have added 120px of dead space inside each panel — the
       margins on the children already do the spacing */
    row-gap:0;align-content:start}
}}

/* ---------- Who It's For · §3 the yes panel -----------------
   Ali: white card with a drop shadow, in place of the teal tint.

   The section ground is porcelain, so a porcelain card on it is
   1.0:1 — no tonal difference at all, and the shadow is the ONLY
   thing separating card from page. Same values as the lead card
   so the two read as one idea, and the same caveat: nothing that
   flattens shadows leaves a visible card. */
.pg-who .po-panel.po-yes{
  background:var(--porcelain);
  box-shadow:0 20px 52px rgba(2,26,38,.13)}


/* FORCED COLORS · the shadow-only cards.
   Three cards are separated from the page by a drop shadow alone
   (.po-list li, .po-lead-card, and the "Who I work with" panel).
   Windows high contrast and forced-colors mode drop shadows and
   repaint every ground, so those cards vanish into the page.
   A border only exists in that mode — it is not a hairline in
   normal viewing, where the shadow still does the work. */
@media (forced-colors:active){
  .po-list li,
  .po-lead-card,
  .pg-who .po-panel.po-yes{border:1px solid CanvasText}
}

/* ============================================================
   COFFEE CHAT · the form IS the page  (structure A · 27 Aug)
   Measured before: the form started 880px down, in the right
   column of a two-column row — 640px of a 1280 layout, name
   field 308px — with the four paragraphs that help you decide
   whether to book sitting BELOW it.
   Now: a shortened hero, and the form card rides up over its
   bottom edge. 609px down, 868px wide, field 422px. This is the
   only page where a card breaks the hero, and that is the point.
   It is a conversion page, not a reading page.
   ============================================================ */
.pg-coffee .po-opener{padding-bottom:clamp(118px,12vw,168px)}

.po-hero-lede{
  margin:clamp(16px,1.8vw,24px) auto 0;
  max-width:min(640px,100%);
  font-size:clamp(18px,15.4px + .667vw,25px);
  line-height:1.46;
  font-weight:var(--fw-med);
  color:rgba(255,255,255,.88)}

.po-formcard-sec{background:var(--porcelain);padding:0 0 var(--sec-y)}
.po-formcard{
  position:relative;z-index:2;
  max-width:980px;
  margin:clamp(30px,3.4vw,46px) auto 0;
  background:var(--porcelain);
  box-shadow:0 28px 70px rgba(2,26,38,.17);
  border-radius:clamp(28px,3.4vw,48px);
  padding:clamp(34px,4vw,56px)}

/* THE OVERLAP · only above 1024.
   It reads as "the card breaks the hero" only when there is more
   hero either side of the card than the hero's own corner radius,
   which is clamp(48px,10.4vw,150px). Below that the card's
   shoulder lands inside the corner curve and leaves a dark
   crescent — measured, it appears from about 1090 down and was
   plainly visible at 620, 768 and 900.
   So: cap the card so it always clears the corners, and below
   1024 drop the overlap entirely and let the card follow the
   hero. The gesture is a wide-screen one. */
@media (min-width:1024px){
  .po-formcard{
    max-width:min(980px,calc(100vw - 2*(clamp(48px,10.4vw,150px) + 24px)));
    margin-top:clamp(-110px,-9vw,-80px)}
}
@media (max-width:1023px){
  /* QA measured only 30px between the headline and the hero's bottom
     edge here, against 142 at 1440 — and the corner radius at these
     widths is 80-94px, so the descenders were sitting where the curve
     starts. var(--sec-y) was too small for a hero whose lede has
     moved into the card below it. */
  .pg-coffee .po-opener{padding-bottom:clamp(74px,9vw,110px)}
}
.po-formcard h2{
  margin:0 0 clamp(6px,.8vw,10px);
  font-size:var(--ramp-h2);line-height:1.15;
  letter-spacing:-.025em;font-weight:var(--fw-bold);
  color:var(--text-strong)}

/* the facts strip now rides inside the card, left aligned under
   the heading, on porcelain — so it takes the light-ground
   colours, not the ones written for a photograph. */
.pg-coffee .po-facts{
  margin:0 0 clamp(26px,3vw,36px);
  max-width:none;justify-content:flex-start;gap:10px 30px}
.pg-coffee .po-facts li{color:var(--mut)}          /* 6.90:1 on porcelain */
.pg-coffee .po-facts b{color:var(--text-strong)}

/* the form fills the card — the 640px cap was for the old side
   column and would leave a third of the card empty. */
.po-formcard .po-form{max-width:none}

/* "Before you book" takes the cool ground so it reads as the
   section after the card rather than more of the same page. */
.pg-coffee .po-plain{background:var(--porcelain-cool)}

/* the facts need room under the heading once they stack, which
   they do from about 560 down. */
.pg-coffee .po-formcard h2{margin-bottom:clamp(10px,1.4vw,16px)}

/* the message field carries its own suggestion now that the hint
   paragraph is gone. The LABEL still names the field, so the
   placeholder is supplementary, not the accessible name. */
.po-field input::placeholder,
.po-field textarea::placeholder{
  color:var(--mut);opacity:1}          /* 7.46:1 on the field ground */

/* "Before you book" reads DOWN, not across.
   Four paragraphs in a two-column grid flow p1 p2 / p3 p4 across
   the rows, so the eye tracks down the left column and reads them
   out of order. One column, one reading direction.
   One column left-aligned in a 1280 wrap left two thirds of the
   band empty, so the column is centred and the paragraphs fill
   it — 620px is 69 characters at 18px, inside the 78 ceiling. */
.po-spread-single{grid-template-columns:minmax(0,1fr);
  max-width:min(620px,100%);margin-inline:auto}
.po-spread-single p{max-width:none}
.pg-coffee .po-plain h2{max-width:min(620px,100%);margin-inline:auto}

/* ============================================================
   27 AUG BATCH
   ============================================================ */

/* ABOUT · "the professional background area needs to have a card
   behind it, white with a drop shadow."
   The facts card inside it moves off teal-tint and onto the page
   ground so the two cards do not stack one inside the other. */
/* the card wraps the HEADING too (Ali, 27 Aug) — the h2 was sitting
   outside it, so the card read as a caption to the section rather
   than as the section */
.pg-about .po-bg-card{
  background:var(--porcelain);
  box-shadow:0 20px 52px rgba(2,26,38,.13);
  border-radius:clamp(24px,3vw,40px);
  padding:clamp(30px,3.6vw,52px)}
.pg-about .po-bg-card > h2{margin:0 0 clamp(22px,2.6vw,34px)}
.pg-about .po-bg-row .po-facts-card{
  background:var(--porcelain-cool)}

/* COFFEE CHAT · the lede moved out of the hero and into the card
   (Ali, 27 Aug). It sits between "Get in touch" and the three
   facts, so the card opens with the invitation and the hero is
   left holding one line. */
.po-card-lede{
  margin:0 0 clamp(14px,1.6vw,20px);
  max-width:min(620px,100%);
  font-size:clamp(17px,15.8px + .31vw,20px);
  line-height:1.5;font-weight:var(--fw-med);color:var(--mut)}

/* "Not sure you're a fit?" now closes the section rather than
   hiding in the middle of the third paragraph. */
.po-fit-out{margin-top:clamp(18px,2vw,26px);font-weight:var(--fw-med);color:var(--text-strong)}

/* ---------- 404 --------------------------------------------
   No photograph: an error page that loads a 500KB hero is a
   worse error page. The opener is the ink block on its own.

   The title/lede spacing is a flex GAP, not a margin. The page
   title runs line-height .9, so its box is shorter than its
   glyphs, and a margin measured 44px of clearance at 1440 but
   only 4px at 768 — the lede was sitting on the descenders. A
   gap on a flex column is deterministic at every width. */
.nf-opener{padding-bottom:clamp(56px,6vw,86px)}
.nf-opener .wrap{display:flex;flex-direction:column;align-items:center;
  gap:clamp(34px,4.4vw,62px)}
.nf-opener .po-hero-lede{margin:0}
.pg-404 .po-lead-band{padding-top:clamp(30px,3.4vw,48px)}
.nf-links{margin:clamp(22px,2.4vw,30px) 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:14px clamp(20px,2.4vw,32px)}
.pg-404 .po-lead-card .po-act{margin-top:clamp(26px,3vw,36px)}

/* ============================================================
   PHONE PASS · 28 Aug — inner pages
   ============================================================ */
@media (max-width:560px){
  /* Same collision as the homepage: the page title runs line-height .9,
     so its box is 10% shorter than its glyphs and the sub sat 14px
     under a box that had already been overrun. A flex gap is
     deterministic; a margin here is not. */
  .po-opener .wrap{display:flex;flex-direction:column;
    gap:clamp(30px,8vw,36px)}
  .po-opener h1,.po-sub,.po-hero-lede{margin:0}

  /* The opener held 140px of top padding to clear a 100px header. The
     header is 68px now, and its bottom padding was another 96 — 148px
     of dead space between the hero and the first section. */
  .po-opener{padding-top:clamp(92px,24vw,112px)}
  .po-opener-shot{padding-bottom:clamp(44px,11vw,60px)}

  /* 28px for a subhead under a 42px title left the two competing.
     22px keeps the hierarchy and buys back two lines of height. */
  .po-sub{font-size:clamp(19px,5.4vw,22px);line-height:1.14}

  /* Cards: 20px gutter plus 26-30px of padding put the text 50px from
     the screen edge, which is why they read as not using the width. */
  /* Vertical padding stays generous; the HORIZONTAL padding is what
     was costing line length, so that is what comes down. Every card
     uses the same horizontal value so the text on every card starts
     and ends at the same place. */
  .po-lead-card{padding:clamp(22px,5.6vw,28px) clamp(16px,4.1vw,19px)}
  .po-panel{padding:clamp(20px,5vw,26px) clamp(16px,4.1vw,19px)}
  .po-formcard{padding:clamp(18px,4.6vw,23px) clamp(16px,4.1vw,19px)}
  /* the closing card carried 32px against every other card's 20 —
     the one card on the page whose text started somewhere else */
  .po-cta-card{padding:clamp(26px,6.4vw,32px) clamp(16px,4.1vw,19px)}
  /* .po-list li and .po-rail li carry their own hardcoded padding
     rather than the token, so the token change alone did nothing to
     them — measured 20px still. Named explicitly. */
  .po-list li{padding:clamp(18px,4.6vw,22px) clamp(16px,4.1vw,19px)}
  .po-rail li{padding:clamp(16px,4.2vw,20px) clamp(16px,4.1vw,19px)}
  /* .pg-about .po-bg-card is (0,2,0) and was beating the (0,1,0)
     rule here, holding 30px of horizontal padding against every
     other card's 16. Matched specificity. */
  .pg-about .po-bg-card{padding:clamp(22px,5.6vw,28px) clamp(16px,4.1vw,19px)}
  .po-facts-card{padding:clamp(18px,4.6vw,22px) clamp(16px,4.1vw,19px)}

  /* THE ACTUAL PROBLEM with the cards on a phone: the copy was
     13.04px grey, six pixels under a 19px heading. That is fine
     print, not body copy, and no amount of padding was going to fix
     it. 15.5px and a real gap under the heading. */
  /* Same 13.5 as the homepage cards, for consistency — the same kind
     of card should not be set at two different sizes across pages.

     Be honest about what this does NOT fix: Advisory's card copy is
     52 to 70 characters against the homepage's 85 to 107, so it is
     inherently a line and a half in a 334px column. Measured at every
     size from 12.5 to 15.5, its second line lands at 14-32 per cent.
     No font size fixes that; only shorter or longer copy would. */
  .po-list p,.po-rail li p{font-size:13.5px;line-height:1.58}

  /* SAME TREATMENT, checked rather than assumed. An audit of every
     card at 390 found three that were set differently from the rest:
       About's value cards 5px under the heading against 10 elsewhere
       .po-aside           15.5px body against the 13.5 microcopy tier
     All three brought into line. */
  .pg-about .po-help .po-list li{padding:clamp(16px,4.2vw,20px) clamp(16px,4.1vw,19px)}
  .pg-about .po-help .po-list h3{margin:0 0 10px}
  .po-who .po-aside{padding:clamp(16px,4.2vw,20px) clamp(16px,4.1vw,19px)}
  .po-who .po-aside p{font-size:13.5px;line-height:1.58}
  .po-list h3{margin:0 0 10px}
  .po-who .po-aside .po-fine{font-size:15.5px;line-height:1.55}
  .po-facts-card dt{font-size:11.5px}
  .po-facts-card dd{font-size:15.5px;line-height:1.45}
  .po-hint{font-size:14px}
  /* the primary action was 14.4px on a phone */
  .po-btn{font-size:16px;padding:15px 22px}
}