/* ==========================================================================
   DGSS REALTY — MAIN STYLESHEET
   Brand: Navy #0B2340 / Orange #BA8B48 / White
   Fonts: Plus Jakarta Sans (headings, nav, buttons, prices) +
          Manrope (body, details, labels) — self-hosted variable fonts
   Table of contents:
     0.  Fonts (@font-face)
     1.  Custom Properties (Design Tokens)
     2.  Reset & Base
     3.  Typography & Shared Utilities
     4.  Buttons
     5.  Header / Navigation
     6.  Mobile Navigation
     7.  Hero
     8.  About
     9.  Services
     10. Featured Properties
     11. Why Choose Us
     12. Founder
     13. Testimonials
     14. Contact
     15. Footer
     16. Floating Buttons (WhatsApp / Back to Top)
     17. Scroll Reveal Animation
     18. Responsive Breakpoints
   ========================================================================== */

/* ---------- 0. FONTS ---------- */
/* Self-hosted variable fonts (SIL OFL — licences in /fonts). One file per
   family covers every weight 200–800, so bold text is never synthesised.
   latin-ext is only downloaded when a page shows a character from it
   (e.g. the ₹ sign). */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/manrope-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- 1. CUSTOM PROPERTIES ---------- */
:root{
  --font-display:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --navy-900:#0B2340;
  --navy-800:#123356;
  --navy-700:#1B4570;
  --orange-600:#BA8B48;
  --orange-700:#96702E;
  --orange-100:#F4EAD5;
  --paper:#FFFFFF;
  --mist:#F5F5F5;
  --line:#E6E6E6;
  --ink:#222222;
  --slate:#5C5C5C;

  --radius-lg:22px;
  --radius-md:14px;

  --shadow-soft:0 20px 45px -25px rgba(11,35,64,.35);
  --shadow-card:0 12px 30px -18px rgba(11,35,64,.25);

  --container-width:1200px;
  --transition-fast:.18s ease;
  --transition-med:.25s ease;

  --section-pad:96px;
}

/* ---------- 2. RESET & BASE ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden;max-width:100%;}
body{
  font-family:var(--font-body);
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,textarea{font-family:inherit;}
:focus-visible{outline:3px solid var(--orange-600);outline-offset:3px;}
body.no-scroll{overflow:hidden;}

.container{width:100%;max-width:var(--container-width);margin:0 auto;padding:0 24px;}
section{position:relative;}

/* ---------- 3. TYPOGRAPHY & SHARED UTILITIES ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:13.5px;letter-spacing:.06em;
  color:var(--orange-600);margin-bottom:14px;
}
.eyebrow.eyebrow-center{justify-content:center;}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--orange-600);display:inline-block;}

h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.12;
  color:var(--navy-900);
}
h2{font-size:clamp(28px,3.6vw,42px);}
h3{font-size:20px;font-weight:600;letter-spacing:-.005em;line-height:1.3;}
p{color:var(--slate);font-size:17px;line-height:1.7;}

/* Roofline accent — signature brand motif echoing the H2 logo mark */
.roofline{
  display:block;
  width:86px;height:14px;
  margin-top:10px;
  background:
    linear-gradient(135deg, transparent 49%, var(--orange-600) 50%, transparent 51%) 0 0/16px 14px no-repeat,
    linear-gradient(45deg, transparent 49%, var(--orange-600) 50%, transparent 51%) 16px 0/16px 14px no-repeat;
  position:relative;
}
.roofline.center{margin-left:auto;margin-right:auto;}

.section-head{max-width:640px;margin-bottom:48px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head p{margin-top:16px;font-size:16px;}

/* ---------- 4. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:0;
  padding:15px 30px;border-radius:100px;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast),
             background var(--transition-fast), color var(--transition-fast);
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex-shrink:0;}
.btn-primary{background:var(--orange-600);color:#fff;box-shadow:0 14px 30px -12px rgba(186,139,72,.55);}
.btn-primary:hover{background:var(--orange-700);transform:translateY(-2px);}
.btn-outline{border:1.5px solid rgba(255,255,255,.5);color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);}
.btn-outline.dark{border-color:var(--navy-900);color:var(--navy-900);}
.btn-outline.dark:hover{background:var(--navy-900);color:#fff;}
.btn-sm{padding:11px 22px;font-size:14px;}
.btn-block{width:100%;}

/* ---------- 5. HEADER / NAVIGATION ---------- */
header{
  position:static;
  padding:16px 0;
  background:var(--paper);
}
header .container{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-left:16px;}

.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand img{height:44px;width:auto;}
.brand-word{font-family:var(--font-display);font-weight:700;color:var(--navy-900);font-size:19px;letter-spacing:-.01em;white-space:nowrap;}
.brand-word span{color:var(--orange-600);}

/* DGSS REALTY text wordmark — used in place of an image logo in the
   header, footer, and admin panel. Same font treatment everywhere;
   .on-dark flips the REALTY half to white for dark backgrounds
   (footer, admin sidebar) while DGSS stays brand red throughout. */
.brand-wordmark{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;line-height:1;}
.brand-wordmark .wm-dgss{font-family:var(--font-display);font-weight:800;color:var(--orange-600);font-size:25px;letter-spacing:-.01em;}
.brand-wordmark .wm-realty{font-family:var(--font-body);color:var(--navy-900);font-size:13px;font-weight:700;letter-spacing:.12em;}
.brand-wordmark.on-dark .wm-realty{color:#fff;}
.footer-wordmark{margin-bottom:16px;}

.primary-nav{display:flex;align-items:center;gap:18px;flex-wrap:nowrap;}
.primary-nav a,
.nav-link-btn{
  color:var(--ink);font-weight:600;font-size:14.5px;letter-spacing:0;opacity:.8;
  position:relative;padding:4px 0;white-space:nowrap;
  font-family:var(--font-display);background:none;border:0;cursor:pointer;
}
.primary-nav a:hover,
.nav-link-btn:hover{opacity:1;}
.primary-nav a::after,
.nav-link-btn::after{
  content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--orange-600);
  transition:width var(--transition-fast);
}
.primary-nav a:hover::after,
.nav-link-btn:hover::after{width:100%;}
.primary-nav a.active,
.mobile-nav-links a.active{opacity:1;}
.mobile-nav-links a.active{color:var(--orange-600);}

/* Subtle separator between the nav links and the icon-only action row. */
.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.icon-btn{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--mist);color:var(--navy-900);flex-shrink:0;
  transition:background var(--transition-fast), color var(--transition-fast);
}
.icon-btn:hover{background:var(--navy-900);color:#fff;}
.icon-btn svg{width:19px;height:19px;}

.nav-actions .btn-sm{white-space:nowrap;}

.hamburger{display:none;flex-direction:column;gap:5px;width:26px;flex-shrink:0;}
.hamburger span{height:2px;width:100%;background:var(--navy-900);border-radius:2px;transition:transform var(--transition-med), opacity var(--transition-med);}

/* ---------- 6. MOBILE NAVIGATION ---------- */
/* Right-side slide-in drawer (not a full-screen takeover): dark overlay
   behind, drawer panel slides in from the right, page stays visible. */
.mobile-nav-overlay{
  position:fixed;inset:0;z-index:998;
  background:rgba(6,11,32,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.mobile-nav-overlay.open{opacity:1;pointer-events:auto;}

.mobile-nav{
  position:fixed;top:0;right:0;bottom:0;z-index:999;
  width:82%;max-width:340px;
  background:var(--navy-900);
  display:flex;flex-direction:column;
  padding:26px 26px 32px;
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.65,0,.35,1);
  box-shadow:-24px 0 60px -20px rgba(0,0,0,.5);
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav-close{
  align-self:flex-end;flex-shrink:0;margin-bottom:22px;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.08);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--transition-fast);
}
.mobile-nav-close:hover{background:rgba(255,255,255,.16);}
.mobile-nav-close svg{width:17px;height:17px;}
.mobile-nav-links{display:flex;flex-direction:column;margin-bottom:auto;}
.mobile-nav-links a,
.mobile-nav-links-btn{
  color:#fff;font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.005em;
  padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.08);
  display:block;width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;
}
.mobile-nav-links-btn{color:var(--orange-600);}
.mobile-nav .btn{margin-top:24px;width:100%;flex-shrink:0;}
.mobile-nav-icons{
  display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);flex-shrink:0;
}
.mobile-nav-icons .icon-btn{background:rgba(255,255,255,.08);color:#fff;}
.mobile-nav-icons .icon-btn:hover{background:var(--orange-600);}

@media (prefers-reduced-motion: reduce){
  .mobile-nav{transition:none;}
  .mobile-nav-overlay{transition:none;}
}

/* ---------- 7. HERO ---------- */
/* Premium dynamic hero. Layer order (back to front):
   1. .hero-slideshow — 3 property photos, absolutely stacked, crossfading
      via opacity with a slow, subtle Ken Burns scale on the active one.
      Only the visual layer changes; nothing here affects the text layer.
   2. .hero-overlay   — dark navy gradient (stronger left, where the text
      sits, fading toward the right so the image still reads clearly)
   3. .hero-slide-dots — minimal, non-interactive slide progress dots
   4. .hero-content    — text/CTA/discovery panel; fixed position,
      completely unaffected by slide changes underneath it */
.hero{
  position:relative;overflow:hidden;
  min-height:88vh;
  display:flex;flex-direction:column;
  background:var(--navy-900);
}
.hero-slideshow{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.4s ease;
}
.hero-slide.active{opacity:1;z-index:1;}
.hero-slide picture, .hero-slide img{width:100%;height:100%;object-fit:cover;display:block;}
/* Per-slide framing so the architectural subject sits center/right,
   leaving the left side (where the headline sits) visually calmer. */
.hero-slide[data-slide="0"] img{object-position:56% 42%;}
.hero-slide[data-slide="1"] img{object-position:50% 32%;}
.hero-slide[data-slide="2"] img{object-position:62% 30%;}

@media (prefers-reduced-motion: no-preference){
  .hero-slide.active img{
    animation:heroKenBurns 7s ease-out forwards;
    transform-origin:56% 42%;
  }
  .hero-slide[data-slide="1"].active img{transform-origin:50% 32%;}
  .hero-slide[data-slide="2"].active img{transform-origin:62% 30%;}
}
@keyframes heroKenBurns{
  from{transform:scale(1);}
  to{transform:scale(1.045);}
}

.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg, rgba(6,11,32,.76) 0%, rgba(6,11,32,.5) 42%, rgba(6,11,32,.28) 75%, rgba(6,11,32,.36) 100%);
}
.hero-slide-dots{
  position:absolute;z-index:3;top:96px;right:28px;
  display:flex;gap:7px;
}
.hero-slide-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.35);
  transition:background .3s ease, width .3s ease;
}
.hero-slide-dot.active{background:var(--orange-600);width:18px;border-radius:4px;}
.hero-watermark{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:640px;max-width:60vw;opacity:.07;z-index:1;
  pointer-events:none;user-select:none;
}
.hero-content{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:space-between;width:100%;padding:118px 0 34px;}
.hero-inner{flex:1;display:flex;align-items:center;padding:24px 0;}
.hero-copy{max-width:640px;}
.hero-eyebrow{color:#FFFFFF;font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:22px;text-shadow:0 2px 12px rgba(0,0,0,.4);}
.hero-eyebrow::before{content:"";width:26px;height:2px;background:var(--orange-600);}
.hero h1{color:#fff;font-size:clamp(40px,4.8vw,64px);line-height:1.08;letter-spacing:-.02em;text-shadow:0 6px 30px rgba(0,0,0,.45);}
.hero h1 .accent{
  display:block;color:var(--orange-600);font-family:var(--font-body);
  font-weight:600;font-size:clamp(16px,2.1vw,23px);letter-spacing:.01em;
  margin-top:12px;line-height:1.3;
}
.hero p.lead{color:rgba(255,255,255,.92);font-size:18px;max-width:500px;margin-top:24px;text-shadow:0 2px 14px rgba(0,0,0,.4);}
.hero-ctas{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;}
/* Two-sentence headline: each sentence starts on its own line, sized so
   a sentence stays on one line on desktop and wraps evenly on phones. */
.hero h1 .hero-h1-part{display:block;text-wrap:balance;}
.hero h1:has(.hero-h1-part){font-size:clamp(34px,3.5vw,50px);line-height:1.12;}
.hero-copy:has(.hero-h1-part){max-width:720px;}
@media (max-width:720px){
  .hero h1:has(.hero-h1-part){font-size:clamp(28px,8.2vw,34px);line-height:1.14;}
}
@media (max-width:400px){
  .hero-eyebrow{font-size:12px;letter-spacing:.02em;white-space:nowrap;}
  .hero-eyebrow::before{width:16px;}
}
@media (max-width:340px){
  .hero-eyebrow{font-size:11.5px;}
  .hero-eyebrow::before{display:none;}
}
@media (max-width:440px){
  .hero-search-btn{width:var(--ds-ctl-h);padding:0;}
  .hero-search-btn span{display:none;}
}
/* Tablet / small laptop: the hero text kept the container's max-width but
   lost its side padding, so it touched the screen edge below 1248px. */
@media (max-width:1248px) and (min-width:721px){
  .hero-inner{padding-left:24px;padding-right:24px;}
}

/* Buy / Sell / Rent / Land + location search — ONE component with the
   same look on desktop, tablet and mobile: a light frosted-glass card
   (the hero photo stays visible through it), a segmented row of four
   equal tabs and the search field. Only its width changes by screen size. */
.hero-nav-wrap{padding-top:20px;}
.hero-discovery{
  --ds-radius:20px;      /* card */
  --ds-inner-radius:14px;/* tab row + search field */
  --ds-ctl-radius:11px;  /* tabs + search button */
  --ds-ctl-h:44px;       /* tab + button height */
  max-width:680px;margin:0 auto;
  display:flex;flex-direction:column;gap:8px;padding:8px;
  border-radius:var(--ds-radius);
  background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.09) 100%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 18px 42px -24px rgba(4,12,30,.65), inset 0 1px 0 rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px) saturate(125%);
  backdrop-filter:blur(8px) saturate(125%);
}
.hero-nav-panel{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;
  padding:4px;border-radius:var(--ds-inner-radius);
  background:rgba(6,14,34,.16);
}
.hero-nav-item{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--ds-ctl-h);padding:0 8px;border-radius:var(--ds-ctl-radius);
  color:#fff;font-family:var(--font-display);font-weight:600;font-size:14.5px;letter-spacing:.01em;white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.25);
  transition:background var(--transition-med), color var(--transition-med);
}
.hero-nav-item svg{width:17px;height:17px;flex-shrink:0;color:#E4C38F;transition:color var(--transition-med);}
.hero-nav-item:hover{background:rgba(255,255,255,.12);}
.hero-nav-item.active{background:rgba(255,255,255,.94);color:var(--navy-900);text-shadow:none;}
.hero-nav-item.active svg{color:var(--orange-700);}
.hero-nav-item:focus-visible,.hero-search-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.hero-nav-divider{display:none;}
.hero-search{
  display:flex;align-items:center;gap:10px;
  padding:4px 4px 4px 16px;border-radius:var(--ds-inner-radius);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  transition:background var(--transition-fast), border-color var(--transition-fast);
}
.hero-search:focus-within{background:rgba(255,255,255,.2);border-color:rgba(228,195,143,.8);}
.hero-search-icon{display:flex;align-items:center;color:#E4C38F;flex-shrink:0;}
.hero-search-icon svg{width:19px;height:19px;}
.hero-search input{
  flex:1;min-width:0;height:var(--ds-ctl-h);border:0;background:transparent;
  font-family:var(--font-body);font-weight:500;font-size:15px;color:#fff;padding:0;
}
.hero-search input::placeholder{color:rgba(255,255,255,.8);opacity:1;}
.hero-search input:focus{outline:none;}
.hero-search input::-webkit-search-cancel-button{filter:invert(1);}
.hero-search-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;
  height:var(--ds-ctl-h);padding:0 20px;border-radius:var(--ds-ctl-radius);
  background:var(--orange-600);color:var(--navy-900);
  font-family:var(--font-display);font-weight:600;font-size:14.5px;letter-spacing:0;
  transition:background var(--transition-fast), color var(--transition-fast);
}
.hero-search-btn:hover{background:var(--orange-700);color:#fff;}
.hero-search-btn svg{width:17px;height:17px;flex-shrink:0;}
/* No blur available / reduced transparency: a solid navy tint keeps the
   white text readable. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-discovery{background:rgba(11,35,64,.62);}
}
@media (prefers-reduced-transparency: reduce){
  .hero-discovery{background:rgba(11,35,64,.86);-webkit-backdrop-filter:none;backdrop-filter:none;}
}
@media (max-width:720px){
  .hero-discovery{max-width:none;--ds-radius:18px;}
}
@media (max-width:380px){
  .hero-nav-item{font-size:13.5px;gap:6px;padding:0 4px;}
  .hero-nav-item svg{width:15px;height:15px;}
  .hero-search{padding-left:12px;gap:8px;}
  .hero-search input{font-size:14px;}
}

/* ---------- 8. ABOUT ---------- */
.about{padding:var(--section-pad) 0;background:var(--paper);position:relative;overflow:hidden;}
.about-watermark{
  position:absolute;left:-8%;top:50%;transform:translateY(-50%);
  width:560px;max-width:50vw;opacity:.06;pointer-events:none;user-select:none;z-index:1;
}
.about-grid{position:relative;z-index:2;display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center;}
.about-visual{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);}
.about-visual img{width:100%;height:480px;object-fit:cover;display:block;}
.about-founder-caption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 28px 22px;
  background:linear-gradient(0deg, rgba(11,35,64,.88) 0%, rgba(11,35,64,.5) 55%, transparent 100%);
}
.about-founder-caption strong{display:block;color:#fff;font-size:18px;font-family:var(--font-display);font-weight:600;letter-spacing:0;text-transform:none;}
.about-founder-caption span{display:block;color:var(--orange-600);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-top:5px;}

.about-copy p{margin-bottom:18px;font-size:17px;}
.about-copy p.about-lead{margin-top:24px;}

.founder-credential{
  display:flex;gap:18px;margin:30px 0 8px;padding:22px 26px;
  background:var(--mist);border-radius:var(--radius-md);border:1px solid var(--line);
}
.founder-credential-bar{width:4px;border-radius:3px;background:var(--orange-600);flex-shrink:0;}
.founder-credential strong{display:inline-block;font-size:15.5px;color:var(--navy-900);}
.founder-credential .role{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--orange-600);background:var(--orange-100);padding:3px 10px;border-radius:100px;vertical-align:middle;}
.founder-credential p{margin:8px 0 0;font-size:14px;color:var(--slate);}

.founder-byline-link.standalone{
  display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  font-size:13.5px;font-weight:700;color:var(--orange-600);
  transition:transform var(--transition-fast);
}
.founder-byline-link.standalone:hover{transform:translateX(3px);}

/* ---------- 10. FEATURED PROPERTIES ---------- */
/* Property cards are rendered dynamically by js/script.js from the
   PROPERTIES data array — see "EDITABLE DATA" section at the top of that file.
   Markup below documents the structure each card is built with. */
.properties{padding:var(--section-pad) 0;background:var(--paper);}
.prop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.prop-card{
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-card);background:#fff;
  display:flex;flex-direction:column;height:100%;
  transition:transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
}
.prop-card:hover{transform:translateY(-8px);box-shadow:0 26px 50px -22px rgba(11,35,64,.35);border-color:rgba(186,139,72,.3);}
.prop-media{position:relative;height:230px;flex-shrink:0;overflow:hidden;background:var(--mist);}
.prop-media::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,35,64,.28) 100%);
  opacity:0;transition:opacity var(--transition-med);
}
.prop-card:hover .prop-media::after{opacity:1;}
.prop-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.prop-card:hover .prop-media img{transform:scale(1.08);}
.prop-tag{position:absolute;top:16px;left:16px;z-index:1;background:var(--orange-600);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:7px 15px;border-radius:100px;box-shadow:0 8px 16px -6px rgba(186,139,72,.5);}
.prop-body{padding:28px 26px 26px;display:flex;flex-direction:column;flex:1;}
.prop-price-label{display:block;font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--slate);margin-bottom:4px;}
.prop-price{font-family:var(--font-display);font-weight:700;color:var(--navy-900);font-size:24px;margin-bottom:14px;letter-spacing:-.01em;line-height:1.25;}
.prop-price-muted{color:var(--slate);font-size:16px;letter-spacing:.02em;}
.prop-loc{display:flex;align-items:flex-start;gap:7px;font-size:13.5px;color:var(--slate);margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line);font-weight:500;}
.prop-loc svg{width:15px;height:15px;color:var(--orange-600);flex-shrink:0;margin-top:2px;}
.prop-specs{display:flex;gap:14px;font-size:12.5px;color:var(--slate);font-weight:600;flex-wrap:wrap;}
.prop-specs span{display:flex;align-items:center;gap:5px;}
.prop-specs svg{width:14px;height:14px;color:var(--orange-600);flex-shrink:0;}
.prop-more{color:var(--orange-600) !important;font-weight:700;}
.properties-note{text-align:center;margin-top:44px;font-size:14px;color:var(--slate);}
.prop-empty{text-align:center;padding:60px 20px;color:var(--slate);font-size:15px;}
.prop-load-more-wrap{display:flex;justify-content:center;margin-top:36px;}
.prop-load-more-count{opacity:.7;font-weight:500;}
.prop-empty-reset{color:var(--orange-600);font-weight:700;text-decoration:underline;text-underline-offset:2px;}

/* Property card action row: call / whatsapp icon buttons + view details */
.prop-actions{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:22px;border-top:1px solid var(--line);}
.btn-icon{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--mist);border:1px solid var(--line);color:var(--navy-900);
  transition:background var(--transition-fast), transform var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn-icon svg{width:18px;height:18px;}
.btn-icon:hover{background:var(--navy-900);border-color:var(--navy-900);color:#fff;transform:translateY(-2px);}
.btn-icon.whatsapp:hover{background:#25D366;border-color:#25D366;color:#fff;}
.prop-details-btn{flex:1;font-weight:700;}
.prop-details-btn:hover{background:var(--navy-900);color:#fff;}

/* ---------- PROPERTY DETAILS MODAL ---------- */
.property-modal{
  position:fixed;inset:0;z-index:1999;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(11,35,64,.6);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity var(--transition-med);
}
.property-modal.open{opacity:1;pointer-events:auto;}
.modal-panel{
  position:relative;background:#fff;border-radius:var(--radius-lg);max-width:560px;width:100%;
  max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-soft);
  transform:translateY(20px);transition:transform var(--transition-med);
}
.property-modal.open .modal-panel{transform:translateY(0);}
.modal-close{
  position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  background:var(--mist);display:flex;align-items:center;justify-content:center;z-index:2;
  transition:background var(--transition-fast);
}
.modal-close:hover{background:var(--line);}
.modal-close svg{width:18px;height:18px;color:var(--navy-900);}
.modal-body picture img{width:100%;height:260px;object-fit:cover;border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
.modal-tag{position:relative;display:inline-block;top:-20px;left:24px;}
.modal-tag-row{display:flex;align-items:center;justify-content:space-between;position:relative;top:-20px;padding:0 24px;}
.modal-tag-row .modal-tag{position:static;top:0;left:0;}
.modal-share-btn{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;position:relative;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card);
  display:flex;align-items:center;justify-content:center;color:var(--navy-900);
  transition:background var(--transition-fast), color var(--transition-fast);
}
.modal-share-btn:hover{background:var(--navy-900);color:#fff;}
.modal-share-btn svg{width:15px;height:15px;}
.modal-share-btn::after{
  content:"Link copied";position:absolute;bottom:calc(100% + 8px);right:0;
  background:var(--navy-900);color:#fff;font-size:11px;font-weight:600;
  padding:5px 10px;border-radius:100px;white-space:nowrap;
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity var(--transition-fast), transform var(--transition-fast);
}
.modal-share-btn.copied::after{opacity:1;transform:translateY(0);}
.modal-body h3{padding:0 28px;margin-top:-6px;font-size:22px;}
.modal-location{
  display:flex;align-items:center;gap:8px;padding:0 28px;margin-top:10px;font-size:13.5px;color:var(--slate);
}
.modal-location svg{width:15px;height:15px;color:var(--orange-600);}
.modal-price{padding:0 28px;margin-top:16px;font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;font-size:22px;color:var(--navy-900);}
.modal-price-muted{color:var(--slate);font-size:16px;}
.modal-features{padding:20px 28px 4px;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;}
.modal-features li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--ink);font-weight:500;}
.modal-features svg{width:16px;height:16px;color:var(--orange-600);flex-shrink:0;margin-top:2px;}
.modal-actions{display:flex;gap:12px;padding:26px 28px 28px;flex-wrap:wrap;}
.modal-actions .btn{flex:1;min-width:180px;}

/* ---------- LEAD FORM MODALS (List With Us / Free Valuation / Property Enquiry) ---------- */
/* Reuses the same overlay pattern as .property-modal for visual and
   behavioural consistency, just with a wider, form-friendly panel. */
.lead-modal-panel{
  position:relative;background:#fff;border-radius:var(--radius-lg);max-width:640px;width:100%;
  max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-soft);
  transform:translateY(20px);transition:transform var(--transition-med);
  padding:36px 32px 32px;
}
.property-modal.open .lead-modal-panel{transform:translateY(0);}
.lead-modal-header{margin-bottom:22px;padding-right:36px;}
.lead-modal-header .eyebrow{margin-bottom:8px;}
.lead-modal-header h3{font-size:24px;color:var(--navy-900);margin-bottom:6px;}
.lead-modal-header p{font-size:14px;color:var(--slate);}
.lead-modal-property{
  display:flex;align-items:center;gap:10px;background:var(--mist);border:1px solid var(--line);
  border-radius:12px;padding:12px 16px;margin-bottom:20px;font-size:13.5px;color:var(--navy-900);font-weight:600;
}
.lead-modal-property svg{width:16px;height:16px;color:var(--orange-600);flex-shrink:0;}
.field select{
  width:100%;padding:15px 17px;border-radius:12px;border:1.5px solid var(--line);background:#fff;
  font-size:14.5px;color:var(--ink);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6478' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;
}
.field select:focus{border-color:var(--orange-600);box-shadow:0 0 0 4px rgba(186,139,72,.12);outline:none;}
.field.invalid select{border-color:#D14343;}
.field-file{
  display:flex;align-items:center;gap:10px;width:100%;padding:13px 17px;border-radius:12px;
  border:1.5px dashed var(--line);background:var(--mist);font-size:13.5px;color:var(--slate);cursor:pointer;
  transition:border-color var(--transition-fast);
}
.field-file:hover{border-color:var(--orange-600);}
.field-file svg{width:18px;height:18px;color:var(--orange-600);flex-shrink:0;}
.field-file input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}
.field-hint{display:block;font-size:12px;color:var(--slate);margin-top:6px;font-weight:400;text-transform:none;letter-spacing:0;}
.lead-form-section-label{
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-600);
  margin:22px 0 14px;padding-top:18px;border-top:1px solid var(--line);
}
.lead-form-section-label:first-of-type{margin-top:0;padding-top:0;border-top:0;}

/* ---------- 11. WHY CHOOSE US ---------- */
.why{
  padding:var(--section-pad) 0;color:#fff;position:relative;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(11,35,64,.94) 0%, rgba(11,35,64,.90) 55%, rgba(11,35,64,.97) 100%),
    url("../images/hero/hero-towers.jpg") center 25%/cover no-repeat,
    var(--navy-900);
}
.why::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 10%, rgba(186,139,72,.14), transparent 45%);}
.why .section-head h2, .why .eyebrow{color:#fff;}
.why .section-head p{color:rgba(255,255,255,.65);}
.why-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);
  background:rgba(11,35,64,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  overflow:hidden;position:relative;z-index:2;margin-bottom:56px;
}
.why-stat{
  padding:32px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.14);
}
.why-stat:last-child{border-right:none;}
.why-stat strong{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.2vw,38px);color:#fff;letter-spacing:-.02em;}
.why-stat span{display:block;margin-top:6px;font-size:12.5px;color:rgba(255,255,255,.62);font-weight:600;letter-spacing:.03em;text-transform:uppercase;}

.why-list{display:grid;grid-template-columns:1fr 1fr;gap:40px 56px;position:relative;z-index:2;}
.why-point{display:flex;gap:18px;align-items:flex-start;}
.why-point .ic{width:48px;height:48px;border-radius:12px;background:rgba(186,139,72,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.why-point .ic svg{width:23px;height:23px;color:#fff;}
.why-point h3{color:#fff;font-size:16.5px;margin-bottom:8px;}
.why-point p{color:rgba(255,255,255,.6);font-size:14px;}
.why-point-wide{grid-column:1 / -1;max-width:560px;}

/* ---------- 12. FOUNDER ---------- */
.founder{padding:calc(var(--section-pad) - 20px) 0;background:var(--paper);position:relative;}
.founder-simple{
  max-width:400px;margin:0 auto;text-align:center;
  background:linear-gradient(160deg,var(--navy-900),var(--navy-700));border-radius:var(--radius-lg);
  padding:48px 36px;color:#fff;box-shadow:var(--shadow-soft);
}
.founder-simple-photo{
  width:140px;height:140px;border-radius:50%;margin:0 auto 24px;
  border:3px solid var(--orange-600);overflow:hidden;position:relative;
  background:#fff;
}
.founder-simple-photo picture{display:block;width:100%;height:100%;position:relative;z-index:1;}
.founder-simple-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.founder-simple-photo .monogram-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:42px;color:#fff;background:var(--orange-600);
}
.founder-simple h3{
  font-family:var(--font-display);font-weight:600;text-transform:none;letter-spacing:-.01em;
  color:#fff;font-size:22px;line-height:1.3;margin-bottom:6px;
}
.founder-simple .role{color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;}
.founder-simple-location{font-size:12.5px;color:rgba(255,255,255,.65);margin-top:6px;}
.founder-simple-exp{
  font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:0;color:#fff;
  margin:22px 0 18px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
}
.founder-simple-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.founder-simple-tags span{
  font-size:11.5px;font-weight:700;letter-spacing:.03em;color:#fff;
  background:rgba(255,255,255,.1);padding:6px 14px;border-radius:100px;
}
.founder-bio{max-width:760px;margin:44px auto 0;}
.founder-bio-intro{font-weight:600;color:var(--navy-900);font-size:17.5px;line-height:1.55;margin-bottom:18px;}
.founder-bio p{color:var(--ink);font-size:15.5px;line-height:1.75;margin-bottom:16px;}
.founder-bio p:last-of-type{margin-bottom:0;}
/* The bio body paragraphs sit inside [data-founder-bio-top] / [-bottom]
   wrappers so they can be swapped for admin-managed copy. Those wrappers
   make :last-of-type resolve per-wrapper, so restore the original
   spacing: only the very last paragraph of the whole bio loses its
   bottom margin, exactly as before. */
.founder-bio [data-founder-bio-top] p:last-of-type{margin-bottom:16px;}
.founder-quote-block{
  margin:28px 0 0;padding:22px 26px;border-left:4px solid var(--orange-600);
  background:var(--mist);border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-style:italic;color:var(--ink);font-size:16.5px;line-height:1.6;
}
/* Desktop-only founder elements — hidden on mobile/tablet by default so the
   existing mobile design is completely unaffected. Shown only inside the
   @media (min-width:1025px) two-column layout below. */
.founder-bio-heading{display:none;}
.founder-feature-grid{display:none;}

/* ---------- 13. TESTIMONIALS ---------- */
.testimonials{padding:var(--section-pad) 0;background:var(--mist);}
.sample-badge{
  display:inline-block;margin-top:14px;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  color:var(--orange-700);background:var(--orange-100);padding:6px 14px;border-radius:100px;
}
.testimonial-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:48px;
}
.testimonial-card{
  background:#fff;border-radius:var(--radius-lg);padding:32px 28px;box-shadow:var(--shadow-card);
  border:1px solid var(--line);display:flex;flex-direction:column;
}
.testimonial-quote{
  font-size:15.5px;line-height:1.65;color:var(--ink);margin-bottom:24px;flex:1;
}
.testimonial-person{display:flex;align-items:center;gap:12px;}
.testimonial-avatar{
  width:42px;height:42px;border-radius:50%;background:var(--orange-100);color:var(--orange-700);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;flex-shrink:0;
}
.testimonial-person strong{display:block;font-weight:700;color:var(--navy-900);font-size:14.5px;}
.testimonial-person span{font-size:12.5px;color:var(--slate);}

/* ---------- 14. CONTACT ---------- */
.contact{padding:var(--section-pad) 0;background:var(--paper);}
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;}
.contact-info{background:linear-gradient(160deg,var(--navy-900),var(--navy-700));border-radius:var(--radius-lg);padding:46px 40px;color:#fff;box-shadow:var(--shadow-soft);}
.contact-info h3{color:#fff;font-size:22px;margin-bottom:10px;}
.contact-info>p{color:rgba(255,255,255,.65);font-size:14.5px;margin-bottom:32px;}
.info-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px;}
.info-row .ic{width:44px;height:44px;border-radius:12px;background:rgba(186,139,72,.16);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.info-row .ic svg{width:19px;height:19px;color:#fff;}
.info-row strong{display:block;font-size:14px;color:#fff;margin-bottom:2px;}
.info-row span, .info-row a{font-size:13.5px;color:rgba(255,255,255,.65);}
.info-row a:hover{color:var(--orange-600);}
.map-embed{margin-top:30px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.15);}
.map-embed iframe{width:100%;height:190px;border:0;display:block;filter:grayscale(.2) contrast(1.05);}
.social-row{display:flex;gap:12px;margin-top:28px;}
.social-row a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast), transform var(--transition-fast);}
.social-row a:hover{background:var(--orange-600);transform:translateY(-2px);}
.social-row svg{width:17px;height:17px;}

.form-card{background:var(--mist);border-radius:var(--radius-lg);padding:46px 40px;border:1px solid var(--line);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:13.5px;font-weight:600;letter-spacing:.01em;color:var(--navy-900);margin-bottom:9px;}
.field input, .field textarea{
  width:100%;padding:15px 17px;border-radius:12px;border:1.5px solid var(--line);background:#fff;
  font-size:14.5px;color:var(--ink);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field input:focus, .field textarea:focus{border-color:var(--orange-600);box-shadow:0 0 0 4px rgba(186,139,72,.12);outline:none;}
.field textarea{resize:vertical;min-height:120px;}
.field .error-msg{display:none;color:#D14343;font-size:12.5px;margin-top:6px;font-weight:600;}
.field.invalid input, .field.invalid textarea{border-color:#D14343;}
.field.invalid .error-msg{display:block;}
.form-note{font-size:12.5px;color:var(--slate);margin-top:16px;}
.form-success{display:none;align-items:center;gap:10px;background:var(--orange-100);color:var(--orange-700);padding:14px 18px;border-radius:12px;font-size:13.5px;font-weight:600;margin-top:16px;}
.form-success.show{display:flex;}

/* ---------- 15. FOOTER ---------- */
/* Clean flat transition into the footer (no diamond/zig-zag divider) —
   a premium architectural photo sits behind the content with a dark navy
   overlay so the existing footer copy stays fully readable. */
footer{
  position:relative;overflow:hidden;color:rgba(255,255,255,.62);
  border-top:1px solid rgba(255,255,255,.08);
}
footer::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg, rgba(11,35,64,.86) 0%, rgba(11,35,64,.82) 45%, rgba(11,35,64,.92) 100%),
    url("../images/footer-new/footer-skyline.jpg") center 38%/cover no-repeat;
}
footer::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:rgba(11,35,64,.22);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
footer .container{position:relative;z-index:1;}

/* Glass-style treatment: frosted panels for the brand block and each
   footer column so text stays crisp against the more colourful skyline. */
.footer-brand{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-md);padding:22px 22px 24px;
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
}
.footer-grid > div:not(.footer-brand){
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-md);padding:20px 22px 22px;
  -webkit-backdrop-filter:blur(10px) saturate(130%);backdrop-filter:blur(10px) saturate(130%);
}

/* Shift the footer content ~1.15in right of the standard container
   padding, still centered as a block within the page — desktop only,
   reset back to the normal container padding on tablet/mobile below. */
@media (min-width:1025px){
  footer .container{padding-left:144px;}

  /* Header: logo closer to left edge, icon group closer to right edge —
     small, even, professional margin on both sides (desktop only). */
  header .container{padding-left:12px;padding-right:12px;}

  /* ---- Founder section: premium two-column desktop layout ---- */
  .founder-layout{display:grid;grid-template-columns:400px 1fr;gap:64px;align-items:start;}
  .founder-simple{margin:0;border:1px solid var(--orange-600);}
  .founder-simple h3{color:var(--orange-600);}
  .founder-simple-tags span{background:transparent;border:1px solid var(--orange-600);color:var(--orange-600);}
  .founder-bio{margin:0;max-width:none;}
  .founder-bio-heading{display:block;margin-bottom:28px;}
  .founder-bio-kicker{
    font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--orange-600);margin-bottom:10px;
  }
  .founder-bio-heading h3{
    font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;font-size:clamp(30px,3vw,40px);
    color:var(--navy-900);line-height:1.12;margin-bottom:8px;
  }
  .founder-bio-title{
    font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:.08em;
    text-transform:uppercase;margin-bottom:18px;
  }
  .founder-bio-divider{display:block;width:64px;height:3px;background:var(--orange-600);border-radius:2px;}
  .founder-feature-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;margin:34px 0;
    padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  }
  .founder-feature{display:flex;align-items:flex-start;gap:12px;}
  .founder-feature .ic{
    width:38px;height:38px;border-radius:10px;border:1px solid var(--orange-600);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--orange-600);
  }
  .founder-feature .ic svg{width:18px;height:18px;}
  .founder-feature span:last-child{font-weight:700;color:var(--navy-900);font-size:14px;line-height:1.4;padding-top:8px;}
}

.footer-brand-word{
  display:block;font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.01em;
  color:#fff;margin-bottom:16px;
}
.footer-brand-word span{color:var(--orange-600);}
.footer-brand-logo-img{display:block;height:44px;width:auto;margin-bottom:16px;background:#fff;padding:8px 14px;border-radius:10px;}

.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding:56px 0 40px;}
.footer-brand p{font-size:13.5px;color:rgba(255,255,255,.55);max-width:280px;margin-bottom:20px;}
.footer-social{display:flex;gap:10px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast), transform var(--transition-fast);
}
.footer-social a:hover{background:var(--orange-600);border-color:var(--orange-600);transform:translateY(-2px);}
.footer-social svg{width:16px;height:16px;}
footer h4{color:#fff;font-family:var(--font-display);font-size:15px;letter-spacing:0;margin-bottom:20px;font-weight:600;}
footer ul li{margin-bottom:12px;}
footer ul a{font-size:13.5px;color:rgba(255,255,255,.62);transition:color var(--transition-fast), padding-left var(--transition-fast);}
footer ul a:hover{color:var(--orange-600);padding-left:4px;}
.footer-hours{font-size:13.5px;color:rgba(255,255,255,.45);padding-top:4px;border-top:1px solid rgba(255,255,255,.1);margin-top:6px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:20px 0 24px;
  display:flex;justify-content:space-between;align-items:center;font-size:12.5px;
  flex-wrap:wrap;gap:8px 16px;color:rgba(255,255,255,.5);
}
.footer-credit{font-size:11.5px;color:rgba(255,255,255,.4);letter-spacing:.02em;}
.footer-credit .heart{color:var(--orange-600);}

/* ---------- 15b. SECTION DOT NAVIGATION ---------- */
/* Fixed, vertically-centered on the right edge. Each dot is a small ring
   that reads on both light and dark sections; the active one turns solid
   orange and its label fades in to the left of it (labels never show for
   inactive dots, keeping the whole thing compact). */
.section-dots{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:850;
  display:flex;flex-direction:column;gap:15px;align-items:flex-end;
}
.section-dot{
  display:flex;align-items:center;gap:8px;background:none;border:0;padding:5px;cursor:pointer;
}
.section-dot-mark{
  width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.85);
  border:1.5px solid rgba(11,35,64,.3);box-shadow:0 1px 5px rgba(0,0,0,.2);
  transition:background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
  flex-shrink:0;display:block;
}
.section-dot:hover .section-dot-mark{transform:scale(1.3);}
.section-dot.active .section-dot-mark{background:var(--orange-600);border-color:var(--orange-600);transform:scale(1.35);}
.section-dot-label{
  font-size:11px;font-weight:700;letter-spacing:.03em;color:#fff;
  background:var(--navy-900);padding:5px 11px;border-radius:100px;white-space:nowrap;
  opacity:0;transform:translateX(6px);
  transition:opacity var(--transition-fast), transform var(--transition-fast);
}
.section-dot.active .section-dot-label{opacity:1;transform:translateX(0);}

@media (max-width:720px){
  .section-dots{right:10px;gap:12px;}
  .section-dot{padding:4px;gap:0;}
  .section-dot-mark{width:7px;height:7px;}
  /* Dots-only on mobile — the active label pill was overlapping card
     content on narrow screens (e.g. the Testimonials cards run close to
     the right edge), so it's hidden here rather than patching every
     section's spacing to make room for it. */
  .section-dot-label{display:none;}
}

@media (prefers-reduced-motion: reduce){
  .section-dot-mark, .section-dot-label{transition:none;}
}

/* ---------- 16. FLOATING BUTTONS ---------- */
.wa-float{
  position:fixed;bottom:40px;right:26px;z-index:900;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -10px rgba(0,0,0,.4);
  transition:transform var(--transition-fast);
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:28px;height:28px;color:#fff;}

/* Back to top — premium rounded-square in brand navy/orange, stacked
   directly above the WhatsApp button. The outer ring fills clockwise
   with the brand orange as the visitor scrolls, via --progress (0-100)
   updated in script.js. */
.totop-ring{
  position:fixed;bottom:114px;right:26px;z-index:900;
  width:58px;height:58px;border-radius:18px;padding:2.5px;
  background:conic-gradient(var(--orange-600) calc(var(--progress, 0) * 1%), rgba(255,255,255,.16) 0);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.totop-ring.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.totop{
  width:100%;height:100%;border-radius:15.5px;
  background:linear-gradient(155deg,var(--navy-800) 0%,var(--navy-900) 100%);
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 14px 30px -12px rgba(11,35,64,.55);
  transition:box-shadow var(--transition-med);
}
.totop-ring:hover .totop{
  box-shadow:0 16px 34px -12px rgba(11,35,64,.5), 0 0 26px -4px rgba(186,139,72,.55);
}
.totop-ring:hover .totop-arrow{transform:translateY(-2px);color:var(--orange-600);}
.totop-ring:hover .totop-bar{background:var(--orange-600);width:20px;}
.totop-ring:hover{transform:translateY(-4px);}
.totop-arrow{width:19px;height:19px;transition:transform var(--transition-fast), color var(--transition-fast);}
.totop-bar{
  width:14px;height:2px;border-radius:2px;background:rgba(255,255,255,.35);
  transition:background var(--transition-fast), width var(--transition-fast);
}

@media (max-width:520px){
  /* Keep the floating WhatsApp button out of the hero's Buy/Sell/Rent/Land
     + search panel on phones: hidden until the hero has scrolled past
     (toggled by initHeaderScrollEffects in script.js). Desktop is
     untouched — this whole rule only exists below 520px. */
  .wa-float{
    width:52px;height:52px;bottom:30px;right:18px;
    opacity:0;transform:translateY(14px);pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
  }
  .wa-float.show{opacity:1;transform:translateY(0);pointer-events:auto;}
  .wa-float svg{width:25px;height:25px;}
  .totop-ring{width:50px;height:50px;bottom:92px;right:18px;border-radius:16px;}
  .totop{border-radius:13.5px;}
  .totop-arrow{width:16px;height:16px;}
}

@media (prefers-reduced-motion: reduce){
  .wa-float{transition:none;}
}

/* ---------- 17. SCROLL REVEAL ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  *{transition:none !important;}
}

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width:400px){
  .brand-word{font-size:13.5px;}
  .brand-wordmark .wm-dgss{font-size:18px;}
  .brand-wordmark .wm-realty{font-size:9.5px;letter-spacing:.08em;}
  header .container{gap:10px;}
}

@media (max-width:1070px){
  .primary-nav{display:none;}
  .nav-actions .icon-btn{display:none;}
  .hamburger{display:flex;}
  .nav-actions{gap:10px;}
}

@media (max-width:1024px){
  .about-grid, .contact-grid{grid-template-columns:1fr;}
  /* Grid items default to min-width:auto, which lets the map iframe's
     browser-default intrinsic width (~300px) force the card wider than
     its actual track — invisibly, since overflow-x:hidden on body hides
     the resulting scrollbar while the card's edge still clips past the
     viewport on narrow phones. min-width:0 lets it size to the track. */
  .about-visual, .about-copy, .contact-info, .form-card{min-width:0;}
  .prop-grid{grid-template-columns:repeat(2,1fr);}
  .why-list{grid-template-columns:1fr;}
  .testimonial-grid{grid-template-columns:1fr 1fr;}
  .why-point-wide{max-width:none;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:720px){
  .nav-actions{gap:8px;}
  .brand img{height:34px;}
  .brand-word{font-size:15px;}
  .brand-wordmark .wm-dgss{font-size:20px;}
  .brand-wordmark .wm-realty{font-size:11px;}
  .prop-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .why-stats{grid-template-columns:repeat(2,1fr);}
  .testimonial-grid{grid-template-columns:1fr;gap:18px;}
  .why-stat{border-bottom:1px solid rgba(255,255,255,.14);padding:24px 12px;}
  .why-stat:nth-last-child(-n+2){border-bottom:none;}
  .why-stat:nth-child(2n){border-right:none;}
  .founder-byline{flex-wrap:wrap;border-radius:20px;}
  .founder-byline-link{margin-left:0;width:100%;}
  .footer-grid{grid-template-columns:1fr;gap:34px;padding:44px 0 28px;}
  .footer-bottom{flex-direction:column;text-align:center;}
  /* Hero: let height follow content instead of stretching to fill the
     viewport — on shorter phone screens, a forced min-height plus
     space-between was pushing the Buy/Sell/Rent/Land + search panel
     past the fold (and into the floating WhatsApp button). */
  .hero{min-height:0;}
  .hero-content{padding:88px 0 26px;justify-content:flex-start;}
  .hero-slide-dots{top:16px;right:16px;}
  /* .hero-inner carries the shared .container class (0 24px base padding)
     — this override was previously zeroing that out completely, so hero
     text ran edge-to-edge with no side margin at all. Fixed here, and at
     the same time giving the text block the requested rightward shift:
     more room on the left, a controlled ~28px safe gap on the right. The
     whole block moves together since this is the shared parent's padding,
     not a per-element tweak — text itself stays left-aligned. */
  .hero-inner{flex:none;display:block;padding:0 28px 0 40px;}
  .hero-eyebrow{margin-bottom:14px;}
  .hero p.lead{margin-top:16px;font-size:15.5px;}
  .hero-ctas{margin-top:22px;}
  .hero-nav-wrap{padding-top:22px;}
  h2{font-size:30px;}
  .modal-features{grid-template-columns:1fr;}
  .modal-actions .btn{min-width:100%;}

}


/* ---------- 18b. MOBILE HERO — "Clean Premium" (approved mockup) ----------
   Phones only; the desktop hero above is unchanged. Photo stays clearly
   visible, copy sits at the bottom, one gold CTA, WhatsApp moves to the
   floating button, and Buy/Sell/Rent/Land + search become one
   frosted-glass card. Behaviour (filters, search, Sell modal) is the same
   markup and JS as desktop. */
@media (max-width:720px){
  .section-dots{display:none;}

  .hero{min-height:calc(100vh - 150px);min-height:calc(100svh - 150px);}
  .hero-overlay{
    background:linear-gradient(180deg, rgba(6,11,32,.06) 0%, rgba(6,11,32,0) 26%,
      rgba(11,35,64,.5) 58%, rgba(9,28,51,.82) 100%);
  }
  .hero-slide-dots{top:18px;right:20px;gap:6px;}
  .hero-slide-dot{background:rgba(255,255,255,.55);}
  .hero-slide-dot.active{background:#fff;}
  .hero-watermark{display:none;}

  .hero-content{padding:0 0 22px;justify-content:flex-end;}
  .hero-inner{flex:none;display:block;padding:0 20px;}
  .hero-copy{max-width:350px;}
  .hero-eyebrow{
    font-family:var(--font-body);font-weight:500;font-size:13px;letter-spacing:.06em;
    text-transform:none;color:#E9D3AE;text-shadow:0 1px 8px rgba(0,0,0,.35);margin-bottom:14px;
  }
  .hero-eyebrow::before{width:22px;height:1.5px;background:#D4AE73;}
  .hero h1{font-size:clamp(34px,9.3vw,40px);line-height:1.1;letter-spacing:-.02em;text-shadow:0 2px 18px rgba(0,0,0,.3);}
  .hero h1 .accent{font-size:16px;margin-top:10px;}
  .hero p.lead{display:block;font-size:15px;line-height:1.55;max-width:330px;margin-top:12px;color:rgba(255,255,255,.9);}
  .hero-ctas{margin-top:22px;gap:0;}
  .hero-ctas .btn-outline{display:none;}
  .hero-ctas .btn-primary{
    height:50px;padding:0 26px;color:var(--navy-900);
    box-shadow:0 12px 26px -14px rgba(0,0,0,.55);
  }
  .hero-ctas .btn-primary:hover{color:#fff;}
  .hero-ctas .btn-primary::after{
    content:"";width:16px;height:16px;flex-shrink:0;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  /* Buy/Sell/Rent/Land + search: same component as desktop (section 7). */
  .hero-nav-wrap{padding:22px 20px 0;}

  /* WhatsApp: small floating button, always available on phones. */
  .wa-float{
    width:54px;height:54px;bottom:20px;right:18px;
    opacity:1;transform:none;pointer-events:auto;
  }
  .wa-float svg{width:26px;height:26px;}
}

/* ---------- 19. FILTERS, CARD LINKS, FORM STATES, A11Y HELPERS ---------- */
.skip-link{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--navy-900);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;transition:top .15s ease;}
.skip-link:focus{top:12px;}
#main-content{display:block;height:0;overflow:hidden;}

.prop-filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:16px;margin-bottom:28px;box-shadow:var(--shadow-card);}
.prop-filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.prop-chip{min-height:44px;padding:10px 18px;border-radius:100px;border:1.5px solid var(--line);font-weight:700;font-size:13.5px;color:var(--navy-900);background:#fff;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);}
.prop-chip:hover{border-color:var(--navy-900);}
.prop-chip.is-active{background:var(--navy-900);border-color:var(--navy-900);color:#fff;}
.prop-filter-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.prop-filter-row input,.prop-filter-row select{min-height:44px;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:14px;background:#fff;color:var(--ink);font-family:inherit;}
.prop-filter-row input{flex:1 1 220px;min-width:0;}
.prop-filter-row select{flex:0 1 auto;}
.prop-filter-row input:focus,.prop-filter-row select:focus{border-color:var(--orange-600);box-shadow:0 0 0 4px rgba(186,139,72,.12);outline:none;}
.prop-filter-reset{min-height:44px;padding:10px 12px;font-weight:700;color:var(--orange-700);text-decoration:underline;text-underline-offset:3px;}
.prop-result-count{font-size:13px;color:var(--slate);margin-top:10px;font-weight:600;}
.prop-result-count:empty{display:none;}
.prop-filters [hidden]{display:none !important;}

.prop-title{font-family:var(--font-display);font-size:18px;line-height:1.3;letter-spacing:-.005em;color:var(--navy-900);margin-bottom:8px;font-weight:600;}
.prop-title a:hover{color:var(--orange-600);}
.prop-media{display:block;}
.prop-media picture{display:block;width:100%;height:100%;}
.prop-noimg{display:flex;align-items:center;justify-content:center;height:100%;color:var(--slate);font-size:13px;font-weight:600;}
.prop-tag.is-closed{background:#6b6b6b;box-shadow:none;}
.prop-card.is-closed .prop-media img{filter:grayscale(.55);}
a.prop-details-btn{display:inline-flex;align-items:center;justify-content:center;}
.properties-note a{color:var(--navy-900);font-weight:700;text-decoration:underline;text-underline-offset:3px;}

.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}
.form-error{color:#B42318;font-size:13.5px;font-weight:600;margin-top:12px;}
.form-error:empty{display:none;}
.form-error a{text-decoration:underline;color:inherit;}
button[disabled]{opacity:.65;cursor:progress;}

@media (max-width:720px){
  .prop-filters{padding:12px;margin-bottom:22px;}
  .prop-filter-row select{flex:1 1 calc(50% - 5px);}
  .prop-chip{padding:10px 14px;}
}

/* ---------- CMS-driven content (Admin → Contact Details / Settings) ---------- */
/* Elements whose setting is blank are hidden by the Worker with [hidden];
   this wins over component display rules (e.g. .icon-btn{display:flex}). */
[hidden]{display:none !important;}
/* Any uploaded logo keeps its proportions inside the header/footer slot. */
.brand-logo-img,.footer-brand-logo-img{object-fit:contain;max-width:200px;}
/* Listings temporarily unavailable (database unreachable) — never stale data. */
.prop-unavailable{grid-column:1/-1;text-align:center;padding:44px 20px;border:1px dashed var(--line,#E6E6E6);border-radius:16px;background:#fff;color:var(--slate,#5C5C5C);font-size:15px;}
.prop-unavailable strong{display:block;color:var(--ink,#222);font-size:17px;margin-bottom:6px;}
.prop-unavailable-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px;}
/* Testimonial rating + photo (Admin → Testimonials). */
.testimonial-rating{color:var(--orange-600,#BA8B48);font-size:15px;letter-spacing:2px;margin-bottom:10px;}
.testimonial-photo{object-fit:cover;padding:0;}

/* ==========================================================================
   21. INTERNAL PAGES (About, Properties, List With Us, Free Valuation,
       Joint Venture, NRI Services) — same header, footer, type, colours
       and buttons as the homepage. Nothing here changes the homepage.
   ========================================================================== */

/* Header: the current page is marked (only internal pages set aria-current). */
.primary-nav a[aria-current="page"]{opacity:1;}
.primary-nav a[aria-current="page"]::after{width:100%;}
.mobile-nav-links a.mobile-nav-links-btn{color:var(--orange-600);}
.mobile-nav-links a[aria-current="page"]{color:var(--orange-600);}

/* Closed mobile menu: no shadow strip on the right edge, and its links
   can't be reached with Tab while it is off-screen. */
.mobile-nav{visibility:hidden;box-shadow:none;transition:transform .35s cubic-bezier(.65,0,.35,1), visibility 0s linear .35s;}
.mobile-nav.open{visibility:visible;box-shadow:-24px 0 60px -20px rgba(0,0,0,.5);transition-delay:0s;}

/* Page hero: full-width photo with the homepage hero's dark overlay. */
.page-hero{
  position:relative;overflow:hidden;background:var(--navy-900);
  min-height:clamp(440px,62vh,600px);display:flex;align-items:center;
}
.page-hero-media,.page-hero-media img{position:absolute;inset:0;width:100%;height:100%;}
.page-hero-media img{object-fit:cover;object-position:center 45%;display:block;}
.page-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg, rgba(6,11,32,.8) 0%, rgba(6,11,32,.56) 45%, rgba(6,11,32,.3) 78%, rgba(6,11,32,.38) 100%);
}
.page-hero-inner{position:relative;z-index:2;width:100%;padding-top:72px;padding-bottom:72px;}
.page-crumbs{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.78);margin-bottom:26px;}
.page-crumbs a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.page-hero .hero-eyebrow{margin-bottom:18px;}
.page-hero h1{
  color:#fff;max-width:15ch;font-size:clamp(36px,4.4vw,58px);line-height:1.08;letter-spacing:-.02em;
  text-shadow:0 6px 30px rgba(0,0,0,.45);
}
.page-hero-lead{color:rgba(255,255,255,.92);font-size:18px;max-width:560px;margin-top:22px;text-shadow:0 2px 14px rgba(0,0,0,.4);}
.page-hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}

/* Sections */
.page-section{padding:var(--section-pad) 0;background:var(--paper);}
.page-section-alt{background:var(--mist);}

/* Key points: four short items */
.page-points{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;}
.page-point{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:28px 24px 26px;}
.page-point-icon{
  width:48px;height:48px;border-radius:50%;background:var(--orange-100);color:var(--orange-700);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.page-point-icon svg{width:22px;height:22px;}
.page-point h3{font-size:18px;margin-bottom:8px;}
.page-point p{font-size:15px;line-height:1.6;}

/* Enquiry: short intro beside the existing form */
.page-enquiry-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start;}
.page-enquiry-copy > p{margin-top:16px;max-width:440px;}
.page-enquiry-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.page-note{margin-top:26px;padding-left:14px;border-left:2px solid var(--orange-600);font-size:14px;line-height:1.6;max-width:440px;}
.page-form-card{background:#fff;}
.page-form-card .lead-form-section-label:first-of-type{margin-top:0;}

/* About: closing call to action */
.page-cta{background:var(--navy-900);padding:64px 0;}
.page-cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;}
.page-cta h2{color:#fff;}
.page-cta p{color:rgba(255,255,255,.75);margin-top:8px;}
.page-cta .page-hero-ctas{margin-top:0;}

@media (max-width:1024px){
  .page-points{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-enquiry-grid{grid-template-columns:1fr;gap:34px;}
}
@media (max-width:720px){
  .page-hero{min-height:0;}
  .page-hero-inner{padding-top:56px;padding-bottom:48px;}
  .page-crumbs{margin-bottom:18px;}
  .page-hero h1{font-size:clamp(32px,9vw,40px);max-width:none;}
  .page-hero-lead{font-size:16px;margin-top:16px;}
  .page-hero-ctas{margin-top:26px;}
  .page-hero-ctas .btn{flex:1 1 auto;}
  .page-section{padding:64px 0;}
  .page-points{grid-template-columns:1fr;gap:14px;}
  .page-point{padding:22px 20px;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;}
  .page-point-icon{width:44px;height:44px;margin-bottom:0;grid-row:span 2;}
  .page-point h3{margin-bottom:4px;}
  .page-form-card{padding:28px 20px;}
  .page-cta{padding:52px 0;}
}