/* ═══════════════════════════════════════════════════
   SERVICE DETAIL PAGES · Red Lion Advisory
   Depends on main.css (tokens, header, hero, footer, CTA)
   ═══════════════════════════════════════════════════ */

/* ─── SERVICE INTRO ─── */
#svc-intro {
  padding: 140px 0 120px;
  background: var(--bg);
  position: relative;
}
#svc-intro::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.svc-intro-grid {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: 90px; align-items: start;
}
.svc-intro-left h2 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  font-weight: 500; line-height: 1.06; letter-spacing: -0.02em;
  margin-top: 6px;
}
.svc-intro-left h2 em { color: var(--red); font-style: italic; }
.svc-intro-right p {
  font-size: 1.05rem; line-height: 1.85; color: var(--muted);
  margin-bottom: 22px;
}
.svc-intro-right p:last-of-type { margin-bottom: 0; }
.svc-intro-right p strong { color: var(--text); font-weight: 500; }

.svc-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
  margin-top: 70px;
}
.svc-stat {
  background: var(--surface);
  padding: 34px 28px;
}
.svc-stat-val {
  font-family: var(--serif);
  font-size: 1.7rem; font-weight: 600;
  color: var(--red); line-height: 1;
  margin-bottom: 12px;
}
.svc-stat-label {
  font-size: 0.82rem; line-height: 1.55; color: var(--muted);
}

/* ─── KEYWORD / CAPABILITY SECTIONS ─── */
#svc-pillars {
  padding: 150px 0;
  background: var(--surface);
  position: relative;
}
#svc-pillars::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.svc-section-head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: end;
  margin-bottom: 80px; padding-bottom: 56px;
  border-bottom: 1px solid var(--border);
}
.svc-section-head h2 {
  font-family: var(--serif);
  font-size: clamp(2.3rem, 4vw, 3.2rem);
  font-weight: 500; line-height: 1.06; letter-spacing: -0.02em;
}
.svc-section-head h2 em { color: var(--red); font-style: italic; }
.svc-section-head p {
  font-size: 1.02rem; line-height: 1.8; color: var(--muted);
}

.svc-pillar {
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: 64px; align-items: stretch;
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background 0.35s ease;
}
.svc-pillar:first-of-type { border-top: 1px solid var(--border); }
.svc-pillar::after {
  content: '';
  position: absolute; left: 0; bottom: -1px;
  width: 0; height: 1px; background: var(--red);
  transition: width 0.5s ease;
}
.svc-pillar:hover::after { width: 100%; }

/* Left column: number, title, and tags: stacked so the column fills */
.svc-pillar-title {
  display: flex; flex-direction: column;
  align-items: flex-start;
  padding-left: 34px;
  position: relative;
}
.svc-pillar-num {
  font-family: var(--serif);
  font-size: 0.72rem; font-weight: 600;
  color: var(--red); letter-spacing: 0.16em;
  position: absolute; left: 0; top: 6px;
}
.svc-pillar-title h3 {
  font-family: var(--serif);
  font-size: 1.45rem; font-weight: 500;
  line-height: 1.25; color: var(--text);
  letter-spacing: -0.015em;
  margin-bottom: 24px;
}
/* tags sit at the base of the left column, closing the gap */
.svc-pillar-list {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}
.svc-pillar-list li {
  font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 7px 13px;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.svc-pillar:hover .svc-pillar-list li {
  border-color: rgba(200,33,59,0.35);
  color: var(--text);
}

.svc-pillar-body p {
  font-size: 0.98rem; line-height: 1.85; color: var(--muted);
  margin-bottom: 20px;
}
.svc-pillar-body p:last-child { margin-bottom: 0; }

/* ─── DELIVERABLES GRID ─── */
#svc-deliverables {
  padding: 150px 0;
  background: var(--bg);
  position: relative;
}
#svc-deliverables::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.svc-deliv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
}
.svc-deliv-card {
  background: var(--surface);
  padding: 40px 32px;
  position: relative; overflow: hidden;
  transition: background 0.3s ease;
  min-height: 210px;
}
.svc-deliv-card:hover { background: var(--surface2); }
.svc-deliv-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s ease;
}
.svc-deliv-card:hover::after { transform: scaleX(1); }
.svc-deliv-icon {
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--red);
  margin-bottom: 22px;
  transition: border-color 0.3s ease;
}
.svc-deliv-card:hover .svc-deliv-icon { border-color: rgba(200,33,59,0.4); }
.svc-deliv-card h4 {
  font-family: var(--serif);
  font-size: 1.05rem; font-weight: 500;
  line-height: 1.3; color: var(--text);
  margin-bottom: 12px;
}
.svc-deliv-card p {
  font-size: 0.9rem; line-height: 1.75; color: var(--muted);
}
.svc-deliv-bg-num {
  font-family: var(--serif);
  font-size: 4.5rem; font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200,33,59,0.07);
  position: absolute; bottom: -8px; right: 14px;
  user-select: none; line-height: 1; pointer-events: none;
}

/* ─── ENGAGEMENT PROCESS ─── */
#svc-process {
  padding: 150px 0;
  background: var(--surface);
  position: relative;
}
#svc-process::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.svc-process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
}
.svc-step {
  background: var(--surface);
  padding: 44px 30px;
  position: relative;
  transition: background 0.3s ease;
}
.svc-step:hover { background: var(--surface2); }
.svc-step-num {
  font-family: var(--serif);
  font-size: 2.4rem; font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1px var(--red);
  line-height: 1; margin-bottom: 24px;
}
.svc-step h4 {
  font-family: var(--serif);
  font-size: 1.05rem; font-weight: 500;
  color: var(--text); margin-bottom: 12px;
}
.svc-step p {
  font-size: 0.88rem; line-height: 1.75; color: var(--muted);
}

/* ─── WHO WE WORK WITH ─── */
#svc-audience {
  padding: 150px 0;
  background: var(--bg);
  position: relative;
}
#svc-audience::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.svc-aud-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
}
.svc-aud-card {
  background: var(--surface);
  padding: 42px 36px;
  display: flex; gap: 24px; align-items: flex-start;
  transition: background 0.3s ease;
}
.svc-aud-card:hover { background: var(--surface2); }
.svc-aud-mark {
  font-family: var(--serif);
  font-size: 0.72rem; font-weight: 600;
  color: var(--red); letter-spacing: 0.16em;
  padding-top: 5px; flex-shrink: 0;
}
.svc-aud-card h4 {
  font-family: var(--serif);
  font-size: 1.1rem; font-weight: 500;
  color: var(--text); margin-bottom: 10px;
}
.svc-aud-card p {
  font-size: 0.92rem; line-height: 1.78; color: var(--muted);
}

/* ─── FAQ ─── */
#svc-faq {
  padding: 150px 0;
  background: var(--surface);
  position: relative;
}
#svc-faq::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.svc-faq-inner {
  display: grid; grid-template-columns: 0.85fr 1.4fr;
  gap: 90px; align-items: start;
}
.svc-faq-left h2 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.8vw, 3rem);
  font-weight: 500; line-height: 1.06; letter-spacing: -0.02em;
  margin-top: 6px;
}
.svc-faq-left h2 em { color: var(--red); font-style: italic; }
.svc-faq-left p {
  font-size: 0.98rem; line-height: 1.8; color: var(--muted);
  margin-top: 24px;
}
.svc-faq-list { border-top: 1px solid var(--border); }
.svc-faq-item { border-bottom: 1px solid var(--border); }
.svc-faq-q {
  width: 100%; background: none; border: none;
  color: var(--text); font-family: var(--serif);
  font-size: 1.05rem; font-weight: 500; text-align: left;
  padding: 28px 44px 28px 0;
  cursor: pointer; position: relative;
  line-height: 1.4; letter-spacing: -0.01em;
  transition: color 0.3s ease;
}
.svc-faq-q:hover { color: var(--red); }
.svc-faq-q::after {
  content: '';
  position: absolute; right: 6px; top: 50%;
  width: 12px; height: 1px; background: currentColor;
  transform: translateY(-50%);
}
.svc-faq-q::before {
  content: '';
  position: absolute; right: 11px; top: 50%;
  width: 1px; height: 12px; background: currentColor;
  transform: translateY(-50%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.svc-faq-item.open .svc-faq-q::before { opacity: 0; transform: translateY(-50%) rotate(90deg); }
.svc-faq-item.open .svc-faq-q { color: var(--red); }
.svc-faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.45s ease;
}
.svc-faq-a p {
  font-size: 0.95rem; line-height: 1.85; color: var(--muted);
  padding: 0 40px 30px 0;
}

/* ─── RELATED SERVICES ─── */
#svc-related {
  padding: 150px 0;
  background: var(--bg);
  position: relative;
}
#svc-related::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.svc-related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
  margin-top: 60px;
}
.svc-related-card {
  background: var(--surface);
  padding: 38px 32px;
  display: block;
  transition: background 0.3s ease;
  position: relative;
}
.svc-related-card:hover { background: var(--surface2); }
.svc-related-card .rel-eyebrow {
  font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--red);
  display: block; margin-bottom: 16px;
}
.svc-related-card h4 {
  font-family: var(--serif);
  font-size: 1.15rem; font-weight: 500;
  color: var(--text); line-height: 1.3;
  margin-bottom: 12px;
}
.svc-related-card p {
  font-size: 0.88rem; line-height: 1.7; color: var(--muted);
  margin-bottom: 20px;
}
.svc-related-arrow {
  font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 10px;
  transition: color 0.3s ease, gap 0.3s ease;
}
.svc-related-card:hover .svc-related-arrow { color: var(--red); gap: 16px; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   Breakpoints aligned to main.css: 1100 / 768 / 480
   with 1280 / 900 / 600 / 380 for grid + type steps
   ═══════════════════════════════════════════════════ */

/* Global guards: nothing on these pages may exceed the viewport */
#svc-intro, #svc-pillars, #svc-deliverables, #svc-process,
#svc-audience, #svc-faq, #svc-related { overflow-x: clip; }

.svc-intro-right p,
.svc-pillar-body p,
.svc-pillar-title h3,
.svc-section-head h2,
.svc-deliv-card h4, .svc-deliv-card p,
.svc-step h4, .svc-step p,
.svc-aud-card h4, .svc-aud-card p,
.svc-related-card h4, .svc-related-card p,
.svc-faq-q, .svc-faq-a p,
.svc-stat-label { overflow-wrap: break-word; }

/* Grid children must be allowed to shrink below min-content */
.svc-intro-grid > *, .svc-section-head > *, .svc-faq-inner > *,
.svc-pillar > *, .svc-aud-card > * { min-width: 0; }

/* Hero type: the site default (min 3rem) overflows long words
   like "Transformation" on narrow phones. Scale fluidly instead. */
#page-hero .page-hero-title {
  font-size: clamp(2rem, 7.2vw, 4.5rem);
  overflow-wrap: break-word;
}
#page-hero .page-hero-body { max-width: 620px; }

@media (max-width: 1280px) {
  .svc-intro-grid { gap: 64px; }
  .svc-faq-inner { gap: 64px; }
  .svc-pillar { gap: 48px; }
}

@media (max-width: 1100px) {
  #svc-intro { padding: 120px 0 100px; }
  #svc-pillars, #svc-deliverables, #svc-process,
  #svc-audience, #svc-faq, #svc-related { padding: 120px 0; }
  .svc-deliv-grid,
  .svc-related-grid,
  .svc-process-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-intro-grid,
  .svc-faq-inner { gap: 52px; }
  .svc-section-head { gap: 48px; }
  .svc-pillar { grid-template-columns: 1fr 1.15fr; gap: 40px; }
  .svc-stats { margin-top: 56px; }
}

@media (max-width: 900px) {
  #svc-intro { padding: 100px 0 90px; }
  #svc-pillars, #svc-deliverables, #svc-process,
  #svc-audience, #svc-faq, #svc-related { padding: 100px 0; }
  .svc-intro-grid,
  .svc-section-head,
  .svc-faq-inner { grid-template-columns: 1fr; gap: 36px; }
  .svc-section-head { margin-bottom: 56px; padding-bottom: 40px; align-items: start; }
  /* pillar stacks: number + title + tags, then prose, all on one left rule */
  .svc-pillar { grid-template-columns: 1fr; gap: 20px; padding: 40px 0; }
  .svc-pillar-title h3 { margin-bottom: 16px; }
  .svc-pillar-list { margin-top: 0; padding-top: 0; }
  .svc-pillar-body { padding-left: 34px; }
  .svc-stats { grid-template-columns: 1fr; margin-top: 48px; }
  .svc-stat { padding: 26px 24px; }
  .svc-aud-grid { grid-template-columns: 1fr; }
  /* hero tag strip: 5 items read better as a wrapped grid than a flex row */
  #page-hero .page-hero-tags {
    display: grid; grid-template-columns: repeat(2, 1fr);
    border-left: 1px solid var(--border);
  }
  #page-hero .page-hero-tag {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 16px 18px;
  }
}

@media (max-width: 768px) {
  #svc-intro { padding: 80px 0 72px; }
  #svc-pillars, #svc-deliverables, #svc-process,
  #svc-audience, #svc-faq, #svc-related { padding: 80px 0; }
  .svc-section-head { margin-bottom: 44px; padding-bottom: 32px; }
  .svc-deliv-card { padding: 32px 26px; min-height: 0; }
  .svc-step { padding: 34px 26px; }
  .svc-aud-card { padding: 32px 26px; gap: 18px; }
  .svc-related-card { padding: 30px 26px; }
  .svc-intro-right p { font-size: 1rem; }
  .svc-faq-q { padding: 24px 40px 24px 0; }
  .svc-faq-a p { padding-right: 0; }
}

@media (max-width: 600px) {
  .svc-deliv-grid,
  .svc-related-grid,
  .svc-process-grid { grid-template-columns: 1fr; }
  .svc-deliv-bg-num { font-size: 3.4rem; }
  .svc-step-num { font-size: 2rem; margin-bottom: 18px; }
  /* tags shrink so long labels never push the row wide */
  .svc-pillar-list li { font-size: 0.66rem; padding: 6px 10px; letter-spacing: 0.04em; }
  .svc-pillar-title h3 { font-size: 1.3rem; }
  #page-hero .page-hero-tags { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  #svc-intro { padding: 64px 0 60px; }
  #svc-pillars, #svc-deliverables, #svc-process,
  #svc-audience, #svc-faq, #svc-related { padding: 64px 0; }
  .svc-section-head { margin-bottom: 36px; padding-bottom: 26px; gap: 22px; }
  .svc-intro-grid, .svc-faq-inner { gap: 26px; }
  .svc-pillar { padding: 32px 0; gap: 16px; }
  .svc-pillar-title { padding-left: 26px; }
  .svc-pillar-num { top: 4px; }
  .svc-pillar-body { padding-left: 26px; }
  .svc-pillar-body p { font-size: 0.94rem; margin-bottom: 16px; }
  .svc-deliv-card { padding: 26px 20px; }
  .svc-deliv-icon { margin-bottom: 16px; }
  .svc-step { padding: 28px 20px; }
  .svc-aud-card { padding: 26px 20px; gap: 14px; }
  .svc-related-card { padding: 26px 20px; }
  .svc-stat { padding: 22px 20px; }
  .svc-faq-q { font-size: 0.96rem; padding: 20px 36px 20px 0; }
  .svc-faq-a p { font-size: 0.92rem; padding-bottom: 22px; }
  #page-hero .page-hero-tag { padding: 14px 16px; font-size: 0.64rem; letter-spacing: 0.14em; }
}

@media (max-width: 380px) {
  .svc-pillar-title h3 { font-size: 1.2rem; }
  .svc-deliv-card h4, .svc-aud-card h4 { font-size: 0.98rem; }
  .svc-stat-val { font-size: 1.45rem; }
  .svc-pillar-list { gap: 6px; }
  .svc-pillar-list li { font-size: 0.62rem; padding: 5px 9px; }
}

/* Landscape phones: the 60vh hero leaves no room for the title block */
@media (max-height: 500px) and (orientation: landscape) {
  #page-hero { min-height: auto; }
  #page-hero .page-hero-content { padding-top: 100px; padding-bottom: 32px; }
}

/* Respect reduced-motion: reveal animations should not gate content */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right,
  .reveal-bottom-left, .reveal-bottom-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  #page-hero .page-hero-title .line span,
  #page-hero .page-hero-eyebrow,
  #page-hero .page-hero-body,
  #page-hero .page-hero-tags,
  #page-hero .breadcrumb { animation: none !important; opacity: 1 !important; transform: none !important; }
  .svc-faq-a { transition: none !important; }
}