/* =========================================================
   ELIXIR OF LIFE — REDESIGN STYLESHEET
   Design language: "Apothecary Label" — capsule shapes,
   dosage-tag typography, botanical-teal palette.
   ========================================================= */

:root{
  --ink:        #10262B;
  --navy:       #123A45;
  --navy-deep:  #0B242C;
  --teal:       #1E9E92;
  --teal-light: #59C7B9;
  --coral:      #FF6B47;
  --coral-deep: #E5522F;
  --sand:       #F3F6EF;
  --card:       #FFFFFF;
  --gold:       #E8B84B;
  --gold-deep:  #C9932E;
  --plum:       #6E4A72;
  --line:       #E1E8E0;
  --text-soft:  #4C5F5E;

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'Space Mono', 'Courier New', monospace;

  --radius-pill: 999px;
  --radius-lg: 28px;
  --shadow-soft: 0 20px 50px -20px rgba(16,38,43,0.25);
  --ease: cubic-bezier(.22,.9,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--sand);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--serif); margin:0; line-height:1.1; }
p{ margin:0 0 1em; color:var(--text-soft); line-height:1.75; }
button{ font-family:inherit; cursor:pointer; }

.container{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* ---------- reveal on scroll ---------- */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal="scale"]{ transform:translateY(0) scale(.94); }
[data-reveal="scale"].in-view{ transform:scale(1); }

/* ---------- eyebrow / label chip ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal);
  margin-bottom:14px;
}
.eyebrow::before{
  content:''; width:22px; height:2px; background:var(--coral); display:inline-block;
}
.eyebrow.gold{ color:var(--gold-deep); }
.eyebrow.gold::before{ background:var(--teal); }
.eyebrow.coral{ color:var(--coral-deep); }
.eyebrow.coral::before{ background:var(--gold); }
.section-heading{
  font-size:clamp(28px,4vw,42px);
  font-weight:600;
  color:var(--navy-deep);
  margin-bottom:18px;
}
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ font-size:16.5px; }

.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 30px;
  border-radius:var(--radius-pill);
  font-family:var(--sans); font-weight:600; font-size:14px;
  letter-spacing:.02em;
  border:none; cursor:pointer;
  overflow:hidden; isolation:isolate;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
/* diagonal wipe-fill that sweeps in from the left on hover */
.btn::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .5s var(--ease);
}
.btn:hover::before{ transform:scaleX(1); }

/* arrow glyph that glides out on hover — no markup needed, works on every .btn site-wide */
.btn::after{
  content:'\2192';
  display:inline-block;
  font-weight:700;
  max-width:0; opacity:0; transform:translateX(-6px);
  overflow:hidden;
  transition:max-width .45s var(--ease), opacity .35s var(--ease) .05s, transform .45s var(--ease);
}
.btn:hover::after{ max-width:20px; opacity:1; transform:translateX(0); }

.btn:active{ transform:scale(.96); }

/* click ripple (spawned by main.js) */
.btn .ripple{
  position:absolute; border-radius:50%; z-index:2;
  background:rgba(255,255,255,.55); pointer-events:none;
  transform:scale(0); animation:btnRipple .6s var(--ease) forwards;
}
@keyframes btnRipple{ to{ transform:scale(2.6); opacity:0; } }

.btn-coral{ background:var(--coral); color:#fff; box-shadow:0 14px 30px -10px rgba(255,107,71,.55); }
.btn-coral::before{ background:linear-gradient(135deg, var(--coral-deep), #C93D1E); }
.btn-coral:hover{ transform:translateY(-3px); box-shadow:0 20px 38px -12px rgba(229,82,47,.65); }

.btn-outline{ background:transparent; color:var(--navy-deep); border:1.5px solid var(--navy-deep); }
.btn-outline::before{ background:var(--navy-deep); }
.btn-outline:hover{ color:#fff; border-color:var(--navy-deep); transform:translateY(-3px); }
.btn-outline .ripple{ background:rgba(255,255,255,.35); }

.btn-ghost-light{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(6px); }
.btn-ghost-light::before{ background:#fff; }
.btn-ghost-light:hover{ color:var(--navy-deep); border-color:#fff; transform:translateY(-3px); }
.btn-ghost-light .ripple{ background:rgba(18,58,69,.25); }

/* =========================================================
   TOP BAR
   ========================================================= */
.top-bar{
  background:var(--navy-deep); color:#cfe4e0;
  font-size:13px;
}
.top-bar .container{
  display:flex; align-items:center; justify-content:space-between;
  height:40px;
}
.top-bar .welcome-msg{ font-family:var(--mono); letter-spacing:.03em; opacity:.85; }
.top-bar .socials{ display:flex; gap:16px; }
.top-bar .socials a{ color:#cfe4e0; opacity:.8; transition:opacity .25s, transform .25s; }
.top-bar .socials a:hover{ opacity:1; transform:translateY(-2px); color:var(--teal-light); }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:200;
  background:rgba(243,246,239,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .35s, border-color .35s, background .35s;
}
.site-header.scrolled{
  box-shadow:0 10px 30px -18px rgba(16,38,43,.35);
  border-color:var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
}
.logo{ display:flex; align-items:center; gap:10px; }
.logo img{ height:46px; width:auto; }
.logo-text{ font-family:var(--serif); font-weight:600; font-size:19px; color:var(--navy-deep); line-height:1.1; }
.logo-text span{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--teal); font-weight:400; }

.main-nav{ display:flex; align-items:center; gap:4px; }
.main-nav > ul{ display:flex; align-items:center; gap:2px; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a{
  display:block; padding:12px 16px;
  font-size:14.5px; font-weight:600; color:var(--navy-deep);
  border-radius:var(--radius-pill);
  transition:background .25s, color .25s;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.open > a{ background:rgba(30,158,146,.1); color:var(--teal); }
.main-nav .caret{ font-size:10px; margin-left:4px; opacity:.6; }

/* dropdown */
.has-dropdown .dropdown{
  position:absolute; top:calc(100% + 10px); left:0;
  min-width:230px;
  background:var(--card); border-radius:16px;
  box-shadow:var(--shadow-soft);
  padding:10px;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.has-dropdown:hover .dropdown,
.has-dropdown.open .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown li a{
  display:block; padding:10px 14px; border-radius:10px;
  font-size:13.5px; color:var(--text-soft); font-weight:500;
}
.dropdown li a:hover{ background:var(--sand); color:var(--teal); }
.dropdown .sub-title{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--coral); padding:8px 14px 4px;
}

.nav-toggle{
  display:none; width:44px; height:44px; border-radius:var(--radius-pill);
  border:1.5px solid var(--navy-deep); background:none;
  position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; position:absolute; left:12px; width:20px; height:2px; background:var(--navy-deep);
  transition:transform .3s, opacity .3s;
}
.nav-toggle span{ top:21px; }
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
.nav-toggle.active span{ background:transparent; }
.nav-toggle.active span::before{ transform:translateY(6px) rotate(45deg); top:-6px; }
.nav-toggle.active span::after{ transform:translateY(-6px) rotate(-45deg); top:6px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  background:var(--navy-deep);
  overflow:hidden;
  min-height:640px;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, rgba(30,158,146,.4), transparent 45%),
    radial-gradient(circle at 82% 12%, rgba(232,184,75,.22), transparent 40%),
    radial-gradient(circle at 70% 85%, rgba(255,107,71,.28), transparent 50%);
  background-size:180% 180%;
  animation:auraDrift 18s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes auraDrift{
  0%,100%{ background-position:0% 0%, 100% 0%, 60% 100%; }
  50%{ background-position:20% 30%, 80% 20%, 40% 70%; }
}
.hero-bg{
  position:absolute; inset:0;
}
.hero-slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity 1.1s var(--ease);
  display:flex; align-items:center;
}
.hero-slide.active{ opacity:1; }
.hero-slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(11,36,44,.94) 20%, rgba(11,36,44,.55) 55%, rgba(11,36,44,.2) 100%);
}
.hero-slide img.hero-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-content{
  position:relative; z-index:2; color:#fff;
  max-width:560px; padding:110px 0 90px;
}
.hero-tag{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal-light); display:inline-block; margin-bottom:20px;
  padding:6px 14px; border:1px solid rgba(89,199,185,.5); border-radius:var(--radius-pill);
}
.hero-content h1{
  font-size:clamp(34px,5vw,56px); font-weight:600; margin-bottom:18px;
}
.hero-content p{ color:rgba(255,255,255,.78); font-size:16.5px; max-width:440px; }
.hero-ctas{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }

.hero-dots{
  position:absolute; z-index:3; bottom:36px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px;
}
.hero-dots button{
  width:10px; height:10px; border-radius:50%; border:none;
  background:rgba(255,255,255,.35); transition:all .35s;
}
.hero-dots button.active{ background:var(--coral); width:28px; border-radius:6px; }

.hero-arrow{
  position:absolute; z-index:3; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.35);
  color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center;
  transition:background .3s, transform .3s;
}
.hero-arrow:hover{ background:rgba(255,255,255,.25); }
.hero-arrow.prev{ left:24px; }
.hero-arrow.next{ right:24px; }

/* floating capsules */
.capsule-field{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.capsule{
  position:absolute; border-radius:var(--radius-pill);
  background:linear-gradient(135deg, var(--teal-light), var(--teal));
  opacity:.28;
  animation:drift 12s ease-in-out infinite;
}
.capsule.c1{ width:90px; height:34px; top:14%; right:12%; animation-duration:14s; }
.capsule.c2{ width:60px; height:24px; bottom:18%; right:28%; background:linear-gradient(135deg,var(--coral),var(--gold)); animation-duration:10s; animation-delay:1.5s; }
.capsule.c3{ width:120px; height:44px; bottom:8%; right:6%; animation-duration:16s; animation-delay:.5s; }
@keyframes drift{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-22px) rotate(8deg); }
}

/* capsule bead divider */
.bead-divider{ display:block; width:100%; height:34px; }
.bead-divider .bead-row{ fill:var(--sand); }

/* =========================================================
   SECTION: INTRO / PRODUCTS
   ========================================================= */
.section{ padding:96px 0; }
.section.tight{ padding:72px 0; }
.bg-white{ background:var(--card); }
.bg-navy{ background:var(--navy-deep); color:#fff; }
.bg-navy .section-heading{ color:#fff; }
.bg-navy p{ color:rgba(255,255,255,.72); }

.intro-copy{ max-width:760px; margin:0 auto 56px; text-align:center; }
.intro-copy p{ font-size:17px; }

/* product rail */
.product-rail-wrap{ position:relative; }
.product-rail{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:8px 4px 26px;
  scrollbar-width:none;
}
.product-rail::-webkit-scrollbar{ display:none; }
.product-card{
  flex:0 0 240px; scroll-snap-align:start;
  background:var(--card); border-radius:var(--radius-lg);
  border:1px solid var(--line);
  padding:26px 22px 22px;
  text-align:center;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.product-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-soft); border-color:transparent; }
.product-card .frame{
  width:100%; aspect-ratio:16/11; border-radius:20px;
  background:var(--sand);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; overflow:hidden;
}
.product-card .frame img{
  max-height:78%; width:auto; max-width:80%; object-fit:contain;
  transition:transform .5s var(--ease);
  animation:cardFloat 5s ease-in-out infinite;
}
.product-card:nth-child(even) .frame img{ animation-delay:-2.5s; }
.product-card:hover .frame img{ animation-play-state:paused; transform:scale(1.1) rotate(-2deg); }
@keyframes cardFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.product-card:nth-child(3n+1) .dose-tag{ color:var(--teal); background:rgba(30,158,146,.1); }
.product-card:nth-child(3n+2) .dose-tag{ color:var(--gold-deep); background:rgba(232,184,75,.16); }
.product-card:nth-child(3n+3) .dose-tag{ color:var(--coral-deep); background:rgba(255,107,71,.12); }
.product-card h3{ font-size:18px; font-weight:600; color:var(--navy-deep); margin-bottom:6px; }
.product-card .dose-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--teal); background:rgba(30,158,146,.1);
  display:inline-block; padding:5px 12px; border-radius:var(--radius-pill);
}
.rail-controls{ display:flex; gap:12px; justify-content:center; margin-top:8px; }
.rail-controls button{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line);
  background:var(--card); color:var(--navy-deep); font-size:16px;
  transition:all .3s;
}
.rail-controls button:hover{ background:var(--teal); border-color:var(--teal); color:#fff; }

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.about-media{ position:relative; }
.about-media .shape{
  border-radius:40px 120px 40px 120px;
  overflow:hidden; box-shadow:var(--shadow-soft);
}
.about-media .shape img{ width:100%; height:420px; object-fit:cover; }
.about-media .badge{
  position:absolute; bottom:-24px; left:-24px;
  background:var(--coral); color:#fff;
  padding:18px 22px; border-radius:20px;
  font-family:var(--serif); font-size:15px; font-weight:600;
  box-shadow:0 20px 34px -14px rgba(255,107,71,.55);
  max-width:200px;
}
.about-text h2{ margin-bottom:22px; }
.about-text p{ font-size:15.5px; }
.about-text .btn{ margin-top:12px; }

/* =========================================================
   VISION QUOTE
   ========================================================= */
.vision{
  background:var(--navy-deep); color:#fff;
  position:relative; overflow:hidden;
}
.vision::before{
  content:''; position:absolute; width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle, rgba(30,158,146,.35), transparent 70%);
  top:-200px; right:-160px;
}
.quote-wrap{ position:relative; max-width:780px; margin:0 auto; text-align:center; min-height:150px; }
.quote-slide{
  position:absolute; inset:0; opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.quote-slide.active{ position:relative; opacity:1; transform:translateY(0); }
.quote-slide q{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(20px,3vw,30px); line-height:1.5; color:#fff;
}
.quote-nav{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:40px; }
.quote-nav button{
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
  background:transparent; color:#fff; font-size:16px;
}
.quote-nav button:hover{ background:rgba(255,255,255,.15); }
.quote-dots{ display:flex; gap:8px; }
.quote-dots button{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); border:none; padding:0; }
.quote-dots button.active{ background:var(--teal-light); width:22px; border-radius:5px; }

/* =========================================================
   AD BANNER
   ========================================================= */
.ad-banner{ padding:0; }
.ad-banner .frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-soft); aspect-ratio:21/7;
}
.ad-banner img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.4s var(--ease); }
.ad-banner .frame:hover img{ transform:scale(1.03); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; }
.contact-info h3{ font-size:22px; margin-bottom:6px; color:var(--navy-deep); }
.contact-info .sub{ font-family:var(--mono); font-size:12.5px; color:var(--teal); letter-spacing:.05em; margin-bottom:30px; display:block; }
.contact-line{ display:flex; gap:16px; align-items:flex-start; margin-bottom:22px; }
.contact-line .ic{
  width:44px; height:44px; border-radius:14px; background:var(--sand);
  display:flex; align-items:center; justify-content:center; color:var(--teal); font-size:17px; flex-shrink:0;
}
.contact-line a{ display:block; color:var(--navy-deep); font-weight:600; font-size:14.5px; }
.contact-line a:hover{ color:var(--teal); }

.contact-card{
  background:var(--card); border-radius:var(--radius-lg);
  padding:38px; border:1px solid var(--line);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.field{
  width:100%; padding:14px 16px; border-radius:14px;
  border:1.5px solid var(--line); background:var(--sand);
  font-family:var(--sans); font-size:14px; color:var(--ink);
  transition:border-color .25s, background .25s;
}
.field:focus{ outline:none; border-color:var(--teal); background:#fff; }
textarea.field{ resize:vertical; min-height:100px; }
.form-stack{ display:flex; flex-direction:column; gap:16px; }
.captcha-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.captcha-box{
  font-family:var(--mono); font-weight:700; letter-spacing:.15em;
  background:var(--navy-deep); color:var(--teal-light);
  padding:14px 18px; border-radius:14px; text-align:center; min-width:110px;
}
.captcha-refresh{
  width:46px; height:46px; border-radius:14px; border:1.5px solid var(--line);
  background:#fff; color:var(--navy-deep); font-size:15px;
}
.captcha-refresh:hover{ background:var(--sand); }

/* =========================================================
   TICKER
   ========================================================= */
.ticker-section{ padding:44px 0; background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.ticker-track{ display:flex; width:max-content; animation:scroll-left 26s linear infinite; }
.ticker-section:hover .ticker-track{ animation-play-state:paused; }
.ticker-track .tick-item{
  font-family:var(--mono); font-weight:700; font-size:14px; letter-spacing:.05em;
  padding:12px 30px; border-radius:var(--radius-pill); margin:0 10px;
  color:#fff; white-space:nowrap;
}
@keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.tick-sky{ background:#3FB5D6; } .tick-orange{ background:#F0954A; } .tick-brown{ background:#8A5A44; }
.tick-pink{ background:#E06B9A; } .tick-blue{ background:#3D6FD1; } .tick-green{ background:#4FAE6B; }
.tick-purple{ background:#8B5FC9; } .tick-vine{ background:#B23A5A; }

/* =========================================================
   WHY CHOOSE US
   ========================================================= */
.why-grid{ display:grid; grid-template-columns:1fr .9fr; gap:60px; align-items:center; }
.why-item{ display:flex; gap:20px; padding:26px 0; border-bottom:1px solid var(--line); }
.why-item:last-child{ border-bottom:none; }
.why-item .ic{
  width:54px; height:54px; border-radius:16px; flex-shrink:0;
  background:linear-gradient(135deg, var(--teal), var(--teal-light));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px;
  transition:transform .4s var(--ease);
}
.why-item:hover .ic{ transform:rotate(-8deg) scale(1.08); }
.why-item h3{ font-size:18px; color:var(--navy-deep); margin-bottom:6px; }
.why-item p{ font-size:14.5px; margin:0; }
.why-media{ position:relative; border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); aspect-ratio:4/3; }
.why-media img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; transition:transform 1.2s var(--ease); }
.why-media:hover img{ transform:scale(1.05); }
.why-media::before{
  content:''; position:absolute; z-index:-1; inset:-30px;
  background:conic-gradient(from 0deg, var(--teal-light), var(--gold), var(--coral), var(--teal-light));
  filter:blur(50px); opacity:.35;
  animation:auraSpin 14s linear infinite;
}
@keyframes auraSpin{ to{ transform:rotate(360deg); } }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ position:relative; background:var(--navy-deep); color:rgba(255,255,255,.75); padding:80px 0 0; }
.site-footer::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--coral), var(--gold), var(--teal-light), var(--coral));
  background-size:300% 100%;
  animation:seamShift 8s linear infinite;
}
@keyframes seamShift{ to{ background-position:300% 0; } }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:50px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-logo img{ height:44px; margin-bottom:18px; }
.footer-col h4{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-light); margin-bottom:20px;
}
.footer-links li{ margin-bottom:12px; }
.footer-links a{ font-size:14.5px; transition:color .25s, padding-left .25s; }
.footer-links a:hover{ color:#fff; padding-left:4px; }
.footer-contact .row{ display:flex; gap:12px; align-items:center; margin-bottom:16px; font-size:14px; }
.footer-contact .row .ic{ width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:var(--teal-light); }
.footer-socials{ display:flex; gap:12px; margin-top:22px; }
.footer-socials a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:#fff; transition:all .3s;
}
.footer-socials a:hover{ background:var(--teal); transform:translateY(-3px); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:13px; flex-wrap:wrap; gap:10px; }
.footer-bottom img{ height:20px; }

/* back to top */
.back-top{
  position:fixed; right:26px; bottom:26px; z-index:300;
  width:50px; height:50px; border-radius:50%;
  background:var(--coral); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:18px; box-shadow:0 14px 26px -10px rgba(255,107,71,.6);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .35s, transform .35s, visibility .35s;
}
.back-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* =========================================================
   INNER PAGE HEADER (breadcrumb banner)
   ========================================================= */
.page-header{
  position:relative; overflow:hidden;
  background:var(--navy-deep);
  padding:64px 0 58px;
  text-align:center;
}
.page-header::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(30,158,146,.35), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(255,107,71,.28), transparent 55%);
}
.page-header .capsule-field{ z-index:0; }
.page-header .inner{ position:relative; z-index:1; }
.page-header .eyebrow{ justify-content:center; color:var(--teal-light); }
.page-header h1{
  font-size:clamp(30px,4.4vw,46px); color:#fff; font-weight:600; margin-bottom:14px;
}
.breadcrumb-trail{
  display:flex; gap:8px; justify-content:center; align-items:center;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.breadcrumb-trail a{ color:rgba(255,255,255,.85); }
.breadcrumb-trail a:hover{ color:var(--teal-light); }
.breadcrumb-trail .sep{ opacity:.5; }

/* =========================================================
   ABOUT PAGE — "Apothecary Label" system
   ========================================================= */

.eol-about-section{
    position:relative;
    padding:120px 0;
    background:var(--sand);
    overflow:hidden;
}

/* faint dosage-ring watermark, purely decorative */
.eol-about-section::before{
    content:'';
    position:absolute;
    top:-180px; left:-180px;
    width:420px; height:420px;
    border:1px dashed rgba(30,158,146,.25);
    border-radius:50%;
    pointer-events:none;
}

.eol-about-wrap{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr 480px;
    gap:80px;
    align-items:center;
}

.eol-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    background:rgba(30,158,146,.1);
    color:var(--teal);
    padding:8px 18px 8px 14px;
    border-radius:var(--radius-pill);
    font-weight:600;
    margin-bottom:22px;
}
.eol-tag::before{
    content:'';
    width:8px; height:8px;
    border-radius:50%;
    background:var(--coral);
}
.eol-tag.gold{
    background:rgba(232,184,75,.16);
    color:var(--gold-deep);
}
.eol-tag.gold::before{ background:var(--teal); }

.eol-about-content h2{
    font-family:var(--serif);
    font-weight:600;
    font-size:clamp(32px,4vw,46px);
    line-height:1.18;
    color:var(--navy-deep);
    margin-bottom:24px;
    max-width:520px;
}

.eol-about-content h2 span{
    color:var(--teal);
    font-style:italic;
}

.eol-about-content p{
    font-size:16.5px;
    line-height:1.85;
    color:var(--text-soft);
    margin-bottom:20px;
    max-width:540px;
}

/* stat row — dosage-tag look, echoes .eyebrow/.btn language */
.eol-stats-row{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin:34px 0 36px;
}
.eol-stat{
    flex:1 1 140px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    padding:18px 20px;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.eol-stat:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-soft);
    border-color:transparent;
}
.eol-stat strong{
    display:block;
    font-family:var(--serif);
    font-size:30px;
    color:var(--navy-deep);
    line-height:1;
    margin-bottom:6px;
}
.eol-stat span{
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--text-soft);
}

/* IMAGE */

.eol-about-image{
    display:flex;
    justify-content:center;
    position:relative;
    z-index:1;
}

.eol-image-box{
    position:relative;
    width:100%;
    max-width:480px;
}

.eol-image-box::before{
    content:'';
    position:absolute;
    top:-22px; left:-22px;
    width:100%; height:100%;
    border-radius:var(--radius-lg);
    border:2px solid var(--gold);
    z-index:-1;
}

.eol-image-box img{
    width:100%;
    height:540px;
    object-fit:cover;
    display:block;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft);
}

.eol-exp-card{
    position:absolute;
    left:-30px;
    bottom:36px;
    background:var(--navy-deep);
    color:#fff;
    padding:22px 28px;
    border-radius:20px;
    text-align:left;
    display:flex;
    align-items:center;
    gap:14px;
    box-shadow:0 20px 46px -14px rgba(11,36,44,.55);
}

.eol-exp-card .eol-exp-mark{
    width:46px; height:46px;
    flex-shrink:0;
    border-radius:50%;
    background:var(--coral);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--serif); font-weight:600; font-size:18px;
}

.eol-exp-card h3{
    margin:0;
    font-family:var(--serif);
    font-weight:600;
    font-size:26px;
    line-height:1;
    color:#fff;
}

.eol-exp-card span{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--teal-light);
}

/* Mission */

.eol-mission-box{
    position:relative;
    z-index:1;
    margin-top:110px;
    background:linear-gradient(120deg, var(--navy-deep), var(--navy) 70%);
    border-radius:var(--radius-lg);
    padding:52px 56px;
    display:flex;
    gap:36px;
    align-items:center;
    box-shadow:var(--shadow-soft);
    overflow:hidden;
}

.eol-mission-box::after{
    content:'';
    position:absolute;
    right:-60px; bottom:-60px;
    width:220px; height:220px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(30,158,146,.35), transparent 70%);
    pointer-events:none;
}

.eol-mission-icon{
    width:84px;
    height:84px;
    border-radius:50%;
    background:var(--coral);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    flex-shrink:0;
    box-shadow:0 12px 26px -8px rgba(255,107,71,.6);
}

.eol-mission-box h3{
    font-family:var(--serif);
    font-weight:600;
    font-size:28px;
    color:#fff;
    margin:0 0 12px;
}

.eol-mission-box p{
    color:#cfe4e0;
    line-height:1.8;
    margin:0;
    max-width:640px;
}

@media(max-width:991px){

.eol-about-wrap{
    grid-template-columns:1fr;
    gap:56px;
}

.eol-about-content h2,
.eol-about-content p{
    max-width:640px;
}

.eol-about-image{
    order:-1;
}

.eol-image-box{
    max-width:600px;
}

.eol-image-box img{
    height:420px;
}

.eol-mission-box{
    flex-direction:column;
    text-align:center;
    padding:44px 36px;
}

}

@media(max-width:576px){

.eol-about-section{
    padding:80px 0;
}

.eol-about-section::before{ display:none; }

.eol-about-content h2{
    font-size:30px;
}

.eol-stats-row{
    gap:10px;
}
.eol-stat{
    flex:1 1 100px;
    padding:14px 16px;
}
.eol-stat strong{ font-size:24px; }

.eol-image-box{ max-width:100%; }
.eol-image-box::before{ display:none; }

.eol-image-box img{
    height:300px;
}

.eol-exp-card{
    position:relative;
    left:auto;
    bottom:auto;
    margin:18px auto 0;
    max-width:280px;
}

.eol-mission-box{
    padding:34px 24px;
    margin-top:70px;
    border-radius:22px;
}

.eol-mission-box h3{
    font-size:22px;
}

}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-page-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:36px; align-items:stretch; }
.contact-card-list{ display:flex; flex-direction:column; gap:18px; }
.info-card{
  display:flex; gap:20px; align-items:flex-start;
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:26px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.info-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); border-color:transparent; }
.info-card .ic{
  width:52px; height:52px; border-radius:16px; flex-shrink:0;
  background:linear-gradient(135deg, var(--teal), var(--teal-light));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:19px;
}
.info-card h3{ font-size:17px; color:var(--navy-deep); margin-bottom:6px; }
.info-card p, .info-card a{ font-size:14.5px; margin:0; color:var(--text-soft); }
.info-card a{ display:block; color:var(--navy-deep); font-weight:600; }
.info-card a:hover{ color:var(--teal); }
.info-card .company-name{ color:var(--teal); font-weight:700; letter-spacing:.02em; display:block; margin-bottom:4px; }

.map-frame{
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-soft); min-height:420px;
}
.map-frame iframe{ width:100%; height:100%; min-height:420px; border:0; display:block; filter:grayscale(.15); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px){
  .about-grid, .contact-grid, .why-grid,
  .about-page-grid, .contact-page-grid{ grid-template-columns:1fr; }
  .about-page-media{ position:static; order:-1; }
  .mission-block{ grid-template-columns:1fr; text-align:center; }
  .mission-icon{ margin:0 auto; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .main-nav{ display:none; }
  .nav-toggle{ display:block; }

  .main-nav.mobile-open{
    display:block; position:fixed; inset:0 0 0 auto; width:82%; max-width:340px;
    background:#fff; padding:100px 26px 30px; z-index:250;
    box-shadow:-20px 0 50px rgba(0,0,0,.15);
    overflow-y:auto;
  }
  .main-nav.mobile-open > ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .has-dropdown .dropdown{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    display:none; margin-left:12px; padding-left:6px; border-left:2px solid var(--line);
  }
  .has-dropdown.open .dropdown{ display:block; }
}
@media (max-width: 640px){
  .footer-grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .hero-arrow{ display:none; }
  .top-bar .welcome-msg{ font-size:11px; }
}




/* =========================================================
   CONTACT SECTION — HOME PAGE
   Rebuilt on the Apothecary Label system (capsule shapes,
   dosage-tag typography, botanical-teal palette) so it reads
   as one brand with the rest of the page.
   ========================================================= */
.contact-section{
  position:relative;
  padding:120px 0;
  background:var(--sand);
  overflow:hidden;
}
/* soft aura blobs, same device used on the hero */
.contact-section::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 8% 12%, rgba(30,158,146,.14), transparent 42%),
    radial-gradient(circle at 92% 88%, rgba(255,107,71,.12), transparent 46%);
}
.contact-section .container{ position:relative; z-index:1; }

.contact-wrapper{
  display:grid;
  grid-template-columns:400px 1fr;
  gap:32px;
  align-items:stretch;
}

/* ---------- LEFT: info card ---------- */
.contact-info{
  position:relative;
  overflow:hidden;
  background:linear-gradient(150deg, var(--navy-deep), var(--navy) 55%, var(--teal) 130%);
  color:#fff;
  border-radius:var(--radius-lg);
  padding:44px 40px;
  box-shadow:var(--shadow-soft);
}
.contact-info::before{
  content:'';
  position:absolute; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,184,75,.28), transparent 70%);
  top:-100px; right:-90px; pointer-events:none;
}
.contact-info::after{
  content:'';
  position:absolute; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,107,71,.22), transparent 70%);
  bottom:-90px; left:-70px; pointer-events:none;
}
.contact-info > .eyebrow{ position:relative; z-index:1; }
.contact-info h3{
  position:relative; z-index:1;
  font-size:clamp(24px,2.6vw,30px);
  color:#fff;
  margin:10px 0 12px;
}
.contact-info > p{
  position:relative; z-index:1;
  color:rgba(255,255,255,.82);
  margin-bottom:36px;
}
.info-item{
  position:relative; z-index:1;
  display:flex; align-items:flex-start; gap:15px;
  margin-bottom:22px;
}
.info-item .icon{
  width:48px; height:48px; min-width:48px;
  border-radius:14px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:19px;
  backdrop-filter:blur(8px);
}
.info-item a{
  color:#fff; font-weight:600; font-size:14.5px;
  transition:color .25s;
}
.info-item a:hover{ color:var(--gold); }

/* ---------- RIGHT: form card ---------- */
.contact-form-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:44px 40px;
  box-shadow:var(--shadow-soft);
}
.contact-form-card > .eyebrow{ margin-bottom:8px; }
.contact-form-card h3{
  font-size:clamp(22px,2.4vw,26px);
  color:var(--navy-deep);
  margin-bottom:26px;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.full{ grid-column:1/-1; }

.field{
  width:100%;
  padding:15px 18px;
  border:1.5px solid var(--line);
  border-radius:14px;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--sans); font-size:14.5px;
  outline:none;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.field::placeholder{ color:var(--text-soft); opacity:.75; }
.field:focus{
  border-color:var(--teal);
  background:#fff;
  box-shadow:0 0 0 4px rgba(30,158,146,.14);
}
textarea.field{ resize:none; min-height:130px; }

select.field{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234C5F5E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 18px center;
  padding-right:40px;
}

/* captcha, styled like the site's dosage-tag chips */
.captcha-wrap{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
.captcha-box{
  font-family:var(--mono);
  letter-spacing:.2em;
  font-weight:700; font-size:14px;
  color:var(--navy-deep);
  background:var(--sand);
  border:2px dashed var(--line);
  border-radius:12px;
  padding:14px 16px;
  min-width:120px;
  text-align:center;
}
.refresh-btn{
  width:48px; height:48px; min-width:48px;
  border:none; border-radius:var(--radius-pill);
  background:var(--teal); color:#fff; font-size:19px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s var(--ease), background .3s var(--ease);
}
.refresh-btn:hover{ background:var(--coral); transform:rotate(180deg); }
.captcha-wrap .field{ flex:1; min-width:140px; }

/* reuse the site's coral pill-button treatment on the native <button> */
.submit-btn{
  border:none;
  background:var(--coral);
  color:#fff;
  padding:16px 36px;
  border-radius:var(--radius-pill);
  font-family:var(--sans); font-weight:600; font-size:14.5px;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 14px 30px -10px rgba(255,107,71,.55);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease);
}
.submit-btn:hover{
  background:var(--coral-deep);
  transform:translateY(-3px);
  box-shadow:0 20px 38px -12px rgba(229,82,47,.65);
}
.submit-btn:active{ transform:scale(.97); }

/* ---------- RESPONSIVE (matches the rest of the sheet: 960 / 640) ---------- */
@media (max-width: 960px){
  .contact-wrapper{ grid-template-columns:1fr; }
  .contact-info{ order:2; }
  .contact-form-card{ order:1; }
}
@media (max-width: 640px){
  .contact-section{ padding:70px 0; }
  .form-grid{ grid-template-columns:1fr; }
  .contact-info, .contact-form-card{ padding:30px 26px; }
  .captcha-wrap{ flex-direction:column; align-items:stretch; }
  .refresh-btn{ width:100%; border-radius:12px; }
}