/* css/style.css */
/* ==========================================================================
   Maple Heavy Engineering - High-Performance Industrial Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted fonts (no Google Fonts round trip): they arrive with the page, so text
   does not re-flow a second after load. Licences: /fonts/LICENSE-*.txt (SIL OFL 1.1).
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Archivo'; src: url('/fonts/archivo-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
/* Noto Sans Devanagari @font-face is emitted only on Hindi pages (views/partials/head.ejs). */
/* Plain sans-serif "&" everywhere (Archivo's ampersand is stylised): only U+0026 is taken from Inter. */
@font-face { font-family: 'AmpersandSimple'; src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0026; ascent-override: 87.8%; descent-override: 21%; line-gap-override: 0%; }
/* Until the files arrive, system fonts are scaled to the same widths, so the header cannot overflow. */
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 98.2%; ascent-override: 89.4%; descent-override: 21.4%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 106.9%; ascent-override: 90.6%; descent-override: 22.6%; line-gap-override: 0%; }

/* Design Tokens & Root Variables */
:root {
    /* Brand Palette */
    --color-primary: #c40000;
    --color-primary-hover: #9e0000;
    --color-primary-bright: #e61919;
    --color-primary-glow: rgba(196, 0, 0, 0.35);

    /* Backgrounds & Surface Gradients */
    --bg-dark-base: #f8fafc;
    --bg-dark-surface: #ffffff;
    --bg-dark-elevated: #ffffff;
    --bg-dark-card: #ffffff;
    --bg-dark-card-hover: #f1f5f9;

    /* Technical Industrial Accents */
    --color-gold: #f59e0b;
    --color-steel: #8b98a5;

    /* Neutral & Text Grayscale */
    --text-dark: #0f172a;
    --text-white: #ffffff;
    --text-silver: #64748b;
    --text-gray: #475569;
    --text-muted: #94a3b8;
    --border-dark: rgba(0, 0, 0, 0.1);
    --border-light: rgba(0, 0, 0, 0.15);
    --border-accent: rgba(196, 0, 0, 0.3);

    /* --------------------------------------------------------------
       Typography System
       Display : Archivo  - squarish neo-grotesque, engineered feel
       Text    : Inter    - humanist UI face, high legibility at 14-18px
       Mono    : IBM Plex Mono - spec / data / eyebrow micro-labels
       -------------------------------------------------------------- */
    --font-heading: 'AmpersandSimple', 'Archivo', 'Archivo Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-tech: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;

    /* Type scale - fluid, ~1.25 ratio, clamped so nothing runs away
       on ultrawide or collapses on mobile. */
    --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
    --fs-h1: clamp(2.25rem, 1.45rem + 3.2vw, 4rem);
    --fs-h2: clamp(1.875rem, 1.3rem + 2.3vw, 3rem);
    --fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    --fs-h4: clamp(1.185rem, 1.05rem + 0.55vw, 1.5rem);
    --fs-h5: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --fs-lead: clamp(1.0625rem, 1rem + 0.42vw, 1.3125rem);
    --fs-body: 1rem;
    --fs-body-sm: 0.9375rem;
    --fs-caption: 0.8125rem;
    --fs-micro: 0.6875rem;

    /* Weights - deliberately restrained. Hierarchy comes from size,
       colour and space before it comes from weight. */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    /* Tracking - optical compensation: tighter as type grows,
       looser as it shrinks or goes to caps. */
    --tracking-display: -0.035em;
    --tracking-tight: -0.022em;
    --tracking-snug: -0.012em;
    --tracking-normal: 0;
    --tracking-wide: 0.06em;
    --tracking-caps: 0.11em;
    --tracking-caps-lg: 0.16em;

    /* Leading */
    --leading-display: 0.94;
    --leading-tight: 1.08;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* Measure - caps line length for comfortable reading */
    --measure: 68ch;
    --measure-narrow: 52ch;

    /* --------------------------------------------------------------
       Layout
       Wide, enterprise-scale canvas. The container is capped generously
       and the gutter is fluid, so the shell breathes on 27" displays
       without ever pinching on a phone.
       -------------------------------------------------------------- */
    --header-height: 96px;
    --container-max: 1680px;
    --container-narrow: 1180px;
    --gutter: clamp(1.25rem, 0.6rem + 2.4vw, 4rem);

    /* --------------------------------------------------------------
       Spacing scale - 4px base, geometric-ish. Every margin, padding
       and gap in the system resolves to one of these, which is what
       makes the vertical rhythm hold together across pages.
       -------------------------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Fluid rhythm - sections and grid gaps scale with the viewport
       instead of stepping at arbitrary breakpoints. */
    --section-y: clamp(3.5rem, 2rem + 5.2vw, 7.5rem);
    --section-y-sm: clamp(2.5rem, 1.5rem + 3.4vw, 5rem);
    --stack-lg: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
    --grid-gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);
    --grid-gap-lg: clamp(1.5rem, 0.9rem + 2vw, 3rem);

    /* --------------------------------------------------------------
       Surfaces - a real elevation ladder rather than ad-hoc shadows.
       -------------------------------------------------------------- */
    --surface-0: #ffffff;
    --surface-1: #fafafa;
    --surface-2: #f4f4f2;
    --surface-3: #ebebe8;
    --surface-ink: #0d0f12;
    --surface-ink-soft: #16191e;

    --border-hairline: rgba(13, 15, 18, 0.08);
    --border-subtle: rgba(13, 15, 18, 0.14);
    --border-strong: rgba(13, 15, 18, 0.28);

    /* Radii - one family, applied by component size. */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-pill: 999px;

    /* Transitions */
    --transition-fast: 0.18s cubic-bezier(0.2, 0, 0, 1);
    --transition-base: 0.32s cubic-bezier(0.2, 0, 0, 1);
    --transition-smooth: 0.55s cubic-bezier(0.2, 0, 0, 1);

    /* Elevation - low-spread ambient + tighter key shadow. Reads as
       paper on a desk rather than a drop-shadow sticker. */
    --shadow-xs: 0 1px 2px rgba(13, 15, 18, 0.05);
    --shadow-card: 0 1px 2px rgba(13, 15, 18, 0.04), 0 4px 12px rgba(13, 15, 18, 0.05);
    --shadow-elevated: 0 2px 4px rgba(13, 15, 18, 0.04), 0 12px 32px rgba(13, 15, 18, 0.09);
    --shadow-overlay: 0 8px 16px rgba(13, 15, 18, 0.08), 0 24px 64px rgba(13, 15, 18, 0.16);
    --ring-focus: 0 0 0 3px rgba(196, 0, 0, 0.28);
}

/* Reset & Box Sizing */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--bg-dark-base);
    color: var(--text-gray);
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-dark-base);
    color: var(--text-gray);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-snug);
    overflow-x: hidden; overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    /* cv11 = single-storey g, ss03 = curved l - cleaner at small UI sizes */
    font-feature-settings: 'cv11', 'ss03';
    margin: 0;
}

/* Paragraph rag: let the browser avoid orphans and ugly line breaks. */
p {
    text-wrap: pretty;
}

/* Numbers in tables, metrics and specs should never shimmy. */
table,
.metric-number,
.stat-number,
.tb-phone-number {
    font-variant-numeric: tabular-nums;
    font-family: var(--font-heading);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-snug);
}

/* --------------------------------------------------------------------------
   Container
   Fluid gutters via --gutter. Nothing inside a container should ever need
   its own horizontal padding to avoid touching the viewport edge.
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* For long-form / centred content that shouldn't stretch the full shell. */
.container-narrow {
    width: 100%;
    max-width: var(--container-narrow);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* --------------------------------------------------------------------------
   Auto-responsive grid
   Columns are declared as a *minimum comfortable width*, not a fixed count,
   so every grid reflows on its own. This is what lets the breakpoint list
   below stay short - grids no longer need a rule per screen size.
   -------------------------------------------------------------------------- */
.auto-grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min, 280px)), 1fr));
}

/* Base Headings & Links */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--text-dark);
    font-weight: var(--fw-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    /* Balanced headline rag - the single highest-value modern type fix. */
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-h1);
    letter-spacing: var(--tracking-display);
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
    line-height: var(--leading-snug);
}

h4 {
    font-size: var(--fs-h4);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-snug);
}

h5,
h6 {
    font-size: var(--fs-h5);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-snug);
}

/* Shared eyebrow / kicker treatment: mono, caps, wide.
   Reads as an engineering spec label rather than shouty marketing. */
.section-tag,
.subline-text,
.eyebrow {
    font-family: var(--font-tech);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-feature-settings: normal;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Section Structure */
.section {
    padding-block: var(--section-y);
    position: relative;
}

/* Density modifiers, for sections that sit between two heavier ones. */
.section.section-tight {
    padding-block: var(--section-y-sm);
}

.section-header {
    margin-bottom: var(--stack-lg);
}

.section-header.center {
    text-align: center;
}

.section-tag {
    font-size: var(--fs-micro);
    color: var(--color-primary-bright);
    margin-bottom: 14px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-dark);
    margin-bottom: 18px;
    text-wrap: balance;
}

.section-subtitle {
    font-size: var(--fs-lead);
    font-weight: var(--fw-regular);
    color: var(--text-gray);
    max-width: var(--measure);
    margin-top: 16px;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-snug);
    text-wrap: pretty;
}

.section-header.center .section-subtitle {
    margin-left: auto;
    margin-right: auto;
}

.section-lead {
    font-size: var(--fs-lead);
    color: var(--text-silver);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-snug);
    margin-bottom: 22px;
    font-weight: var(--fw-regular);
    max-width: var(--measure);
    text-wrap: pretty;
}

.red-line-accent {
    width: 48px;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: 1px;
    margin-bottom: 18px;
}

.red-line-accent.center {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Top Bar
   ========================================================================== */
.site-top-bar {
    background-color: #f7f9fa;
    color: #4a5568;
    font-size: 13px;
    border-bottom: 1px solid #e2e8f0;
}

.top-bar-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: stretch;
    height: 48px;
}

.tb-address {
    display: flex;
    align-items: center;
    padding: 0 24px;
    color: #000000;
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-snug);
}

.tb-socials {
    display: flex;
    align-items: center;
    background-color: #eef1f6;
    padding: 0 20px;
    gap: 16px;
    border-right: 1px solid #e2e8f0;
}

.tb-socials a {
    color: #64748b;
    width: 16px;
    height: 16px;
    transition: color 0.2s;
}

.tb-socials a:hover {
    color: var(--color-primary);
}

.tb-lang-wrap {
    display: flex;
    align-items: center;
    padding: 0 24px;
    margin-left: auto;
    border-left: 1px solid #e2e8f0;
}

.tb-lang-wrap .lang-switch-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background-color: #ffffff;
}

.tb-lang-wrap .lang-btn {
    background: transparent;
    border: none;
    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    color: #64748b;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 2px;
    transition: all 0.2s;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-feature-settings: normal;
}

.tb-lang-wrap .lang-btn:hover {
    color: var(--color-primary);
}

.tb-lang-wrap .lang-btn.active {
    color: #ffffff;
    background-color: var(--color-primary);
}

.tb-lang-wrap .lang-sep {
    color: #cbd5e1;
}

.tb-email {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px;
    margin-right: auto;
    color: #64748b;
    border-left: 1px solid #e2e8f0;
    text-decoration: none;
    transition: color 0.2s;
}

.tb-email:hover {
    color: var(--color-primary);
}

.tb-email svg {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
}

.tb-phone-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    background-color: #ffffff;
    border-left: 1px solid #e2e8f0;
    text-decoration: none;
}

.tb-phone-wrap:hover .tb-phone-number,
.tb-phone-wrap:hover .tb-phone-icon {
    color: var(--color-primary);
}

.tb-phone-icon {
    width: 32px;
    height: 32px;
    background-color: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tb-phone-icon svg {
    width: 16px;
    height: 16px;
}

.tb-phone-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tb-phone-label {    font-size: var(--fs-micro);
    color: #64748b;
    line-height: 1;
    margin-bottom: 2px;
    font-family: var(--font-tech);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-feature-settings: normal;
}

.tb-phone-number {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Full-bleed bar. A floating pill reads consumer/startup; a bar that
       spans the viewport with a hairline rule reads institutional, which
       is the register a multinational operates in.

       DO NOT put backdrop-filter (or filter/transform/will-change) on this
       element or on its pseudo-elements. Any of them makes the header a
       containing block for position:fixed descendants, and the mobile nav
       drawer is a fixed descendant: it then resolves right:-100% against
       the 76px bar instead of the viewport and never slides on screen.
       A solid bar is also the more corporate treatment - frosted glass is
       a consumer-app idiom. */
    background: #ffffff;
    border-bottom: 1px solid var(--border-hairline);
    z-index: 40;
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base);
}

.site-header.scrolled {
    border-bottom-color: var(--border-subtle);
    box-shadow: var(--shadow-xs);
}

.header-container {
    max-width: var(--container-max);
    width: 100%;
    height: var(--header-height);
    margin: 0 auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    z-index: 10;
}

.site-header.scrolled .header-container {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* Brand Section */
.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    user-select: none;
    transition: transform var(--transition-fast);
}

.brand:hover {
    transform: none;
}

.brand-logo-img {
    height: 64px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: none;
}

.brand-divider {
    width: 1px;
    height: 36px;
    background-color: rgba(0, 0, 0, 0.15);
    margin: 0 16px;
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-title {
    font-family: var(--font-heading);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-black);
    color: #111111;
    letter-spacing: var(--tracking-wide);
    line-height: 1.15;
    text-transform: uppercase;
}

.brand-subtitle {
    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
    letter-spacing: var(--tracking-caps);
    line-height: 1.2;
    text-transform: uppercase;
}

.site-header.scrolled .brand-title {
    color: #111111;
}

.site-header.scrolled .brand-subtitle {
    color: var(--color-primary);
}

/* Nav Menu */
.nav-wrapper {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    gap: var(--space-8);
}

.nav-item {
    display: inline-block;
}

.nav-link {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: #111111;
    text-decoration: none;
    padding: 8px 0;
    position: relative;
    transition: color var(--transition-fast);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-base);
}

.nav-link:hover,
.nav-link.active {
    color: #111111;
}

.site-header.scrolled .nav-link,
.site-header.scrolled .nav-link:hover,
.site-header.scrolled .nav-link.active {
    color: #111111;
}

.site-header.scrolled .nav-link::after {
    background-color: var(--color-primary);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.mobile-cta-wrapper {
    display: none;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.header-cta-btn {    margin-left: var(--space-4);
}

/* Language Switcher */
.lang-switch-box {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-sm);
    padding: 3px 6px;
    gap: 4px;
    transition: all var(--transition-fast);
}

.lang-switch-box:hover {
    border-color: rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.04);
}

.lang-btn {
    background: transparent;
    border: none;
    color: var(--text-gray);
    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    padding: 5px 8px;
    cursor: pointer;
    border-radius: 2px;
    transition: all var(--transition-fast);
    line-height: 1;
    text-transform: uppercase;
    font-feature-settings: normal;
}

.lang-btn:hover {
    color: var(--text-dark);
}

.lang-btn.active {
    background-color: var(--color-primary);
    color: var(--text-white);
    box-shadow: 0 2px 8px var(--color-primary-glow);
}

.lang-sep {
    color: var(--border-light);
    font-size: 10px;
    user-select: none;
}

/* Hindi Typography Enhancements */
body.lang-hi {
    font-family: 'Noto Sans Devanagari', 'Inter', sans-serif;
}

body.lang-hi h1,
body.lang-hi h2,
body.lang-hi h3,
body.lang-hi h4,
body.lang-hi h5,
body.lang-hi h6,
body.lang-hi .brand-title,
body.lang-hi .btn,
body.lang-hi .nav-link {
    font-family: 'Noto Sans Devanagari', 'AmpersandSimple', 'Archivo', sans-serif;
    letter-spacing: normal;
}

.mobile-lang-switch {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-dark);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-lang-label {    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-family: var(--font-tech);
    font-feature-settings: normal;
}

.mobile-lang-switch .lang-switch-box {
    width: 100%;
    justify-content: space-around;
    padding: 6px;
}

.mobile-lang-switch .lang-btn {
    flex: 1;
    text-align: center;
    padding: 8px 12px;
    font-size: 13px;
}

/* Global Button Styles */
.btn {
    font-family: var(--font-heading);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    cursor: pointer;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap;
    padding: 0.875rem 1.5rem;
    line-height: 1;
}

.btn-primary {    background-color: var(--color-primary);
    color: var(--text-white);
    padding: 0.875rem 1.5rem;
    box-shadow: var(--shadow-xs);
    border-color: var(--color-primary);
}

.btn-primary:hover {    background-color: var(--color-primary-hover);
    box-shadow: var(--shadow-card);
    transform: translateY(-1px);
    border-color: var(--color-primary-hover);
}

.btn-secondary {    background-color: transparent;
    color: var(--text-dark);
    border: 1px solid var(--border-strong);
    padding: 0.875rem 1.5rem;
    box-shadow: none;
}

.btn-secondary:hover {    background-color: var(--surface-ink);
    border-color: var(--surface-ink);
    color: var(--text-white);
    transform: translateY(-1px);
}

.btn-arrow {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2.5;
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.btn:hover .btn-arrow {
    transform: translateX(4px);
}

/* Hamburger Toggle Button */
.hamburger-btn {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 4px;
    transition: background-color var(--transition-fast);
    position: relative;
    z-index: 2001;
}

.hamburger-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.hamburger-line {
    width: 24px;
    height: 2.5px;
    background-color: var(--text-dark);
    border-radius: 2px;
    transition: transform var(--transition-base), opacity var(--transition-fast), background-color var(--transition-fast);
}

.hamburger-btn.active .hamburger-line:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
    background-color: var(--color-primary-bright);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
    background-color: var(--color-primary-bright);
}

.site-header.scrolled .hamburger-line {
    background-color: var(--text-dark);
}

.nav-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1999;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.nav-backdrop.active {
    display: block;
    opacity: 1;
}

/* ==========================================================================
   Hero Section (Matching Reference Image)
   ========================================================================== */
.hero-section {
    position: relative;
    min-height: min(100vh, 900px);
    display: flex;
    align-items: stretch;
    background-color: #0d1115;
    background-image: url('../images/hero-welder-latest.webp');
    background-size: cover;
    background-position: center 15%;
    background-repeat: no-repeat;
    overflow: hidden;
    border: 0;
    margin: 0;
    margin-top: 0;
    box-shadow: none;
    padding-top: var(--header-height);
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

.hero-split-left {
    flex: 1 1 100%;
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 40px 40px 60px 10%;
    z-index: 2;
    margin-top: 0;
}

.hero-split-right {
    display: none;
}

.hero-watermark {
    position: absolute;
    left: -100px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.03;
    pointer-events: none;
    z-index: -1;
}

.hero-watermark img {
    height: 80vh;
    width: auto;
}

.hero-split-right {
    flex: 0 0 45%;
    position: relative;
    z-index: 1;
}

.hero-image-layer {
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%,
            60% 30%,
            85% 20%,
            75% 45%,
            100% 50%,
            75% 65%,
            85% 85%,
            60% 80%,
            55% 100%,
            45% 100%,
            40% 80%,
            15% 85%,
            25% 65%,
            0% 50%,
            25% 45%,
            15% 20%,
            40% 30%);
    transform-origin: center right;
}

.hero-layer-red {
    background-color: var(--color-primary);
    transform: scale(1.05) translate(-1%, 0.5%);
    z-index: 1;
}

.hero-layer-white {
    background-color: #ffffff;
    transform: scale(1.03) translate(-0.5%, 0.25%);
    z-index: 2;
}

.hero-layer-img {
    z-index: 3;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center left;
}

.hero-badge {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 120px;
    height: 120px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.badge-text-ring {
    position: absolute;
    inset: 4px;
    animation: rotate 15s linear infinite;
}

.badge-logo {
    width: 40px;
    height: auto;
    z-index: 2;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 992px) {
    .hero-section {
        flex-direction: column;
    }

    .hero-split-left {
        flex: 1 1 auto;
        padding: 60px 20px;
    }

    .hero-split-right {
        flex: 1 1 400px;
        width: 100%;
        min-height: 400px;
    }

    .hero-image-mask,
    .hero-image-border {
        clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
    }

    .hero-image-border {
        clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 100%);
    }
}

.hero-content {
    max-width: 820px;
    margin-top: 80px;
    position: relative;
    z-index: 3;
}

.hero-tag {
    font-family: var(--font-tech);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    color: #FFB908;
    letter-spacing: var(--tracking-caps-lg);
    text-transform: uppercase;
    margin-bottom: 22px;
    display: inline-block;
    font-feature-settings: normal;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: var(--fs-display);
    font-weight: var(--fw-bold);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    margin-bottom: 24px;
    text-wrap: balance;
}

.title-primary {
    display: block;
    color: #ffffff;
}

.title-secondary {
    display: block;
    /* Second line steps back in colour, not in size - keeps the
       block solid while still reading as a subordinate clause. */
    color: rgba(255, 255, 255, 0.62);
    font-weight: var(--fw-bold);
}

.hero-subline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.subline-bar {
    width: 36px;
    height: 3px;
    background-color: #FFB908;
    display: inline-block;
    flex-shrink: 0;
    border-radius: 1px;
}

.subline-text {
    font-size: var(--fs-micro);
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: var(--tracking-caps-lg);
}

.hero-description {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-snug);
    color: rgba(255, 255, 255, 0.82);
    max-width: var(--measure-narrow);
    margin-bottom: 36px;
    font-weight: var(--fw-regular);
    text-wrap: pretty;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.btn-hero-primary {
    background-color: #c40000;
    color: #ffffff;
    padding: 1rem 1.75rem;
    font-family: var(--font-heading);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base);
}

.btn-hero-primary:hover {
    background-color: #a80000;
    box-shadow: 0 6px 24px rgba(196, 0, 0, 0.6);
    transform: translateY(-2px);
}

.btn-hero-outline {
    background-color: var(--text-white);
    border: 1px solid var(--text-white);
    color: var(--text-dark);
    padding: 1rem 1.75rem;
    font-family: var(--font-heading);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
}

.btn-hero-outline:hover {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-white);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transform: translateY(-2px);
}

/* ==========================================================================
   Metrics & Trust Strip
   ========================================================================== */
.metrics-strip {
    background-color: white;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    padding: 18px 0 0;
    margin-bottom: 60px;
    position: relative;
    z-index: 5;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.metric-item {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 25px 28px;
    min-height: 146px;
    background: #111111;
    border-radius: 26px;
    color: #ffffff;
    border: 1px solid rgba(17, 17, 17, 0.12);
    transition: transform var(--transition-fast);
}

.metric-item:last-child {
    border-right: none;
}

.metric-icon-wrap {
    width: 62px;
    height: 62px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
}

.metric-icon {
    width: 28px;
    height: 28px;
    stroke-width: 2.2;
}

.metric-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.metric-number {    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    color: #ffffff;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
}

.metric-label {    font-size: var(--fs-micro);
    color: rgba(255, 255, 255, 0.72);
    font-weight: var(--fw-semibold);
    margin-top: 8px;
    line-height: 1.45;
    font-family: var(--font-tech);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-feature-settings: normal;
}

/* ==========================================================================
   About Section
   ========================================================================== */
.about-section {
    background-color: #f5f5f3;
    padding-block: var(--section-y);
}

.about-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.2fr 0.9fr;
    gap: 24px;
    align-items: center;
}

.about-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: center;
}

.about-grid-2col .about-main-img {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
}

.about-visual-col {
    min-height: 500px;
}

.about-text-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.about-image-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: none;
    border: none;
    background: transparent;
    height: 100%;
}

.about-main-img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    display: block;
    border-radius: 18px;
    aspect-ratio: 1 / 1;
    filter: grayscale(0.15) contrast(1.05);
}

.about-floating-card,
.about-features-grid,
.text-link-accent,
.about-text-col .body-text,
.about-text-col .red-line-accent {
    display: none;
}

.about-text-col .section-tag {
    align-self: center;
    margin: 0 auto 22px;
    min-width: 170px;
    min-height: 40px;
    background: transparent;
    border: 2px solid rgba(17, 17, 17, 0.9);
    color: #111111;
    border-radius: 999px;
    padding: 8px 22px;
    font-family: var(--font-tech);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-feature-settings: normal;
}

.about-text-col .section-title {    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    color: #111111;
    font-weight: var(--fw-bold);
    margin: 0 0 18px;
    text-transform: uppercase;
    max-width: 560px;
}

.about-text-col .section-lead {
    color: rgba(17, 17, 17, 0.82);
    font-size: var(--fs-lead);
    line-height: var(--leading-normal);
    max-width: 760px;
    margin: 0 0 8px;
    text-align: center;
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

.about-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
}

.about-cta-row .btn-secondary {
    background-color: #c40000;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 10px 18px 10px 22px;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    box-shadow: none;
}

.about-cta-row .btn-secondary::after {
    content: "→";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    margin-left: 12px;
    font-size: 22px;
    line-height: 1;
    font-weight: 500;
}

.text-link-accent {
    display: none;
}

.about-image-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-elevated);
    border: 1px solid var(--border-dark);
}

.about-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 18px;
    transition: transform var(--transition-smooth);
}

.about-image-card:hover .about-main-img {
    transform: scale(1.03);
}

.about-floating-card {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    background: rgba(18, 23, 33, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--color-primary);
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 16px;
}

.floating-card-icon {
    font-size: 24px;
}

.floating-title {
    display: block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 14px;
    color: var(--text-white);
}

.floating-sub {
    font-size: 12px;
    color: var(--text-gray);
}

/* ==========================================================================
   Demanding Sectors Served
   ========================================================================== */
.sectors-section {
    background-color: #f2f2f0;
border-top: 0;
    border-bottom: 0;
    padding-block: var(--section-y);
}

.sectors-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 30px;
}

.sectors-header .section-tag {
    min-width: 190px;
    min-height: 40px;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1.5px solid rgba(17, 17, 17, 0.7);
    background: transparent;
    color: #111111;
    font-size: var(--fs-caption);
    letter-spacing: var(--tracking-caps);
    font-weight: var(--fw-medium);
    margin: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-tech);
    text-transform: uppercase;
    font-feature-settings: normal;
}

.sectors-header .section-title {
    width: 100%;
    max-width: 820px;
    margin: 0 0 0 auto;
    font-size: var(--fs-h1);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: #111111;
    text-align: left;
    font-weight: var(--fw-bold);
    font-family: var(--font-heading);
}

.sectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--grid-gap);
    align-items: stretch;
}

.sector-card {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid #000000;
    border-radius: 25px;
    padding: 24px 26px 30px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: none;
}

.featured-card {
    border-color: #000000;
    box-shadow: none;
}

.sector-icon-box {
    width: 48px;
    height: 48px;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #111111;
    margin: 0 0 24px;
}

.sector-icon-box svg {
    width: 30px;
    height: 30px;
    stroke-width: 2.2;
}

.sector-title {    font-size: var(--fs-h3);
    line-height: var(--leading-snug);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight);
    color: #111111;
    margin: 0 0 14px;
    font-family: var(--font-heading);
}

.sector-desc {    font-size: var(--fs-body);
    line-height: var(--leading-normal);
    color: rgba(17, 17, 17, 0.78);
    margin: 0;
    max-width: 100%;
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

.sector-bullets,
.sector-num,
.sector-card::before {
    display: none !important;
}

/* ==========================================================================
   Core Capabilities & Services
   ========================================================================== */
.capabilities-section {
    background-color: #f3f3f1;
    padding-block: var(--section-y);
}

.capabilities-header {
    display: grid;
    grid-template-columns: minmax(170px, max-content) minmax(0, 2.4fr) minmax(min(100%, 230px), 1fr);
    align-items: center;
    column-gap: 28px;
    margin-bottom: 42px;
}

.capabilities-pill-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 12px;
}

.section-tag.capabilities-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-width: 170px;
    min-height: 40px;
    padding: 10px 22px;
    border: 1.5px solid rgba(17, 17, 17, 0.8);
    border-radius: 999px;
    background: transparent;
    color: #111111;
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
    font-family: var(--font-tech);
    font-feature-settings: normal;
}

.capabilities-title {
    margin: 0;
    font-size: var(--fs-h1);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: #111111;
    font-weight: var(--fw-bold);
    text-align: left;
    font-family: var(--font-heading);
}

.capabilities-summary {
    max-width: 430px;
    margin: 0;
    color: rgba(17, 17, 17, 0.8);
    font-size: var(--fs-lead);
    line-height: var(--leading-normal);
    text-align: left;
    justify-self: end;
    align-self: center;
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--grid-gap-lg);
}

.capability-card {
    background-color: var(--bg-dark-card);
    border: 1px solid var(--border-dark);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all var(--transition-base);
}

.capability-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-5px);
    box-shadow: var(--shadow-card);
}

.cap-image-wrap {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.cap-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-smooth);
}

.capability-card:hover .cap-img {
    transform: scale(1.06);
}

.cap-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background-color: rgba(10, 13, 18, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--border-light);
    color: var(--color-primary-bright);
    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    font-feature-settings: normal;
}

.cap-content {
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.cap-title {    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    margin-bottom: 12px;
    color: #000000;
    line-height: var(--leading-snug);
    font-family: var(--font-heading);
    letter-spacing: var(--tracking-tight);
}

.cap-desc {    font-size: var(--fs-body-sm);
    color: #111111;
    line-height: var(--leading-normal);
    margin-bottom: 20px;
    flex-grow: 1;
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

.cap-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid var(--border-dark);
    padding-top: 16px;
}

.spec-tag {
    background-color: transparent;
    border: 1px solid #000000;
    color: #000000;
    font-size: var(--fs-micro);
    font-weight: var(--fw-medium);
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    font-family: var(--font-tech);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-feature-settings: normal;
}

/* ==========================================================================
   State-of-the-Art Facilities
   ========================================================================== */
.facilities-section {
    background-color: var(--bg-dark-surface);
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
}

.facilities-section .section-title {
    color: #000000;
}

.facilities-section .section-lead {
    color: #111111;
}

.facilities-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: flex-start;
}

.facility-specs-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--grid-gap);
    margin-top: 36px;
}

.fac-spec-box {
    background-color: var(--bg-dark-card);
    border: 1px solid var(--border-dark);
    padding: 20px 18px;
    border-radius: 18px;
}

.fac-spec-val {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: #000000;
    line-height: var(--leading-tight);
    margin-bottom: 4px;
    letter-spacing: var(--tracking-display);
}

.fac-spec-name {    font-size: var(--fs-micro);
    color: #111111;
    font-weight: var(--fw-semibold);
    line-height: 1.45;
    font-family: var(--font-tech);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-feature-settings: normal;
}

.facilities-equipment-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.equipment-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background-color: var(--bg-dark-card);
    border: 1px solid var(--border-dark);
    padding: 20px 24px;
    border-radius: 18px;
    transition: all var(--transition-fast);
}

.equipment-card:hover {
    background-color: var(--bg-dark-card-hover);
    border-color: rgba(196, 0, 0, 0.4);
    transform: translateX(4px);
}

.eq-icon {
    font-size: 26px;
    flex-shrink: 0;
    margin-top: 2px;
}

.eq-details h4, .eq-details h3 {    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    margin-bottom: 6px;
    color: #000000;
    font-family: var(--font-heading);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

.eq-details p {    font-size: var(--fs-caption);
    color: #111111;
    line-height: var(--leading-normal);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

/* ==========================================================================
   Featured Projects Showcase
   ========================================================================== */
.projects-section {
    background-color: var(--bg-dark-base);
}

.project-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.filter-btn {
    background-color: var(--bg-dark-surface);
    border: 1px solid var(--border-dark);
    color: var(--text-silver);
    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-caps);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-transform: uppercase;
    font-feature-settings: normal;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-white);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--grid-gap-lg);
    margin-top: 48px;
}

.project-card {
    background-color: var(--bg-dark-card);
    border: 1px solid var(--border-dark);
    border-radius: 18px;
    overflow: hidden;
    transition: all var(--transition-base);
}

.project-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-6px);
    box-shadow: var(--shadow-card);
}

.proj-img-wrap {
    position: relative;
    height: 260px;
    overflow: hidden;
}

.proj-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-smooth);
}

.project-card:hover .proj-img {
    transform: scale(1.05);
}

.proj-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background-color: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    font-feature-settings: normal;
}

.proj-body {
    padding: 28px 26px;
}

.proj-code {
    display: inline-block;
    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--color-gold);
    margin-bottom: 6px;
    text-transform: uppercase;
    font-feature-settings: normal;
}

.proj-title {    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    color: #000000;
    margin-bottom: 12px;
    line-height: var(--leading-snug);
    font-family: var(--font-heading);
    letter-spacing: var(--tracking-tight);
}

.proj-desc {    font-size: var(--fs-body-sm);
    color: #111111;
    line-height: var(--leading-normal);
    margin-bottom: 20px;
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

.proj-specs-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid var(--border-dark);
    padding-top: 16px;
    font-size: var(--fs-caption);
    color: #111111;
    font-weight: var(--fw-regular);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-snug);
}

.proj-specs-bar strong {
    color: #000000;
}

/* ==========================================================================
   Quality & ASME Certifications Matrix
   ========================================================================== */
.quality-section {
    background-color: var(--bg-dark-surface);
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
}

.quality-box {
    background-color: var(--bg-dark-base);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-lg);
    padding: 60px 48px;
}

.certs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--grid-gap);
    margin: 40px 0 60px;
}

.cert-card {
    background-color: var(--bg-dark-card);
    border: 1px solid var(--border-dark);
    border-radius: 18px;
    padding: 24px 16px;
    text-align: center;
    transition: all var(--transition-fast);
}

.cert-card:hover {
    border-color: var(--color-primary-bright);
    background-color: var(--bg-dark-card-hover);
    transform: translateY(-4px);
}

.cert-stamp-badge {
    display: inline-block;
    background-color: rgba(196, 0, 0, 0.15);
    border: 1px solid rgba(196, 0, 0, 0.4);
    color: var(--color-primary-bright);
    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-feature-settings: normal;
}

.cert-card h4 {    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    margin-bottom: 8px;
    color: #000;
    font-family: var(--font-heading);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

.cert-card p {    font-size: var(--fs-caption);
    color: #000;
    line-height: var(--leading-normal);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

/* Quality Workflow */
.quality-workflow {
    border-top: 1px solid var(--border-dark);
    padding-top: 48px;
    text-align: center;
}

.workflow-title {    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    margin-bottom: 36px;
    color: #000;
    font-family: var(--font-heading);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

.workflow-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    position: relative;
}

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.step-circle {
    width: 44px;
    height: 44px;
    background-color: var(--bg-dark-elevated);
    border: 2px solid var(--color-primary);
    color: #000;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    z-index: 2;
}

.step-name {    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    color: #000;
    line-height: 1.4;
    max-width: 160px;
    font-family: var(--font-tech);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-feature-settings: normal;
}

/* ==========================================================================
   Contact & RFQ Section
   ========================================================================== */
.contact-section {
    background-color: var(--bg-dark-base);
}

.contact-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: flex-start;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 36px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background-color: var(--bg-dark-surface);
    border: 1px solid var(--border-dark);
    padding: 18px 20px;
    border-radius: 18px;
}

.contact-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.contact-item h5, .contact-item h3 {    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    margin-bottom: 4px;
    color: #000;
    font-family: var(--font-heading);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

.contact-item p {    font-size: var(--fs-body-sm);
    color: #000;
    line-height: var(--leading-normal);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

.form-container {
    background-color: var(--bg-dark-card);
    border: 1px solid var(--border-dark);
    border-radius: 18px;
    padding: 40px;
    box-shadow: var(--shadow-card);
}

.form-title {    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    margin-bottom: 6px;
    color: #000;
    font-family: var(--font-heading);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

.form-sub {    font-size: var(--fs-body-sm);
    color: #000;
    margin-bottom: 28px;
    font-weight: var(--fw-regular);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-snug);
}

.rfq-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.rfq-form .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

.rfq-form label {    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--text-silver);
    margin-bottom: 8px;
    text-transform: uppercase;
    font-feature-settings: normal;
}

.rfq-form input,
.rfq-form select,
.rfq-form textarea {
    background-color: var(--bg-dark-base);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    color: #000;
    font-family: var(--font-body);
    font-size: 13.5px;
    padding: 12px 14px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.rfq-form input:focus,
.rfq-form select:focus,
.rfq-form textarea:focus {
    outline: none;
    border-color: var(--color-primary-bright);
    box-shadow: 0 0 0 3px rgba(196, 0, 0, 0.2);
}

.rfq-form input::placeholder,
.rfq-form textarea::placeholder {
    color: var(--text-muted);
}

.rfq-form select {
    cursor: pointer;
}

.btn-block {
    width: 100%;
    padding: 15px;
}

.form-feedback {
    margin-top: 18px;
    padding: 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.form-feedback.success {
    background-color: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(3, 24, 36, 0.98), rgba(4, 21, 33, 0.99)),
        var(--bg-dark-base);
    color: #c2ced5;
    border-top: 1px solid rgba(115, 161, 181, 0.2);
    border-bottom: 2px solid rgba(69, 177, 194, 0.65);
    padding: 96px 0 28px;
}

.site-footer::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 38% -10% -30%;
    opacity: 0.32;
    background-image:
        linear-gradient(rgba(53, 111, 137, 0.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(53, 111, 137, 0.25) 1px, transparent 1px);
    background-size: 68px 68px;
    transform: perspective(420px) rotateX(58deg) scale(1.35);
    transform-origin: center top;
}

.site-footer::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, transparent 0 18%, rgba(230, 25, 25, 0.08) 18.1%, transparent 18.2% 81.8%, rgba(230, 25, 25, 0.05) 81.9%, transparent 82%);
    pointer-events: none;
}

.footer-reference-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 42px;
    border-bottom: 1px solid rgba(115, 161, 181, 0.2);
    margin-bottom: 0;
}

.footer-reference-intro h2 {
    color: #f4f7f8;
    font-size: var(--fs-h1);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
}

.footer-reference-intro h2 span {
    color: var(--color-primary-bright);
}

.footer-quote-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
    padding: 12px 12px 12px 24px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    transition: background var(--transition-fast), transform var(--transition-fast);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* only the arrow is the white disc; the label (wrapped in a span for translation) stays plain text */
.footer-quote-btn span[aria-hidden="true"] {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: #ffffff;
    color: var(--color-primary);
    font-size: 20px;
    line-height: 1;
}

.footer-quote-btn:hover {
    background: var(--color-primary-bright);
    transform: translateY(-2px);
}

.footer-reference-tools {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 50px;
}

.footer-newsletter-form {
    width: min(100%, 520px);
    margin-top: 24px;
}

.footer-newsletter-form label {
    display: block;
    margin-bottom: 10px;
    color: var(--text-dark);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    font-family: var(--font-tech);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-feature-settings: normal;
}

.footer-newsletter-form div {
    display: flex;
    gap: 10px;
}

.footer-newsletter-form input {
    min-width: 0;
    flex: 1;
    padding: 13px 16px;
    border: 1px solid rgba(194, 206, 213, 0.28);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.96);
    color: #17232b;
    font: inherit;
}

.footer-newsletter-form button {
    border: 0;
    border-radius: 3px;
    padding: 0 22px;
    background: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.footer-social-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-social-links a {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(194, 206, 213, 0.28);
    border-radius: 50%;
    color: #dce5e9;
    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.footer-social-links a:hover {
    border-color: var(--color-primary-bright);
    color: var(--color-primary-bright);
}

.footer-top-grid {
    display: grid;
    grid-template-columns: 1.45fr 0.85fr 0.95fr 1.1fr;
    gap: 0;
    margin-bottom: 0;
    padding-top: 32px;
    padding-bottom: 74px;
    position: relative;
    z-index: 1;
}

.footer-top-grid::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -50vw;
    right: -50vw;
    background: #ffffff;
    z-index: -1;
}

.footer-top-grid>* {
    min-width: 0;
    padding: 0 42px;
    border-left: 1px solid var(--border-light);
}

.footer-top-grid> :first-child {
    padding-left: 0;
    border-left: 0;
}

.footer-top-grid> :last-child {
    padding-right: 0;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.footer-logo {
    height: 68px;
    width: auto;
}

.fb-title {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-black);
    color: var(--text-dark);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.fb-sub {
    display: block;
    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-feature-settings: normal;
}

.footer-tagline {    max-width: 42ch;
    font-size: var(--fs-body-sm);
    line-height: var(--leading-normal);
    color: var(--text-gray);
    margin-bottom: 24px;
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
    text-wrap: pretty;
}

.footer-stamps {
    display: none;
    gap: 8px;
    flex-wrap: wrap;
}

.f-stamp {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-dark);
    color: var(--text-silver);
    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-feature-settings: normal;
}

.footer-heading {    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    color: var(--text-dark);
    margin-bottom: 24px;
    font-family: var(--font-tech);
    text-transform: uppercase;
    font-feature-settings: normal;
}

.footer-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-nav a {    font-size: var(--fs-body-sm);
    color: var(--text-gray);
    transition: color var(--transition-fast);
    font-weight: var(--fw-regular);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-snug);
}

.footer-nav a:hover {
    color: var(--color-primary);
}

.footer-addr {    font-size: var(--fs-body-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-gray);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

.footer-bottom-bar {
    border-top: 1px solid rgba(115, 161, 181, 0.2);
    padding: 18px 0 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-caption);
    color: #9db0bb;
    gap: 16px;
    letter-spacing: var(--tracking-snug);
}

.footer-bottom-bar p {
    margin: 0;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.footer-legal-links a:nth-of-type(1) {
    order: 3;
}

.footer-legal-links a:nth-of-type(2) {
    order: 1;
}

.footer-legal-links .legal-sep:nth-of-type(1) {
    order: 2;
}

.footer-legal-links a {
    color: #9db0bb;
    transition: color var(--transition-fast);
}

.footer-legal-links a:hover {
    color: var(--text-white);
}

.footer-legal-links .sep,
.footer-legal-links .legal-sep {
    color: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   Responsive Breakpoints
   --------------------------------------------------------------------------
   Deliberately short. Grids reflow on intrinsic width (see .auto-grid and
   the auto-fit templates), and spacing/type scale fluidly, so a breakpoint
   is only needed where the *structure* genuinely changes - navigation
   becoming a drawer, a bespoke ratio collapsing, a bar becoming a stack.
   Ordered widest to narrowest so the cascade reads top-down.
   ========================================================================== */

/* ---- Navigation collapses to a drawer ---- */
@media (max-width: 1024px) {
    .hamburger-btn {
        display: flex;
    }

    .header-cta-btn {
        display: none;
    }

    .nav-wrapper {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(360px, 88vw);
        height: 100dvh;
        background-color: var(--surface-0);
        border-left: 1px solid var(--border-hairline);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: calc(var(--header-height) + var(--space-6)) var(--space-6) var(--space-10);
        box-shadow: var(--shadow-overlay);
        z-index: 2000;
        transition: right var(--transition-base);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav-wrapper.active {
        right: 0;
    }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link {
        font-size: var(--fs-body);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-snug);
        display: flex;
        align-items: center;
        min-height: 52px;
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--border-hairline);
        width: 100%;
        color: var(--text-dark);
    }

    .nav-link:hover,
    .nav-link.active,
    .site-header.scrolled .nav-wrapper .nav-link.active {
        color: var(--color-primary);
    }

    .nav-link::after {
        display: none;
    }

    .mobile-cta-wrapper {
        display: block;
        margin-top: var(--space-8);
        width: 100%;
    }

    .btn-mobile {
        width: 100%;
        padding: var(--space-4);
    }

    .workflow-steps {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

/* ---- Bars become stacks ---- */
@media (max-width: 768px) {
    .site-top-bar {
        display: none;
    }

    .hero-section {
        min-height: 0;
        padding-top: calc(var(--header-height) + var(--space-10));
        padding-bottom: var(--space-16);
    }

    .hero-content {
        margin-top: 0;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-hero-primary,
    .btn-hero-outline,
    .about-cta-row .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .footer-reference-intro,
    .footer-reference-tools {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-newsletter-form {
        width: 100%;
    }

    .footer-newsletter-form div {
        flex-wrap: wrap;
    }

    .footer-newsletter-form input {
        flex-basis: 180px;
    }

    .footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .footer-legal-links {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: var(--space-2);
    }

    .quality-box,
    .form-container {
        padding: var(--space-6);
    }
}

/* ---- Small phones ---- */
@media (max-width: 480px) {
    :root {
        --header-height: 76px;
    }

    .brand-logo-img {
        height: 50px;
    }

    .brand-divider {
        margin: 0 var(--space-2);
        height: 26px;
    }

    /* Card padding steps down so copy keeps its measure on a 360px screen. */
    .sector-card,
    .cert-card,
    .value-card,
    .alloy-card,
    .perk-card,
    .quality-card,
    .contact-detail-card,
    .fac-spec-box,
    .story-details-box,
    .cap-content,
    .proj-body,
    .story-body,
    .program-body,
    .blog-body,
    .expertise-deep-content {
        padding: var(--space-5);
    }

    .page-hero-text-panel {
        padding: var(--space-5);
        margin-left: 0;
    }
}

/* ==========================================================================
   Inner Page Hero & Breadcrumbs
   ========================================================================== */
.page-hero {
    position: relative;
    padding: calc(var(--header-height) + var(--section-y)) 0 var(--section-y);
    background-color: #0b0e14;
    border-bottom: 1px solid var(--border-dark);
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(196, 0, 0, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 10% 80%, rgba(245, 158, 11, 0.04) 0%, transparent 50%);
    pointer-events: none;
}

.page-hero-inner {
    position: relative;
    z-index: 2;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.page-hero-text-panel {
    background: rgba(255, 255, 255, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    margin-left: -40px;
}

@media (max-width: 768px) {
    .page-hero-text-panel {
        padding: 24px;
        margin-left: -24px;
    }
}

.home-hero-panel {
    background: rgba(255, 255, 255, 0.10);
    border: none;
    border-radius: var(--radius-xl);
    /* The translucent panel reads as a deliberate plate over the
       photograph rather than a full-bleed wash, so it is inset to 90% of
       the hero and centred - leaving 5% of raw image either side. */
    width: 90%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-block: var(--section-y-sm);
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-family: var(--font-tech);
    font-feature-settings: normal;
}

.breadcrumb-link {
    color: var(--text-gray);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
    color: var(--color-primary-bright);
}

.breadcrumb-separator {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

.breadcrumb-current {
    color: var(--text-white);
}

.page-hero-tag {
    display: inline-block;
    font-family: var(--font-tech);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    color: var(--color-primary-bright);
    text-transform: uppercase;
    margin-bottom: 12px;
    font-feature-settings: normal;
}

.page-hero-title {    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    color: var(--text-white);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    margin-bottom: 18px;
    max-width: 920px;
}

.page-hero-subtitle {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    color: var(--text-silver);
    line-height: var(--leading-normal);
    max-width: var(--measure);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
    text-wrap: pretty;
}

/* ==========================================================================
   About Us Page Components
   ========================================================================== */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 24px;
    margin-top: 40px;
}

.value-card {
    background-color: var(--bg-dark-surface);
    border: 1px solid var(--border-dark);
    padding: 32px 24px;
    border-radius: 18px;
    transition: all var(--transition-base);
}

.value-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-light);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.value-icon {
    width: 48px;
    height: 48px;
    background-color: rgba(196, 0, 0, 0.12);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-bright);
    margin-bottom: 20px;
}

.value-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: 12px;
}

.value-desc {
    color: var(--text-gray);
    font-size: var(--fs-body-sm);
    line-height: var(--leading-normal);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

/* About: vision & mission (two cards) and the ten core values (an ordered list using the value-card style) */
.vision-mission-grid { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.vision-mission-grid .value-desc + .value-desc { margin-top: 12px; }
.core-values-list { list-style: none; padding: 0; margin-top: 0; }
.core-value-number { color: var(--color-primary-bright); margin-right: 4px; }

/* Timeline */
.timeline-list {
    position: relative;
    max-width: 860px;
    margin: 40px auto 0;
    padding-left: 30px;
    border-left: 2px solid var(--border-light);
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -39px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--color-primary);
    border: 3px solid var(--bg-dark-base);
    box-shadow: 0 0 10px var(--color-primary-glow);
}

.timeline-year {    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    color: var(--color-primary-bright);
    margin-bottom: 6px;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-feature-settings: normal;
}

.timeline-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 8px;
}

.timeline-text {
    color: var(--text-gray);
    font-size: var(--fs-body-sm);
    line-height: var(--leading-normal);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

/* Leadership Grid */
.leadership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 30px;
    margin-top: 40px;
}

.leader-card {
    background-color: var(--bg-dark-surface);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-base);
}

.leader-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-light);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.leader-avatar-box {
    height: 220px;
    background: linear-gradient(135deg, #151922 0%, #1e2430 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 2px solid var(--color-primary);
}

.leader-avatar-icon {
    width: 80px;
    height: 80px;
    color: var(--text-muted);
}

.leader-info {
    padding: 24px;
}

.leader-name {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: 4px;
}

.leader-role {    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    color: var(--color-primary-bright);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    margin-bottom: 12px;
    font-family: var(--font-tech);
    font-feature-settings: normal;
}

.leader-bio {    font-size: var(--fs-body-sm);
    color: var(--text-gray);
    line-height: var(--leading-normal);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

/* ==========================================================================
   Expertise Page Components
   ========================================================================== */
.expertise-deep-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 40px;
}

.expertise-deep-card {
    background-color: var(--bg-dark-surface);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-md);
    padding: 36px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center;
    transition: border-color var(--transition-base);
}

.expertise-deep-card:hover {
    border-color: var(--border-light);
}

.expertise-deep-card.reverse {
    direction: rtl;
}

.expertise-deep-card.reverse>* {
    direction: ltr;
}

.expertise-deep-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-dark);
}

.expertise-deep-content {
    display: flex;
    flex-direction: column;
}

.expertise-badge {
    align-self: flex-start;
    background-color: rgba(196, 0, 0, 0.15);
    color: var(--color-primary-bright);
    border: 1px solid rgba(196, 0, 0, 0.3);
    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-feature-settings: normal;
}

.expertise-deep-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: 14px;
    line-height: 1.25;
}

.expertise-deep-text {    font-size: var(--fs-body-sm);
    color: var(--text-gray);
    line-height: var(--leading-normal);
    margin-bottom: 20px;
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

.specs-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.specs-chip {
    background-color: var(--bg-dark-elevated);
    border: 1px solid var(--border-dark);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: var(--fs-micro);
    color: var(--text-silver);
    font-weight: var(--fw-semibold);
    font-family: var(--font-tech);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-feature-settings: normal;
}

.alloy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 16px;
    margin-top: 30px;
}

.alloy-card {
    background-color: var(--bg-dark-surface);
    border: 1px solid var(--border-dark);
    padding: 20px;
    border-radius: 15px;
    transition: all var(--transition-fast);
}

.alloy-card:hover {
    border-color: var(--color-primary-bright);
    background-color: var(--bg-dark-card-hover);
}

.alloy-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: 6px;
}

.alloy-grade {    font-size: var(--fs-micro);
    color: var(--color-primary-bright);
    font-weight: var(--fw-semibold);
    margin-bottom: 8px;
    font-family: var(--font-tech);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-feature-settings: normal;
}

.alloy-desc {    font-size: var(--fs-body-sm);
    color: var(--text-muted);
    line-height: var(--leading-normal);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

/* ==========================================================================
   Courses & Programs Page Components
   ========================================================================== */
.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: 30px;
    margin-top: 40px;
}

.program-card {
    background-color: var(--bg-dark-surface);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all var(--transition-base);
    position: relative;
}

.program-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary-bright);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

.program-header {
    background: linear-gradient(135deg, rgba(26, 31, 41, 0.9) 0%, rgba(18, 22, 29, 0.9) 100%);
    padding: 24px;
    border-bottom: 1px solid var(--border-dark);
    position: relative;
}

.program-type-tag {
    display: inline-block;
    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-primary-bright);
    margin-bottom: 8px;
    font-feature-settings: normal;
}

.program-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-white);
    line-height: 1.3;
}

.program-body {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.program-meta-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
    background-color: var(--bg-dark-base);
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-dark);
}

.program-meta-item {
    font-size: 12px;
}

.meta-label {
    display: block;
    color: var(--text-muted);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    font-family: var(--font-tech);
    letter-spacing: var(--tracking-caps);
    font-feature-settings: normal;
}

.meta-val {
    color: var(--text-white);
    font-weight: 700;
}

.program-summary {    font-size: var(--fs-body-sm);
    color: var(--text-gray);
    line-height: var(--leading-normal);
    margin-bottom: 20px;
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

.program-curriculum-list {
    margin-bottom: 24px;
}

.curriculum-title {    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    color: var(--text-silver);
    letter-spacing: var(--tracking-caps);
    margin-bottom: 10px;
    font-feature-settings: normal;
}

.curriculum-item {
    font-size: 0.88rem;
    color: var(--text-gray);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.curriculum-item::before {
    content: '▪';
    color: var(--color-primary);
    font-size: 14px;
}

.program-footer {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--border-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.program-cert-badge {    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-tech);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-feature-settings: normal;
}

/* ==========================================================================
   Success Stories Page Components
   ========================================================================== */
.stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: 32px;
    margin-top: 40px;
}

.story-card {
    background-color: var(--bg-dark-surface);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
}

.story-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-light);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

.story-img-wrapper {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.story-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.story-card:hover .story-img {
    transform: scale(1.05);
}

.story-category-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background-color: rgba(12, 15, 20, 0.85);
    backdrop-filter: blur(4px);
    color: var(--color-primary-bright);
    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-feature-settings: normal;
}

.story-body {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.story-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-white);
    line-height: 1.3;
    margin-bottom: 12px;
}

.story-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
    background-color: var(--bg-dark-base);
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--border-dark);
}

.story-stat-item {
    text-align: center;
}

.story-stat-val {    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--color-primary-bright);
    display: block;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
}

.story-stat-lbl {    font-size: var(--fs-micro);
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    font-family: var(--font-tech);
    letter-spacing: var(--tracking-caps);
    font-feature-settings: normal;
}

.story-details-box {
    margin-bottom: 16px;
    font-size: var(--fs-body-sm);
    color: var(--text-gray);
    line-height: var(--leading-normal);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

.story-highlight {
    background-color: rgba(196, 0, 0, 0.08);
    border-left: 3px solid var(--color-primary);
    padding: 10px 14px;
    border-radius: 0 4px 4px 0;
    margin-bottom: 16px;
    font-size: 0.88rem;
    color: var(--text-silver);
}

/* ==========================================================================
   Careers Page Components
   ========================================================================== */
.perks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 20px;
    margin-top: 36px;
}

.perk-card {
    background-color: var(--bg-dark-surface);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    padding: 24px;
    transition: border-color var(--transition-fast);
}

.perk-card:hover {
    border-color: var(--border-light);
}

.perk-icon {
    font-size: 24px;
    margin-bottom: 12px;
    color: var(--color-primary-bright);
}

.perk-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: 8px;
}

.perk-desc {    font-size: var(--fs-body-sm);
    color: var(--text-gray);
    line-height: var(--leading-normal);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

.jobs-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
}

.job-card {
    background-color: var(--bg-dark-surface);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-md);
    padding: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    transition: all var(--transition-base);
}

.job-card:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.job-info {
    max-width: 680px;
}

.job-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.job-pill {    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    padding: 3px 10px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-family: var(--font-tech);
    font-feature-settings: normal;
}

.job-pill.dept {
    background-color: rgba(196, 0, 0, 0.15);
    color: var(--color-primary-bright);
    border: 1px solid rgba(196, 0, 0, 0.3);
}

.job-pill.type {
    background-color: var(--bg-dark-elevated);
    color: var(--text-silver);
    border: 1px solid var(--border-dark);
}

.job-pill.exp {
    background-color: rgba(245, 158, 11, 0.15);
    color: var(--color-secondary);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.job-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: 8px;
}

.job-desc {
    font-size: 0.93rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 12px;
}

.job-reqs {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ==========================================================================
   Blog & News Page Components
   ========================================================================== */
.featured-post-card {
    background-color: var(--bg-dark-surface);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    margin-top: 36px;
    transition: border-color var(--transition-base);
}

.featured-post-card:hover {
    border-color: var(--border-light);
}

.featured-post-img-wrapper {
    height: 100%;
    min-height: 320px;
}

.featured-post-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-post-body {
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.post-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.post-tag {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--color-primary-bright);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.featured-post-title {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text-white);
    line-height: 1.25;
    margin-bottom: 14px;
}

.featured-post-excerpt {
    font-size: 0.98rem;
    color: var(--text-gray);
    line-height: 1.65;
    margin-bottom: 24px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 30px;
    margin-top: 40px;
}

.blog-card {
    background-color: var(--bg-dark-surface);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all var(--transition-base);
}

.blog-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-light);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.blog-img-box {
    height: 200px;
    overflow: hidden;
}

.blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-img {
    transform: scale(1.05);
}

.blog-body {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-white);
    line-height: 1.35;
    margin-bottom: 10px;
}

.blog-excerpt {
    font-size: 0.92rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 18px;
    flex-grow: 1;
}

.blog-read-more {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    color: var(--color-primary-bright);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap var(--transition-fast);
}

.blog-read-more:hover {
    gap: 10px;
}

/* Newsletter Box */
.newsletter-card {
    background: linear-gradient(135deg, #131720 0%, #1c2330 100%);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-md);
    padding: 48px;
    text-align: center;
    max-width: 800px;
    margin: 60px auto 0;
}

.newsletter-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: 12px;
}

.newsletter-desc {
    font-size: 1rem;
    color: var(--text-silver);
    max-width: 560px;
    margin: 0 auto 24px;
}

.newsletter-form {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    gap: 10px;
}

.newsletter-input {
    flex-grow: 1;
    background-color: var(--bg-dark-base);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    color: var(--text-white);
    font-size: 14px;
    outline: none;
}

.newsletter-input:focus {
    border-color: var(--color-primary-bright);
}

/* ==========================================================================
   Contact Page Components
   ========================================================================== */
.contact-page-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 48px;
    margin-top: 40px;
}

.contact-info-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-detail-card {
    background-color: var(--bg-dark-surface);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-md);
    padding: 24px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.contact-icon-box {
    width: 44px;
    height: 44px;
    background-color: rgba(196, 0, 0, 0.12);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-bright);
    flex-shrink: 0;
}

.contact-detail-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: 6px;
}

.contact-detail-text {    font-size: var(--fs-body-sm);
    color: var(--text-gray);
    line-height: var(--leading-normal);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

.contact-detail-link {
    color: var(--text-silver);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.contact-detail-link:hover {
    color: var(--color-primary-bright);
}

/* Modal Window */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.modal-backdrop.active {
    display: flex;
    opacity: 1;
}

.modal-dialog {
    background: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    transform: translateY(20px);
    transition: transform var(--transition-base);
}

.modal-backdrop.active .modal-dialog {
    transform: translateY(0);
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    transition: color var(--transition-fast);
}

.modal-close-btn:hover {
    color: var(--text-white);
}

.modal-title,
.meta-val {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: 8px;
}

.modal-subtitle {    font-size: var(--fs-body-sm);
    color: var(--text-gray);
    margin-bottom: 24px;
    font-weight: var(--fw-regular);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-snug);
}

/* Responsive Overrides for Secondary Pages */
@media (max-width: 1024px) {
    .expertise-deep-card {
        grid-template-columns: 1fr;
    }

    .expertise-deep-card.reverse {
        direction: ltr;
    }

    .contact-page-grid {
        grid-template-columns: 1fr;
    }

    .featured-post-card {
        grid-template-columns: 1fr;
    }

    .job-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .newsletter-card {
        padding: 32px 20px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .story-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Responsive Top Bar
   ========================================================================== */
@media (max-width: 1024px) {
    .site-top-bar {
        height: auto;
        padding: 8px 0;
    }

    .top-bar-inner {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        height: auto;
        gap: 10px;
        padding: 0 16px;
    }

    .tb-address {
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 14px !important;
        text-align: left;
    }

    .tb-lang-wrap,
    .tb-email,
    .tb-phone-wrap {
        border: none !important;
        padding: 0 4px !important;
        margin: 0 !important;
        width: auto !important;
        gap: 6px !important;
    }

    .tb-lang-wrap {
        margin-left: auto !important;
    }

    .tb-email {
        font-size: 0 !important;
        /* Hide email text */
    }

    .tb-phone-text {
        display: none !important;
        /* Hide phone text */
    }

    .tb-phone-icon {
        width: 26px;
        height: 26px;
    }

    .tb-phone-icon svg {
        width: 13px;
        height: 13px;
    }

    .tb-lang-wrap .lang-switch-box {
        padding: 2px 6px;
    }
}

/* ==========================================================================
   Language Dropdown Navbar
   ========================================================================== */
.nav-lang-icon {
    position: relative;
}

.nav-lang-icon .current-lang-text {
    color: #111111 !important;
    transition: color var(--transition-fast);
}

.nav-lang-icon svg {
    fill: #111111 !important;
    transition: fill var(--transition-fast);
}

.nav-lang-icon>a {
    border: 1.5px solid rgba(0, 0, 0, 0.8);
    border-radius: 50px;
    padding: 6px 14px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.site-header.scrolled .nav-lang-icon .current-lang-text {
    color: #111111 !important;
}

.site-header.scrolled .nav-lang-icon svg {
    fill: #111111 !important;
}

.site-header.scrolled .nav-lang-icon>a {
    border: 1.5px solid rgba(0, 0, 0, 0.8);
}

.nav-lang-icon>a::after {
    display: none !important;
}

.nav-lang-icon>a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.lang-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    padding: 8px 0;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 1000;
}

.nav-lang-icon:hover .lang-dropdown-menu,
.nav-lang-icon:focus-within .lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown-menu .lang-btn {
    padding: 10px 16px;
    text-align: left;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    color: #4a5568;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

.lang-dropdown-menu .lang-btn:hover {
    background: #f1f5f9;
    color: var(--color-primary);
}

.lang-dropdown-menu .lang-btn.active {
    background: #f8fafc;
    color: var(--color-primary);
    font-weight: 600;
}



/* ==========================================================================
   Scroll Animation Utilities
   ========================================================================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px) scale(0.97);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

.delay-400 {
    transition-delay: 400ms;
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Button Quote Style (Red Pill) */
.btn-quote {
    display: inline-flex;
    align-items: center;
    background-color: #e51a22;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    text-decoration: none;
    padding: 8px 8px 8px 24px;
    border-radius: 50px;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    gap: 12px;
}

.btn-quote:hover {
    background-color: #c4151c;
    color: #ffffff;
    transform: translateY(-2px);
}

.btn-quote-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #ffffff;
    color: #e51a22;
    border-radius: 50%;
}

.btn-quote-icon svg {
    width: 16px;
    height: 16px;
}

/* Fix for Light Mode Subpages - Change white text to dark on white backgrounds */
.q-title,
.expertise-deep-title,
.value-title,
.timeline-title,
.leader-name,
.mat-title,
.alloy-name,
.story-title,
.perk-title,
.job-title,
.featured-post-title,
.blog-title,
.contact-detail-title,
.modal-title,
.meta-val {
    color: var(--text-dark) !important;
}

/* ==========================================================================
   Quality Assurance Grid (Expertise Page)
   ========================================================================== */
.quality-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.quality-card {
    background-color: var(--bg-dark-surface);
    border: 1px solid var(--border-dark);
    border-radius: 18px;
    padding: 32px;
    transition: transform var(--transition-base), border-color var(--transition-base);
}

.quality-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary-bright);
}

.q-icon {
    width: 48px;
    height: 48px;
    background: rgba(196, 0, 0, 0.1);
    color: var(--color-primary-bright);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.q-title {
    font-family: var(--font-heading);
    font-size: 20px;
    margin-bottom: 12px;
}

.q-desc {
    color: var(--text-silver);
    line-height: var(--leading-normal);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-snug);
}

@media (max-width: 768px) {
    .quality-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Typographic Normalization
   --------------------------------------------------------------------------
   One place where every card / panel title in the site resolves to the same
   display treatment. Individual components above may still set their own
   size; what is unified here is family, weight, leading and tracking, so
   headings read as one voice rather than fourteen slightly different ones.
   ========================================================================== */
.q-title,
.expertise-deep-title,
.value-title,
.timeline-title,
.leader-name,
.mat-title,
.alloy-name,
.story-title,
.perk-title,
.job-title,
.featured-post-title,
.blog-title,
.contact-detail-title,
.modal-title,
.program-title,
.cap-title,
.proj-title,
.sector-title,
.workflow-title,
.form-title {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}

/* Card-level titles sit one step below section titles. */
.value-title,
.timeline-title,
.leader-name,
.mat-title,
.alloy-name,
.perk-title,
.job-title,
.blog-title,
.contact-detail-title,
.q-title,
.curriculum-item {
    font-size: var(--fs-h4);
}

/* Feature-level titles - the ones that anchor a whole panel. */
.expertise-deep-title,
.story-title,
.featured-post-title,
.program-title,
.modal-title {
    font-size: var(--fs-h3);
    letter-spacing: var(--tracking-tight);
}

/* Long-form running text: cap the measure so lines stay readable
   regardless of how wide the container gets. */
.value-desc,
.timeline-text,
.leader-bio,
.expertise-deep-text,
.alloy-desc,
.program-summary,
.perk-desc,
.q-desc,
.cap-desc,
.proj-desc,
.sector-desc,
.blog-excerpt,
.footer-tagline {
    max-width: var(--measure);
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Small-screen type: caps and wide tracking get expensive on narrow
   viewports, so ease both off and let headings breathe a little more.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    :root {
        --tracking-display: -0.028em;
        --tracking-caps: 0.09em;
        --tracking-caps-lg: 0.12em;
        --leading-display: 1;
        --measure: 40ch;
    }

    .hero-title,
    .page-hero-title {
        text-wrap: pretty;
    }
}

/* --------------------------------------------------------------------------
   Devanagari: Noto Sans Devanagari has no use for Latin tracking or caps -
   both mangle the shaping. Reset them wherever the Hindi locale is active.
   -------------------------------------------------------------------------- */
body.lang-hi .section-tag,
body.lang-hi .hero-tag,
body.lang-hi .subline-text,
body.lang-hi .page-hero-tag,
body.lang-hi .eyebrow,
body.lang-hi .metric-label,
body.lang-hi .footer-heading,
body.lang-hi .btn,
body.lang-hi .nav-link {
    font-family: 'Noto Sans Devanagari', 'Inter', sans-serif;
    letter-spacing: normal;
    text-transform: none;
}

body.lang-hi {
    line-height: 1.8;
}

/* ==========================================================================
   ENTERPRISE COMPONENT SYSTEM
   --------------------------------------------------------------------------
   Everything below is the shared component contract. The rules above define
   each component's structure; these define how the whole set looks and
   behaves as one product. Later in the cascade, same specificity, so this
   is what resolves.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Surfaces
   One card treatment. Hairline border at rest, no shadow - restraint is what
   separates an enterprise UI from a consumer one. Elevation appears only on
   interaction, as a response, never as decoration.
   -------------------------------------------------------------------------- */
.sector-card,
.capability-card,
.equipment-card,
.project-card,
.cert-card,
.value-card,
.leader-card,
.expertise-deep-card,
.alloy-card,
.program-card,
.story-card,
.perk-card,
.job-card,
.featured-post-card,
.blog-card,
.newsletter-card,
.contact-detail-card,
.quality-card,
.fac-spec-box,
.quality-box,
.story-details-box,
.form-container {
    background-color: var(--surface-0);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    box-shadow: none;
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
}

/* Interactive cards only - a static panel that lifts on hover is a lie
   about affordance. */
.sector-card:hover,
.capability-card:hover,
.equipment-card:hover,
.project-card:hover,
.cert-card:hover,
.value-card:hover,
.leader-card:hover,
.alloy-card:hover,
.program-card:hover,
.story-card:hover,
.perk-card:hover,
.job-card:hover,
.featured-post-card:hover,
.blog-card:hover,
.contact-detail-card:hover,
.quality-card:hover {
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-elevated);
    transform: translateY(-2px);
}

/* Cards that carry a full-bleed image need their corners clipped. */
.capability-card,
.project-card,
.story-card,
.blog-card,
.featured-post-card,
.expertise-deep-card {
    overflow: hidden;
}

/* Internal padding: one rhythm for every text-only card. */
.sector-card,
.cert-card,
.value-card,
.alloy-card,
.perk-card,
.quality-card,
.contact-detail-card,
.fac-spec-box,
.story-details-box {
    padding: var(--space-8);
}

.equipment-card,
.leader-card,
.job-card,
.newsletter-card,
.quality-box {
    padding: var(--space-6);
}

/* Content wells inside image cards. */
.cap-content,
.proj-body,
.story-body,
.program-body,
.blog-body,
.expertise-deep-content {
    padding: var(--space-6);
}

/* --------------------------------------------------------------------------
   2. Section header
   Eyebrow, rule, title, subtitle - always in that order, always the same
   spacing. Consistency here is most of what makes a large site feel
   authored by one company rather than assembled from templates.
   -------------------------------------------------------------------------- */
.section-header {
    display: flex;
    flex-direction: column;
    max-width: var(--container-narrow);
}

.section-header.center {
    margin-inline: auto;
    align-items: center;
}

.section-tag {
    margin-bottom: var(--space-4);
}

.section-title {
    margin-bottom: var(--space-4);
}

.section-subtitle,
.section-lead {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   3. Bespoke two-column layouts
   These carry an intentional ratio, so they collapse at a breakpoint rather
   than reflowing intrinsically. Grouped here so the collapse is defined in
   one place instead of five scattered media queries.
   -------------------------------------------------------------------------- */
.about-grid-2col,
.facilities-layout,
.contact-grid {
    gap: var(--grid-gap-lg);
}

@media (max-width: 1024px) {

    .about-grid,
    .about-grid-2col,
    .facilities-layout,
    .contact-grid,
    .expertise-deep-card,
    .expertise-deep-card.reverse {
        grid-template-columns: 1fr;
    }

    /* Reversed feature rows must not strand the image below the copy
       once they stack. */
    .expertise-deep-card.reverse>* {
        order: initial;
    }

    .about-visual-col {
        min-height: 0;
    }

    .about-main-img {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
}

/* Capabilities header: pill / title / summary tri-column -> stacked. */
@media (max-width: 1180px) {
    .capabilities-header {
        grid-template-columns: 1fr;
        row-gap: var(--space-6);
    }

    .capabilities-summary {
        justify-self: start;
        max-width: var(--measure);
    }

    .capabilities-pill-wrap {
        padding-top: 0;
    }

    .sectors-header .section-title {
        margin-inline: 0;
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   4. Footer
   The four-column band relies on vertical rules between columns. Those
   rules have to disappear the moment the columns stack, or they render as
   stray lines across the middle of the layout.
   -------------------------------------------------------------------------- */
.footer-top-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--space-10) 0;
    padding-block: var(--space-10) var(--space-16);
}

.footer-top-grid>* {
    padding-inline: var(--space-10);
}

@media (max-width: 900px) {
    .footer-top-grid>* {
        padding-inline: 0;
        border-left: 0;
    }
}

.footer-reference-top,
.footer-reference-tools {
    gap: var(--grid-gap-lg);
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   5. Forms
   Enterprise forms are quiet: generous hit areas, hairline borders, and a
   focus ring that is unmistakable without being loud.
   -------------------------------------------------------------------------- */
.rfq-form input,
.rfq-form select,
.rfq-form textarea,
.footer-newsletter-form input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-0);
    color: var(--text-dark);
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    line-height: 1.4;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.rfq-form input:focus,
.rfq-form select:focus,
.rfq-form textarea:focus,
.footer-newsletter-form input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--ring-focus);
}

.rfq-form .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rfq-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

/* Visible keyboard focus everywhere, not just in the form. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   6. Shape language
   One rule, applied without exception:
     - Pills  -> non-interactive labels (eyebrows, tags, status chips)
     - Rects  -> anything you can click
   Mixing the two is what made the old page read as several sites stitched
   together. Radii below all resolve from the same token family.
   -------------------------------------------------------------------------- */
.about-cta-row .btn-secondary,
.footer-quote-btn,
.btn-quote,
.btn,
.btn-primary,
.btn-secondary,
.btn-hero-primary,
.btn-hero-outline,
.filter-btn,
.footer-newsletter-form button {
    border-radius: var(--radius-sm);
}

/* The about CTA was a red pill sitting beside square red buttons - same
   action, two shapes. Now it is simply the primary button. */
.about-cta-row .btn-secondary {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--text-white);
    padding: 0.875rem 1.5rem;
    font-family: var(--font-heading);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    min-width: 0;
}

.about-cta-row .btn-secondary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--text-white);
}

.about-cta-row .btn-secondary::after {
    width: 20px;
    height: 20px;
    margin-left: var(--space-2);
    font-size: 15px;
    background: transparent;
}

/* Label pills keep the capsule. */
.section-tag,
.about-text-col .section-tag,
.sectors-header .section-tag,
.section-tag.capabilities-pill,
.spec-tag,
.job-pill,
.specs-chip,
.program-type-tag,
.story-category-tag,
.cap-badge,
.proj-badge,
.f-stamp {
    border-radius: var(--radius-pill);
}

/* Card corners: one radius for panels, one for media wells. */
.sector-card,
.capability-card,
.equipment-card,
.project-card,
.cert-card,
.value-card,
.leader-card,
.expertise-deep-card,
.alloy-card,
.program-card,
.story-card,
.perk-card,
.job-card,
.featured-post-card,
.blog-card,
.newsletter-card,
.contact-detail-card,
.quality-card,
.fac-spec-box,
.quality-box,
.story-details-box,
.form-container,
.about-image-card,
.about-main-img {
    border-radius: var(--radius-lg);
}

/* --------------------------------------------------------------------------
   7. Section header alignment
   Left-aligned by default. Centred headers are reserved for the one or two
   places that genuinely warrant the emphasis - a centred column of text is
   harder to scan, which matters on a page this dense.
   -------------------------------------------------------------------------- */
.sectors-header .section-title,
.capabilities-title {
    text-align: left;
    margin-inline: 0;
}

.about-text-col {
    align-items: center;
}

/* --------------------------------------------------------------------------
   8. Touch targets
   Footer and inline text links get a real hit area on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    .footer-nav a,
    .footer-legal-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .footer-nav {
        gap: var(--space-1);
    }

    .lang-btn {
        min-height: 40px;
        padding-inline: var(--space-4);
    }
}

/* --------------------------------------------------------------------------
   9. Metrics strip
   The figures were set at section-heading size, so a value like
   "27,777+ Sq. Ft." broke across two lines and pushed out of its card while
   its neighbours stayed short - three cards, three different heights.
   Fixed by dropping the figure a step, splitting value from unit, and
   letting the grid reflow on intrinsic width.
   -------------------------------------------------------------------------- */
.metrics-strip {
    padding-block: var(--space-6) 0;
    margin-bottom: var(--section-y-sm);
}

.metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--grid-gap);
    align-items: stretch;
}

.metric-item {
    padding: var(--space-6);
    gap: var(--space-5);
    min-height: 0;
    border-radius: var(--radius-lg);
    background: var(--surface-ink);
    border: 1px solid var(--surface-ink);
    align-items: center;
}

.metric-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    border-color: rgba(255, 255, 255, 0.22);
}

.metric-icon {
    width: 22px;
    height: 22px;
}

.metric-number {
    font-size: var(--fs-h3);
    line-height: 1.05;
    /* Keep the figure and its unit on one line where it fits, and break
       cleanly where it doesn't. */
    text-wrap: balance;
}

.metric-label {
    margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   10. Capability standard chip
   Was six inline-styled divs rendering as full-width outlined buttons. They
   are labels - "ASME Coded", "Multiple Processes" - and nothing happens when
   you click them. Restyled as a compliance chip so the card has exactly one
   thing in it that looks pressable, and that thing is the card itself.
   -------------------------------------------------------------------------- */
.cap-btn-wrap {
    margin-top: auto;
    padding-top: var(--space-5);
}

.cap-standard-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-dark);
    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-feature-settings: normal;
    white-space: nowrap;
}

.cap-standard-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
}

/* Cards in a row should end level regardless of copy length. */
.cap-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   11. Grid / flex shrink correctness
   Grid and flex items default to min-width:auto, which means one unbreakable
   child - a nowrap spec chip, a long part number - can force its track wider
   than the parent and push the whole card out of its own padding box. This
   was pushing the expertise feature cards ~25px past their container on
   narrow screens. Letting items shrink to zero is the correct default here;
   anything that genuinely needs a floor sets its own min-width.
   -------------------------------------------------------------------------- */
.expertise-deep-card>*,
.capability-card>*,
.project-card>*,
.story-card>*,
.program-card>*,
.job-card>*,
.featured-post-card>*,
.blog-card>*,
.metric-item>*,
.contact-grid>*,
.facilities-layout>*,
.about-grid>*,
.about-grid-2col>*,
.capabilities-header>*,
.footer-top-grid>* {
    min-width: 0;
}

/* Chip rows wrap instead of forcing their container wider. */
.specs-chip-list,
.spec-tags-row,
.job-meta-pills,
.program-meta-list,
.cap-specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.specs-chip,
.spec-tag,
.job-pill,
.program-type-tag {
    white-space: normal;
}

/* Long unbroken strings (part numbers, URLs, emails) break rather than
   blow out the layout. */
.cap-desc,
.proj-desc,
.sector-desc,
.value-desc,
.leader-bio,
.expertise-deep-text,
.footer-addr,
.contact-detail-text,
.contact-detail-link {
    overflow-wrap: anywhere;
}

/* Feature cards: tighter padding once they are single-column. */
@media (max-width: 1024px) {
    .expertise-deep-card {
        padding: var(--space-6);
        gap: var(--space-6);
    }
}

@media (max-width: 480px) {
    .expertise-deep-card {
        padding: var(--space-5);
        gap: var(--space-5);
    }

    .expertise-deep-img {
        height: 200px;
    }
}

/* --------------------------------------------------------------------------
   12. Long button labels on narrow screens
   .btn carries white-space:nowrap, which is right on desktop but makes a
   label like "Inquire About Corporate Training" wider than a phone. Below
   the tablet breakpoint, buttons are allowed to wrap and go full width in
   the containers where they appear alone.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-hero-primary,
    .btn-hero-outline,
    .footer-quote-btn,
    .btn-quote {
        white-space: normal;
        text-align: center;
        text-wrap: balance;
        line-height: 1.25;
    }

    .newsletter-card .btn,
    .newsletter-form .btn,
    .footer-newsletter-form button,
    .btn-block {
        width: 100%;
    }

    .newsletter-card {
        padding: var(--space-5);
    }
}

/* --------------------------------------------------------------------------
   13. Tap targets
   The newsletter submit had horizontal padding only, so once it wrapped to
   its own row on mobile it collapsed to a 14px-tall strip. Inline text links
   (breadcrumbs, "read more", contact details) sat at 18-20px. All are given
   a real hit area on touch viewports without changing how they read.
   -------------------------------------------------------------------------- */
.footer-newsletter-form button {
    min-height: 48px;
    padding: var(--space-3) var(--space-6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.footer-newsletter-form div {
    align-items: stretch;
}

@media (pointer: coarse), (max-width: 768px) {

    .breadcrumb-link,
    .blog-read-more,
    .contact-detail-link,
    .text-link-accent,
    .footer-legal-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .breadcrumbs {
        flex-wrap: wrap;
        row-gap: 0;
    }
}

/* ==========================================================================
   PAGE HERO IMAGERY
   --------------------------------------------------------------------------
   Every inner page previously opened on a flat #0b0e14 panel - a dark band
   with a title and nothing else. Each page now carries a photograph matched
   to its actual subject, behind a two-stop scrim that guarantees the display
   type keeps its contrast regardless of what is under it.

   The scrim is doing real work: these are busy industrial photographs with
   bright arc-weld highlights, so a single flat overlay either washes out the
   image or lets the headline collide with a spark trail. Left-weighted
   gradient + a global darkener keeps the text column readable while the
   right side of the frame stays legible as a photograph.
   ========================================================================== */
.page-hero {
    background-color: var(--surface-ink);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    isolation: isolate;
}

/* Scrim. Sits above the photo, below the content (.page-hero-inner is z-index 2). */
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(100deg,
            rgba(9, 11, 14, 0.86) 0%,
            rgba(9, 11, 14, 0.72) 40%,
            rgba(9, 11, 14, 0.34) 72%,
            rgba(9, 11, 14, 0.18) 100%),
        linear-gradient(to bottom,
            rgba(9, 11, 14, 0.28) 0%,
            rgba(9, 11, 14, 0) 42%,
            rgba(9, 11, 14, 0.42) 100%);
    pointer-events: none;
}

/* The pre-existing radial accent stays, but below the scrim so it tints
   rather than fights it. */
.page-hero::before {
    z-index: 0;
}

.page-hero-inner {
    position: relative;
    z-index: 2;
}

/* Per-page photography ---------------------------------------------------- */

/* About - the people and the plant behind the company. */
.page-hero.hero-about {
    background-image: url('../images/hero-background.webp');
    background-position: center 30%;
}

/* Expertise - the ASME vessel shop: columns, exchangers, code stamps. */
.page-hero.hero-expertise {
    background-image: url('../images/pressure-vessels.webp');
    background-position: center 42%;
}

/* Success stories - delivered offshore structural work in the yard. */
.page-hero.hero-stories {
    background-image: url('../images/structural-steel.webp');
    background-position: center 55%;
}

/* Blog - arc-welding detail, the technical end of the business. */
.page-hero.hero-blog {
    background-image: url('../images/hero-bg.webp');
    background-position: center 40%;
}

/* Courses - the CNC machining centre trainees actually work on. */
.page-hero.hero-courses {
    background-image: url('../images/cnc-machining.webp');
    background-position: center 45%;
}

/* Careers - a person, looking at the camera. The only page where the
   photograph should lead with a face rather than with steel.
   This frame is chosen specifically because the subject stands right of
   centre: the headline column sits on the left, so the two never collide.
   (The alternative frame has them at ~30% and the title lands on their
   face at every desktop width, because cover-scaling by width leaves no
   horizontal slack for background-position to correct.) */
.page-hero.hero-careers {
    background-image: url('../images/hero-new-bg3.webp');
    background-position: center 30%;
}

/* Contact - the bright, modern fabrication bay a visitor would walk into. */
.page-hero.hero-contact {
    background-image: url('../images/hero-bg-light.webp');
    background-position: center 50%;
}

/* The bright bay needs a heavier scrim than the dark plates to hold
   white type. */
.page-hero.hero-contact::after {
    background:
        linear-gradient(100deg,
            rgba(9, 11, 14, 0.90) 0%,
            rgba(9, 11, 14, 0.78) 44%,
            rgba(9, 11, 14, 0.46) 74%,
            rgba(9, 11, 14, 0.30) 100%),
        linear-gradient(to bottom,
            rgba(9, 11, 14, 0.30) 0%,
            rgba(9, 11, 14, 0.08) 45%,
            rgba(9, 11, 14, 0.50) 100%);
}

/* The frosted text panel was designed against a flat colour; over a
   photograph it turns to mud. Let the scrim carry the contrast instead. */
.page-hero-text-panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-left: 0;
}

/* On phones the photo is mostly wasted - the text column covers it - so
   lean further into the scrim and keep the subject centred. */
@media (max-width: 768px) {
    .page-hero {
        background-position: center;
    }

    .page-hero::after {
        background:
            linear-gradient(to bottom,
                rgba(9, 11, 14, 0.80) 0%,
                rgba(9, 11, 14, 0.68) 50%,
                rgba(9, 11, 14, 0.86) 100%);
    }
}

/* ==========================================================================
   CONTENT IMAGERY
   --------------------------------------------------------------------------
   Courses, careers and contact previously carried no photography at all
   beyond the logo - three pages of pure type and hairline boxes. These are
   the components that give them a subject.
   ========================================================================== */

/* --- Programme card media -------------------------------------------------
   A fixed-ratio band so six cards of very different copy length still line
   up across a row. object-fit keeps the crop honest at every width. */
.program-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-3);
    border-bottom: 1px solid var(--border-hairline);
}

.program-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-smooth);
}

.program-card:hover .program-media img {
    transform: scale(1.04);
}

/* A quiet top-down wash so the card's own type never sits on raw photo. */
.program-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(9, 11, 14, 0) 55%, rgba(9, 11, 14, 0.35) 100%);
    pointer-events: none;
}

.program-card {
    overflow: hidden;
}

.program-header {
    padding: var(--space-6) var(--space-6) 0;
}

/* --- Wide media band ------------------------------------------------------
   Full-width editorial image with a caption rail. Used where a page needs a
   moment of scale between two dense sections. */
.media-band {
    position: relative;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-hairline);
    background: var(--surface-ink);
}

.media-band img {
    width: 100%;
    height: clamp(240px, 34vw, 460px);
    object-fit: cover;
    /* Bias the crop upward - centre-cropping a standing figure cuts the
       head off at this aspect. */
    object-position: center 28%;
    display: block;
}

.media-band-caption {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-10) var(--space-8) var(--space-8);
    background: linear-gradient(to top,
            rgba(9, 11, 14, 0.92) 0%,
            rgba(9, 11, 14, 0.7) 45%,
            rgba(9, 11, 14, 0) 100%);
    color: #fff;
}

.media-band-label {
    font-family: var(--font-tech);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-primary-bright);
    font-feature-settings: normal;
}

.media-band-text {
    font-size: var(--fs-lead);
    font-weight: var(--fw-medium);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-snug);
    max-width: 46ch;
    text-wrap: pretty;
}

/* --- Contact plant visual ------------------------------------------------- */
.contact-plant-visual {
    position: relative;
    margin: 0 0 var(--space-6);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-hairline);
    background: var(--surface-ink);
}

.contact-plant-visual img {
    width: 100%;
    height: clamp(200px, 22vw, 300px);
    object-fit: cover;
    display: block;
}

.contact-plant-visual figcaption {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-10) var(--space-6) var(--space-5);
    /* This photo is a bright, sunlit bay - the caption needs a much
       heavier and taller wash than the dark shop images to hold the
       red label at accessible contrast. */
    background: linear-gradient(to top,
            rgba(9, 11, 14, 0.96) 0%,
            rgba(9, 11, 14, 0.9) 40%,
            rgba(9, 11, 14, 0.6) 70%,
            rgba(9, 11, 14, 0) 100%);
    color: #fff;
}

/* Brighten the label against the darkened wash. */
.contact-plant-visual .media-band-label,
.media-band-caption .media-band-label {
    color: #ff5a5a;
}

.contact-plant-visual .media-band-text {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);
    color: rgba(255, 255, 255, 0.86);
}

@media (max-width: 640px) {
    .media-band-caption {
        padding: var(--space-8) var(--space-5) var(--space-5);
    }

    .media-band-text {
        font-size: var(--fs-body);
    }
}



/* --------------------------------------------------------------------------
   Hero overlay panel on small screens
   The 80% inset reads as a deliberate plate on a desktop canvas. On a phone
   it just steals width: 80% of 390px, minus the panel's own padding, leaves
   roughly a 25-character measure for a display headline. Below the tablet
   breakpoint the panel goes full-bleed and the scrim does the contrast work.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .home-hero-panel {
        width: 100%;
        border-radius: 0;
    }

    .hero-content {
        padding-inline: var(--gutter) !important;
    }
}

/* --------------------------------------------------------------------------
   Page hero text over photography
   With the scrim lightened so the photographs actually read, the supporting
   type needs to carry its own contrast rather than relying on a near-opaque
   wash. The subtitle was --text-silver (#64748b) and the breadcrumb links
   --text-gray (#475569) - both mid-slate greys chosen for white backgrounds,
   and both close to unreadable sitting on a dark plant photo.
   -------------------------------------------------------------------------- */
.page-hero .page-hero-subtitle {
    color: rgba(255, 255, 255, 0.88);
    /* Hold the copy inside the dark end of the gradient instead of letting
       it run across the bright, detailed side of the frame. */
    max-width: 54ch;
    text-shadow: 0 1px 12px rgba(9, 11, 14, 0.55);
}

.page-hero .breadcrumb-link {
    color: rgba(255, 255, 255, 0.72);
}

.page-hero .breadcrumb-link:hover {
    color: #ffffff;
}

.page-hero .breadcrumb-current {
    color: rgba(255, 255, 255, 0.95);
}

.page-hero .breadcrumb-separator {
    color: rgba(255, 255, 255, 0.38);
}

/* The eyebrow and headline sit on the darkest part of the scrim, but a
   whisper of shadow keeps them crisp over high-contrast spark highlights. */
.page-hero .page-hero-title {
    text-shadow: 0 2px 20px rgba(9, 11, 14, 0.45);
}

.page-hero .page-hero-tag {
    text-shadow: 0 1px 10px rgba(9, 11, 14, 0.6);
}

/* css/platform.css */
/* ==========================================================================
   Maple platform additions — builds on the tokens defined in style.css
   ========================================================================== */

/* clip, not hidden: overflow-x:hidden on both html and body turns body into a scroll container that never
   scrolls, which silently disables every position:sticky element on the site. */
html, body { overflow-x: hidden; overflow-x: clip; }
body { background: var(--surface-0, #fff); }

.skip-link {
    position: absolute; left: -9999px; top: 8px; z-index: 5000;
    background: var(--text-dark); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
}
.skip-link:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; }
.muted { color: var(--text-gray); }
.text-accent { color: var(--color-primary); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid rgba(196, 0, 0, 0.45); outline-offset: 2px; }

/* ---------------------------------------------------------------- header */
.header-actions { display: flex; align-items: center; gap: 15px; }
.header-quote-btn { padding: 10px 18px; font-size: var(--fs-caption); white-space: nowrap; }
.nav-lang-icon { display: flex; align-items: center; z-index: 1000; position: relative; }
.lang-toggle { display: flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; }
.lang-toggle .current-lang-text { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--text-dark); text-transform: uppercase; }
.nav-list { gap: clamp(1rem, 0.2rem + 1.4vw, 2rem); }
.nav-item.has-dropdown { position: relative; }
.nav-dropdown-toggle { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav-caret { transition: transform var(--transition-fast); }
.nav-item.open .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
    list-style: none; position: absolute; top: calc(100% + 10px); left: -16px; min-width: 250px;
    background: #fff; border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); z-index: 1500;
}
.nav-item.open > .nav-dropdown { opacity: 1; visibility: visible; transform: none; }
/* Become visible (and therefore Tab-focusable) immediately when opened; only fade/slide are animated. */
.nav-item.open > .nav-dropdown, .nav-item.has-dropdown:focus-within > .nav-dropdown { transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s; }
@media (hover: hover) and (min-width: 1025px) {
    .nav-item.has-dropdown:hover > .nav-dropdown, .nav-item.has-dropdown:focus-within > .nav-dropdown { opacity: 1; visibility: visible; transform: none; }
}
.nav-dropdown-link {
    display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-dark); text-decoration: none;
    font-family: var(--font-heading); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold);
}
.nav-dropdown-link:hover, .nav-dropdown-link.active { background: var(--bg-dark-card-hover); color: var(--color-primary); }
@media (max-width: 1280px) and (min-width: 1025px) {
    .header-quote-btn { display: none; }
}
@media (max-width: 1024px) {
    .header-quote-btn { display: none; }
    .nav-dropdown-toggle { width: 100%; justify-content: space-between; }
    .nav-dropdown {
        position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0;
        padding: 0 0 8px 12px; min-width: 0; display: none;
    }
    .nav-item.open > .nav-dropdown { display: block; }
    .nav-dropdown-link { padding: 12px 8px; min-height: 44px; }
}

/* ---------------------------------------------------------------- home hero */
.home-hero { min-height: auto; padding-bottom: var(--section-y-sm); }
.home-hero::before { background: linear-gradient(180deg, rgba(5, 8, 12, 0.72) 0%, rgba(5, 8, 12, 0.62) 60%, rgba(5, 8, 12, 0.82) 100%); }
.home-hero-inner { position: relative; z-index: 2; padding-top: clamp(2.5rem, 1rem + 5vw, 6rem); width: 100%; }
.home-hero-title { color: #fff; max-width: 22ch; font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.4rem); }
.audience-hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: var(--space-8); }
.audience-hero-grid.single { grid-template-columns: minmax(0, 720px); }
.audience-hero-card {
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.audience-hero-card-alt { background: rgba(196, 0, 0, 0.16); border-color: rgba(255, 185, 8, 0.35); }
.audience-eyebrow { display: inline-block; font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: var(--tracking-caps-lg); color: #FFB908; margin-bottom: 10px; }
.audience-title { font-family: var(--font-heading); font-size: var(--fs-h4); color: #fff; line-height: var(--leading-snug); margin-bottom: 10px; }
.audience-sub { color: rgba(255, 255, 255, 0.82); margin-bottom: 22px; line-height: var(--leading-normal); }
@media (max-width: 768px) { .audience-hero-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- cards / grids */
.section-alt { background: var(--surface-1, #fafafa); }
.section-actions { margin-top: var(--space-8); display: flex; gap: 12px; flex-wrap: wrap; }
.pillar-grid, .audience-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--grid-gap); }
.audience-card-grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.pillar-card, .audience-card {
    display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
    text-decoration: none; color: var(--text-dark); box-shadow: var(--shadow-card); overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.pillar-card { padding: clamp(1.25rem, 0.8rem + 1.4vw, 2rem); }
.pillar-card:hover, .audience-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-elevated); border-color: var(--border-accent); }
.pillar-num { font-family: var(--font-tech); color: var(--color-primary); font-size: var(--fs-caption); letter-spacing: var(--tracking-caps); }
.pillar-title { font-family: var(--font-heading); font-size: var(--fs-h4); margin: 8px 0 10px; }
.pillar-card p, .audience-card p { color: var(--text-gray); line-height: var(--leading-normal); flex: 1; }
.audience-card img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; }
.audience-card-body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.audience-card-body h3 { font-family: var(--font-heading); font-size: var(--fs-h5); margin-bottom: 8px; }
.audience-card .audience-eyebrow { color: var(--color-primary); }
.card-more { margin-top: 14px; font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--color-primary); font-size: var(--fs-body-sm); }
.card-link-wrap { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }

.help-section { background: var(--surface-2, #f4f4f2); }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--grid-gap); }
.help-col { background: #fff; border-radius: var(--radius-lg); border-top: 4px solid var(--color-primary); padding: var(--space-6); box-shadow: var(--shadow-card); }
.help-title { font-family: var(--font-heading); font-size: var(--fs-body); letter-spacing: var(--tracking-wide); margin-bottom: 14px; }
.help-links { list-style: none; display: grid; gap: 6px; }
.help-links a {
    display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 44px; padding: 10px 12px;
    border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); color: var(--text-dark); text-decoration: none; font-weight: var(--fw-medium);
}
.help-links a:hover { border-color: var(--color-primary); color: var(--color-primary); }

.chip-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.chip-card { background: #fff; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: 14px 16px; display: grid; gap: 4px; }
.chip-card span { color: var(--text-gray); font-size: var(--fs-body-sm); }
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--grid-gap); }
.category-card { background: #fff; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-6); }
.category-card h3 { font-family: var(--font-heading); font-size: var(--fs-h5); margin-bottom: 8px; }
.category-card p { color: var(--text-gray); }
.tag-list, .chip-row { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tag-list li, .chip { background: var(--surface-2, #f4f4f2); border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); padding: 6px 12px; font-size: var(--fs-caption); }
.chip { font-size: var(--fs-body-sm); padding: 8px 16px; background: #fff; }
.check-grid, .check-list { list-style: none; display: grid; gap: 10px; }
.check-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.check-grid li, .check-list li { position: relative; padding-left: 28px; line-height: var(--leading-normal); }
.check-grid li::before, .check-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--color-primary); font-weight: 700; }
.check-list { margin: 12px 0; }

.process-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--grid-gap); counter-reset: none; }
.process-step { display: flex; gap: 14px; background: #fff; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-6); }
.process-num { font-family: var(--font-tech); font-weight: 600; color: var(--color-primary); font-size: var(--fs-h5); }
.process-step h3 { font-family: var(--font-heading); font-size: var(--fs-body); margin-bottom: 6px; }
.process-step p { color: var(--text-gray); font-size: var(--fs-body-sm); }

/* ---------------------------------------------------------------- testimonials / faq */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--grid-gap); }
.testimonial-card { position: relative; background: #fff; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 18px; margin: 0; }
.testimonial-quote { font-size: var(--fs-body); line-height: var(--leading-relaxed); color: var(--text-dark); margin: 0; }
.testimonial-author { display: flex; align-items: center; gap: 12px; font-size: var(--fs-body-sm); }
.testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testimonial-video { font-weight: var(--fw-semibold); color: var(--color-primary); }
.faq-list { display: grid; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); }
.faq-question { cursor: pointer; padding: 18px 20px; font-family: var(--font-heading); font-weight: var(--fw-semibold); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: '+'; color: var(--color-primary); font-size: 1.3em; line-height: 1; }
.faq-item[open] .faq-question::after { content: '−'; }
.faq-answer { padding: 0 20px 18px; color: var(--text-gray); line-height: var(--leading-relaxed); }
.faq-answer p + p { margin-top: 10px; }

/* ---------------------------------------------------------------- badges & notices */
.sample-badge { display: inline-block; background: #fff4d6; color: #7a5400; border: 1px solid #f2c94c; font-family: var(--font-tech); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-pill); }
.testimonial-card .sample-badge { position: absolute; top: 12px; right: 12px; }
.sample-badge-img { position: absolute; top: 12px; right: 12px; z-index: 2; }
.program-media, .proj-img-wrap, .blog-img-wrap { position: relative; }
.notice { padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 20px; }
.notice-warning { background: #fff8e6; border: 1px solid #f2c94c; color: #6b4a00; }
.empty-state { text-align: center; padding: var(--space-12) var(--space-6); background: var(--surface-1, #fafafa); border: 1px dashed var(--border-light); border-radius: var(--radius-lg); }
.empty-state h2 { font-family: var(--font-heading); font-size: var(--fs-h5); margin-bottom: 8px; }
.empty-state p { color: var(--text-gray); }

/* ---------------------------------------------------------------- filters & pagination */
.filter-bar {
    display: grid; grid-template-columns: minmax(200px, 2fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end;
    background: #fff; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: 16px; margin-bottom: var(--space-8); box-shadow: var(--shadow-xs);
}
.filter-field { display: grid; gap: 6px; min-width: 0; }
.filter-field label { font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-gray); }
.filter-field input, .filter-field select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); font: inherit; background: #fff; }
/* buttons never shrink below their label (Hindi labels are longer); they wrap instead */
.filter-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-actions .btn { min-height: 44px; padding: 10px 14px; flex: 1 1 auto; min-width: max-content; justify-content: center; }
@media (max-width: 768px) { .filter-bar { grid-template-columns: 1fr; } .filter-actions .btn { flex: 1; justify-content: center; } }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: var(--space-10); }
.page-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: var(--text-dark); text-decoration: none; font-weight: var(--fw-semibold); }
.page-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
.page-link.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.page-link.disabled { opacity: 0.45; }
.pagination-summary { text-align: center; color: var(--text-gray); margin-top: 12px; font-size: var(--fs-body-sm); }
.projects-grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.project-card .card-link-wrap .proj-body { flex: 1; display: flex; flex-direction: column; }
.program-title a { color: inherit; text-decoration: none; }
.program-title a:hover { color: var(--color-primary); }

/* ---------------------------------------------------------------- detail pages */
.detail-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--grid-gap-lg); align-items: start; }
.detail-main p { line-height: var(--leading-relaxed); margin-bottom: 14px; color: var(--text-dark); }
.section-title-sm { font-family: var(--font-heading); font-size: var(--fs-h4); margin: 28px 0 12px; }
.detail-main .section-title-sm:first-child { margin-top: 0; }
.detail-aside { position: sticky; top: calc(var(--header-height) + 16px); background: #fff; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); }
.fact-list { display: grid; gap: 12px; margin-bottom: 20px; }
.fact-list div { display: grid; grid-template-columns: 120px 1fr; gap: 8px; border-bottom: 1px solid var(--border-hairline); padding-bottom: 10px; }
.fact-list dt { font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-gray); }
.fact-list dd { margin: 0; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.syllabus-list { padding-left: 22px; display: grid; gap: 8px; }
.detail-cover { width: 100%; border-radius: var(--radius-lg); margin-bottom: 20px; object-fit: cover; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-top: 20px; }
.gallery img { border-radius: var(--radius-md); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
@media (max-width: 900px) { .detail-layout { grid-template-columns: 1fr; } .detail-aside { position: static; } }
.article-body { line-height: var(--leading-relaxed); }
.article-body p, .article-body ul { margin-bottom: 16px; }
.article-body ul { padding-left: 22px; }
.article-body h2 { font-family: var(--font-heading); font-size: var(--fs-h4); margin: 28px 0 12px; }
.program-list { display: grid; gap: var(--grid-gap); }
.program-row { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--grid-gap); background: #fff; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.program-row-media img { width: 100%; height: 100%; object-fit: cover; min-height: 220px; }
.program-row-body { padding: var(--space-6) var(--space-6) var(--space-6) 0; }
.program-row-body p { margin: 8px 0; line-height: var(--leading-normal); }
.inline-facts { display: flex; flex-wrap: wrap; gap: 16px; margin: 10px 0; }
.inline-facts dt { font-family: var(--font-tech); font-size: var(--fs-micro); text-transform: uppercase; color: var(--text-gray); }
.inline-facts dd { margin: 0; font-weight: var(--fw-medium); }
@media (max-width: 768px) { .program-row { grid-template-columns: 1fr; } .program-row-body { padding: 0 var(--space-6) var(--space-6); } }

/* ---------------------------------------------------------------- tables */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: #fff; }
.data-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.data-table th, .data-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border-hairline); font-size: var(--fs-body-sm); vertical-align: top; }
.data-table th { font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-gray); background: var(--surface-1, #fafafa); }

/* ---------------------------------------------------------------- forms */
.lead-form .form-group, .rfq-form .form-group { position: relative; }
.form-group-full { width: 100%; }
.rfq-form .form-group input[type="file"] { padding: 10px; background: var(--surface-1, #fafafa); }
.field-hint { display: block; color: var(--text-gray); font-size: var(--fs-caption); margin-top: 4px; }
.field-error { color: #b00020; font-size: var(--fs-caption); margin-top: 6px; font-weight: var(--fw-medium); }
.form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea { border-color: #b00020 !important; box-shadow: 0 0 0 3px rgba(176, 0, 32, 0.12); }
.form-privacy { font-size: var(--fs-caption); color: var(--text-gray); margin: 4px 0 14px; }
.form-privacy a { color: inherit; text-decoration: underline; }
.form-context { background: var(--surface-1, #fafafa); border-left: 3px solid var(--color-primary); padding: 10px 14px; margin-bottom: 16px; }
.form-feedback { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: var(--fs-body-sm); }
.form-feedback[hidden] { display: none !important; }
.form-feedback.error { background: #fdecee; color: #8a0018; border: 1px solid #f5c2c9; display: block; }
.form-feedback.success { display: block; }
.form-success { background: #ecfdf3; border: 1px solid #a6e9c1; border-radius: var(--radius-md); padding: var(--space-8); display: grid; gap: 10px; }
.form-success h3 { font-family: var(--font-heading); font-size: var(--fs-h5); color: #0f5132; }
.form-success .btn { justify-self: start; margin-top: 6px; }
.lead-reference { font-family: var(--font-tech); letter-spacing: 0.04em; }
button[disabled][aria-busy="true"] { opacity: 0.75; cursor: progress; }
.footer-newsletter-form .form-feedback { margin-top: 8px; padding: 8px 10px; }
.newsletter-form .form-feedback { flex-basis: 100%; }
.quick-links-card { margin-top: var(--space-8); background: var(--surface-1, #fafafa); border-radius: var(--radius-md); padding: var(--space-6); }
.quick-links-card h3 { font-family: var(--font-heading); font-size: var(--fs-body); margin-bottom: 12px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.page-hero-actions { margin-top: 24px; }
.expertise-equipment { margin-top: var(--space-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--grid-gap); }

/* small-screen guards */
@media (max-width: 480px) {
    .rfq-form .form-row { grid-template-columns: 1fr !important; }
    .fact-list div { grid-template-columns: 1fr; }
    .hero-actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 380px) {
    .brand-logo-img { max-width: 130px; }
}

/* course card facts: compact 2x2 grid at every width */
.course-card .program-meta-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.course-card .program-meta-item { display: grid; gap: 2px; min-width: 0; }
.course-card .meta-val { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); line-height: 1.3; overflow-wrap: anywhere; }
.course-card .program-footer { gap: 12px; flex-wrap: wrap; }
.course-card .program-meta-wide { grid-column: 1 / -1; }
.numbers-section { padding-bottom: 0; }
.numbers-section .section-header { margin-bottom: 12px; }
.what-list { background: #fff; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-card); }

/* ---------------------------------------------------------------- landing pages */
.landing-hero { padding-bottom: var(--section-y-sm); }
.landing-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--grid-gap-lg); align-items: start; }
.card-panel { background: #fff; border-radius: var(--radius-lg); padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); box-shadow: var(--shadow-overlay); color: var(--text-dark); }
.card-panel .form-title { margin-bottom: 6px; }
.pain-panel { background: rgba(255, 255, 255, 0.96); }
.pain-list { list-style: none; display: grid; gap: 12px; margin-top: 12px; }
.pain-list li { position: relative; padding-left: 28px; line-height: var(--leading-normal); }
.pain-list li::before { content: '!'; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
@media (max-width: 960px) { .landing-hero-grid { grid-template-columns: 1fr; } }
.service-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--grid-gap); }
.service-tile { position: relative; background: #fff; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 8px; }
.service-tile h3 { font-family: var(--font-heading); font-size: var(--fs-h5); }
.service-tile p { color: var(--text-gray); flex: 1; }
.service-tile .sample-badge { position: absolute; top: 12px; right: 12px; }
.fee-footnote { margin-top: 12px; font-size: var(--fs-body-sm); }
.or-line { text-align: center; margin-top: 12px; color: var(--text-gray); }
.or-line a { color: var(--color-primary); font-weight: var(--fw-semibold); }

/* partners / logos */
.partner-strip { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.partner-tile { position: relative; min-height: 84px; display: grid; place-items: center; background: #fff; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: 12px; text-align: center; }
.partner-tile img { max-height: 56px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.85; transition: filter var(--transition-fast), opacity var(--transition-fast); }
.partner-tile:hover img { filter: none; opacity: 1; }
.partner-tile a { color: inherit; text-decoration: none; display: grid; place-items: center; min-height: 44px; }
.partner-name { font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--text-gray); }
.partner-tile { gap: 6px; }
.partner-tile .sample-badge { position: static; font-size: 10px; }

/* course card extras */
.seats-left { display: block; font-size: var(--fs-caption); color: var(--text-gray); font-weight: var(--fw-medium); }
.seats-left.full { color: var(--color-primary); }
.fee-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.fee-badge { background: #ecfdf3; color: #05603a; border: 1px solid #a6e9c1; border-radius: var(--radius-pill); padding: 2px 10px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.filter-checks { align-content: end; }
.filter-label { font-family: var(--font-tech); font-size: var(--fs-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-gray); }
.check-inline { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--fs-body-sm); font-family: var(--font-body); text-transform: none; letter-spacing: 0; color: var(--text-dark); }

/* WhatsApp */
.btn-whatsapp { background: #128c4b; color: #fff; border: 1px solid #128c4b; }
.btn-whatsapp:hover { background: #0e7a40; color: #fff; }
.whatsapp-float { position: fixed; right: 16px; bottom: 16px; z-index: 1200; display: inline-flex; align-items: center; gap: 8px; background: #128c4b; color: #fff; text-decoration: none; padding: 12px 16px; border-radius: var(--radius-pill); box-shadow: var(--shadow-elevated); font-family: var(--font-heading); font-weight: var(--fw-semibold); min-height: 48px; }
.whatsapp-float:hover { background: #0e7a40; color: #fff; }
@media (max-width: 480px) { .whatsapp-float-label { display: none; } .whatsapp-float { padding: 12px; } }

/* video testimonials (click-to-load) */
.video-facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: var(--radius-md); overflow: hidden; background: #0d1115; cursor: pointer; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.video-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(196, 0, 0, 0.92); color: #fff; display: grid; place-items: center; font-size: 24px; }
.video-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-md); }

/* consent banner */
.consent-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 3000; max-width: 720px; margin: 0 auto; background: #0f172a; color: #e2e8f0; border-radius: var(--radius-lg); padding: 16px 20px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; box-shadow: var(--shadow-overlay); }
.consent-banner[hidden] { display: none; }
.consent-banner p { flex: 1 1 280px; font-size: var(--fs-body-sm); line-height: var(--leading-normal); }
.consent-banner a { color: #fff; text-decoration: underline; }
.consent-actions { display: flex; gap: 8px; }
.consent-banner .btn-secondary { color: #fff; border-color: rgba(255, 255, 255, 0.5); }

.thank-you-hero { min-height: 60vh; display: flex; align-items: center; }

/* WCAG AA: #e61919 drops below 4.5:1 on tinted light surfaces (≈4.2:1); the deeper brand red is 5.7:1+. */
.section-alt .section-tag:not(.capabilities-pill),
.help-section .section-tag:not(.capabilities-pill),
.landing-section-alt .section-tag { color: var(--color-primary); }
.capabilities-section .section-header .section-tag:not(.capabilities-pill) { color: var(--color-primary); }

/* WCAG AA fixes found by axe (Phase 6). Values chosen by measured contrast ratio. */
.meta-label { color: #475569; }                         /* was #94a3b8 on #f8fafc = 2.45:1 → 7.2:1 */
.proj-code { color: #b45309; }                          /* was #f59e0b on #fff = 2.14:1 → 5.0:1 */
.job-pill.dept { color: var(--color-primary-hover); }   /* was #e61919 on #f6d9d9 = 3.5:1 → 6.5:1 */
/* The blog newsletter card is dark but the input used the (light) --bg-dark-base token: typed text was white on #f8fafc. */
.newsletter-card .newsletter-input { background-color: #0b0f16; border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.newsletter-card .newsletter-input::placeholder { color: #b8c0cc; }
/* WCAG 2.5.8 target size: filter checkboxes are ≥24×24px (were 18px wide on touch layouts). */
.check-inline input[type="checkbox"] { width: 24px; height: 24px; min-width: 24px; margin: 0; accent-color: var(--color-primary); }
.check-inline { min-height: 44px; }

/* Language switch (segmented, always visible — Hindi users are mostly on phones) */
.lang-seg { display: inline-flex; align-items: center; border: 1px solid var(--border-hairline, #d9dde3); border-radius: 999px; padding: 3px; background: #fff; gap: 2px; flex-shrink: 0; }
.lang-seg-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 36px; padding: 0 12px; border-radius: 999px; font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--text-dark, #111); text-decoration: none; transition: background-color .25s ease, color .25s ease; }
.lang-seg-btn[lang="hi"] { font-family: 'Noto Sans Devanagari', var(--font-heading); font-size: 14px; }
.lang-seg-btn:hover { background: rgba(196, 0, 0, .08); }
.lang-seg-btn.is-active { background: var(--color-primary); color: #fff; }
.lang-seg-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (max-width: 420px) { .lang-seg-btn { min-width: 40px; padding: 0 8px; font-size: 12px; } }

/* Hindi typography: Devanagari needs more line height and no letter-spacing / forced caps */
body.lang-hi { --font-body: 'Noto Sans Devanagari', 'Inter', system-ui, sans-serif; --font-heading: 'Noto Sans Devanagari', 'AmpersandSimple', 'Archivo', system-ui, sans-serif; --font-tech: 'Noto Sans Devanagari', 'IBM Plex Mono', monospace; }
body.lang-hi, body.lang-hi p, body.lang-hi li { line-height: 1.75; }
body.lang-hi h1, body.lang-hi h2, body.lang-hi h3, body.lang-hi h4 { line-height: 1.35; letter-spacing: 0; }
body.lang-hi .section-tag, body.lang-hi .btn, body.lang-hi .nav-link, body.lang-hi .eyebrow, body.lang-hi .meta-label { letter-spacing: 0; text-transform: none; }

/* Centre / branch locator */
.centre-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--grid-gap); margin-top: var(--space-8); }
.centre-card { background: #fff; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-card); }
.centre-type { display: inline-block; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-primary); }
.centre-head h3 { font-family: var(--font-heading); font-size: var(--fs-h5); margin: 6px 0 2px; }
.centre-city { color: var(--text-gray); }
.centre-address { font-style: normal; line-height: var(--leading-normal); }
.centre-facts { display: grid; gap: 6px; }
.centre-facts div { display: grid; grid-template-columns: 72px 1fr; gap: 8px; }
.centre-facts dt { color: var(--text-gray); font-size: var(--fs-body-sm); }
.centre-courses-label { font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); }
.centre-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.form-optin { margin: 6px 0 4px; align-items: flex-start; line-height: 1.4; }
.form-optin span { padding-top: 3px; }
.unsubscribe-form { display: flex; gap: 12px; flex-wrap: wrap; }

/* css/design.css */
/* ==========================================================================
   Maple design layer — loaded after style.css + platform.css, before motion.css.
   One system for section headers, labels, buttons, numbers and card icons, so every
   page reads the same. The weld bead (a short red line) is the recurring mark.
   ========================================================================== */
:root {
    --ink: #0d0f12;
    --ink-2: #39404a;
    --bead: var(--color-primary, #c40000);
    --bead-hot: #ff7a1a;
    --steel-50: #f5f6f7;
    --steel-200: #dfe2e6;
}

/* --------------------------------------------------------------------------
   1. Section labels: the small line above a heading ("WHAT WE DO", "FOR BUSINESSES").
   A weld bead leads the label; the text is set to read, not to whisper.
   -------------------------------------------------------------------------- */
.section-tag,
.section-tag.capabilities-pill,
.about-text-col .section-tag,
.sectors-header .section-tag,
.page-hero-tag,
.home-hero .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    margin: 0 0 var(--space-4, 16px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.2;
    color: var(--ink);
}
.section-tag::before,
.page-hero-tag::before,
.home-hero .hero-tag::before {
    content: '';
    flex: none;
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--bead) 0%, var(--bead) 70%, var(--bead-hot) 100%);
    transform-origin: 0 50%;
    transition: transform 700ms var(--mx-ease, ease) 120ms;
}
.section-header.center .section-tag { justify-content: center; }
/* on dark surfaces */
.page-hero-tag, .home-hero .hero-tag, .newsletter-card .section-tag, .cta-band .section-tag, .numbers-band .section-tag { color: #fff; }
.home-hero .hero-tag { color: #ffd27a; }
body.lang-hi .section-tag, body.lang-hi .page-hero-tag, body.lang-hi .home-hero .hero-tag { font-size: 0.95rem; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   2. Section headers: one layout everywhere (label above, title below, optional lead).
   Replaces the old pill-left / all-caps variant.
   -------------------------------------------------------------------------- */
.capabilities-header {
    display: block;
    margin-bottom: var(--stack-lg, 48px);
}
.capabilities-pill-wrap { display: block; padding: 0; }
.capabilities-title,
.about-text-col .section-title {
    text-transform: none;
    font-size: var(--fs-h2);
    letter-spacing: var(--tracking-tight, -0.02em);
    line-height: var(--leading-tight, 1.1);
    text-align: left;
}
.capabilities-summary { max-width: 60ch; margin: var(--space-4, 16px) 0 0; text-align: left; color: var(--ink-2); }
.section-title { text-wrap: balance; }

/* --------------------------------------------------------------------------
   3. Buttons. Primary: a light sheen sweeps across on hover; press sinks it.
   Secondary / outline: the fill wipes in from the left. Arrows slide.
   -------------------------------------------------------------------------- */
.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 6px;
    letter-spacing: 0.08em;
}
.btn-primary, .btn-hero-primary {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 18px -10px rgba(196, 0, 0, 0.7);
}
.btn-primary::after, .btn-hero-primary::after {
    content: '';
    position: absolute;
    inset: -2px auto -2px 0;
    width: 45%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translate3d(-130%, 0, 0) skewX(-18deg);
    pointer-events: none;
    z-index: 1;
}
.btn-secondary, .btn-hero-outline {
    background-color: transparent;
}
.btn-secondary::before, .btn-hero-outline::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform 420ms var(--mx-ease, ease);
}
.btn-hero-outline { background: #fff; color: var(--ink); border-color: #fff; }
.btn-hero-outline::before { background: var(--bead); }
@media (hover: hover) {
    .btn-primary:hover, .btn-hero-primary:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 16px 28px -14px rgba(196, 0, 0, 0.85); }
    .btn-primary:hover::after, .btn-hero-primary:hover::after { transform: translate3d(330%, 0, 0) skewX(-18deg); transition: transform 700ms var(--mx-ease, ease); }
    .btn-secondary:hover, .btn-hero-outline:hover { color: #fff; border-color: var(--ink); background-color: transparent; }
    .btn-hero-outline:hover { border-color: var(--bead); }
    .btn-secondary:hover::before, .btn-hero-outline:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
}
.btn:focus-visible { outline: 3px solid #ffb547; outline-offset: 3px; }
.btn .btn-arrow, .btn .mx-arrow { position: relative; z-index: 2; }
/* magnetic CTAs (motion.js sets --mgx/--mgy for fine pointers) */
.btn.mx-magnetic { transform: translate3d(var(--mgx, 0px), var(--mgy, 0px), 0); transition: transform 300ms var(--mx-ease, ease), box-shadow 420ms var(--mx-ease, ease), background-color 180ms linear, color 180ms linear; }

/* --------------------------------------------------------------------------
   4. Numbers: a dark band with large figures over a dim photograph.
   -------------------------------------------------------------------------- */
.numbers-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(56px, 7vw, 96px) !important;
    background: var(--ink) url('../images/960/hero-bg.webp') center 40% / cover no-repeat;
}
.numbers-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(9, 11, 14, 0.94) 0%, rgba(9, 11, 14, 0.84) 55%, rgba(9, 11, 14, 0.7) 100%);
}
.numbers-section .section-tag { color: #ffd27a; }
.numbers-section .section-title { color: #fff; }
.numbers-section .section-header { margin-bottom: clamp(24px, 3vw, 40px); }
.numbers-section .metrics-strip { padding: 0; background: none; border: 0; }
.metrics-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0; }
.numbers-section .metric-item,
.metric-item {
    background: none;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0;
    padding: 8px clamp(16px, 2.4vw, 32px) 8px;
    min-height: 0;
}
.metric-item:first-child { border-left: 0; padding-left: 0; }
.metric-number {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.metric-label {
    display: block;
    margin-top: 12px;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.78);
}
.metric-label::before { content: ''; display: block; width: 26px; height: 3px; margin-bottom: 10px; border-radius: 2px; background: var(--bead); }
/* metrics outside the dark band (e.g. training pages on light sections) keep dark text */
.section:not(.numbers-section) .metric-item { border-left-color: var(--steel-200); }
.section:not(.numbers-section) .metric-number { color: var(--ink); }
.section:not(.numbers-section) .metric-label { color: var(--ink-2); }
@media (max-width: 640px) {
    .metric-item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); padding: 18px 0; }
    .metric-item:first-child { border-top: 0; }
}

/* --------------------------------------------------------------------------
   5. Pillar cards: an icon tile instead of "01 / 02 / 03" (the verticals are not a sequence).
   -------------------------------------------------------------------------- */
.pillar-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    color: var(--bead);
    background: linear-gradient(145deg, #fff 0%, #fbeaea 100%);
    box-shadow: 0 1px 0 #fff inset, 0 10px 22px -12px rgba(196, 0, 0, 0.55), 0 0 0 1px rgba(196, 0, 0, 0.12);
    transform: translateZ(28px);
}
.pillar-icon svg { width: 28px; height: 28px; }
.pillar-card .pillar-title { margin-top: 18px; }

/* --------------------------------------------------------------------------
   6. "How it works": real sequences keep their numbers, set as large outlined figures.
   -------------------------------------------------------------------------- */
.process-num {
    font-family: var(--font-heading) !important;
    font-size: 2.6rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
    color: transparent !important;
    -webkit-text-stroke: 1.5px var(--bead);
    background: none !important;
}

/* --------------------------------------------------------------------------
   7. "How can Maple help you?" rows: the whole row is the target; arrow slides, fill wipes.
   -------------------------------------------------------------------------- */
.help-links a {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 200ms linear, border-color 200ms linear;
}
.help-links a::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(196, 0, 0, 0.08), rgba(196, 0, 0, 0.02));
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 420ms var(--mx-ease, ease);
}
.help-links a span[aria-hidden] { display: inline-block; transition: transform 420ms var(--mx-ease, ease); }
@media (hover: hover) {
    .help-links a:hover { color: var(--bead); border-color: rgba(196, 0, 0, 0.35); }
    .help-links a:hover::before { transform: scaleX(1); }
    .help-links a:hover span[aria-hidden] { transform: translate3d(5px, 0, 0); }
}

/* --------------------------------------------------------------------------
   8. Footer sign-off: one colour, the bead carries the accent.
   -------------------------------------------------------------------------- */
footer h2 .text-accent, .site-footer h2 .text-accent { color: inherit; }

/* Consent tick on forms: a sentence, not a field label */
.form-optin, .form-optin span {
    font-family: var(--font-body, Inter, sans-serif);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-2);
}
.form-optin { gap: 10px; cursor: pointer; }

/* "How it works": the number sits above the step so five steps fit a row */
.process-step { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* Header: nav labels never wrap; the header CTA keeps its compact tracking */
.site-header .nav-link { white-space: nowrap; }
.site-header .header-quote-btn { letter-spacing: var(--tracking-wide, 0.04em); }
@media (min-width: 1025px) and (max-width: 1440px) {
    .site-header .nav-list { gap: clamp(14px, 1.5vw, 28px); }
}

/* --------------------------------------------------------------------------
   8b. Page Hero Spacing Fix (Guarantees zero overlap with fixed header)
   -------------------------------------------------------------------------- */
.page-hero {
    padding-top: calc(var(--header-height, 96px) + 38px) !important;
    padding-bottom: clamp(36px, 4vw, 54px) !important;
    position: relative !important;
}
.page-hero .breadcrumbs {
    margin-bottom: 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
}
.page-hero .page-hero-tag {
    margin-bottom: 12px !important;
}
.page-hero .page-hero-title {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    font-size: clamp(2rem, 3.4vw + 1rem, 3.3rem) !important;
    font-weight: 800 !important;
    line-height: 1.16 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
}
.page-hero .page-hero-subtitle {
    margin: 0 !important;
    font-size: clamp(1rem, 1.2vw + 0.45rem, 1.18rem) !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    max-width: 820px !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4) !important;
}
@media (max-width: 768px) {
    .page-hero {
        padding-top: calc(var(--header-height, 76px) + 24px) !important;
        padding-bottom: 32px !important;
    }
}

/* --------------------------------------------------------------------------
   9. Refined Filter Bar: responsive, modern, and high-clarity controls
   -------------------------------------------------------------------------- */
.filter-bar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 24px 28px !important;
    margin-bottom: var(--space-8, 36px) !important;
    box-shadow: 0 10px 30px -6px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.03) !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.filter-bar:focus-within {
    border-color: #cbd5e1 !important;
    box-shadow: 0 14px 34px -8px rgba(15, 23, 42, 0.1) !important;
}

/* Standard single-row filter bars (e.g. projects, centres, blog) */
.filter-bar:not(.courses-filter-bar) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)) !important;
    gap: 16px !important;
    align-items: end !important;
}
.filter-bar:not(.courses-filter-bar) .filter-search {
    grid-column: span 2;
}

/* Courses 2-tier structured filter bar */
.courses-filter-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
.courses-filter-bar .filter-row-primary {
    display: grid !important;
    grid-template-columns: 2fr 1.15fr 1.15fr 1fr !important;
    gap: 18px !important;
    align-items: end !important;
}
.courses-filter-bar .filter-divider {
    border-top: 1px solid #f1f5f9 !important;
    margin: 20px 0 !important;
}
.courses-filter-bar .filter-row-secondary {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}
.courses-filter-bar .filter-controls-group {
    display: flex !important;
    align-items: flex-end !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    flex: 1 !important;
}
.courses-filter-bar .filter-controls-group .filter-field {
    min-width: 140px !important;
    flex: 1 1 140px !important;
}
.courses-filter-bar .filter-controls-group .filter-checks {
    min-width: fit-content !important;
    flex: 0 0 auto !important;
}

/* Shared field styling */
.filter-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    min-width: 0 !important;
}
.filter-field label,
.filter-label {
    font-family: var(--font-body, 'Inter', -apple-system, sans-serif) !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #475569 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}
.input-icon-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}
.input-icon-wrap .field-icon {
    position: absolute !important;
    left: 14px !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
    transition: color 0.2s ease !important;
    z-index: 1 !important;
}
.input-icon-wrap input {
    padding-left: 40px !important;
}
.input-icon-wrap:focus-within .field-icon {
    color: var(--color-primary, #c40000) !important;
}

.filter-field input,
.filter-field select {
    width: 100% !important;
    min-height: 46px !important;
    padding: 10px 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 0.92rem !important;
    color: #0f172a !important;
    background-color: #f8fafc !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
    box-sizing: border-box !important;
}
.filter-field input::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}
.filter-field input:focus,
.filter-field select:focus {
    background-color: #ffffff !important;
    border-color: var(--color-primary, #c40000) !important;
    box-shadow: 0 0 0 3px rgba(196, 0, 0, 0.12) !important;
}
.filter-field select {
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 38px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Payment Chips */
.checks-wrap {
    display: inline-flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
.check-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 6px 12px !important;
    border-radius: 9px !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    user-select: none !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
}
.check-chip:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}
.check-chip input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-height: auto !important;
    accent-color: var(--color-primary, #c40000) !important;
    cursor: pointer !important;
    margin: 0 !important;
}
.check-chip:has(input:checked) {
    background: rgba(196, 0, 0, 0.08) !important;
    border-color: var(--color-primary, #c40000) !important;
    color: var(--color-primary, #c40000) !important;
    box-shadow: 0 0 0 1px var(--color-primary, #c40000) !important;
}

/* Action Buttons */
.filter-actions {
    display: inline-flex !important;
    gap: 10px !important;
    align-items: center !important;
    margin-left: auto !important;
}
.filter-actions .btn {
    min-height: 46px !important;
    padding: 10px 22px !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    justify-content: center !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.filter-actions .btn-primary {
    background: linear-gradient(135deg, #d31010 0%, #a80000 100%) !important;
    box-shadow: 0 4px 14px rgba(196, 0, 0, 0.28) !important;
    color: #ffffff !important;
    border: none !important;
}
.filter-actions .btn-primary:hover {
    background: linear-gradient(135deg, #e51515 0%, #ba0000 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(196, 0, 0, 0.38) !important;
}
.filter-actions .btn-secondary {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #475569 !important;
}
.filter-actions .btn-secondary:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    transform: translateY(-1px) !important;
}

/* Responsive Breakpoints */
@media (max-width: 1080px) {
    .courses-filter-bar .filter-row-primary {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }
    .courses-filter-bar .filter-controls-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
        width: 100% !important;
    }
    .courses-filter-bar .filter-actions {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 10px !important;
    }
    .courses-filter-bar .filter-actions .btn {
        flex: 1 !important;
    }
}

@media (max-width: 768px) {
    .filter-bar {
        padding: 18px 16px !important;
        border-radius: 14px !important;
    }
    .courses-filter-bar .filter-row-primary {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .courses-filter-bar .filter-divider {
        margin: 14px 0 !important;
    }
    .courses-filter-bar .filter-controls-group {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .courses-filter-bar .filter-controls-group .filter-checks {
        width: 100% !important;
    }
    .checks-wrap {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .check-chip {
        justify-content: center !important;
        width: 100% !important;
    }
    .courses-filter-bar .filter-actions {
        width: 100% !important;
        display: flex !important;
        gap: 10px !important;
        margin-top: 12px !important;
    }
    .courses-filter-bar .filter-actions .btn {
        flex: 1 !important;
    }
}

/* --------------------------------------------------------------------------
   10. Centres & Offices: balanced, modern corporate cards
   -------------------------------------------------------------------------- */
.centre-grid {
    list-style: none !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)) !important;
    gap: 28px !important;
    margin-top: var(--space-8, 36px) !important;
    padding: 0 !important;
}
.centre-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 32px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}
.centre-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary, #c40000) 0%, #ff6b4a 100%);
    opacity: 0.9;
}
.centre-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(196, 0, 0, 0.3) !important;
    box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(196, 0, 0, 0.1) !important;
}
.centre-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.centre-type-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
}
.centre-type {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--color-primary, #c40000) !important;
    background: rgba(196, 0, 0, 0.08) !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    width: fit-content !important;
}
.centre-head h3 {
    font-family: var(--font-heading, 'Archivo', sans-serif) !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 4px 0 2px !important;
    line-height: 1.25 !important;
}
.centre-city {
    color: #475569 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.centre-address {
    font-style: normal !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    color: #334155 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
}
.centre-facts {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 4px 0 !important;
}
.centre-facts div {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    gap: 10px !important;
    align-items: baseline !important;
    font-size: 0.92rem !important;
}
.centre-facts dt {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #64748b !important;
}
.centre-facts dd {
    margin: 0 !important;
    color: #0f172a !important;
    font-weight: 500 !important;
}
.centre-facts dd a {
    color: #0f172a !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
.centre-facts dd a:hover {
    color: var(--color-primary, #c40000) !important;
}
.centre-courses-label {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #475569 !important;
    margin: 4px 0 -4px !important;
}
.centre-card .tag-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.centre-card .tag-list li {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #0369a1 !important;
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}
.centre-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: auto !important;
    padding-top: 10px !important;
}
.centre-actions .btn {
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
    font-size: 0.84rem !important;
}

/* Centre companion card (fills void when 1 centre is shown) */
.centre-companion-card {
    background: linear-gradient(145deg, #ffffff 0%, #fbfcfe 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 32px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
}
.companion-tag {
    display: inline-flex !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #0369a1 !important;
    background: #f0f9ff !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    width: fit-content !important;
}
.centre-companion-card h3 {
    font-family: var(--font-heading, 'Archivo', sans-serif) !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}
.centre-companion-card p {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    margin: 0 !important;
}
.companion-perks {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 6px 0 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
}
.perk-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: #334155 !important;
}
.perk-item svg {
    flex-shrink: 0 !important;
    color: var(--color-primary, #c40000) !important;
}
.companion-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: auto !important;
    padding-top: 6px !important;
}
.companion-actions .btn {
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
    font-size: 0.84rem !important;
}

/* --------------------------------------------------------------------------
   11. Course Cards & Programs: clean, modern, ultra-sharp card design
   -------------------------------------------------------------------------- */
.programs-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr)) !important;
    gap: 28px !important;
    margin-top: 36px !important;
}
.program-card,
.course-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease !important;
    position: relative !important;
}
.program-card:hover,
.course-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(196, 0, 0, 0.35) !important;
    box-shadow: 0 20px 35px -8px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(196, 0, 0, 0.15) !important;
}
.program-card .program-media {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 16/9 !important;
    background: #0f172a !important;
}
.program-card .program-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: block !important;
}
.program-card:hover .program-media img {
    transform: scale(1.05) !important;
}
.program-card .program-header {
    background: #ffffff !important;
    padding: 22px 24px 10px !important;
    border-bottom: none !important;
    position: relative !important;
}
.program-card .program-type-tag {
    display: inline-flex !important;
    align-items: center !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--color-primary, #c40000) !important;
    background: rgba(196, 0, 0, 0.08) !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    margin-bottom: 10px !important;
}
.program-card .program-title {
    font-family: var(--font-heading, 'Archivo', sans-serif) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #0f172a !important;
    margin: 0 !important;
}
.program-card .program-title a {
    display: inline-block !important; /* the whole line box is the tap target (>= 24px), not just the glyphs */
    color: #0f172a !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
.program-card .program-title a:hover {
    color: var(--color-primary, #c40000) !important;
}
.program-card .program-body {
    padding: 0 24px 24px !important;
    background: #ffffff !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}
.program-card .program-meta-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 12px 0 16px !important;
    background-color: #f8fafc !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
}
.program-card .program-meta-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.program-card .meta-label {
    color: #64748b !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    text-transform: uppercase !important;
}
.program-card .meta-val {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.program-card .seats-left {
    display: inline-block !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #047857 !important;
}
.program-card .seats-left.full {
    color: #b91c1c !important;
}
.program-card .program-summary {
    font-size: 0.88rem !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.program-card .fee-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    list-style: none !important;
}
.program-card .fee-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
}
.program-card .program-footer {
    margin-top: auto !important;
    padding-top: 16px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}
.program-card .program-cert-badge {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #0369a1 !important;
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}
.program-card .program-footer .btn-primary {
    padding: 8px 18px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
}

@media (max-width: 640px) {
    .programs-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .centre-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .centre-card,
    .centre-companion-card {
        padding: 22px !important;
    }
}


/* css/motion.css */
/* ==========================================================================
   Maple motion system — paired with public/js/motion.js
   One curve, three durations, one motif: the weld bead (a red line that draws).
   Rules: only transform + opacity animate; nothing is hidden unless html.js;
   prefers-reduced-motion removes movement.
   ========================================================================== */
:root {
    --mx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);      /* decisive start, long settle */
    --mx-fast: 180ms;                                /* press, hover, small state changes */
    --mx-base: 420ms;                                /* reveals, menus */
    --mx-slow: 700ms;                                /* hero lines, rules drawing in */
    --mx-rise: 16px;                                 /* reveal travel */
    --mx-bead: var(--color-primary, #c40000);
}

/* --------------------------------------------------------------------------
   1. Scroll reveals (classes added by motion.js only to content below the fold)
   -------------------------------------------------------------------------- */
html:not(.js) .animate-on-scroll { opacity: 1; transform: none; }
html.js .animate-on-scroll {
    opacity: 0;
    transform: translate3d(0, var(--mx-rise), 0);
    transition: opacity var(--mx-base) var(--mx-ease), transform var(--mx-slow) var(--mx-ease);
    transition-delay: var(--mx-delay, 0ms);
    will-change: auto;
}
html.js .animate-on-scroll[data-mx="fade-in"]     { transform: none; }
html.js .animate-on-scroll[data-mx="slide-left"]  { transform: translate3d(-24px, 0, 0); }
html.js .animate-on-scroll[data-mx="slide-right"] { transform: translate3d(24px, 0, 0); }
html.js .animate-on-scroll[data-mx="zoom"]        { transform: scale(0.97); }
/* cards stand up out of the page */
html.js .animate-on-scroll[data-mx="rise3d"]      { transform: perspective(1100px) translate3d(0, 34px, 0) rotateX(14deg); transform-origin: 50% 100%; }
/* headings: hidden until split into lines, then each line rises out of its mask */
html.js .animate-on-scroll[data-mx="lines"]       { transform: none; transition: none; }
/* photos: an ink curtain draws back while the image settles */
html.js .animate-on-scroll[data-mx="curtain"]     { opacity: 1; transform: none; position: relative; overflow: hidden; }
html.js .animate-on-scroll[data-mx="curtain"]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(90deg, #0d0f12 0%, #0d0f12 92%, var(--mx-bead) 92%, var(--mx-bead) 100%);
    transform-origin: 100% 50%;
    transition: transform 1100ms var(--mx-ease);
    transition-delay: var(--mx-delay, 0ms);
}
html.js .animate-on-scroll[data-mx="curtain"].is-visible::after { transform: scaleX(0); }
html.js .animate-on-scroll[data-mx="curtain"]:not(.is-visible) img { scale: 1.25; }
html.js .animate-on-scroll.is-visible { opacity: 1; transform: none; }
/* the old helper delays from style.css are replaced by batch-ordered --mx-delay */
html.js .animate-on-scroll.delay-100, html.js .animate-on-scroll.delay-200,
html.js .animate-on-scroll.delay-300, html.js .animate-on-scroll.delay-400 { transition-delay: var(--mx-delay, 0ms); }

/* --------------------------------------------------------------------------
   2. Hero: headline lines rise out of a mask, then supporting copy and CTAs
   -------------------------------------------------------------------------- */
@keyframes mx-show { to { opacity: 1; } }
/* inner-page titles are never hidden: they are the Largest Contentful Paint */
html.mx:not(.mx-instant) .home-hero:not(.mx-hero-ready) :is(.home-hero-title, .audience-hero-card),
html.mx:not(.mx-instant) .page-hero:not(.mx-hero-ready) .page-hero-actions {
    opacity: 0;
    /* safety net: if motion.js never runs, everything appears after 2 s */
    animation: mx-show 0s linear 2s forwards;
}
/* no padding/margin here: block margins would collapse and change the headline height (layout shift) */
.mx-line { display: block; overflow: clip; overflow-clip-margin: 0.3em; }
.mx-line-in { display: block; transform: translate3d(0, 108%, 0); }
.mx-lines-kept .mx-line-in { transform: none; transition: none; }
.mx-lines-flat .mx-line { display: contents; }
.mx-lines-flat .mx-line-in { display: inline; transform: none; }
.mx-hero-run .mx-line-in, .mx-run .mx-line-in { transform: none; transition: transform var(--mx-slow) var(--mx-ease); transition-delay: var(--mx-delay, 0ms); }
.mx-hero-step { opacity: 0; transform: translate3d(0, 12px, 0); }
.mx-hero-run .mx-hero-step { opacity: 1; transform: none; transition: opacity var(--mx-base) var(--mx-ease), transform var(--mx-slow) var(--mx-ease); transition-delay: var(--mx-delay, 0ms); }

/* --------------------------------------------------------------------------
   3. Header: compacts after scrolling (transform-only layers — the header and its
   container must stay untransformed so the fixed mobile drawer keeps the viewport
   as its containing block), plus the scroll-progress bead.
   -------------------------------------------------------------------------- */
.site-header, .site-header.scrolled { background: transparent; border-bottom-color: transparent; box-shadow: none; }
.site-header::before,
.site-header::after {
    content: '';
    position: absolute;
    inset: 0;
    transform-origin: 50% 0;
    transition: transform var(--mx-base) var(--mx-ease), opacity var(--mx-base) var(--mx-ease);
}
/* ::before is the compact bar: translucent + blurred so the page reads through it, with a soft shadow.
   ::after is a solid white sheet over it at the top of the page (the hero sits under the header there),
   which fades out on scroll — so the change is an opacity fade, not a colour or shadow transition. */
.site-header::before {
    /* opaque enough that big headings scrolling underneath never compete with the nav labels */
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: 0 10px 28px -18px rgba(12, 16, 22, 0.35);
}
.site-header::after {
    background: #fff;
    border-bottom: 1px solid var(--border-hairline);
    pointer-events: none;
}
.site-header.scrolled::after { opacity: 0; }
.site-header .brand,
.site-header .header-actions { transition: transform var(--mx-base) var(--mx-ease); }
.site-header .brand-logo-img { transform-origin: 0 50%; transition: transform var(--mx-base) var(--mx-ease); }
.site-header.scrolled::before,
.site-header.scrolled::after { transform: scaleY(var(--mx-compact, 0.78)); }
.site-header.scrolled .brand,
.site-header.scrolled .header-actions { transform: translate3d(0, var(--mx-compact-shift, -10px), 0); }
.site-header.scrolled .brand-logo-img { transform: scale(0.84); }
@media (min-width: 1025px) {
    .site-header .nav-wrapper { transition: transform var(--mx-base) var(--mx-ease); }
    .site-header.scrolled .nav-wrapper { transform: translate3d(0, var(--mx-compact-shift, -10px), 0); }
}
@media (max-width: 1024px) { :root { --mx-compact: 0.82; --mx-compact-shift: -7px; } }
/* the header box keeps its full height; let the uncovered strip under the compact bar pass clicks through */
.site-header.scrolled { pointer-events: none; }
.site-header.scrolled::before,
.site-header.scrolled .header-container > * { pointer-events: auto; }

.mx-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2100;
    background: var(--mx-bead);
    transform-origin: 0 50%;
    transform: scaleX(var(--mx-p, 0));
    pointer-events: none;
}
@supports (animation-timeline: scroll()) {
    @keyframes mx-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .mx-progress.mx-css { animation: mx-progress linear both; animation-timeline: scroll(root block); }
}

/* desktop nav underline: draw with scaleX instead of animating width */
.nav-link::after { width: 100% !important; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--mx-base) var(--mx-ease) !important; }
.nav-link:hover::after, .nav-link.active::after, .nav-link:focus-visible::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   4. Cards that are links: lift, slow image zoom, bead drawn along the base.
   (.mx-card is added by motion.js only to cards that navigate somewhere.)
   -------------------------------------------------------------------------- */
/* box-shadow is the one paint-only property here: these cards clip their content (overflow:hidden), so a
   separate shadow layer would be clipped too. It runs only on hover, on one element at a time. */
.mx-card { position: relative; transition: transform var(--mx-base) var(--mx-ease), box-shadow var(--mx-base) var(--mx-ease); }
.mx-card .mx-media, .mx-card.mx-media { overflow: hidden; }
.mx-media-frame { display: block; overflow: hidden; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mx-media-frame > img { display: block; }
/* card photos: zoom uses the `scale` property so it composes with the depth drift (`translate`) */
.mx-card .mx-media img { transition: scale 1.2s var(--mx-ease); }
.mx-card-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--mx-bead);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--mx-slow) var(--mx-ease);
    pointer-events: none;
    z-index: 3;
}
.mx-arrow { display: inline-block; transition: transform var(--mx-base) var(--mx-ease); }
@media (hover: hover) {
    .mx-card:hover { transform: translate3d(0, -4px, 0); box-shadow: 0 24px 48px -24px rgba(12, 16, 22, 0.32), 0 2px 6px rgba(12, 16, 22, 0.06); }
    .mx-card:hover .mx-media img { scale: 1.06; }
    .mx-card:hover .mx-depth img, .mx-card:hover.mx-depth img { scale: 1.18; }
    .mx-card:hover .mx-card-line { transform: scaleX(1); }
    .mx-card:hover .mx-arrow, .btn:hover .mx-arrow { transform: translate3d(4px, 0, 0); }
}
/* keyboard users get the same signal */
.mx-card:focus-visible, .mx-card:focus-within { transform: translate3d(0, -4px, 0); }
.mx-card:focus-visible .mx-card-line, .mx-card:focus-within .mx-card-line { transform: scaleX(1); }

/* 3D tilt + glare on link cards (motion.js, fine pointers) */
.mx-glare {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(460px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 46%);
    opacity: 0;
    transition: opacity 350ms var(--mx-ease);
}
.mx-card.is-tilting { transition: transform 120ms linear, box-shadow 420ms var(--mx-ease); box-shadow: 0 30px 60px -28px rgba(12, 16, 22, 0.45), 0 2px 6px rgba(12, 16, 22, 0.06); }
.mx-card.is-tilting .mx-glare { opacity: 1; }
.mx-card.is-tilting .mx-card-line { transform: scaleX(1); }
/* photos drift inside their frames as the page scrolls (depth) */
.mx-depth { overflow: hidden; }
.mx-depth img { scale: 1.12; translate: 0 var(--dy, 0px); transition: scale 1.2s var(--mx-ease); }

/* --------------------------------------------------------------------------
   5. Buttons and links: press feedback, arrow slide, underline draw
   -------------------------------------------------------------------------- */
.btn { transition: background-color var(--mx-fast) linear, border-color var(--mx-fast) linear, color var(--mx-fast) linear, box-shadow var(--mx-base) var(--mx-ease), transform var(--mx-fast) var(--mx-ease); }
.btn:active { transform: translate3d(0, 1px, 0) scale(0.98); transition-duration: 80ms; }
.btn-arrow { transition: transform var(--mx-base) var(--mx-ease); }

/* one-line links outside running text (footer, breadcrumbs, "View …" links) */
.mx-link { position: relative; text-decoration: none; }
.mx-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform var(--mx-base) var(--mx-ease);
}
.mx-link:hover::after, .mx-link:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }

/* --------------------------------------------------------------------------
   6. Section divider: hairline + a short weld bead that draws in.
   Inserted by motion.js only where two neighbouring sections share a background.
   -------------------------------------------------------------------------- */
.mx-divider {
    position: absolute;
    top: 0;
    left: max(var(--gutter, 20px), calc((100% - var(--container-max, 1280px)) / 2 + var(--gutter, 20px)));
    right: max(var(--gutter, 20px), calc((100% - var(--container-max, 1280px)) / 2 + var(--gutter, 20px)));
    height: 1px;
    background: var(--border-hairline, rgba(15, 23, 42, 0.1));
    pointer-events: none;
}
.mx-divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: -1px;
    width: 72px;
    height: 3px;
    background: var(--mx-bead);
    transform-origin: 0 50%;
    transform: scaleX(0);
    transition: transform var(--mx-slow) var(--mx-ease);
}
html:not(.mx) .mx-divider::before, .mx-divider.is-drawn::before { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   7. Process steps: the bead runs across each step in order, hot tip leading
   -------------------------------------------------------------------------- */
.process-step { position: relative; overflow: hidden; }
.process-list.mx-seam .process-step::before,
.process-list.mx-seam .process-step::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    pointer-events: none;
}
.process-list.mx-seam .process-step::before {
    background: linear-gradient(90deg, #4b5159, #7a1d16 70%, var(--mx-bead));
    transform-origin: 0 50%;
    transform: scaleX(0);
    transition: transform 900ms var(--mx-ease);
    transition-delay: var(--mx-delay, 0ms);
}
.process-list.mx-seam .process-step::after {
    top: -1px;
    height: 5px;
    background: linear-gradient(90deg, transparent calc(100% - 30px), rgba(255, 179, 71, 0.9) calc(100% - 8px), #fffbe8 100%);
    transform: translate3d(-100%, 0, 0);
    opacity: 1;
    transition: transform 900ms var(--mx-ease), opacity var(--mx-base) linear;
    transition-delay: var(--mx-delay, 0ms), calc(var(--mx-delay, 0ms) + 800ms);
}
.process-list.mx-seam.is-welded .process-step::before { transform: scaleX(1); }
.process-list.mx-seam.is-welded .process-step::after { transform: none; opacity: 0; }

/* --------------------------------------------------------------------------
   8. Mobile drawer and dropdowns (transform + opacity instead of `right`)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .nav-wrapper {
        right: 0 !important;
        transform: translate3d(104%, 0, 0);
        opacity: 0;
        visibility: hidden;
        transition: transform var(--mx-base) var(--mx-ease), opacity var(--mx-base) var(--mx-ease), visibility 0s linear var(--mx-base) !important;
    }
    .nav-wrapper.active {
        transform: none;
        opacity: 1;
        visibility: visible;
        transition: transform var(--mx-base) var(--mx-ease), opacity var(--mx-fast) linear, visibility 0s !important;
    }
    /* drawer: dropdown toggles read left-aligned like the other items (buttons centre text by default) */
    .nav-wrapper .nav-dropdown-toggle { text-align: left; }
    @keyframes mx-drop { from { opacity: 0; transform: translate3d(0, -6px, 0); } }
    .nav-item.open > .nav-dropdown { animation: mx-drop var(--mx-base) var(--mx-ease); }
}
.nav-dropdown { transition-timing-function: var(--mx-ease) !important; }

/* --------------------------------------------------------------------------
   9. Page-to-page transitions (View Transitions API; other browsers navigate normally)
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms linear both mx-vt-out; }
::view-transition-new(root) { animation: var(--mx-base) var(--mx-ease) both mx-vt-in; }
@keyframes mx-vt-out { to { opacity: 0; } }
@keyframes mx-vt-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
/* named on the container, not the header: a named element becomes a backdrop root, which would stop the
   compact bar's backdrop blur (header::before) from seeing the page */
#site-header .header-container { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }

/* --------------------------------------------------------------------------
   10. Hero plates: a real photograph per page (server-rendered, see views/partials/heroPlate.ejs)
   Layers: .hero-plate (scroll parallax) > .hero-plate-depth (pointer depth) > .hero-plate-zoom
   (slow settle on load) > img + sparks canvas. All transform-only.
   -------------------------------------------------------------------------- */
.has-plate { background-image: none !important; position: relative; overflow: hidden; isolation: isolate; }
.hero-plate {
    position: absolute;
    inset: -7% 0;
    z-index: 0;
    pointer-events: none;
    background: #0b0e14;
}
.hero-plate-depth, .hero-plate-zoom { position: absolute; inset: 0; }
.hero-plate-depth { inset: -16px; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }
.hero-plate-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
@media (max-width: 768px) { .hero-plate-img { object-position: var(--pos-sm, var(--pos, 50% 50%)); } }
.hero-plate canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
/* scrims above the photo, copy above the scrims */
.home-hero.has-plate::before { z-index: 1; }
.home-hero.has-plate .home-hero-inner, .page-hero.has-plate .page-hero-inner { position: relative; z-index: 2; }
.page-hero.plate-bright::after {
    background:
        linear-gradient(100deg, rgba(9, 11, 14, 0.9) 0%, rgba(9, 11, 14, 0.8) 44%, rgba(9, 11, 14, 0.5) 74%, rgba(9, 11, 14, 0.34) 100%),
        linear-gradient(to bottom, rgba(9, 11, 14, 0.3) 0%, rgba(9, 11, 14, 0.08) 45%, rgba(9, 11, 14, 0.5) 100%);
}
@media (max-width: 768px) {
    /* phones: the copy spans the full width, so the scrim is even */
    .page-hero.has-plate::after { background: linear-gradient(to bottom, rgba(9, 11, 14, 0.72), rgba(9, 11, 14, 0.62) 55%, rgba(9, 11, 14, 0.8)); }
}

/* the photograph settles into place once, on load */
@keyframes mx-plate-settle { from { transform: scale(1.07); } to { transform: none; } }
html.mx .hero-plate-zoom { animation: mx-plate-settle 2.4s var(--mx-ease) both; }
html.mx-instant .hero-plate-zoom { animation: none; }
/* scroll parallax: the photo travels slower than the page */
@supports (animation-timeline: view()) {
    @keyframes mx-par { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 12%, 0); } }
    html.mx .hero-plate { animation: mx-par linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
}
html.mx .hero-plate.mx-js-par { transform: translate3d(0, var(--mx-par, 0px), 0); }
.hero-plate-depth.is-following { transition: transform 900ms var(--mx-ease); }

/* --------------------------------------------------------------------------
   11. Reduced motion, print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    html.js .animate-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }
    .mx-line-in, .mx-hero-step { transform: none !important; opacity: 1 !important; }
    .hero-plate, .hero-plate-zoom, .hero-plate-depth { transform: none !important; animation: none !important; }
    .mx-depth img { scale: 1 !important; translate: none !important; }
    .mx-glare { display: none; }
    .btn.mx-magnetic { transform: none !important; }
    .hero-plate canvas { display: none; }
    .mx-card, .mx-card:hover, .mx-card:focus-within, .mx-card .mx-media img, .btn, .btn:active, .site-header .brand, .site-header .header-actions, .site-header .nav-wrapper, .site-header .brand-logo-img { transform: none !important; }
    .site-header.scrolled::before, .site-header.scrolled::after { transform: none; }
    .mx-divider::before, .process-list.mx-seam .process-step::before { transform: scaleX(1) !important; transition: none !important; }
    .process-list.mx-seam .process-step::after { display: none; }
    *, *::before, *::after { scroll-behavior: auto !important; }
}
@media print {
    html.js .animate-on-scroll, .mx-hero-step, .mx-line-in { opacity: 1 !important; transform: none !important; }
    .mx-progress, .mx-divider { display: none; }
}

/* --------------------------------------------------------------------------
   Devanagari typography (Hindi pages)
   -------------------------------------------------------------------------- */
/* Devanagari letters join along the headstroke; tracking breaks that line */
body.lang-hi, body.lang-hi * { letter-spacing: normal !important; }
/* Latin display / mono faces have no Devanagari glyphs: use one Devanagari family on Hindi pages */
body.lang-hi :not([lang="en"]):not([translate="no"]):not(code):not(kbd) { font-family: 'Noto Sans Devanagari', 'Inter', system-ui, sans-serif !important; }

/* --------------------------------------------------------------------------
   12. Homepage showcase: the three pillars as a pinned 3D cover-flow (desktop, motion allowed).
   motion.js adds .mx-showcase and drives each panel's transform from the scroll position.
   Without it (phones, tablets, reduced motion, no JS) the pillars are the ordinary card grid.
   -------------------------------------------------------------------------- */
.pillar-photo { display: none; }
/* Slide dots / arrows exist only for the desktop cover-flow; phones and tablets keep the plain card grid. */
.pillars-section:not(.mx-showcase) .showcase-dots,
.pillars-section:not(.mx-showcase) .showcase-controls { display: none; }
@media (min-width: 1024px) {
    .pillars-section.mx-showcase { padding: 0; height: calc(100vh + (var(--panels, 3) - 1) * 85vh); }
    .mx-showcase .pillars-sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        overflow: hidden;
        background:
            radial-gradient(ellipse 60% 55% at 50% 62%, rgba(196, 0, 0, 0.06), transparent 70%),
            var(--surface-0, #fff);
    }
    .mx-showcase .pillars-sticky > .container { width: 100%; padding-top: calc(var(--header-height, 96px) * 0.55); }
    .mx-showcase .section-header { margin-bottom: clamp(14px, 3vh, 36px); }
    .mx-showcase .pillar-grid {
        display: block;
        position: relative;
        height: min(54vh, 500px);
        perspective: 1700px;
        perspective-origin: 50% 40%;
        transform-style: preserve-3d;
    }
    .mx-showcase .pillar-card {
        --w: min(64vw, 940px);
        position: absolute;
        top: 0;
        left: 50%;
        width: var(--w);
        height: 100%;
        margin-left: calc(var(--w) / -2);
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        grid-template-rows: 1fr auto auto auto auto 1fr;
        column-gap: clamp(24px, 3vw, 48px);
        padding: 0 clamp(24px, 3vw, 48px) 0 0;
        transition: box-shadow var(--mx-base) var(--mx-ease), border-color var(--mx-fast) linear;
        will-change: transform, opacity;
        backface-visibility: hidden;
        transform-origin: 50% 50%;
    }
    .mx-showcase .pillar-card.is-active { box-shadow: 0 40px 80px -40px rgba(12, 16, 22, 0.45), 0 2px 8px rgba(12, 16, 22, 0.06); border-color: var(--border-accent, rgba(196, 0, 0, 0.3)); }
    .mx-showcase .pillar-card:not(.is-active) { cursor: pointer; }
    .mx-showcase .pillar-photo { display: block; grid-column: 1; grid-row: 1 / -1; overflow: hidden; border-radius: inherit; border-top-right-radius: 0; border-bottom-right-radius: 0; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); position: relative; }
    .mx-showcase .pillar-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .mx-showcase .pillar-card > :not(.pillar-photo):not(.mx-card-line) { grid-column: 2; }
    .mx-showcase .pillar-icon { grid-row: 2; }
    .mx-showcase .pillar-title { grid-row: 3; font-size: clamp(1.6rem, 1rem + 1.4vw, 2.4rem); margin: 14px 0 12px; }
    .mx-showcase .pillar-card p { grid-row: 4; flex: none; font-size: var(--fs-body); max-width: 40ch; }
    .mx-showcase .pillar-card .card-more { grid-row: 5; }
    .mx-showcase .mx-card-line { height: 4px; }
    .mx-showcase .pillar-card.is-active .mx-card-line { transform: scaleX(1); }
    .showcase-controls { display: none; }
    .mx-showcase .showcase-controls {
        display: flex;
        position: absolute;
        top: 52%;
        left: 0;
        right: 0;
        justify-content: space-between;
        pointer-events: none;
        z-index: 35;
        padding: 0 clamp(12px, 3vw, 48px);
        transform: translateY(-50%);
    }
    .mx-showcase .showcase-nav-btn {
        pointer-events: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        color: #0f172a;
        border: 1px solid rgba(15, 23, 42, 0.1);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.05);
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        backdrop-filter: blur(12px);
    }
    .mx-showcase .showcase-nav-btn:hover:not(:disabled):not(.is-disabled) {
        background: var(--color-primary, #c40000);
        color: #fff;
        border-color: var(--color-primary, #c40000);
        transform: scale(1.12);
        box-shadow: 0 14px 30px -5px rgba(196, 0, 0, 0.45);
    }
    .mx-showcase .showcase-nav-btn:active:not(:disabled):not(.is-disabled) {
        transform: scale(0.96);
    }
    .mx-showcase .showcase-nav-btn:disabled,
    .mx-showcase .showcase-nav-btn.is-disabled {
        opacity: 0.25;
        cursor: default;
        pointer-events: none;
        box-shadow: none;
    }
    .showcase-dots { display: none; }
    .mx-showcase .showcase-dots { display: flex; justify-content: center; gap: 20px; margin-top: clamp(16px, 3vh, 32px); position: relative; z-index: 25; }
    .showcase-dots span,
    .showcase-dots button {
        position: relative;
        width: 32px;
        height: 4px;
        border-radius: 3px;
        border: none;
        padding: 0;
        cursor: pointer;
        background: var(--border-strong, #cbd5e1);
        transform-origin: 50% 50%;
        transition: transform var(--mx-base) var(--mx-ease), background-color var(--mx-base) ease;
    }
    .showcase-dots span::after,
    .showcase-dots button::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--mx-bead, #c40000); opacity: 0; transition: opacity var(--mx-base) linear; }
    .showcase-dots span.is-on,
    .showcase-dots button.is-on { transform: scaleX(1.5); background: var(--mx-bead, #c40000); }
    .showcase-dots span.is-on::after,
    .showcase-dots button.is-on::after { opacity: 1; }
    .showcase-dots button:hover:not(.is-on) { background: #94a3b8; }
}