/* ==========================================================================
   RetroFragra — Sovereign Indian Fragrance & Global Export Design System
   Color Palette: Warm Mysore Sandalwood Silk, Imperial Emerald, Sovereign Antique Gold, Deep Roasted Umber
   Target Audience: Global Distributors, Institutional Importers, Investors
   ========================================================================== */

:root {
  /* Pristine Luxury Alabaster & Warm Porcelain Canvas */
  --bg-main:           #FDFBF7;          /* Pristine Alabaster Canvas (Ultra-clean, crisp) */
  --bg-alt:            #F4F0E8;          /* Refined Soft Sandstone for alternate sections */
  --bg-surface:        #FFFFFF;          /* Pure Crisp White Card Surface */
  --bg-surface-glass:  rgba(255, 255, 255, 0.95);
  --bg-ivory:          #ECE7DC;          /* Subtle Soft Ivory */

  /* Sovereign & Imperial Brand Accents */
  --emerald:           #0A4A38;          /* Imperial Forest Emerald */
  --emerald-deep:      #063024;          /* Deep Forest Institutional Tone */
  --emerald-light:     #126850;          /* Vibrant Emerald */
  --emerald-glow:      #10B981;          /* Active Glow Emerald */
  --emerald-dark:      #041D16;          /* Darkest Malabar Forest */

  /* Royal Artisan Gold & Bronze */
  --gold:              #B8860B;          /* Refined Temple Gold */
  --gold-deep:         #8C6210;          /* Deep Imperial Burnished Gold */
  --gold-light:        #D4AF37;          /* Bright Warm Saffron Gold */
  --gold-pale:         #FBF6EB;          /* Soft Warm Gold Tint */
  --champagne:         #9E7220;          /* Warm Champagne Bronze */

  /* High-Contrast Corporate Typography */
  --text-main:         #151817;          /* Deep Obsidian Slate */
  --text-body:         #3E4643;          /* Refined Slate Body */
  --text-muted:        #6E7874;          /* Warm Sandalwood Slate */
  --text-light:        #8E9693;          /* Subtle Captions */

  /* Aliased Design System Variables for Universal Compatibility */
  --ash:               #0E1714;          /* Deep Forest Footer & Topbar */
  --ash-2:             #14241F;          /* Deep Forest Shade 2 */
  --parchment:         #151817;          /* Deep Slate Text */
  --parchment-2:       #3E4643;          /* Rich Body Text */
  --ember-gold:        #B8860B;          /* Royal Gold */
  --rust:              #A34828;          /* Terracotta Spice */
  --maroon:            #83261E;          /* Deep Wine Accent */
  --smoke:             #6E7874;          /* Slate Muted */
  --ink:               #FDFBF7;          /* Warm Main Background */
  --ink-2:             #F4F0E8;          /* Warm Secondary Background */

  --charcoal:          #FFFFFF;
  --charcoal-2:        #F8F6F0;
  --surface-glass:     rgba(255, 255, 255, 0.95);
  --surface-card:      #FFFFFF;

  --cream:             #151817;
  --cream-soft:        #3E4643;
  --muted:             #6E7874;
  --muted-dark:        #4E5854;

  --light-bg:          #FDFBF7;
  --light-bg-alt:      #F4F0E8;
  --light-surface:     #FFFFFF;
  --light-card:        #FFFFFF;
  --light-text:        #151817;
  --light-text-soft:   #3E4643;
  --light-text-muted:  #6E7874;
  --light-border:      rgba(0, 0, 0, 0.08);
  --light-border-gold: rgba(184, 134, 11, 0.28);
  --light-shadow:      0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  --light-shadow-hover:0 14px 38px rgba(0, 0, 0, 0.08), 0 0 16px rgba(184, 134, 11, 0.1);

  --line:              rgba(0, 0, 0, 0.08);
  --line-gold:         rgba(184, 134, 11, 0.28);
  --line-soft:         rgba(0, 0, 0, 0.04);
  --line-dark:         rgba(0, 0, 0, 0.14);

  /* Fragrance Family Color Accents */
  --accent-woody:      #B8860B;
  --accent-floral:     #A34828;
  --accent-sweet:      #C59B27;
  --accent-spicy:      #83261E;
  --accent-calming:    #0A5240;

  /* Typography Stack — Luxury Corporate Export Tier */
  --f-display:         'Cinzel', 'Playfair Display', "Cormorant Garamond", serif;
  --f-body:            'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono:            'IBM Plex Mono', monospace;

  /* Spacing Scale */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 5rem;
  --s-9: 7.5rem;

  /* Radii */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 22px;  --r-pill: 999px;

  /* Layout */
  --wrap: 1200px;
  --wrap-narrow: 880px;
  --header-h: 84px;
  --topbar-h: 36px;

  /* Easing & Durations */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 0.4s;
}

/* --------------------------------------------------------------- Reset --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--topbar-h) + 1.2rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-main);
  color: var(--text-body);
  font-family: var(--f-body);
  font-size: clamp(0.92rem, 0.89rem + 0.18vw, 1rem);
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.modal-open, body.nav-open {
  overflow: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: 0.025em;
  margin: 0 0 var(--s-4);
  color: var(--text-main);
}

h1 { font-size: clamp(2.2rem, 1.7rem + 3.2vw, 4.2rem); font-weight: 600; letter-spacing: 0.03em; }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem); font-weight: 600; letter-spacing: 0.025em; }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.65rem); font-weight: 600; letter-spacing: 0.02em; }
h4 { font-family: var(--f-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

p { margin: 0 0 var(--s-4); }

.mono {
  font-family: var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

::selection { background: rgba(184, 134, 11, 0.25); color: #1C140F; }

:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------- Scrollbar --- */

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--bg-ivory), var(--gold-deep));
  border-radius: var(--r-pill);
}

/* -------------------------------------------------- Top Announcement Bar --- */

.topbar {
  background: linear-gradient(90deg, #06261E 0%, #0A4335 50%, #06261E 100%);
  border-bottom: 1px solid rgba(184, 134, 11, 0.28);
  font-size: 0.78rem;
  color: #F1ECE1;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 105;
}

.topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.topbar__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #FAF6EE;
  font-weight: 400;
}

.topbar__badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--gold-light);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold-light);
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #F1ECE1;
  transition: color 0.3s var(--ease);
}

.topbar__link:hover { color: var(--gold-light); }

.topbar__wa {
  color: #25D366;
  font-weight: 500;
}
.topbar__wa:hover { color: #55ec8d; }

/* -------------------------------------------------- Scroll Progress Bar --- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 120;
}

.scroll-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--emerald), var(--gold), var(--emerald-light));
  box-shadow: 0 0 8px rgba(10, 82, 64, 0.4);
  transition: width 0.1s ease-out;
}

/* ------------------------------------------------------------- Layout --- */

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

.section { padding-block: clamp(4rem, 2rem + 7vw, 7.5rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 2rem + 3.5vw, 4.5rem); }

/* -------------------------------------------------------- Warm Sandalwood Sections --- */

.section--light {
  background: var(--bg-main) !important;
  color: var(--text-body) !important;
  border-block: 1px solid var(--line);
  position: relative;
}
.section--light.section--ivory {
  background: var(--bg-alt) !important;
}

.section--light h1,
.section--light h2,
.section--light h3,
.section--light h4 {
  color: var(--text-main) !important;
}
.section--light .emerald-text {
  background: linear-gradient(135deg, #06382B 0%, #0A5240 50%, #12745B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #06382B;
}
.section--light .lead {
  color: var(--text-body) !important;
}
.section--light p {
  color: var(--text-body) !important;
}
.section--light li {
  color: var(--text-body) !important;
}
.section--light .eyebrow {
  color: var(--gold-deep) !important;
  font-weight: 600;
}
.section--light .eyebrow::before {
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.section--light .eyebrow::after {
  background: linear-gradient(90deg, var(--gold-deep), transparent);
}
.section--light .link-arrow {
  color: var(--emerald) !important;
  font-weight: 600;
}
.section--light .link-arrow:hover {
  color: var(--emerald-deep) !important;
}
.section--light .ornament {
  filter: invert(0.25) sepia(0.8) hue-rotate(110deg) brightness(0.6);
}

/* Warm Sandalwood Product Cards */
.section--light .tile {
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--light-shadow);
  opacity: 1 !important;
  transform: none;
}
.section--light .tile:hover {
  border-color: var(--line-gold) !important;
  box-shadow: var(--light-shadow-hover);
  transform: translateY(-5px);
}
.section--light .tile__title {
  color: var(--text-main) !important;
}
.section--light .tile__title:hover {
  color: var(--emerald) !important;
}
.section--light .tile__notes {
  color: var(--text-muted) !important;
}
.section--light .tile__type-pill {
  background: #082820;
  color: #FAF6EE;
  font-weight: 500;
}
.section--light .tile__burn {
  color: var(--text-muted) !important;
}
.section--light .btn--details {
  border-color: var(--line);
  color: var(--text-body);
  background: var(--bg-alt);
}
.section--light .btn--details:hover {
  background: var(--emerald);
  color: #FAF6EE;
}

/* Warm Sandalwood Search Box */
.section--light .search-box {
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--light-shadow);
}
.section--light .search-box input {
  color: var(--text-main) !important;
}
.section--light .search-box input::placeholder {
  color: var(--text-muted) !important;
}
.section--light .search-box svg {
  color: var(--text-muted) !important;
}

/* Warm Sandalwood Pillars & Values */
.section--light .pillar,
.section--light .value,
.section--light .mv-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--light-shadow);
}
.section--light .pillar:hover,
.section--light .value:hover,
.section--light .mv-card:hover {
  border-color: rgba(184, 134, 11, 0.45) !important;
  box-shadow: var(--light-shadow-hover);
  transform: translateY(-4px);
}
.section--light .pillar__n,
.section--light .value__n {
  color: #B8860B !important;
  font-weight: 700;
  opacity: 0.85;
}
.section--light .pillar h3,
.section--light .value h3,
.section--light .mv-card h3 {
  color: var(--emerald-deep) !important;
}
.section--light .pillar p,
.section--light .value p,
.section--light .mv-card p {
  color: var(--text-body) !important;
}
.section--light .pillar__detail {
  border-top-color: var(--line) !important;
  color: var(--text-muted) !important;
}

/* Warm Sandalwood FAQs */
.section--light .faq__item {
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--light-shadow);
}
.section--light .faq__q {
  color: var(--text-main) !important;
}
.section--light .faq__q:hover {
  color: var(--emerald) !important;
}
.section--light .faq__a {
  color: var(--text-body) !important;
  border-top: 1px solid var(--line);
}
.section--light .faq__a p {
  color: var(--text-body) !important;
}

/* Warm Sandalwood Policy Prose & Spec Cards & Tables */
.section--light .policy-prose,
.section--light .spec-card,
.section--light .contact-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--light-shadow);
  color: var(--text-body) !important;
}
.section--light .spec-card h2,
.section--light .spec-card h3,
.section--light .spec-card h4,
.section--light .contact-card h2,
.section--light .contact-card h3 {
  color: var(--text-main) !important;
}
.section--light .spec-card p,
.section--light .spec-card li,
.section--light .spec-card dd,
.section--light .contact-card p,
.section--light address {
  color: var(--text-body) !important;
}
.section--light .spec-card dt {
  color: var(--gold-deep) !important;
  font-weight: 600;
}
.section--light table {
  color: var(--text-body) !important;
}
.section--light table thead tr {
  border-bottom: 2px solid var(--line) !important;
  background: rgba(10, 82, 64, 0.05);
}
.section--light table th {
  color: var(--text-main) !important;
  font-weight: 600;
}
.section--light table td {
  color: var(--text-body) !important;
  border-bottom: 1px solid var(--line) !important;
}
.section--light table strong {
  color: var(--text-main) !important;
}

/* Warm Sandalwood Form & Fields */
.section--light .field label {
  color: var(--text-main) !important;
  font-weight: 500;
}
.section--light .field input,
.section--light .field select,
.section--light .field textarea {
  background: var(--bg-surface) !important;
  border: 1px solid rgba(140, 98, 16, 0.22) !important;
  color: var(--text-main) !important;
}
.section--light .field input:focus,
.section--light .field select:focus,
.section--light .field textarea:focus {
  background: var(--bg-surface) !important;
  border-color: var(--emerald) !important;
  box-shadow: 0 0 0 3px rgba(10, 82, 64, 0.16);
  outline: none;
}
.section--light .field input::placeholder,
.section--light .field textarea::placeholder {
  color: var(--text-muted) !important;
}

/* Warm Sandalwood Certifications & Career Cards */
.section--light .cert {
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--light-shadow);
}
.section--light .cert b {
  color: var(--emerald) !important;
}
.section--light .cert span {
  color: var(--text-muted) !important;
}

.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------- Eyebrows --- */

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--s-4);
}
.eyebrow::before {
  content: ""; width: 28px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.center .eyebrow::after {
  content: ""; width: 28px; height: 1.5px;
  background: linear-gradient(90deg, var(--gold-deep), transparent);
}

.eyebrow--gold {
  color: var(--gold);
}
.eyebrow--gold::before {
  background: linear-gradient(90deg, transparent, var(--gold));
}
.center .eyebrow--gold::after {
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* Gradient text shimmer */
.emerald-text {
  background: linear-gradient(135deg, #0A4D3C 0%, #0D5C48 45%, #147D64 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #0A4D3C;
  animation: shimmer 10s ease-in-out infinite;
}

.gold-text {
  background: linear-gradient(135deg, #8F6516 0%, #B8860B 45%, #C59B27 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #8F6516;
}

.lead {
  font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.25rem);
  color: var(--text-body);
  max-width: 65ch;
  line-height: 1.8;
}
.center .lead { margin-inline: auto; }

.ornament { margin: var(--s-5) auto 0; opacity: 0.75; }

/* ------------------------------------------------------------ Buttons --- */

.btn {
  --btn-bg: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.64rem 1.5rem;
  border: 1.5px solid rgba(140, 98, 16, 0.3);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-main);
  cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: all 0.35s var(--ease);
  box-shadow: 0 2px 8px rgba(60, 45, 25, 0.06);
}

.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--gold-deep), var(--gold));
  transform: translateY(101%);
  transition: transform 0.35s var(--ease-out);
}

.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn:hover, .btn:focus-visible {
  color: #FAF6EE;
  border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(184, 134, 11, 0.25);
  transform: translateY(-2px);
}
.btn:active { transform: scale(0.98); }

.btn--solid {
  background: linear-gradient(135deg, #0A4535 0%, #062B21 100%);
  color: #FAF6EE;
  font-weight: 600;
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 4px 14px rgba(6, 43, 33, 0.22);
}
.btn--solid::after { background: linear-gradient(135deg, #106650, #0A4535); }
.btn--solid:hover, .btn--solid:focus-visible {
  color: #FAF6EE;
  border-color: var(--gold-light);
  box-shadow: 0 6px 20px rgba(10, 82, 64, 0.32);
}

.btn--gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #FAF6EE;
  font-weight: 600;
  border: 1px solid rgba(255, 242, 167, 0.3);
  box-shadow: 0 4px 14px rgba(184, 134, 11, 0.25);
}
.btn--gold::after { background: linear-gradient(135deg, var(--gold-light), var(--gold)); }
.btn--gold:hover { box-shadow: 0 6px 20px rgba(184, 134, 11, 0.35); color: #FAF6EE; }

.btn--wa {
  background: linear-gradient(135deg, #1D8F48 0%, #0E6038 100%);
  color: #FFFFFF;
  border: 1px solid rgba(37, 211, 102, 0.25);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(29, 143, 72, 0.25);
}
.btn--wa::after { background: #08482A; }
.btn--wa:hover {
  color: #FFFFFF;
  border-color: #25D366;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}

.btn--sm {
  padding: 0.45rem 1.1rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.center .btn-row { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--emerald);
  font-weight: 600;
  padding-bottom: 2px;
  position: relative;
  transition: color 0.3s var(--ease);
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 1.5px;
  background: currentColor;
  transition: width 0.35s var(--ease);
}
.link-arrow:hover { color: var(--gold-deep); }
.link-arrow:hover::after { width: 100%; }

/* ------------------------------------------------------------ Header --- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(244, 237, 228, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transition: all 0.35s var(--ease);
}

.header.is-stuck {
  background: #EFE6D6;
  border-bottom-color: rgba(140, 98, 16, 0.24);
  box-shadow: 0 4px 25px rgba(60, 45, 25, 0.08);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: transform 0.3s var(--ease);
}
.brand:hover { transform: scale(1.02); }

.brand img { 
  width: 68px; 
  height: 68px; 
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(10, 82, 64, 0.15)); 
}

.brand__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand__name {
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  display: block;
  line-height: 1.15;
  text-transform: uppercase;
}

.brand__tag,
.brand__tagline {
  font-size: 0.44rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: block;
  margin-top: 2px;
  font-family: var(--f-body);
  font-weight: 600;
  line-height: 1.2;
}

/* Footer brand sizing */
.footer .brand img {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}
.footer .brand__name {
  font-size: 0.95rem;
}
.footer .brand__tagline {
  font-size: 0.44rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav a {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-body);
  font-weight: 500;
  position: relative;
  padding-block: 0.4rem;
  transition: color 0.3s var(--ease);
}

.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px;
  background: linear-gradient(90deg, var(--emerald), var(--gold));
  border-radius: var(--r-pill);
  transition: width 0.3s var(--ease);
}

.nav a:hover, .nav a[aria-current="page"] {
  color: var(--emerald);
}
.nav a:hover::after, .nav a[aria-current="page"]::after {
  width: 100%;
}

/* ---------------------------------------------------- Desktop Dropdown Menu --- */

.nav__dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav__link--dropdown {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.nav__dropdown-arrow {
  transition: transform 0.3s var(--ease);
}

.nav__dropdown-wrap:hover .nav__dropdown-arrow,
.nav__dropdown-wrap:focus-within .nav__dropdown-arrow {
  transform: rotate(180deg);
}

.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 280px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-md);
  padding: 0.6rem 0.5rem;
  box-shadow: 0 16px 36px rgba(10, 45, 35, 0.18), 0 0 20px rgba(212, 175, 55, 0.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  z-index: 250;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav__dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.nav__dropdown-wrap:hover .nav__dropdown-menu,
.nav__dropdown-wrap:focus-within .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav__dropdown-item {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem !important;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: all 0.2s var(--ease);
  color: var(--text-main) !important;
}

.nav__dropdown-item::after {
  display: none !important;
}

.nav__dropdown-item:hover {
  background: rgba(15, 93, 78, 0.08);
  transform: translateX(3px);
}

.dropdown-item__icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.dropdown-item__info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.dropdown-item__title {
  font-family: var(--f-display);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--emerald-deep);
  letter-spacing: 0.04em;
  text-transform: none !important;
}

.dropdown-item__desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  text-transform: none !important;
  font-weight: 400;
}

.nav__dropdown-divider {
  height: 1px;
  background: var(--line);
  margin: 0.4rem 0.5rem;
}

.nav__dropdown-item--all {
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.25);
  margin-top: 0.2rem;
}

.nav__dropdown-item--all:hover {
  background: var(--emerald);
}

.nav__dropdown-item--all:hover .dropdown-item__title,
.nav__dropdown-item--all:hover .dropdown-item__desc {
  color: #FAF6EE !important;
}

/* ---------------------------------------------------- Mobile Drawer Dropdown --- */

.drawer__item--dropdown {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.drawer__dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer__dropdown-header a {
  border-bottom: 0 !important;
  flex: 1;
}

.drawer__dropdown-toggle {
  background: transparent;
  border: 0;
  color: var(--emerald);
  padding: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease);
}

.drawer__item--dropdown.is-open .drawer__dropdown-toggle svg {
  transform: rotate(180deg);
}

.drawer__subnav {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem 0.75rem 1rem;
}

.drawer__item--dropdown.is-open .drawer__subnav {
  display: flex;
}

.drawer__sublink {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-sans) !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  color: var(--text-body) !important;
  padding: 0.45rem 0.6rem !important;
  border-radius: var(--r-sm);
  border-bottom: 0 !important;
  background: rgba(15, 93, 78, 0.03);
}

.drawer__sublink:hover {
  background: rgba(15, 93, 78, 0.08);
  color: var(--emerald) !important;
}

.drawer__sublink--all {
  color: var(--emerald-deep) !important;
  font-weight: 600 !important;
  background: rgba(212, 175, 55, 0.1) !important;
  margin-top: 0.2rem;
}

.header .btn { display: inline-flex; }

.burger {
  display: none;
  background: rgba(10, 74, 56, 0.08);
  border: 1px solid rgba(10, 74, 56, 0.24);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 8px;
  width: 44px;
  height: 44px;
  position: relative;
  flex-shrink: 0;
  z-index: 105;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.25s var(--ease);
}
.burger:hover, .burger:focus-visible {
  background: rgba(10, 74, 56, 0.16);
  border-color: var(--emerald);
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--emerald);
  margin: 4.5px auto;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), background-color 0.3s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile Drawer & Scrim */
.scrim {
  position: fixed; inset: 0; 
  background: rgba(10, 35, 25, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 998;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; 
  width: min(340px, 86vw);
  height: 100vh; height: 100dvh;
  background: var(--bg-surface);
  border-left: 1px solid var(--line);
  padding: 1.25rem 1.5rem 2rem;
  display: flex; flex-direction: column;
  z-index: 999;
  transform: translateX(105%);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -15px 0 45px rgba(10, 45, 35, 0.2);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.drawer.is-open { transform: translateX(0); }

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.25rem;
}
.drawer__header .brand {
  gap: 0.65rem;
}
.drawer__header .brand img {
  width: 52px;
  height: 52px;
}
.drawer__header .brand__name {
  font-size: 0.88rem;
  letter-spacing: 0.06em;
}
.drawer__header .brand__tagline {
  font-size: 0.40rem;
  letter-spacing: 0.10em;
}

.drawer__close {
  background: rgba(10, 74, 56, 0.05);
  border: 1px solid rgba(10, 74, 56, 0.12);
  color: var(--text-main);
  font-size: 1.6rem;
  line-height: 1;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.drawer__close:hover {
  background: var(--emerald);
  color: #FFFFFF;
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.drawer__nav a {
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-main);
  padding: 0.75rem 0.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: var(--r-xs);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  transition: all 0.2s var(--ease);
}
.drawer__nav a:hover,
.drawer__nav a[aria-current="page"] {
  color: var(--emerald);
  background: rgba(10, 74, 56, 0.05);
  border-bottom-color: var(--gold);
}

.drawer__actions {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.drawer__info {
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.drawer__info a {
  color: var(--emerald);
  font-weight: 600;
}

/* Prevent body scroll when drawer is open */
html.nav-open, body.nav-open {
  overflow: hidden !important;
  touch-action: none;
}

/* ------------------------------------------------------------- Preloader --- */

#preloader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg-main);
  display: grid; place-content: center; justify-items: center;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s var(--ease-out);
}
#preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader__mark {
  width: 64px; height: 64px;
  animation: floatSoft 2.5s ease-in-out infinite;
  filter: drop-shadow(0 4px 16px rgba(10, 82, 64, 0.25));
}
.preloader__bar {
  width: 140px; height: 3px;
  background: rgba(140, 98, 16, 0.18);
  margin-top: 1.5rem;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.preloader__bar span {
  display: block; width: 40%; height: 100%;
  background: linear-gradient(90deg, var(--emerald), var(--gold));
  border-radius: var(--r-pill);
  animation: loadSweep 1.4s ease-in-out infinite;
}

/* -------------------------------------------------------------- Hero --- */

.hero {
  min-height: calc(100vh - var(--header-h) - var(--topbar-h));
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: 5.5rem;
  background: #140E0A;
}

.hero__bg {
  position: absolute; inset: -4%;
  z-index: 0;
  will-change: transform;
}

.hero__slides, .hero__slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero__slide {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: brightness(0.96) saturate(1.22) contrast(1.05);
  opacity: 0.94;
  transform: scale(1);
  transition: transform 5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
}
.hero__slide.is-active img {
  transform: scale(1.05);
}

.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(16, 11, 8, 0.86) 0%, rgba(16, 11, 8, 0.62) 46%, rgba(16, 11, 8, 0.22) 76%, rgba(16, 11, 8, 0.45) 100%),
    linear-gradient(180deg, rgba(16, 11, 8, 0.35) 0%, transparent 40%, rgba(16, 11, 8, 0.78) 100%);
  pointer-events: none;
}

.hero__dots {
  position: absolute; bottom: 2.5rem; right: 2.5rem; z-index: 6;
  display: flex; gap: 0.75rem;
}
.hero__dots button {
  width: 30px; height: 5px;
  background: rgba(250, 246, 238, 0.35);
  border: 0; cursor: pointer; padding: 0;
  border-radius: var(--r-pill);
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero__dots button:hover {
  background: rgba(212, 175, 55, 0.7);
  transform: scaleY(1.3);
}
.hero__dots button[aria-selected="true"] {
  background: var(--gold-light);
  width: 52px;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.75);
}

.hero__content {
  position: relative; z-index: 5;
  max-width: 820px;
}

/* ------------------------------------ Live Incense Stick & Smoke Plumes --- */

.hero__incense-stage {
  position: absolute;
  right: clamp(1.5rem, 5vw, 7.5rem);
  bottom: 3.5rem;
  width: 320px;
  height: 580px;
  z-index: 4;
  pointer-events: none;
  opacity: 0.82;
  transition: opacity 0.4s ease;
}

.hero__smoke-canvas {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.75;
}

.incense-stick-assembly {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 320px;
  z-index: 2;
}

/* Antique Brass Burner Stand */
.incense-burner-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.incense-brass-stand {
  width: 70px;
  height: 14px;
  background: linear-gradient(90deg, #5C4018 0%, #D4AF37 35%, #FFF2A7 50%, #B8860B 75%, #4A3210 100%);
  border-radius: 4px 4px 8px 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.incense-brass-dish {
  width: 95px;
  height: 6px;
  background: linear-gradient(90deg, #4A3210 0%, #D4AF37 40%, #B8860B 80%, #3A260C 100%);
  border-radius: 50%;
  margin-top: -2px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6);
}

/* Slender Agarbatti Incense Rod */
.incense-stick-rod {
  position: absolute;
  bottom: 12px;
  left: 50%;
  width: 3.5px;
  height: 240px;
  background: linear-gradient(180deg, #4A3728 0%, #2E2117 50%, #1F150E 100%);
  transform-origin: bottom center;
  transform: rotate(-14deg);
  border-radius: 2px;
  box-shadow: -1px 0 3px rgba(0, 0, 0, 0.5), inset 0 0 1px rgba(255, 255, 255, 0.15);
}

.incense-bamboo-core {
  position: absolute;
  bottom: 4px;
  left: calc(50% - 1px);
  width: 2px;
  height: 25px;
  background: #C49A45;
  transform-origin: bottom center;
  transform: rotate(-14deg);
  border-radius: 1px;
}

/* Pulsating Burning Ember at the Tip */
.incense-ember {
  position: absolute;
  top: 75px;
  left: calc(50% + 56px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0%, #FFF2A7 20%, #FF8C00 55%, #FF2200 85%, #6B0800 100%);
  box-shadow: 0 0 10px #FFA500, 0 0 20px #FF4500, 0 0 30px rgba(255, 69, 0, 0.85);
  animation: emberPulse 1.8s ease-in-out infinite;
  z-index: 10;
}

.incense-ember__glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 0, 0.6) 0%, rgba(255, 34, 0, 0.2) 60%, transparent 100%);
  pointer-events: none;
}

.incense-spark {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #FFE885;
  box-shadow: 0 0 4px #FFA500;
  pointer-events: none;
}
.incense-spark--1 { animation: sparkRise1 2.4s ease-out infinite; }
.incense-spark--2 { animation: sparkRise2 3.1s ease-out 1.2s infinite; }

/* Multi-layered Ethereal CSS Smoke Stream */
.incense-smoke-plumes {
  position: absolute;
  top: 75px;
  left: calc(50% + 56px);
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 1;
}

.smoke-ribbon {
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(12px);
  will-change: transform, opacity;
}

.smoke-ribbon--1 {
  width: 32px;
  height: 120px;
  background: radial-gradient(ellipse at center, rgba(250, 246, 238, 0.65) 0%, rgba(230, 220, 200, 0.35) 45%, transparent 70%);
  animation: smokeRibbon1 4.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.smoke-ribbon--2 {
  width: 40px;
  height: 140px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.55) 0%, rgba(212, 175, 55, 0.2) 40%, transparent 70%);
  animation: smokeRibbon2 6.2s cubic-bezier(0.4, 0, 0.2, 1) 1.5s infinite;
}

.smoke-ribbon--3 {
  width: 36px;
  height: 130px;
  background: radial-gradient(ellipse at center, rgba(244, 237, 228, 0.6) 0%, rgba(200, 190, 175, 0.3) 50%, transparent 75%);
  animation: smokeRibbon3 5.4s cubic-bezier(0.4, 0, 0.2, 1) 2.8s infinite;
}

@media (max-width: 900px) {
  .hero__incense-stage {
    opacity: 0.65;
    transform: scale(0.75);
    right: 0.5rem;
    bottom: 1rem;
  }
}

.hero .eyebrow {
  color: #D4AF37;
  letter-spacing: 0.22em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  display: inline-block;
  margin-bottom: 0.75rem;
}

.hero__headline {
  color: #FAF6EE !important;
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 2rem + 2vw, 3.8rem);
  line-height: 1.15;
  margin-bottom: 1.25rem;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}

.hero .lead {
  color: #E6E1D8 !important;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
  line-height: 1.75;
  margin-bottom: 2.2rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  max-width: 740px;
}

.btn--hero-alt {
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(212, 175, 55, 0.65);
  color: #FAF6EE;
  backdrop-filter: blur(8px);
}
.btn--hero-alt:hover {
  background: var(--gold);
  color: #1C140F;
  border-color: var(--gold);
  box-shadow: 0 4px 20px rgba(184, 134, 11, 0.4);
}

.scroll-cue {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-size: 0.65rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(250, 246, 238, 0.7);
}
.scroll-cue i {
  width: 1.5px; height: 32px; background: var(--gold-light);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
  animation: cueDrop 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@media (max-width: 768px) {
  .scroll-cue { display: none; }
}

/* Page Hero Header */
.page-hero {
  padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem) 2rem;
  position: relative;
  background: radial-gradient(ellipse at 50% 0%, rgba(184, 134, 11, 0.12) 0%, transparent 70%), var(--bg-alt);
  border-bottom: 1px solid var(--line);
}

.page-hero--compact {
  padding-block: clamp(1.75rem, 1.25rem + 1.2vw, 2.5rem) 1.25rem;
}
.page-hero--compact h1 {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  margin-bottom: 0.4rem;
}
.page-hero--compact .lead {
  font-size: 0.92rem;
  max-width: 65ch;
  margin-inline: auto;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
.page-hero--compact .eyebrow {
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
}
.page-hero--compact .ornament {
  margin-top: 0.4rem;
  max-width: 160px;
  height: auto;
}

/* Immersive Products Page Hero with 4-Category Background Slideshow */
.page-hero--products {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 4rem + 6vw, 8rem) clamp(4rem, 3.5rem + 5vw, 6.5rem);
  background: #08241C;
  border-bottom: 2px solid var(--gold);
  color: #FAF6EE;
  min-height: 480px;
  display: flex;
  align-items: center;
  text-align: center;
}

.page-hero--products .page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero--products .hero__slides,
.page-hero--products .hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.page-hero--products .hero__slide {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
}

.page-hero--products .hero__slide.is-active {
  opacity: 1;
}

.page-hero--products .hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.92) saturate(1.2) contrast(1.08);
  transform: scale(1);
  transition: transform 5s cubic-bezier(0.25, 1, 0.5, 1);
}

.page-hero--products .hero__slide.is-active img {
  transform: scale(1.06);
}

.page-hero--products .page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: 
    linear-gradient(180deg, rgba(6, 26, 20, 0.6) 0%, rgba(6, 26, 20, 0.38) 45%, rgba(6, 26, 20, 0.75) 100%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.1) 0%, rgba(6, 26, 20, 0.55) 100%);
  pointer-events: none;
}

.page-hero--products .hero__dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 0.65rem;
}

.page-hero--products .hero__dots button {
  width: 32px;
  height: 5px;
  background: rgba(255, 255, 255, 0.45);
  border: 0;
  cursor: pointer;
  padding: 0;
  border-radius: var(--r-pill);
  transition: all 0.35s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.page-hero--products .hero__dots button:hover {
  background: rgba(212, 175, 55, 0.9);
}

.page-hero--products .hero__dots button[aria-selected="true"] {
  background: var(--gold);
  width: 54px;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.95);
}

.page-hero--products .wrap {
  position: relative;
  z-index: 5;
  width: 100%;
}

.page-hero--products .hero__content {
  max-width: 900px;
  margin-inline: auto;
}

.page-hero--products .eyebrow {
  color: var(--gold-light) !important;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  margin-bottom: 0.75rem;
}

.page-hero--products h1 {
  color: #FFFFFF !important;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.2;
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.9);
  margin-bottom: 1rem;
}

.page-hero--products .lead {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: clamp(0.98rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
  max-width: 72ch;
  margin-inline: auto;
  margin-bottom: 0.75rem;
}

/* ---------------------------------------------------- 4 Core Categories Tabs & Slider --- */

.slider-head-controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.slider-nav-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.slider-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1.5px solid var(--line-gold);
  color: var(--emerald);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(28, 20, 15, 0.08);
  transition: all 0.3s var(--ease);
}

.slider-nav-btn:hover {
  background: var(--emerald);
  color: #FAF6EE;
  border-color: var(--emerald);
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 22px rgba(10, 82, 64, 0.3);
}

.slider-nav-btn:active {
  transform: translateY(0) scale(0.96);
}

.slider-nav-btn:disabled,
.slider-nav-btn.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
  box-shadow: none;
}

/* 4 Core Category Tabs */
.home-cat-tabs {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}

.home-cat-tab {
  background: var(--bg-surface);
  border: 1.5px solid var(--line);
  color: var(--text-main);
  padding: 0.55rem 1.2rem;
  border-radius: var(--r-pill);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.25s var(--ease);
  user-select: none;
}

.home-cat-tab:hover {
  border-color: var(--emerald);
  background: rgba(15, 93, 78, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 82, 64, 0.12);
}

.home-cat-tab.is-active {
  background: var(--emerald);
  color: #FAF6EE;
  border-color: var(--emerald);
  box-shadow: 0 6px 20px rgba(10, 82, 64, 0.3);
  transform: translateY(-2px);
}

.cat-tab-symbol {
  font-size: 1rem;
  line-height: 1;
}

/* Product Horizontal Carousel Track */
.product-slider-wrapper {
  position: relative;
  width: 100%;
}

/* Floating Left and Right End Buttons */
.slider-edge-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1.5px solid var(--line-gold);
  color: var(--emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(28, 20, 15, 0.22);
  pointer-events: auto;
  transition: all 0.3s var(--ease);
}

.slider-edge-btn--prev {
  left: -24px;
}

.slider-edge-btn--next {
  right: -24px;
}

@media (max-width: 1024px) {
  .slider-edge-btn--prev { left: 4px; width: 46px; height: 46px; }
  .slider-edge-btn--next { right: 4px; width: 46px; height: 46px; }
}

@media (max-width: 600px) {
  .slider-edge-btn--prev { left: 2px; width: 42px; height: 42px; }
  .slider-edge-btn--next { right: 2px; width: 42px; height: 42px; }
}

.slider-edge-btn:hover {
  background: var(--emerald);
  color: #FAF6EE;
  border-color: var(--emerald);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 14px 32px rgba(10, 82, 64, 0.35);
}

.slider-edge-btn:active {
  transform: translateY(-50%) scale(0.96);
}

.slider-edge-btn:disabled,
.slider-edge-btn.is-disabled {
  opacity: 0.25;
  cursor: not-allowed;
  transform: translateY(-50%);
  pointer-events: none;
  box-shadow: none;
}

.product-slider-track {
  display: flex;
  gap: 1.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.75rem 0.25rem 2rem 0.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  user-select: none;
  cursor: grab;
}

.product-slider-track::-webkit-scrollbar {
  display: none;
}

.product-slider-track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.product-slider-track .tile {
  flex: 0 0 310px;
  width: 310px;
  max-width: 310px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@media (max-width: 600px) {
  .product-slider-track .tile {
    flex: 0 0 280px;
    width: 280px;
    max-width: 280px;
  }
}

/* End-of-Carousel "View More Products" Card */
.tile--view-more {
  background: linear-gradient(145deg, #09382E 0%, #051F19 100%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  color: #FAF6EE !important;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 480px;
  box-shadow: 0 12px 30px rgba(9, 56, 46, 0.25);
  transition: all 0.4s var(--ease);
}

.tile--view-more:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--gold) !important;
  box-shadow: 0 24px 50px rgba(9, 56, 46, 0.45), 0 0 30px rgba(212, 175, 55, 0.25) !important;
}

.tile--view-more__body {
  padding: 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.view-more__emblem {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}

.tile--view-more:hover .view-more__emblem {
  transform: scale(1.12) rotate(45deg);
  background: var(--gold);
  color: #051F19;
}

.view-more__badge {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.6rem;
}

.view-more__title {
  font-family: 'Fraunces', serif;
  font-size: 1.45rem;
  color: #FAF6EE !important;
  margin: 0 0 0.75rem;
  line-height: 1.25;
}

.view-more__text {
  font-size: 0.85rem;
  color: rgba(250, 246, 238, 0.8) !important;
  line-height: 1.55;
  margin: 0 0 1.75rem;
}

.btn--view-more-cta {
  background: linear-gradient(135deg, var(--gold) 0%, #C59B27 100%);
  color: #051F19 !important;
  font-weight: 700;
  border: 0;
  border-radius: var(--r-pill);
  padding: 0.75rem 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
  transition: all 0.25s var(--ease);
}

.btn--view-more-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(212, 175, 55, 0.55);
  color: #000 !important;
}

/* Slider Footer, Dots & Action */
.slider-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.25rem;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.slider-swipe-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
}

.slider-swipe-hint svg {
  color: var(--gold-deep);
  animation: nudgeRight 2s infinite ease-in-out;
}

@keyframes nudgeRight {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

.slider-dots {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--line-gold);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.slider-dot:hover {
  background: var(--gold-deep);
  transform: scale(1.2);
}

.slider-dot.is-active {
  width: 26px;
  background: var(--emerald);
  box-shadow: 0 2px 8px rgba(10, 82, 64, 0.35);
}

.btn--slider-viewmore {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.25rem;
  font-size: 0.82rem;
  box-shadow: 0 4px 14px rgba(10, 82, 64, 0.2);
}

.btn--slider-viewmore:hover {
  box-shadow: 0 6px 20px rgba(10, 82, 64, 0.35);
}

/* ---------------------------------------------------- Dynamic Product Tiles --- */

.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  align-items: stretch;
}

/* Catalogue-only card tuning: keeps every card the same height and more
   compact so a large (30-40+) catalogue stays neatly aligned and doesn't
   turn into one very long page. Scoped to .grid-products only, so the
   homepage bestseller slider (.product-slider-track .tile) is unaffected. */
.grid-products .tile {
  height: 100%;
}

.grid-products .tile__body {
  padding: 1.15rem 1.25rem;
}

.grid-products .tile__meta {
  margin-bottom: 0.5rem;
}

.grid-products .tile__title {
  font-size: 1.08rem;
  margin-bottom: 0.35rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.grid-products .tile__notes {
  font-size: 0.82rem;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.catalog-load-more {
  display: flex;
  justify-content: center;
  margin-top: 2.75rem;
}

.tile {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 8px 24px rgba(28, 20, 15, 0.05);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}

.tile:hover {
  transform: translateY(-8px);
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 22px 48px rgba(10, 82, 64, 0.16), 0 0 0 1px rgba(212, 175, 55, 0.3);
}

.tile__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.tile__media.tile__media--portrait {
  aspect-ratio: 3 / 4;
}

.tile__media > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Light Glint Shine Sweep Animation on Image Hover */
.tile__media::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 3;
}

.tile:hover .tile__media::before {
  left: 180%;
  transition: left 0.85s var(--ease);
}

.tile__media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  transition: transform 0.65s var(--ease);
}

/* Keep portrait packaging fully visible in its taller image panel. */
.tile__media img.tile__product-image--portrait {
  object-fit: contain;
  object-position: center center;
}

.tile:hover .tile__media img {
  transform: scale(1.04);
}

.tile__overlay {
  position: absolute; inset: 0;
  background: rgba(10, 42, 33, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid; place-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
  z-index: 4;
}

.tile:hover .tile__overlay {
  opacity: 1;
  pointer-events: auto;
}

.btn--quickview {
  background: var(--bg-surface);
  border: 1.5px solid var(--emerald);
  color: var(--emerald);
  border-radius: var(--r-pill);
  padding: 0.6rem 1.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.45rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(28, 20, 15, 0.15);
  transform: translateY(8px);
  transition: all 0.3s var(--ease-spring);
}
.tile:hover .btn--quickview { transform: translateY(0); }
.btn--quickview:hover {
  background: var(--emerald);
  color: #FAF6EE;
  box-shadow: 0 6px 20px rgba(10, 82, 64, 0.35);
}

.tile__badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
}

.tile__type-pill {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  background: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.tile__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tile__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  font-size: 0.75rem;
}

.tile__family {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 500;
}
.tile__family-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}

.tile__burn {
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.74rem;
  font-weight: 500;
}

.tile__title {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.4rem;
  color: var(--text-main);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.tile__title:hover { color: var(--emerald); }

.tile__notes {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.55;
  flex: 1;
}

.tile__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-top: auto;
}

.btn--details {
  border-color: var(--line);
  color: var(--text-body);
  background: var(--bg-alt);
  font-weight: 500;
}
.btn--details:hover {
  border-color: var(--emerald);
  background: var(--emerald);
  color: #FAF6EE;
}

/* Fragrance Family Badges */
.badge--woody { background: rgba(184, 134, 11, 0.15); color: #8C6210; border: 1px solid rgba(184, 134, 11, 0.35); }
.badge--woody .tile__family-dot { background: #B8860B; }

.badge--floral { background: rgba(163, 72, 40, 0.15); color: #A34828; border: 1px solid rgba(163, 72, 40, 0.35); }
.badge--floral .tile__family-dot { background: #A34828; }

.badge--sweet { background: rgba(197, 155, 39, 0.15); color: #8C6210; border: 1px solid rgba(197, 155, 39, 0.35); }
.badge--sweet .tile__family-dot { background: #C59B27; }

.badge--spicy { background: rgba(131, 38, 30, 0.15); color: #83261E; border: 1px solid rgba(131, 38, 30, 0.35); }
.badge--spicy .tile__family-dot { background: #83261E; }

.badge--calming { background: rgba(10, 82, 64, 0.15); color: #0A5240; border: 1px solid rgba(10, 82, 64, 0.35); }
.badge--calming .tile__family-dot { background: #0A5240; }

.badge--default { background: rgba(10, 82, 64, 0.12); color: var(--emerald); border: 1px solid var(--line); }

/* ------------------------------------------- Catalogue Controls (Filter/Search) --- */

.catalogue-controls {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 1.5rem;
  margin-block: 2rem 1.5rem;
  box-shadow: var(--light-shadow);
}

.catalogue-controls__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 260px;
}

.search-box svg {
  position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}

.search-box input {
  width: 100%;
  padding: 0.85rem 2.8rem 0.85rem 3rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-main);
  font-size: 0.9rem;
  transition: all 0.3s var(--ease);
}
.search-box input:focus {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(10, 82, 64, 0.16);
  background: var(--bg-surface);
}

.search-box__clear {
  position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: var(--text-muted); cursor: pointer;
  padding: 0.3rem; font-size: 1.1rem; line-height: 1;
}
.search-box__clear:hover { color: var(--text-main); }

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-tab {
  padding: 0.6rem 1.2rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-body);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.filter-tab:hover {
  border-color: var(--emerald);
  color: var(--emerald);
}
.filter-tab.is-active {
  background: linear-gradient(135deg, var(--emerald), var(--emerald-deep));
  border-color: transparent;
  color: #FAF6EE;
  box-shadow: 0 3px 12px rgba(10, 82, 64, 0.3);
}

.catalogue-controls__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--text-muted);
}

.select-custom {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.45rem 1rem;
  color: var(--text-main);
  font-size: 0.82rem;
  cursor: pointer;
}

.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  background: var(--bg-surface);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}
.no-results__icon { font-size: 2.5rem; margin-bottom: 1rem; }
.btn--reset-filter { margin-top: 1.5rem; }

/* ------------------------------------------------- Quick-View Modal --- */

.modal-scrim {
  position: fixed; inset: 0; background: rgba(28, 20, 15, 0.65);
  backdrop-filter: blur(8px);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.modal-scrim.is-open { opacity: 1; pointer-events: auto; }

.modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 92vw);
  max-height: 90vh;
  background: var(--bg-surface);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 60px rgba(28, 20, 15, 0.25);
  z-index: 210;
  overflow-y: auto;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease-spring);
}
.modal.is-open {
  opacity: 1; pointer-events: auto;
  animation: modalIn 0.45s var(--ease-spring) forwards;
}

.modal__close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--text-main);
  font-size: 1.4rem;
  display: grid; place-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s var(--ease);
}
.modal__close:hover {
  background: var(--emerald);
  color: #FAF6EE;
  transform: rotate(90deg);
}

.modal__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
}

.modal__media {
  background: #FFFFFF;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal__media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  min-height: 340px;
}

.modal__content {
  padding: 2.5rem;
  display: flex; flex-direction: column;
}

.modal__category {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 0.4rem;
}

.modal__title {
  font-size: 2rem;
  line-height: 1.2;
  color: var(--text-main);
  margin-bottom: 1rem;
}

.modal__desc {
  font-size: 0.94rem;
  color: var(--text-body);
  margin-bottom: 1.5rem;
}

.modal__pyramid {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.modal__pyramid-row {
  display: flex; gap: 1rem;
  padding-block: 0.45rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.84rem;
}
.modal__pyramid-row:last-child { border-bottom: 0; }
.modal__pyramid-label {
  width: 90px; color: var(--gold-deep); font-weight: 600;
}
.modal__pyramid-val { color: var(--text-main); }

.modal__specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  font-size: 0.84rem; margin-bottom: 1.5rem;
}
.modal__specs strong { display: block; color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; }

.modal__packs {
  list-style: none; padding: 0; margin: 0 0 2rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.modal__packs li {
  font-size: 0.8rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.35rem 0.75rem;
  color: var(--text-body);
  font-weight: 500;
}
.modal__packs li span { color: var(--emerald); margin-right: 4px; font-weight: 600; }

.modal__actions {
  display: flex; gap: 1rem; margin-top: auto;
}

/* --------------------------------- Interactive Export Quote Calculator --- */

.calc-card {
  background: var(--bg-surface);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  box-shadow: var(--light-shadow);
}

.calc-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  margin-top: 2rem;
}

.calc-inputs {
  display: grid; gap: 1.25rem;
}

.calc-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.calc-field input, .calc-field select {
  width: 100%;
  padding: 0.85rem 1.25rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-main);
  font-size: 0.95rem;
  transition: all 0.3s var(--ease);
}
.calc-field input:focus, .calc-field select:focus {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(10, 82, 64, 0.16);
  background: var(--bg-surface);
}

.calc-output {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2rem;
  display: flex; flex-direction: column; justify-content: space-between;
}

.calc-summary {
  display: grid; gap: 1.25rem; margin-bottom: 2rem;
}

.calc-stat {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.calc-stat__label { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }
.calc-stat__val { font-family: var(--f-display); font-size: 1.8rem; color: var(--emerald); font-weight: 600; }

.calc-actions {
  display: flex; flex-direction: column; gap: 0.75rem;
}

/* -------------------------------------------- Back To Top Button --- */

.back-to-top {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  color: var(--text-main);
  display: grid;
  place-content: center;
  cursor: pointer;
  z-index: 130;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: all 0.35s var(--ease);
  box-shadow: 0 4px 16px rgba(28, 20, 15, 0.12);
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--emerald);
  color: #FAF6EE;
  border-color: var(--emerald);
  transform: translateY(-4px);
}

.back-to-top__svg {
  position: absolute; inset: 0;
  transform: rotate(-90deg);
}
.back-to-top__progress {
  fill: none;
  stroke: var(--emerald);
  stroke-width: 2.5;
  stroke-dasharray: 113.1;
  stroke-dashoffset: 113.1;
  transition: stroke-dashoffset 0.1s ease-out;
}

/* ------------------------------------------ Toast Notifications --- */

.toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.9rem 1.25rem;
  box-shadow: 0 10px 30px rgba(28, 20, 15, 0.18);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.88rem;
  color: var(--text-main);
  opacity: 0;
  transform: translateY(-16px) scale(0.95);
  transition: all 0.35s var(--ease-spring);
}
.toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast--success {
  border-color: var(--emerald);
}
.toast--success .toast__icon { color: var(--emerald); }

.toast__body { flex: 1; }
.toast__close {
  background: transparent; border: 0; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; padding: 0.2rem;
}
.toast__close:hover { color: var(--text-main); }

/* ---------------------------------------------------- FAQ Accordion --- */

.faq {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.faq__item {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--light-shadow);
  transition: border-color 0.3s var(--ease);
}
.faq__item:hover { border-color: var(--emerald); }

.faq__q {
  width: 100%;
  padding: 1.25rem 1.5rem;
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--text-main);
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.faq__q i {
  position: relative; width: 16px; height: 16px; flex-shrink: 0;
}
.faq__q i::before, .faq__q i::after {
  content: ""; position: absolute; background: var(--emerald);
  transition: transform 0.3s var(--ease);
}
.faq__q i::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq__q i::after  { top: 0; left: 7px; width: 2px; height: 16px; }

.faq__q[aria-expanded="true"] i::after { transform: rotate(90deg); opacity: 0; }

.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out);
}
.faq__a p {
  padding: 0 1.5rem 1.5rem;
  color: var(--text-body);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ------------------------------------------------------------- Pillars --- */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.pillar {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2.2rem;
  position: relative;
  box-shadow: var(--light-shadow);
  transition: all 0.35s var(--ease);
}
.pillar:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 134, 11, 0.45);
  box-shadow: var(--light-shadow-hover);
}

.pillar__n {
  font-family: var(--f-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gold);
  opacity: 0.8;
  margin-bottom: 0.75rem;
}

.pillar h3 {
  color: var(--emerald-deep);
}

.pillar p {
  color: var(--text-body);
}

.pillar__detail {
  font-size: 0.84rem; color: var(--text-muted); margin-top: 0.85rem; padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

/* ---------------------------------------------------- Mission & Vision --- */

.mv-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem;
}
.mv-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2.5rem;
  box-shadow: var(--light-shadow);
  transition: all 0.35s var(--ease);
}
.mv-card:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 134, 11, 0.45);
  box-shadow: var(--light-shadow-hover);
}
.mv-card h3 { color: var(--emerald-deep); }
.mv-card p { color: var(--text-body); }
.mv-card__icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(10, 82, 64, 0.1);
  border: 1px solid var(--line);
  display: grid; place-content: center;
  color: var(--emerald);
  margin-bottom: 1.25rem;
}
.mv-card__icon svg { width: 24px; height: 24px; stroke: currentColor; }

/* ----------------------------------------------------------- Values Grid --- */

.values-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem;
}
.value {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2.2rem;
  box-shadow: var(--light-shadow);
  transition: all 0.35s var(--ease);
}
.value:hover {
  transform: translateY(-6px);
  border-color: var(--emerald);
  box-shadow: var(--light-shadow-hover);
}
.value h3 { color: var(--emerald-deep); }
.value p { color: var(--text-body); }
.value__n {
  font-family: var(--f-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold);
  opacity: 0.85;
  margin-bottom: 0.5rem;
}

/* -------------------------------------------------------- Certifications --- */

.certs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem;
}
.cert {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1rem 1.75rem;
  text-align: center;
  min-width: 130px;
  box-shadow: var(--light-shadow);
  transition: all 0.3s var(--ease);
}
.cert:hover {
  border-color: var(--emerald);
  transform: translateY(-4px);
  box-shadow: var(--light-shadow-hover);
}
.cert b {
  display: block; font-size: 1.1rem; color: var(--emerald); font-family: var(--f-display); font-weight: 600;
}
.cert span {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}

.figure-framed img {
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(28, 20, 15, 0.14);
}

/* ------------------------------------------------------- Forms & Contact --- */

.form {
  display: grid; gap: 1.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 2.5rem;
  box-shadow: var(--light-shadow);
}

.field label {
  display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-main); margin-bottom: 0.5rem;
}

.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.85rem 1.25rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-main);
  font-size: 0.95rem;
  transition: all 0.3s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(10, 82, 64, 0.16);
  background: var(--bg-surface);
}

.field--consent {
  display: flex; align-items: flex-start; gap: 0.75rem;
}
.field--consent input { width: auto; margin-top: 0.25rem; }
.field--consent label { font-size: 0.84rem; text-transform: none; color: var(--text-muted); margin: 0; }

.form-status {
  padding: 1rem 1.25rem; border-radius: var(--r-md); font-size: 0.88rem;
}
.form-status--success {
  background: #F0FDF4; border: 1px solid var(--emerald); color: var(--emerald-deep);
}

.contact-grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem;
}

/* -------------------------------------------------------------- Split --- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.teaser-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
}

.teaser-media img {
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(28, 20, 15, 0.14);
  transition: transform 0.65s var(--ease), box-shadow 0.65s var(--ease), border-color 0.65s var(--ease);
}

.teaser-media:hover img {
  transform: scale(1.03);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 24px 50px rgba(10, 82, 64, 0.2);
}

/* ------------------------------------------------------------- Specs Grid --- */

.spec-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem;
}

.spec-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2.2rem;
  box-shadow: var(--light-shadow);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.spec-card:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 16px 36px rgba(10, 82, 64, 0.12);
}
.spec-card dl { margin: 0; display: grid; gap: 0.85rem; font-size: 0.85rem; }
.spec-card dt { color: var(--gold-deep); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.spec-card dd { margin: 0; color: var(--text-body); }

/* ------------------------------------------- Enterprise Trust Accreditation Strip --- */

.trust-strip {
  background: var(--bg-surface);
  border-block: 1px solid var(--line);
  padding-block: 1.75rem;
  box-shadow: 0 4px 20px rgba(28, 20, 15, 0.04);
}

.trust-strip__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 200px;
}

.trust-item__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: rgba(10, 82, 64, 0.1);
  border: 1px solid rgba(10, 82, 64, 0.22);
  display: grid;
  place-content: center;
  color: var(--emerald);
  flex-shrink: 0;
}

.trust-item__title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.25;
}

.trust-item__sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.3;
  margin-top: 2px;
}

/* ------------------------------------------------ Institutional Stat Cards --- */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2.2rem 1.75rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--light-shadow);
  transition: all 0.35s var(--ease);
}
.stat-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-gold);
  box-shadow: var(--light-shadow-hover);
}

.stat-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(184, 134, 11, 0.12);
  border: 1px solid rgba(184, 134, 11, 0.3);
  margin: 0 auto 1.2rem;
  display: grid;
  place-content: center;
  color: var(--gold-deep);
}

.stat-card__num {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.8rem + 1vw, 2.75rem);
  font-weight: 700;
  color: var(--emerald-deep);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.stat-card__label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.35rem;
}

.stat-card__sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}

/* --------------------------------------------- Global Seaport Corridors --- */

.corridor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.corridor-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 2.2rem;
  box-shadow: var(--light-shadow);
  transition: all 0.35s var(--ease);
  display: flex;
  flex-direction: column;
}
.corridor-card:hover {
  transform: translateY(-4px);
  border-color: var(--emerald);
  box-shadow: var(--light-shadow-hover);
}

.corridor-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.corridor-card__region {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--emerald-deep);
}

.corridor-card__tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-pill);
  background: rgba(10, 82, 64, 0.1);
  color: var(--emerald);
}

.corridor-ports {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.65rem;
}
.corridor-ports li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--text-body);
}
.corridor-ports li svg {
  color: var(--emerald);
  flex-shrink: 0;
}

/* --------------------------------------------- B2B Turnkey OEM / Private Label --- */

.oem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.oem-step {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2rem 1.5rem;
  position: relative;
  box-shadow: var(--light-shadow);
  transition: all 0.35s var(--ease);
}
.oem-step:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 134, 11, 0.4);
  box-shadow: var(--light-shadow-hover);
}

.oem-step__num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #FAF6EE;
  font-weight: 700;
  font-size: 0.95rem;
  display: grid;
  place-content: center;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.25);
}

.oem-step__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.oem-step__desc {
  font-size: 0.86rem;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0;
}

/* -------------------------------------------------------------- Footer --- */

.footer {
  background: #06231B;
  border-top: 1px solid rgba(184, 134, 11, 0.25);
  padding-block: 5rem 2.8rem;
  font-size: 0.92rem;
  color: #D6CEC3;
  position: relative;
  z-index: 10;
}

.footer__main,
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 3.5rem;
  align-items: start;
}

.footer__brand-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer__text {
  font-size: 0.9rem;
  line-height: 1.75;
  color: #E8E1D5;
  margin: 0;
  max-width: 44ch;
}

.footer__address {
  font-size: 0.86rem;
  line-height: 1.65;
  color: #D6CEC3;
  margin: 0;
}
.footer__address strong {
  color: #FAF6EE;
}

.footer__contact-line {
  font-size: 0.86rem;
  line-height: 1.7;
  color: #D6CEC3;
  margin: 0;
}
.footer__contact-line strong {
  color: #FAF6EE;
}
.footer__contact-line a {
  color: #FAF6EE;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__contact-line a:hover {
  color: var(--gold-light);
}

.footer__links-col h4,
.footer h4 {
  font-family: var(--f-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 1.2rem;
  font-weight: 600;
}

.footer__links-col ul,
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.footer__links-col ul a,
.footer ul a {
  color: #E2E8F0;
  font-size: 0.88rem;
  text-decoration: none;
  transition: all 0.25s var(--ease);
  display: inline-block;
}

.footer__links-col ul a:hover,
.footer ul a:hover {
  color: var(--gold-light);
  transform: translateX(4px);
}

.footer address { font-style: normal; line-height: 1.8; color: #E2E8F0; }
.footer address a { color: inherit; }
.footer address a:hover { color: var(--gold-light); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2.5rem;
  margin-top: 3.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.82rem;
  color: #94A3B8;
}

.socials { display: flex; gap: 1rem; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: grid; place-content: center;
  color: #FFFFFF;
  transition: all 0.3s var(--ease);
}
.socials a:hover {
  background: var(--gold); color: #082820;
  transform: translateY(-3px);
}
.socials svg { width: 16px; height: 16px; stroke: currentColor; }

/* ------------------------------------------------------- Media Queries --- */

/* ------------------------------------------------------- Media Queries --- */

@media (max-width: 1024px) {
  .footer__main, .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .split, .contact-grid, .calc-grid, .modal__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .modal__media img { min-height: 240px; max-height: 300px; }
  .trust-strip__grid { justify-content: center; }
  .cards-grid, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --header-h: 74px;
    --section-pad: 3.5rem;
  }

  /* Top Announcement Bar */
  .topbar {
    padding: 0.4rem 0.5rem;
  }
  .topbar__inner {
    justify-content: center;
    width: 100%;
  }
  .topbar__badge {
    text-align: center;
    width: 100%;
  }
  .topbar__badge span {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    line-height: 1.3;
  }
  .topbar__actions {
    display: none !important;
  }

  /* Header & Navigation */
  .header {
    height: var(--header-h);
  }
  .header__inner {
    width: 100%;
    padding: 0 1rem;
    gap: 0.5rem;
  }
  .brand {
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
  }
  .brand img {
    width: 54px;
    height: 54px;
  }
  .brand__text {
    min-width: 0;
    flex: 1;
  }
  .brand__name {
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand__tagline {
    font-size: 0.40rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-top: 1px;
  }

  .nav, .header > .btn, .header .btn--solid {
    display: none !important;
  }

  .burger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: auto;
  }

  /* Hero Section */
  .hero {
    min-height: auto;
    padding: 2.75rem 0 3.25rem;
  }
  .hero__inner, .hero__content {
    max-width: 100%;
    padding: 0;
  }
  .hero h1 {
    font-size: clamp(1.8rem, 6.5vw, 2.35rem);
    line-height: 1.18;
    margin-bottom: 0.85rem;
  }
  .hero .lead {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.35rem;
  }
  .hero .btn-row {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
    align-items: stretch;
  }
  .hero .btn-row .btn,
  .hero .btn-row a {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 0.85rem 1.25rem;
  }
  .hero__dots {
    bottom: 0.75rem;
    right: 50%;
    transform: translateX(50%);
  }

  /* Sections & Containers */
  .section {
    padding: 3rem 0;
  }
  .wrap {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }
  .page-hero {
    padding: 2.25rem 0 1.75rem;
  }
  .page-hero--compact {
    padding: 1.5rem 0 1.15rem;
  }
  .page-hero h1 {
    font-size: clamp(1.7rem, 6vw, 2.2rem);
  }
  .page-hero--compact h1 {
    font-size: clamp(1.4rem, 5vw, 1.85rem);
  }

  /* Split & Grids */
  .split, .split--rev {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  .grid--2, .grid--3, .grid--4, .product-grid, .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  .teaser-media img {
    max-height: 280px;
    width: 100%;
    object-fit: cover;
    margin-top: 1rem;
  }

  /* Product Cards & Tiles */
  .tile__actions, .product-card__actions {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .tile__actions .btn, .product-card__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Catalog Controls */
  .catalogue-controls__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  /* Forms */
  .contact-grid, .calc-grid, .form-grid {
    grid-template-columns: 1fr !important;
    gap: 1.75rem;
  }
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
    font-size: 16px !important;
    padding: 0.8rem 0.9rem;
    width: 100%;
    border-radius: var(--r-sm);
  }
  .form-actions, .form-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Tables */
  .table-wrap, .data-table-wrap, .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    width: 100%;
    border-radius: var(--r-sm);
  }

  /* QuickView Modal */
  .modal {
    padding: 1rem;
    align-items: flex-end;
  }
  .modal__inner {
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem 1.25rem;
    border-radius: 16px 16px 0 0;
  }
  .modal__grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }
  .modal__media img {
    max-height: 220px;
    width: 100%;
    object-fit: cover;
  }
  .modal__close {
    top: 0.75rem;
    right: 0.75rem;
    width: 38px;
    height: 38px;
    font-size: 1.5rem;
  }

  /* Footer */
  .footer__main, .footer__grid {
    grid-template-columns: 1fr !important;
    gap: 2.25rem;
  }
  .footer__brand-col .brand {
    gap: 0.65rem;
    margin-bottom: 0.75rem;
  }
  .footer__brand-col .brand img {
    width: 56px;
    height: 56px;
  }
  .footer__brand-col .brand__name {
    font-size: 0.88rem;
  }
  .footer__brand-col .brand__tagline {
    font-size: 0.40rem;
  }
  .footer__text, .footer__address, .footer__contact-line {
    max-width: 100%;
    font-size: 0.88rem;
  }
  .footer__bottom {
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
    padding-top: 1.75rem;
    margin-top: 2.25rem;
  }
  .back-to-top {
    bottom: 1.25rem;
    right: 1.25rem;
    left: auto;
  }
}

@media (max-width: 480px) {
  .brand img {
    width: 46px;
    height: 46px;
  }
  .brand__name {
    font-size: 0.80rem;
  }
  .brand__tagline {
    display: none; /* Hide long tagline on ultra-narrow phones for ultra-clean fit */
  }
  .hero h1 {
    font-size: 1.75rem;
  }
  .page-hero h1 {
    font-size: 1.75rem;
  }
  .btn-row {
    flex-direction: column;
    width: 100%;
  }
  .btn-row .btn, .btn-row a {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   DEDICATED PRODUCT DETAIL PAGE (PDP) STYLING
   ========================================================================== */

.pdp-breadcrumb-bar {
  padding: 1.25rem 0;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}

.pdp-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pdp-breadcrumbs a {
  color: var(--emerald);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.pdp-breadcrumbs a:hover {
  color: var(--gold-deep);
  text-decoration: underline;
}

.pdp-breadcrumbs span.sep {
  opacity: 0.5;
  font-size: 0.75rem;
}

.pdp-breadcrumbs span.current {
  color: var(--text-main);
  font-weight: 600;
}

/* Main Hero Showcase Layout */
.pdp-hero {
  padding: 3.5rem 0 4rem;
  background: var(--bg-main);
}

.pdp-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3.5rem;
  align-items: start;
}

@media (max-width: 960px) {
  .pdp-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Left Media Gallery */
.pdp-gallery {
  position: sticky;
  top: 90px;
}

@media (max-width: 960px) {
  .pdp-gallery {
    position: static;
  }
}

.pdp-image-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(10, 82, 64, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}

.pdp-image-wrap.pdp-image-wrap--portrait {
  aspect-ratio: 3 / 4;
}

.pdp-image-wrap img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  transition: transform 0.6s var(--ease);
}

.pdp-image-wrap img.pdp-main-image--portrait {
  object-fit: contain;
}

.pdp-image-wrap:hover img {
  transform: scale(1.03);
}

.pdp-badge-tag {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 2;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
}

.pdp-cat-pill {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  background: rgba(250, 246, 238, 0.94);
  color: var(--emerald-deep);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Trust Marks Under Image */
.pdp-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.pdp-trust-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-body);
}

.pdp-trust-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(10, 82, 64, 0.08);
  color: var(--emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Right Content Column */
.pdp-header {
  margin-bottom: 1.5rem;
}

.pdp-header__meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
}

.pdp-title {
  font-size: clamp(1.8rem, 1.6rem + 1vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.65rem;
}

.pdp-notes-summary {
  font-size: 1.05rem;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold-deep);
  margin-bottom: 1.25rem;
}

.pdp-desc {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--text-body);
  margin-bottom: 1.75rem;
}

/* Key Characteristics Badges */
.pdp-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  padding: 1.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 2rem;
}

.pdp-meta-cell strong {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.pdp-meta-cell span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
}

/* Fragrance Pyramid */
.pdp-pyramid-card {
  background: linear-gradient(135deg, rgba(250, 246, 238, 0.8) 0%, rgba(240, 232, 220, 0.4) 100%);
  border: 1px solid rgba(184, 134, 11, 0.28);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.pdp-pyramid-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  margin-bottom: 1.25rem;
}

.pdp-pyramid-layers {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.pdp-pyramid-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed rgba(184, 134, 11, 0.2);
}

.pdp-pyramid-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pdp-pyramid-tag {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--emerald-deep);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.pdp-pyramid-text {
  font-size: 0.92rem;
  color: var(--text-main);
  line-height: 1.5;
}

/* Packaging Formats Selector */
.pdp-packs-section {
  margin-bottom: 2rem;
}

.pdp-packs-title {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.pdp-pack-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.pdp-pack-pill {
  padding: 0.55rem 1rem;
  background: var(--bg-surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.25s ease;
}

.pdp-pack-pill:hover,
.pdp-pack-pill.is-active {
  border-color: var(--emerald);
  background: rgba(10, 82, 64, 0.06);
  color: var(--emerald-deep);
}

/* Action CTA Buttons */
.pdp-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.pdp-actions-row .btn {
  flex: 1 1 200px;
  padding: 0.9rem 1.6rem;
  font-size: 0.82rem;
}

/* Technical Specification Section */
.pdp-specs-section {
  padding: 4.5rem 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pdp-specs-table-wrap {
  margin-top: 2rem;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.pdp-specs-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
}

.pdp-specs-table th,
.pdp-specs-table td {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--line);
}

.pdp-specs-table th {
  background: rgba(10, 82, 64, 0.04);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  width: 32%;
}

.pdp-specs-table tr:last-child th,
.pdp-specs-table tr:last-child td {
  border-bottom: none;
}

/* Interactive Freight & Container Calculator */
.freight-calculator {
  margin-top: 3.5rem;
  background: linear-gradient(135deg, var(--bg-surface) 0%, rgba(250, 246, 238, 0.6) 100%);
  border: 1.5px solid rgba(184, 134, 11, 0.3);
  border-radius: var(--r-lg);
  padding: 2.25rem;
  box-shadow: 0 12px 36px rgba(10, 82, 64, 0.06);
}

.freight-calc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.freight-calc-title h3 {
  font-size: 1.25rem;
  color: var(--emerald-deep);
  margin-bottom: 0.25rem;
}

.freight-calc-title p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.calc-stepper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.calc-stepper button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--emerald);
  background: var(--bg-surface);
  color: var(--emerald);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.calc-stepper button:hover {
  background: var(--emerald);
  color: #FFF;
}

.calc-stepper input {
  width: 90px;
  height: 38px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  background: var(--bg-surface);
}

.freight-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.25rem;
}

.freight-result-card {
  padding: 1.25rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: center;
}

.freight-result-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.freight-result-val {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--emerald-deep);
  font-family: var(--font-mono);
}

/* RFQ Form Section */
.pdp-rfq-section {
  padding: 4.5rem 0;
  background: var(--bg-main);
}

.pdp-rfq-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
  padding: 2.75rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
  max-width: 860px;
  margin: 0 auto;
}

.rfq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (max-width: 680px) {
  .rfq-grid {
    grid-template-columns: 1fr;
  }
}

.rfq-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rfq-field label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-body);
}

.rfq-field input,
.rfq-field select,
.rfq-field textarea {
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-alt);
  font-size: 0.9rem;
  color: var(--text-main);
  transition: border-color 0.25s ease;
}

.rfq-field input:focus,
.rfq-field select:focus,
.rfq-field textarea:focus {
  outline: none;
  border-color: var(--emerald);
  background: var(--bg-surface);
}

/* Related Products Grid */
.pdp-related-section {
  padding: 4rem 0 5rem;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
}