@font-face{ font-family:'Playfair Display'; src:url('fonts/PlayfairDisplay-Bold.ttf') format('truetype'); font-weight:400 900; font-display:swap; }
@font-face{ font-family:'EB Garamond'; src:url('fonts/EBGaramond.ttf') format('truetype'); font-weight:400 800; font-display:swap; }
@font-face{ font-family:'EB Garamond'; src:url('fonts/EBGaramond-Italic.ttf') format('truetype'); font-weight:400 800; font-style:italic; font-display:swap; }
@font-face{ font-family:'Cormorant Garamond'; src:url('fonts/CormorantGaramond.ttf') format('truetype'); font-weight:300 700; font-display:swap; }
@font-face{ font-family:'Cormorant Garamond'; src:url('fonts/CormorantGaramond-Italic.ttf') format('truetype'); font-weight:300 700; font-style:italic; font-display:swap; }
@font-face{ font-family:'Cinzel'; src:url('fonts/Cinzel.ttf') format('truetype'); font-weight:400 900; font-display:swap; }

:root{
  --cream:#f3eee0;
  --cream2:#faf7ee;
  --ink:#14251c;
  --green:#1b3a2b;
  --green-deep:#0d1f16;
  --obsidian:#0a0e0c;
  --obsidian2:#121712;
  --gold:#b8860f;
  --gold2:#c9a227;
  --gold-bright:#e3c567;
  --bronze:#8c6d2f;
  --text:#33312a;
  --text-soft:#5b5748;
  --line:#d9cca0;
  --maxw:1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'EB Garamond', serif;
  background:var(--cream);
  color:var(--text);
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
section{ position:relative; }

.eyebrow{
  font-family:'Cinzel', serif;
  font-size:12px;
  letter-spacing:4px;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--gold2); display:inline-block; }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{ display:none; }
.eyebrow.on-dark{ color:var(--gold-bright); }

h2.section-title{
  font-family:'Playfair Display', serif;
  font-weight:800;
  font-size:clamp(28px,4vw,42px);
  color:var(--green);
  margin-bottom:18px;
  letter-spacing:0.3px;
}
h2.section-title.on-dark{ color:var(--cream2); }

.rule{
  width:56px; height:1px;
  background:linear-gradient(to right, var(--gold2), transparent);
  margin-bottom:28px;
  position:relative;
}
.rule::after{
  content:""; position:absolute; left:0; top:-2.5px;
  width:6px; height:6px; border:1px solid var(--gold2);
  transform:rotate(45deg); background:var(--cream);
}
.rule.on-dark::after{ background:var(--green-deep); }

.lede{ max-width:760px; font-size:18px; color:var(--text-soft); margin-bottom:44px; }
.lede.on-dark{ color:#cfd8ce; }
.lede.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ============ NAV ============ */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 40px;
  transition: all .35s ease;
  background: transparent;
}
#nav.scrolled{
  background: rgba(243,238,224,0.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(184,134,15,0.25);
  padding:14px 40px;
}
.nav-brand{ display:flex; align-items:center; gap:10px; }
.nav-brand img{ width:34px; height:34px; object-fit:cover; border-radius:50%; border:1px solid var(--gold2); }
.nav-brand span{
  font-family:'Playfair Display', serif; font-weight:800; letter-spacing:3px;
  font-size:19px; color:var(--green);
}
#nav.scrolled .nav-brand span, .hero #nav .nav-brand span{ color:var(--green); }
.nav-links{ display:flex; gap:34px; align-items:center; }
.nav-links a{
  font-family:'Cinzel', serif; font-size:11px; letter-spacing:1.8px;
  color:var(--green); position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold2); transition:width .3s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  border:1px solid var(--gold2); padding:9px 20px; border-radius:2px;
  font-family:'Cinzel', serif; font-size:10.5px; letter-spacing:1.8px; color:var(--gold);
}
.nav-cta:hover{ background:var(--gold2); color:var(--cream); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:110; }
.nav-toggle span{ width:24px; height:1.5px; background:var(--green); }

/* ============ HERO ============ */
.hero{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:140px 24px 80px;
  background: radial-gradient(ellipse at 50% 0%, #182620 0%, var(--obsidian) 60%);
  position:relative;
  overflow:hidden;
}
.hero-map-bg{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) translateY(var(--pY,0px));
  width:1600px; max-width:none; opacity:0.16;
  animation: heroMapDrift 60s ease-in-out infinite;
  pointer-events:none;
}
@keyframes heroMapDrift{
  0%,100%{ transform:translate(-50%,-50%) translateY(var(--pY,0px)) scale(1) rotate(0deg); }
  50%{ transform:translate(-49%,-51%) translateY(var(--pY,0px)) scale(1.03) rotate(0.6deg); }
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 50%, transparent 30%, var(--obsidian) 85%);
  pointer-events:none;
}
.hero-frame{
  position:absolute; inset:22px;
  border:1px solid rgba(227,197,103,0.25);
  pointer-events:none;
  z-index:2;
}
.hero-frame::before,.hero-frame::after,.hero-frame i.d2,.hero-frame i.d3{
  content:""; position:absolute; width:8px; height:8px; background:var(--obsidian);
  border:1px solid var(--gold2); transform:rotate(45deg);
}
.hero-frame::before{ top:-4.5px; left:-4.5px; }
.hero-frame::after{ top:-4.5px; right:-4.5px; }
.hero-frame i.d2{ bottom:-4.5px; left:-4.5px; }
.hero-frame i.d3{ bottom:-4.5px; right:-4.5px; }

.hero-tag{
  font-family:'Cinzel', serif; font-size:11.5px; letter-spacing:3.5px; color:var(--gold-bright);
  margin-bottom:36px; position:relative; z-index:3; opacity:0.85;
}
.hero-logo-wrap{
  padding:16px; background:rgba(243,238,224,0.04); border:1px solid rgba(227,197,103,0.35);
  box-shadow:0 18px 60px rgba(0,0,0,0.5);
  margin-bottom:38px; animation: floatIn 1.2s ease both;
  will-change: transform;
  position:relative; z-index:3;
  backdrop-filter: blur(2px);
}
.hero-logo-wrap img{ width:180px; height:180px; object-fit:cover; }
.hero-title{
  font-family:'Playfair Display', serif; font-weight:900;
  font-size:clamp(56px,11vw,150px); letter-spacing:12px;
  line-height:1.05;
  will-change: transform;
  position:relative; z-index:3;
  background: linear-gradient(100deg, #d8b654 30%, #f3dc95 50%, #d8b654 70%);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:var(--gold-bright); -webkit-text-fill-color:transparent;
  animation: shimmerText 7s ease-in-out infinite 2.4s;
  filter: drop-shadow(0 4px 30px rgba(227,197,103,0.18));
  padding-bottom:0.08em;
}
@supports not (background-clip: text){
  .hero-title{ background:none !important; color:var(--gold-bright); -webkit-text-fill-color:var(--gold-bright); }
}
@keyframes shimmerText{
  0%, 40%{ background-position:100% 0; }
  60%,100%{ background-position:0% 0; }
}
.hero-sub{
  font-family:'Cormorant Garamond', serif; font-weight:500;
  font-size:clamp(16px,2vw,23px); letter-spacing:2.5px; color:#cfd8ce;
  margin-top:34px; position:relative; z-index:3;
}
.hero-sub b{ color:var(--gold-bright); letter-spacing:4px; font-weight:600; }
.hero-goldline{
  width:130px; height:1px; background:var(--gold2); margin:36px auto; position:relative; z-index:3;
}
.hero-goldline::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg);
  width:8px; height:8px; border:1px solid var(--gold2); background:var(--obsidian);
}
.hero-tags{
  font-family:'Cinzel', serif; font-size:12px; letter-spacing:2.6px; color:#a99a72;
  display:flex; gap:22px; flex-wrap:wrap; justify-content:center;
  position:relative; z-index:3;
}
.scroll-cue{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  font-family:'Cinzel', serif; font-size:10px; letter-spacing:3px; color:var(--gold-bright);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:3; opacity:0.8;
}
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(var(--gold2), transparent); animation:pulseLine 2s ease-in-out infinite; }

@keyframes floatIn{ from{ opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
@keyframes pulseLine{ 0%,100%{ opacity:.3;} 50%{opacity:1;} }

/* ============ STATS BAND (full-bleed obsidian) ============ */
.stats-band{
  background: linear-gradient(180deg, var(--obsidian), var(--obsidian2));
  padding:76px 0;
  position:relative;
  border-top:1px solid rgba(227,197,103,0.15);
  border-bottom:1px solid rgba(227,197,103,0.15);
}
.stats-band-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  text-align:center;
}
.stat-big-item{ position:relative; padding:0 20px; }
.stat-big-item + .stat-big-item::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px;
  background:rgba(227,197,103,0.2);
}
.stat-big{
  font-family:'Playfair Display', serif; font-weight:700; font-size:clamp(38px,4.6vw,64px);
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:var(--gold-bright); -webkit-text-fill-color:transparent;
  line-height:1;
}
@supports not (background-clip: text){
  .stat-big{ background:none !important; color:var(--gold-bright); -webkit-text-fill-color:var(--gold-bright); }
}
.stat-big.stat-big-text{
  font-size:clamp(22px,2.6vw,32px); letter-spacing:0.5px; font-style:italic;
  font-family:'Cormorant Garamond', serif; font-weight:600;
}
.stat-big-label{
  font-family:'Cinzel', serif; font-size:11px; letter-spacing:2.2px; color:#a99a72;
  margin-top:14px;
}

/* ============ GIANT STATEMENT SECTION ============ */
.statement{ padding:130px 0; text-align:center; background:var(--cream); }
.statement-text{
  font-family:'Cormorant Garamond', serif; font-weight:500; font-style:italic;
  font-size:clamp(30px,5.4vw,64px); color:var(--green); max-width:920px; margin:0 auto;
  line-height:1.3;
}
.statement-text em{ font-style:italic; color:var(--gold); font-weight:600; }

/* ============ SECTION GENERIC PADDING ============ */
.section{ padding:120px 0; }
.section.tight{ padding-top:100px; padding-bottom:100px; }
.section.dark{ background:linear-gradient(180deg, var(--green-deep), var(--green)); }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ============ ABOUT ============ */
.about-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:60px; margin-bottom:64px; }
.about-grid p{ margin-bottom:20px; font-size:17px; color:var(--text); }
.stat-card{
  border-top:1px solid var(--gold2);
  background:linear-gradient(180deg, var(--cream2), rgba(250,247,238,0.2));
  padding:22px 0 22px 22px; margin-bottom:22px;
}
.stat-card .num{
  font-family:'Playfair Display', serif; font-size:40px; color:var(--gold); font-weight:700; line-height:1; margin-bottom:8px;
}
.stat-card .label{ font-family:'Cinzel', serif; font-size:11.5px; letter-spacing:1.6px; color:var(--green); line-height:1.6; }

.vm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; padding-top:44px; border-top:1px solid var(--line); }
.vm-numeral{ font-family:'Cormorant Garamond', serif; font-size:34px; color:var(--gold); font-style:italic; font-weight:600; }
.vm-title{ font-family:'Playfair Display', serif; font-weight:700; font-size:18px; color:var(--green); letter-spacing:1.2px; margin:6px 0 12px; }
.vm-grid p{ font-size:16px; color:var(--text-soft); }

/* ============ GLOBAL PRESENCE (dark) ============ */
.map-frame{
  border:1px solid rgba(227,197,103,0.35); background:rgba(250,247,238,0.06);
  padding:22px; margin:12px 0 28px; border-radius:2px;
}
.map-frame svg{ width:100%; height:auto; display:block; }
.legend{ display:flex; justify-content:center; gap:34px; flex-wrap:wrap; font-family:'Cinzel', serif; font-size:11px; letter-spacing:1.2px; color:#cfd8ce; margin-top:18px; }
.legend .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; }

.hub-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:44px; margin-top:56px; }
.hub-card{ border-top:1px solid var(--gold2); padding-top:18px; }
.hub-eyebrow{ font-family:'Cinzel', serif; font-size:11px; letter-spacing:2px; color:var(--gold-bright); margin-bottom:8px; }
.hub-title{ font-family:'Playfair Display', serif; font-weight:700; font-size:23px; color:var(--cream2); margin-bottom:10px; }
.hub-card p{ font-size:15.5px; color:#cfd8ce; line-height:1.6; }

/* ============ PRODUCT PORTFOLIO ============ */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px 40px; }
.product-card{
  padding:34px 26px; background:var(--cream2); border:1px solid var(--line);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.product-card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px rgba(20,37,28,0.10); border-color:var(--gold2); }
.product-icon{
  width:82px; height:82px; border-radius:50%; border:1px solid var(--gold2);
  background:radial-gradient(circle, rgba(47,92,63,0.10), rgba(227,197,103,0.14) 70%, transparent 100%);
  display:flex; align-items:center; justify-content:center; position:relative; margin-bottom:24px;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), background .4s ease;
}
.product-card:hover .product-icon{ transform:rotate(-8deg) scale(1.08); background:radial-gradient(circle, rgba(47,92,63,0.16), rgba(227,197,103,0.3) 70%, transparent 100%); }
.product-icon::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px dashed rgba(184,134,15,0.35);
}
.product-icon::after{ content:""; position:absolute; inset:4px; border:1px solid rgba(47,92,63,0.3); border-radius:50%; }
.product-icon svg{ width:40px; height:40px; }
.product-title{ font-family:'Playfair Display', serif; font-weight:700; font-size:20px; color:var(--green); margin-bottom:10px; }
.product-card p{ font-size:15px; color:var(--text-soft); line-height:1.6; }
.product-note{ margin-top:48px; font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500; font-size:18px; color:var(--bronze); text-align:center; }

/* ============ CORE VALUES ============ */
.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; text-align:center; margin-bottom:70px; }
.value-icon{
  width:92px; height:92px; margin:0 auto 22px; border-radius:50%; border:1px solid var(--gold2);
  background:radial-gradient(circle, rgba(47,92,63,0.10), rgba(227,197,103,0.14) 70%, transparent 100%);
  display:flex; align-items:center; justify-content:center; position:relative;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.values-grid > div:hover .value-icon{ transform:scale(1.08) translateY(-4px); }
.value-icon::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px dashed rgba(184,134,15,0.35);
}
.value-icon::after{ content:""; position:absolute; inset:4px; border:1px solid rgba(47,92,63,0.3); border-radius:50%; }
.value-icon svg{ width:44px; height:44px; }
.value-title{ font-family:'Playfair Display', serif; font-weight:700; font-size:16.5px; color:var(--green); margin-bottom:10px; letter-spacing:0.3px; }
.values-grid p{ font-size:14.5px; color:var(--text-soft); line-height:1.55; }

.quality-block{ max-width:900px; margin:0 auto; text-align:center; padding-top:56px; border-top:1px solid var(--line); }
.quality-title{ font-family:'Playfair Display', serif; font-weight:700; font-size:24px; color:var(--green); margin-bottom:16px; }
.quality-block p{ font-size:16.5px; color:var(--text-soft); }

/* ============ CONTACT / FOOTER ============ */
footer{
  background:linear-gradient(180deg, var(--green-deep), var(--obsidian));
  color:#cfd8ce; padding:90px 0 34px;
  border-top:1px solid rgba(227,197,103,0.15);
}
.footer-top{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:60px; margin-bottom:70px; }
.footer-brand{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.footer-brand img{ width:52px; height:52px; object-fit:cover; border-radius:50%; border:1px solid var(--gold2); }
.footer-brand span{ font-family:'Playfair Display', serif; font-weight:800; letter-spacing:3px; font-size:23px; color:var(--cream2); }
.footer-col h4{ font-family:'Cinzel', serif; font-size:11.5px; letter-spacing:2px; color:var(--gold-bright); margin-bottom:20px; }
.footer-col p, .footer-col a{ font-size:15.5px; color:#cfd8ce; display:block; margin-bottom:10px; }
.footer-col a:hover{ color:var(--gold-bright); }
.footer-tags{ font-family:'Cinzel', serif; font-size:10.5px; letter-spacing:2px; color:#9fb0a4; max-width:340px; line-height:2; }
.footer-bottom{
  border-top:1px solid rgba(227,197,103,0.2); padding-top:26px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:'Cinzel', serif; font-size:10.5px; letter-spacing:1.5px; color:#9fb0a4;
}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .about-grid, .hub-grid, .vm-grid{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .values-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr; gap:40px; }
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  #nav.open .nav-links{
    display:flex; position:fixed; inset:0; background:var(--cream); flex-direction:column;
    align-items:center; justify-content:center; gap:34px;
  }
  #nav.open .nav-links a{ font-size:14px; }
  #nav.open .nav-cta{ display:inline-block; }
  .stats-band-grid{ grid-template-columns:repeat(2,1fr); row-gap:44px; }
  .stat-big-item:nth-child(3)::before{ display:none; }
}
@media (max-width:600px){
  .product-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:repeat(2,1fr); }
  .section{ padding:80px 0; }
  .hero{ padding-top:120px; }
  .stats-band-grid{ grid-template-columns:1fr; row-gap:38px; }
  .stat-big-item::before{ display:none; }
  .stat-big-item{ padding:0; }
}

/* ============ GRAIN TEXTURE ============ */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:0.05; mix-blend-mode:multiply;
  background-image:url('images/grain.png');
  background-size:180px 180px;
}

/* ============ CUSTOM CURSOR ============ */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:9998; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
  transition: opacity .3s ease;
}
.cursor-dot{ width:5px; height:5px; background:var(--gold); }
.cursor-ring{ width:34px; height:34px; border:1px solid var(--gold2); transition: width .25s ease, height .25s ease, border-color .25s ease, opacity .3s ease, background .25s ease; }
.cursor-ring.hovered{ width:56px; height:56px; background:rgba(201,162,39,0.08); border-color:var(--gold-bright); }
.cursor-diamond{
  position:absolute; top:50%; left:50%; width:5px; height:5px;
  background:var(--gold2); transform:translate(-50%,-50%) rotate(45deg);
  animation: orbitDiamond 3.2s linear infinite;
}
@keyframes orbitDiamond{
  from{ transform: translate(-50%,-50%) rotate(0deg) translateX(24px) rotate(0deg); }
  to{ transform: translate(-50%,-50%) rotate(360deg) translateX(24px) rotate(-360deg); }
}
@media (hover:none), (max-width:900px){ .cursor-dot,.cursor-ring{ display:none; } }
body.has-cursor{ cursor:none; }
body.has-cursor a, body.has-cursor button, body.has-cursor .nav-toggle{ cursor:none; }

.section > .container{ position:relative; z-index:1; }
.section-head{ position:relative; }

/* ============ MARQUEE ============ */
.marquee{
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 0;
  background:var(--cream2);
  white-space:nowrap;
}
.marquee-track{
  display:inline-flex;
  gap:48px;
  animation: marqueeScroll 34s linear infinite;
  will-change:transform;
}
.marquee-track span{
  font-family:'Cinzel', serif;
  font-size:13px;
  letter-spacing:3px;
  color:var(--bronze);
  display:inline-flex;
  align-items:center;
  gap:48px;
}
.marquee-track span::after{
  content:"◆";
  color:var(--gold2);
  font-size:9px;
  margin-left:48px;
}
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============ MAP ANIMATION ============ */
#tradeRoutes path{ opacity:0; transition: opacity .6s ease; }
.map-frame.in-view #tradeRoutes path{ opacity:1; }
.map-frame.in-view #tradeRoutes path{ animation: flowDash 2.4s linear infinite; }
@keyframes flowDash{ to{ stroke-dashoffset:-34.2; } }
.pulse-ring{ transform-origin:center; animation: pulseRing 2.6s ease-out infinite; }
@keyframes pulseRing{
  0%{ transform:scale(0.7); opacity:1; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* ============ MAGNETIC BUTTON ============ */
.btn-ghost{
  position:relative; display:inline-flex; align-items:center; gap:14px;
  font-family:'Cinzel', serif; font-size:11.5px; letter-spacing:2.5px; color:var(--gold);
  border:1px solid var(--gold2); padding:16px 34px; overflow:hidden; isolation:isolate;
  transition: color .4s ease;
}
.btn-ghost::before{
  content:""; position:absolute; inset:0; background:var(--gold2); z-index:-1;
  transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.65,0,.35,1);
}
.btn-ghost:hover{ color:var(--cream); }
.btn-ghost:hover::before{ transform:scaleX(1); }

.btn-solid{
  position:relative; display:inline-flex; align-items:center; gap:14px;
  font-family:'Cinzel', serif; font-size:11.5px; letter-spacing:2.5px; color:var(--cream2);
  background:var(--green); border:1px solid var(--green); padding:16px 34px;
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease, transform .3s ease;
}
.btn-solid:hover{ background:var(--green-deep); border-color:var(--gold2); box-shadow:0 10px 30px rgba(20,37,28,0.22); transform:translateY(-2px); }

.cta-actions{ display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }
.cta-note{ margin-top:28px; font-family:'Cinzel', serif; font-size:10.5px; letter-spacing:1.8px; color:var(--text-soft); }

/* ============ CLOSING CTA ============ */
.cta{
  padding:130px 0; text-align:center;
  background:var(--cream);
  position:relative; overflow:hidden;
}
.cta::before{
  content:""; position:absolute; top:50%; left:50%; width:640px; height:640px;
  background:radial-gradient(circle, rgba(227,197,103,0.16), transparent 70%);
  transform:translate(-50%,-50%); pointer-events:none; animation: ctaGlow 6s ease-in-out infinite;
}
@keyframes ctaGlow{ 0%,100%{ opacity:.7; transform:translate(-50%,-50%) scale(1); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.08); } }
.cta-eyebrow{ font-family:'Cinzel', serif; font-size:11.5px; letter-spacing:4px; color:var(--gold); margin-bottom:22px; }
.cta-title{
  font-family:'Playfair Display', serif; font-weight:600; font-style:italic;
  font-size:clamp(32px,5vw,58px); color:var(--green); max-width:820px; margin:0 auto 40px;
  line-height:1.25;
}
.cta-title em{ font-family:'Cormorant Garamond', serif; color:var(--gold); font-style:italic; }

/* reveal variants */
.reveal-stagger > *{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.15s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.25s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.35s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.45s; }

/* ============ CUSTOM SCROLLBAR ============ */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--cream); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--gold2), var(--bronze)); border-radius:6px; border:2px solid var(--cream); }
html{ scrollbar-width:thin; scrollbar-color:var(--gold2) var(--cream); }

/* ============ SCROLL PROGRESS ============ */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright));
  z-index:10001; transition:width .1s linear;
  box-shadow:0 0 8px rgba(227,197,103,0.6);
}

/* ============ PRELOADER ============ */
.preloader{
  position:fixed; inset:0; z-index:10000;
  background:var(--cream);
  display:flex; align-items:center; justify-content:center;
}
.preloader-inner{ text-align:center; position:relative; }
.preloader-ring{ width:96px; height:96px; margin:0 auto 22px; transform:rotate(-90deg); }
.preloader-arc{ stroke-dasharray:326.7; stroke-dashoffset:326.7; animation: arcFill 1.6s cubic-bezier(.65,0,.35,1) forwards .2s; }
@keyframes arcFill{ to{ stroke-dashoffset:40; } }
.preloader-word{
  font-family:'Playfair Display', serif; font-weight:800; font-size:22px; letter-spacing:8px; color:var(--green);
  opacity:0; animation: fadeUpIn .8s ease forwards 1.1s;
}
.preloader-tag{
  font-family:'Cinzel', serif; font-size:9px; letter-spacing:3px; color:var(--bronze); margin-top:10px;
  opacity:0; animation: fadeUpIn .8s ease forwards 1.35s;
}
@keyframes fadeUpIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.preloader-curtain{
  position:fixed; top:0; bottom:0; width:50%; background:var(--green-deep); z-index:10002;
}
.preloader-curtain.l{ left:0; transform-origin:left; }
.preloader-curtain.r{ right:0; transform-origin:right; }
.preloader.leaving .preloader-curtain.l{ animation:curtainL .9s cubic-bezier(.76,0,.24,1) forwards .1s; }
.preloader.leaving .preloader-curtain.r{ animation:curtainR .9s cubic-bezier(.76,0,.24,1) forwards .1s; }
.preloader.leaving .preloader-inner{ animation:fadeOutFast .4s ease forwards; }
@keyframes curtainL{ to{ transform:translateX(-100%); } }
@keyframes curtainR{ to{ transform:translateX(100%); } }
@keyframes fadeOutFast{ to{ opacity:0; } }
.preloader.done{ display:none; }
body.locked{ overflow:hidden; height:100vh; }

/* ============ FLOURISH DIVIDERS ============ */
.flourish-divider{ display:flex; justify-content:center; padding:0; background:var(--cream); position:relative; z-index:2; }
.flourish-divider img{ width:220px; opacity:0.8; }

/* ============ 3D TILT CARDS ============ */
[data-tilt]{ transform-style:preserve-3d; transition:transform .25s ease, box-shadow .25s ease; will-change:transform; }
.value-item{ padding:6px; }

/* ============ CLICK SPARKLE ============ */
.click-spark{
  position:fixed; z-index:10003; pointer-events:none;
  width:10px; height:10px; border-radius:50%;
  border:1px solid var(--gold-bright);
  transform:translate(-50%,-50%) scale(0.3);
  animation: sparkOut .65s cubic-bezier(.2,.8,.3,1) forwards;
}
.click-spark::before, .click-spark::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--gold2);
}
.click-spark::before{ width:16px; height:1px; transform:translate(-50%,-50%); }
.click-spark::after{ width:1px; height:16px; transform:translate(-50%,-50%); }
@keyframes sparkOut{
  0%{ transform:translate(-50%,-50%) scale(0.2); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(2.4); opacity:0; }
}

/* ============ MAGNETIC BUTTON ENHANCE ============ */
.btn-ghost, .nav-cta{ will-change:transform; }

/* ============ SCROLLSPY NAV DOT ============ */
.nav-links a{ position:relative; }
.nav-links a.active{ color:var(--gold); }
.nav-links a.active::after{ width:100%; }

/* ============ FLOAT PARTICLES (hero) ============ */
.particle{
  position:absolute; border-radius:50%; background:var(--gold2); opacity:0.35;
  animation: floatParticle linear infinite;
  pointer-events:none;
}
@keyframes floatParticle{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.5; }
  90%{ opacity:.4; }
  100%{ transform:translateY(-120px) translateX(20px); opacity:0; }
}

/* ============ TEXT WORD REVEAL ============ */
.word-reveal{ display:inline-block; overflow:hidden; vertical-align:top; }
.word-reveal span{ display:inline-block; transform:translateY(110%); transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.section-title.word-anim.in .word-reveal span{ transform:translateY(0); }

/* ================================================================
   ============ PREMIUM ENRICHMENT LAYER (shine & motion) =========
   ================================================================ */
:root{
  --teal:#2f6f6c;
  --teal-bright:#5fc9bd;
}

/* ---- gold shine sweep on key surfaces ---- */
.product-card, .hub-card, .stat-card, .hero-logo-wrap, .nav-cta{
  position:relative; overflow:hidden;
}
.product-card::after, .hub-card::after, .stat-card::after,
.hero-logo-wrap::after, .nav-cta::after, .btn-ghost::after{
  content:""; position:absolute; top:-60%; left:-45%; width:32%; height:220%;
  background:linear-gradient(120deg, transparent, rgba(255,251,235,0.55), transparent);
  transform:translateX(-170%) rotate(10deg);
  pointer-events:none; z-index:2;
}
.product-card:hover::after, .hub-card:hover::after, .stat-card:hover::after,
.nav-cta:hover::after, .btn-ghost:hover::after{
  animation: shineSweep .95s ease;
}
.hero-logo-wrap::after{ animation: shineSweep 3.6s ease-in-out infinite 1.8s; }
@keyframes shineSweep{
  0%{ transform:translateX(-170%) rotate(10deg); }
  100%{ transform:translateX(230%) rotate(10deg); }
}

/* ---- continuous rotating dashed rings for icons (added movement) ---- */
.product-icon::before, .value-icon::before{ animation: spinSlow 16s linear infinite; }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }
.product-card:hover .product-icon, .values-grid > div:hover .value-icon{
  box-shadow:0 0 26px rgba(227,197,103,0.4);
}

/* ---- a single glint travels the rule once, the moment it enters view ---- */
.rule{ overflow:visible; }
.rule::before{
  content:""; position:absolute; top:-2px; left:0; width:12px; height:5px;
  background:radial-gradient(circle, rgba(255,255,255,0.95), transparent 72%);
  opacity:0;
  pointer-events:none;
}
.reveal.in .rule::before, .reveal-stagger.in .rule::before{
  animation: ruleGlint 1.6s ease-out .3s 1 both;
}
@keyframes ruleGlint{
  0%{ left:0; opacity:0; }
  15%{ opacity:1; }
  100%{ left:54px; opacity:0; }
}

/* ---- richer, moving metallic gradient on big stat numerals ---- */
.stat-big{
  background:linear-gradient(100deg, var(--gold) 20%, var(--gold-bright) 42%, #fff6da 52%, var(--gold-bright) 62%, var(--gold) 82%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:var(--gold-bright); -webkit-text-fill-color:transparent;
  animation: shimmerText 6.5s ease-in-out infinite;
}
@supports not (background-clip: text){
  .stat-big{ background:none !important; color:var(--gold-bright); -webkit-text-fill-color:var(--gold-bright); }
}

/* ---- slow rotating conic sparkle behind the stats band ---- */
.stats-band{ position:relative; overflow:hidden; }
.stats-band::before{
  content:""; position:absolute; inset:-60%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(227,197,103,0.09) 40deg, transparent 95deg, transparent 255deg, rgba(227,197,103,0.07) 300deg, transparent 345deg);
  animation: rotateConic 24s linear infinite;
  pointer-events:none;
}
@keyframes rotateConic{ to{ transform:rotate(360deg); } }
.stats-band-grid{ position:relative; z-index:1; }

/* ---- elegant drop cap on the opening paragraph ---- */
#about .about-grid > div:first-child > p:first-of-type::first-letter{
  font-family:'Playfair Display', serif; font-weight:800; font-size:58px; line-height:0.72;
  color:var(--gold); float:left; margin:6px 9px 0 0;
}

/* ---- gold glow on hover for CTAs and nav ---- */
.btn-ghost:hover{ box-shadow:0 10px 34px rgba(227,197,103,0.35); }
.nav-cta:hover{ box-shadow:0 8px 22px rgba(227,197,103,0.3); }
.section-title.on-dark{ text-shadow:0 0 26px rgba(227,197,103,0.22); }

/* ---- subtle shine on the new "target market" map markers ---- */
.map-frame.in-view #tradeRoutes path{ filter:drop-shadow(0 0 2px rgba(95,201,189,0.25)); }

/* ---- richer hover lift on hub cards to match product/value cards ---- */
.hub-card{ transition: transform .4s ease; }
.hub-card:hover{ transform:translateY(-4px); }

/* ================================================================
   ============ REFINED MOTION: DISCIPLINED, NOT CONTINUOUS ========
   ================================================================
   Earlier passes layered continuous shine-sweeps, orbiting sparks and
   twinkle fields on every surface at once. For a house of this stature
   restraint reads as confidence — motion is now reserved for hover
   feedback and one deliberate ambient moment on the hero mark;
   everything else sits still until the person interacts with it. */

.icon-spark{ display:none; }

/* shine sweep: hover-only, single pass */
.product-card::after, .hub-card::after, .stat-card::after,
.hero-logo-wrap::after, .nav-cta::after, .btn-ghost::after{
  animation: none;
}
.product-card:hover::after, .hub-card:hover::after, .stat-card:hover::after,
.nav-cta:hover::after, .btn-ghost:hover::after{
  animation: shineSweep .95s ease;
}
.hero-logo-wrap::after{ animation: shineSweep 4.5s ease-in-out infinite 2.4s; }

/* rotating dashed rings kept slow and quiet — a held breath, not a spin cycle */
.product-icon::before, .value-icon::before, .process-icon::before{ animation-duration:22s; }

/* ambient gold field over dark sections and footer — static, low-opacity depth cue */
.section.dark, footer{ position:relative; }
.section.dark::before, footer::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:0.4;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 28%, rgba(227,197,103,0.5), transparent),
    radial-gradient(1.4px 1.4px at 72% 58%, rgba(227,197,103,0.4), transparent),
    radial-gradient(1.1px 1.1px at 46% 82%, rgba(227,197,103,0.35), transparent),
    radial-gradient(1.4px 1.4px at 86% 22%, rgba(227,197,103,0.4), transparent),
    radial-gradient(1.1px 1.1px at 10% 72%, rgba(227,197,103,0.3), transparent),
    radial-gradient(1.1px 1.1px at 62% 12%, rgba(227,197,103,0.3), transparent);
}
footer .container{ position:relative; z-index:1; }

/* gentle glow pulse around hero logo frame — the one ambient signature moment */
.hero-logo-wrap{ animation: floatIn 1.2s ease both, glowPulse 6s ease-in-out infinite 1.2s; }
@keyframes glowPulse{
  0%,100%{ box-shadow:0 0 0 rgba(227,197,103,0); }
  50%{ box-shadow:0 0 22px 3px rgba(227,197,103,0.2); }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* ================================================================
   ============ OUR PROCESS SECTION ================================
   ================================================================ */
.process-track{
  display:grid; grid-template-columns:repeat(4,1fr); gap:36px; margin-top:56px; position:relative;
}
.process-track::before{
  content:""; position:absolute; top:41px; left:12.5%; right:12.5%; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold2) 15%, var(--gold2) 85%, transparent);
  transform:scaleX(0); transform-origin:left; transition:transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.process-track.in::before{ transform:scaleX(1); }
.process-step{ position:relative; text-align:center; padding:0 8px; }
.process-icon{
  width:82px; height:82px; margin:0 auto 18px; border-radius:50%; border:1px solid var(--gold2);
  background:radial-gradient(circle, rgba(47,92,63,0.10), rgba(227,197,103,0.14) 70%, transparent 100%);
  display:flex; align-items:center; justify-content:center; position:relative;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.process-step:hover .process-icon{ transform:scale(1.08) translateY(-4px); }
.process-icon::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px dashed rgba(184,134,15,0.35); animation: spinSlow 11s linear infinite;
}
.process-icon::after{ content:""; position:absolute; inset:4px; border:1px solid rgba(47,92,63,0.3); border-radius:50%; }
.process-num{ font-family:'Cinzel', serif; font-size:12px; letter-spacing:2.5px; color:var(--gold2); margin-bottom:6px; }
.process-title{ font-family:'Playfair Display', serif; font-weight:700; font-size:19px; color:var(--green); margin-bottom:10px; }
.process-step p{ font-size:14.5px; color:var(--text-soft); line-height:1.6; max-width:230px; margin:0 auto; }
@media (max-width:900px){
  .process-track{ grid-template-columns:1fr; gap:52px; }
  .process-track::before{ display:none; }
}

/* ================================================================
   ============ SIDE SCROLL-PROGRESS DOTS ==========================
   ================================================================ */
.side-dots{
  position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; gap:17px;
}
.side-dots a{
  width:8px; height:8px; border-radius:50%; display:block;
  background:rgba(227,197,103,0.28); border:1px solid rgba(227,197,103,0.5);
  position:relative; transition:background .35s ease, transform .35s ease, box-shadow .35s ease;
}
.side-dots a::after{
  content:attr(aria-label); position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-family:'Cinzel', serif; font-size:10px; letter-spacing:1.2px; color:var(--gold-bright);
  white-space:nowrap; opacity:0; transition:opacity .25s ease;
  background:rgba(20,37,28,0.9); padding:5px 11px; border-radius:2px;
  pointer-events:none; border:1px solid rgba(227,197,103,0.3);
}
.side-dots a:hover::after{ opacity:1; }
.side-dots a:hover{ transform:scale(1.25); }
.side-dots a.active{
  background:var(--gold-bright); transform:scale(1.5);
  box-shadow:0 0 9px 2px rgba(227,197,103,0.55);
}
@media (max-width:900px){ .side-dots{ display:none; } }

/* ================================================================
   ============ RIBBON CORNER BADGE (product cards) ================
   ================================================================ */
.ribbon-wrap{
  position:absolute; top:0; right:0; width:110px; height:110px;
  overflow:hidden; z-index:4; pointer-events:none;
}
.ribbon{
  position:absolute; top:18px; right:-30px; width:140px; text-align:center;
  transform:rotate(45deg);
  background:linear-gradient(135deg, var(--gold-bright), var(--gold2));
  color:#14251C; font-family:'Cinzel', serif; font-size:9px; letter-spacing:1.6px; font-weight:700;
  padding:5px 0; box-shadow:0 2px 8px rgba(20,37,28,0.3);
}

/* ================================================================
   ============ WAX-SEAL MONOGRAM BADGE ============================
   ================================================================ */
.wax-seal{ display:flex; justify-content:center; margin:0 0 34px; position:relative; }
.wax-seal svg{ width:84px; height:84px; filter:drop-shadow(0 8px 16px rgba(0,0,0,0.4)); animation: glowPulse 5s ease-in-out infinite; border-radius:50%; }

/* ================================================================
   ============ CHAIRMAN'S MESSAGE ==================================
   ================================================================ */
.chairman-section{ padding-top:110px; padding-bottom:120px; }
.chairman-frame{
  position:relative; max-width:880px; margin:0 auto; padding:64px 56px 52px;
  border:1px solid rgba(227,197,103,0.4);
  background:linear-gradient(180deg, rgba(227,197,103,0.05), rgba(227,197,103,0.015));
  box-shadow:0 30px 80px rgba(0,0,0,0.35), inset 0 0 60px rgba(227,197,103,0.04);
}
.chairman-frame::before{
  content:""; position:absolute; inset:9px; border:1px solid rgba(227,197,103,0.18); pointer-events:none;
}
.chairman-frame .cf{
  position:absolute; width:30px; height:30px; pointer-events:none;
}
.chairman-frame .cf::before, .chairman-frame .cf::after{
  content:""; position:absolute; background:var(--gold-bright);
}
.chairman-frame .cf::before{ width:100%; height:1px; top:0; left:0; }
.chairman-frame .cf::after{ width:1px; height:100%; top:0; left:0; }
.chairman-frame .cf-tl{ top:-1px; left:-1px; }
.chairman-frame .cf-tr{ top:-1px; right:-1px; transform:scaleX(-1); }
.chairman-frame .cf-bl{ bottom:-1px; left:-1px; transform:scaleY(-1); }
.chairman-frame .cf-br{ bottom:-1px; right:-1px; transform:scale(-1,-1); }

.chairman-quote-mark{
  text-align:center; font-family:'Playfair Display', serif; font-weight:900;
  font-size:96px; line-height:0.6; height:70px;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:var(--gold-bright); -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 10px rgba(227,197,103,0.25));
  margin:0 auto 6px;
}
.chairman-quote{
  margin:0 auto; max-width:700px; text-align:center;
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
  font-size:clamp(20px,2.4vw,26px); line-height:1.75; letter-spacing:0.2px;
  color:var(--cream2);
}
.chairman-sig{ text-align:center; margin-top:46px; }
.chairman-sig-flourish{ width:220px; height:24px; margin:0 auto 22px; display:block; opacity:0.9; }
.chairman-name{
  font-family:'Cinzel', serif; font-weight:700; font-size:clamp(15px,1.7vw,19px);
  letter-spacing:1.6px; text-transform:uppercase;
  background:linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 25%, #fff6da 50%, var(--gold-bright) 75%, var(--gold) 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:var(--gold-bright); -webkit-text-fill-color:transparent;
  animation: chairmanShine 7s linear infinite;
}
@keyframes chairmanShine{
  0%{ background-position:0% center; }
  100%{ background-position:220% center; }
}
.chairman-title{
  margin-top:8px; font-family:'EB Garamond', serif; font-style:italic; font-weight:500;
  font-size:14.5px; letter-spacing:2px; text-transform:uppercase; color:#a99a72;
}
@media (max-width:700px){
  .chairman-frame{ padding:48px 26px 40px; }
  .chairman-quote-mark{ font-size:74px; height:56px; }
}