/* ══════════════════════════════════════════════════════════════
   THEME — Slate & Blue (single accent, professional/minimal)
   Primary   : Blue   #0F766E / #115E59 / #14B8A6
   Ink/Text  : Slate  #0F172A (headings) / #334155 (body) / #64748B (muted)
   Surfaces  : White #FFFFFF, Soft #F8FAFC, Tint #F0FDFA, Border #E2E8F0
   Radius    : 16–20px cards, 999px pill buttons
   ══════════════════════════════════════════════════════════════ */
   * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* remove grey flash on tap — mobile UX */
  }
  html {
    scroll-behavior: smooth;
    /* Prevent horizontal overflow on all mobiles */
    overflow-x: hidden;
  }
  body {
    margin: 0;
    padding-top: 64px; /* default = header height; JS updates this when banner is visible */
    font-family: "Poppins", sans-serif;
    background: linear-gradient(135deg, #F8FAFC 0%, #F0FDFA 100%);
    color: #334155;
    overflow-x: hidden;
    /* Smooth momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    /* Header eases down/up instead of snapping when the banner opens or closes */
    transition: padding-top 0.35s ease;
  }
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: #F8FAFC;
  }
  ::-webkit-scrollbar-thumb {
    background: #0F766E;
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #0F766E;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
  }
  .reveal.active {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* ══ SITE TOP WRAPPER — banner + header stacked, fully fixed ══ */
  #siteTop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    display: flex;
    flex-direction: column;
  }
  
  /* ══ ANNOUNCEMENT BANNER ══ */
  #announcementBanner {
    display: none;
    position: relative;
    width: 100%;
    background: linear-gradient(90deg, #4c1a6e 0%, #6b21a8 40%, #7c3aed 70%, #4c1a6e 100%);
    background-size: 200% 100%;
    animation: bannerShimmer 6s linear infinite, fadeIn 0.5s ease;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    z-index: 1100;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  @keyframes bannerShimmer {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
  }
  #announcementBanner.open { display: block; }
  .ann-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 9px 52px 9px 16px;
    min-height: 38px;
    text-align: center;
    flex-wrap: wrap;
  }
  .ann-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    animation: annBell 2s ease-in-out infinite;
  }
  @keyframes annBell {
    0%,100%{ transform: rotate(0); }
    10%    { transform: rotate(12deg); }
    20%    { transform: rotate(-10deg); }
    30%    { transform: rotate(8deg); }
    40%    { transform: rotate(-6deg); }
    50%    { transform: rotate(0); }
  }
  .ann-text {
    line-height: 1.45;
    letter-spacing: 0.1px;
  }
  .ann-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ann-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 7px;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
    box-shadow: none;
  }
  .ann-close:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    transform: translateY(-50%);
  }
  @media(max-width:600px){
    .ann-inner { padding: 8px 44px 8px 10px; gap: 8px; font-size: 0.78rem; }
  }
  
  /* ══ HEADER — Enhanced with logo ══ */
  .header {
    position: relative;
    top: auto;
    z-index: 1000;
    /* background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 50%, rgba(15, 23, 42, 0.98) 100%); */
    background: linear-gradient(135deg, #0F172A 0%, #115E59 45%, #0F766E 75%, #F59E0B 100%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(15, 118, 110, 0.22);
    box-shadow: 0 2px 0 rgba(15, 118, 110, 0.18), 0 6px 32px rgba(0,0,0,0.28);
    color: white;
    padding: 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    height: 64px;
    gap: 16px;
    /* Fix Firefox scroll-linked positioning warning */
    will-change: transform;
    transform: translateZ(0);
  }
  /* subtle gold top line */
  .header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 0%, #0F766E 30%, #14B8A6 50%, #0F766E 70%, transparent 100%);
    opacity: 0.7;
    pointer-events: none;
  }
  .header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-shrink: 1;
    text-decoration: none;
  }
  .header-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(15, 118, 110, 0.55);
    box-shadow: 0 0 10px rgba(15, 118, 110, 0.35);
    flex-shrink: 0;
    background: #334155;
  }
  .header-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .header-brand-text .brand-main {
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    line-height: 1.15;
    letter-spacing: 0.2px;
  }
  .header-brand-text .brand-sub {
    font-size: 0.68rem;
    font-weight: 400;
    color: rgba(247,200,100,0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.3px;
    line-height: 1.2;
  }
  
  /* ── Desktop nav (hidden on mobile) ── */
  .nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
  }
  .nav-links a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
    padding: 7px 13px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    position: relative;
  }
  .nav-links a:hover {
    background: rgba(15, 118, 110, 0.18);
    color: #99F6E4;
  }
  .nav-links a i {
    color: #0F766E;
    font-size: 0.8rem;
  }
  .nav-links a.active-link {
    color: #99F6E4;
  }
  .nav-links a.active-link::after {
    content: '';
    position: absolute; bottom: 2px; left: 13px; right: 13px;
    height: 2px; border-radius: 2px;
    background: #0F766E;
  }
  .login-nav-links a{
    text-decoration: none;
  }
  .login-nav-links a.login-donate-btn {
    background: linear-gradient(135deg, #FFB800 0%, #FF8A00 100%);
    color: #fff;
    padding: 10px 22px;
    border-radius: 50px;
    border: none;
    box-shadow: 0 8px 25px rgba(255, 138, 0, .35);
    transition: .35s ease;
  }
  
  .login-nav-links a.login-donate-btn:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #FFC83D, #FF9800);
    box-shadow: 0 14px 35px rgba(255, 138, 0, .55);
}

  .login-nav-links a.login-btn {
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.20);
    color: #fff;
    padding: 10px 22px;
    border-radius: 50px;
    transition: .35s;
    box-shadow: none;
  }
  .login-nav-links a.login-btn:hover {
    background: rgba(255,255,255,.18);
    border-color: #00D4FF;
    color: #fff;
    transform: translateY(-2px);
  }
  .login-nav-links a.login-btn i { color: white; }
  .login-nav-links a.login-btn::after { display: none; }
  
  /* ── Hamburger button (hidden on desktop) ── */
  .hamburger-btn {
    display: none;
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 7px 11px;
    border-radius: 8px;
    transition: background 0.2s;
    box-shadow: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
  }
  .hamburger-btn:hover {
    background: rgba(15, 118, 110, 0.3);
  }
  
  /* ── Slide-down mobile nav menu ── */
  .nav-menu {
    position: fixed;
    top: 62px;
    right: 0;
    left: 0;
    background: rgba(30, 41, 59, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: none;
    flex-direction: column;
    padding: 8px 0 12px;
    z-index: 999;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    border-bottom: 2px solid rgba(15, 118, 110, 0.3);
    animation: slideDown 0.22s ease;
  }
  .nav-menu.open {
    display: flex;
  }
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .nav-menu a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 600;
    padding: 13px 24px;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: background 0.18s, color 0.18s;
  }
  .nav-menu a:last-child {
    border-bottom: none;
  }
  .nav-menu a:hover {
    background: rgba(15, 118, 110, 0.2);
    color: #99F6E4;
  }
  .nav-menu a i {
    color: #0F766E;
    width: 20px;
    text-align: center;
  }
  .nav-menu a.menu-login {
    background: rgba(15, 118, 110, 0.15);
    color: #99F6E4;
    font-weight: 700;
    margin: 8px 16px 0;
    border-radius: 10px;
    border-bottom: none;
    justify-content: center;
    border: 1.5px solid rgba(15, 118, 110, 0.4);
  }
  .nav-menu a.menu-login:hover {
    background: #0F766E;
    color: white;
  }
  .nav-menu a.menu-login i {
    color: inherit;
    width: auto;
  }
  
  @media (max-width: 880px) {
    .header {
      padding: 0 14px;
      height: 56px;
    }
    .header-logo { width: 34px; height: 34px; }
    .header-brand-text .brand-main { font-size: 0.88rem; }
    .header-brand-text .brand-sub  { display: none; }
    .nav-links { display: none; }
    /* .nav-links is hidden, but its wrapper <div> still occupies a slot in the
       header's `justify-content: space-between`, which spreads empty space
       around that invisible slot too — pulling the toggle away from the
       hamburger instead of grouping them. Remove the wrapper from the flex
       row entirely so spacing stays consistent at every width. */
    .header > div:nth-child(2) { display: none; }
    /* Login already has a mobile equivalent inside the hamburger menu (.menu-login),
       but the dark-mode toggle doesn't — so only hide the Login button here and
       keep .login-nav-links (and the toggle inside it) visible and reachable.
       margin-left:auto pins the toggle+hamburger group flush against the right
       edge, tight against each other, regardless of leftover header width. */
    .login-nav-links {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
    }
    .login-nav-links a.login-btn,
    .login-nav-links a.login-donate-btn { display: none; }
    .hamburger-btn { display: flex; }
    .nav-menu { top: 56px; }
  }
  @media (min-width: 881px) {
    .nav-links    { display: flex; }
    .hamburger-btn { display: none !important; }
    .nav-menu      { display: none !important; }
  }
  
  /* HERO — pure CSS gradient/blob background, no image file to download.
     Renders instantly (nothing to wait for), so the reveal delays that used
     to hide the flash of an unloaded background image are no longer needed. */
  .hero {
    background:
      radial-gradient(circle at 20% 25%, rgba(45, 212, 191, 0.35) 0%, transparent 45%),
      radial-gradient(circle at 82% 70%, rgba(245, 158, 11, 0.22) 0%, transparent 42%),
      linear-gradient(135deg, #0F172A 0%, #115E59 45%, #0F766E 75%, #0d4f49 100%);
    background-repeat: no-repeat;
    background-size: 160% 160%, 160% 160%, cover;
    background-position: 0% 20%, 100% 80%, center;
    width: 100%;
    aspect-ratio: 1440 / 560;
    height: auto;
    min-height: unset;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    animation: heroPan 16s ease-in-out infinite alternate, fadeIn 0.8s ease-out both;
    position: relative;
    overflow: hidden;
  }
  @keyframes heroPan {
    0%   { background-position: 0% 20%, 100% 80%, center; }
    100% { background-position: 30% 45%, 68% 42%, center; }
  }
  /* Faint architectural blueprint grid — nods to Vishwakarma, the craftsman */
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      repeating-linear-gradient(0deg,  rgba(255,255,255,0.07) 0, rgba(255,255,255,0.07) 1px, transparent 1px, transparent 56px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0, rgba(255,255,255,0.07) 1px, transparent 1px, transparent 56px);
    background-position: -1px -1px;
    animation: heroGridDrift 24s linear infinite;
    z-index: 1;
    pointer-events: none;
  }
  @keyframes heroGridDrift {
    0%   { background-position: 0px 0px, 0px 0px; }
    100% { background-position: 56px 56px, -56px 56px; }
  }
  /* Soft drifting glow + bottom readability gradient */
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 50% 32%, rgba(255,255,255,0.14) 0%, transparent 40%),
      radial-gradient(circle at 22% 28%, rgba(255,255,255,0.16) 0%, transparent 38%),
      radial-gradient(circle at 82% 65%, rgba(147,197,253,0.22) 0%, transparent 42%),
      linear-gradient(0deg, rgba(15,23,42,0.45) 0%, transparent 45%);
    animation: heroGlowDrift 10s ease-in-out infinite alternate;
    z-index: 1;
    pointer-events: none;
  }
  @keyframes heroGlowDrift {
    0%   { opacity: 0.85; transform: translateY(0) scale(1); }
    100% { opacity: 1;    transform: translateY(-2%) scale(1.04); }
  }
  /* Signature illustration — a hand-drafted line sketch of the home, in the
     same architectural/blueprint language as the grid above. Each stroke
     "draws itself" on load (stroke-dashoffset animating to 0), then the
     whole thing settles into the same gentle float the old compass icon
     had. Replaces the plain Font Awesome compass icon — one signature
     moment instead of two competing decorative elements. */
  .hero-illustration {
    position: absolute;
    top: 50%; right: 6%;
    transform: translateY(-50%);
    width: clamp(160px, 20vw, 380px);
    height: auto;
    z-index: 1;
    pointer-events: none;
    animation: heroIllustrationFloat 8s ease-in-out infinite alternate;
  }
  .hero-illustration .hi-draw {
    animation: hiDraw 1.1s ease-out forwards;
  }
  .hero-illustration .hi-1 { animation-delay: 0.5s; }
  .hero-illustration .hi-2 { animation-delay: 0.9s; }
  .hero-illustration .hi-3 { animation-delay: 1.3s; }
  .hero-illustration .hi-4 { animation-delay: 1.6s; }
  .hero-illustration .hi-5 { animation-delay: 1.8s; }
  .hero-illustration .hi-6 { animation-delay: 0.2s; }
  .hero-illustration .hi-7 { animation-delay: 2.0s; }
  @keyframes hiDraw {
    to { stroke-dashoffset: 0; }
  }
  @keyframes heroIllustrationFloat {
    0%   { transform: translateY(-50%) rotate(-1.5deg); }
    100% { transform: translateY(-53%) rotate(1.5deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero, .hero::before, .hero::after, .hero-illustration,
    .hero-kicker, .hero-box h1, .hero-sub, .hero-cta-row, .hero-scroll-cue {
      animation: none !important;
    }
    .hero-illustration .hi-draw {
      stroke-dashoffset: 0 !important;
    }
  }
  .hero-box {
    position: absolute;
    bottom: 8%;
    left: 8%;
    right: 8%;
    max-width: 640px;
    z-index: 2;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(8px, 1.3vw, 14px);
  }
  .hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(0.62rem, 1vw, 0.82rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #FCD34D;
    padding-bottom: clamp(4px, 0.7vw, 8px);
    border-bottom: 1.5px solid rgba(252, 211, 77, 0.35);
    animation: slideUp 0.8s ease-out both;
  }
  .hero-box h1 {
    font-family: "Fraunces", serif;
    font-optical-sizing: auto;
    font-size: clamp(1.9rem, 4.6vw, 4.4rem);
    margin: 0;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-shadow: 2px 4px 16px rgba(0, 0, 0, 0.5);
    text-align: left;
    color: #fff;
    animation: slideUp 0.9s ease-out 0.15s both;
  }
  .hero-sub {
    font-family: "Poppins", sans-serif;
    font-size: clamp(0.85rem, 1.5vw, 1.15rem);
    font-weight: 400;
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    text-align: left;
    text-shadow: 1px 2px 8px rgba(0,0,0,0.4);
    animation: slideUp 0.9s ease-out 0.3s both;
  }
  .hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 1.4vw, 16px);
    margin-top: clamp(6px, 1.2vw, 12px);
    animation: slideUp 0.9s ease-out 0.45s both;
  }
  .hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(0.8rem, 1.2vw, 0.95rem);
    font-weight: 600;
    padding: clamp(10px, 1.4vw, 14px) clamp(18px, 2.4vw, 26px);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  }
  .hero-btn-primary {
    background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
    color: #1C1206;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
  }
  .hero-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(245, 158, 11, 0.5); }
  .hero-scroll-cue {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    animation: heroScrollBounce 2.2s ease-in-out infinite;
  }
  .hero-scroll-cue:hover { border-color: #fff; color: #fff; }
  @keyframes heroScrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
  }
  
  
  /* SECTION */
  .section {
    padding: 64px 24px;
    text-align: center;
  }
  .section h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
    letter-spacing: -0.5px;
  }
  /* Gold underline accent on section headings */
  .section h2::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: #0F766E;
    margin: 10px auto 0;
  }
  .section p {
    font-size: 1.05rem;
    color: #555;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
  }
  
  /* ── About section enhancements ── */
  #about {
    background: linear-gradient(160deg, #FFFFFF 0%, #F8FAFC 100%);
    position: relative;
  }
  #about::before {
    display: none;
  }
 
  
  /* CARDS — glassmorphism upgrade */
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 36px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  .card {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 30px 22px;
    width: 100%;
    border-radius: 20px;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-top: 3px solid rgba(15, 118, 110, 0.55);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.35s cubic-bezier(.34,1.4,.64,1);
    position: relative;
    overflow: hidden;
  }
  /* Shimmer sweep on hover */
  .card::before {
    content: '';
    position: absolute;
    top: 0; left: -80%; width: 55%; height: 100%;
    background: linear-gradient(105deg, transparent 30%, rgba(15, 118, 110, 0.06) 50%, transparent 70%);
    transition: left 0.6s ease;
    pointer-events: none;
  }
  .card:hover::before { left: 130%; }
  .card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0F766E, #14B8A6, #F59E0B);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .card:hover::after { opacity: 1; }
  .card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 18px 40px rgba(15, 118, 110, 0.2);
    border-color: rgba(15, 118, 110, 0.5);
    border-top-color: #0F766E;
  }
  .card h3 {
    margin-top: 0;
    color: #1E293B;
    font-weight: 700;
    font-size: 1rem;
  }
  .card h3 i {
    color: #0F766E;
    font-size: 1.8rem;
    display: block;
    margin-bottom: 14px;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 0 0px rgba(15, 118, 110, 0));
  }
  .card:hover h3 i {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px rgba(15, 118, 110, 0.5));
  }
  .card p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
  }
  
  /* ── GALLERY — Swiper Section ── */
  .gallery-swiper-section {
    position: relative;
    max-width: 1100px;
    margin: 36px auto 0;
    padding: 0 60px;
  }
  .swiper-gallery {
    border-radius: 18px;
    overflow: hidden;
  }
  .swiper-slide-gallery {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: #0F172A;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }
  .swiper-slide-gallery:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 18px 48px rgba(15, 118, 110, 0.28), 0 0 0 1.5px rgba(15, 118, 110, 0.45);
  }
  .swiper-slide-gallery img {
    width: 100%; height: 280px;
    object-fit: cover; object-position: center top;
    display: block;
    transition: transform 0.55s ease;
  }
  .swiper-slide-gallery:hover img { transform: scale(1.08); }
  /* gradient overlay */
  .swiper-slide-gallery .gc-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,0.72) 100%);
    pointer-events: none;
  }
  /* caption */
  .swiper-slide-gallery .gc-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 28px 14px 13px;
    color: #fff; font-size: 0.86rem; font-weight: 700;
    pointer-events: none; z-index: 3;
    text-shadow: 0 1px 6px rgba(0,0,0,0.95);
    transform: translateY(5px); transition: transform 0.3s;
  }
  .swiper-slide-gallery:hover .gc-caption { transform: translateY(0); }
  /* view icon */
  .swiper-slide-gallery .gc-view-icon {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(0.4);
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(15, 118, 110, 0.92);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem;
    opacity: 0; transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none; z-index: 5;
    box-shadow: 0 4px 20px rgba(15, 118, 110, 0.6);
  }
  .swiper-slide-gallery:hover .gc-view-icon {
    opacity: 1; transform: translate(-50%,-50%) scale(1);
  }
  /* gold border on hover */
  .swiper-slide-gallery::after {
    content: ''; position: absolute; inset: 0; border-radius: 16px;
    border: 1.5px solid rgba(15, 118, 110, 0);
    transition: border-color 0.3s; pointer-events: none;
  }
  .swiper-slide-gallery:hover::after { border-color: rgba(15, 118, 110, 0.5); }
  
  /* custom nav arrows */
  .swiper-button-prev-custom,
  .swiper-button-next-custom {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; z-index: 10;
    border: 1.5px solid rgba(15, 118, 110, 0.55);
    background: rgba(255,255,255,0.92);
    color: #0F766E; font-size: 0.92rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.22s;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
  }
  .swiper-button-prev-custom { left: 6px; }
  .swiper-button-next-custom { right: 6px; }
  .swiper-button-prev-custom:hover,
  .swiper-button-next-custom:hover {
    background: #0F766E; color: #fff; border-color: #0F766E;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 22px rgba(15, 118, 110, 0.45);
  }
  /* Swiper pagination */
  .swiper-pagination-gallery {
    position: relative; margin-top: 22px;
    display: flex; justify-content: center; gap: 8px; align-items: center;
  }
  .swiper-pagination-gallery .swiper-pagination-bullet {
    width: 8px; height: 8px; border-radius: 4px;
    background: rgba(100, 116, 139, 0.25); opacity: 1;
    transition: all 0.35s cubic-bezier(.34,1.56,.64,1);
    cursor: pointer;
  }
  .swiper-pagination-gallery .swiper-pagination-bullet-active {
    background: #0F766E;
    width: 28px;
    box-shadow: 0 0 8px rgba(15, 118, 110, 0.6);
  }
  .gallery-loading-msg { margin-top: 32px; color: #94A3B8; font-size: 1rem; display: none; }
  .gallery-empty-msg   { margin-top: 32px; color: #999; font-size: 1rem; display: none; }
  
  /* ── Gallery skeleton shimmer ── */
  .gallery-skeleton-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 36px auto 0;
    padding: 0 60px;
  }
  .gallery-skeleton-card {
    border-radius: 16px;
    height: 280px;
    background: linear-gradient(90deg, #E2E8F0 0%, #F8FAFC 40%, #E2E8F0 100%);
    background-size: 200% 100%;
    animation: skelShimmer 1.5s ease-in-out infinite;
  }
  @keyframes skelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .gallery-skeleton-card:nth-child(2) { animation-delay: 0.15s; }
  .gallery-skeleton-card:nth-child(3) { animation-delay: 0.3s; }
  @media (max-width: 768px) {
    .gallery-skeleton-row {
      grid-template-columns: repeat(2, 1fr);
      padding: 0 44px;
    }
    .gallery-skeleton-card:nth-child(3) { display: none; }
  }
  @media (max-width: 520px) {
    .gallery-skeleton-row {
      grid-template-columns: 1fr;
      padding: 0 32px;
    }
    .gallery-skeleton-card:nth-child(2) { display: none; }
  }
  
  /* ── LIGHTBOX ── */
  .gc-lightbox {
    display: none; position: fixed; inset: 0; z-index: 99999;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
  }
  .gc-lightbox.open { display: flex; }
  
  /* Warm saffron-tinted backdrop instead of plain black */
  .gc-lb-backdrop {
    position: absolute; inset: 0;
    background: white; background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(15, 118, 110, 0.12) 100%);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    animation: gcBdIn 0.28s ease forwards;
  }
  /* subtle warm glow rings */
  .gc-lb-backdrop::after {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 60% 40% at 50% 0%, rgba(15, 118, 110, 0.10) 0%, transparent 70%),
      radial-gradient(ellipse 60% 40% at 50% 100%, rgba(15, 118, 110, 0.08) 0%, transparent 70%);
    pointer-events: none;
  }
  @keyframes gcBdIn { from{opacity:0} to{opacity:1} }
  
  /* ── Top bar: always fixed at very top of viewport ── */
  .gc-lb-topbar {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100001;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px 8px;
    pointer-events: none; /* let clicks pass through gap */
  }
  .gc-lb-topbar > * { pointer-events: all; }
  .gc-lb-counter {
    color: #99F6E4; font-size: 0.8rem; font-weight: 700;
    background: rgba(15, 23, 42, 0.72); padding: 5px 14px; border-radius: 20px;
    border: 1px solid rgba(15, 118, 110, 0.28);
    backdrop-filter: blur(8px); letter-spacing: 1px;
  }
  .gc-lightbox-close {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1.5px solid rgba(15, 118, 110, 0.35);
    background: rgba(15, 23, 42, 0.72); color: rgba(255,255,255,0.85);
    font-size: 1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.25s; backdrop-filter: blur(8px);
    flex-shrink: 0;
  }
  .gc-lightbox-close:hover {
    background: #0F766E; color: #fff; border-color: #0F766E;
    transform: rotate(90deg) scale(1.1);
  }
  
  /* ── Centre panel: fills remaining height ── */
  .gc-lb-panel {
    position: relative; z-index: 2;
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 0 64px 14px;
    min-height: 0;
    animation: gcPanelIn 0.38s cubic-bezier(.34,1.56,.64,1) forwards;
    box-sizing: border-box;
  }
  @keyframes gcPanelIn {
    from { opacity:0; transform: scale(0.78) translateY(28px); }
    to   { opacity:1; transform: scale(1) translateY(0); }
  }
  .gc-lb-panel.closing { animation: gcPanelOut 0.22s ease forwards; }
  @keyframes gcPanelOut {
    from { opacity:1; transform:scale(1); }
    to   { opacity:0; transform:scale(0.88) translateY(16px); }
  }
  
  /* ── image frame ── */
  .gc-lb-frame {
    position: relative; border-radius: 16px;
    overflow: hidden;
    box-shadow:
      0 0 0 1.5px rgba(15, 118, 110, 0.45),
      0 24px 80px rgba(0,0,0,0.7),
      0 0 50px rgba(15, 118, 110, 0.12);
    display: flex; align-items: center; justify-content: center;
    max-width: 100%; max-height: 100%;
  }
  .gc-lb-frame::before {
    content: '';
    position: absolute; top: 0; left: 8%; right: 8%; height: 2px;
    background: linear-gradient(90deg, transparent, #0F766E, #2DD4BF, #0F766E, transparent);
    z-index: 2; pointer-events: none;
  }
  .gc-lb-frame img {
    display: block;
    max-width: min(92vw, calc(100vw - 128px));
    max-height: calc(100dvh - 80px);
    width: auto; height: auto;
    object-fit: contain;
    border-radius: 16px;
  }
  
  /* slide animations */
  .gc-lb-frame img.lb-out-l { animation: lbOutL 0.15s ease forwards; }
  .gc-lb-frame img.lb-out-r { animation: lbOutR 0.15s ease forwards; }
  .gc-lb-frame img.lb-in-l  { animation: lbInL  0.26s cubic-bezier(.34,1.56,.64,1) forwards; }
  .gc-lb-frame img.lb-in-r  { animation: lbInR  0.26s cubic-bezier(.34,1.56,.64,1) forwards; }
  @keyframes lbOutL { to { opacity:0; transform: translateX(-40px) scale(0.92); } }
  @keyframes lbOutR { to { opacity:0; transform: translateX( 40px) scale(0.92); } }
  @keyframes lbInL  { from { opacity:0; transform: translateX( 40px) scale(0.92); } to { opacity:1; transform:none; } }
  @keyframes lbInR  { from { opacity:0; transform: translateX(-40px) scale(0.92); } to { opacity:1; transform:none; } }
  
  /* nav arrows — sit outside the frame */
  .gc-lb-prev, .gc-lb-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px solid rgba(15, 118, 110, 0.45);
    background: rgba(15, 23, 42, 0.80); color: #0F766E; font-size: 0.9rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.22s; z-index: 4; backdrop-filter: blur(8px);
  }
  .gc-lb-prev { left: -54px; } .gc-lb-next { right: -54px; }
  .gc-lb-prev:hover, .gc-lb-next:hover {
    background: #0F766E; color: #fff; border-color: #0F766E;
    transform: translateY(-50%) scale(1.12);
    box-shadow: 0 4px 18px rgba(15, 118, 110, 0.45);
  }
  
  /* caption */
  #gcLbCaption {
    margin-top: 12px;
    color: rgba(253, 186, 116, 0.92); font-size: 0.88rem; font-weight: 500;
    text-align: center; max-width: 80vw;
    padding: 6px 18px;
    background: rgba(15, 23, 42, 0.55); border-radius: 30px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(15, 118, 110, 0.18);
    letter-spacing: 0.3px;
  }
  
  @media(max-width: 768px) {
    .swiper-slide-gallery img { height: 260px; }
    .gallery-swiper-section { padding: 0 44px; }
    .gc-lb-panel { padding: 0 50px 12px; }
    .gc-lb-prev { left: -46px; width: 38px; height: 38px; }
    .gc-lb-next { right: -46px; width: 38px; height: 38px; }
  }
  @media(max-width: 520px) {
    .swiper-slide-gallery img { height: 320px; }
    .gallery-swiper-section { padding: 0 32px; }
    .gc-lb-panel { padding: 0 12px 12px; }
    .gc-lb-prev, .gc-lb-next { display: none; }
    .swiper-button-prev-custom, .swiper-button-next-custom {
      width: 36px; height: 36px; font-size: 0.78rem;
    }
    .gc-lb-frame img {
      max-width: 96vw;
      max-height: calc(100dvh - 80px);
    }
  }
  
  /* ══ COMMUNITY STATS SECTION — Enhanced Band ══ */
  .community-stats-section {
    padding: 64px 24px;
    background: linear-gradient(160deg, #0F172A 0%, #1E293B 35%, #1E293B 65%, #1E293B 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  /* Ambient orbs */
  .community-stats-section::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(15, 118, 110, 0.6) 50%, transparent 100%);
  }
  .community-stats-section::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(15, 118, 110, 0.3) 50%, transparent 100%);
  }
  /* Background texture orbs */
  .cs-bg-orb-1 {
    position: absolute; width: 400px; height: 400px; border-radius: 50%;
    top: -100px; left: -100px; pointer-events: none;
    background: radial-gradient(circle, rgba(15, 118, 110, 0.10) 0%, transparent 70%);
  }
  .cs-bg-orb-2 {
    position: absolute; width: 300px; height: 300px; border-radius: 50%;
    bottom: -80px; right: -60px; pointer-events: none;
    background: radial-gradient(circle, rgba(15, 118, 110, 0.08) 0%, transparent 70%);
  }
  .cs-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(15, 118, 110, 0.12);
    border: 1px solid rgba(15, 118, 110, 0.32);
    border-radius: 20px; padding: 5px 16px;
    font-size: 11px; font-weight: 600;
    color: #0F766E; letter-spacing: 0.8px;
    text-transform: uppercase; margin-bottom: 36px;
  }
  .cs-eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #0F766E;
    animation: csLivePulse 2s ease-in-out infinite;
    flex-shrink: 0;
  }
  @keyframes csLivePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.65)} }
  .cs-card {
    max-width: 400px; margin: 0 auto;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(15, 118, 110, 0.28);
    border-radius: 22px; padding: 40px 32px 32px;
    position: relative;
    box-shadow: 0 0 60px rgba(15, 118, 110, 0.08);
  }
  .cs-card::before {
    content: '';
    position: absolute; top: 0; left: 15%; right: 15%; height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(15, 118, 110, 0.7), transparent);
    border-radius: 1px;
  }
  .cs-icon-wrap {
    width: 58px; height: 58px; border-radius: 50%;
    background: rgba(15, 118, 110, 0.10);
    border: 1px solid rgba(15, 118, 110, 0.28);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 22px;
  }
  .cs-icon-wrap i { font-size: 22px; color: #0F766E; }
  .cs-count-row {
    display: flex; align-items: baseline;
    justify-content: center; gap: 3px;
    margin-bottom: 10px;
  }
  .cs-big-num {
    font-size: 68px; font-weight: 700;
    color: #F1F5F9; line-height: 1;
    letter-spacing: -2px;
    font-variant-numeric: tabular-nums;
    font-family: "Poppins", sans-serif;
  }
  .cs-big-plus {
    font-size: 38px; font-weight: 700;
    color: #0F766E; line-height: 1;
    font-family: "Poppins", sans-serif;
  }
  .cs-label {
    font-size: 15px; font-weight: 600;
    color: rgba(253, 186, 116, 0.9);
    margin-bottom: 5px;
    font-family: "Poppins", sans-serif;
  }
  .cs-sublabel {
    font-size: 12px; color: rgba(15, 118, 110, 0.45);
    margin-bottom: 26px;
    font-family: "Poppins", sans-serif;
  }
  .cs-divider {
    height: 1px;
    background: rgba(15, 118, 110, 0.15);
    margin-bottom: 20px; border-radius: 1px;
  }
  .cs-cta {
    font-size: 13px; color: rgba(255,200,110,0.6);
    font-family: "Poppins", sans-serif;
  }
  .cs-cta a {
    color: #0F766E; font-weight: 600; text-decoration: none;
    border-bottom: 1px solid rgba(15, 118, 110, 0.4);
    padding-bottom: 1px;
    transition: border-color 0.2s, color 0.2s;
  }
  .cs-cta a:hover { color: #2DD4BF; border-color: rgba(255,213,133,0.6); }
  
  /* ══ FEEDBACK SECTION — Map Left + Form Right ══ */
  .feedback-section {
    padding: 60px 20px;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    text-align: center;
  }
  .feedback-section h2 {
    font-size: 2rem;
    color: #64748B;
    margin-bottom: 8px;
  }
  .feedback-section > p {
    color: #666;
    margin-bottom: 36px;
    font-size: 1rem;
  }
  /* Two-column layout */
  .feedback-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
    align-items: start;
  }
  /* Map side */
  .feedback-map-side {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(100, 116, 139, 0.15);
    border: 1.5px solid rgba(15, 118, 110, 0.22);
    height: 100%;
    min-height: 420px;
    display: flex;
    flex-direction: column;
  }
  .feedback-map-header {
    background: linear-gradient(135deg, #0F766E 0%, #14B8A6 55%, #F59E0B 100%);
    color: white;
    padding: 14px 20px;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .feedback-map-side iframe {
    flex: 1;
    width: 100%;
    border: none;
    display: block;
    min-height: 370px;
  }
  /* Form side */
  .feedback-form {
    background: white;
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(100, 116, 139, 0.12);
    padding: 32px 28px;
    text-align: left;
  }
  .feedback-form-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .feedback-form-title i { color: #0F766E; }
  .feedback-form label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #666;
    margin-bottom: 5px;
  }
  .feedback-form input,
  .feedback-form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 9px;
    font-family: Poppins, sans-serif;
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.25s;
    margin-bottom: 14px;
    box-sizing: border-box;
  }
  .feedback-form input:focus,
  .feedback-form textarea:focus {
    border-color: #0F766E;
  }
  .feedback-form textarea {
    resize: vertical;
    min-height: 90px;
  }
  .feedback-form .form-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .feedback-submit-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #0F766E 0%, #14B8A6 55%, #F59E0B 100%);
    color: white;
    border: none;
    border-radius: 999px;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 5px 18px rgba(15, 118, 110, 0.35);
  }
  .feedback-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 118, 110, 0.5);
  }
  /* FIX #3: Thank you message */
  #feedbackThanks {
    display: none;
    text-align: center;
    padding: 30px 20px;
    background: #eafaf1;
    border-radius: 14px;
    margin-top: 16px;
    animation: fbThanksFade 0.5s ease;
    border: 1.5px solid #a7f3d0;
  }
  @keyframes fbThanksFade {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  #feedbackThanks .ty-icon {
    font-size: 3rem;
    margin-bottom: 10px;
  }
  #feedbackThanks h3 {
    color: #1d9e75;
    font-size: 1.4rem;
    margin: 0 0 8px;
  }
  #feedbackThanks p {
    color: #555;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
  }
  .fb-pending-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: #F1F5F9;
    border: 1.5px solid #0F766E;
    border-radius: 20px;
    padding: 5px 16px;
    font-size: 0.82rem; font-weight: 700;
    color: #115E59;
    letter-spacing: 0.4px;
    margin-top: 14px;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.15);
  }
  .fb-pending-badge i { color: #0F766E; font-size: 0.78rem; }
  @media (max-width: 800px) {
    .feedback-layout { grid-template-columns: 1fr; }
    .feedback-map-side { min-height: 280px; }
    .feedback-map-side iframe { min-height: 260px; }
  }
  
  /* FOOTER — Enhanced */
  .footer {
    /* background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%); */
    background: linear-gradient(135deg, #0F172A 0%, #115E59 45%, #0F766E 75%, #F59E0B 100%);
    /* color: rgba(199, 210, 254, 0.7); */
    color: rgba(231, 233, 241, 0.7);
    text-align: center;
    padding: 28px 20px;
    font-size: 0.88rem;
    border-top: 1px solid rgba(15, 118, 110, 0.2);
    position: relative;
    overflow: hidden;
  }
  .footer::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, #0F766E, #2DD4BF, #0F766E, transparent);
    opacity: 0.6;
  }
  .footer span {
    color: #eae9f1;
  }
  .footer-tagline {
    display: block;
    font-size: 0.75rem;
    /* color: rgba(15, 118, 110, 0.35); */
    color: rgba(236, 235, 241, 0.35);
    margin-top: 5px;
    letter-spacing: 0.5px;
  }
  
  /* ── Input validation error states ── */
  .feedback-form input.input-error,
  .feedback-form textarea.input-error {
    border-color: #e74c3c !important;
    background: rgba(231, 76, 60, 0.04);
    animation: inputShake 0.38s cubic-bezier(.36,.07,.19,.97) both;
  }
  @keyframes inputShake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(3px); }
    30%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(3px); }
    50%       { transform: translateX(-2px); }
  }
  .feedback-form input.input-ok,
  .feedback-form textarea.input-ok {
    border-color: #27ae60 !important;
  }
  .field-error-msg {
    display: none;
    font-size: 11px;
    color: #e74c3c;
    font-weight: 600;
    margin-top: -10px;
    margin-bottom: 10px;
    padding-left: 2px;
  }
  .field-error-msg.show { display: block; }
  /* Submit button loading state */
  .feedback-submit-btn.loading {
    opacity: 0.75;
    cursor: not-allowed;
    pointer-events: none;
  }
  .feedback-submit-btn.loading::after {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btnSpin 0.7s linear infinite;
    margin-left: 10px;
    vertical-align: middle;
  }
  @keyframes btnSpin { to { transform: rotate(360deg); } }
  
  @media (max-width: 768px) {
    .header {
      height: 52px;
      padding: 0 12px;
    }
    .header-logo { width: 32px; height: 32px; }
    .header-brand-text .brand-main { font-size: 0.84rem; }
    .hamburger-btn {
      flex-shrink: 0;
      font-size: 1.2rem;
      padding: 6px 10px;
    }
    /* The desktop hero uses a wide 1440:560 banner ratio, which on a narrow
       phone leaves barely enough room for the kicker, heading, subtitle and
       CTA — everything ends up crammed against the scroll cue. Mobile gets
       its own taller, viewport-based height instead so the stacked content
       has room to breathe. */
    .hero {
      aspect-ratio: unset;
      height: 74vh;
      min-height: 460px;
      max-height: 620px;
      background-size: 200% 200%, 200% 200%, cover;
    }
    /* Now that mobile has real breathing room (see .hero above), bring the
       hand-drawn house illustration back instead of hiding it — it just
       moves to the top of the hero, centered, so it sits clear of the
       text block anchored at the bottom. */
    .hero-illustration {
      display: block;
      top: 9%;
      right: auto;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(110px, 34vw, 190px);
      animation: heroIllustrationFloatMobile 8s ease-in-out infinite alternate;
    }
    .hero-box {
      bottom: 16%;
      left: 7%;
      right: 7%;
      gap: 12px;
    }
    .hero-scroll-cue {
      bottom: 6%;
    }
  
    @keyframes heroIllustrationFloatMobile {
      0%   { transform: translateX(-50%) translateY(0)   rotate(-1.5deg); }
      100% { transform: translateX(-50%) translateY(-3%) rotate(1.5deg); }
    }
  
    /* ── Sections ── */
    .section {
      padding: 36px 16px;
    }
    .section h2 {
      font-size: 1.6rem;
    }
    .section p {
      font-size: 0.95rem;
    }
  
  
    /* ── Feature cards: 2 columns ── */
    .cards {
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 20px;
    }
    .card { padding: 20px 14px; }
  
    /* ── Gallery skeleton: 2 cols ── */
    .gallery-skeleton-row { padding: 0 44px; grid-template-columns: 1fr 1fr; }
    .gallery-skeleton-card:nth-child(3) { display: none; }
  
    /* ── Community stats card: full width ── */
    .cs-card { max-width: 100%; padding: 32px 20px 24px; }
    .cs-big-num { font-size: 56px; }
  
    /* ── Members section ── */
    .members-section { padding: 40px 16px 56px; }
    .member-info-side { padding: 24px 18px; }
    .member-name { font-size: 1.4rem; }
    .member-bio { font-size: 0.9rem; line-height: 1.65; }
  
    /* ── Feedback section ── */
    .feedback-section { padding: 36px 16px; }
    .feedback-section h2 { font-size: 1.6rem; }
    .feedback-form { padding: 20px 16px; }
    .feedback-form .form-row2 { grid-template-columns: 1fr; gap: 0; }
    /* Map stacks above form */
    .feedback-map-side { min-height: 240px; }
    .feedback-map-side iframe { min-height: 220px; }
  
    /* ── Better touch targets ── */
    .nav-menu a { padding: 15px 24px; min-height: 48px; }
    .members-nav-btn { width: 48px; height: 48px; }
    .feedback-submit-btn { padding: 15px; font-size: 16px; }
  
    /* ── Footer ── */
    .footer { padding: 20px 16px; font-size: 0.8rem; }
    .footer-tagline { font-size: 0.68rem; }
  }
  
  /* ── Small phones (≤480px) ── */
  @media (max-width: 480px) {
    .header { height: 50px; padding: 0 10px; }
    .header-logo { width: 30px; height: 30px; }
    .header-brand-text .brand-main { font-size: 0.8rem; }
    .nav-menu { top: 50px; }

    .hero { height: 68vh; min-height: 420px; max-height: 540px; }
    .hero-box { bottom: 14%; }
    .hero-illustration { top: 7%; width: clamp(95px, 30vw, 160px); }
  
    .section { padding: 30px 14px; }
    .section h2 { font-size: 1.45rem; }
  
    /* About stats: 2x2 stays but tighter */
    .about-stat { padding: 14px 10px; }
    .about-stat-num { font-size: 1.35rem; }
  
    /* Feature cards: 1 column on very small screens */
    .cards { grid-template-columns: 1fr; gap: 10px; }
    .card { padding: 18px 16px; }
    .card h3 i { font-size: 1.5rem; }
  
    /* Gallery skeleton: 1 col */
    .gallery-skeleton-row { grid-template-columns: 1fr; padding: 0 20px; }
    .gallery-skeleton-card:nth-child(2),
    .gallery-skeleton-card:nth-child(3) { display: none; }
    .gallery-skeleton-card { height: 220px; }
  
    /* Community stats */
    .cs-big-num { font-size: 52px; }
    .cs-eyebrow { font-size: 10px; }
    .community-stats-section { padding: 44px 16px; }
  
    /* Members */
    .member-photo-side { flex: 0 0 240px; min-height: 240px; }
    .member-info-side { padding: 18px 14px; }
    .member-name { font-size: 1.25rem; }
    .members-title { font-size: 1.55rem; }
    .member-role-badge { font-size: 10px; padding: 3px 10px; }
    .member-bio { font-size: 0.88rem; }
    .member-dots { margin-top: 20px; gap: 6px; }
  
    /* Announcement banner */
    .ann-inner { font-size: 0.75rem; padding: 8px 40px 8px 10px; gap: 6px; }
  
    /* Feedback */
    .feedback-section h2 { font-size: 1.4rem; }
    .feedback-form-title { font-size: 1rem; }
    .feedback-form input,
    .feedback-form textarea { font-size: 13px; padding: 10px 12px; }
    .feedback-submit-btn { font-size: 15px; }
    .feedback-map-side { min-height: 200px; }
    .feedback-map-side iframe { min-height: 180px; }
  
    /* Chaupai ticker */
    .cp-char span, .cp-spacer { font-size: 0.82rem; }
    .cp-ticker-wrap { padding: 4px 8px 2px; }
  
    /* Footer */
    .footer { padding: 18px 12px; }
    .footer-tagline { display: none; } /* too cramped on tiny screens */
  }
  
  /* ── Very small (≤380px) ── */
  @media (max-width: 380px) {
    .header-brand-text .brand-main { font-size: 0.74rem; }
    .cs-big-num { font-size: 46px; }
    .member-photo-side { flex: 0 0 200px; min-height: 200px; }
    .member-name { font-size: 1.1rem; }
  }
  
  /* ══ PAYMENT MODAL ══ */
  /* ══ PAYMENT MODAL — Animated Beautiful ══ */
  /* ── Keyframes ── */
  @keyframes payBdIn       { from{opacity:0}                    to{opacity:1} }
  @keyframes payBodyIn     { from{opacity:0;transform:translateY(36px) scale(0.96)} to{opacity:1;transform:translateY(0) scale(1)} }
  @keyframes payCardIn     { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
  @keyframes payOrb1       { 0%,100%{transform:translate(0,0) scale(1)}    50%{transform:translate(40px,-30px) scale(1.18)} }
  @keyframes payOrb2       { 0%,100%{transform:translate(0,0) scale(1)}    50%{transform:translate(-35px,25px) scale(1.12)} }
  @keyframes payOrb3       { 0%,100%{transform:translate(0,0) scale(1)}    60%{transform:translate(20px,40px) scale(1.15)} }
  @keyframes payShimmer    { 0%{background-position:200% center} 100%{background-position:-200% center} }
  @keyframes payGoldPulse  { 0%,100%{opacity:0.55;transform:scaleX(1)}    50%{opacity:1;transform:scaleX(1.04)} }
  @keyframes payIconPulse  { 0%,100%{box-shadow:0 0 0 0 rgba(15, 118, 110, 0.0)} 50%{box-shadow:0 0 0 8px rgba(15, 118, 110, 0.12)} }
  @keyframes payQrGlow     { 0%,100%{box-shadow:0 0 0 4px rgba(15, 118, 110, 0.10),0 8px 32px rgba(0,0,0,0.5)} 50%{box-shadow:0 0 0 6px rgba(15, 118, 110, 0.22),0 8px 48px rgba(15, 118, 110, 0.28)} }
  @keyframes paySpinRing   { from{transform:translateX(-50%) rotate(0deg)} to{transform:translateX(-50%) rotate(360deg)} }
  @keyframes payParticle   { 0%{transform:translateY(0) scale(1);opacity:0.7} 100%{transform:translateY(-120px) scale(0);opacity:0} }
  @keyframes payDivinePulse{ 0%,100%{opacity:0.08} 50%{opacity:0.18} }
  @keyframes paySweep      { 0%{left:-60%} 100%{left:160%} }
  @keyframes payTitleGlow  { 0%,100%{text-shadow:0 0 20px rgba(15, 118, 110, 0.0)} 50%{text-shadow:0 0 40px rgba(15, 118, 110, 0.45), 0 0 80px rgba(255,213,100,0.20)} }
  @keyframes payDividerPulse{ 0%,100%{opacity:0.6} 50%{opacity:1} }
  
  /* ── Modal shell ── */
  .pay-modal {
    display: none; position: fixed; inset: 0; z-index: 99998;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    overflow-y: auto; scroll-behavior: smooth;
  }
  .pay-modal.open { display: flex; }
  
  /* ── Layered animated backdrop ── */
  .pay-modal-backdrop {
    position: fixed; inset: 0; z-index: 0;
    background: radial-gradient(ellipse 120% 100% at 50% 0%,
      #1E293B 0%, #0F172A 35%, #0F172A 65%, #1E293B 100%);
    animation: payBdIn 0.35s ease forwards;
    overflow: hidden;
  }
  /* Large drifting orbs — warm amber */
  .pay-modal-backdrop::before {
    content: '';
    position: absolute;
    width: 520px; height: 520px; border-radius: 50%;
    top: -160px; left: -100px;
    background: radial-gradient(circle, rgba(15, 118, 110, 0.22) 0%, rgba(15, 118, 110, 0.10) 45%, transparent 72%);
    animation: payOrb1 12s ease-in-out infinite;
    pointer-events: none;
  }
  /* Large drifting orb — deep saffron right */
  .pay-modal-backdrop::after {
    content: '';
    position: absolute;
    width: 480px; height: 480px; border-radius: 50%;
    bottom: -120px; right: -80px;
    background: radial-gradient(circle, rgba(15, 118, 110, 0.20) 0%, rgba(29, 78, 216, 0.08) 50%, transparent 72%);
    animation: payOrb2 15s ease-in-out infinite;
    pointer-events: none;
  }
  
  /* ── Extra floating orbs injected via .pay-orb elements ── */
  .pay-orb {
    position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
  }
  .pay-orb-1 {
    width: 340px; height: 340px;
    top: 30%; left: 50%; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(99,60,200,0.13) 0%, transparent 70%);
    animation: payOrb3 18s ease-in-out infinite;
  }
  .pay-orb-2 {
    width: 200px; height: 200px;
    top: 10%; right: 8%;
    background: radial-gradient(circle, rgba(255,180,40,0.12) 0%, transparent 68%);
    animation: payOrb1 9s ease-in-out infinite reverse;
  }
  .pay-orb-3 {
    width: 160px; height: 160px;
    bottom: 15%; left: 5%;
    background: radial-gradient(circle, rgba(15, 118, 110, 0.14) 0%, transparent 68%);
    animation: payOrb2 11s ease-in-out infinite;
  }
  
  /* Floating divine particles */
  .pay-particle {
    position: fixed; z-index: 0; pointer-events: none;
    font-size: 1.1rem; opacity: 0;
    animation: payParticle linear infinite;
  }
  
  /* Top bar */
  .pay-modal-topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 22px 12px;
    background: linear-gradient(to bottom, rgba(14,5,0,0.92) 0%, transparent 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .pay-modal-label {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(15, 118, 110, 0.12);
    border: 1px solid rgba(15, 118, 110, 0.38);
    border-radius: 20px; padding: 6px 18px;
    font-size: 11px; font-weight: 700;
    color: #99F6E4; letter-spacing: 1.2px; text-transform: uppercase;
    position: relative; overflow: hidden;
  }
  /* Sweep shimmer on label */
  .pay-modal-label::after {
    content: '';
    position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,220,120,0.30), transparent);
    animation: paySweep 3.5s ease-in-out infinite;
  }
  .pay-modal-close {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px solid rgba(15, 118, 110, 0.38);
    background: rgba(40,14,0,0.80); color: rgba(255,255,255,0.88);
    font-size: 1.05rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.28s cubic-bezier(.34,1.56,.64,1);
    backdrop-filter: blur(10px); flex-shrink: 0;
  }
  .pay-modal-close:hover {
    background: linear-gradient(135deg, #0F766E 0%, #14B8A6 55%, #F59E0B 100%);
    color: #fff; border-color: #0F766E;
    transform: rotate(90deg) scale(1.12);
    box-shadow: 0 0 20px rgba(15, 118, 110, 0.5);
  }
  
  /* ── Scrollable body ── */
  .pay-modal-body {
    position: relative; z-index: 1;
    max-width: 740px; width: 100%;
    margin: 0 auto;
    padding: 8px 22px 70px;
    animation: payBodyIn 0.5s cubic-bezier(.34,1.4,.64,1) 0.1s both;
  }
  
  /* ── Decorative temple diya icon above title ── */
  .pay-diya-icon {
    text-align: center; font-size: 2.2rem; margin-bottom: 8px;
    animation: payDivinePulse 2.8s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(15, 118, 110, 0.6));
  }
  
  /* ── Title ── */
  .pay-section-title {
    font-size: 2rem; font-weight: 700;
    color: #fff; text-align: center;
    margin: 0 0 8px; line-height: 1.2;
    animation: payTitleGlow 3s ease-in-out infinite;
  }
  .pay-section-title span {
    background: linear-gradient(135deg, #0F766E 0%, #2DD4BF 40%, #0F766E 70%, #2DD4BF 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: payShimmer 4s linear infinite;
  }
  .pay-section-sub {
    text-align: center; font-size: 0.88rem;
    color: rgba(247,205,135,0.62); margin: 0 0 24px; line-height: 1.65;
  }
  
  /* ── Animated gold divider ── */
  .pay-gold-divider {
    height: 2px; margin: 0 0 28px; position: relative; border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(15, 118, 110, 0.3) 20%, #2DD4BF 50%, rgba(15, 118, 110, 0.3) 80%, transparent);
    animation: payDividerPulse 2.5s ease-in-out infinite;
  }
  .pay-gold-divider::before {
    content: '🏠';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    font-size: 1rem; line-height: 1;
    filter: drop-shadow(0 0 8px rgba(15, 118, 110, 0.7));
    background: radial-gradient(circle, #0F766E 0%, transparent 70%);
    padding: 0 8px;
  }
  
  /* ── Cards grid ── */
  .pay-cards-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 18px; margin-bottom: 22px;
  }
  
  /* ── Individual card ── */
  .pay-card {
    background: linear-gradient(155deg, #1E293B 0%, #334155 40%, #1E293B 80%, #0F172A 100%);
    border: 1px solid rgba(15, 118, 110, 0.22);
    border-radius: 22px; padding: 26px 22px 24px;
    position: relative; overflow: hidden;
    transition: transform 0.28s cubic-bezier(.34,1.56,.64,1),
                box-shadow 0.28s ease, border-color 0.28s ease;
    animation: payCardIn 0.55s cubic-bezier(.34,1.4,.64,1) both;
  }
  .pay-card:nth-child(2) { animation-delay: 0.12s; }
  .pay-card:hover {
    transform: translateY(-5px) scale(1.012);
    border-color: rgba(15, 118, 110, 0.45);
    box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 30px rgba(15, 118, 110, 0.18);
  }
  /* Top shimmer line */
  .pay-card::before {
    content: '';
    position: absolute; top: 0; left: 12%; right: 12%; height: 2px;
    background: linear-gradient(90deg, transparent, #0F766E, #2DD4BF, #0F766E, transparent);
    border-radius: 2px;
    animation: payGoldPulse 2.8s ease-in-out infinite;
  }
  /* Inner ambient glow */
  .pay-card::after {
    content: '';
    position: absolute; inset: 0; border-radius: 22px;
    background:
      radial-gradient(ellipse 80% 55% at 50% 0%, rgba(15, 118, 110, 0.07) 0%, transparent 65%),
      radial-gradient(ellipse 60% 50% at 100% 100%, rgba(15, 118, 110, 0.05) 0%, transparent 65%);
    pointer-events: none;
  }
  /* Animated sweep highlight */
  .pay-card .pay-card-sweep {
    position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
    background: linear-gradient(105deg, transparent 30%, rgba(255,220,120,0.06) 50%, transparent 70%);
    transition: left 0.8s ease;
    pointer-events: none; z-index: 2; border-radius: 22px;
  }
  .pay-card:hover .pay-card-sweep { left: 120%; }
  
  /* Icon */
  .pay-card-icon {
    width: 50px; height: 50px; border-radius: 50%;
    background: rgba(15, 118, 110, 0.10);
    border: 1px solid rgba(15, 118, 110, 0.30);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    animation: payIconPulse 3s ease-in-out infinite;
    transition: transform 0.25s;
  }
  .pay-card:hover .pay-card-icon { transform: scale(1.12) rotate(-5deg); }
  .pay-card-icon i { font-size: 1.2rem; color: #0F766E; }
  
  .pay-card-heading {
    font-size: 0.78rem; font-weight: 700; color: #99F6E4;
    letter-spacing: 1.1px; text-transform: uppercase; margin-bottom: 14px;
  }
  .pay-detail-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 8px; padding: 9px 0;
    border-bottom: 1px solid rgba(15, 118, 110, 0.09);
    transition: background 0.2s;
  }
  .pay-detail-row:hover { background: rgba(15, 118, 110, 0.04); }
  .pay-detail-row:last-child { border-bottom: none; padding-bottom: 0; }
  .pay-detail-label {
    font-size: 0.74rem; color: rgba(247,190,100,0.52);
    font-weight: 600; flex-shrink: 0; padding-top: 1px;
  }
  .pay-detail-value {
    font-size: 0.82rem; color: #F0FDFA; font-weight: 700;
    text-align: right; word-break: break-all; line-height: 1.4;
  }
  
  /* Copy button */
  .pay-copy-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(15, 118, 110, 0.10);
    border: 1px solid rgba(15, 118, 110, 0.30);
    border-radius: 10px; padding: 6px 14px;
    font-size: 0.72rem; font-weight: 700; color: #0F766E;
    cursor: pointer; transition: all 0.22s; margin-top: 14px;
    white-space: nowrap; position: relative; overflow: hidden;
  }
  .pay-copy-btn::before {
    content: '';
    position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,220,120,0.2), transparent);
    transition: left 0.5s ease;
  }
  .pay-copy-btn:hover::before { left: 130%; }
  .pay-copy-btn:hover {
    background: rgba(15, 118, 110, 0.22); border-color: #0F766E;
    box-shadow: 0 4px 16px rgba(15, 118, 110, 0.30);
    transform: translateY(-1px);
  }
  .pay-copy-btn:active { transform: scale(0.97); }
  .pay-copy-btn.copied {
    background: rgba(40,200,80,0.15); border-color: rgba(40,200,80,0.45);
    color: #7dffaa; box-shadow: 0 0 14px rgba(40,200,80,0.20);
  }
  
  /* QR section */
  .pay-qr-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
  }
  /* Spinning outer ring around QR */
  .pay-qr-ring-wrap {
    position: relative; width: 180px; height: 180px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .pay-qr-ring-wrap::before {
    content: '';
    position: absolute; inset: -6px; border-radius: 20px;
    border: 2px dashed rgba(15, 118, 110, 0.28);
    animation: paySpinRing 12s linear infinite;
    transform-origin: center;
    transform: rotate(0deg);
  }
  .pay-qr-ring-wrap::after {
    content: '';
    position: absolute; inset: -3px; border-radius: 18px;
    border: 1px solid rgba(15, 118, 110, 0.15);
    animation: paySpinRing 8s linear infinite reverse;
  }
  .pay-qr-box {
    width: 164px; height: 164px; background: #fff;
    border-radius: 16px;
    border: 3px solid rgba(15, 118, 110, 0.55);
    animation: payQrGlow 3s ease-in-out infinite;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0; position: relative; z-index: 2;
  }
  .pay-qr-placeholder {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 8px;
    color: #94A3B8; font-size: 0.68rem; font-weight: 700;
    text-align: center; padding: 12px;
  }
  .pay-qr-placeholder i { font-size: 3rem; color: #0F766E; }
  .pay-qr-img { width: 100%; height: 100%; object-fit: contain; }
  
  .pay-upi-id {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.10), rgba(15, 118, 110, 0.08));
    border: 1px solid rgba(15, 118, 110, 0.32);
    border-radius: 12px; padding: 10px 16px;
    font-size: 0.88rem; font-weight: 700; color: #2DD4BF;
    text-align: center; word-break: break-all; line-height: 1.4;
    width: 100%; letter-spacing: 0.3px;
    position: relative; overflow: hidden;
  }
  .pay-upi-id::after {
    content: '';
    position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,220,120,0.18), transparent);
    animation: paySweep 4s ease-in-out infinite 1s;
  }
  
  /* Declaration */
  .pay-declaration {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.07), rgba(15, 118, 110, 0.04));
    border: 1px solid rgba(15, 118, 110, 0.20);
    border-left: 3px solid rgba(15, 118, 110, 0.80);
    border-radius: 0 14px 14px 0;
    padding: 16px 20px; margin-top: 6px;
    position: relative; overflow: hidden;
  }
  .pay-declaration::before {
    content: '';
    position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, #0F766E, #2DD4BF, #0F766E);
    animation: payGoldPulse 3s ease-in-out infinite;
  }
  .pay-declaration p {
    font-size: 0.78rem; color: rgba(255,235,185,0.65);
    line-height: 1.78; margin: 0;
  }
  .pay-declaration p strong { color: #2DD4BF; font-weight: 700; }
  
  /* Help */
  .pay-help {
    text-align: center; margin-top: 22px;
    font-size: 0.78rem; color: rgba(247,190,100,0.44); line-height: 1.6;
  }
  .pay-help a {
    color: #0F766E; text-decoration: none;
    border-bottom: 1px solid rgba(15, 118, 110, 0.35);
    transition: color 0.2s, border-color 0.2s;
  }
  .pay-help a:hover { color: #2DD4BF; border-color: rgba(255,213,133,0.6); }
  
  /* ── Responsive ── */
  @media (max-width: 560px) {
    .pay-cards-row { grid-template-columns: 1fr; }
    .pay-modal-body { padding: 4px 14px 56px; }
    .pay-section-title { font-size: 1.55rem; }
    .pay-card { padding: 22px 18px 20px; }
    .pay-qr-ring-wrap { width: 158px; height: 158px; }
    .pay-qr-box { width: 148px; height: 148px; }
  }
  @media (max-width: 380px) {
    .pay-section-title { font-size: 1.3rem; }
    .pay-card { padding: 18px 14px 16px; }
    .pay-qr-ring-wrap { width: 140px; height: 140px; }
    .pay-qr-box { width: 130px; height: 130px; }
  }
  
  /* ══ OUR MEMBERS SECTION ══ */
  .members-section {
    padding: 64px 24px 72px;
    background: linear-gradient(180deg, #F8FAFC 0%, #F8FAFC 60%, #F1F5F9 100%);
    position: relative;
    overflow: hidden;
  }
  .members-section::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent 0%, #0F766E 30%, #14B8A6 50%, #0F766E 70%, transparent 100%);
  }
  .members-section::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(15, 118, 110, 0.4) 50%, transparent 100%);
  }
  /* Subtle background mandala pattern */
  .members-section-bg {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      radial-gradient(circle at 10% 20%, rgba(15, 118, 110, 0.06) 0%, transparent 40%),
      radial-gradient(circle at 90% 80%, rgba(15, 118, 110, 0.05) 0%, transparent 40%);
  }
  .members-header {
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
    text-align: center;
  }
  .members-eyebrow {
    display: inline-flex !important;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(15, 118, 110, 0.10);
    border: 1px solid rgba(15, 118, 110, 0.35);
    border-radius: 20px; padding: 5px 18px;
    font-size: 11px; font-weight: 700;
    color: #0F766E; letter-spacing: 1px;
    text-transform: uppercase; margin-bottom: 16px;
  }
  .members-eyebrow i { color: #0F766E; font-size: 10px; }
  .members-title {
    font-size: 2.3rem;
    font-weight: 700;
    color: #1E293B;
    margin: 0 0 12px;
    line-height: 1.2;
    text-align: center;
  }
  .members-title span {
    background: linear-gradient(135deg, #0F766E 0%, #14B8A6 55%, #F59E0B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .members-subtitle {
    color: #64748B;
    font-size: 1rem;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.65;
  }
  /* Nav arrows */
  .members-header-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    flex-direction: column;
  }
  .members-header-left {
    flex: 1;
    min-width: 0;
    text-align: center;
    width: 100%;
  }
  .members-nav {
    display: flex; gap: 10px;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    flex-shrink: 0;
    margin-top: 8px;
  }
  
  /* ── Members auto-scroll track ── */
  .member-slider-track {
    overflow: hidden;
    position: relative;
    max-width: 860px;
    margin: 0 auto;
  }
  @keyframes memberSlideLeft {
    0%   { transform: translateX(0); opacity: 1; }
    18%  { transform: translateX(0); opacity: 1; }
    28%  { transform: translateX(-60px); opacity: 0; }
    30%  { transform: translateX(60px); opacity: 0; }
    40%  { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
  }
  .members-nav-btn {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1.5px solid rgba(15, 118, 110, 0.5);
    background: white;
    color: #0F766E; font-size: 0.85rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.25s;
    box-shadow: 0 2px 12px rgba(15, 118, 110, 0.18);
  }
  .members-nav-btn:hover {
    background: linear-gradient(135deg, #0F766E 0%, #14B8A6 55%, #F59E0B 100%);
    color: white; border-color: #0F766E;
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(15, 118, 110, 0.45);
  }
  /* Member Card — CodeHelp-style horizontal card */
  .member-card {
    display: none;
    max-width: 860px;
    margin: 0 auto;
    background: linear-gradient(135deg, #F8FAFC 0%, #ffffff 50%, #F1F5F9 100%);
    border: 1px solid rgba(15, 118, 110, 0.25);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
      0 4px 0 rgba(15, 118, 110, 0.15),
      0 12px 48px rgba(100, 116, 139, 0.12),
      0 2px 8px rgba(0,0,0,0.05);
    position: relative;
    animation: memberFadeIn 0.55s cubic-bezier(.34,1.4,.64,1) both;
  }
  @keyframes memberFadeIn {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .member-card.active { display: flex; animation: memberSlideIn 0.5s cubic-bezier(.34,1.4,.64,1) both; }
  @keyframes memberSlideIn {
    from { opacity: 0; transform: translateX(60px) scale(0.97); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
  }
  .member-card.slide-out {
    display: flex;
    animation: memberSlideOut 0.3s ease forwards;
    pointer-events: none;
  }
  @keyframes memberSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-60px); }
  }
  /* Top gold shimmer line */
  .member-card::before {
    content: '';
    position: absolute; top: 0; left: 12%; right: 12%; height: 2px;
    background: linear-gradient(90deg, transparent, #0F766E, #2DD4BF, #0F766E, transparent);
    border-radius: 2px;
  }
  /* Photo side */
  .member-photo-side {
    flex: 0 0 300px;
    background: linear-gradient(160deg, #0F172A 0%, #115E59 45%, #1E293B 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 340px;
  }
  /* Warm ambient light from bottom */
  .member-photo-side::before {
    content: '';
    position: absolute;
    bottom: -30px; left: 50%; transform: translateX(-50%);
    width: 280px; height: 280px; border-radius: 50%;
    background: radial-gradient(circle, rgba(15, 118, 110, 0.28) 0%, rgba(15, 118, 110, 0.14) 50%, transparent 70%);
    border: 2px solid rgba(15, 118, 110, 0.3);
    z-index: 1;
  }
  .member-photo-side::after {
    content: '';
    position: absolute;
    bottom: -55px; left: 50%; transform: translateX(-50%);
    width: 350px; height: 350px; border-radius: 50%;
    border: 1px solid rgba(15, 118, 110, 0.14);
    z-index: 1;
  }
  .member-photo-side img.member-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 0;
    margin: 0;
    z-index: 2;
    filter: brightness(1.04) contrast(1.02);
  }
  /* Gold shimmer overlay at bottom of photo */
  .member-photo-side .member-photo-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(40,10,0,0.72) 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
  }
  .member-avatar-placeholder {
    position: relative; z-index: 2;
    width: 200px; height: 200px; border-radius: 50%;
    border: 4px solid rgba(15, 118, 110, 0.75);
    box-shadow: 0 0 0 6px rgba(15, 118, 110, 0.18), 0 0 0 12px rgba(15, 118, 110, 0.07), 0 16px 48px rgba(0,0,0,0.45);
    margin-bottom: 28px;
    background: linear-gradient(160deg, #115E59, #1E293B);
    display: flex; align-items: center; justify-content: center;
    font-size: 4rem;
    font-weight: 700;
    color: #99F6E4;
    text-shadow: 0 0 24px rgba(15, 118, 110, 0.7);
    letter-spacing: -1px;
  }
  /* Info side */
  .member-info-side {
    flex: 1;
    padding: 40px 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .member-role-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(15, 118, 110, 0.10);
    border: 1px solid rgba(15, 118, 110, 0.32);
    border-radius: 14px;
    padding: 4px 14px;
    font-size: 11.5px; font-weight: 700;
    color: #0F766E; letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 14px;
    width: fit-content;
  }
  .member-role-badge i { color: #0F766E; }
  .member-name {
    font-size: 1.9rem; font-weight: 700;
    color: #1E293B; margin: 0 0 5px;
    line-height: 1.15;
  }
  .member-title {
    font-size: 0.95rem; font-weight: 600;
    color: #64748B; margin: 0 0 22px;
  }
  .member-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(15, 118, 110, 0.35), transparent);
    margin-bottom: 22px;
  }
  .member-bio {
    font-size: 0.96rem;
    color: #555;
    line-height: 1.75;
  }
  .member-bio strong { color: #1E293B; }
  /* Dot indicators */
  .member-dots {
    display: flex; gap: 8px;
    justify-content: center;
    margin-top: 28px;
  }
  .member-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(15, 118, 110, 0.25);
    border: 1.5px solid rgba(15, 118, 110, 0.35);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
  }
  .member-dot.active {
    background: linear-gradient(135deg, #0F766E 0%, #14B8A6 55%, #F59E0B 100%);
    width: 26px; border-radius: 4px;
    border-color: #0F766E;
    box-shadow: 0 0 8px rgba(15, 118, 110, 0.5);
  }
  @media (max-width: 760px) {
    .members-header-top { flex-direction: column; gap: 14px; }
    .members-nav { align-self: flex-end; padding-top: 0; }
    .member-card.active { flex-direction: column; }
    .member-photo-side { flex: 0 0 300px; min-height: 300px; }
    .member-photo-side img.member-avatar { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
    .member-avatar-placeholder { width: 150px; height: 150px; font-size: 3.5rem; margin-bottom: 20px; }
    .member-info-side { padding: 28px 22px 28px; }
    .member-name { font-size: 1.5rem; }
    .members-title { font-size: 1.75rem; }
  }
  @media (max-width: 500px) {
    .member-photo-side { flex: 0 0 280px; min-height: 320px; }
    .member-photo-side img.member-avatar { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
    .member-avatar-placeholder { width: 120px; height: 120px; font-size: 2.8rem; }
    .member-info-side { padding: 22px 18px; }
  }
  
  /* ══ Household Finances SECTION — DISABLED (enable when ready) ══
  To re-enable: remove the opening and closing CSS comment markers
  around this entire block.
  
  .transparency-section {
  padding: 64px 24px;
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  text-align: center;
  }
  .transparency-section h2 {
  font-size: 2.1rem;
  color: #64748B;
  margin-bottom: 6px;
  }
  .transparency-section .tr-subtitle {
  font-size: 1rem;
  color: #888;
  margin-bottom: 36px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  }
  .tr-updated {
  font-size: 11px;
  color: #bbb;
  margin-top: -28px;
  margin-bottom: 32px;
  }
  .tr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  max-width: 720px;
  margin: 0 auto 40px;
  }
  .tr-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px 16px 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  border-top: 3px solid #0F766E;
  }
  .tr-card.green  { border-top-color: #27ae60; }
  .tr-card.red    { border-top-color: #e74c3c; }
  .tr-card.blue   { border-top-color: #14B8A6; }
  .tr-card .tr-card-label {
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  }
  .tr-card .tr-card-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: #334155;
  }
  .tr-card.green .tr-card-value { color: #27ae60; }
  .tr-card.red   .tr-card-value { color: #e74c3c; }
  .tr-card.blue  .tr-card-value { color: #14B8A6; }
  .tr-table-wrap {
  max-width: 800px;
  margin: 0 auto 36px;
  overflow-x: auto;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  }
  .tr-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 13.5px;
  }
  .tr-table thead tr {
  background: #334155;
  color: #fff;
  }
  .tr-table thead th {
  padding: 12px 16px;
  text-align: right;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.3px;
  }
  .tr-table thead th:first-child { text-align: center; }
  .tr-table tbody tr { border-bottom: 1px solid #f1f5f9; }
  .tr-table tbody tr:last-child { border-bottom: none; }
  .tr-table tbody tr.tr-current-year { background: #F0FDFA; font-weight: 600; }
  .tr-table tbody td {
  padding: 11px 16px;
  text-align: right;
  color: #475569;
  }
  .tr-table tbody td:first-child { text-align: center; color: #334155; font-weight: 700; }
  .tr-table tfoot tr { background: #f8fafc; border-top: 2px solid #e2e8f0; }
  .tr-table tfoot td {
  padding: 11px 16px;
  text-align: right;
  font-weight: 700;
  font-size: 13px;
  color: #334155;
  }
  .tr-table tfoot td:first-child { text-align: center; }
  .tr-goals {
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
  }
  .tr-goals-title {
  font-size: 1rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 16px;
  text-align: center;
  }
  .tr-goal-item {
  background: #fff;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .tr-goal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  }
  .tr-goal-name { font-size: 14px; font-weight: 600; color: #334155; }
  .tr-goal-pct  { font-size: 13px; font-weight: 700; color: #0F766E; }
  .tr-goal-bar-bg {
  height: 8px; border-radius: 4px;
  background: #f1f5f9; overflow: hidden;
  }
  .tr-goal-bar-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #0F766E, #0F766E);
  transition: width 1s ease;
  }
  .tr-goal-amounts {
  display: flex; justify-content: space-between;
  font-size: 11px; color: #94a3b8; margin-top: 6px;
  }
  .tr-loading { color: #bbb; font-size: 14px; padding: 32px 0; }
  .tr-privacy-note {
  font-size: 11px; color: #ccc; margin-top: 24px; text-align: center;
  }
  @media (max-width: 600px) {
  .transparency-section h2 { font-size: 1.6rem; }
  .tr-card .tr-card-value { font-size: 1.3rem; }
  .tr-table { font-size: 12px; }
  .tr-table thead th, .tr-table tbody td, .tr-table tfoot td { padding: 9px 10px; }
  }
  ══ END Household Finances CSS ══ */
  
  
  /* ── Chaupai Ticker styles (cp-word / cp-open / cp-close) ── */
  .cp-ticker-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 24px 4px;
    overflow: hidden;
  }
  .cp-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    margin: 0 3px;
  }
  .cp-word span {
    display: inline-block;
    transform-origin: left center;
    transform: rotateY(90deg) translateZ(0);
    opacity: 0;
    transition: transform 0.55s cubic-bezier(0.23,1,0.32,1), opacity 0.45s ease;
    color: #64748B;
    font-family: 'Poppins', sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    line-height: 1.7;
    white-space: nowrap;
    will-change: transform, opacity;
  }
  .cp-word span.cp-open {
    transform: rotateY(0deg) translateZ(0);
    opacity: 1;
  }
  .cp-word span.cp-close {
    transform: rotateY(-90deg) translateZ(0);
    opacity: 0;
    transition: transform 0.38s ease-in, opacity 0.32s ease-in;
  }
  @media (max-width: 600px) {
    .cp-word span { font-size: 0.88rem; letter-spacing: 0.2px; }
    .cp-ticker-wrap { padding: 6px 10px 4px; }
  }
  
  /* ── Chaupai Ticker inner styles (cp-char / cp-spacer / cp-display) ── */
  .cp-ticker-inner {
    position: relative;
    display: inline-block;
    text-align: center;
    max-width: 100%;
  }
  /* Spacer: always = longest chaupai → height/width never collapses, OM stays fixed */
  .cp-spacer {
    visibility: hidden;
    font-family: 'Poppins', sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    line-height: 1.7;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
  }
  /* Display layer sits on top of spacer */
  .cp-display {
    position: absolute;
    top: 0; left: 0; right: 0;
    white-space: nowrap;
    text-align: center;
  }
  /* Each character wrapper — clips the sliding span */
  .cp-char {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
  }
  /* The actual character — slides up to appear, slides down to disappear */
  .cp-char span {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    line-height: 1.7;
    color: #64748B;
    white-space: pre;
    will-change: transform, opacity;
    /* start hidden — below */
    transform: translateY(110%);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.23,1,0.32,1),
                opacity   0.35s ease;
  }
  /* revealed */
  .cp-char span.cp-in {
    transform: translateY(0);
    opacity: 1;
  }
  /* hiding — slide up & out */
  .cp-char span.cp-out {
    transform: translateY(-110%);
    opacity: 0;
    transition: transform 0.3s ease-in,
                opacity   0.25s ease-in;
  }
  @media (max-width: 600px) {
    .cp-char span,
    .cp-spacer { font-size: 0.88rem; letter-spacing: 0.2px; }
    .cp-ticker-wrap { padding: 6px 10px 4px; }
  }
  /* ══════════════════════════════════════════════
     MOBILE-FIRST ADDITIONS — Notch / Safe Area /
     Touch / Performance fixes
  ══════════════════════════════════════════════ */
  
  /* Safe area insets — iPhone notch & home bar */
  @supports (padding: max(0px)) {
    .header {
      padding-left:  max(28px, env(safe-area-inset-left));
      padding-right: max(28px, env(safe-area-inset-right));
    }
    .nav-menu {
      padding-left:  env(safe-area-inset-left, 0px);
      padding-right: env(safe-area-inset-right, 0px);
    }
    .pay-modal-body {
      padding-bottom: max(70px, env(safe-area-inset-bottom, 70px));
    }
  }
  
  /* Hero — prevent text clipping on landscape mobile */
  @media (max-height: 500px) and (orientation: landscape) {
    .hero {
      aspect-ratio: unset;
      min-height: 200px;
    }
    .hero-box { bottom: 10%; }
    .hero-box h1 { font-size: clamp(1.4rem, 4.5vw, 2.2rem); }
    .hero-sub { font-size: clamp(0.72rem, 2.5vw, 0.9rem); }
    .hero-scroll-cue { display: none; }
  }
  
  /* Member card — prevent bio text from creating horizontal scroll */
  .member-bio {
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .member-name {
    word-break: break-word;
  }
  
  /* Member card — stack properly at 480px with no gap overflow */
  @media (max-width: 480px) {
    .member-card.active {
      flex-direction: column;
    }
    .member-photo-side {
      flex: 0 0 auto;
      width: 100%;
      min-height: 220px;
      max-height: 260px;
    }
    .member-info-side {
      padding: 18px 16px 22px;
    }
    /* Bio text smaller on tiny screens */
    .member-bio { font-size: 0.86rem; line-height: 1.6; }
    .member-name { font-size: 1.15rem; }
  }
  
  /* Feedback map iframe — avoid being too tall on small phones */
  @media (max-width: 480px) {
    .feedback-map-side { min-height: 180px; }
    .feedback-map-side iframe { min-height: 160px; max-height: 200px; }
  }
  
  /* Lightbox — full screen on mobile, hide side arrows (swipe already works) */
  @media (max-width: 480px) {
    .gc-lb-panel { padding: 0 8px 8px; }
    .gc-lb-frame img {
      max-width: 98vw;
      max-height: calc(100dvh - 70px);
      border-radius: 10px;
    }
  }
  
  /* Payment modal — single column, ensure readable on tiny phones */
  @media (max-width: 400px) {
    .pay-cards-row { grid-template-columns: 1fr; gap: 14px; }
    .pay-modal-body { padding: 4px 12px 60px; }
    .pay-section-title { font-size: 1.25rem; }
    .pay-card { padding: 18px 14px 16px; }
    .pay-detail-label { font-size: 0.7rem; }
    .pay-detail-value { font-size: 0.78rem; }
  }
  
  /* Nav menu — prevent scroll behind open menu on mobile */
  body.nav-open {
    overflow: hidden;
  }
  
  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
  }
  
  /* Focus visible — keyboard/accessibility */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible {
    outline: 2px solid #0F766E;
    outline-offset: 2px;
    border-radius: 4px;
  }