/* ==========================================================================
   TPTW Engineering — Design System
   Clean corporate look · navy palette · mobile-first
   ========================================================================== */

:root {
    /* Brand palette */
    --navy:        #0A2540;   /* primary — header, footer, headings */
    --ink:         #0B1B2B;   /* deepest background block */
    --blue:        rgba(0, 57, 122, 0.97);   /* primary accent — links, buttons */
    /* --blue:        rgba(0,90,192,.97);    */
    --blue-bright: #2E86DE;   /* hover / highlight */
    --blue-soft:   #E8F1FB;   /* tint background */
    --brand-blue: var(--blue);
    /* Brand gradient for the header, inner-page heroes, the home stats band
       and the footer, built from the logo artwork's own blues. The light end
       stops at #0168D6, the middle of the artwork's gradient: it is the
       brightest blue white text still reads on (5.31:1). The artwork's bright
       centre, #0A93FF, would drop white text to 3.17:1, so it is left out.
       All four use the same sweep, light on the left and deep on the right, so the header and the hero
       beneath it line up as one continuous block. */
    --blue-deep:  #00418F;
    --blue-light: #0061c9;
    --brand-gradient: linear-gradient(270deg, var(--blue-deep) 0%, var(--blue) 55%, var(--blue-light) 100%);
    /* Header fill. Set to var(--navy) to go back to a navy bar. */
    --header-bg: var(--brand-gradient);   /* gradient; var(--blue) for a flat bar */
    --mist:        #F4F7FB;   /* light section background */
    --slate:       #33414F;   /* body text */
    --slate-light: #64748B;   /* muted text */
    --line:        #E2E8F0;   /* borders / dividers */
    --white:       #FFFFFF;

    /* Typography */
    --font-body:    'DM Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    --font-heading: 'Barlow Condensed', 'DM Sans', 'Segoe UI', sans-serif;

    /* Layout */
    --container: 1180px;
    --radius:   10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(10, 37, 64, .06), 0 1px 2px rgba(10, 37, 64, .04);
    --shadow:    0 8px 24px rgba(10, 37, 64, .08);
    --shadow-lg: 0 20px 48px rgba(10, 37, 64, .14);
    --header-h: 72px;
    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--slate);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a { color: var(--blue); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--blue-bright); }

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--navy);
    line-height: 1.1;
    margin: 0 0 .4em;
    font-weight: 500;
    letter-spacing: .005em;
}
h1 { font-size: clamp(2.5rem, 6.5vw, 4.25rem); font-weight: 600; }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 600; }
h3 { font-size: 1.5rem; font-weight: 600; }
p  { margin: 0 0 1rem; }

.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 1000;
    background: var(--navy); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }

.section { padding: clamp(2.75rem, 7vw, 6.5rem) 0; }
.section--mist { background: var(--mist); }
.section--navy { background: var(--navy); color: #cfdbe9; }
.section--navy h2, .section--navy h3 { color: #fff; }

/* Wide enough that most intro paragraphs sit on a single line */
.section-head { max-width: 1000px; margin: 0 auto clamp(2rem, 5vw, 3.25rem); text-align: center; }
.section-head.left { margin-inline: 0; text-align: left; }
.eyebrow {
    display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--blue); margin-bottom: .75rem;
}
.section--navy .eyebrow { color: var(--blue-bright); }
.section-head p { color: var(--slate-light); font-size: 1.05rem; margin-bottom: 0; }
.section--navy .section-head p { color: #a9bcd0; }

.lead { font-size: 1.15rem; color: var(--slate); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1;
    padding: .9rem 1.6rem; border-radius: var(--radius); border: 1.5px solid transparent;
    cursor: pointer; transition: all .2s var(--ease); white-space: nowrap;
}
.btn-sm { padding: .6rem 1.1rem; font-size: .9rem; }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-bright); border-color: var(--blue-bright); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }
.btn-whatsapp { background: #25D366; color: #fff; border-color: #25D366; }
.btn-whatsapp:hover { background: #1fb356; border-color: #1fb356; color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-whatsapp svg { width: 20px; height: 20px; fill: currentColor; }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--header-bg);
    transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled { box-shadow: 0 4px 20px rgba(0,40,92,.3); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }

.brand { display: flex; align-items: center; gap: .7rem; }
.brand-logo { height: 48px; width: auto; display: block; }

/* Header and footer are both the brand blue itself, so the logo sits straight
   on them with no plate — the wrappers stay in the markup and just hold the
   image. (The maintenance page, which stays navy, keeps its own plate.) */
.brand-plate, .footer-plate { display: flex; flex: none; }
.brand-text { font-family: var(--font-heading); color: #fff; font-weight: 600; font-size: 1.4rem; letter-spacing: .02em; }

.main-nav { display: flex; align-items: center; }
.nav-menu { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.nav-menu a {
    /* #eef4fc, not the old #d7e2ef: over the light end of the header gradient
       that grey fell to 4.05:1; this holds 4.8:1 across the whole bar. */
    display: block; color: #eef4fc; font-weight: 500; font-size: .95rem;
    padding: .55rem .85rem; border-radius: 8px; transition: color .2s, background .2s;
}
.nav-menu a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-menu a.is-active { color: #fff; }
/* A blue tint is invisible on a blue bar — the active link is marked in white. */
.nav-menu a.is-active:not(.btn) { background: rgba(255,255,255,.18); }
.nav-cta-item { margin-left: .5rem; }
.nav-cta-item .btn { color: #fff; }
/* The primary blue button all but vanishes against the blue header (1.28:1),
   so the header's call to action inverts to white on navy. */
.nav-cta-item .btn-primary { background: #fff; border-color: #fff; color: var(--navy); }
.nav-cta-item .btn-primary:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.nav-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 10px;
}
.nav-toggle span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Narrow desktops / small laptops: tighten nav so long labels don't crowd the logo */
/* Burger menu below 1060px (was 1000px): with eight links plus the quote
   button, a 1001-1015px viewport pushed the button past the right edge. */
@media (min-width: 1061px) and (max-width: 1180px) {
    .nav-menu { gap: .1rem; }
    .nav-menu a { padding: .5rem .55rem; font-size: .86rem; }
    .brand-text { font-size: 1.15rem; }
    .brand-logo { height: 40px; }
    .nav-cta-item { margin-left: .25rem; }
    .nav-cta-item .btn { padding: .5rem .8rem; font-size: .82rem; }
}

/* Eight links plus the quote button leave the company name no room at full
   desktop width (the container stops growing at 1180px), and it wrapped onto
   two lines. Slightly tighter link spacing keeps it on one; the type size is
   unchanged. */
@media (min-width: 1181px) {
    .nav-menu { gap: .2rem; }
    .nav-menu a { padding-left: .6rem; padding-right: .6rem; }
}

/* On a phone the logo, the company name and the burger share one row, and the
   name was wrapping onto two lines and running into the burger. One size down
   puts it back on a single line with room to spare. */
@media (max-width: 560px) {
    .brand-text { font-size: 1rem; }
}

@media (max-width: 1060px) {
    .nav-toggle { display: flex; }
    .nav-menu {
        position: fixed; inset: var(--header-h) 0 auto 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--header-bg); padding: 1rem 1.25rem 1.5rem;
        border-top: 1px solid rgba(255,255,255,.18);
        box-shadow: 0 20px 40px rgba(0,0,0,.3);
        transform: translateY(-120%); transition: transform .35s var(--ease);
        max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    }
    .nav-menu.open { transform: translateY(0); }
    .nav-menu a { padding: .9rem .5rem; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.06); }
    .nav-cta-item { margin: 1rem 0 0; }
    .nav-cta-item .btn { width: 100%; justify-content: center; padding: .9rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative; color: #fff; overflow: hidden;
    background: linear-gradient(180deg, var(--navy), var(--ink));
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.hero-media::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(100deg, rgba(8,23,38,.92) 0%, rgba(9,28,46,.78) 38%, rgba(10,37,64,.35) 68%, rgba(10,37,64,.15) 100%),
        linear-gradient(0deg, rgba(8,23,38,.55) 0%, rgba(8,23,38,0) 40%);
}
.hero-inner { position: relative; padding: clamp(3rem, 10vw, 8rem) 0 clamp(2.5rem, 7vw, 6rem); max-width: 760px; }
.hero h1 { color: #fff; margin-bottom: 1.25rem; font-size: clamp(1.9rem, 4.4vw, 3rem); }
.hero .hero-sub { font-size: clamp(1rem, 1.9vw, 1.18rem); color: #c3d3e6; margin-bottom: 2rem; max-width: 580px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-badge {
    display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.5rem;
    padding: .45rem 1rem; border: 1px solid rgba(255,255,255,.2); border-radius: 100px;
    font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: #cfe0f2;
    background: rgba(255,255,255,.05);
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-bright); box-shadow: 0 0 0 4px rgba(46,134,222,.25); }

/* --------------------------------------------------------------------------
   Stats band
   -------------------------------------------------------------------------- */
/* Brand gradient, like the header. The "+" was --blue-bright, which disappears
   on blue; a pale sky blue keeps it as an accent (4.27:1 at the gradient's
   light end). The label is white.
   The cells used to paint their own background over a tinted grid so the 1px
   gaps showed as dividers — that would restart the gradient in every cell, so
   the cells are now transparent and the dividers are drawn as inset lines. */
.stats-band { position: relative; background: var(--brand-gradient); border-top: 1px solid rgba(255,255,255,.14); }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.stat { padding: 2rem 1.25rem; text-align: center; }
.stat:nth-child(even) { box-shadow: inset 1px 0 rgba(255,255,255,.16); }
.stat:nth-child(n+3) { box-shadow: inset 0 1px rgba(255,255,255,.16); }
.stat:nth-child(4) { box-shadow: inset 1px 1px rgba(255,255,255,.16); }
.stat-value { font-family: var(--font-heading); font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 600; color: #fff; letter-spacing: 0; line-height: 1; }
.stat-value .suffix { color: #cfeaff; }
.stat-label { margin-top: .5rem; font-size: .9rem; color: #fff; font-weight: 500; letter-spacing: .03em; }

@media (min-width: 720px) {
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
    .stat { box-shadow: none; }
    .stat:not(:first-child) { box-shadow: inset 1px 0 rgba(255,255,255,.16); }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Editable lists can hold any number of cards, so a fixed grid leaves the
   last row hugging the left edge (7 cards => 3 + 3 + 1). Flex lets the final
   row centre instead, which reads as intentional at any count. Column widths
   below match .grid-3 / .grid-4 exactly, so a full row looks unchanged. */
.grid--flow { display: flex; flex-wrap: wrap; justify-content: center; }
.grid--flow > * { flex: 0 1 100%; }
@media (min-width: 640px) {
    .grid--flow > * { flex: 0 1 calc((100% - 1.5rem) / 2); }
}
@media (min-width: 960px) {
    .grid--flow.grid-3 > * { flex: 0 1 calc((100% - 3rem) / 3); }
    .grid--flow.grid-4 > * { flex: 0 1 calc((100% - 4.5rem) / 4); }
}

.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card-media img { transform: scale(1.08); }
/* "Zoomed-out" media — shows the full part instead of cropping */
.card-media.contain { background: transparent; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.card-media.contain img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.card:hover .card-media.contain img { transform: none; }
.card-body { padding: 1.5rem; }

/* Dark "stage" product cards — pure-black photo backgrounds blend into the card */
.card--dark {
    background: linear-gradient(180deg, #000 0%, #060d15 50%, #0b1a29 100%);
    border-color: rgba(255,255,255,.08);
}
.card--dark .card-media.contain { padding: 2rem 2rem 1rem; }
.card--dark .card-media.contain img { max-height: 210px; }
.card--dark .card-body h3 { color: #fff; }
.card--dark .card-body p { color: #9fb2c8; }
.card--dark:hover { box-shadow: 0 20px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(46,134,222,.4); }
.card-body h3 { margin-bottom: .5rem; }
.card-body p { color: var(--slate-light); font-size: .95rem; margin-bottom: 0; }

/* Icon feature (no image) */
.feature { padding: 1.75rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); height: 100%; }
.feature .feature-num { font-size: .85rem; font-weight: 700; color: var(--blue); letter-spacing: .1em; }
.feature h3 { margin: .75rem 0 .5rem; }
.feature p { color: var(--slate-light); font-size: .95rem; margin: 0; }

/* --------------------------------------------------------------------------
   Split / media rows
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.reverse .split-media { order: 2; } }
/* Columns with mismatched content height (e.g. short text beside a taller photo
   stack) should sit flush at the top, not float centred with dead space above/below. */
.split--top { align-items: start; }
.split-media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.split-body h2 { margin-bottom: 1rem; }
.split-body p { color: var(--slate-light); }
/* Long titles that must stay on a single line inside a half-width split column */
.h2-oneline { font-size: clamp(1.5rem, 2.6vw, 2.35rem); white-space: nowrap; }
@media (max-width: 560px) { .h2-oneline { white-space: normal; } }

.checklist { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; }
.checklist li { position: relative; padding-left: 2rem; color: var(--slate); }
.checklist li::before {
    content: ""; position: absolute; left: 0; top: .35em; width: 1.15rem; height: 1.15rem;
    background: var(--blue-soft); border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B6FC4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
}
/* Two-column checklists: flow each column independently (CSS columns) instead of a
   row-locked grid, so a two-line item doesn't stretch the row and strand its
   same-row neighbour in extra whitespace — every item keeps the same, even gap
   to the next item in its own column. */
.checklist--cols {
    display: block; columns: 2; column-gap: 2.25rem;
}
.checklist--cols li { margin-bottom: .75rem; break-inside: avoid; -webkit-column-break-inside: avoid; }
.checklist--cols li:last-child { margin-bottom: 0; }
@media (max-width: 520px) { .checklist--cols { columns: 1; } }

/* --------------------------------------------------------------------------
   Process flow
   -------------------------------------------------------------------------- */
.process { display: flex; flex-wrap: wrap; gap: .75rem; counter-reset: step; }
.process-step {
    flex: 1 1 140px; position: relative; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.25rem 1rem; counter-increment: step;
}
.process-step::before {
    content: "0" counter(step); display: block; font-size: .8rem; font-weight: 700;
    color: var(--blue); letter-spacing: .05em; margin-bottom: .35rem;
}
.process-step span { font-weight: 600; color: var(--navy); font-size: .95rem; }

/* One-stop process — numbered step cards */
/* Chevron process flow — interlocking arrows on a single row */
.chevron-flow { display: flex; flex-wrap: nowrap; gap: 0; justify-content: center; }
.chev {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    padding: 1.35rem .4rem 1.35rem 1.35rem; color: var(--blue); text-align: center;
    /* white face; the blue "border" is drawn by the parent layer showing through */
    background: #fff;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
    margin-right: -18px;   /* interlock: the notch of the next chevron sits in this tip */
    transition: background .25s var(--ease), color .25s var(--ease);
}
.chev-outline {
    flex: 1 1 0; min-width: 0; background: var(--blue); margin-right: -18px;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
    padding: 2px;   /* this padding becomes the visible blue outline */
    display: flex;
}
.chev-outline:first-child, .chev-outline:first-child > .chev {
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
}
.chev-outline:first-child > .chev { padding-left: .7rem; }
.chev-outline:last-child { margin-right: 0; }
.chev-outline > .chev { margin-right: 0; width: 100%; }
.chev-outline:hover > .chev { background: var(--blue-soft); }
/* wrapper span so an admin can click the icon to swap it */
.chev-icon { width: 26px; height: 26px; color: var(--blue); flex: 0 0 auto; display: flex; }
.chev-icon-svg { width: 100%; height: 100%; }
.chev-label { font-size: .8rem; font-weight: 600; line-height: 1.2; hyphens: auto; color: var(--navy); }
@media (max-width: 1100px) {
    .chev { padding: 1.1rem .3rem 1.1rem 1.15rem; }
    .chev-icon { width: 21px; height: 21px; }
    .chev-label { font-size: .68rem; }
}
@media (max-width: 820px) {
    .chev-icon { display: none; }
    .chev { padding: .95rem .25rem .95rem 1rem; }
    .chev-label { font-size: .62rem; }
}
@supports not (background: color-mix(in srgb, red, blue)) {
    .chev { background: var(--navy); }
}
/* Mobile: keep the arrow flow, but pointing downwards */
@media (max-width: 560px) {
    .chevron-flow { flex-direction: column; gap: 0; }
    .chev-outline, .chev-outline:first-child, .chev-outline:last-child {
        flex: 1 1 auto; margin-right: 0; margin-bottom: -14px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px));
    }
    .chev-outline:last-child { margin-bottom: 0; }
    .chev, .chev-outline:first-child > .chev {
        flex: 1 1 auto; max-width: none; min-height: 62px;
        flex-direction: row; justify-content: flex-start; gap: .9rem;
        padding: .85rem 1.1rem 1.6rem; text-align: left; margin-right: 0;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px));
    }
    .chev-icon { display: flex; width: 22px; height: 22px; }
    .chev-label { font-size: .95rem; }
}

/* Tag pills */
.tags { display: flex; flex-wrap: wrap; gap: .6rem; }
.tag {
    display: inline-block; padding: .55rem 1rem; background: #fff; border: 1px solid var(--line);
    border-radius: 100px; font-size: .9rem; font-weight: 500; color: var(--slate);
    transition: all .2s var(--ease);
}
.tag:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }

/* "What we machine" — product carousel + component strip.
   The product list is open-ended, so it scrolls sideways instead of growing
   the page: native scroll-snap does the swiping, JS only drives the controls. */
.pcar { position: relative; }
.pcar-track {
    display: flex; gap: 1rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    /* room for the hover lift and its shadow, which the scroller would clip */
    padding: .5rem .25rem 1.25rem;
    margin: -.5rem -.25rem -1.25rem;
    scrollbar-width: none; -ms-overflow-style: none;
}
.pcar-track::-webkit-scrollbar { display: none; }

.pcar-item {
    flex: 0 0 calc((100% - 2rem) / 3); scroll-snap-align: start;
    position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #000 0%, #060d15 60%, #0b1a29 100%);
    box-shadow: var(--shadow);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pcar-item::after {                      /* accent that draws itself on hover */
    content: ''; position: absolute; left: 0; right: 100%; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--blue-bright));
    transition: right .45s var(--ease);
}
.pcar-item:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(0,0,0,.42); }
.pcar-item:hover::after { right: 0; }

.pcar-media { position: relative; aspect-ratio: 4 / 3; }
/* Soft stage light behind the part so a cut-out never floats on flat black. */
.pcar-media::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 45%, rgba(46,134,222,.20), transparent 62%);
}
.pcar-media img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; padding: 1.4rem;
    transition: transform .5s var(--ease);
}

/* Photos shown whole that an admin can drag into place — awards, badges,
   logos, certificate thumbnails, the product carousel (img_pan() in
   config.php, 'pan' mode). Both rules wait for data-panned, which is only set
   once a photo has actually been moved, so an untouched photo renders exactly
   as it did before this existed. A moved photo is clipped by its frame, so it
   cannot slide out over the card or the neighbour beside it. */
img[data-panned] { translate: var(--pan-x, 0) var(--pan-y, 0); }
:has(> img[data-panned]) { overflow: hidden; }

/* Hover zoom on photos that stand on their own (not inside a card). Only for
   a real mouse: on a touch screen a tap would leave the photo stuck zoomed.
   Nothing changes until the pointer is over a photo. */
.zoomable { cursor: zoom-in; }
.split-media img, .hl-img-main, .hl-img-row img, .print-figure img, .qa-photos img,
.smart-photos img, .protocol-photos img,
.award-card img, .appr-card img, .cert-card img, .qa-cert-thumb img { transition: transform .45s var(--ease); }
@media (hover: hover) and (pointer: fine) {
    /* In a frame that clips: the photo grows inside it, like the cards. */
    .smart-photos figure:hover img,
    .protocol-photos figure:hover img { transform: scale(1.08); }
    /* The photo is its own frame (corners and shadow are on the image), so it
       lifts slightly as a whole, shadow included — measured to stay clear of
       its neighbours. The traceability diagram is left out: zooming inside its
       frame would crop the labels, so it opens full size on click instead. */
    .split-media img:hover, .hl-img-main:hover, .hl-img-row img:hover,
    .print-figure img:hover, .qa-photos img:hover { transform: scale(1.04); }

    /* Awards and certificates, as the whole card is pointed at. The trophy
       and the tiny certificate scan sit in frames that clip, so they grow
       inside them; the appreciation letters and certificates carry their own
       grey stage, which lifts 4% as a whole — well inside the card's padding
       (29px and 17px, against 16px and 7px of growth at desktop width). */
    .award-card:hover img { transform: scale(1.08); }
    .qa-cert:hover .qa-cert-thumb img { transform: scale(1.1); }
    .appr-card:hover img,
    .cert-card:hover img { transform: scale(1.04); }
}
.pcar-item:hover .pcar-media img { transform: scale(1.09); }
.pcar-index {
    position: absolute; left: .85rem; top: .85rem; z-index: 2;
    padding: .18rem .5rem; border-radius: 999px;
    background: rgba(10,37,64,.72); border: 1px solid rgba(255,255,255,.18); color: #cfe0f2;
    font-family: var(--font-heading); font-size: .72rem; font-weight: 600; letter-spacing: .06em;
}
/* The caption sits below the photo rather than over its lower edge, so the
   part is never covered. Every card is the same height (the flex track
   stretches them), and each caption reserves the same space — two lines of
   title, three of description — so across a row the titles start level, the
   descriptions start level, and a card with a one-line title, a short
   description or none at all still matches its neighbours. Longer text is
   trimmed with an ellipsis rather than pushing its card out of line. */
.pcar-item { display: flex; flex-direction: column; }
.pcar-item figcaption {
    position: relative; z-index: 1; flex: 1;
    padding: 1rem 1.25rem 1.2rem;
    border-top: 1px solid rgba(255,255,255,.07);
}
.pcar-item figcaption strong {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    min-height: 2.4em;
    color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; line-height: 1.2;
}
.pcar-item figcaption span {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
    min-height: 4.35em;
    margin-top: .4rem; font-size: .85rem; color: #9fb2c8; line-height: 1.45;
}
.pcar-item figcaption span.cms-empty { opacity: .6; font-style: italic; }

/* Controls — hidden by main.js when everything already fits. */
.pcar-bar { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; }
.pcar-bar[hidden] { display: none; }
.pcar-nav {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--line); background: #fff; color: var(--navy);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.pcar-nav svg { width: 20px; height: 20px; }
.pcar-nav:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }
.pcar-nav:disabled { opacity: .35; cursor: default; }
.pcar-rail { position: relative; flex: 1 1 auto; height: 4px; border-radius: 999px; background: var(--line); }
.pcar-thumb {
    position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
    border-radius: 999px; background: var(--blue);
    transition: left .2s var(--ease), width .2s var(--ease);
}
.pcar-count { flex: 0 0 auto; font-size: .85rem; color: var(--slate-light); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) { .pcar-item { flex-basis: calc((100% - 1rem) / 2); } }
@media (max-width: 640px) {
    /* Partial next card is the affordance that says "this swipes". */
    .pcar-item { flex-basis: 82%; }
    .pcar-nav { display: none; }
}

/* Component list, as a strip under the carousel */
.wm-strip {
    display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(1.5rem, 4vw, 2.75rem);
    align-items: center; margin-top: clamp(2rem, 5vw, 3rem);
    background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2rem);
}
.wm-strip-intro h3 { font-size: 1.2rem; margin: 0 0 .6rem; }
.wm-note { font-size: .88rem; color: var(--slate-light); margin: 0 0 1.1rem; line-height: 1.55; }
/* Equal columns rather than shrink-to-fit pills: the labels range from
   "Adapters" to "Machine Frames & Structures", so sizing each to its own text
   left the right edge ragged (up to 458px short on the last row). */
.wm-chips {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
}
/* Two equal columns. A full row already fills the width exactly, so centring
   only affects an odd one left over on the last row. */
.wm-chips > li { flex: 0 0 calc((100% - .6rem) / 2); }
@media (max-width: 520px) {
    .wm-chips > li { flex-basis: 100%; }
}
.wm-chips li {
    position: relative; display: flex; align-items: center; gap: .5rem;
    padding: .55rem .95rem; border-radius: 999px;
    background: #fff; border: 1px solid var(--line);
    font-size: .9rem; color: var(--slate);
    transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.wm-chips li::before {
    content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
}
.wm-chips li:hover { border-color: var(--blue); color: var(--navy); transform: translateY(-2px); }

@media (max-width: 900px) { .wm-strip { grid-template-columns: 1fr; } }

/* Machine specifications */
/* The summary card used to sit in a column beside the list. With enough
   machines that column ran a couple of thousand pixels of empty space, so it
   is a full-width band above the list instead — which also frees the list to
   use two columns. */
.spec-layout { display: grid; gap: 1.5rem; align-items: start; }
.spec-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
@media (max-width: 1080px) { .spec-list { grid-template-columns: 1fr; } }
.spec-row {
    position: relative;  /* anchors the CMS sort buttons to this row */
    display: grid; grid-template-columns: 76px 1fr auto; gap: .85rem; align-items: center;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .9rem;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.spec-row:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.spec-photo { width: 76px; height: 52px; object-fit: contain; }
.spec-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.spec-name { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--navy); line-height: 1.15; }
.spec-axis { font-size: .82rem; font-weight: 600; color: var(--blue); white-space: nowrap; }
.spec-note { font-size: .78rem; color: var(--slate-light); line-height: 1.3; }

/* Collapsed list — the rows are in the page, just not shown until asked for.
   The button is revealed by main.js, so a visitor without JS gets the whole
   list rather than a list that cannot be opened. */
.spec-list.is-collapsed .spec-row.is-extra { display: none; }
.spec-more {
    justify-self: center; display: inline-flex; align-items: center; gap: .45em;
    margin-top: .25rem; padding: .6em 1.4em;
    background: #fff; color: var(--blue); border: 1.5px solid var(--line); border-radius: 100px;
    font: 600 .88rem var(--font-body), system-ui, sans-serif; cursor: pointer;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.spec-more:hover { border-color: var(--blue); background: var(--blue-soft); }
.spec-more svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.spec-more[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (max-width: 620px) {
    .spec-row { grid-template-columns: 64px 1fr; gap: .7rem; row-gap: .35rem; }
    .spec-photo { width: 64px; height: 46px; }
    .spec-axis { grid-column: 1 / -1; white-space: normal; }
}
.spec-sizes { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 1.35rem 1.6rem; }
.spec-sizes h3 { color: #fff; font-size: 1.1rem; margin: 0 0 .9rem; }
/* Full width now, so the figures read across instead of stacking. */
.spec-sizes-figures { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1rem 2rem; }
.spec-sizes-figures > * { flex: 1 1 130px; }
.spec-size-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.spec-size-row span { font-size: .92rem; color: #b7c8db; }
.spec-size-row strong { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; color: #fff; }
.spec-foot { margin: 1rem 0 0; font-size: .82rem; color: var(--blue-bright); font-weight: 600; }

/* Accuracy range — highlighted instead of a small footnote */
.spec-accuracy {
    /* Beside the size figures on a wide band, under them once they stack. */
    padding: .5rem 0 .5rem 2rem; border-left: 1px solid rgba(255,255,255,.15);
    text-align: center;
}
@media (max-width: 640px) {
    .spec-accuracy {
        padding: 1rem 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.15);
    }
}
.spec-accuracy-label {
    display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--blue-bright); margin-bottom: .3rem;
}
.spec-accuracy-value {
    display: block; font-family: var(--font-heading); font-weight: 700;
    font-size: clamp(1.6rem, 3.5vw, 2.1rem); color: #fff; line-height: 1;
}

/* Machine brand logos */
.brand-strip { margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid var(--line); text-align: center; }
.brand-strip-label {
    display: block; margin-bottom: 1.25rem; font-size: .75rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--slate-light);
}
/* Machine brands — a paged rail at every width, two rows per page, so the
   section is the same height whether there are 6 brands or 40. Page size drops
   with the viewport (6x2 desktop, 4x2 tablet, 3x2 phone); the snap rules below
   mark the first card of each page, which is also how the script counts pages. */
.brand-rail {
    list-style: none; margin: 0; padding: .25rem;
    display: grid;
    grid-auto-flow: column;          /* fill down, then rightwards: one page per pair of columns */
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: calc((100% - 5rem) / 6);
    gap: 1rem;
    justify-content: start;          /* centring an overflowing track hides its start */
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
}
.brand-rail::-webkit-scrollbar { display: none; }
/* Only the first card of a page is a snap target, so a swipe moves a whole
   page rather than one column. */
.brand-rail > * { scroll-snap-align: none; }
.brand-rail > :nth-child(12n + 1) { scroll-snap-align: start; scroll-snap-stop: always; }

.brand-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; height: 118px; padding: .85rem .9rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.brand-card:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: var(--shadow-sm); }
.brand-media { display: flex; align-items: center; justify-content: center; width: 100%; flex: 1; min-height: 0; }
.brand-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* One line, clipped rather than wrapped: a long name must not make its card
   taller than the rest of the row.
   Scoped to .brand-card so it outweighs cms-edit.css's
   `[data-cms-item] { position: relative }` — that sheet loads later for a
   signed-in admin and, at equal specificity, would win. */
.brand-card .brand-name {
    position: static; width: 100%;
    font-size: .74rem; font-weight: 600; color: var(--navy);
    text-align: center; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Gallery caption sub-note, e.g. "(collaboration with partners)" */
.card-body p em { display: block; margin-top: .2rem; font-style: normal; font-weight: 500; font-size: .8rem; color: var(--slate-light); }

/* Quality photos */
.qa-photos { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.qa-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); display: block; }
.qa-photos img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* Certificates of registration in the Quality Department column.
   A fixed-height thumbnail stage keeps scans of different proportions level
   with each other, and the list can grow to any length from the CMS. */
.qa-certs { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.5rem; }
.qa-cert {
    position: relative; margin: 0;
    flex: 0 1 calc((100% - .85rem) / 2); min-width: 150px;
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem .85rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.qa-cert:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.qa-cert-thumb {
    flex: 0 0 auto; width: 46px; height: 62px;
    display: flex; align-items: center; justify-content: center;
    background: var(--mist); border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.qa-cert-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; display: block; }
.qa-cert figcaption { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.qa-cert figcaption strong { font-size: .88rem; color: var(--navy); line-height: 1.25; }
/* two lines reserved so a long issuer name does not make its row taller */
.qa-cert figcaption span { font-size: .76rem; color: var(--slate-light); line-height: 1.3; min-height: 2.6em; }
.qa-cert figcaption em {
    font-style: normal; font-size: .72rem; font-weight: 600; color: var(--blue);
    margin-top: .15rem;
}
@media (max-width: 520px) { .qa-cert { flex-basis: 100%; } }

/* Anchored sections: leave the sticky header a little breathing room so a
   jump does not land the heading right up against it. */
#certifications, #future-expansion { scroll-margin-top: 1.5rem; }

/* Pointer from the quality lab to the certifications themselves, which live on
   the home page — the badges are not repeated here. Left-aligned to match the
   rest of this column, unlike the centred .next-note. */
.qa-cert-note {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .75rem;
    margin: 1.25rem 0 0; font-size: .9rem; color: var(--slate-light); line-height: 1.55;
}
.qa-cert-note strong { color: var(--navy); font-weight: 600; }
.qa-cert-note a { color: var(--blue); font-weight: 600; text-decoration: none; white-space: nowrap; }
.qa-cert-note a:hover { text-decoration: underline; }
.qa-cert-note a .arrow { display: inline-block; transition: transform .2s var(--ease); }
.qa-cert-note a:hover .arrow { transform: translateX(3px); }

/* Traceability flow */
.trace-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .trace-flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trace-flow { grid-template-columns: 1fr; } }
.trace-step {
    position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 1.6rem 1.35rem 1.4rem; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.trace-step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.trace-num {
    position: absolute; top: 1rem; right: 1.2rem;
    font-family: var(--font-heading); font-weight: 700; font-size: 2rem; color: var(--blue); opacity: .15; line-height: 1;
}
.trace-icon {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); margin-bottom: 1rem;
}
.trace-icon svg { width: 23px; height: 23px; }
.trace-step h3 { font-size: 1.05rem; margin: 0 0 .45rem; }
.trace-step p { font-size: .88rem; color: var(--slate-light); margin: 0; line-height: 1.5; }
.trace-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.75rem; }
.trace-tags span {
    padding: .55rem 1.4rem; border-radius: 100px; background: var(--navy); color: #fff;
    font-size: .85rem; font-weight: 600; letter-spacing: .04em;
}

/* Section feature photo (traceability / control protocol) */
.trace-photo {
    margin: 0 auto clamp(1.75rem, 4vw, 2.5rem); max-width: 1000px;
    border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: #fff;
}
.trace-photo img { width: 100%; height: auto; display: block; }
.trace-photo figcaption {
    background: #fff; padding: .85rem 1.25rem; text-align: center;
    font-size: .85rem; color: var(--slate-light);
}

/* Manufacturing control protocol — offset photo pair beside numbered steps,
   mirroring the "photo left / requirements right" spread in the profile. */
.protocol-layout { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

/* Fixed aspect box so the overlap never depends on the images' own height —
   a percentage inset here would size circularly against the fr column. */
.protocol-photos { position: relative; aspect-ratio: 4 / 3.3; }
.protocol-photos figure { position: absolute; margin: 0; border-radius: var(--radius); overflow: hidden; }
.protocol-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pp-back { left: 0; top: 0; width: 86%; box-shadow: var(--shadow); }
.pp-front {
    right: 0; bottom: 0; width: 62%;
    border: 5px solid #fff; box-shadow: var(--shadow-lg);
}

.protocol-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.protocol-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 1.15rem; align-items: start; }
/* Rail joining the step marks into a sequence. */
.protocol-step:not(:last-child)::before {
    content: ''; position: absolute; left: 27px; top: 62px; bottom: -1.5rem;
    width: 2px; background: linear-gradient(var(--line), transparent);
}
.step-mark { position: relative; width: 56px; height: 56px; }
.step-icon {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--blue-soft); color: var(--blue);
    transition: background .25s var(--ease), color .25s var(--ease);
}
.step-icon svg { width: 24px; height: 24px; }
.step-num {
    position: absolute; right: -6px; top: -6px; z-index: 1;
    min-width: 24px; height: 24px; padding: 0 5px; border-radius: 999px;
    background: var(--navy); color: #fff; border: 2px solid #fff;
    font-family: var(--font-heading); font-size: .78rem; font-weight: 600;
    letter-spacing: .02em; display: flex; align-items: center; justify-content: center;
}
.protocol-step:hover .step-icon { background: var(--blue); color: #fff; }
.step-text h3 { font-size: 1.3rem; margin: .3rem 0 .5rem; line-height: 1.25; }
.step-text p { font-size: 1.05rem; color: var(--slate); margin: 0; line-height: 1.6; }
.step-text p strong { color: var(--navy); font-weight: 600; }

@media (max-width: 860px) {
    .protocol-layout { grid-template-columns: 1fr; }
    .protocol-photos { max-width: 460px; margin: 0 auto; }
}

/* Pointer from Facilities (built capability) to About (planned capability),
   so the two never get mixed up on the same page. */
.next-note {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: center; gap: .35rem .9rem;
    margin: 2.25rem 0 0; padding-top: 1.6rem;
    border-top: 1px solid var(--line);
    text-align: center; font-size: .95rem; color: var(--slate-light);
}
.next-note strong { color: var(--navy); font-weight: 600; }
.next-note a { color: var(--blue); font-weight: 600; text-decoration: none; white-space: nowrap; }
.next-note a:hover { text-decoration: underline; }
.next-note a .arrow { transition: transform .2s var(--ease); display: inline-block; }
.next-note a:hover .arrow { transform: translateX(3px); }

/* Smart manufacturing — the 6Ms honeycomb from the company profile.
   Flat-top hexagons: six around one centre tile. Geometry is pure ratio, so
   the whole cluster scales with its column and never needs a media query to
   stay in proportion — only to switch to the stacked phone layout below. */
.smart-layout { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.smart-photos { display: grid; gap: 1rem; }
.smart-photos figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.smart-photos img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.honeycomb { position: relative; container-type: inline-size; aspect-ratio: 1 / 1.0392; }
/* Scoped to .honeycomb so it outweighs cms-edit.css's
   `[data-cms-sort-id] { position: relative }`, which loads later for a
   signed-in admin and would otherwise drop the ring back into normal flow. */
.honeycomb .hex { position: absolute; width: 40%; height: 33.333%; }
.hex-body {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .45em; width: 100%; height: 100%; padding: 0 12%;
    text-align: center; line-height: 1.25;
    background: var(--navy); color: #fff;
    font-size: clamp(.68rem, 3.15cqw, 1.02rem);
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    transition: background .25s var(--ease);
}
.hex-body b { font-weight: 600; }
.hex-body svg { width: 1.7em; height: 1.7em; opacity: .6; }
/* wrapper added so an admin can click the icon to swap it */
.hex-ico { display: flex; }
.hex:hover .hex-body { background: var(--blue); }
.hex--centre .hex-body { background: var(--blue-bright); font-size: clamp(.72rem, 3.4cqw, 1.12rem); }
.hex--centre:hover .hex-body { background: var(--blue-bright); }

/* Admin sort buttons default to the box's top-right corner, which on a
   flat-top hexagon is outside the shape — they would float in the gap between
   tiles. Centre them on the top edge instead, above the icon. Only the offsets
   are touched, so the reveal animation in cms-edit.css still applies. */
.honeycomb .cms-sort-controls { top: 6px; right: auto; left: 50%; margin-left: -12px; }
@media (hover: none) {
    .honeycomb .cms-sort-controls { margin-left: -20px; }
}

/* Clockwise from the top of the ring; centre sits in the middle. */
.hex--centre { left: 30%; top: 33.333%; }
.hex--p1 { left: 30%; top: 0; }
.hex--p2 { left: 60%; top: 16.667%; }
.hex--p3 { left: 60%; top: 50%; }
.hex--p4 { left: 30%; top: 66.667%; }
.hex--p5 { left: 0;   top: 50%; }
.hex--p6 { left: 0;   top: 16.667%; }

@media (max-width: 860px) {
    .smart-layout { grid-template-columns: 1fr; }
    .smart-photos { grid-template-columns: 1fr 1fr; }
    /* Needs a definite width: auto margins stop a grid item stretching, and
       every hexagon is absolutely positioned, so its intrinsic width is 0. */
    .honeycomb { width: min(100%, 520px); margin-inline: auto; }
}
/* The cluster is kept at every width — it is the section's whole identity.
   On a phone it runs edge to edge so the tiles stay as large as possible, and
   the icons step aside to leave the labels room. */
@media (max-width: 640px) {
    .honeycomb {
        width: 100vw; max-width: 100vw;
        margin-inline: calc(50% - 50vw);
    }
    .hex-body { padding: 0 9%; gap: .3em; }
    .hex-body svg { width: 1.35em; height: 1.35em; }
}

/* Quality department list with icons */
.qa-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.15rem; }
.qa-list li { display: flex; gap: 1rem; align-items: flex-start; }
.qa-icon {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px;
    background: var(--blue-soft); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
}
.qa-icon svg { width: 21px; height: 21px; }
.qa-list li div { display: flex; flex-direction: column; gap: .15rem; }
.qa-list strong { color: var(--navy); font-size: .98rem; font-weight: 600; }
.qa-list span { color: var(--slate-light); font-size: .88rem; line-height: 1.45; }

/* Key materials (Facilities, navy section) */
/* Circle categories + grade lists (mirrors the company profile layout) */
.mat-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1rem .75rem; align-items: start; }
@media (max-width: 1080px) { .mat-grid { grid-template-columns: repeat(4, 1fr); gap: 1.75rem .75rem; } }
@media (max-width: 720px)  { .mat-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem .75rem; } }

.mat-col { text-align: center; }
.mat-circle {
    aspect-ratio: 1; width: 100%; max-width: 132px; margin: 0 auto 1rem;
    border-radius: 50%; background: #17346B;
    display: flex; align-items: center; justify-content: center; padding: .6rem;
    transition: background .25s var(--ease), transform .25s var(--ease);
}
.mat-col:hover .mat-circle { background: var(--blue); transform: translateY(-3px); }
.mat-circle span {
    font-family: var(--font-heading); font-weight: 600; font-size: .95rem;
    color: #fff; line-height: 1.15;
}
.mat-grades { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.mat-grades li { font-size: .78rem; color: #b7c8db; line-height: 1.35; font-weight: 500; }
/* Sits outside .mat-grades so the grade list can be edited as one field
   without this suffix being overwritten — styling matches a grade row. */
.mat-col .mat-more {
    margin: .35rem 0 0; font-size: .78rem; line-height: 1.35;
    color: var(--blue-bright); font-style: italic; font-weight: 600;
}

/* Global reach — flags aligned bottom-right */
.mat-sourcing {
    margin-top: 2.25rem; display: flex; align-items: center; justify-content: flex-end;
    flex-wrap: wrap; gap: .75rem 1.25rem;
}
.mat-sourcing-label {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .82rem; font-weight: 600; letter-spacing: .08em; color: var(--blue-bright);
}
.globe-icon { width: 22px; height: 22px; flex: 0 0 auto; }
.mat-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.mat-flags img {
    width: 34px; height: 34px; border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,.3); transition: transform .2s var(--ease);
}
.mat-flags img:hover { transform: translateY(-3px) scale(1.11); }
@media (max-width: 560px) { .mat-sourcing { justify-content: center; } }

/* Machine capacity banner + breakdown (Facilities) */
.mc-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.5rem, 5vw, 3.5rem);
    background: linear-gradient(120deg, var(--navy), #123457);
    border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.5rem, 5vw, 3rem);
    margin-bottom: 2rem; color: #fff;
}
.mc-banner-main { display: flex; align-items: center; gap: 1rem; }
.mc-total { font-family: var(--font-heading); font-weight: 700; font-size: clamp(3rem, 8vw, 4.5rem); line-height: 1; color: #fff; }
.mc-total-label { font-size: .95rem; font-weight: 600; color: var(--blue-bright); line-height: 1.25; }
.mc-banner-specs {
    list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem;
    border-left: 1px solid rgba(255,255,255,.16); padding-left: clamp(1.5rem, 4vw, 3rem);
}
.mc-banner-specs li strong { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; color: #fff; line-height: 1; }
.mc-banner-specs li span { display: block; margin-top: .3rem; font-size: .82rem; color: #9db4cd; }
@media (max-width: 700px) { .mc-banner-specs { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.16); padding-top: 1.25rem; width: 100%; } }

.mc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
@media (max-width: 1000px) { .mc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .mc-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; } }
.mc-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.15rem 1.1rem;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.mc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.mc-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); margin-bottom: .9rem; }
.mc-icon svg { width: 20px; height: 20px; }
.mc-info { display: flex; align-items: baseline; gap: .5rem; }
.mc-num { font-family: var(--font-heading); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--navy); }
.mc-label { font-size: .8rem; font-weight: 500; color: var(--slate-light); line-height: 1.25; }
.mc-bar { margin-top: .85rem; height: 5px; background: var(--mist); border-radius: 3px; overflow: hidden; }
.mc-bar span { display: block; height: 100%; border-radius: 3px; background: var(--blue); }

/* 3D metal printing — two-photo layout + collaboration note */
/* Treatment locations note */
.treat-locations {
    display: flex; align-items: center; gap: .6rem; margin: 1.1rem 0 0;
    padding: .75rem 1.05rem; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); font-size: .88rem; color: var(--slate);
}
.treat-locations strong { color: var(--navy); }
.treat-locations svg { width: 19px; height: 19px; color: var(--blue); flex: 0 0 auto; }

/* Two stacked, equal-width photos */
.print-stack { display: grid; gap: 1.1rem; }
.print-figure { margin: 0; }
.print-figure img {
    width: 100%; aspect-ratio: 637 / 367; object-fit: cover; object-position: center;
    display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
/* the first image carries text in the artwork. Its frame is the artwork's own
   ratio (637:367), so it shows whole today; it is draggable only so that a
   differently shaped replacement can be positioned within the same frame. */
.print-figure:first-child img { object-fit: contain; background: #000; }
.print-frame { min-width: 0; }
/* the second photo is a near-square product shot — the wide 637:367 bar above
   would crop a third of its height off; give it its own, gentler aspect ratio. */
.print-figure:last-child img { aspect-ratio: 4 / 3; }
.print-figure figcaption {
    margin-top: .6rem; text-align: center;
    font-size: .82rem; color: var(--slate-light);
}
.collab-note {
    display: flex; align-items: center; gap: .6rem; margin-top: 1.25rem;
    padding: .8rem 1.1rem; background: var(--blue-soft); border-radius: var(--radius);
    font-size: .88rem; font-weight: 500; color: var(--navy);
}
.collab-note svg { width: 20px; height: 20px; color: var(--blue); flex: 0 0 auto; }

/* Services offered — pills with icons */
/* Even grid so every service sits in an equal-width cell */
.svc-pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
@media (max-width: 520px) { .svc-pills { grid-template-columns: 1fr; } }
.svc-pill {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem 1.1rem; border-radius: 100px;
    background: #fff; border: 1.5px solid var(--line);
    font-size: .88rem; font-weight: 500; color: var(--slate); line-height: 1.25;
    transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.svc-pill:hover { color: var(--navy); }
.svc-pill svg { width: 18px; height: 18px; color: var(--blue); flex: 0 0 auto; transition: color .25s var(--ease); }
.svc-pill:hover { border-color: var(--blue); background: var(--blue-soft); transform: translateY(-2px); }
.svc-pill em { font-style: normal; font-size: .72rem; font-weight: 500; color: var(--slate-light); margin-left: .3rem; }
@media (max-width: 560px) {
    .svc-pills { gap: .55rem; }
    .svc-pill { padding: .65rem 1rem; font-size: .85rem; gap: .5rem; }
    .svc-pill svg { width: 18px; height: 18px; }
}

/* Services offered — icon cards (alternative) */
.svc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.15rem; }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); gap: .85rem; } }

.svc-tile {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.svc-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.svc-tile-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy); }
.svc-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.svc-tile:hover .svc-tile-media img { transform: scale(1.10); }
.svc-tile-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,37,64,0) 45%, rgba(10,37,64,.35) 100%);
}
.svc-tile-icon {
    position: absolute; left: .7rem; bottom: .7rem; z-index: 1;
    width: 40px; height: 40px; border-radius: 11px;
    background: rgba(255,255,255,.94); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(10,37,64,.22);
}
.svc-tile-icon svg { width: 21px; height: 21px; }
.svc-tile-body { padding: .95rem 1rem 1.1rem; }
.svc-tile-body h3 { font-size: .95rem; margin: 0; color: var(--navy); line-height: 1.3; }
.svc-note { display: block; margin-top: .3rem; font-size: .72rem; color: var(--slate-light); }

/* --------------------------------------------------------------------------
   Logo wall (customers)
   -------------------------------------------------------------------------- */
.logo-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 560px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .logo-wall { grid-template-columns: repeat(5, 1fr); } }
.logo-cell {
    background: #fff; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center;
    padding: 1.25rem; transition: background .2s var(--ease);
}
.logo-cell:hover { background: var(--mist); }
.logo-cell img { max-height: 54px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .3s var(--ease), opacity .3s var(--ease); }
.logo-cell:hover img { filter: grayscale(0); opacity: 1; }

/* Featured key customers (shown larger than the marquee) */
.featured-customers {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
@media (min-width: 600px) { .featured-customers { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .featured-customers { grid-template-columns: repeat(6, 1fr); } }
.featured-cell {
    background: #fff; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center;
    padding: 1.5rem; transition: background .2s var(--ease);
}
.featured-cell:hover { background: var(--mist); }
.featured-cell img { max-height: 88px; max-width: 100%; width: auto; object-fit: contain; }

/* Milestone timeline — colour-coded year badges, gradient connector, arrows */
.milestone-timeline { position: relative; display: grid; grid-template-columns: 1fr; gap: 2rem 1.5rem; }
@media (min-width: 560px) { .milestone-timeline { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .milestone-timeline { grid-template-columns: repeat(4, 1fr); } }

.milestone-item { position: relative; }
.milestone-node { display: flex; justify-content: center; margin-bottom: 1.25rem; position: relative; z-index: 1; }
.milestone-dot {
    display: flex; align-items: center; justify-content: center;
    width: 66px; height: 66px; border-radius: 50%;
    background: #fff; border: 3px solid var(--dot-color, var(--blue));
    color: var(--dot-color, var(--blue));
    font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; letter-spacing: .01em;
    box-shadow: 0 6px 18px rgba(10, 37, 64, .14);
}

/* Desktop: connecting line + arrows between the year badges.
   Each card draws the segment to its own right rather than the container
   drawing one line across everything: the old version was sized for exactly
   four cards (left/right 12.5% = half a column), so a fifth milestone
   wrapping onto a second row left the line hanging over empty space. Now the
   segment is simply hidden at the end of each row and on the last card, and
   any number of milestones joins up correctly. */
@media (min-width: 900px) {
    .milestone-item::before {
        content: ""; position: absolute; top: 32px; z-index: 0; height: 4px; border-radius: 4px;
        left: 50%; right: calc(-50% - 1.5rem);   /* this badge's centre to the next one's */
        background: var(--blue);
    }
    .milestone-item::after {
        content: ""; position: absolute; top: 32px; right: -0.75rem; transform: translate(50%, -50%);
        width: 0; height: 0; border: 7px solid transparent; border-left-color: var(--blue); z-index: 2;
    }
    /* 4 per row — nothing to connect to after the last card in a row */
    .milestone-item:nth-child(4n)::before, .milestone-item:last-child::before,
    .milestone-item:nth-child(4n)::after,  .milestone-item:last-child::after { content: none; }
}

/* Mobile: vertical timeline — badge on the left, card on the right */
@media (max-width: 559px) {
    .milestone-item { display: flex; align-items: flex-start; gap: 1rem; }
    .milestone-node { margin-bottom: 0; flex: 0 0 auto; }
    .milestone-dot { width: 58px; height: 58px; font-size: 1.05rem; }
    .milestone-card { flex: 1 1 auto; min-width: 0; }
    .milestone-timeline::before {
        content: ""; position: absolute; top: 29px; bottom: 29px; left: 27px; width: 4px; border-radius: 4px;
        background: var(--blue);
    }
}

/* Vision & Mission — two-tone band (About page).
   Each half's outer padding is worked out from its own width rather than from
   vw: vw counts the scrollbar, which would push the text a few pixels off the
   content column on desktop. In a grid item a percentage padding resolves
   against the column, so 100% - (container / 2) is exactly how far the
   container's edge sits in from the side of the page. */
.vm-band { display: grid; grid-template-columns: 1fr 1fr; }
.vm-half {
    position: relative; overflow: hidden;
    padding-block: clamp(3rem, 7vw, 5.5rem);
}
.vm-half--vision {
    background: var(--navy);
    padding-left: max(1.25rem, calc(100% - var(--container) / 2 + 1.25rem));
    padding-right: clamp(1.5rem, 4vw, 3.5rem);
}
.vm-half--mission {
    background: var(--blue);
    padding-left: clamp(1.5rem, 4vw, 3.5rem);
    padding-right: max(1.25rem, calc(100% - var(--container) / 2 + 1.25rem));
}
.vm-inner { position: relative; z-index: 1; max-width: 30rem; }
.vm-num {
    display: block; margin-bottom: .35rem;
    font-family: var(--font-heading); font-weight: 600; font-size: .95rem; letter-spacing: .1em;
}
.vm-half--vision .vm-num { color: #6f8aa6; }
.vm-half--mission .vm-num { color: #cfe3f7; }
.vm-half--vision .eyebrow { color: var(--blue-bright); }
/* white, not blue-soft: blue-soft on the brand blue is 4.47:1, just under AA */
.vm-half--mission .eyebrow { color: #fff; }
.vm-statement {
    margin: 0; color: #fff;
    font-size: clamp(1.55rem, 2.6vw, 2.15rem); line-height: 1.2;
}
/* The large faint icon in the corner of each half */
.vm-mark {
    position: absolute; right: -2.5rem; bottom: -3.5rem; z-index: 0;
    width: clamp(9rem, 17vw, 14.5rem); height: auto;
    color: #fff; pointer-events: none;
}
.vm-half--vision .vm-mark { opacity: .06; }
.vm-half--mission .vm-mark { opacity: .1; }
@media (max-width: 760px) {
    .vm-band { grid-template-columns: 1fr; }
    .vm-half--vision, .vm-half--mission { padding-inline: 1.25rem; }
    .vm-mark { right: -1.75rem; bottom: -2.5rem; width: 8.5rem; }
}

/* ---------------------------------------------------------------------------
   Careers page
   --------------------------------------------------------------------------- */
.perk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 1000px) { .perk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .perk-grid { grid-template-columns: 1fr; } }
.perk-card {
    position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 1.6rem 1.5rem 1.7rem;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.perk-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.perk-icon {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-bottom: 1.1rem; border-radius: 12px;
    background: var(--blue-soft); color: var(--blue);
}
.perk-icon svg { width: 25px; height: 25px; }
.perk-card h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.perk-card p { margin: 0; color: var(--slate-light); font-size: .93rem; }

.job-list { display: grid; gap: 1rem; max-width: 920px; margin: 0 auto; }
.job-card {
    position: relative; display: flex; align-items: flex-start; gap: 1.5rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 1.4rem 1.6rem;
}
.job-main { flex: 1; min-width: 0; }
.job-card h3 { font-size: 1.35rem; margin: 0 0 .5rem; }
.job-meta { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.job-meta li {
    font-size: .78rem; font-weight: 600; color: var(--blue);
    background: var(--blue-soft); border-radius: 100px; padding: .25em .8em;
}
.job-summary { margin: 0 0 .5rem; color: var(--slate-light); font-size: .95rem; }
.job-reqs summary {
    display: inline-flex; align-items: center; gap: .35em; cursor: pointer;
    font-size: .88rem; font-weight: 600; color: var(--navy); list-style: none;
}
.job-reqs summary::-webkit-details-marker { display: none; }
.job-reqs summary::after { content: "+"; font-size: 1.1rem; line-height: 1; color: var(--blue); }
.job-reqs[open] summary::after { content: "\2212"; }
.job-reqs .checklist { margin-top: .75rem; }
.job-apply { flex: none; margin-top: .2rem; }
@media (max-width: 640px) {
    .job-card { flex-direction: column; gap: 1rem; padding: 1.25rem; }
    .job-apply { align-self: stretch; justify-content: center; }
}

.job-empty {
    max-width: 620px; margin: 0 auto; text-align: center;
    background: #fff; border: 1px dashed #c9d6e4; border-radius: var(--radius-lg);
    padding: 2.25rem 1.75rem;
}
.job-empty-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; margin-bottom: 1rem; border-radius: 50%;
    background: var(--blue-soft); color: var(--blue);
}
.job-empty-icon svg { width: 26px; height: 26px; }
.job-empty h3 { font-size: 1.35rem; margin: 0 0 .5rem; }
.job-empty p { margin: 0 auto 1.35rem; color: var(--slate-light); max-width: 460px; }

.apply-address { margin: 1.1rem 0 0; font-size: .92rem; color: #d6e4f5; }

/* Milestone photo cards */
.milestone-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.milestone-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.milestone-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy); }
.milestone-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.milestone-card:hover .milestone-media img { transform: scale(1.08); }
.milestone-year {
    position: absolute; left: 0; bottom: 0; z-index: 1;
    background: var(--blue); color: #fff; font-family: var(--font-heading);
    font-weight: 700; font-size: 1.4rem; letter-spacing: .02em; padding: .2rem 1rem;
}
.milestone-body { padding: 1.2rem 1.35rem 1.4rem; }
.milestone-note { font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; color: var(--blue); font-weight: 600; margin: 0 0 .35rem; }
.milestone-body h3 { font-size: 1.4rem; margin: 0 0 .7rem; }
.milestone-body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.milestone-body ul li { color: var(--slate-light); font-size: .92rem; }
.milestone-body ul li strong { color: var(--navy); }

/* Future expansion grid — wraps evenly whatever the card count */
/* Flex, not a fixed five columns: the list is CMS-managed now, so a sixth card
   must wrap rather than fall off the row, and an incomplete last row centres. */
.exp-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.exp-grid > * { flex: 0 1 calc((100% - 4rem) / 5); min-width: 190px; }
@media (max-width: 1080px) { .exp-grid > * { flex-basis: calc((100% - 2rem) / 3); } }
@media (max-width: 760px)  { .exp-grid > * { flex-basis: calc((100% - 1rem) / 2); } }
@media (max-width: 480px)  { .exp-grid > * { flex-basis: 100%; } }
/* tighter padding so five cards still read well */
.exp-grid .exp-card .exp-body { padding: 1.25rem 1.25rem 1.4rem; }
.exp-grid .exp-card .exp-icon { width: 40px; height: 40px; border-radius: 11px; margin-bottom: .85rem; }
.exp-grid .exp-card .exp-icon svg { width: 21px; height: 21px; }
.exp-grid .exp-card h3 { font-size: 1.05rem; }
.exp-grid .exp-card p { font-size: .88rem; }

/* Highlighted expansion features */
.hl-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .hl-grid { grid-template-columns: 1fr; } .hl-grid.reverse .hl-media { order: 2; } }
@media (min-width: 901px) { .hl-grid.reverse .hl-media { order: -1; } }
.hl-badge {
    display: inline-block; padding: .45rem 1.1rem; border-radius: 100px;
    background: var(--blue); color: #fff; font-size: .78rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.hl-badge--light { background: var(--blue-soft); color: var(--blue); }
.hl-body h2 { font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.05; margin-bottom: 1rem; }
.hl-figure {
    font-family: var(--font-heading); font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--blue); margin: 0 0 1rem; line-height: 1;
}
.hl-figure strong { font-weight: 700; }
.section--navy .hl-figure { color: var(--blue-bright); }
.section--navy .hl-body .lead { color: #cfdbe9; }
.section--navy .hl-list li { color: #c2d2e3; }
.section--navy .hl-list li::before { background: rgba(46,134,222,.25); }
.hl-list { margin-top: 1.5rem; }
.hl-media { display: grid; gap: .85rem; }
.hl-img-main { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
/* Holds one main photo on its own, so the drag hint belongs to that photo and
   not to the row of small photos sharing .hl-media with it. Adds no box of its
   own; min-width lets it shrink inside the grid like the bare image did. */
.hl-img-frame { min-width: 0; }
.hl-img-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .85rem; }
.hl-img-row img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }

/* Future expansion — icon cards */
/* No height: 100% — the cards sit in a flex row (.exp-grid), where a
   percentage height blocks the row's own stretch and leaves each card only as
   tall as its text. Without it every card in a row matches the tallest. */
.exp-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.exp-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3;
    background: linear-gradient(90deg, var(--blue), var(--blue-bright));
    transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.exp-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.exp-card:hover::before { transform: scaleX(1); }

/* Photo header — the date/label badge sits over the image */
.exp-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--mist); }
.exp-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.exp-card:hover .exp-media img { transform: scale(1.08); }
.exp-media .exp-tag { position: absolute; left: .75rem; bottom: .75rem; z-index: 2; }

.exp-body { padding: 1.5rem 1.75rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.exp-icon {
    width: 52px; height: 52px; border-radius: 13px; margin-bottom: 1.15rem;
    background: var(--blue-soft); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
}
.exp-icon svg { width: 26px; height: 26px; }
.exp-tag {
    display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--blue); background: #fff; padding: .28rem .7rem; border-radius: 100px;
    box-shadow: 0 2px 10px rgba(11, 26, 41, .18);
}
.exp-card h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.exp-card p { color: var(--slate-light); font-size: .95rem; margin: 0; }

/* Footprint region stats — number + progress bar */
.fp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
@media (max-width: 560px) { .fp-stats { grid-template-columns: 1fr; } }
.fp-stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem 1.6rem; box-shadow: var(--shadow-sm); }
.fp-stat-num { font-family: var(--font-heading); font-weight: 700; font-size: 2.7rem; line-height: 1; color: var(--navy); }
.fp-stat-num i { font-style: normal; font-size: 1.6rem; color: var(--blue); margin-left: 2px; }
.fp-stat-name { margin: .5rem 0 1rem; font-weight: 600; color: var(--slate); }
.fp-stat-bar { height: 7px; background: var(--mist); border-radius: 4px; overflow: hidden; }
.fp-stat-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--blue-bright)); }

/* Business footprint — map backdrop with data overlay */
.fp-panel {
    position: relative; overflow: hidden; border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--navy) 0%, #123457 60%, #0d2440 100%);
    box-shadow: var(--shadow-lg);
    padding: clamp(1.75rem, 5vw, 3.25rem);
}
.fp-content { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 820px) { .fp-content { grid-template-columns: 1fr; gap: 2.25rem; } }

.fp-regions { display: grid; gap: 1.35rem; }
.fp-region-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .55rem; gap: 1rem; }
.fp-region-name { color: #fff; font-weight: 600; font-size: 1.05rem; }
.fp-region-pct {
    font-family: var(--font-heading); font-weight: 700; line-height: 1;
    font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--blue-bright);
}
.fp-track { height: 8px; border-radius: 5px; background: rgba(255,255,255,.14); overflow: hidden; }
.fp-track span {
    display: block; height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, var(--blue), var(--blue-bright));
}

.fp-reach { border-left: 1px solid rgba(255,255,255,.15); padding-left: clamp(1.5rem, 4vw, 2.5rem); }
@media (max-width: 820px) { .fp-reach { border-left: 0; border-top: 1px solid rgba(255,255,255,.15); padding-left: 0; padding-top: 2rem; } }
.fp-reach-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.35rem; color: var(--blue-bright); }
.fp-reach-label { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fp-countries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem .75rem; }
@media (max-width: 420px) { .fp-countries { grid-template-columns: repeat(3, 1fr); } }
.fp-countries li { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; }
.fp-countries img {
    width: 40px; height: 40px; border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0,0,0,.35); transition: transform .2s var(--ease);
}
.fp-countries li:hover img { transform: translateY(-3px) scale(1.10); }
/* Stand-in for a country whose flag file has not been added yet */
.fp-flag-alt {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
    color: #cfe0f2; font-weight: 700; font-size: .78rem; letter-spacing: .02em;
    transition: transform .2s var(--ease);
}
.fp-countries li:hover .fp-flag-alt { transform: translateY(-3px) scale(1.10); }
.fp-countries span { font-size: .7rem; color: #9db4cd; line-height: 1.2; }

/* Business footprint (native donut + legend) — alternative */
.footprint-grid { display: grid; grid-template-columns: 260px 1fr; gap: clamp(1.75rem, 5vw, 3.5rem); align-items: center; max-width: 820px; margin: 0 auto; }
@media (max-width: 720px) { .footprint-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.fp-chart svg { width: 100%; max-width: 240px; height: auto; display: block; }
.fp-donut-num { font-family: var(--font-heading); font-weight: 700; font-size: 46px; fill: var(--navy); }
.fp-donut-cap { font-family: var(--font-body); font-size: 15px; letter-spacing: .04em; fill: var(--slate-light); }
.fp-info { width: 100%; }
.fp-legend { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .85rem; }
.fp-legend li { display: flex; align-items: center; gap: .8rem; }
.fp-dot { width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto; }
.fp-name { color: var(--navy); font-weight: 600; font-size: 1.05rem; }
.fp-pct { margin-left: auto; font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; color: var(--navy); }
@media (max-width: 720px) { .fp-legend { max-width: 260px; margin-inline: auto; } }
.fp-countries .eyebrow { margin-bottom: .7rem; }
.fp-countries .tags { justify-content: flex-start; }
@media (max-width: 720px) { .fp-countries .tags { justify-content: center; } }

/* Growth chart (native SVG) */
.growth-chart-card {
    margin: 0; background: #fff; border-radius: var(--radius-lg);
    padding: clamp(1rem, 3vw, 1.75rem); box-shadow: var(--shadow-lg);
}
.growth-chart-card img { width: 100%; height: auto; display: block; border-radius: 8px; }
.growth-line { margin: .25rem auto 1.75rem; max-width: 780px; }
.growth-chart-card figcaption { margin-top: 1rem; text-align: center; font-size: .85rem; color: var(--slate-light); }
.growth-head { text-align: center; margin-bottom: 1.25rem; }
.growth-head h3 { font-size: clamp(1.35rem, 3vw, 1.9rem); margin: .25rem 0 .35rem; }
.growth-head p { color: var(--slate-light); font-size: .92rem; margin: 0; }
.growth-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Summary phase chips */
/* Editable lists, so the last row centres instead of hugging the left edge.
   A full row of four is identical to the grid it replaces. */
.growth-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 0 0 1.75rem; }
.growth-summary > * { flex: 0 1 calc((100% - 2.25rem) / 4); min-width: 132px; }
@media (max-width: 640px) { .growth-summary > * { flex: 0 1 calc((100% - .75rem) / 2); } }
.gsum { background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem .75rem; text-align: center; }
.gsum b { display: block; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.6rem, 3.5vw, 2rem); color: var(--blue); line-height: 1; }
.gsum span { display: block; margin-top: .45rem; font-size: .76rem; color: var(--slate-light); line-height: 1.3; }
.gsum span em { display: block; font-style: normal; font-weight: 700; color: var(--navy); margin-top: .15rem; }

/* Year-by-year expansion cards */
.growth-years { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }
.growth-years > * { flex: 0 1 calc((100% - 3rem) / 4); min-width: 200px; }
@media (max-width: 820px) { .growth-years > * { flex: 0 1 calc((100% - 1rem) / 2); } }
@media (max-width: 460px) { .growth-years { grid-template-columns: 1fr; } }
.gyear { background: linear-gradient(165deg, #0d2136, #0a1a2b); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding: 1.1rem 1.15rem; }
.gyear-top { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .1rem; }
.gyear-yr { font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem; color: #fff; }
.gyear-title { font-size: .8rem; font-weight: 600; color: var(--blue-bright); }
.gyear-sub { font-size: .78rem; color: #9db0c6; margin: .15rem 0 .85rem; }
.gyear-metrics { list-style: none; margin: 0; padding: .8rem 0 0; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: .4rem; }
.gyear-metrics li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .12rem; }
.gyi { width: 22px; height: 22px; color: var(--blue-bright); margin-bottom: .25rem; }
.gyear-metrics li b { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: #fff; }
.gyear-metrics li span { font-family: var(--font-body); font-weight: 500; font-size: .66rem; letter-spacing: .03em; color: #8ba3bd; }

/* Customer marquee */
.marquee {
    position: relative; overflow: hidden; padding: .5rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee + .marquee { margin-top: 1rem; }
.marquee-track { display: flex; width: max-content; will-change: transform; animation: marquee-scroll 48s linear infinite; }
.marquee--reverse .marquee-track { animation-direction: reverse; animation-duration: 56s; }
.marquee-item {
    flex: 0 0 auto; width: 220px; height: 112px;
    display: flex; align-items: center; justify-content: center; padding: 0 1.75rem;
}
.marquee-item img {
    height: 56px; width: auto; max-width: 175px; object-fit: contain;
    opacity: 1; transition: transform .3s var(--ease);
}
.marquee-item img:hover { transform: scale(1.09); }
/* Three descending tiers: row 1 (key accounts) reads largest, row 2 sits
   between, row 3 uses the base size above. */
.marquee--featured .marquee-item { width: 300px; height: 150px; }
.marquee--featured .marquee-item img { height: 92px; max-width: 250px; }
.marquee--mid .marquee-item { width: 258px; height: 130px; }
.marquee--mid .marquee-item img { height: 72px; max-width: 210px; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Company recognition (award trophy photos on dark cards) */
.award-card {
    margin: 0; padding: 1.5rem 1rem 1.35rem; text-align: center;
    background: linear-gradient(180deg, #000 0%, #05090f 62%, #0c1b2a 100%);
    border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.award-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(46,134,222,.35); }
/* max-width matters now the list is CMS-managed: without it a landscape photo
   renders wider than the card and `overflow: hidden` crops it. */
.award-card img { height: 230px; width: auto; max-width: 100%; margin: 0 auto 1rem; object-fit: contain; cursor: zoom-in; }
/* Two lines' worth reserved so a one-word award, a two-line one and a
   still-unnamed one all produce the same card height. */
.award-card figcaption { font-size: .88rem; font-weight: 600; color: #dbe6f2; line-height: 1.35; min-height: 2.7em; }

/* grid--flow drops to one card per row below 640px, which doubled the height
   of this section on a phone. Two up, with a trophy scaled to suit. Must sit
   after the rules above: a media query adds no specificity, so an earlier
   block would simply lose to them. */
@media (max-width: 639px) {
    .grid--flow.grid-4 > .award-card { flex-basis: calc((100% - 1.5rem) / 2); }
    .award-card { padding: 1.1rem .75rem 1rem; }
    .award-card img { height: 150px; }
    /* the longest award name needs a third line in this narrower card */
    .award-card figcaption { min-height: 4.05em; }
}

/* Logo strip (static, e.g. Industries page) */
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem 3.25rem; }
.logo-strip-cell { display: flex; align-items: center; justify-content: center; }
.logo-strip img { height: 46px; width: auto; max-width: 150px; object-fit: contain; }

/* Customer certificates of appreciation.
   The list is CMS-managed, so the layout has to read well at any length: one
   certificate keeps the original full-width feature, more than one falls into
   a centred grid that tops out at two per row (these are documents — shrink
   them further and the text on them stops being legible). */
.appr-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 2.5vw, 1.75rem); }
.appr-card {
    position: relative; margin: 0;
    flex: 0 1 calc((100% - 1.75rem) / 2); max-width: 560px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: clamp(1rem, 3vw, 1.75rem); box-shadow: var(--shadow);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.appr-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.appr-card:only-child { flex-basis: 100%; max-width: 880px; }
/* Uploads range from landscape scans to portrait phone photos (1.60 down to
   0.56), so letting each image set its own height left the captions at
   different levels and stranded space under the short ones. A fixed stage with
   `contain` centres every one of them and lines the captions up. */
.appr-card img {
    width: 100%; height: clamp(260px, 30vw, 380px);
    object-fit: contain; background: var(--mist);
    display: block; border-radius: 8px; cursor: zoom-in;
}
/* Three lines' worth reserved: the longest existing caption wraps to three on
   a phone, so every card closes on the same line whatever the caption length
   (including none at all). */
.appr-card figcaption {
    margin-top: 1.1rem; text-align: center; font-size: .92rem;
    color: var(--slate-light); line-height: 1.5; min-height: 4.5em;
}
.appr-card figcaption strong { color: var(--navy); }
@media (max-width: 640px) {
    .appr-card { flex-basis: 100%; }
}

/* Gap between the trophy row and the certificate row below it */
.cert-row { margin-top: clamp(1.25rem, 3vw, 1.75rem); }

.cert-card {
    margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 1rem 1rem 1.15rem; box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cert-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* Same fixed stage as .appr-card: these mix portrait certificates with
   landscape trophy photos. */
.cert-card img {
    width: 100%; height: clamp(230px, 25vw, 320px);
    object-fit: contain; background: var(--mist);
    display: block; border-radius: 6px; border: 1px solid var(--line);
}
.cert-card figcaption {
    margin-top: .85rem; text-align: center; font-size: .85rem; font-weight: 600;
    color: var(--navy); line-height: 1.35; min-height: 2.7em;
}

/* Cert strip */
/* Six equal cells, which is the collection's maximum — so a full set lands on
   one row as intended. Sizing each badge to its own width instead let the six
   add up to 1228px against a 1140px container, spilling one onto a second row.
   A fixed cell height keeps badges of slightly different proportions level. */
.cert-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 1.25rem; }
.cert-badge {
    position: relative; margin: 0;
    flex: 0 1 calc((100% - 6.25rem) / 6); height: 70px;
    display: flex; align-items: center; justify-content: center;
}
.cert-badge img {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain; cursor: zoom-in; transition: transform .25s var(--ease);
}
.cert-badge img:hover { transform: scale(1.09); }

@media (max-width: 900px) { .cert-badge { flex-basis: calc((100% - 2.5rem) / 3); } }
@media (max-width: 560px) { .cert-badge { flex-basis: calc((100% - 1.25rem) / 2); } }

/* Lightbox (click to enlarge) */
.lightbox {
    position: fixed; inset: 0; z-index: 200; display: none;
    align-items: center; justify-content: center; padding: clamp(1.25rem, 5vw, 3rem);
    background: rgba(8, 23, 38, .92); cursor: zoom-out; opacity: 0; transition: opacity .25s var(--ease);
}
.lightbox.open { display: flex; opacity: 1; }
.lightbox-img {
    max-width: min(92vw, 880px); max-height: 86vh; width: auto; height: auto;
    background: #fff; padding: 1.25rem; border-radius: 12px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55); cursor: default;
}
.lightbox-close {
    position: absolute; top: 1rem; right: 1.25rem; width: 44px; height: 44px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
    color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .2s var(--ease);
}
.lightbox-close:hover { background: rgba(255,255,255,.25); }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band { background: linear-gradient(120deg, var(--navy), var(--blue)); color: #fff; border-radius: var(--radius-lg); padding: clamp(2.5rem, 6vw, 4rem); text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: .75rem; }
.cta-band p { color: #d6e4f5; max-width: 560px; margin: 0 auto 1.75rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* --------------------------------------------------------------------------
   Page hero (inner pages)
   -------------------------------------------------------------------------- */
/* Inner-page heroes carry the header's brand blue, so bar and hero read as one
   block; a hairline marks where the sticky header ends. The grey-blue text
   colours tuned for navy all fail on this blue, and on #1576e5 even pure white
   only reaches 4.42:1 — so text here is white, with hierarchy from size and
   weight instead of from paler greys. */
/* The same sweep as the header, so the two line up, with a soft
   shade toward the bottom edge for depth — darker, never lighter, so the text
   contrast only improves. */
.page-hero { background: linear-gradient(180deg, transparent 50%, rgba(0,25,60,.25)), var(--brand-gradient); border-top: 1px solid rgba(255,255,255,.14); color: #fff; padding: clamp(3rem, 8vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.page-hero h1 { color: #fff; margin-bottom: .75rem; }
.page-hero p { color: #fff; max-width: 640px; font-size: 1.1rem; margin: 0; }
.breadcrumb { font-size: .85rem; color: #fff; margin-bottom: 1rem; }
.breadcrumb a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.breadcrumb a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.1fr .9fr; } }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-sm); }
.info-card + .info-card { margin-top: 1.25rem; }
.info-card h3 { font-size: 1.1rem; margin-bottom: .75rem; }
.info-card address { font-style: normal; color: var(--slate-light); line-height: 1.6; }
.info-row { display: flex; gap: .75rem; align-items: baseline; margin-top: .5rem; }
.info-row .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--slate-light); min-width: 64px; }

.form-field { margin-bottom: 1.25rem; }
.form-field label { display: block; font-weight: 600; font-size: .9rem; color: var(--navy); margin-bottom: .4rem; }
.form-field input, .form-field textarea, .form-field select {
    width: 100%; font-family: inherit; font-size: 1rem; color: var(--slate);
    padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
    outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft);
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: .85rem; color: var(--slate-light); }

.alert { padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.5rem; font-weight: 500; }
.alert-success { background: #e7f6ed; color: #1a7f45; border: 1px solid #b7e3c6; }
.alert-error { background: #fdeaea; color: #b02a2a; border: 1px solid #f4c4c4; }
/* Enquiry saved but not emailed — good news and bad news in one box. */
.alert-warning { background: #fff6e5; color: #8a5a00; border: 1px solid #f3dcae; }
.alert-warning a { color: inherit; font-weight: 700; text-decoration: underline; white-space: nowrap; }

/* Map embed */
.map-embed { border: 0; width: 100%; height: 320px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

/* Directions under the contact-page map */
.map-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
    margin-top: .9rem;
}
.map-actions-label { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light); }
.map-actions-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn-map, .btn-waze { display: inline-flex; align-items: center; gap: .45em; }
.btn-map svg, .btn-waze svg { width: 18px; height: 18px; }
.btn-map { background: #fff; color: var(--navy); border: 1.5px solid var(--line); }
.btn-map:hover { border-color: var(--blue); color: var(--blue); }
/* Waze's own blue, with dark text — white on it would fail contrast */
.btn-waze { background: #33CCFF; color: #0A2540; border: 1.5px solid #33CCFF; }
.btn-waze:hover { background: #1fb9ee; border-color: #1fb9ee; color: #0A2540; }
@media (max-width: 480px) {
    .map-actions-btns { width: 100%; }
    .map-actions-btns .btn { flex: 1; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
/* Brand blue, like the header. Every muted footer colour was tuned for the old
   dark ink and fails on blue, so footer text is white — see .page-hero. */
.site-footer { background: var(--brand-gradient); color: #fff; font-size: .92rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding: clamp(3rem, 6vw, 4.5rem) 1.25rem 2.5rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1.4fr 1.4fr; } }
.footer-logo { height: 54px; width: auto; display: block; }
/* The margin belongs to the plate now, so it measures from the plate's edge. */
.footer-plate { display: inline-flex; margin-bottom: 1rem; }
.footer-tagline { color: #fff; font-weight: 600; margin-bottom: 1rem; }
.footer-legal { font-size: .85rem; color: #fff; line-height: 1.5; }
.footer-col h4 { color: #fff; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-col a { color: #fff; }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-col address { font-style: normal; line-height: 1.6; color: #fff; }
.footer-contact { margin-top: .75rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.18); }
.footer-bottom-inner { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding: 1.25rem; font-size: .82rem; color: #fff; }
.footer-bottom p { margin: 0; }

/* --------------------------------------------------------------------------
   Floating WhatsApp button
   -------------------------------------------------------------------------- */
.wa-float {
    position: fixed; z-index: 90;
    right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
    width: 58px; height: 58px; border-radius: 50%;
    background: #25D366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(37, 211, 102, .45), 0 4px 10px rgba(0,0,0,.18);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-float::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: #25D366; z-index: -1; animation: wa-pulse 2.4s var(--ease) infinite;
}
.wa-float svg { width: 32px; height: 32px; fill: #fff; }
.wa-float:hover { transform: translateY(-3px) scale(1.05); color: #fff;
    box-shadow: 0 12px 28px rgba(37, 211, 102, .55), 0 6px 14px rgba(0,0,0,.22); }
.wa-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@keyframes wa-pulse {
    0%   { transform: scale(1);   opacity: .55; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wa-float::before { animation: none; } }

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Mobile tightening
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .grid { gap: 1rem; }
    .card-media { aspect-ratio: 16 / 9; }
    .card-body { padding: 1.25rem; }
    .section-head { margin-bottom: 1.75rem; }
    .cta-band { padding: 2rem 1.5rem; }
}

/* ==========================================================================
   Facilities — narrow-screen compaction
   Desktop layout is unchanged; these rules only apply below the breakpoints.
   ========================================================================== */

/* Facility gallery: 20 cards stacked one per row ran to nearly seven screens
   on a phone. Below the desktop grid the same markup becomes a paged grid —
   a full screenful of photos at a time, swiped sideways rather than scrolled
   down. `grid-auto-flow: column` fills top-to-bottom then rightwards, so each
   pair of columns is one self-contained page.
   Tablet: 3 x 2 = 6 per page. Phone: 2 x 2 = 4 per page. */
@media (max-width: 900px) {
    .grid--flow.gallery-rail {
        display: grid;
        grid-auto-flow: column;
        /* .grid-3 still declares one explicit 1fr column; left in place it
           collapses to a sliver ahead of the real, implicit ones. */
        grid-template-columns: none;
        /* .grid--flow centres its children. Centring an overflowing track
           pushes half of it past the inline-start edge, which is not
           scrollable — the first eight photos become unreachable. */
        justify-content: start;
        grid-template-rows: repeat(2, auto);
        grid-auto-columns: calc((100% - 1.5rem) / 3);
        gap: .75rem;
        overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; scroll-behavior: smooth;
        scrollbar-width: none; -ms-overflow-style: none;
    }
    .grid--flow.gallery-rail::-webkit-scrollbar { display: none; }
    /* Only the first card of each page is a snap target, so a swipe advances a
       whole page instead of a single column. */
    .grid--flow.gallery-rail > * { scroll-snap-align: none; }
    .grid--flow.gallery-rail > :nth-child(6n + 1) { scroll-snap-align: start; scroll-snap-stop: always; }
    .gallery-slides .card-media { aspect-ratio: 4 / 3; }
    .gallery-slides .card-body { padding: .7rem .8rem; }
    .gallery-slides .card-body p { font-size: .82rem; line-height: 1.3; }
}
@media (max-width: 640px) {
    .grid--flow.gallery-rail { grid-auto-columns: calc((100% - .75rem) / 2); }
    .grid--flow.gallery-rail > :nth-child(6n + 1) { scroll-snap-align: none; scroll-snap-stop: normal; }
    .grid--flow.gallery-rail > :nth-child(4n + 1) { scroll-snap-align: start; scroll-snap-stop: always; }
}

/* Key materials keeps the desktop circle-over-list column at every width.
   The ragged look came from CSS grid sizing each row to its tallest cell and
   leaving the short ones stranded — up to 325px of dead space at tablet size.
   Flex instead: cards in a line stretch to a common height (so the circles all
   sit on one baseline and the panels end level) and an incomplete last row
   centres rather than hugging the left edge. */
@media (max-width: 1080px) {
    /* Every grade stays on the page — the grade lists just run from 1 to 16
       entries, which is what made the cards so uneven. `grid-auto-rows: 1fr`
       sizes every row to the tallest one, so all cards end up exactly the same
       height, and "& more" is pinned to the foot of each so the cards close on
       a common line. */
    .mat-grid {
        display: grid; grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 1fr; gap: .85rem;
        /* the base rule sets `start`, which keeps cards at content height */
        align-items: stretch;
    }
    .mat-col {
        display: flex; flex-direction: column; align-items: center;
        background: rgba(255, 255, 255, .05); border-radius: var(--radius);
        padding: 1.15rem .9rem 1rem;
    }
    .mat-circle { max-width: 116px; }
    .mat-col .mat-more { margin-top: auto; padding-top: .4rem; }
    /* One card left over on the final row centres instead of hugging the left */
    .mat-col:last-child:nth-child(3n + 1) { grid-column: 2; }
}
@media (max-width: 720px) {
    .mat-grid { grid-template-columns: repeat(2, 1fr); }
    .mat-circle { max-width: 104px; }
    .mat-col:last-child:nth-child(3n + 1) { grid-column: auto; }
    .mat-col:last-child:nth-child(2n + 1) {
        grid-column: 1 / -1; width: calc(50% - .425rem); justify-self: center;
    }
}

/* Machine-brand rail page sizes. Each block cancels the one above it: media
   queries add no specificity, so two live snap rules would both apply. */
@media (max-width: 1080px) {
    .brand-rail { grid-auto-columns: calc((100% - 4rem) / 5); }
    .brand-rail > :nth-child(12n + 1) { scroll-snap-align: none; scroll-snap-stop: normal; }
    .brand-rail > :nth-child(10n + 1) { scroll-snap-align: start; scroll-snap-stop: always; }
}
@media (max-width: 900px) {
    .brand-rail { grid-auto-columns: calc((100% - 2.25rem) / 4); gap: .75rem; }
    .brand-rail > :nth-child(10n + 1) { scroll-snap-align: none; scroll-snap-stop: normal; }
    .brand-rail > :nth-child(8n + 1) { scroll-snap-align: start; scroll-snap-stop: always; }
}
@media (max-width: 640px) {
    .brand-rail { grid-auto-columns: calc((100% - 1.5rem) / 3); }
    /* Tight horizontal padding buys the caption the few pixels the longest
       name ("Mitsui High-tec") needs to fit without clipping. */
    .brand-card { height: 96px; padding: .55rem .3rem; gap: .35rem; }
    .brand-card .brand-name { font-size: .64rem; }
    .brand-rail > :nth-child(8n + 1) { scroll-snap-align: none; scroll-snap-stop: normal; }
    .brand-rail > :nth-child(6n + 1) { scroll-snap-align: start; scroll-snap-stop: always; }
}

/* --------------------------------------------------------------------------
   Navy theme — switched on from the admin dashboard (site_theme() in
   config.php puts .theme-navy on <body>). The rules above are the brand-blue
   gradient scheme; these put the header, page banners, home stats bar and
   footer back to the original dark navy, with the grey-blue text colours that
   were tuned for it. Only colour changes here — layout and sizes are shared.
   -------------------------------------------------------------------------- */
.theme-navy { --header-bg: var(--navy); }

.theme-navy .nav-menu a { color: #d7e2ef; }
.theme-navy .nav-menu a:hover,
.theme-navy .nav-menu a.is-active { color: #fff; }
.theme-navy .nav-menu a.is-active:not(.btn) { background: rgba(46,134,222,.22); }
.theme-navy .nav-cta-item .btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.theme-navy .nav-cta-item .btn-primary:hover { background: var(--blue-bright); border-color: var(--blue-bright); color: #fff; }

.theme-navy .page-hero { background: linear-gradient(180deg, var(--navy), var(--ink)); border-top-color: rgba(255,255,255,.08); }
.theme-navy .page-hero p { color: #b9c9dc; }
.theme-navy .breadcrumb { color: #8ea3bd; }
.theme-navy .breadcrumb a { color: #b9c9dc; text-decoration: none; }
.theme-navy .breadcrumb a:hover { color: #fff; }

.theme-navy .stats-band { background: var(--ink); border-top-color: rgba(255,255,255,.06); }
.theme-navy .stat-value .suffix { color: var(--blue-bright); }
.theme-navy .stat-label { color: #92a6bd; font-weight: 400; }
.theme-navy .stat:nth-child(even) { box-shadow: inset 1px 0 rgba(255,255,255,.06); }
.theme-navy .stat:nth-child(n+3) { box-shadow: inset 0 1px rgba(255,255,255,.06); }
.theme-navy .stat:nth-child(4) { box-shadow: inset 1px 1px rgba(255,255,255,.06); }
@media (min-width: 720px) {
    .theme-navy .stat { box-shadow: none; }
    .theme-navy .stat:not(:first-child) { box-shadow: inset 1px 0 rgba(255,255,255,.06); }
}

.theme-navy .site-footer { background: var(--ink); color: #93a7bd; }
.theme-navy .footer-tagline { color: #c3d3e6; }
.theme-navy .footer-legal { color: #7b91a9; }
.theme-navy .footer-col a,
.theme-navy .footer-col address { color: #93a7bd; }
.theme-navy .footer-col a:hover { color: #fff; }
.theme-navy .footer-bottom { border-top-color: rgba(255,255,255,.08); }
.theme-navy .footer-bottom-inner { color: #6f849b; }

/* ==========================================================================
   Phone layout (below 640px) — home page and the site-wide footer
   Everything here is inside one max-width: 639px block, so tablets and
   desktops (640px and up) are untouched. 639 rather than 640 because the
   card grids already switch to two columns at exactly 640px.
   ========================================================================== */
@media (max-width: 639px) {
    /* Hero: the two buttons were different widths (272px / 183px) and stacked
       ragged; full width reads as a deliberate pair. The intro paragraph runs
       one size down so it takes less of the first screen. */
    .hero .hero-sub { font-size: .95rem; margin-bottom: 1.6rem; }
    .hero-actions { gap: .7rem; }
    .hero-actions .btn { flex: 1 1 100%; justify-content: center; }

    /* Closing call-to-action panels (every page): a pair of buttons stacked at
       their own widths looked ragged, so a pair spans the full width together.
       A lone button keeps its natural size. */
    .cta-actions { gap: .7rem; }
    .cta-actions > .btn:not(:only-child) { flex: 1 1 100%; justify-content: center; }

    /* Home industries: six full-width cards ran to almost three screens. Two
       up keeps all six on the page in well under half that. */
    .grid--flow.home-industries { gap: .75rem; }
    .grid--flow.home-industries > .card { flex-basis: calc((100% - .75rem) / 2); }
    .home-industries .card-media { aspect-ratio: 4 / 3; }
    .home-industries .card-body { padding: .75rem .8rem .9rem; }
    .home-industries .card-body h3 { font-size: 1.05rem; line-height: 1.2; margin-bottom: .3rem; }
    /* Every current description fits in six lines even on a 360px phone; the clamp
       only stops an unusually long one from stretching its row. */
    .home-industries .card-body p {
        font-size: .8rem; line-height: 1.45;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
    }

    /* ISO badges: three on the home page broke 2 + 1; one row of three. */
    #certifications .cert-badge { flex-basis: calc((100% - 2.5rem) / 3); height: 60px; }

    /* Footer: one long column of links, each only 20px tall to tap. */
    .footer-grid { gap: 1.75rem; padding-top: 2.5rem; padding-bottom: 1.75rem; }
    .footer-col h4 { margin-bottom: .35rem; }
    .footer-col ul { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
    /* 44px tall: the minimum comfortable touch target */
    .footer-col ul a { display: block; padding: .7rem 0; line-height: 1.5; }
    .footer-contact { margin-top: .35rem; }
    .footer-contact a { display: inline-block; padding: .7rem 0; line-height: 1.5; }
    /* Room at the very end of the page so the floating WhatsApp button (50px,
       1rem off the bottom) never sits on top of the last line of text. */
    .footer-bottom-inner { padding-bottom: 4.5rem; }

    /* Floating WhatsApp button: a little smaller, so it covers less text as
       the page scrolls under it. */
    .wa-float { width: 50px; height: 50px; }
    .wa-float svg { width: 28px; height: 28px; }
}

/* ==========================================================================
   Phone layout (below 640px) — About page
   Same rule as the home-page block above: nothing here reaches 640px and up.
   ========================================================================== */

/* Milestones: the vertical timeline (badge left, card right) only exists below
   560px, so its compaction does too. Each card was 363px tall, mostly a 4:3
   photo; 16:9 still shows the building, and the two figures sit on one line. */
@media (max-width: 559px) {
    .milestone-timeline { gap: 1.25rem; }
    .milestone-media { aspect-ratio: 16 / 9; }
    .milestone-body { padding: .8rem 1rem 1rem; }
    .milestone-body h3 { font-size: 1.2rem; margin-bottom: .45rem; }
    .milestone-body ul { flex-direction: row; flex-wrap: wrap; gap: .15rem 1rem; }
    .milestone-body ul li { font-size: .86rem; }
}

@media (max-width: 639px) {
    /* Index growth year cards: a min-width of 200px made each one too wide
       for two in a row, so they stacked one per row at 200px, centred in a
       350px column. Two up, filling the width. */
    .growth-line { margin-bottom: 1.25rem; }
    .growth-years { gap: .6rem; margin-top: 1.25rem; }
    .growth-years > * { flex-basis: calc((100% - .6rem) / 2); min-width: 0; }
    .gyear { padding: .85rem .7rem .8rem; }
    .gyear-yr { font-size: 1.35rem; }
    .gyear-title { font-size: .72rem; }
    .gyear-sub { font-size: .72rem; line-height: 1.35; margin: .15rem 0 .65rem; }
    .gyear-metrics { padding-top: .65rem; gap: .15rem; }
    .gyi { width: 18px; height: 18px; margin-bottom: .15rem; }
    .gyear-metrics li b { font-size: .98rem; }
    .gyear-metrics li span { font-size: .6rem; }

    /* Future expansion: five full-width cards ran to three screens. Two up
       instead, like the home page industries — every card stays in view, no
       swiping. The grid already centres, so an odd last card sits in the
       middle of its row. */
    .exp-grid { gap: .7rem; }
    .exp-grid > * { flex-basis: calc((100% - .7rem) / 2); min-width: 0; }
    .exp-media { aspect-ratio: 4 / 3; }
    /* Tighter tracking so the longest tag ("Facility Certification") still
       fits on one line across a 154px card on a 360px phone. */
    .exp-media .exp-tag { left: .4rem; bottom: .4rem; font-size: .58rem; letter-spacing: .03em; padding: .25em .55em; white-space: nowrap; }
    .exp-grid .exp-card .exp-body { padding: .75rem .75rem .9rem; }
    .exp-grid .exp-card .exp-icon { width: 32px; height: 32px; border-radius: 9px; margin-bottom: .55rem; }
    .exp-grid .exp-card .exp-icon svg { width: 17px; height: 17px; }
    .exp-grid .exp-card h3 { font-size: .98rem; line-height: 1.2; margin-bottom: .35rem; }
    .exp-grid .exp-card p { font-size: .78rem; line-height: 1.45; }
}