/* Guestversity Group — premium shared styles */

:root{
  --gold:#D4AF37;
  --gold-soft:#D8BC5A;
  --ink:#050505;
  --navy:#0c1f3f; /* complementary accent (royal navy) */
}

html{scroll-behavior:smooth;}

/* Prevent accidental horizontal scroll on small devices */
html, body{max-width: 100%; overflow-x: hidden;}

/* Background pattern + vignette */
.bg-premium-grid{
  background-image:
    radial-gradient(rgba(212,175,55,.08) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 20%, black 0%, black 35%, transparent 70%);
}

.bg-vignette{
  background: radial-gradient(circle at 50% 20%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.88) 100%);
}

/* Hero animated aurora */
.hero-aurora{
  background:
    radial-gradient(800px 420px at 15% 20%, rgba(212,175,55,.28), rgba(0,0,0,0) 60%),
    radial-gradient(620px 390px at 85% 20%, rgba(255,255,255,.12), rgba(0,0,0,0) 65%),
    radial-gradient(720px 480px at 55% 85%, rgba(212,175,55,.18), rgba(0,0,0,0) 60%),
    linear-gradient(120deg, rgba(10,10,12,1), rgba(5,5,5,1));
  filter: saturate(1.1) contrast(1.05);
  animation: auroraShift 12s ease-in-out infinite;
}
@keyframes auroraShift{
  0%,100%{transform: translate3d(0,0,0) scale(1);}
  50%{transform: translate3d(0,-14px,0) scale(1.02);}
}

/* Hero cinematic background film (cross-fade stacked images)
   NOTE: Keep z-index non-negative so it layers within the hero section.
*/
.hero-film{
  position: absolute;
  inset: 0;
  z-index: 0; /* was -20 (could disappear behind page background) */
  overflow: hidden;
  pointer-events: none;
  transform: translateZ(0);
}

.hero-film-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Smooth cinematic cross-fade */
  transition: opacity 2400ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
  backface-visibility: hidden;
  transform: scale(1.01);
  /* Slight brightness lift so the cinematic film reads better on mobile/tablet */
  filter: saturate(1.05) contrast(1.02) brightness(1.18);
}

.hero-film-img.is-active{
  opacity: 0.16; /* keep film subtle but visible */
  animation: heroFilmZoom 8s ease-out both;
}

@keyframes heroFilmZoom{
  from{ transform: scale(1.00); }
  to{ transform: scale(1.05); }
}

/* Dark cinematic overlay to guarantee readability */
.hero-film-overlay{
  /* Let the section gradient show through while still preserving text contrast */
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.44) 45%, rgba(0,0,0,.64) 100%),
    radial-gradient(900px 520px at 18% 20%, rgba(0,0,0,.05), rgba(0,0,0,.60) 70%),
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.64) 100%);
  backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce){
  .hero-film-img{transition:none !important;}
  .hero-film-img.is-active{animation:none !important;}
}

/* Gold gradient text */
.text-gradient-gold{
  background: linear-gradient(92deg, #FFF6CF 0%, var(--gold) 28%, #FFE9A6 55%, #B9922B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Lines & indicators */
.gold-line{
  background: linear-gradient(to right, transparent, rgba(212,175,55,.75), transparent);
  box-shadow: 0 0 24px rgba(212,175,55,.18);
}

.scroll-dot{
  width: 6px; height: 6px; border-radius: 999px;
  background: rgba(212,175,55,.95);
  box-shadow: 0 0 18px rgba(212,175,55,.65);
  transform: translateY(-10px);
  animation: scrollDot 1.65s ease-in-out infinite;
}
@keyframes scrollDot{
  0%,100%{transform: translateY(-10px); opacity:.25}
  50%{transform: translateY(10px); opacity:1}
}

/* Nav links (animated underline) */
.navlink{
  position: relative;
  font-size: 0.9rem;
  color: rgba(255,255,255,.78);
  transition: color .25s ease;
  letter-spacing: .02em;
}
.navlink:hover{color: rgba(255,255,255,1);}
.navlink::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  height:1px;
  width:100%;
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .35s ease;
  background: linear-gradient(to right, rgba(212,175,55,.95), rgba(212,175,55,.05));
  box-shadow: 0 0 18px rgba(212,175,55,.18);
}
.navlink:hover::after{transform: scaleX(1);}

.mobilelink{
  padding: .9rem 1rem;
  border-radius: 1rem;
  color: rgba(255,255,255,.85);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.mobilelink:hover{
  background: rgba(255,255,255,.06);
  color: white;
  transform: translateX(2px);
}

/* Buttons */
.btn-gold{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.72rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.45);
  background: linear-gradient(135deg, rgba(212,175,55,.95), rgba(185,146,43,.85));
  color: rgba(5,5,5,1);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(212,175,55,.25), 0 12px 30px rgba(212,175,55,.12);
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
  position: relative;
  overflow:hidden;
}
.btn-gold:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(212,175,55,.35), 0 16px 42px rgba(212,175,55,.18);
  filter: saturate(1.05);
}
.btn-gold::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.40) 45%, transparent 70%);
  transform: translateX(-120%) skewX(-18deg);
  opacity:.0;
}
.btn-gold:hover::before{opacity:.7; animation: btnShine 900ms ease;}
@keyframes btnShine{from{transform: translateX(-120%) skewX(-18deg);}to{transform: translateX(120%) skewX(-18deg);}}

.btn-glow-pulse{animation: glowPulse 3.8s ease-in-out infinite;}
@keyframes glowPulse{
  0%,100%{box-shadow: 0 0 0 1px rgba(212,175,55,.25), 0 12px 30px rgba(212,175,55,.12);}
  50%{box-shadow: 0 0 0 1px rgba(212,175,55,.35), 0 18px 44px rgba(212,175,55,.18);}
}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.72rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: white;
  font-weight: 500;
  transition: background .25s ease, transform .2s ease, border-color .25s ease;
}
.btn-ghost:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(212,175,55,.35);
  transform: translateY(-1px);
}

/* Burger icon */
.burger-line{
  display:block;
  height:2px;
  width:100%;
  background: rgba(255,255,255,.85);
  border-radius: 999px;
  position: relative;
}
.burger-line:first-child{transform: translateY(-3px);}
.burger-line:last-child{transform: translateY(3px); width: 80%; margin-left:auto; background: rgba(212,175,55,.85);}

/* Section kicker */
.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  color: rgba(212,175,55,.9);
  font-size: .72rem;
  letter-spacing: .34em;
}

/* Reveal animations (IntersectionObserver toggles .is-visible) */
.reveal{opacity:0; transform: translateY(18px); filter: blur(6px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1), filter .8s cubic-bezier(.2,.8,.2,1);} 
.reveal.is-visible{opacity:1; transform: translateY(0); filter: blur(0);} 
.reveal-delay{transition-delay: .12s;}
.reveal-delay2{transition-delay: .22s;}
.reveal-left{opacity:0; transform: translateX(-18px) translateY(10px); filter: blur(6px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1), filter .9s cubic-bezier(.2,.8,.2,1);} 
.reveal-right{opacity:0; transform: translateX(18px) translateY(10px); filter: blur(6px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1), filter .9s cubic-bezier(.2,.8,.2,1);} 
.reveal-left.is-visible,.reveal-right.is-visible{opacity:1; transform: translateX(0) translateY(0); filter: blur(0);} 

/* Tiles */
.feature-tile{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 1.5rem;
  padding: 1.25rem 1.25rem;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.feature-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(212,175,55,.35);
  box-shadow: 0 0 0 1px rgba(212,175,55,.12), 0 18px 50px rgba(0,0,0,.35);
}
.tile-top{display:flex; align-items:center; gap:.75rem;}
.tile-icon{color: rgba(212,175,55,.9);}
.tile-title{font-weight: 600;}
.tile-text{margin-top:.55rem; color: rgba(255,255,255,.65); font-size: .95rem; line-height: 1.6;}

/* WhatsApp floating widget (injected by script.js) */
.wa-widget{
  position: fixed;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: grid;
  gap: 12px;
  justify-items: end;
}

.wa-fab{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  height: 54px;
  padding: 0 16px 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.45);
  background: linear-gradient(135deg, rgba(212,175,55,.95), rgba(185,146,43,.85));
  color: rgba(5,5,5,1);
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(212,175,55,.20), 0 18px 54px rgba(0,0,0,.55);
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}
.wa-fab:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(212,175,55,.30), 0 22px 70px rgba(0,0,0,.62);
  filter: saturate(1.05);
}
.wa-fab:active{transform: translateY(0);}
.wa-fab:focus-visible{
  outline: none;
  box-shadow: 0 0 0 1px rgba(212,175,55,.35), 0 0 0 7px rgba(212,175,55,.10), 0 22px 70px rgba(0,0,0,.62);
}

.wa-fab-icon{
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
}

.wa-fab-text{font-size: .92rem; letter-spacing: .01em;}

.wa-panel{
  width: min(360px, calc(100vw - 36px));
  border-radius: 1.35rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(5,5,5,.62);
  backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px rgba(212,175,55,.10), 0 26px 90px rgba(0,0,0,.70);
  overflow: hidden;
  transform: translateY(10px) scale(.985);
  opacity: 0;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease;
}

.wa-panel.is-open{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.wa-panel-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.wa-panel-title{font-family: 'Fraunces', ui-serif, Georgia, serif; font-size: 1.05rem; line-height: 1.1; color: white;}
.wa-panel-sub{margin-top: 4px; font-size: .82rem; color: rgba(255,255,255,.60);}

.wa-close{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.80);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.wa-close:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(212,175,55,.35);
  transform: translateY(-1px);
}

.wa-panel-body{padding: 14px 16px 16px;}

.wa-input{
  width: 100%;
  resize: none;
  border-radius: 1.15rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  color: white;
  padding: 12px 12px;
  outline: none;
  line-height: 1.5;
}
.wa-input::placeholder{color: rgba(255,255,255,.42);}
.wa-input:focus{
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 0 0 1px rgba(212,175,55,.15), 0 0 0 6px rgba(212,175,55,.07);
}

.wa-actions{display: flex; justify-content: flex-end; margin-top: 10px;}

.wa-send{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.65rem 1.0rem;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.45);
  background: linear-gradient(135deg, rgba(212,175,55,.95), rgba(185,146,43,.85));
  color: rgba(5,5,5,1);
  font-weight: 700;
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}
.wa-send:hover{transform: translateY(-1px); filter: saturate(1.05);}

@media (max-width: 420px){
  .wa-fab-text{display:none;}
  .wa-fab{width: 54px; padding: 0; justify-content: center;}
  .wa-fab-icon{border-color: rgba(0,0,0,.18); background: rgba(255,255,255,.15);}
}

/* Scroll-to-top (injected by script.js) */
.to-top{
  position: fixed;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(92px + env(safe-area-inset-bottom, 0px)); /* sits above WhatsApp button */
  z-index: 70;
  opacity: 0;
  transform: translateY(10px) scale(.985);
  pointer-events: none;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease;
}

.to-top.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.to-top-btn{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
  color: rgba(255,255,255,.90);
  box-shadow: 0 0 0 1px rgba(212,175,55,.08), 0 22px 70px rgba(0,0,0,.58);
  display: grid;
  place-items: center;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.to-top-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(212,175,55,.35);
}

.to-top-btn:focus-visible{
  outline: none;
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 0 0 1px rgba(212,175,55,.18), 0 0 0 7px rgba(212,175,55,.10), 0 22px 70px rgba(0,0,0,.58);
}

.to-top-icon{
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 420px){
  .to-top{bottom: 86px;}
}

/* Services */
.service-card{
  position: relative;
  border-radius: 1.8rem;
  padding: 1.35rem 1.35rem;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 240px at 10% 0%, rgba(212,175,55,.14), rgba(0,0,0,0) 60%),
    rgba(255,255,255,.03);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.service-card:hover{
  transform: translateY(-4px);
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 0 0 1px rgba(212,175,55,.16), 0 24px 70px rgba(0,0,0,.45);
}
.service-title{font-family: Fraunces, ui-serif, Georgia, serif; font-size: 1.25rem;}
.service-text{margin-top:.55rem; color: rgba(255,255,255,.65); line-height: 1.65;}
.service-link{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top: 1rem;
  color: rgba(212,175,55,.95);
  font-weight: 600;
}
.service-link::after{
  content:"";
  height: 1px;
  width: 22px;
  background: linear-gradient(to right, rgba(212,175,55,.9), rgba(212,175,55,0));
  transition: width .25s ease;
}
.service-card:hover .service-link::after{width: 34px;}

/* Counters */
.counter-tile{
  border-radius: 1.4rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  padding: 1.2rem 1.2rem;
}
.counter-number{font-family: Fraunces, ui-serif, Georgia, serif; font-size: 2.1rem; color: rgba(212,175,55,.98); letter-spacing: .01em;}
.counter-label{margin-top:.25rem; color: rgba(255,255,255,.62);}

/* Carousel */
.carousel-btn{
  padding: .55rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  transition: border-color .25s ease, background .25s ease, transform .2s ease;
}
.carousel-btn:hover{border-color: rgba(212,175,55,.35); background: rgba(255,255,255,.07); transform: translateY(-1px);}

.carousel-track{
  display:flex;
  gap: 18px;
  will-change: transform;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1);
}
.testimonial-slide{
  min-width: 100%;
  border-radius: 1.6rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 1.3rem 1.3rem;
}
.testimonial-quote{font-family: Fraunces, ui-serif, Georgia, serif; font-size: 1.25rem; line-height: 1.55;}
.testimonial-meta{margin-top:.9rem; color: rgba(255,255,255,.70);}
.dot{
  height: 10px; width: 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.35);
  background: transparent;
  transition: transform .2s ease, background .25s ease;
}
.dot.is-active{background: rgba(212,175,55,.85); transform: scale(1.05);}

.footerlink{color: rgba(255,255,255,.65); transition: color .2s ease;}
.footerlink:hover{color: rgba(212,175,55,.95);}

/* Better wrapping for long footer links (addresses, emails) */
.footerlink{overflow-wrap: anywhere; word-break: break-word;}

/* Small-screen polish (keep laptop layout unchanged) */
@media (max-width: 640px){
  /* Navbar: prevent logo text from pushing the burger off-screen */
  header nav a.group{min-width: 0; gap: .6rem;}
  header nav a.group > div.leading-tight{min-width: 0;}
  header nav a.group > div.leading-tight > div:first-child{
    max-width: 46vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  header nav a.group > div.leading-tight > div:nth-child(2){display:none;}

  /* Mobile menu: keep it within the viewport and scrollable if needed */
  [data-mobile-menu]{
    max-height: calc(100svh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Hero: avoid excessive height on phones */
  [data-hero]{min-height: auto;}
  .hero-lines{display:none;}

  /* Logo tiles: reduce padding so grid feels less cramped */
  .logo-tile{padding: 1.05rem; border-radius: 1.4rem;}
  .logo-img{max-width: 170px;}

  /* Testimonials: slightly smaller type for narrow widths */
  .testimonial-quote{font-size: 1.1rem;}

  /* Pagination buttons: reduce hitbox slightly to avoid overflow */
  .page-btn{padding: .48rem .7rem; font-size: .86rem;}
}

/* Extra-small devices: keep header compact */
@media (max-width: 360px){
  header nav a.group > div.leading-tight{display:none;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal, .carousel-track, .hero-aurora, .scroll-dot{transition:none !important; animation:none !important;}
  .hero-blob,.hero-lines .hero-line,.btn-glow-pulse{animation:none !important;}
  .hero-headline-line{opacity:1 !important; transform:none !important; filter:none !important;}
}

/* Mobile menu animation helpers (script.js toggles these) */
[data-mobile-menu].menu-enter{transform: translateY(-8px); opacity: 0;}
[data-mobile-menu].menu-enter.menu-enter-active{transform: translateY(0); opacity: 1; transition: transform 240ms cubic-bezier(.2,.8,.2,1), opacity 240ms ease;}
[data-mobile-menu].menu-leave{transform: translateY(0); opacity: 1; transition: transform 240ms cubic-bezier(.2,.8,.2,1), opacity 240ms ease;}
[data-mobile-menu].menu-leave{transform: translateY(-8px); opacity: 0;}

/* Parallax banner */
.parallax-banner{border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);}
.parallax-layer{
  background:
    radial-gradient(900px 480px at 20% 20%, rgba(212,175,55,.22), rgba(0,0,0,0) 60%),
    radial-gradient(780px 520px at 80% 70%, rgba(255,255,255,.10), rgba(0,0,0,0) 62%),
    linear-gradient(120deg, rgba(10,10,12,1), rgba(5,5,5,1));
  background-attachment: fixed;
  filter: saturate(1.05) contrast(1.05);
}
@media (max-width: 768px){
  .parallax-layer{background-attachment: scroll;}
}

/* Luxury form inputs */
.lux-input{
  width: 100%;
  border-radius: 1.1rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: white;
  padding: .85rem 1rem;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease, background .25s ease;
}
.lux-input:focus{
  border-color: rgba(212,175,55,.55);
  box-shadow: 0 0 0 1px rgba(212,175,55,.25), 0 0 0 6px rgba(212,175,55,.08);
  background: rgba(0,0,0,.28);
}
.lux-input::placeholder{color: rgba(255,255,255,.45);}
select.lux-input{appearance: none;}
textarea.lux-input{resize: vertical;}

/* Blogs UI */
.filter-pill{
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.80);
  font-size: .9rem;
  transition: border-color .25s ease, background .25s ease, transform .2s ease;
}
.filter-pill:hover{border-color: rgba(212,175,55,.35); background: rgba(255,255,255,.07); transform: translateY(-1px);}
.filter-pill.is-active{border-color: rgba(212,175,55,.55); background: rgba(212,175,55,.12); color: white;}

.blog-card{
  border-radius: 1.8rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.blog-card:hover{transform: translateY(-4px); border-color: rgba(212,175,55,.45); box-shadow: 0 0 0 1px rgba(212,175,55,.14), 0 24px 70px rgba(0,0,0,.45);}
.blog-media{
  height: 172px;
  background:
    radial-gradient(700px 240px at 20% 10%, rgba(212,175,55,.20), rgba(0,0,0,0) 60%),
    linear-gradient(120deg, rgba(15,16,20,1), rgba(0,0,0,1));
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.blog-body{padding: 1.2rem 1.25rem 1.25rem;}
.blog-meta{font-size: .78rem; letter-spacing: .22em; color: rgba(212,175,55,.9);}
.blog-title{margin-top: .55rem; font-family: Fraunces, ui-serif, Georgia, serif; font-size: 1.35rem; line-height: 1.25;}
.blog-excerpt{margin-top: .55rem; color: rgba(255,255,255,.65); line-height: 1.65;}
.blog-link{
  display:inline-flex;
  margin-top: .95rem;
  color: rgba(255,255,255,.85);
  position: relative;
}
.blog-link::after{
  content:"";
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 1px;
  width: 100%;
  transform: scaleX(.15);
  transform-origin: left;
  transition: transform .35s ease;
  background: linear-gradient(to right, rgba(212,175,55,.95), rgba(212,175,55,.05));
}
.blog-card:hover .blog-link::after{transform: scaleX(1);}

.page-btn{
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.80);
  transition: border-color .25s ease, background .25s ease, transform .2s ease;
}
.page-btn:hover{border-color: rgba(212,175,55,.35); background: rgba(255,255,255,.07); transform: translateY(-1px);}
.page-btn.is-active{border-color: rgba(212,175,55,.55); background: rgba(212,175,55,.12); color: white;}

/* Properties section: logo tiles */
.logo-tile{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 1.6rem;

  /* Light surface (champagne) for logo contrast */
  border: 1px solid rgba(212,175,55,.28);
  background:
    radial-gradient(520px 180px at 20% 0%, rgba(212,175,55,.10), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(245,240,230,.96), rgba(255,255,255,.92));

  padding: 1.35rem;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06),
    0 18px 44px rgba(0,0,0,.28);

  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}
.logo-tile:hover{
  transform: translateY(-3px) scale(1.05);
  border-color: rgba(212,175,55,.55);
  box-shadow:
    0 0 0 1px rgba(212,175,55,.18),
    0 20px 55px rgba(0,0,0,.38),
    0 0 34px rgba(212,175,55,.16);
  background:
    radial-gradient(520px 180px at 20% 0%, rgba(212,175,55,.14), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(255,250,240,.98), rgba(255,255,255,.94));
}

.logo-img{
  width: 100%;
  max-width: 220px;
  height: auto;
  object-fit: contain;

  /* Keep logos crisp on light surface */
  opacity: 1;
  filter: grayscale(1) contrast(1.05);

  transition: filter .3s ease, transform .3s ease;
}
.logo-tile:hover .logo-img{
  filter: grayscale(0) contrast(1.05);
  transform: scale(1.02);
}

/* Elegant marquee (slow + premium) */
.marquee{position: relative; overflow:hidden;}
.marquee::before,
.marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 90px;
  pointer-events:none;
  z-index: 2;
}
.marquee::before{left:0; background: linear-gradient(to right, rgba(10,10,12,1), rgba(10,10,12,0));}
.marquee::after{right:0; background: linear-gradient(to left, rgba(10,10,12,1), rgba(10,10,12,0));}

.marquee-track{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 0 20px;
  width: max-content;
  animation: marqueeScroll 46s linear infinite;
}

/* Slow down only the Corporate Tieups marquee */
.marquee--tieups .marquee-track{
  animation-duration: 90s;
}

.marquee-item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .6rem 1rem;
  border-radius: 800px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.10);
  letter-spacing: .2rem;
  font-size: .78rem;
  text-transform: uppercase;
  transition: border-color .35s ease, color .35s ease;
}
.marquee-item:hover{
  border-color: rgba(212,175,55,.40);
  color: rgba(212,175,55,.95);
}

/* Logo marquee (Corporate Tieups) */
.marquee-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 135px;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
}
.marquee-logo img{
  height: 80px;
  width: auto;
  max-width: 400px;
  object-fit: contain;
  opacity: .96;
  filter: grayscale(.28) contrast(0.5) saturate(0.5) brightness(.98);
  transition: filter .35s ease, transform .35s ease, opacity .35s ease;
}
.marquee-logo:hover{
  border-color: rgba(212,175,55,.40);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(212,175,55,.14), 0 18px 48px rgba(0,0,0,.35);
}
.marquee-logo:hover img{
  opacity: 1;
  filter: grayscale(0) contrast(1.12) saturate(1.22) brightness(1.10);
  transform: scale(1.02);
}

@keyframes marqueeScroll{
  from{transform: translate3d(0,0,0)}
  to{transform: translate3d(-50%,0,0)}
}

@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none !important;}
}

/* Section background themes (Home page contrast) */
.section-theme-black{
  /* Black + gold premium gradient (hero background) */
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(212,175,55,.20), rgba(0,0,0,0) 62%),
    radial-gradient(700px 420px at 82% 32%, rgba(255,255,255,.08), rgba(0,0,0,0) 65%),
    linear-gradient(160deg, rgba(5,5,5,1) 0%, rgba(10,10,12,1) 45%, rgba(5,5,5,1) 100%);
}
.section-theme-navy{
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(12,31,63,.55), rgba(0,0,0,0) 60%),
    radial-gradient(760px 420px at 80% 70%, rgba(212,175,55,.14), rgba(0,0,0,0) 62%),
    linear-gradient(150deg, rgba(6,8,14,1) 0%, rgba(12,31,63,.55) 40%, rgba(5,5,5,1) 100%);
}
.section-theme-charcoal{
  background:
    radial-gradient(900px 420px at 18% 10%, rgba(255,255,255,.07), rgba(0,0,0,0) 60%),
    radial-gradient(900px 460px at 80% 80%, rgba(212,175,55,.12), rgba(0,0,0,0) 62%),
    linear-gradient(160deg, rgba(6,6,7,1), rgba(14,14,18,1));
}

/* Subtle texture overlay helper */
.texture-noise{
  position: relative;
}
.texture-noise::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255,255,255,.7) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle at 50% 20%, black 0%, black 55%, transparent 86%);
}

/* Diagonal divider between sections */
.diagonal-divider{
  position: relative;
}
.diagonal-divider::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height: 38px;
  background: linear-gradient(135deg, rgba(212,175,55,.10), rgba(12,31,63,.12));
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
  opacity: .55;
  pointer-events:none;
}

/* Hero: cinematic animated blobs + animated lines */
.hero-blobs{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hero-blob{
  position:absolute;
  border-radius: 999px;
  filter: blur(48px);
  opacity: .55;
  transform: translate3d(0,0,0);
  animation: blobDrift 18s cubic-bezier(.2,.8,.2,1) infinite;
}
.hero-blob.is-gold{background: radial-gradient(circle at 30% 30%, rgba(212,175,55,.35), rgba(0,0,0,0) 62%);}
.hero-blob.is-navy{background: radial-gradient(circle at 30% 30%, rgba(12,31,63,.55), rgba(0,0,0,0) 62%);}
@keyframes blobDrift{
  0%,100%{transform: translate3d(0,0,0) scale(1);}
  50%{transform: translate3d(0,-18px,0) scale(1.03);}
}

.hero-lines{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.85;
}
.hero-lines .hero-line{
  position:absolute;
  height: 1px;
  width: 42vw;
  background: linear-gradient(to right, transparent, rgba(212,175,55,.75), rgba(12,31,63,.22), transparent);
  box-shadow: 0 0 24px rgba(212,175,55,.14);
  animation: lineFloat 12.5s ease-in-out infinite;
}
.hero-lines .hero-line:nth-child(1){left: 6vw; top: 22%;}
.hero-lines .hero-line:nth-child(2){right: 6vw; bottom: 22%; animation-delay: -4s;}
@keyframes lineFloat{
  0%,100%{transform: translate3d(0,0,0); opacity:.55;}
  50%{transform: translate3d(0,-10px,0); opacity:.95;}
}

/* Headline stagger reveal (per-line spans) */
.hero-headline-line{
  display:block;
  opacity:0;
  transform: translateY(14px);
  filter: blur(6px);
}
.hero-headline-line.is-in{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 900ms cubic-bezier(.2,.8,.2,1), transform 900ms cubic-bezier(.2,.8,.2,1), filter 900ms cubic-bezier(.2,.8,.2,1);
}

/* Reusable image containers (drop-in anywhere) */
.img-box{
  position: relative;
  overflow: hidden;
  border-radius: 1.6rem;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(212,175,55,.14), rgba(0,0,0,0) 60%),
    rgba(255,255,255,.03);
}

/* Common fixed ratios */
.img-box.ratio-1x1{aspect-ratio: 1 / 1;}
.img-box.ratio-4x3{aspect-ratio: 4 / 3;}
.img-box.ratio-16x9{aspect-ratio: 16 / 9;}
.img-box.ratio-21x9{aspect-ratio: 21 / 9;}
.img-box.ratio-3x4{aspect-ratio: 3 / 4;}
.img-box.ratio-4x5{aspect-ratio: 4 / 5;}

/* Full-bleed image inside the container */
.img-box > img,
.img-box > picture > img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Alternate fit mode (for logos, etc.) */
.img-box.is-contain > img,
.img-box.is-contain > picture > img{
  object-fit: contain;
  padding: 1.25rem;
  filter: grayscale(0) contrast(1);
}

/* Optional overlay label (place inside .img-box) */
.img-badge{
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: .5rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.35);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.85);
  font-size: .75rem;
  letter-spacing: .12em;
  backdrop-filter: blur(8px);
}

/* Placeholder state (when no image src yet) */
.img-box.is-placeholder{
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.55);
}
.img-box.is-placeholder::before{
  content: "IMAGE CONTAINER";
  font-size: .72rem;
  letter-spacing: .28em;
  color: rgba(212,175,55,.85);
}