:root { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body { overflow-x: hidden; }
::selection { background: #b8d94a; color: #103d2d; }
.grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.hero-slider,.hero-slide { position: absolute; inset: 0; }
.hero-slide { opacity: 0; background-position: center 52%; background-size: cover; transform: scale(1.03); transition: opacity 1.15s ease; }
.hero-slide.active { opacity: 1; animation: heroZoom 7s linear both; }
@keyframes heroZoom { to { transform: scale(1.1); } }
.slider-arrow { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: white; background: rgba(16,61,45,.28); backdrop-filter: blur(8px); transition: .25s; }
.slider-arrow:hover { background: #b8d94a; color: #103d2d; border-color: #b8d94a; }
.slider-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.45); transition: width .35s, background .35s; }
.slider-dot.active { width: 28px; background: #b8d94a; }
.hero-orbit { animation: orbit 18s linear infinite; }
.hero-orbit::after { content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: #b8d94a; box-shadow: 0 0 22px #b8d94a; }
@keyframes orbit { to { transform: rotate(360deg); } }

#header.scrolled { background: rgba(16,61,45,.92); box-shadow: 0 10px 35px rgba(0,0,0,.12); backdrop-filter: blur(16px); }
.logo-shell { display: grid; width: 70px; height: 70px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; background: rgba(255,255,255,.96); box-shadow: 0 8px 25px rgba(0,0,0,.12); transition: transform .3s, box-shadow .3s; }
.group:hover .logo-shell { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.site-logo { width: 66px; height: 66px; object-fit: contain; transform: scale(1.75); }
.footer-logo { width: 92px; height: 92px; flex: 0 0 auto; object-fit: contain; overflow: hidden; border-radius: 50%; background: rgba(255,255,255,.96); padding: 4px; transform: scale(1.15); }
#navLinks > a:not(.nav-cta) { position: relative; color: rgba(255,255,255,.75); font-size: 14px; font-weight: 600; transition: .25s; }
#navLinks > a:not(.nav-cta)::after { content: ''; position: absolute; left: 0; bottom: -7px; width: 0; height: 2px; background: #b8d94a; transition: .25s; }
#navLinks > a:hover { color: #fff; }
#navLinks > a:hover::after { width: 100%; }
.nav-cta, .btn-primary, .btn-ghost, .btn-certificate { display: inline-flex; align-items: center; gap: 12px; border-radius: 999px; padding: 13px 20px; font-size: 14px; font-weight: 700; transition: transform .25s, background .25s, color .25s; }
.nav-cta { background: #b8d94a; color: #103d2d; }
.nav-cta:hover, .btn-primary:hover { transform: translateY(-2px); background: #cbe765; }
.btn-primary { background: #b8d94a; color: #103d2d; padding: 15px 23px; }
.btn-ghost { border: 1px solid rgba(255,255,255,.35); color: white; padding: 14px 23px; }
.btn-ghost:hover { background: #fff; color: #103d2d; transform: translateY(-2px); }
.btn-certificate { border: 1px solid rgba(184,217,74,.55); background: rgba(184,217,74,.12); color: #d9f16d; padding: 14px 23px; backdrop-filter: blur(8px); }
.btn-certificate:hover { background: #b8d94a; color: #103d2d; transform: translateY(-2px); }
.certificate-icon { font-size: 18px; line-height: 1; }
.menu-lines { position: relative; width: 18px; height: 14px; }
.menu-lines i { position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: .25s; }
.menu-lines i:first-child { top: 3px; }.menu-lines i:last-child { bottom: 3px; }
.menu-open .menu-lines i:first-child { top: 6px; transform: rotate(45deg); }.menu-open .menu-lines i:last-child { bottom: 6px; transform: rotate(-45deg); }

.eyebrow { display: flex; align-items: center; gap: 12px; color: #2f6b49; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .2em; }
.eyebrow::before { content: ''; width: 34px; height: 2px; background: currentColor; }
.section-title { margin-top: 16px; font-family: Manrope,sans-serif; font-size: clamp(2.4rem,5vw,4rem); font-weight: 800; line-height: 1.05; letter-spacing: -.045em; color: #103d2d; }
.section-title span { color: #2f6b49; }
.company-profile-title { font-size: clamp(2.15rem,4vw,3.35rem); line-height: 1.08; }
.mission-copy {
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.75;
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: break-word;
}
.mission-note { font-size: 1rem; line-height: 1.75; }
@media (max-width: 639px) {
    .mission-copy { text-align: left; }
}
.image-frame { position: relative; }
.image-frame::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.35); border-radius: inherit; }
.image-frame img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.image-frame:hover img { transform: scale(1.035); }
.info-chip { display: flex; align-items: center; gap: 14px; border-top: 1px solid rgba(16,61,45,.14); padding-top: 17px; }
.info-chip > span { display: grid; width: 35px; height: 35px; place-items: center; flex: 0 0 auto; border-radius: 50%; background: rgba(47,107,73,.09); color: #2f6b49; font-size: 11px; font-weight: 800; }
.info-chip b,.info-chip small { display: block; }.info-chip b { color: #103d2d; }.info-chip small { margin-top: 2px; color: #8a918d; }

.product-card { position: relative; min-height: 350px; overflow: hidden; border-radius: 1.5rem; }
.product-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.product-card:hover img { transform: scale(1.06); }
.product-overlay { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 35%,rgba(6,25,18,.92)); }
.product-copy { position: absolute; inset: auto 0 0; padding: 24px; }
.product-copy > span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: #b8d94a; }
.product-copy h3 { margin-top: 7px; font-family: Manrope,sans-serif; font-size: 24px; font-weight: 800; }
.product-copy p { margin-top: 7px; max-width: 480px; color: rgba(255,255,255,.65); font-size: 14px; line-height: 1.6; }
.product-copy p strong { color: #fff; font-size: 17px; font-weight: 800; }

.process-step { border: 1px solid rgba(16,61,45,.13); border-radius: 16px; padding: 15px 12px; background: rgba(255,255,255,.35); }
.process-step b,.process-step span { display: block; }.process-step b { color: #2f6b49; font-size: 10px; letter-spacing: .12em; }.process-step span { margin-top: 10px; color: #103d2d; font-size: 13px; font-weight: 700; }
.ginger-gallery { position: relative; min-height: 590px; }
.ginger-photo { position: absolute; overflow: hidden; border-radius: 2rem; box-shadow: 0 30px 70px rgba(50,42,22,.16); }
.ginger-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.ginger-photo:hover img { transform: scale(1.05); }
.ginger-photo figcaption { position: absolute; left: 18px; bottom: 18px; padding: 9px 13px; border-radius: 999px; background: rgba(16,61,45,.88); color: white; font-size: 11px; font-weight: 700; backdrop-filter: blur(8px); }
.ginger-main { inset: 0 16% 11% 0; }
.ginger-detail { width: 43%; height: 43%; right: 0; bottom: 0; border: 8px solid #e9e1cf; }
.ginger-badge { position: absolute; right: 2%; top: 6%; display: grid; width: 105px; height: 105px; place-items: center; align-content: center; border-radius: 50%; background: #b8d94a; color: #103d2d; box-shadow: 0 18px 40px rgba(16,61,45,.18); transform: rotate(7deg); }
.ginger-badge strong,.ginger-badge span { display: block; line-height: 1.1; }.ginger-badge strong { font-family: Manrope,sans-serif; font-size: 16px; }.ginger-badge span { font-size: 10px; text-transform: uppercase; letter-spacing: .15em; margin: 3px; }

.service-card { position: relative; min-height: 355px; background: #f7f5ec; padding: 30px; transition: background .35s, transform .35s; }
.service-card:hover { z-index: 2; background: #fff; transform: translateY(-7px); box-shadow: 0 25px 60px rgba(16,61,45,.12); }
.service-number { float: right; color: rgba(16,61,45,.35); font-size: 11px; font-weight: 700; }
.service-icon { display: grid; width: 55px; height: 55px; place-items: center; border-radius: 50%; background: rgba(184,217,74,.28); color: #103d2d; font-size: 25px; }
.service-card h3 { margin-top: 45px; font-family: Manrope,sans-serif; font-size: 22px; font-weight: 800; color: #103d2d; }
.service-card p { margin-top: 12px; color: #6f7974; line-height: 1.7; font-size: 14px; }
.service-card a { position: absolute; bottom: 30px; color: #2f6b49; font-size: 13px; font-weight: 700; }
.service-card a span { display: inline-block; margin-left: 5px; transition: transform .25s; }.service-card a:hover span { transform: translate(3px,-3px); }

.marquee { overflow: hidden; white-space: nowrap; }.marquee div { width: max-content; animation: marquee 24s linear infinite; }.marquee b { margin: 0 28px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.contact-detail { display: flex; align-items: center; gap: 17px; }
.contact-detail > span { display: grid; width: 44px; height: 44px; place-items: center; flex: 0 0 auto; border-radius: 50%; border: 1px solid rgba(16,61,45,.17); color: #2f6b49; font-size: 11px; font-weight: 800; }
.contact-detail small { display: block; color: #919894; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }.contact-detail p { margin-top: 3px; color: #103d2d; font-weight: 700; }
form label { display: block; color: #103d2d; font-size: 13px; font-weight: 700; }
form input, form textarea { display: block; width: 100%; margin-top: 9px; border: 1px solid rgba(16,61,45,.14); border-radius: 14px; background: #fafaf7; padding: 14px 15px; outline: none; color: #203a30; font-weight: 400; transition: border .2s, box-shadow .2s; }
form input:focus, form textarea:focus { border-color: #2f6b49; box-shadow: 0 0 0 3px rgba(47,107,73,.08); }
form textarea { resize: vertical; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .12s; }.delay-2 { transition-delay: .24s; }.delay-3 { transition-delay: .36s; }
@media (max-width: 1023px) {
    .nav-mobile { position: absolute; top: 78px; left: 20px; right: 20px; flex-direction: column; align-items: stretch !important; gap: 0 !important; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; background: rgba(16,61,45,.97); padding: 14px; box-shadow: 0 25px 50px rgba(0,0,0,.25); backdrop-filter: blur(15px); }
    .nav-mobile.open { display: flex; }
    .nav-mobile > a:not(.nav-cta) { padding: 13px 10px; }
    .nav-cta { justify-content: center; margin-top: 8px; }
}
@media (max-width: 640px) {
    .logo-shell { width: 60px; height: 60px; }
    .site-logo { width: 56px; height: 56px; }
    .hero-slide { background-position: 62% center; }
    .product-card { min-height: 320px; }
    .service-card { min-height: 320px; }
    .ginger-gallery { min-height: 440px; }
    .ginger-main { right: 8%; bottom: 12%; }
    .ginger-detail { width: 48%; height: 38%; }
    .ginger-badge { width: 88px; height: 88px; right: 0; top: 4%; }
}
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}