/* ═══════════════════════════════════════════════════════════════════════════════════════════
   MOSTLY HUMAN — CANDIDATE 1   feel/her-own-page

   Rebuilt from the full-page screenshot of her site as it stood BEFORE the edits. The first
   attempt borrowed her colours and her devices but not her manners, and it read as a different
   site wearing her palette. What actually makes a page hers:

     · ONE GROUND. Yellow, edge to edge, top to bottom. No cream panel, no black band. The only
       things that interrupt it are the photographs and the small black buttons.
     · LABELS ARE SMALL SERIF. "About me", "My services", "Conditions for treatment", "Pillars of
       care" — set in the same serif as everything else, at reading size, lowercase. Not uppercase
       sans with a rule in front, which is a different design language entirely.
     · STATEMENTS ARE HUGE AND JUSTIFIED. Left-aligned, running the full measure, the last line
       dropping short. They carry the page, not the section headings.
     · ASYMMETRY AND AIR. A small label in a narrow left column, the content in a wider right one,
       and a great deal of empty yellow between sections.
     · BANDS ARE WIDE AND SHORT — about 4:1 — with a flat yellow circle or triangle over them.

   Complete and standalone: this file is everything index.html needs.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --yellow: #FFC700;          /* sampled from her live hero */
  --ink: #101010;
  --ink-70: rgba(16,16,16,.74);
  --rule: rgba(16,16,16,.2);
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --pad: 20px;
}
@media (min-width: 760px)  { :root { --pad: 44px } }
@media (min-width: 1240px) { :root { --pad: 64px } }

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--yellow); color: var(--ink);
  font: 400 15.5px/1.72 var(--sans); letter-spacing: .1px }
img { max-width: 100%; display: block }
a { color: inherit }
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding-inline: var(--pad) }
.skip { position: absolute; left: -9999px }
.skip:focus { left: 12px; top: 12px; background: var(--ink); color: var(--yellow); padding: 10px 16px; z-index: 99 }

/* ── type ───────────────────────────────────────────────────────────────────────────────────
   One family for nearly everything. The H1 is the largest thing on the page and capped at 64px;
   the statements sit just under it, which is the proportion her page runs at. */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.5px }
h1 { font-size: clamp(38px, 8.4vw, 64px); line-height: 1.0 }
h2 { font-size: clamp(28px, 5.2vw, 60px); line-height: 1.04 }
h3 { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.2; letter-spacing: -.2px }
p { margin: 0 0 1.1em; max-width: 62ch }

/* the small serif label — her section marker, and the single most characteristic piece of the page */
.label { font-family: var(--serif); font-size: clamp(18px, 2.1vw, 23px); line-height: 1.25;
  letter-spacing: -.2px; margin: 0 0 18px; max-width: 14ch }

/* her big statements: full measure, justified, last line short */
.say { font-family: var(--serif); font-size: clamp(28px, 5.2vw, 60px); line-height: 1.05;
  letter-spacing: -.6px; margin: 0; max-width: 24ch;
  text-align: justify; text-align-last: left }
@media (max-width: 680px) { .say { text-align: left; max-width: none } }

/* ── buttons ────────────────────────────────────────────────────────────────────────────────
   Small, black, one solid and one outline. Hers are modest — they never compete with the type. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: 12px 26px; font: 500 14px/1 var(--sans); letter-spacing: .2px; text-decoration: none;
  background: var(--ink); color: var(--yellow); border: 1.5px solid var(--ink); border-radius: 999px;
  transition: .18s ease }
.btn:hover { background: transparent; color: var(--ink) }
.btn-ghost { background: transparent; color: var(--ink) }
.btn-ghost:hover { background: var(--ink); color: var(--yellow) }

/* ── navigation — small, light, a pill on the right ─────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 40; background: var(--yellow) }
.nav .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px }
.brand { font-family: var(--serif); font-size: 22px; letter-spacing: -.5px; text-decoration: none;
  margin-right: auto; display: flex; align-items: center; min-height: 46px }
.brand em { font-style: italic }
.nav-links { display: none; list-style: none; margin: 0; padding: 0; gap: 26px }
.nav-links a { text-decoration: none; font-size: 14px; display: flex; align-items: center; min-height: 44px }
.nav-links a:hover, .nav-links a[aria-current] { text-decoration: underline; text-underline-offset: 5px }
.nav .btn { display: none; min-height: 40px; padding: 10px 22px; font-size: 13px }
.burger { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  background: none; border: 1.5px solid var(--ink); border-radius: 999px; cursor: pointer; padding: 0 }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink) }
.burger span::before { top: -5px } .burger span::after { top: 5px }
.drawer { display: none; padding: 6px 0 22px }
.drawer.open { display: block }
.drawer a { display: block; text-decoration: none; font-family: var(--serif); font-size: 22px;
  padding: 12px 0; border-bottom: 1px solid var(--rule) }
.drawer .btn { margin-top: 20px; width: 100% }
@media (min-width: 900px) { .nav-links, .nav .btn { display: flex } .burger { display: none } .drawer { display: none !important } }

/* ── the rhythm: label in a narrow left column, content in a wider right one ──────────────── */
.sec { padding: clamp(46px, 7vw, 104px) 0 }
.sec-tight { padding: clamp(30px, 4vw, 56px) 0 }
.row { display: grid; gap: 18px }
@media (min-width: 900px) { .row { grid-template-columns: 260px minmax(0, 1fr); gap: 60px } }
@media (min-width: 1140px) { .row { grid-template-columns: 320px minmax(0, 1fr); gap: 80px } }
.row .label { margin-bottom: 0 }
.prose p { font-size: 15.5px; max-width: 58ch }
.prose .btn { margin-top: 12px }

/* ── photographs: wide, short, with a flat yellow shape over them ─────────────────────────── */
.band { position: relative; overflow: hidden; aspect-ratio: 4/1 }
@media (max-width: 680px) { .band { aspect-ratio: 16/9 } }
.band img { width: 100%; height: 100%; object-fit: cover }
.shape { position: absolute; background: var(--yellow) }
.shape .row2 { position: absolute; left: 50%; translate: -50% 0; display: flex;
  justify-content: space-between; align-items: baseline; white-space: nowrap;
  font: 400 clamp(8.5px, .82vw, 12px)/1 var(--sans); letter-spacing: .3px }
.shape .row2 i { font-style: normal; opacity: .7 }
/* the circle nearly fills the band's height, as hers does */
.shape.circle { border-radius: 50%; height: 116%; aspect-ratio: 1; top: 50%; left: 50%; translate: -50% -50% }
.shape.circle .row2 { top: 50%; width: 82%; translate: -50% -50% }
.shape.tri { height: 100%; top: 0; left: 50%; translate: -50% 0; width: min(38%, 460px);
  clip-path: polygon(50% 0, 100% 100%, 0 100%) }
.shape.tri .row2 { bottom: 9%; width: 62% }

/* ── the marquee — pauses on click, never on hover, no visible control ───────────────────── */
.marquee { overflow: hidden; padding: clamp(18px,3vw,34px) 0; cursor: pointer; user-select: none }
.marquee-track { display: flex; gap: 54px; width: max-content; animation: slide 48s linear infinite }
.marquee.paused .marquee-track { animation-play-state: paused }
.marquee span { font-family: var(--serif); font-size: clamp(30px, 6vw, 68px); line-height: 1.05;
  letter-spacing: -.8px; white-space: nowrap }
@keyframes slide { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none } }

/* ── conditions for treatment ───────────────────────────────────────────────────────────── */
.ico { width: clamp(34px, 4vw, 46px); height: clamp(34px, 4vw, 46px); display: block;
  margin-bottom: 16px; color: rgba(16,16,16,.42) }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden }
.cond { display: grid; gap: 30px 24px; margin-top: 6px }
@media (min-width: 620px) { .cond { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 980px) { .cond { grid-template-columns: repeat(4, 1fr); gap: 26px } }
.cond-name { font: 500 13px/1.4 var(--sans); letter-spacing: .2px; margin: 0 0 8px }
.cond-list { list-style: none; margin: 0; padding: 0 }
.cond-list li { font-size: 13.5px; line-height: 1.8; color: var(--ink-70) }

/* ── pillars of care — a plate on the left, three words on the right ─────────────────────── */
.plate { display: grid; gap: 24px; align-items: center }
@media (min-width: 860px) { .plate { grid-template-columns: 1.05fr 1fr; gap: 60px } }
.plate img { width: 100%; aspect-ratio: 3/2; object-fit: cover }
.words { font-family: var(--serif); font-size: clamp(34px, 5.6vw, 62px); line-height: 1.02;
  letter-spacing: -.8px; margin: 8px 0 0 }
.words span { display: block }
.words em { font-style: italic }

/* ── the FAQ — her label on the left, the questions on the right ─────────────────────────── */
.faq details { border-bottom: 1px solid var(--rule) }
.faq details:first-of-type { border-top: 1px solid var(--rule) }
.faq summary { list-style: none; cursor: pointer; display: flex; gap: 16px; align-items: baseline;
  padding: 16px 0; font-size: 14.5px; line-height: 1.5; min-height: 44px }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; margin-left: auto; font: 300 20px/1 var(--sans); opacity: .6; transition: transform .2s }
.faq details[open] summary::after { transform: rotate(45deg) }
.faq .a { padding: 0 0 18px }
.faq .a p { margin: 0; font-size: 14.5px; color: var(--ink-70); max-width: 62ch }

/* ── footer — on the yellow, like the rest of the page ───────────────────────────────────── */
.foot { padding: clamp(50px,7vw,96px) 0 34px }
.foot .top { display: grid; gap: 26px }
/* The name, then one column per group of pages. Two lists fitted a 1fr 1fr grid; with the pages
   carried over from the live site there are three, so each list drops to a single column and the
   row stays one row deep instead of wrapping into an L. */
@media (min-width: 860px) {
  .foot .top { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 48px }
  .foot ul { columns: 1 }
}
.foot h2 { font-size: clamp(26px,3.4vw,40px); line-height: 1.1 }
.foot ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px }
.foot li { font-size: 13.5px; line-height: 2; break-inside: avoid }
.foot .bot { margin-top: clamp(40px,6vw,76px); padding-top: 18px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 13px; color: var(--ink-70) }
.foot a { text-decoration: none }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px }

/* matched against her page: the circle sits INSIDE the band rather than being clipped by it, the
   conditions run full width under their label, and the closing lines are left-aligned — justifying
   a three-word line opens gaps you could park a car in */
.shape.circle { height: 96% }
.say-plain { text-align: left }
.cond { margin-top: 30px }

/* three corrections from looking at the render beside her page */
.shape.circle { height: 88% }                       /* was clipping flat against the band edge */
.shape.tri { width: min(28%, 400px) }               /* hers is near-equilateral, not a squat wedge */
.marquee span { font-size: clamp(30px, 5.4vw, 60px) }  /* 68px outranked the 64px H1 */
.foot .bot a { display: inline-flex; align-items: center; min-height: 44px }  /* was 22px on a phone */

/* ── the footer's bottom row sits on one line ───────────────────────────────────────────────
   The email had gained min-height:44px for the tap target while the states span had not, so in a
   stretch-aligned flex row one centred itself in a 44px box and the other sat at the top of it.
   Both get the same height and the row centres them against each other. */
.foot .bot { align-items: center }
.foot .bot > * { display: inline-flex; align-items: center; min-height: 44px }

/* ── the condition marks: bigger, and white the way hers are ───────────────────────────────── */
.ico { width: clamp(54px, 6vw, 78px); height: clamp(54px, 6vw, 78px); color: #fff; margin-bottom: 20px }


/* ── brand hierarchy above semantic hierarchy ───────────────────────────────────────────────
   "We Are Mostly Human…" is the dominant opening statement because that is the identity she wants
   back. It is a <div>, not a heading, so it takes no semantic weight. The document's H1 sits under
   it at a size that is still unmistakably a page title — visible, meaningful, and no longer forced
   to be the biggest thing on the screen, which was never a requirement in the first place. */
.hero-eyebrow, .eyebrow { font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 2vw, 22px); margin: 0 0 22px; opacity: .8 }
h1 { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.16; letter-spacing: -.2px; max-width: 26ch }
/* with the H1 no longer capping the page, her statements go back to their own scale */
.say { font-size: clamp(30px, 6vw, 72px) }
.marquee span { font-size: clamp(32px, 6.4vw, 76px) }
.words { font-size: clamp(36px, 6vw, 68px) }
.hero-lede, .sec-tight .lede { font-size: clamp(15.5px, 1.6vw, 17px); line-height: 1.7; max-width: 58ch; margin: 26px 0 0 }
.hero-act { margin: 28px 0 0; max-width: none }

/* the H1 sits at the head of the prose column now, under the band */
.prose h1 { margin-bottom: 18px }
.prose .hero-act { margin-top: 26px }



/* ── the brand statement ────────────────────────────────────────────────────────────────────
   One line, stretched across the measure, the way her hero sets it.

   The size is derived, not guessed: this line renders at 7.635 x its font-size, so the size that
   fills the column is the column width / 7.72 (the extra 1% keeps it off the edge). It is measured
   from the CONTAINER, not the viewport, so it keeps filling as the side padding changes across
   breakpoints — a viewport coefficient fits at one width and falls to 75% on a phone.

   Two things that cost me a pass each: cqi silently falls back to the viewport when no ancestor
   actually matches the container-type selector, and once the container IS anchored, cqi is already
   the content box, so subtracting the padding again double-counts it.

   letter-spacing is in em because a fixed -2px removes 2.9% of the line at 154px and 12.5% at 45px.

   Measured fill: 99.1-99.3% from 390px to 1920px, no overflow at any width. */
[data-section="hero"] .wrap { container-type: inline-size }
.brand-headline {
  font-family: var(--serif); margin: 0;
  line-height: 1.02; letter-spacing: -.013em;
  /* phone: it wraps, and is sized to the viewport rather than stretched */
  font-size: clamp(38px, 11.6vw, 62px);
}
/* From 760 up it is one line filling about TWO THIRDS of the measure, which is the proportion her
   hero actually uses — stretching it to the full column made it shout. 7.635 x font-size is the
   rendered line, and 0.68 of the column is the target, so the divisor is 7.635 / 0.68 = 11.2. */
@media (min-width: 760px) {
  .brand-headline {
    white-space: nowrap;
    font-size: min(7.6vw, 108px);            /* fallback: no container queries */
    font-size: calc(100cqi / 11.2);
  }
}

/* ── the bands, to her proportions ──────────────────────────────────────────────────────────
   Measured off her page: the band is about 2.2:1, not the 4:1 I had, and the triangle spans close
   to half its width — roughly as wide as it is tall. Mine was 28% of the width inside a band too
   shallow to hold it, so it read as a tight wedge rather than a shape with room around it. */
.band { aspect-ratio: 2.2 }
@media (max-width: 680px) { .band { aspect-ratio: 4/3 } }
.shape.tri { width: 47% }
.shape.tri .row2 { bottom: 6%; width: 78% }

/* The triangle is INSET in the band, not flush with it. Measured off her page: roughly 4.5% of the
   band height clear at the top and the same at the bottom, so a strip of photograph runs beneath the
   base. Without that strip the base meets the band's bottom edge and the shape melts into the yellow
   section below it — the triangle stops reading as a shape laid on a photograph. */
.shape.tri { top: 4.5%; height: 91% }

/* The FAQ question is the smallest interactive text on the page, and the only place a question is
   set smaller than the answer it opens. 17.5px brings it level with the reading copy without
   turning the accordion into a list of headings. */
.faq summary { font-size: 17.5px; line-height: 1.45 }


/* ── her own logo in place of the wordmark ──────────────────────────────────────────────────
   Black on transparent, so it needs no treatment against the yellow. Height is fixed and the width
   follows, so the mark keeps its drawn proportions instead of being stretched to a box. */
.brand { min-height: 46px; display: flex; align-items: center; padding: 6px 0 }
.brand img { height: 34px; width: auto; display: block }
@media (max-width: 480px) { .brand img { height: 28px } }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE PAGES CARRIED OVER FROM THE LIVE SITE
   Three kinds of content had no slot in a homepage, so three sections are added here. They are
   built from what the page already does — one yellow ground, small serif labels, flat geometric
   punches, hairline rules, a wide left margin of air — rather than from anything new.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* long-form copy lifted from the live site keeps its lists and its small print */
.plain-list { margin: 0 0 1.1em; padding-left: 1.15em; max-width: 58ch }
.plain-list li { font-size: 15.5px; margin: 0 0 .4em }
/* the hub's Conditions We Treat (3 Oct 2026): her groups two abreast from 900px, each a small heading
   over a plain list; a group with no sub-types is the heading alone */
.cond-groups { display: grid; gap: 22px 40px; margin: 0 }
@media (min-width: 900px) { .cond-groups { grid-template-columns: 1fr 1fr } }
.cond-group h2, .cond-group h3 { font-size: clamp(18px, 1.9vw, 21px); line-height: 1.2; margin: 0 0 8px }
/* As a page's own body (Conditions We Treat, 3 Oct 2026) the groups are CARDS — the client's own layout
   suggestion, "six simple cards, each with a short description": one hairline-bordered card per group,
   the name over its sub-types, three across from 900px, two from 600px, one on a phone. */
.sec > .wrap > .cond-groups { gap: 16px }
.sec > .wrap > .cond-groups .cond-group { border: 1px solid var(--rule); padding: 24px 26px 22px }
.sec > .wrap > .cond-groups .cond-group h2 { font-family: var(--serif); font-size: clamp(21px, 2.1vw, 25px); margin: 0 0 12px }
.sec > .wrap > .cond-groups .plain-list li { font-size: 15px; color: var(--ink-70); margin: 0 0 .35em }
/* the card as her picture draws it: a mark, the name, a short line, and the sub-types behind a control */
.sec > .wrap > .cond-groups .cond-card .ico { width: 36px; height: 36px; color: var(--ink); opacity: .55; margin: 0 0 16px }
.cond-blurb { font-size: 15.5px; line-height: 1.55; color: var(--ink-70); margin: 0 0 14px; max-width: 38ch }
.cond-more summary { list-style: none; cursor: pointer; display: inline-flex; gap: 10px; align-items: center;
  font: 500 12.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); padding: 4px 0 }
.cond-more summary::-webkit-details-marker { display: none }
.cond-more summary::after { content: "+"; font: 300 18px/1 var(--sans); opacity: .6; transition: transform .2s }
.cond-more[open] summary::after { transform: rotate(45deg) }
.cond-more summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.cond-more .plain-list { margin: 12px 0 0 }
@media (prefers-reduced-motion: reduce) { .cond-more summary::after { transition: none } }
@media (min-width: 600px) { .sec > .wrap > .cond-groups { grid-template-columns: 1fr 1fr } }
@media (min-width: 900px) { .sec > .wrap > .cond-groups { grid-template-columns: repeat(3, 1fr); gap: 18px } }
/* the services hub's two photo sections keep the label scale for their heading, like the four beside them */
.split.hub-split h2 { font-size: clamp(18px, 2.1vw, 23px); line-height: 1.25; margin: 0 0 12px }   /* outranks .split h2, which is declared later */
.cond-group .plain-list { margin: 0 }
.prose .small { font-size: 13.5px; color: var(--ink-70) }
.prose blockquote { margin: 0 0 1.1em; padding-left: 20px; border-left: 2px solid var(--rule) }
.prose blockquote p { font-family: var(--serif); font-size: clamp(19px,2.2vw,23px); line-height: 1.3 }
.label-inline { max-width: none; margin-bottom: 10px }
.byline { font-size: 13.5px; color: var(--ink-70); margin: 16px 0 0 }
.label a { text-decoration: none }
.label a:hover { text-decoration: underline; text-underline-offset: 3px }

/* price/rows — a rule per tier, the name and the price on the same line, the description under
   it at the prose measure. The rule is the same hairline the footer uses. */
.tiers { list-style: none; margin: 0; padding: 0 }
.tiers li { padding: 26px 0; border-top: 1px solid var(--rule) }
.tiers li:last-child { border-bottom: 1px solid var(--rule) }
.tier-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px }
.tiers h2 { font-size: clamp(23px,2.8vw,32px); line-height: 1.1; margin-right: auto }
.tier-price { font: 500 14px/1 var(--sans); letter-spacing: .2px; white-space: nowrap }
.tiers p { margin: 12px 0 0; font-size: 15.5px; max-width: 58ch; color: var(--ink-70) }

/* people/portrait-row — the circle punch the bands use, this time as the portrait's own frame */
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px }
@media (min-width: 720px) { .people { grid-template-columns: repeat(3, 1fr); gap: 40px } }
.people a, .people > li > div { text-decoration: none; display: block }
.portrait { display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: rgba(16,16,16,.06) }
.portrait img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s ease }
.people a:hover .portrait img { scale: 1.05 }
.people h3 { margin: 18px 0 0; font-size: clamp(20px,2.3vw,26px) }
.people a:hover h3 { text-decoration: underline; text-underline-offset: 4px }

/* index/post-cards — a hub page is the list of its children and nothing else */
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 32px }
@media (min-width: 680px) { .posts { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1040px) { .posts { grid-template-columns: repeat(3, 1fr); gap: 52px 36px } }
.posts a { text-decoration: none; display: block }
.thumb { display: block; position: relative; overflow: hidden; aspect-ratio: 4/3 }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s ease }
.posts a:hover .thumb img { scale: 1.04 }
/* the same flat punch the bands carry, sized down and set into the corner */
.thumb .shape.circle { width: 34%; height: auto; aspect-ratio: 1; top: auto; left: auto;
  right: -9%; bottom: -13%; translate: none }
.posts .meta { display: block; margin: 16px 0 6px; font-size: 12.5px; letter-spacing: .3px;
  color: var(--ink-70) }
.posts h2 { font-size: clamp(22px,2.4vw,28px); line-height: 1.12 }
.posts a:hover h2 { text-decoration: underline; text-underline-offset: 4px }

/* an ordered list from the live copy keeps its numbers */
.prose ol.plain-list { list-style: decimal }

/* ── the inner pages' hero ─────────────────────────────────────────────────────────────────
   The homepage opens on .brand-headline, which is nowrap and whose size is solved for the
   length of "We Are Mostly Human…". Every other page opens on its own H1, which is a full
   sentence, so it wraps and is sized to the measure instead. Nothing outranks it on these
   pages, so it is allowed to be the largest thing on them — the note further up demotes the H1
   only where the brand statement is present to outrank it. */
.hero-title { font-size: clamp(34px, 6.6vw, 68px); line-height: 1.02; letter-spacing: -.015em;
  max-width: 17ch }
.hero-act { margin: 30px 0 0 }

/* the opening block: full width, larger than body copy, under its own heading */
[data-design="body/lead-statement"] .say { max-width: 22ch; margin-bottom: 26px }
.lede-answer { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.62; max-width: 66ch }
.lede-more { max-width: 66ch; color: var(--ink-70) }

/* a price row relates its name to its price, so the pair keeps a readable measure rather than
   being pushed to opposite ends of a 1320px container */
.tiers li > * { max-width: 900px }

/* three link columns, so each list runs down rather than splitting into two of its own.
   This has to sit after the .foot ul rule above, which sets columns: 2 at equal specificity. */
@media (min-width: 860px) { .foot ul { columns: 1 } }

/* The paragraphs that follow the overview in the opening block are the document's own
   continuation of it, so they need separating from it without a heading being invented to do
   the job. A hairline — the same one the footer and the price rows use — does it. */
.lede-more:first-of-type { border-top: 1px solid var(--rule); padding-top: 28px; margin-top: 32px }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   INNER PAGES — the composition of her own inner pages, in the mockup's type and colour.
   Reference: her live /insurance. Heading left, one photograph right, the opening paragraph
   beneath, one dark rule, then quiet sections on an offset reading column. Nothing from the
   homepage's section list — no band, no marquee, no FAQ — appears here.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* the hero: eyebrow and H1 on the left, her photograph on the right, the button under the
   heading at the foot of the photograph — where her opening paragraph sits on /insurance.
   Phone-up it is one column in her order: heading, photograph, button. */
.hero-split .wrap { display: grid; gap: 26px }
.hero-split .hero-title { max-width: 15ch; font-size: clamp(36px, 7vw, 72px) }
.hero-split .hero-act { margin: 4px 0 0 }
.hero-photo, .split-photo { margin: 0; overflow: hidden; width: 100% }
.hero-photo img, .split-photo img { width: 100%; height: 100%; object-fit: cover; display: block }
@media (min-width: 900px) {
  .hero-split .wrap { grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr auto;
    grid-template-areas: "copy photo" "act photo"; gap: 0 clamp(40px, 5vw, 84px); align-items: start }
  .hero-split .wrap.solo { grid-template-columns: 1fr; grid-template-areas: "copy" "act" }
  .hero-split .hero-copy { grid-area: copy }
  .hero-photo { grid-area: photo; justify-self: end }
  .hero-split .hero-act { grid-area: act; align-self: end; margin: 44px 0 0 }
  .hero-photo[data-shape="portrait"]  { max-width: 520px }
  .hero-photo[data-shape="landscape"] { max-width: 600px }
  .hero-photo[data-shape="square"]    { max-width: 480px }
}

/* the reading column: the opening paragraph and any unheaded copy sit on the same left edge
   as the sidehead's prose column, so every line of body copy on the page shares one edge */
.col { max-width: 760px }
@media (min-width: 900px)  { .col { margin-left: 320px } }
@media (min-width: 1140px) { .col { margin-left: 400px } }
.lead-title { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; margin: 0 0 16px; max-width: 24ch }
.lead .lede-answer { margin-bottom: 0 }
.lead .lede-more:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.1em }
.byline { font-size: 13.5px; color: var(--ink-70); margin: 0 0 18px }

/* her rule: one dark hairline across the container */
.rule { border: 0; border-top: 1px solid var(--ink); height: 0; margin: clamp(14px, 2.4vw, 30px) 0 0 }

/* a body section with a photograph beside the prose; the side is one attribute */
.split .wrap { display: grid; gap: 28px }
.split h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; margin: 0 0 18px; max-width: 22ch }
.split h2 a, .label a { text-decoration: none }
.split h2 a:hover, .label a:hover { text-decoration: underline; text-underline-offset: 4px }
@media (min-width: 900px) {
  .split .wrap { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 84px); align-items: start }
  .split[data-side="left"] .split-photo { order: -1 }
  .split[data-side="right"] .split-photo { justify-self: end }
  /* a portrait is held narrower than a landscape so its foot lands near the copy's */
  .split-photo[data-shape="landscape"] { max-width: 540px }
  .split-photo[data-shape="portrait"]  { max-width: 380px }
  .split-photo[data-shape="square"]    { max-width: 440px }
}

/* ── the Services dropdown ──────────────────────────────────────────────────────────────────
   Ten pages under one word in the bar. The panel is the page's own yellow with her hairline
   around it, so it reads as part of the bar and not as a widget laid on top. It opens on hover
   and on keyboard focus with no script; the caret is for touch. Quiet motion, one easing, and
   none at all when the reader has asked for none. */
.has-sub { position: relative; display: flex; align-items: center; gap: 2px }
.caret { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 44px;
  background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer }
.caret svg { transition: rotate .18s ease }
.sub { position: absolute; top: 100%; left: -18px; min-width: 260px; margin: 0; padding: 10px 0;
  list-style: none; background: var(--yellow); border: 1px solid var(--ink);
  opacity: 0; visibility: hidden; translate: 0 -6px; transition: opacity .18s ease, translate .18s ease, visibility 0s .18s; z-index: 50 }
.has-sub:hover .sub, .has-sub.open .sub { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s }
.has-sub:hover .caret svg, .has-sub.open .caret svg { rotate: 180deg }
.sub li a { display: flex; align-items: center; min-height: 40px; padding: 0 18px; font-size: 14px;
  text-decoration: none; white-space: nowrap }
.sub li a:hover, .sub li a[aria-current] { text-decoration: underline; text-underline-offset: 4px }
.sub .sub-rule { height: 1px; margin: 8px 18px; background: var(--rule) }
@media (prefers-reduced-motion: reduce) { .sub, .caret svg { transition: none } }

/* the drawer lists the same children indented under Services, at reading size */
.drawer-subs { padding: 4px 0 6px 18px; border-bottom: 1px solid var(--rule) }
.drawer .drawer-sub { font-family: var(--sans); font-size: 15px; padding: 9px 0; border-bottom: 0 }

/* the drawer's own container stacks. It sits inside .nav, whose .wrap is a flex ROW for the bar,
   and inherited that — the drawer's links ran across the screen and off it once a second kind of
   child (the Services group) joined them. */
.drawer .wrap { display: block }