.cinematic-bar--bottom,
.logo {
    align-items: center;
    display: flex
}

.cta-button,
.hero-content,
.logo-text {
    color: var(--white)
}

.carousel-item::after,
.carousel-item::before,
.fruit-image::before {
    content: '';
    transition: opacity .3s
}

.cta-button,
.fruit-name,
.hero-title,
.logo-text,
.news-title,
.partner-text,
.section-title {
    font-family: Montserrat, sans-serif
}

.footer-links a,
.legal-links a,
.nav-links a,
.partner-link,
.partner-link:hover,
.view-details {
    text-decoration: none
}

.about-card,
.about-story h2,
.about-story p,
.certification-item,
.contact-form-container h3,
.footer-disclaimer p,
.fruit-info,
.hero-content,
.journey-stage,
.product-overview h1,
.product-overview>p,
.quick-product-card,
.section-subtitle,
.section-title,
.stat-item {
    text-align: center
}

:root {
    --primary: #2e7d32;
    --primary-dark: #1b5e20;
    --primary-light: #4caf50;
    --secondary: #ff9800;
    --dark: #0c0f1d;
    --light: #f8f9fa;
    --white: #ffffff;
    --gray: #636e72;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15)
}

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

body {
    font-family: 'Open Sans', sans-serif;
    background: var(--light);
    color: var(--dark);
    line-height: 1.6;
    overflow-x: hidden
}

.about-container,
.certifications-container,
.contact-container,
.container,
.product-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px
}

.hero {
    height: 100vh;
    position: relative;
    background: #000
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(12, 15, 29, .7) 0, rgba(33, 150, 83, .3) 100%)
}

.cinematic-bar {
    position: absolute;
    left: 0;
    width: 100%;
    background: #000;
    z-index: 100
}

.cinematic-bar--top {
    top: 0;
    height: 100px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .8) 0, rgba(0, 0, 0, .4) 70%, transparent 100%);
    backdrop-filter: blur(5px)
}

.cinematic-bar--bottom {
    bottom: 0;
    height: 60px;
    background: rgba(0, 0, 0, .9);
    backdrop-filter: blur(5px);
    justify-content: center
}

.main-nav {
    position: relative;
    z-index: 100;
    padding: 1.5rem 0
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 10px
}

.logo-img {
    height: 80px;
    width: auto
}

.logo-text {
    font-size: 1.8rem;
    font-weight: 700
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2.5rem
}

.nav-links a {
    color: rgba(255, 255, 255, .9);
    font-weight: 500;
    font-size: 1.1rem;
    transition: color .3s
}

.nav-links a:hover {
    color: var(--primary-light)
}

.hero-content {
    position: relative;
    z-index: 50;
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px
}

.hero-title {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    background: linear-gradient(45deg, var(--white), #a8e6cf, #ffd3b6);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.hero-subtitle {
    font-size: 1.4rem;
    margin-bottom: 3rem;
    max-width: 600px;
    opacity: .9;
    font-weight: 300
}

.cta-button {
    background: linear-gradient(45deg, var(--primary), var(--primary-light));
    border: none;
    padding: 18px 45px;
    font-size: 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: .3s;
    box-shadow: var(--shadow)
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg)
}

.products-section {
    padding: 100px 0;
    /* `background: var(--dark) !important` was the SHORTHAND form which set
       background-position: 0% 0% !important — that froze the animated
       shine-line keyframe.  Switched to longhand background-color so only
       color is locked, leaving background-position free to animate. */
    background-color: var(--dark) !important;
    position: relative;
    overflow: hidden
}

.products-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, .1) 0, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 215, 0, .05) 0, transparent 50%);
    pointer-events: none
}

.section-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--white) !important;
    margin-bottom: 1rem;
    text-shadow: 0 4px 8px rgba(0, 0, 0, .3)
}

.section-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, .7) !important;
    margin-bottom: 4rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto
}

.fruit-name,
.view-details:hover {
    color: var(--white) !important
}

.carousel-container {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
    padding: 40px 0
}

.carousel-track {
    display: flex;
    transition: transform .6s cubic-bezier(.25, .46, .45, .94);
    gap: 30px;
    padding: 0 60px
}

.carousel-item,
.fruit-image img {
    transition: .5s cubic-bezier(.25, .46, .45, .94);
    position: relative
}

.carousel-item {
    flex: 0 0 320px;
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1);
    cursor: pointer;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .08);
    animation: 6s ease-in-out infinite float
}

.carousel-item::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, .3), transparent);
    opacity: 0
}

.carousel-item::after {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, transparent, rgba(255, 215, 0, .1), transparent);
    border-radius: 26px;
    opacity: 0;
    z-index: -1
}

.carousel-item:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, .6), 0 0 80px rgba(255, 215, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .2);
    border-color: rgba(255, 215, 0, .3)
}

.carousel-item:hover .fruit-image::before,
.carousel-item:hover::after,
.carousel-item:hover::before {
    opacity: 1
}

.fruit-image {
    width: 100%;
    height: 220px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .03) 0, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    position: relative;
    overflow: hidden
}

.fruit-image::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, .1) 0, transparent 70%);
    opacity: 0
}

.fruit-image img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .4));
    z-index: 2
}

.carousel-item:hover .fruit-image img {
    transform: scale(1.18) translateY(-8px);
    filter: none
}

.fruit-info {
    padding: 30px 25px;
    position: relative;
    z-index: 2
}

.fruit-name {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .3)
}

.fruit-specs {
    color: gold !important;
    font-size: .95rem;
    margin-bottom: 15px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3)
}

.fruit-description {
    color: rgba(255, 255, 255, .8) !important;
    font-size: .95rem;
    line-height: 1.6;
    margin-bottom: 20px
}

.view-details {
    color: var(--primary-light) !important;
    font-weight: 600;
    font-size: .9rem;
    transition: .3s;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.carousel-btn,
.carousel-btn:disabled:hover {
    background: rgba(255, 255, 255, .95);
    color: var(--primary-dark);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .4)
}

.view-details:hover::after {
    transform: translateX(4px)
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    transition: .3s cubic-bezier(.25, .46, .45, .94);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700
}

.news-section,
section {
    /* `background: var(--dark) !important` was the SHORTHAND, which sets
       background-position: 0% 0% !important — that froze the animated
       shine-line keyframe across every <section>.  Switched to longhand
       background-color so only color is locked. */
    background-color: var(--dark) !important
}

.news-title,
body {
    color: var(--white) !important
}

.carousel-btn:hover {
    background: var(--primary-light);
    color: var(--white);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 12px 40px rgba(255, 215, 0, .3)
}

.carousel-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: translateY(-50%) scale(1)
}

.carousel-btn:disabled:hover {
    transform: translateY(-50%) scale(1)
}

.carousel-btn--left {
    left: 10px
}

.carousel-btn--right {
    right: 10px
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

.carousel-item:nth-child(odd) {
    animation-delay: 0s
}

.carousel-item:nth-child(2n) {
    animation-delay: 3s
}

.carousel-item:hover {
    animation: none
}

.news-section {
    padding: 80px 0
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px
}

.news-card {
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: .3s;
    height: fit-content
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, .4);
    border-color: rgba(255, 215, 0, .3)
}

.news-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4
}

.news-date {
    color: gold !important;
    font-size: .9rem;
    margin-bottom: 15px;
    font-weight: 500
}

.news-summary {
    color: rgba(255, 255, 255, .8) !important;
    line-height: 1.6;
    font-size: .95rem
}

.news-section *,
.products-section * {
    color: inherit !important
}

.partner-link,
.partner-text {
    color: rgba(255, 255, 255, .7);
    font-weight: 500
}

.partner-text {
    font-size: 14px;
    letter-spacing: 1px
}

.partner-link {
    transition: .3s;
    margin-left: 5px
}

.partner-link:hover {
    color: var(--primary-light)
}

.product-detail-section {
    padding: 80px 0;
    background: var(--dark);
    min-height: 100vh
}

.back-btn {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 30px;
    transition: .3s;
    font-family: inherit;
    font-size: 1rem
}

.about-card h3,
.about-story h2,
.certifications h3,
.contact-card h3,
.contact-form-container h3,
.detail-section h3,
.product-detail-header h1,
.product-overview h1,
.quick-product-card h4,
.spec-item h3,
.stat-number {
    font-family: Montserrat, sans-serif
}

.back-btn:hover {
    background: rgba(255, 255, 255, .2);
    transform: translateX(-5px)
}

.product-detail-header h1 {
    font-size: 2.5rem;
    color: var(--white);
    margin-bottom: 30px
}

.product-detail-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    margin-bottom: 50px
}

.product-detail-image {
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .1)
}

.product-detail-image img {
    max-width: 100%;
    max-height: 300px;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .5))
}

.specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px
}

.spec-item {
    background: rgba(255, 255, 255, .05);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .1)
}

.spec-item h3 {
    color: gold;
    margin-bottom: 10px;
    font-size: 1.1rem
}

.spec-item p {
    color: rgba(255, 255, 255, .9);
    line-height: 1.5
}

.certifications h3 {
    color: gold;
    margin-bottom: 15px
}

.cert-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.about-grid,
.contact-content,
.contact-info,
.product-detail-sections,
.product-quick-grid,
.stats-grid {
    display: grid;
    display: grid
}

.cert-badge {
    background: rgba(255, 215, 0, .1);
    color: gold;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, .3);
    font-size: .9rem;
    font-weight: 500
}

.detail-section,
.quick-product-card {
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d)
}

.product-detail-sections {
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.detail-section {
    padding: 30px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .1)
}

.detail-section h3 {
    color: gold;
    margin-bottom: 20px;
    font-size: 1.3rem
}

.calendar-content p,
.quality-content li {
    color: rgba(255, 255, 255, .9);
    margin-bottom: 8px;
    line-height: 1.5
}

.quality-content ul,
.stage-content ul {
    list-style: none;
    padding: 0
}

.quality-content li {
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.quality-content li:last-child,
.stage-content li:last-child {
    border-bottom: none
}

.about-card:hover,
.contact-card:hover,
.quick-product-card:hover {
    border-color: rgba(255, 215, 0, .3)
}

.contact-card strong,
.quality-content strong {
    color: gold
}

.product-quick-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 40px
}

.quick-product-card {
    padding: 25px;
    border-radius: 12px;
    cursor: pointer;
    transition: .3s;
    border: 1px solid rgba(255, 255, 255, .1)
}

.quick-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3)
}

.quick-product-card img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 15px;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, .3))
}

.chart-bar,
.submit-btn {
    width: 100%;
    transition: .3s
}

.quick-product-card h4 {
    color: var(--white);
    margin-bottom: 10px
}

.quick-product-card p {
    color: rgba(255, 255, 255, .7);
    font-size: .9rem
}

.product-overview h1 {
    font-size: 2.5rem;
    color: var(--white);
    margin-bottom: 20px
}

.product-overview>p {
    color: rgba(255, 255, 255, .8);
    max-width: 600px;
    margin: 0 auto 40px;
    font-size: 1.1rem;
    line-height: 1.6
}

.about-card h3,
.about-story h2 {
    color: var(--white)
}

.about-card h3 {
    margin-bottom: 15px;
    font-size: 1.25rem
}

.about-section,
.contact-section {
    padding: 120px 0 80px;
    background: var(--dark);
    min-height: 100vh
}

.about-card,
.about-story,
.contact-card,
.contact-form-container {
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d)
}

.about-header,
.contact-header {
    text-align: center;
    margin-bottom: 60px
}

.about-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 60px
}

.about-card {
    padding: 35px 25px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .1);
    transition: .3s
}

.about-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, .3)
}

.about-icon {
    font-size: 2.8rem;
    margin-bottom: 20px
}

.about-card p {
    color: rgba(255, 255, 255, .8);
    line-height: 1.6;
    font-size: .95rem
}

.about-story {
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .1)
}

.about-story h2 {
    color: var(--white);
    margin-bottom: 20px;
    font-size: 1.8rem
}

.about-story p {
    color: rgba(255, 255, 255, .8);
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 1.1rem
}

.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 30px;
    margin-top: 40px
}

.contact-content,
.contact-info,
.form-row {
    grid-template-columns: 1fr 1fr
}

.stat-number {
    color: gold;
    font-size: 2.3rem;
    font-weight: 700;
    margin-bottom: 8px
}

.stat-label {
    color: rgba(255, 255, 255, .8);
    font-size: .9rem
}

.contact-content {
    gap: 40px;
    align-items: start
}

.contact-info {
    gap: 20px;
    height: fit-content
}

.contact-card {
    padding: 25px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    transition: .3s
}

.contact-card:hover {
    transform: translateY(-5px)
}

.contact-icon {
    font-size: 2.2rem;
    margin-bottom: 15px
}

.contact-card h3 {
    color: var(--white);
    margin-bottom: 12px;
    font-size: 1.1rem
}

.contact-card p {
    color: rgba(255, 255, 255, .8);
    margin-bottom: 6px;
    line-height: 1.4;
    font-size: .9rem
}

.contact-form-container {
    padding: 35px 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .1);
    height: fit-content;
    position: sticky;
    top: 100px;
    min-height: 529px;
    display: flex;
    flex-direction: column
}

.contact-form-container h3 {
    color: var(--white);
    margin-bottom: 25px;
    font-size: 1.3rem
}

.contact-form {
    flex: 1;
    display: flex;
    flex-direction: column
}

.form-row {
    display: grid;
    gap: 15px
}

.form-group {
    margin-bottom: 18px
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 13px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    color: var(--white);
    font-family: inherit;
    font-size: .95rem;
    transition: .3s
}

.certification-item h3,
.journey-stage h3,
.submit-btn {
    font-family: Montserrat, sans-serif
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: 0;
    border-color: gold;
    background: rgba(255, 255, 255, .08)
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, .5)
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
    flex: 1
}

.submit-btn {
    background: linear-gradient(145deg, gold, #ffed4e);
    color: var(--dark);
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: auto
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, .3)
}

.production-chart {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 6px;
    margin: 25px 0;
    padding: 25px 15px;
    background: rgba(255, 255, 255, .03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    min-height: 120px
}

.chart-bar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1
}

.chart-bar {
    max-width: 20px;
    background: linear-gradient(to top, gold, #ffed4e);
    border-radius: 4px 4px 0 0;
    transform-origin: bottom;
    animation: 1s ease-out forwards growBar;
    opacity: 0;
    box-shadow: 0 2px 10px rgba(255, 215, 0, .2)
}

.chart-bar:hover {
    transform: scaleY(1.15);
    box-shadow: 0 0 20px rgba(255, 215, 0, .6)
}

.chart-label {
    color: rgba(255, 255, 255, .8);
    font-size: .75rem;
    font-weight: 600;
    min-height: 15px
}

.chart-legend {
    display: flex;
    justify-content: center;
    margin: 15px 0;
    padding: 10px;
    background: rgba(255, 255, 255, .02);
    border-radius: 8px
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .7);
    font-size: .85rem
}

.legend-color {
    width: 12px;
    height: 12px;
    background: linear-gradient(to top, gold, #ffed4e);
    border-radius: 2px
}

@keyframes growBar {
    from {
        transform: scaleY(0);
        opacity: 0
    }

    to {
        transform: scaleY(1);
        opacity: 1
    }
}

.chart-bar-container:first-child .chart-bar {
    animation-delay: .1s
}

.chart-bar-container:nth-child(2) .chart-bar {
    animation-delay: .2s
}

.chart-bar-container:nth-child(3) .chart-bar {
    animation-delay: .3s
}

.chart-bar-container:nth-child(4) .chart-bar {
    animation-delay: .4s
}

.chart-bar-container:nth-child(5) .chart-bar {
    animation-delay: .5s
}

.chart-bar-container:nth-child(6) .chart-bar {
    animation-delay: .6s
}

.chart-bar-container:nth-child(7) .chart-bar {
    animation-delay: .7s
}

.chart-bar-container:nth-child(8) .chart-bar {
    animation-delay: .8s
}

.chart-bar-container:nth-child(9) .chart-bar {
    animation-delay: .9s
}

.chart-bar-container:nth-child(10) .chart-bar {
    animation-delay: 1s
}

.chart-bar-container:nth-child(11) .chart-bar {
    animation-delay: 1.1s
}

.chart-bar-container:nth-child(12) .chart-bar {
    animation-delay: 1.2s
}

.certifications-section {
    padding: 80px 0;
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.certifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px
}

.certification-item {
    background: rgba(255, 255, 255, .05);
    padding: 30px 25px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    transition: .3s
}

.certification-item:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 215, 0, .3);
    background: rgba(255, 255, 255, .08)
}

.cert-logo {
    height: 60px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

.cert-logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: .3s
}

.certification-item:hover .cert-logo img {
    filter: brightness(0) invert(79%) sepia(67%) saturate(533%) hue-rotate(360deg)
}

.certification-item h3 {
    color: var(--white);
    margin-bottom: 15px;
    font-size: 1.2rem
}

.certification-item p {
    color: rgba(255, 255, 255, .8);
    line-height: 1.5;
    font-size: .95rem
}

.compliance-journey {
    padding: 80px 0;
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d)
}

.journey-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 50px 0
}

.journey-stage {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    padding: 25px 20px;
    transition: .3s;
    cursor: pointer;
    position: relative
}

.journey-stage.active {
    border-color: gold;
    background: rgba(255, 215, 0, .1);
    transform: translateY(-5px)
}

.journey-stage:last-child::after {
    display: none
}

.stage-icon {
    font-size: 2.5rem;
    margin-bottom: 15px
}

.journey-stage h3 {
    color: var(--white);
    margin-bottom: 15px
}

.stage-content {
    display: none;
    text-align: left;
    margin-top: 15px
}

.journey-stage.active .stage-content {
    display: block
}

.stage-content h4 {
    color: gold;
    margin-bottom: 10px;
    font-size: 1rem
}

.stage-content li {
    color: rgba(255, 255, 255, .8);
    padding: 5px 0;
    font-size: .9rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.supervision-note {
    background: rgba(255, 215, 0, .1);
    border: 1px solid rgba(255, 215, 0, .3);
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 15px
}

.supervision-icon {
    font-size: 2rem;
    flex-shrink: 0
}

.supervision-note p {
    color: rgba(255, 255, 255, .9);
    margin: 0;
    line-height: 1.5
}

.global-footer {
    background: linear-gradient(135deg, #0a0a0a 0, #1a1a1a 100%);
    color: #e0e0e0;
    padding: 3rem 0 0;
    margin-top: 4rem;
    border-top: 4px solid #333;
    position: relative
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem
}

.footer-section h4 {
    color: #fff;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid #333;
    padding-bottom: .5rem
}

.logo-section {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem
}

.footer-logo-img {
    width: 40px;
    height: 40px
}

.footer-logo-text {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff
}

.footer-tagline {
    color: #888;
    font-style: italic;
    margin-bottom: 1rem;
    font-size: .95rem
}

.footer-contact p {
    margin: .5rem 0;
    color: #b0b0b0;
    font-size: .9rem
}

.footer-certifications,
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0
}

.footer-links li {
    margin-bottom: .75rem
}

.footer-links a {
    color: #b0b0b0;
    transition: .3s;
    font-size: .95rem
}

.footer-links a:hover {
    color: #fff;
    padding-left: 5px
}

.footer-certifications li {
    margin-bottom: .5rem;
    color: #b0b0b0;
    font-size: .9rem
}

.footer-bottom {
    background: #0a0a0a;
    margin-top: 2rem;
    padding: 1.5rem 0;
    border-top: 1px solid #333
}

.footer-bottom-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem
}

.copyright {
    color: #888;
    font-size: .9rem
}

.legal-links {
    display: flex;
    align-items: center;
    gap: .5rem
}

.legal-links a {
    color: #b0b0b0;
    font-size: .9rem;
    transition: color .3s
}

.legal-links a:hover {
    color: #fff;
    text-decoration: underline
}

.separator {
    color: #666
}

.footer-disclaimer {
    max-width: none;
    margin: 1rem auto 0;
    padding: 0 2rem
}

.footer-disclaimer p {
    font-size: .8rem;
    color: #a0a0a0;
    line-height: 1.4;
    margin: 0
}

body {
    background-color: var(--dark) !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

main {
    flex: 1
}

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a1a1a;
    color: #fff;
    padding: 20px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .3);
    z-index: 10000;
    border-top: 2px solid gold;
    display: none
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center
}

.cookie-text h3 {
    margin: 0 0 10px;
    color: gold;
    font-size: 1.2rem
}

.cookie-text p {
    margin: 0 0 15px;
    line-height: 1.5;
    font-size: .9rem;
    opacity: .9
}

.cookie-options {
    margin: 15px 0
}

.cookie-option {
    display: flex;
    align-items: center;
    margin: 8px 0;
    cursor: pointer;
    font-size: .9rem
}

.cookie-option input[type=checkbox] {
    margin-right: 10px
}

.cookie-option em {
    font-size: .8rem;
    opacity: .7;
    margin-left: 5px
}

.cookie-links {
    display: flex;
    gap: 20px;
    margin-top: 15px !important
}

.cookie-links a {
    color: gold;
    text-decoration: none;
    font-size: .85rem
}

.cookie-links a:hover {
    text-decoration: underline
}

.cookie-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 200px
}

.cookie-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: all .3s ease
}

.cookie-btn.primary {
    background: gold;
    color: #1a1a1a
}

.cookie-btn.primary:hover {
    background: #ffd700;
    transform: translateY(-2px)
}

.cookie-btn.secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .3)
}

.cookie-btn.secondary:hover {
    border-color: gold;
    color: gold
}

.cookie-option input[type=checkbox] {
    width: 18px;
    height: 18px
}

.cookie-option input[type=checkbox]:disabled {
    opacity: .5
}

.back-btn {
    transform: none !important;
    transition: none !important;
    backface-visibility: hidden !important;
    will-change: auto !important
}

.back-btn,
.back-btn * {
    animation: none !important;
    transition: none !important
}

.vm-notify {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 5px;
    color: #fff;
    font-weight: 500;
    z-index: 10000;
    animation: vmSlideIn .3s ease;
    font-family: inherit
}

.vm-notify.success {
    background: #27ae60
}

.vm-notify.error {
    background: #e74c3c
}

@keyframes vmSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

@media (max-width:768px) {
    .cookie-content {
        grid-template-columns: 1fr;
        gap: 15px
    }

    .cookie-buttons {
        flex-direction: row;
        justify-content: space-between
    }

    .cookie-btn {
        flex: 1;
        margin: 0 5px
    }
}

@media (max-width:968px) {

    .contact-content,
    .contact-info {
        grid-template-columns: 1fr
    }

    .contact-content {
        gap: 40px
    }

    .contact-form-container {
        position: static;
        min-height: auto
    }

    .journey-track {
        grid-template-columns: 1fr;
        gap: 15px
    }

    .journey-stage::after {
        display: none
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem
    }

    .logo-section {
        grid-column: 1/-1;
        text-align: center
    }

    .footer-logo {
        justify-content: center
    }
}

@media (max-width:768px) {
    .hero-title {
        font-size: 2.5rem
    }

    .hero-subtitle {
        font-size: 1.1rem
    }

    .nav-links {
        gap: 1.5rem
    }

    .section-title {
        font-size: 2.2rem
    }

    .carousel-item {
        flex: 0 0 250px
    }

    .form-row,
    .product-detail-content,
    .product-detail-sections,
    .specs-grid {
        grid-template-columns: 1fr
    }

    .product-detail-content {
        gap: 30px
    }

    .product-detail-header h1 {
        font-size: 2rem
    }

    .contact-form-container {
        padding: 25px 20px
    }

    .form-group textarea {
        min-height: 100px
    }

    .production-chart {
        gap: 4px;
        padding: 20px 10px
    }

    .chart-bar {
        max-width: 16px
    }

    .chart-label {
        font-size: .7rem
    }

    .certifications-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .cert-logo {
        height: 50px
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center
    }

    .footer-bottom-content {
        flex-direction: column;
        text-align: center
    }

    .legal-links {
        justify-content: center
    }

    .nav-container {
        flex-wrap: nowrap !important;
        gap: 1rem !important;
        align-items: center !important
    }

    .logo-text {
        font-size: 1.3rem !important;
        white-space: nowrap !important
    }

    .nav-links {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: .8rem !important;
        margin: 0 !important
    }

    .nav-links li {
        flex-shrink: 1 !important
    }

    .nav-links a {
        font-size: .85rem !important;
        padding: .4rem .6rem !important;
        white-space: nowrap !important
    }
}

@media (max-width:480px) {

    .footer-bottom-content,
    .footer-container,
    .footer-disclaimer {
        padding: 0 1rem
    }

    .global-footer {
        padding: 2rem 0 0
    }

    .logo-text {
        font-size: 1.1rem !important
    }

    .nav-links {
        gap: .5rem !important
    }

    .nav-links a {
        font-size: .8rem !important;
        padding: .3rem .5rem !important
    }
}
/* ============================================================================
   Phase B — Layout overrides (appended after main stylesheet)
   These rules deliberately come last so they override earlier declarations
   without rewriting them. Do NOT re-minify in a way that drops these.
   ============================================================================ */

/* Tighten the visual gap between hero and the products carousel */
.products-section { padding: 60px 0 100px; }
.hero-content { height: auto; min-height: calc(100vh - 100px); }

/* Hero <video> background colour fallback (shows before/while video loads
   and on browsers that block autoplay).  Same #0c0f1d as `--dark`. */
.video-background { background: #0c0f1d; }
.video-background video { display: block; }

/* Metallic gold transition divider — used between hero and products to
   give the boundary an intentional aesthetic instead of dead dark space. */
.section-divider {
    height: 2px;
    margin: 0 auto;
    max-width: 80%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 175, 55, 0)    10%,
        rgba(212, 175, 55, 0.55) 30%,
        rgba(255, 222, 130, 0.95) 50%,
        rgba(212, 175, 55, 0.55) 70%,
        rgba(212, 175, 55, 0)    90%,
        transparent 100%);
    box-shadow: 0 0 18px rgba(255, 222, 130, 0.25);
    position: relative;
    z-index: 5;
}

/* ----- Carousel: replace transform-based slide animation with native CSS
   scroll-snap.  Native scroll = real momentum on iOS/Android, no JS touch
   handling required, far smoother. */
.carousel-track {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transition: none;          /* override the .6s transform transition */
    /* `transform: none !important` removed (May 8): with the CSS-marquee
       rewrite it was clobbering the keyframe animation values via the
       cascade (important author > animation). */
    /* keep existing flex/gap/padding from the earlier rule */
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item { scroll-snap-align: center; }

/* On phones the legacy 60px side padding crowded the viewport; tighten it */
@media (max-width: 768px) {
    .carousel-track { padding: 40px 20px; gap: 20px; }
    .carousel-item { flex: 0 0 calc(100vw - 80px); max-width: 320px; }
}

/* ============================================================================
   Phase C — Aesthetic upgrades (icons, gradients, animations, metallic accents)
   ============================================================================ */

/* Inline SVG icon system referenced via <use href="assets/icons.svg#name"/>.
   Width/height tracks the parent font-size, so placing an .icon inside
   .contact-icon (font-size: 2.2rem) yields a 2.2rem icon automatically. */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Tint symbolic icons (cards, journey stages, contact, etc.) gold by default.
   Stroke uses currentColor so this propagates without touching the SVG. */
.contact-icon,
.about-icon,
.stage-icon,
.supervision-icon { color: #d4af37; }

.cookie-text h3 .icon { color: #d4af37; margin-right: 0.5rem; }

/* Inline-with-text icon variants (lists, buttons, footer credits) need a
   slightly smaller size and a bit of right-margin for proper kerning. */
.stage-content li .icon,
.quality-content li .icon,
.footer-certifications li .icon {
    width: 0.95em;
    height: 0.95em;
    margin-right: 0.4em;
    color: #d4af37;
}

.footer-contact p .icon {
    width: 1em;
    height: 1em;
    margin-right: 0.4em;
    color: #d4af37;
}

/* ----- Metallic gold gradient for premium accents (CTA, submit). The
   shimmer is achieved by panning a wide gradient across hover. */
.cta-button,
.submit-btn {
    background: linear-gradient(135deg,
        #8a6608 0%,
        #d4af37 22%,
        #ffe28a 50%,
        #d4af37 78%,
        #8a6608 100%) !important;
    background-size: 220% 100% !important;
    background-position: 0% 0%;
    color: #0c0f1d !important;
    transition: background-position 0.7s ease, transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.cta-button:hover,
.submit-btn:hover {
    background-position: 100% 0% !important;
    transform: translateY(-3px);
    box-shadow: 0 14px 38px rgba(212, 175, 55, 0.4), 0 0 0 1px rgba(255, 226, 138, 0.5) inset;
    filter: brightness(1.05);
}

/* ----- Scroll-into-view fade animation. Sections marked .scroll-fade are
   invisible + slightly dropped; an IntersectionObserver in main.js adds
   .in-view when they enter the viewport. */
.scroll-fade {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}
.scroll-fade.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Subtle gold glow on carousel-item hover, on top of the existing lift */
.carousel-item:hover {
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.55),
        0 0 80px rgba(212, 175, 55, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(212, 175, 55, 0.35) !important;
}

/* About-card and contact-card hover glow */
.about-card:hover,
.contact-card:hover {
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(212, 175, 55, 0.25) inset !important;
}

/* Hero copy slides up on page load */
@keyframes hero-rise {
    /* Start at opacity 0.001 (not 0) so the element remains a paintable LCP
       candidate from first paint while still visually rising in. */
    from { opacity: 0.001; transform: translateY(28px); }
    to   { opacity: 1;     transform: translateY(0); }
}
.hero-title    { animation: hero-rise 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.hero-subtitle { animation: hero-rise 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s both; }
.hero-content .cta-button { animation: hero-rise 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.30s both; }

/* Section-divider soft pulse.  The earlier `box-shadow` keyframe was
   actually paint-bound (Lighthouse flagged this as a non-composited
   animation despite the comment).  Switched to opacity, which IS
   composited — we keep a static box-shadow so the divider still glows. */
.section-divider {
    box-shadow: 0 0 14px rgba(255, 222, 130, 0.45);
    animation: divider-glow 4s ease-in-out infinite;
}
@keyframes divider-glow {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* Respect prefers-reduced-motion: turn off the kinetic stuff but keep
   final visual states intact. */
@media (prefers-reduced-motion: reduce) {
    .scroll-fade { opacity: 1; transform: none; transition: none; }
    .hero-title, .hero-subtitle, .hero-content .cta-button,
    .section-divider, .carousel-item { animation: none; }
    .cta-button, .submit-btn { background-size: 100% 100% !important; }
}

/* ============================================================================
   Phase H — Aesthetic upgrades chosen by user (May 2026):
     - Deep emerald + gold-underline CTA (replaces metallic gold)
     - Sticky "Request Quote" + WhatsApp floating CTAs
     - Homepage stats strip with gold-gradient counters
     - Carousel: scroll-position center scaling (replaces float animation)
     - Product detail: Request Quote CTA + chart polish
   ============================================================================ */

/* ----- Minimal gold CTA: transparent base, thin gold ring, soft gold wash on hover.
   Replaced the emerald + gold-underline version after user feedback (May 7, 2026). ----- */
.cta-button,
.submit-btn {
    background: transparent !important;
    color: #ffe28a !important;
    border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
    padding: 16px 38px !important;
    font-size: 1rem !important;
    letter-spacing: 0.06em;
    font-weight: 600;
    border-radius: 50px !important;
    position: relative;
    overflow: hidden;
    transition: color 0.45s ease,
                border-color 0.45s ease,
                transform 0.4s cubic-bezier(.2, .8, .2, 1),
                box-shadow 0.45s ease;
    text-shadow: none !important;
    box-shadow: none !important;
    isolation: isolate;
}
.cta-button::before,
.submit-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(212, 175, 55, 0.22) 0%,
        rgba(255, 226, 138, 0.12) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
    z-index: -1;
    border-radius: 50px;
    /* Override the slide-from-left geometry the previous version used */
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
}
.cta-button:hover::before,
.submit-btn:hover::before {
    transform: scaleX(1);
    left: auto !important;
}
.cta-button:hover,
.submit-btn:hover {
    color: #ffffff !important;
    border-color: rgba(212, 175, 55, 0.85) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.18) !important;
    background: transparent !important;
    filter: none !important;
}

/* ----- Sticky CTA — both buttons in matching gold-glass style, side-by-side
   (revised May 7 — user wanted WhatsApp to match Quote, no green) ----- */
.sticky-cta {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: row;            /* horizontal — was vertical */
    align-items: center;
    gap: 8px;
    z-index: 9000;
}
.sticky-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 50px;
    font-weight: 500;
    font-family: Montserrat, sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-decoration: none;
    /* Identical gold-glass surface on both buttons */
    background: rgba(20, 22, 30, 0.6);
    color: #ffe28a;
    border: 1px solid rgba(212, 175, 55, 0.45);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: all 0.4s cubic-bezier(.2, .8, .2, 1);
}
.sticky-btn:hover {
    background: rgba(212, 175, 55, 0.18);
    border-color: rgba(212, 175, 55, 0.85);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(212, 175, 55, 0.25);
}
.sticky-btn .icon { width: 1.05em; height: 1.05em; }

/* WhatsApp button now visually identical to Quote.  Icon-only, square padding. */
.sticky-btn--whatsapp {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
}
.sticky-btn--whatsapp .icon { width: 18px; height: 18px; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 600px) {
    .sticky-cta { bottom: 14px; right: 14px; gap: 6px; }
    .sticky-btn--quote span { display: none; }
    .sticky-btn--quote {
        width: 40px; height: 40px;
        padding: 0;
        justify-content: center;
    }
    .sticky-btn--quote .icon { width: 18px; height: 18px; }
}

/* ----- Stats strip — TRANSPARENT bg so it sits seamlessly on the page bg.
   The previous gradient version was creating the "dragged-down background"
   seam the user flagged.  Numbers + labels stay; their styling is unchanged. ----- */
.stats-strip {
    padding: 50px 20px;
    background: transparent;
    border: none;
    position: relative;
    z-index: 5;
}
.stats-strip .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1100px;
    margin: 0 auto;
    gap: 30px;
}
.stats-strip .stat-item { text-align: center; }
.stats-strip .stat-number {
    font-family: Montserrat, sans-serif;
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, #b8860b 0%, #d4af37 25%, #ffe28a 50%, #d4af37 75%, #b8860b 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stats-strip .stat-label {
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    margin-top: 0.7rem;
    font-weight: 500;
}
@media (max-width: 720px) {
    .stats-strip { padding: 30px 16px; }
    .stats-strip .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .stats-strip .stat-number { font-size: 2.4rem; }
}

/* ----- Carousel: continuous auto-scroll BUT swipe-friendly.
   Uses native horizontal scroll on the track + a JS rAF loop that increments
   scrollLeft each frame.  Native scroll = real touch/momentum.  Loop is
   seamless because JS duplicates the children once and resets scrollLeft when
   it crosses the half-width boundary. ----- */
.carousel-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 0 !important;
    overflow: hidden;
    /* Soft fade on horizontal edges instead of hard-clipping */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    position: relative;
}
.carousel-track {
    display: flex !important;
    gap: 30px !important;
    /* Native horizontal scroll on the track itself */
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;     /* JS animates; CSS smooth would fight it */
    -webkit-overflow-scrolling: touch;
    /* `transform: none !important` and `animation: none !important` removed
       (May 8): the new CSS-marquee rewrite uses keyframe transforms; these
       legacy declarations from the JS-driven era were clobbering them. */
    padding: 0 60px !important;            /* breathing room at sides */
    width: 100%;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
    will-change: scroll-position;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item {
    isolation: isolate;
    backface-visibility: hidden;
    will-change: transform, box-shadow;
}

/* No arrow buttons in marquee mode */
.carousel-btn { display: none !important; }

/* Cleaner hover: lift + glow.  The ::before/::after halo overlays were the
   source of the "rounded edges look like straight lines" artifact when scaled —
   we suppress them on hover so only the card itself + box-shadow render. */
.carousel-item:hover {
    transform: translateY(-12px) !important;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(212, 175, 55, 0.55),
        0 0 80px rgba(212, 175, 55, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
}
.carousel-item:hover::before,
.carousel-item:hover::after,
.carousel-item:hover .fruit-image::before {
    opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    .carousel-track { animation: none !important; }
}

/* ----- Product detail: Request Quote CTA section (recolored to match minimal-gold theme) ----- */
.product-quote-cta {
    margin-top: 50px;
    padding: 35px 30px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.product-quote-cta h3 {
    color: #ffe28a;
    margin-bottom: 6px;
    font-size: 1.4rem;
    font-family: Montserrat, sans-serif;
}
.product-quote-cta p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.5;
    max-width: 520px;
}
.product-quote-cta .cta-button {
    flex-shrink: 0;
    padding: 14px 28px !important;
    font-size: 0.95rem !important;
}

/* ============================================================================
   Hero 3D layered parallax (replaces the looping mp4 hero video).
   GPU-light: only 2D translates and small 3D rotations on a single child.
   Idle drift is CSS-only; cursor parallax is wired in main.js (initHero3D).
   ============================================================================ */
.hero-3d {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    perspective: 1200px;
    background:
        radial-gradient(ellipse at 50% 70%, rgba(212, 175, 55, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #0c0f1d 0%, #0a0d18 100%);
}
.hero-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform-origin: center center;
    transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}
.hero-layer svg { width: 100%; height: 100%; display: block; }

/* Idle drift — different durations per layer to avoid visual sync */
@keyframes hero-drift-a { 0%,100% { transform: translate3d(0,0,0); }       50% { transform: translate3d(8px,-5px,0); } }
@keyframes hero-drift-b { 0%,100% { transform: translate3d(0,0,0); }       50% { transform: translate3d(-12px,7px,0); } }
@keyframes hero-drift-c { 0%,100% { transform: translate3d(0,0,0); }       50% { transform: translate3d(15px,-8px,0); } }
@keyframes hero-drift-d { 0%,100% { transform: translate3d(0,0,0) rotateY(-1deg); }
                          50%     { transform: translate3d(20px,-10px,0) rotateY(1deg); } }

.hero-3d .hero-layer--atmosphere { animation: hero-drift-a 14s ease-in-out infinite; }
.hero-3d .hero-layer--mountains  { animation: hero-drift-b 11s ease-in-out infinite; }
.hero-3d .hero-layer--splash     { animation: hero-drift-c  9s ease-in-out infinite; }
.hero-3d .hero-layer--fruit      { animation: hero-drift-d  7s ease-in-out infinite; }

/* When the user is actively moving the cursor, JS adds .cursor-active and
   the idle keyframes are suspended so JS-driven transforms control fully */
.hero-3d.cursor-active .hero-layer { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .hero-3d .hero-layer { animation: none !important; transition: none !important; }
}

/* ============================================================================
   Carousel hover-clip fix (May 8, 2026):
     - container uses overflow-x: clip instead of overflow: hidden so the
       vertical hover-lift can extend out of the box without being cut.
     - image-hover zoom toned from 1.18 to 1.06 so the image stays well
       inside the card's rounded corners (no top-edge truncation).
   ============================================================================ */
.carousel-container {
    overflow: visible !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    padding: 80px 0 !important;
}
/* Older Safari fallback that doesn't yet honour overflow:clip — wrap the
   horizontal clip in a contain layer so the y-axis stays free. */
@supports not (overflow-x: clip) {
    .carousel-container { contain: layout paint; }
}

.carousel-item:hover .fruit-image img {
    transform: scale(1.06) !important;   /* was scale(1.18) translateY(-8px) */
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.45));
}

/* ============================================================================
   From Our Farms — photo gallery (May 8, 2026)
   Driven by /js/farm-photos.js.  Filters auto-derive from photo categories.
   Cards stagger-fade when the section enters the viewport (the existing
   .scroll-fade IntersectionObserver toggles .in-view on the section).
   ============================================================================ */
.farms-section {
    padding: 80px 20px;
    background: transparent;
    position: relative;
    z-index: 4;
}
.farms-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.farms-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 30px 0 40px;
}
.farms-filter:empty { display: none; }
.farms-filter-btn {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(212, 175, 55, 0.25);
    padding: 8px 18px;
    border-radius: 50px;
    cursor: pointer;
    font-family: Montserrat, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    transition: all 0.3s ease;
}
.farms-filter-btn:hover {
    color: #ffe28a;
    border-color: rgba(212, 175, 55, 0.55);
}
.farms-filter-btn.active {
    background: rgba(212, 175, 55, 0.18);
    color: #fff;
    border-color: rgba(212, 175, 55, 0.85);
}

.farms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
}
.farms-grid:empty + .farms-empty {
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-style: italic;
}

.farm-item {
    /* button reset */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font-family: inherit;

    /* Visual */
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 4 / 3;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    isolation: isolate;

    /* Stagger fade-in (delay scales with --idx assigned by JS) */
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity     0.85s cubic-bezier(.2, .8, .2, 1) calc(var(--idx, 0) * 0.07s),
        transform   0.85s cubic-bezier(.2, .8, .2, 1) calc(var(--idx, 0) * 0.07s),
        box-shadow  0.4s ease,
        border-color 0.3s ease;
}
.farms-section.in-view .farm-item {
    opacity: 1;
    transform: translateY(0);
}
.farm-item.is-hidden { display: none; }

.farm-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(.2, .8, .2, 1);
}
.farm-item:hover img,
.farm-item:focus-visible img { transform: scale(1.06); }

.farm-item:hover,
.farm-item:focus-visible {
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(212, 175, 55, 0.45),
        0 0 36px rgba(212, 175, 55, 0.12);
    outline: none;
}

.farm-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 14px 18px 16px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85));
    color: #ffe28a;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transform: translateY(110%);
    transition: transform 0.4s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}
.farm-item:hover .farm-caption,
.farm-item:focus-visible .farm-caption { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .farm-item { transition: none; opacity: 1; transform: none; }
    .farm-item:hover img { transform: none; }
}

/* ----- Lightbox (shared full-screen photo viewer) ----- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(0, 0, 0, 0.92);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-content {
    margin: 0;
    text-align: center;
    max-width: min(90vw, 1400px);
}
.lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
    margin: 0 auto;
}
.lightbox-caption {
    color: #ffe28a;
    margin-top: 18px;
    font-family: Montserrat, sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}
.lightbox-caption:empty { display: none; }
.lightbox-close {
    position: absolute;
    top: 22px;
    right: 26px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: rgba(20, 22, 30, 0.6);
    color: #ffe28a;
    border: 1px solid rgba(212, 175, 55, 0.5);
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    transition: all 0.3s ease;
}
.lightbox-close:hover {
    background: rgba(212, 175, 55, 0.18);
    color: #fff;
    border-color: rgba(212, 175, 55, 0.85);
}

/* ============================================================================
   FINAL carousel override (May 8, 2026) — supersedes EVERY earlier
   .carousel-* rule in this file.  These rules sit at the bottom so they
   win the cascade unconditionally.

   Why this rewrite:
     - mask-image was causing the "upper edge clipped" perception (it
       creates a paint clip box).  Replaced with two ::before/::after
       gradient overlays that fade the sides without clipping anything.
     - overflow on container/track is now fully `visible` so the hover
       lift CANNOT be cut at the top.
     - JS now drives transform: translate3d() instead of scrollLeft,
       which means no native scroll engine to fight with.  Single set
       of cards, true infinite via DOM rotation.
   ============================================================================ */
.carousel-container {
    position: relative !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 90px 0 !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
}
/* Side-fade gradient overlays — visual edge softening without clipping */
.carousel-container::before,
.carousel-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    z-index: 5;
    pointer-events: none;
}
.carousel-container::before {
    left: 0;
    background: linear-gradient(90deg, var(--dark) 0%, rgba(12,15,29,0) 100%);
}
.carousel-container::after {
    right: 0;
    background: linear-gradient(90deg, rgba(12,15,29,0) 0%, var(--dark) 100%);
}

/* The track is now transform-driven.  Width is content-sized so it can
   extend wider than the container; the container clips horizontally only
   visually via the two gradient overlays above. */
.carousel-track {
    display: flex !important;
    gap: 30px !important;
    width: max-content !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    /* NO `transform: ... !important` here.  CSS !important would beat the
       inline transform that JS sets every frame, freezing the track at 0. */
    transition: none !important;
    animation: none !important;
    padding: 0 !important;
    will-change: transform;
    cursor: grab;
    user-select: none;
    touch-action: pan-y;  /* allow vertical page scroll, capture horizontal swipe */
}
.carousel-track:active { cursor: grabbing; }

/* Cards keep their existing visual styling but we re-state hover so
   nothing else can creep in. */
.carousel-item {
    isolation: isolate !important;
    backface-visibility: hidden !important;
    will-change: transform, box-shadow !important;
    animation: none !important;
}
.carousel-item:hover {
    transform: translateY(-12px) !important;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(212, 175, 55, 0.55),
        0 0 80px rgba(212, 175, 55, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
}
.carousel-item:hover::before,
.carousel-item:hover::after,
.carousel-item:hover .fruit-image::before {
    opacity: 0 !important;
}
.carousel-item:hover .fruit-image img {
    transform: scale(1.06) !important;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.45));
}

/* Override the products-section's overflow:hidden ONLY for the carousel
   region, so the hover lift can't be vertically clipped by the section.
   We apply it via a wrapping helper class added on the section in HTML. */
.products-section { overflow: visible !important; }

@media (prefers-reduced-motion: reduce) {
    .carousel-track { transform: none !important; }
}

/* ============================================================================
   Hero fruit image — photographic avocado with full 3D feel (May 8, 2026).
   Combines four interlocking effects so the fruit reads as a real object
   floating in front of the page:
     1. 3D perspective tilt — fruit rotates rotateX/Y toward cursor
     2. Drop-shadow that shifts OPPOSITE the tilt — implies a fixed light source
     3. Specular shine — bright spot follows cursor across the fruit surface
     4. Gold glow halo — atmosphere shifts with cursor
   Plus subtle idle floating when the cursor is at rest.
   ============================================================================ */

.hero-3d { perspective: 1500px; }

.hero-layer--fruit {
    pointer-events: none;
    z-index: 4;
}

.hero-fruit-stage {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.hero-fruit-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(380px, 58vw, 980px);
    aspect-ratio: 1672 / 941;       /* exact ratio of hero-fruit.webp */
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
    will-change: transform;
    /* Idle gentle float — JS suspends it on .cursor-active */
    animation: hero-fruit-float 7s ease-in-out infinite;
}
@keyframes hero-fruit-float {
    0%, 100% { transform: translate(-50%, calc(-50% + 0px)); }
    50%      { transform: translate(-50%, calc(-50% - 12px)); }
}
.hero-3d.cursor-active .hero-fruit-wrap { animation: none; }

.hero-fruit-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Baked-in drop shadow that the JS-driven .hero-fruit-shadow augments */
    filter: drop-shadow(0 20px 32px rgba(0, 0, 0, 0.55));
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    will-change: transform, filter;
}

/* Specular shine layered ON the fruit, blended in overlay so it brightens
   without obscuring the avocado's existing texture. */
.hero-fruit-shine {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 38%);
    mix-blend-mode: overlay;
    pointer-events: none;
    transition: background 0.25s ease-out;
    will-change: background;
}

/* Soft directional shadow under the fruit on the dark backdrop */
.hero-fruit-shadow {
    position: absolute;
    left: 50%;
    top: calc(50% + clamp(180px, 24vw, 380px));
    width: clamp(280px, 36vw, 600px);
    height: 56px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 70%);
    filter: blur(20px);
    transform: translate(-50%, 0);
    transition: transform 0.5s cubic-bezier(.2, .8, .2, 1), opacity 0.5s ease;
    will-change: transform, opacity;
    z-index: -1;
    pointer-events: none;
}

/* Gold glow halo behind the fruit — adds atmosphere + on-brand color */
.hero-fruit-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(540px, 72vw, 1200px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.28) 0%, rgba(212, 175, 55, 0) 60%);
    filter: blur(40px);
    transform: translate(-50%, -50%);
    transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

/* Subtle pulse on the glow for "alive" feeling at rest */
@keyframes hero-glow-pulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}
.hero-fruit-glow { animation: hero-glow-pulse 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .hero-fruit-wrap, .hero-fruit-glow { animation: none !important; }
}

/* ============================================================================
   Hero fruit v2 (May 8, 2026 — bigger, no yellow tint, real depth via reflection).
   - Width clamp(620px, 88vw, 1500px) — much larger presence
   - Yellow halo REMOVED entirely (user disliked the gold tint)
   - Reflection underneath = a mirrored, blurred, faded copy that fades out at
     the bottom.  Anchors the fruit visually like it's floating over a glossy
     dark surface — that's the real "depth" trick (no yellow needed)
   - Drop shadow stays (now darker + bigger) so the fruit clearly hovers
   - JS uses lerp easing for smooth cursor follow (in main.js)
   ============================================================================ */
.hero-fruit-wrap {
    width: clamp(620px, 88vw, 1500px) !important;
    aspect-ratio: 1672 / 941;
}
.hero-fruit-img {
    filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.7));
}

/* Mirrored reflection underneath — provides "floating above surface" depth */
.hero-fruit-reflection {
    position: absolute;
    left: 50%;
    top: calc(50% + clamp(180px, 26vw, 460px));
    width: clamp(580px, 82vw, 1400px);
    aspect-ratio: 1672 / 941;
    transform: translate(-50%, 0) scaleY(-1);
    opacity: 0.18;
    filter: blur(8px);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 55%);
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 55%);
    pointer-events: none;
    z-index: -1;
}
.hero-fruit-img-reflect {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Larger, deeper drop shadow under the main fruit */
.hero-fruit-shadow {
    width: clamp(360px, 50vw, 900px) !important;
    height: 70px !important;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 70%) !important;
    filter: blur(28px) !important;
}

/* Hide the now-unused gold glow if it's still in the DOM (legacy markup) */
.hero-fruit-glow { display: none !important; }


/* ============================================================================
   Farm gallery v2 (May 8, 2026 — asymmetric tetris grid + varied entrance).
   - 3-column desktop grid with one tall portrait left, one wide on top, two
     small under = visually asymmetric like a tetris piece
   - Each card enters from a different direction with a stagger delay
   - Mobile: single column, all enter from below
   - Filter pills hidden when only 1 category is in the data (handled in JS)
   ============================================================================ */
.farms-grid {
    display: grid !important;
    grid-template-columns: 1.3fr 1fr 1fr !important;
    grid-template-rows: 270px 270px;
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
}
.farm-item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    --enter-x: -90px;
    --enter-y: 0;
    --enter-rot: -2deg;
    --enter-delay: 0s;
}
.farm-item:nth-child(2) {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    --enter-x: 0;
    --enter-y: -100px;
    --enter-rot: 1.5deg;
    --enter-delay: 0.18s;
}
.farm-item:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    --enter-x: 0;
    --enter-y: 90px;
    --enter-rot: -1deg;
    --enter-delay: 0.36s;
}
.farm-item:nth-child(4) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    --enter-x: 90px;
    --enter-y: 0;
    --enter-rot: 2deg;
    --enter-delay: 0.54s;
}

.farm-item {
    aspect-ratio: auto !important;       /* ratio comes from grid cell, not 4:3 */
    opacity: 0;
    transform: translate(var(--enter-x, 0), var(--enter-y, 0)) rotate(var(--enter-rot, 0));
    transition:
        opacity 1s cubic-bezier(.2, .8, .2, 1) var(--enter-delay, 0s),
        transform 1.1s cubic-bezier(.18, .89, .32, 1.18) var(--enter-delay, 0s),
        box-shadow 0.4s ease,
        border-color 0.3s ease;
}
.farms-section.farms-revealed .farm-item {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
}

@media (max-width: 768px) {
    .farms-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        max-width: 480px;
        gap: 14px;
    }
    .farm-item:nth-child(n) {
        grid-column: 1 / 2 !important;
        grid-row: auto !important;
        aspect-ratio: 4 / 3 !important;
        --enter-x: 0;
        --enter-y: 50px;
        --enter-rot: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .farm-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================================
   FINAL FINAL pass (May 8, 2026 evening) — surgical fixes per user feedback:
     • Carousel: switched from JS rAF to pure CSS marquee (cards cloned 2x in JS)
       — browser-driven keyframes that cannot be perceived as static.
     • Hero fruit: lower in frame + bigger so it fills the visible hero box.
     • Hero shine artifact: rectangular bright clip removed entirely.
     • Backdrop: cartoonish mountain/splash SVGs hidden; cinematic spotlight,
       vignette, and floor reflection plane added via pseudo-elements.
     • Gallery: entrance slowed (1.6s) with staggered delays for a deliberate
       reveal; IntersectionObserver already drives `.in-view` from .scroll-fade.
   ============================================================================ */

/* ---- Carousel: native browser scroll (final — the simple model) -----
   Native overflow-x scrolling works without JS.  Mobile gets free
   momentum scrolling and touch.  Desktop gets the arrow buttons
   (re-enabled below) which call scrollBy().  Cards have scroll-snap
   so they snap to position.  Stops at last card — no infinite loop.
   ---------------------------------------------------------------------- */
.carousel-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 30px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    transform: none !important;
    animation: none !important;
    width: 100% !important;
    padding: 60px 60px 90px !important;  /* room for hover-lift on top */
    box-sizing: border-box !important;
    cursor: grab !important;
    /* Allow horizontal swipe to reach the track on touch devices */
    touch-action: pan-x pan-y !important;
}
.carousel-track::-webkit-scrollbar { display: none !important; }
.carousel-item {
    scroll-snap-align: start !important;
    flex: 0 0 320px !important;
}
@media (max-width: 768px) {
    .carousel-item {
        flex: 0 0 calc(100vw - 80px) !important;
        max-width: 320px !important;
    }
}

/* Container: don't clip — let the track manage its own horizontal scroll
   and let the hover-lift breathe vertically. */
.carousel-container {
    overflow: visible !important;
}
/* Section clamps page-level horizontal overflow so the wide track can
   never make the BODY scroll horizontally. */
.products-section {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* Re-enable arrow buttons (were display: none) — they call moveCarousel
   which uses native scrollBy, works alongside swipe. */
.carousel-btn {
    display: flex !important;
}
@media (max-width: 768px) {
    /* On mobile, swipe is enough; arrows take screen real estate */
    .carousel-btn { display: none !important; }
}

/* Kill the dark gradient bracket overlays the user disliked. */
.carousel-container::before,
.carousel-container::after {
    display: none !important;
}

/* ---- Hero shine: kill the rectangular bright artifact ----------------- */
.hero-fruit-shine { display: none !important; }

/* ---- Hero backdrop: hide cartoon layers, add cinematic studio look ---- */
.hero-3d .hero-layer--mountains,
.hero-3d .hero-layer--splash {
    display: none !important;
}
/* Tone down the atmosphere stars/glow so they read as subtle dust motes */
.hero-3d .hero-layer--atmosphere {
    opacity: 0.55;
}
/* Studio backdrop: warm overhead spotlight + bottom warm sheen + vignette.
   Layered as a single ::before so we only paint once. */
/* ::before is now a TEXT-READABILITY SCRIM (was a warm studio backdrop —
   replaced because the new magenta-black theme provides the dark mood
   directly via .hero-3d's gradient).  Sits ABOVE the fruit (z-index 6)
   with a transparent middle band so the fruit's central detail stays
   crisp, while the dark top + bottom darken the fruit where the title
   and CTA overlay it. */
.hero-3d::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.20) 16%,
        rgba(0, 0, 0, 0)    30%,
        rgba(0, 0, 0, 0)    70%,
        rgba(0, 0, 0, 0.40) 84%,
        rgba(0, 0, 0, 0.65) 100%
    );
}
/* Subtle horizon line + glossy floor reflection plane at the bottom */
.hero-3d::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    pointer-events: none;
    z-index: 2;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(212, 175, 55, 0.04) 60%,
            rgba(212, 175, 55, 0.08) 90%,
            rgba(255, 255, 255, 0.04) 100%);
}
/* Fruit / shadow / reflection layers must paint above the new backdrop */
.hero-layer--fruit { z-index: 5 !important; }
.hero-fruit-stage   { z-index: 5; }

/* ---- Hero text composition: anchor title higher, fruit lower ----------
   Default hero-content uses `justify-content: center`, putting the title at
   exactly the same vertical band as the fruit. Anchoring the text closer to
   the top with a top-padding gives the fruit room to dominate the lower
   portion of the box without collision.  Subtle scrim behind the text via
   text-shadow stack so the gradient title stays readable over warm fruit. */
.hero-section .hero-content {
    justify-content: flex-start !important;
    padding-top: clamp(40px, 6vh, 100px) !important;
}
.hero-title,
.hero-subtitle,
.hero-content .cta-button {
    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(0, 0, 0, 0.4);
}
/* Tighter vertical rhythm so the title block fits cleanly above the fruit */
.hero-title    { margin-bottom: 0.8rem !important; }
.hero-subtitle { margin-bottom: 1.4rem !important; }

/* ---- Hero fruit: balanced placement -------------------------------- */
.hero-fruit-wrap {
    /* min:280 — small enough to fit mobile viewports.
       max:1500 — caps growth on ultra-wide. */
    width: clamp(280px, 84vw, 1380px) !important;
    /* 64% — slightly below center.  Title block (top, padding 6vh) and CTA
       (bottom, anchored via flex) sit above and below the fruit cleanly. */
    top: 64% !important;
}
.hero-fruit-shadow {
    top: calc(64% + clamp(150px, 20vw, 320px)) !important;
}
.hero-fruit-reflection {
    top: calc(64% + clamp(150px, 22vw, 400px)) !important;
}
/* Anchor CTA to the bottom of hero-content so the fruit sits between the
   title and the CTA cleanly, regardless of fruit size. */
.hero-section .hero-content .cta-button {
    margin-top: auto !important;
    margin-bottom: clamp(80px, 12vh, 160px) !important;
}

/* ---- Mobile-specific tuning ------------------------------------------ */
@media (max-width: 768px) {
    /* Bigger, well-centered fruit on mobile (per user feedback: previous
       size felt too small with too much empty space around it). */
    .hero-fruit-wrap {
        width: clamp(320px, 96vw, 580px) !important;
        top: 50% !important;
    }
    .hero-fruit-shadow {
        top: calc(50% + clamp(120px, 30vw, 200px)) !important;
    }
    .hero-fruit-reflection {
        top: calc(50% + clamp(120px, 30vw, 200px)) !important;
    }
    .hero-section .hero-content {
        padding-top: clamp(32px, 6vh, 80px) !important;
    }
    .hero-content .cta-button {
        margin-top: auto;
        margin-bottom: clamp(60px, 12vh, 120px);
    }
    .hero-subtitle { margin-bottom: 1rem !important; }
    .hero-title, .hero-subtitle, .hero-content .cta-button {
        text-shadow:
            0 2px 18px rgba(0, 0, 0, 0.85),
            0 0 30px rgba(0, 0, 0, 0.6) !important;
    }
}

/* (Removed: .hero-section::before scrim — moved INTO .hero-3d::before above
   so the scrim shares .hero-3d's stacking context and doesn't fight the
   sibling-painting order between .hero-3d and .hero-section.) */

/* ============================================================================
   Unified theme: deep near-black with subtle cool magenta hint (May 8 final).
   Previous palette read as wine/burgundy because the saturation was too
   high.  This refined palette leans cooler and darker — sophisticated
   "near-black with a whisper of magenta" rather than warm wine.
   ============================================================================ */
:root {
    --dark: #06040a;
    --dark-deep: #04030a;
    --bg-1: #08060d;
    --bg-2: #0c0913;
    --magenta-accent: rgba(120, 80, 140, 0.05);
}
/* Lock page-level horizontal scroll so a wide content area can NEVER
   make the page itself horizontally scrollable. */
html, body { overflow-x: hidden; }

/* Body: deep black base + ONE document-spanning shine on body::before.
   Position:relative on body anchors body::before; the pseudo spans the
   full document height and animates its bg-position so the shine line
   travels horizontally across the whole page as a SINGLE coherent line
   (replaces the previous per-section shine which produced multiple lines
   when two sections were on screen at once). */
body {
    background-color: var(--dark-deep) !important;
    position: relative !important;
}
/* Single document-spanning shine.  Animated via TRANSFORM (GPU-composited)
   instead of background-position (paint-bound).  The element is 50vw wide
   and translateX-animates -100vw → 200vw, so the bright stripe sweeps
   across the page.  body { position: relative } anchors this absolute, so
   it scrolls with body content — does NOT follow the viewport. */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    height: 100%;        /* full document height */
    pointer-events: none;
    z-index: 0;
    background-image: linear-gradient(110deg,
        transparent 0%,
        transparent 46%,
        rgba(255, 235, 200, 0.30) 49%,
        rgba(255, 245, 220, 0.85) 50%,
        rgba(255, 235, 200, 0.30) 51%,
        transparent 54%,
        transparent 100%);
    transform: translate3d(-100vw, 0, 0);
    animation: vmg-shine-line 16s linear infinite;
    will-change: transform;
}
@keyframes vmg-shine-line {
    0%   { transform: translate3d(-100vw, 0, 0); }
    100% { transform: translate3d( 200vw, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; opacity: 0.3; transform: none; }
}
/* The shine reads as a near-vertical "rectangle artifact" on narrow
   viewports — a 50vw × document-height box with a 110° diagonal gradient
   has too little horizontal room to feel like a sweep.  Hide on mobile;
   the dark theme alone reads fine without it. */
@media (max-width: 768px) {
    body::before { display: none !important; }
}
.hero-3d {
    /* No shine layer here — the shine is now a single absolute-positioned
       element on body, spanning the whole document, so it appears as ONE
       coherent line crossing the page (not a separate render per section). */
    background:
        radial-gradient(ellipse at 50% 70%, var(--magenta-accent) 0%, transparent 60%),
        linear-gradient(180deg, var(--bg-1) 0%, var(--dark-deep) 100%) !important;
    /* Lock height to viewport.  Use `svh` (small viewport height) on
       browsers that support it: 100svh equals the viewport minus dynamic
       UI (mobile address bar, keyboard) at its smallest extent — so the
       hero stays a stable size when iOS Safari's address bar collapses
       on scroll, instead of the abrupt "drop-down" jump 100vh causes. */
    height: 100vh !important;        /* fallback for older browsers */
    height: 100svh !important;       /* modern: stable through scroll */
}

/* All major content sections — semi-transparent dark gradient so the
   single body-level shine bleeds through subtly.  At ~85% alpha the
   sections still read as solid dark; the bright shine line (peak 0.85
   alpha on body::before) shines through at ~13% effective alpha = a
   gentle line passing across the page. */
.products-section,
.certifications-section,
.farms-section,
.compliance-journey,
.faq-section,
.news-section,
.about-section,
.contact-section,
.about-hero,
.values-section,
.team-section,
.timeline-section,
.contact-info-section,
.products-hero,
.product-detail-section {
    background: linear-gradient(145deg, rgba(8, 6, 13, 0.85), rgba(12, 9, 19, 0.85)) !important;
    position: relative;
}
.cookie-banner {
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1)) !important;
}

/* Hero-3d also semi-transparent so body shine bleeds through hero too. */
.hero-3d {
    background:
        radial-gradient(ellipse at 50% 70%, var(--magenta-accent) 0%, transparent 60%),
        linear-gradient(180deg, rgba(8, 6, 13, 0.88) 0%, rgba(4, 3, 10, 0.88) 100%) !important;
}

/* ============================================================================
   Make transparent info elements OPAQUE so the shine line is strictly
   behind them (it's already in z-order behind, but transparent fills
   let it bleed visually through — user complaint: "passes on top of
   them at refraction angle").
   ============================================================================ */

/* FAQ items: inline style sets background:rgba(255,255,255,.05) which is
   95% transparent — shine bleeds through.  Override with an opaque dark
   gradient. */
.faq-item {
    background: linear-gradient(145deg, rgba(20, 17, 26, 0.97), rgba(28, 22, 36, 0.97)) !important;
}

/* Contact cards: no background defined — same problem.  Give them an
   opaque dark fill. */
.contact-card {
    background: linear-gradient(145deg, rgba(20, 17, 26, 0.95), rgba(28, 22, 36, 0.95)) !important;
}

/* body::before is the single document-spanning shine (declared above).
   body::after is unused — kill it. */
body::after { content: none !important; }

/* ---- Gallery: slower, more deliberate reveal ------------------------- */
.farm-item {
    /* From 1.1s → 1.6s; eased so motion settles softly */
    transition:
        opacity 1.4s cubic-bezier(.2, .8, .2, 1) var(--enter-delay, 0s),
        transform 1.6s cubic-bezier(.18, .89, .32, 1.18) var(--enter-delay, 0s),
        box-shadow 0.4s ease,
        border-color 0.3s ease !important;
}
/* Bigger stagger gaps so each card has its own moment */
.farm-item:nth-child(1) { --enter-delay: 0s !important; }
.farm-item:nth-child(2) { --enter-delay: 0.30s !important; }
.farm-item:nth-child(3) { --enter-delay: 0.60s !important; }
.farm-item:nth-child(4) { --enter-delay: 0.90s !important; }

/* ============================================================================
   Touch-up pass v2 (May 8 truly final):
     1. Subtitle: pill REMOVED.  The backdrop-filter blur was distorting
        the fruit detail behind the text.  Reverting to a plain text node
        with a stacked text-shadow halo — least-conspicuous way to keep
        legibility against bright fruit without obscuring anything.
     2. Mobile fruit re-centered: top 55% → 50% so it visually sits
        midway between the subtitle and the CTA.
     3. Carousel section trimmed on BOTH viewports: track padding cut top
        + bottom, section padding cut both ends, certifications top cut.
        Removes ~170px of empty space on desktop, ~110px on mobile.
   ============================================================================ */

/* 1. Subtitle — plain text with strong shadow halo, no pill, no blur. */
.hero-subtitle {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    /* Stacked shadow gives a soft dark halo around each glyph — works on
       any background color (yellow banana, green avocado, dark void). */
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.95),
        0 0 6px rgba(0, 0, 0, 0.75),
        0 0 14px rgba(0, 0, 0, 0.55) !important;
}

/* 2. Mobile fruit re-centered between subtitle bottom and CTA top.
      Measured visually with Playwright: subtitle bottom ≈ 245px, CTA top
      ≈ 503px on a 660px viewport → midpoint = 374px = 56.7% of viewport.
      Setting top:56% lands the fruit center within ~5px of perfect. */
@media (max-width: 768px) {
    /* Match hero-content's coordinate system to hero-3d's (both svh) so
       the fruit (anchored to hero-3d) and the CTA (anchored to hero-content)
       use the same scale.  Without this, hero-content stays larger than
       hero-3d and the fruit ends up "too high" relative to the button. */
    .hero-section .hero-content {
        min-height: calc(100vh - 100px) !important;
        min-height: calc(100svh - 100px) !important;
    }
    .hero-fruit-wrap {
        top: 60% !important;
    }
    .hero-fruit-shadow {
        top: calc(60% + clamp(120px, 30vw, 200px)) !important;
    }
    .hero-fruit-reflection {
        top: calc(60% + clamp(120px, 30vw, 200px)) !important;
    }
    /* CTA stays at the bottom of the flex column with a comfortable margin. */
    .hero-content .cta-button {
        margin-bottom: clamp(80px, 14vh, 140px) !important;
    }
}

/* 3. Carousel section: aggressively trim both viewports.
      Beyond the section paddings, the BIGGEST hidden contributor is
      .section-subtitle's default margin-bottom: 4rem (64px) — cutting that
      tightens the gap between "Discover the finest selection..." and the
      first row of cards. */
.products-section .section-subtitle {
    margin-bottom: 1.5rem !important;
}
.carousel-track {
    padding: 15px 60px 15px !important;
}
.products-section {
    padding: 30px 0 20px !important;
}
.certifications-section {
    padding: 30px 0 !important;
}
@media (max-width: 768px) {
    .carousel-track {
        padding: 10px 20px !important;
    }
    .products-section {
        padding: 24px 0 20px !important;
    }
    .certifications-section {
        padding: 28px 0 !important;
    }
    .products-section .section-subtitle {
        margin-bottom: 1rem !important;
    }
}