:root{
  --bg:#0E0F12; --card:#1A1C20; --gold:#fbba00; --teal:#2EC5B6; --text:#F6F7F9; --muted:#ffffff;
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
}

.heading{ font-family: "Space Grotesk", Inter, system-ui; }

.ring-gold:hover{ box-shadow: 0 0 0 6px rgba(227,179,65,.15); }

.grid-bg{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(46,197,182,.15), transparent 60%),
    radial-gradient(800px 400px at 10% 0%, rgba(227,179,65,.12), transparent 60%);
}

/* ---- Slider ---- */
#hero-slider { position: relative; }
#hero-slider .slides { position: relative; height: 100%; width: 100%; }
#hero-slider .slide{
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.02);
  transition: opacity .6s ease, transform .8s ease;
}
#hero-slider .slide.active{
  opacity: 1; transform: scale(1);
  position: absolute;
}

/* Controls */
.slider-btn{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.35);
  color: white; border: 1px solid rgba(255,255,255,.25);
  height: 42px; width: 42px; border-radius: 999px;
  display: grid; place-items: center; font-size: 22px; line-height: 0;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.slider-btn:hover{
  background: rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 0 0 6px rgba(227,179,65,.15);
}
.slider-btn.prev{ left: 12px; }
.slider-btn.next{ right: 12px; }

/* Dots */
.slider-dots{
  position: absolute; bottom: 12px; left: 0; right: 0;
  display: flex; gap: 8px; justify-content: center; align-items: center;
}
.slider-dots button{
  height: 8px; width: 8px; border-radius: 999px;
  background: rgba(255,255,255,.35); border: 0; cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.slider-dots button.active{
  transform: scale(1.3);
  background: var(--gold);
}
/* nav highlight */
.nav-link{
  color: var(--muted);
  position: relative;
  padding-bottom: 4px;
}

.nav-link.active,
.nav-link[aria-current="page"]{
  color: #fff; /* highlight color */
}

.nav-link.active::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  opacity: .9;
}
#mobile-menu a.nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.06);
}
/* Why cards */
.why-card{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1rem;
  padding: 1rem;
  min-height: 168px;
  transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
.why-card::after{
  /* subtle diagonal shine on hover */
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(600px 200px at 20% 0%, rgba(227,179,65,.08), transparent 60%);
  transform: rotate(8deg);
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.why-card:hover{
  border-color: rgba(255,255,255,.3);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.why-card:hover::after{ opacity: 1; }

.why-icon{
  height: 40px; width: 40px;
  display: grid; place-items: center;
  border-radius: .75rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-size: 20px; line-height: 1;
  margin-bottom: .75rem;
}
.why-title{
  font-family: "Space Grotesk", Inter, system-ui;
  font-weight: 600; font-size: 1.05rem;
}
.why-desc{
  color: var(--muted);
  margin-top: .375rem; font-size: .925rem; line-height: 1.5;
}

/* Stats tiles */
.stat-tile{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  text-align: center;
}
.stat-num{
  font-family: "Space Grotesk", Inter, system-ui;
  font-weight: 700; font-size: 1.5rem;
  color: var(--text);
}
.stat-label{
  margin-top: .25rem;
  color: var(--muted);
  font-size: .8rem;
}
/* Masonry-style gallery using CSS columns */
.gallery-grid{
  column-count: 1;
  column-gap: 1rem;
}
@media (min-width: 640px){ .gallery-grid{ column-count: 2; } }
@media (min-width: 1024px){ .gallery-grid{ column-count: 3; } }

.gallery-item{
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: var(--card);
  transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
  cursor: zoom-in;
  position: relative;
}
.gallery-item:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.gallery-img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.gallery-cap{
  padding: .75rem 1rem;
  font-size: .85rem;
  color: var(--muted);
  background: rgba(0,0,0,.15);
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Lightbox tweaks */
#lightbox button{
  backdrop-filter: blur(4px);
  background: rgba(0,0,0,.35);
}
#lightbox button:hover{
  background: rgba(0,0,0,.55);
  box-shadow: 0 0 0 6px rgba(227,179,65,.15);
}
/* Quote / Contact banner */
.banner-cta{
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(46,197,182,.12), transparent 60%),
    radial-gradient(800px 400px at 10% 0%, rgba(227,179,65,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 20px 60px rgba(0,0,0,.35);
}
.banner-cta .heading { letter-spacing: .2px; }
/* --- Modern timeline --- */
.timeline-line{
  position: absolute; left: 1rem; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(46,197,182,.0), rgba(46,197,182,.4), rgba(227,179,65,.4), rgba(46,197,182,.0));
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
@media (min-width: 768px){ .timeline-line{ left: 50%; transform: translateX(-50%); } }

.timeline-item{
  position: relative;
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px){
  .timeline-item{
    grid-template-columns: 1fr 1fr;
  }
  .timeline-item:nth-child(odd) .timeline-card{ grid-column: 1 / 2; }
  .timeline-item:nth-child(even) .timeline-card{ grid-column: 2 / 3; }
}

.timeline-dot{
  position: absolute;
  left: .875rem; top: .75rem; z-index: 2;
  height: 14px; width: 14px; border-radius: 999px;
  background: var(--gold);
  box-shadow:
    0 0 0 3px rgba(227,179,65,.15),
    0 0 18px rgba(227,179,65,.35);
  border: 1px solid rgba(255,255,255,.35);
}
@media (min-width: 768px){ .timeline-dot{ left: 50%; transform: translate(-50%,0); } }

.timeline-card{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1rem;
  padding: 1.25rem 1.25rem 1rem 1.25rem;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  backdrop-filter: blur(2px);
}
.timeline-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}

.timeline-year{
  display: inline-block;
  margin-bottom: .5rem;
  padding: .35rem .6rem;
  border-radius: .75rem;
  font-family: "Space Grotesk", Inter, system-ui;
  font-weight: 700;
  font-size: .9rem;
  color: #0E0F12;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  box-shadow: 0 0 0 4px rgba(227,179,65,.12);
}

.timeline-tags{
  display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem;
}
.timeline-tags span{
  font-size: .75rem; color: var(--muted);
  padding: .25rem .5rem; border-radius: .5rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

/* subtle appear animation */
@keyframes riseFade {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.timeline-item .timeline-card{ animation: riseFade .45s ease both; }
.timeline-item:nth-child(1) .timeline-card{ animation-delay: .05s; }
.timeline-item:nth-child(2) .timeline-card{ animation-delay: .15s; }
.timeline-item:nth-child(3) .timeline-card{ animation-delay: .25s; }
.timeline-item:nth-child(4) .timeline-card{ animation-delay: .35s; }
/* Reusable dark scrim for banners */
.scrim::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(0,0,0,.72), rgba(0,0,0,.35) 45%, rgba(0,0,0,0));
  pointer-events:none;
}



.ring-gold:hover{ box-shadow:0 0 0 6px rgba(227,179,65,.15); }
    .no-scrollbar::-webkit-scrollbar{display:none;} .no-scrollbar{scrollbar-width:none;-ms-overflow-style:none;}
    /* Lightbox */
    .lb-backdrop{ background: rgba(0,0,0,.65); backdrop-filter: blur(3px); }
    .lb-btn{ background: rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.2); }
    .lb-btn:hover{ background: rgba(0,0,0,.6); border-color: rgba(255,255,255,.35); }
    .lb-autoplay.on{ background: linear-gradient(90deg, var(--gold), var(--teal)); color:#0E0F12; border:none; }


    .form-input{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); }
    .form-input:focus{ outline:none; border-color:rgba(255,255,255,.28); box-shadow:0 10px 30px rgba(0,0,0,.25); }

    /* ===== Preloader ===== */
body:not(.loaded) { overflow: hidden; }           /* prevent scroll until loaded */

#preloader {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease, visibility .5s ease;
}

body.loaded #preloader {
  opacity: 0;
  visibility: hidden;
}

/* Logo pulse */
.preloader-logo {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  animation: hb-pop 1200ms ease-in-out infinite;
}

/* Rotating ring */
.preloader-ring {
  box-shadow: 0 0 0 6px rgba(227,179,65,.10) inset;
  animation: hb-spin 1400ms linear infinite;
}

/* Keyframes */
@keyframes hb-pop {
  0%   { transform: scale(0.96); box-shadow: 0 10px 30px rgba(0,0,0,.15); }
  50%  { transform: scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,.25); }
  100% { transform: scale(0.96); box-shadow: 0 10px 30px rgba(0,0,0,.15); }
}

@keyframes hb-spin {
  from { transform: rotate(0deg);   border-color: rgba(255,255,255,0.12); }
  to   { transform: rotate(360deg); border-color: rgba(255,255,255,0.28); }
}
/* Pills (always visible) */
.hb-fab-pill{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .8rem; border-radius: 9999px;
  color:#fff; background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.hb-fab-pill:hover{ transform: translateY(-1px); background: rgba(0,0,0,.7); border-color: rgba(255,255,255,.3); }
.hb-fab-icon{
  display:grid; place-items:center;
  height:28px; width:28px; border-radius:9999px;
  background: linear-gradient(135deg, var(--gold), #ffd66c);
  color:#0E0F12; border:1px solid rgba(255,255,255,.2);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.hb-fab-label{ font-size:.9rem; }

/* Live chat drawer (reuse previous styling) */
.hb-chat .hb-field{
  width:100%; border-radius: .75rem;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding:.65rem .9rem; font-size:.9rem; outline:none;
}
.hb-chat .hb-field:focus{ border-color: rgba(255,255,255,.28); box-shadow: 0 0 0 4px rgba(227,179,65,.12); }
.hb-chat.show{ opacity:1; transform: translateY(0); pointer-events:auto; }

/* Mobile nudge */
@media (max-width: 480px){
  .hb-fab{ right:.75rem; bottom:.75rem; }
  #hb-chat{ right:.75rem; bottom:5.5rem; }
}



/* Looped highlight for headings */
.attention-loop{
  animation: hb-attention 1.8s ease-in-out infinite;
  text-shadow: 0 0 0 rgba(227,179,65,0);           /* start subtle */
  will-change: transform, text-shadow;
}
@keyframes hb-attention{
  0%   { transform: translateY(0);    text-shadow: 0 0 0 rgba(227,179,65,.0); }
  50%  { transform: translateY(-3px); text-shadow: 0 0 12px rgba(227,179,65,.4); }
  100% { transform: translateY(0);    text-shadow: 0 0 0 rgba(227,179,65,.0); }
}

/* Pause animation on hover/focus (less annoying) */
.attention-loop:hover,
.attention-loop:focus { animation-play-state: paused; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .attention-loop{ animation: none; text-shadow: none; }
}

.text-logo{
  font-size: 20px;
  line-height: 1.75rem;
}

/* Dark select + dropdown list */
.select-dark{
  background:#0E0F12;          /* field bg */
  color:#F6F7F9;               /* field text */
  border:1px solid rgba(255,255,255,.2);
  appearance:auto;             /* keep native arrow */
}

.select-dark:focus{
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 0 4px rgba(227,179,65,.12);
  outline: none;
}

/* Options inside the popup */
.select-dark option{
  background:#0E0F12;          /* dropdown bg */
  color:#ffffff;               /* dropdown text */
}

/* Hover/selected states (desktop browsers) */
.select-dark option:hover,
.select-dark option:checked{
  background:#14161A;
  color:#ffffff;
}

/* Hint browsers to render a dark popup (helps Safari/iOS) */
.select-dark{ color-scheme: dark; }

/* Firefox tweaks (optional) */
@-moz-document url-prefix() {
  .select-dark { -moz-appearance: none; }
}

/* Old IE arrow (harmless elsewhere) */
.select-dark::-ms-expand{ display:none; }

.pth{
  padding-top: 116px;
}