/* ==========================================================================
   ADNANSON SOLUTIONS — HOME PAGE ONLY (index.html)
   --------------------------------------------------------------------------
   1. Hero "scroll to explore" cue
   2. Services story — the scroll-pinned full-viewport takeover
   3. Story outro strip (link to the full services index)

   HOW THE STORY SECTION WORKS
   - Default CSS (this file) lays the five panels out as a simple vertical
     stack of full-bleed sections: this is what mobile, reduced-motion and
     no-JS visitors get. Nothing is ever hidden by CSS.
   - js/services-story.js upgrades desktop+motion visitors: it adds
     .svc-story--pinned to the section, which stacks the panels on top of
     each other inside a 100vh stage, and GSAP ScrollTrigger pins the stage
     and drives the panel transitions from scroll.
   ========================================================================== */


/* ==========================================================================
   1. HERO SCROLL CUE — "Scroll to explore" + animated chevron.
      js/services-story.js hides it after the first scroll.
   ========================================================================== */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 4.6rem; /* sits just above the hero ledger strip */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  text-shadow: 0 1px 12px rgba(250, 250, 247, 0.8);
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.scroll-cue.is-hidden { opacity: 0; }
/* Dusk landing: the cue runs light over the dark evening scrim */
.hero--dusk .scroll-cue {
  color: #E8DFD0;
  text-shadow: 0 1px 10px rgba(10, 10, 8, 0.6);
}
.hero--dusk .scroll-cue .chev { border-color: var(--copper-hi); }
.scroll-cue .chev {
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--copper-ink);
  border-bottom: 1.5px solid var(--copper-ink);
  transform: rotate(45deg);
  animation: cue-bob 2.2s var(--ease-out) infinite;
}
@keyframes cue-bob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 1; }
  50%      { transform: rotate(45deg) translate(5px, 5px); opacity: 0.35; }
}

/* Hide the strip's own "Scroll" tail on the home hero — the cue replaces it */
.hero-strip .strip-scroll { display: none; }
/* No pinned story on mobile, and the cue collides with the CTA stack there */
@media (max-width: 860px) {
  .scroll-cue { display: none; }
}


/* ==========================================================================
   2. SERVICES STORY — five full-viewport service panels
   ========================================================================== */
.svc-story {
  position: relative;
  background: var(--base);
}

/* --- Stage: in stacked mode it's just a wrapper; in pinned mode it is the
       100vh window GSAP pins while the timeline plays. --- */
.svc-story-stage { position: relative; }

/* --- Panels (stacked / mobile default) ---
   Every service has its own plate design, position and veil — five
   distinct "documents" laid over five photographs:
     CYB — a dark bronze glass panel, bottom left (the enclosure room)
     EHR — a white clinical chart card with a folder tab, right center
     TAC — a manila field order pinned top left, stencil headline
     CON — no box at all: an engraved memo, centered over a soft veil
     PMO — an engineering-drawing title block strip along the bottom  */
.svc-panel {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.svc-panel-bg {
  position: absolute;
  inset: -6% 0;              /* bleed so the background can drift (parallax) */
  z-index: -2;
}
.svc-panel-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Soft warm-white veil so plates never sit on raw photo detail; direction
   is overridden per panel to follow each plate's position. */
.svc-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(76deg,
    rgba(250, 250, 247, 0.55) 0%,
    rgba(250, 250, 247, 0.15) 44%,
    rgba(250, 250, 247, 0)    70%);
}

/* --- Shared plate bones (readability first: near-opaque grounds,
       dark full-size body text — no more washed-out gray-on-beige) --- */
.svc-panel-inner {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(3rem, 7vh, 5.5rem);
}
.svc-plate {
  max-width: 560px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--base-3);
  box-shadow: var(--shadow-lift);
  padding: clamp(1.8rem, 3.5vw, 2.6rem);
}
.svc-plate .ledger { margin: 0 0 0.9rem; }
.svc-plate h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0 0 0.9rem;
}
.svc-plate p {
  color: #3A362E;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 0 1.5rem;
}
.svc-plate .link-arrow { color: var(--svc); }

/* ---- CYB: dark bronze glass panel, bottom left --------------------------
        Keyed to the photograph: oak-and-brass enclosures, amber lights,
        warm stone — the plate reads like one of the dark racks behind the
        brass-framed glass, not a leftover from the old steel-blue image. */
.svc-panel--cyb .svc-plate {
  background: linear-gradient(135deg, rgba(48, 38, 24, 0.95), rgba(77, 61, 38, 0.93));
  border: 1px solid rgba(255, 244, 224, 0.18);
  border-top: 2px solid #C9A45C;
  color: #F7F1E5;
}
.svc-panel--cyb .svc-plate h3 { color: #FFFFFF; }
.svc-panel--cyb .svc-plate p { color: #E7DCC4; }
.svc-panel--cyb .svc-plate .ledger { color: #CFB98D; }
.svc-panel--cyb .svc-plate .ledger .tick { color: #F0B26D; }
.svc-panel--cyb .svc-plate .link-arrow { color: #E8C88A; }
.svc-panel--cyb .reg-corners::before,
.svc-panel--cyb .reg-corners::after { border-color: #C9A45C; }
/* the dark panel carries its own contrast — no white veil needed */
.svc-panel--cyb::before { background: none; }

/* ---- EHR: clinical chart card with a folder tab, right center ---------- */
.svc-panel--ehr { align-items: center; }
.svc-panel--ehr .svc-plate {
  position: relative;
  margin-left: auto;
  max-width: 520px;
  border-left: 3px solid var(--svc-ehr);
  background: rgba(255, 255, 255, 0.97);
}
/* folder tab peeking above the card */
.svc-panel--ehr .svc-plate::after {
  content: "PATIENT RECORDS";
  position: absolute;
  top: -1.9rem; left: -3px;
  padding: 0.35rem 0.9rem;
  background: var(--svc-ehr);
  color: #F2F7F3;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
.svc-panel--ehr::before {
  background: linear-gradient(284deg,
    rgba(250, 250, 247, 0.6) 0%,
    rgba(250, 250, 247, 0.15) 46%,
    rgba(250, 250, 247, 0)   72%);
}

/* ---- TAC: manila field order pinned top left, stencil headline ---------- */
.svc-panel--tac { align-items: flex-start; }
.svc-panel--tac .svc-panel-inner {
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vh, 4rem));
  padding-bottom: 0;
}
.svc-panel--tac .svc-plate {
  background: rgba(238, 227, 200, 0.97);   /* manila */
  border: 1px solid #C4B389;
  transform: rotate(-0.6deg);               /* pinned-up field paper */
  max-width: 500px;
}
.svc-panel--tac .svc-plate h3 {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  color: #453D20;
}
.svc-panel--tac .svc-plate h3 .disp-i { font-style: normal; color: var(--svc-tac); }
.svc-panel--tac .svc-plate p { color: #4E4630; }
.svc-panel--tac .svc-plate .ledger { color: #6E6236; }
.svc-panel--tac::before {
  background: linear-gradient(166deg,
    rgba(250, 250, 247, 0.5) 0%,
    rgba(250, 250, 247, 0.12) 40%,
    rgba(250, 250, 247, 0)   65%);
}

/* ---- CON: no box — an engraved centered memo over a soft veil.
        Sits noticeably above the bottom edge so the link never hugs it. --- */
.svc-panel--con .svc-panel-inner {
  display: flex;
  justify-content: center;
  padding-bottom: clamp(6rem, 16vh, 11rem);
}
.svc-panel--con .svc-plate {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  max-width: 640px;
  text-align: center;
}
.svc-panel--con .svc-plate h3 {
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  color: var(--text);
}
/* thin copper rules above and below the description — engraved memo */
.svc-panel--con .svc-plate p {
  max-width: 56ch;
  margin: 0 auto 1.6rem;
  padding: 1.2rem 0;
  border-top: 1px solid rgba(140, 79, 29, 0.45);
  border-bottom: 1px solid rgba(140, 79, 29, 0.45);
  color: #33302A;
}
.svc-panel--con .svc-plate .ledger { justify-content: center; display: flex; }
.svc-panel--con::before {
  background: linear-gradient(to top,
    rgba(250, 250, 247, 0.96) 0%,
    rgba(250, 250, 247, 0.72) 42%,
    rgba(250, 250, 247, 0)   75%);
}

/* ---- PMO: engineering-drawing title block as a compact card, bottom right.
        Violet keyline + a hairline under the header row — the drawing-frame
        flavor without the full-width strip. --- */
.svc-panel--pmo .svc-plate {
  margin-left: auto;
  max-width: 540px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--base-3);
  border-top: 2px solid var(--svc-pmo);
}
.svc-panel--pmo .svc-plate .ledger {
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--base-3);
  margin-bottom: 1.1rem;
}
.svc-panel--pmo .reg-corners::before,
.svc-panel--pmo .reg-corners::after { border-color: var(--svc-pmo); }
.svc-panel--pmo::before {
  background: linear-gradient(284deg,
    rgba(250, 250, 247, 0.6) 0%,
    rgba(250, 250, 247, 0.15) 46%,
    rgba(250, 250, 247, 0)   72%);
}

/* --- Progress rail (pinned mode only; hidden in the stacked layout) --- */
.svc-progress {
  display: none;
  position: absolute;
  right: clamp(1.1rem, 3vw, 2.4rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.svc-progress-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--text);
  background: rgba(250, 250, 247, 0.75);
  padding: 0.25rem 0.45rem;
  border-radius: 2px;
}
.svc-progress-num i { font-style: normal; color: var(--text-2); }
.svc-progress-dots {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.svc-progress-dots button {
  width: 22px; height: 22px;          /* generous hit target */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-progress-dots button::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(26, 26, 24, 0.38);
  box-shadow: 0 0 0 3px rgba(250, 250, 247, 0.85);
  transition: background-color 0.25s ease, transform 0.25s var(--ease-out);
}
.svc-progress-dots button:hover::before { background: var(--text-2); }
.svc-progress-dots button.is-active::before {
  background: var(--copper);
  transform: scale(1.5);
}

/* ==========================================================================
   PINNED MODE — added by services-story.js on desktop with motion allowed.
   Panels stack on top of each other inside a 100vh stage; GSAP drives
   which one is visible. Panels 2-5 start hidden BY GSAP (inline styles),
   not by this CSS, so nothing can get stuck invisible.
   ========================================================================== */
.svc-story--pinned .svc-story-stage {
  height: 100vh;
  overflow: hidden;
}
.svc-story--pinned .svc-panel {
  position: absolute;
  inset: 0;
  min-height: 0;
  /* soft leading edge for the ride-up / drag-in transitions */
  box-shadow: 0 -34px 70px -34px rgba(26, 26, 24, 0.4);
}
.svc-story--pinned .svc-progress { display: flex; }


/* ==========================================================================
   3. STORY OUTRO — quiet strip pointing to the full services index
   ========================================================================== */
.svc-story-outro {
  background: var(--base);
  padding: clamp(2.2rem, 5vw, 3.5rem) var(--pad-x);
  text-align: center;
  border-top: 1px solid var(--base-3);
}
.svc-story-outro .ledger { display: block; margin-bottom: 0.9rem; }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  .svc-panel { min-height: 86svh; }
  .svc-plate { max-width: none; }
  .svc-panel--ehr .svc-plate { margin-left: 0; max-width: none; }
  .svc-panel--tac .svc-plate { transform: none; max-width: none; }
  .svc-panel--tac .svc-panel-inner { padding-bottom: clamp(3rem, 7vh, 5.5rem); }
  .svc-panel--con .svc-panel-inner { padding-bottom: clamp(4rem, 9vh, 6rem); }
  .svc-panel--pmo .svc-plate { margin-left: 0; max-width: none; }
}

/* Reduced motion: the cue's bob stops (global rules already freeze
   animations); the stacked layout needs nothing extra. */