/* =====================================================================
   DIGITAL PLATOON — MOTION LAYER  (loads AFTER style.css)
   ---------------------------------------------------------------------
   Everything animated lives here + js/motion.js, so style.css is
   untouched. Hidden "start" states only apply under  html.motion-on ,
   which is added by a tiny script in <head> only when the visitor has
   NOT asked for reduced motion, and is removed automatically if GSAP
   fails to load. No JS / reduced motion = everything simply visible.
   Map:  1 focus  2 split text  3 hero  4 nav  5 services  6 category
         cards  7 about  8 DPEG timeline  9 final CTA  10 reduced motion
   ===================================================================== */

/* ---------- 1. KEYBOARD FOCUS ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline: 2px solid var(--c-orange);
  outline-offset: 3px;
}

/* ---------- 2. SPLIT-TEXT (word mask reveal) ---------- */
.w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }
.w-i{ display:inline-block; will-change:transform; }
.motion-on [data-split]:not([data-split-done]),
.motion-on .page-hero h1:not([data-split-done]),
.motion-on .hero h1:not([data-split-done]){ visibility:hidden; }

/* ---------- 3. HERO ---------- */
.motion-on .hero .eyebrow,
.motion-on .hero .lead,
.motion-on .hero-actions,
.motion-on .hero-scroll{ opacity:0; }

.hero-sweep{
  position:absolute; top:-20%; bottom:-20%; left:0; width:34%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,106,0,.05) 25%, rgba(255,106,0,.20) 50%, rgba(255,106,0,.05) 75%, transparent 100%);
  transform: translateX(-130%) skewX(-12deg);
  pointer-events:none; z-index:1; opacity:0;
  will-change: transform;
}
.motion-on .hero-sweep{ opacity:1; }

/* animated primary CTA: soft orange ring that breathes (opacity+transform only) */
.hero .btn-fill, .cta-final .btn-fill{ position:relative; }
.motion-on .hero .btn-fill::after,
.motion-on .cta-final .btn-fill::after{
  content:""; position:absolute; inset:-1px; border:1px solid var(--c-orange);
  border-radius:inherit; pointer-events:none;
  animation: cta-ring 2.8s var(--ease) 2.2s infinite;
}
@keyframes cta-ring{
  0%{ transform:scale(1); opacity:.7; }
  70%,100%{ transform:scale(1.14, 1.5); opacity:0; }
}
.hero-scroll .line{ background: linear-gradient(var(--c-orange), transparent); }

/* ---------- 4. NAV ---------- */
.nav-links a::after{ transition: right .45s var(--ease); }
.btn-fill, .btn-outline{ will-change: transform; }

/* ---------- 5. SERVICES ---------- */
.service-card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background: var(--c-orange);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .6s var(--ease);
}
.service-card:nth-child(even)::after{ transform-origin: right center; }
.service-card:hover::after, .service-card:focus-within::after{ transform: scaleX(1); }
.service-card::before{ background: radial-gradient(circle at var(--gx,50%) 115%, var(--c-orange-glow), transparent 60%); }
.service-card:nth-child(1){ --gx:20%; } .service-card:nth-child(2){ --gx:70%; }
.service-card:nth-child(3){ --gx:35%; } .service-card:nth-child(4){ --gx:80%; }
.service-card:nth-child(5){ --gx:50%; }
.service-icon{ transition: transform .6s var(--ease); }
.service-card:nth-child(odd):hover .service-icon{ transform: translate(6px,-8px); }
.service-card:nth-child(even):hover .service-icon{ transform: translate(-6px,-8px); }
.service-num{ transition: transform .5s var(--ease), letter-spacing .5s var(--ease); }
.service-card:hover .service-num{ letter-spacing:.22em; }

/* ---------- 6. CATEGORY CARDS ---------- */
.motion-on .category-card img{ transition: scale .9s var(--ease); }
.motion-on .category-card:hover img{ transform:none; scale:1.05; }
.category-card h3{
  background: linear-gradient(var(--c-orange), var(--c-orange)) 0 100% / 0% 2px no-repeat;
  display:inline-block; padding-bottom:4px;
  transition: background-size .6s var(--ease);
}
.category-card:hover h3, .category-card:focus-visible h3{ background-size: 100% 2px; }
@media (hover:hover){
  .category-card-content p, .category-card .btn-pill-sm{ transition: transform .55s var(--ease), opacity .55s var(--ease); }
  .category-card:not(:hover):not(:focus-visible) .btn-pill-sm{ opacity:.85; transform: translateY(4px); }
  .category-card:hover .btn-pill-sm{ transform:none; }
}

/* ---------- 7. ABOUT ---------- */
.about-preview .num-mark, .about-visual .num-mark{ will-change: transform; }

/* ---------- 8. DPEG TIMELINE ---------- */
.dpeg{ position:relative; background: var(--c-charcoal); overflow:hidden; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.dpeg-inner{ min-height:100vh; display:flex; align-items:center; padding: clamp(64px,9vw,110px) 0; }
.dpeg-head{ margin-bottom: clamp(40px,6vw,80px); }
.dpeg-title{ font-size: clamp(2rem, 5.2vw, 4.2rem); line-height:1.05; margin:0; }
.dpeg-word{ display:inline-block; color: var(--c-white); transition: color .5s var(--ease); }
.dpeg-sep{ color: var(--c-gray-mid); }
.motion-on .dpeg-word{ color: #3a3a3a; }
.motion-on .dpeg-word.is-lit{ color: var(--c-white); }
.motion-on .dpeg-word.is-current{ color: var(--c-orange); }

.dpeg-track{ position:relative; }
.dpeg-line{ position:absolute; top:7px; left:0; right:25%; height:2px; background: var(--c-line); }
.dpeg-line-fill{ position:absolute; inset:0; background: var(--c-orange); transform-origin:left center; box-shadow: 0 0 18px var(--c-orange-glow); }
.dpeg-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(4,1fr); gap: 32px; position:relative; }
.dpeg-step{ position:relative; padding-top: 40px; }
.dpeg-dot{ position:absolute; top:0; left:0; width:16px; height:16px; border-radius:50%; background: var(--c-charcoal); border:2px solid var(--c-line); transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); }
.dpeg-idx{ display:block; font-family: var(--font-mono); font-size:.78rem; letter-spacing:.14em; color: var(--c-orange); margin-bottom:10px; }
.dpeg-step h3{ font-size: clamp(1.5rem,2.4vw,2.1rem); margin:0 0 10px; }
.dpeg-step p{ margin:0; font-size:.95rem; max-width: 30ch; }
.motion-on .dpeg-step h3, .motion-on .dpeg-step p, .motion-on .dpeg-idx{ opacity:.3; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.motion-on .dpeg-step.is-active h3, .motion-on .dpeg-step.is-active p, .motion-on .dpeg-step.is-active .dpeg-idx{ opacity:1; }
.motion-on .dpeg-step.is-active h3{ transform: translateY(-2px); }
.dpeg-step.is-active .dpeg-dot, .dpeg-step.is-current .dpeg-dot{ border-color: var(--c-orange); background: var(--c-orange); }
.dpeg-step.is-current .dpeg-dot{ box-shadow: 0 0 0 6px var(--c-orange-dim), 0 0 22px var(--c-orange-glow); }
.dpeg-step.is-current h3{ color: var(--c-orange); }
html:not(.motion-on) .dpeg-dot{ border-color: var(--c-orange); background: var(--c-orange); }

@media (max-width: 860px){
  .dpeg-inner{ min-height:0; }
  .dpeg-steps{ grid-template-columns: 1fr; gap: 44px; padding-left: 44px; }
  .dpeg-line{ top:8px; bottom:8px; left:7px; right:auto; width:2px; height:auto; }
  .dpeg-line-fill{ transform-origin:center top; }
  .dpeg-step{ padding-top:0; }
  .dpeg-dot{ left:-44px; top:2px; }
  .dpeg-step p{ max-width: none; }
}

/* ---------- 9. FINAL CTA ---------- */
.cta-final{ position:relative; overflow:hidden; }
.cta-line{ display:block; width:72px; height:3px; margin:0 auto 26px; background: var(--c-orange); transform-origin:center; box-shadow:0 0 20px var(--c-orange-glow); }
.cta-final .btn-fill{ padding-left:34px; padding-right:34px; }

/* ---------- 10. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .hero-sweep{ display:none; }
  .motion-on .hero .btn-fill::after, .motion-on .cta-final .btn-fill::after{ animation:none; }
}

/* =====================================================================
   HERO — 3D CORRIDOR of real work (js/motion.js builds the tiles)
   ===================================================================== */
.hero.hero-corridor{ display:block; min-height:0; padding: clamp(14px,2vw,28px) var(--gutter) clamp(20px,3vw,40px); background:var(--c-black); }
.hero-corridor::before{ display:none; }
.hero-frame{
  position:relative; isolation:isolate; overflow:hidden; max-width:1400px; margin:0 auto;
  min-height: clamp(540px, calc(100vh - 140px), 760px);
  border:1px solid var(--c-line); border-radius: clamp(22px,3vw,36px);
  background: #050505; display:grid; place-items:center; padding: 40px clamp(20px,4vw,60px);
}
.hero-frame::after{ /* orange edge light that travels along the bottom */
  content:""; position:absolute; left:0; bottom:0; width:40%; height:2px; z-index:4; pointer-events:none;
  background: linear-gradient(90deg, transparent, var(--c-orange), transparent);
  box-shadow: 0 0 18px var(--c-orange-glow);
  animation: edge-run 6s linear infinite;
}
@keyframes edge-run{ from{ transform:translateX(-100%); } to{ transform:translateX(250%); } }
.corridor{ position:absolute; inset:0; z-index:0; perspective:800px; perspective-origin:50% 50%; overflow:hidden; }
.corridor-stage{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
.c-tile{
  position:absolute; left:50%; top:50%; width:180px; height:230px; border-radius:6px; overflow:hidden;
  background:#0d0d0d; backface-visibility:hidden; opacity:0; will-change:transform, opacity;
  box-shadow: 0 0 40px rgba(255,106,0,.14);
}
.c-tile.F, .c-tile.C{ width:260px; height:170px; }
.c-tile img{ display:block; width:100%; height:100%; object-fit:cover;  }
.hero-shade{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(ellipse 44% 40% at 50% 50%, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%); }
.hero-corridor .hero-content{ position:relative; z-index:2; max-width:780px; text-align:center; margin:0 auto; }
.hero-corridor .eyebrow{ justify-content:center; }
.hero-corridor h1{ font-size: clamp(2.3rem, 5.4vw, 4.8rem); }
.hero-corridor .lead{ margin-left:auto; margin-right:auto; max-width:34rem; }
.hero-corridor .hero-actions{ justify-content:center; }
.corridor-hint{ position:absolute; z-index:3; left:0; right:0; bottom:16px; text-align:center; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c-gray-mid); pointer-events:none; }
.motion-on .hero-corridor .corridor-hint{ opacity:0; }
@media (max-width:860px){
  .hero-frame{ min-height: 600px; padding:36px 20px 56px; }
  .c-tile{ width:130px; height:170px; } .c-tile.F, .c-tile.C{ width:190px; height:125px; }
  .corridor-hint{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .hero-frame::after{ animation:none; display:none; } }

/* =====================================================================
   SERVICES — hover list (row dims others, shows description + tilted preview)
   ===================================================================== */
.svc-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--c-line); }
.svc-list li{ border-bottom:1px solid var(--c-line); }
.svc-row{
  position:relative; display:grid; grid-template-columns: 84px minmax(0,1fr) 52px; align-items:center; gap:20px;
  min-height: clamp(120px, 12vw, 160px); padding: 18px 6px; color:var(--c-white);
  transition: opacity .45s var(--ease);
}
.svc-num{ font-family:var(--font-mono); font-size:clamp(1rem,1.6vw,1.3rem); color:var(--c-gray-mid); transition: color .4s var(--ease); }
.svc-title{ margin:0; text-align:left; transform:translateY(-12px); font-size: clamp(1.5rem, 3vw, 2.6rem); position:relative; z-index:4; text-shadow:0 2px 18px rgba(0,0,0,.6); text-transform:uppercase; letter-spacing:-.01em; color:var(--c-gray-mid); transition: color .4s var(--ease), transform .5s var(--ease); }
.svc-desc{ position:absolute; left:104px; bottom:14px; max-width:420px; margin:0; font-size:.78rem; line-height:1.45; color:var(--c-gray-light); opacity:0; transform:translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.svc-arrow{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--c-orange); color:var(--c-black); transition: transform .5s var(--ease), background .3s; justify-self:end; }
.svc-arrow svg{ width:20px; height:20px; }
.svc-preview{ position:absolute; right: clamp(90px, 9vw, 150px); top:50%; width:clamp(160px,17vw,230px); aspect-ratio:3/2; margin-top: calc(clamp(160px,17vw,230px) / -3); pointer-events:none; z-index:3; will-change:transform; }
.svc-preview-in{ display:block; width:100%; height:100%; border-radius:10px; overflow:hidden; border:1px solid var(--c-line); box-shadow:0 24px 50px rgba(0,0,0,.55);
  opacity:0; transform: scale(.82) rotate(-10deg); transition: opacity .35s var(--ease), transform .55s var(--ease); }
.svc-preview-in img{ display:block; width:100%; height:100%; object-fit:cover; }
.svc-list:hover .svc-row, .svc-list:focus-within .svc-row{ opacity:.38; }
.svc-list .svc-row:hover, .svc-list .svc-row:focus-visible{ opacity:1; }
.svc-row:hover .svc-num, .svc-row:focus-visible .svc-num{ color:var(--c-orange); }
.svc-row:hover .svc-title, .svc-row:focus-visible .svc-title{ color:var(--c-white); transform:translate(10px,-12px); }
.svc-row:hover .svc-desc, .svc-row:focus-visible .svc-desc{ opacity:1; transform:none; }
.svc-row:hover .svc-arrow, .svc-row:focus-visible .svc-arrow{ transform: rotate(-45deg); }
.svc-row:hover .svc-preview-in, .svc-row:focus-visible .svc-preview-in{ opacity:1; transform: scale(1) rotate(-5deg); }
@media (max-width: 860px){
  .svc-row{ grid-template-columns: 44px minmax(0,1fr) 44px; gap:12px; min-height:0; padding:22px 4px; }
  .svc-row:hover .svc-title{ transform:none; }
  .svc-title{ transform:none; color:var(--c-white); font-size:clamp(1.3rem,6vw,1.8rem); }
  .svc-num{ color:var(--c-orange); }
  .svc-desc{ position:static; grid-column:2; grid-row:2; opacity:1; transform:none; max-width:none; }
  .svc-arrow{ grid-column:3; grid-row:1; width:40px; height:40px; }
  .svc-preview{ display:none; }
  .svc-list:hover .svc-row{ opacity:1; }
}
@media (hover:none){ .svc-list:hover .svc-row{ opacity:1; } }