:root{
            --ink:#16241A;
            --ink-soft:#1E2E22;
            --paper:#F5F1E6;
            --paper-dim:#ECE6D6;
            --clay:#BB5B2C;
            --court:#3D8B3F;
            --court-deep:#2C6B2C;
            --chalk:#EDE6D6;
            --chalk-dim:rgba(237,230,214,0.55);
            --line:rgba(237,230,214,0.14);
            --line-ink:rgba(22,36,26,0.12);
            --font-display:'Fraunces', serif;
            --font-body:'Inter', sans-serif;
            --font-mono:'IBM Plex Mono', monospace;
            --transition:0.3s ease;
            --glass-bg:rgba(237,230,214,0.05);
            --glass-border:rgba(237,230,214,0.12);
            --shadow:0 4px 60px rgba(22,36,26,0.08);
        }
        *{box-sizing:border-box; margin:0; padding:0;}
        html{scroll-behavior:smooth;}
        body{
            font-family:var(--font-body);
            background:var(--paper);
            color:var(--ink);
            -webkit-font-smoothing:antialiased;
            overflow-x:hidden;
        }
        img,svg{display:block; max-width:100%;}
        a{color:inherit; text-decoration:none;}
        ul{list-style:none;}
        .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
        @media(max-width:640px){.wrap{padding:0 20px;}}

        /* === scroll progress bar === */
        .scroll-progress{
            position:fixed;top:0;left:32px;right:32px;height:3px;
            background:rgba(237,230,214,0.08);border-radius:2px;overflow:hidden;z-index:151;
            max-width:1180px;margin:0 auto;
        }
        .scroll-progress .bar{
            height:100%;width:0%;
            background:linear-gradient(90deg,var(--court),var(--clay));
            transition:width .1s ease;
        }
        @media(max-width:640px){.scroll-progress{left:20px;right:20px;}}

        /* === scroll to top === */
        .scroll-top{
            position:fixed;bottom:32px;right:32px;width:48px;height:48px;
            background:var(--ink);color:var(--chalk);
            border-radius:50%;display:flex;align-items:center;justify-content:center;
            opacity:0;visibility:hidden;transition:all .3s ease;cursor:pointer;
            z-index:140;border:1px solid var(--line);font-size:20px;
            box-shadow:var(--shadow);
        }
        .scroll-top.visible{opacity:1;visibility:visible;transform:translateY(0);
            box-shadow:0 12px 40px rgba(22,36,26,0.35);}

        /* === entrance animations === */
        .reveal{
            opacity:0;transform:translateY(32px);
            transition:opacity .8s ease,transform .8s ease;
            transition-delay:var(--delay,0s);
        }
        .reveal.revealed{opacity:1;transform:translateY(0);}
        .reveal.revealed .reveal{opacity:1;transform:translateY(0);}

        /* === keyframes === */
        @keyframes pulseSlow{
            0%,100%{opacity:.55;}
            50%{opacity:.9;}
        }
        @keyframes shimmer{
            0%{background-position:-200% 0;}
            100%{background-position:200% 0;}
        }
        @keyframes float{
            0%,100%{transform:translateY(0) rotate(-1deg);}
            50%{transform:translateY(-8px) rotate(1deg);}
        }
        @keyframes gradientShift{
            0%{background-position:0% 50%;}
            50%{background-position:100% 50%;}
            100%{background-position:0% 50%;}
        }

        /* === glassmorphism mixin === */
        .glass{background:var(--glass-bg);backdrop-filter:blur(12px);
            -webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);}

        .eyebrow{
            font-family:var(--font-mono);
            font-size:11px;
            letter-spacing:.14em;
            text-transform:uppercase;
            opacity:.65;
        }

        /* ---------- header ---------- */
        header{
            position:fixed; top:0; left:0; right:0; z-index:150;
            background:rgba(22,36,26,0.72);
            backdrop-filter:blur(10px);
            -webkit-backdrop-filter:blur(10px);
            border-bottom:1px solid var(--line);
        }
        .nav{
            display:flex; align-items:center; justify-content:space-between;
            padding:16px 32px; max-width:1180px; margin:0 auto;
            color:var(--chalk);
        }
        .wordmark{
            font-family:var(--font-display); font-weight:600; font-size:19px;
            letter-spacing:.01em; display:flex; align-items:center; gap:8px;
        }
        .wordmark .dot{width:7px; height:7px; border-radius:50%; background:var(--court); display:inline-block;}
        .nav-links{display:flex; align-items:center; gap:30px; font-size:13.5px; font-weight:500;}
        .nav-links a{opacity:.82; transition:opacity .2s;}
        .nav-links a:hover{opacity:1;}
        .nav-phone{font-family:var(--font-mono); font-size:12.5px; opacity:.75;}
        .nav-toggle{display:none; background:none; border:none; color:var(--chalk); font-size:22px; cursor:pointer;}
        @media(max-width:820px){
            .nav-links{display:none;}
            .nav-toggle{display:block;}
        }

        /* ---------- hero ---------- */
        .hero{
            position:relative;
            background:var(--ink);
            color:var(--chalk);
            padding:168px 0 90px;
            overflow:hidden;
        }
        .court-lines{
            position:absolute; inset:0; width:100%; height:100%;
            opacity:.5;
        }
        .hero-inner{position:relative; z-index:2;}
        .hero-eyebrow{color:var(--chalk-dim); margin-bottom:22px;}
        .hero h1{
            font-family:var(--font-display);
            font-weight:600;
            font-size:clamp(44px, 8vw, 92px);
            line-height:.98;
            letter-spacing:-.01em;
            max-width:820px;
        }
        .hero h1 em{
            font-style:italic; font-weight:400; color:var(--court);
        }
        .hero p.lede{
            font-size:17px; line-height:1.65; max-width:480px;
            color:var(--chalk-dim); margin-top:26px;
        }
        .hero-ctas{display:flex; gap:14px; margin-top:38px; flex-wrap:wrap;}
        .btn{
            font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em;
            text-transform:uppercase; padding:14px 26px;
            border-radius:2px; transition:all .2s ease; display:inline-block;
        }
        .btn-primary{background:var(--court); color:var(--ink);}
        .btn-primary:hover{background:#4FA24A;}
        .btn-ghost{border:1px solid var(--line); color:var(--chalk);}
        .btn-ghost:hover{border-color:var(--chalk-dim); background:rgba(237,230,214,.05);}

        

        /* ---------- ticker ---------- */
        .ticker{
            background:var(--court-deep); color:var(--chalk);
            overflow:hidden; white-space:nowrap; border-top:1px solid rgba(0,0,0,.15);
            border-bottom:1px solid rgba(0,0,0,.15);
        }
        .ticker-track{
            display:inline-flex; gap:48px; padding:13px 0;
            animation:scroll 26s linear infinite;
            font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
        }
        .ticker-track span{opacity:.92;}
        @keyframes scroll{
            from{transform:translateX(0);}
            to{transform:translateX(-50%);}
        }
        @media(prefers-reduced-motion:reduce){.ticker-track{animation:none;}}

        /* ---------- section shell ---------- */
        section{padding:100px 0;}
        .section-head{max-width:640px; margin-bottom:56px;}
        .section-head .eyebrow{color:var(--clay); margin-bottom:14px;}
        .section-head h2{
            font-family:var(--font-display); font-weight:500; font-size:clamp(30px,4vw,46px);
            line-height:1.08; letter-spacing:-.01em;
        }
        .section-head p{margin-top:16px; font-size:16px; line-height:1.65; color:#3E4A3F;}

        /* ---------- villages ---------- */
        .villages{background:var(--paper);}
        .village-grid{
            display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
            background:var(--line-ink); border:1px solid var(--line-ink);
        }
        @media(max-width:900px){.village-grid{grid-template-columns:1fr;}}
        .village-card{
            background:var(--paper); padding:38px 32px 32px; position:relative;
            transition:background .25s ease;
        }
        .village-card:hover{background:var(--paper-dim);}
        .village-card .status{
            font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
            color:var(--court-deep); margin-bottom:22px; display:block;
        }
        .village-icon{width:52px; height:52px; margin-bottom:26px;}
        .village-card h3{font-family:var(--font-display); font-weight:500; font-size:23px; margin-bottom:8px;}
        .village-card .loc{font-size:13.5px; color:#5C6B5D; margin-bottom:16px;}
        .village-card .desc{font-size:14.5px; line-height:1.6; color:#3E4A3F; margin-bottom:22px;}
        .village-card .cta{
            font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
            color:var(--clay); border-bottom:1px solid var(--clay); padding-bottom:2px;
        }

        /* ---------- feature deep dive ---------- */
        .deepdive{background:var(--ink); color:var(--chalk);}
        .deepdive .section-head .eyebrow{color:var(--court);}
        .deepdive .section-head p{color:var(--chalk-dim);}
        .dd-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:64px;}
        @media(max-width:900px){.dd-grid{grid-template-columns:1fr; gap:48px;}}
        .feature-list{display:flex; flex-direction:column; gap:0;}
        .feature-item{
            padding:22px 0; border-top:1px solid var(--line);
            display:grid; grid-template-columns:34px 1fr; gap:18px;
        }
        .feature-item:last-child{border-bottom:1px solid var(--line);}
        .feature-item .num{font-family:var(--font-mono); font-size:12px; color:var(--court); padding-top:2px;}
        .feature-item h4{font-family:var(--font-display); font-weight:500; font-size:18px; margin-bottom:6px;}
        .feature-item p{font-size:14px; line-height:1.6; color:var(--chalk-dim);}

        .court-panel{
            border:1px solid var(--line); padding:30px;
        }
        .court-panel .label{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--chalk-dim); margin-bottom:22px;}
        .court-rows{display:flex; flex-direction:column; gap:16px;}
        .court-row{display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--line);}
        .court-row:last-child{border-bottom:none; padding-bottom:0;}
        .court-row .surface{display:flex; align-items:center; gap:10px; font-size:14.5px;}
        .surface-dot{width:10px; height:10px; border-radius:50%;}
        .court-row .count{font-family:var(--font-mono); font-size:13px; color:var(--chalk-dim); text-align:right;}
        .court-row .count b{color:var(--chalk); font-weight:500;}

        .amenities{margin-top:26px; display:flex; flex-wrap:wrap; gap:8px;}
        .amenities span{
            font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em;
            border:1px solid var(--line); padding:7px 11px; color:var(--chalk-dim);
        }

        /* ---------- vision ---------- */
        .vision{background:var(--paper);}
        .vision-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start;}
        @media(max-width:900px){.vision-grid{grid-template-columns:1fr; gap:36px;}}
        .vision-quote{
            font-family:var(--font-display); font-style:italic; font-weight:400;
            font-size:clamp(24px,2.6vw,32px); line-height:1.35; color:var(--ink);
        }
        .vision-body p{font-size:15.5px; line-height:1.75; color:#3E4A3F; margin-bottom:18px;}

        /* ---------- footer / contact ---------- */
        footer{background:var(--ink); color:var(--chalk); padding:90px 0 34px;}
        .foot-grid{
            display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:56px;
            padding-bottom:64px; border-bottom:1px solid var(--line);
        }
        @media(max-width:800px){.foot-grid{grid-template-columns:1fr; gap:40px;}}
        .foot-lede h3{
            font-family:var(--font-display); font-weight:500; font-size:clamp(28px,3.4vw,40px);
            line-height:1.15; margin-bottom:22px; max-width:420px;
        }
        .foot-col .label{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--chalk-dim); margin-bottom:16px;}
        .foot-col p, .foot-col a{font-size:14.5px; line-height:1.8; color:var(--chalk-dim); display:block;}
        .foot-col a:hover{color:var(--chalk);}
        .foot-bottom{
            display:flex; justify-content:space-between; align-items:center; padding-top:28px;
            font-family:var(--font-mono); font-size:11px; color:var(--chalk-dim); flex-wrap:wrap; gap:10px;
        }
        /* --- header / nav --- */
        .nav a{position:relative;}
        .nav a.active{opacity:1;}
        .nav a.active::after{
            content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
            border-radius:2px; background:linear-gradient(90deg,var(--court),var(--clay),var(--court));
            background-size:200% 100%; animation:gradientShift 3s ease infinite;
        }
        .nav-toggle{background:none; border:none; color:var(--chalk); font-size:22px; cursor:pointer; z-index:210; transition:transform .3s ease;}
        .nav-toggle:hover{transform:scale(1.15);}
        @media(max-width:820px){
            .nav-links{
                position:fixed; top:0; right:-100%; height:100vh; width:280px;
                background:rgba(22,36,26,0.96); backdrop-filter:blur(16px);
                -webkit-backdrop-filter:blur(16px);
                display:flex; flex-direction:column; padding:96px 32px 40px; gap:26px;
                transition:right .4s cubic-bezier(.77,0,.18,1);
                z-index:200; font-size:16px; border-left:1px solid var(--line);
                box-shadow:-20px 0 60px rgba(0,0,0,0.4);
            }
            body.nav-open .nav-links{right:0;}
            body.nav-open .nav-toggle{position:fixed; right:20px; top:20px;}
        }

        /* --- buttons with shimmer --- */
        .btn{position:relative; overflow:hidden;}
        .btn::after{
            content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
            background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
            transform:skewX(-20deg); transition:left .5s ease;
        }
        .btn:hover::after{left:130%;}
        .btn:active{transform:scale(0.97);}

        /* --- hero --- */
        .hero::before{
            content:''; position:absolute; inset:0;
            background:linear-gradient(135deg, rgba(61,139,63,0.16) 0%, rgba(187,91,44,0.08) 45%, transparent 70%);
            opacity:.7; pointer-events:none;
        }
        .court-lines{transition:transform .2s ease-out;}
        .plan-card{
            background:rgba(237,230,214,0.045);
            backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
            box-shadow:0 20px 60px rgba(0,0,0,0.3);
            animation:float 7s ease-in-out infinite;
        }
        .plan-card:hover{animation-play-state:paused;}
        .seg.tennis{animation:pulseSlow 6s ease-in-out infinite;}

        /* --- village cards --- */
        .village-card{will-change:transform;}
        .village-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
        .village-icon{transition:transform .4s var(--transition);}
        .village-card:hover .village-icon{transform:scale(1.12) rotate(-4deg);}

        /* --- deepdive --- */
        .feature-item{transition:background .3s ease;}
        .feature-item:hover{background:rgba(237,230,214,0.03);}
        .feature-item .num{transition:color .3s ease, transform .3s ease;}
        .feature-item:hover .num{color:var(--chalk); transform:translateX(2px);}
        .court-panel{background:rgba(237,230,214,0.03); backdrop-filter:blur(10px);
            -webkit-backdrop-filter:blur(10px); transition:box-shadow .3s ease;}
        .court-panel:hover{box-shadow:0 20px 60px rgba(0,0,0,0.25);}

        /* --- gallery --- */
        .g-tile{transition:transform .4s ease;}
        .g-tile:hover{transform:scale(1.04); z-index:2;}
        .g-tile span{transition:letter-spacing .3s ease;}
        .g-tile:hover span{letter-spacing:.14em;}
        /* --- About Us section --- */
        .about{position:relative; overflow:hidden;}
        .about::before{
            content:''; position:absolute; inset:0; pointer-events:none;
            background:
                    radial-gradient(circle at 15% 20%, rgba(61,139,63,0.05) 0%, transparent 45%),
                    radial-gradient(circle at 85% 80%, rgba(187,91,44,0.05) 0%, transparent 45%);
        }
        .about-quote{text-align:center; padding:20px 0 8px; position:relative; z-index:1;}
        .about-quote .quote{
            font-family:var(--font-display); font-style:italic; font-weight:400;
            font-size:clamp(24px,2.8vw,34px); line-height:1.4; color:var(--ink);
            max-width:860px; margin:0 auto;
        }
        .about-body{max-width:720px; margin:0 auto 8px; text-align:center; position:relative; z-index:1;}
        .about-body p{font-size:15.5px; line-height:1.75; color:#3E4A3F; margin-bottom:18px;}

        /* mission / vision / values */
        .about-grid{
            display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
            padding:56px 0 8px; position:relative; z-index:1;
        }
        @media(max-width:900px){.about-grid{grid-template-columns:1fr;}}
        .mcv-card{
            padding:38px 32px; border-radius:12px; text-align:center;
            background:var(--glass-bg); backdrop-filter:blur(12px);
            -webkit-backdrop-filter:blur(12px); border:1px solid var(--line-ink);
            transition:transform .35s var(--transition), box-shadow .35s var(--transition), border-color .35s ease;
            will-change:transform;
        }
        .mcv-card:hover{
            transform:translateY(-8px);
            box-shadow:0 24px 60px rgba(22,36,26,0.12);
            border-color:rgba(61,139,63,0.3);
        }
        .mcv-icon{
            width:58px; height:58px; margin:0 auto 22px; border-radius:50%;
            display:flex; align-items:center; justify-content:center;
            background:var(--ink); color:var(--chalk);
        }
        .mcv-icon svg{width:26px; height:26px; stroke:var(--chalk); fill:none; stroke-width:1.5;}
        .mcv-card h3{font-family:var(--font-display); font-weight:500; font-size:21px; margin-bottom:14px;}
        .mcv-card p{font-size:14.5px; line-height:1.7; color:#3E4A3F;}
        .mcv-values{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:16px;}
        .mcv-values span{
            font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em;
            border:1px solid var(--line-ink); padding:6px 10px; border-radius:20px; color:#3E4A3F;
        }
        /* --- staggers --- */
        .village-grid .village-card:nth-child(1){--delay:.05s;}
        .village-grid .village-card:nth-child(2){--delay:.15s;}
        .village-grid .village-card:nth-child(3){--delay:.25s;}
        .feature-list .feature-item:nth-child(1){--delay:.05s;}
        .feature-list .feature-item:nth-child(2){--delay:.15s;}
        .feature-list .feature-item:nth-child(3){--delay:.25s;}
        .feature-list .feature-item:nth-child(4){--delay:.35s;}
        .gallery-grid .g-tile:nth-child(1){--delay:.03s;}
        .gallery-grid .g-tile:nth-child(2){--delay:.08s;}
        .gallery-grid .g-tile:nth-child(3){--delay:.13s;}
        .gallery-grid .g-tile:nth-child(4){--delay:.18s;}
        .gallery-grid .g-tile:nth-child(5){--delay:.23s;}
        .gallery-grid .g-tile:nth-child(6){--delay:.28s;}
        .gallery-grid .g-tile:nth-child(7){--delay:.33s;}
        .gallery-grid .g-tile:nth-child(8){--delay:.38s;}
        .about-grid .mcv-card:nth-child(1){--delay:.1s;}
        .about-grid .mcv-card:nth-child(2){--delay:.25s;}
        .about-grid .mcv-card:nth-child(3){--delay:.4s;}
        

        /* --- reduced motion --- */
        @media(prefers-reduced-motion:reduce){
            .reveal{opacity:1; transform:none; transition:none;}
            .t-item, .plan-card, .seg.tennis, .g-tile, .village-card, .ticker-track{animation:none !important;}
        }
        body.nav-open{overflow:hidden;}

        .wordmark img { height: 45px; width: auto; object-fit: contain; }
        .nav-login { font-family: var(--font-mono); font-size: 12.5px; border: 1px solid var(--line); padding: 8px 16px; border-radius: 2px; transition: all 0.2s ease; }
        .nav-login:hover { background: rgba(237,230,214,.05); border-color: var(--chalk-dim); }
        .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
        @media(max-width:900px){ .hero-grid { grid-template-columns: 1fr; } }
        .hero-render { width: 100%; height: auto; border-radius: 8px; box-shadow: var(--shadow); object-fit: cover; aspect-ratio: 4/3; }
        .lede-list { margin-top: 26px; color: var(--chalk-dim); font-size: 17px; line-height: 1.65; max-width: 480px; }
        .lede-list ul { margin-top: 12px; padding-left: 20px; list-style-type: disc; }
        .lede-list li { margin-bottom: 6px; }
        .desc-list { margin-bottom: 22px; font-size: 14.5px; line-height: 1.6; color: #3E4A3F; padding-left: 20px; list-style-type: disc; }
        .desc-list li { margin-bottom: 8px; }
        .status.coming-soon { color: #8C6A3D; }