/* ==========================================================================
Twin Villas — shared styles
Fonts (Fraunces + Atkinson Hyperlegible Next) load from Google Fonts via
the tags in each page's — see the @font-face note that used
to live here if you ever want to self-host them again instead.
========================================================================== */
:root{
--charcoal-900:#1E2221; --charcoal-800:#2A2F2D; --charcoal-600:#4A514E;
--pistachio-700:#547030; --pistachio-500:#93B462; --pistachio-400:#A9C77E; --pistachio-300:#C3DA9F; --pistachio-100:#EAF2DA;
/* pistachio-700 is a darkened accent used wherever pistachio text/outlines
sit on a light background — pistachio-500 alone reads well as a fill or
against charcoal, but fails WCAG contrast (2:1) as small text or a focus
ring on paper/pistachio-100. */
--paper:#F8F9F4; --ink:#232827; --muted:#4B5350; --line:#D5DBCB;
--serif:"Fraunces",Georgia,"Times New Roman",serif;
--sans:"Atkinson Hyperlegible Next",Verdana,"Segoe UI",sans-serif;
--s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:5rem;
--maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.65 var(--sans);overflow-x:hidden}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0 0 var(--s2);letter-spacing:-.01em}
h1{font-size:clamp(2.25rem,5vw,4rem)}
h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
h3{font-size:1.4rem;font-weight:600}
p{margin:0 0 var(--s2);max-width:64ch}
a{color:inherit}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--pistachio-700);outline-offset:3px}
.dark :focus-visible{outline-color:var(--pistachio-300)}
.wrap{width:min(var(--maxw),100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--pistachio-400);color:var(--charcoal-900);padding:var(--s1) var(--s2);z-index:30}
.skip:focus{left:var(--s2);top:var(--s1)}
main{display:block}
/* Real ![]()
placeholders — src files are intentionally missing.
Drop your own photos in /images (same filenames) to fill them in;
until then the browser's broken-image icon plus this frame marks the spot. */
.photo{width:100%;height:auto;object-fit:cover;display:block;background:var(--pistachio-100);border:1px solid var(--line);color:var(--muted);font-size:.85rem;min-height:160px}
/* height:auto + aspect-ratio (set per context below) keeps the image's own
size intrinsic. Setting height:100% here instead would, inside a CSS Grid
row, create a stretch/auto-track sizing feedback loop that inflates the
image — and the whole row — far taller than intended. */
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.7rem 1.6rem;border-radius:6px;border:2px solid transparent;font:700 1.0625rem var(--sans);text-decoration:none;cursor:pointer}
.btn-primary{background:var(--pistachio-400);color:var(--charcoal-900)}
.btn-primary:hover{background:var(--pistachio-300)}
.btn-outline{border-color:var(--pistachio-300);color:var(--pistachio-100)}
.btn-outline:hover{background:rgba(195,218,159,.14)}
.btn-outline-dark{border-color:var(--charcoal-800);color:var(--charcoal-800)}
.btn-outline-dark:hover{background:rgba(42,47,45,.08)}
.btn-dark{background:var(--charcoal-800);color:#fff}
.btn-dark:hover{background:var(--charcoal-600)}
/* utility bar + header */
.util{background:var(--charcoal-900);color:var(--pistachio-100);font-size:1rem}
.util .wrap{display:flex;justify-content:flex-end;gap:var(--s4);padding-block:.55rem}
.util a{text-decoration:none;font-weight:700}
.util a:hover{text-decoration:underline}
header.site{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:84px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font:600 1.75rem var(--serif);color:var(--charcoal-800);flex-shrink:0}
.brand svg{flex-shrink:0}
nav.primary > ul{display:flex;align-items:center;gap:var(--s3)}
nav.primary > ul > li{position:relative}
nav.primary > ul > li > a,
nav.primary > ul > li > button.nav-top{
display:flex;align-items:center;gap:.35rem;text-decoration:none;font:700 1rem var(--sans);
color:var(--charcoal-800);padding:.9rem .1rem;border-bottom:3px solid transparent;background:none;border-top:none;border-left:none;border-right:none;cursor:pointer;
}
nav.primary > ul > li > a:hover,
nav.primary > ul > li > button.nav-top:hover,
nav.primary > ul > li.current > a,
nav.primary > ul > li.current > button.nav-top,
nav.primary > ul > li.has-open > button.nav-top{border-bottom-color:var(--pistachio-700)}
nav.primary .caret{width:.6em;height:.6em;flex-shrink:0}
nav.primary .caret path{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}
.submenu{
list-style:none;margin:0;padding:.4rem;position:absolute;top:100%;left:0;min-width:230px;
background:var(--pistachio-100);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 24px rgba(30,34,33,.14);
display:none;
}
li.has-open > .submenu{display:block}
.submenu li a{display:block;padding:.65rem .8rem;border-radius:6px;text-decoration:none;font-weight:700;color:var(--charcoal-800)}
.submenu li a:hover,.submenu li a:focus-visible{background:var(--pistachio-300)}
.submenu li a[aria-current="page"]{background:var(--charcoal-800);color:#fff}
.menu-btn{display:none;min-height:48px;padding:.5rem 1rem;background:none;border:2px solid var(--charcoal-800);border-radius:6px;font:700 1rem var(--sans);color:var(--charcoal-800);cursor:pointer;flex-shrink:0}
/* page header (non-home pages) */
.page-head{background:var(--charcoal-800);color:#fff;padding-block:var(--s5)}
.page-head p.lead{color:#E4E9DC;font-size:1.2rem}
.crumb{font-size:.95rem;font-weight:700;color:var(--pistachio-300);margin:0 0 var(--s2)}
.crumb a{color:var(--pistachio-300);text-decoration:none}
.crumb a:hover{text-decoration:underline}
/* hero (home) */
.hero{background:var(--charcoal-800);color:#fff;padding-block:var(--s6)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s5);align-items:center}
.hero p.lead{font-size:1.3rem;color:#E4E9DC}
.hero .actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.price{display:inline-flex;align-items:baseline;gap:.6rem;margin-top:var(--s4);padding-top:var(--s2);border-top:2px solid var(--pistachio-400);color:var(--pistachio-100)}
.price strong{font:600 2rem var(--serif);color:var(--pistachio-300)}
.hero .photo{aspect-ratio:6/5;border-color:var(--pistachio-300);border-radius:8px}
/* sections */
section{padding-block:var(--s6)}
section.tight{padding-block:var(--s5)}
.intro{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--s5);align-items:start}
.pillars li{padding:var(--s3) 0;border-top:2px solid var(--charcoal-800)}
.pillars li:last-child{border-bottom:2px solid var(--charcoal-800)}
.pillars h3{margin-bottom:.4rem}
.pillars p{margin:0}
.on-pistachio{background:var(--pistachio-100)}
.on-charcoal{background:var(--charcoal-900);color:#fff}
/* single living plan */
.plan-card{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:stretch;margin-top:var(--s4);background:var(--paper);border:2px solid var(--charcoal-800);border-radius:10px;overflow:hidden}
.plan-card .photo{aspect-ratio:4/5;min-height:0;border:none;border-radius:0}
.plan-body{padding:var(--s4)}
.plan-body .size{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin:0 0 var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--line);font-weight:700}
.plan-body .from{font:600 1.6rem var(--serif);margin:0 0 var(--s3)}
.plan-features{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.5rem;margin-bottom:var(--s3)}
.plan-features li{padding-left:1.6rem;position:relative}
.plan-features li::before{content:"";position:absolute;left:0;top:.6em;width:.8rem;height:.4rem;border-left:3px solid var(--pistachio-500);border-bottom:3px solid var(--pistachio-500);transform:rotate(-45deg) translateY(-3px)}
.amen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s4)}
.amen-grid h3{font-size:1.3rem;padding-bottom:.6rem;border-bottom:4px solid var(--pistachio-400)}
.amen-grid li{padding:.45rem 0;border-bottom:1px solid var(--line)}
/* FAQ */
.faq{max-width:52rem;margin-top:var(--s3)}
.faq details{border-bottom:1px solid var(--line);padding:var(--s2) 0}
.faq summary{cursor:pointer;font-family:var(--serif);font-weight:600;font-size:1.15rem;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:.2rem 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex-shrink:0;width:1.4rem;height:1.4rem;border:2px solid var(--charcoal-800);border-radius:50%;position:relative}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;background:var(--charcoal-800);top:50%;left:50%;transform:translate(-50%,-50%)}
.faq summary .plus::before{width:.6rem;height:2px}
.faq summary .plus::after{width:2px;height:.6rem}
.faq details[open] summary .plus::after{display:none}
.faq .a{padding-top:var(--s2)}
.faq .a p{margin:0}
/* values grid (about) */
.values-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);margin-top:var(--s4)}
.value{padding:var(--s3);border:2px solid var(--charcoal-800);border-radius:8px}
.value h3{margin-bottom:.5rem}
.value p{margin:0}
.mission{background:var(--pistachio-400);color:var(--charcoal-900);padding-block:var(--s6)}
.mission blockquote{margin:0;max-width:52rem}
.mission blockquote p{font:500 clamp(1.5rem,2.8vw,2.1rem)/1.4 var(--serif);max-width:none}
.story{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center}
.story .photo{aspect-ratio:6/5;border-radius:8px}
/* neighborhood */
.map-frame{border:2px solid var(--charcoal-800);border-radius:8px;overflow:hidden}
.map-frame .photo{aspect-ratio:16/9;border:none;border-radius:0}
.nearby-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s4)}
.nearby-grid .photo{aspect-ratio:4/3;border-radius:6px;margin-bottom:var(--s2)}
.nearby-grid h3{font-size:1.2rem}
.nearby-grid .dist{display:inline-block;margin-top:.3rem;font-weight:700;color:var(--pistachio-700)}
/* video walkthrough */
.video-frame{border:2px solid var(--charcoal-800);border-radius:8px;overflow:hidden;background:var(--charcoal-900)}
.video-frame video{width:100%;aspect-ratio:16/9;display:block;background:var(--charcoal-900)}
.timestamps{display:grid;gap:.6rem;margin-top:var(--s4)}
.timestamps li{display:flex;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.timestamps .t{font-weight:700;color:var(--pistachio-700);flex-shrink:0;width:3.2rem}
/* gallery */
.gallery-toolbar{display:flex;flex-wrap:wrap;gap:.6rem;margin:var(--s3) 0 var(--s4)}
.chip{border:2px solid var(--charcoal-800);background:var(--paper);color:var(--charcoal-800);border-radius:999px;padding:.45rem 1.1rem;font:700 .95rem var(--sans);cursor:pointer;min-height:44px}
.chip[aria-pressed="true"]{background:var(--charcoal-800);color:#fff}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.gallery-grid figure{margin:0}
.gallery-grid .photo{aspect-ratio:4/3;min-height:0;border-radius:6px}
.gallery-grid figcaption{margin-top:.5rem;font-size:.95rem;color:var(--muted)}
.gallery-empty{display:none;padding:var(--s4) 0;color:var(--muted)}
/* contact / visit */
.visit{background:var(--charcoal-900);color:#fff}
.visit .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s5)}
form{display:grid;gap:var(--s3);background:var(--charcoal-800);padding:var(--s4);border-radius:6px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
label{display:grid;gap:.4rem;font-weight:700}
input,select,textarea{font:400 1.0625rem var(--sans);min-height:52px;padding:.7rem .9rem;border:2px solid var(--charcoal-600);border-radius:6px;background:var(--paper);color:var(--ink);width:100%}
textarea{min-height:120px;resize:vertical}
.note{font-size:.95rem;color:#D0D8C6;margin:0}
#status{margin:0;padding:var(--s2);border-radius:6px;background:var(--pistachio-100);color:var(--charcoal-900);font-weight:700}
#status[hidden]{display:none}
.details dl{margin:var(--s3) 0 0;display:grid;gap:var(--s2)}
.details dt{font-weight:700;color:var(--pistachio-300)}
.details dd{margin:0}
.details a{color:#fff}
footer{background:var(--charcoal-900);color:#CBD3C1;border-top:1px solid var(--charcoal-600);padding-block:var(--s4);font-size:.95rem}
footer .wrap{display:grid;gap:var(--s2)}
footer .foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3)}
footer .foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
footer .foot-links a{text-decoration:none;font-weight:700;color:var(--pistachio-200,#DCE9C8)}
footer .foot-links a:hover{text-decoration:underline}
footer .privacy-note{max-width:64ch;padding-top:var(--s2);border-top:1px solid var(--charcoal-600)}
footer .privacy-note strong{color:#fff}
footer p{max-width:68ch;margin:0}
@media (max-width:960px){
.hero .wrap,.intro,.visit .wrap,.plan-card,.story{grid-template-columns:1fr}
.amen-grid,.values-grid,.nearby-grid{grid-template-columns:1fr 1fr}
.gallery-grid{grid-template-columns:1fr 1fr}
.plan-card .photo{aspect-ratio:16/9}
.story .photo{aspect-ratio:16/9}
}
@media (max-width:820px){
.menu-btn{display:inline-flex;align-items:center}
nav.primary{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:2px solid var(--charcoal-800);max-height:calc(100vh - 84px);overflow-y:auto}
nav.primary.open{display:block}
nav.primary > ul{flex-direction:column;align-items:stretch;gap:0;padding:var(--s1) 1.25rem var(--s2)}
nav.primary > ul > li{width:100%}
nav.primary > ul > li > a,nav.primary > ul > li > button.nav-top{width:100%;justify-content:space-between;padding:.9rem 0;border-bottom:1px solid var(--line)}
nav.primary .submenu{position:static;box-shadow:none;border:none;background:var(--pistachio-100);display:none;margin:.3rem 0 .5rem;width:100%}
li.has-open > .submenu{display:block}
nav.primary li.top-cta{margin-top:var(--s1);padding-bottom:var(--s2)}
nav.primary li.top-cta > a.btn{width:100%;padding:.7rem 1.6rem;border-bottom:none;justify-content:center;background:var(--pistachio-400);color:var(--charcoal-900)}
nav.primary li.top-cta > a.btn:hover{background:var(--pistachio-300)}
header.site{position:relative}
.util .wrap{justify-content:center}
}
/* Grid children default to a content-based minimum width, so a broken ![]()
's
alt text (or any long unbroken content) can force a track wider than its
column and overflow the page. Zero that out on every grid used above. */
.hero .wrap > *,.intro > *,.plan-card > *,.amen-grid > *,.values-grid > *,
.nearby-grid > *,.gallery-grid > *,.story > *,.visit .wrap > *,.row > *{min-width:0}
@media (max-width:560px){
section,.hero,.mission,.callout{padding-block:var(--s5)}
.amen-grid,.row,.values-grid,.nearby-grid,.gallery-grid,.plan-features{grid-template-columns:1fr}
form{padding:var(--s3)}
.brand{font-size:1.4rem}
.brand svg{width:36px;height:36px}
}