*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --sand:#f8f1e4;
  --paper:#fffaf4;
  --mist:#e4f4f8;
  --ink:#10384d;
  --ink-soft:#2b6076;
  --deep:#061f2c;
  --teal:#2b7f99;
  --gold:#f4ba18;
  --white:#ffffff;
  --line:rgba(16,56,77,.13);
  --muted:#607783;
  --shadow:0 28px 90px rgba(7,31,44,.15);
  --tt-logo:url("https://zegfirgyhdjyehvhlrnh.supabase.co/storage/v1/object/public/True%20Travel/TT_Logo-removebg-preview.png");
  --tt-flamingos:url("https://zegfirgyhdjyehvhlrnh.supabase.co/storage/v1/object/public/True%20Travel/BG%20Flamingos.png");
}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  overflow-x:hidden;
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  background:
    radial-gradient(circle at 12% 6%,rgba(244,186,24,.2),transparent 25%),
    radial-gradient(circle at 88% 12%,rgba(43,127,153,.24),transparent 28%),
    linear-gradient(180deg,#f8f1e4 0%,#edf7f8 42%,#fff8eb 100%);
}
body.nav-open,
body.modal-open{overflow:hidden}
a{color:inherit}
button{font:inherit}
.page-shell{width:min(1360px,calc(100% - 48px));margin:0 auto}
.logo-slot{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-slot img{display:block}

#nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:10000;
  padding:24px 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.nav-pill{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  max-width:1180px;
  padding:7px 14px 7px 30px;
  border-radius:100px;
  background:rgba(253,250,244,.94);
  border:1px solid rgba(244,186,24,.18);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:0 12px 50px rgba(0,0,0,.1),0 1px 0 rgba(255,255,255,.8) inset;
  transition:background .35s,border-color .35s,box-shadow .35s;
  pointer-events:all;
}
#nav.scrolled .nav-pill{
  background:rgba(253,250,244,.97);
  border-color:rgba(244,186,24,.24);
  box-shadow:0 16px 56px rgba(0,0,0,.12),0 1px 0 rgba(255,255,255,.84) inset;
}
.nav-top-row{display:flex;align-items:center;gap:18px;min-width:0}
.nav-logo-pill{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.nav-logo-pill .logo-slot{
  width:78px;
  height:64px;
  border-radius:0;
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
  overflow:visible;
}
.nav-logo-pill img{
  width:100% !important;
  height:100% !important;
  border-radius:0 !important;
  object-fit:contain !important;
  filter:drop-shadow(0 8px 14px rgba(8,30,42,.16));
}
.nav-logo-pill-text{
  font-family:'Playfair Display',serif;
  font-size:24px;
  font-weight:700;
  color:var(--ink);
  line-height:.92;
}
.nav-logo-pill-text span{
  display:block;
  font-size:12px;
  font-weight:300;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-family:'DM Sans',sans-serif;
  color:var(--ink-soft);
  opacity:.78;
  margin-top:5px;
  line-height:1.12;
}
.nav-burger{
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  width:64px;
  height:52px;
  appearance:none;
  border:1px solid rgba(22,56,78,.12);
  background:rgba(22,56,78,.04);
  border-radius:18px;
  padding:0 16px;
  cursor:pointer;
  flex-shrink:0;
  color:var(--ink);
}
.nav-burger span{display:block;width:24px;height:2.5px;border-radius:999px;transition:transform .25s,opacity .25s,width .25s,background .25s}
.nav-burger span:nth-child(1){background:var(--ink-soft)}
.nav-burger span:nth-child(2){width:18px;background:var(--gold)}
.nav-burger span:nth-child(3){background:#111111}
#nav.nav-open .nav-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
#nav.nav-open .nav-burger span:nth-child(2){opacity:0}
#nav.nav-open .nav-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.nav-links-pill{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav-links-pill a{
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  color:rgba(22,56,78,.72);
  text-decoration:none;
  padding:12px 20px;
  border-radius:100px;
  transition:all .25s;
  white-space:nowrap;
}
.nav-links-pill a:hover,
.nav-links-pill a[aria-current="page"]{background:rgba(22,56,78,.08);color:var(--ink)}
.nav-cta-pill{
  background:var(--gold) !important;
  color:var(--white) !important;
  box-shadow:0 4px 20px rgba(244,186,24,.35);
  padding:16px 30px !important;
  font-weight:700 !important;
}

.gallery-page{
  padding-top:150px;
  padding-bottom:38px;
  display:grid;
  gap:30px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--gold);
  font-size:11px;
  font-weight:800;
  letter-spacing:.32em;
  text-transform:uppercase;
}
.eyebrow::before{content:'';width:36px;height:1px;background:currentColor}
.gallery-hero{
  min-height:680px;
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(420px,1fr);
  gap:28px;
  align-items:stretch;
}
.gallery-hero-copy,
.gallery-hero-frame,
.gallery-intro,
.gallery-toolbar,
.gallery-card,
.page-footer{
  border:1px solid var(--line);
  background:rgba(255,250,244,.78);
  box-shadow:var(--shadow);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.gallery-hero-copy{
  position:relative;
  overflow:hidden;
  border-radius:44px;
  padding:clamp(42px,6vw,82px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:620px;
}
.gallery-hero-copy::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(145deg,rgba(255,255,255,.76),rgba(255,250,244,.2)),
    var(--tt-flamingos) center/cover no-repeat;
  opacity:.22;
  transform:scale(1.04);
}
.gallery-hero-copy::after{
  content:'';
  position:absolute;
  width:520px;
  height:520px;
  border:1px solid rgba(244,186,24,.34);
  border-radius:50%;
  right:-180px;
  top:-140px;
  box-shadow:0 0 0 90px rgba(43,127,153,.05);
}
.gallery-hero-copy > *{position:relative;z-index:1}
.gallery-hero h1{
  max-width:720px;
  margin-top:22px;
  font-family:'Playfair Display',serif;
  font-size:clamp(64px,8vw,132px);
  line-height:.82;
  letter-spacing:-.07em;
  color:var(--ink);
}
.gallery-hero p{
  max-width:620px;
  margin-top:26px;
  color:var(--ink-soft);
  font-size:18px;
  line-height:1.75;
}
.gallery-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 24px;
  border-radius:999px;
  border:1px solid rgba(16,56,77,.14);
  text-decoration:none;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.hero-btn-primary{background:var(--gold);color:white;border-color:transparent;box-shadow:0 16px 34px rgba(244,186,24,.28)}
.hero-btn-secondary{background:rgba(255,255,255,.72);color:var(--ink)}
.gallery-hero-frame{
  position:relative;
  min-height:620px;
  border-radius:44px;
  overflow:hidden;
  background:
    radial-gradient(circle at 26% 18%,rgba(255,255,255,.7),transparent 24%),
    linear-gradient(160deg,#0b3348 0%,#357f95 46%,#f7c55f 100%);
}
.gallery-hero-frame::before{
  content:'';
  position:absolute;
  inset:-12%;
  background:var(--tt-flamingos) center/cover no-repeat;
  opacity:.62;
  filter:saturate(1.08) contrast(1.02);
  animation:galleryDrift 16s ease-in-out infinite alternate;
}
.gallery-hero-frame::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(6,31,44,.12),rgba(6,31,44,.54)),
    radial-gradient(circle at 70% 18%,rgba(244,186,24,.42),transparent 28%);
}
.hero-photo{
  position:absolute;
  z-index:2;
  border-radius:34px;
  overflow:hidden;
  background:var(--tt-flamingos) center/cover no-repeat;
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 26px 70px rgba(4,25,36,.34);
}
.hero-photo-main{left:9%;right:13%;top:9%;bottom:24%}
.hero-photo-small{width:34%;height:28%}
.hero-photo-one{right:6%;bottom:8%;background-position:58% 54%}
.hero-photo-two{left:7%;bottom:8%;background-position:38% 60%;filter:saturate(1.18)}
.hero-tide-card{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:9%;
  transform:translateX(-50%);
  width:min(360px,70%);
  padding:22px;
  border-radius:26px;
  background:rgba(255,250,244,.84);
  border:1px solid rgba(255,255,255,.56);
  color:var(--ink);
  box-shadow:0 18px 50px rgba(5,27,39,.22);
}
.hero-tide-card span{
  display:block;
  margin-bottom:8px;
  color:var(--gold);
  font-size:11px;
  font-weight:900;
  letter-spacing:.26em;
  text-transform:uppercase;
}
.hero-tide-card strong{font-family:'Playfair Display',serif;font-size:30px;line-height:1}

.gallery-intro{
  border-radius:34px;
  padding:34px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.42fr);
  gap:24px;
  align-items:end;
}
.gallery-intro h2{
  margin-top:12px;
  font-family:'Playfair Display',serif;
  font-size:clamp(36px,5vw,74px);
  line-height:.92;
  letter-spacing:-.045em;
}
.gallery-intro p{color:var(--muted);line-height:1.7}
.gallery-toolbar{
  position:sticky;
  top:116px;
  z-index:20;
  border-radius:999px;
  padding:10px;
}
.gallery-filter-row{display:flex;gap:8px;overflow:auto;scrollbar-width:none}
.gallery-filter-row::-webkit-scrollbar{display:none}
.gallery-filter{
  flex:0 0 auto;
  appearance:none;
  border:0;
  border-radius:999px;
  background:rgba(16,56,77,.06);
  color:rgba(16,56,77,.72);
  cursor:pointer;
  padding:13px 18px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.gallery-filter.is-active{background:var(--ink);color:white}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:110px;
  gap:18px;
}
.gallery-card{
  position:relative;
  grid-column:span 4;
  grid-row:span 3;
  overflow:hidden;
  border-radius:34px;
  cursor:pointer;
  min-height:320px;
  transform:translateY(0);
  transition:transform .28s ease, box-shadow .28s ease, opacity .25s ease;
}
.gallery-card.is-wide{grid-column:span 8}
.gallery-card.is-tall{grid-row:span 4}
.gallery-card:nth-child(7n+2){grid-row:span 4}
.gallery-card:nth-child(7n+4){grid-column:span 5}
.gallery-card:nth-child(7n+5){grid-column:span 7}
.gallery-card:hover{transform:translateY(-6px);box-shadow:0 34px 90px rgba(6,31,44,.23)}
.gallery-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  transition:transform .55s ease, filter .55s ease;
}
.gallery-card:hover img{transform:scale(1.075);filter:saturate(1.08)}
.gallery-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 34%,rgba(4,24,35,.72));
  opacity:.9;
  pointer-events:none;
}
.gallery-card-meta{
  position:absolute;
  z-index:2;
  left:22px;
  right:22px;
  bottom:20px;
  color:white;
}
.gallery-card-meta span{
  display:inline-flex;
  margin-bottom:8px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.2);
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.gallery-card-meta h3{
  font-family:'Playfair Display',serif;
  font-size:clamp(26px,3vw,44px);
  line-height:.95;
  letter-spacing:-.035em;
}
.gallery-card-meta p{margin-top:10px;max-width:520px;color:rgba(255,255,255,.82);line-height:1.55}
.gallery-card.is-loading{
  background:
    linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.7),rgba(255,255,255,.28)),
    linear-gradient(145deg,rgba(16,56,77,.12),rgba(244,186,24,.12));
  background-size:220% 100%,100% 100%;
  animation:galleryLoading 1.6s ease-in-out infinite;
}
.gallery-card.is-hidden{display:none}
.gallery-empty{
  grid-column:1/-1;
  padding:54px;
  border:1px dashed rgba(16,56,77,.24);
  border-radius:34px;
  background:rgba(255,250,244,.72);
  color:var(--muted);
  text-align:center;
}
.gallery-empty h3{
  color:var(--ink);
  font-family:'Playfair Display',serif;
  font-size:40px;
  margin-bottom:12px;
}
.gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:20000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:32px;
}
.gallery-lightbox.is-open{display:flex}
.gallery-lightbox-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(5,24,35,.84);
  backdrop-filter:blur(18px);
}
.gallery-lightbox-close{
  position:absolute;
  top:24px;
  right:24px;
  z-index:3;
  width:54px;
  height:54px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:white;
  background:rgba(255,255,255,.12);
  cursor:pointer;
  font-size:32px;
  line-height:1;
}
.gallery-lightbox-panel{
  position:relative;
  z-index:2;
  width:min(1120px,100%);
  max-height:calc(100vh - 84px);
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  border-radius:34px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:0 40px 120px rgba(0,0,0,.34);
}
.gallery-lightbox-panel img{
  width:100%;
  height:100%;
  max-height:calc(100vh - 84px);
  object-fit:contain;
  background:#061f2c;
}
.gallery-lightbox-panel figcaption{
  padding:32px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.gallery-lightbox-panel span{
  color:var(--gold);
  font-size:11px;
  font-weight:900;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.gallery-lightbox-panel strong{
  margin-top:14px;
  font-family:'Playfair Display',serif;
  font-size:38px;
  line-height:.98;
}
.gallery-lightbox-panel p{margin-top:18px;color:var(--muted);line-height:1.65}
.page-footer{
  margin-top:28px;
  margin-bottom:28px;
  border-radius:34px;
  padding:24px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.footer-logo-wrap{display:flex;align-items:center;gap:14px;text-decoration:none}
.footer-logo-wrap .logo-slot{width:70px;height:54px}
.footer-logo-wrap img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(8,30,42,.16))}
.brand-copy{font-family:'Playfair Display',serif;font-size:30px;font-weight:700;line-height:.92;color:var(--ink)}
.brand-copy span{display:block;font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:8px}
.footer-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.footer-links a{
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  color:rgba(16,56,77,.72);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:800;
}
.footer-links a:hover,
.footer-links a[aria-current="page"]{background:rgba(16,56,77,.08);color:var(--ink)}

@keyframes galleryDrift{
  from{transform:scale(1.04) translate3d(-1.4%,0,0)}
  to{transform:scale(1.1) translate3d(1.4%,-1%,0)}
}
@keyframes galleryLoading{
  0%{background-position:180% 0,0 0}
  100%{background-position:-60% 0,0 0}
}

@media (max-width:1100px){
  .nav-pill{align-items:flex-start;flex-direction:column;border-radius:34px;padding:12px 14px}
  .nav-top-row{width:100%;justify-content:space-between}
  .nav-burger{display:flex}
  .nav-links-pill{display:none;width:100%;margin:12px 0 0;flex-direction:column;align-items:stretch}
  #nav.nav-open .nav-links-pill{display:flex}
  .nav-links-pill a{text-align:center}
  .gallery-page{padding-top:132px}
  .gallery-hero{grid-template-columns:1fr}
  .gallery-hero-copy,
  .gallery-hero-frame{min-height:520px}
  .gallery-intro{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(6,1fr)}
  .gallery-card,
  .gallery-card.is-wide,
  .gallery-card:nth-child(7n+4),
  .gallery-card:nth-child(7n+5){grid-column:span 3}
}
@media (max-width:720px){
  #nav{padding:14px}
  .page-shell{width:min(100% - 28px,1360px)}
  .gallery-page{padding-top:116px}
  .gallery-hero-copy,
  .gallery-hero-frame,
  .gallery-intro,
  .page-footer{border-radius:28px}
  .gallery-hero-copy{padding:32px;min-height:500px}
  .gallery-hero h1{font-size:clamp(54px,18vw,82px)}
  .gallery-hero p{font-size:16px}
  .gallery-hero-frame{min-height:440px}
  .gallery-intro{padding:26px}
  .gallery-toolbar{top:96px;border-radius:26px}
  .gallery-grid{display:flex;flex-direction:column;gap:16px}
  .gallery-card,
  .gallery-card.is-tall,
  .gallery-card.is-wide{min-height:360px}
  .gallery-lightbox{padding:16px}
  .gallery-lightbox-panel{grid-template-columns:1fr;max-height:calc(100vh - 52px)}
  .gallery-lightbox-panel img{height:58vh}
  .gallery-lightbox-panel figcaption{padding:22px}
  .page-footer{align-items:flex-start;flex-direction:column}
  .footer-links{justify-content:flex-start}
}