/* ==========================================================================
   DESIGN SYSTEM & VARIABLES (www.mkt14trading.com)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Montserrat:wght@500;700;800&family=Playfair+Display:ital,wght@0,700;1,700&family=Cinzel:wght@600;700;800&family=Prata&family=Outfit:wght@600;700;800&family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600&family=Fraunces:opsz,wght@9..144,700&family=Marcellus&family=Lora:wght@600;700&display=swap');

:root {
    /* Color Palette */
    --primary-color: #2e6f40;       /* Grass Green */
    --primary-light: #579f6b;       /* Soft Green */
    --primary-dark: #1b4927;        /* Forest Green */
    --accent-color: #d1a153;        /* Gold Accent */
    --bg-light: #fcfbf7;            /* Soft warm white cream */
    --bg-white: #ffffff;            /* Pure white */
    --bg-sage: #e8f0e9;             /* Sage green light background */
    --text-dark: #222222;           /* Dark Charcoal */
    --text-muted: #666666;          /* Muted Grey */
    --text-light: #ffffff;          /* White Text */
    --border-color: #e0ebd3;        /* Soft green-white border */
    
    /* Typography */
    --font-heading: 'Kanit', sans-serif;
    --font-body: 'Sarabun', sans-serif;
    
    /* Layout & Spacing */
    --max-width: 1200px;
    --header-height: 80px;
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    
    /* Shadows */
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.04);
    --shadow-medium: 0 10px 30px rgba(46, 111, 64, 0.08);
    --shadow-hover: 0 15px 40px rgba(46, 111, 64, 0.15);
    
    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-slow: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   BASE & RESET STYLES
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.3;
    color: var(--primary-dark);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-smooth);
}

a:hover {
    color: var(--primary-dark);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 15px;
}

.section-padding {
    padding: 80px 0;
}

.text-center {
    text-align: center;
}

/* Section Header Utility */
.section-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.section-header h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--primary-color);
    border-radius: 2px;
}

.section-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Button Component */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    border-radius: 30px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-soft);
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--text-light);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    color: var(--text-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--text-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.btn-white {
    background-color: var(--bg-white);
    color: var(--primary-color);
}

.btn-white:hover {
    background-color: var(--primary-color);
    color: var(--text-light);
    transform: translateY(-2px);
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
.site-header {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--header-height);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

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

.logo-img {
    height: 68px;
    width: 68px;
    object-fit: contain;
    transition: var(--transition-smooth);
}

.logo-img:hover {
    transform: scale(1.05) rotate(5deg);
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--primary-dark);
    line-height: 1.1;
}

.logo-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    font-weight: 500;
}

.nav-menu {
    display: flex;
    gap: 30px;
}

.nav-link {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--text-dark);
    position: relative;
    padding: 8px 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: var(--transition-smooth);
}

.nav-link:hover {
    color: var(--primary-color);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    color: var(--primary-color);
}

.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.mobile-nav-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--primary-dark);
    margin: 5px 0;
    transition: var(--transition-smooth);
}

/* ==========================================================================
   FOOTER SECTION
   ========================================================================== */
.site-footer {
    background-color: var(--primary-dark);
    color: var(--text-light);
    padding: 60px 0 20px;
    border-top: 5px solid var(--accent-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 40px;
}

/* No backdrop at all — the full logo sits straight on the footer. The source
   artwork is dark green on transparency and the footer is dark green too, so
   the mark is knocked out to solid white (a standard reverse-logo treatment)
   to stay legible. Delete the filter if a real white/reverse logo file is
   ever supplied. */
.footer-brand .footer-logo-img {
    display: inline-block;
    margin-bottom: 15px;
    line-height: 0;
}

.footer-brand .footer-logo-img img {
    height: 100px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}

.footer-brand h3 {
    color: var(--text-light);
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.footer-links h4,
.footer-contact h4 {
    color: var(--accent-color);
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-links h4::after,
.footer-contact h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--accent-color);
}

.footer-links ul li {
    margin-bottom: 12px;
}

.footer-links ul li a {
    color: rgba(255, 255, 255, 0.8);
    display: block;
    transition: var(--transition-smooth);
}

.footer-links ul li a:hover {
    color: var(--accent-color);
    transform: translateX(5px);
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.8);
}

.footer-contact-item svg {
    width: 20px;
    height: 20px;
    fill: var(--accent-color);
    flex-shrink: 0;
    margin-top: 3px;
}

.footer-contact-item a {
    color: rgba(255, 255, 255, 0.8);
}

.footer-contact-item a:hover {
    color: var(--accent-color);
}

.footer-socials {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.social-icon {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    transition: var(--transition-smooth);
}

.social-icon:hover {
    background-color: var(--accent-color);
    color: var(--primary-dark);
    transform: translateY(-3px);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   PAGE: HOME (index.html) SPECIFICS
   ========================================================================== */
.hero-section {
    position: relative;
    height: calc(100vh - var(--header-height));
    min-height: 550px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #0d2818; /* fallback color */
}

/* Grabbing state for active slider drag */
body.grabbing, body.grabbing * {
    cursor: grabbing !important;
}

.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(13, 40, 24, 1) 0%, 
        rgba(13, 40, 24, 0.95) 15%, 
        rgba(13, 40, 24, 0.85) 25%, 
        rgba(13, 40, 24, 0.6) 35%, 
        rgba(13, 40, 24, 0.3) 45%, 
        rgba(13, 40, 24, 0) 60%
    );
    z-index: 2;
    pointer-events: none;
}

/* Hero Slideshow Styles (Horizontal Sliding Carousel matching gift-more.com) */
.hero-slides-window {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    user-select: none;
    -webkit-user-select: none;
}

.hero-slides-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Slide Navigation Buttons (Exact styling from gift-more.com) */
.hero-prev, .hero-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #e5e8e8 !important;
    color: #3a3a3a !important;
    border: none !important;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.slider-arrow-icon {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

.hero-prev {
    left: 5%;
}

.hero-next {
    right: 5%;
}

.hero-prev:hover, .hero-next:hover {
    color: #FFF !important;
    background-color: #82d3ff !important;
    transform: translateY(-50%) scale(1.1);
}

/* Dots Indicators (Exact styling from gift-more.com) */
.hero-dots {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    z-index: 10;
}

.hero-dots .dot {
    width: 12px;
    height: 12px;
    margin: 0 7px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #FFF;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.hero-dots .dot:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

.hero-dots .dot.active {
    background-color: #FFF;
}

/* Responsiveness for navigation controls */
@media (max-width: 768px) {
    .hero-prev, .hero-next {
        width: 30px;
        height: 30px;
        font-size: 1rem !important;
    }
    .hero-prev { left: 3%; }
    .hero-next { right: 3%; }
    .hero-dots { bottom: 1.5rem; }
}

.hero-container-inner {
    position: relative;
    z-index: 3;
}

.hero-content {
    max-width: 650px;
    animation: fadeInUp 1s ease-out;
}

/* Gimmick: Expandable MKT -> Mangkornthong */
.mkt-expandable {
    display: inline-flex;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--primary-dark);
    cursor: pointer;
}

.mkt-letter {
    display: inline-flex;
    align-items: baseline;
}

.mkt-char,
.mkt-full {
    background: linear-gradient(to bottom, #fdf5e6 15%, #eed69f 55%, #d4a359 95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mkt-char {
    display: inline-block;
}

.mkt-full {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden; /* prevents text from overflowing and overlapping when width is 0 */
    vertical-align: bottom; /* ensures proper baseline alignment during animation */
    transform: translateX(-25px);
    padding-bottom: 20px; /* prevent cutting off descenders like 'g' */
    margin-bottom: -20px;
    /* Asymmetric transition: Fades to opacity 0 almost instantly (0.15s) when collapsing */
    transition: max-width 0.8s cubic-bezier(0.25, 1, 0.3, 1), 
                opacity 0.15s ease-out,
                transform 0.8s cubic-bezier(0.25, 1, 0.3, 1),
                visibility 0.8s step-end;
    white-space: nowrap;
}

/* Staggered delay for slide-out effect */
.mkt-letter:nth-child(1) .mkt-full {
    transition-delay: 0s;
}
.mkt-letter:nth-child(2) .mkt-full {
    transition-delay: 0.1s;
}
.mkt-letter:nth-child(3) .mkt-full {
    transition-delay: 0.2s;
}

/* Active expansion style (triggered by JS or Hover) */
.mkt-expandable.expanded .mkt-full,
.mkt-expandable:hover .mkt-full {
    max-width: 150px;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    /* Smooth slow fade in when expanding */
    transition: max-width 1.2s cubic-bezier(0.25, 1, 0.3, 1), 
                opacity 0.8s ease-in,
                transform 1.2s cubic-bezier(0.25, 1, 0.3, 1),
                visibility 0s;
}

.hero-subtitle-top {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    display: block;
    opacity: 0.9;
}

.hero-content h1 {
    font-family: 'Lora', 'Sarabun', serif;
    font-size: 3.8rem;
    margin-bottom: 5px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.5px;
    
    /* 3D Depth Shadow using Filter */
    filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.85)) drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
    display: inline-block;
    padding-bottom: 15px; /* expands box to prevent descender clipping of 'g' */
}

/* Gold line with leaf divider */
.hero-title-divider {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 30px;
    margin-top: 15px;
    width: 240px;
}

.hero-title-divider::before,
.hero-title-divider::after {
    content: '';
    flex-grow: 1;
    height: 1.5px;
    background-color: var(--accent-color);
    opacity: 0.8;
}

.leaf-divider-icon {
    width: 18px;
    height: 18px;
    fill: var(--accent-color);
    opacity: 0.9;
}

.hero-desc {
    font-size: 1.05rem;
    color: #ffffff;
    margin-bottom: 35px;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    padding: 22px 28px;
    background-color: rgba(255, 255, 255, 0.15); /* Translucent */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--border-radius-md);
    font-weight: 400;
    line-height: 1.7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    max-width: 520px;

    /* The hero block is centred vertically, so a description that is one line
       taller in one language shifts the tagline, heading, divider and buttons
       with it. Reserving the tallest case keeps every language pinned to the
       same position. Measured at this width: TH/ZH wrap to 3 lines, EN to 4.
       4 lines x 1.7 line-height, plus 44px vertical padding and 3px of border
       (border-box). */
    min-height: calc(4 * 1.7em + 47px);
}

.hero-actions {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* Custom button overrides for hero section */
.hero-btn-main {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px !important;
    border-radius: 30px !important;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(46, 111, 64, 0.4);
    transition: var(--transition-smooth);
}

.hero-btn-main:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(46, 111, 64, 0.5);
}

.hero-btn-main .btn-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.hero-btn-outline {
    background-color: transparent !important;
    border: 1.5px solid #ffffff !important;
    color: #ffffff !important;
    padding: 14px 30px !important;
    border-radius: 30px !important;
    font-weight: 600;
    transition: var(--transition-smooth);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-btn-outline:hover {
    background-color: #ffffff !important;
    color: var(--primary-dark) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

/* Business Overview & Vision Card */
.overview-box {
    background-color: var(--bg-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-medium);
    padding: 50px;
    margin-top: -60px;
    position: relative;
    z-index: 10;
    border: 1px solid var(--border-color);
}

.overview-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    align-items: center;
}

.overview-text h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--primary-dark);
}

.overview-text p {
    color: var(--text-muted);
    margin-bottom: 20px;
    font-size: 1.05rem;
}

.overview-image {
    position: relative;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.overview-image img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    transition: var(--transition-slow);
}

.overview-image:hover img {
    transform: scale(1.05);
}

.vision-card {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    color: var(--text-light);
    border-radius: var(--border-radius-md);
    padding: 40px;
    margin-top: 40px;
    text-align: center;
    box-shadow: var(--shadow-medium);
}

.vision-card h3 {
    color: var(--accent-color);
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.vision-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
}

.vision-slogan {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--accent-color);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 15px;
    display: inline-block;
}

/* Strengths Section */
.strengths-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.strength-card {
    background-color: var(--bg-white);
    border-radius: var(--border-radius-md);
    padding: 30px 20px;
    text-align: center;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-color);
    transition: var(--transition-smooth);
}

.strength-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-light);
}

.strength-icon {
    width: 70px;
    height: 70px;
    background-color: var(--bg-sage);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--primary-color);
    transition: var(--transition-smooth);
}

.strength-card:hover .strength-icon {
    background-color: var(--primary-color);
    color: var(--text-light);
}

.strength-icon svg {
    width: 35px;
    height: 35px;
    fill: currentColor;
}

.strength-card h4 {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.strength-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* Revenue Chart / Stats Section */
.stats-section {
    background-color: var(--bg-sage);
    position: relative;
    overflow: hidden;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    align-items: center;
}

.stats-text h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.stats-text p {
    color: var(--text-muted);
    margin-bottom: 30px;
}

.stats-counters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.counter-box {
    background-color: var(--bg-white);
    padding: 25px;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-soft);
    text-align: center;
    border-bottom: 4px solid var(--primary-color);
}

.counter-num {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.counter-label {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Revenue Bars Visualization */
.chart-container {
    background-color: var(--bg-white);
    padding: 30px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-soft);
}

.chart-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 25px;
    color: var(--primary-dark);
}

.chart-bars {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 250px;
    padding-top: 20px;
    border-bottom: 2px solid var(--border-color);
    position: relative;
}

.chart-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    margin: 0 4px;
}

.chart-value {
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--text-muted);
    margin-bottom: 5px;
}

@keyframes growBar {
    from {
        height: 0;
    }
}

.chart-bar {
    width: 80%;
    background-color: var(--primary-light);
    border-radius: 4px 4px 0 0;
    position: relative;
    animation: growBar 1.5s cubic-bezier(0.25, 1, 0.3, 1) forwards;
}

.chart-bar-wrapper.forecast .chart-bar {
    background-color: var(--accent-color);
}

.chart-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 10px;
    font-weight: 500;
}

/* Trusted Customers Slider / Grid */
.customers-section {
    background-color: var(--bg-white);
}

/* Flex rather than grid: the logo count rarely divides evenly into the column
   count, and justify-content centres the leftover items on the final row
   instead of leaving a ragged hole on the right. The column count is set by
   the flex-basis on .customer-logo-box below. */
.logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.customer-logo-box {
    flex: 0 0 calc((100% - 5 * 30px) / 6);
    background-color: var(--bg-light);
    height: 80px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px solid var(--border-color);
    transition: var(--transition-smooth);
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--text-muted);
    text-align: center;
    font-size: 0.95rem;
    overflow: hidden;
}

.customer-logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: var(--transition-smooth);
}

.customer-logo-box:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-light);
    background-color: var(--bg-white);
}

/* ==========================================================================
   PAGE: PRODUCTS (products.html) SPECIFICS
   ========================================================================== */
.product-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('assets/images/works_hero.webp') center/cover;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    text-align: center;
}

.product-hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    
    /* Vertical Golden Gradient matching the homepage style */
    background: linear-gradient(to bottom, #fdf5e6 15%, #eed69f 55%, #d4a359 95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* 3D Depth Shadow using Filter */
    filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.85)) drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
    display: inline-block;
    padding-bottom: 10px; /* prevents descender clipping */
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 20px;
}

.product-card {
    background-color: var(--bg-white);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-color);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

.product-img-box {
    height: 220px;
    overflow: hidden;
    background-color: var(--bg-sage);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-smooth);
}

.product-card:hover .product-img-box img {
    transform: scale(1.08);
}

.product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--primary-color);
    color: var(--text-light);
    padding: 4px 12px;
    font-size: 0.8rem;
    font-family: var(--font-heading);
    border-radius: 20px;
}

.product-info {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-info h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--primary-dark);
}

.product-info p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.product-meta {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 500;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    min-height: 70px; /* enforces a constant height to keep the border line aligned across all cards */
    align-items: flex-start; /* aligns text to the top of the meta container */
}

/* Certifications Section */
.cert-section {
    background-color: var(--bg-white);
}

.cert-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.cert-card {
    background-color: var(--bg-light);
    border-radius: var(--border-radius-md);
    padding: 30px 20px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: var(--transition-smooth);
}

.cert-card:hover {
    background-color: var(--bg-white);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-color);
}

.cert-icon-wrapper {
    width: 80px;
    height: 80px;
    background-color: var(--bg-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-color);
}

.cert-icon-wrapper img {
    max-height: 50px;
    object-fit: contain;
}

.cert-icon-wrapper svg {
    width: 40px;
    height: 40px;
    fill: var(--primary-color);
    transition: var(--transition-smooth);
}

.cert-card:hover .cert-icon-wrapper svg {
    fill: var(--primary-dark);
}

.cert-card h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--primary-dark);
}

.cert-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ==========================================================================
   PAGE: WORKS & OPERATIONS (works.html) SPECIFICS
   ========================================================================== */
/* Goals & Machine Stats in works.html */
.goals-wrapper {
    background: linear-gradient(135deg, var(--bg-sage) 0%, var(--bg-white) 100%);
    padding: 50px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    text-align: center;
}

.goals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.goals-card {
    background-color: var(--bg-white);
    padding: 25px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-soft);
}

.goals-card h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.goals-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.works-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.works-timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--primary-light);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    border-radius: 2px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    box-sizing: border-box;
}

.timeline-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: var(--bg-white);
    border: 4px solid var(--primary-color);
    top: 30px;
    border-radius: 50%;
    z-index: 1;
}

.timeline-left {
    left: 0;
}

.timeline-right {
    left: 50%;
}

.timeline-right::after {
    left: -10px;
}

.timeline-content {
    padding: 30px;
    background-color: var(--bg-white);
    position: relative;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--border-color);
    /* Uniform card height so EN/ZH match the Thai (longest) layout.
       Text longer than this simply grows the card; images stay fixed. */
    min-height: 300px;
}

.timeline-content h3 {
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.timeline-content p {
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* --- Thai-only: enlarge timeline text so it fills the card box --- */
/* Scoped by <html lang="th">, which the language switcher sets. */
html[lang="th"] .timeline-content h3 {
    font-size: 1.4rem;
    line-height: 1.45;
}

html[lang="th"] .timeline-content p {
    font-size: 1.05rem;
    line-height: 1.9;
}

/* --- English-only: slightly larger text, vertically centered in the card --- */
/* Scoped by <html lang="en">, which the language switcher sets. */
html[lang="en"] .timeline-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

html[lang="en"] .timeline-content h3 {
    font-size: 1.35rem;
    line-height: 1.4;
}

html[lang="en"] .timeline-content p {
    font-size: 1rem;
    line-height: 1.7;
}

/* --- Simplified Chinese-only: slightly larger text, vertically centered --- */
/* Scoped by <html lang="zh">, which the language switcher sets. */
html[lang="zh"] .timeline-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

html[lang="zh"] .timeline-content h3 {
    font-size: 1.35rem;
    line-height: 1.5;
}

html[lang="zh"] .timeline-content p {
    font-size: 1rem;
    line-height: 1.9;
}

.timeline-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.timeline-gallery img {
    border-radius: var(--border-radius-sm);
    height: 100px;
    width: 100%;
    object-fit: cover;
}

/* Farm promotion Card */
.promo-box {
    background-color: var(--bg-white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    display: flex;
    border: 1px solid var(--border-color);
}

.promo-img-side {
    width: 45%;
    background-color: var(--bg-sage);
}

.promo-img-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-text-side {
    width: 55%;
    padding: 50px;
}

.promo-text-side h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.promo-text-side p {
    color: var(--text-muted);
    margin-bottom: 30px;
}

.promo-list {
    margin-bottom: 30px;
}

.promo-list-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-family: var(--font-heading);
    font-weight: 500;
}

.promo-list-item span.bullet {
    width: 25px;
    height: 25px;
    background-color: var(--primary-color);
    color: var(--text-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* ==========================================================================
   PAGE: CONTACT (contact.html) SPECIFICS
   ========================================================================== */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 30px;
}

.contact-info-card {
    background-color: var(--primary-dark);
    color: var(--text-light);
    padding: 40px 30px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-medium);
    position: relative;
    overflow: hidden;
}

.contact-info-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background-color: rgba(255,255,255,0.03);
    border-radius: 50%;
}

.contact-info-card h2 {
    color: var(--accent-color);
    font-size: 1.9rem;
    margin-bottom: 12px;
}

.contact-info-card > p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 25px;
    font-size: 0.95rem;
}

.contact-details {
    margin-bottom: 30px;
}

.contact-method {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 18px;
}

.contact-icon-box {
    width: 38px;
    height: 38px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    flex-shrink: 0;
}

.contact-icon-box svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.contact-text-box h4 {
    color: var(--accent-color);
    font-size: 0.95rem;
    margin-bottom: 3px;
}

.contact-text-box p,
.contact-text-box a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

.contact-text-box a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.contact-link-row {
    transition: var(--transition-smooth);
    border-radius: var(--border-radius-md);
    padding: 8px 12px;
    margin-left: -12px;
    width: calc(100% + 24px);
}

.contact-link-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.contact-link-row:hover .contact-icon-box {
    background-color: var(--accent-color);
    color: var(--primary-dark);
    transform: scale(1.05);
}

.contact-link-row:hover .contact-text-box p {
    color: var(--accent-color);
}

/* Contact Form */
.contact-form-wrapper {
    background-color: var(--bg-white);
    padding: 50px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--border-color);
}

.contact-form-wrapper h3 {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: var(--primary-dark);
}

.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-group label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.form-control {
    width: 100%;
    padding: 12px 18px;
    font-family: var(--font-body);
    font-size: 1rem;
    border: 1px solid #d2dfd4;
    background-color: var(--bg-light);
    border-radius: var(--border-radius-sm);
    outline: none;
    transition: var(--transition-smooth);
}

.form-control:focus {
    border-color: var(--primary-color);
    background-color: var(--bg-white);
    box-shadow: 0 0 0 4px rgba(46, 111, 64, 0.1);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* Map Section */
.map-section {
    background-color: var(--bg-white);
}

.map-wrapper {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--border-color);
    height: 450px;
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   ANIMATIONS & TRANSITIONS
   ========================================================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-section {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   MEDIA QUERIES (RESPONSIVENESS)
   ========================================================================== */
@media (max-width: 1024px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    
    .strengths-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .overview-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .promo-box {
        flex-direction: column;
    }
    
    .promo-img-side,
    .promo-text-side {
        width: 100%;
    }
    
    .promo-img-side img {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .site-header {
        height: 70px;
    }
    
    .mobile-nav-toggle {
        display: block;
    }
    
    /* The panel sits in place and fades in full-screen rather than sliding in
       from the left. opacity on its own would leave an invisible full-screen
       layer over the page swallowing every tap, so visibility is switched too
       — its change is delayed by the fade duration when closing, and immediate
       when opening, so the fade is still visible in both directions. */
    .nav-menu {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background-color: var(--bg-white);
        flex-direction: column;
        align-items: center;
        padding-top: 50px;
        gap: 30px;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    }

    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
    }
    
    .hero-section {
        height: auto;
        padding: 60px 0;
    }

    /* All three banner photos are shot with the produce in the right third and
       the left left empty for the headline. On a narrow portrait viewport
       background-size: cover crops to the middle — i.e. the empty part — so
       bias the framing toward the subject instead. */
    .hero-slide {
        background-position: 78% center;
    }

    /* The desktop scrim is a left-to-right fade sized for a wide viewport; on a
       phone it covers most of the screen and buries the photo. .hero-content
       carries its own dark glass panel here, so an even, lighter wash is
       enough to keep the headline readable. */
    .hero-section::after {
        background: linear-gradient(to bottom,
            rgba(13, 40, 24, 0.55) 0%,
            rgba(13, 40, 24, 0.35) 50%,
            rgba(13, 40, 24, 0.55) 100%
        );
    }

    .hero-content {
        background-color: rgba(13, 40, 24, 0.85); /* Dark Glassmorphic background for mobile readability */
        padding: 30px 20px;
        border-radius: var(--border-radius-md);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.15);
        max-width: 100%;
    }
    
    /* No reserved height on mobile: here the hero is height: auto and flows
       from the top, so the tagline and heading do not move between languages
       anyway — only the buttons below shift. Reserving the tallest case would
       just leave an empty gap under the shorter Chinese text. */
    .hero-desc {
        min-height: 0;
    }

    .hero-content h1 {
        font-size: 2.6rem;
    }

    .mkt-expandable {
        font-size: 2.2rem;
    }
    
    .hero-actions {
        gap: 12px;
    }
    
    .hero-btn-main,
    .hero-btn-outline {
        padding: 12px 20px !important;
        font-size: 0.95rem;
        white-space: nowrap;
    }
    
    .product-hero {
        height: auto !important;
        min-height: 250px;
        padding: 55px 20px !important;
    }
    
    .product-hero h1 {
        font-size: 2.3rem !important;
        line-height: 1.35;
    }
    
    .product-hero p {
        font-size: 0.95rem !important;
        line-height: 1.65 !important;
        margin-top: 12px !important;
    }
    
    .overview-box {
        margin-top: 0;
        padding: 30px 20px;
    }
    
    .goals-wrapper {
        padding: 30px 20px;
    }
    
    .goals-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-brand h3 {
        font-size: 1.35rem;
    }
    
    .modal-action-btn {
        padding: 10px 18px;
        font-size: 0.85rem;
        white-space: nowrap;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .logo-grid {
        gap: 15px;
    }

    .customer-logo-box {
        flex-basis: calc((100% - 2 * 15px) / 3);
    }
    
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .contact-form-wrapper {
        padding: 30px 20px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 600px) {
    .works-timeline::after {
        left: 31px;
    }
    
    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    
    .timeline-item::after {
        left: 21px;
    }
    
    .timeline-right {
        left: 0;
    }
}

@media (max-width: 480px) {
    .strengths-grid {
        grid-template-columns: 1fr;
    }
    
    .product-grid {
        grid-template-columns: 1fr;
    }
    
    .cert-grid {
        grid-template-columns: 1fr;
    }
    
    .customer-logo-box {
        flex-basis: calc((100% - 15px) / 2);
    }
    
    .hero-actions {
    }
    
    .mkt-expandable {
        font-size: 1.8rem;
    }
    
    .product-hero h1 {
        font-size: 1.8rem !important;
    }
    
    .footer-brand h3 {
        font-size: 1.15rem;
        white-space: nowrap;
    }
}

/* ==========================================================================
   NEW GRAPH & STATS STYLES (MATCHING USER'S SAMPLE DESIGN)
   ========================================================================== */
.stats-grid-new {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 50px;
    align-items: center;
    margin-top: 20px;
}

.stats-text-new {
    display: flex;
    flex-direction: column;
}

/* Diagonal Striped Bar Decoration */
.striped-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 15px 0;
}

.striped-bar {
    height: 14px;
    width: 140px;
    background: repeating-linear-gradient(
        45deg,
        var(--primary-color),
        var(--primary-color) 8px,
        #ffffff 8px,
        #ffffff 16px
    );
    border-radius: 2px;
}

.strip-text {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-dark);
    letter-spacing: 2px;
}

/* Big Metrics Left Side */
.big-stats-number {
    font-family: var(--font-heading);
    font-size: 5.5rem;
    font-weight: 800;
    color: var(--primary-dark);
    line-height: 1;
    margin: 10px 0;
}

.big-stats-subtitle {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.stats-desc-new {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Counters Styling Integrated */
.stats-counters-new {
    display: flex;
    gap: 30px;
    margin-top: 15px;
}

.counter-box-new {
    display: flex;
    flex-direction: column;
}

.counter-box-new .counter-num {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1.1;
}

.counter-box-new .counter-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Right Side: Graphic Chart Area */
.chart-container-new {
    background-color: var(--bg-white);
    padding: 40px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.chart-title-new {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 30px;
    text-align: left;
}

.chart-wrapper-new {
    display: flex;
    height: 320px;
    position: relative;
}

/* Y Axis Labels */
.chart-y-axis-new {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    width: 60px;
    padding-right: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    height: 280px; /* aligns with grid height */
}

/* Chart Canvas */
.chart-area-new {
    position: relative;
    flex: 1;
    height: 280px; /* height matching grid height */
}

/* Horizontal Grid Lines */
.chart-grid-lines-new {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.grid-line-new {
    height: 1px;
    background-color: #eaeaea;
    width: 100%;
}

/* Bars Flex Box */
.chart-bars-new {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    padding: 0 10px;
}

.chart-bar-wrapper-new {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
    height: 100%;
    position: relative;
}

.chart-bar-new {
    width: 55%;
    border-radius: 4px 4px 0 0;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    animation: growBar 1.5s cubic-bezier(0.25, 1, 0.3, 1) forwards;
}

.chart-bar-new:hover {
    transform: translateY(-3px);
    filter: brightness(1.05);
}

/* Tooltip on Hover */
.chart-bar-new::after {
    content: attr(data-value);
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translate(-50%, 5px) scale(0.9);
    background-color: var(--primary-dark);
    color: var(--bg-white);
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.chart-bar-new:hover::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

/* Beautiful color transition from soft agricultural green to deep forest green */
.bar-1 { background-color: #a4d7b2; } /* Light organic sage green */
.bar-2 { background-color: #8ecf9e; }
.bar-3 { background-color: #78c78a; }
.bar-4 { background-color: #62be76; } /* Matches soft grass green */
.bar-5 { background-color: #4cb662; }
.bar-6 { background-color: #33a64d; } /* Matches primary grass green */
.bar-7 { background-color: #1e8738; } /* Matches deep brand forest green */

/* Forecasted bars have vibrant brand gold color */
.forecast-new .chart-bar-new {
    background-color: var(--accent-color);
}
.forecast-new .chart-bar-new:hover {
    background-color: #e5b35f;
}

/* X-Axis Labels Rotated -40 degrees matching example */
.chart-label-new {
    position: absolute;
    bottom: -32px;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    transform: rotate(-40deg);
    transform-origin: top right;
    white-space: nowrap;
    text-align: right;
    width: 50px;
}

/* Responsive adjustment for new chart grid */
@media (max-width: 1024px) {
    .stats-grid-new {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .chart-container-new {
        padding: 20px 15px;
    }
    .chart-y-axis-new {
        width: 45px;
        font-size: 0.75rem;
    }
    .chart-label-new {
        font-size: 0.7rem;
        bottom: -28px;
    }
}

.product-card {
    cursor: pointer;
}

/* Product Detail Modal */
.product-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.product-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    background-color: var(--bg-white);
    width: 90%;
    max-width: 800px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-hover);
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2001;
    border: 1px solid var(--border-color);
}

.product-modal.active .modal-content {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition-smooth);
    color: var(--text-dark);
}

.modal-close:hover {
    background-color: var(--primary-color);
    color: var(--text-light);
    transform: rotate(90deg);
}

.modal-body {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr;
}

@media (max-width: 768px) {
    .modal-body {
        grid-template-columns: 1fr;
    }
    .modal-img-container {
        height: 250px;
    }
}

.modal-img-container {
    position: relative;
    background-color: var(--bg-sage);
    height: 100%;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.modal-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--primary-color);
    color: var(--text-light);
    padding: 6px 12px;
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    font-weight: bold;
    font-family: var(--font-heading);
}

.modal-details {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-details h2 {
    font-size: 1.8rem;
    color: var(--primary-dark);
    margin-bottom: 15px;
    font-family: var(--font-heading);
    font-weight: 700;
}

.modal-details p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.modal-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.modal-meta-item {
    display: flex;
    flex-direction: column;
}

.modal-meta-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.modal-meta-value {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 600;
    font-family: var(--font-heading);
}

.modal-action-btn {
    align-self: flex-start;
    padding: 12px 28px;
    font-weight: bold;
    border-radius: var(--border-radius-md);
    transition: var(--transition-smooth);
}

.modal-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Machinery Gallery in Works Page */
.machinery-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 40px;
    margin-top: 30px;
}

.machinery-item {
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-color);
    background-color: var(--bg-white);
    transition: var(--transition-smooth);
}

.machinery-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: var(--transition-smooth);
}

.machinery-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-color);
}

.machinery-item:hover img {
    transform: scale(1.05);
}

.machinery-caption {
    padding: 15px;
    text-align: center;
    font-weight: 600;
    color: var(--primary-dark);
    font-size: 0.95rem;
    font-family: var(--font-heading);
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-light);
}

@media (max-width: 768px) {
    .machinery-gallery {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Timeline Accompanying Images */
.timeline-image-side {
    position: absolute;
    top: 10px;
    width: calc(100% - 80px);
    /* Fixed height so the image is the SAME size in every language
       instead of shrinking to fit shorter EN/ZH text. */
    height: 280px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--border-color);
    background-color: var(--bg-sage);
    transition: var(--transition-smooth);
}

.timeline-left .timeline-image-side {
    left: calc(100% + 40px);
}

.timeline-right .timeline-image-side {
    right: calc(100% + 40px);
}

.timeline-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition-smooth);
}

.timeline-item:hover .timeline-image-side img {
    transform: scale(1.05);
}

.timeline-item:hover .timeline-image-side {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-hover);
}

/* Responsive styles for timeline images */
@media (max-width: 600px) {
    .timeline-image-side {
        position: relative;
        top: 0;
        left: 0 !important;
        right: 0 !important;
        width: 100%;
        height: 200px;
        margin-top: 15px;
        box-shadow: var(--shadow-soft);
    }

    /* On mobile the image stacks below the text, so the card no longer
       needs a tall uniform height. */
    .timeline-content {
        min-height: 0;
    }
}

/* ==========================================================================
   LANGUAGE SWITCHER STYLING
   ========================================================================== */
.lang-switch-container {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 25px;
    user-select: none;
    z-index: 10;
}

.lang-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: 'Montserrat', 'Kanit', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.lang-btn:hover {
    color: var(--primary-color);
}

.lang-btn.active {
    color: #fff !important;
    background-color: var(--primary-color);
    box-shadow: 0 2px 6px rgba(46, 111, 64, 0.2);
}

.lang-divider {
    color: var(--border-color);
    font-size: 0.85rem;
    font-weight: 300;
}

@media (max-width: 768px) {
    .lang-switch-container {
        margin-left: auto;
        margin-right: 15px;
    }

    /* Once relocated into the slide-in menu the switcher is a menu row, not a
       header item — drop the header spacing and size the buttons for touch. */
    .nav-lang-item {
        width: 60%;
        margin-top: 10px;
        padding-top: 28px;
        border-top: 1px solid var(--border-color);
        display: flex;
        justify-content: center;
    }

    .nav-lang-item .lang-switch-container {
        margin: 0;
        gap: 6px;
    }

    .nav-lang-item .lang-btn {
        font-size: 1rem;
        padding: 8px 16px;
    }

    .nav-lang-item .lang-divider {
        font-size: 1rem;
    }
}

/* ==========================================================================
   RECIPE INSPIRATION SECTION
   ========================================================================== */
.recipe-section {
    background: linear-gradient(135deg, #faf9f6 0%, #f0ede6 100%);
}

.recipe-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.recipe-tab {
    padding: 12px 28px;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    background: var(--bg-white);
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 8px;
}

.recipe-tab:hover {
    border-color: var(--primary-color);
    color: var(--primary-dark);
    background: var(--bg-sage);
}

.recipe-tab.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(45, 106, 79, 0.3);
}

.recipe-tab svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.recipe-category {
    display: none;
}

.recipe-category.active {
    display: block;
    animation: fadeInUp 0.5s ease;
}

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

.recipe-category-header {
    text-align: center;
    margin-bottom: 35px;
}

.recipe-category-header h3 {
    font-size: 1.6rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
    font-family: var(--font-heading);
}

.recipe-category-header p {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.recipe-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.recipe-card {
    background: var(--bg-white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
    position: relative;
}

.recipe-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-light);
}

.recipe-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
}

.recipe-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.recipe-card:hover .recipe-card-img img {
    transform: scale(1.08);
}

.recipe-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--primary-color);
    color: #fff;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.recipe-card-body {
    padding: 22px 24px 26px;
}

.recipe-card-body h4 {
    font-size: 1.15rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
    font-family: var(--font-heading);
}

.recipe-card-body p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 14px;
}

.recipe-ingredient-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--bg-sage);
    color: var(--primary-dark);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
}

.recipe-ingredient-tag svg {
    width: 14px;
    height: 14px;
    fill: var(--primary-color);
}

@media (max-width: 992px) {
    .recipe-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .recipe-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .recipe-tabs {
        gap: 8px;
    }

    .recipe-tab {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .recipe-category-header h3 {
        font-size: 1.3rem;
    }
}

/* ==========================================================================
   FLOATING CONTACT BAR (injected by main.js)
   ========================================================================== */
.contact-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    /* Deliberately below the mobile nav panel (999), the header (1000) and the
       product modal (2000), so it never floats on top of any of them. */
    z-index: 990;
}

.contact-fab-item {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-fab-item svg {
    width: 27px;
    height: 27px;
    fill: #ffffff;
}

.contact-fab-item:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.cf-phone { background-color: var(--primary-color); }
.cf-mail  { background-color: var(--accent-color); }
.cf-fb    { background-color: #1877f2; }   /* Facebook brand blue */
.cf-line  { background-color: #06c755; }   /* LINE brand green */

/* Name of the channel, revealed to the left on hover. visibility is toggled
   alongside opacity so the invisible tooltip never intercepts a click. */
.contact-fab-item::after {
    content: attr(data-label);
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(27, 73, 39, 0.95);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.contact-fab-item:hover::after {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.contact-fab-toggle {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--primary-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.contact-fab-toggle svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
    transition: transform 0.25s ease;
}

/* display: none rather than a fade, so a collapsed bar leaves nothing behind
   that could still catch taps. */
.contact-fab.collapsed .contact-fab-item {
    display: none;
}

.contact-fab.collapsed .contact-fab-toggle svg {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .contact-fab {
        right: 14px;
        bottom: 14px;
        gap: 10px;
    }

    .contact-fab-item {
        width: 46px;
        height: 46px;
    }

    .contact-fab-item svg {
        width: 24px;
        height: 24px;
    }

    .contact-fab-toggle {
        width: 36px;
        height: 36px;
    }

    /* Touch devices have no real hover: a tapped label would stay stuck open. */
    .contact-fab-item::after {
        display: none;
    }
}