/* ════════════════════════════════════════
   VERDANT — LUXURY BRAND 
════════════════════════════════════════ */

:root {
  /* Default Dark Mode Palette */
  --bg-dark: #0a0a0a;
  --bg-med:  #141414;
  --bg-light:#1c1c1c;
  
  --text-wht:#F8F8F8;
  --text-mut:#A0A0A0;
  --ink:     #050505;
  --border:  rgba(212, 175, 55, 0.15);

  /* Gradients for overlays */
  --nav-bg: rgba(10, 10, 10, 0.9);

  /* Gold Palette */
  --gold:    #D4AF37;
  --gold-lt: #F3E5AB;
  --gold-dk: #AA8C2C;
  --gold-xs: #FFDF73;

  /* Fonts */
  --ff-d: 'Playfair Display', Georgia, serif;
  --ff-b: 'Montserrat', sans-serif;

  --ease:  cubic-bezier(.16,1,.3,1);
  --ease2: cubic-bezier(.45,0,.55,1);
}

/* Light Mode Overrides */
body.light-mode {
  --bg-dark: #FAF8F5;
  --bg-med:  #F2EFE9;
  --bg-light:#FFFFFF;
  
  --text-wht:#0a0a0a; /* In light mode, main text is dark */
  --text-mut:#5A5A5A;
  --ink:     #ffffff; /* Buttons bg flips to white */
  --border:  rgba(212, 175, 55, 0.35);

  --nav-bg: rgba(250, 248, 245, 0.9);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--ff-b);font-weight:300;
  background:var(--bg-dark);color:var(--text-wht);
  overflow-x:hidden;cursor:none;
  -webkit-font-smoothing:antialiased;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
::selection{background:var(--gold);color:var(--ink)}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--gold-dk);border-radius:2px}
img{display:block;width:100%;height:100%;object-fit:cover}
a{text-decoration:none;color:inherit}
button{font-family:var(--ff-b);cursor:pointer;border:none;background:none}

/* ── CURSOR ─────────────────────────────── */
#cur-dot,#cur-ring{
  position:fixed;border-radius:50%;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),opacity .3s;
}
#cur-dot{width:6px;height:6px;background:var(--gold);transition:left .04s,top .04s,width .25s var(--ease),height .25s var(--ease),background .25s}
#cur-ring{width:36px;height:36px;border:1px solid rgba(212, 175, 55, 0.6)}
body.hovering #cur-dot{width:12px;height:12px;background:var(--gold-lt)}
body.hovering #cur-ring{width:50px;height:50px;opacity:0}

/* ── GRAIN OVERLAY ──────────────────────── */
body::after{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9990;
}

/* ══════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════ */
.nav{
  position:fixed;inset:0 0 auto;z-index:500;
  display:flex; justify-content: space-between; align-items: center; /* Switched to flex for better mobile control */
  padding:28px 60px;
  transition:padding .5s var(--ease),background .5s,backdrop-filter .5s,box-shadow .5s;
}
.nav.scrolled{
  padding:15px 60px;
  background:var(--nav-bg);
  backdrop-filter:blur(15px);
  box-shadow:0 1px 0 var(--border);
}
.nav__logo{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  font-family:var(--ff-b);font-size:.75rem;
  font-weight:600; /* Bolder text */
  letter-spacing:.28em;color:var(--text-wht);transition:color .3s;
}
.nav__logo-img {
  height: 48px; width: auto; display: block;
  transition: opacity 0.3s var(--ease); 
}
.nav__logo:hover .nav__logo-img { opacity: 0.8; }

.nav__logo-star{
  color:var(--gold);font-size:.9rem;
  display:inline-block;animation:spin 14s linear infinite;
}
.nav__links{
  display:flex;justify-content:center;gap:46px;list-style:none;
}
.nav__links button{
  font-family:var(--ff-b);font-size:.72rem;
  font-weight:600; /* Bolder text */
  letter-spacing:.15em;text-transform:uppercase;color:var(--text-mut);
  position:relative;padding-bottom:4px;transition:color .3s;
}
.nav.scrolled .nav__links button, .nav__links button:hover{color:var(--gold-lt)}
.nav__links button::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:center;
  transition:transform .4s var(--ease);
}
.nav__links button:hover::after{transform:scaleX(1)}

.nav__right{display:flex;justify-content:flex-end; align-items: center;}

/* Theme Toggle Button */
.nav__theme-btn {
  color: var(--gold);
  margin-right: 28px;
  display: flex;
  align-items: center;
  transition: transform 0.3s var(--ease), color 0.3s;
}
.nav__theme-btn:hover { transform: scale(1.15); color: var(--gold-lt); }

.nav__cta{
  font-family:var(--ff-b);font-size:.7rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--gold);
  padding:10px 24px;border-radius:2px;
  transition:all .4s var(--ease);
}
.nav__cta:hover{background:var(--gold);color:var(--ink);box-shadow:0 0 15px rgba(212, 175, 55, 0.3)}

/* LIGHT THEME NAVBAR OVERRIDES (Black details instead of gold) */
body.light-mode .nav__logo,
body.light-mode .nav__theme-btn,
body.light-mode .nav__cta {
    color: var(--text-wht);
    border-color: var(--text-wht);
}
body.light-mode .nav__cta:hover {
    background: var(--text-wht); 
    color: var(--bg-light); 
    box-shadow: 0 0 15px rgba(10, 10, 10, 0.15);
}
body.light-mode .nav__links button {
    color: var(--text-mut);
}
body.light-mode .nav__links button:hover,
body.light-mode .nav.scrolled .nav__links button {
    color: var(--text-wht);
}
body.light-mode .nav__links button::after {
    background: var(--text-wht);
}
body.light-mode .nav__burger span { background: var(--text-wht); }
body.light-mode .nav__theme-btn:hover { color: var(--text-mut); }

/* mobile burger */
.nav__burger{
  display:none;flex-direction:column;gap:6px;
  padding:4px;z-index:600;
}
.nav__burger span{
  display:block;width:24px;height:1px;
  background:var(--gold);transition:transform .3s var(--ease);
}
.nav__burger.open span:first-child{transform:rotate(45deg) translate(5px,5px)}
.nav__burger.open span:last-child{transform:rotate(-45deg) translate(5px,-5px)}

/* mobile menu */
.nav__mobile{
  display:none;position:fixed;inset:0;
  background:var(--nav-bg);backdrop-filter:blur(20px);
  flex-direction:column;align-items:center;justify-content:center;
  gap:36px;z-index:400;
  opacity:0;transform:translateY(-12px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.nav__mobile.open{display:flex;opacity:1;transform:none}
.nav__mobile button{
  font-family:var(--ff-d);font-size:2.2rem;font-weight:400;font-style:italic;
  color:var(--text-wht);letter-spacing:.05em;
  transition:color .3s;
}
.nav__mobile button:hover{color:var(--gold)}

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.hero{
  position:relative;width:100%;height:100svh;min-height:640px;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.hero__bg{
  position:absolute;inset:0;z-index:0;
  width: 100%; height: 100%;
}
.hero__video {
  width: 100%; height: 100%; object-fit: cover;
  /* Grayscale filter removed so video is fully colorful natively */
}

.hero__overlay{
  position:absolute;inset:0;z-index:1;
  /* Fixed dark gradient so text is always readable, no white wash in light mode */
  background: linear-gradient(108deg, rgba(5,5,5,0.7) 0%, rgba(5,5,5,0.2) 40%, transparent 100%);
  transition: background 0.5s var(--ease);
}

.hero__bottom {
  display: none; /* Removed downward fade for a clean, sharp look */
}

/* Force hero text to remain white even in light mode so it contrasts with video */
body.light-mode .hero__title { color: #F8F8F8; }
body.light-mode .hero__sub { color: #E0E0E0; }

.hero__body{
  position:relative;z-index:10;
  padding: 0 64px;
  margin-top: 50px;
  max-width:650px;
  width: 100%;
}
.hero__eyebrow{
  display:flex;align-items:center;gap:18px;
  font-family:var(--ff-b);font-size:.65rem;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin-bottom:32px;
  opacity:0;animation:fadeUp .9s var(--ease) .3s forwards;
}
.hero__eyebrow-line{width:40px;height:1px;background:var(--gold);flex-shrink:0;}
.hero__title{
  font-family:var(--ff-d);
  font-size:clamp(3rem,6vw,6rem);
  font-weight:400;line-height:1.1;
  color:var(--text-wht);
  margin-bottom:28px;
  opacity:0;animation:fadeUp 1.1s var(--ease) .5s forwards;
}
.hero__title em{font-style:italic;color:var(--gold);}
.hero__sub{
  font-family:var(--ff-b);font-size:clamp(.9rem,1.4vw,1.05rem);
  font-weight:300;line-height:1.8;
  color:var(--text-mut);max-width:420px;
  margin-bottom:48px;letter-spacing:.02em;
  opacity:0;animation:fadeUp .9s var(--ease) .9s forwards;
}
.hero__btns{
  display:flex;gap:16px;flex-wrap:wrap;
  opacity:0;animation:fadeUp .8s var(--ease) 1.1s forwards;
}
.btn-fill{
  font-family:var(--ff-b);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  background:var(--gold);color:var(--ink);
  padding:16px 38px;border-radius:2px;
  transition:all .4s var(--ease);position:relative;overflow:hidden;
}
.btn-fill::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform:translateX(-100%);transition:transform .6s var(--ease);
}
.btn-fill:hover::before{transform:translateX(100%)}
.btn-fill:hover{background:var(--gold-lt);transform:translateY(-3px);box-shadow:0 10px 30px rgba(212,175,55,.25)}
.btn-ghost{
  font-family:var(--ff-b);font-size:.72rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--gold);
  padding:16px 38px;border-radius:2px;
  transition:all .4s var(--ease);
}
.btn-ghost:hover{background:rgba(212,175,55,.1);color:var(--gold-lt)}

.hero__stats{
  position:absolute;bottom:90px;right:64px;z-index:10;
  display:flex;gap:52px;
  opacity:0;animation:fadeIn 1.2s ease 1.4s forwards;
}
.hero__stat{text-align:right}
.hero__stat strong{
  display:block;font-family:var(--ff-d);
  font-size:clamp(2rem,3.5vw,2.8rem);font-weight:400;
  color:var(--gold);line-height:1;
}
.hero__stat span{
  font-family:var(--ff-b);font-size:.6rem;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-mut);
}
.hero__scroll{
  position:absolute;bottom:44px;left:64px;z-index:10;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  opacity:0;animation:fadeIn 1s ease 1.6s forwards;
}
.hero__scroll-bar{
  width:1px;height:50px;
  background:linear-gradient(to bottom,var(--gold),transparent);
  animation:scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse{0%,100%{transform:scaleY(1);opacity:.5}50%{transform:scaleY(.4);opacity:1}}
.hero__scroll span{
  font-family:var(--ff-b);font-size:.58rem;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);writing-mode:vertical-rl;
}

/* ══════════════════════════════════════════
   MARQUEE STRIP
══════════════════════════════════════════ */
.marquee-strip{
  overflow:hidden;background:var(--bg-med);
  padding:20px 0;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.marquee-track{
  display:flex;gap:0;white-space:nowrap;
  animation:marquee 30s linear infinite;
}
.marquee-track span{
  font-family:var(--ff-d);font-size:1.2rem;font-weight:400;
  font-style:italic;color:var(--text-mut);
  padding:0 48px;
}
.marquee-track span.dot{color:var(--gold);font-style:normal;padding:0 12px;}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══════════════════════════════════════════
   SECTION COMMONS
══════════════════════════════════════════ */
.eyebrow{
  font-family:var(--ff-b);font-size:.65rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
}
.section-title{
  font-family:var(--ff-d);font-size:clamp(2.4rem,4.5vw,4rem);
  font-weight:400;color:var(--text-wht);line-height:1.2;margin:14px 0 28px;
}
.section-title em{font-style:italic;color:var(--gold)}
.title-rule{
  width:60px;height:1px;background:var(--gold);margin:0 auto;
  transform:scaleX(0);transform-origin:center;
  transition:transform .9s var(--ease) .2s;
}
.reveal .title-rule{transform:scaleX(1)}
.reveal{opacity:0;transform:translateY(32px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-28px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal-left.visible{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(28px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal-right.visible{opacity:1;transform:none}

/* ══════════════════════════════════════════
   INTRO STRIP
══════════════════════════════════════════ */
.intro{
  padding:120px 64px;background:var(--bg-dark);
  display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;
}
.intro__left .eyebrow{margin-bottom:20px}
.intro__tagline{
  font-family:var(--ff-d);font-size:clamp(2.2rem,4vw,3.6rem);
  font-weight:400;color:var(--text-wht);line-height:1.25;
}
.intro__right p{
  font-family:var(--ff-b);font-size:1rem;font-weight:300;
  line-height:1.8;color:var(--text-mut);margin-bottom:24px;
}
.intro__right p:last-child{margin-bottom:0}

/* ══════════════════════════════════════════
   PRODUCTS / CATALOG 
══════════════════════════════════════════ */
.catalog{padding:120px 64px;background:var(--bg-light)}
.catalog__head{text-align:center;margin-bottom:70px}
.catalog__grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:40px;max-width:1200px;margin:0 auto;
}
.pcard{position:relative;cursor:pointer; padding-bottom: 10px;}
.pcard__img-wrap{
  width:100%;aspect-ratio:3/4;overflow:hidden;
  background:var(--bg-med);position:relative;
  border: 1px solid var(--border);
  transition: border-color .4s;
}
.pcard:hover .pcard__img-wrap{border-color: var(--gold);}
.pcard__img-wrap img{
  transition:transform 1.2s var(--ease);
  filter: grayscale(20%);
}
.pcard:hover .pcard__img-wrap img{transform:scale(1.08); filter: grayscale(0%);}
.pcard__overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(5,5,5,0.95) 0%, transparent 60%);
  opacity:0;transition:opacity .5s ease;
}
.pcard:hover .pcard__overlay{opacity:1}
.pcard__num{
  position:absolute;top:16px;left:16px;
  font-family:var(--ff-b);font-size:.7rem;font-weight:400;
  color:var(--ink);background:var(--gold);
  padding:4px 10px; border-radius: 2px;
}
.pcard__info{padding:24px 0 0; text-align: center;}
.pcard__origin{
  font-family:var(--ff-b);font-size:.65rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-mut);margin-bottom:8px;
}
.pcard__name{
  font-family:var(--ff-d);font-size:1.4rem;font-weight:400;
  color:var(--text-wht);line-height:1.2;margin-bottom:8px;
  transition: color .3s;
}
.pcard:hover .pcard__name{color: var(--gold-lt);}
.pcard__price{
  font-family:var(--ff-b);font-size:1rem;font-weight:400;
  color:var(--gold);
}
.pcard__sizes {
  font-family: var(--ff-b);
  font-size: 0.7rem;
  font-weight: 300;
  color: var(--text-mut);
  margin-top: 6px;
  line-height: 1.5;
}
.pcard__sizes-label {
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.05em;
}
.pcard{opacity:0;transform:translateY(40px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.pcard.visible{opacity:1;transform:none}

/* ══════════════════════════════════════════
   BANNER / WHY VERDANT
══════════════════════════════════════════ */
.banner{background:var(--bg-med);padding:120px 64px;overflow:hidden;position:relative;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.banner::before{
  content:'';position:absolute;right:-200px;top:-200px;
  width:600px;height:600px;
  border:1px dashed rgba(212, 175, 55, 0.2);border-radius:50%;
  animation:spin 80s linear infinite;
}
.banner__inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.5fr;gap:100px;align-items:start;
  position:relative;z-index:2;
}
.banner__text h2{
  font-family:var(--ff-d);font-size:clamp(2.2rem,4vw,3.4rem);
  font-weight:400;color:var(--text-wht);margin-top:16px;line-height:1.2;
}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.pillar__n{
  font-family:var(--ff-d);font-size:2.2rem;font-weight:400;font-style:italic;
  color:var(--gold);line-height:1;margin-bottom:12px;
  display:block; opacity: 0.6;
}
.pillar strong{
  display:block;font-family:var(--ff-b);font-size:.8rem;
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-wht);margin-bottom:10px;
}
.pillar p{font-size:.9rem;color:var(--text-mut);line-height:1.7}

/* ══════════════════════════════════════════
   LOCATION (FIND US)
══════════════════════════════════════════ */
.location{
  display:grid;grid-template-columns:450px 1fr;
  min-height:600px;overflow:hidden; background: var(--bg-dark);
  position: relative;
}
.location__panel{
  background:var(--bg-med);padding:80px 60px;
  display:flex;flex-direction:column;justify-content:center;
  border-right: 1px solid var(--border);
  position: relative;
}
.location__content {
  position: relative;
  z-index: 2; /* Keeps text above the animated leaves */
}

/* TEA LEAVES ANIMATION */
.leaves-container {
  position: absolute; 
  inset: 0; 
  overflow: hidden; 
  z-index: 1; 
  pointer-events: none;
}
.leaf {
  position: absolute;
  background: linear-gradient(135deg, var(--gold) 0%, transparent 80%);
  border-radius: 0 50% 0 50%; /* Pure CSS Leaf Shape */
  opacity: 0.15;
  animation: floatLeaf 15s linear infinite;
}
.leaf:nth-child(1) { top: -10%; left: 15%; width: 30px; height: 30px; animation-duration: 18s; animation-delay: 0s; }
.leaf:nth-child(2) { top: -10%; left: 40%; width: 22px; height: 22px; animation-duration: 22s; animation-delay: 3s; }
.leaf:nth-child(3) { top: -10%; left: 75%; width: 40px; height: 40px; animation-duration: 16s; animation-delay: 7s; }
.leaf:nth-child(4) { top: -10%; left: 50%; width: 25px; height: 25px; animation-duration: 20s; animation-delay: 11s; }
.leaf:nth-child(5) { top: -10%; left: 85%; width: 35px; height: 35px; animation-duration: 25s; animation-delay: 1s; }
.leaf:nth-child(6) { top: -10%; left: 25%; width: 20px; height: 20px; animation-duration: 19s; animation-delay: 8s; }

@keyframes floatLeaf {
  0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 0; }
  10% { opacity: 0.25; }
  90% { opacity: 0.25; }
  100% { transform: translateY(800px) rotate(360deg) translateX(80px); opacity: 0; }
}

.location__title{
  font-family:var(--ff-d);font-size:clamp(2.2rem,3.5vw,3.2rem);
  font-weight:400;color:var(--text-wht);line-height:1.2;margin:14px 0 20px;
}
.location__sub{font-size:.95rem;color:var(--text-mut);line-height:1.7;margin-bottom:40px}
.loc-list{list-style:none;display:flex;flex-direction:column;gap:20px;margin-bottom:40px}
.loc-list li{display:flex;align-items:flex-start;gap:16px}
.loc-list li a,.loc-list li .loc-text{
  font-size:.9rem;color:var(--text-wht);line-height:1.5;
}
.loc-list li a{transition:color .25s}
.loc-list li a:hover{color:var(--gold)}
.loc-icon{font-size:1.1rem;flex-shrink:0;color:var(--gold)}
.loc-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-b);font-size:.75rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);
  border-bottom:1px solid var(--gold);padding-bottom:4px;
  transition:opacity .3s; width: max-content;
}
.loc-cta:hover{opacity: 0.7;}
.location__map{
  width:100%; max-width: 100%; height:100%; min-height:500px; border:none;
  filter: grayscale(80%) contrast(120%) opacity(0.8);
  display: block;
}

/* ══════════════════════════════════════════
   CONTACT
══════════════════════════════════════════ */
.contact{padding:130px 64px;background:var(--bg-light); border-top: 1px solid var(--border);}
.contact__inner{
  max-width:1140px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start;
}
.contact__title{
  font-family:var(--ff-d);font-size:clamp(2.4rem,4.5vw,3.8rem);
  font-weight:400;color:var(--text-wht);line-height:1.1;margin:14px 0 24px;
}
.contact__sub{font-size:.95rem;color:var(--text-mut);line-height:1.8;margin-bottom:40px}
.contact__info{list-style:none;display:flex;flex-direction:column;gap:16px}
.contact__info li a{font-size:.95rem;color:var(--gold);transition:opacity .25s}
.contact__info li a:hover{opacity: 0.7}
/* form */
.cform{display:flex;flex-direction:column;gap:24px}
.cfield{display:flex;flex-direction:column;gap:8px}
.cfield label{
  font-family:var(--ff-b);font-size:.65rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.cfield input,.cfield textarea{
  background:transparent;border:1px solid var(--border);border-radius:2px;
  padding:16px 18px;font-family:var(--ff-b);font-size:.95rem;
  color:var(--text-wht);outline:none;resize:none;
  transition:border-color .3s,box-shadow .3s;
}
.cfield input::placeholder,.cfield textarea::placeholder{color:var(--text-mut); opacity:0.5;}
.cfield input:focus,.cfield textarea:focus{
  border-color:var(--gold);box-shadow:0 0 10px rgba(212,175,55,.1);
}
.cform-submit{
  font-family:var(--ff-b);font-size:.75rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;
  background:var(--gold);color:var(--ink);
  padding:18px 32px;border-radius:2px;width:100%;
  transition:all .35s var(--ease); margin-top: 10px;
}
.cform-submit:hover{background:var(--gold-lt);transform:translateY(-2px);box-shadow:0 12px 25px rgba(212,175,55,.2)}
/* thanks */
.thanks{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:300px;text-align:center;border:1px solid var(--border);
  background:var(--bg-med);gap:16px;
  animation:fadeIn .6s var(--ease);
}
.thanks-star{font-size:2rem;color:var(--gold);animation:spin 5s linear infinite;display:inline-block}
.thanks h3{font-family:var(--ff-d);font-size:2.2rem;font-weight:400;color:var(--text-wht)}
.thanks p{font-size:.95rem;color:var(--text-mut)}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer{background:var(--bg-dark);position:relative;border-top:1px solid var(--border)}
.footer__body{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.8fr 1fr 1fr 1.4fr;gap:60px;
  padding:80px 64px 60px;
}
.footer__logo {
  font-family: var(--ff-b);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .24em;
  color: var(--text-wht);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.footer__logo-star{color:var(--gold);animation:spin 14s linear infinite;display:inline-block}
.footer__brand p{font-size:.9rem;color:var(--text-mut);line-height:1.7;margin-bottom:32px;max-width:280px}
.footer__socials{display:flex;gap:12px}
.fsoc{
  width:38px;height:38px;border:1px solid var(--border);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-b);font-size:.65rem;font-weight:500;letter-spacing:.05em;
  color:var(--gold);
  transition:all .3s var(--ease);
}
.fsoc:hover{background:var(--gold);color:var(--ink);transform:translateY(-3px)}
.footer__col h5{
  font-family:var(--ff-b);font-size:.65rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:24px;
}
.footer__col ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.footer__col li button,.footer__col li a{
  font-family:var(--ff-b);font-size:.9rem;
  color:var(--text-mut);cursor:pointer;padding:0;
  transition:color .2s;
}
.footer__col li button:hover,.footer__col li a:hover{color:var(--gold-lt)}
.footer__col--c li{display:flex;gap:10px;align-items:flex-start}
.footer__col--c li span{color:var(--gold); font-size: 1rem;}
.footer__col--c li a,.footer__col--c li span:last-child{font-size:.9rem;color:var(--text-mut);line-height:1.6}
.footer__col--c li a:hover{color:var(--gold-lt)}

.footer__bottom{
  border-top:1px solid var(--border);padding:24px 64px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-family:var(--ff-b);font-size:.75rem;color:var(--text-mut);
}
.footer__bottom div{display:flex;gap:24px}
.footer__bottom a{transition:color .2s}
.footer__bottom a:hover{color:var(--gold)}

/* ══════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════
   RESPONSIVE (Mobile & Tablet Layouts)
══════════════════════════════════════════ */
@media(max-width:1100px){
  .footer__body{grid-template-columns:1fr 1fr}
  .intro{grid-template-columns:1fr;gap:52px}
  .location{grid-template-columns:360px 1fr}
}
@media(max-width:900px){
  /* Mobile Nav Restructure: Hides links/CTA, keeps toggle & burger next to each other */
  .nav{ padding: 16px 28px; }
  .nav.scrolled{ padding: 12px 28px; }
  .nav__links { display: none; }
  .nav__cta { display: none; }
  
  .nav__right{
    display: flex;
    align-items: center;
    margin-left: auto; /* Pushes toggle and burger to the far right */
  }
  .nav__theme-btn { margin-right: 20px; } /* Ensures spacing between toggle and burger */
  .nav__burger{ display:flex; }
  
  .hero{align-items: flex-end;}
  .hero__body{padding:0 28px 110px; margin-top: 0; max-width:100%}
  
  .hero__stats{right:28px;bottom:70px;gap:32px}
  .hero__scroll{left:28px;bottom:30px}
  
  .catalog{padding:90px 28px}
  .banner{padding:80px 28px}
  .banner__inner{grid-template-columns:1fr;gap:48px}
  .contact{padding:90px 28px}
  .contact__inner{grid-template-columns:1fr;gap:52px}
  .location{grid-template-columns:1fr}
  .location__map{min-height:360px;height:360px; max-width: 100%; width: 100%;}
  .footer__body{padding:60px 28px 40px;gap:40px}
  .footer__bottom{padding:20px 28px;flex-direction:column;text-align:center}
  .intro{padding:80px 28px}
}

@media(max-width:600px){
  body{cursor:auto}
  #cur-dot,#cur-ring{display:none}
  .hero__title{font-size:2.8rem}
  .hero__stats{display:none}
  .hero__scroll{display:none}
  
  /* Mobile Product Cards: Smaller 2-Column Catalog Look */
  .catalog { padding: 70px 20px; }
  .catalog__grid {
    grid-template-columns: repeat(2, 1fr); /* Forces 2 tiny columns side-by-side */
    gap: 16px;
  }
  .pcard__img-wrap { aspect-ratio: 3/4; }
  .pcard__info { padding: 16px 0 0; }
  .pcard__name { font-size: 1rem; margin-bottom: 4px; }
  .pcard__origin { font-size: 0.55rem; margin-bottom: 6px; }
  .pcard__price { font-size: 0.85rem; }
  .pcard__num { font-size: 0.6rem; padding: 3px 8px; top: 10px; left: 10px; }

  .banner{padding:60px 20px}
  .pillars{grid-template-columns:1fr;gap:36px}
  .footer__body{grid-template-columns:1fr;padding:40px 20px}
  .footer__bottom div{flex-wrap:wrap;justify-content:center}
  .location__panel {padding: 50px 20px;}
}