:root {
  --ink: #102c3b;
  --ink-soft: #4e6570;
  --ocean: #0b7f8b;
  --ocean-dark: #064d5b;
  --seafoam: #e5f4f1;
  --sand: #f7f4ed;
  --line: rgba(16,44,59,.14);
  --white: #fff;
  --radius: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fbfcfa; font-family: "DM Sans", sans-serif; }
img { max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.gallery-header {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 82px; padding: 12px clamp(18px,6vw,92px); border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.94); backdrop-filter: blur(16px);
}
.gallery-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.gallery-brand img { width: 54px; height: 54px; object-fit: contain; padding: 4px; border-radius: 14px; background: white; }
.gallery-brand strong, .gallery-brand small { display: block; }
.gallery-brand strong { font-family: "Libre Franklin", sans-serif; }
.gallery-brand small { color: var(--ink-soft); }
.gallery-header nav { display: flex; align-items: center; gap: 24px; }
.gallery-header nav a { text-decoration: none; font-weight: 700; font-size: 14px; }
.gallery-header nav a[aria-current="page"] { color: var(--ocean); }
.gallery-call { padding: 11px 16px; border-radius: 999px; color: white !important; background: var(--ocean-dark); }
.gallery-hero {
  min-height: 500px; display: flex; align-items: center; padding: 76px clamp(20px,6vw,92px);
  background-image: linear-gradient(90deg, rgba(4,38,48,.93), rgba(4,38,48,.65) 45%, rgba(4,38,48,.12)),
    url("assets/photos/hero/desktop/offshore-sailfish-action-1600x900.webp");
  background-size: cover; background-position: center; color: white;
}
.gallery-hero > div { max-width: 720px; }
.eyebrow { margin: 0 0 12px; color: #6bd4d1; font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: "Libre Franklin", sans-serif; letter-spacing: -.04em; }
h1 { max-width: 700px; font-size: clamp(44px,7vw,82px); line-height: .98; }
h2 { font-size: clamp(32px,4vw,55px); line-height: 1.04; }
.gallery-hero p:not(.eyebrow) { max-width: 650px; margin: 24px 0 30px; color: rgba(255,255,255,.84); font-size: 18px; line-height: 1.65; }
.primary-button, .light-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border-radius: 999px; text-decoration: none; font-weight: 800; }
.primary-button { color: var(--ocean-dark); background: white; }
.gallery-section { padding: 84px clamp(18px,6vw,92px) 100px; }
.gallery-heading { display: flex; justify-content: space-between; gap: 32px; align-items: end; margin-bottom: 30px; }
.gallery-heading > p { margin: 0; color: var(--ink-soft); font-weight: 700; }
.gallery-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.gallery-filter, .load-more-button { border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.gallery-filter { padding: 11px 17px; }
.gallery-filter.active { color: white; border-color: var(--ocean); background: var(--ocean); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.gallery-card { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 12px 32px rgba(6,52,62,.06); }
.gallery-card[hidden] { display: none; }
.gallery-image-button { display: block; width: 100%; padding: 0; border: 0; background: #dce9e8; cursor: zoom-in; }
.gallery-image-button img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .35s ease; }
.gallery-card:hover .gallery-image-button img { transform: scale(1.025); }
.gallery-card-copy { padding: 17px 18px 19px; }
.gallery-card-copy span { color: var(--ocean); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.gallery-card-copy p { min-height: 48px; margin: 8px 0 14px; color: var(--ink-soft); line-height: 1.5; }
.gallery-card-copy a { color: var(--ocean-dark); font-weight: 800; text-decoration: none; }
.gallery-load-row { display: flex; justify-content: center; margin-top: 36px; }
.load-more-button { min-height: 50px; padding: 0 24px; }
.load-more-button:hover { border-color: var(--ocean); color: var(--ocean); }
.gallery-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin: 0 clamp(18px,6vw,92px); padding: 48px clamp(26px,4vw,58px); border-radius: 30px 30px 0 0; color: white; background: linear-gradient(135deg,var(--ocean-dark),#0d7d89); }
.gallery-cta > div { max-width: 780px; }
.gallery-cta p:last-child { color: rgba(255,255,255,.76); }
.light-button { flex: 0 0 auto; color: var(--ocean-dark); background: white; }
.gallery-footer { display: grid; grid-template-columns: 1.4fr .6fr; gap: 40px; padding: 46px clamp(20px,6vw,92px); color: white; background: var(--ink); }
.gallery-footer-brand { display: flex; align-items: center; gap: 16px; }
.gallery-footer-brand img { width: 72px; height: 72px; object-fit: contain; padding: 5px; border-radius: 14px; background: white; }
.gallery-footer p { max-width: 500px; margin: 7px 0 0; color: rgba(255,255,255,.7); }
.gallery-footer > div:last-child { display: grid; align-content: start; gap: 8px; }
.gallery-footer a { text-decoration: none; }
.gallery-footer span { color: rgba(255,255,255,.68); }
.gallery-lightbox { width: min(1180px, calc(100% - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: 20px; color: white; background: #071c25; box-shadow: 0 30px 100px rgba(0,0,0,.45); }
.gallery-lightbox::backdrop { background: rgba(1,13,18,.86); }
.gallery-lightbox figure { margin: 0; display: grid; min-height: min(84vh,850px); grid-template-rows: 1fr auto; }
.gallery-lightbox img { width: 100%; height: 100%; max-height: 76vh; object-fit: contain; background: #06141b; }
.gallery-lightbox figcaption { padding: 15px 70px 18px; text-align: center; color: rgba(255,255,255,.82); }
.lightbox-close, .lightbox-arrow { position: absolute; z-index: 2; display: grid; place-items: center; border: 0; border-radius: 50%; color: white; background: rgba(5,28,37,.72); cursor: pointer; }
.lightbox-close { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 28px; }
.lightbox-arrow { top: 50%; width: 46px; height: 46px; transform: translateY(-50%); font-size: 38px; }
.lightbox-previous { left: 14px; }
.lightbox-next { right: 14px; }
@media (max-width: 980px) { .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .gallery-header nav a:not(.gallery-call) { display: none; } }
@media (max-width: 700px) {
  .gallery-header { min-height: 70px; padding: 8px 14px; }
  .gallery-brand img { width: 46px; height: 46px; }
  .gallery-brand span { display: none; }
  .gallery-call { padding: 10px 13px; font-size: 12px !important; }
  .gallery-hero { min-height: 610px; align-items: flex-end; padding: 82px 18px 48px; background-position: 57% center; background-image: linear-gradient(180deg,rgba(4,38,48,.10),rgba(4,38,48,.95) 72%), url("assets/photos/hero/mobile/offshore-sailfish-action-1080x1350.webp"); }
  h1 { font-size: clamp(42px,13vw,62px); }
  .gallery-section { padding: 64px 14px 78px; }
  .gallery-heading { display: block; }
  .gallery-heading > p { margin-top: 12px; }
  .gallery-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .gallery-filter { flex: 0 0 auto; }
  .gallery-grid { grid-template-columns: 1fr; gap: 14px; }
  .gallery-card-copy p { min-height: auto; }
  .gallery-cta { align-items: flex-start; flex-direction: column; margin-inline: 12px; padding: 36px 24px; }
  .gallery-footer { grid-template-columns: 1fr; padding: 38px 20px; }
  .gallery-lightbox figcaption { padding-inline: 52px; font-size: 13px; }
  .lightbox-arrow { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .gallery-image-button img { transition: none; } }

/* V47 Bio Bay public branding */
.gallery-brand .bio-brand-mark,
.gallery-footer .footer-bio-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #d8fffb;
  background: radial-gradient(circle at 35% 28%, #1ea3aa, #0b5868 62%, #072f45 100%);
  box-shadow: 0 8px 24px rgba(7,65,81,.22), inset 0 0 0 1px rgba(255,255,255,.18);
  font-size: 24px;
}
.gallery-brand .bio-brand-copy { display: grid; line-height: 1.02; }
.gallery-brand .bio-brand-copy strong { font-size: 16px; }
.gallery-brand .bio-brand-copy small { margin-top: 4px; color: var(--ocean); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.gallery-brand .bio-brand-copy em { margin-top: 5px; color: var(--ink-soft); font-size: 9px; font-style: normal; font-weight: 700; }
.gallery-hero {
  background-image: linear-gradient(90deg, rgba(3,25,43,.94), rgba(3,25,43,.63) 48%, rgba(3,25,43,.12)), url("assets/luxury-bio-bay-hero.webp");
}
.gallery-footer .footer-bio-mark { width: 62px; height: 62px; font-size: 29px; }
.gallery-footer-brand small { display: block; margin-top: 9px; color: rgba(255,255,255,.55); font-size: 11px; font-weight: 700; }
@media (max-width: 700px) {
  .gallery-brand .bio-brand-copy { display: none; }
  .gallery-brand .bio-brand-mark { display: grid; width: 46px; height: 46px; }
  .gallery-hero { background-position: 62% center; background-image: linear-gradient(180deg,rgba(3,25,43,.10),rgba(3,25,43,.96) 72%), url("assets/luxury-bio-bay-hero.webp"); }
}