/*
   Artha WearTech - site chrome and page sections.
   Loads after design-system.css, which supplies the tokens and primitives.
*/

/* =========================================================== header ==== */

.header {
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-bar {
    border-bottom: 1px solid transparent;
    background: rgb(255 255 255 / 0.92);
    backdrop-filter: blur(16px);
    transition: box-shadow 0.3s, border-color 0.3s;
}

.header-bar.is-scrolled {
    border-color: var(--border-color);
    box-shadow: 0 2px 20px -6px rgb(11 16 32 / 0.16);
}

.header-inner {
    display: flex;
    height: var(--header-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.brand {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.625rem;
}

.brand img {
    /* The trimmed file has no transparent padding, so this height is the
       artwork itself rather than a third of it. */
    height: 2.375rem;
    width: auto;
}

@media (min-width: 1024px) {
    .brand img { height: 2.75rem; }
}

.brand-accent {
    color: var(--wt-brand-500);
}

.header-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
}

.header-quote {
    display: none;
}

@media (min-width: 640px) {
    .header-quote { display: inline-flex; }
}

.drawer-toggle {
    border: 0;
    background: none;
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    color: var(--wt-ink-900);
    cursor: pointer;
    transition: background-color 0.18s;
}

.drawer-toggle:hover {
    background: var(--bg-tertiary);
}

.drawer-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

@media (min-width: 1280px) {
    .drawer-toggle { display: none; }
}

/* ============================================================== nav ==== */

.nav {
    display: none;
    align-items: center;
}

@media (min-width: 1280px) {
    .nav { display: flex; }
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--wt-steel-700);
    transition: color 0.18s;
}

.nav-link:hover {
    color: var(--wt-ink-900);
}

.nav-link.is-active {
    color: var(--wt-brand-600);
}

.nav-link svg {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.2s;
}

.nav-item.is-open .nav-link svg {
    transform: rotate(180deg);
}

.nav-panel {
    position: absolute;
    left: 0;
    top: 100%;
    padding-top: var(--space-2);
    display: none;
}

.nav-item.is-open .nav-panel,
.nav-item:focus-within .nav-panel {
    display: block;
}

/* ------------------------------------------------------- mega menu ---- */

/* The panel is anchored to the shell rather than to its trigger, so a wide
   menu stays inside the page gutters instead of running off the right edge. */
.nav-panel {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: var(--header-height);
    padding-top: var(--space-2);
    width: min(76rem, calc(100vw - 2 * var(--space-6)));
}

/* A menu with no second level has far less to show, so it gets a tighter
   panel rather than a wide one padded out with whitespace. */
.nav-panel-narrow {
    width: min(58rem, calc(100vw - 2 * var(--space-6)));
}

.nav-panel-narrow .nav-feature-media {
    aspect-ratio: 16 / 7;
}

/* Short menus leave the rail taller than the list beside it; centring the
   list spreads that difference instead of stacking it under the items. */
.nav-panel-narrow .nav-mega-cols {
    align-content: center;
}

.nav-mega {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    background: #fff;
    box-shadow: var(--shadow-menu);
}

@media (min-width: 1100px) {
    .nav-mega:has(.nav-feature) {
        grid-template-columns: minmax(0, 1fr) 19rem;
    }
}

/* Columns on top, a full-width "see all" rail underneath, so the left side
   fills the height the feature panel sets rather than trailing off in white. */
.nav-mega-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: var(--space-5);
}

.nav-mega-cols {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: var(--space-2) var(--space-5);
    align-content: start;
}

.nav-mega-foot {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.375rem;
    margin-top: var(--space-4);
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-3);
    width: 100%;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--wt-brand-600);
}

.nav-mega-foot svg {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.2s;
}

.nav-mega-foot:hover svg {
    transform: translateX(3px);
}

.nav-col {
    min-width: 0;
}

/* Column heading. Doubles as the link to the family's own page, which is why
   it carries an arrow rather than sitting there as a dead label. */
.nav-col-head {
    display: flex;
    align-items: flex-end;
    gap: 0.375rem;
    /* Tall enough for a two-line heading, so every column's first row lines
       up even when some headings wrap and others do not. */
    min-height: 3.25rem;
    margin-bottom: var(--space-2);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--wt-brand-600);
    transition: color 0.18s, border-color 0.18s;
}

.nav-col-head svg {
    width: 0.8125rem;
    height: 0.8125rem;
    flex: none;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 0.18s, transform 0.18s;
}

.nav-col-head:hover {
    border-color: var(--wt-brand-300);
}

.nav-col-head:hover svg {
    opacity: 1;
    transform: none;
}

.nav-col-head-plain {
    color: var(--wt-steel-500);
    cursor: default;
}

/* One catalogue entry: name on top, one line of plain English under it. */
.nav-cell {
    display: block;
    border-radius: var(--radius-md);
    padding: 0.5rem var(--space-3) 0.5rem 0.625rem;
    margin-left: -0.625rem;
    transition: background-color 0.18s;
}

.nav-cell:hover {
    background: var(--wt-brand-50);
}

.nav-cell-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--wt-ink-900);
    transition: color 0.18s;
}

.nav-cell:hover .nav-cell-label {
    color: var(--wt-brand-600);
}

.nav-cell-blurb {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-tertiary);
}

/* A cell sitting straight in the grid rather than under a column heading. */
.nav-cell-solo {
    margin-left: 0;
    padding-left: var(--space-3);
}

/* -------------------------------------------------- featured rail ---- */

.nav-feature {
    display: none;
    border-left: 1px solid var(--border-color);
    background: var(--bg-secondary);
    padding: var(--space-5);
}

@media (min-width: 1100px) {
    .nav-feature { display: block; }
}

.nav-feature-media {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-lg);
    aspect-ratio: 16 / 9;
    margin-bottom: var(--space-4);
}

.nav-feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-feature-eyebrow {
    display: inline-block;
    border-radius: var(--radius-pill);
    background: var(--wt-brand-100);
    padding: 0.1875rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wt-brand-700);
}

.nav-feature-title {
    margin-top: var(--space-3);
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--wt-ink-900);
}

.nav-feature-body {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.nav-feature-cta {
    margin-top: var(--space-4);
    width: 100%;
}

/* --------------------------------------------------------- drawer ---- */

.drawer {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
}

.drawer.is-open {
    display: block;
}

@media (min-width: 1280px) {
    .drawer.is-open { display: none; }
}

.drawer-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgb(7 10 18 / 0.6);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.drawer-panel {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    height: 100%;
    width: min(88vw, 380px);
    flex-direction: column;
    background: #fff;
    box-shadow: -12px 0 40px -12px rgb(11 16 32 / 0.35);
}

.drawer-head {
    display: flex;
    height: var(--header-height);
    flex: none;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    padding-inline: var(--space-5);
}

.drawer-head-name {
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.drawer-close {
    border: 0;
    background: none;
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    cursor: pointer;
}

.drawer-close:hover {
    background: var(--bg-tertiary);
}

.drawer-close svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

.drawer-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-3);
}

.drawer-group + .drawer-group {
    border-top: 1px solid var(--wt-steel-100);
}

.drawer-group-head {
    display: flex;
    align-items: center;
}

.drawer-group-link {
    flex: 1;
    padding: var(--space-3) var(--space-2);
    font-size: var(--type-body);
    font-weight: 600;
    color: var(--wt-ink-900);
}

.drawer-group-link.is-active {
    color: var(--wt-brand-600);
}

.drawer-accordion {
    border: 0;
    background: none;
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    color: var(--text-tertiary);
    cursor: pointer;
}

.drawer-accordion:hover {
    background: var(--bg-tertiary);
}

.drawer-accordion svg {
    width: 1rem;
    height: 1rem;
    display: block;
    transition: transform 0.2s;
}

.drawer-accordion[aria-expanded='true'] svg {
    transform: rotate(180deg);
}

.drawer-panel-list {
    display: none;
    padding-bottom: var(--space-3);
    padding-left: var(--space-3);
}

.drawer-panel-list.is-open {
    display: block;
}

.drawer-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wt-steel-700);
}

.drawer-child:hover {
    background: var(--wt-brand-50);
    color: var(--wt-brand-600);
}

.drawer-child-arrow {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
    color: var(--wt-steel-400);
}

.drawer-child:hover .drawer-child-arrow {
    color: var(--wt-brand-600);
}

/* The level below a drawer entry: same cells as the desktop mega menu, rule
   marked so it reads as sitting inside its parent. */
.drawer-sub {
    margin: 0.125rem 0 var(--space-3) var(--space-2);
    border-left: 2px solid var(--wt-brand-200);
    padding-left: 0.625rem;
}

.drawer-sub .nav-cell {
    margin-left: 0;
    padding: 0.375rem 0.5rem;
}

.drawer-foot {
    flex: none;
    border-top: 1px solid var(--border-color);
    padding: var(--space-5);
}

.drawer-foot > * + * {
    margin-top: var(--space-3);
}

.drawer-phone {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--type-body-sm);
    color: var(--text-secondary);
}

.drawer-phone svg {
    width: 1rem;
    height: 1rem;
    color: var(--wt-brand-500);
}

.drawer-phone strong {
    color: var(--wt-ink-900);
}

/* ============================================================ hero ==== */

.hero {
    position: relative;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.14;
}

.hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(242 247 255 / 0.97), rgb(240 246 255 / 0.88) 45%, rgb(233 241 251 / 0.5));
}

.hero-inner {
    position: relative;
    display: grid;
    align-items: center;
    gap: var(--space-12);
    padding-block: var(--space-20);
}

@media (min-width: 1024px) {
    .hero-inner {
        grid-template-columns: 7fr 5fr;
        padding-block: 7rem;
    }
}

.hero-rule {
    display: block;
    width: 3.75rem;
    height: 4px;
    border-radius: 2px;
    background: #d22630;
}

.hero .hero-title {
    margin-top: var(--space-5);
    max-width: 40rem;
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: #14295c;
}

.hero-title-accent {
    display: block;
    color: var(--wt-brand-600);
}

.hero-lede {
    margin-top: var(--space-6);
    max-width: 36rem;
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    line-height: 1.65;
    color: var(--wt-steel-600);
}

.hero-ctas {
    margin-top: 2.25rem;
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) 1.75rem;
    margin-top: var(--space-10);
}

.hero-proof li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--wt-steel-600);
}

.hero-proof svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--wt-brand-500);
}

.hero-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.hero-tile {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    padding: var(--space-5);
}

.hero-tile-bg {
    position: absolute;
    inset: 0;
    opacity: 0.14;
    transition: opacity 0.5s;
}

.hero-tile:hover .hero-tile-bg {
    opacity: 0.26;
}

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

.hero-tile-body {
    position: relative;
}

.hero-tile-name {
    font-size: var(--type-body);
    font-weight: 700;
    color: var(--wt-ink-900);
}

.hero-tile-desc {
    margin-top: 0.375rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--wt-steel-600);
}

.hero-tile-cta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: var(--space-4);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wt-brand-600);
}

.hero-tile-cta svg {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.3s;
}

.hero-tile:hover .hero-tile-cta svg {
    transform: translateX(4px);
}

/* ------------------------------------------------------- page hero ---- */

.page-hero {
    position: relative;
    overflow: hidden;
}

.page-hero-inner {
    position: relative;
    padding-block: var(--space-16);
}

@media (min-width: 768px) {
    .page-hero-inner { padding-block: var(--space-20); }
}

@media (min-width: 1024px) {
    .page-hero-inner { padding-block: 6rem; }
}

.page-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.13;
}

.page-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(242 247 255 / 0.96), rgb(240 246 255 / 0.87) 50%, rgb(233 241 251 / 0.58));
}

.page-hero-title {
    margin-top: var(--space-4);
    max-width: 56rem;
    font-size: var(--type-hero);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.028em;
    color: var(--wt-ink-900);
}

.page-hero-lede {
    margin-top: var(--space-5);
    max-width: 42rem;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.65;
    color: var(--wt-steel-600);
}

.page-hero-extra {
    margin-top: var(--space-8);
}

.page-hero-centered {
    text-align: center;
}

.page-hero-centered .page-hero-title,
.page-hero-centered .page-hero-lede {
    margin-inline: auto;
}

.page-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-6);
}

.page-hero-fact-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wt-steel-500);
}

.page-hero-fact-value {
    margin-top: 0.375rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wt-ink-900);
}

/* ----------------------------------------------------- breadcrumbs ---- */

.breadcrumbs {
    margin-bottom: var(--space-6);
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.78rem;
    color: var(--wt-steel-500);
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.breadcrumbs a:hover {
    color: var(--wt-brand-600);
}

.breadcrumbs-sep {
    color: var(--wt-steel-300);
}

.breadcrumbs-current {
    color: var(--wt-steel-700);
}

.page-hero-centered .breadcrumbs ol {
    justify-content: center;
}

/* =================================================== section header ==== */

.section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

@media (min-width: 1024px) {
    .section-head-cta {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.section-head-copy {
    max-width: 42rem;
}

.section-head-centered {
    align-items: center;
    text-align: center;
}

.section-head-centered .section-head-copy {
    max-width: 48rem;
}

.section-head h2 {
    margin-top: var(--space-4);
    color: var(--wt-ink-900);
}

.surface-ink .section-head h2 {
    color: #fff;
}

.section-head .lede {
    margin-top: var(--space-4);
}

.section-body {
    margin-top: var(--space-12);
}

.section-body-tight {
    margin-top: var(--space-10);
}

/* ===================================================== tile / segment == */

.segment-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-xl);
    aspect-ratio: 4 / 5;
}

.segment-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-out-expo);
}

.segment-tile:hover img {
    transform: scale(1.07);
}

.segment-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, var(--wt-ink-950), rgb(7 10 18 / 0.4) 45%, transparent);
}

.segment-body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: var(--space-5);
}

.segment-kicker {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wt-brand-400);
}

.segment-title {
    margin-top: 0.375rem;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.segment-desc {
    margin-top: 0.375rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--wt-steel-300);
}

.segment-cta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: var(--space-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wt-brand-400);
    opacity: 0;
    transition: opacity 0.3s;
}

.segment-tile:hover .segment-cta {
    opacity: 1;
}

.segment-cta svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* ==================================================== resource card ==== */

.resource-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.resource-media {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--bg-tertiary);
    aspect-ratio: 16 / 9;
}

.resource-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out-expo);
}

.resource-card:hover .resource-media img {
    transform: scale(1.06);
}

.resource-media-scrim {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 66%;
    background: linear-gradient(0deg, rgb(7 10 18 / 0.8), transparent);
}

.resource-industry {
    position: absolute;
    left: var(--space-3);
    top: var(--space-3);
    border-radius: var(--radius-sm);
    background: rgb(255 255 255 / 0.95);
    padding: 0.25rem 0.625rem;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wt-ink-900);
    backdrop-filter: blur(4px);
}

.resource-stat {
    position: absolute;
    inset-inline: var(--space-3);
    bottom: var(--space-3);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}

.resource-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-5);
}

.resource-format {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--wt-steel-400);
}

.resource-format svg {
    width: 0.75rem;
    height: 0.75rem;
}

/* ======================================================== cta band ==== */

.cta-band {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    padding: var(--space-12) 1.75rem;
}

@media (min-width: 768px) {
    .cta-band { padding: var(--space-16) var(--space-12); }
}

.cta-band-body {
    position: relative;
    max-width: 42rem;
}

.cta-band h2 {
    font-size: var(--type-subsection);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.026em;
    color: #fff;
}

.cta-band p {
    margin-top: var(--space-4);
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--wt-steel-400);
}

.cta-band .cluster {
    margin-top: var(--space-8);
}

/* ==================================================== testimonials ==== */

.testimonial-panel {
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: var(--radius-2xl);
    background: rgb(255 255 255 / 0.04);
    padding: 1.75rem;
    backdrop-filter: blur(8px);
}

@media (min-width: 768px) {
    .testimonial-panel { padding: var(--space-10); }
}

.slider-quote-icon {
    width: 2.5rem;
    height: 2.5rem;
    color: rgb(0 112 224 / 0.3);
}

.slider-quote {
    margin-top: var(--space-5);
    min-height: 8.5rem;
}

.slider-quote p {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.015em;
    color: #fff;
}

.slider-attribution {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: 1.75rem;
}

.slider-logo {
    display: flex;
    min-width: 3.5rem;
    max-width: 8rem;
    height: 3.5rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: #fff;
    padding: var(--space-2);
}

.slider-logo img {
    max-height: 2.5rem;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.slider-company {
    font-size: var(--type-body);
    font-weight: 700;
    color: #fff;
}

.slider-sector {
    font-size: var(--type-caption);
    color: var(--wt-steel-400);
}

.slider-dots {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-8);
}

.slider-dot {
    height: 4px;
    width: 1.25rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.25);
    cursor: pointer;
    transition: all 0.3s;
}

.slider-dot:hover {
    background: rgb(255 255 255 / 0.45);
}

.slider-dot[aria-selected='true'] {
    width: 2.5rem;
    background: var(--wt-brand-500);
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.75rem;
}

.testimonial-card blockquote {
    flex: 1;
    margin-top: var(--space-5);
}

.testimonial-card blockquote p {
    font-size: 1.03rem;
    line-height: 1.65;
    color: var(--wt-steel-700);
}

.testimonial-card figcaption {
    margin-top: 1.75rem;
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-5);
}

.testimonial-logo {
    display: flex;
    width: 8rem;
    height: 4rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #fff;
    padding: var(--space-2);
}

.testimonial-logo img {
    max-height: 3rem;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* ======================================================== two-col ==== */

.split-grid {
    display: grid;
    gap: var(--space-12);
}

@media (min-width: 1024px) {
    .split-grid { gap: var(--space-16); }
    .split-7-5 { grid-template-columns: 7fr 5fr; }
    .split-5-7 { grid-template-columns: 5fr 7fr; }
    .split-6-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split-8-4 { grid-template-columns: 8fr 4fr; }
}

.sticky-aside {
    position: static;
}

@media (min-width: 1024px) {
    .sticky-aside {
        position: sticky;
        top: 7rem;
    }
}

.media-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    aspect-ratio: 4 / 3;
}

.media-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-frame-tall { aspect-ratio: 4 / 5; }
.media-frame-sm { border-radius: var(--radius-xl); }
.media-frame-bordered {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
}

.media-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

/* ===================================================== resource page == */

.resource-layout {
    display: grid;
    gap: var(--space-12);
    padding-block: 3.5rem;
}

@media (min-width: 1024px) {
    .resource-layout {
        grid-template-columns: 7fr 5fr;
        gap: var(--space-16);
        padding-block: var(--space-20);
    }
}

@media (min-width: 1280px) {
    .resource-layout { grid-template-columns: 8fr 4fr; }
}

.resource-headline-stat {
    margin-bottom: var(--space-8);
    border-left: 4px solid var(--wt-brand-500);
    padding-left: var(--space-5);
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.026em;
    color: var(--wt-ink-900);
}

.resource-section-title {
    margin-bottom: var(--space-3);
    font-size: var(--type-card-title);
    font-weight: 700;
    color: var(--wt-ink-900);
}

.resource-section-title + p {
    margin-bottom: 0;
}

.resource-section-title.is-spaced {
    margin-top: var(--space-10);
}

.highlights-panel {
    margin-top: var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
    padding: var(--space-6);
}

@media (min-width: 768px) {
    .highlights-panel { padding: var(--space-8); }
}

.resource-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-12);
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-8);
}

.pdf-note {
    margin-top: var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: #fff;
    padding: var(--space-5);
}

.pdf-note-inner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.pdf-note-icon {
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--wt-ink-900);
    color: #fff;
}

.pdf-note-icon svg {
    width: 1rem;
    height: 1rem;
}

.pdf-note h3 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--wt-ink-900);
}

.pdf-note p {
    margin-top: var(--space-1);
    font-size: var(--type-caption);
    line-height: 1.6;
    color: var(--text-tertiary);
}

/* ================================================== download gate ==== */

.gate-kicker {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wt-brand-600);
}

.gate-kicker svg {
    width: 0.875rem;
    height: 0.875rem;
}

.gate-title {
    margin-top: var(--space-3);
    font-size: 1.1875rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--wt-ink-900);
}

.gate-sub {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--text-tertiary);
}

.gate-sub svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    margin-top: 0.125rem;
    color: var(--wt-steel-400);
}

.gate-sub strong {
    color: var(--wt-steel-700);
}

.gate-fine {
    margin-top: var(--space-3);
    text-align: center;
    font-size: 0.72rem;
    color: var(--wt-steel-400);
}

.gate-success {
    border: 1px solid var(--wt-brand-200);
    border-radius: var(--radius-xl);
    background: var(--wt-brand-50);
    padding: var(--space-6);
}

.gate-success-icon {
    display: flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--wt-brand-500);
    color: #fff;
}

.gate-success-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.gate-success h3 {
    margin-top: var(--space-4);
    font-size: 1.1875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--wt-ink-900);
}

.gate-success p {
    margin-top: var(--space-2);
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

.gate-success .btn {
    margin-top: var(--space-5);
    width: 100%;
}

@media (min-width: 640px) {
    .gate-success .btn { width: auto; }
}

.gate-outbox {
    margin-top: var(--space-4);
    border-radius: var(--radius);
    background: rgb(255 255 255 / 0.7);
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-tertiary);
}

/* =================================================== contact / tabs ==== */

.intent-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    padding: var(--space-1);
}

.intent-tab {
    flex: 1;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    padding: var(--space-2) var(--space-3);
    text-align: center;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.18s, color 0.18s, box-shadow 0.18s;
}

.intent-tab:hover {
    color: var(--wt-ink-900);
}

.intent-tab.is-active {
    background: #fff;
    color: var(--wt-ink-900);
    box-shadow: var(--shadow-sm);
}

.contact-form-title {
    margin-top: var(--space-6);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--wt-ink-900);
}

.contact-form-blurb {
    margin-top: 0.375rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-tertiary);
}

.contact-form-body {
    margin-top: var(--space-6);
}

.form-success {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: #fff;
    padding: var(--space-8);
    text-align: center;
    box-shadow: var(--shadow-lift);
}

.form-success-icon {
    display: flex;
    width: 3rem;
    height: 3rem;
    margin-inline: auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--wt-brand-500);
    color: #fff;
}

.form-success-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.form-success h3 {
    margin-top: var(--space-5);
    font-size: 1.3125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--wt-ink-900);
}

.form-success p {
    margin-inline: auto;
    margin-top: var(--space-2);
    max-width: 28rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

.form-success .link-arrow {
    margin-top: var(--space-6);
    justify-content: center;
}

.contact-detail-card .card-kicker {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.contact-line {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: var(--space-4);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wt-ink-900);
    transition: color 0.18s;
}

.contact-line:hover {
    color: var(--wt-brand-600);
}

.contact-line svg {
    width: 1rem;
    height: 1rem;
    color: var(--wt-steel-400);
}

.contact-line-sm {
    margin-top: var(--space-2);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.support-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.support-icon {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--wt-ink-900);
    color: #fff;
}

.support-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.bullet-notes li {
    font-size: 0.84rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ==================================================== partner rows ==== */

.partner-row {
    display: grid;
}

@media (min-width: 1024px) {
    .partner-row { grid-template-columns: 4fr 8fr; }
}

.partner-media {
    position: relative;
    aspect-ratio: 16 / 9;
}

@media (min-width: 1024px) {
    .partner-media { aspect-ratio: auto; }
}

.partner-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.partner-media-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgb(7 10 18 / 0.7), transparent);
}

@media (min-width: 1024px) {
    .partner-media-scrim {
        background: linear-gradient(90deg, rgb(7 10 18 / 0.7), transparent);
    }
}

.partner-body {
    padding: var(--space-6);
}

@media (min-width: 768px) {
    .partner-body { padding: var(--space-8); }
}

.partner-name {
    margin-top: 0.625rem;
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.026em;
    color: var(--wt-ink-900);
}

.partner-summary {
    margin-top: var(--space-3);
    max-width: 42rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

.fact-grid {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

@media (min-width: 640px) {
    .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .fact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.fact-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wt-steel-400);
}

.fact-value {
    margin-top: var(--space-1);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--wt-ink-900);
}

/* ====================================================== sector card ==== */

.sector-card {
    scroll-margin-top: 7rem;
    padding: var(--space-6);
}

@media (min-width: 768px) {
    .sector-card { padding: var(--space-8); }
}

.sector-grid {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 1024px) {
    .sector-grid { grid-template-columns: 5fr 7fr; }
}

.sector-name {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.024em;
    color: var(--wt-ink-900);
}

.sector-body {
    margin-top: var(--space-3);
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

/* ======================================================== callouts ==== */

.callout-ink {
    border-radius: var(--radius-xl);
    background: var(--wt-ink-900);
    padding: var(--space-6);
}

.callout-ink p:first-child {
    font-size: var(--type-body);
    font-weight: 700;
    color: #fff;
}

.callout-ink p + p {
    margin-top: var(--space-2);
    font-size: 0.84rem;
    line-height: 1.65;
    color: var(--wt-steel-400);
}

.callout-ink .btn {
    margin-top: var(--space-5);
    width: 100%;
}

.callout-muted {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
    padding: var(--space-6);
}

.callout-plain {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.callout-title {
    font-size: var(--type-body);
    font-weight: 700;
    color: var(--wt-ink-900);
}

.module-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    font-size: 0.875rem;
    transition: background-color 0.18s;
}

.module-list li a:hover {
    background: #fff;
}

.module-list-name {
    font-weight: 600;
    color: var(--wt-ink-900);
}

.module-list li a:hover .module-list-name {
    color: var(--wt-brand-600);
}

.module-list svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--wt-steel-400);
    transition: transform 0.2s;
}

.module-list li a:hover svg {
    transform: translateX(4px);
}

.product-pick li + li {
    margin-top: 0.625rem;
}

.product-pick a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: 0.875rem;
}

.product-pick-name {
    font-weight: 600;
    color: var(--wt-ink-900);
}

.product-pick a:hover .product-pick-name {
    color: var(--wt-brand-600);
}

.product-pick-meta {
    font-size: 0.78rem;
    color: var(--text-tertiary);
}

/* ========================================================== legal ==== */

.legal-section + .legal-section {
    margin-top: var(--space-10);
}

.legal-section h2 {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.024em;
    color: var(--wt-ink-900);
}

.legal-section .prose-body {
    margin-top: var(--space-3);
}

.legal-contact {
    margin-top: var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
    padding: var(--space-6);
}

.legal-contact h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wt-ink-900);
}

.legal-contact p {
    margin-top: var(--space-2);
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

/* ========================================================= footer ==== */

.footer {
    background:
        radial-gradient(70rem 40rem at 15% -10%, rgb(0 112 224 / 0.16), transparent 62%),
        radial-gradient(58rem 34rem at 92% 8%, rgb(0 48 135 / 0.3), transparent 60%),
        linear-gradient(180deg, var(--wt-ink-950), var(--wt-ink-900) 55%, var(--wt-ink-800));
    color: var(--wt-steel-300);
}

.footer-band {
    border-bottom: 1px solid rgb(255 255 255 / 0.1);
}

.footer-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: var(--space-12);
}

@media (min-width: 1024px) {
    .footer-cta {
        flex-direction: row;
        align-items: center;
    }
}

.footer-cta h2 {
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.026em;
    color: #fff;
}

.footer-cta p {
    margin-top: var(--space-3);
    font-size: var(--type-body);
    line-height: 1.65;
    color: var(--wt-steel-400);
}

.footer-cta-copy {
    max-width: 42rem;
}

.footer-columns {
    display: grid;
    gap: var(--space-10);
    padding-block: 3.5rem;
}

@media (min-width: 768px) {
    .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .footer-columns { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .footer-col-brand { grid-column: span 4; }
    .footer-col { grid-column: span 2; }
}

.footer-brand img {
    height: 2.5rem;
    width: auto;
    filter: brightness(0) invert(1);
}


.footer-desc {
    margin-top: var(--space-5);
    max-width: 24rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--wt-steel-400);
}

.footer-meta {
    margin-top: var(--space-4);
    font-size: var(--type-caption);
    color: var(--wt-steel-500);
}

.footer-social {
    display: flex;
    gap: 0.625rem;
    margin-top: var(--space-6);
}

.footer-social a {
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: var(--radius-md);
    color: var(--wt-steel-300);
    transition: all 0.2s;
}

.footer-social a:hover {
    border-color: var(--wt-brand-500);
    background: var(--wt-brand-500);
    color: #fff;
}

.footer-social svg {
    width: 1rem;
    height: 1rem;
}

.footer-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
}

.footer-heading + ul,
.footer-heading + p {
    margin-top: var(--space-4);
}

.footer-offices {
    display: grid;
    gap: var(--space-8);
    padding-block: var(--space-10);
}

@media (min-width: 1024px) {
    .footer-offices { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .footer-office { grid-column: span 3; }
    .footer-subscribe { grid-column: span 6; }
}

.footer-office-region {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--type-caption);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wt-brand-400);
}

.footer-office-region svg {
    width: 0.875rem;
    height: 0.875rem;
}

.footer-office-phone {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--type-body);
    font-weight: 600;
    color: #fff;
    transition: color 0.18s;
}

.footer-office-email {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: var(--wt-steel-400);
    transition: color 0.18s;
}

.footer-office-phone:hover,
.footer-office-email:hover {
    color: var(--wt-brand-400);
}

.footer-office-phone svg,
.footer-office-email svg {
    width: 1rem;
    height: 1rem;
    color: var(--wt-steel-500);
}

.footer-subscribe-note {
    margin-top: var(--space-2);
    font-size: 0.84rem;
    color: var(--wt-steel-400);
}

.subscribe-form {
    margin-top: var(--space-4);
}

.subscribe-row {
    display: flex;
    max-width: 28rem;
    gap: var(--space-2);
}

.subscribe-input {
    min-width: 0;
    flex: 1;
    border: 1px solid rgb(255 255 255 / 0.15);
    border-radius: var(--radius);
    background: rgb(255 255 255 / 0.08);
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
    color: #fff;
}

.subscribe-input::placeholder {
    color: var(--wt-steel-500);
}

.subscribe-input:focus {
    outline: none;
    border-color: var(--wt-brand-500);
}

.subscribe-error {
    margin-top: var(--space-2);
    font-size: var(--type-caption);
    color: #fca5a5;
}

.subscribe-done {
    display: none;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--wt-brand-400);
}

.subscribe-done.is-visible {
    display: flex;
}

.subscribe-done svg {
    width: 1rem;
    height: 1rem;
}

.footer-legal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-6);
    font-size: var(--type-caption);
    color: var(--wt-steel-500);
}

@media (min-width: 640px) {
    .footer-legal { flex-direction: row; }
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.footer-legal-links a:hover {
    color: var(--wt-brand-400);
}

/* ========================================================= errors ==== */

.error-page {
    display: flex;
    min-height: 70vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-20);
    text-align: center;
}

.error-page h1 {
    margin-top: var(--space-5);
    max-width: 42rem;
    color: var(--wt-ink-900);
}

.error-page p {
    margin-top: var(--space-5);
    max-width: 32rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--wt-steel-600);
}

.error-page .cluster {
    margin-top: 2.25rem;
    justify-content: center;
}

/* ================================================= partner showcase ==== */
/*
   Homepage and partner pages built from the partner brochures. Every partner
   is given the same visual weight; only the partner's own detail page goes
   deeper into its range.
*/

.partner-logo {
    display: block;
    height: 2.75rem;
    width: auto;
    max-width: 11rem;
    object-fit: contain;
}

.partner-wordmark {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wt-brand-700);
}

.feature-logo { height: 3rem; max-width: 13rem; }
.partner-row-logo { height: 2.5rem; max-width: 10rem; }

.media-rounded {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lift);
}

/* ----------------------------------------------------- hero cards ---- */

/* A 2 x 2 of industry cards beside the hero copy. The 4:5 shape keeps them
   portrait while two rows stay about as tall as the copy column, so the whole
   grid sits above the fold on a laptop screen. */
.hero-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
}

@media (min-width: 1024px) {
    /* Size the grid to the screen height as well as the column width: two
       4:5 rows are 1.25x the grid width tall, and this keeps both rows above
       the fold on shorter laptop screens (e.g. 1280 x 720). */
    .hero-inner:has(.hero-cards) { padding-block: clamp(2.5rem, 8vh, 7rem); }
    .hero-cards {
        max-width: min(34rem, calc((100svh - var(--header-height) - 16vh - 1rem) / 1.25));
        margin-inline: auto 0;
    }
}

.hero-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--wt-ink-900);
    box-shadow: 0 18px 40px -20px rgb(11 16 32 / 0.55);
    transition: transform 0.3s, box-shadow 0.3s;
}

.hero-card:hover,
.hero-card:focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 26px 50px -20px rgb(11 16 32 / 0.65);
}

.hero-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s;
}

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

/* Label bar across the lower part of the card, as in the brand artwork. */
.hero-card-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10%;
    padding: 0.75rem 1rem;
    background: rgb(11 16 32 / 0.62);
    backdrop-filter: blur(2px);
    font-size: clamp(0.875rem, 1.3vw, 1.125rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
}

/* --------------------------------------------------- partner strip ---- */

.partner-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-8);
}

@media (min-width: 768px) { .partner-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .partner-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.partner-strip-item {
    display: flex;
    height: 100%;
    min-height: 5rem;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.partner-strip-item:hover { border-color: rgb(var(--wt-brand-rgb) / 0.45); box-shadow: var(--shadow-lift); }
.partner-strip-item .partner-logo { height: 2.5rem; max-width: 100%; }

/* ---------------------------------------------------- partner rows ---- */

.partner-rows {
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-10);
}

.partner-feature {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    background: #fff;
    scroll-margin-top: calc(var(--header-height, 5rem) + var(--space-6));
}

@media (min-width: 1024px) {
    .partner-feature {
        grid-template-columns: 5fr 7fr;
        align-items: center;
        gap: var(--space-10);
        padding: var(--space-8);
    }
    /* Alternate sides so a run of five rows does not read as one long list. */
    .partner-feature-flip .partner-feature-copy { order: 2; }
}

/* A partner without photos (Artha Weld) spans the full row. */
.partner-feature:not(:has(.partner-feature-media)) { grid-template-columns: 1fr; }

.partner-feature-name {
    margin-top: var(--space-2);
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--wt-ink-900);
}

.partner-feature-summary {
    margin-top: var(--space-3);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.partner-feature-products {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

@media (min-width: 640px) { .partner-feature-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.partner-feature-products li {
    display: grid;
    gap: 0.125rem;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.partner-feature-products strong { color: var(--wt-ink-900); }

.partner-feature-media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

/* ---------------------------------------------------- product tiles ---- */

.product-tile { margin: 0; }

.product-tile-media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: #fff;
}

.product-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.product-tile:hover .product-tile-media img { transform: scale(1.04); }

.product-tile-name {
    margin-top: var(--space-3);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
    color: var(--wt-ink-900);
}

.product-tile-detail { margin-top: var(--space-1); font-size: 0.8125rem; text-align: center; color: var(--text-secondary); }

/* -------------------------------------------------- product gallery ---- */

.product-gallery {
    display: grid;
    gap: var(--space-3);
}

.product-group {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: #fff;
    scroll-margin-top: calc(var(--header-height, 5rem) + var(--space-6));
}

.product-group-name {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    list-style: none;
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wt-brand-700);
}

.product-group-name::-webkit-details-marker { display: none; }
.product-group-name:hover { background: var(--bg-secondary); }

.product-group-count {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-tertiary);
}

.product-group-name svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    transition: transform 0.2s;
}

.product-group[open] .product-group-name { border-bottom: 1px solid var(--border-color); }
.product-group[open] .product-group-name svg { transform: rotate(180deg); }

/* Two across on a phone, so each photo is still large enough to read. */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
    padding: var(--space-5);
}

@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); padding: var(--space-6); } }
@media (min-width: 1100px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ------------------------------------------------------ what we do ---- */

.what-we-do {
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    background: linear-gradient(160deg, var(--wt-brand-700), #0b3f9e 60%, var(--wt-brand-600));
    color: rgb(255 255 255 / 0.88);
    box-shadow: var(--shadow-lift);
    text-align: center;
}

.what-we-do-title { font-size: var(--type-subsection); font-weight: 800; color: #fff; }
.what-we-do p { margin-top: var(--space-4); line-height: 1.65; }

.what-we-do-media {
    width: 100%;
    margin-top: var(--space-6);
    border: 4px solid #fff;
    border-radius: var(--radius-lg);
}

.what-we-do .what-we-do-contact-label {
    margin-top: var(--space-6);
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
}

.what-we-do-contact {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
    justify-items: center;
}

.what-we-do-contact a { display: inline-flex; align-items: center; gap: var(--space-2); color: #fff; }
.what-we-do-contact a:hover { text-decoration: underline; }
.what-we-do-contact svg { width: 1rem; height: 1rem; }

/* ------------------------------------------ arcoplate partner page ---- */

.arco-visual {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lift);
}

.arco-visual > img { width: 100%; aspect-ratio: 8 / 7; object-fit: cover; }

.arco-layers {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-4);
    width: min(15rem, 60%);
    margin: 0;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / 0.94);
    color: var(--wt-ink-900);
    box-shadow: var(--shadow-lift);
}

.arco-layers-title {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wt-steel-500);
}

.arco-layers ol { margin-top: var(--space-3); }

.arco-layer {
    display: flex;
    align-items: center;
    padding-inline: var(--space-3);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Alloy overlay on top, fusion line, mild steel backing: drawn to read as a
   plate section rather than as a list. */
.arco-layer-1 { height: 2.25rem; background: linear-gradient(90deg, #8d96a3, #c9ced6 40%, #7f8894); border-radius: 4px 4px 0 0; }
.arco-layer-2 { height: 1.25rem; background: var(--wt-brand-600); color: #fff; font-size: 0.625rem; }
.arco-layer-3 { height: 2.25rem; background: linear-gradient(90deg, #2c323b, #4a525e 50%, #262b33); color: #fff; border-radius: 0 0 4px 4px; }

.arco-family {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 640px) { .arco-family { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .arco-family { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.arco-family-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: var(--radius-xl);
    background: rgb(255 255 255 / 0.04);
    transition: border-color 0.2s, background 0.2s;
}

.arco-family-card:hover { border-color: rgb(var(--wt-brand-rgb) / 0.6); background: rgb(255 255 255 / 0.07); }

.arco-family-logo {
    display: flex;
    height: 5rem;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    background: #fff;
}

.arco-family-logo img { max-height: 100%; width: auto; object-fit: contain; }
.arco-family-detail { font-size: 0.84rem; line-height: 1.55; color: var(--wt-steel-300); }
.arco-family-card .hero-tile-cta { margin-top: auto; color: var(--wt-brand-300); }

.arco-services {
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid rgb(255 255 255 / 0.1);
}

.arco-service-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.arco-service-list li {
    padding: 0.375rem 0.875rem;
    border: 1px solid rgb(255 255 255 / 0.16);
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    color: #fff;
}

/* ------------------------------------------------ featured products ---- */

.pillar-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.pillar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--wt-ink-900);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}

.pillar svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--wt-brand-300); }

.highlight-grid {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 640px) { .highlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .highlight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Photo on top, full card width, so the product is what the eye lands on. */
.highlight-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: #fff;
}

.highlight-card > div { padding: var(--space-5); }

.highlight-media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
    background: #fff;
}

.highlight-media img { width: 100%; height: 100%; object-fit: cover; }

.highlight-name {
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wt-brand-700);
}

.highlight-detail { margin-top: var(--space-2); font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary); }

.range-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

@media (min-width: 768px) { .range-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.range-chip {
    display: flex;
    height: 100%;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--wt-ink-900);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.range-chip:hover { border-color: rgb(var(--wt-brand-rgb) / 0.45); box-shadow: var(--shadow-lift); }

.range-chip img {
    width: 3.25rem;
    height: 3.25rem;
    flex: none;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.range-chip small {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-tertiary);
}

.range-chips-lg .range-chip img { width: 4.5rem; height: 4.5rem; }

/* ---------------------------------------------------- snf results ---- */

.drop-list { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.drop-list li { display: flex; align-items: center; gap: var(--space-3); font-size: 0.9rem; font-weight: 500; color: var(--wt-ink-900); }
.drop-list svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--wt-brand-600); }

.before-after {
    display: grid;
    grid-template-columns: 2.25rem repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.before-after-material {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--wt-ink-900);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
}

.before-after figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); }
.before-after img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.before-after figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.25rem 0.5rem;
    background: rgb(11 16 32 / 0.78);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
}

.benefit-list { display: grid; gap: var(--space-3); }

.benefit-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--wt-brand-50);
    font-weight: 600;
    color: var(--wt-brand-700);
}

.benefit-list svg {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    padding: 0.25rem;
    border-radius: 999px;
    background: var(--wt-brand-700);
    color: #fff;
}

/* ----------------------------------------------------- applications ---- */

.application-grid {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 640px) { .application-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .application-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.application-col {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: #fff;
}

.application-head {
    padding: var(--space-3) var(--space-5);
    background: var(--wt-brand-700);
    font-size: 1.0625rem;
    font-weight: 800;
    color: #fff;
}

.application-col ul { padding: var(--space-4) var(--space-5); }

.application-col li {
    padding-block: 0.4rem;
    border-bottom: 1px solid var(--wt-steel-100);
    font-size: 0.875rem;
    color: var(--wt-ink-900);
}

.application-col li:last-child { border-bottom: 0; }

/* ---------------------------------------------------- partner index ---- */

.partner-tagline { margin-top: var(--space-2); font-weight: 600; color: var(--wt-brand-700); }

/* Five logos in a two-column phone grid: let the odd one out span the row. */
@media (max-width: 767px) { .partner-strip > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ----------------------------------------------- testimonial detail ---- */

.slider-highlight,
.testimonial-highlight {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.slider-highlight { background: rgb(var(--wt-brand-rgb) / 0.2); color: var(--wt-brand-300); }
.slider-highlight + .slider-quote { margin-top: var(--space-4); }

.testimonial-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.testimonial-highlight { background: var(--wt-brand-50); color: var(--wt-brand-700); }

.testimonial-facts {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.testimonial-facts li {
    display: flex;
    gap: var(--space-2);
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.testimonial-facts svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.15rem; color: var(--wt-brand-600); }

/* --------------------------------------------- design & fabrication ---- */
/* Mirrors the brochure page: brand band on top, brand-blue lead word in the
   title, and a grid of photos each framed in blue with a caption bar. */

.fab-section {
    position: relative;
    background: linear-gradient(180deg, var(--wt-brand-50), #fff 55%);
}

.fab-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--wt-brand-700), var(--wt-brand-500));
}

.fab-head {
    display: grid;
    gap: var(--space-6);
    align-items: end;
}

@media (min-width: 1024px) { .fab-head { grid-template-columns: minmax(0, 1fr) auto; } }

.fab-title { margin-top: var(--space-4); max-width: 48rem; }
.fab-title-brand { color: var(--wt-brand-700); }
.fab-head .lede { margin-top: var(--space-4); max-width: 44rem; }

.fab-badge {
    display: grid;
    gap: 0.25rem;
    padding: var(--space-5) var(--space-6);
    border-left: 4px solid var(--wt-brand-600);
    border-radius: var(--radius-lg);
    background: var(--wt-brand-700);
    color: rgb(255 255 255 / 0.85);
    font-size: 0.875rem;
}

.fab-badge strong {
    font-size: 1.0625rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}

/* Three across, as on the brochure page: nine items make a clean 3 x 3. */
.fab-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

/* On a phone three columns would shrink the photos to thumbnails, so drop to
   two and let the ninth tile span the row rather than sit alone. */
@media (max-width: 559px) {
    .fab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .fab-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .fab-grid > :last-child:nth-child(odd) .fab-tile-media { aspect-ratio: 16 / 9; }
}

.category-offering { scroll-margin-top: calc(var(--header-height, 5rem) + var(--space-6)); }

.fab-tile {
    margin: 0;
    overflow: hidden;
    border: 2px solid var(--wt-brand-700);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s, transform 0.25s;
}

.fab-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.fab-tile-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.fab-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.fab-tile:hover .fab-tile-media img { transform: scale(1.04); }

.fab-tile-name {
    padding: 0.625rem 0.75rem;
    border-top: 2px solid var(--wt-brand-700);
    font-size: clamp(0.72rem, 1vw, 0.8125rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    color: var(--wt-ink-900);
}

.fab-foot { margin-top: var(--space-8); }

/* The ASI mark is a stacked badge with fine lettering; at the height that
   suits the wide wordmarks it reads as the smallest logo in the row. */
.partner-logo-alloy-steel { height: 3.5rem; }
.partner-strip-item .partner-logo-alloy-steel { height: 3.5rem; }
.feature-logo.partner-logo-alloy-steel { height: 4.25rem; }

/* ------------------------------------------------------ wear zones ---- */

.zone-grid {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 640px) { .zone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .zone-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.zone-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: #fff;
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}

.zone-card:hover { transform: translateY(-3px); border-color: rgb(var(--wt-brand-rgb) / 0.45); box-shadow: var(--shadow-lift); }

.zone-card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-secondary); }
.zone-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.zone-card:hover .zone-card-media img { transform: scale(1.04); }

.zone-card-body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.zone-card-name { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; color: var(--wt-ink-900); }
.zone-card-headline { font-size: 0.875rem; font-weight: 600; color: var(--wt-brand-700); }
.zone-card-summary { font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary); }
.zone-card-cta { margin-top: auto; padding-top: var(--space-3); }

.zone-media {
    overflow: hidden;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lift);
    background: #fff;
}

.zone-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.zone-media-plain { box-shadow: none; border: 1px solid var(--border-color); }
.zone-media-plain img { object-fit: contain; }

.zone-prose { margin-top: var(--space-6); max-width: 52rem; }

.zone-mechanisms {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

@media (min-width: 768px) { .zone-mechanisms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .zone-mechanisms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.zone-mechanism {
    display: grid;
    gap: 0.25rem;
    padding: var(--space-4) var(--space-5);
    border-left: 4px solid var(--wt-brand-600);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.zone-mechanism strong { font-size: 0.9375rem; color: var(--wt-ink-900); }
.zone-mechanism span { font-size: 0.875rem; font-weight: 600; color: var(--wt-brand-700); }

.zone-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-xl); }

.zone-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.zone-table thead th {
    padding: var(--space-3) var(--space-4);
    background: var(--wt-brand-700);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    color: #fff;
}

.zone-table tbody th,
.zone-table td {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-color);
    vertical-align: top;
    text-align: left;
    line-height: 1.5;
}

.zone-table tbody th { width: 24%; font-weight: 700; color: var(--wt-ink-900); }
.zone-table td { color: var(--text-secondary); }
.zone-table td:last-child { color: var(--wt-brand-700); font-weight: 600; }
.zone-table tbody tr:nth-child(even) { background: var(--bg-secondary); }

/* Stack each row as a labelled card on narrow screens. */
@media (max-width: 767px) {
    .zone-table-wrap { border: 0; overflow: visible; }
    .zone-table thead { display: none; }
    .zone-table, .zone-table tbody, .zone-table tr, .zone-table th, .zone-table td { display: block; width: 100%; }
    .zone-table tr {
        margin-bottom: var(--space-3);
        overflow: hidden;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: #fff !important;
    }
    .zone-table tbody th { width: auto; background: var(--wt-brand-50); border-top: 0; }
    .zone-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.125rem;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-tertiary);
    }
}

.zone-pair { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) { .zone-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.zone-panel {
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--wt-brand-600);
    border-radius: var(--radius-xl);
    background: #fff;
}

.zone-panel-warn { border-top-color: #c2410c; }
.zone-panel-title { font-size: 1.125rem; font-weight: 800; color: var(--wt-ink-900); }
.zone-panel-note { margin-top: var(--space-4); font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); }

.zone-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }

.zone-list-item {
    display: grid;
    gap: 0.125rem;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--wt-steel-100);
}

.zone-list-item:last-child { padding-bottom: 0; border-bottom: 0; }
.zone-list-item strong { font-size: 0.9375rem; color: var(--wt-ink-900); }
.zone-list-item span { font-size: 0.875rem; color: var(--text-secondary); }

.zone-outcomes {
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    background: linear-gradient(160deg, var(--wt-brand-700), #0b3f9e 60%, var(--wt-brand-600));
    color: #fff;
}

.zone-outcomes-title { font-size: var(--type-subsection); font-weight: 800; color: #fff; }

.zone-outcomes ul {
    display: grid;
    gap: var(--space-3) var(--space-6);
    margin-top: var(--space-5);
}

@media (min-width: 768px) { .zone-outcomes ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.zone-outcomes li { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: 600; }
.zone-outcomes svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.1rem; color: var(--wt-brand-200); }

.zone-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.zone-stat { display: grid; gap: 0.25rem; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--wt-brand-50); }
.zone-stat strong { font-size: 1.75rem; font-weight: 800; color: var(--wt-brand-700); }
.zone-stat span { font-size: 0.8125rem; color: var(--text-secondary); }

.zone-mini { display: flex; align-items: center; gap: var(--space-4); }
.zone-mini .card-icon { margin: 0; flex: none; }

/* Facts inside a partner row: the copy column is narrow, so two across. */
@media (min-width: 640px) { .fact-grid.fact-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------- arcoplate cross-section ---- */

.xsec {
    margin: 0;
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    background: linear-gradient(180deg, #fff, var(--bg-secondary));
}

.xsec svg { display: block; width: 100%; height: auto; }

.xsec-caption {
    margin-top: var(--space-3);
    font-size: var(--type-caption);
    text-align: center;
    color: var(--text-tertiary);
}

/* ------------------------------------------------------- clientele ---- */

.clientele { display: grid; gap: var(--space-8); }

.clientele-map {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    background: #fff;
}

.clientele-map-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-color);
}

.clientele-map-title { font-size: 1.25rem; font-weight: 800; color: var(--wt-ink-900); }
.clientele-map-count { font-size: var(--type-caption); font-weight: 600; color: var(--wt-brand-700); }

/* Vector map (scripts/build_clientele_maps.py) beside a numbered key. */
.clientele-map-body {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-6);
    align-items: center;
}

@media (min-width: 1024px) {
    .clientele-map-body { grid-template-columns: 3fr 2fr; gap: var(--space-10); padding: var(--space-8); }
}

.clientele-svg { display: block; width: 100%; height: auto; }

.map-land path {
    fill: #e3ecfb;
    stroke: #fff;
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.map-pin { cursor: default; }
.map-pin-halo { fill: rgb(0 112 224 / 0.18); transition: r 0.2s, fill 0.2s; }
.map-pin-dot { fill: var(--wt-brand-600); stroke: #fff; stroke-width: 2; }

.map-pin-num {
    fill: #fff;
    font: 700 13px/1 var(--font-sans, system-ui, sans-serif);
    text-anchor: middle;
    pointer-events: none;
}

.map-pin.is-active .map-pin-halo { r: 24; fill: rgb(0 112 224 / 0.3); }
.map-pin.is-active .map-pin-dot { fill: var(--wt-brand-700); }

.clientele-key {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-2);
}

.clientele-key li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-lg);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wt-ink-900);
    cursor: default;
    transition: background 0.15s;
}

.clientele-key li:hover,
.clientele-key li:focus-visible,
.clientele-key li.is-active { background: var(--wt-brand-50); outline: none; }

.clientele-key-num {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--wt-brand-600);
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}

/* -------------------------------------------------- products index ---- */

.search-index {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 640px) { .search-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .search-index { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.search-index-group {
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: #fff;
}

.search-index-head {
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--wt-brand-600);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wt-brand-700);
}

.search-index-group ul { display: grid; margin-top: var(--space-2); }

.search-index-group a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-block: 0.55rem;
    border-bottom: 1px solid var(--wt-steel-100);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wt-ink-900);
    transition: color 0.2s;
}

.search-index-group li:last-child a { border-bottom: 0; }
.search-index-group a:hover { color: var(--wt-brand-600); }
.search-index-group svg { width: 0.875rem; height: 0.875rem; flex: none; opacity: 0.5; }

@media (min-width: 1024px) { .search-index-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.search-index-head a { color: inherit; }
.search-index-head a:hover { color: var(--wt-brand-500); }

/* ------------------------------------------------ arcoplate loyalty ---- */

.loyalty-grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .loyalty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .loyalty-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.loyalty-card {
    padding: var(--space-6);
    border: 1px solid rgb(255 255 255 / 0.12);
    border-top: 3px solid var(--wt-brand-400);
    border-radius: var(--radius-xl);
    background: rgb(255 255 255 / 0.05);
}

.loyalty-value { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.loyalty-value span { display: block; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wt-brand-300); }
.loyalty-detail { margin-top: var(--space-3); font-size: 0.875rem; line-height: 1.55; color: var(--wt-steel-300); }
.loyalty-closing { margin-top: var(--space-8); max-width: 48rem; font-size: 1.0625rem; line-height: 1.65; color: var(--wt-steel-200); }

/* -------------------------------------------------- myaxisasset ---- */

.myaxis { background: linear-gradient(180deg, var(--bg-secondary), #fff); }

.myaxis-grid {
    display: grid;
    gap: var(--space-10);
    align-items: center;
}

@media (min-width: 1024px) { .myaxis-grid { grid-template-columns: 5fr 7fr; } }

.myaxis-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wt-ink-900);
}

.myaxis-badge svg { width: 1rem; height: 1rem; color: var(--wt-brand-600); }

.myaxis-title {
    margin-top: var(--space-5);
    font-size: clamp(2.25rem, 4.6vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--wt-ink-900);
}

.myaxis-title span { color: var(--wt-ink-900); }
.myaxis-title .myaxis-accent { color: var(--wt-brand-500); }

.myaxis-lede { margin-top: var(--space-5); max-width: 36rem; font-size: 1.0625rem; line-height: 1.65; color: var(--text-secondary); }

.myaxis-points { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.myaxis-points li { display: flex; align-items: center; gap: var(--space-3); font-size: 0.9375rem; color: var(--wt-ink-900); }

.myaxis-points svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    padding: 0.2rem;
    border-radius: 999px;
    background: var(--wt-brand-500);
    color: #fff;
}

.myaxis-ctas { margin-top: var(--space-8); }

.myaxis-media {
    display: block;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    background: #fff;
    box-shadow: var(--shadow-lift);
    transition: transform 0.3s, box-shadow 0.3s;
}

.myaxis-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }

.contact-address { margin-top: var(--space-2); font-style: normal; font-size: 0.875rem; line-height: 1.5; color: var(--text-secondary); }

/* ---------------------------------------------------- landing pages ---- */

.landing-proof {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-left: 4px solid var(--wt-brand-600);
    border-radius: var(--radius-lg);
    background: var(--wt-brand-50);
    font-weight: 600;
    color: var(--wt-brand-700);
}

.landing-proof svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.15rem; }

.faq-list { display: grid; gap: var(--space-3); }

.faq {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: #fff;
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: var(--wt-ink-900);
}

.faq-q::-webkit-details-marker { display: none; }
.faq-q svg { width: 1.125rem; height: 1.125rem; flex: none; transition: transform 0.2s; }
.faq[open] .faq-q svg { transform: rotate(180deg); }
.faq-a { padding: 0 var(--space-5) var(--space-5); line-height: 1.65; color: var(--text-secondary); }

/* ---------------------------------------------------- cookie consent ---- */

.cookie-banner {
    position: fixed;
    left: 50%;
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 60;
    width: min(46rem, calc(100% - 2rem));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 12px 40px rgb(15 23 42 / 0.18);
}

/* display:flex above would otherwise override the hidden attribute. */
.cookie-banner[hidden] { display: none; }

.cookie-banner-text {
    flex: 1 1 22rem;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.footer-trademarks {
    margin-top: var(--space-2);
    max-width: 42rem;
    font-size: 0.75rem;
    line-height: 1.5;
    opacity: 0.7;
}

.footer-cookie-settings {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.footer-cookie-settings:hover { text-decoration: underline; }

.legal-updated {
    margin-bottom: var(--space-6);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* ---------------------------------------------- homepage partners row ---- */

.home-partners-title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--wt-brand-600);
}

.home-partners-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-6);
    align-items: center;
}

@media (min-width: 768px) {
    .home-partners-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.home-partner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 7rem;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    transition: transform 0.2s, box-shadow 0.2s;
}

.home-partner:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(15 23 42 / 0.08); }

.home-partner .partner-logo {
    max-width: 100%;
    max-height: 5.5rem;
    width: auto;
    object-fit: contain;
}

.home-partner-note {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--wt-ink-900);
}

.home-partner-note-red { color: #d22630; }

.home-partners-rule {
    margin: var(--space-8) 0 0;
    border: 0;
    border-top: 1px solid var(--border-color);
}

/* ------------------------------------------ homepage industrial solutions ---- */

.solution-rows { display: grid; gap: var(--space-10); }

.solution-row-title a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wt-ink-900);
}

.solution-row-title a:hover { color: var(--wt-brand-600); }
.solution-row-title svg { width: 1.1rem; height: 1.1rem; }

.solution-row-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

@media (min-width: 1024px) {
    .solution-row-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.solution-tile { display: block; color: inherit; }

.solution-row-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* The SNF mark is drawn small inside its file; bring it to the same visual weight. */
.home-partner .partner-logo-snf { height: 4.25rem; }