:root{
  --navy:#0793a1; --navy-2:#0793a1; --navy-3:#0793a1;
  --orange:#f48847; --orange-2:#e0733a; --teal:#0793a1;
  --ink:#1f2933; --muted:#5b6770; --line:#e3e8ec; --bg:#ffffff; --bg-2:#f5f7f9;
  --head:"Oswald","Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --max:1180px; --r:6px; --shadow:0 10px 30px rgba(7,147,161,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* 1rem, not 16px: the accessibility panel scales text by changing the root font
   size, and a px value on body would pin the whole page against it. */
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.6;font-size:1rem}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--head);text-transform:uppercase;letter-spacing:.01em;line-height:1.05;margin:0 0 .5em;color:var(--navy);font-weight:600}
h1{font-size:clamp(2.4rem,5.2vw,4.2rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
h3{font-size:1.25rem;font-weight:600}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;color:var(--orange);font-size:.85rem;font-weight:600;margin-bottom:.6rem;display:block}
.accent{color:var(--orange)}
.rule{width:56px;height:3px;background:var(--orange);margin:1.2rem 0 1.4rem;border:0}
.center{text-align:center}
.center .rule{margin-left:auto;margin-right:auto}
.lead{font-size:1.08rem;color:var(--muted);max-width:640px}
.center .lead{margin-left:auto;margin-right:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:.86rem;font-weight:600;padding:.85rem 1.35rem;border-radius:3px;border:2px solid transparent;cursor:pointer;line-height:1;transition:.18s;text-decoration:none!important}
.btn svg{width:14px;height:14px;transition:transform .18s}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn-primary:hover{background:var(--orange-2);border-color:var(--orange-2)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-outline-light:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-outline-orange{background:#fff;color:var(--orange);border-color:var(--orange)}
.btn-outline-orange:hover{background:var(--orange);color:#fff}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}

/* header */
.topbar{background:var(--navy-3);color:#e6f4f6;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:34px;gap:16px}
.topbar a{color:#fff}
.topbar .left{display:flex;gap:22px;flex-wrap:wrap}
.header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 var(--line)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:84px;gap:20px}
.brand img{height:54px;width:auto}
.nav{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.nav>li{position:relative}
.nav a{display:block;white-space:nowrap;padding:12px 12px;font-family:var(--head);text-transform:uppercase;letter-spacing:.09em;font-size:.82rem;font-weight:600;color:var(--navy);text-decoration:none}
.nav a:hover,.nav li.active>a{color:var(--orange)}
.nav .has-sub>a::after{content:"";display:inline-block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:7px;position:relative;top:-3px}
.nav .sub{position:absolute;top:100%;left:0;min-width:230px;background:#fff;box-shadow:var(--shadow);border-top:3px solid var(--orange);list-style:none;margin:0;padding:8px 0;display:none}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{display:block}
.nav .sub a{padding:10px 18px;letter-spacing:.06em;font-size:.8rem;white-space:nowrap}
.nav .sub a:hover{background:var(--bg-2)}
.header .cta{margin-left:10px}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:8px}
.burger span{display:block;height:2px;background:var(--navy);margin:7px 0;transition:.2s}
@media (max-width:980px){
  .header .cta{display:none}
  .burger{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 0 16px;box-shadow:var(--shadow);display:none;max-height:calc(100vh - 84px);overflow:auto}
  .nav.open{display:flex}
  .nav a{padding:12px 24px;font-size:.95rem}
  .nav .sub{position:static;display:block;box-shadow:none;border:0;padding:0 0 4px 12px}
  .nav .sub a{font-size:.85rem;color:var(--muted)}
  .nav li.mobile-cta{padding:10px 24px}
  .topbar .left span:nth-child(2){display:none}
}
.mobile-cta{display:none}
@media (max-width:980px){.mobile-cta{display:block}}

/* hero */
.hero{position:relative;background:var(--bg-2);overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.05fr 1fr;min-height:560px;align-items:center;gap:40px}
.hero .copy{padding:70px 0 120px;position:relative;z-index:2}
.hero .photo{position:absolute;right:0;top:0;bottom:0;width:52%;z-index:1}
.hero .photo img{width:100%;height:100%;object-fit:cover}
.hero .photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg-2) 0%,rgba(245,247,249,.6) 12%,rgba(245,247,249,0) 40%)}
.hero .mtn{position:absolute;left:0;right:0;bottom:-2px;z-index:3;width:100%;height:auto;pointer-events:none}
.hero h1{margin-bottom:.2em}
.hero .lead{margin-bottom:1.6rem}
@media (max-width:900px){
  .hero .grid{grid-template-columns:1fr;min-height:0}
  .hero .photo{position:relative;width:100%;height:260px}
  .hero .photo::before{background:none}
  .hero .copy{padding:40px 0 90px}
}
.hero-inner{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero-inner .wrap{padding:76px 24px 110px;position:relative;z-index:2;max-width:var(--max)}
.hero-inner h1{color:#fff}
.hero-inner .lead{color:#eaf6f8}
.hero-inner .bg{position:absolute;inset:0;z-index:0}
.hero-inner .bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.hero-inner .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,110,120,.95) 30%,rgba(6,110,120,.55) 100%)}
.hero-inner .mtn{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:auto;z-index:1}
.crumbs{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#ffe2c9;font-family:var(--head);margin-bottom:1rem}
.crumbs a{color:#ffe2c9}

/* stats bar */
.stats{border-bottom:1px solid var(--line);background:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.stat{display:flex;align-items:center;gap:12px;padding:26px 16px;border-left:1px solid var(--line);font-family:var(--head);text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;color:var(--navy);line-height:1.25;font-weight:600}
.stat:first-child{border-left:0}
.stat svg{width:34px;height:34px;flex:none;color:var(--orange)}
@media (max-width:980px){.stats .wrap{grid-template-columns:repeat(3,1fr)}.stat:nth-child(4){border-left:0}}
@media (max-width:560px){.stats .wrap{grid-template-columns:repeat(2,1fr)}.stat:nth-child(odd){border-left:0}}

/* sections */
.section{padding:80px 0}
.section.tight{padding:56px 0}
.section.alt{background:var(--bg-2)}
.section-head{margin-bottom:44px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){.cards,.cards.three{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards,.cards.three,.cards.two{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.2s;position:relative}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.card .ph{aspect-ratio:4/3;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.card .body p{color:var(--muted);font-size:.93rem;flex:1}
.card .more{font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;color:var(--orange);font-weight:600;text-decoration:none}
.card .more:hover{text-decoration:underline}
.card .icon{width:54px;height:54px;border-radius:50%;background:var(--navy);display:grid;place-items:center;margin:-27px 0 12px;position:relative;z-index:2;color:#fff;border:3px solid #fff}
.card .icon svg{width:24px;height:24px}
.card h3{font-size:1.15rem}

/* projects */
.projects{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:980px){.projects{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.projects{grid-template-columns:1fr}}
.project{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--navy);display:block;text-decoration:none!important}
.project img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.project:hover img{transform:scale(1.05)}
.project .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 12px 12px;background:linear-gradient(180deg,rgba(7,147,161,0),rgba(7,147,161,.96) 55%);color:#fff;text-align:center}
.project .cap b{display:block;font-family:var(--head);text-transform:uppercase;font-size:.9rem;letter-spacing:.06em;font-weight:600}
.project .cap span{font-size:.78rem;color:#e6f4f6}
.projects.wide{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.projects.wide{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.projects.wide{grid-template-columns:1fr}}

/* industries
   --icols comes from build.py, which picks the widest column count that divides the
   number of tiles exactly, so both rows come out full (ten industries = 5 + 5, not the
   old 6 + 4). The dividers are the 1px grid gap with the rule colour showing through
   from the container behind the opaque tiles: that draws every internal rule and no
   outer one at any column count, without the stack of :nth-child rules the old
   fixed-column version needed. */
.industries{display:grid;grid-template-columns:repeat(var(--icols,5),1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.industry{padding:26px 8px;text-align:center;background:var(--bg);font-family:var(--head);text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;color:var(--navy);font-weight:600;line-height:1.25;text-decoration:none!important}
.industry svg{width:38px;height:38px;color:var(--orange);margin:0 auto 10px;display:block}
.industry:hover{background:var(--bg-2)}
/* squares off a short last row; see industry_grid() in build.py */
.ifill{background:var(--bg)}
@media (max-width:980px){.industry{padding:22px 6px;font-size:.68rem}.industry svg{width:32px;height:32px}}
@media (max-width:620px){.industries{grid-template-columns:repeat(2,1fr)}.industry{padding:24px 10px;font-size:.74rem}.industry svg{width:36px;height:36px}}

/* about split */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.split .photo{position:relative;min-height:380px}
.split .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .text{padding:64px 56px;background:#fff;position:relative;overflow:hidden}
.split .text .lead{font-size:.98rem}
.split .text.on-bg{background:var(--bg-2)}
@media (max-width:900px){.split{grid-template-columns:1fr}.split .text{padding:44px 24px}}
.split.flip .photo{order:2}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:900px){.two-col{grid-template-columns:1fr;gap:32px}}
.two-col .pic{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.two-col .pic img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.checks{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:10px}
.checks li{padding-left:30px;position:relative;color:var(--ink)}
.checks li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:var(--orange)}
.checks li::after{content:"";position:absolute;left:5px;top:9px;width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* cta band */
.cta-band{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.cta-band .wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:70px 24px 120px;flex-wrap:wrap}
.cta-band h2{color:#fff;margin-bottom:.35em}
.cta-band p{color:#eaf6f8;max-width:520px;margin:0}
.cta-band .mtn{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:auto;z-index:1;opacity:.95}

/* footer */
.footer{background:var(--navy);border-top:1px solid rgba(255,255,255,.12);color:#e6f4f6;font-size:.9rem}
.footer .wrap{display:grid;grid-template-columns:1.4fr 1.2fr 1fr 1fr .8fr;gap:32px;padding:56px 24px 40px}
@media (max-width:900px){.footer .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer .wrap{grid-template-columns:1fr}}
.footer h2{color:#fff;font-size:.85rem;letter-spacing:.14em;margin-bottom:1rem}
.footer a{color:#ffffff;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer .contact li{display:flex;gap:10px;align-items:flex-start}
.footer .contact svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--orange)}
.footer .brand img{height:64px;margin-bottom:12px}
.footer .social{display:flex;gap:10px}
.footer .social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center}
.footer .social a:hover{background:var(--orange)}
.footer .social svg{width:18px;height:18px;fill:#fff}
.footer .bottom{border-top:1px solid rgba(255,255,255,.18);text-align:center;padding:16px 24px;font-size:.78rem;color:#d6eef1}
.footer .swam{margin-top:14px;background:#fff;border-radius:4px;padding:6px;display:inline-block}
.footer .swam img{height:46px;width:auto}

/* content pages */
.prose{max-width:760px}
.prose p{color:#3b4650}
.prose h2{margin-top:2rem}
.svc-block{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.svc-block:first-child{border-top:0}
.svc-block.flip .pic{order:2}
.svc-block .pic{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.svc-block .pic img{aspect-ratio:4/3;object-fit:cover;width:100%}
@media (max-width:900px){.svc-block{grid-template-columns:1fr;gap:26px}.svc-block.flip .pic{order:0}}
.feature-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.feature-list{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.feature-list{grid-template-columns:1fr}}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.feature svg{width:34px;height:34px;color:var(--orange);margin-bottom:12px}
.feature h3{font-size:1.1rem}
.feature p{color:var(--muted);font-size:.93rem;margin:0}
.quote{border-left:4px solid var(--orange);padding:6px 0 6px 22px;font-size:1.25rem;font-family:var(--head);text-transform:uppercase;color:var(--navy);max-width:720px;margin:1.6rem 0}

/* team */
.team{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 24px}
.member{flex:0 1 calc(25% - 18px);min-width:200px}
@media (max-width:900px){.member{flex-basis:calc(50% - 12px)}}
.member{text-align:center}
.member .ph{aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--bg-2);margin-bottom:14px}
.member .ph img{width:100%;height:100%;object-fit:cover}
.member .ph.blank{display:grid;place-items:center;color:var(--navy);font-family:var(--head);font-size:2.6rem;font-weight:600;background:linear-gradient(160deg,#e9eef2,#d7e0e6)}
.member b{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;color:var(--navy);font-size:1.05rem}
.member span{font-size:.82rem;color:var(--orange);text-transform:uppercase;letter-spacing:.1em;font-family:var(--head);font-weight:600}
.member p{font-size:.88rem;color:var(--muted);margin-top:10px;text-align:left}

/* service area */
.towns-head{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .9rem}
.towns{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 24px;list-style:none;padding:0;margin:0 0 1.6rem}
@media (max-width:700px){.towns{grid-template-columns:repeat(2,1fr)}}
.towns li{padding-left:26px;position:relative;font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;color:var(--navy);font-weight:600}
.towns li svg{position:absolute;left:0;top:4px;width:16px;height:16px;color:var(--orange)}
.map{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/10}
.map iframe{width:100%;height:100%;border:0;display:block}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
label{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;font-family:var(--head);color:var(--navy);font-weight:600;margin-bottom:6px}
input,select,textarea{width:100%;font:inherit;padding:12px 14px;border:1px solid #c9d2d9;border-radius:4px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--orange);outline-offset:0;border-color:var(--orange)}
textarea{min-height:140px;resize:vertical}
.form-note{font-size:.82rem;color:var(--muted)}
.form-msg{display:none;padding:14px 16px;border-radius:4px;margin-top:14px;font-size:.95rem}
.form-msg.ok{display:block;background:#e6f6ee;color:#14603a}
.form-msg.err{display:block;background:#fdecec;color:#8f1d1d}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:48px}
@media (max-width:900px){.contact-cards{grid-template-columns:1fr}}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;gap:16px;align-items:flex-start}
.contact-card svg{width:30px;height:30px;color:var(--orange);flex:none}
.contact-card b{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;color:var(--navy)}
.contact-card a,.contact-card span{color:var(--ink)}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:36px;box-shadow:var(--shadow)}
@media (max-width:640px){.panel{padding:24px 18px}}
.tabs{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.tab{font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;font-weight:600;padding:10px 18px;border:2px solid var(--navy);border-radius:3px;background:#fff;color:var(--navy);cursor:pointer}
.tab.active{background:var(--navy);color:#fff}
.radio-row{display:flex;gap:18px;flex-wrap:wrap;padding-top:6px}
.radio-row label{display:inline-flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0;font-family:var(--body);font-weight:400;font-size:.95rem;color:var(--ink)}
.radio-row input{width:auto}
.badge{display:inline-block;background:#fff3ea;color:var(--orange-2);font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;padding:4px 10px;border-radius:999px;font-weight:600}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:var(--head);text-transform:uppercase;letter-spacing:.04em;color:var(--navy);font-size:1.05rem;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--orange);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{color:var(--muted);margin:10px 0 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===== v2: Class A repositioning ===== */
.hero .rotator{font-family:var(--head);text-transform:uppercase;font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:.12em;color:var(--navy);margin:0 0 1rem;min-height:1.6em;font-weight:600}
.hero .rotator .w{display:inline-block;color:var(--orange);animation:wfade .5s ease}
@keyframes wfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cred-bar{background:var(--navy-2);color:#fff}
.cred-bar .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:0}
.cred{display:flex;align-items:center;gap:10px;padding:16px 22px;font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;font-weight:600;border-left:1px solid rgba(255,255,255,.12)}
.cred:first-child{border-left:0}
.cred svg{width:22px;height:22px;color:var(--orange)}
@media (max-width:700px){.cred{padding:12px 14px;border-left:0;flex:1 1 45%}}
.stats-row{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media (max-width:900px){.stats-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.stats-row{grid-template-columns:repeat(2,1fr)}}
.stat-tile{background:#fff;border:1px solid var(--line);border-top:4px solid var(--orange);border-radius:var(--r);padding:24px 18px;text-align:center}
.stat-tile b{display:block;font-family:var(--head);font-size:2.4rem;color:var(--navy);line-height:1;font-weight:600}
.stat-tile b.tbd{color:#c3ccd3}
.stat-tile span{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:var(--muted);margin-top:8px;font-weight:600}
.why{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:900px){.why{grid-template-columns:1fr;gap:30px}}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.why-tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.why-tile svg{width:30px;height:30px;color:var(--orange);margin-bottom:8px}
.why-tile b{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;color:var(--navy);font-size:1.05rem}
.why-tile p{margin:6px 0 0;color:var(--muted);font-size:.9rem}
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media (max-width:900px){.logos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.logos{grid-template-columns:repeat(2,1fr)}}
.logo-slot{aspect-ratio:5/3;border:1px dashed #c3ccd3;border-radius:var(--r);display:grid;place-items:center;text-align:center;padding:12px;font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:#7b8892;background:#fff;font-weight:600}
.logo-slot img{max-height:60px;width:auto;filter:grayscale(1);opacity:.75}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.testimonials{grid-template-columns:1fr}}
.testimonial{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;position:relative}
.testimonial::before{content:"\201C";position:absolute;top:8px;left:18px;font-family:Georgia,serif;font-size:4rem;color:#f5d3bd;line-height:1}
.testimonial p{position:relative;color:#3b4650;font-size:.97rem}
.testimonial .who{font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--navy);font-weight:600}
.testimonial .who span{display:block;color:var(--orange)}
.testimonial .stars{color:var(--orange);letter-spacing:2px;font-size:.9rem;margin-bottom:8px}
.cap-list{columns:2;column-gap:32px;list-style:none;padding:0;margin:0 0 1.4rem}
.cap-list li{break-inside:avoid;padding:6px 0 6px 26px;position:relative;border-bottom:1px solid var(--line);font-size:.95rem}
.cap-list li::before{content:"";position:absolute;left:0;top:13px;width:14px;height:14px;border-radius:50%;background:var(--orange)}
.cap-list li::after{content:"";position:absolute;left:4px;top:16px;width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
@media (max-width:560px){.cap-list{columns:1}}
.trades{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.trades li{background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.85rem;font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;color:var(--navy);font-weight:600}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr}
.pcard+.pcard{margin-top:28px}
.pcard .ph{position:relative;min-height:320px}
.pcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcard .info{padding:32px 34px}
.pcard .info h3{font-size:1.5rem}
.pcard dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:16px 0 20px;font-size:.93rem}
.pcard dt{font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--orange);font-weight:600;padding-top:3px}
.pcard dd{margin:0;color:#3b4650}
.pcard dd.tbd{color:#9aa7b0;font-style:italic}
@media (max-width:900px){.pcard{grid-template-columns:1fr}.pcard .ph{min-height:240px}.pcard .info{padding:24px 22px}}
.ba{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--x,50%))}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:3px;background:#fff;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.ba .handle::after{content:"\2039\203A";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:1.3rem;letter-spacing:2px}
.ba .tag{position:absolute;top:12px;padding:4px 10px;background:rgba(7,147,161,.9);color:#fff;font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;border-radius:3px}
.ba .tag.l{left:12px}.ba .tag.r{right:12px}
.safety-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:700px){.safety-list{grid-template-columns:1fr}}
.note-preview{background:#fff8e6;border:1px dashed #e2c36b;color:#7a5a00;font-size:.82rem;padding:8px 12px;border-radius:4px;margin:0 0 16px}
.footer .wrap{grid-template-columns:1.4fr 1.2fr 1fr 1fr 1fr}
.portal-links{display:none}
@media (max-width:980px){.portal-links{display:flex;flex-wrap:wrap;gap:6px 18px;border-top:1px solid var(--line);margin-top:6px}}
.portal-links a{padding:8px 0!important;font-size:.8rem!important;color:var(--muted)!important}
/* residential photo gallery (portrait tiles) */
.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:1100px){.pgrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:800px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.pgrid{grid-template-columns:repeat(2,1fr)}}
.pgrid a{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r);background:var(--bg-2)}
.pgrid img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pgrid a:hover img{transform:scale(1.04)}
.pgrid a.wide{grid-column:span 2;aspect-ratio:auto}
@media (max-width:980px){.topbar .right{display:none}.topbar .left span{white-space:nowrap}}
/* video hero */
.hero-video{background:var(--navy);color:#fff;min-height:640px;display:flex;align-items:center}
.hero-video .bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-video .veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,110,120,.9) 0%,rgba(6,110,120,.75) 38%,rgba(6,110,120,.35) 70%,rgba(6,110,120,.25) 100%)}
.hero-video .wrap{position:relative;z-index:2;width:100%}
.hero-video .copy{max-width:640px;padding:90px 0 150px}
.hero-video h1{color:#fff}
.hero-video .rotator{color:#fff}
.hero-video .lead{color:#eaf6f8}
.hero-video .mtn{z-index:3}
@media (max-width:900px){.hero-video{min-height:0}.hero-video .copy{padding:56px 0 120px}.hero-video .veil{background:linear-gradient(180deg,rgba(6,110,120,.88),rgba(6,110,120,.7))}}
@media (prefers-reduced-motion:reduce){.hero-video .bgvid{display:none}.hero-video{background:var(--navy) url(../img/hero-cville-poster.jpg) center/cover}}
/* footer: responsive override (the 5-col rule above was beating the media queries) */
@media (max-width:900px){.footer .wrap{grid-template-columns:1fr 1fr;gap:28px 24px;padding:44px 24px 32px}.footer .brand{grid-column:1/-1}.footer .brand div{max-width:none}}
@media (max-width:560px){.footer .wrap{grid-template-columns:1fr 1fr;gap:24px 18px}.footer .brand{grid-column:1/-1}.footer .bottom{font-size:.74rem;line-height:1.6}.footer .bottom{padding:14px 18px}}
@media (max-width:380px){.footer .wrap{grid-template-columns:1fr}}
/* phone-width polish */
@media (max-width:560px){
  .stats-row .stat-tile:last-child:nth-child(odd){grid-column:1/-1}
  .why-grid{grid-template-columns:1fr}
  .cred{font-size:.72rem}
  .contact-cards{gap:12px}
  .hero-video .copy{padding:48px 0 110px}
  h1{font-size:2.3rem}
  .section{padding:56px 0}
  .pcard dl{grid-template-columns:1fr;gap:2px 0}.pcard dt{margin-top:8px}
}
/* bigger logo */
.brand img{height:74px}
.header .wrap{min-height:100px}
.footer .brand img{height:84px;margin-bottom:14px}
@media (max-width:980px){.brand img{height:60px}.header .wrap{min-height:84px}.nav{max-height:calc(100vh - 100px)}}
/* fewer icons on the home and commercial pages: keep the industry pictograms, drop the decorative ones */
.page-index .cred svg,.page-commercial .cred svg,.page-index .card .icon,.page-index .why-tile svg,.page-commercial .feature svg{display:none}
.page-index .card .body{padding-top:24px}
.cred{gap:0}
/* logo: larger still (SVG cropped to artwork) */
.brand img{height:88px}
.header .wrap{min-height:110px}
.footer .brand img{height:96px}
@media (max-width:980px){.brand img{height:66px}.header .wrap{min-height:88px}.nav{max-height:calc(100vh - 88px)}}

/* teal-background tweaks */
.hero-inner .eyebrow,.hero-video .eyebrow,.cta-band .eyebrow{color:#f8b348}
.hero-video .rotator .w{color:#f8b348}
.footer h2{color:#fff}
.cred{border-left-color:rgba(255,255,255,.25)}
/* fewer icons, site-wide: keep social icons, button arrows and the nav caret only */
.industry svg,.feature svg,.why-tile svg,.cred svg,.card .icon,.contact-card svg,.footer .contact svg,.stat svg,.towns li svg{display:none}
.card .body{padding-top:24px}
.towns li{padding-left:14px}.towns li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.industry{padding:22px 10px}
/* plainer list bullets */
.checks li{padding-left:18px}.checks li::before{width:7px;height:7px;top:9px;left:2px}.checks li::after{display:none}
.cap-list li{padding-left:18px}.cap-list li::before{width:7px;height:7px;top:16px;left:2px}.cap-list li::after{display:none}
/* room for the taller ridge line */
.mtn{height:clamp(64px,13.2vw,190px)!important}
.hero-inner .wrap{padding-bottom:215px}
.cta-band .wrap{padding-bottom:215px}
.hero-video .copy{padding-bottom:225px}
.hero .copy{padding-bottom:225px}
@media (max-width:900px){.hero-inner .wrap{padding-bottom:110px}.cta-band .wrap{padding-bottom:110px}.hero-video .copy{padding-bottom:110px}}
.footer .swam img{height:46px}
/* static tagline with a rolling highlight (reads correctly when static) */
.tagline{font-family:var(--head);text-transform:uppercase;font-size:clamp(1rem,1.7vw,1.35rem);letter-spacing:.12em;margin:0 0 1rem;font-weight:600;color:rgba(255,255,255,.55)}
.tagline button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;transition:color .4s}
.tagline button.on{color:#f8b348}
.tagline button:hover{color:#f8b348}
.tagline button:focus-visible{outline:2px solid #f8b348;outline-offset:3px}
/* the rule below the tagline doubles as the underline for the highlighted word:
   main.js sets its width and offset to match, and it slides between words. It falls
   back to the plain 56px bar when the tagline wraps or JS is off. */
.tagline-rule{margin-top:.6rem;transition:width .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.tagline-rule{transition:none}}
/* 3D logo ring */
.ring-wrap{perspective:1400px;height:260px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ring{position:relative;width:220px;height:140px;transform-style:preserve-3d;animation:spin 28s linear infinite}
.ring:hover{animation-play-state:paused}
.ring .face{position:absolute;inset:0;margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;backface-visibility:hidden;transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(calc(110px / tan(3.14159rad / var(--n)) + 40px))}
.ring .face img{max-height:64px;max-width:170px;object-fit:contain}
.ring .face figcaption{font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;color:var(--muted)}
@keyframes spin{from{transform:rotateY(0)}to{transform:rotateY(-360deg)}}
@media (prefers-reduced-motion:reduce){.ring{animation:none}}
.ring-wrap{overflow:visible;height:320px}
.ring{width:250px;height:150px}
.ring .face{transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(calc(125px / tan(3.14159rad / var(--n)) + 60px))}
/* ring v2: JS-driven rotation (auto + drag + wheel + arrows) */
.ring{animation:none!important;transition:none;will-change:transform;cursor:grab;touch-action:pan-y}
.ring.dragging{cursor:grabbing}
.ring-wrap{position:relative;user-select:none}
@media (max-width:700px){.ring{width:200px;height:120px}.ring .face{transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(calc(100px / tan(3.14159rad / var(--n)) + 50px))}.ring-wrap{height:260px}}
/* no arrows: the ring is drag, wheel and auto-rotate only, so nothing is reserved
   below it and the block is 90px shorter than it was */
.ring-wrap{height:260px;padding-bottom:0}
/* mobile audit fixes: ring must never widen the page; roomier tap targets */
.ring-wrap{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden}
html,body{overflow-x:clip}
.footer ul{gap:0}.footer ul li{padding:5px 0}.footer .contact li{padding:5px 0}
.card .more{display:inline-block;padding:8px 0}
.crumbs a{display:inline-block;padding:6px 0}
.portal-links a{padding:10px 0!important}
/* phones: the 3D ring becomes a flat swipe strip (a 14-face ring is wider than the screen) */
@media (max-width:700px){
  .ring-wrap{height:auto;padding:0 0 12px;perspective:none;overflow:visible;width:auto;margin:0}
  .ring{transform:none!important;width:auto;height:auto;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:6px 24px 14px;scrollbar-width:none;cursor:default;touch-action:pan-x pan-y}
  .ring::-webkit-scrollbar{display:none}
  .ring .face{position:relative;inset:auto;transform:none!important;flex:0 0 58%;aspect-ratio:5/3;scroll-snap-align:center;backface-visibility:visible}
  .ring .face img{max-height:56px;max-width:80%}
}
/* photo hero, no ridge */
.hero-video .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:0}
.hero-photo .copy{padding:110px 0 120px}
.hero-inner .wrap{padding-bottom:90px}
.cta-band .wrap{padding-bottom:80px}
@media (max-width:900px){.hero-photo .copy{padding:64px 0 72px}.hero-inner .wrap{padding-bottom:64px}.cta-band .wrap{padding-bottom:64px}}
@media (min-width:701px){.ring-wrap{padding-top:16px;height:290px}}

/* ================= ring v3: sharp logos + bokeh depth of field ================= */
/* Why the logos looked blurry: faces were laid out at 250x150 and then magnified
   ~2.2x by the 1400px perspective (radius ~769px), so every front-facing logo was
   an upscaled raster. Fix is two-part: a longer perspective (less magnification)
   and 2x supersampling - each face is laid out at double size and drawn back down
   with scale(.5), so the rasterized layer carries more detail than the projection
   asks for. Geometry is unchanged: the rendered card is still 250x150 at the same
   radius, so translateZ keeps the 125px half-width. */
@media (min-width:701px){
  .ring-wrap{perspective:2600px}
  .ring{width:500px;height:300px}
  .ring .face{padding:28px;border-width:2px;border-radius:12px;gap:0;
    transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(calc(125px / tan(3.14159rad / var(--n)) + 60px)) scale(.5)}
  .ring .face img{max-height:128px;max-width:340px}
  .ring .face figcaption{font-size:1.4rem}
}
/* Inner wrapper carries the depth-of-field filter so the .face transform stays a
   pure 3D transform - putting a filter on the transformed element itself flattens
   it out of the preserve-3d context in some engines. */
.ring .face{display:flex;align-items:center;justify-content:center}
.f-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;
  transition:filter .3s linear,opacity .3s linear}
/* only the 3D ring animates the filter, so only promote a layer there */
@media (min-width:701px){.f-in{gap:16px;will-change:filter,opacity}}
@media (prefers-reduced-motion:reduce){.f-in{transition:none}}

/* bokeh: soft out-of-focus light drifting behind the ring */
.ring-wrap{isolation:isolate}
.ring-wrap::before,.ring-wrap::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-repeat:no-repeat}
.ring-wrap::before{
  background-image:
    radial-gradient(circle,rgba(7,147,161,.34) 0 40%,rgba(7,147,161,0) 70%),
    radial-gradient(circle,rgba(244,136,71,.30) 0 42%,rgba(244,136,71,0) 72%),
    radial-gradient(circle,rgba(248,179,72,.34) 0 40%,rgba(248,179,72,0) 70%),
    radial-gradient(circle,rgba(7,147,161,.22) 0 44%,rgba(7,147,161,0) 74%);
  background-size:360px 360px,240px 240px,300px 300px,200px 200px;
  background-position:4% 16%,80% 8%,66% 76%,20% 82%;
  animation:bokeh-a 30s ease-in-out infinite alternate}
.ring-wrap::after{
  background-image:
    radial-gradient(circle,rgba(255,255,255,.9) 0 46%,rgba(255,255,255,0) 72%),
    radial-gradient(circle,rgba(248,179,72,.24) 0 44%,rgba(248,179,72,0) 72%),
    radial-gradient(circle,rgba(7,147,161,.20) 0 46%,rgba(7,147,161,0) 74%),
    radial-gradient(circle,rgba(244,136,71,.20) 0 44%,rgba(244,136,71,0) 72%);
  background-size:140px 140px,170px 170px,120px 120px,190px 190px;
  background-position:34% 6%,10% 64%,92% 54%,52% 94%;
  animation:bokeh-b 38s ease-in-out infinite alternate}
@keyframes bokeh-a{from{transform:translate3d(-2%,-1.5%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}
@keyframes bokeh-b{from{transform:translate3d(2%,1%,0) scale(1.05)}to{transform:translate3d(-3%,-2%,0) scale(.96)}}
@media (prefers-reduced-motion:reduce){.ring-wrap::before,.ring-wrap::after{animation:none}}

/* ================= stats row: centered, and sized to how many tiles there are ================= */
/* Was repeat(5,1fr) against four tiles, which parked the whole row one column
   left of centre. Column count now comes from the markup. */
.stats-row{justify-content:center;margin-left:auto;margin-right:auto;grid-template-columns:repeat(var(--cols,5),1fr)}
@media (max-width:900px){.stats-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.stats-row{grid-template-columns:repeat(2,1fr)}}
.stats-row .stat-tile{min-width:0}

/* ================= photo provenance ================= */
.photo-fig{margin:0}
.photo-credit{display:block;font-size:.74rem;line-height:1.45;color:var(--muted);margin:10px 2px 0;text-align:left}
.photo-credit b{font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;color:var(--navy);font-weight:600}
.photo-credit .loc{display:block}
.center .photo-credit,.pgrid .photo-credit{text-align:center}
/* An unfilled credit has to be impossible to miss before launch. */
.photo-credit.tbd{color:#b3541e;background:#fff5ec;border:1px dashed var(--orange);border-radius:3px;padding:4px 8px;display:inline-block}
.photo-credit.tbd b{color:#b3541e}
.pgrid figure{margin:0;display:flex;flex-direction:column}
.pgrid .photo-credit{margin-top:8px;font-size:.7rem}
.project .cap .credit{display:block;font-size:.68rem;color:#cfe9ec;margin-top:3px;letter-spacing:.02em}
.member .photo-credit{text-align:center;margin-top:8px}
/* the Our Vision photo credits its client with a logo lockup */
.client-credit{display:flex;align-items:center;gap:12px;margin:14px 2px 0}
.client-credit img{height:26px;width:auto;max-width:150px;object-fit:contain;flex:0 0 auto}
.client-credit span{font-size:.74rem;color:var(--muted);line-height:1.4}
.client-credit b{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--navy);font-weight:600}
/* wrapping .pic in a <figure> moves the flip ordering up one level */
.svc-block.flip>.photo-fig{order:2}
@media (max-width:900px){.svc-block.flip>.photo-fig{order:0}}

/* ================= service area map ================= */
.map-svg{background:#eef4f5;aspect-ratio:1200/800}
.area-map{width:100%;height:100%;display:block}
.sam-bg{fill:#eef4f5}
.sam-ring{fill:none;stroke:rgba(7,147,161,.20);stroke-width:1.5;stroke-dasharray:5 7}
.sam-reach{fill:rgba(7,147,161,.06);stroke:rgba(7,147,161,.42);stroke-width:2.5;stroke-dasharray:12 9}
.sam-primary{fill:rgba(7,147,161,.15);stroke:#0793a1;stroke-width:2.5}
.sam-dot{fill:#0793a1;stroke:#fff;stroke-width:2.5}
.sam-hq-halo{fill:rgba(244,136,71,.25)}
.sam-hq{fill:var(--orange);stroke:#fff;stroke-width:3}
.sam-lbl{font-family:var(--head);font-size:19px;font-weight:500;letter-spacing:.04em;fill:#33454f;text-transform:uppercase}
.sam-lbl-hq{font-size:25px;font-weight:600;fill:var(--navy);letter-spacing:.06em}
.sam-scale line{stroke:#5b6770;stroke-width:2}
.sam-scalelbl{font-family:var(--head);font-size:18px;fill:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.sam-n path{fill:var(--navy)}
.sam-n text{font-family:var(--head);font-size:20px;fill:var(--navy);text-anchor:middle;font-weight:600}
.map-legend{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:9px 20px;font-size:.8rem;color:var(--muted)}
.map-legend li{display:flex;align-items:center;gap:8px}
.map-legend span{width:16px;height:16px;border-radius:50%;flex:0 0 auto}
.map-legend .k-hq{background:var(--orange);box-shadow:0 0 0 3px rgba(244,136,71,.25)}
.map-legend .k-dot{width:11px;height:11px;background:var(--navy)}
.map-legend .k-primary{background:rgba(7,147,161,.15);border:2px solid #0793a1;border-radius:3px}
.map-legend .k-reach{background:rgba(7,147,161,.06);border:2px dashed rgba(7,147,161,.55);border-radius:3px}
.map-legend .k-ring{background:none;border:2px dashed rgba(7,147,161,.45)}

/* ================= hero scrim ================= */
/* The inner-hero photo sat at opacity .32 under a .95 teal gradient, so roughly 2% of
   the image survived on the copy side and 14% on the far side. Lift the photo and
   reshape the gradient: heavy where the headline and lead sit (out to ~52%, which is
   where the 640px lead column ends), falling away across the right of the frame.
   Worst case measured against a pure-white photo is 4.6:1 behind the lead text. */
/* Photo now runs at full strength - all the dimming is done by the gradient, which
   falls to .12 by the right edge so the far side of the frame is essentially the
   photograph. The copy keeps its backing out to ~46%, where the 640px lead column
   ends. A text-shadow carries the rest, which is what lets the scrim come down this
   far without the headline going soft against a bright sky. */
.hero-inner .bg img{opacity:1}
.hero-inner .bg::after{background:linear-gradient(90deg,rgba(6,110,120,.92) 0%,rgba(6,110,120,.86) 46%,rgba(6,110,120,.44) 72%,rgba(6,110,120,.12) 100%)}
.hero-inner h1,.hero-inner .lead,.hero-inner .crumbs{text-shadow:0 1px 14px rgba(3,38,42,.55),0 1px 3px rgba(3,38,42,.45)}
/* pure white rather than the old tinted #eaf6f8: it buys enough contrast to hold AA
   at .86 scrim, where the tinted colour needed .89 and a visibly darker frame */
.hero-inner .lead{font-size:1.2rem;font-weight:500;color:#fff}
/* narrow screens: the copy runs the full width, so the scrim has to as well */
@media (max-width:900px){
  .hero-inner .bg::after{background:linear-gradient(180deg,rgba(6,110,120,.86) 0%,rgba(6,110,120,.90) 100%)}
}

/* nav logo rides 5px high in the header */
.header .brand img{transform:translateY(-5px)}

/* home hero: the photo cross-fades with the tagline word. Layers are stacked, only the
   active one is opaque; the first carries .on from the markup so it shows without JS. */
.hero-video .bgimg{opacity:0;transition:opacity .9s ease-in-out}
.hero-video .bgimg.on{opacity:1}
@media (prefers-reduced-motion:reduce){.hero-video .bgimg{transition:none}}

/* ============================================================================
   ACCESSIBILITY
   1. Focus, skip link and screen-reader helpers
   2. The accessibility panel (text size, spacing, contrast, colour vision, ...)
   3. The AI chat widget
   Everything here is self-contained: no third-party script, no CDN, no font
   download. The panel writes data-* attributes on <html> and the rules below
   react to them, so nothing rewrites the DOM behind a screen reader's back.
   ============================================================================ */

/* ---- 1. focus, skip link, sr-only ---------------------------------------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:8px;top:-60px;z-index:200;background:var(--orange);color:#fff;font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;padding:12px 18px;border-radius:0 0 4px 4px;transition:top .15s}
.skip-link:focus{top:0;text-decoration:none}
:focus-visible{outline:3px solid var(--focus,#b4551c);outline-offset:2px;border-radius:2px}
.hero-video :focus-visible,.hero-inner :focus-visible,.cta-band :focus-visible,.footer :focus-visible,.topbar :focus-visible{outline-color:#ffd9bd}
main:focus{outline:none}
/* the mouse-driven ring on inputs stays, but keyboard focus gets the stronger one */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus,#b4551c);outline-offset:1px}

/* ---- 2. accessibility panel ---------------------------------------------- */
.a11y-open{position:fixed;left:18px;bottom:18px;z-index:120;width:52px;height:52px;border-radius:50%;border:2px solid #fff;background:var(--navy);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.28);padding:0}
.a11y-open svg{width:26px;height:26px;display:block}
.a11y-open:hover{background:var(--ink)}
.a11y-panel{position:fixed;left:18px;bottom:82px;z-index:121;width:330px;max-width:calc(100vw - 36px);max-height:min(76vh,640px);overflow-y:auto;overscroll-behavior:contain;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 50px rgba(0,0,0,.28);padding:18px 18px 20px;font-size:.9rem}
.a11y-panel[hidden]{display:none}
.a11y-panel h2{font-size:1.05rem;margin:0 0 2px;color:var(--ink)}
.a11y-panel .a11y-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.a11y-panel .a11y-note{font-size:.76rem;color:var(--muted);margin:0;line-height:1.45}
.a11y-close{border:1px solid var(--line);background:var(--bg-2);color:var(--ink);border-radius:4px;width:30px;height:30px;font-size:1.1rem;line-height:1;cursor:pointer;flex:0 0 auto}
.a11y-close:hover{background:var(--line)}
.a11y-group{border:0;margin:0 0 14px;padding:0}
.a11y-group legend{font-family:var(--head);text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;color:var(--muted);font-weight:600;padding:0;margin-bottom:7px}
.a11y-row{display:flex;flex-wrap:wrap;gap:6px}
.a11y-row button{flex:1 1 auto;min-width:44px;font:inherit;font-size:.82rem;padding:8px 6px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:4px;cursor:pointer;text-align:center}
.a11y-row button:hover{background:var(--bg-2)}
.a11y-row button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.a11y-col{display:grid;gap:6px}
.a11y-col button{text-align:left;padding:9px 10px}
.a11y-col button[aria-pressed="true"]::after{content:"\2713";float:right;font-weight:700}
.a11y-reset{width:100%;margin-top:4px;font:inherit;font-size:.82rem;font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;padding:10px;border:2px solid var(--navy);background:#fff;color:var(--navy);border-radius:4px;cursor:pointer}
.a11y-reset:hover{background:var(--navy);color:#fff}
@media (max-width:560px){.a11y-panel{left:10px;right:10px;width:auto;bottom:76px}.a11y-open{left:12px;bottom:12px;width:46px;height:46px}}
@media print{.a11y-open,.a11y-panel,.sp-chat-open,.sp-chat{display:none!important}}

/* --- panel effects. All keyed off <html data-*>, set by the panel and restored
   from localStorage by an inline boot script before first paint. --- */
html[data-a11y-font="1"]{font-size:112.5%}
html[data-a11y-font="2"]{font-size:125%}
html[data-a11y-font="3"]{font-size:140%}
html[data-a11y-font="4"]{font-size:160%}
html[data-a11y-spacing="1"] body,html[data-a11y-spacing="1"] p,html[data-a11y-spacing="1"] li,html[data-a11y-spacing="1"] dd{line-height:1.9}
html[data-a11y-spacing="1"] p,html[data-a11y-spacing="1"] li{margin-bottom:1.3em}
html[data-a11y-spacing="2"] body,html[data-a11y-spacing="2"] p,html[data-a11y-spacing="2"] li,html[data-a11y-spacing="2"] dd{line-height:2.2;letter-spacing:.06em;word-spacing:.16em}
html[data-a11y-spacing="2"] p,html[data-a11y-spacing="2"] li{margin-bottom:1.6em}
/* WCAG 1.4.12 wants text to survive these; heights that were fixed for one line must give */
html[data-a11y-spacing] .industry,html[data-a11y-spacing] .btn,html[data-a11y-spacing] .stat-tile{height:auto}

html[data-a11y-font] .btn,html[data-a11y-font] .industry,html[data-a11y-font] .nav a{white-space:normal}

/* readable font: drops the condensed uppercase display face for a plain sans */
html[data-a11y-readable] body{--head:"Verdana","DejaVu Sans","Segoe UI",system-ui,sans-serif;--body:"Verdana","DejaVu Sans","Segoe UI",system-ui,sans-serif}
html[data-a11y-readable] h1,html[data-a11y-readable] h2,html[data-a11y-readable] h3,html[data-a11y-readable] h4,
html[data-a11y-readable] .eyebrow,html[data-a11y-readable] .btn,html[data-a11y-readable] .industry,html[data-a11y-readable] .nav a{text-transform:none;letter-spacing:normal}
html[data-a11y-readable] h1,html[data-a11y-readable] h2{line-height:1.2}

/* link highlighting */
html[data-a11y-links] a:not(.btn):not(.brand):not(.skip-link){text-decoration:underline!important;text-underline-offset:2px;text-decoration-thickness:2px;background:#fff8d6;color:#2b1a00!important;box-shadow:0 0 0 2px #fff8d6}
html[data-a11y-links] .footer a:not(.btn),html[data-a11y-links] .topbar a,html[data-a11y-links] .cta-band a:not(.btn),html[data-a11y-links] .hero-video a:not(.btn),html[data-a11y-links] .hero-inner a:not(.btn){background:#231a00;color:#ffe9a8!important;box-shadow:0 0 0 2px #231a00}

/* big cursor */
html[data-a11y-cursor],html[data-a11y-cursor] *{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M8 4l26 18-11 2 6 13-5 2-6-13-10 8z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/></svg>") 6 4,auto!important}
html[data-a11y-cursor] a,html[data-a11y-cursor] button,html[data-a11y-cursor] a *,html[data-a11y-cursor] button *{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M18 4c2 0 3 1 3 3v14l3-4c1-2 4-2 5 0l8 12c2 3 2 6 1 9l-2 5H18l-8-11c-1-2 0-5 3-5l2 2V7c0-2 1-3 3-3z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/></svg>") 14 3,pointer!important}

/* reading guide */
.a11y-guide{position:fixed;left:0;right:0;height:44px;z-index:119;pointer-events:none;border-top:3px solid rgba(0,0,0,.85);border-bottom:3px solid rgba(0,0,0,.85);background:rgba(255,238,120,.18);display:none}
html[data-a11y-guide] .a11y-guide{display:block}

/* stop animation: the same switch the OS reduced-motion setting throws */
html[data-a11y-motion] *,html[data-a11y-motion] *::before,html[data-a11y-motion] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html[data-a11y-motion] .hero-video .bgimg{opacity:0}
html[data-a11y-motion] .hero-video .bgimg:first-of-type{opacity:1}

/* colour vision correction. The filter goes on the page regions rather than on
   <html> or <body>: a filter makes its element a containing block, which would
   break position:fixed for the panel, the chat and the sticky header. */
body>.topbar,body>.header,body>main,body>.footer{filter:var(--a11y-cvd,none)}

/* contrast modes */
html[data-a11y-contrast="high"]{--ink:#000;--muted:#1a1a1a;--line:#000;--bg:#fff;--bg-2:#fff;--navy:#00404a;--navy-2:#00404a;--navy-3:#00404a;--teal:#00404a;--link:#00404a;--orange:#8f4212;--orange-2:#6d3009;--orange-ink:#8f4212;--focus:#000}
html[data-a11y-contrast="high"] body{background:#fff;color:#000}
html[data-a11y-contrast="high"] .hero-inner .bg img,html[data-a11y-contrast="high"] .hero-video .bgimg,html[data-a11y-contrast="high"] .hero-inner .bg::after,html[data-a11y-contrast="high"] .hero-video .veil{display:none}
html[data-a11y-contrast="high"] .hero-video,html[data-a11y-contrast="high"] .hero-inner,html[data-a11y-contrast="high"] .cta-band,html[data-a11y-contrast="high"] .footer,html[data-a11y-contrast="high"] .topbar,html[data-a11y-contrast="high"] .cred-bar{background:#00303a!important;color:#fff}
html[data-a11y-contrast="high"] .footer,html[data-a11y-contrast="high"] .footer a,html[data-a11y-contrast="high"] .footer .bottom,html[data-a11y-contrast="high"] .topbar a,html[data-a11y-contrast="high"] .cta-band p,html[data-a11y-contrast="high"] .hero-video .lead,html[data-a11y-contrast="high"] .hero-inner .lead{color:#fff!important}
html[data-a11y-contrast="high"] .hero-video .eyebrow,html[data-a11y-contrast="high"] .hero-inner .eyebrow,html[data-a11y-contrast="high"] .cta-band .eyebrow,html[data-a11y-contrast="high"] .accent{color:#ffd98a!important}
html[data-a11y-contrast="high"] .btn-primary{background:#8f4212;border-color:#fff;color:#fff}
html[data-a11y-contrast="high"] .card,html[data-a11y-contrast="high"] .panel,html[data-a11y-contrast="high"] .feature,html[data-a11y-contrast="high"] .industry,html[data-a11y-contrast="high"] .stat-tile,html[data-a11y-contrast="high"] input,html[data-a11y-contrast="high"] select,html[data-a11y-contrast="high"] textarea{border:2px solid #000!important;background:#fff}
html[data-a11y-contrast="high"] .industries{background:#000;gap:2px}
html[data-a11y-contrast="high"] a:not(.btn){text-decoration:underline}

html[data-a11y-contrast="dark"]{--ink:#f2f5f7;--muted:#c2ccd3;--line:#3b464e;--bg:#12181c;--bg-2:#1b2329;--navy:#4fd0dd;--navy-2:#0e3f45;--navy-3:#0e3f45;--teal:#4fd0dd;--link:#7fdce7;--orange:#ffa668;--orange-2:#ffbb8a;--orange-ink:#ffa668;--focus:#ffd9bd;--shadow:0 10px 30px rgba(0,0,0,.5)}
html[data-a11y-contrast="dark"] body{background:#12181c;color:#f2f5f7}
html[data-a11y-contrast="dark"] .header,html[data-a11y-contrast="dark"] .panel,html[data-a11y-contrast="dark"] .card,html[data-a11y-contrast="dark"] .industry,html[data-a11y-contrast="dark"] .split .text{background:#1b2329}
html[data-a11y-contrast="dark"] .split .text.on-bg{background:#161d22}
html[data-a11y-contrast="dark"] input,html[data-a11y-contrast="dark"] select,html[data-a11y-contrast="dark"] textarea{background:#0e1418;color:#f2f5f7;border-color:#3b464e}
html[data-a11y-contrast="dark"] .hero-video .veil{background:linear-gradient(90deg,rgba(4,40,45,.94) 0%,rgba(4,40,45,.86) 45%,rgba(4,40,45,.6) 100%)}
html[data-a11y-contrast="dark"] .hero-inner .bg::after{background:linear-gradient(90deg,rgba(4,40,45,.95) 30%,rgba(4,40,45,.7) 100%)}
html[data-a11y-contrast="dark"] .cta-band,html[data-a11y-contrast="dark"] .footer,html[data-a11y-contrast="dark"] .topbar,html[data-a11y-contrast="dark"] .cred-bar{background:#0e3f45}
html[data-a11y-contrast="dark"] .btn-primary{background:#ffa668;border-color:#ffa668;color:#141414}
html[data-a11y-contrast="dark"] .btn-outline{color:#4fd0dd;border-color:#4fd0dd}
html[data-a11y-contrast="dark"] .btn-outline-orange{background:transparent;color:#ffa668;border-color:#ffa668}
html[data-a11y-contrast="dark"] .a11y-panel,html[data-a11y-contrast="dark"] .sp-chat{background:#1b2329;border-color:#3b464e;color:#f2f5f7}
html[data-a11y-contrast="dark"] .a11y-row button,html[data-a11y-contrast="dark"] .a11y-close{background:#12181c;color:#f2f5f7;border-color:#3b464e}
html[data-a11y-contrast="dark"] .a11y-row button[aria-pressed="true"]{background:#4fd0dd;color:#0e1418;border-color:#4fd0dd}
html[data-a11y-contrast="dark"] .mtn{filter:invert(1) hue-rotate(180deg) saturate(.4) brightness(.35)}

/* ---- 3. AI chat -----------------------------------------------------------
   The disclosure is not decoration: every surface says plainly that the replies
   come from an automated assistant, and the human routes (phone, bid form) sit
   inside the widget rather than behind it. Nothing here auto-opens.            */
.sp-chat-open{position:fixed;right:18px;bottom:18px;z-index:120;display:inline-flex;align-items:center;gap:9px;padding:12px 18px 12px 14px;border:2px solid #fff;border-radius:999px;background:var(--navy);color:#fff;font-family:var(--head);text-transform:uppercase;letter-spacing:.07em;font-size:.8rem;font-weight:600;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.28)}
.sp-chat-open svg{width:20px;height:20px;flex:0 0 auto}
.sp-chat-open:hover{background:var(--ink)}
.sp-chat-open .sp-ai-tag{background:#fff;color:var(--navy);border-radius:3px;padding:2px 5px;font-size:.66rem;letter-spacing:.08em}
.sp-chat{position:fixed;right:18px;bottom:82px;z-index:121;width:380px;max-width:calc(100vw - 36px);height:min(70vh,560px);background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 50px rgba(0,0,0,.28);display:flex;flex-direction:column;overflow:hidden}
.sp-chat[hidden]{display:none}
.sp-chat-hd{background:var(--navy);color:#fff;padding:13px 14px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex:0 0 auto}
.sp-chat-hd b{font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;font-size:.92rem;display:block}
.sp-chat-hd span{font-size:.74rem;color:#dff2f5;display:block;margin-top:2px}
.sp-chat-x{border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;border-radius:4px;width:28px;height:28px;font-size:1.1rem;line-height:1;cursor:pointer;flex:0 0 auto}
.sp-chat-x:hover{background:rgba(255,255,255,.16)}
.sp-ai-banner{background:#fff5e8;border-bottom:1px solid #f0d5b4;color:#6b3d13;font-size:.76rem;line-height:1.45;padding:9px 14px;flex:0 0 auto}
.sp-ai-banner b{font-weight:700}
.sp-chat-log{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--bg-2)}
.sp-msg{max-width:86%;padding:9px 12px;border-radius:10px;font-size:.88rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.sp-msg.ai{background:#fff;border:1px solid var(--line);border-bottom-left-radius:3px;align-self:flex-start}
.sp-msg.me{background:var(--navy);color:#fff;border-bottom-right-radius:3px;align-self:flex-end}
.sp-msg.sys{align-self:center;background:transparent;color:var(--muted);font-size:.76rem;text-align:center;max-width:100%}
.sp-msg .sp-who{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:.64rem;opacity:.75;margin-bottom:3px}
.sp-chat-form{flex:0 0 auto;border-top:1px solid var(--line);padding:10px 12px 12px;background:#fff}
.sp-otp{margin:0 0 9px;padding:8px 11px;border-radius:4px;background:#fff5e8;border:1px solid #f0d5b4;color:#6b3d13;font-size:.8rem;line-height:1.45}
.sp-otp-x{font:inherit;font-size:.78rem;background:none;border:0;padding:0;color:#6b3d13;text-decoration:underline;cursor:pointer}
.sp-chat-in{display:flex;gap:8px;align-items:flex-end}
.sp-chat-in textarea{flex:1 1 auto;resize:none;min-height:42px;max-height:110px;padding:9px 10px;font-size:.88rem;line-height:1.4}
.sp-chat-send{flex:0 0 auto;border:0;background:var(--orange);color:#fff;border-radius:4px;width:42px;height:42px;display:grid;place-items:center;cursor:pointer}
.sp-chat-send svg{width:18px;height:18px}
.sp-chat-send:hover{background:var(--orange-2)}
.sp-chat-send:disabled{opacity:.5;cursor:default}
.sp-chat-foot{margin:8px 0 0;font-size:.72rem;color:var(--muted);line-height:1.45}
.sp-chat-foot a{text-decoration:underline}
.sp-typing{display:inline-flex;gap:3px;align-items:center}
.sp-typing i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:spdot 1.1s infinite}
.sp-typing i:nth-child(2){animation-delay:.15s}.sp-typing i:nth-child(3){animation-delay:.3s}
@keyframes spdot{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.sp-typing i{animation:none;opacity:.6}}
@media (max-width:560px){.sp-chat{right:10px;left:10px;width:auto;bottom:74px;height:min(74vh,520px)}.sp-chat-open{right:12px;bottom:12px;padding:10px 14px 10px 12px;font-size:.74rem}}

/* the same conversation embedded in the Contact page, so it is reachable without
   hunting for a floating button */
.sp-chat-inline{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.sp-chat-inline .sp-chat{position:static;width:auto;max-width:none;height:460px;border:0;border-radius:0;box-shadow:none;display:flex}
.sp-chat-inline .sp-chat-x{display:none}

/* ============================================================================
   WCAG AA CONTRAST PASS
   The brand palette was built for large display type and fails AA where it is
   used for ordinary text. Measured on the original colours:

     white on the orange button   2.48:1   needs 4.5   <- the main CTA, every page
     orange .eyebrow on white     2.48:1   needs 4.5
     the .accent word on teal     1.48:1   needs 3.0
     teal link text on white      3.69:1   needs 4.5
     white text on brand teal     3.69:1   needs 4.5   <- footer, CTA band, top bar
     industry labels on white     3.69:1   needs 4.5

   Nothing below changes hue, only depth: each colour is the lightest value in
   the same family that clears the threshold. The originals are in the comments,
   so reverting is an edit to this one block.

   --orange keeps its original value throughout: it is still correct for rules,
   icons, borders and fills, which carry no text. Only the tokens used FOR text
   and for the surfaces text sits on are darkened.
   ============================================================================ */
:root{
  --teal:#056b74;        /* was #0793a1 - inline link text        3.69 -> 6.25 */
  --orange-ink:#b4551c;  /* orange text on light backgrounds      2.48 -> 4.93 */
  --orange-btn:#bd571c;  /* orange fill under a white label       2.48 -> 4.62 */
  --orange-btn-2:#a34d18;/* its hover                                    5.78 */
  --surface-teal:#057078;/* teal fill under normal-size white text 3.69 -> 5.84 */
  --veil-rgb:4,86,94;    /* was 6,110,120 - the hero scrim         3.69 -> 8.41 */
  --accent-dark:#ffb07a; /* the .accent word on a teal surface     1.48 -> 4.70 */
  --eyebrow-dark:#ffe2b8;/* was #f8b348 - eyebrow on a teal surface 3.21 -> 4.68 */
  --focus:#b4551c;       /* focus ring, also needs 3:1 against white      4.93 */
}
/* orange TEXT */
.eyebrow,.accent,.card .more,.member span,.faq summary::after,
.testimonial .who span,.testimonial .stars,.pcard dt,
.nav a:hover,.nav li.active>a,.btn-outline-orange{color:var(--orange-ink)}
.btn-outline-orange{border-color:var(--orange-ink)}
/* orange FILLS that sit under white text or a white glyph */
.btn-primary,.btn-outline-orange:hover,.skip-link,.sp-chat-send,
.ba .handle::after,.footer .social a:hover{background:var(--orange-btn)}
.btn-primary{border-color:var(--orange-btn)}
.btn-primary:hover,.sp-chat-send:hover{background:var(--orange-btn-2);border-color:var(--orange-btn-2)}
input:focus,select:focus,textarea:focus{outline-color:var(--focus);border-color:var(--focus)}
/* teal surfaces that carry normal-size white text */
.topbar,.cred-bar,.cta-band,.footer{background:var(--surface-teal)}
.topbar{color:#fff}
.hero-inner .bg::after{background:linear-gradient(90deg,rgba(var(--veil-rgb),.92) 0%,rgba(var(--veil-rgb),.86) 46%,rgba(var(--veil-rgb),.5) 72%,rgba(var(--veil-rgb),.2) 100%)}
.hero-video .veil{background:linear-gradient(90deg,rgba(var(--veil-rgb),.92) 0%,rgba(var(--veil-rgb),.8) 38%,rgba(var(--veil-rgb),.45) 70%,rgba(var(--veil-rgb),.3) 100%)}
@media (max-width:900px){
  .hero-video .veil{background:linear-gradient(180deg,rgba(var(--veil-rgb),.9),rgba(var(--veil-rgb),.76))}
  .hero-inner .bg::after{background:linear-gradient(180deg,rgba(var(--veil-rgb),.88) 0%,rgba(var(--veil-rgb),.92) 100%)}
}
/* accents sitting ON those surfaces read the other way round: they have to get
   lighter, not darker, to pull away from the teal */
.hero-inner .eyebrow,.hero-video .eyebrow,.cta-band .eyebrow{color:var(--eyebrow-dark)}
.hero-inner .accent,.hero-video .accent,.cta-band .accent,.hero .rotator .w{color:var(--accent-dark)}
.footer,.cta-band p,.hero-video .lead,.hero-inner .lead{color:#f0f8fa}
.footer .bottom{color:#e4f3f5}
.project .cap span{color:#f2fbfc}
/* small labels that were using the display teal at body sizes */
.industry{color:var(--teal)}

/* --- part two: --navy was doing three jobs at once ---------------------------
   It was the display-heading colour, the colour of every small uppercase label,
   AND the fill behind white text. At #0793a1 that is 3.69:1, which clears AA for
   display type (needs 3.0) and fails it for everything else (needs 4.5). Split
   into three tokens so each job gets a value that passes:
     --navy       #0793a1  unchanged: h1/h2 display type, icon and graphic fills
     --navy-ink   #056b74  every text use below display size          -> 6.25:1
     --surface-teal        the fills that carry white text            -> 5.84:1  */
:root{ --navy-ink:#056b74; }
h3,h4,.btn-outline,.btn-outline-light:hover,.nav a,.stat,.industry,.quote,.member b,
.towns li,label,.contact-card b,.tab,.faq summary,.hero .rotator,.why-tile b,
.testimonial .who,.trades li,.photo-credit b,.client-credit b,
.a11y-reset,.sp-chat-open .sp-ai-tag{color:var(--navy-ink)}
.btn-outline:hover,.card .icon,.tab.active,.a11y-open,
.a11y-row button[aria-pressed="true"],.a11y-reset:hover,.sp-chat-open,
.sp-chat-hd,.sp-msg.me{background:var(--surface-teal)}
.a11y-row button[aria-pressed="true"]{border-color:var(--surface-teal)}
/* the hero's own background is the scrim colour, not the bright teal: it is what
   shows through the veil and what shows if the photo never loads */
.hero-inner,.hero-video{background:#04565e}
@media (prefers-reduced-motion:reduce){.hero-video{background:#04565e url(../img/hero-cville-poster.jpg) center/cover}}
.tagline{color:rgba(255,255,255,.82)}   /* was .55 -> 3.0:1 on the scrim; now 6.4 */
.tagline button.on,.tagline button:hover{color:var(--accent-dark)}
.crumbs,.crumbs a{color:#ffe2c9}