/* ═══════════════════════════════════════════
   Pure Reef — Main Stylesheet
   White/light + cyan premium marine brand
═══════════════════════════════════════════ */

:root {
  --navy:         #0a1628;
  --navy-mid:     #1e3a5f;
  --navy-card:    #0d2241;
  --bg:           #ffffff;
  --bg-soft:      #f0f8ff;
  --bg-section:   #f7fbff;
  --cyan:         #0891b2;
  --cyan-bright:  #06b6d4;
  --cyan-dark:    #0e7490;
  --cyan-dim:     #0891b2;
  --cyan-glow:    rgba(8,145,178,0.07);
  --cyan-border:  rgba(8,145,178,0.15);
  --gold:         #c8a84b;
  --white:        #ffffff;
  --muted:        #64748b;
  --text:         #1e293b;
  --success:      #059669;
  --warn:         #d97706;
  --error:        #dc2626;
  --shadow-sm:    0 2px 12px rgba(0,0,0,0.06);
  --shadow-md:    0 8px 32px rgba(0,0,0,0.1);
  --shadow-cyan:  0 6px 30px rgba(8,145,178,0.18);
  --radius:       10px;
  --radius-lg:    16px;
  --transition:   0.25s ease;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }

/* ─── Typography ─── */
h1,h2,h3,h4,h5 {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  color:var(--navy);
  line-height:1.12;
}
h1 { font-size:clamp(2.2rem,5vw,3.8rem); letter-spacing:-0.025em; }
h2 { font-size:clamp(1.7rem,3.5vw,2.8rem); letter-spacing:-0.02em; }
h3 { font-size:1.1rem; font-weight:700; }
p  { line-height:1.75; }

.accent       { color:var(--cyan); }
.text-center  { text-align:center; }
.section-label {
  font-family:'Montserrat',sans-serif;
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:0.9rem;
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.section-label::before {
  content:'';
  display:block;
  width:1.5rem;
  height:1px;
  background:var(--cyan);
  flex-shrink:0;
}
.section-title { margin-bottom:1.1rem; }
.section-desc  { color:var(--muted); font-size:1rem; max-width:580px; }
.section-divider {
  height:1px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  opacity:0.18;
  margin-bottom:4rem;
}
.eyebrow {
  font-family:'Montserrat',sans-serif;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.eyebrow::before {
  content:'';
  display:block;
  width:2rem;
  height:1px;
  background:var(--cyan);
}
.lead-text { font-size:1.05rem; color:var(--muted); margin-bottom:2rem; line-height:1.8; }

/* ─── Layout ─── */
.container { max-width:1200px; margin:0 auto; padding:0 5%; }
section    { padding:6rem 0; }

/* ─── Buttons ─── */
.btn-primary {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  background:var(--cyan);
  color:var(--white);
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:0.9rem 2rem;
  border-radius:5px;
  border:none;
  cursor:pointer;
  transition:background var(--transition),transform var(--transition),box-shadow var(--transition);
  box-shadow:var(--shadow-cyan);
}
.btn-primary:hover {
  background:var(--cyan-dark);
  transform:translateY(-2px);
  box-shadow:0 10px 40px rgba(8,145,178,0.35);
  color:var(--white);
}
.btn-secondary {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  border:1.5px solid var(--cyan);
  color:var(--cyan);
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:0.9rem 2rem;
  border-radius:5px;
  transition:background var(--transition),color var(--transition);
}
.btn-secondary:hover { background:var(--cyan); color:var(--white); }
.btn-secondary-white {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  border:1.5px solid rgba(255,255,255,0.55);
  color:var(--white);
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:0.9rem 2rem;
  border-radius:5px;
  transition:border-color var(--transition),background var(--transition);
}
.btn-secondary-white:hover { border-color:var(--white); background:rgba(255,255,255,0.14); }
.btn-outline-sm {
  display:inline-block;
  border:1px solid var(--cyan-border);
  color:var(--cyan);
  font-size:0.8rem;
  font-weight:600;
  padding:0.5rem 1.25rem;
  border-radius:4px;
  transition:background var(--transition),border-color var(--transition);
  margin-top:0.75rem;
}
.btn-outline-sm:hover { background:var(--cyan-glow); border-color:var(--cyan); }

/* ─── Reveal Animation ─── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.65s ease,transform 0.65s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ═══════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════ */
.site-nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:200;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.2rem 5%;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(8,145,178,0.08),var(--shadow-sm);
  transition:background 0.4s,box-shadow 0.4s,backdrop-filter 0.4s;
}
/* WordPress admin bar offset (logged-in users only) */
.admin-bar .site-nav { top:32px; }
.admin-bar .nav-drawer { top:32px; }
@media screen and (max-width:782px) {
  .admin-bar .site-nav { top:46px; }
  .admin-bar .nav-drawer { top:46px; }
}

/* Transparent over dark hero on the front page */
.hero-nav:not(.scrolled) {
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.hero-nav:not(.scrolled) .nav-logo         { color:var(--white); }
.hero-nav:not(.scrolled) .nav-logo span    { color:#67e8f9; }
.hero-nav:not(.scrolled) .nav-logo img     { filter:brightness(10); }
.hero-nav:not(.scrolled) .nav-links a      { color:rgba(255,255,255,0.8); }
.hero-nav:not(.scrolled) .nav-links a:hover{ color:var(--white); }
.hero-nav:not(.scrolled) .nav-links .nav-cta { border-color:rgba(255,255,255,0.55); color:var(--white); }
.hero-nav:not(.scrolled) .nav-links .nav-cta:hover { background:rgba(255,255,255,0.15); }
.hero-nav:not(.scrolled) .nav-hamburger span { background:var(--white); }
.hero-nav:not(.scrolled) .nav-dropdown { background:rgba(10,22,40,0.92); border-color:rgba(255,255,255,0.1); }
.hero-nav:not(.scrolled) .nav-dropdown li a { color:rgba(255,255,255,0.8) !important; }
.hero-nav:not(.scrolled) .nav-dropdown li a:hover { background:rgba(255,255,255,0.07); color:var(--white) !important; }

.nav-logo {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:1.35rem;
  letter-spacing:0.05em;
  color:var(--navy);
  transition:color 0.4s;
}
.nav-logo span { color:var(--cyan); }
.nav-logo img { height:36px; width:auto; }
.nav-links {
  display:flex;
  gap:2.5rem;
  align-items:center;
}
.nav-links a {
  font-size:0.82rem;
  font-weight:500;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color var(--transition);
}
.nav-links a:hover { color:var(--cyan); }
.nav-links .nav-cta {
  border:1.5px solid var(--cyan);
  color:var(--cyan);
  padding:0.45rem 1.2rem;
  border-radius:4px;
  transition:background var(--transition),color var(--transition);
}
.nav-links .nav-cta:hover { background:var(--cyan); color:var(--white); }
.nav-hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:4px;
}
.nav-hamburger span {
  display:block;
  width:24px;
  height:2px;
  background:var(--navy);
  transition:transform 0.3s,opacity 0.3s;
}
.nav-drawer {
  position:fixed;
  top:0; right:-100%;
  width:280px;
  height:100vh;
  background:var(--white);
  border-left:1px solid rgba(0,0,0,0.08);
  box-shadow:var(--shadow-md);
  z-index:300;
  padding:6rem 2rem 2rem;
  transition:right 0.35s ease;
}
.nav-drawer.open { right:0; }
.nav-drawer ul { display:flex; flex-direction:column; gap:0.5rem; }
.nav-drawer a { display:block; padding:0.75rem 0; color:var(--text); font-size:1rem; border-bottom:1px solid rgba(0,0,0,0.06); }
.nav-drawer a:hover { color:var(--cyan); }
.nav-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:250; display:none; }
.nav-overlay.active { display:block; }

/* NAV DROPDOWN */
.nav-has-dropdown { position:relative; }
.nav-dropdown-toggle { cursor:pointer; user-select:none; }
.nav-dropdown {
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:var(--white);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:var(--radius);
  padding:0.5rem;
  padding-top:0.75rem; /* visual spacing without gap */
  min-width:220px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.2s, transform 0.2s;
  z-index:400;
  box-shadow:var(--shadow-md);
}
/* Invisible bridge above dropdown so hover doesn't break crossing the gap */
.nav-dropdown::before {
  content:'';
  position:absolute;
  bottom:100%;
  left:0; right:0;
  height:1rem;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown.open .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
  opacity:1; visibility:visible; pointer-events:all;
  transform:translateX(-50%) translateY(0);
}
.nav-dropdown li a {
  display:block; padding:0.6rem 1rem;
  font-size:0.85rem; color:var(--text) !important;
  border-radius:6px;
  text-transform:none !important; letter-spacing:0 !important;
  transition:background var(--transition), color var(--transition);
}
.nav-dropdown li a:hover { background:var(--bg-soft); color:var(--cyan) !important; }
.drawer-section-label {
  font-size:0.65rem; text-transform:uppercase; letter-spacing:0.15em;
  color:var(--cyan); padding:0.75rem 0 0.25rem; font-weight:600;
}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:#040d1a;
}
.hero-bg {
  position:absolute; inset:0;
  background-image:url('https://images.pexels.com/photos/36731996/pexels-photo-36731996.jpeg?auto=compress&cs=tinysrgb&w=1920');
  background-size:cover;
  background-position:center;
  animation:heroZoom 22s ease-in-out infinite alternate;
}
@keyframes heroZoom { from { transform:scale(1.06); } to { transform:scale(1.0); } }
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(140deg,rgba(4,13,26,0.75) 0%,rgba(8,25,55,0.55) 55%,rgba(4,13,26,0.42) 100%);
}
.hero-inner { position:relative; z-index:2; padding-top:8rem; padding-bottom:3rem; }
.hero-content { max-width:660px; }
.hero-title { font-size:clamp(2.8rem,6.5vw,5rem); margin-bottom:1.5rem; color:var(--white); }
.hero-title .accent { color:#67e8f9; }
.hero-sub { font-size:1.05rem; color:rgba(255,255,255,0.78); max-width:520px; margin-bottom:2.5rem; line-height:1.8; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-stats {
  display:flex;
  gap:3rem;
  margin-top:5rem;
  padding-top:3rem;
  border-top:1px solid rgba(255,255,255,0.14);
}
.stat-num {
  display:block;
  font-family:'Montserrat',sans-serif;
  font-size:2rem;
  font-weight:800;
  color:#67e8f9;
  line-height:1;
}
.stat-label { font-size:0.75rem; color:rgba(255,255,255,0.55); text-transform:uppercase; letter-spacing:0.1em; margin-top:0.3rem; display:block; }

/* ─── Coral Strip ─── */
.coral-strip { display:grid; grid-template-columns:repeat(4,1fr); height:220px; overflow:hidden; }
.coral-strip img { width:100%; height:220px; object-fit:cover; display:block; transition:transform 0.6s ease; flex-shrink:0; }
.coral-strip img:hover { transform:scale(1.03); }

/* ═══════════════════════════════════════════
   ABOUT (HOME)
═══════════════════════════════════════════ */
.section-about { background:var(--bg); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-img-card {
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/3;
  position:relative;
  box-shadow:var(--shadow-md);
}
.about-img-card img { width:100%; height:100%; object-fit:cover; }
.about-img-card svg { width:72%; opacity:0.5; }
.about-badge {
  position:absolute;
  bottom:1.5rem; right:1.5rem;
  background:var(--white);
  border-radius:var(--radius);
  padding:1.25rem 1.5rem;
  text-align:center;
  box-shadow:var(--shadow-md);
}
.badge-num { display:block; font-family:'Montserrat',sans-serif; font-size:2rem; font-weight:800; color:var(--cyan); line-height:1; }
.badge-label { font-size:0.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:0.3rem; display:block; }
.about-points { display:flex; flex-direction:column; gap:1.4rem; margin-top:2rem; }
.about-point { display:flex; gap:1rem; align-items:flex-start; }
.point-icon {
  width:38px; height:38px;
  border-radius:8px;
  background:var(--cyan-glow);
  border:1px solid var(--cyan-border);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0;
}
.about-point h4 { font-size:0.95rem; margin-bottom:0.2rem; color:var(--navy); }
.about-point p { font-size:0.875rem; color:var(--muted); }

/* ─── Gallery Section ─── */
.section-gallery { background:var(--bg-soft); padding:5rem 0; }
.gallery-intro { text-align:center; margin-bottom:3rem; }
.gallery-intro .section-label { justify-content:center; }
.gallery-intro h2 { margin-bottom:0.75rem; }
.gallery-intro p { color:var(--muted); max-width:540px; margin:0 auto; font-size:0.95rem; }
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0.75rem;
}
.gallery-item { height:260px; overflow:hidden; border-radius:var(--radius); }
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.6s ease; }
.gallery-item:hover img { transform:scale(1.05); }

/* ═══════════════════════════════════════════
   PRODUCTS GRID
═══════════════════════════════════════════ */
.section-products { background:var(--bg); }
.products-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:3rem; flex-wrap:wrap; gap:2rem; }
.products-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.product-card {
  background:var(--white);
  border:1px solid rgba(0,0,0,0.07);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:box-shadow var(--transition),transform 0.3s;
  position:relative;
  box-shadow:var(--shadow-sm);
}
.product-card::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,var(--cyan),var(--cyan-bright));
  opacity:0; transition:opacity var(--transition);
}
.product-card:hover { box-shadow:var(--shadow-cyan); transform:translateY(-4px); }
.product-card:hover::before { opacity:1; }
.product-card-img { aspect-ratio:1; overflow:hidden; background:var(--bg-soft); }
.product-card-img img { width:100%; height:100%; object-fit:contain; padding:1rem; transition:transform 0.4s; }
.product-card:hover .product-card-img img { transform:scale(1.04); }
.product-card-body { padding:1.4rem; }
.product-tag {
  display:inline-block;
  font-size:0.65rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--cyan);
  background:var(--cyan-glow);
  border:1px solid var(--cyan-border);
  padding:0.2rem 0.6rem; border-radius:3px; margin-bottom:0.75rem;
}
.product-card h3 { font-size:1rem; margin-bottom:0.3rem; color:var(--navy); }
.product-tagline { font-size:0.8rem; color:var(--cyan-dark); margin-bottom:0.5rem; font-weight:500; }
.product-excerpt { font-size:0.82rem; color:var(--muted); line-height:1.65; margin-bottom:0.75rem; }
.product-sizes { font-size:0.75rem; color:var(--muted); margin-bottom:0.9rem; }
.product-target { display:flex; gap:0.5rem; align-items:baseline; margin-bottom:0.75rem; }
.target-label { font-size:0.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }
.target-val { font-size:0.85rem; color:var(--cyan); font-weight:600; }
.product-link { font-size:0.82rem; font-weight:600; color:var(--cyan); letter-spacing:0.04em; transition:color var(--transition); }
.product-link:hover { color:var(--cyan-dark); }

/* archive page */
.products-archive { background:var(--bg); }
.archive-grid { grid-template-columns:repeat(3,1fr); }
.archive-filters { display:flex; flex-wrap:wrap; gap:0.75rem; margin-bottom:3rem; }
.filter-btn {
  background:var(--white);
  border:1.5px solid rgba(0,0,0,0.1);
  color:var(--muted);
  font-family:'Montserrat',sans-serif;
  font-size:0.75rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  padding:0.5rem 1.25rem; border-radius:4px; cursor:pointer;
  transition:background var(--transition),color var(--transition),border-color var(--transition);
}
.filter-btn.active,.filter-btn:hover { background:var(--cyan-glow); border-color:var(--cyan); color:var(--cyan); }
.product-card.hidden { display:none; }

/* ─── Video / Media Section ─── */
.section-video { background:var(--navy); padding:6rem 0; }
.video-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.video-embed { border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,0.5); }
.video-wrap { position:relative; padding-bottom:56.25%; background:#000; }
.video-wrap iframe,.video-wrap video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-thumb { position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/9; }
.video-thumb img { width:100%; height:100%; object-fit:cover; }
.video-thumb-overlay {
  position:absolute; inset:0;
  background:rgba(4,13,26,0.38);
  display:flex; align-items:center; justify-content:center;
}
.play-btn {
  width:72px; height:72px;
  border-radius:50%;
  background:rgba(255,255,255,0.95);
  display:flex; align-items:center; justify-content:center;
  color:var(--navy);
  font-size:1.5rem;
  cursor:pointer;
  transition:transform var(--transition),box-shadow var(--transition);
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
}
.play-btn:hover { transform:scale(1.1); box-shadow:0 12px 40px rgba(0,0,0,0.4); color:var(--navy); }
.video-content h2 { color:var(--white); margin-bottom:1rem; }
.video-content .section-label { color:#67e8f9; }
.video-content .section-label::before { background:#67e8f9; }
.video-content p { color:rgba(255,255,255,0.68); margin-bottom:2rem; font-size:0.97rem; line-height:1.8; }

/* ═══════════════════════════════════════════
   WHY PURE REEF
═══════════════════════════════════════════ */
.section-why { background:var(--bg-soft); }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.why-features { display:flex; flex-direction:column; gap:2.25rem; }
.why-feature { display:flex; gap:1.5rem; align-items:flex-start; }
.why-num {
  font-family:'Montserrat',sans-serif; font-size:2.25rem; font-weight:800;
  color:rgba(8,145,178,0.14); line-height:1; flex-shrink:0; width:2.5rem;
}
.why-feature h3 { font-size:1rem; margin-bottom:0.4rem; color:var(--navy); }
.why-feature p { font-size:0.875rem; color:var(--muted); line-height:1.75; }
.why-standards {
  background:var(--white);
  border:1px solid rgba(0,0,0,0.07);
  border-radius:var(--radius-lg);
  padding:2.5rem;
  box-shadow:var(--shadow-sm);
}
.standards-label { font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.15em; color:var(--muted); margin-bottom:1.75rem; }
.standard-item { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1rem; padding:0.9rem 1.1rem; background:var(--bg-soft); border:1px solid var(--cyan-border); border-radius:8px; }
.standard-dot { width:8px; height:8px; border-radius:50%; background:var(--cyan); flex-shrink:0; margin-top:5px; }
.standard-item strong { display:block; font-size:0.88rem; margin-bottom:0.15rem; color:var(--navy); }
.standard-item span { font-size:0.78rem; color:var(--muted); }

/* ═══════════════════════════════════════════
   TRADE SECTION
═══════════════════════════════════════════ */
.section-trade { background:var(--bg); }
.section-trade .section-label { justify-content:center; }
.trade-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3.5rem; text-align:left; }
.trade-card {
  background:var(--white);
  border:1px solid rgba(0,0,0,0.07);
  border-radius:var(--radius-lg);
  padding:2rem;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition),transform 0.3s;
}
.trade-card:hover { box-shadow:var(--shadow-cyan); transform:translateY(-3px); }
.trade-icon { font-size:2rem; display:block; margin-bottom:1rem; }
.trade-card h3 { font-size:1rem; margin-bottom:0.6rem; color:var(--navy); }
.trade-card p { font-size:0.85rem; color:var(--muted); line-height:1.75; }

/* ═══════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════ */
.section-contact { background:var(--bg-soft); }
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:5rem; align-items:start; }
.contact-info h3 { font-size:1.1rem; margin-bottom:1rem; color:var(--navy); }
.contact-info > p { font-size:0.9rem; color:var(--muted); margin-bottom:2rem; line-height:1.8; }
.contact-details { display:flex; flex-direction:column; gap:1rem; }
.contact-detail { display:flex; gap:1rem; align-items:center; }
.detail-icon {
  width:38px; height:38px;
  border-radius:8px;
  background:var(--cyan-glow); border:1px solid var(--cyan-border);
  display:flex; align-items:center; justify-content:center;
  font-size:0.9rem; flex-shrink:0;
}
.contact-detail > div { display:flex; flex-direction:column; }
.detail-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); }
.contact-detail a,.contact-detail span { font-size:0.9rem; color:var(--text); }
.contact-note {
  margin-top:2rem;
  background:var(--cyan-glow);
  border:1px solid var(--cyan-border);
  border-radius:var(--radius);
  padding:1.25rem;
}
.contact-note strong { display:block; color:var(--cyan); font-size:0.875rem; margin-bottom:0.4rem; }
.contact-note p { font-size:0.82rem; color:var(--muted); }

/* Form Card */
.contact-form-card {
  background:var(--white);
  border:1px solid rgba(0,0,0,0.07);
  border-radius:var(--radius-lg);
  padding:2.5rem;
  box-shadow:var(--shadow-md);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:0.5rem; }
.form-group label span { color:var(--cyan); }
.form-group input,.form-group select,.form-group textarea {
  width:100%;
  background:var(--bg-soft);
  border:1.5px solid rgba(0,0,0,0.1);
  border-radius:6px;
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:0.9rem;
  padding:0.75rem 1rem;
  outline:none;
  transition:border-color var(--transition),box-shadow var(--transition);
  -webkit-appearance:none;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(8,145,178,0.1);
}
.form-group select option { background:var(--white); }
.form-group textarea { resize:vertical; min-height:110px; }
.form-group input::placeholder,.form-group textarea::placeholder { color:rgba(100,116,139,0.55); }
.form-submit { width:100%; margin-top:0.25rem; }
.form-error { margin-top:1rem; padding:0.75rem 1rem; background:rgba(220,38,38,0.05); border:1px solid rgba(220,38,38,0.2); border-radius:6px; font-size:0.85rem; color:var(--error); }
.form-success { text-align:center; padding:3rem 2rem; }
.success-icon { display:block; font-size:2.5rem; margin-bottom:1rem; color:var(--success); }
.form-success h3 { color:var(--success); margin-bottom:0.5rem; }
.form-success p { color:var(--muted); }

/* ═══════════════════════════════════════════
   INNER HERO (non-home pages)
═══════════════════════════════════════════ */
.inner-hero {
  padding:9rem 0 5rem;
  background:linear-gradient(135deg,var(--bg-soft) 0%,var(--bg) 100%);
  border-bottom:1px solid var(--cyan-border);
}
.inner-hero .eyebrow,.inner-hero p:not([class]) { max-width:600px; }
.inner-hero h1 { margin:0.75rem 0 1.25rem; color:var(--navy); }
.inner-hero p:not([class]) { color:var(--muted); font-size:1.05rem; max-width:580px; }

/* ─── Breadcrumb ─── */
.breadcrumb { display:flex; gap:0.6rem; align-items:center; font-size:0.82rem; color:var(--muted); margin-bottom:2rem; }
.breadcrumb a { color:var(--muted); transition:color var(--transition); }
.breadcrumb a:hover { color:var(--cyan); }
.breadcrumb span { color:rgba(0,0,0,0.2); }
.breadcrumb span:last-child { color:var(--text); }

/* ═══════════════════════════════════════════
   PRODUCT DETAIL PAGE
═══════════════════════════════════════════ */
.product-hero { padding:8rem 0 0; background:var(--bg-soft); }
.product-detail { background:var(--bg-soft); padding-bottom:6rem; }
.product-detail-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:4rem; align-items:start; }
.product-image-card {
  border-radius:var(--radius-lg);
  border:1px solid rgba(0,0,0,0.07);
  background:var(--white);
  padding:2.5rem;
  margin-bottom:1.5rem;
  box-shadow:var(--shadow-sm);
}
.product-image-card img { width:100%; object-fit:contain; max-height:360px; }
.product-sizes-block {
  background:var(--cyan-glow);
  border:1px solid var(--cyan-border);
  border-radius:var(--radius);
  padding:1rem 1.25rem;
  margin-bottom:1.25rem;
}
.sizes-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:0.3rem; }
.sizes-val { font-weight:600; color:var(--cyan); font-size:1rem; }
.product-content .product-tag { margin-bottom:1rem; display:inline-block; }
.product-content h1 { margin-bottom:0.5rem; color:var(--navy); }
.product-tagline-lg { font-size:1.1rem; color:var(--cyan); font-weight:500; margin-bottom:1.75rem; }
.product-body { color:var(--text); font-size:0.95rem; line-height:1.8; margin-bottom:2rem; }
.product-body ul { margin:0.75rem 0 0.75rem 1.5rem; list-style:disc; }
.product-body ul li { margin-bottom:0.4rem; color:var(--muted); }
.product-body strong { color:var(--navy); }
.product-spec {
  display:flex; gap:1rem; align-items:center;
  background:var(--cyan-glow); border:1px solid var(--cyan-border);
  border-radius:var(--radius); padding:1.1rem 1.4rem; margin-bottom:2rem;
}
.spec-icon { font-size:1.4rem; }
.spec-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); display:block; margin-bottom:0.2rem; }
.product-spec strong { color:var(--cyan); font-size:1.05rem; display:block; }
.product-dosage {
  background:var(--white);
  border:1px solid rgba(0,0,0,0.07);
  border-radius:var(--radius);
  padding:1.5rem; margin-bottom:1.5rem;
  box-shadow:var(--shadow-sm);
}
.product-dosage h3 { font-size:0.9rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--cyan); margin-bottom:0.75rem; }
.product-dosage p { font-size:0.88rem; color:var(--muted); line-height:1.8; }
.product-caution {
  background:rgba(217,119,6,0.06);
  border:1px solid rgba(217,119,6,0.2);
  border-radius:var(--radius);
  padding:1.25rem; margin-bottom:1.5rem;
}
.product-caution strong { color:var(--warn); font-size:0.85rem; display:block; margin-bottom:0.5rem; }
.product-caution p { font-size:0.85rem; color:var(--muted); }
.product-flags { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.5rem; }
.flag { font-size:0.7rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:0.25rem 0.7rem; border-radius:3px; }
.flag-marine  { background:rgba(8,145,178,0.08);  color:var(--cyan);    border:1px solid var(--cyan-border); }
.flag-fresh   { background:rgba(5,150,105,0.08);  color:var(--success); border:1px solid rgba(5,150,105,0.2); }
.flag-sa      { background:rgba(0,119,73,0.08);   color:#059669;        border:1px solid rgba(0,119,73,0.2); }
.flag-children{ background:rgba(217,119,6,0.06);  color:var(--warn);    border:1px solid rgba(217,119,6,0.15); }
.product-category-tag { font-size:0.8rem; color:var(--muted); }
.product-category-tag a { color:var(--cyan); }

.product-nav {
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid rgba(0,0,0,0.08); margin-top:4rem; padding-top:2rem;
}
.product-nav-link { display:flex; flex-direction:column; gap:0.25rem; }
.product-nav-link span { font-size:0.75rem; color:var(--muted); }
.product-nav-link strong { font-size:0.95rem; color:var(--navy); transition:color var(--transition); }
.product-nav-link:hover strong { color:var(--cyan); }
.product-nav-all {
  font-size:0.82rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--muted); border:1px solid rgba(0,0,0,0.1); padding:0.5rem 1.2rem;
  border-radius:4px; transition:border-color var(--transition),color var(--transition);
}
.product-nav-all:hover { border-color:var(--cyan); color:var(--cyan); }

.related-products { background:var(--bg); }
.related-products h2 { margin-bottom:2.5rem; }

/* ═══════════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════════ */
.about-page { background:var(--bg-soft); }
.about-intro { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-intro-img { border-radius:var(--radius-lg); border:1px solid rgba(0,0,0,0.07); background:var(--bg-soft); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:var(--shadow-sm); }
.about-intro-img svg { width:72%; opacity:0.5; }
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:1rem; }
.value-card { background:var(--white); border:1px solid rgba(0,0,0,0.07); border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow-sm); }
.value-icon { font-size:1.75rem; display:block; margin-bottom:1rem; }
.value-card h3 { font-size:1rem; margin-bottom:0.6rem; color:var(--navy); }
.value-card p { font-size:0.85rem; color:var(--muted); line-height:1.75; }

/* ═══════════════════════════════════════════
   TRADE PAGE
═══════════════════════════════════════════ */
.trade-page { background:var(--bg-soft); }
.trade-types-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:1rem; }
.trade-type-card { background:var(--white); border:1px solid rgba(0,0,0,0.07); border-radius:var(--radius-lg); padding:2.5rem; box-shadow:var(--shadow-sm); }
.trade-type-icon { font-size:2.25rem; display:block; margin-bottom:1.25rem; }
.trade-type-card h3 { font-size:1.1rem; margin-bottom:0.75rem; color:var(--navy); }
.trade-type-card p { font-size:0.875rem; color:var(--muted); line-height:1.75; margin-bottom:0.75rem; }
.qualifies { font-size:0.78rem !important; color:var(--cyan) !important; border-top:1px solid var(--cyan-border); padding-top:0.75rem; }
.benefits-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.benefit-item { display:flex; gap:1rem; align-items:flex-start; background:var(--white); border:1px solid rgba(0,0,0,0.07); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm); }
.benefit-item > span { font-size:1.5rem; flex-shrink:0; }
.benefit-item strong { display:block; font-size:0.95rem; margin-bottom:0.4rem; color:var(--navy); }
.benefit-item p { font-size:0.82rem; color:var(--muted); line-height:1.7; }
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem; }
.step { background:var(--white); border:1px solid rgba(0,0,0,0.07); border-radius:var(--radius); padding:1.75rem 1.5rem; box-shadow:var(--shadow-sm); }
.step-num { font-family:'Montserrat',sans-serif; font-size:2.5rem; font-weight:800; color:rgba(8,145,178,0.12); line-height:1; display:block; margin-bottom:1rem; }
.step h4 { font-size:0.95rem; margin-bottom:0.5rem; color:var(--navy); }
.step p { font-size:0.82rem; color:var(--muted); line-height:1.7; }

/* ═══════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════ */
.section-cta {
  background:var(--navy);
  padding:6rem 0;
  position:relative;
  overflow:hidden;
}
.section-cta::before {
  content:'';
  position:absolute; inset:0;
  background-image:url('https://images.pexels.com/photos/36904707/pexels-photo-36904707.jpeg?auto=compress&cs=tinysrgb&w=1400');
  background-size:cover; background-position:center;
  opacity:0.09;
}
.section-cta > .container { position:relative; z-index:1; }
.section-cta h2 { margin-bottom:1rem; color:var(--white); }
.section-cta p { color:rgba(255,255,255,0.65); margin-bottom:2.5rem; }
.section-cta .btn-secondary { border-color:rgba(255,255,255,0.45); color:var(--white); }
.section-cta .btn-secondary:hover { background:rgba(255,255,255,0.12); }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.site-footer { background:var(--navy); border-top:1px solid rgba(255,255,255,0.05); }
.footer-inner {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:3rem;
  padding:4rem 5% 3rem;
  max-width:1200px;
  margin:0 auto;
}
.footer-logo { font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.2rem; color:var(--white); margin-bottom:0.75rem; display:block; }
.footer-logo span { color:#67e8f9; }
.footer-brand p { font-size:0.82rem; color:rgba(255,255,255,0.4); line-height:1.7; }
.footer-links-group h4,.footer-contact h4 {
  font-size:0.7rem; text-transform:uppercase; letter-spacing:0.15em; color:rgba(255,255,255,0.3);
  margin-bottom:1.25rem; font-weight:600;
}
.footer-links-group li,.footer-contact p { margin-bottom:0.6rem; }
.footer-links-group a,.footer-contact a { font-size:0.85rem; color:rgba(255,255,255,0.4); transition:color var(--transition); }
.footer-links-group a:hover,.footer-contact a:hover { color:#67e8f9; }
.footer-contact p { font-size:0.85rem; color:rgba(255,255,255,0.4); }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.5rem 5%;
  max-width:1200px; margin:0 auto;
  border-top:1px solid rgba(255,255,255,0.05);
  font-size:0.78rem; color:rgba(255,255,255,0.25);
  flex-wrap:wrap; gap:0.5rem;
}

/* ═══════════════════════════════════════════
   REEF SVG (inline)
═══════════════════════════════════════════ */
.reef-svg { width:100%; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width:1100px) {
  .products-grid { grid-template-columns:repeat(3,1fr); }
  .archive-grid { grid-template-columns:repeat(2,1fr); }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .video-grid { grid-template-columns:1fr; gap:3rem; }
}

@media (max-width:900px) {
  .about-grid,.why-grid,.contact-grid,.product-detail-grid,.about-intro { grid-template-columns:1fr; gap:3rem; }
  .trade-cards,.trade-types-grid,.values-grid { grid-template-columns:1fr; }
  .benefits-grid { grid-template-columns:1fr 1fr; }
  .steps-grid { grid-template-columns:1fr 1fr; }
  .products-grid { grid-template-columns:repeat(2,1fr); }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .about-badge { bottom:1rem; right:1rem; }
  .hero-stats { gap:2rem; }
  .form-row { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .product-hero { padding:8rem 0 0; }
  .coral-strip { height:140px; }
  .gallery-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:600px) {
  .products-grid { grid-template-columns:1fr; }
  .hero-stats { flex-wrap:wrap; gap:1.5rem; }
  .hero-actions { flex-direction:column; }
  .btn-primary,.btn-secondary,.btn-secondary-white { width:100%; justify-content:center; }
  .trade-cards { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .benefits-grid { grid-template-columns:1fr; }
  .steps-grid { grid-template-columns:1fr; }
  .product-nav { flex-direction:column; gap:1.5rem; text-align:center; }
  .coral-strip { grid-template-columns:repeat(2,1fr); height:180px; }
  .gallery-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════
   PARAMETER TRACKER  (dark panel on white page)
═══════════════════════════════════════════ */
.tracker-section { background:var(--navy); }
.tracker-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:2.5rem; flex-wrap:wrap; gap:1rem; }
.tank-selector { display:flex; align-items:center; gap:0.75rem; }
.tank-selector label { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.45); }
.tank-selector select {
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
  color:var(--white); padding:0.5rem 1rem; border-radius:6px;
  font-family:'Inter',sans-serif; font-size:0.9rem; outline:none;
}
.icon-btn {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
  color:var(--white); width:36px; height:36px; border-radius:6px;
  cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  transition:background var(--transition), border-color var(--transition);
}
.icon-btn:hover { background:rgba(103,232,249,0.1); border-color:rgba(103,232,249,0.35); }
.icon-btn.danger:hover { background:rgba(220,38,38,0.12); border-color:rgba(220,38,38,0.4); }

/* Status cards */
.param-status-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:3rem; }
.status-card {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09);
  border-radius:var(--radius); padding:1.25rem; cursor:pointer;
  transition:border-color var(--transition), background var(--transition), transform 0.2s;
}
.status-card:hover { transform:translateY(-2px); }
.status-ok   { border-color:rgba(103,232,249,0.22); }
.status-low  { border-color:rgba(251,191,36,0.4);  background:rgba(251,191,36,0.05); }
.status-high { border-color:rgba(248,113,113,0.4); background:rgba(248,113,113,0.05); }
.status-none { opacity:0.6; }
.status-card-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.38); margin-bottom:0.4rem; }
.status-card-value { font-family:'Montserrat',sans-serif; font-size:1.5rem; font-weight:800; color:var(--white); line-height:1; margin-bottom:0.4rem; }
.status-card-value span { font-size:0.75rem; font-weight:400; color:rgba(255,255,255,0.38); }
.status-badge { font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; padding:0.15rem 0.5rem; border-radius:3px; display:inline-block; margin-bottom:0.3rem; }
.status-badge-ok   { color:#67e8f9; background:rgba(103,232,249,0.1); }
.status-badge-low  { color:#fbbf24; background:rgba(251,191,36,0.1); }
.status-badge-high { color:#f87171; background:rgba(248,113,113,0.1); }
.status-badge-none { color:rgba(255,255,255,0.25); background:rgba(255,255,255,0.05); }
.status-range { font-size:0.7rem; color:rgba(255,255,255,0.28); }

/* Charts */
.charts-section { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-lg); padding:2.5rem; margin-bottom:2rem; }
.charts-section h2 { font-size:1.1rem; margin-bottom:1.5rem; color:var(--white); }
.chart-tabs { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.5rem; }
.chart-tab {
  background:none; border:1px solid rgba(255,255,255,0.11); color:rgba(255,255,255,0.38);
  font-family:'Montserrat',sans-serif; font-size:0.72rem; font-weight:600;
  letter-spacing:0.07em; text-transform:uppercase; padding:0.4rem 0.9rem;
  border-radius:4px; cursor:pointer; transition:all var(--transition);
}
.chart-tab.active,.chart-tab:hover { background:rgba(103,232,249,0.09); border-color:rgba(103,232,249,0.38); color:#67e8f9; }
.chart-wrap { position:relative; height:300px; }

/* Recommendations */
.recommendations-section { margin-bottom:2.5rem; }
.recommendations-section h2 { margin-bottom:0.5rem; color:var(--white); }
.recs-sub { color:rgba(255,255,255,0.4); font-size:0.9rem; margin-bottom:1.5rem; }
.recs-all-ok { display:flex; align-items:center; gap:1rem; background:rgba(5,150,105,0.1); border:1px solid rgba(5,150,105,0.22); border-radius:var(--radius); padding:1.25rem 1.5rem; }
.recs-all-ok span { font-size:1.5rem; color:#34d399; }
.recs-all-ok p { color:#34d399; font-weight:500; }
.recs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.rec-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); border-radius:var(--radius); padding:1.25rem; }
.rec-low  { border-color:rgba(251,191,36,0.32); background:rgba(251,191,36,0.04); }
.rec-high { border-color:rgba(248,113,113,0.32); background:rgba(248,113,113,0.04); }
.rec-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.75rem; }
.rec-param { font-family:'Montserrat',sans-serif; font-size:0.95rem; font-weight:700; color:var(--white); }
.rec-status { font-size:0.68rem; font-weight:600; color:#fbbf24; text-align:right; }
.rec-val  { font-size:0.82rem; color:rgba(255,255,255,0.4); margin-bottom:0.4rem; }
.rec-fix  { font-size:0.85rem; color:rgba(255,255,255,0.68); margin-bottom:0.75rem; }
.rec-link { font-size:0.8rem; font-weight:600; color:#67e8f9; }
.rec-link:hover { color:var(--white); }

/* History */
.history-section { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-lg); padding:2.5rem; }
.history-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.history-header h2 { font-size:1.1rem; color:var(--white); }
.btn-secondary.small { font-size:0.75rem; padding:0.45rem 1rem; }
.table-wrap { overflow-x:auto; }
.readings-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.readings-table th { text-align:left; padding:0.6rem 0.75rem; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.28); border-bottom:1px solid rgba(255,255,255,0.07); white-space:nowrap; }
.readings-table td { padding:0.6rem 0.75rem; border-bottom:1px solid rgba(255,255,255,0.04); color:rgba(255,255,255,0.72); white-space:nowrap; }
.readings-table tr:last-child td { border-bottom:none; }
.empty-row td { text-align:center; color:rgba(255,255,255,0.28); padding:2rem; }
.delete-row-btn { background:none; border:none; color:rgba(255,255,255,0.22); cursor:pointer; font-size:0.8rem; padding:0.2rem 0.4rem; border-radius:3px; transition:color var(--transition),background var(--transition); }
.delete-row-btn:hover { color:#f87171; background:rgba(248,113,113,0.1); }
.tracker-note { text-align:center; color:rgba(255,255,255,0.28); font-size:0.78rem; margin-top:2rem; }

/* Modal */
.modal-overlay {
  position:fixed; inset:0; z-index:500;
  display:none; align-items:center; justify-content:center;
  padding:1rem;
}
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:499; display:none; }
.modal-card { background:var(--navy-mid); border:1px solid rgba(255,255,255,0.09); border-radius:var(--radius-lg); width:100%; max-width:680px; max-height:90vh; overflow-y:auto; position:relative; z-index:1; box-shadow:0 30px 60px rgba(0,0,0,0.5); }
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:1.5rem 2rem; border-bottom:1px solid rgba(255,255,255,0.07); }
.modal-header h3 { font-size:1rem; color:var(--white); }
.modal-close { background:none; border:none; color:rgba(255,255,255,0.38); font-size:1.1rem; cursor:pointer; }
.modal-body { padding:1.5rem 2rem; }
.param-input-date { margin-bottom:1.25rem; }
.param-input-date label { display:block; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.38); margin-bottom:0.4rem; }
.param-input-date input { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.11); border-radius:6px; color:var(--white); padding:0.6rem 0.9rem; font-family:'Inter',sans-serif; font-size:0.9rem; outline:none; }
.param-inputs-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.param-input-group label { display:block; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.38); margin-bottom:0.4rem; }
.param-input-group label small { font-size:0.65rem; color:rgba(255,255,255,0.22); display:block; margin-top:0.1rem; text-transform:none; letter-spacing:0; }
.input-unit-wrap { display:flex; align-items:center; }
.input-unit-wrap input { flex:1; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.11); border-right:none; border-radius:6px 0 0 6px; color:var(--white); padding:0.65rem 0.9rem; font-family:'Inter',sans-serif; font-size:0.9rem; outline:none; transition:border-color var(--transition); }
.input-unit-wrap input:focus { border-color:rgba(103,232,249,0.4); }
.input-unit-wrap .unit { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.11); border-left:none; border-radius:0 6px 6px 0; padding:0.65rem 0.75rem; font-size:0.75rem; color:rgba(255,255,255,0.3); white-space:nowrap; }
.modal-footer { display:flex; justify-content:flex-end; gap:1rem; padding:1.25rem 2rem; border-top:1px solid rgba(255,255,255,0.07); }

/* ═══════════════════════════════════════════
   DOSAGE CALCULATOR  (dark panel)
═══════════════════════════════════════════ */
.calculator-section { background:var(--navy); }
.calc-grid { display:grid; grid-template-columns:340px 1fr; gap:2.5rem; align-items:start; }
.calc-panel { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09); border-radius:var(--radius-lg); padding:2rem; position:sticky; top:6rem; }
.calc-block { margin-bottom:1.25rem; }
.calc-block h3 { font-size:1rem; margin-bottom:0.75rem; color:var(--white); }
.calc-block label { display:block; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.38); margin-bottom:0.4rem; }
.calc-panel input[type="number"] {
  width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.11);
  border-radius:6px; color:var(--white); font-family:'Inter',sans-serif;
  font-size:0.9rem; padding:0.65rem 0.9rem; outline:none; transition:border-color var(--transition);
}
.calc-panel input[type="number"]:focus { border-color:rgba(103,232,249,0.4); }
.calc-divider { height:1px; background:rgba(255,255,255,0.07); margin:1.5rem 0; }
.calc-section-title { font-size:0.85rem; color:rgba(255,255,255,0.3); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:1.25rem; font-weight:600; }
.maintenance-note { background:rgba(103,232,249,0.06); border:1px solid rgba(103,232,249,0.14); border-radius:6px; padding:0.75rem 1rem; font-size:0.8rem; color:rgba(255,255,255,0.45); }

.calc-results { display:flex; flex-direction:column; gap:1.25rem; }
.result-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-lg); padding:1.75rem; transition:border-color var(--transition); }
.result-ok   { border-color:rgba(103,232,249,0.14); }
.result-low  { border-color:rgba(251,191,36,0.28); }
.result-high { border-color:rgba(248,113,113,0.28); }
.result-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1rem; }
.result-tag { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.1em; color:#67e8f9; display:block; margin-bottom:0.2rem; }
.result-card h3 { font-size:1rem; margin:0; color:var(--white); }
.result-status { font-size:0.72rem; font-weight:600; color:#fbbf24; text-align:right; }
.result-levels { margin-bottom:1.25rem; }
.level-labels { display:flex; justify-content:space-between; font-size:0.7rem; color:rgba(255,255,255,0.28); margin-top:0.4rem; }
.level-current { color:var(--white); font-weight:600; }
.result-doses { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.dose-block { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius); padding:1rem; }
.dose-correction { border-color:rgba(251,191,36,0.2); background:rgba(251,191,36,0.04); }
.dose-label { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.32); display:block; margin-bottom:0.3rem; }
.dose-amount { font-family:'Montserrat',sans-serif; font-size:1.75rem; font-weight:800; color:#67e8f9; line-height:1; display:block; }
.dose-sub { font-size:0.72rem; color:rgba(255,255,255,0.32); display:block; margin-top:0.2rem; }
.dose-note { font-size:0.75rem; color:#fbbf24; margin-top:0.6rem; line-height:1.5; }
.result-product-link { font-size:0.8rem; font-weight:600; color:#67e8f9; }
.result-product-link:hover { color:var(--white); }

.calc-explainer { margin-top:3rem; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-lg); padding:2.5rem; }
.calc-explainer h2 { margin-bottom:2rem; color:var(--white); }
.explainer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:1.5rem; }
.explainer-icon { font-size:1.75rem; display:block; margin-bottom:0.75rem; }
.explainer-card h4 { font-size:0.95rem; margin-bottom:0.5rem; color:var(--white); }
.explainer-card p { font-size:0.85rem; color:rgba(255,255,255,0.42); line-height:1.7; }
.calc-disclaimer { font-size:0.78rem; color:rgba(255,255,255,0.28); border-top:1px solid rgba(255,255,255,0.07); padding-top:1rem; line-height:1.7; }

/* ═══════════════════════════════════════════
   STOCKIST LOCATOR
═══════════════════════════════════════════ */
.stockists-section { background:var(--bg); }
.stockist-controls { display:flex; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
.stockist-search-input {
  flex:1; min-width:220px;
  background:var(--white); border:1.5px solid rgba(0,0,0,0.1);
  border-radius:6px; color:var(--text); padding:0.7rem 1rem;
  font-family:'Inter',sans-serif; font-size:0.9rem; outline:none;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.stockist-search-input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(8,145,178,0.1); }
.stockist-filter {
  background:var(--white); border:1.5px solid rgba(0,0,0,0.1);
  border-radius:6px; color:var(--text); padding:0.7rem 1rem;
  font-family:'Inter',sans-serif; font-size:0.85rem; outline:none; cursor:pointer;
}
.stockist-layout { display:grid; grid-template-columns:1fr 360px; gap:1.5rem; margin-bottom:3rem; }
.stockist-map-wrap { border-radius:var(--radius-lg); overflow:hidden; border:1px solid rgba(0,0,0,0.08); box-shadow:var(--shadow-sm); }
#stockist-map { height:500px; background:var(--bg-soft); }
.stockist-list { display:flex; flex-direction:column; gap:0.75rem; max-height:500px; overflow-y:auto; }
.stockist-card {
  background:var(--white); border:1.5px solid rgba(0,0,0,0.07);
  border-radius:var(--radius); padding:1.1rem; cursor:pointer;
  transition:border-color var(--transition), box-shadow var(--transition);
  box-shadow:var(--shadow-sm);
}
.stockist-card:hover,.stockist-card.active { border-color:var(--cyan); box-shadow:var(--shadow-cyan); }
.stockist-logo { box-sizing:border-box; width:100%; display:flex; align-items:center; justify-content:center; margin-bottom:0.75rem; background:var(--bg-soft); border-radius:6px; padding:0.6rem 1rem; overflow:hidden; }
.stockist-logo img { max-height:50px; max-width:100%; min-width:0; flex-shrink:1; width:auto; height:auto; object-fit:contain; display:block; }
.stockist-card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.4rem; }
.stockist-card h4 { font-size:0.95rem; font-weight:700; color:var(--navy); }
.stockist-type-badge { font-size:0.62rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--cyan); background:var(--cyan-glow); border:1px solid var(--cyan-border); padding:0.15rem 0.5rem; border-radius:3px; flex-shrink:0; }
.stockist-location,.stockist-phone { font-size:0.8rem; color:var(--muted); margin-bottom:0.2rem; }
.stockist-phone a { color:var(--muted); }
.stockist-phone a:hover { color:var(--cyan); }
.stockist-web { font-size:0.78rem; font-weight:600; color:var(--cyan); display:inline-block; margin-top:0.4rem; }
.stockist-empty { text-align:center; padding:3rem 2rem; }
.stockist-empty span { font-size:2.5rem; display:block; margin-bottom:1rem; }
.stockist-empty h3 { margin-bottom:0.5rem; }
.stockist-empty p { color:var(--muted); font-size:0.9rem; }
#no-results { display:none; color:var(--muted); text-align:center; padding:2rem; }
.stockist-cta { background:var(--bg-soft); border:1px solid var(--cyan-border); border-radius:var(--radius-lg); padding:3rem; text-align:center; margin-top:2rem; }
.stockist-cta h3 { margin-bottom:0.75rem; }
.stockist-cta p { color:var(--muted); max-width:480px; margin:0 auto 2rem; }

/* Leaflet custom marker */
.leaflet-div-icon { background:none !important; border:none !important; }
.pr-marker-inner { width:16px; height:16px; border-radius:50%; background:var(--cyan); border:3px solid white; box-shadow:0 0 0 2px var(--cyan),0 2px 8px rgba(8,145,178,0.4); }
.pr-marker-logo-inner { width:32px; height:20px; border-radius:4px; background:#fff; border:2px solid var(--cyan); box-shadow:0 2px 8px rgba(0,0,0,0.2); overflow:hidden; display:flex; align-items:center; justify-content:center; padding:2px; box-sizing:border-box; }
.pr-marker-logo-inner img { width:100%; height:100%; object-fit:contain; display:block; }
.map-popup { font-family:'Inter',sans-serif; color:#111; line-height:1.5; }
.map-popup-logo { display:block; max-height:36px; max-width:140px; width:auto; object-fit:contain; margin-bottom:0.5rem; }
.map-popup strong { display:block; font-weight:700; margin-bottom:0.25rem; }
.map-popup span,.map-popup a,.map-popup p { display:block; font-size:0.82rem; margin-bottom:0.15rem; }
.map-popup a { color:#0891b2; }

/* ═══════════════════════════════════════════
   REEF CHEMISTRY GUIDE
═══════════════════════════════════════════ */
.guide-section { background:var(--bg-soft); }
.guide-quick-ref { background:var(--white); border:1px solid rgba(0,0,0,0.07); border-radius:var(--radius-lg); padding:2.5rem; margin-bottom:3rem; box-shadow:var(--shadow-sm); }
.guide-quick-ref h2 { font-size:1.2rem; margin-bottom:1.5rem; color:var(--navy); }
.guide-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.guide-table th { text-align:left; padding:0.7rem 1rem; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); border-bottom:1px solid rgba(0,0,0,0.07); }
.guide-table td { padding:0.75rem 1rem; border-bottom:1px solid rgba(0,0,0,0.04); color:var(--text); }
.guide-table tr:last-child td { border-bottom:none; }
.target-cell { color:var(--cyan); font-weight:600; }
.importance { font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; padding:0.15rem 0.5rem; border-radius:3px; }
.importance.high { color:var(--cyan);    background:rgba(8,145,178,0.08);  border:1px solid rgba(8,145,178,0.14); }
.importance.med  { color:var(--warn);    background:rgba(217,119,6,0.08);   border:1px solid rgba(217,119,6,0.14); }
.importance.low  { color:var(--success); background:rgba(5,150,105,0.08);   border:1px solid rgba(5,150,105,0.14); }

.guide-card { background:var(--white); border:1px solid rgba(0,0,0,0.07); border-radius:var(--radius-lg); margin-bottom:2rem; overflow:hidden; box-shadow:var(--shadow-sm); }
.guide-card-header { display:flex; gap:1.5rem; align-items:flex-start; padding:2rem; border-bottom:1px solid rgba(0,0,0,0.06); flex-wrap:wrap; }
.guide-icon { font-size:2rem; flex-shrink:0; margin-top:0.2rem; }
.guide-card-header h2 { font-size:1.2rem; margin-bottom:0.4rem; color:var(--navy); }
.guide-targets { display:flex; gap:1.5rem; flex-wrap:wrap; }
.guide-targets span { font-size:0.82rem; color:var(--muted); }
.guide-targets strong { color:var(--cyan); }
.guide-product-link { margin-left:auto; font-size:0.8rem; font-weight:600; color:var(--cyan); white-space:nowrap; align-self:center; border:1px solid var(--cyan-border); padding:0.4rem 0.9rem; border-radius:4px; transition:background var(--transition); }
.guide-product-link:hover { background:var(--cyan-glow); }
.guide-card-body { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.guide-what,.guide-why { padding:1.75rem; border-bottom:1px solid rgba(0,0,0,0.06); }
.guide-what { border-right:1px solid rgba(0,0,0,0.06); }
.guide-what h4,.guide-why h4 { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--cyan); margin-bottom:0.75rem; }
.guide-what p,.guide-why p { font-size:0.875rem; color:var(--muted); line-height:1.75; }
.guide-effects { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid rgba(0,0,0,0.06); }
.effect-col { padding:1.5rem 1.75rem; }
.effect-col:first-child { border-right:1px solid rgba(0,0,0,0.06); }
.low-label  { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--warn);  margin-bottom:0.75rem; }
.high-label { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--error); margin-bottom:0.75rem; }
.effect-col ul { padding-left:1rem; list-style:disc; }
.effect-col li { font-size:0.82rem; color:var(--muted); margin-bottom:0.3rem; line-height:1.6; }
.guide-tip { grid-column:1/-1; padding:1.25rem 1.75rem; font-size:0.85rem; color:var(--muted); line-height:1.7; background:var(--bg-soft); }
.guide-tip span { color:var(--cyan); font-weight:600; margin-right:0.5rem; }

.guide-cta { background:var(--white); border:1px solid rgba(0,0,0,0.07); border-radius:var(--radius-lg); padding:3rem; text-align:center; margin-top:3rem; box-shadow:var(--shadow-sm); }
.guide-cta h3 { margin-bottom:1.5rem; color:var(--navy); }
.guide-cta-btns { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

/* ─── Tool page responsive ─── */
@media (max-width:1050px) {
  .calc-grid { grid-template-columns:1fr; }
  .calc-panel { position:static; }
  .result-doses { grid-template-columns:1fr; }
  .stockist-layout { grid-template-columns:1fr; }
  .stockist-list { max-height:300px; }
}
@media (max-width:900px) {
  .param-status-grid { grid-template-columns:repeat(2,1fr); }
  .recs-grid { grid-template-columns:1fr 1fr; }
  .guide-card-body { grid-template-columns:1fr; }
  .guide-what { border-right:none; }
  .guide-effects { grid-template-columns:1fr; }
  .effect-col:first-child { border-right:none; border-bottom:1px solid rgba(0,0,0,0.06); }
  .param-inputs-grid { grid-template-columns:1fr; }
  .explainer-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .param-status-grid { grid-template-columns:repeat(2,1fr); }
  .recs-grid { grid-template-columns:1fr; }
  .modal-card { margin:0; }
  .modal-body,.modal-footer { padding:1rem 1.25rem; }
}