/* company.css: our standards, our story and the press kit on Brand's system (system.css), beside Function's About and
   Security, from Fathom Design's critique, 16 Oct 2026 (sections 3, 5 and 7): the headline at the display size (44 at
   390, 86 at 1440, weight 300), section heads at one size (32 at 300, 46 at 1440) so the loudest-to-next ratio lifts;
   the quiet capitals eyebrow in place of the filled pill; one body size (17 on 1.6, 18 on 1.55 at 1440); the numbered
   hairline rows kept exactly (the model for the site); the two role boxes and the governance cards as hairline columns
   and rows; no drop cap; the pull quote in ink on a hairline; the stat row as the one hairline strip; the press
   boilerplate as plain text; one terra pill on each page before the band. Loaded after zaha.css and system.css on the
   three pages only; the words are untouched. */

.z-light body { background: var(--z-bg); }
.z-light .nav-links .nav-cta { background: var(--z-action) !important; color: var(--z-on-action) !important; border-color: var(--z-action); }
.z-light .nav-links .nav-cta:hover { background: var(--z-action-hover) !important; color: var(--z-on-action) !important; }

/* the head */
.subpage-hero { padding: calc(env(safe-area-inset-top, 0px) + 124px) 0 var(--z-gap-3); text-align: center; } /* the title sits in the panel (zaha.css §7b) */
.subpage-hero .container { max-width: 820px; }
.subpage-hero .label, .subpage-hero .label-pill { display: block; margin: 0 0 var(--z-gap-3); padding: 0; background: none; border-radius: 0; font: 600 12px/1.4 var(--z-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--z-ink-3); }
.subpage-h1 { font: 300 clamp(2.75rem, 1.775rem + 4vw, 5.375rem)/0.98 var(--z-serif); letter-spacing: -0.025em; color: var(--z-ink); max-width: none; margin: 0 auto; text-wrap: balance; }
.subpage-sub { margin: var(--z-gap-3) auto 0; font: 300 clamp(19px, 1rem + .6vw, 24px)/1.4 var(--z-serif); color: var(--z-ink-2); max-width: 30em; }

/* one section head, one body */
.company-h2, .content h2, .story-content h2, .press h2, .team-providers h2 { font: 300 clamp(28px, 1.2rem + 1.4vw, 36px)/1.1 var(--z-serif); letter-spacing: -0.015em; color: var(--z-ink); margin: 0 0 var(--z-gap-3); }
.content > p, .oa-close, .oa-intro, .story-content p, :where(.press) p, .criteria p, .criteria ul li, .role p, .gov-card p, .press-topics li { font: 400 clamp(17px, 1rem + .2vw, 18px)/1.6 var(--z-sans) !important; color: var(--z-ink-2); }
.content > p, .oa-close, .story-content p, :where(.press) p { max-width: 33em; }
.story-content p, .content > p { margin-bottom: 1.1em; }
.content > p strong, .story-content p strong, :where(.press) p b { color: var(--z-ink); }

/* our standards: the founder, 17 Oct ("a bunch of text"): every section head centred with its terra dot; the two roles as
   white cards headed by the same icons as the home's care team, each duty on a terra check; the decisions as a two-column
   grid of cards; your tradition as two cards */
.oa-sec .content h2 { text-align: center; }
.oa-sec .content { max-width: 920px; }
.oa-sec--first .content { max-width: 780px; }
.role-grid { gap: var(--z-gap-3); margin: var(--z-gap-4) 0 var(--z-gap-3); }
.role-grid .role { background: var(--z-surface); border: 1px solid var(--z-hair); border-radius: var(--z-r-card); padding: var(--z-gap-4) var(--z-gap-4) var(--z-gap-3); }
.role-av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--z-bg-warm); color: var(--z-ink); margin-bottom: var(--z-gap-2); }
.role-av--b { background: var(--z-ink); color: var(--z-bg); }
.role-av svg { width: 22px; height: 22px; }
.role-grid .role-label { font: 600 12px/1.4 var(--z-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--z-ink-3); }
.role-grid .role ul { list-style: none; padding: 0; margin: 0; }
.role-grid .role li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid var(--z-hair); margin: 0; font: var(--z-t-body); color: var(--z-ink-2); }
.role-grid .role li::before { content: ""; position: absolute; left: 0; top: 15px; width: 18px; height: 18px; background: var(--z-terra); -webkit-mask: var(--icon-check) center/contain no-repeat; mask: var(--icon-check) center/contain no-repeat; }
.oa-note { text-align: center; margin-inline: auto; }
.oa-sec .gov { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--z-gap-3); border: 0; }
.gov .gov-card { background: var(--z-surface); border: 1px solid var(--z-hair); border-radius: var(--z-r-card); padding: var(--z-gap-3) var(--z-gap-4); }
.gov .gov-card:last-child { grid-column: 1 / -1; }
.trad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--z-gap-3); margin-top: var(--z-gap-4); }
.trad { background: var(--z-bg-warm); border-radius: var(--z-r-card); padding: var(--z-gap-4); }
.trad h3 { font: 300 22px/1.3 var(--z-serif); color: var(--z-ink); margin: 0 0 var(--z-gap-1); }
.trad p { font: var(--z-t-body); color: var(--z-ink-2); margin: 0; }
@media (max-width: 720px) { .oa-sec .gov, .trad-grid { grid-template-columns: minmax(0, 1fr); } .role-grid .role, .gov .gov-card, .trad { padding: var(--z-gap-3); } }
.oa-sec { padding: var(--z-gap-5) 0; }
.oa-sec--white { background: var(--z-bg); border: 0; }
.criteria { margin-top: var(--z-gap-3); }
.criteria > li { border-top: 1px solid var(--z-hair); padding: var(--z-gap-4) 0; }
.criteria > li:last-child { border-bottom: 1px solid var(--z-hair); }
.criteria .n { font: 300 24px/1 var(--z-serif); color: var(--z-ink-3); }
.criteria h3, .role h3, .gov-card h3 { font: 300 22px/1.3 var(--z-serif); color: var(--z-ink); margin: 0 0 var(--z-gap-1); } /* serif 300, one step under the section head; serif 500 is the wordmark only (Brand, 16 Oct) */
.criteria ul li::marker { color: var(--z-ink-3); }
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--z-gap-5); }
.role { background: none; border: 0; border-top: 1px solid var(--z-hair); border-radius: 0; padding: var(--z-gap-4) 0; box-shadow: none; }
.role-label { font: var(--z-t-small); letter-spacing: 0; text-transform: none; color: var(--z-ink-3); margin-bottom: var(--z-gap-1); }
.gov { margin-top: var(--z-gap-3); gap: 0; border-bottom: 1px solid var(--z-hair); }
.gov-card { background: none; border: 0; border-top: 1px solid var(--z-hair); border-radius: 0; padding: var(--z-gap-3) 0; box-shadow: none; }
.gov-card a, .content a, .story-content a, .press p a, .press .fact a, .contact a { color: var(--z-ink); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { .roles { grid-template-columns: minmax(0, 1fr); } }

/* our story */
.story { padding: var(--z-gap-3) 0 var(--z-gap-5); }
.story-content { max-width: 760px; }
.story-dropcap::first-letter { font: inherit; float: none; margin: 0; color: inherit; }
.story-quote { border-left: 1px solid var(--z-line); padding-left: var(--z-gap-3); margin: var(--z-gap-4) 0; }
.story-quote p { font: 300 clamp(22px, 1.1rem + 1vw, 30px)/1.3 var(--z-serif) !important; font-style: normal !important; color: var(--z-ink) !important; max-width: 24em; }
.story-stats { gap: 0; margin: var(--z-gap-5) 0; border-top: 1px solid var(--z-line); padding-top: var(--z-gap-3); }
.story-stat { text-align: left; padding-right: var(--z-gap-3); border-left: 1px solid var(--z-line); padding-left: var(--z-gap-3); }
.story-stat:first-child { border-left: 0; padding-left: 0; }
.story-stat-num { font: 300 clamp(36px, 1.6rem + 2vw, 56px)/1 var(--z-serif); color: var(--z-ink); }
.story-stat-num::after { content: none; }
.story-stat-label { font: var(--z-t-small); color: var(--z-ink-3); margin-top: var(--z-gap-1); }
/* the founder, 17 Oct: the story centred on the page, the way the standards and the profiles are */
.story-content { margin-inline: auto; text-align: center; }
.story-content p, .story-content h2 { margin-inline: auto; }
.story-content .story-quote { border-left: 0; padding: var(--z-gap-3) 0 0; position: relative; }
.story-content .story-quote::before { content: ""; position: absolute; top: 0; left: 50%; width: 40px; height: 2px; background: var(--z-terra); transform: translateX(-50%); }
.story-content .pp-act { text-align: center; }
@media (max-width: 560px) { .story-stats { grid-template-columns: minmax(0, 1fr); } .story-stat { border-left: 0; padding-left: 0; padding: var(--z-gap-2) 0; border-top: 1px solid var(--z-hair); } .story-stat:first-child { border-top: 0; } }

/* the press kit */
.press .wrap-text > .eyebrow, .press .wrap-text > h1, .press .wrap-text > .lead, .press-hero > * { text-align: center; margin-left: auto; margin-right: auto; }
.press-hero { margin-bottom: var(--z-gap-4); } /* the title sits in the panel (zaha.css §7b) */
.press-hero .lead { margin: var(--z-gap-3) auto 0; }
.press-hero h1 { max-width: 12em; }
.press h1 { font: 300 clamp(2.75rem, 1.775rem + 4vw, 5.375rem)/0.98 var(--z-serif); letter-spacing: -0.025em; color: var(--z-ink); max-width: none; }
.press .lead { font: 300 clamp(19px, 1rem + .6vw, 24px)/1.4 var(--z-serif) !important; color: var(--z-ink-2); max-width: 30em; }
.press .wrap-text > .eyebrow, .press .eyebrow { font: 600 12px/1.4 var(--z-sans) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--z-ink-3); margin: 0 0 var(--z-gap-3); }
.press .section-rule { display: none; }
.press h3 { font: var(--z-t-small); letter-spacing: 0; text-transform: none; color: var(--z-ink-3); }
.press .boilerplate, .press .box, .press .card { background: none; border: 0; border-top: 1px solid var(--z-hair); border-radius: 0; padding: var(--z-gap-3) 0 0; box-shadow: none; }
.press .fact { border-top: 1px solid var(--z-hair); }
.press .fact .l { font: var(--z-t-label); color: var(--z-ink); } /* Figtree 15 at 600, a letter's label (Brand) */
.press-topics li::marker { color: var(--z-ink-3); }
.press .logo-inline::after { color: var(--z-terra); }

/* the one action before the band */
.pp-act { margin: var(--z-gap-4) 0 0; }
.pp-act .z-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--z-action-h); padding: 0 24px; border-radius: var(--z-r-action); background: var(--z-action); color: var(--z-on-action); font: var(--z-t-strong); text-decoration: none; border: 1px solid var(--z-action); }
.pp-act .z-action:hover { background: var(--z-action-hover); border-color: var(--z-action-hover); color: var(--z-on-action); }
.pp-act .z-action--secondary { background: var(--z-bg); color: var(--z-action); border-color: var(--z-action); }
.pp-act .z-action--secondary:hover { background: var(--z-bg-warm); color: var(--z-action-hover); border-color: var(--z-action-hover); }

/* the closing band's headline in white (the press page's h2 rule above reached it and left it ink on charcoal); its weight and button: zaha.css §11b */
.press .close-band h2 { color: #FFFFFF; }
/* air above a section head on Story and Press: the shared rule above zeroed the top margin and the heads sat on the paragraph before (Atelier Noor, 17 Oct) */
.story-content h2, .press h2 { margin-top: var(--z-gap-5); }

/* visitor review, 17 Oct (390 and 1440) */
/* press: the dark band joins the footer (no cream strip under it), the media card keeps air above the band, the band's
   head centred like every page, the hero eyebrow centred over a balanced head, and the paragraphs use the column */
.press { padding-bottom: 0; }
.press .contact { margin-bottom: var(--z-gap-5); }
.press .close-band h2 { margin: 0 auto 12px; }
.press-hero .eyebrow { margin-inline: auto; }
.press h1 { text-wrap: balance; }
.press .wrap-text p { max-width: none; }
/* our standards: the six standards without numbers, the intro and its action centred like every later section, and
   less air between sections on a phone */
.criteria > li { display: block; }
.oa-sec--first .oa-intro, .oa-sec--first .pp-act { text-align: center; }
.oa-sec--first .oa-intro { margin-inline: auto; max-width: 33em; text-wrap: balance; }
.oa-sec--first .pp-act { max-width: none; }
.gov-card h3, .trad h3, .role h3, .criteria h3 { text-wrap: balance; }
@media (max-width: 720px) { .oa-sec { padding: var(--z-gap-4) 0; } }
/* our story: no lone last word in the paragraphs or the pull quote */
.story-content p { text-wrap: pretty; }
.story-content .story-quote p, .story-content h2 { text-wrap: balance; }