/*
Theme Name: Pixelworx Studio
Theme URI: https://pixelworxstudio.com.my
Author: Pixelworx Studio
Author URI: https://pixelworxstudio.com.my
Description: Custom WordPress theme for Pixelworx Studio — a full-service creative agency based in Shah Alam, Selangor. Features sections for services, works, clients, team, about, and contact.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pixelworx
Tags: one-page, custom-logo, portfolio, agency
*/

/* ═══════════════════════════════════════════
   RESET & VARIABLES
   ═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#fafaf8;
  --bg-warm:#f5f3ef;
  --fg:#1a1a18;
  --fg-muted:#6b6860;
  --fg-light:#9e9a91;
  --accent:#e43d30;
  --accent-hover:#c9342a;
  --accent-light:#fef0ef;
  --surface:#ffffff;
  --border:#e5e2dc;
  --border-light:#edeae5;
  --font-display:'Instrument Serif',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul,ol{list-style:none}

/* Subtle grain */
body::before{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ═══════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════ */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 3rem;display:flex;justify-content:space-between;align-items:center;backdrop-filter:blur(20px);background:rgba(250,250,248,.85);border-bottom:1px solid transparent;transition:border-color .4s,box-shadow .4s}
.site-nav.scrolled{border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-logo a{display:flex;align-items:center;line-height:0}
.nav-logo img{height:30px;width:auto;display:block}
.nav-logo .logo-icon{display:none}
.nav-logo .logo-wordmark{display:block}
.site-nav .nav-links{display:flex;align-items:center;gap:2.5rem;font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;font-weight:500;color:var(--fg-muted)}
.site-nav .nav-links a{transition:color .3s;position:relative}
.site-nav .nav-links a:hover,.site-nav .nav-links a:focus{color:var(--accent)}
.site-nav .nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1.5px;background:var(--accent);transition:width .3s var(--ease-out)}
.site-nav .nav-links a:hover::after{width:100%}
.nav-cta{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;font-weight:600;padding:.6rem 1.4rem;background:var(--accent);color:#fff;border-radius:100px;transition:all .3s var(--ease-out);flex-shrink:0;display:flex;align-items:center}
.nav-cta:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 16px rgba(228,61,48,.25)}

/* Mobile menu toggle */
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:.5rem}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--fg);margin:5px 0;transition:all .3s}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.hero-section{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.hero-content{position:relative;z-index:2;padding:0 3rem 5rem}

/* Text-only hero (no image) — light background with gradient orbs */
.hero-section .hero-bg{position:absolute;inset:0;z-index:0}
.hero-section .hero-bg::before{content:'';position:absolute;top:-15%;right:-5%;width:55vw;height:55vw;border-radius:50%;background:radial-gradient(circle,rgba(228,61,48,.05) 0%,transparent 70%);animation:pulseGlow 8s ease-in-out infinite}
.hero-section .hero-bg::after{content:'';position:absolute;bottom:-10%;left:-10%;width:40vw;height:40vw;border-radius:50%;background:radial-gradient(circle,rgba(228,61,48,.03) 0%,transparent 70%);animation:pulseGlow 10s ease-in-out 3s infinite}
@keyframes pulseGlow{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.08);opacity:1}}

/* Image hero — full-bleed photo with dark overlay */
.hero-bg-image{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center center;background-repeat:no-repeat}
.hero-bg-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.25) 100%)}

/* When image is present: switch all text to white */
.hero-section--has-image .hero-tag{color:rgba(255,255,255,.7)}
.hero-section--has-image h1{color:#fff}
.hero-section--has-image h1 span.accent{color:var(--accent)}
.hero-section--has-image .hero-desc{color:rgba(255,255,255,.65)}
.hero-section--has-image .hero-scroll{color:rgba(255,255,255,.4)}
.hero-section--has-image .hero-scroll .line{background:rgba(255,255,255,.4)}

/* Hero typography — shared between both modes */
.hero-tag{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin-bottom:2rem;opacity:0;animation:fadeUp .8s var(--ease-out) .2s forwards}
.hero-section h1{font-family:var(--font-display);font-size:clamp(3rem,7vw,7rem);line-height:.95;letter-spacing:-.03em;font-weight:400;max-width:960px}
.hero-section h1 span{display:block;opacity:0;animation:fadeUp .8s var(--ease-out) forwards}
.hero-section h1 span:nth-child(1){animation-delay:.3s}
.hero-section h1 span:nth-child(2){animation-delay:.45s}
.hero-section h1 span.accent{animation-delay:.6s;color:var(--accent);font-style:italic}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:3rem;opacity:0;animation:fadeUp .8s var(--ease-out) .8s forwards}
.hero-desc{max-width:420px;font-size:.9rem;color:var(--fg-muted);line-height:1.7}
.hero-scroll{display:flex;align-items:center;gap:.8rem;font-size:.66rem;text-transform:uppercase;letter-spacing:.15em;color:var(--fg-light)}
.hero-scroll .line{width:40px;height:1px;background:var(--fg-light);animation:scrollLine 2s ease-in-out infinite}
@keyframes scrollLine{0%,100%{transform:scaleX(1);transform-origin:left}50%{transform:scaleX(.4);transform-origin:left}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════
   MARQUEE
   ═══════════════════════════════════════════ */
.marquee{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:1rem 0;overflow:hidden;white-space:nowrap;background:var(--surface)}
.marquee-inner{display:inline-flex;animation:marquee 35s linear infinite}
.marquee-inner span{font-family:var(--font-display);font-size:1rem;color:var(--fg-muted);margin:0 2rem;display:inline-flex;align-items:center;gap:1.2rem}
.marquee-inner span::after{content:'\25C6';font-size:.35rem;color:var(--accent)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══════════════════════════════════════════
   SECTIONS (shared)
   ═══════════════════════════════════════════ */
.pw-section{padding:6rem 3rem}
.pw-section--warm{background:var(--bg-warm)}
.pw-section--white{background:var(--surface)}
.section-label{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.25em;color:var(--accent);margin-bottom:1rem;display:flex;align-items:center;gap:1rem}
.section-label::before{content:'';width:20px;height:1.5px;background:var(--accent)}
.section-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.4rem);line-height:1.08;letter-spacing:-.02em;margin-bottom:1rem}
.section-subtitle{color:var(--fg-muted);max-width:520px;font-size:.9rem;line-height:1.7;margin-bottom:3.5rem}

/* ═══════════════════════════════════════════
   SERVICES
   ═══════════════════════════════════════════ */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.service-card{background:var(--surface);padding:2.2rem 1.8rem;transition:all .5s var(--ease-out);cursor:default}
.service-card:hover{background:var(--accent-light)}
.service-card:hover .service-num{color:var(--accent)}
.service-num{font-family:var(--font-mono);font-size:.58rem;color:var(--border);letter-spacing:.1em;margin-bottom:1.6rem;transition:color .4s}
.service-card h3{font-family:var(--font-display);font-size:1.4rem;margin-bottom:.7rem;line-height:1.2}
.service-card p{font-size:.8rem;color:var(--fg-muted);line-height:1.7}
.service-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:1.2rem}
.service-tags span{font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;padding:.25rem .55rem;border:1px solid var(--border);border-radius:100px;color:var(--fg-light);transition:all .3s}
.service-card:hover .service-tags span{border-color:var(--accent);color:var(--accent);background:rgba(228,61,48,.04)}

/* ═══════════════════════════════════════════
   CAPABILITIES
   ═══════════════════════════════════════════ */
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.cap-block h4{font-family:var(--font-display);font-size:1.2rem;margin-bottom:1rem;padding-bottom:.7rem;border-bottom:2px solid var(--accent)}
.cap-block li{font-size:.8rem;color:var(--fg-muted);padding-left:1rem;position:relative;line-height:1.5;margin-bottom:.45rem}
.cap-block li::before{content:'';position:absolute;left:0;top:.55em;width:4px;height:4px;border-radius:50%;background:var(--accent)}

/* ═══════════════════════════════════════════
   WORKS / PORTFOLIO — 4×4 CARD GRID
   ═══════════════════════════════════════════ */
.works-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}

/* Card wrapper */
.work-card{display:block;text-decoration:none;color:var(--fg);border-radius:8px;overflow:hidden;background:var(--surface);border:1px solid var(--border-light);transition:all .4s var(--ease-out);cursor:pointer}
.work-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-6px)}

/* Image container */
.work-card__image{position:relative;aspect-ratio:1/1;overflow:hidden}
.work-card__thumb{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.work-card:hover .work-card__thumb{transform:scale(1.06)}
.work-card__image .work-pattern{width:100%;height:100%;transition:transform .6s var(--ease-out);position:relative}
.work-card:hover .work-card__image .work-pattern{transform:scale(1.06)}

/* Hover overlay */
.work-card__hover{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;text-align:center;padding:1.2rem;opacity:0;transition:opacity .4s var(--ease-out)}
.work-card:hover .work-card__hover{opacity:1}
.work-card__cta{font-family:var(--font-body);font-size:.72rem;color:#fff;line-height:1.6;max-width:90%}

/* Card info below image */
.work-card__info{padding:1rem 1.1rem 1.2rem}
.work-card__tag{display:block;font-family:var(--font-mono);font-size:.52rem;text-transform:uppercase;letter-spacing:.15em;color:var(--accent);margin-bottom:.35rem}
.work-card__title{font-family:var(--font-display);font-size:1.05rem;line-height:1.25;letter-spacing:-.01em;color:var(--fg);transition:color .3s}
.work-card:hover .work-card__title{color:var(--accent)}

/* Pattern backgrounds */
.wp-coffee{background:linear-gradient(135deg,#2c1810,#4a2c1a,#3d2011)}
.wp-steakhouse{background:linear-gradient(160deg,#1a1a2e,#2d2d44,#16213e)}
.wp-red{background:linear-gradient(135deg,#c41e1e,#e43d30,#d4342a)}
.wp-green{background:linear-gradient(150deg,#0f2b1d,#1a4a32,#0d2418)}
.wp-purple{background:linear-gradient(135deg,#1c1033,#2d1b4e,#1a0a2e)}
.wp-navy{background:linear-gradient(160deg,#0c1929,#152238,#0a1420)}
.wp-magenta{background:linear-gradient(135deg,#2a1f36,#442d5e,#1e1429)}
.wp-dark{background:linear-gradient(140deg,#1a1a1a,#2d2d2d,#111)}
.wp-blue{background:linear-gradient(135deg,#0a2744,#183d66,#0d2a4a)}
.wp-earth{background:linear-gradient(150deg,#2a1f0e,#4a3620,#1e1508)}
.wp-crimson{background:linear-gradient(135deg,#1a0a0a,#3d1a1a,#2e0f0f)}
.wp-pattern::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 25px,rgba(255,255,255,.02) 25px,rgba(255,255,255,.02) 26px)}

/* ═══════════════════════════════════════════
   STATS BAR
   ═══════════════════════════════════════════ */
.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stat{background:var(--bg);padding:2.5rem 2rem;text-align:center}
.stat-num{font-family:var(--font-display);font-size:clamp(2rem,3.5vw,3rem);color:var(--accent);line-height:1}
.stat-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.15em;color:var(--fg-muted);margin-top:.6rem}

/* ═══════════════════════════════════════════
   CLIENTS
   ═══════════════════════════════════════════ */
.clients-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.client-cell{background:var(--surface);padding:1.8rem 1.2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100px;transition:all .4s var(--ease-out);cursor:default}
.client-cell:hover{background:var(--accent-light)}
.client-cell:hover .client-name{color:var(--fg)}
.client-cell:hover .client-type{color:var(--accent)}
.client-name{font-family:var(--font-display);font-size:.9rem;color:var(--fg-muted);transition:color .3s;line-height:1.3}
.client-type{font-size:.52rem;text-transform:uppercase;letter-spacing:.15em;color:var(--fg-light);margin-top:.35rem;transition:color .3s}

/* ═══════════════════════════════════════════
   TEAM
   ═══════════════════════════════════════════ */
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;margin-top:2rem}
.team-card{text-align:center;padding:2rem 1rem;border-radius:8px;border:1px solid var(--border-light);background:var(--surface);transition:all .4s var(--ease-out)}
.team-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.team-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--accent-light);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-family:var(--font-display);font-size:1.3rem;color:var(--accent);border:2px solid var(--border-light);transition:border-color .3s}
.team-avatar img{width:100%;height:100%;object-fit:cover}
.team-card:hover .team-avatar{border-color:var(--accent)}
.team-name{font-family:var(--font-display);font-size:1.05rem;margin-bottom:.25rem;line-height:1.2}
.team-role{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-light);line-height:1.4}

/* ═══════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════ */
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.about-text{font-size:.9rem;color:var(--fg-muted);line-height:1.8}
.about-text p+p{margin-top:1.1rem}
.about-visual{position:relative;aspect-ratio:4/5;background:var(--surface);border-radius:8px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-md)}
.about-visual::before{content:'Est. 1995';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:clamp(3rem,6vw,5.5rem);color:rgba(228,61,48,.06);white-space:nowrap;pointer-events:none;z-index:0}
.about-visual img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;display:block}
.philosophy-grid{margin-top:3.5rem;padding:2.2rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;box-shadow:var(--shadow-sm)}
.philosophy-item h4{font-family:var(--font-display);font-size:1.15rem;margin-bottom:.45rem}
.philosophy-item p{font-size:.8rem;color:var(--fg-muted);line-height:1.7}

/* ═══════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════ */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem}
.contact-title{font-family:var(--font-display);font-size:clamp(2.5rem,4.5vw,4.2rem);line-height:1;letter-spacing:-.03em;margin-bottom:1.5rem}
.contact-title em{color:var(--accent);font-style:italic}
.contact-info{margin-top:1.5rem}
.contact-row{display:flex;justify-content:space-between;padding:.9rem 0;border-bottom:1px solid var(--border);font-size:.85rem}
.contact-row .label{font-family:var(--font-mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.15em;color:var(--fg-light)}
.contact-row .value{text-align:right;color:var(--fg)}
.contact-form{display:flex;flex-direction:column;gap:1.2rem}
.contact-form .form-group label{font-family:var(--font-mono);font-size:.55rem;text-transform:uppercase;letter-spacing:.2em;color:var(--fg-light);display:block;margin-bottom:.35rem}
.contact-form input[type="text"],.contact-form input[type="email"],.contact-form textarea,.contact-form select{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--fg);font-family:var(--font-body);font-size:.85rem;padding:.85rem 1rem;border-radius:6px;outline:none;transition:border-color .3s,box-shadow .3s}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(228,61,48,.08)}
.contact-form textarea{resize:vertical;min-height:100px}
.contact-form select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6860' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.btn-submit{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;font-family:var(--font-body);font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;font-weight:600;padding:1rem 3rem;background:var(--accent);color:#fff;border:none;border-radius:100px;cursor:pointer;transition:all .3s var(--ease-out);width:100%;margin-top:.3rem}
.btn-submit:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 8px 25px rgba(228,61,48,.25)}

/* WPForms / CF7 compatibility */
.wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 textarea,.wpcf7 select{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--fg);font-family:var(--font-body);font-size:.85rem;padding:.85rem 1rem;border-radius:6px;outline:none;transition:border-color .3s}
.wpcf7 input:focus,.wpcf7 textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(228,61,48,.08)}
.wpcf7-submit{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;font-weight:600;padding:1rem 3rem;background:var(--accent);color:#fff;border:none;border-radius:100px;cursor:pointer;transition:all .3s var(--ease-out);width:100%}
.wpcf7-submit:hover{background:var(--accent-hover)}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.site-footer{padding:2.5rem 3rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:.7rem;color:var(--fg-light)}
.site-footer .footer-links{display:flex;gap:2rem}
.site-footer .footer-links a{transition:color .3s}
.site-footer .footer-links a:hover{color:var(--accent)}

/* ═══════════════════════════════════════════
   REVEAL ANIMATION
   ═══════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(35px);transition:all .8s var(--ease-out)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ═══════════════════════════════════════════
   WORDPRESS DEFAULTS
   ═══════════════════════════════════════════ */
.alignwide{max-width:1200px;margin-left:auto;margin-right:auto}
.alignfull{width:100%;max-width:100%}
.wp-block-image img{border-radius:8px}
.entry-content p{margin-bottom:1.2rem}
.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important;height:1px;width:1px;overflow:hidden}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

/* TABLET — 1024px */
@media(max-width:1024px){
  .services-grid,.cap-grid{grid-template-columns:repeat(2,1fr)}
  .works-grid-4{grid-template-columns:repeat(3,1fr)}
  .clients-grid{grid-template-columns:repeat(3,1fr)}
  .about-layout,.contact-layout{grid-template-columns:1fr}
  .about-visual{aspect-ratio:16/9;max-height:400px}
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .philosophy-grid{grid-template-columns:1fr}
}

/* MOBILE — 768px */
@media(max-width:768px){
  /* Nav — remove backdrop-filter which creates stacking context trap */
  .site-nav{padding:.75rem 1.25rem;backdrop-filter:none;-webkit-backdrop-filter:none;background:#fafaf8;z-index:9990}
  .site-nav.scrolled{background:#fafaf8}
  .nav-logo .logo-wordmark{display:none}
  .nav-logo .logo-icon{display:block}
  .nav-logo img.logo-icon{height:36px}
  .nav-logo{z-index:9992;position:relative}

  /* Mobile menu — full screen solid overlay ABOVE everything */
  .site-nav .nav-links{
    display:none;position:fixed;top:0;left:0;right:0;bottom:0;
    background:#ffffff;flex-direction:column;
    padding:5.5rem 2rem 2rem;gap:0;
    z-index:9991;
    justify-content:flex-start;align-items:flex-start;
    overflow-y:auto;-webkit-overflow-scrolling:touch
  }
  .site-nav .nav-links.active{display:flex}
  .site-nav .nav-links a{
    font-size:1.4rem;text-transform:none;letter-spacing:0;
    font-weight:400;font-family:var(--font-display);
    padding:1.2rem 0;border-bottom:1px solid var(--border);
    width:100%;display:block;color:var(--fg)
  }
  .site-nav .nav-links a:hover,.site-nav .nav-links a:active{color:var(--accent)}
  .site-nav .nav-links a::after{display:none}

  /* Hamburger toggle — must sit above the overlay */
  .menu-toggle{display:block;z-index:9992;position:relative}
  .menu-toggle span{background:var(--fg)}
  .nav-cta{display:none}

  /* Hero */
  .hero-section{min-height:90vh}
  .hero-content{padding:0 1.25rem 3rem}
  .hero-section h1{font-size:clamp(2.2rem,10vw,3.5rem);max-width:100%}
  .hero-tag{font-size:.58rem;margin-bottom:1.2rem}
  .hero-bottom{flex-direction:column;gap:1.2rem;align-items:flex-start;margin-top:2rem}
  .hero-desc{font-size:.85rem;max-width:100%}
  .hero-scroll{display:none}

  /* Marquee */
  .marquee{padding:.8rem 0}
  .marquee-inner span{font-size:.85rem;margin:0 1.2rem}

  /* Sections */
  .pw-section{padding:3rem 1.25rem}
  .section-title{font-size:clamp(1.6rem,6vw,2.2rem)}
  .section-subtitle{font-size:.85rem;margin-bottom:2.5rem}
  .section-label{font-size:.55rem}

  /* Services */
  .services-grid{grid-template-columns:1fr;border-radius:6px}
  .service-card{padding:1.8rem 1.5rem}
  .service-card h3{font-size:1.25rem}
  .service-card p{font-size:.8rem}

  /* Capabilities */
  .cap-grid{grid-template-columns:1fr;gap:1.5rem}

  /* Works */
  .works-grid-4{grid-template-columns:repeat(2,1fr);gap:1rem}
  .work-card__info{padding:.8rem .9rem 1rem}
  .work-card__title{font-size:.9rem}
  .work-card__tag{font-size:.48rem}

  /* Stats */
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .stat{padding:1.8rem 1rem}
  .stat-num{font-size:2rem}
  .stat-label{font-size:.55rem}

  /* Clients */
  .clients-grid{grid-template-columns:repeat(2,1fr);border-radius:6px}
  .client-cell{padding:1.2rem .8rem;min-height:80px}
  .client-name{font-size:.8rem}

  /* Team */
  .team-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
  .team-card{padding:1.5rem .8rem}
  .team-avatar{width:52px;height:52px;font-size:1rem}
  .team-name{font-size:.95rem}

  /* About */
  .about-layout{gap:2rem}
  .about-text{font-size:.85rem}
  .about-visual{aspect-ratio:16/9;max-height:280px}
  .philosophy-grid{grid-template-columns:1fr;padding:1.5rem;gap:1.5rem}
  .philosophy-item h4{font-size:1.05rem}
  .philosophy-item p{font-size:.78rem}

  /* Contact */
  .contact-layout{grid-template-columns:1fr;gap:2.5rem}
  .contact-title{font-size:clamp(2rem,8vw,2.8rem)}
  .contact-row{flex-direction:column;gap:.3rem;padding:.8rem 0}
  .contact-row .value{text-align:left}
  .form-row{grid-template-columns:1fr}
  .contact-form input,.contact-form textarea,.contact-form select{font-size:.85rem;padding:.8rem}
  .btn-submit{padding:.9rem 2rem;font-size:.72rem}

  /* Footer */
  .site-footer{flex-direction:column;gap:.8rem;text-align:center;padding:2rem 1.25rem;font-size:.65rem}
}

/* SMALL PHONE — 420px */
@media(max-width:420px){
  .site-nav{padding:.65rem 1rem}
  .nav-logo img.logo-icon{height:30px}
  .hero-content{padding:0 1rem 2.5rem}
  .hero-section h1{font-size:2rem}
  .hero-tag{font-size:.52rem}
  .hero-desc{font-size:.8rem}
  .pw-section{padding:2.5rem 1rem}
  .works-grid-4{grid-template-columns:1fr}
  .work-card__image{aspect-ratio:4/3}
  .clients-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .stats-bar{grid-template-columns:1fr}
  .marquee-inner span{font-size:.75rem;margin:0 1rem}
}

/* ═══════════════════════════════════════════
   CASE STUDY — SINGLE PROJECT PAGE
   ═══════════════════════════════════════════ */

/* Hero — full-bleed image */
.case-hero{position:relative;width:100%;height:75vh;min-height:450px;max-height:700px;overflow:hidden;margin-top:60px;background:var(--fg)}
.case-hero__img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;display:block}
.case-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center center;background-repeat:no-repeat}
.case-hero__placeholder{position:absolute;inset:0;background:linear-gradient(135deg,#1a1a18 0%,#2d2d2a 50%,#1a1a18 100%)}
.case-hero__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,.1) 40%,transparent 70%);display:flex;align-items:flex-end}
.case-hero__inner{padding:3.5rem 4rem;width:100%;max-width:1200px}
.case-hero__tag{display:inline-block;font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);background:rgba(0,0,0,.4);backdrop-filter:blur(8px);padding:.4rem .9rem;border-radius:100px;margin-bottom:1rem}
.case-hero__title{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.05;letter-spacing:-.03em;color:#fff;max-width:700px}

/* Article wrapper */
.case-study{max-width:1200px;margin:0 auto;padding:0 3rem 4rem}

/* Body: sidebar + content */
.case-body{display:grid;grid-template-columns:260px 1fr;gap:4rem;padding:3.5rem 0;border-bottom:1px solid var(--border)}

/* Meta sidebar */
.case-meta{position:sticky;top:100px;align-self:start}
.case-meta__block{margin-bottom:2rem}
.case-meta__label{font-family:var(--font-mono);font-size:.55rem;text-transform:uppercase;letter-spacing:.2em;color:var(--fg-light);margin-bottom:.4rem}
.case-meta__value{font-family:var(--font-display);font-size:1.1rem;color:var(--fg);line-height:1.3}
.case-meta__tags{display:flex;flex-wrap:wrap;gap:.35rem}
.case-meta__tag{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;padding:.3rem .6rem;border:1px solid var(--border);border-radius:100px;color:var(--fg-muted);white-space:nowrap}

/* Content area */
.case-content{font-size:.95rem;color:var(--fg-muted);line-height:1.85;max-width:680px}
.case-content h2,.case-content h3,.case-content h4,.case-content h5,.case-content h6{font-family:var(--font-display);color:var(--fg);line-height:1.15}
.case-content h2{font-size:1.8rem;letter-spacing:-.02em;margin:3rem 0 1rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.case-content h3{font-size:1.35rem;margin:2.5rem 0 .8rem}
.case-content h4{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-size:.65rem;color:var(--accent);margin:2.5rem 0 .6rem}
.case-content h5,.case-content h6{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;color:var(--fg-light);margin:2rem 0 .5rem}
.case-content p{margin-bottom:1.3rem}
.case-content > p:first-of-type{font-size:1.1rem;color:var(--fg);line-height:1.75}
.case-content ul,.case-content ol{margin:1rem 0 1.5rem 0;color:var(--fg-muted)}
.case-content li{margin-bottom:.5rem;padding-left:1.3rem;line-height:1.7;position:relative}
.case-content ul li{list-style:none}
.case-content ul li::before{content:'';position:absolute;left:0;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.case-content ol{padding-left:1.3rem}
.case-content ol li{list-style:decimal;padding-left:.3rem}
.case-content strong{color:var(--fg);font-weight:600}
.case-content em{font-style:italic}
.case-content blockquote{border-left:3px solid var(--accent);padding:1.2rem 1.5rem;margin:2rem 0;background:var(--accent-light);border-radius:0 8px 8px 0;font-family:var(--font-display);font-size:1.15rem;color:var(--fg);line-height:1.6;font-style:italic}
.case-content blockquote p{margin-bottom:0}
.case-content img{border-radius:8px;margin:2rem 0;box-shadow:var(--shadow-md);max-width:100%;height:auto}
.case-content .wp-block-image{margin:2rem 0}
.case-content .wp-block-image img{border-radius:8px;box-shadow:var(--shadow-md)}
.case-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.case-content a:hover{color:var(--accent-hover)}
.case-content hr{border:none;border-top:1px solid var(--border);margin:2.5rem 0}
/* Handle WP gallery blocks */
.case-content .wp-block-gallery{margin:2rem 0;gap:1rem}
.case-content .wp-block-gallery .wp-block-image img{border-radius:8px;box-shadow:var(--shadow-sm)}
/* Handle content that's just plain text without headings — make uppercase lines look like section headers */
.case-content p:empty{display:none}

/* Gallery grid */
.case-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;padding:3rem 0;border-bottom:1px solid var(--border)}
.case-gallery__item{border-radius:8px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-sm)}
.case-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.case-gallery__item:hover img{transform:scale(1.03)}
/* 3-image layout */
.case-gallery__item:first-child:nth-last-child(3){grid-row:span 2;aspect-ratio:auto}
/* Single image full width */
.case-gallery__item:only-child{grid-column:span 2;aspect-ratio:16/9}

/* Outcome card */
.case-outcome{padding:3rem 0;border-bottom:1px solid var(--border)}
.case-outcome__inner{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:2.5rem 3rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.case-outcome__inner::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);border-radius:4px 0 0 4px}
.case-outcome__label{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin-bottom:.8rem}
.case-outcome__text{font-family:var(--font-display);font-size:1.3rem;color:var(--fg);line-height:1.6;margin:0}

/* Project navigation */
.case-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:2.5rem 0;gap:2rem}
.case-nav__side{min-width:0}
.case-nav__prev{text-align:left}
.case-nav__next{text-align:right}
.case-nav__link{display:inline-flex;flex-direction:column;gap:.15rem;text-decoration:none;color:var(--fg);padding:1rem 0;transition:color .3s}
.case-nav__link:hover{color:var(--accent)}
.case-nav__link--right{align-items:flex-end}
.case-nav__arrow{font-size:1.2rem;line-height:1;color:var(--accent)}
.case-nav__dir{font-family:var(--font-mono);font-size:.55rem;text-transform:uppercase;letter-spacing:.15em;color:var(--fg-light)}
.case-nav__name{font-family:var(--font-display);font-size:1.15rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}
.case-nav__center{display:flex;justify-content:center}
.case-nav__grid{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);color:var(--fg-muted);transition:all .3s var(--ease-out)}
.case-nav__grid:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow-sm)}

/* Responsive */
@media(max-width:1024px){
  .case-hero{height:55vh;min-height:350px}
  .case-hero__inner{padding:2.5rem 3rem}
  .case-body{grid-template-columns:1fr;gap:0}
  .case-meta{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;padding-bottom:2rem;margin-bottom:2rem;border-bottom:1px solid var(--border)}
}
@media(max-width:768px){
  .case-hero{height:45vh;min-height:280px;margin-top:56px}
  .case-hero__inner{padding:1.5rem}
  .case-study{padding:0 1.5rem 3rem}
  .case-meta{grid-template-columns:1fr 1fr}
  .case-gallery{grid-template-columns:1fr}
  .case-gallery__item:only-child{grid-column:span 1}
  .case-gallery__item:first-child:nth-last-child(3){grid-row:span 1}
  .case-outcome__inner{padding:2rem 1.5rem}
  .case-outcome__text{font-size:1.1rem}
  .case-nav{grid-template-columns:1fr 1fr;gap:1rem}
  .case-nav__center{display:none}
  .case-nav__name{font-size:1rem;max-width:160px}
}