/* ============================================
   AQUATE — Maldivian Coastal Atelier
   Design system + components
   ============================================ */

:root {
  /* Palette — ocean × shore × ember */
  --ink: #0a1f2a;
  --abyss: #0a3d4f;
  --tide: #1d5a6c;
  --seaglass: #6fa9aa;
  --foam: #d8e8e6;
  --shore: #e8d9bf;
  --sand: #f3e8d2;
  --bone: #fbf6ec;
  --cream: #fdfaf3;
  --coral: #e87353;
  --coral-deep: #c95536;
  --brass: #c9a35e;
  --brass-deep: #9d7f3f;
  --line: rgba(10,31,42,0.10);
  --line-soft: rgba(10,31,42,0.06);

  /* Type */
  --f-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --f-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Scale */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem;
  --s9: 6rem; --s10: 8rem; --s11: 12rem;

  /* Radius */
  --r-sm: 6px; --r-md: 14px; --r-lg: 24px; --r-xl: 36px;

  /* Easing */
  --ease: cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(10,31,42,.04), 0 2px 8px rgba(10,31,42,.04);
  --shadow-md: 0 4px 16px rgba(10,31,42,.06), 0 12px 32px rgba(10,31,42,.06);
  --shadow-lg: 0 16px 48px rgba(10,31,42,.10), 0 32px 64px rgba(10,31,42,.06);

  --max-w: 1280px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

/* Subtle paper grain across whole site */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .12 0 0 0 0 .16 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .35;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
h1 { font-size: clamp(2.6rem, 7.5vw, 6rem); font-variation-settings: 'opsz' 144, 'SOFT' 80; }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.875rem); line-height: 1.2; }
h4 { font-size: 1.1rem; line-height: 1.3; font-family: var(--f-body); font-weight: 600; letter-spacing: 0; }

p { max-width: 60ch; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--abyss); line-height: 1.5; max-width: 56ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-deep);
  font-weight: 500;
}
.eyebrow::before {
  content: ''; width: 24px; height: 1px; background: currentColor;
}

/* Layout */
.container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); position: relative; z-index: 2; }
section { position: relative; }
.section-pad { padding-block: clamp(4rem, 9vw, 8rem); }
.section-pad-sm { padding-block: clamp(3rem, 6vw, 5rem); }

/* Header */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--sand);
  border-bottom: 1px solid var(--brass);
  box-shadow: 0 1px 0 rgba(10, 31, 42, 0.10), 0 10px 30px -12px rgba(10, 31, 42, 0.18);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1.1rem;
}
.brand {
  display: inline-flex; align-items: center;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark {
  height: 44px;
  width: auto;
  display: block;
  transition: transform .4s var(--ease);
  flex-shrink: 0;
}
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.04); }

/* Company name lockup next to triangle mark (hidden only on small phones) */
.brand-text {
  font-family: var(--f-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.4;
  margin-left: 0.75rem;
  padding-top: 2px;
  white-space: nowrap;
}
@media (max-width: 540px) {
  .brand-text { display: none; }
}

.footer .brand-mark {
  height: 64px;
  filter: brightness(0) invert(1);
  opacity: .95;
}

.nav { display: flex; align-items: center; gap: .25rem; }
.nav a {
  position: relative;
  padding: .5rem .9rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
  border-radius: 999px;
  transition: background .25s var(--ease);
}
.nav a:hover { background: rgba(10,31,42,0.06); }
.nav a.is-active { background: var(--abyss); color: var(--cream); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  width: 44px; height: 44px;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  border-radius: 50%;
  cursor: pointer; color: var(--ink);
  padding: 0;
  flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease;
}
.nav-toggle:hover { background: rgba(10,31,42,0.06); }
.nav-toggle .bar {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; position: relative; z-index: 210; }

  /* Side drawer — slides in from the right edge */
  .nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(82vw, 340px);
    flex-direction: column; align-items: stretch;
    background: var(--cream);
    padding: 5.5rem 1.5rem 2rem;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.32,.72,0,1);
    box-shadow: -12px 0 40px -8px rgba(10,31,42,.20);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 180;
    visibility: hidden;
  }
  .nav.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  .nav a { padding: .9rem 1rem; }

  /* Backdrop behind the drawer */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 31, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 170;
  }
  .nav-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }

  /* Lock body scroll when drawer is open */
  body.nav-open { overflow: hidden; }

  /* Header stays above the drawer so the hamburger remains tappable to close */
  .header { z-index: 200; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.5rem;
  font-weight: 600; font-size: .95rem;
  letter-spacing: -0.005em;
  border-radius: 999px;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--abyss); color: var(--cream); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--ink); box-shadow: var(--shadow-md); }
.btn-coral { background: var(--coral); color: var(--cream); }
.btn-coral:hover { background: var(--coral-deep); }
.btn-ghost { background: transparent; color: var(--abyss); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--abyss); color: var(--cream); border-color: var(--abyss); }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* Pill / chip */
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--abyss);
}
.pill-coral { background: rgba(232,115,83,0.12); color: var(--coral-deep); border-color: rgba(232,115,83,0.25); }
.pill-brass { background: rgba(201,163,94,0.14); color: var(--brass-deep); border-color: rgba(201,163,94,0.30); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* HERO ============================================ */
.hero {
  position: relative;
  padding-block: clamp(4rem, 10vw, 9rem) clamp(3rem, 7vw, 6rem);
  background:
    radial-gradient(ellipse 80% 60% at 75% 20%, rgba(232,115,83,0.18), transparent 60%),
    radial-gradient(ellipse 90% 70% at 15% 80%, rgba(111,169,170,0.30), transparent 65%),
    linear-gradient(180deg, var(--cream) 0%, var(--bone) 100%);
  overflow: hidden;
  isolation: isolate;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 {
  margin-top: 1.5rem;
}
.hero h1 em {
  font-style: italic;
  color: var(--coral-deep);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.hero .lede { margin-top: 1.5rem; }
.hero-cta {
  display: flex; gap: .75rem; flex-wrap: wrap;
  margin-top: 2rem;
}

/* Decorative blob with smoke wisp */
.hero-art {
  position: relative;
  aspect-ratio: 4/5;
  max-width: 520px;
  margin-inline: auto;
  width: 100%;
}
.blob {
  position: absolute; inset: 0;
  border-radius: 60% 40% 65% 35% / 55% 60% 40% 45%;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.35), transparent 50%),
    linear-gradient(135deg, var(--abyss) 0%, var(--tide) 50%, var(--seaglass) 100%);
  box-shadow: var(--shadow-lg), inset 0 0 80px rgba(0,0,0,.15);
  animation: blob-morph 20s var(--ease) infinite;
}
@keyframes blob-morph {
  0%,100% { border-radius: 60% 40% 65% 35% / 55% 60% 40% 45%; }
  33% { border-radius: 45% 55% 50% 50% / 60% 45% 55% 40%; }
  66% { border-radius: 55% 45% 40% 60% / 40% 60% 40% 60%; }
}
.blob-coral {
  position: absolute;
  width: 38%; height: 38%;
  bottom: -8%; right: -6%;
  border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
  background: linear-gradient(135deg, var(--coral) 0%, var(--brass) 100%);
  box-shadow: var(--shadow-md);
  animation: blob-morph 14s var(--ease) -3s infinite reverse;
}
.smoke {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.smoke svg { width: 100%; height: 100%; opacity: .5; }
.smoke-wisp {
  animation: rise 8s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.smoke-wisp:nth-child(2) { animation-delay: -2.5s; }
.smoke-wisp:nth-child(3) { animation-delay: -5s; }
@keyframes rise {
  0% { transform: translateY(20%) scale(.9); opacity: 0; }
  30% { opacity: .8; }
  100% { transform: translateY(-40%) scale(1.4); opacity: 0; }
}

/* Hero stats */
.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.stat-num {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  color: var(--abyss);
  font-variation-settings: 'opsz' 144;
  line-height: 1;
}
.stat-label {
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--tide);
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats > :last-child { grid-column: 1 / -1; }
}

/* Hero photo (real product shot) */
.hero-photo {
  position: absolute; inset: 0;
  border-radius: 60% 40% 65% 35% / 55% 60% 40% 45%;
  overflow: hidden;
  box-shadow: var(--shadow-lg), inset 0 0 80px rgba(0,0,0,0.35);
  background: var(--ink);
}
.hero-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(232,115,83,0.18), transparent 50%),
    linear-gradient(180deg, transparent 55%, rgba(10,31,42,0.35) 100%);
  pointer-events: none;
}
.hero-photo-tag {
  position: absolute;
  bottom: clamp(1rem, 3vw, 1.5rem);
  left: clamp(1rem, 3vw, 1.5rem);
  z-index: 2;
  background: rgba(253,250,243,0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: .75rem 1.1rem;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}
.hero-photo-tag .meta {
  font-family: var(--f-mono);
  font-size: .65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.hero-photo-tag strong {
  display: block;
  margin-top: .15rem;
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Single-product feature (hookah on products page) */
.product-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem);
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
}
.product-feature::before {
  content: ''; position: absolute; right: -10%; top: -30%;
  width: 50%; height: 160%;
  background: radial-gradient(ellipse, rgba(232,115,83,0.25), transparent 60%);
  pointer-events: none;
}
@media (max-width: 850px) { .product-feature { grid-template-columns: 1fr; } }
.product-feature-img {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.product-feature-img img { width: 100%; height: 100%; object-fit: cover; }
.product-feature .label { font-family: var(--f-mono); font-size: .72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.product-feature h3 { color: var(--cream); font-family: var(--f-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; margin-top: .5rem; }
.product-feature .desc { color: rgba(253,250,243,0.78); font-size: 1.05rem; margin-top: 1rem; max-width: 44ch; }
.product-feature .specs {
  list-style: none;
  margin-top: 1.75rem;
  display: grid;
  gap: .65rem;
}
.product-feature .specs li {
  font-size: .92rem;
  color: rgba(253,250,243,0.85);
  padding-left: 1.4rem;
  position: relative;
}
.product-feature .specs li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 8px; height: 1px; background: var(--coral);
}
.product-feature .actions {
  display: flex; gap: .75rem; flex-wrap: wrap;
  margin-top: 2rem;
}

/* Wave divider */
.wave-divider {
  display: block; width: 100%; height: 80px;
  color: var(--bone);
}

/* Sections */
.section-head {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}
@media (max-width: 800px) { .section-head { grid-template-columns: 1fr; gap: 1.5rem; } }
.section-head h2 { margin-top: 1rem; }
.section-head .lede { color: var(--tide); }

/* Fumari distributor banner */
.fumari-banner {
  position: relative;
  padding: clamp(2rem, 4vw, 3.5rem);
  background: linear-gradient(120deg, var(--abyss) 0%, var(--tide) 100%);
  color: var(--cream);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  box-shadow: var(--shadow-lg);
}
.fumari-banner::before {
  content: '';
  position: absolute; right: -10%; top: -50%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(232,115,83,0.4), transparent 60%);
  pointer-events: none;
}
.fumari-banner h3 {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  color: var(--cream);
}
.fumari-banner h3 em { font-style: italic; color: var(--coral); }
.fumari-banner p { color: rgba(253,250,243,0.85); margin-top: .75rem; }
@media (max-width: 700px) { .fumari-banner { grid-template-columns: 1fr; } }

/* Product / category cards */
.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.product {
  background: var(--bone);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
  position: relative;
}
.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line);
}
.product-img {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--foam) 0%, var(--seaglass) 100%);
}
.product-img::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.4), transparent 50%);
}
.product-img.tone-coral { background: linear-gradient(135deg, var(--coral) 0%, var(--brass) 100%); }
.product-img.tone-deep { background: linear-gradient(135deg, var(--abyss) 0%, var(--tide) 100%); }
.product-img.tone-sand { background: linear-gradient(135deg, var(--shore) 0%, var(--brass) 100%); }
.product-img.tone-glass { background: linear-gradient(135deg, var(--seaglass) 0%, var(--abyss) 100%); }
.product-img.tone-coming {
  background: linear-gradient(135deg, var(--ink) 0%, var(--abyss) 100%);
  display: grid;
  place-items: center;
  position: relative;
}
.product-img.tone-coming::before {
  content: 'Coming soon';
  position: relative;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  padding: .6rem 1.2rem;
  border: 1px solid rgba(201,163,94,0.45);
  border-radius: 999px;
  background: rgba(10,31,42,0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.product-img.tone-coming::after { content: none; }
/* Subtle dimming on coming-soon product cards so they feel "in waiting" not "broken" */
.product:has(.tone-coming) .product-info { opacity: 0.85; }
.product:has(.tone-coming) .product-info h4 { color: var(--tide); }
.product-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.product-img.is-photo { padding: 1.25rem; background: linear-gradient(135deg, var(--bone) 0%, var(--foam) 100%); }
.product-img.is-photo img { object-fit: contain; padding: 1rem; transition: transform .5s var(--ease); }
.product:hover .product-img.is-photo img { transform: scale(1.04); }
.product-img .ml-edition {
  position: absolute; inset: auto 0 0 0;
  padding: .65rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(10,31,42,0.65));
  color: var(--cream);
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: .4rem;
  z-index: 2;
}
.product-img .ml-edition::before {
  content: '◆'; color: var(--coral); font-size: .9em;
}
.product-tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
}
.product-info {
  padding: 1.25rem 1.25rem 1.5rem;
}
.product-info .meta {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.product-info h4 {
  margin-top: .5rem;
  font-family: var(--f-display); font-size: 1.3rem;
  font-weight: 400; letter-spacing: -0.01em;
}
.product-info .desc { font-size: .9rem; color: var(--tide); margin-top: .5rem; }

/* Feature cards */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.feature {
  padding: 2rem;
  background: var(--bone);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.feature:hover { transform: translateY(-2px); background: var(--cream); }
.feature .icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--abyss);
  color: var(--cream);
  border-radius: 14px;
  margin-bottom: 1.25rem;
}
.feature h4 { font-family: var(--f-display); font-size: 1.25rem; font-weight: 400; }
.feature p { margin-top: .5rem; font-size: .92rem; color: var(--tide); }

/* Two-up split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 850px) { .split { grid-template-columns: 1fr; } }
.split-art {
  aspect-ratio: 5/4;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--abyss) 0%, var(--tide) 60%, var(--coral) 130%);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.split-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.split-art .split-art-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,31,42,0.55) 100%);
  z-index: 2;
}
.split-art .split-art-credit {
  position: absolute;
  bottom: 1rem; left: 1rem;
  z-index: 3;
  font-family: var(--f-mono);
  font-size: .65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(253,250,243,0.7);
}
.split-art .split-art-credit a { text-decoration: underline; text-decoration-color: rgba(253,250,243,0.3); }
.split-art::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.25), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(232,115,83,0.4), transparent 50%);
}

/* Training / service tiles */
.service-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1000px) { .service-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .service-row { grid-template-columns: 1fr; } }
.service {
  padding: 2.5rem;
  background: var(--bone);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  transition: background .4s var(--ease);
}
.service::before {
  content: ''; position: absolute; right: -40%; top: -40%;
  width: 70%; height: 70%; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,163,94,0.18), transparent 60%);
  transition: transform .6s var(--ease);
}
.service:hover { background: var(--cream); }
.service:hover::before { transform: translate(-20%, 20%) scale(1.2); }
.service .num {
  font-family: var(--f-display);
  font-size: 3rem;
  color: var(--brass);
  line-height: 1;
  font-variation-settings: 'opsz' 144;
}
.service h3 { margin-top: 1rem; }
.service p { margin-top: .75rem; color: var(--tide); }
.service ul { margin-top: 1.25rem; list-style: none; display: grid; gap: .5rem; }
.service ul li {
  font-size: .9rem;
  color: var(--ink);
  padding-left: 1.25rem;
  position: relative;
}
.service ul li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--coral);
}

/* Wholesale tier table */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (max-width: 800px) { .tiers { grid-template-columns: 1fr; } }
.tier {
  padding: 2rem;
  background: var(--bone);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  position: relative;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.tier:hover { transform: translateY(-3px); border-color: var(--brass); }
.tier.featured {
  background: var(--abyss); color: var(--cream); border: 0;
  box-shadow: var(--shadow-lg);
}
.tier.featured h4, .tier.featured .tier-tag { color: var(--cream); }
.tier.featured .tier-tag { color: var(--coral); }
.tier.featured ul li { color: rgba(253,250,243,0.85); }
.tier-tag { font-family: var(--f-mono); font-size: .7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-deep); }
.tier h4 { margin-top: .5rem; font-family: var(--f-display); font-size: 1.5rem; font-weight: 400; }
.tier .vol { margin-top: .5rem; color: var(--tide); font-size: .92rem; }
.tier ul { list-style: none; margin-top: 1.25rem; display: grid; gap: .5rem; }
.tier ul li { font-size: .9rem; padding-left: 1.4rem; position: relative; }
.tier ul li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--coral); font-weight: 600;
}

/* Forms */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field-full { grid-column: 1 / -1; }
.field label {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--abyss);
}
.field input, .field textarea, .field select {
  padding: .9rem 1rem;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 1rem;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0;
  border-color: var(--abyss);
  background: var(--cream);
}
.field textarea { min-height: 140px; resize: vertical; }

/* Contact info card */
.contact-card {
  padding: 2.5rem;
  background: var(--abyss);
  color: var(--cream);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.contact-card::after {
  content: ''; position: absolute; right: -30%; bottom: -30%;
  width: 80%; height: 80%; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,115,83,0.3), transparent 60%);
}
.contact-card h3 { color: var(--cream); position: relative; z-index: 2; }
.contact-list {
  margin-top: 2rem;
  display: grid; gap: 1.25rem;
  position: relative; z-index: 2;
}
.contact-item .label { font-family: var(--f-mono); font-size: .7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
.contact-item .value { margin-top: .25rem; font-size: 1.05rem; }
.contact-item a { transition: color .25s var(--ease); }
.contact-item a:hover { color: var(--coral); }

/* Footer */
.footer {
  background: var(--ink);
  color: rgba(253,250,243,0.75);
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }

.footer .brand { color: var(--cream); }
.footer h4 { color: var(--cream); font-family: var(--f-mono); font-size: .72rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1.25rem; font-weight: 500; }
.footer ul { list-style: none; display: grid; gap: .65rem; }
.footer a { transition: color .25s var(--ease); }
.footer a:hover { color: var(--coral); }
.footer-tagline { margin-top: 1rem; max-width: 32ch; font-size: .92rem; }

.footer-warning {
  padding: 1.5rem;
  background: rgba(232,115,83,0.08);
  border: 1px solid rgba(232,115,83,0.2);
  border-radius: var(--r-md);
  margin-bottom: 2rem;
  font-size: .82rem;
  color: rgba(253,250,243,0.85);
  line-height: 1.6;
}
.footer-warning strong { color: var(--coral); font-weight: 600; }

.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(253,250,243,0.1);
  font-size: .82rem;
  color: rgba(253,250,243,0.5);
}

/* Age gate */
.age-gate {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,31,42,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: grid; place-items: center;
  padding: 1.5rem;
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease);
}
.age-gate.show { opacity: 1; pointer-events: auto; }
.age-gate-card {
  max-width: 480px;
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
  box-shadow: var(--shadow-lg);
  transform: translateY(20px) scale(.98);
  transition: transform .5s var(--ease-out);
}
.age-gate.show .age-gate-card { transform: translateY(0) scale(1); }
.age-gate h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.age-gate p { margin: 1rem auto 2rem; max-width: 38ch; color: var(--tide); }
.age-gate-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.age-gate small { display: block; margin-top: 1.5rem; color: var(--tide); font-size: .78rem; }
.age-gate .denied {
  display: none;
  padding: 1rem; background: rgba(232,115,83,0.1); border-radius: 12px;
  color: var(--coral-deep); font-size: .9rem;
  margin-top: 1.5rem;
}
.age-gate.denied .age-gate-actions, .age-gate.denied p { display: none; }
.age-gate.denied .denied { display: block; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .08s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .16s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .24s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .32s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .4s; }

/* Page hero (smaller, for non-home pages) */
.page-hero {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(ellipse 80% 60% at 80% 20%, rgba(232,115,83,0.14), transparent 60%),
    radial-gradient(ellipse 90% 70% at 10% 80%, rgba(111,169,170,0.20), transparent 65%),
    var(--cream);
}
.page-hero h1 { max-width: 16ch; font-size: clamp(2.2rem, 5.5vw, 4.5rem); }
.page-hero .lede { margin-top: 1.5rem; max-width: 60ch; }

/* Utility */
.text-center { text-align: center; }
.muted { color: var(--tide); }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-5 { margin-top: 3rem; }
.bg-bone { background: var(--bone); }
.bg-deep { background: var(--abyss); color: var(--cream); }
.bg-deep h2, .bg-deep h3, .bg-deep h4 { color: var(--cream); }
.bg-deep .lede { color: rgba(253,250,243,0.85); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================
   MOBILE UX — touch targets, spacing, polish
   ============================================ */

/* Touch devices: kill stuck-hover transforms, add tactile press feedback */
@media (hover: none) {
  .brand:hover .brand-mark,
  .btn:hover,
  .product:hover,
  .feature:hover,
  .service:hover,
  .service:hover::before,
  .tier:hover { transform: none !important; }

  .btn:active { transform: scale(0.97) !important; }
  .product:active, .feature:active { background: var(--cream); }
}

/* Universal: prevent horizontal overflow from anything (long words, wide images) */
body { overflow-x: hidden; }
img, svg { max-width: 100%; }
input, textarea, select { max-width: 100%; }
/* Long emails / URLs in footer — wrap instead of pushing */
.footer a, .contact-item a { word-break: break-word; overflow-wrap: anywhere; }

/* Tablet & below — touch-target sizes + tighter sticky header */
@media (max-width: 820px) {
  .header-inner { padding-block: .85rem; }
  .brand-mark { height: 36px; }
  .footer .brand-mark { height: 52px; }

  /* Mobile drawer nav: bigger taps, full-width links, generous spacing */
  .nav.open {
    padding: 5.5rem 1.5rem 2rem;
    gap: .25rem;
    box-shadow: -12px 0 40px -8px rgba(10,31,42,.20);
  }
  .nav a {
    padding: 1rem 1.1rem;
    font-size: 1.05rem;
    border-radius: 12px;
    border-bottom: 1px solid var(--line-soft);
    width: 100%;
  }
  .nav a:last-child { border-bottom: 0; }
  .nav a.is-active { background: var(--abyss); color: var(--cream); border-color: var(--abyss); }

  /* Buttons: taller for thumb-friendly tapping */
  .btn { padding: 1rem 1.4rem; min-height: 48px; }

  .hero-art { max-width: 360px; }
  .hero { padding-block: clamp(2.5rem, 8vw, 5rem) clamp(2rem, 6vw, 4rem); }
  .hero-cta { gap: .65rem; }
  .hero-cta .btn { flex: 1 1 auto; min-width: max-content; }

  /* Product feature (Aest v1 page): cap image height */
  .product-feature-img { max-height: 70vh; aspect-ratio: 4/5; }

  /* Slimmer fumari-banner padding */
  .fumari-banner { padding: 1.75rem; }

  /* Section padding compresses */
  .section-pad { padding-block: clamp(3rem, 7vw, 5rem); }

  /* Cards in features grid: full-width tap area */
  .feature, .service, .tier { padding: 1.5rem; }

  /* Coming-soon label — slightly smaller on small cards */
  .product-img.tone-coming::before { font-size: .65rem; padding: .5rem .9rem; letter-spacing: 0.16em; }

  /* Footer warning — tighter padding */
  .footer-warning { padding: 1.1rem; font-size: .8rem; }

  /* Form fields — ensure at least 16px font (prevents iOS focus zoom) */
  .field input, .field textarea, .field select { font-size: 16px; padding: .85rem .95rem; }

  /* Larger contact list items */
  .contact-item .value { font-size: 1rem; }
}

/* Phone-sized: tighter still */
@media (max-width: 480px) {
  .container { padding-inline: 1rem; }

  /* Hero typography keeps clamp; just tighten leading */
  .hero h1 { line-height: 1.0; letter-spacing: -0.025em; }

  /* Hero stats: stack to single column on tiny screens for clarity */
  .hero-stats { grid-template-columns: 1fr; gap: 1.25rem; padding-top: 2rem; margin-top: 2.5rem; }
  .hero-stats > * { padding-bottom: 1.25rem; border-bottom: 1px solid var(--line-soft); }
  .hero-stats > :last-child { border-bottom: 0; padding-bottom: 0; }
  .stat-num { font-size: 2.2rem; }

  /* Section heads — h2 doesn't need to be huge */
  .section-head h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }

  /* Pills & eyebrows */
  .pill { font-size: .68rem; padding: .35rem .7rem; }
  .eyebrow { font-size: .68rem; }

  /* Hero CTAs stack rather than wrap awkwardly */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }

  /* Page-hero anchor buttons — wrap into a tidy stack */
  .page-hero .hero-cta { flex-direction: row; flex-wrap: wrap; }
  .page-hero .hero-cta .btn { flex: 1 1 calc(50% - .5rem); min-width: 0; }

  /* Quotation block on services / pull quote */
  .bg-deep p[style*="font-size:clamp"] { font-size: 1.35rem !important; }

  /* Product feature card: tighter padding */
  .product-feature { padding: 1.5rem; gap: 1.5rem; }
  .product-feature h3 { font-size: 1.7rem; }
  .product-feature .actions { gap: .5rem; }
  .product-feature .actions .btn { flex: 1 1 auto; }

  /* Product cards: tighter */
  .product-info { padding: 1rem 1rem 1.2rem; }
  .product-info h4 { font-size: 1.15rem; }

  /* Footer columns spacing */
  .footer-grid { gap: 2rem; }

  /* Wave divider — half-height on small screens (saves visual real estate) */
  .wave-divider { height: 50px; }

  /* Age gate: smaller padding so it fits viewport */
  .age-gate { padding: 1rem; }
  .age-gate-card { padding: 1.75rem 1.5rem; }
  .age-gate h2 { font-size: 1.5rem; }
  .age-gate-actions .btn { flex: 1 1 auto; }
}

/* iOS safe-area support (notch / home indicator) */
@supports (padding: max(0px)) {
  .header { padding-top: env(safe-area-inset-top); }
  .header-inner { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
  .footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
}

/* ============================================
   AUDIT-FIX POLISH (v12)
   ============================================ */

/* Hero pill — never wrap awkwardly */
.hero .pill, .page-hero .pill {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Page-hero (wholesale, services, contact) — center content + cap width
   so the right side doesn't feel empty at desktop sizes */
.page-hero .container {
  max-width: 880px;
}

/* Decorative smoke-wisp on page-hero pages to fill the right side at desktop */
.page-hero {
  position: relative;
  overflow: hidden;
}
.page-hero::before,
.page-hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.page-hero::before {
  /* Soft seaglass blob, top-right */
  width: 480px; height: 480px;
  top: -180px; right: -160px;
  background: radial-gradient(circle, rgba(111,169,170,0.28), transparent 70%);
  filter: blur(40px);
}
.page-hero::after {
  /* Soft coral wash, bottom-left */
  width: 380px; height: 380px;
  bottom: -160px; left: -120px;
  background: radial-gradient(circle, rgba(232,115,83,0.18), transparent 70%);
  filter: blur(50px);
}
.page-hero > .container { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .page-hero::before { width: 280px; height: 280px; top: -100px; right: -80px; }
  .page-hero::after { display: none; }
}

/* Mobile-only refinements */
@media (max-width: 700px) {
  /* Product cards: 4:3 aspect on mobile (was 1:1, too tall) */
  .product-img { aspect-ratio: 4 / 3; }

  /* Hero photo: clean rounded rectangle on mobile (was organic blob) */
  .hero-photo { border-radius: 24px; }

  /* Hide the coral blob accent on mobile — it crowds the layout */
  .blob-coral { display: none; }

  /* Inline contact links — full-width tap zones (was 19px tall) */
  .contact-item .value a {
    display: inline-block;
    padding: .25rem 0;
    min-height: 32px;
  }
  /* And on the homepage's smaller contact card too */
  .contact-card .contact-item .value a {
    display: block;
    padding: .35rem 0;
  }
}

/* Footer Reach-us list links: bigger tap targets on mobile */
@media (max-width: 700px) {
  .footer ul li {
    padding: .25rem 0;
  }
  .footer ul li a {
    display: inline-block;
    padding: .25rem 0;
    min-height: 32px;
  }
}

/* ============================================
   CINEMATIC HERO (v17)
   Full-bleed product photo, oversized slogan,
   single clean CTA. Used on the homepage.
   ============================================ */

.hero-cinematic {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* better mobile sizing where supported */
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: 0;
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: contrast(1.05) saturate(0.95);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10, 31, 42, 0.55) 0%,
      rgba(10, 31, 42, 0.30) 25%,
      rgba(10, 31, 42, 0.50) 65%,
      rgba(10, 31, 42, 0.88) 100%),
    radial-gradient(ellipse at 25% 50%, rgba(10, 31, 42, 0.45), transparent 65%);
  pointer-events: none;
}

.hero-cinematic-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(5rem, 14vh, 9rem);
  color: var(--cream);
  max-width: var(--container-max);
}

/* Pill on dark background */
.hero-cinematic .pill-coral {
  background: rgba(232, 115, 83, 0.18);
  border: 1px solid rgba(232, 115, 83, 0.4);
  color: var(--cream);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-cinematic .pill-coral .dot { background: var(--coral); }

/* OVERSIZED slogan */
.hero-slogan {
  font-family: var(--f-display);
  font-size: clamp(2.75rem, 8.5vw, 7.5rem);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: -0.035em;
  margin-top: 1.5rem;
  max-width: 18ch;
  color: var(--cream);
  text-shadow: 0 2px 30px rgba(10, 31, 42, 0.25);
}
.hero-slogan em {
  font-style: italic;
  color: var(--coral);
  font-weight: 400;
}

.hero-cinematic-lede {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  margin-top: 1.75rem;
  max-width: 52ch;
  color: rgba(253, 250, 243, 0.88);
}

.hero-cinematic .hero-cta {
  margin-top: 2.5rem;
  display: flex;
  gap: 1rem;
}
.hero-cinematic .btn-lg {
  padding: 1.15rem 2rem;
  font-size: 1.02rem;
  letter-spacing: 0;
}

/* Scroll hint at bottom-center */
.hero-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  z-index: 2;
  font-family: var(--f-mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(253, 250, 243, 0.5);
}
.hero-scroll-line {
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, rgba(253,250,243,0.7), transparent);
  animation: heroScrollPulse 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes heroScrollPulse {
  0%, 100% { transform: scaleY(0.6); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 700px) {
  .hero-cinematic { min-height: 92vh; min-height: 92svh; }
  .hero-cinematic-content { padding-block: 6rem 4rem; }
  .hero-bg img { object-position: center 35%; }
  .hero-scroll-hint { bottom: 1.25rem; font-size: 0.62rem; }
  .hero-scroll-line { height: 28px; }
  .hero-cinematic .hero-cta { width: 100%; }
  .hero-cinematic .btn-lg { width: 100%; justify-content: center; }
}

/* ============================================
   HOVER MICRO-ANIMATIONS (v18)
   Standardised on 200ms ease-in-out for snappy
   feedback. Applied to buttons, cards, nav links,
   product images, service cards, feature cards.
   Touch devices get tactile press feedback instead
   of stuck hover (already gated in the existing
   @media (hover: none) block).
   ============================================ */

:root { --t-snap: 200ms ease-in-out; }

/* ---- Buttons ---- */
.btn {
  transition:
    transform var(--t-snap),
    background-color var(--t-snap),
    color var(--t-snap),
    box-shadow var(--t-snap),
    border-color var(--t-snap);
  will-change: transform;
}
.btn .arrow {
  display: inline-block;
  transition: transform var(--t-snap);
}

/* Primary coral: lift + shadow + arrow nudge */
@media (hover: hover) {
  .btn-coral:hover {
    transform: translateY(-2px);
    background: var(--coral-deep);
    box-shadow: 0 12px 28px -8px rgba(232, 115, 83, 0.55);
  }
  .btn-coral:hover .arrow,
  .btn-primary:hover .arrow,
  .btn:hover .arrow {
    transform: translateX(4px);
  }

  /* Ghost button: brighten border + subtle fill */
  .btn-ghost:hover {
    transform: translateY(-2px);
    border-color: var(--ink);
    background: rgba(10, 31, 42, 0.04);
  }

  /* Primary (dark) button on light bg */
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(10, 31, 42, 0.35);
  }
}

.btn:active { transform: translateY(0) scale(0.98); }

/* ---- Product cards ---- */
.product {
  transition:
    transform var(--t-snap),
    box-shadow var(--t-snap),
    border-color var(--t-snap);
}
.product .product-img img,
.product .product-img > img {
  transition: transform 400ms ease-in-out;
}

@media (hover: hover) {
  .product:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -16px rgba(10, 31, 42, 0.22);
    border-color: rgba(10, 31, 42, 0.18);
  }
  .product:hover .product-img img {
    transform: scale(1.04);
  }
}

/* ---- Feature cards (why-Aquate, contact card chips, etc.) ---- */
.feature {
  transition:
    transform var(--t-snap),
    box-shadow var(--t-snap),
    border-color var(--t-snap),
    background-color var(--t-snap);
}
.feature .icon {
  transition: transform var(--t-snap), color var(--t-snap);
}
@media (hover: hover) {
  .feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px -14px rgba(10, 31, 42, 0.18);
    border-color: rgba(10, 31, 42, 0.16);
  }
  .feature:hover .icon {
    transform: scale(1.08) rotate(-3deg);
    color: var(--coral);
  }
}

/* ---- Service cards (3 tailored services) ---- */
.service {
  transition:
    transform var(--t-snap),
    box-shadow var(--t-snap),
    border-color var(--t-snap);
}
.service .num {
  transition: color var(--t-snap), transform var(--t-snap);
}
@media (hover: hover) {
  .service:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -18px rgba(10, 31, 42, 0.22);
    border-color: var(--brass);
  }
  .service:hover .num {
    color: var(--coral);
    transform: translateX(4px);
  }
}

/* ---- Nav links: subtle underline grow ---- */
.nav a {
  position: relative;
  transition: color var(--t-snap), background-color var(--t-snap);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 6px;
  width: 0; height: 2px;
  background: var(--coral);
  transition: width var(--t-snap), left var(--t-snap);
  border-radius: 2px;
}
@media (hover: hover) and (min-width: 821px) {
  .nav a:hover::after { width: calc(100% - 1.6rem); left: 0.8rem; }
  .nav a.is-active::after { width: 0; }
}

/* ---- Brand: triangle pivots gently on hover ---- */
.brand-mark { transition: transform var(--t-snap); }
@media (hover: hover) {
  .brand:hover .brand-mark { transform: rotate(-6deg) scale(1.05); }
}

/* ---- Tier cards if present ---- */
.tier {
  transition:
    transform var(--t-snap),
    box-shadow var(--t-snap),
    border-color var(--t-snap);
}
@media (hover: hover) {
  .tier:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -16px rgba(10, 31, 42, 0.22);
  }
}

/* Reduced motion: kill the lifts, keep colour transitions */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .product:hover, .feature:hover,
  .service:hover, .tier:hover {
    transform: none !important;
  }
  .btn .arrow, .product-img img, .service .num, .feature .icon {
    transition: none !important;
    transform: none !important;
  }
  .nav a::after { transition: none !important; }
  .hero-scroll-line { animation: none !important; }
}

/* ============================================
   BRANDED SPLASH (v19)
   Plays once per session as a branded entry.
   Plays:
     0ms      → triangle scales in with bounce
     600ms    → "Aquate" letters fade up one by one
     1100ms   → brass underline grows from centre
     1500ms   → "Enterprises Pvt Ltd · Maldives" tag fades in,
                coral pulse dot starts pulsing
     2200ms   → splash auto-fades out (JS-controlled)
   Background motion: glow pulse + 3 smoke wisps
   ============================================ */

body.splash-active { overflow: hidden; }

.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--cream);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: opacity 600ms ease, visibility 0s linear 600ms;
}
.splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Coral glow that breathes behind the mark */
.splash-glow {
  position: absolute;
  width: min(80vw, 600px);
  height: min(80vw, 600px);
  background: radial-gradient(circle, rgba(232, 115, 83, 0.16), transparent 65%);
  filter: blur(32px);
  animation: splashGlow 3s ease-in-out infinite;
}
@keyframes splashGlow {
  0%, 100% { transform: scale(0.95); opacity: 0.65; }
  50%      { transform: scale(1.10); opacity: 1; }
}

/* Smoke wisps rising from below */
.splash-smoke {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: min(70vw, 320px);
  height: 320px;
  pointer-events: none;
}
.splash-smoke span {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90px;
  height: 280px;
  background: radial-gradient(ellipse 50% 80% at center bottom, rgba(111, 169, 170, 0.22), transparent 60%);
  transform: translateX(-50%);
  filter: blur(12px);
  animation: splashSmoke 4.5s ease-out infinite;
  opacity: 0;
}
.splash-smoke span:nth-child(1) { animation-delay: 0s; }
.splash-smoke span:nth-child(2) { animation-delay: 1.5s; left: 40%; }
.splash-smoke span:nth-child(3) { animation-delay: 3s; left: 60%; }
@keyframes splashSmoke {
  0%   { transform: translateX(-50%) translateY(0) scaleY(0.6); opacity: 0; }
  20%  { opacity: 0.55; }
  100% { transform: translateX(-50%) translateY(-180px) scaleY(1.6); opacity: 0; }
}

/* Centerpiece stage */
.splash-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding-inline: 2rem;
  text-align: center;
}

/* Triangle bounces in */
.splash-mark {
  opacity: 0;
  transform: scale(0.4) translateY(16px);
  animation: splashMarkIn 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms forwards;
}
.splash-mark img {
  width: 76px;
  height: auto;
  display: block;
}
@keyframes splashMarkIn {
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Wordmark — letters fall into place one by one */
.splash-wordmark {
  display: flex;
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.splash-wordmark span {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  animation: splashLetter 450ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.splash-wordmark span:nth-child(1) { animation-delay: 600ms; }
.splash-wordmark span:nth-child(2) { animation-delay: 690ms; }
.splash-wordmark span:nth-child(3) { animation-delay: 780ms; }
.splash-wordmark span:nth-child(4) { animation-delay: 870ms; }
.splash-wordmark span:nth-child(5) { animation-delay: 960ms; }
.splash-wordmark span:nth-child(6) { animation-delay: 1050ms; }
@keyframes splashLetter {
  to { opacity: 1; transform: translateY(0); }
}

/* Brass underline grows from centre */
.splash-line {
  width: 0;
  height: 1px;
  background: var(--brass);
  animation: splashLineGrow 700ms cubic-bezier(0.5, 0, 0.2, 1) 1100ms forwards;
}
@keyframes splashLineGrow {
  to { width: 96px; }
}

/* Tag with mid-dot + pulsing coral indicator */
.splash-tag {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tide);
  opacity: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  animation: splashTag 600ms ease-out 1500ms forwards;
}
@keyframes splashTag {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 0.85; transform: translateY(0); }
}
.splash-tag .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brass);
  display: inline-block;
}
.splash-tag::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
  margin-left: 0.4em;
  animation: splashPulse 1.4s ease-in-out infinite 1800ms;
}
@keyframes splashPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.2); }
}

/* Reduced motion: kill the choreography, keep a brief flash */
@media (prefers-reduced-motion: reduce) {
  .splash-mark, .splash-wordmark span, .splash-line, .splash-tag,
  .splash-glow, .splash-smoke span, .splash-tag::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .splash-line { width: 96px; }
  .splash-smoke { display: none; }
}

/* ============================================
   SPECIAL ORDER CARD (v22)
   Inline on desktop, stacked on mobile.
   ============================================ */
.special-order {
  margin-top: 3rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--cream);
  border: 1px dashed var(--brass);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
}
.special-order-text { flex: 1; min-width: 0; }
.special-order-text h3 {
  margin-top: 0.5rem;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.3;
}
.special-order-text p {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: var(--tide);
  line-height: 1.55;
}
.special-order-cta {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .special-order {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .special-order-cta {
    width: 100%;
    justify-content: center;
  }
}