/* ============================================================================================
   Novalie premium public experience
   This layer is intentionally presentation-only. All copy, links, images and records continue
   to come from the existing Admin-managed services and shared Blazor components.
   ============================================================================================ */

/* -- Products catalogue hero --------------------------------------------------------------- */

.page-header-products {
    min-height: clamp(20rem, 27vw, 32rem);
    display: flex;
    align-items: stretch;
    padding-block: clamp(3rem, 6vw, 5rem);
    background:
        radial-gradient(circle at 82% 32%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 30%),
        linear-gradient(125deg, color-mix(in srgb, var(--primary-800) 40%, #000) 0%, color-mix(in srgb, var(--primary) 58%, #000) 52%, color-mix(in srgb, var(--accent-800) 70%, #000) 100%);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.12);
}

.products-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(115deg, #171028, #eef4f7 74%);
}

.products-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, color-mix(in srgb, color-mix(in srgb, var(--primary-800) 45%, #000) 94%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--primary-800) 80%, #000) 74%, transparent) 34%, color-mix(in srgb, var(--accent-800) 22%, transparent) 67%, color-mix(in srgb, var(--accent-800) 8%, transparent) 100%),
        linear-gradient(0deg,rgba(10,7,25,.32),transparent 52%);
    animation: products-hero-overlay-in 1s ease-out both;
}

.products-hero-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 48%;
    transform: scale(1.045);
    filter: saturate(1.06) contrast(1.025);
}

.page-header-products::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: clamp(16rem, 32vw, 34rem);
    aspect-ratio: 1;
    inset-inline-end: -8%;
    inset-block-start: -48%;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow:
        0 0 0 3.5rem rgba(255,255,255,.025),
        0 0 0 8rem rgba(255,255,255,.018);
    animation: products-hero-orbit 13s ease-in-out infinite alternate;
    pointer-events: none;
}

.page-header-products::before {
    opacity: .42;
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, #000, transparent 62%);
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 62%);
}

.products-hero-container {
    position: relative;
    z-index: 4;
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
}

.products-hero-copy {
    align-self: end;
    display: grid;
    justify-items: start;
    gap: clamp(1rem, 2vw, 1.4rem);
    max-width: 43rem;
    padding-block-start: clamp(3rem, 7vw, 6rem);
}

.products-hero-container > *,
.products-hero-copy > * {
    animation: products-hero-content-in .75s cubic-bezier(.2,.75,.2,1) both;
}
.products-hero-copy > h1 { animation-delay: .08s; }
.products-hero-copy > .lead { animation-delay: .16s; }

.page-header-products h1 {
    max-width: 12ch;
    margin: 0;
    font-size: clamp(2.8rem, 5.4vw, 5.1rem) !important;
    line-height: .95;
    letter-spacing: -.055em;
    text-shadow: 0 .25rem 1.5rem rgba(16,7,28,.42);
}

.page-header-products .lead {
    max-width: 34rem;
    margin: 0;
    color: rgba(255,255,255,.86);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    text-shadow: 0 .15rem .8rem rgba(16,7,28,.38);
}

html[dir="rtl"] .page-header-products h1 { line-height: 1.12; letter-spacing: 0; }

.products-hero-glow {
    position: absolute;
    z-index: 1;
    width: 26rem;
    aspect-ratio: 1;
    inset-inline-end: -7rem;
    inset-block-start: -12rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--highlight) 14%, transparent);
    filter: blur(85px);
    pointer-events: none;
}

.products-hero-ring {
    position: absolute;
    z-index: 3;
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    pointer-events: none;
}

.products-hero-ring-a {
    width: clamp(15rem,29vw,30rem);
    inset-inline-end: -6rem;
    inset-block-start: -9rem;
}

.products-hero-ring-b {
    width: clamp(7rem,13vw,13rem);
    inset-inline-end: clamp(5rem,13vw,14rem);
    inset-block-end: -5rem;
    border-color: color-mix(in srgb, var(--highlight) 28%, transparent);
}

@keyframes products-hero-overlay-in {
    from { opacity: .25; }
    to { opacity: 1; }
}

@keyframes products-hero-content-in {
    from { opacity: 0; transform: translateY(1.1rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes products-hero-orbit {
    from { opacity: .45; transform: translate3d(0,0,0) scale(.96); }
    to { opacity: .8; transform: translate3d(-2%,6%,0) scale(1.04); }
}

@media (max-width: 47.99rem) {
    .page-header-products {
        min-height: 27rem;
    }

    .products-hero-media img {
        object-position: 62% center;
    }

    .page-header-products h1 {
        font-size: clamp(2.7rem, 14vw, 4rem) !important;
    }
}

/* -- Page-wide rhythm ----------------------------------------------------------------------- */

.home-experience {
    --home-ink: #121a31;
    --home-deep: #11162d;
    --home-line: color-mix(in srgb, var(--primary) 11%, transparent);
    --home-soft: color-mix(in srgb, var(--primary-050) 62%, var(--surface));
    overflow: clip;
    background: var(--surface);
}

.home-experience > section { position: relative; }

.home-experience .container { position: relative; }
.home-experience .section { padding-block: clamp(5.5rem, 10vw, 9rem); }

.home-section-index {
    position: absolute;
    inset-block-start: -2.5rem;
    inset-inline-end: 0;
    color: color-mix(in srgb, var(--primary) 17%, transparent);
    font: var(--weight-bold) .7rem/1 var(--font-sans);
    letter-spacing: .18em;
}

.home-section-index::before {
    content: "";
    display: inline-block;
    width: clamp(2.5rem, 6vw, 5rem);
    height: 1px;
    margin-inline-end: .75rem;
    vertical-align: middle;
    background: currentColor;
}

.home-experience .section-header { gap: 1rem; max-width: 48rem; }
.home-experience .section-header-row { align-items: center; }
.home-experience .section-header .title-lg,
.home-experience .section-header-row .title-lg {
    max-width: 17ch;
    font-size: clamp(2.15rem, 4vw, 3.65rem);
    line-height: 1.04;
    letter-spacing: -.045em;
}

.home-experience .section-header .lead { max-width: 37rem; font-size: clamp(1rem, 1.5vw, 1.15rem); }
.home-experience .eyebrow { letter-spacing: .11em; }
.home-experience .btn { transition: transform var(--duration) var(--ease-spring), box-shadow var(--duration), color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast); }
.home-experience .btn:hover { transform: translateY(-2px); }

/* -- Hero ----------------------------------------------------------------------------------- */

.home-hero {
    min-height: calc(100svh - var(--header-height));
    display: grid;
    align-items: center;
    padding-block: clamp(4rem, 7vw, 7rem);
    background:
        radial-gradient(circle at 72% 24%, color-mix(in srgb, var(--highlight) 24%, transparent), transparent 25rem),
        radial-gradient(circle at 18% 80%, rgba(217, 78, 193, .2), transparent 28rem),
        linear-gradient(120deg, #170718 0%, #54134f 49%, #073e50 100%);
}

.hero-slide-backgrounds {
    position: absolute;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    pointer-events: none;
}

.hero-slide-background {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.045);
    transition: opacity 1.15s ease, transform 8.5s ease-out;
}

.hero-slide-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(18, 7, 29, .93) 0%, rgba(34, 12, 47, .79) 38%, rgba(10, 31, 48, .5) 72%, rgba(7, 24, 38, .66) 100%),
        linear-gradient(0deg, rgba(6, 8, 22, .48), transparent 45%);
}

.hero-slide-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.88) contrast(1.06);
}

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

.home-hero::before {
    background-image:
        radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 38px 38px, 76px 76px, 76px 76px;
    mask-image: linear-gradient(100deg, transparent 3%, #000 35%, #000 94%);
    -webkit-mask-image: linear-gradient(100deg, transparent 3%, #000 35%, #000 94%);
}

.home-hero .hero-grid { position: relative; z-index: 2; width: 100%; }
.home-hero .hero-copy { gap: 0; }
.home-hero .hero-slide-copy { display: grid; justify-items: inherit; gap: clamp(1.2rem, 2.5vw, 2rem); }
.home-hero .hero-title {
    max-width: 10ch;
    font-size: clamp(3rem, 6.7vw, 6.2rem);
    line-height: .94;
    letter-spacing: -.065em;
    text-wrap: balance;
}

html[dir="rtl"] .home-hero .hero-title { line-height: 1.14; letter-spacing: 0; }

.home-hero .hero-subtitle { max-width: 36rem; font-size: clamp(1.05rem, 1.65vw, 1.3rem); }
.home-hero .hero-eyebrow { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.home-hero .hero-actions { margin-top: .35rem; }
.home-hero .hero-actions .btn { min-height: 3.45rem; padding-inline: 1.65rem; }
.home-hero .hero-actions .btn:hover { transform: translateY(-3px); box-shadow: 0 1.1rem 2rem -1rem rgba(0,0,0,.42); }
.home-hero .hero-visual { width: min(100%, 43rem); }
.home-hero .hero-stage { filter: drop-shadow(0 2.5rem 3.5rem rgba(5, 5, 20, .22)); }
.home-hero .hero-portal-ring-outer { animation: premium-orbit 18s linear infinite; }
.home-hero .hero-portal-ring-inner { animation: premium-orbit-reverse 13s linear infinite; }
.home-hero .hero-floating-card { border-color: rgba(255,255,255,.52); box-shadow: 0 1.25rem 2.75rem rgba(5,5,20,.3); }

.hero-slide-controls {
    position: absolute;
    z-index: 5;
    inset-inline: 0;
    inset-block-end: clamp(1.2rem, 3vw, 2.2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    pointer-events: none;
}

.hero-slide-controls button {
    pointer-events: auto;
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
    background: rgba(12, 9, 29, .34);
    backdrop-filter: blur(16px) saturate(1.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.hero-slide-controls button:hover,
.hero-slide-controls button:focus-visible {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.62);
    transform: translateY(-2px);
}

.hero-slide-arrow,
.hero-slide-pause {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 50%;
}

.hero-slide-pause { margin-inline-start: .25rem; }

.hero-slide-dots {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .45rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(12, 9, 29, .24);
    backdrop-filter: blur(14px);
    pointer-events: auto;
}

.hero-slide-controls .hero-slide-dot {
    width: 2.2rem;
    height: 1.75rem;
    padding: .74rem .3rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.hero-slide-dot span {
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: rgba(255,255,255,.36);
    transition: height .2s ease, background-color .2s ease;
}

.hero-slide-dot.is-active span {
    height: 4px;
    background: #fff;
    box-shadow: 0 0 12px rgba(255,255,255,.52);
}

@keyframes premium-orbit {
    from { transform: translateZ(-54px) rotateZ(4deg); }
    to { transform: translateZ(-54px) rotateZ(364deg); }
}

@keyframes premium-orbit-reverse {
    from { transform: translateZ(-18px) rotateZ(-3deg); }
    to { transform: translateZ(-18px) rotateZ(-363deg); }
}

@media (max-width: 61.99rem) {
    .hero-slide-background::after {
        background:
            linear-gradient(180deg, rgba(18, 7, 29, .86) 0%, rgba(29, 11, 43, .75) 48%, rgba(6, 25, 39, .7) 100%),
            linear-gradient(0deg, rgba(6, 8, 22, .4), transparent 50%);
    }

    .home-hero { padding-block-end: 6rem; }
}

@media (max-width: 35rem) {
    .hero-slide-arrow { display: none !important; }
    .hero-slide-controls { gap: .35rem; }
    .hero-slide-controls .hero-slide-dot { width: 1.65rem; }
}

/* -- Partner confidence rail --------------------------------------------------------------- */

.home-partner-rail {
    padding-block: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--surface);
    border-block: 1px solid var(--home-line);
}

.home-partner-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}

.home-partner-title { margin: 0; white-space: nowrap; color: var(--muted); }
.home-partner-rail .partner-logo { height: 2.2rem; opacity: .48; }
.home-partner-rail .partner-logo:hover { transform: scale(1.04); }

/* -- Story and highlights ------------------------------------------------------------------ */

.home-story {
    isolation: isolate;
    background:
        radial-gradient(circle at 94% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 28rem),
        var(--surface);
}

.home-story::after {
    content: "";
    position: absolute;
    width: 32rem;
    aspect-ratio: 1;
    inset-inline-end: -20rem;
    inset-block-start: 5rem;
    border: 1px solid var(--home-line);
    border-radius: 50%;
    box-shadow: 0 0 0 4rem color-mix(in srgb, var(--accent) 2.2%, transparent),
                0 0 0 8rem color-mix(in srgb, var(--primary) 1.8%, transparent);
    z-index: -1;
}

.home-story-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(26rem, 1.08fr);
    gap: clamp(3rem, 8vw, 7.5rem);
    align-items: center;
}

.home-story-copy { max-width: 40rem; }
.home-story-copy .title-lg { max-width: 15ch; font-size: clamp(2.4rem, 4.8vw, 4.4rem); line-height: 1; letter-spacing: -.055em; }
.home-story-copy .prose { color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.82; }
.home-story-actions { margin-top: .75rem; }

.home-highlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 2rem;
    background: var(--home-line);
    box-shadow: 0 2rem 5rem -3.2rem rgba(17,22,45,.45);
}

.home-highlight-grid .stat {
    min-height: 12rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    justify-items: start;
    align-content: space-between;
    text-align: start;
    border: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--surface) 94%, var(--primary-050));
}

.home-highlight-grid .stat:hover { transform: none; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 23%, transparent); }
.home-highlight-grid .stat-icon { margin: 0; }
.home-highlight-grid .stat-value { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.home-highlight-grid .stat-label { max-width: 15ch; line-height: 1.35; }

/* -- Manufacturing site ----------------------------------------------------------------------
   The plant photo wipes open from the bottom as it scrolls into view and settles from a slight
   zoom, a light sweep crosses it once, and a "since 1885" seal pops onto its corner. While the
   section is on screen the photo drifts a little against the scroll (where supported). The
   photo is Admin → Page images → "Manufacturing site photo"; the text is home.manufacturing.*. */

.home-plant {
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 6% 20%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 30rem),
        linear-gradient(180deg, var(--surface), var(--home-soft));
}

.home-plant-glow {
    position: absolute;
    z-index: -1;
    inset: auto -10rem -12rem auto;
    width: clamp(18rem, 36vw, 34rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    filter: blur(90px);
    pointer-events: none;
    animation: home-markets-breathe 10s ease-in-out infinite alternate;
}

.home-plant-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: clamp(3rem, 7vw, 6.5rem);
    align-items: center;
}

/* -- The photo -- */

.home-plant-media {
    position: relative;
    margin: 0;
    padding-block-end: 2.5rem;
}

.home-plant-dots {
    position: absolute;
    z-index: -1;
    inset-block-start: -2rem;
    inset-inline-start: -2rem;
    width: clamp(7rem, 14vw, 11rem);
    aspect-ratio: 1;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary) 34%, transparent) 1.4px, transparent 1.8px) 0 0 / 14px 14px;
    -webkit-mask-image: radial-gradient(circle at 30% 30%, #000 30%, transparent 72%);
    mask-image: radial-gradient(circle at 30% 30%, #000 30%, transparent 72%);
    animation: home-plant-float 9s ease-in-out infinite alternate;
}

.home-plant-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: 2rem;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    box-shadow:
        0 2.5rem 5rem -3rem rgba(17,22,45,.55),
        0 0 0 1px var(--home-line);
    clip-path: inset(100% 0 0 0 round 2rem);
    transition: clip-path 1.25s cubic-bezier(.7, 0, .2, 1) .1s;
}

.home-plant-media.is-visible .home-plant-frame { clip-path: inset(0 0 0 0 round 2rem); }

/* A soft floor of shade, so the badge and the photo's lower edge read as one composition. */
.home-plant-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(10,12,32,.38), transparent 42%);
    pointer-events: none;
}

.home-plant-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* Zoom and drift use the separate scale/translate properties, so the reveal transition and
       the scroll-linked parallax never overwrite each other. */
    scale: 1.22;
    transition: scale 1.9s var(--ease-out) .1s;
}

.home-plant-media.is-visible .home-plant-frame img { scale: 1.1; }
.home-plant-media.is-visible .home-plant-frame:hover img { scale: 1.15; transition-duration: 1.2s; transition-delay: 0s; }

.home-plant-sheen {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%);
    transform: translateX(-130%);
    pointer-events: none;
}

.home-plant-media.is-visible .home-plant-sheen { animation: home-plant-sheen 1.5s var(--ease-out) 1.15s both; }

@keyframes home-plant-sheen {
    from { transform: translateX(-130%); }
    to   { transform: translateX(130%); }
}

/* -- The "since 1885" seal -- */

.home-plant-badge {
    position: absolute;
    z-index: 2;
    inset-block-end: 0;
    inset-inline-end: clamp(1.25rem, 4vw, 2.75rem);
    width: clamp(8.25rem, 12vw, 10rem);
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .2rem;
    padding: 1.25rem;
    border-radius: 50%;
    text-align: center;
    color: var(--home-ink);
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid color-mix(in srgb, var(--surface) 60%, transparent);
    box-shadow: 0 1.5rem 3rem -1.5rem rgba(17,22,45,.55);
    opacity: 0;
    transform: scale(.55) rotate(-12deg);
    transition: opacity .5s var(--ease-out) .85s, transform .8s var(--ease-spring) .85s;
}

.home-plant-media.is-visible .home-plant-badge { opacity: 1; transform: none; }

.home-plant-badge-ring {
    position: absolute;
    inset: .4rem;
    width: calc(100% - .8rem);
    height: calc(100% - .8rem);
    overflow: visible;
    animation: home-plant-spin 26s linear infinite;
}

.home-plant-badge-ring circle {
    fill: none;
    stroke: color-mix(in srgb, var(--primary) 60%, transparent);
    stroke-width: 1.2;
    stroke-dasharray: 2 5;
    stroke-linecap: round;
}

.home-plant-badge-year {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.6vw, 2.3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, var(--primary-800, var(--primary)), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-plant-badge-label {
    max-width: 7rem;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@keyframes home-plant-spin { to { rotate: 360deg; } }

@keyframes home-plant-float {
    from { translate: 0 0; }
    to   { translate: .75rem 1rem; }
}

/* -- The copy -- */

.home-plant-copy { position: relative; isolation: isolate; max-width: 36rem; }

/* -- Brand label: a pill with a gradient monogram, a light sweep and a line drawing out -- */

.home-plant-kicker { display: flex; align-items: center; gap: .9rem; }

.home-plant-kicker-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .35rem 1.05rem .35rem .35rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    border-radius: 999px;
    color: var(--primary);
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), var(--surface));
    box-shadow: 0 .65rem 1.5rem -1rem color-mix(in srgb, var(--primary) 60%, transparent);
}

[dir="rtl"] .home-plant-kicker-pill { padding: .35rem .35rem .35rem 1.05rem; }

.home-plant-kicker-pill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
    transform: translateX(-120%);
    pointer-events: none;
}

.home-plant-copy.is-visible .home-plant-kicker-pill::after { animation: home-plant-sheen 1.3s var(--ease-out) .55s both; }

.home-plant-kicker-mark {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-800, var(--primary)), var(--primary));
}

/* A soft ring that keeps breathing out of the monogram. */
.home-plant-kicker-mark::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid var(--primary);
    animation: home-plant-ping 2.8s var(--ease-out) infinite;
}

@keyframes home-plant-ping {
    from { transform: scale(1); opacity: .55; }
    to   { transform: scale(1.9); opacity: 0; }
}

.home-plant-kicker-text {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

html[dir="rtl"] .home-plant-kicker-text { letter-spacing: 0; }

.home-plant-kicker-rule {
    flex: 0 1 3.5rem;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 45%, transparent), transparent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .9s var(--ease-out) .45s;
}

[dir="rtl"] .home-plant-kicker-rule { transform-origin: right center; background: linear-gradient(270deg, color-mix(in srgb, var(--primary) 45%, transparent), transparent); }
.home-plant-copy.is-visible .home-plant-kicker-rule { transform: none; }

/* -- Title: words rise in on reveal; the highlighted phrase is coloured and underlined -- */

.home-plant-title {
    max-width: 14ch;
    color: var(--home-ink);
    font-size: clamp(2.4rem, 4.6vw, 4.2rem);
    line-height: 1.04;
    letter-spacing: -.05em;
}

/* The shared word animation would play on page load, long before this section is seen;
   here it waits for the copy to scroll into view. */
.home-plant-title .split-word > span { --split-delay: 260ms; animation-play-state: paused; }
.home-plant-copy.is-visible .home-plant-title .split-word > span,
.no-js .home-plant-title .split-word > span { animation-play-state: running; }

/* Room below every word for descenders (g, p, y): the clip of the rising words, and the box the
   gradient text is painted in, would otherwise both shave off the tails. */
.home-plant-title .split-word,
.home-plant-title .split-word > span { padding-bottom: .18em; margin-bottom: -.18em; }

/* A highlighter stroke that sweeps in behind the phrase once the words have risen. It is an
   inline background cloned onto every line, so it follows the phrase when it wraps. */
.home-plant-highlight {
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--primary) 20%, transparent),
            color-mix(in srgb, color-mix(in srgb, var(--primary) 55%, #ff6fb5) 26%, transparent))
        no-repeat left 0 bottom .1em / 0% .3em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    border-radius: .1em;
    transition: background-size 1s cubic-bezier(.65, 0, .35, 1) 1.15s;
}

[dir="rtl"] .home-plant-highlight { background-position: right 0 bottom .1em; }

.home-plant-copy.is-visible .home-plant-highlight,
.no-js .home-plant-highlight { background-size: 100% .3em; }

.home-plant-highlight .split-word > span {
    background: linear-gradient(120deg, var(--primary-800, var(--primary)) 0%, var(--primary) 55%, color-mix(in srgb, var(--primary) 55%, #ff6fb5) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* -- The founding year, large and outlined behind the copy -- */

.home-plant-watermark {
    position: absolute;
    z-index: -1;
    inset-block-start: -3.25rem;
    inset-inline-end: -1rem;
    margin: 0 !important;
    color: transparent;
    font-family: var(--font-display);
    font-size: clamp(6rem, 13vw, 11rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.06em;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--primary) 13%, transparent);
    pointer-events: none;
    user-select: none;
    opacity: 0;
    translate: 0 1.5rem;
    transition: opacity 1.2s var(--ease-out) .3s, translate 1.4s var(--ease-out) .3s;
}

.home-plant-copy.is-visible .home-plant-watermark { opacity: 1; translate: 0 0; }

.home-plant-body {
    margin-block-end: 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.35vw, 1.1rem);
    line-height: 1.82;
}

.home-plant-heritage {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    margin-block-start: var(--space-6);
    padding-block: 1.25rem;
    border-block: 1px solid var(--home-line);
}

.home-plant-heritage-value {
    display: inline-flex;
    direction: ltr; /* keeps "140+" from reading "+140" on right-to-left pages */
    align-items: flex-start;
    font-family: var(--font-display);
    font-size: clamp(3rem, 5.5vw, 4.5rem);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--primary-800, var(--primary)) 15%, var(--primary) 60%, color-mix(in srgb, var(--primary) 60%, #fff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-plant-plus { font-size: .55em; line-height: 1.1; }

.home-plant-heritage-label {
    max-width: 14ch;
    color: var(--home-ink);
    font-size: clamp(.95rem, 1.2vw, 1.05rem);
    font-weight: 600;
    line-height: 1.35;
}

.home-plant-lines { display: grid; gap: .85rem; margin-block-start: var(--space-6); }

.home-plant-lines-label {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-plant-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-plant-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem 1.05rem .55rem .6rem;
    border: 1px solid var(--home-line);
    border-radius: 999px;
    color: var(--home-ink);
    background: var(--surface);
    font-size: .92rem;
    font-weight: 600;
    box-shadow: 0 .75rem 1.5rem -1.25rem rgba(17,22,45,.35);
    /* The reveal keeps its stagger delay; the hover lift (translate) and colours respond at once. */
    transition:
        opacity var(--duration-slower) var(--ease-out) calc(var(--stagger-step, 70ms) * var(--i, 0)),
        transform var(--duration-slower) var(--ease-spring) calc(var(--stagger-step, 70ms) * var(--i, 0)),
        translate var(--duration) var(--ease-spring),
        border-color var(--duration-fast),
        box-shadow var(--duration);
}

[dir="rtl"] .home-plant-chip { padding: .55rem .6rem .55rem 1.05rem; }

.home-plant-chip svg {
    box-sizing: content-box;
    flex: none;
    padding: .4rem;
    border-radius: 50%;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    transition: color var(--duration-fast), background-color var(--duration-fast);
}

.home-plant-chip:hover {
    translate: 0 -3px;
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
    box-shadow: 0 1rem 2rem -1.1rem color-mix(in srgb, var(--primary) 55%, transparent);
}

.home-plant-chip:hover svg { color: #fff; background: var(--primary); }

/* Scroll-linked drift of the photo inside its frame. Browsers without scroll timelines simply
   keep the photo still; reduced-motion visitors never get it. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .home-plant-frame img {
            animation: home-plant-drift linear both;
            animation-timeline: view();
            animation-range: cover;
        }
    }
}

@keyframes home-plant-drift {
    from { translate: 0 -4%; }
    to   { translate: 0 4%; }
}

/* -- Global reach ----------------------------------------------------------------------------
   A deep night-blue band: the dotted world (a static SVG image), and over it one curved route
   per market drawn from the head office. Routes draw in once the map scrolls into view, then a
   small light travels each one on a loop. Countries come from Admin → Global reach. */

.home-markets {
    --market-ink: #0b0f22;
    --market-route: #d08be0;
    --market-muted: rgba(255,255,255,.66);
    --market-line: rgba(255,255,255,.12);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(ellipse 60% 55% at 38% 42%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 70%),
        linear-gradient(180deg, #0d1128, var(--market-ink) 55%, #0a0d1d);
}

/* A slow breathing glow behind the head office. */
.home-markets-glow {
    position: absolute;
    z-index: -1;
    inset: 18% auto auto 22%;
    width: clamp(20rem, 40vw, 38rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--market-route) 18%, transparent);
    filter: blur(90px);
    pointer-events: none;
    animation: home-markets-breathe 9s ease-in-out infinite alternate;
}

@keyframes home-markets-breathe {
    from { opacity: .45; transform: scale(.9); }
    to   { opacity: .85; transform: scale(1.1); }
}

.home-markets .home-section-index { color: rgba(255,255,255,.35); }
.home-markets .eyebrow { color: color-mix(in srgb, var(--market-route) 80%, #fff); }
.home-markets .title-lg { color: #fff; font-size: clamp(2.5rem, 4.6vw, 4.1rem); line-height: 1.02; letter-spacing: -.05em; }
.home-markets .lead { color: var(--market-muted); max-width: 40rem; font-size: clamp(1.02rem, 1.5vw, 1.14rem); line-height: 1.75; }

.home-markets-header {
    display: grid;
    gap: 2rem;
    align-items: end;
}

.home-markets-intro { display: grid; gap: 1rem; }

@media (min-width: 62rem) {
    .home-markets-header { grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; }
}

.home-markets-stats { display: flex; gap: clamp(1.5rem, 4vw, 3rem); margin: 0; }

.home-markets-stat {
    display: flex;
    flex-direction: column-reverse;
    gap: .35rem;
    padding-inline-start: 1.1rem;
    border-inline-start: 1px solid var(--market-line);
}

.home-markets-stat dt { color: var(--market-muted); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.home-markets-stat dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #fff 30%, var(--market-route));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* -- The map -- */

.home-markets-map { margin-block: clamp(2.25rem, 5vw, 3.75rem) clamp(2rem, 4vw, 3rem); }

.market-map-scroller {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.market-map-scroller::-webkit-scrollbar { display: none; }

.market-map-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1000 / 448;
    /* The routes and pins repaint while they animate; this keeps that repaint inside the map. */
    contain: layout paint;
}

.market-map-land,
.market-map-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* The dots fade out towards every edge, so the cropped continents read as intentional. */
.market-map-land {
    opacity: .2;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7% 93%, transparent), linear-gradient(transparent, #000 8% 90%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 7% 93%, transparent), linear-gradient(transparent, #000 8% 90%, transparent);
    mask-composite: intersect;
}

.market-map-layer { overflow: visible; }

/* Routes: drawn in on reveal, then a light travels each one. */
.market-route-line,
.market-route-packet { fill: none; stroke-linecap: round; }

.market-route-line {
    stroke: color-mix(in srgb, var(--market-route) 60%, transparent);
    stroke-width: 1.3;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition:
        stroke-dashoffset 1.6s var(--ease-out) calc(var(--i, 0) * 55ms + 250ms),
        stroke 250ms ease, stroke-width 250ms ease, opacity 250ms ease;
}

.market-route-packet {
    stroke: #fff;
    stroke-width: 2.4;
    stroke-dasharray: .035 1;
    stroke-dashoffset: .035;
    opacity: 0;
    transition: opacity 400ms ease calc(var(--i, 0) * 55ms + 1.6s);
}

.is-visible .market-route-line { stroke-dashoffset: 0; }
.is-visible .market-route-packet {
    opacity: .9;
    animation: market-packet 3.4s cubic-bezier(.45, 0, .25, 1) infinite;
    animation-delay: calc(var(--i, 0) * -0.41s);
}

@keyframes market-packet {
    from { stroke-dashoffset: .035; }
    to   { stroke-dashoffset: -1; }
}

/* Pins appear as their route arrives. The <g> is positioned by its transform attribute, so only
   its children are scaled here. */
.market-pin {
    opacity: 0;
    pointer-events: bounding-box;
    transition: opacity 500ms ease calc(var(--i, 0) * 55ms + 1.1s);
}

.is-visible .market-pin { opacity: 1; }

.market-pin-dot,
.market-pin-pulse { transform-box: fill-box; transform-origin: center; }

.market-pin-dot {
    fill: #fff;
    stroke: var(--market-route);
    stroke-width: 1.5;
    transition: transform 250ms var(--ease-out), fill 250ms ease;
}

.market-pin-pulse {
    fill: none;
    stroke: var(--market-route);
    stroke-width: 1.2;
    opacity: 0;
    animation: market-pulse 2.8s ease-out infinite;
    animation-delay: calc(var(--i, 0) * -0.23s);
}

@keyframes market-pulse {
    0%   { opacity: .9; transform: scale(.45); }
    100% { opacity: 0;  transform: scale(2.1); }
}

.market-pin-label {
    fill: #fff;
    font: 700 13px/1 var(--font-sans);
    text-anchor: middle;
    paint-order: stroke;
    stroke: var(--market-ink);
    stroke-width: 4px;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

:lang(ar) .market-pin-label,
:lang(ku) .market-pin-label { font-family: var(--font-arabic); }

/* Hover or focus a pin or a country in the list: its route lights up, the rest step back. */
.home-markets.has-active .market-route:not(.is-active) .market-route-line { opacity: .25; }
.home-markets.has-active .market-route:not(.is-active) .market-route-packet { opacity: .15; }
.market-route.is-active .market-route-line { stroke: #fff; stroke-width: 2.2; }
.market-pin.is-active .market-pin-dot { fill: var(--market-route); stroke: #fff; transform: scale(1.7); }
.market-pin.is-active .market-pin-label { opacity: 1; }

/* Head office: a white core with two expanding rings. */
.market-hub-core { fill: #fff; stroke: var(--primary); stroke-width: 3.5; }
.market-hub-ring {
    fill: none;
    stroke: #fff;
    stroke-width: 1.4;
    transform-box: fill-box;
    transform-origin: center;
    animation: market-hub-ring 3s ease-out infinite;
}

.market-hub-ring-late { animation-delay: 1.5s; }

@keyframes market-hub-ring {
    0%   { opacity: .8; transform: scale(.4); }
    100% { opacity: 0;  transform: scale(2.6); }
}

/* HTML label for the head office, placed with percentages of the canvas; sits out in the
   Atlantic, below-left of the pin, where it covers no other market. */
.market-hub-card {
    position: absolute;
    top: var(--hub-y);
    left: var(--hub-x);
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem 1rem .4rem .4rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    /* Solid rather than backdrop-blurred: the routes animate underneath, and a blur would be
       recomputed every frame. */
    background: rgba(24,22,52,.86);
    box-shadow: 0 1rem 2rem -1rem rgba(0,0,0,.6);
    white-space: nowrap;
    pointer-events: none;
    transform: translate(calc(-100% - 1.1rem), .9rem);
}

.market-hub-card::before {
    content: "";
    position: absolute;
    top: -.55rem;
    right: -1rem;
    width: 1.35rem;
    height: 1px;
    background: rgba(255,255,255,.4);
    transform: rotate(-35deg);
    transform-origin: right;
}

.market-hub-card-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
}

.market-hub-card-text { display: grid; line-height: 1.2; }
.market-hub-card-label { color: var(--market-muted); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.market-hub-card-place { font-size: .92rem; font-weight: 700; }

/* -- Countries by region -- */

.market-regions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

.market-region { padding-top: 1.1rem; border-top: 1px solid var(--market-line); }

.market-region-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 0 .9rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

.market-region-count {
    min-width: 1.75rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: var(--market-muted);
    font-size: .75rem;
    text-align: center;
}

.market-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }

.market-chip {
    padding: .38rem .8rem;
    border: 1px solid var(--market-line);
    border-radius: 999px;
    color: rgba(255,255,255,.8);
    font-size: .85rem;
    line-height: 1.3;
    cursor: default;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.market-chip:focus-visible { outline: 2px solid var(--market-route); outline-offset: 2px; }
.market-chip.is-active {
    border-color: color-mix(in srgb, var(--market-route) 70%, transparent);
    background: color-mix(in srgb, var(--market-route) 22%, transparent);
    color: #fff;
}

.market-chip.is-hub {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--market-route) 70%, var(--primary)));
    color: #fff;
    font-weight: 600;
}

.market-chip.is-hub::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: #fff; }

/* Phones: the map keeps a readable size and scrolls sideways; site.js starts it on the hub. */
@media (max-width: 47.99rem) {
    .market-map-scroller { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
    .market-map-canvas { width: 46rem; }
    .home-markets-stats { gap: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .home-markets-glow,
    .market-pin-pulse,
    .market-hub-ring,
    .is-visible .market-route-packet { animation: none; }
    .market-route-packet { display: none; }
    .market-route-line { stroke-dashoffset: 0; transition: none; }
    .market-pin { opacity: 1; transition: none; }
}

/* -- Featured brands ------------------------------------------------------------------------
   The Novalie family of brands, managed under Admin → Brands. Each card takes its colour from
   --brand-accent (set inline from the brand colour in Admin), falling back to Novalie violet. */

.home-brands {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-block: 1px solid var(--home-line);
    background:
        radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 38rem),
        linear-gradient(180deg, color-mix(in srgb, var(--background-alt) 92%, var(--surface)), var(--surface));
}

/* Two slow, blurred colour fields drifting behind the cards. */
.home-brands-aurora {
    position: absolute;
    z-index: -1;
    width: clamp(18rem, 38vw, 34rem);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    pointer-events: none;
    animation: home-brands-drift 22s ease-in-out infinite alternate;
}

.home-brands-aurora-a { inset: -8rem auto auto -10rem; background: color-mix(in srgb, var(--primary) 22%, transparent); }
.home-brands-aurora-b { inset: auto -9rem -10rem auto; background: color-mix(in srgb, var(--accent) 22%, transparent); animation-duration: 28s; animation-direction: alternate-reverse; }

@keyframes home-brands-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(4rem, 2.5rem, 0) scale(1.15); }
}

.home-brands-header {
    display: grid;
    justify-items: center;
    gap: 1rem;
    max-width: 50rem;
    margin: 0 auto clamp(2.75rem, 5vw, 4.25rem);
    text-align: center;
}

.home-brands-header .title-lg { font-size: clamp(2.5rem, 4.6vw, 4.1rem); line-height: 1.02; letter-spacing: -.05em; }
.home-brands-header .lead { max-width: 44rem; font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.75; }

.brand-grid {
    display: grid;
    gap: clamp(1.1rem, 2.4vw, 1.6rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.brand-grid-item { display: flex; min-width: 0; }

@media (min-width: 48rem) { .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } }
@media (min-width: 62rem) { .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The card. ::before carries the pointer spotlight (shared with the other cards), ::after the
   rotating accent ring that lights up on hover. */
@property --brand-ring-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.brand-card {
    --brand-accent: var(--primary);
    --spot-color: color-mix(in srgb, var(--brand-accent) 14%, transparent);
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1.1rem;
    padding: .75rem .75rem 1.35rem;
    border: 1px solid var(--home-line);
    border-radius: 1.75rem;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1rem 2.5rem -2.1rem rgba(17,22,45,.35);
    transition: transform 420ms var(--ease-out), box-shadow 420ms ease, border-color 300ms ease;
}


.brand-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--brand-ring-angle),
        transparent 0 55%, color-mix(in srgb, var(--brand-accent) 85%, #fff) 75%, transparent 95%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    transition: opacity 400ms ease;
    pointer-events: none;
}

a.brand-card:hover,
a.brand-card:focus-visible {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--brand-accent) 28%, var(--home-line));
    box-shadow: 0 2rem 3.75rem -2.25rem color-mix(in srgb, var(--brand-accent) 55%, rgba(17,22,45,.5));
}

a.brand-card:hover::after,
a.brand-card:focus-visible::after { opacity: 1; animation: brand-ring-spin 3.2s linear infinite; }
a.brand-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-accent) 40%, transparent); outline-offset: 4px; }

@keyframes brand-ring-spin { to { --brand-ring-angle: 360deg; } }

/* Logo plate: accent-tinted, with a faint dot grid and a glow that blooms on hover. */
.brand-card-stage {
    position: relative;
    display: grid;
    place-items: center;
    height: clamp(8.5rem, 14vw, 10rem);
    overflow: hidden;
    border-radius: 1.25rem;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--brand-accent) 16%, transparent) 1px, transparent 1.5px) 0 0 / 14px 14px,
        linear-gradient(145deg, color-mix(in srgb, var(--brand-accent) 8%, var(--surface)), color-mix(in srgb, var(--brand-accent) 3%, var(--background-alt)));
}

.brand-card-glow {
    position: absolute;
    inset: 20% 25%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-accent) 38%, transparent);
    filter: blur(32px);
    opacity: .35;
    transform: scale(.8);
    transition: opacity 500ms ease, transform 600ms var(--ease-out);
}

.brand-card-logo {
    position: relative;
    max-width: 68%;
    max-height: 3.6rem;
    object-fit: contain;
    transition: transform 600ms var(--ease-out);
}

.brand-card-wordmark {
    position: relative;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.04em;
    text-transform: uppercase;
    background: linear-gradient(120deg, var(--brand-accent), color-mix(in srgb, var(--brand-accent) 55%, var(--accent)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: transform 600ms var(--ease-out), letter-spacing 600ms var(--ease-out);
}

a.brand-card:hover .brand-card-glow,
a.brand-card:focus-visible .brand-card-glow { opacity: .8; transform: scale(1.25); }
a.brand-card:hover .brand-card-logo,
a.brand-card:focus-visible .brand-card-logo,
a.brand-card:hover .brand-card-wordmark,
a.brand-card:focus-visible .brand-card-wordmark { transform: scale(1.08); }
a.brand-card:hover .brand-card-wordmark { letter-spacing: -.02em; }

.brand-card-body { display: grid; justify-items: start; gap: .55rem; padding-inline: .6rem; }
.brand-card-name { font-size: clamp(1.2rem, 1.5vw, 1.4rem); font-weight: 700; letter-spacing: -.03em; color: var(--home-ink, var(--text)); }

.brand-card-specialty {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-accent) 10%, transparent);
    color: color-mix(in srgb, var(--brand-accent) 80%, var(--text));
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
}

.brand-card-specialty::before {
    content: "";
    width: .4rem;
    height: .4rem;
    flex: none;
    border-radius: 50%;
    background: var(--brand-accent);
}

.brand-card-description { color: var(--text-muted); font-size: .94rem; line-height: 1.65; }

.brand-card-visit {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    padding: .9rem .6rem 0;
    border-block-start: 1px solid var(--home-line);
    color: var(--brand-accent);
    font-size: .9rem;
    font-weight: 600;
}

.brand-card-visit-icon { transition: transform 350ms var(--ease-out); }
a.brand-card:hover .brand-card-visit-icon,
a.brand-card:focus-visible .brand-card-visit-icon { transform: translate(3px, -3px); }

/* On phones the brands become a swipeable rail instead of six stacked cards. */
@media (max-width: 47.99rem) {
    .brand-grid {
        grid-auto-flow: column;
        grid-auto-columns: min(82%, 20rem);
        gap: 1rem;
        margin-inline: calc(var(--gutter) * -1);
        padding: .75rem var(--gutter) 1.5rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }

    .brand-grid::-webkit-scrollbar { display: none; }
    .brand-grid-item { scroll-snap-align: start; }
    a.brand-card:hover, a.brand-card:focus-visible { transform: none; }
}

/* -- Certifications ------------------------------------------------------------------------- */

.home-certifications { background: var(--surface); }
.home-certification-grid { gap: 1rem; }
.home-certifications .cert-card {
    min-height: 17rem;
    align-content: center;
    padding: 2rem;
    border-color: var(--home-line);
    border-radius: 1.5rem;
    background: linear-gradient(145deg, var(--surface), var(--home-soft));
}

.home-certifications .cert-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 35%, var(--home-line)); box-shadow: 0 1.5rem 3.5rem -2.5rem rgba(17,22,45,.38); }
.home-certifications .cert-seal { width: 4.5rem; height: 4.5rem; box-shadow: 0 0 0 .6rem color-mix(in srgb, var(--primary-050) 70%, transparent); }
.home-certifications .cert-logo { height: 4rem; max-width: 9rem; }

/* -- Testimonials --------------------------------------------------------------------------- */

.home-testimonials {
    isolation: isolate;
    background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 5%, var(--background-alt)), color-mix(in srgb, var(--accent) 6%, var(--surface)));
}

.home-testimonial-grid { max-width: 72rem; margin-inline: auto; gap: 1.25rem; }
.home-testimonials .testimonial {
    min-height: 23rem;
    padding: clamp(2rem, 4vw, 3.35rem);
    border: 0;
    border-radius: 2rem;
    box-shadow: 0 1.5rem 4rem -3rem rgba(17,22,45,.42);
}

.home-testimonials .testimonial:first-child { background: linear-gradient(145deg, #17182f, #33203f); }
.home-testimonials .testimonial:first-child .testimonial-quote,
.home-testimonials .testimonial:first-child .testimonial-name { color: #fff; }
.home-testimonials .testimonial:first-child .testimonial-role { color: rgba(255,255,255,.58); }
.home-testimonials .testimonial:first-child .testimonial-avatar { color: #fff; background: rgba(255,255,255,.11); }
.home-testimonials .testimonial-quote { font-size: clamp(1.15rem, 2vw, 1.52rem); }
.home-testimonials .testimonial-author { margin-top: auto; }

/* -- Dark mode ------------------------------------------------------------------------------ */

:root[data-theme="dark"] .home-experience { --home-ink: #f2f4fb; --home-deep: #0c1021; --home-line: rgba(255,255,255,.1); --home-soft: rgba(255,255,255,.04); }
:root[data-theme="dark"] .home-story,
:root[data-theme="dark"] .home-certifications { background-color: var(--surface); }
:root[data-theme="dark"] .home-brands { background: radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 38rem), linear-gradient(180deg, var(--background-alt), var(--surface)); }
:root[data-theme="dark"] .brand-card { background: color-mix(in srgb, var(--surface) 94%, #fff); box-shadow: 0 1rem 2.5rem -2rem rgba(0,0,0,.6); }
:root[data-theme="dark"] .brand-card-stage { background: radial-gradient(circle, color-mix(in srgb, var(--brand-accent) 22%, transparent) 1px, transparent 1.5px) 0 0 / 14px 14px, linear-gradient(145deg, color-mix(in srgb, var(--brand-accent) 14%, var(--surface)), var(--surface)); }
:root[data-theme="dark"] .brand-card-specialty { color: color-mix(in srgb, var(--brand-accent) 45%, #fff); background: color-mix(in srgb, var(--brand-accent) 22%, transparent); }
:root[data-theme="dark"] .brand-card-visit { color: color-mix(in srgb, var(--brand-accent) 50%, #fff); }
:root[data-theme="dark"] .home-highlight-grid .stat { background: color-mix(in srgb, var(--surface) 90%, #fff); }
:root[data-theme="dark"] .home-plant { background: radial-gradient(circle at 6% 20%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 30rem), linear-gradient(180deg, var(--surface), var(--background-alt)); }
:root[data-theme="dark"] .home-plant-chip { background: color-mix(in srgb, var(--surface) 92%, #fff); }
:root[data-theme="dark"] .home-plant-highlight .split-word > span { background-image: linear-gradient(120deg, #fff 0%, var(--primary) 70%, #ff8cc6); }
:root[data-theme="dark"] .home-plant-kicker-pill { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
:root[data-theme="dark"] .home-plant-kicker-pill::after { background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%); }
:root[data-theme="dark"] .home-plant-watermark { -webkit-text-stroke-color: rgba(255,255,255,.07); }
:root[data-theme="dark"] .home-plant-heritage-value,
:root[data-theme="dark"] .home-plant-badge-year { background-image: linear-gradient(135deg, #fff 25%, var(--primary)); }
:root[data-theme="dark"] .home-plant-badge { background: color-mix(in srgb, var(--surface) 78%, transparent); border-color: rgba(255,255,255,.12); }
:root[data-theme="dark"] .home-plant-frame { box-shadow: 0 2.5rem 5rem -3rem rgba(0,0,0,.8), 0 0 0 1px var(--home-line); }
:root[data-theme="dark"] .home-testimonials { background: linear-gradient(145deg, #161223, #0f2022); }
:root[data-theme="dark"] .home-certifications .cert-card { background: linear-gradient(145deg, var(--surface), rgba(255,255,255,.035)); }

/* -- Responsive ---------------------------------------------------------------------------- */

@media (max-width: 61.99rem) {
    .home-story-grid { grid-template-columns: 1fr; }
    .home-story-copy { max-width: 45rem; }
    .home-plant-grid { grid-template-columns: 1fr; }
    .home-plant-copy { max-width: 45rem; }
}

@media (max-width: 29rem) {
    .home-plant-media { padding-block-end: 2rem; }
    .home-plant-frame { border-radius: 1.4rem; clip-path: inset(100% 0 0 0 round 1.4rem); }
    .home-plant-media.is-visible .home-plant-frame { clip-path: inset(0 0 0 0 round 1.4rem); }
    .home-plant-badge { width: 7.25rem; padding: 1rem; }
    .home-plant-badge-year { font-size: 1.6rem; }
    .home-plant-badge-label { font-size: .6rem; }
}

@media (max-width: 47.99rem) {
    .home-experience .section { padding-block: 4.75rem; }
    .home-partner-inner { grid-template-columns: 1fr; gap: 1.35rem; }
    .home-partner-title { justify-content: center; text-align: center; }
    .home-highlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-highlight-grid .stat { min-height: 9.5rem; padding: 1.25rem; }
}

@media (max-width: 29rem) {
    /* Two stats stay side by side on phones; a single column made each one a full-screen card. */
    .home-highlight-grid .stat { min-height: 8.25rem; padding: 1.1rem; gap: .75rem; }
    .home-highlight-grid .stat-value { font-size: clamp(2rem, 10vw, 2.6rem); }
}

@media (max-width: 19.99rem) {
    .home-highlight-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .header-progress { transition: none; }
    .products-hero-media img,
    .products-hero-media::after,
    .page-header-products::after,
    .products-hero-container > *,
    .products-hero-copy > * {
        animation: none;
    }
    .products-hero-media img { transform: none; }
    .hero-slide-background { transition: none; transform: none; }
    .home-hero .hero-portal-ring-outer,
    .home-hero .hero-portal-ring-inner { animation: none; }
    .home-brands-aurora,
    a.brand-card:hover::after,
    a.brand-card:focus-visible::after { animation: none; }
    a.brand-card:hover,
    a.brand-card:focus-visible,
    a.brand-card:hover :is(.brand-card-logo, .brand-card-wordmark, .brand-card-glow, .brand-card-visit-icon) { transform: none; }
    .home-experience .product-card:hover,
    .home-experience .cert-card:hover,
    .home-experience .btn:hover { transform: none; }
}

/* -- Rendering performance ------------------------------------------------------------------
   Sections well below the first screen skip layout and paint until they approach the viewport.
   "auto" in contain-intrinsic-size makes the browser remember each section's real height once
   it has rendered, so the scrollbar does not jump on the way back up. None of these sections
   paints outside its own box, so the implied paint containment clips nothing. */

.home-certifications,
.home-testimonials {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}