/* Addition Building & Design, site v4: the inner pages (The Work, the Palisades set).
   Everything here is composed from the concept's tokens in site.css: same type scale, same rules, same reveal.
   No pins, no scrub, no cursor, no smooth-scroll library. Loaded only by the pages build/generate.py writes. */

/* ---------- utilities the inner pages use ---------- */
.h-section{font-size:clamp(2rem,4vw,3.2rem);max-width:16em;margin-top:1.4rem}
.lede{font-size:clamp(1rem,1.35vw,1.13rem);line-height:1.8}
.idx{font-family:var(--serif);font-style:italic;color:var(--oxide);font-size:.95rem}
.small{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:400}
.prov{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-top:1.1rem}
.eyebrow.dark{color:var(--ivory);opacity:.8}
.eyebrow.dark::after{background:var(--ivory)}
.js .stagger>*{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .stagger.in>*{opacity:1;transform:none}
.js .stagger.in>*:nth-child(2){transition-delay:.12s}.js .stagger.in>*:nth-child(3){transition-delay:.24s}.js .stagger.in>*:nth-child(4){transition-delay:.36s}
.js .stagger.in>*:nth-child(5){transition-delay:.48s}.js .stagger.in>*:nth-child(6){transition-delay:.6s}.js .stagger.in>*:nth-child(7){transition-delay:.72s}.js .stagger.in>*:nth-child(8){transition-delay:.84s}
@media (prefers-reduced-motion:reduce){.js .stagger>*{opacity:1;transform:none;transition:none}}
h4{font-family:var(--serif);font-weight:400;color:var(--char);line-height:1.1}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}

/* ---------- page hero: the place, the concept's hero at a shorter height ---------- */
/* 2026-09-15: min-height, not height — a fixed-height hero with flex-end content overflows out the TOP on short
   windows, sliding the crumbs under the fixed header (seen on the Pasadena fire page). The hero grows with its
   content instead, and the content keeps a top clearance the height of the header. Same guard as the phone rule. */
.page-hero{position:relative;min-height:clamp(520px,78svh,760px);overflow:hidden;display:flex;align-items:flex-end;background:var(--char)}
.page-hero .hero-media img{object-position:center 45%}
.hero-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(15,13,11,.78) 0%,rgba(15,13,11,.42) 42%,rgba(15,13,11,.28) 70%,rgba(15,13,11,.45) 100%)}
.page-hero .hero-inner{position:relative;z-index:2;width:100%;padding-top:8.5rem;padding-bottom:clamp(2.6rem,6vh,4.5rem);color:var(--ivory)}
.crumbs{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,241,232,.7);display:flex;gap:.8rem;flex-wrap:wrap}
.crumbs a:hover{color:var(--ivory)}
.page-hero h1{color:var(--ivory);font-size:clamp(2.4rem,5.2vw,4.4rem);max-width:13em;margin:1.2rem 0 1.4rem;letter-spacing:-.005em}
.page-hero .lede{max-width:34em;color:rgba(245,241,232,.82)}
.page-hero .hero-actions{display:flex;align-items:center;gap:2.2rem;margin-top:2.6rem;flex-wrap:wrap}
.page-hero .prov{position:absolute;right:clamp(1.4rem,5vw,4rem);bottom:clamp(2.6rem,6vh,4.5rem);color:rgba(245,241,232,.6);z-index:3;margin:0;text-align:right}
@media (max-width:900px){.page-hero .prov{display:none}}
@media (max-width:760px){
  /* Phone hero, the same treatment as the homepage's (Caleb, 2026-09-13, "very crowded"): tighter crumbs on one
     line, a smaller headline and lede, the two actions stacked at the left with less air between them. */
  .page-hero{height:auto;min-height:92svh;align-items:center}
  .page-hero .hero-inner{padding-top:7.5rem;padding-bottom:3rem}
  .crumbs{font-size:9.5px;letter-spacing:.16em;gap:.6rem;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}
  .page-hero h1{font-size:clamp(2rem,8.4vw,2.8rem);margin:1.4rem 0 1.4rem;line-height:1.1}
  .page-hero .lede{font-size:1rem;line-height:1.72;max-width:none;color:rgba(245,241,232,.8)}
  .page-hero .hero-actions{margin-top:2.2rem;gap:1.3rem;flex-direction:column;align-items:flex-start}
  .page-hero .btn{padding:1em 2.3em}
  .hero-veil{background:linear-gradient(to top,rgba(15,13,11,.8) 0%,rgba(15,13,11,.52) 45%,rgba(15,13,11,.2) 75%,rgba(15,13,11,.3) 100%)}
}

/* ---------- sections ---------- */
.statement{padding:clamp(5rem,9vw,8rem) 0}
.statement-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,5vw,5rem)}
.statement h2{font-size:clamp(2rem,4vw,3.2rem);margin-top:1.4rem;max-width:11em}
.statement .cols p + p{margin-top:1.2rem}
.statement .cols p{font-size:1.02rem;max-width:34em}
@media (max-width:860px){.statement-grid{grid-template-columns:1fr}}

.proofs{padding:clamp(5rem,9vw,8rem) 0;background:var(--stone)}
.proof-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.2rem,2.6vw,2.4rem);margin-top:clamp(3rem,5vw,4.5rem)}
.proof{display:block}
.proof .media{overflow:hidden;background:var(--ivory);aspect-ratio:4/3}
.proof .media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.proof:hover .media img{transform:scale(1.035)}
.proof h3{font-size:1.3rem;margin-top:1.1rem}
.proof p{font-size:.9rem;max-width:24em;margin-top:.3rem}
.p1{grid-column:1/8}.p1 .media{aspect-ratio:16/10}
.p2{grid-column:9/13;margin-top:clamp(2rem,5vw,5rem)}.p2 .media{aspect-ratio:4/3}
.p3{grid-column:2/6;margin-top:clamp(1rem,2vw,2rem)}.p3 .media{aspect-ratio:4/3}
.p4{grid-column:7/13}.p4 .media{aspect-ratio:16/10}
@media (max-width:860px){.proof-grid{display:block}.proof + .proof{margin-top:2.6rem}.p2,.p3,.p4{margin-top:2.6rem}}

.underway{padding:clamp(5rem,9vw,8rem) 0}
.underway-grid{display:grid;grid-template-columns:6fr 5fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.underway figure{overflow:hidden;background:var(--stone)}
.underway img{width:100%;aspect-ratio:4/3;object-fit:cover}
.underway h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-top:1.3rem;max-width:12em}
.underway p{font-size:1rem;max-width:30em;margin-top:1.2rem}
.underway ul{list-style:none;margin-top:1.6rem;border-top:1px solid var(--hairline)}
.underway li{padding:.7rem 0;border-bottom:1px solid var(--hairline);font-size:.95rem;display:flex;justify-content:space-between;gap:1rem}
.underway li span:last-child{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);white-space:nowrap}
@media (max-width:860px){.underway-grid{grid-template-columns:1fr}}

.ruled{padding:clamp(5rem,9vw,8rem) 0;background:var(--stone)}
.ruled-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,3rem);margin-top:clamp(3rem,5vw,4.5rem)}
.ruled-cols.four{grid-template-columns:repeat(4,1fr)}
.ruled-col{border-top:1px solid var(--hairline);padding-top:1.4rem}
.ruled-col .idx{display:block;margin-bottom:.8rem}
.ruled-col h3{font-size:1.35rem;margin-bottom:.7rem}
.ruled-col p{font-size:.93rem}
.ruled-col a,.faq .a a{text-decoration:underline;text-underline-offset:.2em}
.ranges-note{margin-top:2rem;font-size:.9rem;color:var(--taupe);max-width:40em}
@media (max-width:1100px){.ruled-cols.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.ruled-cols,.ruled-cols.four{grid-template-columns:1fr}}

.family{padding:clamp(5rem,9vw,8rem) 0}
.family-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.family-grid figure{overflow:hidden;background:var(--stone)}
.family-grid img{width:100%;aspect-ratio:3/2;object-fit:cover}
.family-grid img.tall,.underway img.tall{aspect-ratio:4/5;object-position:center top} /* 2026-09-14: a portrait photograph keeps its heads (Caleb: "Missing Christine's head") */
.family-grid h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-top:1.3rem;max-width:11em}
.family-grid p{font-size:1rem;max-width:28em;margin-top:1.2rem}
.family p + p{margin-top:1.4rem}
@media (max-width:860px){.family-grid{grid-template-columns:1fr}}

.voice-band{background:var(--green);padding:clamp(5rem,9vw,8rem) 0;color:rgba(244,240,232,.8)}
.voice-band blockquote{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.3;color:var(--ivory);max-width:22em;margin-top:1.6rem}
.voice-band cite{display:block;font-style:normal;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;margin-top:1.8rem;color:rgba(245,241,232,.6)}

.costs{padding:clamp(5rem,9vw,8rem) 0}
.costs-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.costs h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-top:1.3rem;max-width:11em}
.costs p{font-size:1rem;max-width:30em;margin-top:1.2rem}
.cost-list{border-top:1px solid var(--hairline)}
.cost-list div{display:flex;justify-content:space-between;gap:1.5rem;padding:.85rem 0;border-bottom:1px solid var(--hairline);font-size:.95rem}
.cost-list dt{max-width:26em}
.cost-list dd{font-family:var(--serif);font-size:1.1rem;white-space:nowrap;color:var(--char)}
@media (max-width:820px){.costs-grid{grid-template-columns:1fr}.cost-list div{flex-direction:column;gap:.2rem}.cost-list dd{white-space:normal}}

.faq{padding:clamp(5rem,9vw,8rem) 0}
.faq-grid{display:grid;grid-template-columns:4fr 7fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.faq-grid .sticky{position:sticky;top:6rem}
.q{border-top:1px solid var(--hairline)}
.q:last-child{border-bottom:1px solid var(--hairline)}
.q button{width:100%;text-align:left;display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:baseline;padding:1.4rem 0;font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.45rem);color:var(--char)}
.q button .pm{font-family:var(--serif);font-style:italic;color:var(--gold);transition:transform .5s var(--ease)}
.q.on button .pm{transform:rotate(45deg)}
.q .a{max-height:0;overflow:hidden;transition:max-height .7s var(--ease),opacity .5s var(--ease);opacity:0}
.q.on .a{max-height:20em;opacity:1}
.q .a p{font-size:.95rem;max-width:34em;padding-bottom:1.4rem}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}.faq-grid .sticky{position:static}}

.pali-set{padding:clamp(4rem,7vw,6rem) 0;border-top:1px solid var(--hairline)}
.pali-set-list{list-style:none;margin-top:1.6rem;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.4vw,2.2rem)}
.pali-set-list a{display:block;border-top:1px solid var(--hairline);padding-top:1.1rem}
.pali-set-list .idx{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-style:normal;color:var(--taupe);margin-bottom:.6rem}
.pali-set-list .name{display:block;font-family:var(--serif);font-size:1.35rem;line-height:1.2;color:var(--char);transition:transform .5s var(--ease)}
.pali-set-list a:hover .name{transform:translateX(6px)}
.pali-set-list .tag{display:block;font-size:.88rem;color:var(--taupe);margin-top:.5rem;max-width:22em}
@media (max-width:1100px){.pali-set-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.pali-set-list{grid-template-columns:1fr}}

/* ---------- The Work ---------- */
.page-intro{padding:clamp(8rem,14vw,11rem) 0 clamp(2rem,4vw,3rem)}
.page-intro h1{font-size:clamp(2.4rem,5vw,4.2rem);max-width:12em;margin-top:1.4rem;letter-spacing:-.005em}
.page-intro p{max-width:34em;margin-top:1.4rem;font-size:1.02rem}
.gallery{padding:clamp(3rem,5vw,4rem) 0 clamp(6rem,10vw,9rem)}
.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.2rem,2.4vw,2.4rem)}
.g{display:block}
.g .media{overflow:hidden;background:var(--stone)}
.g .media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.g:hover .media img{transform:scale(1.035)}
.g h3{font-size:1.15rem;margin-top:.9rem}
.g p{font-size:.85rem;margin-top:.15rem}
.g.a{grid-column:span 7}.g.a .media{aspect-ratio:16/10}
.g.b{grid-column:span 5}.g.b .media{aspect-ratio:4/3.4}
.g.c{grid-column:span 4}.g.c .media{aspect-ratio:4/3}
.g.d{grid-column:span 6}.g.d .media{aspect-ratio:16/10}
.g.e{grid-column:span 8}.g.e .media{aspect-ratio:16/9}
.g.f{grid-column:span 4}.g.f .media{aspect-ratio:4/5}
@media (max-width:860px){.gallery-grid{display:block}.g + .g{margin-top:2.2rem}.g .media{aspect-ratio:16/11!important}}

/* ---------- components added 2026-09-13 for the full page set (About, Contact, How we build, the pillars, the
   town hub). Same tokens, same reveals; nothing new in the motion register. ---------- */
.team{padding:clamp(5rem,9vw,8rem) 0;background:var(--stone)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,3rem);margin-top:clamp(3rem,5vw,4.5rem)}
.member figure{overflow:hidden;background:var(--ivory);aspect-ratio:4/5;margin:0}
.member img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.member h3{font-size:1.35rem;margin-top:1.1rem}
.member .role{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--oxide);margin-top:.35rem;display:block}
.member p{font-size:.92rem;margin-top:.8rem;max-width:30em}
.member.wide{grid-column:span 3;display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.member.wide figure{aspect-ratio:4/5;max-height:640px}
.member.wide p{font-size:1rem;max-width:34em}
@media (max-width:1000px){.team-grid{grid-template-columns:repeat(2,1fr)}.member.wide{grid-column:span 2}}
@media (max-width:640px){.team-grid{grid-template-columns:1fr}.member.wide{grid-column:span 1;grid-template-columns:1fr}}

.marks{padding:clamp(4rem,7vw,6rem) 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.marks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3rem)}
.mark .big{font-family:var(--serif);font-size:clamp(2.1rem,3.6vw,3rem);color:var(--char);line-height:1}
.mark .lbl{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);margin-top:.7rem}
@media (max-width:820px){.marks-grid{grid-template-columns:repeat(2,1fr)}}

.contact{padding:clamp(5rem,9vw,8rem) 0}
.contact-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2.5rem,6vw,7rem);align-items:start}
.offices{list-style:none;margin-top:2rem;border-top:1px solid var(--hairline)}
.offices li{padding:1.2rem 0;border-bottom:1px solid var(--hairline)}
.offices .lbl{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--oxide);margin-bottom:.5rem}
.offices address{font-style:normal;font-size:1rem;line-height:1.6}
.offices a{text-decoration:underline;text-underline-offset:.2em}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1.6rem}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-bottom:.5rem}
.form input,.form textarea,.form select{width:100%;font:inherit;font-size:1rem;color:var(--char);background:transparent;border:0;border-bottom:1px solid var(--hairline);padding:.6rem 0;border-radius:0;outline:0;transition:border-color .3s}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--char)}
.form textarea{min-height:7em;resize:vertical}
.form fieldset{border:0;padding:0;margin:0}
.form fieldset legend{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-bottom:.6rem}
.form .choice{display:flex;gap:1.6rem;font-size:.95rem}
.form .choice label{display:inline-flex;align-items:center;gap:.5rem;font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--char);margin:0}
.form .choice input{width:auto;accent-color:var(--green)}
.form .submit{grid-column:1/-1;margin-top:.6rem;display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.form .note{font-size:.85rem;color:var(--taupe)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}.form{grid-template-columns:1fr}}

.towns{padding:clamp(5rem,9vw,8rem) 0}
.towns-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,3rem);margin-top:clamp(3rem,5vw,4.5rem)}
.town{display:block}
.town .media{overflow:hidden;background:var(--stone);aspect-ratio:4/5}
.town .media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.town:hover .media img{transform:scale(1.035)}
.town h3{font-size:1.35rem;margin-top:1rem}
.town p{font-size:.88rem;color:var(--taupe);margin-top:.3rem;max-width:22em}
.towns-list{list-style:none;margin-top:2rem;border-top:1px solid var(--hairline);columns:2;column-gap:3rem}
.towns-list li{break-inside:avoid;border-bottom:1px solid var(--hairline)}
.towns-list a{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 0;font-family:var(--serif);font-size:1.15rem;color:var(--char)}
.towns-list a span:last-child{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);font-family:var(--sans);align-self:center;white-space:nowrap}
@media (max-width:1000px){.towns-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.towns-grid{grid-template-columns:1fr}.towns-list{columns:1}}

.steps{padding:clamp(5rem,9vw,8rem) 0}
.step-row{display:grid;grid-template-columns:4rem 5fr 6fr;gap:clamp(1.5rem,3vw,3rem);padding:clamp(2rem,3.5vw,3rem) 0;border-top:1px solid var(--hairline);align-items:start}
.step-row:last-child{border-bottom:1px solid var(--hairline)}
.step-row .n{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.15rem;white-space:nowrap}
.step-row h3{font-size:clamp(1.4rem,2.2vw,1.9rem);max-width:12em}
.step-row p{font-size:.98rem;max-width:34em}
.step-row p + p{margin-top:.9rem}
.step-row ul{margin:.8rem 0 0 1.1rem;font-size:.95rem}
.step-row li + li{margin-top:.35rem}
@media (max-width:860px){.step-row{grid-template-columns:3rem 1fr}.step-row > div,.step-row p,.step-row ul{grid-column:2}.step-row h3{max-width:none}}

.band-photo{position:relative;height:clamp(360px,56vh,620px);overflow:hidden;background:var(--char);margin:0}
.band-photo img{width:100%;height:100%;object-fit:cover}
.band-photo figcaption{position:absolute;left:0;right:0;bottom:1.4rem;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,241,232,.7);text-shadow:0 1px 8px rgba(0,0,0,.5)}
/* crumbs on a light intro (the pages without a sharp hero photograph) */
.page-intro .crumbs{color:var(--taupe);margin-bottom:.5rem}
.page-intro .crumbs a:hover{color:var(--char)}
/* utilities the page set needed (2026-09-13), in place of inline styles */
.contain-cover{aspect-ratio:3/4;object-fit:contain;background:var(--stone)}
.h-sub{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-top:1.3rem;max-width:11em}
.mt-2{margin-top:2rem}
.mt-section{margin-top:clamp(3rem,5vw,4.5rem)}
.tall{aspect-ratio:4/5}
.lede-p{max-width:34em;margin-top:1.2rem;font-size:1.02rem}
.ruled.on-ivory{background:var(--ivory)}
@media (max-width:640px){.underway li{flex-direction:column;gap:.15rem}.underway li span:last-child{white-space:normal}}

/* ---------- What We Build rows with Mike's bullets (2026-09-14) ---------- */
.cap-row.deep{align-items:start}
.cap-row.deep .body p{margin-top:.6rem;max-width:30em}
.cap-row.deep ul{margin:0;padding-left:1.1rem;font-size:.9rem;color:var(--taupe);align-self:center}
.cap-row.deep li+li{margin-top:.4rem}
.ranges-note a{text-decoration:underline;text-underline-offset:.2em}
@media (max-width:820px){.cap-row.deep{grid-template-columns:3rem 1fr}.cap-row.deep ul{grid-column:2;margin-top:.9rem}}

/* ---------- Structural systems (2026-09-14, Mike's page) ---------- */
.systems{padding:clamp(3rem,6vw,5rem) 0 clamp(5rem,9vw,8rem)}
.sys{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,5vw,5rem);align-items:start;padding:clamp(3rem,5vw,4.5rem) 0;border-top:1px solid var(--hairline)}
.sys:nth-child(even) figure{order:2}
.sys figure{margin:0;overflow:hidden;background:var(--stone);position:sticky;top:6rem}
.sys img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.sys .idx{display:block}
.sys h2{font-size:clamp(1.8rem,3vw,2.6rem);margin:.6rem 0 1rem;max-width:12em}
.sys p{font-size:1rem;max-width:34em}
.rating{margin-top:1.8rem;border-top:1px solid var(--hairline)}
.rating div{display:grid;grid-template-columns:8.5rem 5.5rem 1fr;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--hairline);align-items:start}
.rating dt{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--oxide);padding-top:.3rem}
.rating dd{display:contents}
.rating .dia{font-size:.85rem;letter-spacing:.1em;white-space:nowrap;padding-top:.1rem}
.rating .dia b{color:rgba(46,46,46,.16);font-weight:400}
.rating .dia b.on{color:var(--gold)}
.rating .why{font-size:.88rem;color:var(--taupe);max-width:30em}
.best{margin-top:1.4rem;font-size:.95rem;background:var(--stone);padding:1rem 1.2rem;max-width:none}
.best b{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--oxide)}
@media (max-width:860px){.sys{grid-template-columns:1fr}.sys figure{position:static;order:0!important}.rating div{grid-template-columns:1fr;gap:.25rem}}
.closer{padding:clamp(5rem,9vw,8rem) 0;background:var(--stone)}
.closer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,3rem);margin-top:clamp(3rem,5vw,4.5rem)}
.closer-card{background:var(--ivory);padding:clamp(1.6rem,2.5vw,2.4rem);border-top:2px solid var(--gold)}
.closer-card .idx{display:block;font-style:normal;font-family:var(--sans);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--oxide)}
.closer-card h3{font-size:1.45rem;margin:.7rem 0 1rem;line-height:1.2}
.closer-card p{font-size:.95rem}
.closer-card p+p{margin-top:.9rem}
.closer-card h4{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-family:var(--sans);color:var(--oxide);margin:1.4rem 0 .6rem}
.closer-card ul{margin:0 0 0 1.1rem;font-size:.93rem}
.closer-card li+li{margin-top:.35rem}
.closer-card .close{margin-top:1.2rem;font-family:var(--serif);font-style:italic;color:var(--char)}
@media (max-width:1000px){.closer-grid{grid-template-columns:1fr}}

/* ---------- Where We Build: the map (2026-09-14). Mike's service-area map rebuilt as a live map: the counties draw
   in, the view glides from the region to the neighborhoods, the pins drop, the map tilts under the pointer. Script
   in assets/js/map.js, markup from build/map.py. ---------- */
.svc{padding:clamp(3rem,6vw,5rem) 0 clamp(2rem,4vw,3rem)}
.svc-stage{position:relative;aspect-ratio:5/3;margin-top:clamp(2rem,4vw,3rem);perspective:2000px;--rx:0deg;--ry:0deg}
.svc-map{width:100%;height:100%;display:block;background:var(--stone);transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform 1.1s var(--ease);box-shadow:0 30px 60px -30px rgba(31,51,41,.45);cursor:default}
.svc-map .sea{fill:var(--stone)}
.svc-map .land-grain{pointer-events:none}
.svc-map .ctx path{fill:#E3DDCE;stroke:rgba(46,46,46,.16);stroke-width:1;vector-effect:non-scaling-stroke}
.svc-map .under path{fill:#1F3329}
.svc-map .co{stroke:rgba(244,240,232,.5);stroke-width:1;vector-effect:non-scaling-stroke}
.svc-map .co.la{fill:#2F4A3C}.svc-map .co.ventura{fill:#3B5A4B}.svc-map .co.orange{fill:#4E6E5E}
.svc-map .edge{fill:none;stroke:var(--gold);stroke-width:1.5;vector-effect:non-scaling-stroke}
.svc-map .colab{font-family:var(--sans);font-size:44px;letter-spacing:.32em;text-transform:uppercase;fill:rgba(244,240,232,.78);text-anchor:middle;pointer-events:none;transition:opacity .6s}
.svc-map .sealab{font-family:var(--serif);font-style:italic;font-size:46px;letter-spacing:.06em;fill:rgba(98,92,82,.55);text-anchor:middle;pointer-events:none;transition:opacity .6s}
.svc-map .focus rect{fill:rgba(201,162,78,.07);stroke:var(--gold);stroke-width:2;stroke-dasharray:10 8;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .4s}
.svc-map .focus:hover rect,.svc-map .focus:focus rect{fill:rgba(201,162,78,.16)}
.svc-map .focus text{font-family:var(--sans);font-size:30px;letter-spacing:.28em;text-transform:uppercase;fill:var(--gold);pointer-events:none}
.svc-map .focus{outline:0;transition:opacity .5s}
.svc.zoomed .colab,.svc.zoomed .sealab,.svc.zoomed .focus{opacity:0;pointer-events:none}
.svc-map .pins{transition:opacity .4s}
.svc:not(.zoomed) .pins{opacity:0;pointer-events:none}
.svc-map .pin{outline:0;cursor:pointer}
.svc-map .pin .ring{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:.7;transform-origin:center;transform-box:fill-box}
.svc-map .pin .dot{fill:var(--gold);stroke:var(--ivory);stroke-width:1.6;transition:transform .4s var(--ease);transform-origin:center;transform-box:fill-box}
.svc-map .pin text{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.03em;fill:var(--ivory);paint-order:stroke;stroke:#1F3329;stroke-width:3.5px;stroke-linejoin:round;transition:fill .3s}
.svc-map .pin:hover .dot,.svc-map .pin.on .dot,.svc-map .pin:focus .dot{transform:scale(1.35)}
.svc-map .pin:hover text,.svc-map .pin.on text,.svc-map .pin:focus text{fill:var(--gold)}
.svc-map .pin:hover .ring,.svc-map .pin.on .ring,.svc-map .pin:focus .ring{animation:svc-pulse 1.5s var(--ease) infinite}
@keyframes svc-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.svc-legend{position:absolute;left:clamp(.8rem,2vw,1.6rem);top:clamp(.8rem,2vw,1.6rem);background:rgba(31,51,41,.94);color:var(--ivory);padding:.9rem 1.2rem;border:1px solid rgba(201,162,78,.55);pointer-events:none;display:grid;gap:.2rem}
.svc-legend .l1{font-family:var(--sans);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.svc-legend .l2{font-family:var(--serif);font-style:italic;font-size:1.05rem}
.svc-legend .l3{font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,240,232,.7)}
.svc-views{position:absolute;right:clamp(.8rem,2vw,1.6rem);top:clamp(.8rem,2vw,1.6rem);display:flex;gap:.35rem}
.svc-views button{font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:.7em 1em;border:1px solid rgba(46,46,46,.25);background:rgba(244,240,232,.9);color:var(--char);transition:background .3s,color .3s}
.svc-views button.on{background:var(--gold);color:#1F3329;border-color:var(--gold)}
.svc-cap{font-size:.88rem;color:var(--taupe);margin-top:1rem;max-width:44em}
/* the nameplate a tap opens on touch screens (2026-09-14) */
.svc-plate{position:absolute;z-index:6;background:rgba(31,51,41,.97);color:var(--ivory);padding:.75rem .8rem .75rem 1rem;border:1px solid rgba(201,162,78,.6);display:flex;align-items:center;gap:.9rem;box-shadow:0 14px 30px -10px rgba(0,0,0,.45);max-width:calc(100% - 16px);--ax:50%}
/* 2026-09-16: display:flex above was defeating the hidden attribute map.js uses, so the empty plate sat under the
   map on desktop since 09-14 (Caleb's screenshot). Author display rules must restate [hidden]. */
.svc-plate[hidden]{display:none}
.svc-plate::after{content:"";position:absolute;left:var(--ax);bottom:-7px;width:12px;height:12px;background:rgba(31,51,41,.97);border-right:1px solid rgba(201,162,78,.6);border-bottom:1px solid rgba(201,162,78,.6);transform:translateX(-50%) rotate(45deg)}
.svc-plate.below::after{bottom:auto;top:-7px;transform:translateX(-50%) rotate(-135deg)}
.svc-plate .name{font-family:var(--serif);font-size:1.05rem;line-height:1.2;white-space:nowrap}
.svc-plate .go{font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);white-space:nowrap;padding:.4em 0}
.svc-plate .x{color:rgba(244,240,232,.65);font-size:1.25rem;line-height:1;padding:0 0 0 .1rem}
.svc-tap{display:none}
@media (hover:none) and (max-width:760px){.svc-tap{display:inline}}
.towns-list a.on{color:var(--oxide)}
.towns-list a.on span:first-child{transform:translateX(6px)}
.towns-list a span:first-child{transition:transform .5s var(--ease)}
.towns-grid a.on h3{color:var(--oxide)}
/* the opening: the outlines draw, the fills follow, the pins drop */
.js .svc .co{opacity:0;transition:opacity 1.2s var(--ease) .7s}
.js .svc .under path{opacity:0;transition:opacity 1.2s var(--ease) .9s}
.js .svc.draw .co,.js .svc.draw .under path{opacity:1}
.js .svc .edge{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease),opacity .8s var(--ease) 1.4s}
.js .svc.draw .edge{stroke-dashoffset:0;opacity:.35}
.js .svc .pin-in{opacity:0;transform:translateY(-22px)}
.js .svc.in .pin-in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i)*70ms)}
@media (prefers-reduced-motion:reduce){
  .js .svc .co,.js .svc .under path,.js .svc .pin-in{opacity:1;transform:none;transition:none}
  .js .svc .edge{stroke-dashoffset:0;opacity:.35;transition:none}
  .svc-map{transition:none}
}
@media (max-width:760px){
  .svc-stage{aspect-ratio:1/1;perspective:none}
  .svc-map{transform:none!important;box-shadow:none}
  .svc-map .pin text{display:none}
  .svc-map .pin .ring{r:20}.svc-map .pin circle.dot{r:8}
  .svc-map .colab{font-size:60px}
  .svc-legend{padding:.6rem .8rem}.svc-legend .l2{font-size:.9rem}
  .svc-views{top:auto;bottom:.8rem;right:.8rem}
  .svc-views button{padding:.6em .7em;font-size:9px}
}

/* ---------- What We Build: the six kinds of work as framed prints (2026-09-16, image-led after Caleb's
   call that Mike's live page beat the text rows; his copy verbatim, his images served locally) ---------- */
.wb{padding:clamp(1rem,3vw,2rem) 0 clamp(4rem,7vw,6rem)}
.wb-row{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:clamp(3.5rem,7vw,6rem)}
.wb-row:first-child{margin-top:clamp(1rem,3vw,2rem)}
.wb-row:nth-child(even){grid-template-columns:5fr 7fr}
.wb-row:nth-child(even) .wb-fig{order:2}
.wb-fig{position:relative;margin:0}
.wb-fig::before{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid rgba(201,162,78,.55);pointer-events:none}
.wb-row:nth-child(even) .wb-fig::before{inset:14px 14px -14px -14px}
.wb-fig img{display:block;width:100%;height:auto;box-shadow:0 26px 50px -22px rgba(31,51,41,.5);position:relative}
.wb-txt .idx{display:block;margin-bottom:.9rem}
.wb-txt h2{font-size:clamp(1.7rem,2.6vw,2.3rem);max-width:10em}
.wb-txt h2::after{content:"";display:block;width:3.2rem;height:2px;background:var(--gold);margin-top:.85rem}
.wb-txt p{margin-top:1.1rem;font-size:.98rem;max-width:32em}
.wb-list{list-style:none;margin-top:1.3rem;display:grid;gap:.55rem}
.wb-list li{position:relative;padding-left:1.35rem;font-size:.92rem}
.wb-list li::before{content:"";position:absolute;left:2px;top:.48em;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.wb-txt .quiet-link{margin-top:1.5rem;display:inline-block}
@media (max-width:900px){
  .wb-row,.wb-row:nth-child(even){grid-template-columns:1fr;gap:1.7rem;margin-top:3.2rem}
  .wb-row:nth-child(even) .wb-fig{order:0}
  .wb-fig::before,.wb-row:nth-child(even) .wb-fig::before{inset:10px -8px -10px 8px}
}
/* honeypot (2026-09-17): a field no person sees; the handler drops anything that fills it */
.form .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}