/* ===== Bahari Seafood — Stylesheet ===== */

/* Rebrand palette (Navy/Gold, replacing the old teal/orange scheme) — the
   five colors below are the only literal brand hues in this file. --deep/
   --deep-2/--teal/--teal-2/--gold/--gold-2 are kept as the same variable
   names to avoid touching every selector, but now point at navy/gold
   tones or color-mix() tints derived from them instead of teal/orange. */
:root {
  --navy: #0F2A4A;
  --navy-deep: #081A2E;
  --brand-gold: #D4A017;
  --cream: #F5F3EE;

  --deep: var(--navy-deep);
  --deep-2: var(--navy);
  --teal: var(--brand-gold);
  --teal-2: color-mix(in srgb, var(--brand-gold) 78%, black);
  --gold: var(--brand-gold);
  --gold-2: color-mix(in srgb, var(--brand-gold) 78%, black);
  --bg: var(--cream);
  --bg-alt: #FFFFFF;
  --text: var(--navy-deep);
  --text-muted: color-mix(in srgb, var(--navy-deep) 65%, white);
  --white: #FFFFFF;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(8, 26, 46, 0.08);
  --shadow-lg: 0 20px 50px rgba(8, 26, 46, 0.14);
  --container: 1180px;
}

/* Spacing (padding/margin/gap) follows a 2px rhythm throughout this file —
   the handful of odd-numbered values below were one-off drift from that and
   have been snapped to it. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; color: var(--deep); }
p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  /* var(--deep-2), not --teal-2 — --teal-2 only hits 3.51:1 against the
     section backgrounds, short of the 4.5:1 needed for normal-weight/size
     text under WCAG AA. */
  color: var(--deep-2);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: .6em;
}

.section { padding: 96px 0; scroll-margin-top: -80px; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.section-sub { color: var(--text-muted); margin: 0; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-primary {
  background: linear-gradient(135deg, rgba(212,160,23,0.85), rgba(165,125,18,0.85));
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-color: rgba(255,255,255,0.4);
  color: var(--deep);
  box-shadow: 0 10px 24px rgba(165,125,18,0.28), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(165,125,18,0.36), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-outline {
  background: rgba(255,255,255,.3);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border-color: rgba(255,255,255,.6);
  color: var(--deep);
  box-shadow: 0 8px 24px rgba(8, 26, 46,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
}
.btn-outline:hover { background: rgba(255,255,255,.48); transform: translateY(-2px); }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 243, 238, 0.55);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 8px 24px rgba(8, 26, 46,0.05);
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* While the hero is still behind it, the header sheds its own background
   entirely and blends into the hero — js/main.js adds/removes this via an
   IntersectionObserver on .hero, so pages without a hero (Gallery) simply
   never get it and keep the glass look above. */
.site-header--on-hero {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.site-header--on-hero .logo,
.site-header--on-hero .main-nav a,
.site-header--on-hero .lang-switch {
  color: var(--white);
}
.site-header--on-hero .logo-text em { color: var(--white); }
.site-header--on-hero .logo-mark--bahari { filter: brightness(0) invert(1); }
.site-header--on-hero .lang-switch { border-color: rgba(255,255,255,0.5); }
.site-header--on-hero .lang-switch:hover { background: rgba(255,255,255,0.15); color: var(--white); }
.site-header--on-hero .nav-toggle span { background: var(--white); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 76px;
  max-width: 100%;
  padding: 0 40px;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; color: var(--deep); flex-shrink: 0; transition: color .35s ease; }
.logo-mark--bahari { display: block; width: 52px; height: 52px; object-fit: contain; transition: filter .35s ease; }
.logo-text em { font-style: normal; color: var(--gold-2); transition: color .35s ease; }

.main-nav { display: flex; gap: 16px; justify-content: center; flex: 1; }
.main-nav a { font-weight: 600; font-size: .92rem; color: var(--text); position: relative; padding: 6px 0; white-space: nowrap; transition: color .35s ease; }
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--gold); transition: width .2s ease;
}
.main-nav a:hover::after { width: 100%; }

.nav-cta { flex-shrink: 0; padding: 10px 18px; font-size: .88rem; }
.lang-switch {
  flex-shrink: 0;
  margin-left: auto;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--deep-2);
  border: 1px solid rgba(8, 26, 46,0.16);
  border-radius: 999px;
  padding: 6px 12px;
  transition: background .2s ease, color .2s ease;
}
.lang-switch:hover { background: var(--bg-alt); color: var(--deep); }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span { width: 24px; height: 2.5px; background: var(--deep); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }

/* Dims the page behind the open mobile menu instead of leaving hero/section
   content visibly showing through right below the dropdown. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(8, 26, 46, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.nav-backdrop.visible { opacity: 1; pointer-events: auto; }
body.nav-open { overflow: hidden; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ===== Hero ===== */
/* No overflow:hidden here — .hero-mesh below extends upward behind the
   sticky header (which goes transparent while the hero is in view) and
   needs to paint past .hero's own top edge instead of being clipped to it.
   .hero-mesh clips its own oversized blobs itself, so nothing leaks out. */
.hero { position: relative; }

/* Animated mesh-gradient background — a vanilla CSS/SVG port of a React
   "shader hero" component (MeshGradient + framer-motion). No WebGL/build
   step available on this static site, so the flowing color blobs are
   approximated with blurred, slowly-drifting radial gradients instead.
   Extended 77px above .hero's own top (matching .site-header's height) so
   the gradient still fills the area behind the header instead of leaving
   the page's plain cream background showing through it. */
.hero-mesh { position: absolute; top: -77px; left: 0; right: 0; bottom: 0; z-index: -2; overflow: hidden; background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 45%, color-mix(in srgb, var(--navy) 55%, white) 100%); }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.hero-blob--1 { width: 640px; height: 640px; left: -160px; top: -180px; background: radial-gradient(circle at 30% 30%, var(--brand-gold), transparent 70%); opacity: .62; animation: heroDrift1 22s ease-in-out infinite; }
.hero-blob--2 { width: 560px; height: 560px; right: -160px; top: 8%; background: radial-gradient(circle at 60% 40%, var(--cream), transparent 70%); opacity: .34; animation: heroDrift2 26s ease-in-out infinite; }
.hero-blob--3 { width: 560px; height: 560px; left: 8%; bottom: -260px; background: radial-gradient(circle at 50% 50%, var(--brand-gold), transparent 70%); opacity: .38; animation: heroDrift3 30s ease-in-out infinite; }
.hero-blob--4 { width: 420px; height: 420px; right: 6%; bottom: -180px; background: radial-gradient(circle at 40% 60%, var(--cream), transparent 70%); opacity: .3; animation: heroDrift1 18s ease-in-out infinite reverse; }
.hero-grain { position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 3px); }
@keyframes heroDrift1 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,30px) scale(1.08); } }
@keyframes heroDrift2 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,20px) scale(.95); } }
@keyframes heroDrift3 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-30px) scale(1.06); } }

/* Darkens the mesh gradient evenly so light-colored text stays readable.
   Extended upward 77px too, for the same reason as .hero-mesh above. */
.hero-scrim {
  position: absolute;
  top: -77px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 26, 46,0.12), rgba(8, 26, 46,0.24));
  pointer-events: none;
}
.hero-inner {
  display: flex;
  justify-content: center;
  padding: 76px 24px 260px;
  position: relative;
}
.hero-copy { color: var(--white); max-width: 1100px; text-align: center; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(212,160,23,0.12);
  border: 1px solid rgba(212,160,23,0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #E7CB7F;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 22px;
}
.hero-badge-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--gold-2); }

.hero-copy h1 { color: var(--white); font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .4em; }
.hero-line { display: block; }
.hero-word { display: inline-block; margin-right: .28em; }

.hero-desc { color: rgba(255,255,255,0.88); font-size: 1.05rem; max-width: 560px; margin-left: auto; margin-right: auto; }
.hero-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 28px 0 44px; }
.btn-icon { width: 18px; height: 18px; margin-left: 8px; }
.hero-stats { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat-num { font-size: 1.6rem; font-weight: 800; color: var(--gold-2); }
.stat-label { font-size: .82rem; color: rgba(255,255,255,0.8); }

.hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 90px; }

/* Entrance animation for the hero content — staggered via each element's
   --d custom property, no JS required. */
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.intro-in { opacity: 0; animation: heroFadeUp .6s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--d, 0s); }

@media (prefers-reduced-motion: reduce) {
  .hero-blob { animation: none; }
  .intro-in { animation: none; opacity: 1; transform: none; }
}

/* ===== About ===== */
.about-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 64px;
  align-items: center;
}
.about-logo {
  width: 100%;
  height: auto;
  animation: about-logo-float 4s ease-in-out infinite;
}
@keyframes about-logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .about-logo { animation: none; }
}
.about-copy h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.about-points { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.point { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; color: var(--deep-2); }
.point-icon {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--teal); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; flex-shrink: 0;
}

.compro-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  padding: 22px 26px;
  background: var(--bg-alt);
  border: 1px solid rgba(8,26,46,0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.compro-icon { width: 44px; height: 44px; flex-shrink: 0; color: var(--gold-2); }
.compro-icon svg { width: 100%; height: 100%; }
.compro-text { flex: 1; }
.compro-text h3 { font-size: 1.05rem; margin-bottom: .2em; }
.compro-text p { margin: 0; font-size: .9rem; color: var(--text-muted); }
.compro-btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .compro-cta { flex-direction: column; align-items: flex-start; }
  .compro-btn { width: 100%; }
}

/* Sub-blocks within the merged Tentang/Keunggulan/Proses Ekspor section —
   smaller than .section-head since they're internal dividers, not a new
   page section of their own. */
.about-sub { margin-top: 84px; }
.about-sub-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.about-sub-head h3 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); color: var(--deep); margin-bottom: .35em; }
.about-sub-head p { color: var(--text-muted); margin: 0; }

/* ===== Features ===== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.feature-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.feature-icon { width: 76px; height: 76px; margin-bottom: 18px; }
.feature-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.feature-card h3 { font-size: 1.1rem; }
.feature-card p { color: var(--text-muted); margin: 0; font-size: .93rem; }

/* ===== Products ===== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.product-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  border-radius: var(--radius);
  padding: 28px 26px;
  color: var(--white);
  background: linear-gradient(165deg, color-mix(in srgb, var(--c1) 30%, #04141a) 0%, color-mix(in srgb, var(--c2) 20%, #030d11) 100%);
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.card-decor {
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 150px;
  height: 150px;
  opacity: .16;
  pointer-events: none;
  z-index: -1;
}
.card-decor svg { width: 100%; height: 100%; }

/* Real product photos get more presence than the abstract icon fallback:
   bigger, near-opaque, with a soft drop shadow to lift them off the card. */
.card-decor--photo {
  right: -22px;
  bottom: -14px;
  width: 190px;
  height: 190px;
  opacity: 0.97;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.35));
}
.card-decor--photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
}

.card-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}
.card-badge-icon {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--white);
}
.card-badge-icon svg { width: 16px; height: 16px; }
.card-badge-label { font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: rgba(255,255,255,0.85); }

.product-card h3 { color: var(--white); font-size: 1.3rem; margin-bottom: .3em; }
.product-card p { color: rgba(255,255,255,0.68); font-size: .92rem; max-width: 92%; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.tags span {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.88);
  font-size: .74rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
}

/* ===== Process ===== */
.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}
.process-step {
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  padding: 26px 20px;
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
}
.process-step:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ===== Liquid glass treatment =====
   Calm frosted-glass look (translucent fill + blur + rim highlight), no
   moving shine — in place of a literal WebGL liquid-metal shader, since
   this is a static site with no React/build step. Ported as plain CSS. */
.feature-card,
.process-step {
  background: linear-gradient(160deg, rgba(255,255,255,0.7), rgba(255,255,255,0.28));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 8px 28px rgba(8, 26, 46,0.08), inset 0 1px 0 rgba(255,255,255,0.85);
}
.process-num {
  display: inline-block;
  font-size: .85rem;
  font-weight: 800;
  color: var(--white);
  background: linear-gradient(135deg, var(--teal), var(--teal-2));
  width: 34px; height: 34px;
  border-radius: 50%;
  line-height: 34px;
  text-align: center;
  margin-bottom: 14px;
}
.process-step h3 { font-size: 1rem; }
.process-step p { font-size: .87rem; color: var(--text-muted); margin: 0; }

.markets { text-align: center; }
.markets h3 { font-size: 1.3rem; }
.market-tags { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 20px 0; }
.market-tags span {
  background: var(--white);
  border: 1px solid rgba(8, 26, 46,0.1);
  color: var(--deep-2);
  font-weight: 700;
  font-size: .85rem;
  padding: 8px 20px;
  border-radius: 999px;
}
.markets-note { color: var(--text-muted); max-width: 560px; margin: 0 auto; font-size: .92rem; }

/* ===== FAQ (horizontal auto-scroll marquee) =====
   Pure CSS loop: each row's track holds the card group twice back-to-back
   and animates translateX(-50%), so the moment it "resets" to 0% the two
   halves line up pixel-for-pixel and the loop reads as continuous. No JS
   needed for this (the reference used React only for templating markup,
   not for the animation itself, which was already plain CSS keyframes). */
.faq-rows {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 56px;
}
.faq-scroller {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.faq-track {
  display: flex;
  width: max-content;
  animation: faq-scroll-left var(--duration, 50s) linear infinite;
}
.faq-track--reverse {
  animation-name: faq-scroll-right;
  /* Start already shifted so the reverse row doesn't visibly "jump" on load. */
  transform: translateX(-50%);
}
/* :focus-within alone wouldn't help here since the cards have no focusable
   content — .faq-scroller itself is given tabindex="0" in HTML so keyboard
   users have a way to stop the motion (WCAG 2.2.2), not just :hover. */
.faq-scroller:hover .faq-track,
.faq-scroller:focus-within .faq-track,
.faq-scroller:focus .faq-track { animation-play-state: paused; }
.faq-scroller:focus-visible { outline: 2px solid var(--teal-2); outline-offset: 4px; }
.faq-group { display: flex; gap: 22px; flex-shrink: 0; padding: 0 11px; }
.faq-card {
  width: 340px;
  flex-shrink: 0;
  background: var(--white);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow);
}
.faq-card h3 { font-size: 1.02rem; color: var(--deep); margin: 0 0 .5em; }
.faq-card p { font-size: .88rem; color: var(--text-muted); margin: 0; line-height: 1.55; }

@keyframes faq-scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes faq-scroll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-track, .faq-track--reverse { animation: none; transform: none; }
}
@media (max-width: 640px) {
  .faq-card { width: 280px; padding: 22px 20px; }
}

/* ===== Contact ===== */
.contact-section { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); }
.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
}
.contact-info h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.contact-list { margin-top: 28px; display: flex; flex-direction: column; gap: 20px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--teal-2); margin-top: 2px; }
.contact-icon svg { width: 100%; height: 100%; }
.contact-list strong { color: var(--deep); }
.contact-note { font-size: .82rem; color: var(--text-muted); font-style: italic; margin-top: 24px; }

.contact-form {
  background: var(--white);
  border-radius: 20px;
  padding: 36px;
  box-shadow: var(--shadow-lg);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: 6px; color: var(--deep); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid #DCE6E8;
  font-family: inherit;
  font-size: .95rem;
  background: var(--bg);
  color: var(--text);
  transition: border-color .2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--teal);
}
.form-submit { width: 100%; margin-top: 6px; }
.form-status { text-align: center; font-weight: 600; color: var(--deep-2); min-height: 1.4em; margin: 12px 0 0; }

/* ===== Footer ===== */
.site-footer { background: var(--deep); color: rgba(255,255,255,0.8); padding-top: 64px; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.footer-brand .logo { color: var(--white); margin-bottom: 14px; }
.footer-brand .logo-mark--bahari { filter: brightness(0) invert(1); }
.footer-brand .logo-text em { color: var(--white); }
.footer-brand p { font-size: .9rem; max-width: 300px; }
.footer-links h4, .footer-social h4 { color: var(--white); font-size: .95rem; margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; }
.footer-links a { display: block; font-size: .9rem; margin-bottom: 10px; color: rgba(255,255,255,0.72); }
.footer-links a:hover { color: var(--gold); }
.social-icons { display: flex; gap: 10px; }
.social-icons a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
}
.social-icons a:hover { background: var(--teal); border-color: var(--teal); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 20px 0; text-align: center; font-size: .82rem; }

/* ===== Back to top ===== */
.back-to-top {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(212,160,23,0.8), rgba(165,125,18,0.8));
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: var(--deep);
  border: 1px solid rgba(255,255,255,0.4);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
  z-index: 90;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ===== Dock (macOS-style quick nav) =====
   Same calm liquid-glass language as the buttons/cards: translucent fill
   + backdrop blur + a soft rim highlight, no shine sweep. Magnification
   (js/dock.js) drives each .dock-item's width/height inline; the
   transition here is what gives that a springy, non-jittery feel. */
.dock {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 95;
  max-width: calc(100vw - 24px);
  transition: opacity .25s ease, transform .25s ease;
}
/* Faded out via IntersectionObserver (js/dock.js) once the footer scrolls
   into view — otherwise the dock sits on top of the footer's nav links and
   copyright line, since both are fixed/near the bottom of the page. */
.dock--hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
}
.dock-panel {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 22px;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 14px 34px rgba(8, 26, 46,0.18), inset 0 1px 0 rgba(255,255,255,0.45);
  /* No overflow-x:auto here on purpose: mixing overflow-x:auto with
     overflow-y:visible makes browsers compute the "visible" axis as auto
     too (per spec), which would clip .dock-tooltip since it pops up above
     this box. Seven items comfortably fit at the mobile item size below,
     so a scroll fallback isn't needed. */
}
.dock-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(255,255,255,0.22);
  color: var(--deep);
  transition: width .15s cubic-bezier(0.34, 1.4, 0.4, 1), height .15s cubic-bezier(0.34, 1.4, 0.4, 1), background .2s ease;
}
.dock-item:hover, .dock-item:focus-visible { background: rgba(255,255,255,0.5); outline: none; }
.dock-icon { width: 52%; height: 52%; flex-shrink: 0; }
.dock-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--deep);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 8px 18px rgba(8, 26, 46,0.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.dock-item:hover .dock-tooltip,
.dock-item:focus-visible .dock-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 640px) {
  .dock { bottom: 14px; }
  .dock-panel { gap: 6px; padding: 8px 10px; border-radius: 18px; }
  .dock-item { width: 38px; height: 38px; border-radius: 11px; }
  .dock-tooltip { display: none; }
}

/* ===== Gallery Page ===== */
.page-hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  padding: 88px 0 64px;
  text-align: center;
  color: var(--white);
}
.page-hero .eyebrow { color: #E7CB7F; }
.page-hero h1 { color: var(--white); font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: .3em; }
.page-hero p { color: rgba(255,255,255,0.78); max-width: 560px; margin: 0 auto; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1/1;
  box-shadow: var(--shadow);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 18px 14px;
  background: linear-gradient(180deg, transparent, rgba(8,26,46,0.88));
}
.gallery-caption h3 { color: var(--white); font-size: 1.05rem; margin: 0 0 .2em; }
.gallery-caption span { font-size: .78rem; color: rgba(255,255,255,0.72); }

@media (max-width: 1080px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

.gallery-preview-cta { text-align: center; margin-top: 40px; }

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 24px;
}
.video-card {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #000;
}
.video-card video { display: block; width: 100%; height: auto; }
.video-card-caption { padding: 14px 18px; background: var(--bg-alt); }
.video-card-caption h3 { font-size: 1rem; margin: 0 0 .2em; color: var(--deep); }
.video-card-caption span { font-size: .8rem; color: var(--text-muted); }
@media (max-width: 640px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* ===== Reveal animation ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ===== Responsive ===== */
@media (max-width: 1080px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  .hero-inner { padding-bottom: 100px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-visual { max-width: 380px; margin: 0 auto; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  .main-nav {
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 20px 24px;
    gap: 4px;
    box-shadow: var(--shadow);
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px 0; border-bottom: 1px solid rgba(8, 26, 46,0.06); }
}

@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .hero-inner { padding-top: 32px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-stats { gap: 24px; }
  .feature-grid, .product-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .about-points { grid-template-columns: 1fr; }
  .about-sub { margin-top: 56px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
}