/* ============================================================
   WORK PAGE — page-work.php specific styles
   (page-hero, wrap, reveal, testi, cta-band base etc.
   are shared from style.css)
   ============================================================ */


/* =====================================================
   INNER PAGE ADDITIONS — shares design tokens with home
   ===================================================== */

/* ---------- Page hero (breadcrumb banner) ---------- */
.page-hero{
  position:relative;min-height:65vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);
}
.page-hero-bg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;}
.page-hero-bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 35%;
  transform:scale(1.08);
  animation:kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%{transform:scale(1.08) translate(0,0);}
  100%{transform:scale(1.16) translate(-1.5%,-1.5%);}
}
.page-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(6,10,26,.35) 0%, rgba(6,10,26,.45) 45%, rgba(6,10,26,.92) 96%),
             linear-gradient(90deg, rgba(6,10,26,.7) 0%, rgba(6,10,26,.2) 55%, rgba(6,10,26,.1) 100%);
}
.page-hero-inner{position:relative;z-index:2;width:100%;padding:0px 28px 84px;max-width:1180px;margin:0 auto;}
.breadcrumb{
  display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.6);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:24px;
  opacity:0;transform:translateY(10px);animation:fadeUp .8s ease .1s forwards;
}
.breadcrumb a{color:rgba(255,255,255,.85);transition:color .2s ease;}
.breadcrumb a:hover{color:var(--lime);}
.breadcrumb .sep{color:rgba(255,255,255,.35);}
.breadcrumb .cur{color:#fff;}
.page-hero h1{
  color:#fff;font-size:clamp(38px,6vw,68px);max-width:760px;font-weight:600;letter-spacing:-.02em;
  opacity:0;transform:translateY(18px);animation:fadeUp .9s ease .25s forwards;
}
.page-hero h1 em{font-style:italic;color:var(--maroon-light);font-weight:500;}
.page-hero p{
  color:rgba(255,255,255,.82);font-size:18px;max-width:560px;margin-top:22px;line-height:1.65;
  opacity:0;transform:translateY(18px);animation:fadeUp .9s ease .4s forwards;
}
.page-hero-stats{
  display:flex;gap:0;margin-top:52px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.18);padding-top:26px;max-width:820px;
  opacity:0;transform:translateY(18px);animation:fadeUp .9s ease .55s forwards;
}
.page-hero-stats .stat{padding-right:38px;margin-right:38px;border-right:1px solid rgba(255,255,255,.18);}
.page-hero-stats .stat:last-child{border-right:none;margin-right:0;padding-right:0;}
.page-hero-stats .num{font-family:var(--ff-display);color:#fff;font-size:clamp(22px,2.6vw,30px);font-weight:600;}
.page-hero-stats .lab{color:rgba(255,255,255,.65);font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-top:4px;}
@keyframes fadeUp{to{opacity:1;transform:translateY(0);}}

/* ---------- Hero ---------- */
.page-hero{
  position:relative;background:var(--ink);color:#fff;
  padding:168px 0 84px;overflow:hidden;isolation:isolate;
}
.page-hero-bg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;}
.page-hero-bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 35%;
  transform:scale(1.08);
  animation:kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%{transform:scale(1.08) translate(0,0);}
  100%{transform:scale(1.16) translate(-1.5%,-1.5%);}
}
.page-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(6,10,26,.35) 0%, rgba(6,10,26,.45) 45%, rgba(6,10,26,.92) 96%),
             linear-gradient(90deg, rgba(6,10,26,.7) 0%, rgba(6,10,26,.2) 55%, rgba(6,10,26,.1) 100%);
}
.page-hero::before{
  content:"";position:absolute;top:-140px;right:-120px;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(11,74,143,.45), transparent 70%);
  z-index:-1;animation:float-slow 9s ease-in-out infinite;
}
.page-hero::after{
  content:"";position:absolute;bottom:-160px;left:-100px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle at 60% 60%, rgba(129,0,0,.35), transparent 70%);
  z-index:-1;animation:float-slow 11s ease-in-out infinite reverse;
}
@keyframes float-slow{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(24px) scale(1.05);}}
.breadcrumb{
  display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.55);
  letter-spacing:.03em;
}
.breadcrumb a{color:rgba(255,255,255,.55);transition:color .25s ease;}
.breadcrumb a:hover{color:#fff;}
.breadcrumb .sep{opacity:.5;}
.breadcrumb .current{color:#fff}
.page-hero h1{
  color:#fff;font-size:clamp(34px,5.2vw,58px);max-width:760px;margin-top:18px;font-weight:600;letter-spacing:-.01em;
}
.page-hero p{color:rgba(255,255,255,.7);font-size:16.5px;max-width:560px;margin-top:16px;line-height:1.7;}
.page-hero .ph-tag{
  display:inline-flex;align-items:center;gap:8px;color:#BFD9F2;font-weight:700;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;
}
.page-hero .ph-tag::before{content:"";width:22px;height:1.5px;background:var(--signal);}
/* ---------- Stat strip ---------- */
.stat-strip{background:var(--paper-2);padding:54px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stat-strip .wrap{display:flex;flex-wrap:wrap;gap:0;}
.stat-strip .sstat{flex:1 1 160px;padding:0 28px;border-right:1px solid var(--line);text-align:center;}
.stat-strip .sstat:last-child{border-right:none;}
.stat-strip .snum{font-family:var(--ff-display);font-size:clamp(28px,3.4vw,42px);font-weight:700;color:var(--ink);}
.stat-strip .slab{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);margin-top:6px;}
@media (max-width:700px){.stat-strip .sstat{flex:1 1 45%;border-right:none;margin-bottom:20px;}}

/* ---------- Portfolio filters ---------- */
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin:38px 0 6px;}
.filter-btn{
  padding:11px 22px;border-radius:100px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:13.5px;color:var(--slate);
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .25s ease;
}
.filter-btn:hover{transform:translateY(-2px);}
.filter-btn.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.work-card{transition:opacity .4s ease,transform .4s ease;}
.work-card.hide{display:none;}

/* Flatter work-card style for the dedicated Work page grid
   (keeps the homepage's shadow-stack work section untouched) */
/*#portfolio .work-stack{position:relative;padding:0;}
#portfolio .work-stack::before{display:none;}
#portfolio .work-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-card);}*/

/* ---------- Simple CTA banner ---------- */
.services-cta-band{
   background:#fff ;padding:50px 0px;position:relative;overflow:hidden;
}
.services-cta-band::before{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%, rgba(255,255,255,.15), transparent 55%);
}
.cta-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; }
.cta-inner h3{color:#242424;font-size:clamp(22px,3vw,32px);max-width:520px;}
.cta-inner p{color:#242424;margin-top:8px;font-size:15px;max-width:480px;}
.cta-band .btn-solid{background:#003B76;color:#fff;box-shadow:0 10px 26px -8px rgba(0,0,0,.35);padding:20px; border-radius:50px;}
.cta-band .btn-solid:hover{background:#810000;color:#fff;}