/* ============================================================
   Nambiar Builders — Canonical Stylesheet
   --------------------------------------------------------------
   Deep forest green + navy/slate palette on warm cream.
   Serif headings (Georgia stack) + system sans body. Adopted
   as the builder canonical from sites/nambiar-district25/.
   ============================================================ */

:root{
  /* Canonical 3x3 tokens (check-builder-theme.mjs) */
  --brand-primary:   #2c5e3e;   /* deep forest green - CTAs, brand identity */
  --brand-secondary: #3c4458;   /* navy/slate - headings, statement surfaces */
  --brand-tertiary:  #8fb29a;   /* light sage - accents, focus, decoration */
  --dark-primary:    #2d3446;   /* near-black slate - body text on light */
  --dark-secondary:  #56607a;   /* muted slate-blue - secondary text, meta */
  --dark-tertiary:   #dceadd;   /* pale green border / divider */
  --light-primary:   #f7fbf7;   /* warm pale green page background */
  --light-secondary: #ffffff;   /* white card / surface */
  --light-tertiary:  #eef5ef;   /* alt panel - nested green tint */

  /* State (form success / error) */
  --state-success: #1f5f34;   /* form validation — green (AA on light) */
  --state-error:   #7b1d33;   /* form validation — red (AA on light) */

  /* Shadows */
  --shadow:   0 6px 24px color-mix(in srgb, var(--dark-secondary) 18%, transparent);
  --shadowlg: 0 18px 56px color-mix(in srgb, var(--dark-secondary) 26%, transparent);

  /* Font stacks */
  --display: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --body:    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --navh: 72px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--dark-primary);background:var(--light-secondary);line-height:1.7;-webkit-font-smoothing:antialiased}
input, select, textarea, button { font-family: inherit; font-size: inherit; }
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:10px 14px;
  background:var(--brand-secondary);
  color:var(--light-secondary);
  z-index:2000;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/* Accessible in-content links: high-contrast and not color-only */
.hero-sub a,
.overview p a,
.ovv a,
.loc p a,
.copy-list a,
.pr p a,
.faq-ai a,
.disc a {
  color:var(--dark-primary);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:2px;
  font-weight:600;
  transition:color .2s ease, text-decoration-color .2s ease;
}

.hero-sub a:hover,
.overview p a:hover,
.ovv a:hover,
.loc p a:hover,
.copy-list a:hover,
.pr p a:hover,
.faq-ai a:hover,
.disc a:hover {
  color:color-mix(in srgb, var(--dark-primary) 75%, black);
  text-decoration-color:color-mix(in srgb, var(--dark-primary) 75%, black);
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brand-primary);
  outline-offset:2px;
}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}
.pad{padding:88px 0}
.padsm{padding:60px 0}
h1,h2,h3,h4{font-family:var(--display);line-height:1.2;color:var(--brand-secondary)}
h1{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:600}
h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:600;margin-bottom:18px}
h3{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:600}
p{margin-bottom:1rem;color:var(--dark-secondary);line-height:1.8}
.copy-list{list-style:disc;margin:0 0 1rem 1.1rem;padding:0}
.copy-list li{margin:0 0 .45rem;color:var(--dark-secondary);line-height:1.8}

/* Label above headings */
.eyebrow{display:block;font-family:var(--body);font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brand-primary);margin-bottom:10px}
.rule{width:40px;height:2px;background:var(--brand-tertiary);margin:16px 0 30px}
.center{text-align:center}
.center .rule{margin-left:auto;margin-right:auto}

/* Buttons */
/* Two roles only. Secondary is primary's outline twin: same forest green on
   the border and the label, so a pair reads as one emphasis step, not two
   colours. Both variants carry a 1px border and 29/12 padding — the old
   outline rule added a border the solid one lacked and ran 2px larger. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 29px;border-radius:2px;font-family:var(--body);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s ease;border:1px solid transparent;letter-spacing:.04em;text-transform:uppercase;line-height:1.7}
.btn-primary{background:var(--brand-primary);color:var(--light-secondary);border-color:var(--brand-primary)}
.btn-primary:hover{background:color-mix(in srgb, var(--brand-primary) 80%, black);border-color:color-mix(in srgb, var(--brand-primary) 80%, black);transform:translateY(-2px);box-shadow:0 8px 24px color-mix(in srgb, var(--brand-primary) 35%, transparent)}
.btn-secondary{background:transparent;color:var(--brand-primary);border-color:var(--brand-primary)}
.btn-secondary:hover{background:var(--brand-primary);color:var(--light-secondary);transform:translateY(-2px)}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}

/* ══ NAVBAR ══ */
.nav{position:fixed;top:0;left:0;right:0;height:var(--navh);z-index:1000;transition:all .3s ease}
.nav.top{background:color-mix(in srgb, var(--light-secondary) 82%, transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--dark-tertiary)}
.nav.scrolled{background:color-mix(in srgb, var(--light-secondary) 96%, transparent);backdrop-filter:blur(16px);box-shadow:0 6px 22px color-mix(in srgb, var(--dark-secondary) 20%, transparent)}
.nav-in{max-width:1280px;margin:0 auto;padding:0 28px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{display:flex;align-items:center;gap:4px}
.nav-logo .lt-badge{background:var(--brand-primary);color:var(--light-secondary);font-family:var(--body);font-size:.78rem;font-weight:800;padding:5px 11px;letter-spacing:.06em}
.nav-logo .project-name{font-family:var(--display);font-size:1.1rem;font-weight:600;color:var(--brand-secondary);letter-spacing:.02em}
.navlinks{display:flex;align-items:center;gap:2px}
.navlinks a{font-size:.75rem;font-weight:500;color:var(--brand-secondary);padding:6px 10px;letter-spacing:.05em;text-transform:uppercase;transition:color .2s}
/* WCAG AA: hover was var(--brand-tertiary) #8fb29a on white = 2.33:1. Darkened
   same-hue sage #587f64 = 4.53:1. Token itself unchanged (used on dark surfaces). */
.navlinks a:hover{color:#587f64}
.nav-cta{font-size:.75rem;font-weight:700;padding:9px 20px;background:var(--brand-primary);color:var(--light-secondary);letter-spacing:.06em;text-transform:uppercase;transition:all .3s}
.nav-cta:hover{background:color-mix(in srgb, var(--brand-primary) 80%, black)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:0}
.burger span{display:block;width:22px;height:1.5px;background:var(--brand-secondary);transition:all .3s}
.mob-nav{display:none;position:fixed;top:var(--navh);left:0;right:0;background:color-mix(in srgb, var(--light-tertiary) 70%, var(--light-secondary));padding:24px 28px 32px;z-index:999;border-top:1px solid var(--dark-tertiary)}
.mob-nav.on{display:block}
/* :not(.btn) is load-bearing, not tidiness. `.mob-nav a` scores (0,1,1) and
   outranked `.btn-primary`s own (0,1,0) white ink, so the /contact CTA painted
   --brand-secondary navy on the forest-green fill at 1.29:1 — an unreadable
   button. It hid from every audit because .mob-nav is display:none until the
   burger opens, and axe never opens it. Excluding buttons also hands them back
   .btn s padding, weight and centring, which this rule had been overriding. */
.mob-nav a:not(.btn){display:block;padding:12px 0;border-bottom:1px solid color-mix(in srgb, var(--light-secondary) 7%, transparent);font-size:.85rem;font-weight:500;color:var(--brand-secondary);text-transform:uppercase;letter-spacing:.06em}
.mob-nav .btn-primary{margin-top:20px;width:100%;justify-content:center}

/* ══ HERO ══ */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;margin-top:0}
.hero-bg{position:absolute;inset:0;z-index:0}
/* Architectural gradient background - replace with actual project image */
.hero-bg-img{
  width:100%;height:100%;object-fit:cover;object-position:center;
}
.hero-bg-ph{
  width:100%;height:100%;
  background:linear-gradient(165deg,var(--light-primary) 0%,color-mix(in srgb, var(--brand-tertiary) 30%, white) 34%,color-mix(in srgb, var(--brand-tertiary) 22%, white) 68%,var(--light-secondary) 100%);
  position:relative;overflow:hidden;
}
.hero-bg-ph::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 70% 40%,color-mix(in srgb, var(--brand-tertiary) 24%, transparent) 0%,transparent 70%),
             radial-gradient(ellipse 50% 80% at 20% 80%,color-mix(in srgb, var(--brand-tertiary) 16%, transparent) 0%,transparent 60%);
}
/* Animated grid lines */
.hero-bg-ph::after{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(color-mix(in srgb, var(--brand-tertiary) 8%, transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb, var(--brand-tertiary) 8%, transparent) 1px,transparent 1px);
  background-size:80px 80px;
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb, black 72%, transparent) 0%,color-mix(in srgb, black 80%, transparent) 42%,color-mix(in srgb, black 88%, transparent) 100%);z-index:1}
.hero-content{position:relative;z-index:2;width:100%;padding:0 0 72px}
.hero-top-badge{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid color-mix(in srgb, var(--light-secondary) 22%, transparent);background:color-mix(in srgb, black 35%, transparent);
  padding:8px 18px;margin-bottom:28px;
}
.hero-top-badge .dot{width:7px;height:7px;background:var(--brand-tertiary);border-radius:50%;animation:pulse 2s infinite}
.hero-top-badge span{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb, var(--light-secondary) 94%, var(--brand-tertiary))}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}
.hero h1{color:var(--light-secondary);margin-bottom:10px;line-height:1.15}
.hero h1 em{color:var(--brand-tertiary);font-style:normal}
.hero .page-updated{color:color-mix(in srgb, var(--light-secondary) 85%, transparent)}
.last-updated{
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--light-secondary) 78%, transparent);
  margin-bottom:18px;
}
.hero-sub{font-size:1rem;color:color-mix(in srgb, var(--light-secondary) 88%, transparent);max-width:560px;margin-bottom:32px;line-height:1.8}
.hero-sub a{color:var(--light-secondary);text-decoration-color:color-mix(in srgb, var(--light-secondary) 55%, transparent)}
.hero-sub a:hover{color:var(--light-secondary);text-decoration-color:var(--light-secondary)}

/* Stat bar */
.hero-stats{display:flex;gap:0;margin-bottom:36px;border:1px solid color-mix(in srgb, var(--light-secondary) 16%, transparent);width:fit-content;background:color-mix(in srgb, black 28%, transparent)}
.hstat{padding:16px 28px;border-right:1px solid color-mix(in srgb, var(--light-secondary) 12%, transparent)}
.hstat:last-child{border-right:none}
.hstat .sv{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--light-secondary);line-height:1}
.hstat .sl{font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb, var(--light-secondary) 72%, transparent);margin-top:4px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn-secondary{color:var(--light-secondary);border-color:color-mix(in srgb, var(--light-secondary) 48%, transparent)}
.hero .btn-secondary:hover{background:var(--light-secondary);color:var(--dark-primary)}

/* Scroll indicator */
.scroll-ind{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-ind span{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:color-mix(in srgb, var(--light-secondary) 72%, transparent)}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,color-mix(in srgb, var(--brand-tertiary) 60%, transparent),transparent);animation:scrollDown 2s ease infinite}
@keyframes scrollDown{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ══ FORM PANEL (side-by-side with hero on desktop) ══ */
.hero-inner{display:grid;grid-template-columns:1fr 380px;gap:0;align-items:center;padding-bottom:0}
.form-card{background:color-mix(in srgb, var(--light-secondary) 84%, transparent);border:1px solid var(--dark-tertiary);backdrop-filter:blur(14px);padding:32px 28px;position:relative;z-index:2}
.form-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand-primary),var(--brand-tertiary))}
.form-card h2,.form-card h3{color:var(--brand-secondary);font-size:1.2rem;margin-bottom:6px}
.form-card p{color:var(--dark-secondary);font-size:.78rem;margin-bottom:20px;line-height:1.6}
.form-grid{display:grid;grid-template-columns:1fr;gap:12px}
.form-grid .fg{margin-bottom:0}
.form-grid .fg-full,.form-grid .form-submit{grid-column:1 / -1}
.form-grid .form-submit{width:100%;justify-content:center}
.fg{margin-bottom:12px}
.fg input,.fg textarea,.fg select{
  width:100%;padding:11px 14px;
  background:color-mix(in srgb, var(--light-secondary) 92%, transparent);border:1px solid var(--dark-tertiary);
  font-family:var(--body);font-size:.83rem;color:var(--brand-secondary);outline:none;transition:all .3s;
  border-radius:0;
}
.fg input::placeholder,.fg textarea::placeholder{color:color-mix(in srgb, var(--dark-secondary) 70%, white)}
.fg input:focus,.fg textarea:focus{border-color:var(--brand-tertiary);background:var(--light-secondary)}
.fg textarea{resize:none;height:70px}
.fg select{color:var(--dark-secondary);appearance:none}
.fg select option{background:var(--light-secondary);color:var(--brand-secondary)}
.fsuccess{
  display:none;
  background:color-mix(in srgb, var(--state-success) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--state-success) 40%, transparent);
  color:var(--state-success);
  padding:14px;
  font-size:.82rem;
  text-align:center;
  margin-top:10px
}
.fsuccess.is-error{
  background:color-mix(in srgb, var(--state-error) 12%, transparent);
  border-color:color-mix(in srgb, var(--state-error) 40%, transparent);
  color:var(--state-error)
}
.form-grid.is-submitting .form-submit{opacity:.8;cursor:wait}
.form-submit:disabled{opacity:.8;cursor:wait}
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.form-note{font-size:.65rem;color:var(--dark-secondary);text-align:center;margin-top:12px}

/* ══ SECTION TAG (repeated label like reference site) ══ */
.section-tag{text-align:center;margin-bottom:8px}
.section-tag span{font-family:var(--body);font-size:.62rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--brand-primary)}
.mp .section-tag span,.loc .section-tag span{color:var(--brand-primary)}

/* ══ OVERVIEW ══ */
.overview{background:var(--light-primary)}
.ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.ov-bullets{display:flex;flex-direction:column;gap:0;margin-top:20px}
.ovb{display:flex;gap:0;border-bottom:1px solid var(--dark-tertiary)}
.ovb:first-child{border-top:1px solid var(--dark-tertiary)}
.ovk{width:180px;flex-shrink:0;padding:13px 16px 13px 0;font-size:.75rem;font-weight:600;color:var(--brand-secondary);letter-spacing:.02em}
.ovv{padding:13px 0;font-size:.8rem;color:var(--dark-secondary);flex:1}
/* Prevent long IDs (like RERA numbers) from overflowing on small screens */
.ovv,.faq-ai,.disc{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ══ GALLERY ══ */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:200px;gap:6px}
.gi{position:relative;overflow:hidden;background:var(--brand-secondary);cursor:pointer}
.gi:first-child{grid-column:span 2;grid-row:span 2}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gi:hover img{transform:scale(1.06)}
.gov{position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb, black 60%, transparent),transparent 50%);opacity:0;transition:all .3s;display:flex;align-items:flex-end;padding:16px}
.gi:hover .gov{opacity:1}
.gov span{color:var(--light-secondary);font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
/* Placeholders */
.gph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.gph-main{background:linear-gradient(135deg,var(--brand-secondary) 0%,color-mix(in srgb, var(--brand-secondary) 70%, black) 50%,var(--brand-secondary) 100%)}
.gph-2{background:linear-gradient(135deg,var(--brand-secondary),color-mix(in srgb, var(--brand-secondary) 70%, black))}
.gph-3{background:linear-gradient(135deg,color-mix(in srgb, var(--brand-secondary) 88%, black),color-mix(in srgb, var(--brand-secondary) 65%, black))}
.gph-4{background:linear-gradient(135deg,var(--brand-secondary),color-mix(in srgb, var(--brand-secondary) 60%, black))}
.gph-5{background:linear-gradient(135deg,color-mix(in srgb, var(--brand-secondary) 92%, black),color-mix(in srgb, var(--brand-secondary) 68%, black))}
.gph .pi{font-size:2rem;opacity:.25}
.gph .pt{font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--light-tertiary)}
/* Floating label on main gallery */
.gi:first-child .gph-main::after{
  content:'ARTISTIC IMPRESSION';
  position:absolute;bottom:14px;right:14px;
  font-size:.58rem;font-weight:600;letter-spacing:.14em;
  color:var(--light-tertiary);text-transform:uppercase;
}

/* ══ MASTER PLAN ══ */
.mp{background:linear-gradient(180deg,color-mix(in srgb, var(--brand-tertiary) 22%, white) 0%,var(--light-tertiary) 100%)}
.mp-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.mp h2,.mp h3,.mp .eyebrow{color:var(--brand-secondary)}
.mp .eyebrow{color:var(--brand-primary)}
.mp .rule{background:var(--brand-primary)}
.mp p{color:var(--dark-secondary)}
.mp-img-wrap{position:relative;border:1px solid var(--dark-tertiary)}
.mp-img{width:100%;aspect-ratio:4/3;object-fit:cover}
.mp-ph{
  width:100%;aspect-ratio:4/3;
  background:linear-gradient(135deg,color-mix(in srgb, var(--brand-secondary) 90%, black),color-mix(in srgb, var(--brand-secondary) 70%, black));
  border:1px solid color-mix(in srgb, var(--light-secondary) 8%, transparent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  position:relative;overflow:hidden;
}
.mp-ph::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 50%,color-mix(in srgb, var(--brand-tertiary) 8%, transparent),transparent);
}
.mp-ph .pi{font-size:3rem;opacity:.2}
.mp-ph p{color:var(--dark-secondary);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin:0}
.mp-overlay-tag{
  position:absolute;top:16px;left:16px;
  background:color-mix(in srgb, var(--brand-primary) 90%, transparent);color:var(--light-secondary);
  font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 12px;
}
.mp-features{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.mpf{background:color-mix(in srgb, var(--light-secondary) 78%, transparent);border:1px solid var(--dark-tertiary);padding:16px;display:flex;gap:12px;align-items:flex-start}
.mpf .ico{font-size:1.2rem;flex-shrink:0;margin-top:2px}
.mpf-label{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-tertiary);margin-bottom:3px}
.mpf-val{font-size:.82rem;color:var(--dark-secondary)}

/* ══ FLOOR PLANS ══ */
.fp{background:var(--light-secondary)}
.fp-scroll{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.fpc{border:1px solid var(--dark-tertiary);overflow:hidden;transition:all .3s;cursor:pointer}
.fpc:hover{border-color:var(--brand-primary);box-shadow:0 8px 32px color-mix(in srgb, var(--brand-primary) 12%, transparent);transform:translateY(-4px)}
.fp-img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--light-primary)}
.fp-ph{width:100%;aspect-ratio:4/3;background:var(--light-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--dark-secondary)}
.fp-ph .pi{font-size:2rem;opacity:.4}
.fp-ph small{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.fp-info{padding:16px 18px;border-top:1px solid var(--dark-tertiary);display:flex;justify-content:space-between;align-items:center}
.fp-config{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--brand-secondary)}
.fp-area{font-size:.75rem;color:var(--dark-secondary)}
.fp-tag{font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--brand-secondary);color:var(--light-secondary);padding:4px 10px}

/* ══ AMENITIES ══ */
.am{background:var(--light-primary)}
.am-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--dark-tertiary);margin-top:40px}
.amc{background:var(--light-secondary);padding:28px 20px;text-align:center;transition:all .3s;cursor:default}
.amc:hover{background:var(--brand-secondary)}
.amc:hover .ami,.amc:hover .amn{color:var(--light-secondary)}
.amc:hover .ami{border-color:color-mix(in srgb, var(--light-secondary) 15%, transparent);background:color-mix(in srgb, var(--light-secondary) 5%, transparent)}
.ami{width:52px;height:52px;border:1px solid var(--dark-tertiary);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin:0 auto 12px;transition:all .3s}
.amn{font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--brand-secondary);transition:all .3s}

/* ══ LOCATION ══ */
.loc{background:linear-gradient(180deg,var(--light-tertiary) 0%,color-mix(in srgb, var(--brand-tertiary) 22%, white) 100%)}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.loc h2,.loc h3,.loc .eyebrow{color:var(--brand-secondary)}
.loc .eyebrow{color:var(--brand-primary)}
.loc .rule{background:var(--brand-primary)}
.loc p{color:var(--dark-secondary)}
.loc .copy-list li{color:var(--dark-secondary)}
.loc-map{width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,color-mix(in srgb, var(--brand-tertiary) 30%, white),color-mix(in srgb, var(--brand-tertiary) 22%, white));border:1px solid var(--dark-tertiary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:all .3s;text-decoration:none;position:relative;overflow:hidden}
.loc-map:hover{border-color:var(--brand-tertiary)}
.loc-map::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 50%,color-mix(in srgb, var(--brand-tertiary) 16%, transparent),transparent)}
.loc-map-img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
.loc-map .pi{font-size:3.5rem;opacity:.25}
.loc-map p{color:var(--dark-secondary);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin:0}
.loc-map-tag{position:absolute;bottom:14px;right:14px;background:var(--brand-primary);color:var(--light-secondary);font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;z-index:2}
.conn-list{display:flex;flex-direction:column;gap:0;margin-top:8px}
.ci{display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--dark-tertiary)}
.ci:first-child{border-top:1px solid var(--dark-tertiary)}
.cico{font-size:1.1rem;width:32px;text-align:center;flex-shrink:0}
.cil{font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-tertiary);margin-bottom:2px}
.civ{font-size:.82rem;color:var(--brand-secondary);font-weight:500}
.cdist{margin-left:auto;font-size:.72rem;font-weight:600;color:var(--brand-secondary);background:var(--brand-tertiary);padding:3px 10px;flex-shrink:0}

/* Growth section */
.growth-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:20px}
.gc{background:color-mix(in srgb, var(--light-secondary) 78%, transparent);border:1px solid var(--dark-tertiary);padding:22px 20px}
.gc h3{font-family:var(--display);font-size:1rem;color:var(--brand-secondary);margin-bottom:8px}
.gc p{font-size:.8rem;color:var(--dark-secondary);margin:0;line-height:1.7}

/* ══ PRICING ══ */
.pr{background:var(--light-secondary)}
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.prc{border:1px solid var(--dark-tertiary);padding:32px 24px;text-align:center;position:relative;transition:all .3s}
.prc:hover{border-color:var(--brand-primary);box-shadow:0 8px 32px color-mix(in srgb, var(--brand-primary) 10%, transparent)}
.prc.featured::before{content:'PRE-LAUNCH OFFER';position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--brand-primary);color:var(--light-secondary);font-size:.6rem;font-weight:800;letter-spacing:.12em;padding:4px 14px}
.pr-type{font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-primary);margin-bottom:12px}
.pr-config{font-family:var(--display);font-size:2rem;font-weight:600;color:var(--brand-secondary);margin-bottom:8px;line-height:1}
.pr-size{font-size:.78rem;color:var(--dark-secondary);margin-bottom:20px}
.pr-price{font-family:var(--display);font-size:1.1rem;color:var(--brand-secondary);margin-bottom:4px;font-weight:600}
.pr-note{font-size:.7rem;color:var(--dark-secondary);margin-bottom:24px}
.pr-divider{width:32px;height:1px;background:var(--dark-tertiary);margin:0 auto 24px}
.prc .btn{width:100%;justify-content:center;font-size:.72rem;padding:11px 14px}

/* ══ CTA ROW ══ */
.cta-row{background:transparent;padding:0;display:flex;justify-content:center;align-items:center;gap:.75rem;flex-wrap:wrap}
.cta-row:has(.cta-row-in){background:linear-gradient(90deg,color-mix(in srgb, var(--brand-tertiary) 45%, white) 0%,color-mix(in srgb, var(--brand-tertiary) 30%, white) 100%);display:block}
.cta-row-in{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;padding:32px 28px}
.cta-row p{color:var(--dark-primary);font-size:.9rem;margin:0;line-height:1.6}
.cta-row h3{color:var(--brand-secondary);font-size:1.3rem;margin-bottom:4px}
.cta-row .btn{white-space:nowrap}
/* The custom-report band is a pale sage gradient; the white button it used to
   force sat at ~1.5:1 against it. .btn-primary reads ~5:1 there — no override. */

/* ══ FAQS ══ */
.faqs{background:var(--light-primary)}
.faq-list{max-width:760px;margin:40px auto 0}
.faq-item{border-bottom:1px solid var(--dark-tertiary)}
.faq-item:first-child{border-top:1px solid var(--dark-tertiary)}
.faq-q{width:100%;background:none;border:none;text-align:left;padding:20px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:var(--body);font-size:.9rem;font-weight:600;color:var(--brand-secondary);gap:16px}
.faq-title{display:block;font-size:.88rem;font-weight:600;line-height:1.45}
.faq-icon{width:26px;height:26px;border:1px solid var(--dark-tertiary);display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;transition:all .3s;color:var(--brand-secondary)}
.faq-item.on .faq-icon{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--light-secondary)}
.faq-a{display:none}
.faq-item.on .faq-a{display:block}
.faq-ai{padding:0 0 20px;font-size:.85rem;color:var(--dark-secondary);line-height:1.8}
.faq-ai a{color:var(--dark-primary);font-weight:700}

/* ══ ABOUT BUILDER ══ */
.builder{background:linear-gradient(180deg,color-mix(in srgb, var(--brand-tertiary) 22%, white) 0%,var(--light-secondary) 100%)}
/* Single column — the builder logo block that used to sit in the left
   column has been removed, so the table takes the full width. */
.builder-grid{display:grid;grid-template-columns:1fr;gap:40px}
.builder h2,.builder .eyebrow{color:var(--brand-secondary)}
.builder .eyebrow{color:var(--brand-primary)}
.builder .rule{background:var(--brand-primary)}
.builder p{color:var(--dark-secondary);font-size:.88rem}
.builder-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--dark-tertiary);margin-top:28px}
.bstat{background:color-mix(in srgb, var(--light-secondary) 90%, transparent);padding:20px;text-align:center}
.bstat .sv{font-family:var(--display);font-size:1.8rem;font-weight:600;color:var(--brand-secondary);line-height:1}
.bstat .sl{font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dark-secondary);margin-top:6px}

/* ══ OTHER PROJECTS ══ */
.other-proj{background:var(--light-secondary);border-top:1px solid var(--dark-tertiary)}
.proj-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.proj-link{font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:10px 20px;border:1px solid var(--dark-tertiary);color:var(--brand-secondary);transition:all .3s}
.proj-link:hover{background:var(--brand-secondary);color:var(--light-secondary);border-color:var(--brand-secondary)}

/* ══ RELATED PROJECTS ══ */
.related-projects[data-related-projects-section]{
  padding:88px 28px !important;
  background:linear-gradient(180deg,color-mix(in srgb, var(--brand-tertiary) 22%, white) 0%,var(--light-tertiary) 100%) !important;
  color:var(--brand-secondary) !important;
  border-top:1px solid var(--dark-tertiary);
}
.related-projects[data-related-projects-section] .related-projects__inner{
  max-width:1280px !important;
  margin:0 auto !important;
}
.related-projects[data-related-projects-section] .related-projects__header{
  max-width: none !important;
  margin:0 auto 40px !important;
  text-align:center;
  width: 100%;
}
.related-projects[data-related-projects-section] .related-projects__header::before{
  content: "Related Projects";
  display:block;
  margin-bottom:10px;
  color:var(--brand-primary);
  font-family:var(--body);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.25em;
  text-transform:uppercase;
}
.related-projects[data-related-projects-section] .related-projects__header h2{
  color:var(--brand-secondary) !important;
  max-width: none !important;
  display: block;
  width: 100%;
}
.related-projects[data-related-projects-section] .related-projects__header h2::after{
  content:"";
  display:block;
  width:40px;
  height:2px;
  margin:16px auto 0;
  background:var(--brand-primary);
}
.related-projects[data-related-projects-section] .related-projects__header p{
  margin:24px auto 0 !important;
  color:var(--dark-secondary) !important;
  font-size:1rem !important;
  line-height:1.8 !important;
}
.related-projects[data-related-projects-section] .related-projects__grid{
  gap:20px !important;
}
.related-projects[data-related-projects-section] .related-projects__card{
  border:1px solid var(--dark-tertiary) !important;
  border-radius:0 !important;
  background:color-mix(in srgb, var(--light-secondary) 88%, transparent) !important;
  box-shadow:var(--shadow) !important;
}
.related-projects[data-related-projects-section] .related-projects__card:hover{
  border-color:var(--brand-primary) !important;
  box-shadow:var(--shadowlg) !important;
  transform:translateY(-4px) !important;
}
.related-projects[data-related-projects-section] .related-projects__image{
  aspect-ratio:4 / 3 !important;
}
.related-projects[data-related-projects-section] .related-projects__body{
  padding:18px !important;
}
.related-projects[data-related-projects-section] .related-projects__meta{
  margin-bottom:8px !important;
  color:var(--brand-primary) !important;
  font-family:var(--body) !important;
  font-size:.62rem !important;
  font-weight:700 !important;
  letter-spacing:.18em !important;
}
.related-projects[data-related-projects-section] .related-projects__body h3{
  color:var(--brand-secondary) !important;
  font-family:var(--display) !important;
  font-size:1.22rem !important;
  font-weight:600 !important;
  line-height:1.25 !important;
}
.related-projects[data-related-projects-section] .related-projects__body h3 a{
  color:inherit !important;
}
.related-projects[data-related-projects-section] .related-projects__body h3 a:focus-visible{
  outline-color:var(--brand-primary) !important;
}
.related-projects[data-related-projects-section] .related-projects__body p:last-child{
  margin-top:10px !important;
  color:var(--dark-secondary) !important;
  font-size:.86rem !important;
  line-height:1.75 !important;
}

/* Keep shorter columns visible while the longer column scrolls (desktop only) */
@media(min-width:1025px){
  .ov-grid > :first-child,
  .loc-grid > :first-child,
  .mp-inner > :last-child{
    position:sticky;
    top:calc(var(--navh) + 24px);
    align-self:start;
  }
}

/* ══ FOOTER ══ */
.foot{background:linear-gradient(180deg,color-mix(in srgb, var(--brand-tertiary) 14%, white) 0%,var(--light-tertiary) 100%);padding:56px 0 32px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr;gap:48px;padding-bottom:40px;border-bottom:1px solid var(--dark-tertiary);margin-bottom:28px}
.foot-brand .fl{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.foot-brand .lt-b{background:var(--brand-primary);color:var(--light-secondary);font-size:.75rem;font-weight:800;padding:5px 11px;letter-spacing:.06em}
.foot-brand .pn{font-family:var(--display);font-size:1.1rem;font-weight:600;color:var(--brand-secondary)}
.foot-brand p{font-size:.75rem;color:var(--brand-secondary);line-height:1.7;margin:0 0 16px}
.disc{font-size:.62rem;color:var(--dark-secondary);line-height:1.7}
.disc strong{color:var(--dark-primary)}
.foot-col h3,.foot-col h4{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-primary);margin-bottom:16px}
.foot-col a{display:block;font-size:.78rem;color:var(--brand-secondary);padding:4px 0;transition:color .2s}
.foot-col a:hover{color:var(--brand-secondary)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.foot-bot p{font-size:.68rem;color:var(--dark-secondary);margin:0}
.foot-bot-links{display:flex;gap:20px}
.foot-bot-links a{font-size:.68rem;color:var(--brand-secondary);transition:color .2s}
.foot-bot-links a:hover{color:var(--brand-tertiary)}

/* Scroll top */
.stbtn{position:fixed;bottom:28px;right:28px;width:44px;height:44px;background:var(--brand-primary);color:var(--light-secondary);display:flex;align-items:center;justify-content:center;font-size:.9rem;cursor:pointer;opacity:0;transform:translateY(10px);transition:all .3s;border:none;z-index:100}
.stbtn.on{opacity:1;transform:translateY(0)}
.stbtn:hover{background:color-mix(in srgb, var(--brand-primary) 80%, black)}

/* ══ RESPONSIVE ══ */
@media(max-width:1024px){
  .hero{
    min-height:auto;
    align-items:flex-start;
  }
  .hero-inner{
    grid-template-columns:1fr;
    gap:28px;
    padding-bottom:56px;
    max-width:900px;
    margin:0 auto;
  }
  .hero .wrap{
    align-self:flex-start !important;
    padding-top:calc(var(--navh) + 24px);
    padding-bottom:48px !important;
  }
  .hero-sub{max-width:820px}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-card{width:100%;max-width:760px}
  .ov-grid,.mp-inner,.loc-grid,.builder-grid{grid-template-columns:1fr;gap:40px}
  .pr-grid{grid-template-columns:1fr 1fr}
  .am-grid{grid-template-columns:repeat(3,1fr)}
  .growth-cards{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:1024px){
  .navlinks{display:none}
  .nav-cta{display:none}
  .burger{display:flex}
}
@media(max-width:1024px){
  .related-projects[data-related-projects-section]{padding:64px 28px !important}
  .related-projects[data-related-projects-section] .related-projects__grid{grid-template-columns:1fr !important}
  .related-projects[data-related-projects-section] .related-projects__header{text-align:left
  max-width: none !important;
  width: 100%;
}
  .related-projects[data-related-projects-section] .related-projects__header h2::after{margin-left:0;margin-right:0}
  .gal-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .gi:first-child{grid-column:span 2;min-height:260px}
  .fp-scroll{grid-template-columns:1fr 1fr}
  .am-grid{grid-template-columns:repeat(2,1fr)}
  .hero-stats{flex-wrap:wrap}
  .hstat{min-width:120px}
  .cta-row-in{grid-template-columns:1fr;gap:20px}
  .growth-cards{grid-template-columns:1fr}
  .builder-grid{grid-template-columns:1fr;gap:32px}
  .builder-stats{grid-template-columns:1fr 1fr 1fr}
  .pr-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .pad{padding:64px 0}
  .hero-stats{grid-template-columns:repeat(2,1fr);display:grid}
  .hstat{border-right:none;border-bottom:1px solid var(--dark-tertiary)}
  .gal-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .gi:first-child{grid-column:span 1;min-height:240px}
  .fp-scroll{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:32px}
}


/* Subpage inline FAQ (added by tooling/migration/inline-faqs.mjs) */
#faq .faq-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

#faq details.faq-item {
  background: var(--light-secondary);
  border: 1px solid color-mix(in srgb, var(--dark-primary) 10%, transparent);
  border-radius: 12px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--dark-primary) 4%, transparent);
  padding: 1rem 1.25rem;
  transition: border-color 0.2s ease;
}

#faq details.faq-item[open] {
  border-color: var(--brand-tertiary);
}

#faq details.faq-item > summary {
  display: block;
  cursor: pointer;
  font-weight: 600;
  color: var(--dark-primary);
  line-height: 1.45;
  list-style: none;
  padding-right: 1.5rem;
  position: relative;
}

#faq details.faq-item > summary::-webkit-details-marker { display: none; }

#faq details.faq-item > summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--brand-tertiary);
  border-bottom: 2px solid var(--brand-tertiary);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.2s ease;
}

#faq details.faq-item[open] > summary::after {
  transform: translateY(-25%) rotate(-135deg);
}

#faq details.faq-item > p {
  margin: 0.75rem 0 0;
  color: color-mix(in srgb, var(--dark-primary) 72%, transparent);
  line-height: 1.65;
}

#faq details.faq-item > summary:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  #faq details.faq-item,
  #faq details.faq-item > summary::after {
    transition: none;
  }
}

/* ══ SUBPAGE BODY STYLES ══ */
body.subpage{background:var(--light-secondary)}

.sec{padding:clamp(3.5rem,7vw,6rem) clamp(1.25rem,4vw,2rem);max-width:1280px;margin:0 auto}
.sec-light{background:var(--light-secondary);color:var(--brand-secondary)}
.sec-dark{background:var(--brand-secondary);color:var(--light-secondary);max-width:none;padding-left:0;padding-right:0}
.sec-dark > *{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:clamp(1.25rem,4vw,2rem);padding-right:clamp(1.25rem,4vw,2rem)}

.eyebrow-dark{display:block;font-family:var(--body);font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brand-primary);margin-bottom:10px}
.sec-dark .eyebrow,.sec-dark .eyebrow-dark{color:var(--dark-tertiary)}

.stitle{font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.2;margin:0 0 1.1rem;font-weight:600;color:var(--brand-secondary)}
.stitle em{font-style:italic;font-weight:500;color:var(--brand-primary)}
.stitle-dark{color:var(--brand-secondary)}
.stitle-dark em{color:var(--brand-primary)}
.sec-dark .stitle,.sec-dark .stitle-dark{color:var(--light-secondary)}
.sec-dark .stitle em,.sec-dark .stitle-dark em{color:var(--brand-tertiary)}

.sbody{font-size:1rem;line-height:1.8;max-width:75ch;margin:0 0 1rem;color:var(--dark-secondary)}
.sec-dark .sbody{color:color-mix(in srgb, var(--light-secondary) 84%, transparent)}
.sbody a{color:var(--brand-primary);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.sec-dark .sbody a{color:var(--dark-tertiary)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1.75rem 0}
.stat{background:color-mix(in srgb, var(--brand-primary) 6%, transparent);border:1px solid color-mix(in srgb, var(--brand-primary) 12%, transparent);border-radius:10px;padding:1.4rem 1rem;text-align:center}
.sec-dark .stat{background:color-mix(in srgb, var(--light-secondary) 6%, transparent);border-color:color-mix(in srgb, var(--light-secondary) 14%, transparent)}
.stat-n{font-family:var(--display);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:700;color:var(--brand-primary);margin:0 0 .25rem;line-height:1.1}
.sec-dark .stat-n{color:var(--brand-tertiary)}
.stat-l{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dark-secondary);margin:0;line-height:1.3}
.sec-dark .stat-l{color:color-mix(in srgb, var(--light-secondary) 74%, transparent)}

.ptable{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem;background:var(--light-secondary);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.ptable th,.ptable td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid color-mix(in srgb, var(--dark-primary) 8%, transparent);color:var(--brand-secondary)}
.ptable th{background:color-mix(in srgb, var(--brand-primary) 8%, transparent);font-weight:700;letter-spacing:.04em;font-size:.85rem;text-transform:uppercase}
.ptable tr:last-child td{border-bottom:none}
.ptable tr:hover td{background:color-mix(in srgb, var(--brand-primary) 3%, transparent)}
.sec-dark .ptable{box-shadow:none}

/* The standalone-button fallbacks that used to live here are gone: every
   button now carries the .btn base class, so there is one code path. */

/* Inline CTA cluster on subpages - override .cta-row gradient banner */
.sec .cta-row{background:transparent;padding:0;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* FAQ accordion (subpage variant - uses .faq-list / .faq-item) */
.faq-list{display:flex;flex-direction:column;gap:.6rem;margin-top:1.5rem}
.faq-item{background:color-mix(in srgb, var(--brand-primary) 4%, transparent);border:1px solid color-mix(in srgb, var(--brand-primary) 14%, transparent);border-radius:8px;padding:1rem 1.25rem;transition:background .2s ease}
.faq-item summary{font-weight:600;cursor:pointer;list-style:none;color:var(--brand-secondary);padding-right:1.5rem;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.2rem;font-weight:700;color:var(--brand-primary);transition:transform .2s ease}
.faq-item[open]{background:color-mix(in srgb, var(--brand-primary) 8%, transparent)}
.faq-item[open] summary::after{content:"−"}
.faq-item p{margin:.75rem 0 0;line-height:1.7;color:var(--dark-secondary)}

/* Builder / about-builder page bits */
.builder-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin:1.5rem 0}
.bstat{text-align:center;padding:1rem .75rem;background:color-mix(in srgb, var(--brand-primary) 6%, transparent);border-radius:10px}
.bstat .sv{font-family:var(--display);font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:700;color:var(--brand-primary);line-height:1.1}
.bstat .sl{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dark-secondary);margin-top:.25rem}

/* Subpage hero with side-by-side form */
.sec-split{display:grid;grid-template-columns:1fr 400px;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.sec-split-content{min-width:0}
.sec-split-form{position:sticky;top:calc(var(--navh) + 1.25rem)}
.sec-light .sec-split-form .form-card,.sec .sec-split-form .form-card{background:var(--light-secondary);border:1px solid var(--dark-tertiary);box-shadow:var(--shadowlg)}
.sec-split-form .form-card h2{font-family:var(--display);color:var(--brand-secondary);font-size:1.35rem;margin-bottom:6px}
.sec-split-form .form-card > p{color:var(--dark-secondary);font-size:.85rem;margin-bottom:18px;line-height:1.6}
.sec-split-form .form-card .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sec-split-form .form-card .form-btns{margin-top:14px}
.sec-split-form .form-card .form-btns .btn-primary{width:100%;justify-content:center}
.sec-split-form .form-card .privacy{font-size:.72rem;color:var(--dark-secondary);margin-top:12px;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
.sec-split-form .form-card .field-error{display:block;color:var(--state-error);font-size:.72rem;margin-top:4px}
.sec-split-form .form-card .form-status{padding:10px 12px;font-size:.82rem;margin-top:10px;border:1px solid var(--dark-tertiary);background:var(--light-primary)}
@media (max-width:1024px){
  .sec-split{grid-template-columns:1fr}
  .sec-split-form{position:static;max-width:560px}
  .sec-split-form .form-card .form-row{grid-template-columns:1fr}
}

/* ══ RESPONSIVE OVERFLOW GUARDS ══ */
html,body{overflow-x:hidden}
.ptable,.ptable th,.ptable td,
.sbody,.sbody li,.sbody p,
.ovv,.disc,.faq-ai,
.faq-item p,.faq-item summary,
.ft-disc,.foot p,.foot .disc{
  overflow-wrap:anywhere;word-break:break-word
}
.sec,.sec-light,.sec-dark,.sec-split-content,.sec-split-form,
main,main *:not(table){min-width:0}

@media (max-width:1024px){
  .ptable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .ptable thead,.ptable tbody,.ptable tr{width:100%}
  .stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .sec{padding-left:1.25rem;padding-right:1.25rem}
  .sec-dark > *{padding-left:1.25rem;padding-right:1.25rem}
}


/* phase-b brand-text */
.brand-logo-img { display: block; width: 48px; height: 48px; object-fit: contain; flex: 0 0 48px; filter: none !important; }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.15; gap: 0; margin-left: 0; color: inherit; text-decoration: none; }
.brand-developer { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.brand-project { font-size: 1rem; font-weight: 700; }
a:has(> .brand-text), a.nav-logo, a.footer-logo, a.footer-brand, a.navbar_logo-link, a.footer_logo-link, a.navbar__brand, a.brand { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: inherit; }

/* fleet: nav links title-case + 12px (2026-06-05) */
.navlinks a:not([class*="cta"]):not([class*="btn"]):not([class*="button"]){font-size:12px !important;text-transform:none !important}

/* fleet: nav collapses at tablet 1024 (2026-06-05) */
@media(min-width:1025px){.navlinks{display:flex !important}.burger{display:none !important}}
@media(max-width:1024px){.navlinks{display:none !important}.burger{display:flex !important}.navlinks.is-open,.is-open .navlinks,.navlinks.open,.open .navlinks,.navlinks.active,.active .navlinks,.navlinks.w--open,.w--open .navlinks,.navlinks.on,.on .navlinks,.navlinks.visible,.visible .navlinks,.navlinks.is-visible,.is-visible .navlinks,.navlinks.expanded,.expanded .navlinks,.navlinks.show,.show .navlinks,.navlinks.shown,.shown .navlinks,.navlinks.opened,.opened .navlinks,.navlinks.menu-open,.menu-open .navlinks,.navlinks.nav-open,.nav-open .navlinks,.navlinks[data-nav-menu-open]{display:flex !important;flex-direction:column !important}}
@media(min-width:1025px){.navlinks a{white-space:nowrap !important;padding-left:5px !important;padding-right:5px !important}.navlinks{gap:1px !important}}

/* fleet: nav brand text size cap — brand NAME <=15px so no logo text exceeds 16px (2026-06-06) */
[class*="brand-project"],[class*="brand-name"],[class*="brand-title"],[class*="brand-lockup__name"]{font-size:15px !important}
[class*="brand-developer"]{font-size:11px !important}
/* Brand lockup split-line convention */
.brand-text,
.footer-brand-text,
.sow-nav__brand-text,
.sow-footer__brand-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1.08;
  min-width: 0;
}
/* Brand lockup hierarchy convention */
[class*="brand-developer"],
[class*="brand-title"],
[class*="brand-lockup__eyebrow"] {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.05 !important;
  text-transform: none !important;
}

[class*="brand-project"],
[class*="brand-subtitle"],
[class*="brand-name"],
[class*="brand-lockup__name"] {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  text-transform: none !important;
}

/* Dark surfaces invert the pair. Solid forest green sits at 1.29:1 against the
   navy .sec-dark band — the shape all but disappears — so primary becomes a
   white fill with a green label (9.7:1 shape, 7.6:1 label) and secondary the
   white outline. Same one-step relationship, legible ink. */
.sec-dark .btn-primary{background:var(--light-secondary);color:var(--brand-primary);border-color:var(--light-secondary)}
.sec-dark .btn-primary:hover{background:var(--dark-tertiary);border-color:var(--dark-tertiary);color:var(--brand-primary);box-shadow:none}
.sec-dark .btn-secondary{background:transparent;color:var(--light-secondary);border-color:color-mix(in srgb, var(--light-secondary) 55%, transparent)}
.sec-dark .btn-secondary:hover{background:var(--light-secondary);color:var(--brand-primary);border-color:var(--light-secondary)}


/* ==== contact-modal (fleet rollout — see tooling/add-contact-modal.mjs) ==== */
.cm-modal {
    /* Re-assert the UA's dialog centering: universal `* { margin: 0 }` resets
       (sattva/purva families and others) strip it, pinning the dialog top-left. */
    margin: auto;
    width: min(100%, 28rem);
    padding: 1rem;
    border: 0;
    background: transparent;
    overscroll-behavior: contain;
    --cm-accent: var(--brand-primary, #2c5e3e);
    --cm-ink: #ffffff;
}

/* Browsers without <dialog> ignore [open] and would render the form inline. */
.cm-modal:not([open]) {
    display: none;
}

/* Literal scrim: ::backdrop cannot reliably see page custom properties. */
.cm-modal::backdrop {
    background: rgba(15, 23, 42, 0.6);
}

.cm-modal__panel {
    position: relative;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background: #ffffff;
    color: #1f2937;
    font-family: inherit;
    box-shadow: 0 20px 25px rgba(15, 23, 42, 0.15);
}

.cm-modal__title {
    margin: 0 0 1.25rem;
    padding-right: 2.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1f2937;
}

.cm-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: #475569;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
}

.cm-modal__close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.cm-modal__close:focus-visible {
    outline: 2px solid var(--cm-accent);
    outline-offset: 2px;
}

.cm-form {
    display: grid;
    gap: 1rem;
}

.cm-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
}

.cm-form__field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
}

/* Form controls don't inherit fonts — font: inherit closes the gap. */
.cm-form input,
.cm-form textarea {
    width: 100%;
    min-width: 0;
    font: inherit;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
}

.cm-form input:focus-visible,
.cm-form textarea:focus-visible {
    outline: 2px solid var(--cm-accent);
    outline-offset: 1px;
}

.cm-form textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.cm-form__submit {
    border: 0;
    border-radius: 6px;
    background: var(--cm-accent);
    color: var(--cm-ink);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
}

.cm-form__submit:hover {
    opacity: 0.92;
}

.cm-form__submit:focus-visible {
    outline: 2px solid #1f2937;
    outline-offset: 2px;
}

.cm-form__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #64748b;
}

.cm-form__hint a {
    color: inherit;
    text-decoration: underline;
}

/* Class-based, so it cannot fight any inline body.style.overflow use. */
body.has-modal-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .cm-modal[open] {
        animation: cm-modal-in 160ms ease-out;
    }

    .cm-modal[open]::backdrop {
        animation: cm-modal-backdrop-in 160ms ease-out;
    }
}

@keyframes cm-modal-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

@keyframes cm-modal-backdrop-in {
    from {
        opacity: 0;
    }
}

/* Markdown spec tables are wrapped so a wide table scrolls inside its own
   box instead of pushing the page sideways. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.table-wrap .ptable{margin-top:0}

/* The nav is position:fixed, and this project's hero copy runs taller than
   100vh. Without an explicit clearance the flex-centred hero rides up
   underneath the navbar. Padding sits inside the min-height box, so the
   first line always clears the nav. */
.hero{padding:calc(var(--navh) + 2rem) 0 3rem}
@media(max-width:640px){.hero{padding:calc(var(--navh) + 1.25rem) 0 2rem}}

/* ══ VERTICAL RHYTHM ══════════════════════════════════════════════════════
   Two undefined classes and a stripped list reset left injected prose with
   no space of its own. Appended at EOF; nothing above is edited. Spacing
   only — no colour, no horizontal geometry, no !important.
   ─────────────────────────────────────────────────────────────────────── */

/* .article-body is emitted by the prose injector and has never had a rule
   in any nambiar sheet. Every bespoke homepage grid declares margin-top and
   none declares margin-bottom, so space existed only when prose came FIRST
   — and both junctions reported were the grid-first direction. Its own
   symmetric margins fix that without naming a grid class, so a rebuild that
   emits a new one stays covered. 2rem clears the .rule's designed 30px by
   2px, so the junctions that were already right barely move. Margins, never
   display:grid: a grid container traps its children's margins and would
   stack gap on top of p{margin-bottom}. :empty first — #why ships a
   genuinely empty .article-body that self-collapses today, and any box on
   the class would open a visible void there. */
.article-body:empty{display:none}
.article-body{margin-top:2rem}
.article-body:not(:last-child){margin-bottom:2rem}

/* .table-wrap is overflow-x:auto, therefore a BFC, so .ptable's 1.5rem
   bottom margin is trapped inside it (measured: wrap height - table height
   = 24.0 on all 33 tables) while `.table-wrap .ptable{margin-top:0}` zeroed
   the top outright. Real ink was 0-16 above and 24 below. Add the missing
   half on the wrapper only.
   Do NOT also move the bottom margin out. It is load-bearing twice over:
   overflow-x:auto makes overflow-y compute to auto, so that 24px is the
   only clip region .ptable's box-shadow has left to paint into; and at
   #floorplans and #builder it stacks with the next block's own 24px to
   give 48, which releasing it would collapse back to 24 — less space under
   the very table this was reported against. */
.table-wrap{margin-top:1.5rem}

/* *{margin:0;padding:0} plus ul{list-style:none} leave a bare markdown list
   with no marker, no indent, no item separation and no gap to the next
   paragraph — 16 lists across 9 subpages and 3 homepage sections, the
   largest volume of damaged text on the site.
   :not([class]) is load-bearing, not tidiness: `.sec > ul` scores (0,1,1)
   and outranks .copy-list (0,1,0), whose indent it would zero — pushing its
   discs outside the columns:2 list on kanakapura-road/amenities.html.
   The indent goes on the li, never on the list: these lists are direct
   children of .sec-dark, where padding-left carries the band gutter and
   margin-left the centring. A grandchild is immune to both at every
   breakpoint and needs no media-query companion. Values are .copy-list's
   own, so bare and classed lists finally render alike; ol gets 1.6rem so a
   two-digit marker clears (reviews.html ships a 10-item list).
   :not(:last-child) on the bottom margin keeps a section-final list from
   changing any section's bottom inset. */
.article-body > ul:not([class]),.sec > ul:not([class]){list-style:disc}
.article-body > ol:not([class]),.sec > ol:not([class]){list-style:decimal}
.article-body > :is(ul,ol):not([class]),
.sec > :is(ul,ol):not([class]){margin-top:1rem}
.article-body > :is(ul,ol):not([class]):not(:last-child),
.sec > :is(ul,ol):not([class]):not(:last-child){margin-bottom:1rem}
.article-body > :is(ul,ol):not([class]) > li,
.sec > :is(ul,ol):not([class]) > li{line-height:1.8}
.article-body > ul:not([class]) > li,.sec > ul:not([class]) > li{margin-left:1.1rem}
.article-body > ol:not([class]) > li,.sec > ol:not([class]) > li{margin-left:1.6rem}
.article-body > :is(ul,ol):not([class]) > li + li,
.sec > :is(ul,ol):not([class]) > li + li{margin-top:.45rem}

/* h3/h4 carry no margin on either side and match nothing in these two
   containers today — every current h3 is .gc h3, .cta-row h3 or the
   footer's, each of which sets its own. Scoped rather than bare so it
   cannot reach those three; the content pipeline can emit a prose heading
   on any rebuild. */
.article-body > :is(h3,h4),.sec > :is(h3,h4){margin-top:1.5rem;margin-bottom:.75rem}

/* .gc p{margin:0} glues the two- and three-paragraph growth cards into one
   run-on block. .6rem is ~.75em at the card's .8rem/1.7; `+ p` leaves the
   first paragraph's 8px under the h3 alone. */
.gc p + p{margin-top:.6rem}

/* The classed prose list on the sister sites carries an inline indent but no
   item spacing, so it runs together the same way a bare one does. .copy-list
   already separates its items by .45rem; match it. Markers are left alone —
   these lists read as lists because of their indent. */
:is(ul,ol).sbody > li + li{margin-top:.45rem}

/* The FAQ card and the button inside it were each paying full vertical
   padding — 16px on .faq-item plus 20px on .faq-q, top and bottom, so 72px of
   padding wrapped a 26px control and a one-line question rendered 100px tall.
   The button is the touch target, so let it own the vertical rhythm and leave
   the card with its horizontal padding only. 14px keeps the button at 54px,
   comfortably above the 44px minimum. */
.faq-item{padding-top:0;padding-bottom:0}
.faq-q{padding:14px 0}