/* OPERATION page: reuses the shared design tokens/components from ../premium-story.css
   and ../sunbeam-inspired.css. Only the page-intro banner and case-study grid are new. */

/* Two-column layout matching the homepage hero's proportions (text column + a dedicated
   visual column), so the banner stays balanced on wide screens instead of leaving one
   narrow text column and a mostly-empty gap next to a floating watermark. */
.page-intro{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);min-height:520px;background:var(--sb-ink);color:var(--sb-cream)}
.page-intro-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:180px clamp(24px,5vw,72px) 64px clamp(22px,5vw,72px)}
.page-intro-visual{position:relative;overflow:hidden}
.page-intro-glow{position:absolute;width:min(70%,520px);aspect-ratio:1;right:-12%;top:-12%;border-radius:50%;background:var(--sb-orange);opacity:.22;filter:blur(6px)}
.page-intro-orbit{position:absolute;width:min(52%,320px);aspect-ratio:1;right:16%;bottom:10%;border:1px solid rgba(255,255,255,.22);border-radius:50%}
.page-watermark{position:absolute;right:10%;bottom:8%;margin:0;font-family:"Playfair Display",serif;font-size:clamp(40px,6vw,92px);letter-spacing:-.06em;color:rgba(245,239,226,.1);pointer-events:none}
.page-intro h1{margin:18px 0 0;font-size:clamp(38px,4.6vw,72px);letter-spacing:-.08em;line-height:1.08;word-break:keep-all}
.page-intro h1 em{font-family:"Playfair Display",serif;font-weight:600}
.page-lead{margin:26px 0 0;max-width:440px;color:#e7d9ce;font-size:16px;line-height:1.8}

/* Matches the font-size/letter-spacing/line-height that the homepage applies to its own
   h2s via section-specific selectors (.bridge h2, .solution-copy h2, etc.) — those don't
   reach this page's headings, so this page needs its own copy of the same display scale. */
.section-title{margin:0;font-size:clamp(37px,4.7vw,72px);letter-spacing:-.075em;line-height:1.08;word-break:keep-all;text-wrap:balance}
.section-title em{font-family:"Playfair Display",serif;font-weight:600}

.about-layout{display:grid;grid-template-columns:90px minmax(280px,1.15fr) minmax(260px,.75fr);gap:52px;border-top:1px solid var(--line)}
.about-layout p:not(.eyebrow){align-self:end;max-width:430px;margin:0;color:var(--ink-soft);font-size:16px}

/* Background alternation for visual rhythm between long text sections. */
.operation-detail-section{background:var(--paper)}
.case-study-section{background:var(--paper)}

/* Stat strip: pulls real numbers out of the paragraphs so the page has a scannable,
   non-text visual break instead of one long run of prose sections. */
.stats-section{background:var(--sb-orange);color:var(--sb-ink)}
.stats-section .eyebrow{color:var(--sb-ink);opacity:.65}
.stats-title{margin:14px 0 0;font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.03em}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:48px;background:rgba(51,45,41,.18)}
.stat-tile{display:flex;flex-direction:column;gap:8px;padding:32px 20px;background:var(--sb-orange);transition:transform 240ms var(--ease-out)}
.stat-tile:hover{transform:translateY(-4px)}
.stat-number{font-family:"Playfair Display",serif;font-weight:600;font-size:clamp(38px,4.5vw,60px);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat-label{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.06em;color:rgba(51,45,41,.75)}

@media(max-width:850px){
  .stats-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
}

/* Checklist for OPERATION: shows what we manage without publishing the specifics —
   full detail is shared directly with people who actually reach out. */
.checklist-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:56px;background:var(--line)}
.checklist-item{display:flex;align-items:center;gap:14px;padding:24px 28px;background:var(--cream);font-size:17px;font-weight:600;color:var(--ink);word-break:keep-all;transition:transform 240ms var(--ease-out),box-shadow 240ms var(--ease-out)}
.checklist-item:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(51,45,41,.12)}
.check-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;border-radius:50%;background:var(--orange);color:var(--cream);font-size:13px;font-weight:700}
.checklist-note{margin:28px 0 0;color:var(--ink-soft);font-size:14px}
.checklist-note .text-link{margin-left:6px}

@media(max-width:850px){
  .checklist-grid{grid-template-columns:1fr}
}

/* Case-study timeline: a connected vertical line + dot markers replaces the numbered
   detail-rail list here so BEFORE→ISSUE→SOLUTION→RESULT reads as one continuous story
   instead of repeating the SERVICE section's step-rail layout directly below it. Tag
   colors reuse the same received/making/done palette as the STAFF VIEW section on the
   homepage, so warm = problem and green = result across the whole site. */
.case-timeline{position:relative;margin-top:56px;padding-left:36px}
.case-timeline:before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line)}
.case-step{position:relative;padding-bottom:40px}
.case-step:last-child{padding-bottom:0}
.case-step:before{content:"";position:absolute;left:-36px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--ink-soft)}
.case-tag{display:inline-block;padding:3px 10px;border-radius:999px;font-family:"DM Mono",monospace;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--ink-soft);background:var(--cream)}
.case-step h3{margin:14px 0 0;font-size:19px;color:var(--ink)}
.case-step p{margin:8px 0 0;max-width:600px;color:var(--ink-soft);font-size:14px;line-height:1.75;word-break:keep-all}
.case-step-issue .case-tag{color:#a5690a;background:#fde9c8}
.case-step-issue:before{border-color:#a5690a}
.case-step-solution .case-tag{color:var(--cream);background:var(--orange)}
.case-step-solution:before{border-color:var(--orange);background:var(--orange)}
.case-step-result .case-tag{color:#2f7a3a;background:#d7ecd9}
.case-step-result:before{border-color:#2f7a3a;background:#2f7a3a}
.case-step{opacity:0;transform:translateY(16px);transition:opacity 560ms var(--ease-out),transform 560ms var(--ease-out)}
.case-timeline.is-visible .case-step{opacity:1;transform:translateY(0)}
.case-timeline.is-visible .case-step:nth-child(2){transition-delay:120ms}
.case-timeline.is-visible .case-step:nth-child(3){transition-delay:240ms}
.case-timeline.is-visible .case-step:nth-child(4){transition-delay:360ms}
@media(prefers-reduced-motion:reduce){.case-step{opacity:1;transform:none;transition:none}}

.service-rail{margin-top:56px}
.service-rail article{grid-template-columns:74px 1fr}

.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:52px;background:var(--line)}
.scope-col{padding:32px;background:var(--paper)}
.scope-col ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px;font-size:14px;word-break:keep-all}
.scope-no{opacity:.7}
.scope-no li{color:var(--ink-soft)}
.scope-no li:before{content:"—";display:inline-block;width:20px;color:var(--ink-soft)}
.scope-yes li{color:var(--ink)}
.scope-yes li:before{content:"—";display:inline-block;width:20px;color:var(--orange)}

.contact-intro .button{margin-top:32px}

@media(max-width:850px){
  .scope-grid{grid-template-columns:1fr}
  .page-intro{grid-template-columns:1fr;min-height:auto}
  .page-intro-copy{padding:140px 24px 48px}
  .page-intro-visual{min-height:220px}
  .about-layout{grid-template-columns:1fr;gap:24px}
}