/* ==========================================================================
 Malina Nig Ltd, layout and components
 Anchor: SWISS. White ground, visible grid, 1px hairline rules, no shadows,
 no radii, left-aligned asymmetry. Green is the single deliberate accent.
 ========================================================================== */

/* --- layout primitives --------------------------------------------------- */
.container {
 width: 100%;
 max-width: 1400px;
 margin-inline: auto;
 padding-inline: var(--gutter);
}
.container--narrow { max-width: 800px; }
.container--mid { max-width: 1040px; }

/* Grid/flex items default to min-width:auto, so a wide child (a data table
 with a min-width) forces the whole track past the viewport. */
.grid > *.split > *.bento > *.section-head__body > *.cta-band__inner > * { min-width: 0; }

.section {
 padding-block: var(--space-section);
 border-top: 1px solid var(--rule);
}
.section--tight { padding-block: var(--space-block); }
.section--sunken { background: var(--off); }
.section--dark { background: var(--off); }

.grid { display: grid; gap: 1px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
/* The rule *is* the gutter. Swiss grid made visible. Rules are drawn by the
 cells themselves, not by a coloured container, so a row left short by the
 item count shows white rather than a grey block. */
.grid--2, .grid--3, .grid--4 {
 background: var(--white);
 border: 1px solid var(--rule);
}
.grid--2 > *, .grid--3 > *, .grid--4 > * { outline: 1px solid var(--rule); }

/* --- the visible grid ---------------------------------------------------- */
.texture-grid::before {
 content: "";
 position: absolute;
 inset: 0;
 background-image: linear-gradient(to right, rgba(17, 17, 17, 0.07) 1px, transparent 1px);
 background-size: 96px 100%;
 pointer-events: none;
}
/* Swiss breaks on grain, neutralised wherever it is still requested */
.texture-grain::after { content: none; }

/* --- section head -------------------------------------------------------- */
.section-head { display: grid; gap: 1.35rem; margin-bottom: var(--space-block); }
.section-head__index {
 display: flex;
 align-items: center;
 gap: 1.25rem;
 color: var(--accent-ink);
}
.section-head__index::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.section-head__body { display: grid; gap: 1.5rem 4rem; align-items: start; }
@media (min-width: 900px) {
 .section-head__body { grid-template-columns: 1.1fr 1fr; }
 .section-head--stack .section-head__body { grid-template-columns: minmax(0, 780px); }
}
.section-head h2 { margin: 0; }

/* --- buttons ------------------------------------------------------------- */
.btn {
 --btn-bg: transparent;
 --btn-fg: var(--ink);
 --btn-bd: var(--rule-black);
 position: relative;
 display: inline-flex;
 align-items: center;
 gap: 0.7rem;
 padding: 0.85rem 1.35rem;
 background: var(--btn-bg);
 color: var(--btn-fg);
 border: 1px solid var(--btn-bd);
 font-family: var(--font-display);
 font-size: var(--text-sm);
 font-weight: 700;
 letter-spacing: 0.02em;
 line-height: 1.2;
 text-decoration: none;
 text-transform: uppercase;
 cursor: pointer;
 overflow: hidden;
 transition: color var(--dur) var(--spring),
 border-color var(--dur) var(--spring),
 transform var(--dur-fast) var(--spring);
}
/* the accent wipes in, transform only, never a layout property */
.btn::before {
 content: "";
 position: absolute;
 inset: 0;
 background: var(--accent);
 transform: scaleX(0);
 transform-origin: left;
 transition: transform var(--dur) var(--spring);
}
.btn span.btn svg { position: relative; z-index: 1; }
.btn svg { flex: none; transition: transform var(--dur) var(--spring); }
.btn:hover { color: var(--ink); border-color: var(--accent); }
.btn:hover::before { transform: scaleX(1); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

.btn--accent { --btn-bg: var(--ink); --btn-bd: var(--ink); --btn-fg: var(--white); }
.btn--accent:hover { color: var(--ink); border-color: var(--accent); }

.btn--ghost, .btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--rule-strong); }

.btn-row { display: flex; flex-wrap: wrap; gap: 1px; }

.link-arrow {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 font-size: var(--text-sm);
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: var(--ink);
 text-decoration: none;
 padding-bottom: 3px;
 border-bottom: 1px solid var(--rule-black);
 transition: color var(--dur) var(--spring), border-color var(--dur) var(--spring);
}
.link-arrow svg { transition: transform var(--dur) var(--spring); }
.link-arrow:hover { color: var(--accent-ink); border-color: var(--accent); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ==========================================================================
 HEADER
 Two states. Over the masthead artwork it is transparent, so the image runs
 edge to edge and the bar reads as part of the picture. Once the page scrolls
 past the masthead it becomes frosted white with a hairline.
 ========================================================================== */
.site-header {
 position: fixed;
 inset: 0 0 auto;
 z-index: 100;
 height: var(--header-h);
 display: flex;
 align-items: center;
 background: transparent;
 border-bottom: 1px solid transparent;
 transition: background-color var(--dur) var(--spring),
 border-color var(--dur) var(--spring),
 backdrop-filter var(--dur) var(--spring);
}
.site-header .container {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1.5rem;
}
.site-header.is-solid {
 background: rgba(255, 255, 255, 0.86);
 border-bottom-color: var(--rule);
}
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
 .site-header.is-solid {
 -webkit-backdrop-filter: blur(18px) saturate(160%);
 backdrop-filter: blur(18px) saturate(160%);
 }
}

.brand {
 position: relative;
 display: inline-flex;
 align-items: center;
 gap: 0.7rem;
 text-decoration: none;
 flex: none;
}
.brand img { width: 34px; height: 34px; }
/* The reversed mark holds the layout slot; the positive one is stacked exactly
 over it and cross-faded, so switching states never reflows the lockup. */
.brand__mark { transition: opacity var(--dur) var(--spring); }
.brand__mark--positive {
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
 opacity: 0;
}
.site-header.is-solid .brand__mark--positive { opacity: 1; }
.site-header.is-solid .brand__mark--reversed { opacity: 0; }

.brand__text { display: grid; gap: 2px; }
.brand__name {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 1.0625rem;
 letter-spacing: 0.2em;
 line-height: 1;
 color: var(--on-image);
 transition: color var(--dur) var(--spring);
}
.brand__tag {
 font-size: 0.5625rem;
 letter-spacing: 0.19em;
 text-transform: uppercase;
 color: var(--on-image-muted);
 transition: color var(--dur) var(--spring);
}
.site-header.is-solid .brand__name { color: var(--ink); }
.site-header.is-solid .brand__tag { color: var(--ink-muted); }

.nav { display: none; align-items: center; }
@media (min-width: 1160px) { .nav { display: flex; } }

.nav__link {
 position: relative;
 padding: 0.5rem 0.9rem;
 font-size: var(--text-mono);
 font-weight: 500;
 letter-spacing: 0.13em;
 text-transform: uppercase;
 color: var(--on-image-2);
 text-decoration: none;
 transition: color var(--dur) var(--spring);
}
.nav__link::after {
 content: "";
 position: absolute;
 left: 0.9rem; right: 0.9rem; bottom: 0.1rem;
 height: 2px;
 background: var(--accent-bright);
 transform: scaleX(0);
 transform-origin: left;
 transition: transform var(--dur) var(--spring), background-color var(--dur) var(--spring);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--on-image); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

.site-header.is-solid .nav__link { color: var(--ink-muted); }
.site-header.is-solid .nav__link:hover, .site-header.is-solid .nav__link[aria-current="page"] { color: var(--ink); }
.site-header.is-solid .nav__link::after { background: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.header-actions .btn { padding: 0.6rem 1rem; font-size: var(--text-micro); }
.header-actions .btn--desktop { display: none; }
@media (min-width: 1160px) { .header-actions .btn--desktop { display: inline-flex; } }
/* the primary action stays green in both header states, it reads on the
 artwork and on white, and takes black type either way (6.18:1) */
.header-actions .btn--accent { --btn-bg: var(--accent); --btn-bd: var(--accent); --btn-fg: var(--ink); }
.header-actions .btn--accent::before { background: var(--ink); }
.header-actions .btn--accent:hover { color: var(--white); border-color: var(--ink); }

.nav-toggle {
 display: inline-flex;
 flex-direction: column;
 justify-content: center;
 gap: 5px;
 width: 42px; height: 42px;
 padding: 0 10px;
 background: transparent;
 border: 1px solid var(--glass-edge);
 cursor: pointer;
 transition: border-color var(--dur) var(--spring), background-color var(--dur) var(--spring);
}
@media (min-width: 1160px) { .nav-toggle { display: none; } }
.nav-toggle:hover { border-color: var(--accent-bright); }
.nav-toggle span {
 height: 1.5px;
 background: var(--on-image);
 transition: transform var(--dur) var(--spring), opacity var(--dur-fast) var(--spring),
 background-color var(--dur) var(--spring);
}
.site-header.is-solid .nav-toggle { border-color: var(--rule-black); }
.site-header.is-solid .nav-toggle:hover { border-color: var(--accent); }
.site-header.is-solid .nav-toggle span { background: var(--ink); }
/* while the drawer is open the bar is dark regardless of scroll position */
.site-header:has(.nav-toggle[aria-expanded="true"]) { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
.site-header:has(.nav-toggle[aria-expanded="true"]) .nav-toggle span { background: var(--on-image); }
.site-header:has(.nav-toggle[aria-expanded="true"]) .brand__name { color: var(--on-image); }
.site-header:has(.nav-toggle[aria-expanded="true"]) .brand__tag { color: var(--on-image-muted); }
.site-header:has(.nav-toggle[aria-expanded="true"]) .brand__mark--positive { opacity: 0; }
.site-header:has(.nav-toggle[aria-expanded="true"]) .brand__mark--reversed { opacity: 1; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- mobile drawer, a dark glass sheet over the masthead ---------------- */
.drawer {
 position: fixed;
 inset: 0;
 z-index: 99;
 padding: calc(var(--header-h) + clamp(1.5rem, 5vw, 2.5rem)) var(--gutter) 3rem;
 overflow-y: auto;
 background-color: rgba(3, 18, 9, 0.94);
 background-image: url("/assets/img/hero-glass-960.jpg");
 background-size: cover;
 background-position: 62% center;
 background-blend-mode: multiply;
 opacity: 0;
 visibility: hidden;
 transform: translateY(-8px);
 transition: opacity var(--dur) var(--spring), transform var(--dur) var(--spring), visibility var(--dur);
}
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
 .drawer { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1160px) { .drawer { display: none; } }

.drawer__nav { display: grid; border-top: 1px solid var(--glass-edge-soft); }
.drawer__link {
 display: flex;
 align-items: baseline;
 gap: 1.25rem;
 padding: 1.2rem 0;
 border-bottom: 1px solid var(--glass-edge-soft);
 font-family: var(--font-display);
 font-size: 1.5rem;
 font-weight: 700;
 letter-spacing: -0.03em;
 color: var(--on-image);
 text-decoration: none;
 /* each row settles in turn once the sheet opens */
 opacity: 0;
 transform: translateY(10px);
 transition: color var(--dur) var(--spring), opacity var(--dur) var(--spring),
 transform var(--dur) var(--spring-bounce);
}
.drawer.is-open .drawer__link { opacity: 1; transform: none; }
.drawer.is-open .drawer__link:nth-child(1) { transition-delay: 40ms; }
.drawer.is-open .drawer__link:nth-child(2) { transition-delay: 80ms; }
.drawer.is-open .drawer__link:nth-child(3) { transition-delay: 120ms; }
.drawer.is-open .drawer__link:nth-child(4) { transition-delay: 160ms; }
.drawer.is-open .drawer__link:nth-child(5) { transition-delay: 200ms; }
.drawer.is-open .drawer__link:nth-child(6) { transition-delay: 240ms; }
.drawer.is-open .drawer__link:nth-child(7) { transition-delay: 280ms; }
.drawer__link:hover { color: var(--accent-bright); }
.drawer__link span { font-size: var(--text-mono); color: var(--accent-bright); letter-spacing: 0.12em; font-weight: 500; }
/* the last nav row already supplies a rule, a second one here reads as an
 empty menu item */
.drawer__foot {
 margin-top: 2.75rem;
 display: grid;
 gap: 1.25rem;
 justify-items: start;
}
.drawer__foot p { color: var(--on-image-muted); }
.drawer__foot a:not(.btn) { color: var(--accent-bright); }
.drawer__foot .btn { --btn-bg: var(--accent); --btn-bd: var(--accent); --btn-fg: var(--ink); }
.drawer__foot .btn::before { background: var(--on-image); }
.drawer__foot .btn:hover { color: var(--ink); border-color: var(--on-image); }
@media (prefers-reduced-motion: reduce) {
 .drawer__link { opacity: 1; transform: none; }
}

/* ==========================================================================
 THE MASTHEAD FIELD
 Every page opens on the same green glass image, scrimmed so type stays
 legible, then the content runs white and the page closes on black glass.
 The scrim is what makes white type safe over a photographic ground, it is
 not decoration and must not be softened.
 ========================================================================== */
.hero, .page-hero {
 position: relative;
 isolation: isolate;
 background-color: var(--accent-deep);
 background-image: image-set(
 url("/assets/img/hero-glass-1920.jpg") 1x,
 url("/assets/img/hero-glass-1920.jpg") 2x
 );
 background-size: cover;
 background-position: 62% center;
 overflow: hidden;
}
@media (max-width: 720px) {
 .hero, .page-hero { background-image: url("/assets/img/hero-glass-960.jpg"); }
}
/* the scrim, guarantees the white type below clears AA over the artwork */
.hero::before, .page-hero::before {
 content: "";
 position: absolute;
 inset: 0;
 z-index: 0;
 /* Measured, not estimated: text sits across nearly the full width, so the
 scrim never drops below 0.80. At 0.80 over a pure-white highlight in the
 artwork, white type still measures ~10.6:1. */
 background:
 linear-gradient(100deg,
 rgba(3, 18, 9, 0.94) 0%,
 rgba(3, 18, 9, 0.90) 45%,
 rgba(3, 18, 9, 0.84) 75%,
 rgba(3, 18, 9, 0.80) 100%),
 linear-gradient(to bottom, rgba(3, 18, 9, 0.5) 0%, transparent 22%);
 pointer-events: none;
}
.hero > *.page-hero > * { position: relative; z-index: 1; }

.hero h1.page-hero h1.hero p.page-hero p { color: var(--on-image); }
/* inline links in the masthead must not inherit the dark-on-white link colour, on the image band that measures 2.5:1 */
.hero p a:not(.btn), .page-hero p a:not(.btn) { color: var(--accent-bright); text-underline-offset: 0.22em; }
.hero p a:not(.btn):hover, .page-hero p a:not(.btn):hover { color: var(--on-image); }

/* buttons on the image band: solid accent, or glass */
.hero .btn, .page-hero .btn { --btn-fg: var(--on-image); --btn-bd: var(--glass-edge); }
.hero .btn::before, .page-hero .btn::before { background: var(--on-image); }
.hero .btn:hover, .page-hero .btn:hover { color: var(--ink); border-color: var(--on-image); }
/* white on the deepened accent is only 3.05:1, the fill takes black type */
.hero .btn--accent, .page-hero .btn--accent { --btn-bg: var(--accent); --btn-bd: var(--accent); --btn-fg: var(--ink); }
.hero .btn--accent::before, .page-hero .btn--accent::before { background: var(--on-image); }
.hero .btn--accent:hover, .page-hero .btn--accent:hover { color: var(--ink); border-color: var(--on-image); }

/* --- glass ---------------------------------------------------------------
 A frosted pane. Only meaningful over imagery; the fallback for browsers
 without backdrop-filter is a flat translucent dark panel, which still
 keeps every contrast pairing valid. */
.glass {
 background: var(--glass-fill);
 border: 1px solid var(--glass-edge-soft);
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
 .glass {
 -webkit-backdrop-filter: var(--glass-blur);
 backdrop-filter: var(--glass-blur);
 background: var(--glass-fill);
 }
}
@media (prefers-reduced-transparency: reduce) {
 .glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(3, 22, 11, 0.88); }
}

/* --- hero ---------------------------------------------------------------- */
.hero {
 position: relative;
 isolation: isolate;
 padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5.5rem));
 overflow: hidden;
}
.hero__glow { display: none; }
.hero .container { position: relative; z-index: 2; }

.hero__kicker {
 display: inline-flex;
 align-items: center;
 gap: 0.9rem;
 color: var(--accent-bright);
 margin-bottom: 2rem;
}
.hero__kicker::before { content: ""; width: 34px; height: 2px; background: var(--accent-bright); }

.hero__title {
 font-size: var(--text-display);
 color: var(--on-image);
 line-height: 0.98;
 letter-spacing: -0.05em;
 font-weight: 700;
 max-width: 17ch;
 margin: 0 0 2.25rem;
}
.hero__title em { font-style: normal; color: var(--accent-bright); }

.hero__body { display: grid; gap: 2.5rem 4rem; align-items: end; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 940px) { .hero__body { grid-template-columns: 1.35fr 1fr; } }
.hero__lede { color: var(--on-image-2); font-size: var(--text-lead); max-width: 44ch; }
.hero__aside { display: grid; gap: 1.5rem; }

/* --- metric strip -------------------------------------------------------- */
/* the strip is a frosted pane floating on the artwork */
.metrics {
 position: relative;
 z-index: 2;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
 margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.metric {
 padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2vw, 2rem);
 border-right: 1px solid var(--glass-edge-soft);
}
.metric:last-child { border-right: 0; }
@media (max-width: 640px) {
 .metric { border-right: 0; border-bottom: 1px solid var(--glass-edge-soft); }
 .metric:last-child { border-bottom: 0; }
}
.metric__value {
 font-family: var(--font-display);
 font-size: var(--text-stat);
 font-weight: 700;
 line-height: 1;
 letter-spacing: -0.055em;
 color: var(--on-image);
 margin-bottom: 0.75rem;
 display: flex;
 align-items: baseline;
}
.metric__value sub {
 font-size: 0.3em;
 vertical-align: baseline;
 bottom: 0;
 color: var(--accent-bright);
 letter-spacing: 0.12em;
 margin-left: 0.4em;
 text-transform: uppercase;
 font-weight: 700;
}
.metric__label { color: var(--on-image-2); font-size: var(--text-sm); line-height: 1.55; max-width: 28ch; }

/* motion number, digit strips roll into place */
.motion-number { display: inline-flex; overflow: hidden; line-height: 1; }
.motion-number__col { display: inline-block; overflow: hidden; height: 1em; }
.motion-number__strip { display: flex; flex-direction: column; transform: translateY(0); will-change: transform; }
.motion-number__strip > span { height: 1em; line-height: 1; }
.motion-number__static { display: inline-block; }

/* --- page hero ----------------------------------------------------------- */
.page-hero {
 position: relative;
 isolation: isolate;
 overflow: hidden;
 padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 4.5rem));
 padding-bottom: clamp(2.75rem, 5vw, 4.5rem);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { max-width: 20ch; margin-bottom: 1.5rem; color: var(--on-image); }
.page-hero p { color: var(--on-image-2); font-size: var(--text-lead); max-width: 58ch; }
.page-hero__kicker { color: var(--accent-bright); margin-bottom: 1.5rem; display: block; }

.breadcrumb {
 display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
 margin-bottom: 2rem;
 color: var(--on-image-muted);
}
.breadcrumb a { color: var(--on-image-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--on-image); }
.breadcrumb span[aria-hidden] { color: rgba(255, 255, 255, 0.4); }

/* --- cards --------------------------------------------------------------- */
.card {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 0.9rem;
 padding: clamp(1.5rem, 2.4vw, 2.25rem);
 background: var(--white);
 transition: background-color var(--dur) var(--spring);
}
.grid--2 > .card, .grid--3 > .card, .grid--4 > .card { border: 0; }
.card::before {
 content: "";
 position: absolute;
 left: 0; top: 0; bottom: 0;
 width: 3px;
 background: var(--accent);
 transform: scaleY(0);
 transform-origin: top;
 transition: transform var(--dur-slow) var(--spring);
}
.card:hover { background: var(--off); }
.card:hover::before { transform: scaleY(1); }
.card h3.card h4 { margin: 0; }
.card p { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
.card__index { color: var(--accent-ink); }
.card__icon {
 width: 38px; height: 38px;
 display: grid;
 place-items: center;
 border: 1px solid var(--rule-black);
 color: var(--ink);
 margin-bottom: 0.4rem;
}
.card--dark { background: var(--white); }

.card-link { text-decoration: none; color: inherit; }

/* --- pillar bento -------------------------------------------------------- */
.bento { display: grid; gap: 1px; background: var(--white); border: 1px solid var(--rule); }
.bento > * { outline: 1px solid var(--rule); }
@media (min-width: 780px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .bento { grid-template-columns: repeat(4, 1fr); } }

.pillar {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 0.8rem;
 padding: clamp(1.75rem, 2.6vw, 2.5rem);
 background: var(--white);
 text-decoration: none;
 color: inherit;
 min-height: 270px;
 transition: background-color var(--dur) var(--spring);
}
.pillar::after {
 content: "";
 position: absolute;
 inset: auto 0 0 0;
 height: 3px;
 background: var(--accent);
 transform: scaleX(0);
 transform-origin: left;
 transition: transform var(--dur-slow) var(--spring);
}
.pillar:hover { background: var(--off); }
.pillar:hover::after { transform: scaleX(1); }
.pillar__num { color: var(--accent-ink); }
.pillar h3 { margin: 0.5rem 0 0; }
.pillar p { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
.pillar__foot {
 margin-top: auto; padding-top: 1.5rem;
 display: flex; align-items: center; gap: 0.5rem;
 font-size: var(--text-micro); font-weight: 700;
 letter-spacing: 0.13em; text-transform: uppercase;
 color: var(--ink);
}
.pillar__foot svg { transition: transform var(--dur) var(--spring); }
.pillar:hover .pillar__foot svg { transform: translateX(5px); }

/* --- split --------------------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.split--top { align-items: start; }
@media (min-width: 900px) {
 .split { grid-template-columns: 1fr 1fr; }
 .split--reverse .split__media { order: -1; }
}
.split__media {
 position: relative;
 overflow: hidden;
 background: var(--off);
 border: 1px solid var(--rule);
 min-height: 320px;
 isolation: isolate;
}
/* image media inside a split, the artwork carries its own frame */
.split__media--image {
 margin: 0;
 border: 1px solid var(--rule);
 background: var(--accent-deep);
 min-height: 0;
 display: grid;
}
.split__media--image img { width: 100%; height: auto; display: block; }
.split__media--image figcaption.schematic-figure figcaption {
 padding: 0.9rem 1.15rem;
 border-top: 1px solid var(--rule);
 background: var(--white);
 color: var(--ink-muted);
 font-size: var(--text-micro);
 letter-spacing: 0.05em;
}
.split__media--image figcaption { background: rgba(255, 255, 255, 0.06); color: var(--on-image-muted); border-top-color: var(--glass-edge-soft); }

.schematic-figure {
 margin: 0;
 border: 1px solid var(--rule);
 background: var(--white);
}
.schematic { width: 100%; height: auto; display: block; padding: clamp(1rem, 2vw, 2rem); }
.flow-line { stroke-dasharray: 9 11; animation: flow 2.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -40; } }

/* ==========================================================================
 THE CONDITION RAIL
 Published ASTM / ISO limit bands drawn to scale. Zones are greyscale; the
 single accent marks the normal limit and nothing else. No readings plotted.
 ========================================================================== */
.rail { border: 1px solid var(--rule-black); background: var(--white); }

.rail__head, .rail__row {
 display: grid;
 grid-template-columns: minmax(150px, 1.1fr) minmax(0, 3fr) minmax(88px, 0.7fr);
 align-items: center;
 gap: clamp(0.75rem, 2vw, 2rem);
 padding: 0 clamp(1rem, 2.4vw, 2rem);
}
.rail__head {
 height: 44px;
 border-bottom: 1px solid var(--rule-black);
 background: var(--off);
 color: var(--ink-muted);
}
.rail__row {
 min-height: 78px;
 border-bottom: 1px solid var(--rule);
 transition: background-color var(--dur) var(--spring);
}
.rail__row:last-child { border-bottom: 0; }
.rail__row:hover { background: var(--off); }

.rail__test { display: grid; gap: 3px; }
.rail__test strong { font-size: var(--text-sm); letter-spacing: -0.012em; color: var(--ink); }
.rail__test span { font-size: var(--text-micro); color: var(--ink-muted); letter-spacing: 0.1em; }

.rail__track {
 position: relative;
 height: 26px;
 border: 1px solid var(--rule);
 display: flex;
 overflow: hidden;
}
.rail__band {
 position: relative;
 transform: scaleX(0);
 transform-origin: left;
 transition: transform var(--dur-slow) var(--spring);
}
.is-visible .rail__band, .reveal-failsafe .rail__band { transform: scaleX(1); }
/* zones fill left to right, so the eye reads the scale in order */
.rail__band:nth-child(2) { transition-delay: 90ms; }
.rail__band:nth-child(3) { transition-delay: 180ms; }
.rail__band--normal { background: rgba(17, 17, 17, 0.17); }
.rail__band--caution { background: rgba(17, 17, 17, 0.07); }
.rail__band--alarm {
 background-image: repeating-linear-gradient(
 -45deg,
 rgba(17, 17, 17, 0.22) 0 1px,
 transparent 1px 6px
 );
}
/* the limit line, the only accent on the instrument */
.rail__limit {
 position: absolute;
 top: -1px; bottom: -1px;
 width: 3px;
 background: var(--accent);
 transform: scaleY(0);
 transition: transform var(--dur-slow) var(--spring) 220ms;
}
.is-visible .rail__limit, .reveal-failsafe .rail__limit { transform: scaleY(1); }

.rail__value { font-size: var(--text-sm); color: var(--ink); text-align: right; letter-spacing: -0.012em; font-weight: 700; }
.rail__legend {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem 2rem;
 padding: 1.1rem clamp(1rem, 2.4vw, 2rem);
 border-top: 1px solid var(--rule-black);
 background: var(--off);
 color: var(--ink-muted);
}
.rail__key { display: inline-flex; align-items: center; gap: 0.6rem; }
.rail__chip { width: 22px; height: 12px; border: 1px solid var(--rule); flex: none; }
.rail__chip--normal { background: rgba(17, 17, 17, 0.17); }
.rail__chip--caution { background: rgba(17, 17, 17, 0.07); }
.rail__chip--alarm { background-image: repeating-linear-gradient(-45deg, rgba(17,17,17,0.22) 0 1px, transparent 1px 6px); }
.rail__chip--limit { background: var(--accent); border-color: var(--accent); width: 4px; }

@media (max-width: 760px) {
 .rail__head { display: none; }
 .rail__row { grid-template-columns: 1fr; gap: 0.75rem; padding-block: 1.25rem; }
 .rail__value { text-align: left; }
}

/* --- data tables --------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule-black); background: var(--white); }
table.data { width: 100%; min-width: 600px; border-collapse: collapse; font-size: var(--text-sm); }
table.data caption {
 text-align: left;
 padding: 1rem 1.25rem;
 border-bottom: 1px solid var(--rule);
 color: var(--ink-muted);
 font-size: var(--text-micro);
 letter-spacing: 0.06em;
}
table.data th,
table.data td { padding: 0.8rem 1.25rem; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.data thead th {
 font-size: var(--text-mono);
 letter-spacing: 0.15em;
 text-transform: uppercase;
 color: var(--ink-muted);
 font-weight: 500;
 background: var(--off);
}
table.data tbody tr:last-child th,
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background-color var(--dur) var(--spring); }
table.data tbody tr:hover { background: var(--off); }
table.data th[scope="row"] { color: var(--ink); font-weight: 700; }

.pill {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0.2rem 0.6rem;
 font-size: var(--text-micro);
 letter-spacing: 0.1em;
 text-transform: uppercase;
 border: 1px solid var(--rule-strong);
 color: var(--ink-muted);
}
.pill--ok { color: var(--accent-ink); border-color: var(--accent); }

/* --- case cards ---------------------------------------------------------- */
.case {
 position: relative;
 display: flex;
 flex-direction: column;
 padding: clamp(1.75rem, 2.6vw, 2.5rem);
 background: var(--white);
 overflow: hidden;
 transition: background-color var(--dur) var(--spring);
}
.grid--3 > .case { border: 0; }
.case:hover { background: var(--off); }
.case__sector { color: var(--accent-ink); margin-bottom: 1.75rem; }
.case__figure {
 font-family: var(--font-display);
 font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
 font-weight: 700;
 line-height: 1;
 letter-spacing: -0.055em;
 color: var(--ink);
 margin-bottom: 0.6rem;
}
.case__figure small {
 font-size: 0.28em;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--ink-muted);
 display: block;
 margin-top: 0.9rem;
 font-weight: 500;
}
.case h3 { font-size: var(--text-h4); margin: 1.25rem 0 0.7rem; }
.case p { font-size: var(--text-sm); color: var(--ink-muted); }
.case__meta {
 margin-top: auto;
 padding-top: 1.5rem;
 border-top: 1px solid var(--rule);
 display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
 color: var(--ink-faint);
}

/* --- industries ---------------------------------------------------------- */
.industry-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
 gap: 1px;
 background: var(--white);
 border: 1px solid var(--rule);
}
.industry-grid .industry { outline: 1px solid var(--rule); }
.industry {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 padding: 1.35rem 1.5rem;
 background: var(--white);
 text-decoration: none;
 color: var(--ink-2);
 font-size: var(--text-sm);
 font-weight: 500;
 transition: background-color var(--dur) var(--spring), color var(--dur) var(--spring);
}
.industry svg { opacity: 0; transform: translateX(-6px); transition: opacity var(--dur) var(--spring), transform var(--dur) var(--spring); color: var(--accent-ink); }
.industry:hover { background: var(--ink); color: var(--white); }
.industry:hover svg { opacity: 1; transform: none; color: var(--accent); }

/* --- steps --------------------------------------------------------------- */
.steps { display: grid; }
.step {
 display: grid;
 gap: 0.75rem 2.5rem;
 padding: clamp(1.5rem, 2.6vw, 2.25rem) 0;
 border-top: 1px solid var(--rule);
 align-items: start;
}
@media (min-width: 820px) { .step { grid-template-columns: 130px 1fr 1.1fr; align-items: center; } }
.step:last-child { border-bottom: 1px solid var(--rule); }
.step__num { color: var(--accent-ink); }
.step h3 { margin: 0; font-size: var(--text-h4); }
.step p { margin: 0; font-size: var(--text-sm); color: var(--ink-muted); }

/* --- accordion ----------------------------------------------------------- */
.accordion { border-top: 1px solid var(--rule-black); }
.accordion details { border-bottom: 1px solid var(--rule); }
.accordion summary {
 display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
 padding: 1.35rem 0;
 cursor: pointer;
 list-style: none;
 font-family: var(--font-display);
 font-size: var(--text-h4);
 font-weight: 700;
 letter-spacing: -0.02em;
 color: var(--ink);
 transition: color var(--dur) var(--spring);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--accent-ink); }
.accordion summary::after {
 content: "+";
 flex: none;
 font-size: 1.375rem;
 font-weight: 400;
 color: var(--accent-ink);
 transition: transform var(--dur) var(--spring);
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion details > div { padding-bottom: 1.6rem; max-width: var(--measure); }
.accordion details > div p { font-size: var(--text-sm); }

/* --- quote --------------------------------------------------------------- */
.quote { border-left: 3px solid var(--accent); padding-left: clamp(1.25rem, 2.5vw, 2.25rem); }
.quote blockquote {
 margin: 0 0 1.25rem;
 font-family: var(--font-display);
 font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.75rem);
 line-height: 1.28;
 letter-spacing: -0.032em;
 color: var(--ink);
 font-weight: 700;
}
.quote figcaption { color: var(--ink-muted); font-size: var(--text-micro); letter-spacing: 0.11em; text-transform: uppercase; }

/* --- CTA band, the page closes on black glass --------------------------- */
.cta-band {
 position: relative;
 isolation: isolate;
 overflow: hidden;
 background-color: #04140A;
 background-image: url("/assets/img/seam-glass-1920.jpg");
 background-size: cover;
 background-position: center;
 border-top: 1px solid var(--rule-black);
 padding-block: clamp(4rem, 7vw, 6.5rem);
}
@media (max-width: 720px) { .cta-band { background-image: url("/assets/img/seam-glass-960.jpg"); } }
.cta-band::before {
 content: "";
 position: absolute;
 inset: 0;
 z-index: 0;
 background: linear-gradient(90deg, rgba(4, 20, 10, 0.93) 0%, rgba(4, 20, 10, 0.74) 55%, rgba(4, 20, 10, 0.55) 100%);
 pointer-events: none;
}
.cta-band .container { position: relative; z-index: 2; }
.cta-band__inner { display: grid; gap: 2.5rem 4rem; align-items: center; }
@media (min-width: 880px) { .cta-band__inner { grid-template-columns: 1.3fr 1fr; } }
.cta-band h2 { margin: 0 0 1rem; color: var(--white); }
.cta-band p { color: rgba(255, 255, 255, 0.78); margin: 0; }
.cta-band .mono { color: var(--accent) !important; }
.cta-band .btn { --btn-fg: var(--white); --btn-bd: rgba(255, 255, 255, 0.5); }
.cta-band .btn::before { background: var(--accent); }
.cta-band .btn:hover { color: var(--ink); border-color: var(--accent); }
.cta-band .btn--accent { --btn-bg: var(--accent); --btn-fg: var(--ink); --btn-bd: var(--accent); }
.cta-band .btn--accent::before { background: var(--white); }
.cta-band .btn--accent:hover { color: var(--ink); border-color: var(--white); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 1px; }

/* --- forms --------------------------------------------------------------- */
.form { display: grid; gap: 1.5rem; }
.form__row { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.5rem; }
.field label {
 font-size: var(--text-micro);
 font-weight: 700;
 letter-spacing: 0.13em;
 text-transform: uppercase;
 color: var(--ink-muted);
}
.field label .req { color: var(--accent-ink); }
.field input.field select.field textarea {
 width: 100%;
 padding: 0.85rem 1rem;
 background: var(--white);
 border: 1px solid var(--rule-strong);
 font-size: var(--text-sm);
 color: var(--ink);
 transition: border-color var(--dur) var(--spring), box-shadow var(--dur) var(--spring);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.field__hint { font-size: var(--text-micro); color: var(--ink-muted); }
.field__error { font-size: var(--text-micro); color: var(--accent-ink); display: none; letter-spacing: 0.06em; text-transform: uppercase; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--accent-ink); }
.field.has-error .field__error { display: block; }

.form__note { font-size: var(--text-micro); color: var(--ink-muted); }
.form__status {
 padding: 1rem 1.15rem;
 border: 1px solid var(--rule-black);
 border-left: 3px solid var(--accent);
 background: var(--accent-wash);
 color: var(--ink);
 font-size: var(--text-sm);
 display: none;
}
.form__status.is-visible { display: block; }
.form__status--error {
 border-left-color: var(--danger);
 background: var(--danger-wash);
}
.form__status--error strong { color: var(--danger); }

/* Spam trap. Off-canvas rather than display:none so it stays in the submitted
 form data; aria-hidden and tabindex="-1" keep it away from real visitors. */
.hp {
 position: absolute;
 left: -9999px;
 width: 1px;
 height: 1px;
 overflow: hidden;
}

/* The submit button while the request is in flight. */
.btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* --- info list ----------------------------------------------------------- */
.info-list { display: grid; border-top: 1px solid var(--rule-black); }
.info-list > div {
 display: grid;
 gap: 0.35rem 2.5rem;
 padding: 1.1rem 0;
 border-bottom: 1px solid var(--rule);
}
@media (min-width: 560px) { .info-list > div { grid-template-columns: 170px 1fr; align-items: baseline; } }
.info-list dt { color: var(--ink-muted); font-size: var(--text-mono); letter-spacing: 0.15em; text-transform: uppercase; }
.info-list dd { margin: 0; color: var(--ink); font-size: var(--text-sm); }

/* --- checklist ----------------------------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
/* Absolute marker, never a grid track, a grid item would capture inline
 children such as <strong> or <code> and throw them onto their own row. */
.checklist li {
 position: relative;
 padding-left: 1.9rem;
 margin: 0;
 font-size: var(--text-sm);
 color: var(--ink-2);
}
.checklist li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.6em;
 width: 12px;
 height: 2px;
 background: var(--accent);
}

/* --- brand page ---------------------------------------------------------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 1px; background: var(--white); border: 1px solid var(--rule); }
.swatch { background: var(--white); outline: 1px solid var(--rule); }
.swatch__chip { height: 104px; }
.swatch__meta { padding: 0.9rem 1rem; display: grid; gap: 0.25rem; }
.swatch__meta strong { font-size: var(--text-sm); }
.swatch__meta code { font-size: var(--text-micro); color: var(--ink-muted); background: none; padding: 0; }

.logo-tile { display: grid; place-items: center; padding: clamp(2rem, 4vw, 3.5rem); min-height: 240px; background: var(--white); }
.grid--3 > .logo-tile { border: 0; }
.logo-tile--light { background: var(--white); }
.logo-tile--dark { background: var(--ink); }
.logo-tile--accent { background: var(--accent); }
.logo-tile img { max-width: 240px; width: 100%; }

/* ==========================================================================
 FOOTER
 The page closes on one continuous dark block: the CTA band carries the glass
 artwork, the footer sits directly beneath it in flat deep green so the two
 read as a single close rather than two competing dark strips.
 ========================================================================== */
.site-footer {
 position: relative;
 background: var(--accent-deep);
 color: var(--on-image-muted);
 padding-top: clamp(3.5rem, 5.5vw, 5rem);
 font-size: var(--text-sm);
}
/* a single accent hairline marks the seam with the CTA band above */
.site-footer::before {
 content: "";
 position: absolute;
 inset: 0 0 auto;
 height: 2px;
 background: var(--accent);
}
.site-footer a { color: var(--on-image-muted); text-decoration: none; transition: color var(--dur) var(--spring); }
.site-footer a:hover { color: var(--accent-bright); }

.footer-top { display: grid; gap: 2.75rem 3rem; padding-bottom: 3.25rem; }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.5fr repeat(3, 1fr); } }
.footer-brand { display: grid; gap: 1.5rem; align-content: start; }
.footer-brand .brand__name { color: var(--on-image); }
.footer-brand .brand__tag { color: var(--on-image-muted); }
.footer-brand p { font-size: var(--text-sm); max-width: 36ch; color: var(--on-image-muted); }

.footer-col h3 {
 font-size: var(--text-mono);
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--accent-bright);
 font-weight: 700;
 margin-bottom: 1.35rem;
 padding-bottom: 0.85rem;
 border-bottom: 1px solid var(--glass-edge-soft);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.footer-col li { margin: 0; }
/* links shift on hover so the column reads as interactive, not as a list */
.footer-col a { display: inline-block; transition: color var(--dur) var(--spring), transform var(--dur) var(--spring); }
.footer-col a:hover { transform: translateX(4px); }

.footer-bottom {
 display: flex; flex-wrap: wrap; gap: 1rem 2rem;
 justify-content: space-between; align-items: center;
 padding-block: 1.6rem;
 border-top: 1px solid var(--glass-edge-soft);
 font-size: var(--text-micro);
 letter-spacing: 0.05em;
 color: var(--on-image-muted);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.social { display: flex; gap: 0.5rem; }
.social a {
 width: 40px; height: 40px;
 display: grid; place-items: center;
 border: 1px solid var(--glass-edge-soft);
 color: var(--on-image-2);
 transition: border-color var(--dur) var(--spring), color var(--dur) var(--spring),
 background-color var(--dur) var(--spring);
}
.social a:hover {
 border-color: var(--accent-bright);
 color: var(--accent-bright);
 background: rgba(38, 206, 81, 0.1);
}

/* --- reveal -------------------------------------------------------------- */
.js [data-reveal] {
 opacity: 0;
 transform: translateY(14px);
 transition: opacity var(--dur-slow) var(--spring), transform var(--dur-slow) var(--spring);
}
.js [data-reveal].is-visible, .reveal-failsafe [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
 .js [data-reveal] { opacity: 1; transform: none; }
}

/* --- misc ---------------------------------------------------------------- */
code {
 font-family: var(--font-display);
 font-size: 0.92em;
 padding: 0.1em 0.35em;
 background: var(--off-2);
 color: var(--ink);
}

.eyebrow-note {
 padding: 1.15rem 1.35rem;
 border: 1px solid var(--rule);
 border-left: 3px solid var(--accent);
 background: var(--off);
 font-size: var(--text-sm);
 color: var(--ink-muted);
}
.eyebrow-note strong { color: var(--ink); }

.stack { display: grid; gap: 1.5rem; align-content: start; }
.stack--sm { gap: 0.75rem; }
.stack--lg { gap: 2.75rem; }
.text-center { text-align: center; }
.mt-block { margin-top: var(--space-block); }

/* ==========================================================================
 Blog, technical notes
 Article typography is the one place this site needs a measure narrower than
 the grid. Everything else reuses the existing card, grid and section rules.
 ========================================================================== */

.container--reading { max-width: 46rem; }

/* --- index -------------------------------------------------------------- */

.card--link { text-decoration: none; color: inherit; }
.card--link:hover .card__title, .card--link:focus-visible .card__title { color: var(--accent-ink); }
.card--link h3 { transition: color var(--dur) var(--spring); }
.card--link:hover h3 { color: var(--accent-ink); }

.card__kicker, .card__meta {
 font-size: var(--text-micro);
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--ink-muted);
}
.card__meta { margin-top: auto; }

.chip-row {
 display: flex;
 flex-wrap: wrap;
 gap: 1px;
 margin-bottom: var(--space-block);
 border: 1px solid var(--rule);
}
.chip {
 flex: 0 0 auto;
 padding: 0.7rem 1.1rem;
 font-family: var(--font-mono);
 font-size: var(--text-micro);
 letter-spacing: 0.09em;
 text-transform: uppercase;
 color: var(--ink-2);
 background: var(--white);
 border: 0;
 outline: 1px solid var(--rule);
 cursor: pointer;
 transition: background-color var(--dur) var(--spring), color var(--dur) var(--spring);
}
.chip span { color: var(--ink-faint); margin-left: 0.4em; }
.chip:hover { background: var(--off); }
.chip.is-active { background: var(--ink); color: var(--white); }
.chip.is-active span { color: var(--on-dark-muted); }

/* --- the lead post ------------------------------------------------------ */

.post-lead {
 display: block;
 padding: clamp(1.75rem, 3.5vw, 3.25rem);
 border: 1px solid var(--rule);
 border-left: 3px solid var(--accent);
 text-decoration: none;
 color: inherit;
 background: var(--white);
 transition: background-color var(--dur) var(--spring);
}
.post-lead:hover { background: var(--off); }
.post-lead h2 {
 font-size: var(--text-h2);
 margin: 0.5rem 0 0.75rem;
 max-width: 22ch;
}
.post-lead__kicker, .post-lead__meta, .post-meta {
 font-family: var(--font-mono);
 font-size: var(--text-micro);
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--ink-muted);
}
.post-lead__meta { margin-top: 1.25rem; }

/* --- article ------------------------------------------------------------ */

.post-hero-image {
 width: 100%;
 height: auto;
 margin-bottom: var(--space-block);
 border: 1px solid var(--rule);
}

.post-toc {
 padding: 1.4rem 1.6rem;
 margin-bottom: var(--space-block);
 background: var(--off);
 border-left: 2px solid var(--accent);
}
.post-toc__label {
 font-family: var(--font-mono);
 font-size: var(--text-micro);
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--ink-muted);
 margin-bottom: 0.6rem;
}
.post-toc ol { margin: 0; padding-left: 1.1rem; }
.post-toc li { margin: 0.3rem 0; }
.post-toc a { color: var(--ink-2); text-decoration: none; }
.post-toc a:hover { color: var(--accent-ink); text-decoration: underline; }

/* Prose: the only place on the site where descendants are styled by element
 rather than by class, because the body comes from Markdown. */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
 font-size: var(--text-h3);
 margin-top: 2.4em;
 padding-top: 1.2rem;
 border-top: 1px solid var(--rule);
 scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.prose h3 {
 font-size: var(--text-h4);
 margin-top: 1.9em;
 scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.prose p, .prose li { color: var(--ink-2); }
.prose a { color: var(--accent-ink); text-underline-offset: 0.18em; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: 0.45em; }
.prose strong { color: var(--ink); }
.prose blockquote {
 padding: 0.2rem 0 0.2rem 1.4rem;
 border-left: 2px solid var(--accent);
 color: var(--ink);
 font-size: var(--text-lead);
}
.prose blockquote p { color: inherit; }
.prose code {
 font-family: var(--font-mono);
 font-size: 0.88em;
 padding: 0.12em 0.38em;
 background: var(--off-2);
}
.prose pre {
 padding: 1.2rem 1.4rem;
 overflow-x: auto;
 background: var(--ink);
 color: var(--on-dark);
}
.prose pre code { background: none; padding: 0; color: inherit; }
.prose img { width: 100%; height: auto; border: 1px solid var(--rule); }
.prose hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--rule); }
.prose .table-scroll { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose th, .prose td { padding: 0.65rem 0.9rem; text-align: left; border-bottom: 1px solid var(--rule); }
.prose th {
 font-family: var(--font-mono);
 font-size: var(--text-micro);
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--ink-muted);
 border-bottom-color: var(--rule-strong);
}

.post-foot {
 margin-top: var(--space-block);
 padding-top: 1.4rem;
 border-top: 1px solid var(--rule);
}

.section-kicker {
 font-size: var(--text-micro);
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--ink-muted);
 margin-bottom: 1.2rem;
}

.breadcrumb {
 font-family: var(--font-mono);
 font-size: var(--text-micro);
 letter-spacing: 0.08em;
 text-transform: uppercase;
 margin-bottom: 1.1rem;
}
.breadcrumb a { color: inherit; text-decoration: none; opacity: 0.75; }
.breadcrumb a:hover { opacity: 1; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
 .card--link, .post-lead, .chip { transition: none; }
}

/* --- embedded video ------------------------------------------------------ */

.post-video {
 margin: 0 0 var(--space-block);
 border: 1px solid var(--rule);
 background: var(--ink);
}
.post-video iframe {
 display: block;
 width: 100%;
 aspect-ratio: 16 / 9;
 height: auto;
 border: 0;
}

/* --- embedded video, held until asked for -------------------------------- */

.post-video__ask {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--off);
  aspect-ratio: 16 / 9;
  justify-content: center;
}
.post-video__lead {
  font-size: var(--text-lead);
  color: var(--ink);
  margin: 0;
}
.post-video__note,
.post-video__alt {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin: 0;
  max-width: 46ch;
}
.post-video__alt a { color: var(--accent-ink); }

/* --- cookie notice -------------------------------------------------------- */

.cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--white);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -8px 32px rgba(17, 17, 17, 0.1);
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--spring);
}
.cookie-notice.is-visible { transform: none; }

.cookie-notice__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.15rem var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  justify-content: space-between;
  flex-wrap: wrap;
}
.cookie-notice__text { flex: 1 1 32ch; }
.cookie-notice__text p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-2);
  max-width: 76ch;
}
.cookie-notice__more { margin-top: 0.35rem !important; }
.cookie-notice__more a { color: var(--accent-ink); }
.cookie-notice__actions {
  display: flex;
  gap: 0.6rem;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

@media (max-width: 620px) {
  .cookie-notice__actions { width: 100%; }
  .cookie-notice__actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-notice { transition: none; }
}

/* ==========================================================================
   Live chat
   ========================================================================== */

.chat { position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 95; }

.chat-launch {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.35rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(5, 46, 20, 0.22);
  transition: background-color var(--dur) var(--spring), transform var(--dur) var(--spring);
}
.chat-launch:hover { background: var(--accent-bright); transform: translateY(-1px); }
.chat.is-open .chat-launch { display: none; }

.chat-launch__badge {
  min-width: 1.35em;
  padding: 0.1em 0.35em;
  background: var(--ink);
  color: var(--white);
  font-size: 10px;
  text-align: center;
}

/* A class that sets display beats the browser rule for [hidden], so the panel
   has to opt back out explicitly or it sits open over the page on every load. */
.chat-panel[hidden] { display: none; }

.chat-panel {
  width: min(23rem, calc(100vw - 2 * var(--gutter)));
  max-height: min(34rem, calc(100vh - 2 * var(--gutter)));
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.22);
}

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--accent-deep);
  color: var(--on-dark);
}
/* a global strong{color:var(--ink)} would otherwise win here */
.chat-head strong { display: block; font-size: var(--text-sm); letter-spacing: 0.04em; color: inherit; }
.chat-head__tools { display: flex; gap: 0.4rem; }

.chat-status {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.chat-status--online { color: var(--accent-bright); }
.chat-status--closed { color: #FF9B8A; }

.chat-icon {
  padding: 0.3rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
}
.chat-icon:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.5); }

.chat-intro,
.chat-conversation { overflow-y: auto; }
.chat-intro { padding: 1rem; }

.chat-start label {
  display: block;
  margin: 0.85rem 0 0.3rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.chat-start input,
.chat-start select,
.chat-compose textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
}
.chat-start input:focus,
.chat-start select:focus,
.chat-compose textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.chat-start .btn { width: 100%; justify-content: center; margin-top: 1rem; }

.chat-phone { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0.4rem; }

.chat-lede { font-size: var(--text-sm); color: var(--ink-2); margin: 0 0 0.5rem; }
.chat-hint { font-size: 11px; line-height: 1.45; color: var(--ink-muted); margin: 0.35rem 0 0; }
.chat-hint--legal { margin-top: 0.7rem; }
.chat-hint a { color: var(--accent-ink); }
.chat-optional { text-transform: none; letter-spacing: 0; color: var(--ink-faint); }
.chat-error { font-size: 11px; color: #A6231C; margin: 0.3rem 0 0; }
.chat-error:empty { display: none; }

.chat-log {
  flex: 1 1 auto;
  min-height: 9rem;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.chat-msg { max-width: 85%; }
.chat-msg--visitor { align-self: flex-end; text-align: right; }
.chat-msg__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.2rem;
}
.chat-msg__body {
  padding: 0.55rem 0.75rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  background: var(--off);
  color: var(--ink-2);
  border-left: 2px solid var(--rule-strong);
  text-align: left;
}
.chat-msg--visitor .chat-msg__body {
  background: var(--accent-wash);
  border-left: 0;
  border-right: 2px solid var(--accent);
}
.chat-note {
  font-size: 11px;
  color: var(--ink-faint);
  text-align: center;
  font-style: italic;
}

.chat-compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--rule);
}
.chat-compose textarea { resize: none; }
.chat-foot { padding: 0 1rem 0.85rem; }
.chat-link {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.chat-link[disabled] { color: var(--ink-faint); cursor: default; }

.chat-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .chat { right: 0; bottom: 0; left: 0; }
  .chat-launch { width: 100%; justify-content: center; }
  .chat-panel { width: 100vw; max-height: 82vh; border-left: 0; border-right: 0; border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-launch { transition: none; }
}

/* --- back to top ---------------------------------------------------------
   Bottom-left, because the chat launcher owns the bottom-right and on a phone
   the chat bar runs the full width.
   ------------------------------------------------------------------------ */

.to-top[hidden] { display: none; }

.to-top {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  z-index: 94;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--spring), transform var(--dur) var(--spring),
              background-color var(--dur) var(--spring), color var(--dur) var(--spring);
}
.to-top.is-visible { opacity: 1; transform: none; }
.to-top:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 480px) {
  /* clear of the full-width chat bar */
  /* icon only, but never below the 44px minimum for a touch target */
  .to-top {
    bottom: calc(var(--gutter) + 3.4rem);
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .to-top span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity var(--dur-fast) linear; transform: none; }
  .to-top.is-visible { transform: none; }
}

/* ==========================================================================
   Homepage hero — requested layout
   Title on two lines, lede centred, metric strip on one row.
   ========================================================================== */

/* One column, so the headline has the full width to work in. Two lines at
   display size needs roughly 1100px; in the old 1.35fr/1.0fr split it only
   had 719px and broke to four. */
@media (min-width: 940px) {
  .hero__body { grid-template-columns: 1fr; gap: 2rem; }
}

.hero__title {
  /* sized so "Clean the oil. Clean the fuel." holds one line on a laptop */
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  max-width: none;
  margin-bottom: 1.75rem;
}

/* The second sentence is already wrapped in <em>; putting it on its own line
   fixes the break at the meaning rather than wherever the box happens to end. */
.hero__title em { display: block; }

/* Below about 600px the sentence cannot hold one line at a readable size, so
   even the lines out rather than leaving one word stranded. */
@media (max-width: 599px) {
  .hero__title { text-wrap: balance; }
}

.hero__lede {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}

.hero__aside { justify-items: center; }

/* Four metrics across, one row. auto-fit was collapsing them to two rows on
   anything narrower than about 1000px. */
@media (min-width: 720px) {
  .metrics { grid-template-columns: repeat(4, 1fr); }
  .metric__label { max-width: none; }
}

/* Below that, two up reads better than four squeezed. */
@media (max-width: 719px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .metrics { grid-template-columns: 1fr; }
}