/* Reading sizes are shared by all Version B pages. Load after component and
   mobile styles. The 85% composition scale must never shrink reading text.
   Display headings, artwork, metrics and navigation keep their own hierarchy. */
:root {
  --type-body:clamp(1.25rem,1.125rem + .25vw,1.4375rem);
  --type-caption:clamp(1.0625rem,1rem + .125vw,1.1875rem);
  --type-label:clamp(1.125rem,1rem + .2vw,1.25rem);
  --type-small:1rem;
  --type-leading:1.5;
}

/* Normal prose, including the Method cards used as the reading reference. */
.material-page[data-site-page] {
  font-size:var(--type-body);
  line-height:var(--type-leading);
}
.material-page[data-site-page] :is(
  .story-copy>p:not(.large-copy), .vision-principles p, .value-panel p,
  .approach-steps p:not(.step-label), .drivers-copy>p:not(.eyebrow),
  .team-member-bio, .method-deliverable p, .drivers-example>p,
  .drivers-example dt, .drivers-example dd, .comparison-option p,
  .process-list details p, .faq-list details p,
  .podcast-subject, .trust-book-description, .win-copy dd,
  .briefs-heading>p, .episode-summary, .episode-takeaways li,
  .booking-explanation, .booking-reassurance, .panel-intro,
  .role-review dd, .calendar-status, :where(#small-calendar), .promise>p
) {
  font-size:var(--type-body);
  line-height:var(--type-leading);
}

/* Compact explanatory text is still reading copy, not fine print. */
.material-page[data-site-page] :is(
  .founder-photo figcaption span, .team-role, .team-profile-cue, .team-deck-name,
  .client-type, .performance-basis, .performance-preview-note,
  .voice-type, .voice-label, .voice-credit, .gallery-toolbar>p,
  .podcast-show, .podcast-length, .podcast-open, .book-download-meta,
  .win-title>p, .win-copy dt,
  .episode-dialog-toolbar>span, .episode-show, .episode-meta,
  .episode-original-title, .booking-host p, .booking-email,
  .optional, .field-error, .referral-field, .role-review dt,
  .slider-endpoints, .savings-summary>p:last-child, .flat-fee span,
  .flat-fee>p, .fee-table thead th
) {
  font-size:var(--type-caption);
  line-height:1.45;
}

/* Short labels and controls stay distinct from paragraphs and large numbers. */
.material-page[data-site-page] :is(
  .eyebrow, .label, .hero-kicker, .method-tag, .method-eyebrow,
  .step-label, .comparison-label, .form-field label,
  .salary-label, .role-option span, .review-kicker, .comparison-option h3,
  .savings-summary>p:first-child, .text-button, .calendar-external,
  .gallery-actions button, .episode-close, .episode-pagination button, .booking-tabs button
) {
  font-size:var(--type-label);
  line-height:1.35;
}
.material-page[data-site-page] :is(.preview-note,.site-footer>span,.booking-footer p,.pricing-footer p,.method-footer>span) {
  font-size:var(--type-small);
  line-height:1.5;
}
.material-page[data-site-page] .form-field :is(input,select,textarea) {
  font-size:var(--type-body);
  line-height:1.45;
}
.material-page[data-site-page] .stage-decision {
  font-size:max(var(--type-body),clamp(1.1875rem,1.55vw,1.5625rem));
  line-height:1.5;
}
.material-page[data-site-page] :is(.fee-table [data-fee],.fee-table .difference) {
  font-size:var(--type-label);
  line-height:1.4;
}

/* Homepage panels use slightly larger reading copy on broad layouts. Keep that
   hierarchy while removing their old scaled-down mobile exceptions. */
.material-page[data-site-page="home"] :is(
  .hero-studio .lead, .method-row>p:last-child, .process-list details p,
  .term-list p, .voices .audience-promise p, .section-intro
) {
  font-size:max(var(--type-body),clamp(1.25rem,1.55vw,1.75rem));
  line-height:1.5;
}
.material-page[data-site-page="home"] .client-roles {
  font-size:var(--type-body);
  line-height:1.45;
}
.material-page[data-site-page="home"] .studio-image .hero-facts a:last-child {
  font-size:var(--type-caption);
  line-height:1.45;
}
.material-page[data-site-page="home"] .term-list .small {
  font-size:var(--type-caption);
  line-height:1.5;
}

/* The alignment example is a full Method card, not a smaller inset note. */
.material-page[data-site-page="method"] .drivers-example h3 {
  font-size:clamp(25px,2.25vw,36px);
  line-height:1.12;
}
.material-page[data-site-page="method"] .drivers-example dl>div {
  grid-template-columns:minmax(6.5em,.32fr) minmax(0,1fr);
  gap:1em;
}
.material-page[data-site-page="about"] .story-copy>p:not(.large-copy) {
  max-width:55ch;
}
.material-page[data-site-page] .team-nameplate .team-role {
  min-height:2.9em;
}

/* The timeline owns a compact layout, not a miniature type scale. */
.material-page[data-site-page] .hiring-timeline :is(.meta,.tally-label,.panel-eyebrow,.step-time,.option-caption) {
  font-size:var(--type-caption);
  line-height:1.4;
}
.material-page[data-site-page] .hiring-timeline .meta {
  font-size:var(--type-label);
  white-space:normal;
  max-width:calc(100% - 12px);
}
.material-page[data-site-page] .hiring-timeline :is(.step-copy,.panel-note) {
  font-size:var(--type-body);
  line-height:1.5;
}
.material-page[data-site-page] .hiring-timeline :is(.step-heading,.option),
.material-page[data-site-page] .hiring-timeline .popover .substep .option {
  font-size:var(--type-label);
  line-height:1.35;
}
.material-page[data-site-page] .hiring-timeline .popover {
  width:26rem;
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 32px);
}
.material-page[data-site-page] .hiring-timeline .popover.method { width:29rem; }
.material-page[data-site-page] .hiring-timeline .panel-title { font-size:1.5rem; line-height:1.2; }
.material-page[data-site-page] .hiring-timeline .panel-note { padding-top:1rem; }
.material-page[data-site-page] .hiring-timeline .tooltip {
  font-size:var(--type-caption);
  line-height:1.45;
  max-width:min(22rem,calc(100vw - 32px));
}
/* Enlarged text gets a vertical timeline when two readable columns cannot fit. */
.material-page[data-site-page] .hiring-timeline[data-layout="stack"] .journey {
  display:grid; gap:1.5rem; width:100%; max-width:32rem; height:auto;
}
.material-page[data-site-page] .hiring-timeline[data-layout="stack"] .stage {
  position:relative; width:100%; min-width:0; height:auto; padding-left:56px;
  text-align:left; translate:none;
}
.material-page[data-site-page] .hiring-timeline[data-layout="stack"] :is(.name,.meta) {
  position:static; display:block; width:auto; max-width:100%; height:auto;
  translate:none; transform:none; font-size:var(--type-label); line-height:1.4;
}
.material-page[data-site-page] .hiring-timeline[data-layout="stack"] .meta { margin-top:.5em; }
.material-page[data-site-page] .hiring-timeline[data-layout="stack"] .node { left:0; top:0; }
.material-page[data-site-page] .hiring-timeline[data-layout="stack"] .tooltip { display:none; }
.material-page[data-site-page] .hiring-timeline .stroke.vertical {
  border-left-width:calc(2px * var(--design-scale,.85)); border-top:0; border-bottom:0;
}

/* Text growth should create room, never force smaller text or clipped lines. */
.material-page[data-site-page] :is(.story-copy,.stage-details,.client-details,.podcast-copy,.win-copy,.booking-explanation,.form-field,.approach-steps,.approach-steps article,.drivers-panel,.drivers-copy) {
  min-width:0;
  overflow-wrap:break-word;
}
.material-page[data-site-page="about"] .approach-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.material-page[data-site-page] .fee-table .difference { overflow-wrap:normal; }
.material-page[data-site-page] .slider-endpoints { flex-wrap:wrap; gap:.25em 1em; }
.material-page[data-site-page] .slider-endpoints>span:last-child { margin-left:auto; }
.material-page[data-site-page] .comparison-side { container:fee-comparison / inline-size; }
.material-page[data-site-page] .fee-basis { display:none; }
.material-page[data-site-page] .salary-side .flat-fee>div { flex-wrap:wrap; }
.material-page[data-site-page] .salary-side .flat-fee h3 { white-space:normal; }
.material-page[data-site-page] .episode-pagination button { min-width:0; white-space:normal; }
.material-page[data-site-page] .episode-takeaways li+li { margin-top:1em; }

@media(max-width:1100px) {
  .material-page[data-site-page="method"] .drivers-example dl>div { display:block; }
}
@media(max-width:900px) {
  .material-page[data-site-page="method"] .drivers-example h3 { font-size:23px; }
  .material-page[data-site-page="method"] .drivers-example dd { margin-top:.5em; }
  .material-page[data-site-page] :is(.stage-intro,.opening-bottom p,.opening-intro,
    .vision-opening>p:last-child,.density-statement>p:last-child,
    .approach-next p,.team-heading>p,.trust-section-heading>p,.pricing-opening>p) {
    font-size:var(--type-body);
    line-height:1.5;
  }
}
@media(max-width:800px) {
  /* A three-column fee comparison needs the full width once type is readable. */
  .material-page[data-site-page="pricing"] .calculator { grid-template-columns:minmax(0,1fr); }
  .material-page[data-site-page="pricing"] .salary-side { border-right:0; }
  .material-page[data-site-page="pricing"] .role-option { flex:1 1 8.5rem; min-width:0; }
  .material-page[data-site-page="pricing"] .fee-table { table-layout:fixed; }
  .material-page[data-site-page="pricing"] .fee-table thead th:first-child { width:19%; }
  .material-page[data-site-page="pricing"] .fee-table thead th:nth-child(2) { width:31%; }
  .material-page[data-site-page="pricing"] .fee-table thead th:last-child { width:50%; }
  .material-page[data-site-page="pricing"] .fee-table [data-fee] { white-space:nowrap; }
  .material-page[data-site-page="pricing"] .savings-summary { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:600px) {
  .material-page[data-site-page] .hiring-timeline .popover { width:calc(100vw - 32px); }
  .material-page[data-site-page="about"] .approach-grid { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:359px) {
  .material-page[data-site-page="method"] .drivers-example h3 { font-size:22px; }
}

/* Keep each comparison together when the available reading width is narrow,
   including enlarged text. Explicit table roles preserve its relationships. */
@container fee-comparison (max-width:24rem) {
  .material-page[data-site-page="pricing"] .fee-basis {
    display:block; text-align:left; color:#555; padding-bottom:.75em;
    font-size:var(--type-caption); line-height:1.45;
  }
  .material-page[data-site-page="pricing"] .fee-table,
  .material-page[data-site-page="pricing"] .fee-table tbody { display:block; }
  .material-page[data-site-page="pricing"] .fee-table thead {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  .material-page[data-site-page="pricing"] .fee-table .comparison-row {
    display:grid; grid-template-columns:minmax(0,1fr); gap:.5em; padding-block:1em;
  }
  .material-page[data-site-page="pricing"] .fee-table :is(tbody th,td) {
    display:block; width:auto; padding:0; text-align:left;
  }
  .material-page[data-site-page="pricing"] .fee-table tbody th { font-size:var(--type-label); }
  .material-page[data-site-page="pricing"] .fee-table [data-fee] { white-space:normal; }
  .material-page[data-site-page="pricing"] .fee-table [data-fee]::before {
    content:attr(data-label); display:block; color:#555;
    font-size:var(--type-caption); line-height:1.45;
  }
  .material-page[data-site-page="pricing"] .fee-table .difference { padding:0; text-align:left; }
}
@container fee-comparison (min-width:18rem) and (max-width:24rem) {
  .material-page[data-site-page="pricing"] .fee-table .comparison-row {
    grid-template-columns:minmax(3rem,.35fr) minmax(0,1fr); gap:.5em 1em;
  }
  .material-page[data-site-page="pricing"] .fee-table tbody th { grid-row:1/3; }
  .material-page[data-site-page="pricing"] .fee-table :is([data-fee],.difference) { grid-column:2; }
}