/* ============================================================
   Sunset Garden Elder Residencies — Global Stylesheet
   Colors: Purple #7A2F7F | Sunset Orange #F39C5E | Cream #FFF8F4
   Fonts: Cormorant Garamond (headings) | Poppins (body)
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Poppins:wght@300;400;500;600&display=swap');

   /* ── Design Tokens ─────────────────────────────────────────── */
   :root {
     --purple:        #7A2F7F;
     --purple-dark:   #5e1f62;
     --purple-light:  #9b4ea1;
     --orange:        #F39C5E;
     --orange-dark:   #e07f3a;
     --cream:         #FFF8F4;
     --lavender:      #F7F1FA;
     --text:          #444444;
     --text-light:    #777;
     --white:         #ffffff;
     --shadow-sm:     0 4px 20px rgba(122,47,127,.08);
     --shadow-md:     0 8px 40px rgba(122,47,127,.14);
     --shadow-lg:     0 16px 60px rgba(122,47,127,.20);
     --radius:        16px;
     --radius-sm:     8px;
     --transition:    .35s cubic-bezier(.4,0,.2,1);
   }
   
   /* ── Reset & Base ───────────────────────────────────────────── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   
   html { scroll-behavior: smooth; font-size: 16px; }
   
   body {
     font-family: 'Poppins', sans-serif;
     color: var(--text);
     background: var(--white);
     overflow-x: hidden;
     line-height: 1.7;
   }
   
   h1, h2, h3, h4, h5, h6 {
     font-family: 'Cormorant Garamond', serif;
     line-height: 1.2;
     color: var(--purple-dark);
   }
   
   img { max-width: 100%; display: block; }
   
   a { text-decoration: none; transition: color var(--transition); }
   
   /* ── Utility Classes ────────────────────────────────────────── */
   .section-pad    { padding: 90px 0; }
   .section-pad-sm { padding: 60px 0; }
   
   .section-eyebrow {
     font-family: 'Poppins', sans-serif;
     font-size: .72rem;
     font-weight: 600;
     letter-spacing: .22em;
     text-transform: uppercase;
     color: var(--orange);
     margin-bottom: .5rem;
     display: block;
   }
   
   .section-title {
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 600;
     margin-bottom: 1rem;
   }
   
   .section-subtitle {
     font-size: 1rem;
     color: var(--text-light);
     max-width: 560px;
     margin: 0 auto 2.5rem;
   }
   
   .bg-cream    { background: var(--cream); }
   .bg-lavender { background: var(--lavender); }
   
   .divider {
     width: 60px; height: 3px;
     background: linear-gradient(90deg, var(--orange), var(--purple));
     border-radius: 2px;
     margin: .8rem auto 1.5rem;
   }
   
   .divider-left { margin-left: 0; }
   
   /* ── Buttons ────────────────────────────────────────────────── */
   .btn-primary-custom {
     display: inline-block;
     padding: .75rem 2rem;
     background: var(--orange);
     color: var(--white);
     border-radius: 50px;
     font-family: 'Poppins', sans-serif;
     font-size: .88rem;
     font-weight: 500;
     letter-spacing: .04em;
     border: none;
     cursor: pointer;
     transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
     box-shadow: 0 4px 20px rgba(243,156,94,.3);
   }
   .btn-primary-custom:hover {
     background: var(--purple);
     transform: translateY(-2px);
     box-shadow: 0 8px 30px rgba(122,47,127,.3);
     color: var(--white);
   }
   
   .btn-outline-custom {
     display: inline-block;
     padding: .72rem 1.9rem;
     border: 2px solid var(--purple);
     color: var(--purple);
     border-radius: 50px;
     font-family: 'Poppins', sans-serif;
     font-size: .88rem;
     font-weight: 500;
     letter-spacing: .04em;
     transition: all var(--transition);
   }
   .btn-outline-custom:hover {
     background: var(--purple);
     color: var(--white);
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
   }
   
   /* ══════════════════════════════════════════════════════════════
      NAVBAR  —  always white/scrolled, hamburger via JS .active
   ══════════════════════════════════════════════════════════════ */
   #mainNav {
     position: sticky;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     height: 68px;
     display: flex;
     align-items: center;
     background: rgba(255,255,255,.92);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     box-shadow: 0 2px 30px rgba(122,47,127,.12);
     border-bottom: 1px solid rgba(122,47,127,.08);
     padding: 0 24px;
   }
   
   #mainNav .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
   }
   
   /* ── Brand ─────────────────────────────────────────────────── */
   .navbar-brand {
     display: flex;
     align-items: center;
     gap: .75rem;
     text-decoration: none;
   }
   
   .brand-logo {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid var(--orange);
   }
   
   .brand-name {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--purple-dark);
     line-height: 1.2;
   }
   .brand-name span { color: var(--orange); }
   
   /* ── Desktop nav links ─────────────────────────────────────── */
   .desktop-nav {
     display: flex;
     align-items: center;
     gap: 2px;
   }
   
   .desktop-nav .nav-link {
     font-family: 'Poppins', sans-serif;
     font-size: .82rem;
     font-weight: 500;
     letter-spacing: .04em;
     color: var(--text);
     padding: .45rem .75rem;
     border-radius: 6px;
     position: relative;
     transition: color var(--transition), background var(--transition);
     white-space: nowrap;
   }
   
   .desktop-nav .nav-link::after {
     content: '';
     position: absolute;
     bottom: 2px;
     left: .75rem;
     right: .75rem;
     height: 2px;
     background: var(--orange);
     border-radius: 2px;
     transform: scaleX(0);
     transform-origin: center;
     transition: transform var(--transition);
   }
   
   .desktop-nav .nav-link:hover,
   .desktop-nav .nav-link.active {
     color: var(--orange);
   }
   
   .desktop-nav .nav-link:hover::after,
   .desktop-nav .nav-link.active::after {
     transform: scaleX(1);
   }
   
   /* Contact Us button in desktop nav */
   .desktop-nav .nav-link.btn-primary-custom {
     color: var(--white) !important;
     padding: .5rem 1.4rem;
     margin-left: .5rem;
   }
   .desktop-nav .nav-link.btn-primary-custom::after { display: none; }
   .desktop-nav .nav-link.btn-primary-custom:hover  { color: var(--white) !important; }
   
   /* ── Hamburger ─────────────────────────────────────────────── */
   .hamburger {
     display: none;           /* hidden on desktop */
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 5px;
     width: 44px;
     height: 44px;
     padding: 6px;
     background: transparent;
     border: 2px solid var(--orange);
     border-radius: var(--radius-sm);
     cursor: pointer;
     flex-shrink: 0;
     transition: border-color .3s;
     z-index: 1001;
   }
   
   .hamburger span {
     display: block;
     width: 22px;
     height: 2.5px;
     background: var(--orange);
     border-radius: 2px;
     transition: transform .35s ease, opacity .35s ease;
     transform-origin: center;
   }
   
   /* Animate to X when open */
   .hamburger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
   .hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
   .hamburger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
   
   /* ── Mobile dropdown menu ──────────────────────────────────── */
   .mobile-nav-menu {
     display: none;                 /* hidden until .active */
     flex-direction: column;
     position: fixed;
     top: 68px;
     left: 0;
     right: 0;
     background: rgba(255,255,255,.97);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-bottom: 1px solid rgba(122,47,127,.1);
     box-shadow: var(--shadow-md);
     z-index: 999;
     padding: 8px 0 20px;
     transform: translateY(-6px);
     opacity: 0;
     pointer-events: none;
     transition: opacity .3s ease, transform .3s ease;
   }
   
   .mobile-nav-menu.active {
     display: flex;
     transform: translateY(0);
     opacity: 1;
     pointer-events: all;
   }
   
   .mobile-nav-menu .nav-link {
     font-family: 'Poppins', sans-serif;
     font-size: .92rem;
     font-weight: 500;
     color: var(--text);
     padding: 13px 28px;
     border-bottom: 1px solid rgba(122,47,127,.06);
     transition: color .2s, background .2s, padding-left .2s;
     display: block;
   }
   
   .mobile-nav-menu .nav-link:hover {
     color: var(--orange);
     background: var(--lavender);
     padding-left: 36px;
   }
   
   .mobile-nav-menu .nav-link.active { color: var(--orange); }
   
   /* Contact Us inside mobile menu */
   .mobile-nav-menu .nav-link.btn-primary-custom {
     margin: 12px 24px 0;
     text-align: center;
     border-bottom: none;
     border-radius: 50px;
     color: var(--white) !important;
     padding: .65rem 1.5rem;
   }
   .mobile-nav-menu .nav-link.btn-primary-custom:hover {
     padding-left: 1.5rem;
     background: var(--purple);
   }
   
   /* ── Page Hero (inner pages) ────────────────────────────────── */
   .page-hero {
     min-height: 42vh;
     display: flex; align-items: center;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, var(--purple-dark) 0%, var(--purple) 60%, #c46dcb 100%);
   }
   
   .page-hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background: url('../img/i1.jpg') center/cover no-repeat;
     opacity: .12;
   }
   
   .page-hero-content {
    position: relative;
    z-index: 1;
    padding: 80px 0 60px;
    text-align: center;
  }
  
  .page-hero-content h1 {
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 600;
    color: var(--white);
    margin-bottom: .5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 6px 20px rgba(0,0,0,.75), 0 12px 40px rgba(0,0,0,.5);
  }
  
  .page-hero-content p {
    color: rgba(255,255,255,.75);
    font-size: 1rem;
    max-width: 500px; margin: 0 auto;
    text-shadow: 0 2px 6px rgba(0,0,0,.8), 0 4px 16px rgba(0,0,0,.6);
  }
   
   .breadcrumb { justify-content: center; margin-top: 1rem; }
   .breadcrumb-item a { color: var(--orange); }
   .breadcrumb-item.active { color: rgba(255,255,255,.65); }
   .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4); }
   
   /* ── Cards ──────────────────────────────────────────────────── */
   .feature-card {
     background: var(--white);
     border-radius: var(--radius);
     padding: 2rem 1.75rem;
     box-shadow: var(--shadow-sm);
     transition: transform var(--transition), box-shadow var(--transition);
     height: 100%;
     border: 1px solid rgba(122,47,127,.06);
     position: relative;
     overflow: hidden;
   }
   
   .feature-card::before {
     content: '';
     position: absolute;
     top: 0; left: 0; right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--orange), var(--purple));
     transform: scaleX(0);
     transition: transform var(--transition);
   }
   
   .feature-card:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow-md);
   }
   .feature-card:hover::before { transform: scaleX(1); }
   
   .card-icon {
     width: 64px; height: 64px;
     border-radius: var(--radius-sm);
     background: var(--lavender);
     display: flex; align-items: center; justify-content: center;
     font-size: 1.6rem;
     color: var(--purple);
     margin-bottom: 1.2rem;
     transition: all var(--transition);
   }
   .feature-card:hover .card-icon {
     background: var(--orange);
     color: var(--white);
   }
   
   .feature-card h4 { font-size: 1.25rem; margin-bottom: .5rem; }
   .feature-card p  { font-size: .88rem; color: var(--text-light); line-height: 1.75; margin: 0; }
   
   /* ── About Split Layout ─────────────────────────────────────── */
   .about-image-wrap { position: relative; }
   .about-image-wrap img {
     border-radius: var(--radius);
     object-fit: cover;
     width: 100%;
     height: 480px;
     box-shadow: var(--shadow-lg);
   }
   .about-badge {
     position: absolute;
     bottom: 2rem; right: -1.5rem;
     background: var(--white);
     border-radius: var(--radius);
     padding: 1.2rem 1.5rem;
     box-shadow: var(--shadow-md);
     text-align: center;
     min-width: 130px;
   }
   .about-badge .badge-num {
     font-family: 'Cormorant Garamond', serif;
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--purple);
     line-height: 1;
   }
   .about-badge .badge-label {
     font-size: .72rem;
     font-weight: 600;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--orange);
   }
   
   /* ── Testimonial Slider ─────────────────────────────────────── */
   #testimonialSlider { position: relative; overflow: hidden; }
   
   .testimonial-track {
     display: flex;
     transition: transform .6s cubic-bezier(.4,0,.2,1);
   }
   
   .testimonial-card {
     min-width: 100%;
     padding: 2.5rem;
     background: var(--white);
     border-radius: var(--radius);
     box-shadow: var(--shadow-sm);
     border: 1px solid rgba(122,47,127,.06);
   }
   
   .testimonial-card blockquote {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.3rem;
     font-style: italic;
     color: var(--text);
     line-height: 1.7;
     margin-bottom: 1.5rem;
   }
   
   .testimonial-card blockquote::before { content: '\201C'; color: var(--orange); font-size: 3rem; line-height: 0; vertical-align: -.5rem; margin-right: .2rem; }
   
   .t-author { display: flex; align-items: center; gap: 1rem; }
   .t-avatar  { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--orange); }
   .t-name    { font-weight: 600; font-size: .92rem; color: var(--purple-dark); }
   .t-role    { font-size: .78rem; color: var(--text-light); }
   .t-stars   { color: var(--orange); font-size: .85rem; margin-top: .15rem; }
   
   /* ── FAQ Accordion ──────────────────────────────────────────── */
   .faq-item {
     border: 1px solid rgba(122,47,127,.1);
     border-radius: var(--radius-sm);
     margin-bottom: .75rem;
     overflow: hidden;
     transition: box-shadow var(--transition);
   }
   .faq-item:hover { box-shadow: var(--shadow-sm); }
   
   .faq-question {
     width: 100%;
     text-align: left;
     padding: 1.2rem 1.5rem;
     background: var(--white);
     border: none;
     font-family: 'Poppins', sans-serif;
     font-size: .92rem;
     font-weight: 500;
     color: var(--purple-dark);
     cursor: pointer;
     display: flex; justify-content: space-between; align-items: center;
     gap: 1rem;
     transition: background var(--transition);
   }
   .faq-question:hover, .faq-item.open .faq-question { background: var(--lavender); }
   .faq-icon {
     width: 24px; height: 24px;
     border-radius: 50%;
     background: var(--orange);
     color: var(--white);
     display: flex; align-items: center; justify-content: center;
     font-size: .9rem;
     flex-shrink: 0;
     transition: transform var(--transition);
   }
   .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--purple); }
   
   .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height .4s ease, padding .3s ease;
     font-size: .88rem;
     color: var(--text-light);
     line-height: 1.8;
     background: var(--lavender);
     padding: 0 1.5rem;
   }
   .faq-item.open .faq-answer { max-height: 200px; padding: 1rem 1.5rem; }
   
   /* ── Gallery Grid ───────────────────────────────────────────── */
   .gallery-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1rem;
   }
   
   .gallery-item {
     border-radius: var(--radius-sm);
     overflow: hidden;
     cursor: pointer;
     position: relative;
   }
   
   .gallery-item img {
     width: 100%;
     height: 220px;
     object-fit: cover;
     transition: transform .5s ease;
   }
   
   .gallery-item:hover img { transform: scale(1.07); }
   
   .gallery-item-overlay {
     position: absolute;
     inset: 0;
     background: rgba(122,47,127,.6);
     display: flex; align-items: center; justify-content: center;
     opacity: 0;
     transition: opacity var(--transition);
   }
   .gallery-item:hover .gallery-item-overlay { opacity: 1; }
   .gallery-item-overlay i { color: var(--white); font-size: 2rem; }
   
   /* Masonry gallery (Gallery page) */
   .masonry-grid { columns: 4; column-gap: 1rem; }
   .masonry-item {
     break-inside: avoid;
     margin-bottom: 1rem;
     border-radius: var(--radius-sm);
     overflow: hidden;
     cursor: pointer;
     position: relative;
   }
   .masonry-item img { width: 100%; display: block; transition: transform .5s ease; }
   .masonry-item:hover img { transform: scale(1.05); }
   .masonry-item-overlay {
     position: absolute;
     inset: 0;
     background: rgba(122,47,127,.55);
     display: flex; align-items: center; justify-content: center;
     opacity: 0;
     transition: opacity var(--transition);
   }
   .masonry-item:hover .masonry-item-overlay { opacity: 1; }
   
   /* ── Lightbox ───────────────────────────────────────────────── */
   .lightbox-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0,0,0,.92);
     z-index: 9999;
     display: flex; align-items: center; justify-content: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity .3s ease;
   }
   .lightbox-overlay.active { opacity: 1; pointer-events: all; }
   .lightbox-img {
     max-width: 88vw;
     max-height: 85vh;
     border-radius: var(--radius);
     box-shadow: 0 20px 80px rgba(0,0,0,.5);
     transition: transform .3s ease;
   }
   .lightbox-close {
     position: absolute;
     top: 1.5rem; right: 2rem;
     font-size: 2rem;
     color: var(--white);
     cursor: pointer;
     background: none; border: none;
     transition: color var(--transition);
   }
   .lightbox-close:hover { color: var(--orange); }
   .lightbox-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255,255,255,.15);
     border: 1px solid rgba(255,255,255,.3);
     color: var(--white);
     width: 50px; height: 50px;
     border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
     font-size: 1.2rem;
     cursor: pointer;
     transition: all var(--transition);
   }
   .lightbox-arrow:hover { background: var(--orange); border-color: var(--orange); }
   .lightbox-arrow.prev { left: 1.5rem; }
   .lightbox-arrow.next { right: 1.5rem; }
   
   /* ── Counters ───────────────────────────────────────────────── */
   .counter-block { text-align: center; padding: 2rem 1rem; }
   .counter-num {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(2.5rem, 5vw, 4rem);
     font-weight: 700;
     color: var(--orange);
     line-height: 1;
   }
   .counter-label {
     font-size: .82rem;
     font-weight: 600;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--purple-dark);
     margin-top: .3rem;
   }
   
   /* ── Timeline ───────────────────────────────────────────────── */
   .timeline { position: relative; padding-left: 2.5rem; }
   .timeline::before {
     content: '';
     position: absolute;
     left: .75rem; top: 0; bottom: 0;
     width: 2px;
     background: linear-gradient(to bottom, var(--orange), var(--purple));
   }
   .timeline-item { position: relative; margin-bottom: 2.5rem; }
   .timeline-dot {
     position: absolute;
     left: -2.2rem; top: .3rem;
     width: 16px; height: 16px;
     border-radius: 50%;
     background: var(--orange);
     border: 3px solid var(--white);
     box-shadow: 0 0 0 2px var(--orange);
   }
   .timeline-time  { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin-bottom: .2rem; }
   .timeline-title { font-size: 1.1rem; font-weight: 600; color: var(--purple-dark); margin-bottom: .3rem; }
   .timeline-desc  { font-size: .88rem; color: var(--text-light); line-height: 1.7; }
   
   /* ── Contact Form ───────────────────────────────────────────── */
   .contact-form-wrap {
     background: var(--white);
     border-radius: var(--radius);
     padding: 2.5rem;
     box-shadow: var(--shadow-md);
   }
   
   .form-label { font-size: .82rem; font-weight: 500; color: var(--purple-dark); margin-bottom: .35rem; }
   
   .form-control, .form-select {
     border: 1.5px solid rgba(122,47,127,.15);
     border-radius: var(--radius-sm);
     padding: .75rem 1rem;
     font-size: .88rem;
     font-family: 'Poppins', sans-serif;
     transition: border-color var(--transition), box-shadow var(--transition);
     background: var(--cream);
   }
   .form-control:focus, .form-select:focus {
     border-color: var(--purple);
     box-shadow: 0 0 0 3px rgba(122,47,127,.1);
     background: var(--white);
     outline: none;
   }
   
   .contact-info-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
   .contact-icon {
     width: 48px; height: 48px;
     border-radius: var(--radius-sm);
     background: var(--lavender);
     display: flex; align-items: center; justify-content: center;
     font-size: 1.2rem;
     color: var(--purple);
     flex-shrink: 0;
     transition: all var(--transition);
   }
   .contact-info-item:hover .contact-icon { background: var(--orange); color: var(--white); }
   
   /* ── Map Placeholder ────────────────────────────────────────── */
   .map-placeholder {
     background: linear-gradient(135deg, var(--lavender), #ede0f0);
     border-radius: var(--radius);
     height: 280px;
     display: flex; align-items: center; justify-content: center;
     border: 2px dashed rgba(122,47,127,.2);
     margin-top: 2rem;
   }
   .map-placeholder p { color: var(--purple); font-size: .9rem; }
   
   /* ── CTA Banner ─────────────────────────────────────────────── */
   .cta-section {
     background: linear-gradient(135deg, var(--purple-dark) 0%, var(--purple) 50%, #a44aab 100%);
     position: relative;
     overflow: hidden;
   }
   .cta-section::before {
     content: '';
     position: absolute;
     top: -60px; right: -80px;
     width: 300px; height: 300px;
     background: var(--orange);
     opacity: .12;
     border-radius: 50%;
   }
   .cta-section::after {
     content: '';
     position: absolute;
     bottom: -80px; left: -60px;
     width: 250px; height: 250px;
     background: var(--orange);
     opacity: .08;
     border-radius: 50%;
   }
   
   /* ── Hero Slider ────────────────────────────────────────────── */
   #heroSlider {
     position: relative;
     height: 100vh;
     min-height: 600px;
     overflow: hidden;
   }
   
   .hero-slide {
     position: absolute;
     inset: 0;
     opacity: 0;
     transition: opacity 1.2s ease;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
   }
   
   .hero-slide.active { opacity: 1; z-index: 1; }
   .hero-slide.prev   { opacity: 0; z-index: 0; }
   
   .hero-slide::before {
     content: '';
     position: absolute;
     inset: -6%;
     background: inherit;
     background-size: cover;
     background-position: center;
     animation: kenBurns 12s ease-in-out infinite alternate;
   }
   
   @keyframes kenBurns {
     0%   { transform: scale(1) translate(0, 0); }
     100% { transform: scale(1.08) translate(-1%, 1%); }
   }
   
   .hero-slide.active::before      { animation-play-state: running; }
   .hero-slide:not(.active)::before { animation-play-state: paused; }
   
   /* 
   .hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(160deg, rgba(44,10,48,.62) 0%, rgba(122,47,127,.4) 50%, rgba(243,156,94,.2) 100%);
     z-index: 2;
   }*/
   
   .hero-content {
     position: absolute;
     inset: 0;
     z-index: 3;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 0 1rem;
   }
   
   .hero-eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all .8s ease .3s;
    text-shadow: 0 2px 6px rgba(0,0,0,.85), 0 4px 18px rgba(0,0,0,.7);
  }
   
  .hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 600;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all .9s ease .5s;
    text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 6px 20px rgba(0,0,0,.75), 0 12px 40px rgba(0,0,0,.5);
  }
   
  .hero-subtitle {
    font-size: clamp(.9rem, 2vw, 1.1rem);
    color: rgba(255,255,255,.85);
    font-weight: 300;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto; margin-right: auto;
    opacity: 0;
    transform: translateY(20px);
    transition: all .8s ease .7s;
    text-shadow: 0 2px 6px rgba(0,0,0,.8), 0 4px 16px rgba(0,0,0,.6);
  }
   
   .hero-cta {
     opacity: 0;
     transform: translateY(20px);
     transition: all .8s ease .9s;
   }
   
   #heroSlider.animated .hero-eyebrow,
   #heroSlider.animated .hero-title,
   #heroSlider.animated .hero-subtitle,
   #heroSlider.animated .hero-cta {
     opacity: 1;
     transform: translateY(0);
   }
   
   .hero-controls {
     position: absolute;
     bottom: 2.5rem;
     left: 50%;
     transform: translateX(-50%);
     z-index: 4;
     display: flex;
     align-items: center;
     gap: .5rem;
   }
   
   .hero-dot {
     width: 8px; height: 8px;
     border-radius: 50%;
     background: rgba(255,255,255,.4);
     cursor: pointer;
     transition: all var(--transition);
     border: none;
   }
   .hero-dot.active {
     background: var(--orange);
     width: 24px;
     border-radius: 4px;
   }
   
   .hero-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 4;
     width: 50px; height: 50px;
     border-radius: 50%;
     background: rgba(255,255,255,.15);
     backdrop-filter: blur(8px);
     border: 1px solid rgba(255,255,255,.3);
     color: var(--white);
     display: flex; align-items: center; justify-content: center;
     cursor: pointer;
     font-size: 1.2rem;
     transition: all var(--transition);
   }
   .hero-arrow:hover { background: var(--orange); border-color: var(--orange); }
   .hero-arrow.prev { left: 1.5rem; }
   .hero-arrow.next { right: 1.5rem; }
   
   /* ── Scroll Animations ──────────────────────────────────────── */
   [data-aos] { opacity: 0; transition-property: opacity, transform; }
   
   [data-aos="fade-up"]    { transform: translateY(40px); }
   [data-aos="fade-down"]  { transform: translateY(-40px); }
   [data-aos="fade-left"]  { transform: translateX(40px); }
   [data-aos="fade-right"] { transform: translateX(-40px); }
   [data-aos="zoom-in"]    { transform: scale(.9); }
   
   [data-aos].aos-animate  { opacity: 1; transform: translate(0) scale(1); }
   
   /* ── Floating Decoration ────────────────────────────────────── */
   .float-decor {
     position: absolute;
     border-radius: 50%;
     opacity: .06;
     pointer-events: none;
     animation: floatDecor 8s ease-in-out infinite;
   }
   @keyframes floatDecor {
     0%, 100% { transform: translateY(0) rotate(0deg); }
     50%       { transform: translateY(-20px) rotate(10deg); }
   }
   
   /* ── Staff Cards ────────────────────────────────────────────── */
   .staff-card {
     text-align: center;
     background: var(--white);
     border-radius: var(--radius);
     padding: 2rem 1.5rem 1.5rem;
     box-shadow: var(--shadow-sm);
     transition: transform var(--transition), box-shadow var(--transition);
     border: 1px solid rgba(122,47,127,.06);
   }
   .staff-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
   .staff-avatar  { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid var(--orange); margin: 0 auto 1rem; }
   .staff-name    { font-size: 1.15rem; font-weight: 600; color: var(--purple-dark); margin-bottom: .2rem; }
   .staff-role    { font-size: .8rem; color: var(--orange); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
   
   /* ── Service Detail Cards ───────────────────────────────────── */
   .service-card {
     background: var(--white);
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: var(--shadow-sm);
     transition: transform var(--transition), box-shadow var(--transition);
     border: 1px solid rgba(122,47,127,.06);
     height: 100%;
   }
   .service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
   .service-card-body  { padding: 1.75rem; }
   .service-card-icon  { font-size: 2.5rem; color: var(--purple); margin-bottom: 1rem; display: block; transition: color var(--transition); }
   .service-card:hover .service-card-icon { color: var(--orange); }
   .service-card h4    { font-size: 1.2rem; margin-bottom: .5rem; }
   .service-card p     { font-size: .88rem; color: var(--text-light); line-height: 1.75; }
   
   /* ── Footer ─────────────────────────────────────────────────── */
   footer {
     background: linear-gradient(135deg, #2d0e30 0%, #4a1a4f 60%, #7A2F7F 100%);
     color: rgba(255,255,255,.8);
     padding: 80px 0 0;
   }
   
   .footer-brand-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--orange); margin-bottom: 1rem; }
   
   .footer-brand-name { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; color: var(--white); margin-bottom: .5rem; }
   .footer-brand-name span { color: var(--orange); }
   
   footer h5 { font-family: 'Poppins', sans-serif; font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 1.2rem; }
   footer p  { font-size: .88rem; line-height: 1.8; color: rgba(255,255,255,.7); }
   
   .footer-links { list-style: none; padding: 0; }
   .footer-links li { margin-bottom: .5rem; }
   .footer-links a {
     color: rgba(255,255,255,.7);
     font-size: .88rem;
     transition: color var(--transition), padding-left var(--transition);
     display: inline-flex; align-items: center; gap: .4rem;
   }
   .footer-links a::before { content: '›'; color: var(--orange); font-size: 1.1rem; transition: transform var(--transition); }
   .footer-links a:hover   { color: var(--orange); padding-left: 4px; }
   
   .footer-contact-item { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .9rem; font-size: .88rem; color: rgba(255,255,255,.7); }
   .footer-contact-item i { color: var(--orange); font-size: 1rem; margin-top: 3px; flex-shrink: 0; }
   
   .social-links { display: flex; gap: .7rem; margin-top: .5rem; }
   .social-link {
     width: 40px; height: 40px;
     border-radius: 50%;
     border: 1px solid rgba(255,255,255,.2);
     display: flex; align-items: center; justify-content: center;
     color: rgba(255,255,255,.8);
     font-size: 1rem;
     transition: all var(--transition);
   }
   .social-link:hover { background: var(--orange); border-color: var(--orange); color: var(--white); transform: translateY(-3px); }
   
   .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 1.2rem 0; margin-top: 3rem; text-align: center; font-size: .8rem; color: rgba(255,255,255,.45); }
   .footer-bottom span {color: var(--orange);}
   .footer-bottom span a {color: var(--orange);}
   
   
   /* ── Gallery touch fix (mobile: always show overlay) ────────── */
   @media (hover: none) {
     .gallery-item-overlay,
     .masonry-item-overlay { opacity: 1; background: rgba(122,47,127,.45); }
     .gallery-item img,
     .masonry-item img { transform: none !important; }
   }
   
   /* ══════════════════════════════════════════════════════════════
      RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
   
   /* ── Desktop ≥ 992px — show desktop nav, hide hamburger ─────── */
   @media (min-width: 992px) {
     .hamburger        { display: none !important; }
     .mobile-nav-menu  { display: none !important; }
     .desktop-nav      { display: flex; }
   }
   
   /* ── Tablet / Mobile < 992px — show hamburger, hide desktop nav */
   @media (max-width: 991px) {
     .section-pad { padding: 70px 0; }
   
     .desktop-nav      { display: none !important; }
     .hamburger        { display: flex !important; }
   
     .gallery-grid  { grid-template-columns: repeat(2, 1fr); }
     .masonry-grid  { columns: 2; }
     .about-badge   { right: .5rem; bottom: 1rem; }
   
     #testimonialSlider .t-prev { left: -1rem; }
     #testimonialSlider .t-next { right: -1rem; }
   }
   
   /* ── Mobile ≤ 767px ─────────────────────────────────────────── */
   @media (max-width: 767px) {
     .section-pad { padding: 55px 0; }
   
     /* ── Hero slider: fill width/height correctly, crop toward top so
        subjects (people / building) stay in frame on narrow screens ── */
     #heroSlider {
       height: 50svh;
       min-height: 60svh;
     }
   
     .hero-slide {
       background-size: cover;
       background-position: center top;
     }
   
     .hero-content { padding: 0 1.25rem; }
   
     .hero-eyebrow {
       font-size: .6rem;
       letter-spacing: .18em;
       margin-bottom: .7rem;
     }
   
     .hero-title {
       font-size: clamp(1.7rem, 8vw, 2.6rem);
       margin-bottom: .75rem;
     }
   
     .hero-subtitle {
       font-size: .82rem;
       margin-bottom: 1.5rem;
       max-width: 320px;
     }
   
     .hero-cta {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: .7rem;
     }
     .hero-cta .btn-primary-custom,
     .hero-cta .btn-outline-custom {
       margin: 0 !important;
       width: fit-content;
       padding: .62rem 1.6rem;
       font-size: .8rem;
     }
   
     .hero-arrow      { width: 34px; height: 34px; font-size: .9rem; }
     .hero-arrow.prev { left: .5rem; }
     .hero-arrow.next { right: .5rem; }
   
     .hero-controls   { bottom: 1.3rem; }
     .hero-dot        { width: 6px; height: 6px; }
     .hero-dot.active { width: 18px; }
   
     .section-title { font-size: clamp(1.7rem, 6vw, 2.4rem); }
   
     .about-image-wrap img { height: 300px; }
     .about-badge { display: none; }
   
     .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
     .gallery-item img { height: 150px; }
     .masonry-grid { columns: 2; }
   
     .testimonial-card { padding: 1.5rem 1.25rem; }
     .testimonial-card blockquote { font-size: 1.1rem; }
     #testimonialSlider .t-prev,
     #testimonialSlider .t-next { display: none; }
   
     .faq-question { font-size: .85rem; padding: 1rem 1.2rem; }
     .faq-item.open .faq-answer { max-height: 300px; }
   
     .contact-form-wrap { padding: 1.5rem 1.25rem; }
     .timeline { padding-left: 2rem; }
   
     .counter-block { padding: 1.5rem .75rem; }
     .counter-num   { font-size: clamp(2rem, 7vw, 3rem); }
   
     .cta-section .btn-primary-custom,
     .cta-section .btn-outline-custom {
       display: block;
       width: 100%;
       max-width: 280px;
       margin: 0 auto .75rem !important;
       text-align: center;
     }
   
     footer { padding: 50px 0 0; }
     .footer-brand-logo { width: 44px; height: 44px; }
   
     .lightbox-arrow { width: 38px; height: 38px; font-size: 1rem; }
     .lightbox-arrow.prev { left: .5rem; }
     .lightbox-arrow.next { right: .5rem; }
     .lightbox-img { max-width: 95vw; max-height: 80vh; }
   }
   
   /* ── Small Mobile ≤ 575px ───────────────────────────────────── */
   @media (max-width: 575px) {
     .hero-title    { font-size: clamp(1.5rem, 7.5vw, 2.2rem); }
     .hero-eyebrow  { font-size: .56rem; letter-spacing: .14em; }
     .hero-subtitle { font-size: .78rem; max-width: 280px; }
   }
   
   /* ── Small Mobile ≤ 480px ───────────────────────────────────── */
   @media (max-width: 480px) {
     .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
     .gallery-item img { height: 130px; }
     .masonry-grid { columns: 1; }
     .hero-controls { bottom: 1.5rem; }
     .page-hero-content { padding: 80px 0 50px; }
     .page-hero-content h1 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
   
     .brand-logo { width: 36px; height: 36px; }
     .brand-name { font-size: .95rem; }
   }
   
   /* ── Reduced motion ─────────────────────────────────────────── */
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
   }

/* ══════════════════════════════════════════════════════════════
   TESTIMONIAL — VIEW MORE BUTTON & FULL-VIEW MODAL (NEW)
══════════════════════════════════════════════════════════════ */
.t-text blockquote {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.view-more-btn {
  display: inline-block;
  background: none;
  border: none;
  color: var(--orange);
  font-family: 'Poppins', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  padding: 0 0 1.2rem;
  transition: color var(--transition);
}
.view-more-btn:hover { color: var(--purple); text-decoration: underline; }

.testimonial-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(44,10,48,.75);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.testimonial-modal-overlay.active { opacity: 1; pointer-events: all; }

.testimonial-modal-box {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2.5rem;
  max-width: 650px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  box-shadow: var(--shadow-lg);
  transform: translateY(20px);
  transition: transform .3s ease;
}
.testimonial-modal-overlay.active .testimonial-modal-box { transform: translateY(0); }

.testimonial-modal-box blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-style: italic;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  margin-top: .5rem;
  white-space: pre-line;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.testimonial-modal-box blockquote::before { content: '\201C'; color: var(--orange); font-size: 3rem; line-height: 0; vertical-align: -.5rem; margin-right: .2rem; }

.testimonial-modal-box .t-author {
  flex-wrap: wrap;
}

.testimonial-modal-close {
  position: absolute;
  top: .75rem; right: .75rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: var(--lavender);
  border-radius: 50%;
  border: none;
  color: var(--purple);
  cursor: pointer;
  line-height: 1;
  z-index: 2;
  transition: color var(--transition), background var(--transition);
}
.testimonial-modal-close:hover { color: var(--white); background: var(--orange); }

/* ── Tablet / Mobile ≤ 767px ─────────────────────────────────── */
@media (max-width: 767px) {
  .testimonial-modal-overlay {
    padding: 0;
    align-items: flex-end;
    justify-content: center;
  }
 
  .testimonial-modal-box {
    max-width: 80%;
    width: 80%;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    padding: 2.25rem 1.5rem 1.75rem;
    margin: 0 auto;
    transform: translateY(100%);
  }
  .testimonial-modal-overlay.active .testimonial-modal-box { transform: translateY(0); }
 
  .testimonial-modal-box blockquote {
    font-size: 1.05rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
  }
  .testimonial-modal-box blockquote::before { font-size: 2.4rem; }
 
  .testimonial-modal-box .t-author { gap: .75rem; }
  .testimonial-modal-box .t-avatar { width: 44px; height: 44px; flex-shrink: 0; }
  .testimonial-modal-box .t-name  { font-size: .88rem; }
  .testimonial-modal-box .t-role  { font-size: .74rem; line-height: 1.4; }
  .testimonial-modal-box .t-stars { font-size: .78rem; }
 
  .testimonial-modal-close {
    top: .6rem; right: .6rem;
    width: 32px; height: 32px;
    font-size: 1.4rem;
  }
}
 
/* ── Small Mobile ≤ 480px ────────────────────────────────────── */
@media (max-width: 480px) {
  .testimonial-modal-box {
    max-width: 80%;
    width: 80%;
    margin: 0 auto;
    padding: 2rem 1.1rem 1.5rem;
    max-height: 90vh;
  }
  .testimonial-modal-box blockquote { font-size: .96rem; }
  .testimonial-modal-box blockquote::before { font-size: 2rem; }
  .testimonial-modal-box .t-avatar { width: 40px; height: 40px; }
}