/* New Solutions Developments, LLC — shared site styles
   Brand: monochrome 5-shade grayscale (#0E0E0E #2B2B2B #555555 #BEBEBE #FFFFFF) · Montserrat
   Rebuilt 2026-09-18 for the government / commercial repositioning. */
:root{
  --ink:#0e0e0e; --ink-2:#2b2b2b; --mid:#555555; --light:#bebebe; --line:#e3e3e3;
  --bg:#ffffff; --bg-alt:#f4f4f4; --black:#0e0e0e; --black-2:#080808;
  --maxw:2200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Montserrat',sans-serif;font-weight:700;line-height:1.12;color:var(--ink);letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,120px)}
.eyebrow{font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;color:var(--mid)}
.dim{color:var(--light);font-size:.82rem}
.btn{display:inline-block;font-weight:600;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;padding:15px 30px;border-radius:2px;transition:.2s;cursor:pointer;border:1.5px solid transparent;text-align:center}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{background:transparent;color:#fff;border-color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:60;background:var(--black);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px clamp(20px,5vw,120px);max-width:2200px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand .mark{width:46px;height:auto}
.brand .bt{line-height:1.05}
.brand .bt .n{font-weight:700;font-size:.98rem;color:#fff;letter-spacing:.06em;text-transform:uppercase}
.brand .bt .s{display:block;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--light);margin-top:4px}
nav ul{list-style:none;display:flex;align-items:center;gap:22px}
nav ul a{font-size:.82rem;font-weight:500;color:#e9eaec;letter-spacing:.04em;padding:6px 0;position:relative;white-space:nowrap;text-transform:uppercase}
nav ul a:hover{color:var(--light)}
nav ul a.active{color:#fff}
nav ul a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#fff}
.nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.phone-pill{border:1px solid rgba(255,255,255,.45);border-radius:2px;padding:9px 16px;font-weight:600;font-size:.86rem;color:#fff;letter-spacing:.03em}
.phone-pill:hover{border-color:#fff}
.nav-cta{background:#fff;color:var(--ink);border-radius:2px;padding:10px 18px;font-weight:600;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
.nav-cta:hover{background:var(--light)}
.hamb{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer}
@media(max-width:1500px){ .brand .bt .s{display:none} }
/* Header fit, 1081-1679px (2026-10-06): the full header only fit at 1600px and wider - at 1280/1366/1440/1536
   (most laptops) "Request a Proposal" ran off the right edge. Tighten the gutters and gaps in steps so the
   whole header is on screen at every width; the drawer menu now starts at 1200px instead of 1080px. */
@media(max-width:1679px){ .nav{gap:14px;padding-left:clamp(16px,2vw,32px);padding-right:clamp(16px,2vw,32px)} nav ul{gap:16px} nav ul a{font-size:.78rem} }
@media(max-width:1480px){ .phone-pill{display:none} }
@media(max-width:1320px){ nav ul{gap:12px} nav ul a{font-size:.74rem} .brand .bt .n{font-size:.88rem} .nav-cta{padding:10px 13px;font-size:.76rem} }
@media(max-width:1200px){
  nav#primary{position:fixed;inset:62px 0 auto 0;background:var(--black-2);transform:translateY(-130%);transition:.3s;border-bottom:1px solid rgba(255,255,255,.1)}
  nav#primary.open{transform:translateY(0)}
  nav#primary ul{flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 18px}
  nav#primary ul a{display:block;width:100%;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:.9rem}
  nav#primary ul a.active::after{display:none}
  .hamb{display:block}
  .nav-cta{display:none}
}
@media(max-width:640px){ .brand .bt .n{font-size:.78rem} .nav{padding:10px 16px} }
@media(max-width:430px){ .brand .bt{display:none} }

/* ---------- HERO (home) ---------- */
.hero{position:relative;color:#fff;min-height:640px;display:flex;align-items:center;
  background:
    linear-gradient(180deg,rgba(8,8,8,.70) 0%,rgba(8,8,8,.62) 40%,rgba(8,8,8,.88) 100%),
    url('images/hero.jpg'),
    linear-gradient(135deg,#0e0e0e 0%,#2b2b2b 55%,#0e0e0e 100%);
  background-size:cover;background-position:center;}
.hero::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 39h40M39 0v40' stroke='%23ffffff' stroke-opacity='0.035' stroke-width='1'/%3E%3C/svg%3E");pointer-events:none}
.hero .wrap{position:relative;z-index:2;padding-top:88px;padding-bottom:88px}
.hero .eyebrow{color:var(--light)}
.hero h1{color:#fff;font-size:clamp(2.2rem,5vw,4.4rem);font-weight:800;max-width:16ch;margin:18px 0 0;letter-spacing:-.02em}
.hero p.sub{font-size:clamp(1.02rem,1.5vw,1.22rem);max-width:64ch;margin:22px 0 0;color:#e8e8e8;font-weight:300}
.hero .cta-row{margin-top:34px}
.hero .trust{margin-top:44px;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:.78rem;color:#cfcfcf;letter-spacing:.06em;text-transform:uppercase}
.hero .trust span{display:flex;align-items:center;gap:8px}
.hero .trust span::before{content:"";width:6px;height:6px;background:#fff}

/* ---------- FAST FACTS BAND ---------- */
.facts-band{background:var(--bg-alt);border-bottom:1px solid var(--line);padding:0}
.facts{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.facts .f{padding:22px 18px 22px 0;border-right:1px solid var(--line);margin-right:18px}
.facts .f:last-child{border-right:0}
.facts .k{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);font-weight:600}
.facts .v{font-size:.92rem;font-weight:600;color:var(--ink);margin-top:5px}
@media(max-width:1200px){.facts{grid-template-columns:repeat(3,1fr)} .facts .f:nth-child(3){border-right:0}}
@media(max-width:640px){.facts{grid-template-columns:repeat(2,1fr)} .facts .f{border-right:0;padding:16px 0}}

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{position:relative;color:#fff;padding:110px 0 70px;
  background:linear-gradient(180deg,rgba(8,8,8,.78),rgba(8,8,8,.9)),linear-gradient(135deg,#0e0e0e,#2b2b2b 60%,#0e0e0e);
  background-size:cover;background-position:center;}
.page-hero .wrap{position:relative;z-index:2}
.page-hero .eyebrow{color:var(--light)}
.page-hero h1{color:#fff;font-size:clamp(1.9rem,4vw,3.2rem);margin-top:12px;font-weight:800;letter-spacing:-.02em;max-width:22ch}
.page-hero p{color:#d6d6d6;max-width:66ch;margin-top:14px;font-size:1.06rem;font-weight:300}

/* ---------- SECTIONS ---------- */
section{padding:84px 0}
.section-alt{background:var(--bg-alt)}
.section-dark{background:var(--black);color:#f2f2f2}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark .eyebrow{color:var(--light)}
.section-dark .lead-head .sub{color:#cfcfcf}
.lead-head{max-width:960px}
.lead-head h2{font-size:clamp(1.8rem,3.4vw,2.8rem);margin:14px 0 0;letter-spacing:-.02em}
.lead-head .sub{font-size:1.08rem;color:var(--mid);font-weight:400;margin-top:14px}
.prose p{color:var(--ink-2);margin-top:18px;font-size:1.02rem;max-width:80ch}
.prose h3{margin-top:34px;font-size:1.4rem}
.center{text-align:center}
.center .lead-head{margin:0 auto}

/* cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:46px}
.cards.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.cards.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.cards,.cards.three{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:2px;padding:32px 28px;transition:.2s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ink);transform:scaleY(0);transform-origin:top;transition:.25s}
.card:hover{box-shadow:0 18px 50px -26px rgba(0,0,0,.35);transform:translateY(-3px)}
.card:hover::before{transform:scaleY(1)}
.card .num{font-size:.7rem;color:var(--mid);font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.card h3{font-size:1.22rem;margin:10px 0 12px}
.card p{color:var(--ink-2);font-size:.96rem}
.card ul{margin:14px 0 0;padding-left:18px;color:var(--mid);font-size:.9rem}
.card ul li{margin-top:6px}
.card .more{display:inline-block;margin-top:16px;font-size:.78rem;font-weight:600;color:var(--ink);letter-spacing:.08em;text-transform:uppercase}

/* trades grid (dark) */
.trades{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);margin-top:44px}
@media(max-width:1000px){.trades{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.trades{grid-template-columns:1fr}}
.trade{background:var(--black);padding:30px 28px}
.trade h3{font-size:1.08rem;color:#fff;letter-spacing:.02em}
.trade p{color:#bdbdbd;font-size:.92rem;margin-top:10px}

/* deliver / process */
.deliver{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
@media(max-width:900px){.deliver{grid-template-columns:1fr;gap:34px}}
.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:18px;padding:18px 0;border-top:1px solid var(--line)}
.steps li:first-child{border-top:0}
.steps li .n{flex-shrink:0;width:42px;height:42px;border:1.5px solid var(--ink);color:var(--ink);display:grid;place-items:center;font-weight:700}
.steps li h4{font-size:1.05rem;color:var(--ink);margin-bottom:4px}
.steps li p{color:var(--mid);font-size:.94rem;margin:0}

/* credentials band */
.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);overflow:hidden;margin-top:48px}
@media(max-width:1100px){.creds{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.creds{grid-template-columns:1fr}}
.creds .c{background:#fff;padding:28px 22px;text-align:left}
.creds .c .t{font-size:1.15rem;color:var(--ink);font-weight:800;letter-spacing:-.01em;word-break:break-word}
.creds .c .l{font-size:.78rem;color:var(--ink-2);margin-top:8px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.creds .c .d{font-size:.8rem;color:var(--mid);margin-top:6px}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
@media(max-width:1000px){.reviews{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.reviews{grid-template-columns:1fr}}
.quote{background:#fff;border:1px solid var(--line);border-radius:2px;padding:30px 28px;display:flex;flex-direction:column}
.quote .stars{color:var(--ink);letter-spacing:3px;font-size:.95rem}
.quote p{color:var(--ink-2);font-size:.96rem;margin:14px 0 18px;flex:1}
.quote .who{font-weight:600;font-size:.88rem;color:var(--ink);letter-spacing:.02em}

/* areas */
.areas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.areas a,.areas span{border:1px solid var(--line);background:#fff;border-radius:2px;padding:12px 20px;font-weight:500;font-size:.92rem;transition:.2s}
.areas a:hover{border-color:var(--ink)}
.areas.dark a,.areas.dark span{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}

/* map + city grid */
.map-frame{margin-top:32px;border:1px solid var(--line);overflow:hidden;height:460px;background:#0e0e0e}
.hq-sq{width:18px;height:18px;background:#fff;outline:2px solid #0e0e0e}
.leaflet-container{font-family:'Montserrat',sans-serif}
.city-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
@media(max-width:1000px){.city-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.city-grid{grid-template-columns:1fr}}
.city-card{border:1px solid var(--line);border-radius:2px;padding:20px;background:#fff;transition:.2s;display:block}
.city-card:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 14px 36px -22px rgba(0,0,0,.4)}
.city-card .cn{font-weight:700;font-size:1.08rem;color:var(--ink)}
.city-card .cs{font-size:.82rem;color:var(--mid);margin-top:4px}
.city-card .cgo{font-size:.72rem;color:var(--ink);font-weight:600;margin-top:12px;display:inline-block;letter-spacing:.08em;text-transform:uppercase}

/* FAQ */
.faq{max-width:900px;margin:40px auto 0}
details{background:#fff;border:1px solid var(--line);border-radius:2px;margin-bottom:12px;overflow:hidden}
details summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:600;font-size:1rem;color:var(--ink);display:flex;justify-content:space-between;gap:16px;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--mid);font-size:1.4rem;font-weight:300;flex-shrink:0;transition:.2s}
details[open] summary::after{transform:rotate(45deg)}
details .a{padding:0 24px 22px;color:var(--ink-2);font-size:.96rem}

/* CTA band */
.cta-band{background:var(--black);color:#fff;text-align:center}
.cta-band h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.02em}
.cta-band p{color:#c9c9c9;max-width:58ch;margin:14px auto 0}
.cta-band .cta-row{justify-content:center;margin-top:26px}

/* capability statement */
.capstmt{padding-top:64px}
.capgrid{display:grid;grid-template-columns:1.25fr .95fr;gap:48px;align-items:start}
@media(max-width:1000px){.capgrid{grid-template-columns:1fr} .capgrid>*{min-width:0}}
/* Small phones (2026-10-06): on the 404 page the e-mail address (one 296px word) made the page 334px wide on a
   320px screen. The column may shrink, and under 354px - where the address cannot fit on a line of its own - it
   may break after its @ (a <wbr> in the markup, switched off everywhere else so no other width changes). */
@media(min-width:354px){ ul.tight wbr{display:none} }
@media(max-width:353px){ ul.tight a{overflow-wrap:anywhere} }
.capstmt h2{font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:8px;margin:34px 0 14px}
.capstmt h2:first-child{margin-top:0}
.tight{padding-left:18px;color:var(--ink-2);font-size:.96rem}
.tight li{margin-top:7px}
.capdata{background:var(--bg-alt);border:1px solid var(--line);padding:30px 28px}
.capdata h2{margin-top:0}
.capdata dl{display:grid;grid-template-columns:130px 1fr;gap:10px 16px;font-size:.9rem}
.capdata dt{font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);padding-top:3px}
.capdata dd{color:var(--ink-2);word-break:break-word}

/* request a proposal / contact */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:50px}
/* Phone fit (2026-10-06): a 1fr grid track will not shrink below its content. One <select> option ("Residential
   Program - Housing Authority / Agency") is 443px wide, so on a 390px phone the bid form was laid out 471px wide
   and its right edge - fields, arrows, the Submit button - was cut off. In the single-column layout it may shrink. */
@media(max-width:1000px){.split{grid-template-columns:1fr;gap:36px} .split>*{min-width:0}}
form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){form .grid2{grid-template-columns:1fr}}
.field{margin-top:16px}
label{display:block;font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
label .req{color:var(--mid)}
input,select,textarea{width:100%;font-family:inherit;font-size:.96rem;padding:13px 14px;border:1px solid var(--light);border-radius:2px;background:#fff;color:var(--ink);transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(14,14,14,.08)}
textarea{resize:vertical;min-height:130px}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:.82rem;color:var(--mid);text-transform:none;letter-spacing:0;font-weight:500}
.consent input{width:auto;margin-top:3px}
.form-note{font-size:.8rem;color:var(--mid);margin-top:14px}
.form-card{background:#fff;border:1px solid var(--line);border-radius:2px;padding:34px 32px}
#formMsg{margin-top:16px;padding:14px 16px;border-radius:2px;font-size:.92rem;display:none}
#formMsg.ok{display:block;background:#f0f0f0;border:1px solid var(--ink);color:var(--ink)}
#formMsg.err{display:block;background:#fff4f2;border:1px solid #c33;color:#8a1f16}
.contact-card{background:var(--black);color:#e9e9e9;border-radius:2px;padding:36px 32px}
.contact-card h3{color:#fff;font-size:1.3rem;letter-spacing:.02em}
.contact-card .row{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1);align-items:flex-start}
.contact-card .row:last-of-type{border-bottom:0}
.contact-card .row .k{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--light);min-width:104px;padding-top:3px;font-weight:600}
.contact-card .row .v{font-size:.94rem}
.contact-card a:hover{text-decoration:underline}
/* Phone fit (2026-10-06): the e-mail address is one unbreakable 289px word; beside its label it ran past the edge
   of the card and the screen. On phones the label sits above the value so the address gets the full width; it may
   break after the @ (a <wbr> in the markup, switched off above 560px so the desktop columns do not move) and, as a
   last resort on a 320px screen, anywhere. Nothing changes above 560px. */
@media(min-width:561px){ .contact-card wbr{display:none} }
@media(max-width:560px){ .contact-card{padding:30px 24px} .contact-card .row{flex-direction:column;gap:5px} .contact-card .row .k{min-width:0;padding-top:0} .contact-card .row .v{min-width:0;max-width:100%;overflow-wrap:anywhere} }
@media(max-width:340px){ .contact-card{padding:26px 18px} .contact-card .row .v{font-size:.86rem} }
.emergency{margin-top:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);border-radius:2px;padding:14px 16px;font-size:.9rem;color:#fff}

/* footer */
footer{background:var(--black-2);color:#b9b9b9;padding:64px 0 30px;font-size:.88rem}
.fgrid{display:grid;grid-template-columns:1.3fr .9fr 1.3fr;gap:40px}
@media(max-width:900px){.fgrid{grid-template-columns:1fr;gap:30px}}
footer h4{color:#fff;font-size:.8rem;margin-bottom:14px;letter-spacing:.16em;text-transform:uppercase}
footer a:hover{color:#fff}
footer ul{list-style:none}
footer ul li{margin-bottom:9px}
.flogo{width:240px;height:auto;margin-bottom:18px}
.fcontact{margin-top:16px;line-height:1.8}
.credlist li{font-size:.84rem;line-height:1.45}
.credlist strong{color:#fff;font-weight:600}
.fbar{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.76rem;color:#8a8a8a}

/* ---------- PHOTOS / MEDIA ---------- */
.photo{position:relative;overflow:hidden;min-height:280px;border:1px solid var(--line);
  background-color:#2b2b2b;background-image:linear-gradient(135deg,#0e0e0e,#2b2b2b 60%,#0e0e0e);background-size:cover;background-position:center;background-repeat:no-repeat}
.photo.cap::after{content:attr(data-cap);position:absolute;left:0;right:0;bottom:0;padding:16px 18px;font-size:.78rem;font-weight:600;color:#fff;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(0deg,rgba(8,8,8,.85),transparent)}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}
@media(max-width:820px){.work-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.work-grid{grid-template-columns:1fr}}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
@media(max-width:900px){.feature{grid-template-columns:1fr;gap:30px}}
.feature .photo{min-height:420px}
/* photo strips (2026-09-20) */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:34px}
.strip .photo{min-height:320px}
.strip.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.section-dark .strip .photo{border-color:rgba(255,255,255,.14)}
@media(max-width:600px){.strip,.strip.n4{grid-template-columns:1fr;gap:14px}.strip .photo{min-height:250px}}

/* ---------- COLOR-ON-CURSOR effect (site renders grayscale; a color lens follows the cursor) ---------- */
#colorlens{
  position:fixed; inset:0; z-index:50; pointer-events:none;
  -webkit-backdrop-filter:grayscale(1); backdrop-filter:grayscale(1);
  --mx:-600px; --my:-600px; --r:230px;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my), rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, #000 78%);
          mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my), rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, #000 78%);
  transition:opacity .5s ease;
}
@media (hover:none),(pointer:coarse){ #colorlens{display:none} }
@media (prefers-reduced-motion:reduce){ #colorlens{display:none} }
@supports not ((backdrop-filter:grayscale(1)) or (-webkit-backdrop-filter:grayscale(1))){ #colorlens{display:none} }

/* ---------- PRINT (capability statement) ---------- */
@media print{
  header,footer,.cta-band,#colorlens,.page-hero .cta-row{display:none!important}
  .page-hero{background:#fff!important;color:#000;padding:0 0 12px}
  .page-hero h1,.page-hero p,.page-hero .eyebrow{color:#000!important}
  section{padding:12px 0}
  .capgrid{grid-template-columns:1fr 1fr;gap:24px}
  .capdata{border:1px solid #000;background:#fff}
  body{font-size:11pt}
}


/* ---------- FLOATING BACK ARROW (2026-09-21, Michael) ----------
   Permanent, floating, every page, phone + desktop. Brand: ink square, 2px radius, Montserrat-free icon.
   Pinned at the left edge just under the sticky header (--hdr is measured by app.js so it tracks the real
   header height at every width). Thin light border keeps it readable on the dark hero bands; the ink fill
   keeps it readable on white sections. Hover inverts, like .btn-dark / .btn-light. */
.backfab{position:fixed;left:16px;top:calc(var(--hdr,64px) + 14px);z-index:55;width:44px;height:44px;
  display:grid;place-items:center;background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.35);
  border-radius:2px;box-shadow:0 12px 30px -14px rgba(0,0,0,.6);opacity:.94;transition:background .2s,color .2s,border-color .2s,opacity .2s,transform .2s}
.backfab svg{width:20px;height:20px;display:block}
.backfab:hover,.backfab:focus-visible{background:#fff;color:var(--ink);border-color:var(--ink);opacity:1;transform:translateX(-2px);outline:none}
.backfab.is-hidden{display:none}
@media(max-width:640px){.backfab{left:12px;width:42px;height:42px;top:calc(var(--hdr,62px) + 12px)}}
@media print{.backfab{display:none}}


/* ---------- SWaM CERTIFICATE FEATURE (2026-10-06, Michael) ----------
   The certificate SBSD issued + the official Certified SWaM logo. Both are third-party government marks,
   so they are shown unaltered: z-index 51 lifts them above the grayscale color lens (#colorlens, z 50),
   which makes the certification the one thing on the page in true color. Header (60) and the lightbox (80)
   still sit above. Works on the dark band, the light band and white. */
#swam{scroll-margin-top:calc(var(--hdr,64px) + 10px)}
.swam{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
@media(max-width:900px){.swam{grid-template-columns:1fr;gap:30px}}
.certfig{position:relative;z-index:51;display:block;background:#fff;border:1px solid var(--line);padding:10px;box-shadow:0 26px 60px -34px rgba(0,0,0,.55);transition:transform .25s,box-shadow .25s}
.certfig img{width:100%;height:auto}
.certfig:hover,.certfig:focus-visible{transform:translateY(-3px);box-shadow:0 34px 70px -34px rgba(0,0,0,.7);outline:none}
.certzoom{display:block;margin-top:10px;background:var(--ink);color:#fff;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:10px 12px;text-align:center}
.swamtext h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-top:12px;letter-spacing:-.02em}
.swamtext .sub{color:var(--ink-2);margin-top:16px;font-size:1.04rem;max-width:62ch}
.swamfacts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;margin-top:26px;border:1px solid var(--line);background:#fff}
.swamfacts div{padding:16px 22px;border-right:1px solid var(--line)}
.swamfacts div:last-child{border-right:0}
.swamfacts dt{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);font-weight:600}
.swamfacts dd{font-size:1.02rem;font-weight:800;color:var(--ink);margin-top:5px;letter-spacing:-.01em}
@media(max-width:1280px){.swamfacts{grid-template-columns:1fr;justify-content:stretch}.swamfacts div{border-right:0;border-bottom:1px solid var(--line)}.swamfacts div:last-child{border-bottom:0}}
.swamrow{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px}
.swamlogo{position:relative;z-index:51;width:210px;height:auto;background:#fff;padding:8px;border:1px solid var(--line)}
.section-dark .swamtext .sub{color:#cfcfcf}
.section-dark .certfig{border-color:rgba(255,255,255,.2)}
.section-dark .swamfacts{background:transparent;border-color:rgba(255,255,255,.2)}
.section-dark .swamfacts div{border-color:rgba(255,255,255,.2)}
.section-dark .swamfacts dt{color:var(--light)}
.section-dark .swamfacts dd{color:#fff}
.section-dark .swamlogo{border-color:transparent}
/* footer badge - every page */
.fswam{display:inline-flex;flex-direction:column;gap:8px;margin-top:22px}
.fswam img{position:relative;z-index:51;width:172px;height:auto;background:#fff;padding:6px;border-radius:2px}
.fswam span{font-size:.72rem;color:#8a8a8a;letter-spacing:.06em}
.fswam:hover span{color:#fff}
/* lightbox - the certificate full size, true color */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(8,8,8,.93);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(14px,4vw,56px)}
.lightbox img{max-width:min(1600px,100%);max-height:calc(100vh - 150px);width:auto;height:auto;background:#fff;box-shadow:0 30px 90px -30px #000}
.lightbox .lbcap{color:#d6d6d6;font-size:.82rem;letter-spacing:.06em;margin-top:16px;text-align:center}
.lightbox .lbx{position:absolute;top:16px;right:18px;width:44px;height:44px;background:#fff;color:var(--ink);border:0;border-radius:2px;font-size:1.6rem;line-height:1;cursor:pointer}
.lightbox .lbx:hover,.lightbox .lbx:focus-visible{background:var(--light);outline:none}
body.lb-open{overflow:hidden}
@media print{.lightbox,.certzoom{display:none!important}.certfig,.swamlogo{box-shadow:none}}