/* =====================================================================
   pages.css — interior-page components for the multi-page site.
   Loaded after base.css + site.css. Reuses the same tokens,
   editorial serif display, gold hairlines and brand panels so every
   page reads as one continuous experience with the homepage.
   ===================================================================== */

/* deep-link anchors clear the sticky 76px header */
[id] { scroll-margin-top: 92px; }

/* ---- Interior page hero ------------------------------------------- */
.page-hero {
    position: relative; overflow: hidden;
    background: var(--hero-grad);
    border-bottom: 1px solid var(--hairline);
    padding: var(--sp-tight) 0 var(--sp-tight);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero-mono {
    position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
    width: min(48vw, 480px); opacity: .07; pointer-events: none; z-index: 1;
    -webkit-user-select: none; user-select: none;
}
[data-theme="dark"] .page-hero-mono { opacity: .12; }
.page-hero h1 {
    font-family: var(--font-serif); font-weight: 400;
    font-size: var(--fs-d1); line-height: 1.02; letter-spacing: -0.02em;
    max-width: 20ch; margin: 14px 0 0;
}
.page-hero h1 em { font-style: italic; color: var(--accent-strong); }
/* For the old site's full-sentence headlines: same --fs-d1 as every other h1, but a wider measure and looser
   leading, so a 100-character title runs three or four lines instead of six. */
.page-hero h1.h1-long { line-height: 1.14; max-width: 26ch; }
/* Opts out of the 20ch measure and runs to the container edge. Looser leading because anything that does wrap here
   wraps at full width, where 1.02 sets the lines too close. Short headlines simply hold one line. */
.page-hero h1.h1-wide { max-width: none; line-height: 1.14; }
.page-hero .lede { max-width: 62ch; margin: 20px 0 0; }

/* ---- Breadcrumb --------------------------------------------------- */
.breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
    font-size: var(--fs-xs); letter-spacing: .03em; color: var(--text-subtle);
    margin-bottom: 18px;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent-strong); }
.breadcrumb .sep { color: var(--camel); }
.breadcrumb [aria-current] { color: var(--text); }

/* ---- Section head helper ------------------------------------------ */
/* .section-head went with the last markup that used it; dead on 10 Aug 2026, checked across src/. */
.lead { font-size: var(--fs-lede); color: var(--text-muted); max-width: 64ch; }

/* ---- Section rule ------------------------------------------------- */
/* Gold bar above a heading that has no eyebrow — the three Services sections and most of About Us, where the
   old site supplies the heading and inventing a small label above it would be putting words in the client's mouth. */
.sec-rule { width: 70px; height: 2px; background: var(--gold); margin-bottom: 26px; }

/* .copy-lead and .cl-first went on 10 Aug 2026 — About's opener moved into its page hero as a .lede, and it was the
   last page using them. */

/* ---- Rich text prose ---------------------------------------------- */
.prose { max-width: 70ch; }
/* Opts out of the 70ch measure for a block that spans the container; its list splits into columns to compensate. */
.prose.prose-wide { max-width: none; margin-top: var(--sp-block); }
.prose ul.cols-2 { grid-template-columns: 1fr 1fr; gap: 12px 40px; }
@media (max-width: 760px) { .prose ul.cols-2 { grid-template-columns: 1fr; } }
.prose > * + * { margin-top: 1.1em; }
/* Raleway Bold: a heading inside body copy is structure, and the kit gives section titles to Raleway. It was
   the only h2 on the site still set in Century, which made one page carry two different h2 typefaces. */
.prose h2 {
    font-family: var(--font-sans); font-weight: 700;
    font-size: var(--fs-d3); color: var(--heading); margin-top: 1.5em; line-height: 1.12;
}
.prose h3 { font-weight: 500; font-size: var(--fs-d4); color: var(--heading); margin-top: 1.4em; }
.prose p, .prose li { color: var(--text-muted); }
/* .lede is muted, so bold inside it needs the darker ink or it reads weaker than the text around it. */
.prose strong, .prose b, .lede strong { color: var(--text-strong); }
.prose a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
/* base.css strips every list marker, so this gold dot is the site's bullet — the Solutions copy shares the rule. */
.prose ul, .sol-list { display: grid; gap: 10px; margin: .4em 0; }
.prose ul li, .sol-list li { position: relative; padding-left: 26px; }
.prose ul li::before, .sol-list li::before {
    content: ""; position: absolute; left: 0; top: .55em;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 0 3px var(--gold-focus);
}
.prose img { border-radius: var(--radius-md); border: 1px solid var(--hairline); }

/* ---- Split (copy + media) ----------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.split + .split { margin-top: var(--sp-section); }
.split-media img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--hairline); box-shadow: var(--shadow-md); background: var(--surface); }
.split-figure { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--surface-2) center/cover no-repeat; border: 1px solid var(--hairline); box-shadow: var(--shadow-md); }
/* Both classes exist so the text can stay first in the markup: on a phone the heading must arrive before the photo. */
.split.media-right .split-media { order: 2; }
.split.media-left .split-media { order: -1; }
@media (max-width: 860px) {
    .split { grid-template-columns: 1fr; gap: 30px; }
    .split.media-right .split-media, .split.media-left .split-media { order: 0; }
}

/* ---- Feature grid (product key features) -------------------------- */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.feature { background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px 24px; }
.feature .fi { width: 46px; height: 46px; margin-bottom: 18px; }
.feature h3 { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 10px; }
.feature p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .feature-grid { grid-template-columns: 1fr; } }
/* 3-up variant (e.g. 6-item grids) — collapses responsively like the base grid */
.feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .feature-grid.cols-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .feature-grid.cols-3 { grid-template-columns: 1fr; } }
/* .feature-grid.cols-2 and the .coverage-* block went with the Services rewrite of 10 Aug 2026 — only that page
   used them, and its items are run-in bold paragraphs now. */

/* ---- Value grid (core values) ------------------------------------- */
/* Section heading above the tiles. Sits between the Vision/Mission split and
   the grid, so it owns the grid's top margin and the grid drops to 20px. */
.values-head { color: var(--heading); margin: var(--sp-block) 0 0; }
.values-head + .value-grid { margin-top: 20px; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.value-card { background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px 26px; display: flex; gap: 18px; align-items: flex-start; }
.value-card img { width: 46px; height: 46px; flex-shrink: 0; margin-top: 2px; }
.value-card h3 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-d4); color: var(--heading); margin-bottom: 6px; letter-spacing: -0.01em; }
.value-card p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.value-card strong { color: var(--text-strong); font-weight: 700; }
@media (max-width: 860px) { .value-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .value-grid { grid-template-columns: 1fr; } }

/* Sign-off under the values tiles. Centred serif italic behind a short gold rule, the same treatment the
   closing CTA's slogan carries — left-aligned at 2rem it read as a new section heading with nothing under it. */
.authority-line {
    font-family: var(--font-serif); font-style: italic;
    font-size: var(--fs-lede); line-height: 1.5; text-align: center;
    color: var(--accent-strong); max-width: 58ch; margin: var(--sp-tight) auto 0;
}
.authority-line::before {
    content: ""; display: block; width: 54px; height: 1px; background: var(--camel); margin: 0 auto 18px;
}

/* ---- Team / leadership -------------------------------------------- */
.team-grid { display: grid; gap: 28px; margin-top: 40px; }
.team-card { display: grid; grid-template-columns: 260px 1fr; background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.team-photo { background: var(--surface-2) center/cover no-repeat; min-height: 300px; }
.team-body { padding: 32px 34px; }
.team-body .t-name { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-d3); color: var(--heading); letter-spacing: -0.01em; }
.team-body .t-role { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); margin: 6px 0 16px; }
.team-body p { color: var(--text-muted); font-size: var(--fs-sm); }
.team-body p:last-child { margin-bottom: 0; }
/* One person, five paragraphs: the photo is pinned to the top at a portrait crop rather than stretched to
   the bio's full height, which at 260px wide would have run past 800px tall. The column is 300px because
   elen-seated.jpg is 300px wide — anything wider upscales it. */
.team-grid.single .team-card { grid-template-columns: minmax(0, 300px) 1fr; align-items: start; }
.team-grid.single .team-photo { aspect-ratio: 3 / 4; min-height: 0; }
@media (max-width: 620px) {
    .team-card { grid-template-columns: 1fr; }
    .team-photo { min-height: 320px; }
    /* Square on a phone: a 3:4 portrait at full width would run most of the screen before the bio starts. */
    .team-grid.single .team-card { grid-template-columns: 1fr; }
    .team-grid.single .team-photo { aspect-ratio: 1 / 1; }
}

/* ---- Locations ---------------------------------------------------- */
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 36px; }
.loc-card { background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 32px 30px; overflow: hidden; }
.loc-card .loc-media { aspect-ratio: 16 / 10; margin: -32px -30px 24px; background: var(--surface-2) center/cover no-repeat; border-bottom: 1px solid var(--hairline); }
.loc-card .l-tag { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-strong); }
.loc-card h3 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-d4); color: var(--heading); margin: 8px 0 0; letter-spacing: -0.01em; }
.loc-card address { font-style: normal; color: var(--text-muted); margin-top: 16px; line-height: 1.75; font-size: var(--fs-sm); }
.loc-card address a:hover { color: var(--accent-strong); }
@media (max-width: 680px) { .loc-grid { grid-template-columns: 1fr; } }

/* ---- Editorial media band (wide photo) ---------------------------- */
.media-band {
    aspect-ratio: 21 / 7; margin-top: 40px; border-radius: var(--radius-lg);
    background: var(--surface-2) center/cover no-repeat;
    border: 1px solid var(--hairline); box-shadow: var(--shadow-md);
}
@media (max-width: 680px) { .media-band { aspect-ratio: 16 / 10; } }

/* ---- News listing ------------------------------------------------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
.news-card { display: flex; flex-direction: column; background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--hairline); }
.news-card .nc-thumb { aspect-ratio: 16 / 10; background: var(--surface-2) center/cover no-repeat; border-bottom: 1px solid var(--hairline); }
.news-card .nc-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.news-card .nc-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.news-card .nc-date { font-size: var(--fs-xs); color: var(--text-subtle); letter-spacing: .03em; }
.news-card .nc-cat { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 4px 11px; }
.news-card h3 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-d4); line-height: 1.22; color: var(--heading); margin-bottom: 14px; letter-spacing: -0.01em; }
.news-card .nc-go { margin-top: auto; font-weight: 700; font-size: var(--fs-xs); color: var(--accent-strong); display: inline-flex; gap: 7px; align-items: center; }
.news-card:hover .nc-go .arrow { transform: translateX(4px); }
.news-card .nc-go .arrow { transition: transform var(--transition); }
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .news-grid { grid-template-columns: 1fr; } }

/* ---- Single article ----------------------------------------------- */
.article { max-width: 820px; margin: 0 auto; }
.article .prose { max-width: none; }
.article-figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hairline); box-shadow: var(--shadow-md); }
.article-figure img { width: 100%; display: block; }
.article-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.article-meta .nc-cat { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 5px 13px; }
.article-meta .a-date { font-size: var(--fs-xs); color: var(--text-subtle); }
.article-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 1.6em 0; }
.article-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; display: block; border-radius: var(--radius-md); border: 1px solid var(--hairline); }
.article-byline { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-xs); color: var(--accent-strong); }
.back-link .arrow { transition: transform var(--transition); }
.back-link:hover .arrow { transform: translateX(-4px); }
@media (max-width: 560px) {
    .article-gallery { grid-template-columns: 1fr; }
    .article-gallery img { aspect-ratio: auto; }   /* full, uncropped image when stacked */
}

/* ---- Forms -------------------------------------------------------- */
.contact-cols { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(34px, 5vw, 64px); align-items: start; }
.form { display: grid; gap: 18px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .03em; color: var(--text); }
.field input, .field textarea, .field select {
    font-family: inherit; font-size: var(--fs-sm); color: var(--text);
    background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 13px 15px; transition: border-color var(--transition), box-shadow var(--transition);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: var(--camel); box-shadow: 0 0 0 3px var(--gold-focus);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-subtle); }
.form-note { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 4px; }

/* CV upload, consent line. The file input's own button is styled rather than
   hidden behind a custom control — the native one is keyboard-accessible and
   announces itself correctly, and a replacement would have to re-earn both. */
.field-optional { font-weight: 400; color: var(--text-subtle); letter-spacing: 0; }
.field-note { font-size: var(--fs-xs); color: var(--text-subtle); margin: 0; line-height: 1.5; }
.field input[type="file"] { padding: 10px 12px; cursor: pointer; }
.field input[type="file"]::file-selector-button {
    font-family: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 8px 14px; margin-right: 12px; cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}
.field input[type="file"]::file-selector-button:hover { border-color: var(--camel); color: var(--accent-strong); }

.consent-field { gap: 0; }
.consent-label { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; cursor: pointer; }
.consent-label input[type="checkbox"] { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--camel); cursor: pointer; }
.consent-label span {
    font-size: var(--fs-xs); font-weight: 400; line-height: 1.6;
    color: var(--text-muted); letter-spacing: 0;
}
.consent-label a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.contact-aside { background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 30px; }
.contact-aside h3 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-d4); color: var(--heading); letter-spacing: -0.01em; }
.contact-aside p, .contact-aside address { color: var(--text-muted); font-style: normal; font-size: var(--fs-sm); line-height: 1.7; }
.contact-aside a:hover { color: var(--accent-strong); }
.contact-aside .ca-divider { height: 1px; background: var(--hairline); margin: 22px 0; }
@media (max-width: 860px) { .contact-cols { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .form .row2 { grid-template-columns: 1fr; } }
/* The one place the scale is overridden: iOS Safari zooms the page when a focused field is under 16px. */
@media (max-width: 860px) { .field input, .field textarea, .field select { font-size: 1rem; } }

/* ---- Solutions overview cards (link to detail pages) -------------- */
.sol-card[href], a.sol-card { display: block; }

/* ---- Solutions hero: copy beside the product tiles ---------------- */
/* 54/46 with a 48px gutter gives the tiles 541px, wide enough for a two-line blurb; tops align so both columns
   start at the breadcrumb. The band rule itself lives beside .sol-card in site.css — one treatment, not two. */
.sol-split { display: grid; grid-template-columns: 62fr 38fr; gap: 48px; align-items: start; }
.sol-split h1 { max-width: 24ch; }
.sol-split .lede { max-width: none; }
.sol-split .sol-body { color: var(--text-muted); margin: 18px 0 0; }
.sol-split .sol-helps { font-weight: 700; color: var(--heading); margin: 22px 0 8px; }
.sol-split .sol-list { color: var(--text-muted); }
.sol-stack { display: grid; gap: 20px; }

/* Whole tile is the link, so the arrow line is a span — a nested <a> would be invalid. aria-label names it. */
/* Same padding, band and type as the homepage .sol-card — only the column width differs, set by .sol-split below. */
.sol-tile {
    position: relative; display: block; overflow: hidden; text-decoration: none;
    background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 40px 32px 34px;
    transition: transform var(--transition), box-shadow var(--transition);
}
.sol-tile:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.sol-tile .sol-mark { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-d2); color: var(--heading); line-height: 1.15; letter-spacing: -0.01em; }
.sol-tile p { color: var(--text-muted); font-size: var(--fs-sm); margin: 10px 0 16px; }
.sol-tile .card-link { font-weight: 700; font-size: var(--fs-xs); color: var(--accent-strong); display: inline-flex; gap: 7px; align-items: center; }
.sol-tile::before { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--gold), var(--camel)); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); }
.sol-tile:hover::before { transform: scaleX(1); }

/* One column below the nav breakpoint, with the tiles lifted above the second paragraph so a phone reaches a product
   after one scroll instead of six. `display: contents` dissolves the copy wrapper so its children and the tile stack
   become siblings in one grid and `order` can interleave them — the alternative was a second copy of the tiles in the
   markup, which would announce six tiles to a screen reader. Order values step by 10 to leave room to insert. */
@media (max-width: 1100px) {
    .sol-split { grid-template-columns: 1fr; gap: 0; }
    .sol-split .sol-copy { display: contents; }
    .sol-split .breadcrumb { order: 10; }
    .sol-split .r-eyebrow  { order: 20; justify-self: start; }
    .sol-split h1          { order: 30; }
    .sol-split .lede       { order: 40; }
    .sol-split .sol-stack  { order: 50; margin: 34px 0 6px; }
    .sol-split .sol-body   { order: 60; }
    .sol-split .sol-helps  { order: 70; }
    .sol-split .sol-list   { order: 80; }
}

/* ---- Misc helpers ------------------------------------------------- */
/* For the two buttons carrying the old site's own link text, which is a sentence — .btn is nowrap and a
   60-character label would run 430px wide and off a phone screen. */
.btn.btn-wrap { white-space: normal; text-align: left; }
.tile-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
/* .anchor-offset removed 10 Aug 2026 — dead, and `[id] { scroll-margin-top }` above does that job now. */
.section-divider { border: 0; border-top: 1px solid var(--hairline); margin: var(--sp-section) 0; }