/* Edrich type system. The one place that sets type: tokens, base rules, then one group per text role.
   Loaded last on every page (home, Lite assessment, offerings, policies, sitemap, 404), so component
   stylesheets set layout and colour only. One family (Manrope), one fluid scale that grows on wide screens
   through --display-step and --text-step (styles.css), four weights, tracking tied to size, caps from CSS.
   The home hero headline keeps its own sizes in hero-canvas.css and hero-layout.css and sits above this scale. */

/* Metric-matched fallback, so the swap to Manrope does not shift the layout. */
@font-face{font-family:"Manrope Fallback";src:local("Arial");size-adjust:101.8%;ascent-override:105%;descent-override:29.5%;line-gap-override:0%}

:root{
  --font-sans:Manrope,"Manrope Fallback",Arial,sans-serif;
  /* Size: clamp(phone, fluid, 1440px value + wide-screen step) */
  --fs-h1:clamp(36px,3vw + 20px,calc(64px + var(--display-step)));
  --fs-h2:clamp(34px,1.9vw + 20.6px,calc(48px + var(--display-step)));
  --fs-h3:clamp(28px,1.1vw + 20px,calc(36px + var(--display-step) * .6));
  --fs-h4:clamp(22px,.55vw + 18px,calc(26px + var(--display-step) * .3));
  --fs-h5:clamp(18px,.3vw + 15.7px,calc(20px + var(--text-step)));
  --fs-title:clamp(16px,.15vw + 14.9px,calc(17px + var(--text-step)));
  --fs-lead:clamp(17px,.45vw + 14.5px,calc(20px + var(--text-step)));
  --fs-body:clamp(15px,.2vw + 13.2px,calc(16px + var(--text-step)));
  --fs-body-sm:clamp(13px,.15vw + 11.9px,calc(14px + var(--text-step)));
  --fs-caption:calc(12px + var(--text-step) * .5);
  --fs-label:clamp(11px,.1vw + 10.5px,calc(12px + var(--text-step) * .5));
  --fs-ui:var(--fs-body-sm);
  /* Weight: 400 reading text, 500 headlines, 600 titles and emphasis, 650 labels and controls */
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-strong:650;
  /* Line height */
  --lh-display:1.03;--lh-h1:1.06;--lh-heading:1.1;--lh-h4:1.2;--lh-title:1.3;
  --lh-body:1.6;--lh-long:1.7;--lh-sm:1.55;--lh-caption:1.5;--lh-ui:1.4;--lh-numeral:1;
  /* Tracking: tighter as type grows, open for caps */
  --ls-display:-.06em;--ls-h1:-.055em;--ls-h2:-.055em;--ls-h3:-.045em;--ls-h4:-.04em;--ls-h5:-.03em;
  --ls-title:-.02em;--ls-strong:-.01em;--ls-body:0;--ls-caps:.13em;--ls-data-caps:.08em;--ls-index:.04em;--ls-numeral:-.04em;
}

/* ---- Base ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;font-synthesis-style:none}
body{font-family:var(--font-sans);font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body)}
h1,h2,h3,h4,h5{font-weight:var(--fw-medium);line-height:var(--lh-heading);letter-spacing:var(--ls-h2)}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
h2{font-size:var(--fs-h2)}
h4{font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4)}
h5{font-size:var(--fs-h5);line-height:var(--lh-title);letter-spacing:var(--ls-h5)}
b,strong{font-weight:var(--fw-semibold)}
em,i{font-style:normal}
input,textarea,select{font-size:max(16px,var(--fs-body));line-height:var(--lh-ui)}

/* ---- Wrapping and container sizing ---- */
/* Keep the copy in readable phrases across the shared page templates. */
:where(h1,h2,h3,h4){text-wrap:balance}
:where(p,li,dd,dt,figcaption,.stage-copy,.proof-copy,.person-caption,.portrait-note,.person-placeholder){text-wrap:pretty}
:where(.support-switch strong,.support-switch button>span:last-child){text-wrap:balance}
.approach-heading>div,.engagement-heading>div,.support-copy,.contact-section>div:first-child{container-type:inline-size}
.support-copy h3{white-space:nowrap}
.mini-intro>div:first-child{container-type:inline-size}
.mini-intro h1{white-space:nowrap}
.guidance-heading>div{container-type:inline-size}
#guidance-title{white-space:nowrap}
.deliverable-card{container-type:inline-size}
.deliverable-card h3{white-space:nowrap}
.offering-why>div:first-child{container-type:inline-size}
.booking-details,.demo-success,.consult-selection,.consult-details{container-type:inline-size}
#success-view{container-type:inline-size}
.booking-details label>span{display:inline}
.hero-copy,.offering-copy,.people-intro,.engagement-card{container-type:inline-size}
@media(max-width:600px){.journey-stages{grid-template-columns:1fr}.journey-stage{min-height:70px;align-items:center}.stage-copy{min-width:0}}
@media(max-width:370px){.support-switch strong{white-space:nowrap}.support-switch button{padding-inline:0}.support-switch button>span:last-child{text-wrap:balance}}

/* ---- Roles: every text element belongs to one group; the group sets its type ---- */

/* h1: one per subpage, one clear step below the home hero */
.mini-intro h1,
.offering-hero h1,
.offering-hero.has-figure h1,
.policy-heading h1
{font-size:var(--fs-h1);font-weight:var(--fw-medium);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}

/* h2: section headlines */
.contact-section h2,
.approach-heading h2,
.home-page .services h2,
.offering-contact h2,
.preview-head h2,
.story-head h2,
.offering-day h2,
.itam-journey-head h2
{font-size:var(--fs-h2);font-weight:var(--fw-medium);line-height:var(--lh-heading);letter-spacing:var(--ls-h2)}

/* h3: sub-sections, boards, drawers, dialogs, and the Why Edrich and team headings inside section 03 */
.roadmap-card h3,
.about h2,
dialog h2,
#guidance-title,
.about-experience-section h2,
.people-intro h2,
.home-page .journey-visual h3,
.itam-stage-title h3,
.preferences-dialog h2,
.consult-tile h2,
.sheet-header h2,
.guidance-heading h2,
.roadmap-cta h2
{font-size:var(--fs-h3);font-weight:var(--fw-medium);line-height:var(--lh-heading);letter-spacing:var(--ls-h3)}

/* h4: long-form section heads and directory titles */
.policy-body h2,
.policy-directory-item h2,
.sitemap-grid h2,
.reset-dialog h2
{font-size:var(--fs-h4);font-weight:var(--fw-medium);line-height:var(--lh-h4);letter-spacing:var(--ls-h4)}

/* h5: every card and row title */
.service-list summary,
.steps h3,
.home-page .steps h3,
.about-perspectives h3,
.person-caption h3,
.story-col h3,
.itam-phase h3,
.storage-inventory h3,
.board-toolbar h2,
.guidance-card h3,
.contact-offer-name
{font-size:var(--fs-h5);font-weight:var(--fw-medium);line-height:var(--lh-title);letter-spacing:var(--ls-h5)}

/* title: small titles in lists, proof points, document names, and the deliverables ("What you get" on the home page,
   "You leave with" on the offering pages, which share their drawings) */
.outcomes-list h4,
.home-page .outcomes-list h4,
.proof-bar strong,
.proof-copy strong,
.overview-steps strong,
.overview-list strong,
.offering-next>a:last-child,
.doc-preview figcaption strong,
.offering-about h2,
.itam-stage-nav button b,
.preference-row strong,
.snapshot-ready strong,
.capability-context summary,
.context-toggle
{font-size:var(--fs-title);font-weight:var(--fw-semibold);line-height:var(--lh-title);letter-spacing:var(--ls-title)}

/* lead: one per page, under the h1 (the home hero lead keeps its sizes in hero-canvas.css) */
.hero-description,
.offering-description,
.policy-heading>p:not(.eyebrow),
.mini-intro>div>p:not(.eyebrow)
{font-size:var(--fs-lead);font-weight:var(--fw-regular);line-height:var(--lh-body);letter-spacing:var(--ls-body)}

/* intro: one sentence beside or under a section headline */
.approach-heading>p,
.home-page .approach-heading>p,
.contact-section p:not(.eyebrow),
.about-summary,
.offering-contact p:not(.eyebrow),
.preview-head>p,
.story-head>p,
.itam-journey-head>p:not(.overview-label)
{font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-long);letter-spacing:var(--ls-body)}

/* body (the ITAM stage drawer's opening paragraph reads at body size inside its panel) */
.itam-stage-body .lead,
.service-body,
.home-page .service-body,
.steps p,
.home-page .steps p,
.policy-directory-item p,
.sitemap-grid a,
.preferences-intro
{font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body);letter-spacing:var(--ls-body)}

/* body-long: legal and long-form text */
.policy-body p,
.policy-body li
{font-size:var(--fs-body);line-height:var(--lh-long)}

/* body-sm: descriptions under titles, footer links, dialog detail */
.footer-tagline,
.proof-bar span,
.proof-copy>span,
.outcomes-list p,
.home-page .outcomes-list p,
.about-perspectives article>p:last-child,
.home-page .steps .step-output,
.home-page .step-detail li,
.home-page .steps .step-people,
.home-page .steps .step-handoff,
.journey-caption,
.overview-steps p,
.overview-list p,
.offering-about p,
.offering-day>div>p:not(.overview-label),
.day-agenda li,
.story-col li span,
.itam-controls .hint,
.itam-phase>p:not(.overview-label),
.itam-good li,
.itam-q li,
.itam-gaps li,
.itam-maturity div,
.policy-toc a,
.policy-related a,
.storage-inventory dl,
.storage-inventory code,
.policy-hub-foot,
.footer-column a,
.footer-column button,
.preferences-essential p,
.preferences-retention,
.preference-system,
.preference-row span span,
.preferences-confirm p,
.board-toolbar p,
.snapshot-ready p,
.consult-tile>p:not(.eyebrow),
.sheet-columns p,
.sheet-columns li,
.capability-context p,
.guidance-heading>p,
.guidance-card ul,
.roadmap-cta p:not(.eyebrow),
.reset-dialog p
{font-size:var(--fs-body-sm);font-weight:var(--fw-regular);line-height:var(--lh-sm);letter-spacing:var(--ls-body)}

/* item-title: bold at small text size */
.story-col strong,
.preferences-essential strong,
.itam-walkbar .where,
.itam-phase li button,
.itam-links button,
.sheet-columns #capability-measures li
{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);line-height:var(--lh-sm);letter-spacing:var(--ls-strong)}

/* strong inline: bold at the surrounding size */
.lite-assessment-banner strong,
.day-agenda .is-key span:last-child,
.itam-controls .hint b,
.policy-body strong
{font-weight:var(--fw-semibold)}

/* caption: meta, footnotes, figure captions, breadcrumbs, legal line */
.motion-on .process-cue,
.motion-on .home-page .process-cue,
.motion-toggle,
.service-outcomes>.outcomes-scope,
.lite-assessment-banner p,
.offering-breadcrumb,
.offering-breadcrumb a,
.offering-breadcrumb>a,
.offering-downloads small,
.scope-footnote,
.offering-next,
.offering-next>a:first-child,
.hero-caption,
.doc-hint,
.doc-preview figcaption small,
.itam-map-image figcaption,
.itam-links button small,
.policy-breadcrumb,
.policy-meta,
.policy-meta>span:first-child,
.footer-bottom,
.footer-bottom p,
.footer-bottom nav a,
.footer-bottom button,
.footer-status,
.preferences-status,
.privacy-note,
.board-progress>span,
.tile-note,
.domain-label>span,
.canvas-key,
.locked-tile,
.guidance-heatmap small,
.guidance-heatmap span,
.guidance-hint,
.guidance-card-meta,
.guidance-measure p,
.roadmap-milestones
{font-size:var(--fs-caption);line-height:var(--lh-caption);letter-spacing:var(--ls-body)}
.itam-links button small,
.offering-downloads small,
.guidance-heatmap small
{font-weight:var(--fw-regular)}
.policy-meta>span:first-child,
.guidance-heatmap span,
.guidance-card-meta
{font-weight:var(--fw-semibold)}

/* label: every eyebrow, kicker, column label and badge (written in sentence case, uppercased here) */
.eyebrow,
.hero .eyebrow,
dialog .eyebrow,
.contact-section .eyebrow,
.deliverable strong,
.service-outcomes>h3,
.perspective-label,
.home-page .step-output>span,
.home-page .steps .step-detail-label,
.home-page .steps .step-people>span,
.people-intro .eyebrow,
.person-role,
.journey-top,
.offering-hero .eyebrow,
.downloads-label,
.overview-label,
.offering-contact .eyebrow,
.offering-next>a:last-child>span:first-child,
.story-label,
.itam-walkbar .where small,
.itam-maturity small,
.itam-stage-nav button small,
.policy-heading>.eyebrow,
.policy-toc h2,
.policy-related>span,
.storage-inventory article>span,
.preferences-dialog .eyebrow,
.wider-label,
.consult-tile .eyebrow,
.domain-label h3,
.sheet-header .eyebrow,
.sheet-columns h3,
.locked-domain h3,
.guidance-heading .eyebrow,
.guidance-measure>span,
.roadmap-cta .eyebrow
{font-size:var(--fs-label);font-weight:var(--fw-strong);line-height:var(--lh-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;font-variant-numeric:tabular-nums}

/* Footer group titles use sentence case and the link scale for a quiet hierarchy. */
.footer-column h2,
.site-footer .footer-column h2 a
{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);line-height:var(--lh-sm);letter-spacing:var(--ls-body);text-transform:none}

/* index: sequence numbers */
.service-number,
.step-number,
.motion-on .step-number,
.journey-rank,
.journey-select button>span,
.overview-steps li>span,
.page-no,
.itam-phase li button i,
.itam-q li::before,
.policy-toc a span,
.policy-number,
.policy-directory-item>span:first-child
{font-size:var(--fs-caption);font-weight:var(--fw-semibold);line-height:var(--lh-ui);letter-spacing:var(--ls-index);font-variant-numeric:tabular-nums}

/* ui: every button and text link, one size in heroes, sections and CTA bands (the home hero keeps 15px) */
.button,
.header>.button,
body .header>a.button.header-cta,
.text-link,
.hero-actions .button,
.hero-actions .text-link,
.service-learn,
.service-actions .text-link,
.contact-choices .button,
.people-contact,
.offering-actions .button,
.offering-actions .text-link,
.offering-downloads a,
.offering-contact-actions .button,
.offering-contact .button,
.doc-preview figcaption a,
.itam-controls .button,
.itam-stage-close,
.itam-stage-nav .text-link,
.policy-directory-item .policy-read,
.plain-link,
.mini-back,
.mini-header .button,
.reset-assessment,
.snapshot-ready .button,
.tile-actions .button,
.sheet-back,
.mini-page .roadmap-actions .button,
.reset-dialog .button,
.subtle-button,
label
{font-size:var(--fs-ui);font-weight:var(--fw-strong);line-height:var(--lh-ui);letter-spacing:var(--ls-body)}

/* nav: the header pill; phone menu links read at body size for tap comfort */
.desktop-nav,
.desktop-nav a,
body>.header .desktop-nav
{font-size:var(--fs-ui);font-weight:var(--fw-semibold);line-height:var(--lh-ui)}
.mobile-nav a
{font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:var(--lh-ui)}

/* chip: pills, fact chips, the segmented control, the banner button (sentence case, even inside a label) */
.lite-banner-button,
.journey-sample,
.journey-select button,
.offering-facts li,
.itam-chips span
{font-size:var(--fs-caption);font-weight:var(--fw-strong);line-height:var(--lh-ui);letter-spacing:var(--ls-body);text-transform:none}
.journey-sample{font-weight:var(--fw-medium)}

/* numeral: scores, counts and times (each component keeps its own size) */
.proof-copy strong span,
.day-time,
.itam-maturity b,
.tile-score,
.tile-scores button,
.locked-tile strong,
.guidance-heatmap strong
{font-weight:var(--fw-semibold);letter-spacing:var(--ls-title);font-variant-numeric:tabular-nums lining-nums}
[data-count-to]{font-variant-numeric:tabular-nums lining-nums}
.proof-copy strong span{font-size:inherit;line-height:inherit}

/* numeral-lg: large statistics, Manrope only; the "+" and "/ 22" sit at .45em */
.experience-number,
.experience-number sup,
.intro-number,
.intro-number>span
{font-family:var(--font-sans);font-weight:var(--fw-medium);line-height:var(--lh-numeral);letter-spacing:var(--ls-numeral);font-variant-numeric:tabular-nums lining-nums}
.experience-number{font-size:var(--fs-h2)}
.intro-number{font-size:var(--fs-h3)}
.intro-number>span{font-size:.45em}

/* ---- Role details ---- */
/* "Privacy choices" is a button among the sitemap's links and inside policy sentences: it reads as a link there */
.sitemap-grid .plain-link,
.policy-body p .plain-link
{font:inherit;letter-spacing:inherit}
/* Footer: the tagline reads as a card title (h5); column labels stay on one line at every width */
.footer-column h2{white-space:nowrap}
/* The count beside a label stays in sentence case */
.wider-label span:last-child{font-size:var(--fs-caption);font-weight:var(--fw-regular);letter-spacing:var(--ls-body);text-transform:none}
/* ITAM stage title: the second line reads at card-title size */
.itam-stage-title h3 span{font-size:var(--fs-h5);letter-spacing:var(--ls-h5);line-height:var(--lh-title)}

/* ---- Headings in narrow containers: never wider than their column ---- */
.approach-heading h2{font-size:min(var(--fs-h2),10cqw)}
.contact-section h2{font-size:min(var(--fs-h2),12cqw)}
.mini-page .mini-intro h1{font-size:min(var(--fs-h1),8.6cqw)}
#guidance-title{font-size:min(var(--fs-h3),8.5cqw)}
.home-page .journey-visual h3{font-size:min(var(--fs-h3),6.1cqw)}

/* ---- Print (policies) ---- */
@media print{
  .policy-heading h1{font-size:36px}
  .policy-body h2{font-size:22px}
  .policy-body p,.policy-body li{font-size:11pt}
}

/* Lite banner: 13px up to 1280px wide, 14.8px at 2000px, 16px from 2480px (--banner-fs), a step up from caption size so it reads as a call to action */
.lite-assessment-banner p,.lite-assessment-banner strong,.lite-banner-button{font-size:var(--banner-fs)}
/* Header nav, "Let’s talk" and the Lite assessment page's header links: 14.4px at 1280px wide, 16.6px at 2000px, 17.5px from 2300px (--nav-fs); tablets and phones keep the ui size */
@media(min-width:1051px){body>.header .desktop-nav,body>.header .desktop-nav a,body .header>a.button.header-cta,body>.mini-header .button,body>.mini-header .mini-back{font-size:var(--nav-fs)}}
