/*
 * Property of First ESCO India Private Limited. All rights reserved.
 * FE Design System — Components ("The Engineering Dossier", design/04)
 * Requires fe-tokens.css. No values outside the token set.
 */

/* =====================================================
   Base
===================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.fe-body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.fe-body h1, .fe-body h2, .fe-body h3, .fe-body h4 {
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 var(--space-4);
}
.fe-body h1 { font-size: var(--fs-1); letter-spacing: -0.5px; }
.fe-body h2 { font-size: var(--fs-2); letter-spacing: -0.3px; }
.fe-body h3 { font-size: var(--fs-3); }
.fe-body h4 { font-size: var(--fs-4); }

.fe-body p { margin: 0 0 var(--space-4); max-width: 72ch; }

.fe-body a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--fe-orange);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: text-decoration-thickness var(--t-fast) var(--ease-standard);
}
.fe-body a:hover { text-decoration-thickness: 2.5px; color: var(--ink); }

.fe-mono {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: 0.01em;
}
.fe-micro { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-muted); }

/* Long-form content (policy/legal copy): plain <ul>/<ol> get a squared,
   orange-accented bullet consistent with the rest of the dossier system,
   scoped so it never touches the nav menus. */
.fe-prose { max-width: 78ch; }
.fe-prose h2 { margin-top: var(--space-8); }
.fe-prose h2:first-child { margin-top: 0; }
.fe-prose ul, .fe-prose ol { margin: 0 0 var(--space-4); padding-left: 0; list-style: none; }
.fe-prose ol { counter-reset: fe-prose-count; }
.fe-prose li {
    position: relative;
    padding-left: 1.6em;
    margin-bottom: var(--space-2);
}
.fe-prose ul li::before {
    content: "";
    position: absolute;
    left: 0.1em; top: 0.65em;
    width: 6px; height: 6px;
    background: var(--fe-orange);
}
.fe-prose ol li { counter-increment: fe-prose-count; }
.fe-prose ol li::before {
    content: counter(fe-prose-count) ".";
    position: absolute;
    left: 0; top: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    color: var(--fe-orange);
}

/* Bordered aside for a static block of content within a fe-prose section
   (contact details, callouts) — the light card language used site-wide. */
.fe-callout {
    border-radius: var(--r-l);
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    box-shadow: var(--shadow-lift);
    padding: var(--space-5);
    margin: 0 0 var(--space-4);
}
.fe-callout ul { margin-bottom: 0; }

.fe-container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

/* Section rhythm + chapter rule */
.fe-section { padding: var(--space-9) 0; }
.fe-section-head {
    position: relative;
    border-top: 1px solid var(--rule);
    padding-top: var(--space-4);
    margin-bottom: var(--space-6);
}
/* Orange highlighter tick: draws itself along the chapter rule as the
   section reveals — the dossier's "this is ours" mark, replacing the
   numbered 01–06 kickers. */
.fe-section-head::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    height: 2px;
    width: 64px;
    background: var(--fe-orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-slow) var(--ease-standard) 160ms;
}
.fe-section-head.revealed::after { transform: scaleX(1); }
.fe-section-head h2 { margin: 0; }

/* Accent + highlight conventions */
.fe-name { color: var(--fe-orange); font-weight: 600; }

/* =====================================================
   Buttons
===================================================== */
.fe-btn {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 12px 24px;
    border-radius: var(--r-s);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--t-fast) var(--ease-standard),
                background var(--t-fast) var(--ease-standard),
                box-shadow var(--t-fast) var(--ease-standard);
}
.fe-btn:active { transform: translateY(1px); }

.fe-btn-primary { background: var(--fe-orange); color: #ffffff; box-shadow: 0 4px 14px rgba(221, 94, 7, 0.30); }
.fe-btn-primary:hover { background: var(--fe-orange-deep); color: #ffffff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(221, 94, 7, 0.40); }
a.fe-btn-primary, a.fe-btn-primary:hover { text-decoration: none; color: #ffffff; }

.fe-btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.fe-btn-secondary:hover { background: var(--paper-raised); box-shadow: var(--shadow-lift); }
a.fe-btn-secondary, a.fe-btn-secondary:hover { text-decoration: none; }

/* =====================================================
   1. Navigation (fe-nav)
===================================================== */
/* Floating glass pill that anchors into a full bar on scroll.
   The frosted fill lives on ::before, not on .fe-nav itself: an element
   with backdrop-filter becomes a backdrop root, and its descendants'
   backdrop-filters stop seeing the page behind — which is why the
   dropdown panels rendered with no blur. */
.fe-nav {
    position: fixed;
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    width: min(1240px, calc(100% - 32px));
    z-index: 1000;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    box-shadow: 0 8px 32px rgba(20, 26, 34, 0.10);
    transition: top var(--t-med) var(--ease-standard),
                width var(--t-med) var(--ease-standard),
                border-radius var(--t-med) var(--ease-standard),
                box-shadow var(--t-med) var(--ease-standard);
}
.fe-nav::before {
    content: "";
    position: absolute;
    /* -1px: extend the frosted fill under the 1px border, otherwise the
       transparent border ring reads as a hairline gap at the top edge
       when the bar anchors on scroll */
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.32);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    transition: background var(--t-med) var(--ease-standard);
}
.fe-nav.scrolled {
    top: 0;
    width: 100%;
    border-radius: 0;
    border-color: transparent;
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 4px 24px rgba(20, 26, 34, 0.08);
}
.fe-nav.scrolled::before { background: rgba(247, 246, 242, 0.55); }
.fe-nav-inner {
    max-width: var(--bleed-max);
    margin: 0 auto;
    padding: var(--space-2) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-5);
}
.fe-nav-logo img { height: 40px; display: block; }
.fe-nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
}
.fe-nav-menu > li { position: relative; }
.fe-nav-menu a, .fe-nav-menu button.fe-nav-link {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2) 0;
    border-bottom: 1.5px solid transparent;
    transition: border-color var(--t-fast) var(--ease-standard);
}
.fe-nav-menu a:hover, .fe-nav-menu button.fe-nav-link:hover,
.fe-nav-menu a.active { border-bottom-color: var(--fe-orange); color: var(--ink); }

/* The nav CTA keeps its solid button styling (overrides menu link rules) */
.fe-nav-menu .fe-nav-cta a.fe-btn-primary {
    background: var(--fe-orange);
    color: #ffffff;
    border-radius: 999px;
    border-bottom: none;
    padding: 10px 20px;
    box-shadow: 0 4px 14px rgba(221, 94, 7, 0.35);
    transition: transform var(--t-fast) var(--ease-standard),
                box-shadow var(--t-fast) var(--ease-standard),
                background var(--t-fast) var(--ease-standard);
}
.fe-nav-menu .fe-nav-cta a.fe-btn-primary:hover {
    background: var(--fe-orange-deep);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(221, 94, 7, 0.45);
}

/* Dropdown panels */
.fe-nav-panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    min-width: 320px;
    /* Real frosted glass — works now that the nav's own blur sits on
       ::before rather than on the ancestor element. */
    background: var(--glass-light);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--r-m);
    box-shadow: var(--shadow-lift);
    padding: var(--space-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t-med) var(--ease-standard),
                transform var(--t-med) var(--ease-standard),
                visibility var(--t-med);
}
.fe-nav-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.fe-nav-panel a {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--r-s);
    border-bottom: none;
    line-height: 1.4;
}
.fe-nav-panel .fe-ico { margin-top: 1px; }
.fe-nav-panel a:hover { background: var(--paper); }
/* Descriptive stroke icons (1.6px line, ink-muted; warms to orange on hover) */
.fe-ico {
    display: inline-flex;
    width: 22px; height: 22px;
    color: var(--ink-muted);
    flex-shrink: 0;
}
.fe-ico svg {
    width: 100%; height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.fe-nav-panel a:hover .fe-ico { color: var(--fe-orange); }
.fe-nav-panel .fe-panel-title { font-weight: 600; font-size: var(--fs-small); display: block; }
.fe-nav-panel .fe-panel-desc { font-size: var(--fs-micro); color: var(--ink-muted); display: block; }
/* Where backdrop-filter is unsupported, fall back to near-opaque paper */
@supports not (backdrop-filter: blur(1px)) {
    .fe-nav-panel { background: rgba(255, 255, 255, 0.96); }
}

.fe-nav-cta { margin-left: var(--space-2); }

/* Mobile */
.fe-nav-toggle {
    display: none;
    margin-left: auto;
    background: none;
    border: 1px solid var(--rule);
    border-radius: var(--r-s);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    color: var(--ink);
    cursor: pointer;
}
@media (max-width: 991px) {
    .fe-nav-toggle { display: block; }
    .fe-nav-menu {
        display: none;
        position: absolute;
        top: calc(100% + var(--space-2)); left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        /* same frosted glass as the desktop dropdowns — works because
           the nav's own blur lives on ::before, not the ancestor */
        background: rgba(255, 255, 255, 0.75);
        -webkit-backdrop-filter: blur(18px) saturate(1.3);
        backdrop-filter: blur(18px) saturate(1.3);
        border: 1px solid rgba(255, 255, 255, 0.7);
        border-radius: var(--r-l);
        padding: var(--space-3) var(--space-5) var(--space-5);
        box-shadow: var(--shadow-lift);
    }
    @supports not (backdrop-filter: blur(1px)) {
        .fe-nav-menu { background: rgba(255, 255, 255, 0.97); }
    }
    .fe-nav-menu.open { display: flex; }
    .fe-nav-menu > li { padding: var(--space-3) 0; }
    .fe-nav-menu > li + li { border-top: 1px solid rgba(216, 213, 205, 0.55); }
    .fe-nav-panel {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        display: none;
        box-shadow: none;
        /* the sheet itself is the glass layer — a nested backdrop-filter
           can't compose, so the submenu becomes a solid inset card
           marked with the brand's orange rule */
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(255, 255, 255, 0.6);
        border: none;
        border-left: 2px solid var(--fe-orange);
        border-radius: 0 var(--r-m) var(--r-m) 0;
        min-width: 0;
        margin: var(--space-3) 0 var(--space-1);
        padding: var(--space-2);
    }
    .fe-nav-panel.open { display: block; }
    .fe-nav-cta { margin: var(--space-3) 0 0; }
}

/* =====================================================
   2. Section Rail (fe-rail)
===================================================== */
.fe-rail {
    position: fixed;
    right: var(--space-5);
    top: 50%;
    transform: translateY(-50%) translateX(16px);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    background: rgba(247, 246, 242, 0.4);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--r-m);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-med) var(--ease-standard),
                transform var(--t-med) var(--ease-standard),
                visibility var(--t-med);
}
.fe-rail.visible { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
.fe-rail a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    border-bottom: none;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    line-height: 1;
}
.fe-rail a .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--ink-muted);
    background: transparent;
    transition: background var(--t-fast) var(--ease-standard),
                border-color var(--t-fast) var(--ease-standard);
}
.fe-rail a.active { color: var(--fe-orange); }
.fe-rail a.active .dot { background: var(--fe-orange); border-color: var(--fe-orange); }
.fe-rail .fe-rail-label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width var(--t-med) var(--ease-standard);
}
.fe-rail:hover .fe-rail-label { max-width: 160px; }
@media (max-width: 991px) { .fe-rail { display: none; } }

/* =====================================================
   Hero (index) — The Valorisation Line
===================================================== */
.fe-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 72px;
}
#fe-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.fe-hero-content {
    position: relative;
    z-index: 2;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
    width: 100%;
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--space-7);
    align-items: center;
}
/* Glass panels lift the text and image above the orb field (depth + legibility) */
.fe-hero-text {
    background: rgba(247, 246, 242, 0.28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--r-l);
    box-shadow: 0 12px 32px rgba(20, 26, 34, 0.06);
    padding: var(--space-5);
}
.fe-hero-text h1 {
    font-size: var(--fs-1);
    max-width: 21ch;
    margin-bottom: var(--space-5);
}
/* No panel around the FE artwork — the frosted aura and shadow follow the
   letterforms themselves (a blurred multiply copy behind the sharp one). */
.fe-hero-visual {
    position: relative;
    animation: fe-float 6s ease-in-out infinite alternate;
}
.fe-hero-visual-inner {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
}
/* multiply drops the image's baked-in white ground so only the artwork shows */
.fe-hero-visual img {
    width: 100%;
    display: block;
    mix-blend-mode: multiply;
    position: relative;
}
.fe-hero-visual img.fe-hero-visual-halo {
    position: absolute;
    inset: 0;
    filter: blur(18px) saturate(1.1);
    opacity: 0.5;
    transform: translateY(14px) scale(1.03);
}
/* Hovering the CTA lets the transformation breathe: the materials warm
   very slightly and the artwork drifts up and down (the float itself is
   driven from fe-hero.js, so its amplitude eases in and out rather than
   snapping). Kept deliberately understated — the orb field carries the
   energy; the artwork just comes alive.
   (Transforms live on the images: the wrapper runs the idle float
   animation and the inner element carries the JS tilt + hover drift.) */
.fe-hero-visual img {
    transition: transform var(--t-med) var(--ease-standard),
                opacity var(--t-med) var(--ease-standard),
                filter var(--t-med) var(--ease-standard);
}
/* the slow idle drift pauses so it never compounds with the hover float */
.fe-hero.cta-hot .fe-hero-visual { animation-play-state: paused; }
.fe-hero.cta-hot .fe-hero-visual img {
    transform: scale(1.012);
    filter: saturate(1.05);
}
.fe-hero.cta-hot .fe-hero-visual img.fe-hero-visual-halo {
    opacity: 0.57;
    filter: blur(20px) saturate(1.15);
    transform: translateY(16px) scale(1.042);
}
@media (max-width: 991px) {
    .fe-hero-content { grid-template-columns: 1fr; gap: var(--space-5); }
    .fe-hero-visual { max-width: 380px; margin: 0 auto; }
}
@media (max-width: 767px) {
    .fe-hero { min-height: 80vh; }
    .fe-hero-text { padding: var(--space-5); }
    .fe-hero-text h1 { font-size: var(--fs-2); }
}

/* Green CTA: the partnership acts on recovery (green = recovered value) */
.fe-btn-green {
    background: var(--flow-value);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(31, 157, 85, 0.35);
}
.fe-btn-green:hover {
    background: #177f45;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(31, 157, 85, 0.45);
}
a.fe-btn-green, a.fe-btn-green:hover { text-decoration: none; color: #ffffff; }

/* Advance-down arrow inside the hero CTA: a scroll-cue that invites the
   visitor downward into the page. The arrow bobs gently and continuously
   (the universal "go down" gesture) while a soft halo pulses out from its
   circular port to catch the eye — attention without flash. On hover or
   focus, both quicken. */
.fe-btn:has(.fe-btn-down) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    position: relative;
}
.fe-btn-down {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35),
                0 0 0 0 rgba(255, 255, 255, 0.45);
    animation: fe-arrow-pulse 2.6s var(--ease-standard) infinite;
}
.fe-btn-down svg {
    display: block;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: fe-arrow-bob 1.8s ease-in-out infinite;
}
.fe-btn:hover .fe-btn-down,
.fe-btn:focus-visible .fe-btn-down { animation-duration: 1.4s; }
.fe-btn:hover .fe-btn-down svg,
.fe-btn:focus-visible .fe-btn-down svg { animation-duration: 0.9s; }

/* gentle downward bob — rests high, dips down, settles */
@keyframes fe-arrow-bob {
    0%, 100% { transform: translateY(-1px); }
    50%      { transform: translateY(4px); }
}
/* soft halo radiating outward from the port and fading */
@keyframes fe-arrow-pulse {
    0%   { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0 0 rgba(255, 255, 255, 0.45); }
    70%  { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0 7px rgba(255, 255, 255, 0); }
    100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* =====================================================
   Technology page hero (fe-tech-hero)
===================================================== */
.fe-tech-hero {
    position: relative;
    padding: 176px 0 var(--space-8);
    overflow: hidden;
}
/* faint drawing-sheet trace, fading out toward the content below */
.fe-tech-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(var(--rule) 1px, transparent 1px) 0 0 / 100% 64px,
        linear-gradient(90deg, var(--rule) 1px, transparent 1px) 0 0 / 64px 100%;
    opacity: 0.18;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 88%);
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
.fe-tech-hero .fe-container { position: relative; }
.fe-tech-hero-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--space-7);
    align-items: center;
}
@media (max-width: 991px) { .fe-tech-hero-grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.fe-tech-hero h1 { margin-bottom: var(--space-3); }
.fe-tech-hero .fe-tech-sub { font-size: var(--fs-4); color: var(--ink-muted); margin: 0; max-width: 46ch; }
.fe-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    margin-bottom: var(--space-4);
}
.fe-chip .swatch { width: 16px; height: 5px; border-radius: 2px; }

/* Key-figure block: the one number that matters, in mono */
.fe-keyfig {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    box-shadow: var(--shadow-lift);
    padding: var(--space-5) var(--space-6);
}
.fe-keyfig .value {
    font-family: var(--font-mono);
    font-size: var(--fs-1);
    font-weight: 500;
    line-height: 1.1;
    color: var(--ink);
    display: block;
}
.fe-keyfig .value .unit { font-size: var(--fs-3); color: var(--ink-muted); }
.fe-keyfig .label { font-size: var(--fs-small); color: var(--ink-muted); display: block; margin-top: var(--space-2); }

/* =====================================================
   Engineering Process Viewer (fe-viewer) — dark instrument panel
===================================================== */
.fe-viewer {
    /* themeable instrument: dark chassis by default, .light flips it */
    --v-bg: var(--panel);
    --v-border: transparent;
    --v-box: #141c26;
    --v-line: #2a3440;
    --v-text: #9aa4ad;
    --v-strong: #d7dde4;
    --v-btn-bg: var(--panel-glass);
    --v-btn-line: var(--panel-line);
    --v-btn-text: var(--panel-text);
    --v-pop-bg: rgba(16, 22, 29, 0.78);
    --v-pop-line: rgba(255, 255, 255, 0.14);
    --v-pop-name: #ffffff;
    --v-pop-role: var(--panel-text);
    position: relative;
    background: var(--v-bg);
    border: 1px solid var(--v-border);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: var(--space-5);
    color: var(--v-strong);
}
.fe-viewer.light {
    --v-bg: var(--paper-raised);
    --v-border: var(--rule);
    --v-box: #f7f6f2;
    --v-line: #d8d5cd;
    --v-text: #55606c;
    --v-strong: #1c2530;
    --v-btn-bg: transparent;
    --v-btn-line: var(--rule);
    --v-btn-text: var(--ink);
    --v-pop-bg: rgba(255, 255, 255, 0.92);
    --v-pop-line: var(--rule);
    --v-pop-name: var(--ink);
    --v-pop-role: var(--ink-muted);
    box-shadow: var(--shadow-lift);
}
/* SVG element theming (CSS wins over presentation attributes) */
.fe-viewer .comp-body { fill: var(--v-box); stroke: var(--v-line); }
.fe-viewer .comp-duct { fill: rgba(154, 164, 173, 0.10); }
.fe-viewer .v-box { fill: var(--v-box); stroke: var(--v-line); }
.fe-viewer .v-labels { fill: var(--v-text); }
.fe-viewer .v-text-strong { fill: var(--v-strong); }
.fe-viewer .v-line-stroke { stroke: var(--v-line); }
/* stream contrast corrections for the light chassis */
.fe-viewer.light .u-gas { stroke: #ccd0d6; }
.fe-viewer.light .f-gas { stroke: #55606c; }
.fe-viewer.light .f-liq { stroke: #6353b8; }
.fe-viewer.light .f-vap { stroke: #7d6ad0; }
.fe-viewer.light .f-pow { stroke: #1f9d55; }
.fe-viewer.light #orc-rotor { stroke: #6353b8; }
.fe-viewer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.fe-viewer-title {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--v-text);
}
.fe-viewer-controls { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.fe-viewer-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.fe-viewer-controls button,
.fe-viewer-tabs button {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--v-btn-text);
    background: var(--v-btn-bg);
    border: 1px solid var(--v-btn-line);
    border-radius: var(--r-s);
    padding: 6px 12px;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-standard),
                border-color var(--t-fast) var(--ease-standard);
}
.fe-viewer-tabs button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: 999px;
}
.fe-viewer-tabs button .swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.fe-viewer-controls button:hover,
.fe-viewer-tabs button:hover { background: rgba(255, 255, 255, 0.12); }
.fe-viewer.light .fe-viewer-controls button:hover,
.fe-viewer.light .fe-viewer-tabs button:hover { background: var(--paper); }
.fe-viewer-tabs button[aria-pressed="true"] {
    border-color: var(--fe-orange);
    color: #ffb27d;
}
.fe-viewer.light .fe-viewer-controls button[aria-pressed="true"],
.fe-viewer.light .fe-viewer-tabs button[aria-pressed="true"] { color: var(--fe-orange-deep); }
.fe-viewer-controls button[aria-pressed="true"] {
    border-color: var(--fe-orange);
    color: #ffb27d;
}
/* stage scrolls sideways on small screens so the drawing stays legible */
.fe-viewer-stage { position: relative; overflow-x: auto; }
.fe-viewer-stage svg { width: 100%; height: auto; display: block; min-width: 720px; }
.fe-viewer .zld-flow { transition: opacity var(--t-med) var(--ease-standard); }
.fe-viewer .orc-comp { cursor: pointer; }
.fe-viewer .orc-comp .comp-body { transition: stroke var(--t-fast) var(--ease-standard); }
.fe-viewer .orc-comp:hover .comp-body,
.fe-viewer .orc-comp:focus .comp-body { stroke: var(--fe-orange); }
.fe-viewer .orc-comp:focus { outline: none; }

/* Legend: teaches the site-wide process colour code */
.fe-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--v-line);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--v-text);
}
.fe-legend .item { display: inline-flex; align-items: center; gap: var(--space-2); }
.fe-legend .swatch { width: 16px; height: 4px; border-radius: 2px; flex-shrink: 0; }

/* Glass component label (popover inside the panel) */
.fe-viewer-label {
    position: absolute;
    z-index: 5;
    max-width: 300px;
    background: var(--v-pop-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--v-pop-line);
    border-radius: var(--r-s);
    padding: var(--space-3) var(--space-4);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--t-fast) var(--ease-standard),
                transform var(--t-fast) var(--ease-standard);
}
.fe-viewer-label.visible { opacity: 1; transform: translateY(0); }
.fe-viewer-label .name { font-weight: 600; font-size: var(--fs-small); color: var(--v-pop-name); display: block; }
.fe-viewer-label .role { font-size: var(--fs-micro); color: var(--v-pop-role); display: block; margin-top: 2px; line-height: 1.55; }

/* One-time pan affordance on narrow screens */
.fe-pan-hint {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 4;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--v-strong);
    background: var(--v-pop-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--v-pop-line);
    border-radius: 999px;
    padding: 6px 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--t-med) var(--ease-standard);
}
.fe-pan-hint.visible { opacity: 1; }

/* Text transcript (accessibility requirement for every viewer) */
.fe-viewer-transcript { margin-top: var(--space-4); }
.fe-viewer-transcript summary {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    cursor: pointer;
}
.fe-viewer-transcript ol { font-size: var(--fs-small); color: var(--ink-muted); margin-top: var(--space-3); }
.fe-viewer-transcript li { margin-bottom: var(--space-2); }
/* read-aloud (injected by fe-components.js when speechSynthesis exists) */
.fe-tts-btn {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: var(--r-s);
    padding: 6px 14px;
    margin-top: var(--space-3);
    cursor: pointer;
    transition: color var(--t-fast) var(--ease-standard),
                border-color var(--t-fast) var(--ease-standard);
}
.fe-tts-btn:hover,
.fe-tts-btn.playing { color: var(--fe-orange-deep); border-color: var(--fe-orange); }
.fe-viewer-transcript li.speaking { color: var(--ink); }
.fe-viewer-transcript li.speaking::marker { color: var(--fe-orange); font-weight: 600; }

/* =====================================================
   Waste Stream Explorer (fe-explorer) & Specimen cards
===================================================== */
.fe-explorer-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}
.fe-explorer-tabs button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease-standard),
                box-shadow var(--t-fast) var(--ease-standard),
                border-color var(--t-fast) var(--ease-standard);
}
.fe-explorer-tabs button .swatch { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.fe-explorer-tabs button:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.fe-explorer-tabs button[aria-selected="true"] {
    border-color: var(--fe-orange);
    box-shadow: 0 0 0 1px var(--fe-orange);
}

.fe-explorer-panel { display: none; }
.fe-explorer-panel.active {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: var(--space-6);
    align-items: start;
}
@media (max-width: 991px) {
    .fe-explorer-panel.active { grid-template-columns: 1fr; gap: var(--space-5); }
}
.fe-explorer-waste figure { margin: 0; }
.fe-explorer-waste img {
    /* waste-jar shots display as portrait 3:4 (EXIF-rotated) — full frame, no crop */
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    border-radius: var(--r-m);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-lift);
}
.fe-explorer-waste figcaption {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    margin-top: var(--space-3);
}
.fe-explorer-waste .fe-waste-desc { font-size: var(--fs-small); color: var(--ink-muted); margin-top: var(--space-3); }

.fe-specimen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
@media (max-width: 640px) { .fe-specimen-grid { grid-template-columns: repeat(2, 1fr); } }
.fe-specimen {
    margin: 0;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--t-med) var(--ease-standard),
                transform var(--t-med) var(--ease-standard),
                box-shadow var(--t-fast) var(--ease-standard);
}
.fe-explorer-panel.active .fe-specimen { opacity: 1; transform: translateY(0); }
.fe-specimen:hover { box-shadow: var(--shadow-lift); }
.fe-specimen img {
    /* specimen shots display as portrait 3:4 (EXIF-rotated; jar + recovered
       product in front) — match it so the product is never cropped out */
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}
.fe-specimen figcaption { padding: var(--space-3) var(--space-4); }
.fe-specimen .name { font-weight: 600; font-size: var(--fs-small); display: block; }
.fe-specimen .src {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    display: block;
    margin-top: 2px;
}

/* Research-ongoing tags: honest about status */
.fe-rd-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.fe-rd-tag {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    border: 1.5px dashed var(--rule);
    border-radius: 999px;
    padding: 6px 14px;
}
.fe-rd-tag .rd { color: var(--fe-orange); }

/* =====================================================
   TRL meter & development stages
===================================================== */
.fe-trl-track { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.fe-trl-seg { height: 10px; border-radius: 3px; background: var(--rule); }
.fe-trl-seg.filled {
    background: var(--fe-orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-med) var(--ease-standard);
}
.fe-trl-seg.filled:nth-child(1) { transition-delay: 80ms; }
.fe-trl-seg.filled:nth-child(2) { transition-delay: 240ms; }
.fe-trl-seg.filled:nth-child(3) { transition-delay: 400ms; }
.fe-trl-seg.filled:nth-child(4) { transition-delay: 560ms; }
.fe-reveal.revealed .fe-trl-seg.filled { transform: scaleX(1); }
.fe-trl-scale {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    margin-top: var(--space-2);
}
.fe-trl-scale span { text-align: center; }
.fe-trl-scale .here { color: var(--fe-orange); font-weight: 500; }
.fe-trl-caption {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--fe-orange);
    text-align: center;
    margin: var(--space-3) 0 0;
}

.fe-stage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5) var(--space-6);
    margin-top: var(--space-6);
}
@media (max-width: 991px) { .fe-stage-grid { grid-template-columns: 1fr; } }
.fe-stage { position: relative; border-top: 1px solid var(--rule); padding-top: var(--space-3); }
.fe-stage::before {
    content: "";
    position: absolute;
    top: -1px; left: 0;
    height: 2px; width: 40px;
}
.fe-stage.done::before { background: var(--flow-value); }
.fe-stage.now::before  { background: var(--fe-orange); }
.fe-stage.next::before { background: var(--ink-muted); }
.fe-stage .status {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    display: block;
    margin-bottom: var(--space-2);
}
.fe-stage.done .status { color: var(--flow-value); }
.fe-stage.now .status  { color: var(--fe-orange); }
.fe-stage.next .status { color: var(--ink-muted); }
.fe-stage h4 { margin-bottom: var(--space-2); }
.fe-stage p { font-size: var(--fs-small); color: var(--ink-muted); margin: 0; }

/* =====================================================
   3/8. Technology index & data callouts
===================================================== */
.fe-tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
@media (max-width: 991px) { .fe-tech-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .fe-tech-grid { grid-template-columns: 1fr; } }

.fe-tech-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    padding: var(--space-5);
    text-decoration: none;
    color: var(--ink);
    transition: transform var(--t-fast) var(--ease-standard),
                box-shadow var(--t-fast) var(--ease-standard),
                border-color var(--t-fast) var(--ease-standard);
}
a.fe-tech-card, a.fe-tech-card:hover { text-decoration: none; }
.fe-tech-card::after {
    /* soft brand sheen that breathes in on hover */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 90% at 85% 0%, rgba(221, 94, 7, 0.07), transparent 60%);
    opacity: 0;
    transition: opacity var(--t-med) var(--ease-standard);
    pointer-events: none;
}
.fe-tech-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(20, 26, 34, 0.14);
    border-color: var(--fe-orange);
}
.fe-tech-card:hover::after { opacity: 1; }
.fe-tech-card .fe-tech-more { transition: transform var(--t-fast) var(--ease-standard); }
.fe-tech-card:hover .fe-tech-more { transform: translateX(4px); }
.fe-tech-card .fe-ico { transition: transform var(--t-fast) var(--ease-standard), color var(--t-fast) var(--ease-standard); }
.fe-tech-card:hover .fe-ico { transform: scale(1.15); color: var(--fe-orange); }
.fe-tech-card .fe-tech-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    margin-bottom: var(--space-3);
}
.fe-tech-card h3 { font-size: var(--fs-4); margin-bottom: var(--space-3); }
.fe-tech-card p { font-size: var(--fs-small); color: var(--ink-muted); margin-bottom: var(--space-4); }
.fe-tech-card .fe-tech-figure {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    color: var(--ink);
    border-top: 1px solid var(--rule);
    padding-top: var(--space-3);
    margin-top: auto;
}
.fe-tech-card .fe-tech-figure .unit { color: var(--ink-muted); }
.fe-tech-card .fe-tech-more {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--fe-orange);
    margin-top: var(--space-3);
}

/* Data callout band */
.fe-figure-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-5);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: var(--space-6) 0;
}
.fe-figure-item .value {
    font-family: var(--font-mono);
    font-size: var(--fs-2);
    font-weight: 500;
    color: var(--ink);
    display: block;
    line-height: 1.1;
}
.fe-figure-item .value .unit { font-size: var(--fs-small); color: var(--ink-muted); }
.fe-figure-item .label {
    font-size: var(--fs-small);
    color: var(--ink-muted);
    display: block;
    margin-top: var(--space-2);
}

/* =====================================================
   10. Evidence / Project Record (fe-record)
===================================================== */
.fe-record {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--space-7);
    align-items: center;
}
.fe-record.flip { grid-template-columns: 7fr 5fr; }
@media (max-width: 991px) {
    .fe-record, .fe-record.flip { grid-template-columns: 1fr; gap: var(--space-5); }
}
.fe-record figure { margin: 0; }
.fe-record img {
    width: 100%;
    display: block;
    border-radius: var(--r-l);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-lift);
    animation: fe-float 5s ease-in-out infinite alternate;
    transition: transform var(--t-med) var(--ease-standard),
                box-shadow var(--t-med) var(--ease-standard);
}
.fe-record figure:hover img {
    transform: translateY(-6px) scale(1.02) rotate(-0.4deg);
    box-shadow: 0 28px 56px rgba(20, 26, 34, 0.22);
    animation-play-state: paused;
}
@keyframes fe-float {
    from { transform: translateY(0); }
    to   { transform: translateY(-10px); }
}
.fe-record figcaption {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    margin-top: var(--space-3);
}
/* Video evidence (lab demonstration) — presented like a mounted screen */
.fe-video { margin: var(--space-6) 0 0; }
.fe-video-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    margin-bottom: var(--space-3);
}
.fe-video-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: var(--r-l);
    overflow: hidden;
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-panel);
    background: var(--panel);
}
.fe-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* Embedded third-party content (forms, widgets) of variable height —
   same bordered-panel language as fe-video-frame, without the locked
   aspect ratio. Light by default (not the dark instrument-panel chassis):
   third-party embeds like Tally forms assume dark text on a light ground. */
.fe-embed-frame {
    border-radius: var(--r-l);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-panel);
    background: var(--paper-raised);
    padding: var(--space-5);
}
.fe-embed-frame iframe { display: block; width: 100%; border: none; }
.fe-video figcaption {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    margin-top: var(--space-3);
}

.fe-cred-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.fe-cred-list li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--rule);
    font-size: var(--fs-small);
    display: flex;
    gap: var(--space-3);
}
.fe-cred-list li::before {
    content: "—";
    color: var(--fe-orange);
    flex-shrink: 0;
}

/* Compact point rows (sustainability) */
.fe-point-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4) var(--space-6);
}
.fe-point {
    position: relative;
    border-top: 1px solid var(--rule);
    padding-top: var(--space-3);
}
.fe-point::before {
    content: "";
    position: absolute;
    top: -1px; left: 0;
    height: 2px; width: 0;
    background: var(--fe-orange);
    transition: width var(--t-slow) var(--ease-standard);
}
.fe-point:hover::before { width: 100%; }
.fe-point h4 { font-size: var(--fs-body); margin-bottom: var(--space-2); }
.fe-point p { font-size: var(--fs-small); color: var(--ink-muted); margin: 0; }

/* =====================================================
   13. CTA Section (fe-cta)
===================================================== */
.fe-cta {
    background: var(--paper-raised);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: var(--space-8) 0;
}
.fe-cta .fe-cta-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-5); }

/* =====================================================
   Address block (fe-address)
===================================================== */
/* Sans-set contact rows with stroke icons — an address is a place,
   not data, so it doesn't wear the mono face. */
.fe-address {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-5) 0;
}
.fe-address-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--fs-small);
    line-height: 1.7;
}
.fe-address-row .fe-ico { margin-top: 3px; }
.fe-address-row:hover .fe-ico { color: var(--fe-orange); }

/* =====================================================
   Forms
===================================================== */
.fe-form .fe-field { margin-bottom: var(--space-4); }
.fe-form label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    margin-bottom: var(--space-1);
}
.fe-form input, .fe-form textarea {
    width: 100%;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--r-s);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    color: var(--ink);
    transition: box-shadow var(--t-fast) var(--ease-standard), border-color var(--t-fast) var(--ease-standard);
}
.fe-form input:focus, .fe-form textarea:focus {
    outline: none;
    border-color: var(--fe-orange);
    box-shadow: 0 0 0 2px rgba(221, 94, 7, 0.25);
}

/* =====================================================
   Revenue Estimator (calculator.html):
   fe-calc — native <details> accordion card per calculator;
   fe-datasheet — results as a mono engineering datasheet.
===================================================== */
.fe-currency {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}
.fe-currency label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
}
.fe-currency select {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--r-s);
    padding: 8px 12px;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-standard),
                box-shadow var(--t-fast) var(--ease-standard);
}
.fe-currency select:focus {
    outline: none;
    border-color: var(--fe-orange);
    box-shadow: 0 0 0 2px rgba(221, 94, 7, 0.25);
}

.fe-calc {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    margin-bottom: var(--space-4);
    overflow: hidden;
    transition: box-shadow var(--t-fast) var(--ease-standard);
}
.fe-calc[open] { box-shadow: var(--shadow-lift); }
.fe-calc summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    transition: background var(--t-fast) var(--ease-standard);
}
.fe-calc summary::-webkit-details-marker { display: none; }
.fe-calc summary:hover { background: var(--paper); }
.fe-calc summary .num {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--fe-orange);
}
.fe-calc summary h3 { margin: 0; font-size: var(--fs-4); }
.fe-calc summary .chev {
    margin-left: auto;
    align-self: center;
    color: var(--ink-muted);
    transition: transform var(--t-med) var(--ease-standard);
}
.fe-calc summary .chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; display: block; }
.fe-calc[open] summary { border-bottom: 1px solid var(--rule); }
.fe-calc[open] summary .chev { transform: rotate(180deg); }
.fe-calc-body { padding: var(--space-5); }
.fe-calc-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-4);
}
@media (max-width: 767px) { .fe-calc-cols { grid-template-columns: 1fr; gap: var(--space-4); } }
.fe-calc .fe-calc-group {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rule);
    padding-bottom: var(--space-2);
    margin: 0 0 var(--space-4);
}
.fe-calc-result { margin-top: var(--space-6); }
.fe-calc-result .fe-btn { margin-top: var(--space-5); }
.fe-datasheet-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    margin-bottom: var(--space-3);
}
.fe-datasheet-wrap { overflow-x: auto; }
.fe-datasheet {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
}
.fe-datasheet th {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    color: var(--ink-muted);
    text-align: left;
    padding: var(--space-2) var(--space-4) var(--space-2) 0;
    border-bottom: 1px solid var(--ink);
}
.fe-datasheet td {
    padding: var(--space-3) var(--space-4) var(--space-3) 0;
    border-bottom: 1px solid var(--rule);
}
.fe-datasheet td + td { font-family: var(--font-mono); }
.fe-datasheet tfoot td {
    font-weight: 600;
    border-bottom: none;
    border-top: 2px solid var(--ink);
}
.fe-datasheet tfoot td:last-child { font-family: var(--font-mono); color: var(--fe-orange-deep); }
/* result reveal pulse (same class the calculator logic toggles) */
.highlight-flash { animation: fe-calc-flash 1200ms var(--ease-standard); }
@keyframes fe-calc-flash {
    0% { background: rgba(221, 94, 7, 0.10); }
    100% { background: transparent; }
}
/* inputs with a fixed unit suffix (t/yr, %, °C …) */
.fe-input-unit { position: relative; }
.fe-input-unit input { padding-right: 76px; }
.fe-input-unit .unit {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    pointer-events: none;
}
/* inline validation (replaces alert()): heat-red = alarm, from the P&ID palette */
.fe-field .fe-field-err {
    display: none;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--flow-heat);
    margin-top: var(--space-1);
}
.fe-field.invalid input { border-color: var(--flow-heat); }
.fe-field.invalid input:focus { box-shadow: 0 0 0 2px rgba(226, 73, 47, 0.22); }
.fe-field.invalid .fe-field-err { display: block; }
/* live composition sum readout under the sludge-analysis column */
.fe-calc-sum {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    margin-top: var(--space-1);
}
.fe-calc-sum.over { color: var(--flow-heat); font-weight: 500; }
/* revenue share bar inside datasheet revenue cells */
.fe-share {
    display: block;
    width: min(180px, 100%);
    height: 4px;
    border-radius: 2px;
    background: rgba(28, 37, 48, 0.10);
    margin-top: 6px;
    overflow: hidden;
}
.fe-share span {
    display: block;
    height: 100%;
    background: var(--flow-value);
    border-radius: 2px;
    transition: width var(--t-slow) var(--ease-standard);
}

/* =====================================================
   13b. Application cards (fe-app-grid)
===================================================== */
.fe-app-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
@media (max-width: 767px) { .fe-app-grid { grid-template-columns: 1fr; } }
.fe-app-card {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    padding: var(--space-5);
    transition: box-shadow var(--t-fast) var(--ease-standard),
                transform var(--t-fast) var(--ease-standard);
}
.fe-app-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.fe-app-card .fe-ico {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-s);
    background: rgba(221, 94, 7, 0.10);
    color: var(--fe-orange);
    margin-bottom: var(--space-4);
}
.fe-app-card .fe-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fe-app-card h4 { font-size: var(--fs-4); margin-bottom: var(--space-2); }
.fe-app-card p { font-size: var(--fs-small); color: var(--ink-muted); margin: 0; }

/* =====================================================
   13c. Sequenced-process step rail (fe-steps)
   Used by process instruments that explain a cycle one stage
   at a time (design/04 §4 — "process engineer" animation mode).
===================================================== */
.fe-steps {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}
.fe-steps button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    padding: var(--space-2) var(--space-1);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    transition: color var(--t-fast) var(--ease-standard);
}
.fe-steps button .dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--rule);
    flex-shrink: 0;
    transition: background var(--t-fast) var(--ease-standard),
                transform var(--t-fast) var(--ease-standard);
}
.fe-steps button:hover { color: var(--ink); }
.fe-steps button[aria-current="step"] { color: var(--fe-orange-deep); }
.fe-steps button[aria-current="step"] .dot { background: var(--fe-orange); transform: scale(1.3); }
.fe-steps .rule { flex: 1 1 auto; height: 1px; background: var(--rule); min-width: 8px; }
@media (max-width: 767px) { .fe-steps .step-label { display: none; } }

.fe-step-caption {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--fe-orange);
    border-radius: var(--r-s);
}
.fe-step-caption .step-tag {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--fe-orange-deep);
    letter-spacing: 0.04em;
    margin-bottom: var(--space-1);
}
.fe-step-caption .step-desc { font-size: var(--fs-small); color: var(--ink-muted); margin: 0; }

/* =====================================================
   14. Footer (fe-footer)
===================================================== */
.fe-footer {
    border-top: 1px solid var(--rule);
    padding: var(--space-8) 0 var(--space-6);
    background: var(--paper);
}
.fe-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-7);
}
@media (max-width: 767px) { .fe-footer-grid { grid-template-columns: 1fr; gap: var(--space-5); } }
.fe-footer-brand img { height: 38px; display: block; margin-bottom: var(--space-4); }
.fe-footer-brand > a { display: inline-block; border-bottom: none; }
.fe-footer-brand p { font-size: var(--fs-small); color: var(--ink-muted); max-width: 48ch; }
.fe-footer h4 {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.fe-footer address {
    font-style: normal;
    font-size: var(--fs-small);
    color: var(--ink);
    line-height: 1.8;
}
.fe-footer ul { list-style: none; margin: 0; padding: 0; }
.fe-footer ul li { margin-bottom: var(--space-2); }
.fe-footer ul a { font-size: var(--fs-small); border-bottom: none; text-decoration-color: transparent; }
.fe-footer ul a:hover { text-decoration-color: var(--fe-orange); }
.fe-footer-legal {
    margin-top: var(--space-7);
    padding-top: var(--space-4);
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
}

/* =====================================================
   Mobile alignment
===================================================== */
/* On narrow screens the dossier's hard left edge reads unfinished:
   centre the landmarks (hero, section headings, standalone CTAs,
   footer) while body copy stays left-set for readability. */
@media (max-width: 767px) {
    .fe-hero-text { text-align: center; }
    .fe-hero-text h1 { margin-left: auto; margin-right: auto; }
    .fe-tech-hero { text-align: center; }
    .fe-tech-hero .fe-tech-sub { margin-left: auto; margin-right: auto; }
    .fe-keyfig { text-align: left; }
    .fe-section-head h2 { text-align: center; }
    .fe-section-head::after {
        left: calc(50% - 32px);
        transform-origin: center;
    }
    .fe-cta h2 { text-align: center; }
    .fe-cta .fe-cta-actions { justify-content: center; }
    .fe-record figcaption { text-align: center; }
    .fe-footer-grid { text-align: center; }
    .fe-footer-brand img { margin-left: auto; margin-right: auto; }
    .fe-footer-brand p { margin-left: auto; margin-right: auto; }
    .fe-footer-legal { justify-content: center; text-align: center; }
}

/* =====================================================
   Reveal & count-up utilities
===================================================== */
.fe-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--t-med) var(--ease-standard),
                transform var(--t-med) var(--ease-standard);
}
.fe-reveal.revealed { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .fe-reveal { opacity: 1; transform: none; transition: none; }
    .fe-nav, .fe-rail, .fe-btn, .fe-tech-card { transition: none; }
    .fe-record img { animation: none; }
    .fe-point::before { transition: none; }
    .fe-section-head::after { transition: none; transform: scaleX(1); }
    .fe-btn-down, .fe-btn-down svg { animation: none !important; }
    .fe-hero-visual { animation: none; }
}