@charset "UTF-8";
/* =====================================================================
   CONYX GROUP — PUBLIC SITE
   Header, hero, page furniture and every front-end section component.
   Depends on brand.css for tokens and primitives.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  1. Page chrome — preloader, progress, skip link                    */
/* ------------------------------------------------------------------ */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--bg);
    transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__mark { width: 72px; height: 72px; animation: pre-spin 2.4s linear infinite; }
.preloader__mark circle { fill: none; stroke-width: 2.5; }
@keyframes pre-spin { to { transform: rotate(360deg); } }

.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    z-index: 1000;
    background: linear-gradient(90deg, var(--brand-deep), var(--brand-primary), var(--brand-secondary));
    transition: width .1s linear;
    pointer-events: none;
}

.skip-link {
    position: absolute;
    top: -60px;
    left: 1rem;
    z-index: 1200;
    padding: .7rem 1.2rem;
    background: var(--brand-primary);
    color: #fff;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-weight: 600;
    transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* ------------------------------------------------------------------ */
/*  2. Top bar                                                         */
/* ------------------------------------------------------------------ */

.topbar {
    position: relative;
    background: linear-gradient(90deg, var(--ink-950) 0%, #072141 52%, var(--ink-950) 100%);
    color: rgba(255, 255, 255, .74);
    font-size: .78rem;
    line-height: 1.4;
}
/* A brand hairline under the strip, brightest in the middle. */
.topbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brand-primary), var(--brand-secondary), transparent);
    opacity: .55;
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 40px;
    flex-wrap: wrap;
}
.topbar a { color: rgba(255, 255, 255, .74); }
.topbar a:hover { color: #fff; }
.topbar__list { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: .4rem; transition: color var(--t-fast) linear; }
.topbar__item .icon { transition: color var(--t-fast) linear, transform var(--t-mid) var(--ease); }
a.topbar__item:hover .icon { color: var(--brand-highlight); transform: translateY(-1px); }
.topbar__item .icon { width: 14px; height: 14px; opacity: .8; }
.topbar__socials { display: flex; gap: .4rem; }
.topbar__socials a {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    transition: all var(--t-fast) var(--ease);
}
.topbar__socials a:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.topbar__socials .icon { width: 13px; height: 13px; }
@media (max-width: 860px) { .topbar { display: none; } }

/* ------------------------------------------------------------------ */
/*  3. Header & navigation                                             */
/* ------------------------------------------------------------------ */

.site-head {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--bg);
    border-bottom: 1px solid transparent;
    transition: background var(--t-mid) linear, box-shadow var(--t-mid) linear, border-color var(--t-mid) linear;
}
.site-head.is-stuck {
    background: var(--surface-glass);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--line);
    box-shadow: 0 10px 30px -18px rgba(5, 16, 31, .5);
}
/* The bar tightens once the page has moved, giving the content more room
   without changing any element's width (the fit measurement is unaffected). */
.site-head.is-stuck .site-head__inner { min-height: 64px; }
.site-head__inner { transition: min-height var(--t-mid) var(--ease); }
.brand img { transition: height var(--t-mid) var(--ease); }
.site-head.is-stuck .brand img { height: 34px; }

.site-head__inner {
    position: relative;   /* the mega menus are positioned against this box */
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .85rem;
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    flex: none;
    color: var(--text);
}
.brand img { height: 38px; width: auto; object-fit: contain; }
.brand:hover { color: var(--text); }

/* The light-theme mark is the default; the dark one only appears when the
   dark palette is active, so no request is wasted in the common case. */
.brand__mark--dark { display: none; }
[data-theme="dark"] .brand__mark--light { display: none; }
[data-theme="dark"] .brand__mark--dark { display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.02em;
}
.brand__sub {
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-faint);
}
@media (max-width: 420px) { .brand__text { display: none; } }

/* Desktop navigation
   The bar is a single nowrap row of fixed-width parts: brand, seven links and
   the action cluster. Sized generously it runs past the page gutter and the
   quotation button loses its right edge, so the link padding and the header
   button are held to what fits the 1240px content box, and the whole row
   hands over to the drawer before it can crowd. */
.nav { margin-left: auto; min-width: 0; }
.nav__list { position: relative; display: flex; align-items: center; gap: 0; }

/* The marker sits behind the links and slides to whichever one is hovered,
   settling back on the current page's link. */
.nav__marker {
    position: absolute;
    top: 50%;
    left: 0;
    height: 34px;
    margin-top: -17px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: transform .38s var(--ease), width .38s var(--ease), opacity .25s linear;
}
.nav__list:hover .nav__marker,
.nav__marker.is-parked { opacity: 1; }
.nav__marker.is-parked { background: color-mix(in srgb, var(--brand-primary) 12%, transparent); }
.nav__link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem .52rem;
    border-radius: var(--r-sm);
    font-size: .86rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: color var(--t-fast) linear, background var(--t-fast) linear;
    white-space: nowrap;
}
.nav__link .icon { width: 15px; height: 15px; transition: transform var(--t-fast) var(--ease); }
.nav__link { position: relative; z-index: 1; }
.nav__link:hover { color: var(--text); background: none; }
.nav__link.is-active { color: var(--brand-primary); font-weight: 600; }
/* Deliberately not positioned: the mega panels resolve against
   .site-head__inner so they stay inside the page gutters. */
.nav__item { position: static; }
.nav__item:hover > .nav__link .icon { transform: rotate(180deg); }

.nav__actions { display: flex; align-items: center; gap: .4rem; margin-left: .5rem; flex: none; }
/* The header call to action is a compact version of the page button. */
.nav__actions .btn {
    padding: .58rem .95rem;
    font-size: .86rem;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-deep));
    border-color: transparent;
    box-shadow: 0 12px 24px -14px rgba(0, 91, 179, .9);
}
.nav__actions .btn:hover {
    background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
    transform: translateY(-1px);
    box-shadow: 0 16px 28px -14px rgba(0, 165, 213, .95);
}
.nav__actions .btn .icon { transition: transform var(--t-mid) var(--ease); }
.nav__actions .btn:hover .icon { transform: translateX(3px); }
.nav__actions .btn .icon { width: 15px; height: 15px; }

.icon-btn {
    display: grid;
    place-items: center;
    width: 37px; height: 37px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg-raised);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
}
.icon-btn:hover {
    color: var(--brand-primary);
    border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--line));
    background: color-mix(in srgb, var(--brand-primary) 8%, var(--bg-raised));
    transform: translateY(-2px);
}
.icon-btn .icon { width: 19px; height: 19px; }

.theme-toggle .icon--moon { display: none; }
[data-theme="dark"] .theme-toggle .icon--sun { display: none; }
[data-theme="dark"] .theme-toggle .icon--moon { display: block; }

/* Mega menu
   The panel is anchored to the header's content box, not to the nav item.
   Centring a 920px panel on a nav link that sits far right pushed it off the
   edge of the viewport; bounded by the wrap it can never be clipped, whichever
   link opens it. */
.mega {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    margin-inline: auto;
    width: min(920px, 100%);
    transform: translateY(-8px);
    padding: 1.6rem;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid);
    z-index: 50;
}

/* A narrower panel sits under the right-hand side of the bar rather than
   floating in the middle of the header. */
.mega--right {
    left: auto;
    right: 0;
    margin-inline: 0;
    width: min(560px, 100%);
}

/* Bridges the 10px gap under the trigger so the menu does not close as the
   pointer travels from the link into the panel. */
.mega::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.nav__item:hover > .mega,
.nav__item:focus-within > .mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.mega__grid {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .mega__grid { grid-template-columns: repeat(2, 1fr); } }

.mega__item {
    display: flex;
    gap: .85rem;
    padding: .85rem;
    border-radius: var(--r-md);
    transition: background var(--t-fast) linear, transform var(--t-fast) var(--ease);
}
.mega__item:hover { background: var(--bg-sunk); transform: translateX(3px); }
.mega__icon {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    flex: none;
    background: color-mix(in srgb, var(--i-accent, var(--brand-primary)) 12%, transparent);
    color: var(--i-accent, var(--brand-primary));
}
.mega__icon .icon { width: 20px; height: 20px; }
/* Block, not flex: a "Proposed" tag beside a two-line title centred itself
   against both lines and looked misaligned. Inline flow lets it sit after the
   last word and wrap naturally. */
.mega__title { font-weight: 600; font-size: .92rem; color: var(--text); display: block; }
.mega__title .badge { margin-left: .35rem; vertical-align: 1px; }
.mega__text { font-size: .78rem; color: var(--text-muted); line-height: 1.5; margin-top: .15rem; }
.mega__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    font-size: .85rem;
    flex-wrap: wrap;
}

/* Below this the row can no longer hold brand + seven links + actions on one
   line without clipping, so the drawer takes over. The .is-compact class does
   the same thing at any width, set by the header-fit measurement in app.js
   for the cases a breakpoint cannot predict — a long label, a fallback font.
   The media query stays as the no-JS floor. */
@media (max-width: 1199px) {
    .nav, .nav__actions .btn { display: none; }
}
.site-head__inner.is-compact .nav,
.site-head__inner.is-compact .nav__actions .btn { display: none; }
.site-head__inner.is-compact .nav-toggle { display: block; }

/* With the links gone the icon cluster travels to the right and sits beside
   the drawer button instead of hanging off the logo. */
.site-head__inner.is-compact .nav__actions,
.site-head__inner:not(.is-compact) .nav[hidden] ~ .nav__actions { margin-left: auto; }
.site-head__inner.is-compact .nav-toggle { margin-left: .45rem; }
@media (max-width: 1199px) {
    .nav__actions { margin-left: auto; }
    .nav-toggle { margin-left: .45rem; }
}

/* Mobile drawer */
.nav-toggle {
    display: none;
    margin-left: auto;
    width: 44px; height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg-raised);
    cursor: pointer;
    position: relative;
}
.nav-toggle span {
    position: absolute;
    left: 50%;
    width: 20px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: all var(--t-mid) var(--ease);
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: translateX(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: translateX(-50%) rotate(-45deg); }
@media (max-width: 1199px) { .nav-toggle { display: block; } }

.drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(400px, 88vw);
    z-index: 1100;
    background: var(--bg);
    border-left: 1px solid var(--line);
    padding: 1.5rem var(--gutter) 2.5rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .38s var(--ease);
    box-shadow: var(--shadow-lg);
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.drawer__list { display: flex; flex-direction: column; }
/* The two expanding rows are <button>s. Without an explicit reset they take
   the browser's own button skin — grey fill, square border — and sit in the
   menu looking like form controls. */
.drawer__link {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .95rem .85rem;
    margin: 0;
    border: 0;
    border-radius: var(--r-md);
    background: none;
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    color: var(--text);
    cursor: pointer;
    transition: background var(--t-fast) linear, color var(--t-fast) linear;
}
.drawer__link + .drawer__link,
.drawer__sub + .drawer__link { border-top: 1px solid var(--line); border-radius: 0; }
.drawer__link:hover { background: var(--bg-sunk); color: var(--brand-primary); }
.drawer__link.is-active {
    color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 9%, transparent);
    border-radius: var(--r-md);
    font-weight: 600;
}
.drawer__link .icon { flex: none; transition: transform var(--t-mid) var(--ease); color: var(--text-faint); }
.drawer__link[aria-expanded="true"] {
    color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
    border-radius: var(--r-md) var(--r-md) 0 0;
}
.drawer__link[aria-expanded="true"] .icon { transform: rotate(180deg); color: var(--brand-primary); }

/* Sub-menu: a tinted well, opening with a slide rather than a jump. */
.drawer__sub {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    border-radius: 0 0 var(--r-md) var(--r-md);
    background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
    transition: grid-template-rows .38s var(--ease);
}
.drawer__sub > * { min-height: 0; }
.drawer__sub.is-open { grid-template-rows: 1fr; }
/* Padding has to collapse with the row: a grid item's padding survives
   min-height: 0, which left a tinted sliver under every closed menu. */
.drawer__sub-inner {
    padding: 0 .6rem;
    transition: padding .38s var(--ease);
}
.drawer__sub.is-open .drawer__sub-inner { padding: .35rem .6rem .7rem; }
.drawer__sub a {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .6rem;
    border-radius: var(--r-sm);
    font-size: .92rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: background var(--t-fast) linear, color var(--t-fast) linear, transform var(--t-mid) var(--ease);
}
.drawer__sub a:hover {
    background: var(--bg-raised);
    color: var(--brand-primary);
    transform: translateX(3px);
}
.drawer__sub .icon-tile { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.drawer__sub .icon-tile .icon { width: 16px; height: 16px; }

/* Drawer chrome */
.drawer__head {
    padding-bottom: 1.1rem;
    margin-bottom: .6rem;
    border-bottom: 1px solid var(--line);
}
.drawer__list { gap: 0; }
.drawer__foot { margin-top: 2rem; display: grid; gap: .7rem; }

.scrim {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(5, 16, 31, .55);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-mid) linear, visibility var(--t-mid);
}
.scrim.is-open { opacity: 1; visibility: visible; }

body.is-locked { overflow: hidden; }

/* ------------------------------------------------------------------ */
/*  4. Homepage hero                                                   */
/* ------------------------------------------------------------------ */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--ink-950);
    color: #fff;
    isolation: isolate;
}
/* The photograph sits ABOVE the painted gradient (which is opaque) and below
   the grid and the content — otherwise an uploaded slide image is buried and
   the hero looks like it never took one. */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}
/* No opacity here: the slide layers below own it. A rule on `.hero__bg img`
   outranks `.hero__layer`, which is what made every layer paint at once and
   left the same stack of images behind every slide. */
.hero__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.hero__bg img.is-contain { object-fit: contain; padding: clamp(1rem, 4vw, 3rem); }

/* Scrim over the photograph so white headline text keeps its contrast
   whatever the client uploads. */
.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 92% at 76% 46%, transparent 30%, rgba(3, 12, 28, .62) 100%),
        linear-gradient(100deg, rgba(4, 16, 31, .93) 0%, rgba(4, 20, 46, .78) 42%, rgba(4, 20, 46, .38) 72%, rgba(4, 31, 82, .30) 100%),
        linear-gradient(to top, rgba(4, 16, 31, .84), transparent 48%);
}

/* Grain, kept on its own layer at low strength: enough to stop the gradients
   banding on a large screen, not enough to fog the photograph. */
.hero__bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    opacity: .05;
    mix-blend-mode: overlay;
    pointer-events: none;
}
.hero__bg::after { z-index: 0; }

/* Stacked slide backgrounds: only the active layer is visible, and the
   cross-fade is slower than the text change so the image reads as a backdrop
   rather than a second animation competing with the headline. */
/* Scoped to .hero__bg so these beat the element rule above whatever the
   order of the file: exactly one layer is visible at a time. */
.hero__bg .hero__layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.04);
    transition: opacity .9s var(--ease), visibility .9s linear, transform 6s var(--ease);
}
.hero__bg .hero__layer.is-active {
    opacity: .55;
    visibility: visible;
    transform: scale(1);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(1100px 620px at 78% 8%, rgba(0, 165, 213, .30), transparent 62%),
        radial-gradient(900px 520px at 10% 92%, rgba(0, 48, 134, .55), transparent 60%),
        linear-gradient(160deg, #04142E 0%, #05101F 55%, #041F52 100%);
}
.hero::after {
    /* Fine engineering grid — reads as technical, not decorative. */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 100%);
}

.hero__inner {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4.5rem);
    align-items: center;
    padding-block: clamp(4rem, 11vh, 8rem) clamp(4rem, 9vh, 6.5rem);
    min-height: min(88vh, 860px);
    grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
    .hero__inner { grid-template-columns: 1.08fr .92fr; }
}
/* Without the emblem column there is nothing to fill a full-height hero. */
@media (max-width: 780px) {
    .hero__inner { min-height: auto; padding-block: 3.4rem 3rem; }
}

.hero h1 {
    color: #fff;
    margin-top: 1.1rem;
    /* Held below the global display size: the hero headline is long, and at
       full --step-5 it pushes the call to action below the fold. */
    font-size: clamp(2.1rem, 4.2vw, 3.45rem);
    letter-spacing: -.032em;
    max-width: 17ch;
    text-shadow: 0 2px 26px rgba(2, 12, 30, .5);
}
.hero .lead {
    color: rgba(255, 255, 255, .82);
    margin-top: 1.3rem;
    max-width: 34em;
    text-shadow: 0 1px 18px rgba(2, 12, 30, .45);
}
.hero .eyebrow { color: var(--brand-highlight); }
.hero__actions { margin-top: 2.1rem; }

.hero__slides { position: relative; }
.hero__slide {
    display: none;
    animation: hero-in .8s var(--ease-out) both;
}
.hero__slide.is-active { display: block; }
@keyframes hero-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

/* Slide indicators double as a timer: the active bar fills over the autoplay
   interval, so the hero tells you when it is about to move. */
.hero__dots { display: flex; gap: .5rem; margin-top: 2.6rem; }
.hero__dot {
    position: relative;
    overflow: hidden;
    width: 34px; height: 4px;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .22);
    cursor: pointer;
    padding: 0;
    transition: background var(--t-mid) linear, width var(--t-mid) var(--ease);
}
.hero__dot:hover { background: rgba(255, 255, 255, .4); }
.hero__dot.is-active { background: rgba(255, 255, 255, .26); width: 62px; }
.hero__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-secondary), var(--brand-highlight));
}
.hero__dot.is-active::after { animation: dot-fill var(--hero-delay, 8000ms) linear forwards; }
.hero:hover .hero__dot.is-active::after { animation-play-state: paused; }
@keyframes dot-fill { from { width: 0; } to { width: 100%; } }

/* The orbit figure — an abstraction of the Conyx mark. */
.orbit {
    position: relative;
    width: min(100%, 520px);
    aspect-ratio: 1;
    margin-inline: auto;
}

/* A pool of brand light under the emblem, so the figure sits in the page
   rather than floating on top of it. */
.orbit__glow {
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--brand-secondary) 55%, transparent), transparent 62%),
        radial-gradient(circle at 62% 68%, color-mix(in srgb, var(--brand-deep) 70%, transparent), transparent 66%);
    filter: blur(38px);
    opacity: .75;
    animation: orbit-glow 11s var(--ease) infinite;
}
@keyframes orbit-glow {
    0%, 100% { opacity: .62; transform: scale(1); }
    50%      { opacity: .9;  transform: scale(1.06); }
}

/* The emblem: three tapered ribbons sharing one centre. Each turns at its
   own speed, one against the other two, so the arcs sweep across each other
   continuously instead of tracking as concentric rings. */
.emblem {
    position: relative;
    width: 100%; height: 100%;
    overflow: visible;
    filter: drop-shadow(0 22px 46px rgba(1, 22, 56, .55));
    animation: emblem-breathe 12s var(--ease) infinite;
}
.emblem__spin {
    /* view-box keeps the pivot at the centre of the artwork; the default
       fill-box would spin each ribbon around its own bounding box. */
    transform-box: view-box;
    transform-origin: 50% 50%;
}
.emblem__spin--1 { animation: emblem-spin 34s linear infinite; }
.emblem__spin--2 { animation: emblem-spin 26s linear infinite reverse; }
.emblem__spin--3 { animation: emblem-spin 46s linear infinite; }
@keyframes emblem-spin { to { transform: rotate(360deg); } }
@keyframes emblem-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.028); }
}

.emblem__core {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: emblem-core 5.5s var(--ease) infinite;
}
@keyframes emblem-core {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}
.emblem__dart { animation: emblem-dart 5.5s var(--ease) infinite; }
@keyframes emblem-dart {
    0%, 100% { opacity: .45; }
    50%      { opacity: .78; }
}

.orbit__node {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .95rem .5rem .5rem;
    border-radius: var(--r-pill);
    background: linear-gradient(140deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 14px 34px rgba(2, 10, 26, .38);
    animation: node-float 7s var(--ease) infinite;
}
.orbit__node .icon-tile {
    width: 28px; height: 28px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--i-accent, var(--brand-secondary)) 62%, transparent);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
}
.orbit__node .icon-tile .icon { width: 15px; height: 15px; }
.orbit__node:nth-child(3) { top: 4%;  left: 2%;  animation-delay: 0s; }
.orbit__node:nth-child(4) { top: 25%; right: -5%; animation-delay: .9s; }
.orbit__node:nth-child(5) { bottom: 23%; left: -7%; animation-delay: 1.7s; }
.orbit__node:nth-child(6) { bottom: 2%; right: 6%; animation-delay: 2.5s; }
@keyframes node-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
@media (max-width: 999px) { .orbit { max-width: 380px; } .orbit__node { font-size: .72rem; } }
@media (max-width: 600px) { .orbit__node:nth-child(4), .orbit__node:nth-child(5) { display: none; } }

/* ------------------------------------------------------------------ */
/*  Client logo rail                                                   */
/*                                                                     */
/*  Two tracks running against each other, each a duplicated list so   */
/*  the loop has no seam (the duplicate is made by the Marquee module  */
/*  in app.js). Logos arrive from clients in every shape and colour,   */
/*  so each one sits in a fixed box, is centred, and is held back to a */
/*  quiet monochrome until the row is hovered.                         */
/* ------------------------------------------------------------------ */

.clients .section-head { max-width: 44rem; }
.clients .lead { color: var(--text-muted); }

.logo-rail {
    margin-top: 2.6rem;
    display: grid;
    gap: 1rem;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-rail__row { overflow: hidden; }
/* Too few logos to fill the rail: centre them and stop the animation, so a
   short list reads as a deliberate row rather than a drifting fragment. */
.logo-rail__row.is-static { overflow: visible; }
.logo-rail__row.is-static .logo-rail__track {
    width: 100%;
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
}
.logo-rail:has(.is-static) {
    mask-image: none;
    -webkit-mask-image: none;
}
.logo-rail__track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: rail-run var(--rail-speed, 36s) linear infinite;
}
.logo-rail__row--reverse .logo-rail__track { animation-direction: reverse; }
.logo-rail:hover .logo-rail__track { animation-play-state: paused; }
@keyframes rail-run { to { transform: translateX(-50%); } }

.logo-tile {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 268px;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-raised);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
                border-color var(--t-mid) linear;
}
.logo-tile:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--line));
    box-shadow: 0 26px 44px -28px rgba(0, 91, 179, .6);
    color: var(--text);
}
/* A thread of brand colour along the top, drawn in on hover. */
.logo-tile::after {
    content: "";
    position: absolute;
    left: 1.15rem; right: 1.15rem; top: 0;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
}
.logo-tile:hover::after { transform: scaleX(1); }

/* A fixed white plate behind every mark: client logos are drawn for print,
   on white, and half of them vanish on a tinted panel otherwise. */
.logo-tile__mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 92px; height: 60px;
    padding: .4rem;
    border-radius: var(--r-sm);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.logo-tile__mark img {
    max-width: 100%;
    max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .78;
    transition: filter var(--t-mid) linear, opacity var(--t-mid) linear;
}
.logo-tile:hover .logo-tile__mark img { filter: none; opacity: 1; }

.logo-tile__name {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
}
.logo-tile__name em {
    font-style: normal;
    font-size: .72rem;
    font-weight: 500;
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 600px) {
    .logo-tile { width: 212px; gap: .7rem; padding: .85rem .9rem; }
    .logo-tile__mark { width: 64px; height: 46px; }
}

/* ------------------------------------------------------------------ */
/*  Network band (partners)                                            */
/*                                                                     */
/*  The rows behind this are groups of counterparty — "International   */
/*  manufacturers", "Government institutions" — as often as they are   */
/*  named firms, so the chip leads with a category icon on its own     */
/*  tint and treats a logo as the exception rather than the rule.      */
/* ------------------------------------------------------------------ */

.network {
    padding-block: clamp(2.2rem, 4vw, 3.2rem);
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(120% 140% at 50% -40%, color-mix(in srgb, var(--brand-light) 34%, transparent), transparent 60%),
        var(--bg);
}
.network__head {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    justify-content: center;
}
.network__rule {
    flex: 1;
    max-width: 140px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong));
}
.network__head .network__rule:last-child { background: linear-gradient(90deg, var(--line-strong), transparent); }
.network__label {
    margin: 0;
    text-align: center;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.network__label strong { color: var(--text-muted); font-weight: 600; }
.network__foot { margin-top: 1.6rem; }

.logo-rail--chips { margin-top: 1.9rem; }

.network-chip {
    flex: none;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 1.25rem .6rem .6rem;
    border-radius: var(--r-pill);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-xs);
    color: var(--text);
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
                border-color var(--t-mid) linear;
}
.network-chip:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--chip-accent, var(--brand-primary)) 40%, var(--line));
    box-shadow: var(--shadow-md);
}
.network-chip__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--chip-accent, var(--brand-primary)) 13%, transparent);
    color: var(--chip-accent, var(--brand-primary));
}
.network-chip__icon .icon { width: 18px; height: 18px; }
.network-chip__icon img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
    padding: 3px;
}
.network-chip__text { display: flex; flex-direction: column; line-height: 1.2; }
.network-chip__text strong { font-size: .9rem; font-weight: 600; white-space: nowrap; }
.network-chip__text em {
    font-style: normal;
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-top: .1rem;
}

/* The category tints are chosen for a white panel; on the dark palette they
   are lifted towards white so the deeper ones keep their contrast. */
[data-theme="dark"] .network-chip__icon {
    background: color-mix(in srgb, var(--chip-accent, var(--brand-primary)) 24%, transparent);
    color: color-mix(in srgb, var(--chip-accent, var(--brand-primary)) 55%, #fff);
}

@media (max-width: 600px) {
    .network__rule { max-width: 40px; }
    .network__label { font-size: .7rem; }
    .network-chip { padding: .5rem 1rem .5rem .5rem; }
    .network-chip__icon { width: 34px; height: 34px; }
}

/* Clients page: the full list, grouped by sector. */
.client-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.client-card {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-raised);
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.client-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.client-card__mark {
    display: grid;
    place-items: center;
    height: 76px;
    padding: .6rem;
    border-radius: var(--r-md);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.client-card__mark img { max-width: 100%; max-height: 100%; object-fit: contain; }
.client-card__mark .icon { width: 28px; height: 28px; color: var(--text-faint); }
.client-card__name { font-weight: 600; font-size: .98rem; }
.client-card__text { font-size: .86rem; color: var(--text-muted); margin-top: .3rem; }

/* ------------------------------------------------------------------ */
/*  Hero stat strip                                                    */
/*                                                                     */
/*  The band that closes the hero. Each figure carries the icon set on */
/*  it in the admin, counts up when it scrolls into view, and sits in  */
/*  its own hoverable cell divided by hairlines that fade out at both  */
/*  ends rather than ruling the band edge to edge.                     */
/* ------------------------------------------------------------------ */

.hero__strip {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, rgba(4, 20, 46, .72), rgba(3, 13, 30, .88));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
/* A thread of brand colour along the seam with the hero above it. */
.hero__strip::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brand-secondary), var(--brand-highlight), transparent);
    opacity: .55;
}
.hero__strip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.hero__stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: .95rem;
    padding: 1.45rem 1.4rem;
    transition: background var(--t-mid) linear;
}
.hero__stat:hover { background: rgba(255, 255, 255, .045); }

/* Divider between cells: inset and faded, so the band does not look ruled. */
.hero__stat + .hero__stat::before {
    content: "";
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .18), transparent);
}

.hero__stat-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 15px;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--brand-secondary) 34%, transparent),
        color-mix(in srgb, var(--brand-deep) 52%, transparent));
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
    color: var(--brand-highlight);
    transition: transform var(--t-mid) var(--ease), color var(--t-mid) linear;
}
.hero__stat-icon .icon { width: 21px; height: 21px; }
.hero__stat:hover .hero__stat-icon { transform: translateY(-2px) scale(1.05); color: #fff; }

.hero__stat-body { min-width: 0; }
.hero__stat-value {
    display: flex;
    align-items: baseline;
    gap: .08em;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: #fff;
}
/* Gradient numerals, with the flat white above as the fallback. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .hero__stat-value {
        background: linear-gradient(180deg, #FFFFFF 30%, #B7DFF1);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}
/* The + or % stays in brand colour and a size down, so the number reads
   as the number. */
.hero__stat-fix {
    font-size: .62em;
    font-weight: 600;
    color: var(--brand-highlight);
    -webkit-text-fill-color: var(--brand-highlight);
}
.hero__stat-label {
    font-size: .71rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
    margin-top: .5rem;
}

@media (max-width: 640px) {
    .hero__strip-grid { grid-template-columns: repeat(2, 1fr); }
    .hero__stat { padding: 1.2rem 1rem; gap: .75rem; }
    .hero__stat-icon { width: 40px; height: 40px; border-radius: 13px; }
    .hero__stat-icon .icon { width: 18px; height: 18px; }
    .hero__stat-label { font-size: .63rem; letter-spacing: .05em; margin-top: .4rem; }
    /* Two columns: the divider belongs on the right-hand cell only, and the
       second row gains a horizontal one instead. */
    .hero__stat:nth-child(odd)::before { display: none; }
    .hero__stat:nth-child(n+3)::after {
        content: "";
        position: absolute;
        left: 12%; right: 12%; top: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
    }
}

/* ------------------------------------------------------------------ */
/*  5. Interior page hero                                              */
/* ------------------------------------------------------------------ */

.page-hero {
    position: relative;
    padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
    background: var(--ink-950);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(760px 420px at 85% 0%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 62%),
        linear-gradient(150deg, #04142E, #05101F 70%);
}
/* Above the opaque gradient, under its own scrim — same reasoning as the
   homepage hero. */
.page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.page-hero__bg img.is-contain { object-fit: contain; padding: clamp(1rem, 4vw, 2.6rem); }
.page-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(4, 16, 31, .92) 0%, rgba(4, 20, 46, .76) 45%, rgba(4, 20, 46, .42) 100%),
        linear-gradient(to top, rgba(4, 16, 31, .8), transparent 52%);
}
.page-hero h1 { color: #fff; margin-top: .9rem; font-size: var(--step-4); }
.page-hero .lead { color: rgba(255, 255, 255, .74); margin-top: 1rem; max-width: 58ch; }
.page-hero .eyebrow { color: var(--brand-highlight); }
.page-hero__actions { margin-top: 1.8rem; }

.crumbs { font-size: .8rem; margin-bottom: 1.4rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; list-style: none; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .45; }
.crumbs a { color: rgba(255, 255, 255, .68); }
.crumbs a:hover { color: #fff; }
.crumbs span { color: rgba(255, 255, 255, .95); }

/* On light pages the breadcrumb sits on the page background instead. */
.crumbs--light a { color: var(--text-muted); }
.crumbs--light span { color: var(--text); }

/* ------------------------------------------------------------------ */
/*  6. Division cards                                                  */
/* ------------------------------------------------------------------ */

.division-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 340px;
    padding: 1.7rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--bg-raised);
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) linear;
}
.division-card::before {
    content: "";
    position: absolute;
    inset: auto -30% -55% auto;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--i-accent) 30%, transparent), transparent 68%);
    opacity: 0;
    transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
    transform: scale(.7);
    z-index: -1;
}
.division-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--i-accent) 45%, var(--line));
}
.division-card:hover::before { opacity: 1; transform: scale(1); }

/* A division that has a photograph shows it; one that does not keeps the
   icon-led layout, so the grid still reads as a set either way. */
.division-card--media { padding-top: 0; }
.division-card__media {
    position: relative;
    margin: 0 -1.7rem 1.2rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-sunk);
}
.division-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
}
.division-card:hover .division-card__media img { transform: scale(1.05); }
.division-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--bg-raised) 92%, transparent));
}
.division-card--media .division-card__top {
    margin-top: -46px;
    position: relative;
    z-index: 1;
}
.division-card--media .division-card__icon {
    background: var(--bg-raised);
    box-shadow: var(--shadow-md);
}

.division-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.division-card__index {
    font-family: var(--font-mono);
    font-size: .74rem;
    color: var(--text-faint);
    letter-spacing: .08em;
}
.division-card__icon {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--i-accent) 12%, transparent);
    color: var(--i-accent);
    transition: transform var(--t-mid) var(--ease);
}
.division-card__icon .icon { width: 27px; height: 27px; }
.division-card:hover .division-card__icon { transform: scale(1.08) rotate(-4deg); }

.division-card__title { font-size: var(--step-2); margin-top: 1.4rem; }
.division-card__tag {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .05em;
    color: var(--i-accent);
    margin-top: .5rem;
    text-transform: uppercase;
}
.division-card__text { color: var(--text-muted); font-size: .9rem; margin-top: .85rem; line-height: 1.6; }

.division-card__list {
    margin-top: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.division-card__list span {
    font-size: .74rem;
    padding: .25rem .6rem;
    border-radius: var(--r-pill);
    background: var(--bg-sunk);
    color: var(--text-muted);
    border: 1px solid var(--line);
}

.division-card__foot {
    margin-top: auto;
    padding-top: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.division-card__arrow {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--i-accent);
    transition: all var(--t-mid) var(--ease);
    flex: none;
}
.division-card:hover .division-card__arrow {
    background: var(--i-accent);
    border-color: var(--i-accent);
    color: #fff;
    transform: rotate(-45deg);
}

.division-card--stretch::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* ------------------------------------------------------------------ */
/*  Deep section — the divisions band on brand navy                    */
/*                                                                     */
/*  Everything here is scoped to .section--deep: the same card markup  */
/*  is used on the divisions index page, where it stays light.         */
/* ------------------------------------------------------------------ */

.section--deep {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(168deg, #003086 0%, #04266B 42%, #03163B 100%);
}
/* Engineering grid, faded out towards every edge. */
.section--deep::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 78px 78px;
    mask-image: radial-gradient(ellipse 78% 82% at 50% 42%, #000 22%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 42%, #000 22%, transparent 78%);
    pointer-events: none;
}
/* Light spilling in from the top right, echoing the hero. */
.section--deep__glow {
    position: absolute;
    top: -30%;
    right: -12%;
    width: min(65%, 860px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 38%, rgba(0, 165, 213, .38), transparent 60%),
        radial-gradient(circle at 70% 66%, rgba(158, 213, 234, .22), transparent 62%);
    filter: blur(70px);
    pointer-events: none;
}
.section--deep > .wrap { position: relative; z-index: 1; }

.section--deep h2,
.section--deep h3 { color: #fff; }
.section--deep .eyebrow { color: var(--brand-highlight); }
.section--deep .eyebrow::before { background: var(--brand-highlight); }
.section--deep .btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .04);
}
.section--deep .btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

/* --- Cards on the deep ground ------------------------------------- */

.section--deep .division-card {
    /* Division accents are chosen for white; lifted towards white they stay
       themselves and stay legible on navy. */
    --i-accent-lift: color-mix(in srgb, var(--i-accent) 45%, #fff);

    background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035));
    border-color: rgba(255, 255, 255, .14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 24px 48px -32px rgba(0, 0, 0, .9);
}
/* A thread of the division's colour along the top edge, drawn in on hover. */
.section--deep .division-card::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--i-accent-lift), transparent);
    transform: scaleX(.25);
    opacity: .5;
    transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.section--deep .division-card:hover {
    border-color: color-mix(in srgb, var(--i-accent-lift) 55%, rgba(255, 255, 255, .14));
    box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .95),
                0 0 0 1px color-mix(in srgb, var(--i-accent-lift) 22%, transparent);
}
.section--deep .division-card:hover::after { transform: scaleX(1); opacity: 1; }
.section--deep .division-card::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--i-accent-lift) 42%, transparent), transparent 68%);
}

.section--deep .division-card__icon {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--i-accent-lift) 30%, transparent),
        rgba(255, 255, 255, .06));
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
    color: var(--i-accent-lift);
}
.section--deep .division-card__index { color: rgba(255, 255, 255, .38); }
.section--deep .division-card__title { color: #fff; }
.section--deep .division-card__tag { color: var(--i-accent-lift); }
.section--deep .division-card__text { color: rgba(255, 255, 255, .72); }

.division-card__flag {
    color: #F0B24B;
    border-color: rgba(240, 178, 75, .35) !important;
}
.section--deep .division-card__list span {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .8);
}
.section--deep .division-card__list .division-card__flag {
    background: rgba(240, 178, 75, .12);
    border-color: rgba(240, 178, 75, .4);
    color: #F5C778;
}
.section--deep .division-card__foot .link-cta { color: var(--i-accent-lift) !important; }
.section--deep .division-card__arrow {
    border-color: rgba(255, 255, 255, .22);
    color: var(--i-accent-lift);
}
.section--deep .division-card:hover .division-card__arrow {
    background: var(--i-accent-lift);
    border-color: var(--i-accent-lift);
    color: #03163B;
}

/* Every card opens with a panel of the same height, so the six read as a
   set. The picture is shown whole inside it — a logo is never cropped into
   a band — and a division with nothing uploaded shows its icon as a
   watermark on the division's own colour. */
.section--deep .division-card__media {
    position: relative;
    display: grid;
    place-items: center;
    height: 156px;
    margin: 0 0 1.3rem;
    padding: 0;
    aspect-ratio: auto;
    border-radius: var(--r-md);
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: inset 0 0 0 1px rgba(3, 22, 59, .05),
                0 14px 28px -18px rgba(0, 0, 0, .8);
    overflow: hidden;
}
/* A photograph fills the panel; a logo (detected by image_fit(), which reads
   the file's edges) is shown whole inside it and never cropped. */
.section--deep .division-card__media img {
    /* Pinned, not laid out: the panel centres its children, and a percentage
       height on a grid item resolves against its own content — which let a
       tall picture overflow the panel and get clipped. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    background: transparent;
    transition: transform var(--t-slow) var(--ease);
}
.section--deep .division-card__media img.is-contain { object-fit: contain; padding: .9rem; }
.section--deep .division-card:hover .division-card__media img { transform: scale(1.04); }
.section--deep .division-card__media::after { display: none; }

/* No picture yet: the division's icon, large and faint, on its own colour. */
.section--deep .division-card__media--empty {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--i-accent-lift) 26%, rgba(255, 255, 255, .06)),
        rgba(255, 255, 255, .04));
    border-color: rgba(255, 255, 255, .14);
    box-shadow: none;
}
.section--deep .division-card__media--empty::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 14px);
    opacity: .7;
}
/* The name, set large and faint, rather than the icon again — the icon tile
   below the panel already carries it. */
.division-card__watermark {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
    font-weight: 700;
    letter-spacing: -.03em;
    text-align: center;
    color: rgba(255, 255, 255, .34);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

/* The index rides in the corner of the panel. */
.section--deep .division-card__media .division-card__index {
    position: absolute;
    top: .6rem;
    right: .6rem;
    padding: .12rem .45rem;
    border-radius: var(--r-pill);
    background: rgba(3, 22, 59, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-size: .68rem;
    color: rgba(255, 255, 255, .85);
}
.section--deep .division-card__media--empty .division-card__index { background: rgba(3, 22, 59, .38); }

.section--deep .division-card--media { padding-top: 1.7rem; }
.section--deep .division-card--media .division-card__top { margin-top: 0; }
/* Icon tile hidden for now — the panel above already identifies the card. */
.section--deep .division-card__top { display: none; }
.section--deep .division-card__title { margin-top: 0; }
.section--deep .division-card__title { margin-top: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
    .section--deep .division-card::after { transition: none; }
}

/* ------------------------------------------------------------------ */
/*  7. Feature / value cards                                           */
/* ------------------------------------------------------------------ */

.feature {
    display: flex;
    gap: 1.1rem;
    padding: 1.5rem;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--bg-raised);
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) linear;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
.feature__title { font-weight: 600; font-size: 1rem; font-family: var(--font-display); }
.feature__text { font-size: .86rem; color: var(--text-muted); margin-top: .35rem; line-height: 1.6; }
.feature--stacked { flex-direction: column; gap: 1rem; }

.feature--bare {
    border: 0;
    background: none;
    padding: 0;
}
.feature--bare:hover { transform: none; box-shadow: none; }

/* ------------------------------------------------------------------ */
/*  About the Group                                                    */
/*                                                                     */
/*  Structure is the shared .split / .feature markup — everything here */
/*  is surface: a lit backdrop for the section and a richer card, both */
/*  scoped to .about so no other section shifts.                       */
/* ------------------------------------------------------------------ */

.about {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--blue-50) 60%, var(--bg)));
}
/* A faint engineering grid, masked to an ellipse behind the cards so it
   fades out on every side instead of ruling to the section edge. */
.about::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 74px 74px;
    mask-image: radial-gradient(ellipse 62% 74% at 74% 48%, #000 12%, transparent 74%);
    -webkit-mask-image: radial-gradient(ellipse 62% 74% at 74% 48%, #000 12%, transparent 74%);
    opacity: .85;
    pointer-events: none;
}

/* Two pools of brand light, one warm-cyan, one deep, drifting slowly. */
.about__wash {
    position: absolute;
    top: -22%;
    right: -14%;
    width: min(68%, 780px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--brand-secondary) 30%, transparent), transparent 58%),
        radial-gradient(circle at 68% 72%, color-mix(in srgb, var(--brand-light) 75%, transparent), transparent 62%);
    filter: blur(60px);
    opacity: .85;
    pointer-events: none;
    animation: about-drift 18s var(--ease) infinite;
}
@keyframes about-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-2.5%, 3%, 0) scale(1.06); }
}
.about .wrap { position: relative; z-index: 1; }

/* --- Cards -------------------------------------------------------- */

.about .feature {
    position: relative;
    padding: 1.6rem 1.5rem;
    border-radius: var(--r-lg);
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    background:
        linear-gradient(160deg,
            color-mix(in srgb, #fff 92%, transparent),
            color-mix(in srgb, var(--blue-50) 72%, #fff));
    box-shadow: 0 1px 2px rgba(5, 16, 31, .04), 0 18px 34px -26px rgba(5, 16, 31, .35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
}
/* A hairline of brand colour that draws in from the left on hover. */
.about .feature:not(.feature--bare)::after {
    content: "";
    position: absolute;
    left: 1.5rem; right: 1.5rem; top: 0;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
}
.about .feature:not(.feature--bare):hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--brand-primary) 26%, var(--line));
    box-shadow: 0 1px 2px rgba(5, 16, 31, .05), 0 26px 48px -28px rgba(0, 91, 179, .5);
}
.about .feature:not(.feature--bare):hover::after { transform: scaleX(1); }

/* The vision and mission pair keeps its plain treatment. */
.about .feature--bare {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Icon tiles: a lit chip rather than a flat swatch. */
.about .icon-tile {
    background: linear-gradient(145deg, var(--blue-100), var(--blue-200));
    border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8),
                0 10px 20px -14px rgba(0, 91, 179, .55);
    color: var(--brand-primary);
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.about .feature:hover .icon-tile {
    transform: translateY(-2px) scale(1.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8),
                0 14px 26px -14px rgba(0, 91, 179, .65);
}
.about .feature__title { font-size: 1.02rem; letter-spacing: -.012em; }
.about .feature__text { line-height: 1.65; }

/* --- Dark palette ------------------------------------------------- */

[data-theme="dark"] .about {
    background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--brand-deep) 18%, var(--bg)));
}
[data-theme="dark"] .about__wash {
    background:
        radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--brand-secondary) 26%, transparent), transparent 58%),
        radial-gradient(circle at 68% 72%, color-mix(in srgb, var(--brand-deep) 55%, transparent), transparent 62%);
    opacity: .7;
}
[data-theme="dark"] .about .feature {
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--bg-raised) 92%, transparent),
        color-mix(in srgb, var(--brand-primary) 14%, var(--bg-raised)));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 20px 40px -28px rgba(0, 0, 0, .8);
}
[data-theme="dark"] .about .feature--bare { background: none; box-shadow: none; }
[data-theme="dark"] .about .icon-tile {
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--brand-secondary) 30%, transparent),
        color-mix(in srgb, var(--brand-deep) 50%, transparent));
    border-color: rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    color: var(--brand-highlight);
}

@media (prefers-reduced-motion: reduce) {
    .about__wash { animation: none; }
}

/* Numbered process steps */
.steps { counter-reset: step; display: grid; gap: 1rem; }
.step {
    position: relative;
    display: flex;
    gap: 1.15rem;
    padding: 1.3rem 1.4rem;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--bg-raised);
    transition: all var(--t-mid) var(--ease);
}
.step:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateX(5px); }
.step__no {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    flex: none;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: .95rem;
}
.step__title { font-weight: 600; font-family: var(--font-display); }
.step__text { font-size: .86rem; color: var(--text-muted); margin-top: .25rem; line-height: 1.6; }

@media (min-width: 760px) {
    .steps--flow { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; }
    .steps--flow .step {
        flex-direction: column;
        border-radius: 0;
        border-right: 0;
        text-align: left;
    }
    .steps--flow .step:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
    .steps--flow .step:last-child { border-right: 1px solid var(--line); border-radius: 0 var(--r-md) var(--r-md) 0; }
    .steps--flow .step:hover { transform: translateY(-5px); z-index: 2; box-shadow: var(--shadow-md); }
}

/* ------------------------------------------------------------------ */
/*  Process rail — "How we work"                                       */
/*                                                                     */
/*  Four steps on a single track. The track fills to whichever step is */
/*  active; the section walks itself through once on first view, then  */
/*  hover and keyboard focus take over (see Process in app.js).        */
/* ------------------------------------------------------------------ */

.process { position: relative; overflow: hidden; }
.process__wash {
    position: absolute;
    top: -20%;
    left: 50%;
    width: min(120%, 1500px);
    aspect-ratio: 2.4 / 1;
    transform: translateX(-50%);
    background:
        radial-gradient(ellipse at 30% 40%, rgba(0, 91, 179, .5), transparent 62%),
        radial-gradient(ellipse at 72% 55%, rgba(0, 165, 213, .28), transparent 60%);
    filter: blur(80px);
    pointer-events: none;
}
.process > .wrap { position: relative; z-index: 1; }
.process .section-head { max-width: 46rem; }
.process .lead { color: rgba(255, 255, 255, .66); }

.process__rail { position: relative; margin-top: clamp(2.4rem, 5vw, 3.4rem); }

/* The track sits behind the markers, at their centre line. */
.process__track {
    position: absolute;
    top: 44px;
    left: 8%;
    right: 8%;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}
.process__progress {
    display: block;
    width: 12%;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary), var(--brand-highlight));
    box-shadow: 0 0 18px rgba(0, 165, 213, .6);
    transition: width .7s var(--ease);
}

.process__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.process__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    padding: 1.05rem 1.35rem 1.5rem;
    border-radius: var(--r-lg);
    border: 1px solid transparent;
    background: transparent;
    cursor: default;
    transition: background var(--t-mid) linear, border-color var(--t-mid) linear,
                transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.process__step:focus-visible { outline: 2px solid var(--brand-secondary); outline-offset: 4px; }

/* Marker: opaque, so the track passes behind it rather than through it. */
.process__marker {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #0A1B2E;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 0 0 6px #05101F;
    transition: all var(--t-mid) var(--ease);
}
.process__no {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
    transition: color var(--t-mid) linear;
}
.process__icon {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    margin-top: 1.4rem;
    border-radius: 11px;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .5);
    transition: all var(--t-mid) var(--ease);
}
.process__icon .icon { width: 17px; height: 17px; }
.process__title {
    margin-top: .85rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.02rem;
    color: #fff;
}
.process__text {
    font-size: .87rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .58);
    transition: color var(--t-mid) linear;
}

/* Steps already passed keep a lit marker; the active one is fully lit. */
.process__step.is-done .process__marker {
    border-color: color-mix(in srgb, var(--brand-secondary) 55%, transparent);
    background: color-mix(in srgb, var(--brand-primary) 30%, #0A1B2E);
}
.process__step.is-done .process__no { color: var(--brand-highlight); }

.process__step.is-active {
    background: linear-gradient(165deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .9);
    transform: translateY(-4px);
}
.process__step.is-active .process__marker {
    background: linear-gradient(150deg, var(--brand-secondary), var(--brand-primary));
    border-color: rgba(255, 255, 255, .35);
    /* No masking ring here: the lifted card already covers the track. */
    box-shadow: 0 12px 26px -10px rgba(0, 165, 213, .75);
    transform: scale(1.06);
}
.process__step.is-active .process__no { color: #fff; }
.process__step.is-active .process__icon {
    background: color-mix(in srgb, var(--brand-secondary) 26%, transparent);
    color: #fff;
}
.process__step.is-active .process__text { color: rgba(255, 255, 255, .78); }

.process__cta { margin-top: clamp(2rem, 4vw, 3rem); }

@media (max-width: 900px) {
    .process__steps { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
    .process__track { display: none; }
}
@media (max-width: 560px) {
    .process__steps { grid-template-columns: 1fr; }
    .process__step { padding-bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .process__progress { transition: none; }
    .process__step { transform: none !important; }
}

/* ------------------------------------------------------------------ */
/*  Sector tiles — "Industries served"                                 */
/* ------------------------------------------------------------------ */

.sectors { position: relative; overflow: hidden; }
.sectors__wash {
    position: absolute;
    top: -30%;
    right: -8%;
    width: min(56%, 720px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--brand-light) 55%, transparent), transparent 66%);
    filter: blur(60px);
    pointer-events: none;
}
.sectors > .wrap { position: relative; z-index: 1; }

.sector-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 1000px) { .sector-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .sector-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .sector-grid { grid-template-columns: 1fr; } }

.sector-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 92px;
    padding: 1.1rem 1.2rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: linear-gradient(160deg, var(--bg-raised),
        color-mix(in srgb, var(--blue-50) 60%, var(--bg-raised)));
    color: var(--text);
    overflow: hidden;
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
                border-color var(--t-mid) linear;
}
/* A wash of brand colour that sweeps in from the left on hover. */
.sector-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--brand-primary) 12%, transparent),
        transparent 65%);
    opacity: 0;
    transition: opacity var(--t-mid) linear;
}
.sector-tile:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--line));
    box-shadow: 0 22px 40px -26px rgba(0, 91, 179, .55);
    color: var(--text);
}
.sector-tile:hover::before { opacity: 1; }

.sector-tile__icon {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--blue-100), var(--blue-200));
    border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    color: var(--brand-primary);
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.sector-tile__icon .icon { width: 20px; height: 20px; }
.sector-tile:hover .sector-tile__icon {
    transform: translateY(-2px) scale(1.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 12px 22px -12px rgba(0, 91, 179, .65);
}

.sector-tile__name {
    position: relative;
    min-width: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.32;
    letter-spacing: -.012em;
    text-wrap: balance;
    /* Long single words wrap rather than run past the tile, but only when
       they genuinely cannot fit. */
    overflow-wrap: break-word;
}

/* The arrow waits off the edge and slides in on hover. */
/* The arrow waits off the edge and slides over the corner on hover, on its
   own soft plate — reserving a lane for it made the longest names break. */
.sector-tile__go {
    position: absolute;
    right: .7rem;
    bottom: .6rem;
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--brand-primary);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--t-mid) linear, transform var(--t-mid) var(--ease);
}
.sector-tile__go .icon { width: 16px; height: 16px; }
.sector-tile:hover .sector-tile__go { opacity: 1; transform: translateX(0); }

[data-theme="dark"] .sector-tile {
    background: linear-gradient(160deg, var(--bg-raised),
        color-mix(in srgb, var(--brand-primary) 12%, var(--bg-raised)));
}
[data-theme="dark"] .sector-tile__icon {
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--brand-secondary) 30%, transparent),
        color-mix(in srgb, var(--brand-deep) 48%, transparent));
    border-color: rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    color: var(--brand-highlight);
}
[data-theme="dark"] .sectors__wash {
    background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary) 26%, transparent), transparent 66%);
}

/* ------------------------------------------------------------------ */
/*  Supply — the division-tabbed catalogue teaser                      */
/* ------------------------------------------------------------------ */

.supply { position: relative; overflow: hidden; }
.supply__wash {
    position: absolute;
    top: -14%;
    left: 50%;
    transform: translateX(-50%);
    width: min(110%, 1300px);
    aspect-ratio: 2.6 / 1;
    background:
        radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--brand-light) 52%, transparent), transparent 62%);
    filter: blur(70px);
    pointer-events: none;
}
.supply > .wrap { position: relative; z-index: 1; }

/* Tabs as a segmented pill rail, with a marker that slides between them. */
.tabs--pills {
    position: relative;
    display: inline-flex;
    gap: .2rem;
    max-width: 100%;
    margin-inline: auto;
    padding: .35rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--bg-raised);
    box-shadow: var(--shadow-sm);
}
.section-head--centre + div .tabs--pills,
.supply .tabs--pills { display: flex; width: max-content; }
.supply .tabs-rail { display: flex; justify-content: center; }

.tabs--pills .tab {
    position: relative;
    z-index: 1;
    padding: .62rem 1.15rem;
    border-radius: var(--r-pill);
    border-bottom: 0;
    margin-bottom: 0;
    font-size: .89rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: color var(--t-mid) linear;
}
.tabs--pills .tab:hover { color: var(--text); }
.tabs--pills .tab.is-active { color: #fff; border-bottom-color: transparent; }

.tabs__marker {
    position: absolute;
    top: .35rem;
    left: 0;
    height: calc(100% - .7rem);
    border-radius: var(--r-pill);
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--i-accent, var(--brand-primary)) 88%, #fff),
        var(--i-accent, var(--brand-primary)));
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--i-accent, var(--brand-primary)) 90%, transparent);
    transition: transform .45s var(--ease), width .45s var(--ease), background .45s linear;
    pointer-events: none;
}

/* Panels fade and rise as you switch division. */
.tab-panel.is-active { animation: panel-in .45s var(--ease-out) both; }
@keyframes panel-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* --- Product cards ------------------------------------------------ */

.supply .catalog-grid { margin-top: 2.2rem; }

.supply .product-card {
    border-radius: var(--r-lg);
    background: linear-gradient(170deg, var(--bg-raised),
        color-mix(in srgb, var(--blue-50) 55%, var(--bg-raised)));
}
.supply .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 52px -30px color-mix(in srgb, var(--i-accent, var(--accent)) 70%, transparent);
}
.supply .product-card__media {
    aspect-ratio: 16 / 10;
    background:
        radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--i-accent, var(--accent)) 22%, transparent), transparent 60%),
        linear-gradient(150deg, var(--bg-sunk), color-mix(in srgb, var(--i-accent, var(--accent)) 12%, var(--bg-sunk)));
}
/* The placeholder is a pattern with the kind's glyph, not a lone icon in a
   large empty panel. */
.supply .product-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--i-accent, var(--accent)) 9%, transparent) 0 2px, transparent 2px 15px);
    opacity: .8;
}
.supply .product-card__media img ~ .product-card__kind { z-index: 2; }
.product-card__glyph {
    position: relative;
    display: grid;
    place-items: center;
    width: 62px; height: 62px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--i-accent, var(--accent)) 22%, transparent);
    box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--i-accent, var(--accent)) 80%, transparent);
    color: color-mix(in srgb, var(--i-accent, var(--accent)) 75%, transparent);
    transition: transform var(--t-mid) var(--ease);
}
.product-card__glyph .icon { width: 26px; height: 26px; }
.supply .product-card:hover .product-card__glyph { transform: translateY(-3px) scale(1.06); }

.supply .product-card__kind {
    z-index: 2;
    background: color-mix(in srgb, var(--i-accent, var(--accent)) 92%, transparent);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.supply .product-card__foot {
    align-items: center;
    border-top: 1px solid var(--line);
    margin-top: 1rem;
    padding-top: .9rem;
}
.product-card__note { font-size: .8rem; color: var(--text-faint); }
.product-card__go {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--i-accent, var(--accent));
    flex: none;
    transition: all var(--t-mid) var(--ease);
}
.product-card__go .icon { width: 16px; height: 16px; }
.supply .product-card:hover .product-card__go {
    background: var(--i-accent, var(--accent));
    border-color: var(--i-accent, var(--accent));
    color: #fff;
    transform: rotate(-45deg);
}

[data-theme="dark"] .supply .product-card {
    background: linear-gradient(170deg, var(--bg-raised),
        color-mix(in srgb, var(--i-accent, var(--accent)) 14%, var(--bg-raised)));
}
[data-theme="dark"] .supply__wash {
    background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--brand-primary) 25%, transparent), transparent 62%);
}

@media (prefers-reduced-motion: reduce) {
    .tab-panel.is-active { animation: none; }
    .tabs__marker { transition: none; }
}

/* ------------------------------------------------------------------ */
/*  Selected work                                                      */
/* ------------------------------------------------------------------ */

.work { position: relative; overflow: hidden; }
.work__wash {
    position: absolute;
    bottom: -35%;
    left: -10%;
    width: min(60%, 780px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--brand-light) 55%, transparent), transparent 66%);
    filter: blur(60px);
    pointer-events: none;
}
.work > .wrap { position: relative; z-index: 1; }

.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.1rem, 2.2vw, 1.6rem);
}
@media (max-width: 980px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .work-grid { grid-template-columns: 1fr; } }

/* The whole card is the link — no separate "View" to aim at. */
.work-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--bg-raised);
    overflow: hidden;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
                border-color var(--t-mid) linear;
}
.work-card:hover {
    transform: translateY(-6px);
    color: var(--text);
    border-color: color-mix(in srgb, var(--i-accent) 34%, var(--line));
    box-shadow: 0 32px 56px -32px color-mix(in srgb, var(--i-accent) 72%, transparent);
}
/* A thread of the division's colour along the top, drawn in on hover. */
.work-card::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    z-index: 3;
    background: linear-gradient(90deg, var(--i-accent), color-mix(in srgb, var(--i-accent) 35%, transparent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
}
.work-card:hover::after { transform: scaleX(1); }

.work-card__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--i-accent) 20%, transparent), transparent 62%),
        linear-gradient(150deg, var(--bg-sunk), color-mix(in srgb, var(--i-accent) 12%, var(--bg-sunk)));
}
.work-card__media img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
}
.work-card:hover .work-card__media img { transform: scale(1.06); }
/* Scrim, so the chips read over any photograph. */
.work-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 16, 31, .42) 0%, transparent 42%);
    opacity: .9;
}
.work-card__media--empty::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--i-accent) 9%, transparent) 0 2px, transparent 2px 15px);
}
.work-card__media--empty::after { background: none; }

.work-card__glyph {
    position: relative;
    display: grid;
    place-items: center;
    width: 66px; height: 66px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--bg-raised) 84%, transparent);
    border: 1px solid color-mix(in srgb, var(--i-accent) 22%, transparent);
    box-shadow: 0 16px 30px -20px color-mix(in srgb, var(--i-accent) 85%, transparent);
    color: color-mix(in srgb, var(--i-accent) 78%, transparent);
    transition: transform var(--t-mid) var(--ease);
}
.work-card__glyph .icon { width: 28px; height: 28px; }
.work-card:hover .work-card__glyph { transform: translateY(-3px) scale(1.06); }

/* Chips sit on the picture rather than stealing a line of the body. */
.work-card__tags {
    position: absolute;
    top: .8rem; left: .8rem; right: .8rem;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.work-card__tag {
    padding: .24rem .6rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-800);
    box-shadow: 0 4px 12px -6px rgba(5, 16, 31, .5);
}
.work-card__tag--status { color: #fff; background: var(--i-accent); }
.work-card__tag--status.is-completed { background: var(--good); }
.work-card__tag--status.is-ongoing   { background: var(--warn); }
.work-card__tag--status.is-planned   { background: var(--ink-500); }

.work-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.3rem 1.35rem 1.2rem;
}
.work-card__title {
    font-size: 1.12rem;
    line-height: 1.25;
    letter-spacing: -.015em;
    transition: color var(--t-mid) linear;
}
.work-card:hover .work-card__title { color: var(--i-accent); }
.work-card__text {
    margin-top: .55rem;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--text-muted);
}
.work-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: auto;
    padding-top: 1.1rem;
}
.work-card__meta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--text-faint);
}
.work-card__meta .icon { width: 14px; height: 14px; }
.work-card__go {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--i-accent);
    transition: all var(--t-mid) var(--ease);
}
.work-card__go .icon { width: 16px; height: 16px; }
.work-card:hover .work-card__go {
    background: var(--i-accent);
    border-color: var(--i-accent);
    color: #fff;
    transform: rotate(-45deg);
}

[data-theme="dark"] .work-card__tag { background: rgba(12, 33, 53, .9); color: #fff; }
[data-theme="dark"] .work__wash {
    background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary) 24%, transparent), transparent 66%);
}

/* ------------------------------------------------------------------ */
/*  Voices — testimonials and CSR on brand cyan                        */
/* ------------------------------------------------------------------ */

.voices {
    position: relative;
    overflow: hidden;
    color: #fff;
    /* Brand cyan reads as light, not as a ground: white body text on flat
       #00A5D5 measures 2.9:1, well under the 4.5:1 needed to be readable.
       The cyan is kept at the lit top-left corner and the surface deepens
       to navy where the copy actually sits (14:1 at the foot). */
    background:
        radial-gradient(120% 90% at 8% 0%, #00A5D5 0%, rgba(0, 165, 213, 0) 58%),
        linear-gradient(158deg, #0090C2 0%, #00618F 34%, #013D63 68%, #012E4A 100%);
}
/* Soft light from the top left and a faint grid, so the flat cyan reads as
   a lit surface rather than a slab. */
.voices::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 76px 76px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 18%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 18%, transparent 76%);
    pointer-events: none;
}
.voices__wash {
    position: absolute;
    top: -30%;
    left: -10%;
    width: min(62%, 820px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 40%, rgba(158, 213, 234, .38), transparent 60%),
        radial-gradient(circle at 72% 70%, rgba(0, 48, 134, .45), transparent 64%);
    filter: blur(80px);
    pointer-events: none;
}
.voices > .wrap { position: relative; z-index: 1; }

.voices h2 { color: #fff; }
.voices .eyebrow { color: var(--brand-highlight); }
.voices .eyebrow::before { background: var(--brand-highlight); }
.voices .lead { color: rgba(255, 255, 255, .88); }

.voices .btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .08);
}
.voices .btn--ghost:hover {
    background: #fff;
    border-color: #fff;
    color: #013D63;
}

/* --- Quotation cards ---------------------------------------------- */

.voices .quote-card {
    position: relative;
    border-radius: var(--r-lg);
    border: 1px solid rgba(255, 255, 255, .22);
    background: linear-gradient(165deg, rgba(1, 34, 56, .42), rgba(1, 24, 42, .3));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 46px -28px rgba(0, 20, 40, .9);
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
                border-color var(--t-mid) linear;
}
.voices .quote-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, .42);
    box-shadow: 0 32px 56px -30px rgba(0, 40, 70, .9);
}
.voices .quote-card__mark { color: var(--brand-highlight); opacity: .55; }
.voices .quote-card__text { color: #fff; font-size: 1rem; line-height: 1.65; }
.voices .quote-card__name { color: #fff; }
.voices .quote-card__role { color: rgba(255, 255, 255, .78); }
.voices .quote-card__avatar {
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
}

/* --- CSR items ----------------------------------------------------- */

.voices .csr-item {
    border-color: rgba(255, 255, 255, .22);
    background: linear-gradient(165deg, rgba(1, 34, 56, .4), rgba(1, 24, 42, .28));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 20px 40px -28px rgba(0, 20, 40, .9);
    overflow: hidden;
}
.voices .csr-item::after {
    content: "";
    position: absolute;
    left: 1.5rem; right: 1.5rem; top: 0;
    height: 2px;
    background: linear-gradient(90deg, #fff, rgba(255, 255, 255, .2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
}
.voices .csr-item { position: relative; }
.voices .csr-item:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, .42);
    box-shadow: 0 30px 52px -30px rgba(0, 40, 70, .9);
}
.voices .csr-item:hover::after { transform: scaleX(1); }
.voices .csr-item .icon-tile {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
    color: #fff;
    transition: transform var(--t-mid) var(--ease);
}
.voices .csr-item:hover .icon-tile { transform: translateY(-2px) scale(1.05); }
.voices .csr-item .feature__title { color: #fff; }
.voices .csr-item .feature__text { color: rgba(255, 255, 255, .84); }

@media (prefers-reduced-motion: reduce) {
    .voices .quote-card, .voices .csr-item { transform: none !important; }
}

/* ------------------------------------------------------------------ */
/*  Insights cards                                                     */
/* ------------------------------------------------------------------ */

.insights { position: relative; overflow: hidden; }
.insights__wash {
    position: absolute;
    top: -30%;
    right: -10%;
    width: min(56%, 720px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--brand-light) 60%, transparent), transparent 66%);
    filter: blur(60px);
    pointer-events: none;
}
.insights > .wrap { position: relative; z-index: 1; }

/* The whole card is the link, and it keeps the category's own colour. */
.insights .post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--bg-raised);
    overflow: hidden;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
                border-color var(--t-mid) linear;
}
.insights .post-card:hover {
    transform: translateY(-6px);
    color: var(--text);
    border-color: color-mix(in srgb, var(--i-accent) 34%, var(--line));
    box-shadow: 0 30px 54px -32px color-mix(in srgb, var(--i-accent) 70%, transparent);
}
.insights .post-card::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    z-index: 2;
    background: linear-gradient(90deg, var(--i-accent), color-mix(in srgb, var(--i-accent) 30%, transparent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
}
.insights .post-card:hover::after { transform: scaleX(1); }

.insights .post-card__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
        radial-gradient(circle at 28% 24%, color-mix(in srgb, var(--i-accent) 20%, transparent), transparent 62%),
        linear-gradient(150deg, var(--bg-sunk), color-mix(in srgb, var(--i-accent) 12%, var(--bg-sunk)));
}
.insights .post-card__media img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.insights .post-card__media--empty::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--i-accent) 9%, transparent) 0 2px, transparent 2px 15px);
}
.post-card__glyph {
    position: relative;
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-raised) 84%, transparent);
    border: 1px solid color-mix(in srgb, var(--i-accent) 22%, transparent);
    box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--i-accent) 80%, transparent);
    color: color-mix(in srgb, var(--i-accent) 75%, transparent);
    transition: transform var(--t-mid) var(--ease);
}
.post-card__glyph .icon { width: 24px; height: 24px; }
.insights .post-card:hover .post-card__glyph { transform: translateY(-3px) scale(1.06); }

/* The category rides on the picture as a chip, in its own colour. */
.post-card__cat {
    position: absolute;
    top: .8rem; left: .8rem;
    z-index: 2;
    padding: .24rem .65rem;
    border-radius: var(--r-pill);
    background: var(--i-accent);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    box-shadow: 0 6px 14px -8px rgba(5, 16, 31, .7);
}

.insights .post-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.3rem 1.35rem 1.25rem;
}
.insights .post-card__meta {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .76rem;
    color: var(--text-faint);
}
.insights .post-card__title {
    margin-top: .6rem;
    font-size: 1.08rem;
    line-height: 1.35;
    letter-spacing: -.012em;
    color: var(--text);
    transition: color var(--t-mid) linear;
}
.insights .post-card:hover .post-card__title { color: var(--i-accent); }
.post-card__text {
    margin-top: .55rem;
    font-size: .87rem;
    line-height: 1.6;
    color: var(--text-muted);
}
/* The prompt sits at the foot of every card, whatever the excerpt length. */
.post-card__more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding-top: 1.1rem;
    font-size: .84rem;
    font-weight: 600;
    color: var(--i-accent);
}
.post-card__more .icon { width: 16px; height: 16px; transition: transform var(--t-mid) var(--ease); }
.insights .post-card:hover .post-card__more .icon { transform: translateX(4px); }

[data-theme="dark"] .insights__wash {
    background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary) 24%, transparent), transparent 66%);
}

/* ------------------------------------------------------------------ */
/*  8. Stats & counters                                                */
/* ------------------------------------------------------------------ */

.stat {
    text-align: center;
    padding: 1.6rem 1rem;
}
.stat__value {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 5vw, 3.2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.035em;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.stat__label { font-size: .85rem; color: var(--text-muted); margin-top: .6rem; }
.section--ink .stat__value {
    background: linear-gradient(135deg, #fff, var(--brand-highlight));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ------------------------------------------------------------------ */
/*  9. Marquee (partners)                                              */
/* ------------------------------------------------------------------ */

.marquee {
    position: relative;
    overflow: hidden;
    padding-block: 1rem;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: marquee-run var(--marquee-speed, 46s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-run { to { transform: translateX(-50%); } }

.marquee__item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem 1.4rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--bg-raised);
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}
.marquee__item img { height: 30px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: all var(--t-mid) linear; }
.marquee__item:hover img { filter: none; opacity: 1; }
.marquee__item .icon { width: 17px; height: 17px; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
    .emblem,
    .emblem__spin,
    .emblem__core,
    .emblem__dart,
    .orbit__glow,
    .orbit__node { animation: none; }
    .hero__dot.is-active::after { animation: none; width: 100%; }
}

/* ------------------------------------------------------------------ */
/* 10. Catalogue                                                       */
/* ------------------------------------------------------------------ */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-raised);
    box-shadow: var(--shadow-xs);
}
.filter-bar__search {
    position: relative;
    flex: 1 1 240px;
    min-width: 200px;
}
.filter-bar__search .icon {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: var(--text-faint);
    pointer-events: none;
}
.filter-bar__search .input { padding-left: 2.6rem; }
.filter-bar__group { display: flex; gap: .4rem; flex-wrap: wrap; }

.catalog-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

.product-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-raised);
    overflow: hidden;
    transition: all var(--t-mid) var(--ease);
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--i-accent, var(--accent)) 40%, var(--line)); }
.product-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(140deg, var(--bg-sunk), color-mix(in srgb, var(--i-accent, var(--accent)) 10%, var(--bg-sunk)));
    display: grid;
    place-items: center;
    overflow: hidden;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__media .icon { width: 40px; height: 40px; color: color-mix(in srgb, var(--i-accent, var(--accent)) 55%, transparent); }
.product-card__kind {
    position: absolute;
    top: .7rem; left: .7rem;
    padding: .2rem .6rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .92);
    color: var(--ink-800);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.product-card__body { padding: 1.1rem; display: flex; flex-direction: column; flex: 1; }
.product-card__cat { font-size: .72rem; color: var(--i-accent, var(--accent)); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.product-card__title { font-size: 1rem; font-family: var(--font-display); font-weight: 600; margin-top: .4rem; line-height: 1.35; }
.product-card__text { font-size: .82rem; color: var(--text-muted); margin-top: .45rem; line-height: 1.55; }
.product-card__foot {
    margin-top: auto;
    padding-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .8rem;
}

.spec-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.spec-list__row {
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr;
    gap: 1rem;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--line);
    font-size: .88rem;
}
.spec-list__row:last-child { border-bottom: 0; }
.spec-list__row:nth-child(odd) { background: var(--bg-sunk); }
.spec-list__label { color: var(--text-faint); font-weight: 500; }
.spec-list__value { color: var(--text); font-weight: 500; }

/* ------------------------------------------------------------------ */
/* 11. Sticky section nav (division & product pages)                   */
/* ------------------------------------------------------------------ */

.section-nav {
    position: sticky;
    top: var(--header-h);
    z-index: 60;
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.section-nav__inner {
    display: flex;
    gap: .3rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: .55rem;
}
.section-nav__inner::-webkit-scrollbar { display: none; }
.section-nav__link {
    padding: .5rem .95rem;
    border-radius: var(--r-pill);
    font-size: .86rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    transition: all var(--t-fast) var(--ease);
}
.section-nav__link:hover { background: var(--bg-sunk); color: var(--text); }
.section-nav__link.is-active { background: var(--accent); color: #fff; }

.sticky-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }

/* ------------------------------------------------------------------ */
/* 12. Accordion & tabs                                                */
/* ------------------------------------------------------------------ */

.accordion { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--bg-raised); }
.accordion__item + .accordion__item { border-top: 1px solid var(--line); }
.accordion__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.15rem 1.3rem;
    background: none;
    border: 0;
    text-align: left;
    font-size: .98rem;
    font-weight: 600;
    font-family: var(--font-display);
    color: var(--text);
    cursor: pointer;
    transition: background var(--t-fast) linear;
}
.accordion__btn:hover { background: var(--bg-sunk); }
.accordion__btn .icon { flex: none; width: 20px; height: 20px; color: var(--accent); transition: transform var(--t-mid) var(--ease); }
.accordion__btn[aria-expanded="true"] .icon { transform: rotate(45deg); }
.accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--t-mid) var(--ease);
}
.accordion__panel > div { overflow: hidden; }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__body { padding: 0 1.3rem 1.3rem; color: var(--text-muted); font-size: .92rem; line-height: 1.7; }

.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
    padding: .8rem 1.1rem;
    border: 0;
    background: none;
    font-size: .92rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all var(--t-fast) linear;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-panel { display: none; padding-top: 1.8rem; }
.tab-panel.is-active { display: block; animation: fade-up .45s var(--ease-out) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ */
/* 13. Testimonials                                                    */
/* ------------------------------------------------------------------ */

.quote-card {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.9rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--bg-raised);
    position: relative;
    overflow: hidden;
}
.quote-card::before {
    content: "";
    position: absolute;
    top: -10px; right: 12px;
    font-size: 7rem;
    line-height: 1;
    font-family: var(--font-display);
    color: var(--accent);
    opacity: .09;
}
.quote-card__mark { color: var(--accent); opacity: .35; }
.quote-card__mark .icon { width: 32px; height: 32px; }
.quote-card__text { font-size: 1.02rem; line-height: 1.7; color: var(--text); }
.quote-card__by { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.quote-card__avatar {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
    font-size: .9rem;
    flex: none;
    overflow: hidden;
}
.quote-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote-card__name { font-weight: 600; font-size: .92rem; }
.quote-card__role { font-size: .8rem; color: var(--text-muted); }
.stars { display: flex; gap: .15rem; color: #E8A33D; }
.stars .icon { width: 16px; height: 16px; fill: currentColor; }

/* ------------------------------------------------------------------ */
/* 14. Timeline                                                        */
/* ------------------------------------------------------------------ */

.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
    content: "";
    position: absolute;
    left: 7px; top: .6rem; bottom: .6rem;
    width: 2px;
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 12%, transparent));
    border-radius: 2px;
}
.timeline__item { position: relative; padding-bottom: 2rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
    content: "";
    position: absolute;
    left: -2rem;
    top: .35rem;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--bg);
    border: 3px solid var(--accent);
}
.timeline__year {
    font-family: var(--font-mono);
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
}
.timeline__title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-top: .3rem; }
.timeline__text { font-size: .88rem; color: var(--text-muted); margin-top: .35rem; line-height: 1.6; }

/* ------------------------------------------------------------------ */
/* 15. CTA band                                                        */
/* ------------------------------------------------------------------ */

.cta-band {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    padding: clamp(2.2rem, 5vw, 4rem);
    background:
        radial-gradient(90% 120% at 88% 8%, rgba(0, 165, 213, .55), transparent 58%),
        linear-gradient(135deg, var(--brand-deep), var(--brand-primary) 58%, #0089BE);
    color: #fff;
    isolation: isolate;
    box-shadow: 0 40px 80px -50px rgba(0, 48, 134, .95);
}
/* A pool of light that follows the pointer across the panel (Spotlight in
   app.js sets --mx / --my; the centred default is what everyone else sees). */
.cta-band__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(340px 340px at var(--mx, 78%) var(--my, 18%),
        rgba(255, 255, 255, .22), transparent 68%);
    opacity: 0;
    transition: opacity .5s var(--ease);
    pointer-events: none;
}
.cta-band:hover .cta-band__glow { opacity: 1; }
.cta-band::before {
    content: "";
    position: absolute;
    inset: -40% -10% auto auto;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.18), transparent 65%);
    z-index: -1;
}
/* Concentric arcs, echoing the mark, drifting slowly. */
.cta-band::after {
    content: "";
    position: absolute;
    inset: auto auto -52% -10%;
    width: 420px; height: 420px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    box-shadow: 0 0 0 60px rgba(255, 255, 255, .05),
                0 0 0 120px rgba(255, 255, 255, .035);
    z-index: -1;
    animation: cta-drift 16s var(--ease) infinite;
}
@keyframes cta-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(3%, -3%, 0) scale(1.05); }
}

.cta-band__eyebrow { color: var(--brand-highlight); }
.cta-band__eyebrow::before { background: var(--brand-highlight); }
.cta-band__lead { color: rgba(255, 255, 255, .84); max-width: 46ch; }

/* Reassurances, so the panel answers "what happens if I write in?" */
.cta-band__points {
    display: grid;
    gap: .55rem;
    margin-top: 1.6rem;
    padding: 0;
    list-style: none;
}
.cta-band__points li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .89rem;
    color: rgba(255, 255, 255, .9);
}
.cta-band__points .icon { width: 18px; height: 18px; color: var(--brand-highlight); flex: none; }

.cta-band__actions { display: grid; gap: .8rem; justify-items: stretch; }

/* One clear primary; the second action is an outline, not a twin. */
.cta-band__primary {
    background: #fff;
    border-color: #fff;
    color: var(--brand-deep);
    box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .55);
}
.cta-band__primary:hover {
    background: var(--brand-highlight);
    border-color: var(--brand-highlight);
    color: var(--brand-deep);
    transform: translateY(-2px);
}
.cta-band__primary .icon { transition: transform var(--t-mid) var(--ease); }
.cta-band__primary:hover .icon { transform: translateX(4px); }

.cta-band__ghost {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.cta-band__ghost:hover {
    background: rgba(255, 255, 255, .2);
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
}

/* Straight-to-a-human links under the buttons. */
.cta-band__direct {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: .5rem;
    justify-content: center;
}
.cta-band__direct a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
    transition: color var(--t-fast) linear;
}
.cta-band__direct a:hover { color: #fff; }
.cta-band__direct .icon { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
    .cta-band::after { animation: none; }
    .cta-band__glow { display: none; }
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .82); }
.cta-band__inner {
    display: grid;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 860px) {
    .cta-band__inner { grid-template-columns: 1.4fr auto; }
}

/* ------------------------------------------------------------------ */
/* 16. Insights                                                        */
/* ------------------------------------------------------------------ */

.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-sunk); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__meta {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .76rem;
    color: var(--text-faint);
}
.post-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.post-card__title { font-size: 1.08rem; font-family: var(--font-display); font-weight: 600; line-height: 1.35; margin-top: .6rem; }
.post-card__title a { color: var(--text); }
.post-card:hover .post-card__title a { color: var(--brand-primary); }

.post-hero__media {
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 21 / 9;
    background: var(--bg-sunk);
}
.post-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ */
/* 17. Contact                                                         */
/* ------------------------------------------------------------------ */

.contact-card {
    display: flex;
    gap: 1rem;
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-raised);
    transition: all var(--t-mid) var(--ease);
}
.contact-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.contact-card__label { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); font-weight: 600; }
.contact-card__value { font-weight: 600; margin-top: .3rem; word-break: break-word; }
.contact-card__value a { color: var(--text); }
.contact-card__value a:hover { color: var(--accent); }

.map-frame {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    aspect-ratio: 16 / 9;
    background: var(--bg-sunk);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------------ */
/* 18. Quotation wizard                                                */
/* ------------------------------------------------------------------ */

.wizard { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-raised); overflow: hidden; box-shadow: var(--shadow-sm); }
.wizard__steps {
    display: flex;
    border-bottom: 1px solid var(--line);
    background: var(--bg-sunk);
    overflow-x: auto;
    scrollbar-width: none;
}
.wizard__steps::-webkit-scrollbar { display: none; }
.wizard__step {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.2rem;
    font-size: .85rem;
    color: var(--text-faint);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    flex: 1;
    min-width: max-content;
}
.wizard__step-no {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: .78rem;
    font-weight: 600;
    flex: none;
}
.wizard__step.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.wizard__step.is-done { color: var(--good); }
.wizard__step.is-done .wizard__step-no { background: var(--good); border-color: var(--good); color: #fff; }
.wizard__panel { display: none; padding: clamp(1.4rem, 3.5vw, 2.4rem); }
.wizard__panel.is-active { display: block; animation: fade-up .4s var(--ease-out) both; }
.wizard__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem clamp(1.4rem, 3.5vw, 2.4rem);
    border-top: 1px solid var(--line);
    background: var(--bg-sunk);
}

.line-items { display: grid; gap: .7rem; }
.line-item {
    display: grid;
    gap: .6rem;
    grid-template-columns: 1fr;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg-sunk);
    align-items: end;
}
@media (min-width: 720px) {
    .line-item { grid-template-columns: 1fr 110px 130px 44px; }
}
.line-item__remove {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--bg-raised);
    color: var(--bad);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
}
.line-item__remove:hover { background: var(--bad); color: #fff; border-color: var(--bad); }

/* Client-facing quotation document */
.quote-doc {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-raised);
    overflow: hidden;
}
.quote-doc__head {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-between;
    padding: clamp(1.4rem, 3vw, 2.2rem);
    background: linear-gradient(120deg, var(--brand-deep), var(--brand-primary));
    color: #fff;
}
.quote-doc__ref { font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: .04em; }
.quote-doc__body { padding: clamp(1.4rem, 3vw, 2.2rem); }
.totals { margin-left: auto; width: min(100%, 380px); }
.totals__row {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: .55rem 0;
    font-size: .9rem;
    color: var(--text-muted);
}
.totals__row--grand {
    border-top: 2px solid var(--text);
    margin-top: .5rem;
    padding-top: .85rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    font-family: var(--font-display);
}
.totals__row .num { font-family: var(--font-mono); }

/* ------------------------------------------------------------------ */
/* 19. Careers                                                         */
/* ------------------------------------------------------------------ */

.job-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-raised);
    transition: all var(--t-mid) var(--ease);
}
.job-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateX(5px); box-shadow: var(--shadow-sm); }
.job-card__main { flex: 1 1 260px; }
.job-card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; }
.job-card__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .5rem; font-size: .8rem; color: var(--text-muted); }
.job-card__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.job-card__meta .icon { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ */
/* 20. Floating actions & footer                                       */
/* ------------------------------------------------------------------ */

.float-actions {
    position: fixed;
    right: clamp(.9rem, 2.5vw, 1.6rem);
    bottom: clamp(.9rem, 2.5vw, 1.6rem);
    z-index: 800;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.float-btn {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 0;
    color: #fff;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: transform var(--t-mid) var(--ease), opacity var(--t-mid) linear;
}
.float-btn:hover { transform: scale(1.08) translateY(-2px); color: #fff; }
.float-btn .icon { width: 25px; height: 25px; }
.float-btn--wa { background: #25D366; }
.float-btn--top { background: var(--brand-primary); opacity: 0; pointer-events: none; }
.float-btn--top.is-visible { opacity: 1; pointer-events: auto; }

.site-foot {
    position: relative;
    overflow: hidden;
    padding-top: clamp(3.2rem, 6vw, 5rem);
    color: rgba(255, 255, 255, .72);
    background: linear-gradient(180deg, #041B36 0%, var(--ink-950) 55%, #030C18 100%);
}
/* A thread of brand colour along the very top edge. */
.site-foot::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brand-primary), var(--brand-secondary), transparent);
    opacity: .7;
}
/* Faint grid, faded out towards the edges. */
.site-foot::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 74px 74px;
    mask-image: radial-gradient(ellipse 76% 70% at 50% 20%, #000 12%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 76% 70% at 50% 20%, #000 12%, transparent 76%);
    pointer-events: none;
}
.site-foot__glow {
    position: absolute;
    top: -46%;
    right: -12%;
    width: min(60%, 720px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 42%, rgba(0, 165, 213, .3), transparent 60%),
        radial-gradient(circle at 70% 68%, rgba(0, 48, 134, .5), transparent 62%);
    filter: blur(70px);
    pointer-events: none;
}
.site-foot > .wrap { position: relative; z-index: 1; }
.site-foot h4 {
    color: #fff;
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-family: var(--font-mono);
    font-weight: 500;
    margin-bottom: 1.1rem;
}
.site-foot a { color: rgba(255, 255, 255, .68); }
.site-foot a:hover { color: #fff; }

.foot-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
    position: relative;
}
@media (min-width: 700px)  { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }

/* Column links slide a little and brighten, with a brand tick appearing in
   the space they leave. */
.foot-list { display: flex; flex-direction: column; gap: .15rem; font-size: .88rem; }
.foot-list a {
    position: relative;
    padding: .35rem 0 .35rem 0;
    width: fit-content;
    transition: color var(--t-fast) linear, transform var(--t-mid) var(--ease), padding-left var(--t-mid) var(--ease);
}
.foot-list a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px; height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--brand-secondary);
    opacity: 0;
    transform: scale(.4);
    transition: opacity var(--t-mid) linear, transform var(--t-mid) var(--ease);
}
.foot-list a:hover { color: #fff; padding-left: 1rem; }
.foot-list a:hover::before { opacity: 1; transform: scale(1); }

/* Contact rows: an icon chip, the main line, and the secondary line under it. */
.foot-contact { display: grid; gap: .9rem; font-style: normal; font-size: .88rem; }
.foot-contact__row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .72);
    transition: color var(--t-fast) linear;
}
a.foot-contact__row:hover { color: #fff; }
.foot-contact__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    color: var(--brand-highlight);
    transition: all var(--t-mid) var(--ease);
}
.foot-contact__icon .icon { width: 16px; height: 16px; }
a.foot-contact__row:hover .foot-contact__icon {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    transform: translateY(-2px);
}
.foot-contact em {
    display: block;
    font-style: normal;
    font-size: .82rem;
    color: rgba(255, 255, 255, .5);
}
.foot-brand img { height: 54px; width: auto; margin-bottom: 1.1rem; }
.foot-brand p { font-size: .88rem; line-height: 1.7; max-width: 34ch; }
.foot-tag { color: #fff; font-weight: 600; margin-top: 1rem; font-size: .9rem; display: block; }

/* The field and its button read as one control. */
.newsletter { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.newsletter .input {
    flex: 1 1 180px;
    padding: .8rem 1rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
    transition: all var(--t-mid) var(--ease);
}
.newsletter .input::placeholder { color: rgba(255, 255, 255, .45); }
.newsletter .input:focus {
    background: rgba(255, 255, 255, .1);
    border-color: var(--brand-secondary);
    box-shadow: 0 0 0 4px rgba(0, 165, 213, .18);
}
.newsletter .btn {
    flex: none;
    width: 46px; height: 46px;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--brand-secondary), var(--brand-primary));
    border-color: transparent;
}
.newsletter .btn:hover { transform: translateY(-2px) scale(1.04); }
.newsletter .btn .icon { width: 18px; height: 18px; }

.foot-socials { display: flex; gap: .5rem; margin-top: 1.4rem; }
.foot-socials a {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    transition: all var(--t-fast) var(--ease);
}
.foot-socials a:hover {
    background: linear-gradient(140deg, var(--brand-secondary), var(--brand-primary));
    border-color: transparent;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 22px -12px rgba(0, 165, 213, .9);
}
.foot-socials .icon { width: 17px; height: 17px; }

.foot-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-block: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .8rem;
}
.foot-legal__links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.foot-legal__links a {
    position: relative;
    padding-bottom: 2px;
}
.foot-legal__links a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--brand-secondary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--t-mid) var(--ease);
}
.foot-legal__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.foot-tag {
    color: #fff;
    font-weight: 600;
    margin-top: 1rem;
    font-size: .9rem;
    display: block;
    background: linear-gradient(100deg, #fff, var(--brand-highlight));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ------------------------------------------------------------------ */
/* 21. Lightbox & gallery                                              */
/* ------------------------------------------------------------------ */

.gallery-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.gallery-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: zoom-in;
    background: var(--bg-sunk);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.gallery-item:hover img { transform: scale(1.07); }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: rgba(5, 16, 31, .93);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-mid) linear, visibility var(--t-mid);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(100%, 1100px); max-height: 84vh; border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.lightbox__close {
    position: absolute;
    top: 1.2rem; right: 1.2rem;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.lightbox__caption { color: rgba(255, 255, 255, .8); font-size: .88rem; margin-top: 1rem; text-align: center; }

/* ------------------------------------------------------------------ */
/* 22. Empty state & misc                                              */
/* ------------------------------------------------------------------ */

.empty {
    display: grid;
    place-items: center;
    gap: .8rem;
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--bg-sunk);
}
.empty .icon-tile { margin-bottom: .4rem; }
.empty__title { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.empty__text { color: var(--text-muted); font-size: .9rem; max-width: 46ch; }

.note {
    display: flex;
    gap: .85rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--r-md);
    border: 1px solid var(--warn);
    border-left-width: 3px;
    background: var(--warn-soft);
    color: var(--warn);
    font-size: .88rem;
    line-height: 1.6;
}
.note .icon { flex: none; width: 20px; height: 20px; }
.note strong { display: block; margin-bottom: .2rem; }

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}
.pager__step {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: .88rem;
    font-weight: 500;
    color: var(--text);
    background: var(--bg-raised);
    transition: all var(--t-fast) var(--ease);
}
.pager__step:hover { border-color: var(--accent); color: var(--accent); }
.pager__step.is-disabled { opacity: .4; pointer-events: none; }
.pager__count { font-size: .84rem; color: var(--text-muted); }

.divider-orbit {
    display: grid;
    place-items: center;
    padding-block: 1.5rem;
    color: var(--line-strong);
}
.divider-orbit svg { width: 46px; height: 46px; }

/* Error page */
.error-page {
    display: grid;
    place-items: center;
    min-height: 62vh;
    text-align: center;
    padding-block: 4rem;
}
.error-page__code {
    font-family: var(--font-display);
    font-size: clamp(5rem, 18vw, 11rem);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.05em;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}