/*
 * service-case-templates.css
 * Net-new styling for the service-page + case-study templates. Everything is
 * namespaced under .tpl-* so it never collides with the theme CSS
 * (style.css / Bootstrap) that the shared header/footer rely on. Tokens are
 * matched to the existing site: navy #00497e, dark navy #07456c/#03213d, amber
 * #fbb032, link blue #3175e4, Oswald headings. The theme's .container (Bootstrap)
 * is reused so sections line up with the header/footer width.
 */

.tpl-page {
  --tpl-navy: #00497e;
  --tpl-navy-deep: #07456c;
  --tpl-navy-darkest: #03213d;
  --tpl-amber: #fbb032;
  --tpl-ink: #1d2733;
  --tpl-muted: #55616e;
  --tpl-line: #e4e8ec;
  --tpl-bg-soft: #f5f8fb;
  --tpl-link: #3175e4;
  --tpl-radius: 10px;
  --tpl-shadow: 0 6px 24px rgba(3, 33, 61, 0.08);
  color: var(--tpl-ink);
}

/* Narrow reading column inside the shared Bootstrap .container. */
.tpl-page .container--narrow {
  max-width: 820px;
}

/* ---------- Buttons ---------- */
.tpl-btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 8px;
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  border: 2px solid transparent;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.tpl-btn--primary {
  background: var(--tpl-amber);
  color: #1a1a1a;
  border-color: var(--tpl-amber);
}
.tpl-btn--primary:hover,
.tpl-btn--primary:focus {
  background: transparent;
  color: var(--tpl-amber);
}
.tpl-btn--call,
.tpl-btn--text {
  background: transparent;
  color: var(--tpl-navy);
  border-color: var(--tpl-navy);
}
.tpl-btn--call:hover,
.tpl-btn--call:focus,
.tpl-btn--text:hover,
.tpl-btn--text:focus {
  background: var(--tpl-navy);
  color: #fff;
}
.tpl-btn--block {
  display: block;
  text-align: center;
  margin-bottom: 10px;
}
.tpl-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 8px;
}

/* ---------- Section frame + headings ---------- */
/* .header-area is position:fixed (style.css) and does not shrink on scroll;
   clear it here the same way legacy pages do via .hero-area's padding-top.
   --header-h MUST equal the fixed header's rendered height, never exceed it:
   padding-top reserves a clearance strip that is the plain white body
   background, and .header-area only paints its own height, so any pixel where
   the reserve is taller than the header shows through as a white seam between
   the nav and the first section (hero/banner).

   The theme's nav (style.css) switches layout at 1350px -- the compact/
   hamburger bar at max-width: 1350px renders 106px tall, and the full desktop
   menu at any width above that renders 129px tall (both = 20px*2 padding +
   content; measured live at 375/480/575/768/992/1200/1280/1350 -> 106 and
   1351/1366/1440 -> 129). --header-h therefore tracks that same 1350px
   breakpoint via its exact logical complement, `not all and (max-width:
   1350px)`, rather than a separate `min-width: 1351px` query -- a fixed
   min-width one integer above the theme's max-width leaves a fractional-pixel
   gap at widths in (1350, 1351] reachable under non-integer zoom/display
   scaling, where the header renders at 129px but the reserve stays at 106px
   (audit finding, PR #1657). (The prior value was 130px for every width
   >=576px, which over-reserved by 24px across the whole 576-1350 band and by
   1px at >=1351 -- the reported white seam; and 107px <=575px over-reserved by
   1px. Both were "measured height + 1px", which is exactly the seam.) */
.tpl-main {
  --header-h: 106px;
  /* Sticky rails (.tpl-cs-aside, .tpl-svc-rail) offset from the top so they
     clear the position:fixed .header-area instead of pinning beneath it.
     Tied to --header-h so it tracks the `not all and (max-width: 1350px)`
     header-height override below (same convention as PR #1637); +20px keeps
     the pre-existing breathing gap. */
  --tpl-sticky-top: calc(var(--header-h) + 20px);
  padding-top: var(--header-h);
  /* overflow-x: hidden (the original rule here) computes overflow-y to `auto`
     per the CSS Overflow spec's "one of overflow-x/y is neither visible nor
     clip" interop rule, which turns .tpl-main into its own scroll container.
     That defeats `position: sticky` on every descendant that sticks relative
     to the viewport -- .tpl-svc-rail ("Get a fast quote") and .tpl-cs-aside
     both stopped sticking during scroll (verified: rail scrolled off with the
     page instead of pinning). `overflow-x: clip` is exempted from that
     interop rule (clip does not force the other axis to auto), so it blocks
     horizontal overflow the same as before without breaking sticky. */
  overflow-x: clip;
}
@media not all and (max-width: 1350px) {
  .tpl-main {
    --header-h: 129px;
  }
}

/* PR #1642 audit finding (2026-09-15): the .tpl-main overflow-x: clip fix
   above stopped ITS OWN overflow from breaking sticky, but .tpl-svc-rail
   ("Get a fast quote") and .tpl-cs-aside still measured 1:1 with scroll
   instead of pinning at `top: 20px` on BOTH location-page.njk and
   service-page.njk -- verified live via computed getBoundingClientRect at
   scroll 0/100/200/300/400/800/900+, on staging, on both templates. Root
   cause is a DIFFERENT, higher ancestor: legacy style.css's global
   `.main-wrapper { overflow: hidden; }` (wraps <body>'s whole content on
   every template, tpl-* included). Any ancestor with overflow other than
   visible/clip breaks position: sticky for every descendant that sticks
   relative to the document scroller, even when -- as here -- that ancestor
   itself never actually needs to scroll (body/html do the scrolling, not
   .main-wrapper); this holds regardless of the .tpl-main fix directly below
   it in the DOM. Same clip-not-hidden technique as .tpl-main, scoped to
   tpl-* pages only so the legacy theme's own use of .main-wrapper's
   overflow: hidden (which predates the tpl-* templates and this component)
   is untouched everywhere else. */
.tpl-page .main-wrapper {
  overflow-x: clip;
  overflow-y: visible;
}

/* ---- Header legibility over the .tpl-main clearance strip ----
   .header-area is transparent by default; style.css only paints it (via the
   .scroll class, added by JS at 50px of scroll) once the user has scrolled.
   Legacy pages never notice because .hero-area's dark background extends
   under the fixed header at scroll 0. tpl-* pages' clearance strip above is
   the plain white body background, so at first paint the white nav links
   and the white half of the two-tone logo are invisible over it — only the
   amber "BOOK NOW" pill shows. case-study.njk in particular opens on a
   light breadcrumb bar, so pushing the offset into the first section
   (moving --header-h into .tpl-hero) isn't enough on its own; painting the
   header itself is the one fix that covers every tpl-* layout regardless of
   what its first section looks like. Match style.css's own
   `.header-area.scroll` background exactly (same value, kept in sync
   manually — there's no shared custom property to reference across the two
   stylesheets) so there is no visible change at the 50px scroll threshold;
   this file loads after style.css (see head-assets.njk / service-page.njk),
   so this equal-specificity (0,2,0) selector wins on source order without
   needing `!important`. */
.tpl-page .header-area {
  background-image: radial-gradient(circle, rgba(22, 147, 180, 1) -65%, rgba(0, 53, 93, 1) 100%);
}
.tpl-section {
  padding: 56px 0;
}
.tpl-section:nth-of-type(even) {
  background: var(--tpl-bg-soft);
}
.tpl-section__title {
  font-family: Oswald, sans-serif;
  color: var(--tpl-navy);
  font-size: 34px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0 0 26px;
}

/* ---------- Hero ---------- */
.tpl-hero {
  background: linear-gradient(120deg, var(--tpl-navy-darkest) 0%, var(--tpl-navy-deep) 60%);
  color: #fff;
  padding: 64px 0;
}
.tpl-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
.tpl-hero__title {
  font-family: Oswald, sans-serif;
  font-size: 46px;
  line-height: 1.08;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 16px;
  color: #fff;
}
.tpl-hero__subhead {
  font-size: 19px;
  line-height: 1.5;
  color: #dce6f0;
  margin: 0 0 22px;
}
.tpl-hero__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}
.tpl-hero__bullets li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: 17px;
}
.tpl-hero__bullets li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--tpl-amber);
  font-weight: 700;
}
.tpl-hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--tpl-radius);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
  display: block;
}

/* ---------- Stats bar ---------- */
.tpl-stats {
  background: var(--tpl-amber);
  padding: 26px 0;
}
.tpl-stats__row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 20px;
  margin: 0;
  padding: 0;
}
.tpl-stat {
  text-align: center;
  min-width: 130px;
}
.tpl-stat__value {
  display: block;
  font-family: Oswald, sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--tpl-navy-darkest);
  line-height: 1;
}
.tpl-stat__label {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #4a3a12;
}

/* ---------- Intro ---------- */
.tpl-intro__lead {
  font-size: 20px;
  line-height: 1.6;
  color: var(--tpl-muted);
  margin: 0;
}

/* ---------- How it works ---------- */
.tpl-how__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}
.tpl-how__step {
  background: #fff;
  border: 1px solid var(--tpl-line);
  border-radius: var(--tpl-radius);
  padding: 28px 22px;
  box-shadow: var(--tpl-shadow);
}
.tpl-how__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--tpl-navy);
  color: #fff;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 14px;
}
.tpl-how__title {
  font-family: Oswald, sans-serif;
  font-size: 20px;
  color: var(--tpl-navy);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.tpl-how__desc {
  margin: 0;
  color: var(--tpl-muted);
  line-height: 1.55;
}

/* ---------- Gallery carousel (CSS scroll-snap) ---------- */
.tpl-gallery__track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.tpl-gallery__item {
  flex: 0 0 auto;
  width: 300px;
  scroll-snap-align: start;
  margin: 0;
}
.tpl-gallery__item img {
  width: 300px;
  height: 225px;
  object-fit: cover;
  border-radius: var(--tpl-radius);
  display: block;
}
.tpl-gallery__item figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--tpl-muted);
}

/* ---------- Real jobs cards ---------- */
.tpl-cs-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.tpl-cs-card {
  background: #fff;
  border: 1px solid var(--tpl-line);
  border-radius: var(--tpl-radius);
  overflow: hidden;
  box-shadow: var(--tpl-shadow);
  display: flex;
  flex-direction: column;
}
.tpl-cs-card__media img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.tpl-cs-card__body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tpl-cs-card__loc {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tpl-amber);
  margin: 0 0 6px;
}
.tpl-cs-card__title {
  font-family: Oswald, sans-serif;
  font-size: 21px;
  line-height: 1.2;
  margin: 0 0 10px;
}
.tpl-cs-card__title a {
  color: var(--tpl-navy);
  text-decoration: none;
}
.tpl-cs-card__title a:hover {
  text-decoration: underline;
}
.tpl-cs-card__summary {
  color: var(--tpl-muted);
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}
.tpl-cs-card__link {
  color: var(--tpl-link);
  font-weight: 600;
  text-decoration: none;
}
.tpl-cs-card__link:hover {
  text-decoration: underline;
}

/* ---------- FAQ ---------- */
.tpl-faq__item {
  border: 1px solid var(--tpl-line);
  border-radius: var(--tpl-radius);
  background: #fff;
  margin-bottom: 12px;
  padding: 4px 8px;
}
.tpl-faq__q {
  cursor: pointer;
  font-family: Oswald, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--tpl-navy);
  padding: 14px 12px;
  list-style: none;
}
.tpl-faq__q::-webkit-details-marker {
  display: none;
}
.tpl-faq__q::after {
  content: '+';
  float: right;
  font-size: 22px;
  line-height: 1;
  color: var(--tpl-amber);
}
.tpl-faq__item[open] .tpl-faq__q::after {
  content: '\2212';
}
.tpl-faq__a {
  padding: 0 12px 16px;
  color: var(--tpl-muted);
  line-height: 1.6;
}
.tpl-faq__a p {
  margin: 0;
}

/* ---------- Areas + related ---------- */
.tpl-areas__list,
.tpl-related__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.tpl-areas__list li,
.tpl-related__list li {
  font-size: 17px;
}
.tpl-areas__list a,
.tpl-related__list a {
  color: var(--tpl-link);
  text-decoration: none;
}
.tpl-areas__list a:hover,
.tpl-related__list a:hover {
  text-decoration: underline;
}

/* ---------- Pricing ---------- */
.tpl-pricing__copy {
  font-size: 18px;
  line-height: 1.6;
  color: var(--tpl-muted);
  max-width: 760px;
}
.tpl-pricing__included {
  list-style: none;
  padding: 0;
  margin: 22px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 26px;
}
.tpl-pricing__included li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
}
.tpl-pricing__included li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--tpl-navy);
  font-weight: 700;
}
.tpl-pricing__disclaimer {
  margin-top: 16px;
  font-size: 14px;
  color: var(--tpl-muted);
  font-style: italic;
}

/* ---------- Bottom CTA ---------- */
.tpl-bottom-cta {
  background: var(--tpl-navy-darkest);
  color: #fff;
  text-align: center;
}
.tpl-bottom-cta .tpl-section__title {
  color: #fff;
}
.tpl-bottom-cta__copy {
  font-size: 18px;
  color: #cdd8e4;
  max-width: 680px;
  margin: 0 auto 22px;
}
.tpl-bottom-cta .tpl-cta-buttons {
  justify-content: center;
}
.tpl-bottom-cta .tpl-btn--call {
  color: #fff;
  border-color: #fff;
}
.tpl-bottom-cta .tpl-btn--call:hover {
  background: #fff;
  color: var(--tpl-navy-darkest);
}

/* ======================================================================
   CASE STUDY (sidebar-navy)
   ====================================================================== */
.tpl-cs .container {
  padding-top: 34px;
  padding-bottom: 34px;
}
.tpl-breadcrumb {
  font-size: 14px;
  color: var(--tpl-muted);
  margin-bottom: 22px;
}
.tpl-breadcrumb a {
  color: var(--tpl-link);
  text-decoration: none;
}
.tpl-breadcrumb a:hover {
  text-decoration: underline;
}
.tpl-breadcrumb span[aria-current] {
  color: var(--tpl-ink);
  font-weight: 600;
}
.tpl-cs-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}
.tpl-cs__title {
  font-family: Oswald, sans-serif;
  font-size: 38px;
  line-height: 1.12;
  color: var(--tpl-navy);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0 0 20px;
}
.tpl-cs-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.tpl-cs-meta li {
  display: flex;
  flex-direction: column;
}
.tpl-cs-meta__k {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--tpl-muted);
  font-weight: 700;
}
.tpl-cs-meta__v {
  font-size: 16px;
  color: var(--tpl-ink);
}
.tpl-cs-tags {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tpl-cs-tag {
  background: var(--tpl-bg-soft);
  border: 1px solid var(--tpl-line);
  color: var(--tpl-navy);
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 999px;
}
.tpl-cs-hero {
  margin: 0 0 28px;
}
.tpl-cs-hero img {
  width: 100%;
  height: auto;
  border-radius: var(--tpl-radius);
  display: block;
}
.tpl-cs-section {
  margin-bottom: 34px;
}
.tpl-cs-section p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--tpl-ink);
}
.tpl-cs-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.tpl-cs-gallery__item {
  margin: 0;
}
.tpl-cs-gallery__item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--tpl-radius);
  display: block;
}
.tpl-cs-gallery__item figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--tpl-muted);
}
.tpl-cs-gallery__phase {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
  color: var(--tpl-amber);
  margin-right: 4px;
}
.tpl-jobtable {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--tpl-line);
  border-radius: var(--tpl-radius);
  overflow: hidden;
}
.tpl-jobtable th,
.tpl-jobtable td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tpl-line);
  font-size: 16px;
  vertical-align: top;
}
.tpl-jobtable th {
  width: 34%;
  background: var(--tpl-bg-soft);
  color: var(--tpl-navy);
  font-family: Oswald, sans-serif;
  font-weight: 600;
}
.tpl-jobtable tr:last-child th,
.tpl-jobtable tr:last-child td {
  border-bottom: none;
}

/* ---- Navy sidebar ---- */
.tpl-cs-aside {
  position: sticky;
  top: var(--tpl-sticky-top);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tpl-aside-card {
  border-radius: var(--tpl-radius);
  padding: 22px 22px 24px;
}
.tpl-aside-cta,
.tpl-aside-nav,
.tpl-aside-contact {
  background: linear-gradient(160deg, var(--tpl-navy-darkest) 0%, var(--tpl-navy-deep) 100%);
  color: #fff;
}
.tpl-aside__title {
  font-family: Oswald, sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 14px;
  color: #fff;
}
.tpl-aside-cta p {
  color: #cdd8e4;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 16px;
}
.tpl-aside-cta .tpl-btn--call,
.tpl-aside-cta .tpl-btn--text {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.tpl-aside-cta .tpl-btn--call:hover,
.tpl-aside-cta .tpl-btn--text:hover {
  background: #fff;
  color: var(--tpl-navy-darkest);
}
.tpl-aside-nav ul,
.tpl-aside-contact ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tpl-aside-nav li,
.tpl-aside-contact li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 15px;
}
.tpl-aside-nav li:last-child,
.tpl-aside-contact li:last-child {
  border-bottom: none;
}
.tpl-aside-nav a,
.tpl-aside-contact a {
  color: #eaf1f8;
  text-decoration: none;
}
.tpl-aside-nav a:hover,
.tpl-aside-contact a:hover {
  color: var(--tpl-amber);
}

/* ---------- Index ---------- */
.tpl-index-hero {
  background: linear-gradient(120deg, var(--tpl-navy-darkest) 0%, var(--tpl-navy-deep) 60%);
  color: #fff;
  text-align: center;
}
.tpl-index__title {
  font-family: Oswald, sans-serif;
  font-size: 44px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
  color: #fff;
}
.tpl-index__lead {
  font-size: 19px;
  color: #dce6f0;
  max-width: 720px;
  margin: 0 auto;
}
.tpl-index__empty {
  font-size: 18px;
  color: var(--tpl-muted);
}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width: 991px) {
  .tpl-hero__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .tpl-hero__title {
    font-size: 36px;
  }
  .tpl-how__steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .tpl-cs-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .tpl-cs-layout {
    grid-template-columns: 1fr;
  }
  .tpl-cs-aside {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .tpl-cs-aside .tpl-aside-card {
    flex: 1 1 260px;
  }
}

@media (max-width: 640px) {
  .tpl-section {
    padding: 40px 0;
  }
  .tpl-section__title {
    font-size: 28px;
  }
  .tpl-hero {
    padding: 44px 0;
  }
  .tpl-hero__title {
    font-size: 30px;
  }
  .tpl-how__steps {
    grid-template-columns: 1fr;
  }
  .tpl-cs-cards {
    grid-template-columns: 1fr;
  }
  .tpl-cs-gallery__grid {
    grid-template-columns: 1fr;
  }
  .tpl-cs__title {
    font-size: 30px;
  }
  .tpl-cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .tpl-cta-buttons .tpl-btn {
    text-align: center;
  }
}

/* ======================================================================
   SERVICE-PAGE POLISH (mission junk-relief-first-service-page-live-2026-09)
   Sticky quote rail, hero-CTA contrast on the dark hero, gallery hardening.
   ====================================================================== */

/* ---- Hero secondary CTA on the dark navy hero ----
   The default .tpl-btn--call is navy-on-transparent — invisible on the hero
   gradient. Give it a light ghost treatment (WCAG AA: #fff on #07456c ~8:1). */
.tpl-hero .tpl-btn--call {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.tpl-hero .tpl-btn--call:hover,
.tpl-hero .tpl-btn--call:focus {
  background: #fff;
  color: var(--tpl-navy-darkest);
  border-color: #fff;
}

/* ---- Intro + How-It-Works two-column region with the sticky quote rail ---- */
.tpl-svc-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}
.tpl-svc-main .tpl-intro__lead {
  margin: 0 0 28px;
}
/* Inside the narrower main column, 4 how-it-works cards read better as 2x2. */
.tpl-svc-main .tpl-how__steps {
  grid-template-columns: repeat(2, 1fr);
}
.tpl-svc-main__how-title {
  margin-top: 4px;
}

.tpl-svc-rail {
  position: sticky;
  top: var(--tpl-sticky-top);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tpl-svc-rail__card {
  background: linear-gradient(160deg, var(--tpl-navy-darkest) 0%, var(--tpl-navy-deep) 100%);
  color: #fff;
}
.tpl-svc-rail__eyebrow {
  font-family: Oswald, sans-serif;
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0 0 16px;
  color: #fff;
}
.tpl-svc-rail .tpl-btn--call,
.tpl-svc-rail .tpl-btn--text {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.tpl-svc-rail .tpl-btn--call:hover,
.tpl-svc-rail .tpl-btn--call:focus,
.tpl-svc-rail .tpl-btn--text:hover,
.tpl-svc-rail .tpl-btn--text:focus {
  background: #fff;
  color: var(--tpl-navy-darkest);
}
.tpl-svc-rail__list {
  list-style: none;
  padding: 0;
  margin: 18px 0 14px;
}
.tpl-svc-rail__list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: #dce6f0;
}
.tpl-svc-rail__list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--tpl-amber);
  font-weight: 700;
}
.tpl-svc-rail__fine {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 13px;
  line-height: 1.5;
  color: #aebfcf;
}

/* ---- Gallery: keyboard-scrollable snap track + caption anti-collision ---- */
.tpl-gallery__track {
  scroll-padding-left: 4px;
}
.tpl-gallery__track:focus-visible {
  outline: 3px solid var(--tpl-link);
  outline-offset: 4px;
  border-radius: var(--tpl-radius);
}
.tpl-gallery__item figcaption {
  min-height: 2.6em; /* keep two-line captions from colliding with the next row */
  max-width: 300px;
}

@media (max-width: 959px) {
  /* Rail collapses under the content on tablet/mobile (spec: <960px). */
  .tpl-svc-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .tpl-svc-rail {
    position: static;
  }
  .tpl-svc-main .tpl-how__steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .tpl-svc-main .tpl-how__steps {
    grid-template-columns: 1fr;
  }
}

/* Keep the bottom CTA navy regardless of its section parity. The alternating
   stripe rule `.tpl-section:nth-of-type(even)` has specificity (0,2,0) and
   overrides the base `.tpl-bottom-cta` (0,1,0); merging the intro + how-it-works
   sections above shifts nth-of-type parity, which could otherwise paint the CTA
   band with the light soft background and make its white text unreadable. Match
   the stripe rule's specificity so the later source order wins deterministically. */
.tpl-section.tpl-bottom-cta {
  background: var(--tpl-navy-darkest);
}