/* ========================================================================== 
   EASPC Portfolio — Dashboard-inspired staff-area visual system
   This stylesheet intentionally loads after site.css and preserves the
   existing public content and responsive behavior while giving the protected staff pages
   the same workspace/card language used by the Staff Dashboard.
   ========================================================================== */

:root {
    --portal-navy: #16232f;
    --portal-navy-2: #24384a;
    --portal-burgundy: #550000;
    --portal-burgundy-dark: #3d0000;
    --portal-bg: #f3f5f7;
    --portal-surface: #ffffff;
    --portal-surface-soft: #f8fafb;
    --portal-line: rgba(22, 35, 47, .105);
    --portal-muted: #66788a;
    --portal-success: #207548;
    --portal-shadow-sm: 0 10px 28px rgba(22, 35, 47, .065);
    --portal-shadow: 0 18px 46px rgba(22, 35, 47, .09);
    --portal-shadow-hover: 0 24px 54px rgba(22, 35, 47, .14);
    --portal-radius-sm: 12px;
    --portal-radius: 18px;
    --portal-radius-lg: 26px;
}

body.staff-portal-site {
    color: var(--portal-navy);
    background:
        radial-gradient(circle at 6% 0%, rgba(85, 0, 0, .035), transparent 27rem),
        radial-gradient(circle at 96% 13%, rgba(22, 35, 47, .045), transparent 30rem),
        var(--portal-bg);
}

.staff-portal-site #main {
    min-height: 54vh;
}

/* --------------------------------------------------------------------------
   Utility ticker + navigation
   -------------------------------------------------------------------------- */
.staff-portal-site .top-ticker {
    background: var(--portal-burgundy-dark);
    box-shadow: inset 0 -1px rgba(255,255,255,.08);
}

.staff-portal-site .top-ticker-track {
    padding-block: .34rem;
}

.staff-portal-site .top-ticker-track span {
    font-size: .7rem;
    letter-spacing: .085em;
    opacity: .94;
}

.staff-portal-site .site-header {
    background: rgba(255, 255, 255, .93);
    color: var(--portal-navy);
    border-bottom: 1px solid var(--portal-line);
    box-shadow: 0 8px 24px rgba(22, 35, 47, .055);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.staff-portal-site .site-header.is-scrolled {
    box-shadow: 0 12px 30px rgba(22, 35, 47, .095);
}

.staff-portal-site .header-row {
    min-height: 78px;
    gap: 1.2rem;
}

.staff-portal-site .site-header.is-scrolled .header-row {
    min-height: 66px;
}

.staff-portal-site .brand-logo {
    height: 43px;
}

.staff-portal-site .site-header.is-scrolled .brand-logo {
    height: 38px;
}

.staff-portal-site .site-nav {
    gap: .35rem;
    padding: .34rem;
    border: 1px solid rgba(22, 35, 47, .07);
    border-radius: 15px;
    background: #f6f8fa;
}

.staff-portal-site .nav-link {
    padding: .58rem .72rem;
    border-radius: 10px;
    color: #53677b;
    font-size: .82rem;
    font-weight: 700;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.staff-portal-site .nav-link::after {
    display: none;
}

.staff-portal-site .nav-link:hover {
    color: var(--portal-navy);
    background: #fff;
    box-shadow: 0 5px 14px rgba(22, 35, 47, .07);
    transform: translateY(-1px);
}

.staff-portal-site .nav-link.is-active {
    color: #fff;
    background: var(--portal-navy);
    box-shadow: 0 8px 18px rgba(22, 35, 47, .18);
}

.staff-portal-site .nav-link.lang-switch {
    color: var(--portal-burgundy);
    background: rgba(85, 0, 0, .055);
}

.staff-portal-site .nav-cta-group {
    gap: .4rem;
    margin-left: .15rem;
}

.staff-portal-site .nav-cta {
/*    padding: .62rem .9rem;*/
    border-radius: 10px;
    background: var(--portal-burgundy);
    box-shadow: 0 8px 18px rgba(85, 0, 0, .16);
    animation: none;
    font-size: .78rem;
}

.staff-portal-site .nav-cta:hover {
    background: var(--portal-burgundy-dark);
    color: #fff;
}

.staff-portal-site .nav-cta-whatsapp {
    width: 2.35rem;
    height: 2.35rem;
}

.staff-portal-site .nav-toggle {
    border-color: var(--portal-line);
    border-radius: 11px;
    background: #f6f8fa;
}

.staff-portal-site .nav-toggle-bar {
    background: var(--portal-navy);
}

/* --------------------------------------------------------------------------
   Page title banner — same composition language as staff dashboard hero
   -------------------------------------------------------------------------- */
.staff-portal-site .page-header {
    padding: clamp(1.5rem, 3vw, 2.6rem) 0 .35rem;
    overflow: visible;
    border: 0;
    background: transparent;
}

.staff-portal-site .page-header .bg-pattern {
    display: none;
}

.staff-portal-site .page-header .container {
    max-width: var(--container-width);
    padding: clamp(1.55rem, 3vw, 2.4rem);
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius-lg);
    background:
        radial-gradient(circle at 92% 16%, rgba(85, 0, 0, .055), transparent 13rem),
        linear-gradient(145deg, #fff 0%, #f8fafb 100%);
    box-shadow: var(--portal-shadow-sm);
}

.staff-portal-site .page-header .container::before {
    content: "EASPC";
    display: inline-flex;
    margin-bottom: .62rem;
    color: var(--portal-burgundy);
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.staff-portal-site .page-header h1,
.staff-portal-site .page-lede {
    padding-left: 0;
}

.staff-portal-site .page-header h1 {
    margin: 0;
    color: var(--portal-navy);
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1.03;
}

.staff-portal-site .page-lede {
    margin-top: .85rem;
    color: var(--portal-muted);
    font-size: clamp(.98rem, 1.2vw, 1.08rem);
}

/* --------------------------------------------------------------------------
   Homepage hero
   -------------------------------------------------------------------------- */
.staff-portal-site .hero {
    padding: clamp(1.5rem, 3vw, 2.8rem) 0 .6rem;
    overflow: visible;
}

.staff-portal-site .hero > .bg-pattern,
.staff-portal-site .hero-accent {
    display: none;
}

.staff-portal-site .hero-grid {
    position: relative;
    gap: clamp(2rem, 4vw, 4rem);
    min-height: 500px;
    padding: clamp(2rem, 5vw, 4rem);
    overflow: hidden;
    border: 1px solid var(--portal-line);
    border-radius: 30px;
    background:
        radial-gradient(circle at 90% 5%, rgba(85, 0, 0, .09), transparent 18rem),
        linear-gradient(145deg, #fff 0%, #f7f9fb 100%);
    box-shadow: var(--portal-shadow);
}

.staff-portal-site .hero-grid::after {
    content: "";
    position: absolute;
    right: -95px;
    bottom: -125px;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: rgba(85, 0, 0, .035);
    pointer-events: none;
}

.staff-portal-site .hero-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: .42rem .65rem;
    border-radius: 999px;
    background: rgba(85, 0, 0, .07);
    color: var(--portal-burgundy);
    font-family: var(--font-body);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.staff-portal-site .hero h1 {
    max-width: 780px;
    color: var(--portal-navy);
    font-size: clamp(2.55rem, 5.6vw, 5rem);
    line-height: .98;
    text-transform: uppercase;
}

.staff-portal-site .hero-lede {
    color: var(--portal-muted);
    line-height: 1.75;
}

.staff-portal-site .hero-art {
    display: grid;
    place-items: center;
    min-height: 355px;
    padding: clamp(1.5rem, 3vw, 2.6rem);
    border-radius: 25px;
    background: linear-gradient(145deg, #16232f, #24384a);
    box-shadow: 0 24px 48px rgba(22, 35, 47, .19);
}

.staff-portal-site .hero-art svg {
    max-width: 390px;
    filter: brightness(0) invert(1);
    opacity: .94;
}

.staff-portal-site .hero-art svg path[stroke="var(--color-red)"],
.staff-portal-site .hero-art svg circle[stroke="var(--color-red)"],
.staff-portal-site .hero-art svg circle[fill="var(--color-red)"] {
    filter: none;
}

.staff-portal-site .hero-stats {
    gap: .7rem;
    padding-top: 0;
    border: 0;
}

.staff-portal-site .hero-stats > div {
    min-width: 118px;
    padding: .9rem 1rem;
    border: 1px solid var(--portal-line);
    border-radius: 14px;
    background: rgba(255,255,255,.8);
}

.staff-portal-site .hero-stats dt {
    color: var(--portal-muted);
    font-size: .68rem;
    font-weight: 700;
}

.staff-portal-site .hero-stats dd {
    color: var(--portal-navy);
    font-size: 1.55rem;
}

/* --------------------------------------------------------------------------
   Shared sections and section headings
   -------------------------------------------------------------------------- */
.staff-portal-site .section {
    padding-block: clamp(1.2rem, 2.4vw, 2.25rem);
}

.staff-portal-site .section.alt-bg {
    color: var(--portal-navy);
    background: transparent;
}

.staff-portal-site .section.alt-bg .section-head h2,
.staff-portal-site .section.alt-bg .container.narrow > p,
.staff-portal-site .section.alt-bg .container.narrow > h2,
.staff-portal-site .section.alt-bg .brand-region-name,
.staff-portal-site .section.alt-bg .brand-region-sample,
.staff-portal-site .section.alt-bg .muted,
.staff-portal-site .section.alt-bg .text-link {
    color: inherit;
}

.staff-portal-site .section-head {
    align-items: end;
    margin-bottom: 1.35rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--portal-line);
}

.staff-portal-site .section-head h2 {
    color: var(--portal-navy);
    font-size: clamp(1.75rem, 3vw, 2.55rem);
}

.staff-portal-site .section-head h2::before {
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    margin-bottom: .6rem;
    border-radius: 999px;
    background: var(--portal-burgundy);
}

.staff-portal-site .text-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .46rem .68rem;
    border: 1px solid rgba(85, 0, 0, .1);
    border-radius: 10px;
    background: rgba(85, 0, 0, .045);
    color: var(--portal-burgundy);
    font-size: .85rem;
    font-weight: 750;
}

.staff-portal-site .text-link:hover {
    border-color: rgba(85, 0, 0, .25);
    background: rgba(85, 0, 0, .075);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.staff-portal-site .btn {
    min-height: 46px;
    padding: .72rem 1.08rem;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: .88rem;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
}

.staff-portal-site .btn-primary {
    background: var(--portal-burgundy);
    border-color: var(--portal-burgundy);
    box-shadow: 0 10px 22px rgba(85, 0, 0, .16);
}

.staff-portal-site .btn-primary:hover {
    background: var(--portal-burgundy-dark);
    border-color: var(--portal-burgundy-dark);
    box-shadow: 0 14px 26px rgba(85, 0, 0, .2);
}

.staff-portal-site .btn-ghost {
    border-color: rgba(22, 35, 47, .16);
    background: #fff;
    color: var(--portal-navy);
}

.staff-portal-site .btn-ghost:hover {
    border-color: rgba(22, 35, 47, .28);
    background: #f7f9fb;
    color: var(--portal-navy);
}

/* --------------------------------------------------------------------------
   Reusable dashboard cards across every public tab
   -------------------------------------------------------------------------- */
.staff-portal-site .highlight-card,
.staff-portal-site .category-card,
.staff-portal-site .brand-tile,
.staff-portal-site .review-card,
.staff-portal-site .statement-card,
.staff-portal-site .step-card,
.staff-portal-site .contact-card,
.staff-portal-site .location-card,
.staff-portal-site .product-row {
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius);
    background: linear-gradient(150deg, #fff 0%, #f9fafb 100%);
    color: var(--portal-navy);
    box-shadow: var(--portal-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.staff-portal-site .highlight-card:hover,
.staff-portal-site .category-card:hover,
.staff-portal-site .brand-tile:hover,
.staff-portal-site .review-card:hover,
.staff-portal-site .statement-card:hover,
.staff-portal-site .step-card:hover,
.staff-portal-site .contact-card:hover,
.staff-portal-site .location-card:hover,
.staff-portal-site .product-row:hover {
    border-color: rgba(85, 0, 0, .24);
    background: #fff;
    color: var(--portal-navy);
    box-shadow: var(--portal-shadow-hover);
    transform: translateY(-5px);
}

.staff-portal-site .highlight-card {
    border-left: 1px solid var(--portal-line);
    padding: 1.35rem;
}

.staff-portal-site .highlight-mark {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--portal-navy);
    color: #fff;
}

.staff-portal-site .highlight-mark svg {
    width: 25px;
    height: 25px;
    stroke: #fff;
}

.staff-portal-site .highlight-card:hover .highlight-mark {
    background: var(--portal-burgundy);
    color: #fff;
}

.staff-portal-site .highlight-card p,
.staff-portal-site .highlight-card:hover p,
.staff-portal-site .category-card p,
.staff-portal-site .category-card:hover p,
.staff-portal-site .step-card p,
.staff-portal-site .step-card:hover p,
.staff-portal-site .statement-card p,
.staff-portal-site .statement-card:hover p,
.staff-portal-site .contact-card p,
.staff-portal-site .contact-card:hover p,
.staff-portal-site .location-card .location-value,
.staff-portal-site .location-card:hover .location-value,
.staff-portal-site .specialty-chip-name,
.staff-portal-site .location-card:hover .specialty-chip-name {
    color: var(--portal-muted);
}

.staff-portal-site .category-card {
    overflow: hidden;
    padding: .85rem;
}

.staff-portal-site .category-image {
    border-radius: 14px;
    overflow: hidden;
    background: #eef2f5;
}

.staff-portal-site .category-card h3,
.staff-portal-site .category-card:hover h3,
.staff-portal-site .step-card h3,
.staff-portal-site .step-card:hover h3,
.staff-portal-site .statement-card h3,
.staff-portal-site .statement-card:hover h3,
.staff-portal-site .contact-card h2,
.staff-portal-site .contact-card:hover h2,
.staff-portal-site .location-card h3,
.staff-portal-site .location-card:hover h3 {
    color: var(--portal-navy);
}

.staff-portal-site .brand-tile {
    min-height: 150px;
    padding: 1.15rem;
}

.staff-portal-site .brand-tile-logo {
    max-height: 62px;
    filter: saturate(.9);
}

.staff-portal-site .brand-tile-name,
.staff-portal-site .brand-tile:hover .brand-tile-name {
    color: var(--portal-navy);
}

.staff-portal-site .brand-region {
    padding: clamp(1.25rem, 2vw, 1.7rem);
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius-lg);
    background: #fff;
    box-shadow: var(--portal-shadow-sm);
}

.staff-portal-site .brand-region + .brand-region {
    margin-top: 1.15rem;
}

.staff-portal-site .brand-region-title {
    border-bottom-color: var(--portal-line);
}

.staff-portal-site .product-row {
    overflow: hidden;
    padding: 1rem;
}

.staff-portal-site .product-row-image {
    border-radius: 15px;
}

.staff-portal-site .product-row-head {
    border-bottom-color: var(--portal-line);
}

.staff-portal-site .step-card,
.staff-portal-site .statement-card,
.staff-portal-site .contact-card,
.staff-portal-site .location-card {
    padding: 1.45rem;
    border-top: 1px solid var(--portal-line);
}

.staff-portal-site .category-number {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 13px;
    background: var(--portal-navy);
    color: #fff;
    font-size: .85rem;
}

.staff-portal-site .step-card:hover .category-number {
    background: var(--portal-burgundy);
    color: #fff;
}

.staff-portal-site .review-card {
    padding: 1.45rem;
}

.staff-portal-site .review-stars {
    color: var(--portal-burgundy);
}

.staff-portal-site .reviews-nav {
    border: 1px solid var(--portal-line);
    border-radius: 12px;
    background: #fff;
    color: var(--portal-navy);
    box-shadow: var(--portal-shadow-sm);
}

/* --------------------------------------------------------------------------
   Quote / chips / photo bands
   -------------------------------------------------------------------------- */
.staff-portal-site .pull-quote {
    position: relative;
    margin: 0;
    padding: clamp(1.5rem, 3vw, 2.15rem);
    border: 1px solid var(--portal-line);
    border-left: 5px solid var(--portal-burgundy);
    border-radius: var(--portal-radius);
    background: #fff;
    box-shadow: var(--portal-shadow-sm);
}

.staff-portal-site .specialty-chip {
    border: 1px solid var(--portal-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(22, 35, 47, .045);
}

.staff-portal-site .brand-teaser-column {
    padding: 1.25rem;
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius);
    background: #fff;
    box-shadow: var(--portal-shadow-sm);
}

.staff-portal-site .photo-band {
    max-width: var(--container-width);
    margin-inline: auto;
    border-radius: var(--portal-radius-lg);
    box-shadow: var(--portal-shadow);
}

.staff-portal-site .photo-band-caption {
    border-left-color: var(--portal-burgundy);
    border-radius: 0 14px 14px 0;
}

/* --------------------------------------------------------------------------
   Contact / forms
   -------------------------------------------------------------------------- */
.staff-portal-site .contact-form {
    max-width: none;
    padding: clamp(1.3rem, 3vw, 2rem);
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius);
    background: #fff;
    box-shadow: var(--portal-shadow-sm);
}

.staff-portal-site .form-field label,
.staff-portal-site .location-label {
    color: var(--portal-navy);
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .045em;
}

.staff-portal-site .form-field input,
.staff-portal-site .form-field textarea,
.staff-portal-site .category-select {
    min-height: 48px;
    border: 1px solid rgba(22, 35, 47, .15) !important;
    border-radius: 12px;
    background-color: #fbfcfd !important;
    color: var(--portal-navy);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.staff-portal-site .form-field input:focus,
.staff-portal-site .form-field textarea:focus,
.staff-portal-site .category-select:focus {
    border-color: rgba(85, 0, 0, .42) !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(85, 0, 0, .065);
}

.staff-portal-site .location-map-links {
    border-top-color: var(--portal-line);
}

.staff-portal-site .location-map-links a,
.staff-portal-site .location-card:hover .location-map-links a {
    color: var(--portal-burgundy);
}

.staff-portal-site .location-card:hover .location-label {
    color: var(--portal-navy);
}

/* --------------------------------------------------------------------------
   CTA bands + footer
   -------------------------------------------------------------------------- */
.staff-portal-site .cta-band {
    padding: clamp(1.4rem, 3vw, 2.6rem) 0 clamp(2.4rem, 5vw, 4rem);
    background: transparent;
}

.staff-portal-site .cta-band > .bg-pattern {
    display: none;
}

.staff-portal-site .cta-band-inner {
    padding: clamp(1.6rem, 4vw, 2.6rem);
    border-radius: var(--portal-radius-lg);
    background:
        radial-gradient(circle at 94% 5%, rgba(255,255,255,.1), transparent 15rem),
        linear-gradient(145deg, #16232f, #24384a);
    color: #fff;
    box-shadow: 0 22px 46px rgba(22, 35, 47, .18);
}

.staff-portal-site .cta-band h2,
.staff-portal-site .cta-band p {
    color: #fff;
}

.staff-portal-site .btn-primary-inverse {
    border-radius: 12px;
    color: var(--portal-navy);
}

.staff-portal-site .btn-ghost-inverse {
    border-radius: 12px;
}

.staff-portal-site .site-footer {
    margin-top: 0;
    background: #16232f;
    border-top: 1px solid rgba(255,255,255,.08);
}

.staff-portal-site .footer-simple {
    padding-block: 1.15rem;
}

.staff-portal-site .footer-copy {
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 650;
    letter-spacing: 0;
    opacity: .9;
}

/* --------------------------------------------------------------------------
   Responsive navigation and page geometry
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    .staff-portal-site .nav-toggle {
        display: inline-flex;
    }

    .staff-portal-site .site-nav {
        position: absolute;
        top: calc(100% + 8px);
        left: 1rem;
        right: 1rem;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: .2rem;
        padding: .65rem;
        border: 1px solid var(--portal-line);
        border-radius: 16px;
        background: rgba(255,255,255,.98);
        box-shadow: 0 18px 42px rgba(22, 35, 47, .16);
    }

    .staff-portal-site .site-nav.is-open {
        display: flex;
    }

    .staff-portal-site .nav-link {
        padding: .78rem .85rem;
        border-bottom: 0;
        text-align: left;
    }

    .staff-portal-site .nav-cta-group {
        margin: .4rem 0 0;
    }
}

@media (max-width: 760px) {
    .staff-portal-site .container {
        padding-inline: 1rem;
    }

    .staff-portal-site .page-header {
        padding-top: 1rem;
    }

    .staff-portal-site .page-header .container,
    .staff-portal-site .hero-grid,
    .staff-portal-site .cta-band-inner {
        border-radius: 20px;
    }

    .staff-portal-site .hero-grid {
        min-height: 0;
        padding: 1.5rem;
    }

    .staff-portal-site .hero-art {
        min-height: 250px;
    }

    .staff-portal-site .hero-stats > div {
        flex: 1 1 30%;
    }
}

/* RTL adjustments for the new treatment */
[dir="rtl"] .staff-portal-site .page-header,
.staff-portal-site.is-rtl .page-header {
    background-image: none;
}

[dir="rtl"] .staff-portal-site .page-header h1,
[dir="rtl"] .staff-portal-site .page-lede,
.staff-portal-site.is-rtl .page-header h1,
.staff-portal-site.is-rtl .page-lede {
    padding-right: 0;
}

[dir="rtl"] .staff-portal-site .pull-quote,
.staff-portal-site.is-rtl .pull-quote {
    border-left: 1px solid var(--portal-line);
    border-right: 5px solid var(--portal-burgundy);
}


/* ========================================================================== 
   Public website — hybrid EASPC visual system
   Keeps the original high-contrast navy / burgundy identity and colored
   section bands, while borrowing the newer rounded cards, layered surfaces,
   softer shadows and cleaner spacing. Scoped to public pages only so the
   protected VIN Search workspace remains visually unchanged.
   ========================================================================== */

.public-site {
    --public-navy: #16232f;
    --public-navy-deep: #16232f;
    --public-navy-soft: #24384a;
    --public-burgundy: #550000;
    --public-burgundy-deep: #3d0000;
    --public-paper: #eef2f4;
    --public-paper-warm: #f4efef;
    --public-card: #ffffff;
    --public-line: rgba(22, 35, 47, .13);
    --public-shadow: 0 18px 42px rgba(22, 35, 47, .11);
    --public-shadow-hover: 0 24px 50px rgba(22, 35, 47, .17);
    color: var(--public-navy);
    background:
        radial-gradient(circle at 6% 8%, rgba(85, 0, 0, .07), transparent 24rem),
        radial-gradient(circle at 94% 20%, rgba(22, 35, 47, .08), transparent 30rem),
        var(--public-paper);
}

.public-site #main {
    min-height: 54vh;
    background: transparent;
}

/* ---- ticker + navigation: original dark identity, newer finish ---------- */
.public-site .top-ticker {
    background: linear-gradient(90deg, var(--public-burgundy-deep), var(--public-burgundy), var(--public-burgundy-deep));
    box-shadow: inset 0 -1px rgba(255,255,255,.12);
}

.public-site .top-ticker-track {
    padding-block: .37rem;
}

.public-site .top-ticker-track span {
    font-size: .72rem;
    letter-spacing: .075em;
    opacity: .96;
}

.public-site .site-header {
    background: linear-gradient(110deg, var(--public-navy-deep), var(--public-navy) 58%, #24384a);
    border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 28px rgba(22, 35, 47, .18);
}

.public-site .site-header.is-scrolled {
    box-shadow: 0 12px 32px rgba(22, 35, 47, .28);
}

.public-site .header-row {
    min-height: 78px;
    gap: 1.1rem;
}

.public-site .site-header.is-scrolled .header-row {
    min-height: 64px;
}

.public-site .brand-logo {
    height: 43px;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,.18));
}

.public-site .site-header.is-scrolled .brand-logo {
    height: 37px;
}

.public-site .site-nav {
    gap: .28rem;
}

.public-site .nav-link {
    padding: .55rem .68rem;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(255,255,255,.78);
    font-size: .83rem;
    font-weight: 700;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.public-site .nav-link::after {
    display: none;
}

.public-site .nav-link:hover {
    color: #fff;
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
    transform: translateY(-1px);
}

.public-site .nav-link.is-active {
    color: #fff;
    border-color: rgba(255,255,255,.16);
    background: var(--public-burgundy);
    box-shadow: 0 8px 18px rgba(61, 0, 0, .28);
}

.public-site .nav-link.lang-switch {
    color: #fff;
    background: rgba(255,255,255,.08);
}

.public-site .nav-cta {
/*    padding: .6rem .9rem;*/
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 10px;
    background: var(--public-burgundy);
    animation: none;
    box-shadow: 0 8px 18px rgba(61, 0, 0, .26);
    font-size: .78rem;
}

.public-site .nav-cta:hover {
    color: var(--public-burgundy);
    background: #fff;
}

.public-site .nav-cta-whatsapp {
    width: 2.4rem;
    height: 2.4rem;
}

.public-site .nav-toggle {
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    background: rgba(255,255,255,.08);
}

.public-site .nav-toggle-bar {
    background: #fff;
}

/* ---- page title: colored again, but more dimensional -------------------- */
.public-site .page-header {
    padding-block: clamp(2.15rem, 4vw, 3.5rem);
    border: 0;
    background:
        radial-gradient(circle at 88% 18%, rgba(255,255,255,.10), transparent 15rem),
        linear-gradient(115deg, var(--public-navy-deep) 0%, var(--public-navy) 62%, var(--public-burgundy-deep) 100%);
    color: #fff;
}

.public-site .page-header::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 5px;
    background: linear-gradient(90deg, var(--public-burgundy), #550000 42%, rgba(255,255,255,.28));
}

.public-site .page-header .bg-pattern {
    opacity: .16;
}

.public-site .page-header h1 {
    margin: 0;
    padding-left: 0;
    color: #fff;
    font-size: clamp(2.25rem, 4.6vw, 4rem);
    text-shadow: 0 5px 18px rgba(0,0,0,.22);
}

.public-site .page-lede {
    max-width: 64ch;
    margin-top: .8rem;
    padding-left: 0;
    color: rgba(255,255,255,.78);
}

/* ---- home hero: bold color field + polished dashboard-like surfaces ----- */
.public-site .hero {
    padding: clamp(1.5rem, 3vw, 2.8rem) 0;
    overflow: visible;
}

.public-site .hero > .bg-pattern {
    display: none;
}

.public-site .hero-accent {
    display: block;
    top: -24px;
    right: -10px;
    width: 210px;
    height: 210px;
    opacity: .95;
    background: var(--public-burgundy);
}

.public-site .hero-grid {
    position: relative;
    min-height: 520px;
    gap: clamp(2rem, 4vw, 4rem);
    padding: clamp(2rem, 5vw, 4.3rem);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 4%, rgba(255,255,255,.08), transparent 20rem),
        linear-gradient(120deg, var(--public-navy-deep) 0%, var(--public-navy) 62%, #24384a 100%);
    box-shadow: 0 26px 58px rgba(22, 35, 47, .22);
}

.public-site .hero-grid::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46%;
    height: 5px;
    background: var(--public-burgundy);
}

.public-site .hero-kicker {
    display: inline-flex;
    width: fit-content;
    padding: .45rem .68rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: #fff;
    background: rgba(85, 0, 0, .78);
    font-family: var(--font-body);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.public-site .hero h1 {
    max-width: 760px;
    color: #fff;
    font-size: clamp(2.65rem, 5.7vw, 5rem);
    line-height: .98;
    text-shadow: 0 8px 24px rgba(0,0,0,.20);
}

.public-site .hero-lede {
    color: rgba(255,255,255,.75);
    line-height: 1.75;
}

.public-site .hero .btn-ghost {
    border-color: rgba(255,255,255,.55);
    color: #fff;
}

.public-site .hero .btn-ghost:hover {
    border-color: #fff;
    background: #fff;
    color: var(--public-navy);
}

.public-site .hero-stats {
    gap: .7rem;
    padding-top: .3rem;
    border: 0;
}

.public-site .hero-stats > div {
    min-width: 120px;
    padding: .82rem 1rem;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 13px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(5px);
}

.public-site .hero-stats dt {
    color: rgba(255,255,255,.60);
}

.public-site .hero-stats dd {
    color: #fff;
}

.public-site .hero-art {
    min-height: 350px;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 70% 30%, rgba(85, 0, 0, .14), transparent 13rem),
        linear-gradient(145deg, #fff, #eee5e5);
    box-shadow: inset 0 1px rgba(255,255,255,.9), 0 22px 46px rgba(0,0,0,.18);
}

/* ---- section rhythm: colored old design, polished new design ------------ */
.public-site .section {
    padding-block: clamp(1.65rem, 3vw, 2.8rem);
}

.public-site .section:not(.alt-bg):not(.cta-band) {
    background: rgba(247,249,250,.72);
}

.public-site .section.alt-bg {
    color: #fff;
    background:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(125deg, var(--public-burgundy-deep), var(--public-burgundy) 68%, #550000);
    background-size: 34px 34px, 34px 34px, auto;
}

.public-site .section.alt-bg h2,
.public-site .section.alt-bg h3,
.public-site .section.alt-bg p,
.public-site .section.alt-bg .brand-region-name,
.public-site .section.alt-bg .brand-region-sample,
.public-site .section.alt-bg .muted,
.public-site .section.alt-bg .text-link {
    color: #fff;
}

.public-site .section.alt-bg .muted {
    color: rgba(255,255,255,.79);
}

.public-site .section-head {
    align-items: end;
    margin-bottom: 1.55rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid rgba(22, 35, 47, .15);
}

.public-site .section.alt-bg .section-head {
    border-bottom-color: rgba(255,255,255,.20);
}

.public-site .section-head h2 {
    font-size: clamp(1.8rem, 3.3vw, 2.75rem);
}

.public-site .text-link {
    font-weight: 800;
}

/* Strong dark quote band breaks up lighter page areas. */
.public-site .quote-section {
    position: relative;
    color: #fff;
    background:
        radial-gradient(circle at 82% 15%, rgba(85, 0, 0, .35), transparent 20rem),
        linear-gradient(120deg, var(--public-navy-deep), var(--public-navy-soft));
}

.public-site .pull-quote {
    margin: 0;
    padding: clamp(1.4rem, 3vw, 2.1rem);
    border: 1px solid rgba(255,255,255,.14);
    border-left: 5px solid #550000;
    border-radius: 18px;
    background: rgba(255,255,255,.065);
    box-shadow: 0 18px 34px rgba(0,0,0,.12);
}

.public-site .pull-quote p {
    color: #fff;
}

.public-site .reviews-section {
    background:
        radial-gradient(circle at 95% 0%, rgba(85, 0, 0, .09), transparent 20rem),
        linear-gradient(180deg, #f4eeee, #edf1f4) !important;
}

/* ---- cards: keep color interactions from the old site, upgrade shape ---- */
.public-site .highlight-card,
.public-site .category-card,
.public-site .review-card,
.public-site .brand-tile,
.public-site .product-row,
.public-site .step-card,
.public-site .statement-card,
.public-site .contact-card,
.public-site .location-card {
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(22, 35, 47, .08);
}

.public-site .highlight-card,
.public-site .category-card,
.public-site .brand-tile,
.public-site .step-card,
.public-site .statement-card,
.public-site .contact-card,
.public-site .location-card {
    overflow: hidden;
}

.public-site .highlight-card,
.public-site .category-card,
.public-site .brand-tile,
.public-site .step-card,
.public-site .statement-card,
.public-site .contact-card,
.public-site .location-card,
.public-site .review-card {
    border-color: rgba(22, 35, 47, .13);
}

.public-site .highlight-card:hover,
.public-site .category-card:hover,
.public-site .brand-tile:hover,
.public-site .step-card:hover,
.public-site .statement-card:hover,
.public-site .contact-card:hover,
.public-site .location-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--public-shadow-hover);
}

/* Cards shown on burgundy bands stay crisp and readable. */
.public-site .alt-bg .highlight-card,
.public-site .alt-bg .category-card,
.public-site .alt-bg .brand-tile,
.public-site .alt-bg .contact-card,
.public-site .alt-bg .location-card {
    background: #fff;
    color: var(--public-navy);
    border-color: rgba(255,255,255,.34);
    box-shadow: 0 16px 34px rgba(61, 0, 0, .18);
}

.public-site .alt-bg .highlight-card p,
.public-site .alt-bg .category-card h3,
.public-site .alt-bg .category-card p,
.public-site .alt-bg .brand-tile-name,
.public-site .alt-bg .contact-card h2,
.public-site .alt-bg .contact-card p,
.public-site .alt-bg .contact-card a,
.public-site .alt-bg .location-card h3,
.public-site .alt-bg .location-value,
.public-site .alt-bg .location-label,
.public-site .alt-bg .specialty-chip-name {
    color: var(--public-navy);
}

.public-site .alt-bg .text-link {
    border-bottom-color: rgba(255,255,255,.3);
}

.public-site .highlight-card {
    border-top: 4px solid var(--public-navy);
}

.public-site .category-card {
    border-top: 4px solid var(--public-burgundy);
}

.public-site .category-image {
    border-radius: 12px;
    background: linear-gradient(145deg, #f7f8f9, #e9edef);
}

.public-site .review-card {
    border-top: 4px solid var(--public-burgundy);
    background: #fff;
}

.public-site .review-stars {
    color: #550000;
}

.public-site .reviews-nav {
    border-radius: 12px;
    border-color: rgba(22, 35, 47, .16);
    background: var(--public-navy);
    color: #fff;
    box-shadow: 0 8px 18px rgba(22, 35, 47, .15);
}

.public-site .reviews-nav:hover {
    background: var(--public-burgundy);
}

/* ---- brands ------------------------------------------------------------- */
.public-site .brand-region {
    padding: clamp(1.15rem, 2vw, 1.7rem);
    border: 1px solid rgba(22, 35, 47, .10);
    border-radius: 20px;
    background: rgba(255,255,255,.62);
    box-shadow: 0 12px 30px rgba(22, 35, 47, .06);
}

.public-site .alt-bg .brand-region {
    border-color: rgba(255,255,255,.18);
    background: rgba(61, 0, 0, .18);
    box-shadow: 0 14px 34px rgba(61, 0, 0, .18);
}

.public-site .brand-tile {
    border-top: 3px solid var(--public-burgundy);
}

.public-site .alt-bg .brand-tile:hover,
.public-site .brand-tile:hover {
    color: #fff;
    background: var(--public-navy);
}

.public-site .alt-bg .brand-tile:hover .brand-tile-name,
.public-site .brand-tile:hover .brand-tile-name {
    color: #fff;
}

/* ---- product catalogue -------------------------------------------------- */
.public-site .product-list {
    gap: 1.15rem;
}

.public-site .product-row {
    border: 1px solid rgba(22, 35, 47, .12);
    border-left: 5px solid var(--public-burgundy);
    background: #fff;
    box-shadow: var(--public-shadow);
}

.public-site .product-row:nth-child(even) {
    border-left-color: var(--public-navy);
    background: linear-gradient(120deg, #fff, #eef3f6);
}

.public-site .product-row-image {
    border-radius: 14px;
    background: linear-gradient(145deg, #f4eaea, #eef1f3);
}

.public-site .product-items li::before {
    color: var(--public-burgundy);
}

/* ---- partnership / workshop / about ------------------------------------ */
.public-site .step-card,
.public-site .statement-card {
    border-top: 4px solid var(--public-burgundy);
    background: linear-gradient(145deg, #fff, #f3f5f6);
}

.public-site .step-card:nth-child(even),
.public-site .statement-card:nth-child(even) {
    border-top-color: var(--public-navy);
}

.public-site .step-card:hover,
.public-site .statement-card:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--public-navy), var(--public-navy-soft));
}

.public-site .step-card:hover h3,
.public-site .step-card:hover p,
.public-site .statement-card:hover h3,
.public-site .statement-card:hover p {
    color: #fff;
}

.public-site .photo-band {
    min-height: 440px;
    box-shadow: inset 0 -110px 90px rgba(22, 35, 47, .28);
}

.public-site .photo-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(22, 35, 47, .16), transparent 55%, rgba(85, 0, 0, .15));
    pointer-events: none;
}

.public-site .photo-band-caption {
    z-index: 2;
    max-width: 48ch;
    padding: 1.2rem 1.5rem;
    border: 1px solid rgba(255,255,255,.18);
    border-left: 5px solid #550000;
    border-radius: 16px;
    background: rgba(22, 35, 47, .88);
    box-shadow: 0 16px 36px rgba(0,0,0,.24);
    backdrop-filter: blur(5px);
}

/* ---- contact ------------------------------------------------------------ */
.public-site .contact-card,
.public-site .location-card {
    border-top-width: 4px;
}

.public-site .contact-card:nth-child(even),
.public-site .location-card:nth-child(even) {
    border-top-color: var(--public-burgundy);
}

.public-site .contact-form {
    max-width: 620px;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(22, 35, 47, .12);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--public-shadow);
}

.public-site .form-field input,
.public-site .form-field textarea,
.public-site .form-field select,
.public-site .category-select {
    border-radius: 10px;
    background: #f8fafb;
}

.public-site .form-field input:focus,
.public-site .form-field textarea:focus,
.public-site .form-field select:focus,
.public-site .category-select:focus {
    border-color: var(--public-burgundy);
    box-shadow: 0 0 0 3px rgba(85, 0, 0, .10);
}

/* ---- CTA + footer -------------------------------------------------------- */
.public-site .cta-band {
    color: #fff;
    background:
        radial-gradient(circle at 90% 20%, rgba(85, 0, 0, .42), transparent 18rem),
        linear-gradient(110deg, var(--public-navy-deep), var(--public-navy) 72%);
}

.public-site .cta-band .bg-pattern {
    opacity: .11;
}

.public-site .cta-band-inner {
    padding-block: .4rem;
}

.public-site .btn {
    border-radius: 10px;
}

.public-site .btn-primary {
    background: var(--public-burgundy);
    box-shadow: 0 9px 22px rgba(85, 0, 0, .24);
}

.public-site .btn-primary:hover {
    background: var(--public-burgundy-deep);
}

.public-site .site-footer {
    background:
        radial-gradient(circle at 20% -10%, rgba(85, 0, 0, .34), transparent 18rem),
        var(--public-navy-deep);
    border-top: 4px solid var(--public-burgundy);
}

.public-site .site-footer .bg-pattern {
    opacity: .09;
}

/* ---- RTL + responsive --------------------------------------------------- */
[dir="rtl"] .public-site .page-header h1,
[dir="rtl"] .public-site .page-lede {
    padding-right: 0;
}

@media (max-width: 899px) {
    .public-site .site-nav {
        background: linear-gradient(145deg, var(--public-navy-deep), var(--public-navy));
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 0 0 16px 16px;
        box-shadow: 0 18px 36px rgba(22, 35, 47, .28);
    }

    .public-site .nav-link {
        width: 100%;
        padding: .72rem .85rem;
        text-align: start;
    }

    .public-site .nav-cta-group {
        width: 100%;
    }
}

@media (max-width: 959px) {
    .public-site .hero-grid {
        min-height: auto;
        padding: clamp(1.5rem, 5vw, 2.6rem);
    }

    .public-site .hero-art {
        min-height: 270px;
    }
}

@media (max-width: 640px) {
    .public-site .page-header {
        padding-block: 1.7rem;
    }

    .public-site .hero-grid {
        border-radius: 20px;
    }

    .public-site .hero h1 {
        font-size: clamp(2.25rem, 13vw, 3.5rem);
    }

    .public-site .photo-band {
        min-height: 350px;
        padding: 1rem;
    }

    .public-site .contact-form {
        padding: 1.1rem;
    }
}

/* ========================================================================== 
   Public-site polish pass — 2026-09-18
   Targeted fixes requested after the hybrid redesign.
   Keeps the existing public look and the Staff/VIN workspaces unchanged.
   ========================================================================== */

/* 1) Home hero: keep the strong navy/burgundy presentation, but remove the
   large rounded panel around the tagline.  The color now belongs to the whole
   hero section, so the headline reads as part of the page rather than a pill. */
.public-site .hero {
    background:
        radial-gradient(circle at 84% 18%, rgba(85, 0, 0, .30), transparent 24rem),
        radial-gradient(circle at 8% 0%, rgba(255, 255, 255, .08), transparent 21rem),
        linear-gradient(120deg, var(--public-navy-deep) 0%, var(--public-navy) 62%, #24384a 100%);
}

.public-site .hero-grid {
    min-height: 520px;
    padding: clamp(2rem, 5vw, 4.25rem) 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.public-site .hero-grid::before {
    display: none;
}

/* 2) Home highlight cards: explicit normal + hover colors avoid white-on-white
   text caused by the old card hover rules colliding with the newer alt-band
   overrides. */
.public-site .section.alt-bg.highlights .highlight-card {
    background: #fff;
    color: var(--public-navy);
    border-color: rgba(255, 255, 255, .42);
}

.public-site .section.alt-bg.highlights .highlight-card p {
    color: var(--public-navy);
}

.public-site .section.alt-bg.highlights .highlight-card .highlight-mark {
    color: var(--public-burgundy);
}

.public-site .section.alt-bg.highlights .highlight-card:hover {
    background: var(--public-navy);
    border-color: rgba(255, 255, 255, .34);
}

.public-site .section.alt-bg.highlights .highlight-card:hover p,
.public-site .section.alt-bg.highlights .highlight-card:hover .highlight-mark {
    color: #fff;
}

.public-site .section.alt-bg.highlights .highlight-card:hover .highlight-mark {
    background: rgba(255, 255, 255, .12);
}

/* 3) Home-page brand names: retain the existing logo/name treatment, but put
   each brand into a compact pill so the burgundy section reads cleanly. */
.public-site .section.alt-bg.brands-teaser .brand-teaser-chips {
    flex-direction: column;
    align-items: flex-start;
    gap: .48rem;
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip {
    width: fit-content;
    max-width: 100%;
    min-height: 36px;
    padding: .38rem .72rem .38rem .5rem;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 5px 14px rgba(61, 0, 0, .12);
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip-name {
    color: var(--public-navy);
    font-weight: 700;
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip-logo {
    width: 1.55rem;
    height: 1.55rem;
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip-badge {
    width: 1.55rem;
    height: 1.55rem;
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, .50);
    background: var(--public-navy);
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip:hover .specialty-chip-name {
    color: #fff;
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip:hover .specialty-chip-badge {
    background: #fff;
    color: var(--public-burgundy);
}

/* 4) Brands page: compact the cards into actual brand pills.  Smaller minimum
   width + smaller gaps lets all eight Japanese brands sit on one row on normal
   desktop widths without making the mobile layout cramped. */
.public-site .brand-region {
    padding: clamp(.95rem, 1.7vw, 1.35rem);
}

.public-site .brand-region-title {
    margin-bottom: .9rem;
}

.public-site .brand-tile-grid {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: .55rem;
}

.public-site .brand-tile {
    min-height: 48px;
    flex-direction: row;
    justify-content: flex-start;
    gap: .48rem;
    padding: .55rem .7rem;
    border: 1px solid rgba(22, 35, 47, .13);
    border-top: 1px solid rgba(22, 35, 47, .13);
    border-radius: 999px;
    text-align: left;
    box-shadow: 0 5px 13px rgba(22, 35, 47, .055);
}

.public-site .brand-tile-logo {
    width: 2.15rem;
    height: 2.15rem;
}

.public-site .brand-tile-badge {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: .76rem;
}

.public-site .brand-tile-name {
    min-width: 0;
    font-size: .77rem;
    font-weight: 700;
    line-height: 1.15;
}

.public-site .brand-tile:hover,
.public-site .alt-bg .brand-tile:hover {
    background: var(--public-navy);
    border-color: var(--public-navy);
    transform: translateY(-2px);
    box-shadow: 0 9px 18px rgba(22, 35, 47, .16);
}

.public-site .brand-tile:hover .brand-tile-name,
.public-site .alt-bg .brand-tile:hover .brand-tile-name {
    color: #fff;
}

@media (max-width: 719px) {
    .public-site .brand-tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }
}

/* 5) Review hover: the newer white-card rule was winning over the old hover
   background while the text still changed to white.  Define the whole hover
   state together so it can never become white text on a white card. */
.public-site .reviews-section .review-card:hover {
    background: linear-gradient(145deg, var(--public-burgundy), #550000);
    border-color: var(--public-burgundy);
    transform: translateY(-6px);
    box-shadow: 0 18px 34px rgba(61, 0, 0, .20);
}

.public-site .reviews-section .review-card:hover .review-stars,
.public-site .reviews-section .review-card:hover .review-text,
.public-site .reviews-section .review-card:hover .review-author {
    color: #fff;
}

/* 6) Location cards: the generic white-text rule for burgundy sections was
   more specific than the location-value rule.  Pin every piece of card copy to
   navy while the card is white and switch it together on hover. */
.public-site .section.alt-bg .location-card {
    background: #fff;
    color: var(--public-navy);
}

.public-site .section.alt-bg .location-card h3,
.public-site .section.alt-bg .location-card .location-label,
.public-site .section.alt-bg .location-card .location-value,
.public-site .section.alt-bg .location-card .location-value a,
.public-site .section.alt-bg .location-card .specialty-chip-name {
    color: var(--public-navy);
}

.public-site .section.alt-bg .location-card .location-value {
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.public-site .section.alt-bg .location-card:hover {
    background: var(--public-navy);
    border-color: rgba(255, 255, 255, .34);
}

.public-site .section.alt-bg .location-card:hover h3,
.public-site .section.alt-bg .location-card:hover .location-label,
.public-site .section.alt-bg .location-card:hover .location-value,
.public-site .section.alt-bg .location-card:hover .location-value a,
.public-site .section.alt-bg .location-card:hover .specialty-chip-name,
.public-site .section.alt-bg .location-card:hover .location-map-links a {
    color: #fff;
}

.public-site .section.alt-bg .location-card:hover .location-label {
    color: rgba(255, 255, 255, .72);
}

.public-site .section.alt-bg .location-card:hover .location-map-links {
    border-top-color: rgba(255, 255, 255, .22);
}

/* Home pull-quote readability: keep the quote on a deliberately dark surface
   even if another section background rule is introduced later. */
.public-site .section.quote-section {
    background:
        radial-gradient(circle at 82% 15%, rgba(85, 0, 0, .34), transparent 20rem),
        linear-gradient(120deg, var(--public-navy-deep), var(--public-navy-soft)) !important;
}

.public-site .section.quote-section .pull-quote {
    background: rgba(22, 35, 47, .78);
    border-color: rgba(255, 255, 255, .16);
    border-left-color: #550000;
}

.public-site .section.quote-section .pull-quote p {
    color: #fff;
}

/* ========================================================================== 
   Home visual alignment + Brands teaser correction — 2026-09-18
   ========================================================================== */

/* Match the dimensional navy -> burgundy color treatment used by the inner
   page headers.  Home keeps its unique layout, but now shares the same color
   language and lower accent edge as the rest of the public site. */
.public-site .hero {
    position: relative;
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, .10), transparent 15rem),
        linear-gradient(115deg,
            var(--public-navy-deep) 0%,
            var(--public-navy) 58%,
            #16232f 72%,
            var(--public-burgundy-deep) 100%);
}

.public-site .hero::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: auto 0 0 0;
    height: 5px;
    pointer-events: none;
    background: linear-gradient(90deg,
        var(--public-burgundy),
        #550000 42%,
        rgba(255, 255, 255, .28));
}

.public-site .hero > .container,
.public-site .hero > .hero-accent {
    position: relative;
    z-index: 1;
}

/* Brands We Handle on Home:
   ONE large rounded shell around the original regional layout.  Individual
   brands deliberately return to the old logo + text rows — no mini pills. */
.public-site .section.alt-bg.brands-teaser .brand-teaser-list {
    position: relative;
    padding: clamp(1.25rem, 2.6vw, 2rem) clamp(1.1rem, 2.8vw, 2.2rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 30px;
    background:
        radial-gradient(circle at 92% 0%, rgba(255, 255, 255, .07), transparent 14rem),
        rgba(61, 0, 0, .16);
    box-shadow: 0 18px 42px rgba(61, 0, 0, .18);
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-column {
    min-width: 0;
    padding-block: .2rem;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-column:not(:first-child) {
    border-inline-start: 1px solid rgba(255, 255, 255, .18);
}

.public-site .section.alt-bg.brands-teaser .brand-region-name {
    color: #fff;
    font-size: clamp(.88rem, 1.2vw, 1.05rem);
    font-weight: 800;
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .72rem;
}

/* Undo the individual brand-pill treatment from the previous pass. */
.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip {
    display: flex;
    width: 100%;
    min-height: 0;
    max-width: none;
    align-items: center;
    gap: .55rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    transition: transform .16s ease, opacity .16s ease;
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip-name {
    color: #fff;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.25;
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip-logo {
    width: 1.55rem;
    height: 1.55rem;
    object-fit: contain;
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip-badge {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, .13);
    color: #fff;
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: translateX(3px);
    opacity: .92;
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip:hover .specialty-chip-name {
    color: #fff;
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip:hover .specialty-chip-badge {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-more-inline {
    color: rgba(255, 255, 255, .70);
}

@media (max-width: 900px) {
    .public-site .section.alt-bg.brands-teaser .brand-teaser-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.35rem;
        border-radius: 24px;
    }

    .public-site .section.alt-bg.brands-teaser .brand-teaser-column,
    .public-site .section.alt-bg.brands-teaser .brand-teaser-column:not(:first-child) {
        padding-inline: 0;
        border-inline-start: 0;
    }
}

@media (max-width: 560px) {
    .public-site .section.alt-bg.brands-teaser .brand-teaser-list {
        grid-template-columns: 1fr;
        padding: 1.15rem;
    }

    .public-site .section.alt-bg.brands-teaser .brand-teaser-column + .brand-teaser-column {
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, .16);
    }
}

/* ========================================================================
   2026-09-19 visual refinements
   Brands + Products use alternating white / burgundy pills.
   ======================================================================== */

/* Brands page: alternate each compact brand pill white / burgundy. */
.public-site .brand-tile-grid .brand-tile:nth-child(odd) {
    background: #fff;
    border-color: rgba(22, 35, 47, .13);
    color: var(--public-navy);
}

.public-site .brand-tile-grid .brand-tile:nth-child(odd) .brand-tile-name {
    color: var(--public-navy);
}

.public-site .brand-tile-grid .brand-tile:nth-child(even) {
    background: linear-gradient(135deg, var(--public-burgundy), #550000);
    border-color: var(--public-burgundy);
    color: #fff;
    box-shadow: 0 7px 16px rgba(85, 0, 0, .14);
}

.public-site .brand-tile-grid .brand-tile:nth-child(even) .brand-tile-name {
    color: #fff;
}

/* Keep logos crisp/legible on the dark pill without changing the logo itself. */
.public-site .brand-tile-grid .brand-tile:nth-child(even) .brand-tile-logo {
    padding: .18rem;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
}

.public-site .brand-tile-grid .brand-tile:nth-child(even) .brand-tile-badge {
    background: #fff;
    color: var(--public-burgundy);
}

.public-site .brand-tile-grid .brand-tile:nth-child(odd):hover,
.public-site .brand-tile-grid .brand-tile:nth-child(even):hover,
.public-site .alt-bg .brand-tile-grid .brand-tile:nth-child(odd):hover,
.public-site .alt-bg .brand-tile-grid .brand-tile:nth-child(even):hover {
    background: var(--public-navy);
    border-color: var(--public-navy);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(22, 35, 47, .18);
}

.public-site .brand-tile-grid .brand-tile:hover .brand-tile-name,
.public-site .alt-bg .brand-tile-grid .brand-tile:hover .brand-tile-name {
    color: #fff;
}

/* Products page: restore the strong alternating white / burgundy catalogue
   treatment, but keep the newer rounded-card spacing and polish. */
.public-site .product-list {
    gap: 1rem;
}

.public-site .product-row {
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(22, 35, 47, .12);
    box-shadow: var(--public-shadow);
}

.public-site .product-row:nth-child(odd) {
    background: linear-gradient(135deg, var(--public-burgundy), #550000);
    border-color: rgba(255,255,255,.08);
    border-left: 5px solid #fff;
    color: #fff;
}

.public-site .product-row:nth-child(odd) .product-row-head h2,
.public-site .product-row:nth-child(odd) .category-mini-icon {
    color: #fff;
}

.public-site .product-row:nth-child(odd) .product-row-image {
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 22px rgba(61, 0, 0, .16);
}

.public-site .product-row:nth-child(odd) .product-items li {
    background: #fff;
    color: var(--public-navy);
}

.public-site .product-row:nth-child(odd) .product-items li:hover {
    background: var(--public-navy);
    color: #fff;
}

.public-site .product-row:nth-child(even) {
    background: #fff;
    border-color: rgba(22, 35, 47, .12);
    border-left: 5px solid var(--public-burgundy);
    color: var(--public-navy);
}

.public-site .product-row:nth-child(even) .product-row-head h2,
.public-site .product-row:nth-child(even) .category-mini-icon {
    color: var(--public-navy);
}

.public-site .product-row:nth-child(even) .product-items li {
    background: #f2f4f5;
    color: var(--public-navy);
}

.public-site .product-row:nth-child(even) .product-items li:hover {
    background: var(--public-burgundy);
    color: #fff;
}

/* ========================================================================
   2026-09-19 corrections
   - Remove decorative Home hero corner triangle.
   - Make Home kicker pill white with black text.
   - Revert Brands page to the original larger all-white brand cards.
   Products-page alternating treatment intentionally remains unchanged.
   ======================================================================== */

/* Home: remove the decorative red corner triangle in both LTR and RTL. */
.public-site .hero-accent,
[dir="rtl"] .public-site .hero-accent {
    display: none !important;
}

/* Home: white "EASPC • SINCE 1998" pill with black text. */
.public-site .hero-kicker {
    color: #111 !important;
    background: #fff !important;
    border-color: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .10);
}

/* Brands page: restore the original spacious card proportions. */
.public-site .brand-region {
    padding: clamp(1.15rem, 2vw, 1.7rem);
}

.public-site .brand-region-title {
    margin-bottom: 1rem;
}

.public-site .brand-tile-grid {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 1rem;
}

.public-site .brand-tile-grid .brand-tile,
.public-site .brand-tile-grid .brand-tile:nth-child(odd),
.public-site .brand-tile-grid .brand-tile:nth-child(even),
.public-site .alt-bg .brand-tile-grid .brand-tile,
.public-site .alt-bg .brand-tile-grid .brand-tile:nth-child(odd),
.public-site .alt-bg .brand-tile-grid .brand-tile:nth-child(even) {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 2rem 1rem;
    background: #fff;
    color: var(--public-navy);
    border: 1px solid rgba(22, 35, 47, .13);
    border-top: 3px solid var(--public-burgundy);
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 28px rgba(22, 35, 47, .08);
}

.public-site .brand-tile-grid .brand-tile-logo,
.public-site .brand-tile-grid .brand-tile:nth-child(even) .brand-tile-logo {
    width: 5rem;
    height: 5rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
}

.public-site .brand-tile-grid .brand-tile-badge,
.public-site .brand-tile-grid .brand-tile:nth-child(even) .brand-tile-badge {
    width: 3rem;
    height: 3rem;
    border-radius: 10px;
    background: var(--public-navy);
    color: #fff;
    font-size: 1.15rem;
}

.public-site .brand-tile-grid .brand-tile-name,
.public-site .brand-tile-grid .brand-tile:nth-child(odd) .brand-tile-name,
.public-site .brand-tile-grid .brand-tile:nth-child(even) .brand-tile-name,
.public-site .alt-bg .brand-tile-grid .brand-tile-name {
    margin-top: .7rem;
    color: var(--public-navy);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

/* Restore the original hover behavior: burgundy on light sections, navy on
   burgundy sections. */
.public-site .brand-tile-grid .brand-tile:hover,
.public-site .brand-tile-grid .brand-tile:nth-child(odd):hover,
.public-site .brand-tile-grid .brand-tile:nth-child(even):hover {
    background: var(--public-burgundy);
    border-color: var(--public-burgundy);
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 16px 30px rgba(22, 35, 47, .18);
}

.public-site .alt-bg .brand-tile-grid .brand-tile:hover,
.public-site .alt-bg .brand-tile-grid .brand-tile:nth-child(odd):hover,
.public-site .alt-bg .brand-tile-grid .brand-tile:nth-child(even):hover {
    background: var(--public-navy);
    border-color: var(--public-navy);
}

.public-site .brand-tile-grid .brand-tile:hover .brand-tile-name,
.public-site .alt-bg .brand-tile-grid .brand-tile:hover .brand-tile-name {
    color: #fff;
}

.public-site .brand-tile-grid .brand-tile:hover .brand-tile-badge {
    background: #fff;
    color: var(--public-burgundy);
}

.public-site .alt-bg .brand-tile-grid .brand-tile:hover .brand-tile-badge {
    color: var(--public-navy);
}

@media (max-width: 719px) {
    .public-site .brand-tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    .public-site .brand-tile-grid .brand-tile {
        padding: 1.35rem .8rem;
    }

    .public-site .brand-tile-grid .brand-tile-logo {
        width: 4rem;
        height: 4rem;
    }
}

/* ========================================================================
   2026-09-19 Home hero vertical spacing refinement
   Reduce only the empty space above the kicker and below the statistics row.
   Horizontal spacing, typography, artwork sizing and internal component gaps
   remain unchanged.
   ======================================================================== */
.public-site .hero {
    padding-block: clamp(.6rem, 1vw, 1rem);
}

.public-site .hero-grid {
    min-height: 0;
    padding-block: clamp(1.2rem, 2vw, 2rem);
}

@media (max-width: 959px) {
    .public-site .hero {
        padding-block: .75rem;
    }

    .public-site .hero-grid {
        padding-block: 1.35rem;
    }
}

/* ========================================================================
   2026-09-19 Brands page region width refinement
   Keep the approved large brand-card proportions, but give each country /
   region pill more horizontal room so all eight Japanese brands fit on one
   row on normal desktop widths. Smaller screens retain responsive wrapping.
   ======================================================================== */
.public-site .brands-region-container {
    max-width: 1460px;
}

@media (min-width: 1200px) {
    .public-site .brands-region-container .brand-tile-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

@media (min-width: 720px) and (max-width: 1199px) {
    .public-site .brands-region-container {
        max-width: calc(100% - 1rem);
    }
}


/* ========================================================================
   2026-09-19 catalogue + gradient consolidation
   Final visual direction:
   - Public page headers and Home hero: burgundy -> navy -> burgundy.
   - Brands and Products catalogue areas share one burgundy background.
   - Brands alternate the large REGION containers (not individual brands).
   - Home Brands We Handle shell is white with dark copy.
   ======================================================================== */

/* Symmetric public-page color transition: burgundy -> navy -> burgundy. */
.public-site .page-header {
    background:
        radial-gradient(circle at 50% 5%, rgba(255,255,255,.08), transparent 17rem),
        linear-gradient(115deg,
            var(--public-burgundy-deep) 0%,
            #550000 15%,
            var(--public-navy-deep) 38%,
            var(--public-navy) 58%,
            #16232f 70%,
            var(--public-burgundy-deep) 100%);
}

.public-site .hero {
    background:
        radial-gradient(circle at 50% 5%, rgba(255,255,255,.07), transparent 19rem),
        linear-gradient(115deg,
            var(--public-burgundy-deep) 0%,
            #550000 14%,
            var(--public-navy-deep) 37%,
            var(--public-navy) 58%,
            #16232f 70%,
            var(--public-burgundy-deep) 100%);
}

/* Home Brands We Handle: the single large shell is white, while the page
   section behind it remains burgundy. Individual brands remain plain rows. */
.public-site .section.alt-bg.brands-teaser .brand-teaser-list {
    border-color: rgba(22, 35, 47, .12);
    background: #fff;
    box-shadow: 0 18px 42px rgba(61, 0, 0, .20);
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-column:not(:first-child) {
    border-inline-start-color: rgba(22, 35, 47, .14);
}

.public-site .section.alt-bg.brands-teaser .brand-region-name,
.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip-name {
    color: var(--public-navy);
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip-badge {
    background: #eef2f5;
    color: var(--public-navy);
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-more-inline {
    color: rgba(22, 35, 47, .62);
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip:hover {
    opacity: 1;
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip:hover .specialty-chip-name {
    color: var(--public-burgundy);
}

.public-site .section.alt-bg.brands-teaser .brand-teaser-chips .specialty-chip:hover .specialty-chip-badge {
    background: #f4e9e9;
    color: var(--public-burgundy);
}

@media (max-width: 560px) {
    .public-site .section.alt-bg.brands-teaser .brand-teaser-column + .brand-teaser-column {
        border-top-color: rgba(22, 35, 47, .12);
    }
}

/* Shared catalogue canvas for Brands and Products. */
.public-site .section.brands-catalogue-section:not(.alt-bg):not(.cta-band),
.public-site .section.products-catalogue-section:not(.alt-bg):not(.cta-band) {
    color: #fff;
    background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(125deg, var(--public-burgundy-deep), var(--public-burgundy) 68%, #550000);
    background-size: 34px 34px, 34px 34px, auto;
}

/* Brands page: one continuous burgundy background with alternating large
   country/region pills. The individual brand cards remain the approved large
   white cards in every region. */
.public-site .brands-catalogue-intro,
.public-site .brands-catalogue-outro {
    color: #fff;
}

.public-site .brands-catalogue-intro {
    margin-bottom: clamp(1.25rem, 2vw, 1.8rem);
}

.public-site .brands-catalogue-outro {
    margin-top: clamp(1.4rem, 2.4vw, 2rem);
}

.public-site .brands-catalogue-intro p,
.public-site .brands-catalogue-outro h2,
.public-site .brands-catalogue-outro p {
    color: #fff;
}

.public-site .brands-catalogue-stack {
    max-width: 1460px;
    display: grid;
    gap: clamp(1rem, 1.8vw, 1.4rem);
}

.public-site .brands-catalogue-section .brand-region {
    margin: 0;
    padding: clamp(1.35rem, 2.1vw, 1.9rem);
    border-radius: 30px;
    overflow: hidden;
}

.public-site .brands-catalogue-section .brand-region.brand-region-light {
    border: 1px solid rgba(22, 35, 47, .12);
    background: #fff;
    box-shadow: 0 16px 36px rgba(61, 0, 0, .16);
}

.public-site .brands-catalogue-section .brand-region.brand-region-dark {
    border: 1px solid rgba(255,255,255,.24);
    background:
        radial-gradient(circle at 92% 0%, rgba(255,255,255,.07), transparent 14rem),
        linear-gradient(135deg, #3d0000, #550000 58%, #550000);
    box-shadow: 0 16px 36px rgba(61, 0, 0, .24);
}

.public-site .brands-catalogue-section .brand-region-light .brand-region-title h2 {
    color: var(--public-navy);
}

.public-site .brands-catalogue-section .brand-region-light .brand-region-title::before {
    background: var(--public-burgundy);
}

.public-site .brands-catalogue-section .brand-region-dark .brand-region-title h2 {
    color: #fff;
}

.public-site .brands-catalogue-section .brand-region-dark .brand-region-title::before {
    background: #fff;
}

/* Brand cards stay white in both outer-pill colors. */
.public-site .brands-catalogue-section .brand-tile-grid .brand-tile,
.public-site .brands-catalogue-section .brand-tile-grid .brand-tile:nth-child(odd),
.public-site .brands-catalogue-section .brand-tile-grid .brand-tile:nth-child(even) {
    background: #f2f4f5;
    color: var(--public-navy);
    border: 1px solid rgba(22, 35, 47, .13);
    border-top: 3px solid var(--public-burgundy);
    box-shadow: 0 10px 28px rgba(22, 35, 47, .09);
}

.public-site .brands-catalogue-section .brand-tile-grid .brand-tile-name,
.public-site .brands-catalogue-section .brand-tile-grid .brand-tile:nth-child(odd) .brand-tile-name,
.public-site .brands-catalogue-section .brand-tile-grid .brand-tile:nth-child(even) .brand-tile-name {
    color: var(--public-navy);
}

.public-site .brands-catalogue-section .brand-tile-grid .brand-tile-logo,
.public-site .brands-catalogue-section .brand-tile-grid .brand-tile:nth-child(even) .brand-tile-logo {
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.public-site .brands-catalogue-section .brand-tile-grid .brand-tile:hover,
.public-site .brands-catalogue-section .brand-tile-grid .brand-tile:nth-child(odd):hover,
.public-site .brands-catalogue-section .brand-tile-grid .brand-tile:nth-child(even):hover {
    background: var(--public-navy);
    border-color: var(--public-navy);
    color: #fff;
}

.public-site .brands-catalogue-section .brand-tile-grid .brand-tile:hover .brand-tile-name {
    color: #fff;
}

@media (min-width: 1200px) {
    .public-site .brands-catalogue-stack .brand-tile-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

/* Products page: keep the approved alternating large white / burgundy product
   pills, but place the entire catalogue on the same burgundy canvas as Brands. */
.public-site .products-catalogue-section .product-list {
    gap: clamp(1rem, 1.8vw, 1.35rem);
}

.public-site .products-catalogue-section .product-row:nth-child(odd) {
    border-color: rgba(255,255,255,.22);
    border-left-color: #fff;
    background:
        radial-gradient(circle at 92% 0%, rgba(255,255,255,.07), transparent 13rem),
        linear-gradient(135deg, #3d0000, #550000 58%, #550000);
    box-shadow: 0 18px 36px rgba(61, 0, 0, .22);
}

.public-site .products-catalogue-section .product-row:nth-child(even) {
    border-color: rgba(22, 35, 47, .12);
    border-left-color: var(--public-burgundy);
    background: #fff;
    box-shadow: 0 16px 34px rgba(61, 0, 0, .16);
}

/* ========================================================================
   2026-09-19 final background refinements
   - Symmetric maroon -> navy -> maroon public headers/home hero.
   - Home highlights + partner quote share one continuous navy theme.
   - Brands + Products catalogue canvases return to the light gray/white base.
   ======================================================================== */

/* Narrow, mirrored maroon edges so the left and right transitions match. */
.public-site .page-header,
.public-site .hero {
    background:
        radial-gradient(circle at 50% 4%, rgba(255,255,255,.07), transparent 18rem),
        linear-gradient(
            90deg,
            var(--public-burgundy-deep) 0%,
            #550000 10%,
            var(--public-navy-deep) 24%,
            var(--public-navy) 50%,
            var(--public-navy-deep) 76%,
            #550000 90%,
            var(--public-burgundy-deep) 100%
        );
}

/* Home: make the highlight cards and quote read as one navy visual band. */
.public-site .section.alt-bg.highlights,
.public-site .section.quote-section {
    color: #fff;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(110deg, var(--public-navy-deep), var(--public-navy-soft));
    background-size: 34px 34px, 34px 34px, auto;
}

.public-site .section.alt-bg.highlights {
    padding-bottom: clamp(1.25rem, 2.2vw, 2rem);
}

.public-site .section.quote-section {
    padding-top: clamp(1.25rem, 2.2vw, 2rem);
}

.public-site .section.alt-bg.highlights .highlight-card {
    background: #fff;
    color: var(--public-navy);
    border-color: rgba(255,255,255,.26);
    box-shadow: 0 14px 30px rgba(22, 35, 47, .20);
}

.public-site .section.alt-bg.highlights .highlight-card p {
    color: var(--public-navy);
}

/* Restore the light catalogue canvas used before the burgundy consolidation. */
.public-site .section.brands-catalogue-section:not(.alt-bg):not(.cta-band),
.public-site .section.products-catalogue-section:not(.alt-bg):not(.cta-band) {
    color: var(--public-navy);
    background:
        radial-gradient(circle at 92% 8%, rgba(85, 0, 0, .045), transparent 24rem),
        radial-gradient(circle at 8% 0%, rgba(22, 35, 47, .045), transparent 26rem),
        linear-gradient(180deg, #f5f7f8 0%, #edf1f4 100%);
}

.public-site .brands-catalogue-intro,
.public-site .brands-catalogue-outro,
.public-site .brands-catalogue-intro p,
.public-site .brands-catalogue-outro h2,
.public-site .brands-catalogue-outro p {
    color: var(--public-navy);
}

/* Keep the existing alternating region/product card treatment on the light canvas. */
.public-site .brands-catalogue-section .brand-region.brand-region-light {
    box-shadow: 0 16px 36px rgba(22, 35, 47, .10);
}

.public-site .brands-catalogue-section .brand-region.brand-region-dark,
.public-site .products-catalogue-section .product-row:nth-child(odd) {
    box-shadow: 0 18px 36px rgba(85, 0, 0, .18);
}

.public-site .products-catalogue-section .product-row:nth-child(even) {
    box-shadow: 0 16px 34px rgba(22, 35, 47, .10);
}

/* ========================================================================
   2026-09-19 precision correction
   - Home hero: preserve the earlier, narrower right-side burgundy transition
     and mirror that same transition onto the left.
   - Home highlights + quote: force one identical navy surface so the older
     quote-section !important background can no longer split the visual band.
   ======================================================================== */

/* Mirror the old RIGHT transition exactly: burgundy -> #16232f -> navy,
   then hold navy through the center before mirroring back out. */
.public-site .hero {
    background:
        radial-gradient(circle at 50% 4%, rgba(255,255,255,.07), transparent 18rem),
        linear-gradient(
            90deg,
            var(--public-burgundy-deep) 0%,
            #16232f 28%,
            var(--public-navy) 42%,
            var(--public-navy) 58%,
            #16232f 72%,
            var(--public-burgundy-deep) 100%
        );
}

/* Use the exact same surface on both adjacent Home sections.  !important is
   deliberate here because an older quote-section rule also used !important. */
.public-site .section.alt-bg.highlights,
.public-site .section.quote-section {
    color: #fff;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(110deg, var(--public-navy-deep), var(--public-navy-soft)) !important;
    background-size: 34px 34px, 34px 34px, auto !important;
    background-position: 0 0, 0 0, 0 0 !important;
}

/* ========================================================================
   2026-09-19 structural home-band + unified public hero correction
   - All public page headers use the same narrow mirrored edge transition as Home.
   - Home highlights and partner quote are painted by ONE parent background.
   ======================================================================== */

/* One shared gradient language for Home and every public inner-page hero. */
.public-site .hero,
.public-site .page-header {
    background:
        radial-gradient(circle at 50% 4%, rgba(255,255,255,.07), transparent 18rem),
        linear-gradient(
            90deg,
            var(--public-burgundy-deep) 0%,
            #16232f 28%,
            var(--public-navy) 42%,
            var(--public-navy) 58%,
            #16232f 72%,
            var(--public-burgundy-deep) 100%
        ) !important;
}

/* One physical section/background for the Home value + partnership content. */
.public-site .home-partnership-band {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(110deg, var(--public-navy-deep), var(--public-navy-soft));
    background-size: 34px 34px, 34px 34px, auto;
    background-position: 0 0, 0 0, 0 0;
}

/* Child blocks must not paint their own surfaces; this is what removes the seam. */
.public-site .home-partnership-band > .section.highlights,
.public-site .home-partnership-band > .section.quote-section {
    background: transparent !important;
    background-image: none !important;
}

.public-site .home-partnership-band > .section.highlights {
    padding-bottom: clamp(1rem, 1.7vw, 1.55rem);
}

.public-site .home-partnership-band > .section.quote-section {
    padding-top: clamp(1rem, 1.7vw, 1.55rem);
}

.public-site .home-partnership-band .highlight-card {
    background: #fff;
    color: var(--public-navy);
    border-color: rgba(255,255,255,.26);
    box-shadow: 0 14px 30px rgba(22, 35, 47, .20);
}

.public-site .home-partnership-band .highlight-card p {
    color: var(--public-navy);
}