/* ============================================================
   Utah City — Main Stylesheet
   ============================================================ */

/* ── Local Fonts ────────────────────────────────────────── */
@font-face {
  font-family: "SeasonSerif";
  src: url("../fonts/SeasonSerif-Light-TRIAL.woff2") format("woff2"),
       url("../fonts/SeasonSerif-Light-TRIAL.woff")  format("woff"),
       url("../fonts/SeasonSerif-Light-TRIAL.ttf")   format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SeasonSerif";
  src: url("../fonts/SeasonSerif-Regular-TRIAL.woff2") format("woff2"),
       url("../fonts/SeasonSerif-Regular-TRIAL.woff")  format("woff"),
       url("../fonts/SeasonSerif-Regular-TRIAL.ttf")   format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SeasonSerif";
  src: url("../fonts/SeasonSerif-Medium-TRIAL.woff2") format("woff2"),
       url("../fonts/SeasonSerif-Medium-TRIAL.woff")  format("woff"),
       url("../fonts/SeasonSerif-Medium-TRIAL.ttf")   format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SeasonSerif";
  src: url("../fonts/SeasonSerif-SemiBold-TRIAL.woff2") format("woff2"),
       url("../fonts/SeasonSerif-SemiBold-TRIAL.woff")  format("woff"),
       url("../fonts/SeasonSerif-SemiBold-TRIAL.ttf")   format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --PrimaryColor:  #004134;
  --PrimaryDark:   #012333;
  --secondary:      #EDE9E3;
  --background:     #F7F5F2;
  --surface:        #FFFFFF;
  --text-primary:   #1A1A1A;
  --text-muted:     #6B6B6B;
  --border:         #E2E2E2;
  --accent:         #C2A878;
  --dark-section:   #0B2E2F;
  --radius-lg:      0.75rem;
  --radius-sm:      0.5rem;
  --shadow-soft:    0 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
  --shadow-hover:   0 1rem 3rem rgba(0, 0, 0, 0.13);
  --max-width:      75rem;
  --section-pad:    6rem 0;
  --transition:     all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset / Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--background);
  color: var(--text-primary);
  font-family: "SeasonSerif", serif;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; }

ul { list-style: none; padding: 0; margin: 0; }

h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem; line-height: 1.25; }

h2 { font-size: 2.25rem; font-weight: 500; }
h3 { font-size: 1.6rem;  font-weight: 400; }

.container { max-width: var(--max-width); }

/* ── Shared section helpers ─────────────────────────────── */
.same-section  { padding: var(--section-pad); }

.same-heading  { margin-bottom: 3.5rem; }
.same-heading h2 {
    font-size: 2rem;
    line-height: 1.45;
    font-weight: 400;
    color: #2b2b2b;
  margin-bottom: 0.75rem;
}
.same-heading p {
  font-size: 1.1rem;
  color: #574848;
}
.max-wid-80 { max-width: 80%; }
.max-wid-50 { max-width: 50%; }

.btn{   
   padding: 0.6rem 1.2rem;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 4px;
    letter-spacing: 1px;
    transition: var(--transition);
  }

.btn:hover{transform: translateY(-0.125rem);}

.btn-primary{
    background: var(--PrimaryDark); border: solid 1px var(--PrimaryDark);
    color: #fff;
    transition: var(--transition);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{  background: #fff; color: var(--PrimaryDark);border: solid 1px var(--PrimaryDark);}


.btn-outline-primary{
    background:#fff; 
    border: solid 1px var(--PrimaryDark);
    color:  var(--PrimaryDark);
    transition: var(--transition);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active{  background: var(--PrimaryDark); color: #fff;  border: solid 1px var(--PrimaryDark);}



/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: relative;
  background: transparent;
  transition: var(--transition); z-index: 9999;
}
.home-fixed-header{
   position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
 
}




/* Top announcement bar */
.site-header .top-bar {
  background-color: var(--PrimaryDark);
  color: #fff;
  font-size: 0.78rem;
  padding: 0.55rem 0;
  letter-spacing: 0.05em;
}
.site-header .top-bar a {
  color: #fff;
  text-decoration: underline;
  margin-left: 0.4rem;
  font-weight: 600;
}

/* Main nav bar */
.site-header .header-main {
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
  padding: 1rem 0;
  transition: var(--transition);
}

/* Logo */
.site-header .header-logo {
  height: 2rem;
  width: auto;
}

/* Nav links */
.site-header .nav-link-custom {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.9;
  transition: var(--transition);
  white-space: nowrap;
}
.site-header .nav-link-custom:hover { opacity: 1; color: var(--accent); }

/* CTA button */
.site-header .join-btn {
  padding: 0.55rem 1.5rem;
  background-color: var(--PrimaryDark);
  color: #fff;
  border-radius: 2rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap; text-align: center;
}
.site-header .join-btn:hover {
  background-color: #143e4b;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Hamburger button */
.hamburger-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
}
.hamburger-btn svg { width: 1.5rem; height: 1.5rem; }

/* Mobile Sidebar */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background: var(--PrimaryDark);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 2rem 1.75rem;
}
.mobile-sidebar.active {
  transform: translateX(0);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.sidebar-logo { height: 1.75rem; width: auto; }

.sidebar-close {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
}
.sidebar-close svg { width: 1.5rem; height: 1.5rem; }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}
.sidebar-link {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color 0.2s;
}
.sidebar-link:hover { color: var(--accent); }

.sidebar-footer {
  margin-top: 2rem;
}
.sidebar-footer .join-btn {
  background-color: var(--accent);
  color: #fff;
  border-radius: 2rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  display: block;
  text-align: center;
}
.sidebar-footer .join-btn:hover { opacity: 0.9; }

/* Sticky state */
.site-header.fixed-header { background: var(--PrimaryColor);   position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%; }
.site-header.fixed-header .header-main { background: var(--PrimaryColor); }

@keyframes headerfixdown {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
.site-header.fixed-header { animation: headerfixdown 0.5s; }
.section-bottom-btn{display: flex; gap: 1rem; align-items: center; flex-wrap:wrap; margin-top: 2rem;}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  padding: 9rem 0 4rem;
}
.hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero .hero-overlay {
  position: absolute;
  inset: 0;
  background:rgb(0 0 0 / 20%);
  z-index: -1;
}
.hero .hero-tag {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 2rem;
  opacity: 0.85;
}
.hero .hero-title {
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.hero .hero-lead {
  font-size: 1.6rem;
  max-width: 34rem;
  margin: 3rem auto 6rem;

}

/* Hero buttons */
.hero .btn-hero-outline,
.hero .btn-hero-solid {
  padding: 0.85rem 2.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 4px;
  letter-spacing: 1px;
  text-decoration: none;
  display: inline-block;
  transition: var(--transition);
}
.hero .btn-hero-outline {
  border: 1px solid rgba(255,255,255,0.85);
  color: #fff;
  background: transparent;
}
.hero .btn-hero-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
}
.hero .btn-hero-solid {
  background: #fff;
  color: var(--PrimaryDark);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.hero .btn-hero-solid:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(0,0,0,0.35);
}


/* ============================================================
   INTRO / INFO SECTION
   ============================================================ */
.info-section { background-color: #F9F5F0; }

.info-section .top-text {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 1.25rem;
  color: #222;
}
.info-section .main-text {
  font-size: 2rem;
  line-height: 1.45;
  font-weight: 400;
  color: #2b2b2b;
  max-width: 60rem;
  margin-bottom: 1.75rem;
}
.info-section .sub-text {
  font-size: 1.3rem;
  color: #2F2F2F;
  margin-bottom: 0;

}


/* ============================================================
   IMAGE SLIDER (Owl Carousel)
   ============================================================ */
.image-slider { background-color: #F9F5F0; padding-top: 0; }
.image-slider .container-fluid { padding: 0; }
.image-slider .item img {
  width: 100%;
  height: 22rem;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.image-slider .owl-item { transition: all 0.4s ease; }
.image-slider .owl-carousel .owl-stage-outer { padding: 1rem 0; }


/* ============================================================
   PRINCIPLES
   ============================================================ */
.principles-section { background-color: var(--background); }

.principles-section .card-box {
  background: var(--surface);
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  height: 100%;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}
.principles-section .card-box:hover {
  transform: translateY(-0.35rem);
  box-shadow: var(--shadow-hover);
}
.principles-section .card-box .img-bx {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1.1rem;
}
.principles-section .card-box .img-bx img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.principles-section .card-box h3 {
  font-size: 1.35rem;
  color: #012333;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.principles-section .card-box p {
  font-size: 1rem;
  color: #574848;
  margin: 0;
}


/* ============================================================
   AUDIENCE / DESIGNED FOR EVERYONE
   ============================================================ */
.audience-section { background-color: var(--background); }

.audience-section li {
  font-size: 1.15rem;
  color: #004134;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: var(--transition);
}
.audience-section li:hover { text-decoration: underline; }


/* ============================================================
   SIMPLE ON THE SURFACE
   ============================================================ */
.simple-section { background-color: #F9F5F0; }

.simple-section  .simple-card {
  background: var(--surface);
  padding: 2.5rem 2rem;
  border-radius: var(--radius-lg);
  height: 100%;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
  position: relative;
}
.simple-section  .simple-card:hover {
  transform: translateY(-0.35rem);
  box-shadow: var(--shadow-hover);
}
/* .simple-card--active {
  background: var(--primary);
  color: #fff;
}
.simple-card--active h3 { color: #fff; }
.simple-card--active p  { color: rgba(255,255,255,0.8); }
.simple-card--active .step-number { color: rgba(255,255,255,0.3); }
.simple-card--active svg { color: #fff !important; stroke: #fff !important; } */

/* .step-number {
  font-size: 3.5rem;
  font-weight: 700;
  color: rgba(0,0,0,0.06);
  line-height: 1;
  margin-bottom: 0.5rem;
  font-family: "SeasonSerif", serif;
} */

.simple-section  .simple-card .icon-bx {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1.1rem;
}
.simple-section  .simple-card .arrow-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--PrimaryColor);
  border:solid 1px var(--PrimaryColor);position: absolute; right: -10%; top: 50%; transform: translateY(-50%); z-index: 2;
}

.simple-section  .simple-card h3 {
    font-size: 1.35rem;
    color: #012333;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.simple-section  .simple-card p {
    font-size: 1rem;
    color: #574848;
    margin: 0;
}


/* ============================================================
   LIFESTYLE
   ============================================================ */
.lifestyle-section { background-color: var(--background); }

.lifestyle-section .lifestyle-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  height: 18rem;
}

.lifestyle-section .lifestyle-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.lifestyle-section .lifestyle-card:hover img { transform: scale(1.05); }

.lifestyle-section .lifestyle-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
}

.lifestyle-section .lifestyle-label {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.4;
}


/* ============================================================
   COMMUNITY SUPPORT
   ============================================================ */
.community-section { background-color: #F9F5F0; }
.community-section .same-heading h2{color: var(--PrimaryColor); }

.community-section .community-list li {
  padding: 1.25rem 0;

}
.community-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 0.35rem;
}
.community-section .community-list p {
  font-size: 0.9rem;
  color: #545454;
  margin: 0;
}
.community-section .bellas-bg{margin-top: 4rem;}


/* ============================================================
   CTA SPLIT SECTION
   ============================================================ */


.cta-split{background: linear-gradient(to right, #002C46 50%,#fff 50%);}
.cta-split .row { align-items: stretch; }

/* Dark side */
.cta-split .cta-dark {
  color: #fff;
  padding: 5rem 2rem 5rem 0;
}
.cta-split  .cta-dark h2 {
  color: #fff;
}

.cta-split  .cta-dark .cta-body-text{color: #ffffff78;}
.cta-split  .cta-features{margin-bottom: 2rem;}
.cta-split  .cta-features li {
  padding: 0.5rem 0;
  font-size: 0.95rem;
  color:#fff;
}

.cta-split  .cta-features li svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--accent);
  stroke: var(--accent);
}

.cta-split .btn-cta-dark {
  padding: 0.8rem 2rem;
  border: 1px solid rgba(255,255,255,0.5);
  background: #fff;
  color: #012333;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: var(--transition);
}
.cta-split .btn-cta-dark svg { width: 1rem; height: 1rem; }
.cta-split .btn-cta-dark:hover {
  background: rgba(255, 255, 255, 0.082);
  border-color: #fff;
  color: #fff;
}

.cta-split .cta-light{padding: 5rem 0 5rem 2rem;}
.cta-split .cta-eyebrow {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.cta-split .cta-resident-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.cta-split .btn-resident {
  padding: 0.7rem 1.5rem;
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #d0ccc6;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: var(--transition);
}
.cta-split .btn-resident:hover {
  background: var(--PrimaryColor);
  color: #fff;
  border-color: var(--PrimaryColor);
}




/* Shared */
/* 
.cta-dark .cta-eyebrow { color: var(--accent); }
.cta-light .cta-eyebrow { color: #999; letter-spacing: 0.18em; }

.cta-body-text {
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.85;
  margin-bottom: 1.5rem;
}
.cta-dark  .cta-body-text { color: rgba(255,255,255,0.75); }
.cta-light .cta-body-text { color: #444; }


.cta-features {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
} 
.cta-features li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
}
.cta-features li svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--accent);
  stroke: var(--accent);
}
*/
/* CTA buttons */


/* Resident buttons */



/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #004134;
  color: rgba(255,255,255,0.7);
}
.site-footer .footer-top{padding: 5rem 0 3rem;}

.site-footer .footer-logo { width: auto; margin-bottom: 1rem; }
.site-footer .footer-logo-link { display: inline-block; }

.site-footer  .footer-desc {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  max-width: 20rem;
}

.site-footer  .footer-heading {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: #fff;
  margin-bottom: 1.25rem;
}

.site-footer  .footer-links li { margin-bottom: 0.65rem; }
.site-footer  .footer-links a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--transition);
}
.site-footer  .footer-links a:hover { color: rgba(255,255,255,0.9); }


/* Footer bottom bar */
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding: 1.5rem 0;
}
.site-footer  .footer-copy {
  font-size: 0.82rem;
  color: #fff;margin-bottom: 0;
}
.site-footer  .footer-legal {
  display: flex;
  gap: 1.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.site-footer  .footer-legal a {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: var(--transition);
  position: relative;
}
.site-footer  .footer-legal a:after{position: absolute;  right: -13px; top: 0; width: 1px;     height: 100%; background: rgb(255 255 255 / 71%); content:'';}
.site-footer  .footer-legal a:hover { color: rgba(255,255,255,0.75); }
.site-footer  .footer-legal a:last-child:after{display: none;}




.privacy-notice-popup {
    position: fixed;
    bottom: 1.25rem; /* 20px */
    right: 1.25rem;
    width: 17.5rem; /* 280px */
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0.46875rem; /* 7.5px */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.07);
    padding: 0.78125rem 0.78125rem 0.625rem; /* 12.5px 12.5px 10px */
    z-index: 9999;
    opacity: 0;
    transform: translateY(1.875rem); /* 30px */
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.privacy-notice-popup.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.privacy-notice-popup.hide {
    opacity: 0;
    transform: translateY(1.875rem);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.privacy-notice-body {
    margin-bottom: 0.625rem; /* 10px */
}

.privacy-notice-text {
    font-size: 0.875rem; /* 14px */
    line-height: 1.5;
    color: #444444;
    margin-bottom: 0.25rem; /* 4px */
}

.privacy-notice-actions {
    display: flex;
    flex-direction: column;
    gap: 0.375rem; /* 6px */
}

.legal-highlight {
    background: #0041340f;
    padding: 0.625rem; /* 10px */
    border-left: 4px solid var(--PrimaryColor);
    margin: 0.625rem 0 0.9375rem; /* 10px 0 15px */
}

.static-pages-outer .same-heading h3 {
    margin-bottom: 0.4375rem;     font-size: 1.4rem;     color: #2b2b2b;   font-weight: 600;    line-height: 1.4; color: ;
}

.static-pages-outer .dot-listing {
    margin: 0.625rem 0 0.625rem 1.25rem; /* 10px 0 10px 20px */
}

.static-pages-outer .dot-listing li {
    padding: 5px 0;
    list-style: disc;
    font-weight: 400;
    font-size: 1rem;
    color: #3B3B3B;
    line-height: 1.6;
}

.sub-header {
    padding: 0.9375rem 0; /* 15px */
    background: #392e25;
}

.sub-header .sub-header-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.75rem; /* 60px */
    flex-wrap: wrap;
}

.sub-header .sub-header-menu li a {
    font-size: 0.9375rem; /* 15px */
    color: #fff;
    font-weight: 400;
    position: relative;
    transition: all 0.2s ease;
    padding: 0 0.5rem; /* 8px */
}

.sub-header .sub-header-menu li a:before {
    background: transparent;
    height: 0.125rem; /* 2px */
    width: 100%;
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.625rem; /* 10px */
    transition: all 0.2s ease;
}

.sub-header .sub-header-menu li a:hover {
    color: var(--PrimaryColor);
}

.sub-header .sub-header-menu li a:hover:before {
    background: var(--PrimaryColor);
}


.inner-banner {
    background-color: #012333;
    padding: 5rem 0;
}
.inner-banner h1{    font-size: 3.2rem;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase; color: #fff;
    margin-bottom: 0;}

/* Mobile */
@media (max-width: 480px) {
    .privacy-notice-popup {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        border-radius: 0.46875rem 0.46875rem 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }
}


/* ============================================================
   Founding Member Apply Modal
   ============================================================ */

.apply-modal-content {
  border: none;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}

.apply-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--PrimaryDark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.apply-modal-close:hover {   background: var(--PrimaryDark); }

/* Left dark panel */
.apply-modal-left {
  background: var(--PrimaryDark, #012333);
  padding: 2.5rem 2rem;
  flex-direction: column;
  justify-content: center;
}
.apply-modal-left-inner { color: #fff; }
.apply-modal-tag {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.75rem;
  font-weight: 600;
}
.apply-modal-title {
  font-family: "SeasonSerif", serif;
  font-size: 1.6rem;
  line-height: 1.25;
  color: #fff;
  margin-bottom: 1rem;
}
.apply-modal-desc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.apply-modal-perks {
  list-style: none;
  padding: 0;
  margin: 0;
}
.apply-modal-perks li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: 0.6rem;
}
.apply-modal-perks li svg {
  width: 15px;
  height: 15px;
  color: #a8d5c2;
  flex-shrink: 0;
}

/* Right form panel */
.apply-modal-right {
  background: var(--background, #F7F5F2);
  padding: 2.5rem 2rem;
}

.apply-form-heading {
  font-family: "SeasonSerif", serif;
  font-size: 1.5rem;
  color: var(--PrimaryDark, #012333);
  margin-bottom: 0.3rem;
}
.apply-form-sub {
  font-size: 0.82rem;
  color: var(--text-muted, #6B6B6B);
  margin-bottom: 1.5rem;
}
.apply-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--PrimaryDark, #012333);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}
.apply-input {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid #d0cbc4;
  border-radius: 0;
  background: #fff;
  font-size: 0.875rem;
  color: var(--text-primary, #1A1A1A);
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}
.apply-input:focus { border-color: var(--PrimaryDark, #012333); }
.apply-input::placeholder { color: #bbb; }
.apply-select { appearance: none; cursor: pointer; }
.apply-textarea { resize: vertical; min-height: 80px; }

.apply-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
  padding: 0.85rem 1.5rem;
  background: var(--PrimaryDark, #012333);
  color: #fff;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.apply-submit-btn:hover { background: var(--PrimaryColor, #004134); }
.apply-submit-btn svg { width: 16px; height: 16px; }

/* Success state */
.apply-success {
  text-align: center;
  padding: 3rem 1rem;
}
.apply-success-icon svg {
  width: 52px;
  height: 52px;
  color: var(--PrimaryColor, #004134);
  margin-bottom: 1rem;
}
.apply-success h4 {
  font-family: "SeasonSerif", serif;
  font-size: 1.4rem;
  color: var(--PrimaryDark, #012333);
  margin-bottom: 0.5rem;
}
.apply-success p {
  font-size: 0.875rem;
  color: var(--text-muted, #6B6B6B);
}

/* Fix: Modal z-index override (header=9999, sidebar=10001) */
.modal { z-index: 10100 !important; }
.modal-backdrop { z-index: 10099 !important; }

.apply-modal-content {
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.modal-dialog.modal-lg {
  max-width: 860px;
}