/* ============================================================
   Premier Waterproofing & Foundation Repair — shared stylesheet
   Owned by the orchestrator. Page subagents may ONLY append page-scoped
   rules below, each under a banner comment reading: page: SLUG
   Do not edit the token / header / footer sections above that.
   ============================================================ */

:root {
  --navy: #001d91;
  --navy-dark: #001472;
  --blue: #165fdc;
  --blue-link: #116dff;
  --gold: #f6bb06;
  --red: #e03939;
  --charcoal: #282626;
  --ink: #2b2b2b;
  --muted: #5a5f6b;
  --line: #e6e8ee;
  --bg: #ffffff;
  --bg-soft: #f4f6fb;
  --bg-gray: #f2f2f2;
  --white: #ffffff;
  --radius: 10px;
  --radius-pill: 999px;
  /* Source design motif: a single large radius on the top-right corner only.
     Used on every photo frame, card and button on the live site. */
  --corner: 0 75px 0 0;
  --corner-sm: 0 40px 0 0;
  --corner-btn: 0 30px 0 0;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);
  --shadow-md: 0 10px 30px rgba(0, 20, 114, .12);
  --maxw: 1200px;
  --head: "Barlow Condensed", "Oswald", "Segoe UI", Arial, sans-serif;
  --body: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 15px;
}

/* Source uses Barlow Condensed SemiBold for section headings, Bold for the
   home h1. Headings are black on the live site, not navy. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--head);
  color: #000;
  line-height: 1.2;
  margin: 0 0 .6em;
  font-weight: 600;
}
h1 { font-weight: 700; }

p { margin: 0 0 1.1em; }

a { color: var(--blue-link); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--navy);
  color: #fff;
  font-family: var(--head);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--corner-btn);
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease;
}
.btn:hover { background: var(--blue); text-decoration: none; box-shadow: var(--shadow-md); }
/* Solid white disc with a navy chevron, as on the source buttons. */
.btn .btn-arrow {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}
.btn--ghost { background: transparent; border: 2px solid #fff; }
.btn--ghost:hover { background: #fff; color: var(--navy); }
.btn--ghost .btn-arrow { background: #fff; color: var(--navy); }

/* ---------- Header / Nav ----------
   Source header is two rows: a thin navy utility strip carrying the phone
   number, then a white nav row with the circular badge logo overhanging it.
   The header is in normal flow on inner pages; on the home page it overlays
   the (light) hero photo and the nav row is transparent. */
.site-header {
  position: relative;
  z-index: 100;
}
.header-top { background: var(--navy); }
.header-top-inner {
  max-width: none;
  margin: 0 auto;
  padding: 0 clamp(18px, 6vw, 120px);
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.header-phone {
  color: #fff;
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.header-phone:hover { color: #fff; text-decoration: none; opacity: .85; }
.header-phone .phone-ico {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
}

.header-main { background: #fff; }
.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 78px;
  padding: 0 clamp(18px, 6vw, 120px);
  max-width: none;
  margin: 0 auto;
}
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img {
  width: 144px;
  height: 144px;
  object-fit: contain;
  /* Badge overhangs both header rows, as on the source. */
  margin: -40px 0 -32px;
  position: relative;
  z-index: 3;
}
.brand .brand-name { position: absolute; left: -9999px; }

.primary-nav { margin-left: auto; margin-right: clamp(0px, 7vw, 140px); }
.primary-nav > ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.primary-nav a,
.primary-nav .menu-btn {
  display: block;
  color: var(--charcoal);
  font-family: var(--head);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 15px;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s ease;
}
.primary-nav a:hover,
.primary-nav .menu-btn:hover { color: var(--blue); text-decoration: none; }
.primary-nav li.current > a,
.primary-nav li.current > .menu-btn { color: var(--blue); }

.has-sub { position: relative; }
.has-sub > .menu-btn::after {
  content: "\25BE";
  font-size: 11px;
  margin-left: 6px;
  vertical-align: middle;
}
.submenu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 258px;
  background: #fff;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-sub:hover .submenu,
.has-sub:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu a {
  color: var(--charcoal);
  letter-spacing: .04em;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 20px;
}
.submenu a:hover { background: var(--bg-soft); color: var(--blue); }

.header-cta { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.header-cta .btn {
  background: var(--navy);
  border-radius: var(--corner-sm);
  font-size: 16px;
  padding: 15px 30px;
  letter-spacing: .06em;
}
.header-cta .btn:hover { background: var(--blue); color: #fff; }

/* Home page: header overlays the (light) hero photo, nav row transparent. */
.site-header.is-overlay { position: absolute; left: 0; right: 0; top: 0; }
.site-header.is-overlay .header-main { background: transparent; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 2px solid rgba(40, 38, 38, .4);
  border-radius: 4px;
  color: var(--charcoal);
  font-size: 20px;
  padding: 6px 12px;
  cursor: pointer;
}

/* ---------- Generic page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  min-height: 330px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: #55585c;
}
.page-hero img.hero-band {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Source darkens the banner photo with a neutral scrim, not a navy wash. */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .34);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 {
  color: #fff;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0;
}

/* ---------- Sections ---------- */
section { padding: 64px 0; }
.section-gray { background: var(--bg-gray); }
.section-soft { background: var(--bg-soft); }
.eyebrow {
  color: var(--red);
  font-family: var(--head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
  margin-bottom: 10px;
}
.lead { font-size: 18px; color: var(--muted); }
.center { text-align: center; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
}
.media-frame { border-radius: var(--corner); overflow: hidden; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
}
.svc-card {
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.svc-card img {
  width: 100%;
  height: 218px;
  object-fit: cover;
  border-radius: var(--corner);
}
.svc-card .svc-body { padding: 18px 20px 24px; }
.svc-card h4 { margin: 0 0 10px; font-size: 24px; color: #000; }
.svc-card p { font-size: 14px; color: #4a4a4a; margin: 0; line-height: 1.45; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  /* Texture ships as a black faceted JPEG; the source tints it navy. Lighten
     it against the navy base to recover the facets, then lay a navy scrim
     back over the top so the hue stays blue rather than drifting violet. */
  background-color: var(--navy);
  background-image: linear-gradient(rgba(0, 29, 145, .55), rgba(0, 29, 145, .55)), url("orig/footer-bg.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, lighten;
  color: #e3e8fb;
  padding: 62px 0 0;
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr .8fr 1fr;
  gap: 34px;
}
.site-footer h4 {
  color: #fff;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.site-footer a { color: #d7ddf6; }
.site-footer a:hover { color: var(--gold); }
.hours-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; max-width: 260px; }
.hours-row span:last-child { color: #fff; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { padding: 4px 0; }
.emergency {
  display: inline-block;
  margin-top: 12px;
  color: var(--gold);
  font-family: var(--head);
  font-weight: 800;
  letter-spacing: .04em;
}
/* Source shows the six accepted-payment marks as a single white tile. */
.pay-badges {
  display: grid;
  grid-template-columns: repeat(3, 54px);
  gap: 2px;
  background: #fff;
  padding: 6px;
  width: max-content;
  margin-bottom: 18px;
}
.pay-badges img { width: 54px; height: 34px; object-fit: contain; }
.social-row { display: flex; gap: 12px; }
.social-row a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  transition: transform .2s ease;
}
.social-row a:hover { transform: translateY(-2px); }
.social-row img { width: 34px; height: 34px; object-fit: contain; }
.footer-bottom {
  margin-top: 52px;
  background: var(--blue);
  padding: 14px 0;
  text-align: center;
  font-size: 13px;
  color: #fff;
}

/* ---------- Live / emergency status dot ---------- */
.live-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 8px;
  vertical-align: middle;
  animation: pulse 1.8s ease-in-out infinite;
}

/* ---------- Motion (shared) ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(246, 187, 6, .6); }
  50%      { transform: scale(1.15); box-shadow: 0 0 0 7px rgba(246, 187, 6, 0); }
}
@keyframes zoomInHero {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* On-load reveals: animation always runs, element always ends visible.
   No CSS ever leaves real content at opacity:0 as a resting state. */
.reveal { animation: fadeUp .7s ease both; }
.reveal-1 { animation: fadeUp .7s ease both .08s; }
.reveal-2 { animation: fadeUp .7s ease both .18s; }
.reveal-3 { animation: fadeUp .7s ease both .28s; }
.reveal-4 { animation: fadeUp .7s ease both .38s; }

/* Scroll reveal: starts VISIBLE here; the shared script applies the hidden
   state at runtime only after its IntersectionObserver has attached, then
   removes it when the element scrolls into view. If the script never runs,
   content simply shows with no effect. */
.io-ready .io { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.io-ready .io.in-view { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .io-ready .io { opacity: 1 !important; transform: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .nav-toggle { display: inline-block; }
  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: var(--shadow-md);
    padding: 10px 0 18px;
  }
  .primary-nav.open { display: block; }
  .primary-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav a, .primary-nav .menu-btn { width: 100%; text-align: left; }
  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: var(--bg-soft);
  }
  .brand img { width: 84px; height: 84px; margin: -18px 0 -14px; }
  .header-cta .btn { padding: 12px 18px; font-size: 14px; }
}
@media (max-width: 620px) {
  .footer-grid { grid-template-columns: 1fr; }
  section { padding: 48px 0; }
}

/* ============================================================
   page: index
   ============================================================ */
/* Hero photo is light on the left by design — the source lays dark charcoal
   and blue type straight onto it with NO overlay tint. */
.home-hero {
  position: relative;
  min-height: 780px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #eef0f2;
  padding: 0;
  border-bottom: 5px solid var(--navy);
}
.home-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: zoomInHero 8s ease both;
}
.home-hero .hero-dots { display: none; }
.home-hero .hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1020px;
  padding-top: 60px;
}
.home-hero h1 {
  font-size: clamp(30px, 4.4vw, 55px);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0 0 34px;
}
/* Two-tone headline, exactly as the source sets it. */
.home-hero h1 .l1 { color: var(--charcoal); }
.home-hero h1 .l2 { color: var(--navy); }
.home-hero h1 .l3 { color: var(--blue); }
.home-hero h1 .l1,
.home-hero h1 .l2,
.home-hero h1 .l3 { display: block; }
.home-hero .hero-btn { background: var(--navy); font-size: 16px; padding: 16px 26px; }
.home-hero .hero-btn:hover { background: var(--blue); color: #fff; }

.about-band { padding: 90px 0; }
.about-band .about-media { position: relative; }
.about-band .about-photo {
  width: 100%;
  border-radius: var(--corner);
  position: relative;
  z-index: 2;
}
.about-band .about-accent {
  position: absolute;
  left: -26px;
  top: -26px;
  width: 190px;
  opacity: .9;
  z-index: 1;
}
.about-band h2 { font-size: clamp(26px, 3.2vw, 40px); }

.services-band { padding: 80px 0 96px; }
.services-band h2 { font-size: clamp(26px, 3.2vw, 40px); }
/* Source lays the five cards out 3-up then 2-up, centred. */
.services-band .card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
}
.services-band .card-grid .svc-card:nth-child(4) { grid-column: 1 / 2; }
.services-band .card-grid .svc-card:nth-child(5) { grid-column: 2 / 3; }
/* transform, not margin, so the offset never widens the grid */
.services-band .card-grid .svc-card:nth-child(4),
.services-band .card-grid .svc-card:nth-child(5) { transform: translateX(calc(50% + 13px)); }
.services-band .card-grid .svc-card:nth-child(4):hover,
.services-band .card-grid .svc-card:nth-child(5):hover { transform: translateX(calc(50% + 13px)) translateY(-6px); }

.reliable-band { position: relative; padding: 80px 0; overflow: hidden; }
.reliable-band .reliable-dots {
  position: absolute;
  right: 0;
  top: 40px;
  width: 180px;
  opacity: .6;
}

/* Full-bleed project filmstrip carousel */
.gallery-band { padding: 0; position: relative; }
.gallery-swiper { width: 100%; overflow: hidden; }
.gallery-swiper .swiper-slide {
  width: 464px;
  max-width: 72vw;
  aspect-ratio: 1 / 1;
  height: auto;
}
.gallery-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-swiper .swiper-button-prev,
.gallery-swiper .swiper-button-next {
  color: #fff;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6));
}
.gallery-swiper .swiper-button-prev::after,
.gallery-swiper .swiper-button-next::after { font-size: 30px; font-weight: 700; }
.gallery-swiper .swiper-button-prev { left: 10px; }
.gallery-swiper .swiper-button-next { right: 10px; }

.cta-band {
  position: relative;
  padding: 90px 0;
  text-align: center;
  overflow: hidden;
  background: var(--navy-dark);
}
.cta-band .cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-band .cta-content { position: relative; z-index: 2; max-width: 860px; }
.cta-band h2 { color: #000; font-size: clamp(24px, 3.2vw, 40px); line-height: 1.35; }
.cta-band .accent-red { color: var(--navy); }
.cta-band p { color: #4a4a4a; }

.reviews-band {
  padding: 72px 0 90px;
  background: url("orig/41.jpg") center bottom / cover no-repeat;
}
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: center;
}
/* Grid items default to min-width:auto, which lets Swiper's very wide
   slide track push the whole page into horizontal scroll. */
.reviews-grid > * { min-width: 0; }
.review-swiper { width: 100%; overflow: hidden; }
.reviews-grid h2 { font-size: clamp(26px, 4vw, 40px); }
.review-swiper { padding-bottom: 46px; }
.review-card {
  background: var(--navy) url("orig/23.jpg") center / cover no-repeat;
  background-blend-mode: lighten;
  color: #eaeefc;
  border-radius: 0 60px 60px 0;
  padding: 34px 36px 40px;
  box-shadow: var(--shadow-md);
}
.review-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.review-head img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.review-head strong { color: #fff; display: block; font-family: var(--head); }
.review-date { font-size: 13px; color: #b9c2ee; }
.review-card .stars { color: var(--gold); font-size: 20px; letter-spacing: 2px; margin-bottom: 10px; }
.review-card p { margin: 0; font-size: 15.5px; }
.review-swiper .swiper-button-prev,
.review-swiper .swiper-button-next { color: var(--navy); }
.review-swiper .swiper-pagination-bullet-active { background: var(--navy); }

.prefooter-band { padding: 0; line-height: 0; }
.prefooter-band img { width: 100%; height: 400px; object-fit: cover; }

@media (max-width: 940px) {
  .home-hero { min-height: 460px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .about-band .about-accent { display: none; }
}

/* ============================================================
   page: inner (about / services / service-detail / testimonials / contact)
   ============================================================ */
.page-hero .hero-dots {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  opacity: .35;
  z-index: 1;
}
.inner-section { padding: 70px 0; }
.inner-section h2 { font-size: clamp(24px, 3.4vw, 34px); }
.inner-section h3 { color: var(--navy); font-size: 22px; margin-top: 1.4em; }
.prose { max-width: 900px; }
.prose p { color: #3c4250; }
/* .prose is a fixed-width block; without auto margins a centred one sits
   flush left and reads as off-centre against the heading above it. */
.prose.center, .center > .prose { margin-inline: auto; }

.split-media { position: relative; }
.split-dots {
  position: absolute;
  right: -10px;
  top: -30px;
  width: 150px;
  opacity: .6;
  z-index: 0;
}

.benefit-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--navy);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.benefit-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.benefit-card h4 { margin: 0 0 8px; font-size: 18px; color: var(--navy); }
.benefit-card p { margin: 0; color: var(--muted); font-size: 15px; }

.band-cta {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  text-align: center;
  background: var(--navy-dark);
}
.band-cta img.band-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
}
.band-cta .container { position: relative; z-index: 2; }
.band-cta h2, .band-cta p { color: #fff; }
.band-cta p { max-width: 820px; margin-left: auto; margin-right: auto; color: #dfe4f7; }

/* Testimonials carousel — source shows one navy card at a time with arrows
   either side. This card rounds the top-left and bottom-right corners. */
.tm-swiper-wrap {
  position: relative;
  margin-top: 40px;
  padding: 0 60px;
}
.tm-swiper { width: 100%; overflow: hidden; }
.tm-card {
  background: var(--navy);
  border-radius: 48px 0 48px 0;
  padding: 46px 56px 54px;
  text-align: center;
  color: #eaeefc;
  min-height: 300px;
}
.tm-card .stars { color: var(--gold); font-size: 22px; letter-spacing: 5px; margin-bottom: 14px; }
.tm-card .tm-meta { font-size: 14px; color: #fff; margin-bottom: 8px; }
.tm-card h4 { margin: 0 0 22px; color: #fff; font-size: 21px; }
.tm-card p { margin: 0; color: #eaeefc; font-size: 15px; max-width: 74ch; margin-inline: auto; }
.tm-swiper .swiper-pagination { position: static; margin-top: 26px; }
.tm-swiper .swiper-pagination-bullet-active { background: var(--navy); }
.tm-swiper-wrap .tm-nav {
  background: none;
  border: 0;
  color: #6b6b6b;
  width: 40px;
  top: 50%;
  margin-top: -20px;
}
.tm-swiper-wrap .tm-nav::after { font-size: 28px; font-weight: 700; }
.tm-swiper-wrap .tm-prev { left: 4px; }
.tm-swiper-wrap .tm-next { right: 4px; }

@media (max-width: 620px) {
  .tm-swiper-wrap { padding: 0 26px; }
  .tm-card { padding: 34px 22px 42px; }
}

/* Contact page */
.contact-intro { padding-bottom: 0; }
.contact-intro h2 { font-size: clamp(26px, 3.2vw, 40px); }
.emergency-line {
  text-align: center;
  color: var(--blue);
  font-family: var(--head);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 32px);
  margin: 26px 0 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 46px;
  align-items: start;
}
.contact-info h2 { font-size: clamp(24px, 2.8vw, 34px); }
.contact-info .info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}
.contact-info .info-ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  line-height: 1;
}
.contact-info .info-sub { color: var(--muted); }
.contact-info .info-item strong { color: #000; font-family: var(--head); display: block; margin-bottom: 8px; font-size: 18px; }
.contact-info .hours-row { max-width: 300px; font-size: 14px; }

/* Full-bleed map band above the footer, matching the source page */
.map-band { position: relative; padding: 0; line-height: 0; background: #e6e4e1; }
.map-band iframe { display: block; width: 100%; height: 380px; border: 0; }
.map-band .map-link {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background: var(--navy);
  color: #fff;
  font-family: var(--head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 11px 16px;
  border-radius: var(--corner-btn);
}
.map-band .map-link:hover { background: var(--blue); text-decoration: none; }

.contact-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--corner);
  padding: 30px 30px 34px;
  box-shadow: var(--shadow-md);
}
.contact-form .field { margin-bottom: 16px; }
.contact-form label { display: block; font-family: var(--head); font-weight: 600; font-size: 15px; color: #000; margin-bottom: 6px; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--body);
  font-size: 15px;
  background: #fbfcff;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
.contact-form textarea { min-height: 130px; resize: vertical; }
.contact-form .btn { margin-top: 6px; }
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 940px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   page: index-extra
   ============================================================ */
.reliable-media { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.reliable-media .media-frame img { height: 100%; min-height: 220px; }
@media (max-width: 620px) {
  .reliable-media { grid-template-columns: 1fr; }
}

/* ============================================================
   page: service-detail (shared)
   Source service pages are a rhythm of alternating half-width blocks —
   a photo with a halftone accent on one side, heading + prose on the other —
   rather than one dense two-column slab.
   ============================================================ */
.svc-intro { padding: 80px 0 30px; text-align: center; }
.svc-intro h2 { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 18px; }
.svc-intro .prose { max-width: 74ch; margin-inline: auto; }

.svc-block { padding: 54px 0; }
.svc-block > .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.svc-block.is-flipped .svc-media { order: 2; }
.svc-block h2 { font-size: clamp(24px, 2.9vw, 36px); }
.svc-block .svc-copy p { max-width: 52ch; }

.svc-media { position: relative; }
.svc-media .svc-photo {
  position: relative;
  z-index: 2;
  width: 100%;
  border-radius: var(--corner);
}
.svc-media .svc-accent {
  position: absolute;
  left: -30px;
  top: -30px;
  width: 190px;
  z-index: 1;
  opacity: .9;
}

/* Navy benefits band */
.svc-benefits {
  background: var(--navy);
  color: #e7ebfb;
  padding: 66px 0 76px;
}
.svc-benefits h2 { color: #fff; text-align: center; font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 40px; }
.svc-benefits .benefit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 90px;
  max-width: 1000px;
  margin-inline: auto;
}
.svc-benefits h3 { color: #fff; font-size: 21px; margin-bottom: 8px; }
.svc-benefits p { margin: 0; font-size: 14px; color: #dbe1f7; }

/* Closing block on the light swoosh */
.svc-closing {
  background: url("orig/41.jpg") center / cover no-repeat;
  padding: 80px 0 90px;
  text-align: center;
}
.svc-closing h2 { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 20px; }
.svc-closing .prose { max-width: 76ch; margin-inline: auto; }

@media (max-width: 940px) {
  .svc-block > .container { grid-template-columns: 1fr; gap: 34px; }
  .svc-block.is-flipped .svc-media { order: 0; }
  .svc-benefits .benefit-grid { grid-template-columns: 1fr; gap: 26px; }
  .svc-media .svc-accent { display: none; }
}

/* Inline image+text block used inside the closing band on the services page */
.svc-inline-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  text-align: left;
  margin-bottom: 56px;
}
@media (max-width: 940px) {
  .svc-inline-block { grid-template-columns: 1fr; gap: 34px; }
}