/* ==========================================================================
   Maulhardt Stiles Ranch — Investment Offering Site
   Design tokens
   ========================================================================== */

:root{
  --ink:            #101a24;
  --ink-soft:       #1c2a38;
  --navy:           #142234;
  --navy-2:         #0c1620;
  --paper:          #faf7f1;
  --paper-2:        #f2ede2;
  --surface:        #ffffff;
  --border:         #e4ddcc;
  --border-soft:    #ece6d8;
  --text:           #1c2530;
  --text-muted:     #5c6672;
  --text-faint:     #8a92a0;
  --text-on-dark:   #f4f1e9;
  --text-on-dark-muted: #b9c0cb;
  --gold:           #a97c3f;
  --gold-light:     #c99a5b;
  --gold-dim:       #8a6534;
  --teal:           #3c5a5e;
  --shadow-sm:      0 1px 2px rgba(16,26,36,.06), 0 1px 1px rgba(16,26,36,.04);
  --shadow-md:      0 8px 24px rgba(16,26,36,.10);
  --shadow-lg:      0 20px 50px rgba(16,26,36,.16);
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      16px;
  --maxw:           1180px;
  --font-display:   'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--gold-light); color:var(--navy-2); }

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 28px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dim);
}
.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--gold);
  display:inline-block;
}
.on-dark .eyebrow{ color:var(--gold-light); }

h1,.h1{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.05;
  font-size:clamp(2.4rem, 4.6vw, 4rem);
  color:var(--ink);
}
h2,.h2{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.12;
  font-size:clamp(1.7rem, 3vw, 2.5rem);
  color:var(--ink);
}
h3,.h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.2;
  font-size:1.35rem;
  color:var(--ink);
}
.lede{
  font-size:1.1rem;
  color:var(--text-muted);
  line-height:1.65;
  max-width:62ch;
}
.section-head{
  max-width:760px;
  margin-bottom:44px;
}
.section-head p{ margin-top:14px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

section{ padding:96px 0; }
section.tight{ padding:64px 0; scroll-margin-top:32px; }
.divider{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--border), transparent);
  border:0;
  margin:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:14px 26px;
  border-radius:999px;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.02em;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-gold{
  background:linear-gradient(180deg, var(--gold-light), var(--gold));
  color:#1a1206;
  box-shadow:var(--shadow-sm);
}
.btn-gold:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-outline-dark{
  background:transparent;
  border-color:rgba(244,241,233,.35);
  color:var(--text-on-dark);
}
.btn-outline-dark:hover{ border-color:var(--text-on-dark); background:rgba(244,241,233,.08); }
.btn-outline{
  background:transparent;
  border-color:var(--border);
  color:var(--text);
}
.btn-outline:hover{ border-color:var(--gold); color:var(--gold-dim); }
.btn-navy{
  background:var(--navy);
  color:var(--text-on-dark);
}
.btn-navy:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* ---------- Nav ---------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(16,26,36,0);
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.nav.scrolled{
  background:rgba(16,26,36,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(244,241,233,.08);
}
.nav .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:82px;
}
.brand{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  color:var(--text-on-dark);
}
.brand .brand-name{
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:.01em;
}
.brand .brand-tag{
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-light);
  margin-top:3px;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:30px;
}
.nav-links a{
  font-size:13.5px;
  font-weight:500;
  color:var(--text-on-dark-muted);
  transition:color .15s ease;
}
.nav-links a:hover{ color:var(--text-on-dark); }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-toggle{
  display:none;
  background:none; border:0; color:var(--text-on-dark);
  width:38px; height:38px; align-items:center; justify-content:center;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  color:var(--text-on-dark);
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
}
.hero-media img{
  display:block;
  width:100%; height:100%;
  min-width:100%; min-height:100%;
  max-width:none;
  object-fit:cover;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,20,29,.55) 0%, rgba(12,20,29,.35) 30%, rgba(12,20,29,.62) 68%, rgba(10,16,22,.94) 100%),
    linear-gradient(90deg, rgba(10,16,22,.55) 0%, rgba(10,16,22,.05) 45%);
}
.hero-inner{
  position:relative;
  z-index:1;
  width:100%;
  /* top/bottom only — this element also has the shared .container class,
     which supplies left/right padding. A padding SHORTHAND here would zero
     that out and pin the hero text flush to the screen edge on every
     viewport narrower than the 1180px max content width (i.e. almost
     always, not just mobile). */
  padding-top:clamp(120px, 17vh, 180px);
  padding-bottom:40px;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(244,241,233,.12);
  border:1px solid rgba(244,241,233,.25);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gold-light);
  margin-bottom:18px;
}
.hero h1{ color:#fff; max-width:820px; font-size:clamp(2.1rem, 4vw, 3.4rem); }
.hero .lede{
  color:var(--text-on-dark-muted);
  font-size:1.1rem;
  max-width:640px;
  margin-top:14px;
  text-shadow: 0 1px 6px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
}
.hero-cta{ display:flex; gap:14px; margin-top:24px; flex-wrap:wrap; }

.hero-stats{
  position:relative;
  z-index:1;
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(244,241,233,.18);
}
.hero-stat{
  padding:18px 26px 0;
  border-left:1px solid rgba(244,241,233,.18);
}
.hero-stat:first-child{ border-left:0; padding-left:0; }
.hero-stat .num{
  font-family:var(--font-display);
  font-size:1.9rem;
  color:#fff;
}
.hero-stat .lbl{
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-on-dark-muted);
  margin-top:6px;
}

/* ---------- Overview / stat cards ---------- */
.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:1fr 1fr; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }

.info-table{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.info-row{
  display:grid;
  grid-template-columns:280px 1fr;
}
.info-row + .info-row{ border-top:1px solid var(--border-soft); }
.info-row .k{
  padding:20px 26px;
  background:var(--paper-2);
  font-weight:600;
  font-size:13.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border-right:1px solid var(--border-soft);
}
.info-row .v{
  padding:20px 26px;
  color:var(--text);
  font-size:15.5px;
}

.stat-tile{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:26px 22px;
  box-shadow:var(--shadow-sm);
}
.stat-tile .num{
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--ink);
  letter-spacing:-.01em;
}
.stat-tile .lbl{
  margin-top:8px;
  font-size:12.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:600;
}
.stat-tile .sub{
  margin-top:6px;
  font-size:12.5px;
  color:var(--text-faint);
}
.stat-tile.accent{ border-color:rgba(169,124,63,.35); background:linear-gradient(180deg,#fffdf8,#fbf5e9); }
.stat-tile.accent .num{ color:var(--gold-dim); }

/* ---------- Distance strip ---------- */
.distance-strip{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--surface);
}
.distance-item{
  flex:1 1 150px;
  padding:22px 20px;
  text-align:center;
  border-left:1px solid var(--border-soft);
}
.distance-item:first-child{ border-left:0; }
.distance-item .mi{
  font-family:var(--font-display);
  font-size:1.7rem;
  color:var(--gold-dim);
}
.distance-item .city{
  margin-top:4px;
  font-size:12.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:600;
}

/* ---------- Map figure ---------- */
.figure{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.figure img{ width:100%; }
.figure-pair img{ aspect-ratio: 4 / 5; object-fit: cover; object-position: center bottom; }
.figure-cap{
  padding:16px 22px;
  font-size:13px;
  color:var(--text-muted);
  border-top:1px solid var(--border-soft);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.figure-cap strong{ color:var(--text); font-weight:600; }

/* ---------- Timeline ---------- */
.timeline{
  position:relative;
  margin-top:8px;
  padding-left:28px;
}
.timeline::before{
  content:"";
  position:absolute;
  left:6px; top:6px; bottom:6px;
  width:2px;
  background:var(--border);
}
.t-item{
  position:relative;
  padding:0 0 34px 26px;
}
.t-item:last-child{ padding-bottom:0; }
.t-item::before{
  content:"";
  position:absolute;
  left:-28px; top:3px;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--surface);
  border:3px solid var(--gold);
}
.t-item .date{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gold-dim);
}
.t-item .label{
  margin-top:4px;
  font-size:16px;
  font-weight:600;
  color:var(--ink);
}

.checklist{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--surface);
}
.checklist li{
  list-style:none;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 24px;
  font-size:15px;
  color:var(--text);
}
.checklist li + li{ border-top:1px solid var(--border-soft); }
.checklist .num{
  flex:0 0 auto;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--paper-2);
  color:var(--ink-soft);
  font-size:12px;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}

/* ---------- Market comparison table ---------- */
.compare-table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.compare-table th, .compare-table td{
  padding:16px 20px;
  text-align:left;
  font-size:14.5px;
  vertical-align:top;
}
.compare-table thead th{
  background:var(--navy);
  color:var(--text-on-dark);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.compare-table thead th:first-child{ color:var(--gold-light); }
.compare-table tbody th{
  background:var(--paper-2);
  font-weight:600;
  color:var(--ink-soft);
  width:190px;
}
.compare-table tbody tr + tr th, .compare-table tbody tr + tr td{ border-top:1px solid var(--border-soft); }
.table-wrap{ overflow-x:auto; border-radius:var(--radius-lg); }
.table-note{ margin-top:16px; font-size:12.5px; color:var(--text-faint); line-height:1.6; }

/* ---------- Cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:30px;
  box-shadow:var(--shadow-sm);
  height:100%;
}
.card .icon{
  width:42px; height:42px;
  border-radius:10px;
  background:var(--paper-2);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-dim);
  margin-bottom:18px;
}
.card h3{ margin-bottom:10px; }
.card p{ color:var(--text-muted); font-size:14.5px; }

.dd-list{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  overflow:hidden;
}
.dd-list li{
  list-style:none;
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 22px;
  font-size:14.5px;
  color:var(--text);
}
.dd-list li + li{ border-top:1px solid var(--border-soft); }
.dd-list svg{ flex:0 0 auto; margin-top:2px; color:var(--gold); }

/* ---------- Gallery ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.gallery-item{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--surface);
  cursor:zoom-in;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.gallery-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.gallery-item img{ width:100%; height:190px; object-fit:cover; object-position:top; }
.gallery-item .cap{ padding:12px 16px; font-size:13px; font-weight:600; color:var(--ink-soft); }

.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(10,15,20,.92);
  display:none;
  align-items:center; justify-content:center;
  padding:40px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:88vh; border-radius:8px; box-shadow:var(--shadow-lg); }
.lightbox-close{
  position:absolute; top:26px; right:30px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(244,241,233,.1); border:1px solid rgba(244,241,233,.25);
  color:#fff; display:flex; align-items:center; justify-content:center;
}

/* ---------- Dark section (CTA / investor access banner) ---------- */
.section-dark{
  background:radial-gradient(120% 140% at 15% 0%, #1a2c40 0%, var(--navy-2) 55%);
  color:var(--text-on-dark);
}
.section-dark .text-muted{ color:var(--text-on-dark-muted); }
.cta-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.cta-banner .copy{ max-width:560px; }
.cta-banner h2{ color:#fff; }
.cta-banner p{ color:var(--text-on-dark-muted); margin-top:14px; }

/* ---------- Broker / contact cards ---------- */
.broker-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;
  box-shadow:var(--shadow-sm);
}
.broker-card .avatar{
  width:52px; height:52px;
  border-radius:50%;
  background:linear-gradient(160deg, var(--gold-light), var(--gold-dim));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.1rem;
  margin-bottom:16px;
}
.broker-card .name{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; color:var(--ink); }
.broker-card .role{ font-size:13px; color:var(--gold-dim); font-weight:600; margin-top:2px; }
.broker-card .meta{ margin-top:14px; font-size:14px; color:var(--text-muted); display:flex; flex-direction:column; gap:6px; }
.broker-card .meta a{ color:var(--text); }
.broker-card .meta a:hover{ color:var(--gold-dim); }
.broker-card .lic{ margin-top:10px; font-size:12px; color:var(--text-faint); }

/* ---------- Footer ---------- */
footer{
  background:var(--navy-2);
  color:var(--text-on-dark-muted);
  padding:64px 0 34px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
  padding-bottom:40px;
  border-bottom:1px solid rgba(244,241,233,.1);
}
.footer-brand .brand-name{ color:#fff; font-family:var(--font-display); font-size:1.2rem; }
.footer-brand p{ margin-top:10px; font-size:13.5px; max-width:340px; color:var(--text-on-dark-muted); }
.footer-links{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col h4{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-light); font-weight:600; margin-bottom:14px;
}
.footer-col a, .footer-col div{ display:block; font-size:13.5px; color:var(--text-on-dark-muted); margin-bottom:9px; }
.footer-col a:hover{ color:#fff; }
.footer-legal{
  padding-top:28px;
  font-size:12px;
  line-height:1.7;
  color:#8b93a0;
}
.footer-legal p + p{ margin-top:10px; }
.footer-bottom{
  margin-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:12px; color:#7b8493;
}

/* ---------- Page hero (secondary pages) ---------- */
.page-hero{
  background:radial-gradient(120% 160% at 20% -10%, #1c3044 0%, var(--navy-2) 60%);
  color:var(--text-on-dark);
  padding:180px 0 80px;
}
.page-hero .eyebrow{ color:var(--gold-light); }
.page-hero h1{ color:#fff; margin-top:16px; font-size:clamp(2rem,4vw,3rem); }
.page-hero p{ color:var(--text-on-dark-muted); margin-top:16px; max-width:600px; }

/* ---------- Forms ---------- */
.form-shell{
  max-width:760px;
  margin:0 auto;
}
.form-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:44px;
  box-shadow:var(--shadow-md);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:20px; }
.field label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%;
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:8px;
  font-family:var(--font-body);
  font-size:14.5px;
  color:var(--text);
  background:var(--paper);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(169,124,63,.15);
  background:#fff;
}
.field textarea{ resize:vertical; min-height:90px; }
.field-hint{ font-size:12px; color:var(--text-faint); margin-top:6px; }

.check-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--paper);
  margin-bottom:14px;
}
.check-row input{ margin-top:3px; width:16px; height:16px; accent-color:var(--gold-dim); flex:0 0 auto; }
.check-row label{ font-size:13.5px; color:var(--text); line-height:1.5; text-transform:none; font-weight:400; letter-spacing:0; }

.sig-box{
  border:1px dashed var(--border);
  border-radius:10px;
  padding:18px;
  background:var(--paper);
  margin-bottom:20px;
}
.sig-box .sig-preview{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:1.7rem;
  color:var(--ink);
  min-height:44px;
  border-bottom:1px solid var(--border);
  padding-bottom:8px;
  margin-bottom:8px;
}
.sig-box .sig-meta{ font-size:11.5px; color:var(--text-faint); display:flex; justify-content:space-between; }

.nda-doc{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:26px 28px;
  max-height:340px;
  overflow-y:auto;
  font-size:13.5px;
  color:var(--text-muted);
  line-height:1.7;
  margin-bottom:26px;
}
.nda-doc h4{ font-family:var(--font-display); font-size:15px; color:var(--ink); margin:18px 0 6px; }
.nda-doc h4:first-child{ margin-top:0; }
.nda-doc p{ margin-bottom:10px; }

.alert{
  border-radius:10px;
  padding:14px 18px;
  font-size:13.5px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:20px;
}
.alert-info{ background:#eef3f6; color:#2c4a55; border:1px solid #d3e3e8; }
.alert-success{ background:#eaf5ec; color:#295e35; border:1px solid #cfe8d4; }
.alert-error{ background:#fbeceb; color:#7a2a24; border:1px solid #f2cfcc; }

/* ---------- War room ---------- */
.gate-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(120% 140% at 50% 0%, #1c3044 0%, var(--navy-2) 60%);
  padding:120px 24px 60px;
}
.gate-card{
  max-width:460px;
  width:100%;
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding:40px 36px;
  box-shadow:var(--shadow-lg);
  text-align:center;
}
.gate-card .lock-icon{
  width:56px; height:56px;
  border-radius:50%;
  background:var(--paper-2);
  color:var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
}
.gate-card h2{ font-size:1.5rem; }
.gate-card p{ color:var(--text-muted); font-size:14.5px; margin-top:10px; }
.gate-card .field{ text-align:left; margin-top:24px; }

.wr-header{
  background:var(--navy-2);
  color:var(--text-on-dark);
  padding:150px 0 50px;
}
.wr-header .top-row{
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap;
}
.wr-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 13px; border-radius:999px;
  background:rgba(76,175,120,.15); border:1px solid rgba(76,175,120,.35);
  color:#8fdcae; font-size:12px; font-weight:600; letter-spacing:.04em;
}
.wr-section{
  padding:56px 0;
  border-bottom:1px solid var(--border-soft);
}
.wr-section:last-of-type{ border-bottom:0; }
.wr-cat-head{
  display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap;
}
.wr-cat-head h3{ font-size:1.3rem; }
.doc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.doc-row{
  display:flex; align-items:center; gap:16px;
  padding:18px 20px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
}
.doc-row .doc-icon{
  width:40px; height:40px; border-radius:9px;
  background:var(--paper-2); color:var(--gold-dim);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.doc-row .doc-name{ font-size:14.5px; font-weight:600; color:var(--ink); }
.doc-row .doc-status{ font-size:12px; color:var(--text-faint); margin-top:3px; }
.doc-row .doc-action{ margin-left:auto; flex:0 0 auto; }
.doc-row > div:not(.doc-icon):not(.doc-action){ min-width:0; }
.tag-pending{
  display:inline-block;
  white-space:nowrap;
  font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:#a6742e; background:#fbf1e0; border:1px solid #f0dcb4;
  padding:5px 10px; border-radius:999px;
}

/* ---------- Utility ---------- */
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-40{ margin-top:40px; } .mt-56{ margin-top:56px; }
.text-center{ text-align:center; }
.flex{ display:flex; }
.flex-wrap{ flex-wrap:wrap; }
.gap-12{ gap:12px; } .gap-20{ gap:20px; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.small{ font-size:12.5px; color:var(--text-faint); }
.on-dark{ color:var(--text-on-dark); }

/* ---------- Responsive ---------- */
/* The hero stats bar has its own, wider breakpoint: its labels ("Target
   Tentative Map Approval", "Potential Residential Units") are long enough
   that the 4-column layout wraps unevenly on common laptop window widths
   (roughly 990-1180px) well before the general 980px breakpoint below
   kicks in — so it drops to 2 columns earlier, before that happens. */
@media (max-width: 1180px){
  .hero-stats{ grid-template-columns:repeat(2,1fr); row-gap:22px; }
  /* In 2 columns, item 3 starts a new row in the same left column as item 1
     — it needs the same left-edge treatment (no border, no left padding) as
     item 1, or its text sits indented relative to the number above it. */
  .hero-stat:nth-child(3){ border-left:0; padding-left:0; }
}
@media (max-width: 980px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
  .grid-5{ grid-template-columns:repeat(3,1fr); }
  .gallery{ grid-template-columns:1fr 1fr; }
  .doc-grid{ grid-template-columns:1fr; }
  .info-row{ grid-template-columns:1fr; }
  .info-row .k{ border-right:0; border-bottom:1px solid var(--border-soft); }
}
@media (max-width: 480px){
  .nav .container{ height:70px; }
  .brand .brand-name{ font-size:.95rem; white-space:nowrap; }
  .brand .brand-tag{ font-size:9px; }
  .nav-cta .btn{ padding:10px 16px; font-size:12.5px; }
  .hero-inner{ padding-top:150px; }
  .hero-badge{ font-size:10.5px; padding:6px 11px; }
}
@media (max-width: 680px){
  section{ padding:64px 0; }
  .grid-2, .grid-3, .grid-4, .grid-5{ grid-template-columns:1fr; }
  /* Below this width, even 2 columns wrap unevenly (a long label like
     "Potential Residential Units" takes 3 lines while its neighbor takes 2),
     which throws the next row out of alignment. Stack to one column instead
     — every stat gets its own row, so uneven wrapping can't misalign
     anything, and a horizontal rule replaces the vertical column divider. */
  .hero-stats{ grid-template-columns:1fr; row-gap:0; }
  .hero-stat{ border-left:0 !important; padding-left:0 !important; border-top:1px solid rgba(244,241,233,.18); padding-top:18px; padding-bottom:18px; }
  .hero-stat:first-child{ border-top:0; padding-top:0; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .field-row{ grid-template-columns:1fr; }
  .cta-banner{ flex-direction:column; align-items:flex-start; }
  .form-card{ padding:28px 22px; }
  .hero-inner{ padding-top:170px; }
  .compare-table{ font-size:13px; }
  .distance-item{ flex:1 1 40%; }
}