@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap');
:root{--ink:#213b32;--gold:#b68d55;--cream:#faf8f3;--gray:#65716a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,Arial,sans-serif;line-height:1.8}a{color:inherit;text-decoration:none}header{background:#fff;position:sticky;top:0;z-index:5;border-bottom:1px solid #eae6dc}nav{max-width:1220px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:15px 26px}.brand{font:600 31px 'Cormorant Garamond',Georgia,serif;letter-spacing:.12em;line-height:1}.brand small{display:block;text-align:center;font:500 9px Inter,sans-serif;letter-spacing:.34em;margin-top:8px}nav .links{display:flex;flex-wrap:wrap;gap:23px;font-size:12px;text-transform:uppercase;letter-spacing:.1em}.links a:hover,.active{color:#a47c45}h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:1.16}h1{font-size:clamp(45px,7vw,90px);margin:15px 0}h2{font-size:clamp(34px,4vw,57px);margin:12px 0 25px}h3{font-size:32px;margin:12px 0}.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:600}.hero{position:relative;background:#132b23;color:white;min-height:76vh;display:grid;place-items:center;overflow:hidden;text-align:center}.hero video{position:absolute;width:100%;height:100%;object-fit:cover;inset:0}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,26,20,.72),rgba(9,26,20,.07) 60%,rgba(9,26,20,.22))}.hero .hero-content{position:relative;z-index:1;padding:40px 20px;margin-top:18vh}.hero p{letter-spacing:.18em}.btn{display:inline-block;padding:13px 28px;background:var(--ink);color:#fff;border:1px solid var(--ink);font:500 11px Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase;cursor:pointer}.btn.light{background:transparent;color:white;border-color:#fff}.btn:hover{opacity:.84}.section{padding:85px 26px}.wrap{max-width:1100px;margin:auto}.center{text-align:center}.lead{font-size:19px;color:#4e6056;max-width:830px;margin:0 auto 22px}.narrow{max-width:760px;margin:auto}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.tile{background:white;padding:34px;border:1px solid #eae6dc}.tile h3{margin-top:0}.soft{background:#eeeae0}.dark{background:var(--ink);color:white}.dark .eyebrow{color:#d7b887}.values{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;letter-spacing:.17em;font-size:12px}.origin{border-bottom:1px solid #ddd5c7;padding:35px 0;display:grid;grid-template-columns:230px 1fr;gap:28px}.origin h3{margin:0}.form{max-width:850px;margin:25px auto;background:white;border:1px solid #e7e0d5;padding:35px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:17px}.field{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600}input,select,textarea{padding:12px;border:1px solid #cfcfc5;border-radius:0;font:14px Inter,sans-serif;width:100%;background:#fff}textarea{min-height:110px}.span2{grid-column:1/-1}.note{font-size:12px;color:#6d7770}footer{background:#162d24;color:#e5e3d9;padding:45px 25px;text-align:center}footer .brand{display:inline-block;color:#fff}footer p{font-size:12px}footer a{text-decoration:underline}#menu{display:none}@media(max-width:760px){nav{flex-wrap:wrap}#menu{display:block;border:0;background:none;font-size:24px;color:var(--ink)}nav .links{display:none;width:100%;flex-direction:column;gap:12px}nav .links.open{display:flex}.grid{grid-template-columns:1fr}.origin{grid-template-columns:1fr}.fields{grid-template-columns:1fr}.hero{min-height:66vh}.hero .hero-content{margin-top:12vh}.section{padding:58px 20px}.form{padding:22px}}
/* Approved 2026 ORGANIK inner-page banner artwork. No changes to page copy. */
.page-banner{width:100%;height:clamp(260px,40vw,650px);position:relative;background-color:#22392d;background-position:center center;background-repeat:no-repeat;background-size:cover;overflow:hidden;display:flex;align-items:center;justify-content:center}
.page-banner.about-banner{background-image:url('assets/about-banner.webp')}
.page-banner.origins-banner{background-image:url('assets/origins-banner.webp');background-position:center center}
.page-banner.suppliers-banner{background-image:url('assets/suppliers-banner.webp')}
.page-banner.contact-banner{background-image:url('assets/contact-banner.webp')}
.page-banner.about-banner:before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.18),transparent 55%)}
.page-banner.about-banner h1{position:relative;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.65);letter-spacing:.14em;font-size:clamp(38px,6vw,84px)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){.page-banner{height:clamp(240px,58vw,420px)}.page-banner.origins-banner{background-size:100% 100%}.page-banner.about-banner{background-position:center center}}

/* Approved Our Origins banner: 12-second alternating landscape motion.
   Header, initials, country names, ornaments and gold separators remain still. */
.origins-banner{position:relative;background-image:url('assets/origins-banner.webp');background-size:100% 100%;overflow:hidden;aspect-ratio:2 / 1;min-height:0}
.origins-motion{position:absolute;inset:22.5% 0 28.4%;display:flex;pointer-events:none;overflow:hidden}
.origins-motion-panel{position:absolute;top:0;height:100%;background-repeat:no-repeat;background-size:100% 104%;background-position:center center;animation:originsFloatUp 12s ease-in-out infinite;will-change:background-position}
.origins-motion-panel-1{left:.23%;width:19.28%;background-image:url('assets/origins-motion-1.webp')}
.origins-motion-panel-2{left:20.03%;width:19.55%;background-image:url('assets/origins-motion-2.webp');animation-name:originsFloatDown}
.origins-motion-panel-3{left:40.43%;width:18.92%;background-image:url('assets/origins-motion-3.webp')}
.origins-motion-panel-4{left:60.13%;width:19.45%;background-image:url('assets/origins-motion-4.webp');animation-name:originsFloatDown}
.origins-motion-panel-5{left:80.53%;width:19.24%;background-image:url('assets/origins-motion-5.webp')}
@keyframes originsFloatUp{0%,100%{background-position:center 0%}50%{background-position:center 100%}}
@keyframes originsFloatDown{0%,100%{background-position:center 100%}50%{background-position:center 0%}}
@media (prefers-reduced-motion:reduce){.origins-motion-panel{animation:none;background-position:center center}}

/* Controls always visible on opening homepage viewport. */
.hero .intro-skip,.hero .intro-sound{position:absolute;z-index:4;border:1px solid rgba(255,255,255,.75);background:rgba(12,28,23,.75);color:#fff;padding:10px 17px;letter-spacing:.10em;font:600 12px Arial,sans-serif;cursor:pointer;border-radius:3px}
.hero .intro-skip{top:22px;right:24px}
.hero .intro-sound{bottom:22px;right:24px}
.hero .intro-skip:hover,.hero .intro-sound:hover{background:#273b32}
@media(max-width:760px){.hero .intro-skip{top:12px;right:12px}.hero .intro-sound{bottom:12px;right:12px}}
/* Supplier banner is the locked visual reference for all page titles. */
.page-banner.about-banner h1{color:#855521;text-shadow:none;font-family:Georgia,serif;font-weight:400;font-size:clamp(30px,4.4vw,70px);letter-spacing:.035em}

/* Approved homepage: video occupies 90% of visible screen on desktop and mobile. */
.hero{height:90vh;min-height:90vh;min-height:90svh;height:90svh}
@media(max-width:760px){.hero{height:90vh;min-height:90vh;height:90svh;min-height:90svh}}
.hero .hero-content{margin-top:0}
.hero .hero-content h1{color:#b87333;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.hero-approved-logo{display:block;width:clamp(80px,11vh,126px);height:auto;margin:0 auto 8px;filter:drop-shadow(0 2px 9px rgba(0,0,0,.38))}

/* Approved ORGANIK typography: Constantia headings, Candara body text. */
body,nav .links,.brand small,.btn,input,select,textarea,.field{font-family:Candara,Calibri,'Segoe UI',sans-serif}
h1,h2,h3{font-family:Constantia,Georgia,serif}
.brand{font-family:Candara,Calibri,'Segoe UI',sans-serif}
.page-banner.about-banner h1{font-family:Constantia,Georgia,serif;font-size:clamp(30px,4.4vw,70px);font-weight:400;letter-spacing:.035em;text-align:center;text-transform:uppercase}

/* Unified ORGANIK identity on all five pages: fixed header position, emblem and heritage serif wordmark. */
nav .site-brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none;font-family:'Cormorant Garamond',Georgia,serif;font-size:27px;font-weight:600;letter-spacing:.09em;line-height:1;color:var(--ink)}
.site-brand-logo{width:48px;height:48px;object-fit:contain;flex-shrink:0}
.site-brand-name{display:block;white-space:nowrap}
nav .site-brand-name small{font-family:Candara,Calibri,'Segoe UI',sans-serif;font-size:9px;letter-spacing:.28em;margin-top:6px}
@media(max-width:760px){nav .site-brand{gap:8px;font-size:23px}.site-brand-logo{width:39px;height:39px}}

/* Homepage video controls: 50% visual size, original anchored positions. */
.hero .intro-skip,.hero .intro-sound{padding:5px 8.5px;font-size:6px;letter-spacing:.05em;border-radius:2px}