/* ============================================================
   STRATEGY PROCESS — DESKTOP TYPOGRAPHY + MOTION SYNC
   Reference: /stratsessiya/ (Strategic sessions for management teams)
   Scope: desktop only, >= 781px. Mobile styles remain untouched.
   ============================================================ */

@media (min-width:781px){
  /* Same desktop typographic rhythm as /stratsessiya/. */
  .strategy-process-page main{
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
    font-size:17px;
    line-height:1.58;
    letter-spacing:0;
  }

  .strategy-process-page main h1,
  .strategy-process-page main h2,
  .strategy-process-page main h3{
    font-family:inherit!important;
    font-weight:520!important;
    line-height:1.03!important;
    letter-spacing:-.04em!important;
    text-wrap:balance;
  }
  .strategy-process-page main h2{font-size:clamp(36px,4.1vw,58px)!important}
  .strategy-process-page main h3{font-size:clamp(23px,2.2vw,31px)!important}

  .strategy-process-page main .eyebrow,
  .strategy-process-page .road-num,
  .strategy-process-page .boundary-grid article>span,
  .strategy-process-page .days-grid article>span,
  .strategy-process-page .stage-result strong,
  .strategy-process-page .program-related-card small,
  .strategy-process-page .program-case-grid article>span{
    font-family:inherit!important;
  }
  .strategy-process-page main .eyebrow{
    margin-bottom:22px!important;
    font-size:12px!important;
    font-weight:700!important;
    line-height:1.4!important;
    letter-spacing:.16em!important;
  }

  /* Hero uses the same hierarchy and breathing room as /stratsessiya/. */
  .strategy-process-page .program-hero,
  .strategy-process-page .program-hero-grid{
    min-height:700px!important;
  }
  .strategy-process-page .program-hero-copy{
    padding:92px 0 88px!important;
  }
  .strategy-process-page .program-hero .eyebrow{
    max-width:330px;
    margin-bottom:24px!important;
  }
  .strategy-process-page .program-hero h1{
    max-width:720px!important;
    margin-bottom:28px!important;
    font-family:inherit!important;
    font-size:clamp(54px,4.8vw,72px)!important;
    font-weight:520!important;
    line-height:1.015!important;
    letter-spacing:-.043em!important;
    text-shadow:0 3px 24px rgba(0,0,0,.18);
  }
  .strategy-process-page .program-hero-lead{
    max-width:610px!important;
    margin-bottom:0!important;
    color:rgba(238,244,247,.94)!important;
    font-family:inherit!important;
    font-size:clamp(20px,2.05vw,28px)!important;
    font-weight:400!important;
    line-height:1.42!important;
    letter-spacing:-.02em!important;
    text-shadow:0 2px 18px rgba(0,0,0,.16);
  }
  .strategy-process-page .program-hero-actions{margin-top:30px!important}
  .strategy-process-page .program-hero-link{
    font-family:inherit!important;
    font-size:14px!important;
    font-weight:500!important;
  }

  /* Top facts: same visual weight as the fact strip on /stratsessiya/. */
  .strategy-process-page .program-summary-grid>div{padding-top:28px;padding-bottom:28px}
  .strategy-process-page .program-summary-grid strong{
    font-family:inherit!important;
    color:var(--gold2)!important;
    font-size:25px!important;
    font-weight:550!important;
    line-height:1.08!important;
    letter-spacing:-.025em!important;
  }
  .strategy-process-page .program-summary-grid span{
    margin-top:4px!important;
    font-family:inherit!important;
    color:#bdc8cf!important;
    font-size:13px!important;
    line-height:1.45!important;
  }

  /* Section copy uses the same scale as lead/body copy on /stratsessiya/. */
  .strategy-process-page .program-intro,
  .strategy-process-page .stage-lead,
  .strategy-process-page .program-hr-grid p{
    font-family:inherit!important;
    font-size:clamp(20px,2.05vw,28px)!important;
    line-height:1.42!important;
    letter-spacing:-.02em!important;
  }
  .strategy-process-page .program-intro{max-width:760px!important}
  .strategy-process-page .stage-lead{max-width:760px!important}
  .strategy-process-page .stage-content>p:not(.eyebrow):not(.stage-lead):not(.stage-note),
  .strategy-process-page .program-roadmap p,
  .strategy-process-page .boundary-grid p,
  .strategy-process-page .days-grid p,
  .strategy-process-page .days-grid li,
  .strategy-process-page .reflection-list span,
  .strategy-process-page .control-grid p,
  .strategy-process-page .program-case-grid p,
  .strategy-process-page .program-related-card p,
  .strategy-process-page .program-faq-item p{
    font-family:inherit!important;
    font-size:15.5px!important;
    line-height:1.58!important;
    letter-spacing:0!important;
  }

  /* Roadmap = same restrained process typography as /stratsessiya/ steps. */
  .strategy-process-page .program-roadmap strong{
    font-family:inherit!important;
    font-size:24px!important;
    font-weight:520!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
  }
  .strategy-process-page .program-roadmap small{
    font-family:inherit!important;
    font-size:11px!important;
    font-weight:700!important;
    letter-spacing:.12em!important;
  }

  /* Stage rail: same sans-serif vocabulary, no separate editorial/Georgia system. */
  .strategy-process-page .stage-number,
  .strategy-process-page .program-number-grid strong,
  .strategy-process-page .program-quote{
    font-family:inherit!important;
  }
  .strategy-process-page .stage-number{
    font-size:78px!important;
    font-weight:520!important;
    line-height:.9!important;
    letter-spacing:-.045em!important;
  }
  .strategy-process-page .stage-duration{
    font-size:19px!important;
    font-weight:600!important;
    line-height:1.3!important;
    letter-spacing:-.02em!important;
  }
  .strategy-process-page .stage-format{
    font-size:13px!important;
    line-height:1.55!important;
  }
  .strategy-process-page .stage-note{
    font-family:inherit!important;
    font-size:14px!important;
    line-height:1.58!important;
  }

  .strategy-process-page .boundary-grid h3,
  .strategy-process-page .days-grid h3,
  .strategy-process-page .program-case-grid h3,
  .strategy-process-page .program-related-card h3{
    font-size:24px!important;
    font-weight:520!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
  }
  .strategy-process-page .compare-panel strong,
  .strategy-process-page .reflection-list strong,
  .strategy-process-page .control-grid strong{
    font-family:inherit!important;
    font-weight:520!important;
    letter-spacing:-.025em!important;
  }
  .strategy-process-page .program-quote{
    font-size:28px!important;
    font-weight:520!important;
    line-height:1.34!important;
    letter-spacing:-.03em!important;
  }

  /* Numbers and case cards feel like the same site, not a separate editorial microsite. */
  .strategy-process-page .program-number-grid strong{
    font-size:34px!important;
    font-weight:550!important;
    line-height:1.05!important;
    letter-spacing:-.03em!important;
  }
  .strategy-process-page .program-number-grid span{
    font-family:inherit!important;
    font-size:13px!important;
    line-height:1.45!important;
  }

  /* FAQ: identical scale/rhythm to the strategic sessions page. */
  .strategy-process-page .program-faq-item summary{
    font-family:inherit!important;
    font-size:19px!important;
    font-weight:600!important;
    line-height:1.45!important;
    letter-spacing:0!important;
  }
  .strategy-process-page .program-faq-item p{
    font-size:15.5px!important;
    line-height:1.58!important;
  }

  /* Hover language = same quiet lift used across /stratsessiya/. */
  .strategy-process-page .boundary-grid article,
  .strategy-process-page .days-grid article,
  .strategy-process-page .program-case-grid article,
  .strategy-process-page .program-related-card,
  .strategy-process-page .reflection-list>div,
  .strategy-process-page .control-grid>div{
    transition:transform .32s var(--motion-ease),border-color .32s ease,box-shadow .32s ease,background .32s ease;
  }
  .strategy-process-page .program-related-card:hover,
  .strategy-process-page .program-case-grid article:hover,
  .strategy-process-page .boundary-grid article:hover,
  .strategy-process-page .days-grid article:hover{
    transform:translateY(-4px);
  }

  /* First screen: same calm staged entrance language as the main strategic page. */
  html.motion-enabled .strategy-process-page .program-hero .eyebrow,
  html.motion-enabled .strategy-process-page .program-hero h1,
  html.motion-enabled .strategy-process-page .program-hero-lead,
  html.motion-enabled .strategy-process-page .program-hero-actions{
    opacity:0;
    transform:translate3d(0,18px,0);
    will-change:opacity,transform;
  }
  html.motion-enabled .strategy-process-page.motion-started .program-hero .eyebrow,
  html.motion-enabled .strategy-process-page.motion-started .program-hero h1,
  html.motion-enabled .strategy-process-page.motion-started .program-hero-lead,
  html.motion-enabled .strategy-process-page.motion-started .program-hero-actions{
    opacity:1;
    transform:none;
    transition:opacity 700ms var(--motion-ease),transform 700ms var(--motion-ease);
  }
  html.motion-enabled .strategy-process-page.motion-started .program-hero .eyebrow{transition-delay:60ms}
  html.motion-enabled .strategy-process-page.motion-started .program-hero h1{transition-delay:140ms}
  html.motion-enabled .strategy-process-page.motion-started .program-hero-lead{transition-delay:235ms}
  html.motion-enabled .strategy-process-page.motion-started .program-hero-actions{transition-delay:330ms}
  html.motion-enabled .strategy-process-page .program-hero-media img{
    transform:scale(1.025);
    opacity:.94;
    transition:transform 1450ms var(--motion-ease),opacity 1050ms ease;
  }
  html.motion-enabled .strategy-process-page.motion-started .program-hero-media img{
    transform:scale(1);
    opacity:1;
  }

  /* System diagram: center first, then contours — same logic as /stratsessiya/. */
  html.motion-enabled .strategy-process-page .program-diagnostics .system-visual.motion-reveal .system-center,
  html.motion-enabled .strategy-process-page .program-diagnostics .system-visual.motion-reveal .node{
    opacity:0;
    transition:opacity 620ms var(--motion-ease),transform 620ms var(--motion-ease);
  }
  html.motion-enabled .strategy-process-page .program-diagnostics .system-visual.motion-reveal .system-center{
    transform:translate(-50%,-50%) scale(.90);
  }
  html.motion-enabled .strategy-process-page .program-diagnostics .system-visual.motion-reveal .node{
    transform:translate3d(0,12px,0);
  }
  html.motion-enabled .strategy-process-page .program-diagnostics .system-visual.motion-in .system-center{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
  html.motion-enabled .strategy-process-page .program-diagnostics .system-visual.motion-in .node{
    opacity:1;
    transform:none;
  }
  html.motion-enabled .strategy-process-page .program-diagnostics .system-visual.motion-in .n1{transition-delay:150ms}
  html.motion-enabled .strategy-process-page .program-diagnostics .system-visual.motion-in .n2{transition-delay:240ms}
  html.motion-enabled .strategy-process-page .program-diagnostics .system-visual.motion-in .n3{transition-delay:330ms}
  html.motion-enabled .strategy-process-page .program-diagnostics .system-visual.motion-in .n4{transition-delay:420ms}
  html.motion-enabled .strategy-process-page .program-diagnostics .system-visual.motion-in .n5{transition-delay:510ms}
  html.motion-enabled .strategy-process-page .program-diagnostics .system-visual.motion-in .n6{transition-delay:600ms}
}

@media (min-width:781px) and (max-width:1180px){
  .strategy-process-page .program-hero,
  .strategy-process-page .program-hero-grid{min-height:660px!important}
  .strategy-process-page .program-hero-copy{padding:78px 0 76px!important}
  .strategy-process-page .program-hero h1{
    max-width:590px!important;
    font-size:clamp(48px,5.2vw,62px)!important;
  }
  .strategy-process-page .program-hero-lead{
    max-width:535px!important;
    font-size:19px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  html.motion-enabled .strategy-process-page .program-hero .eyebrow,
  html.motion-enabled .strategy-process-page .program-hero h1,
  html.motion-enabled .strategy-process-page .program-hero-lead,
  html.motion-enabled .strategy-process-page .program-hero-actions{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
  .strategy-process-page .program-hero-media img{transition:none!important;transform:none!important}
}
