/* ============================================================================
   FITCO ESTATE  ·  v2  "SAPPHIRE & CHALK"
   The single design system for the FITCO content estate.

   Replaces the per-page systems that had accumulated (industry-solutions,
   knowledge-system, fitco-record, fitco-signature, battery-lab). There are now
   three families, not five systems and not one per page:

       .fe--industry    Industry Solutions
       .fe--testing     Testing Solutions
       .fe--knowledge   Knowledge Centre, including ASTM and ISO

   All three share this foundation and differ only in accent temperature and
   section rhythm, so the estate reads as one site rather than three.

   ── COLOUR ───────────────────────────────────────────────────────────────
   Deep sapphire and cool chalk. The client chose blue after reviewing the
   alternatives. Blue is Instron territory, so differentiation is carried by the
   fixture-led structure rather than by hue: the ground is a deep sapphire well
   below their mid corporate blue, on a cool chalk paper.

   Declared as independent --fe-* tokens. No --p-* colour token is reassigned,
   so the homepage and any sheet still on PRAVAHA are untouched.

   ── LAYOUT ───────────────────────────────────────────────────────────────
   Full bleed. The previous systems capped content at 1180-1220px, so on a wide
   monitor rows sat in a narrow centre column with dead margin either side.
   Sections now run edge to edge and the measure is generous, with reading text
   still held to a sane line length by its own max-width rather than by the
   container.

   ── TYPE ─────────────────────────────────────────────────────────────────
   Manrope display, Inter text. Both already loaded by the theme.
   ========================================================================= */

.fitco-estate {
    /* Ground and paper */
    --fe-deep:     #10243F;
    --fe-deeper:   #0A1728;
    --fe-paper:    #F6F8FA;
    --fe-tint:     #E9EEF4;
    --fe-stage:    #FFFFFF;

    /* Ink */
    --fe-ink:      #121821;
    --fe-ink-2:    #333D49;
    --fe-muted:    #566372;

    /* Structure */
    --fe-line:     #DBE2EA;
    --fe-line-2:   #C2CDDA;

    /* Accent, three values so it is legible on every ground */
    --fe-accent:      #1F5FA8;
    --fe-accent-deep: #16497F;
    --fe-accent-lift: #8FBEEA;
    --fe-accent-wash: rgba(31, 95, 168, 0.08);

    /* On dark */
    --fe-ondeep:      rgba(246, 248, 250, 0.82);
    --fe-ondeep-dim:  rgba(246, 248, 250, 0.56);
    --fe-ondeep-line: rgba(246, 248, 250, 0.16);

    /* Measure. Wide by default; reading text is capped per component. */
    --fe-gutter: clamp(1.25rem, 5vw, 5.5rem);
    --fe-wide:   1640px;
    --fe-rhythm: clamp(3.5rem, 7vw, 7rem);

    --fe-lift: 0 1px 2px rgba(18, 24, 33, 0.05), 0 22px 48px -28px rgba(18, 24, 33, 0.30);

    background: var(--fe-paper);
    color: var(--fe-ink);
    text-align: left;
    font-family: var(--p-font-text);
    font-size: var(--p-text-md);
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
}

/* Family skins. Accent temperature shifts; everything else is shared. */
.fitco-estate.fe--industry { --fe-rhythm: clamp(3rem, 5vw, 5.5rem); }
.fitco-estate.fe--testing  { --fe-accent: #1C6A8C; --fe-accent-deep: #14526C; --fe-accent-lift: #85C4DD; --fe-accent-wash: rgba(28,106,140,.08); }
.fitco-estate.fe--knowledge{ --fe-accent: #3E5CA8; --fe-accent-deep: #2E4682; --fe-accent-lift: #A3B6E6; --fe-accent-wash: rgba(62,92,168,.08); --fe-rhythm: clamp(3rem, 6vw, 6rem); }

.fitco-estate *,
.fitco-estate *::before,
.fitco-estate *::after { box-sizing: border-box; }

/* Every block that carries reading copy states its own alignment, so a builder
   wrapper cannot centre it. .fe-row__meta opts back to the right deliberately. */
.fitco-estate :where(p, h1, h2, h3, h4, li, td, th, summary, figcaption, .fe-label, .fe-row, .fe-list__item) { text-align: left; }
.fitco-estate .fe-row__meta { text-align: right; }
@media (max-width: 1000px) { .fitco-estate .fe-row__meta { text-align: left; } }

.fitco-estate p { margin: 0 0 1.05em; }
.fitco-estate p:last-child { margin-bottom: 0; }
.fitco-estate :where(img, svg, video) { display: block; max-width: 100%; height: auto; }
.fitco-estate figure { margin: 0; }

.fitco-estate a { color: var(--fe-accent-deep); text-decoration: none; border-bottom: 1px solid var(--fe-accent-wash); }
.fitco-estate a:hover { border-bottom-color: var(--fe-accent); }
.fitco-estate a:focus-visible { outline: 2px solid var(--fe-accent); outline-offset: 3px; border-radius: 2px; }

/* --- Layout ---------------------------------------------------------------
   .fe-bleed paints edge to edge. .fe-wide holds the content at a generous
   measure. Reading columns cap themselves, so the grid can use the full width
   without the prose becoming unreadable. */

.fe-bleed { padding-block: var(--fe-rhythm); }
.fe-bleed--tint  { background: var(--fe-tint); }
.fe-bleed--deep  { background: var(--fe-deep); }
.fe-bleed--deeper{ background: var(--fe-deeper); }

.fe-wide { width: 100%; max-width: var(--fe-wide); margin-inline: auto; padding-inline: var(--fe-gutter); }


/* --- Escaping the WordPress wrapper ---------------------------------------
   WPBakery wraps page content in a padded, max-width row. Without these the
   .fe-bleed sections cannot reach the viewport edge and the tint bands render
   with white margins either side, which is exactly what the live page showed.
   Mirrors what industry-solutions.css already does for its own routes. */

body.fitco-estate-page { overflow-x: clip; }
body.fitco-estate-page .vc_row { margin-left: 0; margin-right: 0; }
body.fitco-estate-page .vc_column_container > .vc_column-inner { padding-left: 0; padding-right: 0; }
body.fitco-estate-page :where(.entry-content, .site-main, .content-area, article) { max-width: none; padding-left: 0; padding-right: 0; }

/* Last-resort bleed: if an ancestor still constrains width, break out of it. */
.fitco-estate .fe-bleed {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
}
.fitco-estate .fe-bleed > .fe-wide { margin-inline: auto; }

/* Every registered Estate route receives this body class, so its WordPress
   wrappers have already been released above. Avoid the 100vw fallback here:
   viewport units include the vertical scrollbar and can crop the right edge. */
body.fitco-estate-page .fitco-estate .fe-bleed {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* --- Type ----------------------------------------------------------------- */

.fe-label {
    display: block;
    width: fit-content;
    font-family: var(--p-font-display);
    font-size: var(--p-text-xs);
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fe-accent-deep);
    padding-bottom: var(--p-space-2);
    border-bottom: 1px solid var(--fe-accent);
    margin-bottom: var(--p-space-6);
}

.fitco-estate .fe-h1 {
    font-family: var(--p-font-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    line-height: 1.0;
    letter-spacing: -0.038em;
    margin: 0 0 var(--p-space-6);
    color: var(--fe-ink);
    max-width: 17ch;
    text-wrap: balance;
}

.fitco-estate .fe-h2 {
    font-family: var(--p-font-display);
    font-weight: 800;
    font-size: clamp(1.7rem, 3.1vw, 2.7rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 var(--p-space-4);
    color: var(--fe-ink);
    max-width: 24ch;
    text-wrap: balance;
}

/* Industry titles carry descriptive buying language rather than short method
   codes, so they need a calmer scale and a wider measure than standards pages. */
.fitco-estate.fe--industry .fe-h1 {
    font-size: clamp(2.1rem, 4vw, 3.6rem);
    line-height: 1.06;
    max-width: 21ch;
}
.fitco-estate.fe--industry .fe-h2 {
    font-size: clamp(1.55rem, 2.4vw, 2.25rem);
    line-height: 1.15;
    max-width: 30ch;
}

.fitco-estate .fe-h3 {
    font-family: var(--p-font-display);
    font-weight: 700;
    font-size: var(--p-text-lg);
    line-height: 1.3;
    letter-spacing: -0.014em;
    color: var(--fe-ink);
    margin: 0 0 var(--p-space-2);
}

.fe-lede  { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; max-width: 60ch; color: var(--fe-ink-2); }
.fe-prose { max-width: 68ch; color: var(--fe-ink-2); font-size: var(--p-text-lg); }
.fe-prose strong { color: var(--fe-ink); font-weight: 650; }


/* --- Masthead with the machine ---------------------------------------------
   The hero carries copy on the left and the machine on a white stage on the
   right. The stage matters: these renders are cut-outs on white or transparent,
   so dropping one straight onto the navy would show a hard box or a halo. A
   real white plate is how a product shot survives a dark ground. */

.fe-masthead__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 5vw, 5.5rem);
    align-items: center;
}

.fe-hero-machine {
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 3vw, 2.75rem);
    background: var(--fe-stage);
    border: 1px solid var(--fe-ondeep-line);
}
.fe-hero-machine img { width: 100%; max-width: 460px; height: auto; }
.fe-hero-machine figcaption {
    margin-top: var(--p-space-4);
    font-family: var(--p-font-display);
    font-size: var(--p-text-xs);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--fe-muted);
    text-align: center;
}

@media (max-width: 900px) {
    .fe-masthead__grid { grid-template-columns: minmax(0, 1fr); }
    .fe-hero-machine { order: 2; }
}

/* --- Masthead ------------------------------------------------------------- */

.fe-masthead { padding-block: clamp(4rem, 8vw, 8.5rem) clamp(3.5rem, 7vw, 7rem); background: var(--fe-deep); }
.fitco-estate.fe--industry .fe-masthead { padding-block: clamp(3.5rem, 6vw, 6rem) clamp(3rem, 5vw, 5rem); }
.fitco-estate .fe-masthead .fe-h1 { color: #FFFFFF; }
.fe-masthead .fe-lede { color: var(--fe-ondeep); }
.fe-masthead .fe-label { color: var(--fe-accent-lift); border-bottom-color: var(--fe-accent-lift); }
.fitco-estate .fe-masthead a:not(.fe-btn) { color: var(--fe-accent-lift); border-bottom-color: var(--fe-ondeep-line); }
.fitco-estate .fe-masthead a:not(.fe-btn):hover { border-bottom-color: var(--fe-accent-lift); }

.fe-actions { display: flex; flex-wrap: wrap; gap: var(--p-space-3); margin-top: var(--p-space-8); }

.fitco-estate .fe-btn {
    display: inline-flex;
    align-items: center;
    font-family: var(--p-font-display);
    font-weight: 800;
    font-size: var(--p-text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--p-space-4) var(--p-space-8);
    border: 1px solid var(--fe-paper);
    background: var(--fe-paper);
    color: var(--fe-deep);
    transition: background 180ms var(--p-ease), color 180ms var(--p-ease);
}
.fitco-estate .fe-btn:hover { background: transparent; color: var(--fe-paper); }
.fitco-estate .fe-btn--quiet { background: transparent; color: var(--fe-paper); border-color: var(--fe-ondeep-line); }
.fitco-estate .fe-btn--quiet:hover { background: transparent; border-color: var(--fe-paper); }
.fitco-estate .fe-btn--ink { background: var(--fe-accent-deep); border-color: var(--fe-accent-deep); color: #FFFFFF; }
.fitco-estate .fe-btn--ink:hover { background: var(--fe-deep); border-color: var(--fe-deep); color: #FFFFFF; }

/* --- Rows: the workhorse, and the thing that must use the full width ------ */

.fe-rows { margin-top: var(--p-space-10); border-top: 1px solid var(--fe-line-2); }

.fe-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.4fr) minmax(0, 0.9fr);
    gap: clamp(1rem, 2.6vw, 3.5rem);
    padding: var(--p-space-6) 0;
    border-bottom: 1px solid var(--fe-line);
    align-items: baseline;
}
.fe-row > p { margin: 0; color: var(--fe-ink-2); }
.fe-row__meta { font-family: var(--p-font-display); font-size: var(--p-text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fe-accent-deep); text-align: right; font-variant-numeric: tabular-nums; }

/* --- Chips ---------------------------------------------------------------- */

.fe-chips { display: flex; flex-wrap: wrap; gap: var(--p-space-2); margin-top: var(--p-space-5); }
.fe-chip {
    font-family: var(--p-font-display);
    font-size: var(--p-text-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    padding: 6px 11px;
    border: 1px solid var(--fe-line-2);
    background: var(--fe-stage);
    color: var(--fe-ink-2);
}
.fe-bleed--tint .fe-chip { background: var(--fe-paper); }
.fe-bleed--deep .fe-chip, .fe-bleed--deeper .fe-chip { background: transparent; border-color: var(--fe-ondeep-line); color: var(--fe-ondeep); }


/* --- Force curve beside the fixture ----------------------------------------
   The grip and what it produces, together. Each fixture is paired with the
   force-displacement curve its test actually yields: peel holds a long
   oscillating plateau, lap shear climbs to one peak, pull-off drops vertically,
   loop tack rises and releases early. An engineer reads the shape and knows the
   test, so this is information, not ornament.

   It also solves the asset problem honestly: the photos are 300px and cannot
   carry a page, but vector curves are sharp at any size and cost nothing. */

.fe-pair { display: grid; gap: var(--p-space-4); }

.fe-curve {
    display: block;
    width: 100%;
    height: auto;
    background: var(--fe-stage);
    border: 1px solid var(--fe-line);
    padding: var(--p-space-4);
}
.fe-curve__grid { stroke: var(--fe-line); stroke-width: 1; }
.fe-curve__axis { stroke: var(--fe-line-2); stroke-width: 1.5; }
.fe-curve__trace { fill: none; stroke: var(--fe-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fe-curve__tick { font-family: var(--p-font-display); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; fill: var(--fe-muted); }

/* Draw-on is enhancement only: without JS the trace ships already visible. */
.fitco-estate [data-draw="pending"] .fe-curve__trace { stroke-dasharray: var(--len,900); stroke-dashoffset: var(--len,900); }
.fitco-estate [data-draw="on"] .fe-curve__trace { stroke-dasharray: var(--len,900); stroke-dashoffset: 0; transition: stroke-dashoffset 1000ms cubic-bezier(.22,.8,.28,1); }

@media (prefers-reduced-motion: reduce) {
    .fitco-estate [data-draw] .fe-curve__trace { stroke-dasharray: none; stroke-dashoffset: 0; }
}


/* --- Machine figure --------------------------------------------------------
   Unlike the 300px fixture shots, the Testometric machine renders are large
   (X500 dual station is 1814x1401), so these can carry real size. Both are
   transparent or white-ground studio renders, which is why they sit on
   --fe-stage: a cut-out on a tinted surface reads as a mistake. */

.fe-machine {
    margin-top: var(--p-space-10);
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 4vw, 4rem);
    background: var(--fe-stage);
    border: 1px solid var(--fe-line);
    box-shadow: var(--fe-lift);
}
.fe-machine img { width: 100%; max-width: 900px; height: auto; }
.fe-machine--tall img { max-width: 560px; }

/* Small assets render at intrinsic size. Stretching a 353px studio photo across
   a 900px stage is how a page starts looking cheap, so this variant never
   upscales regardless of how much room the stage has. */
.fe-machine--native img { width: auto; max-width: 100%; }

/* Two or three renders sharing one row, for showing a range rather than a single
   machine. Reuses .fe-machine entirely; only the stage width changes. */
.fe-machines {
    margin-top: var(--p-space-10);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--p-space-5);
}
.fe-machines .fe-machine { margin-top: 0; padding: clamp(1.25rem, 2.5vw, 2.25rem); }
.fe-machines .fe-machine img { max-width: 320px; }
.fe-machines .fe-machine--native img { max-width: 100%; }

.fe-machine figcaption {
    margin-top: var(--p-space-5);
    font-family: var(--p-font-display);
    font-size: var(--p-text-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fe-muted);
    text-align: center;
}

/* --- Lists and link cards --------------------------------------------------
   The industries block used to be six bordered boxes. A name plus one sentence
   is a LIST, not a card, and boxing it produced the cramped hairline grid the
   client called out. .fe-list is a ruled multi-column list with no boxes at all.

   .fe-card survives only where the item is a LINK and therefore needs a target
   and an affordance. Even then the border is gone: a top rule in the accent
   plus real padding does the work, and the rule thickens on hover. */

.fe-list {
    margin-top: var(--p-space-10);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
    gap: 0 clamp(1.5rem, 4vw, 4rem);
    border-top: 1px solid var(--fe-line-2);
}
.fe-list__item { padding: var(--p-space-6) 0; border-bottom: 1px solid var(--fe-line); }
.fe-list__item > p { margin: 0; color: var(--fe-ink-2); font-size: var(--p-text-base); max-width: 46ch; }

.fe-grid { margin-top: var(--p-space-10); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: var(--p-space-6); }
.fe-grid--directory { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }

.fitco-estate a.fe-card {
    display: block;
    padding: var(--p-space-6) 0 var(--p-space-5);
    background: transparent;
    border: 0;
    border-top: 2px solid var(--fe-accent);
    box-shadow: none;
    transition: border-color 150ms var(--p-ease), background-color 150ms var(--p-ease);
}
.fitco-estate a.fe-card:hover { border-top-color: var(--fe-accent-deep); background: var(--fe-accent-wash); }
.fitco-estate a.fe-card > p { color: var(--fe-ink-2); margin: 0; font-size: var(--p-text-base); max-width: 42ch; }
.fitco-estate a.fe-card .fe-h3 { color: var(--fe-ink); }
.fitco-estate a.fe-card .fe-h3::after { content: " \2192"; color: var(--fe-accent); }


/* --- Fixture plates: the grips are the content ----------------------------
   The adhesion imagery is 137-282 x 300px product shots of grips and jigs.
   That is small, so the rule is: NEVER scale them up. Each sits at native size
   on a generous white stage, which reads as a considered product plate and
   stays perfectly crisp. The plate carries the visual weight, not the pixels.

   Plates alternate side down the page so the eye moves, and the grip is always
   paired with the test it runs. */

.fe-spec { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: center; }
.fe-spec--flip > .fe-plate { order: 2; }

/* The 360px column suits a cut-out fixture on a white stage. Installation
   photography is the strongest asset on the site and gets a real column. */
.fe-spec--photo { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); align-items: start; }

.fe-plate {
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 3vw, 2.75rem);
    background: var(--fe-stage);
    border: 1px solid var(--fe-line);
    box-shadow: var(--fe-lift);
    min-height: 340px;
}
.fe-plate img { max-height: 300px; width: auto; max-width: 100%; }

/* Installation photography, not a cut-out fixture. These are real machines in
   real labs, portrait format and large enough to carry weight, so they get the
   full column rather than the 300px cap a fixture plate uses. No white stage
   either: a photograph has its own background and does not need staging. */
.fe-plate--photo { background: transparent; border: 0; box-shadow: none; padding: 0; min-height: 0; }
.fe-plate--photo img { max-height: none; width: 100%; max-width: 520px; border: 1px solid var(--fe-line); }
.fe-plate--photo figcaption { margin-top: var(--p-space-4); }
.fe-plate figcaption {
    margin-top: var(--p-space-4);
    font-family: var(--p-font-display);
    font-size: var(--p-text-xs);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--fe-muted);
    text-align: center;
}

/* Hero strip: the whole fixture range, stated immediately. */
.fe-strip { margin-top: var(--p-space-10); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--p-space-3); }
.fe-strip .fe-plate { min-height: 260px; padding: var(--p-space-5); background: rgba(247,247,245,.06); border-color: var(--fe-ondeep-line); box-shadow: none; }
.fe-strip .fe-plate img { max-height: 190px; }
.fe-strip .fe-plate figcaption { color: var(--fe-ondeep-dim); }

@media (max-width: 900px) {
    .fe-spec { grid-template-columns: minmax(0, 1fr); }
    .fe-spec--flip > .fe-plate { order: 0; }
    .fe-plate { min-height: 0; }
}

/* --- Table ---------------------------------------------------------------- */

.fe-tablewrap {
    position: relative;
    max-width: 100%;
    min-width: 0;
    margin-top: var(--p-space-10);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--fe-accent) var(--fe-tint);
    scrollbar-width: thin;
    border: 1px solid var(--fe-line);
    background: var(--fe-stage);
    box-shadow: var(--fe-lift);
}
.fe-tablewrap::-webkit-scrollbar { height: 10px; }
.fe-tablewrap::-webkit-scrollbar-track { background: var(--fe-tint); }
.fe-tablewrap::-webkit-scrollbar-thumb { background: var(--fe-accent); border: 2px solid var(--fe-tint); }
.fe-tablewrap:focus-visible { outline: 3px solid var(--fe-accent); outline-offset: 3px; }

/* Reading copy stays narrow, but data should use the full section width. */
.fe-body > .fe-tablewrap {
    width: min(calc(100vw - (var(--fe-gutter) * 2)), calc(var(--fe-wide) - (var(--fe-gutter) * 2)));
    max-width: none;
}

.fitco-estate .fe-table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: var(--p-text-sm); min-width: 100%; }
/* Four and five column matrices remain scrollable only where wrapping would
   destroy readability. Smaller tables now fit the phone instead of being cut. */
.fitco-estate .fe-table:has(thead tr > :nth-child(4)) { min-width: 760px; }
.fitco-estate .fe-table:has(thead tr > :nth-child(5)) { min-width: 980px; }
.fitco-estate .fe-table th,
.fitco-estate .fe-table td {
    padding: var(--p-space-4) var(--p-space-6);
    text-align: left;
    color: var(--fe-ink-2);
    border-bottom: 1px solid var(--fe-line);
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}
.fitco-estate .fe-table thead th {
    font-family: var(--p-font-display);
    font-size: var(--p-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fe-accent-deep);
    border-bottom-color: var(--fe-line-2);
    white-space: normal;
}
.fitco-estate .fe-table tbody tr:last-child td { border-bottom: 0; }
.fitco-estate .fe-table tbody tr:hover td { background: var(--fe-accent-wash); }
.fitco-estate .fe-table td:first-child { font-weight: 650; color: var(--fe-ink); }
.fe-table-hint {
    position: sticky;
    left: 0;
    z-index: 3;
    display: block;
    width: max-content;
    padding: 7px 11px;
    font-family: var(--p-font-display);
    font-size: var(--p-text-xs);
    font-weight: 750;
    letter-spacing: .06em;
    color: #FFFFFF;
    background: var(--fe-accent-deep);
}

/* --- Figure and note ------------------------------------------------------ */

.fe-figure { margin-top: var(--p-space-10); padding: var(--p-space-8); background: var(--fe-stage); border: 1px solid var(--fe-line); box-shadow: var(--fe-lift); display: grid; place-items: center; }
.fe-figure img { object-fit: contain; max-height: 420px; width: auto; }
.fe-figure figcaption { margin-top: var(--p-space-4); font-family: var(--p-font-display); font-size: var(--p-text-xs); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fe-muted); text-align: center; }

/* .fe-note is the LOUD one: a pull-quote for a statement the page is making,
   like the campaign line. It is deliberately larger than body copy. */
.fe-note {
    margin-top: var(--p-space-10);
    padding: var(--p-space-8) var(--p-space-10);
    background: var(--fe-stage);
    border: 1px solid var(--fe-line);
    border-left: 4px solid var(--fe-accent);
    box-shadow: var(--fe-lift);
    font-family: var(--p-font-display);
    font-size: clamp(1.15rem, 1.9vw, 1.6rem);
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -0.018em;
    color: var(--fe-ink);
    max-width: 62ch;
}
.fitco-estate.fe--industry .fe-note {
    padding: clamp(1.25rem, 2.4vw, 2rem);
    font-size: clamp(1.05rem, 1.35vw, 1.3rem);
}
.fitco-estate .muted { color: var(--fe-muted); font-size: var(--p-text-sm); line-height: 1.55; }

/* .fe-caveat is the QUIET one: a disclaimer or scope limit that qualifies the
   copy above it. These two were the same class at first, which set legal
   caveats in 1.6rem display bold inside a shadowed card, louder than the
   sentence they correct. A caveat that shouts down its own subject is an
   inverted hierarchy, so it now sits below body size in muted ink with a hairline
   rule and no card at all. */
.fitco-estate .fe-caveat {
    margin-top: var(--p-space-5);
    padding-left: var(--p-space-5);
    border-left: 2px solid var(--fe-line-2);
    font-family: var(--p-font-text);
    font-size: var(--p-text-sm);
    font-weight: 400;
    line-height: 1.62;
    letter-spacing: 0;
    color: var(--fe-muted);
    max-width: 76ch;
}
.fitco-estate .fe-caveat strong { font-weight: 650; color: var(--fe-ink-2); }

.fitco-estate .fe-bleed--deep .fe-caveat,
.fitco-estate .fe-bleed--deeper .fe-caveat {
    border-left-color: var(--fe-ondeep-line);
    color: var(--fe-ondeep-dim);
}
.fitco-estate .fe-bleed--deep .fe-caveat strong,
.fitco-estate .fe-bleed--deeper .fe-caveat strong { color: var(--fe-ondeep); }

/* --- FAQ ------------------------------------------------------------------ */

.fe-faq { margin-top: var(--p-space-10); border-top: 1px solid var(--fe-line-2); max-width: 92ch; }
.fitco-estate .fe-faq details { border-bottom: 1px solid var(--fe-line); }
.fitco-estate .fe-faq summary {
    display: flex; justify-content: space-between; gap: var(--p-space-6); align-items: baseline;
    padding: var(--p-space-6) 0; cursor: pointer; list-style: none;
    font-family: var(--p-font-display); font-weight: 700; font-size: var(--p-text-lg); line-height: 1.35; color: var(--fe-ink);
}
.fitco-estate .fe-faq summary::-webkit-details-marker { display: none; }
.fitco-estate .fe-faq summary::after { content: "+"; font-weight: 400; color: var(--fe-accent); flex: none; }
.fitco-estate .fe-faq details[open] summary::after { content: "\2013"; }
.fitco-estate .fe-faq summary:focus-visible { outline: 2px solid var(--fe-accent); outline-offset: 3px; }
.fitco-estate .fe-faq details > div { padding-bottom: var(--p-space-6); color: var(--fe-ink-2); max-width: 68ch; }

/* --- Dark-surface coverage ------------------------------------------------
   Real class selectors, NOT :where(). :where() carries zero specificity, so an
   earlier attempt at this block lost to plain .fe-prose and left body copy at
   1.24:1 on the dark bands. Specificity here is load-bearing, not stylistic.
   Every dark context restates every text role it can contain, and :not(.fe-btn)
   keeps the rule off the CTA, which a previous system rendered invisible. */

.fe-bleed--deep, .fe-bleed--deeper { color: var(--fe-ondeep); }

.fitco-estate .fe-bleed--deep .fe-h1,
.fitco-estate .fe-bleed--deep .fe-h2,
.fitco-estate .fe-bleed--deep .fe-h3,
.fitco-estate .fe-bleed--deeper .fe-h1,
.fitco-estate .fe-bleed--deeper .fe-h2,
.fitco-estate .fe-bleed--deeper .fe-h3 { color: #FFFFFF; }

.fitco-estate .fe-bleed--deep .fe-lede,
.fitco-estate .fe-bleed--deep .fe-prose,
.fitco-estate .fe-bleed--deep .fe-row > p,
.fitco-estate .fe-bleed--deeper .fe-lede,
.fitco-estate .fe-bleed--deeper .fe-prose,
.fitco-estate .fe-bleed--deeper .fe-row > p { color: var(--fe-ondeep); }

.fitco-estate .fe-bleed--deep .fe-label,
.fitco-estate .fe-bleed--deeper .fe-label { color: var(--fe-accent-lift); border-bottom-color: var(--fe-accent-lift); }

.fitco-estate .fe-bleed--deep .fe-row__meta,
.fitco-estate .fe-bleed--deeper .fe-row__meta { color: var(--fe-accent-lift); }

.fitco-estate .fe-bleed--deep .fe-rows,
.fitco-estate .fe-bleed--deep .fe-faq,
.fitco-estate .fe-bleed--deeper .fe-rows,
.fitco-estate .fe-bleed--deeper .fe-faq { border-top-color: var(--fe-ondeep-line); }

.fitco-estate .fe-bleed--deep .fe-row,
.fitco-estate .fe-bleed--deep .fe-faq details,
.fitco-estate .fe-bleed--deeper .fe-row,
.fitco-estate .fe-bleed--deeper .fe-faq details { border-bottom-color: var(--fe-ondeep-line); }

.fitco-estate .fe-bleed--deep a:not(.fe-btn),
.fitco-estate .fe-bleed--deeper a:not(.fe-btn) { color: var(--fe-accent-lift); border-bottom-color: var(--fe-ondeep-line); }
.fitco-estate .fe-bleed--deep a:not(.fe-btn):hover,
.fitco-estate .fe-bleed--deeper a:not(.fe-btn):hover { border-bottom-color: var(--fe-accent-lift); }

.fitco-estate .fe-bleed--deep .fe-faq summary,
.fitco-estate .fe-bleed--deeper .fe-faq summary { color: #FFFFFF; }
.fitco-estate .fe-bleed--deep .fe-list__item > p,
.fitco-estate .fe-bleed--deeper .fe-list__item > p,
.fitco-estate .fe-bleed--deep a.fe-card > p,
.fitco-estate .fe-bleed--deeper a.fe-card > p { color: var(--fe-ondeep); }
.fitco-estate .fe-bleed--deep a.fe-card .fe-h3,
.fitco-estate .fe-bleed--deeper a.fe-card .fe-h3 { color: #FFFFFF; }
.fitco-estate .fe-bleed--deep .fe-list,
.fitco-estate .fe-bleed--deeper .fe-list { border-top-color: var(--fe-ondeep-line); }
.fitco-estate .fe-bleed--deep .fe-list__item,
.fitco-estate .fe-bleed--deeper .fe-list__item { border-bottom-color: var(--fe-ondeep-line); }

.fitco-estate .fe-bleed--deep .fe-faq details > div,
.fitco-estate .fe-bleed--deeper .fe-faq details > div { color: var(--fe-ondeep); }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1000px) {
    .fe-row { grid-template-columns: minmax(0, 1fr); gap: var(--p-space-2); }
    .fe-row__meta { text-align: left; }
}

@media (max-width: 620px) {
    .fitco-estate { font-size: var(--p-text-base); }
    .fe-card { padding: var(--p-space-6); }
    .fe-actions .fe-btn { flex: 1 1 auto; justify-content: center; }
    .fitco-estate .fe-chip { display: inline-flex; align-items: center; min-height: 44px; padding: .625rem .75rem; }
    .fitco-estate .fe-table :is(th, td) { padding: var(--p-space-3) var(--p-space-4); }
}

@media (prefers-reduced-motion: reduce) {
    .fitco-estate *,
    .fitco-estate *::before,
    .fitco-estate *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- Knowledge Centre prose ------------------------------------------------
   The ASTM and ISO method pages are reference documents, not sales pages: long
   runs of bulleted requirements, numbered procedures and specimen tables. The
   industry pages never needed list styling, so these are additions rather than
   changes. Nothing above this block is affected. */

.fe-body { max-width: 78ch; }
.fe-body > * + * { margin-top: var(--p-space-5); }

.fitco-estate .fe-body ul,
.fitco-estate .fe-body ol {
    margin: var(--p-space-5) 0;
    padding-left: 1.35em;
    color: var(--fe-ink-2);
    font-size: var(--p-text-md);
    line-height: 1.68;
}
.fitco-estate .fe-body li + li { margin-top: var(--p-space-3); }
.fitco-estate .fe-body li::marker { color: var(--fe-accent); }
.fitco-estate .fe-body h3 {
    font-family: var(--p-font-display);
    font-weight: 700;
    font-size: var(--p-text-lg);
    line-height: 1.3;
    letter-spacing: -0.014em;
    color: var(--fe-ink);
    margin: var(--p-space-8) 0 var(--p-space-2);
}
.fitco-estate :is(.fe-card, .fe-list__item, .fe-callout, .fe-steps > li) > h3 { margin-top: 0; }

/* A numbered procedure. The counter sits outside the text column so long steps
   stay aligned, which a plain <ol> does not manage once a step wraps. */
.fitco-estate .fe-steps { list-style: none; counter-reset: fe-step; padding-left: 0; margin: var(--p-space-6) 0; }
.fitco-estate .fe-steps > li {
    counter-increment: fe-step;
    position: relative;
    padding-left: 3.25rem;
    min-height: 2rem;
    margin-top: var(--p-space-4);
}
.fitco-estate .fe-steps > li::before {
    content: counter(fe-step);
    position: absolute;
    left: 0;
    top: -0.1em;
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    font-family: var(--p-font-display);
    font-size: var(--p-text-sm);
    font-weight: 800;
    color: var(--fe-accent-deep);
    background: var(--fe-accent-wash);
    border: 1px solid var(--fe-line-2);
    border-radius: 50%;
}

/* A boxed requirement block, for the "what the standard demands" callouts. */
.fe-callout {
    margin: var(--p-space-8) 0;
    padding: var(--p-space-6) var(--p-space-8);
    background: var(--fe-stage);
    border: 1px solid var(--fe-line);
    border-left: 3px solid var(--fe-accent);
    box-shadow: var(--fe-lift);
}
.fe-grid > .fe-callout { margin: 0; }
.fitco-estate .fe-callout ul,
.fitco-estate .fe-callout ol { margin: 0; }

/* Dark-surface coverage, real selectors not :where(). */
.fitco-estate .fe-bleed--deep .fe-body ul,
.fitco-estate .fe-bleed--deep .fe-body ol,
.fitco-estate .fe-bleed--deeper .fe-body ul,
.fitco-estate .fe-bleed--deeper .fe-body ol { color: var(--fe-ondeep); }
.fitco-estate .fe-bleed--deep .fe-body h3,
.fitco-estate .fe-bleed--deeper .fe-body h3 { color: var(--fe-paper); }
.fitco-estate .fe-bleed--deep .fe-body li::marker,
.fitco-estate .fe-bleed--deeper .fe-body li::marker { color: var(--fe-accent-lift); }
.fitco-estate .fe-bleed--deep .fe-steps > li::before,
.fitco-estate .fe-bleed--deeper .fe-steps > li::before {
    color: var(--fe-paper);
    background: rgba(246, 248, 250, 0.10);
    border-color: var(--fe-ondeep-line);
}

/* Tables and callouts are deliberate light islands, including when their
   section is dark. Restate their ink after the dark-surface inheritance. */
.fitco-estate .fe-bleed--deep :is(.fe-tablewrap, .fe-callout),
.fitco-estate .fe-bleed--deeper :is(.fe-tablewrap, .fe-callout) { color: var(--fe-ink-2); }
.fitco-estate .fe-bleed--deep .fe-table :is(th, td),
.fitco-estate .fe-bleed--deeper .fe-table :is(th, td),
.fitco-estate .fe-bleed--deep .fe-callout :is(p, li),
.fitco-estate .fe-bleed--deeper .fe-callout :is(p, li) { color: var(--fe-ink-2); }
.fitco-estate .fe-bleed--deep .fe-callout :is(h3, strong),
.fitco-estate .fe-bleed--deeper .fe-callout :is(h3, strong) { color: var(--fe-ink); }
.fitco-estate .fe-bleed--deep :is(.fe-tablewrap, .fe-callout) a:not(.fe-btn),
.fitco-estate .fe-bleed--deeper :is(.fe-tablewrap, .fe-callout) a:not(.fe-btn) {
    color: var(--fe-accent-deep);
    border-bottom-color: var(--fe-accent-wash);
}