/* ============================================================
   SERVICES PAGE — page-specific components
   Uses the frozen system (tokens.css + main.css). No new colors,
   no new metaphors — only compositions specific to this page.
   ============================================================ */

/* ---------- 01 · SERVICES HERO (blueprint, editorial + schedule) ---------- */
.svc-hero { min-height: 82svh; display: flex; align-items: center; padding-top: 120px; padding-bottom: var(--sec-pad); }
.svc-hero .container { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--s9); align-items: center; }
.svc-hero h1 { font-size: clamp(2.8rem, 6.6vw, 5.6rem); font-weight: 600; letter-spacing: -0.035em; line-height: 0.94; max-width: 16ch; }
.svc-hero h1 .accent { color: var(--bp-draft); }
.svc-hero .hero-sub { margin-top: var(--s6); max-width: 46ch; font-size: 1.14rem; color: color-mix(in srgb, var(--bp-ink) 82%, transparent); }
.svc-hero .hero-actions { margin-top: var(--s7); display: flex; gap: var(--s4); flex-wrap: wrap; align-items: center; }

/* responsibility schedule — an engineering index, not cards */
.schedule { border: 1px solid var(--bp-line-soft); background: color-mix(in srgb, var(--bp-surface) 55%, transparent); }
.schedule-cap { display: flex; justify-content: space-between; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--bp-line-soft); font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bp-draft); }
.schedule-cap .tick { color: var(--red); }
.schedule-row { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--bp-line-soft); }
.schedule-row:last-child { border-bottom: 0; }
.schedule-row .n { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--bp-draft); opacity: 0.7; }
.schedule-row .d { font-family: var(--f-display); font-weight: 500; font-size: 1.02rem; color: var(--bp-ink); letter-spacing: -0.01em; }
.schedule-row .s { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-live); box-shadow: 0 0 8px var(--cyan-live); opacity: 0.85; }

/* ---------- 02 · WHAT I TAKE CARE OF (vellum, statement + value pillars) ---------- */
.scope-2col { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s9); align-items: start; }
.scope-pillars { display: flex; flex-direction: column; }
.pillar { border-top: 1px solid var(--vl-line); padding: var(--s5) 0; }
.pillar:last-child { border-bottom: 1px solid var(--vl-line); }
.pillar .pk { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); margin-bottom: var(--s2); }
.pillar p { color: var(--vl-ink); max-width: 36ch; }

/* ---------- 03 · SERVICE EXPLORER (blueprint, signature interaction) ---------- */
.explorer { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: var(--s9); align-items: start; }

.svc-nav { border-top: 1px solid var(--bp-line-soft); }
.svc-nav-item {
  position: relative; display: grid; grid-template-columns: 46px 1fr 20px; gap: var(--s4); align-items: center;
  width: 100%; text-align: left; padding: var(--s5) var(--s2); border-bottom: 1px solid var(--bp-line-soft);
  color: color-mix(in srgb, var(--bp-ink) 66%, transparent); transition: color var(--t-base) var(--e-out), padding-left var(--t-base);
}
.svc-nav-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--red); transform: scaleY(0); transform-origin: center; transition: transform var(--t-base) var(--e-out); }
.svc-nav-item:hover { color: var(--bp-ink); padding-left: var(--s3); }
.svc-nav-item.active { color: var(--bp-ink); padding-left: var(--s3); }
.svc-nav-item.active::before { transform: scaleY(1); }
.svc-nav-item .sid { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--red); }
.svc-nav-item .nm { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.15rem, 1.7vw, 1.5rem); letter-spacing: -0.015em; }
.svc-nav-item.active .nm { color: var(--cyan-live); }
.svc-nav-item .chev { font-family: var(--f-mono); font-size: 0.9rem; color: var(--bp-draft); opacity: 0; transition: opacity var(--t-base), transform var(--t-base); }
.svc-nav-item:hover .chev, .svc-nav-item.active .chev { opacity: 0.9; transform: translateX(3px); }

/* right stage: sticky map + detail */
.explorer-stage { position: sticky; top: 100px; }
.explorer-map { border: 1px solid var(--bp-line-soft); background: color-mix(in srgb, var(--bp-surface) 45%, transparent); position: relative; }
.explorer-map .mapcap { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: var(--s3) var(--s4); font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bp-draft); border-bottom: 1px solid var(--bp-line-soft); z-index: 2; pointer-events: none; }
.explorer-map .mapcap .live { color: var(--cyan-live); }
.explorer-map svg { width: 100%; height: auto; display: block; }

/* map node/line states (built on the shared graphics grammar) */
.mnode { transition: opacity var(--t-base) var(--e-out); }
.mline { transition: opacity var(--t-base), stroke var(--t-base); }
.explorer-map.has-sel .mnode { opacity: 0.36; }
.explorer-map.has-sel .mline { opacity: 0.28; }
.mnode.on { opacity: 1; }
.mline.on { opacity: 1; stroke: var(--cyan-live); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cyan-live) 55%, transparent)); }
.mnode.prim .node-dot { fill: var(--cyan-live); stroke: var(--cyan-live); }
.mnode.prim .node-ring { stroke: var(--cyan-live); }
.mnode.rel .node-dot { stroke: var(--bp-draft); }
.mnode.rel .node-label { fill: var(--bp-ink); }
.mspan { fill: none; stroke: var(--red); stroke-width: 1.25; stroke-dasharray: 4 4; opacity: 0; transition: opacity var(--t-base); }
.mspan.on { opacity: 0.8; }

/* detail panel */
.explorer-detail { margin-top: var(--s6); border-top: 1px solid var(--bp-line-soft); padding-top: var(--s6); }
.explorer-detail .d-eyebrow { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.explorer-detail .d-l1 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -0.02em; line-height: 1.04; margin-top: var(--s4); color: var(--bp-ink); }
.explorer-detail .d-l2 { margin-top: var(--s4); max-width: 52ch; color: color-mix(in srgb, var(--bp-ink) 80%, transparent); }
.explorer-detail .d-l3 { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2); }
.explorer-detail .d-l3-label { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-draft); opacity: 0.7; width: 100%; margin-bottom: var(--s1); }

/* mobile accordion fallback (built from the same data, no map dependency) */
.svc-accordion { display: none; border-top: 1px solid var(--bp-line-soft); }
.svc-acc { border-bottom: 1px solid var(--bp-line-soft); }
.svc-acc-head { display: grid; grid-template-columns: 44px 1fr 22px; gap: var(--s3); align-items: center; padding: var(--s5) 0; width: 100%; text-align: left; color: var(--bp-ink); }
.svc-acc-head .sid { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--red); }
.svc-acc-head .nm { font-family: var(--f-display); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.015em; }
.svc-acc-head .plus { position: relative; width: 20px; height: 20px; }
.svc-acc-head .plus::before, .svc-acc-head .plus::after { content: ""; position: absolute; background: var(--bp-draft); transition: transform var(--t-base); }
.svc-acc-head .plus::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.svc-acc-head .plus::after { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.svc-acc.open .plus::after { transform: translateX(-50%) scaleY(0); }
.svc-acc-body { max-height: 0; overflow: hidden; transition: max-height var(--t-slow) var(--e-inout); }
.svc-acc.open .svc-acc-body { max-height: 340px; }
.svc-acc-body-inner { padding: 0 0 var(--s6); }
.svc-acc-body .l1 { font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; color: var(--bp-ink); }
.svc-acc-body .l2 { margin-top: var(--s3); color: color-mix(in srgb, var(--bp-ink) 78%, transparent); }
.svc-acc-body .l3 { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---------- 04 · PROBLEMS I SOLVE (carbon, Problem→Investigation→Solution→Outcome) ---------- */
.problems { border-top: 1px solid var(--cb-line); }
.problem { border-bottom: 1px solid var(--cb-line); }
.problem-head { display: grid; grid-template-columns: 56px 1fr 24px; gap: var(--s5); align-items: center; width: 100%; text-align: left; padding: var(--s7) 0; cursor: pointer; transition: padding-left var(--t-base) var(--e-out); }
.problem:hover .problem-head { padding-left: var(--s3); }
.problem-head .pid { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--red); }
.problem-head .q { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -0.02em; color: var(--cb-bone); line-height: 1.02; }
.problem-head .plus { position: relative; width: 24px; height: 24px; }
.problem-head .plus::before, .problem-head .plus::after { content: ""; position: absolute; background: var(--cb-bone); transition: transform var(--t-base); }
.problem-head .plus::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.problem-head .plus::after { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.problem.open .plus::after { transform: translateX(-50%) scaleY(0); }
.problem-body { max-height: 0; overflow: hidden; transition: max-height 0.55s var(--e-inout); }
.problem.open .problem-body { max-height: 420px; }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0 0 var(--s7) 56px; }
.flow-step { position: relative; padding-right: var(--s5); }
.flow-step:not(:last-child)::after { content: "→"; position: absolute; right: 8px; top: 2px; color: var(--red); font-family: var(--f-mono); font-size: 0.9rem; opacity: 0.7; }
.flow-step .k { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-draft); }
.flow-step .v { margin-top: var(--s3); font-size: 0.98rem; color: color-mix(in srgb, var(--cb-bone) 86%, transparent); }

/* ---------- 06 · INFRASTRUCTURE RELATIONSHIPS (blueprint) ---------- */
.rel { position: relative; margin-top: var(--s8); display: grid; grid-template-columns: 120px 1fr 120px; gap: var(--s5); align-items: stretch; }
.rel-span-label { display: flex; align-items: center; justify-content: center; position: relative; }
.rel-span-label span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); }
.rel-span-label::before { content: ""; position: absolute; inset: var(--s5) 0; border: 1px solid var(--bp-line); border-radius: 3px; }
.rel-span-label.left::before { border-right: 0; } .rel-span-label.right::before { border-left: 0; }
.rel-stack { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.rel-layer { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); border: 1px solid var(--bp-line-soft); background: color-mix(in srgb, var(--bp-surface) 55%, transparent); padding: var(--s5) var(--s6); transition: border-color var(--t-base), background var(--t-base); }
.rel-layer:hover { border-color: var(--bp-draft); background: var(--bp-surface); }
.rel-layer .ln { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--bp-ink); }
.rel-layer .ld { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--bp-draft); letter-spacing: 0.04em; }
.rel-conn { height: var(--s5); position: relative; }
.rel-conn::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--bp-line); transform: translateX(-50%); }
.rel-conn::after { content: "↕"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--bp-draft); font-size: 0.8rem; background: var(--bp-void); padding: 2px; }

/* ============================================================
   SECTION IMAGERY — "Photography as section punctuation"
   Locked: Editorial (hero / problems / relationships) + cinematic CTA.
   Photography inherits its section's tri-tonal key and never competes
   with the information layer. Explorer & Process stay image-free.
   Full pattern: docs/DESIGN_SYSTEM.md.
   ============================================================ */
.ximg { overflow: hidden; }
.xphoto { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; will-change: transform; }
.xwash, .xscrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.xanno { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ximg > .container { position: relative; z-index: 2; }

/* HERO · BLUEPRINT — cyanotype atmospheric depth behind the schedule; subordinate to the headline */
.hero-x { opacity: 0.30; filter: grayscale(0.4) brightness(0.62) contrast(1.08) saturate(1.1);
  -webkit-mask-image: radial-gradient(ellipse 66% 100% at 84% 52%, #000, transparent 66%);
          mask-image: radial-gradient(ellipse 66% 100% at 84% 52%, #000, transparent 66%); }
.hero-xwash { background:
  linear-gradient(90deg, var(--bp-void) 40%, color-mix(in srgb, var(--bp-void) 30%, transparent) 78%, transparent 100%),
  linear-gradient(0deg, var(--bp-void) 6%, transparent 55%); }

/* PROBLEMS · CARBON — real infrastructure + engineering annotation, entering from the right */
.prob-x { opacity: 0.26; filter: grayscale(0.35) brightness(0.72) contrast(1.06) saturate(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent 44%, #000 80%);
          mask-image: linear-gradient(90deg, transparent 44%, #000 80%); }
.prob-scrim { background:
  linear-gradient(90deg, var(--cb-black) 46%, color-mix(in srgb, var(--cb-black) 40%, transparent) 82%, transparent 100%),
  linear-gradient(0deg, var(--cb-black) 8%, transparent 70%); }
.prob-anno { opacity: 0.92; }

/* RELATIONSHIPS · BLUEPRINT — restrained cyanotype depth behind the diagram.
   Wash keeps the top (heading + intro paragraph) and the left text column dark for AA contrast. */
.rel-x { opacity: 0.16; filter: grayscale(0.92) brightness(0.48) contrast(1.1); }
.rel-xwash { background:
  linear-gradient(180deg, var(--bp-void) 28%, color-mix(in srgb, var(--bp-void) 60%, transparent) 52%, color-mix(in srgb, var(--bp-void) 74%, transparent) 100%),
  linear-gradient(90deg, var(--bp-void) 30%, transparent 74%),
  radial-gradient(ellipse 72% 60% at 52% 62%, transparent, var(--bp-void) 88%); }

/* FINAL CTA · CARBON — cinematic closing scene (stronger treatment approved here) */
#contact.cta .cta-photo { opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse 96% 105% at 50% 45%, #000, transparent 88%);
          mask-image: radial-gradient(ellipse 96% 105% at 50% 45%, #000, transparent 88%); }

/* Responsive imagery — crop & protect text on smaller screens, don't just scale down */
@media (max-width: 900px) {
  .hero-x { opacity: 0.2; -webkit-mask-image: radial-gradient(ellipse 120% 70% at 70% 38%, #000, transparent 88%); mask-image: radial-gradient(ellipse 120% 70% at 70% 38%, #000, transparent 88%); }
  .prob-x { opacity: 0.15; -webkit-mask-image: linear-gradient(90deg, transparent 28%, #000 84%); mask-image: linear-gradient(90deg, transparent 28%, #000 84%); }
}
@media (max-width: 760px) {
  .prob-anno { display: none; }          /* simplify annotation on mobile */
  .hero-x { opacity: 0.14; }
  #contact.cta .cta-photo { opacity: 0.38; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .explorer { grid-template-columns: 1fr; gap: var(--s7); }
  .explorer-stage { position: static; }
}
@media (max-width: 900px) {
  .svc-hero .container { grid-template-columns: 1fr; gap: var(--s8); }
  .svc-hero { min-height: auto; padding-top: 112px; }
  .scope-2col { grid-template-columns: 1fr; gap: var(--s7); }
}
/* prevent the section rev-seam's trailing hint from cramping on mobile (scoped to this page only) */
@media (max-width: 760px) {
  .rev-seam .mono { display: none; }
  .rev-seam .line { min-width: 24px; }
}
@media (max-width: 760px) {
  /* swap the desktop explorer (map + nav) for a self-contained accordion */
  .explorer { display: none; }
  .svc-accordion { display: block; }
  .flow { grid-template-columns: 1fr; gap: var(--s5); padding-left: 0; }
  .flow-step { padding-right: 0; }
  .flow-step:not(:last-child)::after { content: "↓"; right: auto; left: 0; top: auto; bottom: -20px; }
  .problem-head { grid-template-columns: 40px 1fr 22px; gap: var(--s4); }
  .rel { grid-template-columns: 1fr; gap: var(--s4); }
  .rel-span-label { flex-direction: row; padding: var(--s3); }
  .rel-span-label span { writing-mode: horizontal-tb; transform: none; }
  .rel-span-label::before { inset: 0; border: 1px solid var(--bp-line) !important; }
}