*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
  body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #101b33; background: #fff; line-height: 1.6; }
  img { max-width: 100%; display: block; }
  a { text-decoration: none; color: inherit; }
  ul { list-style: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; }
  ::selection { background: #dc2626; color: #fff; }
  .display { font-family: 'Fraunces', Georgia, serif; }
  .text-balance { text-wrap: balance; }

  /* ============ COLOR VARS ============ */
  :root {
    --navy-50:#eef2fb; --navy-100:#d4ddf2; --navy-200:#a8bbe0; --navy-300:#7d97cd;
    --navy-400:#5774bb; --navy-500:#3a5aa3; --navy-600:#2d4682; --navy-700:#223665;
    --navy-800:#1a2a4e; --navy-900:#101b33; --navy-950:#0a1124;
    --red-50:#fef2f2; --red-100:#fee2e2; --red-300:#fca5a5; --red-400:#f87171;
    --red-500:#ef4444; --red-600:#dc2626; --red-700:#b91c1c;
    --gold-100:#fef3c7; --gold-300:#fcd34d; --gold-400:#fbbf24; --gold-700:#d97706;
  }

  /* ============ SCROLLBAR ============ */
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: var(--navy-50); }
  ::-webkit-scrollbar-thumb { background: var(--navy-300); border-radius: 99px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--navy-500); }

  /* ============ LAYOUT ============ */
  .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .section { padding: 96px 0; }
  .section-lg { padding: 96px 0; }

  /* ============ UTILITY BAR ============ */
  .top-bar { background: var(--navy-950); color: var(--navy-100); font-size: 12px; }
  .top-bar .container { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; }
  .top-bar a { display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
  .top-bar a:hover { color: #fff; }
  .util-links { display: flex; gap: 20px; }
  .top-bar svg { width: 14px; height: 14px; }
  @media(max-width:768px){ .top-bar { display: none; } }

  /* ============ NAVBAR ============ */
  .navbar { position: sticky; top: 0; z-index: 50; background: #fff; transition: box-shadow .3s, background .3s; }
  .navbar.scrolled { background: rgba(255,255,255,.96); backdrop-filter: blur(12px); box-shadow: 0 4px 30px rgba(16,27,51,.06); }
  .navbar .container { height: 80px; display: flex; align-items: center; justify-content: space-between; }
  .logo-link { display: flex; align-items: center; gap: 12px; }
  .nss-wheel { animation: spin 20s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .logo-text { line-height: 1.2; }
  .logo-text .name { font-family: 'Fraunces',serif; font-weight: 600; font-size: 18px; color: var(--navy-900); }
  .logo-text .sub { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--navy-500); font-weight: 600; }
  .nav-links { display: flex; gap: 4px; }
  .nav-links a { position: relative; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--navy-700); transition: color .2s; }
  .nav-links a::after { content:''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--red-600); transition: width .3s; }
  .nav-links a:hover { color: var(--red-600); }
  .nav-links a:hover::after { width: 24px; }
  .nav-cta { display: inline-flex; align-items: center; gap: 6px; background: var(--red-600); color: #fff; font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: 99px; transition: background .2s, transform .2s; box-shadow: 0 4px 14px rgba(220,38,38,.2); }
  .nav-cta:hover { background: var(--red-700); transform: scale(1.02); }
  .nav-cta svg { width: 16px; height: 16px; }
  .menu-toggle { display: none; padding: 8px; color: var(--navy-800); }
  .menu-toggle svg { width: 24px; height: 24px; }
  @media(max-width:1023px){
    .nav-links, .nav-cta { display: none; }
    .menu-toggle { display: block; }
  }
  .mobile-menu { display: none; border-top: 1px solid var(--navy-100); background: #fff; }
  .mobile-menu.open { display: block; animation: slideDown .3s ease-out; }
  @keyframes slideDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
  .mobile-menu a { display: block; padding: 14px 12px; border-radius: 8px; font-weight: 600; color: var(--navy-700); margin: 2px 0; }
  .mobile-menu a:hover { background: var(--navy-50); color: var(--red-600); }
  .mobile-menu .cta-mobile { background: var(--red-600); color: #fff; text-align: center; border-radius: 99px; margin-top: 8px; }
  .mobile-menu .inner { padding: 16px 24px; }

  /* ============ HERO ============ */
  .hero { position: relative; height: 88vh; min-height: 560px; overflow: hidden; }
  .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; }
  .hero-slide.active { opacity: 1; }
  .hero-slide img { width: 100%; height: 100%; object-fit: cover; }
  .hero-slide::after { content:''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,17,36,.9), rgba(26,42,78,.7), rgba(26,42,78,.3)); }
  .hero-content { position: relative; height: 100%; display: flex; align-items: center; z-index: 2; }
  .hero-inner { max-width: 640px; color: #fff; }
  .hero-eyebrow { display: inline-block; background: rgba(220,38,38,.9); backdrop-filter: blur(4px); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; padding: 8px 16px; border-radius: 99px; margin-bottom: 24px; animation: fadeUp .6s ease-out; }
  .hero-title { font-family: 'Fraunces',serif; font-size: clamp(2.2rem,5vw,3.75rem); font-weight: 600; line-height: 1.1; margin-bottom: 24px; text-wrap: balance; animation: fadeUp .6s ease-out .1s both; }
  .hero-sub { font-size: 1.125rem; color: var(--navy-100); max-width: 560px; margin-bottom: 32px; animation: fadeUp .6s ease-out .2s both; }
  .hero-btns { display: flex; flex-wrap: wrap; gap: 16px; animation: fadeUp .6s ease-out .3s both; }
  .btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--red-600); color: #fff; font-weight: 600; padding: 14px 28px; border-radius: 99px; transition: background .2s, transform .2s; box-shadow: 0 12px 30px rgba(127,29,29,.3); }
  .btn-primary:hover { background: var(--red-700); transform: scale(1.02); }
  .btn-primary svg { width: 16px; height: 16px; }
  .btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.3); color: #fff; font-weight: 600; padding: 14px 28px; border-radius: 99px; transition: background .2s; }
  .btn-ghost:hover { background: rgba(255,255,255,.2); }
  @keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
  .hero-controls { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; z-index: 3; }
  .hero-arrow { width: 40px; height: 40px; border-radius: 99px; background: rgba(255,255,255,.15); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.25); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s; }
  .hero-arrow:hover { background: rgba(255,255,255,.3); }
  .hero-arrow svg { width: 20px; height: 20px; }
  .hero-dots { display: flex; gap: 8px; }
  .hero-dot { height: 6px; border-radius: 99px; background: rgba(255,255,255,.4); transition: all .3s; cursor: pointer; border: none; }
  .hero-dot.active { width: 32px; background: var(--red-500); }
  .hero-dot:not(.active) { width: 12px; }
  .hero-dot:not(.active):hover { background: rgba(255,255,255,.6); }

  /* ============ SECTION HEADER ============ */
  .sec-header { text-align: center; max-width: 640px; margin: 0 auto 64px; }
  .sec-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; color: var(--red-600); }
  .sec-title { font-family: 'Fraunces',serif; font-size: clamp(1.75rem,4vw,3rem); font-weight: 600; color: var(--navy-900); margin-top: 16px; margin-bottom: 16px; text-wrap: balance; }
  .sec-desc { color: var(--navy-600); }

  /* ============ ABOUT ============ */
  .about { background: #fff; position: relative; overflow: hidden; }
  .about-watermark { position: absolute; right: -80px; top: 40px; width: 500px; height: 500px; opacity: .06; pointer-events: none; }
  .about-watermark circle, .about-watermark line { fill: none; stroke: var(--navy-900); stroke-width: .5; }
  .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; position: relative; }
  @media(max-width:900px){ .about-grid { grid-template-columns: 1fr; gap: 40px; } }
  .about-text h2 { font-family: 'Fraunces',serif; font-size: clamp(1.75rem,4vw,3rem); font-weight: 600; color: var(--navy-900); margin-top: 16px; margin-bottom: 24px; line-height: 1.2; text-wrap: balance; }
  .about-text p { color: var(--navy-700); margin-bottom: 16px; }
  .about-card { background: linear-gradient(135deg, var(--navy-900), var(--navy-800)); border-radius: 24px; padding: 40px; color: #fff; position: relative; overflow: hidden; }
  .about-card-glow { position: absolute; top: 0; right: 0; width: 192px; height: 192px; background: rgba(220,38,38,.2); border-radius: 50%; transform: translate(33%,-33%); filter: blur(40px); }
  .about-card-top { display: flex; gap: 20px; margin-bottom: 32px; position: relative; }
  .about-card-top svg { flex-shrink: 0; width: 80px; height: 80px; }
  .about-card-top .label { color: var(--gold-300); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
  .about-card-top .name { font-family: 'Fraunces',serif; font-size: 24px; font-weight: 600; }
  .about-card p { color: var(--navy-100); margin-bottom: 32px; }
  .about-card .divider { border-top: 1px solid rgba(255,255,255,.15); padding-top: 24px; }
  .about-card .motto-label { color: var(--gold-300); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; margin-bottom: 8px; }
  .about-card .motto { font-family: 'Fraunces',serif; font-size: 36px; font-weight: 600; margin-bottom: 4px; }
  .about-card .motto-sub { color: var(--navy-200); font-size: 14px; }
  .about-values { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 80px; }
  @media(max-width:768px){ .about-values { grid-template-columns: 1fr; } }
  .value-card { background: rgba(238,242,251,.6); border: 1px solid var(--navy-100); border-radius: 16px; padding: 32px; transition: box-shadow .3s, transform .3s; }
  .value-card:hover { box-shadow: 0 20px 40px rgba(16,27,51,.05); transform: translateY(-4px); }
  .value-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(220,38,38,.1); color: var(--red-600); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
  .value-icon svg { width: 24px; height: 24px; }
  .value-card h3 { font-family: 'Fraunces',serif; font-size: 20px; font-weight: 600; color: var(--navy-900); margin-bottom: 8px; }
  .value-card p { color: var(--navy-600); font-size: 14px; }

  /* ============ STATS ============ */
  .stats { background: var(--navy-900); position: relative; overflow: hidden; }
  .stats-bg { position: absolute; inset: 0; opacity: .1; pointer-events: none; }
  .stats-bg line { stroke: #fff; stroke-width: .3; }
  .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 48px; position: relative; }
  @media(max-width:768px){ .stats-grid { grid-template-columns: repeat(2,1fr); } }
  .stat-item { text-align: center; }
  .stat-num { font-family: 'Fraunces',serif; font-size: clamp(2rem,5vw,3rem); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
  .stat-suffix { color: var(--gold-400); }
  .stat-label { color: var(--navy-200); font-size: 14px; margin-top: 8px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

  /* ============ ACTIVITIES ============ */
  .activities { background: rgba(238,242,251,.5); }
  .act-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
  @media(max-width:900px){ .act-grid { grid-template-columns: repeat(2,1fr); } }
  @media(max-width:600px){ .act-grid { grid-template-columns: 1fr; } }
  .act-card { background: #fff; border-radius: 16px; padding: 32px; border: 1px solid var(--navy-100); transition: box-shadow .3s, transform .3s; }
  .act-card:hover { box-shadow: 0 20px 50px rgba(16,27,51,.08); transform: translateY(-6px); }
  .act-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; transition: transform .3s; }
  .act-card:hover .act-icon { transform: scale(1.1); }
  .act-icon svg { width: 28px; height: 28px; }
  .act-icon.red { background: rgba(220,38,38,.1); color: var(--red-600); }
  .act-icon.navy { background: rgba(16,27,51,.08); color: var(--navy-700); }
  .act-card h3 { font-family: 'Fraunces',serif; font-size: 20px; font-weight: 600; color: var(--navy-900); margin-bottom: 8px; }
  .act-hours { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
  .act-hours.red { color: var(--red-500); }
  .act-hours.navy { color: var(--navy-500); }
  .act-card p { color: var(--navy-600); font-size: 14px; line-height: 1.6; }

  /* ============ NEWS ============ */
  .news { background: #fff; }
  .news-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; flex-wrap: wrap; gap: 16px; }
  .news-view-all { color: var(--red-600); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; transition: gap .2s; }
  .news-view-all:hover { gap: 8px; }
  .news-view-all svg { width: 16px; height: 16px; }
  .news-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 32px; }
  @media(max-width:900px){ .news-grid { grid-template-columns: 1fr; } }
  .news-cards { display: flex; flex-direction: column; gap: 24px; }
  .news-card { display: flex; gap: 24px; padding: 24px; border-radius: 16px; border: 1px solid var(--navy-100); transition: box-shadow .3s; cursor: pointer; }
  .news-card:hover { box-shadow: 0 12px 30px rgba(16,27,51,.05); }
  .news-date { flex-shrink: 0; width: 80px; text-align: center; background: var(--navy-900); border-radius: 12px; padding: 12px 8px; color: #fff; }
  .news-date svg { width: 20px; height: 20px; margin: 0 auto 4px; color: var(--gold-400); }
  .news-date span { font-size: 12px; font-weight: 600; }
  .news-tags { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
  .news-tag { font-size: 12px; font-weight: 600; color: var(--red-600); background: var(--red-50); padding: 4px 10px; border-radius: 99px; display: inline-flex; align-items: center; gap: 4px; }
  .news-tag svg { width: 12px; height: 12px; }
  .news-badge { font-size: 12px; font-weight: 700; color: var(--gold-700); background: var(--gold-100); padding: 4px 10px; border-radius: 99px; }
  .news-card h3 { font-family: 'Fraunces',serif; font-size: 18px; font-weight: 600; color: var(--navy-900); margin-bottom: 8px; transition: color .2s; }
  .news-card:hover h3 { color: var(--red-600); }
  .news-card p { color: var(--navy-600); font-size: 14px; }
  .notif-panel { background: linear-gradient(135deg, var(--navy-900), var(--navy-800)); border-radius: 16px; padding: 32px; color: #fff; position: sticky; top: 112px; }
  .notif-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
  .notif-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(220,38,38,.2); color: var(--red-400); display: flex; align-items: center; justify-content: center; }
  .notif-icon svg { width: 20px; height: 20px; }
  .notif-header h3 { font-family: 'Fraunces',serif; font-size: 20px; font-weight: 600; }
  .notif-header p { font-size: 12px; color: var(--navy-300); }
  .notif-list li { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); cursor: pointer; }
  .notif-list li:last-child { border-bottom: none; }
  .notif-date { flex-shrink: 0; width: 48px; font-size: 12px; font-weight: 700; color: var(--gold-400); background: rgba(255,255,255,.05); border-radius: 8px; padding: 6px 0; text-align: center; }
  .notif-list li p { font-size: 14px; color: var(--navy-100); transition: color .2s; }
  .notif-list li:hover p { color: #fff; }
  .notif-sub { margin-top: 24px; width: 100%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); color: #fff; font-size: 14px; font-weight: 600; padding: 12px; border-radius: 99px; transition: background .2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
  .notif-sub:hover { background: rgba(255,255,255,.2); }
  .notif-sub svg { width: 16px; height: 16px; }

  /* ============ TEAM ============ */
  .team { background: rgba(238,242,251,.5); }
  .team-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 24px; }
  @media(max-width:1100px){ .team-grid { grid-template-columns: repeat(3,1fr); } }
  @media(max-width:700px){ .team-grid { grid-template-columns: repeat(2,1fr); } }
  @media(max-width:480px){ .team-grid { grid-template-columns: 1fr; } }
  .team-card { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--navy-100); transition: box-shadow .3s, transform .3s; }
  .team-card:hover { box-shadow: 0 20px 50px rgba(16,27,51,.08); transform: translateY(-6px); }
  .team-avatar { aspect-ratio: 1; background: linear-gradient(135deg, var(--navy-800), var(--navy-950)); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
  .team-avatar-bg { position: absolute; inset: 0; opacity: .1; }
  .team-avatar-bg line { stroke: #fff; stroke-width: .4; }
  .team-avatar span { font-family: 'Fraunces',serif; font-size: 48px; font-weight: 700; color: rgba(255,255,255,.9); position: relative; }
  .team-avatar .bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--red-600); opacity: 0; transition: opacity .3s; }
  .team-card:hover .bar { opacity: 1; }
  .team-body { padding: 20px; }
  .team-body h3 { font-family: 'Fraunces',serif; font-size: 18px; font-weight: 600; color: var(--navy-900); line-height: 1.3; }
  .team-role { color: var(--red-600); font-size: 14px; font-weight: 600; margin-top: 4px; margin-bottom: 12px; }
  .team-bio { font-size: 12px; color: var(--navy-600); margin-bottom: 16px; }
  .team-links { display: flex; gap: 8px; }
  .team-links a { width: 32px; height: 32px; border-radius: 99px; background: var(--navy-50); color: var(--navy-600); display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
  .team-links a:hover { background: var(--red-600); color: #fff; }
  .team-links svg { width: 16px; height: 16px; }

  /* ============ GALLERY ============ */
  .gallery { background: #fff; }
  .gal-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 40px; }
  .gal-tab { padding: 8px 20px; border-radius: 99px; font-size: 14px; font-weight: 600; transition: all .2s; background: var(--navy-50); color: var(--navy-700); }
  .gal-tab:hover { background: var(--navy-100); }
  .gal-tab.active { background: var(--red-600); color: #fff; box-shadow: 0 4px 12px rgba(220,38,38,.2); }
  .gal-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
  @media(max-width:700px){ .gal-grid { grid-template-columns: repeat(2,1fr); } }
  .gal-item { position: relative; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; cursor: pointer; }
  .gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
  .gal-item:hover img { transform: scale(1.1); }
  .gal-item::after { content:''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,17,36,.8), transparent 60%); opacity: .6; transition: opacity .3s; }
  .gal-item:hover::after { opacity: .9; }
  .gal-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; text-align: left; z-index: 2; }
  .gal-cat { font-size: 12px; font-weight: 600; color: var(--gold-300); text-transform: uppercase; letter-spacing: .05em; }
  .gal-title { color: #fff; font-family: 'Fraunces',serif; font-weight: 600; font-size: 18px; margin-top: 4px; }
  .gal-zoom { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 99px; background: rgba(255,255,255,.15); backdrop-filter: blur(4px); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.9); transition: all .3s; z-index: 2; }
  .gal-item:hover .gal-zoom { opacity: 1; transform: scale(1); }
  .gal-zoom svg { width: 20px; height: 20px; }
  .gal-item.hidden { display: none; }

  /* Lightbox */
  .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10,17,36,.92); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 24px; }
  .lightbox.open { display: flex; animation: fadeIn .3s; }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }
  .lightbox img { max-width: 100%; max-height: 85vh; border-radius: 16px; box-shadow: 0 25px 60px rgba(0,0,0,.5); }
  .lightbox-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 99px; background: rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s; }
  .lightbox-close:hover { background: rgba(255,255,255,.2); }
  .lightbox-close svg { width: 20px; height: 20px; }

  /* ============ FOOTER ============ */
  .footer { background: var(--navy-950); color: var(--navy-200); }
  .footer-partners { border-bottom: 1px solid rgba(255,255,255,.1); }
  .footer-partners .container { padding-top: 40px; padding-bottom: 40px; text-align: center; }
  .footer-partners .label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; color: var(--navy-400); margin-bottom: 24px; }
  .footer-partners .list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; }
  .footer-partners .list span { color: var(--navy-300); font-weight: 600; font-size: 14px; transition: color .2s; }
  .footer-partners .list span:hover { color: #fff; }
  .footer-main { padding: 64px 0; }
  .footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: 48px; }
  @media(max-width:800px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
  @media(max-width:500px){ .footer-grid { grid-template-columns: 1fr; } }
  .footer-brand .logo-link { margin-bottom: 20px; }
  .footer-brand p { font-size: 14px; line-height: 1.7; margin-bottom: 24px; }
  .footer-social { display: flex; gap: 12px; }
  .footer-social a { width: 36px; height: 36px; border-radius: 99px; background: rgba(255,255,255,.05); color: var(--navy-200); display: flex; align-items: center; justify-content: center; transition: all .2s; }
  .footer-social a:hover { background: var(--red-600); color: #fff; }
  .footer-social svg { width: 16px; height: 16px; }
  .footer-col h4 { font-family: 'Fraunces',serif; font-weight: 600; color: #fff; margin-bottom: 20px; }
  .footer-col ul li { margin-bottom: 12px; }
  .footer-col ul a { font-size: 14px; transition: color .2s; }
  .footer-col ul a:hover { color: var(--red-400); }
  .footer-contact li { display: flex; gap: 12px; font-size: 14px; margin-bottom: 16px; }
  .footer-contact svg { width: 20px; height: 20px; color: var(--red-500); flex-shrink: 0; margin-top: 2px; }
  .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }
  .footer-bottom .container { padding-top: 24px; padding-bottom: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
  .footer-bottom p { font-size: 12px; color: var(--navy-400); }
  .footer-bottom .top-link { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--navy-300); transition: color .2s; }
  .footer-bottom .top-link:hover { color: #fff; }
  .footer-bottom .top-link svg { width: 16px; height: 16px; }

  /* ============ REVEAL ANIMATION ============ */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease-out, transform .7s ease-out; }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  @media(prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } }