/* J.B.R. Electrical — shared styles */
:root {
  --orange: #1f3c6a;
  --orange-hover: #2c5290;
  --steel: #b9c3d2;
  --black: #0a1732;
  --slate: #67707f;
  --ink: #17202e;
  --gray-bg: #f3f5f8;
  --body: #49505c;
  --mont: 'Archivo', sans-serif;
  --arch: 'Archivo', sans-serif;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); font-family: var(--arch); color: var(--ink); }
img { max-width: 100%; }
input::placeholder, textarea::placeholder { color: #777777; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 36px; }

/* ---------- type ---------- */
.kicker { font-family: var(--mont); font-size: 13px; font-weight: 800; letter-spacing: 0.14em; color: var(--orange); text-transform: uppercase; }
.display { margin: 0; font-family: var(--mont); font-weight: 900; line-height: 1.06; letter-spacing: -0.015em; }
.lead { font-size: 18px; line-height: 1.65; color: var(--body); }
.bars { display: flex; gap: 12px; }
.bars span { width: 7px; height: 26px; background: var(--orange); transform: skewX(-24deg); }
.rule { width: 190px; height: 3px; background: var(--orange); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--black); }
.site-header .bar { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo .mark { width: 38px; height: 38px; border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; }
.logo .logo-mark { height: 58px; width: auto; display: block; }
.logo .mark span { width: 9px; height: 20px; background: var(--black); transform: skewX(-22deg); }
.logo .word { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.logo .word b { font-family: var(--mont); font-weight: 900; font-size: 20px; color: #ffffff; letter-spacing: 0.02em; }
.logo .word small { font-family: var(--mont); font-weight: 700; font-size: 11px; color: #b3b3b3; letter-spacing: 0.22em; }

.nav { display: flex; align-items: center; gap: 38px; }
.nav a { color: #d6d6d6; text-decoration: none; font-family: var(--mont); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; }
.nav a:hover, .nav a.active { color: #ffffff; }
.nav a.active { border-bottom: 2px solid var(--orange); padding-bottom: 4px; }
.nav .cta { border: 2px solid var(--orange); color: #ffffff; font-weight: 800; padding: 13px 22px; transition: background 0.15s; }
.nav .cta:hover { background: var(--orange); }
.nav .cta.active { border-bottom: 2px solid var(--orange); padding-bottom: 13px; }

/* services dropdown */
.has-sub { position: relative; }
.has-sub > a { display: inline-flex; align-items: center; gap: 7px; }
.has-sub > a::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.sub { position: absolute; top: 100%; left: -22px; padding-top: 14px; display: none; min-width: 210px; }
.has-sub:hover .sub, .has-sub:focus-within .sub { display: block; }
.sub ul { margin: 0; padding: 10px 0; list-style: none; background: #08132a; border: 1px solid #223050; }
.sub a { display: block; padding: 11px 22px; font-size: 12.5px; }
.sub a:hover { background: #161616; }

/* hamburger */
.nav-toggle { display: none; background: none; border: none; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: #ffffff; margin: 5px 0; transition: transform 0.2s, opacity 0.2s; }
.mobile-nav { display: none; background: #08132a; border-top: 1px solid #223050; }
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: 16px 36px; color: #d6d6d6; text-decoration: none; font-family: var(--mont); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; border-bottom: 1px solid #1a2740; }
.mobile-nav a.active { color: var(--orange); }
.mobile-nav a.indent { padding-left: 58px; font-size: 13px; color: #9a9a9a; }
.mobile-nav .m-cta { color: var(--orange); font-weight: 800; }

/* ---------- sections ---------- */
.sec { padding: 100px 0; }
.sec-white { background: #ffffff; }
.sec-gray { background: var(--gray-bg); }
.sec-dark { background: var(--black); color: #ffffff; position: relative; }
.center { display: flex; flex-direction: column; align-items: center; text-align: center; }

.torn { position: relative; height: 44px; }
.torn > div { position: absolute; inset: 0; background: #ffffff; clip-path: polygon(0 62%, 3% 38%, 7% 70%, 12% 30%, 17% 58%, 22% 22%, 27% 66%, 33% 34%, 38% 74%, 44% 28%, 50% 60%, 56% 24%, 62% 68%, 68% 36%, 74% 72%, 80% 26%, 85% 62%, 90% 34%, 95% 70%, 100% 40%, 100% 100%, 0 100%); }
.torn.gray > div { background: var(--gray-bg); }

/* page hero (interior pages) */
.page-hero { position: relative; background: var(--black); overflow: hidden; }
.page-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.34; filter: saturate(0.8) brightness(0.85); }
.page-hero .shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6,19,53,0.72) 0%, rgba(13,22,38,0.42) 50%, rgba(9,13,21,0.9) 100%); }
.page-hero .inner { position: relative; padding-top: 96px; padding-bottom: 84px; }
.page-hero h1 { color: #ffffff; font-size: clamp(38px, 5.5vw, 72px); letter-spacing: -0.01em; }
.page-hero p { margin: 22px 0 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: #c9c9c9; max-width: 640px; text-wrap: balance; }

/* buttons */
.btn-solid { display: inline-block; background: var(--orange); color: #ffffff; text-decoration: none; font-family: var(--mont); font-weight: 800; font-size: 14px; letter-spacing: 0.1em; padding: 17px 32px; border: 2px solid rgba(255,255,255,0.30); cursor: pointer; transition: background 0.15s; }
.btn-solid:hover { background: var(--orange-hover); }
.btn-under { display: inline-flex; align-items: center; gap: 12px; color: #ffffff; text-decoration: none; font-family: var(--mont); font-weight: 800; font-size: 14px; letter-spacing: 0.1em; border-bottom: 2px solid var(--orange); padding-bottom: 6px; }
.btn-under:hover { color: var(--orange); }
.btn-under.dark { color: var(--ink); }

/* split feature (image + text) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split .ph { position: relative; }
.split .ph img { width: 100%; height: 480px; object-fit: cover; display: block; }
.split .ph::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 38px solid var(--orange); border-left: 38px solid transparent; }
.split .tx { display: flex; flex-direction: column; gap: 20px; }
.split h2, .split h3 { margin: 0; font-family: var(--mont); font-weight: 900; font-size: 38px; line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); }
.split p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--body); }

.list-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 28px; border-top: 1px solid #e6e6e6; padding-top: 22px; }
.list-2col span { font-size: 15px; color: #333333; }
.list-2col .more { color: #8a8a8a; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; width: 100%; text-align: center; }
.stats .num { font-family: var(--mont); font-weight: 900; font-size: 64px; line-height: 1; color: var(--ink); display: block; }
.stats .num em { font-style: normal; color: var(--orange); }
.stats .lbl { display: block; margin-top: 10px; font-size: 16px; font-weight: 500; color: var(--body); }
.sec-dark .stats .num { color: #ffffff; }
.sec-dark .stats .lbl { color: #9a9a9a; }

/* dark card grid */
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #223050; border: 1px solid #223050; }
.cards4 > div { background: var(--black); padding: 30px 26px; display: flex; flex-direction: column; gap: 10px; }
.cards4 b { font-family: var(--mont); font-weight: 800; font-size: 15px; color: #ffffff; }
.cards4 span { font-size: 14.5px; line-height: 1.6; color: #9a9a9a; }

/* light card grid (services overview) */
.svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e6e6e6; text-decoration: none; transition: border-color 0.15s; }
.svc-card:hover { border-color: var(--orange); }
.svc-card img { width: 100%; height: 240px; object-fit: cover; display: block; }
.svc-card .pad { padding: 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.svc-card h3 { margin: 0; font-family: var(--mont); font-weight: 900; font-size: 24px; color: var(--ink); }
.svc-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); flex: 1; }
.svc-card .go { font-family: var(--mont); font-weight: 800; font-size: 13px; letter-spacing: 0.1em; color: var(--orange); }

/* process steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps > div { border-top: 3px solid var(--orange); padding-top: 20px; }
.steps .n { font-family: var(--mont); font-weight: 900; font-size: 15px; color: var(--orange); letter-spacing: 0.1em; }
.steps b { display: block; margin-top: 8px; font-family: var(--mont); font-weight: 800; font-size: 18px; color: var(--ink); }
.steps p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--body); }

/* gallery */
.gallery3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gallery2 img { width: 100%; height: 440px; object-fit: cover; display: block; }
.gallery2 figure { margin: 0; }
.gallery2 figcaption { margin-top: 10px; font-size: 13.5px; color: #8a8a8a; }
.gallery3 img { width: 100%; height: 360px; object-fit: cover; display: block; }
.gallery3 figure { margin: 0; }
.gallery3 figcaption { margin-top: 10px; font-size: 13.5px; color: #8a8a8a; }
.gallery3 .tall img { height: 520px; }

/* photo band */
.ph-band { position: relative; }
.ph-band img { width: 100%; height: 440px; object-fit: cover; display: block; }
.ph-band::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 38px solid var(--orange); border-left: 38px solid transparent; }

/* FAQ */
.faq-item { border-top: 1px solid #e6e6e6; padding: 24px 0; }
.faq-item h3 { margin: 0; font-family: var(--mont); font-weight: 800; font-size: 18px; color: var(--ink); }
.faq-item p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--body); }

/* CTA band */
.cta-band { background: var(--black); position: relative; }
.cta-band .inner { padding: 90px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.cta-band h2 { margin: 0; font-family: var(--mont); font-weight: 900; font-size: clamp(32px, 4.2vw, 50px); letter-spacing: -0.015em; color: #ffffff; text-wrap: balance; }
.cta-band .row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 80px; }
.form-card { background: #ffffff; border: 1px solid #e2e0dc; padding: 44px; }
.form-col { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { font-family: var(--arch); font-size: 15px; padding: 15px 16px; border: 1px solid #d8d5cf; background: #fdfdfc; color: var(--ink); outline: none; }
select.field { padding: 15px 12px; }
textarea.field { resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* footer */
.site-footer { background: var(--black); padding: 60px 0 36px; }
.site-footer .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.site-footer nav { display: flex; gap: 36px; flex-wrap: wrap; padding-top: 6px; }
.site-footer nav a { color: #b3b3b3; text-decoration: none; font-family: var(--mont); font-weight: 700; font-size: 12.5px; letter-spacing: 0.12em; }
.site-footer nav a:hover { color: #ffffff; }
.site-footer nav a.phone { color: var(--orange); font-weight: 800; }
.site-footer .tagline { font-size: 14px; color: #8a8a8a; }
.site-footer .bottom { margin-top: 36px; border-top: 1px solid #1e1e1e; padding-top: 22px; display: flex; justify-content: space-between; gap: 24px; font-size: 13px; color: #6f6f6f; }

.hover-orange:hover { color: var(--orange) !important; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  .site-header .bar { height: 72px; }
  .logo .logo-mark { height: 48px; }
  .page-hero > img { opacity: 0.62; filter: saturate(1.05) brightness(1.0); }
  .page-hero .shade { background: linear-gradient(to bottom, rgba(6,19,53,0.6) 0%, rgba(13,22,38,0.22) 50%, rgba(9,13,21,0.82) 100%); }
  section#top > img { opacity: 0.6 !important; }
  .nav { display: none; }
  .nav-toggle { display: block; }
  .stats { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .stats .num { font-size: 48px; }
  .cards4 { grid-template-columns: 1fr 1fr; }
  .svc-cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .sec { padding: 70px 0; }
}
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split .ph img { height: 340px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .gallery3, .gallery2 { grid-template-columns: 1fr; }
  .gallery3 img, .gallery3 .tall img, .gallery2 img { height: 300px; }
}
@media (max-width: 760px) {
  .svc-detail { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .cards4 { grid-template-columns: 1fr; }
  .list-2col { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 26px; }
  .ph-band img { height: 260px; }
  .site-footer .top, .site-footer .bottom { flex-direction: column; }
  .site-footer .bottom { gap: 8px; }
}

/* mono brand theme: charcoal brick + silver accents (matches the card) */
.page-hero .kicker, .sec-dark .kicker, .cta-band .kicker { color: var(--steel); }
.page-hero .bars span, .sec-dark .bars span, .cta-band .bars span { background: var(--steel); }
.nav a.active { border-bottom-color: var(--steel); }
.nav .cta { border-color: var(--steel); }
.nav .cta:hover { background: #ffffff; color: var(--black); }
.nav .cta.active { border-bottom-color: var(--steel); }
.mobile-nav a.active { color: var(--steel); }
.mobile-nav .m-cta { color: var(--steel); }
.btn-under { border-bottom-color: var(--steel); }
.btn-under:hover { color: var(--steel); }
.btn-under.dark { border-bottom-color: var(--orange); }
.btn-under.dark:hover { color: var(--orange); }
.site-footer nav a.phone { color: var(--steel); }
/* brick texture from the brand card on dark surfaces */


/* ── premium pass: type, depth, motion ── */
html { scroll-behavior: smooth; }
::selection { background: var(--orange); color: #ffffff; }
:focus-visible { outline: 2px solid var(--orange-hover); outline-offset: 3px; }
body { font-variant-numeric: tabular-nums; }

.display, .page-hero h1, .split .tx h2 { font-stretch: 125%; }
.kicker, .steps .n { font-stretch: 113%; }
.logo .word b { font-stretch: 125%; }

/* rule mark before left-aligned kickers */
.split .tx .kicker, .page-hero .kicker { display: inline-flex; align-items: center; gap: 12px; }
.split .tx .kicker::before, .page-hero .kicker::before { content: ""; width: 30px; height: 2px; background: currentColor; opacity: 0.55; flex: none; }

/* blueprint grid gives light-gray sections depth */
.sec-gray { background-image: linear-gradient(rgba(31,60,106,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(31,60,106,0.05) 1px, transparent 1px); background-size: 44px 44px; }
.torn.gray > div { background-image: linear-gradient(rgba(31,60,106,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(31,60,106,0.05) 1px, transparent 1px); background-size: 44px 44px; }

/* soft light over the brick on CTA bands */


/* buttons feel physical */
.btn-solid, .btn-under, .nav .cta { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(10,23,50,0.28); }
.btn-solid:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.btn-under:hover { transform: translateX(3px); }

/* cards lift, imagery breathes */
.svc-card { overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.svc-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(10,23,50,0.14); }
.svc-card img { transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.svc-card:hover img { transform: scale(1.05); }
.split .ph { overflow: hidden; }
.split .ph img { transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.split .ph:hover img { transform: scale(1.045); }

/* inset frame line on photo bands */
.ph-band::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,0.4); pointer-events: none; z-index: 1; }

/* scroll reveal */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.16,1,0.3,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .svc-card, .split .ph img, .svc-card img, .btn-solid, .btn-under { transition: none !important; }
}

/* mobile: rein the expanded display type back in */
@media (max-width: 640px) {
  .display, .page-hero h1, .split .tx h2 { font-stretch: 106%; }
  .page-hero h1 { font-size: clamp(34px, 9.4vw, 60px); }
  #top .display { font-size: clamp(31px, 9.5vw, 58px) !important; }
}

/* lean hero refresh */
.logo .logo-mark { height: 74px; }
.btn-solid { background: #3a4d68; }
.btn-solid:hover { background: #47597a; }
.hero-ctas { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.btn-light, .btn-ghost { display: inline-block; text-decoration: none; font-family: var(--mont); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; padding: 17px 34px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.btn-light { background: #3a4d68; color: #ffffff; border: 2px solid #4c617e; }
.btn-light:hover { background: #47597a; border-color: #5d738f; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(8,14,24,0.35); }
.btn-light:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.btn-ghost { background: transparent; color: #ffffff; border: 2px solid rgba(185,195,210,0.55); }
.btn-ghost:hover { border-color: #ffffff; background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(0) scale(0.98); }
.trust-bar { margin-top: 56px; font-family: var(--mont); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: #b7c2d1; }
@media (max-width: 900px) {
  .logo .logo-mark { height: 66px; }
  .site-header .bar { height: 84px; }
}
@media (max-width: 640px) {
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-ctas a { width: 100%; text-align: center; box-sizing: border-box; }
  .trust-bar { margin-top: 44px; line-height: 2; }
}

.hero-eyebrow { display: inline-block; font-family: var(--mont); font-size: 12.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--steel); }

/* ── brand pass: brick hero+footer only, silver borders, dark strips ── */
.cta-band { border-top: 1px solid rgba(185,195,210,0.14); }
.stats-strip { background: #0a1732 url('/images/brick-tile.jpg'); background-size: 440px 1080px; position: relative; border-top: 1px solid rgba(185,195,210,0.12); border-bottom: 1px solid rgba(185,195,210,0.12); }
.stats-strip::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 90% at 50% 50%, rgba(6,13,28,0.18) 0%, rgba(6,13,28,0.72) 100%); pointer-events: none; }
.stats-strip .wrap { position: relative; }
.stats-strip .stats .num { color: #ffffff; font-size: 76px; }
.stats-strip .stats .num em { color: var(--steel); }
.stats-strip .stats .lbl { color: #98a4b4; }
.cards4 { gap: 16px; background: transparent; border: none; }
.cards4 > div { background: rgba(255,255,255,0.025); border: 1px solid rgba(185,195,210,0.22); padding: 26px 24px; }
.cards4 .cicon { width: 26px; height: 26px; stroke: #b7c2d1; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.proj { position: relative; overflow: hidden; }
.proj img { width: 100%; height: 360px; object-fit: cover; display: block; }
.proj::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,23,50,0.1) 40%, rgba(9,14,22,0.85) 100%); }
.proj .plabel { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 1; display: flex; flex-direction: column; gap: 3px; }
.proj .plabel b { font-family: var(--mont); font-weight: 800; font-size: 15px; color: #ffffff; letter-spacing: 0.02em; }
.proj .plabel span { font-family: var(--mont); font-weight: 600; font-size: 11.5px; letter-spacing: 0.14em; color: #b7c2d1; text-transform: uppercase; }
.estimate-panel { background: var(--black) url('/images/brick-tile.jpg'); background-size: 440px 1080px; border-top: 1px solid rgba(185,195,210,0.12); }
.estimate-panel .form-card { border: 1px solid rgba(185,195,210,0.3); }
.btn-under { border: 2px solid rgba(185,195,210,0.5); padding: 14px 28px; }
.btn-under:hover { border-color: #ffffff; color: #ffffff; background: rgba(255,255,255,0.05); }
.btn-under.dark { border-color: rgba(31,60,106,0.4); }
.btn-under.dark:hover { border-color: var(--orange); color: var(--orange); background: rgba(31,60,106,0.05); }
.site-footer { background: #14181e; padding: 72px 0 36px; }
.f-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid rgba(185,195,210,0.16); }
.f-brand { display: flex; flex-direction: column; gap: 18px; }
.f-h { font-family: var(--mont); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; color: #8fa0b5; text-transform: uppercase; margin-bottom: 4px; }
.f-col { display: flex; flex-direction: column; gap: 10px; }
.f-col a, .f-col span { color: #c3ccd8; text-decoration: none; font-size: 14.5px; line-height: 1.5; }
.f-col a:hover { color: #ffffff; }
.site-footer .bottom { border-top: none; margin-top: 0; padding-top: 24px; color: #7e8899; }
@media (max-width: 900px) {
  .f-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .stats-strip .stats .num { font-size: 54px; }
}
@media (max-width: 560px) {
  .f-grid { grid-template-columns: 1fr; }
  .proj img { height: 280px; }
  .site-footer { text-align: center; }
  .f-brand, .f-col { align-items: center; }
  .f-brand img { margin: 0 auto; }
  .site-footer .bottom { align-items: center; }
}

/* phases 1-3: straight edges, unified buttons, card details */
.torn { display: none; }
.btn-solid, .btn-under, .btn-under.dark, .svc-card .go { letter-spacing: 0.03em; }
.btn-solid { background: #3a4d68; border-color: #4c617e; }
.btn-solid:hover { background: #47597a; }
.hero-eyebrow { letter-spacing: 0.14em; }
.gallery2 figcaption, .site-footer .bottom { color: #8d95a3; }
.ichip { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(103,112,127,0.5); display: flex; align-items: center; justify-content: center; flex: none; }
.ichip svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-line { display: flex; align-items: center; gap: 14px; text-decoration: none; }

/* about refinement: no slash bars, tighter heroes, steel divider, founder card */
.bars { display: none; }
.page-hero { border-bottom: 3px solid #515c6b; }
.page-hero .inner { padding-top: 84px; padding-bottom: 72px; }
.hero-trust { margin: 18px 0 0; font-family: var(--mont); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; color: #9fabbd; }
.logo .logo-mark { height: 88px; }
.site-header .bar { height: 100px; }
.story-bp { background-image: linear-gradient(rgba(31,60,106,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(31,60,106,0.04) 1px, transparent 1px); background-size: 44px 44px; }
.founder-card { margin-top: 38px; display: inline-flex; flex-direction: column; gap: 6px; border: 1px solid #dbe2ec; border-left: 3px solid #3a4d68; background: #f8fafc; padding: 22px 28px; }
.founder-card .fc-label { font-family: var(--mont); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #67707f; }
.founder-card .fc-name { font-family: var(--mont); font-weight: 800; font-size: 18px; color: var(--ink); }
.founder-card .fc-line { font-size: 14.5px; color: var(--body); }
@media (max-width: 900px) {
  .logo .logo-mark { height: 102px; }
  .site-header .bar { height: 112px; }
}
@media (max-width: 640px) {
  .page-hero .inner { padding-top: 52px; padding-bottom: 46px; }
  .page-hero h1 { font-size: clamp(29px, 8.2vw, 52px); }
}

/* ── brand-match pass: monochrome steel, diamond motif, brick surfaces ── */
.site-header { border-bottom: 1px solid rgba(185,195,210,0.14); }
.split .tx .kicker::before, .page-hero .kicker::before { width: 8px; height: 8px; border: 1.5px solid currentColor; background: none; transform: rotate(45deg); opacity: 0.7; }
.rule { height: 3px; background: linear-gradient(90deg, #b9c3d2, #1f3c6a 50%, #b9c3d2); }
.cta-band { background: var(--black) url('/images/brick-tile.jpg'); background-size: 440px 1080px; }
.steps .n::after { content: ""; display: inline-block; width: 6px; height: 6px; border: 1.5px solid var(--orange); transform: rotate(45deg); margin-left: 10px; vertical-align: 2px; opacity: 0.6; }

/* ── v8 refinement: copper accent, trust strip, softer hierarchy, mobile CTA bar ── */
:root { --copper: #1f3c6a; --copper-bright: #2c5290; }

/* accent: labels, diamonds, links, focus, key stats */
.kicker { color: var(--copper); }
.page-hero .kicker, .sec-dark .kicker, .cta-band .kicker, .stats-strip .kicker { color: var(--steel); }
.steps .n { color: var(--copper); }
.steps .n::after { border-color: var(--copper); }
.steps > div { border-top-color: var(--copper); }
.stats .num em { color: var(--copper); }
.stats-strip .stats .num em, .sec-dark .stats .num em { color: var(--steel); }
.rule { background: linear-gradient(90deg, transparent, var(--copper) 50%, transparent); }
:focus-visible { outline-color: var(--copper); }
::selection { background: var(--copper); color: #ffffff; }
.btn-under:hover { color: #ffffff; border-color: #ffffff; background: rgba(255,255,255,0.05); }
.btn-under.dark:hover { color: var(--copper); border-color: var(--copper); background: rgba(31,60,106,0.05); }
.svc-card:hover { border-color: var(--copper); }
.svc-card .go { color: var(--copper); }
.f-col a:hover { color: #ffffff; }
.mobile-nav .m-cta { color: var(--steel); }
.hover-orange:hover { color: var(--copper) !important; }
.sec-dark .ichip, .estimate-panel .ichip { border-color: rgba(185,195,210,0.55); }

/* primary estimate path: copper buttons */
.btn-light { background: #3a4d68; border-color: #4c617e; color: #ffffff; }
.btn-light:hover { background: #47597a; border-color: #5d738f; color: #ffffff; }
.btn-solid { background: var(--copper); border-color: var(--copper); color: #ffffff; }
.btn-solid:hover { background: var(--copper-bright); }
.nav .cta { border-color: var(--steel); }
.nav .cta:hover { background: #ffffff; color: var(--black); }

/* trust strip below hero */
.trust-strip { background: #08132a; border-top: 1px solid rgba(185,195,210,0.14); border-bottom: 1px solid rgba(185,195,210,0.14); }
.ts-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 46px; padding: 19px 0; }
.ts-item { display: inline-flex; align-items: center; font-family: var(--mont); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: #b9c3d2; }
.ts-item + .ts-item::before { content: ""; width: 1px; height: 14px; background: rgba(185,195,210,0.3); flex: none; margin-left: -23.5px; margin-right: 22.5px; }
@media (min-width: 901px) and (max-width: 1079px) {
  .ts-row { gap: 14px 26px; }
  .ts-item { font-size: 12px; }
  .ts-item + .ts-item::before { margin-left: -13.5px; margin-right: 12.5px; }
}

/* softer typographic hierarchy: hero keeps 900, sections drop to 800 */
h2.display { font-weight: 800; }
.split h2, .split h3 { font-weight: 800; font-size: 34px; }
.svc-card h3 { font-weight: 800; }
.cta-band h2 { font-weight: 800; }
.kicker { font-size: 12.5px; letter-spacing: 0.1em; font-weight: 700; }
.lead { line-height: 1.75; }
.split p { line-height: 1.7; }

/* quicker reveals */
.rv { transform: translateY(14px); transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1); }

/* form: persistent labels */
.f-group { display: flex; flex-direction: column; gap: 7px; }
.f-lab { font-family: var(--mont); font-size: 12.5px; font-weight: 700; color: var(--slate); }
.f-group .field { width: 100%; box-sizing: border-box; }

/* mobile: services accordion + sticky CTA bar */
.m-svc-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid #1a2740; padding: 16px 36px; color: #d6d6d6; font-family: var(--mont); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; cursor: pointer; box-sizing: border-box; }
.m-svc-toggle span { color: var(--steel); font-size: 19px; font-weight: 600; line-height: 1; }
.m-sub { display: none; }
.m-sub.open { display: block; }
.m-sub a { background: rgba(255,255,255,0.02); }
.m-ctabar { display: none; }
@media (max-width: 900px) {
  .m-ctabar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: grid; grid-template-columns: 1fr 1fr; padding-bottom: env(safe-area-inset-bottom); }
  .m-ctabar a { display: flex; align-items: center; justify-content: center; padding: 16px 10px; text-decoration: none; font-family: var(--mont); font-weight: 800; font-size: 14px; letter-spacing: 0.04em; }
  .m-ctabar .mc-call { background: #08132a; color: #ffffff; border-top: 1px solid rgba(185,195,210,0.25); }
  .m-ctabar .mc-est { background: #ffffff; color: #0a1732; }
  body { padding-bottom: 52px; }
  .ts-row { flex-direction: column; align-items: center; gap: 9px; padding: 18px 0; }
  .ts-item { font-size: 12.5px; }
  .ts-item + .ts-item::before { display: none; }
  #top .wrap { padding-top: 60px !important; padding-bottom: 64px !important; }
  #services { padding: 60px 0 20px !important; }
  .split h2, .split h3 { font-size: 29px; }
}

/* ── client punch list 2026-07-22: gray header, navy nav, bigger logos, cta heading font ── */
.site-header { background: #e3e6ea; border-bottom: 1px solid #c9cfd8; }
.nav a { color: #1f3c6a; }
.nav a:hover, .nav a.active { color: #0a1732; }
.nav a.active { border-bottom-color: #1f3c6a; }
.nav .cta { border-color: #1f3c6a; color: #1f3c6a; }
.nav .cta:hover { background: #1f3c6a; color: #ffffff; }
.nav .cta.active { border-bottom-color: #1f3c6a; }
.sub ul { background: #eef0f4; border: 1px solid #c9cfd8; }
.sub a:hover { background: #dfe3e9; color: #0a1732; }
.nav-toggle span { background: #1f3c6a; }
.logo .logo-mark { height: 106px; }
.site-header .bar { height: 118px; }
@media (max-width: 900px) {
  .logo .logo-mark { height: 102px; }
  .site-header .bar { height: 112px; }
}
.cta-band h2 { font-stretch: 125%; }
@media (max-width: 640px) {
  .cta-band h2 { font-stretch: 106%; }
}

/* ── client 2026-07-22: light gray footer + mobile nav to match header, navy text ── */
.site-footer { background: #e3e6ea; border-top: 1px solid #c9cfd8; }
.f-h { color: #1f3c6a; }
.f-col a, .f-col span { color: #17202e; }
.f-col a:hover { color: #1f3c6a; }
.site-footer .tagline { color: #49505c; }
.site-footer .bottom { color: #5a6270; }
.mobile-nav { background: #e3e6ea; border-top: 1px solid #c9cfd8; }
.mobile-nav a { color: #1f3c6a; border-bottom: 1px solid #cdd3db; }
.mobile-nav a.active { color: #0a1732; }
.mobile-nav a.indent { color: #49505c; }
.mobile-nav .m-cta { color: #0a1732; }
.m-svc-toggle { color: #1f3c6a; border-bottom: 1px solid #cdd3db; }
.m-svc-toggle span { color: #1f3c6a; }
.m-sub a { background: rgba(10,23,50,0.05); }

/* ── about: our story with owner photo ── */
.story-grid { display: grid; grid-template-columns: 1fr 360px; gap: 60px; align-items: start; }
.story-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 140px; }
.owner-photo { position: relative; }
.owner-photo img { width: 100%; height: auto; display: block; }
.owner-photo::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 34px solid var(--orange); border-left: 34px solid transparent; }
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; gap: 44px; }
  .story-side { position: static; max-width: 440px; }
}

/* ── client 2026-07-22: drop diamond marks on section labels ── */
.split .tx .kicker::before, .page-hero .kicker::before { content: none; }
.steps .n::after { content: none; }

/* ── home: full-bleed truck feature ── */
.truck-feature { position: relative; overflow: hidden; background: var(--black); }
.truck-feature > img { width: 100%; height: clamp(440px, 52vw, 660px); object-fit: cover; object-position: center 62%; display: block; }
.truck-feature .tf-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,23,50,0.92) 0%, rgba(10,23,50,0.42) 42%, rgba(10,23,50,0.04) 72%); }
.truck-feature .tf-inner { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 48px; }
.truck-feature .tf-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.truck-feature h2 { margin: 12px 0 0; font-family: var(--mont); font-weight: 800; font-size: clamp(30px, 4vw, 46px); line-height: 1.06; letter-spacing: -0.01em; color: #ffffff; }
.truck-feature .tf-sub { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: #d5dce6; max-width: 540px; text-wrap: pretty; }
.truck-feature .tf-chips { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 4px; }
.truck-feature .tf-chip { font-family: var(--mont); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; color: #ffffff; text-decoration: none; border: 1px solid rgba(255,255,255,0.38); padding: 10px 15px; background: rgba(10,23,50,0.4); }
a.tf-chip:hover { background: rgba(255,255,255,0.14); }
@media (max-width: 700px) {
  .truck-feature > img { height: 480px; }
  .truck-feature .tf-inner { padding-bottom: 34px; }
  .truck-feature .tf-row { align-items: flex-start; flex-direction: column; }
}

/* full-vehicle split photos: no crop */
.split .ph.ph-natural img { height: auto; }

/* navy chips for light sections */
.chip-navy { font-family: var(--mont); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; color: #1f3c6a; text-decoration: none; border: 1.5px solid #1f3c6a; padding: 9px 14px; }
a.chip-navy:hover { background: #1f3c6a; color: #ffffff; }