:root {
    --navy: #2E4D6B;
    --navy-dark: #1e3349;
    --navy-light: #3d6080;
    --taupe: #B5A99A;
    --cream: #EDE8E3;
    --cream-dark: #ddd5cc;
    --white: #ffffff;
    --text-dark: #1a2a38;
    --text-mid: #4a5c6a;
    --text-light: #7a8d99;
    --font-serif: 'DM Serif Display', Georgia, serif;
    --font-sans: 'DM Sans', system-ui, sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 4px 24px rgba(46,77,107,0.10);
    --shadow-lg: 0 12px 48px rgba(46,77,107,0.16);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { font-family:var(--font-sans); color:var(--text-dark); background:var(--white); line-height:1.6; overflow-x:hidden; }

  /* NAV */
  nav { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,0.97); backdrop-filter:blur(12px); border-bottom:1px solid rgba(181,169,154,0.2); padding:0 2rem; display:flex; align-items:center; justify-content:space-between; height:72px; }
  .nav-logo img { height:44px; width:auto; }
  .nav-links { display:flex; align-items:center; gap:2rem; list-style:none; }
  .nav-links a { text-decoration:none; color:var(--text-mid); font-size:0.9rem; font-weight:500; letter-spacing:0.01em; transition:color 0.2s; }
  .nav-links a:hover { color:var(--navy); }
  .nav-cta { background:var(--navy); color:var(--white) !important; padding:10px 22px; border-radius:100px; transition:background 0.2s !important; }
  .nav-cta:hover { background:var(--navy-dark) !important; }
  .hamburger { display:none; cursor:pointer; flex-direction:column; gap:5px; }
  .hamburger span { display:block; width:24px; height:2px; background:var(--navy); border-radius:2px; transition:0.3s; }

  /* HERO */
  .hero { min-height:100vh; position:relative; display:flex; align-items:center; overflow:hidden; }
  .hero-bg { position:absolute; inset:0; }
  .hero-bg img { width:100%; height:100%; object-fit:cover; object-position:center; }
  .hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(to right, rgba(20,35,50,0.82) 0%, rgba(20,35,50,0.55) 55%, rgba(20,35,50,0.2) 100%); }
  .hero-inner { max-width:1200px; margin:0 auto; width:100%; padding:100px 2rem 60px; position:relative; z-index:1; }
  .hero h1 { font-family:var(--font-serif); font-size:clamp(2.8rem,5vw,4.2rem); line-height:1.12; color:#ffffff; margin-bottom:1.25rem; max-width:700px; }
  .hero h1 em { font-style:italic; color:var(--cream); }
  .hero-sub { font-size:1.1rem; color:rgba(255,255,255,0.82); line-height:1.75; max-width:520px; margin-bottom:2rem; font-weight:300; }
  .hero-actions { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-bottom:3rem; }
  .btn-primary { display:inline-flex; align-items:center; gap:8px; background:var(--white); color:var(--navy); padding:14px 28px; border-radius:100px; text-decoration:none; font-weight:600; font-size:0.95rem; transition:all 0.2s; border:none; cursor:pointer; }
  .btn-primary:hover { background:var(--cream); transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,0.2); }
  .btn-secondary { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--white); padding:14px 28px; border-radius:100px; text-decoration:none; font-weight:500; font-size:0.95rem; border:1.5px solid rgba(255,255,255,0.5); transition:all 0.2s; }
  .btn-secondary:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.8); }
  .hero-stats { display:flex; gap:2.5rem; flex-wrap:wrap; }
  .hero-stat-num { font-family:var(--font-serif); font-size:2rem; color:var(--white); line-height:1; }
  .hero-stat-label { font-size:0.82rem; color:rgba(255,255,255,0.6); margin-top:4px; }

  /* GALLERY STRIP */
  .gallery-strip { display:grid; grid-template-columns:repeat(6,1fr); height:140px; overflow:hidden; }
  .gallery-strip img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; cursor:pointer; }
  .gallery-strip img:hover { transform:scale(1.04); }

  /* SECTION SHARED */
  section { padding:90px 2rem; }
  .section-inner { max-width:1200px; margin:0 auto; }
  .section-label { display:inline-flex; align-items:center; gap:8px; font-size:0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy); margin-bottom:1rem; }
  .section-title { font-family:var(--font-serif); font-size:clamp(2rem,3.5vw,2.8rem); color:var(--text-dark); line-height:1.2; margin-bottom:1rem; }
  .section-title em { font-style:italic; color:var(--navy); }
  .section-body { font-size:1.05rem; color:var(--text-mid); line-height:1.75; max-width:600px; font-weight:300; }

  /* WHY US */
  .why-us { background:var(--cream); }
  .why-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; margin-top:3rem; }
  .why-points { display:flex; flex-direction:column; gap:1.5rem; }
  .why-point { display:flex; gap:1rem; align-items:flex-start; }
  .why-icon { width:44px; height:44px; flex-shrink:0; background:var(--navy); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; }
  .why-icon svg { width:20px; height:20px; fill:var(--white); }
  .why-point-title { font-weight:600; font-size:1rem; color:var(--text-dark); margin-bottom:4px; }
  .why-point-body { font-size:0.92rem; color:var(--text-mid); line-height:1.6; }
  .why-callout { background:var(--navy); border-radius:20px; padding:2.5rem; color:var(--white); }
  .why-callout-quote { font-family:var(--font-serif); font-size:1.45rem; font-style:italic; line-height:1.5; margin-bottom:1.5rem; color:var(--cream); }
  .why-callout-stat { display:flex; gap:2rem; flex-wrap:wrap; }
  .callout-num { font-family:var(--font-serif); font-size:2.2rem; color:var(--white); }
  .callout-label { font-size:0.85rem; color:rgba(255,255,255,0.65); margin-top:4px; }

  /* PHILOSOPHY */
  .philosophy-wrap { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; margin-top:3rem; }
  .phil-pillars { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; }
  .phil-pillar { background:var(--cream); border-radius:var(--radius); padding:1.25rem; }
  .phil-pillar-icon { font-size:1.5rem; margin-bottom:0.5rem; }
  .phil-pillar-title { font-weight:600; font-size:0.92rem; color:var(--text-dark); margin-bottom:4px; }
  .phil-pillar-body { font-size:0.82rem; color:var(--text-mid); line-height:1.5; }
  .philosophy-img { aspect-ratio:4/5; border-radius:20px; overflow:hidden; position:relative; }
  .philosophy-img img { width:100%; height:100%; object-fit:cover; }
  .philosophy-img::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(46,77,107,0.4) 0%, transparent 60%); }

  /* HOW IT WORKS */
  .how-it-works { background:#f9f7f5; }
  .steps-wrap { display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem; margin-top:3rem; position:relative; }
  .steps-wrap::before { content:''; position:absolute; top:24px; left:10%; right:10%; height:2px; background:linear-gradient(to right, var(--taupe), var(--navy), var(--taupe)); z-index:0; }
  .step { display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; z-index:1; }
  .step-num { width:48px; height:48px; background:var(--white); border:2px solid var(--navy); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-size:1.1rem; color:var(--navy); margin-bottom:1rem; flex-shrink:0; }
  .step-title { font-weight:600; font-size:0.88rem; color:var(--text-dark); margin-bottom:6px; }
  .step-body { font-size:0.8rem; color:var(--text-mid); line-height:1.5; }
  .how-extras { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:3rem; }
  .how-extra-card { background:var(--white); border:1px solid var(--cream-dark); border-radius:var(--radius); padding:1.5rem; display:flex; gap:1rem; align-items:flex-start; }
  .how-extra-icon { width:40px; height:40px; flex-shrink:0; background:rgba(46,77,107,0.08); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; }
  .how-extra-icon svg { width:18px; height:18px; fill:var(--navy); }
  .how-extra-title { font-weight:600; font-size:0.95rem; color:var(--text-dark); margin-bottom:4px; }
  .how-extra-body { font-size:0.85rem; color:var(--text-mid); line-height:1.5; }

  /* PROPERTIES */
  #properties { background:var(--white); }
  .properties-intro { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:3rem; flex-wrap:wrap; gap:1rem; }
  .properties-grid { display:grid; grid-template-columns:1fr; gap:2.5rem; max-width:860px; margin:0 auto; }
  .property-card { background:var(--white); border:1px solid var(--cream-dark); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); transition:transform 0.25s, box-shadow 0.25s; }
  .property-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }

  /* PHOTO GALLERY ON CARD */
  .prop-gallery { position:relative; }
  .prop-hero-img { width:100%; aspect-ratio:16/9; overflow:hidden; cursor:pointer; position:relative; }
  .prop-hero-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
  .prop-hero-img:hover img { transform:scale(1.03); }
  .prop-location-badge { position:absolute; top:12px; left:12px; background:var(--white); color:var(--navy); font-size:0.72rem; font-weight:600; padding:5px 12px; border-radius:100px; letter-spacing:0.04em; z-index:2; }
  .gallery-hint { position:absolute; bottom:10px; right:12px; background:rgba(0,0,0,0.45); color:#fff; font-size:0.72rem; padding:4px 10px; border-radius:100px; display:flex; align-items:center; gap:5px; z-index:2; cursor:pointer; }

  /* LIGHTBOX */
  .lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:9999; align-items:center; justify-content:center; flex-direction:column; }
  .lightbox.open { display:flex; }
  .lightbox-img { max-width:90vw; max-height:80vh; border-radius:12px; object-fit:contain; }
  .lightbox-close { position:absolute; top:20px; right:28px; color:white; font-size:2rem; cursor:pointer; font-weight:300; line-height:1; }
  .lightbox-nav { display:flex; gap:1rem; margin-top:1rem; }
  .lightbox-nav button { background:rgba(255,255,255,0.15); color:white; border:none; padding:8px 20px; border-radius:100px; cursor:pointer; font-size:0.9rem; transition:background 0.2s; }
  .lightbox-nav button:hover { background:rgba(255,255,255,0.28); }
  .lightbox-counter { color:rgba(255,255,255,0.5); font-size:0.8rem; margin-top:6px; }

  .property-body { padding:1.5rem; }
  .property-name { font-family:var(--font-serif); font-size:1.5rem; color:var(--text-dark); margin-bottom:4px; }
  .property-location { font-size:0.83rem; color:var(--text-light); display:flex; align-items:center; gap:4px; margin-bottom:1rem; }
  .property-desc { font-size:0.9rem; color:var(--text-mid); line-height:1.65; margin-bottom:1.25rem; }
  .property-amenities { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.5rem; }
  .amenity-tag { display:flex; align-items:center; gap:5px; background:var(--cream); color:var(--text-mid); font-size:0.77rem; font-weight:500; padding:5px 10px; border-radius:100px; }
  .amenity-tag svg { width:13px; height:13px; fill:var(--navy); flex-shrink:0; }
  .pricing-section { margin-bottom:1.5rem; }
  .pricing-title { font-size:0.75rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-light); margin-bottom:0.75rem; }
  .pricing-rows { display:flex; flex-direction:column; gap:0.5rem; }
  .pricing-row { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:#f9f7f5; border-radius:var(--radius-sm); border-left:3px solid var(--navy); }
  .pricing-room { font-size:0.85rem; color:var(--text-mid); }
  .pricing-price { font-weight:600; font-size:0.95rem; color:var(--navy); }
  .property-security { background:rgba(46,77,107,0.06); border-radius:var(--radius-sm); padding:10px 12px; display:flex; align-items:center; gap:8px; font-size:0.8rem; color:var(--navy); margin-bottom:1.25rem; }
  .property-security svg { width:14px; height:14px; fill:var(--navy); flex-shrink:0; }
  .property-cta { display:flex; flex-direction:column; align-items:stretch; gap:6px; }
  .btn-inquire { display:block; text-align:center; background:var(--navy); color:var(--white); padding:13px; border-radius:100px; text-decoration:none; font-weight:600; font-size:0.92rem; transition:all 0.2s; border:none; cursor:pointer; }
  .btn-inquire:hover { background:var(--navy-dark); }
  .hurry-text { text-align:center; font-size:0.75rem; color:#c0392b; font-weight:500; letter-spacing:0.02em; }

  /* PLACEHOLDER CARDS (properties without photos yet) */
  .prop-placeholder { width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:0.82rem; color:rgba(255,255,255,0.7); letter-spacing:0.05em; }

  /* RULES */
  .rules-section { background:var(--cream); }
  .rules-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
  .rule-card { background:var(--white); border-radius:var(--radius); padding:1.5rem; }
  .rule-icon { width:40px; height:40px; background:rgba(46,77,107,0.1); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
  .rule-icon svg { width:18px; height:18px; fill:var(--navy); }
  .rule-title { font-weight:600; font-size:0.95rem; color:var(--text-dark); margin-bottom:6px; }
  .rule-body { font-size:0.85rem; color:var(--text-mid); line-height:1.6; }

  /* TESTIMONIALS */
  .testimonials { background:var(--white); }
  .testimonials-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:3rem; }
  .testimonial-card { background:var(--cream); border-radius:var(--radius); padding:1.75rem; }
  .testimonial-stars { color:var(--navy); font-size:0.9rem; margin-bottom:1rem; letter-spacing:2px; }
  .testimonial-text { font-family:var(--font-serif); font-size:1.05rem; color:var(--text-dark); line-height:1.65; font-style:italic; margin-bottom:1.25rem; }
  .testimonial-author { display:flex; align-items:center; gap:10px; }
  .author-avatar { width:38px; height:38px; background:var(--navy); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--white); font-weight:600; font-size:0.9rem; }
  .author-name { font-weight:600; font-size:0.88rem; color:var(--text-dark); }
  .author-meta { font-size:0.78rem; color:var(--text-light); }

  /* FORMS */
  .forms-section { background:#f9f7f5; }
  .forms-intro { text-align:center; max-width:600px; margin:0 auto 3rem; }
  .forms-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
  .form-card { background:var(--white); border:1px solid var(--cream-dark); border-radius:20px; padding:2rem; box-shadow:var(--shadow); }
  .form-card-header { margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--cream-dark); }
  .form-property-name { font-family:var(--font-serif); font-size:1.3rem; color:var(--navy); margin-bottom:2px; }
  .form-property-loc { font-size:0.82rem; color:var(--text-light); }
  .form-section-title { font-size:0.72rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:var(--navy); margin:1.25rem 0 0.75rem; padding-bottom:4px; border-bottom:1px solid var(--cream-dark); }
  .form-group { margin-bottom:0.85rem; }
  .form-group label { display:block; font-size:0.82rem; font-weight:600; color:var(--text-mid); margin-bottom:4px; letter-spacing:0.02em; }
  .form-group input,
  .form-group select,
  .form-group textarea { width:100%; padding:9px 13px; border:1px solid var(--cream-dark); border-radius:var(--radius-sm); font-family:var(--font-sans); font-size:0.88rem; color:var(--text-dark); background:var(--white); outline:none; transition:border-color 0.2s; appearance:auto; }
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus { border-color:var(--navy); }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
  .form-submit { width:100%; background:var(--navy); color:var(--white); border:none; padding:13px; border-radius:100px; font-family:var(--font-sans); font-size:0.95rem; font-weight:600; cursor:pointer; transition:background 0.2s; margin-top:0.75rem; }
  .form-submit:hover { background:var(--navy-dark); }
  .form-hurry { text-align:center; font-size:0.75rem; color:#c0392b; font-weight:500; margin-top:8px; }

  /* FOOTER */
  footer { background:var(--navy-dark); color:rgba(255,255,255,0.8); padding:60px 2rem 30px; }
  .footer-inner { max-width:1200px; margin:0 auto; }
  .footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
  .footer-logo img { height:40px; filter:brightness(0) invert(1); margin-bottom:1rem; }
  .footer-tagline { font-size:0.88rem; color:rgba(255,255,255,0.55); line-height:1.6; margin-bottom:1.25rem; max-width:240px; }
  .footer-socials { display:flex; gap:10px; }
  .social-btn { width:36px; height:36px; background:rgba(255,255,255,0.1); border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background 0.2s; }
  .social-btn:hover { background:rgba(255,255,255,0.2); }
  .social-btn svg { width:16px; height:16px; fill:var(--white); }
  .footer-col-title { font-size:0.8rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--white); margin-bottom:1rem; }
  .footer-links { list-style:none; display:flex; flex-direction:column; gap:0.5rem; }
  .footer-links a { text-decoration:none; color:rgba(255,255,255,0.6); font-size:0.88rem; transition:color 0.2s; }
  .footer-links a:hover { color:var(--white); }
  .footer-contact-item { display:flex; align-items:center; gap:8px; font-size:0.88rem; color:rgba(255,255,255,0.6); margin-bottom:0.5rem; }
  .footer-contact-item a { color:rgba(255,255,255,0.6); text-decoration:none; }
  .footer-contact-item a:hover { color:var(--white); }
  .footer-contact-item svg { width:14px; height:14px; fill:var(--taupe); flex-shrink:0; }
  .footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; font-size:0.82rem; color:rgba(255,255,255,0.35); flex-wrap:wrap; gap:0.5rem; }

  /* MOBILE MENU */
  .mobile-menu { display:none; position:fixed; inset:72px 0 0 0; background:var(--white); z-index:999; padding:2rem; flex-direction:column; gap:1.5rem; overflow-y:auto; }
  .mobile-menu.open { display:flex; }
  .mobile-menu a { text-decoration:none; color:var(--text-dark); font-size:1.1rem; font-weight:500; padding-bottom:1rem; border-bottom:1px solid var(--cream-dark); }
  .mobile-cta-wrap { margin-top:1rem; }

  /* SCROLL ANIMATION */
  .fade-up { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease; }
  .fade-up.visible { opacity:1; transform:translateY(0); }

  /* RESPONSIVE */
  @media (max-width:1024px) {
    .why-grid { grid-template-columns:1fr; }
    .why-callout { display:none; }
    .philosophy-wrap { grid-template-columns:1fr; }
    .philosophy-img { display:none; }
    .steps-wrap { grid-template-columns:repeat(3,1fr); }
    .steps-wrap::before { display:none; }
    .properties-grid { grid-template-columns:1fr; }
    .forms-grid { grid-template-columns:1fr; }
    .footer-top { grid-template-columns:1fr 1fr; }
    .rules-grid { grid-template-columns:1fr 1fr; }
    .testimonials-grid { grid-template-columns:1fr; }
    .gallery-strip { grid-template-columns:repeat(3,1fr); height:100px; }
  }
  @media (max-width:768px) {
    .nav-links { display:none; }
    .hamburger { display:flex; }
    .steps-wrap { grid-template-columns:1fr 1fr; }
    .how-extras { grid-template-columns:1fr; }
    .rules-grid { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }
    .footer-top { grid-template-columns:1fr; }
    .phil-pillars { grid-template-columns:1fr; }
    .gallery-strip { grid-template-columns:repeat(2,1fr); }
    .prop-thumbnails { grid-template-columns:repeat(3,1fr); }
  }
  @media (max-width:480px) {
    section { padding:60px 1.25rem; }
    .steps-wrap { grid-template-columns:1fr; }
    .hero-actions { flex-direction:column; }
    .hero-stats { gap:1.5rem; }
  }