/* ==========================================================================
   Warba International Co. for Renting and Leasing (WIC)
   components.css — header, hero, fleet register, cards, forms, footer
   ========================================================================== */

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 13px var(--sp-6);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
    text-decoration: none;
    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 svg { width: 17px; height: 17px; flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translateX(3px); }

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

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

.btn--ghost-invert {
    background: transparent;
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
}
.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-3); }

/* A quiet inline link that still reads as an action. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-display);
    font-weight: 600;
    text-decoration: none;
    color: var(--primary-dark);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid var(--border-color);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-header.is-scrolled {
    box-shadow: var(--shadow-sm);
    border-bottom-color: var(--border-strong);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    min-height: var(--header-h);
}

.brand { display: flex; align-items: center; flex: none; }
.brand img { width: auto; height: 38px; }

/* Hairline cyan progress rule — how far down the page the reader is. It is
   drawn by navigation.js and is the header's only moving part.           */
.site-header__progress {
    position: absolute;
    left: 0; bottom: -1px;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--primary-color);
    pointer-events: none;
}

/* --- Primary nav ---------------------------------------------------------- */
.nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav__list li + li { margin-top: 0; }

.nav__item { position: relative; }

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border: 0;
    background: none;
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 600;
    letter-spacing: .005em;
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius);
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover { color: var(--primary-dark); background: var(--primary-wash); }

/* Active page gets the cyan underscore — the same 2px rule as the eyebrow,
   so "you are here" and "this is the register" share one visual grammar. */
.nav__link[aria-current="page"] { color: var(--primary-dark); }
.nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: 2px;
    height: 2px;
    background: var(--primary-color);
}

.nav__caret { width: 12px; height: 12px; transition: transform var(--dur) var(--ease); }
.nav__item--has-children.is-open .nav__caret { transform: rotate(180deg); }

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

.nav__cta { margin-left: var(--sp-3); }

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

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ink);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }

/* Two-stop scrim: ink from the left so the copy always clears AA, and a
   short lift from the bottom so the vehicle does not float in a void.   */
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, rgba(11, 26, 34, .94) 0%, rgba(11, 26, 34, .8) 34%, rgba(11, 26, 34, .34) 62%, rgba(11, 26, 34, .2) 100%),
        linear-gradient(to top, rgba(11, 26, 34, .8), rgba(11, 26, 34, 0) 48%);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-8);
    padding-block: clamp(72px, 11vw, 140px);
}
.hero__copy { max-width: 44ch; }
.hero h1 { margin-bottom: var(--sp-5); }
.hero__lede { margin-bottom: var(--sp-5); }
.hero .btn-row { margin-top: var(--sp-7); }

/* Page hero — the shorter band used on interior pages. It carries no photo:
   the tally's stroke rhythm is repeated as a faint ground instead, which ties
   the interior pages to the homepage signature without restating it.      */
.page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: repeating-linear-gradient(90deg, rgba(0, 149, 200, .17) 0 2px, transparent 2px 26px);
    -webkit-mask-image: linear-gradient(95deg, transparent 30%, #000 92%);
    mask-image: linear-gradient(95deg, transparent 30%, #000 92%);
    pointer-events: none;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.page-hero__scrim {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(95deg, rgba(11, 26, 34, .96) 0%, rgba(11, 26, 34, .86) 48%, rgba(11, 26, 34, .6) 100%);
}
.page-hero__inner { padding-block: clamp(56px, 7vw, 92px); }
.page-hero h1 { font-size: var(--step-4); margin-bottom: var(--sp-4); }
.page-hero p { max-width: 60ch; margin-bottom: 0; }

/* --- Breadcrumbs ---------------------------------------------------------- */
.breadcrumb { margin-bottom: var(--sp-5); font-family: var(--font-mono); font-size: var(--step--1); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before { content: "/"; color: var(--text-invert-mu); opacity: .55; }
.breadcrumb a { color: var(--text-invert-mu); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current] { color: #fff; }

/* ==========================================================================
   Signature — the fleet tally
   --------------------------------------------------------------------------
   "A well-maintained fleet of over 84 Heavy and Light Equipment ... which
   instead of sitting idle once major projects are demobilized can be leased."
   That sentence is the whole business, so the number is drawn rather than
   written: 84 cells, one per unit, counted out on load like chalk marks on
   a yard board. Nothing else on the site animates on a timer.
   ========================================================================== */
.tally {
    width: min(340px, 100%);
    justify-self: end;
    padding: var(--sp-5);
    border: 1px solid var(--border-invert);
    border-radius: var(--radius);
    background: rgba(11, 26, 34, .62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.tally__grid {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 7px 0;
    margin-bottom: var(--sp-5);
}
.tally__unit {
    width: 7px;
    height: 24px;
    margin-inline: auto;
    border-radius: 1px;
    background: rgba(255, 255, 255, .13);
    transform-origin: 50% 100%;
}
.tally__unit.is-counted {
    background: var(--primary-color);
    animation: tally-mark .34s var(--ease) both;
}
@keyframes tally-mark {
    from { transform: scaleY(.25); opacity: 0; }
    to   { transform: scaleY(1);   opacity: 1; }
}

.tally__figure {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.tally__count {
    font-family: var(--font-display);
    font-size: 2.9rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.tally__count-prefix {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary-color);
}
.tally__label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    line-height: 1.5;
    letter-spacing: .04em;
    color: var(--text-invert-mu);
}

/* ==========================================================================
   Fleet cards
   ========================================================================== */
.fleet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }

.vehicle-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}
.vehicle-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.vehicle-card__media {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--surface-sunken);
    aspect-ratio: 4 / 3;
}
.vehicle-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.vehicle-card:hover .vehicle-card__media img { transform: scale(1.045); }

/* Fleet class marker. Amber is used here and nowhere else on the site. */
.class-tag {
    position: absolute;
    left: var(--sp-3);
    top: var(--sp-3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px var(--sp-3);
    border-radius: var(--radius-sm);
    background: rgba(11, 26, 34, .84);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}
.class-tag::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 1px;
    background: var(--plant);
}
.class-tag--vehicle::before { background: var(--primary-color); }

.vehicle-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--sp-5);
}
.vehicle-card__body h3 { margin-bottom: var(--sp-4); font-size: var(--step-2); }

/* Spec list. Mono, hairline-separated — a spec sheet, not a feature list. */
.spec-list { margin: 0; padding: 0; list-style: none; }
.spec-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin: 0;
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--text-muted);
}
.spec-list li::before {
    content: "";
    flex: none;
    width: 8px; height: 1px;
    margin-top: .68em;
    background: var(--primary-color);
}

/* ==========================================================================
   Service cards
   ========================================================================== */
.service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--sp-6);
    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);
}
.service-card:hover { border-color: var(--primary-color); box-shadow: var(--shadow); }

.service-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    margin-bottom: var(--sp-5);
    border-radius: var(--radius);
    background: var(--primary-wash);
    color: var(--primary-dark);
}
.service-card__icon svg { width: 23px; height: 23px; }
.service-card h3 { margin-bottom: var(--sp-3); font-size: var(--step-1); }
.service-card p { margin: 0; font-size: var(--step--1); color: var(--text-muted); }

/* ==========================================================================
   Feature list ("Why choose us", highlights)
   ========================================================================== */
.feature-list { margin: 0; padding: 0; list-style: none; }
.feature-list li {
    display: flex;
    gap: var(--sp-4);
    margin: 0;
    padding: var(--sp-5) 0;
    border-top: 1px solid var(--border-color);
}
.feature-list li:last-child { border-bottom: 1px solid var(--border-color); }
.on-dark .feature-list li { border-color: var(--border-invert); }

.feature-list__mark {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--primary-wash);
    color: var(--primary-dark);
}
.on-dark .feature-list__mark { background: rgba(0, 149, 200, .18); color: var(--primary-color); }
.feature-list__mark svg { width: 14px; height: 14px; }

.feature-list h3 { margin-bottom: var(--sp-1); font-size: var(--step-1); }
.feature-list p { margin: 0; font-size: var(--step--1); color: var(--text-muted); }
.on-dark .feature-list p { color: var(--text-invert-mu); }

/* Compact variant: a checked list with no headings. */
.check-list { margin: 0; padding: 0; list-style: none; }
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin: 0;
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
}
.on-dark .check-list li { border-color: var(--border-invert); color: var(--text-invert-mu); }
.check-list li:first-child { border-top: 0; }
.check-list svg { flex: none; width: 17px; height: 17px; margin-top: .28em; color: var(--primary-color); }

/* ==========================================================================
   Split — image beside prose
   ========================================================================== */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split__media { margin: 0; }
.split__media img { width: 100%; border-radius: var(--radius); }
.split--reverse .split__media { order: 2; }

/* A framed image: hairline offset rule in brand cyan behind the photo. */
.framed { position: relative; }
.framed::before {
    content: "";
    position: absolute;
    inset: -14px -14px 14px 14px;
    border: 1px solid var(--primary-color);
    border-radius: var(--radius);
    opacity: .38;
    pointer-events: none;
}
.framed img { position: relative; }

/* ==========================================================================
   Statement panel (mission / vision)
   ========================================================================== */
.panel {
    padding: var(--sp-7);
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius);
}
.panel h2, .panel h3 { font-size: var(--step-2); margin-bottom: var(--sp-4); }
.panel p { margin: 0; color: var(--text-muted); text-wrap: pretty; }
.on-dark .panel {
    background: rgba(255, 255, 255, .05);
    border-color: var(--border-invert);
    border-left-color: var(--primary-color);
}
.on-dark .panel p { color: var(--text-invert-mu); }

/* ==========================================================================
   Customer register — who Warba serves
   ========================================================================== */
.register { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; }
.register__item { padding: var(--sp-6) var(--sp-5); border-left: 1px solid var(--border-color); background: var(--surface); }
.register__item:first-child { border-left: 0; }
.register__item h3 { margin: 0; font-size: var(--step-1); }
.register__key {
    display: block;
    margin-bottom: var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--primary-dark);
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: start; }

.contact-list { margin: 0; padding: 0; list-style: none; }
.contact-list li {
    display: flex;
    gap: var(--sp-4);
    margin: 0;
    padding: var(--sp-5) 0;
    border-top: 1px solid var(--border-color);
}
.contact-list li:last-child { border-bottom: 1px solid var(--border-color); }
.contact-list__icon { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--primary-color); }
.contact-list__icon svg { width: 22px; height: 22px; }
.contact-list dt {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 3px;
}
.contact-list dd { margin: 0; font-size: var(--step-1); font-weight: 500; }
.contact-list dd a { color: var(--text-color); text-decoration: none; }
.contact-list dd a:hover { color: var(--primary-dark); text-decoration: underline; }
.contact-list dl { margin: 0; }

/* Opening hours strip. Mono because it is a schedule to be read, not prose. */
.hours {
    padding: var(--sp-5);
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-family: var(--font-mono);
}
.hours dl { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); margin: 0; }
.hours dt { font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.hours dd { margin: 0; font-size: var(--step-1); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-2); }

.form label {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .02em;
}
.form .req { color: var(--primary-dark); }

.form input,
.form textarea {
    width: 100%;
    padding: 12px var(--sp-4);
    font-family: inherit;
    font-size: var(--step-0);
    color: var(--text-color);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form textarea { min-height: 148px; resize: vertical; }
.form input:hover, .form textarea:hover { border-color: var(--text-faint); }
.form input:focus, .form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 149, 200, .16);
}
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] {
    border-color: #B3261E;
    box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}

.field-error {
    min-height: 1.2em;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: #B3261E;
}

.form-note {
    margin: 0;
    padding: var(--sp-4);
    background: var(--primary-wash);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
    color: var(--text-color);
}
.form-note:empty { display: none; }
.form-note.is-error { background: #FCECEA; border-left-color: #B3261E; }

.form-check { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-4); }
.form-check__sum {
    font-family: var(--font-mono);
    font-size: var(--step-1);
    font-weight: 500;
    letter-spacing: .04em;
}

/* ==========================================================================
   Callout strip
   ========================================================================== */
.callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    padding: var(--sp-8);
    background: var(--ink-2);
    border-radius: var(--radius);
    border: 1px solid var(--border-invert);
}
.callout h2 { margin-bottom: var(--sp-2); font-size: var(--step-3); color: #fff; }
.callout p { margin: 0; color: var(--text-invert-mu); max-width: 52ch; }
.callout__body { min-width: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: var(--text-invert-mu); }

.site-footer__main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.4fr;
    gap: var(--sp-8);
    padding-block: var(--sp-9) var(--sp-8);
}
.site-footer__logo { height: 42px; width: auto; margin-bottom: var(--sp-5); }
.site-footer p { font-size: var(--step--1); line-height: 1.65; max-width: 42ch; }

.site-footer h2 {
    margin-bottom: var(--sp-5);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary-color);
}
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer ul li { margin: 0 0 var(--sp-3); }
.site-footer ul a {
    font-size: var(--step--1);
    color: var(--text-invert-mu);
    text-decoration: none;
}
.site-footer ul a:hover { color: #fff; text-decoration: underline; }

.footer-contact dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; }
.footer-contact dt {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint-inv);
    white-space: nowrap;
}
.footer-contact dd { margin: 0; font-size: var(--step--1); color: var(--text-invert-mu); }
.footer-contact dd a { color: var(--text-invert-mu); text-decoration: none; }
.footer-contact dd a:hover { color: #fff; text-decoration: underline; }

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

/* ==========================================================================
   Back to top
   ========================================================================== */
.to-top {
    position: fixed;
    right: var(--sp-5);
    bottom: var(--sp-5);
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    padding: 0;
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--border-invert);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    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: 19px; height: 19px; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal.is-revealed { opacity: 1; transform: none; }

/* ==========================================================================
   Cookie notice — carried over from the source site
   ========================================================================== */
.cookie-note {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 120;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4) var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    background: var(--ink-2);
    border-top: 2px solid var(--primary-color);
    box-shadow: 0 -8px 28px rgba(11, 26, 34, .22);
}
.cookie-note[hidden] { display: none; }
.cookie-note__body { max-width: 76ch; }
.cookie-note h2 {
    margin-bottom: 2px;
    font-size: var(--step-0);
    color: #fff;
}
.cookie-note p {
    margin: 0;
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--text-invert-mu);
}
.cookie-note .btn { flex: none; }