:root{
--cream:#F6F1E8;
--cream-2:#EFE8DB;
--white:#FFFFFF;
--ink:#2B2B2B;
--muted:#5B6560;
--green:#294A3D;
--green-ink:#F6F1E8;
--rust:#B5560F;
--rust-dark:#96470C;
--gold:#D6A756;
--gold-line:rgba(214,167,86,.45);
--marker:#DE6E1C;
--border:rgba(41,74,61,.18);
--danger:#A93226;
--danger-bg:#FDF6F5;
--shadow-card:0 12px 32px rgba(41,74,61,.08);
--shadow-form:0 10px 30px rgba(41,74,61,.08);
--wrap:1120px;
--wrap-narrow:720px;
--measure:68ch;
--radius:8px;
--tap:44px;
--s1:4px;
--s2:8px;
--s3:12px;
--s4:16px;
--s5:20px;
--s6:24px;
--s7:32px;
--s8:40px;
--s9:56px;
--s10:72px;
--s11:96px;
}
@font-face{font-family:"Archivo Black";font-style:normal;font-weight:900;
font-display:swap;src:url("fonts/archivo-black.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;
font-display:swap;src:url("fonts/archivo-regular.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;
font-display:swap;src:url("fonts/jetbrains-mono.woff2") format("woff2")}
/* ---------------------------------------------------------------------
1.0 Reset, base, containers (DESIGN-SPEC 1.2, 1.3, 1.4)
--------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--ink);background:var(--cream);font-size:16px;line-height:1.65;
-webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:"Archivo Black",Arial,sans-serif;font-weight:900}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
img{max-width:100%;display:block}
a{color:inherit}
ul{list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 20px}
main{display:block}
section{padding:72px 0}
section h2{font-family:"Archivo Black";font-size:clamp(24px,3.4vw,34px);
line-height:1.12;letter-spacing:-.2px;color:var(--green);text-wrap:balance}
h1{font-size:clamp(28px,4.4vw,40px);line-height:1.08;letter-spacing:-.3px;
color:var(--ink);text-wrap:balance}
h3{font-size:18px;line-height:1.25}
h4{font-family:"Archivo";font-weight:700;font-size:15px;line-height:1.30;
letter-spacing:.2px}
.lede{font-family:"Archivo";font-weight:400;font-size:18px;line-height:1.55;
color:var(--muted);max-width:56ch}
.eyebrow{font-family:"JetBrains Mono";font-weight:500;font-size:12.5px;
line-height:1.2;letter-spacing:2px;text-transform:uppercase;color:var(--green);
margin-bottom:12px}
.price-plate{font-family:"Archivo Black";font-size:clamp(26px,3.2vw,34px);
line-height:1.05;letter-spacing:-.5px;color:var(--ink)}
/* Skip link -- first element in , visually hidden until focused. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green);
color:var(--green-ink);padding:12px 18px;font-family:"Archivo Black";
font-size:14px;border-radius:0 0 6px 0}
.skip-link:focus{left:0}
/* Focus states -- rust on light grounds, gold on green/ink grounds
(rust on deep green is under 2:1 and would be an invisible ring). */
:focus-visible{outline:3px solid var(--rust);outline-offset:2px}
.on-green :focus-visible,.on-ink :focus-visible,
footer :focus-visible,.cta-band :focus-visible,.stats :focus-visible,
.facts-head :focus-visible{outline-color:var(--gold)}
/* ---------------------------------------------------------------------
1.5 Links
--------------------------------------------------------------------- */
.prose a,.legal a,.trust-card a,.form-fine a{color:var(--rust);text-decoration:underline;
text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover,.legal a:hover,.trust-card a:hover,.form-fine a:hover{
color:var(--rust-dark);text-decoration-thickness:2px}
.on-green a,.cta-band a.inline,footer a{color:var(--green-ink);
text-decoration:none;border-bottom:1px solid var(--gold-line)}
.on-green a:hover,footer a:hover{border-bottom-color:var(--gold)}
footer a{color:rgba(246,241,232,.78);border-bottom:none}
footer a:hover{text-decoration:underline}
a[href^="tel:"]{text-decoration:none}
/* ---------------------------------------------------------------------
1.6 Buttons
--------------------------------------------------------------------- */
a.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;
gap:9px;font-family:"Archivo Black";font-weight:900;font-size:16px;
min-height:var(--tap);padding:0 26px;border-radius:6px;text-decoration:none;
border:none;cursor:pointer;white-space:nowrap;
transition:background .15s ease,transform .15s ease}
a.btn:active,button.btn:active{transform:scale(.98)}
a.btn:disabled,button.btn:disabled{opacity:.7;cursor:default;transform:none}
.btn-primary{background:var(--green);color:var(--green-ink)} /* cream on green: 8.7:1 */
.btn-primary:hover{background:#23392f}
.btn-secondary{background:var(--rust);color:#fff} /* white on rust: 4.9:1 */
.btn-secondary:hover{background:var(--rust-dark)}
/* BUG FIX (integrator, 2026-09-03): `a.btn,button.btn` above carries
`border:none` at specificity (0,1,1) -- one class plus one element --
which beats a bare `.btn-outline` at (0,1,0), so every outline button
rendered with no visible border at all (caught on /thanks/ and /404/'s
secondary buttons in the mandated render-and-view loop). Matching the
base rule's own element+class shape restores the border. */
a.btn.btn-outline,button.btn.btn-outline{background:transparent;color:var(--green);
border:1.5px solid var(--border)}
a.btn.btn-outline:hover,button.btn.btn-outline:hover{border-color:var(--green)}
.btn-on-green{background:var(--cream);color:var(--green)}
.btn-on-green:hover{background:#fff}
/* ---------------------------------------------------------------------
2.1 Site header
--------------------------------------------------------------------- */
.site-header{background:var(--white);border-bottom:1px solid var(--border);
padding:12px 0;position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;
justify-content:space-between;gap:14px 20px}
.brand{order:1;display:flex;align-items:center;gap:10px;text-decoration:none;
min-width:0;flex:none}
.brand svg{flex:none;width:34px;height:34px}
.brand .word{font-family:"Archivo Black";font-size:14.5px;line-height:1.12;
color:var(--green);white-space:nowrap}
.primary-nav{order:2;display:flex;align-items:center;justify-content:center;
gap:24px;flex:1 1 auto;min-width:0}
.primary-nav a{font-size:15px;color:var(--ink);text-decoration:none;
white-space:nowrap;padding:4px 2px;border-bottom:2px solid transparent}
.primary-nav a:hover{color:var(--green);border-bottom-color:var(--green)}
.primary-nav a[aria-current="page"]{color:var(--green);
border-bottom-color:var(--rust)}
.call-btn{order:3;flex:none}
.call-btn svg{flex:none}
:target{scroll-margin-top:120px}
[id]{scroll-margin-top:120px}
@media(max-width:759px){
/* Two explicit rows via grid, rather than relying on flex-wrap's own line-
breaking arithmetic -- a flex-wrap version of this (order + flex-basis)
put the call button on its own third line whenever brand+call's combined
intrinsic width was even a few px over the remaining row width, which it
was at a true 390px viewport (caught by the 390 render + geometry probe,
ARCHITECTURE.md section 10 -- exactly the loop that catches this). Grid
fixes brand and call-btn to one row unconditionally.
`minmax(0,auto)` (not bare `auto`, D4 2026-09-03) on the brand track --
a bare `auto` sizes the grid track to the brand link's intrinsic
(nowrap) content width, which is wider than the row has room for at a
true 390px viewport, and CANNOT shrink below that -- `.brand .word`'s
`white-space:nowrap` overflowed its own track into the call button's
column, which then painted over it (D4: "LAND TODAY" losing its final
characters on every route's 390 render). `minmax(0,auto)` lets the
track shrink to the row's actual available width instead. */
.site-header .wrap{display:grid;
grid-template-columns:minmax(0,auto) auto;grid-template-areas:"brand call" "nav nav";
justify-content:space-between;column-gap:14px;row-gap:0}
.brand{grid-area:brand;order:initial}
.call-btn{grid-area:call;order:initial}
.primary-nav{grid-area:nav;order:initial;flex-basis:auto;
justify-content:flex-start;gap:14px;overflow-x:auto;
-webkit-overflow-scrolling:touch;scrollbar-width:none;
padding-top:12px;margin-top:12px;border-top:1px solid var(--border);
min-height:44px;
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.primary-nav a{font-size:14px}
.primary-nav::-webkit-scrollbar{display:none}
}
@media(max-width:400px){
.call-btn .label{display:none}
}
@media(max-width:400px){
.call-btn{padding:0 14px}
}
@media(max-width:400px){
/* D4 2026-09-03 -- even with the track-overflow fix above, the brand mark
+ "BUY TEXAS/LAND TODAY" + Call button still needs ~358px against
~342px of track at a true 390px viewport. Shrink all three so the row
has slack instead of running exactly to the edge. */
.brand svg{width:28px;height:28px}
.brand .word{font-size:12.5px}
.call-btn{padding:0 12px;font-size:15px;gap:6px}
}
/* ---------------------------------------------------------------------
2.2 Hero -- three variants
--------------------------------------------------------------------- */
.hero-a{background:var(--cream);border-bottom:1px solid var(--border);
overflow:hidden}
.hero-a .grid{display:grid;grid-template-columns:1fr;align-items:stretch}
.hero-a-copy{padding:40px 20px 56px;max-width:var(--wrap);margin:0 auto;
width:100%}
.hero-a-copy .disp{font-size:clamp(30px,5.2vw,52px);line-height:1.06;
letter-spacing:-.5px;margin-bottom:14px;text-wrap:balance}
.hero-a-copy .lede{margin-bottom:22px}
.hero-a-copy .row{display:flex;gap:14px;flex-wrap:wrap}
.hero-a-photo{position:relative;min-height:300px;max-height:420px}
.hero-a-photo img{width:100%;height:100%;object-fit:cover;position:absolute;
inset:0}
@media(min-width:1000px){
.hero-a .grid{grid-template-columns:minmax(0,1fr) minmax(0,calc(50vw - 40px))}
.hero-a-copy{padding:0 40px 0 0;margin:0;max-width:none}
.hero-a-copy-inner{max-width:560px;margin-left:calc((100vw - var(--wrap)) / 2 + 20px)}
.hero-a-photo{min-height:460px;max-height:none}
}
@media(max-width:759px){
.hero-a-copy .row{flex-direction:column}
.hero-a-copy .row a.btn{width:100%}
}
@media(prefers-reduced-motion:no-preference){
.hero-a-copy,.hero-a-photo{animation:hero-rise .3s ease-out both}
.hero-a-photo{animation-delay:.07s}
@keyframes hero-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
.hero-b{background:var(--white);padding:34px 0 46px;border-bottom:1px solid var(--border)}
.hero-b .grid{display:grid;gap:30px}
.hero-b-copy h1{margin-bottom:14px}
.hero-b-copy .sub{font-size:17.5px;color:var(--muted);max-width:48ch}
@media(min-width:1000px){
/* R6 (site orchestrator round 2, 2026-09-03): `align-items:center`
vertically centered the copy column against the TALL form card,
leaving ~200px of dead space above the h1 at 1440px. `start` tops the
copy out level with the form card's own top edge -- the 3-column hero
rebuild (D22) is a separate, out-of-scope change; this is a one-line
alignment fix on the grid that ships today. */
.hero-b .grid{grid-template-columns:1.1fr .9fr;align-items:start}
}
.hero-c{background:var(--cream-2);padding:48px 0 40px;border-bottom:1px solid var(--border)}
.hero-c h1{margin-bottom:12px}
.hero-c .lede{margin-bottom:0}
.hero-c .updated{display:inline-block;margin-bottom:14px}
/* ---------------------------------------------------------------------
2.12 Form card (lead_form component + the compliance-partial hooks)
--------------------------------------------------------------------- */
.lead-form{background:var(--cream);border:1px solid var(--border);
border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-form)}
.lead-form h2{font-size:19px;color:var(--green);margin-bottom:4px}
.hint{font-size:14px;color:var(--muted);margin-bottom:16px}
.field{margin-bottom:13px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:5px;
color:var(--ink)}
.field input,.field select,.field textarea{width:100%;height:46px;
border:1.5px solid var(--border);border-radius:6px;padding:0 12px;
font-size:16px;font-family:"Archivo";background:#fff;color:var(--ink)}
.field textarea{height:auto;min-height:96px;padding:10px 12px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:var(--danger);background:var(--danger-bg)}
.err{display:none;font-size:12.5px;color:var(--danger);margin-top:5px;font-weight:600}
.err.show{display:block}
.form-fail{display:none;background:var(--danger-bg);border:1px solid var(--danger);
border-radius:6px;padding:12px 14px;font-size:13.5px;color:var(--ink);
margin-bottom:14px}
.form-fail.show{display:block}
.submit-btn{width:100%;margin-top:6px}
.form-fine{font-size:12px;color:var(--muted);margin-top:11px;text-align:center}
/* BUG FIX (integrator, 2026-09-03): the verbatim /contact/ partial's own
`` carries none of
components.lead_form()'s classes (`btn btn-primary submit-btn`) -- it
rendered as a bare, unstyled native browser button (caught in the
render-and-view loop). ARCHITECTURE section 4 forbids adding a class or
attribute to a partial, so the look is restored purely by an attribute
selector against markup the partial already has (`.lead-form` is the
wrapper pages_legal.py puts around it, per DESIGN-SPEC 3.5). `:not(.btn)`
keeps this a no-op everywhere the button already carries the real classes. */
.lead-form button[type="submit"]:not(.btn){display:inline-flex;
align-items:center;justify-content:center;gap:9px;font-family:"Archivo Black";
font-weight:900;font-size:16px;min-height:var(--tap);padding:0 26px;
border-radius:6px;border:none;cursor:pointer;white-space:nowrap;
background:var(--green);color:var(--green-ink);width:100%;margin-top:6px;
transition:background .15s ease,transform .15s ease}
.lead-form button[type="submit"]:not(.btn):hover{background:#23392f}
.lead-form button[type="submit"]:not(.btn):active{transform:scale(.98)}
/* Netlify honeypot -- visually hidden, never display:none (bots skip that). */
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
/* Consent block -- restyle only; every word and DOM order come from the
verbatim partial (Lane C). This is the document-grade block on the page. */
.consent{background:var(--white);border:1px solid var(--border);
border-left:3px solid var(--gold);border-radius:6px;padding:16px;margin:16px 0}
.consent h3{font-family:"Archivo Black";font-size:14px;color:var(--green);
margin-bottom:10px}
.opt{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;
margin-bottom:12px}
.opt:last-of-type{margin-bottom:0}
.opt input[type="checkbox"]{width:18px;height:18px;margin-top:2px;
accent-color:var(--green)}
.opt label{font-size:13.5px;line-height:1.5;display:block;min-height:var(--tap);
padding:2px 0}
.disclosure{font-size:12.5px;line-height:1.55;color:var(--muted);margin-top:10px}
.disclosure strong{color:var(--ink)}
/* O1 (2026-09-03): the property quick forms render the SAME consent
fragment as /contact/, wrapped in `.consent-compact` so it restyles to
this card's tighter scale without touching the shared partial's own
bytes -- /contact/ renders the fragment unwrapped, at full size. */
.consent-compact .consent{padding:12px;margin:12px 0}
.consent-compact .consent h3{font-size:13px;margin-bottom:8px}
.consent-compact .opt{gap:8px;margin-bottom:9px}
.consent-compact .opt input[type="checkbox"]{width:20px;height:20px}
.consent-compact .opt label{font-size:12.5px}
.consent-compact .disclosure{font-size:11.5px}
.updated{display:block;font-family:"JetBrains Mono";font-weight:500;
font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
/* ---------------------------------------------------------------------
2.3 Stat strip
--------------------------------------------------------------------- */
.stats{background:var(--green);color:var(--green-ink)}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
padding:30px 20px}
.stats.two-up .wrap{grid-template-columns:repeat(2,1fr)}
.stat{padding:6px 10px;text-align:center;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:20%;bottom:20%;
width:1px;background:rgba(246,241,232,.25)}
/* D16 (2026-09-03): a real figure ("ABOUT AN HOUR") wrapped to two lines in
this slot and threw the strip's three baselines out of alignment -- drop
the clamp ceiling one step and forbid wrapping so a long figure shrinks
to fit instead. */
.stat b{display:block;font-family:"Archivo Black";font-size:clamp(26px,4.2vw,40px);
line-height:1;letter-spacing:-.5px;color:var(--gold);white-space:nowrap}
.stat span{display:block;font-family:"JetBrains Mono";font-weight:500;
font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
color:rgba(246,241,232,.82);margin-top:8px}
@media(max-width:559px){
.stats .wrap{grid-template-columns:1fr;padding:26px 16px;gap:18px}
.stat+.stat::before{left:20%;right:20%;top:0;bottom:auto;width:auto;height:1px}
}
/* ---------------------------------------------------------------------
2.4 Full-bleed photo band
--------------------------------------------------------------------- */
.photo-band{position:relative}
.photo-band img{width:100%;height:clamp(280px,38vw,440px);object-fit:cover}
/* D12 (2026-09-03): measured ~4.3:1 white-on-canopy on the busiest band --
under the 4.5:1 AA floor at 12.5px. The old two-stop gradient
(transparent -> rgba(43,43,43,.72)) wasn't deep enough at the crop line
over mid-green foliage. A darker, closer-to-brand (--green-based) scrim
confined to the caption's own band, re-verified against both the
busiest and the clearest-sky photo band on the site. */
.photo-band figcaption{position:absolute;left:0;right:0;bottom:0;
padding:34px 20px var(--s4);
background:linear-gradient(to top,rgba(41,74,61,.78) 0,rgba(41,74,61,.5) 56px,transparent 120px);
color:#fff;font-family:"JetBrains Mono";font-weight:500;font-size:12.5px;
letter-spacing:.6px}
@media(max-width:759px){
.photo-band img{height:clamp(220px,46vw,300px)}
.photo-band figcaption{font-size:11.5px}
}
/* ---------------------------------------------------------------------
1.8 The signature -- corner-pin bracket
--------------------------------------------------------------------- */
.corner-pins{position:absolute;inset:0;pointer-events:none}
.corner-pins span{position:absolute;width:7px;height:7px;border-radius:50%;
background:var(--green)}
.corner-pins .pin-tr{top:10px;right:10px;background:var(--marker)}
.corner-pins .pin-tl{top:10px;left:10px}
.corner-pins .pin-bl{bottom:10px;left:10px}
.corner-pins .pin-br{bottom:10px;right:10px}
/* ---------------------------------------------------------------------
2.5 Property card (home grid)
--------------------------------------------------------------------- */
.prop-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:34px}
.prop-card{background:var(--white);border:1px solid var(--border);
border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden;
transition:border-color .15s ease,transform .15s ease}
.prop-card:hover{border-color:var(--green);transform:translateY(-2px)}
.prop-card:focus-within{outline:3px solid var(--rust);outline-offset:2px}
.prop-card .photo{position:relative;aspect-ratio:16/10}
.prop-card .photo img{width:100%;height:100%;object-fit:cover}
.prop-card .body{padding:20px}
.prop-card .body h3{font-family:"Archivo Black";font-size:18px;margin:6px 0 12px}
.prop-card .price-plate{background:var(--cream-2);color:var(--ink);
padding:10px 14px;border-radius:6px;width:100%;margin-bottom:12px}
/* Item 6 (site orchestrator round 2, 2026-09-03): flex-wrap let two SHORT
chips ("FAYETTE COUNTY" + "POND ON THE TRACT" on the SA5 card) share one
row while every other card's longer chips each forced their own row --
one card visibly denser than its neighbours in the same grid. One chip
per line on every card, always. */
.chips{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
margin-bottom:14px}
.chip{font-family:"JetBrains Mono";font-weight:500;font-size:12px;
letter-spacing:1.2px;text-transform:uppercase;background:var(--cream);
border:1px solid var(--border);border-radius:4px;padding:5px 9px}
.prop-card .tel{display:flex;align-items:center;gap:8px;font-family:"JetBrains Mono";
font-size:13.5px;letter-spacing:.2px;text-transform:uppercase;margin-bottom:14px}
.prop-empty{background:var(--cream);border:1px solid var(--border);
border-radius:var(--radius);padding:32px;text-align:center;color:var(--muted);
margin-top:34px}
/* O4 (2026-09-03): was an inline style="display:block;text-align:center"
on the card's own footer link. */
.card-cta{display:block;text-align:center}
@media(min-width:1000px){.prop-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:760px) and (max-width:999px){.prop-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:759px){.prop-card .photo{aspect-ratio:16/9}}
/* ---------------------------------------------------------------------
2.7 Land Facts panel -- the hero object
--------------------------------------------------------------------- */
.facts-wrap{display:grid;grid-template-columns:1fr;gap:34px;margin-top:34px;
align-items:start}
.facts{position:relative;background:var(--white);border:1px solid var(--border);
border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden}
/* D6 2026-09-03: the corner-pin signature used to sit on `.facts` itself,
which also contains `.facts-foot` (the financing figures + Call button)
-- the bottom pair of pins landed ON the green Call button, straddling
its edges. `.facts-body` scopes the bracket to the header+rows region
only (the evidence, "the facts table card" per the finding) and never
touches the CTA. */
.facts-body{position:relative}
.facts-head{background:var(--green);color:var(--green-ink);
padding:14px 34px 14px 20px;
font-family:"JetBrains Mono";font-weight:500;font-size:12px;letter-spacing:1.8px;
text-transform:uppercase;display:flex;justify-content:space-between;
align-items:center;gap:10px;border-bottom:1px solid var(--gold-line)}
.facts-rows li{display:grid;grid-template-columns:150px 1fr;gap:14px;
padding:15px 20px;border-bottom:1px dashed var(--border);align-items:baseline}
.facts-rows li:last-child{border-bottom:none}
.facts-rows .k{font-family:"JetBrains Mono";font-weight:500;font-size:12px;
letter-spacing:1.6px;text-transform:uppercase;color:var(--green)}
.facts-rows .v{font-family:"JetBrains Mono";font-weight:400;font-size:13.5px;
letter-spacing:.2px;text-transform:uppercase;color:var(--ink);line-height:1.55}
.facts-foot{background:var(--cream);padding:16px 20px;border-top:1px solid var(--border)}
.facts-foot .btn{width:100%}
@media(max-width:559px){
.facts-rows li{grid-template-columns:1fr;gap:4px}
}
@media(min-width:1000px){
.facts-wrap{grid-template-columns:1fr 1fr}
}
.facts-pair{display:grid;grid-template-columns:1fr;gap:34px}
@media(min-width:1000px){.facts-pair{grid-template-columns:1fr 1fr}}
/* ---------------------------------------------------------------------
2.6 Financing terms block
--------------------------------------------------------------------- */
.terms-block{background:var(--cream-2);border:1px solid var(--border);
border-radius:6px;padding:16px 20px}
.terms-block h4{color:var(--green);margin-bottom:12px}
/* D7 2026-09-03: `grid-auto-flow:column` with a plain `1fr` track forces
every cell to the SAME width regardless of content -- a long value like
"$1,426/MO" in a 3-up row at a narrow container width had nowhere to go
but past its column, overlapping the next cell's value with no rule
between them. `repeat(auto-fit,minmax(112px,1fr))` lets a cell wrap onto
its own row the moment it can no longer fit at a sane minimum width,
instead of overflowing in place -- verified with a line-box count
(Range.getClientRects()), never a bounding-box measurement, which reads
SMALLER once a wrap succeeds and would score a broken layout as fixed. */
.terms-block .cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
gap:var(--s3) var(--s5)}
.terms-block .cell{padding:6px 0;border-left:1px solid var(--border);
padding-left:16px}
.terms-block .cell:first-child{border-left:none;padding-left:0}
.terms-block .cell .mono-label{display:block;font-family:"JetBrains Mono";
font-weight:500;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
color:var(--muted);margin-bottom:4px}
/* Item 4 (site orchestrator round 2, 2026-09-03): the "ASK -- NOT PUBLISHED
YET" disclosure sentinel used to render in the same Archivo Black
26-34px (19px in this block) weight as a real figure like PRICE's
$170,000 in the cell beside it -- indistinguishable from a confident
number. Selector carries 4 classes on purpose (specificity (0,4,0)) so
it always wins over `.terms-block .price-plate{font-size:19px}`
(properties.py's page-scoped GRID_OVERFLOW_FIX_CSS, (0,2,0)) regardless
of which one loads later in the document. */
.terms-block .cell .price-plate.pending{font-family:"Archivo";font-weight:700;
font-size:14px;letter-spacing:0;color:var(--muted)}
.terms-block .fine{display:block;font-size:12.5px;color:var(--muted);
margin-top:14px}
@media(max-width:559px){
.terms-block .cells{grid-template-columns:1fr;gap:12px}
.terms-block .cell{border-left:none;padding-left:0;border-top:1px solid var(--border);
padding-top:10px}
.terms-block .cell:first-child{border-top:none;padding-top:0}
}
/* ---------------------------------------------------------------------
2.8 Proof card -- variant A (survey excerpt) and B (photographs)
--------------------------------------------------------------------- */
.proof{background:var(--white);border:1px solid var(--border);
border-radius:var(--radius);box-shadow:var(--shadow-card);padding:20px}
.proof h3{font-size:16px;color:var(--green);margin-bottom:6px}
.proof > p{font-size:14px;color:var(--muted);margin-bottom:14px}
.proof .frame{border:2px solid var(--gold);border-radius:6px;overflow:hidden;
min-width:0}
.proof .frame img{width:100%;height:auto;display:block}
.proof .doc-link{display:inline-block;margin-top:10px;font-size:13px}
@media(min-width:760px){.proof .frame{min-width:460px}}
.proof-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.proof-photos figure{border-radius:6px;overflow:hidden}
.proof-photos img{width:100%;height:180px;object-fit:cover}
.proof-photos figcaption{font-family:"JetBrains Mono";font-weight:500;
font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);
margin-top:6px}
.proof .fact-line{font-family:"JetBrains Mono";font-size:13px;
text-transform:uppercase;color:var(--green);margin-top:8px}
@media(max-width:559px){.proof-photos{grid-template-columns:1fr}}
/* ---------------------------------------------------------------------
O5/D1 Land Facts promise band (home, between Hero A and #tracts)
Q1 (site orchestrator round 2, 2026-09-03): the label-only skeleton (a
bare row-label list, no values) is gone -- this band now renders a REAL
facts_table() panel for one live tract (La Grange Tract 5), the same
component and CSS every property page's own Land Facts panel uses. Only
the BAND's own container styles live here now; the panel itself is
`.facts`/`.facts-head`/`.facts-rows`/etc (section 2.7 above), unchanged.
--------------------------------------------------------------------- */
.landfacts-promise{background:var(--green);color:var(--green-ink);padding:var(--s10) 0}
.landfacts-promise .grid{display:grid;gap:var(--s7)}
.landfacts-promise .eyebrow{color:var(--gold)}
.landfacts-promise h2{color:var(--green-ink);margin-bottom:12px}
.landfacts-promise .lede{color:rgba(246,241,232,.86);margin-bottom:22px;max-width:52ch}
@media(min-width:760px){
/* R1: `align-items:center` (the skeleton's own short-list layout) would
vertically center a full ~12-row card against the much shorter copy
column, pushing its top edge -- and the corner-pins bracketing it --
down past the eyebrow/h2. `start` tops the panel out level with the
copy, same fix as R6's hero grid. */
.landfacts-promise .grid{grid-template-columns:1.1fr 1fr;align-items:start;
column-gap:var(--s9)}
}
/* ---------------------------------------------------------------------
O5/D2 Who-we-are band (home, between trust cards and the CTA band)
--------------------------------------------------------------------- */
.whowecall{background:var(--cream-2)}
.whowecall .grid{display:grid;gap:var(--s6)}
/* R3 (site orchestrator round 2, 2026-09-03): `section h2`'s base rule
carries no margin-bottom of its own -- every OTHER section's h2 gets its
gap from a sibling rule (`.lede` sets its own top spacing, or the h2 has
a section-specific override), but this band had neither, so the h2 sat
flush against the lede with zero gap between them. */
.whowecall h2{margin-bottom:var(--s3)}
.whowecall .lede{margin-bottom:0}
.whowecall .wwc-card{background:var(--white);border:1px solid var(--border);
border-radius:var(--radius);box-shadow:var(--shadow-card);padding:var(--s5)}
.wwc-row{display:flex;justify-content:space-between;gap:var(--s4);
padding:10px 0;border-bottom:1px dashed var(--border)}
.wwc-row:last-child{border-bottom:none}
.wwc-row .mono-label{font-family:"JetBrains Mono";font-weight:500;font-size:12px;
letter-spacing:1.6px;text-transform:uppercase;color:var(--green)}
.wwc-row .v{font-size:14px;text-align:right}
@media(min-width:760px){
.whowecall .grid{grid-template-columns:1.2fr .8fr;align-items:center;
column-gap:var(--s9)}
}
/* ---------------------------------------------------------------------
2.9 Trust cards
--------------------------------------------------------------------- */
.trust-cards{display:grid;grid-template-columns:1fr;gap:18px;margin-top:30px}
.trust-card{background:var(--cream);border:1px solid var(--border);
border-top:3px solid var(--gold);border-radius:var(--radius);padding:22px}
.trust-card h3{font-size:17px;color:var(--green);margin-bottom:8px}
.trust-card p{font-size:14.5px;color:var(--muted)}
@media(min-width:760px){.trust-cards{grid-template-columns:repeat(3,1fr)}}
/* ---------------------------------------------------------------------
2.10 CTA band
--------------------------------------------------------------------- */
.cta-band{background:var(--green);color:var(--green-ink);padding:64px 0;
text-align:center}
.cta-band h2{color:var(--green-ink);margin-bottom:10px}
.cta-band p{color:rgba(246,241,232,.86);margin-bottom:22px;font-size:16px}
.cta-band .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media(max-width:559px){
.cta-band .row{flex-direction:column}
.cta-band .row a.btn{width:100%}
}
/* ---------------------------------------------------------------------
2.11 Legal prose (/privacy/, /terms/)
--------------------------------------------------------------------- */
.legal-hero{padding-bottom:0}
.legal-sheet{position:relative;background:var(--white);border:1px solid var(--border);
border-radius:var(--radius);box-shadow:var(--shadow-card);padding:40px;
margin:40px 0 72px}
.legal-sheet .updated{margin-bottom:8px}
.legal-sheet h2{font-family:"Archivo Black";font-size:22px;color:var(--green);
margin:36px 0 10px;padding-top:20px;border-top:1px solid var(--border)}
/* BUG FIX (integrator, 2026-09-03): was `.legal-sheet > h2:first-of-type`
(direct-child combinator). The verbatim partials (privacy/terms/thanks)
keep their own literal `` wrapper -- E1-E6 never touches it -- so
the real DOM is `.legal-sheet > main > h2`, one level deeper than this
selector reached; the first heading kept its top hairline rule instead
of losing it. Descendant combinator reaches it without touching any
partial's markup. */
.legal-sheet h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.legal-sheet p{font-size:16px;line-height:1.75;margin-bottom:14px;max-width:var(--measure)}
.legal-sheet ul{margin-bottom:14px}
.legal-sheet li{position:relative;padding-left:20px;line-height:1.7;
margin-bottom:8px;max-width:var(--measure)}
.legal-sheet li::before{content:"";position:absolute;top:.7em;left:4px;
width:4px;height:4px;background:var(--gold)}
.legal-sheet strong{font-weight:700;color:var(--ink)}
.legal-index{background:var(--cream-2);border:1px solid var(--border);
border-radius:6px;padding:18px 20px;margin-bottom:32px}
.legal-index ul{display:grid;grid-template-columns:1fr;gap:8px;margin:0}
.legal-index li{padding-left:0}
.legal-index li::before{display:none}
.legal-index a{font-family:"JetBrains Mono";font-weight:500;font-size:12.5px;
letter-spacing:.6px;text-transform:uppercase}
@media(min-width:760px){
.legal-index ul{grid-template-columns:1fr 1fr}
}
@media(max-width:759px){
.legal-sheet{padding:24px}
}
/* ---------------------------------------------------------------------
2.14 Mobile action bar (property pages only, <=559px)
--------------------------------------------------------------------- */
.mobile-bar{display:none}
@media(max-width:559px){
body.has-mobile-bar{padding-bottom:74px}
.mobile-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;
position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);
padding:10px 12px;border-top:1px solid rgba(246,241,232,.16)}
.mobile-bar a.btn{min-height:46px;font-size:14.5px;padding:0 10px}
}
/* ---------------------------------------------------------------------
2.13 Footer
--------------------------------------------------------------------- */
.site-footer{background:var(--ink);color:rgba(246,241,232,.78);padding:30px 0;
font-size:13px}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;
gap:16px}
.site-footer .fbrand{display:flex;align-items:center;gap:9px;flex:none}
.site-footer .fbrand svg{flex:none;width:26px;height:26px}
.site-footer .entity{font-size:12.5px;line-height:1.7;max-width:460px}
/* Coordinator finding, 2026-09-03: the master phone number broke across two
lines ("832-402-" / "1754") on every page -- a bare hyphen is a normal
soft-wrap opportunity (UAX#14), so a hyphenated tel: number wraps like
any other hyphenated word once its line gets tight. `white-space:nowrap`
scoped to the entity line's two `` tags (tel: and mailto:) keeps each
number/address whole while leaving the rest of the line -- the entity
name and the ` · ` separators, which are plain text, not part of
an anchor -- free to wrap normally between words. */
.site-footer .entity a{color:rgba(246,241,232,.78);white-space:nowrap}
.site-footer .flinks{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
@media(max-width:759px){
.site-footer .wrap{flex-direction:column;gap:14px;text-align:left}
}
/* ---------------------------------------------------------------------
Misc: 404 page
--------------------------------------------------------------------- */
.notfound{padding:80px 0;text-align:center}
.notfound .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
margin-top:24px}
/* ---------------------------------------------------------------------
O4 (2026-09-03) generic utilities -- replace one-off inline `style=`
attributes that were on pages_404.py / pages_financing.py / pages_legal.py
markup with real classes.
--------------------------------------------------------------------- */
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.section-tight{padding-top:0}
.fine{font-size:13px;color:var(--muted)}
.mt-lg{margin-top:20px}
/* ---------------------------------------------------------------------
4.0 The property-page system (round B synthesis, adopted 2026-09-08)
Sequence: photo -> offer ledger -> photo run -> per-tract record panel
-> permission (where verified) -> walk -> proof -> full form.
Two measured constraints are load-bearing here and must not be "tidied":
a) The headline is on cream ABOVE the photograph, never over it. Measured
on the real render with 00_Engine/legibility.py, the lower band of the
La Grange hero photo gives gold 1.02:1 and cream 1.65:1 -- the
strongest photograph in this brand's pool is also the palest, and
nothing legible survives on it. Ink on cream is 12.59:1 and cannot
regress when a photograph is swapped.
b) `.hero-sc` carries padding:0 deliberately. It is a , and the
global `section{padding:72px 0}` rule put 72px of dead cream between
the sticky header and the headline -- which pushed the offer ledger
toward the fold on the one screen that has to carry it.
--------------------------------------------------------------------- */
.hero-sc{background:var(--cream);position:relative;padding:0}
.hero-sc-head{padding:16px 20px}
.hero-sc-head h1{margin:8px 0 8px;max-width:24ch;
font-size:clamp(23px,6.1vw,34px);line-height:1.1}
.hero-sc-sub{color:var(--muted);margin:0;max-width:54ch;font-size:14px}
.hero-sc-img{position:relative;height:26vh;min-height:180px;max-height:520px;
overflow:hidden}
.hero-sc-img figure{margin:0;height:100%}
.hero-sc-img img{display:block;width:100%;height:100%;object-fit:cover}
/* The offer ledger. One row per tract, so the surface scales by stacking.
Brad 2026-09-08: cap the first mobile screen at three rows -- do NOT
shrink the hero to fit a fourth; extra tracts flow below the fold. */
.offer-ledger{background:var(--green);color:var(--green-ink);
padding:20px 0 24px;position:relative}
.offer-row{display:flex;flex-wrap:wrap;align-items:baseline;
justify-content:space-between;gap:8px 16px;padding:12px 0;
text-decoration:none;color:inherit;
border-bottom:1px solid rgba(214,167,86,.34)}
.offer-row:last-child{border-bottom:0}
.offer-row:hover .offer-price{text-decoration:underline}
.offer-who{font-size:10px;letter-spacing:.1em;color:rgba(246,241,232,.76);
flex:1 1 auto;min-width:0}
.offer-nums{display:flex;align-items:baseline;gap:12px;flex:0 0 auto}
.offer-price{font-family:'Archivo Black',Impact,sans-serif;line-height:1.02;
font-size:clamp(20px,5.4vw,26px);color:var(--gold)}
.offer-down{font-size:13px;letter-spacing:.04em;color:var(--cream);
white-space:nowrap}
/* The record panel -- the property and its facts as ONE object. */
/* .records-wrap is a , so it inherits the global
section{padding:72px 0}. Stacking that on .records' own 56px put 128px of
dead cream above the panels -- the same accumulate-and-forget pattern that
left three dead columns on the previous version of this page. The wrapper
owns no spacing; .records owns all of it. */
.records-wrap{padding:0}
.records{padding:56px 0;display:grid;gap:32px;grid-template-columns:1fr}
.record{position:relative;background:var(--white);
border:1px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow-card);overflow:hidden}
.record-media{margin:0}
.record-media img{display:block;width:100%;
height:clamp(190px,26vh,260px);object-fit:cover}
.record-media figcaption{font-family:'JetBrains Mono',monospace;font-size:10px;
letter-spacing:.09em;color:var(--muted);padding:8px 24px 0}
.record-body{padding:20px 24px 24px}
.record-body h2{margin:8px 0 20px;font-size:clamp(20px,4.6vw,26px)}
.record-plate{display:grid;gap:12px 20px;margin:0 0 20px;
grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.record-plate .cell{min-width:0;display:flex;flex-direction:column;gap:2px}
.record-plate .mono-label{font-size:10px;letter-spacing:.09em;
color:var(--muted)}
.record-plate .price-plate{font-family:'Archivo Black',Impact,sans-serif;
line-height:1.02;font-size:clamp(20px,5.4vw,26px);color:var(--ink)}
/* Brad 2026-09-08, ruling 2: "no restrictions" is the buyer's own
unprompted, most-repeated word and is too important to stay a chip among
chips. Inside the RECORD it is a verified fact given real hierarchy; the
permission section below carries what it MEANS. Two jobs, kept apart.
Renders only where the fact is VERIFIED -- Anahuac has no such row, so
the block is absent there by data, not by a route test. */
.record-headline{margin:0 0 20px;padding:14px 16px;
background:var(--cream);border-left:3px solid var(--marker);
border-radius:0 var(--radius) var(--radius) 0}
.record-headline b{display:block;font-family:'Archivo Black',Impact,sans-serif;
font-size:clamp(17px,4.4vw,21px);line-height:1.12;color:var(--green)}
.record-headline span{display:block;font-size:12px;color:var(--muted);
margin-top:4px}
.record-more{border-top:1px solid var(--border);padding-top:16px}
.record-more summary{font-family:'JetBrains Mono',monospace;font-size:11px;
letter-spacing:.09em;color:var(--green);cursor:pointer;
text-transform:uppercase}
.record-more summary:focus-visible{outline:2px solid var(--marker);
outline-offset:3px}
.record-more .facts-rows{padding-top:16px}
/* The photo run -- the land at a size worth looking at. */
.photo-run{padding:40px 0}
.photo-run-grid{display:grid;gap:16px;grid-template-columns:1fr}
.photo-run figure{margin:0}
.photo-run img{display:block;width:100%;
height:clamp(200px,32vh,300px);object-fit:cover;border-radius:var(--radius)}
.photo-run figcaption{font-family:'JetBrains Mono',monospace;font-size:10px;
letter-spacing:.09em;color:var(--muted);padding-top:8px}
/* The permission section -- the meaning layer. No use claims. */
.permission{background:var(--cream-2);padding:56px 0;
border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.permission h2{margin:8px 0 12px;max-width:18ch}
/* WALK IT -- a buyer action, never a second capture surface. */
.walk{background:var(--green);color:var(--green-ink);padding:56px 0}
.walk-inner{position:relative;max-width:var(--wrap-narrow)}
.walk h2{color:var(--cream);margin:8px 0 12px;max-width:18ch}
.walk .lede{color:rgba(246,241,232,.85)}
.walk .eyebrow{color:var(--gold)}
.walk-facts{list-style:none;margin:20px 0;padding:0;
border-top:1px solid rgba(214,167,86,.4)}
.walk-facts li{padding:12px 0;border-bottom:1px solid rgba(214,167,86,.4);
font-size:12px;letter-spacing:.08em;color:var(--gold)}
.walk-links{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px}
.walk .fine{color:rgba(246,241,232,.7);display:block;margin:0 0 20px}
.leadform-section{padding:56px 0;background:var(--cream-2);
border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
@media(min-width:860px){
.hero-sc-img{height:52vh;max-height:600px}
.hero-sc-head{padding:40px 20px 24px}
.offer-ledger{padding:24px 0 32px}
.offer-who{font-size:11px}
.offer-down{font-size:14px}
.photo-run-grid{grid-template-columns:2fr 1fr 1fr}
.photo-run img{height:clamp(280px,40vh,380px)}
.record{display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);
align-items:stretch}
.record-media,.record-media img{height:100%}
.record-media figcaption{position:absolute;bottom:12px;left:20px;
color:var(--cream);padding:0;text-shadow:0 1px 6px rgba(18,30,24,.8)}
.record-body{padding:32px}
}