/* =========================
   Global Tokens & Defaults
   ========================= */
:root {
  /* Brand palette */
  --blue-900: #07074E;
  --teal-800: #00617F;
  --aqua-600: #00B0B9;
  --bright-500: #009CDE;
  --taupe-300: #CAC747;
  --gold-400: #FFC600;
  --gold-600: #CBA052;

  /* Surfaces & ink */
  --bg: #FAFBFF;
  --panel: #FFFFFF;
  --ink: #0B1220;
  --ink-2: #0A1022;
  --muted: #637184;
  --line: #E8EEF5;
  --line-2: #EEF3F9;
  --shadow: 0 24px 60px rgba(7,7,78,.10), 0 3px 10px rgba(7,7,78,.06);

  /* Rhythm */
  --container: 1200px;
  --radius-xl: 28px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --s1: 8px;
  --s2: 12px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 48px;
  --s7: 72px;
  --s8: 104px;

  /* Type scale */
  --fs-hero: clamp(32px, 6.5vw, 60px);
  --fs-h1:clamp(30px,5.2vw,46px);
  --fs-h2: clamp(28px, 4.6vw, 42px);
  --fs-h3: clamp(20px, 3.5vw, 26px);
  --fs-lede: clamp(16px, 2.8vw, 18px);
  --fs-body: 16px;
  --fs-kicker: 12px;

  /* Animated border defaults */
  --border-w: 3px;
  --border-speed: 14s;
}

/* Base */
html { scroll-behavior: smooth; }
::selection { background: rgba(0,176,185,.18); }
:focus-visible { outline: 2px solid var(--aqua-600); outline-offset: 2px; border-radius: 6px; }

.btn-nav {
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teal-800);
  background: rgba(0,176,185,.16);
  border: 1px solid rgba(0,176,185,.35);
  border-radius: 999px;
  padding: 8px 16px;
  transition: background .3s ease;
}
.btn-nav:hover { background: rgba(0,176,185,.24); color: var(--teal-800); }

.btn-custom {
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
  padding: 8px 16px;
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.btn-custom.gold {
  color: var(--gold-600);
  background: rgba(203,160,82,.16);
  border: 1px solid rgba(203,160,82,.35);
}
.btn-custom.gold:hover {
  background: rgba(203,160,82,.32);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(203,160,82,.4);
}
.btn-custom.taupe {
  color: var(--taupe-300);
  background: rgba(202,199,71,.16);
  border: 1px solid rgba(202,199,71,.35);
}
.btn-custom.taupe:hover {
  background: rgba(202,199,71,.32);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(202,199,71,.4);
}

/* =========================
   Hero
   ========================= */
.hero-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-overlay::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(130deg, #020216 0%, #043046 36%, #00617F 72%, #07074E 100%);
  opacity: .88;
}
.hero-overlay::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 140%; height: 140%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,198,0,.5) 0%, rgba(255,198,0,0) 60%);
  filter: blur(2px); animation: slowPulse 12s ease-in-out infinite alternate;
}
@keyframes slowPulse { from { transform: translate(-50%, -50%) scale(1); opacity:.55 } to { transform: translate(-50%, -50%) scale(1.03); opacity:.8 } }

.eyebrow { font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; opacity: .95; }
.slider-element h2 { font-size: var(--fs-hero); line-height: 1.08; letter-spacing: -.01em; margin: .35rem 0 .75rem; }
.slider-element .lede { font-size: var(--fs-lede); opacity: .96; max-width: 62ch; margin: 0 auto var(--s4); }

/* Divider */
.divider { position: relative; height: 70px; margin-top: -2px; background: linear-gradient(#fff, #fff); }
.divider svg { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; }
.divider path { fill: var(--bg); }

/* Headings & Kickers */
.kicker { display: inline-block; margin-bottom: 12px; font-weight: 700; font-size: var(--fs-kicker); letter-spacing: .18em; text-transform: uppercase; color: var(--aqua-600); }
h2, h3 { color: var(--gold-600); margin: 0 0 12px; }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.06; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; }

/* Panels & Cards */
.panel { background: var(--panel); border: 1px solid var(--gold-600); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: clamp(20px, 3.4vw, 36px); }
.panel.soft { border-color: var(--line); }

.stack { position: relative; display: grid; gap: var(--s3); }
.stack .card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--taupe-300);
  box-shadow: 0 20px 40px rgba(7,7,78,.12);
  transform: translateZ(0);
}
.stack .card img { width: 100%; height: 100%; object-fit: cover; }
.stack .float {
  position: absolute;
  right: -6%;
  bottom: -6%;
  width: min(44%, 380px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gold-400);
  box-shadow: 0 18px 36px rgba(7,7,78,.14);
}

/* Custom border color for the sticky-sidebar card figures */
.sticky-sidebar .stack .card {
  --bs-card-border-color: #07074E;
  --bs-border-color: #07074E;
  border-color: #07074E !important;
}

/* Bands & Masonry */
.band { position: relative; min-height: 56vh; overflow: hidden; border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); }
.band > .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.band > .overlay { position: absolute; inset: 0; }
.band > .inner { position: relative; z-index: 1; max-width: 900px; }

.masonry { column-count: 1; column-gap: 1rem; }
@media (min-width: 600px) { .masonry { column-count: 2; } }
@media (min-width: 992px) { .masonry { column-count: 3; } }
.tile { break-inside: avoid; margin-bottom: 1rem; border-radius: .75rem; overflow: hidden; border: 1px solid rgba(0,0,0,.08); }

/* === Page Title Header (converted hero) ========================== */
.page-head{
  position:relative; display:grid; place-items:center; color:#fff; overflow:hidden;
  background:#03031d;
  min-height:44vh; padding:var(--s6) 0 var(--s6);
  border-bottom:1px solid var(--line);
  isolation:isolate;
}
.page-head::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(130deg,#020216 0%, #043046 36%, #00617F 72%, #07074E 100%);
  opacity:.88; z-index:1;
}
.page-head::after{
  content:""; position:absolute; width:980px; height:980px; border-radius:50%;
  right:-160px; top:-240px; z-index:1;
  background:radial-gradient(circle, rgba(255,198,0,.50) 0%, rgba(255,198,0,0) 60%);
  filter:blur(2px); animation:slowPulse 12s ease-in-out infinite alternate;
}
@keyframes slowPulse{from{transform:scale(1); opacity:.55} to{transform:scale(1.03); opacity:.8}}

.page-head[data-bg="image"]{ background-image:var(--page-head-image); background-size:cover; background-position:center; }
.page-head .inner{position:relative; z-index:2; text-align:center; max-width:1000px; padding:0 var(--s4);}
.page-head .eyebrow{font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;opacity:.95; color:#CFEFF4}
.page-head h1{font-size:var(--fs-h1); line-height:1.08; letter-spacing:-.01em; margin:.35rem 0 .35rem; color:#fff}
.page-head span{font-size:var(--fs-lede); opacity:.96; max-width:70ch; margin:0 auto; color:#f2f6ff}

/* ===========================================
   Animated Gradient Border (always in motion)
   =========================================== */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.border-anim {
  position: relative;
  isolation: isolate;
  border: none !important;
  background: var(--panel);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.border-anim::before,
.border-anim::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.border-anim::before {
  padding: var(--border-w);
  background:
    conic-gradient(
      from var(--ang) at 50% 50%,
      var(--teal-800) 0%,
      var(--aqua-600) 20%,
      var(--bright-500) 40%,
      var(--gold-400) 60%,
      var(--gold-600) 80%,
      var(--teal-800) 100%
    );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  z-index: 1;
  animation: border-angle var(--border-speed) linear infinite;
}
.border-anim::after {
  inset: -6px; padding: calc(var(--border-w) + 2px);
  background:
    conic-gradient(
      from var(--ang) at 50% 50%,
      var(--teal-800) 0%,
      var(--aqua-600) 20%,
      var(--bright-500) 40%,
      var(--gold-400) 60%,
      var(--gold-600) 80%,
      var(--teal-800) 100%
    );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: blur(14px) opacity(.55);
  z-index: 0;
  animation: border-angle calc(var(--border-speed) * 1.1) linear infinite;
}
@keyframes border-angle { from { --ang: 0deg; } to { --ang: 360deg; } }
.border-anim.thick   { --border-w: 4px; }
.border-anim.thicker { --border-w: 6px; }
.card.border-anim { border: none !important; border-radius: var(--radius-xl) !important; }
@media (prefers-reduced-motion: reduce) { .border-anim::before, .border-anim::after { animation: none !important; } }

/* =========================
   (End animated border)
   ========================= */

/* ====== ADDITIONS for About: lock water.jpg to card bottom-right ====== */

/* 1) Wrapper allows the image to hang outside the card without being clipped */
.about-card-wrap { position: relative; }

/* 2) Dedicated class so it doesn't inherit other .float behaviors */
.about-card-wrap .water-float {
  position: absolute;           /* Always absolute (no mobile fallback) */
  right: -6%;
  bottom: -6%;
  width: min(44%, 380px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gold-400);
  box-shadow: 0 18px 36px rgba(7,7,78,.14);
  z-index: 3;
}

/* Optional: on very small widths, you may shrink it slightly */
@media (max-width: 575.98px) {
  .about-card-wrap .water-float {
    width: min(52%, 340px);
    right: -4%;
    bottom: -4%;
  }
}

/* ====== (END original) ====== */


/* ====== OVERRIDES: make water image responsive + reserve space ======
   - Kept original rules intact above; these override purely by order.  */
.about-card-wrap .water-float{
  /* Keep it pinned while scaling */
  right: -6%;
  bottom: -6%;
  width: clamp(220px, 32vw, 380px);
  transform: translateZ(0);
}
.about-card-wrap .water-float img{
  display:block; width:100%; height:100%; object-fit:cover;
}
@media (max-width: 991.98px){
  .about-card-wrap .water-float{
    right: -5%;
    bottom: -5%;
    width: clamp(200px, 40vw, 340px);
  }
}
@media (max-width: 575.98px){
  .about-card-wrap .water-float{
    right: -4%;
    bottom: -4%;
    width: clamp(180px, 52vw, 300px);
  }
}
/* ====== (END overrides) ====== */


/* ====== FINAL TWEAK PER REQUEST: place water 10% from top ======
   - Leaves everything else untouched. This wins by order. */
.about-card-wrap .water-float{
  top: 10%;
  bottom: auto;   /* unset previous bottom pin */
}
@media (max-width: 991.98px){
  .about-card-wrap .water-float{ top: 10%; bottom: auto; }
}
@media (max-width: 575.98px){
  .about-card-wrap .water-float{ top: 10%; bottom: auto; }
}
/* ====== (END final tweak) ====== */