/* ============================================================
   Shared scroll-scrub system (Direction B)
   - Pinned HERO monitor: header scrolls away, the screen-sized
     computer pins once fully in view, the screenshot scrubs
     inside it, then the page releases.
   - Pinned feature STAGES: page locks while the long screenshot
     scrolls inside the monitor, then releases.
   Used by index.html, consulting.html, and the detail pages.
   Requires js/scrub.js.
   ============================================================ */

/* ── hero header: the copy screen that scrolls away above the pinned monitor ── */
.hero-head{position:relative;min-height:56vh;display:flex;flex-direction:column;justify-content:center;text-align:center;color:#fff;background:radial-gradient(120% 90% at 50% -10%,#1c2f63 0%,#111C2E 60%);padding:110px 0 26px;overflow:hidden}
.hero-head::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 8%,rgba(163,230,75,.10),transparent 60%);pointer-events:none}
.hero-copy{position:relative;z-index:2}
.hero-copy .hero-eyebrow{color:var(--accent-green);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;margin-bottom:1.1rem}
.hero-copy .hero-title{font-weight:700;font-size:clamp(2.4rem,5.5vw,4.4rem);line-height:1.04;margin-bottom:1.1rem}
.hero-copy .hero-title em{font-style:normal;color:var(--soft-blue)}
.hero-copy .hero-subtitle{max-width:46rem;margin:0 auto 1.7rem;color:rgba(255,255,255,.74);font-size:clamp(1rem,1.8vw,1.16rem);line-height:1.6}
.hero-copy .hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ── hero scrub ── */
.hero-scrub-wrap{position:relative;height:185vh;background:radial-gradient(120% 60% at 50% 0%,#1c2f63 0%,#111C2E 55%)}
.hero-sticky{position:sticky;top:88px;display:flex;justify-content:center;padding:0 24px}
/* desktop monitor frame — same computer bezel as the section monitors, just larger.
   The SCREEN is locked to 16:9 (like a real panel); the device sizes itself around it. */
.hero-sticky .screen-device{width:min(850px,100%);max-width:none;display:flex;flex-direction:column;align-items:center;margin:0}
.hero-sticky .screen-monitor{width:100%;box-shadow:0 50px 130px -30px rgba(0,0,0,.85),0 0 70px -22px rgba(163,230,75,.14)}
.bframe-clip{position:relative;aspect-ratio:16/9;overflow:hidden;background:#fff}
.bframe-clip img{position:absolute;top:0;left:0;width:100%;height:auto;display:block;will-change:transform}
.hero-scrollcue{margin-top:1.4rem;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.42);animation:cueBob 1.8s ease-in-out infinite}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ── "learn more" text link ── */
.feature-more{display:inline-flex;align-items:center;gap:.35rem;margin-top:1.7rem;color:var(--royal-blue);font-weight:600;font-size:.95rem;text-decoration:none;transition:gap .18s ease,color .18s ease}
.feature-more:hover{gap:.65rem;color:#1a306f}

/* ── static full-screen section (one browser-screen tall, content centered) ── */
.screenful{min-height:100vh;display:flex;align-items:center;padding:80px 0 24px}
.screenful>.container{width:100%}
.screenful .feature-row{margin:0}
/* keep the tallest column within one screen — applies to static + scrub stages */
.screenful .feature-row-text .section-title,.scrub-text .section-title{font-size:clamp(1.9rem,3vw,2.45rem);line-height:1.08;margin-bottom:.85rem}
.screenful .feature-row-text .section-body,.scrub-text .section-body{margin-bottom:1rem}
.screenful .feature-checklist,.scrub-text .feature-checklist{margin:.2rem 0 0}
.screenful .feature-checklist li,.scrub-text .feature-checklist li{margin-bottom:.45rem}
.screenful .ai-note,.scrub-text .ai-note{margin-top:1rem;padding:.9rem 1.1rem}
.screenful .ai-note .ai-chip,.scrub-text .ai-note .ai-chip{margin-bottom:.45rem}
.screenful .ai-note h4,.scrub-text .ai-note h4{font-size:1.02rem;margin-bottom:.22rem}
.screenful .ai-note p,.scrub-text .ai-note p{font-size:.84rem;line-height:1.45}
.screenful .feature-more,.scrub-text .feature-more{margin-top:1rem}

/* ── pinned-scrub stage: page locks, screenshot scrolls inside the monitor ── */
.stage-scrub{position:relative}
.stage-scrub-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;background:#fff;padding:76px 0 16px}
.stage-scrub.gray .stage-scrub-pin{background:#F7F9FC}
.scrub-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;width:100%}
.scrub-grid.reversed .scrub-media{order:-1}
.scrub-media{display:flex;justify-content:center;min-width:0}
/* monitor ("computer") as the scrub wrapper — .screen-device look, manual scroll replaced by the page-lock scrub */
.scrub-media .screen-device{width:100%}
.scrub-media .screen-viewport{position:relative;overflow:hidden}
.scrub-media .screen-viewport img{position:absolute;top:0;left:0;width:100%;height:auto;display:block;will-change:transform}
.scrub-hint{margin-top:1.2rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--royal-blue);opacity:.65}

/* ── fallbacks: mobile + reduced motion get static frames with native scrolling ── */
@media(max-width:860px){
  .screenful{min-height:0;display:block;padding:0}
  .stage-scrub{height:auto !important}
  .stage-scrub-pin{position:static;height:auto;display:block;padding:64px 0}
  .scrub-grid{grid-template-columns:1fr;gap:2rem}
  .scrub-media .screen-viewport{overflow-y:auto}
  .scrub-media .screen-viewport img{position:static}
}
@media(max-width:700px){
  .hero-head{min-height:auto;padding:100px 0 32px}
  .hero-scrub-wrap{height:auto !important;background:#111C2E}
  .hero-sticky{position:static;height:auto;padding:0 16px 24px}
  .hero-sticky .screen-device{height:auto}
  .hero-sticky .screen-monitor{display:block}
  .bframe-clip{height:58vh;flex:0 0 auto}
  .hero-scrollcue{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-scrub-wrap{height:auto !important}
  .hero-sticky{position:static;height:auto}
  .hero-sticky .screen-device{height:auto}
  .hero-sticky .screen-monitor{display:block}
  .bframe-clip{height:64vh;flex:0 0 auto}
  .hero-scrollcue{animation:none}
  .stage-scrub{height:auto !important}
  .stage-scrub-pin{position:static;height:auto;padding:64px 0}
  .scrub-media .screen-viewport{overflow-y:auto}
  .scrub-media .screen-viewport img{position:static}
}