/*
Theme Name: Deworkz
Theme URI: https://deworkz.in
Author: Deworkz
Author URI: https://deworkz.in
Description: Custom theme for Deworkz — corporate events, activations and film production. Navy/red brand system with a full Events + Films content management setup.
Version: 1.0
Requires PHP: 7.4
Text Domain: deworkz
*/

/* ============================================
   DEWORKZ — DESIGN SYSTEM
   Color: Navy #0B1F3A / Red #C0272D / Off-white #F5F5F3 / Fog #AAB4C8
   Type: Fraunces (display serif) + Inter (body/utility sans)
   Signature: the angled red ribbon — carried from print credentials
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --navy: #0B1F3A;
  --navy-2: #132a4d;
  --red: #C0272D;
  --off: #F5F5F3;
  --white: #FFFFFF;
  --fog: #AAB4C8;
  --ink: #16181d;
  --muted: #5B6472;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, Segoe UI, sans-serif;
  --maxw: 1240px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* ---------- kicker / eyebrow ---------- */
.kicker{
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--red);
  display:inline-block;
  margin:0 0 14px;
}
.kicker.on-dark{ color:#ff8a8f; }

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(11,31,58,0.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:30px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{
  font-size:14px; font-weight:600; color:#dfe4ee;
  letter-spacing:.02em;
  position:relative; padding:6px 0;
}
.nav-links a.active, .nav-links a:hover{ color:#fff; }
.nav-links a.active::after, .nav-links li.current-menu-item > a::after, .nav-links li.current_page_item > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--red); transform:skewX(-12deg);
}
.nav-links li.current-menu-item > a, .nav-links li.current_page_item > a{ color:#fff; }
.nav-cta{
  background:var(--red); color:#fff !important; padding:10px 20px;
  font-weight:700; font-size:13px; letter-spacing:.03em;
  clip-path:polygon(6% 0, 100% 0, 94% 100%, 0% 100%);
}
.nav-cta:hover{ background:#a51f24; }
.nav-toggle{ display:none; background:none; border:0; color:#fff; font-size:26px; cursor:pointer; }

@media (max-width: 880px){
  .nav-links{
    position:fixed; inset:76px 0 0 0; background:var(--navy);
    flex-direction:column; justify-content:flex-start; align-items:flex-start;
    padding:32px; gap:24px; transform:translateX(100%); transition:transform .35s ease;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:block; }
}

/* ---------- angled ribbon (signature element) ---------- */
.ribbon{
  position:relative; display:inline-block;
  background:var(--red); color:#fff;
  padding:10px 22px 10px 18px;
  font-family:var(--sans); font-weight:700; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase;
  clip-path:polygon(0 0, 100% 0, 92% 100%, 0% 100%);
}
.ribbon.navy{ background:var(--navy); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; font-weight:700; font-size:14px; letter-spacing:.02em;
  border:2px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--red); color:#fff; }
.btn-primary:hover{ background:#a51f24; }
.btn-outline{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-outline.dark{ border-color:var(--navy); color:var(--navy); }
.btn-outline.dark:hover{ background:var(--navy); color:#fff; }

/* ---------- hero (shared pattern, diagonal navy panel) ---------- */
.hero{
  position:relative; min-height:640px; display:flex; align-items:stretch;
  background:var(--navy); overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(11,31,58,.97) 0%, rgba(11,31,58,.92) 38%, rgba(11,31,58,.55) 62%, rgba(11,31,58,.25) 100%);
}
.hero-inner{
  position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
  padding:150px 32px 110px; width:100%;
}
.hero h1{
  font-family:var(--serif); font-weight:600; color:#fff;
  font-size:clamp(40px, 6vw, 74px); line-height:1.02; margin:0 0 22px; max-width:820px;
}
.hero h1 em{ font-style:italic; font-weight:500; color:var(--fog); }
.hero p.lede{
  font-size:18px; color:#c7cede; max-width:560px; line-height:1.6; margin:0 0 36px;
}
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }

.hero-slash{
  position:absolute; top:-10%; right:14%; width:180px; height:140%;
  background:var(--red); opacity:.9; transform:rotate(12deg);
  z-index:1;
}
.hero-slash.two{ right:9%; width:40px; opacity:.55; }

/* ---------- section scaffolding ---------- */
section{ padding:104px 0; }
section.tight{ padding:72px 0; }
.section-head{ max-width:680px; margin-bottom:56px; }
.section-head h2{
  font-family:var(--serif); font-weight:600; font-size:clamp(30px,3.4vw,44px);
  color:var(--navy); margin:0; line-height:1.08;
}
.section-head p{ color:var(--muted); font-size:16px; margin:16px 0 0; line-height:1.6; }
.rule{ width:64px; height:4px; background:var(--red); margin:0 0 20px; }

.bg-off{ background:var(--off); }
.bg-navy{ background:var(--navy); color:#fff; }
.bg-navy .section-head h2{ color:#fff; }
.bg-navy .section-head p{ color:var(--fog); }

/* ---------- stats ---------- */
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(255,255,255,.12); }
.stat-card{ background:var(--navy); padding:44px 30px; text-align:center; }
.stat-card .num{ font-family:var(--serif); font-size:52px; font-weight:600; color:#fff; }
.stat-card .lbl{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--fog); margin-top:8px; }
.stat-card.accent{ background:var(--red); }
.stat-card.accent .num{ color:#fff; }
.stat-card.accent .lbl{ color:#ffd7d8; }

@media (max-width:720px){ .stat-row{ grid-template-columns:1fr; } }

/* ---------- capability grid ---------- */
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#e7e5e0; }
.cap-card{ background:var(--off); padding:38px 32px; min-height:190px; }
.cap-card.dark{ background:var(--navy); color:#fff; }
.cap-card .tri{
  width:0;height:0; border-left:8px solid transparent; border-right:8px solid transparent;
  border-bottom:14px solid var(--red); transform:rotate(90deg); margin-bottom:18px;
}
.cap-card h3{ font-family:var(--serif); font-size:20px; font-weight:600; margin:0 0 10px; }
.cap-card p{ font-size:14px; line-height:1.6; color:var(--muted); margin:0; }
.cap-card.dark p{ color:var(--fog); }

@media (max-width:880px){ .cap-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .cap-grid{ grid-template-columns:1fr; } }

/* ---------- split promo cards (events / films on home) ---------- */
.promo-split{ display:grid; grid-template-columns:1fr 1fr; }
.promo-card{
  position:relative; min-height:460px; display:flex; align-items:flex-end;
  background-size:cover; background-position:center; overflow:hidden;
}
.promo-card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(11,31,58,.92) 10%, rgba(11,31,58,.25) 65%, rgba(11,31,58,.05) 100%);
}
.promo-inner{ position:relative; z-index:2; padding:44px; color:#fff; }
.promo-inner .kicker{ color:#ff9298; }
.promo-inner h3{ font-family:var(--serif); font-size:34px; font-weight:600; margin:0 0 10px; }
.promo-inner p{ color:var(--fog); margin:0 0 20px; max-width:380px; }
.promo-link{ font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:8px; }
.promo-link .arrow{ transition:transform .25s ease; }
.promo-card:hover .arrow{ transform:translateX(6px); }

@media (max-width:820px){ .promo-split{ grid-template-columns:1fr; } }

/* ---------- clientele ---------- */
.client-strip{ background:var(--off); padding:8px; }
.client-strip img{ width:100%; }

.logo-marquee{
  background:var(--off); padding:32px 0; overflow:hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-track{
  display:flex; align-items:center; gap:64px; width:max-content;
  animation: logoScroll 32s linear infinite;
}
.logo-marquee:hover .logo-track{ animation-play-state:paused; }
.logo-track img{
  height:44px; width:auto; max-width:140px; object-fit:contain;
  filter:grayscale(1) opacity(.65); transition:filter .25s ease;
}
/* Grayscale + color-on-hover only applies where a mouse can actually hover.
   Touch devices (phones, tablets) show full color always, since there's
   no hover state to reveal it otherwise. */
@media (hover: hover) and (pointer: fine){
  .logo-track img:hover{ filter:grayscale(0) opacity(1); }
}
@media not all and (hover: hover) {
  .logo-track img{ filter:none; opacity:1; }
}
@keyframes logoScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .logo-track{ animation:none; } }

/* ---------- project grid (events/films pages) ---------- */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; }
.filter-btn{
  font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.02em;
  padding:10px 20px; background:var(--off); color:var(--navy); border:1px solid #e2e0da;
  cursor:pointer;
}
.filter-btn.active, .filter-btn:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.proj-card{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--navy);
  cursor:default;
}
.proj-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.proj-card:hover img{ transform:scale(1.06); }
.proj-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(11,31,58,.94) 0%, rgba(11,31,58,.15) 55%, rgba(11,31,58,0) 75%);
}
.proj-tag{
  position:absolute; left:0; bottom:26px; z-index:2;
  background:var(--red); color:#fff; padding:9px 22px 9px 18px;
  font-weight:700; font-size:13px; letter-spacing:.03em; text-transform:uppercase;
  clip-path:polygon(0 0, 100% 0, 88% 100%, 0% 100%);
}
.proj-meta{ position:absolute; left:24px; right:24px; bottom:66px; z-index:2; }
.proj-meta .cat{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fog); }
.proj-meta h4{ font-family:var(--serif); font-size:19px; color:#fff; margin:6px 0 0; font-weight:600; }

@media (max-width:980px){ .proj-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .proj-grid{ grid-template-columns:1fr; } }

/* gallery count badge on project cards with multiple photos */
.proj-count{
  position:absolute; top:16px; right:16px; z-index:3;
  background:rgba(11,31,58,.75); color:#fff; font-size:11.5px; font-weight:700;
  padding:6px 11px; display:flex; align-items:center; gap:6px; letter-spacing:.02em;
}
.proj-count-icon{
  width:13px; height:10px; border:1.6px solid #fff; border-radius:2px; position:relative; display:inline-block;
}
.proj-count-icon::before{
  content:""; position:absolute; top:-4px; left:3px; width:5px; height:3px; border:1.6px solid #fff; border-bottom:none; border-radius:2px 2px 0 0;
}
.proj-card{ cursor:pointer; }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1000; background:rgba(6,14,28,.94);
  display:none; align-items:center; justify-content:center; padding:32px;
}
.lightbox.open{ display:flex; }
.lightbox-stage{ position:relative; max-width:1000px; width:100%; }
.lightbox-stage img{ width:100%; max-height:74vh; object-fit:contain; background:#000; }
.lightbox-cap{ color:#fff; text-align:center; margin-top:16px; }
.lightbox-cap .cat{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fog); }
.lightbox-cap h4{ font-family:var(--serif); font-size:20px; margin:6px 0 0; font-weight:600; }
.lightbox-count{ color:var(--fog); font-size:13px; margin-top:6px; }
.lightbox-close, .lightbox-nav{
  position:absolute; background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.25);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:20px; border-radius:50%;
}
.lightbox-close{ top:-58px; right:0; }
.lightbox-nav.prev{ left:-64px; top:50%; transform:translateY(-50%); }
.lightbox-nav.next{ right:-64px; top:50%; transform:translateY(-50%); }
.lightbox-close:hover, .lightbox-nav:hover{ background:var(--red); border-color:var(--red); }
@media (max-width:820px){
  .lightbox-nav.prev{ left:6px; }
  .lightbox-nav.next{ right:6px; }
  .lightbox-close{ top:6px; right:6px; }
}

/* ---------- film cards ---------- */
.film-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.film-card{
  display:flex; align-items:center; gap:18px;
  background:var(--off); padding:20px; border-left:4px solid var(--red);
}
.film-card .play{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:var(--navy);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px;
}
.film-card h4{ font-family:var(--sans); font-weight:700; font-size:15px; margin:0 0 4px; color:var(--navy); }
.film-card a.link{ font-size:13px; color:var(--red); font-weight:600; }
@media (max-width:700px){ .film-grid{ grid-template-columns:1fr; } }

/* ---------- reel banner ---------- */
.reel-banner{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--navy); color:#fff; padding:40px 44px; position:relative; overflow:hidden;
}
.reel-banner::before{
  content:""; position:absolute; right:-60px; top:-60%; width:220px; height:220%;
  background:var(--red); opacity:.85; transform:rotate(14deg);
}
.reel-banner .txt{ position:relative; z-index:2; }
.reel-banner h3{ font-family:var(--serif); font-size:26px; margin:0 0 6px; font-weight:600; }
.reel-banner p{ margin:0; color:var(--fog); font-size:14px; }
.reel-banner .btn{ position:relative; z-index:2; }

/* ---------- footer ---------- */
footer{ background:var(--navy); color:var(--fog); padding:64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-grid h5{ color:#fff; font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 18px; }
.footer-grid p, .footer-grid a{ font-size:14px; line-height:1.9; color:var(--fog); }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:12.5px; flex-wrap:wrap; gap:12px; }
.footer-logo{ height:26px; margin-bottom:14px; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- page hero small variant (events/films) ---------- */
.hero.small{ min-height:420px; }
.hero.small .hero-inner{ padding:150px 32px 70px; }

/* ---------- hero image slider (crossfading photos) ---------- */
.hero-slider{ position:absolute; inset:0; overflow:hidden; }
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.6s ease;
}
.hero-slide.active{ opacity:1; animation: heroKenBurns 6.5s ease-in-out forwards; }
@keyframes heroKenBurns{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
@media (prefers-reduced-motion: reduce){ .hero-slide.active{ animation:none; } }

/* ---------- 3D logo preloader (homepage entrance only) ---------- */
#deworkz-preloader{
  position:fixed; inset:0; z-index:9999; background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  perspective:1200px;
  transition:opacity .8s ease, visibility .8s ease;
}
#deworkz-preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
#deworkz-preloader .preloader-stage{
  transform-style:preserve-3d;
  animation: logoIntro3D 3s cubic-bezier(.22,1,.36,1) 1 both, logoFloat 2.6s ease-in-out infinite 3s;
}
#deworkz-preloader img{ width:280px; max-width:60vw; display:block; filter:drop-shadow(0 24px 44px rgba(0,0,0,.55)); }
#deworkz-intro-video{ max-width:900px; width:80vw; height:auto; display:block; }
#deworkz-preloader .preloader-rule{
  position:absolute; bottom:36%; left:50%; width:0; height:3px; background:var(--red);
  transform:translateX(-50%); animation: ruleGrow 1.2s ease-out 2.4s forwards;
}
#deworkz-preloader .preloader-tag{
  position:absolute; bottom:30%; left:0; right:0; text-align:center;
  color:var(--fog); letter-spacing:.32em; font-size:11px; font-weight:700; text-transform:uppercase;
  opacity:0; animation: tagFade .8s ease forwards 3.4s;
}
#deworkz-preloader .skip-intro{
  position:absolute; bottom:32px; right:32px; color:var(--fog); font-size:12px; letter-spacing:.05em;
  border:1px solid rgba(255,255,255,.28); padding:9px 18px; cursor:pointer; background:transparent;
  font-family:var(--sans);
}
#deworkz-preloader .skip-intro:hover{ color:#fff; border-color:#fff; }

@keyframes logoIntro3D{
  0%{ transform: rotateY(-200deg) rotateX(18deg) scale(.35); opacity:0; }
  50%{ transform: rotateY(20deg) rotateX(-8deg) scale(1.1); opacity:1; }
  72%{ transform: rotateY(-10deg) rotateX(4deg) scale(.97); }
  100%{ transform: rotateY(0) rotateX(0) scale(1); opacity:1; }
}
@keyframes logoFloat{
  0%,100%{ transform: translateY(0) rotateY(0); }
  50%{ transform: translateY(-8px) rotateY(6deg); }
}
@keyframes ruleGrow{ to{ width:130px; } }
@keyframes tagFade{ to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  #deworkz-preloader .preloader-stage, #deworkz-preloader .preloader-rule, #deworkz-preloader .preloader-tag{
    animation:none !important; opacity:1;
  }
}

/* ---------- credentials download CTA (Events page) ---------- */
.credentials-cta{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--off); border-left:4px solid var(--red); padding:26px 30px; margin-bottom:48px;
}
.credentials-cta .txt h4{ font-family:var(--serif); font-size:18px; color:var(--navy); margin:0 0 4px; font-weight:600; }
.credentials-cta .txt p{ margin:0; color:var(--muted); font-size:13.5px; }

/* ---------- films page: illustrated hero ---------- */
.film-hero{ background:var(--navy); }
.film-set-art{
  position:absolute; right:-40px; top:0; bottom:0; width:56%;
  display:flex; align-items:center; z-index:1; opacity:.92;
  pointer-events:none;
}
.film-set-art svg, .film-set-art img{ width:100%; height:auto; }
@media (max-width:980px){ .film-set-art{ width:70%; opacity:.5; } }
@media (max-width:620px){ .film-set-art{ display:none; } }

/* ---------- WordPress-generated markup resets ---------- */
.nav-links ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:36px; }
.nav-links li{ margin:0; }
@media (max-width:880px){
  .nav-links ul{ flex-direction:column; align-items:flex-start; gap:24px; }
}
.alignnone, .aligncenter, .alignleft, .alignright{ max-width:100%; }
.wp-caption{ max-width:100%; }
img{ height:auto; }

/* project card used as a real link (single event) but styled like a button, not a card link */
.proj-card-link{ display:block; }