/** Shopify CDN: Minification failed

Line 3739:89 Unexpected "/"
Line 5308:0 Unexpected "}"

**/
/* ═══════════════════════════════════════════
   BRAND TOKENS — from brand document
═══════════════════════════════════════════ */
:root {
  /* Chromatic Identity */
  --cream:        #F8EED8;   /* Cream */
  --cream-light:  #FDF6E8;
  --clay:         #B06848;   /* Clay */
  --clay-light:   #C98B68;
  --saigon:       #7A1F1F;   /* Saigon */
  --saigon-deep:  #4F1010;
  --saigon-mid:   #9B2E2E;

  /* Neutrals */
  --ink:          #1A1410;
  --smoke:        #F2EBE0;
  --mist:         #EAE0D0;
  --dust:         #9A8070;

  /* Topo pattern color */
  --topo-line:    rgba(122,31,31,0.12);
  --topo-line-cream: rgba(122,31,31,0.08);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 19.2px; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream-light);
  color: var(--ink);
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════
   TOPOGRAPHIC SVG PATTERN (brand element)
═══════════════════════════════════════════ */
.topo-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.text-block{
 font-family: 'Cormorant Garamond', serif;
}

/* ═══════════════════════════════════════════
   NAV
═══════════════════════════════════════════ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 9%;
  transition: padding 0.5s ease, background 0.5s ease, backdrop-filter 0.5s ease;
}

nav.scrolled {
  padding: 20px 9%;
  background: rgba(248,238,216,0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(122,31,31,0.08);
}

/* SVG Logo mark */
.nav-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 160px;
  margin-top: -20px;
}

.logo-svg { height: 36px; width: auto; }

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}

.nav-links a {
  font-size: 13.2px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.4s, opacity 0.3s;
  position: relative;
}
nav.scrolled .nav-links a { color: var(--ink); opacity: 0.65; }

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 2px;
  background: var(--saigon);
  transition: width 0.3s ease;
}

.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { width: 100%; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-socials {
  display: flex;
  gap: 16px;
}

.nav-socials a {
  font-size: 13.2px;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--dust);
  text-decoration: none;
  transition: color 0.3s;
}

.nav-socials a:hover { color: var(--saigon); }


.nav-account{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#d7a27d; /* same gold tone */
  text-decoration:none;
  opacity:.85;
  transition:.3s ease;
}
@media screen and (max-width: 768px) {
  .nav-account {
    display: none !important;
  }
}
.account-link{
  justify-content:center;
  text-align:center;
  font-size:24px !important;
  padding:14px 24px !important;
  border:1px solid rgba(248,238,216,.2);
  width:fit-content;
  margin:24px auto 0;
  gap:0 !important;
}

.nav-account svg{
  width:18px;
  height:18px;
  stroke:currentColor;
}
.mobile-menu-footer{
  flex-direction:column;
  gap:16px;
  align-items:flex-start;
}

.mobile-account{
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#d7a27d;
  text-decoration:none;
}


.nav-account:hover{
  opacity:1;
}


.nav-cta {
  font-size: 13.2px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  background: transparent;
  padding: 13px 28px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.45);
  transition: all 0.35s;
  position: relative;
  overflow: hidden;
}
.nav-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
nav.scrolled .nav-cta {
  color: var(--cream);
  background: var(--saigon);
  border-color: var(--saigon);
}

.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--saigon-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  z-index: -1;
}

.nav-cta:hover::before { transform: scaleX(1); }

/* ═══════════════════════════════════════════
   HERO — Full-bleed cinematic banner
═══════════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 578px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* Full-bleed background image */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.04);
  animation: slowZoom 16s ease-in-out infinite alternate;
}

/* Multi-layer overlay: dark vignette + subtle gradient */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(10,2,2,0.25) 0%, rgba(10,2,2,0.68) 100%),
    linear-gradient(to bottom, rgba(10,2,2,0.55) 0%, rgba(10,2,2,0.18) 42%, rgba(10,2,2,0.65) 100%);
}

/* Topo lines over the image — very subtle */
.hero-topo {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.18;
}

/* Hero content — centred above image */
.hero-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 40px 20px;
  margin-top: auto;
  width: 100%;
}

/* Large logo in hero */
.hero-logo-wrap {
  margin-bottom: 44px;
  opacity: 0;
  animation: fadeIn 1.2s ease 0.3s forwards;
}

.hero-logo-svg {
  height: 64px;
  width: auto;
  filter: drop-shadow(0 2px 20px rgba(0,0,0,0.4));
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  justify-content: center;
  opacity: 0;
  animation: rise 1s ease 0.6s forwards;
}
.craft .eyebrow{
  justify-content: left;
}

.eyebrow-line {
  width: 40px; height: 1px;
  background: var(--clay-light);
}

.eyebrow-text {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--clay-light);
}

.hero-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(47px, 6.6vw, 100px);
  font-weight: 300;
  line-height: 0.95;
  color: #fff;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
  opacity: 0;
  animation: rise 1.1s ease 0.8s forwards;
  text-shadow: 0 2px 40px rgba(0,0,0,0.3);
}

.hero-h1 em {
  font-style: italic;
  color: var(--clay-light);
}

.hero-divider {
  width: 64px; height: 1px;
  background: rgba(255,255,255,0.35);
  margin: 0 auto 28px;
  opacity: 0;
  animation: expandLine 0.8s ease 1.1s forwards;
}

.hero-sub {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.04em;
  max-width: 520px;
  margin: 0 auto 20px;
  opacity: 0;
  animation: rise 1s ease 1.2s forwards;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 32px;
  justify-content: center;
  opacity: 0;
  animation: rise 1s ease 1.4s forwards;
}

.btn-filled {
  font-size: 13.2px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--saigon-deep);
  background: var(--cream);
  padding: 17px 52px;
  text-decoration: none;
  border: 1px solid var(--cream);
  transition: all 0.4s;
  position: relative;
  overflow: hidden;
}

.btn-filled::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--clay-light);
  transform: translateY(101%);
  transition: transform 0.4s cubic-bezier(0.65,0,0.35,1);
  z-index: -1;
}

.btn-filled:hover { border-color: var(--clay-light); color: var(--saigon-deep); }
.btn-filled:hover::after { transform: translateY(0); }

.btn-text {
  font-size: 13.2px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: gap 0.3s, color 0.3s;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 3px;
}

.btn-text:hover { gap: 20px; color: #fff; border-color: rgba(255,255,255,0.7); }

.btn-text-arrow {
  width: 24px; height: 1px;
  background: rgba(255,255,255,0.6);
  position: relative;
  transition: width 0.3s;
}

.btn-text-arrow::after {
  content: '';
  position: absolute;
  right: 0; top: -3px;
  width: 6px; height: 6px;
  border-right: 1px solid rgba(255,255,255,0.8);
  border-top: 1px solid rgba(255,255,255,0.8);
  transform: rotate(45deg);
}

.btn-text:hover .btn-text-arrow { width: 34px; }

/* Floating product card — bottom left over image */
.hero-pill {
  position: absolute;
  bottom: 20px; left: 64px;
  z-index: 10;
  background: rgba(248,238,216,0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(248,238,216,0.2);
  padding: 22px 28px;
  width: 220px;
  opacity: 0;
  animation: slideUp 0.9s ease 1.6s forwards;
}

.pill-label {
  font-size: 10.8px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clay-light);
  margin-bottom: 8px;
}

.pill-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 33.6px;
  font-weight: 400;
  color: #fff;
  line-height: 1;
  margin-bottom: 5px;
}

.pill-price {
  font-size: 14.4px;
  font-weight: 300;
  color: rgba(248,238,216,0.6);
  margin-bottom: 14px;
}

.pill-link {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,139,104,0.4);
  padding-bottom: 2px;
  transition: border-color 0.3s;
}

.pill-link:hover { border-color: var(--clay-light); }

/* Scroll cue */
.hero-scroll-cue {
  position: absolute;
  bottom: 40px; right: 64px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadeIn 1s ease 2s forwards;
}
.pill-cart-form{
  margin:0;
  padding:0;
}

.pill-link{
  appearance:none;
  -webkit-appearance:none;
  background:none;
  border:none;

  font-size:12px;
  font-weight:400;
  letter-spacing:0.2em;
  text-transform:uppercase;

  color:var(--clay-light);

  text-decoration:none;
  border-bottom:1px solid rgba(201,139,104,0.4);

  padding:0 0 2px 0;

  transition:border-color 0.3s;

  cursor:pointer;

  font-family:inherit;

  line-height:1.2;

  display:inline-block;
}

.pill-link:hover{
  border-color:var(--clay-light);
}

.scroll-bar {
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  animation: scrollBob 2.2s ease-in-out infinite;
}

.scroll-text {
  font-size: 10.8px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}


/* ═══════════════════════════════════════════
   RIBBON
═══════════════════════════════════════════ */
.ribbon {
  background: var(--saigon);
  padding: 0;
  overflow: hidden;
  position: relative;
  height: 52px;
  display: flex;
  align-items: center;
}

.ribbon-track {
  display: flex;
  white-space: nowrap;
  animation: ticker 25s linear infinite;
  gap: 0;
}

.ribbon-item {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(248,238,216,0.75);
  padding: 0 36px;
  display: flex;
  align-items: center;
  gap: 36px;
  flex-shrink: 0;
}

.ribbon-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--clay-light);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   SHARED SECTION UTILS
═══════════════════════════════════════════ */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.section-eyebrow-line {
  width: 32px; height: 1px;
  background: var(--clay);
}

.section-eyebrow-text {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--clay);
}

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(46px, 5vw, 68px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--saigon-deep);
  letter-spacing: -0.01em;
}

.section-title em {
  font-style: italic;
  color: var(--saigon);
}

.body-text {
  font-size: 16.8px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--dust);
  letter-spacing: 0.01em;
}

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.85s ease,
    transform 0.85s ease;
  will-change: opacity, transform;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.rv1 { transition-delay: 0.08s; }
.rv2 { transition-delay: 0.18s; }
.rv3 { transition-delay: 0.28s; }
.rv4 { transition-delay: 0.38s; }
.rv5 { transition-delay: 0.48s; }

/* ═══════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════ */
.about {
  padding: 130px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.about-topo {
  position: absolute;
  top: 0; right: 0;
  width: 60%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.about-visuals {
  position: relative;
  height: 600px;
  z-index: 1;
}

.about-img-a {
  position: absolute;
  top: 0; right: 0;
  width: 76%; height: 72%;
  overflow: hidden;
}

.about-img-a img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s ease;
}

.about-img-a:hover img { transform: scale(1.04); }

.about-img-b {
  position: absolute;
  bottom: 0; left: 0;
  width: 55%; height: 48%;
  overflow: hidden;
  outline: 8px solid var(--cream-light);
  outline-offset: -8px;
}

.about-img-b img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.about-badge {
  position: absolute;
  bottom: 44%; left: 47%;
  transform: translate(-50%, 50%);
  width: 96px; height: 96px;
  background: var(--saigon);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 5px solid var(--cream-light);
  z-index: 5;
}

.about-badge-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 31.2px;
  font-weight: 400;
  color: var(--clay-light);
  line-height: 1;
}

.about-badge-label {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248,238,216,0.55);
  text-align: center;
  line-height: 1.3;
  margin-top: 2px;
}

.about-content {
  position: relative;
  z-index: 2;
}

.about-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 44px;
}

.pillar {
  padding: 20px 22px;
  border-left: 2px solid var(--clay);
  background: rgba(176,104,72,0.05);
  transition: background 0.3s;
}

.pillar:hover {
  background: rgba(176,104,72,0.1);
}

.pillar-name {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--saigon);
  margin-bottom: 7px;
}

.pillar-desc {
  font-size: 14.4px;
  font-weight: 300;
  color: var(--dust);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════
   PRODUCTS — dark section
═══════════════════════════════════════════ */
.products {
  background: var(--saigon-deep);
  padding: 130px 64px;
  position: relative;
  overflow: hidden;
}

.products-topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
}

.products-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 72px;
  position: relative;
  z-index: 2;
}

.products-header .section-title { color: var(--cream); }
.products-header .section-eyebrow-text { color: var(--clay-light); }
.products-header .section-eyebrow-line { background: var(--clay-light); }

.view-all-link {
  font-size: 13.2px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay-light);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(201,139,104,0.3);
  padding-bottom: 3px;
  transition: all 0.3s;
}

.view-all-link:hover { border-color: var(--clay-light); gap: 18px; }

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  position: relative;
  z-index: 2;
}

.prod-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
}

.prod-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.5s ease;
  filter: brightness(0.72) saturate(0.75);
}

.prod-card:hover img {
  transform: scale(1.07);
  filter: brightness(0.5) saturate(0.5);
}

.prod-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(79,16,16,0.92) 0%, rgba(79,16,16,0.2) 20%, transparent 100%);
  padding: 0 32px 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform: translateY(12px);
  transition: transform 0.4s ease;
}

.prod-card:hover .prod-overlay { transform: translateY(0); }

.prod-variety {
  font-size: 10.8px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clay-light);
  margin-bottom: 8px;
}

.prod-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 45.6px;
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 8px;
  line-height: 1;
}

.prod-desc {
  font-size: 14.4px;
  font-weight: 300;
  color: rgba(248,238,216,0.65);
  line-height: 1.65;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s 0.1s, transform 0.4s 0.1s;
}

.prod-card:hover .prod-desc {
  opacity: 1;
  transform: none;
}

.prod-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.prod-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28.8px;
  font-weight: 400;
  color: var(--clay-light);
}

.prod-btn {
  font-size: 10.8px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--saigon-deep);
  background: var(--clay-light);
  padding: 10px 18px;
  text-decoration: none;
  transition: background 0.3s;
}

.prod-btn:hover { background: var(--cream); }
.prod-footer form{
  margin:0;
}

.prod-btn{
  border:none;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  font-family:inherit;
}

/* ═══════════════════════════════════════════
   HOW TO MAKE — editorial strip
═══════════════════════════════════════════ */
.how {
  padding: 130px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
  position: relative;
  background: var(--mist);
  overflow: hidden;
}

.how-visual {
  position: relative;
  height: 580px;
}

.how-img-main {
  position: absolute;
  top: 0; left: 0;
  width: 72%; height: 80%;
  overflow: hidden;
}

.how-img-main img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.how-img-sub {
  position: absolute;
  bottom: 0; right: 0;
  width: 52%; height: 44%;
  overflow: hidden;
  outline: 8px solid var(--mist);
  outline-offset: -8px;
}

.how-img-sub img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.how-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.how-step {
  display: flex;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(122,31,31,0.1);
  transition: padding-left 0.3s;
  cursor: default;
}

.how-step:first-of-type { border-top: 1px solid rgba(122,31,31,0.1); }
.how-step:hover { padding-left: 8px; }

.step-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px;
  font-weight: 300;
  color: rgba(122,31,31,0.14);
  line-height: 1;
  min-width: 44px;
  transition: color 0.3s;
}

.how-step:hover .step-num { color: var(--clay); }

.step-body {}

.step-title {
  font-size: 13.2px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--saigon);
  margin-bottom: 7px;
}

.step-desc {
  font-size: 15.6px;
  font-weight: 300;
  color: var(--dust);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════
   BENEFITS
═══════════════════════════════════════════ */
.benefits {
  padding: 130px 64px;
  position: relative;
  overflow: hidden;
}

.benefits-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 110px;
  align-items: center;
}

.benefits-content {}

.benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 52px;
}

.benefit-card {
  padding: 28px 24px 24px;
  background: var(--smoke);
  border-top: 2px solid transparent;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.benefit-card:hover {
  border-top-color: var(--saigon);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(122,31,31,0.08);
}

.benefit-icon {
  width: 36px; height: 36px;
  margin-bottom: 18px;
  color: var(--clay);
}

.benefit-name {
  font-size: 13.2px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--saigon);
  margin-bottom: 10px;
}

.benefit-desc {
  font-size: 15.6px;
  font-weight: 300;
  color: var(--dust);
  line-height: 1.7;
}

.benefits-visual {
  position: relative;
  height: 680px;
}

.bv-img-large {
  position: absolute;
  top: 0; right: 0;
  width: 88%; height: 78%;
  overflow: hidden;
}

.bv-img-large img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.bv-img-small {
  position: absolute;
  bottom: 0; left: 0;
  width: 52%; height: 44%;
  overflow: hidden;
  outline: 8px solid var(--cream-light);
  outline-offset: -8px;
}

.bv-img-small img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.bv-stat {
  position: absolute;
  bottom: 130px; right: -12px;
  background: var(--saigon);
  padding: 24px 28px;
  text-align: center;
  min-width: 130px;
}

.bv-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 62.4px;
  font-weight: 300;
  color: var(--clay-light);
  line-height: 1;
  display: block;
}

.bv-label {
  font-size: 10.8px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(248,238,216,0.5);
  margin-top: 6px;
  display: block;
}

/* ═══════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════ */
.testimonials {
  padding: 130px 64px;
  background: var(--saigon-deep);
  position: relative;
  overflow: hidden;
}

.testimonials-topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
}

.testimonials-header {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
  z-index: 2;
}

.testimonials-header .section-title { color: var(--cream); }
.testimonials-header .section-eyebrow { justify-content: center; }
.testimonials-header .section-eyebrow-line { background: var(--clay-light); }
.testimonials-header .section-eyebrow-text { color: var(--clay-light); }

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}

.testi-card {
  padding: 40px 36px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(248,238,216,0.08);
  transition: background 0.3s, transform 0.35s, box-shadow 0.35s;
}

.testi-card:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(0,0,0,0.2);
}

.testi-qmark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 86.4px;
  font-weight: 300;
  color: var(--clay);
  line-height: 0.7;
  margin-bottom: 18px;
  display: block;
}

.testi-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22.8px;
  font-weight: 400;
  font-style: italic;
  color: var(--cream);
  line-height: 1.6;
  margin-bottom: 28px;
}

.testi-stars {
  color: var(--clay-light);
  font-size: 14.4px;
  letter-spacing: 3px;
  margin-bottom: 14px;
}

.testi-author {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(248,238,216,0.4);
}

/* ═══════════════════════════════════════════
   CTA FULL BAND
═══════════════════════════════════════════ */
.cta-band {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
  position: relative;
  overflow: hidden;
}

.cta-left {
  background: var(--saigon);
  padding: 100px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.cta-topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
}

.cta-content {
  position: relative;
  z-index: 2;
}

.cta-content .section-eyebrow-text { color: var(--clay-light); }
.cta-content .section-eyebrow-line { background: var(--clay-light); }

.cta-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(46px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--cream);
  margin: 20px 0 22px;
}

.cta-title em {
  font-style: italic;
  color: var(--clay-light);
}

.cta-body {
  font-size: 16.8px;
  font-weight: 300;
  color: rgba(248,238,216,0.6);
  line-height: 1.85;
  margin-bottom: 44px;
  max-width: 400px;
}

.cta-actions {
  display: flex;
  gap: 24px;
  align-items: center;
}

.btn-clay {
  font-size: 13.2px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--saigon-deep);
  background: var(--clay-light);
  padding: 17px 44px;
  text-decoration: none;
  transition: all 0.3s;
  border: 1px solid var(--clay-light);
}

.btn-clay:hover { background: var(--cream); border-color: var(--cream); }

.btn-ghost-light {
  font-size: 13.2px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(248,238,216,0.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(248,238,216,0.25);
  padding-bottom: 3px;
  transition: all 0.3s;
}

.btn-ghost-light:hover { color: var(--cream); border-color: rgba(248,238,216,0.7); }

.cta-right {
  position: relative;
  overflow: hidden;
}

.cta-right img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.65) saturate(0.7);
  transition: transform 0.9s ease;
}

.cta-right:hover img { transform: scale(1.04); }

.cta-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--saigon) 0%, transparent 15%);
}

/* ═══════════════════════════════════════════
   BLOG
═══════════════════════════════════════════ */
.blog {
  padding: 40px 64px 130px;
}

.blog-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 56px;
}

.blog-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 24px;
}

.blog-card {
  cursor: pointer;
}

.blog-img {
  overflow: hidden;
  margin-bottom: 22px;
}

.blog-img img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease, filter 0.5s ease;
  filter: brightness(0.9) saturate(0.85);
}

.blog-card:first-child .blog-img img { aspect-ratio: 16/11; }
.blog-card:hover .blog-img img { transform: scale(1.04); filter: brightness(0.8); }

.blog-cat {
  font-size: 10.8px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 10px;
}

.blog-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26.4px;
  font-weight: 400;
  color: var(--saigon-deep);
  line-height: 1.3;
  margin-bottom: 12px;
  transition: color 0.3s;
}

.blog-card:first-child .blog-title { font-size: 36px; }
.blog-card:hover .blog-title { color: var(--saigon); }

.blog-excerpt {
  font-size: 15.6px;
  font-weight: 300;
  color: var(--dust);
  line-height: 1.7;
}

.blog-read {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--saigon);
  text-decoration: none;
  transition: gap 0.3s;
}

.blog-read:hover { gap: 18px; }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
/* footer {
  background: var(--ink);
  padding: 80px 64px 36px;
} */
 .footer-logo-mark{
      max-width: 200px;
 }

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(248,238,216,0.08);
  margin-bottom: 36px;
}

.footer-logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40.8px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--cream);
  margin-bottom: 18px;
}

.footer-desc {
  font-size: 15.6px;
  font-weight: 300;
  color: rgba(248,238,216,0.4);
  line-height: 1.8;
  margin-bottom: 28px;
}

.footer-email-row {
  display: flex;
  border-bottom: 1px solid rgba(248,238,216,0.15);
  padding-bottom: 12px;
}

.footer-email-input {
  background: transparent;
  border: none;
  outline: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 14.4px;
  font-weight: 300;
  color: var(--cream);
  flex: 1;
  letter-spacing: 0.04em;
}

.footer-email-input::placeholder { color: rgba(248,238,216,0.25); }

.footer-sub-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay-light);
  transition: color 0.3s;
  padding: 0;
}

.footer-sub-btn:hover { color: var(--cream); }

.footer-col-head {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 24px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  font-size: 15.6px;
  font-weight: 300;
  color: rgba(248,238,216,0.4);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.3s;
}

.footer-links a:hover { color: var(--clay-light); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-copy {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: rgba(248,238,216,0.25);
}

.footer-soc {
  display: flex;
  gap: 20px;
}

.footer-soc a {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248,238,216,0.3);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-soc a:hover { color: var(--clay-light); }

/* ═══════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════ */
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes expandLine {
  from { opacity: 0; width: 0; }
  to   { opacity: 1; width: 64px; }
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes slowZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1.12); }
}

@keyframes scrollBob {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50%       { opacity: 1; transform: scaleY(1.3); }
}

/* ═══════════════════════════════════════════
   SECTION SWAP OVERRIDES
═══════════════════════════════════════════ */

/* Products moved to section 2 — cream/light bg */
section.products.products-light {
  background: var(--cream-light);
  position: relative;
  overflow: hidden;
}

section.products.products-light .products-topo g {
  stroke: rgba(122,31,31,0.07);
}

section.products.products-light .products-header .section-title {
  color: var(--saigon-deep);
}

section.products.products-light .products-header .section-eyebrow-text {
  color: var(--clay);
}

section.products.products-light .products-header .section-eyebrow-line {
  background: var(--clay);
}

section.products.products-light .view-all-link {
  color: var(--saigon);
  border-bottom-color: rgba(122,31,31,0.3);
}

/* About moved to section 3 — deep red bg like products */
section.about.about-dark {
  background: var(--saigon-deep);
  position: relative;
  overflow: hidden;
}

section.about.about-dark .section-title {
  color: var(--cream);
}

section.about.about-dark .section-title em {
  color: var(--clay-light);
}

section.about.about-dark .section-eyebrow-text {
  color: var(--clay-light);
}

section.about.about-dark .section-eyebrow-line {
  background: var(--clay-light);
}

section.about.about-dark .body-text {
  color: rgba(248,238,216,0.6);
}

section.about.about-dark .pillar {
  background: rgba(201,139,104,0.1);
  border-left-color: var(--clay-light);
}

section.about.about-dark .pillar:hover {
  background: rgba(201,139,104,0.18);
}

section.about.about-dark .pillar-name {
  color: var(--clay-light);
}

section.about.about-dark .pillar-desc {
  color: rgba(248,238,216,0.5);
}

section.about.about-dark .about-badge {
  border-color: var(--saigon-deep);
  background: var(--clay);
}

section.about.about-dark .about-topo {
  opacity: 0.06;
}

/* Topo pattern on dark about should be light */
section.about.about-dark .about-topo g {
  stroke: rgba(248,238,216,1);
}


/* Product cards on cream bg — add subtle frame */
section.products.products-light .prod-card {
  box-shadow: 0 8px 32px rgba(79,16,16,0.12);
}

section.products.products-light .prod-card img {
  filter: brightness(0.78) saturate(0.85);
}

section.products.products-light .prod-card:hover img {
  filter: brightness(0.52) saturate(0.6);
}


/* ═══════════════════════════════════════════
   HERO FONT SIZE LOCK — keep original sizes
═══════════════════════════════════════════ */
.hero .eyebrow-text       { font-size: 10px; }
/* .hero .hero-h1            { font-size: clamp(33px, 4.6vw, 70px); } */
.hero .hero-h1            { font-size: 44px; }
.hero .hero-sub           { font-size: 12px; }
.hero .btn-filled         { font-size: 6.6px; }
.hero .btn-text           { font-size: 6.6px; }
.hero .pill-label         { font-size: 5.25px; }
.hero .pill-name          { font-size: 16px; }
.hero .pill-price         { font-size: 7px; }
.hero .pill-link          { font-size: 6px; }
.hero .scroll-text        { font-size: 5.25px; }
nav .nav-links a          { font-size: 11px; }
nav.scrolled .nav-links a { font-size: 11px; }
.nav-cta                  { font-size: 11px; }
.ribbon-item              { font-size: 15px; }


/* ═══════════════════════════════════════════
   COMMUNITY SECTION
═══════════════════════════════════════════ */
.community {
  position: relative;
  background: var(--saigon-deep);
  padding: 130px 64px 0;
  overflow: hidden;
}

.community-topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.community-bg-word {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 200px;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.03);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  line-height: 1;
}

.community-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding-bottom: 100px;
}

.community-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(52px, 5.5vw, 80px);
  font-weight: 300;
  line-height: 1.0;
  color: var(--cream);
  margin: 16px 0 28px;
  letter-spacing: -0.01em;
}

.community-title em {
  font-style: italic;
  color: var(--clay-light);
}

.community-body {
  font-size: 16.8px;
  font-weight: 300;
  line-height: 1.9;
  color: rgba(248,238,216,0.58);
  max-width: 460px;
  margin-bottom: 48px;
}

/* Stats */
.community-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 48px;
  padding: 28px 0;
  border-top: 1px solid rgba(248,238,216,0.1);
  border-bottom: 1px solid rgba(248,238,216,0.1);
}

.comm-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comm-stat-divider {
  width: 1px;
  height: 48px;
  background: rgba(248,238,216,0.12);
  margin: 0 32px;
  flex-shrink: 0;
}

.comm-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 300;
  color: var(--clay-light);
  line-height: 1;
}

.comm-stat-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248,238,216,0.38);
}

/* Action buttons */
.community-actions {
  display: flex;
  align-items: center;
  gap: 28px;
}

.btn-community-primary {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--saigon-deep);
  background: var(--clay-light);
  padding: 17px 48px;
  text-decoration: none;
  border: 1px solid var(--clay-light);
  transition: all 0.35s;
}

.btn-community-primary:hover {
  background: var(--cream);
  border-color: var(--cream);
}

.btn-community-ghost {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(248,238,216,0.65);
  text-decoration: none;
  border-bottom: 1px solid rgba(248,238,216,0.22);
  padding-bottom: 3px;
  transition: all 0.3s;
}

.btn-community-ghost:hover {
  color: var(--cream);
  border-color: rgba(248,238,216,0.7);
}

/* Right image collage */
.community-right { position: relative; }

.comm-img-stack {
  position: relative;
  height: 580px;
}

.comm-img {
  position: absolute;
  overflow: hidden;
}

.comm-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
  filter: brightness(0.75) saturate(0.8);
}

.comm-img:hover img { transform: scale(1.05); filter: brightness(0.6); }

.comm-img-1 {
  top: 0; left: 0;
  width: 58%; height: 52%;
  z-index: 2;
}

.comm-img-2 {
  top: 0; right: 0;
  width: 38%; height: 35%;
  z-index: 2;
}

.comm-img-3 {
  bottom: 0; left: 12%;
  width: 75%; height: 44%;
  z-index: 2;
  outline: 5px solid var(--saigon-deep);
  outline-offset: -5px;
}

.comm-img-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 10px 14px;
  font-size: 10.8px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(248,238,216,0.8);
  background: linear-gradient(to top, rgba(79,16,16,0.85), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.comm-img:hover .comm-img-label { opacity: 1; }

/* Floating review card */
.comm-float-card {
  position: absolute;
  top: 44%; right: -24px;
  z-index: 10;
  background: var(--cream);
  padding: 20px 24px;
  width: 210px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.comm-float-stars {
  color: var(--clay);
  font-size: 13.2px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.comm-float-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16.8px;
  font-style: italic;
  color: var(--saigon-deep);
  line-height: 1.5;
  margin-bottom: 10px;
}

.comm-float-author {
  font-size: 10.8px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dust);
}

/* Email strip */
.community-email-strip {
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(248,238,216,0.08);
  padding: 36px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.comm-email-label {
  font-size: 13.2px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(248,238,216,0.5);
  white-space: nowrap;
}

.comm-email-form {
  display: flex;
  border-bottom: 1px solid rgba(248,238,216,0.2);
  padding-bottom: 10px;
  gap: 16px;
  flex: 1;
  max-width: 460px;
}

.comm-email-input {
  background: transparent;
  border: none;
  outline: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 14.4px;
  font-weight: 300;
  color: var(--cream);
  flex: 1;
  letter-spacing: 0.04em;
}

.comm-email-input::placeholder { color: rgba(248,238,216,0.25); }

.comm-email-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay-light);
  transition: color 0.3s;
  padding: 0;
  white-space: nowrap;
}

.comm-email-btn:hover { color: var(--cream); }

/* ═══════════════════════════════════════════
   INSTAGRAM FEED
═══════════════════════════════════════════ */
.insta-feed {
  padding: 130px 0 100px;
  background: var(--cream-light);
  overflow: hidden;
}

.insta-header {
  padding: 0 64px;
  margin-bottom: 56px;
  text-align: center;
}

.insta-sub {
  font-size: 16.8px;
  font-weight: 300;
  color: var(--dust);
  letter-spacing: 0.04em;
  margin-top: 16px;
  text-align: center;
}

.insta-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}

.insta-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
}

.insta-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.4s ease;
  filter: brightness(0.9) saturate(0.85);
}

.insta-item:hover img {
  transform: scale(1.08);
  filter: brightness(0.4) saturate(0.5);
}

.insta-hover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.4s;
  color: white;
}

.insta-item:hover .insta-hover { opacity: 1; }

.insta-hover span {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}

.insta-follow-btn {
  text-align: center;
  margin-top: 52px;
  padding: 0 64px;
}

.btn-insta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--saigon);
  text-decoration: none;
  border: 1px solid rgba(122,31,31,0.25);
  padding: 17px 44px;
  transition: all 0.35s;
}

.btn-insta:hover {
  background: var(--saigon);
  color: var(--cream);
  border-color: var(--saigon);
}


/* ═══════════════════════════════════════════
   PRODUCT FEATURE SECTION
═══════════════════════════════════════════ */
.product-feature {
  padding: 130px 64px 0;
  background: var(--cream-light);
  position: relative;
  overflow: hidden;
}

.pf-topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.pf-header {
  position: relative;
  z-index: 2;
  margin-bottom: 80px;
}

/* ── Stage layout ── */
.pf-stage {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: center;
  min-height: 600px;
}

/* ── Feature columns ── */
.pf-features-left,
.pf-features-right {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pf-feature {
  display: flex;
  align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid rgba(122,31,31,0.07);
  position: relative;
}

.pf-feature:first-child { border-top: 1px solid rgba(122,31,31,0.07); }

.pf-feat-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex: 1;
}

/* Left col content aligns right (towards bottle) */
.pf-feat-right {
  flex-direction: row-reverse;
  text-align: right;
  padding-right: 40px;
}

/* Right col content aligns left (towards bottle) */
.pf-feat-left {
  flex-direction: row;
  text-align: left;
  padding-left: 40px;
}

.pf-feat-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--clay);
  background: rgba(176,104,72,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  transition: background 0.3s, color 0.3s;
}

.pf-feature:hover .pf-feat-icon {
  background: var(--saigon);
  color: var(--cream);
}

.pf-feat-icon svg { width: 100%; height: 100%; }

.pf-feat-title {
  font-size: 13.2px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--saigon);
  margin-bottom: 8px;
  transition: color 0.3s;
}

.pf-feature:hover .pf-feat-title { color: var(--saigon-deep); }

.pf-feat-desc {
  font-size: 14.4px;
  font-weight: 300;
  color: var(--dust);
  line-height: 1.65;
}

/* Connector lines from feature to bottle */
.pf-feat-connector {
  height: 1px;
  width: 40px;
  background: linear-gradient(to right, rgba(176,104,72,0.3), rgba(176,104,72,0.05));
  flex-shrink: 0;
  position: relative;
}

.pf-conn-right {
  background: linear-gradient(to right, rgba(176,104,72,0.05), rgba(176,104,72,0.3));
}

.pf-conn-left {
  background: linear-gradient(to right, rgba(176,104,72,0.3), rgba(176,104,72,0.05));
}

/* ── Bottle centre ── */
.pf-bottle-wrap {
  position: relative;
  width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0 60px;
}

.pf-bottle-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176,104,72,0.12) 0%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 3s ease-in-out infinite;
}

/* Decorative rings */
.pf-bottle-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(122,31,31,0.07);
  pointer-events: none;
}

.pf-ring-1 { width: 260px; height: 260px; animation: ringRotate 20s linear infinite; }
.pf-ring-2 { width: 340px; height: 340px; border-style: dashed; border-color: rgba(176,104,72,0.08); animation: ringRotate 30s linear infinite reverse; }
.pf-ring-3 { width: 420px; height: 420px; animation: ringRotate 40s linear infinite; border-color: rgba(122,31,31,0.04); }

.pf-bottle-img {
  position: relative;
  z-index: 3;
  animation: bottleFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 24px 48px rgba(79,16,16,0.18));
}
.pf-bottle-img img{
   width: 380px;
   max-width: none;
}

.pf-jar-svg {
  width: 180px;
  height: auto;
}

/* Dot connectors on bottle */
.pf-dot {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--clay);
  border: 2px solid var(--cream-light);
  z-index: 4;
  box-shadow: 0 0 0 3px rgba(176,104,72,0.2);
}

.pf-dot-tl { top: 22%; left: 4%; }
.pf-dot-ml { top: 50%; left: 0%; transform: translateY(-50%); }
.pf-dot-bl { bottom: 24%; left: 4%; }
.pf-dot-tr { top: 22%; right: 4%; }
.pf-dot-mr { top: 50%; right: 0%; transform: translateY(-50%); }
.pf-dot-br { bottom: 24%; right: 4%; }

/* ── Bottom strip ── */
.pf-bottom-strip {
  position: relative;
  z-index: 2;
  margin-top: 80px;
  background: var(--saigon-deep);
  padding: 36px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pf-strip-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pf-strip-label {
  font-size: 10.8px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clay-light);
}

.pf-strip-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 31.2px;
  font-weight: 300;
  color: var(--cream);
  letter-spacing: 0.02em;
}

.pf-strip-btn {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--saigon-deep);
  background: var(--clay-light);
  padding: 17px 48px;
  text-decoration: none;
  border: 1px solid var(--clay-light);
  transition: all 0.35s;
}

.pf-strip-btn:hover {
  background: var(--cream);
  border-color: var(--cream);
}

/* ── Animations ── */
@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes ringRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes bottleFloat {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-12px); }
}


/* ── Instagram heading script font ── */
.insta-handle {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 300;
  color: var(--saigon-deep);
  letter-spacing: 0.02em;
  display: block;
}

.insta-script {
  font-family: 'Notera', cursive;
  font-size: 34px;
  font-weight: 400;
  color: var(--saigon);
  line-height: 1.1;
  display: block;
  letter-spacing: 0.01em;
}


/* ═══════════════════════════════════════════
   FOOTER — Brand Colour Redesign
═══════════════════════════════════════════ */
.site-footer {
  position: relative;
  background: var(--cream);
  overflow: hidden;
  border-top: 3px solid var(--saigon);
}

.footer-topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  width: 100%;
  height: 100%;
}

/* ── Body layout ── */
.footer-body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 80px;
  padding: 54px 64px 42px;
  align-items: start;
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}

/* ── Brand column ── */
.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.footer-logo-mark svg {
  height: 44px;
  width: auto;
}

.footer-tagline {
  font-size: 15.6px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--dust);
  max-width: 420px;
  margin: 0;
}

/* ── Subscribe ── */
.footer-subscribe {}

.footer-subscribe-label {
  font-size: 10.8px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--saigon);
  margin: 0 0 14px;
}

.footer-email-wrap {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--saigon);
  overflow: hidden;
  max-width: 420px;
}

.footer-email-in {
  background: transparent;
  border: none;
  outline: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 14.4px;
  font-weight: 300;
  color: var(--ink);
  padding: 14px 18px;
  flex: 1;
  letter-spacing: 0.03em;
}

.footer-email-in::placeholder { color: var(--dust); opacity: 0.6; }

.footer-email-btn {
  background: var(--saigon);
  border: none;
  outline: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  padding: 14px 24px;
  white-space: nowrap;
  transition: background 0.3s;
}

.footer-email-btn:hover { background: var(--saigon-deep); }

/* ── Socials ── */
.footer-socials {
  display: flex;
  gap: 14px;
  align-items: center;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(122,31,31,0.25);
  color: var(--saigon);
  text-decoration: none;
  transition: all 0.3s;
  border-radius: 0;
}

.footer-social-link svg {
  width: 16px;
  height: 16px;
}

.footer-social-link:hover {
  background: var(--saigon);
  color: var(--cream);
  border-color: var(--saigon);
}

/* ── Nav columns ── */
.footer-nav-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.footer-nav-col {}

.footer-col-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--saigon);
  margin: 0 0 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(122,31,31,0.15);
}

.footer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 0;
  margin: 0;
}

.footer-nav-list a {
  font-size: 15.6px;
  font-weight: 300;
  color: var(--dust);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.3s, padding-left 0.25s;
  display: block;
}

.footer-nav-list a:hover {
  color: var(--saigon);
  padding-left: 6px;
}

/* ── Divider ── */
.footer-divider {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 75%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(122,31,31,0.3) 20%,
    var(--clay) 50%,
    rgba(122,31,31,0.3) 80%,
    transparent 100%
  );
}

/* ── Bottom bar ── */
.footer-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 21px;
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.footer-copy {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--dust);
}

.footer-tagline-small {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15.6px;
  font-style: italic;
  font-weight: 300;
  color: var(--clay);
  letter-spacing: 0.04em;
}



/* ═══════════════════════════════════════════
   RESPONSIVE — TABLET (max 1024px)
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  nav { padding: 24px 32px; }
  nav.scrolled { padding: 16px 32px; }
  .nav-socials { display: none; }
  .hero { height: 85vh; }
  .hero-content { padding: 0 32px 80px; }
  .hero-pill { left: 32px; bottom: 60px; width: 190px; }
  .hero-scroll-cue { right: 32px; }
  .about { padding: 90px 40px; gap: 60px; }
  .about-visuals { height: 480px; }
  .about.about-dark { padding: 90px 40px; gap: 60px; }
  .products { padding: 90px 40px; }
  .products-header { flex-wrap: wrap; gap: 16px; }
  .product-feature { padding: 90px 40px 0; }
  .pf-feat-right { padding-right: 24px; }
  .pf-feat-left { padding-left: 24px; }
  .pf-bottle-wrap { width: 220px; }
  .pf-jar-svg { width: 150px; }
  .pf-bottom-strip { padding: 28px 40px; }
  .benefits { padding: 90px 40px; }
  .benefits-inner { gap: 60px; }
  .benefits-visual { height: 540px; }
  .testimonials { padding: 90px 40px; }
  .testi-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .community { padding: 90px 40px 0; }
  .community-inner { gap: 50px; }
  .comm-img-stack { height: 460px; }
  .comm-float-card { right: -10px; width: 180px; }
  .community-email-strip { padding: 28px 40px; }
  .insta-feed { padding: 90px 0 80px; }
  .insta-header { padding: 0 40px; }
  .insta-grid { grid-template-columns: repeat(4, 1fr); }
  .insta-follow-btn { padding: 0 40px; }
  .blog { padding: 90px 40px; }
  .blog-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .blog-card:first-child { grid-column: span 2; }
  .footer-body { padding: 52px 40px 40px; gap: 50px; max-width: 90%; }
  .footer-nav-cols { gap: 24px; }
  .footer-divider { margin: 0 auto; max-width: 90%; }
  .footer-bar { max-width: 90%; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — MOBILE (max 768px)
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  nav { padding: 18px 24px; }
  nav.scrolled { padding: 14px 24px; }
  .nav-links { display: none; }
  .nav-right { gap: 14px; }
  .nav-cta { padding: 10px 18px; font-size: 10px; letter-spacing: 0.15em; }

  .hero { height: 85vh; min-height: 500px; }
  .hero-content { padding: 0 24px 56px; }
  .hero .hero-h1 { font-size: clamp(26px, 8vw, 46px); }
  .hero .hero-sub { font-size: 9px; max-width: 90%; }
  .hero-actions { flex-direction: column; gap: 14px; align-items: center; }
  .hero-pill { display: none; }
  .hero-scroll-cue { display: none; }
  .hero-divider { margin-bottom: 16px; }

  .ribbon-item { font-size: 12px; padding: 0 18px; }

  .about { padding: 64px 24px; grid-template-columns: 1fr; gap: 40px; }
  .about-visuals { height: 300px; }
  .about-img-a { width: 78%; height: 68%; }
  .about-img-b { width: 52%; height: 44%; }
  .about-badge { width: 72px; height: 72px; }
  .about-badge-num { font-size: 18px; }
  .about-pillars { grid-template-columns: 1fr 1fr; gap: 12px; }
  .about.about-dark { padding: 64px 24px; grid-template-columns: 1fr; gap: 40px; }

  .products { padding: 64px 24px; }
  .products-grid { grid-template-columns: 1fr; }
  .prod-card { aspect-ratio: 4/3; }
  .products-header { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 40px; }

  .product-feature { padding: 64px 24px 0; }
  .pf-header { margin-bottom: 40px; }
  .pf-stage { grid-template-columns: 1fr; }
  .pf-features-left { order: 2; }
  .pf-bottle-wrap { order: 1; width: 100%; padding: 28px 0; }
  .pf-features-right { order: 3; }
  .pf-feat-content.pf-feat-right { flex-direction: row; text-align: left; padding-right: 0; }
  .pf-feat-content.pf-feat-left { padding-left: 0; }
  .pf-feat-connector { display: none; }
  .pf-dot { display: none; }
  .pf-ring-1 { width: 180px; height: 180px; }
  .pf-ring-2 { width: 240px; height: 240px; }
  .pf-ring-3 { width: 300px; height: 300px; }
  .pf-bottom-strip { flex-direction: column; gap: 18px; text-align: center; padding: 24px; }

  .benefits { padding: 64px 24px; }
  .benefits-inner { grid-template-columns: 1fr; gap: 40px; }
  .benefits-visual { height: 300px; }
  .bv-img-large { width: 100%; height: 70%; }
  .bv-img-small { display: none; }
  .bv-stat { right: 0; bottom: 0; }
  .benefits-grid { grid-template-columns: 1fr 1fr; gap: 14px; }

  .testimonials { padding: 64px 24px; }
  .testi-grid { grid-template-columns: 1fr; gap: 14px; }

  .community { padding: 64px 24px 0; }
  .community-inner { grid-template-columns: 1fr; gap: 40px; }
  .community-title { font-size: clamp(36px, 9vw, 56px); }
  .community-stats { flex-wrap: wrap; gap: 20px; }
  .comm-stat-divider { display: none; }
  .comm-stat{align-items:center;}
  .comm-img-stack { height: 280px; }
  .comm-img-1 { width: 58%; height: 52%; }
  .comm-img-2 { width: 38%; height: 36%; }
  .comm-img-3 { width: 78%; height: 44%; }
  .comm-float-card { display: none; }
  .community-actions { flex-direction: column; gap: 14px; }
  .community-email-strip { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; }
  .comm-email-form { max-width: 100%; }

  .insta-feed { padding: 64px 0 56px; }
  .insta-header { padding: 0 24px; margin-bottom: 32px; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .insta-script { font-size: clamp(40px, 10vw, 68px); }
  .insta-follow-btn { padding: 0 24px; margin-top: 32px; }

  .blog { padding: 64px 24px; }
  .blog-grid { grid-template-columns: 1fr; gap: 32px; }
  .blog-header { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 36px; }

  .site-footer { border-top-width: 2px; }
  .footer-body { grid-template-columns: 1fr; gap: 36px; padding: 44px 24px 32px; max-width: 100%; }
  .footer-nav-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-divider { margin: 0 24px; max-width: calc(100% - 48px); }
  .footer-bar { flex-direction: column; gap: 8px; text-align: center; padding: 14px 24px 18px; max-width: 100%; }
  .footer-email-wrap { max-width: 100%; }
  .footer-tagline { max-width: 100%; }
  .footer-logo-mark svg { height: 36px; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (max 480px)
═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero .hero-h1 { font-size: clamp(22px, 9vw, 38px); }
  .hero-content { padding: 0 18px 44px; }
  .prod-name { font-size: 30px; }
  .benefits-grid { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .community-stats { flex-direction: column; gap: 16px; }
  .footer-nav-cols { grid-template-columns: 1fr; gap: 20px; }
  .footer-body { padding: 36px 18px 28px; }
  .about-pillars { grid-template-columns: 1fr; }
  .section-title { font-size: clamp(36px, 9vw, 56px); }
  .testi-card { padding: 26px 20px; }
  .pf-jar-svg { width: 110px; }
  .products-grid { gap: 2px; }
}


/* ═══════════════════════════════════════════
   HAMBURGER BUTTON
═══════════════════════════════════════════ */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 300;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: white;
  transition: all 0.4s cubic-bezier(0.65,0,0.35,1);
  transform-origin: center;
}

nav.scrolled .hamburger span { background: var(--saigon); }

.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ═══════════════════════════════════════════
   MOBILE MENU OVERLAY
═══════════════════════════════════════════ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--saigon-deep);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px 40px 48px;
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.65,0,0.35,1);
  overflow: hidden;
}

/* Topo lines inside mobile menu */
.mobile-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 800' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='rgba(201,139,104,0.08)' stroke-width='1'%3E%3Cpath d='M0,100 Q200,140 400,100'/%3E%3Cpath d='M0,220 Q200,260 400,220'/%3E%3Cpath d='M0,360 Q200,400 400,360'/%3E%3Cpath d='M0,520 Q200,560 400,520'/%3E%3Cpath d='M0,680 Q200,720 400,680'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  pointer-events: none;
}

.mobile-menu.open { transform: translateX(0); }

.mobile-menu-close {
  position: absolute;
  top: 28px; right: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(248,238,216,0.6);
  padding: 8px;
  transition: color 0.3s;
  z-index: 10;
}

.mobile-menu-close:hover { color: var(--cream); }
.mobile-menu-close svg { width: 28px; height: 28px; }

.mobile-menu-logo{
    position: relative;
    z-index: 10;
    width: 172px;
    margin: -20px 0 0px 0px;
    display: block;
}

.mobile-menu-logo svg,
.mobile-menu-logo img{
  width:100%;
  height:auto;
  display:block;
}

.mobile-nav {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-nav-link {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 10vw, 60px);
  font-weight: 300;
  color: rgba(248,238,216,0.85);
  text-decoration: none;
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid rgba(248,238,216,0.08);
  padding: 18px 0;
  transition: color 0.3s, padding-left 0.3s;
  position: relative;
  overflow: hidden;
}

.mobile-nav-link::before {
  content: attr(data-num);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--clay-light);
  position: relative;
  top: -4px;
}

.mobile-nav-link:hover {
  color: var(--cream);
  padding-left: 12px;
}

.mobile-nav-link:hover::before { color: var(--clay-light); }

.mobile-menu-footer {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-cta {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--saigon-deep);
  background: var(--clay-light);
  padding: 14px 32px;
  text-decoration: none;
  transition: background 0.3s;
}

.mobile-cta:hover { background: var(--cream); }

.mobile-socials {
  display: flex;
  gap: 20px;
}

.mobile-socials a {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248,238,216,0.4);
  text-decoration: none;
  transition: color 0.3s;
}

.mobile-socials a:hover { color: var(--clay-light); }

/* Show hamburger on mobile */
@media (max-width: 768px) {
  .hamburger { display: flex; }
}

/* ═══════════════════════════════════════════
   PRODUCTS SLIDER
═══════════════════════════════════════════ */
.products-slider-wrap {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.products-slider {
  display: flex !important;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  cursor: grab;
  will-change: transform;
}

.products-slider:active { cursor: grabbing; }

/* Each card takes full width on mobile, 1/3 on desktop */
.products-slider .prod-card {
  flex: 0 0 calc(33.333% - 2px);
  min-width: calc(33.333% - 2px);
  aspect-ratio: 3/4;
}

/* Slider controls */
.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 32px;
}

.slider-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(248,238,216,0.25);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  flex-shrink: 0;
}

.slider-btn:hover {
  background: var(--clay);
  border-color: var(--clay);
}

.slider-btn svg { width: 18px; height: 18px; color: #4f1010}

.slider-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.slider-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(248,238,216,0.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s;
}

.slider-dot.active {
  background: var(--clay-light);
  width: 20px;
  border-radius: 3px;
}

/* Mobile: show 1 card at a time */
@media (max-width: 768px) {
  .products-slider .prod-card {
    flex: 0 0 85%;
    min-width: 85%;
    aspect-ratio: 3/4;
  }

  .products-grid.products-slider {
    gap: 12px;
    padding: 0 24px;
  }

  .slider-btn { border-color: rgba(248,238,216,0.2); }
}

@media (max-width: 480px) {
  .products-slider .prod-card {
    flex: 0 0 90%;
    min-width: 90%;
  }
}
/* ════════════════════════════════
   HERO — FULL BLEED
════════════════════════════════ */
.about-hero {
  position:relative;
  width:100%; height:85vh; min-height:560px;
  overflow:hidden;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
}
.about-hero-bg {
  position:absolute; inset:0; z-index:0;
}
.about-hero-bg img {
  width:100%; height:100%; object-fit:cover;
  object-position:center 60%;
  animation:slowZoom 16s ease-in-out infinite alternate;
}
.about-hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(5,1,1,0.1) 0%, rgba(5,1,1,0.55) 100%),
    linear-gradient(to bottom, rgba(10,2,2,0.48) 0%, rgba(10,2,2,0.0) 45%, rgba(10,2,2,0.68) 100%);
}

/* Location badge */
.hero-location-badge {
  position:absolute; bottom:90px; left:9%;
  z-index:5;
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.2);
  padding:10px 18px;
  opacity:0; animation:fadeIn 1s ease 1.6s forwards;
  color:rgba(255,255,255,0.85);
}
.hero-location-badge svg { flex-shrink:0; }
.hero-location-badge span {
  font-size:10px; font-weight:400;
  letter-spacing:0.25em; text-transform:uppercase;
  color:rgba(255,255,255,0.8);
}
.about-hero-content {
  position:relative; z-index:5;
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  padding:0 40px 90px;
  width:100%;
}
.about-hero-eyebrow {
  display:flex; align-items:center; gap:16px;
  margin-bottom:24px;
  opacity:0; animation:rise 1s ease 0.4s forwards;
}
.about-hero-eyebrow span.line { width:40px; height:1px; background:var(--clay-light); }
.about-hero-eyebrow span.text {
  font-size:10px; font-weight:400; letter-spacing:0.38em;
  text-transform:uppercase; color:var(--clay-light);
}
.about-hero-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(52px,7vw,96px);
  font-weight:300; line-height:0.95;
  color:#fff; letter-spacing:0.02em;
  margin-bottom:24px;
  opacity:0; animation:rise 1.1s ease 0.6s forwards;
  text-shadow:0 2px 40px rgba(0,0,0,0.3);
}
.about-hero-title em { font-style:italic; color:var(--clay-light); }
.about-hero-sub {
  font-size:13px; font-weight:300; line-height:1.85;
  color:rgba(255,255,255,0.68); letter-spacing:0.04em;
  max-width:520px; margin:0 auto;
  opacity:0; animation:rise 1s ease 0.9s forwards;
}
/* page indicator */
.hero-page-tag {
  position:absolute; bottom:90px; right:9%;
  z-index:5; display:flex; flex-direction:column; align-items:center; gap:12px;
  opacity:0; animation:fadeIn 1s ease 1.4s forwards;
}
.hero-page-tag-line { width:1px; height:52px; background:linear-gradient(to bottom, rgba(255,255,255,0.5), transparent); }
.hero-page-tag-text {
  font-size:9px; font-weight:400; letter-spacing:0.3em;
  text-transform:uppercase; color:rgba(255,255,255,0.45);
  writing-mode:vertical-lr; transform:rotate(180deg);
}

/* ════════════════════════════════
   S2 — SPLIT: STORY
════════════════════════════════ */
.story {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:100vh;
  position:relative; overflow:hidden;
}
.story .eyebrow{justify-content: left;}
.story-img-col {
  position:relative; overflow:hidden;
}
.story-img-col img {
  width:100%; height:100%; object-fit:cover;
  display:block;
  transition:transform 0.9s ease;
}
.story-img-col:hover img { transform:scale(1.03); }
.story-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to right, transparent 70%, var(--cream-light) 100%);
}
/* floating year badge */
.story-year {
  position:absolute; bottom:60px; left:48px;
  background:var(--saigon); padding:20px 28px;
}
.story-year-num {
  font-family:'Cormorant Garamond',serif; font-size:52px;
  font-weight:300; color:var(--clay-light); line-height:1; display:block;
}
.story-year-label {
  font-size:9px; font-weight:400; letter-spacing:0.25em;
  text-transform:uppercase; color:rgba(248,238,216,0.5);
  margin-top:4px; display:block;
}
.story-content {
  display:flex; flex-direction:column; justify-content:center;
  padding:100px 80px 100px 72px;
  background:var(--cream-light);
  position:relative;
}
/* large watermark letter */
.story-content::before {
  content:'U';
  position:absolute; top:-40px; right:-20px;
  font-family:'Cormorant Garamond',serif;
  font-size:360px; font-weight:300;
  color:rgba(122,31,31,0.04);
  pointer-events:none; line-height:1;
  z-index:0;
}
.story-content > * { position:relative; z-index:1; }
.story-content .eyebrow { margin-bottom:20px; }
.story-content .section-title { margin-bottom:32px; }
.story-lead {
  font-family:'Cormorant Garamond',serif;
  font-size:22px; font-weight:400; font-style:italic;
  color:var(--saigon); line-height:1.6;
  border-left:2px solid var(--clay);
  padding-left:24px; margin-bottom:32px;
}
.story-body { font-size:15px; font-weight:300; line-height:1.9; color:var(--dust); margin-bottom:16px; }
.story-signature {
  margin-top:40px;
  display:flex; align-items:center; gap:20px;
}
.story-sig-line { width:48px; height:1px; background:var(--clay); }
.story-sig-text {
  font-family:'Great Vibes',cursive !important; font-size:14px; color:var(--saigon);
}

/* ════════════════════════════════
   S3 — VALUES (dark red)
════════════════════════════════ */
.values {
  background:var(--saigon-deep);
  padding:120px 9%;
  position:relative; overflow:hidden;
}
.values .eyebrow{
  justify-content: left;
}
.values-topo {
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:0.06;
}
.values-header {
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:end;
  margin-bottom:80px; position:relative; z-index:2;
}
.values-header .section-title { color:var(--cream); }
.values-header .section-title em { color:var(--clay-light); }
.values-header .eyebrow-line { background:var(--clay-light); }
.values-header .eyebrow-text { color:var(--clay-light); }
.values-header-body {
  font-size:15px; font-weight:300; line-height:1.9;
  color:rgba(248,238,216,0.55); align-self:end;
}
.values-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2px; position:relative; z-index:2;
}
.value-card {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(248,238,216,0.06);
  padding:40px 32px 36px;
  position:relative; overflow:hidden;
  transition:background 0.4s, transform 0.4s;
  cursor:default;
}
.value-card:hover {
  background:rgba(255,255,255,0.07);
  transform:translateY(-6px);
}
.value-num {
  font-family:'Cormorant Garamond',serif;
  font-size:72px; font-weight:300;
  color:rgba(201,139,104,0.15); line-height:1;
  position:absolute; top:16px; right:16px;
  transition:color 0.4s;
}
.value-card:hover .value-num { color:rgba(201,139,104,0.35); }
.value-icon {
  width:40px; height:40px; color:var(--clay);
  margin-bottom:24px;
}
.value-icon svg { width:100%; height:100%; stroke:currentColor; }
.value-title {
  font-size:12px; font-weight:500; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--clay-light);
  margin-bottom:14px;
}
.value-desc {
  font-size:14px; font-weight:300; line-height:1.75;
  color:rgba(248,238,216,0.5);
}

/* ════════════════════════════════
   JOURNEY SECTION
════════════════════════════════ */

.journey{
  position:relative;
  height:500vh; /* IMPORTANT */
  background:var(--cream-light);
}

/* STICKY SCREEN */
.journey-inner{
  position:sticky;
  top:0;

  width:100%;
  height:100vh;

  overflow:hidden;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

/* HEADER */
.journey-header{
  position:relative;
  z-index:20;

  text-align:center;

  padding-top:70px;
  margin-bottom:20px;
}

.journey-header .section-title{
  line-height:.92;
}

/* TIMELINE */
.timeline{
  position:relative;

  width:100%;
  height:calc(100vh - 220px);

  display:flex;
  align-items:center;
  justify-content:center;

  perspective:2200px;
}

/* CENTER LINE */
.timeline::before{
  content:'';

  position:absolute;

  left:50%;
  top:5%;
  bottom:5%;

  width:1px;

  background:linear-gradient(
    to bottom,
    rgba(176,104,72,0),
    rgba(176,104,72,.5),
    rgba(176,104,72,0)
  );

  transform:translateX(-50%);
}

/* ITEMS */
.timeline-item{
  position:absolute;

  width:100%;
  max-width:1450px;

  left:50%;
  top:50%;

  display:grid;
  grid-template-columns:1fr 90px 1fr;

  align-items:center;

  opacity:0;

  transition:
    transform .9s cubic-bezier(.22,1,.36,1),
    opacity .9s ease;

  will-change:transform,opacity;
}

/* ACTIVE ITEM */
.timeline-item.active{
  opacity:1;
  z-index:5;

  transform:
    translate(-50%, -50%)
    translateY(0)
    translateZ(0)
    rotateX(0deg)
    scale(1);
}

/* PREVIOUS */
.timeline-item.prev{
  opacity:.08;

  transform:
    translate(-50%, -50%)
    translateY(-260px)
    translateZ(-400px)
    rotateX(55deg)
    scale(.72);
}

/* NEXT */
.timeline-item.next{
  opacity:.08;

  transform:
    translate(-50%, -50%)
    translateY(260px)
    translateZ(-400px)
    rotateX(-55deg)
    scale(.72);
}

/* LEFT SIDE */
.timeline-item:nth-child(odd) .t-content{
  grid-column:1;

  text-align:right;

  padding-right:90px;

  margin-left:auto;
}

/* RIGHT SIDE */
.timeline-item:nth-child(even) .t-content{
  grid-column:3;

  text-align:left;

  padding-left:90px;

  margin-right:auto;
}

.timeline-item:nth-child(odd) .t-dot-col{
  grid-column:2;
}

.timeline-item:nth-child(even) .t-dot-col{
  grid-column:2;
}

.timeline-item:nth-child(odd) .t-empty{
  grid-column:3;
}

.timeline-item:nth-child(even) .t-empty{
  grid-column:1;
}

/* CONTENT */
.t-content{
  max-width:520px;
}

/* DOT */
.t-dot-col{
  display:flex;
  justify-content:center;
  align-items:center;
}

.t-dot{
  width:18px;
  height:18px;

  border-radius:50%;

  background:var(--saigon);

  border:4px solid var(--cream-light);

  box-shadow:
    0 0 0 16px rgba(122,31,31,.08),
    0 0 40px rgba(122,31,31,.15);
}

/* TYPOGRAPHY */
.t-year{
  display:block;

  margin-bottom:16px;

  font-family:'Cormorant Garamond',serif;
      font-size: 28px;
    font-weight: 700; 
  letter-spacing:.32em;
  text-transform:uppercase;

  color:var(--clay);
}

.t-title{
  font-family:'Cormorant Garamond',serif;

  font-size:38px;
  line-height:1;

  color:var(--saigon-deep);

  margin-bottom:24px;
}

.t-desc{
  font-size:18px;
  line-height:2;

  color:var(--dust);

  font-weight:300;
}
/* ════════════════════════════════
   S5 — CRAFT SPLIT
════════════════════════════════ */
.craft {
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--mist);
  position:relative; overflow:hidden;
}
.craft-content {
  padding:100px 72px 100px 9%;
  display:flex; flex-direction:column; justify-content:center;
}
.craft-content .section-title { margin-bottom:28px; }
.craft-content .body-text { margin-bottom:16px; max-width:480px; }
.craft-numbers {
  display:grid; grid-template-columns:1fr 1fr;
  gap:24px; margin-top:48px;
}
.craft-num-card {
  padding:24px 20px;
  border-top:2px solid var(--saigon);
  background:var(--cream-light);
  transition:transform 0.3s;
}
.craft-num-card:hover { transform:translateY(-4px); }
.craft-num-val {
  font-family:'Cormorant Garamond',serif;
  font-size:48px; font-weight:300; color:var(--saigon);
  line-height:1; display:block;
}
.craft-num-label {
  font-size:10px; font-weight:400; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--dust);
  margin-top:6px; display:block;
}
.craft-img-col {
  position:relative; overflow:hidden; min-height:600px;
}
.craft-img-col img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:brightness(0.85) saturate(0.9);
  transition:transform 0.9s ease;
}
.craft-img-col:hover img { transform:scale(1.04); }
.craft-img-caption {
  position:absolute; bottom:40px; left:40px;
  background:rgba(248,238,216,0.92);
  backdrop-filter:blur(12px);
  padding:16px 24px;
  border-left:2px solid var(--saigon);
}
.craft-img-caption-text {
  font-family:'Cormorant Garamond',serif;
  font-size:16px; font-style:italic; font-weight:400;
  color:var(--saigon-deep);
}

/* ════════════════════════════════
   S6 — CTA BAND
════════════════════════════════ */
.about-cta {
  background:var(--saigon-deep);
  padding:100px 9%;
  text-align:center;
  position:relative; overflow:hidden;
}
.about-cta::before {
  content:'';
  position:absolute; top:-120px; left:50%;
  transform:translateX(-50%);
  width:500px; height:500px; border-radius:50%;
  border:1px solid rgba(201,139,104,0.1);
}
.about-cta::after {
  content:'';
  position:absolute; bottom:-80px; left:50%;
  transform:translateX(-50%);
  width:300px; height:300px; border-radius:50%;
  border:1px solid rgba(201,139,104,0.08);
}
.about-cta-eyebrow {
  display:flex; align-items:center; gap:14px;
  justify-content:center; margin-bottom:20px;
}
.about-cta-eyebrow span.line { width:32px; height:1px; background:var(--clay-light); }
.about-cta-eyebrow span.text {
  font-size:10px; font-weight:400; letter-spacing:0.35em;
  text-transform:uppercase; color:var(--clay-light);
}
.about-cta-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(44px,5.5vw,72px); font-weight:300;
  line-height:1.05; color:var(--cream);
  margin-bottom:24px; position:relative; z-index:2;
}
.about-cta-title em { font-style:italic; color:var(--clay-light); }
.about-cta-body {
  font-size:15px; font-weight:300; line-height:1.85;
  color:rgba(248,238,216,0.58); max-width:520px;
  margin:0 auto 48px; position:relative; z-index:2;
}
.about-cta-actions {
  display:flex; align-items:center; gap:24px;
  justify-content:center; position:relative; z-index:2;
}
.btn-cream {
  font-size:11px; font-weight:400; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--saigon-deep);
  background:var(--cream); padding:16px 48px;
  text-decoration:none; border:1px solid var(--cream);
  transition:all 0.35s;
}
.btn-cream:hover { background:var(--clay-light); border-color:var(--clay-light); }
.btn-outline-cream {
  font-size:11px; font-weight:400; letter-spacing:0.22em;
  text-transform:uppercase; color:rgba(248,238,216,0.7);
  text-decoration:none;
  border-bottom:1px solid rgba(248,238,216,0.3); padding-bottom:3px;
  transition:all 0.3s;
}
.btn-outline-cream:hover { color:var(--cream); border-color:var(--cream); }



/* ════════════════════════════════
   FOOTER (reuse brand footer style)
════════════════════════════════ */
/* .site-footer {
  position:relative; background:var(--cream); overflow:hidden;
  border-top:3px solid var(--saigon);
}
.footer-body {
  display:grid; grid-template-columns:1.6fr 1fr;
  gap:80px; padding:54px 64px 42px;
  align-items:start; max-width:75%; margin:0 auto;
}
.footer-brand-col { display:flex; flex-direction:column; gap:28px; }
.footer-logo-mark svg { height:44px; width:auto; }
.footer-tagline { font-size:14px; font-weight:300; line-height:1.85; color:var(--dust); max-width:420px; }
.footer-subscribe-label { font-size:10px; font-weight:400; letter-spacing:0.25em; text-transform:uppercase; color:var(--saigon); margin:0 0 14px; }
.footer-email-wrap { display:flex; align-items:stretch; border:1.5px solid var(--saigon); max-width:420px; }
.footer-email-in { background:transparent; border:none; outline:none; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:300; color:var(--ink); padding:13px 16px; flex:1; }
.footer-email-in::placeholder { color:var(--dust); opacity:0.6; }
.footer-email-btn { background:var(--saigon); border:none; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:11px; font-weight:400; letter-spacing:0.2em; text-transform:uppercase; color:var(--cream); padding:13px 22px; white-space:nowrap; transition:background 0.3s; }
.footer-email-btn:hover { background:var(--saigon-deep); }
.footer-socials { display:flex; gap:12px; }
.footer-social-link { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1.5px solid rgba(122,31,31,0.25); color:var(--saigon); text-decoration:none; transition:all 0.3s; }
.footer-social-link svg { width:15px; height:15px; }
.footer-social-link:hover { background:var(--saigon); color:var(--cream); border-color:var(--saigon); }
.footer-nav-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.footer-col-title { font-size:11px; font-weight:500; letter-spacing:0.25em; text-transform:uppercase; color:var(--saigon); margin:0 0 22px; padding-bottom:10px; border-bottom:1px solid rgba(122,31,31,0.15); }
.footer-nav-list { list-style:none; display:flex; flex-direction:column; gap:11px; }
.footer-nav-list a { font-size:14px; font-weight:300; color:var(--dust); text-decoration:none; transition:color 0.3s, padding-left 0.25s; display:block; }
.footer-nav-list a:hover { color:var(--saigon); padding-left:6px; }
.footer-divider { margin:0 auto; max-width:75%; height:1px; background:linear-gradient(to right, transparent 0%, rgba(122,31,31,0.3) 20%, var(--clay) 50%, rgba(122,31,31,0.3) 80%, transparent 100%); }
.footer-bar { display:flex; align-items:center; justify-content:space-between; padding:16px 0 21px; max-width:75%; margin:0 auto; }
.footer-copy { font-size:11px; font-weight:300; letter-spacing:0.12em; color:var(--dust); }
.footer-tagline-small { font-family:'Cormorant Garamond',serif; font-size:14px; font-style:italic; font-weight:300; color:var(--clay); letter-spacing:0.04em; }

/* ── ANIMATIONS ── */
/* @keyframes rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slowZoom { from { transform:scale(1.04); } to { transform:scale(1.1); } } */ */

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
/* ══════════════════════════════
   RESPONSIVE — TABLET (≤1024px)
══════════════════════════════ */
@media (max-width:1024px) {
  nav { padding:22px 5%; }
  nav.scrolled { padding:14px 5%; }
  .nav-socials { display:none; }

  .about-hero { height:80vh; }

  .story { grid-template-columns:1fr 1fr; }
  .story-content { padding:70px 44px; }

  .values { padding:90px 5%; }
  .values-grid { grid-template-columns:1fr 1fr; gap:2px; }

  .journey { padding:90px 5%; }

  .craft { grid-template-columns:1fr 1fr; }
  .craft-content { padding:70px 44px 70px 5%; }

  .about-cta { padding:90px 5%; }

  .footer-body { max-width:90%; gap:44px; }
  .footer-divider, .footer-bar { max-width:90%; }
}

/* ══════════════════════════════
   RESPONSIVE — MOBILE (≤768px)
══════════════════════════════ */
@media (max-width:768px) {

  /* Nav */
  nav { padding:16px 20px; }
  nav.scrolled { padding:13px 20px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .nav-cta { padding:10px 18px; font-size:10px; letter-spacing:0.15em; }

  /* Hero */
  .about-hero { height:80vh; min-height:460px; }
  .about-hero-content { padding:0 24px 64px; }
  .about-hero-title { font-size:clamp(38px,10vw,64px); line-height:1; }
  .about-hero-sub { font-size:12px; max-width:90%; }
  .about-hero-eyebrow { margin-bottom:18px; }
  .hero-page-tag { display:none; }
  .hero-location-badge { left:64px; bottom:20px; padding:8px 14px; }
  .hero-location-badge span { font-size:9px; }

  /* Story split → stack */
  .story { grid-template-columns:1fr; }
  .story-img-col { height:52vw; min-height:260px; }
  .story-img-overlay { display:none; }
  .story-content {
    padding:48px 24px 52px;
    order:1;
  }
  .story-content::before { display:none; }
  .story-year { bottom:20px; left:20px; padding:14px 20px; }
  .story-year-num { font-size:38px; }
  .story-lead { font-size:17px; padding-left:16px; margin-bottom:20px; }
  .story-body { font-size:14px; }
  .story-signature { margin-top:28px; }
  .story-sig-text { font-size:14px; }

  /* Values */
  .values { padding:64px 20px; }
  .values-header { grid-template-columns:1fr; gap:18px; margin-bottom:48px; }
  .values-header .section-title { font-size:clamp(38px,9vw,56px); }
  .values-header-body { font-size:14px; }
  .values-grid { grid-template-columns:1fr 1fr; gap:2px; }
  .value-card { padding:28px 22px 24px; }
  .value-num { font-size:52px; }
  .value-title { font-size:11px; margin-bottom:10px; }
  .value-desc { font-size:13px; }
  .value-icon { width:32px; height:32px; margin-bottom:16px; }

  /* Journey / Timeline */
  .journey { padding:64px 20px; }
  .journey-header { margin-bottom:48px; }
  .journey-header .section-title { font-size:clamp(38px,9vw,56px); }
  /* Left-align all timeline items */
  .timeline::before { left:20px; top:0; bottom:0; }
  .timeline-item {
    grid-template-columns:44px 1fr;
    padding:32px 0;
  }
  .timeline-item:nth-child(odd) .t-content,
  .timeline-item:nth-child(even) .t-content {
    grid-column:2;
    text-align:left;
    padding:0 0 0 20px;
  }
  .timeline-item:nth-child(odd) .t-dot-col,
  .timeline-item:nth-child(even) .t-dot-col { grid-column:1; }
  .timeline-item:nth-child(odd) .t-empty,
  .timeline-item:nth-child(even) .t-empty { display:none; }
  .t-year { font-size:10px; }
  .t-title { font-size:22px; margin-bottom:8px; }
  .t-desc { font-size:13px; }

  /* Craft split → stack */
  .craft { grid-template-columns:1fr; }
  .craft-img-col { height:56vw; min-height:260px; order:-1; }
  .craft-img-caption { bottom:20px; left:20px; padding:12px 18px; }
  .craft-img-caption-text { font-size:13px; }
  .craft-content { padding:48px 24px 52px; order:1; }
  .craft-content .section-title { font-size:clamp(38px,9vw,56px); }
  .craft-numbers { grid-template-columns:1fr 1fr; gap:16px; margin-top:32px; }
  .craft-num-val { font-size:38px; }
  .craft-num-label { font-size:9px; }

  /* CTA */
  .about-cta { padding:64px 20px; }
  .about-cta-title { font-size:clamp(36px,9vw,56px); }
  .about-cta-body { font-size:14px; }
  .about-cta-actions { flex-direction:column; gap:14px; align-items:center; }
  .btn-cream { width:100%; max-width:300px; text-align:center; }
  .btn-outline-cream { text-align:center; }

  /* Footer */
  .footer-body {
    grid-template-columns:1fr;
    max-width:100%;
    gap:28px;
    padding:40px 20px 28px;
  }
  .footer-nav-cols { grid-template-columns:1fr 1fr; gap:20px; }
  .footer-divider { margin:0 20px; max-width:calc(100% - 40px); }
  .footer-bar {
    flex-direction:column;
    gap:6px;
    text-align:center;
    max-width:100%;
    padding:12px 20px 16px;
  }
  .footer-tagline { max-width:100%; }
  .footer-email-wrap { max-width:100%; }
  .footer-logo-mark svg { height:36px; }
}

/* ══════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤480px)
══════════════════════════════ */
@media (max-width:480px) {
  .about-hero { height:85vh; min-height:400px; }
  .about-hero-title { font-size:clamp(32px,11vw,52px); }
  .about-hero-sub { font-size:11px; }

  .values-grid { grid-template-columns:1fr; }
  .value-card { padding:24px 20px; }

  .craft-numbers { grid-template-columns:1fr 1fr; gap:12px; }
  .craft-num-val { font-size:34px; }

  .timeline::before { left:16px; }
  .timeline-item { grid-template-columns:36px 1fr; }
  .t-title { font-size:20px; }

  .story-year { padding:12px 16px; }
  .story-year-num { font-size:32px; }

  .footer-nav-cols { grid-template-columns:1fr; gap:18px; }
  .footer-col-title { margin-bottom:14px; }

  .about-cta-title { font-size:clamp(30px,11vw,48px); }
}

/* ══════════════════════════════
   RESPONSIVE — EXTRA SMALL (≤360px)
══════════════════════════════ */
@media (max-width:360px) {
  .about-hero-title { font-size:clamp(28px,12vw,44px); }
  .values-grid { grid-template-columns:1fr; }
  .craft-numbers { grid-template-columns:1fr; }
  .nav-cta { display:none; }
}

/* terms page */
/* ── HERO BANNER ── */
.tc-hero {
  padding:140px 9% 72px;
  background:var(--saigon-deep);
  position:relative; overflow:hidden;
  border-bottom:3px solid var(--clay);
}
.tc-hero::before {
  content:'';
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 400' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='rgba(201,139,104,0.08)' stroke-width='1'%3E%3Cpath d='M0,80 Q360,120 720,80 Q1080,40 1440,80'/%3E%3Cpath d='M0,180 Q360,220 720,180 Q1080,140 1440,180'/%3E%3Cpath d='M0,290 Q360,330 720,290 Q1080,250 1440,290'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.tc-hero-eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.tc-hero-eyebrow span.line { width:28px; height:1px; background:var(--clay-light); }
.tc-hero-eyebrow span.txt { font-size:10px; font-weight:400; letter-spacing:0.35em; text-transform:uppercase; color:var(--clay-light); }
.tc-hero h1 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(52px,6vw,80px);
  font-weight:300; line-height:1;
  color:var(--cream); letter-spacing:-0.01em;
  margin-bottom:20px; position:relative; z-index:2;
}
.tc-hero h1 em { font-style:italic; color:var(--clay-light); }
.tc-hero-meta { display:flex; align-items:center; gap:28px; position:relative; z-index:2; }
.tc-hero-date {
  font-size:12px; font-weight:300; letter-spacing:0.12em;
  color:rgba(248,238,216,0.5);
}
.tc-hero-date strong { color:var(--clay-light); font-weight:400; }
.tc-hero-intro {
  font-size:14px; font-weight:300; line-height:1.85;
  color:rgba(248,238,216,0.55); max-width:600px;
  margin-top:20px; position:relative; z-index:2;
}




/* ── MAIN BODY ── */
.tc-body {
  display:grid;
  grid-template-columns:260px 1fr;
  gap:0;
  padding:0 9%;
  max-width:1300px;
  margin:0 auto;
  align-items:start;
}

/* ── SIDEBAR ── */
.tc-sidebar {
  position:sticky;
  top:80px;
  padding:52px 32px 52px 0;
  border-right:1px solid rgba(122,31,31,0.08);
}
.tc-sidebar-label {
  font-size:9px; font-weight:500; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--clay);
  margin-bottom:20px; display:block;
}
.tc-nav-list { list-style:none; display:flex; flex-direction:column; gap:2px; }
.tc-nav-item a {
  display:flex; align-items:center; gap:10px;
  font-size:12px; font-weight:300; letter-spacing:0.03em;
  color:var(--dust); text-decoration:none;
  padding:9px 14px; border-radius:3px;
  transition:all 0.25s; line-height:1.4;
  border-left:2px solid transparent;
}
.tc-nav-item a:hover { color:var(--saigon); background:rgba(122,31,31,0.04); border-left-color:rgba(122,31,31,0.2); }
.tc-nav-item a.active { color:var(--saigon); background:rgba(122,31,31,0.06); border-left-color:var(--saigon); font-weight:400; }
.tc-nav-num { font-size:10px; color:var(--clay); min-width:16px; opacity:0.7; }

/* ── CONTENT ── */
.tc-content { padding:52px 0 52px 52px; }

.tc-section {
  padding-bottom:56px;
  border-bottom:1px solid rgba(122,31,31,0.07);
  margin-bottom:56px;
}
.tc-section:last-of-type { border-bottom:none; margin-bottom:0; padding-bottom:0; }

.tc-section-eyebrow {
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.tc-section-num {
  font-size:10px; font-weight:400; letter-spacing:0.25em;
  text-transform:uppercase; color:var(--clay);
}
.tc-section-line { flex:1; height:1px; background:rgba(122,31,31,0.1); }

.tc-section h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(28px,3vw,38px); font-weight:300;
  color:var(--saigon-deep); margin-bottom:20px; line-height:1.1;
}
.tc-section h2 em { font-style:italic; color:var(--saigon); }

.tc-section p {
  font-size:14px; font-weight:300; line-height:1.95;
  color:var(--dust); margin-bottom:16px;
}
.tc-section p:last-child { margin-bottom:0; }

.tc-section ul {
  list-style:none; display:flex; flex-direction:column;
  gap:10px; margin:16px 0;
}
.tc-section ul li {
  font-size:14px; font-weight:300; line-height:1.75;
  color:var(--dust); padding-left:20px; position:relative;
}
.tc-section ul li::before {
  content:''; position:absolute; left:0; top:10px;
  width:5px; height:1px; background:var(--clay);
}

.tc-highlight {
  background:rgba(176,104,72,0.07);
  border-left:2px solid var(--clay);
  padding:16px 20px; margin:20px 0;
  border-radius:0 3px 3px 0;
}
.tc-highlight p { font-size:13px; color:var(--dust); margin:0; line-height:1.75; }
.tc-highlight strong { color:var(--saigon); font-weight:400; }

.tc-section a { color:var(--saigon); text-decoration:underline; text-decoration-color:rgba(122,31,31,0.3); transition:text-decoration-color 0.3s; }
.tc-section a:hover { text-decoration-color:var(--saigon); }

/* ── CONTACT CTA ── */
.tc-cta {
  background:var(--saigon-deep);
  padding:72px 9%;
  display:flex; align-items:center; justify-content:space-between;
  gap:40px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.tc-cta::before {
  content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='rgba(201,139,104,0.08)' stroke-width='1'%3E%3Cpath d='M0,60 Q360,100 720,60 Q1080,20 1440,60'/%3E%3Cpath d='M0,140 Q360,180 720,140 Q1080,100 1440,140'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.tc-cta-content { position:relative; z-index:2; }
.tc-cta-eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.tc-cta-eyebrow span.line { width:24px; height:1px; background:var(--clay-light); }
.tc-cta-eyebrow span.txt { font-size:9px; font-weight:400; letter-spacing:0.32em; text-transform:uppercase; color:var(--clay-light); }
.tc-cta-title { font-family:'Cormorant Garamond',serif; font-size:clamp(32px,4vw,48px); font-weight:300; color:var(--cream); line-height:1.05; margin-bottom:10px; }
.tc-cta-title em { font-style:italic; color:var(--clay-light); }
.tc-cta-sub { font-size:13px; font-weight:300; color:rgba(248,238,216,0.55); }
.tc-cta-actions { display:flex; gap:14px; align-items:center; position:relative; z-index:2; flex-wrap:wrap; }
.btn-cta-primary { font-size:11px; font-weight:400; letter-spacing:0.22em; text-transform:uppercase; color:var(--saigon-deep); background:var(--clay-light); padding:14px 36px; text-decoration:none; border:1px solid var(--clay-light); transition:all 0.3s; }
.btn-cta-primary:hover { background:var(--cream); border-color:var(--cream); }
.btn-cta-ghost { font-size:11px; font-weight:400; letter-spacing:0.22em; text-transform:uppercase; color:rgba(248,238,216,0.7); text-decoration:none; border-bottom:1px solid rgba(248,238,216,0.25); padding-bottom:2px; transition:all 0.3s; }
.btn-cta-ghost:hover { color:var(--cream); border-color:rgba(248,238,216,0.7); }

/* ── FOOTER ── */
.site-footer { position:relative; background:var(--cream); overflow:hidden; border-top:3px solid var(--saigon); }
.footer-body { display:grid; grid-template-columns:1.6fr 1fr; gap:80px; padding:54px 64px 42px; align-items:start; max-width:100%; margin:0 200px 0 0; }
.footer-brand-col { display:flex; flex-direction:column; gap:24px; }
.footer-logo-mark svg { height:40px; width:auto; }
.footer-tagline-p { font-size:13px; font-weight:300; line-height:1.85; color:var(--dust); max-width:400px; }
.footer-subscribe-label { font-size:9px; font-weight:400; letter-spacing:0.25em; text-transform:uppercase; color:var(--saigon); margin:0 0 12px; }
.footer-email-wrap { display:flex; align-items:stretch; border:1.5px solid var(--saigon); max-width:400px; }
.footer-email-in { background:transparent; border:none; outline:none; font-family:'DM Sans',sans-serif; font-size:12px; color:var(--ink); padding:12px 14px; flex:1; }
.footer-email-in::placeholder { color:var(--dust); opacity:0.6; }
.footer-email-btn { background:var(--saigon); border:none; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:10px; font-weight:400; letter-spacing:0.2em; text-transform:uppercase; color:var(--cream); padding:12px 20px; white-space:nowrap; transition:background 0.3s; }
.footer-email-btn:hover { background:var(--saigon-deep); }
.footer-socials { display:flex; gap:10px; }
.footer-social-link { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1.5px solid rgba(122,31,31,0.22); color:var(--saigon); text-decoration:none; transition:all 0.3s; }
.footer-social-link svg { width:14px; height:14px; }
.footer-social-link:hover { background:var(--saigon); color:var(--cream); border-color:var(--saigon); }
.footer-nav-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.footer-col-title { font-size:10px; font-weight:500; letter-spacing:0.25em; text-transform:uppercase; color:var(--saigon); margin:0 0 20px; padding-bottom:8px; border-bottom:1px solid rgba(122,31,31,0.14); }
.footer-nav-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-nav-list a { font-size:13px; font-weight:300; color:var(--dust); text-decoration:none; transition:color 0.3s,padding-left 0.25s; display:block; }
.footer-nav-list a:hover { color:var(--saigon); padding-left:5px; }
.footer-divider { margin:0 auto; max-width:75%; height:1px; background:linear-gradient(to right,transparent,rgba(122,31,31,0.3) 20%,var(--clay) 50%,rgba(122,31,31,0.3) 80%,transparent); }
.footer-bar { display:flex; align-items:center; justify-content:space-between; padding:14px 0 20px; max-width:75%; margin:0 auto; }
.footer-copy { font-size:10px; font-weight:300; letter-spacing:0.12em; color:var(--dust); }
.footer-tagline-s { font-family:'Cormorant Garamond',serif; font-size:13px; font-style:italic; color:var(--clay); }

/* ── MOBILE TOC TOGGLE ── */
.tc-toc-toggle {
  display:none;
  width:100%; padding:14px 20px;
  background:var(--cream-light);
  border:none; border-bottom:1px solid rgba(122,31,31,0.1);
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  font-size:12px; font-weight:400; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--saigon);
  align-items:center; justify-content:space-between;
  position:sticky; top:62px; z-index:50;
}
.tc-toc-toggle svg { width:16px; height:16px; transition:transform 0.3s; }
.tc-toc-toggle.open svg { transform:rotate(180deg); }

.tc-mobile-toc {
  display:none;
  background:var(--cream-light);
  border-bottom:1px solid rgba(122,31,31,0.1);
  padding:12px 20px 16px;
}
.tc-mobile-toc.open { display:block; }
.tc-mobile-toc-list { list-style:none; display:flex; flex-direction:column; gap:2px; }
.tc-mobile-toc-list a {
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:300; color:var(--dust);
  text-decoration:none; padding:8px 10px;
  border-radius:3px; transition:all 0.2s;
}
.tc-mobile-toc-list a:hover { color:var(--saigon); background:rgba(122,31,31,0.04); }

/* ══════════════════
   RESPONSIVE
══════════════════ */
/* ══════════════════════════════
   TABLET  (≤1024px)
══════════════════════════════ */
@media(max-width:1024px){
  nav { padding:20px 5%; }
  nav.scrolled { padding:13px 5%; }

  .tc-hero { padding:120px 5% 56px; }
  .tc-hero h1 { font-size:clamp(44px,6vw,68px); }



  .tc-body { padding:0 5%; grid-template-columns:200px 1fr; gap:0; }
  .tc-sidebar { padding:44px 24px 44px 0; }
  .tc-sidebar-label { font-size:8px; }
  .tc-nav-item a { font-size:11px; padding:8px 12px; }
  .tc-content { padding:44px 0 44px 36px; }

  .tc-section { padding-bottom:44px; margin-bottom:44px; }
  .tc-section h2 { font-size:clamp(28px,3.5vw,40px); }

  .tc-cta { padding:60px 5%; gap:32px; }

  .footer-body { max-width:90%; gap:44px; padding:52px 48px 40px; }
  .footer-divider,.footer-bar { max-width:90%; }
}

/* ══════════════════════════════
   MOBILE  (≤768px)
══════════════════════════════ */
@media(max-width:768px){

  /* ── Nav ── */
  nav { padding:14px 20px; }
  nav.scrolled { padding:12px 20px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .nav-cta { padding:9px 16px; font-size:10px; letter-spacing:0.15em; }

  /* ── Hero ── */
  .tc-hero { padding:88px 20px 44px; }
  .tc-hero h1 { font-size:clamp(36px,10vw,60px); margin-bottom:16px; }
  .tc-hero-intro { font-size:13px; line-height:1.8; margin-top:16px; }
  .tc-hero-meta {
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .tc-hero-date { font-size:11px; }
  .tc-hero-eyebrow { margin-bottom:16px; }


  /* ── Mobile TOC toggle ── */
  .tc-toc-toggle { display:flex; top:56px; }
  .tc-mobile-toc { position:sticky; top:calc(56px + 44px); z-index:40; }

  /* ── Body: kill sidebar, go single col ── */
  .tc-body {
    grid-template-columns:1fr;
    padding:0;
    max-width:100%;
  }
  .tc-sidebar { display:none; }
  .tc-content { padding:28px 20px 52px; }

  /* ── Sections ── */
  .tc-section { padding-bottom:36px; margin-bottom:36px; }
  .tc-section-eyebrow { margin-bottom:10px; }
  .tc-section-num { font-size:9px; }
  .tc-section h2 {
    font-size:clamp(24px,7vw,34px);
    margin-bottom:14px;
    line-height:1.1;
  }
  .tc-section p {
    font-size:13px;
    line-height:1.85;
    margin-bottom:12px;
  }
  .tc-section ul { gap:8px; margin:12px 0; }
  .tc-section ul li {
    font-size:13px;
    line-height:1.7;
    padding-left:16px;
  }
  .tc-highlight {
    padding:12px 16px;
    margin:14px 0;
  }
  .tc-highlight p { font-size:12px; line-height:1.7; }

  /* ── CTA ── */

  .tc-cta {
    padding:48px 20px;
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
  }
  .tc-cta-title { font-size:clamp(26px,8vw,40px); margin-bottom:8px; }
  .tc-cta-sub { font-size:12px; }
  .tc-cta-actions {
    flex-direction:column;
    align-items:stretch;
    width:100%;
    gap:12px;
  }
  .btn-cta-primary {
    width:100%;
    text-align:center;
    padding:14px;
  }
  .btn-cta-ghost { text-align:center; }

  /* ── Footer ── */
  .footer-body {
    grid-template-columns:1fr;
    max-width:100%;
    gap:24px;
    padding:36px 20px 28px;
  }
  .footer-logo-mark svg { height:36px; }
  .footer-tagline-p { max-width:100%; font-size:13px; }
  .footer-email-wrap { max-width:100%; }
  .footer-nav-cols { grid-template-columns:1fr 1fr; gap:18px; }
  .footer-col-title { font-size:9px; margin-bottom:16px; }
  .footer-nav-list a { font-size:12px; }
  .footer-divider { margin:0 20px; max-width:calc(100% - 40px); }
  .footer-bar {
    flex-direction:column;
    gap:6px;
    text-align:center;
    max-width:100%;
    padding:12px 20px 16px;
  }
  .footer-copy { font-size:10px; }
  .footer-tagline-s { font-size:12px; }
}

/* ══════════════════════════════
   SMALL MOBILE  (≤480px)
══════════════════════════════ */
@media(max-width:480px){

  /* Hero */
  .tc-hero { padding:80px 16px 36px; }
  .tc-hero h1 { font-size:clamp(30px,11vw,48px); }
  .tc-hero-intro { font-size:12px; }


  /* TOC toggle */
  .tc-toc-toggle { padding:12px 16px; font-size:11px; }
  .tc-mobile-toc { padding:10px 16px 14px; }
  .tc-mobile-toc-list a { font-size:11px; padding:7px 8px; }

  /* Content */
  .tc-content { padding:24px 16px 44px; }
  .tc-section { padding-bottom:28px; margin-bottom:28px; }
  .tc-section h2 { font-size:clamp(22px,9vw,30px); margin-bottom:12px; }
  .tc-section p { font-size:12px; }
  .tc-section ul li { font-size:12px; }
  .tc-highlight p { font-size:11px; }

  /* CTA */
  .tc-cta { padding:40px 16px; }
  .tc-cta-title { font-size:clamp(24px,9vw,36px); }

  /* Footer */
  .footer-body { padding:32px 16px 24px; gap:20px; }
  .footer-nav-cols { grid-template-columns:1fr; gap:16px; }
  .footer-bar { padding:10px 16px 14px; }
}

/* ══════════════════════════════
   EXTRA SMALL  (≤360px)
══════════════════════════════ */
@media(max-width:360px){
  .tc-hero { padding:76px 14px 32px; }
  .tc-hero h1 { font-size:clamp(26px,12vw,40px); }
  .nav-cta { display:none; }
  .tc-content { padding:20px 14px 40px; }
  .tc-cta { padding:36px 14px; }
  .footer-body { padding:28px 14px 22px; }
}
.tc-section {
  scroll-margin-top: 140px;
}
/* terms page end */

/* product page */
/* ══ PRODUCT HERO — SPLIT ══ */
.pd-hero{
  display:grid;
  grid-template-columns:42% 58%;
  min-height:auto;
  padding-top:20px;
  align-items:start;
}

/* Image side */
.pd-img-side{
  position:relative;
  background:var(--mist);
  display:flex;
  flex-direction:column;
}
.pd-img-main{
  width:100%;
  height:550px;
  object-fit:cover;
  display:block;
  transition:transform 1.2s ease;
  flex-shrink:0;
}
.pd-img-side:hover .pd-img-main{transform:scale(1.03);}

/* Image gallery thumbnails */
.pd-thumbs{
  display:flex;
  gap:8px;
  padding:10px 12px;
  background:var(--mist);
  flex-shrink:0;
}
.pd-thumb{
  width:64px;height:64px;
  overflow:hidden;
  border:2px solid transparent;
  cursor:pointer;
  opacity:0.65;
  transition:all 0.3s;
  flex-shrink:0;
}
.pd-thumb.active{border-color:var(--clay);opacity:1;}
.pd-thumb:hover{opacity:1;}
.pd-thumb img{width:100%;height:100%;object-fit:cover;}

/* Origin badge */
.pd-img-wrap{
  position:relative;
  overflow:hidden;
}
.pd-origin-badge{
  position:absolute;top:16px;right:16px;
  background:rgba(248,238,216,0.92);
  backdrop-filter:blur(12px);
  border:1px solid rgba(122,31,31,0.15);
  padding:12px 18px;
  z-index:5;
  display:flex;flex-direction:column;gap:3px;
}
.pd-origin-label{font-size:8px;font-weight:400;letter-spacing:0.28em;text-transform:uppercase;color:var(--clay);}
.pd-origin-val{font-size:13px;font-weight:300;color:var(--saigon-deep);}

/* Info side */
.pd-info-side{
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:60px 60px 60px 52px;
  position:relative;overflow:hidden;
  background:var(--cream-light);
}
.pd-info-side::before{
  content:'VC';
  position:absolute;bottom:-40px;right:-20px;
  font-family:'Cormorant Garamond',serif;
  font-size:280px;font-weight:300;line-height:1;
  color:rgba(122,31,31,0.04);pointer-events:none;
}

.pd-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.pd-eyebrow-line{width:24px;height:1px;background:var(--clay);flex-shrink:0;}
.pd-eyebrow-text{font-size:10px;font-weight:400;letter-spacing:0.32em;text-transform:uppercase;color:var(--clay);}

.pd-name{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(52px,5.5vw,80px);
  font-weight:300;line-height:0.95;
  letter-spacing:-0.01em;
  color:var(--saigon-deep);
  margin-bottom:6px;
}
.pd-name em{font-style:italic;color:var(--saigon);}

.pd-subtitle{
  font-size:13px;font-weight:300;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--dust);margin-bottom:24px;
}

/* Rating */
.pd-rating{display:flex;align-items:center;gap:10px;margin-bottom:24px;}
.pd-stars{color:var(--clay);font-size:13px;letter-spacing:2px;}
.pd-rating-count{font-size:12px;font-weight:300;color:var(--dust);}

.pd-divider{width:40px;height:1px;background:var(--clay);margin-bottom:24px;}

/* Tagline */
.pd-tagline{
  font-family:'Cormorant Garamond',serif;
  font-size:18px;font-weight:400;font-style:italic;
  color:var(--saigon);line-height:1.55;
  border-left:2px solid var(--clay);
  padding-left:18px;margin-bottom:24px;
}

/* Description */
.pd-desc{font-size:14px;font-weight:300;line-height:1.9;color:var(--dust);margin-bottom:28px;max-width:480px;}

/* Flavour note pills */
.pd-flavour-notes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;}
.pd-fn-pill{
  font-size:9px;font-weight:400;letter-spacing:0.18em;text-transform:uppercase;
  padding:6px 14px;border:1px solid rgba(122,31,31,0.2);
  color:var(--saigon);transition:all 0.3s;cursor:default;
}
.pd-fn-pill:hover{background:var(--saigon);color:var(--cream);border-color:var(--saigon);}

/* Variant selector */
.pd-variant-row{margin-bottom:24px;}
.pd-variant-label{font-size:10px;font-weight:400;letter-spacing:0.25em;text-transform:uppercase;color:var(--dust);margin-bottom:10px;display:block;}
.pd-variants{display:flex;gap:8px;}
.pd-var-btn{
  font-size:11px;font-weight:400;letter-spacing:0.12em;
  padding:10px 24px;border:1.5px solid rgba(122,31,31,0.22);
  background:transparent;cursor:pointer;color:var(--saigon);
  transition:all 0.25s;font-family:'DM Sans',sans-serif;
}
.pd-var-btn.active,.pd-var-btn:hover{background:var(--saigon);color:var(--cream);border-color:var(--saigon);}
.pd-var-sub{font-size:10px;font-weight:300;color:var(--dust);margin-top:6px;display:block;letter-spacing:0.05em;}

/* Price */
.pd-price-row{display:flex;align-items:baseline;gap:16px;margin-bottom:28px;}
.pd-price{font-family:'Cormorant Garamond',serif;font-size:48px;font-weight:300;color:var(--saigon-deep);line-height:1;}
.pd-price-sub{font-size:12px;font-weight:300;color:var(--dust);letter-spacing:0.08em;}

/* Add to cart row */
.pd-purchase-row{display:flex;align-items:center;gap:12px;margin-bottom:24px;flex-wrap:wrap;}
.pd-qty{display:flex;align-items:center;border:1.5px solid rgba(122,31,31,0.2);}
.pd-qty-btn{width:40px;height:48px;background:none;border:none;cursor:pointer;font-size:18px;color:var(--saigon);display:flex;align-items:center;justify-content:center;transition:background 0.2s;}
.pd-qty-btn:hover{background:rgba(122,31,31,0.07);}
.pd-qty-input{width:48px;height:48px;border:none;outline:none;text-align:center;background:transparent;font-family:'DM Sans',sans-serif;font-size:15px;color:var(--ink);}
.pd-buy-btn{
  font-size:11px;font-weight:400;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--cream);background:var(--saigon);
  padding:15px 44px;border:none;cursor:pointer;
  text-decoration:none;display:inline-block;
  transition:background 0.3s;font-family:'DM Sans',sans-serif;
  flex:1;text-align:center;
}
.pd-buy-btn:hover{background:var(--saigon-deep);}
.pd-wish-btn{
  width:48px;height:48px;border:1.5px solid rgba(122,31,31,0.2);
  background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--saigon);transition:all 0.3s;
}
.pd-wish-btn:hover{background:var(--saigon);color:var(--cream);border-color:var(--saigon);}
.pd-wish-btn svg{width:18px;height:18px;}

/* Trust badges */
.pd-trust{display:flex;gap:20px;margin-bottom:28px;flex-wrap:wrap;}
.pd-trust-item{display:flex;align-items:center;gap:8px;}
.pd-trust-icon{width:28px;height:28px;color:var(--clay);flex-shrink:0;}
.pd-trust-icon svg{width:100%;height:100%;}
.pd-trust-text{font-size:11px;font-weight:300;color:var(--dust);letter-spacing:0.03em;}

/* Share */
.pd-share{display:flex;align-items:center;gap:12px;padding-top:20px;border-top:1px solid rgba(122,31,31,0.08);}
.pd-share-label{font-size:10px;font-weight:400;letter-spacing:0.22em;text-transform:uppercase;color:var(--dust);}
.pd-share-links{display:flex;gap:10px;}
.pd-share-btn{width:32px;height:32px;border:1px solid rgba(122,31,31,0.18);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--saigon);transition:all 0.3s;}
.pd-share-btn:hover{background:var(--saigon);color:var(--cream);border-color:var(--saigon);}
.pd-share-btn svg{width:14px;height:14px;}

/* ══ PRODUCT DETAILS TABS ══ */
.pd-tabs-section{
  padding:80px 9%;
  background:var(--cream-light);
  border-top:1px solid rgba(122,31,31,0.08);
}
.pd-tab-nav{
  display:flex;gap:0;
  border-bottom:1px solid rgba(122,31,31,0.1);
  margin-bottom:52px;
  overflow-x:auto;
}
.pd-tab-btn{
  font-size:11px;font-weight:400;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--dust);background:none;border:none;cursor:pointer;
  padding:14px 28px 16px;position:relative;transition:color 0.3s;
  white-space:nowrap;
}
.pd-tab-btn.active{color:var(--saigon);}
.pd-tab-btn.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--saigon);}
.pd-tab-content{display:none;}
.pd-tab-content.active{display:block;}

/* Tab: More Info */
.pd-more-info{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;
  align-items:start;
}
.pd-info-col{}
.pd-info-col-title{
  font-family:'Cormorant Garamond',serif;
  font-size:32px;font-weight:300;color:var(--saigon-deep);
  margin-bottom:24px;
}
.pd-info-col-title em{font-style:italic;color:var(--saigon);}
.pd-info-row{
  display:flex;gap:0;
  padding:14px 0;
  border-bottom:1px solid rgba(122,31,31,0.07);
}
.pd-info-row:first-of-type{border-top:1px solid rgba(122,31,31,0.07);}
.pd-info-key{
  font-size:10px;font-weight:400;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--clay);min-width:140px;padding-top:2px;flex-shrink:0;
}
.pd-info-val{font-size:14px;font-weight:300;color:var(--dust);line-height:1.6;}
.pd-info-val strong{font-weight:400;color:var(--saigon-deep);}

/* Strength meter */
.pd-strength-bar{display:flex;gap:4px;align-items:center;margin-top:4px;}
.pd-strength-pip{width:20px;height:4px;border-radius:2px;background:rgba(122,31,31,0.12);}
.pd-strength-pip.filled{background:var(--saigon);}
.pd-strength-pip{
  position:relative;
  width:20px;
  height:4px;
  border-radius:2px;
  background:rgba(122,31,31,0.12);
  overflow:hidden;
}

.pd-strength-pip-fill{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  background:var(--saigon);
}

/* Tab: Flavour Notes */
.pd-flavour-section{}
.pd-flavour-hero{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;
  align-items:start;margin-bottom:52px;
}
.pd-flavour-narrative{
  font-family:'Cormorant Garamond',serif;
  font-size:20px;font-weight:400;font-style:italic;
  color:var(--saigon);line-height:1.65;
  border-left:3px solid var(--clay);
  padding-left:24px;
}
.pd-flavour-wheel{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;
}
.pd-fw-item{
  background:var(--smoke);
  padding:20px 16px;text-align:center;
  border-top:2px solid transparent;
  transition:all 0.3s;cursor:default;
}
.pd-fw-item:hover{border-top-color:var(--saigon);transform:translateY(-3px);}
.pd-fw-icon{font-size:22px;margin-bottom:8px;display:block;}
.pd-fw-label{font-size:9px;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;color:var(--clay);margin-bottom:4px;}
.pd-fw-desc{font-size:12px;font-weight:300;color:var(--dust);line-height:1.5;}

/* Tab: How to Enjoy */
.pd-enjoy-section{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;
}
.pd-enjoy-col{}
.pd-enjoy-col-title{
  font-family:'Cormorant Garamond',serif;
  font-size:28px;font-weight:300;color:var(--saigon-deep);
  margin-bottom:28px;display:flex;align-items:center;gap:14px;
}
.pd-enjoy-col-title::before{content:'';display:inline-block;width:32px;height:1px;background:var(--clay);}
.pd-enjoy-step{
  display:flex;gap:20px;align-items:flex-start;
  padding:20px 0;border-bottom:1px solid rgba(122,31,31,0.07);
}
.pd-enjoy-step:first-of-type{border-top:1px solid rgba(122,31,31,0.07);}
.pd-step-num{
  font-family:'Cormorant Garamond',serif;
  font-size:36px;font-weight:300;color:rgba(122,31,31,0.18);
  line-height:1;min-width:36px;transition:color 0.3s;
}
.pd-enjoy-step:hover .pd-step-num{color:var(--clay);}
.pd-step-body{}
.pd-step-title{font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--saigon);margin-bottom:6px;}
.pd-step-text{font-size:13px;font-weight:300;color:var(--dust);line-height:1.75;}
.pd-pro-tip{
  background:rgba(176,104,72,0.08);
  border-left:2px solid var(--clay);
  padding:16px 20px;margin-top:28px;
}
.pd-pro-tip-label{font-size:9px;font-weight:500;letter-spacing:0.25em;text-transform:uppercase;color:var(--clay);margin-bottom:6px;}
.pd-pro-tip-text{font-size:13px;font-weight:300;color:var(--dust);line-height:1.75;}

/* ══ PRODUCT SPECS STRIP ══ */
.pd-specs-strip{
  background:var(--saigon-deep);
  padding:52px 9%;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,220px));
  justify-content:center;
  gap:30px;
  position:relative;
  overflow:hidden;
}
.pd-specs-strip::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='rgba(201,139,104,0.07)' stroke-width='1'%3E%3Cpath d='M0,50 Q360,90 720,50 Q1080,10 1440,50'/%3E%3Cpath d='M0,130 Q360,170 720,130 Q1080,90 1440,130'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.pd-spec{
  padding:28px 24px;
  position:relative;z-index:2;
  text-align:center;
  border-right:1px solid rgba(248,238,216,0.06);
  transition:background 0.3s;
}
.pd-spec:last-child{border-right:none;}
.pd-spec:hover{background:rgba(255,255,255,0.04);}
.pd-spec-icon{width:32px;height:32px;color:var(--clay-light);margin:0 auto 14px;}
.pd-spec-icon svg{width:100%;height:100%;}
.pd-spec-label{font-size:9px;font-weight:400;letter-spacing:0.28em;text-transform:uppercase;color:rgba(248,238,216,0.4);margin-bottom:8px;}
.pd-spec-val{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:var(--cream);line-height:1.2;}

/* ══ RELATED PRODUCTS ══ */
.pd-related{
  padding:80px 9%;
  background:var(--cream-light);
}
.pd-related-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px;}
.pd-related-title{font-family:'Cormorant Garamond',serif;font-size:clamp(36px,4vw,52px);font-weight:300;color:var(--saigon-deep);}
.pd-related-title em{font-style:italic;color:var(--saigon);}
.pd-related-link{font-size:10px;font-weight:400;letter-spacing:0.22em;text-transform:uppercase;color:var(--saigon);text-decoration:none;border-bottom:1px solid rgba(122,31,31,0.3);padding-bottom:2px;transition:all 0.3s;}
.pd-related-link:hover{letter-spacing:0.3em;}
.pd-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;}
.pd-rel-card{position:relative;overflow:hidden;cursor:pointer;}
.pd-rel-card-img{aspect-ratio:3/2;overflow:hidden;}
.pd-rel-card-img img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(0.82);transition:transform 0.8s ease,filter 0.5s;}
.pd-rel-card:hover .pd-rel-card-img img{transform:scale(1.05);filter:brightness(0.65);}
.pd-rel-card-body{padding:20px 0 4px;}
.pd-rel-card-eyebrow{font-size:9px;font-weight:400;letter-spacing:0.25em;text-transform:uppercase;color:var(--clay);margin-bottom:6px;}
.pd-rel-card-name{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:var(--saigon-deep);margin-bottom:8px;}
.pd-rel-card-name em{font-style:italic;color:var(--saigon);}
.pd-rel-card-price{font-size:13px;font-weight:300;color:var(--dust);}
.pd-rel-card-btn{display:inline-block;margin-top:12px;font-size:10px;font-weight:400;letter-spacing:0.22em;text-transform:uppercase;color:var(--saigon);text-decoration:none;border-bottom:1px solid rgba(122,31,31,0.3);padding-bottom:2px;transition:all 0.3s;}
.pd-rel-card-btn:hover{letter-spacing:0.3em;}
/* ══════════════════════════════
   RESPONSIVE — TABLET (≤1024px)
══════════════════════════════ */
/* ══ TABLET (≤1024px) ══ */
@media(max-width:1024px){
  nav{padding:20px 5%;}nav.scrolled{padding:13px 5%;}
  .breadcrumb{padding:82px 5% 0;}
  .pd-hero{grid-template-columns:44% 56%;}
  .pd-img-main{height:280px;}
  .pd-info-side{padding:44px 40px 44px 36px;}
  .pd-tabs-section{padding:52px 5%;}
  .pd-more-info,.pd-flavour-hero,.pd-enjoy-section{grid-template-columns:1fr 1fr;gap:40px;}
  .pd-specs-strip{padding:36px 5%;grid-template-columns:repeat(5,1fr);}
  .pd-related{padding:52px 5%;}
  .footer-body{max-width:90%;gap:44px;}
  .footer-divider,.footer-bar{max-width:90%;}
}

/* ══ MOBILE (≤768px) ══ */
@media(max-width:768px){
  /* Nav */
  nav{padding:14px 20px;}nav.scrolled{padding:12px 20px;}
  .nav-links{display:none;}.hamburger{display:flex;}
  .nav-cta{padding:9px 16px;font-size:10px;}

  /* Breadcrumb */
  .breadcrumb{padding:74px 20px 0;gap:8px;}
  .breadcrumb a,.breadcrumb span{font-size:10px;}

  /* Hero: stack vertically, image first */
  .pd-hero{grid-template-columns:1fr;min-height:auto;}
  .pd-img-side{order:-1;}
  .pd-img-main{height:68vw;min-height:240px;}

  /* Origin badge */
  .pd-origin-badge{top:12px;right:12px;padding:8px 12px;}
  .pd-origin-label{font-size:7px;}
  .pd-origin-val{font-size:11px;}

  /* Thumbnails */
  .pd-thumbs{gap:6px;padding:8px 12px;}
  .pd-thumb{width:54px;height:54px;}

  /* Info side */
  .pd-info-side{padding:28px 20px 36px;order:1;}
  .pd-info-side::before{font-size:120px;bottom:-16px;right:-8px;}

  /* Typography */
  .pd-eyebrow{margin-bottom:8px;}
  .pd-name{font-size:clamp(40px,11vw,64px);margin-bottom:4px;}
  .pd-subtitle{font-size:11px;margin-bottom:8px;}
  .pd-rating{margin-bottom:10px;}
  .pd-divider{margin-bottom:12px;}
  .pd-tagline{font-size:15px;padding-left:13px;margin-bottom:12px;}
  .pd-desc{font-size:13px;line-height:1.8;margin-bottom:14px;}

  /* Flavour pills */
  .pd-flavour-notes{gap:5px;margin-bottom:14px;}
  .pd-fn-pill{font-size:8px;padding:4px 10px;}

  /* Variants */
  .pd-variant-row{margin-bottom:12px;}
  .pd-variant-label{font-size:9px;margin-bottom:8px;}
  .pd-var-btn{padding:8px 18px;font-size:11px;}

  /* Price */
  .pd-price-row{gap:10px;margin-bottom:14px;}
  .pd-price{font-size:36px;}
  .pd-price-sub{font-size:11px;}

  /* Purchase row */
  .pd-purchase-row{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:8px;
    margin-bottom:14px;
    align-items:center;
  }
  .pd-qty{grid-column:1;}
  .pd-buy-btn{grid-column:2;padding:13px 16px;font-size:11px;text-align:center;}
  .pd-wish-btn{grid-column:3;width:44px;height:44px;}
  .pd-qty-btn{width:36px;height:44px;}
  .pd-qty-input{width:40px;height:44px;font-size:13px;}

  /* Trust */
  .pd-trust{gap:10px;margin-bottom:14px;flex-wrap:wrap;}
  .pd-trust-icon{width:22px;height:22px;}
  .pd-trust-text{font-size:10px;}

  /* Share */
  .pd-share{padding-top:14px;}
  .pd-share-label{font-size:9px;}

  /* Tabs section */
  .pd-tabs-section{padding:40px 20px;}
  .pd-tab-nav{margin-bottom:28px;-webkit-overflow-scrolling:touch;}
  .pd-tab-btn{padding:11px 16px 13px;font-size:10px;letter-spacing:0.15em;}

  /* Tab: More Info */
  .pd-more-info{grid-template-columns:1fr;gap:28px;}
  .pd-info-col-title{font-size:24px;margin-bottom:18px;}
  .pd-info-row{padding:12px 0;}
  .pd-info-key{min-width:100px;font-size:9px;letter-spacing:0.18em;}
  .pd-info-val{font-size:13px;}

  /* Tab: Flavour Notes */
  .pd-flavour-hero{grid-template-columns:1fr;gap:24px;}
  .pd-flavour-narrative{font-size:16px;padding-left:16px;}
  .pd-flavour-wheel{grid-template-columns:1fr 1fr;gap:8px;}
  .pd-fw-item{padding:14px 12px;}
  .pd-fw-icon{font-size:18px;margin-bottom:6px;}
  .pd-fw-label{font-size:8px;}
  .pd-fw-desc{font-size:11px;}

  /* Tab: How to Enjoy */
  .pd-enjoy-section{grid-template-columns:1fr;gap:28px;}
  .pd-enjoy-col-title{font-size:22px;margin-bottom:18px;}
  .pd-enjoy-step{padding:16px 0;gap:14px;}
  .pd-step-num{font-size:28px;min-width:28px;}
  .pd-step-title{font-size:10px;margin-bottom:4px;}
  .pd-step-text{font-size:13px;}
  .pd-pro-tip{padding:12px 16px;margin-top:18px;}
  .pd-pro-tip-label{font-size:8px;}
  .pd-pro-tip-text{font-size:12px;}

  /* Specs strip */
  .pd-specs-strip{
    padding:28px 20px;
    grid-template-columns:1fr 1fr;
    gap:2px;
  }
  .pd-spec{
    padding:18px 14px;
    border-right:none;
    border-bottom:1px solid rgba(248,238,216,0.06);
  }
  .pd-spec:nth-child(odd){border-right:1px solid rgba(248,238,216,0.06);}
  .pd-spec:nth-child(5){grid-column:span 2;border-right:none;border-bottom:none;}
  .pd-spec-icon{width:24px;height:24px;margin-bottom:8px;}
  .pd-spec-label{font-size:8px;margin-bottom:5px;}
  .pd-spec-val{font-size:14px;}

  /* Related */
  .pd-related{padding:44px 20px;}
  .pd-related-header{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:28px;}
  .pd-related-title{font-size:clamp(30px,8vw,44px);}
  .pd-related-grid{grid-template-columns:1fr;gap:28px;}
  .pd-rel-card-name{font-size:24px;}
  .pd-rel-card-body{padding:16px 0 4px;}

  /* Footer */
  .footer-body{grid-template-columns:1fr;max-width:100%;gap:26px;padding:36px 20px 28px;}
  .footer-nav-cols{grid-template-columns:1fr 1fr;gap:18px;}
  .footer-divider{margin:0 20px;max-width:calc(100% - 40px);}
  .footer-bar{flex-direction:column;gap:6px;text-align:center;max-width:100%;padding:12px 20px 16px;}
}

/* ══ SMALL MOBILE (≤480px) ══ */
@media(max-width:480px){
  .breadcrumb{padding:70px 16px 0;}
  .pd-img-main{height:75vw;}
  .pd-info-side{padding:24px 16px 32px;}
  .pd-name{font-size:clamp(36px,12vw,56px);}
  .pd-price{font-size:32px;}

  /* Purchase row: full column stack */
  .pd-purchase-row{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .pd-qty{width:100%;justify-content:center;}
  .pd-qty-btn{flex:1;}
  .pd-buy-btn{width:100%;padding:14px;}
  .pd-wish-btn{width:100%;justify-content:center;height:44px;}

  .pd-flavour-wheel{grid-template-columns:1fr 1fr;}
  .pd-specs-strip{grid-template-columns:1fr 1fr;}
  .pd-spec:nth-child(5){grid-column:span 2;}

  .footer-nav-cols{grid-template-columns:1fr;}
  .pd-tab-btn{padding:10px 12px 12px;font-size:9px;letter-spacing:0.12em;}

  .pd-thumbs{padding:6px 10px;gap:5px;}
  .pd-thumb{width:48px;height:48px;}
}

/* ══ EXTRA SMALL (≤360px) ══ */
@media(max-width:360px){
  .nav-cta{display:none;}
  .pd-name{font-size:clamp(32px,13vw,48px);}
  .pd-img-main{height:80vw;}
  .pd-flavour-wheel{grid-template-columns:1fr;}
}
/* product page end */
/* contact-page */
.contact-hero{
  height:72vh; min-height:480px;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
}
.contact-hero-bg{position:absolute;inset:0;z-index:0;}
.contact-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:brightness(0.55) saturate(0.7);}
.contact-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(10,2,2,0.1) 0%, rgba(10,2,2,0.6) 100%),
    linear-gradient(to bottom, rgba(10,2,2,0.5) 0%, rgba(10,2,2,0.05) 45%, rgba(10,2,2,0.65) 100%);
}
.contact-hero-content{
  position:relative;z-index:5;
  text-align:center; padding:0 40px 80px;
  width:100%;
}
.contact-hero-eyebrow{
  display:flex;align-items:center;gap:14px;justify-content:center;
  margin-bottom:20px;
  opacity:0;animation:rise 1s ease 0.3s forwards;
}
.contact-hero-eyebrow span.line{width:32px;height:1px;background:var(--clay-light);}
.contact-hero-eyebrow span.txt{font-size:10px;font-weight:400;letter-spacing:0.35em;text-transform:uppercase;color:var(--clay-light);}
.contact-hero h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(52px,7vw,92px);
  font-weight:300;line-height:0.95;color:#fff;
  letter-spacing:0.01em;margin-bottom:20px;
  opacity:0;animation:rise 1.1s ease 0.5s forwards;
  text-shadow:0 2px 40px rgba(0,0,0,0.3);
}
.contact-hero h1 em{font-style:italic;color:var(--clay-light);}
.contact-hero-sub{
  font-size:14px;font-weight:300;
  color:rgba(255,255,255,0.65);letter-spacing:0.04em;
  max-width:480px;margin:0 auto;
  opacity:0;animation:rise 1s ease 0.8s forwards;
}

/* ══════════════════════════════
   CONTACT CARDS — quick info row
══════════════════════════════ */
.contact-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--saigon-deep);
}
.contact-card{
  padding:40px 36px;
  background:var(--saigon-deep);
  display:flex;flex-direction:column;gap:14px;
  position:relative;overflow:hidden;
  border-right:1px solid rgba(248,238,216,0.06);
  transition:background 0.35s;
  cursor:default;
}
.contact-card:last-child{border-right:none;}
.contact-card:hover{background:rgba(255,255,255,0.04);}
.contact-card-icon{
  width:36px;height:36px;color:var(--clay-light);
  transition:transform 0.3s;
}
.contact-card:hover .contact-card-icon{transform:translateY(-3px);}
.contact-card-icon svg{width:100%;height:100%;}
.contact-card-label{font-size:9px;font-weight:400;letter-spacing:0.3em;text-transform:uppercase;color:rgba(248,238,216,0.4);}
.contact-card-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;color:var(--cream);line-height:1.2;}
.contact-card-detail{font-size:13px;font-weight:300;color:rgba(248,238,216,0.55);line-height:1.7;}
.contact-card-link{font-size:10px;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;color:var(--clay-light);text-decoration:none;border-bottom:1px solid rgba(201,139,104,0.3);padding-bottom:2px;width:fit-content;transition:border-color 0.3s;}
.contact-card-link:hover{border-color:var(--clay-light);}

/* ══════════════════════════════
   MAIN SPLIT — Form + Info
══════════════════════════════ */
.contact-main{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:80vh;
}

/* ── LEFT: Form panel ── */
.contact-form-panel{
  padding:80px 72px 80px 9%;
  background:var(--cream-light);
  position:relative;overflow:hidden;
}
.contact-form-panel::before{
  content:'"';
  position:absolute;bottom:-60px;right:-10px;
  font-family:'Cormorant Garamond',serif;
  font-size:400px;font-weight:300;line-height:1;
  color:rgba(122,31,31,0.04);pointer-events:none;
}

.cf-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.cf-eyebrow-line{width:24px;height:1px;background:var(--clay);flex-shrink:0;}
.cf-eyebrow-text{font-size:10px;font-weight:400;letter-spacing:0.32em;text-transform:uppercase;color:var(--clay);}

.cf-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(40px,4.5vw,60px);
  font-weight:300;color:var(--saigon-deep);
  line-height:1.05;margin-bottom:10px;
}
.cf-title em{font-style:italic;color:var(--saigon);}
.cf-subtitle{font-size:14px;font-weight:300;color:var(--dust);line-height:1.7;margin-bottom:40px;max-width:420px;}

/* Form */
.contact-form{display:flex;flex-direction:column;gap:20px;position:relative;z-index:2;}

.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

.cf-field{display:flex;flex-direction:column;gap:8px;}
.cf-field.full{grid-column:1/-1;}

.cf-label{font-size:10px;font-weight:400;letter-spacing:0.22em;text-transform:uppercase;color:var(--saigon);}
.cf-input,.cf-select,.cf-textarea{
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:300;
  color:var(--ink);background:transparent;
  border:none;border-bottom:1.5px solid rgba(122,31,31,0.18);
  padding:12px 0;outline:none;width:100%;
  transition:border-color 0.3s;
  letter-spacing:0.02em;
}
.cf-input::placeholder,.cf-textarea::placeholder{color:rgba(154,128,112,0.5);}
.cf-input:focus,.cf-select:focus,.cf-textarea:focus{border-bottom-color:var(--saigon);}
.cf-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%239A8070' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0 center;background-size:16px;}
.cf-textarea{resize:vertical;min-height:110px;line-height:1.75;border:1.5px solid rgba(122,31,31,0.18);padding:14px 16px;margin-top:0;}
.cf-textarea:focus{border-color:var(--saigon);}

/* Checkbox */
.cf-check-row{display:flex;align-items:flex-start;gap:12px;}
.cf-check-input{width:16px;height:16px;border:1.5px solid rgba(122,31,31,0.3);cursor:pointer;accent-color:var(--saigon);margin-top:1px;flex-shrink:0;}
.cf-check-label{font-size:12px;font-weight:300;color:var(--dust);line-height:1.6;}
.cf-check-label a{color:var(--saigon);text-decoration:underline;text-decoration-color:rgba(122,31,31,0.3);}

/* custom Form */
.contact-form-panel input.cf-input,
.contact-form-panel select.cf-select,
.contact-form-panel textarea.cf-textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1.5px solid rgba(122,31,31,.18) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
  min-height: auto !important;
  width: 100%;
}

.contact-form-panel textarea.cf-textarea {
  border: 1.5px solid rgba(122,31,31,.18) !important;
  padding: 14px 16px !important;
  min-height: 110px !important;
}

.contact-form-panel input.cf-input:focus,
.contact-form-panel select.cf-select:focus,
.contact-form-panel textarea.cf-textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  border-bottom-color: var(--saigon) !important;
}
/* custom form end */

/* Submit */
.cf-submit{
  font-size:11px;font-weight:400;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--cream);background:var(--saigon);
  padding:16px 52px;border:none;cursor:pointer;
  font-family:'DM Sans',sans-serif;
  width:fit-content;transition:background 0.3s;
  position:relative;overflow:hidden;
}
.cf-submit::after{content:'';position:absolute;inset:0;background:var(--clay);transform:translateY(101%);transition:transform 0.4s cubic-bezier(0.65,0,0.35,1);z-index:-1;}
.cf-submit:hover{background:var(--saigon);}
.cf-submit:hover::after{transform:translateY(0);}

/* Success state */
.cf-success{
  display:none;
  background:rgba(176,104,72,0.08);
  border-left:2px solid var(--clay);
  padding:18px 22px;
  border-radius:0 3px 3px 0;
}
.cf-success.show{display:block;}
.cf-success-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;color:var(--saigon-deep);margin-bottom:6px;}
.cf-success-text{font-size:13px;font-weight:300;color:var(--dust);line-height:1.7;}

/* ── RIGHT: Info panel ── */
.contact-info-panel{
  background:var(--saigon-deep);
  padding:80px 9% 80px 64px;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.contact-info-panel::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 700 800' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='rgba(201,139,104,0.08)' stroke-width='1'%3E%3Cpath d='M0,80 Q350,120 700,80'/%3E%3Cpath d='M0,200 Q350,240 700,200'/%3E%3Cpath d='M0,340 Q350,380 700,340'/%3E%3Cpath d='M0,500 Q350,540 700,500'/%3E%3Cpath d='M0,660 Q350,700 700,660'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}

.ci-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.ci-eyebrow-line{width:24px;height:1px;background:var(--clay-light);flex-shrink:0;}
.ci-eyebrow-text{font-size:10px;font-weight:400;letter-spacing:0.32em;text-transform:uppercase;color:var(--clay-light);}

.ci-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(36px,4vw,52px);
  font-weight:300;color:var(--cream);
  line-height:1.05;margin-bottom:10px;
  position:relative;z-index:2;
}
.ci-title em{font-style:italic;color:var(--clay-light);}

.ci-sub{font-size:14px;font-weight:300;color:rgba(248,238,216,0.52);line-height:1.8;margin-bottom:44px;position:relative;z-index:2;}

/* Info items */
.ci-items{display:flex;flex-direction:column;gap:0;position:relative;z-index:2;}
.ci-item{
  display:flex;align-items:flex-start;gap:20px;
  padding:24px 0;
  border-bottom:1px solid rgba(248,238,216,0.07);
  transition:padding-left 0.3s;
}
.ci-item:first-child{border-top:1px solid rgba(248,238,216,0.07);}
.ci-item:hover{padding-left:6px;}
.ci-item-icon{width:36px;height:36px;color:var(--clay-light);flex-shrink:0;padding:8px;background:rgba(201,139,104,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background 0.3s;}
.ci-item:hover .ci-item-icon{background:rgba(201,139,104,0.2);}
.ci-item-icon svg{width:18px;height:18px;}
.ci-item-body{}
.ci-item-label{font-size:9px;font-weight:400;letter-spacing:0.28em;text-transform:uppercase;color:var(--clay-light);margin-bottom:4px;}
.ci-item-val{font-size:14px;font-weight:300;color:rgba(248,238,216,0.75);line-height:1.6;}
.ci-item-val a{color:var(--clay-light);text-decoration:none;transition:color 0.3s;}
.ci-item-val a:hover{color:var(--cream);}

/* Social row */
.ci-social-row{
  display:flex;gap:10px;margin-top:44px;
  position:relative;z-index:2;
}
.ci-social-btn{
  width:40px;height:40px;border:1px solid rgba(248,238,216,0.15);
  background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:rgba(248,238,216,0.55);text-decoration:none;
  transition:all 0.3s;
}
.ci-social-btn:hover{background:rgba(255,255,255,0.08);border-color:rgba(201,139,104,0.4);color:var(--clay-light);}
.ci-social-btn svg{width:15px;height:15px;}

/* ══════════════════════════════
   FAQ STRIP
══════════════════════════════ */
.faq-section{
  padding:80px 9%;
  background:var(--mist);
}
.faq-header{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:52px;}
.faq-title{font-family:'Cormorant Garamond',serif;font-size:clamp(40px,4.5vw,60px);font-weight:300;color:var(--saigon-deep);line-height:1.05;}
.faq-title em{font-style:italic;color:var(--saigon);}
.faq-subtitle{font-size:14px;font-weight:300;color:var(--dust);line-height:1.85;align-self:end;}

.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.faq-item{
  background:var(--cream-light);
  border-top:2px solid transparent;
  padding:0;
  transition:border-top-color 0.3s;
  cursor:pointer;
}
.faq-item.open{border-top-color:var(--saigon);}
.faq-question{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px;
  gap:16px;
}
.faq-q-text{font-size:14px;font-weight:400;color:var(--saigon-deep);line-height:1.4;}
.faq-icon{width:20px;height:20px;color:var(--clay);flex-shrink:0;transition:transform 0.35s;}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height 0.4s cubic-bezier(0.65,0,0.35,1), padding 0.3s;
  padding:0 24px;
}
.faq-item.open .faq-answer{max-height:200px;padding:0 24px 22px;}
.faq-answer p{font-size:13px;font-weight:300;color:var(--dust);line-height:1.8;}

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
/* .site-footer{position:relative;background:var(--cream);overflow:hidden;border-top:3px solid var(--saigon);}
.footer-body{display:grid;grid-template-columns:1.6fr 1fr;gap:80px;padding:54px 64px 42px;align-items:start;max-width:75%;margin:0 auto;}
.footer-brand-col{display:flex;flex-direction:column;gap:24px;}
.footer-logo-mark svg{height:40px;width:auto;}
.footer-tagline-p{font-size:13px;font-weight:300;line-height:1.85;color:var(--dust);max-width:400px;}
.footer-subscribe-label{font-size:9px;font-weight:400;letter-spacing:0.25em;text-transform:uppercase;color:var(--saigon);margin:0 0 12px;}
.footer-email-wrap{display:flex;align-items:stretch;border:1.5px solid var(--saigon);max-width:400px;}
.footer-email-in{background:transparent;border:none;outline:none;font-family:'DM Sans',sans-serif;font-size:12px;color:var(--ink);padding:12px 14px;flex:1;}
.footer-email-in::placeholder{color:var(--dust);opacity:0.6;}
.footer-email-btn{background:var(--saigon);border:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;color:var(--cream);padding:12px 20px;white-space:nowrap;transition:background 0.3s;}
.footer-email-btn:hover{background:var(--saigon-deep);}
.footer-socials{display:flex;gap:10px;}
.footer-social-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1.5px solid rgba(122,31,31,0.22);color:var(--saigon);text-decoration:none;transition:all 0.3s;}
.footer-social-link svg{width:14px;height:14px;}
.footer-social-link:hover{background:var(--saigon);color:var(--cream);border-color:var(--saigon);}
.footer-nav-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
.footer-col-title{font-size:10px;font-weight:500;letter-spacing:0.25em;text-transform:uppercase;color:var(--saigon);margin:0 0 20px;padding-bottom:8px;border-bottom:1px solid rgba(122,31,31,0.14);}
.footer-nav-list{list-style:none;display:flex;flex-direction:column;gap:10px;}
.footer-nav-list a{font-size:13px;font-weight:300;color:var(--dust);text-decoration:none;transition:color 0.3s,padding-left 0.25s;display:block;}
.footer-nav-list a:hover{color:var(--saigon);padding-left:5px;}
.footer-divider{margin:0 auto;max-width:75%;height:1px;background:linear-gradient(to right,transparent,rgba(122,31,31,0.3) 20%,var(--clay) 50%,rgba(122,31,31,0.3) 80%,transparent);}
.footer-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 0 20px;max-width:75%;margin:0 auto;}
.footer-copy{font-size:10px;font-weight:300;letter-spacing:0.12em;color:var(--dust);}
.footer-tagline-s{font-family:'Cormorant Garamond',serif;font-size:13px;font-style:italic;color:var(--clay);} */

/* Keyframes */
@keyframes rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* ══════════════════════════════
   RESPONSIVE — TABLET (≤1024px)
══════════════════════════════ */
@media(max-width:1024px){
  /* nav{padding:20px 5%;}nav.scrolled{padding:13px 5%;} */
  .contact-hero{height:65vh;min-height:420px;}
  .contact-hero-content{padding:0 32px 68px;}
  .contact-cards{grid-template-columns:repeat(3,1fr);}
  .contact-card{padding:32px 28px;}
  .contact-main{grid-template-columns:1fr 1fr;}
  .contact-form-panel{padding:64px 52px 64px 5%;}
  .contact-info-panel{padding:64px 5% 64px 48px;}
  .faq-section{padding:64px 5%;}
  .faq-header{grid-template-columns:1fr 1fr;gap:40px;}
  /* .footer-body{max-width:90%;gap:44px;padding:52px 48px 40px;}
  .footer-divider,.footer-bar{max-width:90%;} */
}

/* ══════════════════════════════
   RESPONSIVE — MOBILE (≤768px)
══════════════════════════════ */
@media(max-width:768px){
  /* Nav */
  /* nav{padding:14px 20px;}nav.scrolled{padding:12px 20px;}
  .nav-links{display:none;}.hamburger{display:flex;}
  .nav-cta{padding:9px 16px;font-size:10px;} */

  /* Hero */
  .contact-hero{height:60vh;min-height:360px;}
  .contact-hero-content{padding:0 20px 56px;}
  .contact-hero h1{font-size:clamp(40px,11vw,68px);}
  .contact-hero-sub{font-size:13px;max-width:100%;}

  /* Cards: stack to 1 col */
  .contact-cards{grid-template-columns:1fr;}
  .contact-card{padding:28px 20px;border-right:none;border-bottom:1px solid rgba(248,238,216,0.06);}
  .contact-card:last-child{border-bottom:none;}
  .contact-card-title{font-size:20px;}
  .contact-card-detail{font-size:12px;}

  /* Main split → stack */
  .contact-main{grid-template-columns:1fr;}
  .contact-form-panel{padding:48px 20px 52px;order:1;}
  .contact-form-panel::before{font-size:240px;bottom:-40px;}
  .contact-info-panel{padding:48px 20px 52px;order:2;}

  /* Form */
  .cf-row{grid-template-columns:1fr;}
  .cf-title{font-size:clamp(34px,9vw,52px);}
  .cf-subtitle{font-size:13px;margin-bottom:28px;}
  .cf-submit{width:100%;text-align:center;padding:15px;}

  /* Info */
  .ci-title{font-size:clamp(32px,8vw,48px);}
  .ci-sub{font-size:13px;margin-bottom:32px;}
  .ci-item{padding:20px 0;gap:16px;}
  .ci-item-val{font-size:13px;}
  .ci-social-row{margin-top:32px;}

  /* FAQ */
  .faq-section{padding:52px 20px;}
  .faq-header{grid-template-columns:1fr;gap:16px;margin-bottom:36px;}
  .faq-title{font-size:clamp(34px,9vw,52px);}
  .faq-subtitle{font-size:13px;}
  .faq-grid{grid-template-columns:1fr;}
  .faq-q-text{font-size:13px;}
  .faq-answer p{font-size:12px;}

  /* Footer */
  /* .footer-body{grid-template-columns:1fr;max-width:100%;gap:26px;padding:36px 20px 28px;}
  .footer-nav-cols{grid-template-columns:1fr 1fr;gap:18px;}
  .footer-divider{margin:0 20px;max-width:calc(100% - 40px);}
  .footer-bar{flex-direction:column;gap:6px;text-align:center;max-width:100%;padding:12px 20px 16px;} */
}

/* ══════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤480px)
══════════════════════════════ */
@media(max-width:480px){
  .contact-hero{height:55vh;min-height:320px;}
  .contact-hero h1{font-size:clamp(34px,12vw,56px);}
  .contact-hero-content{padding:0 16px 48px;}
  .contact-form-panel,.contact-info-panel{padding:40px 16px 44px;}
  .cf-title{font-size:clamp(30px,10vw,44px);}
  .cf-field gap:6px;}
  .contact-card{padding:22px 16px;}
  .faq-section{padding:44px 16px;}
  .faq-question{padding:18px 16px;}
  .faq-answer{padding:0 16px;}
  .faq-item.open .faq-answer{padding:0 16px 18px;}
  /* .footer-body{padding:32px 16px 24px;}
  .footer-nav-cols{grid-template-columns:1fr;}
  .footer-bar{padding:10px 16px 14px;} */
}

/* ══════════════════════════════
   RESPONSIVE — EXTRA SMALL (≤360px)
══════════════════════════════ */
@media(max-width:360px){
  /* .nav-cta{display:none;} */
  .contact-hero h1{font-size:clamp(28px,13vw,44px);}
  .cf-title{font-size:clamp(26px,11vw,38px);}
  .ci-title{font-size:clamp(26px,10vw,36px);}
}
/* contact-page-end */
@media only screen and (min-width: 375px) and (max-width: 430px) {
    nav {
        padding: 14px 10px;
    }
}