html { scroll-behavior: smooth; }

/*
Theme Name:  Billy Pridgen — Creative Director
Theme URI:   https://liteworkdesigns.com
Author:      Billy Pridgen
Author URI:  https://liteworkdesigns.com
Description: Custom Creative Director portfolio theme built on Bootstrap 5 with a full visual admin editor. Dark, cinematic, campaign-first design.
Version:     3.8.0
License:     GNU General Public License v2 or later
Text Domain: billy-pridgen
*/

/* ── TOKENS ─────────────────────────────────────────── */
:root{--bg:#070707;--surface:#0f0f0f;--surface2:#161616;--text:#ede9e0;--muted:#6b6760;--accent:#c9a96e;--accent2:#8a6a3a;--border:#1e1e1e;}

/* ── BASE ────────────────────────────────────────────── */
html{scroll-behavior:smooth;}
body{font-family:'DM Mono',monospace;font-weight:300;font-size:14px;line-height:1.6;background:#070707;background:var(--bg);color:#ede9e0;color:var(--text);overflow-x:hidden;cursor:crosshair;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent);color:var(--bg);}
.text-accent{color:var(--accent)!important;}.text-muted{color:var(--muted)!important;}.bg-surface{background:var(--surface)!important;}
.font-display{font-family:'Bebas Neue',sans-serif;}.font-serif{font-family:'Cormorant Garamond',serif;}

/* ── CURSOR ──────────────────────────────────────────── */
#cursor{width:6px;height:6px;background:var(--accent);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);}
#cursor-ring{width:32px;height:32px;border:1px solid rgba(201,169,110,.32);border-radius:50%;position:fixed;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s;}
body.hovering #cursor-ring{width:54px;height:54px;border-color:var(--accent);}

/* ── NAVBAR ──────────────────────────────────────────── */
#mainNav{background:linear-gradient(to bottom,rgba(7,7,7,.97) 0%,transparent 100%);padding:18px 0;transition:background .4s,border-color .4s;border-bottom:1px solid transparent;}
#mainNav.scrolled{background:rgba(7,7,7,.97)!important;border-bottom-color:var(--border)!important;}
.navbar-brand{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--accent)!important;font-weight:400;}
.navbar-nav .nav-link{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)!important;padding:6px 14px!important;transition:color .25s;}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus{color:var(--text)!important;}
.navbar-collapse{background:rgba(7,7,7,.97);padding:8px 16px 16px;}
@media(min-width:992px){.navbar-collapse{background:transparent;padding:0;}}
.avail-badge{display:inline-flex;align-items:center;gap:7px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#3dba6a;border:1px solid rgba(61,186,106,.3);padding:5px 12px;border-radius:100px;white-space:nowrap;}
.avail-dot{width:6px;height:6px;background:#3dba6a;border-radius:50%;animation:pulse 2s ease infinite;flex-shrink:0;}

/* ── HERO ────────────────────────────────────────────── */
#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 48px 64px;position:relative;overflow:hidden;}
@media(max-width:768px){#hero{padding:0 24px 48px;}}
.hero-ambient{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 80% 30%,rgba(201,169,110,.07) 0%,transparent 70%),radial-gradient(ellipse 40% 60% at 10% 80%,rgba(184,64,64,.05) 0%,transparent 60%);pointer-events:none;}
.hero-rule{width:1px;height:100px;background:var(--accent);margin-bottom:36px;opacity:0;animation:fadeUp .9s ease .1s forwards;}
.hero-kicker{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;opacity:0;animation:fadeUp .9s ease .3s forwards;}
.hero-name{font-family:'Bebas Neue',sans-serif;font-size:clamp(68px,12vw,155px);line-height:.92;letter-spacing:.02em;color:var(--text);opacity:0;animation:fadeUp .9s ease .45s forwards;}
.hero-name .outline{color:transparent;-webkit-text-stroke:1px rgba(237,233,224,.22);}
.hero-footer{opacity:0;animation:fadeUp .9s ease .75s forwards;}
.hero-descriptor{font-family:'Cormorant Garamond',serif;font-size:clamp(16px,2vw,21px);font-style:italic;color:var(--muted);line-height:1.55;}
.hero-stat-num{font-family:'Bebas Neue',sans-serif;font-size:42px;color:var(--accent);line-height:1;display:block;}
.hero-stat-label{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}
.hero-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}
.btn-hero-primary{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--bg);background:var(--accent);border:1px solid var(--accent);padding:12px 28px;transition:background .25s,color .25s;border-radius:1px;display:inline-block;}
.btn-hero-primary:hover{background:transparent;color:var(--accent);}
.btn-hero-secondary{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--border);padding:12px 28px;transition:border-color .25s,color .25s;border-radius:1px;display:inline-block;}
.btn-hero-secondary:hover{border-color:var(--muted);color:var(--text);}
.hero-scroll-tag{position:absolute;bottom:60px;right:48px;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);writing-mode:vertical-rl;display:flex;align-items:center;gap:10px;}
.hero-scroll-tag::after{content:'';width:1px;height:54px;background:var(--muted);}

/* ── MARQUEE ─────────────────────────────────────────── */
.marquee-bar{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0;overflow:hidden;white-space:nowrap;}
.marquee-track{display:inline-block;animation:marquee 28s linear infinite;}
.marquee-track span{font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:.3em;color:var(--muted);padding:0 32px;}
.marquee-track span.mk{color:var(--accent);}

/* ── SECTION LABEL ───────────────────────────────────── */
.section-label{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--accent);margin-bottom:52px;}
.section-label::before{content:'';width:28px;height:1px;background:var(--accent);flex-shrink:0;}
.section-divider{border:none;border-top:1px solid var(--border);margin:0;}

/* ── SERVICES ────────────────────────────────────────── */
#services{background:var(--surface);border-bottom:1px solid var(--border);}
.service-card{padding:48px 36px;border-right:1px solid var(--border);height:100%;transition:background .3s;position:relative;overflow:hidden;}
.service-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s ease;}
.service-card:hover{background:var(--surface2);}.service-card:hover::after{transform:scaleX(1);}
.service-card:last-child{border-right:none;}
@media(max-width:991px){.service-card{border-right:none;border-bottom:1px solid var(--border);}.service-card:last-child{border-bottom:none;}}
.service-num{font-family:'Bebas Neue',sans-serif;font-size:48px;color:rgba(201,169,110,.12);line-height:1;margin-bottom:20px;}
.service-icon{font-size:26px;color:var(--accent);margin-bottom:18px;}
.service-title{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:300;color:var(--text);margin-bottom:14px;}
.service-list{list-style:none;padding:0;margin:0;}
.service-list li{font-size:11px;letter-spacing:.06em;color:var(--muted);padding:5px 0;border-bottom:1px solid rgba(30,30,30,.6);display:flex;align-items:center;gap:10px;}
.service-list li::before{content:'—';color:var(--accent2);flex-shrink:0;}
.service-list li:last-child{border-bottom:none;}

/* ── PROJECT CARDS ───────────────────────────────────── */
.project-card{position:relative;overflow:hidden;cursor:pointer;}
.project-card .card-bg{position:absolute;inset:0;transition:transform .85s cubic-bezier(.25,.46,.45,.94);}
.project-card:hover .card-bg{transform:scale(1.06);}
.card-gradient{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,7,7,.96) 0%,rgba(7,7,7,.38) 50%,rgba(7,7,7,.08) 100%);z-index:1;}
.card-body-inner{position:absolute;bottom:0;left:0;right:0;padding:28px;z-index:2;transform:translateY(6px);transition:transform .35s ease;}
.project-card:hover .card-body-inner{transform:translateY(0);}
.card-tags-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.card-tag{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent2);padding:3px 9px;border-radius:1px;}
.card-year-tag{font-size:9px;letter-spacing:.18em;color:var(--muted);margin-bottom:4px;}
.card-title-text{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(22px,2.8vw,36px);line-height:1.1;color:var(--text);margin-bottom:8px;}
.card-brief{font-size:11px;color:var(--muted);line-height:1.65;opacity:0;transform:translateY(8px);transition:opacity .35s ease .08s,transform .35s ease .08s;}
.project-card:hover .card-brief{opacity:1;transform:translateY(0);}
.card-deco{position:absolute;top:24px;left:24px;font-family:'Bebas Neue',sans-serif;font-size:clamp(56px,8vw,90px);color:rgba(237,233,224,.04);line-height:1;z-index:1;pointer-events:none;}
.card-arrow-box{position:absolute;top:24px;right:24px;z-index:2;width:36px;height:36px;border:1px solid rgba(201,169,110,.28);display:flex;align-items:center;justify-content:center;opacity:0;transform:translate(6px,-6px);transition:opacity .28s,transform .28s;}
.project-card:hover .card-arrow-box{opacity:1;transform:translate(0,0);}
.card-h-portrait{height:520px;}.card-h-landscape{height:320px;}.card-h-wide{height:360px;}
@media(max-width:768px){.card-h-portrait,.card-h-landscape,.card-h-wide{height:280px;}}
.bg-chosen{background:radial-gradient(ellipse at 30% 60%,rgba(184,64,64,.3) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(201,169,110,.14) 0%,transparent 50%),#0d0808;}
.bg-dow{background:radial-gradient(ellipse at 70% 40%,rgba(40,60,80,.8) 0%,transparent 70%),repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,.01) 3px,rgba(255,255,255,.01) 4px),#080c10;}
.bg-identity{background:conic-gradient(from 180deg at 50% 50%,#0a0a0a 0deg,#141410 90deg,#0a0a0a 180deg,#0e0d09 270deg,#0a0a0a 360deg);}
.bg-motion{background:radial-gradient(ellipse at 20% 80%,rgba(80,40,120,.25) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(201,169,110,.1) 0%,transparent 40%),#08080d;}
.bg-storefront{background:repeating-linear-gradient(45deg,#0e0e0e,#0e0e0e 10px,#101010 10px,#101010 20px);}
.bg-energy{background:radial-gradient(ellipse at 50% 50%,rgba(60,120,200,.12) 0%,transparent 70%),#070a0e;}

/* ── PROCESS ─────────────────────────────────────────── */
#process{border-top:1px solid var(--border);}
.process-step{padding:48px 0;border-bottom:1px solid var(--border);display:grid;grid-template-columns:80px 1fr 2fr;gap:40px;align-items:start;transition:background .3s;}
.process-step:last-child{border-bottom:none;}.process-step:hover{background:rgba(201,169,110,.02);}
@media(max-width:768px){.process-step{grid-template-columns:60px 1fr;}.process-step-body{grid-column:2;}}
.process-num{font-family:'Bebas Neue',sans-serif;font-size:56px;color:rgba(201,169,110,.15);line-height:1;}
.process-title{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:var(--text);padding-top:8px;}
.process-body{font-size:12px;color:var(--muted);line-height:1.85;padding-top:12px;}
.process-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.process-tag{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);padding:4px 10px;}

/* ── CASE STUDIES ────────────────────────────────────── */
#casestudies{border-top:1px solid var(--border);background:var(--surface);}
.case-accordion .accordion-item{background:transparent;border:none;border-bottom:1px solid var(--border);}
.case-accordion .accordion-item:first-child{border-top:1px solid var(--border);}
.case-accordion .accordion-button{background:transparent;color:var(--text);font-family:'DM Mono',monospace;font-size:12px;font-weight:300;letter-spacing:.05em;padding:32px 0;box-shadow:none;border-radius:0!important;display:grid;grid-template-columns:60px 1fr auto auto;gap:24px;align-items:center;}
.case-accordion .accordion-button:not(.collapsed){color:var(--accent);background:transparent;}
.case-accordion .accordion-button::after{content:'';width:20px;height:1px;background:var(--muted);transition:width .3s,background .3s;flex-shrink:0;background-image:none!important;filter:none!important;}
.case-accordion .accordion-button:not(.collapsed)::after{width:28px;background:var(--accent);}
.case-num{font-family:'Bebas Neue',sans-serif;font-size:40px;color:rgba(201,169,110,.2);line-height:1;}
.case-btn-title{font-family:'Cormorant Garamond',serif;font-size:clamp(20px,2.5vw,30px);font-weight:300;}
.case-btn-type{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.case-accordion .accordion-body{padding:0 0 40px 84px;}
@media(max-width:767px){.case-accordion .accordion-button{grid-template-columns:48px 1fr;gap:16px;}.case-btn-type,.case-accordion .accordion-button::after{display:none;}.case-accordion .accordion-body{padding:0 0 32px 0;}}
.case-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;}
@media(max-width:991px){.case-grid{grid-template-columns:1fr;gap:0;}}
.case-col{padding:28px 24px;border-right:1px solid var(--border);}.case-col:last-child{border-right:none;}
@media(max-width:991px){.case-col{border-right:none;border-bottom:1px solid var(--border);}.case-col:last-child{border-bottom:none;}}
.case-col-label{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:block;}
.case-col-text{font-size:12px;color:var(--muted);line-height:1.85;}
.case-outcome-num{font-family:'Bebas Neue',sans-serif;font-size:44px;color:var(--accent);line-height:1;display:block;}
.case-outcome-label{font-size:11px;color:var(--muted);}

/* ── CLIENTS ─────────────────────────────────────────── */
#clients{border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.client-row{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--border);}.client-row:last-child{border-bottom:none;}
.client-cell{flex:1;min-width:200px;padding:36px 40px;border-right:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;transition:background .25s;}
.client-cell:last-child{border-right:none;}.client-cell:hover{background:var(--surface2);}
.client-name{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--text);text-align:center;}
.client-role{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:center;}

/* ── REEL ────────────────────────────────────────────── */
#reel{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.reel-headline{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(34px,5vw,60px);line-height:1.12;}
.reel-headline em{font-style:italic;color:var(--accent);}
.reel-cta{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--accent2);padding-bottom:3px;transition:gap .3s;}
.reel-cta:hover{gap:20px;color:var(--accent);}
.reel-frame{aspect-ratio:16/9;background:var(--bg);border:1px solid var(--border);position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;}
.reel-frame::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 40% 40%,rgba(184,64,64,.14) 0%,transparent 60%),radial-gradient(ellipse at 70% 70%,rgba(201,169,110,.08) 0%,transparent 50%);}
.play-circle{width:70px;height:70px;border:1px solid rgba(201,169,110,.45);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:transform .3s,border-color .3s;}
.reel-frame:hover .play-circle{transform:scale(1.1);border-color:var(--accent);}
.play-circle .bi{font-size:22px;color:var(--accent);margin-left:3px;}
.reel-caption{position:absolute;bottom:16px;left:20px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);z-index:1;}

/* ── CREDENTIALS ─────────────────────────────────────── */
#credentials{border-top:1px solid var(--border);}
.cred-block{padding:64px 48px;border-right:1px solid var(--border);}.cred-block:last-child{border-right:none;}
@media(max-width:991px){.cred-block{border-right:none;border-bottom:1px solid var(--border);padding:40px 24px;}}
.cred-num{font-family:'Bebas Neue',sans-serif;font-size:66px;color:var(--accent);line-height:1;}
.cred-label{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;display:block;}

/* ── TESTIMONIALS ────────────────────────────────────── */
#testimonials{border-top:1px solid var(--border);background:var(--surface);}
.testimonial-item{padding:20px 60px;}
@media(max-width:767px){.testimonial-item{padding:20px 16px;}}
.testimonial-quote{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:clamp(20px,3vw,32px);line-height:1.4;color:var(--text);margin-bottom:28px;position:relative;}
.testimonial-quote::before{content:'\201C';font-size:80px;line-height:1;color:rgba(201,169,110,.15);font-family:'Cormorant Garamond',serif;position:absolute;top:-10px;left:-40px;}
@media(max-width:767px){.testimonial-quote::before{display:none;}}
.testimonial-name{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text);display:block;margin-bottom:4px;}
.testimonial-role{font-size:10px;color:var(--muted);letter-spacing:.1em;}
.carousel-controls{display:flex;gap:12px;justify-content:center;margin-top:40px;}
.carousel-btn{width:40px;height:40px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .25s,color .25s;}
.carousel-btn:hover{border-color:var(--accent);color:var(--accent);}

/* ── PHILOSOPHY ──────────────────────────────────────── */
#philosophy{border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center;}
.phil-quote{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:clamp(26px,4vw,50px);line-height:1.3;color:var(--text);max-width:880px;margin:0 auto 20px;}
.phil-attr{font-size:10px;letter-spacing:.38em;text-transform:uppercase;color:var(--accent);}

/* ── ABOUT ───────────────────────────────────────────── */
.about-name{font-family:'Bebas Neue',sans-serif;font-size:54px;line-height:1;color:var(--text);}
.about-title-tag{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:28px;}
.about-pull{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:clamp(22px,3vw,34px);line-height:1.3;border-bottom:1px solid var(--border);padding-bottom:40px;margin-bottom:32px;}
.about-pull em{color:var(--accent);font-style:normal;}
.about-link-item{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;transition:color .25s;padding:4px 0;}
.about-link-item::before{content:'';width:18px;height:1px;background:currentColor;}
.about-link-item:hover{color:var(--text);}
.skill-pill{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);padding:7px 14px;transition:border-color .25s,color .25s;display:inline-block;margin:4px 4px 0 0;border-radius:1px;}
.skill-pill:hover{border-color:var(--accent);color:var(--accent);}
.resume-cta{display:inline-flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--bg);background:var(--accent);border:1px solid var(--accent);padding:13px 28px;transition:background .25s,color .25s;border-radius:1px;margin-top:32px;}
.resume-cta:hover{background:transparent;color:var(--accent);}

/* ── CONTACT ─────────────────────────────────────────── */
#contact{border-top:1px solid var(--border);}
.contact-headline{font-family:'Bebas Neue',sans-serif;font-size:clamp(60px,9vw,120px);line-height:.92;color:var(--text);}
.contact-headline span{color:var(--accent);}
.form-group{margin-bottom:20px;}
.form-field{width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--text);font-family:'DM Mono',monospace;font-size:13px;font-weight:300;letter-spacing:.05em;padding:14px 0;outline:none;transition:border-color .3s;}
.form-field:focus{border-bottom-color:var(--accent);}
.form-field::placeholder{color:var(--muted);}
select.form-field option{background:var(--surface2);color:var(--text);}
.form-label{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media(max-width:767px){.form-row{grid-template-columns:1fr;}}
.btn-submit{width:100%;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--bg);background:var(--accent);border:1px solid var(--accent);padding:16px;cursor:pointer;transition:background .25s,color .25s;font-family:'DM Mono',monospace;border-radius:0;margin-top:8px;}
.btn-submit:hover{background:transparent;color:var(--accent);}
.form-note{font-size:10px;color:var(--muted);margin-top:12px;line-height:1.6;}
.form-success{display:none;padding:20px;border:1px solid rgba(61,186,106,.3);color:#3dba6a;font-size:12px;letter-spacing:.05em;text-align:center;margin-top:16px;}
.contact-info-item{padding:24px 0;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:20px;}
.contact-info-item:last-child{border-bottom:none;}
.contact-info-icon{font-size:18px;color:var(--accent);flex-shrink:0;margin-top:2px;}
.contact-info-label{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px;}
.contact-info-value{font-size:13px;color:var(--text);}
.contact-info-value a{color:var(--accent);}

/* ── FOOTER ──────────────────────────────────────────── */
#siteFooter{border-top:1px solid var(--border);padding:22px 0;}
.footer-text{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.footer-avail{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#3dba6a;}
.footer-avail::before{content:'';width:6px;height:6px;background:#3dba6a;border-radius:50%;flex-shrink:0;}

/* ── REVEAL ──────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ── KEYFRAMES ───────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}

/* ═══════════════════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════════════════ */

/* ── OVERLAY ──────────────────────────────────────── */
#lwb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
#lwb-lightbox.open {
  opacity: 1;
  pointer-events: all;
}
.lwb-lb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7,7,7,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

/* ── WRAPPER ──────────────────────────────────────── */
.lwb-lb-wrap {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
}

/* ── HEADER ───────────────────────────────────────── */
.lwb-lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  flex-shrink: 0;
}
.lwb-lb-title {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #c9a96e;
}
.lwb-lb-counter {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #6b6760;
  letter-spacing: .1em;
}
.lwb-lb-close {
  background: none;
  border: 1px solid #2a2a2a;
  color: #6b6760;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all .2s;
  border-radius: 2px;
  flex-shrink: 0;
  margin-left: 16px;
}
.lwb-lb-close:hover { border-color: #ede9e0; color: #ede9e0; }

/* ── STAGE — fixed height so content is always visible */
.lwb-lb-stage {
  position: relative;
  background: #000;
  border: 1px solid #1e1e1e;
  flex-shrink: 0;
  overflow: hidden;
}

/* ── MEDIA CONTAINER ──────────────────────────────── */
.lwb-lb-media {
  width: 100%;
  display: block;
  background: #000;
  text-align: center;
  min-height: 200px;
}

/* ── IMAGE — natural dimensions, capped at viewport ── */
.lwb-lb-media img {
  max-width: 100%;
  max-height: 75vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── VIDEO WRAP — padding-bottom ratio trick ──────── */
/* This is the ONLY reliable cross-browser method.     */
/* position:relative + padding-bottom % defines height */
/* position:absolute iframe fills 100% of parent       */
.lwb-lb-video-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  background: #000;
}
.lwb-lb-video-wrap iframe,
.lwb-lb-video-wrap video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── ARROWS ───────────────────────────────────────── */
.lwb-lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(7,7,7,.85);
  border: 1px solid #2a2a2a;
  color: #ede9e0;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: all .2s;
  z-index: 10;
  border-radius: 2px;
}
.lwb-lb-arrow:hover { border-color: #c9a96e; color: #c9a96e; }
.lwb-lb-arrow.prev { left: 12px; }
.lwb-lb-arrow.next { right: 12px; }
.lwb-lb-arrow.hidden { opacity: 0; pointer-events: none; }

/* ── SPINNER ──────────────────────────────────────── */
.lwb-lb-spinner {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  color: #c9a96e;
  font-size: 28px;
  background: #000;
  z-index: 5;
  display: none;
}
.lwb-lb-spinner.show { display: flex; }

/* ── THUMBNAILS ───────────────────────────────────── */
.lwb-lb-thumbs {
  display: flex;
  gap: 6px;
  padding: 10px 0 0;
  overflow-x: auto;
  flex-shrink: 0;
}
.lwb-lb-thumbs::-webkit-scrollbar { height: 3px; }
.lwb-lb-thumbs::-webkit-scrollbar-thumb { background: #2a2a2a; }

.lwb-lb-thumb {
  width: 64px; height: 48px;
  flex-shrink: 0;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  background: #1a1a1a;
  transition: border-color .2s;
  border-radius: 1px;
}
.lwb-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lwb-lb-thumb.video-thumb {
  display: flex; align-items: center; justify-content: center;
  color: #c9a96e; font-size: 18px;
  border-color: #2a2a2a;
}
.lwb-lb-thumb:hover,
.lwb-lb-thumb.active { border-color: #c9a96e; }

/* ── CAPTION ──────────────────────────────────────── */
.lwb-lb-caption {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: #4a4845;
  letter-spacing: .1em;
  text-align: center;
  padding-top: 10px;
  flex-shrink: 0;
}
.lwb-lb-keyhint {
  position: absolute;
  bottom: 10px; right: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: #2a2a2a;
  z-index: 3;
  pointer-events: none;
}

/* ── CARD / REEL CURSOR ───────────────────────────── */
.project-card { cursor: pointer; }
.reel-lb-trigger { cursor: pointer; }
.reel-lb-trigger:hover .play-circle {
  transform: scale(1.1);
  border-color: var(--accent, #c9a96e);
}

/* ── MOBILE ───────────────────────────────────────── */
@media (max-width: 768px) {
  .lwb-lb-wrap { width: 96vw; }
  .lwb-lb-arrow { width: 36px; height: 36px; font-size: 16px; }
  .lwb-lb-arrow.prev { left: 4px; }
  .lwb-lb-arrow.next { right: 4px; }
  .lwb-lb-thumbs { display: none; }
}

/* ═══════════════════════════════════════════════════════
   HERO — VIDEO BACKGROUND + VIGNETTE
   (Film grain is canvas-based in front-page.php JS)
═══════════════════════════════════════════════════════ */

/* Background video */
#hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: heroVideoFadeIn 2.5s ease 0.5s forwards;
}

@keyframes heroVideoFadeIn {
  from { opacity: 0; }
  to   { opacity: 0.22; }
}

/* Dark overlay — preserves text legibility over video */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(7,7,7,0.6) 0%,
    rgba(7,7,7,0.4) 50%,
    rgba(7,7,7,0.65) 100%
  );
}

/* Vignette — dark edges, bright centre. Cinematic depth. */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 75% at 50% 50%,
    transparent  35%,
    rgba(7,7,7,0.3) 65%,
    rgba(7,7,7,0.8) 100%
  );
}

/* Canvas grain (added by JS) sits at z-index:6 */
/* Hero text and content sit at z-index:5 via existing .hero-rule etc */

/* Push all native hero children above overlays */
#hero > .hero-rule,
#hero > .hero-kicker,
#hero > .hero-name,
#hero > .hero-footer,
#hero > .hero-scroll-tag {
  position: relative;
  z-index: 10; /* above grain canvas (6), vignette (3), overlay (1) */
}

/* Buttons inside hero must be clickable */
.btn-hero-primary,
.btn-hero-secondary {
  position: relative;
  z-index: 10;
  cursor: pointer;
}

.hero-ambient { z-index: 1; }

/* ═══════════════════════════════════════════════════════
   PROJECT CARD REVEAL ANIMATIONS
   Clip-path cinema curtain reveals — each card wipes
   into view on scroll. Staggered, choreographed, decisive.
═══════════════════════════════════════════════════════ */

/* ── PRE-REVEAL STATE ────────────────────────────────
   Cards start fully clipped — invisible but holding space.
   The clip-path is the only thing hiding them so layout
   never shifts. */

.project-card {
  clip-path: inset(0 0 100% 0); /* bottom-clip: card wipes upward */
  transition: clip-path 0s; /* no transition until .card-in fires */
}

/* Wide card (card 4) enters left → right */
.card-h-wide {
  clip-path: inset(0 100% 0 0);
}

/* Card internal elements hidden before card reveals */
.project-card .card-deco {
  opacity: 0;
  transform: scale(1.35);
  transition: none;
}

.project-card .card-body-inner {
  opacity: 0;
  transform: translateY(22px);
  /* override hover transition until revealed */
  transition: none;
}

.project-card .card-brief {
  opacity: 0;
  transform: translateY(8px);
  transition: none;
}

/* ── REVEALED STATE ──────────────────────────────────
   JS adds .card-in to each card with a staggered delay.
   Expo-out curve (0.16, 1, 0.3, 1) = fast start,
   confident glide to rest. Used by Vercel, Linear, etc. */

.project-card.card-in {
  clip-path: inset(0 0 0 0) !important;
  transition:
    clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--card-delay, 0ms);
}

/* Card number stamps in — scale bounce (overshoot easing) */
.project-card.card-in .card-deco {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity   0.4s ease                                    calc(var(--card-delay, 0ms) + 500ms),
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)      calc(var(--card-delay, 0ms) + 500ms);
}

/* Card content slides up after card reveals */
.project-card.card-in .card-body-inner {
  opacity: 1;
  transform: translateY(6px); /* restore hover base position */
  transition:
    opacity   0.55s ease calc(var(--card-delay, 0ms) + 650ms),
    transform 0.55s ease calc(var(--card-delay, 0ms) + 650ms);
}

/* On hover AFTER reveal — restore normal hover behaviour */
.project-card.card-in:hover .card-body-inner {
  transform: translateY(0);
}

/* Card brief restores after reveal */
.project-card.card-in .card-brief {
  /* Returns to the normal state where hover controls opacity */
  transition:
    opacity   0.35s ease 0.08s,
    transform 0.35s ease 0.08s;
}
.project-card.card-in:hover .card-brief {
  opacity: 1;
  transform: translateY(0);
}

/* Tags row fades in */
.project-card .card-tags-row {
  opacity: 0;
  transform: translateY(6px);
  transition: none;
}
.project-card.card-in .card-tags-row {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity   0.5s ease calc(var(--card-delay, 0ms) + 720ms),
    transform 0.5s ease calc(var(--card-delay, 0ms) + 720ms);
}

/* Year tag */
.project-card .card-year-tag {
  opacity: 0;
  transition: none;
}
.project-card.card-in .card-year-tag {
  opacity: 1;
  transition: opacity 0.5s ease calc(var(--card-delay, 0ms) + 760ms);
}

/* Arrow box reveals after card lands */
.project-card .card-arrow-box {
  transition:
    opacity  0.3s ease,
    transform 0.3s ease;
}

/* Section label wipes in left → right */
#work .section-label {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
#work .section-label.card-in {
  clip-path: inset(0 0 0 0);
}

/* ── REDUCED MOTION ──────────────────────────────────
   Respect user accessibility preference */
@media (prefers-reduced-motion: reduce) {
  .project-card,
  .card-h-wide,
  #work .section-label {
    clip-path: inset(0 0 0 0) !important;
    transition: none !important;
  }
  .project-card .card-deco,
  .project-card .card-body-inner,
  .project-card .card-tags-row,
  .project-card .card-year-tag {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   STATS COUNTER — landing flash
   When the counter finishes it briefly brightens to pure
   gold, then fades back. Subtle confirmation it landed.
═══════════════════════════════════════════════════════ */
.hero-stat-num,
.cred-num {
  transition: color 0.4s ease;
}

/* JS adds this class when the counter reaches its target */
.stat-landed {
  animation: statLand 0.6s ease forwards;
}

@keyframes statLand {
  0%   { color: #c9a96e; }       /* accent gold — normal */
  35%  { color: #e8c98a; }       /* brighter gold flash */
  100% { color: #c9a96e; }       /* back to normal */
}

.cred-num.stat-landed {
  animation: statLand 0.6s ease forwards;
}

/* ═══════════════════════════════════════════════════════
   JUSTIFIED PHOTO GALLERY
═══════════════════════════════════════════════════════ */

#photo-gallery {
  border-top: 1px solid var(--border);
  padding: 80px 0 0;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* Header */
.pg-header {
  padding: 0 48px 48px;
}

.pg-heading-row {
  display: flex;
  align-items: baseline;
  gap: 32px;
  flex-wrap: wrap;
}

.pg-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  color: var(--text);
  letter-spacing: .02em;
}

.pg-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 18px);
  color: var(--muted);
  max-width: 500px;
  line-height: 1.6;
}

/* Grid container — flush edge to edge, no side padding */
.pg-grid {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s ease;
  /* NO gap here — JS controls all spacing via exact cell widths */
  gap: 0;
}
.pg-grid.pg-ready {
  opacity: 1;
}

/* Individual item — hard-constrained BEFORE JS runs.
   Default 200x200 box prevents unloaded/unsized images
   from blowing up the page layout at natural file size. */
.pg-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #111;
  flex: none;

  /* Default size — JS overwrites with exact values */
  width: 200px;
  height: 200px;
}

.pg-item img {
  /* Fill the JS-sized cell exactly. object-fit:cover
     handles any slight crop when height is capped. */
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  user-select: none;
  -webkit-user-drag: none;
}

/* Hover: image scale + gold overlay */
.pg-item:hover img {
  transform: scale(1.04);
}

.pg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7,7,7,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.pg-overlay i {
  font-size: 22px;
  color: #c9a96e;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.pg-item:hover .pg-overlay {
  background: rgba(7,7,7,0.45);
}

.pg-item:hover .pg-overlay i {
  opacity: 1;
  transform: scale(1);
}

/* Loading skeleton — covers the image while it loads.
   img is absolute so skeleton sits in the same 200x200 box. */
.pg-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #111;
  z-index: 2;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.pg-item.img-loaded::before {
  opacity: 0;
}

@media (max-width: 768px) {
  .pg-header { padding: 0 24px 32px; }
}

/* ═══════════════════════════════════════════════════════
   SCROLL PROGRESS BAR — thin gold line at top
═══════════════════════════════════════════════════════ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 2px;
  background: #c9a96e;
  z-index: 999998;
  transition: width 0.05s linear;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   SCROLL TO TOP BUTTON
═══════════════════════════════════════════════════════ */
#scrollToTop {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  color: #6b6760;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 9990;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, border-color .2s, color .2s;
  pointer-events: none;
}
#scrollToTop.stt-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
#scrollToTop:hover {
  border-color: #c9a96e;
  color: #c9a96e;
}

/* ═══════════════════════════════════════════════════════
   NAV SCROLL-SPY — active state as sections scroll past
═══════════════════════════════════════════════════════ */
.nav-link.spy-active {
  color: #c9a96e !important;
}
.nav-link.spy-active::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #c9a96e;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════
   MOBILE FIXES
═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Hero name — prevent overflow on very small screens */
  .hero-name {
    font-size: clamp(52px, 18vw, 120px) !important;
  }
  /* Hero stats — stack vertically */
  .hero-footer {
    flex-direction: column !important;
    gap: 24px !important;
    align-items: flex-start !important;
  }
  .hero-stats {
    gap: 24px !important;
  }
  /* Gallery — smaller target height handled in JS already */
  .pg-header { padding: 0 16px 24px !important; }
  /* Section padding tighter */
  section, .py-5 { padding-top: 48px !important; padding-bottom: 48px !important; }
}

@media (max-width: 768px) {
  /* Scroll to top — move above mobile nav bar */
  #scrollToTop { bottom: 24px; right: 16px; }
  /* Process steps — single column */
  .process-steps { gap: 0 !important; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE NAV — dark background, Bootstrap-compatible
   Does NOT override display — lets Bootstrap manage open/close
═══════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  #navMenu.collapse.show,
  #navMenu.collapsing {
    background: rgba(7,7,7,.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 16px 0 24px;
  }
  #navMenu .nav-link {
    font-size: 13px;
    letter-spacing: .2em;
    color: #ede9e0 !important;
    padding: 12px 24px !important;
    text-align: center;
    border-bottom: 1px solid #1a1a1a;
  }
  #navMenu .nav-link:hover,
  #navMenu .nav-link.spy-active {
    color: #c9a96e !important;
    background: rgba(201,169,110,.05);
  }
}

/* ═══════════════════════════════════════════════════════
   PROCESS SECTION — visual timeline upgrade
═══════════════════════════════════════════════════════ */
.process-step {
  position: relative;
}
/* Connecting line between steps */
.process-steps-inner {
  position: relative;
}
.process-steps-inner::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 60px;
  bottom: 60px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, #c9a96e 20%, #c9a96e 80%, transparent);
  opacity: 0.2;
}
@media (min-width: 992px) {
  .process-steps-inner::before {
    display: none; /* horizontal layout on desktop */
  }
}
/* Step number — gold circle */
.process-step-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: #c9a96e;
  line-height: 1;
  opacity: .15;
  position: absolute;
  top: -8px;
  left: 0;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════
   CASE STUDY SINGLE PAGE
═══════════════════════════════════════════════════════ */
.cs-page { background: var(--bg); color: var(--text); min-height: 100vh; }

/* Hero */
.cs-hero {
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 48px 48px;
  background: #0a0a0a;
  background-size: cover;
  background-position: center;
  position: relative;
}
.cs-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(7,7,7,.3) 0%, rgba(7,7,7,.8) 100%);
}
.cs-hero-content { position: relative; z-index: 1; max-width: 800px; }
.cs-back-link {
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: #c9a96e; text-decoration: none;
  display: inline-block; margin-bottom: 24px;
}
.cs-back-link:hover { color: #ede9e0; }
.cs-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cs-tag {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .25em;
  text-transform: uppercase; padding: 4px 12px;
  border: 1px solid rgba(201,169,110,.4); color: #c9a96e;
}
.cs-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1; letter-spacing: .02em;
  color: var(--text); margin: 0 0 20px;
}
.cs-hero-meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-family: 'DM Mono', monospace; font-size: 11px;
  color: var(--muted); letter-spacing: .1em;
}
.cs-hero-meta span::before { content: '·'; margin-right: 24px; color: #c9a96e; }
.cs-hero-meta span:first-child::before { display: none; }
.cs-hero-scroll-hint {
  position: absolute; bottom: 48px; right: 48px;
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: .25em; color: #3a3836;
}

/* Steps bar */
.cs-steps-bar {
  display: flex; align-items: center; gap: 0;
  padding: 20px 48px; border-bottom: 1px solid var(--border);
  position: sticky; top: 72px; background: rgba(7,7,7,.95);
  backdrop-filter: blur(8px); z-index: 90;
  overflow-x: auto;
}
.cs-step {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase;
  color: #3a3836; white-space: nowrap;
  transition: color .3s;
}
.cs-step.active { color: #c9a96e; }
.cs-step-dot {
  flex: 1; height: 1px; background: #1e1e1e;
  min-width: 20px; margin: 0 12px;
}

/* Section blocks */
.cs-section {
  padding: 80px 48px;
  border-bottom: 1px solid var(--border);
}
.cs-section-inner {
  display: grid; grid-template-columns: 200px 1fr; gap: 60px;
  max-width: 1100px; margin: 0 auto;
}
.cs-section-label { padding-top: 4px; }
.cs-section-num {
  display: block; font-family: 'Bebas Neue', sans-serif;
  font-size: 48px; line-height: 1; color: #c9a96e; opacity: .2;
  margin-bottom: 8px;
}
.cs-section-title {
  display: block; font-family: 'DM Mono', monospace;
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted);
}
.cs-section-content h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(22px, 2.5vw, 32px); font-style: italic;
  color: var(--muted); margin: 0 0 24px; line-height: 1.4;
}
.cs-section-content p {
  font-size: 16px; line-height: 1.9; color: var(--text);
  max-width: 640px; margin-bottom: 20px;
}
.cs-section-outcome { background: #090909; }
.cs-section-outcome .cs-section-num { opacity: .5; }

/* CS Gallery strip */
.cs-gallery-section { padding: 0; }
.cs-gallery-strip {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.cs-gallery-item {
  height: 280px; flex: 1; min-width: 200px;
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--surface);
}
.cs-gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.cs-gallery-item:hover img { transform: scale(1.04); }
.cs-gallery-overlay {
  position: absolute; inset: 0;
  background: rgba(7,7,7,0);
  display: flex; align-items: center; justify-content: center;
  color: #c9a96e; font-size: 20px;
  opacity: 0; transition: all .3s;
}
.cs-gallery-item:hover .cs-gallery-overlay {
  background: rgba(7,7,7,.4); opacity: 1;
}

/* CS nav */
.cs-nav { border-top: 1px solid var(--border); padding: 48px; }
.cs-nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1100px; margin: 0 auto; }
.cs-nav-item { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.cs-nav-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.cs-nav-name { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--text); }
.cs-nav-item:hover .cs-nav-name { color: #c9a96e; }
.cs-nav-next { text-align: right; }
.cs-nav-all { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: #c9a96e; text-decoration: none; }
.cs-nav-all:hover { color: var(--text); }

@media (max-width: 768px) {
  .cs-hero { padding: 0 24px 40px; }
  .cs-section { padding: 48px 24px; }
  .cs-section-inner { grid-template-columns: 1fr; gap: 16px; }
  .cs-section-num { font-size: 32px; display: inline; margin-right: 8px; }
  .cs-steps-bar { padding: 14px 24px; }
}

/* ═══════════════════════════════════════════════════════
   PRIVATE WORK SECTION
═══════════════════════════════════════════════════════ */
#private-work {
  border-top: 1px solid var(--border);
  padding: 80px 0;
}
.pw-header { padding: 0 48px 48px; }
.pw-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1; color: var(--text); margin: 0 0 16px;
}
.pw-sub { color: var(--muted); max-width: 480px; line-height: 1.8; }

/* Gate */
#pw-gate {
  display: flex; align-items: center; justify-content: center;
  min-height: 340px; padding: 40px 24px;
}
.pw-gate-inner { text-align: center; max-width: 380px; }
.pw-lock-icon { font-size: 40px; color: #c9a96e; margin-bottom: 20px; opacity: .6; }
.pw-gate-hint { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-style: italic; color: var(--muted); margin-bottom: 28px; line-height: 1.7; }
.pw-input-row { display: flex; gap: 0; border: 1px solid #2a2a2a; }
.pw-input {
  flex: 1; background: transparent; border: none;
  padding: 14px 18px; font-family: 'DM Mono', monospace;
  font-size: 13px; color: var(--text); letter-spacing: .15em;
  outline: none;
}
.pw-input::placeholder { color: #3a3836; }
.pw-submit {
  background: #c9a96e; border: none; color: #070707;
  padding: 14px 24px; font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
  cursor: pointer; transition: background .2s;
}
.pw-submit:hover { background: #e0c080; }
.pw-error { color: #b84040; font-family: 'DM Mono', monospace; font-size: 11px; margin-top: 12px; }

/* Unlocked */
.pw-grid { padding: 0 !important; }
.pw-videos {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 16px 48px;
}
.pw-video-item {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #2a2a2a; padding: 12px 20px;
  cursor: pointer; transition: border-color .2s;
}
.pw-video-item:hover { border-color: #c9a96e; }
.pw-play { font-size: 18px; color: #c9a96e; }
.pw-video-label { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); }
.pw-lock-badge {
  padding: 16px 48px;
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: .25em; text-transform: uppercase;
  color: #2a2a2a;
  display: flex; align-items: center; gap: 10px;
}

/* ═══════════════════════════════════════════════════════
   NOW PAGE
═══════════════════════════════════════════════════════ */
#now-page { background: var(--bg); min-height: 100vh; }
.now-hero {
  padding: 140px 48px 80px;
  border-bottom: 1px solid var(--border);
}
.now-hero-inner { max-width: 700px; }
.now-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(80px, 14vw, 180px);
  line-height: .9; color: var(--text);
  letter-spacing: -.01em; margin: 16px 0;
}
.now-intro { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 20px; color: var(--muted); line-height: 1.7; }

.now-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px; background: var(--border);
  border-top: 1px solid var(--border);
}
.now-card {
  background: var(--bg); padding: 40px 36px;
  transition: background .2s;
}
.now-card:hover { background: #0d0d0d; }
.now-card-avail { background: #090f09; }
.now-card-avail:hover { background: #0d140d; }
.now-card-icon { font-size: 20px; color: #c9a96e; margin-bottom: 16px; }
.now-card-label {
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: .35em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.now-card-body { font-size: 16px; line-height: 1.8; color: var(--text); }
.now-card-cta {
  display: inline-block; margin-top: 20px;
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: .25em; text-transform: uppercase;
  color: #c9a96e; text-decoration: none;
  border-bottom: 1px solid rgba(201,169,110,.3);
  padding-bottom: 2px;
}

.now-note-section { padding: 80px 48px; border-top: 1px solid var(--border); }
.now-note { max-width: 640px; margin: 0 auto; }
.now-note-rule { width: 40px; height: 1px; background: #c9a96e; margin-bottom: 32px; }
.now-note-text {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-style: italic; font-size: clamp(22px, 3vw, 36px);
  line-height: 1.6; color: var(--text); margin: 0;
}

.now-footer-link { padding: 48px; border-top: 1px solid var(--border); }
.now-back {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.now-back:hover { color: #c9a96e; }

@media (max-width: 768px) {
  .now-hero, .now-note-section, .now-footer-link { padding-left: 24px; padding-right: 24px; }
  .now-card { padding: 28px 24px; }
}

/* ═══════════════════════════════════════════════════════
   PRELOADER — all 4 animation variants
═══════════════════════════════════════════════════════ */

/* ── Shared shell ─────────────────────────────────── */

.pl-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  position: relative;
}

/* ════════════════════════════════════════════════════
   ANIMATION 1 — TYPEWRITER
   Name types letter by letter, blinking cursor, sub fades in
════════════════════════════════════════════════════ */
.pl-typewriter .pl-tw-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 7vw, 80px);
  letter-spacing: .12em;
  color: #ede9e0;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: 3px solid #c9a96e;
  /* Steps = number of characters in the name (default "BILLY" = 5) */
  animation:
    plTypeOut  1.4s steps(5, end) 0.2s forwards,
    plBlink    0.75s step-end infinite;
}
@keyframes plTypeOut { to { width: 8ch; } }
@keyframes plBlink   { 50% { border-color: transparent; } }

.pl-typewriter .pl-tw-sub {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: #c9a96e;
  opacity: 0;
  animation: plFadeUp 0.5s ease 1.8s forwards;
}
@keyframes plFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════
   ANIMATION 2 — SPLIT REVEAL
   Screen splits top and bottom like a stage curtain
════════════════════════════════════════════════════ */
.pl-split { position: relative; width: 100vw; height: 100vh; }

.pl-split .pl-sp-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 7vw, 80px);
  letter-spacing: .12em;
  color: #ede9e0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  white-space: nowrap;
  animation: plFadeIn 0.5s ease 0.1s both;
}
@keyframes plFadeIn { from { opacity:0; } to { opacity:1; } }

.pl-split .pl-sp-rule {
  position: absolute;
  top: calc(50% + 36px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: #c9a96e;
  z-index: 2;
  animation: plRuleGrow 0.7s ease 0.5s both;
}
@keyframes plRuleGrow { to { width: 44px; } }

.pl-split .pl-sp-sub {
  position: absolute;
  top: calc(50% + 52px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: #c9a96e;
  white-space: nowrap;
  z-index: 2;
  opacity: 0;
  animation: plFadeIn 0.5s ease 0.9s both;
}
.pl-split .pl-sp-top,
.pl-split .pl-sp-bot {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  background: #070707;
  z-index: 3;
}
.pl-split .pl-sp-top {
  top: 0;
  animation: plSplitUp 0.8s cubic-bezier(0.16,1,0.3,1) 1.6s forwards;
}
.pl-split .pl-sp-bot {
  bottom: 0;
  animation: plSplitDown 0.8s cubic-bezier(0.16,1,0.3,1) 1.6s forwards;
}
@keyframes plSplitUp   { to { transform: translateY(-100%); } }
@keyframes plSplitDown { to { transform: translateY(100%); } }

/* ════════════════════════════════════════════════════
   ANIMATION 3 — SCANNER
   Number counts from 0 to 100, scan line sweeps, bar fills
════════════════════════════════════════════════════ */
.pl-scanner { gap: 0; }

.pl-sc-line {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #c9a96e 40%, #c9a96e 60%, transparent 100%);
  animation: plScan 1.6s ease 0s infinite;
  z-index: 10;
}
@keyframes plScan {
  0%   { top: 0%;   opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.pl-sc-count {
  font-family: 'DM Mono', monospace;
  font-size: clamp(64px, 12vw, 120px);
  font-weight: 300;
  color: #ede9e0;
  line-height: 1;
  letter-spacing: -.02em;
  animation: plCount 1.6s steps(100, end) 0.1s both;
}
/* We animate via JS too — CSS provides the visual fade-in */
@keyframes plCount {
  0%  { opacity: .15; }
  20% { opacity: .35; }
  60% { opacity: .7;  }
  100%{ opacity: 1;   }
}

.pl-sc-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: #c9a96e;
  margin-top: 8px;
  animation: plFadeIn 0.4s ease 0.1s both;
}

.pl-sc-bar {
  width: min(300px, 60vw);
  height: 1px;
  background: #1e1e1e;
  margin-top: 24px;
  overflow: hidden;
}
.pl-sc-fill {
  height: 100%;
  background: #c9a96e;
  width: 0;
  animation: plBarFill 1.6s ease 0.1s both;
}
@keyframes plBarFill { to { width: 100%; } }

/* ════════════════════════════════════════════════════
   ANIMATION 4 — FILM STRIP
   35mm sprocket holes top + bottom, cinematic blur-in
════════════════════════════════════════════════════ */
.pl-film {
  width: 100vw;
  height: 100vh;
  gap: 0;
  justify-content: space-between;
}

.pl-film-top,
.pl-film-bot {
  width: 100%;
  height: 28px;
  background: #000;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
  flex-shrink: 0;
  border-bottom: 1px solid #111;
}
.pl-film-bot { border-top: 1px solid #111; border-bottom: none; }

.pl-sprocket {
  display: inline-block;
  width: 16px;
  height: 12px;
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  flex-shrink: 0;
}

.pl-film-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.pl-fi-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 7vw, 80px);
  letter-spacing: .12em;
  color: #ede9e0;
  line-height: 1;
  animation: plFilmBlur 0.9s ease 0.3s both;
}
@keyframes plFilmBlur {
  from { opacity: 0; filter: blur(8px); transform: scale(1.03); }
  to   { opacity: 1; filter: blur(0);   transform: scale(1); }
}

.pl-fi-rule {
  width: 0;
  height: 1px;
  background: #c9a96e;
  animation: plRuleGrow 0.8s ease 0.8s both;
}

.pl-fi-sub {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: #c9a96e;
  opacity: 0;
  animation: plFadeUp 0.5s ease 1.3s both;
}

.pl-fi-tc {
  position: absolute;
  top: 36px;
  left: 16px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .1em;
  color: #2a2a2a;
}

/* Offset scroll targets so fixed nav does not cover section headings */
section[id] { scroll-margin-top: 80px; }

/* ═══════════════════════════════════════════════════════
   SITE PRELOADER — single definitive block
═══════════════════════════════════════════════════════ */
#site-preloader {
  pointer-events: none !important; /* NEVER blocks clicks */
  animation: plAutoOut 0.6s ease 2s forwards;
}
@keyframes plAutoOut {
  0%   { opacity: 1; pointer-events: none; }
  99%  { opacity: 0; pointer-events: none; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; display: none; }
}
#site-preloader.pl-done {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Disabled reel state — no video set in admin */
.reel-disabled {
  cursor: default !important;
  opacity: 0.6;
}
.reel-disabled:hover .play-circle {
  transform: none !important;
  border-color: inherit !important;
}