:root {
      --navy: #16344F;
      --navy-deep: #0E2438;
      --steel: #3E6488;
      --ink: #1A1A1A;
      --slate: #5C6770;
      --cream: #F7F6F2;
      --white: #FFFFFF;
      --line: #E3E1DB;
      --gold: #B79256;

      /* Display = elegant CJK serif (the headline personality).
         Latin-only bits (logo) use --display. */
      --serif: "Noto Serif SC", "Songti SC", Georgia, serif;
      --display: "Cormorant Garamond", "Noto Serif SC", serif;
      --sans: "Inter", "Noto Sans SC", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

      /* Refined easing — confident, expensive settle */
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

      --maxw: 1240px;
      --gutter: clamp(20px, 3.5vw, 44px);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--sans);
      color: var(--ink);
      background: var(--white);
      line-height: 1.75;
      font-weight: 400;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

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

    .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

    .eyebrow {
      display: inline-flex; align-items: center; gap: 12px;
      font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--gold);
    }
    .eyebrow::before {
      content: ""; width: 30px; height: 1px; background: currentColor; opacity: .65;
    }
    /* centered heads: line on both sides */
    .section-head .eyebrow::after {
      content: ""; width: 30px; height: 1px; background: currentColor; opacity: .65;
    }
    .gold-rule {
      width: 48px; height: 1px; background: var(--gold); margin: 18px auto;
    }

    /* Buttons — sharp, with a smooth fill-sweep (no rounded corners) */
    .btn {
      display: inline-block; font-size: 14px; font-weight: 500;
      letter-spacing: 0.04em; padding: 16px 36px; border-radius: 0;
      cursor: pointer; border: 1px solid transparent;
      background-size: 100% 200%; background-position: 0 0;
      transition: background-position .55s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
    }
    .btn-dark {
      color: #fff;
      background-image: linear-gradient(to bottom, var(--navy) 0 50%, var(--navy-deep) 50% 100%);
    }
    .btn-dark:hover { background-position: 0 100%; }
    .btn-light {
      color: var(--navy);
      background-image: linear-gradient(to bottom, #fff 0 50%, var(--navy) 50% 100%);
    }
    .btn-light:hover { color: #fff; background-position: 0 100%; }
    .btn-outline {
      color: #fff; border-color: rgba(255,255,255,.55);
      background-image: linear-gradient(to bottom, transparent 0 50%, #fff 50% 100%);
    }
    .btn-outline:hover { color: var(--navy); border-color: #fff; background-position: 0 100%; }

    .learn {
      display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500;
      letter-spacing: 0.02em; position: relative; padding-bottom: 4px;
    }
    .learn::after {
      content: ""; position: absolute; left: 0; bottom: 0; height: 1px;
      width: 100%; background: currentColor; transform: scaleX(0);
      transform-origin: left; transition: transform .45s var(--ease);
    }
    .learn::before {
      content: "→"; order: 2; font-size: 14px; transition: transform .45s var(--ease);
    }
    .learn:hover::after { transform: scaleX(1); }
    .learn:hover::before { transform: translateX(5px); }

    /* ===== NAVBAR ===== */
    header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      transition: background .3s ease, box-shadow .3s ease;
    }
    .nav {
      display: flex; align-items: center; justify-content: space-between;
      height: 78px;
    }
    .logo {
      font-family: var(--display); font-size: 27px; font-weight: 600;
      letter-spacing: 0.02em; color: #fff; transition: color .4s var(--ease);
      display: flex; align-items: center;
    }
    .logo b { color: var(--gold); font-weight: 600; }
    /* full-colour bilingual logo on a clean white badge (legible over hero & solid nav) */
    /* transparent logo: white over the dark hero/footer, full-colour on the solid (light) nav — no box */
    .logo img { height: 44px; width: auto; display: block; filter: brightness(0) invert(1); transition: filter .4s var(--ease); }
    header.solid .logo img { filter: none; }
    @media (max-width: 640px) { .logo img { height: 36px; } }
    .nav-links { display: flex; gap: 36px; list-style: none; }
    .nav-links a {
      font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
      color: rgba(255,255,255,.9); transition: color .35s var(--ease); position: relative;
    }
    .nav-links a::after {
      content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 100%;
      background: var(--gold); transform: scaleX(0); transform-origin: left;
      transition: transform .4s var(--ease);
    }
    .nav-links a:hover { color: #fff; }
    .nav-links a:hover::after { transform: scaleX(1); }
    header.solid .nav-links a:hover::after { background: var(--navy); }
    /* current page */
    .nav-links a.active { color: #fff; }
    .nav-links a.active::after { transform: scaleX(1); }
    header.solid .nav-links a.active { color: var(--navy); }
    header.solid .nav-links a.active::after { background: var(--navy); }
    .nav-cta { display: flex; align-items: center; gap: 16px; }

    /* scrolled state */
    header.solid { background: #fff; box-shadow: 0 1px 0 var(--line); }
    header.solid .logo { color: var(--navy); }
    header.solid .nav-links a { color: var(--slate); }
    header.solid .nav-links a:hover { color: var(--navy); }

    .burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background:none; border:0; }
    .burger span { width: 24px; height: 2px; background: #fff; transition: background .3s; }
    header.solid .burger span { background: var(--navy); }

    /* ===== HERO ===== */
    .hero {
      position: relative; min-height: 100vh; min-height: 100svh;
      display: flex; align-items: flex-end; color: #fff; overflow: hidden;
    }
    /* Slideshow stack */
    .hero-slides { position: absolute; inset: 0; }
    .hero-slide {
      position: absolute; inset: 0; background-size: cover; background-position: center;
      opacity: 0; transform: scale(1.04);
      transition: opacity 1.6s ease-in-out;
      will-change: opacity, transform;
    }
    .hero-slide.active {
      opacity: 1;
      /* slow Ken Burns zoom while visible */
      animation: kenburns 7s ease-out forwards;
    }
    @keyframes kenburns {
      from { transform: scale(1.04); }
      to   { transform: scale(1.12); }
    }
    /* fixed gradient overlay (does not fade with slides) */
    .hero-overlay {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(180deg, rgba(14,36,56,.6) 0%, rgba(14,36,56,.25) 35%, rgba(14,36,56,.8) 100%);
    }
    .hero-inner { position: relative; z-index: 2; padding-bottom: 90px; padding-top: 120px; }

    /* Slide indicators — animated progress bars */
    .hero-dots {
      position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%);
      z-index: 3; display: flex; gap: 16px; align-items: center;
    }
    .hero-dots button {
      padding: 0; border: 0; cursor: pointer; background: transparent;
    }
    .hero-dots .track {
      position: relative; width: 52px; height: 2px; border-radius: 0;
      background: rgba(255,255,255,.3); overflow: hidden; transition: background .35s var(--ease);
    }
    .hero-dots button:hover .track { background: rgba(255,255,255,.55); }
    .hero-dots .fill {
      position: absolute; left: 0; top: 0; height: 100%; width: 0;
      background: var(--gold); box-shadow: 0 0 8px rgba(183,146,86,.55);
    }
    .hero-dots button.active .fill { animation: fillbar 6s linear forwards; }
    @keyframes fillbar { from { width: 0; } to { width: 100%; } }

    .hero .eyebrow { color: rgba(255,255,255,.85); }
    .hero h1 {
      font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 5.6vw, 70px);
      line-height: 1.28; letter-spacing: 0.01em; max-width: 18ch; margin: 26px 0 26px;
    }
    .hero p { font-size: 17px; font-weight: 400; line-height: 1.9; max-width: 48ch; color: rgba(255,255,255,.85); margin-bottom: 38px; }
    .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
    /* parallax: hero content drifts/fades on scroll (set via JS var) */
    .hero-inner { transition: opacity .1s linear; }

    /* ===== SECTION GENERIC ===== */
    section.block { padding: 130px 0; }
    .section-head { text-align: center; max-width: 820px; margin: 0 auto 72px; display: flex; flex-direction: column; align-items: center; }
    .section-head h2 {
      font-family: var(--serif); font-weight: 500; font-size: clamp(27px, 3.6vw, 40px);
      line-height: 1.45; letter-spacing: 0.01em; color: var(--ink); margin-top: 22px;
    }

    /* ===== ADVANTAGES CARDS — image with text overlay (ref No.4 / No.5) ===== */
    .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .card {
      position: relative; overflow: hidden; border-radius: 0; isolation: isolate;
      min-height: 460px; display: flex; flex-direction: column;
      padding: 40px 34px; color: #fff;
    }
    /* the photo */
    .card-bg {
      position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center;
      transition: transform 1.3s var(--ease);
    }
    .card:hover .card-bg { transform: scale(1.07); }
    /* navy gradient so overlaid text stays legible (darker at the bottom) */
    .card::after {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background: linear-gradient(180deg, rgba(14,36,56,.30) 0%, rgba(14,36,56,.55) 52%, rgba(14,36,56,.92) 100%);
      transition: opacity .55s var(--ease);
    }
    /* gold rule that sweeps across the top on hover */
    .card::before {
      content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; z-index: 1;
      background: var(--gold); transform: scaleX(0); transform-origin: left;
      transition: transform .55s var(--ease);
    }
    .card:hover::before { transform: scaleX(1); }
    .card-icon {
      width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.45); color: #fff;
      border-radius: 0; display: flex; align-items: center; justify-content: center;
      font-size: 22px; margin-bottom: auto; transition: border-color .55s var(--ease), color .55s var(--ease);
    }
    .card:hover .card-icon { border-color: var(--gold); color: var(--gold); }
    .card h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; margin-bottom: 14px; letter-spacing: 0.01em; }
    .card p { font-size: 15px; line-height: 1.85; color: rgba(255,255,255,.85); }
    .card .learn { margin-top: 22px; color: #fff; }

    /* ===== STATEMENT ===== */
    .statement { background: var(--cream); }
    .statement .wrap { max-width: 960px; text-align: center; }
    .statement p {
      font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 3.2vw, 36px);
      line-height: 1.65; letter-spacing: 0.01em; color: var(--ink);
    }
    .statement .muted { color: #B7B3AB; }
    .statement cite { display: block; margin-top: 32px; font-family: var(--sans); font-size: 14px; font-style: normal; color: var(--slate); letter-spacing: 0.05em; }

    /* ===== FEATURE — full-bleed image, text overlay top-left + caption row (ref No.3/No.5/No.7) ===== */
    .feature-overlay { position: relative; overflow: hidden; }
    .feature-overlay img {
      width: 100%; height: 580px; object-fit: cover; border-radius: 0;
      transition: transform 1.2s var(--ease); display: block;
    }
    .feature-overlay:hover img { transform: scale(1.05); }
    /* gradient that anchors the top-left overlay text */
    .feature-overlay::after {
      content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(155deg, rgba(14,36,56,.72) 0%, rgba(14,36,56,.22) 42%, rgba(14,36,56,0) 68%);
    }
    .overlay-text {
      position: absolute; top: 0; left: 0; z-index: 2; color: #fff;
      padding: clamp(32px, 5vw, 60px); max-width: 640px;
    }
    .overlay-text .eyebrow { color: rgba(255,255,255,.9); }
    .overlay-text h3 {
      font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 3vw, 38px);
      line-height: 1.4; letter-spacing: 0.01em; margin-top: 20px;
    }
    /* caption row below the image */
    .feature-caption {
      display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; margin-top: 44px;
    }
    .meta-item {
      display: flex; justify-content: space-between; gap: 16px; padding: 16px 0;
      border-top: 1px solid var(--line);
    }
    .meta-item:last-child { border-bottom: 1px solid var(--line); }
    .meta-label { font-size: 13px; color: var(--gold); letter-spacing: 0.02em; }
    .meta-value { font-size: 15px; color: var(--ink); text-align: right; }
    .feature-body h4 {
      font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); font-weight: 500;
      color: var(--ink); margin-bottom: 18px; line-height: 1.5; letter-spacing: 0.01em;
    }
    .feature-body p { color: var(--slate); font-size: 16px; line-height: 1.95; }

    /* ===== EVENTS GRID ===== */
    .events { background: var(--white); }
    .events-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 48px; }
    .event { display: flex; flex-direction: column; }
    .event .media { overflow: hidden; }
    .event img { width: 100%; height: 320px; object-fit: cover; border-radius: 0; transition: transform 1.1s var(--ease); }
    .event:hover img { transform: scale(1.06); }
    .event-body { padding: 26px 2px 0; }
    .event .cat { font-size: 12px; letter-spacing: 0.06em; color: var(--gold); font-weight: 500; }
    .event h3 { font-family: var(--serif); font-size: 25px; font-weight: 500; margin: 12px 0 12px; letter-spacing: 0.01em; transition: color .4s var(--ease); }
    .event:hover h3 { color: var(--navy); }
    .event .meta { font-size: 13px; color: var(--slate); margin-bottom: 14px; }
    .event p { color: var(--slate); font-size: 15px; line-height: 1.85; margin-bottom: 18px; }
    .event .learn { color: var(--navy); }
    .event.tall { grid-row: span 1; }

    /* ===== LEADERSHIP — photo-less editorial cards ===== */
    .leaders { background: var(--cream); }
    .leaders-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; counter-reset: leader; }
    .leader {
      position: relative; counter-increment: leader; overflow: hidden;
      background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--gold);
      padding: 40px 40px 38px; transition: transform .55s var(--ease), box-shadow .55s var(--ease);
    }
    /* large faded serif number watermark in the corner */
    .leader::before {
      content: counter(leader, decimal-leading-zero);
      position: absolute; top: 22px; right: 30px; z-index: 0;
      font-family: var(--serif); font-weight: 500; font-size: 60px; line-height: 1;
      color: var(--navy); opacity: .06; pointer-events: none;
    }
    .leader > div { position: relative; z-index: 1; display: flex; flex-direction: column; }
    .leader:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(20,40,60,.10); }
    .leader .role { display: block; font-size: 12px; color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; order: -1; }
    .leader h3 { font-family: var(--serif); font-size: 25px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); margin-bottom: 14px; }
    .leader p { font-size: 14px; line-height: 1.9; color: var(--slate); }

    /* ===== CTA ===== */
    .cta { background: var(--navy); color: #fff; }
    .cta-top {
      display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
      padding: 100px 0 70px; align-items: center;
    }
    .cta-top .eyebrow { color: var(--gold); }
    .cta-top h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.3; letter-spacing: 0.01em; }
    .cta-actions { display: flex; gap: 24px; align-items: center; }

    /* ===== FOOTER ===== */
    footer { background: var(--navy-deep); color: rgba(255,255,255,.7); }
    .foot-main {
      display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
      padding: 70px 0 50px; border-top: 1px solid rgba(255,255,255,.1);
    }
    .foot-main .logo { color: #fff; margin-bottom: 16px; }
    .foot-main p { font-size: 14px; max-width: 30ch; }
    .foot-col h4 { font-size: 13px; letter-spacing: 0.04em; color: #fff; margin-bottom: 20px; font-weight: 600; }
    .foot-col ul { list-style: none; }
    .foot-col li { margin-bottom: 13px; }
    .foot-col a { font-size: 14px; transition: color .35s var(--ease); }
    .foot-col a:hover { color: var(--gold); }
    .foot-main .logo { font-family: var(--display); }
    .foot-main .logo img { height: 48px; width: auto; filter: brightness(0) invert(1); }
    .foot-bottom {
      display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
      padding: 24px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px;
    }

    /* ===== MOBILE MENU ===== */
    .mobile-menu {
      position: fixed; inset: 0; background: var(--navy-deep); z-index: 200;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 28px; transform: translateY(-100%); transition: transform .4s ease;
    }
    .mobile-menu.open { transform: translateY(0); }
    .mobile-menu a { color: #fff; font-family: var(--serif); font-size: 30px; }
    .mobile-menu .close { position: absolute; top: 26px; right: 26px; font-size: 30px; color: #fff; background: none; border: 0; cursor: pointer; }

    /* ===== ANIMATION ===== */
    .reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
    .reveal.in { opacity: 1; transform: none; }
    /* staggered children within a grid */
    .cards .card:nth-child(2), .events-grid .event:nth-child(2), .leaders-grid .leader:nth-child(2) { transition-delay: .08s; }
    .cards .card:nth-child(3), .leaders-grid .leader:nth-child(3) { transition-delay: .16s; }
    .leaders-grid .leader:nth-child(4) { transition-delay: .24s; }

    @media (prefers-reduced-motion: reduce) {
      .reveal { transition: none; opacity: 1; transform: none; }
      .hero-slide.active { animation: none; }
      * { scroll-behavior: auto; }
    }

    /* ===== RESPONSIVE ============================================
       Strategy (desktop-first): base styles target laptops/desktops
       (≥1024px). Min-width queries enhance big screens; max-width
       queries adapt down through tablet → phone.
       ============================================================ */

    /* ---- Big screens: widen canvas so content isn't a thin column ---- */
    @media (min-width: 1600px) {
      :root { --maxw: 1440px; }
      section.block { padding: 150px 0; }
      .hero-inner { padding-top: 140px; padding-bottom: 110px; }
    }
    /* ---- 4K / ultra-wide ---- */
    @media (min-width: 1920px) {
      :root { --maxw: 1560px; }
      .hero h1 { font-size: clamp(64px, 4.4vw, 88px); }
      section.block { padding: 170px 0; }
    }

    /* ---- Laptops / small desktops ---- */
    @media (max-width: 1199px) {
      section.block { padding: 112px 0; }
    }

    /* ---- Tablet landscape & below (incl. iPad portrait) ---- */
    @media (max-width: 1023px) {
      .cards { grid-template-columns: 1fr; }
      .card { min-height: 400px; }
      .feature-overlay img { height: 480px; }
      .foot-main { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
      .section-head { margin-bottom: 56px; }
      section.block { padding: 96px 0; }
    }

    /* ---- Nav collapses to hamburger (5 CN links crowd below ~900) ---- */
    @media (max-width: 900px) {
      .nav-links, .nav-cta .btn { display: none; }
      .burger { display: flex; }
      .nav { height: 68px; }
      .leaders-grid { grid-template-columns: 1fr; }
      .cta-top { grid-template-columns: 1fr; gap: 28px; padding: 84px 0 64px; }
    }

    /* ---- Tablet portrait / large phones ---- */
    @media (max-width: 768px) {
      .events-grid { grid-template-columns: 1fr; gap: 46px; }
      .feature-caption { grid-template-columns: 1fr; gap: 32px; }
      .feature-overlay img { height: 420px; }
      .event img { height: 300px; }
      .hero-inner { padding-top: 100px; padding-bottom: 56px; }
      section.block { padding: 84px 0; }
    }

    /* ---- Phones ---- */
    @media (max-width: 640px) {
      .foot-main { grid-template-columns: 1fr; gap: 36px; }
      .feature-overlay img { height: 360px; }
      .event img { height: 240px; }
      .card { min-height: 340px; padding: 32px 26px; }
      .leader { padding: 32px 28px 30px; }
      .overlay-text { max-width: none; }
      .overlay-text h3 br { display: none; }
      .hero-dots { gap: 10px; bottom: 22px; }
      .hero-dots .track { width: 28px; }
      .statement cite { margin-top: 24px; }
      section.block { padding: 64px 0; }
    }

    /* ---- Small phones: full-width CTAs, stack actions ---- */
    @media (max-width: 480px) {
      .hero-actions { width: 100%; gap: 12px; }
      .hero-actions .btn { flex: 1 1 100%; text-align: center; }
      .cta-actions { flex-direction: column; align-items: flex-start; gap: 16px; }
      .btn { padding: 15px 28px; }
      .mobile-menu a { font-size: 26px; }
    }

    /* ---- Very small phones (≤360, e.g. iPhone SE) ---- */
    @media (max-width: 360px) {
      .hero h1 { font-size: 31px; }
      .section-head h2 { font-size: 23px; }
      .meta-item { flex-direction: column; gap: 4px; }
      .meta-value { text-align: left; }
    }

    /* =====================================================================
       INNER PAGE COMPONENTS  (about / philosophy / membership / events / contact)
       ===================================================================== */

    /* ---- Page banner (a shorter hero for inner pages) ---- */
    .page-banner {
      position: relative; min-height: 60vh; display: flex; align-items: flex-end;
      color: #fff; overflow: hidden;
    }
    .page-banner .banner-bg {
      position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
      transform: scale(1.06); animation: kenburns 9s ease-out forwards;
    }
    .page-banner::after {
      content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(180deg, rgba(14,36,56,.55) 0%, rgba(14,36,56,.25) 40%, rgba(14,36,56,.78) 100%);
    }
    .banner-inner { position: relative; z-index: 2; padding: 130px 0 64px; }
    .banner-inner .eyebrow { color: rgba(255,255,255,.85); }
    .banner-inner h1 {
      font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 5vw, 60px);
      line-height: 1.2; letter-spacing: 0.01em; margin: 22px 0 0; max-width: 20ch;
    }
    .banner-inner p { margin-top: 18px; max-width: 52ch; color: rgba(255,255,255,.85); font-size: 17px; line-height: 1.9; }

    /* ---- Left-aligned section head variant ---- */
    .section-head.left { text-align: left; align-items: flex-start; margin-left: 0; max-width: 760px; }
    .section-head.left .eyebrow::after { display: none; }

    /* ---- Two-column split (label/heading left · prose right) ---- */
    .split { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
    .split .split-head h2 {
      font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3.4vw, 38px);
      line-height: 1.4; letter-spacing: 0.01em; margin-top: 20px; color: var(--ink);
    }
    .prose p { color: var(--slate); font-size: 16px; line-height: 1.95; margin-bottom: 22px; }
    .prose p:last-child { margin-bottom: 0; }
    .prose .lead { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 26px); color: var(--ink); line-height: 1.6; margin-bottom: 28px; }
    .prose strong { color: var(--ink); font-weight: 600; }
    .prose strong.em-lg { font-family: var(--serif); font-size: 19px; }

    /* ---- Stats band ---- */
    .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
    .stat { background: var(--white); padding: 44px 28px; text-align: center; }
    .stat .num { font-family: var(--display); font-size: clamp(40px, 5vw, 60px); font-weight: 600; color: var(--navy); line-height: 1; }
    .stat .num b { color: var(--gold); font-weight: 600; }
    .stat .label { margin-top: 14px; font-size: 14px; color: var(--slate); }

    /* ---- Numbered list (strengths / capabilities) ---- */
    .numbered { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
    .num-item { background: var(--white); padding: 44px 40px; transition: background .5s var(--ease); }
    .num-item:hover { background: var(--cream); }
    .num-item .idx { font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--gold); }
    .num-item h3 { font-family: var(--serif); font-size: 23px; font-weight: 500; margin: 16px 0 12px; color: var(--ink); letter-spacing: 0.01em; }
    .num-item p { color: var(--slate); font-size: 15px; line-height: 1.85; }

    /* ---- Value cards (vision / mission / values) ---- */
    .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .value-card { border: 1px solid var(--line); padding: 48px 38px; transition: border-color .5s var(--ease), transform .5s var(--ease); background: var(--white); }
    .value-card:hover { border-color: var(--gold); transform: translateY(-4px); }
    .value-card .vc-icon { width: 52px; height: 52px; border: 1px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 28px; }
    .value-card h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; margin-bottom: 14px; color: var(--ink); }
    .value-card p { color: var(--slate); font-size: 15px; line-height: 1.9; }

    /* ---- Steps / process timeline ---- */
    .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: step; }
    .step { position: relative; padding-top: 30px; border-top: 2px solid var(--line); }
    .step .snum { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--gold); }
    .step h3 { font-family: var(--serif); font-size: 20px; font-weight: 500; margin: 10px 0 10px; color: var(--ink); }
    .step p { color: var(--slate); font-size: 14px; line-height: 1.8; }

    /* ---- Benefit list ---- */
    .benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
    .benefit { background: var(--white); padding: 36px 34px; display: flex; gap: 20px; align-items: flex-start; transition: background .5s var(--ease); }
    .benefit:hover { background: var(--cream); }
    .benefit .b-mark { color: var(--gold); font-size: 20px; line-height: 1.4; }
    .benefit h3 { font-family: var(--serif); font-size: 20px; font-weight: 500; margin-bottom: 8px; color: var(--ink); }
    .benefit p { color: var(--slate); font-size: 14px; line-height: 1.8; }

    /* ---- Forms ---- */
    .form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
    .form .full { grid-column: 1 / -1; }
    .field { display: flex; flex-direction: column; gap: 8px; }
    .field label { font-size: 13px; color: var(--slate); letter-spacing: 0.02em; }
    .field label .req { color: var(--gold); }
    .field input, .field select, .field textarea {
      font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--white);
      border: 1px solid var(--line); border-radius: 0; padding: 14px 16px; width: 100%;
      transition: border-color .4s var(--ease);
    }
    .field textarea { min-height: 140px; resize: vertical; }
    .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); }
    /* dropdown option list: force readable dark-on-white (OS popup ignores select colors) */
    .field select option { color: var(--ink); background: var(--white); }
    /* invalid field highlight */
    .field input.invalid, .field select.invalid, .field textarea.invalid { border-color: #C0392B; }
    .form-note { font-size: 13px; color: var(--slate); margin-top: 6px; }
    .form-success {
      display: none; grid-column: 1 / -1; padding: 20px 22px; background: var(--cream);
      border-left: 2px solid var(--gold); color: var(--ink); font-size: 15px;
    }
    .form-success.show { display: block; }
    .form-success.error { border-left-color: #C0392B; }

    /* form section divider + consent checkbox */
    .form-sect {
      grid-column: 1 / -1; font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
      color: var(--gold); padding-top: 18px; border-top: 1px solid var(--line); margin-top: 6px;
    }
    .form-sect:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
    .field-check {
      grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start;
      font-size: 14px; line-height: 1.7; color: var(--slate); cursor: pointer;
    }
    .field-check input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--gold); cursor: pointer; }

    /* form on a dark (navy) panel */
    .panel-dark { background: var(--navy); color: #fff; }
    .panel-dark .form-sect { border-top-color: rgba(255,255,255,.18); }
    .panel-dark .field-check { color: rgba(255,255,255,.82); }
    .panel-dark .field label { color: rgba(255,255,255,.75); }
    .panel-dark .field input, .panel-dark .field select, .panel-dark .field textarea {
      background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #fff;
    }
    .panel-dark .field input:focus, .panel-dark .field select:focus, .panel-dark .field textarea:focus { border-color: var(--gold); }
    .panel-dark .field input.invalid, .panel-dark .field select.invalid, .panel-dark .field textarea.invalid { border-color: #E8826F; }
    .panel-dark .form-note { color: rgba(255,255,255,.6); }

    /* ---- Tabs (events filter) ---- */
    .tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 56px; }
    .tab {
      font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
      padding: 11px 24px; border: 1px solid var(--line); background: transparent; color: var(--slate);
      cursor: pointer; border-radius: 0; transition: all .4s var(--ease);
    }
    .tab:hover { border-color: var(--navy); color: var(--navy); }
    .tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }
    .event.hide { display: none; }

    /* ---- Contact info ---- */
    .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
    .info-item { padding: 24px 0; border-top: 1px solid var(--line); }
    .info-item:last-child { border-bottom: 1px solid var(--line); }
    .info-item .info-label { font-size: 13px; color: var(--gold); letter-spacing: 0.04em; margin-bottom: 8px; }
    .info-item .info-value { font-size: 17px; color: var(--ink); }
    .info-item .info-value a { color: var(--ink); transition: color .3s var(--ease); }
    .info-item .info-value a:hover { color: var(--gold); }

    /* ---- Inner-page responsive ---- */
    @media (max-width: 1023px) {
      .stats { grid-template-columns: repeat(2, 1fr); }
      .value-grid { grid-template-columns: 1fr; }
      .steps { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
    }
    @media (max-width: 900px) {
      .split { grid-template-columns: 1fr; gap: 32px; }
      .contact-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
      .numbered, .benefit-grid { grid-template-columns: 1fr; }
      .page-banner { min-height: 50vh; }
      .banner-inner { padding-top: 110px; }
    }
    @media (max-width: 560px) {
      .form { grid-template-columns: 1fr; }
      .stats { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr; gap: 28px; }
    }