/* ================= Theme ================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

:root{
  --brand-50:#FAF6EF; --brand-100:#F3EAD7; --brand-200:#E8D8B4; --brand-300:#DCC48E;
  --brand-400:#C9A769; --brand-500:#B58B47; --brand-600:#9E7738; --brand-700:#7B5A2A;
  --brand-800:#5A4122; --brand-900:#1e140d;
  --gold-500:#D4AF37; --gold-600:#C39A2E;
  --white:#fff; --text:#1e140d; --muted:#6b5b4a; --line:#eadfcf;

  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --shadow-strong: 0 18px 40px rgba(22,14,9,.28);
  --radius: 22px;
}
body {
  font-family: 'Cormorant Garamond', serif;
  color: var(--text);
  background: var(--brand-50);
  background: linear-gradient(to bottom, #f8f4ee, #fbf9f5);
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  /* letter-spacing: -0.01em; */
}
main {
  flex: 1 0 auto;
}

p, a, li, button {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 800;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height: 100%;}
html{scroll-behavior:smooth}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--text); background:var(--brand-50);display: flex;flex-direction: column;
}
.container{max-width:1180px;margin:0 auto;padding:0 20px}

/* ================= Header ================= */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:40;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
  background:transparent;
  border-bottom:1px solid transparent;
}
.site-header[data-scrolled="true"]{
  background:rgba(26,18,12,.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.header__row{display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand__logo{
  width:36px;height:36px;border-radius:999px;display:grid;place-items:center;
  background:rgba(255,255,255,.15); color:#fff; font-weight:700; letter-spacing:.5px;
  border:1px solid rgba(255,255,255,.25);
}

/* image logo */
.brand__logo-img {
  height: 22px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Optional: hide text brand name on very small screens */
@media (max-width: 480px) {
  .brand__name {
    display: block;
  }
}

.brand__name{color:#fff; font-weight:700}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.7rem 1.1rem; border-radius:999px; border:1px solid transparent; font-weight:600; text-decoration:none; transition: all .2s ease;}
.btn--pill{border-radius:999px}
.btn--light{background:#fff;color:#111}
.btn--light:hover{transform:translateY(-1px)}
.btn--gold{background:var(--gold-500); color:#1b140d; box-shadow:var(--shadow-strong)}
.btn--gold:hover{background:var(--gold-600); transform:translateY(-2px)}
.btn--lg{padding:.9rem 1.25rem; font-size:1rem}
.btn--dark{background:#1c1410; color:#fff; border:1px solid rgba(255,255,255,.18)}
.btn--dark:hover{background:#241a13}

.primary-nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.primary-nav a{text-decoration:none;color:#fff;font-weight:600;opacity:.9}
.primary-nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}


/* ================= Hero ================= */
.hero--immersive{
  position:relative; min-height:80dvh; display:grid; align-items:center;
  background:#000; background-size:cover; background-position:center; background-repeat:no-repeat;
}
.hero__overlay{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1200px 75% at 50% -15%, rgba(0,0,0,.35), transparent 5%),
    linear-gradient(to bottom, rgba(0,0,0,.70), rgba(0,0,0,.55) 45%, rgba(0,0,0,.65));
}
.hero__content{position:relative; z-index:1; text-align:center; padding-top:12vh}
.eyebrow{letter-spacing:.35em; text-transform:uppercase; color:rgba(255,255,255,.9); font-size:.8rem; margin:0 0 16px;}
.hero__title{color:#fff; margin:0; font-size:3rem; line-height:1.05; font-weight:800;}
@media (min-width:720px){ .hero__title{ font-size:4rem } }
.hero__subtitle{color:rgba(255,255,255,.9); font-size:1.05rem; margin:.9rem auto 0; max-width:920px}
.hero__cta{display:flex; gap:12px; justify-content:center; margin:22px 0 10px; flex-wrap:wrap}

@media (min-width: 720px){
  .hero--immersive{ min-height:70dvh; }  /* was full height */
}

/* scroll hint */
.scroll-hint{display:grid; place-items:center; border:1.5px solid rgba(255,255,255,.55); width:48px; height:48px; margin:22px auto 0; border-radius:999px; background:transparent; color:#fff;}
.scroll-hint .chev{width:14px; height:14px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform: rotate(45deg); animation: bob 1.6s infinite;}
.scroll-hint small{display:block; margin-top:8px; letter-spacing:.2em; opacity:.85; color:#fff}
@keyframes bob{0%,100%{ transform:translateY(-2px) rotate(45deg) } 50%{ transform:translateY(3px) rotate(45deg) }}


/* ================= Products ================= */
.products{
  padding:40px 0 10px;               
  background: var(--brand-50);       
}
.products .section__title{
  color:#1e140d; text-align:center; font-size:1.4rem; font-weight:700; margin:0 0 16px;
}

/* MOBILE: list view with space between cards */
.rail-grid{
  list-style:none; margin:0; padding:8px 12px;
  display:block;                     /* list mode */
}
.card{
  margin:12px 0;                     /* vertical gap */
  padding:10px;
  display:flex; gap:12px; align-items:stretch;
  background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
}
.card__media{
  width:88px; height:88px; flex:0 0 auto; border-radius:12px; overflow:hidden; background:#eee;
}
.card__media img{ width:100%; height:100%; object-fit:cover }
.card__body{ flex:1; min-width:0; padding:2px 2px; display:flex; flex-direction:column }
.card__name{
  font-size:20px; font-weight:700; margin:0; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card__tag{
  font-size:15px; color:var(--muted); margin-top:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card__bottom{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px }
.card__price{ font-weight:1200; font-size:20px; color:var(--gold-500) }
.card__buy .btn{ font-size:12px; padding:8px 10px }

.more-note{
  text-align:center;
  font-size:1.5rem;
  margin-top:20px;
  color:var(--text);
  font-weight:500;
}
.more-note a{
  color:var(--gold-600);
  text-decoration:none;
  font-weight:600;
}
.more-note a:hover{
  text-decoration:underline;
}


/* DESKTOP ≥992px: switch to GRID with vertical cards (equal height) */
@media (min-width: 992px){
  .rail-grid{
    display:grid; gap:18px; padding:18px;
    grid-template-columns: repeat(3, 1fr);       /* laptop: 3 columns */
    background:#fff; border:1px solid var(--line); border-radius:22px;
  }
  .card{
    margin:0; padding:0;                         /* grid cards have no outer margin/padding */
    flex-direction:column; height:100%;          /* equal-height cards in grid */
    border-radius:20px;
  }
  .card__media{
    width:auto; height:auto; flex:none;
    aspect-ratio: 4 / 3;                         /* consistent media aspect */
    border-radius:20px 20px 0 0; overflow:hidden;
  }
  .card__body{
    padding:12px 14px; flex:1; display:flex; flex-direction:column;
  }
  .card__name{
    white-space:normal; overflow:visible; text-overflow:clip; /* allow 2 lines on desktop */
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  }
  .card__tag{
    -webkit-line-clamp:2; min-height:2.6em;      /* reserve space to align bottoms */
  }
  .card__bottom{
    margin-top:auto;                             /* pushes price+button to bottom */
  }
}

/* XL ≥1200px: 4 columns */
@media (min-width: 1200px){
  .rail-grid{ grid-template-columns: repeat(4, 1fr); }
}



/* ================= Coming soon ================= */
.coming-band{padding:10px 0 10px; background:var(--brand-50)}
.coming-card{text-align:center; border:1px solid var(--line); border-radius:22px; padding:28px; background:#fff; box-shadow: var(--shadow);}
.coming-card h3{margin:0 0 8px; font-size:1.35rem}
.coming-card p{margin:0 0 16px; color:var(--muted)}

/* ================= Footer ================= */
.footer{border-top:1px solid var(--line); background:#fff}
.footer__inner{padding:18px 0; display:flex; flex-direction:column; align-items:center; gap:10px; font-size:12px; color:rgba(30,20,13,.75)}
.socials{display:flex; gap:18px}
.socials__link{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:999px; transition:transform .15s ease, background .2s ease}
.socials__link:hover{transform:translateY(-2px); background:var(--brand-100)}

footer,
.footer {
  flex-shrink: 0;
}

/* inline icons */
.icon{display:inline-block; width:18px; height:18px; background-repeat:no-repeat; background-size:18px 18px}
.icon--wa{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 24 24"><path d="M20.52 3.48A11.94 11.94 0 0 0 12.06 0C5.53 0 .24 5.29.24 11.82c0 2.08.54 4.1 1.57 5.89L0 24l6.47-1.7A11.76 11.76 0 0 0 12.06 24c6.53 0 11.82-5.29 11.82-11.82 0-3.16-1.23-6.14-3.36-8.28zM12.06 21.5c-1.87 0-3.7-.5-5.3-1.46l-.38-.22-3.84 1.01 1.03-3.74-.25-.39a9.78 9.78 0 0 1-1.51-5.88c0-5.41 4.4-9.81 9.82-9.81 2.62 0 5.08 1.02 6.93 2.87a9.69 9.69 0 0 1 2.87 6.93c0 5.41-4.4 9.81-9.82 9.81zm5.58-7.33c-.3-.15-1.78-.88-2.06-.98-.28-.11-.48-.15-.69.15-.2.3-.79.98-.97 1.18-.18.2-.36.22-.67.07-.3-.15-1.29-.47-2.46-1.5-.91-.8-1.52-1.79-1.7-2.1-.18-.3-.02-.47.13-.62.13-.13.3-.34.45-.51.15-.17.2-.3.3-.5.1-.2.05-.38-.03-.53-.08-.15-.69-1.64-.94-2.24-.25-.6-.5-.52-.69-.53l-.59-.01c-.2 0-.53.08-.81.38-.28.3-1.07 1.05-1.07 2.56s1.1 2.97 1.26 3.17c.15.2 2.16 3.3 5.22 4.62.73.31 1.3.5 1.74.64.73.23 1.4.2 1.93.12.59-.09 1.78-.72 2.03-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35z"/></svg>');}
.icon--insta{background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22%235A4122%22 viewBox=%220 0 24 24%22><path d=%22M7 2C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h10c2.757 0 5-2.243 5-5V7c0-2.757-2.243-5-5-5H7zm10 2c1.654 0 3 1.346 3 3v10c0 1.654-1.346 3-3 3H7c-1.654 0-3-1.346-3-3V7c0-1.654 1.346-3 3-3h10zm-5 3a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6zm5.5-2.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z%22/></svg>');}
.icon--mail{background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22%235A4122%22 viewBox=%220 0 24 24%22><path d=%22M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 2v.01L12 13 4 6.01V6h16zM4 18V8.236l7.386 6.322a1 1 0 001.228 0L20 8.236V18H4z%22/></svg>');}

.page{padding-top:72px}
.hero--inner{
  position:relative; min-height:50vh;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  display:flex; align-items:center; justify-content:center; text-align:center; color:#fff;
}
.hero--inner .overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:0}
.hero--inner .container{position:relative;z-index:1}
.hero--inner h1{font-size:2.2rem;margin:0;font-weight:700}
.hero--inner p{font-size:1.1rem;margin-top:10px}
.about-img{max-width:100%;border-radius:16px;margin:16px 0;box-shadow:var(--shadow)}
.policy-links{list-style:none;padding:0;margin:12px 0}
.policy-links li{margin:6px 0}
.policy-links a{color:var(--gold-600);text-decoration:none}
.policy-links a:hover{text-decoration:underline}

/* ===== Contact Page ===== */
.contact-page { padding-top: 84px; }
/* .contact-header { padding: 24px 3px 8px; } */
.contact-header h1 {
  font-size: 2.4rem; font-weight: 700; color: var(--brand-900); margin: 0 0 8px;
}
.contact-header p { font-size: 1.25rem; color: rgba(30,20,13,.8); margin: 0 0 18px; }

/* 3-card grid */
.contact-grid {
  display: grid; gap: 18px; grid-template-columns: 1fr; margin-bottom: 28px;
}
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
}
.contact-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #efe6d6;
  border-radius: 18px; padding: 18px; text-decoration: none; color: inherit;
  box-shadow: 0 24px 48px rgba(26,18,12,.08);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 56px rgba(26,18,12,.12);
  border-color: #eadfcf;
}
.contact-card h3 { margin: 0; font-size: 1.25rem; color: var(--brand-900); }
.muted { color: #6b5b4a; margin: 6px 0 0; }

/* icons on cards */
.cc-icon {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px;
  display: grid; place-items: center; background: #fff7e0; border: 1px solid #f1e7cc;
}
.cc-icon::before {
  content: ""; display: block; width: 22px; height: 22px; background-size: 22px 22px; background-repeat: no-repeat;
}
.cc-mail::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%235A4122" viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 2-8 6L4 6v-.01h16V6z"/></svg>'); }
.cc-phone::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%235A4122" viewBox="0 0 24 24"><path d="M6.6 10.8a15.9 15.9 0 006.6 6.6l2.2-2.2a1 1 0 011.1-.2 11.7 11.7 0 003.6 1.1 1 1 0 01.9 1v3.5a1 1 0 01-1 1A18 18 0 013 6a1 1 0 011-1h3.5a1 1 0 011 .9 11.7 11.7 0 001.1 3.6 1 1 0 01-.2 1.1l-2.2 2.2z"/></svg>'); }
.cc-wa::before    { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%235A4122" viewBox="0 0 24 24"><path d="M12.1 2A10.1 10.1 0 002 12.1c0 1.8.5 3.5 1.3 5L2 22l4.9-1.3a10 10 0 004.9 1.3A10.1 10.1 0 0012.1 2zm5.2 15.3c-.2.5-1 1-1.6 1.1-.4 0-.9.1-2.9-.6-2.4-.9-4-3.2-4.1-3.4-.1-.2-1-1.4-1-2.7s.6-1.9.8-2.2c.2-.2.4-.5.7-.5h.5c.2 0 .4 0 .5.4.2.5.6 1.8.6 1.9s0 .4-.1.5-.2.3-.3.5c-.2.2-.3.4-.2.6.3.6.8 1.1 1.4 1.5.7.5 1.3.6 1.6.8.2.1.4.1.5 0l.8-1.1c.1-.2.3-.3.5-.2l1.8.9c.2.1.4.2.4.4 0 .2.1.6-.1 1z"/></svg>'); }

/* Policies section */
.policies-block { margin-top: 14px; margin-bottom: 14px; }
.policies-block h2 { font-size: 1.4rem; margin: 6px 0 12px; color: var(--brand-900); }
.policy-grid {
  display: grid; gap: 14px; grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .policy-grid { grid-template-columns: repeat(3, 1fr); }
}
.policy-card {
  display: flex; gap: 12px; align-items: center;
  background: #fff; border: 1px solid #efe6d6; border-radius: 16px; padding: 14px 16px;
  text-decoration: none; color: inherit; box-shadow: 0 18px 36px rgba(26,18,12,.06);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.policy-card:hover { transform: translateY(-2px); box-shadow: 0 24px 44px rgba(26,18,12,.1); border-color: #eadfcf; }
.policy-card h4 { margin: 0; font-size: 1.05rem; color: var(--brand-900); }
.policy-card .muted { margin: 4px 0 0; }
.pc-dot {
  width: 10px; height: 10px; border-radius: 999px; background: var(--gold-500);
  box-shadow: 0 0 0 6px rgba(212,175,55,.14);
}

/* About Page */
.about-header {
  border-bottom: 1px solid #e5ded0;
}
.about-header h1 {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--brand-900);
  margin: 0;
}
.about-header .subtitle {
  color: var(--muted);
  margin-top: 4px;
  font-size: 0.95rem;
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.story-grid.only-copy { grid-template-columns: 1fr; }
/* Video banner (replaces the scenic image) */
.banner-video { margin: 16px 0 0; }
.banner-video__media{
  width: 100%;
  /* height: 50%; */
  /* max-width: 960px; */
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(26, 18, 12, 0.08);
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}
@media (max-width: 768px) {
  .banner-video__media {
    width: 100%;
    margin-bottom: 14px;
    border-radius: 16px;
  }
}
@media (min-width: 992px) {
  .story-grid {
    grid-template-columns: 1.1fr 1fr;
    align-items: start;
    gap: 36px;
  }
}
.story-image img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(26, 18, 12, 0.08);
}
.story-content h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand-900);
}
.story-content p {
  color: #4a3e2c;
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.story-content blockquote {
  border-left: 3px solid var(--gold-500);
  margin: 10px 0 0;
  padding-left: 10px;
  color: #7b6d56;
  font-size: 0.9rem;
}

/* Scenic banner */
.banner-section img {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 32px auto;
  width: 100%;
}

/* Purity Section */
.purity-section {
  padding: 48px 0;
  text-align: center;
}
.section-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-900);
  margin-bottom: 4px;
}
.section-subtitle {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 28px;
}
.purity-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 992px) {
  .purity-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
.purity-card {
  background: #fff;
  border: 1px solid #efe6d6;
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(26, 18, 12, 0.06);
  padding: 0 0 16px;
  overflow: hidden;
  text-align: left;
}
.purity-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.purity-card h3 {
  font-size: 1.05rem;
  margin: 12px 14px 6px;
  color: var(--brand-900);
}
.purity-card p {
  font-size: 0.9rem;
  color: #4a3e2c;
  margin: 0 14px 10px;
  line-height: 1.5;
}