/* Services page — additions on top of home-v2.css (same tokens/components).
   Only holds what the shared system doesn't already provide. */

.v2-svcband .band-label { color: rgba(22, 21, 19, .5); display: block; margin-bottom: 2vh; }

/* hero photo on the right, faded into the bone (echoes the homepage bed) */
.svc-hero-bed {
  position: absolute; right: 0; top: 0; bottom: 0; width: 46%; z-index: 1; margin: 0; overflow: hidden; opacity: 0;
}
.svc-hero-bed img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%;
  filter: grayscale(1) contrast(1.05) brightness(1.05); mix-blend-mode: multiply;
}
.svc-hero-bed::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bone) 0, rgba(244, 241, 234, .72) 20%, rgba(244, 241, 234, 0) 62%),
    linear-gradient(180deg, var(--bone) 0, rgba(244, 241, 234, 0) 20%, rgba(244, 241, 234, 0) 78%, var(--bone) 100%);
}
@media (max-width: 760px) { .svc-hero-bed { display: none; } }
/* the hero photo now fills the right side, so drop the meta list that used to
   live there (the disciplines are covered in the section just below). */
#svcHero .v2-hero-meta { display: none; }

/* hero on a single line: WHAT I (heavy black) + DO (thin red) side by side */
#svcHeroTitle { white-space: nowrap; }
#svcHeroTitle .row { display: inline-block; overflow: hidden; vertical-align: bottom; }
#svcHeroTitle .row.thin { margin-left: .3em; }

/* service rows: description + capability chips in the third column */
.v2-svcband-row .svc-copy { max-width: 60ch; }
.v2-svcband-row .svc-copy p { font-size: 14px; line-height: 1.6; color: rgba(22, 21, 19, .65); }
.v2-svcband-row .tags {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}
.v2-svcband-row .tags li {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bone); background: var(--ink); border: 1px solid var(--ink); padding: 6px 11px;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
/* mix in a few red chips by default (scattered), on top of the red-on-hover */
.v2-svcband-row .tags li:nth-child(3n + 2) { background: var(--red); border-color: var(--red); }
.v2-svcband-row .tags li:hover { background: var(--red); border-color: var(--red); color: var(--bone); transform: translateY(-2px); }

/* process — dark band with a 5-card bento (adapted from the reference layout) */
.svc-process { background: var(--ink); color: var(--bone); padding: 16vh 3.2vw; }
.svc-process .mono { color: rgba(244, 241, 234, .5); }
.svc-process-head h2 {
  font-weight: 900; font-size: clamp(26px, 3.4vw, 46px); letter-spacing: -.02em;
  margin: 2vh 0 0; max-width: 20ch;
}
.svc-process-sub { margin-top: 2.4vh; font-size: 14px; color: rgba(244, 241, 234, .55); max-width: 44ch; }

.proc-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px 16px; margin-top: 8vh; }
.proc-a { grid-column: span 5; }
.proc-b { grid-column: span 4; }
.proc-c { grid-column: span 3; }
.proc-d { grid-column: span 7; }
.proc-e { grid-column: span 5; }
@media (max-width: 1000px) {
  .proc-a, .proc-b, .proc-c, .proc-d, .proc-e { grid-column: span 12; }
}

.proc-card {
  position: relative; overflow: hidden; border-radius: 26px; padding: 30px;
  border: 1px solid var(--hair-bone); min-height: 300px; display: flex; flex-direction: column;
  transition: transform .55s var(--ease), border-color .55s var(--ease), background .55s var(--ease);
}
.proc-card:hover { transform: translateY(-8px); border-color: rgba(217, 51, 63, .5); }
.proc-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(135deg, rgba(244, 241, 234, .12), transparent 42%);
  transition: opacity .5s var(--ease);
}
.proc-card:hover::after { opacity: 1; }

.proc-card--light { background: var(--bone); color: var(--ink); border-color: transparent; }
.proc-card--light::after { background: linear-gradient(135deg, rgba(22, 21, 19, .08), transparent 42%); }
.proc-card--dark { background: #1c1b18; }
.proc-card--outline { background: rgba(244, 241, 234, .035); }
.proc-card--red { background: var(--red); color: var(--bone); border-color: transparent; }
.proc-card--red::after { background: linear-gradient(135deg, rgba(0, 0, 0, .16), transparent 42%); }

.proc-card-in { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
.proc-a .proc-card-in { justify-content: space-between; }
.proc-bottom { justify-content: flex-end; }

.proc-wm {
  position: absolute; right: -4px; top: -26px; z-index: 0; pointer-events: none;
  font-weight: 900; font-size: 150px; line-height: 1; font-variation-settings: 'wght' 900, 'wdth' 100;
  color: rgba(244, 241, 234, .05);
}
.proc-card--light .proc-wm { color: rgba(22, 21, 19, .06); }
.proc-wm--dark { color: rgba(0, 0, 0, .12); }

.proc-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 241, 234, .5); }
.proc-card--light .proc-eyebrow { color: rgba(22, 21, 19, .45); }
.proc-eyebrow--dark { color: rgba(0, 0, 0, .55); }

.proc-card h3 { font-weight: 900; letter-spacing: -.03em; line-height: .92; margin-top: 16px; font-size: clamp(30px, 3.2vw, 50px); }
.proc-a h3 { font-size: clamp(40px, 4.4vw, 64px); }
.proc-d h3 { font-size: clamp(34px, 4vw, 58px); }

.proc-desc { margin-top: 16px; font-size: 13.5px; line-height: 1.6; color: rgba(244, 241, 234, .58); max-width: 36ch; }
.proc-card--light .proc-desc { color: rgba(22, 21, 19, .6); }
.proc-desc--dark { color: rgba(0, 0, 0, .72); }

.proc-d-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: start; margin-top: auto; }
@media (max-width: 600px) { .proc-d-grid { grid-template-columns: 1fr; gap: 10px; } }
.proc-ring { position: absolute; right: 28px; top: 28px; width: 92px; height: 92px; border: 1px solid rgba(244, 241, 234, .1); border-radius: 999px; z-index: 0; }
.proc-ring--2 { right: 52px; top: 52px; width: 46px; height: 46px; }

/* ---------- pricing packages ---------- */
.v2-packages { background: var(--bone); padding: 15vh 3.2vw 6vh; }
.v2-packages + .v2-packages { padding-top: 4vh; }
.pkg-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 1vh; }
.pkg-head h2 { font-weight: 900; font-size: clamp(28px, 4vw, 52px); letter-spacing: -.02em; }
.pkg-head .pkg-motto { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(22, 21, 19, .5); }
.pkg-sub { font-size: 14px; color: rgba(22, 21, 19, .6); margin-bottom: 6vh; max-width: 46ch; }

.pkg {
  display: grid; grid-template-columns: auto 1.15fr .75fr 1.35fr; gap: 2.6vw; align-items: start;
  border-top: 1px solid var(--hair-ink); padding: 46px 0; position: relative;
  transition: padding-left .45s var(--ease);
}
.v2-packages .pkg:last-of-type { border-bottom: 1px solid var(--hair-ink); }
/* hover: a red line sweeps the top border, the card eases right, and the
   number + price warm up — same language as the homepage tier rows. */
.pkg::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
  background: var(--red); transition: width .55s var(--ease);
}
.pkg:hover::before { width: 100%; }
.pkg:hover { padding-left: 20px; }
.pkg-num, .pkg-price { transition: color .3s var(--ease), transform .4s var(--ease); }
.pkg-price { transform-origin: left center; }
.pkg:hover .pkg-num { color: var(--red); }
.pkg:hover .pkg-price { transform: scale(1.05); }
.pkg-bar { transition: transform .45s var(--ease); transform-origin: top; }
.pkg:hover .pkg-bar { transform: scaleY(1.08); }
.pkg-id { display: flex; gap: 16px; align-items: stretch; }
.pkg-bar { width: 6px; background: var(--red); flex: none; }
.pkg--ink .pkg-bar { background: var(--ink); }
.pkg-num { font-weight: 900; font-size: clamp(40px, 5vw, 76px); line-height: .82; font-variation-settings: 'wght' 900, 'wdth' 100; }
.pkg-name { font-weight: 900; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -.01em; }
.pkg-desc { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: rgba(22, 21, 19, .6); max-width: 34ch; }
.pkg-delivery { margin-top: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.pkg-price { font-weight: 900; font-size: clamp(42px, 6vw, 82px); color: var(--red); line-height: .85; font-variation-settings: 'wght' 900, 'wdth' 100; }
.pkg-price small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: rgba(22, 21, 19, .5); font-weight: 400; margin-top: 10px; text-transform: uppercase; }
.pkg-feats { list-style: none; display: grid; gap: 10px; }
.pkg-feats .plus { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(22, 21, 19, .5); margin-bottom: 2px; }
.pkg-feats li:not(.plus) { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.4; color: rgba(22, 21, 19, .82); }
.pkg-feats li:not(.plus)::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; background: var(--red); }
@media (max-width: 900px) {
  .pkg { grid-template-columns: auto 1fr; gap: 20px 20px; }
  .pkg-price { grid-column: 2; }
  .pkg-feats { grid-column: 1 / -1; }
}

/* dark variant (Care & maintenance packages) */
.v2-packages--ink { background: var(--ink); color: var(--bone); }
.v2-packages--ink .pkg-head .pkg-motto { color: rgba(244, 241, 234, .5); }
.v2-packages--ink .pkg-sub { color: rgba(244, 241, 234, .6); }
.v2-packages--ink .pkg { border-top-color: var(--hair-bone); }
.v2-packages--ink .pkg:last-of-type { border-bottom-color: var(--hair-bone); }
.v2-packages--ink .pkg-desc { color: rgba(244, 241, 234, .58); }
.v2-packages--ink .pkg-price small { color: rgba(244, 241, 234, .5); }
.v2-packages--ink .pkg-feats li:not(.plus) { color: rgba(244, 241, 234, .82); }
.v2-packages--ink .pkg-feats .plus { color: rgba(244, 241, 234, .5); }
.v2-packages--ink .pkg--ink .pkg-bar { background: var(--bone); }
@media (max-width: 520px) { .pkg { grid-template-columns: 1fr; } .pkg-price, .pkg-feats { grid-column: 1; } }

/* ---------- extra services ---------- */
.v2-extras { background: var(--bone); padding: 8vh 3.2vw 16vh; }
.v2-extras h2 { font-weight: 900; font-size: clamp(24px, 3vw, 40px); letter-spacing: -.02em; margin-bottom: 5vh; }
.v2-extras h2 span { color: var(--red); }
.extras-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6vw; }
@media (max-width: 760px) { .extras-grid { grid-template-columns: 1fr; } }
.extra { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; border-bottom: 1px solid var(--hair-ink); padding: 15px 0; }
.extra .name { font-size: 14px; color: rgba(22, 21, 19, .82); }
.extra .price { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--red); white-space: nowrap; font-weight: 500; }
.extras-note { margin-top: 5vh; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(22, 21, 19, .45); line-height: 1.9; }

/* ── package CTA buttons (build + care tiers) ──────────────────────────── */
.pkg-cta {
  grid-column: 4; align-self: start; justify-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; max-width: 360px; margin-top: 6px; padding: 14px 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-align: center;
  background: var(--ink); color: var(--bone); border: 1px solid var(--ink);
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.pkg-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red);
  transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease);
}
.pkg-cta:hover { color: var(--bone); border-color: var(--red); }
.pkg-cta:hover::before { transform: scaleX(1); transform-origin: left; }
/* on the dark care-plan section, invert to a light button */
.v2-packages--ink .pkg-cta { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.v2-packages--ink .pkg-cta:hover { color: var(--bone); border-color: var(--red); }
@media (max-width: 900px) { .pkg-cta { grid-column: 1 / -1; } }
@media (max-width: 520px) { .pkg-cta { grid-column: 1; max-width: none; } }