/* ==========================================================================
   DFW SAP — Dallas Ft. Worth Substance Abuse Professionals
   Static rebuild (HTML / CSS / JS) of dfwsap.com
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --accent: #1e73be;
  --accent-dark: #175a95;
  --accent-soft: #eaf2fa;

  --ink: #333333;
  --ink-strong: #1d2229;
  --muted: #6b7482;
  --line: #e4e8ee;

  --bg: #ffffff;
  --bg-alt: #f6f8fa;
  --footer-bg: #2b3038;
  --footer-ink: #c3c9d2;

  --radius: 4px;
  --shadow-sm: 0 1px 3px rgba(20, 28, 40, .08);
  --shadow-md: 0 6px 24px rgba(20, 28, 40, .10);

  --header-h: 84px;
  --wrap: 1140px;

  --font: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  color: var(--ink-strong);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}
h1 { font-size: 2.6rem; font-weight: 300; }
h2 { font-size: 2rem;   font-weight: 300; }
h3 { font-size: 1.55rem; }
h4 { font-size: 1.2rem; }

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; transition: color .2s ease; }
a:hover, a:focus { color: var(--accent-dark); text-decoration: underline; }

ul, ol { margin: 0 0 1.25em; padding-left: 1.3em; }
li { margin-bottom: .5em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
  font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; text-decoration: none; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 76px 0; }
.section--alt { background: var(--bg-alt); }
.section--tight { padding: 52px 0; }

.text-center { text-align: center; }

.lead {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 13px 34px;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease,
              transform .2s ease;
}
.btn:hover, .btn:focus {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}
.btn--ghost { background: transparent; color: var(--accent); }
.btn--ghost:hover, .btn--ghost:focus { background: var(--accent); color: #fff; }

.btn--light { background: transparent; border-color: #fff; color: #fff; }
.btn--light:hover, .btn--light:focus {
  background: #fff; border-color: #fff; color: var(--ink-strong);
}

.btn--lg { padding: 16px 44px; font-size: .88rem; }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease;
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

.site-logo img { width: 204px; height: 70px; }

.nav-tools { display: flex; align-items: center; gap: 4px; }

.menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu li { position: relative; margin: 0; }

.menu > li > a,
.menu .sub-menu a {
  display: block;
  padding: 10px 13px;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.menu > li > a:hover,
.menu > li > a:focus,
.menu > li.is-current > a { color: var(--accent); text-decoration: none; }

.menu > li.is-current > a { box-shadow: inset 0 -2px 0 var(--accent); }

.has-children > a::after {
  content: "";
  display: inline-block;
  margin-left: 7px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}

.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 232px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-children:hover > .sub-menu,
.has-children:focus-within > .sub-menu,
.has-children.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sub-menu a { padding: 9px 18px; text-transform: none; letter-spacing: .02em; font-size: .85rem; }
.sub-menu a:hover, .sub-menu a:focus { background: var(--accent-soft); color: var(--accent); text-decoration: none; }

/* icon buttons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.icon-btn:hover, .icon-btn:focus { background: var(--bg-alt); color: var(--accent); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   6. Search overlay
   -------------------------------------------------------------------------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 20px;
  background: rgba(23, 28, 36, .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}
.search-overlay.is-open { opacity: 1; visibility: visible; }

.search-panel { width: 100%; max-width: 640px; }

.search-form { display: flex; gap: 10px; }
.search-form input[type="search"] {
  flex: 1;
  padding: 16px 18px;
  border: 0;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  background: #fff;
}
.search-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px; height: 44px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.search-results {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  max-height: 55vh;
  overflow-y: auto;
}
.search-results li { margin: 0 0 10px; }
.search-results a {
  display: block;
  padding: 14px 18px;
  background: #fff;
  border-radius: var(--radius);
}
.search-results a:hover, .search-results a:focus { background: var(--accent-soft); text-decoration: none; }
.search-results .result-title { display: block; font-weight: 700; color: var(--ink-strong); }
.search-results .result-snippet { display: block; font-size: .9rem; color: var(--muted); line-height: 1.5; }
.search-results mark { background: #fff2b0; color: inherit; padding: 0 2px; }
.search-empty { margin-top: 22px; color: #dfe4ea; text-align: center; }

/* --------------------------------------------------------------------------
   7. Hero (parallax cover)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h) - var(--promo-h));
  padding: 90px 0;
  overflow: hidden;
  text-align: center;
  color: #fff;
}
.hero__bg {
  position: absolute;
  inset: -12% 0;
  background: url("../assets/photos/truck-open-highway-1600.jpg") center 60%/cover no-repeat;
  will-change: transform;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,22,34,.72), rgba(14,22,34,.58));
}
.hero__inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }
.hero h1 {
  color: #fff;
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  font-weight: 300;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hero p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 600;
  margin-bottom: 2rem;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 2;
  transform: translateX(-50%);
  color: rgba(255,255,255,.8);
  animation: bob 2.2s ease-in-out infinite;
}
.scroll-cue svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; }
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 9px); } }

/* --------------------------------------------------------------------------
   8. Page banner (inner pages)
   -------------------------------------------------------------------------- */
.page-banner {
  position: relative;
  padding: 72px 0;
  text-align: center;
  color: #fff;
  background: url("../assets/dallas-skyline.jpg") center 35%/cover no-repeat fixed;
}
.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(14,22,34,.72);
}
.page-banner__inner { position: relative; z-index: 2; }
.page-banner h1 { color: #fff; margin-bottom: .2em; }
.breadcrumbs { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.breadcrumbs a { color: rgba(255,255,255,.82); }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs span { margin: 0 8px; opacity: .6; }

/* --------------------------------------------------------------------------
   9. Content + sidebar
   -------------------------------------------------------------------------- */
.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  gap: 56px;
  align-items: start;
}
.entry-content > :first-child { margin-top: 0; }
.entry-content h1 { font-size: 2.1rem; }
.entry-content h2 { margin-top: 1.8em; font-size: 1.2rem; color: var(--accent); }
.entry-content ul { padding-left: 1.25em; }
.entry-content ul li::marker { color: var(--accent); }

.widget {
  padding: 26px 24px;
  margin-bottom: 26px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.widget h2, .widget h3 {
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--accent);
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { margin-bottom: 10px; }

.contact-line { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.contact-line:last-child { margin-bottom: 0; }
.contact-line svg {
  flex: none; width: 19px; height: 19px; margin-top: 4px;
  stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.contact-line .label {
  display: block; font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.contact-line .value { font-weight: 600; color: var(--ink-strong); }
.contact-line a.value { color: var(--accent); }

.phone-cta {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   10. Cards / steps / features
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}
/* narrower content column (next to the sidebar) still fits three across */
.entry-content .card-grid { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 20px; }
.entry-content .card { padding: 26px 22px; }
.card {
  padding: 32px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card h2, .card h3 { font-size: 1.15rem; font-weight: 600; }
.card p { color: var(--muted); margin-bottom: 0; }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.card__icon svg { width: 25px; height: 25px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps > li {
  position: relative;
  padding: 0 0 30px 74px;
  margin: 0;
  counter-increment: step;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}
.steps > li::after {
  content: "";
  position: absolute;
  left: 23px; top: 56px; bottom: 6px;
  width: 2px;
  background: var(--line);
}
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps h2, .steps h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: .35em; }
.steps p { margin-bottom: 0; }
.steps a { word-break: break-word; }

.notice {
  padding: 20px 24px;
  margin: 30px 0 0;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.notice strong { color: var(--accent-dark); letter-spacing: .04em; }

/* office / location list */
.office-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.office-list li { margin: 0; }
.office-list a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  height: 100%;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.office-list a:hover, .office-list a:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
  text-decoration: none;
}
.office-list svg { flex: none; width: 19px; height: 19px; margin-top: 4px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------------------
   11. Contact strip (home) + contact form
   -------------------------------------------------------------------------- */
.contact-strip {
  position: relative;
  padding: 80px 0;
  color: #fff;
  background: var(--ink-strong);
}
.contact-strip h2 { color: #fff; }
.contact-strip a { color: #fff; }
.contact-strip .contact-line .label { color: rgba(255,255,255,.62); }
.contact-strip .contact-line .value { color: #fff; }
.contact-strip .contact-line svg { stroke: #fff; }
.contact-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 34px;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.contact-form { display: grid; gap: 16px; max-width: 560px; }
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
.field textarea { min-height: 148px; resize: vertical; }
.field .optional { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) { border-color: #c0392b; }
.form-note { font-size: .88rem; color: var(--muted); }

/* submit + result blocks (same contract as the other sites: .form-wrapper
   holds the form plus a hidden .form-done and .form-fail) */
.contact-form button[type="submit"][disabled] { opacity: .6; cursor: progress; transform: none; }

.form-status {
  max-width: 560px;
  padding: 20px 24px;
  margin-top: 4px;
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-soft);
}
.form-status p { margin: 0; }
.form-status strong { color: var(--accent-dark); }
.form-fail { border-left-color: #c0392b; background: #fdeeec; }
.form-fail strong { color: #a5281b; }

/* --------------------------------------------------------------------------
   12. Payment card
   -------------------------------------------------------------------------- */
.pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 22px; max-width: 900px; }
.pay-card {
  max-width: 460px;
  padding: 36px 32px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.pay-card h3 { margin-bottom: .4em; }
.pay-card p { color: var(--muted); }
.pay-card .btn { width: 100%; margin-top: 8px; white-space: normal; }
.pay-grid > .pay-card { min-width: 0; }
@media (max-width: 640px) { .pay-card { padding: 28px 20px; } }
.pay-card .pay-price { margin: 0 0 .3em; font-size: 2.6rem; line-height: 1.1; }
.pay-card .pay-price strong { color: var(--ink-strong); }
.pay-card .pay-includes { list-style: none; margin: 0 0 20px; padding: 0; text-align: left; }
.pay-card .pay-includes li { position: relative; margin: 0 0 8px; padding-left: 26px; font-size: .95rem; }
.pay-card .pay-includes li::before {
  content: ""; position: absolute; left: 4px; top: .45em;
  width: 11px; height: 6px; border-left: 2px solid #2e9e5b; border-bottom: 2px solid #2e9e5b;
  transform: rotate(-45deg);
}
.pay-card .pay-status { margin-top: 14px; font-size: .9rem; color: var(--muted); min-height: 1.4em; }
.pay-card .secure {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px; font-size: .8rem; color: var(--muted);
}
.pay-card .secure svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding: 62px 0 0;
  background: var(--footer-bg);
  color: var(--footer-ink);
  font-size: .94rem;
}
.site-footer h3 {
  color: #fff;
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--accent); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 40px;
  padding-bottom: 46px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 9px; }
.site-footer .contact-line svg { stroke: var(--accent); }
.site-footer .contact-line .label { color: rgba(255,255,255,.5); }
.site-footer .contact-line .value { color: #fff; }
.footer-credits {
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .84rem;
  text-align: center;
}

/* back to top */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  box-shadow: var(--shadow-md);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent-dark); }
.to-top svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------------------
   14. Reveal on scroll
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
/* nine menu items only fit in one row from 1400px up; below that the menu
   collapses behind the toggle rather than running off the right edge */
@media (max-width: 1399px) {
  :root { --header-h: 72px; }

  .nav-toggle { display: inline-flex; }

  .site-logo img { width: 170px; height: auto; }

  .primary-nav {
    position: fixed;
    top: calc(var(--header-h) + var(--promo-h));
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 20px 40px;
    background: #fff;
    border-top: 1px solid var(--line);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .28s ease;
  }
  .primary-nav.is-open { transform: translateX(0); }

  .menu { display: block; }
  .menu > li { border-bottom: 1px solid var(--line); }
  .menu > li > a { padding: 15px 4px; font-size: .84rem; }
  .menu > li.is-current > a { box-shadow: none; }

  .has-children > a::after { float: right; margin-top: 9px; transition: transform .2s ease; }
  .has-children.is-open > a::after { transform: rotate(180deg) translateY(-2px); }

  .sub-menu {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 10px 16px;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .has-children.is-open > .sub-menu { display: block; }
  .has-children:hover > .sub-menu { display: none; }
  .has-children.is-open:hover > .sub-menu { display: block; }

}

@media (max-width: 991px) {
  .content-grid { grid-template-columns: 1fr; gap: 44px; }

  .page-banner { background-attachment: scroll; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .section { padding: 54px 0; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  .hero { min-height: 82vh; }
  .steps > li { padding-left: 60px; }
  .steps > li::before { width: 40px; height: 40px; font-size: 1rem; }
  .steps > li::after { left: 19px; top: 48px; }
  .contact-cols { text-align: center; }
  .contact-cols .contact-line { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .to-top, .search-overlay, .hero__bg { display: none !important; }
  body { color: #000; }
}

/* --------------------------------------------------------------------------
   16. Articles
   -------------------------------------------------------------------------- */
.post-card {
  padding: 0 0 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.post-card:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.post-card__date {
  margin: 0 0 .4em;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-card h2 { font-size: 1.45rem; margin: 0 0 .45em; }
.post-card h2 a { color: var(--ink-strong); }
.post-card h2 a:hover, .post-card h2 a:focus { color: var(--accent); text-decoration: none; }
.post-card p { color: var(--muted); margin-bottom: .8em; }
.post-card__more { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.article-foot {
  margin-top: 2.5em;
  padding-top: 1.4em;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.page-banner .breadcrumbs a { text-decoration: none; }

/* --------------------------------------------------------------------------
   17. Hero rework, header call, reassurance block, mini steps
   -------------------------------------------------------------------------- */
.hero__eyebrow {
  margin-bottom: 14px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.hero h1 { margin-bottom: .45em; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* the call button is the loudest thing on the page, deliberately */
.btn--call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1c9c5b;
  border-color: #1c9c5b;
  color: #fff;
}
.btn--call:hover, .btn--call:focus { background: #17864e; border-color: #17864e; color: #fff; }
.btn--call svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* header tap-to-call, always reachable */
.header-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  margin-right: 4px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.header-call:hover, .header-call:focus { background: var(--accent); color: #fff; text-decoration: none; }
.header-call svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* reassurance block */
.reassure { max-width: 46em; margin: 0 auto; }
.reassure h2 { margin-bottom: .7em; }
.reassure p { font-size: 1.06rem; }
.reassure__close {
  padding: 18px 22px;
  margin-top: 1.6em;
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.reassure__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.8em;
}

/* condensed steps */
.mini-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.mini-steps li {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.mini-steps span {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
}
.mini-steps strong { display: block; margin-bottom: 4px; color: var(--ink-strong); }
.mini-steps p { margin: 0; font-size: .92rem; color: var(--muted); }

@media (max-width: 1399px) {
  .header-call span { display: none; }
  .header-call { padding: 10px; }
}
@media (max-width: 640px) {
  .hero__actions .btn { width: 100%; }
  .reassure__cta .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   18. Stronger calls to action
   -------------------------------------------------------------------------- */
.btn--xl {
  padding: 18px 34px;
  font-size: .9rem;
  border-radius: 8px;
}
.btn--xl.btn--call { padding: 14px 30px; }

/* two-line call button: the action on top, the number beneath */
.btn__stack { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.btn__lead { font-size: .92rem; letter-spacing: .06em; }
.btn__sub {
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
}
.btn--call { box-shadow: 0 6px 18px rgba(28, 156, 91, .34); }
.btn--call:hover, .btn--call:focus { box-shadow: 0 10px 26px rgba(28, 156, 91, .42); }


/* mid-page prompt */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  margin-top: 46px;
  padding: 32px 34px;
  background: #fff;
  border: 1px solid var(--accent-line, #cfe0f1);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.cta-band h3 { margin-bottom: .3em; }
.cta-band p { margin: 0; color: var(--muted); max-width: 46ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.cta-band .btn--call { color: #fff; }
.cta-band .btn--call svg { width: 17px; height: 17px; }

/* closing call to action */
.final-cta {
  position: relative;
  padding: 104px 0 96px;
  overflow: hidden;
  text-align: center;
  color: #fff;
}
.final-cta__bg {
  position: absolute;
  inset: 0;
  background: url("../assets/dallas-skyline.jpg") center/cover no-repeat;
}
.final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,18,29,.90), rgba(10,18,29,.80));
}
.final-cta__inner { position: relative; z-index: 2; }
.final-cta__eyebrow {
  margin-bottom: 12px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.final-cta h2 {
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 300;
  margin-bottom: .5em;
}
.final-cta__lead {
  max-width: 44em;
  margin: 0 auto 2.2rem;
  font-size: 1.06rem;
  color: rgba(255,255,255,.9);
}
.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.final-cta__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  justify-content: center;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .9rem;
  color: rgba(255,255,255,.76);
}
.final-cta__meta li { margin: 0; }
.final-cta__meta a { color: #fff; }

@media (max-width: 640px) {
  .cta-band { padding: 26px 22px; }
  .cta-band__actions .btn { width: 100%; justify-content: center; }
  .final-cta { padding: 76px 0 68px; }
  .final-cta__actions .btn { width: 100%; justify-content: center; }
  .btn--xl.btn--call { justify-content: center; }
  .final-cta__meta { flex-direction: column; gap: 8px; }
}

/* --------------------------------------------------------------------------
   19. Photography
   -------------------------------------------------------------------------- */
.photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(15, 27, 43, .08), 0 18px 40px rgba(15, 27, 43, .12);
}
figure { margin: 0; }

/* photo beside text */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split .reassure { max-width: none; margin: 0; }
.split__media .photo { aspect-ratio: 4 / 3; object-fit: cover; }

/* wide band above the steps */
.band-media { margin: 0 0 38px; }
.photo--band { aspect-ratio: 21 / 8; object-fit: cover; object-position: center 30%; }

/* portrait inside the mid-page prompt */
.cta-band--media { align-items: stretch; }
.cta-band__media {
  flex: 0 0 240px;
  margin: -32px 0 -32px -34px;
}
.cta-band__media .photo {
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: none;
}
.cta-band--media > div { flex: 1 1 280px; align-self: center; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 30px; }
  .split--reverse .split__media { order: 0; }
  .photo--band { aspect-ratio: 16 / 9; }
  .cta-band__media { flex-basis: 100%; margin: -26px -22px 0; }
  .cta-band__media .photo { aspect-ratio: 16 / 9; border-radius: var(--radius) var(--radius) 0 0; }
}

/* --------------------------------------------------------------------------
   20. Header fit
   -------------------------------------------------------------------------- */
/* The logo must never be the thing that gives way. With the call button and
   the Articles item added, the header's contents outgrew the 1140px container
   and flexbox shrank the logo to zero width. */
.site-logo { flex-shrink: 0; }
.site-logo img { max-width: none; }

/* the header gets a little more room than the body copy does */
.site-header .container { max-width: 1320px; }

@media (min-width: 1400px) {
  .menu > li > a { padding: 10px 9px; letter-spacing: .045em; }
  .nav-tools { gap: 2px; min-width: 0; }
}
/* with the full menu showing, the call button keeps its icon and drops the
   number until there is room for both */
@media (min-width: 1400px) and (max-width: 1599px) {
  .header-call span { display: none; }
  .header-call { padding: 10px; }
}


/* --------------------------------------------------------------------------
   21. No orphaned cards
   -------------------------------------------------------------------------- */
/* six service cards and five steps both left one card alone on a second row
   at desktop widths; give each its full count across when there is room */
@media (min-width: 1000px) {
  .section > .container > .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .section > .container > .card-grid .card { padding: 30px 24px; }
}
@media (min-width: 1100px) {
  .mini-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .mini-steps li { flex-direction: column; gap: 12px; padding: 22px 18px; }
}
.content-grid--center { align-items: center; }

/* --------------------------------------------------------------------------
   22. Call card over the hero button, and the call beside step 1
   -------------------------------------------------------------------------- */
.call-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 22px 12px;
  background: rgba(255, 255, 255, .96);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  line-height: 1.25;
}
.call-card__lead {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.call-card__num {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-strong);
}
.call-card__num:hover, .call-card__num:focus { color: #1c9c5b; text-decoration: none; }

/* step 1 on the get-started page: text on the left, the call on the right */
.steps > li.step-with-call {
  display: flex;
  align-items: center;
  gap: 24px;
}
.step-with-call__text { flex: 1 1 auto; min-width: 0; }
.step-with-call__btn {
  flex: 0 0 auto;
  font-size: 1.05rem;
  padding: 20px 38px;
}
.step-with-call__btn svg { width: 22px; height: 22px; }

/* the sidebar call button uses the same icon sizing */
.widget .btn--call svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.widget .btn--call { display: inline-flex; align-items: center; gap: 8px; color: #fff; }

@media (max-width: 640px) {
    .steps > li.step-with-call { flex-direction: column; align-items: flex-start; }
  .step-with-call__btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   23. One call-to-action pattern, everywhere
   -------------------------------------------------------------------------- */
/* Every pair on the page is the same: a green Call now, then an outlined
   Start the five steps, identical in size. The hero and closing sections add
   the number card above the green button. */
.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;          /* the two buttons share a baseline */
  justify-content: center;
  margin: 0;
}
.cta-group--start { justify-content: flex-start; }

.cta-call {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 250px;
}
.cta-call .call-card { box-sizing: border-box; width: 100%; }

.btn--cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  width: 250px;
  height: 58px;
  padding: 0 22px;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  border-width: 2px;
  border-radius: 8px;
}
.cta-call .btn--cta { width: 100%; }
.btn--cta svg {
  flex: none; width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn--cta.btn--call:hover, .btn--cta.btn--call:focus { color: #fff; }

/* the mid-page prompt is narrow; stack its pair rather than squeeze it */
.cta-band .cta-group { flex-direction: column; align-items: stretch; }

@media (max-width: 640px) {
  .cta-group { flex-direction: column; align-items: stretch; }
  .cta-call, .btn--cta { width: 100%; }
}

/* --------------------------------------------------------------------------
   24. Two buttons only: Talk to a SAP now + a solid white five steps
   -------------------------------------------------------------------------- */
.btn--cta { width: 270px; letter-spacing: .1em; }
.btn--white {
  background: #fff;
  border-color: #fff;
  color: var(--ink-strong);
}
.btn--white:hover, .btn--white:focus {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--accent-dark);
  text-decoration: none;
}
/* on the light sections a white button needs an edge to be seen */
.section .btn--white, .cta-band .btn--white {
  border-color: var(--accent);
  color: var(--accent-dark);
}
.section .btn--white:hover, .section .btn--white:focus,
.cta-band .btn--white:hover, .cta-band .btn--white:focus {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.cta-group { align-items: center; }
@media (max-width: 640px) { .btn--cta { width: 100%; } }

/* --------------------------------------------------------------------------
   25. Convenience strip under the hero
   -------------------------------------------------------------------------- */
.perks {
  background: var(--navy, #0f1b2b);
  color: #fff;
  padding: 30px 0;
}
.perks__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.perk { display: flex; gap: 14px; align-items: flex-start; }
.perk svg {
  flex: none; width: 26px; height: 26px; margin-top: 2px;
  fill: none; stroke: #5fd394; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.perk strong { display: block; font-size: 1rem; margin-bottom: 3px; color: #fff; }
.perk span { display: block; font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.72); }

@media (max-width: 991px) { .perks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .perks__grid { grid-template-columns: 1fr; gap: 18px; } }

/* --------------------------------------------------------------------------
   26. Teams download buttons
   -------------------------------------------------------------------------- */
.teams-dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 12px;
}
.teams-dl__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 10px;
  color: var(--ink-strong);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.teams-dl__btn:hover, .teams-dl__btn:focus {
  border-color: #5b5fc7;                         /* Teams purple */
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
  text-decoration: none;
}
.teams-dl__btn svg {
  flex: none; width: 26px; height: 26px;
  fill: none; stroke: #5b5fc7; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.teams-dl__btn strong { display: block; font-size: .95rem; line-height: 1.25; }
.teams-dl__btn small { display: block; font-size: .78rem; color: var(--muted); }

/* the button for the visitor's own device, set by main.js */
.teams-dl__btn.is-recommended { border-color: #5b5fc7; background: #f4f4fd; }
.teams-dl__btn.is-recommended::after {
  content: "Your device";
  position: absolute;
  top: -10px; right: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: #5b5fc7;
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.teams-dl__skip { font-size: .9rem; color: var(--muted); }

@media (max-width: 640px) { .teams-dl { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   27. Hero badges and FAQ
   -------------------------------------------------------------------------- */
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.hero__badges li {
  margin: 0;
  padding: 7px 14px 7px 32px;
  position: relative;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 30px;
  background: rgba(10, 18, 29, .35);
  font-size: .86rem;
  font-weight: 600;
  color: #fff;
}
/* four badges: a balanced 2 x 2 rather than three and an orphan */
@media (min-width: 700px) {
  .hero__badges { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; }
  .hero__badges li { text-align: left; }
}
.hero__badges li::before {
  content: "";
  position: absolute;
  left: 13px; top: 50%;
  width: 11px; height: 6px;
  margin-top: -5px;
  border-left: 2px solid #5fd394;
  border-bottom: 2px solid #5fd394;
  transform: rotate(-45deg);
}

.faq { max-width: 820px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  margin-bottom: 10px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.faq-item[open] { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.faq-item summary {
  position: relative;
  padding: 18px 52px 18px 22px;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink-strong);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover { color: var(--accent); }
.faq-item__a { padding: 0 22px 18px; }
.faq-item__a p { margin: 0; color: var(--ink); }

@media (max-width: 640px) {
  .hero__badges { flex-direction: column; align-items: stretch; }
  .hero__badges li { text-align: left; }
}

/* hero: room for the eyebrow and all three badges on one line each */
.nowrap { white-space: nowrap; }
/* the spaced-out hero eyebrow is wider than a small phone; let it wrap there */
@media (max-width: 420px) { .hero__eyebrow { letter-spacing: .12em; } .hero__eyebrow .nowrap { white-space: normal; } }
.hero__inner { max-width: 1020px; }

/* --------------------------------------------------------------------------
   28. Home page contact form
   -------------------------------------------------------------------------- */
.home-contact__inner { max-width: 720px; }
.home-contact .form-wrapper { background: #fff; padding: 32px 30px; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.home-contact .contact-form { max-width: none; }
.home-contact .form-note { text-align: center; margin-top: 18px; }
@media (max-width: 640px) { .home-contact .form-wrapper { padding: 24px 18px; } }

/* --------------------------------------------------------------------------
   29. Same-day promo bar (inside the sticky header, so it stays on screen)
   -------------------------------------------------------------------------- */
:root { --promo-h: 64px; }
.promo-bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 4px 18px; height: var(--promo-h); padding: 0 16px; overflow: hidden;
  background: linear-gradient(90deg, #1f8a4c, #2eaf62, #1f8a4c);
  background-size: 200% 100%;
  color: #fff; text-align: center; text-decoration: none;
  animation: promo-sweep 4s linear infinite;
}
.promo-bar:hover, .promo-bar:focus { color: #fff; text-decoration: none; }
.promo-bar__flash {
  font-size: 1.7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  animation: promo-pulse 1.6s ease-in-out infinite;
}
.promo-bar__call {
  padding: 5px 14px; border: 2px solid #fff; border-radius: 30px;
  font-weight: 700; font-size: .95rem; white-space: nowrap;
}
.promo-bar:hover .promo-bar__call { background: #fff; color: #1f8a4c; }
@keyframes promo-sweep { from { background-position: 0 0; } to { background-position: 200% 0; } }
@keyframes promo-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); text-shadow: 0 0 14px rgba(255,255,255,.7); } }
@media (prefers-reduced-motion: reduce) {
  .promo-bar, .promo-bar__flash { animation: none; }
}
@media (max-width: 900px) {
  :root { --promo-h: 82px; }
  .promo-bar { gap: 4px 10px; padding: 0 12px; align-content: center; }
  .promo-bar { flex-direction: column; }
  .promo-bar__flash { font-size: clamp(.95rem, 4.3vw, 1.3rem); letter-spacing: .02em; white-space: nowrap; }
  .promo-bar__call { font-size: .85rem; padding: 3px 10px; }
}

/* --------------------------------------------------------------------------
   30. Split payment callout
   -------------------------------------------------------------------------- */
.split-pay {
  margin: 0 0 26px; padding: 22px 26px; max-width: 900px;
  background: #eaf7ef; border: 2px solid #2e9e5b; border-radius: var(--radius);
}
.split-pay p { margin: 0; }
.split-pay__head { font-size: 1.35rem; font-weight: 800; color: #1f7a45; margin-bottom: 6px !important; }
.pay-card .btn--ghost { margin-top: 10px; }
.pay-card .pay-via { margin: -2px 0 16px; font-size: .95rem; }
.pay-grid + .secure { display: flex; justify-content: center; margin: 14px 0 0; font-size: .82rem; color: var(--muted); gap: 7px; align-items: center; }
.pay-grid + .secure svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

/* --------------------------------------------------------------------------
   31. Jobs page: job-board cards are whole-card links
   -------------------------------------------------------------------------- */
.job-boards { margin: 20px 0 10px; }
a.job-board { display: block; color: inherit; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
a.job-board h3 { color: var(--accent); margin-bottom: .35em; }
a.job-board h3::after { content: " \2197"; font-size: .8em; }
a.job-board:hover, a.job-board:focus { transform: translateY(-2px); box-shadow: var(--shadow-md);
  border-color: var(--accent); text-decoration: none; }
a.job-board p { margin: 0; color: var(--muted); }

/* --------------------------------------------------------------------------
   32. What sets us apart
   -------------------------------------------------------------------------- */
.apart__list { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.apart__list li { margin: 0; padding: 22px 22px 22px 58px; position: relative; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.apart__list li::before { content: ""; position: absolute; left: 22px; top: 26px; width: 22px; height: 22px;
  border-radius: 50%; background: #2e9e5b; }
.apart__list li::after { content: ""; position: absolute; left: 28px; top: 32px; width: 9px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.apart__list strong { display: block; margin-bottom: 6px; color: var(--ink-strong); font-size: 1.05rem; }
.apart__list span { color: var(--muted); }
@media (min-width: 1000px) {
  .apart__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .apart__list li { grid-column: span 2; }
  
}

/* 33. No-PHI hint above form submit buttons */
.form-hint { font-size: .85rem; color: var(--muted); margin: 4px 0 12px; }