/* Coleman service page template - Claude Design port.
   Loads on every page id in WPCode snippet 1941's $co_template_pages array
   (master copy: page 1930; clone it with Yoast Duplicate Post, then add the
   new id to that one array - nothing in this file is page-specific).
   Local Search North, 26 Aug 2026.
   Design source of truth: seo/2026-08-26-service-page-design/canvas-src/print.html (1440px artboard).
   Desktop-only rules are gated at min-width:1000px, which is Salient's own
   desktop breakpoint; below that the page falls back to Salient's stacked
   column layout with the mobile overrides at the foot of this file. */

/* ---------- Typography ---------- */
.container-wrap h1, .container-wrap h2 { font-family: 'Inter Tight', 'Open Sans', sans-serif !important; font-weight: 800 !important; letter-spacing: -0.02em; }
.container-wrap h3 { font-family: 'Inter Tight', 'Open Sans', sans-serif !important; font-weight: 700 !important; }

/* ---------- Page gutters: design uses 64px, Salient's container ships 40px ----------
   The header/topbar gutter is Salient's `header-fullwidth-padding` theme option
   (40px, site-wide). It is nudged to 64px HERE, scoped to the .co-service-template
   body class that WPCode snippet 1941 adds to every page id in its
   $co_template_pages array, so the logo and nav line up with the page content
   instead of stepping in 24px - no other page is affected.
   If the 64px gutter is ever adopted site-wide, move this to the theme option
   and delete the header rules below. */
@media only screen and (min-width: 1000px) {
  .container-wrap .container.main-content { padding-left: 64px; padding-right: 64px; }
  body.co-service-template #header-outer .container,
  body.co-service-template #header-secondary-outer .container { padding-left: 64px !important; padding-right: 64px !important; }
}

/* ---------- Hero ---------- */
.co-trust { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.co-trust .co-sep { width: 1px; height: 20px; background: #e2e4e0; }
.co-trust .co-stars svg { display: inline-block; vertical-align: middle; margin-right: 1px; }

/* The hero row carries no padding of its own so the image bleeds to the band's
   top and bottom edges; the design's vertical rhythm lives on the text column.
   .vc_column-inner and .wpb_wrapper stay in flow but run full height so the tag
   can anchor to the bottom of the image (.wpb_wrapper is its offset parent).
   Do NOT absolutely position .vc_column-inner: it collapses the column's own
   horizontal padding, which the right-edge bleed below is measured against. */
.co-hero-img { position: relative; }
.co-hero-img > .vc_column-inner { position: relative; height: 100%; }
.co-hero-img .wpb_wrapper { position: relative; z-index: 3; height: 100%; }
.co-hero-img .co-hero-tag-wrap { position: absolute; left: 20px; bottom: 20px; margin: 0 !important; z-index: 4; }
/* Left-edge white fade (design: 120px, image's left edge).
   It CANNOT live on .co-hero-img::after - Salient's column clearfix sets
   visibility:hidden and height:0 there, so that pseudo-element never paints.
   It has to sit on .inner-wrap::after, inside Salient's image layer. But
   .inner-wrap is a stacking context (position:relative + z-index:1) and the
   .column-image-bg inside it is z-index:1, so without an explicit z-index the
   fade paints UNDERNEATH the photo and is invisible. z-index:2 is the fix. */
.co-hero-img .column-image-bg-wrap .inner-wrap { position: relative; }
.co-hero-img .column-image-bg-wrap .inner-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 120px;
  background: linear-gradient(90deg, #ffffff, rgba(255,255,255,0));
  z-index: 2;
  pointer-events: none;
}

.co-hero-tag { display: inline-block; background: #111212; color: #ffffff; padding: 16px 22px; }
.co-hero-tag strong { color: #ffffff; display: block; font-size: 15px; line-height: 1.3; margin-bottom: 3px; white-space: nowrap; }
.co-hero-tag span { color: #b8bdb6; font-size: 12.5px; line-height: 1.45; display: block; }

@media only screen and (min-width: 1000px) {
  .co-hero-text > .vc_column-inner { padding: 84px 48px 72px 0 !important; }
  .co-hero-img { min-height: 560px; }
  .co-hero-img .co-hero-tag-wrap { left: 36px; bottom: 36px; }
  /* Bleed the image to the viewport's right edge (the container caps at 1600px).
     Salient ships width:100% on the wrap, which over-constrains left+width and
     makes `right` a no-op - width has to go back to auto for the bleed to apply. */
  .co-hero-img .column-image-bg-wrap {
    width: auto !important;
    right: calc(-1 * (64px + max(0px, (100vw - 1600px) / 2))) !important;
  }
}

/* ---------- Dark band cards ---------- */
/* Salient puts the 20px inter-column gutter on the column's own padding, so the
   card frame has to sit on .vc_column-inner or adjacent borders butt together. */
.co-card > .vc_column-inner { border: 1px solid #2e312e; padding: 28px !important; }
.co-card h3 { color: #ffffff !important; margin: 14px 0 8px 0 !important; font-size: 19px !important; line-height: 1.25 !important; }
.co-card p { color: #b8bdb6 !important; font-size: 14.5px; line-height: 1.65; margin: 0 !important; padding: 0 !important; }
.co-dark-sub p { color: #b8bdb6 !important; font-size: 16px; line-height: 1.7; }

/* ---------- Cost ---------- */
.co-price-panel > .vc_column-inner { padding: 36px !important; }
.co-price-panel h3 { font-size: 20px; margin-bottom: 10px !important; }
.co-price-row { display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid #e2ddd9; align-items: flex-start; }
.co-price-row svg { flex-shrink: 0; margin-top: 3px; width: 20px; height: 20px; }
.co-price-row p { margin: 0 !important; padding-bottom: 0 !important; font-size: 15px; line-height: 1.55; }
.co-price-placeholder { background: #f3f0f0; padding: 2px 8px; font-weight: 700; color: #111212; }

/* ---------- FAQ ---------- */
.co-faq .toggles .toggle { background: #111212 !important; border: none !important; margin-bottom: 14px !important; padding: 0 !important; }
.co-faq .toggles .toggle:last-child { margin-bottom: 0 !important; }
/* Salient gives the answer panel its own white card (background + shadow); the
   design wants one continuous black box, so the panel goes transparent. */
.co-faq .toggles .toggle > div {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.co-faq .toggles .toggle > .toggle-title a,
.co-faq .toggles .toggle.open > .toggle-title a {
  background: transparent !important;
  color: #ffffff !important;
  font-family: 'Inter Tight', 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em;
  padding: 24px 64px 24px 28px !important;
}
.co-faq .toggles .toggle.open > .toggle-title a { padding-bottom: 12px !important; }
.co-faq .toggles .toggle .inner-toggle-wrap { padding: 0 64px 24px 28px !important; }
.co-faq .toggles .toggle .inner-toggle-wrap,
.co-faq .toggles .toggle .inner-toggle-wrap p { color: #f2f4f0 !important; font-size: 15.5px; line-height: 1.7; }
.co-faq .toggles .toggle .inner-toggle-wrap p { margin-bottom: 0 !important; }

/* Chevron in place of Salient's FontAwesome plus. The icon's class attribute is
   rewritten by Salient's JS on every toggle (fa-plus / fa-minus-circle), so the
   glyph is suppressed here and the chevron is painted as a CSS mask driven
   purely by .toggle.open - nothing depends on which fa-* class is present. */
.co-faq .toggles .toggle > .toggle-title a i {
  position: absolute;
  left: auto;
  right: 28px;
  top: 50%;
  margin-top: -9px;
  width: 18px;
  height: 18px;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background-color: #9aa096;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
  transform: rotate(-90deg);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.co-faq .toggles .toggle.open > .toggle-title a i {
  background-color: #ffffff;
  transform: rotate(0deg);
}

/* ---------- Buttons ---------- */
/* The green button sets --nectar-text-color to the dark ink, which paints the
   arrow-circle AND the arrow inside it #111212 - the arrow disappears. */
.container-wrap .nectar-cta[data-color="extra-color-gradient-1"] .arrow-circle-animation-arrow,
.container-wrap .nectar-cta[data-color="extra-color-gradient-1"] .arrow-circle-animation-arrow * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* ---------- Mobile / tablet ---------- */
@media only screen and (max-width: 999px) {
  /* The hero row's padding was moved onto the text column for the desktop
     bleed, so the stacked layout needs its own vertical rhythm back. */
  .co-hero-text > .vc_column-inner { padding: 48px 0 40px 0 !important; }
  /* The stacked image column has no content of its own once the desktop spacer
     is gone, so the whole chain needs a floor for the background to show and
     for the tag's bottom offset to resolve against. */
  .co-hero-img,
  .co-hero-img > .vc_column-inner,
  .co-hero-img .wpb_wrapper { min-height: 300px; }
  /* Full-width image when stacked, so a left-edge fade makes no sense. */
  .co-hero-img .column-image-bg-wrap .inner-wrap::after { display: none; }
  .co-trust { gap: 14px; font-size: 13.5px; }
  .co-trust .co-sep { display: none; }
  .co-price-panel > .vc_column-inner { padding: 28px !important; }
  .co-faq .toggles .toggle > .toggle-title a,
  .co-faq .toggles .toggle.open > .toggle-title a { padding: 20px 48px 20px 20px !important; font-size: 17px !important; }
  .co-faq .toggles .toggle.open > .toggle-title a { padding-bottom: 10px !important; }
  .co-faq .toggles .toggle .inner-toggle-wrap { padding: 0 20px 20px 20px !important; }
  .co-faq .toggles .toggle > .toggle-title a i { right: 18px; }
  .container-wrap .nectar-cta[data-alignment="right"] { text-align: left !important; }
}