/* Alpha Omega Roofing Co — production styles.
   Layout/appearance live as inline styles on the elements (unchanged from the
   approved design). This file only holds what inline styles cannot express:
   base resets, link colors, hover/focus states, and the responsive variants. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
* { box-sizing: border-box; }
body { margin: 0; padding: 0; background: #FFFFFF; color: #55677A; font-family: 'Source Sans 3', sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: #1B7FE3; text-decoration: none; }
a:hover { color: #1263C0; }
input::placeholder, textarea::placeholder { color: #A3B1BE; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid #1B7FE3; outline-offset: 2px; }

/* ---- hover / focus states ---- */
.x1:hover{color:#1B7FE3 !important}
.x2:hover{transform:translateY(-2px) !important;filter:brightness(0.93) !important;color:#FFFFFF !important}
.x3:hover{transform:translateY(-2px) !important;background:rgba(255,255,255,0.16) !important;color:#FFFFFF !important}
.x4:hover{transform:translateY(-3px) !important}
.x5:hover{transform:translateY(-5px) !important;box-shadow:0 20px 44px rgba(22,32,43,0.13) !important}
.x6:hover{background:rgba(255,255,255,0.16) !important;border-color:rgba(255,255,255,0.45) !important}
.x7:hover{background:linear-gradient(160deg, rgba(108,174,240,0.34) 0%, rgba(27,127,227,0.20) 100%) !important;border-color:rgba(140,200,250,0.70) !important;transform:translateY(-2px) scale(1.04) !important;box-shadow:0 8px 20px rgba(27,127,227,0.28), inset 0 1px 0 rgba(255,255,255,0.16) !important}
.x8:hover{background:#F5F8FB !important}
.x9:hover{transform:translateY(-4px) !important;box-shadow:0 18px 40px rgba(22,32,43,0.10) !important;border-color:#CFDCE7 !important}
.x10:hover{background:#16202B !important;border-color:#16202B !important;color:#FFFFFF !important;transform:translateY(-2px) !important}
.x11:hover{transform:translateY(-2px) !important;box-shadow:0 12px 26px rgba(22,32,43,0.12) !important;border-color:#C9D3DC !important}
.x12:hover{transform:translateY(-2px) !important}
.x13:hover{transform:translateY(-2px) !important;box-shadow:0 12px 28px rgba(22,32,43,0.10) !important;border-color:#CFDCE7 !important}
.x14:focus{border-color:#1B7FE3 !important;box-shadow:0 0 0 3px rgba(27,127,227,0.14) !important}
.x15:hover{filter:brightness(1.08) !important}
.x16:hover{background:#F7F9FA !important}
.x17:hover{color:#FFFFFF !important}
.x18:hover{color:#FFFFFF !important;border-bottom-color:#FFFFFF !important}
.x19:hover{background:#E2E9F0 !important;transform:translateY(-1px) !important}
.x20:hover{color:#0F5FAF !important;text-decoration:underline !important}
.x21:hover{transform:translateY(-4px) !important;background:rgba(255,255,255,0.085) !important;border-color:rgba(255,255,255,0.26) !important}
.x2,.x9,.x11,.x13,.x18,.x19,.x20,.x21{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease,color .2s ease,filter .2s ease}
.pg-faq:hover{border-color:#CFDCE8;box-shadow:0 8px 22px rgba(22,32,43,0.07)}
.pg-faq-q:hover{color:#1B7FE3}
.pg-faq-q:hover svg{color:#1B7FE3}
.js-arrow:hover { background: rgba(255,255,255,0.16) !important; border-color: rgba(255,255,255,0.45) !important; }

/* ---- secondary page states ---- */
.p1:hover{background:#1263C0 !important}
.p2:hover{border-color:#16202B !important}
.p3:hover{border-color:#1B7FE3 !important;background:#FFFFFF !important}
.p4:hover{border-color:#1B7FE3 !important;background:#FFFFFF !important}
.p5:hover{border-color:#1B7FE3 !important;background:#FFFFFF !important}
.p6:hover{border-color:#1B7FE3 !important;background:#FFFFFF !important}
.p7:hover{border-color:#1B7FE3 !important;background:#FFFFFF !important}
.p8:hover{border-color:#1B7FE3 !important;background:#FFFFFF !important}
.p9:hover{color:#FFFFFF !important}
.p10:hover{color:#FFFFFF !important}
.p11:hover{color:#FFFFFF !important}
.p12:hover{color:#FFFFFF !important}
.p13:hover{color:#FFFFFF !important}
.p14:hover{color:#FFFFFF !important}
.p15:hover{background:#1263C0 !important;transform:translateY(-2px) !important;box-shadow:0 20px 38px rgba(27,127,227,0.36) !important}
.p16:hover{border-color:#C9D4DD !important;transform:translateY(-2px) !important;box-shadow:0 14px 30px rgba(22,32,43,0.09) !important}
.p17:hover{border-color:#C9D4DD !important;transform:translateY(-2px) !important;box-shadow:0 14px 30px rgba(22,32,43,0.09) !important}
.p18:hover{border-color:#C9D4DD !important;transform:translateY(-2px) !important;box-shadow:0 14px 30px rgba(22,32,43,0.09) !important}
.p19:hover{border-color:#C9D4DD !important;transform:translateY(-2px) !important;box-shadow:0 14px 30px rgba(22,32,43,0.09) !important}
.p20:focus{border-color:#1B7FE3 !important;box-shadow:0 0 0 3px rgba(27,127,227,0.14) !important}
.p21:focus{border-color:#1B7FE3 !important;box-shadow:0 0 0 3px rgba(27,127,227,0.14) !important}
.p22:focus{border-color:#1B7FE3 !important;box-shadow:0 0 0 3px rgba(27,127,227,0.14) !important}
.p23:focus{border-color:#1B7FE3 !important;box-shadow:0 0 0 3px rgba(27,127,227,0.14) !important}
.p24:hover{filter:brightness(1.08) !important}

/* ---- viewport-conditional blocks ---- */
.m-only { display: none !important; }
.js-menu { display: none !important; }
.js-menu.open { display: flex !important; }
.js-mobilebar { display: none !important; }

/* --- desktop nav dropdowns --- */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-dd { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); display: grid; gap: 2px; min-width: 232px; background: #FFFFFF; border: 1px solid #E4EAEF; border-radius: 12px; box-shadow: 0 18px 44px rgba(22,32,43,0.16); padding: 10px; margin-top: 14px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 60; }
.nav-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-dd-wide { grid-template-columns: 1fr 1fr; min-width: 400px; }
.nav-item:hover > .nav-dd, .nav-item:focus-within > .nav-dd { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-dd a { display: block; padding: 9px 12px; border-radius: 8px; color: #37485C; font-weight: 600; font-size: 14.5px; white-space: nowrap; text-decoration: none; transition: background .16s ease, color .16s ease; }
.nav-dd a:hover { background: #F2F6FA; color: #1B7FE3; }

/* --- mobile nav groups --- */
.m-nav-link { color: #16202B; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 17px; padding: 13px 6px; border-bottom: 1px solid #E9EEF2; text-decoration: none; display: block; }
.m-nav-group { border-bottom: 1px solid #E9EEF2; }
.m-nav-sum { display: flex; align-items: center; justify-content: space-between; color: #16202B; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 17px; padding: 13px 6px; cursor: pointer; list-style: none; }
.m-nav-sum::-webkit-details-marker { display: none; }
.m-nav-sum svg { color: #8A9AAA; transition: transform .2s ease; flex: none; }
.m-nav-group[open] .m-nav-sum svg { transform: rotate(180deg); }
.m-nav-sub { display: flex; flex-direction: column; padding: 2px 0 12px 6px; }
.m-nav-sub a { color: #47596B; font-size: 15.5px; font-weight: 500; padding: 10px 12px; border-left: 2px solid #E4EAEF; text-decoration: none; }
.m-nav-sub a:hover { color: #1B7FE3; border-left-color: #1B7FE3; }
/* ---- sticky call button ---- */
@keyframes aoCallPulse {
  0%   { box-shadow: 0 3px 8px rgba(9,26,45,0.30), 0 14px 30px rgba(27,127,227,0.52), inset 0 1px 0 rgba(255,255,255,0.34), inset 0 -2px 6px rgba(6,52,102,0.30), 0 0 0 0 rgba(27,127,227,0.45); }
  65%  { box-shadow: 0 3px 8px rgba(9,26,45,0.30), 0 14px 30px rgba(27,127,227,0.52), inset 0 1px 0 rgba(255,255,255,0.34), inset 0 -2px 6px rgba(6,52,102,0.30), 0 0 0 15px rgba(27,127,227,0); }
  100% { box-shadow: 0 3px 8px rgba(9,26,45,0.30), 0 14px 30px rgba(27,127,227,0.52), inset 0 1px 0 rgba(255,255,255,0.34), inset 0 -2px 6px rgba(6,52,102,0.30), 0 0 0 0 rgba(27,127,227,0); }
}
.js-mobilebar:active { transform: scale(0.93); }
.js-mobilebar svg { filter: drop-shadow(0 1px 1px rgba(6,40,78,0.45)); }
@media (prefers-reduced-motion: reduce) {
  .js-mobilebar { animation: none !important; box-shadow: 0 3px 8px rgba(9,26,45,0.30), 0 14px 30px rgba(27,127,227,0.52), inset 0 1px 0 rgba(255,255,255,0.34), inset 0 -2px 6px rgba(6,52,102,0.30) !important; }
}

/* ---- header states ---- */
#site-header.scrolled { padding: 6px 0 !important; box-shadow: 0 6px 24px rgba(22,32,43,0.10) !important; border-bottom: none !important; }
#site-header.hidden { transform: translateY(-100%) !important; }
#site-header.scrolled .js-logo-img { height: 48px !important; }

/* ---- tablet / mobile (matches the approved breakpoint at 1040px) ---- */
@media (max-width: 1039px) {
  .m-only { display: flex !important; }
  .d-only { display: none !important; }
  .js-mobilebar { display: flex !important; animation: aoCallPulse 2.8s cubic-bezier(.25,.6,.3,1) infinite; }
  .js-logo-wrap { justify-content: center !important; flex: 1 !important; min-width: 0 !important; padding-right: 26px !important; gap: 9px !important; }
  .js-logo-img, #site-header.scrolled .js-logo-img { height: 54px !important; }
  .js-trust-grid { grid-template-columns: repeat(1,1fr) !important; }
  .js-cert-grid { grid-template-columns: repeat(1,1fr) !important; }
  .js-trustdiv, .js-certdiv { top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: auto !important; height: 1px !important; }
  .js-about-img { order: -1 !important; }
  .js-ribbon-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .js-bar-spacer { height: 74px !important; }
}
@media (max-width: 639px) {
  .js-ribbon-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .js-ribbon-item { align-items: center !important; gap: 14px !important; padding: 15px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.09) !important; }
}

/* --- page FAQ accordion --- */
.pg-faq { background: #FFFFFF; border: 1px solid #E4EAEF; border-radius: 13px; box-shadow: 0 4px 16px rgba(22,32,43,0.04); overflow: hidden; }
.pg-faq[open] { border-color: #CFDCE8; box-shadow: 0 10px 28px rgba(22,32,43,0.08); }
.pg-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; cursor: pointer; list-style: none; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; color: #16202B; letter-spacing: -0.3px; line-height: 1.35; }
.pg-faq-q::-webkit-details-marker { display: none; }
.pg-faq-q svg { color: #8A9AAA; transition: transform .22s ease; }
.pg-faq[open] .pg-faq-q svg { transform: rotate(180deg); color: #1B7FE3; }
.pg-faq-a { padding: 0 22px 22px; font-size: 16px; line-height: 1.65; color: #55677A; text-wrap: pretty; max-width: 62ch; }

/* ---- image zoom on hover ---- */
.zw { overflow: hidden; }
.zw img { transition: transform .55s cubic-bezier(.2,.6,.2,1); will-change: transform; }
.zw:hover img, .x5:hover .zw img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .zw img { transition: none; } .zw:hover img, .x5:hover .zw img { transform: none; } }

/* ---- service hero: headline, image, then body on mobile ---- */
.rr-hero { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(34px,5vw,60px); align-items: center; }
.rr-hero .rr-head { grid-column: 1; grid-row: 1; align-self: end; }
.rr-hero .rr-body { grid-column: 1; grid-row: 2; align-self: start; }
.rr-hero .rr-img  { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
@media (max-width: 1039px) {
  .rr-hero { display: flex; flex-direction: column; gap: 26px; }
  .rr-hero .rr-head, .rr-hero .rr-body, .rr-hero .rr-img { align-self: stretch !important; width: 100%; }
  .rr-hero .rr-head { order: 1; }
  .rr-hero .rr-img  { order: 2; }
  .rr-hero .rr-body { order: 3; }
}

/* ---- centred card rows: equal widths at every width, short last row centres ---- */
.card-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-inline: auto; }
.card-row > * { flex: 0 1 300px; max-width: 300px; }
@media (max-width: 679px) {
  .card-row > * { flex-basis: 100%; max-width: 100%; }
}

/* ---- alternating image side across a page: hero photo right, then left, right… ---- */
.sec-split.img-right > .s-txt { grid-column: 1; grid-row: 1; }
.sec-split.img-right > .s-img { grid-column: 2; grid-row: 1; }
.sec-split.img-left  > .s-img { grid-column: 1; grid-row: 1; }
.sec-split.img-left  > .s-txt { grid-column: 2; grid-row: 1; }

/* ---- two-column content sections: image first on mobile ---- */
.sec-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,4.5vw,56px); align-items: center; }
@media (max-width: 1039px) {
  .sec-split { display: flex; flex-direction: column; gap: 26px; }
  .sec-split > * { align-self: stretch !important; width: 100%; }
  .sec-split .s-img { order: 1; }
  .sec-split .s-txt { order: 2; }
}

/* ---- alternate page heroes (service + service-area pages; home page untouched) ---- */
.hv-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.hv-split.hv-rev { grid-template-columns: 1.04fr 1fr; }
.hv-pad-l { padding: clamp(52px,7vw,92px) clamp(26px,3.6vw,56px) clamp(52px,7vw,92px) max(24px, calc((100vw - 1180px) / 2)); }
.hv-pad-r { padding: clamp(52px,7vw,92px) max(24px, calc((100vw - 1180px) / 2)) clamp(52px,7vw,92px) clamp(26px,3.6vw,56px); }
.hv-media { position: relative; align-self: center; aspect-ratio: 4/3; height: auto; max-height: 560px; overflow: hidden; }
.hv-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.hv-center p { margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 1039px) {
  .hv-split, .hv-split.hv-rev { grid-template-columns: 1fr; }
  .hv-split .hv-txt { order: 1; }
  .hv-split .hv-media { order: 2; max-height: none; aspect-ratio: 16/9; }
  .hv-split .hv-media > img { border-radius: 0 !important; }
}

/* ---- hero variants: one per page, opt-in class on the hero <section>.
       Same type scale, blue accent and buttons everywhere; only the
       composition and photo framing change. Home page uses none of these. ---- */

/* A — wider copy column, tight square-ish photo frame (photo stays right) */
.hv-a .rr-hero { grid-template-columns: 1.08fr .92fr; }
.hv-a .rr-hero .rr-img .zw { box-shadow: 0 18px 44px rgba(22,32,43,0.13) !important; }
.hv-a .rr-hero .rr-img .zw,
.hv-a .rr-hero .rr-img .zw > div { border-radius: 10px !important; }
.hv-a .rr-hero .rr-img .zw > div { aspect-ratio: 1/1 !important; }

/* B — tinted stage, asymmetric photo corner */
.hv-b { background: linear-gradient(180deg, #F6F9FB 0%, #FFFFFF 78%) !important; }
.hv-b .rr-hero { grid-template-columns: 1fr .98fr; }
.hv-b .rr-hero .rr-img .zw { box-shadow: 0 30px 64px rgba(22,32,43,0.16) !important; }
.hv-b .rr-hero .rr-img .zw,
.hv-b .rr-hero .rr-img .zw > div { border-radius: 24px 24px 24px 92px !important; }

/* C — centred editorial, wide photo band beneath */
.hv-c .rr-hero { display: block; text-align: center; }
.hv-c .rr-hero .rr-head, .hv-c .rr-hero .rr-body { max-width: 840px; margin-inline: auto; }
.hv-c .rr-hero .rr-body p { margin-left: auto !important; margin-right: auto !important; max-width: 60ch; }
.hv-c .rr-hero .rr-body > div { justify-content: center; }
.hv-c .rr-hero .rr-img { margin-top: clamp(28px,3.4vw,44px); }
.hv-c .rr-hero .rr-img .zw,
.hv-c .rr-hero .rr-img .zw > div { border-radius: 24px !important; }
.hv-c .rr-hero .rr-img .zw > div { aspect-ratio: 21/9 !important; }

/* D — slightly landscape photo, deeper shadow */
.hv-d .rr-hero { grid-template-columns: 1.02fr .98fr; }
.hv-d .rr-hero .rr-img .zw { box-shadow: 0 34px 70px rgba(22,32,43,0.18) !important; }
.hv-d .rr-hero .rr-img .zw,
.hv-d .rr-hero .rr-img .zw > div { border-radius: 18px !important; }
.hv-d .rr-hero .rr-img .zw > div { aspect-ratio: 5/4 !important; max-height: 620px; }

/* E — photo bleeds to the right viewport edge */
.hv-e .rr-hero { grid-template-columns: 1fr 1.08fr; column-gap: clamp(30px,4vw,52px); }
.hv-e .rr-hero .rr-img { margin-right: calc(-24px - max(0px, (100vw - 1180px) / 2)); }
.hv-e .rr-hero .rr-img .zw { box-shadow: 0 26px 56px rgba(22,32,43,0.14) !important; }
.hv-e .rr-hero .rr-img .zw,
.hv-e .rr-hero .rr-img .zw > div { border-radius: 22px 0 0 22px !important; }

@media (max-width: 1039px) {
  .hv-c .rr-hero { display: flex; flex-direction: column; gap: 26px; }
  .hv-c .rr-hero .rr-head { order: 1; } .hv-c .rr-hero .rr-img { order: 2; } .hv-c .rr-hero .rr-body { order: 3; }
  .hv-c .rr-hero .rr-img { margin-top: 0; }
  .hv-e .rr-hero .rr-img { margin-right: 0; }
  .hv-e .rr-hero .rr-img .zw,
  .hv-e .rr-hero .rr-img .zw > div { border-radius: 18px !important; }
  /* hero photo: fills the column, height capped. Scoped away from the home page,
     whose hero nests differently (the .zw element itself is the ratio box). */
  body:not(:has(#home)) .rr-hero .rr-img .zw > div,
  body:not(:has(#home)) .hv-a .rr-hero .rr-img .zw > div,
  body:not(:has(#home)) .hv-b .rr-hero .rr-img .zw > div,
  body:not(:has(#home)) .hv-c .rr-hero .rr-img .zw > div,
  body:not(:has(#home)) .hv-d .rr-hero .rr-img .zw > div,
  body:not(:has(#home)) .hv-e .rr-hero .rr-img .zw > div { width: 100% !important; aspect-ratio: auto !important; height: clamp(220px, 56vw, 480px) !important; overflow: hidden !important; }
}

/* ---- dark hero: the home-page navy, reusable on inner pages.
       Combines with any hv-a..hv-e variant. ---- */
.hv-dark {
  background: radial-gradient(900px 620px at 82% -14%, rgba(27,127,227,0.34) 0%, rgba(22,32,43,0) 62%),
              linear-gradient(160deg,#22303F 0%,#16202B 46%,#0F171F 100%) !important;
  padding-top: clamp(48px,6.4vw,86px) !important;
  padding-bottom: clamp(48px,6vw,80px) !important;
}
.hv-dark .rr-head > div:first-child { color: #7CC4F7 !important; }
.hv-dark .rr-head > span:first-child { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.20) !important; color: #7CC4F7 !important; }
.hv-dark .rr-head h1 { color: #FFFFFF !important; }
.hv-dark .rr-head h1 span { color: #7CC4F7 !important; }
.hv-dark .rr-body p { color: #A9B9C7 !important; }
.hv-dark .rr-body .x11 { background: transparent !important; border-color: rgba(255,255,255,0.28) !important; color: #FFFFFF !important; }
.hv-dark .rr-body .x11:hover { border-color: #7CC4F7 !important; color: #FFFFFF !important; }
.hv-dark .rr-body > div:last-child { border-top-color: rgba(255,255,255,0.14) !important; }
.hv-dark .rr-body > div:last-child > span { color: #B7C6D3 !important; }
.hv-dark .rr-body > div:last-child svg { stroke: #7CC4F7 !important; }
.hv-dark .rr-img .zw > div { background: repeating-linear-gradient(45deg,#1E2A36 0 14px,#243140 14px 28px) !important; border-color: rgba(255,255,255,0.16) !important; }
.hv-dark .rr-img .zw > div > svg { stroke: #5E7488 !important; }
.hv-dark .rr-img .zw > div > span { color: #7E93A6 !important; }

/* ---- opt-in: square hero photo on phones (add .ar11-m to the .rr-img) ---- */
@media (max-width: 1039px) {
  body:not(:has(#home)) .rr-hero .rr-img.ar11-m .zw > div { aspect-ratio: 1/1 !important; height: auto !important; max-height: none !important; }
}

/* ---- mobile hardening: applies to every page except the home page ---- */
@media (max-width: 1039px) {
  body:not(:has(#home)) { overflow-x: hidden; }
  /* sticky FAQ/photo columns fight the stacked flow once a split collapses */
  .sec-split .s-img[style*="sticky"], .sec-split .s-txt[style*="sticky"] { position: static !important; top: auto !important; }
}
@media (max-width: 519px) {
  /* nowrap chips and trust rows overflow narrow phones; let them wrap */
  body:not(:has(#home)) main [style*="white-space:nowrap"], body:not(:has(#home)) footer [style*="white-space:nowrap"] { white-space: normal !important; }
}

/* ---- even card rows: column count always divides the item count ---- */
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; align-items: stretch; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; align-items: stretch; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; align-items: stretch; }
.g3x { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; align-items: stretch; }
@media (max-width: 1039px) { .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3x { grid-template-columns: 1fr; } .g3x .zw > div { max-height: 320px; } }
@media (max-width: 679px) { .g4, .g3, .g2 { grid-template-columns: 1fr; } }

/* ---- reviews rating panel: score block spans both rows, traits fill a 2x2 ---- */
.rv-rating { grid-template-columns: minmax(240px, 1.02fr) 1fr 1fr; }
.rv-rating > *:first-child { grid-row: span 2; }
.rv-rating > *:not(:first-child) { border-left: 1px solid #EDF1F5 !important; }
.rv-rating > *:nth-child(4), .rv-rating > *:nth-child(5) { border-top: 1px solid #EDF1F5 !important; }
@media (max-width: 899px) {
  .rv-rating { grid-template-columns: 1fr 1fr; }
  .rv-rating > *:first-child { grid-row: auto; grid-column: 1 / -1; }
  .rv-rating > *:nth-child(2), .rv-rating > *:nth-child(4) { border-left: none !important; }
  .rv-rating > *:nth-child(2), .rv-rating > *:nth-child(3) { border-top: 1px solid #EDF1F5 !important; }
}
@media (max-width: 599px) {
  .rv-rating { grid-template-columns: 1fr; }
  .rv-rating > *:not(:first-child) { border-left: none !important; border-top: 1px solid #EDF1F5 !important; }
}

/* ---- secondary signs as three separate cards on the same grid ---- */
.sign-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.sign-cards > * { background: #FFFFFF; border: 1px solid #E4EAEF; border-radius: 18px; box-shadow: 0 12px 30px rgba(22,32,43,0.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.sign-cards > *:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(22,32,43,0.11); border-color: #C9DCF0; }
@media (prefers-reduced-motion: reduce) { .sign-cards > *:hover { transform: none; } }
@media (max-width: 1039px) { .sign-cards { grid-template-columns: 1fr; } }

/* ---- secondary sign strip: three compact items, divided ---- */
.sign-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.sign-strip > * { border-right: 1px solid #EDF1F5; }
.sign-strip > *:last-child { border-right: none; }
@media (max-width: 899px) {
  .sign-strip { grid-template-columns: 1fr; }
  .sign-strip > * { border-right: none; border-bottom: 1px solid #EDF1F5; }
  .sign-strip > *:last-child { border-bottom: none; }
}

/* ---- progressive reveal inside a card grid ---- */
.more-grid > [data-more] { display: none !important; }
.more-grid.open > [data-more] { display: flex !important; }

/* ---- five-across sign cards (gutters) ---- */
@media (max-width: 1099px) { .gut-signs { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 759px) { .gut-signs { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 519px) { .gut-signs { grid-template-columns: 1fr !important; } }

/* ---- split-section photo panels: never taller than wide once stacked ---- */
@media (max-width: 1039px) {
  .sec-split .s-img > .zw > div { width: 100% !important; aspect-ratio: auto !important; height: clamp(220px, 58vw, 520px) !important; overflow: hidden !important; }
  .sec-split .s-img img { height: 100%; object-position: center; }
}

/* ---- problem→service rows: stack the service link under the problem on phones ---- */
@media (max-width: 599px) {
  .mp-row { grid-template-columns: auto 1fr !important; }
  .mp-row .mp-go { grid-column: 2; justify-self: start; margin-top: 6px; }
}

/* ---- recent work slider ---- */
.wk-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 3); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.wk-track::-webkit-scrollbar { display: none; }
.wk-track > * { scroll-snap-align: start; }
@media (max-width: 1039px) { .wk-track { grid-auto-columns: calc((100% - 18px) / 2); } }
@media (max-width: 679px) { .wk-track { grid-auto-columns: 88%; } }
.wk-btn { width: 46px; height: 46px; border-radius: 50%; background: #FFFFFF; border: 1.5px solid #D6DEE6; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #16202B; transition: transform .2s ease, border-color .2s ease, opacity .2s ease; flex: none; }
.wk-btn:hover { transform: translateY(-2px); border-color: #1B7FE3; color: #1B7FE3; }
.wk-btn[disabled] { opacity: .38; cursor: default; transform: none; }

/* ---- dark-section list rows: on hover the panel goes light, so flip the text dark ---- */
.x8d:hover strong { color: #16202B !important; }
.x8d:hover strong + span { color: #5F7386 !important; }
.x8d:hover svg { stroke: #1B7FE3 !important; }
.x8d:hover > span:first-child { background: #E8F2FD !important; border-color: #1B7FE3 !important; }

/* --- current-page indicator --- */
.nav-item > a.nav-current, .nav-item > a.nav-current-parent, nav > a.nav-current { color: #1B7FE3 !important; position: relative; }
.nav-item > a.nav-current::after, .nav-item > a.nav-current-parent::after { content: ""; position: absolute; left: 0; right: 14px; bottom: -7px; height: 2.5px; border-radius: 2px; background: #1B7FE3; }
nav > a.nav-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2.5px; border-radius: 2px; background: #1B7FE3; }
.nav-dd a[aria-current="page"] { background: #EAF3FD !important; color: #1B7FE3 !important; font-weight: 800 !important; }
.m-nav-link[aria-current="page"], .m-nav-sub a[aria-current="page"] { color: #1B7FE3 !important; font-weight: 800 !important; }
.m-nav-current-parent > .m-nav-sum { color: #1B7FE3 !important; }

/* --- expectation rows: hover on row + icon tile --- */
.exp-row > span:first-child { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; }
.exp-row > span:first-child svg { transition: stroke .22s ease; }
.exp-row:hover { background: #F5F9FD; }
.exp-row:hover > span:first-child { transform: translateY(-2px) scale(1.06); border-color: #1B7FE3 !important; box-shadow: 0 8px 18px rgba(27,127,227,0.20) !important; background: linear-gradient(180deg,#E7F2FE 0%,#D3E7FB 100%) !important; }

/* ---------- Our Work mosaic ---------- */
.ow-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(148px,16.5vw,228px);gap:clamp(11px,1.3vw,17px)}
.ow-grid>figure{margin:0;position:relative;overflow:hidden;border-radius:16px;background:#E7ECF1;box-shadow:0 10px 26px rgba(22,32,43,0.09)}
.ow-grid>figure>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.ow-grid>figure:hover>img{transform:scale(1.05)}
.ow-grid>figure>figcaption{position:absolute;left:0;right:0;bottom:0;padding:38px 16px 14px;color:#FFFFFF;font-size:14px;line-height:1.35;font-weight:600;letter-spacing:-0.1px;text-wrap:pretty;background:linear-gradient(to top,rgba(13,20,28,0.88) 0%,rgba(13,20,28,0.52) 52%,rgba(13,20,28,0) 100%)}
.ow-w8{grid-column:span 8}
.ow-w6{grid-column:span 6}
.ow-w4{grid-column:span 4}
.ow-h2{grid-row:span 2}
@media (max-width:1039px){
  .ow-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(132px,21vw,198px)}
  .ow-w8{grid-column:span 6}
  .ow-w6{grid-column:span 3}
  .ow-w4{grid-column:span 3}
}
@media (max-width:639px){
  .ow-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:38vw;gap:10px}
  .ow-w8,.ow-w6,.ow-w4{grid-column:span 1}
  .ow-h2{grid-row:span 1}
  /* every 8th photo becomes a large near-square feature tile */
  .ow-grid>figure:nth-child(8n+1){grid-column:span 2;grid-row:span 2}
  .ow-grid>figure{border-radius:13px}
  .ow-grid>figure>figcaption{padding:26px 11px 9px;font-size:11.8px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ow-grid>figure:nth-child(8n+1)>figcaption{padding:34px 15px 13px;font-size:14px;-webkit-line-clamp:3}
}

/* ---------- Our Work hero (text first when stacked) ---------- */
.ow-hero{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,4.5vw,56px);align-items:center;max-width:1180px;margin:0 auto;padding:0 24px}
.ow-hero-img{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;box-shadow:0 26px 56px rgba(22,32,43,0.16)}
.ow-hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.ow-hero-img{transition:box-shadow .35s ease}
.ow-hero-img img{transition:transform .7s cubic-bezier(.4,0,.2,1)}
.ow-hero-img:hover{box-shadow:0 34px 68px rgba(22,32,43,0.24)}
.ow-hero-img:hover img{transform:scale(1.045)}
@media (hover:none){.ow-hero-img:hover img{transform:none}}
@media (max-width:1039px){
  .ow-hero{grid-template-columns:1fr;gap:28px}
  .ow-hero-img{aspect-ratio:16/9}
}
@media (max-width:519px){.ow-hero-img{aspect-ratio:4/3}}

/* ---------- Our Work lightbox ---------- */
.ow-grid>figure{cursor:zoom-in}
.ow-grid>figure:focus-visible{outline:3px solid #1B7FE3;outline-offset:3px}
.ow-lb[hidden]{display:none}
.ow-lb{position:fixed;inset:0;z-index:120;background:rgba(8,13,19,0.95);display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.ow-lb-stage{margin:0;position:relative;max-width:min(1400px,calc(100% - 124px));display:flex;flex-direction:column;align-items:center;gap:14px}
.ow-lb-img{max-width:100%;max-height:calc(100vh - 176px);width:auto;height:auto;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,0.6);display:block;background:#0D141C}
.ow-lb-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:5px 14px;color:#E4EAEF;font-size:15px;line-height:1.4;font-weight:600;text-align:center;max-width:72ch}
.ow-lb-count{color:#8FA1B2;font-size:13px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.ow-lb-nav,.ow-lb-close{position:absolute;z-index:2;border:1.5px solid rgba(255,255,255,0.22);background:rgba(255,255,255,0.09);color:#FFFFFF;border-radius:12px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:background .2s ease, border-color .2s ease}
.ow-lb-nav:hover,.ow-lb-close:hover{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.42)}
.ow-lb-nav{width:52px;height:52px;top:50%;transform:translateY(-50%)}
.ow-lb-prev{left:clamp(8px,2vw,30px)}
.ow-lb-next{right:clamp(8px,2vw,30px)}
.ow-lb-close{width:46px;height:46px;top:clamp(10px,2vw,26px);right:clamp(10px,2vw,26px)}
@media (max-width:639px){
  .ow-lb{padding:10px;display:grid;grid-template-columns:auto auto;grid-template-rows:1fr auto;align-content:center;justify-content:center;gap:16px 14px}
  .ow-lb-stage{max-width:100%;grid-column:1 / -1;grid-row:1;align-self:center}
  .ow-lb-nav{position:static;width:48px;height:48px;grid-row:2;transform:none}
  .ow-lb-prev{grid-column:1;justify-self:end}
  .ow-lb-next{grid-column:2;justify-self:start}
  .ow-lb-img{max-height:calc(100vh - 250px)}
  .ow-lb-cap{font-size:14px}
}

/* ---------- city pages: weather feature icons ---------- */
.wx-grid > div > span:first-child{transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease, background .3s ease}
.wx-grid > div > span:first-child svg{transition:stroke .3s ease}
.wx-grid > div:hover > span:first-child{transform:translateY(-3px) scale(1.05) !important;border-color:#9FCCF4 !important;box-shadow:0 10px 22px rgba(27,127,227,0.22) !important;background:linear-gradient(180deg,#E4F1FE 0%,#CFE6FB 100%) !important}
.wx-grid > div:hover > span:first-child svg{stroke:#1567C4}
@media (hover:none){.wx-grid > div:hover > span:first-child{transform:none !important;box-shadow:0 2px 5px rgba(27,127,227,0.09) !important;background:linear-gradient(180deg,#F0F7FE 0%,#E1EFFC 100%) !important;border-color:#D3E5F7 !important}}

/* ---------- nearby-town chips that are not links: responsive but not clickable-looking ---------- */
.area-chip{transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.area-chip:hover{transform:translateY(-2px) !important;box-shadow:0 12px 28px rgba(22,32,43,0.10) !important;border-color:#CFDCE7 !important}

/* ---------- "Keep reading" cards: navigation affordance ---------- */
.kr-arrow{transition:transform .22s ease}
.kr-arrow svg{transition:stroke .22s ease}
.x11:hover .kr-arrow{transform:translateX(3px)}
.x11:hover .kr-arrow svg{stroke:#1B7FE3}

/* ---- storm promise strip: icon-left rows once it stacks on phones ---- */
@media (max-width: 599px) {
  .pm-strip { grid-template-columns: 1fr !important; }
  .pm-strip > * { display: grid !important; grid-template-columns: auto 1fr; column-gap: 15px; padding: 17px 20px !important; border-left: none !important; }
  .pm-strip > * + * { border-top: 1px solid #EDF1F5; }
  .pm-strip > * > span:first-child { width: 40px !important; height: 40px !important; border-radius: 11px !important; margin-bottom: 0 !important; grid-row: 1 / span 2; align-self: start; }
  .pm-strip > * > span:first-child svg { width: 20px; height: 20px; }
  .pm-strip h3 { grid-column: 2; margin: 1px 0 4px !important; }
  .pm-strip p { grid-column: 2; font-size: 14.5px !important; }
}

/* ---- dark reassurance list: icon-left rows once it stacks on phones ---- */
@media (max-width: 599px) {
  .pm-rows { grid-template-columns: 1fr !important; gap: 0 !important; margin-top: 22px !important; }
  .pm-rows > * { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,0.10); }
  .pm-rows > *:first-child { border-top: none; padding-top: 2px; }
  .pm-rows > * > span:first-child { width: 38px !important; height: 38px !important; margin-bottom: 0 !important; grid-row: 1 / span 2; align-self: start; }
  .pm-rows > * > strong, .pm-rows > * > span:last-child { grid-column: 2; }
}
@media (max-width: 599px) {
  .pm-rows-light > * { border-top-color: #EDF1F5; }
  .pm-rows-light > * > span:first-child { width: 40px !important; height: 40px !important; }
}
/* ---- about: portrait 4:5 crop on phones ---- */
@media (max-width: 1039px) {
  .sec-split .s-img.ar45-m > .zw > div { aspect-ratio: 4 / 5 !important; height: auto !important; }
}