/* Novastra Digital — Main Stylesheet v1.0.0 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#0A0A0F;--ink-2:#1C1C26;--ink-3:#2E2E3E;--accent:#FF4D2E;--accent-2:#FF7A5C;--gold:#C8A96E;--white:#FAFAF8;--font-display:'Syne',sans-serif;--font-body:'DM Sans',sans-serif}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--ink);color:var(--white);overflow-x:hidden;cursor:none}
img{max-width:100%;height:auto}
a{color:inherit}

/* Custom Cursor */
.cursor{position:fixed;width:12px;height:12px;background:var(--accent);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s ease,height .2s ease,background .2s ease}
.cursor-ring{position:fixed;width:40px;height:40px;border:1px solid rgba(255,77,46,.5);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s ease,height .3s ease}
.cursor.hover{width:20px;height:20px;background:var(--white)}
.cursor-ring.hover{width:60px;height:60px}

/* Nav */
nav,#site-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.5rem 4rem;border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(10,10,15,.8)}
.nav-logo{font-family:var(--font-display);font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--white);text-decoration:none}
.nav-logo span{color:var(--accent)}
.nav-links{display:flex;gap:2.5rem;list-style:none}
.nav-links li a,.nav-links a{font-size:.875rem;font-weight:400;color:rgba(250,250,248,.6);text-decoration:none;letter-spacing:.04em;transition:color .2s}
.nav-links li a:hover,.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-cta{background:var(--accent)!important;color:var(--white)!important;padding:.625rem 1.5rem!important;border-radius:100px;font-weight:500!important;font-size:.875rem!important;letter-spacing:.02em!important;transition:background .2s!important}
.nav-cta:hover{background:var(--accent-2)!important}

/* Buttons */
.btn-primary{background:var(--accent);color:var(--white);padding:1rem 2.5rem;border-radius:100px;font-family:var(--font-body);font-size:.9375rem;font-weight:500;text-decoration:none;border:none;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;display:inline-block;letter-spacing:.01em}
.btn-primary:hover{background:#FF3318;transform:translateY(-2px);box-shadow:0 12px 40px rgba(255,77,46,.35)}
.btn-ghost{color:rgba(250,250,248,.6);font-size:.875rem;font-weight:400;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:color .2s;letter-spacing:.02em}
.btn-ghost:hover{color:var(--white)}
.btn-ghost svg{transition:transform .2s}
.btn-ghost:hover svg{transform:translateX(4px)}
.btn-outline{border:1px solid rgba(255,255,255,.2);color:rgba(250,250,248,.8);padding:1rem 2.5rem;border-radius:100px;font-family:var(--font-body);font-size:.9375rem;font-weight:400;text-decoration:none;cursor:pointer;background:transparent;transition:border-color .2s,color .2s;display:inline-block}
.btn-outline:hover{border-color:rgba(255,255,255,.5);color:var(--white)}
.see-all-btn{display:inline-flex;align-items:center;gap:1rem;border:1px solid rgba(255,255,255,.15);color:rgba(250,250,248,.8);padding:1rem 2rem 1rem 2.5rem;border-radius:100px;font-family:var(--font-body);font-size:.9375rem;font-weight:400;text-decoration:none;transition:border-color .3s,color .3s}
.see-all-btn:hover{border-color:var(--accent);color:var(--white)}
.see-all-btn:hover .see-all-icon{background:var(--accent);border-color:var(--accent)}
.see-all-btn:hover .see-all-icon svg{transform:rotate(-45deg)}
.see-all-icon{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s}
.see-all-icon svg{transition:transform .3s}

/* Reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* Hero */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 4rem 5rem;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:var(--ink);overflow:hidden}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,77,46,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,77,46,.07) 1px,transparent 1px);background-size:80px 80px;animation:gridShift 20s linear infinite}
@keyframes gridShift{0%{transform:translateY(0)}100%{transform:translateY(80px)}}
.hero-glow{position:absolute;width:800px;height:800px;background:radial-gradient(circle,rgba(255,77,46,.15) 0%,transparent 70%);top:-200px;right:-200px;border-radius:50%;animation:glowPulse 6s ease-in-out infinite}
.hero-glow-2{position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(200,169,110,.1) 0%,transparent 70%);bottom:100px;left:-100px;border-radius:50%;animation:glowPulse 8s ease-in-out infinite reverse}
@keyframes glowPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.7}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.75rem;font-size:.75rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:2rem;position:relative;opacity:0;animation:fadeUp .8s ease .3s forwards}
.hero-eyebrow::before{content:'';display:block;width:2rem;height:1px;background:var(--gold)}
.hero-headline{font-family:var(--font-display);font-size:clamp(4rem,9vw,9rem);font-weight:800;line-height:.9;letter-spacing:-.04em;position:relative;opacity:0;animation:fadeUp .8s ease .5s forwards}
.hero-headline em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(250,250,248,.3)}
.hero-headline .accent-word{color:var(--accent);display:inline-block;position:relative}
.hero-headline .accent-word::after{content:'';position:absolute;bottom:.1em;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:lineReveal .6s ease 1.2s forwards}
@keyframes lineReveal{to{transform:scaleX(1)}}
.hero-sub{display:flex;align-items:flex-end;justify-content:space-between;margin-top:3rem;opacity:0;animation:fadeUp .8s ease .8s forwards}
.hero-desc{max-width:400px;font-size:1.0625rem;line-height:1.7;color:rgba(250,250,248,.55);font-weight:300}
.hero-actions{display:flex;gap:1rem;align-items:center}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.hero-badge{position:absolute;top:8rem;right:4rem;width:120px;height:120px;opacity:0;animation:fadeIn .6s ease 1.2s forwards,spin 20s linear 1.2s infinite;animation-fill-mode:forwards}
@keyframes fadeIn{to{opacity:1}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hero-badge-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center}

/* Marquee */
.marquee-section{border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:1.25rem 0;overflow:hidden;background:rgba(255,255,255,.02)}
.marquee-track{display:flex;gap:4rem;animation:marquee 25s linear infinite;white-space:nowrap;width:max-content}
.marquee-track:hover{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{font-family:var(--font-display);font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,250,248,.3);display:inline-flex;align-items:center;gap:1.5rem;flex-shrink:0}
.marquee-item .dot{width:4px;height:4px;background:var(--accent);border-radius:50%}

/* Stats */
.stats-section{padding:7rem 4rem;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1px;background:rgba(255,255,255,.06);border-top:1px solid rgba(255,255,255,.06)}
.stat-card{padding:3rem 2rem;background:var(--ink);text-align:center;position:relative;overflow:hidden;transition:background .3s}
.stat-card:hover{background:rgba(255,255,255,.02)}
.stat-card::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--accent);transition:width .4s ease}
.stat-card:hover::after{width:60%}
.stat-num{font-family:var(--font-display);font-size:3.5rem;font-weight:800;letter-spacing:-.04em;color:var(--white);line-height:1;margin-bottom:.5rem}
.stat-num span{color:var(--accent)}
.stat-label{font-size:.8125rem;font-weight:400;color:rgba(250,250,248,.4);letter-spacing:.06em;text-transform:uppercase}

/* Section Header */
.section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:4rem}
.section-label{font-size:.75rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.section-title{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.section-desc{max-width:320px;font-size:1rem;line-height:1.7;color:rgba(250,250,248,.5);font-weight:300;padding-bottom:.25rem}

/* Services */
.services-section{padding:7rem 4rem}
.services-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:rgba(255,255,255,.08)}
.service-card{background:var(--ink);padding:2.5rem;position:relative;overflow:hidden;transition:background .4s;cursor:pointer}
.service-card:hover{background:rgba(255,255,255,.03)}
.service-num{font-family:var(--font-display);font-size:.6875rem;font-weight:700;letter-spacing:.12em;color:rgba(250,250,248,.2);text-transform:uppercase;margin-bottom:2rem}
.service-icon{width:48px;height:48px;margin-bottom:1.5rem;color:var(--accent);transition:transform .3s}
.service-card:hover .service-icon{transform:scale(1.1) rotate(-5deg)}
.service-name{font-family:var(--font-display);font-size:1.375rem;font-weight:700;letter-spacing:-.02em;margin-bottom:1rem}
.service-desc{font-size:.9rem;line-height:1.65;color:rgba(250,250,248,.45);font-weight:300}
.service-arrow{position:absolute;bottom:2rem;right:2rem;width:40px;height:40px;border:1px solid rgba(255,255,255,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(250,250,248,.4);transition:border-color .3s,background .3s,color .3s,transform .3s}
.service-card:hover .service-arrow{border-color:var(--accent);background:var(--accent);color:var(--white);transform:rotate(45deg)}
.service-bg-text{position:absolute;bottom:-1rem;right:-.5rem;font-family:var(--font-display);font-size:6rem;font-weight:800;color:rgba(255,255,255,.03);pointer-events:none;user-select:none;letter-spacing:-.05em}

/* Process */
.process-section{padding:7rem 4rem;background:var(--ink-2);border-top:1px solid rgba(255,255,255,.06)}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:4rem}
.process-step{position:relative}
.step-line{position:absolute;top:1.75rem;left:3.5rem;right:-2rem;height:1px;background:rgba(255,255,255,.1)}
.step-num-wrap{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.step-num{width:3.5rem;height:3.5rem;border:1px solid rgba(255,255,255,.12);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1rem;font-weight:700;color:rgba(250,250,248,.5);position:relative;z-index:1;background:var(--ink-2);transition:border-color .3s,color .3s}
.process-step:hover .step-num{border-color:var(--accent);color:var(--accent)}
.step-title{font-family:var(--font-display);font-size:1.125rem;font-weight:700;margin-bottom:.75rem;letter-spacing:-.02em}
.step-desc{font-size:.875rem;line-height:1.65;color:rgba(250,250,248,.45);font-weight:300}

/* Work Section */
.work-section{padding:7rem 4rem}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:4rem}
.work-card{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ink-2);cursor:pointer}
.work-card:first-child{grid-row:span 2;aspect-ratio:auto}
.work-bg{position:absolute;inset:0;transition:transform .6s ease}
.work-card:hover .work-bg{transform:scale(1.04)}
.work-bg-1{background:linear-gradient(135deg,#1a0a05 0%,#3d1a0d 50%,#1a0a05 100%)}
.work-bg-2{background:linear-gradient(135deg,#050d1a 0%,#0d1f3d 50%,#050d1a 100%)}
.work-bg-3{background:linear-gradient(135deg,#0a050d 0%,#1d0a2e 50%,#0a050d 100%)}
.work-pattern{position:absolute;inset:0;opacity:.2}
.work-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 60%);padding:2rem;display:flex;flex-direction:column;justify-content:flex-end}
.work-tag{display:inline-block;margin-bottom:.75rem;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.work-title{font-family:var(--font-display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.5rem}
.work-card:first-child .work-title{font-size:2.25rem}
.work-result{font-size:.8125rem;color:rgba(250,250,248,.55);font-weight:300}
.work-hover-arrow{position:absolute;top:2rem;right:2rem;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s,background .3s;background:rgba(255,255,255,.05)}
.work-card:hover .work-hover-arrow{opacity:1;transform:scale(1);background:var(--accent);border-color:var(--accent)}

/* Testimonials */
.testimonials-section{padding:7rem 4rem;background:var(--ink-2);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.testimonials-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;margin-top:4rem}
.testimonial-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:2rem;transition:border-color .3s,transform .3s}
.testimonial-card:hover{border-color:rgba(255,77,46,.3);transform:translateY(-4px)}
.testimonial-quote{font-size:1.5rem;color:var(--accent);font-family:var(--font-display);font-weight:800;margin-bottom:1rem;line-height:1}
.testimonial-text{font-size:.9375rem;line-height:1.7;color:rgba(250,250,248,.65);font-weight:300;margin-bottom:1.5rem;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:.75rem}
.author-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.875rem;font-weight:700;flex-shrink:0}
.av-1{background:rgba(255,77,46,.2);color:var(--accent)}
.av-2{background:rgba(200,169,110,.2);color:var(--gold)}
.av-3{background:rgba(100,150,255,.2);color:#6496FF}
.author-name{font-size:.875rem;font-weight:500}
.author-role{font-size:.75rem;color:rgba(250,250,248,.4)}

/* CTA */
.cta-section{padding:9rem 4rem;text-align:center;position:relative;overflow:hidden}
.cta-glow{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(255,77,46,.1) 0%,transparent 70%);pointer-events:none}
.cta-title{font-family:var(--font-display);font-size:clamp(3rem,7vw,6.5rem);font-weight:800;letter-spacing:-.04em;line-height:.95;margin-bottom:2rem;position:relative}
.cta-title em{font-style:normal;color:var(--accent)}
.cta-sub{font-size:1.125rem;font-weight:300;color:rgba(250,250,248,.5);margin-bottom:3rem;position:relative}
.cta-btns{display:flex;gap:1rem;justify-content:center;position:relative}

/* Footer */
#site-footer,footer{border-top:1px solid rgba(255,255,255,.08);padding:3rem 4rem 2rem}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:3rem}
.footer-brand{font-family:var(--font-display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.footer-brand span{color:var(--accent)}
.footer-tagline{font-size:.875rem;color:rgba(250,250,248,.35);margin-top:.5rem;font-weight:300}
.footer-links{display:flex;gap:4rem}
.footer-col h4{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,250,248,.35);margin-bottom:1.25rem}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.75rem}
.footer-col a{font-size:.875rem;color:rgba(250,250,248,.5);text-decoration:none;font-weight:300;transition:color .2s}
.footer-col a:hover{color:var(--white)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:2rem;display:flex;justify-content:space-between;align-items:center}
.footer-copy{font-size:.8125rem;color:rgba(250,250,248,.25);font-weight:300}
.footer-socials{display:flex;gap:1rem}
.social-link{width:36px;height:36px;border:1px solid rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(250,250,248,.4);text-decoration:none;transition:border-color .2s,color .2s}
.social-link:hover{border-color:var(--accent);color:var(--accent)}

/* ── Portfolio Page ──────────────────────────────────────── */
.page-hero{padding:10rem 4rem 5rem;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06)}
.page-hero-bg{position:absolute;inset:0}
.page-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,77,46,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,77,46,.05) 1px,transparent 1px);background-size:60px 60px}
.page-hero-glow{position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(255,77,46,.12) 0%,transparent 70%);top:-150px;right:0;border-radius:50%}
.page-hero-content{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:3rem}
.page-eyebrow{font-size:.75rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:1.25rem;display:flex;align-items:center;gap:.75rem}
.page-eyebrow::before{content:'';display:block;width:2rem;height:1px;background:var(--accent)}
.page-hero-title{font-family:var(--font-display);font-size:clamp(3.5rem,7vw,7rem);font-weight:800;letter-spacing:-.04em;line-height:.9}
.page-hero-title em{font-style:normal;-webkit-text-stroke:1px rgba(250,250,248,.25);color:transparent}
.page-hero-right{max-width:340px;flex-shrink:0}
.page-hero-desc{font-size:1rem;line-height:1.7;color:rgba(250,250,248,.5);font-weight:300;margin-bottom:1.5rem}
.project-count{font-family:var(--font-display);font-size:3rem;font-weight:800;letter-spacing:-.04em;color:var(--white);line-height:1}
.project-count span{color:var(--accent)}
.project-count-label{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,250,248,.35);margin-top:.25rem}
.filter-bar{padding:2rem 4rem;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:1rem;flex-wrap:wrap;position:sticky;top:72px;z-index:50;background:rgba(10,10,15,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.filter-label{font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,250,248,.3);margin-right:.5rem}
.filter-btn{background:transparent;border:1px solid rgba(255,255,255,.1);color:rgba(250,250,248,.55);padding:.5rem 1.25rem;border-radius:100px;font-family:var(--font-body);font-size:.8125rem;font-weight:400;cursor:pointer;transition:all .2s;letter-spacing:.02em}
.filter-btn:hover{border-color:rgba(255,255,255,.3);color:var(--white)}
.filter-btn.active{background:var(--accent);border-color:var(--accent);color:var(--white)}
.portfolio-section{padding:4rem 4rem 7rem}
.portfolio-grid{columns:3;gap:2px}
.portfolio-item{break-inside:avoid;margin-bottom:2px;position:relative;overflow:hidden;cursor:pointer;display:block;background:var(--ink-2);transition:opacity .4s,transform .4s}
.portfolio-item.hidden{display:none}
.portfolio-item-inner{position:relative;overflow:hidden}
.portfolio-item-inner:hover .pf-arrow{opacity:1;transform:scale(1) rotate(0deg)}
.pf-visual{width:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.pf-overlay-always{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,10,.85) 0%,transparent 55%);padding:1.75rem;display:flex;flex-direction:column;justify-content:flex-end}
.pf-tag{font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.pf-title{font-family:var(--font-display);font-size:1.1875rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:.4rem}
.portfolio-item.featured .pf-title{font-size:1.5rem}
.pf-result{font-size:.8125rem;color:rgba(250,250,248,.55);font-weight:300}
.pf-arrow{position:absolute;top:1.25rem;right:1.25rem;width:38px;height:38px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.7) rotate(-45deg);transition:opacity .3s,transform .3s}
.pf-stats{display:flex;gap:1.5rem;margin-bottom:1rem}
.pf-stat-num{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--white);letter-spacing:-.03em}
.pf-stat-label{font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(250,250,248,.4)}
.pf-pattern{position:absolute;inset:0;pointer-events:none;user-select:none}
.portfolio-item .pf-visual{min-height:280px}
.portfolio-item.featured .pf-visual{min-height:520px}
.pf-grad-1{background:linear-gradient(135deg,#1a0805 0%,#4a1a0a 40%,#1a0805 100%)}
.pf-grad-2{background:linear-gradient(135deg,#050d1a 0%,#0f2040 50%,#050d1a 100%)}
.pf-grad-3{background:linear-gradient(135deg,#0a0514 0%,#1e0a35 50%,#0a0514 100%)}
.pf-grad-4{background:linear-gradient(135deg,#041410 0%,#0a2e20 50%,#041410 100%)}
.pf-grad-5{background:linear-gradient(135deg,#141004 0%,#2e2408 50%,#141004 100%)}
.pf-grad-6{background:linear-gradient(135deg,#14040a 0%,#300b1a 50%,#14040a 100%)}
.pf-grad-7{background:linear-gradient(135deg,#060414 0%,#120930 50%,#060414 100%)}
.pf-grad-8{background:linear-gradient(135deg,#0e0a04 0%,#2a1e08 50%,#0e0a04 100%)}
.pf-grad-9{background:linear-gradient(135deg,#04100e 0%,#093022 50%,#04100e 100%)}
.section-divider{padding:0 4rem 2rem;display:flex;align-items:center;gap:1.5rem}
.divider-label{font-family:var(--font-display);font-size:.6875rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(250,250,248,.25);white-space:nowrap}
.divider-line{flex:1;height:1px;background:rgba(255,255,255,.06)}
.work-cta{margin:0 4rem 5rem;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:4rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;position:relative;overflow:hidden}
.work-cta-glow{position:absolute;inset:0;background:radial-gradient(ellipse 70% 100% at 0% 50%,rgba(255,77,46,.08) 0%,transparent 70%);pointer-events:none}
.work-cta-title{font-family:var(--font-display);font-size:2.25rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;position:relative}
.work-cta-title span{color:var(--accent)}
.work-cta-sub{font-size:.9375rem;color:rgba(250,250,248,.45);margin-top:.75rem;font-weight:300;position:relative;max-width:400px}

/* WP admin bar offset */
.admin-bar nav,.admin-bar #site-nav{top:32px}
.admin-bar .filter-bar{top:calc(72px + 32px)}

/* Responsive */
@media(max-width:1024px){.portfolio-grid{columns:2}}
@media(max-width:768px){
  nav,#site-nav{padding:1.25rem 1.5rem}
  .nav-links{display:none}
  .hero{padding:0 1.5rem 3rem}
  .hero-badge{display:none}
  .hero-sub{flex-direction:column;gap:2rem}
  .stats-section{grid-template-columns:1fr 1fr;padding:4rem 1.5rem}
  .services-section,.process-section,.work-section,.testimonials-section,.cta-section{padding:5rem 1.5rem}
  .services-grid{grid-template-columns:1fr}
  .process-steps{grid-template-columns:1fr 1fr}
  .step-line{display:none}
  .work-grid{grid-template-columns:1fr}
  .work-card:first-child{aspect-ratio:4/3}
  .testimonials-grid{grid-template-columns:1fr}
  .section-header{flex-direction:column;gap:1.5rem}
  footer,#site-footer{padding:3rem 1.5rem 2rem}
  .footer-top{flex-direction:column;gap:2.5rem}
  .footer-links{flex-wrap:wrap;gap:2rem}
  .footer-bottom{flex-direction:column;gap:1rem}
  .cta-btns{flex-direction:column;align-items:center}
  .page-hero{padding:8rem 1.5rem 3rem}
  .page-hero-content{flex-direction:column;align-items:flex-start}
  .filter-bar{padding:1.25rem 1.5rem;top:64px}
  .portfolio-section{padding:2rem 1.5rem 5rem}
  .portfolio-grid{columns:1}
  .section-divider{padding:0 1.5rem 1.5rem}
  .work-cta{margin:0 1.5rem 4rem;padding:2.5rem 2rem;flex-direction:column;align-items:flex-start}
}

/* ── Mobile Nav ──────────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10,10,15,.97);
  backdrop-filter: blur(20px);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}
.mobile-menu ul {
  list-style: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.mobile-menu ul a {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: rgba(250,250,248,.7);
  text-decoration: none;
  transition: color .2s;
}
.mobile-menu ul a:hover,
.mobile-menu ul a.nav-cta { color: var(--accent); }

@media (max-width: 768px) {
  .nav-hamburger { display: flex; }
  .nav-links { display: none !important; }
}

/* ── Single Portfolio page content styling ── */
.portfolio-content h2 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; margin: 2rem 0 1rem; }
.portfolio-content h3 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; margin: 1.5rem 0 .75rem; }
.portfolio-content p  { margin-bottom: 1.25rem; }
.portfolio-content ul, .portfolio-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.portfolio-content li { margin-bottom: .5rem; }
.portfolio-content blockquote { border-left: 3px solid var(--accent); padding-left: 1.5rem; margin: 2rem 0; font-style: italic; color: rgba(250,250,248,.6); }
.portfolio-content img { border-radius: 8px; margin: 1.5rem 0; }
.portfolio-content a { color: var(--accent); text-decoration: underline; }

/* ── Admin bar offset ── */
.admin-bar #site-nav,
.admin-bar nav { top: 32px; }
.admin-bar .filter-bar { top: calc(72px + 32px); }
@media screen and (max-width: 782px) {
  .admin-bar #site-nav,
  .admin-bar nav { top: 46px; }
}

/* ═══════════════════════════════════════════════════
   MOBILE OVERFLOW FIXES — prevents text clipping
   Targets: hero headline, stat numbers, CTA title,
   page-hero title, section titles
   ═══════════════════════════════════════════════════ */

/* Global safety net — nothing bleeds past viewport */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
* { min-width: 0; }

/* ── Hero headline ── */
.hero-headline {
  font-size: clamp(2.6rem, 11vw, 9rem);
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── CTA title ── */
.cta-title {
  font-size: clamp(2.2rem, 9vw, 6.5rem);
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── Section titles (services, process, work, etc.) ── */
.section-title {
  font-size: clamp(2rem, 7vw, 4rem);
  word-break: break-word;
}

/* ── Page hero title (portfolio page) ── */
.page-hero-title {
  font-size: clamp(2.6rem, 9vw, 7rem);
  word-break: break-word;
}

/* ── Stats bar numbers ── */
.stat-num {
  font-size: clamp(2rem, 7vw, 3.5rem);
}

/* ── Work CTA title ── */
.work-cta-title {
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  word-break: break-word;
}

@media (max-width: 480px) {
  /* Hero */
  .hero {
    padding: 0 1.25rem 3rem;
  }
  .hero-headline {
    font-size: clamp(2.4rem, 13vw, 4rem);
    letter-spacing: -.03em;
    line-height: .92;
  }
  .hero-eyebrow {
    font-size: .7rem;
    margin-bottom: 1.25rem;
  }
  .hero-desc {
    font-size: .9375rem;
  }
  .hero-sub {
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: .875rem;
    width: 100%;
  }
  .btn-primary {
    width: 100%;
    text-align: center;
  }

  /* Stats — single column on very small screens */
  .stats-section {
    grid-template-columns: 1fr 1fr;
    padding: 2.5rem 1.25rem;
    gap: 1px;
  }
  .stat-card {
    padding: 1.75rem 1rem;
  }
  .stat-num {
    font-size: clamp(1.75rem, 10vw, 2.5rem);
  }
  .stat-label {
    font-size: .6875rem;
  }

  /* Services */
  .services-section {
    padding: 4rem 1.25rem;
  }
  .service-card {
    padding: 1.75rem 1.25rem;
  }
  .service-name {
    font-size: 1.1875rem;
  }

  /* Process */
  .process-section {
    padding: 4rem 1.25rem;
  }
  .process-steps {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Work section */
  .work-section {
    padding: 4rem 1.25rem;
  }
  .work-title {
    font-size: 1.1875rem !important;
  }

  /* Testimonials */
  .testimonials-section {
    padding: 4rem 1.25rem;
  }
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* CTA section */
  .cta-section {
    padding: 5rem 1.25rem;
  }
  .cta-title {
    font-size: clamp(2rem, 12vw, 3rem);
    line-height: 1;
  }
  .cta-sub {
    font-size: .9375rem;
  }
  .cta-btns {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }
  .cta-btns .btn-primary,
  .cta-btns .btn-outline {
    width: 100%;
    text-align: center;
  }

  /* Section header */
  .section-header {
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
  }
  .section-title {
    font-size: clamp(1.875rem, 10vw, 2.5rem);
  }
  .section-desc {
    max-width: 100%;
  }

  /* Footer */
  #site-footer, footer {
    padding: 2.5rem 1.25rem 1.5rem;
  }
  .footer-top {
    flex-direction: column;
    gap: 2rem;
  }
  .footer-links {
    flex-direction: column;
    gap: 1.5rem;
  }
  .footer-bottom {
    flex-direction: column;
    gap: .75rem;
    text-align: center;
  }

  /* Portfolio page hero */
  .page-hero {
    padding: 7rem 1.25rem 2.5rem;
  }
  .page-hero-content {
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
  }
  .page-hero-title {
    font-size: clamp(2.25rem, 12vw, 3.5rem);
    line-height: .92;
  }
  .page-hero-right {
    max-width: 100%;
  }
  .project-count {
    font-size: 2.25rem;
  }

  /* Filter bar */
  .filter-bar {
    padding: 1rem 1.25rem;
    gap: .5rem;
    top: 60px;
  }
  .filter-btn {
    font-size: .75rem;
    padding: .4rem 1rem;
  }

  /* Portfolio grid */
  .portfolio-section {
    padding: 1.5rem 1.25rem 4rem;
  }
  .portfolio-grid {
    columns: 1;
    gap: 2px;
  }

  /* Work CTA strip */
  .work-cta {
    margin: 0 1.25rem 3rem;
    padding: 2rem 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .work-cta-title {
    font-size: clamp(1.375rem, 7vw, 1.75rem);
  }
  .work-cta .btn-primary {
    width: 100%;
    text-align: center;
  }

  /* Nav */
  #site-nav, nav {
    padding: 1rem 1.25rem;
  }

  /* Mobile menu text */
  .mobile-menu ul a {
    font-size: 1.625rem;
  }
}

/* ── Tablet (481px – 768px) tweaks ── */
@media (min-width: 481px) and (max-width: 768px) {
  .hero { padding: 0 1.5rem 3.5rem; }
  .hero-headline { font-size: clamp(2.8rem, 12vw, 5rem); }
  .cta-title { font-size: clamp(2.4rem, 10vw, 4rem); }
  .stats-section { padding: 3rem 1.5rem; }
  .stat-num { font-size: clamp(2rem, 8vw, 3rem); }
  .stat-card { padding: 2rem 1rem; }
  .services-section, .process-section, .work-section,
  .testimonials-section, .cta-section { padding: 4.5rem 1.5rem; }
  .page-hero-title { font-size: clamp(2.75rem, 11vw, 5rem); }
  .section-title { font-size: clamp(2.1rem, 8vw, 3.5rem); }
  .work-cta { margin: 0 1.5rem 4rem; }
}

/* ═══════════════════════════════════════════════
   MOBILE OVERFLOW FIXES
   Targets: stat numbers, hero headline, cta title
   ═══════════════════════════════════════════════ */

/* Global overflow guard */
body { overflow-x: hidden; }
* { min-width: 0; }

/* ── Stats bar ───────────────────────────────── */
/* Numbers like "340+" and "98%" were clipping because
   3.5rem is too wide for a 2-column 50% cell on small screens */
@media (max-width: 600px) {
  .stats-section {
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding: 3rem 0;
  }
  .stat-card {
    padding: 2rem 1rem;
  }
  .stat-num {
    font-size: clamp(2rem, 10vw, 3.5rem);
    word-break: break-all;
  }
}

@media (max-width: 400px) {
  .stats-section {
    grid-template-columns: 1fr 1fr;
  }
  .stat-num {
    font-size: clamp(1.75rem, 9vw, 2.5rem);
  }
}

/* ── Hero headline ───────────────────────────── */
/* "Dominate." was clipping off right edge on mobile */
.hero {
  overflow-x: hidden;
}
.hero-headline {
  /* Replace fixed clamp with a more aggressive mobile-first scale */
  font-size: clamp(3rem, 16vw, 9rem);
  word-break: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 480px) {
  .hero-headline {
    font-size: clamp(2.75rem, 14vw, 5rem);
    letter-spacing: -0.03em;
  }
  .hero {
    padding: 0 1.25rem 3rem;
  }
}

/* ── CTA section ─────────────────────────────── */
/* "Something Iconic." was clipping off the right side */
.cta-section {
  overflow: hidden;
  padding-left: max(1.5rem, 4vw);
  padding-right: max(1.5rem, 4vw);
}
.cta-title {
  font-size: clamp(2.25rem, 11vw, 6.5rem);
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 480px) {
  .cta-title {
    font-size: clamp(2rem, 10vw, 3.5rem);
    letter-spacing: -0.03em;
    line-height: 1.0;
  }
  .cta-section {
    padding: 5rem 1.25rem;
  }
  .cta-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .cta-btns .btn-primary,
  .cta-btns .btn-outline {
    text-align: center;
    width: 100%;
  }
}

/* ── Page-level overflow guard ───────────────── */
@media (max-width: 768px) {
  .hero-headline {
    max-width: 100%;
    overflow: visible;
  }
  .hero-sub {
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
  }
  .hero-desc {
    max-width: 100%;
  }
  /* Ensure nothing bleeds past viewport */
  section,
  .stats-section,
  .cta-section,
  .services-section,
  .process-section,
  .work-section,
  .testimonials-section {
    max-width: 100vw;
    overflow-x: hidden;
  }
}