@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/barlow-condensed-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/barlow-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/barlow-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/barlow-latin-400-italic.woff2) format('woff2'); }

/* SignCo Signs + Graphics: preview build. Type is Barlow Condensed (display) + Barlow (text),
   drawn from road-sign and license-plate lettering. Colors sampled from the SignCo logo. */
:root {
  --navy-900: #101B30;
  --navy-800: #16233C;
  --navy-700: #2B4066;
  --navy-600: #3A557F;
  --crimson: #B8455E;
  --crimson-700: #9A3750;
  --sky: #93B9EA;
  --gold: #E8B64C;
  --paper: #F6F8FB;
  --tint: #EDF1F8;
  --line: #D6DDE8;
  --ink: #1A2333;
  --muted: #5A6578;
  --white: #FFFFFF;
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --text: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(64px, 9vw, 128px);
  --radius: 3px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--text); font-size: 1.05rem; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--crimson-700); }
:focus-visible { outline: 3px solid var(--navy-700); outline-offset: 3px; }
.bg-navy :focus-visible,
.bg-deep :focus-visible,
.hero :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--sky); }
h1, h2, h3, h4 { font-family: var(--display); text-transform: uppercase; margin: 0 0 .4em; line-height: .95; letter-spacing: .005em; color: var(--navy-800); }
h1 { font-size: clamp(3rem, 7.2vw, 6.6rem); font-weight: 800; line-height: .9; }
h2 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); font-weight: 700; }
h3 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); font-weight: 700; letter-spacing: .02em; }
h4 { font-size: 1.2rem; font-weight: 700; letter-spacing: .03em; }
.ind-meta h3, .gcards h3, .gbest h3, .mistakes h3 { font-size: 1.2rem; letter-spacing: .03em; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.5; color: var(--muted); max-width: 42em; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section-tight { padding-block: calc(var(--section) * .6); }
.bg-tint { background: var(--tint); }
.bg-navy { background: var(--navy-800); color: #E6ECF5; }
.bg-navy h2, .bg-navy h3, .bg-navy h4 { color: var(--white); }
.bg-navy .lead, .bg-navy .muted { color: #B9C6DA; }
.bg-navy a { color: var(--sky); }
.bg-navy a.btn:not(.btn-ghost) { color: var(--white); }
.bg-navy a.btn-light { color: var(--navy-800); }
.bg-deep { background: var(--navy-900); color: #E6ECF5; }
.bg-deep h2, .bg-deep h3 { color: var(--white); }

/* Kicker */
.kicker { display: inline-flex; align-items: center; gap: 12px; font-family: var(--text); font-weight: 600; font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--crimson); margin-bottom: 14px; }
.kicker::before { content: ""; width: 12px; height: 12px; background: var(--crimson); flex: none; }
.bg-navy .kicker, .bg-deep .kicker { color: var(--sky); }
.bg-navy .kicker::before, .bg-deep .kicker::before { background: var(--sky); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--text); font-weight: 600; font-size: .98rem; letter-spacing: .01em; line-height: 1; padding: 16px 24px; border-radius: var(--radius); border: 1.5px solid transparent; background: var(--crimson); color: var(--white); text-decoration: none; cursor: pointer; transition: background-color .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); white-space: nowrap; }
.btn:hover { background: var(--crimson-700); color: var(--white); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-ghost { background: transparent; color: var(--navy-800); border-color: var(--navy-800); }
.btn-ghost:hover { background: var(--navy-800); color: var(--white); }
.btn-light { background: var(--white); color: var(--navy-800); }
.btn-light:hover { background: var(--tint); color: var(--navy-900); }
.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.btn-outline-light:hover { background: var(--white); color: var(--navy-900); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.split > *, .industry > *, .hdr > *, .grid-2 > *, .sol-grid > *, .guide-grid > * { min-width: 0; }
@media (max-width: 640px) { .btn { white-space: normal; text-align: center; line-height: 1.25; padding: 14px 20px; max-width: 100%; } }
.arrow-link { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.arrow-link::after { content: "\2192"; transition: transform .18s var(--ease); }
.arrow-link:hover::after { transform: translateX(4px); }

/* Review banner */
.review-bar { background: var(--gold); color: #3a2c00; font-family: var(--text); font-size: .92rem; font-weight: 500; padding: 10px var(--gutter); display: flex; align-items: center; gap: 14px; justify-content: center; text-align: center; flex-wrap: wrap; }
.review-bar strong { font-weight: 700; }
.review-bar button { margin-left: 8px; background: #3a2c00; color: var(--gold); border: 0; border-radius: var(--radius); padding: 6px 12px; font: 600 .85rem var(--text); cursor: pointer; }
.review-bar.is-hidden { display: none; }
@media (max-width: 600px) { .review-bar { padding: 8px var(--gutter); font-size: .86rem; gap: 8px; } .review-bar .rb-more { display: none; } }

/* Header + nav. Triggers are plain links on the navy bar, as in the first redesign (Aug 30):
   soft white lettering, a faint wash on hover, a crimson underline on the current page, and a
   crimson Get a Quote as the one filled button. Dropdowns are split-pane mega menus: categories
   on the left, the options for the highlighted category on the right. Desktop: hover opens,
   clicking the trigger goes to the page. Mobile: tap toggles; categories expand like an accordion. */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--navy-900); color: var(--white); border-bottom: 1px solid rgba(255,255,255,.08); }
.site-header .bar { display: flex; align-items: center; gap: 18px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); margin-right: auto; }
.brand img { width: 92px; height: auto; }
.nav { display: flex; align-items: center; gap: 2px; position: relative; }
.nav-item { position: static; }
.nav-mobile-actions { display: none; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; font: 500 .96rem var(--text); color: #DCE4F0; text-decoration: none; padding: 10px 12px; border-radius: var(--radius); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color .15s var(--ease), background-color .15s var(--ease); }
.nav-link:hover, .nav-item.open > .nav-link { color: var(--white); background: rgba(255,255,255,.06); }
.nav-link.is-active { color: var(--white); border-bottom-color: var(--crimson); border-radius: 0; }
.nav-link .caret { width: 10px; height: 10px; transition: transform .18s var(--ease); }
.nav-item.open > .nav-link .caret { transform: rotate(180deg); }
.dropdown { position: absolute; top: calc(100% + 10px); left: 0; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 44px rgba(16,27,48,.22); display: none; z-index: 60; }
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.dropdown.align-right { left: auto; right: 0; }
.nav-item.open .dropdown { display: block; }
.mm { width: 720px; display: none; grid-template-columns: 250px 1fr; }
.mm.mm-wide { width: 860px; grid-template-columns: 280px 1fr; }
.nav-item.open .mm { display: grid; }
.mm-cats { display: flex; flex-direction: column; background: var(--tint); border-right: 1px solid var(--line); padding: 10px 0; max-height: min(70vh, 640px); overflow-y: auto; }
.mm-cat { display: block; text-align: left; text-decoration: none; font: 600 .92rem var(--text); color: var(--navy-800); background: none; border: 0; border-left: 3px solid transparent; padding: 9px 16px 9px 18px; cursor: pointer; }
@media (hover: hover) { .mm-cat:hover, .mm-cat:focus-visible { background: var(--white); color: var(--crimson-700); } }
.mm-cat.is-on { background: var(--white); border-left-color: var(--crimson); color: var(--crimson-700); }
.mm-panes { padding: 22px 26px 20px; }
.mm-pane { display: none; }
.mm-pane.is-on { display: block; }
.mm-pane .mm-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .95; letter-spacing: .03em; margin: 0 0 6px; font-size: 1.35rem; color: var(--navy-800); }
.mm-pane p { margin: 0 0 12px; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.mm-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.mm-links a { display: block; padding: 7px 8px; margin: 0 -8px; color: var(--navy-800); text-decoration: none; font-size: .95rem; font-weight: 500; border-radius: var(--radius); }
.mm-links a:hover { background: var(--tint); color: var(--crimson-700); }
.mm-go { display: inline-block; margin-top: 12px; color: var(--crimson); font-weight: 700; font-size: .95rem; text-decoration: none; }
.mm-go:hover { color: var(--crimson-700); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.phone-block { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; padding: 0 4px; white-space: nowrap; }
.phone-link { display: inline-flex; align-items: center; gap: 7px; color: var(--white); text-decoration: none; font-weight: 700; font-family: var(--display); font-size: 1.2rem; letter-spacing: .03em; }
.phone-link svg { width: 18px; height: 18px; }
.phone-link:hover { color: var(--sky); }
.phone-digits { color: #C7D3E6; text-decoration: none; font: 600 .82rem var(--text); letter-spacing: .04em; margin-top: 2px; padding-left: 25px; }
.phone-digits:hover { color: var(--sky); }
.btn-quote { background: var(--crimson); color: var(--white); border-color: var(--crimson); }
.btn-quote:hover { background: var(--crimson-700); border-color: var(--crimson-700); color: var(--white); }
.menu-btn { display: none; background: none; border: 1.5px solid rgba(255,255,255,.5); color: var(--white); border-radius: var(--radius); padding: 10px 12px; font: 600 .9rem var(--text); cursor: pointer; }
@media (max-width: 1260px) { .nav-link { padding: 10px 8px; font-size: .9rem; } .brand img { width: 78px; } .mm-wide { width: 760px; } }
@media (max-width: 1120px) { .header-actions .btn { display: none; } }
@media (max-width: 1000px) {
  .site-header .bar { min-height: 66px; gap: 12px; flex-wrap: wrap; }
  .nav { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; padding: 4px 0 18px; gap: 4px; max-height: calc(100dvh - 66px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .nav.is-open { display: flex; }
  body.menu-open { overflow: hidden; }
  .nav-mobile-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 0 6px; border-top: 1px solid rgba(255,255,255,.12); margin-top: 6px; }
  .nav-mobile-actions .btn { flex: 1 1 45%; justify-content: center; }
  .nav-mobile-hours { flex-basis: 100%; color: #AEBCD3; font-size: .88rem; padding-top: 4px; }
  .nav-item { position: static; }
  .nav-link { width: 100%; justify-content: space-between; padding: 13px 8px; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0; }
  .nav-link.is-active { color: var(--sky); border-bottom-color: rgba(255,255,255,.08); }
  .dropdown, .mm, .mm.mm-wide { position: static; display: none; width: auto; min-width: 0; grid-template-columns: 1fr; box-shadow: none; border: 0; background: rgba(255,255,255,.05); color: #DCE4F0; padding: 6px 4px 10px; margin: 0; }
  .nav-item.open .dropdown, .nav-item.open .mm { display: block; }
  .mm-cats { background: none; border: 0; padding: 0; max-height: none; overflow: visible; }
  .mm-cat { color: #DCE4F0; padding: 13px 10px; min-height: 46px; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 1rem; }
  .mm-cat::after { content: "+"; float: right; color: var(--sky); font-weight: 700; }
  .mm-cat.is-on { background: rgba(255,255,255,.06); color: var(--white); }
  .mm-cat.is-on::after { content: "\2212"; }
  .mm-panes { display: contents; }
  .mm-pane { display: none; padding: 8px 10px 14px 18px; }
  .mm-pane.is-on { display: block; }
  .mm-pane .mm-title { display: none; }
  .mm-pane p { color: #AEBCD3; }
  .mm-links { grid-template-columns: 1fr; }
  .mm-links a { color: #DCE4F0; padding: 11px 8px; font-size: 1rem; }
  .mm-links a:hover { background: rgba(255,255,255,.08); color: var(--white); }
  .mm-go { color: var(--sky); padding: 10px 0; }
  .menu-btn { display: inline-flex; }
  .phone-block { padding: 0; flex-direction: row; align-items: center; gap: 6px; }
  .phone-link span { display: none; }
  .phone-digits { padding-left: 0; font-size: 1rem; margin-top: 0; color: var(--white); }
}

/* Hero (home) */
.hero { position: relative; min-height: min(86vh, 880px); display: flex; align-items: flex-end; color: var(--white); background: var(--navy-900); overflow: hidden; isolation: isolate; }
@supports (height: 1svh) { .hero { min-height: min(92svh, 880px); } }
.hero video, .hero .hero-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(16,27,48,.92) 0%, rgba(16,27,48,.64) 48%, rgba(16,27,48,.3) 100%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; z-index: -1; background: linear-gradient(180deg, rgba(16,27,48,0), rgba(16,27,48,.78)); }
.hero .wrap { padding-block: clamp(80px, 12vw, 140px) clamp(52px, 8vw, 92px); }
.hero h1 { color: var(--white); max-width: 13em; }
.hero h1 em { font-style: normal; color: var(--sky); }
.hero h1 .nb { white-space: nowrap; }
.hero .lead { color: #D7E1F0; max-width: 36em; }
.hero .hero-sub { font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; color: var(--white); max-width: 22em; margin: -.2em 0 .9em; }
.hero .kicker { color: var(--sky); }
.hero .kicker::before { background: var(--sky); }
@media (max-width: 600px) {
  .hero { min-height: 0; }
  .hero .wrap { padding-block: 54px 40px; }
  .hero h1 { font-size: clamp(2.5rem, 11.4vw, 3rem); margin-bottom: .45em; }
  .hero .lead { font-size: 1.05rem; line-height: 1.45; }
  .hero .kicker { font-size: .92rem; letter-spacing: .1em; margin-bottom: 12px; }
  .hero .btn-row { gap: 10px; }
  .hero .btn-row .btn { width: 100%; }
}
.hero-foot { display: flex; flex-wrap: wrap; gap: 16px 34px; margin-top: 38px; font-size: .95rem; color: #C7D3E6; align-items: center; }
.hero-foot a { color: #C7D3E6; text-decoration: none; display: inline-flex; align-items: baseline; gap: 8px; }
.hero-foot a:hover { color: var(--white); }
.hero-foot strong { color: var(--white); font-family: var(--display); font-size: 1.3rem; letter-spacing: .03em; margin-right: 4px; }
.hero-foot .stars { color: var(--gold); letter-spacing: .04em; }
.g-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #1A73E8; font-family: Arial, sans-serif; font-weight: 700; font-size: 1.7rem; box-shadow: 0 0 0 1px var(--line); vertical-align: middle; margin-right: 6px; }

/* Page hero (inner) */
.page-hero { position: relative; background: var(--navy-800); color: var(--white); overflow: hidden; isolation: isolate; }
.page-hero .wrap { padding-block: clamp(60px, 9vw, 118px); position: relative; }
.page-hero h1 { color: var(--white); font-size: clamp(2.6rem, 6vw, 5rem); max-width: 13em; }
.page-hero h1 em { font-style: normal; color: var(--sky); }
.page-hero .lead { color: #C7D3E6; }
.page-hero .kicker { color: var(--sky); }
.page-hero .kicker::before { background: var(--sky); }
.page-hero-img { position: absolute; inset: 0; z-index: -1; }
.page-hero-img img { width: 100%; height: 100%; object-fit: cover; opacity: .26; }
.page-hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy-800) 30%, rgba(22,35,60,.35) 100%); }

/* Trust strip */
.trust { background: var(--white); border-bottom: 1px solid var(--line); }
.trust .mission { margin: 0; padding: 26px 0 22px; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.15; letter-spacing: .01em; text-transform: uppercase; color: var(--navy-800); display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.trust .mission-label { font-family: var(--text); font-weight: 600; font-size: 1rem; letter-spacing: .12em; color: var(--crimson); text-transform: uppercase; }
.trust .mission-label::before { content: ""; display: inline-block; width: 12px; height: 12px; background: var(--crimson); margin-right: 12px; vertical-align: 1px; }
.trust ul { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.trust li { padding: 20px 24px; border-left: 1px solid var(--line); font-size: .95rem; color: var(--muted); }
.trust li:first-child { border-left: 0; padding-left: 0; }
.trust strong { display: block; font-family: var(--display); font-size: 1.3rem; letter-spacing: .03em; color: var(--navy-800); text-transform: uppercase; }
.trust .stars { color: var(--gold); }
@media (max-width: 900px) { .trust ul { grid-template-columns: 1fr 1fr; } .trust li:nth-child(3) { border-left: 0; padding-left: 0; } .trust li:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 600px) { .trust .mission { padding: 20px 0 18px; gap: 10px; font-size: 1.45rem; } .trust .mission-label { font-size: .92rem; } }
@media (max-width: 520px) { .trust ul { grid-template-columns: 1fr; } .trust li { border-left: 0; padding-left: 0; padding-block: 14px; } .trust li + li { border-top: 1px solid var(--line); } }

/* Split layouts */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split.rev { grid-template-columns: 7fr 5fr; }
.split.eq { grid-template-columns: 1fr 1fr; }
.split.top { align-items: start; }
@media (max-width: 860px) { .split, .split.rev, .split.eq { grid-template-columns: 1fr; } .split.rev > :first-child { order: 2; } }

/* Proof frame */
.proof { position: relative; padding: 14px; }
.proof img { width: 100%; height: auto; }
.proof::before, .proof::after, .proof .mark::before, .proof .mark::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--crimson); border-style: solid; }
.proof::before { top: 0; left: 0; border-width: 2px 0 0 2px; }
.proof::after { top: 0; right: 0; border-width: 2px 2px 0 0; }
.proof .mark::before { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.proof .mark::after { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
.bg-navy .proof::before, .bg-navy .proof::after, .bg-navy .proof .mark::before, .bg-navy .proof .mark::after { border-color: var(--sky); }
.caption { font-size: .88rem; color: var(--muted); margin-top: 10px; }
.bg-navy .caption { color: #AEBCD3; }

/* Service menu list (home) */
.menu { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.menu li { border-bottom: 1px solid var(--line); }
.menu a { display: grid; grid-template-columns: 112px 1fr auto; gap: 22px; align-items: center; padding: 18px 8px; text-decoration: none; color: inherit; transition: background-color .18s var(--ease); }
.menu a:hover { background: var(--white); }
.menu img { width: 112px; height: 84px; object-fit: cover; border: 1px solid var(--line); background: var(--tint); }
.menu h3 { margin: 0 0 4px; }
.menu p { margin: 0; color: var(--muted); font-size: .98rem; }
.menu .go { font-family: var(--display); font-size: 1.5rem; color: var(--crimson); transition: transform .18s var(--ease); }
.menu a:hover .go { transform: translateX(6px); }
@media (max-width: 600px) { .menu a { grid-template-columns: 84px 1fr; gap: 16px; padding: 16px 4px; } .menu img { width: 84px; height: 68px; } .menu .go { display: none; } .menu h3 { font-size: 1.35rem; } }
.sticky { position: static; }
@media (min-width: 861px) { .sticky { position: sticky; top: 100px; } }

/* Checklist */
.check { list-style: none; margin: 0; padding: 0; }
.check li { position: relative; padding-left: 34px; margin-bottom: 12px; }
.check li::before { content: ""; position: absolute; left: 0; top: .35em; width: 20px; height: 20px; border: 2px solid var(--crimson); }
.check li::after { content: ""; position: absolute; left: 7px; top: .38em; width: 6px; height: 12px; border: solid var(--crimson); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.bg-navy .check li::before, .bg-navy .check li::after { border-color: var(--sky); }

/* Industry rows */
.industry { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 56px); align-items: center; padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); }
.industry:first-of-type { border-top: 0; }
.industry.rev > .pics { order: 2; }
.pics { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 12px; }
.pics img { width: 100%; height: 100%; min-width: 0; object-fit: cover; }
.pics .big { grid-row: 1 / span 2; aspect-ratio: 4 / 3.6; }
.pics .small { aspect-ratio: 1 / 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; padding: 0; list-style: none; }
.chips li { font-size: .88rem; font-weight: 500; padding: 6px 11px; border: 1px solid var(--line); background: var(--white); color: var(--navy-800); }
.bg-navy .chips li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #E6ECF5; }
@media (max-width: 860px) { .industry, .industry.rev { grid-template-columns: 1fr; } .industry.rev > .pics { order: 0; } }

/* More grid (text-first) */
.more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.more-grid > a { display: flex; flex-direction: column; padding: 26px 24px; border: 2px solid var(--navy-800); background: var(--white); color: inherit; text-decoration: none; transition: background-color .15s var(--ease), transform .15s var(--ease), border-color .15s var(--ease); }
.more-grid > a:hover { background: var(--tint); transform: translateY(-2px); border-color: var(--crimson); }
.more-grid h4 { margin-bottom: 8px; font-size: 1.45rem; }
.more-grid p { margin: 0 0 14px; font-size: 1.08rem; line-height: 1.5; color: var(--muted); }
.more-grid .go { margin-top: auto; color: var(--crimson); font-weight: 700; font-size: 1rem; }
@media (max-width: 960px) { .more-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .more-grid { grid-template-columns: 1fr; } }

/* Process steps */
.steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; position: relative; }
.steps-4 { grid-template-columns: repeat(4, 1fr); }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: rgba(255,255,255,.12); }
.step { position: relative; padding-top: 34px; }
.step::before { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; background: var(--sky); }
.step h3 { color: var(--white); font-size: 1.2rem; }
.step p { color: #B9C6DA; margin: 0; font-size: .92rem; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; gap: 20px 28px; } .steps::before { display: none; } }
@media (max-width: 460px) { .steps { grid-template-columns: 1fr; } }

/* Spec table */
.spec { width: 100%; border-collapse: collapse; font-size: .98rem; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 12px 10px; border-bottom: 1px solid var(--line); }
.spec th { width: 34%; font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; font-size: 1.05rem; color: var(--navy-800); }
@media (max-width: 640px) { .spec tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); } .spec th, .spec td { display: block; width: auto; padding: 0; border-bottom: 0; } .spec th { margin-bottom: 4px; } }
.service-block { padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); scroll-margin-top: 150px; }
.service-block:first-of-type { border-top: 0; }
.service-block .split { align-items: start; }
.photo-stack { display: grid; gap: 12px; }
.photo-stack img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* Anchor/section nav bar (Services, Solutions, Industries, Work) */

/* Solutions cards (goal-based, text-first, no icons) */
.sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); }
.sol-grid a { display: block; background: var(--white); padding: 26px 24px; text-decoration: none; color: var(--ink); transition: background-color .15s var(--ease); }
.sol-grid a:hover { background: var(--tint); }
.sol-grid h3 { color: var(--navy-800); margin-bottom: 8px; }
.sol-grid p { margin: 0; color: var(--muted); font-size: .96rem; }
.sol-grid .go { color: var(--crimson); font-weight: 600; font-size: .9rem; display: inline-block; margin-top: 12px; }
@media (max-width: 860px) { .sol-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sol-grid { grid-template-columns: 1fr; } }

/* Gallery (home + work) */
.gallery { columns: 3; column-gap: 16px; }
.gallery figure { break-inside: avoid; margin: 0 0 16px; background: var(--white); border: 1px solid var(--line); }
.gallery img { width: 100%; height: auto; }
.gallery figcaption { padding: 10px 12px 12px; font-size: .9rem; color: var(--muted); }
.gallery figcaption strong { display: block; color: var(--navy-800); font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; font-size: 1.05rem; }
@media (max-width: 900px) { .gallery { columns: 2; } }
@media (max-width: 560px) { .gallery { columns: 1; } }

/* Work floating category bar */
/* Floating section bar: the Our Work bar from v3, now on every page with sections (Services, Solutions,
   Industries, Resources, the three guides). Sticks under the header, crimson chips, white for the section in
   view (scrollspy). When the chips overflow the bar scrolls sideways and shows a thin scrollbar on pointer devices. */
.work-bar { position: sticky; top: 76px; z-index: 20; background: var(--navy-800); border-bottom: 3px solid var(--crimson); }
.work-bar .wrap { display: flex; gap: 5px; padding: 11px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; scroll-behavior: smooth; }
.work-bar .wrap::-webkit-scrollbar { height: 6px; }
.work-bar .wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 3px; }
.work-bar .wrap::-webkit-scrollbar-track { background: transparent; }
@media (hover: none) { .work-bar .wrap { scrollbar-width: none; } .work-bar .wrap::-webkit-scrollbar { display: none; } }
.work-bar { position: sticky; }
.work-bar::before, .work-bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 56px; pointer-events: none; opacity: 0; transition: opacity .2s var(--ease); z-index: 1; }
.work-bar::before { left: 0; background: linear-gradient(to right, var(--navy-800) 20%, rgba(22,35,60,0)); }
.work-bar::after { right: 0; background: linear-gradient(to left, var(--navy-800) 20%, rgba(22,35,60,0)); }
.work-bar.can-left::before, .work-bar.can-right::after { opacity: 1; }
.work-bar a { flex: none; white-space: nowrap; font: 600 .8rem var(--text); color: #fff; background: var(--crimson); border: 0; padding: 7px 10px; border-radius: var(--radius); text-decoration: none; transition: background-color .15s var(--ease), transform .15s var(--ease); }
@media (max-width: 1000px) { .work-bar { top: 66px; } }
.work-bar a:hover { background: var(--crimson-700); color: #fff; transform: translateY(-1px); }
.work-bar a.is-active { background: #fff; color: var(--navy-900); }
.work-cat { padding-block: clamp(36px, 5vw, 60px); border-top: 1px solid var(--line); scroll-margin-top: 150px; }
.work-cat:first-of-type { border-top: 0; }
.work-cat .cat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.work-cat .cat-head h2 { margin: 0; }
.work-cat .cat-head p { margin: 0; color: var(--muted); max-width: 30em; }

/* Our Work carousels: native scroll-snap track, arrows + count + a thin
   crimson progress rule. Slides keep a fixed 4:3 window so a row reads level;
   tap a photo to see it uncropped in the viewer. */
.carousel { position: relative; }
.carousel-track { position: relative; display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 2px 6px; margin: -2px -2px 0; outline-offset: 4px; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 2px solid var(--crimson); }
.slide { flex: 0 0 auto; width: clamp(240px, calc((100% - 32px) / 3), 420px); scroll-snap-align: start; margin: 0; background: var(--white); border: 1px solid var(--line); }
.slide-btn { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: var(--tint); cursor: zoom-in; aspect-ratio: 4 / 3; overflow: hidden; }
.slide-btn img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease); }
.slide-btn:hover img { transform: scale(1.03); }
.slide-btn:focus-visible { outline: 2px solid var(--crimson); outline-offset: -2px; }
.slide figcaption { padding: 10px 12px 12px; font-size: .9rem; color: var(--muted); }
.slide figcaption strong { display: block; color: var(--navy-800); font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; font-size: 1.05rem; }
.slide .cap-3 { display: block; font-size: .84rem; color: var(--navy-700); margin-top: 3px; }
.slide.is-hilite { outline: 3px solid var(--crimson); outline-offset: 2px; }
.carousel-ui { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.car-progress { flex: 1; height: 3px; background: var(--line); position: relative; overflow: hidden; }
.car-progress span { position: absolute; top: 0; left: 0; height: 100%; width: 30%; background: var(--crimson); transition: transform .2s var(--ease), width .2s var(--ease); }
.car-count { font: 600 .82rem var(--text); letter-spacing: .06em; color: var(--muted); min-width: 5.5em; text-align: right; font-variant-numeric: tabular-nums; }
.car-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--navy-800); background: var(--navy-800); color: var(--white); border-radius: var(--radius); cursor: pointer; transition: background-color .15s var(--ease), transform .15s var(--ease), opacity .15s var(--ease); }
.car-btn svg { width: 18px; height: 18px; }
.car-btn:hover { background: var(--crimson); border-color: var(--crimson); transform: translateY(-1px); }
.car-btn:disabled { opacity: .3; cursor: default; transform: none; background: var(--navy-800); border-color: var(--navy-800); }
@media (max-width: 900px) { .slide { width: clamp(220px, calc((100% - 16px) / 2), 420px); } }
@media (max-width: 560px) { .slide { width: 82%; } .car-count { min-width: 4.5em; } }
@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } .slide-btn img, .car-btn, .car-progress span { transition: none; } }

/* Photo viewer (uncropped) */
.viewer { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1200px); width: auto; }
.viewer::backdrop { background: rgba(16,27,48,.92); }
.viewer-inner { position: relative; background: var(--navy-900); color: var(--white); padding: 14px 14px 12px; }
.viewer img { display: block; max-width: calc(96vw - 28px); max-height: 78vh; width: auto; height: auto; margin: 0 auto; }
.viewer-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 2px 0; font-size: .95rem; color: #AEBCD3; }
.viewer-cap strong { color: var(--white); font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 1.15rem; margin-right: 10px; }
.viewer-ui { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; }
.viewer-ui .car-btn { background: rgba(255,255,255,.12); border-color: transparent; }
.viewer-ui .car-btn:hover { background: var(--crimson); }
@media (max-width: 560px) { .viewer-inner { padding: 8px 8px 10px; } .viewer img { max-width: calc(96vw - 16px); max-height: 70vh; } .viewer-ui { top: 8px; right: 8px; } }

/* Reviews */
.rating { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rating .big { font-family: var(--display); font-size: 5rem; font-weight: 800; line-height: 1; color: var(--navy-800); }
.rating .stars { color: var(--gold); font-size: 1.6rem; letter-spacing: .08em; }
.rating .count { color: var(--muted); }
.review-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--white); border: 1px solid var(--line); }
.review-feature img { width: 100%; height: 100%; object-fit: cover; }
.review-feature .body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; }
blockquote { margin: 0; }
blockquote p { font-size: 1.2rem; line-height: 1.5; color: var(--ink); }
blockquote footer, .quote footer { font-size: .92rem; color: var(--muted); margin-top: 10px; }
blockquote footer strong { color: var(--navy-800); }
.quote-list { list-style: none; margin: 0; padding: 0; }
.quote-list li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.quote-list li:first-child { padding-top: 0; }
.quote-list p { margin: 0 0 6px; font-size: 1.05rem; }
.quote-list .stars { color: var(--gold); font-size: .95rem; letter-spacing: .06em; display: block; margin-bottom: 6px; }
.rev-source { font-size: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 860px) { .review-feature { grid-template-columns: 1fr; } .review-feature img { aspect-ratio: 4 / 3; } }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; font-size: 1.25rem; font-weight: 700; color: var(--navy-800); padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--crimson); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); max-width: 70ch; padding-bottom: 12px; }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; color: var(--navy-800); }
label .opt { font-weight: 400; color: var(--muted); }
input, select, textarea { width: 100%; font: 400 1rem var(--text); color: var(--ink); background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px 14px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(147,185,234,.45); }
textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: .9rem; color: var(--muted); }
.form-note-solo { margin: -4px 0 0; }
.form-success { display: none; padding: 22px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--crimson); }
.form-success.is-visible { display: block; }
.form-error { margin-top: 18px; padding: 16px 18px; background: #FFF4F6; border: 1px solid #E8B9C4; border-left: 4px solid var(--crimson); color: var(--ink); font-size: .96rem; }
.form-error[hidden] { display: none; }
.form-error a { color: var(--crimson-700); font-weight: 600; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

/* Contact card */
.contact-card { background: var(--white); border: 1px solid var(--line); padding: clamp(22px, 3vw, 34px); }
.contact-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; }
.contact-card dt { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-size: 1rem; padding-top: 2px; }
.contact-card dd { margin: 0; }
.contact-card .phone-big { font-family: var(--display); font-size: 2rem; font-weight: 700; color: var(--navy-800); text-decoration: none; letter-spacing: .02em; }
.contact-card .phone-big:hover { color: var(--crimson); }

/* Area list */
.area-list { columns: 2; column-gap: 32px; list-style: none; margin: 0; padding: 0; font-size: 1.02rem; }
.area-list li { padding: 6px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }

/* Proof note */

/* Industries: products + featured companies, every section */
.ind-meta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px 28px; margin: 18px 0 6px; }
.ind-meta h4, .ind-meta h3 { margin: 0 0 8px; font-size: 1.15rem; color: var(--navy-800); }
.ind-meta .chips { margin: 0; }
.ind-meta p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.ind-meta-dark h4, .ind-meta-dark h3 { color: var(--white); }
.ind-meta-dark p { color: #AEBCD3; }
@media (max-width: 700px) { .ind-meta { grid-template-columns: 1fr; } }
/* Before / after pair */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ba figure { margin: 0; position: relative; }
.ba img { width: 100%; height: auto; display: block; }
.ba figcaption { position: absolute; left: 10px; top: 10px; background: var(--navy-900); color: var(--white); font: 700 .8rem var(--text); letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; }

/* Guides */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.guide-grid > a { display: flex; flex-direction: column; background: var(--white); border: 2px solid var(--navy-800); color: inherit; text-decoration: none; transition: transform .15s var(--ease), border-color .15s var(--ease); }
.guide-grid > a:hover { transform: translateY(-2px); border-color: var(--crimson); }
.guide-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.guide-grid > a > div { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.guide-grid h3 { margin-bottom: 8px; }
.guide-grid p { color: var(--muted); font-size: 1rem; margin: 0 0 14px; }
.guide-grid .go { margin-top: auto; color: var(--crimson); font-weight: 700; }
@media (max-width: 900px) { .guide-grid { grid-template-columns: 1fr; } }
/* Guide cards: rows are sized by how many cards there are (n3 / n4 / n5 / n6 per row on desktop), a short last
   row is centered, so no card is left on a line by itself. */
.gcards { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 18px 0; }
.gcards > div { flex: 1 1 calc(25% - 9px); max-width: calc(25% - 9px); min-width: 0; border: 1px solid var(--line); border-top: 3px solid var(--crimson); background: var(--white); padding: 16px 18px; }
.gcards.n3 > div { flex-basis: calc(33.333% - 8px); max-width: calc(33.333% - 8px); }
.gcards.n5 > div { flex-basis: calc(20% - 9.6px); max-width: calc(20% - 9.6px); }
.gcards.n6 > div { flex-basis: calc(16.666% - 10px); max-width: calc(16.666% - 10px); padding: 16px 14px; }
/* inside a two-column split the cards have half the room: six become 3 x 2, four become 2 x 2 */
.split .gcards.n6 > div { flex-basis: calc(33.333% - 8px); max-width: calc(33.333% - 8px); padding: 16px 18px; }
.split .gcards.n4 > div { flex-basis: calc(50% - 6px); max-width: calc(50% - 6px); }
@media (max-width: 1100px) { .gcards.n5 > div, .gcards.n6 > div { flex-basis: calc(33.333% - 8px); max-width: calc(33.333% - 8px); } }
@media (max-width: 900px) { .gcards > div, .gcards.n3 > div, .gcards.n5 > div, .gcards.n6 > div { flex-basis: calc(50% - 6px); max-width: calc(50% - 6px); } }
@media (max-width: 520px) { .gcards > div, .gcards.n3 > div, .gcards.n5 > div, .gcards.n6 > div { flex-basis: 100%; max-width: 100%; } }
.gcards h4, .gcards h3 { margin: 0 0 6px; font-size: 1.25rem; color: var(--navy-800); }
.gcards p { margin: 0; color: var(--muted); font-size: .98rem; }
.gbest { margin: 10px 0 14px; }
.gbest h4, .gbest h3 { font-family: var(--text); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-700); margin: 0 0 4px; }
.gbest .chips { margin: 6px 0 0; }
.gwhy { background: var(--tint); border-left: 3px solid var(--navy-800); padding: 12px 16px; margin: 14px 0 18px; }
.gwhy strong { color: var(--navy-800); }
.service-block h3 { margin-top: 22px; }
.service-block h3:first-child { margin-top: 0; }
.mistakes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); margin-top: 18px; }
.mistakes > div { background: var(--white); padding: 20px 22px; }
.mistakes h4, .mistakes h3 { margin: 0 0 6px; color: var(--crimson-700); font-size: 1.2rem; }
.mistakes p { margin: 0; color: var(--muted); font-size: .98rem; }
.qlist { margin: 6px 0 16px; padding-left: 1.2em; }
.qlist li { margin: 6px 0; }
.mission-line { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--navy-800); letter-spacing: .01em; margin: 18px 0; }
.steps-light .step::before { background: var(--crimson); }
.steps-light::before { background: var(--line); }
.steps-light .step h3 { color: var(--navy-800); }
.steps-light .step p { color: var(--muted); }
/* Interactive checks */
.diag { border: 2px solid var(--navy-800); background: var(--white); padding: 22px 24px; margin-top: 16px; }
.check-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.check-q:first-of-type { border-top: 0; }
.check-q > span { font-weight: 500; flex: 1 1 280px; }
.check-btns { display: flex; gap: 6px; }
.check-btns button { font: 600 .84rem var(--text); padding: 7px 12px; border: 1.5px solid var(--navy-800); background: var(--white); color: var(--navy-800); border-radius: var(--radius); cursor: pointer; }
.check-q.is-yes button[data-v="yes"] { background: var(--navy-800); color: var(--white); }
.check-q.is-no button[data-v="no"] { background: var(--crimson); border-color: var(--crimson); color: var(--white); }
.check-result { margin-top: 18px; padding-top: 18px; border-top: 3px solid var(--crimson); }
.check-result h3 { margin: 0 0 8px; }
.check-flags { margin: 0; color: var(--navy-800); }
.check-flags li { margin: 4px 0 10px; }

.checkline { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.checkline input { width: 18px; height: 18px; accent-color: var(--crimson); }
.policy { max-width: 46em; }
.policy h2 { font-size: 1.6rem; margin: 30px 0 8px; }
.policy h2:first-child { margin-top: 0; }
.mission-line-light { color: var(--white); margin: 0; }
/* Stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.memberships { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px 56px; align-items: center; }
.memberships h2 { margin-bottom: 10px; }
.memberships p:last-child { margin: 0; }
.member-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.member-grid li { display: flex; align-items: center; justify-content: center; min-height: 112px; padding: 16px; background: var(--white); border: 1px solid var(--line); }
.member-grid img { display: block; max-height: 76px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 900px) { .memberships { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 420px) { .member-grid { gap: 10px; } .member-grid li { min-height: 92px; padding: 12px; } .member-grid img { max-height: 60px; } }
.stat strong { display: block; font-family: var(--display); font-size: 3rem; font-weight: 800; line-height: 1; color: var(--navy-800); }
.bg-navy .stat strong { color: var(--white); }
.stat span { color: var(--muted); font-size: .95rem; }
@media (max-width: 600px) { .stats { grid-template-columns: 1fr; gap: 16px; } }

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.team-grid .who { border-top: 3px solid var(--crimson); padding-top: 14px; }
.team-grid .who strong { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; font-size: 1.25rem; color: var(--navy-800); }
.team-grid .who span { color: var(--muted); font-size: .95rem; }
@media (max-width: 760px) { .team-grid { grid-template-columns: 1fr 1fr; } }

/* CTA band */
.cta-band { background: var(--crimson); color: var(--white); }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding-block: clamp(40px, 5vw, 64px); }
.cta-band h2 { color: var(--white); margin: 0; }
.cta-band p { margin: 6px 0 0; color: #FDECF0; max-width: 40em; }
.cta-band .btn-light { color: var(--crimson-700); }

/* Footer */
.site-footer { background: var(--navy-900); color: #B9C6DA; font-size: .95rem; }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-block: clamp(48px, 6vw, 72px); }
.site-footer h3 { color: var(--white); margin-bottom: 14px; font-size: 1.2rem; letter-spacing: .03em; }
.site-footer a { color: #DCE4F0; text-decoration: none; }
.site-footer a:hover { color: var(--sky); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer .brand img { width: 120px; }
.site-footer .fine { border-top: 1px solid rgba(255,255,255,.1); padding-block: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .85rem; color: #8E9DB6; }
.site-footer .fine a { color: #AEBCD3; }
.social { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.social li { margin: 0; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.45); color: var(--white); text-decoration: none; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); }
.social a:hover, .social a:focus-visible { background: var(--crimson); border-color: var(--crimson); color: var(--white); transform: translateY(-1px); }
.social svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.social-light { margin-top: 4px; }
.social-light a { border-color: var(--navy-800); color: var(--navy-800); }
.social-light a:hover, .social-light a:focus-visible { background: var(--crimson); border-color: var(--crimson); color: var(--white); }
.site-footer .social a { color: var(--white); }
.site-footer .social a:hover, .site-footer .social a:focus-visible { color: var(--white); }
.site-footer .members { border-top: 1px solid rgba(255,255,255,.1); padding-block: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; font-size: .9rem; color: #AEBCD3; }
.site-footer .members-label { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--white); font-size: 1rem; }
.site-footer .members-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.site-footer .member-tile { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 6px 12px; background: var(--white); border-radius: 6px; }
.site-footer .member-tile img { display: block; height: 42px; width: auto; max-width: 150px; object-fit: contain; }
@media (max-width: 900px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
  .site-footer .cols { grid-template-columns: 1fr; gap: 26px; }
  .site-footer .f-brand { display: contents; }
  .site-footer .f-brand .brand { order: 1; }
  .site-footer .f-visit { order: 2; }
  .site-footer .f-brand .social { order: 3; margin-top: 0; }
  .site-footer .f-explore { order: 4; }
  .site-footer .f-popular { order: 5; }
  .site-footer .f-brand .f-blurb { order: 6; margin-top: 0; }
  .site-footer .members { padding-block: 18px; }
}

/* Utilities */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 24px; } .mb-3 { margin-bottom: 40px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.hdr { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.hdr h2 { margin-bottom: 0; }
.hdr .lead { margin: 6px 0 0; }
.photo-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.photo-band img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 760px) { .photo-band { grid-template-columns: 1fr 1fr; } }
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); color: var(--navy-900); padding: 10px 14px; z-index: 100; }
.skip:focus { left: 8px; }

/* SPA route visibility */
.route { display: none; }
.route.is-active { display: block; }

[id] { scroll-margin-top: 120px; }
.work-bar ~ * [id] { scroll-margin-top: 140px; }
.work-cat { scroll-margin-top: 150px; }

/* Light desktop dropdown and mega-menu panels: dark focus ring */
@media (min-width: 1001px) { .site-header .mm :focus-visible, .site-header .dropdown :focus-visible { outline-color: var(--navy-700); } }

/* Menu toggle buttons (keyboard and screen-reader access). Desktop: the caret is its own button. Mobile: the link toggles. */
.dd-toggle { display: none; }
@media (min-width: 1001px) {
  .nav-item[data-dd] { display: flex; align-items: stretch; }
  .nav-item[data-dd] > .nav-link { padding-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
  .nav-item[data-dd] > .nav-link .caret { display: none; }
  .dd-toggle { display: inline-flex; align-items: center; padding: 10px 12px 10px 6px; margin: 0; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0 var(--radius) var(--radius) 0; color: #DCE4F0; cursor: pointer; transition: color .15s var(--ease), background-color .15s var(--ease); }
  .dd-toggle .caret { width: 10px; height: 10px; transition: transform .18s var(--ease); }
  .nav-item[data-dd]:hover > .nav-link, .nav-item[data-dd]:hover > .dd-toggle, .nav-item.open > .dd-toggle { color: var(--white); background: rgba(255,255,255,.06); }
  .nav-item.open > .dd-toggle .caret { transform: rotate(180deg); }
  .nav-link.is-active + .dd-toggle { color: var(--white); border-bottom-color: var(--crimson); border-radius: 0; }
  .nav-item[data-dd] > .nav-link.is-active { border-radius: 0; }
}

/* Phone links: 24px minimum tap targets (WCAG 2.5.8) without moving anything */
.phone-link { padding-top: 4px; margin-top: -4px; }
.phone-digits { padding-bottom: 8px; margin-bottom: -8px; }

/* Tap targets, revision Nov 9 (late). Additive only, phones and tablets (the site's 1000px nav breakpoint).
   Rule: every control gets at least a 24x24 touch area (WCAG 2.2 AA), 44x44 where it can be done without moving
   anything. Inline links and the sticky jump bars use invisible touch areas, so the layout matches the original. */
@media (max-width: 1000px) {
  /* Header: phone icon (was 18x22) and number (was 27px tall), menu button. Header height unchanged. */
  .phone-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -11px -13px; padding: 0; }
  .phone-digits { display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; }
  .menu-btn { min-height: 44px; }

  /* Footer link lists (were 18px tall) and the legal line: 44px rows */
  .site-footer li a, .site-footer .fine a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .site-footer ul:not(.social) li { margin-block: 0; }

  /* Member logos and social icons (were 42x42) */
  .member-tile a, .social li a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

  /* Sticky jump bars (buttons 30px tall): invisible 44px touch area, bar height unchanged */
  .work-bar a { position: relative; }
  .work-bar a::after { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }

  /* Carousel arrows (were 40x40) */
  .car-btn { min-width: 44px; min-height: 44px; }

  /* "Read them on Google" and industry links (were 27px tall) */
  .arrow-link { display: inline-flex; align-items: center; min-height: 44px; }

  /* Links inside text (email links, Directions, privacy note, inline links on About, Resources, Privacy,
     Ribbon cutting and the guides): invisible 44px-tall touch area. Inline padding does not move the line. */
  main p a:not(.btn):not(.arrow-link), main dd a:not(.phone-big), main .form-note a { padding-block: 12px; }

  /* Big phone number on Contact (38px tall): invisible touch area */
  .contact-card .phone-big { position: relative; }
  .contact-card .phone-big::after { content: ""; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }

  /* Sign Check quiz buttons on the guides (32px tall): invisible 44px touch area */
  .check-btns button { position: relative; }
  .check-btns button::after { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }

  /* Form checkbox (was 18x18): 24x24 box inside a full-width tappable label */
  .checkline input[type="checkbox"] { width: 24px; height: 24px; min-width: 24px; flex: none; }
  .checkline { min-height: 44px; display: flex; align-items: center; gap: 10px; }
}