/* ================================================================
   READYLAYER — services.css
   Page-specific styles for /services only.
   Load order: after main.css
   All classes prefixed svc- to avoid collision with rl- namespace.
   ================================================================ */
 
 
/* ----------------------------------------------------------------
   ACTIVE NAV STATE  (reused on all inner pages via .active)
   ---------------------------------------------------------------- */
.rl-nav-links .nav-link.active {
  color: var(--rl-off-white);
}
 
 
/* ----------------------------------------------------------------
   PAGE HERO
   ---------------------------------------------------------------- */
.svc-hero {
  background:  var(--rl-near-black);
  padding:     140px 0 90px;
  position:    relative;
  overflow:    hidden;
}
.svc-hero::before {
  content:    '';
  position:   absolute;
  top:        0;
  right:      -200px;
  width:      700px;
  height:     700px;
  background: radial-gradient(ellipse, rgba(200,80,42,.07) 0%, transparent 65%);
  pointer-events: none;
}
 
.svc-hero-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           center;
}
 
.svc-hero-h1 {
  font-family:    var(--rl-font-display);
  font-size:      clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight:    800;
  color:          var(--rl-off-white);
  line-height:    1.12;
  letter-spacing: -0.02em;
  margin-bottom:  1.5rem;
  animation:      rl-fadeUp 0.8s ease forwards;
}
.svc-hero-h1 em { font-style: italic; color: var(--rl-accent); }
 
.svc-hero-sub {
  font-size:   1.05rem;
  color:       rgba(245,242,236,.6);
  line-height: 1.75;
  max-width:   520px;
  font-weight: 300;
  animation:   rl-fadeUp 0.8s 0.15s ease forwards;
}
 
/* Hero quick-nav */
.svc-hero-nav { animation: rl-fadeUp 0.8s 0.3s ease forwards; }
 
.svc-hn-label {
  font-family:    var(--rl-font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          rgba(245,242,236,.3);
  margin-bottom:  1rem;
  display:        block;
}
 
.svc-hn-list {
  display:        flex;
  flex-direction: column;
  gap:            1px;
}
 
.svc-hn-item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  background:      rgba(255,255,255,.03);
  padding:         1.1rem 1.5rem;
  border:          1px solid rgba(255,255,255,.05);
  border-left:     3px solid transparent;
  text-decoration: none;
  transition:      background 0.2s, border-left-color 0.2s;
}
.svc-hn-item:hover {
  background:        rgba(255,255,255,.06);
  border-left-color: var(--rl-accent);
}
 
.svc-hn-left  { display: flex; align-items: center; gap: 1rem; }
.svc-hn-right { display: flex; align-items: center; gap: 1.25rem; }
 
.svc-hn-num {
  font-family:    var(--rl-font-mono);
  font-size:      0.6rem;
  color:          var(--rl-accent);
}
.svc-hn-title {
  font-size:   0.9rem;
  font-weight: 500;
  color:       var(--rl-off-white);
}
.svc-hn-price {
  font-family: var(--rl-font-mono);
  font-size:   0.72rem;
  color:       rgba(245,242,236,.35);
}
.svc-hn-arrow {
  color:      rgba(245,242,236,.2);
  font-size:  0.8rem;
  transition: color 0.2s;
}
.svc-hn-item:hover .svc-hn-arrow { color: var(--rl-accent); }
 
@media (max-width: 991.98px) {
  .svc-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .svc-hero { padding: 110px 0 60px; }
}
 
 
/* ----------------------------------------------------------------
   JOURNEY / HOW SERVICES CONNECT
   ---------------------------------------------------------------- */
.svc-journey {
  background:    var(--rl-off-white);
  padding:       var(--rl-section-pad) 0;
  border-bottom: 1px solid var(--rl-border);
}
 
.svc-journey-header {
  max-width:     640px;
  margin-bottom: 4rem;
}
.svc-journey-header h2 {
  font-size:      clamp(1.8rem, 3vw, 2.5rem);
  font-weight:    800;
  letter-spacing: -0.02em;
  margin-bottom:  1rem;
}
.svc-journey-header p {
  font-size:   1rem;
  color:       var(--rl-mid);
  line-height: 1.75;
}
.svc-journey-header a {
  color:         var(--rl-accent);
  border-bottom: 1px solid rgba(200,80,42,.3);
  transition:    border-color 0.2s;
}
.svc-journey-header a:hover { border-color: var(--rl-accent); }
 
.svc-journey-steps {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  position:              relative;
  gap:                   2px;
}
/* connector line between step numbers */
.svc-journey-steps::before {
  content:    '';
  position:   absolute;
  top:        48px;
  left:       calc(33.33% + 12px);
  right:      calc(33.33% + 12px);
  height:     1px;
  background: var(--rl-border);
  z-index:    0;
}
 
.svc-step {
  background: var(--rl-warm);
  padding:    2.5rem;
  border:     1px solid var(--rl-border);
  position:   relative;
}
 
.svc-step-num {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      var(--rl-off-white);
  border:          1px solid var(--rl-border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--rl-font-mono);
  font-size:       0.7rem;
  color:           var(--rl-accent);
  margin-bottom:   1.5rem;
  position:        relative;
  z-index:         1;
}
 
/* Recommended / start-here step */
.svc-step--recommended {
  border-color: var(--rl-accent);
}
.svc-step--recommended::before {
  content:        'Start here';
  position:       absolute;
  top:            -1px;
  left:           1.5rem;
  background:     var(--rl-accent);
  font-family:    var(--rl-font-mono);
  font-size:      0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          #fff;
  padding:        0.2rem 0.6rem;
}
.svc-step--recommended .svc-step-num {
  background:   var(--rl-accent);
  color:        #fff;
  border-color: var(--rl-accent);
}
 
.svc-step-tag {
  font-family:    var(--rl-font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--rl-mid);
  margin-bottom:  0.6rem;
  display:        block;
}
.svc-step h3 {
  font-family:   var(--rl-font-display);
  font-size:     1.25rem;
  font-weight:   700;
  margin-bottom: 0.6rem;
}
.svc-step p {
  font-size:     0.85rem;
  color:         var(--rl-mid);
  line-height:   1.65;
  margin-bottom: 1.25rem;
}
.svc-step-link {
  font-size:       0.8rem;
  font-weight:     600;
  color:           var(--rl-accent);
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  gap:             0.4rem;
}
.svc-step-link:hover { text-decoration: underline; color: var(--rl-accent); }
 
.svc-step-optional {
  display:        inline-block;
  margin-top:     0.5rem;
  font-family:    var(--rl-font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--rl-mid);
  background:     var(--rl-off-white);
  border:         1px solid var(--rl-border);
  padding:        0.25rem 0.6rem;
}
 
@media (max-width: 767.98px) {
  .svc-journey-steps { grid-template-columns: 1fr; }
  .svc-journey-steps::before { display: none; }
}
 
 
/* ----------------------------------------------------------------
   SERVICE SECTIONS (shared)
   ---------------------------------------------------------------- */
.svc-section {
  padding: var(--rl-section-pad) 0;
}
.svc-section--alt  { background: var(--rl-warm); }
.svc-section--dark { background: var(--rl-near-black); }
 
.svc-grid {
  display:               grid;
  grid-template-columns: 5fr 4fr;
  gap:                   80px;
  align-items:           start;
}
.svc-grid--reverse {
  grid-template-columns: 4fr 5fr;
}
.svc-grid--reverse .svc-main  { order: 1; }
.svc-grid--reverse .svc-aside { order: 2; }
 
.svc-main h2 {
  font-size:      clamp(1.8rem, 3vw, 2.4rem);
  font-weight:    800;
  letter-spacing: -0.02em;
  margin-bottom:  1.25rem;
}
.svc-main h2 em { font-style: italic; color: var(--rl-accent); }
 
/* Light (on dark) heading override */
.svc-main-h2--light { color: var(--rl-off-white); }
 
.svc-main p {
  font-size:     0.97rem;
  color:         #444;
  line-height:   1.8;
  margin-bottom: 1.1rem;
}
.svc-main p:last-of-type { margin-bottom: 1.75rem; }
 
/* Light body copy on dark sections */
.svc-body--light {
  color: rgba(245,242,236,.6) !important;
  margin-bottom: 1.1rem;
}
 
/* Outcome arrow list — reuses rl-review-includes pattern but standalone */
.svc-outcome-list {
  list-style:    none;
  padding:       0;
  display:       flex;
  flex-direction: column;
  gap:           0.65rem;
  margin-bottom: 1.75rem;
}
.svc-outcome-list li {
  display:     flex;
  align-items: flex-start;
  gap:         0.85rem;
  font-size:   0.88rem;
  line-height: 1.6;
  color:       #444;
}
.svc-outcome-list li::before {
  content:     '→';
  color:       var(--rl-accent);
  flex-shrink: 0;
  font-weight: 600;
  margin-top:  1px;
}
.svc-outcome-list--light li { color: rgba(245,242,236,.65); }
.svc-outcome-list--light li::before { color: rgba(200,80,42,.7); }
 
/* Service CTAs */
.svc-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  background:      var(--rl-near-black);
  color:           var(--rl-off-white);
  padding:         0.85rem 1.75rem;
  border-radius:   2px;
  font-weight:     500;
  font-size:       0.9rem;
  text-decoration: none;
  transition:      background 0.2s;
}
.svc-cta:hover { background: var(--rl-accent); color: var(--rl-off-white); }
 
.svc-cta--light            { background: var(--rl-accent); }
.svc-cta--light:hover      { background: var(--rl-accent-d); }
 
.svc-cta-ghost {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  background:      transparent;
  border:          1.5px solid rgba(245,242,236,.15);
  color:           rgba(245,242,236,.6);
  padding:         0.85rem 1.75rem;
  border-radius:   2px;
  font-size:       0.9rem;
  text-decoration: none;
  transition:      border-color 0.2s, color 0.2s;
}
.svc-cta-ghost:hover { border-color: rgba(245,242,236,.4); color: var(--rl-off-white); }
 
.svc-cta-group {
  display:   flex;
  gap:       0.75rem;
  flex-wrap: wrap;
}
 
/* Inline text links */
.svc-inline-link {
  color:         var(--rl-accent);
  border-bottom: 1px solid rgba(200,80,42,.3);
  transition:    border-color 0.2s;
}
.svc-inline-link:hover           { border-color: var(--rl-accent); color: var(--rl-accent); }
.svc-inline-link--light          { color: var(--rl-accent); }
.svc-inline-link--light:hover    { color: var(--rl-accent-d); }
 
@media (max-width: 991.98px) {
  .svc-grid,
  .svc-grid--reverse { grid-template-columns: 1fr; gap: 40px; }
  .svc-grid--reverse .svc-main,
  .svc-grid--reverse .svc-aside { order: unset; }
}
 
 
/* ----------------------------------------------------------------
   DETAIL / ASIDE CARDS
   ---------------------------------------------------------------- */
.svc-detail-card {
  background: var(--rl-off-white);
  border:     1px solid var(--rl-border);
  padding:    2rem;
}
.svc-detail-card--dark {
  background:   rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.07);
}
 
.svc-dc-label {
  font-family:    var(--rl-font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--rl-mid);
  margin-bottom:  1.25rem;
  display:        block;
}
.svc-dc-label--light { color: rgba(245,242,236,.3); }
 
.svc-dc-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         0.65rem 0;
  border-bottom:   1px solid var(--rl-border);
  font-size:       0.85rem;
  gap:             1rem;
}
.svc-dc-row--light  { border-color: rgba(255,255,255,.06); }
.svc-dc-row:last-of-type { border-bottom: none; }
.svc-dc-row--total {
  margin-top:  1rem;
  padding-top: 1rem;
  border-top:  1px solid rgba(255,255,255,.06);
}
 
.svc-dc-key        { color: var(--rl-mid); flex-shrink: 0; }
.svc-dc-key--light { color: rgba(245,242,236,.4); }
 
.svc-dc-val             { font-weight: 600; color: var(--rl-black); text-align: right; }
.svc-dc-val--light      { color: var(--rl-off-white); }
.svc-dc-val--accent     { color: var(--rl-accent); }
 
.svc-dc-note {
  margin-top:  1rem;
  font-size:   0.78rem;
  color:       var(--rl-mid);
  line-height: 1.55;
  font-style:  italic;
}
.svc-dc-note--light { color: rgba(245,242,236,.3); }
 
/* Scorecard nudge block below Foundation Review card */
.svc-scorecard-nudge {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.25rem 1.5rem;
  margin-top:      2px;
  background:      var(--rl-accent-ll);
  border:          1px solid rgba(200,80,42,.2);
  text-decoration: none;
  transition:      background 0.2s;
}
.svc-scorecard-nudge:hover { background: var(--rl-accent-l); }
 
.svc-scorecard-label {
  font-family:    var(--rl-font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--rl-accent);
  display:        block;
  margin-bottom:  0.25rem;
}
.svc-scorecard-cta {
  font-size:   0.88rem;
  font-weight: 600;
  color:       var(--rl-black);
}
 
 
/* ----------------------------------------------------------------
   PRICING TABLE
   ---------------------------------------------------------------- */
.svc-pricing {
  background: var(--rl-black);
  padding:    80px 0;
}
 
.svc-pricing-header {
  margin-bottom: 3.5rem;
}
.svc-pricing-header h2 {
  font-size:      clamp(1.8rem, 3vw, 2.4rem);
  font-weight:    800;
  color:          var(--rl-off-white);
  letter-spacing: -0.02em;
  margin-bottom:  0.75rem;
}
.svc-pricing-header p {
  font-size:   0.97rem;
  color:       rgba(245,242,236,.45);
  max-width:   520px;
  margin:      0 auto;
  line-height: 1.7;
}
 
.svc-pricing-table {
  width:           100%;
  border-collapse: collapse;
}
.svc-pricing-table thead tr {
  background: rgba(255,255,255,.04);
}
.svc-pricing-table th {
  font-family:    var(--rl-font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(245,242,236,.35);
  padding:        1rem 1.5rem;
  text-align:     left;
  border-bottom:  1px solid rgba(255,255,255,.07);
  font-weight:    400;
}
.svc-pricing-table td {
  padding:        1.1rem 1.5rem;
  border-bottom:  1px solid rgba(255,255,255,.04);
  font-size:      0.88rem;
  vertical-align: middle;
}
.svc-pricing-table tr:last-child td { border-bottom: none; }
.svc-pricing-table tbody tr:hover td { background: rgba(255,255,255,.02); }
 
.svc-pt-name  { font-weight: 600; color: var(--rl-off-white); display: block; }
.svc-pt-desc  { color: rgba(245,242,236,.45); font-size: 0.82rem; line-height: 1.5; }
.svc-pt-price {
  font-family:  var(--rl-font-display);
  font-weight:  700;
  color:        var(--rl-off-white);
  white-space:  nowrap;
}
.svc-pt-price span { color: var(--rl-accent); }
.svc-pt-mo    { font-size: 0.7em; color: rgba(245,242,236,.35); }
.svc-pt-detail {
  color:       rgba(245,242,236,.35);
  font-family: var(--rl-font-mono);
  font-size:   0.72rem;
}
.svc-pt-link {
  color:           var(--rl-accent);
  font-size:       0.8rem;
  text-decoration: none;
  white-space:     nowrap;
}
.svc-pt-link:hover { text-decoration: underline; color: var(--rl-accent); }
 
.svc-pricing-note {
  text-align:  center;
  margin-top:  2rem;
  font-size:   0.82rem;
  color:       rgba(245,242,236,.3);
  font-style:  italic;
}
 
 
/* ----------------------------------------------------------------
   WHO WE WORK WITH
   ---------------------------------------------------------------- */
.svc-clients {
  background:  var(--rl-warm);
  padding:     var(--rl-section-pad) 0;
  border-top:  1px solid var(--rl-border);
}
 
.svc-clients-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           start;
}
.svc-clients-grid h2 {
  font-size:      clamp(1.8rem, 3vw, 2.4rem);
  font-weight:    800;
  letter-spacing: -0.02em;
  margin-bottom:  1.25rem;
}
.svc-clients-grid p {
  font-size:     0.97rem;
  color:         #444;
  line-height:   1.8;
  margin-bottom: 1.1rem;
}
 
.svc-client-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     2px;
}
.svc-client-col {
  padding:    1.75rem;
  background: var(--rl-off-white);
  border:     1px solid var(--rl-border);
}
 
.svc-cc-head {
  font-family:    var(--rl-font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom:  1rem;
  display:        block;
}
.svc-cc-head--good { color: #2a6b4a; }
.svc-cc-head--not  { color: #b85c5c; }
 
.svc-client-item {
  display:       flex;
  align-items:   flex-start;
  gap:           0.65rem;
  font-size:     0.83rem;
  color:         #444;
  line-height:   1.55;
  margin-bottom: 0.6rem;
}
.svc-client-item:last-child { margin-bottom: 0; }
 
.svc-ci-dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  flex-shrink:   0;
  margin-top:    6px;
}
.svc-ci-dot--good { background: #2a6b4a; }
.svc-ci-dot--not  { background: #b85c5c; }
 
@media (max-width: 991.98px) {
  .svc-clients-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 575.98px) {
  .svc-client-cols { grid-template-columns: 1fr; }
}
 
 
/* ----------------------------------------------------------------
   BOTTOM CTA
   ---------------------------------------------------------------- */
.svc-page-cta {
  background: var(--rl-near-black);
  padding:    var(--rl-section-pad) 0;
  position:   relative;
  overflow:   hidden;
}
.svc-page-cta::before {
  content:    '';
  position:   absolute;
  top:        50%;
  left:       50%;
  transform:  translate(-50%, -50%);
  width:      700px;
  height:     700px;
  background: radial-gradient(ellipse, rgba(200,80,42,.07) 0%, transparent 65%);
  pointer-events: none;
}
 
.svc-page-cta-inner {
  position:  relative;
  z-index:   2;
  max-width: 600px;
  margin:    0 auto;
}
.svc-page-cta-inner h2 {
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    900;
  color:          var(--rl-off-white);
  line-height:    1.1;
  letter-spacing: -0.02em;
  margin-bottom:  1.25rem;
  max-width:      560px;
  margin-left:    auto;
  margin-right:   auto;
}
.svc-page-cta-inner h2 em { font-style: italic; color: var(--rl-accent); }
.svc-page-cta-inner p {
  font-size:     1rem;
  color:         rgba(245,242,236,.5);
  max-width:     460px;
  margin:        0 auto 2.5rem;
  line-height:   1.7;
  font-weight:   300;
}
 
.svc-cta-row {
  display:         flex;
  justify-content: center;
  gap:             1rem;
  flex-wrap:       wrap;
}