/* building.wholereach.com — standalone. Deliberately does NOT load app.css
   (shared byte-identical across 30 sites). Everything here is per-site.

   Direction: the subdivision plat. New-home development's defining artifact —
   the survey drawing that turns raw land into numbered homesites. It gives the
   page a visual system we author ourselves, which matters because there is no
   construction photography to lean on and no rights risk we're willing to take.
   Accent is surveyor's flagging pink, the tape on the stake at a lot corner. */

:root{
  --caliche:#E9E5DC;      /* limestone road dust — cooler than the default cream */
  --paper:#F5F2EC;
  --pine:#24453A;         /* Bastrop's Lost Pines */
  --pine-deep:#16281F;
  --ink:#16211C;
  --flag:#FF4D6D;         /* flagging tape. markers and actions only, never fill */
  --limestone:#C4BDAE;
  --rule:#D3CCBD;

  --disp:"Archivo",system-ui,sans-serif;
  --body:"Source Sans 3",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --wide:1180px;
  --gut:clamp(20px,5vw,56px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--caliche);color:var(--ink);
  font:17px/1.6 var(--body);
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{
  font-family:var(--disp);font-weight:600;
  font-variation-settings:"wdth" 112;   /* expanded — reads like a drawing title */
  letter-spacing:-.01em;line-height:1.04;margin:0;
}
a{color:inherit}
img{max-width:100%;height:auto}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--gut)}

/* mono label — the plat's own voice */
.lab{
  font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--pine);opacity:.75;
}

/* ---------- nav ---------- */
.nav{border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:24px}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none}
.brand b{font-family:var(--disp);font-variation-settings:"wdth" 118;font-weight:600;font-size:19px;letter-spacing:-.01em}
.brand span{font:500 10px/1 var(--mono);letter-spacing:.18em;color:var(--pine);opacity:.7}
.nav nav{display:flex;gap:26px;font-size:14px}
.nav nav a{text-decoration:none;opacity:.72}
.nav nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
@media(max-width:720px){.nav nav{display:none}}

/* ---------- hero: the plat ---------- */
.hero{position:relative;padding:clamp(40px,7vw,80px) 0 0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:32px}}
.hero h1{font-size:clamp(38px,6.4vw,72px)}
.hero h1 em{font-style:normal;color:var(--pine)}
.hero p.lede{font-size:clamp(17px,1.9vw,20px);max-width:46ch;margin:20px 0 0;opacity:.82}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:2px;text-decoration:none;
  font:600 14px/1 var(--body);letter-spacing:.01em;border:1px solid var(--pine);
  transition:transform .12s ease, background .12s ease;
}
.btn-a{background:var(--pine);color:var(--caliche)}
.btn-a:hover{transform:translateY(-1px)}
.btn-b{background:transparent;color:var(--pine)}
.btn-b:hover{background:rgba(36,69,58,.06)}
/* the stake: a flagging-pink tick on the primary action */
.btn-a::before{content:"";width:3px;height:14px;background:var(--flag);flex:none}

/* plat drawing */
.plat{width:100%;height:auto;display:block}
.plat .lot{fill:var(--paper);stroke:var(--pine);stroke-width:1.1;opacity:.9}
.plat .street{fill:none;stroke:var(--limestone);stroke-width:2}
.plat .center{stroke:var(--pine);stroke-width:1;stroke-dasharray:14 7 3 7;opacity:.5}
.plat .num{font:500 11px/1 var(--mono);fill:var(--pine);opacity:.7}
.plat .blk{font:600 15px/1 var(--mono);fill:var(--pine);letter-spacing:.14em}
.plat .dim{font:500 9.5px/1 var(--mono);fill:var(--pine);opacity:.5}
.plat .flagpt{fill:var(--flag)}
.plat .rose{stroke:var(--pine);stroke-width:1.2;fill:none}

@media(prefers-reduced-motion:no-preference){
  .plat .lot{opacity:0;animation:lotin .5s ease forwards}
  .plat .flagpt{opacity:0;animation:pin .4s ease forwards;animation-delay:1.1s}
}
@keyframes lotin{to{opacity:.9}}
@keyframes pin{to{opacity:1}}

/* ---------- band scaffolding ---------- */
.band{padding:clamp(56px,8vw,104px) 0;border-top:1px solid var(--rule)}
.band-head{max-width:62ch;margin-bottom:clamp(28px,4vw,44px)}
.band-head h2{font-size:clamp(27px,3.7vw,40px);margin-top:12px}
.band-head p{margin:14px 0 0;opacity:.78;font-size:17px}

/* ---------- builders ---------- */
/* Overlapping -1px margins instead of a gap-over-background grid: a short
   final row then leaves real negative space rather than a dead grey block. */
.logos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.logos .cell{
  background:var(--paper);display:flex;align-items:center;justify-content:center;
  padding:24px 18px;min-height:98px;
  border:1px solid var(--rule);margin:-1px 0 0 -1px;
}
/* Masked silhouettes. Six of the official marks are white reverse-out variants
   with no light-background version published, and the rest are a mix of full
   colour SVG and PNG. Masking renders every one as a single pine silhouette at a
   consistent optical size, so the row reads as one system instead of fourteen
   clashing badges - and it works identically for SVG and PNG. */
.logos .cell .lg{
  display:block;width:78%;height:34px;background:var(--pine);opacity:.82;
  -webkit-mask:var(--m) no-repeat center/contain;
          mask:var(--m) no-repeat center/contain;
  transition:opacity .15s ease;
}
.logos .cell:hover .lg{opacity:1}
/* name-set fallback where no official mark could be sourced */
.logos .cell .nm{
  font-family:var(--disp);font-variation-settings:"wdth" 104;font-weight:600;
  font-size:15px;letter-spacing:.02em;text-align:center;color:var(--pine);
}
.disclaim{
  margin-top:16px;font:400 12.5px/1.55 var(--body);opacity:.6;max-width:70ch;
}

/* ---------- lot-numbered points ---------- */
.lots{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.lots .lot-c{background:var(--paper);padding:28px 24px 30px}
.lots .lot-c .n{
  font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--pine);opacity:.6;
  display:flex;align-items:center;gap:8px;margin-bottom:14px;
}
.lots .lot-c .n::after{content:"";flex:1;height:1px;background:var(--rule)}
.lots .lot-c h3{font-size:20px;margin-bottom:9px}
.lots .lot-c p{margin:0;font-size:15.5px;opacity:.78;line-height:1.55}

/* ---------- area / community ---------- */
.area{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,52px);align-items:start}
@media(max-width:860px){.area{grid-template-columns:1fr}}
.facts{border:1px solid var(--rule);background:var(--paper)}
.facts .row{display:flex;justify-content:space-between;gap:18px;padding:15px 22px;border-bottom:1px solid var(--rule);font-size:15px}
.facts .row:last-child{border-bottom:0}
.facts .row span:first-child{font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.62;align-self:center}
.facts .row span:last-child{text-align:right}
.card-out{border:1px solid var(--rule);background:var(--paper);padding:26px 24px}
.card-out h3{font-size:22px}
.card-out p{font-size:15.5px;opacity:.8;margin:12px 0 18px}

/* ---------- the audience switch ---------- */
.switch{border-top:1px solid var(--rule);background:var(--pine-deep);color:var(--caliche)}
.switch .lab{color:var(--caliche);opacity:.62}
.switch .band-head h2{color:var(--caliche)}
.switch .band-head p{color:var(--caliche);opacity:.72}
.switch .lots .lot-c{background:rgba(233,229,220,.045)}
.switch .lots{background:rgba(233,229,220,.16);border-color:rgba(233,229,220,.16)}
.switch .lots .lot-c h3{color:var(--caliche)}
.switch .lots .lot-c p{color:var(--caliche);opacity:.74}
.switch .lots .lot-c .n{color:var(--caliche);opacity:.55}
.switch .lots .lot-c .n::after{background:rgba(233,229,220,.2)}
.switch .btn-a{background:var(--flag);border-color:var(--flag);color:#20060C}
.switch .btn-a::before{background:var(--pine-deep)}
.switch .btn-b{color:var(--caliche);border-color:rgba(233,229,220,.4)}
.switch .btn-b:hover{background:rgba(233,229,220,.08)}
.kb-fig{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,62px);margin:0 0 34px}
.kb-fig div{min-width:120px}
.kb-fig b{
  display:block;font-family:var(--disp);font-variation-settings:"wdth" 118;
  font-weight:600;font-size:clamp(38px,5.4vw,58px);line-height:1;color:var(--caliche);
}
.kb-fig span{display:block;margin-top:8px;font:500 11px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;opacity:.6}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding:44px 0 56px;font-size:14px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:flex-start}
.foot a{opacity:.72;text-decoration:none}
.foot a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.foot .sibs{display:flex;flex-wrap:wrap;gap:8px}
.foot .sibs a{border:1px solid var(--rule);padding:6px 11px;border-radius:2px;font:500 12px/1 var(--mono);letter-spacing:.06em}

:focus-visible{outline:2px solid var(--flag);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}