/*
 * 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 ---------- */
.tpl-main {
  overflow-x: hidden;
}
.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: 20px;
  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: 20px;
  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);
}