/*
Theme Name: Precinct Academy
Author: Precinct Academy
Version: 2.0
Description: Custom theme for Precinct Academy & Daycare
*/

@charset "utf-8";
/* =========================================================
   Precinct Academy — UPDATED CSS (Dark + Colorful Brand Glow)
   Mobile-first, premium daycare feel, logo-based colors
   Drop-in replacement (same class names)
   + Hero centered (no right image) + Trust strip centered
   + Fix staff text colors on light cards (dark mode page)
   + Header: premium all-caps nav + gold CTA
   + Hero: NO VIDEO, premium image + navy overlay for legibility
   ========================================================= */

/* ========== Base ========== */
:root{
  /* Brand colors (from logo) */
  --brand-orange: #F05834;
  --brand-purple: #645DA6;
  --brand-teal:   #52BFCE;
  --brand-green:  #5EB549;
  --brand-yellow: #F9B51F;
  --brand-peri:   #9EACD0;

  /* Dark premium base */
  --bg: #070A12;
  --card: rgba(255,255,255,.92);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.12);
  --soft: rgba(255,255,255,.06);

  --white: #ffffff;
  --ink: #0b1220;

  /* Primary CTA (use logo orange) */
  --primary: var(--brand-orange);
  --primary-2: #E84D2B;

  --radius: 18px;
  --shadow: 0 18px 50px rgba(0,0,0,.35);

  /* Slightly wider feels more premium on desktop */
  --container: 1200px;

  /* Focus ring */
  --focus: 0 0 0 4px rgba(82,191,206,.35);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

html{
  scroll-behavior: smooth;
}

/* Global offset for ALL anchor targets */
:root{
  --scroll-offset: 96px; /* match your header height */
}

/* Applies to ANY anchor target */
[id]{
  scroll-margin-top: var(--scroll-offset);
}

body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 12% 8%, rgba(82,191,206,.25), transparent 60%),
    radial-gradient(820px 500px at 86% 12%, rgba(100,93,166,.22), transparent 60%),
    radial-gradient(680px 420px at 70% 80%, rgba(240,88,52,.20), transparent 58%),
    radial-gradient(520px 360px at 20% 85%, rgba(249,181,31,.16), transparent 55%),
    linear-gradient(180deg, #05070D 0%, #070A12 40%, #05070D 100%);
  line-height: 1.55;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }

.container{
  width: min(100% - 32px, var(--container));
  margin: 0 auto;
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 10px;
  background: var(--white);
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 12px;
  z-index: 9999;
}
.skip-link:focus{ left: 10px; }

:focus-visible{
  outline: none;
  box-shadow: var(--focus);
  border-radius: 10px;
}



/* ========== Buttons ========== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
  border: 1px solid transparent;
  gap: 8px;
  transition: transform .12s ease, opacity .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-2) 100%);
  color: white;
  box-shadow: 0 12px 30px rgba(240,88,52,.28);
}
.btn-primary:hover{ opacity: .96; }

.btn-ghost{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: var(--text);
}
.btn-ghost:hover{ background: rgba(255,255,255,.12); }

/* NEW: Gold CTA (Schedule a Tour) */
.btn-gold{
  background: linear-gradient(180deg, rgba(249,181,31,1) 0%, rgba(240,160,20,1) 100%);
  color: #0B1220;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 30px rgba(249,181,31,.22);
}
.btn-gold:hover{ opacity: .96; }

/* NEW: Outline button (Hero secondary) */
.btn-outline{
  background: transparent;
  border-color: rgba(255,255,255,.28);
  color: rgba(255,255,255,.92);
}
.btn-outline:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.38);
}

.w-full{ width: 100%; }

/* ========== Header (FIXED • premium glass • always-on) ========== */
:root{
  --header-h: 84px;   /* adjust if your header is taller/shorter */
}

/* Make room so content doesn't slide under the fixed header */
body{
  padding-top: var(--header-h);
}

.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;

  background: transparent; /* glass lives on ::before */
  border-bottom: 1px solid rgba(255,255,255,.10);

  isolation: isolate;
}

/* Glass layer (stable across browsers) */
.site-header::before{
  content:"";
  position: absolute;
  inset: 0;
  background: rgba(7,10,18,.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: -1;
}

/* Keep your existing inner layout */
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  min-height: var(--header-h); /* keeps header height consistent */
}

.brand{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-width: 220px;
}

/* Logo icon container */
.brand-mark{
  width: auto;
  height: 80px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
}
.brand-mark img{
  height: 70px;
  width: 100%;
}

/* "Precinct" — script, warm */
.brand-name{
  font-family: 'Pacifico', 'Segoe Script', cursive;
  font-size: 22px;
  font-weight: 300;
  color: #F6C453;
  letter-spacing: .45px;
  line-height: 1;
  text-shadow:
    0 1px 8px rgba(246,196,83,.35),
    0 1px 2px rgba(0,0,0,.55);
}

/* "Academy & Daycare" — clean, professional, cool */
.brand-tag{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(158,172,208,.90);
  margin-top: 2px;
}

/* Base: desktop layout */
.nav-desktop{
  display: flex;
  gap: 18px;
}

.nav-link{
  color: rgba(255,255,255,.78);
  font-weight: 800;
  position: relative;
  padding: 8px 2px;

  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-family: Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.nav-link:hover{ color: rgba(255,255,255,.95); }
.nav-link::after{
  content:"";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-yellow));
  transition: width .12s ease;
}
.nav-link:hover::after{ width: 100%; }

/* Animate hamburger -> X when nav is open */
.nav-toggle{ position: relative; }

.icon-bars{
  transition: background .15s ease;
}

.nav-desktop.open ~ .header-actions .icon-bars{
  background: transparent;
}

.nav-desktop.open ~ .header-actions .icon-bars::before{
  transform: translateY(6px) rotate(45deg);
}

.nav-desktop.open ~ .header-actions .icon-bars::after{
  transform: translateY(-6px) rotate(-45deg);
}

.icon-bars::before,
.icon-bars::after{
  transition: transform .18s ease;
}


.header-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 420px){
  .header-actions .btn-primary{ display:none; }
}

@media (max-width: 979px){
  .header-actions .btn-ghost,
  .header-actions .btn-primary{
    display: none;
  }
}

.nav-cta{
  display: none;
}

@media (max-width: 979px){
  .nav-cta{
    display: grid;
    gap: 10px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.10);
  }
}

.nav-toggle{
  position: relative;
  z-index: 1300;
}


/* Desktop breakpoint */
@media (min-width: 980px){
  .nav-desktop{
    position: static;
    flex-direction: row;
    background: none;
    padding: 0;
  }
}

/* Mobile layout */
@media (max-width: 979px){
  .nav-desktop{
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 1199;

    flex-direction: column;
    gap: 10px;

    padding: 16px;
    background: rgba(7,10,18,.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-top: 1px solid rgba(255,255,255,.10);

    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;

    transition: opacity .18s ease, transform .18s ease;
  }

  .nav-desktop.open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
	  
  }
.nav-desktop.open li {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  display: contents;
  text-align: justify;
}
  .nav-link{
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    text-align: center;
  }
}


/* ===== Desktop Nav Reset ===== */
.nav-desktop ul, .footer-links li,
.nav-desktop .menu{
  list-style: none!important;;
  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  gap: 18px;
}

/* Remove list-item behavior */
.nav-desktop li{
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* Links */
.nav-desktop a{
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  text-decoration: none;
}

/* Dot separators (not list bullets) */
.nav-desktop li + li::before{
  content: "";
  margin: 0 12px 0 0;
  color: rgba(255,255,255,.45);
  font-weight: 400;
}

/* Optional: if your first section already has top padding, avoid double spacing */
#hero.section,
.hero{
  scroll-margin-top: var(--header-h);
}



.icon-btn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.icon-btn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}
.icon-btn:active{ transform: translateY(1px); }

.icon-bars{
  width: 18px;
  height: 12px;
  position: relative;
}
.icon-bars::before,
.icon-bars::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,.92);
  border-radius: 99px;
}
.icon-bars::before{ top: 0; }
.icon-bars::after{ bottom: 0; }

.icon-x{
  width: 16px;
  height: 16px;
  position: relative;
}
.icon-x::before,
.icon-x::after{
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.92);
  border-radius: 99px;
  transform-origin: center;
}
.icon-x::before{ transform: translate(-50%,-50%) rotate(45deg); }
.icon-x::after{ transform: translate(-50%,-50%) rotate(-45deg); }

/* ========== Mobile Drawer ========== */
.nav-drawer{
  position: fixed;
  inset: 0;
  z-index: 1100;
}
.nav-drawer__panel{
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(92vw, 380px);
  background: rgba(10,14,24,.96);
  border-left: 1px solid rgba(255,255,255,.12);
  box-shadow: -18px 0 60px rgba(0,0,0,.45);
  padding: 16px;
  transform: translateX(0);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nav-drawer__backdrop{
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0,0,0,.45);
  cursor: pointer;
}

.nav-drawer__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-drawer__title{
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}
.nav-mobile{
  display: grid;
  gap: 8px;
  padding-top: 8px;
}
.nav-item{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 800;
  color: rgba(255,255,255,.92);
}
.nav-item:hover{ background: rgba(255,255,255,.10); }
.nav-drawer__cta{ margin-top: auto; display: grid; gap: 10px; }

.phone-btn:hover::after{
  content: "Call us";
  margin-left: 8px;
  opacity: .75;
  font-size: .85em;
}

/* ========== Hero (NO VIDEO) ========== */
.hero{
  position: relative;
  padding: 42px 0 28px;
  overflow: hidden;

  /* Background image only (overlay handled by .hero-overlay) */
  background:
    url("https://images.unsplash.com/photo-1607453998774-d533f65dac99?auto=format&fit=crop&w=2400&q=80")
      center 35% / cover no-repeat;
}

/* Mobile fine-tuning */
@media (max-width: 600px){
  .hero{
    background-position: center 18%;
  }
}

/* Premium readability overlay (dark navy -> transparent) */
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(7,22,39,.88) 0%,
      rgba(7,22,39,.55) 45%,
      rgba(7,22,39,.92) 100%
    ),
    radial-gradient(900px 520px at 18% 20%, rgba(82,191,206,.18), transparent 60%),
    radial-gradient(760px 520px at 88% 18%, rgba(100,93,166,.18), transparent 60%);
  pointer-events: none;
}

/* Keep video disabled if it exists in markup */
.hero-bg-video{ display: none !important; }

/* Ensure hero content stays above background */
.hero-inner{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.hero-inner > div{
  width: 100%;
  max-width: 720px;
}

/* Typography */
.hero-title{
  margin: 0;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.7px;
  color: #ffffff;
  font-family: Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  text-shadow:
    0 8px 30px rgba(0,0,0,.45),
    0 2px 10px rgba(0,0,0,.35);
}

.hero-text{
  margin: 10px auto 0;
  color: rgba(255,255,255,.80);
  font-size: 15px;
  max-width: 62ch;
  line-height: 1.8; /* airier */
}

/* CTAs */
.hero-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  justify-content: center;
}

/* Kicker */
.hero-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
}

/* Desktop spacing */
@media (min-width: 900px){
  .hero{
    padding: 64px 0 34px;
  }
}

.typewrap{
  display: inline-block;
  position: relative;
  vertical-align: bottom;
}

/* The typed text container */
.type-target{
  display: inline-block;
  white-space: nowrap;
	color: var(--accent, #52BFCE);
  font-weight: 800;
}

/* caret */
.typewrap::after{
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.95em;
  margin-left: 8px;
  transform: translateY(0.1em);
  background: rgba(255,255,255,.92);
  animation: caretBlink .9s steps(1) infinite;
}

/* stop blinking after done (we'll toggle a class) */
.typewrap.done::after{
  animation: none;
  opacity: .85;
	text-shadow:
    0 0 18px rgba(82,191,206,.25),
    0 0 36px rgba(82,191,206,.12);
}

@keyframes caretBlink{
  50% { opacity: 0; }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .typewrap::after{ animation: none; }
}


/* Chips */

.chip--txr {
  border-color: rgba(249,181,31,.6);
}

.chip--txr .chip-stars {
  color: #F9B51F;
  letter-spacing: 1px;
  margin-right: 4px;
}

.trust-chips{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.chip{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,.90);
}

/* Prefer gold bordered trust pills for hero (per spec) */
.chip--gold{
  border-color: rgba(249,181,31,.45);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* Keep your palette chips for other places if you use them */
.trust-chips .chip:nth-child(1){
  border-color: rgba(82,191,206,.35);
  background: linear-gradient(135deg, rgba(82,191,206,.18), rgba(255,255,255,.06));
}
.trust-chips .chip:nth-child(2){
  border-color: rgba(100,93,166,.35);
  background: linear-gradient(135deg, rgba(100,93,166,.18), rgba(255,255,255,.06));
}
.trust-chips .chip:nth-child(3){
  border-color: rgba(240,88,52,.35);
  background: linear-gradient(135deg, rgba(240,88,52,.18), rgba(255,255,255,.06));
}
.trust-chips .chip:nth-child(4){
  border-color: rgba(249,181,31,.35);
  background: linear-gradient(135deg, rgba(249,181,31,.16), rgba(255,255,255,.06));
}

/* Remove right-side hero image to reduce clutter */
.hero-media{ display: none; }
.hero-photo{ display: none; }
.hero-badge{ display: none; }

.hero-band{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 44px;
  background: linear-gradient(180deg, transparent, rgba(7,10,18,.90));
  pointer-events: none;
  z-index: 3;
}

/* ========== About (Executive Slanted Frame) ========== */
.about{
  padding: 48px 0;
  /* Deep navy section backdrop */
  background: radial-gradient(900px 420px at 20% 20%, rgba(82,191,206,.08), transparent 60%),
              radial-gradient(900px 420px at 80% 30%, rgba(249,181,31,.08), transparent 65%),
              #081225;
}

.about-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center; /* keeps vertical center alignment */
}

/* Left column */
.about-copy{ max-width: 64ch; }

.about-title{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -0.4px;
  color: rgba(255,255,255,.95);
  font-family: Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Subtitle uses same accent as the frame */
.about-subtitle{
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.25px;
  color: rgb(180, 217, 222); /* MATCH FRAME */
}

.about-body p{
  margin: 0 0 14px;
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.8;
}

/* Button: Ghost + exact frame border color */
.about-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 14px;

  border: 1px solid rgb(180, 217, 222); /* MATCH FRAME */
  background: rgba(180, 217, 222, 0);
  color: rgba(255,255,255,.92);

  font-weight: 800;
  letter-spacing: .6px;
  font-size: 12px;
  text-transform: uppercase;

  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.about-btn:hover{
  background: rgba(180, 217, 222, .10);
  border-color: rgba(180, 217, 222, 1);
  transform: translateY(-1px);
  box-shadow:
    0 14px 40px rgba(0,0,0,.35),
    0 0 0 1px rgba(180, 217, 222, .18);
}

/* Right column: Slanted tablet frame (clean executive) */
.about-media{
  position: relative;
  border-radius: 22px;

  /* Frame color stays light blue */
  background: rgb(180, 217, 222);
  padding: 12px;
  border: 1px solid rgba(255,255,255,.20);

  display: inline-flex;
  flex-direction: column;
  align-self: center;
  justify-self: center;

  overflow: visible;

  /* deliberate tilt: 3–5 degrees */
  transform: rotate(-4deg);
  transform-origin: center;

  /* Multi-layer depth: "resting on dark table" */
  box-shadow:
    0 28px 90px rgba(0,0,0,.55),
    0 10px 26px rgba(0,0,0,.35),
    0 2px 0 rgba(255,255,255,.10) inset;
}


.about-image img {
  /*! display: ; */
  width: 100%;
  /*! display: 90%; */
  /*! position: relative; */
  height: -webkit-fill-available;
  /*! height: -webkit-fill-available; */
}

/* subtle highlight rim for premium “device” feel */
.about-media::before{
  content:"";
  position:absolute;
  inset: 8px;
  border-radius: 18px;
  pointer-events:none;
  box-shadow:
    0 0 0 1px rgba(8,18,37,.10) inset,
    0 0 0 1px rgba(255,255,255,.14);
  opacity: .9;
}

/* remove the tape look (executive finish) */
.about-media::after{
  content:"";
  position:absolute;
  inset: -18px;
  border-radius: 30px;
  pointer-events:none;
  /* a soft ambient glow behind the frame */
  background: radial-gradient(320px 220px at 60% 50%, rgba(180,217,222,.16), transparent 65%);
  filter: blur(2px);
  opacity: .8;
}

/* The actual image area */
.about-image{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;

  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(11,18,32,.18);
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.20)),
    url("https://images.unsplash.com/photo-1588072432836-7fb78a12d9d3?auto=format&fit=crop&w=2400&q=80")
      center/cover no-repeat;

  filter: saturate(1.06) contrast(1.02);

  /* inner depth */
  box-shadow:
    0 18px 50px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.10) inset;
}

/* “Break the frame” playful detail (swap for a drawing/lights later) */
.about-pop{
  position: absolute;
  right: 26px;
  bottom: 22px;
  width: 90px;
  height: 56px;
  border-radius: 14px;

  /* sits above the frame border */
  transform: rotate(5deg) translateZ(0);
  z-index: 5;

  background:
    radial-gradient(circle at 30% 35%, rgba(255,255,255,.55), transparent 45%),
    linear-gradient(135deg, rgba(249,181,31,.65), rgba(82,191,206,.45));

  box-shadow:
    0 18px 34px rgba(0,0,0,.35),
    0 0 0 3px rgb(180, 217, 222); /* looks like it overlaps the frame */
  border: 1px solid rgba(255,255,255,.20);
}

/* Optional tiny “string lights” dots (simple + classy) */
.about-pop::after{
  content:"";
  position:absolute;
  left: 12px;
  top: 18px;
  width: 66px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  box-shadow:
    8px -8px 0 0 rgba(255,255,255,.55),
    22px -2px 0 0 rgba(255,255,255,.55),
    34px -10px 0 0 rgba(255,255,255,.55),
    48px -4px 0 0 rgba(255,255,255,.55);
  opacity: .9;
}

/* Mobile: keep it clean */
@media (max-width: 899px){
  .about-media{ transform: none; }
  .about-pop{ display: none; } /* avoid crowding on small screens */
  .about-image{ aspect-ratio: 16 / 10; }
}

/* Desktop: true 2-column + more whitespace around frame */
@media (min-width: 900px){
  .about{ padding: 78px 0; }
  .about-grid{
    grid-template-columns: 1.05fr .95fr;
    gap: 44px;
  }
  .about-media{
    margin: 10px 0; /* breathing room so it doesn't feel tight */
  }
}

/* ========== Trust strip (Colorful separate row) ========== */
.trust-strip{
  position: relative;
  z-index: 5;
  padding: 26px 0 36px;
  background:
    linear-gradient(180deg, rgba(7,10,18,.95) 0%, rgba(7,10,18,.85) 100%);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.trust-strip-inner{
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Pill base */
.trust-item{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 18px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  scroll-snap-align: center;
}

.trust-icon{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.20);
}

.trust-label{
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
  letter-spacing: .1px;
}

/* Each a different color (logo palette) */
.trust-item:nth-child(1){
  background: linear-gradient(135deg, rgba(82,191,206,.92), rgba(82,191,206,.55));
}
.trust-item:nth-child(2){
  background: linear-gradient(135deg, rgba(94,181,73,.92), rgba(94,181,73,.55));
}
.trust-item:nth-child(3){
  background: linear-gradient(135deg, rgba(100,93,166,.92), rgba(100,93,166,.55));
}
.trust-item:nth-child(4){
  background: linear-gradient(135deg, rgba(240,88,52,.92), rgba(249,181,31,.65));
}

/* Optional: subtle hover lift */
.trust-item{
  transition: transform .15s ease, filter .15s ease;
}
.trust-item:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
}

/* Mobile: nice spacing + no forced horizontal scroll */
@media (max-width: 520px){
  .trust-strip-inner{ gap: 10px; }
  .trust-item{
    width: 100%;
    max-width: 360px;
    justify-content: center;
  }
}

/* Desktop: centered row */
@media (min-width: 900px){
  .trust-strip-inner{
    overflow-x: visible;
    scroll-snap-type: none;
    justify-content: center;
  }
}

/* ========== Sections / Placeholders ========== */
.section{ padding: 34px 0; }
.section-alt{
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.section-head{ display: grid; gap: 8px; }
.section-title{
  margin: 0;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.2px;
  color: rgba(255,255,255,.92);
}
.section-subtitle{
  margin: 0;
  color: rgba(255,255,255,.70);
  max-width: 70ch;
  margin-top: -10px;
  font-size: 16px;
}
.placeholder{
  margin-top: 14px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
}

/* ========== Card System ========== */
.card{
  background: rgb(220, 237, 240);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  padding: 18px;
  color: #0B1220;
  transition: transform .15s ease, box-shadow .15s ease;
}

.card-soft{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(0,0,0,.40);
}
.card-title{
  font-weight: 900;
  margin: 0 0 6px;
  font-size: 18px;
}
.card-text{
  color: rgba(11,18,32,.72);
  font-size: 14px;
  line-height: 1.5;
}
.card-meta{
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-purple);
  margin-bottom: 6px;
}

/* ========== Programs / Age Groups (4-card premium band) ========== */
.programs{
  padding: 54px 0;
  background: transparent;
}
.programs .section-head{ margin-bottom: 18px; }

.program-media {
  position: relative;
  /*! width: 100%; */
  display: inherit;
  /*! height: 180px; */
  /*! width: 100%; */
  overflow: hidden;
}
.program-media img {
  /*! display: flex; */
  /*! border-top-right-radius: 25px; */
  border-top-left-radius: 20px; 
  /*! width: 100%; */
  height: auto;
}

.programs-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}

.program-card{
  position: relative;
  height: 100%;
  min-height: 200px;
  border-radius: 20px;

  padding: 22px 18px 16px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 42px rgba(0,0,0,.45);

  display: flex;
  flex-direction: column;
  gap: 10px;

  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  z-index: 1; /* enables behind-glow layer */
}

/* Dark pastel variations per card + glow variables */
.program-card:nth-child(1){
  background: rgba(40, 90, 95, .55);
  border-color: rgba(178, 215, 220, .18);
  --card-glow: rgba(82,191,206,.55);
}
.program-card:nth-child(2){
  background: rgba(45, 70, 120, .55);
  border-color: rgba(205, 224, 255, .18);
  --card-glow: rgba(120,165,255,.50);
}
.program-card:nth-child(3){
  background: rgba(70, 55, 120, .55);
  border-color: rgba(221, 205, 255, .18);
  --card-glow: rgba(158,172,208,.55);
}
.program-card:nth-child(4){
  background: rgba(120, 75, 40, .55);
  border-color: rgba(255, 229, 205, .18);
  --card-glow: rgba(249,181,31,.50);
}

/* Subtle highlight wash on card surface */
.program-card::before{
  content:"";
  position:absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 20% 0%,
    rgba(255,255,255,.16) 0%,
    rgba(255,255,255,0) 60%);
  pointer-events:none;
  z-index: 2;
}

/* ========== Background-matching glow BEHIND each card ========== */
.program-card::after{
  content:"";
  position:absolute;
  inset: -18px;
  z-index: -1;

  border-radius: 28px;
  filter: blur(28px);
  opacity: .55;

  background: radial-gradient(circle at 30% 30%,
    var(--card-glow),
    rgba(0,0,0,0) 66%);

  transition: opacity .16s ease, filter .16s ease;
}

/* ========== Hanging Number (TOP RIGHT) ========== */
.program-card .hang-num{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 6;

  width: 48px;
  height: 48px;
  border-radius: 50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-family: Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 20px;

  color: #0B1220;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 14px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.8);

  transform-origin: 50% -22px;
  animation: hangSwing 5.5s ease-in-out infinite;
  opacity: .6;
}

.program-card:nth-child(1) .hang-num{
  background: linear-gradient(180deg, rgba(220,245,245,.85), rgba(200,235,235,.65));
}
.program-card:nth-child(2) .hang-num{
  background: linear-gradient(180deg, rgba(225,235,255,.85), rgba(205,220,245,.65));
}
.program-card:nth-child(3) .hang-num{
  background: linear-gradient(180deg, rgba(235,225,255,.85), rgba(215,200,245,.65));
}
.program-card:nth-child(4) .hang-num{
  background: linear-gradient(180deg, rgba(255,235,220,.85), rgba(245,215,195,.65));
}

.program-card .hang-num::before{
  content:"";
  position:absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 46px;
  background: rgba(255,255,255,.55);
  border-radius: 999px;
}

.program-card .hang-num::after{
  content:"";
  position:absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.6);
  background: rgba(0,0,0,.15);
}

.program-card .hang-num i{ font-style: normal; }

@keyframes hangSwing{
  0%   { transform: rotate(4deg); }
  50%  { transform: rotate(-4deg); }
  100% { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce){
  .program-card .hang-num{ animation: none; }
}

.program-label{
  font-family: Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(220,220,255,.85);
}
.program-title{
  margin: 0;
  font-family: Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: #ffffff;
  line-height: 1.15;
}
.program-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.program-spacer{ margin-top: auto; }

/* Hover: lift + slightly stronger matched glow */
.program-card:hover{
  transform: translateY(-5px);
  border-color: rgb(160, 193, 197);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  transform: scale(1.05);
  /*! transition: all; */
}
.program-card:hover::after{
  opacity: .78;
  filter: blur(36px);
}

@media (min-width: 680px){
  .programs-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (min-width: 1020px){
  .programs-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
  .program-card{ min-height: 220px; }
}

/* ========== Staff (Split Horizontal Cards • 40/60) ========== */
#staff.section{ background: transparent; }

/* Section head spacing (prevents sub-header hugging) */
#staff .section-head{
  margin-bottom: 22px;
}
#staff .section-head h2,
#staff .section-head .section-title{
  margin: 0 0 10px;

  line-height: 1.12;
}
#staff .section-head p,
#staff .section-head .section-subtitle{
  margin: 0;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  max-width: 70ch;
  margin-top: -15px;
}

.card.staff-card:nth-of-type(1) {
  background: #edf2fb;
  border: 5px rgb(231, 246, 249) solid;
}

.card.staff-card:nth-of-type(2) {
  background: #edf2fb;
  border: 5px #edf2fb solid;
}


.card.staff-card:nth-of-type(3) {
  background: #f2effd;
  border: 5px #f2effd solid;
}


.card.staff-card:nth-of-type(4) {
  background: #f9f0eb;
  border: 5px #f9f0eb solid;
}

/* 2x2 Grid */
.staff-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (min-width: 900px){
  .staff-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Card: white, 20px radius, subtle shadow */
.staff-card{
  height: 100%;
  min-height: 168px;
  border-radius: 20px;
  background: rgb(231, 246, 249);
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.staff-card:hover{
  transform: translateY(-3px);
  border: 5px solid #000;
  box-shadow: 0 30px 80px rgba(0,0,0,.30);
  /*! border-size: 5px; */
}

.staff-card:hover img {
  opacity: 1;
  transition: all;
}

/* Layout (40/60) */
.staff-card-link{
  display: grid;
  grid-template-columns: 40% 60%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Media area — UPDATED to match screenshot 2 (rounded photo tile) */
.staff-media{
  position: relative;
  height: 100%;
  max-height: 168px;
  /*! overflow: hidden; */

  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;

  /* removes the "big panel + centered circle" feel */
  background: transparent;
  padding: 12px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Rounded-rectangle photo tile (fills the media area) */
.staff-media img{
  width: 100%;
  height: 100%;
  max-height: 144px;
  object-fit: cover;
  display: block;

  border-radius: 16px;
  border: 1px solid #eee;

  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  filter: contrast(1.02) saturate(1.06) brightness(1.02);
  transform: none;
  /*! border-radius: 100%; */
  opacity: .90;
  transition: all;
}

/* Remove old photo overlay gradient (keeps it clean & editorial) */
.staff-media::after{ display:none; }

/* Content */
.staff-content{
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Names/Roles hierarchy */
.staff-name{
  margin: 0;
  font-family: Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.2px;
  color: #0B1220; /* bold navy */
  line-height: 1.15;
}
.staff-role{
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: rgba(11,18,32,.56); /* muted gray */
}

/* Badges: clean, light-gray pills */
.staff-badges{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.staff-badges .badge{
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;

  color: rgba(11,18,32,.72);
  background: rgba(11,18,32,.05);
  border: 1px solid rgba(11,18,32,.10);
}

/* Excerpt */
.staff-excerpt{
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(11,18,32,.76);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Button: match About Us light-blue border for harmony */
.staff-cta{
  margin-top: 6px;
  align-self: flex-end;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-family: Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .1px;

  color: rgba(11,18,32,.88);
  text-decoration: none;

  padding: 6px 10px;
  border-radius: 10px;

  border: 1px solid #eee\);  /* light blue */
  background: transparent;

  transition: transform .16s ease, border-color .16s ease, background .16s ease;
  background: #fff;

}
.staff-card:hover .staff-cta{
  /*! transform: translateY(-1px); */
  /*! border-color: #eee; */
  background: #ggg;
}

#staff .container{ max-width: 1180px; }

/* Mobile */
@media (max-width: 520px){
  .staff-card-link{
    grid-template-columns: 1fr;
    grid-template-rows: 160px auto;
  }
  .staff-media{
    max-height: 160px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 0;
  }
  .staff-media img{
    max-height: 136px;
    border-radius: 16px;
  }
}

/* ========== Blog (Premium Image-Driven 1x3 Grid) ========== */
#blog.section{ background: transparent; }

/* Optional: give the heading/subhead breathing room (prevents “hugging”) */
#blog .section-head{ margin-bottom: 18px; }
#blog .section-head p{ line-height: 1.6; }

.blog-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (min-width: 720px){
  .blog-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1020px){
  .blog-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.blog-card{
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: rgb(237, 242, 251);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 18px 52px rgba(0,0,0,.28);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.blog-card-link{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  display: inline-grid;
}

.blog-media{
  position: relative;
  height: 250px; /* top half feel */
  overflow: hidden;
}
.blog-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* ensures clean rounding on the image itself */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;

  transform: scale(1);
  transition: transform .28s ease;
}
.blog-media::after{
  content:"";
  position:absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 55%);
  pointer-events:none;
}

.blog-body{
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

/* Category Tags: ALL-CAPS pill badges w/ white text (Teal, Green, Gold) */
.blog-tag{
  display: inline-flex;
  align-items: center;
  width: fit-content;

  font-family: Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;

  color: #ffffff;
  padding: 6px 10px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Tag colors per card (Teal, Green, Gold) */
.blog-card:nth-child(1) .blog-tag{
  background: rgba(82,191,206,.92);
  border-color: rgba(82,191,206,.55);
}
.blog-card:nth-child(2) .blog-tag{
  background: rgba(94,181,73,.92);
  border-color: rgba(94,181,73,.55);
}
.blog-card:nth-child(3) .blog-tag{
  background: rgba(249,181,31,.92);
  border-color: rgba(249,181,31,.55);
}

.blog-title{
  margin: 0;
  font-family: Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.2px;
  line-height: 1.15;
  color: #0B1220;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-excerpt{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(11,18,32,.72);

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /*! display: inline-table; */
}

/* =========================
   Blog "More Articles" CTA
   ========================= */

.blog-cta-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 25px;
  margin-bottom: 25px;
}

/* Button base */
.about-btn.blog {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 18px;
  border-radius: 999px;

  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-decoration: none;

  color: #ffffff;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.45);

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.15s ease;
}

/* Hover / focus */
.about-btn.blog:hover,
.about-btn.blog:focus {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.75);
  transform: translateX(2px);
}

/* Optional arrow styling */
.about-btn.blog span {
  display: inline-block;
  transition: transform 0.25s ease;
}

.about-btn.blog:hover span {
  transform: translateX(3px);
}

/* =========================
   Mobile behavior
   ========================= */

@media (max-width: 768px) {
  .blog-cta-wrap {
    justify-content: center;
  }

  .about-btn.blog {
    font-size: 13px;
    padding: 10px 20px;
  }
}


/* ========== Contact Us (3-Column Executive Communication Hub) ========== */
#contact.section{
  padding: 64px 0;
  background: transparent; /* keeps your deep navy global bg */
}

/* Header (CENTERED) */
#contact .section-head{
  margin-bottom: 28px;
  text-align: center;
}
#contact .section-head h2,site-header
#contact .section-head .section-title{
  margin: 0 0 10px;
  font-family: Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.3px;
  line-height: 1.12;
  color: #ffffff;
}
.site-header::after{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1100;
}

.site-header.menu-open::after{
  opacity: 1;
  pointer-events: auto;
}

.site-header.menu-open .icon-bars{ background: transparent; }
.site-header.menu-open .icon-bars::before{ transform: translateY(6px) rotate(45deg); }
.site-header.menu-open .icon-bars::after{ transform: translateY(-6px) rotate(-45deg); }


#contact .section-head p,
#contact .section-head .section-subtitle{
  margin: 0 auto;
  max-width: 70ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
}

/* Grid: Email • Visit • Call (CENTERED) */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
  justify-items: center; /* centers single-column cards on mobile */
}

@media (min-width: 920px){
  .contact-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    justify-items: stretch; /* full-width columns on desktop */
  }
}

/* Column card (subtle glass panel) */
.contact-col{
  border-radius: 20px;
  padding: 18px 16px 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 52px rgba(0,0,0,.35);

  display: flex;
  flex-direction: column;
  gap: 12px;

  text-align: center; /* centers label + details + button stack */

  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.contact-col:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 26px 74px rgba(0,0,0,.42);
}

/* Column label */
.contact-label{
  font-family: Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.76);
}

/* Details: light gray, centered above button (per spec) */
.contact-detail{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.74);
  text-align: center;
}

/* Clean link styling inside details */
.contact-detail a{
  color: rgba(255,255,255,.86);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.contact-detail a:hover{
  border-bottom-color: rgba(82,191,206,.70);
}

/* Keep button anchored and columns symmetrical */
.contact-spacer{ margin-top: auto; }

/* Buttons: same height + width, 20px radius, floating shadow */
.contact-btn{
  width: auto;
  height: 48px;                 /* identical height */
  border-radius: 20px;          /* friendly */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;

  font-family: Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .08px;
  text-decoration: none;
  cursor: pointer;

  box-shadow: 0 14px 34px rgba(0,0,0,.35); /* floating */
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
  padding: 15px;
  margin-top: 20px;
}

.contact-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(0,0,0,.42);
}

/* Solid white button: Send an Email */
.contact-btn--email{
  background: rgba(255,255,255,.96);
  color: #0B1220;
  border: 1px solid rgba(255,255,255,.70);
}
.contact-btn--email:hover{
  filter: brightness(1.02);
}

/* Primary: Schedule a Tour (brand orange gradient) */
.contact-btn--tour{
  background: linear-gradient(135deg, #F05834 0%, #F9B51F 100%);
  color: #0B1220;
  border: 1px solid rgba(255,255,255,.20);
}

/* Ghost: Call Now (light blue border to match About frame) */
.contact-btn--call{
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(82,191,206,.70);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);

}
.contact-btn--call:hover{
  background: rgba(82,191,206,.10);
  border-color: rgba(82,191,206,.95);
}

/* Simple inline icon sizing (works for SVG or font icons) */
.contact-btn .icon{
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .95;
  display: contents;
}

/* Container width harmony */
#contact .container{ max-width: 1180px; text-align: center;}


/* CTA: ghost button w/ thin gold border */
.blog-cta{
  margin-top: auto;
  align-self: flex-start;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-family: Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .08px;

  color: rgba(11,18,32,.88);
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(249,181,31,.70);
  background: transparent;

  transition: transform .16s ease, background .16s ease, border-color .16s ease;
  margin-top: 25px;
}

.blog-card:hover{
  transform: translateY(-4px);
  border-color: rgba(249,181,31,.45);
  box-shadow: 0 28px 80px rgba(0,0,0,.34);
}
.blog-card:hover .blog-media img{ transform: scale(1.05); }
.blog-card:hover .blog-cta{
  transform: translateY(-1px);
  background: rgba(249,181,31,.10);
  border-color: rgba(249,181,31,.90);
}


/* ========== Footer ========== */
.site-footer{
  padding: 22px 0 30px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(7,10,18,.55), rgba(7,10,18,.90));
}
.footer-inner{
  display: grid;
  gap: 14px;
  align-items: start;
}
.footer-brand{
  display: flex;
  gap: 10px;
  align-items: center;
}
.footer-title{ font-weight: 900; color: rgba(255,255,255,.92); }
.footer-meta{ color: rgba(255,255,255,.70); font-size: 13px; margin-top: 2px; }

.footer-links{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.70);
  font-weight: 800;
}
.footer-links a:hover{ color: rgba(255,255,255,.95); }

.footer-small{ color: rgba(255,255,255,.60); font-size: 13px; }

/* Nav Overlay CSS starts here */
.nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1100; /* below header (1200), above page */
}

.nav-overlay.show{
  opacity: 1;
  pointer-events: auto;
}

/* header stays above overlay */
.site-header{ z-index: 1200; }


/* ========== Desktop tweaks ========== */
@media (min-width: 900px){
  .nav-desktop{ display: flex; }
  .nav-toggle{ display: none; }

  .hero{ padding: 62px 0 22px; }
  .hero-inner{ grid-template-columns: 1fr; gap: 18px; }
  .hero-text{ font-size: 16px; }

  .footer-inner{
    grid-template-columns: 1fr auto auto;
    align-items: center;
  }
}

/* CSS Document */