:root{
  --accent:#D98F89;
  --bg:#0b0b0b;
  --header-height: 72px; /* fallback, updated by JS */
  --overlay: rgba(125,225,225,.115); /* rgb(255 190 239 / 12%) */
  /* composited overlay over page background (#070707) => rgb(21,32,32) */
  --overlay-composite: #152020;
  --muted:#D9C49C;
}

html,body{
  height:100%;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #070707;
  color: #eee;
}
h1 {
  font-weight: 600 !important;
}
h1, h2, h3 {
  color:#D9C49C;
}
.text-accent{ color: var(--accent); }
.site-header{
  background-color: var(--overlay-composite) !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1050;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color .22s ease, box-shadow .22s ease, backdrop-filter .22s ease;
}

/* when scrolled apply a slightly stronger blur and shadow for separation */
.site-header.scrolled{
  background-color: rgba(5,5,5,0.72) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.site-header.menu-open.scrolled{
  background-color: var(--overlay-composite) !important;
  box-shadow: none;
}
/* Responsive burger menu (visible on viewports <576px) */
.burger{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
}
.burger .burger-lines{ display:inline-block; width:26px; height:18px; position:relative; }
.burger .line{
  display:block;
  position:absolute;
  left:0; right:0;
  height:2px;
  background: currentColor;
  border-radius:2px;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
}
.burger .line.top{ top:4px; }
.burger .line.bottom{ bottom:4px; }

/* When menu is open, animate lines into an X */
.site-header.menu-open .burger .line.top{ transform: translateY(2.5px) rotate(45deg); }
.site-header.menu-open .burger .line.bottom{ transform: translateY(-6px) rotate(-45deg); }
.site-header.menu-open .nav-link {text-align: right ;}


/* Mobile nav: simple dropdown under header */
@media (max-width: 575.98px){
  /* hide the nav by default on small screens */
  .site-nav, .site-header .site-nav, .site-header nav { display: none; }

  /* when menu-open is set on header, show a simple full-width dropdown below header */
  .site-header.menu-open .site-nav,
  .site-header.menu-open nav{
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--overlay-composite);
    padding: .5rem 0;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    z-index: 1060;
  }

  .site-nav .nav{ display:flex; flex-direction:column; padding: .25rem 0; margin:0; }
  .site-nav .nav-link{ padding:.75rem 1rem; color: rgba(255,255,255,0.95); }
  .site-nav .nav-link + .nav-link{ border-top: 1px solid rgba(255,255,255,0.03); }
}

/* ensure anchor jumps account for header height */
html { scroll-padding-top: var(--header-height); scroll-behavior: smooth; }

/* When header is fixed we add padding to the document body via JS so
  content doesn't sit under the header (keeps layout stable). */
.site-header .nav-link{
  color: rgba(255,255,255,0.9);
  transition: color .15s ease;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus{
  color: var(--accent) !important;
  outline: none;
}
.site-header .nav-link.active{
  color: var(--accent) !important;
}
.site-header .navbar-brand,
.site-header .navbar-brand a{
  color: #fff;
  transition: color .15s ease;
}
.site-header .navbar-brand:hover,
.site-header .navbar-brand:focus{
  color: var(--accent) !important;
  text-decoration: none;
}
/* Logo (text + small SVG wave) */
.logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-decoration: none;
    position: relative;
}
.logo-text{ font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; font-weight:700; font-size:30px; color:#fff; letter-spacing:0.2px; text-shadow:0 1px 0 rgba(0,0,0,0.25); line-height:1; }
.logo-sub {
    font-size: 20px;
    opacity: .92;
    margin-left: 6px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    vertical-align: baseline;
    margin-top: 35px;
    position: absolute;
    right: -87px;
    bottom: 16px;
}
.logo-wave {
    width: 135px;
    height: 18px;
    display: block;
    overflow: visible;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.85);
}
.logo-wave svg{ width:100%; height:100%; display:block; transform-origin:center; animation:logo-wave 4s ease-in-out infinite; }
@keyframes logo-wave{ 0%{ transform: translateX(0) scaleY(1); } 50%{ transform: translateX(-4%) scaleY(1.08); } 100%{ transform: translateX(0) scaleY(1); } }

@media (max-width: 576px){
  /* .logo-text{ font-size:16px; }
  .logo-wave{ width:86px; height:14px; } */
}
.hero{
  height:420px;
  background: transparent;
  position: relative;
}
.hero-inner{ text-shadow: 0px 0px 14px rgba(0,0,0,111.6); }
.hero-inner h1 {
  color:#ffffff;
}
/* Hero media (full-bleed image) */
.hero-media{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-inner{ position: relative; z-index: 2; }
.hero-mask{ position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 80px; z-index: 3; display: block; }

/* Apply the computed overlay-composite color to any SVG used in the hero */
.hero-mask svg,
.hero-mask svg path,
.hero .hero-svg,
.hero-img svg {
  fill: var(--overlay-composite);
  stroke: var(--overlay-composite);
  color: var(--overlay-composite);
  transition: fill .22s ease, stroke .22s ease, color .22s ease;
}

@media (max-width: 992px){
  .hero{ height: 260px; }
  .hero-mask{ height: 60px; }
}

.video-card{ cursor: pointer; max-width:100%; }
.play-overlay{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border: none;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* responsive tweaks */
@media (max-width: 992px){
  .hero{ height:220px; }
  .play-overlay svg{ width:56px; height:56px; }
}

/* simple card look */
main{ background: linear-gradient(180deg, var(--overlay), transparent) }

/* Newsletter section */
.newsletter{
  background: linear-gradient(180deg, var(--overlay), transparent)
}
.newsletter .form-control{ background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); color: #fff; }
.newsletter .form-control::placeholder{ color: rgba(255,255,255,0.45); }
.newsletter .btn-primary{ background: var(--accent); border-color: rgba(0,0,0,0.2); color: #0b0b0b; }
.newsletter .text-muted{ color: rgba(255,255,255,0.6) !important; }

/* Footer */
.site-footer{
  background-color: var(--overlay-composite); /* same as header */
  color: #ffffff;
}
.site-footer .list-inline-item{ margin-right: 0.75rem; }
.site-footer a{ color: #ffffff; opacity: 0.9; text-decoration: none; }
.site-footer a:hover{ color: var(--accent); text-decoration: none; opacity: 1; }
.site-footer .footer-right .fa{ width: 1.6rem; text-align: center; color: #ffffff; }

@media (max-width: 767px){
  .site-footer { text-align: center; }
  .site-footer .footer-right { margin-top: .5rem; }
}

/* Contact section */
.contact-section{
  background: linear-gradient(180deg, var(--overlay), transparent)
}
.contact-section .form-control{ background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); color: #fff; }
.contact-section .form-control::placeholder{ color: rgba(255,255,255,0.45); }
.contact-section textarea.form-control{ min-height: 140px; resize: vertical; }
.contact-section .btn-primary{ background: var(--accent); border-color: rgba(0,0,0,0.2); color: #0b0b0b; }
.contact-section .text-muted{ color: rgba(255,255,255,0.6) !important; }

.contact-section .small.text-success{ color: #8fd19e !important; }
.contact-section .small.text-danger{ color: #ff6b6b !important; }

/* Two-column contact tweaks */
.contact-left{ gap: 1rem; }
.contact-vertical-text{
  /* kept for backward compatibility if reused, but hidden by default */
  display:none;
}
.contact-form-wrap{ min-width: 0; }
.contact-graphic{
  /* image-only container: no padding/border, fill available height */
  background: transparent;
  border: 0;
  padding: 0;
  min-height: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.contact-graphic .contact-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
}
.contact-graphic-fallback{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: rgba(255,255,255,0.6);
}

@media (max-width: 991px){
  /* on small screens keep the graphic area compact */
  .contact-vertical-text{ display:none !important; }
  .contact-graphic{ min-height: 160px; }
  .contact-graphic .contact-img{ max-height: none; }
  .contact-graphic-fallback{ display:flex; }
}

  /* Text link hover: yellow color + animated underline (left-to-right) */
  /* Link text wrapper: keep anchor padding but underline the inner text only */
  a:not(.btn) {
    color: inherit;
    text-decoration: none;
    transition: color .18s ease;
  }

  a:not(.btn):hover,
  a:not(.btn):focus {
    color: var(--accent);
    outline: none;
  }

  /* the inner span holds the underline; this avoids anchor padding affecting the line length */
  a:not(.btn) .link-text{ display: inline-block; position: relative; }

  a:not(.btn) .link-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px; /* fixed distance from text */
    height: 2px;
    width: 0%;
    background: var(--accent);
    transition: width .34s cubic-bezier(.2,.8,.2,1);
  }

  a:not(.btn):hover .link-text::after,
  a:not(.btn):focus .link-text::after {
    width: 100%;
  }

  /* opt-out helper */
  a:not(.btn).no-underline .link-text::after{ display:none; }