/* Crossroads Community Planning — 2026 conversion */
@font-face{font-family:"Bebas Neue";src:url("../fonts/BebasNeue-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("../fonts/Poppins-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("../fonts/Poppins-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("../fonts/Poppins-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}

:root{
 --ink:#16261f;--body:#2b3a33;--muted:#54635b;
 --green:#056839;--green-dark:#034a28;--green-h1:#056839;
 --panel:rgba(244,244,242,.95);--cream:#f4f4f2;--rule:#d7d3c8;--accent:#a8302a;--slate:#263940;
 --wrap:1500px;--step:clamp(1rem,2.5vw,2.5rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--body);font-family:Poppins,sans-serif;font-size:1.0625rem;line-height:1.7;text-wrap:pretty;
 background:#000 url("../../images/color-rural.jpg") center center/cover no-repeat fixed}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:"Bebas Neue",sans-serif;font-weight:400;letter-spacing:.02em;line-height:1.02;margin:0 0 .5em}
h1{color:var(--green-h1);font-size:clamp(2.25rem,5.5vw,3.25rem)}
h2{color:var(--green-h1);font-size:clamp(1.625rem,3.2vw,2.125rem);margin-top:2.5rem}
h3{color:var(--ink);font-size:clamp(1.25rem,2vw,1.375rem);margin-top:2rem}
p{margin:0 0 1.15em}
a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--step)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:var(--green-dark);padding:.75rem 1.25rem;text-decoration:none;font-weight:600}
.skip:focus{left:.5rem;top:.5rem}

/* ---- header: green bar, seal only, pill nav, icon links ---- */
.hdr{background:var(--green);position:relative;z-index:30}
.hdr-in{display:flex;align-items:center;gap:1rem 1.25rem;min-height:96px;flex-wrap:wrap}
.brand{display:block;flex:0 0 auto;padding:.5rem 0;line-height:0}
.brand img{width:76px;height:76px}
.nav-btn{margin-left:auto;display:none;align-items:center;gap:.5rem;background:transparent;border:1px solid rgba(255,255,255,.85);color:#fff;font:inherit;font-size:1rem;padding:.6rem 1rem;border-radius:4px;cursor:pointer;min-height:44px}
.nav{margin-left:auto}
.nav ul{list-style:none;display:flex;flex-wrap:nowrap;gap:.4rem;margin:0;padding:0}
.nav li{list-style:none}
.nav a{display:flex;align-items:center;white-space:nowrap;color:#fff;text-decoration:none;font-size:.9375rem;line-height:1.2;padding:.65rem 1rem;min-height:44px;
 border:1px solid rgba(255,255,255,.85);border-radius:4px;background:transparent}
.nav a:hover{background:#fff;color:var(--green-dark)}
.nav a[aria-current=page]{background:#fff;color:var(--green-dark);font-weight:500}
@media(min-width:1200px){.nav a{padding:.65rem .85rem;font-size:.9rem}}
@media(max-width:1199px){
 .nav-btn{display:flex;justify-content:center;order:2;margin-left:0;flex:1 1 auto;width:auto}
 .nav{display:none;order:4;flex-basis:100%;margin:0}
 .nav.open{display:block;border-top:1px solid rgba(255,255,255,.28)}
 .nav ul{flex-direction:column;flex-wrap:nowrap;gap:0;width:100%}
 .nav li{width:100%}
 .nav li+li{border-top:1px solid rgba(255,255,255,.18)}
 .nav a{display:flex;align-items:center;width:100%;white-space:normal;border:0;border-radius:0;background:transparent;
  padding:.9rem .25rem;font-size:1rem;letter-spacing:.01em;min-height:48px}
 .nav a:hover{background:transparent;color:#fff;text-decoration:underline;text-underline-offset:4px}
 .nav a[aria-current=page]{background:transparent;color:#fff;font-weight:600;box-shadow:inset 3px 0 0 #fff;padding-left:.9rem}
}

/* ---- hero: keeps the seal over the fixed landscape ---- */
.hero{position:relative}
.hero--photo{background-position:center center;background-size:cover;background-repeat:no-repeat}
.hero--photo::after{content:"";position:absolute;inset:0;background:rgba(5,74,40,.45)}
.hero--photo .hero-in{position:relative;z-index:1}
.hero-in{display:flex;justify-content:center;padding:clamp(2.5rem,7vw,6rem) var(--step) clamp(2rem,5vw,4rem)}
.hero-in img{width:clamp(150px,24vw,290px);height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}

/* ---- the page panel that slides over the background ---- */
main{display:block}
.page{padding:0 0 clamp(3rem,7vw,5rem)}
.panel{background:var(--panel);padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,4vw,4rem) clamp(2.5rem,6vw,4rem);
 box-shadow:0 10px 40px rgba(0,0,0,.22)}
.banner{background:var(--green-dark);color:#fff;padding:clamp(1.5rem,3vw,2.25rem) clamp(1.5rem,3vw,2.5rem);margin:0 0 clamp(1.75rem,3vw,2.5rem)}
.banner p{margin:0;font-size:clamp(1.0625rem,1.35vw,1.1875rem);line-height:1.75;color:#fff}
.fig-left{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:start;margin:2rem 0}
.fig-left>figure{margin:0}
.fig-left>figure img{width:100%;max-width:460px}
.fig-left>div>:first-child{margin-top:0}
@media(max-width:760px){.fig-left{grid-template-columns:minmax(0,1fr)}}
.fig-right{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:start;margin:2rem 0}
.fig-right>div>:first-child{margin-top:0}
.fig-right>.fig-stack{display:grid;gap:1.25rem}
.fig-right figure{margin:0}
.fig-right figure img{width:100%;height:auto;max-width:330px}
@media(max-width:760px){.fig-right{grid-template-columns:minmax(0,1fr)}}
.more{display:inline-block;margin:.25rem 0 0;padding:.6rem 1.35rem;background:var(--green-dark);color:#fff;text-decoration:none;font-family:"Bebas Neue",Impact,sans-serif;letter-spacing:.06em;font-size:1.0625rem;line-height:1.2;transition:background .25s ease,transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease}
.more:hover,.more:focus-visible{background:#034526;color:#fff;transform:translateY(-2px);box-shadow:0 6px 14px rgba(22,38,31,.22)}
.more:hover .more-arrow{transform:translateX(4px)}
.more:active{transform:translateY(0);box-shadow:0 2px 5px rgba(22,38,31,.2)}
.more-arrow{display:inline-block;margin-left:.5rem;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){.more,.more-arrow{transition:none}.more:hover,.more:focus-visible{transform:none}}
.link-cols{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.65rem 2.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.link-cols>li{margin:0;display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--rule);padding:0 0 .65rem}
.link-cols>li::before{content:"";flex:0 0 auto;width:.5rem;height:.5rem;background:var(--green);border-radius:50%}
.link-cols a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;font-weight:500}
.link-cols a:hover{text-decoration:underline;text-underline-offset:3px}
.link-cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.link-cols--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.link-cols,.link-cols--3{grid-template-columns:minmax(0,1fr)}}
.lede{font-size:clamp(1.0625rem,1.3vw,1.125rem);color:var(--ink)}
.prose{max-width:none}
.prose>:first-child{margin-top:0}
figure{margin:2rem 0}
figure img{width:100%}
figcaption{font-size:.9rem;color:var(--muted);margin-top:.5rem}
ul,ol{margin:0 0 1.15em;padding-left:1.25rem}
li{margin:.35em 0}
hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}
.callout{border-left:4px solid var(--green);padding:.25rem 0 .25rem 1.5rem;margin:2rem 0;max-width:none}
.callout>:first-child{margin-top:0}
.callout h2,.callout h3{margin-top:0}
.callout--accent{border-left-color:var(--accent)}
.client-mark{max-width:170px;margin:0 0 1.5rem}
.eyebrow{margin:0 0 .5rem;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.projects{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.5rem 2rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.projects a{display:grid;grid-template-columns:64px minmax(0,1fr);gap:1rem;align-items:center;text-decoration:none;color:var(--ink);padding:.75rem 0;border-bottom:1px solid var(--rule);min-height:72px}
.projects a:hover{color:var(--accent)}
.projects img{width:64px;height:64px;object-fit:contain;background:#fff;padding:4px;border-radius:3px}
.projects span{font-size:1rem;line-height:1.3}
.wide{max-width:none}
.proj-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,3vw,3rem);align-items:start;
 padding-bottom:1.5rem;border-bottom:1px solid var(--rule);margin-bottom:1.75rem}
@media(max-width:700px){.proj-head{grid-template-columns:1fr}}
.proj-head .eyebrow{margin:0 0 .5rem;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green-dark)}
.proj-head h1{margin:0}
.proj-mark{display:flex;align-items:center;justify-content:center}
.proj-mark img{display:block;max-height:210px;width:auto;max-width:340px;object-fit:contain;margin:0}
.proj-list{list-style:none;margin:1.25rem 0;padding:0;display:grid;gap:.75rem 2rem;
 grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.proj-list>li{position:relative;padding-left:1.5rem;line-height:1.6}
.proj-list>li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;background:var(--green);border-radius:50%}
.fig-cap{margin:2rem auto}
.fig-cap img{width:100%;height:auto;display:block}
.fig-aside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2rem;align-items:start;margin:2rem 0}
.fig-aside>.fig-cap,.fig-pair>.fig-cap{margin:0;max-width:100%!important}
.fig-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;align-items:stretch;margin:2rem 0}
.fig-pair>.fig-cap{background:#fff;padding:1.5rem;display:flex;align-items:center;justify-content:center}
.fig-pair>.fig-cap img{width:100%;height:auto;max-height:320px;object-fit:contain}
@media(max-width:760px){.fig-aside,.fig-pair{grid-template-columns:minmax(0,1fr);gap:1.5rem}
 .fig-aside>.fig-cap{order:-1}}
.proj-list--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem 2rem}
.proj-list--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 2.5rem}
.proj-list--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem 1.5rem}
.proj-list--full{grid-template-columns:minmax(0,1fr);margin-top:0}
.sub-list{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.5rem}
.sub-list>li{position:relative;padding-left:1.25rem;line-height:1.6}
.sub-list>li::before{content:"";position:absolute;left:.25rem;top:.62em;width:.35rem;height:.35rem;border:1px solid var(--green);border-radius:50%}
@media(max-width:1024px){.proj-list--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.proj-list--3{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.proj-list--2{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.proj-list--4{grid-template-columns:minmax(0,1fr)}}
.fig-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;align-items:center;margin:2rem 0}
.fig-trio>figure{margin:0;background:#fff;padding:1rem;display:flex;align-items:center;justify-content:center}
.fig-trio img{width:100%;height:auto;max-height:260px;object-fit:contain}
@media(max-width:760px){.fig-trio{grid-template-columns:minmax(0,1fr)}}
.fig-pair--photo>.fig-cap{background:none;padding:0}
.fig-pair--photo>.fig-cap img{max-height:none;aspect-ratio:1/1;object-fit:cover}
.proj-result{background:#fff}
.proj-result p{margin:0;font-size:1.0625rem;color:var(--ink)}
.project-cards{list-style:none;margin:clamp(1.5rem,3vw,2.5rem) 0 0;padding:0;display:flex;flex-wrap:wrap;
 justify-content:center;gap:clamp(1.25rem,2vw,2rem)}
.project-cards>li{flex:1 1 260px;max-width:340px;display:flex}
@media(max-width:600px){.project-cards>li{flex:1 1 100%;max-width:none}}
.project-cards a{width:100%;display:grid;grid-template-rows:auto auto 1fr;gap:.75rem;height:100%;background:#fff;
 padding:1.5rem 1.5rem 1.75rem;text-decoration:none;color:var(--body);border-radius:2px;
 box-shadow:0 1px 3px rgba(22,38,31,.12);transition:box-shadow .15s,transform .15s}
.project-cards a:hover{box-shadow:0 8px 22px rgba(22,38,31,.18);transform:translateY(-2px)}
.project-cards a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.pc-mark{display:flex;align-items:center;justify-content:center;height:96px;background:#fff}
.pc-mark img{max-height:96px;width:auto;max-width:100%;object-fit:contain}
.project-cards h3{margin:0;font-size:clamp(1.25rem,1.6vw,1.375rem);color:var(--green-h1);line-height:1.08}
.project-cards p{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted)}
.project-cards a:hover h3{color:var(--accent)}
.intro-cards{list-style:none;margin:clamp(2rem,4vw,3rem) 0;padding:0;display:grid;gap:clamp(1.5rem,2.5vw,2.5rem);
 grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1024px){.intro-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.intro-cards{grid-template-columns:1fr}}
.intro-cards a{display:grid;grid-template-rows:auto auto 1fr;gap:.6rem;height:100%;text-decoration:none;color:var(--body)}
.intro-cards img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px}
.intro-cards h2{margin:.4rem 0 0;font-size:clamp(1.375rem,1.8vw,1.5rem);color:var(--green-h1);line-height:1.05;
 display:inline-block;border-bottom:2px solid transparent;transition:border-color .15s}
.intro-cards p{margin:0;font-size:.9375rem;line-height:1.6}
.intro-cards a:hover h2{color:var(--accent);border-bottom-color:var(--accent)}
.intro-cards img{transition:opacity .15s}
.intro-cards a:hover img{opacity:.88}
.intro-cards a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.person{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:1.5rem 2.5rem;align-items:start;padding:2.5rem 0;border-top:1px solid var(--rule)}
.person img{width:100%;border-radius:2px}
.person>div>:first-child{margin-top:0}
.person h2{margin-bottom:.15em}
.person .role{margin:0 0 1rem;color:var(--muted);font-size:.9375rem;letter-spacing:.04em;text-transform:uppercase}
.person-links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:0 0 1.25rem;padding:0;list-style:none}
.person-links a{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;font-size:.9375rem}
.person-links svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
@media(max-width:640px){.person{grid-template-columns:1fr}.person img{max-width:220px}}
.doclist{list-style:none;margin:1rem 0 0;padding:0}
.doclist li{margin:0;border-bottom:1px solid var(--rule)}
.doclist a{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 0;min-height:44px}

/* ---- footer ---- */
.ft{background:var(--cream);margin-top:clamp(3rem,8vw,6rem);position:relative;padding:0}
.ft-seal{display:flex;justify-content:center;margin:0;transform:translateY(-45%)}
.ft-seal img{width:clamp(96px,11vw,150px);height:auto}
.ft-grid{display:grid;gap:2.5rem 4rem;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1.1fr);
 align-items:start;margin-top:clamp(-2.5rem,-2vw,-1rem);padding-top:1rem;border-top:1px solid var(--rule)}
@media(max-width:900px){.ft-grid{grid-template-columns:1fr;gap:2rem}}
.ft-col h2{font-family:"Bebas Neue",sans-serif;font-size:1.3125rem;letter-spacing:.08em;text-transform:uppercase;
 color:var(--ink);margin:0 0 .85rem;line-height:1.1}
.ft-col p{font-size:.9375rem;line-height:1.75;color:var(--body);margin:0 0 1rem;max-width:56ch}
.ft-col a{color:var(--green-dark);text-decoration:none}
.ft-col a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ft-contact a{display:inline-block;padding:.2rem 0;font-weight:500}
.ft-links ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ft-links li{margin:0;border-bottom:1px solid var(--rule)}
.ft-links a{display:block;padding:.55rem 0;font-size:.9375rem;min-height:40px;line-height:1.5}
.ft-social{display:flex;gap:.35rem;margin:.25rem 0 0;padding:0;list-style:none}
.ft-social a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--slate)}
.ft-social a:hover{color:var(--accent)}
.ft-social svg{width:24px;height:24px;fill:currentColor}
.ft-legal{background:var(--green);color:#fff;padding:1.25rem 0;text-align:center;margin-top:clamp(2rem,4vw,3rem)}
.ft-legal a{color:#fff;text-decoration:none}
.ft-legal a:hover{text-decoration:underline;text-underline-offset:3px}
.ft-legal p{margin:0;font-size:.9375rem;line-height:1.9}
.ft-sep{display:inline-block;margin:0 .65rem;color:#fff}
@media(max-width:560px){.ft-sep{display:block;height:0;margin:0;overflow:hidden}}
.ext::after{content:"\2197";font-size:.85em;margin-left:.15em}

@media print{.hdr,.nav,.hero,.skip,.ft-seal{display:none}body{background:#fff;font-size:11pt}.panel{box-shadow:none;background:#fff;padding:0}}
