/* ==========================================================================
   Service pages (template-service.php, mu-plugins/081-tely-services.php).
   Loaded after main.css. The pages are built from homepage blocks (.hero,
   .hiw, .hipaa, .stories, .midcta, .integrations); this file only adds what
   the homepage has no equivalent for, using the :root tokens from main.css.
   Values mirror css/challenges.css so services and challenges read as one
   family.
   ========================================================================== */

/* ---- Hero ------------------------------------------------------------- */
.sv-hero { min-height: 88vh; }
.sv-hero .hero-bg img { object-position: center; }
.sv-hero-video, .sv-hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-hero--flip .sv-hero-video, .sv-hero--flip .sv-hero-poster { transform: scaleX(-1); } /* subject to the right, like the homepage */
.sv-hero-video { opacity: 0; transition: opacity 0.6s ease; }
.sv-hero-video.is-playing { opacity: 1; }
.sv-hero .hero-content { align-items: flex-end; padding-bottom: 88px; }
.sv-hero-left { max-width: 820px; gap: 22px; }
.sv-hero-h1 { text-wrap: balance; }
.sv-nobr { white-space: nowrap; }
.sv-hero-sub { max-width: 620px; }

.sv-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, 0.72); }
.sv-crumbs li + li::before { content: "/"; margin: 0 10px; color: rgba(255, 255, 255, 0.4); }
.sv-crumbs a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
.sv-crumbs a:hover { color: var(--white); }
.sv-crumbs [aria-current] { color: var(--white); }

.sv-eyebrow {
  display: flex; align-items: center; gap: 10px; margin-top: -6px;
  /* Same kicker as the specialty hero and the homepage .midcta-kicker (integration pass). */
  font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.sv-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.sv-hero-ctas + .hero-btn-note { margin-top: -6px; }

/* Second button: the homepage .hero-btn, outlined. */
.sv-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 31px;
  font-family: var(--sans); font-weight: 400; font-size: 18px;
  color: var(--white); background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 8px;
  transition: background 0.3s, border-color 0.3s; white-space: nowrap;
}
.sv-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--white); }

/* ---- Plain sections (homepage frame, page background) ------------------ */
.sv-plain .hipaa-inner { background: transparent; }
.sv-page .hipaa-copy { max-width: var(--measure-head); }
.sv-page .hipaa-heading { text-wrap: balance; }
.sv-p { font-size: var(--fs-lead); line-height: 1.5; }
.sv-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: var(--grid-gap-wide); align-items: start; }
.sv-split-body { display: flex; flex-direction: column; gap: 16px; padding-top: 10px; }
.sv-signs { list-style: none; display: flex; flex-direction: column; margin-top: 8px; border-top: 1px solid var(--border2); }
.sv-signs li {
  position: relative; padding: 14px 0 14px 24px; border-bottom: 1px solid var(--border2);
  font-weight: 400; font-size: 16.5px; line-height: 1.4; color: var(--ink);
}
.sv-signs li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 8px; height: 8px; background: var(--cyan); transform: rotate(45deg); }

/* ---- How it works: example card on the step photo ---------------------- */
/* Light step photos: a soft ink scrim under the homepage glass keeps white text readable. */
.sv-story .hiw-story-card { background: rgba(10, 17, 26, 0.42); border-color: rgba(255, 255, 255, 0.16); }
.sv-story .hiw-story-card { left: 56px; right: 56px; bottom: 48px; padding: 14px 18px 14px; display: flex; flex-direction: column; gap: 8px; }
/* Layout fix: the SMS thread is .hiw-sms-thread (width 100%, max 380px in main.css); with left/right
   set that pushed it past the photo at 390. Let left/right size it, like the homepage follow-up card.
   Cards stay compact and sit low, so the subject's face above them reads. */
.sv-story .hiw-story-card.hiw-sms-thread { width: auto; max-width: none; }
/* 'card' => 'drop' (services-data.php): the subject's face sits low, so on desktop the card hangs
   below the photo and past the frame instead of covering the face. */
@media (min-width: 1025px) {
  .sv-story--card-drop .hiw-story-card { bottom: -28px; }
}
.sv-story .hiw-sms-bubble { max-width: 92%; font-size: 13.5px; padding: 9px 13px; }
.sv-story .hiw-sms-bubble--out { background: rgba(255, 255, 255, 0.16); border: none; color: var(--white); }
.sv-story .hiw-sms-bubble--in { background: var(--white); border: none; color: var(--ink); }
.sv-card-ex { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.sv-card-rows { list-style: none; display: flex; flex-direction: column; font-family: var(--sans); font-weight: 300; font-size: 14px; line-height: 1.35; color: var(--white); }
.sv-card-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.sv-card-rows li:first-child { border-top: 0; padding-top: 2px; }
.sv-card-rows li > span:last-child { text-align: right; flex-shrink: 0; max-width: 55%; }
.sv-card-rows li.is-new { font-weight: 500; }
.sv-card-rows li.is-quote { display: block; font-style: italic; opacity: 0.9; }
.sv-card-tag { display: inline-block; font-size: 12px; font-weight: 500; background: rgba(255, 255, 255, 0.14); padding: 4px 12px; border-radius: 30px; white-space: nowrap; }
.sv-card-ok { display: inline-flex; align-items: center; gap: 8px; }
.sv-card-ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* ---- What's included / hub directory ----------------------------------- */
.sv-plain .hipaa-pillar { background: var(--warm); }
.sv-pillars .hipaa-pillar { height: 100%; }
.sv-group + .sv-group { margin-top: 8px; }
.sv-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border2); }
.sv-group-h { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.2; }
.sv-group-sub { font-size: 16px; line-height: 1.5; color: var(--muted2); max-width: 46ch; text-align: right; }
.sv-pillar-link { transition: border-color 0.25s ease, transform 0.25s ease; }
.sv-pillar-link:hover { border-color: var(--border); transform: translateY(-3px); }
.sv-more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 10px; font-weight: 400; font-size: 15px; color: var(--ink); }

/* ---- Live sites -------------------------------------------------------- */
.sv-sites-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.sv-site { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--bg); border: 1px solid var(--border2); transition: border-color 0.25s ease, transform 0.25s ease; }
.sv-site:hover { border-color: var(--border); transform: translateY(-3px); }
.sv-site-shot { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--warm2); }
.sv-site-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.sv-site-meta { display: flex; flex-direction: column; gap: 6px; }
.sv-site-name { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--serif); font-weight: 300; font-size: 21px; line-height: 1.25; }

/* ---- Proof ------------------------------------------------------------- */
.sv-stories-heading { margin-bottom: var(--stack-content); }
.sv-stories-heading h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.sv-stories-lede {
  margin: var(--stack-lead) 0 0; max-width: var(--measure-text); font-family: var(--sans); font-weight: 300;
  font-size: var(--fs-lead); line-height: 1.45; color: var(--muted2);
}
/* Metric grids sized to their count (main.css assumes 3), so a single metric's label is not squeezed
   into a third of the card and wrapped to four lines on phones. */
.sv-stories .sv-snap-1 { grid-template-columns: minmax(0, 1fr); }
.sv-stories .sv-snap-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- Mid CTA: two actions instead of the email pill -------------------- */
.sv-midcta-actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }
.sv-btn-light {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 14px 13px 26px;
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  color: var(--ink); background: var(--white); border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s ease;
}
.sv-btn-light:hover { transform: translateY(-2px); }
.sv-btn-ghost--pill { border-radius: 999px; padding: 13px 26px; font-size: 16px; font-weight: 600; }

/* ---- FAQ --------------------------------------------------------------- */
.sv-faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--grid-gap-wide); align-items: start; }
.sv-faq { border-top: 1px solid var(--border); }
.sv-faq-item { border-bottom: 1px solid var(--border); }
.sv-faq-q {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 22px 0;
  font-family: var(--sans); font-weight: 500; font-size: 18px; line-height: 1.4; letter-spacing: -0.2px; color: var(--ink);
}
.sv-faq-q::-webkit-details-marker { display: none; }
.sv-faq-q::after { content: "+"; font-weight: 300; font-size: 28px; line-height: 0.9; color: var(--muted); flex-shrink: 0; transition: transform 0.25s; }
.sv-faq-item[open] .sv-faq-q::after { transform: rotate(45deg); color: var(--ink); }
.sv-faq-a { padding: 0 40px 24px 0; }
.sv-faq-a p { font-size: 16px; line-height: 1.6; color: var(--muted2); max-width: 70ch; }

/* ---- Related link lists ------------------------------------------------ */
.sv-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--grid-gap-wide); align-items: start; }
.sv-related-h { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.2; margin-bottom: 16px; }
.sv-links { list-style: none; border-top: 1px solid var(--border2); }
.sv-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px 0;
  border-bottom: 1px solid var(--border2);
  font-size: 17px; font-weight: 400; color: var(--ink);
}
.sv-links--tight a { min-height: 48px; padding: 11px 0; font-size: 16px; }
.sv-links a svg { flex-shrink: 0; transition: transform 0.2s ease; }
.sv-links a:hover svg { transform: translateX(4px); }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1200px) {
  .sv-sites-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  /* stacked split: the body is the lead under the h2 */
  .sv-split { gap: var(--stack-lead); }
  .sv-split-body { padding-top: 0; }
  .sv-hero .hero-content { padding-top: 120px; padding-bottom: 64px; }
  .sv-split, .sv-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .sv-group-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sv-group-sub { text-align: left; }
  .sv-midcta-actions { margin-top: 8px; }
}
@media (max-width: 768px) {
  .sv-hero { min-height: 86vh; min-height: 86svh; }
  .sv-hero .hero-content { padding: 110px 16px 40px; align-items: flex-end; }
  .sv-hero-video, .sv-hero-poster { object-position: 72% center; }
  .sv-hero-left { gap: 16px; }
  .sv-crumbs ol { font-size: 13px; }
  .sv-eyebrow { font-size: 12px; }
  .sv-hero-ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .sv-hero-ctas .hero-btn, .sv-hero-ctas .sv-btn-ghost { justify-content: center; padding-top: 14px; padding-bottom: 14px; font-size: 16px; }
  .sv-story .hiw-story-card { left: 24px; right: 24px; bottom: 24px; padding: 12px 14px 12px; gap: 7px; }
  .sv-story .hiw-sms-bubble { font-size: 13px; padding: 8px 12px; }
  .sv-card-rows { font-size: 13px; }
  .sv-card-rows li { padding: 7px 0; }
  .sv-sites-grid { grid-template-columns: minmax(0, 1fr); }
  .sv-midcta-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .sv-midcta-actions a { justify-content: center; }
  .sv-faq-q { font-size: 16.5px; padding: 18px 0; }
  .sv-faq-a { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-hero-video { display: none; }
}

/* Homepage link, given a 44px tap target here. */
.sv-stories .stories-viewall-link { min-height: 44px; display: inline-flex; align-items: center; }

/* Breadcrumb links: 44px tap target on touch screens, as on challenge and specialty pages. */
@media (max-width: 1024px) {
  .sv-crumbs a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
}

/* ---- Hero photo placement (images pass) --------------------------------
   Desktop: per-page --hero-pos keeps the subject right of the headline.
   Phone: the photo is a band across the top and the copy starts below it,
   so the subject is never under the H1 (--hero-pos-m per page). */
.sv-hero .hero-bg img, .sv-hero-video, .sv-hero-poster { object-position: var(--hero-pos, center); }
@media (max-width: 768px) {
  .sv-hero { background: var(--ink); }
  .sv-hero .hero-bg { bottom: auto; height: 400px; }
  .sv-hero .hero-bg img, .sv-hero-video, .sv-hero-poster { object-position: var(--hero-pos-m, 72% center); }
  .sv-hero .hero-gradient {
    background: linear-gradient(180deg, rgba(10,17,26,0.5) 0%, rgba(10,17,26,0) 26%, rgba(10,17,26,0) 58%, rgba(10,17,26,0.82) 88%, rgba(10,17,26,1) 100%);
  }
  .sv-hero .hero-content { padding-top: 340px; }
}

/* Headings never end on a single short word (card titles, section heads, footer CTA). */
.sv-page :is(h2, h3, h4), .cta-content h2 { text-wrap: balance; }