/* ==========================================================================
   Klinger Warba — components.css
   Header, navigation, hero, buttons, cards, tables, prose, forms, footer
   ========================================================================== */

/* ---------------------------------------------------------------- Utility bar
   Reuses the head-office contact details published on the Contact Us page. */
.utility-bar {
    background: var(--dark-color);
    color: rgba(255, 255, 255, .62);
    font-size: var(--step--1);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.utility-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    min-height: 40px;
    flex-wrap: wrap;
}
.utility-bar__facts {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.utility-bar__facts span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.utility-bar__facts span::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--primary-light);
    flex: none;
}
.utility-bar__links { display: flex; align-items: center; gap: var(--sp-5); }
.utility-bar a {
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    white-space: nowrap;
}
.utility-bar a:hover { color: #fff; text-decoration: underline; }

/* -------------------------------------------------------------------- Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(1.6) blur(10px);
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--border-color);
    transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-scrolled {
    box-shadow: var(--shadow);
    background: rgba(255, 255, 255, .98);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: 232px; height: auto; }

/* ---------------------------------------------------------------- Navigation */
.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav__item { position: relative; margin: 0; }
.nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius);
    white-space: nowrap;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover { color: var(--primary-color); background: var(--primary-wash); }

/* Active page indication — a rule under the label, not a colour swap alone */
.nav__link[aria-current="page"] { color: var(--primary-color); }
.nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: 6px;
    height: 2px;
    background: var(--primary-color);
}

.nav__caret {
    width: 9px; height: 9px;
    flex: none;
    transition: transform var(--dur) var(--ease);
}
.nav__item.is-open > .nav__link .nav__caret { transform: rotate(180deg); }

.nav__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-2);
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav__item.is-open > .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav__dropdown li { margin: 0; }
.nav__dropdown a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--step--1);
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
}
.nav__dropdown a:hover { background: var(--primary-wash); color: var(--primary-color); }
.nav__dropdown a svg { width: 12px; height: 12px; opacity: .45; flex: none; }

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text-color);
}
.nav-toggle:hover { background: var(--light-color); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ------------------------------------------------------------------ Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: 14px var(--sp-6);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
                color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 14px; height: 14px; flex: none; }

.btn--primary { background: var(--primary-color); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); color: #fff; }

.btn--outline {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--border-strong);
}
.btn--outline:hover { border-color: var(--primary-color); background: var(--primary-wash); color: var(--primary-color); }

.btn--ghost-invert {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .34);
}
.btn--ghost-invert:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* --------------------------------------------------------------------- Hero */
.hero {
    position: relative;
    background: var(--dark-color);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.2s var(--ease), transform 7s linear;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(105deg, var(--dark-color) 28%, rgba(10, 21, 32, .84) 55%, rgba(10, 21, 32, .58) 100%);
}
.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-8);
    padding-block: var(--sp-10);
    min-height: 560px;
}
.hero__copy { max-width: 40ch; }
.hero h1 { color: #fff; margin-bottom: var(--sp-5); }
.hero__lede {
    font-size: var(--step-1);
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
    margin-bottom: var(--sp-7);
    max-width: 52ch;
}

/* Signature: concentric arcs echoing the KWGM mark, doubling as slide progress */
.hero__dial { position: relative; width: 300px; height: 300px; flex: none; }
.hero__dial svg { width: 100%; height: 100%; overflow: visible; }
.hero__dial .dial-track { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 1.5; }
.hero__dial .dial-arc {
    fill: none;
    stroke: var(--primary-light);
    stroke-width: 3;
    stroke-linecap: round;
    opacity: .25;
    transition: opacity .6s var(--ease), stroke-dashoffset .6s var(--ease);
}
.hero__dial .dial-arc.is-active { opacity: 1; }

.hero__controls-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--sp-7);
}
.hero__controls { display: flex; align-items: center; gap: var(--sp-3); }
.hero__dot {
    width: 30px; height: 3px;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, .26);
    cursor: pointer;
    transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.hero__dot:hover { background: rgba(255, 255, 255, .5); }
.hero__dot[aria-current="true"] { background: var(--primary-light); width: 48px; }

/* ---------------------------------------------------------------- Intro grid */
.intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--sp-8) var(--sp-9);
    align-items: start;
}

.mt-7 { margin-top: var(--sp-7); }

/* ---------------------------------------------------------------- Page hero */
.page-hero {
    position: relative;
    background: var(--dark-color);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.page-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
}
.page-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, var(--dark-color) 20%, rgba(10, 21, 32, .88) 60%, rgba(10, 21, 32, .7) 100%);
}
.page-hero__inner { padding-block: var(--sp-8) var(--sp-8); }
.page-hero h1 { color: #fff; margin-bottom: var(--sp-4); max-width: 22ch; }
.page-hero p { color: rgba(255, 255, 255, .74); max-width: 60ch; margin-bottom: 0; }

/* -------------------------------------------------------------- Breadcrumbs */
.breadcrumb { margin: 0 0 var(--sp-5); }
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before { content: "/"; color: rgba(255, 255, 255, .3); }
.breadcrumb a { color: rgba(255, 255, 255, .68); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #fff; }

/* --------------------------------------------------------------- Spec block
   Datasheet-style restatement of facts that appear verbatim in the site copy. */
.spec-block {
    border-top: 2px solid var(--text-color);
    padding-top: var(--sp-5);
}
.spec-block dl { margin: 0; }
.spec-block__row {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border-color);
}
.spec-block dt {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding-top: 3px;
}
.spec-block dd {
    margin: 0;
    font-weight: 500;
    color: var(--text-color);
}

/* ------------------------------------------------------------ Product index
   A parts list, not a marketing grid: source ID, family name, category. */
.product-index { border-top: 1px solid var(--border-color); }
.product-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px) 40px;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-4);
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: background var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.product-row::before {
    content: "";
    position: absolute;
    left: 0; top: -1px; bottom: -1px;
    width: 3px;
    background: var(--primary-color);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform var(--dur) var(--ease);
}
.product-row:hover { background: var(--light-color); padding-left: var(--sp-6); }
.product-row:hover::before { transform: scaleY(1); }
.product-row:focus-visible { outline-offset: -2px; }

.product-row__name {
    font-family: var(--font-display);
    font-stretch: 112%;
    font-weight: 600;
    font-size: var(--step-2);
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--text-color);
}
.product-row:hover .product-row__name { color: var(--primary-color); }
.product-row__cat {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.product-row__go {
    justify-self: end;
    width: 20px; height: 20px;
    color: var(--text-faint);
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.product-row:hover .product-row__go { transform: translateX(4px); color: var(--primary-color); }

/* ------------------------------------------------------------------ Filters */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
}
.filter-btn {
    padding: var(--sp-2) var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}
.filter-btn:hover { border-color: var(--border-strong); color: var(--text-color); }
.filter-btn[aria-pressed="true"] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.filter-count {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: var(--sp-4);
}

/* -------------------------------------------------------------------- Cards */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-5);
}
.card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--sp-6);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.card h3 { font-size: var(--step-2); margin-bottom: var(--sp-3); }
.card p { color: var(--text-muted); margin-bottom: 0; }

/* --------------------------------------------------------------- Client list
   These are counterparties, not a sequence, so the marker stays a plain rule
   rather than a number that would imply rank or order.                     */
.client-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--border-color);
}
.client-list li {
    display: flex;
    align-items: baseline;
    gap: var(--sp-5);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border-color);
    margin: 0;
    font-size: var(--step-1);
    font-weight: 500;
}
.client-list li::before {
    content: "";
    flex: none;
    width: 20px;
    height: 2px;
    background: var(--primary-color);
    transform: translateY(-.35em);
}

/* ------------------------------------------------------------------- Tables */
.table-scroll {
    overflow-x: auto;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--sp-5);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--surface);
}
.table-scroll:last-child { margin-bottom: 0; }

.data-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: var(--step--1);
}
.data-table th,
.data-table td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-color);
}
.data-table thead th {
    background: var(--light-color);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--border-strong);
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-sunken); }
.data-table td:first-child { font-weight: 500; color: var(--text-color); }
.data-table .num, .data-table .mono { font-family: var(--font-mono); }

/* Colour code chip — the one place literal colour is allowed, because on a
   gasket the colour IS the identification (ASME B16.20 stripe coding). */
.code-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    white-space: nowrap;
}
.code-chip__swatch {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid rgba(10, 21, 32, .28);
    flex: none;
}
.code-chip__swatch--striped {
    background-image: repeating-linear-gradient(45deg, var(--chip) 0 3px, #fff 3px 6px);
}

/* -------------------------------------------------------------------- Prose
   Wraps content carried over verbatim from the source CMS. Legacy inline
   widths and table attributes are neutralised here, never in the markup. */
.prose { max-width: 100%; }
.prose > :first-child { margin-top: 0; }
.prose p { margin-bottom: var(--sp-4); }
.prose h1, .prose h2, .prose h3, .prose h4 { margin-top: var(--sp-7); }
.prose > :is(h1, h2, h3, h4):first-child { margin-top: 0; }
.prose ul, .prose ol { margin-bottom: var(--sp-4); }
.prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin-block: var(--sp-3);
}
.prose a { font-weight: 500; }

.prose table {
    width: 100% !important;
    min-width: 560px;
    border-collapse: collapse;
    font-size: var(--step--1);
    background: var(--surface);
}
.prose table td,
.prose table th {
    width: auto !important;
    height: auto !important;
    padding: var(--sp-3) var(--sp-4);
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid var(--border-color);
}
.prose table[border="1"] td,
.prose table[border="1"] th { border: 1px solid var(--border-color); }
.prose table[border="1"] tbody tr:first-child td {
    background: var(--light-color);
    font-weight: 600;
    color: var(--text-color);
}
.prose table tbody tr:last-child > td { border-bottom-width: 1px; }
.prose table p { margin-bottom: var(--sp-2); }
.prose table p:last-child { margin-bottom: 0; }
.prose table img { margin: 0; border-radius: var(--radius-sm); }

/* Layout tables are presentational shells from the CMS, not data — they must
   never impose the data-table minimum on the page.                          */
.prose table.layout-table { min-width: 0; }

/* Two-column layout tables from the CMS collapse on narrow screens. A layout
   table holding its own data tables collapses far earlier: two 560px
   scrollers cannot sit side by side below desktop width.                    */
@media (max-width: 720px) {
    .prose table.layout-table,
    .prose table.layout-table tbody,
    .prose table.layout-table tr,
    .prose table.layout-table td {
        display: block;
        width: 100% !important;
        min-width: 0;
    }
    .prose table.layout-table td { border-bottom: 0; padding-inline: 0; }
    .prose table.layout-table tr + tr { border-top: 1px solid var(--border-color); margin-top: var(--sp-5); padding-top: var(--sp-5); }
}

/* Two 560px data-table scrollers only fit side by side once the container has
   reached its full width, which happens at a 1260px viewport.              */
@media (max-width: 1259.98px) {
    .prose table.layout-table.is-nested,
    .prose table.layout-table.is-nested tbody,
    .prose table.layout-table.is-nested tr,
    .prose table.layout-table.is-nested td {
        display: block;
        width: 100% !important;
        min-width: 0;
    }
    .prose table.layout-table.is-nested td { border-bottom: 0; padding-inline: 0; }
    .prose table.layout-table.is-nested tr + tr { border-top: 1px solid var(--border-color); margin-top: var(--sp-5); padding-top: var(--sp-5); }
    /* Spacer cells the CMS used for gutters have nothing to say once stacked */
    .prose table.layout-table.is-nested td:empty { display: none; }
}

/* --------------------------------------------------------------- Page nav */
.page-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding-top: var(--sp-6);
    margin-top: var(--sp-8);
    border-top: 1px solid var(--border-color);
}
.page-nav__link {
    display: inline-flex;
    flex-direction: column;
    gap: var(--sp-1);
    max-width: 46%;
    text-decoration: none;
    color: var(--text-color);
}
.page-nav__link--next { text-align: right; align-items: flex-end; }
.page-nav__label {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.page-nav__title {
    font-weight: 600;
    font-size: var(--step--1);
    line-height: 1.4;
}
.page-nav__link:hover .page-nav__title { color: var(--primary-color); }
.page-nav__spacer { flex: 1; }

/* ------------------------------------------------------------- Gallery grid */
.gallery-grid {
    display: grid;
    /* Four facility photographs — a 2x2 block reads as a considered set,
       where a three-up grid would leave an orphan on the second row.      */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
}
.gallery-item {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--light-color);
    border: 1px solid var(--border-color);
}
.gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item__zoom {
    position: absolute;
    right: var(--sp-3);
    bottom: var(--sp-3);
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    background: rgba(10, 21, 32, .74);
    color: #fff;
    border-radius: var(--radius);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gallery-item:hover .gallery-item__zoom,
.gallery-item:focus-visible .gallery-item__zoom { opacity: 1; transform: translateY(0); }
.gallery-item__zoom svg { width: 16px; height: 16px; }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    place-items: center;
    padding: var(--sp-6);
    background: rgba(10, 21, 32, .93);
}
.lightbox[open] { display: grid; }
.lightbox img {
    max-width: min(1100px, 92vw);
    max-height: 86vh;
    width: auto;
    object-fit: contain;
    border-radius: var(--radius);
}
.lightbox__close {
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-5);
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--radius);
    cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .22); }
.lightbox__close svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------- Certificate */
.certificate {
    display: block;
    max-width: 620px;
    margin-inline: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--sp-4);
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.certificate:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* -------------------------------------------------------------------- Forms */
.form-grid { display: grid; gap: var(--sp-5); }
.field { display: grid; gap: var(--sp-2); }
.field label {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.field input,
.field textarea {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(19, 121, 196, .16);
}
.field textarea { min-height: 150px; resize: vertical; }
.field__hint { font-size: var(--step--1); color: var(--text-faint); }

.form-note {
    padding: var(--sp-4);
    border-left: 3px solid var(--primary-color);
    background: var(--primary-wash);
    font-size: var(--step--1);
    color: var(--text-muted);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* ---------------------------------------------------------------- CTA band */
.cta-band {
    background: var(--primary-color);
    color: #fff;
}
.cta-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-7);
    flex-wrap: wrap;
    padding-block: var(--sp-8);
}
.cta-band h2 { color: #fff; margin-bottom: var(--sp-3); max-width: 24ch; }
.cta-band p { color: rgba(255, 255, 255, .82); margin-bottom: 0; max-width: 52ch; }

/* ------------------------------------------------------------------ Footer */
.site-footer {
    background: var(--dark-color);
    color: rgba(255, 255, 255, .68);
    font-size: var(--step--1);
}
.site-footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr);
    gap: var(--sp-7);
    padding-block: var(--sp-8);
}
.site-footer__logo { width: 220px; margin-bottom: var(--sp-5); }
.site-footer h2 {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-bottom: var(--sp-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sp-3); }
.site-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-contact dl { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); margin: 0; }
.footer-contact dt { color: rgba(255, 255, 255, .45); font-family: var(--font-mono); font-size: var(--step--2); padding-top: 2px; }
.footer-contact dd { margin: 0; }

.site-footer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    flex-wrap: wrap;
    padding-block: var(--sp-5);
    border-top: 1px solid var(--border-invert);
    color: rgba(255, 255, 255, .5);
    font-size: var(--step--2);
}

/* ------------------------------------------------------------ Scroll reveal
   Applied by animations.js only when motion is welcome, so content is never
   hidden behind a script that failed to run. */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal.is-revealed { opacity: 1; transform: none; }

/* ------------------------------------------------------------- Back to top */
.to-top {
    position: fixed;
    right: var(--sp-5);
    bottom: var(--sp-5);
    z-index: 90;
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    background: var(--primary-color);
    color: #fff;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur), background var(--dur) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--primary-dark); }
.to-top svg { width: 18px; height: 18px; }