appears
most often, and observed stacking one word per line.
Flow layout with a floated icon instead: arbitrary inline content wraps
normally, and because the float only occupies space when an icon is present,
the 34 icon-less callouts need no padding reservation. */
.callout {
display: block;
padding: var(--space-5) var(--space-6);
border-radius: var(--radius-lg);
border: 1px solid var(--border-card);
background-color: var(--surface-sunken);
font-size: var(--fs-base);
line-height: var(--lh-body);
}
/* Logical float, so it sits on the reading edge in both directions. */
.callout__icon {
float: inline-start;
margin-inline-end: var(--space-4);
margin-block-start: 0.1em;
}
/* A float is out of flow, so it can overhang a short callout's bottom border.
Contain it without display:flow-root's side effects on the float itself. */
.callout::after {
content: "";
display: block;
clear: both;
}
.callout__title { display: block; font-weight: var(--fw-semibold); color: var(--text-strong); margin-block-end: var(--space-1); }
.callout--caution {
background-color: var(--signal-caution-bg);
border-color: var(--signal-caution-mark);
color: var(--text);
}
.callout--caution .callout__icon,
.callout--caution .callout__title { color: var(--signal-caution); }
.callout--danger {
background-color: var(--signal-danger-bg);
border-color: var(--signal-danger);
}
.callout--danger .callout__icon,
.callout--danger .callout__title { color: var(--signal-danger); }
.callout--placeholder {
border-style: dashed;
background-color: var(--surface);
color: var(--text-muted);
}
/* ==========================================================================
RESPONSE METHODOLOGY — the 7-step sequence
Signature component. A numbered vertical spine with a continuous rail and
a node per step; on wide screens the step body splits into a two-column
sub-grid so it reads as a procedure specification rather than a blog list.
The rail sits on the reading edge via inset-inline-start, so it moves from
the left in English to the right in Arabic without a single [dir] override.
========================================================================== */
.method {
--node: 3rem;
--rail: 2px;
counter-reset: method;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
@media (min-width: 768px) {
.method { --node: 3.5rem; }
}
/* The continuous rail. Drawn behind the nodes, inset by half a node so it
runs through their centres. Stops short at top and bottom so it does not
dangle past the first and last node. */
.method::before {
content: "";
position: absolute;
inset-block: calc(var(--node) / 2) calc(var(--node) / 2);
inset-inline-start: calc(var(--node) / 2 - var(--rail) / 2);
inline-size: var(--rail);
/* The rail is what makes this read as a connected procedure rather than a
numbered list — it is load-bearing, not decoration, so it uses the full
brand cyan rather than a tint. cyan-200 tested as effectively invisible
against white (1.31:1). */
background-color: var(--action-fill);
}
.method__step {
position: relative;
display: grid;
grid-template-columns: var(--node) 1fr;
gap: var(--space-5);
padding-block-end: var(--space-8);
}
.method__step:last-child { padding-block-end: 0; }
/* The numbered node. Numerals are wrapped .num in markup so they stay LTR
and tabular in Arabic. */
.method__num {
position: relative;
z-index: 1;
display: grid;
place-items: center;
inline-size: var(--node);
block-size: var(--node);
border-radius: 50%;
background-color: var(--surface);
border: var(--rail) solid var(--action-fill);
color: var(--text-accent);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
font-variant-numeric: tabular-nums;
line-height: 1;
transition: background-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out);
}
.method__step:hover .method__num,
.method__step:focus-within .method__num {
background-color: var(--action-fill);
color: var(--action-on-fill);
}
.method__body { min-inline-size: 0; padding-block-start: var(--space-1); }
.method__title {
font-size: var(--fs-xl);
line-height: var(--lh-snug);
color: var(--text-strong);
margin-block-end: var(--space-2);
}
.method__desc {
color: var(--text-muted);
max-inline-size: var(--measure);
}
@media (min-width: 1024px) {
.method__step {
grid-template-columns: var(--node) minmax(0, 18rem) minmax(0, 1fr);
gap: var(--space-6) var(--space-8);
align-items: start;
padding-block-end: var(--space-10);
}
.method__body { display: contents; }
.method__title { margin-block-end: 0; padding-block-start: var(--space-2); }
.method__desc { padding-block-start: var(--space-2); }
}
/* On ink */
.band--ink .method::before { background-color: var(--cyan-700); }
.band--ink .method__num {
background-color: var(--ink);
border-color: var(--action-fill);
color: var(--text-inverse-accent);
}
.band--ink .method__step:hover .method__num {
background-color: var(--action-fill);
color: var(--action-on-fill);
}
.band--ink .method__title { color: var(--text-inverse); }
.band--ink .method__desc { color: var(--text-inverse-muted); }
/* ------ Compact variant --------------------------------------------------
For the homepage summary: seven chips in a wrapping row, connected by a
rule. Reads at a glance; links through to the full methodology page.
------------------------------------------------------------------------- */
.method-compact {
counter-reset: mc;
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-5);
/* Explicit column counts, not auto-fit. There are exactly seven steps, and
auto-fit resolves to five at desktop width — leaving an orphan row of two
with dangling connector rules. Seven is a prime, so the only clean
desktop layout is one row of seven. */
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px) {
.method-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
.method-compact { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-4); }
}
.method-compact__step {
position: relative;
padding-block-start: var(--space-6);
border-block-start: 2px solid var(--cyan-200);
}
.method-compact__step::before {
content: "";
position: absolute;
inset-block-start: -0.4375rem;
inset-inline-start: 0;
inline-size: 0.75rem;
block-size: 0.75rem;
border-radius: 50%;
background-color: var(--action-fill);
}
.method-compact__num {
display: block;
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
font-variant-numeric: tabular-nums;
color: var(--text-accent);
margin-block-end: var(--space-2);
}
.method-compact__title {
display: block;
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
line-height: var(--lh-snug);
color: var(--text-strong);
}
.band--ink .method-compact__step { border-block-start-color: var(--ink-line); }
.band--ink .method-compact__num { color: var(--text-inverse-accent); }
.band--ink .method-compact__title { color: var(--text-inverse); }
/* ==========================================================================
DATA TABLE
Must carry the HAZ TAB dilution guide: 5 columns, 7 data rows, a footnote
marker, and stay readable on a 320px phone.
Strategy: the table scrolls horizontally inside .table-wrap. The BODY never
scrolls horizontally. The first column is sticky so the row label stays
visible while the tablet-size columns scroll under it, and .table-wrap
carries tabindex="0" + role="region" + aria-label so keyboard users can
actually reach and scroll it (WCAG 2.1.1).
========================================================================== */
.table-wrap {
position: relative;
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
background-color: var(--surface);
/* Edge fade cueing more content. background-position must be mirrored in
RTL — one of the two documented [dir] exceptions. */
background-image:
linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)),
linear-gradient(to right, rgba(255, 255, 255, 0), var(--surface) 70%),
linear-gradient(to right, rgba(14, 40, 48, 0.10), rgba(14, 40, 48, 0)),
linear-gradient(to left, rgba(14, 40, 48, 0.10), rgba(14, 40, 48, 0));
background-position: 0 0, 100% 0, 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 3rem 100%, 3rem 100%, 0.875rem 100%, 0.875rem 100%;
background-attachment: local, local, scroll, scroll;
}
/* RTL: the scroll origin moves to the trailing edge, so the fade stops swap.
Documented [dir] exception #2 — background-position/gradient direction. */
[dir="rtl"] .table-wrap {
background-image:
linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)),
linear-gradient(to left, rgba(255, 255, 255, 0), var(--surface) 70%),
linear-gradient(to left, rgba(14, 40, 48, 0.10), rgba(14, 40, 48, 0)),
linear-gradient(to right, rgba(14, 40, 48, 0.10), rgba(14, 40, 48, 0));
background-position: 100% 0, 0 0, 100% 0, 0 0;
}
.table-wrap:focus-visible {
outline: var(--focus-width) solid var(--focus-ring);
outline-offset: var(--focus-offset);
}
.data-table {
inline-size: 100%;
min-inline-size: 40rem;
font-size: var(--fs-sm);
line-height: var(--lh-snug);
text-align: start;
}
.data-table caption {
caption-side: top;
padding: var(--space-5) var(--space-6);
text-align: start;
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
color: var(--text-strong);
border-block-end: 1px solid var(--border-decorative);
}
.data-table th,
.data-table td {
padding: var(--space-4) var(--space-5);
text-align: start;
vertical-align: top;
border-block-end: 1px solid var(--border-decorative);
}
.data-table thead th {
position: sticky;
inset-block-start: 0;
z-index: 2;
background-color: var(--surface-sunken);
font-size: var(--fs-2xs);
font-weight: var(--fw-semibold);
/* NOT uppercase. These headers carry unit symbols and chemical names, where
case is meaning: `1.67 g` uppercases to `1.67 G` (giga, not grams) and
`NaDCC` to `NADCC`. CSS cannot tell a label from a quantity, so the
transform is off and emphasis comes from weight, size and colour instead. */
letter-spacing: var(--track-caps);
color: var(--text-muted);
white-space: nowrap;
border-block-end: 1px solid var(--border-card);
}
.data-table thead th:lang(ar) { letter-spacing: 0; font-size: var(--fs-xs); }
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-block-end: 0; }
.data-table tbody tr:hover td,
.data-table tbody tr:hover th { background-color: var(--surface-tint); }
/* Row header — sticky on the reading edge so the row label survives the
horizontal scroll. */
.data-table tbody th[scope="row"] {
position: sticky;
inset-inline-start: 0;
z-index: 1;
background-color: var(--surface);
font-weight: var(--fw-semibold);
color: var(--text-strong);
white-space: nowrap;
/* Hairline that reads as the frozen-column edge */
box-shadow: inset calc(-1px * var(--flip)) 0 0 var(--border-decorative);
}
/* Numeric / code cells: LTR, isolated, tabular. Applied to the | because
every value in the dilution guide is a Latin-numeral measurement that will
reverse inside Arabic without it. */
.data-table td.is-num,
.data-table th.is-num {
direction: ltr;
unicode-bidi: isolate;
text-align: start;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
white-space: nowrap;
}
/* In RTL the numeric column still reads LTR internally but should align to
the row's reading edge. `text-align: start` inside a `direction: ltr` cell
resolves to left, so re-anchor it. */
[dir="rtl"] .data-table td.is-num,
[dir="rtl"] .data-table th.is-num { text-align: end; }
.data-table .is-strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
.data-table__footnote {
padding: var(--space-4) var(--space-6);
font-size: var(--fs-xs);
color: var(--text-muted);
background-color: var(--surface-sunken);
border-block-start: 1px solid var(--border-decorative);
}
/* The scroll affordance, announced to screen readers too. */
.table-hint {
display: flex;
align-items: center;
gap: var(--space-2);
margin-block-end: var(--space-3);
font-size: var(--fs-xs);
color: var(--text-muted);
}
@media (min-width: 900px) {
.table-hint { display: none; }
}
/* ==========================================================================
STAT / FEATURE BAND
NOTE: HAZ MED has no approved statistics. Ship .stat--placeholder until the
client supplies verified figures. Do not invent numbers for this component.
========================================================================== */
.stat-band {
display: grid;
gap: var(--space-px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
background-color: var(--border-decorative);
border-block: 1px solid var(--border-decorative);
}
.stat {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-8) var(--space-6);
background-color: var(--surface);
text-align: start;
}
.stat__value {
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-display);
letter-spacing: var(--track-display);
color: var(--text-display-accent); /* 3.83 — permitted, this is display size */
font-variant-numeric: tabular-nums;
direction: ltr;
unicode-bidi: isolate;
}
[dir="rtl"] .stat__value { text-align: end; }
.stat__label {
font-size: var(--fs-sm);
color: var(--text-muted);
line-height: var(--lh-snug);
}
.stat--placeholder .stat__value {
color: var(--text-muted);
font-size: var(--fs-xl);
border: 1px dashed var(--border-card);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3);
align-self: start;
}
.band--ink .stat-band { background-color: var(--border-inverse); border-color: var(--border-inverse); }
.band--ink .stat { background-color: var(--ink); }
.band--ink .stat__value { color: var(--text-inverse-accent); }
.band--ink .stat__label { color: var(--text-inverse-muted); }
/* ------ Feature band (media + copy, alternating side) --------------------
`direction: rtl` on the wrapper flips the visual column order without
touching the source order — so the copy is still read first by a screen
reader. This is the correct use of a direction override: it is scoped to
layout and the inner content re-asserts its own direction.
------------------------------------------------------------------------- */
.feature-band {
display: grid;
gap: var(--grid-gap);
align-items: center;
}
@media (min-width: 900px) {
.feature-band {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(2rem, 1rem + 5vw, 5rem);
}
/* Media leading instead of trailing. Uses grid ordering, not direction, so
it is safe in both LTR and RTL. */
.feature-band--reverse .feature-band__media { order: -1; }
}
.feature-band__body { min-inline-size: 0; }
.feature-band__media { min-inline-size: 0; }
.feature-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-5);
}
/* Flow layout with a floated icon, not a flex row — see the .callout note.
A flex container promotes every text run between element children to its own
item, so `gap` lands mid-sentence and each run becomes a rigid column. The
copy decks mandate around Latin runs in Arabic prose, so any new string
would shatter this the moment it arrives. Float keeps the icon on the reading
edge in both directions and leaves the text in normal flow. */
.feature-list__item {
display: block;
}
.feature-list__item::after { content: ""; display: block; clear: both; }
.feature-list__icon {
float: inline-start;
margin-inline-end: var(--space-4);
display: grid;
place-items: center;
inline-size: 2.5rem;
block-size: 2.5rem;
border-radius: var(--radius-md);
background-color: var(--surface-tint);
color: var(--action-fill-active);
}
.band--ink .feature-list__icon {
background-color: rgba(9, 171, 197, 0.16);
color: var(--text-inverse-accent);
}
/* These are s inside a . Without display:block they render inline
and the title runs straight into the description with no space —
"Bilingual by designArabic and English across kit design". */
.feature-list__title {
display: block;
font-weight: var(--fw-semibold);
color: var(--text-strong);
margin-block-end: var(--space-1);
}
.band--ink .feature-list__title { color: var(--text-inverse); }
.feature-list__desc { display: block; color: var(--text-muted); font-size: var(--fs-base); line-height: var(--lh-body); }
.band--ink .feature-list__desc { color: var(--text-inverse-muted); }
/* ==========================================================================
CTA BAND
========================================================================== */
.cta-band {
background-color: var(--surface-inverse);
color: var(--text-inverse-muted);
padding-block: var(--band-y);
position: relative;
overflow: hidden;
}
/* Single restrained brand device: a large low-opacity diamond echoing the
logo mark, anchored to the trailing edge. Decorative, aria-hidden in
markup, and it does not read as a gradient. */
.cta-band::after {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-end: -6rem;
inline-size: 22rem;
block-size: 22rem;
border: 2px solid rgba(9, 171, 197, 0.18);
border-radius: 3rem;
transform: translateY(-50%) rotate(45deg);
pointer-events: none;
}
@media (max-width: 767px) { .cta-band::after { display: none; } }
.cta-band__inner {
position: relative;
z-index: 1;
display: grid;
gap: var(--space-8);
align-items: center;
}
@media (min-width: 900px) {
.cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-12); }
}
.cta-band__title { color: var(--text-inverse); margin-block-end: var(--space-3); }
.cta-band__lead { color: var(--text-inverse-muted); max-inline-size: var(--measure); }
/* ==========================================================================
QUOTE REQUEST FORM
Single column at every width. Every field is justified — this is the
primary conversion and each added field costs completion.
========================================================================== */
.form {
max-inline-size: 38rem;
}
.form--wide { max-inline-size: 52rem; }
.form__grid {
display: grid;
gap: var(--space-5);
}
@media (min-width: 640px) {
.form--wide .form__grid { grid-template-columns: 1fr 1fr; }
.form--wide .form__field--full { grid-column: 1 / -1; }
}
.form__fieldset + .form__fieldset { margin-block-start: var(--space-10); }
.form__legend {
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--text-strong);
padding-block-end: var(--space-2);
margin-block-end: var(--space-5);
border-block-end: 1px solid var(--border-decorative);
inline-size: 100%;
}
.form__field {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-inline-size: 0;
}
.form__label {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text-strong);
}
.form__req {
color: var(--signal-danger);
margin-inline-start: var(--space-1);
}
.form__hint {
font-size: var(--fs-xs);
color: var(--text-muted);
}
.form__control {
inline-size: 100%;
min-block-size: 3rem;
padding-block: var(--space-3);
padding-inline: var(--space-4);
/* border-control is 3.51:1 — WCAG 1.4.11 for a form boundary. Do not
downgrade this to a decorative grey. */
border: 1px solid var(--border-control);
border-radius: var(--radius-md);
background-color: var(--surface);
color: var(--text-strong);
/* 16px minimum prevents the iOS zoom-on-focus jump. */
font-size: max(1rem, var(--fs-base));
line-height: var(--lh-snug);
transition: border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.form__control::placeholder { color: var(--neutral-500); }
.form__control:hover { border-color: var(--neutral-600); }
.form__control:focus {
outline: none;
border-color: var(--action-edge);
box-shadow: 0 0 0 var(--focus-width) rgba(12, 143, 164, 0.28);
}
textarea.form__control {
min-block-size: 8rem;
resize: vertical;
line-height: var(--lh-body);
}
/* Native select chevron. background-position must be mirrored — the second
documented [dir] exception. */
select.form__control {
appearance: none;
padding-inline-end: var(--space-10);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23616B6B'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1.25rem;
background-position: right var(--space-4) center;
}
[dir="rtl"] select.form__control {
background-position: left var(--space-4) center;
}
/* Validation. State is never carried by colour alone: the field gets a
border change, an icon, and a text message tied by aria-describedby. */
.form__control[aria-invalid="true"] {
border-color: var(--signal-danger);
background-color: var(--signal-danger-bg);
}
.form__control[aria-invalid="true"]:focus {
box-shadow: 0 0 0 var(--focus-width) rgba(179, 38, 30, 0.24);
}
.form__error {
display: none;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--signal-danger);
}
.form__error[data-visible="true"] { display: flex; }
.form__error .icon { flex: none; margin-block-start: 0.12em; }
/* Checkbox / radio */
.form__check {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--fs-base);
line-height: var(--lh-snug);
cursor: pointer;
}
.form__check input {
flex: none;
inline-size: 1.25rem;
block-size: 1.25rem;
margin-block-start: 0.15em;
accent-color: var(--action-fill-active);
}
.form__checks {
display: grid;
gap: var(--space-3);
}
@media (min-width: 640px) {
.form__checks--2 { grid-template-columns: 1fr 1fr; }
}
.form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
margin-block-start: var(--space-8);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--border-decorative);
}
/* Honeypot. Off-screen, not display:none — some bots skip hidden fields. */
.form__trap {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* Submission status — a live region. */
.form__status {
margin-block-start: var(--space-5);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
font-size: var(--fs-base);
display: none;
}
.form__status[data-state="error"] {
display: block;
background-color: var(--signal-danger-bg);
border: 1px solid var(--signal-danger);
color: var(--signal-danger);
}
.form__status[data-state="ok"] {
display: block;
background-color: var(--signal-ok-bg);
border: 1px solid var(--signal-ok);
color: var(--signal-ok);
}
/* ==========================================================================
ACCORDION
Built on / so it opens, closes and is keyboard operable
with zero JavaScript.
========================================================================== */
.accordion {
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
overflow: hidden;
background-color: var(--surface);
}
.accordion__item + .accordion__item {
border-block-start: 1px solid var(--border-decorative);
}
.accordion__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-block-size: 3.5rem;
padding: var(--space-4) var(--space-6);
cursor: pointer;
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--text-strong);
list-style: none;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary:hover { background-color: var(--surface-tint); color: var(--text-accent); }
.accordion__summary .icon {
flex: none;
color: var(--action-fill-active);
transition: transform var(--dur-base) var(--ease-out);
}
.accordion__item[open] > .accordion__summary .icon { transform: rotate(180deg); }
.accordion__item[open] > .accordion__summary { color: var(--text-accent); }
.accordion__panel {
padding: 0 var(--space-6) var(--space-6);
color: var(--text-muted);
max-inline-size: var(--measure);
}
/* ==========================================================================
FOOTER
========================================================================== */
.site-footer {
background-color: var(--surface-inverse);
color: var(--text-inverse-muted);
padding-block: var(--band-y) var(--space-8);
font-size: var(--fs-sm);
}
.site-footer__grid {
display: grid;
gap: var(--space-10);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
@media (min-width: 900px) {
.site-footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--space-12); }
}
.site-footer__brand { max-inline-size: 24rem; }
.site-footer__logo {
block-size: 2.75rem;
inline-size: auto;
margin-block-end: var(--space-5);
}
.site-footer__tagline {
color: var(--text-inverse-muted);
line-height: var(--lh-relaxed);
}
.site-footer__heading {
font-size: var(--fs-2xs);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: var(--track-caps);
color: var(--text-inverse);
margin-block-end: var(--space-4);
}
.site-footer__heading:lang(ar) { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li + li { margin-block-start: var(--space-3); }
.site-footer__list a {
color: var(--text-inverse-muted);
text-decoration: none;
}
.site-footer__list a:hover { color: var(--text-inverse-accent); text-decoration: underline; }
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4) var(--space-8);
margin-block-start: var(--space-12);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--border-inverse);
font-size: var(--fs-xs);
color: var(--neutral-400);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-inline-start: auto; }
.site-footer__legal a { color: var(--neutral-400); text-decoration: none; }
.site-footer__legal a:hover { color: var(--text-inverse); }
/* Contact details are UNKNOWN. Every one ships in this wrapper until the
client supplies them; it is visually obvious and greppable. */
.placeholder-value {
display: inline-block;
padding-inline: var(--space-2);
/* Explicit muted token, NOT `opacity`. The stub previously inherited
--text-muted and then dimmed it to 85%, which computed to #798181 —
3.98:1 on white, a WCAG 1.4.3 AA failure caught by axe on the contact
panels. --text-muted is 5.49:1 on white, and dark bands redefine the
token, so this reads correctly on ink without a second rule. */
color: var(--text-muted);
border: 1px dashed currentColor;
border-radius: var(--radius-xs);
font-size: 0.94em;
unicode-bidi: isolate;
}
/* ==========================================================================
404
========================================================================== */
.error-page {
display: flex;
align-items: center;
min-block-size: 70vh;
padding-block: var(--band-y);
background-color: var(--surface-alt);
}
.error-page__inner {
max-inline-size: 40rem;
text-align: start;
}
.error-page__code {
display: block;
font-size: clamp(4rem, 2rem + 12vw, 8rem);
font-weight: var(--fw-semibold);
line-height: 1;
letter-spacing: var(--track-display);
/* cyan-200 tested at 1.24:1 on the alt band — it failed even the 3:1
large-text threshold. The error code is content, not ornament. */
color: var(--text-display-accent); /* cyan-600, 3.63:1 at 128px */
font-variant-numeric: tabular-nums;
direction: ltr;
unicode-bidi: isolate;
margin-block-end: var(--space-4);
}
[dir="rtl"] .error-page__code { text-align: end; }
.error-page__title { margin-block-end: var(--space-4); }
.error-page__lead { color: var(--text-muted); font-size: var(--fs-lg); margin-block-end: var(--space-8); }
.error-page__links {
list-style: none;
margin: var(--space-10) 0 0;
padding: var(--space-6) 0 0;
border-block-start: 1px solid var(--border-decorative);
display: grid;
gap: var(--space-3);
}
/* ==========================================================================
SECTOR / RELATED chips
========================================================================== */
.chip-grid {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
list-style: none;
margin: 0;
padding: 0;
}
.chip {
display: flex;
align-items: center;
gap: var(--space-3);
min-block-size: 3.5rem;
padding: var(--space-3) var(--space-5);
border: 1px solid var(--border-card);
border-radius: var(--radius-md);
background-color: var(--surface);
color: var(--text-strong);
font-size: var(--fs-base);
font-weight: var(--fw-medium);
line-height: var(--lh-snug);
text-decoration: none;
transition: border-color var(--dur-fast) var(--ease-out),
background-color var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--action-edge); background-color: var(--surface-tint); color: var(--text-accent); }
.chip .icon { color: var(--action-fill-active); flex: none; }
.band--ink .chip {
background-color: var(--ink-2);
border-color: var(--border-inverse);
color: var(--text-inverse);
}
.band--ink .chip:hover { border-color: var(--action-fill); background-color: rgba(9, 171, 197, 0.14); color: var(--text-inverse); }
.band--ink .chip .icon { color: var(--text-inverse-accent); }
/* ==========================================================================
WAVE 2A ADDITIONS
Components the page assembly required that the Wave 1 library did not have,
plus one repair. Added here rather than as page-level |