/* ═══════════════════════════════════════════════════════════
   OPERATIONS — horizontal-pin filmstrip
   The page locks and travels sideways through 4 operations.
   Vertical fallback under 900px.
   ═══════════════════════════════════════════════════════════ */

/* ── scroll-cue under hero ── */
.ops-cue{display:flex;flex-direction:column;align-items:center;gap:0.6rem;
  padding:2.2rem 0 0;color:rgba(186,222,158,0.7)}
.ops-cue span{font-family:var(--font-sub);font-size:0.66rem;font-weight:700;letter-spacing:0.3em;text-transform:uppercase}
.ops-cue .ops-cue-arrow{width:26px;height:26px;border-right:2px solid var(--lime);border-bottom:2px solid var(--lime);
  transform:rotate(-45deg);animation:opsCue 1.8s ease-in-out infinite}
@keyframes opsCue{0%,100%{transform:rotate(-45deg) translate(0,0);opacity:0.4}50%{transform:rotate(-45deg) translate(4px,4px);opacity:1}}

/* ── horizontal pin shell ── */
.ops-hpin{position:relative;background:var(--black)}
.ops-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--black)}
.ops-track{display:flex;height:100vh;align-items:stretch;will-change:transform}
.ops-panel{position:relative;flex:0 0 auto;height:100vh}

/* top progress rail (tied to horizontal travel) */
.ops-rail{position:absolute;top:0;left:0;right:0;height:3px;z-index:60;background:rgba(186,222,158,0.12)}
.ops-rail > i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--lime)}
.ops-rail-num{position:absolute;top:14px;right:22px;z-index:60;font-family:var(--font-head);font-weight:800;
  font-size:0.9rem;letter-spacing:0.05em;color:rgba(237,242,232,0.5);font-variant-numeric:tabular-nums}
.ops-rail-num b{color:var(--lime)}

/* SVG tracking line that draws across the ribbon */
.ops-trackline{position:absolute;left:0;top:0;height:100%;z-index:2;pointer-events:none;overflow:visible;mix-blend-mode:screen}
.ops-trackline path{fill:none;stroke:var(--lime);stroke-width:2;opacity:0.35;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  filter:drop-shadow(0 0 6px rgba(186,222,158,0.4))}
.ops-trackline .dotpt{fill:var(--alert);opacity:0.85}

/* grain / scanline overlay */
.ops-grain{position:absolute;inset:0;z-index:55;pointer-events:none;mix-blend-mode:soft-light;opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  transition:opacity 0.5s ease}
.ops-grain::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,0.13) 2px 3px);opacity:0.35}

/* ═══ PANEL: opening statement ═══ */
.op-statement{width:96vw;max-width:1180px;z-index:3;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(2rem,7vw,8rem)}
.op-statement .os-eyebrow{font-family:var(--font-sub);font-size:0.76rem;font-weight:700;letter-spacing:0.34em;
  text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:0.9rem;margin-bottom:2rem}
.op-statement .os-eyebrow::before{content:'';width:48px;height:2px;background:var(--alert)}
.op-statement h2{font-family:var(--font-head);font-weight:300;font-size:clamp(2rem,4.4vw,4.3rem);
  line-height:1.12;letter-spacing:-0.02em;color:var(--off-white);max-width:20ch;text-wrap:balance}
.op-statement h2 .green{font-weight:700;color:var(--lime)}
.op-statement .os-sub{font-family:var(--font-accent);font-style:italic;font-weight:500;
  font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.55;color:rgba(238,244,232,0.78);
  max-width:48ch;margin-top:2rem}

/* ═══ PANEL: cinematic cover ═══ */
.op-cover{width:100vw;z-index:1}
.op-cover-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.op-cover-media image-slot{position:absolute;inset:-6% -4%;width:108%;height:112%}
/* A1: bias the Tactical cover crop toward the top so the ranger's head stays in frame */
.op-cover[data-op="1"] .op-cover-media image-slot{top:0;bottom:auto;height:120%}
.op-cover-grad{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,rgba(6,8,10,0.92) 0%,rgba(6,8,10,0.55) 38%,rgba(6,8,10,0.12) 64%,rgba(6,8,10,0.4) 100%)}
.op-cover-vig{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 100% at 30% 50%,transparent 48%,rgba(0,0,0,0.6))}
.op-cover-body{position:absolute;z-index:3;left:0;bottom:0;width:min(60vw,760px);
  padding:0 clamp(2rem,5vw,5.5rem) clamp(3rem,9vh,7rem)}
.oc-kicker{font-family:var(--font-sub);font-size:0.74rem;font-weight:700;letter-spacing:0.36em;
  text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:0.9rem;margin-bottom:1.3rem}
.oc-kicker::before{content:'';width:46px;height:2px;background:var(--alert)}
/* giant number — a letterform window filled with the operation's photo (mask reveal) */
.oc-num{display:block;font-family:var(--font-head);font-weight:800;font-size:clamp(7rem,20vw,19rem);
  line-height:0.7;letter-spacing:-0.05em;margin-bottom:0.6rem;
  background-position:center;background-size:cover;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  -webkit-text-stroke:1.5px rgba(186,222,158,0.55)}
.oc-title{font-family:var(--font-head);font-weight:800;font-size:clamp(2.4rem,5.5vw,5rem);line-height:0.9;
  text-transform:uppercase;color:#fff;letter-spacing:-0.025em;text-wrap:balance;text-shadow:0 6px 44px rgba(0,0,0,0.6)}
.oc-title .green{color:var(--lime)}
.oc-lead{font-family:var(--font-accent);font-style:italic;font-weight:500;font-size:clamp(1.1rem,1.8vw,1.6rem);
  line-height:1.5;color:rgba(238,244,232,0.92);max-width:46ch;margin-top:1.4rem;text-shadow:0 2px 20px rgba(0,0,0,0.55)}

/* ═══ PANEL: capabilities ═══ */
.op-caps{width:auto;z-index:3;background:var(--deep);display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(2.5rem,6vw,7rem);border-left:1px solid var(--border)}
.op-caps-label{font-family:var(--font-sub);font-size:0.74rem;font-weight:700;letter-spacing:0.3em;
  text-transform:uppercase;color:rgba(186,222,158,0.65);display:flex;align-items:center;gap:0.8rem;margin-bottom:2rem}
.op-caps-label::before{content:'';width:34px;height:2px;background:var(--alert)}
.op-caps-list{display:flex;flex-direction:column;max-width:680px}
.cap{display:grid;grid-template-columns:clamp(2.4rem,3.4vw,3.6rem) 1fr;gap:clamp(1rem,2.4vw,2.4rem);
  align-items:baseline;padding:clamp(1.05rem,2vw,1.6rem) 0;border-top:1px solid var(--border);
  transition:padding-left 0.45s cubic-bezier(0.16,1,0.3,1)}
.cap:last-child{border-bottom:1px solid var(--border)}
.cap-idx{font-family:var(--font-head);font-weight:800;font-size:clamp(1.3rem,2.2vw,2.1rem);line-height:0.9;
  color:transparent;-webkit-text-stroke:1.2px rgba(186,222,158,0.45);font-variant-numeric:tabular-nums;
  transition:color 0.35s,-webkit-text-stroke-color 0.35s}
.cap-text{font-family:var(--font-head);font-weight:300;font-size:clamp(1.08rem,1.65vw,1.5rem);
  line-height:1.4;color:var(--off-white);letter-spacing:-0.01em;text-wrap:pretty}
.cap-text strong{font-weight:700;color:#fff}
.cap:hover{padding-left:clamp(0.5rem,1.4vw,1.3rem)}
.cap:hover .cap-idx{color:var(--lime);-webkit-text-stroke-color:transparent}

/* ═══ PANEL: color-block wipe divider ═══ */
.op-wipe{width:30vw;min-width:300px;z-index:3;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--forest);position:relative}
.op-wipe.lime{background:var(--lime)}
.op-wipe-fill{position:absolute;inset:0;background:var(--alert);transform:scaleX(0);transform-origin:left center;z-index:0}
.op-wipe .ow-word{position:relative;z-index:1;font-family:var(--font-head);font-weight:800;
  font-size:clamp(2.4rem,5vw,4.6rem);text-transform:uppercase;letter-spacing:0.04em;line-height:0.9;
  writing-mode:vertical-rl;transform:rotate(180deg);color:var(--lime);opacity:0.85;white-space:nowrap}
.op-wipe.lime .ow-word{color:var(--forest)}

/* ═══ PANEL: 9-target gallery ═══ */
.op-gallery{width:auto;z-index:3;background:var(--deep);display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(2.5rem,5vw,6rem);border-left:1px solid var(--border)}
.op-gallery .opg-head{margin-bottom:2rem;max-width:560px}
.op-gallery .opg-label{font-family:var(--font-sub);font-size:0.74rem;font-weight:700;letter-spacing:0.3em;
  text-transform:uppercase;color:rgba(186,222,158,0.65);display:flex;align-items:center;gap:0.8rem;margin-bottom:1rem}
.op-gallery .opg-label::before{content:'';width:34px;height:2px;background:var(--alert)}
.op-gallery .opg-label .opg-count{color:var(--lime);font-variant-numeric:tabular-nums}
.op-gallery .opg-sub{font-family:var(--font-head);font-weight:300;font-size:clamp(1.1rem,1.7vw,1.55rem);
  line-height:1.35;color:var(--off-white);letter-spacing:-0.01em}
.opg-row{display:flex;gap:1.4rem}
.tgt-card{flex:0 0 auto;width:clamp(260px,24vw,330px);height:clamp(340px,52vh,460px);position:relative;
  border:1px solid var(--border);background:var(--forest);overflow:hidden;display:flex;flex-direction:column;
  justify-content:flex-end;padding:1.6rem}
.tgt-card .tgt-idx{position:absolute;top:1.2rem;left:1.4rem;font-family:var(--font-head);font-weight:800;
  font-size:1.5rem;color:transparent;-webkit-text-stroke:1.2px rgba(186,222,158,0.55);
  font-variant-numeric:tabular-nums;z-index:2}
.tgt-card .tgt-media{position:absolute;inset:0;z-index:0}
.tgt-card .tgt-media image-slot{width:100%;height:100%}
.tgt-card .tgt-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(6,8,10,0.94) 6%,rgba(6,8,10,0.45) 48%,rgba(6,8,10,0.55) 100%)}
.tgt-card .tgt-title{position:relative;z-index:2;font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.15rem,1.5vw,1.42rem);line-height:1.12;text-transform:uppercase;color:#fff;letter-spacing:-0.01em}
.tgt-card .tgt-desc{position:relative;z-index:2;font-family:var(--font-body);font-weight:300;font-size:0.92rem;
  line-height:1.45;color:var(--text-body);margin-top:0.6rem}

/* ═══ PANEL: outro ═══ */
.op-outro{width:88vw;max-width:900px;z-index:3;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(2rem,6vw,7rem)}
.op-outro h2{font-family:var(--font-head);font-weight:800;font-size:clamp(2.2rem,5vw,4.4rem);line-height:0.94;
  text-transform:uppercase;color:#fff;letter-spacing:-0.02em;margin-bottom:1.4rem}
.op-outro h2 .green{color:var(--lime)}
.op-outro p{font-family:var(--font-accent);font-style:italic;font-size:clamp(1.05rem,1.7vw,1.5rem);
  color:rgba(238,244,232,0.8);max-width:46ch;margin-bottom:2rem;line-height:1.5}
.op-outro .oo-cta{display:inline-flex;align-items:center;gap:0.7rem;align-self:flex-start;
  font-family:var(--font-sub);font-size:0.74rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--black);background:var(--lime);padding:1rem 1.8rem;text-decoration:none;
  transition:gap 0.3s ease,background 0.2s}
.op-outro .oo-cta:hover{gap:1.2rem;background:var(--white)}

/* ═══ topic-nav with imagery (operations page only) ═══ */
.tnav-ops .topic-nav-inner{max-width:1340px}
.tnav-ops .topic-nav-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tnav-ops .topic-nav-link{padding:0;min-height:210px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.tnav-ops .tnl-media{position:absolute;inset:0;z-index:0}
.tnav-ops .tnl-media image-slot{width:100%;height:100%;filter:saturate(0.92) brightness(0.9);transition:transform 0.6s cubic-bezier(0.16,1,0.3,1),filter 0.4s}
.tnav-ops .topic-nav-link:hover .tnl-media image-slot{transform:scale(1.05);filter:saturate(1) brightness(1)}
.tnav-ops .topic-nav-link::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(6,8,10,0.94) 4%,rgba(6,8,10,0.4) 52%,rgba(6,8,10,0.55) 100%)}
.tnav-ops .topic-nav-link::before{z-index:3}
.tnav-ops .tnl-body{position:relative;z-index:2;padding:1.4rem 1.4rem 1.5rem}
.tnav-ops .topic-nav-link:hover{background:var(--forest)}
@media(max-width:900px){
  .tnav-ops .topic-nav-grid{grid-template-columns:1fr 1fr}
}

/* ═══════════ TEXT MOTION ═══════════ */
/* line-mask slide */
.t-rise{display:block;overflow:hidden}
.t-rise > .t-rise-i{display:block;transform:translateY(115%);transition:transform 0.85s cubic-bezier(0.16,1,0.3,1)}
.in > .t-rise > .t-rise-i,.t-rise.in > .t-rise-i{transform:translateY(0)}
/* character stagger */
.t-chars .ch{display:inline-block;transform:translateY(0.7em) rotate(4deg);opacity:0;
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1),opacity 0.6s ease}
.t-chars.in .ch{transform:none;opacity:1}
/* outline-to-fill */
.t-fill{color:transparent;-webkit-text-stroke:1.4px rgba(186,222,158,0.6);
  transition:color 0.7s ease,-webkit-text-stroke-color 0.7s ease}
.t-fill.in{color:#fff;-webkit-text-stroke-color:transparent}
.t-fill.in .green{color:var(--lime)}
.t-fill.gfill.in{color:var(--lime);-webkit-text-stroke-color:transparent}
/* generic fade-rise for blocks */
.r-up{opacity:0;transform:translateY(40px);transition:opacity 0.8s ease,transform 0.9s cubic-bezier(0.16,1,0.3,1)}
.r-up.in{opacity:1;transform:none}
.r-up.d1{transition-delay:0.08s}.r-up.d2{transition-delay:0.16s}.r-up.d3{transition-delay:0.24s}

@media(prefers-reduced-motion:reduce){
  .t-rise > .t-rise-i{transform:none}.t-chars .ch{transform:none;opacity:1}
  .t-fill{color:#fff;-webkit-text-stroke-color:transparent}.r-up{opacity:1;transform:none}
  .ops-cue .ops-cue-arrow{animation:none}
}

/* ═══════════ MOBILE: vertical fallback ═══════════ */
@media(max-width:900px){
  .ops-cue{display:none}
  .ops-hpin{height:auto !important}
  .ops-sticky{position:static;height:auto;overflow:visible}
  .ops-track{display:block;height:auto;transform:none !important}
  .ops-panel{width:auto !important;max-width:none;height:auto;min-height:auto}
  .ops-rail,.ops-rail-num,.ops-trackline{display:none}
  .op-statement{padding:clamp(3rem,12vw,5rem) 1.5rem}
  .op-cover{min-height:78vh;display:flex}
  .op-cover-media image-slot{inset:0;width:100%;height:100%}
  .op-cover-body{position:relative;width:auto;padding:0 1.5rem clamp(3rem,12vw,4rem)}
  .op-caps,.op-gallery{padding:clamp(3rem,11vw,4.5rem) 1.5rem;border-left:none;border-top:1px solid var(--border)}
  .op-wipe{width:auto;min-width:0;height:120px;border-top:1px solid var(--border)}
  .op-wipe .ow-word{writing-mode:horizontal-tb;transform:none}
  .opg-row{flex-direction:column;gap:1rem}
  .tgt-card{width:auto;height:auto;min-height:200px}
  .op-outro{padding:clamp(3rem,12vw,5rem) 1.5rem}
}