/* Technology Experts Group — field (sector) pages.
 * Each page sets --field + --field-ink on <body data-field>. */

/* ---------- FIELD HERO ---------- */
.field-hero {
  position: relative; overflow: clip;
  background:
    radial-gradient(120% 90% at 88% -20%, color-mix(in oklch, var(--field) 22%, transparent), transparent 60%),
    linear-gradient(180deg, var(--color-paper), var(--color-paper-2));
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: var(--rule) solid var(--color-line);
}
.breadcrumb { display: flex; align-items: center; gap: 0.6em; font-size: var(--text-sm); color: var(--color-ink-faint); margin-bottom: var(--space-lg); }
/* min-height keeps the link at the 24px WCAG 2.2 target size — it measured 23.1px */
.breadcrumb a { color: var(--color-ink-soft); display: inline-flex; align-items: center; min-height: 24px; }
.breadcrumb a:hover { color: var(--field-ink, var(--brand-blue)); }
.breadcrumb svg { width: 14px; height: 14px; }
[dir="rtl"] .breadcrumb svg { transform: scaleX(-1); }

.field-hero-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: var(--space-2xl); align-items: center; }
.field-tag { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.45em 1em; border-radius: 999px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--field-accent); background: color-mix(in oklab, var(--field) 16%, var(--color-paper)); margin-bottom: var(--space-md); }
[dir="rtl"] .field-tag { font-family: var(--font-ar); letter-spacing: 0.02em; }
.field-tag svg { width: 1.1em; height: 1.1em; }
.field-hero-grid > div:first-child { container-type: inline-size; }
/* No authored <br> here — the title wraps on its own. The coefficient is the
 * measured largest size that still lands in two lines, worst case across every
 * field page and width: EN 11.06cqw (radiation @1600), AR 11.34cqw (mining
 * @1600). Both languages converge, so one value covers them. */
.field-hero h1 { font-size: min(var(--text-display-s), 11cqw, calc(var(--h1-base, 5rem) * var(--h1-step, .87) * var(--h1-short, 1))); line-height: 1; margin-bottom: var(--space-md); }
/* Service-page titles are far longer than the eight field names ("Radiation
 * Emergency Preparedness & Response" vs "Mining"), so they need a tighter cap.
 * Measured worst case across all service pages and widths: EN 8.36cqw,
 * AR 9.82cqw — both rounded down. */
[data-service] .field-hero h1 { font-size: min(var(--text-display-s), 8.2cqw, calc(var(--h1-base, 5rem) * var(--h1-step, .87) * var(--h1-short, 1))); }
.field-hero .lede { font-size: var(--text-lg); color: var(--color-ink-soft); max-width: 52ch; }
.field-hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.btn-field { background: var(--field-ink); color: var(--color-on-night); }
.btn-field:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.field-hero-art { display: grid; place-items: center; }
.field-hero-art svg { width: min(100%, 280px); height: auto; color: var(--field); }
.field-hero-art .ring { color: var(--field-accent); }

/* real photo in the hero slot */
.hero-photo { position: relative; width: 100%; max-width: 480px; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); margin: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s var(--ease-out); }
.hero-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.12); background: linear-gradient(155deg, transparent 55%, color-mix(in oklch, var(--field-ink) 42%, transparent)); }
/* radiation hero photo is landscape — use a 4:3 frame so nothing important is cropped */
body[data-page="radiation"] .hero-photo { aspect-ratio: 4 / 3; max-width: 480px; }
.hero-photo .photo-cap { position: absolute; inset-inline-start: var(--space-md); bottom: var(--space-md); z-index: 2; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-on-night); background: oklch(17% 0.035 268 / 0.7); padding: 0.4em 0.8em; border-radius: 999px; backdrop-filter: blur(4px); }
[dir="rtl"] .hero-photo .photo-cap, [dir="rtl"] .photo-cap { font-family: var(--font-ar); letter-spacing: 0; }

/* in-the-field photo band */
.photo-band { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 21/9; box-shadow: var(--shadow-md); }
.photo-band img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .photo-band { aspect-ratio: 4/3; } }

/* fact chips under hero */
.fact-row { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule) solid var(--color-line); }
.fact { display: flex; flex-direction: column; gap: 2px; padding-inline-end: var(--space-lg); }
/* --font-display is Readex Pro, one family drawn for Latin, digits and Arabic. No RTL override needed, and the one that
   was here forced the text face onto the Latin values. --text-xl rather than
   --text-2xl because this slot carries acronyms and standard references far
   more often than it carries a headline number. */
.fact .n { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--field-accent); }
.fact .l { font-size: var(--text-xs); color: var(--color-ink-faint); }

/* ---------- service rows accent ---------- */
.field-svc .svc-row { --field-num: var(--field-ink); }
.field-svc .num { color: var(--field-accent); }
.field-svc .svc-row:hover :is(h2,h3,h4) { color: var(--field-accent); transition: color var(--dur-fast) var(--ease-out); }

/* A service row that has its own page. It is an <a>, so it needs the
 * affordance the plain rows don't have: a chevron that leans on hover, and a
 * focus ring. Rows without a page stay non-interactive divs. */
.field-svc .svc-link { color: inherit; text-decoration: none; position: relative;
  padding-inline-end: 2.2em; transition: background var(--dur-fast) var(--ease-out); }
.field-svc .svc-link::after { content: ""; position: absolute; inset-inline-end: .6em; top: 1.15em;
  /* physical borders on purpose: border-inline-end flips under RTL, which would
   * combine with the RTL rotation below and leave the chevron pointing down. */
  width: 9px; height: 9px; border-right: 2px solid var(--field-accent);
  border-top: 2px solid var(--field-accent); transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  opacity: .55; }
[dir="rtl"] .field-svc .svc-link::after { transform: rotate(-135deg); }
.field-svc .svc-link:hover::after { opacity: 1; transform: rotate(45deg) translate(2px, -2px); }
[dir="rtl"] .field-svc .svc-link:hover::after { transform: rotate(-135deg) translate(2px, -2px); }
.field-svc .svc-link:focus-visible { outline: 2px solid var(--field-accent); outline-offset: 2px;
  border-radius: var(--radius-sm); }

/* sibling index on a service page */
.svc-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-2xl); }
@media (max-width: 720px) { .svc-index { grid-template-columns: minmax(0, 1fr); } }
.svc-key { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-2xs);
  border-bottom: var(--rule) solid var(--color-line); text-decoration: none; color: inherit;
  font-family: var(--font-ar-display); font-weight: 700; font-size: var(--text-lg);
  transition: color var(--dur-mid) var(--ease-out), padding-inline-start var(--dur-mid) var(--ease-out); }
[dir="ltr"] .svc-key { font-family: var(--font-display); }
.svc-key::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--field, var(--brand-blue)); transition: transform var(--dur-mid) var(--ease-out); }
.svc-key:hover { color: var(--field-accent, var(--brand-blue)); padding-inline-start: var(--space-sm); }
.svc-key:hover::before { transform: scale(1.5); }
.svc-key:focus-visible { outline: 2px solid var(--field-accent, var(--brand-blue)); outline-offset: -2px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { .svc-key:hover { padding-inline-start: var(--space-2xs); }
  .svc-key:hover::before { transform: none; } }
@media (prefers-reduced-motion: reduce) { .field-svc .svc-link:hover::after { transform: rotate(45deg); }
  [dir="rtl"] .field-svc .svc-link:hover::after { transform: rotate(-135deg); } }

/* card accent on field pages */
[data-field] .card-icon { background: color-mix(in oklab, var(--field) 18%, var(--color-paper)); color: var(--field-accent); }
[data-field] .card:hover { border-color: color-mix(in oklab, var(--field) 40%, var(--color-line)); }
[data-field] .eyebrow::before { background: var(--field-ink); }
[data-field] .arrow-link { color: var(--field-accent); }

/* ---------- process steps ---------- */
.steps { counter-reset: step; display: grid; gap: var(--space-md); }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: start; padding: var(--space-md) 0; border-top: var(--rule) solid var(--color-line); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--field-accent); padding-top: 0.25em; }
[dir="rtl"] .step::before { font-family: var(--font-ar); }
.step :is(h2,h3,h4) { font-size: var(--text-lg); margin-bottom: 0.2em; }
.step p { color: var(--color-ink-soft); font-size: var(--text-sm); }

/* ---------- products (instruments) ---------- */
.product { border: var(--rule) solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-lg); background: var(--color-paper); transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out); }
.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.product .code { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--field-accent); letter-spacing: 0.04em; }
[dir="rtl"] .product .code { font-family: var(--font-mono); }
.product .pname { font-size: var(--text-lg); font-family: var(--font-display); margin: var(--space-2xs) 0 var(--space-xs); }
[dir="rtl"] .product .pname { font-family: var(--font-ar); }
.product p { color: var(--color-ink-soft); font-size: var(--text-sm); }
.product .product-shot { position: relative; height: 190px; border-radius: var(--radius-md); margin-bottom: var(--space-md); background: #fff; display: flex; align-items: center; justify-content: center; padding: var(--space-md); border: var(--rule) solid var(--color-line); overflow: hidden; }
/* Saudi Made mark — only on products we actually manufacture (.made-sa) */
.product .product-shot.made-sa::after {
  content: ""; position: absolute; bottom: 7px; inset-inline-end: 8px;
  width: 66px; height: 22px;
  background: url(../img/badges/saudi-made.webp) center/contain no-repeat;
}
.product .product-shot img { max-height: 158px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.product .chip-vis { height: 76px; border-radius: var(--radius-md); margin-bottom: var(--space-md); background: linear-gradient(135deg, color-mix(in oklab, var(--field) 26%, var(--color-paper)), color-mix(in oklab, var(--field-ink) 18%, var(--color-paper))); display: grid; place-items: center; color: var(--field-accent); }
.product .chip-vis svg { width: 34px; height: 34px; }

/* ---------- daughter company callout ---------- */
.daughter {
  background: var(--color-night); color: var(--color-on-night);
  border-radius: var(--radius-xl); padding: clamp(1.8rem, 4vw, 3.2rem);
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-xl); align-items: center;
  position: relative; overflow: hidden;
}
.daughter::after { content:""; position:absolute; inset-inline-end:-10%; top:-40%; width:50%; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle, var(--field) 0%, transparent 70%); opacity:0.28; }
.daughter > * { position: relative; z-index: 1; }
.daughter .eyebrow { color: var(--field); }
.daughter .eyebrow::before { background: var(--field); }
.daughter :is(h2,h3,h4) { font-size: var(--text-2xl); color: var(--color-on-night); margin-bottom: var(--space-sm); }
.daughter p { color: var(--color-on-night-soft); max-width: 52ch; }
.daughter .btn-gold { white-space: nowrap; }
.daughter-aside { display: flex; flex-direction: column; gap: var(--space-md); align-items: stretch; }
.daughter-logo { width: clamp(170px, 22vw, 210px); max-width: 100%; aspect-ratio: 16 / 9; background: #fff; border-radius: var(--radius-md); overflow: hidden; }
.daughter-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- permit / category bars ---------- */
.cat-bar { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); padding: var(--space-md); border: var(--rule) solid var(--color-line); border-radius: var(--radius-md); align-items: center; }
.cat-bar .tier { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--field-accent); width: 2.4em; height: 2.4em; display: grid; place-items: center; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--field) 18%, var(--color-paper)); }
[dir="rtl"] .cat-bar .tier { font-family: var(--font-ar); }

/* ---------- final CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--field-ink), color-mix(in oklab, var(--field-ink) 60%, var(--color-night)));
  color: var(--color-on-night); border-radius: var(--radius-xl);
  padding: clamp(2.2rem, 5vw, 4rem); text-align: center;
}
.cta-band h2 { font-size: var(--text-3xl); color: var(--color-on-night); max-width: 22ch; margin-inline: auto; }
.cta-band p { color: var(--color-on-night-soft); margin: var(--space-md) auto var(--space-lg); max-width: 50ch; }
.cta-band .btn-gold:hover { transform: translateY(-2px); }
/* .btn-ghost is built for paper; on the dark band it needs light ink and a visible edge */
.cta-band .btn-ghost { color: var(--color-on-night); border-color: color-mix(in srgb, var(--color-on-night) 45%, transparent); }
.cta-band .btn-ghost:hover { color: var(--color-gold); border-color: var(--color-gold); }
.cta-band .btn + .btn { margin-inline-start: var(--space-sm); }
@media (max-width: 520px) { .cta-band .btn + .btn { margin-inline-start: 0; margin-block-start: var(--space-sm); } }

/* tag list */
.taglist { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.taglist .pill { background: var(--color-paper); }

/* sectors-served grid */
.sector-grid {
  margin-top: var(--space-lg);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm);
}
.sector {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md);
  border: var(--rule) solid var(--color-line); border-radius: var(--radius-md);
  background: var(--color-paper);
  font-weight: 500; line-height: 1.25;
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out), background .25s var(--ease-out);
}
.sector svg {
  width: 24px; height: 24px; flex: none;
  color: var(--field, var(--brand-gold));
  padding: 7px; border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--field, var(--brand-gold)) 14%, transparent);
  box-sizing: content-box;
}
.sector:hover { border-color: var(--field, var(--brand-gold)); transform: translateY(-2px); background: var(--color-paper-2); }
@media (max-width: 900px) { .sector-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .sector-grid { grid-template-columns: 1fr; } }

/* sector jump-chips (clients page) */
.chipbar { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.chipbar a {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-ink-soft); text-decoration: none;
  padding: .4em 1em; border: var(--rule) solid var(--color-line); border-radius: 999px;
  background: var(--color-paper);
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.chipbar a:hover { color: var(--brand-blue); border-color: color-mix(in oklab, var(--brand-gold) 60%, var(--color-line)); transform: translateY(-1px); }
[data-theme="dark"] .chipbar a:hover { color: var(--color-ink); }
[dir="rtl"] .chipbar a { font-family: var(--font-ar); letter-spacing: 0; }
.sector-label[id] { scroll-margin-top: 120px; }

/* collapsible project groups (projects page) */
details.proj-acc summary { cursor: pointer; list-style: none; }
details.proj-acc summary::-webkit-details-marker { display: none; }
details.proj-acc summary.sector-label { margin-bottom: 0; user-select: none; }
details.proj-acc[open] summary.sector-label { margin-bottom: var(--space-md); }
details.proj-acc summary:hover :is(h2,h3,h4) { color: var(--field-accent, var(--brand-blue)); }
details.proj-acc .acc-chev { width: 20px; height: 20px; flex: none; color: var(--color-ink-faint); transition: transform .25s var(--ease-out); }
details.proj-acc[open] .acc-chev { transform: rotate(180deg); }
details.proj-acc .field-svc { margin-bottom: var(--space-lg); }

/* case studies (projects page) */
.cs-grid { display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
.cs { border: var(--rule) solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-paper); padding: clamp(1.4rem, 3vw, 2.2rem); }
.cs-top { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-xl); align-items: start; }
.cs .eyebrow { color: var(--field-accent); }
.cs .eyebrow::before { background: var(--field); }
.cs :is(h2,h3,h4) { font-size: var(--text-xl); margin: .2em 0 .4em; }
.cs .brief { color: var(--color-ink-soft); max-width: 55ch; }
.cs .mini-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-faint); margin: .2em 0 .35em; }
.cs-list { list-style: none; padding: 0; margin: .3em 0 0; display: grid; gap: .45em; }
.cs-list li { display: flex; gap: .5em; font-size: var(--text-sm); color: var(--color-ink-soft); line-height: 1.5; }
.cs-list li::before { content: "›"; color: var(--field-accent); font-weight: 700; flex: none; }
[dir="rtl"] .cs-list li::before { content: "‹"; }
.cs .fact-row { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule) solid var(--color-line); }
@media (max-width: 820px) { .cs-top { grid-template-columns: 1fr; gap: var(--space-lg); } }

/* in-card lab detail (labs page, always expanded) */
.lab-detail { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px dashed var(--color-line); }
.lab-detail .mini-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-faint); margin: var(--space-sm) 0 .35em; }
.lab-detail ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35em; }
.lab-detail li { display: flex; gap: .5em; font-size: var(--text-sm); color: var(--color-ink-soft); line-height: 1.45; }
.lab-detail li::before { content: "›"; color: var(--brand-gold); font-weight: 700; flex: none; }
[dir="rtl"] .lab-detail li::before { content: "‹"; }
.lab-detail .pill { margin: 0 .3em .35em 0; }

/* course-brochure strip (training page) */
.brochure-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-sm); margin-top: var(--space-xl); }
.brochure {
  margin: 0; overflow: hidden; background: var(--color-paper);
  border: var(--rule) solid var(--color-line); border-radius: var(--radius-md);
  box-shadow: 0 1px 3px oklch(30% 0.05 268 / .10);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.brochure { aspect-ratio: 800 / 1142; position: relative; z-index: 0; }
.brochure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brochure:hover { transform: translateY(-4px); box-shadow: 0 12px 26px oklch(30% 0.05 268 / .18); }

/* posters open full-size in the lightbox on click — the card itself only lifts */
.brochure { cursor: zoom-in; }
.brochure:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
/* a small hint badge so it reads as clickable */
.brochure::after {
  content: "";
  position: absolute; inset-inline-end: 8px; bottom: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: oklch(17% 0.035 268 / .72) center/14px 14px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity: 0; transition: opacity .2s var(--ease-out);
  backdrop-filter: blur(3px);
}
.brochure:hover::after, .brochure:focus-visible::after { opacity: 1; }

/* always one line: below 900px the row scrolls horizontally instead of wrapping */
@media (max-width: 900px) {
  .brochure-strip {
    display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; padding-bottom: var(--space-sm);
    scrollbar-width: thin;
  }
  .brochure { flex: 0 0 clamp(180px, 42vw, 260px); scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .brochure:hover { transform: none; } }

/* "On the ground" operational photo band */
.ops-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); margin-top: var(--space-xl); }
.ops-band.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ops-band.cols-5 { grid-template-columns: repeat(5, 1fr); }
.ops-item { position: relative; margin: 0; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-paper-2); }
.ops-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out); }
.ops-item:hover img { transform: scale(1.04); }
.ops-item figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 2rem .8em .6em; color: #fff;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em;
  background: linear-gradient(transparent, oklch(20% 0.05 268 / .85));
}
/* on small screens every band becomes a horizontal swipe row instead of a tall stack */
@media (max-width: 820px) {
  .ops-band {
    display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; padding-bottom: var(--space-sm); scrollbar-width: thin;
  }
  .ops-band .ops-item { flex: 0 0 clamp(200px, 46vw, 280px); scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .ops-item:hover img { transform: none; } }

/* NORM lifecycle stepper (arrow connectors; logical props auto-flip in RTL) */
.norm-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: var(--space-xl); }
.norm-step { position: relative; padding: 0 var(--space-md); text-align: center; }
.norm-step .dot {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto var(--space-sm);
  display: grid; place-items: center; position: relative; z-index: 1;
  background: color-mix(in oklch, var(--field) 12%, transparent);
  border: 2px solid var(--field); color: var(--field);
}
.norm-step .dot svg { width: 24px; height: 24px; }
.norm-step .n { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-faint); }
.norm-step :is(h2,h3,h4) { font-size: var(--text-lg); margin: .2em 0 .3em; }
.norm-step p { font-size: var(--text-sm); color: var(--color-ink-soft); line-height: 1.45; }
/* connector line */
.norm-step:not(:last-child)::after {
  content: ""; position: absolute; top: 26px; height: 2px;
  inset-inline-start: calc(50% + 30px); inset-inline-end: calc(-50% + 36px);
  background: var(--field); opacity: .45;
}
/* arrowhead — border-inline-start solid + block borders transparent points toward the next step, and flips in RTL */
.norm-step:not(:last-child)::before {
  content: ""; position: absolute; top: 22px; z-index: 1;
  inset-inline-end: calc(-50% + 30px);
  width: 0; height: 0;
  border-block: 5px solid transparent;
  border-inline-start: 8px solid var(--field);
}
@media (max-width: 820px) {
  .norm-steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl) 0; }
  .norm-step:not(:last-child)::after, .norm-step:not(:last-child)::before { display: none; }
}
@media (max-width: 460px) { .norm-steps { grid-template-columns: 1fr; } }

/* Field pages don't load hub.css, so .group-split renders as stacked blocks with no gap.
   Add breathing room between the stacked columns (e.g. credential pills -> the content below).
   Excludes the About page (data-page="group"), which loads hub.css and uses the real 2-col grid. */
body:not([data-page="group"]) .group-split > * + * { margin-top: var(--space-xl); }

@media (max-width: 860px) {
  .field-hero-grid { grid-template-columns: 1fr; }
  .field-hero-art { order: -1; max-width: 200px; }
  .daughter { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* Feature band — one wide project image paired with a dark caption block (field-coloured rail).
   Compact fixed height: the image crops top/bottom via object-fit:cover. */
.feature-band {
  display: grid; grid-template-columns: 1.7fr 1fr; align-items: stretch;
  gap: 0; margin: var(--space-xl) 0 0;   /* a <figure>: drop the browser's 40px side margins */
  min-height: clamp(240px, 26vw, 300px);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* image is absolutely positioned so its intrinsic height doesn't inflate the band —
   the caption text drives the height, and the photo crops (cover) to fill it */
.feature-band .fb-media { position: relative; margin: 0; overflow: hidden; background: #10142e; }
.feature-band .fb-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* a looping clip fills the media side exactly like a photo would */
.feature-band .fb-media .fb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .feature-band .fb-media .fb-video { display: none; } }
/* logo variant — a mark must never be cropped, so sit it whole on a light card */
.feature-band .fb-media.fb-logo { background: #fff; }
.feature-band .fb-media.fb-logo img { object-fit: contain; padding: var(--space-lg) var(--space-xl); }
.feature-band .fb-body {
  padding: var(--space-md) var(--space-lg);
  display: flex; flex-direction: column; justify-content: center; gap: .45em;
  background: #141A3C; color: #fff;
  border-inline-start: 4px solid var(--field);
}
.feature-band .fb-body .eyebrow { color: var(--field); margin: 0; }
.feature-band .fb-body :is(h2,h3,h4) { font-size: var(--text-lg); line-height: 1.2; margin: 0; color: #fff; }
[dir="rtl"] .feature-band .fb-body :is(h2,h3,h4) { line-height: 1.25; }  /* one Arabic card-heading spacing site-wide */
.feature-band .fb-body p { font-size: var(--text-sm); color: rgba(255,255,255,.72); line-height: 1.5; margin: 0; }
/* .btn-ghost is built for paper. Inside the feature band it sat as dark ink on
   the band's navy, which read as an empty outline, so it takes the band's own
   palette instead. */
.feature-band .fb-body .btn-ghost { color: #fff; border-color: rgba(255,255,255,.38); }
.feature-band .fb-body .btn-ghost:hover { color: var(--field); border-color: var(--field); }
.feature-band .fb-tag {
  align-self: flex-start; margin-top: .25em;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--field); padding: .3em .7em; border-radius: 999px;
  background: color-mix(in oklch, var(--field) 22%, transparent);
}
@media (max-width: 860px) {
  .feature-band { grid-template-columns: 1fr; height: auto; }
  .feature-band .fb-media { height: auto; aspect-ratio: 16 / 9; }
  .feature-band .fb-body { border-inline-start: 0; border-top: 4px solid var(--field); }
}


/* A card that is itself the link. Cards are not normally interactive, so the
   affordance has to be explicit: the field colour on the heading and a lift on
   hover, matching .svc-key elsewhere. */
.card-link { display: block; text-decoration: none; color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; }
.card-link:hover { border-color: var(--fc, var(--field)); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-link h3 { color: var(--fi, var(--field-ink, var(--field))); }
.card-link:focus-visible { outline: 2px solid var(--fi, var(--field)); outline-offset: 3px; }
/* A card standing for another field paints its chip in that field's colour,
   overriding the page-level [data-field] rule above. */
.card-link[data-cf] .card-icon { background: color-mix(in oklab, var(--fc) 18%, var(--color-paper));
  color: var(--fi); }
.card-link[data-cf] .card-icon svg { fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }


/* ---- jump index ---------------------------------------------------------
   Only rendered on catalogue-length pages. Wraps rather than scrolls, so no
   section is hidden off the edge on a narrow screen. */
.jump-index { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm);
  align-items: baseline; padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  background: var(--color-paper-2); }
.jump-label { font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-ink-faint); }
.jump-link { font-size: var(--text-sm); color: var(--field-ink, var(--field));
  border-bottom: 1px solid transparent; padding-block: 2px; }
.jump-link:hover, .jump-link:focus-visible { border-bottom-color: currentColor; }
[id^="sec-"] { scroll-margin-top: 84px; }

/* ---- photographic field hero (opt in with body data-hero="photo") -------
   One photograph across the full width, drained of its own colour and
   re-tinted in the page's field hue, with the type set over it. Every tone
   below derives from --field / --field-ink, so a page joins the treatment by
   adding the attribute and nothing else. ---------------------------------- */
body[data-hero="photo"] {
  /* near-black, pulled a little toward the field so the scrim and the tint
     belong to the same family */
  --hero-scrim: color-mix(in oklab, var(--field-ink) 26%, oklch(14% 0.02 268));
  --hero-on: oklch(94% 0.012 268);
  /* how far the photograph is pulled down before the tint goes on. A dark
     source needs none; a bright one turns pastel without it. One number per
     page is the whole adjustment. */
  --hero-dim: 1;
  --hero-tint: .72;
}
/* Per field: --hero-dim is 78 divided by that field's median hero luminance,
   78 being the level the radiation photographs sit at unaided (measured with
   signalstats). --hero-tint is how hard the hue is pushed; the cooler
   mid-chroma fields take less before they read decorative. */
body[data-hero="photo"][data-page="laboratories"] { --hero-dim: .58; --hero-tint: .42; }
body[data-hero="photo"][data-page="environment"] { --hero-dim: .61; --hero-tint: .52; }
body[data-hero="photo"][data-page="water"] { --hero-dim: .52; --hero-tint: .55; }
body[data-hero="photo"][data-page="geology"] { --hero-dim: .56; --hero-tint: .58; }
body[data-hero="photo"][data-page="mining"] { --hero-dim: .60; --hero-tint: .60; }
body[data-hero="photo"][data-page="electronics"] { --hero-dim: .60; --hero-tint: .50; }
body[data-page="electronics"].is-calibration { --hero-dim: .57; }
body[data-page="electronics"].is-supply { --hero-dim: .55; }
/* the three pages added 2026-09-13, dims = 78 / measured YAVG (164, 135, 143) */
body[data-page="electronics"].is-tec { --hero-dim: .48; }
body[data-page="electronics"].is-solar { --hero-dim: .58; }
body[data-page="electronics"].is-monitoring { --hero-dim: .55; }
body[data-page="mining"].is-qaqc { --hero-dim: .55; }
body[data-page="electronics"].is-supply .hero-photo img { object-position: 50% 25%; }
/* the course page shares the hub's classroom photograph, so it shares its exposure */
body[data-page="radiation"]:is(.is-rso, .is-rso-course) { --hero-dim: .78; }
body[data-page="radiation"].is-field-survey { --hero-dim: .53; }
body[data-page="training"].is-reserves { --hero-dim: .46; }
body[data-hero="photo"][data-page="training"] { --hero-dim: .58; --hero-tint: .50; }
body[data-hero="photo"] .field-hero {
  min-height: calc(100svh - 92px);             /* the nav measures 88.8px */
  display: grid; align-items: center;
  padding-block: clamp(1.5rem, 4vh, 3.5rem);
  border-bottom-color: transparent;
}
/* the contour motif sits at z-index -1, so the photograph would bury it; it
   rides over the image instead, in a light tone that reads on the dark ground */
body[data-hero="photo"] .field-hero::before { z-index: 1; background: color-mix(in srgb, var(--hero-on) 13%, transparent); }
/* the figure stops being a card and becomes the ground of the whole section.
   It is positioned against .field-hero, so .field-hero-grid must stay static —
   a positioned wrap would trap the photograph inside the page gutters. */
body[data-hero="photo"] .field-hero-art { position: absolute; inset: 0; z-index: 0; display: block; }
body[data-hero="photo"] .hero-photo,
body[data-hero="photo"] .field-hero-art .hero-photo {
  position: relative; width: 100%; height: 100%; max-width: none;
  aspect-ratio: auto; border-radius: 0; box-shadow: none; margin: 0;
}
/* the plant reads green; draining it lets the field colour carry the image */
body[data-hero="photo"] .hero-photo img { object-position: 50% 45%;
  filter: saturate(.35) contrast(1.06) brightness(var(--hero-dim)); }
/* the radiation plant photograph needs its hazard signage kept in frame */
body[data-hero="photo"].is-hub .hero-photo img { object-position: 46% 33%; }
/* the tint: the photograph keeps its luminance and takes the field's hue */
body[data-hero="photo"] .hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--field-ink); mix-blend-mode: color; opacity: var(--hero-tint);
}
/* the scrim: heaviest under the type, open on the far side */
body[data-hero="photo"] .hero-photo::after {
  z-index: 2; border-radius: 0; box-shadow: none;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--hero-scrim) 50%, transparent) 0%, color-mix(in srgb, var(--hero-scrim) 10%, transparent) 34%,
                    color-mix(in srgb, var(--hero-scrim) 55%, transparent) 100%);
}
[dir="rtl"] body[data-hero="photo"] .hero-photo::after {
  background-image:
    linear-gradient(to left, color-mix(in srgb, var(--hero-scrim) 92%, transparent) 0%, color-mix(in srgb, var(--hero-scrim) 78%, transparent) 34%,
                    color-mix(in srgb, var(--hero-scrim) 30%, transparent) 72%, color-mix(in srgb, var(--hero-scrim) 16%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--hero-scrim) 35%, transparent), transparent 40%); }
[dir="ltr"] body[data-hero="photo"] .hero-photo::after {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--hero-scrim) 92%, transparent) 0%, color-mix(in srgb, var(--hero-scrim) 78%, transparent) 34%,
                    color-mix(in srgb, var(--hero-scrim) 30%, transparent) 72%, color-mix(in srgb, var(--hero-scrim) 16%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--hero-scrim) 35%, transparent), transparent 40%); }

/* the type sits over the photograph, on the page grid, held to a readable measure */
body[data-hero="photo"] .field-hero-grid { grid-template-columns: minmax(0, 1fr); }
body[data-hero="photo"] .field-hero-grid > div:first-child {
  position: relative; z-index: 2; max-width: min(100%, 640px); }
body[data-hero="photo"] .field-hero h1,
body[data-hero="photo"] .field-hero .breadcrumb span { color: var(--color-on-night); }
body[data-hero="photo"] .field-hero .lede { color: color-mix(in srgb, var(--hero-on) 90%, transparent); }
body[data-hero="photo"] .breadcrumb, 
body[data-hero="photo"] .breadcrumb a { color: color-mix(in srgb, var(--hero-on) 72%, transparent); }
body[data-hero="photo"] .breadcrumb a:hover { color: var(--field); }
body[data-hero="photo"] .field-tag {
  color: color-mix(in oklab, var(--field) 68%, var(--hero-on));
  background: color-mix(in srgb, var(--hero-scrim) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--field) 38%, transparent); }
body[data-hero="photo"] .btn-field { background: var(--field); color: oklch(16% 0.02 268); }
body[data-hero="photo"] .field-hero .btn-ghost {
  color: var(--color-on-night); border-color: color-mix(in srgb, var(--hero-on) 42%, transparent); }
body[data-hero="photo"] .field-hero .btn-ghost:hover {
  border-color: var(--field); color: var(--field); }
/* the credentials wrap rather than squeeze: a laboratory page's row reads
   "ICP-OES · ICP-MS", which nowrap folds into unreadable columns */
body[data-hero="photo"] .fact-row {
  border-top-color: color-mix(in srgb, var(--hero-on) 28%, transparent);
  flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
body[data-hero="photo"] .fact { padding-inline-end: var(--space-md); min-width: 0;
  flex: 1 1 0; }  /* equal shares, so a long label wraps in place rather than
                     pushing the last credential onto a second line */
body[data-hero="photo"] .fact .n { color: color-mix(in oklab, var(--field) 62%, var(--hero-on)); }
body[data-hero="photo"] .fact .l { color: color-mix(in srgb, var(--hero-on) 68%, transparent); }
/* the caption moves to the far bottom corner, clear of the type */
body[data-hero="photo"] .hero-photo .photo-cap {
  z-index: 3; inset-inline-start: auto; inset-inline-end: clamp(1.1rem, 4vw, 3rem);
  bottom: clamp(1.1rem, 3vh, 2rem); background: color-mix(in srgb, var(--hero-scrim) 55%, transparent); }

@media (max-height: 820px) and (min-width: 861px) {
  body[data-hero="photo"] .field-hero .breadcrumb { margin-bottom: var(--space-md); }
  body[data-hero="photo"] .field-hero .field-tag { margin-bottom: var(--space-sm); }
  body[data-hero="photo"] .field-hero h1 { font-size: min(var(--text-4xl), 9.4cqw, calc(var(--h1-base, 5rem) * var(--h1-step, .87) * var(--h1-short, 1))); }
  body[data-hero="photo"] .field-hero .lede { font-size: var(--text-base); }
  body[data-hero="photo"] .field-hero-cta { margin-top: var(--space-md); }
  body[data-hero="photo"] .fact-row { margin-top: var(--space-lg); padding-top: var(--space-md); }
}
@media (max-width: 860px) {
  /* the photograph still fills the section; the type stacks over it */
  body[data-hero="photo"] .field-hero { min-height: calc(100svh - 80px); }  /* the nav measures 76.8px here */
  body[data-hero="photo"] .field-hero-art { order: 0; max-width: none; }
  body[data-hero="photo"] .hero-photo img { object-position: 54% 45%; }
  body[data-hero="photo"] .hero-photo::after {
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--hero-scrim) 60%, transparent) 0%,
                      color-mix(in srgb, var(--hero-scrim) 82%, transparent) 45%, color-mix(in srgb, var(--hero-scrim) 92%, transparent) 100%); }
  body[data-hero="photo"] .hero-photo .photo-cap { display: none; }
  /* three credentials across, labels allowed two lines — nowrap squeezes them
     into unreadable columns at this width */
  body[data-hero="photo"] .fact-row { flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
  body[data-hero="photo"] .fact { padding-inline-end: 0; flex: 1 1 28%; }
  body[data-hero="photo"] .fact .l { font-size: 0.6875rem; line-height: 1.4; }
}

/* ---- the group page joins the same frame ---------------------------------
   Its title also sat at 74px — 8% under the homepage and 6% over a field page,
   so a secondary page was speaking at the front door's volume. */
[data-page="group"] .field-hero {
  min-height: calc(100svh - 92px);
  display: grid; align-items: center;
}
@media (max-width: 860px) {
  [data-page="group"] .field-hero { min-height: calc(100svh - 80px); }
}

/* ---- scope-of-testing table ----------------------------------------------
   A laboratory publishes what it can run as a table, not as prose. The wrapper
   scrolls on its own so a wide table never makes the page scroll sideways. */
.scope-wrap { margin-top: var(--space-lg); overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: var(--rule) solid var(--color-line); border-radius: var(--radius-lg);
  background: var(--color-paper); }
.scope-table { width: 100%; border-collapse: collapse; min-width: 720px;
  font-size: var(--text-sm); text-align: start; }
.scope-table th, .scope-table td { padding: 0.85em 1.1em; text-align: start;
  vertical-align: top; border-bottom: var(--rule) solid var(--color-line); }
.scope-table thead th { font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-faint);
  background: var(--color-paper-2); border-bottom-color: var(--color-line-strong);
  white-space: nowrap; font-weight: 600; }
[dir="rtl"] .scope-table thead th { font-family: var(--font-ar); letter-spacing: 0; }
.scope-table tbody tr:last-child td { border-bottom: 0; }
.scope-table tbody tr:hover td { background: var(--color-paper-2); }
/* the analysis names the reader scans down */
.scope-table td:first-child { font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.scope-table td:nth-child(2) { color: var(--field-ink, var(--brand-blue)); font-weight: 600; white-space: nowrap; }
.scope-table td:nth-child(3) { color: var(--color-ink-soft); min-width: 22ch; }
.scope-table td:last-child { color: var(--color-ink-faint); white-space: nowrap; }
.scope-note { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-ink-faint); }
@media (max-width: 640px) {
  .scope-table td:first-child, .scope-table td:nth-child(2) { white-space: normal; }
}

/* the baseline photograph is a pale desert morning — measured luminance 177
   against the field's 127 median, so it needs its own pull */
body[data-hero="photo"][data-page="environment"].is-eia { --hero-dim: .44; }

/* the logging photograph is a tall portrait: hold the technician and the wellhead
   in frame and let the crop take from the sky instead */
body[data-page="geology"].is-logging .hero-photo img { object-position: 62% 62%; }

/* Two real site photographs, both 1600x1020 and both carrying a burnt-in GPS
   stamp along the bottom edge. Cover crops 12% of the height, so anchoring the
   crop to the top drops the stamp and keeps the subject. */
body[data-page="geology"].is-core { --hero-dim: .51; }
body[data-page="geology"].is-core .hero-photo img { object-position: 50% 0%; }
body[data-page="mining"].is-dawn { --hero-dim: .54; }
body[data-page="mining"].is-dawn .hero-photo img { object-position: 50% 0%; }
/* the survey line runs left to right across a pale sky; measured 146 */
body[data-page="mining"].is-survey { --hero-dim: .53; }
body[data-page="mining"].is-estimation { --hero-dim: .53; }
body[data-page="mining"].is-survey .hero-photo img { object-position: 30% 60%; }