/* =====================================================
   ROMINA ASSISTANT — CHATBOT
   Floating chat widget, premium Romina brand design.
   All positions / sizes use CSS custom properties so
   a single tweak cascades across desktop + mobile.
===================================================== */

/* ── Custom properties (scoped to chatbot) ── */
:root {
    --rc-navy:      #071b3a;
    --rc-navy-2:    #0d2348;
    --rc-red:       #E8132C;
    --rc-white:     #ffffff;
    --rc-border:    rgba(14,34,64,0.10);
    --rc-shadow:    0 8px 40px rgba(7,27,58,0.18), 0 2px 8px rgba(7,27,58,0.10);
    --rc-radius:    16px;
    --rc-btn-size:  54px;
    --rc-ease:      cubic-bezier(.4,0,.2,1);
}

/* ── Floating toggle button ──
   Circular icon-only button. No text label.
   Tooltip shown on hover via CSS ::before pseudo-element.
*/
.rc-toggle {
    position: fixed;
    bottom: 24px;
    right:  24px;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    width:  56px;
    height: 56px;
    background: var(--rc-navy);
    color: var(--rc-white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(7,27,58,0.32), 0 0 0 3px rgba(232,19,44,0.18);
    opacity: 0;
    transform: translateY(12px) scale(0.90);
    transition:
        opacity       0.35s var(--rc-ease),
        transform     0.35s var(--rc-ease),
        box-shadow    0.22s var(--rc-ease);
    will-change: opacity, transform;
    /* Tooltip positioning anchor */
    isolation: isolate;
}

/* Tooltip — appears on hover, keyboard focus */
.rc-toggle::before {
    content: 'Romina Assistant';
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: var(--rc-navy);
    color: var(--rc-white);
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 6px 11px;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(7,27,58,0.22);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s var(--rc-ease);
}

/* Tooltip arrow pointing right */
.rc-toggle::after {
    content: '';
    position: absolute;
    right: calc(100% + 7px);
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: var(--rc-navy);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s var(--rc-ease);
}

.rc-toggle:hover::before,
.rc-toggle:hover::after,
.rc-toggle:focus-visible::before,
.rc-toggle:focus-visible::after {
    opacity: 1;
}

/* Hide tooltip while chat window is open (redundant info) */
.rc-toggle--open::before,
.rc-toggle--open::after { opacity: 0 !important; }

.rc-toggle--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.rc-toggle:hover {
    box-shadow: 0 8px 28px rgba(7,27,58,0.40), 0 0 0 3px rgba(232,19,44,0.30);
    transform: scale(1.05);
    outline: none;
}

.rc-toggle--visible:hover {
    transform: scale(1.05);
}

.rc-toggle:focus-visible {
    outline: 2px solid var(--rc-red);
    outline-offset: 3px;
    box-shadow: 0 4px 20px rgba(7,27,58,0.32);
}

.rc-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ── Chat window ── */
.rc-window {
    position: fixed;
    bottom: 90px;
    right:  24px;
    z-index: 9997;
    width: 380px;
    max-height: 560px;
    background: var(--rc-white);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    box-shadow: var(--rc-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    transform-origin: bottom right;
    transition:
        opacity   0.22s var(--rc-ease),
        transform 0.22s var(--rc-ease);
    will-change: opacity, transform;
}

.rc-window--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── Header ── */
.rc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 14px;
    background: var(--rc-navy);
    color: var(--rc-white);
    flex-shrink: 0;
    border-radius: var(--rc-radius) var(--rc-radius) 0 0;
}

.rc-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rc-header-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 7px;
    flex-shrink: 0;
}

.rc-header-avatar img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.rc-header-name {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 2px;
    color: var(--rc-white);
}

.rc-header-sub {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.60);
    margin: 0;
    font-weight: 400;
}

/* Red dot status indicator */
.rc-header-info::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid var(--rc-navy);
    margin-left: 32px;
    margin-top: 28px;
}

/* ── Close button ── */
.rc-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: rgba(255,255,255,0.80);
    transition: background 0.18s, color 0.18s;
    flex-shrink: 0;
}

.rc-close:hover {
    background: rgba(255,255,255,0.16);
    color: var(--rc-white);
}

.rc-close:focus-visible {
    outline: 2px solid var(--rc-red);
    outline-offset: 2px;
}

/* ── Messages body ── */
.rc-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
    scroll-behavior: smooth;
    background: #f8f9fc;
}

.rc-body::-webkit-scrollbar { width: 4px; }
.rc-body::-webkit-scrollbar-track { background: transparent; }
.rc-body::-webkit-scrollbar-thumb { background: rgba(7,27,58,0.12); border-radius: 2px; }

/* ── Message bubbles ── */
.rc-msg {
    display: flex;
    margin-bottom: 10px;
    animation: rc-msg-in 0.22s var(--rc-ease) both;
}

@keyframes rc-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.rc-msg--bot  { justify-content: flex-start; }
.rc-msg--user { justify-content: flex-end;   }

.rc-bubble {
    max-width: 84%;
    padding: 10px 14px;
    border-radius: 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    line-height: 1.55;
}

.rc-bubble p { margin: 0 0 8px; }
.rc-bubble p:last-child { margin-bottom: 0; }
.rc-bubble a { color: var(--rc-red); text-decoration: underline; }

.rc-msg--bot  .rc-bubble {
    background: var(--rc-white);
    color: #1a2740;
    border-radius: 4px 12px 12px 12px;
    box-shadow: 0 1px 3px rgba(7,27,58,0.08);
}

.rc-msg--user .rc-bubble {
    background: var(--rc-navy);
    color: var(--rc-white);
    border-radius: 12px 4px 12px 12px;
}

/* Subtle nav button inside bot message */
.rc-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 14px;
    background: var(--rc-navy);
    color: var(--rc-white) !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: background 0.18s;
}

.rc-link-btn:hover { background: var(--rc-navy-2); }

.rc-followup {
    color: #667085;
    font-size: 0.8125rem !important;
    font-style: italic;
    margin-top: 8px !important;
}

/* ── Typing indicator ── */
.rc-typing {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 14px;
    min-height: 44px;
}

.rc-typing span {
    width: 7px;
    height: 7px;
    background: rgba(7,27,58,0.3);
    border-radius: 50%;
    display: inline-block;
    animation: rc-bounce 1.2s ease-in-out infinite;
}

.rc-typing span:nth-child(2) { animation-delay: 0.15s; }
.rc-typing span:nth-child(3) { animation-delay: 0.30s; }

@keyframes rc-bounce {
    0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
    30%            { transform: translateY(-5px); opacity: 1;   }
}

/* ── Quick question buttons ── */
.rc-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 4px 14px 10px;
    background: #f8f9fc;
    border-top: 1px solid rgba(7,27,58,0.06);
}

.rc-quick-btn {
    padding: 6px 12px;
    border: 1px solid rgba(7,27,58,0.14);
    border-radius: 20px;
    background: var(--rc-white);
    color: var(--rc-navy);
    font-family: 'Roboto', sans-serif;
    font-size: 0.78125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.16s, border-color 0.16s, color 0.16s;
    white-space: nowrap;
}

.rc-quick-btn:hover {
    background: var(--rc-navy);
    border-color: var(--rc-navy);
    color: var(--rc-white);
}

.rc-quick-btn:focus-visible {
    outline: 2px solid var(--rc-red);
    outline-offset: 2px;
}

/* ── Inline Follow-up Questions ── */
.rc-followups {
    margin: 8px 0 16px 0;
    padding: 0 4px;
    animation: rc-msg-in 0.22s var(--rc-ease) both;
}

.rc-followups-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    color: #667085;
    margin: 0 0 8px 4px;
    font-weight: 500;
}

.rc-followups-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rc-followup-btn {
    padding: 6px 12px;
    border: 1px solid rgba(7,27,58,0.14);
    border-radius: 20px;
    background: var(--rc-white);
    color: var(--rc-navy);
    font-family: 'Roboto', sans-serif;
    font-size: 0.78125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.16s, border-color 0.16s, color 0.16s;
    white-space: nowrap;
}

.rc-followup-btn:hover {
    background: var(--rc-navy);
    border-color: var(--rc-navy);
    color: var(--rc-white);
}

.rc-followup-btn:focus-visible {
    outline: 2px solid var(--rc-red);
    outline-offset: 2px;
}

.rc-followup-btn--reset {
    background: transparent;
    border-color: transparent;
    color: #667085;
}

.rc-followup-btn--reset:hover {
    background: rgba(7,27,58,0.06);
    border-color: transparent;
    color: var(--rc-navy);
}

/* ── Footer / input ── */
.rc-footer {
    padding: 10px 12px 12px;
    border-top: 1px solid var(--rc-border);
    background: var(--rc-white);
    flex-shrink: 0;
}

.rc-form {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1f3f8;
    border-radius: 10px;
    border: 1px solid rgba(7,27,58,0.10);
    padding: 4px 4px 4px 12px;
    transition: border-color 0.18s;
}

.rc-form:focus-within {
    border-color: var(--rc-navy);
}

.rc-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    color: #1a2740;
    outline: none;
    padding: 6px 0;
    min-width: 0;
}

.rc-input::placeholder { color: #9aa5b8; }

.rc-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--rc-navy);
    color: var(--rc-white);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.16s, transform 0.12s;
}

.rc-send:hover  { background: var(--rc-navy-2); }
.rc-send:active { transform: scale(0.94); }

.rc-send:focus-visible {
    outline: 2px solid var(--rc-red);
    outline-offset: 2px;
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .rc-toggle {
        bottom: 16px;
        right:  16px;
        width:  52px;
        height: 52px;
    }

    /* Tooltip position on mobile (above, not to the left) */
    .rc-toggle::before {
        right: auto;
        left: 50%;
        bottom: calc(100% + 10px);
        top: auto;
        transform: translateX(-50%);
    }
    .rc-toggle::after {
        right: auto;
        left: 50%;
        bottom: calc(100% + 5px);
        top: auto;
        transform: translateX(-50%) rotate(90deg);
        border-left-color: transparent;
        border-top-color: var(--rc-navy);
    }

    .rc-window {
        width:  calc(100vw - 20px);
        right:  10px;
        bottom: 80px;
        max-height: 72svh;
        border-radius: 14px;
    }

    .rc-quick { padding: 4px 10px 8px; }
    .rc-bubble { max-width: 90%; font-size: 0.84375rem; }
    .rc-footer { padding: 8px 10px 10px; }
}

/* ── Reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
    .rc-toggle,
    .rc-window,
    .rc-msg,
    .rc-typing span {
        animation: none !important;
        transition: opacity 0.1s !important;
        transform: none !important;
    }
}

/* =====================================================
   ROMINA INTRO ANIMATION
   All timing values follow the approved timing table.
   Only transform, opacity, stroke-dashoffset animated
   (GPU-composited). No width/height/top/left animation.
===================================================== */

/* ── Overlay shell ── */
/* Background is set directly here so the overlay blocks the page
   immediately on first paint — before any JS has run.
   JS will set display:none if the session key is already present. */
.ri-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    contain: layout style paint;
    pointer-events: all;
    background: radial-gradient(ellipse 60% 55% at 50% 45%,
        #0d2348 0%,
        #071b3a 55%,
        #040f22 100%);
}

/* ── Deep navy background with subtle radial warmth ── */
.ri-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 55% at 50% 45%,
            #0d2348 0%,
            #071b3a 55%,
            #040f22 100%);
}

/* ── Stage (SVG container) ── */
.ri-stage {
    position: relative;
    z-index: 1;
    width: min(78vw, 30rem);
    aspect-ratio: 400 / 280;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── SVG fills its container ── */
.ri-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ════════════════════════════════════════════════════
   DEFAULT (hidden) state for all animated elements
   Everything starts invisible / unanimated
   ════════════════════════════════════════════════════ */

/* Red dots — hidden by default */
.ri-dot,
.ri-dot-glow {
    opacity: 0;
    transform-origin: center;
    transform-box: fill-box;
}

/* Connector line — hidden */
.ri-connector {
    opacity: 0;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;   /* fully hidden */
}

/* Pulse ring — hidden */
.ri-pulse-ring {
    opacity: 0;
    transform-origin: center;
    transform-box: fill-box;
    transform: scale(1);
}

/* Frame lines — all collapsed to zero length (hidden via attributes — JS animates via CSS vars) */
.ri-frame {
    opacity: 0;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

/* Wordmark wrapper — opacity + translateY safe on this outer <g>
   because it carries NO SVG transform attribute of its own. */
.ri-wordmark {
    opacity: 0;
    will-change: opacity, transform;
}

/* Official inlined logo overlay — centered over the SVG stage,
   revealed via the shared .ri-wordmark animation. */
.ri-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}
.ri-logo .ri-wordmark {
    width: 62%;
    max-width: 62%;
}
.ri-logo svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* SINCE 1973 text — already in SVG canvas coordinates, CSS transform is safe */
.ri-since {
    opacity: 0;
}

/* Light sweep — starts off left */
.ri-sweep {
    opacity: 0;
}

/* ════════════════════════════════════════════════════
   ACTIVE ANIMATION STATE  (.ri--animate)
   6-SECOND TIMELINE
   ─────────────────────────────────────────────────
   0.0–0.6s   Top red dot appears
   0.6–1.2s   Bottom red dot appears
   1.2–2.2s   Connector draws top→bottom
   2.2–2.5s   Pulse ring at connection point
   2.5–3.1s   Frame H edges extend outward
   3.0–3.4s   Frame V sides reveal
   3.3–3.9s   ROMINA reveals; connector + bottom dot fade out
   3.9–4.4s   SINCE 1973 reveals
   4.4–5.2s   Hold; light sweep at 4.6s
   5.2–6.0s   Overlay fades out
   ════════════════════════════════════════════════════ */

.ri--animate .ri-dot-top {
    animation: ri-dot-appear 0.60s cubic-bezier(.34,1.05,.64,1) 0.00s forwards;
    will-change: opacity, transform;
}
.ri--animate .ri-dot-top-glow {
    animation: ri-dot-appear 0.60s cubic-bezier(.34,1.05,.64,1) 0.00s forwards;
    will-change: opacity, transform;
}

.ri--animate .ri-dot-bottom {
    animation:
        ri-dot-appear 0.60s cubic-bezier(.34,1.05,.64,1) 0.60s forwards,
        ri-fadeout    0.50s ease                          3.30s forwards;
    will-change: opacity, transform;
}
.ri--animate .ri-dot-bottom-glow {
    animation:
        ri-dot-appear 0.60s cubic-bezier(.34,1.05,.64,1) 0.60s forwards,
        ri-fadeout    0.50s ease                          3.30s forwards;
    will-change: opacity, transform;
}

.ri--animate .ri-connector {
    animation:
        ri-line-draw 1.00s cubic-bezier(.65,0,.35,1) 1.20s forwards,
        ri-fadeout   0.50s ease                       3.30s forwards;
}

.ri--animate .ri-pulse-ring {
    animation: ri-pulse-ring-pop 0.30s ease-out 2.20s forwards;
}

.ri--animate .ri-frame-top-l,
.ri--animate .ri-frame-top-r,
.ri--animate .ri-frame-bottom-l,
.ri--animate .ri-frame-bottom-r {
    animation: ri-frame-draw 0.60s cubic-bezier(.4,0,.2,1) 2.50s forwards;
}
.ri--animate .ri-frame-left {
    animation: ri-frame-draw 0.40s cubic-bezier(.4,0,.2,1) 3.00s forwards;
}
.ri--animate .ri-frame-right {
    animation: ri-frame-draw 0.40s cubic-bezier(.4,0,.2,1) 3.00s forwards;
}

.ri--animate .ri-wordmark {
    animation: ri-word-appear 0.60s cubic-bezier(.16,1,.3,1) 3.30s forwards;
}
.ri--animate .ri-since {
    animation: ri-word-appear-since 0.50s cubic-bezier(.16,1,.3,1) 3.90s forwards;
}

.ri--animate .ri-sweep {
    animation: ri-sweep-move 0.50s ease-out 4.60s forwards;
}

.ri--animate {
    animation: ri-overlay-out 0.80s cubic-bezier(.4,0,.2,1) 5.20s forwards;
    will-change: opacity;
}

/* Skip button — appears after 1s so it doesn't flash on load */
.ri--animate .ri-skip {
    animation: ri-skip-appear 0.40s ease 1.00s forwards;
}

/* ════════════════════════════════════════════════════
   KEYFRAMES
   ════════════════════════════════════════════════════ */

@keyframes ri-dot-appear {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1);   }
}

@keyframes ri-fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes ri-line-draw {
    from { opacity: 1; stroke-dashoffset: 1; }
    to   { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes ri-pulse-ring-pop {
    0%   { opacity: 0;   transform: scale(0.8); }
    40%  { opacity: 0.8; transform: scale(1.6); }
    100% { opacity: 0;   transform: scale(2.4); }
}

@keyframes ri-frame-draw {
    from { opacity: 1; stroke-dashoffset: 1; }
    to   { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes ri-word-appear {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0);   }
}

@keyframes ri-word-appear-since {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0);   }
}

@keyframes ri-sweep-move {
    0%   { opacity: 0; transform: translateX(-340px); }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(340px);  }
}

@keyframes ri-overlay-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes ri-skip-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ════════════════════════════════════════════════════
   REDUCED-MOTION FALLBACK  (.ri--reduced)
   Show complete logo for ~1s then fade out.
   ════════════════════════════════════════════════════ */

.ri--reduced .ri-dot,
.ri--reduced .ri-dot-glow {
    animation: ri-reduced-fadein 0.30s ease 0.10s forwards;
}
.ri--reduced .ri-wordmark {
    animation: ri-reduced-fadein 0.30s ease 0.10s forwards;
}
.ri--reduced .ri-since {
    animation: ri-reduced-fadein 0.30s ease 0.10s forwards;
}
.ri--reduced .ri-connector,
.ri--reduced .ri-frame,
.ri--reduced .ri-pulse-ring,
.ri--reduced .ri-sweep { opacity: 0; }

.ri--reduced {
    animation: ri-reduced-fadeout 0.30s ease 1.10s forwards;
}

@keyframes ri-reduced-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ri-reduced-fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Skip button */
.ri-skip {
    position: absolute;
    bottom: 1.5rem;
    right: 2rem;
    z-index: 2;
    background: none;
    border: 1px solid rgba(255,255,255,0.28);
    color: rgba(255,255,255,0.55);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    padding: 0.3em 0.75em;
    cursor: pointer;
    opacity: 0;
    font-family: inherit;
    text-transform: uppercase;
    transition: color 0.2s, border-color 0.2s;
}
.ri-skip:hover,
.ri-skip:focus-visible {
    color: #fff;
    border-color: rgba(255,255,255,0.6);
    outline: none;
}

/* ════════════════════════════════════════════════════
   FRAME LINE GEOMETRY FIX
   SVG lines need proper x1/x2 for the draw animation.
   The JS-independent approach: we set the full endpoint
   values on the SVG elements in the blade partial and
   let dashoffset handle reveal. CSS cannot change SVG
   presentation attrs, so the partial SVG already has
   the correct full endpoints.
   ════════════════════════════════════════════════════ */


/* =====================================================
   GLOBAL
===================================================== */

:root {
    --deep-blue: #071b3a;
    --deep-blue-2: #0b2852;
    --red: #e3262e;
    --white: #ffffff;
    --light: #f5f7fa;
    --dark: #111827;
    --gray: #667085;

    --container: 1380px;
    --transition: 0.45s cubic-bezier(.2,.8,.2,1);
    --section-space: clamp(3.5rem, 7vw, 7rem);
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Roboto", sans-serif;
    color: var(--dark);
    background: var(--white);
    overflow-x: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font-family: inherit;
}


.container {
    width: min(var(--container), calc(100% - 80px));
    margin: 0 auto;
}


/* =====================================================
   HEADER
===================================================== */

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;

    color: var(--white);
}


.nav-wrapper {
    height: 100px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* Logo */

.logo {
    display: flex;
    align-items: center;
    gap: 12px;

    color: var(--white);
}


.logo-mark {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    background: var(--red);

    font-size: 22px;
    font-weight: 900;
}


.logo-text {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 4px;
}


/* Logo dual-state: white by default (transparent header over dark hero) */
.logo-white { display: block; }
.logo-navy  { display: none; }

/* Scrolled state — solid white header */
.site-header.is-scrolled {
    position: fixed;
    background: #fff;
    box-shadow: 0 2px 20px rgba(0,0,0,.12);
}

.site-header.is-scrolled .logo-white { display: none; }
.site-header.is-scrolled .logo-navy  { display: block; }

.site-header.is-scrolled .main-navigation > a,
.site-header.is-scrolled .dropdown-trigger { color: #0E2240; }

.site-header.is-scrolled .main-navigation > a:hover,
.site-header.is-scrolled .dropdown-trigger:hover { color: #0E2240; }

.site-header.is-scrolled .mobile-menu-button { color: #0E2240; }

/* White header: talk button becomes solid red */
.site-header.is-scrolled .main-navigation a.talk-button {
    background: var(--red);
    border-color: var(--red);
    color: var(--white) !important;
}

.site-header.is-scrolled .main-navigation a.talk-button:hover {
    background: #0E2240;
    border-color: #0E2240;
    color: var(--white) !important;
}

.site-header.is-scrolled .main-navigation a.talk-button:focus-visible {
    outline-color: var(--red);
}


/* Light-hero pages (e.g. Jaquar World): dark nav at the top over
   the white hero, keeping the header transparent. The scrolled
   state (.is-scrolled) still takes over on scroll. */
.site-header--light:not(.is-scrolled) .logo-white { display: none; }
.site-header--light:not(.is-scrolled) .logo-navy  { display: block; }

.site-header--light:not(.is-scrolled) .main-navigation > a,
.site-header--light:not(.is-scrolled) .dropdown-trigger { color: #0E2240; }

.site-header--light:not(.is-scrolled) .mobile-menu-button { color: #0E2240; }

.site-header--light:not(.is-scrolled) .main-navigation a.talk-button {
    border-color: rgba(14, 34, 64, .35);
    color: #0E2240 !important;
}

.site-header--light:not(.is-scrolled) .main-navigation a.talk-button:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff !important;
}

.site-header--light:not(.is-scrolled) .lang-opt    { color: rgba(14, 34, 64, .5); }
.site-header--light:not(.is-scrolled) .lang-opt:hover { color: #0E2240; }
.site-header--light:not(.is-scrolled) .lang-opt--on   { color: var(--red); }
.site-header--light:not(.is-scrolled) .lang-div    { color: rgba(14, 34, 64, .2); }


/* Navigation */

.main-navigation {
    display: flex;
    align-items: center;
    gap: 34px;
}


.main-navigation > a,
.dropdown-trigger {
    position: relative;

    color: rgba(255,255,255,.92);

    font-size: 14px;
    font-weight: 500;

    background: transparent;
    border: 0;

    cursor: pointer;

    transition: color var(--transition);
}


.main-navigation > a:not(.talk-button)::after,
.dropdown-trigger::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: var(--red);

    transition: width var(--transition);
}


.main-navigation > a:hover::after,
.dropdown-trigger:hover::after {
    width: 100%;
}


.main-navigation > a:hover,
.dropdown-trigger:hover {
    color: var(--white);
}


/* Let's Talk */

/* Transparent header: white-border ghost button */
.main-navigation a.talk-button {
    display: inline-flex;
    align-items: center;

    padding: 12px 24px;

    background: transparent;
    border: 1px solid rgba(255,255,255,.65);

    color: var(--white) !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    text-transform: uppercase;
    letter-spacing: 1.4px;

    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.main-navigation a.talk-button:hover {
    background: var(--white);
    border-color: var(--white);
    color: #0E2240 !important;
}

.main-navigation a.talk-button:focus-visible {
    outline: 2px solid rgba(255,255,255,.9);
    outline-offset: 3px;
}

.main-navigation a.talk-button::after {
    display: none !important;
}


/* =====================================================
   LANGUAGE SWITCHER — desktop
===================================================== */

.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.lang-opt {
    color: rgba(255,255,255,.55);
    text-decoration: none;
    transition: color 200ms ease;
    padding: 4px 2px;
}

.lang-opt:hover                       { color: var(--white); }
.lang-opt--on                         { color: var(--white); font-weight: 700; }

.lang-div {
    color: rgba(255,255,255,.3);
    font-weight: 300;
    line-height: 1;
}

/* Scrolled (solid white) header */
.site-header.is-scrolled .lang-opt    { color: rgba(14,34,64,.45); }
.site-header.is-scrolled .lang-opt:hover { color: #0E2240; }
.site-header.is-scrolled .lang-opt--on   { color: #C0272D; }
.site-header.is-scrolled .lang-div    { color: rgba(14,34,64,.2); }

.lang-opt:focus-visible {
    outline: 2px solid rgba(255,255,255,.85);
    outline-offset: 3px;
    border-radius: 2px;
}
.site-header.is-scrolled .lang-opt:focus-visible {
    outline-color: #0E2240;
}


/* =====================================================
   MEGA MENU
===================================================== */

.nav-dropdown {
    position: relative;
}


.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
}


.dropdown-arrow {
    font-size: 11px;
    transition: transform var(--transition);
}


.nav-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}


.mega-menu {
    position: absolute;

    top: calc(100% + 34px);
    right: -450px;

    width: 1000px;

    padding: 42px;

    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 35px;

    background: var(--white);

    color: var(--deep-blue);

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    box-shadow: 0 25px 70px rgba(0,0,0,.2);

    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);
}


.nav-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.mega-menu-intro {
    padding-right: 25px;

    border-right: 1px solid #e5e7eb;
}


.menu-label,
.column-title,
.section-label {
    display: block;

    color: var(--red);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}


.mega-menu-intro h3 {
    margin: 15px 0;

    font-size: 26px;
    line-height: 1.15;
}


.mega-menu-intro p {
    color: #667085;

    font-size: 13px;
    line-height: 1.7;
}


.column-title {
    margin-bottom: 14px;
    padding-bottom: 12px;

    /* underline separating the headline from the menu links below */
    border-bottom: 1px solid #cbd2db;

    color: var(--deep-blue);
    letter-spacing: .5px;
}


.mega-column {
    display: flex;
    flex-direction: column;
    gap: 0;
}


.mega-column a {
    padding: 11px 0;

    font-size: 14px;
    font-weight: 500;

    transition: color var(--transition);
}


.mega-column a:hover {
    color: var(--red);
}


.mega-column small {
    display: block;

    margin-top: 4px;

    color: #98a2b3;

    font-size: 10px;
}


/* About mega menu — anchored to the header's right edge instead of the
   trigger, so it lines up with the Businesses menu without overflowing. */

.nav-wrapper {
    position: relative;
}


.nav-dropdown--about {
    position: static;
}


.nav-dropdown--about .mega-menu {
    top: calc(100% - 8px);
    right: 0;

    width: min(760px, 100%);

    grid-template-columns: 1.3fr 1fr 1fr;
}


.nav-dropdown.is-current .dropdown-trigger::after,
.main-navigation > a[aria-current="page"]::after {
    width: 100%;
}


.mega-column a[aria-current="page"] {
    color: var(--red);
}


/* =====================================================
   HERO
===================================================== */

.hero {
    position: relative;

    height: 100vh;
    min-height: 700px;

    overflow: hidden;

    background: var(--deep-blue);
}


.hero-slides,
.hero-slide {
    position: absolute;

    inset: 0;
}


.hero-slide {
    opacity: 0;
    visibility: hidden;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}


.hero-slide.active {
    opacity: 1;
    visibility: visible;
}


.hero-background {
    position: absolute;

    inset: 0;

    background-position: center;
    background-size: cover;

    transform: scale(1.05);

    transition: transform 7s ease;
}


.hero-slide.active .hero-background {
    transform: scale(1);
}


.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 20, 45, .92) 0%,
            rgba(4, 20, 45, .68) 42%,
            rgba(4, 20, 45, .18) 100%
        ),
        linear-gradient(
            0deg,
            rgba(4,20,45,.55),
            transparent 40%
        );
}


.hero-content {
    position: relative;
    z-index: 2;

    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: center;

    padding-top: 100px;
}


.hero-category {
    margin-bottom: 25px;

    color: var(--red);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 4px;
}


.hero-content h1 {
    max-width: 850px;

    color: var(--white);

    font-size: clamp(52px, 6vw, 94px);

    font-weight: 700;

    line-height: .98;

    letter-spacing: -3px;
}


.hero-content h1 span {
    color: #b8c5d8;
}


.hero-content p {
    max-width: 600px;

    margin-top: 32px;

    color: rgba(255,255,255,.78);

    font-size: 17px;
    line-height: 1.7;
}


.hero-link {
    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 25px;

    margin-top: 38px;

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(255,255,255,.6);

    color: var(--white);

    font-size: 14px;
    font-weight: 700;

    transition:
        gap var(--transition),
        color var(--transition);
}


.hero-link:hover {
    gap: 35px;
    color: #ff5960;
}


.hero-link span {
    color: var(--red);
    font-size: 20px;
}


/* =====================================================
   HERO CONTROLS
===================================================== */

.hero-controls {
    position: absolute;

    z-index: 20;

    bottom: 55px;
    left: 50%;
    transform: translateX(-50%);

    display: grid;
    grid-template-columns: 80px 1fr 120px;
    align-items: center;

    gap: 35px;
}


/* Counter */

.slide-counter {
    color: var(--white);

    font-size: 13px;
    font-weight: 500;

    white-space: nowrap;
}


.current-slide {
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
}


.counter-divider {
    margin: 0 5px;
    color: rgba(255,255,255,.45);
}


/* Progress */

.slide-progress {
    position: relative;
}


.progress-line {
    position: relative;

    width: 100%;
    height: 1px;

    background: rgba(255,255,255,.3);
}


.progress-active {
    position: absolute;

    top: 0;
    left: 0;

    height: 1px;
    width: 33.33%;

    background: var(--white);

    transition: width .5s ease;
}


.progress-dot {
    position: absolute;

    top: -4px;
    left: calc(33.33% - 5px);

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: var(--red);

    box-shadow: 0 0 0 5px rgba(227,38,46,.15);

    transition: left .5s ease;
}


/* Arrows */

.slide-arrows {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}


.slide-arrow {
    width: 48px;
    height: 48px;

    border: 1px solid rgba(255,255,255,.45);

    background: transparent;

    color: var(--white);

    font-size: 20px;

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition);
}


.slide-arrow:hover {
    background: var(--red);
    border-color: var(--red);
}


/* =====================================================
   ABOUT
===================================================== */

.content-section {
    padding: 100px 0;
}


.about-section {
    padding: clamp(20px, 3vw, 40px) 0 clamp(40px, 5vw, 64px);
    background: var(--white);
}


/* --- two-column intro --- */

.about-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(40px, 7vw, 120px);
    align-items: start;
}


.about-mark {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: var(--red);

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.about-mark::before {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    background: var(--red);
}


.about-heading {
    margin-top: 20px;

    color: var(--deep-blue);

    font-size: clamp(34px, 4.6vw, 66px);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -.022em;
    max-width: 18ch;
}


.about-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 6px;
}


.amh {
    font-size: 20px;
    font-weight: 500;
    color: var(--red);
    letter-spacing: .5px;
}


.about-sub {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
    color: var(--deep-blue);
    line-height: 1.2;
    letter-spacing: -.5px;
}


.about-body {
    font-size: 17px;
    line-height: 1.8;
    color: var(--gray);
    max-width: 48ch;
}


/* --- timeline --- */

.tl {
    margin-top: clamp(36px, 5vw, 60px);
}


.tl-rail {
    position: relative;
    height: 110px;
    margin: 0 clamp(0px, 2vw, 24px);
}


.tl-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    height: 4px;
    background: var(--deep-blue);
}


.tl-dot {
    position: absolute;
    top: 34px;
    left: 0%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 6px var(--white);
    z-index: 2;
    transition: left .9s cubic-bezier(.77,0,.18,1);
}


.tl-node {
    position: absolute;
    top: 0;
    left: var(--pos, 0%);
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    text-align: center;
    width: 140px;

    background: transparent;
    border: 0;
    cursor: pointer;

    padding: 0;
}


.tl-node:first-of-type {
    align-items: flex-start;
    text-align: left;
    transform: none;
}

.tl-node:last-of-type {
    align-items: flex-end;
    text-align: right;
    transform: translateX(-100%);
}

.tl-node::before {
    content: "";
    position: absolute;
    top: 36px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--deep-blue);
    transition: border-color .3s, background .3s;
}

.tl-node:first-of-type::before {
    left: 0;
    margin-left: -6px;
}

.tl-node:last-of-type::before {
    left: auto;
    right: 0;
    margin-right: -6px;
}

.tl-node.on::before {
    background: var(--red);
    border-color: var(--red);
}


.tl-year {
    font-size: 17px;
    font-weight: 700;
    color: var(--deep-blue);
    transition: color .3s;
}

.tl-title {
    font-size: 13px;
    color: var(--gray);
    transition: color .3s;
}

.tl-node.on .tl-year {
    color: var(--red);
}

.tl-node.on .tl-title {
    color: var(--dark);
}


/* --- timeline detail --- */

.tl-detail {
    margin-top: 40px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(24px, 5vw, 72px);
    align-items: center;
    padding-top: 36px;
    border-top: 1px solid #e5e7eb;
}

.tl-detail.tl-animate {
    animation: tlFadeUp .55s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes tlFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}


.tl-big {
    font-weight: 900;
    font-size: clamp(64px, 9vw, 136px);
    line-height: .9;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--deep-blue);
    user-select: none;
}


.tl-detail p {
    font-size: clamp(18px, 1.6vw, 23px);
    font-weight: 300;
    line-height: 1.6;
    color: var(--dark);
    max-width: 42ch;
}


/* --- section heading shared --- */

.section-heading h2 {
    margin-top: 20px;
    color: var(--deep-blue);
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1;
    letter-spacing: -2px;
}

.section-heading h2 span {
    color: #8290a5;
}


/* --- legacy helpers kept for other sections --- */

.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}

.section-description {
    max-width: 600px;
    padding-top: 35px;
}

.section-description p {
    margin-bottom: 25px;
    color: #667085;
    font-size: 18px;
    line-height: 1.8;
}


/* --- responsive --- */

@media (max-width: 900px) {

    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .tl-rail {
        height: auto;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-left: 28px;
    }

    .tl-line {
        left: 6px;
        right: auto;
        top: 6px;
        bottom: 6px;
        width: 3px;
        height: auto;
    }

    .tl-dot { display: none; }

    .tl-node,
    .tl-node:first-of-type,
    .tl-node:last-of-type {
        position: relative;
        left: auto !important;
        transform: none;
        align-items: flex-start;
        text-align: left;
        flex-direction: row;
        gap: 16px;
        width: auto;
        padding: 12px 0;
    }

    .tl-node::before,
    .tl-node:first-of-type::before,
    .tl-node:last-of-type::before {
        left: -28px;
        right: auto;
        top: 17px;
        margin: 0;
    }

    .tl-year { min-width: 52px; }

    .tl-detail {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .tl-big { display: none; }

}


/* Our story: desktop entrance — nodes fade in when tl-entered is set */
@media (min-width: 769px) {
    .tl-rail:not(.tl-entered) .tl-node { opacity: 0; }

    .tl-rail.tl-entered .tl-node {
        animation: tlNodeIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    .tl-rail.tl-entered .tl-node[data-index="0"] { animation-delay:   0ms; }
    .tl-rail.tl-entered .tl-node[data-index="1"] { animation-delay: 100ms; }
    .tl-rail.tl-entered .tl-node[data-index="2"] { animation-delay: 200ms; }
    .tl-rail.tl-entered .tl-node[data-index="3"] { animation-delay: 300ms; }
    .tl-rail.tl-entered .tl-node[data-index="4"] { animation-delay: 400ms; }
}

@keyframes tlNodeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .tl-rail:not(.tl-entered) .tl-node { opacity: 1 !important; }
    .tl-rail.tl-entered .tl-node       { animation: none !important; }
}


/* =====================================================
   Our story: sqrt-weighted dot positions — desktop ≥1024px
===================================================== */
@media (min-width: 1024px) {
    .tl-node { left: var(--pos) !important; }
}


/* =====================================================
   Our story: mobile staircase
===================================================== */
@media (max-width: 768px) {

    /* Breathing room above the staircase and before story text */
    .tl { margin-top: clamp(48px, 8vw, 72px); }

    .tl-detail {
        margin-top: clamp(32px, 5vw, 48px);
        padding-top: clamp(24px, 4vw, 36px);
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .tl-big  { display: none; }
    .tl-dot  { display: none; }
    .tl-line { display: none; }

    /* Rail: column-reverse → Today top-left, 1973 bottom-right */
    .tl-rail {
        position: relative;
        height: auto;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column-reverse;
        gap: 0;
    }

    /* Staircase offsets: Today (i=4) top-left, 1973 (i=0) bottom-right */
    .tl-node[data-index="0"] { margin-left: 36%; }
    .tl-node[data-index="1"] { margin-left: 27%; }
    .tl-node[data-index="2"] { margin-left: 18%; }
    .tl-node[data-index="3"] { margin-left:  9%; }
    .tl-node[data-index="4"] { margin-left:  0;  }

    /* Step block: tread (border-top) + riser (border-right) */
    .tl-node,
    .tl-node:first-of-type,
    .tl-node:last-of-type {
        position: relative;
        left: auto !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        text-align: left;
        gap: 4px;
        width: 55%;
        min-height: 56px;
        padding: 8px 10px;
        border-top:    3px solid rgba(7, 27, 58, 0.22);
        border-right:  3px solid rgba(7, 27, 58, 0.22);
        border-left:   none;
        border-bottom: none;
        border-radius: 0;
        background: transparent;
        cursor: pointer;
        transform: none;
        transition:
            border-color 200ms ease,
            background   200ms ease,
            box-shadow   200ms ease;
    }

    /* Past (climbed) steps: full-opacity navy */
    .tl-node.past {
        border-top-color:   var(--deep-blue);
        border-right-color: var(--deep-blue);
    }

    /* Active step: red tread + riser, red-tinted background */
    .tl-node.on {
        border-top-color:   var(--red);
        border-right-color: var(--red);
        background: rgba(227, 38, 46, 0.04);
    }

    /* Pressed: slight lift */
    .tl-node:active {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(7, 27, 58, 0.12);
    }

    .tl-node:focus-visible {
        outline: 2px solid rgba(7, 27, 58, 0.45);
        outline-offset: 3px;
    }

    /* Corner fallback dot (right-top corner; hidden when ball is present) */
    .tl-node::before,
    .tl-node:first-of-type::before,
    .tl-node:last-of-type::before {
        content: '';
        position: absolute;
        top:   -5px;
        right: -5px;
        left:   auto;
        margin: 0;
        transform: none;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: none;
        background: transparent;
        box-shadow: none;
        z-index: 2;
        transition: background 200ms ease, box-shadow 200ms ease;
    }

    .tl-node.on::before {
        background: var(--red);
        box-shadow: 0 0 0 4px rgba(227, 38, 46, 0.2);
    }

    /* Ball present: suppress the fallback dot */
    .tl-rail.tl-has-ball .tl-node.on::before {
        background: transparent;
        box-shadow: none;
    }

    /* Bouncing red ball */
    .tl-ball {
        position: absolute;
        top: 0;
        left: 0;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--red);
        box-shadow:
            0 2px 8px  rgba(227, 38, 46, 0.45),
            0 1px 3px  rgba(0, 0, 0, 0.15);
        pointer-events: none;
        transform-origin: center bottom;
        will-change: transform;
        z-index: 5;
    }

    /* Year: bold, faded until reached */
    .tl-year {
        display: block;
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--deep-blue);
        min-width: auto;
        line-height: 1;
        opacity: 0.28;
        transition: color 200ms ease, opacity 200ms ease;
    }

    .tl-node.past .tl-year { opacity: 1; }
    .tl-node.on   .tl-year { opacity: 1; color: var(--red); }

    /* Title: visible only for past/active steps */
    .tl-title {
        display: block;
        font-size: 0.82rem;
        font-weight: 400;
        color: var(--deep-blue);
        line-height: 1.3;
        opacity: 0.28;
        transition: color 200ms ease, opacity 200ms ease;
    }

    .tl-node.past .tl-title { opacity: 0.65; }
    .tl-node.on   .tl-title { opacity: 1; color: var(--dark); }

    /* Entrance animation */
    .tl-rail:not(.tl-entered) .tl-node {
        opacity: 0;
        transform: translateY(20px);
    }

    .tl-rail.tl-entered .tl-node {
        animation: tlStepIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    .tl-rail.tl-entered .tl-node[data-index="0"] { animation-delay:   0ms; }
    .tl-rail.tl-entered .tl-node[data-index="1"] { animation-delay:  80ms; }
    .tl-rail.tl-entered .tl-node[data-index="2"] { animation-delay: 160ms; }
    .tl-rail.tl-entered .tl-node[data-index="3"] { animation-delay: 240ms; }
    .tl-rail.tl-entered .tl-node[data-index="4"] { animation-delay: 320ms; }

}

@keyframes tlStepIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .tl-rail:not(.tl-entered) .tl-node {
        opacity: 1 !important;
        transform: none !important;
    }
    .tl-rail.tl-entered .tl-node {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
    .tl-node,
    .tl-node::before,
    .tl-year,
    .tl-title { transition: none !important; }
}


/* =====================================================
   BUSINESSES
===================================================== */

.businesses-section {
    padding: 20px 0;

    background: var(--light);
}


.section-heading {
    margin-bottom: 70px;
}


.business-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}


.business-card {
    position: relative;

    height: 600px;

    overflow: hidden;

    background: var(--deep-blue);

    color: var(--white);
}


.business-image {
    position: absolute;

    inset: 0;

    background-position: center;
    background-size: cover;

    transition: transform .8s ease;
}


.business-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(4,20,45,.95) 0%,
            rgba(4,20,45,.15) 70%
        );
}


.business-card:hover .business-image {
    transform: scale(1.08);
}


.business-card-content {
    position: absolute;

    z-index: 2;

    inset: auto 35px 35px;

    display: flex;
    flex-direction: column;
}


.business-card-content > span {
    margin-bottom: 18px;

    color: var(--red);

    font-size: 12px;
    font-weight: 700;
}


.business-card h3 {
    font-size: 30px;
    line-height: 1.1;
}


.business-arrow {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.5);

    font-size: 20px;

    transition:
        background var(--transition),
        border-color var(--transition);
}


.business-card:hover .business-arrow {
    background: var(--red);
    border-color: var(--red);
}


/* =====================================================
   SUSTAINABILITY
===================================================== */

.sustainability-section {
    position: relative;

    padding: 170px 0;

    background:
        linear-gradient(
            100deg,
            rgba(7,27,58,.98),
            rgba(7,27,58,.78)
        ),
        url("../images/sustainability.jpg")
        center / cover;
}


.sustainability-content {
    color: var(--white);
}


.sustainability-section h2 {
    color: var(--white);
}


.sustainability-section h2 span {
    color: #8ea2bf;
}


.sustainability-section p {
    max-width: 650px;

    margin-top: 30px;

    color: rgba(255,255,255,.7);

    font-size: 18px;
    line-height: 1.8;
}

/* Ensure .mark labels inside sustainability sections stay navy on white bg */
.sustainability-section .mark,
.sustainability-details .mark { color: #0E2240; }


.outline-button {
    display: inline-flex;
    align-items: center;
    gap: 20px;

    margin-top: 40px;

    padding: 16px 25px;

    border: 1px solid rgba(255,255,255,.5);

    color: var(--white);

    font-size: 13px;
    font-weight: 700;

    transition:
        background var(--transition),
        border-color var(--transition);
}


.outline-button:hover {
    background: var(--red);
    border-color: var(--red);
}


/* =====================================================
   FOOTER
===================================================== */

.footer {
    padding: 90px 0 30px;

    background: #04152f;

    color: var(--white);
}


.footer-top {
    display: flex;
    justify-content: space-between;

    padding-bottom: 80px;
}


.footer-brand p {
    margin-top: 25px;

    color: #8290a5;

    line-height: 1.7;
}


.footer-links {
    display: flex;
    gap: 120px;
}


.footer-links div {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


.footer-links span {
    margin-bottom: 10px;

    color: var(--red);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
}


.footer-links a {
    color: #b9c4d4;

    font-size: 14px;

    transition: color var(--transition);
}


.footer-links a:hover {
    color: var(--white);
}


.footer-bottom {
    display: flex;
    justify-content: space-between;

    padding-top: 25px;

    border-top: 1px solid rgba(255,255,255,.1);

    color: #687a96;

    font-size: 11px;
}


/* =====================================================
   MOBILE MENU BUTTON
===================================================== */

.mobile-menu-button {
    display: none;

    width: 48px;
    height: 48px;

    place-items: center;

    background: transparent;
    border: 1px solid rgba(255,255,255,.35);

    color: var(--white);
    font-size: 18px;

    cursor: pointer;

    transition: border-color var(--transition);
}

.mobile-menu-button:hover {
    border-color: rgba(255,255,255,.75);
}


/* =====================================================
   MOBILE NAV OVERLAY
===================================================== */

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 200;

    background: var(--deep-blue);
    color: var(--white);

    display: flex;
    flex-direction: column;
    overflow-y: auto;

    /* circle originates from burger button position */
    clip-path: circle(0% at calc(100% - 34px) 48px);
    visibility: hidden;

    transition:
        clip-path .8s cubic-bezier(.77,0,.18,1),
        visibility 0s linear .8s;
}

.mobile-nav.open {
    clip-path: circle(150% at calc(100% - 34px) 48px);
    visibility: visible;

    transition:
        clip-path .8s cubic-bezier(.77,0,.18,1),
        visibility 0s;
}


/* Top bar */

.mobile-nav-top {
    height: 100px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-nav-close {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    background: transparent;
    border: 1px solid rgba(255,255,255,.3);

    color: var(--white);
    font-size: 20px;

    cursor: pointer;

    transition: border-color var(--transition);
}

.mobile-nav-close:hover {
    border-color: rgba(255,255,255,.75);
}


/* Nav links */

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 24px;
}

.mobile-nav-links a {
    display: block;

    font-size: clamp(36px, 10vw, 52px);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1.2;

    color: var(--white);

    opacity: 0;
    transform: translateY(24px);

    transition:
        opacity .6s var(--transition),
        transform .6s var(--transition),
        color .25s;
}

.mobile-nav.open .mobile-nav-links a {
    opacity: 1;
    transform: none;
    transition-delay: calc(.25s + var(--d));
}

.mobile-nav-links a:hover {
    color: var(--red);
}


/* Brand pills */

.mobile-nav-brands {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 36px;
}

.mobile-nav-brands span {
    font-size: 14px;
    color: rgba(255,255,255,.5);

    transition: color var(--transition);
}

.mobile-nav-brands span:hover {
    color: rgba(255,255,255,.9);
    cursor: default;
}


/* Footer */

.mobile-nav-foot {
    margin-top: auto;
    padding: 36px 0;

    border-top: 1px solid rgba(255,255,255,.12);
}

.mobile-nav-foot a {
    font-size: 14px;
    color: rgba(255,255,255,.55);

    transition: color var(--transition);
}

.mobile-nav-foot a:hover {
    color: var(--white);
}


/* =====================================================
   LANGUAGE SWITCHER — mobile overlay
===================================================== */

.mobile-lang-sw {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255,255,255,.12);
    margin-bottom: 0;
}

.mobile-lang-opt {
    display: block;
    padding: 14px 0;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,.5);
    text-decoration: none;
    transition: color 200ms ease;
    min-height: 44px;
}

.mobile-lang-opt:hover   { color: var(--white); }
.mobile-lang-opt--on     { color: var(--white); font-weight: 700; }

.mobile-lang-opt:focus-visible {
    outline: 2px solid rgba(255,255,255,.8);
    outline-offset: 4px;
    border-radius: 2px;
}


/* =====================================================
   Mobile menu: centered (client trial)
   Revert by removing .mobile-menu--centered from #mobileNav
===================================================== */

/* 1 — Center all sections */
.mobile-menu--centered .mobile-nav-links {
    align-items: center;
    gap: clamp(0.75rem, 3vh, 1.5rem);
    margin-top: clamp(1.5rem, 4vh, 2.5rem);
}

.mobile-menu--centered .mobile-nav-brands {
    justify-content: center;
    margin-top: clamp(1.5rem, 3.5vh, 2.5rem);
}

.mobile-menu--centered .mobile-nav-foot {
    display: flex;
    justify-content: center;
}

/* 2 — Main links: full-width tappable rows with dividers */
.mobile-menu--centered .mobile-nav-links a {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
    transition:
        opacity .6s var(--transition),
        transform .6s var(--transition),
        color .25s,
        background-color 150ms ease;
}

.mobile-menu--centered .mobile-nav-links a:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* 3 — Active/hover/focus states */
.mobile-menu--centered .mobile-nav-links a:hover,
.mobile-menu--centered .mobile-nav-links a:focus-visible {
    color: var(--white);
    background-color: rgba(255, 255, 255, 0.06);
    outline: none;
}

.mobile-menu--centered .mobile-nav-links a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: -2px;
}

/* Red dot indicator for hover/active and current page */
/* Span wraps the text so ::after is exactly as wide as the letters */
.mobile-menu--centered .mobile-nav-links a span {
    position: relative;
    display: inline-block;
}

.mobile-menu--centered .mobile-nav-links a span::after {
    content: '';
    position: absolute;
    bottom: -10px;          /* gap between text baseline and line */
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--red);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 150ms ease;
}

.mobile-menu--centered .mobile-nav-links a:hover span::after,
.mobile-menu--centered .mobile-nav-links a:focus-visible span::after,
.mobile-menu--centered .mobile-nav-links a[aria-current="page"] span::after {
    transform: scaleX(1);
}

/* 4 — Business brand pills */
.mobile-menu--centered .mobile-nav-brands span {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 999px;
    font-size: 13px;
    transition:
        color var(--transition),
        border-color var(--transition);
}

.mobile-menu--centered .mobile-nav-brands span:hover {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.50);
}

/* 5 — Stagger fade-in when menu opens */
@media (prefers-reduced-motion: no-preference) {
    .mobile-menu--centered .mobile-nav-links a {
        opacity: 0;
        transform: translateY(20px);
    }

    .mobile-nav.open.mobile-menu--centered .mobile-nav-links a {
        opacity: 1;
        transform: none;
        transition-delay: calc(.3s + var(--d));
    }
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1100px) {

    .main-navigation {
        gap: 18px;
    }

    .mega-menu {
        right: -150px;
        width: 850px;
    }

    .hero-content h1 {
        font-size: 65px;
    }

    .business-card {
        height: 500px;
    }

}


@media (max-width: 900px) {

    .container {
        width: min(
            var(--container),
            calc(100% - 40px)
        );
    }


    .main-navigation {
        display: none;
    }


    .mobile-menu-button {
        display: grid;
    }


    .hero {
        min-height: 650px;
    }


    .hero-content h1 {
        font-size: 52px;
    }


    .hero-content p {
        max-width: 500px;
        font-size: 15px;
    }


    .hero-controls {
        grid-template-columns: 65px 1fr 105px;

        gap: 20px;

        bottom: 35px;
    }


    .two-column {
        grid-template-columns: 1fr;
        gap: 30px;
    }


    .business-grid {
        grid-template-columns: 1fr;
    }


    .business-card {
        height: 500px;
    }


    .footer-top {
        flex-direction: column;
        gap: 60px;
    }

}


@media (max-width: 600px) {

    .nav-wrapper {
        height: 80px;
    }


    .logo-mark {
        width: 36px;
        height: 36px;
    }


    .logo-text {
        font-size: 15px;
        letter-spacing: 3px;
    }


    .hero-content {
        padding-top: 60px;
    }


    .hero-content h1 {
        font-size: 44px;
        letter-spacing: -1.5px;
    }


    .hero-content p {
        font-size: 14px;
        line-height: 1.6;
    }


    .hero-controls {
        grid-template-columns: 55px 1fr;

        gap: 15px;
    }


    .slide-arrows {
        position: absolute;

        right: 0;
        bottom: 65px;
    }


    .slide-arrow {
        width: 42px;
        height: 42px;
    }


    .content-section,
    .businesses-section {
        padding: 90px 0;
    }


    .about-section h2,
    .section-heading h2,
    .sustainability-section h2 {
        font-size: 43px;
    }


    .business-card {
        height: 450px;
    }


    .footer {
        padding-top: 70px;
    }


    .footer-links {
        gap: 50px;
    }


    .footer-bottom {
        flex-direction: column;
        gap: 15px;
    }

}

/* =====================================================
   BUSINESS PORTFOLIO
   VERTICAL SCROLL -> HORIZONTAL MOVEMENT
===================================================== */

.portfolio-section {
    position: relative;

    /*
     * This creates the vertical scrolling distance.
     * The longer this is, the slower the cards move.
     */
    height: 400vh;

    background: var(--deep-blue);

    color: var(--white);

    padding-bottom: clamp(60px, 8vw, 120px);
}


/* =====================================================
   STICKY VIEWPORT
===================================================== */

.portfolio-section > .container {
    position: sticky;

    top: 0;

    width: min(
        var(--container),
        calc(100% - 80px)
    );

    height: 100vh;

    padding-top: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;
}


/* =====================================================
   HEADER
===================================================== */

.portfolio-header {
    display: flex;

    flex-direction: column;

    margin-top: 60px;
    margin-bottom: 60px;

    flex-shrink: 0;
}

.portfolio-header .mark {
    margin-bottom: 14px;
}

/* .portfolio-label replaced by .mark.tone-white */


.portfolio-header h2 span {
    color: #8396b2;
}


.portfolio-intro {
    max-width: 500px;
}


.portfolio-intro p {
    color: rgba(255,255,255,.62);

    font-size: 15px;

    line-height: 1.8;
}


/* =====================================================
   SLIDER VIEWPORT
===================================================== */

.portfolio-slider-wrapper {

    width: 100%;

    overflow: visible;

    flex-shrink: 0;
}


/* =====================================================
   HORIZONTAL TRACK
===================================================== */

.portfolio-track {

    display: flex;

    gap: 25px;

    width: max-content;

    /*
     * JavaScript controls this.
     */
    transform:
        translate3d(0, 0, 0);

    will-change: transform;

}


/* =====================================================
   CARD
===================================================== */

.portfolio-card {

    position: relative;

    flex: 0 0 1050px;

    height: 500px;

    display: grid;

    grid-template-columns: 48% 52%;

    background: #0b2852;

    border:
        1px solid
        rgba(255,255,255,.08);

    overflow: hidden;

}


/* =====================================================
   IMAGE
===================================================== */

.portfolio-image {

    position: relative;

    width: 100%;

    height: 500px;

    overflow: hidden;
}


.portfolio-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


.portfolio-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(4,18,40,.9),
            transparent 55%
        );

}


.portfolio-image-caption {

    position: absolute;

    z-index: 2;

    left: 30px;

    right: 30px;

    bottom: 28px;

    color: rgba(255,255,255,.9);

    font-size: 12px;

    line-height: 1.5;

}


/* =====================================================
   CONTENT
===================================================== */

.portfolio-card-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 55px 60px;

}


.portfolio-number {

    margin-bottom: 18px;

    color: var(--red);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

}


.portfolio-card-content h3 {

    max-width: 470px;

    color: var(--white);

    font-size: 45px;

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -1.5px;

}


.portfolio-card-content > p {

    max-width: 470px;

    margin-top: 22px;

    color: rgba(255,255,255,.62);

    font-size: 14px;

    line-height: 1.75;

}


/* =====================================================
   PILLS
===================================================== */

.portfolio-pills {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 25px;

}


.portfolio-pills span {

    padding: 8px 13px;

    border:
        1px solid
        rgba(255,255,255,.2);

    border-radius: 100px;

    color: rgba(255,255,255,.78);

    font-size: 10px;

    white-space: nowrap;

}


/* =====================================================
   LINK
===================================================== */

.portfolio-link {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 20px;

    margin-top: 28px;

    padding-bottom: 8px;

    border-bottom:
        1px solid
        rgba(255,255,255,.4);

    color: var(--white);

    font-size: 12px;

    font-weight: 700;

}


.portfolio-link span {

    color: var(--red);

    font-size: 18px;

}


/* =====================================================
   PROGRESS
===================================================== */

.portfolio-scroll-controls {

    display: grid;

    grid-template-columns:
        70px
        1fr;

    align-items: center;

    gap: 25px;

    margin-top: 35px;

    flex-shrink: 0;

}


.portfolio-counter {

    display: flex;

    gap: 5px;

    color: rgba(255,255,255,.4);

    font-size: 13px;

}


.portfolio-current {

    color: var(--white);

    font-size: 18px;

    font-weight: 700;

}


/* line */

.portfolio-progress {

    width: 100%;

}


.portfolio-progress-line {

    position: relative;

    width: 100%;

    height: 1px;

    background:
        rgba(255,255,255,.22);

}


.portfolio-progress-active {

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 1px;

    background: var(--white);

    transition: width .08s linear;

}


/* RED DOT */

.portfolio-progress-dot {

    position: absolute;

    top: -5px;

    left: -5px;

    width: 11px;

    height: 11px;

    display: block;

    border-radius: 50%;

    background: var(--red);

    box-shadow:
        0 0 0 5px
        rgba(227,38,46,.15);

    transition:
        left .08s linear;

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 900px) {

    .portfolio-section {

        height: 420vh;

    }


    .portfolio-section > .container {

        width:
            calc(100% - 40px);

    }


    .portfolio-header {

        display: flex;
        flex-direction: column;

        margin-top: 40px;
        margin-bottom: 30px;

    }

    .portfolio-header .mark {
        margin-bottom: 10px;
    }

    .portfolio-header .t-h2 {
        font-size: clamp(28px, 6vw, 42px);
    }


    .portfolio-intro p {

        font-size: 13px;

    }


    .portfolio-card {

        flex-basis:
            calc(100vw - 40px);

        height: 470px;

        grid-template-columns: 1fr;

    }


    .portfolio-image {

        height: 220px;

    }


    .portfolio-card-content {

        height: 250px;

        padding: 25px;

    }


    .portfolio-card-content h3 {

        font-size: 28px;

    }


    .portfolio-card-content > p {

        margin-top: 12px;

        font-size: 12px;

    }


    .portfolio-pills {

        margin-top: 14px;

    }


    .portfolio-link {

        margin-top: 16px;

    }

}

/* =========================================================
   FIFTY SECTION
========================================================= */

.fifty-section {

    padding: clamp(20px, 3vw, 40px) 0 clamp(80px, 10vw, 120px);
    background: var(--white);

}


.fifty-grid {

    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(32px, 6vw, 96px);
    align-items: center;

}


/* --- big number --- */

.fifty-num {

    display: flex;
    align-items: flex-start;

    font-weight: 900;
    font-size: clamp(150px, 25vw, 380px);
    line-height: .8;
    letter-spacing: -.06em;

    color: var(--deep-blue);

}


.fifty-plus {

    color: var(--red);
    font-size: .42em;
    line-height: 1;
    margin-left: .04em;
    margin-top: .02em;

}


/* --- copy --- */

.fifty-copy {

    display: flex;
    flex-direction: column;
    gap: 14px;

}


.fifty-heading {

    font-weight: 300;
    font-size: clamp(34px, 4.6vw, 66px);
    line-height: 1.04;
    letter-spacing: -.022em;
    color: var(--deep-blue);
    max-width: 18ch;

}


.fifty-since {

    font-size: 18px;
    font-weight: 700;
    color: var(--red);

}


.fifty-body {

    font-size: 16px;
    line-height: 1.72;
    color: var(--gray);
    max-width: 60ch;

}


/* --- brand divider (long bar · red dot · short bar) --- */

.divider {

    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 340px;

}

.divider b {

    height: 4px;
    background: var(--deep-blue);
    flex: 1;

}

.divider b:last-child {

    flex: 0 0 22%;

}

.divider i {

    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--red);
    flex: none;

}

.fifty-div {

    margin-top: 18px;

}


/* --- responsive --- */

@media (max-width: 900px) {

    .fifty-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

}


/* =========================================================
   VALUES — "Why choose Romina" (React exact port)
========================================================= */

.values-section {
    background: #F2F4F7;
    padding-block: var(--section-space);
}

.values-section .mark {
    margin-top: 48px;
}

.values-wrap {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4.4vw, 64px);
}

.values-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: clamp(40px, 6vw, 100px);
    align-items: start;
}

/* ---- left: list ---- */

.val-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.val-list li {
    border-top: 1px solid rgba(14, 34, 64, .14);
}

.val-list li:last-child {
    border-bottom: 1px solid rgba(14, 34, 64, .14);
}

.val-list button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 14px 0;
    background: none;
    border: none;
    cursor: pointer;
}

.val-word {
    font-weight: 300;
    font-size: clamp(32px, 4.6vw, 68px);
    line-height: 1.08;
    letter-spacing: -.025em;
    color: rgba(14, 34, 64, .32);
    transition: color .5s cubic-bezier(.16, 1, .3, 1),
                transform .6s cubic-bezier(.16, 1, .3, 1);
}

.val-list li.on .val-word {
    color: #0E2240;
    transform: translateX(10px);
}

.val-dot {
    display: block;
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--red);
    transform: scale(0);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.val-list li.on .val-dot {
    transform: scale(1);
}

.val-inline {
    display: none;
}

/* ---- right: sticky card ---- */

.val-side {
    position: sticky;
    top: 140px;
    padding-top: 88px;
}

.val-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: val-fadeup .6s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes val-fadeup {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

.val-name {
    font-weight: 700;
    font-size: 20px;
    color: #0E2240;
    margin: 0;
}

.val-text {
    font-weight: 300;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.35;
    color: #1F1F1F;
    max-width: 22ch;
    margin: 0;
}

/* ---- responsive ≤ 900px ---- */

@media (max-width: 900px) {

    .values-grid {
        grid-template-columns: 1fr;
    }

    .val-side {
        display: none;
    }

    .val-inline {
        display: block;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        color: #565656;
        font-size: 16px;
        line-height: 1.6;
        transition: max-height .6s cubic-bezier(.16, 1, .3, 1),
                    opacity .5s,
                    padding .5s;
    }

    .val-list li.on .val-inline {
        max-height: 160px;
        opacity: 1;
        padding-bottom: 18px;
    }

}


/* =========================================================
   ROMINA COFFEE
========================================================= */

.coffee-sec {
    background: #0E2240;
    color: #fff;
    padding-bottom: clamp(88px, 11vw, 150px);
    --lineL: rgba(255,255,255,.14);
}

.cof-wrap {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4.4vw, 64px);
}

/* ---- hero: full-bleed beans ---- */

.cof-beans {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.cof-beans-img {
    position: absolute;
    inset: -12% 0;
    will-change: transform;
}

.cof-beans-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 60%;
    display: block;
}

.cof-beans-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(14,34,64,.35) 0%,
        rgba(14,34,64,.1) 35%,
        rgba(14,34,64,.88) 88%,
        #0E2240 100%
    );
}

.cof-beans-copy {
    position: relative;
    z-index: 2;
    padding-bottom: clamp(64px, 9vw, 120px);
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.cof-display {
    font-weight: 300;
    font-size: clamp(40px, 5.4vw, 80px);
    line-height: 1.04;
    letter-spacing: -.03em;
    max-width: 17ch;
    margin: 0;
    color: #fff;
}

.cof-lead {
    font-size: clamp(17px, 1.5vw, 22px);
    line-height: 1.65;
    color: rgba(255,255,255,.88);
    max-width: 52ch;
    margin: 0;
    font-weight: 300;
}

/* ---- grid: sticky photo + stats ---- */

.cof-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(40px, 7vw, 120px);
    margin-top: clamp(72px, 9vw, 130px);
    align-items: start;
}

.cof-photo {
    position: sticky;
    top: 120px;
}

.cof-photo-in {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: 3px;
}

.cof-photo-in img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    display: block;
}

.cof-caption {
    margin-top: 12px;
    font-size: 12.5px;
    color: rgba(255,255,255,.55);
}

/* ---- stats ---- */

.cof-stats {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cof-stats li {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 30px 0;
    border-top: 1px solid var(--lineL);
}

.cof-stats li:last-child {
    border-bottom: 1px solid var(--lineL);
}

.cof-stats li > div {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 24px;
    align-items: baseline;
}

.cof-stat-n {
    font-weight: 900;
    font-size: clamp(50px, 5.6vw, 88px);
    line-height: .88;
    letter-spacing: -.045em;
    white-space: nowrap;
    margin: 0;
    color: #fff;
}

.cof-stat-l {
    font-weight: 700;
    font-size: 17px;
    margin: 0;
    color: #fff;
}

.cof-stat-t {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255,255,255,.66);
    margin: 0;
}

/* ---- quote ---- */

.cof-quote {
    margin-top: clamp(96px, 12vw, 170px);
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.cof-quote-text {
    font-weight: 300;
    font-size: clamp(34px, 5.4vw, 80px);
    line-height: 1.04;
    letter-spacing: -.03em;
    max-width: 17ch;
    margin: 0;
    color: #fff;
}

.cof-markets {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.cof-markets li {
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 700;
    padding-right: 28px;
    margin-right: 28px;
    border-right: 1px solid var(--lineL);
    line-height: 1;
    color: #fff;
}

.cof-markets li:last-child {
    border: 0;
    padding-right: 0;
    margin-right: 0;
}

/* ---- journey ---- */

.cof-journey {
    margin-top: clamp(96px, 12vw, 160px);
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 40px 60px;
    align-items: end;
}

.cof-journey-h3 {
    grid-column: 1 / -1;
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 300;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0;
}

.cof-j-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding-top: 8px;
    padding-left: 0;
    list-style: none;
    margin: 0;
}

.cof-j-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 15px;
    height: 2px;
    background: var(--lineL);
}

.cof-j-line i {
    position: absolute;
    inset: 0;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 2.6s cubic-bezier(.16,1,.3,1) .2s;
    display: block;
}

.cof-journey.go .cof-j-line i { transform: scaleX(1); }

.cof-j-list li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 12px;
}

.cof-j-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex: none;
    background: #0E2240;
    border: 2px solid rgba(255,255,255,.5);
    transition: background-color .4s, border-color .4s;
}

.cof-j-list li:nth-child(2) .cof-j-dot  { transition-delay: .25s; }
.cof-j-list li:nth-child(3) .cof-j-dot  { transition-delay: .58s; }
.cof-j-list li:nth-child(4) .cof-j-dot  { transition-delay: .91s; }
.cof-j-list li:nth-child(5) .cof-j-dot  { transition-delay: 1.24s; }
.cof-j-list li:nth-child(6) .cof-j-dot  { transition-delay: 1.57s; }
.cof-j-list li:nth-child(7) .cof-j-dot  { transition-delay: 1.90s; }
.cof-j-list li:nth-child(8) .cof-j-dot  { transition-delay: 2.23s; }

.cof-journey.go .cof-j-dot { background: #fff; border-color: #fff; }
.cof-journey.go .cof-j-list li:last-child .cof-j-dot { background: #e3262e; border-color: #e3262e; }

.cof-j-n {
    font-size: 12px;
    color: rgba(255,255,255,.5);
    margin-top: 8px;
}

.cof-j-name {
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 500;
    opacity: .35;
    transform: translateY(8px);
    transition: opacity .6s, transform .6s cubic-bezier(.16,1,.3,1);
}

.cof-j-list li:nth-child(2) .cof-j-name  { transition-delay: .25s; }
.cof-j-list li:nth-child(3) .cof-j-name  { transition-delay: .58s; }
.cof-j-list li:nth-child(4) .cof-j-name  { transition-delay: .91s; }
.cof-j-list li:nth-child(5) .cof-j-name  { transition-delay: 1.24s; }
.cof-j-list li:nth-child(6) .cof-j-name  { transition-delay: 1.57s; }
.cof-j-list li:nth-child(7) .cof-j-name  { transition-delay: 1.90s; }
.cof-j-list li:nth-child(8) .cof-j-name  { transition-delay: 2.23s; }

.cof-journey.go .cof-j-name { opacity: 1; transform: none; }

.cof-j-sort {
    position: relative;
    height: 300px;
    overflow: hidden;
    border-radius: 3px;
}

.cof-j-sort img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;

    /* Reverse fade-reveal, synced to the timeline line draw:
       same 2.6s easing + .2s delay, so it finishes in lockstep.
       Hidden at rest, wipes in from the right (reverse of the
       left→right line) as .go fires. */
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    transition:
        opacity   2.6s cubic-bezier(.16, 1, .3, 1) .2s,
        clip-path 2.6s cubic-bezier(.16, 1, .3, 1) .2s;
}

.cof-journey.go .cof-j-sort img {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

/* ---- three columns ---- */

.cof-cols {
    margin-top: clamp(80px, 9vw, 120px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.cof-cols > div {
    padding-top: 24px;
    border-top: 3px solid #fff;
}

.cof-cols h4 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #fff;
}

.cof-cols p {
    color: rgba(255,255,255,.7);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

/* ---- responsive ---- */

@media (max-width: 1023px) {
    .cof-grid { grid-template-columns: 1fr; }
    .cof-photo { position: relative; top: 0; }
    .cof-photo-in { aspect-ratio: 4/3; }
    .cof-journey { grid-template-columns: 1fr; }
    .cof-j-sort { height: 220px; }
}

@media (max-width: 767px) {
    .cof-stats li > div { grid-template-columns: 1fr; gap: 4px; }
    .cof-cols { grid-template-columns: 1fr; gap: 28px; }
    .cof-j-list {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-left: 4px;
    }
    .cof-j-line {
        left: 11px; right: auto;
        top: 8px; bottom: 8px;
        width: 2px; height: auto;
    }
    .cof-j-line i {
        transform: scaleY(0);
        transform-origin: top;
    }
    .cof-journey.go .cof-j-line i { transform: scaleY(1); }
    .cof-j-list li { flex-direction: row; align-items: center; gap: 14px; }
    .cof-j-n { margin: 0; min-width: 22px; }
    .cof-markets li { padding-right: 16px; margin-right: 16px; }

    /* --- Video hero: switch to natural 16:9 aspect ratio on mobile --- */
    .cof-beans {
        min-height: 0;
        aspect-ratio: 16 / 9;
        max-height: 75vw; /* cap very wide screens */
        align-items: flex-end;
        overflow: hidden;
    }

    /* Kill the parallax inset that causes overflow on small screens */
    .cof-beans-img {
        inset: 0;
        will-change: auto;
    }

    .cof-bg-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Keep copy text readable but compact */
    .cof-beans-copy {
        padding-bottom: 32px;
        gap: 14px;
    }

    /* Extra room for play button above controls bar — reduce on mobile */
    .cof-beans.has-player .cof-beans-copy {
        padding-bottom: calc(32px + 72px);
    }

    /* Center play button is positioned absolutely — keep it centred */
    .cof-center-btn {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .cof-center-btn:hover {
        transform: translate(-50%, -50%) scale(1.08);
    }
}

@media (max-width: 480px) {
    .cof-beans {
        aspect-ratio: 4 / 3;   /* taller crop so text + button fit nicely */
        max-height: none;
    }

    .cof-display {
        font-size: clamp(28px, 7vw, 40px);
    }

    .cof-lead {
        font-size: 15px;
    }
}

/* =========================================================
   EXECUTIVE TEAM
========================================================= */

.executive-team-section {
    position: relative;
    width: 100%;
    padding: 140px 0 50px;
    background: #f4f6f8;
    color: #071b3a;
    overflow: hidden;
}

.executive-team-container {
    position: relative;
    z-index: 2;

    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.executive-team-header {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);

    gap: 70px;

    margin-bottom: 75px;
}

.executive-team-label {
    padding-top: 10px;

    color: #e3262e;

    font-family: Roboto, Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 3px;
}

.executive-team-label::after {
    content: "";

    display: block;

    width: 55px;
    height: 2px;

    margin-top: 18px;

    background: #e3262e;
}

.executive-team-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(280px, .8fr);

    gap: 70px;

    align-items: end;
}

.executive-team-heading h2 {
    margin: 0;

    color: #071b3a;

    font-family: Roboto, Arial, sans-serif;
    font-size: clamp(48px, 5.5vw, 78px);
    font-weight: 400;

    line-height: .95;
    letter-spacing: -3px;
}

.executive-team-heading h2 span {
    display: block;
    color: #8395af;
}

.executive-team-heading p {
    max-width: 400px;

    margin: 0;

    color: rgba(7, 27, 58, .58);

    font-family: Roboto, Arial, sans-serif;
    font-size: 13px;

    line-height: 1.85;
}


/* =========================================================
   TEAM GRID
========================================================= */

.executive-team-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;
}


/* =========================================================
   MEMBER
========================================================= */

.executive-member {
    min-width: 0;

    opacity: 0;
    transform: translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22, 1, .36, 1);
}

.executive-team-grid.is-visible
.executive-member {
    opacity: 1;
    transform: translateY(0);
}

.executive-team-grid.is-visible
.executive-member:nth-child(1) {
    transition-delay: .05s;
}

.executive-team-grid.is-visible
.executive-member:nth-child(2) {
    transition-delay: .15s;
}

.executive-team-grid.is-visible
.executive-member:nth-child(3) {
    transition-delay: .25s;
}

.executive-team-grid.is-visible
.executive-member:nth-child(4) {
    transition-delay: .35s;
}


/* =========================================================
   PHOTO
========================================================= */

.executive-photo {
    position: relative;

    width: 100%;
    height: 480px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #d9dee5,
            #aeb9c7
        );
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.executive-photo-placeholder {
    position: absolute;
    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #dfe4e9,
            #bdc7d2
        );

    color: #071b3a;
}

.executive-photo-placeholder span {
    display: block;

    margin-bottom: 12px;

    color: rgba(7, 27, 58, .45);

    font-family: Roboto, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 4px;
}

.executive-photo-placeholder small {
    color: rgba(7, 27, 58, .35);

    font-family: Roboto, Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2px;
}


/* =========================================================
   FUTURE IMAGE
========================================================= */

.executive-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.22, 1, .36, 1);
}

.executive-member:hover
.executive-photo img {
    transform: scale(1.05);
}


/* =========================================================
   PHOTO ACCENT
========================================================= */

.executive-photo::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 55%,
            rgba(7, 27, 58, .22)
        );
}


/* =========================================================
   ROLE OVERLAY — revealed on hover / keyboard focus / tap
========================================================= */

.executive-member {
    outline: none;
}

.executive-member:focus-visible .executive-photo {
    outline: 2px solid #e3262e;
    outline-offset: 4px;
}

.executive-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 34px 28px;

    background:
        linear-gradient(
            to top,
            rgba(7, 27, 58, .96) 0%,
            rgba(7, 27, 58, .82) 50%,
            rgba(7, 27, 58, .35) 100%
        );

    opacity: 0;

    transition: opacity .5s cubic-bezier(.22, 1, .36, 1);
}

.executive-overlay-label {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 16px;

    color: #e3262e;

    font-family: Roboto, Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.executive-overlay-label::before {
    content: "";

    width: 28px;
    height: 2px;

    background: #e3262e;
}

.executive-overlay p {
    margin: 0;

    color: rgba(255, 255, 255, .9);

    font-family: Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
}

.executive-overlay-label,
.executive-overlay p {
    transform: translateY(24px);

    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.executive-overlay p {
    transition-delay: .05s;
}

.executive-member:hover .executive-overlay,
.executive-member:focus-within .executive-overlay {
    opacity: 1;
}

.executive-member:hover .executive-overlay-label,
.executive-member:hover .executive-overlay p,
.executive-member:focus-within .executive-overlay-label,
.executive-member:focus-within .executive-overlay p {
    transform: translateY(0);
}


/* Corner hint — signals there is more to see */

.executive-hint {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    background: rgba(255, 255, 255, .92);

    color: #071b3a;
    font-size: 13px;

    transition:
        background .4s ease,
        color .4s ease;
}

.executive-hint i {
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.executive-member:hover .executive-hint,
.executive-member:focus-within .executive-hint {
    background: #e3262e;
    color: #fff;
}

.executive-member:hover .executive-hint i,
.executive-member:focus-within .executive-hint i {
    transform: rotate(45deg);
}


/* Space between stacked team grids */

.executive-team-grid + .executive-team-grid {
    margin-top: 70px;
}


/* =========================================================
   MEMBER INFORMATION
========================================================= */

.executive-info {
    padding: 22px 3px 0;

    border-top:
        1px solid
        rgba(7, 27, 58, .15);
}

.executive-info > span {
    display: block;

    margin-bottom: 10px;

    color: #e3262e;

    font-family: Roboto, Arial, sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2px;
}

.executive-info h3 {
    margin: 0;

    color: #071b3a;

    font-family: Roboto, Arial, sans-serif;

    font-size: 20px;
    font-weight: 500;
}

.executive-info p {
    margin: 7px 0 0;

    color: rgba(7, 27, 58, .48);

    font-family: Roboto, Arial, sans-serif;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1px;
    text-transform: uppercase;
}


/* =========================================================
   BOTTOM
========================================================= */

.executive-team-bottom {
    display: grid;

    grid-template-columns: 1fr auto;

    gap: 40px;

    align-items: center;

    margin-top: 70px;
}

.executive-team-line {
    width: 100%;
    height: 1px;

    background: rgba(7, 27, 58, .15);
}

.executive-team-bottom p {
    margin: 0;

    color: #071b3a;

    font-family: Roboto, Arial, sans-serif;

    font-size: 15px;
}

.executive-team-bottom span {
    color: #e3262e;
}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.executive-team-section::before {
    content: "PEOPLE";

    position: absolute;

    right: -40px;
    bottom: -75px;

    color: transparent;

    font-family: Roboto, Arial, sans-serif;

    font-size: clamp(160px, 22vw, 330px);
    font-weight: 700;

    line-height: 1;

    -webkit-text-stroke:
        1px rgba(7, 27, 58, .035);

    pointer-events: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .executive-team-section {
        padding: 110px 0;
    }

    .executive-team-container {
        width: calc(100% - 50px);
    }

    .executive-team-header {
        grid-template-columns: 130px 1fr;
        gap: 35px;
    }

    .executive-team-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .executive-team-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 40px 20px;
    }

    .executive-photo {
        height: 500px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .executive-team-section {
        padding: 85px 0 100px;
    }

    .executive-team-container {
        width: calc(100% - 30px);
    }

    .executive-team-header {
        display: block;

        margin-bottom: 55px;
    }

    .executive-team-label {
        margin-bottom: 30px;
    }

    .executive-team-heading {
        display: block;
    }

    .executive-team-heading h2 {
        font-size: 44px;
        letter-spacing: -2px;
    }

    .executive-team-heading p {
        margin-top: 25px;

        font-size: 12px;
        line-height: 1.8;
    }

    .executive-team-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .executive-photo {
        height: 460px;
    }

    .executive-team-grid + .executive-team-grid {
        margin-top: 50px;
    }

    .executive-team-bottom {
        display: block;

        margin-top: 60px;
    }

    .executive-team-line {
        margin-bottom: 25px;
    }

    .executive-team-bottom p {
        font-size: 14px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .executive-member,
    .executive-photo img,
    .executive-overlay,
    .executive-overlay-label,
    .executive-overlay p,
    .executive-hint,
    .executive-hint i {
        transition: none !important;
    }

    .executive-member {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   ROMINA RESTAURANTS
========================================================= */

.romina-restaurants {
    position: relative;
    width: 100%;
    padding: 150px 0 160px;

    background: #ffffff;
    color: #071b3a;

    overflow: hidden;
}

.romina-restaurants *,
.romina-restaurants *::before,
.romina-restaurants *::after {
    box-sizing: border-box;
}

.romina-restaurants-container {
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.romina-restaurant-hero {
    display: grid;

    grid-template-columns:
        1.35fr
        .65fr;

    min-height: 650px;

    background: #071b3a;
}


/* =========================================================
   MEDIA
========================================================= */

.romina-restaurant-media {
    position: relative;

    min-height: 650px;

    overflow: hidden;

    background: #071b3a;
}

.romina-restaurant-image,
.romina-restaurant-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 1.2s
        cubic-bezier(.22, 1, .36, 1);
}

.romina-restaurant-hero:hover
.romina-restaurant-image {
    transform: scale(1.035);
}


/* =========================================================
   MEDIA OVERLAY
========================================================= */

.romina-media-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,27,58,.05),
            rgba(7,27,58,.18)
        ),
        linear-gradient(
            0deg,
            rgba(7,27,58,.7),
            transparent 55%
        );

    pointer-events: none;
}


/* =========================================================
   MEDIA LABELS
========================================================= */

.romina-media-top,
.romina-media-bottom {
    position: absolute;

    left: 30px;
    right: 30px;

    z-index: 3;

    display: flex;
    justify-content: space-between;
}

.romina-media-top {
    top: 28px;
}

.romina-media-bottom {
    bottom: 28px;
}

.romina-media-top span,
.romina-media-bottom span {
    color: #ffffff;

    font-family: Roboto, Arial, sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2px;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.romina-restaurant-hero-content {
    display: flex;

    flex-direction: column;
    justify-content: center;

    padding: 65px;

    background: #071b3a;

    color: #ffffff;
}

.romina-restaurant-eyebrow {
    margin-bottom: 35px;

    color: #e3262e;

    font-family: Roboto, Arial, sans-serif;

    font-size: 9px;
    font-weight: 700;

    line-height: 1.6;
    letter-spacing: 2.5px;
}

.romina-restaurant-hero-content h1 {
    margin: 0;

    color: #ffffff;

    font-family: Roboto, Arial, sans-serif;

    font-size: clamp(45px, 4.5vw, 70px);
    font-weight: 400;

    line-height: .98;
    letter-spacing: -3px;
}

.romina-restaurant-hero-content h1 span {
    display: block;

    color: #8194af;
}

.romina-hero-line {
    width: 65px;
    height: 2px;

    margin: 40px 0 25px;

    background: #e3262e;
}

.romina-restaurant-hero-content p {
    max-width: 390px;

    margin: 0;

    color: rgba(255,255,255,.55);

    font-family: Roboto, Arial, sans-serif;

    font-size: 13px;

    line-height: 1.85;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.romina-restaurant-intro {
    display: grid;

    grid-template-columns: 180px 1fr;

    gap: 75px;

    padding: 145px 0 125px;
}

.romina-intro-label {
    padding-top: 10px;

    color: rgba(7,27,58,.4);

    font-family: Roboto, Arial, sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}

.romina-intro-label span {
    display: block;

    margin-bottom: 12px;

    color: #e3262e;

    font-size: 13px;
}

.romina-intro-content {
    max-width: 900px;
}

.romina-intro-content h2 {
    margin: 0 0 40px;

    color: #071b3a;

    font-family: Roboto, Arial, sans-serif;

    font-size: clamp(50px, 5.5vw, 80px);
    font-weight: 400;

    line-height: .95;
    letter-spacing: -3px;
}

.romina-intro-content h2 span {
    color: #8194af;
}

.romina-intro-content p {
    max-width: 750px;

    margin: 0 0 25px;

    color: rgba(7,27,58,.55);

    font-family: Roboto, Arial, sans-serif;

    font-size: 14px;

    line-height: 1.9;
}

.romina-intro-content .romina-intro-lead {
    color: #071b3a;

    font-size: 20px;
    line-height: 1.65;
}


/* =========================================================
   SERVICE STATEMENT
========================================================= */

.romina-service-statement {
    display: grid;

    grid-template-columns: 180px 1fr;

    gap: 75px;

    padding: 75px 0;

    border-top: 1px solid rgba(7,27,58,.12);
    border-bottom: 1px solid rgba(7,27,58,.12);
}

.romina-service-number {
    color: #e3262e;

    font-family: Roboto, Arial, sans-serif;

    font-size: 32px;
    font-weight: 500;

    letter-spacing: -1px;
}

.romina-service-copy > span {
    color: rgba(7,27,58,.4);

    font-family: Roboto, Arial, sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}

.romina-service-copy h3 {
    max-width: 700px;

    margin: 20px 0 0;

    color: #071b3a;

    font-family: Roboto, Arial, sans-serif;

    font-size: clamp(35px, 4vw, 55px);
    font-weight: 400;

    line-height: 1;

    letter-spacing: -2px;
}

.romina-service-copy h3 em {
    color: #e3262e;
    font-style: normal;
}


/* =========================================================
   LOCATIONS
========================================================= */

.romina-locations {
    padding: 150px 0 0;
}

.romina-locations-header {
    display: grid;

    grid-template-columns: 180px 1fr;

    gap: 75px;

    margin-bottom: 35px;
}

.romina-location-number {
    color: #e3262e;

    font-family: Roboto, Arial, sans-serif;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 2px;
}

.romina-section-label {
    color: rgba(7,27,58,.4);

    font-family: Roboto, Arial, sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}

.romina-locations-header h2 {
    margin: 18px 0 0;

    color: #071b3a;

    font-family: Roboto, Arial, sans-serif;

    font-size: clamp(42px, 5vw, 70px);
    font-weight: 400;

    line-height: .95;
    letter-spacing: -3px;
}

.romina-locations-header h2 em {
    color: #8194af;
    font-style: normal;
}

.romina-location-intro {
    display: grid;

    grid-template-columns: 180px 1fr;

    gap: 75px;

    margin-bottom: 55px;
}

.romina-location-intro p {
    max-width: 650px;

    margin: 0;

    color: rgba(7,27,58,.55);

    font-family: Roboto, Arial, sans-serif;

    font-size: 14px;

    line-height: 1.85;
}


/* =========================================================
   LOCATION TABLE
========================================================= */

.romina-location-table {
    width: 100%;

    border-top:
        1px solid
        rgba(7,27,58,.2);
}

.romina-location-row {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    min-height: 120px;

    border-bottom:
        1px solid
        rgba(7,27,58,.12);

    transition:
        background .3s ease;
}

.romina-location-row:not(.romina-location-head):hover {
    background: #f5f7f9;
}

.romina-location-head {
    min-height: 55px;

    color: rgba(7,27,58,.4);

    font-family: Roboto, Arial, sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2px;
}

.romina-location-row > div {
    display: flex;

    align-items: center;
}

.romina-location-name {
    gap: 35px;
}

.romina-location-name span {
    color: #e3262e;

    font-family: Roboto, Arial, sans-serif;

    font-size: 10px;
    font-weight: 700;
}

.romina-location-name strong {
    color: #071b3a;

    font-family: Roboto, Arial, sans-serif;

    font-size: 18px;
    font-weight: 500;
}

.romina-location-concept {
    display: flex !important;

    flex-direction: column;

    align-items: flex-start !important;

    justify-content: center;
}

.romina-location-concept strong {
    color: #071b3a;

    font-family: Roboto, Arial, sans-serif;

    font-size: 15px;
    font-weight: 500;
}

.romina-location-concept small {
    margin-top: 8px;

    color: #e3262e;

    font-family: Roboto, Arial, sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


/* =========================================================
   CLOSING
========================================================= */

.romina-restaurant-closing {
    display: grid;

    grid-template-columns: 180px 1fr;

    gap: 75px;

    margin-top: 145px;
}

.romina-restaurant-closing > span {
    padding-top: 12px;

    color: #e3262e;

    font-family: Roboto, Arial, sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}

.romina-restaurant-closing h2 {
    margin: 0;

    color: #071b3a;

    font-family: Roboto, Arial, sans-serif;

    font-size: clamp(40px, 5vw, 68px);
    font-weight: 400;

    line-height: .95;
    letter-spacing: -3px;
}

.romina-restaurant-closing h2 em {
    color: #e3262e;
    font-style: normal;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .romina-restaurants {
        padding: 110px 0 120px;
    }

    .romina-restaurants-container {
        width: calc(100% - 50px);
    }

    .romina-restaurant-hero {
        grid-template-columns: 1fr;
    }

    .romina-restaurant-media {
        min-height: 560px;
    }

    .romina-restaurant-hero-content {
        min-height: 450px;
    }

    .romina-restaurant-intro,
    .romina-service-statement,
    .romina-locations-header,
    .romina-location-intro,
    .romina-restaurant-closing {
        grid-template-columns: 130px 1fr;

        gap: 40px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .romina-restaurants {
        padding: 80px 0 90px;
    }

    .romina-restaurants-container {
        width: calc(100% - 30px);
    }


    /* HERO */

    .romina-restaurant-media {
        min-height: 420px;
    }

    .romina-restaurant-hero-content {
        min-height: auto;

        padding: 45px 30px 55px;
    }

    .romina-restaurant-hero-content h1 {
        font-size: 46px;
        letter-spacing: -2px;
    }

    .romina-restaurant-eyebrow {
        margin-bottom: 25px;
    }


    /* INTRO */

    .romina-restaurant-intro {
        display: block;

        padding: 85px 0 75px;
    }

    .romina-intro-label {
        margin-bottom: 30px;
    }

    .romina-intro-content h2 {
        margin-bottom: 30px;

        font-size: 45px;
        letter-spacing: -2px;
    }

    .romina-intro-content .romina-intro-lead {
        font-size: 17px;
    }

    .romina-intro-content p {
        font-size: 12px;
    }


    /* STATEMENT */

    .romina-service-statement {
        display: block;

        padding: 55px 0;
    }

    .romina-service-number {
        margin-bottom: 25px;
    }

    .romina-service-copy h3 {
        font-size: 36px;
        letter-spacing: -1.5px;
    }


    /* LOCATIONS */

    .romina-locations {
        padding-top: 90px;
    }

    .romina-locations-header {
        display: block;
    }

    .romina-location-number {
        margin-bottom: 25px;
    }

    .romina-locations-header h2 {
        font-size: 42px;
        letter-spacing: -2px;
    }

    .romina-location-intro {
        display: block;

        margin-top: 30px;
    }

    .romina-location-intro p {
        font-size: 12px;
    }


    /* TABLE */

    .romina-location-head {
        display: none;
    }

    .romina-location-row {
        display: block;

        min-height: auto;

        padding: 25px 0;
    }

    .romina-location-name {
        display: flex !important;

        margin-bottom: 18px;
    }

    .romina-location-name strong {
        font-size: 17px;
    }

    .romina-location-concept {
        display: block !important;

        padding-left: 42px;
    }

    .romina-location-concept strong {
        font-size: 13px;
        line-height: 1.5;
    }


    /* CLOSING */

    .romina-restaurant-closing {
        display: block;

        margin-top: 90px;
    }

    .romina-restaurant-closing > span {
        display: block;

        margin-bottom: 25px;
    }

    .romina-restaurant-closing h2 {
        font-size: 42px;
        letter-spacing: -2px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .romina-restaurant-image,
    .romina-restaurant-video {
        transition: none;
    }
}


/* =========================================
     SUSTAINABILITY SECTION
     ========================================= */

  .sustainability-section {
    --primary: #071b3a;
    --secondary: #e3262e;
    --text: #182333;
    --muted: #687386;
    --border: #e6e9ee;
    --light-blue: #f5f8fc;

    background: #ffffff;
    color: var(--text);
    padding: var(--section-space) 24px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Helvetica, Arial, sans-serif;
  }

  .sustainability-container {
    width: min(1180px, 100%);
    margin: 0 auto;
  }

  /* Header */

  .sustainability-header {
    max-width: 820px;
  }

  .section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--secondary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }

  .section-label::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--secondary);
    display: inline-block;
  }

  .sustainability-header h2 {
    margin: 0 0 24px;
    color: var(--primary);
    font-size: clamp(42px, 6vw, 72px);
    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 800;
  }

  .sustainability-header p {
    margin: 0;
    max-width: 780px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.8;
  }

  /* Divider */

  .impact-divider {
    width: 100%;
    height: 0;
    background: var(--border);
    margin: 72px 0 48px;
  }

  /* Impact heading */

  .impact-header {
    display: flex;
    align-items: flex-end;
    gap: 35px;
    margin-bottom: 30px;
  }

  .impact-eyebrow {
    display: block;
    color: var(--secondary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  .impact-header h3 {
    margin: 0;
    color: var(--primary);
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.025em;
  }

  .impact-line {
    height: 1px;
    background: var(--border);
    flex: 1;
    margin-bottom: 7px;
  }

  /* Impact cards */

  .impact-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 50px rgba(7, 27, 58, 0.07);
  }

  .impact-card {
    position: relative;
    min-height: 290px;
    padding: 34px 26px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #fff;
    border-right: 1px solid var(--border);
    transition:
      background 0.3s ease,
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }

  .impact-card:last-child {
    border-right: 0;
  }

  .impact-card:hover {
    background: var(--light-blue);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(7, 27, 58, 0.08);
    z-index: 2;
  }

  /* Red top accent */

  .impact-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--secondary);
    transition: width 0.35s ease;
  }

  .impact-card:hover::before {
    width: 100%;
  }

  /* Icons */

  .impact-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: #f1f5fa;
    border-radius: 12px;
    margin-bottom: 34px;
    transition: 0.3s ease;
  }

  .impact-card:hover .impact-icon {
    color: #fff;
    background: var(--primary);
  }

  .impact-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Numbers */

  .impact-number {
    display: flex;
    align-items: baseline;
    color: var(--primary);
    font-size: clamp(40px, 4vw, 55px);
    line-height: 1;
    letter-spacing: -0.045em;
    font-weight: 800;
    margin-bottom: 12px;
  }

  .impact-number .prefix {
    color: var(--secondary);
    font-size: 0.65em;
    margin-right: 2px;
    font-weight: 700;
  }

  .impact-card p {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 700;
  }

  .unit {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    margin-top: 3px;
  }

  .impact-detail {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
  }

  /* Footer */

  .sustainability-footer {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 45px;
  }

  .sustainability-footer span {
    height: 1px;
    background: var(--border);
    flex: 1;
  }

  .sustainability-footer p {
    margin: 0;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-align: center;
  }

  /* =========================================
     RESPONSIVE
     ========================================= */

  @media (max-width: 1050px) {
    .impact-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    .impact-card {
      border-bottom: 1px solid var(--border);
    }

    .impact-card:nth-child(3) {
      border-right: 0;
    }

    .impact-card:nth-child(4),
    .impact-card:nth-child(5) {
      border-bottom: 0;
    }
  }

  @media (max-width: 700px) {
    .sustainability-section {
      padding-inline: 20px;
    }

    .sustainability-header h2 {
      font-size: 44px;
    }

    .sustainability-header p {
      font-size: 16px;
      line-height: 1.7;
    }

    .impact-divider {
      margin: 50px 0 35px;
    }

    .impact-header {
      display: block;
    }

    .impact-line {
      display: none;
    }

    .impact-header h3 {
      font-size: 28px;
    }

    .impact-grid {
      grid-template-columns: 1fr 1fr;
    }

    .impact-card {
      min-height: 245px;
      padding: 26px 22px;
    }

    .impact-card:nth-child(2),
    .impact-card:nth-child(4) {
      border-right: 0;
    }

    .impact-card:nth-child(3) {
      border-right: 1px solid var(--border);
    }

    .impact-card:nth-child(4),
    .impact-card:nth-child(5) {
      border-bottom: 0;
    }

    .impact-number {
      font-size: 42px;
    }

    .sustainability-footer p {
      font-size: 11px;
    }
  }

  @media (max-width: 480px) {
    .impact-grid {
      grid-template-columns: 1fr;
    }

    .impact-card,
    .impact-card:nth-child(3),
    .impact-card:nth-child(4) {
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }

    .impact-card:last-child {
      border-bottom: 0;
    }

    .impact-card {
      min-height: auto;
      padding: 30px 25px;
    }

    .impact-icon {
      margin-bottom: 24px;
    }

    .sustainability-footer {
      display: none;
    }
  }

  /* Accessibility */

  @media (prefers-reduced-motion: reduce) {
    .impact-card,
    .impact-icon,
    .impact-card::before {
      transition: none;
    }
  }


  /* ==========================================
     SUSTAINABILITY APPROACH
     ========================================== */

  .sustainability-details {
    --primary: #071b3a;
    --secondary: #e3262e;
    --text: #182333;
    --muted: #687386;
    --border: #dfe4eb;
    --soft: #f6f8fb;
    --warm: #fdfaf8;

    background: #ffffff;
    padding: var(--section-space) 24px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Helvetica, Arial, sans-serif;
  }

  .details-container {
    width: min(1180px, 100%);
    margin: 0 auto;
  }

  /* Header */

  .details-heading {
    max-width: 760px;
    margin-bottom: 60px;
  }

  .details-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--secondary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }

  .details-label::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--secondary);
  }

  .details-heading h2 {
    margin: 0 0 20px;
    color: var(--primary);
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 800;
  }

  .details-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.75;
  }

  /* Scroll reveal */

  .sa-reveal,
  .appr-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.22, 1, .36, 1);
  }

  .sa-reveal.revealed,
  .appr-reveal.revealed {
    opacity: 1;
    transform: none;
  }

  /* ------------------------------------------
     Approach grid — 3 x 2 photo tiles
     ------------------------------------------ */

  .appr-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    scroll-margin-top: 110px;
  }

  .appr-tile {
    position: relative;
    height: 440px;
    overflow: hidden;
    isolation: isolate;
    background: var(--primary);
    color: #ffffff;
  }

  /* Revealed tiles take over the transition for the hover dim */
  .appr-tile.revealed {
    transition:
      opacity 0.45s ease,
      transform 0.6s cubic-bezier(.22, 1, .36, 1);
  }

  /* Photo — muted and tinted until hovered */

  .appr-tile-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    filter: grayscale(.85) contrast(1.05);
    transform: scale(1.02);
    transition:
      filter 0.7s ease,
      transform 1.2s cubic-bezier(.22, 1, .36, 1);
  }

  .appr-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(
        to top,
        rgba(7, 27, 58, .96) 0%,
        rgba(7, 27, 58, .55) 45%,
        rgba(7, 27, 58, .72) 100%
      );
    transition: opacity 0.6s ease;
  }

  /* Red bar that fills along the bottom edge */
  .appr-tile::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: var(--secondary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
  }

  /* Inset frame that draws itself in on hover */

  .appr-tile-frame {
    position: absolute;
    inset: 16px;
    pointer-events: none;
  }

  .appr-tile-frame::before,
  .appr-tile-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    transition: transform 0.7s cubic-bezier(.22, 1, .36, 1);
  }

  .appr-tile-frame::before {
    border-top: 1px solid rgba(255, 255, 255, .55);
    border-bottom: 1px solid rgba(255, 255, 255, .55);
    transform: scaleX(0);
  }

  .appr-tile-frame::after {
    border-left: 1px solid rgba(255, 255, 255, .55);
    border-right: 1px solid rgba(255, 255, 255, .55);
    transform: scaleY(0);
    transition-delay: .1s;
  }

  /* Oversized outline number */

  .appr-tile-num {
    position: absolute;
    top: 30px;
    left: 34px;
    color: transparent;
    font-size: 88px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .45);
    transition:
      color 0.5s ease,
      -webkit-text-stroke-color 0.5s ease;
  }

  /* Title block — lifts on hover to make room for the button */

  .appr-tile-body {
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 34px;
    transform: translateY(62px);
    transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
  }

  .appr-tile-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    color: #ffffff;
    transition:
      background 0.4s ease,
      border-color 0.4s ease;
  }

  .appr-tile-body h3 {
    margin: 0;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
  }

  .appr-tile-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding: 13px 22px;
    background: var(--secondary);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.4s ease,
      transform 0.5s cubic-bezier(.22, 1, .36, 1),
      background 0.3s ease;
  }

  .appr-tile-btn:hover {
    background: #bd1820;
    color: #ffffff;
  }

  .appr-tile-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
  }

  .appr-tile-btn i {
    font-size: 11px;
  }

  .appr-tile-btn:hover i {
    animation: appr-nudge 0.8s ease infinite;
  }

  @keyframes appr-nudge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
  }

  /* Hover / keyboard focus state */

  .appr-tile:hover .appr-tile-media,
  .appr-tile:focus-within .appr-tile-media {
    filter: none;
    transform: scale(1.08);
  }

  .appr-tile:hover::before,
  .appr-tile:focus-within::before {
    opacity: .85;
  }

  .appr-tile:hover::after,
  .appr-tile:focus-within::after,
  .appr-tile:hover .appr-tile-frame::before,
  .appr-tile:focus-within .appr-tile-frame::before {
    transform: scaleX(1);
  }

  .appr-tile:hover .appr-tile-frame::after,
  .appr-tile:focus-within .appr-tile-frame::after {
    transform: scaleY(1);
  }

  .appr-tile:hover .appr-tile-num,
  .appr-tile:focus-within .appr-tile-num {
    color: rgba(255, 255, 255, .1);
    -webkit-text-stroke-color: #ffffff;
  }

  .appr-tile:hover .appr-tile-body,
  .appr-tile:focus-within .appr-tile-body {
    transform: translateY(0);
  }

  .appr-tile:hover .appr-tile-icon,
  .appr-tile:focus-within .appr-tile-icon {
    background: var(--secondary);
    border-color: var(--secondary);
  }

  .appr-tile:hover .appr-tile-btn,
  .appr-tile:focus-within .appr-tile-btn {
    opacity: 1;
    transform: none;
    transition-delay: .12s, .12s, 0s;
  }

  /* Spotlight — the other tiles step back while one is hovered */

  @media (hover: hover) {
    .appr-grid:hover .appr-tile.revealed:not(:hover) {
      opacity: .55;
    }
  }

  /* Touch screens: no hover, so show everything up front */

  @media (hover: none) {
    .appr-tile-media {
      filter: none;
    }

    .appr-tile-body {
      transform: none;
    }

    .appr-tile-btn {
      opacity: 1;
      transform: none;
    }
  }

  /* ------------------------------------------
     Approach details — one block per item
     ------------------------------------------ */

  .appr-details {
    margin-top: 110px;
    border-top: 1px solid var(--border);
  }

  .appr-detail {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 60px;
    padding: 56px 0 56px 28px;
    border-bottom: 1px solid var(--border);
    scroll-margin-top: 110px;
  }

  /* Left accent bar, drawn in when arrived at via "Read More" */
  .appr-detail::before {
    content: "";
    position: absolute;
    left: 0;
    top: 56px;
    bottom: 56px;
    width: 3px;
    background: var(--secondary);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
  }

  .appr-detail:target::before {
    transform: scaleY(1);
  }

  .appr-detail:target {
    animation: appr-arrive 1.8s ease;
  }

  @keyframes appr-arrive {
    0%, 30% { background: var(--warm); }
    100%    { background: transparent; }
  }

  .appr-detail-head {
    position: sticky;
    top: 130px;
    align-self: start;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 16px;
  }

  .appr-detail-num {
    grid-column: 1 / -1;
    margin-bottom: 18px;
    color: var(--secondary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
  }

  .appr-detail-head h3 {
    margin: 0;
    color: var(--primary);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .appr-detail-back {
    grid-column: 1 / -1;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition:
      color 0.3s ease,
      border-color 0.3s ease;
  }

  .appr-detail-back:hover {
    color: var(--secondary);
    border-color: var(--secondary);
  }

  /* Icon badge */

  .approach-badge {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #ffffff;
  }

  .approach-badge svg {
    flex-shrink: 0;
  }

  /* Body copy */

  .appr-detail-body {
    max-width: 680px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
  }

  .appr-detail-body p {
    margin: 0 0 20px;
  }

  .appr-detail-body p:last-of-type {
    margin-bottom: 0;
  }

  .appr-detail-body strong {
    color: var(--primary);
    font-weight: 700;
  }

  .appr-detail-body ul {
    margin: 0 0 25px;
    padding: 0;
    list-style: none;
  }

  .appr-detail-body li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 11px;
  }

  .appr-detail-body li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--secondary);
  }

  /* Photo placeholder */

  .photo-placeholder {
    margin-top: 30px;
    min-height: 150px;
    border: 1px dashed #cbd2dc;
    background: var(--soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: #8a94a3;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .photo-placeholder-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: #ffffff;
    font-size: 17px;
  }


  /* ==========================================
     RESPONSIVE
     ========================================== */

  @media (max-width: 1000px) {
    .appr-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .appr-detail {
      grid-template-columns: 1fr;
      gap: 26px;
    }

    .appr-detail-head {
      position: static;
    }
  }

  @media (max-width: 700px) {
    .sustainability-details {
      padding: 75px 20px 90px;
    }

    .details-heading {
      margin-bottom: 40px;
    }

    .details-heading h2 {
      font-size: 40px;
    }

    .details-heading p {
      font-size: 15px;
    }

    .appr-details {
      margin-top: 70px;
    }

    .appr-detail {
      padding: 40px 0 40px 18px;
    }

    .appr-detail::before {
      top: 40px;
      bottom: 40px;
    }

    .appr-detail-head h3 {
      font-size: 21px;
    }

    .appr-detail-body {
      font-size: 15px;
    }

    .approach-badge {
      width: 40px;
      height: 40px;
      flex-basis: 40px;
    }

    .approach-badge svg {
      width: 16px;
      height: 16px;
    }
  }

  @media (max-width: 640px) {
    .appr-grid {
      grid-template-columns: 1fr;
    }

    .appr-tile {
      height: 360px;
    }

    .appr-tile-num {
      font-size: 68px;
      top: 24px;
      left: 26px;
    }

    .appr-tile-body {
      left: 26px;
      right: 26px;
      bottom: 26px;
    }

    .appr-tile-body h3 {
      font-size: 21px;
    }
  }

  /* Reduced motion */

  @media (prefers-reduced-motion: reduce) {
    .sa-reveal,
    .appr-reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .appr-tile,
    .appr-tile::before,
    .appr-tile::after,
    .appr-tile-media,
    .appr-tile-frame::before,
    .appr-tile-frame::after,
    .appr-tile-num,
    .appr-tile-body,
    .appr-tile-icon,
    .appr-tile-btn,
    .appr-detail::before {
      transition: none;
    }

    .appr-tile-btn:hover i,
    .appr-detail:target {
      animation: none;
    }
  }


/* =========================================================
   BUSINESS PORTFOLIO (PORT) — React exact port
========================================================= */

/* ---- layout shell ---- */

.port {
    position: relative;
    background: #0E2240;
    color: #fff;
}

.port-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(24px, 4vh, 44px);
    padding-top: 92px;
}

.port-wrap {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4.4vw, 64px);
}

.port-head {
    display: flex;
    flex-direction: column;
}

.port-head .mark {
    margin-bottom: 14px;
}

/* ---- track ---- */

.port-track {
    display: flex;
    gap: 28px;
    padding-left: max(clamp(20px, 4.4vw, 64px), calc((100vw - 1360px) / 2 + 64px));
    will-change: transform;
}

.port-end {
    flex: 0 0 clamp(20px, 4.4vw, 64px);
}

/* ---- panels ---- */

.panel {
    flex: 0 0 min(1060px, 76vw);
    height: min(58vh, 560px);
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    background: #091A33;
    overflow: hidden;
}

.panel-media {
    position: relative;
    overflow: hidden;
}

.panel-body {
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 3vw, 48px);
    gap: 16px;
}

.panel-body h3 {
    font-size: clamp(26px, 2.5vw, 38px);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -.015em;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
    color: #fff;
    max-width: 18ch;
    margin: 0;
}

.panel-body > p {
    color: rgba(255, 255, 255, .72);
    max-width: 36ch;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
}

.panel-more {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity .6s cubic-bezier(.16, 1, .3, 1),
        transform .6s cubic-bezier(.16, 1, .3, 1);
}

.panel-more ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.panel-more li {
    font-size: 13px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .75);
}

.panel-more .link-cta {
    align-self: flex-start;
}

.panel:hover .panel-more,
.panel:focus-within .panel-more {
    opacity: 1;
    transform: none;
}

.panel:hover h3,
.panel:focus-within h3,
.panel:hover .panel-body > p {
    transform: translateY(-6px);
}

.panel:hover .ph img {
    transform: scale(1.06);
}

/* ---- placeholder ---- */

.ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: clamp(18px, 2.4vw, 30px);
    color: #fff;
    background: radial-gradient(120% 90% at 18% 8%, #1F3B69 0%, #0E2240 46%, #07111F 100%);
}

.ph::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, .13);
    pointer-events: none;
}

.ph img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
    z-index: 1;
}

.ph-tag {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .62);
    z-index: 2;
}

.ph-tag i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    flex: none;
}

.ph-shot {
    position: relative;
    font-weight: 300;
    font-size: clamp(15px, 1.3vw, 19px);
    line-height: 1.35;
    max-width: 32ch;
    z-index: 2;
}

/* ---- progress bar ---- */

.port-prog {
    position: relative;
    display: block;
    height: 2px;
    background: rgba(255, 255, 255, .16);
}

.port-prog::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 2px;
    width: calc(var(--p, 0) * 100%);
    background: #fff;
}

.port-prog i {
    position: absolute;
    top: -4px;
    left: calc(var(--p, 0) * (100% - 10px));
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--red);
}

/* ---- mark component ---- */

.mark {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .01em;
    color: #0E2240;
    margin-bottom: 28px;
    background: none;
    padding: 0;
    flex-wrap: nowrap;
}

.mark .mark-rule {
    display: block;
    flex: none;
    width: 36px;
    height: 3px;
    background: currentColor;
    min-width: 36px;
}

.mark i {
    display: block;
    flex: none;
    width: 9px;
    height: 9px;
    min-width: 9px;
    min-height: 9px;
    border-radius: 50%;
    background: var(--red);
}

.mark.tone-white {
    color: #fff;
}

/* ---- t-h2 ---- */

.t-h2 {
    font-weight: 300;
    font-size: clamp(34px, 4.6vw, 66px);
    line-height: 1.04;
    letter-spacing: -.022em;
    color: #0E2240;
    max-width: 18ch;
    margin: 0;
}

.t-h2.light {
    color: #fff;
}

/* ---- link-cta ---- */

.link-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 15px;
    color: #0E2240;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
    transition: gap .3s cubic-bezier(.16, 1, .3, 1), color .3s;
    text-decoration: none;
}

.link-cta:hover {
    gap: 12px;
    color: var(--red);
}

.link-cta.light {
    color: #fff;
}

/* ---- responsive ≤ 1024px ---- */

@media (max-width: 1024px) {

    .port-sticky {
        position: relative;
        height: auto;
        padding: clamp(88px, 12vw, 120px) 0 0;
        overflow: visible;
    }

    .port-track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-left: clamp(20px, 4.4vw, 64px);
        padding-bottom: 48px;
        scrollbar-width: none;
    }

    .port-track::-webkit-scrollbar {
        display: none;
    }

    .panel {
        flex: 0 0 min(86vw, 560px);
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        scroll-snap-align: start;
    }

    .panel-media {
        aspect-ratio: 4 / 3;
    }

    .panel-more {
        opacity: 1;
        transform: none;
    }

    .port-prog {
        display: none;
    }

}


/* =====================================================
   FOOTER (ported from React)
===================================================== */

.ftr {
    background: #0e2240;
    color: #fff;
    padding: clamp(72px, 8vw, 110px) 0 36px;
}

.ftr-logo {
    display: block;
    width: 160px;
    height: auto;
    flex-shrink: 0;
}

.ftr-top {
    display: flex;
    align-items: center;
    gap: 48px;
}

.ftr-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.ftr-divider b {
    height: 4px;
    background: #fff;
    flex: 1;
}

.ftr-divider b:last-child {
    flex: 0 0 22%;
}

.ftr-divider i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e8132c;
    flex: none;
}

.ftr-cols {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 40px;
}

.ftr-cols > div {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    font-size: 15px;
    color: rgba(255, 255, 255, .72);
}

.ftr-cols a {
    transition: color .25s;
    text-align: left;
}

.ftr-cols a:hover {
    color: #fff;
}

.ftr-h {
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.ftr-copy {
    margin-top: 64px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
}

@media (max-width: 768px) {

    .ftr-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }

    .ftr-divider {
        width: 100%;
    }

    .ftr-cols {
        grid-template-columns: 1fr;
    }

}


/* =====================================================
   PARTNERS SLIDER
===================================================== */

.partners-strip {
    padding: clamp(72px, 8vw, 110px) 0;
    border-top: 1px solid rgba(14, 34, 64, .14);
}

.partners-strip .mark {
    margin-bottom: 0;
}

.partners-marquee {
    margin-top: 36px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.partners-track {
    display: flex;
    gap: 18px;
    width: max-content;
    animation: partners-marq 40s linear infinite;
}

.partners-marquee:hover .partners-track {
    animation-play-state: paused;
}

@keyframes partners-marq {
    to { transform: translateX(calc(-50% - 9px)); }
}

.partner-tile {
    flex: none;
    width: 220px;
    height: 120px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(14, 34, 64, .12);
    background: #fff;
    overflow: hidden;
    padding: 20px 24px;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}

.partner-tile:hover {
    transform: translateY(-4px);
    border-color: rgba(14, 34, 64, .22);
    box-shadow: 0 14px 30px rgba(14, 34, 64, .10);
}

.partner-tile img {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.partner-tile-name {
    font-size: 13px;
    font-weight: 500;
    color: #0e2240;
    line-height: 1.3;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {

    .partners-track {
        animation: none;
        overflow-x: auto;
        width: 100%;
    }

}


/* =====================================================
   BUSINESSES TABS  (ported from React — Brands component)
===================================================== */

/* shared easing values used throughout this section */
.brands {
    --bd-ease: cubic-bezier(.77,0,.18,1);
    --bd-out:  cubic-bezier(.16,1,.3,1);
}

/* section backgrounds */
.sec       { padding-block: var(--section-space); }
.brands    { transition: background-color .4s cubic-bezier(.16,1,.3,1), color .4s cubic-bezier(.16,1,.3,1); }
.brands.tone-light { background: #fff; }
.brands.tone-paper { background: #F2F4F7; }

/* Per-brand tab backgrounds. Dark ones also carry .is-dark (added by
   the tabs JS), which supplies the light-text treatment below. */
.brands.is-dark { color: #fff; }
.brands.tone-restaurants { background: #8a1520; }   /* red */
.brands.tone-koba        { background: #0f4d2d; }   /* KOBA green (matches KOBA page --accent) */
.brands.tone-bacio       { background: #003851; }   /* Bacio deep teal (matches Bacio page --accent) */
.brands.tone-meskott     { background: #07111F; }   /* night */
.brands.tone-coffee      { background: #0E2240; }   /* brand navy, as the homepage coffee section */
.brands.tone-imports     { background: #14396e; }   /* dark blue (distinct from Meskott night) */
.brands.tone-jaguar      { background: #eaf1fa; }   /* light chrome-blue */

/* red bg needs its red accents lifted to stay legible */
.brands.tone-restaurants .bp-kicker  { color: #ffd7da; }
.brands.tone-restaurants .bp-cta-btn { background: #fff; color: #8a1520; }
.brands.tone-restaurants .bp-cta-btn:hover { background: #ffe3e5; color: #8a1520; }

/* KOBA green theme — tuned accents on the green background. The base
   white-text treatment comes from .is-dark; these rules follow the
   generic bp/is-dark rules below (see "KOBA green accents" block). */

/* night-tone mark override */
.brands.is-dark #brandsMark       { color: #fff; }
.brands.is-dark #brandsMark .mark-rule { background: currentColor; }
.brands.is-dark #brandsMark i     { background: #fff; }

/* tab strip */
.brand-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 34px;
    padding: 0 0 18px;
    border-bottom: 1px solid rgba(14,34,64,.14);
    width: 100%;
    list-style: none;
}
.brands.is-dark .brand-list { border-color: rgba(255,255,255,.16); }

/* tab button */
.brand-tab {
    position: relative;
    padding: 10px 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    font-size: clamp(18px,1.7vw,24px);
    font-weight: 300;
    color: rgba(14,34,64,.45);
    cursor: pointer;
    transition: color .4s cubic-bezier(.16,1,.3,1);
    font-family: inherit;
    line-height: 1.2;
}
.brand-tab:hover                        { color: #0E2240; }
.brand-tab[data-state="active"]         { color: #0E2240; font-weight: 400; }
.brand-tab::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -19px;
    height: 3px;
    background: #0E2240;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.brand-tab::before {
    content: "";
    position: absolute;
    right: -12px;
    top: 10px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #E8132C;
    transform: scale(0);
    transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.brand-tab[data-state="active"]::after,
.brand-tab[data-state="active"]::before { transform: scale(1); }
.brands.is-dark .brand-tab                               { color: rgba(255,255,255,.45); }
.brands.is-dark .brand-tab[data-state="active"],
.brands.is-dark .brand-tab:hover                         { color: #fff; }
.brands.is-dark .brand-tab::after                        { background: #fff; }

/* tab panel */
.brand-pane                            { margin-top: 48px; }
.brand-pane[data-state="inactive"]     { display: none; }

/* bp two-column grid */
.bp {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(32px,5vw,80px);
    align-items: start;
    animation: brands-fadeup .7s cubic-bezier(.16,1,.3,1) both;
}

/* gallery column */
.gallery             { display: flex; flex-direction: column; gap: 16px; }
.gallery-stack       { aspect-ratio: 4 / 3.1; height: auto; position: relative; }
.gallery-bar         { display: flex; align-items: center; gap: 18px; }
.gallery-cap {
    font-size: 14px;
    color: #565656;
    min-width: 150px;
    animation: brands-fadeup .6s cubic-bezier(.16,1,.3,1) both;
}
.brands.is-dark .gallery-cap { color: rgba(255,255,255,.66); }

/* slide stack */
.brands .stack        { position: relative; overflow: hidden; isolation: isolate; width: 100%; height: 100%; }
.brands .slide        { position: absolute; inset: 0; z-index: 0; clip-path: inset(0 0 0 100%); }
.brands .stack.back .slide { clip-path: inset(0 100% 0 0); }
.brands .slide.was    { z-index: 1; clip-path: inset(0 0 0 0); }
.brands .slide.on     { z-index: 2; clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--bd-ease); }

/* Ken-Burns parallax on media-inner */
.brands .slide .brands-media-inner            { transform: translateX(16%); }
.brands .stack.back .slide .brands-media-inner { transform: translateX(-16%); }
.brands .slide.on  .brands-media-inner        { transform: none;           transition: transform 1.6s var(--bd-ease); }
.brands .slide.was .brands-media-inner        { transform: translateX(-12%); transition: transform 1.3s var(--bd-ease); }
.brands .stack.back .slide.was .brands-media-inner { transform: translateX(12%); }

/* media box */
.brands-media         { position: relative; overflow: hidden; background: #091A33; width: 100%; height: 100%; }
.brands-media-inner   { position: absolute; inset: 0; }
.brands-media img     { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9) contrast(1.06) brightness(.97); transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.brands-media .grade  { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(14,34,64,.06),rgba(14,34,64,.26)); mix-blend-mode: multiply; }

/* image placeholder */
.brands .ph {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: 8px;
    padding: clamp(18px,2.4vw,30px);
    color: #fff;
    background: radial-gradient(120% 90% at 18% 8%, #1F3B69 0%, #0E2240 46%, #07111F 100%);
}
.brands .ph::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: .16;
    mix-blend-mode: overlay;
}
.brands .ph::after    { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.13); }
.brands .ph-tag       { position: relative; display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.62); }
.brands .ph-tag i     { width: 7px; height: 7px; border-radius: 50%; background: #E8132C; flex: none; }
.brands .ph-shot      { position: relative; font-weight: 300; font-size: clamp(15px,1.3vw,19px); line-height: 1.35; max-width: 32ch; }

/* Ken Burns animation on real images */
.brands .kb           { animation: brands-kb 11s cubic-bezier(.2,.6,.3,1) both; }
@keyframes brands-kb  { from { transform: scale(1.16); } to { transform: scale(1.02); } }

/* progress bar */
.brands .prog         { position: relative; display: block; height: 2px; flex: 1; min-width: 80px; background: rgba(14,34,64,.14); }
.brands .prog.tone-auto { background: rgba(14,34,64,.14); }
.brands .prog-fill    { position: absolute; left: 0; top: 0; bottom: 0; background: #0E2240; animation: brands-grow linear both; }
.brands .prog-fill::after {
    content: "";
    position: absolute; right: -5px; top: 50%;
    width: 10px; height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: #E8132C;
}
.brands.is-dark .prog.tone-auto { background: rgba(255,255,255,.16); }
.brands.is-dark .prog-fill      { background: #fff; }

/* prev / next arrows */
.brands .arrows        { display: flex; gap: 8px; }
.brands .arrows.small button {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 1px solid rgba(14,34,64,.14);
    color: #0E2240;
    background: none;
    cursor: pointer;
    transition: background-color .3s, color .3s, border-color .3s;
    font-family: inherit;
}
.brands .arrows.small button:hover           { background: #0E2240; color: #fff; border-color: #0E2240; }
.brands.is-dark .arrows.small button      { border-color: rgba(255,255,255,.16); color: #fff; }
.brands.is-dark .arrows.small button:hover { background: #fff; color: #0E2240; }

/* copy column */
.bp-copy     { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }
.bp-kicker   { font-size: 15px; color: #E8132C; font-weight: 500; }
.bp-title    { font-weight: 300; font-size: clamp(32px,3.6vw,52px); line-height: 1.05; letter-spacing: -.02em; color: #0E2240; }
.brands.is-dark .bp-title   { color: #fff; }
.bp-body     { color: #565656; line-height: 1.72; max-width: 48ch; }
.brands.is-dark .bp-body    { color: rgba(255,255,255,.7); }
.bp-label    { font-size: 13px; font-weight: 700; color: #0E2240; margin-bottom: 8px; }
.brands.is-dark .bp-label   { color: #fff; }

/* tag chips */
.bp-list ul  { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.bp-list li  { font-size: 14px; padding: 6px 12px; border: 1px solid rgba(14,34,64,.14); }
.brands.is-dark .bp-list li { border-color: rgba(255,255,255,.16); color: #fff; }

/* locations list */
.bp-locs ul              { list-style: none; padding: 0; margin: 0; }
.bp-locs li              { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(14,34,64,.14); font-size: 14px; color: #565656; line-height: 1.5; }
.bp-locs li svg          { flex: none; margin-top: 3px; color: #E8132C; }
.bp-locs strong          { color: #1F1F1F; font-weight: 500; }
.brands.is-dark .bp-locs li     { border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.66); }
.brands.is-dark .bp-locs strong { color: #fff; }
.soon        { font-style: normal; font-size: 12px; margin-left: 8px; padding: 2px 8px; background: #E8132C; color: #fff; }

/* CTA button + phone link */
.bp-actions  { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.bp-cta-btn  {
    display: inline-flex; align-items: center; justify-content: center;
    height: 48px; padding: 0 26px;
    font-weight: 500; font-size: 15px; letter-spacing: .01em;
    background: #E8132C; color: #fff;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0;
    transition: background-color .35s cubic-bezier(.16,1,.3,1);
}
.bp-cta-btn:hover          { background: #c0101f; color: #fff; }
.bp-phone    { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: #0E2240; text-decoration: none; }
.brands.is-dark .bp-phone { color: #fff; }
.bp-note     { font-size: 12.5px; color: #565656; opacity: .8; }
.brands.is-dark .bp-note  { color: rgba(255,255,255,.5); }

/* ── KOBA green accents ───────────────────────────────────────────────
   Section goes deep green (#0f4d2d, matches the KOBA page --accent);
   inner tint #0b3a22 / light-green tint #A7D7B8. Placed after the generic
   bp + is-dark rules so these win on equal specificity. The CTA button
   and the progress-line dot stay red, as on the KOBA page. */
.brands.tone-koba .bp-body                                { color: rgba(255,255,255,.8); }          /* body ~80% white */
.brands.tone-koba .bp-kicker                              { color: #A7D7B8; }                        /* eyebrow — light green */
.brands.tone-koba .bp-label                               { color: #A7D7B8; }                        /* "Locations" — light green */
.brands.tone-koba .bp-locs li svg                         { color: #fff; }                           /* location pins — white */
.brands.tone-koba .brand-tab                              { color: rgba(255,255,255,.55); }          /* inactive tabs ~55% white */
.brands.tone-koba .brand-tab[data-state="active"]::before { background: #A7D7B8; }                   /* active tab dot — light green */
.brands.tone-koba .arrows.small button:hover             { background: #fff; color: #0f4d2d; border-color: #fff; }

/* ── Bacio deep-teal + warm accents ───────────────────────────────────
   Its own combo: deep teal (#003851, matches the Bacio page --accent)
   with strawberry-cream (#FAC2A3) type and a raspberry (#CB4093) active
   dot — distinct from the KOBA green tab. CTA stays the site red. */
.brands.tone-bacio .bp-body                                { color: rgba(255,255,255,.82); }         /* body ~82% white */
.brands.tone-bacio .bp-kicker                              { color: #FAC2A3; }                        /* eyebrow — strawberry cream */
.brands.tone-bacio .bp-label                               { color: #FAC2A3; }                        /* "Locations" — strawberry cream */
.brands.tone-bacio .bp-locs li svg                         { color: #CB4093; }                        /* location pins — raspberry */
.brands.tone-bacio .brand-tab                              { color: rgba(255,255,255,.55); }          /* inactive tabs ~55% white */
.brands.tone-bacio .brand-tab[data-state="active"]         { color: #fff; }                           /* active tab — white */
.brands.tone-bacio .brand-tab[data-state="active"]::before { background: #CB4093; }                   /* active tab dot — raspberry */
.brands.tone-bacio .arrows.small button:hover             { background: #CB4093; color: #fff; border-color: #CB4093; }

/* keyframes */
@keyframes brands-fadeup {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
@keyframes brands-grow {
    from { width: 0; }
    to   { width: 100%; }
}

/* responsive — stack to single column on mobile */
@media (max-width: 768px) {

    .bp { grid-template-columns: 1fr; }

    .brand-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 0 30px;
        padding-bottom: 0;
    }
    .brand-list::-webkit-scrollbar { display: none; }

    .brand-tab         { flex: none; padding: 10px 0 14px; }
    .brand-tab::after  { bottom: 0; }

}

@media (prefers-reduced-motion: reduce) {

    .brands .prog-fill { animation: none; }
    .brands .kb        { animation: none; }
    .bp                { animation: none; }
    .gallery-cap       { animation: none; }
    .brands .slide.on  { transition: none; }
    .brands .slide.on  .brands-media-inner,
    .brands .slide.was .brands-media-inner { transition: none; }

}


/* =====================================================
   CAREERS
===================================================== */

.careers {
    background: #E8132C;
    padding-block: var(--section-space);
}

.careers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 6vw, 100px);
    align-items: start;
}

.careers-copy {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 8px;
}

.careers-lead {
    color: rgba(255,255,255,.88);
    font-size: clamp(16px,1.4vw,20px);
    line-height: 1.68;
    max-width: 46ch;
    margin: 0;
}

.careers-ph {
    font-size: 14px;
    color: rgba(255,255,255,.6);
    margin: 0;
    font-style: italic;
}

.careers-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 24px;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: .01em;
    background: #fff;
    color: #E8132C;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color .35s cubic-bezier(.16,1,.3,1), color .35s;
    width: fit-content;
}

.careers-btn:hover {
    background: #0E2240;
    color: #fff;
}

.careers-btn-arrow { flex: none; }

@media (max-width: 900px) {
    .careers-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 600px) {
    /* careers padding handled by --section-space clamp */
}

.careers .mark i { background: #071b3a; }


/* =====================================================
   CONTACT  (matches React romina.jsx Contact component)
===================================================== */

/* Section is the grid — children are full-bleed columns */
.ctc {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    min-height: 100vh;
}

/* ---- left: full-bleed navy, content right-aligned inside ---- */

.ctc-info {
    background: #0E2240;
    color: #fff;
    display: flex;
    justify-content: flex-end;
}

.ctc-in {
    width: 100%;
    max-width: 640px;
    padding: calc(clamp(88px,10vw,140px) - 16px) clamp(20px,4.4vw,64px) calc(clamp(88px,10vw,140px) + 16px);
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* heading — matches React .t-display */
.ctc-display {
    font-weight: 900;
    font-size: clamp(44px,5.5vw,80px);
    line-height: .94;
    letter-spacing: -.035em;
    color: #fff;
    max-width: 13ch;
    margin: 0;
}

/* info blocks */
.c-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* label: sentence case, muted white — matches React */
.c-label {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.6);
    margin: 0;
}

/* body text + email link inside a c-block: flex + icon gap */
.c-block p,
.c-block > a {
    display: flex;
    gap: 10px;
    font-size: 16px;
    line-height: 1.6;
    max-width: 44ch;
    color: #fff;
    text-decoration: none;
    transition: opacity .25s;
    margin: 0;
}

.c-block > a:hover { opacity: .82; }

/* map-pin / mail icons */
.c-icon {
    flex: none;
    color: #E8132C;
    margin-top: 4px;
}

/* divisions list */
.c-phones {
    list-style: none;
    padding: 0;
    margin: 0;
}

.c-phones li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,.16);
    font-size: 15px;
    max-width: 440px;
}

/* business name: dimmer white — matches React .c-phones span */
.c-phones span {
    color: rgba(255,255,255,.66);
}

/* phone link: white — matches React (inherited color:#fff) */
.c-phones a {
    color: #fff;
    text-decoration: none;
    transition: opacity .25s;
}

.c-phones a:hover { opacity: .75; }

/* ---- right: white form — matches React .contact-form ---- */

.ctc-form {
    background: #fff;
    padding: calc(clamp(88px,10vw,140px) - 40px) clamp(20px,4.4vw,64px) clamp(48px,6vw,88px);
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: flex-start;
    max-width: 760px;
}

/* two-column field rows */
.f-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.f {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* form labels: gray sentence-case — matches React .f label */
.ctc-form label {
    font-size: 13px;
    font-weight: 500;
    color: #565656;
}

/* underline fields — matches React .field */
.field {
    border: 0;
    border-bottom: 1px solid rgba(14,34,64,.35);
    border-radius: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    padding: 10px 0;
    font-size: 17px;
    color: #1F1F1F;
    font-family: inherit;
    transition: border-color .3s;
    resize: none;
    width: 100%;
}

.field:focus {
    border-bottom-color: #0E2240;
    box-shadow: 0 1px 0 0 #0E2240;
}

.field::placeholder { color: rgba(14,34,64,.28); }

/* submit row */
.f-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.ctc-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 28px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .02em;
    background: #E8132C;
    color: #fff;
    border: 1px solid #E8132C;
    cursor: pointer;
    transition: background-color .35s cubic-bezier(.16,1,.3,1), border-color .35s cubic-bezier(.16,1,.3,1);
}

.ctc-send-btn:hover {
    background: #0E2240;
    border-color: #0E2240;
}

/* status — matches React .f-status: left border, hidden when empty */
.f-status {
    font-size: 14px;
    line-height: 1.55;
    max-width: 48ch;
    padding-left: 12px;
    border-left: 3px solid #0E2240;
    color: #1F1F1F;
    margin: 0;
}

.f-status.err { border-color: #E8132C; }

/* responsive — matches React breakpoint */
@media (max-width: 768px) {
    .ctc { grid-template-columns: 1fr; min-height: 0; }
    .ctc-in  { max-width: none; }
    .ctc-form { max-width: none; }
    .f-row { grid-template-columns: 1fr; gap: 22px; }
}


/* =====================================================
   ACCOMPLISHMENTS
===================================================== */

.ac-section {
    background: #fff;
    overflow: hidden;
}

.ac-wrap {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
}

.ac-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    padding: 0 clamp(20px, 4.4vw, 64px);
    margin-bottom: 40px;
}

/* Arrow buttons — hidden on mobile, visible tablet+ */
.ac-arrows {
    display: none;
    gap: 8px;
    flex-shrink: 0;
}

.ac-arrows button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(14, 34, 64, .14);
    color: #0E2240;
    background: none;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .25s, color .25s, border-color .25s;
}

.ac-arrows button:hover        { background: #0E2240; color: #fff; border-color: #0E2240; }
.ac-arrows button:focus-visible { outline: 2px solid #0E2240; outline-offset: 2px; }

/* Outer wrapper provides the leading padding so the first card aligns to the grid */
.ac-track-outer {
    padding-left: clamp(20px, 4.4vw, 64px);
}

/* Scrollable track */
.ac-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    list-style: none;
    margin: 0;
    padding: 0 clamp(20px, 4.4vw, 64px) 8px 0;
    cursor: grab;
}

.ac-track::-webkit-scrollbar { display: none; }
.ac-track:focus-visible       { outline: 2px solid rgba(14, 34, 64, .35); outline-offset: -2px; }

/* Card */
.ac-card {
    scroll-snap-align: start;
    flex: none;
    width: 82vw;
    max-width: 340px;
    background: #fff;
    border: 1px solid rgba(14, 34, 64, .12);
    box-shadow: 0 2px 16px rgba(14, 34, 64, .06);
    position: relative;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s ease, box-shadow .25s ease;
}

.ac-card.ac-visible              { opacity: 1; transform: none; }
.ac-card.ac-visible:hover        { box-shadow: 0 8px 32px rgba(14, 34, 64, .13); transform: translateY(-2px); }

/* Card image placeholder */
.ac-card-img {
    position: relative;
    aspect-ratio: 3/2;
    overflow: hidden;
    background: radial-gradient(120% 90% at 18% 8%, #1F3B69 0%, #0E2240 46%, #07111F 100%);
}

.ac-img-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    padding: 16px;
}

.ac-img-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: .14;
    mix-blend-mode: overlay;
}

.ac-ph-tag {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .55);
    z-index: 1;
}

.ac-ph-tag i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #E8132C;
    flex: none;
    display: block;
}

.ac-ph-shot {
    position: relative;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .75);
    z-index: 1;
}

/* Card body */
.ac-card-body {
    position: relative;
    padding: 24px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Year / number badge — hangs 16px above card-body into the image */
.ac-badge {
    position: absolute;
    top: -16px;
    left: 16px;
    z-index: 2;
    background: #E8132C;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    padding: 8px 14px 10px;
}

.ac-cat {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #E8132C;
    margin-top: 14px;
}

.ac-title {
    font-size: 1.05rem;
    font-weight: 500;
    color: #0E2240;
    line-height: 1.3;
    margin: 0;
}

.ac-desc {
    font-size: 0.875rem;
    color: #565656;
    line-height: 1.55;
    margin: 0;
}

/* Progress indicator */
.ac-progress {
    margin: 24px clamp(20px, 4.4vw, 64px) 0;
}

.ac-progress-track {
    display: block;
    position: relative;
    height: 3px;
    background: rgba(14, 34, 64, .14);
    border-radius: 2px;
}

.ac-progress-dot {
    position: absolute;
    top: -3px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #E8132C;
    transition: left .15s linear;
}

/* Tablet+: show arrows, fixed-width cards */
@media (min-width: 640px) {
    .ac-arrows { display: flex; }
    .ac-card   { width: 340px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ac-card         { opacity: 1 !important; transform: none !important; transition: box-shadow .25s ease; }
    .ac-progress-dot { transition: none; }
}


/* =====================================================
   SCROLL PROGRESS
===================================================== */

.scroll-prog {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: transparent;
    z-index: 200;
    pointer-events: none;
}

.scroll-prog::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: calc(var(--sp, 0) * 100%);
    background: #0E2240;
}

.scroll-prog i {
    position: absolute;
    z-index: 1;
    top: -3px;
    left: calc(var(--sp, 0) * (100% - 9px));
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e3262e;
}


/* =====================================================
   MOBILE NAV — About sub-links
===================================================== */

.mobile-nav-links .mobile-nav-sub {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;

    padding: 4px 0 10px;
}

.mobile-menu--centered .mobile-nav-links .mobile-nav-sub a {
    width: auto;
    min-height: 36px;

    padding: 0;

    border: 0;
    border-radius: 0;

    color: rgba(255,255,255,.6);

    font-size: 14px;
    font-weight: 500;
    letter-spacing: .5px;
}

.mobile-menu--centered .mobile-nav-links .mobile-nav-sub a:hover,
.mobile-menu--centered .mobile-nav-links .mobile-nav-sub a:focus-visible {
    background: transparent;
    color: var(--white);
}

.mobile-menu--centered .mobile-nav-links .mobile-nav-sub a[aria-current="page"] {
    color: var(--red);
}


/* =====================================================
   PAGE HERO — About sub-pages
===================================================== */

.page-hero {
    position: relative;

    height: 78vh;
    min-height: 620px;
    max-height: 820px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--deep-blue);
}


.page-hero-bg {
    animation: page-hero-zoom 7s ease forwards;
}


@keyframes page-hero-zoom {
    from { transform: scale(1.05); }
    to   { transform: scale(1); }
}


.page-hero-content {
    position: relative;
    z-index: 2;

    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding-top: 100px;
    padding-bottom: 40px;
}


.page-hero-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 28px;

    color: rgba(255,255,255,.6);

    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.page-hero-crumbs a {
    transition: color var(--transition);
}


.page-hero-crumbs a:hover {
    color: var(--white);
}


.page-hero-crumbs i {
    color: var(--red);
    font-size: 8px;
}


.page-hero-crumbs span {
    color: var(--white);
}


.page-hero-content h1 {
    max-width: 850px;

    color: var(--white);

    font-size: clamp(44px, 5.2vw, 82px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2.5px;
}


.page-hero-content h1 span {
    color: #b8c5d8;
}


.page-hero-content p {
    max-width: 600px;

    margin-top: 28px;

    color: rgba(255,255,255,.78);

    font-size: 17px;
    line-height: 1.7;
}


/* Pages without the tab bar need the extra breathing room at the bottom */

.page-hero--plain .page-hero-content {
    padding-bottom: 80px;
}


/* Tabs between the About pages */

.page-hero-tabs {
    position: relative;
    z-index: 2;

    border-top: 1px solid rgba(255,255,255,.18);

    background: rgba(4, 20, 45, .45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}


.page-hero-tabs nav {
    display: flex;
}


.page-hero-tabs a {
    position: relative;

    flex: 1;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 26px 0;

    color: rgba(255,255,255,.7);

    font-size: 14px;
    font-weight: 500;

    transition: color var(--transition);
}


.page-hero-tabs a::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 0;

    width: 100%;
    height: 2px;

    background: var(--red);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform var(--transition);
}


.page-hero-tabs a:hover,
.page-hero-tabs a.active {
    color: var(--white);
}


.page-hero-tabs a:hover::before,
.page-hero-tabs a.active::before {
    transform: scaleX(1);
}


.page-hero-tab-num {
    color: var(--red);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}


/* Keep anchor targets clear of the fixed header */

.page-hero ~ section[id],
.page-hero ~ section [id] {
    scroll-margin-top: 90px;
}


@media (max-width: 900px) {

    .page-hero {
        height: auto;
        min-height: 560px;
    }

    .page-hero-tabs nav {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .page-hero-tabs nav::-webkit-scrollbar {
        display: none;
    }

    .page-hero-tabs a {
        flex: 0 0 auto;
        padding: 20px 28px 20px 0;
    }

}


@media (max-width: 600px) {

    .page-hero-content h1 {
        letter-spacing: -1.5px;
    }

    .page-hero-content p {
        font-size: 15px;
    }

    /* Fit all tabs on a phone without scrolling */
    .page-hero-tab-num {
        display: none;
    }

    .page-hero-tabs a {
        flex: 1 1 auto;
        padding: 18px 14px 18px 0;
        font-size: 13px;
    }

    .page-hero-tabs a:last-child {
        padding-right: 0;
    }

}


@media (prefers-reduced-motion: reduce) {

    .page-hero-bg {
        animation: none;
        transform: none;
    }

}


/* =====================================================
   OUR STORY — 3D glass panels (About › Our History)
   Cards sit like an open book; JS sets --rx/--ry (tilt)
   and --gx/--gy (glare position) on pointer move.
===================================================== */

/* =====================================================
   1900s VINTAGE / OLD-WORLD NEWSPAPER AESTHETIC
   Sepia, parchment, ornate Victorian borders
===================================================== */

.story {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: clamp(90px, 10vw, 150px) 0;

    /* Aged parchment background */
    background: #1a1108;
    color: #f5ead7;

    /* Subtle paper grain via repeating noise */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}


/* Translucent photo wash — sepia-toned */

.story-bg {
    position: absolute;
    inset: 0;
    z-index: -4;

    background-size: cover;
    background-position: center;

    /* Desaturate + sepia warmth */
    opacity: .18;
    filter: saturate(0) sepia(.7) brightness(.6);
}

.story::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -3;

    /* Warm amber vignette overlay */
    background:
        radial-gradient(ellipse at 50% 0%, rgba(60, 30, 5, .15), rgba(20, 10, 2, .92) 70%),
        linear-gradient(180deg, rgba(26, 17, 8, .55), rgba(26, 17, 8, .96));
}

/* Ornate Victorian top & bottom border rules */
.story::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    border-top: 1px solid rgba(205, 170, 100, .35);
    border-bottom: 1px solid rgba(205, 170, 100, .35);

    background:
        /* top ornate rule */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 6px,
            rgba(205, 170, 100, .18) 6px,
            rgba(205, 170, 100, .18) 7px
        ) top / 100% 3px no-repeat,
        /* bottom ornate rule */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 6px,
            rgba(205, 170, 100, .18) 6px,
            rgba(205, 170, 100, .18) 7px
        ) bottom / 100% 3px no-repeat;
}


/* Soft glowing light behind the glass */

.story-orb {
    position: absolute;
    z-index: -2;

    width: 520px;
    height: 520px;

    border-radius: 50%;
    filter: blur(100px);

    animation: story-float 18s ease-in-out infinite alternate;
}

/* Warm amber / sepia glow instead of red/blue */
.story-orb--red {
    top: -120px;
    left: -140px;
    background: rgba(180, 110, 20, .35);
}

.story-orb--blue {
    right: -160px;
    bottom: -160px;
    background: rgba(120, 70, 10, .28);
    animation-delay: -9s;
}

@keyframes story-float {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(60px, 50px) scale(1.12); }
}


/* Extruded year in the background */

.story-year {
    position: absolute;
    z-index: -1;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Warm sepia ghost year */
    color: rgba(205, 170, 100, .06);

    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(180px, 28vw, 440px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    font-style: italic;

    white-space: nowrap;
    pointer-events: none;
    user-select: none;

    text-shadow:
        2px 2px 0 rgba(60, 30, 5, .9),
        4px 4px 0 rgba(60, 30, 5, .8),
        6px 6px 0 rgba(60, 30, 5, .7),
        8px 8px 0 rgba(60, 30, 5, .6),
        10px 10px 0 rgba(60, 30, 5, .5),
        12px 12px 0 rgba(60, 30, 5, .4),
        14px 14px 0 rgba(60, 30, 5, .3),
        30px 40px 60px rgba(0, 0, 0, .5);
}


/* Grid + cards */

.story-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px;
    align-items: stretch;

    perspective: 1800px;
}

.story-card {
    --base: 0deg;
    --rx: 0deg;
    --ry: 0deg;
    --gx: 50%;
    --gy: 50%;

    position: relative;

    padding: 54px 50px;

    transform-style: preserve-3d;
    transform: rotateY(calc(var(--base) + var(--ry))) rotateX(var(--rx));

    transition:
        transform .7s cubic-bezier(.22, 1, .36, 1),
        opacity .9s ease,
        translate .9s cubic-bezier(.22, 1, .36, 1);
}

/* Open-book pose: inner edges recede towards the spine */
.story-card--welcome {
    --base: 5deg;

    /* Stretches to match the taller right panel — keep content centred */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.story-card--welcome > .story-layer {
    align-self: stretch;
}
.story-card--who     { --base: -5deg; }

.story-card.is-tilting {
    transition:
        transform .12s linear,
        opacity .9s ease,
        translate .9s cubic-bezier(.22, 1, .36, 1);
}


/* Frosted glass layer (kept separate so the card stays 3D) */

/* Aged parchment / frosted glass card */
.story-glass {
    position: absolute;
    inset: 0;

    /* Warm aged paper tone */
    background:
        linear-gradient(
            145deg,
            rgba(205, 170, 100, .12),
            rgba(180, 140, 70, .05)
        );

    /* Ornate Victorian double-border */
    border: 1px solid rgba(205, 170, 100, .35);
    outline: 1px solid rgba(205, 170, 100, .12);
    outline-offset: -6px;

    -webkit-backdrop-filter: blur(14px) saturate(80%) sepia(40%);
    backdrop-filter: blur(14px) saturate(80%) sepia(40%);

    box-shadow:
        0 40px 80px rgba(0, 0, 0, .5),
        inset 0 1px 0 rgba(205, 170, 100, .3),
        inset 0 -1px 0 rgba(205, 170, 100, .15);
}

/* Antique gold spine accent on inner edge */
.story-card--welcome .story-glass { border-right: 2px solid rgba(205, 170, 100, .7); }
.story-card--who .story-glass     { border-left: 2px solid rgba(205, 170, 100, .7); }

.story-glare {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at var(--gx) var(--gy),
            rgba(255, 255, 255, .16),
            transparent 45%
        );

    opacity: 0;
    transform: translateZ(1px);
    pointer-events: none;

    transition: opacity .4s ease;
}

.story-card.is-tilting .story-glare {
    opacity: 1;
}


/* Depth layers — content floats above the glass */

.story-layer {
    position: relative;
}

.story-layer--1 { transform: translateZ(24px); }
.story-layer--2 { transform: translateZ(44px); }
.story-layer--3 { transform: translateZ(64px); }


/* Type */

.story-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    /* Antique gold kicker */
    color: #c8a84b;

    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 3px;
    text-transform: uppercase;

    /* Decorative side rules */
    padding: 0 10px;
    border-left: 1px solid rgba(200, 168, 75, .5);
    border-right: 1px solid rgba(200, 168, 75, .5);
}

.story-kicker i {
    font-size: 11px;
    color: #c8a84b;
}

.story-amh {
    margin: 12px 0 0;

    color: rgba(205, 170, 100, .55);
    font-family: 'Georgia', serif;
    font-size: 15px;
    font-style: italic;
}

.story-title {
    margin: 22px 0 24px;

    /* Warm parchment headline */
    color: #f5e8c8;

    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(40px, 4.2vw, 64px);
    font-weight: 700;
    font-style: italic;
    line-height: 1.05;
    letter-spacing: -1px;

    /* Old-press subtle text shadow */
    text-shadow:
        1px 1px 0 rgba(0,0,0,.6),
        0 0 40px rgba(205, 170, 100, .15);
}

.story-title span {
    /* Lighter parchment for emphasis */
    color: #c8a84b;
    font-style: normal;
}

.story-subtitle {
    margin: 18px 0 18px;

    color: #f0deb8;

    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 600;
    font-style: italic;
    line-height: 1.3;
    letter-spacing: 0;
}

.story-text {
    margin: 0;

    color: rgba(245, 232, 200, .82);

    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 15.5px;
    line-height: 1.85;

    /* Slight first-letter drop-cap feel */
}

.story-text strong {
    color: #f5e8c8;
    font-weight: 700;
}

.story-note {
    margin: 0 0 28px;
    padding-left: 16px;

    /* Antique gold rule instead of red */
    border-left: 2px solid rgba(200, 168, 75, .7);

    color: rgba(245, 232, 200, .65);

    font-family: 'Georgia', serif;
    font-size: 14px;
    font-style: italic;
    line-height: 1.75;
}


/* Stat chips */

.story-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;

    margin: 36px 0;
}

.story-stat {
    padding: 20px 18px;

    /* Aged parchment stat chip */
    background: rgba(205, 170, 100, .07);
    border: 1px solid rgba(205, 170, 100, .28);
    border-top: 2px solid rgba(200, 168, 75, .8);

    box-shadow:
        0 18px 34px rgba(0, 0, 0, .4),
        inset 0 1px 0 rgba(205, 170, 100, .15);

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        background .35s ease;
}

.story-stat:hover {
    transform: translateY(-6px);
    background: rgba(205, 170, 100, .14);
}

.story-stat strong {
    display: block;

    color: #f5e8c8;

    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 34px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    letter-spacing: -1px;
}

.story-stat sup {
    top: -.6em;
    color: #c8a84b;
    font-size: .5em;
}

.story-stat span {
    display: block;

    margin-top: 10px;

    color: rgba(205, 170, 100, .7);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


/* Sector tiles */

.story-sectors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin: 28px 0 26px;
    padding: 0;

    list-style: none;
}

.story-sector {
    position: relative;

    height: 100%;
    min-height: 136px;

    display: flex;
    flex-direction: column;
    gap: 14px;

    padding: 18px;

    /* Antique card tile */
    background: rgba(205, 170, 100, .05);
    border: 1px solid rgba(205, 170, 100, .22);

    color: #f0deb8;

    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1),
        background .35s ease,
        border-color .35s ease,
        box-shadow .5s ease;
}

.story-sector:hover,
.story-sector:focus-visible {
    color: #f5e8c8;

    transform: translateY(-6px);

    background: rgba(205, 170, 100, .12);
    border-color: rgba(200, 168, 75, .8);

    box-shadow:
        0 24px 40px rgba(0, 0, 0, .45),
        inset 0 0 30px rgba(205, 170, 100, .05);
}

.story-sector-num {
    position: absolute;
    top: 18px;
    right: 18px;

    color: rgba(205, 170, 100, .45);

    font-family: 'Georgia', serif;
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 1.5px;
}

.story-sector-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(205, 170, 100, .4);
    border-radius: 50%;

    color: #c8a84b;
    font-size: 14px;

    transition:
        background .35s ease,
        border-color .35s ease,
        color .35s ease;
}

.story-sector:hover .story-sector-icon,
.story-sector:focus-visible .story-sector-icon {
    background: rgba(200, 168, 75, .25);
    border-color: #c8a84b;
    color: #f5e8c8;
}

.story-sector-name {
    padding-right: 22px;

    font-family: 'Georgia', serif;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
}

.story-sector-arrow {
    position: absolute;
    right: 18px;
    bottom: 20px;

    color: #c8a84b;
    font-size: 13px;

    opacity: 0;
    transform: translateX(-8px);

    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(.22, 1, .36, 1);
}

.story-sector:hover .story-sector-arrow,
.story-sector:focus-visible .story-sector-arrow {
    opacity: 1;
    transform: none;
}


/* Buttons */

.story-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.story-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    padding: 15px 26px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.story-btn i {
    font-size: 12px;
    transition: transform var(--transition);
}

.story-btn:hover {
    transform: translateY(-2px);
}

.story-btn:hover i {
    transform: translateX(4px);
}

.story-btn--solid {
    /* Antique gold primary button */
    background: linear-gradient(135deg, #c8a84b, #a0782e);
    color: #1a1108;
    border: 1px solid rgba(200, 168, 75, .6);
    font-family: 'Georgia', serif;
    font-style: italic;
}

.story-btn--solid:hover {
    background: linear-gradient(135deg, #d4b86a, #c8a84b);
    color: #1a1108;
}

.story-btn--ghost {
    border: 1px solid rgba(205, 170, 100, .45);
    color: #f0deb8;
    font-family: 'Georgia', serif;
    font-style: italic;
}

.story-btn--ghost:hover {
    background: rgba(205, 170, 100, .12);
    border-color: rgba(205, 170, 100, .8);
    color: #f5e8c8;
}

.story-btn:focus-visible,
.story-sector:focus-visible {
    outline: 2px solid rgba(200, 168, 75, .8);
    outline-offset: 3px;
}


/* =====================================================
   BRAND PAGES — shared button look (no gold / serif)
   Every /businesses/{slug} page sits inside .bz-page and
   reuses the homepage/Romina Coffee buttons: primary is
   solid red + white; secondary is a white outline on the
   dark heroes (light-hero themes override to navy below).
===================================================== */
.bz-page .story-btn--solid {
    background: #e3262e;
    color: #ffffff;
    border: 1px solid #e3262e;
    font-family: inherit;
    font-style: normal;
}

.bz-page .story-btn--solid:hover {
    background: #c21f26;
    color: #ffffff;
}

.bz-page .story-btn--ghost {
    border: 1px solid rgba(255, 255, 255, .5);
    color: #ffffff;
    font-family: inherit;
    font-style: normal;
}

.bz-page .story-btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #ffffff;
    color: #ffffff;
}

.bz-page .story-btn:focus-visible {
    outline-color: #e3262e;
}


/* Entrance — rises in, then settles into the 3D pose */

.story-reveal:not(.revealed) {
    opacity: 0;
    translate: 0 70px;
}


/* Responsive */

@media (max-width: 1000px) {

    .story-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .story-card--welcome,
    .story-card--who {
        --base: 0deg;
    }

    .story-card--welcome .story-glass,
    .story-card--who .story-glass {
        border-left: 1px solid rgba(205, 170, 100, .3);
        border-right: 1px solid rgba(205, 170, 100, .3);
        border-top: 2px solid rgba(200, 168, 75, .7);
    }

}

@media (max-width: 640px) {

    .story-card {
        padding: 38px 24px;
    }

    .story-title {
        letter-spacing: -1px;
    }

    .story-stats {
        gap: 8px;
    }

    .story-stat {
        padding: 16px 12px;
    }

    .story-stat strong {
        font-size: 26px;
    }

    .story-stat span {
        font-size: 9px;
        letter-spacing: .5px;
        overflow-wrap: anywhere;
    }

    .story-sectors {
        grid-template-columns: 1fr;
    }

    .story-sector {
        min-height: 0;
    }

}

@media (prefers-reduced-motion: reduce) {

    .story-orb {
        animation: none;
    }

    .story-card,
    .story-stat,
    .story-sector,
    .story-sector-arrow,
    .story-btn {
        transition: none;
    }

    .story-reveal:not(.revealed) {
        opacity: 1;
        translate: none;
    }

}


/* =====================================================
   BRAND PAGES — /businesses/{slug}
   One template for every business; content in
   config/businesses.php. Buttons reuse .story-btn.
===================================================== */

/* Shared bits */

.bz-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: var(--red);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.bz-label::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
}

.bz-label--light {
    color: #ff5960;
}

.bz-section-head {
    max-width: 760px;
    margin-bottom: 56px;
}

.bz-section-head h2,
.bz-overview-head h2,
.bz-cta h2 {
    margin: 20px 0 0;

    color: var(--deep-blue);

    font-size: clamp(34px, 3.8vw, 54px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1.5px;
}

.bz-section-head--light h2,
.bz-cta h2 {
    color: var(--white);
}


/* ---------- HERO (split) ---------- */

.bz-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding: 170px 0 110px;

    background:
        radial-gradient(ellipse at 85% 20%, rgba(62, 120, 255, .18), transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgba(227, 38, 46, .18), transparent 50%),
        var(--deep-blue);

    color: var(--white);
}

.bz-hero::before {
    /* faint grid texture */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 64px 64px;

    mask-image: linear-gradient(to bottom, #000 40%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
}

.bz-hero-index {
    position: absolute;
    top: 130px;
    right: 40px;

    color: rgba(255, 255, 255, .35);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
}

.bz-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 80px;
    align-items: center;
}

.bz-hero-copy h1 {
    color: var(--white);

    font-size: clamp(46px, 5.4vw, 86px);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -3px;
}

.bz-hero-kicker {
    margin: 24px 0 0;

    color: #b8c5d8;

    font-size: 19px;
    font-weight: 500;
    line-height: 1.5;
}

.bz-hero-intro {
    max-width: 560px;
    margin: 16px 0 38px;

    color: rgba(255, 255, 255, .72);

    font-size: 16px;
    line-height: 1.75;
}

/* Framed photo with offset red outline */

.bz-hero-media {
    position: relative;
    padding: 0 26px 26px 0;
}

.bz-hero-frame {
    position: relative;
    z-index: 1;

    aspect-ratio: 4 / 5;
    overflow: hidden;

    background: var(--deep-blue-2);
    box-shadow: 0 40px 80px rgba(0, 0, 0, .4);
}

.bz-hero-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

    transform: scale(1.04);
    animation: bz-settle 1.6s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes bz-settle {
    to { transform: scale(1); }
}

.bz-hero-media::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 26px;
    right: 0;
    bottom: 0;

    border: 2px solid var(--red);
}

.bz-hero-badge {
    position: absolute;
    z-index: 2;
    left: -34px;
    bottom: 60px;

    min-width: 170px;
    padding: 20px 24px;

    background: var(--white);
    color: var(--deep-blue);

    box-shadow: 0 24px 50px rgba(0, 0, 0, .3);
}

.bz-hero-badge strong {
    display: block;

    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
}

.bz-hero-badge span {
    display: block;
    max-width: 180px;
    margin-top: 8px;

    color: var(--gray);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1.5;
}


/* ---------- Photo placeholder ---------- */

.bz-ph {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 260px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;

    padding: 28px;

    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .08), transparent 55%),
        linear-gradient(150deg, #10305e, #071b3a);

    color: rgba(255, 255, 255, .8);
    overflow: hidden;
}

.bz-ph-initial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -58%);

    color: transparent;

    font-size: 260px;
    font-weight: 800;
    line-height: 1;

    -webkit-text-stroke: 1px rgba(255, 255, 255, .18);
}

.bz-ph--hero {
    /* Badge sits bottom-left of the hero frame — keep the text up top */
    justify-content: flex-start;
}

.bz-ph-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #ff5960;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.bz-ph-shot {
    font-size: 15px;
    line-height: 1.5;
}


/* ---------- OVERVIEW ---------- */

.bz-overview {
    padding: var(--section-space) 0;
    background: var(--white);
}

.bz-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
}

.bz-overview-body p {
    margin: 0 0 20px;

    color: var(--gray);

    font-size: 17px;
    line-height: 1.8;
}

.bz-overview-body p:first-child {
    color: var(--deep-blue);
    font-size: 20px;
    line-height: 1.65;
}

.bz-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;

    margin: 44px 0 0;
}

.bz-fact {
    padding-top: 20px;
    border-top: 2px solid var(--red);
}

.bz-fact dt {
    color: var(--deep-blue);

    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
}

.bz-fact dd {
    margin: 10px 0 0;

    color: var(--gray);

    font-size: 13px;
    line-height: 1.5;
}

/* --- MESKOTT OVERVIEW REDESIGN --- */
.bz-overview--meskott-culinary {
    padding: calc(var(--section-space) * 1.2) 0;
}

.bz-overview--meskott-culinary .bz-label {
    color: #a81c20;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    font-size: 12px;
    letter-spacing: 4px;
    margin-bottom: 24px;
}

.bz-overview--meskott-culinary .bz-label::before {
    background: #a81c20;
    width: 40px;
    height: 1px;
}

.bz-overview--meskott-culinary .bz-overview-head h2 {
    color: var(--deep-blue);
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(52px, 6vw, 84px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin-top: 0;
}

.bz-overview--meskott-culinary .bz-overview-body p:first-child {
    color: var(--deep-blue);
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(24px, 2.5vw, 32px);
    line-height: 1.5;
    font-style: italic;
    margin-bottom: 32px;
    font-weight: 400;
}

.bz-overview--meskott-culinary .bz-overview-body p {
    color: #4a5568;
    font-size: 16px;
    line-height: 1.9;
    font-weight: 300;
    max-width: 95%;
}

.bz-overview--meskott-culinary .bz-facts {
    margin-top: 64px;
    padding-top: 0;
    border-top: none;
    gap: 32px;
}

.bz-overview--meskott-culinary .bz-fact {
    border-left: none;
    border-top: 1px solid rgba(7, 27, 58, 0.1);
    padding: 24px 0 12px 0;
    position: relative;
    transition: transform 0.3s ease;
}

.bz-overview--meskott-culinary .bz-fact::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #a81c20;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.bz-overview--meskott-culinary .bz-fact:hover {
    transform: translateY(-2px);
}

.bz-overview--meskott-culinary .bz-fact:hover::before {
    width: 48px;
}

.bz-overview--meskott-culinary .bz-fact dt {
    color: var(--deep-blue);
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 32px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.bz-overview--meskott-culinary .bz-fact dd {
    color: #64748b;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: none;
    line-height: 1.6;
    margin-top: 8px;
    font-weight: 400;
}


/* ---------- HIGHLIGHTS ---------- */

.bz-highlights {
    padding: var(--section-space) 0;
    background: var(--light);
}

.bz-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.bz-card {
    position: relative;

    min-height: 190px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;

    padding: 28px 26px;

    background: var(--white);
    border: 1px solid #e6e9ee;

    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1),
        box-shadow .5s ease,
        border-color .35s ease;
}

.bz-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;

    width: 100%;
    height: 3px;

    background: var(--red);

    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.bz-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 24px 48px rgba(7, 27, 58, .12);
}

.bz-card:hover::after {
    transform: scaleX(1);
}

.bz-card-num {
    position: absolute;
    top: 26px;
    right: 24px;

    color: #c3cad5;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.bz-card-icon {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    background: var(--deep-blue);
    color: var(--white);

    font-size: 18px;

    transition: background .35s ease;
}

.bz-card:hover .bz-card-icon {
    background: var(--red);
}

.bz-card-name {
    color: var(--deep-blue);

    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}

/* --- MESKOTT HIGHLIGHTS REDESIGN --- */
.bz-highlights--meskott-culinary {
    background: #fafaf9;
    padding: calc(var(--section-space) * 1.2) 0;
}

.bz-highlights--meskott-culinary .bz-label {
    color: #a81c20;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    font-size: 12px;
    letter-spacing: 4px;
    margin-bottom: 24px;
}

.bz-highlights--meskott-culinary .bz-label::before {
    background: #a81c20;
    width: 40px;
    height: 1px;
}

.bz-highlights--meskott-culinary .bz-section-head h2 {
    color: var(--deep-blue);
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(42px, 5vw, 64px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-top: 0;
}

.bz-highlights--meskott-culinary .bz-cards {
    gap: 32px;
    margin-top: 60px;
}

.bz-highlights--meskott-culinary .bz-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.bz-highlights--meskott-culinary .bz-card::after {
    display: none;
}

.bz-highlights--meskott-culinary .bz-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #a81c20;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.bz-highlights--meskott-culinary .bz-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: rgba(168, 28, 32, 0.2);
}

.bz-highlights--meskott-culinary .bz-card:hover::before {
    width: 100%;
}

.bz-highlights--meskott-culinary .bz-card-icon {
    width: 60px;
    height: 60px;
    background: #f8fafc;
    color: var(--deep-blue);
    font-size: 20px;
    border-radius: 12px;
    transition: all 0.4s ease;
}

.bz-highlights--meskott-culinary .bz-card:hover .bz-card-icon {
    background: #a81c20;
    color: #ffffff;
    transform: scale(1.05);
}

.bz-highlights--meskott-culinary .bz-card-num {
    top: 32px;
    right: 32px;
    color: #cbd5e1;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
}

.bz-highlights--meskott-culinary .bz-card-name {
    color: var(--deep-blue);
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    font-style: italic;
    margin-top: 10px;
}


/* ---------- STATS + JOURNEY (coffee) ---------- */

.bz-stats {
    position: relative;
    overflow: hidden;

    padding: var(--section-space) 0;

    background:
        radial-gradient(ellipse at 100% 0%, rgba(227, 38, 46, .18), transparent 50%),
        var(--deep-blue);
    color: var(--white);
}

.bz-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-top: 1px solid rgba(255, 255, 255, .15);
    border-left: 1px solid rgba(255, 255, 255, .15);
}

.bz-stat {
    padding: 36px 32px;

    border-right: 1px solid rgba(255, 255, 255, .15);
    border-bottom: 1px solid rgba(255, 255, 255, .15);

    transition: background .35s ease;
}

.bz-stat:hover {
    background: rgba(255, 255, 255, .05);
}

.bz-stat strong {
    display: block;

    font-size: clamp(34px, 3.4vw, 50px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1.5px;
}

.bz-stat span {
    display: block;
    margin-top: 12px;

    color: rgba(255, 255, 255, .65);

    font-size: 14px;
    line-height: 1.5;
}

.bz-journey {
    position: relative;

    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));

    margin: 70px 0 0;
    padding: 0;
    list-style: none;
}

.bz-journey::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;

    height: 2px;
    background: linear-gradient(90deg, var(--red), rgba(255, 255, 255, .25));
}

.bz-journey li {
    position: relative;
    padding-right: 12px;
}

.bz-journey-dot {
    display: block;

    width: 16px;
    height: 16px;

    border: 2px solid var(--red);
    border-radius: 50%;
    background: var(--deep-blue);
}

.bz-journey li:last-child .bz-journey-dot {
    background: var(--red);
}

.bz-journey-num {
    display: block;
    margin-top: 20px;

    color: #ff5960;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.bz-journey-name {
    display: block;
    margin-top: 6px;

    font-size: 15px;
    font-weight: 600;
}

/* ---- Journey — a marker circle travels the rail from farm to
        global market: it glides step to step, growing a progress
        line behind it and lighting each dot + label as it arrives.
        Driven by JS (.is-in on the rail, .is-active per step). ---- */

.bz-journey-num,
.bz-journey-name {
    opacity: .4;
    transition: opacity .45s ease;
}

.bz-journey-dot {
    transition:
        background-color .4s ease,
        border-color .4s ease,
        transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

/* Progress fill — accent line that grows behind the marker */
.bz-journey-fill {
    position: absolute;
    top: 7px;
    left: 0;
    z-index: 1;

    width: 0;
    height: 2px;
    background: var(--red);

    transition: width .6s cubic-bezier(.22, 1, .36, 1);
}

/* The travelling marker */
.bz-journey-marker {
    position: absolute;
    top: 8px;
    left: 0;
    z-index: 3;

    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;          /* centre on the rail point */

    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 20%, transparent);

    opacity: 0;
    transform: translateX(0);
    transition:
        transform .6s cubic-bezier(.22, 1, .36, 1),
        opacity .3s ease;
}

.bz-journey.is-in .bz-journey-marker {
    opacity: 1;
}

/* Steps the marker has reached */
.bz-journey li.is-active .bz-journey-dot {
    background: var(--red);
    border-color: var(--red);
    transform: scale(1.12);
}

.bz-journey li.is-active .bz-journey-num,
.bz-journey li.is-active .bz-journey-name {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .bz-journey-marker,
    .bz-journey-fill {
        transition: none;
    }
    .bz-journey-num,
    .bz-journey-name {
        opacity: 1;
    }
}


/* ---------- GALLERY ---------- */

.bz-gallery {
    padding: var(--section-space) 0;
    background: var(--white);
}

.bz-gallery-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 56px;
}

.bz-gallery-head .bz-section-head {
    margin-bottom: 0;
}

.bz-gallery-hint {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;

    color: var(--gray);

    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
}

.bz-gallery-hint i {
    color: var(--red);
}


/* Mosaic — a 7-tile pattern that locks together in 4 columns:
   tile 1 is 2x2, tile 3 is tall, tile 5 is wide, the rest 1x1.
   The pattern repeats for 14, 21… photos. */

.bz-mosaic {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 230px;
    grid-auto-flow: dense;
    gap: 14px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.bz-tile {
    position: relative;
    overflow: hidden;

    background: var(--deep-blue);

    transition:
        filter .5s ease,
        transform .6s cubic-bezier(.22, 1, .36, 1),
        box-shadow .6s ease;
}

.bz-tile:nth-child(7n + 1) { grid-column: span 2; grid-row: span 2; }
.bz-tile:nth-child(7n + 3) { grid-row: span 2; }
.bz-tile:nth-child(7n + 5) { grid-column: span 2; }

/* Red bar that sweeps along the bottom on hover */
.bz-tile::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;

    width: 100%;
    height: 4px;

    background: var(--red);

    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}

.bz-tile-btn {
    position: absolute;
    inset: 0;

    display: block;
    width: 100%;
    padding: 0;

    border: 0;
    background: none;

    cursor: zoom-in;
}

.bz-tile-btn img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

    transition:
        transform 1.2s cubic-bezier(.22, 1, .36, 1),
        filter .6s ease;
}

/* Caption overlay */
.bz-tile-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;

    padding: 26px 26px 30px;

    background: linear-gradient(to top, rgba(7, 27, 58, .92) 0%, rgba(7, 27, 58, .35) 45%, transparent 70%);
    color: var(--white);
    text-align: left;

    opacity: 0;
    transition: opacity .5s ease;
}

.bz-tile-overlay > span {
    transform: translateY(18px);
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.bz-tile-overlay > span:nth-child(2) { transition-delay: .04s; }
.bz-tile-overlay > span:nth-child(3) { transition-delay: .08s; }

.bz-tile-index {
    color: #ff5960;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.bz-tile-caption {
    color: var(--white);

    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.bz-tile-shot {
    color: rgba(255, 255, 255, .72);

    font-size: 13px;
    line-height: 1.5;
}

/* Expand button, top-right */
.bz-tile-zoom {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    background: var(--white);
    color: var(--deep-blue);

    font-size: 14px;

    opacity: 0;
    transform: scale(.6) rotate(-45deg);
    transition:
        opacity .4s ease,
        transform .5s cubic-bezier(.34, 1.56, .64, 1),
        background .3s ease,
        color .3s ease;
}

/* ---- Hover / focus ---- */

.bz-tile:hover,
.bz-tile:focus-within {
    box-shadow: 0 24px 50px rgba(7, 27, 58, .25);
}

.bz-tile:hover::after,
.bz-tile:focus-within::after {
    transform: scaleX(1);
}

.bz-tile:hover .bz-tile-btn img,
.bz-tile:focus-within .bz-tile-btn img {
    transform: scale(1.08);
}

.bz-tile:hover .bz-tile-overlay,
.bz-tile:focus-within .bz-tile-overlay {
    opacity: 1;
}

.bz-tile:hover .bz-tile-overlay > span,
.bz-tile:focus-within .bz-tile-overlay > span {
    transform: none;
}

.bz-tile:hover .bz-tile-zoom,
.bz-tile:focus-within .bz-tile-zoom {
    opacity: 1;
    transform: none;
}

.bz-tile-btn:hover .bz-tile-zoom {
    background: var(--red);
    color: var(--white);
}

.bz-tile-btn:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: -3px;
}

/* Spotlight — the rest of the mosaic steps back */
@media (hover: hover) {
    .bz-mosaic:hover .bz-tile:not(:hover) {
        filter: grayscale(.65) brightness(.72);
    }
}

/* Placeholder tiles */
.bz-tile--ph .bz-ph {
    position: absolute;
    inset: 0;
    min-height: 0;
    padding: 24px;
}

.bz-tile--ph .bz-tile-caption {
    margin-top: 4px;
    font-size: 16px;
}

.bz-tile--ph .bz-ph-shot {
    order: -1;
    margin-bottom: auto;

    color: rgba(255, 255, 255, .55);
    font-size: 13px;
}

.bz-tile--ph:hover {
    transform: translateY(-4px);
}

/* Touch screens: no hover, so captions show up front */
@media (hover: none) {
    .bz-tile-overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(7, 27, 58, .85) 0%, transparent 55%);
    }

    .bz-tile-overlay > span {
        transform: none;
    }

    .bz-tile-shot {
        display: none;
    }
}


/* ---------- LIGHTBOX ---------- */

.bz-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000; /* above floating widgets (chat button, intro overlay) */

    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    align-items: center;
    gap: 16px;

    padding: 70px 24px 40px;

    background: rgba(4, 14, 30, .94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);

    opacity: 0;
    transition: opacity .3s ease;
}

.bz-lightbox[hidden] {
    display: none;
}

.bz-lightbox.is-open {
    opacity: 1;
}

.bz-lb-figure {
    grid-column: 2;
    margin: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.bz-lb-img {
    max-width: 100%;
    max-height: calc(100vh - 190px);
    object-fit: contain;

    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);

    transform: scale(.96);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.bz-lightbox.is-open .bz-lb-img {
    transform: none;
}

.bz-lightbox.is-swapping .bz-lb-img {
    animation: bz-lb-in .45s cubic-bezier(.22, 1, .36, 1);
}

@keyframes bz-lb-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.bz-lb-caption {
    display: flex;
    align-items: center;
    gap: 16px;

    color: var(--white);

    font-size: 15px;
    font-weight: 600;
}

.bz-lb-count {
    color: #ff5960;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.bz-lb-btn {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: transparent;
    color: var(--white);

    font-size: 18px;
    cursor: pointer;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.bz-lb-btn:hover {
    background: var(--red);
    border-color: var(--red);
}

.bz-lb-btn:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

.bz-lb-prev { grid-column: 1; grid-row: 1; justify-self: end; }
.bz-lb-next { grid-column: 3; grid-row: 1; }
.bz-lb-figure { grid-row: 1; }

.bz-lb-close {
    position: absolute;
    top: 18px;
    right: 22px;

    width: 48px;
    height: 48px;
}

.bz-lightbox.is-single .bz-lb-prev,
.bz-lightbox.is-single .bz-lb-next {
    visibility: hidden;
}


/* ---------- Gallery responsive ---------- */

@media (max-width: 1000px) {

    .bz-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 200px;
    }

}

@media (max-width: 640px) {

    .bz-mosaic {
        grid-template-columns: 1fr;
        grid-auto-rows: 260px;
    }

    .bz-tile:nth-child(n) {
        grid-column: auto;
        grid-row: auto;
    }

    .bz-lightbox {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto;
        padding: 70px 16px 24px;
    }

    .bz-lb-figure {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .bz-lb-prev { grid-column: 1; grid-row: 2; justify-self: end; }
    .bz-lb-next { grid-column: 2; grid-row: 2; justify-self: start; }

    .bz-lb-img {
        max-height: calc(100vh - 230px);
    }

}

@media (prefers-reduced-motion: reduce) {

    .bz-tile,
    .bz-tile::after,
    .bz-tile-btn img,
    .bz-tile-overlay,
    .bz-tile-overlay > span,
    .bz-tile-zoom,
    .bz-lightbox,
    .bz-lb-img {
        transition: none;
    }

    .bz-lightbox.is-swapping .bz-lb-img {
        animation: none;
    }

}


/* ---------- LOCATIONS ---------- */

.bz-locations {
    padding: var(--section-space) 0;
    background: var(--light);
}

.bz-loc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.bz-loc {
    display: flex;
    gap: 18px;

    padding: 30px 28px;

    background: var(--white);
    border-left: 3px solid var(--deep-blue);

    transition:
        border-color .35s ease,
        box-shadow .5s ease;
}

.bz-loc:hover {
    border-left-color: var(--red);
    box-shadow: 0 20px 40px rgba(7, 27, 58, .1);
}

.bz-loc-pin {
    flex: 0 0 auto;
    color: var(--red);
    font-size: 20px;
    line-height: 1.2;
}

.bz-loc h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    margin: 0;

    color: var(--deep-blue);

    font-size: 20px;
    font-weight: 700;
}

.bz-loc p {
    margin: 8px 0 0;

    color: var(--gray);

    font-size: 15px;
    line-height: 1.6;
}

.bz-tag {
    padding: 4px 10px;

    background: var(--deep-blue);
    color: var(--white);

    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.bz-tag--soon {
    background: var(--red);
}

.bz-loc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 16px;
    padding-bottom: 4px;

    border-bottom: 1px solid currentColor;

    color: var(--deep-blue);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    transition: color .3s ease;
}

.bz-loc-link:hover {
    color: var(--red);
}

.bz-loc-link i {
    font-size: 10px;
}


/* ---------- CTA ---------- */

.bz-cta {
    padding: 80px 0;

    background:
        linear-gradient(100deg, rgba(7, 27, 58, .98), rgba(11, 40, 82, .96));
    color: var(--white);
}

.bz-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 36px;
}

.bz-cta h2 {
    margin-top: 16px;
}


/* ---------- MORE BUSINESSES ---------- */

.bz-more {
    padding: var(--section-space) 0;
    background: var(--white);
}

.bz-more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

.bz-more-card {
    position: relative;

    min-height: 230px;

    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 28px 26px 60px;

    border: 1px solid #e6e9ee;

    color: var(--deep-blue);

    transition:
        background .4s ease,
        color .4s ease,
        border-color .4s ease,
        transform .5s cubic-bezier(.22, 1, .36, 1);
}

.bz-more-card:hover {
    background: var(--deep-blue);
    border-color: var(--deep-blue);
    color: var(--white);
    transform: translateY(-6px);
}

.bz-more-group {
    color: var(--red);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.bz-more-name {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
}

.bz-more-kicker {
    color: var(--gray);
    font-size: 13px;
    line-height: 1.55;
    transition: color .4s ease;
}

.bz-more-card:hover .bz-more-kicker {
    color: rgba(255, 255, 255, .65);
}

.bz-more-arrow {
    position: absolute;
    left: 26px;
    bottom: 24px;

    color: var(--red);

    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.bz-more-card:hover .bz-more-arrow {
    transform: translateX(8px);
}


/* ---------- Anchors clear the fixed header ---------- */

.bz-locations,
.bz-overview {
    scroll-margin-top: 90px;
}


/* =====================================================
   ROMINA COFFEE — black & white re-tint of the template
   Scoped to .bz-theme--coffee (set from config 'theme').
   Retokenises the shared .bz-* styles into near-black
   surfaces, white type and the site red accent, so the
   page reads monochrome while Koba and every other brand
   keep their own palette. Layout and type are untouched.
===================================================== */

.bz-theme--coffee {
    --deep-blue:   #0E2240;   /* brand navy — dark surfaces (matches the homepage coffee section) */
    --deep-blue-2: #0B1B33;   /* deeper navy — alternating dark surface / frames */
    --red:         #e3262e;   /* site red — the accent (matches homepage) */

    --romina-red:  #e3262e;   /* the brand red — logo-line accents */
}

/* HERO — flat near-black (the base grid stays a faint neutral grey) */
.bz-theme--coffee .bz-hero {
    background: var(--deep-blue);
}

.bz-theme--coffee .bz-hero-kicker {
    color: rgba(255, 255, 255, .70);
}

/* STATS — alternating near-black panel, no colour wash */
.bz-theme--coffee .bz-stats {
    background: var(--deep-blue-2);
}

/* Light-red accents → the site red */
.bz-theme--coffee .bz-label--light,
.bz-theme--coffee .bz-ph-note,
.bz-theme--coffee .bz-journey-num,
.bz-theme--coffee .bz-tile-index,
.bz-theme--coffee .bz-lb-count {
    color: var(--red);
}

/* Journey rail: red → white hairline */
.bz-theme--coffee .bz-journey::before {
    background: linear-gradient(90deg, var(--red), rgba(255, 255, 255, .25));
}

/* BUTTONS — reuse the homepage look: solid red + outlined white,
   no italic serif */
.bz-theme--coffee .story-btn--solid {
    background: var(--red);
    color: #ffffff;
    border: 1px solid var(--red);
    font-family: inherit;
    font-style: normal;
}

.bz-theme--coffee .story-btn--solid:hover {
    background: #c21f26;
    color: #ffffff;
}

.bz-theme--coffee .story-btn--ghost {
    border: 1px solid rgba(255, 255, 255, .5);
    color: #ffffff;
    font-family: inherit;
    font-style: normal;
}

.bz-theme--coffee .story-btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #ffffff;
    color: #ffffff;
}

.bz-theme--coffee .story-btn:focus-visible {
    outline-color: var(--red);
}


/* =====================================================
   ROMINA COFFEE — bespoke section treatments
   Sets Overview, Highlights and Locations apart from the
   shared Koba/other-brand template. No lines or dots —
   the personality comes from white surfaces and motion:
   lift, an icon that spins + fills red, a light sheen
   sweep, a bouncing pin and a faint red wash on hover.
===================================================== */

/* ---- Section labels: site red (rule stays the default
        short bar; no dot). ---- */
.bz-theme--coffee .bz-overview .bz-label,
.bz-theme--coffee .bz-highlights .bz-label,
.bz-theme--coffee .bz-locations .bz-label {
    color: var(--red);
}


/* ---- OVERVIEW: white paper; each fact lifts and its number
        turns red on hover (no top line) ---- */
.bz-theme--coffee .bz-overview {
    background: #ffffff;
}

.bz-theme--coffee .bz-facts {
    gap: 20px;
}

.bz-theme--coffee .bz-fact {
    border-top: none;
    padding: 22px 20px;
    border-radius: 6px;

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        background .45s ease,
        box-shadow .45s ease;
}

.bz-theme--coffee .bz-fact:hover {
    transform: translateY(-6px);
    background: #ffffff;
    box-shadow: 0 22px 44px rgba(0, 0, 0, .10);
}

.bz-theme--coffee .bz-fact dt {
    transition:
        transform .4s cubic-bezier(.34, 1.56, .64, 1),
        color .4s ease;
    transform-origin: left center;
}

.bz-theme--coffee .bz-fact:hover dt {
    color: var(--red);               /* site red */
    transform: scale(1.06);
}


/* ---- HIGHLIGHTS: warm cream cards. On hover the card lifts,
        a light sheen sweeps across, and the icon spins, fills
        with a warm gradient and glows ---- */
.bz-theme--coffee .bz-highlights {
    background: #ffffff;
}

/* Roomier grid + larger cards than the shared template */
.bz-theme--coffee .bz-cards {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
}

.bz-theme--coffee .bz-card {
    position: relative;
    overflow: hidden;

    min-height: 244px;
    gap: 30px;
    padding: 34px 30px;

    background: #ffffff;
    border: 1px solid #e6e9ee;
}

/* drop the shared underline entirely */
.bz-theme--coffee .bz-card::after {
    display: none;
}

/* light sheen that sweeps across on hover (a fill, not a line) */
.bz-theme--coffee .bz-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;                       /* rides over the content as a shine */

    width: 55%;
    height: 100%;

    background: linear-gradient(100deg, transparent, rgba(0, 0, 0, .05), transparent);

    transform: skewX(-12deg) translateX(-160%);
    opacity: 0;
    pointer-events: none;
    transition: transform .75s ease, opacity .5s ease;
}

.bz-theme--coffee .bz-card:hover::before {
    opacity: 1;
    transform: skewX(-12deg) translateX(340%);
}

.bz-theme--coffee .bz-card-name {
    font-size: 21px;
    transition: color .4s ease;
}

.bz-theme--coffee .bz-card:hover .bz-card-name {
    color: var(--deep-blue);
}

.bz-theme--coffee .bz-card-icon {
    width: 62px;
    height: 62px;
    font-size: 22px;

    background: var(--deep-blue);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .08);

    transition:
        transform .5s cubic-bezier(.34, 1.56, .64, 1),
        background .45s ease,
        box-shadow .45s ease;
}

.bz-theme--coffee .bz-card:hover .bz-card-icon {
    transform: rotate(-8deg) scale(1.1);
    background: var(--red);
    box-shadow: 0 12px 26px rgba(227, 38, 46, .30), 0 0 0 5px rgba(227, 38, 46, .18);
}

.bz-theme--coffee .bz-card-num {
    color: #c3cad5;
    transition: transform .45s ease, color .4s ease;
}

.bz-theme--coffee .bz-card:hover .bz-card-num {
    transform: translateX(-4px);
    color: var(--red);
}


/* ---- LOCATIONS: warm cream cards. On hover the card lifts,
        a warm wash slides in from the left and the pin
        bounces (no red edge, no dot) ---- */
.bz-theme--coffee .bz-locations {
    background: #ffffff;
}

.bz-theme--coffee .bz-loc {
    position: relative;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #e6e9ee;
    border-radius: 6px;

    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        box-shadow .4s ease,
        border-color .4s ease;
}

/* subtle red wash that slides in from the left */
.bz-theme--coffee .bz-loc::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: linear-gradient(90deg, rgba(227, 38, 46, .07), transparent 55%);

    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}

.bz-theme--coffee .bz-loc:hover::before {
    opacity: 1;
}

.bz-theme--coffee .bz-loc-pin,
.bz-theme--coffee .bz-loc > div {
    position: relative;
    z-index: 1;
}

.bz-theme--coffee .bz-loc:hover {
    transform: translateY(-5px);
    border-color: #d7dbe2;
    box-shadow: 0 22px 44px rgba(0, 0, 0, .12);
}

.bz-theme--coffee .bz-loc-pin {
    transition: color .4s ease;
}

.bz-theme--coffee .bz-loc:hover .bz-loc-pin {
    color: var(--red);               /* deepen the pin to the site red */
}


/* =====================================================
   ROMINA RESTAURANTS — red-dominant dining theme.
   Largely red surfaces with small white moments (white
   cards + white type). Its own motion, distinct from the
   coffee page: candlelight blooms, a full plate-spin on
   the dish icons, numbers that rise, cards that lean in
   and a spotlight that blooms from the pin.
   Scoped to .bz-theme--restaurant (set from config).
===================================================== */

.bz-theme--restaurant {
    --deep-blue:   #a5171f;   /* deep red — dark surfaces + text on white cards */
    --deep-blue-2: #c21f28;
    --red:         #d12530;   /* red accent used on the white cards */

    --rst-red:     #c81f28;   /* dominant section red */
    --rst-red-dk:  #a5171f;   /* deeper red so white cards pop */
    --rst-glow-w:  rgba(255, 255, 255, .22);  /* white bloom on red fields */
    --rst-glow-r:  rgba(200, 31, 40, .16);    /* red bloom on white cards */
}

/* HERO — rich red with a soft white top-glow */
.bz-theme--restaurant .bz-hero {
    background:
        radial-gradient(ellipse at 82% 18%, rgba(255, 255, 255, .10), transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgba(0, 0, 0, .24), transparent 55%),
        linear-gradient(160deg, #c81f28, #8d131a);
}

.bz-theme--restaurant .bz-hero-kicker {
    color: rgba(255, 255, 255, .82);
}

.bz-theme--restaurant .bz-hero-media::before {
    border-color: rgba(255, 255, 255, .55);
}

.bz-theme--restaurant .bz-ph-note {
    color: #ffffff;
}


/* ---- OVERVIEW: red field, white type; a white bloom lights
        up behind each number, which rises on hover ---- */
.bz-theme--restaurant .bz-overview {
    background: var(--rst-red);
}

.bz-theme--restaurant .bz-overview .bz-label { color: #ffffff; }
.bz-theme--restaurant .bz-overview-head h2 { color: #ffffff; }
.bz-theme--restaurant .bz-overview-body p { color: rgba(255, 255, 255, .82); }
.bz-theme--restaurant .bz-overview-body p:first-child { color: #ffffff; }

.bz-theme--restaurant .bz-facts {
    gap: 20px;
}

.bz-theme--restaurant .bz-fact {
    position: relative;
    border-top: none;
    padding: 22px 20px;
}

.bz-theme--restaurant .bz-fact::before {   /* white bloom behind the number */
    content: "";
    position: absolute;
    top: 8px;
    left: 12px;
    z-index: 0;

    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--rst-glow-w), transparent 70%);

    opacity: 0;
    transform: scale(.4);
    pointer-events: none;
    transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}

.bz-theme--restaurant .bz-fact:hover::before {
    opacity: 1;
    transform: scale(1);
}

.bz-theme--restaurant .bz-fact dt,
.bz-theme--restaurant .bz-fact dd {
    position: relative;
    z-index: 1;
}

.bz-theme--restaurant .bz-fact dt {
    color: #ffffff;
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}

.bz-theme--restaurant .bz-fact dd {
    color: rgba(255, 255, 255, .75);
}

.bz-theme--restaurant .bz-fact:hover dt {
    transform: translateY(-4px);
}


/* ---- HIGHLIGHTS: deeper red field, white cards that lean in;
        a red bloom rises behind the icon and the plate icon
        spins a full turn as it fills ---- */
.bz-theme--restaurant .bz-highlights {
    background: var(--rst-red-dk);
}

.bz-theme--restaurant .bz-highlights .bz-label { color: #ffffff; }
.bz-theme--restaurant .bz-highlights .bz-section-head h2 { color: #ffffff; }

.bz-theme--restaurant .bz-cards {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
}

.bz-theme--restaurant .bz-card {
    position: relative;
    overflow: hidden;

    min-height: 244px;
    gap: 30px;
    padding: 34px 30px;

    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .06);
}

.bz-theme--restaurant .bz-card::after {
    display: none;
}

.bz-theme--restaurant .bz-card::before {   /* red bloom from the icon */
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 0;

    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--rst-glow-r), transparent 68%);

    opacity: 0;
    transform: scale(.25);
    pointer-events: none;
    transition: opacity .55s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}

.bz-theme--restaurant .bz-card:hover::before {
    opacity: 1;
    transform: scale(1.5);
}

/* lean-in instead of lift */
.bz-theme--restaurant .bz-card:hover {
    transform: scale(1.03);
    border-color: rgba(0, 0, 0, .05);
    box-shadow: 0 24px 48px rgba(120, 16, 22, .22);
}

/* keep content above the bloom (the number stays absolutely placed) */
.bz-theme--restaurant .bz-card-icon,
.bz-theme--restaurant .bz-card-name {
    position: relative;
    z-index: 1;
}

.bz-theme--restaurant .bz-card-num {
    z-index: 1;
    color: #cf8a8d;
}

.bz-theme--restaurant .bz-card-name {
    font-size: 21px;
    transition: color .4s ease;
}

.bz-theme--restaurant .bz-card:hover .bz-card-name {
    color: var(--deep-blue);
}

.bz-theme--restaurant .bz-card-icon {
    width: 62px;
    height: 62px;
    font-size: 22px;

    background: var(--deep-blue);
    box-shadow: 0 0 0 4px rgba(209, 37, 48, .14);

    transition:
        transform .7s cubic-bezier(.34, 1.4, .5, 1),
        background .45s ease,
        box-shadow .45s ease;
}

.bz-theme--restaurant .bz-card:hover .bz-card-icon {
    transform: rotate(360deg) scale(1.08);   /* a full "plating" turn */
    background: radial-gradient(circle at 32% 30%, #e23a44, #8d131a);
    box-shadow: 0 12px 26px rgba(141, 19, 26, .34), 0 0 0 5px rgba(209, 37, 48, .22);
}


/* ---- LOCATIONS: red field, white cards; a red spotlight
        blooms from the pin, the card leans in and the pin
        settles with a soft drop ---- */
.bz-theme--restaurant .bz-locations {
    background: var(--rst-red);
}

.bz-theme--restaurant .bz-locations .bz-label { color: #ffffff; }
.bz-theme--restaurant .bz-locations .bz-section-head h2 { color: #ffffff; }

.bz-theme--restaurant .bz-loc {
    position: relative;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 6px;

    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        box-shadow .4s ease,
        border-color .4s ease;
}

.bz-theme--restaurant .bz-loc::before {   /* red spotlight from the pin corner */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: radial-gradient(circle 220px at 46px 44px, var(--rst-glow-r), transparent 62%);

    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
}

.bz-theme--restaurant .bz-loc:hover::before {
    opacity: 1;
}

.bz-theme--restaurant .bz-loc-pin,
.bz-theme--restaurant .bz-loc > div {
    position: relative;
    z-index: 1;
}

.bz-theme--restaurant .bz-loc:hover {
    transform: scale(1.02);
    border-color: rgba(0, 0, 0, .05);
    box-shadow: 0 22px 44px rgba(120, 16, 22, .2);
}

.bz-theme--restaurant .bz-loc-pin {
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), color .4s ease;
}

.bz-theme--restaurant .bz-loc:hover .bz-loc-pin {
    transform: translateY(3px) scale(1.12);   /* the pin settles / drops */
    color: var(--red);
}


/* =====================================================
   JAQUAR WORLD — clean white theme, small blue accent.
   Its own motion, distinct from coffee & restaurant:
   a water-ripple that rings out from the icons and the
   showroom pin, with a chrome-blue sheen on the icons.
   Scoped to .bz-theme--jaguar (set from config).
===================================================== */

.bz-theme--jaguar {
    --deep-blue:   #123a63;   /* deep steel navy — dark text / icons on white */
    --deep-blue-2: #17518c;
    --red:         #1a72c2;   /* the small blue accent */

    --jag-blue:    #1a72c2;
    --jag-line:    #e2e8f0;   /* light hairline */
    --jag-mist:    #f3f7fb;   /* barely-there blue-white */
}

/* The ripple ring — shared by the icons and the pin */
@keyframes jag-ripple {
    0%   { transform: translate(-50%, -50%) scale(.4); opacity: .5; }
    100% { transform: translate(-50%, -50%) scale(3);  opacity: 0; }
}

/* ---- HERO: flipped to light — white field, navy type,
        blue accents and a blue badge ---- */
.bz-theme--jaguar .bz-hero {
    background:
        radial-gradient(ellipse at 80% 12%, rgba(26, 114, 194, .12), transparent 55%),
        linear-gradient(180deg, #ffffff, #eef4fa);
    color: var(--deep-blue);
}

.bz-theme--jaguar .bz-hero::before {
    background-image:
        linear-gradient(rgba(18, 58, 99, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 58, 99, .05) 1px, transparent 1px);
}

.bz-theme--jaguar .bz-hero-copy h1 { color: var(--deep-blue); }
.bz-theme--jaguar .bz-hero-kicker  { color: #4a6076; }
.bz-theme--jaguar .bz-hero-intro   { color: rgba(18, 58, 99, .72); }
.bz-theme--jaguar .bz-hero-index   { color: rgba(18, 58, 99, .35); }

.bz-theme--jaguar .page-hero-crumbs span    { color: var(--deep-blue); }
.bz-theme--jaguar .page-hero-crumbs a:hover { color: var(--jag-blue); }

.bz-theme--jaguar .bz-hero-media::before { border-color: var(--jag-blue); }

/* Jaguar's hero is light → navy outline/text (overrides the
   shared white ghost from .bz-page above) */
.bz-theme--jaguar .story-btn--ghost {
    border: 1px solid rgba(18, 58, 99, .35);
    color: var(--deep-blue);
}

.bz-theme--jaguar .story-btn--ghost:hover {
    background: var(--deep-blue);
    border-color: var(--deep-blue);
    color: #ffffff;
}

.bz-theme--jaguar .bz-hero-badge {
    background: var(--deep-blue);
    color: #ffffff;
}
.bz-theme--jaguar .bz-hero-badge span { color: rgba(255, 255, 255, .72); }


/* ---- OVERVIEW: white; facts lift and turn blue with a soft
        mist behind them ---- */
.bz-theme--jaguar .bz-facts { gap: 20px; }

.bz-theme--jaguar .bz-fact {
    border-top: none;
    padding: 22px 20px;
    border-radius: 8px;

    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        background .4s ease,
        box-shadow .4s ease;
}

.bz-theme--jaguar .bz-fact:hover {
    transform: translateY(-4px);
    background: var(--jag-mist);
    box-shadow: 0 16px 34px rgba(14, 58, 102, .10);
}

.bz-theme--jaguar .bz-fact dt { transition: color .4s ease; }
.bz-theme--jaguar .bz-fact:hover dt { color: var(--jag-blue); }


/* ---- HIGHLIGHTS: faint mist field, white cards; on hover a
        blue ripple rings out from the icon, which lifts and
        picks up a chrome-blue sheen ---- */
.bz-theme--jaguar .bz-highlights {
    background: var(--jag-mist);
}

.bz-theme--jaguar .bz-cards {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
}

.bz-theme--jaguar .bz-card {
    position: relative;
    overflow: hidden;

    min-height: 244px;
    gap: 30px;
    padding: 34px 30px;

    background: #ffffff;
    border: 1px solid var(--jag-line);
}

.bz-theme--jaguar .bz-card::after { display: none; }

.bz-theme--jaguar .bz-card::before {   /* ripple ring, centred on the icon */
    content: "";
    position: absolute;
    top: 65px;
    left: 61px;
    z-index: 0;

    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid var(--jag-blue);

    transform: translate(-50%, -50%) scale(.4);
    opacity: 0;
    pointer-events: none;
}

.bz-theme--jaguar .bz-card:hover::before {
    animation: jag-ripple .9s ease-out;
}

.bz-theme--jaguar .bz-card:hover {
    transform: translateY(-4px);
    border-color: rgba(26, 114, 194, .35);
    box-shadow: 0 22px 44px rgba(14, 58, 102, .14);
}

/* keep content above the ripple (number stays absolutely placed) */
.bz-theme--jaguar .bz-card-icon,
.bz-theme--jaguar .bz-card-name { position: relative; z-index: 1; }
.bz-theme--jaguar .bz-card-num  { z-index: 1; color: #9fb3c8; }

.bz-theme--jaguar .bz-card-name { font-size: 21px; }

.bz-theme--jaguar .bz-card-icon {
    width: 62px;
    height: 62px;
    font-size: 22px;

    background: var(--deep-blue);
    box-shadow: 0 0 0 4px rgba(26, 114, 194, .12);

    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1),
        background .45s ease,
        box-shadow .45s ease;
}

.bz-theme--jaguar .bz-card:hover .bz-card-icon {
    transform: translateY(-4px);              /* a water-drop lift, no spin/tilt */
    background: radial-gradient(circle at 32% 28%, #2b8fe0, #0e3a66);
    box-shadow: 0 10px 24px rgba(26, 114, 194, .34), 0 0 0 5px rgba(26, 114, 194, .16);
}


/* ---- LOCATIONS: white cards; a blue ripple rings out from
        the showroom pin, the card lifts and the pin turns blue ---- */
.bz-theme--jaguar .bz-locations {
    background: #ffffff;
}

.bz-theme--jaguar .bz-loc {
    position: relative;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid var(--jag-line);
    border-radius: 8px;

    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        box-shadow .4s ease,
        border-color .4s ease;
}

.bz-theme--jaguar .bz-loc::before {   /* ripple ring from the pin */
    content: "";
    position: absolute;
    top: 40px;
    left: 42px;
    z-index: 0;

    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid var(--jag-blue);

    transform: translate(-50%, -50%) scale(.4);
    opacity: 0;
    pointer-events: none;
}

.bz-theme--jaguar .bz-loc:hover::before {
    animation: jag-ripple .9s ease-out;
}

.bz-theme--jaguar .bz-loc-pin,
.bz-theme--jaguar .bz-loc > div {
    position: relative;
    z-index: 1;
}

.bz-theme--jaguar .bz-loc:hover {
    transform: translateY(-4px);
    border-color: rgba(26, 114, 194, .3);
    box-shadow: 0 20px 40px rgba(14, 58, 102, .12);
}

.bz-theme--jaguar .bz-loc-pin {
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), color .4s ease;
}

.bz-theme--jaguar .bz-loc:hover .bz-loc-pin {
    transform: translateY(-3px);
    color: var(--jag-blue);
}


/* =====================================================
   ROMINA IMPORTS & DISTRIBUTION — blue-black + red.
   Its own motion: facts slide sideways like a dispatch
   moving out. The brand cluster is the page's centrepiece,
   so Highlights + Gallery are hidden (see config flags).
   Scoped to .bz-theme--imports (set from config).
===================================================== */

.bz-theme--imports {
    --deep-blue:   #0b1522;   /* blue-black — dark surfaces + text on light */
    --deep-blue-2: #142944;
    --red:         #e3262e;   /* Romina red accent */

    --imp-steel:   #9fb0c4;   /* muted steel-blue for text on dark */
    --imp-mist:    #eef2f8;   /* barely-there blue-white */
}

/* HERO — red + blue glow over the blue-black base */
.bz-theme--imports .bz-hero {
    background:
        radial-gradient(ellipse at 85% 20%, rgba(62, 120, 255, .18), transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgba(227, 38, 46, .24), transparent 52%),
        var(--deep-blue);
}

.bz-theme--imports .bz-hero-kicker { color: var(--imp-steel); }

/* hero photo placeholder → blue-black */
.bz-theme--imports .bz-ph {
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .08), transparent 55%),
        linear-gradient(150deg, #142944, #070d16);
}
.bz-theme--imports .bz-ph-note { color: #ff5960; }


/* ---- OVERVIEW: faint blue paper; each fact slides sideways
        on hover (a dispatch moving out) and turns red ---- */
.bz-theme--imports .bz-overview {
    background: #f7f9fc;
}

.bz-theme--imports .bz-facts {
    gap: 20px;
}

.bz-theme--imports .bz-fact {
    border-top: none;
    padding: 22px 20px;
    border-radius: 8px;

    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        background .4s ease,
        box-shadow .4s ease;
}

.bz-theme--imports .bz-fact:hover {
    transform: translateX(8px);              /* slides out to the side */
    background: var(--imp-mist);
    box-shadow: -8px 16px 34px rgba(11, 21, 34, .12);
}

.bz-theme--imports .bz-fact dt { transition: color .4s ease; }
.bz-theme--imports .bz-fact:hover dt { color: var(--red); }


/* ---- OUR BRANDS cluster: blue-black field with a red edge ---- */
.bz-theme--imports .rib-bg {
    background:
        linear-gradient(135deg, rgba(11, 21, 34, .94) 0%, rgba(20, 41, 68, .88) 55%, rgba(7, 13, 22, .97) 100%),
        url("../images/hero/imports-partners.webp") center/cover no-repeat;
}


/* =====================================================
   KOBA — green accent for the shared lower sections.
   The brand's own hero / about / showcase live in the
   bespoke .kb-* partial; this theme only re-tints the
   shared light sections (Gallery label, Locations and
   "Explore our other businesses") from the default red
   to KOBA green. Primary buttons and the "Coming soon"
   status colour stay red (site-wide rules).
   Scoped to .bz-theme--koba (set from config 'theme').
===================================================== */

.bz-theme--koba {
    --accent:       #03402c;   /* KOBA green — the dominant colour */
    --accent-dark:  #022c1d;   /* deeper green — pressed / bars */
    --accent-light: #0a5a3c;   /* lighter green — hover text */
    --accent-soft:  #eef4f1;   /* pale green tint — hover backgrounds */
    --red:          #C9A66B;   /* antique gold — the accent across the KOBA page */
}

/* Primary (solid) button → gold on the green hero */
.bz-theme--koba .story-btn--solid {
    background: var(--red);
    color: #03402c;
    border: 1px solid var(--red);
    font-family: inherit;
    font-style: normal;
}

.bz-theme--koba .story-btn--solid:hover {
    background: #b8914f;
    color: #ffffff;
}

/* Eyebrow labels (Gallery, Locations, Explore) → green */
.bz-theme--koba .bz-label {
    color: var(--accent);
}

/* Gallery accents still on the default red → green */
.bz-theme--koba .bz-gallery-hint i {
    color: var(--accent);
}

.bz-theme--koba .bz-tile-btn:hover .bz-tile-zoom {
    background: var(--accent);
    color: var(--white);
}

.bz-theme--koba .bz-tile-btn:focus-visible {
    outline-color: var(--accent);
}

/* ---- LOCATIONS — coffee-style white cards: a green wash slides in from
        the left on hover, the card lifts and the pin deepens to gold ---- */
.bz-theme--koba .bz-locations {
    background: var(--white);
}

.bz-theme--koba .bz-loc {
    position: relative;
    overflow: hidden;

    background: var(--white);
    border: 1px solid #e6e9ee;
    border-radius: 6px;

    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        box-shadow .4s ease,
        border-color .4s ease;
}

.bz-theme--koba .bz-loc::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: linear-gradient(90deg, rgba(3, 64, 44, .08), transparent 55%);

    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}

.bz-theme--koba .bz-loc:hover::before {
    opacity: 1;
}

.bz-theme--koba .bz-loc-pin,
.bz-theme--koba .bz-loc > div {
    position: relative;
    z-index: 1;
}

.bz-theme--koba .bz-loc:hover {
    transform: translateY(-5px);
    border-color: #d7dbe2;
    box-shadow: 0 22px 44px rgba(3, 64, 44, .14);
}

.bz-theme--koba .bz-loc-pin {
    color: var(--accent);
    transition: color .4s ease;
}

.bz-theme--koba .bz-loc:hover .bz-loc-pin {
    color: var(--red);               /* deepen the pin to gold */
}

.bz-theme--koba .bz-loc h3 {
    transition: color .35s ease;
}

.bz-theme--koba .bz-loc:hover h3 {
    color: var(--accent);
}

/* "Get directions" underline + arrow → green, arrow nudges right on hover */
.bz-theme--koba .bz-loc-link {
    color: var(--accent);
}

.bz-theme--koba .bz-loc-link:hover {
    color: var(--accent-light);
}

.bz-theme--koba .bz-loc-link i {
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.bz-theme--koba .bz-loc:hover .bz-loc-link i {
    transform: translateX(4px);
}

/* Badges: FLAGSHIP (and any non-soon tag) in dark green; COMING SOON stays red */
.bz-theme--koba .bz-tag {
    background: var(--accent-dark);
}

.bz-theme--koba .bz-tag--soon {
    background: #e3262e;
}

/* ---- EXPLORE OUR OTHER BUSINESSES — coffee-style: the card fills with
        KOBA green on hover, text flips white and the gold arrow nudges ---- */
.bz-theme--koba .bz-more-card:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
    transform: translateY(-6px);
}

.bz-theme--koba .bz-more-group {
    color: var(--red);               /* gold label */
}

.bz-theme--koba .bz-more-arrow {
    color: var(--red);               /* gold arrow, stays visible on green */
}

.bz-theme--koba .bz-more-card:hover .bz-more-kicker {
    color: rgba(255, 255, 255, .65);
}

/* ---- Focus-visible across the themed lower sections ---- */
.bz-theme--koba .bz-loc-link:focus-visible,
.bz-theme--koba .bz-more-card:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}


/* =====================================================
   BACIO CREMERIA — its own page design (.bc-*), distinct from KOBA.
   Alternating deep-teal and cream sections, a rectangular framed hero
   photo, a rectangular "What we make" card grid and a centred closing
   statement. Shares the site rules: rectangular cards and the themed
   lower sections (Locations + Explore other businesses). Colours come
   from the Bacio logo — deep teal #003851 (dominant) with lighter /
   darker shades, a raspberry accent (#CB4093) and strawberry-cream
   (#FAC2A3). Primary buttons stay the site red/white. The .bc-* component
   styles live at the end of this block.
   Scoped to .bz-theme--bacio (set from config 'theme').
===================================================== */

.bz-theme--bacio {
    --accent:       #003851;   /* Bacio deep teal — the dominant colour */
    --accent-dark:  #00293b;   /* deeper teal — dark sections / frames */
    --accent-light: #0a4a63;   /* lighter teal — hover text */
    --accent-soft:  #e6eef2;   /* pale teal tint — hover washes */
    --red:          #CB4093;   /* raspberry — the accent across the Bacio page */

    --bc-cream:     #FFF6EE;   /* warm cream — light sections / cards */
    --bc-peach:     #FAC2A3;   /* strawberry cream */
    --bc-gold:      #FDC937;   /* logo gold — small pops */
}

/* Imageless hero / card placeholders → teal gradient (not the default blue) */
.bz-theme--bacio .bz-ph {
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .08), transparent 55%),
        linear-gradient(150deg, #0a4a63, #00293b);
}
.bz-theme--bacio .bz-ph-note { color: #FAC2A3; }

/* Eyebrow / section labels → raspberry accent */
.bz-theme--bacio .bz-label { color: var(--red); }

/* ---- GALLERY accents (shared section; hidden for Bacio but kept in step) ---- */
.bz-theme--bacio .bz-gallery-hint i { color: var(--red); }
.bz-theme--bacio .bz-tile-btn:hover .bz-tile-zoom { background: var(--accent); color: var(--white); }
.bz-theme--bacio .bz-tile-btn:focus-visible { outline-color: var(--accent); }

/* ---- LOCATIONS — coffee-style white cards: a teal wash slides in from
        the left on hover, the card lifts and the pin deepens to raspberry ---- */
.bz-theme--bacio .bz-locations { background: var(--white); }

.bz-theme--bacio .bz-loc {
    position: relative;
    overflow: hidden;

    background: var(--white);
    border: 1px solid #e6e9ee;
    border-radius: 6px;

    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        box-shadow .4s ease,
        border-color .4s ease;
}

.bz-theme--bacio .bz-loc::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: linear-gradient(90deg, rgba(0, 56, 81, .08), transparent 55%);

    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}

.bz-theme--bacio .bz-loc:hover::before { opacity: 1; }

.bz-theme--bacio .bz-loc-pin,
.bz-theme--bacio .bz-loc > div {
    position: relative;
    z-index: 1;
}

.bz-theme--bacio .bz-loc:hover {
    transform: translateY(-5px);
    border-color: #d7dbe2;
    box-shadow: 0 22px 44px rgba(0, 56, 81, .14);
}

.bz-theme--bacio .bz-loc-pin {
    color: var(--accent);
    transition: color .4s ease;
}

.bz-theme--bacio .bz-loc:hover .bz-loc-pin { color: var(--red); }

.bz-theme--bacio .bz-loc h3 { transition: color .35s ease; }
.bz-theme--bacio .bz-loc:hover h3 { color: var(--accent); }

.bz-theme--bacio .bz-loc-link { color: var(--accent); }
.bz-theme--bacio .bz-loc-link:hover { color: var(--accent-light); }
.bz-theme--bacio .bz-loc-link i { transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.bz-theme--bacio .bz-loc:hover .bz-loc-link i { transform: translateX(4px); }

/* Badges: non-soon tag in deep teal; COMING SOON stays red */
.bz-theme--bacio .bz-tag { background: var(--accent-dark); }
.bz-theme--bacio .bz-tag--soon { background: #e3262e; }

/* ---- EXPLORE OUR OTHER BUSINESSES — coffee-style: the card fills with
        Bacio teal on hover, text flips white and the raspberry arrow nudges ---- */
.bz-theme--bacio .bz-more-card:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
    transform: translateY(-6px);
}

.bz-theme--bacio .bz-more-group { color: var(--red); }
.bz-theme--bacio .bz-more-arrow { color: var(--red); }
.bz-theme--bacio .bz-more-card:hover .bz-more-kicker { color: rgba(255, 255, 255, .65); }

.bz-theme--bacio .bz-loc-link:focus-visible,
.bz-theme--bacio .bz-more-card:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* =====================================================
   BACIO — its own page components (.bc-*)
===================================================== */

.bc-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: var(--red);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.bc-label::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
}

.bc-section-h2 {
    margin: 18px 0 0;

    font-size: clamp(32px, 3.8vw, 54px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -1.5px;
}

.bc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* secondary / ghost button on the teal sections */
.bz-theme--bacio .bc-btn-ghost {
    border: 1px solid rgba(255, 255, 255, .5);
    color: #ffffff;
    border-radius: 6px;
    font-family: inherit;
    font-style: normal;
}

.bz-theme--bacio .bc-btn-ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #ffffff;
    color: #ffffff;
}

/* ---------- HERO (deep teal) ---------- */
.bc-hero {
    position: relative;
    overflow: hidden;

    padding: 170px 0 110px;

    background:
        radial-gradient(ellipse at 88% 12%, rgba(203, 64, 147, .16), transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgba(0, 117, 167, .20), transparent 52%),
        var(--accent);

    color: #ffffff;
}

.bc-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 72px;
    align-items: center;
}

.bc-crumbs { color: rgba(255, 255, 255, .6); }
.bc-crumbs a:hover,
.bc-crumbs span { color: #ffffff; }

.bc-eyebrow {
    display: inline-block;
    max-width: 460px;
    margin-bottom: 22px;

    color: var(--bc-peach);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.5;
}

.bc-hero-title {
    margin: 0;

    color: #ffffff;

    font-size: clamp(54px, 7vw, 104px);
    font-weight: 800;
    line-height: .92;
    letter-spacing: -2.5px;
}

.bc-hero-title em {
    display: block;
    font-style: normal;
    font-weight: 300;
    color: var(--bc-peach);
}

.bc-hero-intro {
    max-width: 520px;
    margin: 26px 0 34px;

    color: rgba(255, 255, 255, .78);

    font-size: 17px;
    line-height: 1.7;
}

.bc-hero-chips {
    display: flex;
    gap: 10px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.bc-hero-chips li {
    width: 26px;
    height: 26px;
    border-radius: 4px;
}

.bc-hero-chips li:nth-child(1) { background: var(--bc-peach); }
.bc-hero-chips li:nth-child(2) { background: var(--red); }
.bc-hero-chips li:nth-child(3) { background: var(--bc-gold); }
.bc-hero-chips li:nth-child(4) { background: #0075A7; }
.bc-hero-chips li:nth-child(5) { background: var(--bc-cream); }

/* rectangular framed hero photo with an offset raspberry outline */
.bc-hero-media {
    position: relative;
    padding: 0 22px 22px 0;
}

.bc-frame {
    position: relative;
    z-index: 1;

    aspect-ratio: 4 / 5;
    overflow: hidden;

    border-radius: 6px;
    background: var(--accent-dark);
    box-shadow: 0 40px 80px rgba(0, 0, 0, .4);
}

.bc-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.bc-hero-media::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 22px;
    right: 0;
    bottom: 0;

    border: 2px solid var(--red);
    border-radius: 6px;
}

/* ---------- ABOUT (cream) ---------- */
.bc-about {
    padding: var(--section-space) 0;
    background: var(--bc-cream);
    color: #1c2b2b;
}

.bc-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: start;
}

.bc-about-head h2 { color: #003851; }

.bc-about-body p {
    margin: 0 0 20px;

    color: #3a4a4a;

    font-size: 16.5px;
    line-height: 1.8;
}

.bc-about-body p:first-child {
    color: #15302b;
    font-size: 18px;
}

/* ---------- FRESH FROM ROMINA DAIRY FARM (teal band) ---------- */
.bc-dairy {
    padding: var(--section-space) 0;

    background:
        radial-gradient(ellipse at 90% 0%, rgba(0, 117, 167, .18), transparent 55%),
        var(--accent-dark);

    color: #ffffff;
}

.bc-dairy-grid {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.bc-dairy-icon {
    width: 96px;
    height: 96px;

    display: grid;
    place-items: center;

    border-radius: 8px;
    background: var(--red);
    color: #ffffff;

    font-size: 36px;
}

.bc-dairy-text {
    max-width: 860px;
    margin: 16px 0 0;

    color: rgba(255, 255, 255, .82);

    font-size: clamp(18px, 1.9vw, 23px);
    line-height: 1.65;
}

/* ---------- WHAT WE MAKE (rectangular card grid) ---------- */
.bc-make {
    padding: var(--section-space) 0;
    background: var(--white);
    color: #1c2b2b;
}

.bc-make-head {
    max-width: 760px;
    margin-bottom: 52px;
}

.bc-make-head h2 { color: #003851; }

.bc-make-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.bc-make-card {
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    gap: 16px;

    min-height: 260px;
    padding: 32px 28px;

    background: #ffffff;
    border: 1px solid #e6e9ee;
    border-radius: 6px;

    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1),
        box-shadow .5s ease,
        border-color .35s ease;
}

.bc-make-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 24px 48px rgba(0, 56, 81, .14);
}

.bc-make-num {
    position: absolute;
    top: 26px;
    right: 24px;

    color: #c3cdd2;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.bc-make-icon {
    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    border-radius: 6px;
    background: var(--accent);
    color: #ffffff;

    font-size: 24px;

    transition:
        transform .5s cubic-bezier(.34, 1.56, .64, 1),
        background .4s ease;
}

.bc-make-card:hover .bc-make-icon {
    transform: rotate(-6deg) scale(1.06);
    background: var(--red);
}

.bc-make-card h3 {
    margin: 0;

    color: #003851;

    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}

.bc-make-card p {
    margin: 0;

    color: #556565;

    font-size: 14.5px;
    line-height: 1.6;
}

/* ---------- THE BACIO MOMENT (teal, centred close) ---------- */
.bc-moment {
    padding: var(--section-space) 0;

    background:
        radial-gradient(ellipse at 50% 120%, rgba(203, 64, 147, .18), transparent 60%),
        var(--accent);

    color: #ffffff;
    text-align: center;
}

.bc-moment-inner {
    max-width: 820px;
    margin: 0 auto;
}

.bc-moment .bc-label { justify-content: center; }

.bc-moment-lead {
    margin: 22px 0 0;

    font-size: clamp(24px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -1px;
}

.bc-moment-cta {
    margin: 22px auto 34px;
    max-width: 640px;

    color: rgba(255, 255, 255, .78);

    font-size: 17px;
    line-height: 1.7;
}

.bc-moment .bc-actions { justify-content: center; }

/* ---------- IMAGE GRID (cream) ---------- */
.bc-gallery {
    padding: var(--section-space) 0;
    background: var(--bc-cream);
    color: #1c2b2b;
}

.bc-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* uniform rectangular grid (3 × 2) */
    gap: 16px;
}

.bc-tile {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: 8px;

    cursor: pointer;
}

/* the coloured "photo" area (placeholder until client photos) */
.bc-tile-art {
    position: absolute;
    inset: 0;
    z-index: 0;

    display: grid;
    place-items: center;

    font-size: clamp(42px, 5vw, 64px);

    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.bc-tile:hover .bc-tile-art { transform: scale(1.08); }

/* base gradient for caption legibility */
.bc-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(to top, rgba(0, 20, 28, .55), transparent 55%);
    opacity: .9;
    pointer-events: none;
    transition: opacity .5s ease;
}

.bc-tile:hover::after { opacity: 1; }

.bc-tile-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;

    display: flex;
    flex-direction: column;
    gap: 4px;

    padding: 20px;
}

.bc-tile-cap span {
    color: #ffffff;

    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.2px;

    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.bc-tile-cap em {
    color: rgba(255, 255, 255, .72);

    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

.bc-tile:hover .bc-tile-cap span { transform: translateY(-4px); }
.bc-tile:hover .bc-tile-cap em   { opacity: 1; transform: translateY(0); }

/* tones — icon colour + gradient per the logo palette */
.bc-tile--teal  .bc-tile-art { background: linear-gradient(150deg, #0a4a63, #00293b); color: rgba(255, 255, 255, .85); }
.bc-tile--rasp  .bc-tile-art { background: linear-gradient(150deg, #d7579f, #a8296f); color: rgba(255, 255, 255, .9); }
.bc-tile--blue  .bc-tile-art { background: linear-gradient(150deg, #1f8fc0, #0075A7); color: rgba(255, 255, 255, .9); }
.bc-tile--gold  .bc-tile-art { background: linear-gradient(150deg, #ffd65a, #FDC937); color: #5a4500; }
.bc-tile--peach .bc-tile-art { background: linear-gradient(150deg, #ffd3bb, #FAC2A3); color: #7a3e24; }
.bc-tile--cream .bc-tile-art { background: linear-gradient(150deg, #fffaf4, #FFF6EE); color: #b88a63; }

/* lighter tiles: soften the base gradient so the caption still reads */
.bc-tile--gold::after,
.bc-tile--peach::after,
.bc-tile--cream::after { background: linear-gradient(to top, rgba(0, 20, 28, .42), transparent 55%); }


/* ---------- Scroll reveal + motion ---------- */
/* Includes box-shadow / border-color so cards that are also .bc-reveal keep
   animating their hover state (this shorthand otherwise overrides theirs).
   The per-item stagger is applied in JS so hover feedback stays instant. */
.bc-reveal {
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.22, 1, .36, 1),
        box-shadow .5s ease,
        border-color .35s ease;
}

.bc-reveal.is-armed {
    opacity: 0;
    transform: translateY(22px);
}

.bc-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* hero colour chips — gentle looping float */
.bc-hero-chips li {
    animation: bc-float 3.2s ease-in-out infinite;
    animation-delay: calc(var(--n, 0) * .18s);
}
.bc-hero-chips li:nth-child(1) { --n: 0; }
.bc-hero-chips li:nth-child(2) { --n: 1; }
.bc-hero-chips li:nth-child(3) { --n: 2; }
.bc-hero-chips li:nth-child(4) { --n: 3; }
.bc-hero-chips li:nth-child(5) { --n: 4; }

@keyframes bc-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* ---- hero copy: staggered entrance on load ---- */
.bc-hero-copy > * {
    animation: bc-rise .75s cubic-bezier(.22, 1, .36, 1) backwards;
}
.bc-hero-copy > .bc-crumbs { animation-delay: .05s; }
.bc-hero-copy > .bc-eyebrow { animation-delay: .14s; }
.bc-hero-copy > .bc-hero-title { animation-delay: .24s; }
.bc-hero-copy > .bc-hero-intro { animation-delay: .38s; }
.bc-hero-copy > .bc-actions { animation-delay: .5s; }
.bc-hero-copy > .bc-hero-chips { animation-delay: .62s; }

@keyframes bc-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

/* ---- heading word reveal (.bc-words) ----
   The heading box stays in place; its words rise in on scroll, staggered
   by --wi. Words only hide once JS has armed them, so with no JS / reduced
   motion the heading is simply visible. */
.bc-words.is-armed {
    opacity: 1;
    transform: none;
}

.bc-words .bc-w {
    display: inline-block;
    transition:
        opacity .5s ease,
        transform .6s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--wi, 0) * 45ms);
}

.bc-words.is-armed .bc-w {
    opacity: 0;
    transform: translateY(16px) rotate(1.5deg);
}

.bc-words.is-in .bc-w {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .bc-reveal { transition: none; }
    .bc-reveal.is-armed { opacity: 1; transform: none; }
    .bc-hero-copy > * { animation: none; }
    .bc-hero-chips li { animation: none; }
    .bc-words.is-armed .bc-w { opacity: 1; transform: none; }
    .bc-words .bc-w { transition: none; }
    .bc-tile-art,
    .bc-tile-cap span,
    .bc-tile-cap em { transition: none; }
}


/* ---------- Bacio responsive ---------- */
@media (max-width: 1000px) {

    .bc-hero {
        padding: 150px 0 90px;
    }

    .bc-hero-inner,
    .bc-about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .bc-hero-media {
        max-width: 460px;
    }

    .bc-dairy-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

@media (max-width: 900px) {

    .bc-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {

    .bc-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .bc-dairy-grid {
        grid-template-columns: 1fr;
    }
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 1000px) {

    .bz-hero {
        padding: 150px 0 90px;
    }

    .bz-hero-grid,
    .bz-overview-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .bz-hero-media {
        max-width: 460px;
        margin-left: 34px;
    }

    .bz-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bz-journey {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-left: 36px;
    }

    .bz-journey::before {
        top: 0;
        bottom: 0;
        left: 7px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, var(--red), rgba(255, 255, 255, .25));
    }

    .bz-journey-dot {
        position: absolute;
        left: -36px;
        top: 2px;
    }

    .bz-journey-num {
        margin-top: 0;
    }

}

@media (max-width: 640px) {

    .bz-hero-index {
        display: none;
    }

    .bz-hero-copy h1 {
        letter-spacing: -1.5px;
    }

    .bz-hero-badge {
        left: -20px;
        bottom: 40px;
        min-width: 0;
    }

    .bz-facts {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .bz-stats-grid {
        grid-template-columns: 1fr;
    }

    .bz-cta-inner {
        align-items: flex-start;
    }

}

@media (prefers-reduced-motion: reduce) {

    .bz-hero-frame img {
        animation: none;
        transform: none;
    }

    .bz-card,
    .bz-card::after,
    .bz-more-card,
    .bz-more-arrow {
        transition: none;
    }

}


/* =====================================================
   Careers page
===================================================== */

/* ----- Hero ----- */

.car-hero {
    background: #E8132C;
    padding-top: calc(100px + clamp(60px, 9vw, 120px));
    padding-bottom: clamp(60px, 9vw, 120px);
}

.car-hero-inner { max-width: 820px; }

.car-hero .mark  { margin-bottom: 20px; }
.car-hero .t-h2  { margin-bottom: 24px; }

.car-hero-lead {
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.7;
    color: rgba(255,255,255,.85);
    max-width: 52ch;
    margin: 0;
}

/* ----- Why Join ----- */

.car-why {
    padding-block: var(--section-space);
    background: var(--light);
}

.car-why .t-h2 { margin-bottom: 48px; max-width: none; }

.car-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 40px;
}

.car-why-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.car-why-num {
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    color: #E8132C;
    margin-bottom: 4px;
}

.car-why-item h3 {
    font-size: 17px;
    font-weight: 700;
    color: #0E2240;
    margin: 0;
}

.car-why-item p {
    font-size: 14px;
    color: #667085;
    line-height: 1.6;
    margin: 0;
}

/* ----- Positions ----- */

.car-positions { padding-block: var(--section-space); }

.car-positions .t-h2 { margin-bottom: 0; }

/* Filter chips */
.car-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 28px 36px;
}

.car-chip {
    height: 36px;
    padding: 0 18px;
    border: 1.5px solid rgba(14,34,64,.22);
    background: transparent;
    color: #0E2240;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background .22s, border-color .22s, color .22s;
}

.car-chip:hover  { border-color: #0E2240; }

.car-chip.active {
    background: #0E2240;
    border-color: #0E2240;
    color: #fff;
}

/* Position cards grid */
.car-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2px;
}

.car-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    background: #fff;
    border: 1px solid rgba(14,34,64,.1);
    text-decoration: none;
    color: inherit;
    transition: border-color .25s, background .25s, box-shadow .25s;
}

.car-card:hover {
    border-color: #0E2240;
    box-shadow: 0 4px 16px rgba(14,34,64,.08);
}

.car-card-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.car-card-info h3 {
    font-size: 17px;
    font-weight: 700;
    color: #0E2240;
    margin: 0;
}

.car-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    font-size: 13px;
    color: #667085;
}

.car-card-meta span + span::before {
    content: "\00B7";
    margin-right: 6px;
}

.car-deadline {
    font-size: 13px;
    color: #E8132C;
    margin: 0;
}

.car-card-summary {
    font-size: 13px;
    color: #667085;
    line-height: 1.55;
    margin: 4px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.car-card-cta {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: #0E2240;
    transition: gap .25s;
}

.car-card:hover .car-card-cta { gap: 12px; }

/* Empty state */
.car-empty {
    padding: 60px 40px;
    text-align: center;
    border: 1.5px dashed rgba(14,34,64,.18);
}

.car-empty p {
    font-size: 17px;
    color: #667085;
    margin-bottom: 10px;
}

.car-empty a {
    color: #E8132C;
    font-weight: 500;
    text-decoration: underline;
}

/* ----- Apply section ----- */

.car-apply-section {
    padding-block: var(--section-space);
    background: var(--light);
}

.car-apply-cols {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(40px, 6vw, 88px);
    align-items: start;
}

.car-apply-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 120px;
}

.car-apply-info .t-h2 { margin-bottom: 0; }

.car-apply-sub {
    font-size: 16px;
    color: #667085;
    line-height: 1.6;
    margin: 0;
}

.car-apply-hints {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid rgba(14,34,64,.12);
}

.car-apply-hints p {
    font-size: 13px;
    color: #667085;
    margin: 0;
    line-height: 1.5;
}

.car-apply-hints a {
    color: #0E2240;
    text-decoration: underline;
}

.car-apply-cols > div > .car-form { margin-top: 0; }

/* ----- Careers form ----- */

.car-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 36px;
}

.car-form label {
    font-size: 13px;
    font-weight: 500;
    color: #565656;
}

.car-form select.field {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 28px;
    cursor: pointer;
}

.car-err {
    font-size: 12px;
    color: #E8132C;
    margin-top: 2px;
    display: block;
}

.car-pos-label {
    font-size: 15px;
    color: #0E2240;
    padding: 12px 16px;
    background: rgba(14,34,64,.05);
    border-left: 3px solid #E8132C;
    margin: 0;
    line-height: 1.5;
}

.car-success {
    border-color: #0E2240 !important;
    background: rgba(14,34,64,.04);
    display: block !important;
}

/* ----- CV drop zone ----- */

.cv-drop {
    position: relative;
    border: 1.5px dashed rgba(14,34,64,.28);
    padding: 36px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color .28s, background .28s;
    user-select: none;
    background: #fff;
}

.cv-drop:hover,
.cv-drop.cv-over {
    border-color: #E8132C;
    background: rgba(232,19,44,.03);
}

.cv-drop.cv-has-file {
    border-color: #0E2240;
    border-style: solid;
}

.cv-icon {
    display: block;
    margin: 0 auto 12px;
    color: #667085;
    pointer-events: none;
}

.cv-drop.cv-has-file .cv-icon { color: #0E2240; }

.cv-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    font-size: 0;
}

.cv-prompt {
    display: block;
    font-size: 15px;
    color: #0E2240;
    margin-bottom: 6px;
    pointer-events: none;
}

.cv-browse {
    color: #E8132C;
    text-decoration: underline;
}

.cv-hint {
    display: block;
    font-size: 12px;
    color: #999;
    pointer-events: none;
}

.cv-info {
    font-size: 13px;
    margin-top: 8px;
    min-height: 18px;
}

.cv-info.cv-ok  { color: #0E2240; font-weight: 500; }
.cv-info.cv-err { color: #E8132C; }

/* ----- Position detail page ----- */

.car-back-nav { margin-bottom: 36px; }

.car-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #667085;
    text-decoration: none;
    transition: color .22s, gap .22s;
}

.car-back:hover { color: #0E2240; gap: 12px; }

.car-detail { padding-block: var(--section-space); }

.car-detail-inner {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 64px;
    align-items: start;
}

.car-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.car-tag {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(14,34,64,.07);
    color: #0E2240;
}

.car-tag--deadline {
    background: rgba(232,19,44,.08);
    color: #E8132C;
}

.car-detail-desc h2 {
    font-size: 18px;
    font-weight: 700;
    color: #0E2240;
    margin: 0 0 14px;
}

.car-detail-desc p {
    font-size: 16px;
    line-height: 1.72;
    color: #333;
    margin: 0 0 32px;
}

.car-req-list {
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.car-req-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 15px;
    line-height: 1.55;
    color: #333;
}

.car-req-list li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #E8132C;
    margin-top: 1px;
}

.car-apply-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #E8132C;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: gap .25s;
}

.car-apply-link:hover { gap: 12px; }

/* Sidebar */
.car-detail-sidebar {
    position: sticky;
    top: 120px;
    background: var(--light);
    padding: 28px;
}

.car-detail-sidebar h3 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #667085;
    margin: 0 0 4px;
}

.car-sidebar-fact {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid rgba(14,34,64,.1);
    font-size: 14px;
}

.car-sidebar-fact span:first-child { color: #667085; }
.car-sidebar-fact span:last-child  { font-weight: 600; color: #0E2240; text-align: right; }

/* ----- Home page: openings list ----- */

.careers-openings {
    list-style: none;
    padding: 0;
    margin: 0;
}

.careers-openings li a {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    align-items: center;
    gap: 12px 16px;
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,.18);
    text-decoration: none;
    color: #fff;
    transition: padding-left .22s cubic-bezier(.16,1,.3,1);
}

.careers-openings li:last-child a { border-bottom: 1px solid rgba(255,255,255,.18); }
.careers-openings li a:hover      { padding-left: 6px; }

.co-title {
    font-size: 15px;
    font-weight: 600;
}

.co-meta {
    font-size: 13px;
    color: rgba(255,255,255,.66);
}

.co-arrow {
    flex: none;
    opacity: .7;
    transition: opacity .22s;
}

.careers-openings li a:hover .co-arrow { opacity: 1; }

.careers-general-link {
    color: #fff;
    text-decoration: underline;
    font-style: normal;
}

/* ----- Responsive ----- */

@media (max-width: 1100px) {
    .car-why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .car-grid           { grid-template-columns: 1fr; }
    .car-detail-inner   { grid-template-columns: 1fr; gap: 40px; }
    .car-detail-sidebar { position: static; }
    .car-apply-cols     { grid-template-columns: 1fr; }
    .car-apply-info     { position: static; }
}

@media (max-width: 640px) {
    .careers-openings li a { grid-template-columns: 1fr auto; }
    .co-meta { display: none; }
}

@media (max-width: 480px) {
    .car-why-grid { grid-template-columns: 1fr; }
}




/* =====================================================
   Coffee legacy video
===================================================== */

/* Video fills container exactly as old <img> did */
.cof-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 60%;
    display: block;
}

/* Overlay + text fade transitions */
.cof-beans-img::after { transition: opacity .65s; }
.cof-beans-copy       { transition: opacity .55s; }
.cof-beans.is-playing .cof-beans-img::after { opacity: .22; }
.cof-beans.is-playing .cof-beans-copy       { opacity: 0; pointer-events: none; }

/* Extra bottom room for text above control bar */
.cof-beans.has-player .cof-beans-copy {
    padding-bottom: calc(clamp(64px, 9vw, 120px) + 96px);
}

/* ---- Player UI layer (pointer-events: none so clicks reach .cof-beans) ---- */
.cof-player-ui {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* ---- Center play / pause / replay button ---- */
.cof-center-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.85);
    background: rgba(0,0,0,.22);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform .2s, background .2s, border-color .2s, opacity .45s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0;
}
.cof-center-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: #C0272D;
    border-color: #C0272D;
}
.cof-center-btn:focus-visible {
    outline: 3px solid rgba(255,255,255,.9);
    outline-offset: 4px;
}

/* Pulse ring — hidden when playing or reduced-motion */
.cof-center-btn::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35);
    animation: cofPulse 2.2s ease-out infinite;
    pointer-events: none;
}
.cof-beans.is-playing .cof-center-btn::before,
.cof-beans.no-pulse   .cof-center-btn::before { animation: none; opacity: 0; }

@keyframes cofPulse {
    0%   { transform: scale(1);   opacity: .65; }
    100% { transform: scale(1.55); opacity: 0;  }
}

/* Fade center button out while playing; reappear on hover / controls-visible */
.cof-beans.is-playing .cof-center-btn {
    opacity: 0;
    pointer-events: none;
}
.cof-beans.is-playing:hover .cof-center-btn,
.cof-beans.controls-visible .cof-center-btn {
    opacity: 1;
    pointer-events: auto;
}

/* ---- Bottom control bar ---- */
.cof-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: auto;
    opacity: 0;
    transition: opacity .3s;
}
/* Dark gradient behind controls */
.cof-controls::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    top: -100px;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
    pointer-events: none;
}
/* Show when paused or interacting while playing */
.cof-beans:not(.is-playing) .cof-controls,
.cof-beans.controls-visible .cof-controls { opacity: 1; }

.cof-ctrl-inner {
    position: relative;
    padding: 0 clamp(20px, 4.4vw, 64px) 20px;
}

/* ---- Seek timeline ---- */
.cof-seek-wrap {
    position: relative;
    padding: 10px 0 6px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.cof-seek-track {
    position: relative;
    height: 3px;
    background: rgba(255,255,255,.3);
    border-radius: 2px;
    transition: height .15s;
    overflow: visible;
}
.cof-seek-wrap:hover .cof-seek-track { height: 5px; }

.cof-seek-buffered {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: rgba(255,255,255,.5);
    border-radius: 2px;
    width: 0;
    pointer-events: none;
}
.cof-seek-played {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: #C0272D;
    border-radius: 2px;
    width: 0;
    overflow: visible;
    pointer-events: none;
}
.cof-seek-handle {
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #C0272D;
    transition: transform .15s;
    box-shadow: 0 0 0 3px rgba(192,39,45,.35);
}
.cof-seek-wrap:hover .cof-seek-handle { transform: translateY(-50%) scale(1); }

.cof-seek-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    transform: translateX(-50%);
    background: rgba(0,0,0,.78);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}

/* ---- Button row ---- */
.cof-ctrl-row {
    display: flex;
    align-items: center;
}
.cof-ctrl-left  { display: flex; align-items: center; flex: 1 1 auto; }
.cof-ctrl-right { display: flex; align-items: center; flex: 0 0 auto; }

.cof-ctrl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 6px;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    transition: background .15s;
    flex-shrink: 0;
}
.cof-ctrl-btn:hover      { background: rgba(255,255,255,.14); }
.cof-ctrl-btn:focus-visible { outline: 2px solid rgba(255,255,255,.8); outline-offset: 1px; }

.cof-time {
    color: rgba(255,255,255,.9);
    font-size: 12px;
    white-space: nowrap;
    padding: 0 8px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    flex-shrink: 0;
}

/* Speed */
.cof-speed-wrap { position: relative; }
.cof-speed-btn  {
    font-size: 12px;
    font-weight: 600;
    min-width: 38px;
    letter-spacing: .03em;
}
.cof-speed-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: rgba(10,14,20,.94);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    padding: 4px 0;
    min-width: 76px;
    z-index: 10;
}
.cof-speed-menu.is-open { display: block; }
.cof-speed-menu button {
    display: block;
    width: 100%;
    padding: 7px 12px;
    text-align: center;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.8);
    cursor: pointer;
    font-size: 12px;
    transition: background .1s, color .1s;
}
.cof-speed-menu button:hover  { background: rgba(255,255,255,.1); color: #fff; }
.cof-speed-menu button.active { color: #C0272D; font-weight: 700; }
.cof-speed-menu button:focus-visible { outline: 2px solid rgba(255,255,255,.45); outline-offset: -2px; }

/* Volume */
.cof-vol-wrap {
    overflow: hidden;
    max-width: 0;
    transition: max-width .2s;
    display: flex;
    align-items: center;
}
.cof-ctrl-right:hover .cof-vol-wrap,
.cof-ctrl-right:focus-within .cof-vol-wrap { max-width: 80px; }

.cof-vol-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 72px;
    height: 3px;
    background: rgba(255,255,255,.4);
    border-radius: 2px;
    cursor: pointer;
    accent-color: #C0272D;
    outline: none;
    flex-shrink: 0;
}
.cof-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #C0272D;
    cursor: pointer;
    border: none;
}
.cof-vol-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #C0272D;
    cursor: pointer;
    border: none;
}
.cof-vol-slider:focus-visible { outline: 2px solid rgba(255,255,255,.7); }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .cof-center-btn         { width: 64px; height: 64px; }
    .cof-center-btn::before { inset: -8px; }
    .cof-ctrl-inner         { padding: 0 16px 14px; }
    .cof-vol-wrap           { display: none !important; }
    .cof-time               { font-size: 11px; padding: 0 4px; }
    .cof-ctrl-btn           { min-width: 44px; height: 44px; }
}
@media (max-width: 480px) {
    .cof-speed-btn { display: none; }
}


/* =====================================================
   AMHARIC TYPOGRAPHY  (.lang-am on <html>)
===================================================== */

.lang-am body,
.lang-am input,
.lang-am textarea,
.lang-am select,
.lang-am button {
    font-family: 'Noto Sans Ethiopic', 'Roboto', sans-serif;
    line-height: 1.75;
}

/* Remove uppercase/tight tracking where Ethiopic script renders poorly */
.lang-am .menu-label,
.lang-am .about-mark,
.lang-am .talk-button,
.lang-am .story-btn,
.lang-am .story-kicker,
.lang-am .ftr-copy,
.lang-am .column-title {
    text-transform: none;
    letter-spacing: 0;
}

/* Slightly looser line-height for headings */
.lang-am h1,
.lang-am h2,
.lang-am h3,
.lang-am h4 {
    line-height: 1.4;
    letter-spacing: 0;
}


/* =====================================================
   NEWS — listing + article pages
===================================================== */

/* ----- Shared meta (category + date) ----- */
.news-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    margin-bottom: 12px;
}

.news-cat {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: #E8132C;
}

.news-date {
    color: #667085;
    position: relative;
    padding-left: 12px;
}

.news-date::before {
    content: "\00B7";
    position: absolute;
    left: 0;
    color: #98a2b3;
}

/* ----- Featured story ----- */
.news-featured-section {
    padding-block: var(--section-space);
}

.news-featured-section .mark { margin-bottom: 28px; }

.news-featured {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
    gap: 0;
    border: 1px solid rgba(14,34,64,.1);
    border-radius: var(--rc-radius, 16px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: #fff;
    transition: box-shadow .3s var(--rc-ease, ease), border-color .3s;
}

.news-featured:hover {
    border-color: #0E2240;
    box-shadow: 0 10px 40px rgba(7,27,58,.12);
}

.news-featured-media {
    position: relative;
    overflow: hidden;
    min-height: 340px;
}

.news-featured-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--rc-ease, ease);
}

.news-featured:hover .news-featured-media img { transform: scale(1.05); }

.news-featured-body {
    padding: clamp(28px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-featured-body h2 {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    color: #0E2240;
    line-height: 1.18;
    margin: 0 0 14px;
}

.news-featured-body p {
    font-size: 16px;
    line-height: 1.6;
    color: #667085;
    margin: 0 0 24px;
}

.news-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #0E2240;
    transition: gap .25s;
}

.news-featured:hover .news-readmore { gap: 13px; }

/* ----- Story grid ----- */
.news-list-section {
    padding-block: var(--section-space);
    background: var(--light);
}

.news-list-heading {
    margin-bottom: 40px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
}

.news-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(14,34,64,.1);
    border-radius: var(--rc-radius, 16px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .3s var(--rc-ease, ease), box-shadow .3s, border-color .3s;
}

.news-card:hover {
    transform: translateY(-4px);
    border-color: #0E2240;
    box-shadow: 0 12px 34px rgba(7,27,58,.12);
}

.news-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.news-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--rc-ease, ease);
}

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

.news-card-body {
    padding: 24px 26px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-card-body h3 {
    font-size: 19px;
    font-weight: 700;
    color: #0E2240;
    line-height: 1.3;
    margin: 0 0 10px;
}

.news-card-body p {
    font-size: 14px;
    line-height: 1.6;
    color: #667085;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-empty {
    padding: 60px 40px;
    text-align: center;
    border: 1.5px dashed rgba(14,34,64,.18);
    border-radius: var(--rc-radius, 16px);
}

.news-empty p {
    font-size: 17px;
    color: #667085;
    margin: 0;
}

/* ----- Article detail ----- */
.news-article-date {
    font-size: 14px;
    letter-spacing: .04em;
    opacity: .85;
    margin-top: 6px;
}

.news-article-section {
    padding-block: var(--section-space);
}

.news-article-body {
    max-width: 720px;
    margin: 0 auto;
}

.news-article-body p {
    font-size: 18px;
    line-height: 1.75;
    color: #344054;
    margin: 0 0 24px;
}

.news-article-body p:last-child { margin-bottom: 0; }

.news-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 720px;
    margin: 44px auto 0;
    font-size: 14px;
    font-weight: 600;
    color: #0E2240;
    text-decoration: none;
    transition: gap .25s, color .25s;
}

.news-back:hover { gap: 13px; color: #E8132C; }

.news-related-section { border-top: 1px solid rgba(14,34,64,.08); }

/* ----- Category filter (sticks under the fixed header) ----- */
.news-filter {
    position: sticky;
    top: 100px;
    z-index: 50;
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(14,34,64,.08);
}

.news-filter-list {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 18px 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.news-filter-list::-webkit-scrollbar { display: none; }

.news-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border: 1px solid rgba(14,34,64,.14);
    border-radius: 999px;
    background: #fff;
    color: #0E2240;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background .25s, color .25s, border-color .25s;
}

.news-filter-tab i {
    font-size: 13px;
    color: #E8132C;
    transition: color .25s;
}

.news-filter-tab:hover {
    border-color: #0E2240;
    color: #0E2240;
}

.news-filter-tab.is-active {
    background: #E8132C;
    border-color: #E8132C;
    color: #fff;
}

.news-filter-tab.is-active i { color: #fff; }

.news-filter-tab:focus-visible {
    outline: 2px solid #0E2240;
    outline-offset: 2px;
}

.news-filter-count {
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(14,34,64,.07);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.news-filter-tab.is-active .news-filter-count {
    background: rgba(255,255,255,.22);
}

.news-list-note {
    margin: 36px 0 0;
    color: #667085;
    font-size: 15px;
}

.news-list-note a,
.news-empty a {
    color: #E8132C;
    font-weight: 600;
    text-decoration: none;
}

.news-list-note a:hover,
.news-empty a:hover { text-decoration: underline; }

/* Anchor clicks / filter jumps land below the sticky bar */
.news-featured-section,
.news-list-section { scroll-margin-top: 170px; }

/* ----- Responsive ----- */
@media (max-width: 820px) {
    .news-featured {
        grid-template-columns: 1fr;
    }
    .news-featured-media { min-height: 240px; }
}

@media (max-width: 520px) {
    .news-grid { grid-template-columns: 1fr; }
    .news-article-body p { font-size: 16px; }
}


/* =====================================================
   Romina Imports brands
===================================================== */

.rib-brands {
    position: relative;
    overflow: hidden;                 /* no horizontal page overflow */
    color: #fff;
    padding-block: clamp(4rem, 8vw, 8rem);
    background: var(--deep-blue);
    isolation: isolate;
}

/* navy background + subtle gradient + faint photo texture */
.rib-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(135deg, rgba(7,27,58,.92) 0%, rgba(11,40,82,.86) 55%, rgba(7,27,58,.96) 100%),
        url("../images/hero/imports-partners.webp") center/cover no-repeat;
}

.rib-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

/* ---- left column ---- */
.rib-copy { max-width: 560px; }


.rib-heading {
    font-weight: 300;
    font-size: clamp(30px, 4vw, 56px);
    line-height: 1.05;
    margin-bottom: 22px;
}

.rib-intro {
    color: rgba(255,255,255,.78);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 30px;
    max-width: 46ch;
}

.rib-filter { margin-bottom: 32px; }

.rib-filter-label {
    display: block;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
    margin-bottom: 14px;
}

.rib-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.rib-chip {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 999px;
    padding: 9px 18px;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.rib-chip:hover { border-color: #fff; }

.rib-chip[aria-pressed="true"] {
    background: #fff;
    color: var(--deep-blue);
    border-color: #fff;
}

.rib-chip:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.rib-clear {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    color: rgba(255,255,255,.75);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rib-clear:hover { color: #fff; }
.rib-clear:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.rib-viewall {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 999px;
    padding: 13px 26px;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.rib-viewall:hover {
    background: #fff;
    color: var(--deep-blue);
    border-color: #fff;
}

.rib-viewall i { transition: transform var(--transition); }
.rib-viewall:hover i { transform: translateX(4px); }
.rib-viewall:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- right: tight honeycomb "molecule" cluster ---- */
.rib-cluster {
    --sz: clamp(120px, 11vw, 170px);          /* circle diameter D */
    position: relative;
    align-self: end;                          /* anchor to bottom of the row */
    min-height: calc(var(--sz) * 2.68);       /* fits the 3-row molecule */
    margin-bottom: calc(var(--sz) * -0.30);   /* bottom row overflows the edge */
}

.rib-badge {
    position: absolute;
    /* packed hex position, anchored to cluster's bottom-right, + organic jitter */
    right: calc(var(--rx) * var(--sz) + var(--jx, 0px));
    bottom: calc(var(--by) * var(--sz) + var(--jy, 0px));
    left: auto;
    top: auto;
    width: var(--sz);
    height: var(--sz);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: 50%;
    /* entrance state — translate/scale/rotate kept as separate props */
    opacity: 0;
    translate: 0 24px;
    scale: 1;
    rotate: var(--rot, 0deg);
    transition:
        opacity .6s ease,
        translate .6s cubic-bezier(.2,.8,.2,1),
        scale var(--transition),
        filter var(--transition);
    transition-delay: calc(var(--i) * 80ms);
    z-index: 1;
}

.rib-in .rib-badge {
    opacity: 1;
    translate: 0 0;
}

/* the face: solid disc + soft ring; carries the idle float */
.rib-badge-face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #14396e;                 /* blue circle */
    border: 3px solid #e3262e;           /* red border */
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
    overflow: hidden;
    animation: rib-float var(--float-dur, 5.5s) ease-in-out var(--float-delay, 0s) infinite;
}

/* Placeholder photos fill the circle; real logos later can be
   switched back to a contained fit if they need padding. */
.rib-badge-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rib-badge-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 12px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: clamp(12px, 1.1vw, 15px);
    line-height: 1.15;
}

/* hover tooltip label */
.rib-badge-tip {
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 12px;
    color: #fff;
    background: rgba(7,27,58,.9);
    border: 1px solid rgba(255,255,255,.25);
    padding: 4px 10px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.rib-badge:hover .rib-badge-tip,
.rib-badge:focus-visible .rib-badge-tip { opacity: 1; }

.rib-badge:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* hover: focus one, dim + drift the rest */
.rib-cluster:hover .rib-badge:not(:hover) { opacity: .45; }
.rib-cluster:hover .rib-badge:not(:hover) .rib-badge-face { filter: saturate(.6) brightness(.9); }
.rib-badge:hover {
    scale: 1.08;
    z-index: 3;
    filter: brightness(1.06);
}

/* filter states */
.rib-badge.rib-match { opacity: 1; z-index: 2; scale: 1.04; }
.rib-badge.rib-dim   { opacity: .2; scale: .82; }

/* idle float kept small (±3px) so packed neighbours never separate */
@keyframes rib-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* ---- responsive ---- */

/* large screens: sit the whole cluster low-right, pulled in
   from the edges and sized so it stays fully visible (no clip);
   the copy stays top-left. */
@media (min-width: 1200px) {
    .rib-brands {
        min-height: clamp(560px, 50vw, 780px);
        padding-bottom: clamp(2.5rem, 5vw, 5rem);
    }

    .rib-inner {
        grid-template-columns: minmax(0, 560px);   /* copy only; cluster is absolute */
        align-items: start;                        /* copy hugs the top */
    }

    .rib-cluster {
        --sz: clamp(104px, 9vw, 148px);            /* smaller circles */
        position: absolute;
        right: clamp(28px, 4vw, 110px);            /* pulled in from the right */
        bottom: clamp(16px, 2vw, 40px);            /* fully inside — not clipped */
        margin: 0;
        min-height: 0;
        width: calc(var(--sz) * 3.40);
        height: calc(var(--sz) * 2.75);
    }
}

/* tablet: cluster drops below the copy, centered, still packed */
@media (max-width: 960px) {
    .rib-inner { grid-template-columns: 1fr; }
    .rib-copy  { max-width: none; }
    .rib-cluster {
        justify-self: center;
        width: calc(var(--sz) * 3.40);        /* molecule bounding width */
        max-width: 100%;
    }
}

/* mobile: cluster becomes a horizontal swipe row */
@media (max-width: 640px) {
    .rib-cluster {
        --sz: 118px;
        width: auto;
        min-height: 0;
        margin-bottom: 0;
        display: flex;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px 4px 40px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .rib-badge {
        position: static;
        right: auto;
        bottom: auto;
        rotate: 0deg;
        flex: 0 0 auto;
        scroll-snap-align: center;
    }
    .rib-badge-tip { display: none; }
}

/* reduced motion: opacity only, no movement or float */
@media (prefers-reduced-motion: reduce) {
    .rib-badge {
        translate: none;
        transition: opacity .4s ease;
        transition-delay: calc(var(--i) * 80ms);
    }
    .rib-badge:hover,
    .rib-badge.rib-match,
    .rib-badge.rib-dim { scale: 1; }
    .rib-badge-face { animation: none; }
    .rib-cluster:hover .rib-badge:not(:hover) { opacity: .45; }
    .rib-viewall:hover i { transform: none; }
}


/* =====================================================
   KOBA — bespoke brand page (Kubo-inspired)
   Dominant deep KOBA green (#03402C) with an antique-gold
   (#C9A66B) accent and white cards; rectangular framed
   photo and cards. Text flips white on the green.
   Scroll effects: see "KOBA — scroll effects" script.
===================================================== */

.kb-hero,
.kb-about,
.kb-spot {
    --kb-cream: #FDF4E7;
    --kb-tan: #C9A66B;        /* antique gold */
    --kb-tan-soft: #E7D3AE;
    --kb-ink: #03402c;        /* deep green ink */
}

.kb-blob path {
    fill: #0a5a3c;
}


/* ---------- Header ----------
   The KOBA hero is now dark green, so it uses the standard
   transparent / white-logo header like the other dark-hero
   brand pages — no light-header override needed here. */


/* ---------- HERO ---------- */

.kb-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: 100vh;
    display: flex;
    align-items: center;

    padding: 150px 0 120px;

    background: #03402c;
    color: #ffffff;
}

.kb-blob {
    position: absolute;
    pointer-events: none;
}

.kb-blob--bg1 {
    z-index: -1;
    top: -170px;
    left: -210px;
    width: 540px;
    opacity: .35;
}

.kb-blob--bg2 {
    z-index: -1;
    bottom: -140px;
    left: 36%;
    width: 300px;
    opacity: .25;
}

.kb-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 60px;
    align-items: center;
}

.kb-crumbs {
    color: rgba(255, 255, 255, .6);
}

.kb-crumbs a:hover,
.kb-crumbs span {
    color: #ffffff;
}

.kb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: var(--red);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.kb-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
}

.kb-title {
    margin: 22px 0 0;
}

.kb-title-main {
    display: block;

    color: #ffffff;

    font-size: clamp(96px, 14vw, 210px);
    font-weight: 900;
    line-height: .82;
    letter-spacing: -.045em;
}

.kb-title-sub {
    display: block;
    margin-top: 16px;

    color: rgba(255, 255, 255, .75);

    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 300;
    letter-spacing: -.5px;
}

.kb-lead {
    max-width: 460px;
    margin: 26px 0 36px;

    color: rgba(255, 255, 255, .75);

    font-size: 18px;
    line-height: 1.7;
}

.kb-btn-ghost {
    border: 1px solid rgba(255, 255, 255, .5);
    color: #ffffff;
}

.kb-btn-ghost:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--kb-ink);
}

/* Stage: morphing blob, arched photo, badge, sticker */

.kb-hero-stage {
    position: relative;
    height: auto;
    padding: 0 26px 26px 0;
}

/* Coffee-style framed photo: drop the morphing blob + rotating badge so
   the image reads as a clean rectangular frame with an offset gold outline. */
.kb-blob--main,
.kb-badge {
    display: none;
}

.kb-hero-stage::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 26px;
    right: 0;
    bottom: 0;
    z-index: 0;

    border: 2px solid var(--red);
}

.kb-blob--main {
    inset: -4% -10%;
    width: 120%;
    height: 108%;
}

.kb-arch {
    position: relative;
    z-index: 1;

    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;

    border-radius: 0;
    background: #022c1d;
    box-shadow: 0 40px 80px rgba(0, 0, 0, .4);
}

.kb-arch img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

    transform: scale(1.12);
    animation: kb-settle 1.8s cubic-bezier(.22, 1, .36, 1) .1s forwards;
}

@keyframes kb-settle {
    to { transform: scale(1); }
}

.kb-badge {
    position: absolute;
    top: 3%;
    right: 2%;
    z-index: 2;

    width: 140px;
    height: 140px;

    border-radius: 50%;
    background: var(--kb-ink);
    box-shadow: 0 20px 40px rgba(14, 34, 64, .25);
}

.kb-badge svg {
    width: 100%;
    height: 100%;
    animation: kb-spin 18s linear infinite;
}

.kb-badge text {
    fill: var(--kb-cream);

    font-family: "Roboto", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 3.2px;
}

.kb-badge-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    background: var(--red);
    color: #03402c;

    font-size: 26px;
    font-weight: 900;
}

@keyframes kb-spin {
    to { transform: rotate(360deg); }
}

.kb-sticker {
    position: absolute;
    left: 0;
    bottom: 9%;
    z-index: 2;

    padding: 18px 24px;

    border-top: 3px solid var(--red);
    background: var(--white);
    box-shadow: 0 24px 50px rgba(14, 34, 64, .2);

    rotate: -6deg;
}

.kb-sticker strong {
    display: block;

    color: var(--kb-ink);

    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
}

.kb-sticker span {
    display: block;
    margin-top: 6px;

    color: var(--gray);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.kb-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    color: rgba(255, 255, 255, .6);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.kb-scroll-cue i {
    position: relative;
    width: 1px;
    height: 42px;
    overflow: hidden;
    background: rgba(255, 255, 255, .2);
}

.kb-scroll-cue i::after {
    content: "";
    position: absolute;
    left: 0;
    top: -40%;
    width: 1px;
    height: 40%;
    background: var(--red);
    animation: kb-cue 1.8s ease-in-out infinite;
}

@keyframes kb-cue {
    to { top: 100%; }
}


/* ---------- MARQUEE ---------- */

/* ---------- ABOUT STATEMENT ---------- */

.kb-about {
    position: relative;
    overflow: hidden;

    padding: 170px 0 130px;

    background: #022c1d;
}

.kb-about .container {
    position: relative;
    z-index: 1;
}

.kb-blob--about {
    top: 60px;
    right: -150px;
    width: 440px;
    opacity: .45;
}

.kb-reveal {
    max-width: 1120px;
    margin: 30px 0 0;

    color: #ffffff;

    font-size: clamp(30px, 4vw, 58px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -1.2px;
}

.kb-word {
    opacity: .14;
    transition: opacity .35s ease;
}

.kb-word.on {
    opacity: 1;
}

.kb-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 60px;
    align-items: start;

    margin-top: 80px;
}

.kb-about-more {
    margin: 0;

    color: rgba(255, 255, 255, .75);

    font-size: 17px;
    line-height: 1.8;
}

.kb-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.kb-pillar {
    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 28px 24px;

    border-radius: 6px;
    background: var(--white);

    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1),
        box-shadow .5s ease;
}

.kb-pillar:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(14, 34, 64, .1);
}

.kb-pillar-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 10px;

    display: grid;
    place-items: center;

    border-radius: 6px;
    background: var(--kb-tan);
    color: var(--kb-ink);

    font-size: 20px;

    transition:
        background .4s ease,
        color .4s ease;
}

.kb-pillar:hover .kb-pillar-icon {
    background: #03402c;
    color: var(--white);
}

.kb-pillar strong {
    color: var(--kb-ink);
    font-size: 19px;
    font-weight: 700;
}

.kb-pillar span:last-child {
    color: var(--gray);
    font-size: 14px;
    line-height: 1.55;
}


/* ---------- SHOWCASE (pinned, slides sideways) ---------- */

/* ---------- SHOWCASE — "What we make" spotlight carousel ----------
   Active card centred + large; the previous / next peek at the sides
   (scaled, dimmed, blurred); further cards are hidden. Everything
   stays inside the container (the stage clips). Motion is transform /
   opacity only; positions are set by JS. */

.kb-spot {
    position: relative;
    background: #034f34;
    padding: 110px 0 100px;
}

.kb-spot-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 44px;
}

.bz-theme--koba .kb-spot-head .bz-label {
    color: #fff;
}

.kb-spot-head h2 {
    max-width: 640px;
    margin: 18px 0 0;

    color: #ffffff;

    font-size: clamp(32px, 3.6vw, 52px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1.5px;
}

.kb-spot-nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.kb-spot-count {
    color: rgba(255, 255, 255, .6);

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
}

.kb-spot-count b {
    color: var(--red);
    font-size: 30px;
}

/* Prev / next — circular controls flanking the stage, vertically centred.
   They sit ~24px outside the side cards on wide screens and clamp to the
   container edge (overlapping the side cards slightly) as the stage narrows. */
.kb-spot-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;

    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    border: 1.5px solid #ffffff;
    border-radius: 8px;
    background: rgba(2, 44, 29, .6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #ffffff;

    font-size: 16px;
    cursor: pointer;

    transform: translateY(-50%);
    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.kb-spot-prev { left:  max(0px, calc(50% - 650px)); }
.kb-spot-next { right: max(0px, calc(50% - 650px)); }

.kb-spot-arrow:hover {
    background: #ffffff;
    color: #03402c;
    transform: translateY(-50%) scale(1.05);
}

.kb-spot-arrow:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* Stage: clips the far cards; cards are absolutely centred */
.kb-spot-stage {
    position: relative;
    overflow: hidden;

    height: clamp(500px, 66vh, 540px);
}

.kb-spot-track {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kb-spot-card {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 420px;
    height: 100%;

    overflow: hidden;
    background: #022c1d;
    border-radius: 6px;

    transform: translate(-50%, -50%);
    will-change: transform, opacity;
    transition:
        transform .6s cubic-bezier(.22, .61, .36, 1),
        opacity .6s cubic-bezier(.22, .61, .36, 1),
        filter .6s ease,
        box-shadow .4s ease;
    cursor: pointer;
}

.kb-spot-card.is-active {
    box-shadow: 0 30px 70px rgba(0, 0, 0, .28);
    cursor: default;
}

/* Full-bleed photo */
.kb-spot-art {
    position: absolute;
    inset: 0;
    z-index: 0;

    display: grid;
    place-items: center;
    background: #022c1d;
}

.kb-spot-img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
    display: block;

    transform: scale(1);
    transition: transform .6s ease;
}

.kb-spot-art i {
    font-size: clamp(52px, 8vw, 72px);
    color: #FBF4EA;
}

/* active image: slow subtle zoom while active */
.kb-spot-card.is-active .kb-spot-img {
    transform: scale(1.05);
    transition: transform 4s ease-out;
}

/* hover on the active card: zoom a touch more */
.kb-spot-card.is-active:hover .kb-spot-img {
    transform: scale(1.08);
    transition: transform .6s ease;
}

/* Side cards: flat dark-green tint over the whole image (fades out when active) */
.kb-spot-shade {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: rgba(2, 44, 29, .6);
    transition: background .6s ease;
    pointer-events: none;
}

.kb-spot-card.is-active .kb-spot-shade {
    background: transparent;
}

/* Bottom gradient for text legibility: clear at the top → dark green at the base */
.kb-spot-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;

    background: linear-gradient(to top, rgba(2, 44, 29, .92) 0%, rgba(2, 44, 29, 0) 45%);
    pointer-events: none;
}

/* Name block, bottom-left over the overlay */
.kb-spot-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;

    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 28px;
    text-align: left;
}

.kb-spot-card h3 {
    margin: 0;

    color: #ffffff;

    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.5px;
}

.kb-spot-card p {
    margin: 0;
    max-width: 320px;

    color: #ffffff;
    opacity: .8;
    font-size: 14.5px;
    line-height: 1.5;
}

/* Side cards show the title only */
.kb-spot-card:not(.is-active) p {
    display: none;
}

/* Progress: thin line with a red dot that glides to the active item */
.kb-spot-progress {
    position: relative;
    display: flex;
    align-items: center;

    max-width: 620px;
    height: 34px;
    margin: 46px auto 0;
}

.kb-spot-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;

    height: 2px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .15);
}

/* Autoplay countdown: a subtle red segment that fills along the line over 4s */
.kb-spot-fill {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;

    height: 2px;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;

    background: var(--red);
    opacity: .5;
    pointer-events: none;
}

.kb-spot.is-counting .kb-spot-fill {
    animation: kb-spot-count 4000ms linear forwards;
}

@keyframes kb-spot-count {
    from { transform: translateY(-50%) scaleX(0); }
    to   { transform: translateY(-50%) scaleX(1); }
}

.kb-spot-dot {
    position: absolute;
    top: 50%;
    left: 0;

    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;

    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 22%, transparent);

    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.kb-spot-pip {
    position: relative;
    z-index: 1;

    flex: 1;
    height: 100%;
    padding: 0;

    border: 0;
    background: transparent;
    cursor: pointer;
}

.kb-spot-pip:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* live region for user-driven announcements */
.kb-spot-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ---------- Responsive ---------- */

@media (max-width: 1000px) {

    .kb-hero {
        min-height: 0;
        padding: 140px 0 110px;
    }

    .kb-hero-grid,
    .kb-about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .kb-hero-stage {
        height: auto;
        max-width: 460px;
    }

    /* tablet: active card ~70% width, neighbours peeking */
    .kb-spot-card {
        width: 70vw;
    }

}

@media (max-width: 640px) {

    .kb-hero-stage {
        height: auto;
        max-width: none;
    }

    .kb-arch {
        width: 100%;
    }

    .kb-badge {
        width: 108px;
        height: 108px;
    }

    .kb-badge-core {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .kb-sticker {
        padding: 14px 18px;
    }

    .kb-sticker strong {
        font-size: 26px;
    }

    .kb-about {
        padding: 130px 0 100px;
    }

    .kb-pillars {
        grid-template-columns: 1fr;
    }

    /* mobile: one card ~85% width, next peeking; arrows hidden */
    .kb-spot-card {
        width: 85vw;
    }

    .kb-spot-arrow {
        display: none;
    }

}

@media (prefers-reduced-motion: reduce) {

    .kb-arch img,
    .kb-badge svg,
    .kb-scroll-cue i::after {
        animation: none;
        transform: none;
    }

    .kb-word,
    .kb-pillar,
    .kb-pillar-icon,
    .kb-spot-card,
    .kb-spot-dot {
        transition: none;
    }

    /* no zoom on the image */
    .kb-spot-img,
    .kb-spot-card.is-active .kb-spot-img,
    .kb-spot-card.is-active:hover .kb-spot-img {
        transform: none;
        transition: none;
    }

    /* no autoplay → no countdown fill */
    .kb-spot.is-counting .kb-spot-fill {
        animation: none;
    }

}


/* =====================================================
   SLIDER ARROWS — shared variants of the .ac-arrows look
   (Portfolio + Featured brands)
===================================================== */

.ac-arrows button:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* on dark backgrounds */
.ac-arrows--on-dark button               { color: #fff; border-color: rgba(255,255,255,.28); }
.ac-arrows--on-dark button:hover         { background: #fff; color: var(--deep-blue); border-color: #fff; }
.ac-arrows--on-dark button:focus-visible { outline-color: #fff; }


/* ---------- Portfolio: arrow-driven slider (no scroll-jacking) ---------- */

.portfolio-section {
    height: auto;
    padding: clamp(60px, 8vw, 120px) 0;
}

.portfolio-section > .container {
    position: relative;
    height: auto;
    padding-top: 0;
    overflow: visible;
}

.portfolio-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin: 0 0 clamp(28px, 4vw, 48px);
}

.portfolio-arrows { display: flex; }

.portfolio-slider-wrapper {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.portfolio-slider-wrapper::-webkit-scrollbar { display: none; }
.portfolio-slider-wrapper:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.portfolio-track { transform: none; will-change: auto; }
.portfolio-card  { scroll-snap-align: start; }

.portfolio-progress-active,
.portfolio-progress-dot { transition-duration: .2s; }

@media (max-width: 900px) {
    .portfolio-section { height: auto; }
    .portfolio-header  { margin: 0 0 24px; }
    .portfolio-card    { flex-basis: calc(100vw - 40px); max-width: 100%; }
}

@media (max-width: 480px) {
    .portfolio-arrows button { width: 36px; height: 36px; }
}


/* ---------- Featured brands: arrows on mobile only ---------- */

.brands-arrows { display: none; }

@media (max-width: 768px) {
    .brands-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
    }
    .brands-head       { margin-bottom: 28px; }
    .brands-head .mark { margin-bottom: 0; }
    .brands-arrows     { display: flex; }

    .brands .brands-arrows button               { width: 36px; height: 36px; }
    .brands.is-dark .brands-arrows button       { color: #fff; border-color: rgba(255,255,255,.28); }
    .brands.is-dark .brands-arrows button:hover { background: #fff; color: #0E2240; border-color: #fff; }
}


/* =====================================================
   COFFEE — QUOTE + MARKETS with masonry gallery
   (overrides the stacked .cof-quote block above)
===================================================== */

.cof-quote {
    margin-top: clamp(72px, 8vw, 120px);
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(36px, 5vw, 88px);
}

.cof-quote-copy {
    display: flex;
    flex-direction: column;
}

.cof-quote .cof-quote-text {
    font-size: clamp(32px, 3.9vw, 60px);
    max-width: 14ch;
}

.cof-markets-label {
    margin: clamp(28px, 3vw, 44px) 0 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
}

.cof-quote .cof-markets li { font-size: clamp(16px, 1.5vw, 21px); }

/* masonry: 2 columns, offset spans on a 6-row grid */
.cof-mason {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(6, 1fr);
    gap: 12px;
    height: clamp(420px, 40vw, 560px);
}

.cof-mason figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(255,255,255,.06);
}

.cof-mason-a { grid-column: 1; grid-row: 1 / 5; }
.cof-mason-c { grid-column: 1; grid-row: 5 / 7; }
.cof-mason-b { grid-column: 2; grid-row: 1 / 3; }
.cof-mason-d { grid-column: 2; grid-row: 3 / 7; }

.cof-mason img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}

.cof-mason figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 28px 16px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.55));
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s, transform .35s;
}

.cof-mason figure:hover img        { transform: scale(1.06); }
.cof-mason figure:hover figcaption { opacity: 1; transform: none; }

/* tiles rise in when the block scrolls into view (JS adds .go) */
.cof-mason figure {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.cof-quote.go .cof-mason figure { opacity: 1; transform: none; }
.cof-quote.go .cof-mason-b { transition-delay: .1s; }
.cof-quote.go .cof-mason-c { transition-delay: .2s; }
.cof-quote.go .cof-mason-d { transition-delay: .3s; }

@media (max-width: 991px) {
    .cof-quote { grid-template-columns: 1fr; }
    .cof-mason { height: clamp(360px, 70vw, 520px); }
}

@media (max-width: 767px) {
    .cof-mason { gap: 8px; height: 110vw; max-height: 480px; }
    .cof-mason figcaption { opacity: 1; transform: none; padding: 20px 10px 8px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .cof-mason figure { opacity: 1; transform: none; transition: none; }
    .cof-mason img    { transition: none; }
}

/* Gallery mosaic: when a 7-tile block is left with only two tiles,
   give each half the row so the grid ends flush (e.g. 9 photos). */
.bz-tile:nth-child(7n + 1):nth-last-child(2),
.bz-tile:nth-child(7n + 2):last-child { grid-column: span 2; grid-row: span 1; }


/* =========================================================
   EXECUTIVE TEAM — rows with five members
   Desktop: five across. Tablet (2 cols): centre the odd card.
========================================================= */

@media (min-width: 1101px) {
    .executive-team-grid:has(> .executive-member:nth-child(5)) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 16px;
    }
}

.executive-team-grid.is-visible .executive-member:nth-child(5) { transition-delay: .45s; }

@media (min-width: 701px) and (max-width: 1100px) {
    .executive-team-grid > .executive-member:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 10px);
    }
}



/* =========================================================
   OUR STORY — About › Our History (plain two-column layout)
========================================================= */

.hist {
    background: #fff;
    padding: clamp(80px, 9vw, 130px) 0;
}

.hist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 7vw, 110px);
    align-items: start;
}

.hist-title span {
    display: block;
    color: #8396b2;
}

.hist-subtitle {
    margin: 0;
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: #0E2240;
}

.hist-text,
.hist-note {
    margin: 28px 0 0;
    font-size: 16px;
    line-height: 1.8;
    color: #5b6b82;
}

.hist-text strong { color: #0E2240; font-weight: 600; }

.hist-note {
    padding-left: 18px;
    border-left: 3px solid #e3262e;
    font-size: 15px;
}

/* stats */
.hist-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 40px 0 0;
    border-top: 1px solid rgba(14,34,64,.14);
}

.hist-stats > div {
    padding: 22px 16px 0 0;
}

.hist-stats > div + div {
    padding-left: 20px;
    border-left: 1px solid rgba(14,34,64,.14);
}

.hist-stats dt {
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: #0E2240;
}

.hist-stats dd {
    margin: 10px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #5b6b82;
}

/* sectors */
.hist-sectors {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    border-top: 1px solid rgba(14,34,64,.14);
}

.hist-sectors li { border-bottom: 1px solid rgba(14,34,64,.14); }

.hist-sectors a {
    display: grid;
    grid-template-columns: 30px 28px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 18px 0;
    color: #0E2240;
    text-decoration: none;
}

.hist-sector-num   { font-size: 12px; font-weight: 700; color: #e3262e; }
.hist-sector-icon  { font-size: 16px; color: #0E2240; text-align: center; }
.hist-sector-name  { font-size: 16px; font-weight: 500; }
.hist-sector-arrow { font-size: 13px; color: #8396b2; }

.hist-sectors a:hover .hist-sector-name,
.hist-sectors a:hover .hist-sector-arrow { color: #e3262e; }

/* buttons — solid red primary, navy outline secondary */
.hist-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 40px;
}

.hist-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 26px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
}

.hist-btn--solid         { background: #e3262e; color: #fff; border: 1px solid #e3262e; }
.hist-btn--solid:hover   { background: #c21f26; border-color: #c21f26; color: #fff; }
.hist-btn--outline       { background: transparent; color: #0E2240; border: 1px solid rgba(14,34,64,.35); }
.hist-btn--outline:hover { border-color: #0E2240; color: #0E2240; }

.hist-btn:focus-visible,
.hist-sectors a:focus-visible { outline: 2px solid #e3262e; outline-offset: 3px; }

@media (max-width: 991px) {
    .hist-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .hist-stats > div + div { padding-left: 12px; }
    .hist-sectors a { grid-template-columns: 26px 24px 1fr auto; gap: 10px; }
}


/* Our Brands strip — logos carry their own equal-area width/height (partners.blade.php) */
.partner-tile img {
    max-width: none;
    max-height: none;
    object-fit: contain;
}


/* =====================================================
   Timeline — eight milestones (1973 … 2026, Today)
===================================================== */
@media (min-width: 769px) {
    .tl-rail.tl-entered .tl-node[data-index="5"] { animation-delay: 500ms; }
    .tl-rail.tl-entered .tl-node[data-index="6"] { animation-delay: 600ms; }
    .tl-rail.tl-entered .tl-node[data-index="7"] { animation-delay: 700ms; }
}

@media (max-width: 768px) {
    .tl-node[data-index="0"] { margin-left: 35%; }
    .tl-node[data-index="1"] { margin-left: 30%; }
    .tl-node[data-index="2"] { margin-left: 25%; }
    .tl-node[data-index="3"] { margin-left: 20%; }
    .tl-node[data-index="4"] { margin-left: 15%; }
    .tl-node[data-index="5"] { margin-left: 10%; }
    .tl-node[data-index="6"] { margin-left:  5%; }
    .tl-node[data-index="7"] { margin-left:  0;  }
}


/* Our History — milestones list in the Welcome column */
.hist-milestones {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0 24px;
    border-top: 1px solid rgba(14,34,64,.14);
}

.hist-milestones li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(14,34,64,.08);
}

.hist-ms-year  { font-size: 13px; font-weight: 700; color: #e3262e; letter-spacing: .02em; }
.hist-ms-title { font-size: 15px; font-weight: 500; color: #0E2240; }


/* =====================================================
   HERO — slides flagged 'right' (hero.blade.php): on desktop the
   photo sits in the right part of the hero and fades into the navy,
   so the heading reads on clear background.
===================================================== */
@media (min-width: 992px) {
    .hero-background--right {
        left: 34%;
        transform-origin: right center;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
                mask-image: linear-gradient(90deg, transparent 0, #000 30%);
    }
}


/* Bacio gallery tiles — real photos (tiles without 'img' keep .bc-tile-art) */
.bc-tile-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.bc-tile:hover .bc-tile-img { transform: scale(1.06); }


/* Accomplishment cards — real photos ('img' in partials/news.blade.php) */
.ac-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.ac-card:hover .ac-card-img img { transform: scale(1.04); }

/* Bacio's five photos fill a complete rectangle at every screen size. */
.bz-theme--bacio .bz-mosaic > .bz-tile:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
}
.bz-theme--bacio .bz-mosaic > .bz-tile:first-child {
    grid-column: span 2;
    grid-row: span 2;
}
@media (max-width: 1000px) {
    .bz-theme--bacio .bz-mosaic > .bz-tile:first-child {
        grid-row: span 1;
    }
}
@media (max-width: 640px) {
    .bz-theme--bacio .bz-mosaic > .bz-tile:first-child {
        grid-column: auto;
        grid-row: auto;
    }
}
/* Unbranded product categories inside the Imports circles. */
.rib-category-art {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 16px;
    color: #fff;
    text-align: center;
}
.rib-category-art i {
    font-size: clamp(30px, 3.4vw, 48px);
    line-height: 1;
}
.rib-category-label {
    font-size: clamp(11px, 1.1vw, 14px);
    font-weight: 600;
    line-height: 1.2;
}

/* Space the Imports categories apart and raise the right-aligned cluster. */
@media (min-width: 641px) {
    .rib-cluster {
        align-self: center;
        min-height: calc(var(--sz) * 2.1);
        margin-bottom: 0;
    }
}
@media (min-width: 641px) and (max-width: 960px) {
    .rib-cluster {
        width: calc(var(--sz) * 3.44);
    }
}
@media (min-width: 1200px) {
    .rib-cluster {
        bottom: 25%;
        width: calc(var(--sz) * 3.44);
        height: calc(var(--sz) * 2.1);
    }
}

@media (max-width: 640px) {
    .rib-cluster {
        width: 100%;
        min-width: 0;
    }
}


/* =====================================================
   HERO COUNTER — both numbers the same size, fixed-width digits
   so "01 / 07" never shifts as the slides change
===================================================== */
.slide-counter {
    display: inline-flex;
    align-items: baseline;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.slide-counter .current-slide,
.slide-counter .total-slides {
    display: inline-block;
    min-width: 2ch;
    font-size: 18px;
    font-weight: 700;
}

.slide-counter .total-slides { color: rgba(255,255,255,.55); }
.slide-counter .counter-divider { font-weight: 400; }


/* =====================================================
   STAT NUMBERS — a trailing "+" sits raised and smaller,
   like the homepage "50+" (.num-plus)
===================================================== */
.num-plus {
    position: relative;
    top: -.72em;
    margin-left: .04em;
    font-size: .48em;
    line-height: 0;
    vertical-align: baseline;
    color: var(--red);
}

.ac-badge .num-plus { color: inherit; top: -.5em; font-size: .62em; }


/* =====================================================
   SECTION LABELS (.mark: line + dot + text) — larger, easier to read
===================================================== */
.mark {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 16px;
    font-size: 18px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.mark .mark-rule {
    width: 60px;
    min-width: 60px;
    height: 3.5px;
}

.mark i {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
}

@media (max-width: 600px) {
    .mark { gap: 14px; font-size: 16px; }
    .mark .mark-rule { width: 46px; min-width: 46px; }
    .mark i { width: 12px; height: 12px; min-width: 12px; min-height: 12px; }
}


/* Why choose Romina — standard section spacing above and below
   (the section rule was being dropped by a stray "}"; now fixed) */
.values-section      { background: #fff; padding-block: var(--section-space); }
.values-section .mark { margin-top: 0; }


/* =====================================================
   HERO — keep the "Explore" link clear of the slide counter
===================================================== */
.homepage-hero {
    display: grid;
    grid-template-rows: minmax(min-content, 1fr) auto;
    gap: clamp(1.5rem, 3vh, 3rem);
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    /* The header overlays the hero; keep its space inside the viewport. */
    padding-top: clamp(124px, 19vh, 220px);
    padding-bottom: calc(clamp(2rem, 5vh, 3.4375rem) + env(safe-area-inset-bottom, 0px));
    overflow: visible;
}

/* Stack fading slides in one grid cell; even hidden slides reserve their
   content height so longer headings cannot collide with the controls. */
.homepage-hero .hero-slides {
    position: static;
    display: grid;
}

.homepage-hero .hero-slide {
    position: static;
    grid-area: 1 / 1;
    display: flex;
}

.homepage-hero .hero-content {
    height: auto;
    padding-block: 0;
}

/* Clip only decorative image zoom, never the text or controls. */
.homepage-hero .hero-visuals {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.homepage-hero .hero-content h1 {
    font-size: clamp(2.75rem, min(6vw, 10vh), 5.875rem);
    line-height: 1;
}

.homepage-hero .hero-controls {
    position: relative;
    inset: auto;
    transform: none;
    /* Reserve the lower-right corner for the fixed chat launcher. */
    padding-right: 4.75rem;
}

@media (max-width: 768px) {
    .homepage-hero {
        padding-top: clamp(120px, 16vh, 170px);
    }
}

@media (max-height: 800px) {
    .homepage-hero { padding-top: 120px; }
    .homepage-hero .hero-category { margin-bottom: 18px; }
    .homepage-hero .hero-content h1 {
        font-size: clamp(2.5rem, min(5.3vw, 9vh), 4.5rem);
        line-height: 1;
    }
    .homepage-hero .hero-content p { margin-top: 24px; }
    .homepage-hero .hero-link { margin-top: 26px; }
}

@media (max-width: 600px) {
    .homepage-hero { padding-top: 104px; }
    .homepage-hero .hero-content h1 {
        font-size: clamp(2.25rem, min(12vw, 8vh), 2.75rem);
    }
    /* Keep arrows above the progress line, but reserve their own row. */
    .homepage-hero .slide-arrows {
        position: static;
        grid-area: 1 / 2;
    }

    .homepage-hero .slide-counter { grid-area: 2 / 1; }
    .homepage-hero .slide-progress { grid-area: 2 / 2; }
}

/* =====================================================
   CONTACT — shorter message box, readable placeholders
===================================================== */
.ctc-form .field::placeholder { color: rgba(14,34,64,.42); }

/* =====================================================
   FOOTER — the line next to the logo draws in when the footer
   comes into view (JS adds .is-drawn), then the dot pulses
===================================================== */
.ftr-divider b {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(.77, 0, .18, 1);
}
.ftr-divider b:last-child { transition-delay: .55s; }

.ftr-divider i {
    transform: scale(0);
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .9s;
}

.ftr-divider.is-drawn b,
.ftr-divider.is-drawn i { transform: none; }

.ftr-divider.is-drawn i { animation: ftrDot 2.8s ease-in-out 1.6s infinite; }

@keyframes ftrDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232, 19, 44, .55); }
    50%      { box-shadow: 0 0 0 9px rgba(232, 19, 44, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ftr-divider b, .ftr-divider i { transform: none; transition: none; }
    .ftr-divider.is-drawn i { animation: none; }
}


/* About pages — solid tab bar under the hero so "Our History / Our Leadership"
   read the same on every photo */
.page-hero-tabs {
    background: rgba(7, 27, 58, .94);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
}
.page-hero-tabs a { color: rgba(255,255,255,.82); font-size: 15px; }


/* =====================================================
   ABOUT PAGES (hero with tabs) — the hero never grows taller than
   the window, so "Our History / Our Leadership" stay on screen
   and clickable on laptops as well as large monitors
===================================================== */
.page-hero:not(.page-hero--plain) {
    height: min(78vh, 100svh);
    min-height: min(560px, 100svh);
}

@media (max-height: 760px) and (min-width: 769px) {
    .page-hero:not(.page-hero--plain) { height: 100svh; min-height: 480px; }
    .page-hero:not(.page-hero--plain) .page-hero-content { padding-top: 90px; padding-bottom: 20px; }
    .page-hero:not(.page-hero--plain) .page-hero-crumbs { margin-bottom: 14px; }
    .page-hero:not(.page-hero--plain) .page-hero-content h1 { font-size: clamp(34px, 7.2vh, 64px); }
    .page-hero:not(.page-hero--plain) .page-hero-content p { margin-top: 16px; }
    .page-hero:not(.page-hero--plain) .page-hero-tabs a { padding: 20px 0; }
}

/* Team cards — no "+" badge */
.executive-hint { display: none; }


/* =====================================================
   BRAND HERO — logo in place of the title ('hero_logo')
===================================================== */
.bz-hero-copy h1.bz-hero-logo { margin: 6px 0 4px; line-height: 0; letter-spacing: 0; }
.bz-hero-logo img {
    display: block;
    width: min(100%, 520px);
    height: auto;
    filter: brightness(0) invert(1);          /* black logo → white on the navy hero */
}
@media (max-width: 768px) { .bz-hero-logo img { width: min(100%, 340px); } }


/* =====================================================
   HIGHLIGHTS — photo variant (cards carry 'image')
   The section shows the active card's photo; hovering,
   focusing or tapping another card cross-fades to its photo.
===================================================== */
.bz-highlights.bz-highlights--photo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #07111F;
    padding: calc(var(--section-space) * 1.3) 0;
}

.bz-xp-bg { position: absolute; inset: 0; z-index: -1; }
.bz-xp-bg::after {                             /* keeps text readable on any photo */
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 17, 31, .82) 0%, rgba(7, 17, 31, .55) 45%, rgba(7, 17, 31, .9) 100%);
}
.bz-xp-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity .8s ease, transform 1.6s cubic-bezier(.22, 1, .36, 1);
}
.bz-xp-bg-img.is-on { opacity: 1; transform: scale(1); }

.bz-highlights--photo .bz-label,
.bz-highlights--photo .bz-section-head h2 { color: #fff; }
.bz-highlights--photo .bz-label::before   { background: #fff; }

.bz-highlights.bz-highlights--photo .bz-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: clamp(40px, 6vw, 80px);
}

.bz-highlights.bz-highlights--photo .bz-card {
    min-height: 220px;
    cursor: pointer;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 12px;
    box-shadow: none;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}
.bz-highlights.bz-highlights--photo .bz-card:hover,
.bz-highlights.bz-highlights--photo .bz-card:focus-visible,
.bz-highlights.bz-highlights--photo .bz-card.is-on {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .55);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
    outline: none;
}
.bz-highlights.bz-highlights--photo .bz-card.is-on::before { width: 100%; }

.bz-highlights.bz-highlights--photo .bz-card-icon { background: rgba(255, 255, 255, .14); color: #fff; }
.bz-highlights.bz-highlights--photo .bz-card.is-on .bz-card-icon { background: #a81c20; }
.bz-highlights.bz-highlights--photo .bz-card-num  { color: rgba(255, 255, 255, .55); }
.bz-highlights.bz-highlights--photo .bz-card-name { color: #fff; }

@media (max-width: 991px) {
    .bz-highlights.bz-highlights--photo .bz-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .bz-highlights.bz-highlights--photo .bz-cards { grid-template-columns: 1fr; }
    .bz-highlights.bz-highlights--photo .bz-card  { min-height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
    .bz-xp-bg-img { transition: none; transform: none; }
}


/* =====================================================
   LOCATIONS — photo slider beside the location card
   ('location_slides'); autoplay every 6 s in JS
===================================================== */
.bz-loc-split {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.bz-loc-split .bz-loc-grid { grid-template-columns: 1fr; }

.bz-locslider { min-width: 0; }

.bz-locslider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 10px;
    aspect-ratio: 16 / 10;
    background: #e6e9ee;
}
.bz-locslider-track::-webkit-scrollbar { display: none; }
.bz-locslider-track:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.bz-locslider-slide {
    position: relative;
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
}
.bz-locslider-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bz-locslider-slide figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 36px 20px 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    background: linear-gradient(transparent, rgba(7, 17, 31, .7));
}

.bz-locslider-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}
.bz-locslider-arrows { display: flex; }

.bz-locslider-dots { display: flex; gap: 8px; }
.bz-locslider-dots button {
    width: 26px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(14, 34, 64, .2);
    cursor: pointer;
    transition: background .3s, width .3s;
}
.bz-locslider-dots button.is-on { width: 44px; background: var(--red); }

@media (max-width: 900px) {
    .bz-loc-split { grid-template-columns: 1fr; }
}

/* Gallery mosaic: a block that starts with its last photo becomes a full-width banner */
.bz-tile:nth-child(7n + 1):last-child { grid-column: 1 / -1; grid-row: span 2; }


/* =====================================================
   COFFEE JOURNEY: "Where our coffee goes" (.cj-*)
   Markup: businesses/partials/coffee-journey.blade.php
   Static by default (all routes drawn); .cj--live (set by JS)
   turns on the scroll-driven journey.
===================================================== */
.cj {
    --cj-navy:  #0E2240;
    --cj-deep:  #081631;
    --cj-red:   #e3262e;
    --cj-line:  rgba(255, 255, 255, .14);
    position: relative;
    background: var(--cj-navy);
    color: #fff;
}

.cj-sticky { padding: var(--section-space) 0; }

.cj-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(32px, 4.5vw, 72px);
    align-items: center;
}

.cj-title {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
}

/* destinations */
.cj-list { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--cj-line); }
.cj-list li { border-bottom: 1px solid var(--cj-line); }

.cj-dest-btn {
    position: relative;
    width: 100%;
    min-height: 64px;
    display: grid;
    grid-template-columns: 30px 40px 1fr;
    align-items: center;
    gap: 12px;
    padding: 14px 6px 14px 0;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, .62);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: color .35s ease;
}
.cj-dest-num  { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: rgba(255, 255, 255, .45); }
.cj-dest-icon {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--cj-line);
    font-size: 16px;
    transition: background .35s ease, border-color .35s ease, color .35s ease;
}
.cj-dest-name { font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; letter-spacing: -.01em; }

/* progress bar under the active destination */
.cj-dest-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.cj-dest-bar i { display: block; height: 100%; background: var(--cj-red); transform: scaleX(var(--cj-p, 0)); transform-origin: left; }

.cj-dest-btn:hover,
.cj-dest-btn:focus-visible { color: #fff; }
.cj-dest-btn:focus-visible { outline: 2px solid var(--cj-red); outline-offset: 4px; }
.cj-dest-btn[aria-pressed="true"] { color: #fff; }
.cj-dest-btn[aria-pressed="true"] .cj-dest-num  { color: var(--cj-red); }
.cj-dest-btn[aria-pressed="true"] .cj-dest-icon { background: var(--cj-red); border-color: var(--cj-red); color: #fff; }

.cj-hint { margin: 22px 0 0; font-size: 13px; color: rgba(255, 255, 255, .6); }
.cj-hint i { margin-right: 6px; color: var(--cj-red); }
.cj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* map stage */
.cj-stage {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 60% 70%, rgba(227, 38, 46, .10) 0%, transparent 45%),
        linear-gradient(160deg, #10284a 0%, var(--cj-deep) 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 120px rgba(0, 0, 0, .35), 0 40px 80px rgba(0, 0, 0, .25);
    touch-action: pan-y;
}
.cj-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cj-vignette { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(4, 12, 28, .55) 100%); }

/* countries */
.cj-c { fill: rgba(255, 255, 255, .055); stroke: rgba(255, 255, 255, .16); stroke-width: .45; vector-effect: non-scaling-stroke; transition: fill .45s ease, stroke .45s ease; }
.cj-c--dest { fill: rgba(255, 255, 255, .11); stroke: rgba(255, 255, 255, .26); cursor: pointer; }
.cj-c--dest:hover { fill: rgba(255, 255, 255, .2); }
.cj-eth { fill: var(--cj-red); stroke: #fff; stroke-width: .9; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(227, 38, 46, .8)); }
.cj-glow { pointer-events: none; }

.cj[data-active="europe"]      .cj-c[data-region="europe"],
.cj[data-active="usa"]         .cj-c[data-region="usa"],
.cj[data-active="asia"]        .cj-c[data-region="asia"],
.cj[data-active="middle-east"] .cj-c[data-region="middle-east"] { fill: rgba(227, 38, 46, .30); stroke: rgba(255, 140, 140, .7); }

/* routes: all drawn when static */
.cj-route { fill: none; stroke: var(--cj-red); stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cj-dest-ring { fill: none; stroke: var(--cj-red); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.cj-dest-dot, .cj-origin-dot { fill: #fff; }
.cj-pulse { fill: none; stroke: var(--cj-red); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-origin: center; transform-box: fill-box;
    animation: cjPulse 2.8s ease-out infinite; }
@keyframes cjPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } }
.cj-plane { fill: #fff; display: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); }

/* labels (HTML over the map) */
.cj-labels { position: absolute; inset: 0; pointer-events: none; }
.cj-label {
    position: absolute; left: 0; top: 0;
    padding: 4px 9px;
    font-size: 12px; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
    color: #fff;
    background: rgba(8, 22, 49, .78);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 3px;
    transform: translate(-50%, calc(-100% - 12px));
    opacity: 0;
    transition: opacity .4s ease;
}
.cj-label--origin { background: var(--cj-red); border-color: var(--cj-red); }
.cj:not(.cj--live) .cj-label { display: none; }

.cj-tip {
    position: absolute; left: 0; top: 0;
    padding: 5px 10px;
    font-size: 12px; color: #fff; white-space: nowrap;
    background: rgba(8, 22, 49, .92); border: 1px solid rgba(255, 255, 255, .18); border-radius: 3px;
    pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 10px));
    transition: opacity .2s ease;
}
.cj-tip.is-on { opacity: 1; }

/* ---------- live (scroll-driven) mode ---------- */
.cj--live { height: calc(100svh + 5 * 62svh); }
.cj--live .cj-sticky {
    position: sticky; top: 0;
    height: 100svh;
    display: flex; align-items: center;
    padding: 96px 0 32px;
    overflow: hidden;
}
.cj--live .cj-grid { width: 100%; }
.cj--live .cj-route { stroke-opacity: 0; }
.cj--live .cj-route.is-done   { stroke-opacity: .32; stroke-width: 1.2; }
.cj--live .cj-route.is-active { stroke-opacity: 1; }
.cj--live .cj-dest { opacity: .35; transition: opacity .4s ease; }
.cj--live .cj-dest.is-on { opacity: 1; }
.cj--live .cj-dest.is-arrived .cj-dest-ring { animation: cjArrive 1.4s ease-out 1; transform-origin: center; transform-box: fill-box; }
@keyframes cjArrive { 0% { transform: scale(1); } 40% { transform: scale(2.4); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
.cj--live .cj-plane.is-flying { display: inline; }
.cj--live .cj-label.is-on { opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .cj-grid { grid-template-columns: 1fr; gap: 22px; }
    .cj-stage { aspect-ratio: 4 / 3; order: -1; }
    .cj--live .cj-sticky { padding: 84px 0 18px; }
    .cj--live .cj-grid { gap: 16px; }
    .cj--live .cj-stage { aspect-ratio: auto; height: 46svh; }
    .cj--live .bz-label, .cj--live .cj-hint { display: none; }
    .cj--live .cj-title { font-size: 22px; }
    .cj--live .cj-list { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; border-top: 0; gap: 8px; }
    .cj--live .cj-list li { border: 1px solid var(--cj-line); border-radius: 4px; }
    .cj--live .cj-dest-btn { min-height: 52px; grid-template-columns: 34px 1fr; padding: 8px 10px; gap: 10px; }
    .cj--live .cj-dest-num { display: none; }
    .cj--live .cj-dest-icon { width: 34px; height: 34px; font-size: 14px; }
    .cj--live .cj-dest-name { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .cj-pulse { animation: none; }
    .cj-c, .cj-label, .cj-dest { transition: none; }
}

/* Coffee Roastery and other "coming soon" brand pages */
.bz-soon {
    min-height: 78vh;
    display: flex; align-items: center;
    padding: 150px 0 110px;
    background: var(--deep-blue);
    color: #fff;
}
.bz-soon h1 { margin: 0; color: #fff; font-size: clamp(46px, 6vw, 88px); font-weight: 700; letter-spacing: -2px; line-height: 1; }
.bz-soon .hero-category { margin: 26px 0 22px; }
.bz-soon-tag { display: inline-flex; align-items: center; gap: 12px; margin: 30px 0 0; font-size: 15px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.bz-soon-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: cjPulseDot 2.2s ease-out infinite; }
@keyframes cjPulseDot { 0% { box-shadow: 0 0 0 0 rgba(227, 38, 46, .6); } 100% { box-shadow: 0 0 0 14px rgba(227, 38, 46, 0); } }
@media (prefers-reduced-motion: reduce) { .bz-soon-dot { animation: none; } }

/* Featured brands: phone beside each location */
.bp-loc-phone { display: flex; width: fit-content; align-items: center; gap: 6px; margin-top: 6px; font-weight: 500; color: inherit; text-decoration: none; }
.bp-loc-phone i { font-size: 11px; color: #E8132C; }
.bp-loc-phone:hover { text-decoration: underline; }

/* Contact labels sit inside empty fields and float on focus or with a value. */
.ctc-form .f { position:relative; gap:0; }
.ctc-form .field { padding:25px 0 10px; line-height:1.5; }
.ctc-form .f > label { position:absolute; left:0; top:25px; font-size:17px; line-height:1.5; font-weight:400; color:#565656; cursor:text; transform-origin:left top; transition:top .2s ease,font-size .2s ease,color .2s ease; }
.ctc-form .field:focus + label,
.ctc-form .field:not(:placeholder-shown) + label,
.ctc-form .field:autofill + label { top:2px; font-size:12px; font-weight:500; color:#0E2240; }
.ctc-form .field:-webkit-autofill + label { top:2px; font-size:12px; font-weight:500; color:#0E2240; }

/* Message shares the input padding and floating-label rules above. */
.ctc-form .ctc-message { flex: 0 0 auto; }
.ctc-form .ctc-message > textarea.field {
    box-sizing: border-box;
    min-height: 0;
    height: auto;
    flex: none;
    resize: none;
    overflow-y: hidden;
}
.ctc-form .f-actions { flex-shrink: 0; }
.ctc-form .ctc-error {
    margin: 8px 0 0;
    color: #E8132C;
    font-size: 13px;
    line-height: 1.5;
}
.ctc-form .ctc-error[hidden] { display: none; }
.ctc-form .field[aria-invalid="true"] { border-bottom-color: #E8132C; }
.ctc-form, .ctc-form .f, .ctc-form .f-row { min-width: 0; }
@media (min-width: 769px) {
    .ctc-form { padding-top: var(--ctc-form-offset, calc(clamp(88px,10vw,140px) - 40px)); }
}
@media (prefers-reduced-motion:reduce) {
    .ctc-form .f > label { transition:none; }
}
/* =====================================================
   HOMEPAGE "50+" — smaller plus, raised to the top of the numerals
===================================================== */
.fifty-plus { font-size: .26em; margin-top: -.2em; margin-left: .06em; }

/* =====================================================
   OUR BRANDS strip — larger logos (sizes set in partners.blade.php)
===================================================== */
.partner-tile { width: 290px; height: 160px; padding: 22px 26px; }
@media (max-width: 768px) {
    .partner-tile { width: 220px; height: 128px; padding: 16px 18px; }
    .partner-tile img { max-width: 100%; max-height: 92px; width: auto !important; height: auto !important; }
}

/* =====================================================
   COFFEE QUOTE — hand-drawn coffee branch, falling beans and
   export sack in white line work behind the quote. Strokes draw
   in as the section scrolls past (JS sets --sk on .cof-quote).
   Generated by resources/map-data/build_coffee_sketch.py.
===================================================== */
.cof-quote-copy {
    position: relative;
    padding: clamp(170px, 17vw, 240px) 0 clamp(210px, 21vw, 300px);
}
.cof-quote-copy > :not(.cof-sketch) { position: relative; z-index: 1; }

.cof-sketch {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}
.cof-sketch .sk {
    fill: none;
    stroke: rgba(255,255,255,.62);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
.cof-sketch .sk--bold  { stroke-width: 2.2; stroke: rgba(255,255,255,.8); }
.cof-sketch .sk--fine  { stroke-width: 1; stroke: rgba(255,255,255,.42); }
.cof-sketch .sk--fruit { stroke-width: 1.7; stroke: rgba(255,255,255,.85); }
.cof-sketch .sk-dot    { fill: rgba(255,255,255,.8); opacity: 0; }

.cof-sketch .sk-trail { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1.3; stroke-dasharray: 2 7; stroke-linecap: round; }
.cof-sketch .sk-mask  { fill: none; stroke: #fff; stroke-width: 14; stroke-dasharray: 1; stroke-dashoffset: 1; }

.cof-sketch .sk-bean ellipse,
.cof-sketch .sk-bean path { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.4; stroke-linecap: round; }
.cof-sketch .sk-bean { opacity: 0; transition: opacity .35s ease; }
.cof-sketch .sk-bean.on { opacity: 1; }

.cof-sketch .sk-type { opacity: 0; transition: opacity .6s ease; }
.cof-sketch .sk-type.on { opacity: 1; }
.cof-sketch text { fill: rgba(255,255,255,.82); font-weight: 800; }
.cof-sketch .sk-t1 { font-size: 30px; letter-spacing: .2em; }
.cof-sketch .sk-t2 { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; fill: rgba(255,255,255,.6); }

/* no JS / reduced motion: show the finished drawing */
.cof-sketch:not(.sk-live) .sk,
.cof-sketch:not(.sk-live) .sk-mask { stroke-dashoffset: 0; }
.cof-sketch:not(.sk-live) .sk-bean,
.cof-sketch:not(.sk-live) .sk-type,
.cof-sketch:not(.sk-live) .sk-dot { opacity: 1; }

@media (max-width: 991px) {
    .cof-quote-copy { padding: 190px 0 250px; max-width: 520px; }
}
@media (max-width: 767px) {
    .cof-quote-copy { padding: 150px 0 210px; }
}

/* =====================================================
   HERO — text starts on the same line on every slide
   (centring made it jump up/down with each slide's copy length)
===================================================== */
.hero-content {
    justify-content: flex-start;
    padding-top: clamp(124px, 19vh, 220px);
}
@media (max-width: 768px) {
    .hero-content { padding-top: clamp(120px, 20vh, 170px); }
}
.cof-quote { margin-top: clamp(8px, 2vw, 32px); }

/* Coffee: "From Farm to Global Market" follows the quote closely */
.cof-journey { margin-top: clamp(12px, 1.6vw, 24px); align-items: start; }

/* =====================================================
   COFFEE — three columns: photos above Quality Assurance and
   Traceability; the white rule moves onto the heading so all three
   rules line up beneath the photos.
===================================================== */
.cof-cols > div {
    padding-top: 0;
    border-top: 0;
    display: flex;
    flex-direction: column;
}
.cof-cols h4 { padding-top: 24px; border-top: 3px solid #fff; }
/* column without a photo keeps its rule level with the others */
.cof-col--noimg::before { content: ""; display: block; aspect-ratio: 4 / 3; margin-bottom: 26px; }
.cof-col-img {
    margin: 0 0 26px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(255,255,255,.06);
}
.cof-col-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
.cof-cols > div:hover .cof-col-img img { transform: scale(1.04); }
@media (max-width: 1023px) {
    .cof-col-img { aspect-ratio: 16 / 10; }
    .cof-col--noimg::before { display: none; }
}

/* =====================================================
   COFFEE HERO (video) — readable copy and a play button that
   no longer sits on the heading
===================================================== */
.cof-beans-img::after {
    background:
        linear-gradient(90deg, rgba(14,34,64,.82) 0%, rgba(14,34,64,.55) 40%, rgba(14,34,64,0) 72%),
        linear-gradient(180deg, rgba(14,34,64,.35) 0%, rgba(14,34,64,.1) 35%, rgba(14,34,64,.88) 88%, #0E2240 100%);
}
@media (min-width: 1024px) {
    .cof-beans.has-player .cof-center-btn { left: 76%; }
}
@media (max-width: 1023px) {
    /* height follows the copy; the video shows in the open band above it */
    .cof-beans {
        aspect-ratio: auto;
        max-height: none;
        min-height: 0;
        padding-top: clamp(200px, 42vw, 320px);
    }
    .cof-beans.has-player .cof-center-btn { top: clamp(110px, 24vw, 180px); }
    .cof-beans-img::after {
        background: linear-gradient(180deg, rgba(14,34,64,.2) 0%, rgba(14,34,64,.35) 30%, rgba(14,34,64,.9) 62%, #0E2240 100%);
    }
}

/* =====================================================
   ABOUT HEROES (Our Story, Leadership) — same type as the homepage hero
===================================================== */
.page-hero .page-hero-content h1,
.page-hero:not(.page-hero--plain) .page-hero-content h1 {
    font-size: clamp(52px, 6vw, 94px);
    line-height: .98;
    letter-spacing: -3px;
}
.page-hero .page-hero-content p,
.page-hero:not(.page-hero--plain) .page-hero-content p { font-size: 17px; line-height: 1.7; }
@media (max-width: 1100px) {
    .page-hero .page-hero-content h1,
    .page-hero:not(.page-hero--plain) .page-hero-content h1 { font-size: 65px; }
}
@media (max-width: 900px) {
    .page-hero .page-hero-content h1,
    .page-hero:not(.page-hero--plain) .page-hero-content h1 { font-size: 52px; }
    .page-hero .page-hero-content p,
    .page-hero:not(.page-hero--plain) .page-hero-content p { font-size: 15px; max-width: 500px; }
}
@media (max-width: 600px) {
    .page-hero .page-hero-content h1,
    .page-hero:not(.page-hero--plain) .page-hero-content h1 { font-size: 44px; letter-spacing: -1.5px; }
    .page-hero .page-hero-content p,
    .page-hero:not(.page-hero--plain) .page-hero-content p { font-size: 14px; line-height: 1.6; }
}

/* Coffee journey: the steps run full width (the photo beside them was removed) */
.cof-journey { grid-template-columns: 1fr; }

/* =====================================================
   MESKOTT — gallery as an editorial mosaic (same pattern as the
   KOBA and Romina Restaurants galleries). Eight photos placed on a
   12-column grid: wide tiles for rooms, tall tiles for the plates.
===================================================== */
.ms-gallery { padding: var(--section-space) 0; background: #fff; }
.ms-gallery-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 32px;
    margin-bottom: clamp(32px, 4vw, 52px);
}
.ms-gallery-head .bz-section-head { margin-bottom: 0; }
.ms-gallery-head > p {
    margin: 0;
    text-align: right;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(14, 34, 64, .62);
}

.ms-mosaic {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(110px, 10.5vw, 160px);
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ms-mosaic li { min-width: 0; min-height: 0; }
.ms-mosaic li:nth-child(1) { grid-column: 1 / 9;  grid-row: 1 / 4; }
.ms-mosaic li:nth-child(2) { grid-column: 9 / 13; grid-row: 1 / 5; }
.ms-mosaic li:nth-child(3) { grid-column: 1 / 5;  grid-row: 4 / 6; }
.ms-mosaic li:nth-child(4) { grid-column: 5 / 9;  grid-row: 4 / 8; }
.ms-mosaic li:nth-child(5) { grid-column: 9 / 13; grid-row: 5 / 8; }
.ms-mosaic li:nth-child(6) { grid-column: 1 / 5;  grid-row: 6 / 8; }
.ms-mosaic li:nth-child(7) { grid-column: 1 / 9;  grid-row: 8 / 11; }
.ms-mosaic li:nth-child(8) { grid-column: 9 / 13; grid-row: 8 / 11; }
.ms-mosaic li:nth-child(n+9) { grid-column: span 4; grid-row: span 2; }

.ms-photo {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: #0E2240;
    cursor: zoom-in;
}
.ms-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.ms-photo-caption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: rgba(14, 34, 64, .82);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background .3s;
}
.ms-photo-caption i { font-size: 12px; opacity: .8; }
.ms-photo:hover img,
.ms-photo:focus-visible img { transform: scale(1.04); }
.ms-photo:hover .ms-photo-caption { background: rgba(14, 34, 64, .95); }
.ms-photo:focus-visible { outline: 3px solid #e3262e; outline-offset: 3px; }

@media (max-width: 700px) {
    .ms-gallery-head { flex-direction: column; align-items: start; gap: 16px; }
    .ms-gallery-head > p { text-align: left; }
    .ms-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 12px; }
    .ms-mosaic li:nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 4; }
    .ms-mosaic li:nth-child(1),
    .ms-mosaic li:nth-child(6) { grid-column: span 2; aspect-ratio: 4 / 3; }
    .ms-photo-caption { left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .ms-photo img { transition: none; }
    .ms-photo:hover img, .ms-photo:focus-visible img { transform: none; }
}

/* =====================================================
   HOMEPAGE HERO — phones: counter, progress line and arrows on one row,
   arrows square and evenly sized, clear of the chat launcher
===================================================== */
@media (max-width: 600px) {
    .homepage-hero .hero-controls {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 14px;
        padding-right: 68px;
    }
    .homepage-hero .slide-counter  { grid-area: 1 / 1; }
    .homepage-hero .slide-progress { grid-area: 1 / 2; min-width: 0; }
    .homepage-hero .slide-arrows {
        position: static;
        grid-area: 1 / 3;
        display: flex;
        gap: 8px;
    }
    .homepage-hero .slide-arrow {
        width: 40px;
        height: 40px;
        flex: none;
        padding: 0;
        display: grid;
        place-items: center;
        font-size: 18px;
        line-height: 1;
    }
    .homepage-hero .hero-link { width: fit-content; }
}

/* HOMEPAGE HERO — phones: copy sits closer together */
@media (max-width: 600px) {
    .homepage-hero .hero-category { margin-bottom: 16px; }
    .homepage-hero .hero-content p { margin-top: 16px; }
    .homepage-hero .hero-link { margin-top: 22px; }
}

/* FEATURED BRANDS — phones: the panel column follows the screen width
   (it was sized to its content and ran off narrow screens) */
@media (max-width: 900px) {
    .brands .bp { grid-template-columns: minmax(0, 1fr); }
    .brands .bp > *, .brands .gallery, .brands .bp-copy, .brands .gallery-bar { min-width: 0; max-width: 100%; }
    .brands .gallery-bar .prog { min-width: 0; flex: 1 1 auto; }
}
@media (max-width: 420px) {
    .brands .gallery-bar { flex-wrap: wrap; row-gap: 10px; }
    .brands .gallery-bar .gallery-cap { flex: 1 0 100%; }
    .brands .gallery-bar .arrows { margin-left: auto; flex: none; }
}

/* HOMEPAGE — phones: comfortable tap targets for small text links */
@media (max-width: 600px) {
    .bp-loc-phone,
    .ctc a[href^="tel:"],
    .ctc a[href^="mailto:"],
    .ftr a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
    .find-us-section .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
}

/* =====================================================
   MESKOTT — black page: hero and every section on black,
   light type, the site red kept as the accent
===================================================== */
.bz-theme--meskott { background: #000; color: rgba(255,255,255,.78); }
.bz-theme--meskott .bz-hero,
.bz-theme--meskott .bz-overview,
.bz-theme--meskott .bz-highlights,
.bz-theme--meskott .ms-gallery,
.bz-theme--meskott .bz-locations,
.bz-theme--meskott .bz-more { background: #000; color: rgba(255,255,255,.78); }
.bz-theme--meskott .bz-hero::before,
.bz-theme--meskott .bz-hero::after { display: none; }
.bz-theme--meskott .bz-highlights.bz-highlights--photo { background: #000; }

.bz-theme--meskott h1,
.bz-theme--meskott h2,
.bz-theme--meskott h3,
.bz-theme--meskott h4,
.bz-theme--meskott .bz-fact dt,
.bz-theme--meskott .bz-loc-name,
.bz-theme--meskott .bz-more-name { color: #fff; }
.bz-theme--meskott p,
.bz-theme--meskott .bz-fact dd,
.bz-theme--meskott .bz-loc-desc,
.bz-theme--meskott .bz-more-kicker,
.bz-theme--meskott .ms-gallery-head > p { color: rgba(255,255,255,.72); }

/* cards and outlined surfaces */
.bz-theme--meskott .bz-loc,
.bz-theme--meskott .bz-more-card,
.bz-theme--meskott .bz-fact {
    background: #0d0d0d;
    border-color: rgba(255,255,255,.14);
    box-shadow: none;
}
.bz-theme--meskott .bz-more-card:hover,
.bz-theme--meskott .bz-loc:hover { background: #161616; border-color: rgba(255,255,255,.3); }
.bz-theme--meskott .bz-more-arrow,
.bz-theme--meskott .bz-loc-pin { color: #e3262e; }
.bz-theme--meskott .bz-loc a,
.bz-theme--meskott .bz-loc-link { color: #fff; border-color: rgba(255,255,255,.5); }

/* gallery tiles on black */
.bz-theme--meskott .ms-photo { background: #111; }
.bz-theme--meskott .ms-photo-caption { background: rgba(0,0,0,.78); }
.bz-theme--meskott .ms-photo:hover .ms-photo-caption { background: rgba(0,0,0,.92); }

/* hairlines */
.bz-theme--meskott hr,
.bz-theme--meskott .bz-overview-grid,
.bz-theme--meskott .bz-locslider { border-color: rgba(255,255,255,.12); }
/* overview text (its own Meskott styles were dark-on-light) */
.bz-theme--meskott .bz-overview--meskott-culinary .bz-overview-head h2 { color: #fff; }
.bz-theme--meskott .bz-overview--meskott-culinary .bz-overview-body p:first-child { color: rgba(255,255,255,.9); }
.bz-theme--meskott .bz-overview--meskott-culinary .bz-overview-body p { color: rgba(255,255,255,.66); }
.bz-theme--meskott .bz-overview--meskott-culinary .bz-label { color: #e3262e; }

/* =====================================================
   ROMINA IMPORTS — Nuova Simonelli (authorized agent)
===================================================== */
.ns { padding: var(--section-space) 0; background: #fff; color: #0E2240; }
.ns-eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #e3262e; }
.ns-eyebrow--center { text-align: center; margin: clamp(56px, 7vw, 90px) 0 28px; }
.ns h2 { margin: 0; font-size: clamp(30px, 3.4vw, 48px); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; color: #0E2240; }
.ns-logo { display: block; width: min(260px, 70%); height: auto; margin-bottom: 26px; }
.ns-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: end; }
.ns-intro-copy p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.75; color: rgba(14,34,64,.72); }

.ns-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.ns-col { padding: clamp(24px, 3vw, 36px); background: #f4f6f8; border-top: 3px solid #e3262e; }
.ns-col h3 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #0E2240; }
.ns-col-lead { margin: 0 0 20px; font-size: 15px; color: rgba(14,34,64,.65); }
.ns-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.ns-col li { display: flex; gap: 14px; align-items: flex-start; }
.ns-col li i { flex: none; width: 38px; height: 38px; display: grid; place-items: center; background: #0E2240; color: #fff; font-size: 15px; }
.ns-col li strong { display: block; font-size: 15.5px; color: #0E2240; margin-bottom: 2px; }
.ns-col li span { font-size: 14.5px; line-height: 1.6; color: rgba(14,34,64,.7); }

.ns-lineup { display: grid; gap: 22px; }
.ns-model { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 4vw, 64px); padding: clamp(20px, 3vw, 40px); border: 1px solid rgba(14,34,64,.1); }
.ns-model:nth-child(even) .ns-model-media { order: 2; }
.ns-model-media { position: relative; aspect-ratio: 4 / 3; background: #fff; display: grid; place-items: center; overflow: hidden; }
.ns-model-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .45s ease; }
.ns-model-media img.is-on { opacity: 1; }
.ns-swatch-row { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 1; }
.ns-swatch { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 2px solid #0E2240; background: transparent; cursor: pointer; }
.ns-swatch.is-on { background: #e3262e; border-color: #e3262e; }
.ns-swatch { box-sizing: border-box; margin: 0; outline-offset: 4px; }
.ns-num { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: #e3262e; }
.ns-model h3 { margin: 8px 0 8px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; color: #0E2240; letter-spacing: -.01em; }
.ns-model-lead { margin: 0 0 20px; font-size: 16px; color: rgba(14,34,64,.72); }
.ns-model dl { margin: 0; display: grid; gap: 12px; }
.ns-model dl div { padding-top: 12px; border-top: 1px solid rgba(14,34,64,.1); }
.ns-model dt { font-size: 15px; font-weight: 700; color: #0E2240; }
.ns-model dd { margin: 2px 0 0; font-size: 14.5px; line-height: 1.6; color: rgba(14,34,64,.68); }

.ns-close { margin-top: clamp(48px, 6vw, 80px); padding: clamp(28px, 4vw, 52px); background: #0E2240; color: #fff; display: grid; grid-template-columns: 1.4fr auto; gap: 28px; align-items: center; }
.ns-close blockquote { margin: 0; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6; font-weight: 300; }
.ns-contact { display: flex; flex-direction: column; gap: 10px; }
.ns-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; background: #e3262e; color: #fff; font-weight: 600; font-size: 14.5px; text-decoration: none; border: 1.5px solid #e3262e; transition: background .2s, color .2s; }
.ns-btn:hover { background: #c41f26; color: #fff; }
.ns-btn--ghost { background: transparent; border-color: rgba(255,255,255,.5); }
.ns-btn--ghost:hover { background: #fff; color: #0E2240; }

@media (max-width: 900px) {
    .ns-intro, .ns-pillars, .ns-model, .ns-close { grid-template-columns: 1fr; }
    .ns-model:nth-child(even) .ns-model-media { order: 0; }
}
@media (max-width: 600px) {
    .ns-swatch { width: 14px; height: 14px; }
    .ns-swatch-row { gap: 12px; }
}