/* =============================================================
   THIFL ISLAMIC ACADEMY — MAIN STYLESHEET
   100% hand-written vanilla CSS (no Tailwind / no build step).
   Structure inspired by CodyHouse's design-token + component
   conventions, Codrops' "reveal on scroll" blueprint pattern,
   and Animista-style keyframe animations.

   Contents:
     1. Design tokens (CodyHouse-style custom properties)
     2. Reset & base
     3. Utility layer  (auto-generated, mirrors the layout
        classes used in the markup so index.html never had to
        be rewritten)
     4. Responsive / state variants
     5. Site components (navbar, hero, cards, forms, footer…)
     6. Hamburger menu — CodyHouse "squeeze" icon + Codrops
        full-screen overlay nav
     7. Animista-style scroll-reveal animations
     8. Vanta.js host layer
   ============================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  --color-navy:#0A2A43;
  --color-navy-800:#0F3557;
  --color-navy-900:#08213A;
  --color-sky:#5CE1E6;
  --color-sky-50:#EFFCFC;
  --color-sky-100:#DFF8F9;
  --color-sky-300:#9FEEF0;
  --color-sky-500:#5CE1E6;
  --color-sky-600:#2FB8BD;
  --color-sky-700:#1E9299;
  --color-accent:#38D9E8;
  --color-gold:#C9A44C;
  --color-gold-light:#E8D08C;
  --color-gold-deep:#9C7A2E;
  --font-serif:'Amiri',serif;
  --font-kufi:'Reem Kufi',serif;
  --font-scholar:'Cormorant Garamond',serif;
  --font-sans:'Plus Jakarta Sans',sans-serif;
  --ease-out-cubic:cubic-bezier(.25,.46,.45,.94);
}

/* ---------- 2. RESET & BASE ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  background:#fff;
  color:var(--color-navy);
  /* Site-wide default: all text centred unless a specific element
     (e.g. the "At a Glance" spec rows on the services page) opts
     into .text-right for a functional two-column layout. */
  text-align:center;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
/* Explicitly pin every link state to the inherited color. Without this,
   a clicked mailto:/tel: link (e.g. the top-bar email) can fall back to
   the browser's default purple "visited" link color instead of the
   site's white/navy text, since that default targets :visited directly
   and a plain `a{color:inherit}` doesn't always out-rank it. */
a:link, a:visited, a:hover, a:active{color:inherit;}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
/* Long-form article body copy (blog posts) needs real bullets, unlike the
   site's nav/footer lists which intentionally have none. */
.blog-article ul.list-disc{list-style:disc;list-style-position:inside;margin:0 0 1.25rem;padding:0;}
.blog-article h2{text-align:center;}
h1,h2,h3,.font-serif-display{font-family:var(--font-serif);}
.arabic{font-family:var(--font-serif),var(--font-kufi);direction:rtl;}
::selection{background:#8FC7F2;color:#08213A;}
/* =========================================================
   UTILITY LAYER
   A small, purpose-built set of utility classes that mirrors
   the layout/spacing/color utilities used across this page.
   Written by hand in plain CSS (no build step, no framework)
   as a replacement for the Tailwind CDN runtime.
   ========================================================= */


.block{display:block}
.hidden{display:none}
.flex{display:flex}
.inline-flex{display:inline-flex}
.inline-block{display:inline-block}
.grid{display:grid}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.col-span-2{grid-column:span 2 / span 2}
.relative{position:relative}
.absolute{position:absolute}
.sticky{position:sticky}
.inset-0{inset:0}
.top-0{top:0}
.top-24{top:6rem}
.top-full{top:100%}
.left-0{left:0}
.left-1\/2{left:50%}
.-translate-x-1\/2{transform:translateX(-50%)}
.translate-y-2{transform:translateY(0.5rem)}
.-top-24{top:-6rem}
.-right-24{right:-6rem}
.overflow-hidden{overflow:hidden}
.overflow-y-auto{overflow-y:auto}
.z-10{z-index:10}
.z-50{z-index:50}
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.italic{font-style:italic}
.uppercase{text-transform:uppercase}
.antialiased{-webkit-font-smoothing:antialiased}
.object-contain{object-fit:contain}
.w-auto{width:auto}
.w-full{width:100%}
.opacity-0{opacity:0}
.invisible{visibility:hidden}
.transition{transition:all .25s ease}
.transition-all{transition:all .3s ease}
.duration-200{transition-duration:.2s}
.duration-300{transition-duration:.3s}
.tracking-tight{letter-spacing:-0.02em}
.tracking-wide{letter-spacing:0.02em}
.tracking-widest{letter-spacing:0.1em}
.tracking-\[0\.22em\]{letter-spacing:0.22em}
.leading-tight{line-height:1.2}
.leading-relaxed{line-height:1.65}
.leading-\[1\.05\]{line-height:1.05}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-black{font-weight:900}
.font-serif{font-family:'Amiri',serif}
.font-scholar{font-family:'Cormorant Garamond',serif}
.border{border:1px solid transparent}
.border-t{border-top:1px solid transparent}
.border-b{border-bottom:1px solid transparent}

.w-2{width:0.5rem}
.h-2{height:0.5rem}

.w-4{width:1rem}
.h-4{height:1rem}

.w-7{width:1.75rem}
.h-7{height:1.75rem}

.w-9{width:2.25rem}
.h-9{height:2.25rem}

.w-10{width:2.5rem}
.h-10{height:2.5rem}

.w-12{width:3rem}
.h-12{height:3rem}

.w-14{width:3.5rem}
.h-14{height:3.5rem}

.w-16{width:4rem}
.h-16{height:4rem}

.w-24{width:6rem}
.h-24{height:6rem}

.w-96{width:24rem}
.h-96{height:24rem}

.h-px{height:1px}

.gap-0{gap:0}

.gap-0\.5{gap:0.125rem}

.gap-1{gap:0.25rem}

.gap-1\.5{gap:0.375rem}

.gap-2{gap:0.5rem}

.gap-2\.5{gap:0.625rem}

.gap-3{gap:0.75rem}

.gap-3\.5{gap:0.875rem}

.gap-4{gap:1rem}

.gap-5{gap:1.25rem}

.gap-6{gap:1.5rem}

.gap-7{gap:1.75rem}

.gap-8{gap:2rem}

.gap-9{gap:2.25rem}

.gap-10{gap:2.5rem}

.gap-12{gap:3rem}

.gap-14{gap:3.5rem}

.gap-16{gap:4rem}

.gap-24{gap:6rem}

.gap-28{gap:7rem}

.gap-32{gap:8rem}

.gap-96{gap:24rem}

.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.mr-0{margin-right:0}

.mt-0\.5{margin-top:0.125rem}
.mb-0\.5{margin-bottom:0.125rem}
.mr-0\.5{margin-right:0.125rem}

.mt-1{margin-top:0.25rem}
.mb-1{margin-bottom:0.25rem}
.mr-1{margin-right:0.25rem}

.mt-1\.5{margin-top:0.375rem}
.mb-1\.5{margin-bottom:0.375rem}
.mr-1\.5{margin-right:0.375rem}

.mt-2{margin-top:0.5rem}
.mb-2{margin-bottom:0.5rem}
.mr-2{margin-right:0.5rem}

.mt-2\.5{margin-top:0.625rem}
.mb-2\.5{margin-bottom:0.625rem}
.mr-2\.5{margin-right:0.625rem}

.mt-3{margin-top:0.75rem}
.mb-3{margin-bottom:0.75rem}
.mr-3{margin-right:0.75rem}

.mt-3\.5{margin-top:0.875rem}
.mb-3\.5{margin-bottom:0.875rem}
.mr-3\.5{margin-right:0.875rem}

.mt-4{margin-top:1rem}
.mb-4{margin-bottom:1rem}
.mr-4{margin-right:1rem}

.mt-5{margin-top:1.25rem}
.mb-5{margin-bottom:1.25rem}
.mr-5{margin-right:1.25rem}

.mt-6{margin-top:1.5rem}
.mb-6{margin-bottom:1.5rem}
.mr-6{margin-right:1.5rem}

.mt-7{margin-top:1.75rem}
.mb-7{margin-bottom:1.75rem}
.mr-7{margin-right:1.75rem}

.mt-8{margin-top:2rem}
.mb-8{margin-bottom:2rem}
.mr-8{margin-right:2rem}

.mt-9{margin-top:2.25rem}
.mb-9{margin-bottom:2.25rem}
.mr-9{margin-right:2.25rem}

.mt-10{margin-top:2.5rem}
.mb-10{margin-bottom:2.5rem}
.mr-10{margin-right:2.5rem}

.mt-12{margin-top:3rem}
.mb-12{margin-bottom:3rem}
.mr-12{margin-right:3rem}

.mt-14{margin-top:3.5rem}
.mb-14{margin-bottom:3.5rem}
.mr-14{margin-right:3.5rem}

.mt-16{margin-top:4rem}
.mb-16{margin-bottom:4rem}
.mr-16{margin-right:4rem}

.mt-24{margin-top:6rem}
.mb-24{margin-bottom:6rem}
.mr-24{margin-right:6rem}

.mt-28{margin-top:7rem}
.mb-28{margin-bottom:7rem}
.mr-28{margin-right:7rem}

.mt-32{margin-top:8rem}
.mb-32{margin-bottom:8rem}
.mr-32{margin-right:8rem}

.mt-96{margin-top:24rem}
.mb-96{margin-bottom:24rem}
.mr-96{margin-right:24rem}

.mx-auto{margin-left:auto;margin-right:auto}

.p-0{padding:0}
.px-0{padding-left:0;padding-right:0}
.py-0{padding-top:0;padding-bottom:0}
.pt-0{padding-top:0}
.pb-0{padding-bottom:0}

.p-0\.5{padding:0.125rem}
.px-0\.5{padding-left:0.125rem;padding-right:0.125rem}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.pt-0\.5{padding-top:0.125rem}
.pb-0\.5{padding-bottom:0.125rem}

.p-1{padding:0.25rem}
.px-1{padding-left:0.25rem;padding-right:0.25rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.pt-1{padding-top:0.25rem}
.pb-1{padding-bottom:0.25rem}

.p-1\.5{padding:0.375rem}
.px-1\.5{padding-left:0.375rem;padding-right:0.375rem}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.pt-1\.5{padding-top:0.375rem}
.pb-1\.5{padding-bottom:0.375rem}

.p-2{padding:0.5rem}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.pt-2{padding-top:0.5rem}
.pb-2{padding-bottom:0.5rem}

.p-2\.5{padding:0.625rem}
.px-2\.5{padding-left:0.625rem;padding-right:0.625rem}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.pt-2\.5{padding-top:0.625rem}
.pb-2\.5{padding-bottom:0.625rem}

.p-3{padding:0.75rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.pt-3{padding-top:0.75rem}
.pb-3{padding-bottom:0.75rem}

.p-3\.5{padding:0.875rem}
.px-3\.5{padding-left:0.875rem;padding-right:0.875rem}
.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}
.pt-3\.5{padding-top:0.875rem}
.pb-3\.5{padding-bottom:0.875rem}

.p-4{padding:1rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.pt-4{padding-top:1rem}
.pb-4{padding-bottom:1rem}

.p-5{padding:1.25rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.pt-5{padding-top:1.25rem}
.pb-5{padding-bottom:1.25rem}

.p-6{padding:1.5rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.pt-6{padding-top:1.5rem}
.pb-6{padding-bottom:1.5rem}

.p-7{padding:1.75rem}
.px-7{padding-left:1.75rem;padding-right:1.75rem}
.py-7{padding-top:1.75rem;padding-bottom:1.75rem}
.pt-7{padding-top:1.75rem}
.pb-7{padding-bottom:1.75rem}

.p-8{padding:2rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.pt-8{padding-top:2rem}
.pb-8{padding-bottom:2rem}

.p-9{padding:2.25rem}
.px-9{padding-left:2.25rem;padding-right:2.25rem}
.py-9{padding-top:2.25rem;padding-bottom:2.25rem}
.pt-9{padding-top:2.25rem}
.pb-9{padding-bottom:2.25rem}

.p-10{padding:2.5rem}
.px-10{padding-left:2.5rem;padding-right:2.5rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.pt-10{padding-top:2.5rem}
.pb-10{padding-bottom:2.5rem}

.p-12{padding:3rem}
.px-12{padding-left:3rem;padding-right:3rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.pt-12{padding-top:3rem}
.pb-12{padding-bottom:3rem}

.p-14{padding:3.5rem}
.px-14{padding-left:3.5rem;padding-right:3.5rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.pt-14{padding-top:3.5rem}
.pb-14{padding-bottom:3.5rem}

.p-16{padding:4rem}
.px-16{padding-left:4rem;padding-right:4rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.pt-16{padding-top:4rem}
.pb-16{padding-bottom:4rem}

.p-24{padding:6rem}
.px-24{padding-left:6rem;padding-right:6rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.pt-24{padding-top:6rem}
.pb-24{padding-bottom:6rem}

.p-28{padding:7rem}
.px-28{padding-left:7rem;padding-right:7rem}
.py-28{padding-top:7rem;padding-bottom:7rem}
.pt-28{padding-top:7rem}
.pb-28{padding-bottom:7rem}

.p-32{padding:8rem}
.px-32{padding-left:8rem;padding-right:8rem}
.py-32{padding-top:8rem;padding-bottom:8rem}
.pt-32{padding-top:8rem}
.pb-32{padding-bottom:8rem}

.p-96{padding:24rem}
.px-96{padding-left:24rem;padding-right:24rem}
.py-96{padding-top:24rem;padding-bottom:24rem}
.pt-96{padding-top:24rem}
.pb-96{padding-bottom:24rem}

.space-y-2 > * + *{margin-top:0.5rem}

.space-y-3 > * + *{margin-top:0.75rem}

.text-xs{font-size:0.75rem}

.text-sm{font-size:0.875rem}

.text-lg{font-size:1.125rem}

.text-xl{font-size:1.25rem}

.text-2xl{font-size:1.5rem}

.text-3xl{font-size:1.875rem}

.text-4xl{font-size:2.25rem}

.text-5xl{font-size:3rem}

.text-6xl{font-size:3.75rem}

.text-\[10px\]{font-size:10px}
.text-\[11px\]{font-size:11px}

.rounded-xl{border-radius:0.75rem}

.rounded-2xl{border-radius:1rem}

.rounded-3xl{border-radius:1.5rem}

.rounded-full{border-radius:9999px}

.bg-navy{background-color:#0A2A43}
.text-navy{color:#0A2A43}
.border-navy{border-color:#0A2A43}

.bg-navy-800{background-color:#0F3557}
.text-navy-800{color:#0F3557}
.border-navy-800{border-color:#0F3557}

.bg-navy-900{background-color:#08213A}

/* Premium footer treatment: deep navy-to-black gradient, a faint gold
   geometric pattern, and a hairline gold accent along the very top
   edge, instead of the previous flat navy-900 fill. */
.footer-premium{
  background:
    radial-gradient(ellipse 120% 100% at 50% 0%, rgba(92,225,230,.07), transparent 55%),
    linear-gradient(180deg, #0B2A47 0%, #081D34 45%, #051423 100%);
  box-shadow:inset 0 1px 0 0 rgba(212,175,55,.35);
}
.footer-premium .pattern-overlay-gold{opacity:.5;}
.text-navy-900{color:#08213A}
.border-navy-900{border-color:#08213A}

.bg-sky-50{background-color:#EFFCFC}
.text-sky-50{color:#EFFCFC}
.border-sky-50{border-color:#EFFCFC}

.bg-sky-100{background-color:#DFF8F9}
.text-sky-100{color:#DFF8F9}
.border-sky-100{border-color:#DFF8F9}

.bg-sky-200{background-color:#C7EEF0}
.text-sky-200{color:#C7EEF0}
.border-sky-200{border-color:#C7EEF0}

.bg-sky-300{background-color:#9FEEF0}
.text-sky-300{color:#9FEEF0}
.border-sky-300{border-color:#9FEEF0}

.bg-sky-400{background-color:#6FE3E8}
.text-sky-400{color:#6FE3E8}
.border-sky-400{border-color:#6FE3E8}

.bg-sky-500{background-color:#5CE1E6}
.text-sky-500{color:#5CE1E6}
.border-sky-500{border-color:#5CE1E6}

.bg-sky-600{background-color:#2FB8BD}
.text-sky-600{color:#2FB8BD}
.border-sky-600{border-color:#2FB8BD}

.bg-sky-700{background-color:#1E9299}
.text-sky-700{color:#1E9299}
.border-sky-700{border-color:#1E9299}

.bg-gold{background-color:#C9A44C}
.text-gold{color:#C9A44C}
.border-gold{border-color:#C9A44C}

.bg-gold-light{background-color:#E8D08C}
.text-gold-light{color:#E8D08C}
.border-gold-light{border-color:#E8D08C}

.bg-gold-deep{background-color:#9C7A2E}
.text-gold-deep{color:#9C7A2E}
.border-gold-deep{border-color:#9C7A2E}

.bg-white{background-color:#ffffff}
.text-white{color:#ffffff}
.border-white{border-color:#ffffff}

.bg-rose-400{background-color:#fb7185}
.text-rose-400{color:#fb7185}
.border-rose-400{border-color:#fb7185}

.bg-rose-500{background-color:#f43f5e}
.text-rose-500{color:#f43f5e}
.border-rose-500{border-color:#f43f5e}


/* =========================================================
   RESPONSIVE / STATE VARIANTS
   Escaped selectors so the original class names (with : and /)
   can stay untouched in the markup while resolving to plain CSS.
   ========================================================= */
.max-w-xs{max-width:20rem}
.max-w-sm{max-width:24rem}
.max-w-md{max-width:28rem}
.max-w-lg{max-width:32rem}
.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}
.min-h-\[220px\]{min-height:220px}
.max-h-\[80vh\]{max-height:80vh}
.backdrop-blur-lg{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.blur-3xl{filter:blur(64px)}
.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* translucent color variants (Tailwind's /NN opacity suffix) */
.bg-sky-50\/60{background-color:rgba(239,252,252,.6)}
.bg-white\/97{background-color:rgba(255,255,255,.97)}
.bg-sky-500\/20{background-color:rgba(92,225,230,.2)}
.border-white\/10{border-color:rgba(255,255,255,.1)}
.text-gold-light\/90{color:rgba(232,208,140,.9)}
.text-navy-800\/40{color:rgba(15,53,87,.4)}
.text-navy-800\/50{color:rgba(15,53,87,.5)}
.text-navy-800\/60{color:rgba(15,53,87,.6)}
.text-navy-800\/70{color:rgba(15,53,87,.7)}
.text-navy-800\/75{color:rgba(15,53,87,.75)}
.text-navy-800\/80{color:rgba(15,53,87,.8)}
.text-navy-800\/90{color:rgba(15,53,87,.9)}
.text-navy-800{color:#0F3557}
.text-sky-100\/50{color:rgba(223,248,249,.5)}
.text-sky-100\/60{color:rgba(223,248,249,.6)}
.text-sky-100\/70{color:rgba(223,248,249,.7)}
.text-sky-100\/80{color:rgba(223,248,249,.8)}
.text-sky-100\/85{color:rgba(223,248,249,.85)}

/* gradients */
/* --g-via falls back to --g-to (not transparent) so two-stop gradients
   (from/to with no via- class) render as a solid from->to blend instead
   of punching a see-through gap in the middle of the background. */
.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--g-from), var(--g-via, var(--g-to)), var(--g-to))}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--g-from), var(--g-via, var(--g-to)), var(--g-to))}
.bg-gradient-to-r{background-image:linear-gradient(to right, var(--g-from), var(--g-via, var(--g-to)), var(--g-to))}
.from-navy{--g-from:#0A2A43}
.from-sky-50{--g-from:#EFFCFC}
.from-sky-500{--g-from:#5CE1E6}
.via-navy-800{--g-via:#0F3557}
.via-white{--g-via:#ffffff}
.to-navy{--g-to:#0A2A43}
.to-sky-700{--g-to:#1E9299}
.to-white{--g-to:#ffffff}

/* focus */
.focus\:outline-none:focus{outline:none}
.focus\:ring-2:focus{box-shadow:0 0 0 3px rgba(111,227,232,.55)}
.focus\:ring-sky-400:focus{box-shadow:0 0 0 3px rgba(111,227,232,.55)}

/* hover */
.hover\:bg-sky-50:hover{background-color:#EFFCFC}
.hover\:bg-white:hover{background-color:#ffffff}
.hover\:shadow-glow:hover{box-shadow:0 8px 40px -8px rgba(92,225,230,.45)}
.hover\:text-gold-light:hover{color:#E8D08C}
.hover\:text-navy:hover{color:#0A2A43}
.hover\:text-sky-700:hover{color:#1E9299}

/* Services dropdown — explicit click-toggle (JS adds/removes
   .is-open on #servicesNavItem) layered on top of CSS :hover,
   so it works reliably for both mouse and touch instead of
   depending on hover alone. */
.group{position:relative}
.services-caret{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 4px;margin-left:-2px;border-radius:9999px;
  transition:transform .25s ease, background-color .2s ease;
}
.services-caret:hover{background-color:rgba(92,225,230,.15);}
.group:hover .services-caret i,
#servicesNavItem.is-open .services-caret i{transform:rotate(180deg);display:inline-block;transition:transform .25s ease;}

.services-dropdown{
  position:absolute;left:50%;top:100%;
  transform:translate(-50%, 8px);
  padding-top:.5rem;width:16rem;
  opacity:0;visibility:hidden;
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.group:hover .services-dropdown,
#servicesNavItem.is-open .services-dropdown{
  opacity:1;visibility:visible;transform:translate(-50%, 0);
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}

/* breakpoints: sm 640, md 768, lg 1024 */
@media (min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:768px){
  .md\:flex{display:flex}
  .md\:hidden{display:none}
  .md\:inline{display:inline}
  .md\:inline-block{display:inline-block}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:col-span-2{grid-column:span 2 / span 2}
  .md\:gap-8{gap:2rem}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:h-32{height:8rem}
  .md\:text-3xl{font-size:1.875rem}
  .md\:text-4xl{font-size:2.25rem}
  .md\:text-5xl{font-size:3rem}
  .md\:text-6xl{font-size:3.75rem}
}
@media (min-width:1024px){
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* opacity utilities */
.opacity-20{opacity:.2}
.opacity-30{opacity:.3}
.opacity-40{opacity:.4}
.opacity-60{opacity:.6}
.opacity-80{opacity:.8}

/* fixed width used once */
.w-64{width:16rem}

/* custom shadow utilities (from the former Tailwind theme.extend.boxShadow) */
.shadow-glow{box-shadow:0 8px 40px -8px rgba(92,225,230,.45)}
.shadow-gold{box-shadow:0 8px 30px -8px rgba(201,164,76,.5)}
.shadow-soft{box-shadow:0 10px 30px -10px rgba(10,42,67,.15)}

/* ---------- 5. SITE COMPONENTS ---------- */
.glass{background:rgba(255,255,255,0.65);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}

/* Islamic geometric tessellation pattern (repeating SVG) */
.pattern-overlay{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%235CE1E6' stroke-opacity='0.14' stroke-width='1'%3E%3Cpath d='M42 0 L60 18 L84 18 L66 36 L84 42 L60 42 L42 60 L24 42 L0 42 L18 36 L0 18 L24 18 Z'/%3E%3Ccircle cx='42' cy='42' r='14'/%3E%3C/g%3E%3C/svg%3E");
  background-size:84px 84px;
  pointer-events:none;
}
.pattern-overlay-gold{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23C9A44C' stroke-opacity='0.18' stroke-width='1'%3E%3Cpath d='M42 0 L60 18 L84 18 L66 36 L84 42 L60 42 L42 60 L24 42 L0 42 L18 36 L0 18 L24 18 Z'/%3E%3Ccircle cx='42' cy='42' r='14'/%3E%3C/g%3E%3C/svg%3E");
}

#hero-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;}
.drift-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}

/* Aurora animated mesh background */
.aurora{
  position:absolute;inset:-25%;pointer-events:none;z-index:0;
  background:conic-gradient(from 0deg at 50% 50%, #5CE1E6, #E8D08C, #8FC7F2, #C9A44C, #5CE1E6);
  filter:blur(90px);opacity:.22;
  animation:aurora-spin 34s linear infinite;
}
@keyframes aurora-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.spotlight{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(320px circle at var(--x,50%) var(--y,20%), rgba(255,255,255,.55), transparent 65%);
  mix-blend-mode:soft-light;opacity:0;transition:opacity .4s ease;
}
.spotlight.on{opacity:1;}

/* Scholar photo slideshow (replaces the old plain text badge).
   Real photos are expected at assets/hero-slide-1.jpg, -2.jpg,
   -3.jpg — drop your own (Quran close-up, a class/activity
   photo, a child reciting, etc.) in at those exact filenames
   and they'll appear automatically. Until then, the navy/gold
   gradient + geometric motif below is the fallback background,
   so nothing ever looks broken or shows a missing-image icon. */
.scholar-slideshow{
  position:relative;
  width:min(560px,92vw);height:210px;
  border-radius:1.1rem;overflow:hidden;
  background:linear-gradient(135deg,#0A2A43,#1E9299);
  box-shadow:0 16px 40px -14px rgba(10,42,67,.45);
}
.scholar-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.4s ease;
}
.scholar-slide.active{opacity:1;}
.scholar-slide-scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(8,33,58,.25) 0%, rgba(8,33,58,.55) 55%, rgba(8,33,58,.9) 100%);
}
.scholar-slide-content{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  padding:1rem 2.5rem;text-align:center;
}
.scholar-ornament{
  position:absolute;z-index:2;top:12px;color:rgba(232,208,140,.85);font-size:.8rem;
}
.scholar-ornament-l{left:16px;}
.scholar-ornament-r{right:16px;}
.hero-anim{opacity:0;}

/* Navbar scroll-shrink */
#navbar{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--color-sky-100);transition:all .3s ease;}
#navbar.scrolled .navbar-logo{height:2.25rem;}
#navbar.scrolled .nav-row{padding-top:.6rem;padding-bottom:.6rem;}
#navbar::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg, transparent, #C9A44C, #5CE1E6, #C9A44C, transparent);
  background-size:200% 100%;animation:shimmer 6s linear infinite;opacity:.7;
}
.nav-row{display:flex;align-items:center;justify-content:space-between;transition:all .3s ease;}
.nav-link{position:relative;}
.nav-link-active{color:var(--color-sky-700);}
.nav-link-active::after{content:'';position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:#5CE1E6;}
.nav-link::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:#5CE1E6;transition:width .25s ease;}
.nav-link:hover::after{width:100%;}

.blob{position:absolute;border-radius:9999px;filter:blur(70px);opacity:.5;animation:float 14s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(30px,-40px) scale(1.08);}}
.blob-a{background:radial-gradient(circle at 30% 30%, #8FC7F2, transparent 70%);width:520px;height:520px;top:-120px;left:-100px;}
.blob-b{background:radial-gradient(circle at 60% 40%, #38D9E8, transparent 70%);width:460px;height:460px;bottom:-160px;right:-80px;animation-delay:3s;}
.blob-c{background:radial-gradient(circle at 50% 50%, #C9A44C, transparent 70%);width:300px;height:300px;top:35%;right:12%;opacity:.25;animation-delay:6s;}

.ring-slow{animation:spin 40s linear infinite;}
.ring-slow-rev{animation:spin-rev 60s linear infinite;}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes spin-rev{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}

.grad-text{background:linear-gradient(90deg,#0A2A43,#1E9299 45%,#5CE1E6);-webkit-background-clip:text;background-clip:text;color:transparent;}
.gold-text{background:linear-gradient(90deg,#9C7A2E,#E8D08C 45%,#C9A44C);-webkit-background-clip:text;background-clip:text;color:transparent;}

@keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
.shimmer-border{position:relative;}
.shimmer-border::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(120deg,#9C7A2E,#E8D08C,#C9A44C,#9C7A2E);
  background-size:200% 100%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:shimmer 4s linear infinite;
}

.grain{
  position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.divider-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;line-height:0;z-index:5;pointer-events:none;}
.divider-wave svg{width:100%;height:70px;display:block;}
@media (min-width:768px){ .divider-wave svg{height:100px;} }

.marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee-item{white-space:nowrap;padding:0 2.5rem;display:flex;align-items:center;gap:0.6rem;}

.icon-badge{
  position:relative;border-radius:9999px;
  box-shadow:0 0 0 6px rgba(92,225,230,0.10), 0 12px 26px -10px rgba(10,42,67,.4);
}
.icon-badge::after{
  content:'';position:absolute;inset:-6px;border-radius:9999px;border:1px solid rgba(92,225,230,.35);
  animation:pulse-ring 2.6s ease-out infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(0.9);opacity:.7;}
  70%{transform:scale(1.15);opacity:0;}
  100%{opacity:0;}
}

.lift{transition:box-shadow .35s ease;}
.lift:hover{box-shadow:0 20px 45px -15px rgba(10,42,67,.25);}

.btn-primary{background:linear-gradient(135deg,#5CE1E6,#1E9299);box-shadow:0 10px 30px -8px rgba(92,225,230,.55);transition:box-shadow .3s ease, transform .3s ease;}
.btn-primary:hover{box-shadow:0 14px 36px -6px rgba(92,225,230,.7);transform:translateY(-2px);}
.btn-gold{background:linear-gradient(135deg,#E8D08C,#C9A44C);box-shadow:0 10px 30px -8px rgba(201,164,76,.55);transition:box-shadow .3s ease, transform .3s ease;}
.btn-gold:hover{box-shadow:0 14px 36px -6px rgba(201,164,76,.7);transform:translateY(-2px);}

.t-slide{display:none;}
.t-slide.active{display:block;animation:fadein .5s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.dot{width:8px;height:8px;border-radius:9999px;background:#8FC7F2;transition:all .25s ease;cursor:pointer;}
.dot.active{width:24px;background:#1E9299;}

.star{position:absolute;border-radius:9999px;background:#E8D08C;animation:twinkle 3s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(1);}50%{opacity:.9;transform:scale(1.4);}}

.flip-card{perspective:1000px;height:150px;cursor:pointer;}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;}
.flip-card.flipped .flip-inner{transform:rotateY(180deg);}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.letter-sound-btn{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;transition:transform .15s ease,background .15s ease;}
.letter-sound-btn:hover{background:rgba(255,255,255,.32);transform:scale(1.08);}
.letter-sound-btn-dark{background:rgba(8,33,58,.08);color:#0A2A43;}
.letter-sound-btn-dark:hover{background:rgba(8,33,58,.16);}
.flip-front{background:linear-gradient(135deg,#0A2A43,#1E9299);color:#fff;}
.flip-back{background:linear-gradient(135deg,#E4F2FD,#ffffff);transform:rotateY(180deg);border:1px solid #8FC7F2;}

.sparkle{position:fixed;pointer-events:none;font-size:18px;color:#C9A44C;animation:sparkle-pop .7s ease-out forwards;z-index:100;}
@keyframes sparkle-pop{0%{opacity:1;transform:translateY(0) scale(0.6) rotate(0deg);}100%{opacity:0;transform:translateY(-40px) scale(1.3) rotate(90deg);}}

.arch-frame{border-radius:50% 50% 0 0 / 60% 60% 0 0;}

@media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important;} }

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:#EAF5FC;}
::-webkit-scrollbar-thumb{background:#8FC7F2;border-radius:9999px;}

.field-error{color:var(--color, #f43f5e);}

/* =============================================================
   6. HAMBURGER MENU
   Icon built on CodyHouse's "squeeze" hamburger-icon component
   (three bars collapsing into a cross via cubic-bezier easing),
   paired with a simple, solid-color slide-in sidebar + dim
   backdrop — no gradients or backdrop-filter layering that
   could fail to render.
   ============================================================= */
.hamburger{
  display:none;
  position:relative;
  width:3rem;height:3rem;
  border-radius:9999px;
  align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
  z-index:60;
}
@media (max-width:767px){ .hamburger{display:inline-flex;} }
@media (max-width:767px){ .top-contact-bar{display:none;} }

/* soft glow ring that blooms on hover/focus, CodyHouse "icon-badge" feel */
.hamburger::before{
  content:'';position:absolute;inset:0;border-radius:9999px;
  background:radial-gradient(circle, rgba(92,225,230,.28), rgba(92,225,230,0) 70%);
  transform:scale(.4);opacity:0;
  transition:transform .35s var(--ease-out-cubic), opacity .35s ease;
}
.hamburger:hover::before,
.hamburger:focus-visible::before{transform:scale(1);opacity:1;}

.hamburger-box{position:relative;width:22px;height:16px;display:inline-block;}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after{
  position:absolute;left:0;width:22px;height:2px;border-radius:2px;
  background:var(--color-navy);
  transition:transform .32s cubic-bezier(.68,-0.35,.27,1.35),
             opacity .2s ease .1s,
             background-color .3s ease;
}
.hamburger-inner{top:7px;}
.hamburger-inner::before{content:'';top:-7px;}
.hamburger-inner::after{content:'';top:7px;}

/* squeeze -> cross */
.hamburger.is-active .hamburger-inner{background:transparent;}
.hamburger.is-active .hamburger-inner::before{
  top:0;transform:rotate(45deg);
  background:var(--color-sky-700);
}
.hamburger.is-active .hamburger-inner::after{
  top:0;transform:rotate(-45deg);
  background:var(--color-sky-700);
}

/* Self-contained mobile sidebar — positioning, animation, and the
   backdrop are all defined locally so the menu works even if an
   external CDN (Bootstrap) is slow, blocked, or fails to load.
   Bootstrap's offcanvas classes/attributes are no longer relied on. */
#mobilePanel{
  position:fixed;top:0;right:0;bottom:0;
  width:320px;max-width:85vw;
  background-color:#08213A;
  color:#fff;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), visibility .35s;
  z-index:1050;
  box-shadow:-12px 0 40px rgba(0,0,0,.25);
}
#mobilePanel.show{
  transform:translateX(0);
  visibility:visible;
}
#mobileBackdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:1040;opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
#mobileBackdrop.show{opacity:1;pointer-events:auto;}
#mobilePanel .offcanvas-header{
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:1.1rem 1.25rem;
  position:relative;
  display:flex;justify-content:center;flex:none;
}
#mobilePanel .offcanvas-title{
  width:100%;text-align:center;
}
#mobilePanel .btn-close{
  position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border:none;border-radius:50%;
  background:rgba(255,255,255,.12);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;
}
#mobilePanel .btn-close::before{
  content:'\2715';color:#fff;font-size:.85rem;line-height:1;
}
/* thin gold Islamic-motif rule under the header, echoing the
   shimmer-border used on the scholar slideshow */
#mobilePanel .offcanvas-header::after{
  content:'';position:absolute;left:1.25rem;right:1.25rem;bottom:-1px;height:1px;
  background:linear-gradient(90deg, transparent, var(--color-gold-light), transparent);
}
#mobilePanel .offcanvas-title{
  font-family:var(--font-serif);font-size:1.15rem;font-weight:700;color:#fff;
}
#mobilePanel .offcanvas-body{
  padding:.5rem 1rem 2rem;
  overflow-y:auto;flex:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%235CE1E6' stroke-opacity='0.08' stroke-width='1'%3E%3Cpath d='M42 0 L60 18 L84 18 L66 36 L84 42 L60 42 L42 60 L24 42 L0 42 L18 36 L0 18 L24 18 Z'/%3E%3Ccircle cx='42' cy='42' r='14'/%3E%3C/g%3E%3C/svg%3E");
  background-size:84px 84px;
}
#mobilePanel .mobile-link{
  display:flex;width:100%;align-items:center;justify-content:center;gap:.85rem;
  padding:.85rem .5rem;
  font-family:var(--font-serif);
  font-size:1.05rem;font-weight:700;
  color:#fff;border-bottom:1px solid rgba(255,255,255,.08);
  transition:color .2s ease, letter-spacing .2s ease;
}
#mobilePanel .mobile-link:hover,
#mobilePanel .mobile-link:active{
  color:var(--color-gold-light);letter-spacing:.02em;
}
#mobilePanel .mobile-link i{color:var(--color-sky-300);width:1.3rem;font-size:.95rem;}
#mobilePanel .mobile-kicker{
  color:rgba(223,248,249,.45);font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  padding:1rem .5rem .3rem;
}

body.nav-open{overflow:hidden;}
#pageWrapper{transition:filter .35s ease;}
#pageWrapper.is-blurred{filter:blur(6px);pointer-events:none;user-select:none;}
/* =============================================================
   7. SCROLL-REVEAL ANIMATIONS
   Vanilla replacement for the AOS library: same [data-aos]
   attributes already in the markup are read by script.js and
   toggled with an IntersectionObserver (a classic Codrops
   "reveal-on-scroll" blueprint), the motion curves borrowed
   from Animista's easing presets.
   ============================================================= */
[data-aos]{
  opacity:0;
  transition:opacity .7s var(--ease-out-cubic), transform .7s var(--ease-out-cubic), filter .7s var(--ease-out-cubic);
  will-change:opacity, transform;
}
[data-aos="fade-up"]{transform:translateY(36px);}
[data-aos="fade-right"]{transform:translateX(-48px);}
[data-aos="fade-left"]{transform:translateX(48px);}
[data-aos="zoom-in"]{transform:scale(.86);filter:blur(2px);}
[data-aos].aos-animate{opacity:1;transform:none;filter:blur(0);}

/* =============================================================
   8. VANTA.JS HOST LAYER
   Vanta.NET renders into #vanta-hero, sitting beneath the
   existing hand-drawn canvas + pattern layers in the hero for
   an extra layer of subtle animated depth.
   ============================================================= */
#vanta-hero{position:absolute;inset:0;z-index:0;pointer-events:none;}

/* =============================================================
   9. WHATSAPP FLOATING BUTTON
   ============================================================= */
.whatsapp-fab{
  position:fixed;right:18px;bottom:18px;z-index:45;
  width:56px;height:56px;border-radius:9999px;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.45);
  transition:transform .25s ease, box-shadow .25s ease;
}
.whatsapp-fab::after{
  content:'';position:absolute;inset:-4px;border-radius:9999px;
  border:2px solid rgba(37,211,102,.55);
  animation:pulse-ring 2.4s ease-out infinite;
}
.whatsapp-fab:hover{transform:scale(1.08);box-shadow:0 14px 32px -6px rgba(0,0,0,.5);}

/* =============================================================
   10. RESOURCES SECTION — downloadable guide cards
   Each card mimics the navy/gold cover design used on the
   actual PDF covers, for visual consistency between the site
   and the printable guides.
   ============================================================= */
.resource-card{
  background:#fff;border:1px solid var(--color-sky-100);
  border-radius:1.25rem;overflow:hidden;
  display:flex;flex-direction:column;
}
.resource-cover{
  background:linear-gradient(160deg,#0A2A43,#08213A);
  padding:2.2rem 1.5rem;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.resource-cover::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23C9A44C' stroke-opacity='0.16' stroke-width='1'%3E%3Cpath d='M42 0 L60 18 L84 18 L66 36 L84 42 L60 42 L42 60 L24 42 L0 42 L18 36 L0 18 L24 18 Z'/%3E%3Ccircle cx='42' cy='42' r='14'/%3E%3C/g%3E%3C/svg%3E");
  background-size:64px 64px;
}
.resource-cover-frame{
  position:relative;z-index:1;
  border:1px solid rgba(201,164,76,.65);border-radius:.6rem;
  padding:1.6rem 1.1rem;width:100%;max-width:230px;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center;
}
.resource-cover-logo{width:42px;height:42px;object-fit:contain;margin-bottom:.3rem;}
.resource-cover-kicker{
  font-family:var(--font-scholar);font-style:italic;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-gold-light);
}
.resource-cover-title{font-family:var(--font-serif);font-size:1.35rem;font-weight:700;color:#fff;margin-top:.2rem;}
.resource-cover-sub{font-size:.72rem;font-style:italic;color:var(--color-sky-300);}
.resource-info{padding:1.4rem 1.6rem 1.7rem;flex:1;display:flex;flex-direction:column;}

/* a few utilities introduced by this update's new markup */
.bg-gold-light\/90{background-color:rgba(232,208,140,.9)}
.max-w-5xl{max-width:64rem}
.w-fit{width:fit-content}
@media (min-width:1024px){
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* =============================================================
   11. INNER-PAGE BANNERS
   Each inner page gets its own short banner up top (title +
   breadcrumb) in a distinct color treatment so every page reads
   as its own place rather than a re-skinned copy of the last.
   ============================================================= */
.page-banner{
  position:relative;overflow:hidden;
  padding:5.5rem 1.5rem 3.5rem;
  text-align:center;
}
.page-banner-crumb{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:.75;margin-bottom:.6rem;
}
.page-banner-crumb a{text-decoration:underline;text-underline-offset:2px;}
.page-banner-title{
  font-family:var(--font-serif);font-weight:700;
  font-size:2.4rem;line-height:1.1;
}
.page-banner-sub{
  max-width:34rem;margin:.9rem auto 0;font-size:1rem;
}
@media (min-width:768px){
  .page-banner-title{font-size:3.1rem;}
}

.page-banner-navy{background:linear-gradient(160deg,#0A2A43,#08213A);color:#fff;}
.page-banner-navy .page-banner-crumb{color:var(--color-sky-300);}
.page-banner-navy .page-banner-sub{color:rgba(223,248,249,.75);}

.page-banner-sky{background:linear-gradient(180deg,#EFFCFC,#ffffff);color:var(--color-navy);}
.page-banner-sky .page-banner-crumb{color:var(--color-sky-700);}
.page-banner-sky .page-banner-sub{color:rgba(15,53,87,.65);}

.page-banner-gold{background:linear-gradient(160deg,#08213A,#0F3557 60%,#9C7A2E);color:#fff;}
.page-banner-gold .page-banner-crumb{color:var(--color-gold-light);}
.page-banner-gold .page-banner-sub{color:rgba(223,248,249,.8);}

.page-banner-cream{background:linear-gradient(180deg,#FBF8F1,#ffffff);color:var(--color-navy);}
.page-banner-cream .page-banner-crumb{color:var(--color-gold-deep);}
.page-banner-cream .page-banner-sub{color:rgba(15,53,87,.65);}

/* =============================================================
   12. SERVICES TABS (services.html) + home preview USP badge
   ============================================================= */
.service-tabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;
  margin-bottom:2.5rem;
}
.service-tab{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.3rem;border-radius:9999px;
  background:var(--color-sky-50);color:var(--color-navy);
  border:1.5px solid var(--color-sky-100);
  font-size:.9rem;font-weight:700;letter-spacing:.01em;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  position:relative;
}
.service-tab i{color:var(--color-sky-600);transition:color .2s ease, transform .2s ease;}
.service-tab:hover{
  transform:translateY(-2px) scale(1.03);
  border-color:var(--color-sky-300);
  box-shadow:0 10px 20px -10px rgba(15,53,87,.35);
}
.service-tab:hover i{transform:scale(1.15) rotate(-6deg);}
.service-tab.active{
  background:linear-gradient(135deg,#5CE1E6,#1E9299);color:#fff;border-color:transparent;
  box-shadow:0 10px 26px -8px rgba(92,225,230,.7);
  transform:translateY(-2px);
}
.service-tab.active i{color:#fff;}
.service-tab-badge{
  font-size:.62rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:var(--color-gold);color:#3a2d10;
  padding:.18rem .55rem;border-radius:9999px;margin-left:.15rem;
  animation:badge-pulse 2.2s ease-in-out infinite;
}
@keyframes badge-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.45);}
  50%{box-shadow:0 0 0 5px rgba(212,175,55,0);}
}

.service-panel{display:none;animation:fadein .45s ease;}
.service-panel.active{display:block;}

.usp-callout{
  display:flex;align-items:center;gap:.6rem;
  background:linear-gradient(135deg,#FFF7E6,#FBF0D6);
  border:1px solid var(--color-gold);color:var(--color-gold-deep);
  font-size:.85rem;font-weight:600;
  padding:.75rem 1rem;border-radius:.75rem;margin:.5rem 0 1rem;
}
.usp-callout i{color:var(--color-gold);}

.service-preview-usp{border-color:var(--color-gold-light) !important;background:linear-gradient(160deg,rgba(255,247,230,.7),rgba(239,252,252,.6)) !important;}
.usp-mini-badge{
  position:absolute;top:14px;right:14px;
  font-size:.6rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  background:var(--color-gold);color:#3a2d10;
  padding:.2rem .55rem;border-radius:9999px;
}