/* Start custom CSS *//* ============================================================
   TDB ABOUT — "Warm Heritage / Island Trust" Theme
   Typography: DM Serif Display (warm editorial serif) + Nunito Sans (friendly)
   Palette: Deep Navy + Warm Gold + Tropical Teal + Sandy White
   ============================================================ */

.ab-page{
  --ab-deep:#1A1A2E;
  --ab-navy:#16213E;
  --ab-ink:#0F3460;
  --ab-steel:#2C3E6B;

  --ab-gold:#D4A853;
  --ab-gold-light:#E8C97A;
  --ab-amber:#E09F3E;

  --ab-teal:#2EC4B6;
  --ab-sea:#0F7C8A;

  --ab-white:#FFFFFF;
  --ab-off:#FAF8F5;
  --ab-warm:#F5F0E8;
  --ab-light:#E6DFD4;
  --ab-text:#3D3B37;
  --ab-muted:#7B7670;

  --font-head:'DM Serif Display',Georgia,serif;
  --font-body:'Nunito Sans',sans-serif;

  --sp-xs:8px;--sp-sm:16px;--sp-md:24px;--sp-lg:40px;--sp-xl:64px;--sp-2xl:96px;
  --radius:8px;

  font-family:var(--font-body);font-weight:400;color:var(--ab-text);line-height:1.75;
  margin:0;padding:0;
}
.ab-page *,.ab-page *::before,.ab-page *::after{box-sizing:border-box}
.ab-page h1,.ab-page h2,.ab-page h3{font-family:var(--font-head);margin:0;line-height:1.12}
.ab-page p{margin:0}
.ab-page img{max-width:100%;display:block}
.ab-page a{text-decoration:none;color:inherit}
.ab-wrap{max-width:1100px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}

/* --- HERO --- */
.ab-hero{
  position:relative;min-height:90vh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ab-deep);
  width:100vw;left:50%;margin-left:-50vw;
  margin-top:-40px;padding-top:40px;
}
.ab-hero__bg{position:absolute;inset:0}
.ab-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.ab-hero__overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(26,26,46,.15) 0%,rgba(26,26,46,.5) 35%,rgba(26,26,46,.92) 70%,rgba(26,26,46,.99) 100%),
    linear-gradient(160deg,rgba(212,168,83,.04) 0%,transparent 40%);
}

/* Decorations */
.ab-deco{position:absolute;pointer-events:none;z-index:1}
.ab-deco--fish1{width:28px;top:30%;color:rgba(212,168,83,.05);animation:abSwimR 28s linear infinite}
.ab-deco--fish2{width:20px;top:56%;color:rgba(46,196,182,.04);animation:abSwimL 34s linear infinite;animation-delay:5s}
.ab-deco--turtle{width:44px;top:42%;color:rgba(212,168,83,.03);animation:abSwimR 42s linear infinite;animation-delay:10s}
.ab-deco--manta{width:55px;top:20%;right:15%;color:rgba(255,255,255,.03);animation:abMantaGlide 22s ease-in-out infinite}
@keyframes abSwimR{0%{left:-5%}100%{left:105%}}
@keyframes abSwimL{0%{left:105%;transform:scaleX(-1)}100%{left:-5%;transform:scaleX(-1)}}
@keyframes abMantaGlide{
  0%,100%{transform:translateX(0) translateY(0)}
  25%{transform:translateX(25px) translateY(-12px)}
  50%{transform:translateX(45px) translateY(6px)}
  75%{transform:translateX(18px) translateY(-8px)}
}

/* Bubbles */
.ab-bubbles{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.ab-bubbles i{
  position:absolute;bottom:-10px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.06),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.03);
  animation:abBub linear infinite;
}
.ab-bubbles i:nth-child(1){width:5px;height:5px;left:7%;animation-duration:15s}
.ab-bubbles i:nth-child(2){width:12px;height:12px;left:16%;animation-duration:21s;animation-delay:2s;
  background:radial-gradient(circle at 35% 35%,rgba(212,168,83,.05),transparent);border-color:rgba(212,168,83,.03)}
.ab-bubbles i:nth-child(3){width:4px;height:4px;left:27%;animation-duration:12s;animation-delay:6s}
.ab-bubbles i:nth-child(4){width:17px;height:17px;left:36%;animation-duration:26s;animation-delay:1s;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.04),transparent)}
.ab-bubbles i:nth-child(5){width:7px;height:7px;left:45%;animation-duration:16s;animation-delay:8s}
.ab-bubbles i:nth-child(6){width:3px;height:3px;left:54%;animation-duration:11s;animation-delay:4s}
.ab-bubbles i:nth-child(7){width:20px;height:20px;left:63%;animation-duration:28s;animation-delay:6s;
  background:radial-gradient(circle at 35% 35%,rgba(46,196,182,.04),transparent);border-color:rgba(46,196,182,.02)}
.ab-bubbles i:nth-child(8){width:6px;height:6px;left:72%;animation-duration:14s;animation-delay:3s}
.ab-bubbles i:nth-child(9){width:10px;height:10px;left:81%;animation-duration:19s;animation-delay:0s}
.ab-bubbles i:nth-child(10){width:8px;height:8px;left:22%;animation-duration:18s;animation-delay:9s}
.ab-bubbles i:nth-child(11){width:14px;height:14px;left:48%;animation-duration:24s;animation-delay:2.5s;
  background:radial-gradient(circle at 35% 35%,rgba(212,168,83,.04),transparent);border-color:rgba(212,168,83,.02)}
.ab-bubbles i:nth-child(12){width:4px;height:4px;left:68%;animation-duration:10s;animation-delay:7s}
.ab-bubbles i:nth-child(13){width:16px;height:16px;left:10%;animation-duration:25s;animation-delay:1.5s}
.ab-bubbles i:nth-child(14){width:6px;height:6px;left:38%;animation-duration:13s;animation-delay:5.5s}
.ab-bubbles i:nth-child(15){width:22px;height:22px;left:56%;animation-duration:30s;animation-delay:.5s;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.03),transparent)}
.ab-bubbles i:nth-child(16){width:5px;height:5px;left:86%;animation-duration:14s;animation-delay:4.5s}
.ab-bubbles i:nth-child(17){width:9px;height:9px;left:32%;animation-duration:19s;animation-delay:7.5s}
.ab-bubbles i:nth-child(18){width:3px;height:3px;left:74%;animation-duration:9s;animation-delay:3.5s}
.ab-bubbles i:nth-child(19){width:15px;height:15px;left:4%;animation-duration:23s;animation-delay:6.5s;
  background:radial-gradient(circle at 35% 35%,rgba(46,196,182,.03),transparent);border-color:rgba(46,196,182,.02)}
.ab-bubbles i:nth-child(20){width:7px;height:7px;left:92%;animation-duration:16s;animation-delay:2s}
@keyframes abBub{
  0%{transform:translateY(0) scale(0);opacity:0}
  10%{opacity:.45;transform:translateY(-8vh) scale(1)}
  50%{opacity:.15;transform:translateY(-50vh) scale(.9)}
  100%{transform:translateY(-110vh) scale(.3);opacity:0}
}

@media(max-width:768px){.ab-deco,.ab-bubbles,.ab-scu{display:none}}

/* Hero content */
.ab-hero__content{position:relative;z-index:10;padding-top:clamp(140px,22vh,220px);padding-bottom:clamp(70px,11vh,120px)}

.ab-hero__badge{
  display:inline-block;
  font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ab-gold);
  padding:8px 22px;
  border:1px solid rgba(212,168,83,.2);background:rgba(212,168,83,.06);
  margin-bottom:var(--sp-lg);
}

.ab-hero h1{
  font-size:clamp(3rem,8vw,5.5rem);font-weight:400;
  color:var(--ab-white);margin-bottom:var(--sp-md);
}

.ab-hero__sub{
  font-size:clamp(.92rem,1.4vw,1.05rem);color:rgba(255,255,255,.55);
  max-width:540px;margin-bottom:var(--sp-xl);line-height:1.8;
}

/* Hero stats */
.ab-hero__stats{
  display:flex;flex-wrap:wrap;gap:0;max-width:640px;
  border:1px solid rgba(212,168,83,.1);
  background:rgba(212,168,83,.03);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.ab-hero__stat{
  flex:1;min-width:120px;padding:16px 20px;text-align:center;
  border-right:1px solid rgba(212,168,83,.06);
}
.ab-hero__stat:last-child{border-right:none}
.ab-hero__stat strong{display:block;font-family:var(--font-head);font-size:1rem;color:var(--ab-gold)}
.ab-hero__stat span{font-size:.6rem;color:rgba(255,255,255,.35);letter-spacing:.08em;text-transform:uppercase}

/* --- SECTIONS --- */
.ab-section{
  padding:var(--sp-2xl) 0;position:relative;overflow:hidden;
  width:100vw;left:50%;margin-left:-50vw;
}
.ab-section--white{background:var(--ab-white)}
.ab-section--warm{background:var(--ab-warm)}
.ab-section--deep{background:var(--ab-deep)}

.ab-sh{margin-bottom:var(--sp-xl)}
.ab-sh h2{font-size:clamp(1.8rem,4.5vw,3rem);font-weight:400;color:var(--ab-deep)}
.ab-sh--light h2{color:var(--ab-white)}
.ab-sh__sub{font-size:.95rem;color:var(--ab-muted);max-width:520px;margin-top:var(--sp-sm);line-height:1.75}

.ab-label{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-body);font-size:.68rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ab-teal);
  margin-bottom:var(--sp-sm);
}
.ab-label::before{content:'';width:24px;height:2px;background:var(--ab-teal)}
.ab-label--gold{color:var(--ab-gold)}.ab-label--gold::before{background:var(--ab-gold)}

/* --- SCUBA ELEMENTS --- */
.ab-scu{position:absolute;pointer-events:none;z-index:0}
.ab-scu--jelly1{width:28px;right:5%;top:22%;color:rgba(212,168,83,.03);animation:abJellyFloat 16s ease-in-out infinite}
.ab-scu--fish-r1{width:22px;top:55%;color:rgba(46,196,182,.04);animation:abSwimR 26s linear infinite;animation-delay:3s}
.ab-scu--school1{width:60px;top:12%;color:rgba(255,255,255,.02);animation:abSwimL 36s linear infinite}
.ab-scu--turtle2{width:38px;right:6%;top:60%;color:rgba(212,168,83,.03);animation:abSwimR 38s linear infinite;animation-delay:6s}
.ab-scu--coral1{width:32px;right:3%;bottom:8%;color:rgba(212,168,83,.03);animation:abSeaweedSway 14s ease-in-out infinite}
.ab-scu--seaweed1{width:13px;left:3%;bottom:10%;color:rgba(46,196,182,.04);animation:abSeaweedSway 10s ease-in-out infinite}
.ab-scu--manta2{width:48px;left:4%;top:8%;color:rgba(212,168,83,.03);animation:abMantaGlide 24s ease-in-out infinite;animation-delay:3s}
.ab-scu--fish-l1{width:20px;top:65%;color:rgba(46,196,182,.04);animation:abSwimL 28s linear infinite;animation-delay:5s}
.ab-scu--diver{width:44px;left:7%;top:28%;color:rgba(255,255,255,.03);animation:abSwimR 34s linear infinite;animation-delay:6s}
.ab-scu--fish-r2{width:20px;top:55%;color:rgba(255,255,255,.03);animation:abSwimR 22s linear infinite;animation-delay:10s}

@keyframes abJellyFloat{0%,100%{transform:translateY(0) rotate(-2deg)}25%{transform:translateY(-16px) rotate(2deg)}50%{transform:translateY(-6px) rotate(-1deg)}75%{transform:translateY(-20px) rotate(3deg)}}
@keyframes abSeaweedSway{0%,100%{transform:rotate(0)}25%{transform:rotate(4deg)}75%{transform:rotate(-3deg)}}

/* --- ABOUT --- */
.ab-about__grid{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(40px,6vw,80px);align-items:start}
.ab-about__text p{font-size:1rem;color:var(--ab-text);margin-bottom:var(--sp-sm)}
.ab-about__text strong{color:var(--ab-deep);font-weight:700}

.ab-about__badge-card{
  padding:var(--sp-lg);background:var(--ab-off);border:1px solid var(--ab-light);
  text-align:center;
}
/* Image zoom */
.ab-about__badge-card img{
  width:100%;max-width:240px;margin:0 auto var(--sp-md);
  transition:all .3s ease;cursor:zoom-in;
}
.ab-about__badge-card img:hover{transform:scale(1.03)}

/* Zoom overlay */
.ab-zoom-overlay{
  position:fixed;inset:0;z-index:99999;
  background:rgba(0,0,0,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.ab-zoom-overlay img{
  max-width:90vw;max-height:85vh;width:auto;height:auto;
  border-radius:4px;box-shadow:0 8px 60px rgba(0,0,0,.5);
  cursor:default;
}
.ab-zoom-close{
  position:fixed;top:20px;right:24px;z-index:100000;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:1.2rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.ab-zoom-close:hover{background:rgba(255,255,255,.25);transform:scale(1.1)}
.ab-about__badge-card h3{font-size:1.1rem;color:var(--ab-deep);margin-bottom:4px}
.ab-about__badge-card p{font-size:.8rem;color:var(--ab-muted);letter-spacing:.06em}

/* --- VIRTUAL TOUR --- */
.ab-tour__embed{
  background:var(--ab-white);border:1px solid var(--ab-light);
  padding:var(--sp-sm);min-height:200px;
  text-align:center;color:var(--ab-muted);font-size:.9rem;
}

/* --- WHY --- */
.ab-why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ab-why__card{
  padding:32px 24px;
  background:rgba(212,168,83,.04);border:1px solid rgba(212,168,83,.08);
  border-radius:var(--radius);
  transition:all .35s ease;
}
.ab-why__card:hover{border-color:rgba(212,168,83,.2);transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.12)}
.ab-why__icon{font-size:2rem;margin-bottom:var(--sp-sm)}
.ab-why__card h3{font-size:1.05rem;color:var(--ab-white);margin-bottom:8px}
.ab-why__card p{font-size:.85rem;color:rgba(255,255,255,.5);line-height:1.65}

/* --- TEAM --- */
.ab-team__grid{display:flex;justify-content:center;gap:clamp(20px,4vw,40px);flex-wrap:wrap}
.ab-team__card{text-align:center;max-width:260px}
.ab-team__img{
  width:200px;height:200px;margin:0 auto var(--sp-md);overflow:hidden;
  border-radius:50%;border:4px solid var(--ab-warm);
  transition:all .4s ease;
}
.ab-team__card:hover .ab-team__img{border-color:var(--ab-gold);transform:scale(1.03)}
.ab-team__img img{width:100%;height:100%;object-fit:cover}
.ab-team__card h3{font-size:1.15rem;color:var(--ab-deep);margin-bottom:4px}
.ab-team__card p{font-size:.82rem;color:var(--ab-muted);letter-spacing:.04em}

/* --- COURSES --- */
.ab-courses__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ab-course{
  display:block;padding:24px 20px;background:var(--ab-white);
  border:1px solid var(--ab-light);border-radius:var(--radius);
  transition:all .35s ease;
}
.ab-course:hover{border-color:var(--ab-teal);transform:translateY(-4px);box-shadow:0 10px 32px rgba(0,0,0,.06)}
.ab-course--fun{border-color:var(--ab-gold);background:rgba(212,168,83,.03)}
.ab-course--fun:hover{border-color:var(--ab-gold-light)}
.ab-course__level{
  font-family:var(--font-body);font-size:.6rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ab-teal);
  margin-bottom:6px;
}
.ab-course--fun .ab-course__level{color:var(--ab-gold)}
.ab-course h3{font-size:1rem;color:var(--ab-deep);margin-bottom:6px}
.ab-course p{font-size:.78rem;color:var(--ab-muted);line-height:1.55;margin-bottom:var(--sp-sm)}
.ab-course__link{
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ab-teal);
}
.ab-course:hover .ab-course__link{color:var(--ab-sea)}

/* --- BUTTONS --- */
.ab-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:.85rem;font-weight:700;
  padding:15px 30px;border:none;cursor:pointer;
  transition:all .35s cubic-bezier(.23,1,.32,1);
}
.ab-btn--gold{background:var(--ab-gold);color:var(--ab-white)}
.ab-btn--gold:hover{background:var(--ab-gold-light);transform:translateY(-3px);box-shadow:0 14px 44px rgba(212,168,83,.3)}
.ab-btn--ghost{background:rgba(255,255,255,.1)!important;color:#FFFFFF!important;border:2px solid #FFFFFF!important;border-radius:0!important}
.ab-btn--ghost:hover{border-color:var(--ab-gold)!important;color:var(--ab-gold)!important;background:rgba(212,168,83,.1)!important;transform:translateY(-3px)}
.ab-cta .ab-btn--ghost,
.ab-page .ab-btn--ghost,
a.ab-btn--ghost,
a.ab-btn.ab-btn--ghost{color:#FFFFFF!important;border-color:#FFFFFF!important}

/* --- CTA --- */
.ab-cta{
  background:linear-gradient(160deg,var(--ab-deep),var(--ab-ink));
  text-align:center;position:relative;overflow:hidden;
  padding:var(--sp-2xl) 0 0 !important;
}
.ab-cta h2{font-size:clamp(2rem,5vw,3.2rem);font-weight:400;color:var(--ab-white);margin-bottom:var(--sp-sm)}
.ab-cta p{font-size:1rem;color:rgba(255,255,255,.5);max-width:500px;margin:0 auto var(--sp-lg);line-height:1.8}
.ab-cta__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ab-cta__fade{height:120px;background:linear-gradient(to bottom,transparent,#ffffff);margin-top:var(--sp-2xl)}

/* --- RESPONSIVE --- */
@media(max-width:1024px){
  .ab-about__grid{grid-template-columns:1fr}
  .ab-why__grid{grid-template-columns:repeat(2,1fr)}
  .ab-courses__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .ab-hero{min-height:auto;padding-top:60px}
  .ab-hero__stats{flex-direction:column}
  .ab-hero__stat{border-right:none;border-bottom:1px solid rgba(212,168,83,.04)}
  .ab-hero__stat:last-child{border-bottom:none}
  .ab-section{padding:var(--sp-xl) 0}
  .ab-why__grid{grid-template-columns:1fr}
  .ab-team__grid{flex-direction:column;align-items:center}
  .ab-courses__grid{grid-template-columns:1fr}
  .ab-cta__btns{flex-direction:column;align-items:center}
}/* End custom CSS */