/* ============================================================
   CONEN.DEV — services.css — SERVICES page only
   Sections: hero / service dives sticky stack (signature) /
             process timeline / faq
   ============================================================ */

/* ---------- HERO ---------- */
.shero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--nav-h) + 8rem);
  padding-bottom: clamp(4rem, 9vh, 7rem);
  background:
    radial-gradient(110% 70% at 80% -20%, rgba(87, 230, 255, .09), transparent 55%),
    var(--abyss);
}
.shero__title { max-width: 8em; }
.shero__title .si {
  color: var(--ghost);
  text-shadow: 0 0 60px rgba(87, 230, 255, .4);
}
.shero__row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: end;
  margin-top: clamp(2rem, 5vh, 3.5rem);
}
.shero__sub { color: var(--ghost-faint); }
.shero__lead { justify-self: end; }
.shero__cue {
  position: absolute;
  right: var(--gutter);
  bottom: 4vh;
  color: var(--ghost-faint);
  font-size: 10px;
  letter-spacing: .2em;
}

/* ============================================================
   SERVICE DIVES — signature sticky stack
   Desktop + motion OK: each panel position:sticky at top; as the
   next covers it, JS scales .panel__inner to .94 + rounds corners
   + dims. Mobile / reduced: plain stacked full sections.
   ============================================================ */
.stack { position: relative; }
.panel { position: relative; }
.panel__inner {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  background: var(--abyss);
}

.panel__media { position: absolute; inset: 0; }
.panel__media .media-fallback { position: absolute; inset: 0; }
.panel__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0; /* faded in by CONEN.initVideo */
}
.panel__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 7, 13, .35), transparent 35%, rgba(4, 7, 13, .55) 70%, rgba(4, 7, 13, .92)),
    linear-gradient(90deg, rgba(4, 7, 13, .55), transparent 60%);
}

/* designed per-panel fallback variations (missing video still looks made) */
.panel--1 .media-fallback {
  background:
    radial-gradient(110% 90% at 25% 20%, rgba(87, 230, 255, .18), transparent 55%),
    linear-gradient(150deg, #0c1830, var(--abyss) 75%);
}
.panel--2 .media-fallback {
  background:
    radial-gradient(90% 90% at 80% 15%, rgba(157, 245, 227, .13), transparent 50%),
    linear-gradient(200deg, #0a1a22, var(--abyss) 70%);
}
.panel--3 .media-fallback {
  background:
    radial-gradient(110% 70% at 55% 90%, rgba(87, 230, 255, .12), transparent 60%),
    linear-gradient(120deg, #0d1226, var(--abyss) 80%);
}
.panel--4 .media-fallback {
  background:
    radial-gradient(80% 100% at 15% 75%, rgba(120, 160, 255, .11), transparent 55%),
    linear-gradient(170deg, #0f1228, var(--abyss) 75%);
}
.panel--5 .media-fallback {
  background:
    radial-gradient(100% 80% at 85% 80%, rgba(87, 230, 255, .1), transparent 55%),
    linear-gradient(210deg, #091524, var(--abyss) 70%);
}

/* oversized outlined index numeral */
.panel__num {
  position: absolute;
  top: 4vh;
  right: var(--gutter);
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6rem, 20vw, 18rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(232, 241, 246, .16);
  pointer-events: none;
}
.panel--1 .panel__num { -webkit-text-stroke-color: rgba(87, 230, 255, .22); }

.panel__content {
  position: relative;
  z-index: 3;
  padding-block: clamp(3rem, 8vh, 6rem);
  max-width: 1680px;
}
.panel__meta { color: var(--ghost-faint); margin-bottom: 1.4rem; }
.panel__flag {
  color: var(--abyss);
  background: var(--glow);
  padding: .35em .9em;
  border-radius: 999px;
  box-shadow: 0 0 24px rgba(87, 230, 255, .35);
}
.panel__title {
  font-size: clamp(2.6rem, 7vw, 6.5rem);
  letter-spacing: -0.03em;
  line-height: .95;
}
.panel__title--xl { font-size: clamp(3rem, 9vw, 8.5rem); }
.panel__title .si { color: var(--ghost); text-shadow: 0 0 50px rgba(87, 230, 255, .35); }
.panel__pitch {
  margin-top: clamp(1.2rem, 2.5vh, 2rem);
  max-width: 34em;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--ghost-dim);
}
.panel--1 .panel__pitch { max-width: 38em; }
.panel__list {
  margin-top: clamp(1.6rem, 3vh, 2.4rem);
  max-width: 30em;
  color: var(--ghost-dim);
}
.panel__list li {
  padding-block: .7em;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: .8em;
}
.panel__list li::before {
  content: '\25B8'; /* ▸ */
  color: var(--glow);
  font-size: .8em;
}
.panel__cta { margin-top: clamp(1.6rem, 3vh, 2.4rem); }

/* dim overlay animated by services.js while a panel is being covered */
.panel__dim {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--abyss);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .panel { position: sticky; top: 0; height: 100vh; }
  .panel__inner {
    height: 100vh;
    min-height: 0;
    transform-origin: 50% 0%;
    will-change: transform;
  }
}

/* ---------- PROCESS TIMELINE ---------- */
.tl { background: linear-gradient(180deg, var(--abyss), var(--deep) 65%, var(--abyss)); }
.tl__head .si { color: var(--glow); text-shadow: 0 0 40px rgba(87, 230, 255, .3); }
.tl__wrap { position: relative; margin-top: clamp(3rem, 7vw, 5.5rem); }
.tl__line {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--glow-soft), var(--line) 60%);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}
.tl__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2.5rem);
}
.tl__step { position: relative; padding-top: 2.4rem; }
.tl__step::before {
  content: '';
  position: absolute;
  top: -4px; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 12px var(--glow-soft);
}
.tl__num { display: block; color: var(--ghost-faint); margin-bottom: 1.6rem; }
.tl__name {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  letter-spacing: -0.02em;
  margin-bottom: .8rem;
}
.tl__desc {
  color: var(--ghost-dim);
  font-size: .92rem;
  line-height: 1.6;
}

/* ---------- FAQ ---------- */
.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}
.faq__intro h2 { max-width: 7em; }
.faq__intro .si { color: var(--ghost); text-shadow: 0 0 50px rgba(87, 230, 255, .35); }
.faq__intro-copy {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  color: var(--ghost-dim);
  max-width: 24em;
  line-height: 1.65;
}

.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q { font-size: inherit; letter-spacing: 0; line-height: inherit; }
.faq__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  padding-block: clamp(1.3rem, 2.5vw, 1.8rem);
}
.faq__btn-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  letter-spacing: -0.01em;
  line-height: 1.25;
  transition: color .3s ease;
}
.faq__btn:hover .faq__btn-label,
.faq__item.is-open .faq__btn-label { color: var(--glow); }

/* plus / cross icon */
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color .3s ease, transform .5s var(--ease-out);
}
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--ghost-dim);
  transition: background-color .3s ease;
}
.faq__icon::before { width: 12px; height: 1px; transform: translate(-50%, -50%); }
.faq__icon::after { width: 1px; height: 12px; transform: translate(-50%, -50%); }
.faq__item.is-open .faq__icon {
  border-color: var(--glow-soft);
  transform: rotate(135deg);
}
.faq__item.is-open .faq__icon::before,
.faq__item.is-open .faq__icon::after { background: var(--glow); }

/* animated height: grid-rows 0fr -> 1fr (cheap, no JS measuring) */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease-in-out);
}
.faq__a-inner {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s linear .55s;
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a-inner { visibility: visible; transition: visibility 0s; }
.faq__a p {
  color: var(--ghost-dim);
  line-height: 1.7;
  max-width: 42em;
  padding-bottom: clamp(1.4rem, 2.5vw, 2rem);
  padding-right: clamp(1rem, 4vw, 4rem);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .shero { min-height: 70vh; padding-top: calc(var(--nav-h) + 6rem); }
  .shero__row { grid-template-columns: 1fr; }
  .shero__lead { justify-self: start; }
  .shero__cue { display: none; }

  .panel__num { font-size: clamp(5rem, 26vw, 9rem); top: 2vh; }
  .panel__inner { min-height: 92vh; }

  .tl__line { display: none; }
  .tl__list { grid-template-columns: 1fr; gap: 0; }
  .tl__step {
    padding: 1.6rem 0 1.6rem 1.8rem;
    border-left: 1px solid var(--line);
  }
  .tl__step::before { top: 2.1rem; left: -5px; }
  .tl__num { margin-bottom: .8rem; }

  .faq__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tl__line { transform: none; }
  .faq__a { transition: none; }
}